Moved some values to a variables file

src/_layouts/home.html

@@ -7,7 +7,8 @@ layout: default
 <hr>
 
 <!-- Bit Goblin YouTube channel section -->
-<div id="bitgoblin-section" class="youtube-section">
+<section id="bitgoblin-section" class="youtube-section">
+
   <h3>Find Bit Goblin on <a href="{{ site.links.bitgoblin_channel }}">YouTube</a>.</h3>
 
   <div class="row">
@@ -26,12 +27,13 @@ layout: default
       <p>How About a Cheap, Used AMD Graphics Card? (R9 270X)</p>
     </a></div>
   </div>
-</div>
+
+</section>
 
 <hr>
 
 <!-- Ascendings YouTube channel section -->
-<div id="Ascendings-section" class="youtube-section">
+<section id="Ascendings-section" class="youtube-section">
 
   <h3>Like watching Old School RuneScape videos? Go watch <a href="{{ site.links.ascendings_channel }}">Ascendings</a>.</h3>
 
@@ -52,7 +54,7 @@ layout: default
     </a></div>
   </div>
 
-</div>
+</section>
 
 <hr>
 

src/assets/stylesheets/_variables.sass

@@ -0,0 +1,4 @@
+$footer-height: 165px
+
+$color-primary: #1e76d1
+$color-primary-hover: darken(#1e76d1, 10%)

src/assets/stylesheets/lumbridge.sass

@@ -1,19 +1,21 @@
 ---
 ---
 
+@import "_variables"
+
 body
   font-family: "Gill Sans", sans-serif
   font-size: 2rem
   margin: 0
-  padding-bottom: 125px
+  padding-bottom: $footer-height
 
 a
-  color: #1e76d1
+  color: $color-primary
   font-weight: 500
   text-decoration: none
   transition: color 200ms ease-in-out
   &:hover
-    color: darken(#1e76d1, 10%)
+    color: $color-primary-hover
 
 hr
   margin-top: 35px
@@ -32,6 +34,8 @@ hr
   padding: 0
   background: white
 
+// header
+
 #header-box
   position: relative
   z-index: 2
@@ -86,7 +90,7 @@ hr
         text-decoration: underline
 
 #main-content
-  margin-bottom: 40px
+  padding-bottom: 40px
 
 // home page styles
 
@@ -97,13 +101,16 @@ hr
     padding: 15px 20px 0
     border: 2px solid #bbb
 
-    img
+    img, p
       transition: all 300ms ease-in-out
 
     &:hover
       img
         transform: scale(1.1)
 
+      p
+        transform: translate(20px, 10px) scale(1.1)
+
 // Blog posts page
 
 #post-list
@@ -125,12 +132,12 @@ hr
 // footer section
 
 #footer
+  box-sizing: border-box
   position: fixed
   z-index: -1
   bottom: 0
   width: 100%
-  margin-top: 25px
+  height: $footer-height
-  padding-top: 15px
+  padding-top: 25px
   background: #212121
-  border-top: 2px solid #999
   color: white