Skip to content

Commit 6abff5a

Browse files
committed
refactor: redesign landing page and post index layout
- 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)
1 parent 76a8d46 commit 6abff5a

5 files changed

Lines changed: 37 additions & 7 deletions

File tree

_layouts/default.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,23 @@
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
1313
<link rel="preconnect" href="https://fonts.googleapis.com"/>
1414
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
15-
<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"/>
15+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap"/>
1616
<link rel="stylesheet" type="text/css" href="{{ '/assets/css/main.css' | relative_url }}"/>
1717
</head>
1818

1919
<body>
2020
<a class="skip-link" href="#main-content">Skip to content</a>
2121
<div id="content">
22-
<h1>sourceless</h1>
22+
<h1><a href="{{ '/' | relative_url }}">sourceless</a></h1>
2323

2424
<nav aria-label="Main navigation">
25-
<a href="{{ '/' | relative_url }}">index</a>
25+
<a href="{{ '/posts.html' | relative_url }}">posts</a>
2626
{% assign sorted_pages = site.pages | where_exp: "p", "p.nav_order" | sort: "nav_order" %}
2727
{% for p in sorted_pages %}
2828
<a href="{{ p.url | relative_url }}">{{ p.title }}</a>
2929
{% endfor %}
3030
</nav>
31+
<hr/>
3132

3233
<main id="main-content">
3334
{% if page.title %}<h2>{{ page.title }}</h2>{% endif %}

_layouts/landing.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: default
3+
---
4+
{% assign latest = site.posts.first %}
5+
<h2>{{ latest.title }}</h2>
6+
{{ latest.content }}
7+
<p class="post-meta">Posted {{ latest.date | date: "%Y-%m-%d" }}</p>
8+
9+
<hr/>
10+
<h2>all posts</h2>
11+
<ul class="post-list">
12+
{% for post in site.posts %}
13+
<li><span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span> <a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
14+
{% endfor %}
15+
</ul>

assets/css/main.css

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ body {
22
height: 100vh;
33
background: #323F4B;
44
color: #CBD2D9;
5-
font-family: 'IBM Plex Sans', sans-serif;
5+
font-family: 'IBM Plex Mono', monospace;
66
font-size: 16px;
77
line-height: 1.6;
88
}
@@ -21,13 +21,15 @@ code {
2121
nav {
2222
font-family: 'IBM Plex Mono', monospace;
2323
font-size: 1.2em;
24+
margin-bottom: 2em;
2425
}
2526

2627
#content {
2728
background: #323F4B;
2829
display: block;
2930
width: 40em;
30-
margin: 10em auto;
31+
margin: 3em auto;
32+
padding-bottom: 10em;
3133
}
3234

3335
h1, h2, h3, h4, h5, h6 {
@@ -38,6 +40,11 @@ h1 {
3840
font-size: 2.2em;
3941
}
4042

43+
h1 a {
44+
color: inherit;
45+
text-decoration: none;
46+
}
47+
4148
h2 {
4249
font-size: 1.6em;
4350
}
@@ -85,7 +92,7 @@ blockquote {
8592
}
8693

8794
main {
88-
margin-top: 2em;
95+
margin-top: 3em;
8996
}
9097

9198
main > h2:first-child {
@@ -108,6 +115,9 @@ main > h2:first-child {
108115

109116
.post-list li {
110117
margin-bottom: 0.25em;
118+
white-space: nowrap;
119+
overflow: hidden;
120+
text-overflow: ellipsis;
111121
}
112122

113123
.post-date {

index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
---
2-
layout: home
2+
layout: landing
33
---

posts.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
layout: home
3+
title: posts
4+
---

0 commit comments

Comments
 (0)