Change all page layout

pages/collections.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Techit's Collection</h1>
                 <p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
             </section>

pages/contact.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Contact Techit</h1>
                 <p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
             </section>

pages/fonts.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Fonts</h1>
                 <p id="hero-desc" class="font-hero-desc">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p>
             </section>
@@ -31,17 +31,17 @@ const fonts = [
             {
                 id: "roboto",
                 name: "Roboto",
-                css: "/fonts/roboto/roboto.css"
+                css: "/portal/f/fonts/roboto/roboto.css"
             },
             {
                 id: "roboto-mono",
                 name: "Roboto Mono",
-                css: "/fonts/roboto-mono/roboto-mono.css"
+                css: "/portal/f/fonts/roboto-mono/roboto-mono.css"
             },
             {
                 id: "roboto-serif",
                 name: "Roboto Serif",
-                css: "/fonts/roboto-serif/roboto-serif.css"
+                css: "/portal/f/fonts/roboto-serif/roboto-serif.css"
             }
         ]
     },
@@ -53,7 +53,7 @@ const fonts = [
             {
                 id: "inter",
                 name: "Inter",
-                css: "/fonts/inter/inter.css"
+                css: "/portal/f/fonts/inter/inter.css"
             }
         ]
     },
@@ -65,23 +65,23 @@ const fonts = [
             {
                 id: "noto-sans",
                 name: "Noto Sans",
-                css: "/fonts/noto-sans/noto-sans.css"
+                css: "/portal/f/fonts/noto-sans/noto-sans.css"
             },
             {
                 id: "noto-sans-mono",
                 name: "Noto Sans Mono",
-                css: "/fonts/noto-sans-mono/noto-sans-mono.css"
+                css: "/portal/f/fonts/noto-sans-mono/noto-sans-mono.css"
             },
             {
                 id: "noto-sans-thai",
                 name: "Noto Sans Thai",
-                css: "/fonts/noto-sans-thai/noto-sans-thai.css"
+                css: "/portal/f/fonts/noto-sans-thai/noto-sans-thai.css"
             },
             {
                 disabled: true,
                 id: "noto-sans-thai-looped",
                 name: "Noto Sans Thai Looped",
-                css: "/fonts/noto-sans-thai-looped/noto-sans-thai-looped.css"
+                css: "/portal/f/fonts/noto-sans-thai-looped/noto-sans-thai-looped.css"
             }
         ]
     },
@@ -93,7 +93,41 @@ const fonts = [
             {
                 id: "tiktok-sans",
                 name: "TikTok Sans",
-                css: "/fonts/tiktok-sans/tiktok-sans.css"
+                css: "/portal/f/fonts/tiktok-sans/tiktok-sans.css"
+            }
+        ]
+    },
+    {
+        id: "cmu",
+        family: "Computer Modern",
+        desc: "Computer Modern, the default font family for TeX and LaTeX, designed by Donald Knuth.",
+        childrens: [
+            {
+                id: "cmu-serif",
+                name: "Computer Modern Serif",
+                css: "/portal/f/fonts/cmu-serif/cmu-serif.css"
+            }
+        ]
+    },
+    {
+        id: "tlwg",
+        family: "Thai Linux Working Group",
+        desc: "Thai Linux Working Group (TLWG) fonts, a collection of free and open-source fonts designed for the Thai language.",
+        childrens: [
+            {
+                id: "garuda",
+                name: "Garuda (ครุฑ)",
+                css: "/portal/f/fonts/garuda/garuda.css"
+            },
+            {
+                id: "kinnari",
+                name: "Kinnari (กินรี)",
+                css: "/portal/f/fonts/kinnari/kinnari.css"
+            },
+            {
+                id: "kinnari-oblique",
+                name: "Kinnari (กินรี; Oblique)",
+                css: "/portal/f/fonts/kinnari/kinnari-oblique.css"
             }
         ]
     }

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="what-does-he-do?">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?">
                 <img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/sumo-clipart.png" alt="Techit Thawiang's avatar.">
                 <h1 id="hero" class="font-hero">Techit Thawiang</h1>
                 <p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math nerd</span>, <span class="text-blue-500">self-hoster</span> and a KDE user who's exploring computer science.</p>

pages/portal.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Portal</h1>
                 <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
             </section>

pages/posts/[...slug].vue

@@ -1,29 +1,12 @@
 <template>
-    <!-- <div class="page">
-        <div>
-            <img class="aspect-video w-full h-full object-cover rounded-[calc(var(--ui-radius)*1.5)] mb-12" :alt="post?.title" :src="post?.coverImage">
-            <ContentHeading :data="post"/>
-        </div>
-        <div>
-            <div class="flex not-md:flex-col-reverse gap-2">
-                <article class="prose prose-zinc dark:prose-invert w-full max-w-[48rem]">
-                    <ContentRenderer v-if="post" :value="post"/>
-                    {{ post ? post : 'wtf' }}
-                </article>
-                <div class="flex h-fit md:sticky top-16">
-                    <BlogToC :toc="post?.body?.toc?.links"/>
-                </div>
-            </div>
-        </div>
-    </div> -->
     <main>
         <article class="article">
-            <section class="web-hero relative web-hero-bg bg-cover " :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero-post web-hero-bg relative bg-cover bg-center" :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc">
                 <div class="absolute inset-0 bg-(--color-deep-semidark)/80"></div>
                 <h1 id="hero" class="font-hero z-[1]">{{ post?.title }}</h1>
                 <p id="hero-desc" class="font-hero-desc z-[1]">{{ post?.description }}</p>
             </section>
-            <section class="web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
+            <section class="web-section web-section-narrow" aria-labelledby="post-content" aria-describedby="post-content-desc">
                 <div class="prose">
                     <ContentRenderer v-if="post" :value="post"/>
                     {{ post ? '' : 'Loading...' }}
@@ -55,4 +38,13 @@ useHead({
     { name: 'twitter:description', content: post.value?.description || 'A blog post with no description provided.' }
   ]
 })
-</script>
+</script>
+
+<style>
+.katex-html {
+  display: none;
+}
+.katex-mathml {
+  font-size: 1.2em;
+}
+</style>

pages/posts/index.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Posts</h1>
                 <p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
             </section>

pages/terminal.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="what-does-he-do?">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?">
                 <h1 id="hero" class="font-hero">Terminal</h1>
                 <p id="what-does-he-do?" class="font-hero-desc">This will be a emulator for website visitor (simulator)</p>
             </section>