🎨 Styling improvements (#189)

* Fix styling issues from latest PR (filter)

* Organize components

* Switch home-view to use Card component

* PostPreview use Card component & cleanup

* Cleanup PostFeed & NavBar styling

* PostView uses Card component

* Tag preview uses Card component (untested)

* Contact page/form use Card component

* Error layout use Card

* Cleanup

* Cleanup component imports (as much as possible)

* Revert "Cleanup component imports (as much as possible)"

This reverts commit f229ca6.

Revert import changes (they don't work)"

Author: cal-overflow

nuxt.config.js

@@ -37,13 +37,12 @@ export default {
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: [
+    '~/components/cards',
     '~/components/development',
     '~/components/forms',
-    '~/components/helpers',
     '~/components/misc',
     '~/components/navigation',
     '~/components/previews',
-    '~/components/structural',
     '~/components/views',
   ],
 

src/components/cards/Card.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="bg-card-light dark:bg-card-dark m-6 p-4 md:p-6 flex flex-wrap md:flex-nowrap shadow-lg dark:shadow-shadow-dark hover:shadow-none hover:rounded motion-safe:animate-fade-in-fast transition">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'card',
+  props: {
+    content: {
+      type: Object,
+      default: undefined
+    },
+  }
+};
+</script>

src/components/helpers/Card.vue renamed to src/components/cards/ContentCard.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="grow page-preview-card flex col-span-1 flex-col justify-between bg-card-light dark:bg-card-dark text-center p-6 w-full hover:rounded shadow-md dark:shadow-shadow-dark hover:shadow-none transition">
+  <card class="grow page-preview-card flex m-0 col-span-1 flex-col justify-between text-center w-full">
     <nuxt-content
       :document="content"
       class="w-full max-w-none prose prose:dark-invert dark:prose-invert leading-normal prose-code:before:content-none prose-code:after:content-none transition"
     />
-  </div>
+  </card>
 </template>
 
 <script>
+import Card from '@/components/cards/Card.vue';
+
 export default {
-  name: 'basic-card',
+  name: 'content-card',
+  components: {
+    Card,
+  },
   props: {
     content: {
       type: Object,

src/components/forms/ContactForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="contact-form-card" class="bg-card-light dark:bg-card-dark m-6 p-6 shadow-md hover:shadow-none hover:rounded motion-safe:animate-fade-in transition">
+  <card id="contact-form-card">
     <div v-if="formSubmitted" class="flex min-h-80 motion-safe:animate-fade-in">
       <div class="m-auto">
         <p class="mb-4">
@@ -99,12 +99,17 @@
         </p>
       </div>
     </form>
-  </div>
+  </card>
 </template>
 
 <script>
+import Card from '@/components/cards/Card.vue';
+
 export default {
   name: 'contact-form',
+  components: {
+    Card,
+  },
   data: () => ({
     emailAddress: process.env.NUXT_ENV_EMAIL_ADDRESS,
     name: undefined,

src/components/helpers/BackToTopButton.vue renamed to src/components/misc/BackToTopButton.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import NavItem from '../navigation//NavItem.vue';
+import NavItem from './NavItem.vue';
 
 export default {
   name: 'footer-bar',

src/components/helpers/Divider.vue renamed to src/components/misc/Divider.vue

@@ -9,7 +9,7 @@
         {{ content.signatureNavItem.title }}
       </nav-item>
 
-      <div class="justify-between">
+      <div class="justify-between flex sm:flex-none flex-wrap">
         <nav-item
           v-for="item in content.navItems"
           :key="item.title"
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import NavItem from '../navigation/NavItem.vue';
+import NavItem from './NavItem.vue';
 
 export default {
   name: 'nav-bar',

src/components/helpers/ToolTip.vue renamed to src/components/misc/ToolTip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="post" :class="`post-preview-card ${getCardStyle}`">
+  <card v-if="post" :class="`post-preview-card ${getCardStyle}`">
     <div :class="getImageContainerStyle" style="aspect-ratio: 1 / 1;">
       <nuxt-link ref="feature-image" :to="`${currentRoute}/${post.slug}`" :class="`w-full h-full motion-safe:animate-blur-fade-in-slow`">
         <img :src="image" class="object-cover w-full h-full" />
@@ -17,9 +17,9 @@
         </nuxt-link>
       </div>
     </div>
-  </div>
+  </card>
 
-  <div v-else ref="lazy-load-post-preview" :class="`post-preview-card ${getCardStyle}`">
+  <card v-else ref="lazy-load-post-preview" :class="`post-preview-card ${getCardStyle}`">
     <div :class="getImageContainerStyle" style="aspect-ratio: 1 / 1;">
       <div class="bg-gray-500 object-cover w-full h-full" />
     </div>
@@ -31,12 +31,17 @@
       <div class="bg-gray-400 w-48 h-3 mb-2"/>
       <div class="bg-gray-300 w-24 h-3" />
     </div>
-  </div>
+  </card>
 </template>
 
 <script>
+import Card from '@/components/cards/Card.vue';
+
 export default {
   name: 'post-preview',
+  components: {
+    Card,
+  },
   props: {
     post: {
       type: Object,
@@ -74,7 +79,7 @@ export default {
       };
     },
     getCardStyle() {
-      let style = `bg-card-light dark:bg-card-dark m-6 p-6 hover:rounded shadow-md dark:shadow-shadow-dark hover:shadow-none motion-safe:animate-fade-in transition ${this.classes}`;
+      let style = `${this.classes}`;
 
       if (!this.post)
         style += ' motion-safe:animate-pulse';
@@ -85,7 +90,7 @@ export default {
       if (this.fullWidth) {
         style += ' md:col-span-2 md:flex';
       }  else {
-        style += ' md:col-span-1';
+        style += ' md:col-span-1 md:flex-col';
       }
 
       return style;

src/components/structural/FooterBar.vue renamed to src/components/navigation/FooterBar.vue

@@ -1,7 +1,7 @@
 <template>
-  <div 
+  <card 
     v-if="tag" 
-    class="tag-preview-card bg-card-light dark:bg-card-dark m-6 p-6 hover:rounded shadow-md dark:shadow-shadow-dark hover:shadow-none motion-safe:animate-fade-in transition"
+    class="tag-preview-card"
   >
     <nuxt-link ref="title" :to="`/tags/${tag.slug}`" class="font-bold text-2xl hover:underline">
       {{tag.title}}
@@ -51,8 +51,8 @@
       <div v-else>
         <p class="text-md">There are not currently any posts for this tag</p>
       </div>
-  </div>
-  <div v-else ref="lazy-load-tag-preview" class="motion-safe:animate-pulse tag-preview-card bg-card-light dark:bg-card-dark m-6 p-6 hover:rounded shadow-md dark:shadow-shadow-dark hover:shadow-none motion-safe:animate-fade-in transition">
+  </card>
+  <card v-else ref="lazy-load-tag-preview" class="motion-safe:animate-pulse tag-preview-card">
     <div class="bg-gray-500 dark:bg-white w-32 h-4 transition" />
     <div class="bg-gray-400 w-64 h-2 my-2"/>
     <br>
@@ -64,17 +64,18 @@
       :is-reversed="index % 2 === 0"
       :classes="`shadow-none p-0 m-0 md:p-4 md:m-4`"
     />
-  </div>
+  </card>
 </template>
 
 <script>
-import Divider from '@/components/helpers/Divider.vue';
+import Card from '@/components/cards/Card.vue';
+import Divider from '@/components/misc/Divider.vue';
 import PostPreview from '@/components/previews/Post.vue';
-import ToolTip from '@/components/helpers/ToolTip.vue';
+import ToolTip from '@/components/misc/ToolTip.vue';
 
 export default {
   name: 'tag-preview',
-  components: { Divider, PostPreview, ToolTip },
+  components: { Card, Divider, PostPreview, ToolTip },
   props: {
     tag: {
       type: Object,

src/components/structural/NavBar.vue renamed to src/components/navigation/NavBar.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="max-w-screen-lg mx-auto">
-    <div >
-      <div id="introduction-card" class="bg-card-light dark:bg-card-dark m-6 p-4 flex flex-wrap md:flex-nowrap shadow-lg dark:shadow-shadow-dark hover:shadow-none hover:rounded motion-safe:animate-fade-in-fast transition">
-          <div class="max-w-sm md:w-2/5 lg:w-1/3 mx-auto md:my-auto">
-            <img :src="image" class="rounded-full motion-safe:animate-blur-fade-in-fast transition" alt="Headshot" />
-          </div>
-          <div class="w-full md:w-3/5 lg:w-2/3 m-4 xs:mb-12 md:mb-0">
-            <nuxt-content
-              :document="metadata"
-              class="prose prose-a:underline hover:prose-a:no-underline prose-a:text-primary-light dark:prose-invert dark:prose-a:text-primary-dark leading-normal prose-code:before:content-none prose-code:after:content-none transition" 
-            />
-          </div>
-        </div>
-    </div>
+    <card id="introduction-card" class="md:pt-3">
+      <div class="max-w-sm md:w-2/5 lg:w-1/3 mx-auto md:my-auto">
+        <img :src="image" class="rounded-full motion-safe:animate-blur-fade-in-fast transition" alt="Headshot" />
+      </div>
+      <div class="w-full md:w-3/5 lg:w-2/3 m-4 xs:mb-12 md:mb-0">
+        <nuxt-content
+          :document="metadata"
+          class="prose prose-a:underline hover:prose-a:no-underline prose-a:text-primary-light dark:prose-invert dark:prose-a:text-primary-dark leading-normal prose-code:before:content-none prose-code:after:content-none transition" 
+        />
+      </div>
+    </card>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 m-6 max-w-screen-lg flex-wrap md:flex-nowrap">
-      <basic-card
+      <content-card
         v-for="(item, i) in content"
         :key="item.title"
         :content="item"
@@ -26,12 +24,14 @@
 </template>
 
 <script>
-import BasicCard from '@/components/helpers/Card.vue';
+import Card from '@/components/cards/Card.vue';
+import ContentCard from '@/components/cards/ContentCard.vue';
 
 export default {
   name: 'home-view',
   components: {
-    BasicCard,
+    Card,
+    ContentCard,
   },
   props: {
     metadata: {

src/components/previews/Post.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="max-w-screen-lg mx-auto">
-    <div id="post-card" class="bg-card-light dark:bg-card-dark m-0 md:m-6 p-4 flex flex-wrap shadow-lg dark:shadow-shadow-dark hover:shadow-none hover:rounded motion-safe:animate-fade-in transition">
+    <card id="post-card" class="m-0 md:m-6 p-4 flex flex-wrap">
       <div class="w-full p-4">
         <div v-if="!isEditing">
           <p id="post-title" class="text-4xl md:text-5xl lg:text-6xl font-bold mb-2 !leading-tight">{{ content.title }}</p>
@@ -42,17 +42,19 @@
           @endEdit="isEditing = false" 
         />
       </div>
-    </div>
+    </card>
   </div>
 </template>
 
 <script>
-import Divider from '@/components/helpers/Divider.vue';
+import Card from '@/components/cards/Card.vue';
+import Divider from '@/components/misc/Divider.vue';
 
 export default {
   name: 'post-view',
   components: {
-    Divider
+    Card,
+    Divider,
   },
   props: {
     dir: {