Add details block

This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2022-01-10 09:22:52 +01:00
parent 3c7498b052
commit 956c88eaee
3 changed files with 65 additions and 0 deletions
+7
View File
@@ -0,0 +1,7 @@
{% capture content %}
<details class="content {% if include.align %}{{ include.align }}{% endif %}" {% if include.open %}open{% endif %}>
<summary data-heading="{{ include.level | default: 0 }}">{{ include.title }}</summary>
{{ include.content }}
</details>
{% endcapture %}
{% include blocks/_base.liquid type="details" content=content float=include.float align=include.align %}
+57
View File
@@ -0,0 +1,57 @@
// --------------------------------------------------------------------------------
// Details
// --------------------------------------------------------------------------------
.block-details {
margin: 0;
margin-left: -0.75rem;
margin-right: -0.75rem;
padding: 0;
}
.block-details > .content {
margin: 0;
padding: 0.75rem;
}
.block-details > .content > summary {
margin-top: -0.75rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-bottom: 0.75rem;
}
.block-details > .content > summary[data-heading] {
font-variant: small-caps;
font-weight: bold;
padding: 0.5rem 0.75rem;
}
.block-details > .content > summary[data-heading="1"] {
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
.block-details > .content > summary[data-heading="2"] {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
.block-details > .content > summary[data-heading="3"] {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
.block-details > .content > summary[data-heading="4"] {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
.block-details > .content > summary[data-heading="5"] {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
.block-details > .content > summary[data-heading="6"] {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
+1
View File
@@ -120,6 +120,7 @@
// Specialized Blocks // Specialized Blocks
// -------------------------------------------------------------------------------- // --------------------------------------------------------------------------------
@import "_block-columns.scss"; @import "_block-columns.scss";
@import "_block-details.scss";
@import "_block-heading.scss"; @import "_block-heading.scss";
@import "_block-media.scss"; @import "_block-media.scss";
@import "_block-table.scss"; @import "_block-table.scss";