From ac418d87d0aebbce771d55a99b6783219efb5edf Mon Sep 17 00:00:00 2001
From: Louis Pilfold <louis@lpil.uk>
Date: Fri, 6 Dec 2024 16:46:15 +0000
Subject: [PATCH] Improve design

---
 _layouts/page.html | 11 ++++-------
 roadmap.html       | 37 ++++++++++++++++++++-----------------
 styles/main.css    |  5 +++++
 3 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/_layouts/page.html b/_layouts/page.html
index dfdc4bd7..6eac4d20 100644
--- a/_layouts/page.html
+++ b/_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>
diff --git a/roadmap.html b/roadmap.html
index 43bc4b6b..24e45c44 100644
--- a/roadmap.html
+++ b/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>
diff --git a/styles/main.css b/styles/main.css
index 74fc0f9e..37401f1b 100644
--- a/styles/main.css
+++ b/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);
+}