Added styles from production site

index.js

@@ -8,7 +8,7 @@ app.set('views', './views');
 app.set('view engine', 'pug');
 
 // serve static files
-app.use('/static', express.static(path.join(__dirname, 'public')));
+app.use('/assets', express.static(path.join(__dirname, 'public')));
 
 // Index GET route
 app.get('/', (req, res) => {

public/scripts/vorkath.coffee

@@ -1,2 +1,17 @@
-$ ->
+$(window).scroll ->
-	console.log('This is a test.')
+  wScroll = $(this).scrollTop()
+
+  console.log(wScroll + ' | ' + window.innerHeight)
+
+  # Header parallax
+  $('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')
+  $('#header-logo h1').css('transform', 'translateY(-' + (wScroll / 2) + 'px)')
+
+  # YouTube section parallax
+  if not (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+    $('.youtube-section').each (i, e) ->
+      if wScroll >= ($(e).offset().top - window.innerHeight)
+        offset = (Math.min(0, wScroll - $(e).offset().top + window.innerHeight - 500)).toFixed()
+
+        $(e).find('.video-card:first-child').css('transform': 'translate(' + offset + 'px, ' + Math.abs(offset * 0.2) + 'px)')
+        $(e).find('.video-card:last-child').css('transform': 'translate(' + Math.abs(offset) + 'px, ' + Math.abs(offset * 0.2) + 'px)')

public/stylesheets/_variables.sass

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

public/stylesheets/zulrah.sass

@@ -1,2 +1,155 @@
+@import "_variables"
+
 body
-  background: grey
+  height: auto
+  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
+
+// this wrapper is only used to hide the footer
+#wrapper
+  position: relative
+  z-index: 10
+  width: 100%
+  margin: 0
+  padding: 0
+  background: white
+
+// header
+
+#header-box
+  position: relative
+  z-index: 2
+  height: 500px
+  background:
+    image: url(/assets/images/bg-banner.jpg)
+    size: auto 600px
+    position: top center
+    attachment: fixed
+  overflow: hidden
+
+#header-logo
+  height: 350px
+  width: 350px
+  background:
+    image: url(/assets/images/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-info
+    color: #999
+
+  .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

views/index.pug

@@ -1,10 +1,78 @@
-doctype=html
+extends layout.pug
-html
+
-  head
+block content
-    title Bit Goblin
+  p Welcome! My name is Greg Ballantine and Bit Goblin is my passion project for creating YouTube videos on tech. I love tinkering with all things related to computers, and I enjoy documenting the things that I do so that others can use my struggles to ease their own. Whether it's buildings PCs, playing with networking gear, or exploring the beauty of Linux, there are lots of things to play with and try to help others with.
-    link(rel='stylesheet', href='/static/stylesheets/zulrah.css')
+
-    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js')
+  p Not only do I create tech videos for Bit Goblin, but I'm also trying to build a community around it for great people to just chill, have fun, and help each other out when need arises. Ranging from the aforementioned YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, a Discord server for everyone to relax and chat with each other, a future community forum and other services. Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough, right?
-    script(src='/static/scripts/vorkath.js')
+
-  body
+  p I do work with sponsors to help fund my projects. If you're curious about who I've worked with before, check out the [Sponsors page](/sponsor).
-    h1 Bit Goblin
+
-    p This is a test!
+  hr
+
+  // Bit Goblin YouTube channel section
+  section#bitgoblin-section.youtube-section
+
+    h3 Find Bit Goblin on #[a(href='https://youtube.com/BitGoblin') YouTube].
+
+    .row
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=cYSLW1qIzKE')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-46-thumbnail.png',alt='Add a Bunch of Hard Drives to Your PC! (kinda...)')
+          p How to Install the NVIDIA Driver on Linux
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=4oCuX4xFieo')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png',alt='How About a Cheap, Used AMD Graphics Card? (R9 270X)')
+          p How About a Cheap, Used AMD Graphics Card? (R9 270X)
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=kMaFYUNwE5U')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png',alt='Let\'s Take a Look at Debian 10 Buster')
+          p Let's Take a Look at Debian 10 "Buster"
+
+  hr
+
+  // Ascendings YouTube channel section
+  section#Ascendings-section.youtube-section
+
+    h3 Like watching Old School RuneScape videos? Go watch #[a(href='https://youtube.com/AscendingsRS') Ascendings].
+
+    .row
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=LtOpQv6ZBq0&list=PLIg6BQwweIwGdQNrbDMwGPxifgJ7iIXnE')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-37-thumbnail.png',alt='F2P Hardcore Ironman Playlist')
+          p F2P Hardcore Ironman Playlist
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=AhcCiqDegr0')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-30-thumbnail.jpg',alt='Is Daeyalt Essence Worth Using?')
+          p Is Daeyalt Essence Worth Using?
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=W3pFR_e3OuM')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-19-thumbnail.jpg',alt='Karambwan Cooking alt')
+          p Karambwan Cooking alt
+
+  hr
+
+  // Minecraft server callout section
+  section.minecraft-section
+
+    h3 Play Minecraft? Go check out the #[a(href='https://mc.bitgoblin.tech') community Minecraft server]!
+
+    img.u-max-full-width(src='https://static.wikia.nocookie.net/minecraft_gamepedia/images/f/ff/Java_Edition_logo_12.png',alt='Minecraft Java Edition logo')
+
+    p This world is open to everyone who would like to play on it. There are no mods installed, and currently only world is available. I am open to adding mods in the future and even adding more worlds, just let me know!
+
+    p #[strong Note:] The website is currently a work in progress, but it will be up soon!
+
+  hr
+
+  // Bit Goblin forum callout section
+  section#forum-section
+
+    h3 You can also participate in the #[a(href='https://forum.bitgoblin.tech') community forum]!
+
+    p Some of us love the old-style internet forums to converse and help others out. Anything you would like to discuss may happen here under the proper forum sections.
+
+    p #[strong Note:] Currently the Bit Goblin forum is under construction, but check back soon if you'd like to participate!

views/layout.pug

@@ -0,0 +1,38 @@
+doctype=html
+html
+  head
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    title Bit Goblin
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css')
+    link(rel='stylesheet', href='/assets/stylesheets/zulrah.css')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js')
+    script(src='/assets/scripts/vorkath.js')
+
+  body
+    #wrapper
+      header#header-box
+        div#header-logo
+          h1 Bit Goblin
+
+      nav#navigation
+        ul
+          li
+            a(href="/") Home
+          li
+            a(href="/blog") Blog Posts
+          li
+            a(href="/support") Support
+          li
+            a(href="/contact") Contact
+
+      #main-content.container
+        .row
+          .columns.twelve
+            block content
+
+    footer#footer
+      .row
+        div.columns.twelve
+          p.u-text-center The Bit Goblin website.
+          p.u-text-center © Bit Goblin | all rights reserved.