adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix layout issue with mandala & improve mandala sizing

Browse source
This commit is contained in:
Adam Piontek 2021-11-10 17:23:36 -05:00
parent 40b091211f
commit 97cc9384e5
6 changed files with 29 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
assets/css/_rolling-mandala.scss
View file

@ -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"; @use "sass:math";
$mandala_final_opacity: 0.20;
$mandala_height_base: 76vh;
$mandala_right_shift: math.div($mandala_height_base, -2);
$mandala_final_opacity: 0.25;
@keyframes roll_in { @keyframes roll_in {
0% { 0% {
transform: rotate(80deg) translateY(-50%) translateX(-50%); transform: rotate(80deg) translateY(-40vh) translateX(-30vw);
opacity: 1.0; opacity: 1.0;
} }
100% { 100% {
transform: rotate(0) translateY(-50%) translateX(0px); transform: rotate(0) translateY(-40vh) translateX(0px);
opacity: $mandala_final_opacity; opacity: $mandala_final_opacity;
} }
} }
$xs_mandala_height: 170vw;
$md_mandala_height: 120vw;
.roll-mandala { .roll-mandala {
height: $mandala_height_base; height: $xs_mandala_height;
max-width: inherit !important; max-width: inherit !important;
position: absolute; position: absolute;
right: $mandala_right_shift; right: math.div($xs_mandala_height, -2.1);
top: 50%; top: 50%;
pointer-events: none; pointer-events: none;
z-index: -999; z-index: -999;
transform: translateY(-50%); transform: translateY(-40vh);
opacity: $mandala_final_opacity; opacity: $mandala_final_opacity;
animation: roll_in 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08); 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
View file

File diff suppressed because one or more lines are too long

11
footer.php
View file

@ -21,5 +21,16 @@ namespace WP_RDNYC;
<?php wp_footer(); ?> <?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> </body>
</html> </html>

11
header.php
View file

@ -42,17 +42,6 @@ namespace WP_RDNYC;
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage"> <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"> <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"> <div class="nt-brand">

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "wp-rdnyc-theme", "name": "wp-rdnyc-theme",
"author": "Adam Piontek <adam@73k.us> (https://73k.us)", "author": "Adam Piontek <adam@73k.us> (https://73k.us)",
"version": "1.0.9", "version": "1.0.10",
"description": "Wordpress theme for Recovery Dharma NYC", "description": "Wordpress theme for Recovery Dharma NYC",
"homepage": "https://github.com/apiontek/wp-rdnyc", "homepage": "https://github.com/apiontek/wp-rdnyc",
"contributors": [ "contributors": [

2
style.css
View file

@ -3,7 +3,7 @@
* Theme URI: https://github.com/apiontek/wp-rdnyc * Theme URI: https://github.com/apiontek/wp-rdnyc
* Author: Adam Piontek * Author: Adam Piontek
* Author URI: https://73k.us * Author URI: https://73k.us
* Version: 1.0.9 * Version: 1.0.10
* License: GNU General Public License v3 or later * License: GNU General Public License v3 or later
* License URI: https://www.gnu.org/licenses/gpl-3.0.html * License URI: https://www.gnu.org/licenses/gpl-3.0.html
* Text Domain: wp-rdnyc * Text Domain: wp-rdnyc