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

Move towards pure HTML5+CSS

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-04 20:50:04 +02:00
parent 949e6eb4a3
commit ae72177f98
6 changed files with 87 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/blocks/column.liquid
+1 -1
View File
@@ -1 +1 @@
{% capture content %}<div class="content">{{ include.content }}</div>{% endcapture %}{% include blocks/_base.liquid type="column" content=content float=include.float align=include.align width=include.width %}
<column>{{ include.content }}</column>
_includes/blocks/columns.liquid
+3 -1
View File
@@ -1 +1,3 @@
{% capture content %}<div class="content {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %}" style="{% if include.columns %}grid-template-columns: repeat({{ include.columns | default: 1 }}, 1fr);{% endif %}">{{ include.content }}</div>{% endcapture %}{% include blocks/_base.liquid type="columns" content=content float=include.float align=include.align %}
<columns class="block {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %} {% 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 %}" count="{{ include.columns | default: 1 }}">
{{ include.content }}
</columns>
_includes/blocks/media.liquid
+2 -5
View File
@@ -1,5 +1,5 @@
{% assign file_info = site.static_files | where: "path", include.url %}
<media 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 %}">
<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 %}">
{% if include.player %}
<div class="top">
<select class="variant"></select>
@@ -16,7 +16,6 @@
{% if include.link %}<a href="{% if include.link == true %}{{ include.url }}{% else %}{{ include.link }}{% endif %}" {% if include.caption %}alt="{{ include.caption }}"{% endif %} target="_blank">{% endif %}
{% if include.type == "image" %}
<picture
class="content"
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}
{% if include.lazyload %}data-lazyload=""{% endif %}
@@ -33,7 +32,6 @@
{% elsif include.type == "video" %}
<video
{% if include.player %}{% else %}controls{% endif %}
class="content"
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}
@@ -55,7 +53,6 @@
{% elsif include.type == "audio" %}
<audio
{% if include.player %}{% else %}controls{% endif %}
class="content"
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}
@@ -76,4 +73,4 @@
{% endif %}
{% if include.link %}</a>{% endif %}
{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
</media>
</figure>
_sass/_block-columns.scss
+41 -27
View File
@@ -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;
}
_sass/_block-media.scss
+29 -50
View File
@@ -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%;
}
_sass/_block-table.scss
+11 -13
View File
@@ -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;