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

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

@ -367,7 +367,8 @@ article, so I leave you here. Sorry.</p>
</div>
Code Artist
</header>
<menu id="main-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>
@ -377,6 +378,7 @@ article, so I leave you here. Sorry.</p>
<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>

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

@ -105,7 +105,8 @@ c2 b4 c2 b5 c2 b6 c2 b7 c2 b8 c2 b9 c2 ba c2 bb |................|
</div>
Code Artist
</header>
<menu id="main-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>
@ -115,6 +116,7 @@ c2 b4 c2 b5 c2 b6 c2 b7 c2 b8 c2 b9 c2 ba c2 bb |................|
<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>

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

@ -136,7 +136,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -146,6 +147,7 @@
<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>

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

@ -179,7 +179,8 @@ cd writefreely-arm
</div>
Code Artist
</header>
<menu id="main-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>
@ -189,6 +190,7 @@ cd writefreely-arm
<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>

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

@ -91,7 +91,8 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
</div>
Code Artist
</header>
<menu id="main-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>
@ -101,6 +102,7 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
<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>

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

@ -656,7 +656,8 @@ requestAnimationFrame(update)
</div>
Code Artist
</header>
<menu id="main-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>
@ -666,6 +667,7 @@ requestAnimationFrame(update)
<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>

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

@ -259,7 +259,8 @@ defineComponent({
</div>
Code Artist
</header>
<menu id="main-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>
@ -269,6 +270,7 @@ defineComponent({
<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>

4
dist/blog/index.html vendored
View file

@ -138,7 +138,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -148,6 +149,7 @@
<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>

4
dist/cv/index.html vendored
View file

@ -85,7 +85,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -95,6 +96,7 @@
<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;
}
}

6
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,7 +135,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -144,6 +145,7 @@
<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')

4
dist/now/index.html vendored
View file

@ -87,7 +87,8 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
</div>
Code Artist
</header>
<menu id="main-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>
@ -97,6 +98,7 @@ by <a href="https://openlibrary.org/authors/OL7564045A/Camille_Fournier">Camille
<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;

4
dist/projects/index.html vendored
View file

@ -85,7 +85,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -95,6 +96,7 @@
<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>

4
dist/setup/index.html vendored
View file

@ -85,7 +85,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -95,6 +96,7 @@
<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>

4
dist/stack/index.html vendored
View file

@ -89,7 +89,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -99,6 +100,7 @@
<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%;
}
}

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

@ -67,7 +67,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -77,6 +78,7 @@
<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>

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

@ -66,7 +66,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -76,6 +77,7 @@
<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>

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

@ -66,7 +66,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -76,6 +77,7 @@
<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>

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

@ -66,7 +66,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -76,6 +77,7 @@
<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>

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

@ -97,7 +97,8 @@ export default defineConfig({
</div>
Code Artist
</header>
<menu id="main-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>
@ -107,6 +108,7 @@ export default defineConfig({
<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>

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

@ -69,7 +69,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -79,6 +80,7 @@
<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>

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

@ -70,7 +70,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -80,6 +81,7 @@
<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>

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

@ -87,7 +87,8 @@ expect(thatFunction).toHaveBeenCalled()
</div>
Code Artist
</header>
<menu id="main-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>
@ -97,6 +98,7 @@ expect(thatFunction).toHaveBeenCalled()
<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>

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

@ -67,7 +67,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -77,6 +78,7 @@
<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>

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

@ -74,7 +74,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -84,6 +85,7 @@
<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>

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

@ -71,7 +71,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -81,6 +82,7 @@
<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>

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

@ -67,7 +67,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -77,6 +78,7 @@
<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>

4
dist/til/index.html vendored
View file

@ -150,7 +150,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -160,6 +161,7 @@
<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>

4
layouts/blog/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

4
layouts/cv/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

6
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,7 +107,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -116,6 +117,7 @@
<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')

4
layouts/now/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

4
layouts/projects/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

4
layouts/setup/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

4
layouts/stack/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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>

4
layouts/til/index.html
View file

@ -65,7 +65,8 @@
</div>
Code Artist
</header>
<menu id="main-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>
@ -75,6 +76,7 @@
<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%;
}
}