Updated the styles of the home page and reorganized it a bit

src/assets/stylesheets/_variables.sass

@@ -1,4 +1,8 @@
-$footer-height: 150px
+$container-width: 960px
+
+$footer-height: 210px
 
 $color-primary: #1e76d1
-$color-primary-hover: darken(#1e76d1, 10%)
+$color-primary-hover: darken($color-primary, 10%)
+$color-primary-light: lighten($color-primary, 10%)
+

src/assets/stylesheets/lumbridge.sass

@@ -29,6 +29,9 @@ hr
   color: #999
   font-style: italic
 
+.container
+  max-width: $container-width
+
 // this wrapper is only used to hide the footer
 #wrapper
   position: relative
@@ -121,12 +124,20 @@ hr
     background: white
     border: 2px solid #bbb
 
+    .img-wrap
+      margin: 0
+      padding: 0
+      text-align: center
+
+    img
+      max-height: 152px
+
     img, p
       transition: all 300ms ease-in-out
 
     &:hover
       img
-        transform: scale(1.1)
+        transform: scale(1.2)
 
       p
         transform: translate(20px, 10px) scale(1.1)
@@ -155,12 +166,39 @@ hr
   bottom: 0
   width: 100%
   height: $footer-height
-  padding-top: 35px
   background: #212121
   color: white
 
+  .row
+    height: 100%
+    display: flex
+
+  .columns
+    margin-top: auto
+    margin-bottom: auto
+
+  #useful-links
+    display: flex
+
+    ul
+      list-style: none
+      display: inline-block
+      margin: 0 auto
+      text-align: left
+
+      li:last-child
+        margin-bottom: 0
+        padding-bottom: 0
+
   p
     text-align: center
     &:not(:last-child)
       margin-bottom: 5px
+    &:last-child
+      margin-bottom: 0
+
+  a
+    color: $color-primary-light
+    &:hover
+      color: $color-primary