Update styles

edew · Dec 18, 2024 · 4c1527c · 4c1527c
1 parent 51b4ed7
commit 4c1527c
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 52 deletions.
diff --git a/src/2022/08/13/GIT_SSH_COMMAND.html b/src/2022/08/13/GIT_SSH_COMMAND.html
@@ -14,6 +14,11 @@
 <body>
   <header role="banner">
     <h1><a href="/">For Me</a></h1>
+    <nav class="breadcrumbs">
+      <ol>
+        <li>GIT_SSH_COMMAND</li>
+      </ol>
+    </nav>
   </header>
   <main>
     <article>

diff --git a/src/2024/04/29/simple_baguette.html b/src/2024/04/29/simple_baguette.html
@@ -14,6 +14,11 @@
 <body>
   <header role="banner">
     <h1><a href="/">For Me</a></h1>
+    <nav class="breadcrumbs">
+      <ol>
+        <li>Simple Baguette</li>
+      </ol>
+    </nav>
   </header>
   <main>
     <article>

diff --git a/src/2024/12/11/variable_is_set.html b/src/2024/12/11/variable_is_set.html
@@ -16,6 +16,11 @@
 <body>
 	<header role="banner">
 		<h1><a href="/">For Me</a></h1>
+		<nav class="breadcrumbs">
+			<ol>
+				<li>variable_is_set</li>
+			</ol>
+		</nav>
 	</header>
 	<main>
 		<article>

diff --git a/src/index.html b/src/index.html
@@ -1,35 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <title>For Me</title>
+	<title>For Me</title>
 
-  <link rel="stylesheet" href="/style.css">
-  <link rel="canonical" href="https://www.dewhurst.io/2022/08/13/GIT_SSH_COMMAND.html">
+	<link rel="stylesheet" href="/style.css">
+	<link rel="canonical" href="https://www.dewhurst.io/2022/08/13/GIT_SSH_COMMAND.html">
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="Last week I used Git’s GIT_SSH_COMMAND environment variable to force the a command running in a CircleCI job to use one of CircleCI’s “Additional SSH Keys” instead of the “deploy key”." />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description"
+		content="Last week I used Git’s GIT_SSH_COMMAND environment variable to force the a command running in a CircleCI job to use one of CircleCI’s “Additional SSH Keys” instead of the “deploy key”." />
 </head>
+
 <body>
-  <header role="banner">
-    <h1><a href="/">For Me</a></h1>
-  </header>
-  <main>
-    <ul>
-      <li>
-        <a href="/2024/12/11/variable_is_set.html">variable_is_set</a>
-        <div><time datetime="2024-12-11T16:49:48.605Z">Dec 11, 2024</time></div>
-      </li>
-      <li>
-        <a href="/2024/04/29/simple_baguette.html">Simple Baguette</a>
-        <div><time datetime="2024-04-29T18:49:00+01:00">Apr 29, 2024</time></div>
-      </li>
+	<header role="banner">
+		<h1><a href="/">For Me</a></h1>
+	</header>
+	<main>
+		<ol>
+			<li>
+				<a href="/2024/12/11/variable_is_set.html">variable_is_set</a> <time datetime="2024-12-11T16:49:48.605Z">Dec 11, 2024</time></section>
+			</li>
 			<li>
-				<a href="/2022/08/13/GIT_SSH_COMMAND.html">GIT_SSH_COMMAND</a>
-				<div><time datetime="2022-08-13T15:24:00+00:00">Aug 13, 2022</time></div>
+				<a href="/2024/04/29/simple_baguette.html">Simple Baguette</a> <time datetime="2024-04-29T18:49:00+01:00">Apr 29, 2024</time></section>
 			</li>
-		</ul>
-  </main>
+			<li>
+				<a href="/2022/08/13/GIT_SSH_COMMAND.html">GIT_SSH_COMMAND</a> <time datetime="2022-08-13T15:24:00+00:00">Aug 13, 2022</time></section>
+			</li>
+		</ol>
+	</main>
 </body>
-</html>
+
+</html>
diff --git a/src/style.css b/src/style.css
@@ -3,48 +3,68 @@
 }
 
 html {
+	font-family: monospace;
 	font-size: 100%;
 }
 
-header[role=banner] {
-	margin: auto;
-	max-width: 45em;
+body {
+	margin: 1em;
 }
 
-header[role=banner] h1 {
-	background-color: #237;
-	display: inline-block;
-	font-family: serif;
-	font-size: 300%;
-	padding: 0.5em;
+a {
+	color: blue;
+	text-decoration: none;
 }
 
-header[role=banner] h1 a {
-	color: white;
-	text-decoration: none;
+li {
+	list-style: none;
+	padding-bottom: 0.3em;
+}
+
+li::marker {
+	content: '* ';
 }
 
-code {
+time {
+	color: #595959;
+	font-style: italic;
+}
+
+pre {
+	color: #595959;
+	margin-left: 2em;
 	white-space: pre-wrap;
 }
 
-main {
-	font-family: sans-serif;
-	line-height: 1.3;
-	margin: auto;
-	max-width: 40em;
+header {
+	display: flex;
+	align-items: center;
 }
 
-a {
-	color: #237;
-	text-decoration: none;
+nav.breadcrumbs {
 }
 
-time {
-	color: slategray;
+nav.breadcrumbs ol {
+	list-style: none;
 }
 
-pre {
-	text-wrap: wrap;
-	margin-left: 1em;
-}
+nav.breadcrumbs li {
+	display: inline-block;
+	line-height: 1;
+	padding-bottom: none;
+}
+
+nav.breadcrumbs li::marker {
+	content: none;
+}
+
+nav.breadcrumbs li:not(:nth-last-of-type(1))::after {
+	content: ' >';
+}
+
+@media screen and (width <= 600px) {
+	html {
+		font-size: 130%;
+		line-height: 1.5;
+	}
+}