Hello,
I noticed that the release pages such as https://www.openbsd.org/79.html
don't look great on mobile.
These are the issues:
a) There is no room next to the release image for text, it looks better
if the text is placed below the image
b) The nested lists have too much indentation on mobile
c) There are some long lines that don't overflow, thus the page can
scroll horizontally everywhere.
d) There are sections (like updated packages) with three columns, they
look better with two columns on mobile.
I've added some code to the style sheet openbsd.css to fix these issues.
I've tested it with a few pages, including the first one to use
"id=release", which was OpenBSD 2.1.
You'll find my patch attached to this email.
Regards,
-Sven
PS: I'm currently not subscribed to this list, please CC me on replies.
Index: openbsd.css
===================================================================
RCS file: /cvs/www/openbsd.css,v
diff -u -r1.22 openbsd.css
--- openbsd.css 4 Jan 2022 16:43:45 -0000 1.22
+++ openbsd.css 19 May 2026 19:20:45 -0000
@@ -201,6 +201,8 @@
#release table.signify td {
padding: 0;
+ overflow-wrap: anywhere;
+ word-break: break-all;
}
#release h3 {
@@ -272,6 +274,56 @@
#platform h3 {
color: var(--blue);
+}
+
+/* mobile layout */
+
+@media (max-width: 768px) {
+ #release #OpenBSD + table > tbody > tr > td {
+ display: block;
+ padding-left: 0;
+ }
+
+ #release #OpenBSD + table img {
+ display: block;
+ margin: 0 auto 1em;
+ }
+
+ #release table.signify {
+ font-size: 0.8em;
+ }
+
+ #platform #OpenBSD + hr + table td {
+ display: block;
+ }
+
+ #release ul {
+ padding-left: 1em;
+ }
+
+ #release #OpenBSD + table ul {
+ padding-left: 1.5em;
+ }
+
+ code {
+ white-space: normal;
+ }
+
+ tt {
+ white-space: normal;
+ }
+
+ pre {
+ white-space: pre-wrap;
+ }
+
+ body {
+ overflow-wrap: anywhere;
+ }
+
+ #release ul[style*="column-count"] {
+ column-count: 2 !important;
+ }
}
/* redefine colors for dark mode */
