feat: make navbar & Discord widget sticky

fishy-studioz · May 28, 2024 · cc41e86 · cc41e86
1 parent 2398fde
commit cc41e86
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/includes/page.liquid b/src/includes/page.liquid
@@ -31,7 +31,7 @@
     </nav>
     <main>
       <h1>{{ title | split: " | " | first }}</h1>
-      <iframe class="top-right" src="https://discord.com/widget?id=1172086382781530162&theme=dark" width="350" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+      <iframe class="discord-widget" src="https://discord.com/widget?id=1172086382781530162&theme=dark" width="350" height="400" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
       {{ content }}
     </main>
     <footer>

diff --git a/src/includes/sass/style.sass b/src/includes/sass/style.sass
@@ -30,7 +30,9 @@ body
   display: flex
   flex-direction: column
 
+$navbar-height: 55px
 main
+  padding-top: $navbar-height
   flex: 1
 
 $ease-time: 0.2s
@@ -54,7 +56,6 @@ p
 
 $navbtn-color: #333
 $navbtn-color-hovered: #252729
-$navbar-height: 55px
 $navbtn-height: ceil($navbar-height / 2) - 5px
 @mixin navbtn
   display: flex
@@ -75,10 +76,13 @@ $navbtn-height: ceil($navbar-height / 2) - 5px
     background-color: $navbtn-color
     transition: background-color $ease-time ease-in-out
 
-.top-right
-  position: absolute
-  top: $navbar-height * 1.6
-  right: 10px
+$footer-height: 65px
+.discord-widget
+  position: fixed
+  padding-top: $navbar-height + $footer-height
+  position: 50%
+  right: 15px
+  z-index: 1030
 
 a.navbtn
   @include navbtn
@@ -92,9 +96,13 @@ a.home
     height: $navbar-height / 1.15
 
 nav
+  display: inline-block
+  position: fixed
+  top: 0
+  width: 100%
+  z-index: 1030
   background-color: $navbtn-color
   height: $navbar-height
-  display: inline-block
   ul
     list-style-type: none
     margin: 0
@@ -120,9 +128,9 @@ li.listed
 footer
   background-color: #333
   color: white
-  height: 65px
+  height: $footer-height
   text-align: center
 
 footer p
   margin-left: 15px
-  margin-right: 15px
+  margin-right: 15px
diff --git a/src/projects.md b/src/projects.md
@@ -16,4 +16,4 @@ Welcome to Untitled FPS Game. This movement-based chaotic experience melds multi
 The game is consistently updating (somewhat), so be sure to look out for new features.
 <iframe width="560" height="315" src="https://www.youtube.com/embed/w5snscTV9Jo?si=xa40DuyVc5KQfnO5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/-Ak9i4CH4yo?si=azyIl0sT2cSpKrqd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/odj9vMEYlFE?si=fnFKjUosQuiQOafM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/odj9vMEYlFE?si=fnFKjUosQuiQOafM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br><br><br><br>