vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-14 05:13:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip: 2025-01-31T16:07:49+0100 (1738336069)

Browse source
This commit is contained in:
Victor Westerlund 2025-02-01 01:41:52 +01:00
parent a6018a8678
commit 6a92a0bbeb
9 changed files with 66 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/assets/css/pages/about.css
View file

@ -3,6 +3,7 @@
:root {
--primer-color-accent: 148, 255, 21;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 390deg;
--primer-color-go: 0, 173, 216;
--primer-color-php: 79, 93, 149;

16
public/assets/css/pages/contact.css
View file

@ -3,6 +3,7 @@
:root {
--primer-color-accent: 255, 195, 255;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 200deg;
}
vv-shell {
@ -28,10 +29,6 @@ section.center {
text-align: center;
}
section.fade {
opacity: .3;
}
/* ## Social */
section.social {
@ -81,11 +78,12 @@ section.pgp {
max-width: 800px;
position: relative;
display: flex;
border-radius: 12px;
flex-direction: column;
gap: var(--padding);
text-align: center;
background-color: rgba(var(--primer-color-accent), .15);
padding: calc(var(--padding) * 1.5);
padding: var(--padding);
transform: rotate(-1.5deg);
}
@ -108,10 +106,6 @@ section.pgp .buttons {
gap: var(--padding);
}
section.pgp .buttons .download svg.chevron {
transform: unset;
}
/* ## Contact form */
section.form :is(input, textarea) {
@ -200,6 +194,10 @@ section.form-message.sent + section.form {
/* # Size queries */
@media (min-width: 460px) {
section.pgp {
padding: calc(var(--padding) * 1.5);
}
section.pgp .buttons {
flex-direction: row;
justify-content: center;

22
public/assets/css/pages/work.css
View file

@ -3,9 +3,10 @@
:root {
--primer-color-accent: 3, 255, 219;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 90deg;
--color-reflect: 220, 26, 0;
--color-vegvisir: 0, 128, 255;
--primer-color-reflect: 220, 26, 0;
--primer-color-vegvisir: 0, 128, 255;
}
vv-shell {
@ -22,7 +23,7 @@ vv-shell {
/* ## Hero */
section.hero {
--color-accent: rgba(255, 255, 255);
--color-accent: rgb(255, 255, 255);
display: grid;
gap: var(--padding);
@ -65,19 +66,21 @@ section.hero .actions {
/* ### Vegivisr */
section.hero .item.vegvisir {
--color-accent: var(--color-vegvisir);
--primer-color-accent: var(--primer-color-vegvisir);
--color-accent: rgb(var(--primer-color-vegvisir));
color: rgb(var(--color-vegvisir));
background-color: rgba(var(--color-vegvisir), .1);
color: var(--color-vegvisir);
background-color: rgba(var(--primer-color-vegvisir), .1);
}
/* ### Reflect */
section.hero .item.reflect {
--color-accent: var(--color-reflect);
--primer-color-accent: var(--primer-color-reflect);
--color-accent: rgb(var(--primer-color-reflect));
color: rgb(var(--color-reflect));
background-color: rgba(var(--color-reflect), .2);
color: var(--color-reflect);
background-color: rgba(var(--primer-color-reflect), .2);
}
/* ## Heading */
@ -90,7 +93,6 @@ section.heading {
}
section.heading svg {
fill: white;
height: 2em;
}

3
public/assets/css/pages/work/timeline.css
View file

@ -3,6 +3,7 @@
:root {
--primer-color-accent: 3, 255, 219;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 90deg;
}
vv-shell {
@ -27,7 +28,7 @@ section.git {
border-radius: 6px;
}
section.git svg {
section.git > svg {
fill: white;
width: 60px;
}

1
public/assets/css/pages/work/wip.css
View file

@ -3,6 +3,7 @@
:root {
--primer-color-accent: 3, 255, 219;
--color-accent: rgb(var(--primer-color-accent));
--hue-accent: 90deg;
}
vv-shell {

29
public/assets/css/shell.css
View file

@ -11,7 +11,8 @@
/* # Cornerstones */
* {
margin: 0;
margin: 0;
fill: inherit;
box-sizing: border-box;
font-family: "Roboto Mono", sans-serif;
color: inherit;
@ -88,6 +89,32 @@ h3 {
font-size: 25px;
}
/* ## Page transition */
[vv-loading] * {
transition: 200ms opacity;
}
[vv-loading="true"] * {
opacity: 0;
pointer-events: none;
}
[vv-loading="true"]::after {
content: "";
position: fixed;
top: 50%;
left: 50%;
width: 45px;
height: 49px;
background-size: contain;
image-rendering: pixelated;
transform: translate(-50%, -50%);
background-image: url("/assets/media/spinner.gif");
-webkit-filter: hue-rotate(var(--hue-accent));
filter: hue-rotate(var(--hue-accent));
}
/* ## Buttons */
button {

7
public/assets/js/shell.js
View file

@ -2,6 +2,9 @@ import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
// Set global Vegvisir naviation delay for page transition effect
globalThis.vegvisir.globalNavigationDelayMs = 100;
// Handle search box open/close buttons
{
// Open search box
@ -50,6 +53,4 @@ const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
}
// Scroll page to top on navigation
{
document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({top: 0}));
}
document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({ top: 0 }));

BIN
public/assets/media/spinner.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

12
public/work/wip.php
View file

@ -1,8 +1,18 @@
<?php
use const VLW\DEFAULT_BUTTON_ICON;
require_once VV::root("src/Consts.php");
?>
<style><?= VV::css("public/assets/css/pages/work/wip") ?></style>
<section class="disclaimer">
<h1>Soon, very soon!</h1>
<p>Bear with me as I cook up some texts about this project! Hopefully with some pictures too.</p>
</section>
<section class="actions">
<a href="/work"><button class="inline">to featured work</button></a>
<a href="/work"><button class="inline">
<p>to featured work</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</section>