diff --git a/_includes/blocks/column.liquid b/_includes/blocks/column.liquid index c81b0c4..a55d5cc 100644 --- a/_includes/blocks/column.liquid +++ b/_includes/blocks/column.liquid @@ -1 +1 @@ -{% capture content %}
{{ include.content }}
{% endcapture %}{% include blocks/_base.liquid type="column" content=content float=include.float align=include.align width=include.width %} +{{ include.content }} diff --git a/_includes/blocks/columns.liquid b/_includes/blocks/columns.liquid index 69fe986..9733305 100644 --- a/_includes/blocks/columns.liquid +++ b/_includes/blocks/columns.liquid @@ -1 +1,3 @@ -{% capture content %}
{{ include.content }}
{% endcapture %}{% include blocks/_base.liquid type="columns" content=content float=include.float align=include.align %} \ No newline at end of file + +{{ include.content }} + diff --git a/_includes/blocks/media.liquid b/_includes/blocks/media.liquid index d8c1ba8..479cae3 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 %} - +
{% if include.player %}
diff --git a/_sass/_block-columns.scss b/_sass/_block-columns.scss index 8e76d68..6af5771 100644 --- a/_sass/_block-columns.scss +++ b/_sass/_block-columns.scss @@ -1,80 +1,94 @@ // -------------------------------------------------------------------------------- // Columns // -------------------------------------------------------------------------------- -.block-columns { -} -.block-columns > .content { +columns { display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr)); grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; } +columns[count="2"] { + grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 2 - 5rem), 1fr)); +} + +columns[count="3"] { + grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr)); +} + +columns[count="4"] { + grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 4 - 5rem), 1fr)); +} + // Columns: Horizontal Alignment -.block-columns > .content.halign-start, -.block-columns > .content.halign-left { +columns.halign-start, +columns.halign-left { align-items: start; } -.block-columns > .content.halign-end, -.block-columns > .content.halign-right { +columns.halign-end, +columns.halign-right { align-items: end; } -.block-columns > .content.halign-center, -.block-columns > .content.halign-middle { +columns.halign-center, +columns.halign-middle { align-items: center; } -.block-columns > .content.halign-baseline, -.block-columns > .content.halign-text { +columns.halign-baseline, +columns.halign-text { align-items: baseline; } -.block-columns > .content.halign-stretch, -.block-columns > .content.halign-fill { +columns.halign-stretch, +columns.halign-fill { align-items: stretch; } -.block-columns > .content.valign-start, -.block-columns > .content.valign-left { +columns.valign-start, +columns.valign-left { justify-items: start; } -.block-columns > .content.valign-end, -.block-columns > .content.valign-right { +columns.valign-end, +columns.valign-right { justify-items: end; } -.block-columns > .content.valign-center, -.block-columns > .content.valign-middle { +columns.valign-center, +columns.valign-middle { justify-items: center; } -.block-columns > .content.valign-baseline, -.block-columns > .content.valign-text { +columns.valign-baseline, +columns.valign-text { justify-items: baseline; } -.block-columns > .content.valign-stretch, -.block-columns > .content.valign-fill { +columns.valign-stretch, +columns.valign-fill { justify-items: stretch; } // -------------------------------------------------------------------------------- // Individual Column // -------------------------------------------------------------------------------- -.block-column { +column { padding: 0 0; } -.block-column ~ .block-column { +column ~ column { margin-top: 0; } // -------------------------------------------------------------------------------- // Fix Headings inside Columns // -------------------------------------------------------------------------------- -.block-column > .content > .block-heading { +column > h1, +column > h2, +column > h3, +column > h4, +column > h5, +column > h6 { margin: 0; } diff --git a/_sass/_block-media.scss b/_sass/_block-media.scss index 6e9df5f..8b072c7 100644 --- a/_sass/_block-media.scss +++ b/_sass/_block-media.scss @@ -1,21 +1,24 @@ // -------------------------------------------------------------------------------- // Block: Media // -------------------------------------------------------------------------------- -media.block { +figure.block-media { display: block; position: relative; overflow: hidden; } -media.block > a > .content, -media.block > .content { +figure.block-media picture, +figure.block-media picture > img, +figure.block-media video, +figure.block-media audio { + display: block; width: 100%; - height: 100%; + height: auto; object-fit: contain; object-position: center center; } -media.block > figcaption { +figure.block-media > figcaption { display: block; margin: 0; padding: .25em .5em; @@ -29,19 +32,19 @@ media.block > figcaption { // -------------------------------------------------------------------------------- $media-player-button-size: 1.5rem; -media.block.hide { +figure.block-media.hide { cursor: none; } -media.block > .top, -media.block > .bottom { +figure.block-media > .top, +figure.block-media > .bottom { display: block; margin: 0; padding: 0.2rem 0.5rem; z-index: 1; } -media.block > .top { +figure.block-media > .top { position: absolute; top: 0; left: 0; @@ -63,17 +66,17 @@ media.block > .top { user-select: none; } -media.block.hide > .top { +figure.block-media.hide > .top { top: -100%; opacity: 0.0; transition: top ease-in-out 500ms, opacity ease-in-out 500s; } -media.block > .top > .variant { +figure.block-media > .top > .variant { flex-grow: 1; } -media.block > .bottom { +figure.block-media > .bottom { position: absolute; bottom: 0; left: 0; @@ -95,13 +98,13 @@ media.block > .bottom { user-select: none; } -media.block.hide > .bottom { +figure.block-media.hide > .bottom { bottom: -100%; opacity: 0.0; transition: top ease-in-out 500ms, opacity ease-in-out 500s; } -media.block > .bottom > .play { +figure.block-media > .bottom > .play { display: block; flex-grow: 0; margin: 0; @@ -114,10 +117,10 @@ media.block > .bottom > .play { text-align: center; user-select: none; } -media.block > .bottom > .play.playing { +figure.block-media > .bottom > .play.playing { } -media.block > .bottom > .time { +figure.block-media > .bottom > .time { display: block; margin: 0; padding: 0; @@ -132,7 +135,7 @@ media.block > .bottom > .time { user-select: auto; } -media.block > .bottom > .progress { +figure.block-media > .bottom > .progress { margin: 0; padding: 0; width: auto; @@ -144,7 +147,7 @@ media.block > .bottom > .progress { display: block; user-select: none; } -media.block > .bottom > .mute { +figure.block-media > .bottom > .mute { display: block; margin: 0; padding: 0; @@ -159,10 +162,10 @@ media.block > .bottom > .mute { text-align: center; user-select: none; } -media.block > .bottom > .mute.muted { +figure.block-media > .bottom > .mute.muted { } -media.block > .bottom > .volume { +figure.block-media > .bottom > .volume { display: block; margin: 0; padding: 0; @@ -177,7 +180,7 @@ media.block > .bottom > .volume { user-select: none; } -media.block > .bottom > .fullscreen { +figure.block-media > .bottom > .fullscreen { display: block; margin: 0; padding: 0; @@ -194,43 +197,19 @@ media.block > .bottom > .fullscreen { } @media (max-width: 500px) { - media.block > .bottom > .time { + figure.block-media > .bottom > .time { display: none; } } @media (max-width: 350px) { - media.block > .bottom > .volume { + figure.block-media > .bottom > .volume { display: none; } } @media (max-width: 250px) { - media.block > .bottom > .play, - media.block > .bottom > .mute, - media.block > .bottom > .fullscreen { + figure.block-media > .bottom > .play, + figure.block-media > .bottom > .mute, + figure.block-media > .bottom > .fullscreen { display: none; } } - -// -------------------------------------------------------------------------------- -// Block: Media > Audio -// -------------------------------------------------------------------------------- - -// -------------------------------------------------------------------------------- -// Block: Media > Video -// -------------------------------------------------------------------------------- -media.block > a > video, -media.block > video { - display: block; - width: 100%; - object-fit: contain; - object-position: center; -} - -// -------------------------------------------------------------------------------- -// Block: Media > Picture -// -------------------------------------------------------------------------------- -media.block > a > img, -media.block > img { - display: block; - width: 100%; -} diff --git a/_sass/_block-table.scss b/_sass/_block-table.scss index 03f4376..1bf1b4b 100644 --- a/_sass/_block-table.scss +++ b/_sass/_block-table.scss @@ -1,10 +1,8 @@ // -------------------------------------------------------------------------------- // Block: Table // -------------------------------------------------------------------------------- -.block-table { -} -.block-table > table { +figure.block-table > table { margin: 0; padding: 0; display: table; @@ -13,27 +11,27 @@ border-collapse: collapse; } -.block-table > table > thead > tr, -.block-table > table > tbody > tr { +figure.block-table > table > thead > tr, +figure.block-table > table > tbody > tr { margin: 0; padding: 0; vertical-align: top; } -.block-table > table > thead > tr { +figure.block-table > table > thead > tr { background: $theme-article-table-head-background; } -.block-table > table > tbody > tr { +figure.block-table > table > tbody > tr { background: $theme-article-table-body-background; } -.block-table > table > tbody > tr:nth-child(2n) { +figure.block-table > table > tbody > tr:nth-child(2n) { background: $theme-article-table-body-background-alt; } -.block-table > table > thead > tr > th, -.block-table > table > tbody > tr > th { +figure.block-table > table > thead > tr > th, +figure.block-table > table > tbody > tr > th { margin: 0; padding: 0.75rem 1.5rem; font-weight: bold; @@ -45,8 +43,8 @@ border-bottom: none; } -.block-table > table > thead > tr > td, -.block-table > table > tbody > tr > td { +figure.block-table > table > thead > tr > td, +figure.block-table > table > tbody > tr > td { margin: 0; padding: 0.5rem 0.75rem; border: 1px solid rgba(0, 0, 0, 0.5); @@ -54,7 +52,7 @@ border-bottom: none; } -.block-table > table + figcaption { +figure.block-table > figcaption { display: block; margin: 0; padding: .25em .5em;