xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Further move towards clean HTML5+CSS

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-04 21:24:44 +02:00
parent df83ae78d0
commit c7b260c536
8 changed files with 138 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/blocks/media.liquid
+1 -1
View File
@@ -1,5 +1,5 @@
{% assign file_info = site.static_files | where: "path", include.url %}
<figure class="block block-media {% 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 %} {% if include.player %}player{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">
<figure 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 %} {% if include.player %}player{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">
{% if include.player %}
<div class="top">
<select class="variant"></select>
_includes/blocks/table.liquid
+1 -1
View File
@@ -1 +1 @@
<figure class="block block-table {% 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 %}""><table>{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}</figure>
<figure 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 %}""><table>{{ include.content }}</table>{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}</figure>
_sass/_block-figure.scss
+88
View File
@@ -0,0 +1,88 @@
// --------------------------------------------------------------------------------
// Block: Figure
// --------------------------------------------------------------------------------
figure.block {
display: block;
position: relative;
overflow: hidden;
}
figure.block > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
// --------------------------------------------------------------------------------
// Block: Figure > Media
// --------------------------------------------------------------------------------
figure.block > picture,
figure.block > picture > img,
figure.block > video,
figure.block > audio {
display: block;
max-width: 100%;
width: auto;
max-height: 1005;
height: auto;
object-fit: contain;
object-position: center center;
}
@import "_block-figure-player.scss"
// --------------------------------------------------------------------------------
// Block: Figure > Table
// --------------------------------------------------------------------------------
figure.block > table {
margin: 0;
padding: 0;
display: table;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
figure.block > table > thead > tr,
figure.block > table > tbody > tr {
margin: 0;
padding: 0;
vertical-align: top;
}
figure.block > table > thead > tr {
background: $theme-article-table-head-background;
}
figure.block > table > tbody > tr {
background: $theme-article-table-body-background;
}
figure.block > table > tbody > tr:nth-child(2n) {
background: $theme-article-table-body-background-alt;
}
figure.block > table > thead > tr > th,
figure.block > table > tbody > tr > th {
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: bold;
font-variant: small-caps;
text-align: start;
vertical-align: top;
border: 1px solid rgba(0, 0, 0, 0.5);
border-top: none;
border-bottom: none;
}
figure.block > table > thead > tr > td,
figure.block > table > tbody > tr > td {
margin: 0;
padding: 0.5rem 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.5);
border-top: none;
border-bottom: none;
}
_sass/_block-heading.scss
+20 -48
View File
@@ -1,21 +1,17 @@
// --------------------------------------------------------------------------------
// Block: Heading
// --------------------------------------------------------------------------------
.block + h1.block,
.block + h2.block,
.block + h3.block,
.block + h4.block,
.block + h5.block,
.block + h6.block {
h1,
h2,
h3,
h4,
h5,
h6 {
.block+&.block {
margin-top: 2rem;
}
}
h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
&.block {
margin: 0;
margin-left: -0.75rem;
margin-right: -0.75rem;
@@ -24,36 +20,21 @@ h6.block {
font-weight: bold;
line-height: 1.333em;
padding: 0.5rem 0.75rem;
}
}
h1.block > a,
h2.block > a,
h3.block > a,
h4.block > a,
h5.block > a,
h6.block > a {
&.block>a {
color: $theme-article-heading-link-color;
}
}
h1.block > a:active,
h2.block > a:active,
h3.block > a:active,
h4.block > a:active,
h5.block > a:active,
h6.block > a:active,
h1.block > a:focus,
h2.block > a:focus,
h3.block > a:focus,
h4.block > a:focus,
h5.block > a:focus,
h6.block > a:focus,
h1.block > a:hover,
h2.block > a:hover,
h3.block > a:hover,
h4.block > a:hover,
h5.block > a:hover,
h6.block > a:hover {
&.block>a:active,
&.block>a:focus,
&.block>a:hover {
color: $theme-article-heading-link-color-active;
}
&.block+.block {
margin-top: .5rem;
}
}
h1.block {
@@ -85,12 +66,3 @@ h6.block {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
h1.block + .block,
h2.block + .block,
h3.block + .block,
h4.block + .block,
h5.block + .block,
h6.block + .block {
margin-top: .5rem;
}
_sass/_block-list.scss
+11 -11
View File
@@ -1,23 +1,23 @@
// --------------------------------------------------------------------------------
// Block: List
// --------------------------------------------------------------------------------
ul.block,
ol.block {
ul,
ol {
&.block {
overflow: hidden;
}
}
ul.block,
ol.block {
&.block {
margin: 0;
padding: 0 0 0 2em;
}
}
ul.block > li,
ol.block > li {
&.block>li {
padding: 0 0 0 0;
}
}
ul.block > li + li
ol.block > li + li {
&.block>li+li {
padding: .2em 0 0 0;
}
}
_sass/_block-table.scss
-62
View File
@@ -1,62 +0,0 @@
// --------------------------------------------------------------------------------
// Block: Table
// --------------------------------------------------------------------------------
figure.block-table > table {
margin: 0;
padding: 0;
display: table;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
figure.block-table > table > thead > tr,
figure.block-table > table > tbody > tr {
margin: 0;
padding: 0;
vertical-align: top;
}
figure.block-table > table > thead > tr {
background: $theme-article-table-head-background;
}
figure.block-table > table > tbody > tr {
background: $theme-article-table-body-background;
}
figure.block-table > table > tbody > tr:nth-child(2n) {
background: $theme-article-table-body-background-alt;
}
figure.block-table > table > thead > tr > th,
figure.block-table > table > tbody > tr > th {
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: bold;
font-variant: small-caps;
text-align: start;
vertical-align: top;
border: 1px solid rgba(0, 0, 0, 0.5);
border-top: none;
border-bottom: none;
}
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);
border-top: none;
border-bottom: none;
}
figure.block-table > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
_sass/_block-media.scss → _sass/_block_figure-player.scss
-29
View File
@@ -1,32 +1,3 @@
// --------------------------------------------------------------------------------
// Block: Media
// --------------------------------------------------------------------------------
figure.block-media {
display: block;
position: relative;
overflow: hidden;
}
figure.block-media picture,
figure.block-media picture > img,
figure.block-media video,
figure.block-media audio {
display: block;
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
}
figure.block-media > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
// --------------------------------------------------------------------------------
// Block: Media Player
// --------------------------------------------------------------------------------
_sass/_blocks.scss
+1 -2
View File
@@ -81,7 +81,6 @@
@import "_block-code.scss";
@import "_block-columns.scss";
@import "_block-details.scss";
@import "_block-figure.scss";
@import "_block-heading.scss";
@import "_block-list.scss";
@import "_block-media.scss";
@import "_block-table.scss";