treehouse/static/css/main.css

158 lines
2.3 KiB
CSS
Raw Normal View History

2023-08-18 18:26:41 +02:00
/* Article-style layout. Center everything and give it a maximum width */
body {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
2023-08-18 17:04:12 +02:00
/* Choose more pretty colors than vanilla HTML */
body {
background-color: rgb(255, 253, 246);
color: #333;
}
2023-08-18 18:26:41 +02:00
/* Set up typography */
2023-08-18 17:04:12 +02:00
body,
pre,
code {
font-family: 'RecVar', sans-serif;
font-size: 14px;
2023-08-18 18:26:41 +02:00
line-height: 1.5;
2023-08-18 17:04:12 +02:00
}
:root {
--recursive-mono: 0.0;
--recursive-casl: 1.0;
--recursive-wght: 400;
--recursive-slnt: -2.0;
--recursive-crsv: 0.5;
}
*,
*:before,
*:after {
font-variation-settings:
"MONO" var(--recursive-mono),
"CASL" var(--recursive-casl),
"wght" var(--recursive-wght),
"slnt" var(--recursive-slnt),
"CRSV" var(--recursive-crsv);
}
h1 {
--recursive-slnt: 0.0;
--recursive-casl: 0.0;
--recursive-wght: 900;
2023-08-18 18:26:41 +02:00
font-size: 2.5rem;
}
h2 {
--recursive-slnt: 0.0;
--recursive-casl: 0.5;
--recursive-wght: 800;
font-size: 2rem;
}
h3 {
--recursive-slnt: 0.0;
--recursive-casl: 0.5;
--recursive-wght: 700;
font-size: 1.5rem;
2023-08-18 17:04:12 +02:00
}
pre,
code {
--recursive-mono: 1.0;
2023-08-18 18:26:41 +02:00
--recursive-casl: 0.0;
--recursive-slnt: 0.0;
}
b,
strong {
--recursive-wght: 700;
}
i,
em {
--recursive-slnt: -16.0;
}
/* Lay out elements a bit more compactly */
p,
pre {
margin: 6px 0;
}
h1,
h2,
h3 {
margin: 12px 0;
}
/* Lay out elements a little less compactly (actually just have some blank space past the end) */
body {
padding-bottom: 10rem;
}
/* Make code examples a little prettier by giving them visual separation from the rest of the page */
pre {
padding: 8px 12px;
2023-08-18 19:25:38 +02:00
margin: 12px 0;
2023-08-18 18:26:41 +02:00
background-color: rgba(0, 0, 0, 5%);
2023-08-18 19:25:38 +02:00
border-radius: 8px;
2023-08-18 18:26:41 +02:00
}
/* Also don't let images get out of hand */
img {
max-width: 100%;
}
/* Fix the default blue and ugly purple links normally have */
a {
color: #004ec8;
}
a:visited {
color: #6c2380;
}
2023-08-18 19:25:38 +02:00
/* Make blockquotes a bit prettier */
2023-08-18 18:26:41 +02:00
2023-08-18 19:25:38 +02:00
blockquote {
margin: 0;
padding: 2px 12px;
border-left: 4px solid rgba(0, 0, 0, 15%);
2023-08-18 17:04:12 +02:00
}
2023-08-18 19:25:38 +02:00
/* And tables. */
2023-08-18 17:04:12 +02:00
2023-08-18 20:58:07 +02:00
table {
margin: 8px 0;
}
2023-08-18 17:04:12 +02:00
2023-08-18 19:25:38 +02:00
table,
th,
td {
border: 1px solid rgba(0, 0, 0, 30%);
border-collapse: collapse;
padding: 4px 10px;
2023-08-18 17:04:12 +02:00
}
2023-08-18 19:25:38 +02:00
th {
background-color: rgba(0, 0, 0, 5%);
2023-08-18 17:04:12 +02:00
2023-08-18 19:25:38 +02:00
--recursive-wght: 700;
--recursive-casl: 0.5;
2023-08-18 17:04:12 +02:00
}