rename quick to util

nginx/vue/src/assets/styles.css

@@ -74,21 +74,19 @@
     --default-font-family: var(--font_default);
 }
 /* END OF VARIABLES */
-
 /* ELEMENTS */
 body {
     margin: 0 auto;
     width: 100vw;
     height: 100vh;
-    font-family: var(--font_text);
 }
 
 input {
-    color: var(--primary);
+    @apply text-secondary border-primary border;
 }
 
 small {
-    color: var(--tertiary);
+    @apply text-tertiary;
 }
 
 h1,
@@ -98,9 +96,15 @@ h4 {
     @apply m-1 font-heading text-primary;
 }
 
-h1,
+h3,
+h4 {
+    @apply text-base;
+}
 h2 {
-    @apply border-primary border-b;
+    @apply text-lg;
+}
+h1 {
+    @apply text-xl;
 }
 
 p {
@@ -108,11 +112,11 @@ p {
 }
 
 button {
-    @apply text-primary bg-link text-center;
+    @apply text-primary bg-link text-center border;
 }
 
 a {
-    @apply text-primary bg-link text-center font-heading;
+    @apply text-primary bg-link text-center font-heading text-xl tracking-wide;
 }
 
 table {

nginx/vue/src/components/home/Favorites.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const favs = [
     {
         type: "Daioh",

nginx/vue/src/components/home/Feed.vue

@@ -1,5 +1,6 @@
 <script setup>
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
+import Header from "@/components/text/Header.vue";
 
 import { ref, computed, onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
@@ -43,7 +44,7 @@ onMounted(() => {
     <div
         class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
     >
-        <h2>{{ post.title }}</h2>
+        <Header>{{ post.title }}</Header>
         <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
         <small

nginx/vue/src/components/home/Gym.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const gym = [
     { name: "Row", type: "30 min" },
     { name: "Run", type: "5k" },

nginx/vue/src/components/home/Intro.vue

@@ -1,32 +1,37 @@
+<script setup>
+import Header from "@/components/text/Header.vue";
+import Paragraph from "@/components/text/Paragraph.vue";
+</script>
+
 <template>
     <div
         class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
     >
-        <h2>Intro</h2>
+        <Header>Intro</Header>
-        <p>
+        <Paragraph>
             Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
             something graduate looking for work. I like to game, listen to lots
             of music and occasionally watch anime.
-        </p>
+        </Paragraph>
-        <h2>Getting around</h2>
+        <Header>Getting around</Header>
-        <p>
+        <Paragraph>
             Pages available can be traversed through links below. I am hoping to
             add some shrines, code-walkthoughs, live chat and page transitions
             at a later date.
-        </p>
+        </Paragraph>
-        <h2>Contact</h2>
+        <Header>Contact</Header>
-        <p>
+        <Paragraph>
             Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
             or contact me though any of the social medias linked.
-        </p>
+        </Paragraph>
-        <h2>A Quote</h2>
+        <Header>A Quote</Header>
         <!-- <p>
             What makes me a good demoman? If I were a bad demoman, I wouldn't be
             sittin' here discussin' it with you, now would I?!
         </p> -->
-        <p>
+        <Paragraph>
             One crossed wire, one wayward pinch of potassium chlorate, one
             errant twitch, and KA-BLOOIE!
-        </p>
+        </Paragraph>
     </div>
 </template>

nginx/vue/src/components/home/Links.vue

@@ -1,7 +1,7 @@
 <script setup>
-import RouterTable from "@/components/quick/RouterTable.vue";
+import RouterTable from "@/components/util/RouterTable.vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
 
 const site_links = [
     { name: "CV", link: "/cv" },

nginx/vue/src/components/home/Stamps.vue

@@ -1,27 +1,17 @@
 <template>
-    <div class="flex-col items-center">
+    <div class="grid grid-cols-4 overflow-scroll gap-0">
-        <div class="flex flex-col">
+        <a href="https://www.adam-french.co.uk">
-            <!-- <img src="/img/stamps/portal.gif" />
+            <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
-            <img src="/img/stamps/miku.gif" />
+        </a>
-            <img src="/img/stamps/utau.gif" /> -->
+        <a href="https://jacobbarron.xyz">
-            <div class="flex flex-row items-center">
+            <img
-                <p>--> make webring w me --></p>
+                src="https://jacobbarron.xyz/Banneh.gif"
-                <a href="https://www.adam-french.co.uk">
+                alt="jacobbarron.xyz"
-                    <img
+            />
-                        src="https://www.adam-french.co.uk/img/stamps/mine.gif"
+        </a>
-                    />
+        <img src="/img/stamps/portal.gif" />
-                </a>
+        <img src="/img/stamps/miku.gif" />
-            </div>
+        <img src="/img/stamps/utau.gif" />
-            <div class="flex flex-row items-center">
-                <p>--> hit up bro --></p>
-                <a href="https://jacobbarron.xyz">
-                    <img
-                        src="https://jacobbarron.xyz/Banneh.gif"
-                        alt="jacobbarron.xyz"
-                    />
-                </a>
-            </div>
-        </div>
     </div>
 </template>
 

nginx/vue/src/components/home/Watching.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 
 const data = [
     {

nginx/vue/src/components/text/Header.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="w-full border-b border-primary">
+        <h1>
+            <slot />
+        </h1>
+    </div>
+</template>

nginx/vue/src/components/text/Paragraph.vue

@@ -0,0 +1,5 @@
+<template>
+    <p class="p-1">
+        <slot />
+    </p>
+</template>

nginx/vue/src/components/util/ToggleLinkTable.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
 
 const props = defineProps({
     linkArr: {

nginx/vue/src/views/Bookmarks.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from "vue";
 
-import ToggleLinkTable from "@/components/quick/ToggleLinkTable.vue";
+import ToggleLinkTable from "@/components/util/ToggleLinkTable.vue";
 
 const links = [
     [

nginx/vue/src/views/Home.vue

@@ -1,8 +1,8 @@
 <script setup>
-import Timer from "@/components/quick/Timer.vue";
+import Timer from "@/components/util/Timer.vue";
-import Time from "@/components/quick/Time.vue";
+import Time from "@/components/util/Time.vue";
-import Chat from "@/components/quick/Chat.vue";
+import Chat from "@/components/util/Chat.vue";
-import MusicPlayer from "@/components/quick/MusicPlayer.vue";
+import MusicPlayer from "@/components/util/MusicPlayer.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";

nginx/vue/src/views/Notes.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
 import { ref, onMounted } from "vue";
 import axios from "axios";
 import { useRoute } from "vue-router";

nginx/vue/src/views/Shrines.vue

@@ -1,5 +1,5 @@
 <script setup>
-import RouterTable from "@/components/quick/RouterTable.vue";
+import RouterTable from "@/components/util/RouterTable.vue";
 const shrine_links = [
     { name: "Demoman", link: "/shrines/demoman" },
     { name: "Evangelion", link: "/shrines/evangelion" },

nginx/vue/src/views/shrines/Demoman.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VideoTable from "@/components/quick/VideoTable.vue";
+import VideoTable from "@/components/util/VideoTable.vue";
 
 const videoSources = [
     { name: "demoman", link: "/img/demoman/1760582395316219.webm" },

nginx/vue/src/views/shrines/Evangelion.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>

nginx/vue/src/views/shrines/GTO.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>

nginx/vue/src/views/shrines/Skipskipbenben.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>