From 91eda95c44d0e93be59e4826073e6fb49aff6a14 Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Sun, 22 Jan 2017 22:00:02 +0100
Subject: [PATCH] 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 | 3 +-
.../assets/{scss => config}/config.scss | 0
.../assets/{scss => config}/preconfig.scss | 14 +--
scipost/static/scipost/assets/css/style.css | 14 ---
scipost/static/scipost/assets/css/style.scss | 86 +++++++++++++++++++
scipost/templates/scipost/base.html | 3 -
scipost/templates/scipost/header.html | 2 +-
scipost/templates/scipost/navbar.html | 2 +-
webpack.config.js | 9 +-
9 files changed, 107 insertions(+), 26 deletions(-)
rename scipost/static/scipost/assets/{scss => config}/config.scss (100%)
rename scipost/static/scipost/assets/{scss => config}/preconfig.scss (57%)
delete mode 100644 scipost/static/scipost/assets/css/style.css
create mode 100644 scipost/static/scipost/assets/css/style.scss
diff --git a/.bootstraprc b/.bootstraprc
index 340c4f119..0507aae30 100644
--- a/.bootstraprc
+++ b/.bootstraprc
@@ -1,6 +1,6 @@
{
"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,
diff --git a/scipost/static/scipost/assets/scss/config.scss b/scipost/static/scipost/assets/config/config.scss
similarity index 100%
rename from scipost/static/scipost/assets/scss/config.scss
rename to scipost/static/scipost/assets/config/config.scss
diff --git a/scipost/static/scipost/assets/scss/preconfig.scss b/scipost/static/scipost/assets/config/preconfig.scss
similarity index 57%
rename from scipost/static/scipost/assets/scss/preconfig.scss
rename to scipost/static/scipost/assets/config/preconfig.scss
index ada9be077..5bc0d4064 100644
--- a/scipost/static/scipost/assets/scss/preconfig.scss
+++ b/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;
diff --git a/scipost/static/scipost/assets/css/style.css b/scipost/static/scipost/assets/css/style.css
deleted file mode 100644
index c7d2a1838..000000000
--- a/scipost/static/scipost/assets/css/style.css
+++ /dev/null
@@ -1,14 +0,0 @@
-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;
-}
diff --git a/scipost/static/scipost/assets/css/style.scss b/scipost/static/scipost/assets/css/style.scss
new file mode 100644
index 000000000..478ca0337
--- /dev/null
+++ b/scipost/static/scipost/assets/css/style.scss
@@ -0,0 +1,86 @@
+@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;
+}
diff --git a/scipost/templates/scipost/base.html b/scipost/templates/scipost/base.html
index fc310ba24..f69fa7db7 100644
--- a/scipost/templates/scipost/base.html
+++ b/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>
diff --git a/scipost/templates/scipost/header.html b/scipost/templates/scipost/header.html
index e585931b2..2f9ddf2da 100644
--- a/scipost/templates/scipost/header.html
+++ b/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 />
diff --git a/scipost/templates/scipost/navbar.html b/scipost/templates/scipost/navbar.html
index 168173e4b..a8742b17d 100644
--- a/scipost/templates/scipost/navbar.html
+++ b/scipost/templates/scipost/navbar.html
@@ -1,4 +1,4 @@
-<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>
diff --git a/webpack.config.js b/webpack.config.js
index e479ed9a6..b41c163e9 100644
--- a/webpack.config.js
+++ b/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: [
--
GitLab