Updated SASS configuration

Added some parallax to the footer - the footer now gets revealed as you scroll down instead of moving with the page
2021-08-20 23:38:00 -04:00 · 2021-08-20 22:52:10 -04:00
3 changed files with 40 additions and 17 deletions
--- a/src/_config.yml
+++ b/src/_config.yml
@ -18,3 +18,7 @@ links:
 # Build settings
 plugins:
  - jekyll-feed
+
+sass:
+  sass_dir: 'assets/stylesheets'
+  style: 'compressed'
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@ -10,25 +10,27 @@
  <script src="/assets/scripts/varrock.js"></script>
 </head>
 <body>
-  <header id="header-box">
-    <div id="header-logo">
-      <h1>Bit Goblin</h1>
-    </div>
-  </header>
+  <div id="wrapper">
+    <header id="header-box">
+      <div id="header-logo">
+        <h1>Bit Goblin</h1>
+      </div>
+    </header>

-  <nav id="navigation">
-    <ul>
-      <li><a href="{% link index.markdown %}">Home</a></li>
-      <li><a href="{% link blog.markdown %}">Blog Posts</a></li>
-      <li><a href="{% link support.markdown %}">Support</a></li>
-      <li><a href="{% link contact.markdown %}">Contact</a></li>
-    </ul>
-  </nav>
+    <nav id="navigation">
+      <ul>
+        <li><a href="{% link index.markdown %}">Home</a></li>
+        <li><a href="{% link blog.markdown %}">Blog Posts</a></li>
+        <li><a href="{% link support.markdown %}">Support</a></li>
+        <li><a href="{% link contact.markdown %}">Contact</a></li>
+      </ul>
+    </nav>

-  <div id="main-content" class="container">
-    <div class="row">
-      <div class="columns twelve">
-        {{ content }}
+    <div id="main-content" class="container">
+      <div class="row">
+        <div class="columns twelve">
+          {{ content }}
+        </div>
      </div>
    </div>
  </div>
--- a/src/assets/stylesheets/lumbridge.sass
+++ b/src/assets/stylesheets/lumbridge.sass
@ -5,6 +5,7 @@ body
  font-family: "Gill Sans", sans-serif
  font-size: 2rem
  margin: 0
+  padding-bottom: 125px

 a
  color: #1e76d1
@ -21,8 +22,19 @@ hr
 .u-text-center
  text-align: center

+// this wrapper is only used to hide the footer
+#wrapper
+  position: relative
+  z-index: 10
+  width: 100%
+  height: 100%
+  margin: 0
+  padding: 0
+  background: white
+
 #header-box
  position: relative
+  z-index: 2
  height: 500px
  background:
    image: url(/assets/images/bg-banner.jpg)
@ -113,7 +125,12 @@ hr
 // footer section

 #footer
+  position: fixed
+  z-index: -1
+  bottom: 0
  width: 100%
  margin-top: 25px
  padding-top: 15px
+  background: #212121
  border-top: 2px solid #999
+  color: white
Author	SHA1	Message	Date
Gregory Ballantine	dad601e54b	Updated SASS configuration	2021-08-20 23:38:00 -04:00
Gregory Ballantine	4abc629afa	Added some parallax to the footer - the footer now gets revealed as you scroll down instead of moving with the page	2021-08-20 22:52:10 -04:00