diff --git a/assets/sass/pages/homepage.scss b/assets/sass/pages/homepage.scss index 4d0fa43..9675016 100644 --- a/assets/sass/pages/homepage.scss +++ b/assets/sass/pages/homepage.scss @@ -7,6 +7,12 @@ padding-top: 200px; + @include media-up(lg) { + position: absolute; + bottom: 28%; + width: 100%; + } + > div { display: grid; align-items: center; @@ -158,6 +164,7 @@ .navigation { position: relative; + z-index: 999; display: grid; @@ -165,6 +172,9 @@ @include media-up(lg) { grid-template-columns: repeat(4, 1fr); + position: absolute; + bottom: 5%; + width: 100%; } > div { diff --git a/assets/sass/partials/_neon-sign.scss b/assets/sass/partials/_neon-sign.scss index 747dcd8..edaf3f4 100644 --- a/assets/sass/partials/_neon-sign.scss +++ b/assets/sass/partials/_neon-sign.scss @@ -1,8 +1,27 @@ +// Function for standard neon glow effect +@function neon-glow($color) { + @return 0 0 5px #fff, 0 0 5px #fff, 0 0 21px $color, 0 0 42px $color, + 0 0 82px $color, 0 0 92px $color, 0 0 142px $color, 0 0 181px $color; +} + /* Neon sign styling */ .neon-sign { text-align: center; line-height: 5rem; - transform: rotate(-10deg); + + .homepage-neon & { + transform: rotate(-5deg); + width: 90%; + margin: auto; + + @include media-up(lg) { + position: absolute; + top: 5%; + left: 60%; + transform: translateX(-50%) rotate(-10deg); + z-index: 1; + } + } @include media-up(lg) { position: absolute; @@ -62,12 +81,6 @@ } } -// Function for standard neon glow effect -@function neon-glow($color) { - @return 0 0 5px #fff, 0 0 5px #fff, 0 0 21px $color, 0 0 42px $color, - 0 0 82px $color, 0 0 92px $color, 0 0 142px $color, 0 0 181px $color; -} - // Mixin for pulse animation - generates keyframes for any color @mixin neon-pulse-animation($name, $color) { @keyframes #{$name} { diff --git a/assets/sass/partials/_vu-meter.scss b/assets/sass/partials/_vu-meter.scss index 05ac633..fb1f578 100644 --- a/assets/sass/partials/_vu-meter.scss +++ b/assets/sass/partials/_vu-meter.scss @@ -1,11 +1,14 @@ /* VU Meter on desk */ .vu-meter { position: absolute; - left: 50%; top: 10px; width: 120px; height: 60px; z-index: 8; + + @include media-up(md) { + left: 50%; + } } .vu-meter-body { diff --git a/layouts/index.html b/layouts/index.html index 109f8ef..3d3a5cb 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,7 +6,7 @@
-{{ partial "elements/neon-sign.html" . }} +