commit b6952a502ce804e006a0e2bb360ed2a1ee61e711
parent f41a2b2f8cc13cc9ec861bd28e5d6c427e1a752b
Author: Dan Callaghan <djc@djc.id.au>
Date: Sun, 4 Oct 2026 12:05:02 +1100
add captions for screenshots to explain what is happening in them
Also switch to a grid gallery-style layout, to better make use of space
on wide monitors.
Diffstat:
3 files changed, 70 insertions(+), 17 deletions(-)
diff --git a/_layouts/gallery.md b/_layouts/gallery.md
@@ -0,0 +1,6 @@
+---
+layout: default
+---
+<section class="container gallery">
+ {{ content }}
+</section>
diff --git a/screenshots/index.md b/screenshots/index.md
@@ -1,18 +1,50 @@
---
title: sup screenshots
-layout: narrow_page
-screenshots:
- - /screenshots/1.4/inbox.png
- - /screenshots/1.4/search-results.png
- - /screenshots/1.4/thread-view.png
- - /screenshots/1.4/reply.png
- - /screenshots/1.4/help.png
- - /screenshots/1.4/log.png
- - /screenshots/1.4/console.png
+layout: gallery
---
-{% for shot in page.screenshots %}
-<a href="{{shot}}">
- <img src="{{shot}}"/>
-</a>
-{% endfor %}
-
+<figure>
+ <a href="1.4/inbox.png"><img src="1.4/inbox.png"></a>
+ <figcaption>
+ Sup starts in inbox-mode: a list of threads tagged <tt class="code">inbox</tt>.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/search-results.png"><img src="1.4/search-results.png"></a>
+ <figcaption>
+ <a href="https://github.com/sup-heliotrope/sup/wiki/Searching-Your-Mail">Search your mail</a>
+ and Sup displays a list of matching threads in search-results-mode.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/thread-view.png"><img src="1.4/thread-view.png"></a>
+ <figcaption>
+ In thread-view-mode, read messages are collapsed to a single line by default.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/reply.png"><img src="1.4/reply.png"></a>
+ <figcaption>
+ When replying to a message, reply-mode is pre-populated with quoted text.
+ Press <tt class="code">Enter</tt> to edit the reply in your preferred editor.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/help.png"><img src="1.4/help.png"></a>
+ <figcaption>
+ Press <tt class="code">?</tt> in any mode to see the key bindings for the current mode.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/log.png"><img src="1.4/log.png"></a>
+ <figcaption>
+ The log-mode buffer shows Sup’s internal log messages for debugging purposes.
+ </figcaption>
+</figure>
+<figure>
+ <a href="1.4/console.png"><img src="1.4/console.png"></a>
+ <figcaption>
+ Sup has a built-in interactive Ruby console.
+ It can access Sup internal Ruby objects.
+ You can use it for one-off scripting tasks or to debug your Ruby hook functions.
+ </figcaption>
+</figure>
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
@@ -20,12 +20,25 @@ body {
.container.wide {
max-width: 1000px;
}
-
+.container.gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+ column-gap: 3%;
+ row-gap: 2.5em;
+ margin-bottom: 2.5em;
+}
section {
display: block;
margin: 0 0 20px 0;
}
+.gallery figure {
+ margin: 0;
+}
+.gallery figcaption {
+ margin: 0 5px;
+}
+
h1, h2, h3, h4, h5, h6 {
margin-top: 30px;
}
@@ -167,12 +180,14 @@ blockquote {
border-left: 1px dotted #666;
}
+tt.code, pre.code {
+ color: #b5e853;
+}
pre.code {
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px;
font-size: 14px;
- color: #b5e853;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;