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

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

@ -1,46 +1,38 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
{{ partial "head.html" . }}
{{ partial "head.html" . }} <body>
<aside>
<body> <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>
<aside> <div class="nav-toggle" id="nav-toggle-header">
<header> <span id="nav-toggle-a"></span>
<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> <span id="nav-toggle-b"></span>
<div class="nav-toggle" id="nav-toggle-header"> <span id="nav-toggle-c"></span>
<span id="nav-toggle-a"></span> </div>
<span id="nav-toggle-b"></span> </header>
<span id="nav-toggle-c"></span> {{ partial "nav.html" . }}
</div> </aside>
</header> <main>
{{ partial "nav.html" . }} <article>
{{ block "main" . }}{{ end }}
</aside> </article>
<main> </main>
<article>
{{ block "main" . }}{{ end }}
</article>
</main>
<script> <script>
var menu = document.getElementById("nav-toggle-header") var menu = document.getElementById("nav-toggle-header")
var nav = document.getElementsByTagName('nav')[0]
function toggleMenu() { function toggleMenu() {
if ( menu.classList.contains("display") ) { if ( menu.classList.contains("display") ) {
menu.classList.remove("display") menu.classList.remove("display")
document.getElementsByTagName('nav')[0].style.display='none' nav.classList.remove("display")
} else { } else {
menu.classList.add("display") menu.classList.add("display")
document.getElementsByTagName('nav')[0].style.display='block' nav.classList.add("display")
} }
} }
menu.addEventListener( "click", toggleMenu ) menu.addEventListener( "click", toggleMenu )
</script> </script>
</body>
</body>
</html> </html>

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

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