Merge pull request 'Use new-new theme, still needs a lot of clean-up removing old-stuff' (#37) from benjaoming/website:add-theme-from-new-new into new

Reviewed-on: data.coop/website#37

Jeg tager den herfra :D
This commit is contained in:
halfd 2022-11-09 10:39:02 +00:00
commit 74db92638f
4 changed files with 191 additions and 290 deletions

View file

@ -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; /* Variables */
$datacoop-light-blue: #A8F3F4; :root {
$datacoop-curry: #BA8D21; --base-grid : 60px;
$datacoop-grey: #BCB8B3; --base-font-size : 22px;
--text-color : #4b3aba;
$datacoop-curry-light: lighten($datacoop-curry, 12%); --bg-color : #fff;
$datacoop-curry-lighter: lighten($datacoop-curry, 38%); --alt-bg-color : #a8f3f4;
--bar-color : #f0dcac;
$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%;
} }
body { body {
min-width: 300px; display : flex;
padding: 0; flex-direction : row;
height: 100%;
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 { a {
// Desktop color : var(--text-color);
@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%;
}
} }
// Mobile h1, h2, h3, h4, h5, h6, b, strong {
@include media-breakpoint-down(sm) { font-weight : 700;
display: block;
.datacoop-sidebar {
height: 0;
display: block;
}
} }
.datacoop-sidebar { main h1 {
background-color: $datacoop-light-blue; 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; main h3 {
color: $datacoop-purple; font-size : 1.5rem;
height: 100%; margin : 2rem 0 1.5rem 0;
padding: 40px; }
a { main p, main code {
color: $datacoop-purple; margin : 1.5rem 0;
} }
// Mobile main ol, main ul {
@include media-breakpoint-down(sm) { margin : 1.5rem;
display: block; }
width: 100%;
}
// Desktop
@include media-breakpoint-up(md) {
height: 100%;
width: 340px;
main ol li, main ul li {
margin : 0.5rem 0;
}
// Overwrite because of usage of flexbox stuff, we use display: block aside {
.navbar-collapse, background : var(--alt-bg-color);
.datacoop-menulists width : 420px;
{
display: block !important;
}
} border-right : var(--base-grid) solid var(--bar-color);
.data-coop-sidebar-logo }
{
display: block; aside header, aside nav, aside footer {
width: 100%; margin : var(--base-grid);
img { }
display: block;
width: 100%; main {
margin-left: 2px; width : 100vw;
max-width: 400px; 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 body {
{ flex-direction : column;
list-style-type: none; border : 0;
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;
}
} }
}
margin-bottom: 1em; aside {
} min-height : auto;
width : 100%;
.datacoop-sidebar-gutter border-right : 0;
{ border-bottom : var(--base-grid) solid var(--bar-color);
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 header {
display : flex;
flex-direction : row;
.datacoop-container-content justify-content : space-between;
{ }
padding: 30px 50px;
} aside header a {
width : 35%;
article { max-width : 35%;
padding: 1em 0; }
}
aside nav {
img { display : none;
max-width: 100%; }
}
aside #menu-toggle {
pre { display : initial;
display: block; font-size : 3em;
padding: 9.5px; font-weight : bold;
word-break: break-all; }
word-wrap: break-word;
background-color: #f5f5f5; aside nav ol li a {
border: 1px solid #ccc; display : block;
border-radius: 4px; padding : 1.5rem 0;
} font-size : 3rem;
}
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;
} }

View file

@ -5,47 +5,30 @@
<body> <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"> </article>
{{ partial "nav.html" . }} </main>
</div>
<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"> <script>
<div class="container datacoop-container-content"> document.getElementById("menu-toggle").addEventListener("click", function() {
<article> let d = document.getElementsByTagName("nav")[0];
{{ block "main" . }}{{ end }} let is_showing = (d.style.display == 'block');
</article> d.style.display = is_showing ? 'none' : 'block';
</div> document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
</div> });
</script>
<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" . }}
</body> </body>

View file

@ -1,18 +1,8 @@
{{ define "main" }} {{ define "main" }}
<main aria-role="main">
<header class="homepage-header">
<h1>{{.Title}}</h1> <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}} {{.Content}}
</div>
</main>
{{ .Site.Params.mainSections }} {{ .Site.Params.mainSections }}
{{ $pages := where site.RegularPages "Type" "in" ("") }} {{ $pages := where site.RegularPages "Type" "in" ("") }}

View file

@ -1,26 +1,16 @@
<nav class="datacoop-navbar"> <nav>
<ol>
<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>
{{ range .Site.Menus.nav }} {{ range .Site.Menus.nav }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li> <li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }} {{ end }}
</ul> </ol>
<ul class="datacoop-langchooser">
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ul>
</div>
<footer>
<ol>
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ol>
</footer>
</nav> </nav>