typography styles, renamed layout/posts to layout/notes for consistency

Author: robinrendle

.eleventy.js

@@ -5,17 +5,16 @@ const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 
 const pluginRss = require("@11ty/eleventy-plugin-rss");
-// const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("images");
   eleventyConfig.addPassthroughCopy("css");
   eleventyConfig.addPassthroughCopy("fonts");
 
-  // Add plugins
   eleventyConfig.addPlugin(pluginRss);
-  // eleventyConfig.addPlugin(pluginSyntaxHighlight);
+  eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
 
   eleventyConfig.addFilter("readableDate", (dateObj) => {

_includes/layouts/base.njk

@@ -10,27 +10,32 @@
     {# <link rel="stylesheet" href="{{ '/css/index.css' | url }}"> #}
     <style>
       :root {
-        --color-gray: #777;
+        --color-gray: #888;
+        --space-5: 96px;
+        --space-4: 48px;
         --space-3: 24px;
         --space-2: 16px;
         --space-1: 8px;
+        --font-size-small: 14px;
       }
 
       img, iframe {
         max-width: 100%;
       }
 
       {# Dangit, Safari. This was so close to being cool. #}
-      {# html { 
-        color-scheme: light dark;
-      } #}
+      html { 
+        margin: 0;
+        padding: 0;
+      }
 
       *, *:after, *:before {
         box-sizing: border-box;
       }
 
       body {
-        padding: 0;
+        padding: 0 0 var(--space-5) 0;
+        margin: 0;
         font: clamp(1rem, 3vw, 1.2rem)/1.4 system-ui, sans-serif;
         width: min(95%, 50ch);
         margin-inline: auto;
@@ -41,6 +46,12 @@
         line-height: 1.2;
       }
 
+      blockquote {
+        margin-left: 0;
+        padding-left: var(--space-2);
+        border-left: 1px solid var(--color-gray);
+      }
+
       pre code {
         white-space: pre-wrap;
       }
@@ -82,6 +93,205 @@
         color: var(--color-gray);
       }
     </style>
+    {# Note styles #}
+    <style>
+      .note-header {
+        margin-bottom: var(--space-3);
+      }
+      
+      .note-meta {
+         font-size: var(--font-size-small);
+        color: var(--color-gray);
+      }
+
+      .note-title {
+        margin-bottom: 0;
+      }
+    </style>
+
+    {# Code Styles #}
+    <style>
+      /*
+      Name: Duotone Dark
+      Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+      Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css)
+      Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+      */
+
+      code[class*="language-"],
+      pre[class*="language-"] {
+        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+        font-size: 14px;
+        line-height: 1.375;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+        background: #2a2734;
+        color: #9a86fd;
+      }
+
+      pre > code[class*="language-"] {
+        font-size: 1em;
+      }
+
+      pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+      code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+        text-shadow: none;
+        background: #6a51e6;
+      }
+
+      pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+      code[class*="language-"]::selection, code[class*="language-"] ::selection {
+        text-shadow: none;
+        background: #6a51e6;
+      }
+
+      /* Code blocks */
+      pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+      }
+
+      /* Inline code */
+      :not(pre) > code[class*="language-"] {
+        padding: .1em;
+        border-radius: .3em;
+      }
+
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #6c6783;
+      }
+
+      .token.punctuation {
+        color: #6c6783;
+      }
+
+      .token.namespace {
+        opacity: .7;
+      }
+
+      .token.tag,
+      .token.operator,
+      .token.number {
+        color: #e09142;
+      }
+
+      .token.property,
+      .token.function {
+        color: #9a86fd;
+      }
+
+      .token.tag-id,
+      .token.selector,
+      .token.atrule-id {
+        color: #eeebff;
+      }
+
+      code.language-javascript,
+      .token.attr-name {
+        color: #c4b9fe;
+      }
+
+      code.language-css,
+      code.language-scss,
+      .token.boolean,
+      .token.string,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .language-scss .token.string,
+      .style .token.string,
+      .token.attr-value,
+      .token.keyword,
+      .token.control,
+      .token.directive,
+      .token.unit,
+      .token.statement,
+      .token.regex,
+      .token.atrule {
+        color: #ffcc99;
+      }
+
+      .token.placeholder,
+      .token.variable {
+        color: #ffcc99;
+      }
+
+      .token.deleted {
+        text-decoration: line-through;
+      }
+
+      .token.inserted {
+        border-bottom: 1px dotted #eeebff;
+        text-decoration: none;
+      }
+
+      .token.italic {
+        font-style: italic;
+      }
+
+      .token.important,
+      .token.bold {
+        font-weight: bold;
+      }
+
+      .token.important {
+        color: #c4b9fe;
+      }
+
+      .token.entity {
+        cursor: help;
+      }
+
+      pre > code.highlight {
+        outline: .4em solid #8a75f5;
+        outline-offset: .4em;
+      }
+
+      /* overrides color-values for the Line Numbers plugin
+      * http://prismjs.com/plugins/line-numbers/
+      */
+      .line-numbers.line-numbers .line-numbers-rows {
+        border-right-color: #2c2937;
+      }
+
+      .line-numbers .line-numbers-rows > span:before {
+        color: #3c3949;
+      }
+
+      /* overrides color-values for the Line Highlight plugin
+      * http://prismjs.com/plugins/line-highlight/
+      */
+      .line-highlight.line-highlight {
+        background: rgba(224, 145, 66, 0.2);
+        background: -webkit-linear-gradient(left, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
+        background: linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
+      }
+
+      {# Code generated from markdown back ticks: `<html>` #}
+      code {
+        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+        font-size: 14px;
+        background: rgba(224, 145, 66, 0.2);
+        padding: 2px 3px;
+        border-radius: 3px;
+      }
+    </style>
   </head>
   <body>
     {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #} 

_includes/layouts/post.njk _includes/layouts/note.njk_includes/layouts/post.njk renamed to _includes/layouts/note.njk

@@ -2,11 +2,14 @@
 layout: layouts/base.njk
 templateClass: tmpl-post
 ---
-<h1>{{ title }}</h1>
-
-<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> / {{city}}, {{country}}
+<header class="note-header">
+  <h1 class="note-title">{{ title }}</h1>
 
 
+  <div class="note-meta">
+    <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> / {{city}}, {{country}}
+  </div>
+</header>
 
 {# {%- for tag in tags | filterTagList -%}
   {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}

adventures/8-8.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: 8 × 8
 date: 2020-02-06
 ---

adventures/a-great-flowering.markdown

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: A Great Flowering
 date: 2016-09-25 16:38:00 -07:00
 Country: California

adventures/a-new-home.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: A New Home
 date: 2019-07-05
 ---

adventures/all-things-brighter.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: All things brighter
 date: 2019-11-06
 ---

adventures/ampersand.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: Ampersand
 date: 2018-01-29
 tags:

adventures/archiving-typographic-delights-and-the-doosmday-vault.markdown

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: Archiving, Typographic Delights and the Doomsday Vault
 date: 2016-07-31 21:21:00 -07:00
 Country: California

adventures/behold-the-glorious-faq.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/post.njk
+layout: layouts/note.njk
 title: Behold the Glorious FAQ
 date: 2020-03-04
 ---