From 16fab68e613d48ecd2d2a0cad8549441f65ba8c4 Mon Sep 17 00:00:00 2001
From: Benjamin Bach <benjamin@overtag.dk>
Date: Wed, 9 Nov 2022 02:03:14 +0100
Subject: [PATCH] Use new-new theme, still needs a lot of clean-up removing
 old-stuff

---
 .../datacoop2020/assets/static/css/style.scss | 378 ++++++++----------
 .../datacoop2020/layouts/_default/baseof.html |  59 +--
 themes/datacoop2020/layouts/index.html        |  12 +-
 themes/datacoop2020/layouts/partials/nav.html |  32 +-
 4 files changed, 191 insertions(+), 290 deletions(-)

diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss
index f92d1f7..c9e2074 100644
--- a/themes/datacoop2020/assets/static/css/style.scss
+++ b/themes/datacoop2020/assets/static/css/style.scss
@@ -34,249 +34,187 @@
 }
 
 
-$font-family-base: "Space Grotesk";
+*, *::before, *::after {
+    box-sizing          : border-box;
+}
 
-$font-family-monospace: "Space Mono";
+* {
+    margin              : 0;
+}
 
-$datacoop-purple: #4B3ABA;
-$datacoop-light-blue: #A8F3F4;
-$datacoop-curry: #BA8D21;
-$datacoop-grey: #BCB8B3;
-
-
-$datacoop-curry-light: lighten($datacoop-curry, 12%);
-$datacoop-curry-lighter: lighten($datacoop-curry, 38%);
-
-$datacoop-grey: #BCB8B3;
-
-
-$primary:             $datacoop-purple;
-$secondary:           $datacoop-light-blue;
-$success:             $datacoop-purple;
-$info:                $datacoop-grey;
-$warning:             $datacoop-curry;
-$danger:              $datacoop-curry;
-
-$body-color: $datacoop-purple;
-
-
-
-@import "bootstrap/bootstrap";
-@import "tables";
-
-html
-{
-  height: 100%;
+/* Variables */
+:root {
+    --base-grid         : 60px;
+    --base-font-size    : 22px;
+    
+    --text-color        : #4b3aba;
+    --bg-color          : #fff;
+    --alt-bg-color      : #a8f3f4;
+    --bar-color         : #f0dcac;
 }
 
 body {
-  min-width: 300px;
-  padding: 0;
-  height: 100%;
+    display             : flex;
+    flex-direction      : row;
+
+    margin              : 0;
+    padding             : 0;
+    
+    background          : var(--bg-color);
+    color               : var(--text-color);
+
+    font-family         : space grotesk;
+    font-size           : var(--base-font-size);
+    line-height         : 165%;
+    text-align          : left;
+
+    border-right        : var(--base-grid) solid var(--bar-color);
 }
 
-.everything-container {
-  // Desktop
-  @include media-breakpoint-up(md) {
-      height: 100%;
-      max-width: 1200px;
-  }
-  padding: 0;  // Overwrites .container-fluid
-  margin: 0;  // Overwrites .container-fluid
-
-  > .row
-  {
-    max-width: 1200px;
-    margin: 0;  // Overwrites .row
-    height: 100%;
-  }
-  
+a {
+    color               : var(--text-color);
 }
 
-// Mobile
-@include media-breakpoint-down(sm) {
-  display: block;
-  .datacoop-sidebar {
-    height: 0;
-    display: block;
-  }
+h1, h2, h3, h4, h5, h6, b, strong {
+    font-weight         : 700;
 }
 
-.datacoop-sidebar {
-  background-color: $datacoop-light-blue;
+main h1 {
+    font-size           : 3rem;
+    margin              : 0 0 3rem 0;
 }
 
-.datacoop-navbar {
+main h2 {
+    font-size           : 2rem;
+    margin              : 3.5rem 0 1.5rem 0;
+}
 
-  background-color: $datacoop-light-blue;
-  color: $datacoop-purple;
-  height: 100%;
-  padding: 40px;
-  
-  a {
-    color: $datacoop-purple;
-  }
+main h3 {
+    font-size           : 1.5rem;
+    margin              : 2rem 0 1.5rem 0;
+}
 
-  // Mobile
-  @include media-breakpoint-down(sm) {
-    display: block;
-    width: 100%;
-  }
-  // Desktop
-  @include media-breakpoint-up(md) {
-    height: 100%;
-    width: 340px;
+main p, main code {
+    margin              : 1.5rem 0; 
+}
 
+main ol, main ul {
+    margin              : 1.5rem;
+}
 
-      // Overwrite because of usage of flexbox stuff, we use display: block
-      .navbar-collapse,
-      .datacoop-menulists
-      {
-        display: block !important;
-      }
+main ol li, main ul li {
+    margin              : 0.5rem 0;
+}
 
-  }
-  .data-coop-sidebar-logo
-  {
-    display: block;
-    width: 100%;
-    img {
-      display: block;
-      width: 100%;
-      margin-left: 2px;
-      max-width: 400px;
+aside {
+    background          : var(--alt-bg-color);
+    width               : 420px;
+
+    border-right        : var(--base-grid) solid var(--bar-color);
+}
+
+aside header, aside nav, aside footer {
+    margin              : var(--base-grid);
+}
+
+main {
+    width               : 100vw;
+    max-width           : 900px;
+}
+
+main, aside {
+    min-height          : 100vh;
+}
+
+main header, main article {
+    margin              : var(--base-grid);
+}
+
+main article {
+    padding             : calc(var(--base-grid) / 2) 0 0 0;
+}
+
+aside nav {
+    position            : sticky;
+    top                 : var(--base-grid);
+}
+
+aside nav ol {
+    list-style-type     : none;
+    padding             : 0;
+    margin              : 0;
+}
+
+aside nav ol li a {
+    display             : block;
+    font-size           : 2rem;
+    padding             : 0.5rem 0;  
+    text-decoration     : none;
+}
+
+aside nav ol li a:hover {
+    text-decoration     : underline;
+}
+
+aside #menu-toggle {
+    display             : none;
+    font-size           : 2em;
+    color               : var(--text-color);
+    background          : transparent;
+    border              : 0;
+}
+
+aside nav footer {
+    margin              : var(--base-grid) 0 0 0;
+}
+
+aside nav footer ol li a {
+    font-size           : 1.65rem;
+}
+
+@media(max-width:1000px) {
+    :root {
+        --base-grid         : 40px;
+        --base-font-size    : 30px;
     }
-    margin-bottom: 30px;
-  }
 
-  ul
-  {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-
-  ul > li
-  {
-    list-style-type: none;
-    display: block;
-  }
-
-  ul > li > a
-  {
-    font-size: 30px;
-  }
-
-  ul.datacoop-langchooser
-  {
-    display: block !important;
-    margin-top: 20px;
-    li {
-      display: block;
-      margin-right: 20px;
-      a {
-        font-size: 18px;
-        text-transform: uppercase;
-      }
+    body {
+        flex-direction      : column;
+        border              : 0;
     }
-  }
 
-  margin-bottom: 1em;
-}
-
-.datacoop-sidebar-gutter
-{
-  writing-mode: vertical-lr;
-  transform: rotate(180deg);
-  max-width: auto !important;  // overwrites col-md
-  flex: 0 0 0; // overwrites col-md
-  width: auto;
-  padding: 20px 10px;
-  background-color: $datacoop-curry-lighter;
-  color: $datacoop-purple;  
-  font-family: $font-family-monospace;
-  font-size: 12px;
-  
-}
-
-.datacoop-sidebar-gutter-right
-{
-  writing-mode: horizontal-lr;
-  transform: rotate(0);
-
-  padding: 0;
-  min-width: 33px;
-
-  .sidebar-rotated
-  {
-    transform: rotate(180deg);  
-    writing-mode: vertical-lr;
-    width: 500px;
-    font-size: 16px;
-    white-space: nowrap;
-    img {
-      width: 100%;
-      background-color: $datacoop-light-blue;
+    aside {
+        min-height          : auto;
+        width               : 100%;
+        border-right        : 0;
+        border-bottom       : var(--base-grid) solid var(--bar-color);
     }
-  }
 
-}
-
-
-.datacoop-container-content
-{
-  padding: 30px 50px;
-}
-
-article {
-  padding: 1em 0;
-}
-
-img {
-  max-width: 100%;
-}
-
-pre {
-  display: block;
-  padding: 9.5px;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-pre code {
-  padding: 0;
-  font-size: inherit;
-  color: inherit; 
-  white-space: pre-wrap;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-}
-
-code {
-  padding: 2px 4px;
-  color: inherit; 
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: .9em;
-}
-
-blockquote,
-.blockquote {
-  padding: 10px 20px;
-  margin: 0 0 20px;
-  font-size: 1em;
-  border-left: 5px solid #6c757d;
-}
-
-h1, h2, h3, h4
-{
-  text-align: center;
-  font-weight: bold;
+    aside header {
+        display             : flex;
+        flex-direction      : row;
+        justify-content     : space-between;
+    }
+
+    aside header a {
+        width               : 35%;
+        max-width           : 35%;
+    }
+
+    aside nav {
+        display             : none;
+    }
+
+    aside #menu-toggle {
+        display             : initial;
+        font-size           : 3em;
+        font-weight         : bold;
+    }
+
+    aside nav ol li a {
+        display             : block;
+        padding             : 1.5rem 0;
+        font-size           : 3rem;
+    }
 }
 
diff --git a/themes/datacoop2020/layouts/_default/baseof.html b/themes/datacoop2020/layouts/_default/baseof.html
index 97cc289..939dee1 100644
--- a/themes/datacoop2020/layouts/_default/baseof.html
+++ b/themes/datacoop2020/layouts/_default/baseof.html
@@ -5,48 +5,31 @@
 
 <body>
 
-<div class="container-fluid everything-container">
+  <aside>
+      <header>
+          <a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo"></a>
+          <button id="menu-toggle">☰</button>
+      </header>
+       {{ partial "nav.html" . }}
 
-  <div class="row">
+  </aside>
+  <main>
+      <article>
+        {{ block "main" . }}{{ end }}
 
-    <div class="col-md-3 datacoop-sidebar d-print-none navbar navbar navbar-light navbar-expand-md">
-        {{ partial "nav.html" . }}
-    </div>
+      </article>
+  </main>
 
-    <div class="col-md-1 datacoop-sidebar-gutter d-print-none d-none d-md-flex">
-      <div class="sticky-bottom">
-    	{{ with now }}
-        {{ i18n "generated_date" . }}
-	    {{ end }}
-	    </div>
-    </div>
-
-    <div class="col-md-7">
-      <div class="container datacoop-container-content">
-        <article>
-          {{ block "main" . }}{{ end }}
-        </article>
-      </div>
-    </div>
-
-    <div class="col-md-1 datacoop-sidebar-gutter datacoop-sidebar-gutter-right d-print-none d-none d-md-flex">
-    
-      <div class="fixed-top">
-
-        <a href="#" class="sidebar-rotated">
-          <img src="{{ "/static/img/icons/expand.svg" | absURL }}" alt="open">
-          {{ i18n "services_status" }}
-        </a>
-
-      </div>
-    </div>
-
-  </div>
-
-</div>
-
-{{ partial "bootstrap-js.html" . }}
 
+  <script>
+      document.getElementById("menu-toggle").addEventListener("click", function() {
+          let d = document.getElementsByTagName("nav")[0];
+          let is_showing = (d.style.display == 'block');
+          d.style.display = is_showing ? 'none' : 'block';
+          document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
+      });
+  </script>
+        
 </body>
 
 </html>
diff --git a/themes/datacoop2020/layouts/index.html b/themes/datacoop2020/layouts/index.html
index aa53918..0cd2eae 100644
--- a/themes/datacoop2020/layouts/index.html
+++ b/themes/datacoop2020/layouts/index.html
@@ -1,18 +1,8 @@
 
 {{ define "main" }}
-
-  <main aria-role="main">
-    <header class="homepage-header">
       <h1>{{.Title}}</h1>
-      {{ with .Params.subtitle }}
-      <span class="subtitle">{{.}}</span>
-      {{ end }}
-    </header>
-    <div class="homepage-content">
-      <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
+
       {{.Content}}
-    </div>
-  </main>
 
   {{ .Site.Params.mainSections }}
   {{ $pages := where site.RegularPages "Type" "in" ("") }}
diff --git a/themes/datacoop2020/layouts/partials/nav.html b/themes/datacoop2020/layouts/partials/nav.html
index e53ee4e..88e6053 100644
--- a/themes/datacoop2020/layouts/partials/nav.html
+++ b/themes/datacoop2020/layouts/partials/nav.html
@@ -1,26 +1,16 @@
-<nav class="datacoop-navbar">
-
-  <a href="/" class="data-coop-sidebar-logo">
-    <img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}">
-  </a>
-
-  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="datacoop-menulists collapse navbar-collapse" id="navbarCollapse">
-
-    <ul>
+<nav>
+    <ol>
       {{ range .Site.Menus.nav }}
         <li><a href="{{ .URL }}">{{ .Name }}</a></li>
       {{ end }}
-    </ul>
-    <ul class="datacoop-langchooser">
-      {{ range $.Site.Home.AllTranslations }}
-      <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
-      {{ end }}
-    </ul>
-
-  </div>
+    </ol>
 
+    <footer>
+        <ol>
+          {{ range $.Site.Home.AllTranslations }}
+          <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+          {{ end }}
+        </ol>
+    </footer>
 </nav>
+
-- 
2.43.4