Improve design

_layouts/page.html

@@ -1,14 +1,11 @@
 ---
 layout: layout
 ---
-{% include hljs.html %}
 
-{% capture header_content %}
+{% include hljs.html %} {% capture header_content %}
 <h1>{{ page.title }}</h1>
 <p class="hero-subtitle">{{ page.subtitle }}</p>
-{% endcapture %}
-{% include page-header.html image=page.header_image content=header_content %}
+{% endcapture %} {% include page-header.html image=page.header_image
+content=header_content %}
 
-<main class="page content">
-  {{ content }}
-</main>
+<main class="page content {{ page.class }}">{{ content }}</main>

roadmap.html

@@ -2,31 +2,27 @@
 title: Gleam's Development Roadmap
 subtitle: What's coming next?
 layout: page
+class: "roadmap"
 ---
 
 <p>
   The highlights of what's been released, what's being worked on, and what's
-  coming in future! To see all the details please see:
+  coming in future! To see all the details please see the
+  <a href="https://github.com/gleam-lang/gleam/tree/main/CHANGELOG.md"
+    >current changelogs</a
+  >, the
+  <a href="https://github.com/gleam-lang/gleam/tree/main/changelog"
+    >historical changelogs</a
+  >, and the
+  <a href="https://github.com/gleam-lang/gleam/issues">issue tracker</a>
 </p>
 
-<ul>
-  <li>
-    <a href="https://github.com/gleam-lang/gleam/tree/main/CHANGELOG.md">
-      The current changelogs</a
-    >
-  </li>
-  <li>
-    <a href="https://github.com/gleam-lang/gleam/tree/main/changelog">
-      The historical changelogs</a
-    >
-  </li>
-  <li>
-    <a href="https://github.com/gleam-lang/gleam/issues"> The issue tracker</a>
-  </li>
-</ul>
-
 <h2>In progress</h2>
 
+<p>
+  Features that are currently being worked on, or complete but not yet released.
+</p>
+
 <ul class="roadmap-list">
   {% for item in site.data.roadmap.in-progress %}
   <li>{{ item }}</li>
@@ -35,6 +31,8 @@ <h2>In progress</h2>
 
 <h2>Planned</h2>
 
+<p>Features that will be implemented, but work has not yet started.</p>
+
 <ul class="roadmap-list">
   {% for item in site.data.roadmap.planned %}
   <li>{{ item }}</li>
@@ -43,6 +41,11 @@ <h2>Planned</h2>
 
 <h2>Research</h2>
 
+<p>
+  Features that we likely will be added in future, but we have some outstanding
+  design questions to resolve.
+</p>
+
 <ul class="roadmap-list">
   {% for item in site.data.roadmap.research %}
   <li>{{ item }}</li>

styles/main.css

@@ -986,3 +986,8 @@ main.content {
   margin: var(--gap-1) 0;
   line-height: var(--gap-3);
 }
+
+.roadmap h2 {
+  border-left: 4px solid var(--color-faff-pink);
+  padding: var(--gap-1) var(--gap-2);
+}