* [sup-website.git] 01/02: add captions for screenshots to explain what is happening in them
2026-10-04 3:26 [sup-website.git] branch master updated (f41a2b2 -> 7fb1906) Dan Callaghan
@ 2026-10-04 3:26 ` Dan Callaghan
2026-10-04 3:26 ` [sup-website.git] 02/02: fix screenshot layout on phones Dan Callaghan
1 sibling, 0 replies; 3+ messages in thread
From: Dan Callaghan @ 2026-10-04 3:26 UTC (permalink / raw)
To: sup-commits
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;
^ permalink raw reply related [flat|nested] 3+ messages in thread* [sup-website.git] 02/02: fix screenshot layout on phones
2026-10-04 3:26 [sup-website.git] branch master updated (f41a2b2 -> 7fb1906) Dan Callaghan
2026-10-04 3:26 ` [sup-website.git] 01/02: add captions for screenshots to explain what is happening in them Dan Callaghan
@ 2026-10-04 3:26 ` Dan Callaghan
1 sibling, 0 replies; 3+ messages in thread
From: Dan Callaghan @ 2026-10-04 3:26 UTC (permalink / raw)
To: sup-commits
New commit on branch master:
https://supmua.dev/git/sup-website/commit/7fb1906e0e490f92f9c4eba70f6d37267e63ee3c.html
commit 7fb1906e0e490f92f9c4eba70f6d37267e63ee3c
Author: Dan Callaghan <djc@djc.id.au>
AuthorDate: Sun Oct 4 13:55:56 2026 +1100
fix screenshot layout on phones
---
stylesheets/stylesheet.css | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index dea8403..f190f22 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -22,7 +22,7 @@ body {
}
.container.gallery {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(min(500px, 90%), 1fr));
column-gap: 3%;
row-gap: 2.5em;
margin-bottom: 2.5em;
@@ -36,7 +36,7 @@ section {
margin: 0;
}
.gallery figcaption {
- margin: 0 5px;
+ margin: 0;
}
h1, h2, h3, h4, h5, h6 {
@@ -106,7 +106,6 @@ header .tagline {
}
section img {
width: 100%;
- margin: 5px;
box-shadow: 1px 1px 10px rgb(128,128,128);
}
^ permalink raw reply related [flat|nested] 3+ messages in thread