Moved the site over to Ruby on Rails

app/assets/config/manifest.js

@@ -0,0 +1,4 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/assets/stylesheets/_variables.sass

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

app/assets/stylesheets/lumbridge.sass.erb

@@ -0,0 +1,156 @@
+@import "_variables"
+
+body
+  font-family: "Gill Sans", sans-serif
+  font-size: 2rem
+  margin: 0
+  padding-bottom: $footer-height
+
+a
+  color: $color-primary
+  font-weight: 500
+  text-decoration: none
+  transition: color 300ms ease-in-out
+  &:hover
+    color: $color-primary-hover
+
+hr
+  margin-top: 35px
+  margin-bottom: 35px
+
+.u-text-center
+  text-align: center
+
+.post-info
+  color: #999
+  font-style: italic
+
+// 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
+
+#header-box
+  position: relative
+  z-index: 2
+  height: 500px
+  background:
+    image: url(<%= asset_data_uri 'bg-banner.jpg' %>)
+    size: auto 600px
+    position: top center
+    attachment: fixed
+  overflow: hidden
+
+#header-logo
+  height: 350px
+  width: 350px
+  background:
+    image: url(<%= asset_data_uri 'bg-icon.png' %>)
+    position: center
+    repeat: no-repeat
+    size: contain
+  position: absolute
+  top: 40px
+  left: 50%
+  transform: translateX(-50%)
+
+  h1
+    margin-top: calc(100% + 25px)
+    color: white
+    font:
+      weight: bold
+    text-align: center
+
+#navigation
+  width: 100%
+  margin-top: 40px
+  margin-bottom: 40px
+  text-align: center
+
+  ul
+    list-style: none
+
+    li
+      display: inline-block
+      margin: 0
+      padding: 0
+      border-radius: 10px
+      font-size: 3rem
+      transition: all 300ms ease-in-out
+      &:hover
+        background: rgba(#000000, 0.1)
+        margin-left: 25px
+        margin-right: 25px
+        transform: scale(1.1)
+      a
+        padding: 20px 30px
+        text-decoration: underline
+
+#main-content
+  padding-bottom: 40px
+
+// home page styles
+
+.youtube-section
+  @media only screen and (min-device-width: 960px)
+    .row
+      position: relative
+      .video-card:nth-child(1)
+        transform: translate(100px, 20px)
+      .video-card:nth-child(2)
+        position: relative
+        z-index: 20
+      .video-card:nth-child(3)
+        transform: translate(-100px, 20px)
+
+  .video-card a
+    display: block
+    margin-bottom: 25px
+    padding: 15px 20px 0
+    background: white
+    border: 2px solid #bbb
+
+    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
+  list-style: none
+
+  li
+    padding: 15px 20px 0
+    border: 2px solid #bbb
+
+  .post-title
+    margin-bottom: 3px
+
+  .post-body
+    margin-bottom: 0
+
+// footer section
+
+#footer
+  box-sizing: border-box
+  position: fixed
+  z-index: 1
+  bottom: 0
+  width: 100%
+  height: $footer-height
+  padding-top: 35px
+  background: #212121
+  color: white