chore: moved all base tailwind styles to regular CSS

moebiusmania · Jan 6, 2024 · 52d7044 · 52d7044
1 parent bd6940f
commit 52d7044
Show file tree

Hide file tree

Showing 15 changed files with 661 additions and 118 deletions.
diff --git a/components/DeviceCard.vue b/components/DeviceCard.vue
@@ -14,26 +14,63 @@ const formatDate = (date: string): string => {
 </script>
 
 <template>
-  <article class="card bg-neutral-content shadow-xl border-none">
-    <figure class="p-4 bg-white">
+  <article class="card bg-neutral-content">
+    <figure>
       <img :src="device.image" :alt="device.title" />
     </figure>
     <div class="card-body dark:text-base-100">
       <div>
-        <span v-for="tag in device.tags" class="badge badge-primary mr-2 !text-base-100 no-underline">{{ tag }}</span>
+        <span v-for="tag in device.tags" class="badge badge-primary !text-base-100">{{ tag }}</span>
       </div>
-      <p class="text-sm flex-none">
+      <p>
         Data di acquisto:
         {{ formatDate(device.purchase) }}
       </p>
       <h2 class="card-title">
-        <NuxtLink class="underline hover:text-primary" :href="device.post || device.url">
+        <NuxtLink class="hover:text-primary" :href="device.post || device.url">
           {{ device.title }}
         </NuxtLink>
-        <External v-if="device.url" class="w-4 h-4 inline-block" />
-        <Doc v-if="device.post" class="w-4 h-4 inline-block" />
+        <External v-if="device.url" />
+        <Doc v-if="device.post" />
       </h2>
       <ContentRenderer :value="device" />
     </div>
   </article>
 </template>
+
+<style scoped>
+article {
+  border-style: none;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  & figure {
+    padding: 1rem;
+    background-color: #ffffff;
+  }
+
+  &>div {
+    & span {
+      margin-right: 0.5rem;
+      text-decoration: none;
+    }
+
+    &>p {
+      flex: none;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+
+    &>h2 {
+      & a {
+        text-decoration: underline;
+      }
+
+      & svg {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/GamingPlatforms.server.vue b/components/GamingPlatforms.server.vue
@@ -10,13 +10,22 @@ const { platforms = [] } = defineProps<Props>();
 </script>
 
 <template>
-  <p class="my-2">
+  <p>
     Giocato su:
-    <NuxtLink
-      v-for="platform in platforms"
-      :href="platform.url"
-      class="badge badge-primary mx-1 !text-base-100 no-underline"
-      >{{ platform.label }}</NuxtLink
-    >
+    <NuxtLink v-for="platform in platforms" :href="platform.url" class="badge badge-primary !text-base-100">{{
+      platform.label }}</NuxtLink>
   </p>
 </template>
+
+<style scoped>
+p {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  & a {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/components/Header.vue b/components/Header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SITE_TITLE } from "@/utils/config";
 
-const classes = "mr-5 hover:text-neutral dark:hover:text-neutral-content"
+const classes = "navitem hover:text-neutral dark:hover:text-neutral-content"
 const nav: Array<{
   name: string,
   href: string
@@ -21,22 +21,22 @@ const route = useRoute();
 
 const toggleTheme = (dark: boolean) => dark ? route.path : `${route.path}?theme=dark`;
 
-const isActive = (href: string, route: any) => [classes, { underline: href === route.path }];
+const isActive = (href: string, route: any) => [classes, { "router-link-active": href === route.path }];
 </script>
 
 <template>
-  <header class="text-gray-600 body-font">
-    <div class="max-w-5xl mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
-      <NuxtLink class="flex title-font font-medium items-center text-base-content mb-4 md:mb-0" href="/">
-        <img src="/static/images/avatar.png" :alt="SITE_TITLE" class="w-10 h-10 text-white rounded-full" />
-        <span class="ml-3 text-xl">{{ SITE_TITLE }}</span>
+  <header>
+    <div>
+      <NuxtLink class="text-base-content" href="/">
+        <img src="/static/images/avatar.png" :alt="SITE_TITLE" />
+        <span>{{ SITE_TITLE }}</span>
       </NuxtLink>
-      <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
+      <nav>
         <NuxtLink v-for="(item, index) in nav" :key="index" :class="isActive(item.href, route)" :href="item.href">{{
           item.name }}</NuxtLink>
         <a aria-label="theme switcher" :href="toggleTheme(dark)"
-          class="w-6 h-6 pt-0.5 cursor-pointer hover:text-neutral dark:hover:text-neutral-content" id="theme">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor">
+          class="hover:text-neutral dark:hover:text-neutral-content" id="theme">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor">
             <path v-if="dark" class="sun" fill-rule="evenodd"
               d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
               clip-rule="evenodd"></path>
@@ -47,3 +47,79 @@ const isActive = (href: string, route: any) => [classes, { underline: href === r
     </div>
   </header>
 </template>
+
+<style scoped>
+header {
+  color: #4B5563;
+
+  &>div {
+    display: flex;
+    padding: 1.25rem;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    max-width: 64rem;
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
+
+    &>a {
+      display: flex;
+      margin-bottom: 1rem;
+      align-items: center;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        margin-bottom: 0;
+      }
+
+      & img {
+        border-radius: 9999px;
+        width: 2.5rem;
+        height: 2.5rem;
+        color: #ffffff;
+      }
+
+      & span {
+        margin-left: 0.75rem;
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+    }
+
+    &>nav {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin-left: auto;
+
+      @media (min-width: 768px) {}
+
+      &>a.navitem {
+        margin-right: 1.25rem;
+      }
+
+      &>a.router-link-active {
+        text-decoration: underline;
+      }
+
+      & a#theme {
+        padding-top: 0.125rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        cursor: pointer;
+
+        & svg {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/Outdated.server.vue b/components/Outdated.server.vue
@@ -12,13 +12,28 @@ const isOutdated: boolean = current - postYear > 2;
 </script>
 
 <template>
-  <div class="alert shadow-lg my-10" v-if="isOutdated">
-    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+  <div class="alert" v-if="isOutdated">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
         d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
     </svg>
     <span><strong>ATTENZIONE!</strong> Questo post ha qualche anno sulle spalle, quindi è molto probabile che il contesto
       degli argomenti
       trattati non sia più attuale. Controlla la data di pubblicazione prima di continuare a leggere 🙂</span>
   </div>
-</template>
+</template>
+
+<style scoped>
+div {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  & svg {
+    shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke: currentColor;
+  }
+}
+</style>
diff --git a/components/Pagination.server.vue b/components/Pagination.server.vue
@@ -13,12 +13,12 @@ const next: number = page + 1;
 </script>
 
 <template>
-  <div class="pt-6 pb-8 space-y-2 md:space-y-5">
-    <nav class="flex justify-between">
+  <div>
+    <nav>
       <NuxtLink v-if="prev > 0" class="text-primary hover:text-primary" :href="`/post/page/${prev}`">
         <button aria-label="precedente">&larr; Precedente</button>
       </NuxtLink>
-      <button aria-label="precedente" v-else disabled class="text-neutral opacity-40">
+      <button aria-label="precedente" v-else disabled class="text-neutral">
         &larr; Precedente
       </button>
 
@@ -27,9 +27,30 @@ const next: number = page + 1;
       <NuxtLink v-if="allPosts === limit" class="text-primary hover:text-primary" :href="`/post/page/${next}`">
         <button aria-label="successivo">Successivo &rarr;</button>
       </NuxtLink>
-      <button aria-label="successivo" v-else disabled class="text-neutral opacity-40">
+      <button aria-label="successivo" v-else disabled class="text-neutral">
         Successivo &rarr;
       </button>
     </nav>
   </div>
 </template>
+
+<style scoped>
+div {
+  padding-top: 1.5rem;
+  padding-bottom: 2rem;
+  margin-top: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-top: 1.25rem;
+  }
+
+  & nav {
+    display: flex;
+    justify-content: space-between;
+
+    & button {
+      opacity: 0.4;
+    }
+  }
+}
+</style>
diff --git a/components/Search.vue b/components/Search.vue
@@ -18,34 +18,13 @@ const { results, value } = defineProps<Props>();
 </script>
 
 <template>
-  <form class="form-control my-10">
+  <form class="form-control">
     <div class="input-group">
-      <input
-        type="text"
-        :value="value"
-        placeholder="Cerca tra gli articoli (per titolo)"
-        class="input input-bordered input-primary w-full md:max-w-xl"
-        @input="onTyping"
-      />
-      <button
-        v-if="value.length !== 0"
-        class="btn btn-square"
-        type="button"
-        @click="emit('clear')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
+      <input type="text" :value="value" placeholder="Cerca tra gli articoli (per titolo)"
+        class="input input-bordered input-primary" @input="onTyping" />
+      <button v-if="value.length !== 0" class="btn btn-square" type="button" @click="emit('clear')">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
     </div>
@@ -54,3 +33,23 @@ const { results, value } = defineProps<Props>();
     Risultato ricerca: <strong>{{ results }}</strong> articoli
   </p>
 </template>
+
+<style scoped>
+form {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+
+  & input {
+    width: 100%;
+
+    @media (min-width: 768px) {
+      max-width: 36rem;
+    }
+  }
+
+  & svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+</style>