Initial front-end setup

nbuonin · Dec 31, 2019 · 5407710 · 5407710
1 parent ca327d9
commit 5407710
Show file tree

Hide file tree

Showing 20 changed files with 325 additions and 51 deletions.
diff --git a/decruck/settings/base.py b/decruck/settings/base.py
@@ -39,6 +39,7 @@
 
     'modelcluster',
     'taggit',
+    'wagtailmenus',
 
     'django.contrib.admin',
     'django.contrib.auth',

diff --git a/media/build/bundle.js → decruck/static/build/bundle.js b/media/build/bundle.js → decruck/static/build/bundle.js
diff --git a/media/build/main.css → decruck/static/build/main.css b/media/build/main.css → decruck/static/build/main.css
@@ -1,6 +1,4 @@
-h1 {
-  color: red; }
-
+@import url(https://fonts.googleapis.com/css?family=Abhaya+Libre:700|Lato:400,400i,700,700i,900,900i&display=swap);
 *,
 *::before,
 *::after {
@@ -17,13 +15,13 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "Lato", "sans-serif";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
+  color: #37332e;
   text-align: left;
-  background-color: #fff; }
+  background-color: #d1c6b0; }
 
 [tabindex="-1"]:focus:not(.focus-visible) {
   outline: 0 !important; }
@@ -276,10 +274,10 @@ h1, .h1 {
   font-size: 2.5rem; }
 
 h2, .h2 {
-  font-size: 2rem; }
+  font-size: 1.25rem; }
 
 h3, .h3 {
-  font-size: 1.75rem; }
+  font-size: 1.125rem; }
 
 h4, .h4 {
   font-size: 1.5rem; }
@@ -364,7 +362,7 @@ mark,
 
 .img-thumbnail {
   padding: 0.25rem;
-  background-color: #fff;
+  background-color: #d1c6b0;
   border: 1px solid #dee2e6;
   border-radius: 0.25rem;
   max-width: 100%;
@@ -1287,6 +1285,76 @@ pre {
   .offset-xl-11 {
     margin-left: 91.66667%; } }
 
-* {
-  color: blue; }
+body {
+  padding-top: 2em; }
+
+html {
+  letter-spacing: 0.02em; }
+
+h1, .h1 {
+  font-family: "Abhaye Libre", "serif";
+  text-transform: uppercase;
+  letter-spacing: 0.1em; }
+
+h2, .h2 {
+  font-family: "Lato", "sans-serif";
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.1em; }
+
+h3, .h3 {
+  font-family: "Lato", "sans-serif";
+  font-weight: 700;
+  letter-spacing: 0.02em; }
+
+.nav-container--home-page {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-flow: row nowrap;
+  -webkit-box-pack: center;
+          justify-content: center;
+  margin-bottom: 50px; }
+
+.nav > ul {
+  list-style-type: none;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-flow: row nowrap; }
+
+.nav > ul > li {
+  margin-right: 1em;
+  padding-right: 1em;
+  border-right: solid 1px #FFFFFF;
+  text-transform: uppercase; }
+  .nav > ul > li:last-of-type {
+    margin-right: 0em;
+    padding-right: 0em;
+    border-right: none; }
+
+.logo {
+  fill: #FFFFFF;
+  max-width: 816px; }
+
+.site-title--home-page {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-flow: column nowrap;
+  -webkit-box-align: center;
+          align-items: center; }
+
+.site-subtitle {
+  font-family: "Abhaye Libre", "serif";
+  text-transform: uppercase;
+  padding-top: 1em;
+  border-top: solid 1px #37332e; }
+
+.footer {
+  background-color: #37332e;
+  color: #d1c6b0; }
 
diff --git a/decruck/static/css/decruck.css b/decruck/static/css/decruck.css
diff --git a/decruck/static/js/decruck.js b/decruck/static/js/decruck.js
diff --git a/media/src/main.js → decruck/static/src/main.js b/media/src/main.js → decruck/static/src/main.js
@@ -1,4 +1,2 @@
 import 'bootstrap';
 import './scss/main.scss';
-
-console.log('Hello, World!');
diff --git a/decruck/static/src/scss/color.scss b/decruck/static/src/scss/color.scss
@@ -0,0 +1,4 @@
+$dark-brown: #37332e;
+$light-brown: #d1c6b0;
+
+
diff --git a/decruck/static/src/scss/elements/footer.scss b/decruck/static/src/scss/elements/footer.scss
@@ -0,0 +1,4 @@
+.footer {
+    background-color: $dark-brown;
+    color: $light-brown;
+}
diff --git a/decruck/static/src/scss/elements/logo.scss b/decruck/static/src/scss/elements/logo.scss
@@ -0,0 +1,17 @@
+.logo {
+    fill: #FFFFFF;
+    max-width: 816px;
+}
+
+.site-title--home-page {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+}
+
+.site-subtitle {
+    font-family: $font-family-serif;
+    text-transform: uppercase;
+    padding-top: 1em;
+    border-top: solid 1px $dark-brown;
+}
diff --git a/decruck/static/src/scss/elements/nav.scss b/decruck/static/src/scss/elements/nav.scss
@@ -0,0 +1,25 @@
+.nav-container--home-page {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin-bottom: 50px;
+}
+
+.nav > ul {
+    list-style-type: none;
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.nav > ul > li {
+    margin-right: 1em;
+    padding-right: 1em;
+    border-right: solid 1px #FFFFFF;
+    text-transform: uppercase;
+
+    &:last-of-type {
+        margin-right: 0em;
+        padding-right: 0em;
+        border-right: none;
+    }
+}
diff --git a/decruck/static/src/scss/main.scss b/decruck/static/src/scss/main.scss
@@ -0,0 +1,25 @@
+// Load fonts before setting variables
+@import url('https://fonts.googleapis.com/css?family=Abhaya+Libre:700|Lato:400,400i,700,700i,900,900i&display=swap');
+
+@import "./variables";
+
+// Bootstrap: Required
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+// Bootstrap: Optional
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+
+// Decruck
+body {
+    padding-top: 2em;
+}
+@import "./type";
+@import "./elements/nav";
+@import "./elements/logo";
+@import "./elements/footer";
diff --git a/decruck/static/src/scss/type.scss b/decruck/static/src/scss/type.scss
@@ -0,0 +1,22 @@
+html {
+    letter-spacing: 0.02em;
+}
+
+h1, .h1 {
+    font-family: $font-family-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+h2, .h2 {
+    font-family: $font-family-sans-serif;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+h3, .h3 {
+    font-family: $font-family-sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
diff --git a/decruck/static/src/scss/variables.scss b/decruck/static/src/scss/variables.scss
@@ -0,0 +1,18 @@
+// Redeclare Bootstrap variables 
+
+$font-family-sans-serif: "Lato", "sans-serif";
+$font-family-serif: "Abhaye Libre", "serif";
+
+// Redeclare the base size
+$font-size-base: 1rem;
+
+$h2-font-size: $font-size-base * 1.25;
+$h3-font-size: $font-size-base * 1.125;
+
+// Color
+// Note: These colors don't appear in Bootstrap's color scheme
+$dark-brown: #37332e;
+$light-brown: #d1c6b0;
+
+$body-bg: $light-brown;
+$body-color: $dark-brown;
diff --git a/decruck/templates/base.html b/decruck/templates/base.html
@@ -1,3 +1,4 @@
+{% load i18n %}
 {% load static wagtailuserbar %}
 
 <!DOCTYPE html>
@@ -18,7 +19,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         {# Global stylesheets #}
-        <link rel="stylesheet" type="text/css" href="{% static 'css/decruck.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'build/main.css' %}">
 
         {% block extra_css %}
             {# Override this in templates to add extra stylesheets #}
@@ -28,10 +29,37 @@
     <body class="{% block body_class %}{% endblock %}">
         {% wagtailuserbar %}
 
+        {% block nav %}
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 site-title">
+                        {% include 'logo.html' %}
+                        <div class="site-subtitle">
+                            {% trans "The Life and Works of Fernande Breilh-Decruck" %}
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        {% include 'nav.html' %}
+                    </div>
+                </div>
+            </div>
+        {% endblock %}
+
         {% block content %}{% endblock %}
 
+        {% block footer %}
+            <footer class="footer">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12">
+                            things go here
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        {% endblock %}
         {# Global javascript #}
-        <script type="text/javascript" src="{% static 'js/decruck.js' %}"></script>
+        <script type="text/javascript" src="{% static 'build/bundle.js' %}"></script>
 
         {% block extra_js %}
             {# Override this in templates to add extra javascript #}