Top nav

Author: andrewbranch

LICENSE

@@ -1,11 +1,11 @@
 ### SPDX-License-Identifier: MIT
 
-**Except as otherwise noted (below and/or in individual files), this project is copyrighted (c) 2019 Andrew Branch and licensed under the [MIT License](LICENSE-MIT) ([online](https://opensource.org/licenses/MIT)).**
+**Except as otherwise noted (below and/or in individual files), this project is copyrighted (c) 2023 Andrew Branch and licensed under the [MIT License](LICENSE-MIT) ([online](https://opensource.org/licenses/MIT)).**
 
 ### SPDX-License-Identifier: CC-BY-4.0
 
-- Content in [`posts`](posts) is licensed under a [Creative Commons Attribution 4.0 International License](LICENSE-CC-BY-4.0) ([online](https://creativecommons.org/licenses/by/4.0/legalcode)).
+- Markdown content in [`content/posts`](./content/posts) (excluding images) is licensed under a [Creative Commons Attribution 4.0 International License](LICENSE-CC-BY-4.0) ([online](https://creativecommons.org/licenses/by/4.0/legalcode)).
 
 ### All Rights Reserved
 
-- [`icons.sketch`](icons.sketch), [`src/favicon.png`](src/favicon.png), and the contents of [`src/images`](src/images) are copyrighted (c) 2019 Andrew Branch, All Rights Reserved.
+- [`icons.sketch`](icons.sketch) and the contents of [`content/images`](./content/images), [`content/posts/images`](./content/posts/images), and [`content/posts/archive/images`](./content/posts/archive/images) are copyrighted (c) 2023 Andrew Branch, All Rights Reserved.

_layouts/base.liquid

@@ -31,15 +31,21 @@
 
 		<div class="flex flex-col justify-between h-full max-w-[var(--width-content)] px-[0.8rem] my-0 mx-auto">
 			<div>
-				<header>
-					<a href="/" class="home-link">{{ metadata.title }}</a>
-
+				<header class="mt-4 mb-8 flex items-center justify-between">
 					<nav>
 						<h2 class="visually-hidden">Top level navigation menu</h2>
-						<ul class="nav">
-							<li class="nav-item">
+
+						<ul class="flex items-center m-0">
+							<li class="mr-6">
+								<a href="/">
+									<img src="/images/logo.svg" width="64" height="64" class="m-0" alt="Andrew Branch">
+								</a>
+							</li>
+
+							<li class="pt-4">
 								<a
 									href="/about"
+									class="font-grotesk text-textSecondary lowercase no-underline hover:underline"
 									{% if entry.url == '/about' %}
 										aria-current="page"
 									{% endif %}
@@ -48,6 +54,13 @@
 							</li>
 						</ul>
 					</nav>
+
+					<div class="pt-4">
+						<a href="https://github.com/andrewbranch/blog" class="text-[28px]">
+							<span class="visually-hidden">View source on GitHub</span>
+							<div aria-hidden="true" class="i-mdi:github"></div>
+						</a>
+					</div>
 				</header>
 				<main id="skip">
 					{{ content }}

content/styles/uno.css

@@ -1,5 +1,7 @@
 /* layer: preflights */
 *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+/* layer: icons */
+.i-mdi\:github{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
 /* layer: shortcuts */
 .container{width:100%;}
 @media (min-width: 414px){
@@ -13,12 +15,16 @@
 .relative{position:relative;}
 .sticky{position:sticky;}
 .static{position:static;}
+.m-0{margin:0;}
 .mx-auto{margin-left:auto;margin-right:auto;}
 .my{margin-top:1rem;margin-bottom:1rem;}
 .my-0{margin-top:0;margin-bottom:0;}
 .mb-2{margin-bottom:calc(var(--rhythm) * .25rem * 2);}
+.mb-8{margin-bottom:calc(var(--rhythm) * .25rem * 8);}
 .me{margin-inline-end:1rem;}
+.mr-6{margin-right:calc(var(--rhythm) * .25rem * 6);}
 .ms{margin-inline-start:1rem;}
+.mt-4{margin-top:calc(var(--rhythm) * .25rem * 4);}
 .block{display:block;}
 .contents{display:contents;}
 .h-full{height:100%;}
@@ -32,21 +38,25 @@
 .b{border-width:1px;}
 .px{padding-left:1rem;padding-right:1rem;}
 .px-\[0\.8rem\]{padding-left:0.8rem;padding-right:0.8rem;}
+.pt-4{padding-top:calc(var(--rhythm) * .25rem * 4);}
 .before\:pr-\[\.64rem\]::before{padding-right:.64rem;}
 .after\:pl-\[\.64rem\]::after{padding-left:.64rem;}
 .text-center{text-align:center;}
 .text-\[1\.2rem\]{font-size:1.2rem;}
 .text-\[2\.8rem\]{font-size:2.8rem;}
+.text-\[28px\]{font-size:28px;}
 .font-medium{font-weight:500;}
 .font-normal{font-weight:400;}
 .font-grotesk{font-family:var(--font-grotesk);}
+.lowercase{text-transform:lowercase;}
 .italic{font-style:italic;}
 .text-textHighContrast{color:var(--color-text-high-contrast);}
 .text-textMuted{color:var(--color-text-muted);}
 .text-textSecondary{color:var(--color-text-secondary);}
 .before\:text-textDisabled::before{color:var(--color-text-disabled);}
 .after\:text-textDisabled::after{color:var(--color-text-disabled);}
 .underline{text-decoration-line:underline;}
+.hover\:underline:hover{text-decoration-line:underline;}
 .no-underline{text-decoration:none;}
 .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
 .before\:content-\[\'\~\'\]::before{content:'~';}

eleventy.config.js

@@ -34,6 +34,7 @@ module.exports = (eleventyConfig) => {
 	eleventyConfig.addFilter("inspect", (value) => `<pre>${JSON.stringify(value, null, 2)}</pre>`);
 
 	eleventyConfig.addPlugin(bundlerPlugin);
+	eleventyConfig.addPassthroughCopy("content/images");
 	eleventyConfig.addPassthroughCopy("content/styles/fonts");
 	eleventyConfig.addPassthroughCopy("content/_redirects");
 

package-lock.json

@@ -16,6 +16,7 @@
 		"@11ty/eleventy": "^2.0.1",
 		"@11ty/eleventy-img": "^3.1.8",
 		"@11ty/eleventy-plugin-bundle": "^1.0.4",
+		"@iconify-json/mdi": "^1.1.55",
 		"@ryanxcharles/markdown-it-katex": "^4.0.2",
 		"@shopify/prettier-plugin-liquid": "^1.3.4",
 		"@unocss/cli": "^0.57.2",

package.json

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig, presetUno } from "unocss";
+import { defineConfig, presetUno, presetIcons } from "unocss";
 
 export default defineConfig({
 	cli: {
@@ -9,6 +9,7 @@ export default defineConfig({
 		},
 	},
 	presets: [
+		presetIcons(),
 		presetUno({
 			dark: "media",
 		}),