Update styles, inspired by Andy Bell

.eleventy.js

@@ -7,6 +7,7 @@ const {
   getYear,
   toFullDate,
   renderSass,
+  renderSassString,
 } = require('./config/filters/index.js');
 
 module.exports = eleventyConfig => {
@@ -25,6 +26,7 @@ module.exports = eleventyConfig => {
     eleventyConfig.addFilter("getYear", getYear)
     eleventyConfig.addFilter("toFullDate", toFullDate)
     eleventyConfig.addFilter("sass", renderSass)
+    eleventyConfig.addFilter("sassInline", renderSassString)
     eleventyConfig.addFilter("getAllTags", collection => {
       let tagSet = new Set();
       for(let item of collection) {
@@ -32,6 +34,9 @@ module.exports = eleventyConfig => {
       }
       return Array.from(tagSet);
     });
+    eleventyConfig.addFilter("limit", function (arr, limit) {
+      return arr.slice(0, limit);
+    });
    
 
     eleventyConfig.addLayoutAlias('base', 'base.njk');

config/filters/index.js

@@ -37,7 +37,11 @@ function getDatetime(value) {
 }
 
 function renderSass(file) {
-  return sass.renderSync({ file }).css.toString()
+  return sass.compile(file).css.toString();
+}
+
+function renderSassString(string) {
+  return sass.compileString(string).css.toString();
 }
 
 module.exports = {
@@ -46,4 +50,5 @@ module.exports = {
   getYear,
   toFullDate,
   renderSass,
+  renderSassString,
 }

src/_data/navigation.js

@@ -27,12 +27,12 @@ module.exports = {
     ],
     bottom: [
       {
-        text: 'Imprint',
-        url: '/imprint/'
+        text: 'RSS',
+        url: '/feed.xml'
       },
       {
-        text: 'Privacy',
-        url: '/privacy/'
+        text: 'Source',
+        url: 'https://git.thethomaas.net'
       }
     ]
   };

src/_includes/partials/footer.njk

@@ -1,8 +1,8 @@
 {% set activePage = page.url | url %}
 
-<footer>
+<footer class="wrapper repel justify-center">
   <nav id="footernav" aria-label="Footer">
-    <ul>
+    <ul role="list" class="cluster">
       {% for item in navigation.bottom %}
       <li><a
         href="{{ item.url }}"

src/_includes/partials/header.njk

@@ -1,6 +1,8 @@
 <a href="#main" class="skip-link">{{ meta.skipContent }}</a>
 
-<header>
-    <div></div>
-    {% include "partials/menu.njk" %}
+<header role="banner" class="wrapper">
+    <div class="repel">
+        <a class="brand" href="/" aria-label="{{meta.siteName}}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"></path></svg></a>
+        {% include "partials/menu.njk" %}
+    </div>
 </header>

src/_includes/partials/menu.njk

@@ -1,5 +1,5 @@
-<nav id="mainnav" aria-label="Main">
-  <ul>
+<nav id="mainnav" aria-label="primary">
+  <ul role="list" class="cluster text-base">
     {% for item in navigation.top %}
     <li>
       <a

src/_includes/partials/posts-light.njk

@@ -1,5 +1,5 @@
 {% if postslist %}
-<ul role="list">
+<ul class="flow">
     {% asyncEach post in postslist %}
         <li>{% set definedDate = post.date %}
             <a href="{{ post.url | url }}">{{ post.data.title }} ({% include "partials/date.njk" %})</a>

src/_includes/partials/posts.njk

@@ -1,11 +1,10 @@
 {% if postslist %}
-<ul role="list">
+<ul class="flow">
     {% asyncEach post in postslist %}
         <li>
-            <h2>
-                <a href="{{ post.url | url }}">{{ post.data.title }}</a>
-            </h2>
-            {% set definedDate = post.date %} {% include "partials/date.njk" %}
+            <h3>{% set definedDate = post.date %}
+                <a href="{{ post.url | url }}">{{ post.data.title }} ({% include "partials/date.njk" %})</a>
+            </h3>
             <p>{{ post.data.description }}</p>
         </li>
     {% endeach %}

src/_includes/partials/tags.njk

@@ -1,6 +1,6 @@
 {% if definedTags %}
 
-<ul>{% for tag in definedTags %}<li>
+<ul class="cluster" role="list">{% for tag in definedTags %}<li>
     <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
 </li>{% endfor %}</ul>
 

src/_layouts/base.njk

@@ -13,9 +13,9 @@
       {{ meta.siteName }}
       {% endif %}
     </title>
-
+    
     <style>
-      {{ './src/assets/css/styles.scss' | sass }}
+      {{ './src/assets/css/styles.scss' | sass | safe }}
     </style>
 
     <!-- everything else: meta tags, icons, open graph etc.  -->
@@ -25,7 +25,11 @@
   <body>
     {% include "partials/header.njk" %}
 
-    <main id="main">{{ content | safe }}</main>
+    <main id="main">
+      <div class="wrapper flow prose region">
+        {{ content | safe }}
+      </div>
+    </main>
 
     {% include "partials/footer.njk" %}
   </body>

src/_layouts/blog.njk

@@ -1,16 +1,13 @@
 ---
 layout: base
 ---
-
-<header>
-    <section>
-        <h1>{{ title }}</h1>
-    </section>
-</header>
-
-<article>
+<div>
+  <h1>{{ title }}</h1>
 
   {{ content | safe }}
+</div>
+
+<article>
     
   {% set postslist = collections.posts %} {% include "partials/posts-light.njk" %}
 

src/_layouts/home.njk

@@ -10,5 +10,7 @@ layout: base
 <article>
   <h2>{{ blog.title }}</h2>
 
-  {% set postslist = collections.posts.slice(0, 4) %} {% include "partials/posts-light.njk" %}
+  {% set postslist = collections.posts | limit(4) %} {% include "partials/posts.njk" %}
+
+  <a href="/blog/">View all posts →</a>
 </article>

src/_layouts/post.njk

@@ -1,11 +1,17 @@
 ---
 layout: base
 ---
-
-<article>
+<div class="article-head">
     <h1>{{ title }}</h1>
-
-    {% set definedDate = date %} {% include "partials/date.njk" %}
-
+    <div class="cluster separate" style="--separator: '\2022'">
+        {% set definedDate = date %} {% include "partials/date.njk" %}
+        {% set definedTags = tags %} {% include "partials/tags.njk" %}
+    </div>
+</div>
+<article class="flow">
     {{ content | safe }}
+
+    <hr>
+
+    <a href="/blog/">← Back to blog</a>
 </article>

src/assets/css/components/_reset.scss

@@ -0,0 +1,73 @@
+/* https://andy-bell.co.uk/a-more-modern-css-reset/ */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

src/assets/css/components/_skip-link.scss

@@ -0,0 +1,20 @@
+.skip-link {
+    clip: rect(1px, 1px, 1px, 1px);
+    display: block;
+    block-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    inline-size: 1px;
+    top: 1rem;
+    left: 1rem;
+    z-index: 999;
+}
+  
+.skip-link:focus {
+    clip: auto;
+    block-size: auto;
+    overflow: visible;
+    inline-size: auto;
+    padding: .2rem .4rem;
+    line-height: 1;
+}

src/assets/css/styles.scss

@@ -1,200 +1,294 @@
+@use 'components/reset';
+@use 'components/skip-link';
+
 :root {
-    --light-1: #fdfdfe;
-    --light-2: #ddd;
-    --light-3: #fed;
-    --dark-1: #333;
-    --dark-2: #212121;
-    --light-transparent-1: rgba(125,125,125, 0.75);
-    --dark-transparent-1: rgba(200,195,190,0.15);
+    --color-dark: #333;
+    --color-dark-shade: #212121;
+    --color-light: #fdfdfe;
+    --color-light-glare: #ddd;
+    --color-mid: #666;
+    --color-mid-glare: #b3b3b3;
+    --color-primary: #5bf;
+    --color-primary-shade: #4396cd;
+    --color-light-trans: rgba(125,125,125, 0.75);
+    --color-dark-trans: rgba(200,195,190,0.15);
 
-    --color-1: #5bf;
-    --color-2: #4396cd;
+    --background-color: var(--color-light);
+    --text-color: var(--color-dark);
+    --link-focus: var(--color-dark-shade);
 
-    --background-color: var(--light-1);
-    --text-color: var(--dark-1);
-    /* --link-color: var(--color-1); */
-    --link-focus: var(--dark-2);
+    --wrapper-width: clamp(16rem, 93vw, 85rem);
+
+    --space-m: clamp(1.5rem,1.43rem + 0.33vw,1.6875rem);
+    --space-m-l: clamp(1.5rem,1.24rem + 1.30vw,2.25rem);
+    --space-s-l: clamp(1rem, 0.57rem + 2.17vw, 2.25rem);
+    --space-l-xl: clamp(2rem,1.52rem + 2.39vw,3.375rem);
+    --gutter: var(--space-s-l);
 }
 
 @media (prefers-color-scheme: dark){
     :root {
-        --background-color: var(--dark-2);
-        --text-color: var(--light-2);
-        --link-color: var(--color-1);
-        --link-focus: var(--light-3);
-    }
-    body {
-        a{color:var(--link-color);}
-        a:focus{outline-color:var(--link-focus);}
+        --background-color: var(--color-dark-shade);
+        --text-color: var(--color-light-glare);
+        --link-color: var(--color-primary);
     }
 }
 
-body{
+:focus-visible {
+    outline: 2px solid var(--text-color);
+    outline-offset: .25rem;
+}
+
+[role='list'] {
+    padding: 0;
+}
+
+a {
+    color: currentColor;
+    text-decoration-color: var(--color-primary);
+    text-decoration-thickness: 2px;
+    text-underline-offset: .2ex;
+
+    &:hover {
+        text-underline-offset: .1ex;
+    }
+    &:not([class]) {
+        text-decoration-skip-ink: auto;
+    }
+
+    .article-head & {
+        text-transform: uppercase;
+        font-size: 1rem;
+    }
+}
+time {
+    font-style: italic;
+
+    .article-head & {
+        text-transform: uppercase;
+        font-size: 1rem;
+    }
+}
+svg {
+    inline-size: 1em;
+    block-size: 1em;
+}
+blockquote, dl, figcaption, li, p {
+    max-width: 65ch;
+}
+ul, ol {
+    list-style-position: outside;
+    padding-inline-start: .4rem;
+
+    .article-head & {
+        margin: 0;
+    }
+}
+hr {
+    border: none;
+      border-top-width: medium;
+      border-top-style: none;
+      border-top-color: currentcolor;
+    border-top: 1px solid var(--color-mid);
+    margin: var(--space-l-xl) 0 !important;
+    max-width: 55rem;
+    transform: translateY(-1px);
+}
+
+body {
     color: var(--text-color);
     background-color: var(--background-color);
-    font-size: 18px;
     font: 1.2rem/1.5 Century Gothic, sans-serif;
     margin: 0;
-    padding: 0;
-    // max-width: 600px;
-    // max-width: 55ch;
-    // margin: 0 auto;
-    // padding: 2.5rem 1.75rem;
-}
-// header{
-//     outline: 2px solid var(--light-2);
-//     outline-offset: 1rem;
-// }
-h1,h2,h3,h4,h5,h6{
-    line-height: 1.2; 
-    font-family: Arial, serif;
-}
-h1{
-    font-size: 2.45rem;
-}
-a:focus{
-    outline: 0.2rem solid var(--link-focus);
-    outline-offset: 0.4rem;
-}
-p{
-    margin-bottom: 2rem;
-}
-section, aside, footer{
-    margin: 2.5rem auto;
-}
-ul{
-    margin-top: -1.25rem;
-    margin-bottom: 2.25rem;
-}
-b{
-    background-color: var(--dark-transparent-1);
-    padding: 0.4rem;
-    margin: -0.4rem;
-
-}
-dt{
-    font-weight: bold;
-    margin-top: 1rem; 
-}
-
-dt:target{
-    background-color: var(--dark-transparent-1);
-    padding: 0.2rem;
-    margin: 0.8rem -0.2rem 0 -0.2rem;
-    outline: 2px solid var(--light-transparent-1);
-
-}
-
-
-
-
-
-
-/* Skip Link */
-.skip-link {
-    clip: rect(1px, 1px, 1px, 1px);
-    display: block;
-    block-size: 1px;
-    overflow: hidden;
-    position: absolute;
-    inline-size: 1px;
-    top: 1rem;
-    left: 1rem;
-    z-index: 999;
-}
-  
-  .skip-link:focus {
-    clip: auto;
-    block-size: auto;
-    overflow: visible;
-    inline-size: auto;
-    color: var(--text-color);
-    padding: .2rem .4rem;
-    line-height: 1;
-}
-
-/* Body */
-body {
     display: flex;
     flex-direction: column;
 }
 
-/* Header */
-header {
+.text-base {
+    font-size: clamp(1rem, .96rem + .22vw, 1.125rem);
+}
+
+.wrapper {
+    margin-inline: auto;
+    padding-inline: var(--gutter);
+    position: relative;
+    inline-size: var(--wrapper-width);
+}
+.repel {
+    align-items: var(--repel-vertical-alignment, center);
     display: flex;
+    flex-wrap: wrap;
+    gap: var(--gutter, var(--space-s-l));
     justify-content: space-between;
-    padding: .4rem 1rem;
-
-    nav {
-        padding: 0 1rem;
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        flex-wrap: wrap;
-        gap: .6rem;
-
-        li {
-            padding: .6rem .4rem;
-        }
-
-        a {
-            color: var(--text-color);
-            text-decoration: none;
-            border-bottom: 2px solid var(--link-color);
-            padding-bottom: .1rem;
-
-            &:focus, &:hover {
-                padding-bottom: 0;
-            }
-        }
-    }
 }
-
-footer {
-    display: flex;
+.justify-center {
     justify-content: center;
-    padding: .4rem 1rem;
-    margin: 0;
+}
+.cluster, .grid {
+    gap: var(--gutter, var(--space-s-l));
+}
+.cluster {
+    align-items: var(--cluster-vertical-alignment,center);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--cluster-horizontal-alignment,flex-start);
+}
+.flow > * + * {
+    margin-block-start: var(--flow-space, 1em);
+}
+.prose {
+    --flow-space: var(--space-m-l);
+    line-height: 1.8;
+    max-width: 50rem;
+}
+.region {
+    padding-block: var(--region-space, var(--space-l-xl));
+}
 
-    nav {
-        padding: 0 1rem;
+
+
+
+header {
+    .repel {
+        --gutter: 0.5rem var(--space-m);
+        padding-block: var(--space-m);
     }
 
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: inline-flex;
-        flex-wrap: wrap;
-        gap: .6rem;
-
-        li {
-            padding: .6rem .4rem;
+    nav {
+        ul {
+            margin: 0;
         }
+    }
+}
+.brand {
+    color: var(--color-mid);
+    display: inline-block;
+    font-size: 2.5rem;
+    height: 2.5rem;
+}
 
-        a {
-            color: var(--text-color);
-            text-decoration: none;
-            border-bottom: 2px solid var(--link-color);
-            padding-bottom: .1rem;
+// h1,h2,h3,h4,h5,h6{
+//     line-height: 1.2; 
+//     font-family: Arial, serif;
+// }
+// h1{
+//     font-size: 2.45rem;
+// }
+// a:focus{
+//     outline: 0.2rem solid var(--link-focus);
+//     outline-offset: 0.4rem;
+// }
+// p{
+//     margin-bottom: 2rem;
+// }
+// section, aside, footer{
+//     margin: 2.5rem auto;
+// }
+// b{
+//     background-color: var(--color-dark-trans);
+//     padding: 0.4rem;
+//     margin: -0.4rem;
+// }
+// dt{
+//     font-weight: bold;
+//     margin-top: 1rem; 
+// }
+// dt:target{
+//     background-color: var(--color-dark-trans);
+//     padding: 0.2rem;
+//     margin: 0.8rem -0.2rem 0 -0.2rem;
+//     outline: 2px solid var(--color-light-trans);
+// }
 
-            &:focus, &:hover {
-                padding-bottom: 0;
-            }
-        }
+
+
+.separate {
+    gap: 0;
+
+    & > *:not(:last-child):after {
+        content: var(--separator, "");
+        margin-inline: 1rem;
     }
 }
 
 
-/* Main */
-main {
-    max-width: 600px;
-    max-width: 55ch;
-    margin: 0 auto;
-    padding: 2.5rem 1.75rem;
-    flex: auto;
-}
+
+// /* Header */
+// header {
+//     display: flex;
+//     justify-content: space-between;
+//     padding: .4rem 1rem;
+
+//     nav {
+//         padding: 0 1rem;
+//     }
+
+//     ul {
+//         margin: 0;
+//         padding: 0;
+//         list-style-type: none;
+//         display: flex;
+//         flex-wrap: wrap;
+//         gap: .6rem;
+
+//         li {
+//             padding: .6rem .4rem;
+//         }
+
+//         a {
+//             color: var(--text-color);
+//             text-decoration: none;
+//             border-bottom: 2px solid var(--link-color);
+//             padding-bottom: .1rem;
+
+//             &:focus, &:hover {
+//                 padding-bottom: 0;
+//             }
+//         }
+//     }
+// }
+
+// footer {
+//     display: flex;
+//     justify-content: center;
+//     padding: .4rem 1rem;
+//     margin: 0;
+
+//     nav {
+//         padding: 0 1rem;
+//     }
+
+//     ul {
+//         margin: 0;
+//         padding: 0;
+//         list-style-type: none;
+//         display: inline-flex;
+//         flex-wrap: wrap;
+//         gap: .6rem;
+
+//         li {
+//             padding: .6rem .4rem;
+//         }
+
+//         a {
+//             color: var(--text-color);
+//             text-decoration: none;
+//             border-bottom: 2px solid var(--link-color);
+//             padding-bottom: .1rem;
+
+//             &:focus, &:hover {
+//                 padding-bottom: 0;
+//             }
+//         }
+//     }
+// }
+
+
+// /* Main */
+// main {
+//     max-width: 600px;
+//     max-width: 55ch;
+//     margin: 0 auto;
+//     padding: 2.5rem 1.75rem;
+//     flex: auto;
+// }