halfd/new-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Some extra styling and making the mobile-view menu collapsible

Browse source
This commit is contained in:
Halfdan 2022-11-08 17:15:29 +01:00
parent 3329b2df88
commit 798484bee3
2 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -3,15 +3,14 @@
<head>
<meta charset="utf-8" />
<title>data.coop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<aside>
<header>
<a href="index.html"><img src="logo_da.svg" alt="data.coop logo" /></a>
<button id="menu-toggle">
☰ MENU
</button>
<button id="menu-toggle">☰</button>
</header>
<nav>
<ol>
@ -55,8 +54,10 @@
<script>
document.getElementById("menu-toggle").addEventListener("click", function() {
let d = document.getElementsByTagName("nav")[0];
console.info(d);
d.style.display = "block";
let is_showing = (d.style.display == 'block');
d.style.display = is_showing ? 'none' : 'block';
document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
});
</script>
</body>

19
style.css
View file

@ -42,7 +42,7 @@ a {
color : var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6, b, strong {
font-weight : 700;
}
@ -98,7 +98,7 @@ main header, main article {
}
main article {
padding : 30px 0 0 0;
padding : calc(var(--base-grid) / 2) 0 0 0;
}
aside nav {
@ -163,7 +163,7 @@ aside nav footer ol li a {
justify-content : space-between;
}
aside header > * {
aside header a {
width : 35%;
max-width : 35%;
}
@ -174,6 +174,8 @@ aside nav footer ol li a {
aside #menu-toggle {
display : initial;
font-size : 3em;
font-weight : bold;
}
aside nav ol li a {
@ -182,14 +184,3 @@ aside nav footer ol li a {
font-size : 3rem;
}
}
/*
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
body {
font-size : 2.44em;
}
}
*/