more tailwind

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 > * {
+input {
-    color: var(--tertiary);
+    color: var(--primary);
-}
-
-a {
-    color: var(--tertiary);
-    text-align: center;
-    text-decoration: none;
-    padding: 0px;
-    margin: 0px;
 }
 
 small {
@@ -95,32 +93,27 @@ h1,
 h2,
 h3,
 h4 {
-    border-bottom: 1px solid var(--primary);
+    @apply m-1 border-primary border-b font-heading text-primary;
-    color: var(--primary);
-    font-family: var(--font_heading);
-    margin: var(--margin);
 }
 
 p {
-    color: var(--secondary);
+    @apply text-secondary;
-    margin: var(--margin);
 }
 
 button {
-    color: var(--secondary);
+    @apply text-primary bg-link text-center;
-    background-color: var(--bg_secondary);
+}
-    margin: var(--margin);
+
+a {
+    @apply text-primary bg-link text-center;
 }
 
 table {
-    border: 1px solid var(--primary);
+    @apply border-primary border text-primary;
-    border-collapse: collapse;
-    color: var(--secondary);
-    margin: var(--margin);
 }
 
 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 */

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">
+    <nav class="flex flex-row w-fit">
-        <RouterLink class="bdr-2 bg-bg_primary" to="/">
+        <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
-            <a class="text-3xl">HOME</a>
+            <a>HOME</a>
         </RouterLink>
         <RouterLink
             class="bdr-2 bg-bg_primary"

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">

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;
     }
 }