init
This commit is contained in:
commit
993dcb9d5c
10 changed files with 659 additions and 0 deletions
42
public/index.html
Normal file
42
public/index.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>wrz.one</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/static/style.css?v=1" rel="stylesheet" />
|
||||
<link rel="icon" href="/static/assets/favicon.svg" sizes="any" type="image/svg+xml" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="/static/assets/logo.svg" alt="Logo" draggable="false" />
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a title="Forgejo profile" href="https://tea.wrz.one/lukas">Forgejo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="GitHub profile" href="https://github.com/lukaswrz">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Codeberg profile" href="https://codeberg.org/lukaswrz">Codeberg</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<a class="external" title="Send me an email at lukas@wrz.one" href="mailto:lukas@wrz.one">
|
||||
<span class="external-text email-me">Email me</span>
|
||||
</a>
|
||||
|
||||
<a class="external" href="https://log.wrz.one">
|
||||
<span class="external-text visit-log">Visit log.wrz.one</span>
|
||||
</a>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
61
public/static/assets/favicon.svg
Normal file
61
public/static/assets/favicon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
49
public/static/assets/logo.svg
Normal file
49
public/static/assets/logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
313
public/static/style.css
Normal file
313
public/static/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue