forked from data.coop/website
Improvements in the site layout
This commit is contained in:
Halfdan
parent
9a2d13b681
commit
e8738e1ac4
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
{{ hugo.Generator }}
|
||||
{{ hugo.Generator }}
|
||||
|
||||
{{ with .Site.Params.description }}
|
||||
<meta name="description" content="{{ . }}">
|
||||
{{ end }}
|
||||
{{ with .Site.Params.description }}
|
||||
<meta name="description" content="{{ . }}">
|
||||
{{ end }}
|
||||
|
||||
<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">
|
||||
<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">
|
||||
|
||||
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
|
||||
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
|
||||
|
||||
{{ 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 }}
|
||||
{{ 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>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue