n/koehr.ing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

responsive layout

Browse source
This commit is contained in:
Norman Köhring 2024-05-16 19:28:05 +02:00
parent ba7e35a641
commit 5913f62936
41 changed files with 530 additions and 408 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
dist/blog/2016-12-04-the-price-to-crack-your-password.html vendored
View file

@ -367,16 +367,18 @@ article, so I leave you here. Sorry.</p>
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2017-04-09-the-magic-0xc2.html vendored
View file

@ -105,16 +105,18 @@ c2 b4 c2 b5 c2 b6 c2 b7 c2 b8 c2 b9 c2 ba c2 bb |................|
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html vendored
View file

@ -136,16 +136,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2019-01-10-running-write-freely-on-arm.html vendored
View file

@ -179,16 +179,18 @@ cd writefreely-arm
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html vendored
View file

@ -91,16 +91,18 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2019-05-03-freddy-vs-json.html vendored
View file

@ -656,16 +656,18 @@ requestAnimationFrame(update)
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html vendored
View file

@ -259,16 +259,18 @@ defineComponent({
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/blog/index.html vendored
View file

@ -138,16 +138,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/cv/index.html vendored
View file

@ -85,16 +85,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li class="active"><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li class="active"><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

35
dist/extended.css vendored
View file

@ -2,28 +2,30 @@
position: fixed;
top: var(--header-height);
width: 100vw;
background-color: var(--menu-bg-color);
transition: top .3s ease-in-out, background-color 1s ease-in;
}
#main-menu>menu {
width: 960px;
max-width: 98%;
height: 1.2rem;
margin: 0;
margin: 0 auto 0;
padding: 0;
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
gap: 4rem;
list-style: circle;
background: var(--menu-bg-color);
transition: all .3s ease-in-out;
}
#main-menu > li {
padding: 0;
}
body>header.small + #main-menu {
top: calc(var(--header-height-small) + 2rem);
height: 14rem;
width: 6rem;
flex-flow: column nowrap;
gap: .5rem;
align-items: stretch;
padding: 0 1rem;
top: var(--header-height-small);
background-color: var(--header-bg-color);
}
body>header.small + #main-menu>menu {
padding: .5rem 0;
}
pre {
background: var(--emboss-color);
@ -33,3 +35,12 @@ li.active>a {
color: var(--highlight-fg-color);
font-weight: bold;
}
@media (max-width: 480px) {
#main-menu>menu {
height: 2.4rem;
margin-left: 1.5rem;
flex-flow: column wrap;
align-items: flex-start;
}
}

22
dist/index.html vendored
View file

@ -54,7 +54,7 @@
<a title="Contact me" href="#contact">Get in touch</a>!
</p>
<div id=menu>
<div id=cta>
<a href="#content">
Learn more about me and my work, here
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@ -135,15 +135,17 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<script>
const el = document.getElementById('header')

22
dist/now/index.html vendored
View file

@ -87,16 +87,18 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li class="active"><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li class="active"><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

2
dist/posts.css vendored
View file

@ -1,5 +1,5 @@
main.posts {
margin: calc(var(--header-height-small) + 2rem) auto 4rem;
margin: calc(var(--header-height-small) + 4rem) auto 4rem;
}
main.posts h2 {
margin: 1.5em 0 0 0;

22
dist/projects/index.html vendored
View file

@ -85,16 +85,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/setup/index.html vendored
View file

@ -85,16 +85,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/stack/index.html vendored
View file

@ -89,16 +89,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

47
dist/style.css vendored
View file

@ -2,8 +2,8 @@
--header-bg-color: #1b1c1d;
--header-fg-color: #a3bd8d;
--header-height: 192px;
--header-multiplier: .25;
--header-height-small: calc(var(--header-height)*var(--header-multiplier));
--header-height-small: calc(var(--header-height) * .25);
--header-height-multiplier: .25;
--page-bg-color: #232425;
--page-fg-color: #7e9fbe;
--menu-bg-color: #000;
@ -74,7 +74,7 @@ body>header {
}
body>header.small {
transform: scale(var(--header-multiplier));
transform: scale(var(--header-height-multiplier));
}
body>header>svg {
@ -95,13 +95,23 @@ a {
color: var(--page-fg-color);
}
blockquote {
margin: 0;
padding: .5em .5em .5em 1em;
background-color: rgba(128, 128, 128, .1);
border-radius: 12px;
}
#intro {
display: flex;
flex-flow: column nowrap;
height: calc(100vh - var(--header-height));
min-height: calc(100vh - var(--header-height));
margin: 2rem 0;
}
#content {
padding-top: 2rem;
}
#content>h1,
main.posts > header > h1 {
margin: 0 0 .25em;
@ -114,21 +124,16 @@ main.posts > header > h1 {
padding-top: 2em;
}
#menu {
#cta {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
blockquote {
margin: 0;
padding: .5em .5em .5em 1em;
background-color: rgba(128, 128, 128, .1);
border-radius: 12px;
}
#menu>a {
#cta>a {
width: 450px;
padding: 2rem .5rem 0;
display: flex;
flex-flow: column nowrap;
@ -144,18 +149,18 @@ blockquote {
border-radius: 12px;
}
#menu>a:hover {
#cta>a:hover {
background-color: rgba(128, 128, 128, .2);
}
#menu>a>svg {
#cta>a>svg {
display: block;
max-width: 200px;
opacity: .3;
transition: opacity .3s ease;
}
#menu>a:hover>svg {
#cta>a:hover>svg {
opacity: .8;
}
@ -215,3 +220,13 @@ blockquote {
opacity: 1.0;
}
}
@media (max-width: 980px) {
:root {
--header-height: calc(100vw * 0.17);
--header-height-small: 48px;
}
#cta>a {
width: 100%;
}
}

22
dist/til/2021-08-31.html vendored
View file

@ -67,16 +67,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2021-09-03.html vendored
View file

@ -66,16 +66,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2021-09-04.html vendored
View file

@ -66,16 +66,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2021-09-05.html vendored
View file

@ -66,16 +66,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2022-02-22.html vendored
View file

@ -97,16 +97,18 @@ export default defineConfig({
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2022-03-22.html vendored
View file

@ -69,16 +69,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2022-03-28.html vendored
View file

@ -70,16 +70,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2022-04-25.html vendored
View file

@ -87,16 +87,18 @@ expect(thatFunction).toHaveBeenCalled()
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2022-06-15.html vendored
View file

@ -67,16 +67,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2024-05-11.html vendored
View file

@ -74,16 +74,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2024-05-12.html vendored
View file

@ -71,16 +71,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/2024-05-13.html vendored
View file

@ -67,16 +67,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
dist/til/index.html vendored
View file

@ -150,16 +150,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/blog/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/cv/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li class="active"><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li class="active"><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/index.html
View file

@ -54,7 +54,7 @@
<a title="Contact me" href="#contact">Get in touch</a>!
</p>
<div id=menu>
<div id=cta>
<a href="#content">
Learn more about me and my work, here
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@ -107,15 +107,17 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<script>
const el = document.getElementById('header')

22
layouts/now/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li class="active"><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li class="active"><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/projects/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/setup/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li class="active"><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/stack/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li class="active"><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

22
layouts/til/index.html
View file

@ -65,16 +65,18 @@
</div>
Code Artist
</header>
<menu id="main-menu">
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
<div id="main-menu">
<menu>
<li><a href="/">home</a></li>
<li><a title="What I do these days" href="/now">/now</a></li>
<li class="active"><a title="Today I Learned" href="/til">/til</a></li>
<li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet>
<link href=/posts.css rel=stylesheet>
<script async data-goatcounter=https://koehr.goatcounter.com/count src=//gc.zgo.at/count.js></script>

35
static/extended.css
View file

@ -2,28 +2,30 @@
position: fixed;
top: var(--header-height);
width: 100vw;
background-color: var(--menu-bg-color);
transition: top .3s ease-in-out, background-color 1s ease-in;
}
#main-menu>menu {
width: 960px;
max-width: 98%;
height: 1.2rem;
margin: 0;
margin: 0 auto 0;
padding: 0;
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
gap: 4rem;
list-style: circle;
background: var(--menu-bg-color);
transition: all .3s ease-in-out;
}
#main-menu > li {
padding: 0;
}
body>header.small + #main-menu {
top: calc(var(--header-height-small) + 2rem);
height: 14rem;
width: 6rem;
flex-flow: column nowrap;
gap: .5rem;
align-items: stretch;
padding: 0 1rem;
top: var(--header-height-small);
background-color: var(--header-bg-color);
}
body>header.small + #main-menu>menu {
padding: .5rem 0;
}
pre {
background: var(--emboss-color);
@ -33,3 +35,12 @@ li.active>a {
color: var(--highlight-fg-color);
font-weight: bold;
}
@media (max-width: 480px) {
#main-menu>menu {
height: 2.4rem;
margin-left: 1.5rem;
flex-flow: column wrap;
align-items: flex-start;
}
}

2
static/posts.css
View file

@ -1,5 +1,5 @@
main.posts {
margin: calc(var(--header-height-small) + 2rem) auto 4rem;
margin: calc(var(--header-height-small) + 4rem) auto 4rem;
}
main.posts h2 {
margin: 1.5em 0 0 0;

47
static/style.css
View file

@ -2,8 +2,8 @@
--header-bg-color: #1b1c1d;
--header-fg-color: #a3bd8d;
--header-height: 192px;
--header-multiplier: .25;
--header-height-small: calc(var(--header-height)*var(--header-multiplier));
--header-height-small: calc(var(--header-height) * .25);
--header-height-multiplier: .25;
--page-bg-color: #232425;
--page-fg-color: #7e9fbe;
--menu-bg-color: #000;
@ -74,7 +74,7 @@ body>header {
}
body>header.small {
transform: scale(var(--header-multiplier));
transform: scale(var(--header-height-multiplier));
}
body>header>svg {
@ -95,13 +95,23 @@ a {
color: var(--page-fg-color);
}
blockquote {
margin: 0;
padding: .5em .5em .5em 1em;
background-color: rgba(128, 128, 128, .1);
border-radius: 12px;
}
#intro {
display: flex;
flex-flow: column nowrap;
height: calc(100vh - var(--header-height));
min-height: calc(100vh - var(--header-height));
margin: 2rem 0;
}
#content {
padding-top: 2rem;
}
#content>h1,
main.posts > header > h1 {
margin: 0 0 .25em;
@ -114,21 +124,16 @@ main.posts > header > h1 {
padding-top: 2em;
}
#menu {
#cta {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
blockquote {
margin: 0;
padding: .5em .5em .5em 1em;
background-color: rgba(128, 128, 128, .1);
border-radius: 12px;
}
#menu>a {
#cta>a {
width: 450px;
padding: 2rem .5rem 0;
display: flex;
flex-flow: column nowrap;
@ -144,18 +149,18 @@ blockquote {
border-radius: 12px;
}
#menu>a:hover {
#cta>a:hover {
background-color: rgba(128, 128, 128, .2);
}
#menu>a>svg {
#cta>a>svg {
display: block;
max-width: 200px;
opacity: .3;
transition: opacity .3s ease;
}
#menu>a:hover>svg {
#cta>a:hover>svg {
opacity: .8;
}
@ -215,3 +220,13 @@ blockquote {
opacity: 1.0;
}
}
@media (max-width: 980px) {
:root {
--header-height: calc(100vw * 0.17);
--header-height-small: 48px;
}
#cta>a {
width: 100%;
}
}