diff --git a/dist/blog/2016-12-04-the-price-to-crack-your-password.html b/dist/blog/2016-12-04-the-price-to-crack-your-password.html
index 7fe992f..99fa6d8 100644
--- a/dist/blog/2016-12-04-the-price-to-crack-your-password.html
+++ b/dist/blog/2016-12-04-the-price-to-crack-your-password.html
@@ -367,16 +367,18 @@ article, so I leave you here. Sorry.
Code Artist
-
+
diff --git a/dist/blog/2017-04-09-the-magic-0xc2.html b/dist/blog/2017-04-09-the-magic-0xc2.html
index 2dee389..42cba72 100644
--- a/dist/blog/2017-04-09-the-magic-0xc2.html
+++ b/dist/blog/2017-04-09-the-magic-0xc2.html
@@ -105,16 +105,18 @@ c2 b4 c2 b5 c2 b6 c2 b7 c2 b8 c2 b9 c2 ba c2 bb |................|
Code Artist
-
+
diff --git a/dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html b/dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html
index cf86248..21da27e 100644
--- a/dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html
+++ b/dist/blog/2017-08-17-vuejs-reactivity-from-scratch.html
@@ -136,16 +136,18 @@
Code Artist
-
+
diff --git a/dist/blog/2019-01-10-running-write-freely-on-arm.html b/dist/blog/2019-01-10-running-write-freely-on-arm.html
index e51e4e5..b6cf090 100644
--- a/dist/blog/2019-01-10-running-write-freely-on-arm.html
+++ b/dist/blog/2019-01-10-running-write-freely-on-arm.html
@@ -179,16 +179,18 @@ cd writefreely-arm
Code Artist
-
+
diff --git a/dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html b/dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html
index d62602b..38f01c2 100644
--- a/dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html
+++ b/dist/blog/2019-01-10-use-openbsds-spleen-bitmap-font-in-linux.html
@@ -91,16 +91,18 @@ setfont ${SPLEENDIR}/spleen-16x32.psfu
Code Artist
-
+
diff --git a/dist/blog/2019-05-03-freddy-vs-json.html b/dist/blog/2019-05-03-freddy-vs-json.html
index 92509bf..3697b58 100644
--- a/dist/blog/2019-05-03-freddy-vs-json.html
+++ b/dist/blog/2019-05-03-freddy-vs-json.html
@@ -656,16 +656,18 @@ requestAnimationFrame(update)
Code Artist
-
+
diff --git a/dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html b/dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html
index 53ddf43..d557da1 100644
--- a/dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html
+++ b/dist/blog/2020-06-29-a-store-implementation-for-vue3-composition-api.html
@@ -259,16 +259,18 @@ defineComponent({
Code Artist
-
+
diff --git a/dist/blog/index.html b/dist/blog/index.html
index 28255c9..9d846cb 100644
--- a/dist/blog/index.html
+++ b/dist/blog/index.html
@@ -138,16 +138,18 @@
Code Artist
-
+
diff --git a/dist/cv/index.html b/dist/cv/index.html
index b648c2f..04cb67c 100644
--- a/dist/cv/index.html
+++ b/dist/cv/index.html
@@ -85,16 +85,18 @@
Code Artist
-
+
diff --git a/dist/extended.css b/dist/extended.css
index 81decc1..b8730b4 100644
--- a/dist/extended.css
+++ b/dist/extended.css
@@ -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;
+ }
+}
diff --git a/dist/index.html b/dist/index.html
index 3042acb..92f7811 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -54,7 +54,7 @@
Get in touch!
-
Code Artist
-
+
diff --git a/dist/setup/index.html b/dist/setup/index.html
index 7773b60..a3e0de7 100644
--- a/dist/setup/index.html
+++ b/dist/setup/index.html
@@ -85,16 +85,18 @@
Code Artist
-
+
diff --git a/dist/stack/index.html b/dist/stack/index.html
index 82aa354..3e6bd21 100644
--- a/dist/stack/index.html
+++ b/dist/stack/index.html
@@ -89,16 +89,18 @@
Code Artist
-
+
diff --git a/dist/style.css b/dist/style.css
index 3f27c1e..298df2a 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -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%;
+ }
+}
diff --git a/dist/til/2021-08-31.html b/dist/til/2021-08-31.html
index 4e30ab6..5fae98f 100644
--- a/dist/til/2021-08-31.html
+++ b/dist/til/2021-08-31.html
@@ -67,16 +67,18 @@
Code Artist
-
+
diff --git a/dist/til/2021-09-03.html b/dist/til/2021-09-03.html
index 3b0554c..7e6c841 100644
--- a/dist/til/2021-09-03.html
+++ b/dist/til/2021-09-03.html
@@ -66,16 +66,18 @@
Code Artist
-
+
diff --git a/dist/til/2021-09-04.html b/dist/til/2021-09-04.html
index 5897fc0..7ab2c91 100644
--- a/dist/til/2021-09-04.html
+++ b/dist/til/2021-09-04.html
@@ -66,16 +66,18 @@
Code Artist
-
+
diff --git a/dist/til/2021-09-05.html b/dist/til/2021-09-05.html
index 5dd7044..3c9bc62 100644
--- a/dist/til/2021-09-05.html
+++ b/dist/til/2021-09-05.html
@@ -66,16 +66,18 @@
Code Artist
-
+
diff --git a/dist/til/2022-02-22.html b/dist/til/2022-02-22.html
index f117f51..03e1180 100644
--- a/dist/til/2022-02-22.html
+++ b/dist/til/2022-02-22.html
@@ -97,16 +97,18 @@ export default defineConfig({
Code Artist
-
+
diff --git a/dist/til/2022-03-22.html b/dist/til/2022-03-22.html
index 475506f..8ab2da1 100644
--- a/dist/til/2022-03-22.html
+++ b/dist/til/2022-03-22.html
@@ -69,16 +69,18 @@
Code Artist
-
+
diff --git a/dist/til/2022-03-28.html b/dist/til/2022-03-28.html
index 8ab2ef1..1c92e91 100644
--- a/dist/til/2022-03-28.html
+++ b/dist/til/2022-03-28.html
@@ -70,16 +70,18 @@
Code Artist
-
+
diff --git a/dist/til/2022-04-25.html b/dist/til/2022-04-25.html
index 89b59ee..0ad1f8e 100644
--- a/dist/til/2022-04-25.html
+++ b/dist/til/2022-04-25.html
@@ -87,16 +87,18 @@ expect(thatFunction).toHaveBeenCalled()
Code Artist
-
+
diff --git a/dist/til/2022-06-15.html b/dist/til/2022-06-15.html
index 2776c82..e0fdcc2 100644
--- a/dist/til/2022-06-15.html
+++ b/dist/til/2022-06-15.html
@@ -67,16 +67,18 @@
Code Artist
-
+
diff --git a/dist/til/2024-05-11.html b/dist/til/2024-05-11.html
index c959afc..d362045 100644
--- a/dist/til/2024-05-11.html
+++ b/dist/til/2024-05-11.html
@@ -74,16 +74,18 @@
Code Artist
-
+
diff --git a/dist/til/2024-05-12.html b/dist/til/2024-05-12.html
index a5a6c02..2e2f8e4 100644
--- a/dist/til/2024-05-12.html
+++ b/dist/til/2024-05-12.html
@@ -71,16 +71,18 @@
Code Artist
-
+
diff --git a/dist/til/2024-05-13.html b/dist/til/2024-05-13.html
index 9544639..ec02df1 100644
--- a/dist/til/2024-05-13.html
+++ b/dist/til/2024-05-13.html
@@ -67,16 +67,18 @@
Code Artist
-
+
diff --git a/dist/til/index.html b/dist/til/index.html
index 5a66f1a..14588c9 100644
--- a/dist/til/index.html
+++ b/dist/til/index.html
@@ -150,16 +150,18 @@
Code Artist
-
+
diff --git a/layouts/blog/index.html b/layouts/blog/index.html
index 071b726..d106242 100644
--- a/layouts/blog/index.html
+++ b/layouts/blog/index.html
@@ -65,16 +65,18 @@
Code Artist
-
+
diff --git a/layouts/cv/index.html b/layouts/cv/index.html
index d9ae43e..84e078f 100644
--- a/layouts/cv/index.html
+++ b/layouts/cv/index.html
@@ -65,16 +65,18 @@
Code Artist
-
+
diff --git a/layouts/index.html b/layouts/index.html
index 37edb94..a8767e1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -54,7 +54,7 @@
Get in touch!
-
Code Artist
-
+
diff --git a/layouts/setup/index.html b/layouts/setup/index.html
index faa272b..cf7b8c9 100644
--- a/layouts/setup/index.html
+++ b/layouts/setup/index.html
@@ -65,16 +65,18 @@
Code Artist
-
+
diff --git a/layouts/stack/index.html b/layouts/stack/index.html
index 5ed767f..7582eec 100644
--- a/layouts/stack/index.html
+++ b/layouts/stack/index.html
@@ -65,16 +65,18 @@
Code Artist
-
+
diff --git a/layouts/til/index.html b/layouts/til/index.html
index 6caecb7..620b893 100644
--- a/layouts/til/index.html
+++ b/layouts/til/index.html
@@ -65,16 +65,18 @@
Code Artist
-
+
diff --git a/static/extended.css b/static/extended.css
index 81decc1..b8730b4 100644
--- a/static/extended.css
+++ b/static/extended.css
@@ -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;
+ }
+}
diff --git a/static/posts.css b/static/posts.css
index 0ad0b76..890215e 100644
--- a/static/posts.css
+++ b/static/posts.css
@@ -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;
diff --git a/static/style.css b/static/style.css
index 3f27c1e..298df2a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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%;
+ }
+}