.eleventy.js

@@ -7,7 +7,6 @@ const {
   getYear,
   toFullDate,
   renderSass,
-  renderSassString,
 } = require('./config/filters/index.js');
 
 module.exports = eleventyConfig => {
@@ -26,7 +25,6 @@ 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) {
@@ -34,9 +32,6 @@ 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,11 +37,7 @@ function getDatetime(value) {
 }
 
 function renderSass(file) {
-  return sass.compile(file).css.toString();
+  return sass.renderSync({ file }).css.toString()
-}
-
-function renderSassString(string) {
-  return sass.compileString(string).css.toString();
 }
 
 module.exports = {
@@ -50,5 +46,4 @@ module.exports = {
   getYear,
   toFullDate,
   renderSass,
-  renderSassString,
 }

src/_data/navigation.js

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

src/_includes/partials/footer.njk

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

src/_includes/partials/header.njk

@@ -1,8 +1,6 @@
 <a href="#main" class="skip-link">{{ meta.skipContent }}</a>
 
-<header role="banner" class="wrapper">
+<header>
-    <div class="repel">
+    <div></div>
-        <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" %}
-        {% include "partials/menu.njk" %}
-    </div>
 </header>

src/_includes/partials/menu.njk

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

src/_includes/partials/posts-light.njk

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

src/_includes/partials/tags.njk

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

src/_layouts/base.njk

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

src/_layouts/blog.njk

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

src/_layouts/home.njk

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

src/_layouts/post.njk

@@ -1,17 +1,11 @@
 ---
 layout: base
 ---
-<div class="article-head">
+
+<article>
     <h1>{{ title }}</h1>
-    <div class="cluster separate" style="--separator: '\2022'">
+
-        {% set definedDate = date %} {% include "partials/date.njk" %}
+    {% 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

@@ -1,73 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-.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,294 +1,200 @@
-@use 'components/reset';
-@use 'components/skip-link';
-
 :root {
-    --color-dark: #333;
+    --light-1: #fdfdfe;
-    --color-dark-shade: #212121;
+    --light-2: #ddd;
-    --color-light: #fdfdfe;
+    --light-3: #fed;
-    --color-light-glare: #ddd;
+    --dark-1: #333;
-    --color-mid: #666;
+    --dark-2: #212121;
-    --color-mid-glare: #b3b3b3;
+    --light-transparent-1: rgba(125,125,125, 0.75);
-    --color-primary: #5bf;
+    --dark-transparent-1: rgba(200,195,190,0.15);
-    --color-primary-shade: #4396cd;
-    --color-light-trans: rgba(125,125,125, 0.75);
-    --color-dark-trans: rgba(200,195,190,0.15);
 
-    --background-color: var(--color-light);
+    --color-1: #5bf;
-    --text-color: var(--color-dark);
+    --color-2: #4396cd;
-    --link-focus: var(--color-dark-shade);
 
-    --wrapper-width: clamp(16rem, 93vw, 85rem);
+    --background-color: var(--light-1);
-
+    --text-color: var(--dark-1);
-    --space-m: clamp(1.5rem,1.43rem + 0.33vw,1.6875rem);
+    /* --link-color: var(--color-1); */
-    --space-m-l: clamp(1.5rem,1.24rem + 1.30vw,2.25rem);
+    --link-focus: var(--dark-2);
-    --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(--color-dark-shade);
+        --background-color: var(--dark-2);
-        --text-color: var(--color-light-glare);
+        --text-color: var(--light-2);
-        --link-color: var(--color-primary);
+        --link-color: var(--color-1);
+        --link-focus: var(--light-3);
+    }
+    body {
+        a{color:var(--link-color);}
+        a:focus{outline-color:var(--link-focus);}
     }
 }
 
-:focus-visible {
+body{
-    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;
 }
 
-.text-base {
+/* Header */
-    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;
-}
-.justify-center {
-    justify-content: center;
-}
-.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));
-}
-
-
-
-
 header {
-    .repel {
+    display: flex;
-        --gutter: 0.5rem var(--space-m);
+    justify-content: space-between;
-        padding-block: var(--space-m);
+    padding: .4rem 1rem;
-    }
 
     nav {
-        ul {
+        padding: 0 1rem;
-            margin: 0;
+    }
+
+    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;
+            }
         }
     }
 }
-.brand {
-    color: var(--color-mid);
-    display: inline-block;
-    font-size: 2.5rem;
-    height: 2.5rem;
-}
 
-// h1,h2,h3,h4,h5,h6{
+footer {
-//     line-height: 1.2; 
+    display: flex;
-//     font-family: Arial, serif;
+    justify-content: center;
-// }
+    padding: .4rem 1rem;
-// h1{
+    margin: 0;
-//     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);
-// }
 
+    nav {
+        padding: 0 1rem;
+    }
 
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: .6rem;
 
-.separate {
+        li {
-    gap: 0;
+            padding: .6rem .4rem;
+        }
 
-    & > *:not(:last-child):after {
+        a {
-        content: var(--separator, "");
+            color: var(--text-color);
-        margin-inline: 1rem;
+            text-decoration: none;
+            border-bottom: 2px solid var(--link-color);
+            padding-bottom: .1rem;
+
+            &:focus, &:hover {
+                padding-bottom: 0;
+            }
+        }
     }
 }
 
 
-
+/* Main */
-// /* Header */
+main {
-// header {
+    max-width: 600px;
-//     display: flex;
+    max-width: 55ch;
-//     justify-content: space-between;
+    margin: 0 auto;
-//     padding: .4rem 1rem;
+    padding: 2.5rem 1.75rem;
-
+    flex: auto;
-//     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;
-// }