change font, change seperator, extend posts

src/_includes/svg/divider-edgy.svg

@@ -0,0 +1,10 @@
+<svg
+  class="seperator"
+  preserveAspectRatio="none"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1440 320"
+>
+  <path
+    d="M0,320L48,32L96,32L144,224L192,256L240,0L288,192L336,288L384,224L432,128L480,256L528,32L576,96L624,64L672,64L720,160L768,32L816,192L864,128L912,128L960,32L1008,224L1056,160L1104,0L1152,64L1200,256L1248,64L1296,224L1344,160L1392,96L1440,32L1440,0L1392,0L1344,0L1296,0L1248,0L1200,0L1152,0L1104,0L1056,0L1008,0L960,0L912,0L864,0L816,0L768,0L720,0L672,0L624,0L576,0L528,0L480,0L432,0L384,0L336,0L288,0L240,0L192,0L144,0L96,0L48,0L0,0Z"
+  ></path>
+</svg>

src/_includes/svg/divider-waves.svg

@@ -0,0 +1,10 @@
+<svg
+  class="seperator"
+  preserveAspectRatio="none"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1440 320"
+>
+  <path
+    d="M0,64L16,64C32,64,64,64,96,58.7C128,53,160,43,192,69.3C224,96,256,160,288,176C320,192,352,160,384,160C416,160,448,192,480,202.7C512,213,544,203,576,192C608,181,640,171,672,160C704,149,736,139,768,117.3C800,96,832,64,864,90.7C896,117,928,203,960,208C992,213,1024,139,1056,101.3C1088,64,1120,64,1152,101.3C1184,139,1216,213,1248,234.7C1280,256,1312,224,1344,202.7C1376,181,1408,171,1424,165.3L1440,160L1440,0L1424,0C1408,0,1376,0,1344,0C1312,0,1280,0,1248,0C1216,0,1184,0,1152,0C1120,0,1088,0,1056,0C1024,0,992,0,960,0C928,0,896,0,864,0C832,0,800,0,768,0C736,0,704,0,672,0C640,0,608,0,576,0C544,0,512,0,480,0C448,0,416,0,384,0C352,0,320,0,288,0C256,0,224,0,192,0C160,0,128,0,96,0C64,0,32,0,16,0L0,0Z"
+  ></path>
+</svg>

src/_layouts/home.njk

@@ -9,7 +9,7 @@ layout: base
       <p>{{ item.summary | md | safe }}</p>
     </div>
   </div>
-  {% include 'svg/divider-pixels.svg' %}
+  {% include 'svg/divider-waves.svg' %}
 </header>
 
 <article class="region">

src/assets/css/blocks/card.css

@@ -10,3 +10,16 @@
   color: var(--color-dark);
   background: var(--color-secondary);
 }
+
+.card ::selection {
+  color: var(--color-dark);
+  background: var(--color-secondary);
+}
+
+.card h3 a {
+  text-decoration: none;
+}
+
+.card time {
+  opacity: 0.8;
+}

src/assets/css/blocks/youtube.css

@@ -0,0 +1,3 @@
+.youtube-embed {
+  aspect-ratio: 16 / 9;
+}

src/assets/css/global/fonts.css

@@ -1,37 +1,29 @@
 @font-face {
-  font-family: Outfit;
+  font-family: Inter;
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: local(''), url(/assets/fonts/outfit/outfit-v5-latin-regular.woff2) format('woff2'),
-    url(/assets/fonts/outfit/outfit-v5-latin-regular.woff) format('woff');
+  src: local(''), url(/assets/fonts/inter/inter-v7-latin-500.woff2) format('woff2'),
+    url(/assets/fonts/inter/inter-v7-latin-500.woff) format('woff');
 }
 
 @font-face {
-  font-family: Outfit;
+  font-family: Inter;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: local(''), url(/assets/fonts/inter/inter-v7-latin-700.woff2) format('woff2'),
+    url(/assets/fonts/inter/inter-v7-latin-700.woff) format('woff');
+}
+
+@font-face {
+  font-family: Redhat;
   font-style: normal;
   font-display: swap;
   font-weight: 700;
   src: local(''),
-    url(/assets/fonts/outfit/outfit-v5-latin-700-webfont.woff2) format('woff2'),
-    url(/assets/fonts/outfit/outfit-v5-latin-700-webfont.woff) format('woff');
-}
-
-@font-face {
-  font-family: Charter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: local(''), url(/assets/fonts/charter/charter_regular.woff2) format('woff2'),
-    url(/assets/fonts/charter/charter_regular.woff) format('woff');
-}
-@font-face {
-  font-family: Charter;
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: local(''), url(/assets/fonts/charter/charter_bold.woff2) format('woff2'),
-    url(/assets/fonts/charter/charter_bold.woff) format('woff');
+    url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2'),
+    url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff) format('woff');
 }
 
 @font-face {

src/assets/css/global/global-styles.css

@@ -19,6 +19,7 @@ h2,
 h3 {
   line-height: 1;
   letter-spacing: var(--tracking-s);
+  font-family: var(--font-display);
 }
 
 h1 {
@@ -49,7 +50,6 @@ h3 {
 blockquote {
   border-inline-start: 0.8rem solid var(--color-primary);
   padding: var(--space-m-l);
-  font-family: var(--font-serif);
   font-size: var(--size-step-2);
 }
 

src/assets/design-tokens/fonts.json

@@ -3,14 +3,14 @@
   "description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
   "items": [
     {
-      "name": "Base",
+      "name": "Display",
       "description": "System fonts for body copy and globally set text.",
-      "value": ["Outfit", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
+      "value": ["Redhat", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
     },
     {
-      "name": "Serif",
-      "description": "Expressive sections, like quotes",
-      "value": ["Charter", "serif"]
+      "name": "Base",
+      "description": "System fonts for body copy and globally set text.",
+      "value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
     },
     {
       "name": "Mono",

src/pages/markdown.md

@@ -48,7 +48,6 @@ _This is italic text_
 ## Blockquote
 
 > rbread. Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears. Cotton candy cookie croissant fruitcake.
-> by very smart author
 
 ## Lists
 

src/pages/privacy.md

@@ -7,8 +7,6 @@ description: I respect the EU General Data Protection Regulation (GDPR). This po
 layout: page
 ---
 
-## Privacy Policy
-
 I respect the EU General Data Protection Regulation (GDPR) and this policy document explains how I collect and handle any information you provide to me.
 
 ...

src/posts/2022-09-01-post-with-code.md

@@ -1,12 +1,10 @@
 ---
 title: 'Post with some code'
-description: 'Every post starts with planning. Icing lemon drops macaroon sugar plum chupa chups. Bonbon cake chupa chups sugar plum brownie marshmallow jelly sweet roll.'
+description: 'Syntax Highlighting is achieved by a pack of Eleventy plugins. No browser/client JavaScript, highlight transformations are all done at build-time.'
 date: 2022-09-01
 ---
 
-This theme uses 11ty's [Syntax Highlighting Plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/).
-
-Gummi bears shortbread tootsie roll chupa chups cookie cheesecake sugar plum. Lemon drops brownie toffee fruitcake cotton candy.
+This theme uses 11ty's [Syntax Highlighting Plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/), a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.
 
 ```js
 function myFunction() {

src/posts/2022-10-12-post-with-image.md

@@ -1,10 +1,10 @@
 ---
 title: 'Post with an image '
-description: 'Every post starts with planning. Gummi bears shortbread tootsie roll chupa chups cookie cheesecake sugar plum. Lemon drops brownie toffee fruitcake cotton candy.'
+description: "Eleventy's own build-time image transformations. Fond more info on11ty.dev/docs/plugins/image/ and edit settings in config-folder."
 date: 2022-10-12
 ---
 
-Cake pastry jelly-o donut gummi bears toffee croissant chupa chups. Chocolate cake chocolate cotton candy tart biscuit. Ice cream sesame snaps cake bear claw toffee chocolate bar cheesecake toffee.
+This starter uses Eleventy's build-time image transformations. Fond more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/imagePlaceholder`.
 
 ## Image with caption
 

src/posts/2022-10-31-post-with-youtube.md

@@ -1,8 +1,10 @@
 ---
 title: 'Post with a video '
-description: 'Every post starts with planning. Carrot cake chocolate sweet bear claw sesame snaps. Muffin cheesecake cotton candy lollipop bonbon oat cake chocolate bar. Chocolate bar gummi bears wafer.'
+description: "This starter uses Justin Ribeiro's lite-youtube web component. Add `youtube: true` to frontmatter to activate."
 date: 2022-10-31
 youtube: true
 ---
 
+This starter uses Justin Ribeiro's lite-youtube web component. Add `youtube: true` to frontmatter to activate.
+
 {% youtube 'qvrNwWaNVGo', 'Alberto Ballesteros - Una Película A Medias' %}