196 lines
4.1 KiB
CSS
196 lines
4.1 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;
|
|
}
|
|
|
|
/* 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;
|
|
|
|
margin : 0;
|
|
padding : 0;
|
|
|
|
background : var(--bg-color);
|
|
color : var(--text-color);
|
|
|
|
font-family : space grotesk;
|
|
font-size : var(--base-font-size);
|
|
line-height : 165%;
|
|
text-align : left;
|
|
|
|
//border-right : var(--base-grid) solid var(--bar-color);
|
|
}
|
|
|
|
a {
|
|
color : var(--text-color);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight : 700;
|
|
}
|
|
|
|
main h1 {
|
|
font-size : 3rem;
|
|
margin : 0 0 3rem 0;
|
|
}
|
|
|
|
main h2 {
|
|
font-size : 2rem;
|
|
margin : 3.5rem 0 1.5rem 0;
|
|
}
|
|
|
|
main h3 {
|
|
font-size : 1.5rem;
|
|
margin : 2rem 0 1.5rem 0;
|
|
}
|
|
|
|
main p, main code {
|
|
margin : 1.5rem 0;
|
|
}
|
|
|
|
main ol, main ul {
|
|
margin : 1.5rem;
|
|
}
|
|
|
|
main ol li, main ul li {
|
|
margin : 0.5rem 0;
|
|
}
|
|
|
|
aside {
|
|
background : var(--alt-bg-color);
|
|
width : 420px;
|
|
|
|
border-right : var(--base-grid) solid var(--bar-color);
|
|
}
|
|
|
|
aside header, aside nav, aside footer {
|
|
margin : var(--base-grid);
|
|
}
|
|
|
|
main {
|
|
width : 100vw;
|
|
max-width : 900px;
|
|
}
|
|
|
|
main, aside {
|
|
min-height : 100vh;
|
|
}
|
|
|
|
main header, main article {
|
|
margin : var(--base-grid);
|
|
}
|
|
|
|
main article {
|
|
padding : 30px 0 0 0;
|
|
}
|
|
|
|
aside nav {
|
|
position : sticky;
|
|
top : var(--base-grid);
|
|
}
|
|
|
|
aside nav ol {
|
|
list-style-type : none;
|
|
padding : 0;
|
|
margin : 0;
|
|
}
|
|
|
|
aside nav ol li a {
|
|
display : block;
|
|
font-size : 2rem;
|
|
padding : 0.5rem 0;
|
|
text-decoration : none;
|
|
}
|
|
|
|
aside nav ol li a:hover {
|
|
text-decoration : underline;
|
|
}
|
|
|
|
aside #menu-toggle {
|
|
display : none;
|
|
font-size : 2em;
|
|
color : var(--text-color);
|
|
background : transparent;
|
|
border : 0;
|
|
}
|
|
|
|
aside nav footer {
|
|
margin : var(--base-grid) 0 0 0;
|
|
}
|
|
|
|
aside nav footer ol li a {
|
|
font-size : 1.65rem;
|
|
}
|
|
|
|
@media(max-width:1000px) {
|
|
:root {
|
|
--base-grid : 40px;
|
|
--base-font-size : 30px;
|
|
}
|
|
|
|
body {
|
|
flex-direction : column;
|
|
border : 0;
|
|
}
|
|
|
|
aside {
|
|
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;
|
|
}
|
|
|
|
aside header > * {
|
|
width : 35%;
|
|
max-width : 35%;
|
|
}
|
|
|
|
aside nav {
|
|
display : none;
|
|
}
|
|
|
|
aside #menu-toggle {
|
|
display : initial;
|
|
}
|
|
|
|
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),
|
|
only screen and (min-device-pixel-ratio: 2) {
|
|
body {
|
|
font-size : 2.44em;
|
|
}
|
|
}
|
|
*/
|