diff --git a/_includes/blocks/code.liquid b/_includes/blocks/code.liquid index 387b678..1b9c9fb 100644 --- a/_includes/blocks/code.liquid +++ b/_includes/blocks/code.liquid @@ -1 +1 @@ -{% capture content %}{{ include.content }}{% endcapture %}{% include blocks/_base.liquid type="code" content=content float=include.float align=include.align %} \ No newline at end of file +{{ include.content }} diff --git a/_includes/blocks/details.liquid b/_includes/blocks/details.liquid index aa591a5..6a62d7f 100644 --- a/_includes/blocks/details.liquid +++ b/_includes/blocks/details.liquid @@ -1 +1 @@ -{% capture content %}
{{ include.title }}{{ include.content }}
{% endcapture %}{% include blocks/_base.liquid type="details" content=content float=include.float align=include.align %} \ No newline at end of file +
{{ include.title }}{{ include.content }}
diff --git a/_includes/blocks/heading.liquid b/_includes/blocks/heading.liquid index 987f481..9449630 100644 --- a/_includes/blocks/heading.liquid +++ b/_includes/blocks/heading.liquid @@ -1 +1 @@ -{% capture content %}{{ include.content }}{% endcapture %}{% include blocks/_base.liquid type="heading" content=content float=include.float align=include.align %} +{{ include.content }} diff --git a/_includes/blocks/list.liquid b/_includes/blocks/list.liquid index e282627..a6e54b2 100644 --- a/_includes/blocks/list.liquid +++ b/_includes/blocks/list.liquid @@ -1 +1 @@ -{% capture content %}{% if include.ordered %}
    {% else %}
{% else %}{% endif %}{% endcapture %}{% include blocks/_base.liquid type="list" content=content float=include.float align=include.align %} \ No newline at end of file +<{% if include.ordered %}ol{% else %}ul{% endif %} class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">{{ include.content }}{% if include.ordered %}{% else %}{% endif %} diff --git a/_includes/blocks/media.liquid b/_includes/blocks/media.liquid index 01865b9..d8c1ba8 100644 --- a/_includes/blocks/media.liquid +++ b/_includes/blocks/media.liquid @@ -1,5 +1,5 @@ {% assign file_info = site.static_files | where: "path", include.url %} -{% capture content %} + {% if include.player %}
@@ -76,6 +76,4 @@ {% endif %} {% if include.link %}{% endif %} {% if include.caption %}
{{ include.caption }}
{% endif %} -{% endcapture %} -{% if include.player %}{% assign class = include.type | append: " player" %}{% else %}{% assign class = include.type %}{% endif %} -{% include blocks/_base.liquid type="media" class=class content=content float=include.float align=include.align id=include.id %} + diff --git a/_includes/blocks/paragraph.liquid b/_includes/blocks/paragraph.liquid index 8b4c628..cdcacc0 100644 --- a/_includes/blocks/paragraph.liquid +++ b/_includes/blocks/paragraph.liquid @@ -1 +1 @@ -{% capture content %}

{{ include.content }}

{% endcapture %}{% include blocks/_base.liquid type="paragraph" content=content float=include.float align=include.align %} \ No newline at end of file +

{{ include.content }}

diff --git a/_includes/blocks/table.liquid b/_includes/blocks/table.liquid index 529e761..6a6ac6a 100644 --- a/_includes/blocks/table.liquid +++ b/_includes/blocks/table.liquid @@ -1 +1 @@ -{% capture content %}{{ include.content }}
{% if include.caption %}
{{ include.caption }}
{% endif %}{% endcapture %}{% include blocks/_base.liquid type="table" content=content float=include.float align=include.align %} \ No newline at end of file +
{{ include.content }}
{% if include.caption %}
{{ include.caption }}
{% endif %}
diff --git a/_includes/inline/code.liquid b/_includes/inline/code.liquid index 4adf7f6..f8350bd 100644 --- a/_includes/inline/code.liquid +++ b/_includes/inline/code.liquid @@ -1 +1 @@ -{{ include.content }} \ No newline at end of file +{{ include.content }} diff --git a/_sass/_article.scss b/_sass/_article.scss index c6ee9e3..653e9dd 100644 --- a/_sass/_article.scss +++ b/_sass/_article.scss @@ -115,3 +115,7 @@ article > .meta > .tags > .tag:not(:last-child):after { margin: 0; padding: 0; } + +article { +@import "_blocks.scss"; +} diff --git a/_sass/_block-code.scss b/_sass/_block-code.scss index 4309159..4fb22f0 100644 --- a/_sass/_block-code.scss +++ b/_sass/_block-code.scss @@ -1,11 +1,8 @@ // -------------------------------------------------------------------------------- // Block: Code // -------------------------------------------------------------------------------- -.block-code { +code.block { background: $theme-code-background; -} - -.block-code > .content { display: block; padding: .25rem; max-height: 10em; @@ -19,9 +16,9 @@ // -------------------------------------------------------------------------------- // Inline: Code // -------------------------------------------------------------------------------- -.inline-code { +code { margin: 0; - padding: 0; + padding: .05rem .25em; background: $theme-code-background; font-family: monospace; font-size: 1em; diff --git a/_sass/_block-details.scss b/_sass/_block-details.scss index 9f15036..8f61250 100644 --- a/_sass/_block-details.scss +++ b/_sass/_block-details.scss @@ -1,19 +1,14 @@ // -------------------------------------------------------------------------------- // Details // -------------------------------------------------------------------------------- -.block-details { +details.block { margin: 0; margin-left: -0.75rem; margin-right: -0.75rem; - padding: 0; -} - -.block-details > .content { - margin: 0; padding: 0.75rem; } -.block-details > .content > summary { +details.block > summary { margin-top: -0.75rem; margin-left: -0.75rem; margin-right: -0.75rem; @@ -21,38 +16,68 @@ cursor: pointer; } -.block-details > .content > summary[data-heading] { +details.block > summary:has(h1), +details.block > summary:has(h2), +details.block > summary:has(h3), +details.block > summary:has(h4), +details.block > summary:has(h5), +details.block > summary:has(h6), +details.block > summary[data-heading] { + width: 100%; font-variant: small-caps; font-weight: bold; padding: 0.5rem 0.75rem; } -.block-details > .content > summary[data-heading="1"] { +details.block > summary:has(h1), +details.block > summary[data-heading="1"] { font-size: 2.0rem; background: $theme-article-heading-h1-background; } -.block-details > .content > summary[data-heading="2"] { +details.block > summary:has(h2), +details.block > summary[data-heading="2"] { font-size: 1.8rem; background: $theme-article-heading-h2-background; } -.block-details > .content > summary[data-heading="3"] { +details.block > summary:has(h3), +details.block > summary[data-heading="3"] { font-size: 1.6667rem; background: $theme-article-heading-h3-background; } -.block-details > .content > summary[data-heading="4"] { +details.block > summary:has(h4), +details.block > summary[data-heading="4"] { font-size: 1.45rem; background: $theme-article-heading-h4-background; } -.block-details > .content > summary[data-heading="5"] { +details.block > summary:has(h5), +details.block > summary[data-heading="5"] { font-size: 1.3333rem; background: $theme-article-heading-h5-background; } -.block-details > .content > summary[data-heading="6"] { +details.block > summary:has(h6), +details.block > summary[data-heading="6"] { font-size: 1.2rem; background: $theme-article-heading-h6-background; } + +details.block > summary > h1, +details.block > summary > h2, +details.block > summary > h3, +details.block > summary > h4, +details.block > summary > h5, +details.block > summary > h6 { + display: inline-block; + margin: 0; + padding: 0; + font-size: inherit; + font-weight: inherit; + font-variant: inherit; + font-style: inherit; + color: inherit; + background-color: transparent; +} diff --git a/_sass/_block-heading.scss b/_sass/_block-heading.scss index ee234fd..b2a95e7 100644 --- a/_sass/_block-heading.scss +++ b/_sass/_block-heading.scss @@ -1,50 +1,74 @@ -.block + .block-heading { +// -------------------------------------------------------------------------------- +// Block: Heading +// -------------------------------------------------------------------------------- +.block + h1.block, +.block + h2.block, +.block + h3.block, +.block + h4.block, +.block + h5.block, +.block + h6.block { margin-top: 2rem; } -.block-heading { +h1.block, +h2.block, +h3.block, +h4.block, +h5.block, +h6.block { margin: 0; margin-left: -0.75rem; margin-right: -0.75rem; padding: 0; -} - -.block-heading > .content { font-variant: small-caps; font-weight: bold; padding: 0.5rem 0.75rem; } -.block-heading > h1.content { +h1.block > a, +h2.block > a, +h3.block > a, +h4.block > a, +h5.block > a, +h6.block > a { + color: inherit !important; +} + +h1.block { font-size: 2.0rem; background: $theme-article-heading-h1-background; } -.block-heading > h2.content { +h2.block { font-size: 1.8rem; background: $theme-article-heading-h2-background; } -.block-heading > h3.content { +h3.block { font-size: 1.6667rem; background: $theme-article-heading-h3-background; } -.block-heading > h4.content { +h4.block { font-size: 1.45rem; background: $theme-article-heading-h4-background; } -.block-heading > h5.content { +h5.block { font-size: 1.3333rem; background: $theme-article-heading-h5-background; } -.block-heading > h6.content { +h6.block { font-size: 1.2rem; background: $theme-article-heading-h6-background; } -.block-heading + .block { +h1.block + .block, +h2.block + .block, +h3.block + .block, +h4.block + .block, +h5.block + .block, +h6.block + .block { margin-top: .5rem; } diff --git a/_sass/_block-list.scss b/_sass/_block-list.scss new file mode 100644 index 0000000..1a23260 --- /dev/null +++ b/_sass/_block-list.scss @@ -0,0 +1,23 @@ +// -------------------------------------------------------------------------------- +// Block: List +// -------------------------------------------------------------------------------- +ul.block, +ol.block { + overflow: hidden; +} + +ul.block, +ol.block { + margin: 0; + padding: 0 0 0 2em; +} + +ul.block > li, +ol.block > li { + padding: 0 0 0 0; +} + +ul.block > li + li +ol.block > li + li { + padding: .2em 0 0 0; +} diff --git a/_sass/_block-media.scss b/_sass/_block-media.scss index e0ba1aa..6e9df5f 100644 --- a/_sass/_block-media.scss +++ b/_sass/_block-media.scss @@ -1,20 +1,21 @@ // -------------------------------------------------------------------------------- // Block: Media // -------------------------------------------------------------------------------- -.block-media { +media.block { + display: block; position: relative; overflow: hidden; } -.block-media > a > .content, -.block-media > .content { +media.block > a > .content, +media.block > .content { width: 100%; height: 100%; object-fit: contain; object-position: center center; } -.block-media > figcaption { +media.block > figcaption { display: block; margin: 0; padding: .25em .5em; @@ -28,19 +29,19 @@ // -------------------------------------------------------------------------------- $media-player-button-size: 1.5rem; -.block-media.hide { +media.block.hide { cursor: none; } -.block-media > .top, -.block-media > .bottom { +media.block > .top, +media.block > .bottom { display: block; margin: 0; padding: 0.2rem 0.5rem; z-index: 1; } -.block-media > .top { +media.block > .top { position: absolute; top: 0; left: 0; @@ -62,17 +63,17 @@ $media-player-button-size: 1.5rem; user-select: none; } -.block-media.hide > .top { +media.block.hide > .top { top: -100%; opacity: 0.0; transition: top ease-in-out 500ms, opacity ease-in-out 500s; } -.block-media > .top > .variant { +media.block > .top > .variant { flex-grow: 1; } -.block-media > .bottom { +media.block > .bottom { position: absolute; bottom: 0; left: 0; @@ -94,13 +95,13 @@ $media-player-button-size: 1.5rem; user-select: none; } -.block-media.hide > .bottom { +media.block.hide > .bottom { bottom: -100%; opacity: 0.0; transition: top ease-in-out 500ms, opacity ease-in-out 500s; } -.block-media > .bottom > .play { +media.block > .bottom > .play { display: block; flex-grow: 0; margin: 0; @@ -113,10 +114,10 @@ $media-player-button-size: 1.5rem; text-align: center; user-select: none; } -.block-media > .bottom > .play.playing { +media.block > .bottom > .play.playing { } -.block-media > .bottom > .time { +media.block > .bottom > .time { display: block; margin: 0; padding: 0; @@ -131,7 +132,7 @@ $media-player-button-size: 1.5rem; user-select: auto; } -.block-media > .bottom > .progress { +media.block > .bottom > .progress { margin: 0; padding: 0; width: auto; @@ -143,7 +144,7 @@ $media-player-button-size: 1.5rem; display: block; user-select: none; } -.block-media > .bottom > .mute { +media.block > .bottom > .mute { display: block; margin: 0; padding: 0; @@ -158,10 +159,10 @@ $media-player-button-size: 1.5rem; text-align: center; user-select: none; } -.block-media > .bottom > .mute.muted { +media.block > .bottom > .mute.muted { } -.block-media > .bottom > .volume { +media.block > .bottom > .volume { display: block; margin: 0; padding: 0; @@ -176,7 +177,7 @@ $media-player-button-size: 1.5rem; user-select: none; } -.block-media > .bottom > .fullscreen { +media.block > .bottom > .fullscreen { display: block; margin: 0; padding: 0; @@ -193,19 +194,19 @@ $media-player-button-size: 1.5rem; } @media (max-width: 500px) { - .block-media > .bottom > .time { + media.block > .bottom > .time { display: none; } } @media (max-width: 350px) { - .block-media > .bottom > .volume { + media.block > .bottom > .volume { display: none; } } @media (max-width: 250px) { - .block-media > .bottom > .play, - .block-media > .bottom > .mute, - .block-media > .bottom > .fullscreen { + media.block > .bottom > .play, + media.block > .bottom > .mute, + media.block > .bottom > .fullscreen { display: none; } } @@ -217,8 +218,8 @@ $media-player-button-size: 1.5rem; // -------------------------------------------------------------------------------- // Block: Media > Video // -------------------------------------------------------------------------------- -.block-media > a > video, -.block-media > video { +media.block > a > video, +media.block > video { display: block; width: 100%; object-fit: contain; @@ -228,8 +229,8 @@ $media-player-button-size: 1.5rem; // -------------------------------------------------------------------------------- // Block: Media > Picture // -------------------------------------------------------------------------------- -.block-media > a > .content > img, -.block-media > .content > img { +media.block > a > img, +media.block > img { display: block; width: 100%; } diff --git a/_sass/_block-table.scss b/_sass/_block-table.scss index c6b2a50..03f4376 100644 --- a/_sass/_block-table.scss +++ b/_sass/_block-table.scss @@ -1,6 +1,9 @@ // -------------------------------------------------------------------------------- // Block: Table // -------------------------------------------------------------------------------- +.block-table { +} + .block-table > table { margin: 0; padding: 0; @@ -51,7 +54,7 @@ border-bottom: none; } -.block-table > figcaption { +.block-table > table + figcaption { display: block; margin: 0; padding: .25em .5em; diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss index eafe437..13c87ff 100644 --- a/_sass/_blocks.scss +++ b/_sass/_blocks.scss @@ -41,11 +41,9 @@ clear: both; } -.block.float + .block { +.float + .block { margin-top: 0em; } -.block.float { -} // -------------------------------------------------------------------------------- // Align @@ -74,32 +72,6 @@ text-align: center; } -// -------------------------------------------------------------------------------- -// Block: Paragraph -// -------------------------------------------------------------------------------- - -// -------------------------------------------------------------------------------- -// Block: List -// -------------------------------------------------------------------------------- -.block-list { - overflow: hidden; -} - -.block-list > ul, -.block-list > ol { - margin: 0; - padding: 0 0 0 2em; -} - -.block-list > ul > li, -.block-list > ol > li { - padding: 0 0 0 0; -} -.block-list > ul > li + li, -.block-list > ol > li + li { - padding: .2em 0 0 0; -} - // -------------------------------------------------------------------------------- // Specialized Blocks // -------------------------------------------------------------------------------- @@ -107,5 +79,6 @@ @import "_block-columns.scss"; @import "_block-details.scss"; @import "_block-heading.scss"; +@import "_block-list.scss"; @import "_block-media.scss"; @import "_block-table.scss"; diff --git a/_sass/_content.scss b/_sass/_content.scss index 80c97a9..0e7bfdf 100644 --- a/_sass/_content.scss +++ b/_sass/_content.scss @@ -8,7 +8,6 @@ body > .content { @import "_breadcrumbs.scss"; @import "_article.scss"; -@import "_blocks.scss"; @import "_comments.scss"; @import "_index.scss"; @import "_pagination.scss"; diff --git a/assets/site.js b/assets/site.js index 80ab3db..36a60b0 100644 --- a/assets/site.js +++ b/assets/site.js @@ -408,7 +408,7 @@ async function xmr_initialize_player(el) { async function xmr_initialize_players() { // Figure out what to initialize. - let elements = document.querySelectorAll(".block-media.player"); + let elements = document.querySelectorAll("media.player"); let stack = Array.from(elements); console.debug("Initializing " + stack.length + " players...");