refactor: redesign landing page and post index layout

Sourceless · Sourceless · commit 6abff5a997ca · 2026-03-30T13:18:01.000+01:00
- Introduce landing.html layout showing latest post with full content
- Create /posts.html as dedicated index page for all posts
- Make "sourceless" header clickable link to landing page
- Switch site-wide font to IBM Plex Mono (remove IBM Plex Sans)
- Add horizontal separator below navigation
- Monospace styling for dates in post lists
- Ellipsis truncation for long post titles
- Reduce top margin (10em → 3em) for tighter layout
- Increase content bottom padding for scroll space
- Add margins to navigation and increase main content top margin
- Add styling for header links (inherit color, no underline)
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,22 +12,23 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <link rel="preconnect" href="https://fonts.googleapis.com"/>
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;600&display=swap"/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap"/>
         <link rel="stylesheet" type="text/css" href="{{ '/assets/css/main.css' | relative_url }}"/>
     </head>
 
     <body>
         <a class="skip-link" href="#main-content">Skip to content</a>
         <div id="content">
-            <h1>sourceless</h1>
+            <h1><a href="{{ '/' | relative_url }}">sourceless</a></h1>
 
             <nav aria-label="Main navigation">
-                <a href="{{ '/' | relative_url }}">index</a>
+                <a href="{{ '/posts.html' | relative_url }}">posts</a>
                 {% assign sorted_pages = site.pages | where_exp: "p", "p.nav_order" | sort: "nav_order" %}
                 {% for p in sorted_pages %}
                 <a href="{{ p.url | relative_url }}">{{ p.title }}</a>
                 {% endfor %}
             </nav>
+            <hr/>
 
             <main id="main-content">
                 {% if page.title %}<h2>{{ page.title }}</h2>{% endif %}
diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -0,0 +1,15 @@
+---
+layout: default
+---
+{% assign latest = site.posts.first %}
+<h2>{{ latest.title }}</h2>
+{{ latest.content }}
+<p class="post-meta">Posted {{ latest.date | date: "%Y-%m-%d" }}</p>
+
+<hr/>
+<h2>all posts</h2>
+<ul class="post-list">
+{% for post in site.posts %}
+<li><span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span> <a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
+{% endfor %}
+</ul>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2,7 +2,7 @@ body {
     height: 100vh;
     background: #323F4B;
     color: #CBD2D9;
-    font-family: 'IBM Plex Sans', sans-serif;
+    font-family: 'IBM Plex Mono', monospace;
     font-size: 16px;
     line-height: 1.6;
 }
@@ -21,13 +21,15 @@ code {
 nav {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 1.2em;
+    margin-bottom: 2em;
 }
 
 #content {
     background: #323F4B;
     display: block;
     width: 40em;
-    margin: 10em auto;
+    margin: 3em auto;
+    padding-bottom: 10em;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -38,6 +40,11 @@ h1 {
     font-size: 2.2em;
 }
 
+h1 a {
+    color: inherit;
+    text-decoration: none;
+}
+
 h2 {
     font-size: 1.6em;
 }
@@ -85,7 +92,7 @@ blockquote {
 }
 
 main {
-    margin-top: 2em;
+    margin-top: 3em;
 }
 
 main > h2:first-child {
@@ -108,6 +115,9 @@ main > h2:first-child {
 
 .post-list li {
     margin-bottom: 0.25em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .post-date {
diff --git a/index.html b/index.html
@@ -1,3 +1,3 @@
 ---
-layout: home
+layout: landing
 ---
diff --git a/posts.html b/posts.html
@@ -0,0 +1,4 @@
+---
+layout: home
+title: posts
+---

-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 ---
 -layout: home
 +layout: landing
 ---