96 lines
1.8 KiB
CSS
96 lines
1.8 KiB
CSS
:root {
|
|
/* Rosé Pine Dawn */
|
|
--rp-base: #faf4ed;
|
|
--rp-surface: #fffaf3;
|
|
--rp-overlay: #f2e9e1;
|
|
--rp-muted: #9893a5;
|
|
--rp-subtle: #797593;
|
|
--rp-text: #575279;
|
|
--rp-love: #b4637a;
|
|
--rp-gold: #ea9d34;
|
|
--rp-rose: #d7827e;
|
|
--rp-pine: #286983;
|
|
--rp-foam: #56949f;
|
|
--rp-iris: #907aa9;
|
|
--rp-highlight-low: #f4ede8;
|
|
--rp-highlight-med: #dfdad9;
|
|
--rp-highlight-high: #cecacd;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Rosé Pine */
|
|
--rp-base: #191724;
|
|
--rp-surface: #1f1d2e;
|
|
--rp-overlay: #26233a;
|
|
--rp-muted: #6e6a86;
|
|
--rp-subtle: #908caa;
|
|
--rp-text: #e0def4;
|
|
--rp-love: #eb6f92;
|
|
--rp-gold: #f6c177;
|
|
--rp-rose: #ebbcba;
|
|
--rp-pine: #31748f;
|
|
--rp-foam: #9ccfd8;
|
|
--rp-iris: #c4a7e7;
|
|
--rp-highlight-low: #21202e;
|
|
--rp-highlight-med: #403d52;
|
|
--rp-highlight-high: #524f67;
|
|
|
|
/* Rosé Pine Moon */
|
|
/* --rp-base: #232136; */
|
|
/* --rp-surface: #2a273f; */
|
|
/* --rp-overlay: #393552; */
|
|
/* --rp-muted: #6e6a86; */
|
|
/* --rp-subtle: #908caa; */
|
|
/* --rp-text: #e0def4; */
|
|
/* --rp-love: #eb6f92; */
|
|
/* --rp-gold: #f6c177; */
|
|
/* --rp-rose: #ea9a97; */
|
|
/* --rp-pine: #3e8fb0; */
|
|
/* --rp-foam: #9ccfd8; */
|
|
/* --rp-iris: #c4a7e7; */
|
|
/* --rp-highlight-low: #2a283e; */
|
|
/* --rp-highlight-med: #44415a; */
|
|
/* --rp-highlight-high: #56526e; */
|
|
}
|
|
}
|
|
|
|
:root, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
padding: 2rem;
|
|
}
|
|
|
|
:root {
|
|
background-color: var(--rp-base);
|
|
color: var(--rp-text);
|
|
|
|
font-family: Inter, sans-serif;
|
|
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
:root { font-family: InterVariable, sans-serif; }
|
|
}
|
|
|
|
a {
|
|
color: var(--rp-love);
|
|
transition: 0.2s;
|
|
}
|
|
a:hover {
|
|
color: var(--rp-rose);
|
|
}
|
|
|
|
.fancy-card {
|
|
padding: 0.5rem;
|
|
|
|
.fancy-card-outline {
|
|
margin: -0.5rem;
|
|
}
|
|
.fancy-card-content {
|
|
background-color: var(--rp-overlay);
|
|
}
|
|
}
|