Merge pull request #51 from cmpadden/experimental/orange-rounded-border

[experimental] orange rounded border

assets/css/tailwind.css

@@ -50,3 +50,15 @@ code {
   /* temporary fix to remove strange rendering of text via prism */
   text-shadow: none;
 }
+
+
+@layer base {
+  @font-face {
+    font-family: Mafins;
+    src: url('/fonts/Mafins.otf');
+  }
+  @font-face {
+    font-family: Milk and Honey;
+    src: url('/fonts/Milk and Honey.otf');
+  }
+}

components/Header.vue

@@ -6,13 +6,13 @@ const route = useRoute();
 
 <template>
   <nav class="container mx-auto py-6">
-    <div class="flex items-end justify-between font-semibold text-gray-200">
+    <div class="flex items-end justify-between text-gray-200">
       <NuxtLink
         to="/"
-        class="mr-2 text-2xl font-bold leading-tight text-white hover:text-blue-200"
+        class="text-3xl text-white hover:text-orange-500 font-mono font-semibold underline underline-offset-4 decoration-orange-500"
         as="div"
       >
-        Who&#183;Am&#183;I
+        who&#183;am&#183;i
       </NuxtLink>
       <div>
         <HeadlessMenu as="div" class="relative z-50 inline-block text-left">

components/section/BlogPosts.vue

@@ -9,8 +9,8 @@ const props = defineProps({
 <template>
   <section>
     <div class="container mx-auto space-y-4">
-      <h1 class="text-3xl font-bold leading-tight text-white">
-        Blog Posts
+      <h1 class="text-3xl text-white font-mono font-semibold underline underline-offset-4 decoration-orange-500">
+        blog posts
       </h1>
 
       <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -48,7 +48,7 @@ const props = defineProps({
         </div>
       </div>
       <div>
-        <NuxtLink to="/articles" class="mt-4 flex text-red-200 hover:text-red-400 font-bold">
+        <NuxtLink to="/articles" class="mt-4 flex text-white hover:text-red-400 font-bold">
           More <ChevronRightIcon class="h-6 w-6" aria-hidden="true" />
         </NuxtLink>
       </div>

components/section/Playground.vue

@@ -92,7 +92,7 @@ const filtered_links = computed(() => {
 <template>
   <section class="text-white">
     <div class="container mx-auto space-y-4 py-8 text-white">
-      <h1 class="text-3xl font-bold leading-tight text-white">
+      <h1 class="text-3xl font-mono font-semibold lowercase underline underline-offset-4 decoration-orange-500">
         {{ title }}
       </h1>
       <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -120,7 +120,7 @@ const filtered_links = computed(() => {
       <div v-if="linkToPlayground">
         <NuxtLink
           to="/playground"
-          class="mt-4 flex font-bold text-red-200 hover:text-red-400"
+          class="mt-4 flex font-bold text-white hover:text-red-400"
         >
           More <ChevronRightIcon class="h-6 w-6" aria-hidden="true" />
         </NuxtLink>

layouts/default.vue

@@ -1,9 +1,15 @@
 <template>
-  <main class="flex flex-col min-h-screen bg-background font-display">
-    <Header />
-    <main class="flex-1">
-      <slot />
-    </main>
-    <Footer />
-  </main>
+  <div class="bg-orange-500">
+    <div class="rounded-3xl border-[10px] border-orange-500">
+      <main
+        class="flex min-h-screen flex-col rounded-3xl bg-background font-display"
+      >
+        <Header />
+        <main class="flex-1">
+          <slot />
+        </main>
+        <Footer />
+      </main>
+    </div>
+  </div>
 </template>

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",

tailwind.config.js

@@ -20,7 +20,7 @@ export default {
         display: ["Helvetica", "sans-serif"],
         body: ["Graphik", "sans-serif"],
         mono: ["Inconsolata", "monospace"],
-        fantasy: ["Trattatello", "fantasy"],
+        fantasy: ["Milk and Honey", "fantasy"],
       },
       borderWidth: {
         default: "1px",