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

responsive layout

Browse Source
main
Norman Köhring 4 months ago
parent ba7e35a641
commit 5913f62936
41 changed files with 530 additions and 408 deletions
Show Stats Download Patch File Download Diff File

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

@ -367,16 +367,18 @@ article, so I leave you here. Sorry.</p>
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

@ -105,16 +105,18 @@ c2 b4 c2 b5 c2 b6 c2 b7 c2 b8 c2 b9 c2 ba c2 bb |................|
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

@ -136,16 +136,18 @@
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

@ -179,16 +179,18 @@ cd writefreely-arm
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

@ -91,16 +91,18 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

@ -656,16 +656,18 @@ requestAnimationFrame(update)
</div> </div>
Code Artist Code Artist
</header> </header>
<menu id="main-menu"> <div id="main-menu">
<li><a href="/">home</a></li> <menu>
<li><a title="What I do these days" href="/now">/now</a></li> <li><a href="/">home</a></li>
<li><a title="Today I Learned" href="/til">/til</a></li> <li><a title="What I do these days" href="/now">/now</a></li>
<li><a title="My projects" href="/projects">/projects</a></li> <li><a title="Today I Learned" href="/til">/til</a></li>
<li class="active"><a title="Weblog" href="/blog">/blog</a></li> <li><a title="My projects" href="/projects">/projects</a></li>
<li><a title="CV / Resume" href="/cv">/cv</a></li> <li class="active"><a title="Weblog" href="/blog">/blog</a></li>
<li><a title="Tools I use" href="/stack">/stack</a></li> <li><a title="CV / Resume" href="/cv">/cv</a></li>
<li><a title="Hardware I use" href="/setup">/setup</a></li> <li><a title="Tools I use" href="/stack">/stack</a></li>
</menu> <li><a title="Hardware I use" href="/setup">/setup</a></li>
</menu>
</div>
<link href=/extended.css rel=stylesheet> <link href=/extended.css rel=stylesheet>
<link href=/posts.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> <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
Unescape Escape View File

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

22
dist/blog/index.html vendored
Unescape Escape View File

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

22
dist/cv/index.html vendored
Unescape Escape View File

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

35
dist/extended.css vendored
Unescape Escape View File

@ -2,28 +2,30 @@
position: fixed; position: fixed;
top: var(--header-height); top: var(--header-height);
width: 100vw; 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; height: 1.2rem;
margin: 0; margin: 0 auto 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
gap: 4rem;
list-style: circle; list-style: circle;
background: var(--menu-bg-color);
transition: all .3s ease-in-out;
} }
#main-menu > li { #main-menu > li {
padding: 0; padding: 0;
} }
body>header.small + #main-menu { body>header.small + #main-menu {
top: calc(var(--header-height-small) + 2rem); top: var(--header-height-small);
height: 14rem; background-color: var(--header-bg-color);
width: 6rem; }
flex-flow: column nowrap; body>header.small + #main-menu>menu {
gap: .5rem; padding: .5rem 0;
align-items: stretch;
padding: 0 1rem;
} }
pre { pre {
background: var(--emboss-color); background: var(--emboss-color);
@ -33,3 +35,12 @@ li.active>a {
color: var(--highlight-fg-color); color: var(--highlight-fg-color);
font-weight: bold; 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
Unescape Escape View File

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

22
dist/now/index.html vendored
Unescape Escape View File

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

2
dist/posts.css vendored
Unescape Escape View File

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

22
dist/projects/index.html vendored
Unescape Escape View File

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

22
dist/setup/index.html vendored
Unescape Escape View File

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

22
dist/stack/index.html vendored
Unescape Escape View File

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

47
dist/style.css vendored
Unescape Escape View File

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

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

22
dist/til/2021-09-03.html vendored
Unescape Escape View File

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

22
dist/til/2021-09-04.html vendored
Unescape Escape View File

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

22
dist/til/2021-09-05.html vendored
Unescape Escape View File

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

22
dist/til/2022-02-22.html vendored
Unescape Escape View File

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

22
dist/til/2022-03-22.html vendored
Unescape Escape View File

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

22
dist/til/2022-03-28.html vendored
Unescape Escape View File

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

22
dist/til/2022-04-25.html vendored
Unescape Escape View File

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

22
dist/til/2022-06-15.html vendored
Unescape Escape View File

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

22
dist/til/2024-05-11.html vendored
Unescape Escape View File

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

22
dist/til/2024-05-12.html vendored
Unescape Escape View File

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

22
dist/til/2024-05-13.html vendored
Unescape Escape View File

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

22
dist/til/index.html vendored
Unescape Escape View File

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

22
layouts/blog/index.html
Unescape Escape View File

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

22
layouts/cv/index.html
Unescape Escape View File

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

22
layouts/index.html
Unescape Escape View File

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

22
layouts/now/index.html
Unescape Escape View File

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

22
layouts/projects/index.html
Unescape Escape View File

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

22
layouts/setup/index.html
Unescape Escape View File

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

22
layouts/stack/index.html
Unescape Escape View File

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

22
layouts/til/index.html
Unescape Escape View File

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

35
static/extended.css
Unescape Escape View File

@ -2,28 +2,30 @@
position: fixed; position: fixed;
top: var(--header-height); top: var(--header-height);
width: 100vw; 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; height: 1.2rem;
margin: 0; margin: 0 auto 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
gap: 4rem;
list-style: circle; list-style: circle;
background: var(--menu-bg-color);
transition: all .3s ease-in-out;
} }
#main-menu > li { #main-menu > li {
padding: 0; padding: 0;
} }
body>header.small + #main-menu { body>header.small + #main-menu {
top: calc(var(--header-height-small) + 2rem); top: var(--header-height-small);
height: 14rem; background-color: var(--header-bg-color);
width: 6rem; }
flex-flow: column nowrap; body>header.small + #main-menu>menu {
gap: .5rem; padding: .5rem 0;
align-items: stretch;
padding: 0 1rem;
} }
pre { pre {
background: var(--emboss-color); background: var(--emboss-color);
@ -33,3 +35,12 @@ li.active>a {
color: var(--highlight-fg-color); color: var(--highlight-fg-color);
font-weight: bold; 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
Unescape Escape View File

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

47
static/style.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save