Add details shortcode

This commit is contained in:
Aroy-Art 2024-02-19 18:05:17 +01:00
parent c68cb2c080
commit 03abdc730f
Signed by: Aroy
GPG key ID: DB9689E9391DD156
2 changed files with 77 additions and 0 deletions

View file

@ -576,6 +576,79 @@ nav[aria-label="breadcrumb"] li:last-child a{
Shortcodes
=================================================================*/
details {
margin: 1rem auto;
padding: 0 1rem;
/* width: 35em; */
max-width: calc(100% - 2rem);
position: relative;
border: 1px solid #78909C;
border-radius: 6px;
background-color: #040b1e;
color: #c9a5e7;
transition: background-color 0.15s;
}
details > :last-child {
margin-bottom: 1rem;
}
details::before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
opacity: 0.15;
box-shadow: 0 0.25em 0.5em #263238;
pointer-events: none;
transition: opacity 0.2s;
z-index: -1;
}
details[open] {
background-color: #040b1e;
}
details[open]::before {
opacity: 0.6;
}
summary {
padding: 1rem 2em 1rem 0;
display: block;
position: relative;
font-size: 1.33em;
font-weight: bold;
cursor: pointer;
}
summary::before, summary::after {
width: 0.75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: "";
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
}
summary::after {
transform: translateY(-50%) rotate(90deg);
}
[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
summary::-webkit-details-marker {
display: none;
}
/*=================================================================
Code Blocks

View file

@ -0,0 +1,4 @@
<details class="">
<summary>{{ (.Get 0) | markdownify }}</summary>
{{ .Inner | $.Page.RenderString (dict "display" "block") }}
</details>