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

Refining the layout a bit. Smaller text, more consistent padding/margins and other nice stuff

Browse source
This commit is contained in:
Halfdan 2022-07-24 13:40:50 +02:00
parent 3db4eed870
commit 8317aefd4e
2 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,7 +8,7 @@
<body>
<aside>
<header>
<a href="index.html"><img src="logo_da.svg" /></a>
<a href="index.html"><img src="logo_da.svg" alt="data.coop logo" /></a>
<button id="menu-toggle">
☰ MENU
</button>

71
style.css
View file

@ -9,6 +9,17 @@
margin : 0;
}
/* Variables */
:root {
--base-grid : 60px;
--base-font-size : 22px;
--text-color : #4b3aba;
--bg-color : #fff;
--alt-bg-color : #a8f3f4;
--bar-color : #f0dcac;
}
body {
display : flex;
flex-direction : row;
@ -16,54 +27,53 @@ body {
margin : 0;
padding : 0;
background : #fff;
color : #4b3aba;
background : var(--bg-color);
color : var(--text-color);
font-family : space grotesk;
font-size : 1.44em;
line-height : 1.65;
font-size : var(--base-font-size);
line-height : 165%;
text-align : left;
border-right : 40px solid #f0dcac;
border-right : var(--base-grid) solid var(--bar-color);
}
a {
color : #4b3aba;
color : var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-weight : 700;
line-height : 1.2;
}
h1 {
font-size : 2.5em;
margin : 0 0 0.77em 0;
font-size : 2.5rem;
margin : 0 0 2rem 0;
}
h2 {
font-size : 2em;
margin : 0.57em 0 0.27em 0;
font-size : 2rem;
margin : 1.5rem 0 1rem 0;
}
h3 {
font-size : 1.5em;
margin : 0 0 0.37em 0;
font-size : 1.5rem;
margin : 1rem 0 0.5rem 0;
}
p, ol, ul, code {
margin : 0.57em 0;
margin : 1rem 0;
}
aside {
background : #a8f3f4;
width : 400px;
background : var(--alt-bg-color);
width : 420px;
border-right : 40px solid #f0dcac;
border-right : var(--base-grid) solid var(--bar-color);
}
aside header, aside nav, aside footer {
margin : 60px;
margin : var(--base-grid);
}
main {
@ -75,7 +85,7 @@ main, aside {
}
main header, main article {
margin : 60px;
margin : var(--base-grid);
}
main article {
@ -84,7 +94,7 @@ main article {
aside nav {
position : sticky;
top : 60px;
top : var(--base-grid);
}
aside nav ol {
@ -94,9 +104,10 @@ aside nav ol {
}
aside nav ol li a {
font-size : 30px;
display : block;
font-size : 2rem;
padding : 0.5rem 0;
text-decoration : none;
line-height : 1.75;
}
aside nav ol li a:hover {
@ -106,17 +117,17 @@ aside nav ol li a:hover {
aside #menu-toggle {
display : none;
font-size : 2em;
color : #4b3aba;
color : var(--text-color);
background : transparent;
border : 0;
}
aside nav footer {
margin : 40px 0 0 0;
margin : var(--base-grid) 0 0 0;
}
aside nav footer ol li a {
font-size : 1em;
font-size : 1.65rem;
}
@media(max-width:1000px) {
@ -129,7 +140,7 @@ aside nav footer ol li a {
min-height : auto;
width : 100%;
border-right : 0;
border-bottom : 40px solid #f0dcac;
border-bottom : var(--base-grid) solid var(--bar-color);
}
aside header {
@ -151,11 +162,14 @@ aside nav footer ol li a {
display : initial;
}
aside nav ul li a {
font-size : 3em;
aside nav ol li a {
display : block;
padding : 1.5rem 0;
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),
@ -164,3 +178,4 @@ only screen and (min-device-pixel-ratio: 2) {
font-size : 2.44em;
}
}
*/