treehouse/static/css/main.css

352 lines
5.8 KiB
CSS
Raw Normal View History

2023-08-27 15:27:42 +02:00
/* Color scheme. */
:root {
2023-08-27 19:40:47 +02:00
/* naturally */
--liquidex-brand-blue: #058ef0;
--text-color-light: #55423e;
--link-color-light: #004ec8;
--link-color-visited-light: #6c2380;
2023-08-27 15:27:42 +02:00
--background-color: rgb(255, 253, 246);
2023-08-28 22:11:18 +02:00
--background-color-tooltip: rgb(226, 223, 214);
2023-08-27 15:27:42 +02:00
--text-color: #55423e;
2023-08-27 17:01:27 +02:00
--link-color: #004ec8;
--link-color-visited: #6c2380;
2023-08-27 15:27:42 +02:00
--shaded-background: rgba(0, 0, 0, 5%);
--border-1: rgba(0, 0, 0, 15%);
--border-2: rgba(0, 0, 0, 30%);
2023-08-27 17:01:27 +02:00
--hover: rgba(0, 0, 0, 15%);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(30, 40, 53);
2023-08-28 22:11:18 +02:00
--background-color-tooltip: rgb(23, 31, 41);
2023-08-27 17:01:27 +02:00
--text-color: #d7cdbf;
--link-color: #93cce8;
--link-color-visited: #f7afde;
--shaded-background: #f7e5df0c;
--border-1: #f7e5df26;
--border-2: #f7e5df4d;
}
2023-08-27 15:27:42 +02:00
}
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-27 15:27:42 +02:00
display: flex;
flex-direction: column;
2023-08-18 18:26:41 +02:00
}
2023-08-20 15:54:06 +02:00
main {
padding: 0 16px;
}
@media screen and (max-width: 480px) {
main {
padding: 0 8px;
}
}
2023-08-18 17:04:12 +02:00
/* Choose more pretty colors than vanilla HTML */
body {
2023-08-27 15:27:42 +02:00
background-color: var(--background-color);
color: var(--text-color);
2023-08-27 19:40:47 +02:00
scrollbar-color: var(--background-color);
scrollbar-width: auto;
scrollbar-gutter: stable;
}
body::selection {
/* Even though this color doesn't yield the most readable text, browsers */
background-color: var(--liquidex-brand-blue);
2023-08-18 17:04:12 +02:00
}
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
2023-08-27 17:01:27 +02:00
font-size: 3.5rem;
2023-08-18 18:26:41 +02:00
}
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 {
2023-08-27 19:40:47 +02:00
margin: 0 0;
2023-08-18 18:26:41 +02:00
}
h1,
h2,
h3 {
2023-08-27 19:40:47 +02:00
margin: 4px 0;
2023-08-18 18:26:41 +02:00
}
/* 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-27 15:27:42 +02:00
background-color: var(--shaded-background);
2023-08-18 19:25:38 +02:00
border-radius: 8px;
2023-08-18 18:26:41 +02:00
}
2023-08-20 15:54:06 +02:00
/* And don't let code examples fly off and overflow the window */
pre {
overflow-x: scroll;
}
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 {
2023-08-27 17:01:27 +02:00
color: var(--link-color);
2023-08-18 18:26:41 +02:00
}
a:visited {
2023-08-27 17:01:27 +02:00
color: var(--link-color-visited);
2023-08-18 18:26:41 +02:00
}
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;
2023-08-27 15:27:42 +02:00
border-left: 4px solid var(--border-1px);
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 {
2023-08-27 15:27:42 +02:00
border: 1px solid var(--border-2);
2023-08-18 19:25:38 +02:00
border-collapse: collapse;
padding: 4px 10px;
2023-08-18 17:04:12 +02:00
}
2023-08-18 19:25:38 +02:00
th {
2023-08-27 15:27:42 +02:00
background-color: var(--shaded-background);
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
}
2023-08-22 18:23:18 +02:00
2023-08-27 15:27:42 +02:00
/* Style the noscript box a little more prettily. */
2023-08-22 18:23:18 +02:00
.noscript {
padding: 16px;
background-color: #fde748;
2023-08-27 19:40:47 +02:00
color: var(--text-color-light);
2023-08-22 18:23:18 +02:00
border: 1px solid #6c581c;
border-radius: 8px;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.noscript p {
margin-top: 0;
margin-bottom: 16px;
}
.noscript p:last-child {
margin-bottom: 0;
}
2023-08-27 15:27:42 +02:00
2023-08-27 19:40:47 +02:00
.noscript a {
color: var(--link-color-light);
}
.noscript a:visited {
color: var(--link-color-visited-light);
}
/* also, webkit. */
#webkit-makes-me-go-insane {
display: none;
}
2023-08-27 15:27:42 +02:00
/* Give the logo on the top some nicer looks */
nav {
display: flex;
2023-08-28 21:14:51 +02:00
align-items: center;
2023-08-27 15:27:42 +02:00
}
nav .logo {
width: 48px;
height: 48px;
padding: 16px;
display: block;
opacity: 100%;
color: var(--text-color);
}
2023-08-27 18:25:21 +02:00
/* Style emojis to be readable */
2023-08-28 22:11:18 +02:00
img[is="th-emoji"] {
2023-08-27 20:54:59 +02:00
max-width: 1.5em;
max-height: 1.5em;
2023-08-27 18:25:21 +02:00
vertical-align: bottom;
2023-08-27 20:54:59 +02:00
object-fit: contain;
2023-08-27 18:25:21 +02:00
}
2023-08-27 18:47:57 +02:00
2023-08-28 22:11:18 +02:00
/* And also style emoji tooltips. */
.emoji-wrapper {
position: relative;
}
.emoji-tooltip {
display: none;
flex-direction: column;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: max-content;
z-index: 100;
background-color: var(--background-color-tooltip);
padding: 8px;
margin-top: 8px;
border-radius: 6px;
}
.emoji-wrapper:hover .emoji-tooltip {
display: flex;
}
.emoji-tooltip img {
display: block;
max-width: 64px;
max-height: 64px;
}
.emoji-tooltip p {
--recursive-wght: 550;
color: var(--text-color);
font-size: 0.75em;
margin: 0;
padding-top: 4px;
line-height: 1;
}
2023-08-27 18:47:57 +02:00
/* Funny joke */
@keyframes hello-there {
0% {
opacity: 0%;
}
70% {
opacity: 0%;
}
100% {
opacity: 70%;
}
}
.oops-you-seem-to-have-gotten-stuck {
margin-top: 16px;
display: none;
position: absolute;
opacity: 0%;
}
#index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
display: inline;
animation: 4s hello-there forwards;
}