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

changing styles

Browse Source
This commit is contained in:
Adam French
2026-01-06 21:09:40 +00:00
parent b11eda3513
commit 14b5651fe2
10 changed files with 166 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,14 @@
<template>
<nav class="flex-row">
<RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
<RouterLink class="bdr-primary margin1" to="/"
><h1>HOME</h1></RouterLink
>
<!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
</nav>
</template>
<style scoped>
h1 {
padding: 10px;
}
</style>

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

@@ -14,11 +14,11 @@ div {
.halftone {
--dot_size: 1px;
--bg_size: 5px;
--bg_size: 3px;
--bg_pos: calc(var(--bg_size) / 2);
--blur: 0%;
--dot_color: #044;
--bg_color: #114;
--dot_color: #033;
--bg_color: #000;
background-color: var(--bg_color);
background-image: radial-gradient(
@@ -32,7 +32,7 @@ div {
mask-image: linear-gradient(
30deg,
rgba(1, 1, 1, 1) 0%,
rgba(1, 1, 1, 0.85) 100%
rgba(1, 1, 1, 0.9) 100%
);
}
</style>

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

@@ -1,58 +1,38 @@
<template>
<div>
<p class="margin1">My favs</p>
<div class="flex-row bdr-primary">
<div class="flex-col">
<h2>favs</h2>
<div class="fill flex-row center-content scroll">
<table>
<tr>
<th>Color</th>
<td>Aqua</td>
</tr>
<tr>
<th>Pet</th>
<td>Cat</td>
</tr>
<tr>
<th>Food</th>
<td>Eggs</td>
</tr>
<tr>
<th>Subject</th>
<td>Math</td>
</tr>
<tr>
<th>Drink</th>
<td>Monster</td>
</tr>
<tr>
<th>Sport</th>
<td>Running</td>
</tr>
</table>
<table>
<tr>
<th>Color</th>
<td>Aqua</td>
</tr>
<tr>
<th>Pet</th>
<td>Cat</td>
</tr>
<tr>
<th>Food</th>
<td>Eggs</td>
</tr>
<tr>
<th>Subject</th>
<td>Math</td>
</tr>
<tr>
<th>Drink</th>
<td>Monster</td>
</tr>
<tr>
<th>Sport</th>
<td>Running</td>
</tr>
<tbody>
<tr>
<th>Color</th>
<td>Aqua</td>
</tr>
<tr>
<th>Pet</th>
<td>Cat</td>
</tr>
<tr>
<th>Subject</th>
<td>Math</td>
</tr>
<tr>
<th>Drink</th>
<td>Monster</td>
</tr>
<tr>
<th>Sport</th>
<td>Running</td>
</tr>
<tr>
<th>Color</th>
<td>Aqua</td>
</tr>
<tr>
<th>Ingredient</th>
<td>Eggs</td>
</tr>
</tbody>
</table>
</div>
</div>

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

@@ -1,6 +1,23 @@
<template>
<div>
<img src="/img/epic.jpeg" />
<div class="flex-row center-content">
<h2>Gym</h2>
<p>I'm not a gym geek but I have a consistent routine:</p>
<table>
<tbody>
<tr>
<th>Row</th>
<td>30 min</td>
</tr>
<tr>
<th>Run</th>
<td>5k</td>
</tr>
<tr>
<th>Pushup & Squat</th>
<td>50</td>
</tr>
</tbody>
</table>
</div>
</template>

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

@@ -1,11 +1,8 @@
<template>
<div class="fill flex-col">
<div class="div">
<h1>Welcome</h1>
<p>This is my website, currently under construction.</p>
<p>THANKS FOR VISITING ^_^</p>
<p>THANKS FOR VISITING ^_^</p>
<p>THANKS FOR VISITING ^_^</p>
<h1>Hello</h1>
<p>Nice to meet you</p>
</div>
</div>
</template>

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

@@ -1,10 +1,24 @@
<template>
<div class="flex-col">
<RouterLink class="bdr-2" to="/cv">
<RouterLink class="bdr-secondary" to="/cv">
<h1>CV</h1>
</RouterLink>
<RouterLink class="bdr-2" to="/admin">
<RouterLink class="bdr-secondary" to="/admin">
<h1>ADMIN</h1>
</RouterLink>
<a
class="bdr-secondary"
href="https://steamcommunity.com/id/SteveThePug"
><h1>Steam</h1></a
>
<a href="https://github.com/SteveThePug" class="bdr-secondary"
><h1>Github</h1></a
>
<a
href="https://open.spotify.com/user/stevethepug"
class="bdr-secondary"
>
<h1>Spotify</h1></a
>
</div>
</template>

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

@@ -1,6 +1,56 @@
<template>
<div>
<img src="/img/epic.jpeg" />
<div class="flex-col center-content">
<h2>Watching/Playing</h2>
<div class="scroll fill">
<table>
<tbody>
<tr>
<th>Movie</th>
<td>Funny Pages</td>
</tr>
<tr>
<th>Series</th>
<td>Curb Your Enthusiasm</td>
</tr>
<tr>
<th>Game</th>
<td>Hatsune Miku: Project Mirai DX</td>
</tr>
<tr>
<th>Anime</th>
<td>Welcome to the NHK</td>
</tr>
<tr>
<th>Movie</th>
<td>Redline</td>
</tr>
<tr>
<th>Anime</th>
<td>Neon Genesis Evangelion</td>
</tr>
<tr>
<th>Game</th>
<td>Persona 5</td>
</tr>
<tr>
<th>Anime</th>
<td>GTO</td>
</tr>
<tr>
<th>Anime</th>
<td>Revolutionary Girl Utena</td>
</tr>
<tr>
<th>Anime</th>
<td>Chainsaw Man</td>
</tr>
<tr>
<th>Anime</th>
<td>Azumanga Daioh</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

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

@@ -476,7 +476,8 @@ h1 {
h2 {
margin: 0px;
border-bottom: 2px solid var(--primary);
margin-bottom: 3px;
border-bottom: 1px solid var(--primary);
}
p {
@@ -490,14 +491,15 @@ table {
color: var(--secondary);
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
td {
/* border: 2px solid var(--tertiary); */
border-top: 1px solid var(--tertiary);
padding: 1px 0px 1px 10px;
padding: 1px 10px 1px 10px;
font-size: var(--font-size-text);
text-align: center;
text-align: left;
}
th {
@@ -571,7 +573,7 @@ textarea {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--primary);
border-bottom: 1px solid var(--primary);
}
.contact-details {

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

@@ -18,23 +18,22 @@ import Overlay from "@/components/Overlay.vue";
<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/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" />
<!-- <img src="/img/memes/beer.png" class="ov6" /> -->
</Overlay>
<h1>hello</h1>
<Intro class="intro bdr-primary bg-primary" />
<Listening class="listening bdr-primary bg-primary" />
<Stamps class="stamps bdr-primary bg-primary" />
<Feed class="feed bdr-primary bg-primary" />
<Links class="links bdr-primary bg-primary" />
<Collage class="collage bdr-primary bg-primary" />
<Watching class="watching bdr-primary bg-primary" />
<Favorites class="favorites bdr-primary bg-primary" />
<Gym class="gym bdr-primary bg-primary" />
<Watching class="watching bdr-primary bg-primary" />
</div>
</main>
<img src="/img/memes/fire-woman.gif" class="ov4" />
@@ -78,7 +77,7 @@ import Overlay from "@/components/Overlay.vue";
grid-row: 5 / span 4;
}
.favorites {
.watching {
grid-column: span 4;
grid-row: span 2;
}
@@ -87,7 +86,7 @@ import Overlay from "@/components/Overlay.vue";
grid-row: span 2;
}
.watching {
.favorites {
grid-column: span 3;
grid-row: span 2;
}
@@ -108,7 +107,7 @@ import Overlay from "@/components/Overlay.vue";
.ov3 {
width: 200px;
position: absolute;
bottom: -150px;
bottom: -50px;
left: -200px;
}
.ov4 {
@@ -120,8 +119,8 @@ import Overlay from "@/components/Overlay.vue";
.ov5 {
height: 100px;
position: absolute;
top: -100px;
right: 200px;
top: 100px;
right: -100px;
}
.ov6 {
height: 250px;