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

19
style.css
View file

@ -42,7 +42,7 @@ a {
color : var(--text-color); color : var(--text-color);
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6, b, strong {
font-weight : 700; font-weight : 700;
} }
@ -98,7 +98,7 @@ main header, main article {
} }
main article { main article {
padding : 30px 0 0 0; padding : calc(var(--base-grid) / 2) 0 0 0;
} }
aside nav { aside nav {
@ -163,7 +163,7 @@ aside nav footer ol li a {
justify-content : space-between; justify-content : space-between;
} }
aside header > * { aside header a {
width : 35%; width : 35%;
max-width : 35%; max-width : 35%;
} }
@ -174,6 +174,8 @@ aside nav footer ol li a {
aside #menu-toggle { aside #menu-toggle {
display : initial; display : initial;
font-size : 3em;
font-weight : bold;
} }
aside nav ol li a { aside nav ol li a {
@ -182,14 +184,3 @@ aside nav footer ol li a {
font-size : 3rem; 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;
}
}
*/