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

Prefer HTML over Liquid Templates

Browse Source 
While Liquid is powerful, it is completely unreadable for many things, and actively makes documents harder to read. So instead of relying on it for everything, why not just use HTML5 for the page?

The change reduces the parsing overhead for browser by about 30% through reducing the number of useless <div> elements. Additionally the CSS became easier to read as well.
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-03 22:25:08 +02:00
parent d309d1e607
commit 441a8f0655
18 changed files with 151 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/_block-media.scss
+30 -29
View File
@@ -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%;
}