From 16fab68e613d48ecd2d2a0cad8549441f65ba8c4 Mon Sep 17 00:00:00 2001 From: Benjamin Bach 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 f92d1f72..c9e20749 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 97cc2896..939dee1a 100644 --- a/themes/datacoop2020/layouts/_default/baseof.html +++ b/themes/datacoop2020/layouts/_default/baseof.html @@ -5,48 +5,31 @@ -
+ +
+
+ {{ block "main" . }}{{ end }} -
- {{ partial "nav.html" . }} -
+
+
-
-
- {{ with now }} - {{ i18n "generated_date" . }} - {{ end }} -
-
- -
-
-
- {{ block "main" . }}{{ end }} -
-
-
- -
- -
- - - open - {{ i18n "services_status" }} - - -
-
- -
- - - -{{ partial "bootstrap-js.html" . }} + + diff --git a/themes/datacoop2020/layouts/index.html b/themes/datacoop2020/layouts/index.html index aa53918b..0cd2eae8 100644 --- a/themes/datacoop2020/layouts/index.html +++ b/themes/datacoop2020/layouts/index.html @@ -1,18 +1,8 @@ {{ define "main" }} - -
-

{{.Title}}

- {{ with .Params.subtitle }} - {{.}} - {{ end }} -
-
- + {{.Content}} -
-
{{ .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 e53ee4e0..88e6053c 100644 --- a/themes/datacoop2020/layouts/partials/nav.html +++ b/themes/datacoop2020/layouts/partials/nav.html @@ -1,26 +1,16 @@ - +