feat(list): add header component

apps/list/app.vue

@@ -1,11 +1,5 @@
 <template>
-    <ThemeController />
+    <NuxtPage />
-
-    <main class="">
-        <div class="mx-auto max-w-screen-mobile">
-            <NuxtPage />
-        </div>
-    </main>
 </template>
 
 <style>

apps/list/components/Header.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps(["highlight"])
+</script>
+
+<template>
+    <div class="slant bg-light-card-bg dark:bg-dark-card-bg">
+        <ThemeController class="mb-10" />
+
+        <h1
+            class="text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
+        >
+            <span class="font-semibold">pomp</span>'s<br />
+            <span class="">biased</span> &
+            <span class="">opinionated</span>
+            <br />
+            list of
+            <span
+                class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
+            >
+                {{ props.highlight }}
+            </span>
+        </h1>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    @apply underline decoration-blue-400/75 decoration-[12px] underline-offset-[-6px] dark:decoration-blue-600/75;
+    text-decoration-skip-ink: none;
+}
+
+.slant {
+    padding-bottom: 8rem /* 128px (pb-32) */;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 128px));
+}
+</style>

apps/list/nuxt.config.ts

@@ -31,7 +31,17 @@ export default defineNuxtConfig({
     // https://google-fonts.nuxtjs.org/getting-started/options
     googleFonts: {
         families: {
-            "Noto Sans KR": true,
+            "Noto Sans KR": [
+                // 100, // thin
+                // 200, // extralight
+                // 300, // light
+                400, // normal
+                // 500, // medium
+                600, // semibold
+                // 700, // bold
+                800, // extrabold
+                // 900, // black
+            ],
         },
     },
 

apps/list/pages/content-creators.vue

@@ -43,7 +43,11 @@ const t = useVueTable({
 </script>
 
 <template>
-    <h1 class="text-4xl font-black">pomp's biased and opinionated list of Content creators</h1>
+    <Header highlight="Content creators" />
+
+    <h1 class="text-4xl font-black">
+        pomp's biased and opinionated list of Content creators
+    </h1>
     <NuxtLink href="/" class="underline">Back</NuxtLink>
     <div class="p-2">
         <table class="border">

apps/list/pages/index.vue

@@ -1,9 +1,5 @@
 <template>
-    <h1 class="text-4xl font-black">
+    <Header highlight="anything" />
-        pomp's<br />
-        biased & opinionated<br />
-        list of
-    </h1>
 
     <NuxtLink href="/content-creators" class="underline">
         Content Creators