let users define their own font

content/assets/stylesheets/includes/navbar.scss

@@ -1,56 +1,57 @@
 #navbar {
-  align-items: flex-end;
+    align-items: flex-end;
+    margin-bottom: 10px;
+    z-index: 100;
 
-  z-index: 100;
-  margin-bottom: 10px;
+    .logo-wrapper {
+        padding-bottom: 0;
+        position: relative;
 
-  .logo-wrapper {
-    padding-bottom: 0;
-    position: relative;
-
-    #santa {
-      position: absolute;
-      z-index: 300;
-      left: 5px;
-      bottom: 0;
-      width: 60px;
+        #santa {
+            bottom: 0;
+            left: 5px;
+            position: absolute;
+            width: 60px;
+            z-index: 300;
+        }
     }
-  }
 
-  .navbar:not(.is-transparent) #logo-link {
-    @include desktop {
-      width: 124px;
-      border-bottom: 2px solid $body-background;
-      margin-bottom: -2px;
+    .navbar:not(.is-transparent) #logo-link {
+        @include desktop {
+            border-bottom: 2px solid $body-background;
+            margin-bottom: -2px;
+            width: 124px;
+        }
+
+
+        #logo {
+            @include desktop {
+                max-width: none;
+                max-height: none;
+                left: 0;
+                bottom: 5px;
+                width: 100px;
+                position: absolute;
+            }
+        }
     }
-    #logo {
-      @include desktop {
-        max-width: none;
-        max-height: none;
-        left: 0;
-        bottom: 5px;
-        width: 100px;
-        position: absolute;
-      }
-    }
-  }
 
-  .navbar-item {
-    font-variant: small-caps;
-    font-size: 1.15em; 
-  }
-
-  .navbar:not(.is-transparent) {
     .navbar-item {
-      &:not(.is-active) {
-        color: #7a7a7a;
-      }
-
-      &.is-active {
-        color: $primary;
-        border-bottom: 2px solid;
-        margin-bottom: -2px;
-      }
+        font-variant: small-caps;
+        font-size: 1.15em;
+    }
+
+    .navbar:not(.is-transparent) {
+        .navbar-item {
+            &:not(.is-active) {
+                color: #7a7a7a;
+            }
+
+            &.is-active {
+                color: $primary;
+                border-bottom: 2px solid;
+                margin-bottom: -2px;
+            }
+        }
     }
-  }
 }

content/assets/stylesheets/includes/variables.scss

@@ -1,32 +1,35 @@
 // Colours
-$zeus-orange: #FF7F00;
-$zeus-blue: #00C4FF;
+$zeus-orange: #ff7f00;
+$zeus-blue: #00c4ff;
 
-$body-background: white;
+$body-background: #fff;
 
 $tile-orange: $zeus-orange;
 
-$navbar-border-color: #CCC;
-$event-border-color: #DDD;
+$navbar-border-color: #ccc;
+$event-border-color: #ddd;
 
 $orange: $zeus-orange;
 $blue: $zeus-blue;
-$turquoise: #30D1B2;
+$turquoise: #30d1b2;
 
 $link: $orange;
 $link-visited: $link;
 
 $border-hover: $blue;
 
-$box-colour: #EEE;
+$box-colour: #eee;
 $highlighted-box-colour: $zeus-orange;
-$highlighted-text-colour: white;
+$highlighted-text-colour: #fff;
 $highlighted-link-colour: #222324;
 
-$cammie-controls-color: rgba(0, 0, 0, 0.60);
+$cammie-controls-color: rgba(0, 0, 0, .60);
 
 $event-padding: 10px;
 
 $primary: $orange;
 $secondary: $zeus-blue;
 $tertiary: $box-colour;
+
+// Let's trust the font the user chose
+$family-sans-serif: sans-serif;

package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "bulma": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.0.tgz",
-      "integrity": "sha1-1IAXDIdoy3dP9galqvXeqpLNpiI="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
+      "integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
     },
     "bulma-divider": {
       "version": "0.0.1",

package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "repository": "https://github.com/ZeusWPI/zeus.ugent.be",
   "dependencies": {
-    "bulma": "0.7.0",
+    "bulma": "0.7.1",
     "bulma-divider": "~0.0.1"
   }
 }