167 lines
2.8 KiB
CSS
167 lines
2.8 KiB
CSS
@font-face{font-family:space grotesk;font-style:normal;font-display:swap;src:local("Space Grotesk Regular"),local("SpaceGrotesk-Regular"),url(SpaceGrotesk-Regular.woff2)format("woff2")}
|
|
@font-face{font-family:space grotesk;font-style:normal;font-weight:700;font-display:swap;src:local("Space Grotesk Regular"),local("SpaceGrotesk-Regular"),url(SpaceGrotesk-Bold.woff2)format("woff2")}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing : border-box;
|
|
}
|
|
|
|
* {
|
|
margin : 0;
|
|
}
|
|
|
|
body {
|
|
display : flex;
|
|
flex-direction : row;
|
|
|
|
margin : 0;
|
|
padding : 0;
|
|
|
|
background : #fff;
|
|
color : #4b3aba;
|
|
|
|
font-family : space grotesk;
|
|
font-size : 1.44em;
|
|
line-height : 1.65;
|
|
text-align : left;
|
|
|
|
border-right : 40px solid #f0dcac;
|
|
}
|
|
|
|
a {
|
|
color : #4b3aba;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 700;
|
|
line-height : 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size : 2.5em;
|
|
margin : 0 0 0.77em 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size : 2em;
|
|
margin : 0.57em 0 0.27em 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size : 1.5em;
|
|
margin : 0 0 0.37em 0;
|
|
}
|
|
|
|
p, ol, ul, code {
|
|
margin : 0.57em 0;
|
|
}
|
|
|
|
aside {
|
|
background : #a8f3f4;
|
|
width : 400px;
|
|
|
|
border-right : 40px solid #f0dcac;
|
|
}
|
|
|
|
aside header, aside nav, aside footer {
|
|
margin : 60px;
|
|
}
|
|
|
|
main {
|
|
max-width : 900px;
|
|
}
|
|
|
|
main, aside {
|
|
min-height : 100vh;
|
|
}
|
|
|
|
main header, main article {
|
|
margin : 60px;
|
|
}
|
|
|
|
main article {
|
|
padding : 30px 0 0 0;
|
|
}
|
|
|
|
aside nav {
|
|
position: sticky;
|
|
top : 60px;
|
|
}
|
|
|
|
aside nav ol {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
aside nav ol li a {
|
|
font-size : 30px;
|
|
text-decoration: none;
|
|
line-height : 1.75;
|
|
}
|
|
|
|
aside nav ol li a:hover {
|
|
text-decoration : underline;
|
|
}
|
|
|
|
aside #menu-toggle {
|
|
display : none;
|
|
font-size : 2em;
|
|
color : #4b3aba;
|
|
background : transparent;
|
|
border : 0;
|
|
}
|
|
|
|
aside nav footer {
|
|
margin : 40px 0 0 0;
|
|
}
|
|
|
|
aside nav footer ol li a {
|
|
font-size : 1em;
|
|
}
|
|
|
|
@media(max-width:1000px) {
|
|
body {
|
|
flex-direction: column;
|
|
border : 0;
|
|
}
|
|
|
|
aside {
|
|
min-height : auto;
|
|
width : 100%;
|
|
border-right : 0;
|
|
border-bottom : 40px solid #f0dcac;
|
|
}
|
|
|
|
aside header {
|
|
display : flex;
|
|
flex-direction: row;
|
|
justify-content : space-between;
|
|
}
|
|
|
|
aside header > * {
|
|
width : 35%;
|
|
max-width : 35%;
|
|
}
|
|
|
|
aside nav {
|
|
display : none;
|
|
}
|
|
|
|
aside #menu-toggle {
|
|
display : initial;
|
|
}
|
|
|
|
aside nav ul li a {
|
|
font-size : 3em;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|