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

Transform more towards HTML5+CSS+JS

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-05 02:26:54 +02:00
parent be07894a38
commit 47e19c1bf2
8 changed files with 680 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/_block-figure-player.scss
-186
View File
@@ -1,186 +0,0 @@
// --------------------------------------------------------------------------------
// Block: Media Player
// --------------------------------------------------------------------------------
$media-player-button-size: 1.5rem;
figure.block-media.hide {
cursor: none;
}
figure.block-media > .top,
figure.block-media > .bottom {
display: block;
margin: 0;
padding: 0.2rem 0.5rem;
z-index: 1;
}
figure.block-media > .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;
}
figure.block-media.hide > .top {
top: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
figure.block-media > .top > .variant {
flex-grow: 1;
}
figure.block-media > .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;
}
figure.block-media.hide > .bottom {
bottom: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
figure.block-media > .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;
}
figure.block-media > .bottom > .play.playing {
}
figure.block-media > .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;
}
figure.block-media > .bottom > .progress {
margin: 0;
padding: 0;
width: auto;
min-width: 5rem;
height: 100%;
flex-grow: 5;
flex-shrink: 1;
display: block;
user-select: none;
}
figure.block-media > .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;
}
figure.block-media > .bottom > .mute.muted {
}
figure.block-media > .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;
}
figure.block-media > .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) {
figure.block-media > .bottom > .time {
display: none;
}
}
@media (max-width: 350px) {
figure.block-media > .bottom > .volume {
display: none;
}
}
@media (max-width: 250px) {
figure.block-media > .bottom > .play,
figure.block-media > .bottom > .mute,
figure.block-media > .bottom > .fullscreen {
display: none;
}
}
_sass/_block-figure.scss
+15 -17
View File
@@ -7,7 +7,7 @@ figure.block {
overflow: hidden;
}
figure.block>figcaption {
figure.block figcaption {
display: block;
margin: 0;
padding: .25em .5em;
@@ -19,10 +19,10 @@ figure.block>figcaption {
// --------------------------------------------------------------------------------
// Block: Figure > Media
// --------------------------------------------------------------------------------
figure.block>picture,
figure.block>img,
figure.block>video,
figure.block>audio {
figure.block picture,
figure.block img,
figure.block video,
figure.block audio {
display: block;
width: 100%;
height: auto;
@@ -33,12 +33,10 @@ figure.block>audio {
background: rgba(0, 0, 0, 0.5);
}
@import "_block-figure-player.scss";
// --------------------------------------------------------------------------------
// Block: Figure > Table
// --------------------------------------------------------------------------------
figure.block>table {
figure.block table {
margin: 0;
padding: 0;
display: table;
@@ -47,27 +45,27 @@ figure.block>table {
border-collapse: collapse;
}
figure.block>table>thead>tr,
figure.block>table>tbody>tr {
figure.block table>thead>tr,
figure.block table>tbody>tr {
margin: 0;
padding: 0;
vertical-align: top;
}
figure.block>table>thead>tr {
figure.block table>thead>tr {
background: $theme-article-table-head-background;
}
figure.block>table>tbody>tr {
figure.block table>tbody>tr {
background: $theme-article-table-body-background;
}
figure.block>table>tbody>tr:nth-child(2n) {
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 {
figure.block table>thead>tr>th,
figure.block table>tbody>tr>th {
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: bold;
@@ -79,8 +77,8 @@ figure.block>table>tbody>tr>th {
border-bottom: none;
}
figure.block>table>thead>tr>td,
figure.block>table>tbody>tr>td {
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);
_sass/_block-table.scss
+52
View File
@@ -0,0 +1,52 @@
// --------------------------------------------------------------------------------
// Block: Table
// --------------------------------------------------------------------------------
table.block {
margin: 0;
padding: 0;
display: table;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
table.block>thead>tr,
table.block>tbody>tr {
margin: 0;
padding: 0;
vertical-align: top;
}
table.block>thead>tr {
background: $theme-article-table-head-background;
}
table.block>tbody>tr {
background: $theme-article-table-body-background;
}
table.block>tbody>tr:nth-child(2n) {
background: $theme-article-table-body-background-alt;
}
table.block>thead>tr>th,
table.block>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;
}
table.block>thead>tr>td,
table.block>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/_blocks.scss
+2 -6
View File
@@ -3,7 +3,7 @@
// --------------------------------------------------------------------------------
.block {
padding: 0;
margin: 0;
margin: 0 auto;
overflow: auto;
text-align: start;
}
@@ -12,11 +12,6 @@
margin-top: 1.25em;
}
.block > .content {
padding: 0;
margin: 0;
}
// --------------------------------------------------------------------------------
// Float
// --------------------------------------------------------------------------------
@@ -84,3 +79,4 @@
@import "_block-figure.scss";
@import "_block-heading.scss";
@import "_block-list.scss";
@import "_block-table.scss";
_sass/_content.scss
+1
View File
@@ -8,6 +8,7 @@ body > .content {
@import "_breadcrumbs.scss";
@import "_article.scss";
@import "_player.scss";
@import "_comments.scss";
@import "_index.scss";
@import "_pagination.scss";
_sass/_player.scss
+195
View File
@@ -0,0 +1,195 @@
// --------------------------------------------------------------------------------
// Media Player
// --------------------------------------------------------------------------------
$media-player-button-size: 1.5rem;
player {
overlay {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: 1;
background: transparent;
controls {
transition: bottom ease-in-out 100ms, opacity ease-in-out 100ms;
display: flex;
margin: 0;
padding: 0.5rem 0.5rem;
padding-top: 1rem;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
gap: 0.5rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
opacity: 1.0;
overflow: hidden;
user-select: none;
.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;
}
.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;
}
.progress {
margin: 0;
padding: 0;
width: auto;
min-width: 5rem;
height: 100%;
flex-grow: 5;
flex-shrink: 1;
display: block;
user-select: none;
}
.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;
}
.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;
}
.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;
}
}
}
}
player.hide {
cursor: none;
overlay {
controls {
bottom: -100%;
opacity: 0.0;
transition: bottom ease-in-out 500ms, opacity ease-in-out 500ms;
}
}
}
player>.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;
}
player overlay.hide>.top {
top: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
player overlay .top>.variant {
flex-grow: 1;
}
@media (max-width: 500px) {
player overlay controls .time {
display: none;
}
}
@media (max-width: 350px) {
player overlay controls .volume {
display: none;
}
}
@media (max-width: 250px) {
player overlay controls .play,
player overlay controls .mute,
player overlay controls .fullscreen {
display: none;
}
}