My personal website, in gleam+lustre!
1@import "tailwindcss";
2@source "./src/homepage.gleam";
3@source "./src/**/*.gleam";
4/* @import "./src/homepage/from_prebuild/oat.css"; */
5@plugin "daisyui";
6
7@plugin "daisyui/theme" {
8 name: "strawmelonjuicedotcom";
9 default: true;
10 prefersdark: true;
11 color-scheme: "dark";
12 --color-base-100: oklch(96% 0.059 95.617);
13 --color-base-200: oklch(93% 0.032 17.717);
14 --color-base-300: oklch(92% 0.12 95.746);
15 --color-base-content: oklch(25% 0.09 281.288);
16 --color-primary: #FDEBEF;
17 --color-primary-content: oklch(44% 0.043 257.281);
18 --color-secondary: #ceddd9;
19 --color-secondary-content: oklch(29% 0.066 243.157);
20 --color-accent: #DEC4DE;
21 --color-accent-content: #1f3e33;
22 --color-neutral: #adebb3;
23 --color-neutral-content: oklch(28% 0.141 291.089);
24 --color-info: oklch(96% 0.059 95.617);
25 --color-info-content: oklch(42% 0.095 57.708);
26 --color-success: oklch(76% 0.177 163.223);
27 --color-success-content: oklch(37% 0.077 168.94);
28 --color-warning: oklch(70% 0.213 47.604);
29 --color-warning-content: oklch(0% 0 0);
30 --color-error: oklch(63% 0.237 25.331);
31 --color-error-content: oklch(0% 0 0);
32 --radius-selector: 0.5rem;
33 --radius-field: 2rem;
34 --radius-box: 0.25rem;
35 --size-selector: 0.25rem;
36 --size-field: 0.1875rem;
37 --border: 2px;
38 --depth: 1;
39 --noise: 1;
40 --font-sans: "Lilex", monospace, system-ui, sans-serif;
41}
42
43/* Oat theme */
44@layer theme {
45 :root {
46 color-scheme: light dark;
47
48 --background: oklch(96% 0.059 95.617);
49 --foreground: oklch(25% 0.09 281.288);
50
51 --card: oklch(93% 0.032 17.717);
52 --card-foreground: var(--foreground);
53
54 --primary: #FDEBEF;
55 --primary-foreground: oklch(44% 0.043 257.281);
56
57 --secondary: #ceddd9;
58 --secondary-foreground: oklch(29% 0.066 243.157);
59
60 --accent: #DEC4DE;
61 --accent-foreground: #1f3e33;
62
63 --muted: oklch(92% 0.12 95.746);
64 --muted-foreground: oklch(28% 0.141 291.089);
65
66 --faint: oklch(96% 0.059 95.617 / 0.5);
67 --faint-foreground: var(--muted-foreground);
68
69 --danger: oklch(63% 0.237 25.331);
70 --danger-foreground: oklch(0% 0 0);
71
72 --success: oklch(76% 0.177 163.223);
73 --success-foreground: oklch(37% 0.077 168.94);
74
75 --warning: oklch(70% 0.213 47.604);
76 --warning-foreground: oklch(0% 0 0);
77
78 --border: #adebb3;
79 --input: #adebb3;
80 --ring: #FDEBEF;
81
82 --radius-small: 0.125rem;
83 --radius-medium: 0.25rem;
84 --radius-large: 0.5rem;
85 --radius-full: 2rem;
86
87
88 --font-sans: "Lilex", monospace, system-ui, sans-serif;
89 --font-mono: "Lilex", monospace, ui-monospace, SFMono-Regular;
90 --font-post: "OpenDyslectic 3", "Lilex", sans-serif;
91
92
93 --space-1: 0.25rem;
94 --space-2: 0.5rem;
95 --space-3: 0.75rem;
96 --space-4: 1rem;
97 --space-6: 1.5rem;
98 --space-8: 2rem;
99 --text-regular: 1rem;
100 --leading-normal: 1.5;
101 --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
102 }
103}
104
105@font-face {
106 font-family: "OpenDyslectic 3";
107 src: url(/fonts/OpenDyslexic3-Regular.ttf);
108}
109
110
111@layer base {
112 html {
113 font-family: "Lilex", monospace, system-ui, sans-serif;
114 font-optical-sizing: auto;
115 font-size: var(--font-size);
116 font-weight: 400;
117 font-style: normal;
118 margin: 0;
119 }
120
121 #cv-a4 {
122 font-family: "Lato", sans-serif;
123 font-weight: 400;
124 font-style: normal;
125 font-size: var(--font-size);
126 line-height: var(--line-height);
127 --margin: 18px;
128 --font-size: 13px;
129 --line-height: 1.4;
130 --color-foreground: #000000;
131 --color-primary: #3b5417;
132 --color-background: #ffffff;
133 }
134
135 .postfield {
136 --font-size: 15px;
137 --line-height: 1.0;
138
139 p {
140 font-family:
141 "OpenDyslectic 3",
142 "Lilex",
143 sans-serif;
144 font-weight: 100;
145 font-size: var(--font-size);
146
147 }
148 }
149
150 /* .subpage {} */
151
152 /* Make sure the 'go comment' button is visible even on small screens. */
153 .widget .form-controls {
154 flex-wrap: wrap;
155 }
156
157 /* As to not collide with chilp's footers, we had to be a bit more specific */
158 #app .footer {
159 position: fixed;
160 bottom: 0;
161 -webkit-animation: seconds 1s forwards;
162 -webkit-animation-iteration-count: 1;
163 -webkit-animation-delay: 5s;
164 animation: seconds 1s forwards;
165 animation-iteration-count: 1;
166 animation-delay: 5s;
167 }
168
169 @-webkit-keyframes seconds {
170 0% {
171 opacity: 1;
172 }
173
174 100% {
175 opacity: 0;
176 left: -9999px;
177 }
178 }
179
180 @keyframes seconds {
181 0% {
182 opacity: 1;
183 }
184
185 100% {
186 opacity: 0;
187 left: -9999px;
188 }
189 }
190
191 .link-list-container {
192 margin: auto;
193 }
194
195 .link-list-container .link-list-button {
196 display: block;
197 background: #ff6f91;
198 color: white;
199 text-decoration: none;
200 padding: 1em;
201 margin: 1em 0;
202 border-radius: 8px;
203 font-weight: bold;
204 transition: background 0.3s ease;
205 }
206
207 .link-list-container .link-list-button:hover {
208 background: #ff4f78;
209 }
210
211 .link-list-container .note {
212 font-size: 0.9em;
213 margin-top: 1em;
214 }
215
216 .link-list-container .submenu {
217 border-radius: 10px;
218 padding: 1em;
219 margin-top: 2em;
220 }
221
222 .link-list-container .submenu .submenu-h3 {
223 margin-top: 0;
224 font-size: 1.2em;
225 }
226
227 .link-list-container .submenu p {
228 font-size: 0.95em;
229 margin-bottom: 1em;
230 }
231}