adding tailwind css
This commit is contained in:
253
nginx/vue/src/assets/styles.css
Normal file
253
nginx/vue/src/assets/styles.css
Normal 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%
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
92
nginx/vue/src/components/quick/MusicPlayer.vue
Normal file
92
nginx/vue/src/components/quick/MusicPlayer.vue
Normal 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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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]"
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user