Tweaks (#16)

* added number of projects * ui tweaks
angus-websites · Dec 23, 2023 · 5de7f5b · 5de7f5b
1 parent f07d82f
commit 5de7f5b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -7,8 +7,8 @@
     >
       <div>
         <span
-            class="text-sm text-evening-sea-900 sm:text-center dark:text-blade-200"
-        >© {{ new Date().getFullYear() }} Angus Goody
+            class="text-sm text-evening-sea-900 sm:text-center dark:text-nosferatu-200"
+        ><span>© {{ new Date().getFullYear() }}</span> Angus Goody
         </span>
       </div>
 

diff --git a/components/project/ProjectBreadcrumb.vue b/components/project/ProjectBreadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
-  <NuxtLink to="/projects" class="inline-flex items-center font-medium text-evening-sea-800 dark:text-aro-300 hover:underline">
-    <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0l4-4m-4 4l4 4"/>
+  <NuxtLink to="/projects" class="inline-flex rounded-lg items-center font-medium text-evening-sea-800 dark:text-aro-300 px-4 py-3 hover:bg-zinc-300/70 dark:hover:bg-nosferatu-800">
+    <svg class="fill-current w-4 h-4 mr-2 text-mulberry-700 dark:text-blade-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
     </svg>
-    Projects
+    <span>Projects</span>
   </NuxtLink>
 
 </template>
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
@@ -6,22 +6,32 @@
     <ErrorState v-if="error" class="text-center">
       Error fetching projects
     </ErrorState>
-    <ul
-      v-else-if="projects"
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-10 sm:gap-3 my-20"
-    >
-      <li v-if="projects.length > 0" v-for="project in projects" class="w-full">
-          <span class="sr-only">{{project.title}}</span>
-          <ProjectCard
-              class="mx-auto"
-              :key="project.id"
-              :project="project"
-               />
-      </li>
-      <li v-else class="text-center col-span-full">
-        <EmptyState>No projects to show.</EmptyState>
-      </li>
-    </ul>
+
+    <div v-else-if="projects" class="my-20">
+      <!-- Display number of projects -->
+      <div class="text-center my-8">
+        <p class="text-base text-lunar-600 dark:text-aro-400">
+          <span>{{projects.length}}</span> projects
+        </p>
+      </div>
+      <ul
+
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-10 sm:gap-3 "
+      >
+
+        <li v-if="projects.length > 0" v-for="project in projects" class="w-full">
+            <span class="sr-only">{{project.title}}</span>
+            <ProjectCard
+                class="mx-auto"
+                :key="project.id"
+                :project="project"
+                 />
+        </li>
+        <li v-else class="text-center col-span-full">
+          <EmptyState>No projects to show.</EmptyState>
+        </li>
+      </ul>
+    </div>
   </PageContainer>
 </template>
 <script lang="ts" setup>