Finished the website

.gitignore

@@ -1,2 +1,5 @@
 # ignore the node_modules directory since this can be automatically generated
 node_modules/
+
+# ignore the generated CSS files (source files are SASS)
+public/css/

assets/sass/camelot.sass

@@ -0,0 +1,61 @@
+body
+  background: black
+  color: #eee
+  font-size: 16px
+
+a
+  color: #2ecc71
+  text-decoration: none
+  transition: color 300ms ease-in-out
+  &:hover
+    color: darken(#2ecc71, 10%)
+
+table
+  box-sizing: border-box
+  width: 100%
+  border: none
+  tr
+    &:not(:last-child)
+      td
+        border-bottom: 1px solid white
+    td
+      border: none
+      &:not(:last-child)
+        border-right: 1px solid white
+
+#background-image
+  position: fixed
+  left: 0
+  top: 0
+  z-index: -1
+  width: 100%
+  max-height: 100%
+  // Add blur effect
+  filter: blur(5px) grayscale(30%) brightness(85%)
+  -webkit-filter: blur(5px) grayscale(30%) brightness(85%)
+
+#main-container
+  max-width: 1050px
+  margin-top: 30px
+  margin-bottom: 50px
+  padding: 25px 45px
+  background: #333
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+
+#main-header
+  margin-bottom: 40px
+
+.server-info
+  h3
+    text-align: center
+    text-decoration: underline
+  td
+    font-size: 2rem
+
+#site-links
+  h5
+    font-weight: bold
+    text-decoration: underline
+  ul
+    list-style: none
+    font-size: 2rem

gulpfile.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-dart-sass');
+
+// compile SASS stylesheets
+function stylesheets() {
+  return gulp.src('./assets/sass/*.sass')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./public/css'));
+}
+
+// watch for assets that need compiling
+function watch() {
+  gulp.watch('./assets/sass/*.sass', stylesheets);
+}
+
+// export commands
+exports.sass = stylesheets;
+exports.watch = watch;

package.json

@@ -4,7 +4,8 @@
   "version": "0.1.0",
   "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "server": "node server.js",
+    "gulp": "gulp"
   },
   "repository": {
     "type": "git",
@@ -15,5 +16,9 @@
   "dependencies": {
     "express": "^4.17.1",
     "pug": "^3.0.2"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-dart-sass": "^1.0.2"
   }
 }

server.js

@@ -9,12 +9,15 @@ var siteRoutes = require('./routes/site');
 app.set('views', './views');
 app.set('view engine', 'pug');
 
-// middleware
+// logging middleware
 app.use((req, res, next) => {
 	console.log(`${req.method}: ${req.url}`);
 	next();
 });
 
+// serve static files from the public/ directory
+app.use(express.static('public'));
+
 // register routes
 app.get('/', siteRoutes.index);
 

views/index.pug

@@ -6,15 +6,25 @@ html
     link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css')
     link(rel='stylesheet' href='/css/camelot.css')
   body
-    .container
+    img#background-image(src='/img/minecraft-landscape-1.png')
-      header.row
+
+    div#main-container.container
+      header#main-header.row
         .columns.twelve
           img.u-max-full-width(src='https://i.imgur.com/XJQoBDx.png' alt='Minecraft java edition logo')
       
       section.row
-        article.columns.twelve
+        p Welcome to the Bit Goblin community Minecraft server! This is hosted free-of-charge for anyone who so pleases. I'm open to expanding how many/what servers are being hosted, so be sure to let me know any additions/changes you think should be made!
-          h3 Server #1
+        
+        p The only rules for the server(s) are as follows: "Be excellent to each other." So go out and have fun, but please don't be a jerk!
+      
+      hr
+      
+      section.row
+        article.server-info.columns.twelve
+          h3 Server Info
           table
+            tbody
               tr
                 td Address
                 td mc1.bitgoblin.tech
@@ -28,9 +38,18 @@ html
                 td Mode
                 td Survival
               tr
-              td Mods?
+                td Server Type
-              td None (Vanilla)
+                td Vanilla
 
-      footer.row
+      hr
-        .columns.twelve
+
+      footer#main-footer.row
+        .columns.six
           p Hosted by Bit Goblin, with love.
+        
+        #site-links.columns.six
+          h5 Other Bit Goblin sites:
+          ul
+            li #[a(href='https://www.bitgoblin.tech') Main Website]
+            li #[a(href='https://youtube.com/BitGoblin') YouTube]
+            li #[a(href='https://twitch.tv/brotherballan') Twitch]