From: Dan Callaghan <dan@bl2.djc.id.au>
To: sup-commits@supmua.dev
Subject: [sup-website.git] 01/02: add captions for screenshots to explain what is happening in them
Date: Sun, 04 Oct 2026 14:26:15 +1100 [thread overview]
Message-ID: <20261004032615.2926227D74E@bl2.djc.id.au> (raw)
In-Reply-To: <179108437497.261740.4512669247741410056@bl2.djc.id.au>
New commit on branch master:
https://supmua.dev/git/sup-website/commit/b6952a502ce804e006a0e2bb360ed2a1ee61e711.html
commit b6952a502ce804e006a0e2bb360ed2a1ee61e711
Author: Dan Callaghan <djc@djc.id.au>
AuthorDate: Sun Oct 4 12:05:02 2026 +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.
---
_layouts/gallery.md | 6 +++++
screenshots/index.md | 62 +++++++++++++++++++++++++++++++++++-----------
stylesheets/stylesheet.css | 19 ++++++++++++--
3 files changed, 70 insertions(+), 17 deletions(-)
diff --git a/_layouts/gallery.md b/_layouts/gallery.md
new file mode 100644
index 0000000..74292d7
--- /dev/null
+++ 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
index d71e284..48bb179 100644
--- 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
index 501bff0..dea8403 100644
--- 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;
next prev parent reply other threads:[~2026-10-04 3:26 UTC|newest]
Thread overview: 3+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-10-04 3:26 [sup-website.git] branch master updated (f41a2b2 -> 7fb1906) Dan Callaghan
2026-10-04 3:26 ` Dan Callaghan [this message]
2026-10-04 3:26 ` [sup-website.git] 02/02: fix screenshot layout on phones Dan Callaghan
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20261004032615.2926227D74E@bl2.djc.id.au \
--to=dan@bl2.djc.id.au \
--cc=djc@djc.id.au \
--cc=sup-commits@supmua.dev \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox