Compare commits
No commits in common. "74db92638fa15a39b2a8fa12202352be449218ca" and "86d22425411fbff8b0fd53f773096eef5f9c7bba" have entirely different histories.
74db92638f
...
86d2242541
|
|
@ -34,187 +34,249 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
*, *::before, *::after {
|
$font-family-base: "Space Grotesk";
|
||||||
box-sizing : border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
$font-family-monospace: "Space Mono";
|
||||||
margin : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Variables */
|
$datacoop-purple: #4B3ABA;
|
||||||
:root {
|
$datacoop-light-blue: #A8F3F4;
|
||||||
--base-grid : 60px;
|
$datacoop-curry: #BA8D21;
|
||||||
--base-font-size : 22px;
|
$datacoop-grey: #BCB8B3;
|
||||||
|
|
||||||
--text-color : #4b3aba;
|
|
||||||
--bg-color : #fff;
|
$datacoop-curry-light: lighten($datacoop-curry, 12%);
|
||||||
--alt-bg-color : #a8f3f4;
|
$datacoop-curry-lighter: lighten($datacoop-curry, 38%);
|
||||||
--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 {
|
||||||
display : flex;
|
min-width: 300px;
|
||||||
flex-direction : row;
|
|
||||||
|
|
||||||
margin : 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
display: block;
|
||||||
|
.datacoop-sidebar {
|
||||||
|
height: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-sidebar {
|
||||||
|
background-color: $datacoop-light-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-navbar {
|
||||||
|
|
||||||
|
background-color: $datacoop-light-blue;
|
||||||
|
color: $datacoop-purple;
|
||||||
|
height: 100%;
|
||||||
|
padding: 40px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color : var(--text-color);
|
color: $datacoop-purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, b, strong {
|
// Mobile
|
||||||
font-weight : 700;
|
@include media-breakpoint-down(sm) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
// Desktop
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
height: 100%;
|
||||||
|
width: 340px;
|
||||||
|
|
||||||
|
|
||||||
|
// Overwrite because of usage of flexbox stuff, we use display: block
|
||||||
|
.navbar-collapse,
|
||||||
|
.datacoop-menulists
|
||||||
|
{
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
main h1 {
|
}
|
||||||
font-size : 3rem;
|
.data-coop-sidebar-logo
|
||||||
margin : 0 0 3rem 0;
|
{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 2px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main h2 {
|
ul
|
||||||
font-size : 2rem;
|
{
|
||||||
margin : 3.5rem 0 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main h3 {
|
|
||||||
font-size : 1.5rem;
|
|
||||||
margin : 2rem 0 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main p, main code {
|
|
||||||
margin : 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main ol, main ul {
|
|
||||||
margin : 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main ol li, main ul li {
|
|
||||||
margin : 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol li a {
|
|
||||||
|
ul > li
|
||||||
|
{
|
||||||
|
list-style-type: none;
|
||||||
display: block;
|
display: block;
|
||||||
font-size : 2rem;
|
|
||||||
padding : 0.5rem 0;
|
|
||||||
text-decoration : none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol li a:hover {
|
ul > li > a
|
||||||
text-decoration : underline;
|
{
|
||||||
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside #menu-toggle {
|
ul.datacoop-langchooser
|
||||||
display : none;
|
{
|
||||||
font-size : 2em;
|
display: block !important;
|
||||||
color : var(--text-color);
|
margin-top: 20px;
|
||||||
background : transparent;
|
li {
|
||||||
border : 0;
|
display: block;
|
||||||
|
margin-right: 20px;
|
||||||
|
a {
|
||||||
|
font-size: 18px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav footer {
|
margin-bottom: 1em;
|
||||||
margin : var(--base-grid) 0 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav footer ol li a {
|
.datacoop-sidebar-gutter
|
||||||
font-size : 1.65rem;
|
{
|
||||||
|
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:1000px) {
|
.datacoop-sidebar-gutter-right
|
||||||
:root {
|
{
|
||||||
--base-grid : 40px;
|
writing-mode: horizontal-lr;
|
||||||
--base-font-size : 30px;
|
transform: rotate(0);
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
padding: 0;
|
||||||
flex-direction : column;
|
min-width: 33px;
|
||||||
border : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
.sidebar-rotated
|
||||||
min-height : auto;
|
{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
width: 500px;
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-right : 0;
|
background-color: $datacoop-light-blue;
|
||||||
border-bottom : var(--base-grid) solid var(--bar-color);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside header {
|
|
||||||
display : flex;
|
|
||||||
flex-direction : row;
|
|
||||||
justify-content : space-between;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
aside header a {
|
|
||||||
width : 35%;
|
.datacoop-container-content
|
||||||
max-width : 35%;
|
{
|
||||||
|
padding: 30px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav {
|
article {
|
||||||
display : none;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside #menu-toggle {
|
img {
|
||||||
display : initial;
|
max-width: 100%;
|
||||||
font-size : 3em;
|
}
|
||||||
|
|
||||||
|
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;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol li a {
|
|
||||||
display : block;
|
|
||||||
padding : 1.5rem 0;
|
|
||||||
font-size : 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,30 +5,47 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<aside>
|
<div class="container-fluid everything-container">
|
||||||
<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" . }}
|
|
||||||
|
|
||||||
</aside>
|
<div class="row">
|
||||||
<main>
|
|
||||||
|
<div class="col-md-3 datacoop-sidebar d-print-none navbar navbar navbar-light navbar-expand-md">
|
||||||
|
{{ partial "nav.html" . }}
|
||||||
|
</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">
|
||||||
|
<div class="container datacoop-container-content">
|
||||||
<article>
|
<article>
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-1 datacoop-sidebar-gutter datacoop-sidebar-gutter-right d-print-none d-none d-md-flex">
|
||||||
|
|
||||||
<script>
|
<div class="fixed-top">
|
||||||
document.getElementById("menu-toggle").addEventListener("click", function() {
|
|
||||||
let d = document.getElementsByTagName("nav")[0];
|
<a href="#" class="sidebar-rotated">
|
||||||
let is_showing = (d.style.display == 'block');
|
<img src="{{ "/static/img/icons/expand.svg" | absURL }}" alt="open">
|
||||||
d.style.display = is_showing ? 'none' : 'block';
|
{{ i18n "services_status" }}
|
||||||
document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
|
</a>
|
||||||
});
|
|
||||||
</script>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ partial "bootstrap-js.html" . }}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,18 @@
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<h1>{{.Title}}</h1>
|
|
||||||
|
|
||||||
|
<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}}
|
{{.Content}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
{{ .Site.Params.mainSections }}
|
{{ .Site.Params.mainSections }}
|
||||||
{{ $pages := where site.RegularPages "Type" "in" ("") }}
|
{{ $pages := where site.RegularPages "Type" "in" ("") }}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,26 @@
|
||||||
<nav>
|
<nav class="datacoop-navbar">
|
||||||
<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 }}
|
||||||
</ol>
|
</ul>
|
||||||
|
<ul class="datacoop-langchooser">
|
||||||
<footer>
|
|
||||||
<ol>
|
|
||||||
{{ range $.Site.Home.AllTranslations }}
|
{{ range $.Site.Home.AllTranslations }}
|
||||||
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ol>
|
</ul>
|
||||||
</footer>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue