fix layout issue with mandala & improve mandala sizing
This commit is contained in:
parent
40b091211f
commit
97cc9384e5
6 changed files with 29 additions and 100 deletions
|
|
@ -1,109 +1,38 @@
|
|||
/* rolling mandala */
|
||||
// @-webkit-keyframes roll-in {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -moz-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -ms-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -o-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// }
|
||||
// }
|
||||
// @-moz-keyframes roll-in {
|
||||
// 0% {
|
||||
// -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -moz-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -ms-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// -o-transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// @keyframes roll-in {
|
||||
// 0% {
|
||||
// transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
// }
|
||||
// }
|
||||
// .roll-mandala {
|
||||
// position: absolute;
|
||||
// right: $mandala_distance_right;
|
||||
// top: 50%;
|
||||
// width: $mandala_width;
|
||||
// pointer-events: none;
|
||||
// opacity: .5;
|
||||
// z-index: -999;
|
||||
// animation: roll-in 2s cubic-bezier(0.51, 0.04, 0.68, 1.08);
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
|
||||
$mandala_height_base: 76vh;
|
||||
$mandala_right_shift: math.div($mandala_height_base, -2);
|
||||
$mandala_final_opacity: 0.25;
|
||||
$mandala_final_opacity: 0.20;
|
||||
|
||||
@keyframes roll_in {
|
||||
0% {
|
||||
transform: rotate(80deg) translateY(-50%) translateX(-50%);
|
||||
transform: rotate(80deg) translateY(-40vh) translateX(-30vw);
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0) translateY(-50%) translateX(0px);
|
||||
transform: rotate(0) translateY(-40vh) translateX(0px);
|
||||
opacity: $mandala_final_opacity;
|
||||
}
|
||||
}
|
||||
|
||||
$xs_mandala_height: 170vw;
|
||||
$md_mandala_height: 120vw;
|
||||
|
||||
.roll-mandala {
|
||||
height: $mandala_height_base;
|
||||
height: $xs_mandala_height;
|
||||
max-width: inherit !important;
|
||||
position: absolute;
|
||||
right: $mandala_right_shift;
|
||||
right: math.div($xs_mandala_height, -2.1);
|
||||
top: 50%;
|
||||
pointer-events: none;
|
||||
z-index: -999;
|
||||
transform: translateY(-50%);
|
||||
transform: translateY(-40vh);
|
||||
opacity: $mandala_final_opacity;
|
||||
animation: roll_in 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.roll-mandala {
|
||||
height: $md_mandala_height;
|
||||
right: math.div($md_mandala_height, -2.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
dist/main.min.css
vendored
2
dist/main.min.css
vendored
File diff suppressed because one or more lines are too long
11
footer.php
11
footer.php
|
|
@ -21,5 +21,16 @@ namespace WP_RDNYC;
|
|||
|
||||
<?php wp_footer(); ?>
|
||||
|
||||
<?php
|
||||
if (is_front_page()) :
|
||||
?>
|
||||
<img
|
||||
src="<?php echo get_template_directory_uri() . '/dist/images/svg-roll-mandala.svg'; ?>"
|
||||
class="img roll-mandala" aria_hidden="true"
|
||||
>
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
11
header.php
11
header.php
|
|
@ -42,17 +42,6 @@ namespace WP_RDNYC;
|
|||
|
||||
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
|
||||
|
||||
<?php
|
||||
if (is_front_page()) :
|
||||
?>
|
||||
<img
|
||||
src="<?php echo get_template_directory_uri() . '/dist/images/svg-roll-mandala.svg'; ?>"
|
||||
class="img roll-mandala" aria_hidden="true"
|
||||
>
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
|
||||
<nav id="nt-out" class="container-fluid mb-4 mb-sm-4-2 mb-lg-4-25 mb-xl-5 mb-xxl-7">
|
||||
|
||||
<div class="nt-brand">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "wp-rdnyc-theme",
|
||||
"author": "Adam Piontek <adam@73k.us> (https://73k.us)",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"description": "Wordpress theme for Recovery Dharma NYC",
|
||||
"homepage": "https://github.com/apiontek/wp-rdnyc",
|
||||
"contributors": [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Theme URI: https://github.com/apiontek/wp-rdnyc
|
||||
* Author: Adam Piontek
|
||||
* Author URI: https://73k.us
|
||||
* Version: 1.0.9
|
||||
* Version: 1.0.10
|
||||
* License: GNU General Public License v3 or later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
|
||||
* Text Domain: wp-rdnyc
|
||||
|
|
|
|||
Loading…
Reference in a new issue