Format

Author: cmpadden

layouts/default.vue

@@ -1,13 +1,15 @@
 <template>
-    <div class="bg-gradient-to-b from-orange-500 to-red-500">
-        <div class="p-[10px]">
-            <main class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background font-display">
-                <Header />
-                <main class="flex-1 overflow-scroll no-scrollbar">
-                    <slot />
-                </main>
-                <Footer />
-            </main>
-        </div>
+  <div class="bg-gradient-to-b from-orange-500 to-red-500">
+    <div class="p-[10px]">
+      <main
+        class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background font-display"
+      >
+        <Header />
+        <main class="no-scrollbar flex-1 overflow-scroll">
+          <slot />
+        </main>
+        <Footer />
+      </main>
     </div>
+  </div>
 </template>

layouts/light.vue

@@ -1,9 +1,7 @@
 <template>
   <main>
     <Header />
-    <div
-      class="container mx-auto h-screen bg-background font-display"
-    >
+    <div class="container mx-auto h-screen bg-background font-display">
       <div class="flex flex-col border-2 bg-white">
         <slot />
       </div>

package.json

@@ -7,7 +7,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "format": "prettier --parser vue components/ pages/ --write"
+    "format": "prettier --parser vue components/ pages/ layouts/ --write"
   },
   "devDependencies": {
     "@heroicons/vue": "^2.2.0",

pages/articles/[...slug].vue

@@ -39,7 +39,7 @@ const { data: page } = await useAsyncData(route.path, () => {
           <div class="mb-2 text-xs uppercase text-gray-400">Category</div>
           <div class="flex flex-row space-x-2">
             <NuxtLink
-              class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500"
+              class="mr-2 w-min rounded-md bg-background text-xs font-bold uppercase hover:cursor-pointer hover:text-orange-500"
               v-for="(category, ix) in page.categories"
               :key="ix"
               :to="`/articles?category=${category}`"
@@ -53,9 +53,9 @@ const { data: page } = await useAsyncData(route.path, () => {
 
         <div>
           <div class="mb-2 text-xs uppercase text-gray-400">Tags</div>
-          <div class="flex flex-row md:space-x-2">
+          <div class="flex flex-row text-xs uppercase">
             <NuxtLink
-              class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500"
+              class="mr-2 w-min rounded-md bg-background font-bold hover:cursor-pointer hover:text-orange-500"
               v-for="(tag, ix) in page.tags"
               :key="ix"
               :to="`/articles?tag=${tag}`"

pages/index.vue

@@ -7,16 +7,14 @@ const data = await queryCollection("content")
 
 <template>
   <div class="min-h-screen bg-emerald-950 bg-[url('/images/noise.svg')]">
-    <div>
-      <section class="bg-gradient-to-b from-background to-transparent py-2">
-        <div class="container mx-auto my-12">
-          <div class="text-orange-500">
-            <Logo />
-          </div>
+    <section class="bg-gradient-to-b from-background to-transparent py-2">
+      <div class="container mx-auto my-12">
+        <div class="text-orange-500">
+          <Logo />
         </div>
-      </section>
-      <SectionBlogPosts :articles="data" :show_dates="true" />
-      <SectionPlayground :limit="8" showImages linkToPlayground />
-    </div>
+      </div>
+    </section>
+    <SectionBlogPosts :articles="data" :show_dates="true" />
+    <SectionPlayground :limit="8" showImages linkToPlayground />
   </div>
 </template>