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

mogging

Browse Source
This commit is contained in:
Adam French
2026-01-10 19:01:56 +00:00
parent 51592d7eb2
commit abcad8247f
14 changed files with 128 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
nginx/vue/public/css/styles.css
View File

@@ -45,9 +45,9 @@
/* BACKGROUND COLORS */
--bg-body: #111;
--bg_primary: #fff;
--bg_secondary: #444;
--bg_tertiary: #666;
--bg_quaternary: #888;
--bg_secondary: #ffa;
--bg_tertiary: #aaa;
--bg_quaternary: #999;
--margin: 3px;
--padding: 3px;
@@ -68,16 +68,19 @@ body {
}
a {
text-align: center;
text-decoration: none;
padding: 0px;
margin: 0px;
background-color: var(--bg_primary);
background-color: var(--bg_secondary);
}
h1,
h2,
h3,
h4 {
background-color: var(--bg_primary);
border-bottom: 1px solid var(--bg_secondary);
color: var(--primary);
font-family: var(--font_heading);
margin: var(--margin);
@@ -222,8 +225,10 @@ tr {
.center-content {
align-items: center;
}
.center-text {
text-align: center;
justify-content: center;
}
.left-content {
@@ -239,6 +244,10 @@ tr {
margin: 0px;
}
.flex-center {
justify-content: center;
}
.scroll {
overflow: scroll;
}
@@ -264,6 +273,10 @@ tr {
padding: 2px;
}
.inline {
display: inline;
}
.space-around {
justify-content: space-around;
}
@@ -320,13 +333,15 @@ tr {
margin: 0 auto; /* center horizontally */
box-sizing: border-box;
}
.a3page-portrait {
}
@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;
}
.a3page-landscape {
.a5page-landscape {
width: 100%; /* fill mobile width */
height: auto; /* adjust height automatically */
margin: 0 auto; /* center horizontally */
@@ -334,3 +349,78 @@ tr {
}
}
/* END OF PHONE */
/* BACKGROUND */
.overlay {
position: fixed; /* not absolute */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wfull {
width: 100%;
}
.w-10vw {
width: 10vw;
}
.tl {
position: absolute;
top: 0px;
left: 0px;
}
.tr {
position: absolute;
top: 0px;
right: 0px;
}
.bl {
position: absolute;
left: 0px;
right: 0px;
}
.br {
position: absolute;
bottom: 0px;
right: 0px;
}
.background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.halftone {
--dot_size: 1px;
--bg_size: 3px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
--dot_color: #033;
--bg_color: #000;
background-color: var(--bg_color);
background-image: radial-gradient(
circle at center,
var(--dot_color) 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%
);
}

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

@@ -16,16 +16,21 @@ const parentPath = computed(() => {
</script>
<template>
<nav class="flex-row">
<RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
<nav class="left flex-col">
<RouterLink class="bdr-2" to="/">
<a>HOME</a>
</RouterLink>
<RouterLink class="bdr-2" v-if="parentPath" :to="parentPath">
<h1>UP</h1>
<a>UP</a>
</RouterLink>
</nav>
</template>
<style scoped>
h1 {
padding: 10px;
.left {
width: 5vw;
position: sticky;
top: 0;
left: 0;
}
</style>

16
nginx/vue/src/components/Overlay.vue
View File

@@ -1,16 +0,0 @@
<template>
<div class="overlay">
<slot />
</div>
</template>
<style scoped>
.overlay {
position: fixed; /* not absolute */
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
</style>

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

@@ -28,5 +28,6 @@ async function post() {
<input type="text" v-model="title" placeholder="Title" />
<textarea v-model="content" placeholder="Content"></textarea>
<button @click="post">Upload</button>
<!-- make textarea take up most the space -->
</div>
</template>

39
nginx/vue/src/components/backgrounds/Halftone.vue
View File

@@ -1,39 +0,0 @@
<template>
<div class="halftone" />
</template>
<style scoped>
div {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
object-fit: cover; /* optional if it’s an img background */
}
.halftone {
--dot_size: 1px;
--bg_size: 3px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
--dot_color: #033;
--bg_color: #000;
background-color: var(--bg_color);
background-image: radial-gradient(
circle at center,
var(--dot_color) 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%
);
}
</style>

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

@@ -37,14 +37,14 @@ onMounted(() => {
v-if="fetched"
:key="song"
v-on:click="nextSong"
class="flex-col center-content"
class="flex-col center-content center-text"
>
<h2>Listening To</h2>
<img :src="song.track.album.images[0].url" />
<p><strong>Song:</strong> {{ song.track.name }}</p>
<p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
</div>
<div v-else class="flex-col center-content">
<div v-else class="flex-col center-content center-text">
<h2>Listening To</h2>
<img src="/img/Untitled.png" />
<p><strong>Song:</strong> >_<</p>

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

@@ -18,6 +18,6 @@ const keys = ["name", "link"];
:key="rowIndex"
:href="row.link"
>
<h2>{{ row.name }}</h2>
<p>{{ row.name }}</p>
</a>
</template>

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

@@ -18,6 +18,6 @@ const keys = ["name", "link"];
:key="rowIndex"
:to="row.link"
>
<h2>{{ row.name }}</h2>
<p>{{ row.name }}</p>
</RouterLink>
</template>

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

@@ -2,26 +2,17 @@
import Login from "@/components/admin/Login.vue";
import CreateUser from "@/components/admin/CreateUser.vue";
import CreatePost from "@/components/admin/CreatePost.vue";
import Halftone from "@/components/backgrounds/Halftone.vue";
</script>
<template>
<main class="center-content flex-col">
<Halftone />
<div class="a5page-portrait bdr-1 grid">
<div class="background halftone" />
<div class="a5page-portrait bdr-1 flex-col">
<Login class="bdr-2 bg-secondary" />
<!--
<CreateUser class="bdr-2 bg-secondary" />
-->
<CreatePost class="bdr-2 bg-secondary" />
</div>
</main>
</template>
<style scoped>
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
</style>

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

@@ -64,6 +64,7 @@ const art_links = [
<template>
<main class="center-content flex-col">
<div class="background halftone" />
<div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
<h1>Radio Links</h1>
<LinkTable :linkArr="radio_links" />

1
nginx/vue/src/views/CV.vue
View File

@@ -464,6 +464,7 @@ h1,
h2,
h3,
h4 {
border: none;
color: var(--primary);
font-family: var(--font-heading);
text-transform: capitalize;

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

@@ -1,4 +1,6 @@
<script setup>
import Timer from "@/components/quick/Timer.vue";
import Intro from "@/components/home/Intro.vue";
import Stamps from "@/components/home/Stamps.vue";
import Listening from "@/components/home/Listening.vue";
@@ -8,23 +10,17 @@ import Collage from "@/components/home/Collage.vue";
import Favorites from "@/components/home/Favorites.vue";
import Gym from "@/components/home/Gym.vue";
import Watching from "@/components/home/Watching.vue";
import Halftone from "@/components/backgrounds/Halftone.vue";
import Overlay from "@/components/Overlay.vue";
</script>
<template>
<Halftone />
<div class="overlay">
<img src="/img/memes/fire-woman.gif" class="br w-10vw" />
<Timer class="tr bdr-2 bg-primary" />
</div>
<div class="background halftone" />
<main class="center-content flex-col">
<div class="a4page-portrait bdr-1 grid relative">
<!-- <Overlay> -->
<!-- <img src="/img/memes/star.gif" class="ov1" /> -->
<!-- <img src="/img/memes/welcome2.png" class="ov2" /> -->
<!-- <img src="/img/memes/pidgeon.gif" class="ov3" /> -->
<!-- <img src="/img/memes/no_slip.png" class="ov5" /> -->
<!-- <img src="/img/memes/beer.png" class="ov6" /> -->
<!-- </Overlay> -->
<Intro class="intro bdr-primary bg-primary" />
<Listening class="listening bdr-primary bg-primary" />
<Stamps class="stamps bdr-primary bg-primary" />
@@ -36,7 +32,6 @@ import Overlay from "@/components/Overlay.vue";
<Gym class="gym bdr-primary bg-primary" />
</div>
</main>
<img src="/img/memes/fire-woman.gif" class="ov4" />
</template>
<style scoped>
@@ -46,12 +41,6 @@ import Overlay from "@/components/Overlay.vue";
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
}
.ov4 {
position: fixed; /* instead of absolute */
bottom: 0;
right: 0;
width: 250px; /* keeps size fixed */
}
@media (max-width: 850px) {
.grid {
@@ -59,9 +48,6 @@ import Overlay from "@/components/Overlay.vue";
display: flex;
flex-direction: column;
}
.ov4 {
width: 100px; /* keeps size fixed */
}
}
.intro {
@@ -107,46 +93,4 @@ import Overlay from "@/components/Overlay.vue";
grid-column: span 3;
grid-row: span 2;
}
.ov1 {
rotate: 10deg;
width: 100px;
position: absolute;
top: -90px;
left: 0px;
}
.ov2 {
width: 100px;
position: absolute;
top: -102px;
right: 0px;
}
.ov3 {
width: 200px;
position: absolute;
bottom: -50px;
left: -200px;
}
.ov5 {
height: 100px;
position: absolute;
top: 100px;
right: -100px;
}
.ov6 {
height: 250px;
position: absolute;
top: 450px;
right: -200px;
animation: floatY 5s ease-in-out infinite alternate;
}
@keyframes floatY {
from {
transform: translateY(0);
}
to {
transform: translateY(-500px);
}
}
</style>

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

@@ -8,6 +8,7 @@ const note_links = [
<template>
<main class="center-content flex-col">
<div class="background halftone" />
<div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
<RouterTable :linkArr="note_links" />
</div>

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

@@ -10,6 +10,7 @@ const shrine_links = [
<template>
<main class="center-content flex-col">
<div class="background halftone" />
<div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
<RouterTable :linkArr="shrine_links" />
</div>