From c9cd49218df901bd91a771d9a5dffca8d0be2f68 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Tue, 26 Aug 2025 01:16:41 +0200 Subject: [PATCH] re-style summary/details tags --- .../docs/ispmail-trixie/158-certbot.mdx | 4 +- .../docs/ispmail-trixie/170-webmail.mdx | 17 +++--- src/styles/custom.css | 53 +++++++++++++++++-- 3 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/content/docs/ispmail-trixie/158-certbot.mdx b/src/content/docs/ispmail-trixie/158-certbot.mdx index 3c101fd..ebb45af 100644 --- a/src/content/docs/ispmail-trixie/158-certbot.mdx +++ b/src/content/docs/ispmail-trixie/158-certbot.mdx @@ -37,7 +37,7 @@ Encrypt is as simple as running the next command. Please replace `mail.example.o certbot --apache --register-unsafely-without-email --agree-tos -d mail.example.org ``` -
+
Click here to learn what the options mean… - **--apache**: Use the [HTTP challenge](https://letsencrypt.org/docs/challenge-types/) to verify that you are actually @@ -76,7 +76,7 @@ If you like Certbot, please consider supporting our work by: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ``` -
+
Click here to learn which files have been created… In /etc/letsencrypt/live/**mail.example.org** you will find a couple of files now: diff --git a/src/content/docs/ispmail-trixie/170-webmail.mdx b/src/content/docs/ispmail-trixie/170-webmail.mdx index da6b410..aecd8a6 100644 --- a/src/content/docs/ispmail-trixie/170-webmail.mdx +++ b/src/content/docs/ispmail-trixie/170-webmail.mdx @@ -8,17 +8,18 @@ sidebar: import { Aside } from "@astrojs/starlight/components"; -I am an email power user and my go-to software is Thunderbird. But apparently most users nowadays prefer reading their -emails in the web browser. So let's prepare [Roundcube](https://roundcube.net/) for them. - ## Configure Apache -… +Now that the email has arrived, our valued user surely wants to read it. Most humans nowadays seem to prefer reading +their email in the web browser, because it's the simplest way. (Don't worry. Power users who prefer mail clients like +Thunderbird will also get what they want.) So let's prepare [Roundcube](https://roundcube.net/) for them. -Do you remember that earlier in this guide I asked you how want to name your mail server? Whether you want to use one -common name like “webmail.example.org” for all your domains? Or if you prefer different host names for each domain like -“webmail.domain1.com” and “webmail.domain2.com”? If you want to use just more then you will have to create one virtual -host configuration per domain. The following instructions will just deal with one common host name. +
+ Click here to learn how Debian handles virtual hosts in Apache… + +ding dong dar + +
To get Apache to serve the Roundcube application you need to edit the diff --git a/src/styles/custom.css b/src/styles/custom.css index 2fded72..60d0f4e 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -31,13 +31,56 @@ li > br { } .ec-line .code { - text-indent: -1em !important; - padding-left: 2em !important; + text-indent: -1em !important; + padding-left: 2em !important; text-wrap: wrap; word-break: break-word; } -.comentario-root -{ +.comentario-root { margin-top: 5em; -} \ No newline at end of file +} + +/* Neutralize Starlight’s default styling */ +details.collapsible { + all: unset; + display: block; /* restore block behavior */ + margin-top: 1.5rem; + margin-bottom: 1em; +} + +/* Style the summary like a button */ +details.collapsible summary { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + padding: 0.5rem 1rem; + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.5rem; + background: var(--sl-color-accent-low); + font-weight: 500; +} + +details[open].collapsible { + background-image: linear-gradient(var(--sl-color-accent-low), var(--sl-color-gray-6)); + border-radius: 0.5rem; + border-left: 1px solid var(--sl-color-gray-5); + border-right: 1px solid var(--sl-color-gray-5); + border-bottom: 1px solid var(--sl-color-gray-5); +} + +/* Make bottom border disappear when details are opened */ +details[open].collapsible summary { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + margin-bottom: 1.5rem; +} + +/* Collapsible content */ +details.collapsible > *:not(summary) { + margin-bottom: 1rem; + /* background: var(--sl-color-accent-low); */ + margin: 0 1rem 1rem 1rem; +}