Sub-pages are all in place, everything uses components now, so will b…

…e easier to maintain

src/components/layout/Header.vue

@@ -76,10 +76,10 @@ const mobileMenuOpen = ref(false);
     <nav class="max-w-screen-2xl w-full mx-auto flex flex-row items-center justify-between gap-6" aria-label="Global" >
       <div class="flex lg:flex-1">
         <a href="/" class="flex flex-row gap-2 justify-center items-center">
-          <!-- <span class="sr-only">Crisp Tools</span> -->
-          <img class="h-10 w-auto" src="/crisp-logo-white.svg" alt="Crisp Tools"
-          />
-          <!-- <span class="text-xl text-black">Crisp Tools</span> -->
+          <svg v-if="$route.path !== '/'" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3.53492 6.00001H17C17.5523 6.00001 18 6.44773 18 7.00001C18 7.5523 17.5523 8.00001 17 8.00001H3.53492L6.79246 11.2576C7.20251 11.6676 7.20251 12.3324 6.79246 12.7425C6.38241 13.1525 5.71759 13.1525 5.30754 12.7425L0.307538 7.74247C-0.102513 7.33242 -0.102513 6.6676 0.307538 6.25755L5.30754 1.25755C5.71759 0.8475 6.38241 0.8475 6.79246 1.25755C7.20251 1.6676 7.20251 2.33242 6.79246 2.74247L3.53492 6.00001Z" fill="black"/>
+          </svg>
+          <img class="h-10 w-auto" src="/crisp-logo-white.svg" alt="Crisp Tools"/>
         </a>
       </div>
       <div class="flex lg:hidden">

src/components/layout/LinksColorTools.vue

@@ -0,0 +1,17 @@
+<script setup>
+import SectionHeaderColorTools from '@/components/layout/SectionHeaderColorTools.vue';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-full">
+    <SectionHeaderColorTools />
+    <div class="p-4">
+      <p class="text-sm text-gray-600 pb-2">Tools for building palettes and colors</p>
+      <ul>
+        <li class="py-2 border-b"><router-link to="/color-tools/palette-generator" class="btn mt-4 text-lime-500">Color Palette Generator</router-link></li>
+        <li class="py-2 border-b"><router-link to="/color-tools/lighten-color" class="btn mt-4 text-lime-500">Lighten Color</router-link></li>
+        <li class="py-2 "><router-link to="/color-tools/darken-color" class="btn mt-4 text-lime-500">Darken Color</router-link></li>
+      </ul>
+    </div>
+  </div>
+</template>

src/components/layout/LinksCssTools.vue

@@ -0,0 +1,15 @@
+<script setup>
+import SectionHeaderCssTools from '@/components/layout/SectionHeaderCssTools.vue';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-full">
+    <SectionHeaderCssTools />
+    <div class="p-4">
+      <p class="text-sm text-gray-600 pb-2">Tools for working with cascading style sheets</p>
+      <ul>
+        <li class="py-2 border-b"><router-link to="/css-tools/static-type-scale" class="btn mt-4  text-slate-500">Static Type Scale</router-link></li>
+      </ul>
+    </div>
+  </div>
+</template>

src/components/layout/LinksTextTools.vue

@@ -0,0 +1,16 @@
+<script setup>
+import SectionHeaderTextTools from '@/components/layout/SectionHeaderTextTools.vue';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-full">
+    <SectionHeaderTextTools />
+    <div class="p-4">
+      <p class="text-sm text-gray-600 pb-2">Tools for working with text and typography</p>
+      <ul>
+        <li class="py-2 border-b"><router-link to="/text-tools/lipsum" class="btn mt-4  text-blue-500">Lorem Ipsum</router-link></li>
+        <li class="py-2"><router-link to="/text-tools/word-counter" class="btn mt-4  text-blue-500">Word Counter and Keywords Analysis</router-link></li>
+      </ul>
+    </div>
+  </div>
+</template>

src/components/layout/SectionHeaderColorTools.vue

@@ -6,6 +6,6 @@
       </svg>
       <h2 class="text-xl font-semibold text-lime-500 self-center">Color Tools</h2>
     </div>
-    <router-link to="/color-tools" class="flex flex-row justify-between px-4 btn bg-lime-500 rounded py-2 text-center text-white">View all</router-link>
+    <router-link v-if="$route.path !== '/color-tools'" to="/color-tools" class="flex flex-row justify-between px-4 btn bg-lime-500 rounded py-2 text-center text-white">View all</router-link>
   </div>
 </template>

src/components/layout/SectionHeaderCssTools.vue

@@ -6,6 +6,6 @@
       </svg>
       <h2 class="text-xl font-semibold text-slate-500 self-center">Css Tools</h2>
     </div>
-    <router-link to="/color-tools" class="flex flex-row justify-between px-4 btn bg-slate-500 rounded py-2 text-center text-white">View all</router-link>
+    <router-link v-if="$route.path !== '/css-tools'" to="/css-tools" class="flex flex-row justify-between px-4 btn bg-slate-500 rounded py-2 text-center text-white">View all</router-link>
   </div>
 </template>

src/components/layout/SectionHeaderTextTools.vue

@@ -6,6 +6,6 @@
       </svg>
       <h2 class="text-xl font-semibold text-blue-500 self-center">Text Tools</h2>
     </div>
-    <router-link to="/color-tools" class="flex flex-row justify-between px-4 btn bg-blue-500 rounded py-2 text-center text-white">View all</router-link>
+    <router-link v-if="$route.path !== '/text-tools'" to="/text-tools" class="flex flex-row justify-between px-4 btn bg-blue-500 rounded py-2 text-center text-white">View all</router-link>
   </div>
 </template>

src/views/ColorTools/ColorToolsView.vue

@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksColorTools from '@/components/layout/LinksColorTools.vue';
 </script>
 
 <template>
-  Color Tools
+  <LinksColorTools />
 </template>

src/views/CssTools/CssToolsView.vue

@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksCssTools from '@/components/layout/LinksCssTools.vue';
 </script>
 
 <template>
-  CSS Tools
+  <LinksCssTools />
 </template>

src/views/HomeView.vue

@@ -1,50 +1,19 @@
 <script setup>
-import SectionHeaderColorTools from '@/components/layout/SectionHeaderColorTools.vue';
-import SectionHeaderTextTools from '@/components/layout/SectionHeaderTextTools.vue';
-import SectionHeaderCssTools from '@/components/layout/SectionHeaderCssTools.vue';
+import LinksColorTools from '@/components/layout/LinksColorTools.vue';
+import LinksTextTools from '@/components/layout/LinksTextTools.vue';
+import LinksCssTools from '@/components/layout/LinksCssTools.vue';
 
 </script>
 
 <template>
   <main class="flex flex-start">
 
-    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full p-4 lg:p-6">
+    <section class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full p-0 lg:p-6">
 
-      <!-- Color Tools -->
-      <div class="flex flex-col gap-2 w-full">
-        <SectionHeaderColorTools />
-        <div class="p-2">
-          <p class="text-sm text-gray-600 pb-2">Tools for building palettes and colors</p>
-          <ul>
-            <li class="py-2 border-b"><router-link to="/color-tools/palette-generator" class="btn mt-4 text-lime-500">Color Palette Generator</router-link></li>
-            <li class="py-2 border-b"><router-link to="/color-tools/lighten-color" class="btn mt-4 text-lime-500">Lighten Color</router-link></li>
-            <li class="py-2 border-b"><router-link to="/color-tools/darken-color" class="btn mt-4 text-lime-500">Darken Color</router-link></li>
-          </ul>
-        </div>
-      </div>
+      <LinksColorTools />
+      <LinksCssTools />
+      <LinksTextTools />
 
-      <!-- Text Tools -->
-      <div class="flex flex-col gap-2 w-full">
-        <SectionHeaderTextTools />
-        <div class="p-2">
-          <p class="text-sm text-gray-600 pb-2">Tools for working with text and typography</p>
-          <ul>
-            <li class="py-2 border-b"><router-link to="/text-tools/lipsum" class="btn mt-4  text-blue-500">Lorem Ipsum</router-link></li>
-            <li class="py-2"><router-link to="/text-tools/word-counter" class="btn mt-4  text-blue-500">Word Counter and Keywords Analysis</router-link></li>
-          </ul>
-        </div>
-      </div>
-
-      <!-- Text Tools -->
-      <div class="flex flex-col gap-2 w-full">
-        <SectionHeaderCssTools />
-        <div class="p-2">
-          <p class="text-sm text-gray-600 pb-2">Tools for working with cascading style sheets</p>
-          <ul>
-            <li class="py-2 border-b"><router-link to="/css-tools/static-type-scale" class="btn mt-4  text-slate-500">Static Type Scale</router-link></li>
-          </ul>
-        </div>
-      </div>
     </section>
 
   </main>

src/views/TextTools/TextToolsView.vue

@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksTextTools from '@/components/layout/LinksTextTools.vue';
 </script>
 
 <template>
-  Typography Tools
+  <LinksTextTools />
 </template>