new header and colors
This commit is contained in:
koehr
parent
7f6578f13a
commit
012c262f32
29 changed files with 334 additions and 67 deletions
1
dist/down.svg
vendored
1
dist/down.svg
vendored
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 10-4 4-4-4"/></svg>
|
||||
|
Before Width: | Height: | Size: 503 B |
2
dist/fediverse.svg
vendored
2
dist/fediverse.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#888785"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#eacb8b"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
9
dist/gitforge.svg
vendored
Normal file
9
dist/gitforge.svg
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212">
|
||||
<g transform="translate(6 6)" fill="none" stroke="#eacb8b" stroke-width="15">
|
||||
<path d="M58 168V70a50 50 0 0 1 50-50h20" stroke-width="25" />
|
||||
<path d="M58 168v-30a50 50 0 0 1 50-50h20" stroke-width="25" />
|
||||
<circle cx="142" cy="20" r="18" />
|
||||
<circle cx="142" cy="88" r="18" />
|
||||
<circle cx="58" cy="180" r="18" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 409 B |
2
dist/github.svg
vendored
2
dist/github.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 910 B After Width: | Height: | Size: 910 B |
BIN
dist/header.jpg
vendored
BIN
dist/header.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 11 KiB |
64
dist/index.html
vendored
64
dist/index.html
vendored
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<base href="https://koehr.in/">
|
||||
<base href="http://localhost:8080/">
|
||||
<title>Norman Köhring // the codeartist — programmer and engineer based in Berlin</title>
|
||||
<meta content="The personal page and weblog of Norman Köhring" name=description>
|
||||
<meta content="Norman Köhring" name=author>
|
||||
|
|
@ -30,14 +30,6 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header class="light:invert">
|
||||
Homepage of
|
||||
<div class=p-name>
|
||||
<span class=first-name>Norman</span>
|
||||
<span class=last-name>Köhring</span>
|
||||
</div>
|
||||
Code Artist
|
||||
</header>
|
||||
<main>
|
||||
<div id=intro>
|
||||
<p>
|
||||
|
|
@ -59,11 +51,19 @@
|
|||
<div id=menu>
|
||||
<a href="https://koehr.ing" target="_blank">
|
||||
Try the Interactive Homepage Experiment
|
||||
<img class="light:invert" src="/term.svg" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#content">
|
||||
Learn more about me and my work, here
|
||||
<img class="light:invert" src="/down.svg" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="m16 10-4 4-4-4" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,6 +89,7 @@
|
|||
<div class="contacts">
|
||||
<p><img src="/mail.svg" alt="Mail"> n@<this domain></p>
|
||||
<p><img src="/fediverse.svg" alt="Fediverse / Mastodon"> <a href="https://mstdn.io/@Koehr/">@Koehr@mstdn.io</a></p>
|
||||
<p><img src="/gitforge.svg" alt="Gitforge"> <a href="https://git.k0r.in/">git.k0r.in</a></p>
|
||||
<p><img src="/linkedin.svg" alt="LinkedIn"> <a href="https://linkedin.com/in/norman-k%C3%B6hring-950448109/">Norman Köhring</a></p>
|
||||
<p><img src="/instagram.svg" alt="Instagram"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
|
||||
<p><img src="/threads.svg" alt="Threads"> <a href="https://instagram.com/coffee_n_code/">coffee_n_code</a></p>
|
||||
|
|
@ -98,7 +99,48 @@
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div id="spacer"></div>
|
||||
<header id="header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 832.4 143.1">
|
||||
<path id="header-underscore"
|
||||
d="M832.4 131.1q0 5.5-3.1 8.6-3 3.4-8.2 3.3h-75.5q-5.2 0-8.2-3.3-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8 0-5.5 3.1-8.7 1.6-1.7 3.7-2.4 2.2-.8 4.5-.8h75.5q5.2 0 8.2 3.2 3 3.1 3 8.7z" />
|
||||
<path id="header-bracket"
|
||||
d="M731.9 81.4q0 6.7-6.5 10.7l-1 .6-74.3 39.2q-2.5 1.3-5.2 1.2-4.8 0-8.1-3.8-3.2-3.6-3.2-8.4 0-3.3 1.7-6 1.8-2.9 4.6-4.4l55.3-29.1-55.3-29q-2.8-1.6-4.6-4.3-1.7-2.7-1.7-6.2 0-4.7 3.2-8.4 3.3-4 8-3.7 2.7 0 5.3 1.2l74.4 39.2q3.3 1.7 5.3 4.7 2 2.8 2 6.5z" />
|
||||
<path id="header-r"
|
||||
d="M588.7 66.5q0 5-3.5 8.5-3.5 3.4-8.1 3.5-4.4 0-8.3-4.3-10-10.7-20.9-10.6-2.2 0-4.3.3-2.1.3-4 1-1.8.6-3.7 1.6-1.7 1-3.4 2.3-1.7 1.3-3.3 2.9-7.8 8.2-7.6 19.7V131q0 5.5-3.1 8.6-3 3.4-8.3 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V51.6q0-5.4 3-8.6 3-3.4 8.3-3.3 2 0 3.7.6 1.8.6 3.3 1.8 1.4 1 2.2 2.7 1 1.5 1.6 3.3 11.8-8.4 27-8.4 10.6 0 21 5 11.3 5.4 17.2 14.5 2.5 3.7 2.5 7.3z" />
|
||||
<path id="header-h"
|
||||
d="M483.9 131.1q0 5.5-3.1 8.6-3 3.4-8.3 3.3-5.2 0-8.2-3.3-3.2-3.1-3.1-8.6V84.8q0-4.6-1.5-8.2-1.4-3.5-4.4-6.9-2.1-2-4.3-3.4-2.2-1.4-4.7-2-2.4-.7-5.3-.7-4.3 0-7.8 1.5-3.3 1.5-6.4 4.6-5.9 6.3-5.8 15v46.4q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v33q1.5-1 3-1.6l3.2-1.2 3.4-1q1.6-.5 3.3-.8l3.5-.4 3.6-.2q4.4 0 8.5 1 4.1.7 7.9 2.4 3.8 1.6 7.3 4.1 3.5 2.5 6.6 5.8Q484 66 484 84.8z" />
|
||||
<path id="header-e"
|
||||
d="M387.5 111.1q0 1.2-.3 2.3-.1 1-.5 2l-.9 2q-6.6 12-19.4 19-12 6.6-25.4 6.6-20.8 0-35.8-14.6-15.9-15-15.9-37 0-22.1 15.9-37.1 15-14.6 35.8-14.6 3.9 0 7.8.7 4 .7 8 2.2 9.2 3.1 18.2 10 6 4.6 9.1 9.3 3.3 4.7 3.3 10 0 1.3-.3 2.5-.2 1.3-.7 2.4-1.5 3.4-5 5.3l-56.9 32.2q7.2 4.9 16.5 4.9 7.2 0 12.6-2.5 5.5-2.5 9.7-7.4l.7-1 .8-1 .9-1.3 1-1.5q3.3-4.2 7.4-5.1l1.8-.2q4.4 0 8 3.4 3.6 3.5 3.6 8.5zm-29.9-42.7q-7.2-4.8-16.6-4.8-6 0-11 2-4.9 1.8-9.3 6-4.5 4-6.7 9-2 4.8-2 10.8l.1 2.9z" />
|
||||
<path id="header-o"
|
||||
d="M286.8 91.4q0 4.2-.6 8.3-.6 4-1.8 7.7-1.1 3.8-2.9 7.4-1.7 3.5-4 6.9-2.4 3.3-5.2 6.1Q258 143 237.7 143T203 128q-14.3-15.2-14.3-36.6 0-21.5 14.3-36.6 14.4-15 34.7-15 4 0 7.8.5 3.9.7 7.5 1.9t7 3q3.3 1.9 6.4 4.3 3.2 2.4 5.9 5.4 14.4 15 14.5 36.5zm-22.6 0q0-2.4-.4-4.5-.2-2.2-.9-4.2-.6-2-1.5-3.9-1-2-2.2-3.7-1.2-1.7-2.8-3.4-4-4.2-8.6-6.1-4.5-2-10-2-11 0-18.7 8.2-7.8 8-7.8 19.6 0 11.4 7.8 19.7 7.8 8 18.6 8 5.6 0 10.1-1.9 4.6-2 8.6-6.1 4-4.3 5.8-9 2-4.9 2-10.7z" />
|
||||
<path id="header-k"
|
||||
d="M186.3 131q0 4.7-3.3 8.3-1.5 1.8-3.7 2.7-2 1.1-4.3 1.1-3.5 0-6.6-2L119.2 105v26q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v65.9l49.2-36.1q3.2-2 6.6-2 4.7 0 8 3.7t3.3 8.4q-.2 6-5 9.6l-41 30 41 29.9q2.3 1.7 3.6 4.2 1.4 2.5 1.4 5.4z" />
|
||||
<path id="header-tilde"
|
||||
d="M73.1 91q0 2-.6 3.9T71 98.6q-3.2 5.7-8.9 8.5-5.6 2.8-12.9 2.8-8.8 0-18-7.8-2.4-2.3-4.5-3.7-2.1-1.5-3-1.7-1.5 0-2.1.3l-.8 1.3q-.3.7-.8 1.2l-1 1-.9.8q-2.7 2-6.4 2-1.7 0-3.2-.3-1.4-.3-3-1.1-1.5-.8-2.6-2.1-2.8-3.1-2.8-8v-1.3q0-.7.2-1.2l.2-1 .4-1 .4-1q.1-.6.5-1.1l.5-1q3.2-5.7 8.8-8.5 5.7-2.9 13-2.9 3.2 0 6.2 1 3 .9 6 2.7 2.9 1.6 5.7 4.2 5.2 4.6 7.6 5.4 1 0 1.6-.2l.7-.4q.3-.1.5-.4 3.6-5.6 9.2-5.6 5.7 0 8.8 3.5 2.8 3 2.8 8z" />
|
||||
</svg>
|
||||
Homepage of
|
||||
<div class=p-name>
|
||||
<span class=first-name>Norman</span>
|
||||
<span class=last-name>Köhring</span>
|
||||
</div>
|
||||
Code Artist
|
||||
</header>
|
||||
<link href=/extended.css rel=stylesheet>
|
||||
<script>
|
||||
const el = document.getElementById('header')
|
||||
const threshhold = 200
|
||||
let headerIsSmall = false
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.scrollY > threshhold && !headerIsSmall) {
|
||||
el.classList.add('small')
|
||||
headerIsSmall = true
|
||||
} else if (window.scrollY <= threshhold && headerIsSmall) {
|
||||
el.classList.remove('small')
|
||||
headerIsSmall = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
2
dist/instagram.svg
vendored
2
dist/instagram.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#888785" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#eacb8b" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 742 B After Width: | Height: | Size: 742 B |
2
dist/linkedin.svg
vendored
2
dist/linkedin.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#888785" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#eacb8b" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
2
dist/mail.svg
vendored
2
dist/mail.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#888785" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#eacb8b" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 414 B |
2
dist/reddit.svg
vendored
2
dist/reddit.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#888785" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#888785" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#eacb8b" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#eacb8b" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
110
dist/style.css
vendored
110
dist/style.css
vendored
|
|
@ -1,6 +1,11 @@
|
|||
:root {
|
||||
--page-bg-color: #101626;
|
||||
--page-fg-color: #fff8e7;
|
||||
--header-bg-color: #1b1c1d;
|
||||
--header-fg-color: #a3bd8d;
|
||||
--header-height: 192px;
|
||||
--header-multiplier: .25;
|
||||
--page-bg-color: #232425;
|
||||
--page-fg-color: #7e9fbe;
|
||||
--highlight-fg-color: #eacb8b;
|
||||
--emboss-color: #000;
|
||||
}
|
||||
|
||||
|
|
@ -16,25 +21,27 @@
|
|||
:root {
|
||||
--page-bg-color: #efe9d9;
|
||||
--page-fg-color: #261b00;
|
||||
--header-fg-color: #143373;
|
||||
--header-bg-color: #a49570;
|
||||
--emboss-color: #fff;
|
||||
}
|
||||
|
||||
.light\:invert {
|
||||
.light\:invert,
|
||||
.contacts img {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
transition: color, background-color 200ms ease;
|
||||
transition: color 300ms ease, background-color 300ms ease, fill 500ms ease;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
width: 960px;
|
||||
max-width: 98vw;
|
||||
margin: auto;
|
||||
background: var(--page-bg-color);
|
||||
color: var(--page-fg-color);
|
||||
|
|
@ -43,10 +50,41 @@ body {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body>#spacer,
|
||||
body>header {
|
||||
height: 420px;
|
||||
background: url(/header.jpg) center no-repeat;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
body>#spacer {
|
||||
height: calc(var(--header-height) * var(--header-multiplier));
|
||||
}
|
||||
|
||||
body>header {
|
||||
height: var(--header-height);
|
||||
color: transparent;
|
||||
transition: transform .3s ease-in-out;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
body>header.small {
|
||||
transform: scale(var(--header-multiplier));
|
||||
}
|
||||
|
||||
body>header>svg {
|
||||
display: block;
|
||||
width: 960px;
|
||||
max-width: 98vw;
|
||||
margin: .5em auto;
|
||||
color: var(--header-fg-color);
|
||||
}
|
||||
|
||||
body>main {
|
||||
width: 960px;
|
||||
margin: var(--header-height) auto 4em;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -57,15 +95,17 @@ a {
|
|||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 420px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
#content>h1 {
|
||||
margin: 2em 0 .25em;
|
||||
margin: 0 0 .25em;
|
||||
padding-top: 2em;
|
||||
font-size: 2rem;
|
||||
font-variant: small-caps;
|
||||
text-shadow: 1px 1px 0 var(--emboss-color);
|
||||
color: var(--header-fg-color);
|
||||
}
|
||||
|
||||
#menu {
|
||||
|
|
@ -102,26 +142,70 @@ blockquote {
|
|||
background-color: rgba(128, 128, 128, .2);
|
||||
}
|
||||
|
||||
#menu>a>img {
|
||||
#menu>a>svg {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
#menu>a:hover>img {
|
||||
#menu>a:hover>svg {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
columns: 2;
|
||||
margin: 1.5em 0;
|
||||
columns: 3;
|
||||
column-fill: balance;
|
||||
}
|
||||
|
||||
.contacts p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.contacts img {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
#header-tilde,
|
||||
#header-bracket,
|
||||
#header-underscore {
|
||||
fill: var(--highlight-fg-color);
|
||||
}
|
||||
|
||||
#header-k,
|
||||
#header-o,
|
||||
#header-e,
|
||||
#header-h,
|
||||
#header-r {
|
||||
fill: var(--header-fg-color);
|
||||
}
|
||||
|
||||
#header-underscore {
|
||||
animation: fade 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
1
dist/term.svg
vendored
1
dist/term.svg
vendored
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 420 B |
2
dist/threads.svg
vendored
2
dist/threads.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#888785" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#eacb8b" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 779 B |
2
dist/twitter.svg
vendored
2
dist/twitter.svg
vendored
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 875 B After Width: | Height: | Size: 875 B |
2
index.md
2
index.md
|
|
@ -28,6 +28,8 @@ Many people want to learn and grow. Whenever I can I try to help those people by
|
|||
|
||||
 [@Koehr\@mstdn.io](https://mstdn.io/@Koehr/)
|
||||
|
||||
 [git.k0r.in](https://git.k0r.in/)
|
||||
|
||||
 [Norman Köhring](https://linkedin.com/in/norman-köhring-950448109/)
|
||||
|
||||
 [coffee_n_code](https://instagram.com/coffee_n_code/)
|
||||
|
|
|
|||
|
|
@ -30,14 +30,6 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header class="light:invert">
|
||||
Homepage of
|
||||
<div class=p-name>
|
||||
<span class=first-name>Norman</span>
|
||||
<span class=last-name>Köhring</span>
|
||||
</div>
|
||||
Code Artist
|
||||
</header>
|
||||
<main>
|
||||
<div id=intro>
|
||||
<p>
|
||||
|
|
@ -59,11 +51,19 @@
|
|||
<div id=menu>
|
||||
<a href="https://koehr.ing" target="_blank">
|
||||
Try the Interactive Homepage Experiment
|
||||
<img class="light:invert" src="/term.svg" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#content">
|
||||
Learn more about me and my work, here
|
||||
<img class="light:invert" src="/down.svg" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z" />
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="m16 10-4 4-4-4" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,48 @@
|
|||
@contents
|
||||
</div>
|
||||
</main>
|
||||
<div id="spacer"></div>
|
||||
<header id="header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 832.4 143.1">
|
||||
<path id="header-underscore"
|
||||
d="M832.4 131.1q0 5.5-3.1 8.6-3 3.4-8.2 3.3h-75.5q-5.2 0-8.2-3.3-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8 0-5.5 3.1-8.7 1.6-1.7 3.7-2.4 2.2-.8 4.5-.8h75.5q5.2 0 8.2 3.2 3 3.1 3 8.7z" />
|
||||
<path id="header-bracket"
|
||||
d="M731.9 81.4q0 6.7-6.5 10.7l-1 .6-74.3 39.2q-2.5 1.3-5.2 1.2-4.8 0-8.1-3.8-3.2-3.6-3.2-8.4 0-3.3 1.7-6 1.8-2.9 4.6-4.4l55.3-29.1-55.3-29q-2.8-1.6-4.6-4.3-1.7-2.7-1.7-6.2 0-4.7 3.2-8.4 3.3-4 8-3.7 2.7 0 5.3 1.2l74.4 39.2q3.3 1.7 5.3 4.7 2 2.8 2 6.5z" />
|
||||
<path id="header-r"
|
||||
d="M588.7 66.5q0 5-3.5 8.5-3.5 3.4-8.1 3.5-4.4 0-8.3-4.3-10-10.7-20.9-10.6-2.2 0-4.3.3-2.1.3-4 1-1.8.6-3.7 1.6-1.7 1-3.4 2.3-1.7 1.3-3.3 2.9-7.8 8.2-7.6 19.7V131q0 5.5-3.1 8.6-3 3.4-8.3 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V51.6q0-5.4 3-8.6 3-3.4 8.3-3.3 2 0 3.7.6 1.8.6 3.3 1.8 1.4 1 2.2 2.7 1 1.5 1.6 3.3 11.8-8.4 27-8.4 10.6 0 21 5 11.3 5.4 17.2 14.5 2.5 3.7 2.5 7.3z" />
|
||||
<path id="header-h"
|
||||
d="M483.9 131.1q0 5.5-3.1 8.6-3 3.4-8.3 3.3-5.2 0-8.2-3.3-3.2-3.1-3.1-8.6V84.8q0-4.6-1.5-8.2-1.4-3.5-4.4-6.9-2.1-2-4.3-3.4-2.2-1.4-4.7-2-2.4-.7-5.3-.7-4.3 0-7.8 1.5-3.3 1.5-6.4 4.6-5.9 6.3-5.8 15v46.4q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v33q1.5-1 3-1.6l3.2-1.2 3.4-1q1.6-.5 3.3-.8l3.5-.4 3.6-.2q4.4 0 8.5 1 4.1.7 7.9 2.4 3.8 1.6 7.3 4.1 3.5 2.5 6.6 5.8Q484 66 484 84.8z" />
|
||||
<path id="header-e"
|
||||
d="M387.5 111.1q0 1.2-.3 2.3-.1 1-.5 2l-.9 2q-6.6 12-19.4 19-12 6.6-25.4 6.6-20.8 0-35.8-14.6-15.9-15-15.9-37 0-22.1 15.9-37.1 15-14.6 35.8-14.6 3.9 0 7.8.7 4 .7 8 2.2 9.2 3.1 18.2 10 6 4.6 9.1 9.3 3.3 4.7 3.3 10 0 1.3-.3 2.5-.2 1.3-.7 2.4-1.5 3.4-5 5.3l-56.9 32.2q7.2 4.9 16.5 4.9 7.2 0 12.6-2.5 5.5-2.5 9.7-7.4l.7-1 .8-1 .9-1.3 1-1.5q3.3-4.2 7.4-5.1l1.8-.2q4.4 0 8 3.4 3.6 3.5 3.6 8.5zm-29.9-42.7q-7.2-4.8-16.6-4.8-6 0-11 2-4.9 1.8-9.3 6-4.5 4-6.7 9-2 4.8-2 10.8l.1 2.9z" />
|
||||
<path id="header-o"
|
||||
d="M286.8 91.4q0 4.2-.6 8.3-.6 4-1.8 7.7-1.1 3.8-2.9 7.4-1.7 3.5-4 6.9-2.4 3.3-5.2 6.1Q258 143 237.7 143T203 128q-14.3-15.2-14.3-36.6 0-21.5 14.3-36.6 14.4-15 34.7-15 4 0 7.8.5 3.9.7 7.5 1.9t7 3q3.3 1.9 6.4 4.3 3.2 2.4 5.9 5.4 14.4 15 14.5 36.5zm-22.6 0q0-2.4-.4-4.5-.2-2.2-.9-4.2-.6-2-1.5-3.9-1-2-2.2-3.7-1.2-1.7-2.8-3.4-4-4.2-8.6-6.1-4.5-2-10-2-11 0-18.7 8.2-7.8 8-7.8 19.6 0 11.4 7.8 19.7 7.8 8 18.6 8 5.6 0 10.1-1.9 4.6-2 8.6-6.1 4-4.3 5.8-9 2-4.9 2-10.7z" />
|
||||
<path id="header-k"
|
||||
d="M186.3 131q0 4.7-3.3 8.3-1.5 1.8-3.7 2.7-2 1.1-4.3 1.1-3.5 0-6.6-2L119.2 105v26q0 5.5-3 8.6-3.1 3.4-8.4 3.3l-2.2-.2q-1-.1-2.2-.5-1-.3-2-1-1-.6-1.8-1.6-1.7-1.6-2.4-3.8-.7-2.3-.7-4.8V11.9q0-5.5 3-8.6 3-3.4 8.3-3.3 5.2 0 8.2 3.3 3.2 3.1 3.2 8.6v65.9l49.2-36.1q3.2-2 6.6-2 4.7 0 8 3.7t3.3 8.4q-.2 6-5 9.6l-41 30 41 29.9q2.3 1.7 3.6 4.2 1.4 2.5 1.4 5.4z" />
|
||||
<path id="header-tilde"
|
||||
d="M73.1 91q0 2-.6 3.9T71 98.6q-3.2 5.7-8.9 8.5-5.6 2.8-12.9 2.8-8.8 0-18-7.8-2.4-2.3-4.5-3.7-2.1-1.5-3-1.7-1.5 0-2.1.3l-.8 1.3q-.3.7-.8 1.2l-1 1-.9.8q-2.7 2-6.4 2-1.7 0-3.2-.3-1.4-.3-3-1.1-1.5-.8-2.6-2.1-2.8-3.1-2.8-8v-1.3q0-.7.2-1.2l.2-1 .4-1 .4-1q.1-.6.5-1.1l.5-1q3.2-5.7 8.8-8.5 5.7-2.9 13-2.9 3.2 0 6.2 1 3 .9 6 2.7 2.9 1.6 5.7 4.2 5.2 4.6 7.6 5.4 1 0 1.6-.2l.7-.4q.3-.1.5-.4 3.6-5.6 9.2-5.6 5.7 0 8.8 3.5 2.8 3 2.8 8z" />
|
||||
</svg>
|
||||
Homepage of
|
||||
<div class=p-name>
|
||||
<span class=first-name>Norman</span>
|
||||
<span class=last-name>Köhring</span>
|
||||
</div>
|
||||
Code Artist
|
||||
</header>
|
||||
<link href=/extended.css rel=stylesheet>
|
||||
<script>
|
||||
const el = document.getElementById('header')
|
||||
const threshhold = 200
|
||||
let headerIsSmall = false
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.scrollY > threshhold && !headerIsSmall) {
|
||||
el.classList.add('small')
|
||||
headerIsSmall = true
|
||||
} else if (window.scrollY <= threshhold && headerIsSmall) {
|
||||
el.classList.remove('small')
|
||||
headerIsSmall = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 10-4 4-4-4"/></svg>
|
||||
|
Before Width: | Height: | Size: 503 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#888785"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 1034 1034" fill="#eacb8b"><path d="M539 176q-32 0-55 22t-25 55 21 58 56 27 58-20 27-56-20-59-57-27h-5zm-87 95L220 389q20 20 25 48l231-118q-19-20-24-48zm167 27q-13 25-38 38l183 184q13-25 39-38zm-142 22L342 585l40 40 143-280q-28-5-48-25zm104 16q-22 11-46 10l-8-1 21 132 56 9zm-426 34q-32 0-55 23t-25 55 21 58 56 27 59-21 27-56-21-59-56-27h-6zm90 68 1 18q-1 19-10 35l132 21 26-50zm225 36-26 51 311 49-1-17q1-19 10-36zm372 6q-32 1-55 23t-24 55 21 58 56 27 58-20 27-57-20-59-57-27h-6zm-606 13q-13 25-39 38l210 210 51-25zm-40 38q-21 11-44 10l-9-1 40 256q21-10 45-9l8 1zm364 22 48 311q21-10 44-9l10 1-46-294zm195 23-118 60 8 56 135-68q-20-20-25-48zm26 49L662 856q28 5 48 25l119-231q-28-5-48-25zm-475 29-68 134q28 5 48 25l60-119zm262 17L287 814q19 20 24 48l265-135zm-55 100-51 25 106 107q13-25 39-38zm-291 24q-32 0-55 23t-25 55 21 57 56 27 58-20 27-56-20-59-57-27h-5zm89 68q2 9 1 18-1 19-9 35l256 41-1-18q1-18 10-35zm335 0q-32 0-55 23t-24 55 20 58 56 27 59-21 27-56-20-59-57-27h-6z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
9
static/gitforge.svg
Normal file
9
static/gitforge.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212">
|
||||
<g transform="translate(6 6)" fill="none" stroke="#eacb8b" stroke-width="15">
|
||||
<path d="M58 168V70a50 50 0 0 1 50-50h20" stroke-width="25" />
|
||||
<path d="M58 168v-30a50 50 0 0 1 50-50h20" stroke-width="25" />
|
||||
<circle cx="142" cy="20" r="18" />
|
||||
<circle cx="142" cy="88" r="18" />
|
||||
<circle cx="58" cy="180" r="18" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 409 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M4 3c.1-1 .4-1.5 1-1.8.8-.4 2-.3 3.5.5.6.3.6.3 1.7.1a19 19 0 0 1 4.5 0c1 .2 1 .2 1.7-.1 2-1 3.6-1 4.1.1.3.6.4 2 .1 3.2 0 .7 0 .8.2 1.2 2.1 3 .6 8-3 10l-.6.2c-.6.2-.8.3-.6 1.3l.3 2.7c0 1.8 0 1.8-.2 2.2-.5.5-1 .5-1.5 0-.3-.3-.3-.5-.3-1.7 0-1.8-.2-3-.7-4-.5-1.3-.1-1.7 1.2-2a5.5 5.5 0 0 0 3.9-3c.7-1.6.8-3.8-.5-5-.4-.5-.4-1-.1-2.1l.2-1.3c0-.5 0-.5-.3-.5l-1.4.5-1 .5H16a30.3 30.3 0 0 0-7.4 0l-1-.5L6.3 3c-.4 0-.4.3 0 1.9.1 1 .3 1.2-.3 2a4.6 4.6 0 0 0-.7 4.3c.6 2 2.1 3.3 4.2 3.7 1.3.3 1.6.6 1.1 2-.3 1.2-.6 1.5-1.1 1.5-.8 0-1.2-.6-1-1.3.1-.3 0-.3-.6-.6a7.4 7.4 0 0 1-4.5-4.8c-.6-1.7-.3-4 .6-5.4.3-.5.3-.6.2-1.5C4 4.3 4 3.5 4 3Zm-.7 13a1 1 0 0 0-1.6 1 5.6 5.6 0 0 0 .8 1l.6.6c.3.4.7 1 1 2.1 0 .5.4.7.5.8l.7.3 1.2.2H8a1 1 0 0 0 2 0v-1c0-.6-.4-1-1-1a83.7 83.7 0 0 0-3.1-.1c-.3-1.2-.8-2-1.3-2.6l-.7-.7a30.5 30.5 0 0 1-.6-.7Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 910 B After Width: | Height: | Size: 910 B |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#888785" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#eacb8b" fill-rule="evenodd" d="M5.87.12C4.24.2 2.83.6 1.69 1.72A5.94 5.94 0 0 0 .1 5.9c-.05 1-.32 8.6.45 10.59a5.04 5.04 0 0 0 2.91 2.9 7.3 7.3 0 0 0 2.42.46c8.86.4 12.15.19 13.53-3.36.25-.63.42-1.35.46-2.41.4-8.88-.06-10.8-1.6-12.35C17.02.5 15.58-.32 5.86.13m.08 17.94a5.6 5.6 0 0 1-1.85-.34c-.88-.35-1.54-1-1.89-1.89-.59-1.51-.39-8.7-.34-9.86.05-1.14.29-2.18 1.09-2.99 1-.99 2.28-1.48 11.03-1.08 1.15.05 2.19.28 3 1.08.99 1 1.48 2.29 1.08 11.01-.04.97-.2 1.5-.34 1.84-.9 2.31-2.97 2.63-11.78 2.23M14.1 4.69a1.2 1.2 0 1 0 2.39 0 1.2 1.2 0 0 0-2.39 0m-9.23 5.3a5.1 5.1 0 1 0 10.2-.01 5.1 5.1 0 0 0-10.2 0m1.8 0a3.31 3.31 0 1 1 6.62.02 3.31 3.31 0 0 1-6.62-.01"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 742 B After Width: | Height: | Size: 742 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#888785" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1v-8Zm6 9h1c.6 0 1-.4 1-1v-4.5c0-1.5 3-2.5 3-.5v5c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10c0-.6-.4-1-1-1h-1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1Z"/><path fill="#eacb8b" fill-rule="evenodd" d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1h16Z" clip-rule="evenodd"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#888785" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#eacb8b" stroke-width="2" d="m21 8-3.6 2c-2 1-3 1.6-4 1.8a7 7 0 0 1-2.8 0c-1-.2-2-.7-4-1.8L3 8m3.2 11h11.6c1.1 0 1.7 0 2.1-.2.4-.2.7-.5.9-.9.2-.4.2-1 .2-2.1V8.2c0-1.1 0-1.7-.2-2.1a2 2 0 0 0-.9-.9c-.4-.2-1-.2-2.1-.2H6.2c-1.1 0-1.7 0-2.1.2a2 2 0 0 0-.9.9C3 6.5 3 7 3 8.2v7.6c0 1.1 0 1.7.2 2.1.2.4.5.7.9.9.4.2 1 .2 2.1.2Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 414 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#888785" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#888785" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268 289 263 223"><path fill="#eacb8b" d="M-6 393c-4-24-30-35-50-22h-3c-16-9-32-15-49-17l-18-3 15-40 33 7c2 1 4 2 4 5 3 14 16 22 30 21a27 27 0 1 0-26-42c-1 2-2 2-4 1l-27-6-20-5-1 3-20 54c0 2-1 2-2 2a151 151 0 0 0-69 19h-5c-15-10-36-5-45 11l-5 13v8l3 8c1 5 5 9 9 13l1 2c-1 16 3 30 12 42 11 15 25 24 41 31a162 162 0 0 0 140-4c14-8 27-19 35-33 7-11 9-23 8-35l1-2c7-6 11-13 12-22h1v-9h-1zm-41-88c6 0 11 5 11 12 0 6-5 12-11 12-7 0-12-6-12-12 0-7 5-12 12-12zm-202 102c-4-6-4-14 1-20 5-5 12-8 18-5-8 7-14 15-19 25zm204 53c-9 12-21 20-35 26a149 149 0 0 1-124-6c-10-5-19-12-26-21a44 44 0 0 1 1-56c10-12 22-19 36-25a149 149 0 0 1 125 6c9 5 18 12 25 21 13 18 12 38-2 55zm22-53-9-13-11-12c6-3 14 0 19 6 4 5 4 13 1 19z"/><path fill="#eacb8b" d="m-102 458-11 6c-12 5-25 5-37 3-7-1-14-3-19-8-4-4-9-4-12 0-3 3-3 8 1 11l11 7c10 6 21 7 32 8l20-3c10-2 18-6 25-12 3-3 4-8 1-11s-8-3-11-1zm5-61c-12-1-22 9-22 21a21 21 0 0 0 43 0c0-11-9-21-21-21zm-55 21a21 21 0 1 0-22 21c12 1 22-9 22-21z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
110
static/style.css
110
static/style.css
|
|
@ -1,6 +1,11 @@
|
|||
:root {
|
||||
--page-bg-color: #101626;
|
||||
--page-fg-color: #fff8e7;
|
||||
--header-bg-color: #1b1c1d;
|
||||
--header-fg-color: #a3bd8d;
|
||||
--header-height: 192px;
|
||||
--header-multiplier: .25;
|
||||
--page-bg-color: #232425;
|
||||
--page-fg-color: #7e9fbe;
|
||||
--highlight-fg-color: #eacb8b;
|
||||
--emboss-color: #000;
|
||||
}
|
||||
|
||||
|
|
@ -16,25 +21,27 @@
|
|||
:root {
|
||||
--page-bg-color: #efe9d9;
|
||||
--page-fg-color: #261b00;
|
||||
--header-fg-color: #143373;
|
||||
--header-bg-color: #a49570;
|
||||
--emboss-color: #fff;
|
||||
}
|
||||
|
||||
.light\:invert {
|
||||
.light\:invert,
|
||||
.contacts img {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
transition: color, background-color 200ms ease;
|
||||
transition: color 300ms ease, background-color 300ms ease, fill 500ms ease;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
width: 960px;
|
||||
max-width: 98vw;
|
||||
margin: auto;
|
||||
background: var(--page-bg-color);
|
||||
color: var(--page-fg-color);
|
||||
|
|
@ -43,10 +50,41 @@ body {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body>#spacer,
|
||||
body>header {
|
||||
height: 420px;
|
||||
background: url(/header.jpg) center no-repeat;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
body>#spacer {
|
||||
height: calc(var(--header-height) * var(--header-multiplier));
|
||||
}
|
||||
|
||||
body>header {
|
||||
height: var(--header-height);
|
||||
color: transparent;
|
||||
transition: transform .3s ease-in-out;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
body>header.small {
|
||||
transform: scale(var(--header-multiplier));
|
||||
}
|
||||
|
||||
body>header>svg {
|
||||
display: block;
|
||||
width: 960px;
|
||||
max-width: 98vw;
|
||||
margin: .5em auto;
|
||||
color: var(--header-fg-color);
|
||||
}
|
||||
|
||||
body>main {
|
||||
width: 960px;
|
||||
margin: var(--header-height) auto 4em;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -57,15 +95,17 @@ a {
|
|||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 420px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
#content>h1 {
|
||||
margin: 2em 0 .25em;
|
||||
margin: 0 0 .25em;
|
||||
padding-top: 2em;
|
||||
font-size: 2rem;
|
||||
font-variant: small-caps;
|
||||
text-shadow: 1px 1px 0 var(--emboss-color);
|
||||
color: var(--header-fg-color);
|
||||
}
|
||||
|
||||
#menu {
|
||||
|
|
@ -102,26 +142,70 @@ blockquote {
|
|||
background-color: rgba(128, 128, 128, .2);
|
||||
}
|
||||
|
||||
#menu>a>img {
|
||||
#menu>a>svg {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
opacity: .3;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
#menu>a:hover>img {
|
||||
#menu>a:hover>svg {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
columns: 2;
|
||||
margin: 1.5em 0;
|
||||
columns: 3;
|
||||
column-fill: balance;
|
||||
}
|
||||
|
||||
.contacts p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.contacts img {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
#header-tilde,
|
||||
#header-bracket,
|
||||
#header-underscore {
|
||||
fill: var(--highlight-fg-color);
|
||||
}
|
||||
|
||||
#header-k,
|
||||
#header-o,
|
||||
#header-e,
|
||||
#header-h,
|
||||
#header-r {
|
||||
fill: var(--header-fg-color);
|
||||
}
|
||||
|
||||
#header-underscore {
|
||||
animation: fade 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#fff8e7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 15h-5m-5-5 3 2.5L7 15m-4 .8V8.2c0-1.1 0-1.7.2-2.1.2-.4.5-.7.9-.9C4.5 5 5 5 6.2 5h11.6c1.1 0 1.7 0 2.1.2.4.2.7.5.9.9.2.4.2 1 .2 2.1v7.6c0 1.1 0 1.7-.2 2.1a2 2 0 0 1-.9.9c-.4.2-1 .2-2.1.2H6.2c-1.1 0-1.7 0-2.1-.2a2 2 0 0 1-.9-.9c-.2-.4-.2-1-.2-2.1Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 420 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#888785" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000"><path fill="#eacb8b" d="M447 1000h-1c-149-1-263-50-341-146A560 560 0 0 1 0 500c1-149 37-268 106-354C183 50 297 1 446 0h1c114 1 210 30 284 87 70 54 119 131 147 228l-85 24C747 174 630 90 447 88c-122 1-213 39-273 114-56 69-84 169-85 298 1 129 29 229 85 299 60 74 152 112 273 113 109-1 181-27 241-85 69-68 68-150 46-200-13-30-37-55-68-73-8 56-26 102-54 136-37 46-89 71-155 75-50 2-99-9-136-34a156 156 0 0 1-18-252c37-31 89-50 150-53 45-3 87-1 125 5-5-30-15-55-31-73-21-24-54-37-98-37h-1c-35 0-83 10-114 55l-73-49c41-61 107-94 187-94h2c133 1 212 82 220 225l13 5c62 30 108 74 132 128 33 76 36 200-65 299a405 405 0 0 1-303 110zm42-487-31 1c-77 4-125 39-122 89 3 52 61 77 116 74 51-3 118-23 129-155-28-6-59-9-92-9z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 779 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#888785" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#eacb8b" d="M19.8 4a4.8 4.8 0 0 0 1.6-.8A1 1 0 0 1 23 4c0 1-.1 2-.4 2.7-.3.7-.7 1.2-1.1 1.7-.2 3.4-1.2 6-2.7 8a12.2 12.2 0 0 1-5.7 4.2c-2.2.7-4.5.9-6.5.6-2-.2-4-.9-5.2-2a1 1 0 0 1 .7-1.7 7 7 0 0 0 3.6-.5l-.6-.4c-1-.6-1.7-1.5-2-2.2a1 1 0 0 1 .3-1.2 5 5 0 0 1-1.9-3.7 1 1 0 0 1 .7-1L2 7.7a9.2 9.2 0 0 1 0-4 1 1 0 0 1 2-.1c1 1.9 3 3 4.9 3.7l2.3.6a5 5 0 0 1 1-3c.6-1 1.6-1.7 2.6-2a6 6 0 0 1 5 1.1Zm-9 5.8L8 9.1a13 13 0 0 1-4.3-2.5l.1.6c.3 1.1.7 1.7 1 2 .5.1.7.7.5 1.1-.2.7-.8.7-1.4.6.5.7 1.3 1.4 2.7 1.6a1 1 0 0 1 0 2l-.9.2c.2 0 .3.2.5.3.7.5 1.4.7 2 .5a1 1 0 0 1 .8 1.8A10.1 10.1 0 0 1 5.8 19l1 .1c1.8.3 3.8.1 5.6-.5a9.9 9.9 0 0 0 4.8-3.5 12 12 0 0 0 2.3-7.2c0-.3.1-.5.3-.7.4-.5.8-1 1-1.6l-1.1.3a1 1 0 0 1-1-.3 4 4 0 0 0-3.4-1c-.6.2-1.2.6-1.6 1.2-.4.6-.7 1.6-.7 3.1 0 .3-.1.6-.3.7-.5.5-1.4.2-2 .1Z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 875 B After Width: | Height: | Size: 875 B |
Loading…
Reference in a new issue