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 %}
@@ -16,7 +16,6 @@
{% if include.link %}
{% endif %}
{% if include.type == "image" %}
{% endif %}
{% if include.caption %}{{ include.caption }}{% endif %}
-
+
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;