From f440afcfb93ca0a093ff86ff7a5b084bfb02ef32 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Mon, 1 Nov 2021 12:45:29 +0100
Subject: [PATCH] Add custom SASS theme

---
 themes/custom/assets/autocomplete.scss     | 34 ++++++++++++
 themes/custom/assets/blumatheme.scss       | 43 ++++++++++++++++
 themes/custom/assets/style.scss            | 60 ++++++++++++++++++++++
 themes/custom/layouts/_default/baseof.html |  2 +-
 4 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 themes/custom/assets/autocomplete.scss
 create mode 100644 themes/custom/assets/blumatheme.scss
 create mode 100644 themes/custom/assets/style.scss

diff --git a/themes/custom/assets/autocomplete.scss b/themes/custom/assets/autocomplete.scss
new file mode 100644
index 0000000..d687bd8
--- /dev/null
+++ b/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;
+}
diff --git a/themes/custom/assets/blumatheme.scss b/themes/custom/assets/blumatheme.scss
new file mode 100644
index 0000000..85078c0
--- /dev/null
+++ b/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;
diff --git a/themes/custom/assets/style.scss b/themes/custom/assets/style.scss
new file mode 100644
index 0000000..8a3ee4f
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/themes/custom/layouts/_default/baseof.html b/themes/custom/layouts/_default/baseof.html
index c1a8916..68f3681 100644
--- a/themes/custom/layouts/_default/baseof.html
+++ b/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">