My personal website. Now written from scratch!
arctictherogue.xyz
Add light mode
+24
-11
+11
-11
src/_includes/index.vto
+11
-11
src/_includes/index.vto
···
11
11
<meta property="og:description" content="Personal site for Arctic"/>
12
12
<link rel="stylesheet" href="style.css">
13
13
</head>
14
-
<body class="font-['Inter','sans-serif'] bg-base-500">
15
-
<div id="header" class="w-full fixed flex items-center bg-crust-500 justify-center top-0 left-0 text-text-500 border-b-4 border-surface0-500">
14
+
<body class="font-['Inter','sans-serif'] bg-base-light-500 dark:bg-base-500">
15
+
<div id="header" class="w-full fixed flex items-center bg-crust-light-500 dark:bg-crust-500 justify-center top-0 left-0 text-text-light-500 dark:text-text-500 border-b-4 border-surface0-light-500 dark:border-surface0-500">
16
16
<nav class="flex items-center justify-center flex-row">
17
17
<div class="flex items-center justify-left p-5 gap-0 text-4xl lg:text-[20pt] font-bold pr-30 lg:pr-[min(calc(100%-7.5rem),850px)]">
18
-
<img src="media/pfp.png" alt="Profile Picture" class="w-16 h-auto md:w-20 lg:w-26 border-4 border-surface0-500">
18
+
<img src="media/pfp.png" alt="Profile Picture" class="w-16 h-auto md:w-20 lg:w-26 border-4 border-surface0-light-500 dark:border-surface0-500">
19
19
<p class="p-5">{{ title }}</p>
20
20
</div>
21
21
<ul class="flex items-center justify-center list-none p-5 gap-5 text-3xl lg:text-[14pt]">
···
24
24
</ul>
25
25
</nav>
26
26
</div>
27
-
<div class="text-left text-2xl lg:text-[14pt] text-text-500 pr-10 pl-10 m-auto w-[min(calc(100%-10rem),850px)]">
28
-
<p class="pt-40 text-6xl lg:text-[36pt] font-bold text-accent-500">Welcome to my site!</p>
27
+
<div class="text-left text-2xl lg:text-[14pt] text-text-light-500 dark:text-text-500 pr-10 pl-10 m-auto w-[min(calc(100%-10rem),850px)]">
28
+
<p class="pt-40 text-6xl lg:text-[36pt] font-bold text-accent-light-500 dark:text-accent-500">Welcome to my site!</p>
29
29
<p>{{ intro }}</p>
30
-
<div class="flex items-center justify-left pr-5 pb-5 gap-2 text-subtext-500">
30
+
<div class="flex items-center justify-left pr-5 pb-5 gap-2 text-subtext-light-500 dark:text-subtext-500">
31
31
<p class="text-xl lg:text-[12pt]">{{ pronouns }}</p>
32
32
<svg class="w-[1em]" xmlns="http://www.w3.org/2000/svg" width="800" height="30" viewBox="0 0 25 15">
33
33
<rect width="25" height="15" fill="#0038a8"/>
···
35
35
<rect width="25" height="6" fill="#d60270"/>
36
36
</svg>
37
37
</div>
38
-
<article class="prose prose-cat prose-2xl lg:prose-lg">
38
+
<article class="prose prose-cat-light dark:prose-cat prose-2xl lg:prose-lg">
39
39
{{ content }}
40
40
</article>
41
41
</div>
42
-
<div id="footer" class="w-full fixed flex items-center bg-crust-500 justify-center bottom-0 left-0 text-text-500 border-t-4 border-surface0-500 text-2xl lg:text-[14pt] p-5">
42
+
<div id="footer" class="w-full fixed flex items-center bg-crust-light-500 dark:bg-crust-500 justify-center bottom-0 left-0 text-text-light-500 dark:text-text-500 border-t-4 border-surface0-light-500 dark:border-surface0-500 text-2xl lg:text-[14pt] p-5">
43
43
<p>
44
44
Made with ❤️ by Arctic with
45
-
<a class="text-subtext-500" href="https://lume.land">Lume🔥</a>
45
+
<a class="text-subtext-light-500 dark:text-subtext-500" href="https://lume.land">Lume🔥</a>
46
46
and
47
-
<a class="text-subtext-500" href="https://tailwindcss.com/">Tailwindcss🌊</a>
48
-
— <a class="text-subtext-500" href="https://tangled.org/arctictherogue.xyz/website/">Source</a>
47
+
<a class="text-subtext-light-500 dark:text-subtext-500" href="https://tailwindcss.com/">Tailwindcss🌊</a>
48
+
— <a class="text-subtext-light-500 dark:text-subtext-500" href="https://tangled.org/arctictherogue.xyz/website/">Source</a>
49
49
</p>
50
50
</div>
51
51
</body>
+13
src/style.css
+13
src/style.css
···
4
4
5
5
@theme {
6
6
--color-base-500: #24273a;
7
+
--color-base-light-500: #eff1f5;
7
8
--color-crust-500: #181926;
9
+
--color-crust-light-500: #dce0e8;
8
10
--color-surface0-500: #363a4f;
11
+
--color-surface0-light-500: #ccd0da;
9
12
--color-text-500: #cad3f5;
13
+
--color-text-light-500: #4c4f69;
10
14
--color-subtext-500: #a5adcb;
15
+
--color-subtext-light-500: #5c5f77;
11
16
--color-accent-500: #8bd5ca;
17
+
--color-accent-light-500: #179299;
12
18
}
13
19
14
20
@utility prose-cat {
···
17
23
--tw-prose-bullets: var(--color-accent-500);
18
24
--tw-prose-links: var(--color-text-500);
19
25
}
26
+
27
+
@utility prose-cat-light {
28
+
--tw-prose-body: var(--color-text-light-500);
29
+
--tw-prose-headings: var(--color-light-accent-500);
30
+
--tw-prose-bullets: var(--color-light-accent-500);
31
+
--tw-prose-links: var(--color-light-text-500);
32
+
}