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>
|
<body>
|
||||||
<aside>
|
<aside>
|
||||||
<header>
|
<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">
|
<button id="menu-toggle">
|
||||||
☰ MENU
|
☰ MENU
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
123
style.css
123
style.css
|
|
@ -9,6 +9,17 @@
|
||||||
margin : 0;
|
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 {
|
body {
|
||||||
display : flex;
|
display : flex;
|
||||||
flex-direction : row;
|
flex-direction : row;
|
||||||
|
|
@ -16,146 +27,149 @@ body {
|
||||||
margin : 0;
|
margin : 0;
|
||||||
padding : 0;
|
padding : 0;
|
||||||
|
|
||||||
background : #fff;
|
background : var(--bg-color);
|
||||||
color : #4b3aba;
|
color : var(--text-color);
|
||||||
|
|
||||||
font-family : space grotesk;
|
font-family : space grotesk;
|
||||||
font-size : 1.44em;
|
font-size : var(--base-font-size);
|
||||||
line-height : 1.65;
|
line-height : 165%;
|
||||||
text-align : left;
|
text-align : left;
|
||||||
|
|
||||||
border-right : 40px solid #f0dcac;
|
border-right : var(--base-grid) solid var(--bar-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color : #4b3aba;
|
color : var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: 700;
|
font-weight : 700;
|
||||||
line-height : 1.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size : 2.5em;
|
font-size : 2.5rem;
|
||||||
margin : 0 0 0.77em 0;
|
margin : 0 0 2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size : 2em;
|
font-size : 2rem;
|
||||||
margin : 0.57em 0 0.27em 0;
|
margin : 1.5rem 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size : 1.5em;
|
font-size : 1.5rem;
|
||||||
margin : 0 0 0.37em 0;
|
margin : 1rem 0 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ol, ul, code {
|
p, ol, ul, code {
|
||||||
margin : 0.57em 0;
|
margin : 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
background : #a8f3f4;
|
background : var(--alt-bg-color);
|
||||||
width : 400px;
|
width : 420px;
|
||||||
|
|
||||||
border-right : 40px solid #f0dcac;
|
border-right : var(--base-grid) solid var(--bar-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
aside header, aside nav, aside footer {
|
aside header, aside nav, aside footer {
|
||||||
margin : 60px;
|
margin : var(--base-grid);
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
max-width : 900px;
|
max-width : 900px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main, aside {
|
main, aside {
|
||||||
min-height : 100vh;
|
min-height : 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
main header, main article {
|
main header, main article {
|
||||||
margin : 60px;
|
margin : var(--base-grid);
|
||||||
}
|
}
|
||||||
|
|
||||||
main article {
|
main article {
|
||||||
padding : 30px 0 0 0;
|
padding : 30px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav {
|
aside nav {
|
||||||
position: sticky;
|
position : sticky;
|
||||||
top : 60px;
|
top : var(--base-grid);
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol {
|
aside nav ol {
|
||||||
list-style-type: none;
|
list-style-type : none;
|
||||||
padding: 0;
|
padding : 0;
|
||||||
margin: 0;
|
margin : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol li a {
|
aside nav ol li a {
|
||||||
font-size : 30px;
|
display : block;
|
||||||
text-decoration: none;
|
font-size : 2rem;
|
||||||
line-height : 1.75;
|
padding : 0.5rem 0;
|
||||||
|
text-decoration : none;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ol li a:hover {
|
aside nav ol li a:hover {
|
||||||
text-decoration : underline;
|
text-decoration : underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside #menu-toggle {
|
aside #menu-toggle {
|
||||||
display : none;
|
display : none;
|
||||||
font-size : 2em;
|
font-size : 2em;
|
||||||
color : #4b3aba;
|
color : var(--text-color);
|
||||||
background : transparent;
|
background : transparent;
|
||||||
border : 0;
|
border : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav footer {
|
aside nav footer {
|
||||||
margin : 40px 0 0 0;
|
margin : var(--base-grid) 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav footer ol li a {
|
aside nav footer ol li a {
|
||||||
font-size : 1em;
|
font-size : 1.65rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:1000px) {
|
@media(max-width:1000px) {
|
||||||
body {
|
body {
|
||||||
flex-direction: column;
|
flex-direction : column;
|
||||||
border : 0;
|
border : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
min-height : auto;
|
min-height : auto;
|
||||||
width : 100%;
|
width : 100%;
|
||||||
border-right : 0;
|
border-right : 0;
|
||||||
border-bottom : 40px solid #f0dcac;
|
border-bottom : var(--base-grid) solid var(--bar-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
aside header {
|
aside header {
|
||||||
display : flex;
|
display : flex;
|
||||||
flex-direction: row;
|
flex-direction : row;
|
||||||
justify-content : space-between;
|
justify-content : space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside header > * {
|
aside header > * {
|
||||||
width : 35%;
|
width : 35%;
|
||||||
max-width : 35%;
|
max-width : 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav {
|
aside nav {
|
||||||
display : none;
|
display : none;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside #menu-toggle {
|
aside #menu-toggle {
|
||||||
display : initial;
|
display : initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside nav ul li a {
|
aside nav ol li a {
|
||||||
font-size : 3em;
|
display : block;
|
||||||
|
padding : 1.5rem 0;
|
||||||
|
font-size : 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
@media only screen and (min--moz-device-pixel-ratio: 2),
|
@media only screen and (min--moz-device-pixel-ratio: 2),
|
||||||
only screen and (-o-min-device-pixel-ratio: 2/1),
|
only screen and (-o-min-device-pixel-ratio: 2/1),
|
||||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
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;
|
font-size : 2.44em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue