helvetica/wrz.one
1
0
Fork 0
Code Activity

init

Browse source
This commit is contained in:
Lukas Wurzinger 2024-12-30 12:55:54 +01:00
commit 993dcb9d5c
No known key found for this signature in database
10 changed files with 659 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

61
public/static/assets/favicon.svg Normal file
View file

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
rect {
fill: #0c0c0c;
}
path {
fill: #383838;
stroke: #383838;
}
@media (prefers-color-scheme: dark) {
rect {
fill: #0c0c0c;
}
path {
fill: #c0c0c0;
stroke: #c0c0c0;
}
}
@media (prefers-color-scheme: light) {
rect {
fill: #a0a0a0;
}
path {
fill: #1d1d1d;
stroke: #1d1d1d;
}
}
</style>
<rect
style="fill-opacity:1"
width="10"
height="10"
x="0"
y="0"
ry="1.5" />
<g
transform="translate(0,3.5000005)">
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 0,0 V 1 3 H 5 V 0 H 4 V 2 H 3 V 1 H 2 V 2 H 1 V 1 0 H 0 v 0 0" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 10,2 H 7 v 1 h 3 V 2" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 9.4,0.2 7,2 7.6,2.8 10,1 9.4,0.2" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 6,0 4.2111457,0.89442716 4.6583593,1.7888543 6.4472134,0.89442706 6,0" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 6,0 v 1 h 4 V 0 H 6" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

49
public/static/assets/logo.svg Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 12 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
path, circle {
fill: #383838;
stroke: #383838;
}
@media (prefers-color-scheme: dark) {
path, circle {
fill: #dedede;
stroke: #dedede;
}
}
@media (prefers-color-scheme: light) {
path, circle {
fill: #1d1d1d;
stroke: #1d1d1d;
}
}
</style>
<g>
<path
style="stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
d="M 0,0 V 1 3 H 5 V 0 H 4 V 2 H 3 V 1 H 2 V 2 H 1 V 1 0 H 0 v 0 0" />
<path
style="stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 10,2 H 7 V 3 H 10 V 2" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 9.4,0.2 -2.4,1.8 0.6,0.8 2.4,-1.8 -0.6,-0.8" />
<circle
style="fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
cx="10.5"
cy="2.5"
r="0.5" />
<path
style="stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
d="M 10,1 11,0 h 1 v 3 h -1 V 1 H 10" />
<path
style="fill-opacity:1;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 6,0 4.2111457,0.89442716 4.6583593,1.7888543 6.4472134,0.89442706 6,0" />
<path
style="stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 6,0 V 1 H 10 V 0 H 6" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

313
public/static/style.css Normal file
View file

@ -0,0 +1,313 @@
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-ExtraLight.woff2') format('woff2');
font-weight: 200;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-Light.woff2') format('woff2');
font-weight: 300;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-Medium.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-Regular.woff2') format('woff2');
font-weight: 500;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-SemiBold.woff2') format('woff2');
font-weight: 600;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-Bold.woff2') format('woff2');
font-weight: 700;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-ExtraBold.woff2') format('woff2');
font-weight: 800;
}
@font-face {
font-family: League Spartan;
src: url('/static/fonts/league-spartan/LeagueSpartan-Black.woff2') format('woff2');
font-weight: 900;
}
@media screen {
body {
margin: 0;
}
@media (prefers-color-scheme: dark) {
* {
color: #e8e8e8;
}
body {
background-color: #0b0c0d;
}
header {
border-bottom-color: #b83a33;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: white;
}
a {
color: white;
transition: color .1s ease-in-out;
}
a:hover {
color: #b83a33;
transition: color .2s ease-in-out;
}
img.logo {
--c: #dedede;
}
nav#menu ul li:not(:first-child) {
border-left: 1px solid #1f1f1f;
}
nav#menu ul li:not(:last-child) {
border-right: 1px solid #1f1f1f;
}
a.external {
border-color: #1f1f1f;
box-shadow: 0px 5px 10px 2px #000000a0;
}
a.external:hover {
border-color: #1f1f1f;
box-shadow: 0px 5px 15px 4px #000000c0;
background-color: #e8e8e840;
}
a.external:active {
border-color: #1f1f1f;
box-shadow: 0px 5px 20px 2px #000000e0;
background-color: #e8e8e8a0;
}
}
@media (prefers-color-scheme: light) {
* {
color: #252525;
}
body {
background-color: #fffcf6;
}
header {
border-bottom-color: #ed5c54;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
}
a {
color: black;
transition: color .1s ease-in-out;
}
a:hover {
color: #c8251c;
transition: color .2s ease-in-out;
}
img.logo {
--c: #1d1d1d;
}
nav#menu ul li:not(:first-child) {
border-left: 1px solid #f0eade;
}
nav#menu ul li:not(:last-child) {
border-right: 1px solid #f0eade;
}
a.external {
border-color: #f0eade;
box-shadow: 0px 5px 10px 2px #0000000f;
}
a.external:hover {
border-color: #bebbb4;
box-shadow: 0px 5px 15px 2px #00000040;
background-color: #615e5e40;
}
a.external:active {
border-color: #696763;
box-shadow: 0px 5px 20px 2px #00000060;
background-color: #504e4ea0;
}
}
}
* {
box-sizing: border-box;
font-size: 18px;
}
body {
font-family: League Spartan, sans-serif;
}
a:not(:hover) {
text-decoration: none;
}
a:hover {
text-decoration-style: solid;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
margin-top: auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding-bottom: 4vh;
border-bottom-width: 8px;
border-bottom-style: solid;
}
main {
margin-bottom: auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 4vh;
}
img.logo {
max-width: 90vw;
max-height: 120px;
--t: 4px;
padding: calc(18px + var(--t));
background:
conic-gradient(from 180deg at top var(--t) right var(--t),
#0000 25%,
var(--c) 0) var(--i, 200%) 0 /200% var(--i, var(--t)) no-repeat,
conic-gradient(at bottom var(--t) left var(--t),
#0000 25%,
var(--c) 0) 0 var(--i, 200%)/var(--i, var(--t)) 200% no-repeat;
transition: background .3s, background-position .3s .3s;
}
img.logo:hover {
--i: 100%;
transition: background .3s, background-size .3s .3s;
}
nav#menu {
display: block;
overflow-x: auto;
max-width: 100%;
}
nav#menu ul {
display: flex;
flex-direction: row;
justify-content: stretch;
list-style-type: none;
padding: 1em;
}
nav#menu ul li {
padding: 1em;
text-wrap: nowrap;
}
a.external {
text-align: center;
padding: 1em;
transition:
border-color .1s ease-in-out,
background-color 1s ease-out -.1s,
box-shadow .5s ease-out -.1s;
border-width: 2px;
border-style: solid;
}
a.external>span.external-text {
display: inline-block;
position: relative;
transition: ease .5s;
text-wrap: nowrap;
}
a.external>span.external-text::after {
content: '\00BB';
position: absolute;
opacity: 0;
right: -1em;
transition: ease .5s;
}
a.external:hover>span.external-text {
padding-right: 1em;
}
a.external:hover>span.external-text::after {
opacity: 1;
right: 0;
}
span.email-me::before {
content: '\1F4E7';
margin-right: .5em;
}
span.visit-log::before {
content: '\1F4DC';
margin-right: .5em;
}