My personal website. Now written from scratch!
arctictherogue.xyz
Make fonts self hosted and update mobile scaling
+16
-8
+7
_config.ts
+7
_config.ts
···
3
3
import favicon from "lume/plugins/favicon.ts";
4
4
import icons from "lume/plugins/icons.ts";
5
5
import inline from "lume/plugins/inline.ts";
6
+
import googleFonts from "lume/plugins/google_fonts.ts";
6
7
7
8
const site = lume({
8
9
src: "./src",
···
11
12
12
13
site.use(tailwindcss(/* Options */));
13
14
site.use(favicon(/* Options */));
15
+
site.use(
16
+
googleFonts({
17
+
fonts:
18
+
"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
19
+
}),
20
+
);
14
21
site.use(
15
22
icons({
16
23
catalogs: [
+3
-1
deno.json
+3
-1
deno.json
+5
-5
src/_includes/index.vto
+5
-5
src/_includes/index.vto
···
8
8
<body class="font-['Inter','sans-serif'] bg-base-500">
9
9
<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">
10
10
<nav class="flex items-center justify-center flex-row">
11
-
<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%-9rem),850px)]">
11
+
<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)]">
12
12
<img src="media/pfp.png" alt="Profile Picture" class="w-16 h-auto md:w-20 lg:w-26 border-4 border-surface0-500">
13
13
<p class="p-5">{{ title }}</p>
14
14
</div>
15
-
<ul class="flex items-center justify-center list-none p-5 gap-5 text-2xl lg:text-[14pt]">
15
+
<ul class="flex items-center justify-center list-none p-5 gap-5 text-3xl lg:text-[14pt]">
16
16
<li><a href="{{ "/" |> url }}">Home</a></li>
17
17
<li><a title="soon™️">Blog</a></li>
18
18
</ul>
19
19
</nav>
20
20
</div>
21
21
<div class="text-left text-2xl lg:text-[14pt] text-text-500 pr-10 pl-10 m-auto w-[min(calc(100%-10rem),850px)]">
22
-
<p class="pt-40 text-[36pt] font-bold text-accent-500">Welcome to my site!</p>
22
+
<p class="pt-40 text-6xl lg:text-[36pt] font-bold text-accent-500">Welcome to my site!</p>
23
23
<p>{{ intro }}</p>
24
24
<div class="flex items-center justify-left pr-5 pb-5 gap-5 text-subtext-500">
25
-
<p class="text-[12pt]">{{ pronouns }}</p>
25
+
<p class="text-xl lg:text-[12pt]">{{ pronouns }}</p>
26
26
<svg class="w-7" xmlns="http://www.w3.org/2000/svg" width="800" height="30" viewBox="0 0 25 15">
27
27
<rect width="25" height="15" fill="#0038a8"/>
28
28
<rect width="25" height="10" fill="#9b4f96"/>
29
29
<rect width="25" height="6" fill="#d60270"/>
30
30
</svg>
31
31
</div>
32
-
<article class="prose prose-cat prose-xl lg:prose-lg">
32
+
<article class="prose prose-cat prose-2xl lg:prose-lg">
33
33
{{ content }}
34
34
</article>
35
35
</div>
+1
-2
src/style.css
+1
-2
src/style.css
···
1
1
/*noinspection CssUnknownTarget*/
2
2
@import "tailwindcss";
3
-
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/inter.min.css");
4
3
@plugin "@tailwindcss/typography";
5
4
6
5
@theme {
···
17
16
--tw-prose-headings: var(--color-accent-500);
18
17
--tw-prose-bullets: var(--color-accent-500);
19
18
--tw-prose-links: var(--color-text-500);
20
-
}
19
+
}