fix(archetypes): fixes the new post archetype

archetypes/default.md

@@ -1,9 +1,11 @@
 ---
+# vim: spell spelllang=en
 title: '{{ replace .File.ContentBaseName "-" " " | title }}'
 slug: '{{ .File.ContentBaseName }}'
 date: '{{ .Date }}'
 draft: true
-categories: []
+categories:
+- 
 tags:
 - 
 summary: |

assets/static/css/bcarlin.css

@@ -92,14 +92,19 @@ header nav [role="link"]:is([aria-current]:not([aria-current="false"]),:hover,:a
   --pico-text-decoration: none;
 }
 
-.container {
+article :where(a:not([role="button"])) {
+  --pico-text-decoration: none;
+}
+
+body > :is(main, footer) {
   max-width: 40em;
   margin-left: auto;
   margin-right: auto;
-}
 
-article :where(a:not([role="button"])) {
+  @media (width >= 1024px) {
-  --pico-text-decoration: none;
+    margin-right: 0;
+    margin-left: 18em;
+  }
 }
 
 /*
@@ -115,27 +120,39 @@ article :where(a:not([role="button"])) {
   backdrop-filter: blur(3px);
   font-family: var(--pico-font-family-sans-serif);
   font-weight: bold;
+
+  @media (width >= 1024px) {
+    display: none;
   }
 
-.mobile-header img {
+  img {
     height: 2em;
   }
+}
+
+#menu-close {
+  float: right;
+  padding: 0 1.5em;
+}
 
 #menu-close, #menu-close:hover, #menu-toggle {
   color: inherit;
   background-color: inherit;
   border: none;
   text-decoration: none;
+
+  @media (width >= 1024px) {
+    display: none;
+  }
 }
 
 body {
   background-color: var(--pico-background-color);
-}
 
-body > header {
+  & > header {
-  width: 100vw;
+    width: 100dvw;
     text-align: center;
-  height: 100vh;
+    height: 100dvh;
     position: fixed;
     left: -100vw;
     top: 0;
@@ -143,69 +160,12 @@ body > header {
     z-index: 100;
     transition: left 0.5s;
     overflow: hidden auto;
-}
 
-body > header.active {
+    &.active {
         left: 0;
     }
 
-body > header nav, body > header nav ul {
-  flex-direction: column;
-}
-
-body > header .u-logo {
-  width: 5em;
-}
-
-
-body > header .title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  font-family: var(--pico-font-family-sans-serif);
-  margin-top: 1em;
-}
-
-body > header nav {
-  font-size: 1rem;
-  font-family: var(--pico-font-family-sans-serif);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-body > header nav li {
-  padding: 0;
-  padding: calc( var(--pico-nav-element-spacing-vertical) / 4)
-    calc( var(--pico-nav-element-spacing-horizontal) / 4);
-}
-
-body > header a {
-  color: var(--pico-color);
-  padding: 0;
-}
-
-body > header > a {
-  float: right;
-  padding: 0 1.5em;
-}
-
-.menu-primary {
-  font-weight: bold;
-}
-
-body > footer p {
-  font-size: 0.7em;
-  text-align: center;
-}
-
     @media (width >= 1024px) {
-  .mobile-header, #menu-close {
-    display: none;
-  }
-
-  body > header {
       position: sticky;
       top: 0;
       left: 0;
@@ -213,11 +173,56 @@ body > footer p {
       float: left;
     }
 
-  .container {
+    .u-logo {
-    margin-right: 0;
+      width: 5em;
-    margin-left: 18em;
     }
 
+    .title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      font-family: var(--pico-font-family-sans-serif);
+      margin-top: 1em;
+    }
+
+    a {
+      color: var(--pico-color);
+      padding: 0;
+
+      .menu-primary & {
+        font-weight: bold;
+      }
+    }
+
+    nav {
+      font-size: 1rem;
+      font-family: var(--pico-font-family-sans-serif);
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      ul {
+        flex-direction: column;
+      }
+
+      li {
+        padding: 0;
+        padding: calc( var(--pico-nav-element-spacing-vertical) / 4)
+          calc( var(--pico-nav-element-spacing-horizontal) / 4);
+      }
+    }
+  }
+
+  & > footer{
+    p {
+      font-size: 0.7em;
+      text-align: center;
+    }
+  }
+}
+
+@media (width >= 1024px) {
   .metadata p {
     display: inline;
   }
@@ -228,28 +233,37 @@ body > footer p {
  * Content Styling
  */
 
+main {
   .translations {
     text-align: end;
     margin-bottom: 0.3em;
-}
 
-.translations a {
+    a {
       text-decoration: none;
     }
+  }
 
-main > article {
+  & > article {
     text-align: justify;
-}
 
-main > article > header {
+    & > header {
       margin-bottom: calc(2 * var(--pico-block-spacing-vertical));
+
+      h1, p {
+        margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical));
+        margin-top: 0.3em;
       }
 
-ul.tags, ul.tags li {
+
-  list-style-type: none;
+      .category a {
-  display: inline;
+        font-family: var(--pico-font-family-sans-serif);
-  padding-left: 0;
+        font-weight: 700;
-  margin-bottom: 0;
+        line-height: var(--pico-line-height);
+        color: var(--pico-muted-color);
+        text-decoration: none;
+        font-size: 1rem;
+        margin-bottom: 0.5em;
+      }
     }
 
     ul > li {
@@ -259,6 +273,13 @@ ul > li {
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--pico-font-family-sans-serif);
       text-align: left;
+
+      a {
+        color: var(--pico-muted-color);
+        text-decoration: none;
+        margin-left: 0.4rem;
+        font-size: 1rem;
+      }
     }
 
     h1 {
@@ -267,70 +288,47 @@ h1 {
 
     h2 {
       font-size: 1.3rem;
-}
 
-h2::before {
+      &::before {
         content: "## ";
         color: var(--markup-color);
       }
+    }
 
     h3 {
       font-size: 1.2rem;
-}
 
-h3::before {
+      &::before {
         content: "### ";
         color: var(--markup-color);
       }
+    }
 
     h4 {
       font-size: 1.1rem;
-}
 
-h4::before {
+      &::before {
         content: "#### ";
         color: var(--markup-color);
       }
+    }
 
     h5 {
       font-size: 1rem;
-}
 
-h5::before {
+      &::before {
         content: "##### ";
         color: var(--markup-color);
       }
+    }
 
     h6 {
       font-size: 1rem;
-}
 
-h6::before {
+      &::before {
         content: "###### ";
         color: var(--markup-color);
       }
-
-article header h1, article header p {
-  margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical));
-  margin-top: 0.3em;
-}
-
-
-article header .category a {
-  font-family: var(--pico-font-family-sans-serif);
-  font-weight: 700;
-  line-height: var(--pico-line-height);
-  color: var(--pico-muted-color);
-  text-decoration: none;
-  font-size: 1rem;
-  margin-bottom: 0.5em;
-}
-
-h2 a, h3 a, h4 a, h5 a, h6 a {
-  color: var(--pico-muted-color);
-  text-decoration: none;
-  margin-left: 0.4rem;
-  font-size: 1rem;
     }
 
     pre {
@@ -356,6 +354,9 @@ figure {
       text-align: center;
       margin: var(--pico-block-spacing-vertical) auto;
     }
+  }
+}
+
 
 /*
  * Admonitions
@@ -374,16 +375,20 @@ figure {
  * Post lists
  */
 
-.h-feed article:not(:last-child) {
+.h-feed {
+  article{
+    &:not(:last-child) {
       border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
       margin-bottom: 0;
     }
 
-.h-feed article p {
+    p {
       margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical));
     }
 
-.h-feed article .p-summary {
+    .p-summary {
       font-size: 0.9em;
       font-style: italic;
     }
+  }
+}

content/blog/007-prepare-for-the-next-internet-outage/index.en.md

@@ -5,7 +5,7 @@ date: '2025-06-14T04:05:48+02:00'
 categories:
 - DevOps
 tags:
-- architecture,
+- architecture
 - cloud
 summary: >
   A reflection on recent internet outages and my takeways to build more

layouts/baseof.html

@@ -30,10 +30,12 @@
 			</li>
 		</ul>
 	</nav>
+
   <header id="menu" class="h-card">
     {{ partial "header.html" . }}
   </header>
-  <main class="container">
+
+  <main>
     {{- if .IsTranslated }}
     {{- range .Translations }}
     <div class="translations">
@@ -47,7 +49,8 @@
 
     {{ block "main" . }}{{ end }}
   </main>
-  <footer class="container">
+
+  <footer>
     {{ partial "footer.html" . }}
   </footer>
 </body>

stylelint.config.js

@@ -0,0 +1,6 @@
+/** @type {import('stylelint').Config} */
+export default {
+  rules: {
+    "no-descending-specificity": false
+  }
+};