Refining the layout a bit. Smaller text, more consistent padding/margins and other nice stuff
This commit is contained in:
Halfdan
parent
3db4eed870
commit
8317aefd4e
|
|
@ -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>
|
||||
|
|
|
|||
123
style.css
123
style.css
|
|
@ -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,146 +27,149 @@ 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;
|
||||
font-weight : 700;
|
||||
}
|
||||
|
||||
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 {
|
||||
max-width : 900px;
|
||||
max-width : 900px;
|
||||
}
|
||||
|
||||
main, aside {
|
||||
min-height : 100vh;
|
||||
min-height : 100vh;
|
||||
}
|
||||
|
||||
main header, main article {
|
||||
margin : 60px;
|
||||
margin : var(--base-grid);
|
||||
}
|
||||
|
||||
main article {
|
||||
padding : 30px 0 0 0;
|
||||
padding : 30px 0 0 0;
|
||||
}
|
||||
|
||||
aside nav {
|
||||
position: sticky;
|
||||
top : 60px;
|
||||
position : sticky;
|
||||
top : var(--base-grid);
|
||||
}
|
||||
|
||||
aside nav ol {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type : none;
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
aside nav ol li a {
|
||||
font-size : 30px;
|
||||
text-decoration: none;
|
||||
line-height : 1.75;
|
||||
display : block;
|
||||
font-size : 2rem;
|
||||
padding : 0.5rem 0;
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
aside nav ol li a:hover {
|
||||
text-decoration : underline;
|
||||
text-decoration : underline;
|
||||
}
|
||||
|
||||
aside #menu-toggle {
|
||||
display : none;
|
||||
font-size : 2em;
|
||||
color : #4b3aba;
|
||||
background : transparent;
|
||||
border : 0;
|
||||
display : none;
|
||||
font-size : 2em;
|
||||
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) {
|
||||
body {
|
||||
flex-direction: column;
|
||||
border : 0;
|
||||
flex-direction : column;
|
||||
border : 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
min-height : auto;
|
||||
width : 100%;
|
||||
border-right : 0;
|
||||
border-bottom : 40px solid #f0dcac;
|
||||
min-height : auto;
|
||||
width : 100%;
|
||||
border-right : 0;
|
||||
border-bottom : var(--base-grid) solid var(--bar-color);
|
||||
}
|
||||
|
||||
aside header {
|
||||
display : flex;
|
||||
flex-direction: row;
|
||||
justify-content : space-between;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content : space-between;
|
||||
}
|
||||
|
||||
aside header > * {
|
||||
width : 35%;
|
||||
max-width : 35%;
|
||||
width : 35%;
|
||||
max-width : 35%;
|
||||
}
|
||||
|
||||
aside nav {
|
||||
display : none;
|
||||
display : none;
|
||||
}
|
||||
|
||||
aside #menu-toggle {
|
||||
display : initial;
|
||||
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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue