pluie.me
Source code + assets for pluie.me
1@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap");
2
3@import "tailwindcss";
4@plugin "@iconify/tailwind4";
5
6@import "components/arrow-button.css" layer(components);
7@import "components/devicon.css" layer(components);
8@import "components/langs.css" layer(components);
9@import "components/navbar.css" layer(components);
10@import "components/splash.css" layer(components);
11@import "components/split-icon.css" layer(components);
12
13@custom-variant dark (&:where([data-theme=neon], [data-theme=neon] *));
14
15/* Default dark theme "Neon" */
16@theme {
17 --color-brand: oklch(0.5867 0.1955 2.08);
18 --color-brand-dark: oklch(0.5467 0.1955 2.08);
19 --color-brand-darker: oklch(0.5067 0.1955 2.08);
20 --color-brand-darkest: oklch(0.4667 0.1955 2.08);
21
22 --color-bg: oklch(0.1831 0.004 285.99);
23 --color-bg-sub: oklch(0.1931 0.004 285.99);
24 --color-main-bg: oklch(0.2031 0.004 285.99);
25
26 --color-fg: oklch(0.9911 0.004 285.99);
27 --color-main-fg: var(--color-zinc-200);
28 --color-main-fg-sub: var(--color-zinc-400);
29 --color-main-border: var(--color-brand);
30
31 --font-body: Manrope, Noto Sans SC, sans-serif;
32 --font-serif: Bitter, Noto Serif SC, serif;
33 --font-mono: Iosevka, monospace;
34
35 --spacing-content-width: 100ch;
36 --spacing-main-screen: calc(100vh - 4 * var(--spacing-navbar));
37 --spacing-navbar: 3.5rem;
38
39 @keyframes bob {
40 from {
41 transform: translateY(0px);
42 }
43 to {
44 transform: translateY(10px);
45 }
46 }
47}
48
49@property --bg-transition {
50 syntax: "<number>";
51 initial-value: 0;
52 inherits: false;
53}
54
55@utility align-icon-offset {
56 /* Determined empirically. TODO: Why do I need to do this...? */
57 vertical-align: -3px;
58}
59
60@layer base {
61 :root {
62 /* Default light theme "Strawberry Milkshake" */
63 /* TODO: `prefer-color-scheme` */
64 [data-theme="strawberry-milkshake"] {
65 --color-bg: var(--color-stone-300);
66 --color-bg-sub: var(--color-stone-200);
67 --color-main-bg: var(--color-stone-200);
68
69 --color-fg: var(--color-stone-800);
70 --color-main-fg: var(--color-stone-700);
71 --color-main-fg-sub: var(--color-stone-500);
72 }
73 }
74
75 *:hover, *:focus, *.is-active {
76 --bg-transition: 1;
77 }
78
79 html {
80 font-size: 18px;
81 }
82
83 main {
84 background: var(--color-main-bg);
85 color: var(--color-main-fg);
86 }
87
88 a.animated, .prose a {
89 /* adapted from https://stackoverflow.com/a/72459455 */
90 @apply text-brand ease-out bg-no-repeat bg-right-bottom bg-linear-to-r
91 from-transparent to-brand-dark to-0%;
92
93 transition: 0.2s background-size;
94 background-size: calc(var(--bg-transition) * 100%) 1.5px;
95 text-decoration: none;
96
97 &:hover, &:focus, &.is-active {
98 @apply bg-left-bottom;
99 }
100 }
101
102 .neon #theme-switcher .split-icon {
103 --base-side: 0;
104 }
105 body.strawberry-milkshake #theme-switcher .split-icon {
106 --base-side: 1;
107 }
108
109 blockquote {
110 padding-left: 1em;
111 border-left: 2px solid var(--color-brand);
112 }
113}
114
115/*
116 Redefine the meaning of `em` to mean "use brand color".
117 Only used on the splash screen and overall very niche.
118*/
119@utility em-brand {
120 em {
121 font-style: normal;
122 color: var(--color-brand);
123 }
124}
125
126@utility grid-cols-main-screen {
127 grid-template-columns: 20rem auto 20rem;
128}
129
130@layer components {
131 .prose {
132 line-height: 2rem;
133 max-width: 75ch;
134 margin-inline: auto;
135 display: flex;
136 flex-direction: column;
137 gap: 1.5rem;
138
139 font-weight: 350;
140
141 h1, h2, h3, h4, h5, h6 {
142 margin-bottom: 0.5rem;
143 }
144
145 h1 {
146 font-size: 1.75rem;
147 font-weight: 750;
148 margin-top: 2rem;
149 }
150
151 ol, ul {
152 margin-inline-start: 2rem;
153 list-style: outside;
154 display: flex;
155 flex-direction: column;
156 gap: 1rem;
157
158 li ul {
159 margin-top: 1rem;
160 }
161 }
162
163 b, strong {
164 font-weight: 600;
165 }
166
167 code {
168 padding-inline: 0.25rem;
169 background: var(--color-bg);
170
171 /* If we don't add this then breaking across e.g. command flags would look really strange */
172 word-break: keep-all;
173 }
174
175 pre {
176 background: var(--color-bg);
177 padding: 0.5rem 1rem;
178 overflow: scroll;
179
180 /* Make Chromium/Webkit scrollbars look more like Firefox ones */
181 scrollbar-width: thin;
182
183 code {
184 padding: 0;
185 }
186 }
187 }
188}