commit - 96a8e8ce21b138f06272a447c48d877662ea60a6
commit + 90b1eaacbaab8a18ae48d6382cbe09d20492e67d
blob - 4666df284eaa1779e633ed9f7c2c9c1ee0ca4ca3
blob + 83854ab21f0ab4bc7d0aed5dd715058d15cc93c1
--- assets/styles.css
+++ assets/styles.css
@@ -1,102 +1,184 @@
-:root {
-	font-family: Inter, sans-serif;
-	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
-}
+:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+
 @supports (font-variation-settings: normal) {
-	:root { font-family: InterVariable, sans-serif; }
+	.titles { font-family: InterVariable, sans-serif; }
 }
 
 body {
-	margin: 0;
-	background-color: var(--color-background);
+	margin:              0;
+	background-color:    var(--color-background);
+	overscroll-behavior: none;
+	display:             flex;
+	flex-direction:      column;
+	min-height:          100vh;
 }
 
+/* Yellow text selection across entire site */
+::selection {
+	background-color: var(--color-link-bg);
+	color:            rgba(0, 0, 0, 0.9);
+}
+
+::-moz-selection {
+	background-color: var(--color-link-bg);
+	color:            rgba(0, 0, 0, 0.9);
+}
+
+/* Two-column layout: nav sidebar + content area */
 main {
-	display: flex;
+	display:    flex;
+	flex-grow:  1;
 }
 
+/* Sidebar navigation */
 .nav {
-	display: flex;
+	display:        flex;
 	flex-direction: column;
-	width: var(--nav-width);
-	position: sticky;
-	top: 0;
-	align-self: flex-start;
-}
+	width:          var(--nav-width);
+	position:       sticky;
+	top:            0;
+	align-self:     flex-start;
+	padding-top:    160px;
+	padding-left:   60px;
+	padding-right:  20px;
+	box-sizing:     border-box;
 
-.nav ul {
-	list-style-type: none;
-}
+	ul {
+		list-style-type: none;
+		padding-left:    0;
+	}
 
-.nav a {
-	color: var(--color-text-primary);
-}
+	li { margin-bottom: 25px; }
 
-.nav a:hover {
-	background-color: var(--color-link-hover);
+	a {
+		color:   var(--color-text-primary);
+		&:hover { background-color: var(--color-link-hover); }
+	}
 }
 
-.titles {
-	color: var(--color-title);
-	text-decoration: none;
-	font-size: 60px;
-	margin: 0;
-}
-
-.article .titles {
-	margin-bottom: 0.5em;
-}
-
-.titles a:hover {
-	color: var(--color-accent);
-}
-
-.article a {
-	color: black;
-	background-color: var(--color-link-bg);
-}
-
-.article a:hover {
-	background-color: var(--color-link-hover);
-}
-
-.article blockquote {
-	border-left: 4px solid var(--color-blockquote-border);
-	padding-left: 1em;
-	margin-left: 0;
-}
-
+/* Main content area */
 .content {
-	max-width: var(--content-max-width);
-	flex-grow: 1;
+	max-width:     var(--content-max-width);
+	flex-grow:     1;
+	padding-left:  20px;
+	padding-right: 20px;
 }
 
 footer {
-	text-align: center;
+	text-align:       center;
+	background-color: rgba(0, 0, 0, 0.9);
+	color:            rgba(255, 255, 255, 0.4);
+	padding:          1em;
+	margin-top:       25px;
 }
 
+.titles {
+	font-family:     Inter, sans-serif;
+	color:           var(--color-title);
+	text-decoration: none;
+	font-size:       60px;
+	margin:          0;
+
+	a:hover { color: var(--color-accent); }
+}
+
+.article {
+	line-height: 1.5;
+	color:       rgba(0, 0, 0, 0.9);
+
+	.titles {
+		color:       rgba(0, 0, 0, 0.4);
+		line-height: 1.0;
+	}
+
+	img {
+		max-width: 100%;
+		height:    auto;
+	}
+
+	p { margin-bottom: 2em; }
+
+	a {
+		color:            rgba(0, 0, 0, 0.4);
+		background-color: var(--color-link-bg);
+
+		&:hover { background-color: var(--color-link-hover); }
+	}
+
+	blockquote {
+		border-left:  4px solid var(--color-blockquote-border);
+		padding-left: 1em;
+		margin-left:  0;
+	}
+
+	pre {
+		border:  1px solid var(--color-accent);
+		padding: 1em;
+	}
+}
+
+/* List page article summaries */
+.summary-item {
+	margin-bottom: 30px;
+	padding-top:   30px;
+	border-top:    1px solid rgba(0, 0, 0, 0.2);
+
+	&:first-child {
+		border-top:  none;
+		padding-top: 0;
+	}
+
+	.titles {
+		line-height:   1.0;
+		margin-bottom: 0.2em;
+
+		a {
+			background-color: transparent;
+			text-decoration:  none;
+
+			&:hover {
+				color:            var(--color-accent);
+				background-color: transparent;
+			}
+		}
+	}
+}
+
+.summary-text {
+	color:       rgba(0, 0, 0, 0.4);
+	line-height: 1.5;
+}
+
 .post-meta {
-	color: rgba(0, 0, 0, 0.4);
-}
+	color:         rgba(0, 0, 0, 0.4);
+	font-size:     0.85em;
+	margin-top:    0.5em;
+	margin-bottom: 0.5em;
 
-.post-meta a {
-	color: inherit;
+	a {
+		color:            inherit;
+		background-color: var(--color-link-bg);
+	}
 }
 
+/* Mobile layout */
 @media (max-width: 800px) {
-	main {
-		flex-direction: column;
-	}
+	main    { flex-direction: column; }
+	header  { margin-bottom:  0.5em;  }
+	.titles { font-size:      36px;   }
 
 	.nav {
-		width: 100%;
+		width:    100%;
 		position: static;
-	}
+		padding:  0;
 
-	.nav ul {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		margin: 10px;
+		ul {
+			display:         flex;
+			flex-direction:  row;
+			justify-content: center;
+			margin:          5px 0;
+			gap:             20px;
+		}
 	}
+
 }