From 57a7f5e5453bbd2f2a64ce66a5196f82e11f09bc Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 4 Feb 2026 13:10:34 +0000
Subject: [PATCH] more tailwind

---
 nginx/vue/src/assets/styles.css          | 63 ++++++++++--------------
 nginx/vue/src/components/Navbar.vue      | 10 ++--
 nginx/vue/src/components/quick/Timer.vue |  2 +-
 nginx/vue/src/views/Home.vue             |  9 ++--
 4 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/nginx/vue/src/assets/styles.css b/nginx/vue/src/assets/styles.css
index 76b9b5c..0844f18 100644
--- a/nginx/vue/src/assets/styles.css
+++ b/nginx/vue/src/assets/styles.css
@@ -47,13 +47,15 @@
     /* BACKGROUND COLORS */
     --bg_primary: #011;
     --bg_secondary: #000;
+    --link: #222;
+
+    --bdr: 2px;
 
-    --margin: 3px;
     --spacing: 3px;
 
     /* FONTS USED */
     --font_heading: big_noodle_titling;
-    --font_text: CreatoDisplay;
+    --font_default: CreatoDisplay;
 }
 
 @theme {
@@ -64,6 +66,10 @@
 
     --color-bg_primary: var(--bg_primary);
     --color-bg_secondary: var(--bg_secondary);
+    --color-link: var(--link);
+
+    --font-heading: var(--font_heading);
+    --default-font-family: var(--font_default);
 }
 /* END OF VARIABLES */
 
@@ -75,16 +81,8 @@ body {
     font-family: var(--font_text);
 }
 
-a > * {
-    color: var(--tertiary);
-}
-
-a {
-    color: var(--tertiary);
-    text-align: center;
-    text-decoration: none;
-    padding: 0px;
-    margin: 0px;
+input {
+    color: var(--primary);
 }
 
 small {
@@ -95,32 +93,27 @@ h1,
 h2,
 h3,
 h4 {
-    border-bottom: 1px solid var(--primary);
-    color: var(--primary);
-    font-family: var(--font_heading);
-    margin: var(--margin);
+    @apply m-1 border-primary border-b font-heading text-primary;
 }
 
 p {
-    color: var(--secondary);
-    margin: var(--margin);
+    @apply text-secondary;
 }
 
 button {
-    color: var(--secondary);
-    background-color: var(--bg_secondary);
-    margin: var(--margin);
+    @apply text-primary bg-link text-center;
+}
+
+a {
+    @apply text-primary bg-link text-center;
 }
 
 table {
-    border: 1px solid var(--primary);
-    border-collapse: collapse;
-    color: var(--secondary);
-    margin: var(--margin);
+    @apply border-primary border text-primary;
 }
 
 tr {
-    border-bottom: 1px solid var(--primary);
+    @apply border-primary border-b text-primary;
 }
 
 /* END OF ELEMENTS */
@@ -134,51 +127,49 @@ tr {
 
 /* BORDERS */
 .bdr-1 {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/border1.gif") 30 round;
 }
 
 .bdr-1-inv {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/border1inv.gif") 30 round;
 }
 
 .bdr-2 {
-    border: 7px solid;
+    @apply border-5;
     border-image: url("/img/borders/border4.gif") 7 round;
 }
 
 .bdr-cv {
-    border: 30px solid;
+    @apply border-30;
     border-image: url("/img/borders/bordercv.png") 30 round;
 }
 
 /* A5 Page */
 .a5page-landscape {
-    font-family: var(--font_text);
+    @apply m-0;
     height: 148mm;
     width: 210mm;
-    margin: 0px;
 }
 
 .a5page-portrait {
-    font-family: var(--font_text);
+    @apply m-0;
     width: 148mm;
     height: 210mm;
-    margin: 0px;
 }
 
 /* A4 Page */
 .a4page-portrait {
+    @apply m-0;
     width: 210mm;
     height: 297mm;
-    margin: 0px;
 }
 
 .a4page-landscape {
+    @apply m-0;
     height: 210mm;
     width: 297mm;
-    margin: 0 auto;
 }
 
 /* END OF CLASSES */
diff --git a/nginx/vue/src/components/Navbar.vue b/nginx/vue/src/components/Navbar.vue
index d26e6fa..69f5ce5 100644
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -13,12 +13,16 @@ const parentPath = computed(() => {
         return segments.length ? "/" + segments.join("/") : null;
     }
 });
+
+const inHome = computed(() => {
+    return route.path == "/";
+});
 </script>
 
 <template>
-    <nav class="flex flex-col">
-        <RouterLink class="bdr-2 bg-bg_primary" to="/">
-            <a class="text-3xl">HOME</a>
+    <nav class="flex flex-row w-fit">
+        <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
+            <a>HOME</a>
         </RouterLink>
         <RouterLink
             class="bdr-2 bg-bg_primary"
diff --git a/nginx/vue/src/components/quick/Timer.vue b/nginx/vue/src/components/quick/Timer.vue
index b52e575..fb8418a 100644
--- a/nginx/vue/src/components/quick/Timer.vue
+++ b/nginx/vue/src/components/quick/Timer.vue
@@ -62,7 +62,7 @@ function playFinishedSound() {
 </script>
 
 <template>
-    <div class="flex flex-col">
+    <div class="flex flex-col gap-1 p-1">
         <h4 class="items-center">Timer</h4>
         <!-- Min input and Second input-->
         <div v-if="finished && paused" class="flex flex-row">
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index 177d0d8..f132df3 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -44,11 +44,13 @@ import Watching from "@/components/home/Watching.vue";
 
 <style scoped>
 .page > * {
-    border: 2px dotted var(--primary);
+    @apply border-2 border-dotted;
+    border-color: var(--primary);
     background-color: var(--bg_primary);
 }
 
 .sidebar > * {
+    @apply border-2;
     background-color: var(--bg_primary);
     border: 7px solid;
     border-image: url("/img/borders/border4.gif") 7 round;
@@ -62,12 +64,13 @@ import Watching from "@/components/home/Watching.vue";
 }
 
 @media (max-width: 850px) {
-    .grid {
+    .homeGrid {
         width: 100%;
         display: flex;
         flex-direction: column;
     }
-    .tr {
+    .tr,
+    .br {
         display: none;
     }
 }