chore: starting to move away from tailwind to vanilla CSS

moebiusmania · Dec 23, 2023 · ab9096c · ab9096c
1 parent 53ee601
commit ab9096c
Show file tree

Hide file tree

Showing 10 changed files with 327 additions and 68 deletions.
diff --git a/components/Coffee.server.vue b/components/Coffee.server.vue
@@ -1,27 +1,6 @@
-<script setup lang="ts">
-const styles: string[] = [
-  'no-underline',
-  'bg-sky-500',
-  'hover:bg-sky-600',
-  'text-white',
-  'hover:text-white',
-  'flex',
-  'gap-2',
-  'items-center',
-  'justify-center',
-  'rounded-lg',
-  'py-3',
-  'px-8',
-  'text-xl',
-  'font-semibold',
-]
-</script>
-
 <template>
-  <a :class="styles.join(' ')" href="https://www.buymeacoffee.com/moebiusmania" rel="noreferrer noopener"
-    target="_blank">
-    <svg class="flex items-center" width="25px" height="32px" viewBox="0 0 884 1279" fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+  <a href="https://www.buymeacoffee.com/moebiusmania" rel="noreferrer noopener" target="_blank">
+    <svg width="25px" height="32px" viewBox="0 0 884 1279" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M791.109 297.518L790.231 297.002L788.201 296.383C789.018 297.072 790.04 297.472 791.109 297.518Z"
         fill="#0D0C22"></path>
       <path d="M803.896 388.891L802.916 389.166L803.896 388.891Z" fill="#0D0C22"></path>
@@ -58,3 +37,33 @@ const styles: string[] = [
     <span>Offrimi un caffé</span>
   </a>
 </template>
+
+<style scoped>
+a {
+  display: flex;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  color: #ffffff;
+  text-decoration: none;
+  background: rgb(14, 165, 233);
+
+  &:hover {
+    color: #ffffff;
+    background: rgb(2, 132, 199);
+  }
+
+  & svg {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/components/Container.vue b/components/Container.vue
@@ -1,7 +1,23 @@
 <template>
-  <section class="text-gray-600 body-font overflow-hidden">
-    <div class="max-w-5xl px-5 py-16 mx-auto">
+  <section>
+    <div>
       <slot />
     </div>
   </section>
 </template>
+
+<style scoped>
+section {
+  overflow: hidden;
+  color: #4B5563;
+
+  &>div {
+    margin: 0 auto;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    max-width: 64rem;
+  }
+}
+</style>
diff --git a/components/Footer.server.vue b/components/Footer.server.vue
@@ -3,18 +3,17 @@ const today: Date = new Date();
 </script>
 
 <template>
-  <footer class="text-gray-600 body-font">
-    <div class="max-w-5xl px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
-      <span class="ml-3 text-xl text-base-content">Salvatore Laisa Blog</span>
-      <p
-        class="text-sm dark:text-base-content sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-neutral-content dark:sm:border-neutral sm:py-2 sm:mt-0 mt-4 flex">
+  <footer>
+    <div>
+      <span>Salvatore Laisa Blog</span>
+      <p class="dark:text-base-content sm:border-neutral-content dark:sm:border-neutral">
         &copy; 2010 - {{ today.getFullYear() }} — sviluppato con
-        <a href="https://v3.nuxtjs.org/" class="text-primary ml-1" rel="noopener noreferrer" target="_blank">Nuxt 3</a>
+        <a href="https://v3.nuxtjs.org/" class="text-primary" rel="noopener noreferrer" target="_blank">Nuxt 3</a>
       </p>
-      <div class="w-36 sm:ml-auto sm:mt-0 mt-4 flex justify-center md:justify-end gap-3">
+      <div>
         <a class="hover:text-primary" href="https://github.com/moebiusmania" target="_blank" rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>GitHub icon</title>
             <path
               d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">
@@ -25,7 +24,7 @@ const today: Date = new Date();
         <a class="hover:text-primary" href="https://www.youtube.com/channel/UCxaNVAQjuYZdpCrDukpVnxg" target="_blank"
           rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>YouTube icon</title>
             <path
               d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z">
@@ -36,7 +35,7 @@ const today: Date = new Date();
         <a class="hover:text-primary" href="https://www.linkedin.com/in/salvatorelaisa" target="_blank"
           rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>LinkedIn icon</title>
             <path
               d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z">
@@ -46,7 +45,7 @@ const today: Date = new Date();
 
         <a class="hover:text-primary" href="https://twitter.com/moebiusmania" target="_blank" rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>X (Twitter) icon</title>
             <path
               d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z">
@@ -57,3 +56,73 @@ const today: Date = new Date();
     </div>
   </footer>
 </template>
+
+<style scoped>
+footer {
+  color: #4B5563;
+
+  &>div {
+    display: flex;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    flex-direction: column;
+    align-items: center;
+    max-width: 64rem;
+
+    @media (min-width: 640px) {
+      flex-direction: row;
+    }
+
+    &>span {
+      margin-left: 0.75rem;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+
+    &>p {
+      display: flex;
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+
+      @media (min-width: 640px) {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        padding-left: 1rem;
+        margin-top: 0;
+        margin-left: 1rem;
+        border-left-width: 2px;
+      }
+
+      & a {
+        margin-left: 0.25rem;
+      }
+    }
+
+    &>div {
+      display: flex;
+      margin-top: 1rem;
+      gap: 0.75rem;
+      justify-content: center;
+      width: 9rem;
+
+      @media (min-width: 640px) {
+        margin-top: 0;
+      }
+
+      @media (min-width: 768px) {
+        justify-content: flex-end;
+      }
+
+      & a {
+        & svg {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/PostPreview.vue b/components/PostPreview.vue
@@ -7,9 +7,9 @@ defineProps<{
 </script>
 
 <template>
-  <li class="py-8 flex flex-wrap md:flex-nowrap">
-    <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-      <span class="mt-1 text-secondary">
+  <li>
+    <div>
+      <span class="text-secondary">
         {{
           new Date(post.date).toLocaleDateString("it-it", {
             year: "numeric",
@@ -19,31 +19,104 @@ defineProps<{
         }}
       </span>
     </div>
-    <div class="w-full md:flex-grow">
+    <div>
       <NuxtLink :href="`/post${post._path}`">
-        <h2 class="text-2xl font-medium text-base-content title-font mb-2">
+        <h2 class="text-base-content">
           {{ post.title }}
         </h2>
       </NuxtLink>
-      <div class="flex flew-wrap">
-        <NuxtLink v-for="tag in post.tags" class="mr-3 text-sm font-medium text-primary uppercase hover:text-primary"
-          :href="`/tags/${tag}`">
+      <div>
+        <NuxtLink v-for="tag in post.tags" class="text-primary hover:text-primary" :href="`/tags/${tag}`">
           {{ tag }}
         </NuxtLink>
       </div>
-      <p class="leading-relaxed mt-6 dark:text-base-content">
+      <p class="dark:text-base-content">
         {{ post.summary }}
       </p>
-      <NuxtLink class="text-primary hover:text-primary inline-flex items-center mt-4" :href="`/post${post._path}`">
+      <NuxtLink class="text-primary hover:text-primary" :href="`/post${post._path}`">
         Continua a leggere ({{
           post.readingTime.text.replace("min read", "minuti")
         }})
-        <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"
-          stroke-linecap="round" stroke-linejoin="round">
+        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
+          stroke-linejoin="round">
           <path d="M5 12h14"></path>
           <path d="M12 5l7 7-7 7"></path>
         </svg>
       </NuxtLink>
     </div>
   </li>
 </template>
+
+<style scoped>
+li {
+  display: flex;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  flex-wrap: wrap;
+
+  @media (min-width: 768px) {
+    flex-wrap: nowrap;
+  }
+
+  &>div:first-child {
+    display: flex;
+    margin-bottom: 1.5rem;
+    flex-direction: column;
+
+    @media (min-width: 768px) {
+      margin-bottom: 0;
+      width: 16rem;
+    }
+
+    & span {
+      margin-top: 0.25rem;
+    }
+  }
+
+  &>div:last-child {
+    width: 100%;
+
+    @media (min-width: 768px) {
+      flex-grow: 1;
+    }
+
+    & h2 {
+      margin-bottom: 0.5rem;
+      font-size: 1.5rem;
+      line-height: 2rem;
+      font-weight: 500;
+    }
+
+    &>div {
+      display: flex;
+      flex-wrap: wrap;
+
+      &>a {
+        margin-right: 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+        text-transform: uppercase;
+      }
+    }
+
+    & p {
+      margin-top: 1.5rem;
+      line-height: 1.625;
+    }
+
+    &>a:last-child {
+      display: inline-flex;
+      margin-top: 1rem;
+      align-items: center;
+
+      & svg {
+        margin-left: 0.5rem;
+        width: 1rem;
+        height: 1rem;
+
+      }
+    }
+  }
+}
+</style>
diff --git a/components/Published.server.vue b/components/Published.server.vue
@@ -15,7 +15,17 @@ const { value = new Date().toISOString() } = defineProps<Props>();
 </script>
 
 <template>
-  <dd class="text-base font-medium leading-6 mb-2">
+  <dd>
     <time :datetime="date">Pubblicato: {{ date(value) }}</time>
   </dd>
 </template>
+
+<style scoped>
+dd {
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+</style>
diff --git a/components/ReadingTime.server.vue b/components/ReadingTime.server.vue
@@ -5,7 +5,14 @@ defineProps<{
 </script>
 
 <template>
-  <p class="my-2">
+  <p>
     <small>Tempo di lettura: {{ value.replace("min read", "minuti") }}</small>
   </p>
 </template>
+
+<style scoped>
+p {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+</style>