daniel/dc-website
1
0
Fork 0
forked from data.coop/website
Code Pull requests Activity

Improvements in the site layout

Browse source
This commit is contained in:
Halfdan 2022-11-10 14:48:26 +01:00
parent 9a2d13b681
commit e8738e1ac4
3 changed files with 78 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
themes/datacoop2020/assets/static/css/style.scss
View file

@ -65,7 +65,7 @@ body {
background : var(--bg-color);
color : var(--text-color);
font-family : space grotesk;
font-family : "Space Grotesk";
font-size : var(--base-font-size);
line-height : 165%;
text-align : left;
@ -139,6 +139,8 @@ main article {
aside nav {
position : sticky;
top : var(--base-grid);
display : block;
min-width : 200px;
}
aside nav ol {
@ -182,7 +184,7 @@ aside header a img {
@media(max-width:1000px) {
:root {
--base-grid : 40px;
--base-font-size : 30px;
--base-font-size : 20px;
}
body {
@ -201,6 +203,8 @@ aside header a img {
display : flex;
flex-direction : row;
justify-content : space-between;
align-items : center;
margin : calc(var(--base-grid) / 2) var(--base-grid);
}
aside header a {
@ -212,6 +216,10 @@ aside header a img {
display : none;
}
aside nav.display {
display : inherit;
}
aside #menu-toggle {
display : initial;
font-size : 3em;
@ -225,40 +233,39 @@ aside header a img {
}
header .nav-toggle {
cursor : pointer;
display : block;
height : var(--burger_size);
float : right;
margin : 40px 20px;
cursor : pointer;
display : block;
height : var(--burger_size);
float : right;
}
header .nav-toggle span {
display : block;
height : calc( ( var(--burger_size) / 3 ) / 2 );
width : var(--burger_size);
background : var(--text-color);
margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
display : block;
height : calc( ( var(--burger_size) / 4 ) / 2 );
width : var(--burger_size);
background : var(--text-color);
margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
}
header .nav-toggle span {
position : relative;
top : 0;
transition : all 0.4s;
position : relative;
top : 0;
transition : all 0.3s;
}
header .nav-toggle.display span#nav-toggle-b {
opacity : 0;
opacity : 0;
}
header .nav-toggle.display span#nav-toggle-a {
transform : rotate(45deg);
top : calc( var(--burger_size) / 3 );
transform : rotate(45deg);
top : calc( var(--burger_size) / 4 );
}
header .nav-toggle.display span#nav-toggle-c {
transform : rotate(-45deg);
top : calc( ( var(--burger_size) / 3 ) * -1 );
transform : rotate(-45deg);
top : calc( ( var(--burger_size) / 3 ) * -1 );
}
}

52
themes/datacoop2020/layouts/_default/baseof.html
View file

@ -1,46 +1,38 @@
<!doctype html>
<html lang="en">
{{ partial "head.html" . }}
<body>
<aside>
<header>
<a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo" width="240" height="140"></a>
<div class="nav-toggle" id="nav-toggle-header">
<span id="nav-toggle-a"></span>
<span id="nav-toggle-b"></span>
<span id="nav-toggle-c"></span>
</div>
</header>
{{ partial "nav.html" . }}
</aside>
<main>
<article>
{{ block "main" . }}{{ end }}
</article>
</main>
{{ partial "head.html" . }}
<body>
<aside>
<header>
<a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo" width="240" height="140"></a>
<div class="nav-toggle" id="nav-toggle-header">
<span id="nav-toggle-a"></span>
<span id="nav-toggle-b"></span>
<span id="nav-toggle-c"></span>
</div>
</header>
{{ partial "nav.html" . }}
</aside>
<main>
<article>
{{ block "main" . }}{{ end }}
</article>
</main>
<script>
var menu = document.getElementById("nav-toggle-header")
var nav = document.getElementsByTagName('nav')[0]
function toggleMenu() {
if ( menu.classList.contains("display") ) {
menu.classList.remove("display")
document.getElementsByTagName('nav')[0].style.display='none'
nav.classList.remove("display")
} else {
menu.classList.add("display")
document.getElementsByTagName('nav')[0].style.display='block'
nav.classList.add("display")
}
}
menu.addEventListener( "click", toggleMenu )
</script>
</body>
</body>
</html>

58
themes/datacoop2020/layouts/partials/head.html
View file

@ -1,34 +1,34 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ hugo.Generator }}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ with .Site.Params.description }}
<meta name="description" content="{{ . }}">
{{ end }}
{{ hugo.Generator }}
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/static/img" | absURL }}/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/static/img" | absURL }}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/static/img" | absURL }}/favicon-16x16.png">
<link rel="manifest" href="{{ "" | absURL }}/site.webmanifest">
<link rel="mask-icon" href="{{ "/static/img" | absURL }}/safari-pinned-tab.svg" color="#4b3aba">
<meta name="msapplication-TileColor" content="#4b3aba">
<meta name="theme-color" content="#4b3aba">
{{ with .Site.Params.description }}
<meta name="description" content="{{ . }}">
{{ end }}
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/static/img" | absURL }}/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/static/img" | absURL }}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/static/img" | absURL }}/favicon-16x16.png">
<link rel="manifest" href="{{ "" | absURL }}/site.webmanifest">
<link rel="mask-icon" href="{{ "/static/img" | absURL }}/safari-pinned-tab.svg" color="#4b3aba">
<meta name="msapplication-TileColor" content="#4b3aba">
<meta name="theme-color" content="#4b3aba">
{{ if .IsHome }}
{{ $homepage := "Home" }}
{{ with .Site.Menus.nav }}
{{ range first 1 . }}
{{ $homepage = .Name }}
{{ end }}
{{ end }}
<title>{{ $homepage }} | {{ .Site.Title }}</title>
{{ else }}
<title>{{ .Title }} | {{ .Site.Title }}</title>
{{ end }}
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
</head>
{{ if .IsHome }}
{{ $homepage := "Home" }}
{{ with .Site.Menus.nav }}
{{ range first 1 . }}
{{ $homepage = .Name }}
{{ end }}
{{ end }}
<title>{{ $homepage }} | {{ .Site.Title }}</title>
{{ else }}
<title>{{ .Title }} | {{ .Site.Title }}</title>
{{ end }}
</head>