adding tailwind css

This commit is contained in:
2026-02-04 12:04:08 +00:00
parent 6469cb4ad7
commit 9167946ecc
41 changed files with 796 additions and 368 deletions

View File

@@ -0,0 +1,253 @@
@import "tailwindcss";
/* PRINTING */
@media print {
.no-print,
.no-print * {
display: none !important;
margin: 0px;
padding: 0px;
width: 0x;
height: 0px;
}
}
/* END OF PRINTING */
/* FONTS */
@font-face {
font-family: "big_noodle_titling";
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "CreatoDisplay";
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* END OF FONTS */
/* VARIABLES */
:root {
/* RED, WHITE, BLACK are standard*/
--portal_grey: #dddddd;
--portal_orange: #ff9a00;
--portal_light_orange: #ff5d00;
--portal_blue: #0065ff;
--portal_light_blue: #00a2ff;
/* MAIN COLORS */
--primary: #5fb;
--secondary: #5ea;
--tertiary: #2ea;
--quaternary: #400;
/* BACKGROUND COLORS */
--bg_primary: #011;
--bg_secondary: #000;
--margin: 3px;
--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 */
body {
margin: 0 auto;
width: 100vw;
height: 100vh;
font-family: var(--font_text);
}
a > * {
color: var(--tertiary);
}
a {
color: var(--tertiary);
text-align: center;
text-decoration: none;
padding: 0px;
margin: 0px;
}
small {
color: var(--tertiary);
}
h1,
h2,
h3,
h4 {
border-bottom: 1px solid var(--primary);
color: var(--primary);
font-family: var(--font_heading);
margin: var(--margin);
}
p {
color: var(--secondary);
margin: var(--margin);
}
button {
color: var(--secondary);
background-color: var(--bg_secondary);
margin: var(--margin);
}
table {
border: 1px solid var(--primary);
border-collapse: collapse;
color: var(--secondary);
margin: var(--margin);
}
tr {
border-bottom: 1px solid var(--primary);
}
/* END OF ELEMENTS */
/* CLASSES */
.img-stamp {
width: 99px;
height: 55px;
}
/* BORDERS */
.bdr-1 {
border: 30px solid;
border-image: url("/img/borders/border1.gif") 30 round;
}
.bdr-1-inv {
border: 30px solid;
border-image: url("/img/borders/border1inv.gif") 30 round;
}
.bdr-2 {
border: 7px solid;
border-image: url("/img/borders/border4.gif") 7 round;
}
.bdr-cv {
border: 30px solid;
border-image: url("/img/borders/bordercv.png") 30 round;
}
/* A5 Page */
.a5page-landscape {
font-family: var(--font_text);
height: 148mm;
width: 210mm;
margin: 0px;
}
.a5page-portrait {
font-family: var(--font_text);
width: 148mm;
height: 210mm;
margin: 0px;
}
/* A4 Page */
.a4page-portrait {
width: 210mm;
height: 297mm;
margin: 0px;
}
.a4page-landscape {
height: 210mm;
width: 297mm;
margin: 0 auto;
}
/* END OF CLASSES */
/* PHONE */
@media (max-width: 850px) {
.a4page-portrait {
width: 100%; /* fill mobile width */
height: auto; /* adjust height automatically */
margin: 0 auto; /* center horizontally */
box-sizing: border-box;
}
.a4page-landscape {
width: 100%; /* fill mobile width */
height: auto; /* adjust height automatically */
margin: 0 auto; /* center horizontally */
box-sizing: border-box;
}
}
@media (max-width: 600px) {
.a5page-portrait {
width: 100%; /* fill mobile width */
height: auto; /* adjust height automatically */
margin: 0 auto; /* center horizontally */
box-sizing: border-box;
}
.a5page-landscape {
width: 100%; /* fill mobile width */
height: auto; /* adjust height automatically */
margin: 0 auto; /* center horizontally */
box-sizing: border-box;
}
}
.tl {
@apply absolute top-0 left-0;
}
.tr {
@apply absolute top-0 right-0;
}
.bl {
@apply absolute bottom-0 left-0;
}
.br {
@apply absolute bottom-0 right-0;
}
.background {
@apply fixed inset-0 -z-10 pointer-events-none;
}
.halftone {
--dot_size: 1px;
--bg_size: 3px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
background-color: var(--bg_secondary);
background-image: radial-gradient(
circle at center,
var(--bg_primary) var(--dot_size),
transparent var(--blur)
);
background-size: var(--bg_size) var(--bg_size);
background-position: 0 0;
mask-image: linear-gradient(
30deg,
rgba(1, 1, 1, 1) 0%,
rgba(1, 1, 1, 0.9) 100%
);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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