adding tailwind css

2026-02-04 12:04:08 +00:00
parent 6469cb4ad7
commit 9167946ecc
41 changed files with 796 additions and 368 deletions
--- a/nginx/vue/index.html
+++ b/nginx/vue/index.html
@@ -5,7 +5,6 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>AF</title>
        <link rel="icon" type="/img/x-icon" href="/img/favicon.ico" />
-        <link rel="stylesheet" href="/css/styles.css" />
    </head>
    <body id="app">
        <script type="module" src="/src/main.js"></script>
--- a/nginx/vue/package-lock.json
+++ b/nginx/vue/package-lock.json
--- a/nginx/vue/package.json
+++ b/nginx/vue/package.json
@@ -13,11 +13,13 @@
  },
  "dependencies": {
    "@mdit/plugin-katex": "^0.24.1",
+    "@tailwindcss/vite": "^4.1.18",
    "axios": "^1.13.2",
    "katex": "^0.16.27",
    "markdown-it": "^14.1.0",
    "markdown-it-wikilinks": "^1.4.0",
    "pinia": "^3.0.4",
+    "tailwindcss": "^4.1.18",
    "vue": "^3.5.22",
    "vue-router": "^4.6.3"
  },
--- a/nginx/vue/public/img/stamps/mine2.gif
+++ b/nginx/vue/public/img/stamps/mine2.gif
--- a/nginx/vue/src/assets/styles.css
+++ b/nginx/vue/src/assets/styles.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* PRINTING */
@media print {
    .no-print,
@@ -37,26 +39,32 @@
    --portal_light_blue: #00a2ff;

    /* MAIN COLORS */
-    --primary: #5ea;
+    --primary: #5fb;
    --secondary: #5ea;
-    --tertiary: #fff;
-    --quaternary: #424542;
+    --tertiary: #2ea;
+    --quaternary: #400;

    /* BACKGROUND COLORS */
-    --bg-body: #000;
-    --bg_primary: #000;
-    --bg_secondary: #111;
-    --bg_tertiary: #222;
-    --bg_quaternary: #999;
+    --bg_primary: #011;
+    --bg_secondary: #000;

    --margin: 3px;
-    --padding: 3px;
-    --gap: 1px;
+    --spacing: 3px;

    /* FONTS USED */
    --font_heading: big_noodle_titling;
    --font_text: CreatoDisplay;
 }
+
+@theme {
+    --color-primary: var(--primary);
+    --color-secondary: var(--secondary);
+    --color-tertiary: var(--tertiary);
+    --color-quaternary: var(--quaternary);
+
+    --color-bg_primary: var(--bg_primary);
+    --color-bg_secondary: var(--bg_secondary);
+}
 /* END OF VARIABLES */

 /* ELEMENTS */
@@ -145,161 +153,6 @@ tr {
    border-image: url("/img/borders/bordercv.png") 30 round;
 }

-.bdr-primary {
-    border: 1px solid var(--primary);
-}
-
-.bdr-secondary {
-    border: 1px solid var(--secondary);
-}
-
-.bdr-tertiary {
-    border: 1px solid var(--tertiary);
-}
-
-.bdr-quaternary {
-    border: 1px solid var(--quaternary);
-}
-
-/* SHADOWS */
-
-.shadow-primary {
-    box-shadow: 0 20px 20px var(--primary);
-}
-
-.shadow-secondary {
-    box-shadow: 0 20px 20px var(--secondary);
-}
-
-.shadow-tertiary {
-    box-shadow: 0 20px 20px var(--tertiary);
-}
-
-.shadow-quaternary {
-    box-shadow: 0 20px 20px var(--quaternary);
-}
-
-/* BACKGROUNDS */
-
-.bg-white {
-    background: white;
-}
-
-.bg-primary {
-    background: var(--bg_primary);
-}
-
-.bg-secondary {
-    background: var(--bg_secondary);
-}
-
-.bg-tertiary {
-    background: var(--bg_tertiary);
-}
-
-.bg-quaternary {
-    background: var(--bg_quaternary);
-}
-
-/* SIZING */
-
-.fill {
-    flex: 1;
-    box-sizing: border-box;
-}
-
-.fill-width {
-    width: 100%;
-}
-
-.wrap {
-    text-wrap: break-word;
-}
-
-.margin {
-    margin: var(--margin);
-}
-
-.pad {
-    padding: var(--padding);
-}
-
-.gap {
-    gap: var(--gap);
-}
-
-/* ALIGNMENT */
-
-.relative {
-    position: relative;
-}
-
-.center-content {
-    align-items: center;
-}
-
-.center-text {
-    text-align: center;
-}
-
-.left-content {
-    text-align: left;
-    align-items: left;
-    justify-content: left;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0px;
-}
-
-.flex-center {
-    justify-content: center;
-}
-
-.scroll {
-    overflow: scroll;
-}
-
-.scroll-y {
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-.scroll-x {
-    overflow-y: hidden;
-    overflow-x: scroll;
-}
-
-.flex {
-    display: flex;
-    padding: 2px;
-}
-
-.flex-col {
-    display: flex;
-    flex-direction: column;
-    padding: 2px;
-}
-
-.inline {
-    display: inline;
-}
-
-.space-around {
-    justify-content: space-around;
-}
-
-.space-between {
-    justify-content: space-between;
-}
-
-.floating {
-    position: absolute;
-}
-
 /* A5 Page */
 .a5page-landscape {
    font-family: var(--font_text);
@@ -359,61 +212,22 @@ tr {
        box-sizing: border-box;
    }
 }
-/* END OF PHONE */
-
-/* BACKGROUND */
-.overlay {
-    position: fixed; /* not absolute */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.wfull {
-    width: 100%;
-}
-
-.hfill {
-    height: 100%;
-}
-
-.w-10vw {
-    width: 10vw;
-}

 .tl {
-    position: absolute;
-    top: 0px;
-    left: 0px;
+    @apply absolute top-0 left-0;
 }
-
 .tr {
-    position: absolute;
-    top: 0px;
-    right: 0px;
+    @apply absolute top-0 right-0;
 }
-
 .bl {
-    position: absolute;
-    left: 0px;
-    right: 0px;
+    @apply absolute bottom-0 left-0;
 }
-
 .br {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
+    @apply absolute bottom-0 right-0;
 }

 .background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    pointer-events: none;
+    @apply fixed inset-0 -z-10 pointer-events-none;
 }

 .halftone {
@@ -421,13 +235,11 @@ tr {
    --bg_size: 3px;
    --bg_pos: calc(var(--bg_size) / 2);
    --blur: 0%;
-    --dot_color: #033;
-    --bg_color: #000;

-    background-color: var(--bg_color);
+    background-color: var(--bg_secondary);
    background-image: radial-gradient(
        circle at center,
-        var(--dot_color) var(--dot_size),
+        var(--bg_primary) var(--dot_size),
        transparent var(--blur)
    );
    background-size: var(--bg_size) var(--bg_size);
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -16,11 +16,15 @@ const parentPath = computed(() => {
 </script>

 <template>
-    <nav class="left flex-col">
-        <RouterLink class="bdr-2 bg-primary" to="/">
-            <a>HOME</a>
+    <nav class="flex flex-col">
+        <RouterLink class="bdr-2 bg-bg_primary" to="/">
+            <a class="text-3xl">HOME</a>
        </RouterLink>
-        <RouterLink class="bdr-2 bg-primary" v-if="parentPath" :to="parentPath">
+        <RouterLink
+            class="bdr-2 bg-bg_primary"
+            v-if="parentPath"
+            :to="parentPath"
+        >
            <a>UP</a>
        </RouterLink>
    </nav>
--- a/nginx/vue/src/components/Radio.vue
+++ b/nginx/vue/src/components/Radio.vue
@@ -5,7 +5,7 @@
    </div>
    <div v-else>
        <img src="/img/tmpen31z3pe.PNG" />
-        <div class="margin1">
+        <div class="m-1">
            <p>Stream is offline. Tune in Fridays @ 6:00pm, Monday @ 8:00am</p>
            <button @click="checkStream()">Check Stream</button>
        </div>
--- a/nginx/vue/src/components/admin/CreatePost.vue
+++ b/nginx/vue/src/components/admin/CreatePost.vue
@@ -23,7 +23,7 @@ async function post() {
 </script>

 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
        <h1>Create Post</h1>
        <input type="text" v-model="title" placeholder="Title" />
        <textarea v-model="content" placeholder="Content"></textarea>
--- a/nginx/vue/src/components/admin/CreateUser.vue
+++ b/nginx/vue/src/components/admin/CreateUser.vue
@@ -12,13 +12,13 @@ function handleLogin() {
 </script>

 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
        <h1>Logged in</h1>
        <p>{{ auth.user.id }}</p>
        <p>{{ auth.user.username }}</p>
        <p>{{ auth.user.admin }}</p>
    </div>
-    <div v-else class="flex-col">
+    <div v-else class="flex flex-col">
        <h1>Create User</h1>
        <input type="text" v-model="username" placeholder="Username" />
        <input type="password" v-model="password" placeholder="Password" />
--- a/nginx/vue/src/components/admin/Login.vue
+++ b/nginx/vue/src/components/admin/Login.vue
@@ -16,14 +16,14 @@ function handleLogout() {
 </script>

 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
        <h1>Logged in</h1>
        <p>{{ auth.user.id }}</p>
        <p>{{ auth.user.username }}</p>
        <p>{{ auth.user.admin }}</p>
        <button @click="handleLogout">Log Out</button>
    </div>
-    <div v-else class="flex-col">
+    <div v-else class="flex flex-col">
        <h1>Login</h1>
        <input type="text" v-model="username" placeholder="Username" />
        <input type="password" v-model="password" placeholder="Password" />
--- a/nginx/vue/src/components/home/Collage.vue
+++ b/nginx/vue/src/components/home/Collage.vue
@@ -38,7 +38,7 @@ onUnmounted(() => {
 <template>
    <Transition name="fade" mode="out-in">
        <div
-            class="image-viewer center-text"
+            class="image-viewer text-center"
            @click="nextImage"
            :key="currentIndex"
        >
--- a/nginx/vue/src/components/home/Favorites.vue
+++ b/nginx/vue/src/components/home/Favorites.vue
@@ -61,9 +61,9 @@ const favs = [
 </script>

 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
        <h2>favs</h2>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
            <OptionalLinkTable class="scroll" :data="favs" />
        </div>
    </div>
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -40,16 +40,24 @@ onMounted(() => {
 </script>

 <template>
-    <div class="flex-col pad scroll-y left-content">
+    <div
+        class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
+    >
        <h2>{{ post.title }}</h2>
-        <Markdown class="fill wrap" :source="post.content" />
+        <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
        <p>by: {{ post.author.username }}</p>
        <small
            >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
        >
-        <div class="flex-row fill-width">
-            <button class="fill" v-if="!leftCap" @click="prevPost">Prev</button>
-            <button class="fill" v-if="!rightCap" @click="nextPost">
+        <div class="flex flex-row w-full">
+            <button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
+                Prev
+            </button>
+            <button
+                class="flex-1 border-box"
+                v-if="!rightCap"
+                @click="nextPost"
+            >
                Next
            </button>
        </div>
--- a/nginx/vue/src/components/home/Gym.vue
+++ b/nginx/vue/src/components/home/Gym.vue
@@ -8,10 +8,10 @@ const gym = [
 </script>

 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
        <h2>Gym</h2>
        <p>I'm not a gym geek but I have a consistent routine:</p>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
            <OptionalLinkTable :data="gym" />
        </div>
    </div>
--- a/nginx/vue/src/components/home/Intro.vue
+++ b/nginx/vue/src/components/home/Intro.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="fill flex-col pad left-content">
+    <div
+        class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
+    >
        <h2>Intro</h2>
        <p>
            Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
--- a/nginx/vue/src/components/home/Links.vue
+++ b/nginx/vue/src/components/home/Links.vue
@@ -19,11 +19,11 @@ const social_links = [
 </script>

 <template>
-    <div class="flex-col space-between">
-        <div class="flex-col gap">
+    <div class="flex flex-col justify-between">
+        <div class="flex flex-col gap-1">
            <RouterTable :linkArr="site_links" />
        </div>
-        <div class="flex-col gap">
+        <div class="flex flex-col gap-1">
            <LinkTable :linkArr="social_links" />
        </div>
    </div>
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -32,7 +32,7 @@ onUnmounted(() => {
        <div
            @click="nextSong"
            :key="song.track.id"
-            class="flex-col center-content center-text"
+            class="flex flex-col items-center text-center"
        >
            <h2>Listening To</h2>
            <img :src="song.track.album.images[0].url" />
--- a/nginx/vue/src/components/home/Stamps.vue
+++ b/nginx/vue/src/components/home/Stamps.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="flex-col center-content">
-        <div class="flex-col">
+    <div class="flex-col items-center">
+        <div class="flex flex-col">
            <!-- <img src="/img/stamps/portal.gif" />
            <img src="/img/stamps/miku.gif" />
            <img src="/img/stamps/utau.gif" /> -->
-            <div class="flex-row center-content">
+            <div class="flex flex-row items-center">
                <p>--> make webring w me --></p>
                <a href="https://www.adam-french.co.uk">
                    <img
@@ -12,7 +12,7 @@
                    />
                </a>
            </div>
-            <div class="flex-row center-content">
+            <div class="flex flex-row items-center">
                <p>--> hit up bro --></p>
                <a href="https://jacobbarron.xyz">
                    <img
--- a/nginx/vue/src/components/home/Watching.vue
+++ b/nginx/vue/src/components/home/Watching.vue
@@ -56,9 +56,9 @@ const data = [
 </script>

 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
        <h2>Consumption</h2>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
            <OptionalLinkTable :data="data" />
        </div>
    </div>
--- a/nginx/vue/src/components/quick/Chat.vue
+++ b/nginx/vue/src/components/quick/Chat.vue
@@ -14,12 +14,12 @@ onUnmounted(() => {

 <template>
    <div>
-        <div class="flex-col">
+        <div class="flex flex-col">
            <p v-for="message in messages" :key="message.id">
                {{ message.content }}
            </p>
        </div>
-        <div class="flex-row">
+        <div class="flex flex-row">
            <input v-model="messageInput" @keyup.enter="sendMessage" />
            <button @click="sendMessage">Send</button>
        </div>
--- a/nginx/vue/src/components/quick/LinkTable.vue
+++ b/nginx/vue/src/components/quick/LinkTable.vue
@@ -13,7 +13,7 @@ const keys = ["name", "link"];

 <template>
    <a
-        class="bdr-2 bg-secondary"
+        class="bdr-2 bg-bg_primary"
        v-for="(row, rowIndex) in linkArr"
        :key="rowIndex"
        :href="row.link"
--- a/nginx/vue/src/components/quick/Markdown.vue
+++ b/nginx/vue/src/components/quick/Markdown.vue
@@ -13,7 +13,7 @@ const props = defineProps({
 <template>
    <div
        v-html="mdIt.render(props.source)"
-        class="flex-col center-content"
+        class="flex flex-col items-center"
    ></div>
 </template>

--- a/nginx/vue/src/components/quick/MusicPlayer.vue
+++ b/nginx/vue/src/components/quick/MusicPlayer.vue
@@ -0,0 +1,92 @@
+<script setup>
+
+</script>
+
+<template>
+    <audio/>
+    <div class="musicPlayerGrid w-50">
+        <div class="album_cover">
+            <img src="/img/Untitled.png"></img>
+        </div>
+        <div class="controls">
+            <div class="sliders">
+                <div class="timeline"/>
+                <div class="volume"/>
+            </div>
+            <div class="buttons">
+                <div class="rewind"/>
+                <div class="playPause"/>
+                <div class="fastforward"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.musicPlayerGrid {
+    display: grid;
+    grid-gap: 5px;
+    grid-template-rows: repeat(4, 1fr);
+    background-color: blue;
+    align-items: stretch; /* rows (block axis) */
+    justify-items: stretch; /* columns (inline axis) */
+    padding: 5px;
+}
+img {
+    width: 100%;
+}
+
+.album_cover {
+    grid-row: 1 / span 3;
+    background-color: grey;
+    box-sizing: border-box;
+}
+
+.controls {
+    width: 100%;
+    grid-row: 4 / span 1;
+    box-sizing: border-box;
+
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-gap: 5px;
+}
+
+.sliders {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5px;
+}
+
+.timeline {
+    grid-column: 1;
+    background-color: white;
+}
+
+.volume {
+    grid-column: 2;
+    background-color: white;
+}
+
+.buttons {
+    background-color: black;
+    grid-row: 2 / -1;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 5px;
+}
+
+.rewind {
+    grid-column: 1;
+    background-color: grey;
+}
+.fastforward {
+    grid-column: 4;
+    background-color: grey;
+}
+.playPause {
+    grid-column: 2/span 2;
+    background-color: grey;
+}
+</style>
--- a/nginx/vue/src/components/quick/RouterTable.vue
+++ b/nginx/vue/src/components/quick/RouterTable.vue
@@ -13,7 +13,7 @@ const keys = ["name", "link"];

 <template>
    <RouterLink
-        class="bdr-2 bg-secondary"
+        class="bdr-2 bg-bg_primary"
        v-for="(row, rowIndex) in linkArr"
        :key="rowIndex"
        :to="row.link"
--- a/nginx/vue/src/components/quick/Time.vue
+++ b/nginx/vue/src/components/quick/Time.vue
@@ -23,7 +23,7 @@ setInterval(updateDateTime, 60000);
 </script>

 <template>
-    <div class="flex-col">
+    <div class="flex flex-col">
        <h4>{{ time }}</h4>
        <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
    </div>
--- a/nginx/vue/src/components/quick/Timer.vue
+++ b/nginx/vue/src/components/quick/Timer.vue
@@ -62,20 +62,20 @@ function playFinishedSound() {
 </script>

 <template>
-    <div class="flex-col">
-        <h4 class="center-content">Timer</h4>
+    <div class="flex flex-col">
+        <h4 class="items-center">Timer</h4>
        <!-- Min input and Second input-->
-        <div v-if="finished && paused" class="flex-row">
+        <div v-if="finished && paused" class="flex flex-row">
            <input v-model="minutesInput" type="number" min="0" max="59" />
            <input v-model="secondsInput" type="number" min="0" max="59" />
        </div>
-        <div v-if="finished && !paused" class="flex-col">
+        <div v-if="finished && !paused" class="flex flex-col">
            <h1>Timer finished!</h1>
        </div>
        <div v-if="!finished && paused">
            <h1>Paused</h1>
        </div>
-        <div v-if="!finished && !paused" class="flex-col">
+        <div v-if="!finished && !paused" class="flex flex-col">
            <h1>
                {{ minutes.toString().padStart(2, "0") }}:{{
                    seconds.toString().padStart(2, "0")
@@ -87,7 +87,7 @@ function playFinishedSound() {
                }}
            </h1>
        </div>
-        <div class="flex-col">
+        <div class="flex flex-col">
            <button v-if="paused" @click="startTimer">Proceed</button>
            <button v-if="!finished && !paused" @click="pauseTimer">
                Pause
--- a/nginx/vue/src/components/quick/ToggleLinkTable.vue
+++ b/nginx/vue/src/components/quick/ToggleLinkTable.vue
@@ -17,7 +17,7 @@ const show_links = ref(false);
 </script>

 <template>
-    <div class="flex-row">
+    <div class="flex flex-row">
        <h2>{{ title }}</h2>
        <button @click="show_links = !show_links">Toggle</button>
    </div>
--- a/nginx/vue/src/components/quick/Wip.vue
+++ b/nginx/vue/src/components/quick/Wip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
+    <div class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll">
        <RouterLink to="/" class="bdr-2">
            <img src="/img/memes/epic.jpeg" />
        </RouterLink>
--- a/nginx/vue/src/main.js
+++ b/nginx/vue/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
+import "./assets/styles.css";

 const app = createApp(App);

--- a/nginx/vue/src/views/404.vue
+++ b/nginx/vue/src/views/404.vue
@@ -1,7 +1,7 @@
 <template>
-    <main class="flex-col center-content">
+    <main class="flex flex-col items-center">
        <div
-            class="a4page-portrait center-content bdr-1 flex-col relative scroll-y"
+            class="a4page-portrait items-center bdr-1 flex flex-col relative overflow-scroll"
        >
            <h1>404</h1>
            <RouterLink to="/" class="bdr-2">
--- a/nginx/vue/src/views/Admin.vue
+++ b/nginx/vue/src/views/Admin.vue
@@ -5,14 +5,14 @@ import CreatePost from "@/components/admin/CreatePost.vue";
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div class="background halftone" />
-        <div class="a5page-portrait bdr-1 flex-col">
-            <Login class="bdr-2 bg-secondary" />
+        <div class="a5page-portrait bdr-1 flex flex-col">
+            <Login class="bdr-2 bg-bg_primary" />
            <!--
-            <CreateUser class="bdr-2 bg-secondary" />
+            <CreateUser class="bdr-2 bg-bg_primary" />
            -->
-            <CreatePost class="bdr-2 bg-secondary" />
+            <CreatePost class="bdr-2 bg-bg_primary" />
        </div>
    </main>
 </template>
--- a/nginx/vue/src/views/Bookmarks.vue
+++ b/nginx/vue/src/views/Bookmarks.vue
@@ -240,9 +240,11 @@ const links = [
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div class="background halftone" />
-        <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
+        <div
+            class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll gap-1"
+        >
            <ToggleLinkTable
                v-for="link in links"
                :title="link[0]"
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -2,6 +2,7 @@
 import Timer from "@/components/quick/Timer.vue";
 import Time from "@/components/quick/Time.vue";
 import Chat from "@/components/quick/Chat.vue";
+import MusicPlayer from "@/components/quick/MusicPlayer.vue";

 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
@@ -15,18 +16,19 @@ import Watching from "@/components/home/Watching.vue";
 </script>

 <template>
-    <div class="overlay">
-        <img src="/img/memes/fire-woman.gif" class="br w-10vw" />
-        <div class="flex-col tr">
-            <Time class="bdr-2 bg-primary" />
-            <Timer class="bdr-2 bg-primary" />
-            <!-- <Chat class="bdr-2 bg-primary" /> -->
+    <div class="background halftone">
+        <img src="/img/memes/fire-woman.gif" class="br w-80" />
+        <div class="flex flex-col tr sidebar">
+            <Time />
+            <Timer />
+            <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
+            <MusicPlayer />
        </div>
    </div>
-    <div class="background halftone" />
+    <div class="-z-10 halftone" />

-    <main class="center-content flex-col">
-        <div class="page a4page-portrait bdr-1 grid relative">
+    <main class="items-center flex flex-col">
+        <div class="page a4page-portrait bdr-1 homeGrid relative">
            <Intro class="intro" />
            <Listening class="listening" />
            <Stamps class="stamps" />
@@ -46,7 +48,13 @@ import Watching from "@/components/home/Watching.vue";
    background-color: var(--bg_primary);
 }

-.grid {
+.sidebar > * {
+    background-color: var(--bg_primary);
+    border: 7px solid;
+    border-image: url("/img/borders/border4.gif") 7 round;
+}
+
+.homeGrid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(10, 1fr);
--- a/nginx/vue/src/views/Notes.vue
+++ b/nginx/vue/src/views/Notes.vue
@@ -59,15 +59,15 @@ onMounted(fetchFile);
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div class="background halftone" />
        <div
            v-if="file"
-            class="a4page-portrait bdr-primary flex-col relative scroll-y gap bg-primary"
+            class="a4page-portrait border-primary-1 flex flex-col relative overflow-scroll gap-1 bg-bg_primary"
        >
            <h1>{{ filename }}</h1>
            <small>{{ last_edited }}</small>
-            <Markdown class="fill wrap" :source="file" />
+            <Markdown class="flex-1 border-box text-wrap" :source="file" />
        </div>

        <div v-else>Loading…</div>
--- a/nginx/vue/src/views/Shrines.vue
+++ b/nginx/vue/src/views/Shrines.vue
@@ -9,9 +9,11 @@ const shrine_links = [
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div class="background halftone" />
-        <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
+        <div
+            class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll gap-1"
+        >
            <RouterTable :linkArr="shrine_links" />
        </div>
    </main>
--- a/nginx/vue/src/views/shrines/Demoman.vue
+++ b/nginx/vue/src/views/shrines/Demoman.vue
@@ -11,9 +11,9 @@ const videoSources = [
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div
-            class="a4page-portrait bdr-1 flex-row relative scroll-y center-content"
+            class="a4page-portrait bdr-1 flex flex-row relative overflow-scroll items-center"
        >
            <p>
                <a href="https://wiki.teamfortress.com/wiki/Demoman"
--- a/nginx/vue/src/views/shrines/Evangelion.vue
+++ b/nginx/vue/src/views/shrines/Evangelion.vue
@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div
-            class="a4page-portrait center-content bdr-1 flex-col relative scroll-y"
+            class="a4page-portrait items-center bdr-1 flex flex-col relative overflow-scroll"
        >
            <Wip />
        </div>
--- a/nginx/vue/src/views/shrines/GTO.vue
+++ b/nginx/vue/src/views/shrines/GTO.vue
@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div
-            class="a4page-portrait center-content bdr-1 flex-col relative scroll-y"
+            class="a4page-portrait items-center bdr-1 flex flex-col relative overflow-scroll"
        >
            <Wip />
        </div>
--- a/nginx/vue/src/views/shrines/Skipskipbenben.vue
+++ b/nginx/vue/src/views/shrines/Skipskipbenben.vue
@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
 </script>

 <template>
-    <main class="center-content flex-col">
+    <main class="items-center flex flex-col">
        <div
-            class="a4page-portrait center-content bdr-1 flex-col relative scroll-y"
+            class="a4page-portrait items-center bdr-1 flex flex-col relative overflow-scroll"
        >
            <Wip />
        </div>
--- a/nginx/vue/src/views/unused/CoverLetters.vue
+++ b/nginx/vue/src/views/unused/CoverLetters.vue
@@ -15,10 +15,7 @@
            </tbody>
        </table>

-        <div
-            class="no-print"
-            style="width: 100%; text-align: center; margin: 20px 0"
-        ></div>
+        <div class="no-print m-1 w-full text-center"></div>
        <div id="LloydsBank" class="a5page">
            <div class="contact">
                <h1>Adam French</h1>
--- a/nginx/vue/vite.config.js
+++ b/nginx/vue/vite.config.js
@@ -1,18 +1,16 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";

-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import vue from "@vitejs/plugin-vue";
+import vueDevTools from "vite-plugin-vue-devtools";

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
+  plugins: [vue(), vueDevTools(), tailwindcss()],
  resolve: {
    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
-})
+});