From 193234dd4d4addc6139e51f15e3570559f2ee6c0 Mon Sep 17 00:00:00 2001
From: Rami James <ramijames@gmail.com>
Date: Sun, 14 Apr 2024 17:03:06 -0400
Subject: [PATCH] Sub-pages are all in place, everything uses components now,
 so will be easier to maintain

---
 public/crisp-logo-white.svg                   | 11 ++---
 src/components/layout/Header.vue              |  8 ++--
 src/components/layout/LinksColorTools.vue     | 17 +++++++
 src/components/layout/LinksCssTools.vue       | 15 +++++++
 src/components/layout/LinksTextTools.vue      | 16 +++++++
 .../layout/SectionHeaderColorTools.vue        |  2 +-
 .../layout/SectionHeaderCssTools.vue          |  2 +-
 .../layout/SectionHeaderTextTools.vue         |  2 +-
 src/views/ColorTools/ColorToolsView.vue       |  4 +-
 src/views/CssTools/CssToolsView.vue           |  4 +-
 src/views/HomeView.vue                        | 45 +++----------------
 src/views/TextTools/TextToolsView.vue         |  4 +-
 12 files changed, 71 insertions(+), 59 deletions(-)
 create mode 100644 src/components/layout/LinksColorTools.vue
 create mode 100644 src/components/layout/LinksCssTools.vue
 create mode 100644 src/components/layout/LinksTextTools.vue

diff --git a/public/crisp-logo-white.svg b/public/crisp-logo-white.svg
index f0cafcc..2479125 100644
--- a/public/crisp-logo-white.svg
+++ b/public/crisp-logo-white.svg
@@ -1,14 +1,9 @@
 <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_2)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M115.638 107.473C120.879 57.1503 110.234 25.4719 94.6103 13.5284C84.265 5.58898 74.7458 5.5758 69.5789 14.5846C63.33 3.40186 45.9727 -1.09251 40.5285 9.85899C29.4174 5.07453 7.44838 1.51219 2.1707 17.0819C-2.1565 29.9128 10.6748 40.6979 24.5844 46.1226C24.5844 46.1226 19.099 54.5861 23.1197 61.5319C27.9925 69.8594 42.1075 71.5395 42.1075 71.5395C40.7816 73.6838 39.7552 76.7646 39.5251 79.2732C38.5642 90.0087 50.4742 95.3052 61.6941 94.4702C75.4352 93.4908 99.0839 93.3664 111.454 111.194C111.454 111.194 111.454 111.194 111.455 111.194C108.582 93.8511 99.5006 78.2812 88.3523 65.516C80.1212 70.9799 68.4456 73.8663 67.9178 73.9953C66.6303 74.3144 65.3324 73.5251 65.0134 72.2376C64.6943 70.9501 65.4918 69.6364 66.7711 69.3332C66.7769 69.3313 66.8065 69.3236 66.8585 69.3099C67.9001 69.037 77.9242 66.4098 85.0642 61.8959C77.5952 53.975 69.4576 47.2737 61.7163 42.0602C56.1219 47.7 47.271 50.3978 46.871 50.5125C45.5906 50.8954 44.2601 50.1695 43.8772 48.8892C43.5019 47.6328 44.2202 46.2783 45.4923 45.9112C45.4974 45.9088 45.5309 45.8977 45.5904 45.8779C46.4753 45.584 53.1133 43.3795 57.5476 39.3701C51.3441 35.5308 45.5423 32.7409 40.7943 31.1359C39.5396 30.7299 38.8628 29.3582 39.2771 28.0877C39.699 26.8411 41.0706 26.1643 42.3253 26.5704C47.0099 28.1427 52.685 30.8673 58.7867 34.5538C58.6707 31.6662 58.1822 27.945 56.5981 25.143C55.9347 23.9788 56.3432 22.5249 57.5074 21.8615C58.6476 21.2057 60.1256 21.6066 60.7731 22.7626C63.5904 27.7243 63.7323 34.4136 63.5968 37.5946C71.2753 42.7356 79.3908 49.2851 86.9338 57.0235C87.3664 52.9548 87.5843 46.8902 86.1023 40.9722C85.7832 39.6847 86.5648 38.3628 87.8523 38.0438C89.1399 37.7247 90.4535 38.5222 90.7726 39.8097C93.052 48.9664 91.7678 58.1114 91.1274 61.5716C102.522 74.4033 112.016 90.0256 115.638 107.473Z" fill="url(#paint0_radial_1_2)"/>
+<g clip-path="url(#clip0_129_7)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.638 107.473C120.879 57.1503 110.234 25.4719 94.6103 13.5284C84.265 5.58898 74.7458 5.5758 69.5789 14.5846C63.33 3.40186 45.9727 -1.09251 40.5285 9.85899C29.4174 5.07453 7.44838 1.51219 2.1707 17.0819C-2.1565 29.9128 10.6748 40.6979 24.5844 46.1226C24.5844 46.1226 19.099 54.5861 23.1197 61.5319C27.9925 69.8594 42.1075 71.5395 42.1075 71.5395C40.7816 73.6838 39.7552 76.7646 39.5251 79.2732C38.5642 90.0087 50.4742 95.3052 61.6941 94.4702C75.4352 93.4908 99.0839 93.3664 111.454 111.194C111.454 111.194 111.454 111.194 111.455 111.194C108.582 93.8511 99.5006 78.2812 88.3523 65.516C80.1212 70.9799 68.4456 73.8663 67.9178 73.9953C66.6303 74.3144 65.3324 73.5251 65.0134 72.2376C64.6943 70.9501 65.4918 69.6364 66.7711 69.3332C66.7769 69.3313 66.8065 69.3236 66.8585 69.31C67.8997 69.037 77.924 66.4099 85.0642 61.8959C77.5952 53.975 69.4576 47.2737 61.7163 42.0602C56.1219 47.7 47.271 50.3978 46.871 50.5125C45.5906 50.8954 44.2601 50.1695 43.8772 48.8892C43.5019 47.6328 44.2202 46.2783 45.4923 45.9112C45.4974 45.9088 45.5309 45.8977 45.5904 45.8779C46.4754 45.584 53.1134 43.3795 57.5476 39.3701C51.3441 35.5308 45.5423 32.7409 40.7943 31.1359C39.5396 30.7299 38.8628 29.3582 39.2771 28.0877C39.699 26.8411 41.0706 26.1643 42.3253 26.5704C47.0099 28.1427 52.685 30.8673 58.7867 34.5538C58.6707 31.6662 58.1822 27.945 56.5981 25.143C55.9347 23.9788 56.3432 22.5249 57.5074 21.8615C58.6476 21.2057 60.1256 21.6066 60.7731 22.7626C63.5904 27.7243 63.7323 34.4136 63.5968 37.5946C71.2753 42.7356 79.3908 49.2851 86.9338 57.0235C87.3664 52.9548 87.5843 46.8902 86.1023 40.9722C85.7832 39.6847 86.5648 38.3628 87.8523 38.0438C89.1399 37.7247 90.4535 38.5222 90.7726 39.8097C93.052 48.9664 91.7678 58.1114 91.1274 61.5716C102.522 74.4033 112.016 90.0256 115.638 107.473Z" fill="black"/>
 </g>
 <defs>
-<radialGradient id="paint0_radial_1_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.30734 11.0587) rotate(43.2987) scale(136.98 220.658)">
-<stop offset="0.496617" stop-color="#96C64B"/>
-<stop offset="0.736539" stop-color="#96C64B"/>
-<stop offset="1" stop-color="#CBF983"/>
-</radialGradient>
-<clipPath id="clip0_1_2">
+<clipPath id="clip0_129_7">
 <rect width="120" height="120" fill="white"/>
 </clipPath>
 </defs>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 82090ef..895e389 100644
--- a/src/components/layout/Header.vue
+++ b/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">
diff --git a/src/components/layout/LinksColorTools.vue b/src/components/layout/LinksColorTools.vue
new file mode 100644
index 0000000..27840f1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/layout/LinksCssTools.vue b/src/components/layout/LinksCssTools.vue
new file mode 100644
index 0000000..4e38806
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/layout/LinksTextTools.vue b/src/components/layout/LinksTextTools.vue
new file mode 100644
index 0000000..6e0c153
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/layout/SectionHeaderColorTools.vue b/src/components/layout/SectionHeaderColorTools.vue
index c1928c4..552e418 100644
--- a/src/components/layout/SectionHeaderColorTools.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/layout/SectionHeaderCssTools.vue b/src/components/layout/SectionHeaderCssTools.vue
index f197939..b22d5de 100644
--- a/src/components/layout/SectionHeaderCssTools.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/layout/SectionHeaderTextTools.vue b/src/components/layout/SectionHeaderTextTools.vue
index 8cfd660..1e9533d 100644
--- a/src/components/layout/SectionHeaderTextTools.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/ColorTools/ColorToolsView.vue b/src/views/ColorTools/ColorToolsView.vue
index 440051f..c1ba763 100644
--- a/src/views/ColorTools/ColorToolsView.vue
+++ b/src/views/ColorTools/ColorToolsView.vue
@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksColorTools from '@/components/layout/LinksColorTools.vue';
 </script>
 
 <template>
-  Color Tools
+  <LinksColorTools />
 </template>
\ No newline at end of file
diff --git a/src/views/CssTools/CssToolsView.vue b/src/views/CssTools/CssToolsView.vue
index 3feea25..2a4e489 100644
--- a/src/views/CssTools/CssToolsView.vue
+++ b/src/views/CssTools/CssToolsView.vue
@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksCssTools from '@/components/layout/LinksCssTools.vue';
 </script>
 
 <template>
-  CSS Tools
+  <LinksCssTools />
 </template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 70da7ea..bc24f3c 100644
--- a/src/views/HomeView.vue
+++ b/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>
diff --git a/src/views/TextTools/TextToolsView.vue b/src/views/TextTools/TextToolsView.vue
index 9a6a2ca..d16b982 100644
--- a/src/views/TextTools/TextToolsView.vue
+++ b/src/views/TextTools/TextToolsView.vue
@@ -1,7 +1,7 @@
 <script setup>
-
+import LinksTextTools from '@/components/layout/LinksTextTools.vue';
 </script>
 
 <template>
-  Typography Tools
+  <LinksTextTools />
 </template>
\ No newline at end of file