data.coop/website
8
1
Fork 6
Code Issues 10 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

19
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;
@ -229,12 +237,11 @@ aside header a img {
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 );
@ -243,7 +250,7 @@ aside header a img {
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 {
@ -252,7 +259,7 @@ aside header a img {
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 );
} }

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

@ -1,10 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
<aside> <aside>
<header> <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> <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>
@ -15,32 +12,27 @@
</div> </div>
</header> </header>
{{ partial "nav.html" . }} {{ partial "nav.html" . }}
</aside> </aside>
<main> <main>
<article> <article>
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</article> </article>
</main> </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>