adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

adding tailwind css

Browse Source
This commit is contained in:
Adam French
2026-02-04 12:04:08 +00:00
parent 6469cb4ad7
commit 9167946ecc
41 changed files with 796 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nginx/vue/index.html
View File

@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AF</title> <title>AF</title>
<link rel="icon" type="/img/x-icon" href="/img/favicon.ico" /> <link rel="icon" type="/img/x-icon" href="/img/favicon.ico" />
<link rel="stylesheet" href="/css/styles.css" />
</head> </head>
<body id="app"> <body id="app">
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>

627
nginx/vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
nginx/vue/package.json
View File

@@ -13,11 +13,13 @@
}, },
"dependencies": { "dependencies": {
"@mdit/plugin-katex": "^0.24.1", "@mdit/plugin-katex": "^0.24.1",
"@tailwindcss/vite": "^4.1.18",
"axios": "^1.13.2", "axios": "^1.13.2",
"katex": "^0.16.27", "katex": "^0.16.27",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"markdown-it-wikilinks": "^1.4.0", "markdown-it-wikilinks": "^1.4.0",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"tailwindcss": "^4.1.18",
"vue": "^3.5.22", "vue": "^3.5.22",
"vue-router": "^4.6.3" "vue-router": "^4.6.3"
}, },

BIN
nginx/vue/public/img/stamps/mine2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

238
nginx/vue/public/css/styles.css → nginx/vue/src/assets/styles.css
View File

@@ -1,3 +1,5 @@
@import "tailwindcss";
/* PRINTING */ /* PRINTING */
@media print { @media print {
.no-print, .no-print,
@@ -37,26 +39,32 @@
--portal_light_blue: #00a2ff; --portal_light_blue: #00a2ff;
/* MAIN COLORS */ /* MAIN COLORS */
--primary: #5ea; --primary: #5fb;
--secondary: #5ea; --secondary: #5ea;
--tertiary: #fff; --tertiary: #2ea;
--quaternary: #424542; --quaternary: #400;
/* BACKGROUND COLORS */ /* BACKGROUND COLORS */
--bg-body: #000; --bg_primary: #011;
--bg_primary: #000; --bg_secondary: #000;
--bg_secondary: #111;
--bg_tertiary: #222;
--bg_quaternary: #999;
--margin: 3px; --margin: 3px;
--padding: 3px; --spacing: 3px;
--gap: 1px;
/* FONTS USED */ /* FONTS USED */
--font_heading: big_noodle_titling; --font_heading: big_noodle_titling;
--font_text: CreatoDisplay; --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 */ /* END OF VARIABLES */
/* ELEMENTS */ /* ELEMENTS */
@@ -145,161 +153,6 @@ tr {
border-image: url("/img/borders/bordercv.png") 30 round; 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 */ /* A5 Page */
.a5page-landscape { .a5page-landscape {
font-family: var(--font_text); font-family: var(--font_text);
@@ -359,61 +212,22 @@ tr {
box-sizing: border-box; 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 { .tl {
position: absolute; @apply absolute top-0 left-0;
top: 0px;
left: 0px;
} }
.tr { .tr {
position: absolute; @apply absolute top-0 right-0;
top: 0px;
right: 0px;
} }
.bl { .bl {
position: absolute; @apply absolute bottom-0 left-0;
left: 0px;
right: 0px;
} }
.br { .br {
position: absolute; @apply absolute bottom-0 right-0;
bottom: 0px;
right: 0px;
} }
.background { .background {
position: fixed; @apply fixed inset-0 -z-10 pointer-events-none;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
} }
.halftone { .halftone {
@@ -421,13 +235,11 @@ tr {
--bg_size: 3px; --bg_size: 3px;
--bg_pos: calc(var(--bg_size) / 2); --bg_pos: calc(var(--bg_size) / 2);
--blur: 0%; --blur: 0%;
--dot_color: #033;
--bg_color: #000;
background-color: var(--bg_color); background-color: var(--bg_secondary);
background-image: radial-gradient( background-image: radial-gradient(
circle at center, circle at center,
var(--dot_color) var(--dot_size), var(--bg_primary) var(--dot_size),
transparent var(--blur) transparent var(--blur)
); );
background-size: var(--bg_size) var(--bg_size); background-size: var(--bg_size) var(--bg_size);

12
nginx/vue/src/components/Navbar.vue
View File

@@ -16,11 +16,15 @@ const parentPath = computed(() => {
</script> </script>
<template> <template>
<nav class="left flex-col"> <nav class="flex flex-col">
<RouterLink class="bdr-2 bg-primary" to="/"> <RouterLink class="bdr-2 bg-bg_primary" to="/">
<a>HOME</a> <a class="text-3xl">HOME</a>
</RouterLink> </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> <a>UP</a>
</RouterLink> </RouterLink>
</nav> </nav>

2
nginx/vue/src/components/Radio.vue
View File

@@ -5,7 +5,7 @@
</div> </div>
<div v-else> <div v-else>
<img src="/img/tmpen31z3pe.PNG" /> <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> <p>Stream is offline. Tune in Fridays @ 6:00pm, Monday @ 8:00am</p>
<button @click="checkStream()">Check Stream</button> <button @click="checkStream()">Check Stream</button>
</div> </div>

2
nginx/vue/src/components/admin/CreatePost.vue
View File

@@ -23,7 +23,7 @@ async function post() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn" class="flex-col"> <div v-if="auth.loggedIn" class="flex flex-col">
<h1>Create Post</h1> <h1>Create Post</h1>
<input type="text" v-model="title" placeholder="Title" /> <input type="text" v-model="title" placeholder="Title" />
<textarea v-model="content" placeholder="Content"></textarea> <textarea v-model="content" placeholder="Content"></textarea>

4
nginx/vue/src/components/admin/CreateUser.vue
View File

@@ -12,13 +12,13 @@ function handleLogin() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn" class="flex-col"> <div v-if="auth.loggedIn" class="flex flex-col">
<h1>Logged in</h1> <h1>Logged in</h1>
<p>{{ auth.user.id }}</p> <p>{{ auth.user.id }}</p>
<p>{{ auth.user.username }}</p> <p>{{ auth.user.username }}</p>
<p>{{ auth.user.admin }}</p> <p>{{ auth.user.admin }}</p>
</div> </div>
<div v-else class="flex-col"> <div v-else class="flex flex-col">
<h1>Create User</h1> <h1>Create User</h1>
<input type="text" v-model="username" placeholder="Username" /> <input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" /> <input type="password" v-model="password" placeholder="Password" />

4
nginx/vue/src/components/admin/Login.vue
View File

@@ -16,14 +16,14 @@ function handleLogout() {
</script> </script>
<template> <template>
<div v-if="auth.loggedIn" class="flex-col"> <div v-if="auth.loggedIn" class="flex flex-col">
<h1>Logged in</h1> <h1>Logged in</h1>
<p>{{ auth.user.id }}</p> <p>{{ auth.user.id }}</p>
<p>{{ auth.user.username }}</p> <p>{{ auth.user.username }}</p>
<p>{{ auth.user.admin }}</p> <p>{{ auth.user.admin }}</p>
<button @click="handleLogout">Log Out</button> <button @click="handleLogout">Log Out</button>
</div> </div>
<div v-else class="flex-col"> <div v-else class="flex flex-col">
<h1>Login</h1> <h1>Login</h1>
<input type="text" v-model="username" placeholder="Username" /> <input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" /> <input type="password" v-model="password" placeholder="Password" />

2
nginx/vue/src/components/home/Collage.vue
View File

@@ -38,7 +38,7 @@ onUnmounted(() => {
<template> <template>
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<div <div
class="image-viewer center-text" class="image-viewer text-center"
@click="nextImage" @click="nextImage"
:key="currentIndex" :key="currentIndex"
> >

4
nginx/vue/src/components/home/Favorites.vue
View File

@@ -61,9 +61,9 @@ const favs = [
</script> </script>
<template> <template>
<div class="flex-col center-content"> <div class="flex flex-col items-center">
<h2>favs</h2> <h2>favs</h2>
<div class="scroll fill"> <div class="overflow-scroll flex-1 border-box">
<OptionalLinkTable class="scroll" :data="favs" /> <OptionalLinkTable class="scroll" :data="favs" />
</div> </div>
</div> </div>

18
nginx/vue/src/components/home/Feed.vue
View File

@@ -40,16 +40,24 @@ onMounted(() => {
</script> </script>
<template> <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> <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> <p>by: {{ post.author.username }}</p>
<small <small
>Created at: {{ new Date(post.createdAt).toLocaleString() }}</small >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
> >
<div class="flex-row fill-width"> <div class="flex flex-row w-full">
<button class="fill" v-if="!leftCap" @click="prevPost">Prev</button> <button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
<button class="fill" v-if="!rightCap" @click="nextPost"> Prev
</button>
<button
class="flex-1 border-box"
v-if="!rightCap"
@click="nextPost"
>
Next Next
</button> </button>
</div> </div>

4
nginx/vue/src/components/home/Gym.vue
View File

@@ -8,10 +8,10 @@ const gym = [
</script> </script>
<template> <template>
<div class="flex-col center-content"> <div class="flex flex-col items-center">
<h2>Gym</h2> <h2>Gym</h2>
<p>I'm not a gym geek but I have a consistent routine:</p> <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" /> <OptionalLinkTable :data="gym" />
</div> </div>
</div> </div>

4
nginx/vue/src/components/home/Intro.vue
View File

@@ -1,5 +1,7 @@
<template> <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> <h2>Intro</h2>
<p> <p>
Hi, I'm Adam, thank you for visiting my website. I'm currently a 20 Hi, I'm Adam, thank you for visiting my website. I'm currently a 20

6
nginx/vue/src/components/home/Links.vue
View File

@@ -19,11 +19,11 @@ const social_links = [
</script> </script>
<template> <template>
<div class="flex-col space-between"> <div class="flex flex-col justify-between">
<div class="flex-col gap"> <div class="flex flex-col gap-1">
<RouterTable :linkArr="site_links" /> <RouterTable :linkArr="site_links" />
</div> </div>
<div class="flex-col gap"> <div class="flex flex-col gap-1">
<LinkTable :linkArr="social_links" /> <LinkTable :linkArr="social_links" />
</div> </div>
</div> </div>

2
nginx/vue/src/components/home/Listening.vue
View File

@@ -32,7 +32,7 @@ onUnmounted(() => {
<div <div
@click="nextSong" @click="nextSong"
:key="song.track.id" :key="song.track.id"
class="flex-col center-content center-text" class="flex flex-col items-center text-center"
> >
<h2>Listening To</h2> <h2>Listening To</h2>
<img :src="song.track.album.images[0].url" /> <img :src="song.track.album.images[0].url" />

8
nginx/vue/src/components/home/Stamps.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="flex-col center-content"> <div class="flex-col items-center">
<div class="flex-col"> <div class="flex flex-col">
<!-- <img src="/img/stamps/portal.gif" /> <!-- <img src="/img/stamps/portal.gif" />
<img src="/img/stamps/miku.gif" /> <img src="/img/stamps/miku.gif" />
<img src="/img/stamps/utau.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> <p>--> make webring w me --></p>
<a href="https://www.adam-french.co.uk"> <a href="https://www.adam-french.co.uk">
<img <img
@@ -12,7 +12,7 @@
/> />
</a> </a>
</div> </div>
<div class="flex-row center-content"> <div class="flex flex-row items-center">
<p>--> hit up bro --></p> <p>--> hit up bro --></p>
<a href="https://jacobbarron.xyz"> <a href="https://jacobbarron.xyz">
<img <img

4
nginx/vue/src/components/home/Watching.vue
View File

@@ -56,9 +56,9 @@ const data = [
</script> </script>
<template> <template>
<div class="flex-col center-content"> <div class="flex flex-col items-center">
<h2>Consumption</h2> <h2>Consumption</h2>
<div class="scroll fill"> <div class="overflow-scroll flex-1 border-box">
<OptionalLinkTable :data="data" /> <OptionalLinkTable :data="data" />
</div> </div>
</div> </div>

4
nginx/vue/src/components/quick/Chat.vue
View File

@@ -14,12 +14,12 @@ onUnmounted(() => {
<template> <template>
<div> <div>
<div class="flex-col"> <div class="flex flex-col">
<p v-for="message in messages" :key="message.id"> <p v-for="message in messages" :key="message.id">
{{ message.content }} {{ message.content }}
</p> </p>
</div> </div>
<div class="flex-row"> <div class="flex flex-row">
<input v-model="messageInput" @keyup.enter="sendMessage" /> <input v-model="messageInput" @keyup.enter="sendMessage" />
<button @click="sendMessage">Send</button> <button @click="sendMessage">Send</button>
</div> </div>

2
nginx/vue/src/components/quick/LinkTable.vue
View File

@@ -13,7 +13,7 @@ const keys = ["name", "link"];
<template> <template>
<a <a
class="bdr-2 bg-secondary" class="bdr-2 bg-bg_primary"
v-for="(row, rowIndex) in linkArr" v-for="(row, rowIndex) in linkArr"
:key="rowIndex" :key="rowIndex"
:href="row.link" :href="row.link"

2
nginx/vue/src/components/quick/Markdown.vue
View File

@@ -13,7 +13,7 @@ const props = defineProps({
<template> <template>
<div <div
v-html="mdIt.render(props.source)" v-html="mdIt.render(props.source)"
class="flex-col center-content" class="flex flex-col items-center"
></div> ></div>
</template> </template>

92
nginx/vue/src/components/quick/MusicPlayer.vue Normal file
View File

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

2
nginx/vue/src/components/quick/RouterTable.vue
View File

@@ -13,7 +13,7 @@ const keys = ["name", "link"];
<template> <template>
<RouterLink <RouterLink
class="bdr-2 bg-secondary" class="bdr-2 bg-bg_primary"
v-for="(row, rowIndex) in linkArr" v-for="(row, rowIndex) in linkArr"
:key="rowIndex" :key="rowIndex"
:to="row.link" :to="row.link"

2
nginx/vue/src/components/quick/Time.vue
View File

@@ -23,7 +23,7 @@ setInterval(updateDateTime, 60000);
</script> </script>
<template> <template>
<div class="flex-col"> <div class="flex flex-col">
<h4>{{ time }}</h4> <h4>{{ time }}</h4>
<h4>{{ weekday }} {{ day }}, {{ month }}</h4> <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
</div> </div>

12
nginx/vue/src/components/quick/Timer.vue
View File

@@ -62,20 +62,20 @@ function playFinishedSound() {
</script> </script>
<template> <template>
<div class="flex-col"> <div class="flex flex-col">
<h4 class="center-content">Timer</h4> <h4 class="items-center">Timer</h4>
<!-- Min input and Second input--> <!-- 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="minutesInput" type="number" min="0" max="59" />
<input v-model="secondsInput" type="number" min="0" max="59" /> <input v-model="secondsInput" type="number" min="0" max="59" />
</div> </div>
<div v-if="finished && !paused" class="flex-col"> <div v-if="finished && !paused" class="flex flex-col">
<h1>Timer finished!</h1> <h1>Timer finished!</h1>
</div> </div>
<div v-if="!finished && paused"> <div v-if="!finished && paused">
<h1>Paused</h1> <h1>Paused</h1>
</div> </div>
<div v-if="!finished && !paused" class="flex-col"> <div v-if="!finished && !paused" class="flex flex-col">
<h1> <h1>
{{ minutes.toString().padStart(2, "0") }}:{{ {{ minutes.toString().padStart(2, "0") }}:{{
seconds.toString().padStart(2, "0") seconds.toString().padStart(2, "0")
@@ -87,7 +87,7 @@ function playFinishedSound() {
}} }}
</h1> </h1>
</div> </div>
<div class="flex-col"> <div class="flex flex-col">
<button v-if="paused" @click="startTimer">Proceed</button> <button v-if="paused" @click="startTimer">Proceed</button>
<button v-if="!finished && !paused" @click="pauseTimer"> <button v-if="!finished && !paused" @click="pauseTimer">
Pause Pause

2
nginx/vue/src/components/quick/ToggleLinkTable.vue
View File

@@ -17,7 +17,7 @@ const show_links = ref(false);
</script> </script>
<template> <template>
<div class="flex-row"> <div class="flex flex-row">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
<button @click="show_links = !show_links">Toggle</button> <button @click="show_links = !show_links">Toggle</button>
</div> </div>

2
nginx/vue/src/components/quick/Wip.vue
View File

@@ -1,5 +1,5 @@
<template> <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"> <RouterLink to="/" class="bdr-2">
<img src="/img/memes/epic.jpeg" /> <img src="/img/memes/epic.jpeg" />
</RouterLink> </RouterLink>

1
nginx/vue/src/main.js
View File

@@ -2,6 +2,7 @@ import { createApp } from "vue";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import "./assets/styles.css";
const app = createApp(App); const app = createApp(App);

4
nginx/vue/src/views/404.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<main class="flex-col center-content"> <main class="flex flex-col items-center">
<div <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> <h1>404</h1>
<RouterLink to="/" class="bdr-2"> <RouterLink to="/" class="bdr-2">

10
nginx/vue/src/views/Admin.vue
View File

@@ -5,14 +5,14 @@ import CreatePost from "@/components/admin/CreatePost.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div class="background halftone" /> <div class="background halftone" />
<div class="a5page-portrait bdr-1 flex-col"> <div class="a5page-portrait bdr-1 flex flex-col">
<Login class="bdr-2 bg-secondary" /> <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> </div>
</main> </main>
</template> </template>

6
nginx/vue/src/views/Bookmarks.vue
View File

@@ -240,9 +240,11 @@ const links = [
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div class="background halftone" /> <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 <ToggleLinkTable
v-for="link in links" v-for="link in links"
:title="link[0]" :title="link[0]"

28
nginx/vue/src/views/Home.vue
View File

@@ -2,6 +2,7 @@
import Timer from "@/components/quick/Timer.vue"; import Timer from "@/components/quick/Timer.vue";
import Time from "@/components/quick/Time.vue"; import Time from "@/components/quick/Time.vue";
import Chat from "@/components/quick/Chat.vue"; import Chat from "@/components/quick/Chat.vue";
import MusicPlayer from "@/components/quick/MusicPlayer.vue";
import Intro from "@/components/home/Intro.vue"; import Intro from "@/components/home/Intro.vue";
import Stamps from "@/components/home/Stamps.vue"; import Stamps from "@/components/home/Stamps.vue";
@@ -15,18 +16,19 @@ import Watching from "@/components/home/Watching.vue";
</script> </script>
<template> <template>
<div class="overlay"> <div class="background halftone">
<img src="/img/memes/fire-woman.gif" class="br w-10vw" /> <img src="/img/memes/fire-woman.gif" class="br w-80" />
<div class="flex-col tr"> <div class="flex flex-col tr sidebar">
<Time class="bdr-2 bg-primary" /> <Time />
<Timer class="bdr-2 bg-primary" /> <Timer />
<!-- <Chat class="bdr-2 bg-primary" /> --> <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
<MusicPlayer />
</div> </div>
</div> </div>
<div class="background halftone" /> <div class="-z-10 halftone" />
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div class="page a4page-portrait bdr-1 grid relative"> <div class="page a4page-portrait bdr-1 homeGrid relative">
<Intro class="intro" /> <Intro class="intro" />
<Listening class="listening" /> <Listening class="listening" />
<Stamps class="stamps" /> <Stamps class="stamps" />
@@ -46,7 +48,13 @@ import Watching from "@/components/home/Watching.vue";
background-color: var(--bg_primary); 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; display: grid;
grid-gap: 5px; grid-gap: 5px;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);

6
nginx/vue/src/views/Notes.vue
View File

@@ -59,15 +59,15 @@ onMounted(fetchFile);
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div class="background halftone" /> <div class="background halftone" />
<div <div
v-if="file" 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> <h1>{{ filename }}</h1>
<small>{{ last_edited }}</small> <small>{{ last_edited }}</small>
<Markdown class="fill wrap" :source="file" /> <Markdown class="flex-1 border-box text-wrap" :source="file" />
</div> </div>
<div v-else>Loading…</div> <div v-else>Loading…</div>

6
nginx/vue/src/views/Shrines.vue
View File

@@ -9,9 +9,11 @@ const shrine_links = [
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div class="background halftone" /> <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" /> <RouterTable :linkArr="shrine_links" />
</div> </div>
</main> </main>

4
nginx/vue/src/views/shrines/Demoman.vue
View File

@@ -11,9 +11,9 @@ const videoSources = [
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div <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> <p>
<a href="https://wiki.teamfortress.com/wiki/Demoman" <a href="https://wiki.teamfortress.com/wiki/Demoman"

4
nginx/vue/src/views/shrines/Evangelion.vue
View File

@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div <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 /> <Wip />
</div> </div>

4
nginx/vue/src/views/shrines/GTO.vue
View File

@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div <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 /> <Wip />
</div> </div>

4
nginx/vue/src/views/shrines/Skipskipbenben.vue
View File

@@ -3,9 +3,9 @@ import Wip from "@/components/quick/Wip.vue";
</script> </script>
<template> <template>
<main class="center-content flex-col"> <main class="items-center flex flex-col">
<div <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 /> <Wip />
</div> </div>

5
nginx/vue/src/views/unused/CoverLetters.vue
View File

@@ -15,10 +15,7 @@
</tbody> </tbody>
</table> </table>
<div <div class="no-print m-1 w-full text-center"></div>
class="no-print"
style="width: 100%; text-align: center; margin: 20px 0"
></div>
<div id="LloydsBank" class="a5page"> <div id="LloydsBank" class="a5page">
<div class="contact"> <div class="contact">
<h1>Adam French</h1> <h1>Adam French</h1>

18
nginx/vue/vite.config.js
View File

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