Return to default styling

The styling of the homepage is back to the styling of the `master`
 branch, but responsive. Needs detailed styling edits for i.e.
 the mobile menu.

.bootstraprc

 {
     "bootstrapVersion": 4,
-    "preBootstrapCustomizations": "./scipost/static/scipost/assets/scss/bootstrap_preconfig.scss",
+    "preBootstrapCustomizations": "./scipost/static/scipost/assets/config/preconfig.scss",
     "useFlexbox": true,
     "styleLoaders": [
         "style",
@@ -23,6 +23,7 @@
         "responsive-embed": true,
         "close": true,
         "utilities": true,
+        "transitions": true,
     },
     "scripts": {
         "collapse": true,

scipost/static/scipost/assets/scss/preconfig.scss → scipost/static/scipost/assets/config/preconfig.scss

@@ -4,7 +4,11 @@
 
 // Colors
 //
-$blue: #6884C2 !default;
+$scipost-lightblue: #6884C2 !default;
+$scipost-darkblue: #002b49 !default;
+
+$blue: $scipost-lightblue !default;
+$body-color: $scipost-darkblue !default;
 
 // Fonts
 //
@@ -16,7 +20,7 @@ $font-family-base:       $font-family-sans-serif !default;
 $font-size-base: 0.8rem !default;
 
 
-.form-control,
-.btn {
-    font-family: inherit;
-}
+// navbar
+//
+$navbar-light-color: $scipost-darkblue !default;
+$navbar-light-hover-color: $scipost-darkblue !default;

scipost/static/scipost/assets/css/style.css

-a {
-    color: #6884C2;
-    text-decoration: none;
-}
-a:hover {
-    color: #103050;
-    text-decoration: underline;
-}
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    padding: 5px 0;
-    text-shadow: none;
-    font-weight: 500;
-}

scipost/static/scipost/assets/css/style.scss

+@import "node_modules/bootstrap/scss/_variables";
+@import "node_modules/bootstrap/scss/_mixins";
+@import "./../config/preconfig.scss";
+/**
+ * Make variables defined in preconfig.scss accessable in this file,
+ *  plus default variables and mixins of Bootstrap@4
+ * - SciPost custom sass
+ *
+ */
+
+
+/**
+ * Buttons
+ *
+ */
+.btn {
+    cursor: pointer;
+    font-family: inherit;
+}
+
+/**
+ * Type
+ *
+ */
+a {
+    color: $scipost-lightblue;
+    text-decoration: none;
+}
+a:hover {
+    color: $scipost-darkblue;
+    text-decoration: underline;
+}
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 5px 0;
+    text-shadow: none;
+    font-weight: 500;
+}
+
+/**
+ * Form
+ *
+ */
+.form-control {
+    font-family: inherit;
+}
+
+/**
+ * Navbar
+ *
+ */
+.navbar {
+    margin-bottom: 0.75rem;
+
+    .nav-link {
+        padding-right: 1rem;
+        padding-left: 1rem;
+        border: 1px solid transparent;
+        border-radius: 0.1rem;
+        -webkit-transition: all 0.2s ease-in-out;
+             -o-transition: all 0.2s ease-in-out;
+                transition: all 0.2s ease-in-out;
+
+        @include hover-focus {
+            background-color: $white;
+        }
+    }
+
+    .active > .nav-link {
+        border-color: $scipost-darkblue;
+    }
+
+    .highlighted > .nav-link {
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+}
+.navbar-brand {
+    height: 38px;
+}
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 43, 73, 1.0)");
+}
+.panel {
+    padding: 0.5rem;
+    background-color: #f4f4f4;
+}

scipost/templates/scipost/base.html

@@ -47,9 +47,6 @@
     {% render_bundle 'main' 'js' %}
     {% render_bundle 'bootstrap' 'js' %}
 
-    <script type="text/javascript" src="{% static 'scipost/global/utils.js' %}"></script>
-    <script type="text/javascript" src="{% static 'scipost/global/collapse.js' %}"></script>
-
     {% block footer_script %}
     {% endblock footer_script %}
 </body>

scipost/templates/scipost/header.html

@@ -5,7 +5,7 @@
       <div class="flex-logobox">
 	<a href="{% url 'scipost:index' %}"><img src="{% static 'scipost/images/logo_scipost_RGB_HTML_groot.png' %}" alt="SciPost logo" width="240" /></a>
       </div>
-      <div class="flex-blurbbox">
+      <div class="flex-blurbbox hidden-sm-down">
 	<p>
 	  <i>The complete scientific publication portal</i><br />
 	  <i>Managed by professional scientists</i><br />

scipost/templates/scipost/navbar.html

-<nav class="navbar navbar-toggleable-md">
+<nav class="navbar navbar-light navbar-toggleable-md">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#header-navbar">
     <span class="navbar-toggler-icon"></span>
   </button>

webpack.config.js

@@ -8,7 +8,7 @@ var path_bundles = __dirname + '/static_bundles/bundles';
 module.exports = {
     context: __dirname,
     entry: {
-        main: glob.sync("./scipost/static/scipost/assets/**/*.@(js|css)"),
+        main: glob.sync("./scipost/static/scipost/assets/**/*.@(js|css|scss)"),
         bootstrap: 'bootstrap-loader'
     },
     output: {
@@ -32,6 +32,13 @@ module.exports = {
                     loader: "css-loader!less-loader"
                 })
             },
+            {
+                test: /\.scss$/,
+                loader: ExtractTextPlugin.extract({
+                    fallbackLoader: "style-loader",
+                    loader: "css-loader!sass-loader",
+                })
+            }
         ]
     },
     plugins: [