From 4f6e07743aa7c7800de8eda69b9f6d2b081391ee Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 3 Nov 2020 12:06:17 +0100
Subject: [PATCH] Extending the styleguide.

---
 .../src/sass/apply/abstracts/_variables.scss  |   4 +-
 .../static_src/src/sass/apply/styleguide.scss | 276 ++++++++++++++++
 .../src/sass/public/abstracts/_variables.scss |  25 +-
 .../src/sass/public/components/_button.scss   |   2 +-
 hypha/templates/styleguide.html               | 307 +++++++++++++++---
 5 files changed, 571 insertions(+), 43 deletions(-)
 create mode 100644 hypha/static_src/src/sass/apply/styleguide.scss

diff --git a/hypha/static_src/src/sass/apply/abstracts/_variables.scss b/hypha/static_src/src/sass/apply/abstracts/_variables.scss
index 9ec653047..e2c6a0502 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_variables.scss
@@ -8,15 +8,16 @@
 // Default
 $color--white: #fff;
 $color--black: #141414;
-$color--dark-grey: #404041;
 $color--light-grey: #f7f7f7;
 $color--light-mid-grey: #e8e8e8;
 $color--mid-grey: #cfcfcf;
 $color--mid-dark-grey: #919191;
+$color--dark-grey: #404041;
 
 // Brand
 $color--lightest-blue: #24aae1;
 $color--light-blue: #0d7db0;
+$color--light-blue-90: transparentize($color--light-blue, .9);
 $color--lighter-blue: #7ab8d4;
 $color--dark-blue: #0c72a0;
 $color--darkest-blue: #3d6bdb;
@@ -55,7 +56,6 @@ $color--white-25: rgba(255, 255, 255, .25);
 $color--white-20: rgba(255, 255, 255, .2);
 $color--white-10: rgba(255, 255, 255, .1);
 
-$color--light-blue-90: transparentize($color--light-blue, .9);
 
 // Assignment
 $color--default: $color--dark-grey;
diff --git a/hypha/static_src/src/sass/apply/styleguide.scss b/hypha/static_src/src/sass/apply/styleguide.scss
new file mode 100644
index 000000000..a7905997c
--- /dev/null
+++ b/hypha/static_src/src/sass/apply/styleguide.scss
@@ -0,0 +1,276 @@
+// Abstracts
+@import 'abstracts/functions';
+@import 'abstracts/mixins';
+@import 'abstracts/variables';
+
+// Base
+@import 'base/base';
+@import 'base/typography';
+
+// Components
+@import 'components/alert';
+@import 'components/all-submissions-table';
+@import 'components/all-reviews-table';
+@import 'components/admin-bar';
+@import 'components/actions-bar';
+@import 'components/card';
+@import 'components/cookieconsent';
+@import 'components/comment';
+@import 'components/button';
+@import 'components/editor';
+@import 'components/error-bar';
+@import 'components/feed';
+@import 'components/filters';
+@import 'components/grid';
+@import 'components/heading';
+@import 'components/icon';
+@import 'components/link';
+@import 'components/list';
+@import 'components/list-reveal';
+@import 'components/modal';
+@import 'components/rich-text';
+@import 'components/section';
+@import 'components/sidebar';
+@import 'components/tabs';
+@import 'components/status-bar';
+@import 'components/form';
+@import 'components/heading';
+@import 'components/icon';
+@import 'components/input';
+@import 'components/nav';
+@import 'components/pagination';
+@import 'components/profile';
+@import 'components/projects-table';
+@import 'components/related-sidebar';
+@import 'components/responsive-table';
+@import 'components/reviewer-dash-box';
+@import 'components/reviews-list';
+@import 'components/reviews-summary';
+@import 'components/reviews-sidebar';
+@import 'components/round-block';
+@import 'components/select2';
+@import 'components/simplified';
+@import 'components/status-block';
+@import 'components/submission-meta';
+@import 'components/revision';
+@import 'components/table';
+@import 'components/tooltip';
+@import 'components/traffic-light';
+@import 'components/wrapper';
+@import 'components/revisions';
+@import 'components/messages';
+@import 'components/stat-block';
+@import 'components/docs-block';
+@import 'components/funding-block';
+@import 'components/data-block';
+@import 'components/invoice-block';
+@import 'components/reminder-sidebar';
+@import 'components/two-factor';
+@import 'components/determination';
+
+// Layout
+@import 'layout/header';
+
+// Styleguide
+
+section {
+  margin: 4rem 0;
+}
+
+.styleguide {
+  color: $color--primary;
+  margin: 2rem 0;
+}
+
+.color--white {
+    color: $color--white;
+}
+
+.color--black {
+    color: $color--black;
+}
+
+.color--light-grey {
+    color: $color--light-grey;
+}
+
+.color--light-mid-grey {
+    color: $color--light-mid-grey;
+}
+
+.color--mid-grey {
+    color: $color--mid-grey;
+}
+
+.color--mid-dark-grey {
+    color: $color--mid-dark-grey;
+}
+
+.color--dark-grey {
+    color: $color--dark-grey;
+}
+
+.color--lightest-blue {
+    color: $color--lightest-blue;
+}
+
+.color--light-blue {
+    color: $color--light-blue;
+}
+
+.color--light-blue-90 {
+    color: $color--light-blue-90;
+}
+
+.color--lighter-blue {
+    color: $color--lighter-blue;
+}
+
+.color--dark-blue {
+    color: $color--dark-blue;
+}
+
+.color--darkest-blue {
+    color: $color--darkest-blue;
+}
+
+.color--mustard {
+    color: $color--mustard;
+}
+
+.color--purple {
+    color: $color--purple;
+}
+
+.color--pink {
+    color: $color--pink;
+}
+
+.color--light-pink {
+    color: $color--light-pink;
+}
+
+.color--light-green {
+    color: $color--light-green;
+}
+
+.color--tomato {
+    color: $color--tomato;
+}
+
+.color--mint {
+    color: $color--mint;
+}
+
+.color--grass {
+    color: $color--grass;
+}
+
+.color--ocean {
+    color: $color--ocean;
+}
+
+.color--sky-blue {
+    color: $color--sky-blue;
+}
+
+.color--marine {
+    color: $color--marine;
+}
+
+.color--mist {
+    color: $color--mist;
+}
+
+.color--green {
+    color: $color--green;
+}
+
+.color--pastel-red {
+    color: $color--pastel-red;
+}
+
+.color--pastel-green {
+    color: $color--pastel-green;
+}
+
+.color--fog {
+    color: $color--fog;
+}
+
+.color--twitter {
+    color: $color--twitter;
+}
+
+.color--linkedin {
+    color: $color--linkedin;
+}
+
+.color--facebook {
+    color: $color--facebook;
+}
+
+.color--black-60 {
+    color: $color--black-60;
+}
+
+.color--black-50 {
+    color: $color--black-50;
+}
+
+.color--black-40 {
+    color: $color--black-40;
+}
+
+.color--black-25 {
+    color: $color--black-25;
+}
+
+.color--black-20 {
+    color: $color--black-20;
+}
+
+.color--black-10 {
+    color: $color--black-10;
+}
+
+.color--white-50 {
+    color: $color--white-50;
+}
+
+.color--white-40 {
+    color: $color--white-40;
+}
+
+.color--white-25 {
+    color: $color--white-25;
+}
+
+.color--white-20 {
+    color: $color--white-20;
+}
+
+.color--white-10 {
+    color: $color--white-10;
+}
+
+.color--default {
+    color: $color--default;
+}
+
+.color--primary {
+    color: $color--primary;
+}
+
+.color--error {
+    color: $color--error;
+}
+
+.color--correct {
+    color: $color--correct;
+}
+
+.color--button-disabled {
+    color: $color--button-disabled;
+}
+
diff --git a/hypha/static_src/src/sass/public/abstracts/_variables.scss b/hypha/static_src/src/sass/public/abstracts/_variables.scss
index 724edffdd..931be93ec 100644
--- a/hypha/static_src/src/sass/public/abstracts/_variables.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_variables.scss
@@ -3,7 +3,6 @@
 // Default
 $color--white: #fff;
 $color--black: #141414;
-$color--dark-grey: #404041;
 $color--light-grey: #f7f7f7;
 $color--light-mid-grey: #e8e8e8;
 $color--mid-grey: #cfcfcf;
@@ -11,7 +10,10 @@ $color--mid-dark-grey: #919191;
 $color--dark-grey: #404041;
 
 // Brand
+$color--lightest-blue: #24aae1;
 $color--light-blue: #0d7db0;
+$color--light-blue-90: transparentize($color--light-blue, .9);
+$color--lighter-blue: #7ab8d4;
 $color--dark-blue: #0c72a0;
 $color--darkest-blue: #3d6bdb;
 $color--mustard: #e6ab32;
@@ -24,11 +26,12 @@ $color--mint: #40c2ad;
 $color--grass: #7dc588;
 $color--ocean: #1888b1;
 $color--sky-blue: #e7f2f6;
-$color--marine: #177da8;
+$color--marine: #14729a;
 $color--mist: #f3fafe;
 $color--green: #7dc558;
 $color--pastel-red: #f1a9a9;
 $color--pastel-green: #afe6af;
+$color--fog: #eff2f5;
 
 // Social
 $color--twitter: #1da6f6;
@@ -36,6 +39,7 @@ $color--linkedin: #137ab8;
 $color--facebook: #396ab5;
 
 // Transparent
+$color--black-60: rgba(0, 0, 0, .6);
 $color--black-50: rgba(0, 0, 0, .5);
 $color--black-40: rgba(0, 0, 0, .4);
 $color--black-25: rgba(0, 0, 0, .25);
@@ -47,13 +51,13 @@ $color--white-25: rgba(255, 255, 255, .25);
 $color--white-20: rgba(255, 255, 255, .2);
 $color--white-10: rgba(255, 255, 255, .1);
 
-$color--light-blue-90: transparentize($color--light-blue, .9);
 
 // Assignment
 $color--default: $color--dark-grey;
 $color--primary: $color--light-blue;
 $color--error: $color--tomato;
 $color--correct: $color--mint;
+$color--button-disabled: $color--lighter-blue;
 
 // Fonts
 $font--primary: 'noto-sans';
@@ -86,6 +90,9 @@ $site-width: 1280px;
 $wrapper--medium: 1020px;
 $wrapper--small: 790px;
 
+// Text line length
+$max-text-line-length: 50em;
+
 // Breakpoints
 $breakpoints: (
     'mob-portrait'      '(min-width: 320px)',
@@ -93,13 +100,16 @@ $breakpoints: (
     'small-tablet'      '(min-width: 600px)',
     'tablet-portrait'   '(min-width: 768px)',
     'tablet-landscape'  '(min-width: 1024px)',
+    'laptop-short'      '(min-width: 1024px) and (max-height: 1280px)',
     'desktop'           '(min-width: 1320px)',
+    'desktop-medium'    '(min-width: 1920px)',
     'desktop-wide'      '(min-width: 2556px)'
 );
 
 // Transition
 $transition: .25s ease-out;
 $quick-transition: .15s ease;
+$medium-transition: .5s ease;
 
 // Delays
 $base-delay: 30ms;
@@ -107,5 +117,14 @@ $base-delay: 30ms;
 // Spacing
 $mobile-gutter: 20px;
 
+// Filters
+$filter-dropdown: '.select2 .select2-selection.select2-selection--single';
+
+// listing header/spacer height
+$listing-header-height: 75px;
+
+// Table breakpoint
+$table-breakpoint: 'tablet-landscape';
+
 // Dropdown height
 $dropdown-height: 45px;
diff --git a/hypha/static_src/src/sass/public/components/_button.scss b/hypha/static_src/src/sass/public/components/_button.scss
index 1a566866a..a3b07c919 100644
--- a/hypha/static_src/src/sass/public/components/_button.scss
+++ b/hypha/static_src/src/sass/public/components/_button.scss
@@ -34,7 +34,7 @@
         display: flex;
         align-items: center;
 
-        .header--narrow & {
+        .header & {
             margin-right: 20px;
         }
     }
diff --git a/hypha/templates/styleguide.html b/hypha/templates/styleguide.html
index 078532e90..35f3c3083 100644
--- a/hypha/templates/styleguide.html
+++ b/hypha/templates/styleguide.html
@@ -1,41 +1,274 @@
-{% extends "base.html" %}
+{% load static wagtailuserbar wagtailcore_tags wagtailimages_tags util_tags %}<!doctype html>
+{% wagtail_site as current_site %}
+<html class="no-js" lang="en">
+    <head>
+        {# TODO fallbacks if page is not defined e.g. for 404 page #}
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{% block title_prefix %}{% if current_site.site_name %}{{ current_site.site_name }} | {% endif %}{% endblock %}{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}{% endblock %}{% block title_suffix %}{{ TITLE_SUFFIX }}{% endblock %}</title>
+        <meta name="description" content="{% if page.search_description %}{{ page.search_description }}{% else %}{{ page.listing_summary }}{% endif %}" />
+
+        <!-- favicons -->
+        {% comment %}
+            Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
+            Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
+        {% endcomment %}
+        <link rel="icon" sizes="144x144" href="{% static 'images/favicons/android-chrome-144.png' %}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16.png' %}">
+        <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32.png' %}">
+        <link rel="apple-touch-icon" sizes="76x76" href="{% static 'images/favicons/apple-icon-76.png' %}">
+        <link rel="apple-touch-icon" sizes="120x120" href="{% static 'images/favicons/apple-icon-120.png' %}">
+        <link rel="apple-touch-icon" sizes="152x152" href="{% static 'images/favicons/apple-icon-152.png' %}">
+        <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-icon-180.png' %}">
+        <link rel="manifest" href="{% static 'images/favicons/site.webmanifest.json' %}">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150.png' %}">
+        <meta name="theme-color" content="#ffffff">
+        <link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
+        <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
+        <link rel="stylesheet" href="{% static 'css/apply/styleguide.css' %}">
+        {% block extra_css %}{% endblock %}
+        <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
+
+        <script src="{% static 'js/jquery.min.js' %}"></script>
+        <script src="{% static 'js/main-top.js' %}"></script>
+    </head>
+
+    <body>
+
+        {% include "includes/sprites.html" %}
+
+        <header class="header">
+
+            <div class="header__inner wrapper wrapper--large">
+                <a href="{% slugurl 'home' %}" aria-label="Home link">
+                    {% if settings.utils.SystemMessagesSettings.site_logo_default %}
+                        {% image settings.utils.SystemMessagesSettings.site_logo_default width-215 as logo_default %}
+                        <img class="header__logo header__logo--desktop" src="{{ logo_default.url }}">
+                        {% if settings.utils.SystemMessagesSettings.site_logo_mobile %}
+                            {% image settings.utils.SystemMessagesSettings.site_logo_mobile width-60 as logo_mobile %}
+                            <img class="header__logo header__logo--mobile" src="{{ logo_mobile.url }}">
+                        {% else %}
+                            <img class="header__logo header__logo--mobile" src="{{ logo_default.url }}">
+                        {% endif %}
+                    {% else %}
+                        <svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop--dark"></use></svg>
+                        <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
+                    {% endif %}
+                </a>
+
+            </div>
+        </header>
+
+        <main class="wrapper wrapper--large wrapper--main">
+            {% block content_wrapper %}
 
 {% block content %}
-    <h1>Style Guide</h1>
-
-    <section id="palette">
-        <h2>Colour palette</h2>
-        <ul>
-            <li class="color-name1">color-name1</li>
-            <li class="color-name2">color-name2</li>
-            <li class="color-name3">color-name3</li>
-            <li class="color-name4">color-name4</li>
-            <li class="color-name5">color-name5</li>
-            <li class="color-name6">color-name6</li>
-        </ul>
-    </section>
-
-    <section id="typography">
-        <h2>Typography</h2>
-        <h1>This is an h1</h1>
-        <h2>This is an h2</h2>
-        <h3>This is an h3</h3>
-        <h4>This is an h4</h4>
-        <h5>This is an h5</h5>
-        <p>This is a paragraph</p>
-        <ul>
-            <li>These are</li>
-            <li>items in an</li>
-            <li>unordered list</li>
-        </ul>
-        <ol>
-            <li>These are</li>
-            <li>items in an</li>
-            <li>ordered list</li>
-        </ol>
-        <code>This is an example of code</code>
-    </section>
-
-    {# Insert more style guide elements here #}
+<h1 class="styleguide">Style Guide</h1>
+
+<section id="palette">
+    <h2 class="styleguide">Colour palette default</h2>
+    <ul>
+        <li class="color--white">color--white</li>
+        <li class="color--black">color--black</li>
+        <li class="color--light-grey">color--light-grey</li>
+        <li class="color--light-mid-grey">color--light-mid-grey</li>
+        <li class="color--mid-grey">color--mid-grey</li>
+        <li class="color--mid-dark-grey">color--mid-dark-grey</li>
+        <li class="color--dark-grey">color--dark-grey</li>
+    </ul>
+
+    <h2 class="styleguide">Colour palette brand</h2>
+    <ul>
+        <li class="color--lightest-blue">color--lightest-blue</li>
+        <li class="color--light-blue">color--light-blue</li>
+        <li class="color--light-blue-90">color--light-blue-90</li>
+        <li class="color--lighter-blue">color--lighter-blue</li>
+        <li class="color--dark-blue">color--dark-blue</li>
+        <li class="color--darkest-blue">color--darkest-blue</li>
+        <li class="color--mustard">color--mustard</li>
+        <li class="color--purple">color--purple</li>
+        <li class="color--pink">color--pink</li>
+        <li class="color--light-pink">color--light-pink</li>
+        <li class="color--light-green">color--light-green</li>
+        <li class="color--tomato">color--tomato</li>
+        <li class="color--mint">color--mint</li>
+        <li class="color--grass">color--grass</li>
+        <li class="color--ocean">color--ocean</li>
+        <li class="color--sky-blue">color--sky-blue</li>
+        <li class="color--marine">color--marine</li>
+        <li class="color--mist">color--mist</li>
+        <li class="color--green">color--green</li>
+        <li class="color--pastel-red">color--pastel-red</li>
+        <li class="color--pastel-green">color--pastel-green</li>
+        <li class="color--fog">color--fog</li>
+    </ul>
+
+    <h2 class="styleguide">Colour palette social</h2>
+    <ul>
+        <li class="color--twitter">color--twitter</li>
+        <li class="color--linkedin">color--linkedin</li>
+        <li class="color--facebook">color--facebook</li>
+    </ul>
+
+    <h2 class="styleguide">Colour palette transparent</h2>
+    <ul>
+        <li class="color--black-60">color--black-60</li>
+        <li class="color--black-50">color--black-50</li>
+        <li class="color--black-40">color--black-40</li>
+        <li class="color--black-25">color--black-25</li>
+        <li class="color--black-20">color--black-20</li>
+        <li class="color--black-10">color--black-10</li>
+        <li class="color--white-50">color--white-50</li>
+        <li class="color--white-40">color--white-40</li>
+        <li class="color--white-25">color--white-25</li>
+        <li class="color--white-20">color--white-20</li>
+        <li class="color--white-10">color--white-10</li>
+    </ul>
+
+    <h2 class="styleguide">Colour palette assignment</h2>
+    <ul>
+        <li class="color--default">color--default (color--dark-grey)</li>
+        <li class="color--primary">color--primary (color--light-blue)</li>
+        <li class="color--error">color--error (color--tomato)</li>
+        <li class="color--correct">color--correct (color--mint)</li>
+        <li class="color--button-disabled">color--button-disabled (color--lighter-blue)</li>
+    </ul>
+
+</section>
+
+<section id="typography">
+    <h2 class="styleguide">Typography</h2>
+
+    <h1>This is an h1</h1>
+    <h2>This is an h2</h2>
+    <h3>This is an h3</h3>
+    <h4>This is an h4</h4>
+    <h5>This is an h5</h5>
+
+    <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <code>This is an example of code</code>
+
+    <h3 class="styleguide">Lists</h3>
+
+
+    <ul>
+        <li>These are</li>
+        <li>items in an</li>
+        <li>unordered list</li>
+    </ul>
+
+    <br>
+
+    <ol>
+        <li>These are</li>
+        <li>items in an</li>
+        <li>ordered list</li>
+    </ol>
+
+    <h2 class="styleguide">Typography in submissions</h2>
+
+    <article>
+        <div class="rich-text rich-text--answers">
+            <h1>This is an h1</h1>
+            <h2>This is an h2</h2>
+            <h3>This is an h3</h3>
+            <h4>This is an h4</h4>
+            <h5>This is an h5</h5>
+
+            <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+            <code>This is an example of code</code>
+
+            <h3 class="styleguide">Lists</h3>
+
+
+            <ul>
+                <li>These are</li>
+                <li>items in an</li>
+                <li>unordered list</li>
+            </ul>
+
+            <br>
+
+            <ol>
+                <li>These are</li>
+                <li>items in an</li>
+                <li>ordered list</li>
+            </ol>
+        </div>
+    </article>
+</section>
+
+<section id="button">
+    <h2 class="styleguide">Links and button</h2>
+
+    <button class="button button--primary">button--primary</button><br>
+
+    <button class="button button--primary button--half-width">button--half-width</button><br>
+
+    <button class="button button--primary button--full-width">button--full-width</button><br>
+
+    <button class="button button--primary button--arrow-pixels-white">
+        button--arrow-pixels-white
+        <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
+    </button><br>
+
+
+    <button class="button button--white">button--white</button><br>
+
+    <button class="button button--white button--half-width">button--half-width</button><br>
+
+    <button class="button button--white button--full-width">button--full-width</button><br><br>
+
+
+    <button class="link link--button">link--button</button><br>
+
+    <button class="link link--button link--button--narrow">link--button--narrow</button><br><br>
+
+</section>
+
+<section id="form">
+    <h2 class="styleguide">Form</h2>
+
+    <form class="form">
+        <div class="form__group">
+            <label for="text_input" class="form__question form__question--char_field text_input"><span>Text input</span></label>
+            <div class="form__item"><input id="text_input" type="text"></div>
+        </div>
+
+        <div class="form__group">
+            <label for="text_input" class="form__question form__question--char_field text_input" required=""><span>Text input required</span><span class="form__required">*</span></label>
+            <div class="form__item"><input id="text_input" type="text"></div>
+        </div>
+
+
+        <button class="button button--submit button--top-space button--primary" type="submit">Button submit</button>
+
+        <button class="button button--submit button--top-space button--white" type="submit">Button white submit</button>
+    </form>
+</section>
+
+<section id="sidebar">
+    <h2 class="styleguide">Sidebar</h2>
+
+     <div class="sidebar">
+        <div class="sidebar__inner">
+            <h5>Header</h5>
+            <p>Some text here.</p>
+            <button class="button button--primary button--full-width ">Button</a>
+        </div>
+    </div>
+</section>
+
+{# Insert more style guide elements here #}
 
 {% endblock %}
+            {% endblock %}
+        </main>
+
+        <script src="{% static 'js/main.js' %}"></script>
+        {% block extra_js %}{% endblock %}
+    </body>
+</html>
-- 
GitLab