Add custom SASS theme

themes/custom/assets/autocomplete.scss

@@ -0,0 +1,34 @@
+#autoComplete {
+    position: relative;
+    width: 10rem;
+}
+
+#autoComplete_list {
+    position: absolute;
+    z-index: 100;
+    padding: 0;
+    top: 60px;
+    right: 0;
+    width: 18rem;
+}
+
+.autoComplete_result {
+    margin: 0.15rem auto;
+    padding: 0.6rem;
+    max-width: 280px;
+    list-style: none;
+    color: #7b7b7b;
+    transition: all 0.1s ease-in-out;
+    background-color: #fff;
+}
+
+.autoComplete_result:hover,
+.autoComplete_result:focus,
+.autoComplete_selected {
+    background-color: rgba(255, 248, 248, 0.9);
+}
+
+.autoComplete_highlighted {
+    color: rgba(255, 122, 122, 1);
+    font-weight: 700;
+}

themes/custom/assets/blumatheme.scss

@@ -0,0 +1,43 @@
+// Based on DARKLY
+// From https://github.com/jenil/bulmaswatch/blob/gh-pages/darkly/_variables.scss
+
+$grey-lighter: #dbdee0;
+$grey-light: #8c9b9d;
+$grey: darken($grey-light, 18);
+$grey-dark: darken($grey, 18);
+$grey-darker: darken($grey, 23);
+$background-base-color: rgb(50, 40, 40);
+$primary: #ff3b3b !default;
+
+$size-6: 15px;
+$size-7: 0.85em;
+$title-weight: 500;
+$subtitle-weight: 400;
+$subtitle-color: $grey-dark;
+
+$body-background-color: darken($background-base-color, 3);
+$body-size: 15px;
+
+$footer-background-color: $background-base-color;
+$footer-padding: 1rem;
+
+$subtitle-color: $grey-light;
+$subtitle-strong-color: $grey-light;
+
+$text: #fff;
+$text-light: lighten($text, 10);
+$text-strong: darken($text, 5);
+
+$box-background-color: $background-base-color;
+
+$link: lighten($primary, 10);
+$link-hover: lighten($link, 5);
+$link-focus: darken($link, 5);
+$link-active: darken($link, 5);
+$link-focus-border: $grey-light;
+
+$input-placeholder-color: #ccc;
+
+$navbar-height: 3rem;
+$navbar-background-color: darken($background-base-color, 6);
+$navbar-item-hover-background-color: $background-base-color;

themes/custom/assets/style.scss

@@ -0,0 +1,60 @@
+@import "blumatheme";
+@import "bulma/bulma";
+@import "autocomplete";
+
+.divider {
+    height: 3px;
+    border-radius: 50px;
+    background: $primary;
+    width: 120px;
+    &.is-centered {
+        margin: 0 auto;
+    }
+}
+
+.feature-card {
+    padding: 30px 5px;
+    width: 300px;
+    background-color: lighten($background-base-color, 3);
+    border-radius: 3px;
+    margin: 0 auto;
+    .card-title h4 {
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+    .card-icon img {
+        height: 120px;
+        margin: 20px 0;
+    }
+    .card-text {
+        padding: 0 40px;
+    }
+}
+
+.content h2:before,
+.content h3:before {
+    content: "#";
+    color: $grey;
+    position: absolute;
+    left: 0;
+    margin-left: -2rem;
+}
+
+.message {
+    border-radius: 0.6em;
+
+    &.is-info .message-body {
+        color: #eef6fc;
+        background-color: #155681;
+    }
+
+    &.is-danger .message-body {
+        color: #fdeeed;
+        background-color: #5e2f29;
+    }
+
+    &.is-warning .message-body {
+        color: #fef9ec;
+        background-color: #94761b;
+    }
+}

themes/custom/layouts/_default/baseof.html

@@ -44,7 +44,7 @@
     <div class="container">
       <div class="navbar-brand">
         <a class="navbar-item" href="{{ "/" | relLangURL }}">
-          <img src="{{ printf "/images/%s" .Site.Params.navbarlogo.image | relURL }}" alt="" width="112" height="28">
+          <img src="{{ printf "/images/%s" .Site.Params.navbarlogo.image | relURL }}" alt="" width="112">
         </a>
   
         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">