re-style summary/details tags
This commit is contained in:
parent
56fc9b8a22
commit
c9cd49218d
3 changed files with 59 additions and 15 deletions
|
|
@ -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
|
certbot --apache --register-unsafely-without-email --agree-tos -d mail.example.org
|
||||||
```
|
```
|
||||||
|
|
||||||
<details>
|
<details class="collapsible">
|
||||||
<summary>Click here to learn what the options mean…</summary>
|
<summary>Click here to learn what the options mean…</summary>
|
||||||
|
|
||||||
- **--apache**: Use the [HTTP challenge](https://letsencrypt.org/docs/challenge-types/) to verify that you are actually
|
- **--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:
|
||||||
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||||
```
|
```
|
||||||
|
|
||||||
<details>
|
<details class="collapsible">
|
||||||
<summary>Click here to learn which files have been created…</summary>
|
<summary>Click here to learn which files have been created…</summary>
|
||||||
|
|
||||||
In /etc/letsencrypt/live/**mail.example.org** you will find a couple of files now:
|
In /etc/letsencrypt/live/**mail.example.org** you will find a couple of files now:
|
||||||
|
|
|
||||||
|
|
@ -8,17 +8,18 @@ sidebar:
|
||||||
|
|
||||||
import { Aside } from "@astrojs/starlight/components";
|
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
|
## 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
|
<details class="collapsible">
|
||||||
common name like “webmail.example.org” for all your domains? Or if you prefer different host names for each domain like
|
<summary>Click here to learn how Debian handles virtual hosts in Apache…</summary>
|
||||||
“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.
|
ding dong dar
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
To get Apache to serve the Roundcube application you need to edit the
|
To get Apache to serve the Roundcube application you need to edit the
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,13 +31,56 @@ li > br {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ec-line .code {
|
.ec-line .code {
|
||||||
text-indent: -1em !important;
|
text-indent: -1em !important;
|
||||||
padding-left: 2em !important;
|
padding-left: 2em !important;
|
||||||
text-wrap: wrap;
|
text-wrap: wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comentario-root
|
.comentario-root {
|
||||||
{
|
|
||||||
margin-top: 5em;
|
margin-top: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue