Michael Fabian 'Xaymar' Dirks
441a8f0655
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.
237 lines
4.8 KiB
SCSS
237 lines
4.8 KiB
SCSS
// --------------------------------------------------------------------------------
|
|
// Block: Media
|
|
// --------------------------------------------------------------------------------
|
|
media.block {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
media.block > a > .content,
|
|
media.block > .content {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
object-position: center center;
|
|
}
|
|
|
|
media.block > 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
|
|
// --------------------------------------------------------------------------------
|
|
$media-player-button-size: 1.5rem;
|
|
|
|
media.block.hide {
|
|
cursor: none;
|
|
}
|
|
|
|
media.block > .top,
|
|
media.block > .bottom {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0.2rem 0.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
media.block > .top {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
padding-bottom: 1rem;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
gap: 0.5rem;
|
|
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
|
|
transition: top ease-in-out 100ms, opacity ease-in-out 100s;
|
|
opacity: 1.0;
|
|
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
media.block.hide > .top {
|
|
top: -100%;
|
|
opacity: 0.0;
|
|
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
|
|
}
|
|
|
|
media.block > .top > .variant {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
media.block > .bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
padding-top: 1rem;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
gap: 0.5rem;
|
|
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
|
|
transition: top ease-in-out 100ms, opacity ease-in-out 100s;
|
|
opacity: 1.0;
|
|
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
media.block.hide > .bottom {
|
|
bottom: -100%;
|
|
opacity: 0.0;
|
|
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
|
|
}
|
|
|
|
media.block > .bottom > .play {
|
|
display: block;
|
|
flex-grow: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: $media-player-button-size;
|
|
height: $media-player-button-size;
|
|
|
|
font-size: $media-player-button-size;
|
|
line-height: $media-player-button-size;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
media.block > .bottom > .play.playing {
|
|
}
|
|
|
|
media.block > .bottom > .time {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: auto;
|
|
height: $media-player-button-size;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-basis: auto;
|
|
|
|
text-align: right;
|
|
line-height: $media-player-button-size;
|
|
user-select: auto;
|
|
}
|
|
|
|
media.block > .bottom > .progress {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: auto;
|
|
min-width: 5rem;
|
|
height: 100%;
|
|
flex-grow: 5;
|
|
flex-shrink: 1;
|
|
|
|
display: block;
|
|
user-select: none;
|
|
}
|
|
media.block > .bottom > .mute {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: $media-player-button-size;
|
|
height: $media-player-button-size;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-basis: auto;
|
|
|
|
font-size: $media-player-button-size;
|
|
line-height: $media-player-button-size;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
media.block > .bottom > .mute.muted {
|
|
}
|
|
|
|
media.block > .bottom > .volume {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: auto;
|
|
min-width: 3rem;
|
|
max-width: 6rem;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 5;
|
|
flex-basis: auto;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
media.block > .bottom > .fullscreen {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: $media-player-button-size;
|
|
height: $media-player-button-size;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-basis: auto;
|
|
|
|
font-size: $media-player-button-size;
|
|
line-height: $media-player-button-size;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
media.block > .bottom > .time {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 350px) {
|
|
media.block > .bottom > .volume {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 250px) {
|
|
media.block > .bottom > .play,
|
|
media.block > .bottom > .mute,
|
|
media.block > .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%;
|
|
}
|