Small design changes, adding JetBrains Mono, adding small links to ne…

…wsletter
nathanlong · Jul 28, 2023 · b947fb9 · b947fb9
1 parent 0612298
commit b947fb9
Show file tree

Hide file tree

Showing 16 changed files with 277 additions and 143 deletions.
diff --git a/_includes/labitem.njk b/_includes/labitem.njk
@@ -1,5 +1,5 @@
 <li class="list-none flex items-start">
-  <div class="lablist-image aspect-square rounded overflow-hidden">
+  <div class="lablist-image aspect-square rounded-1 overflow-hidden">
     <a class="lablist-image-link" href="{{ lab.url if lab.url else lab.source }}">
       <img src="{{ lab.image }}" alt="{{ lab.imageAlt if lab.imageAlt else ''}}" class="w-full h-auto" width="172.5" height="172.5">
     </a>

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -20,11 +20,11 @@
     <link rel="icon" href="{{ '/icon.svg' | url }}" type="image/svg+xml">
     <link rel="apple-touch-icon" href="{{ '/apple-touch-icon.png' | url }}">
     <link rel="manifest" href="{{ '/site.webmanifest' | url }}">
-    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/styles.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path }}" type="application/json" title="{{ metadata.title }}">
   </head>
-  <body>
+  <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
     <script>
       // Prevent FART (look it up) by blocking render for a tiny bit...
       // First check for local settings, then check media queries, then apply fallback
@@ -83,7 +83,7 @@
           {%- for entry in collections.all | eleventyNavigation %}
           <li class="font-small"><a class="decoration-none" href="{{ entry.url | url }}">{{ entry.title }}</a></li>
           {%- endfor %}
-
+          <li class="font-small"><a class="decoration-none" href="{{ '/newsletter' | url }}">Newsletter</a></li>
           <li class="font-small"><a class="decoration-none" href="{{ '/feed/feed.xml' | url }}">RSS</a></li>
         </menu>
     </footer>

diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/base.njk
 templateClass: tmpl-page
+bodyClass: radial-mid
 ---
 <section class="mt-content text-center">
   <h1 class="mb-1/4">{{ title }}</h1>

diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/base.njk
 templateClass: tmpl-post prose
+bodyClass: radial-mid
 ---
 
 <div class="mt-content feature text-center mb-2">
@@ -17,11 +18,16 @@ templateClass: tmpl-post prose
 {{ content | safe }}
 
 <div class="mt-2">
-  <p class="section-eyebrow m-0">Discussion</p>
+  <p class="section-eyebrow m-0 color-accent">Newsletter</p>
+  <p>Want to receive these thoughts and others <a href="{{ '/newsletter' | url }}">in your inbox?</a></p>
+</div>
+
+<div class="mt-2">
+  <p class="section-eyebrow m-0 color-accent">Discussion</p>
 
   {% set mailitems = ['mailto:', metadata.author.email, '?subject=Re:', title] %}
-  <p>Want to discuss? Reply by:
-    <a href="{{ mailitems | join }}">Email</a>
+  <p>Want to discuss this?
+    <a href="{{ mailitems | join }}">Email Me</a>
   </p>
 </div>
 

diff --git a/_includes/nav.njk b/_includes/nav.njk
@@ -1,5 +1,5 @@
 <a class="sr-only sr-only-focus skip-link bg-editor relative z-4" href="#main">Skip to main content</a>
-<header class="header mt-1/2" data-module="nav" data-mobile="false" data-pref="false">
+<header class="header pt-1/2" data-module="nav" data-mobile="false" data-pref="false">
   <div class="logo">
     <a class="logo-link" href="{{ '/' | url }}" title="{{metadata.title}}">
       <span class="sr-only">{{ metadata.title }}</span>

diff --git a/content/about.md b/content/about.md
diff --git a/content/blog.njk b/content/blog.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/full.njk
 permalink: /blog/
+bodyClass: radial-mid
 eleventyNavigation:
   key: posts
   title: Blog

diff --git a/content/blog/blog.11tydata.js b/content/blog/blog.11tydata.js
@@ -1,6 +1,4 @@
 module.exports = {
-	tags: [
-		"posts"
-	],
-	"layout": "layouts/post.njk",
-};
+  tags: ['posts'],
+  layout: 'layouts/post.njk',
+}
diff --git a/content/lab.njk b/content/lab.njk
@@ -1,6 +1,7 @@
 ---
 layout: layouts/full.njk
 permalink: /lab/
+bodyClass: radial-mid
 eleventyNavigation:
   key: lab
   title: Lab

diff --git a/content/newsletter.njk b/content/newsletter.njk
@@ -0,0 +1,27 @@
+---
+layout: layouts/full.njk
+bodyClass: radial-mid
+permalink: /newsletter/
+---
+
+<section class="mt-content text-center">
+  <h1>Newsletter</h1>
+  <p>Every week I spew out thoughts, links, and occasional insights about working in the web industry.</p>
+</section>
+
+<hr class="mt-2 mb-2">
+
+
+<h3>Subscribe to 'Net Noodlings with Nathan'</h3>
+
+<div class="rounded-1 overflow-hidden leading-none">
+<iframe
+scrolling="no"
+style="width:100%!important;height:180px; border:0;"
+src="https://buttondown.email/nathanlong?as_embed=true"
+></iframe>
+</div>
+
+<p>To see what schenanigans you can expect, <a href="https://buttondown.email/nathanlong/archive">view the archives</a>, or even subscribe through <a href="#">RSS</a>.</p>
+
+<p>I will never spam you. <small class="font-xsmall">Only send bad jokes...</small></p>
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -111,7 +111,7 @@ module.exports = function(eleventyConfig) {
       "md",
       "njk",
       "html",
-      "liquid"
+      "liquid",
     ],
 
     // Pre-process *.md files with: (default: `liquid`)