158 lines
3.4 KiB
CSS
158 lines
3.4 KiB
CSS
/* TODO: add defaults.css to project */
|
|
|
|
|
|
:root {
|
|
/* Rosé Pine Dawn */
|
|
--rp-base: hsl(32deg, 57%, 95%);
|
|
--rp-surface: hsl(35deg, 100%, 98%);
|
|
--rp-overlay: hsl(33deg, 43%, 91%);
|
|
--rp-muted: hsl(257deg, 9%, 61%);
|
|
--rp-subtle: hsl(248deg, 12%, 52%);
|
|
--rp-text: hsl(248deg, 19%, 40%);
|
|
--rp-love: hsl(343deg, 35%, 55%);
|
|
--rp-gold: hsl(35deg, 81%, 56%);
|
|
--rp-rose: hsl(3deg, 53%, 67%);
|
|
--rp-pine: hsl(197deg, 53%, 34%);
|
|
--rp-foam: hsl(189deg, 30%, 48%);
|
|
--rp-iris: hsl(268deg, 21%, 57%);
|
|
--rp-highlight-low: hsl(25deg, 35%, 93%);
|
|
--rp-highlight-med: hsl(10deg, 9%, 86%);
|
|
--rp-highlight-high: hsl(315deg, 4%, 80%);
|
|
|
|
/* consts */
|
|
--const-lilac: #907aa9
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Rosé Pine */
|
|
--rp-base: hsl(249deg, 22%, 12%);
|
|
--rp-surface: hsl(247deg, 23%, 15%);
|
|
--rp-overlay: hsl(248deg, 25%, 18%);
|
|
--rp-muted: hsl(249deg, 12%, 47%);
|
|
--rp-subtle: hsl(248deg, 15%, 61%);
|
|
--rp-text: hsl(245deg, 50%, 91%);
|
|
--rp-love: hsl(343deg, 76%, 68%);
|
|
--rp-gold: hsl(35deg, 88%, 72%);
|
|
--rp-rose: hsl(2deg, 55%, 83%);
|
|
--rp-pine: hsl(197deg, 49%, 38%);
|
|
--rp-foam: hsl(189deg, 43%, 73%);
|
|
--rp-iris: hsl(267deg, 57%, 78%);
|
|
--rp-highlight-low: hsl(244deg, 18%, 15%);
|
|
--rp-highlight-med: hsl(249deg, 15%, 28%);
|
|
--rp-highlight-high: hsl(248deg, 13%, 36%);
|
|
|
|
/* Rosé Pine Moon */
|
|
/* --rp-base: hsl(246deg, 24%, 17%); */
|
|
/* --rp-surface: hsl(248deg, 24%, 20%); */
|
|
/* --rp-overlay: hsl(248deg, 21%, 26%); */
|
|
/* --rp-muted: hsl(249deg, 12%, 47%); */
|
|
/* --rp-subtle: hsl(248deg, 15%, 61%); */
|
|
/* --rp-text: hsl(245deg, 50%, 91%); */
|
|
/* --rp-love: hsl(343deg, 76%, 68%); */
|
|
/* --rp-gold: hsl(35deg, 88%, 72%); */
|
|
/* --rp-rose: hsl(2deg, 66%, 75%); */
|
|
/* --rp-pine: hsl(197deg, 48%, 47%); */
|
|
/* --rp-foam: hsl(189deg, 43%, 73%); */
|
|
/* --rp-iris: hsl(267deg, 57%, 78%); */
|
|
/* --rp-highlight-low: hsl(245deg, 22%, 20%); */
|
|
/* --rp-highlight-med: hsl(247deg, 16%, 30%); */
|
|
/* --rp-highlight-high: hsl(249deg, 15%, 38%); */
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--rp-base);
|
|
color: var(--rp-text);
|
|
font-family: sans-serif;
|
|
font-size: 1.6rem;
|
|
line-height: 1.5;
|
|
width: 100vw;
|
|
|
|
/* FLEX */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
|
|
/* Margins, padding etc */
|
|
padding: 1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
header {
|
|
align-self: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
main {
|
|
max-width: 100%;
|
|
|
|
@media screen and (min-width:600px) {
|
|
max-width: 800px;
|
|
}
|
|
|
|
}
|
|
|
|
strong {
|
|
color: var(--rp-rose);
|
|
}
|
|
|
|
em {
|
|
color: var(--rp-rose);
|
|
}
|
|
|
|
|
|
header {
|
|
border-bottom: 1px solid #222;
|
|
margin-bottom: 1rem;
|
|
/* background-color: var(--rp-muted); */
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid #222;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--rp-foam);
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--rp-subtle);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--rp-gold);
|
|
background-color: var(--const-lilac);
|
|
/* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
|
|
border-radius: 1rem 1rem 0 0;
|
|
padding: 1rem;
|
|
text-shadow: 1px 1px 2px black;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--rp-gold);
|
|
}
|
|
|
|
code {
|
|
background: var(--rp-surface);
|
|
color: var(--rp-gold);
|
|
padding: 0.3em;
|
|
border-radius: 1em;
|
|
font-size: 1.2em;
|
|
|
|
span {
|
|
background: var(--rp-surface);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.highlight {
|
|
padding-left: 2rem;
|
|
background-color: var(--rp-surface);
|
|
border-radius: 1rem;
|
|
}
|