shortcodes: adds an audio player with album cover
* Adds a shortcodes with an image. * Updates the audio, stream and published shortcodes to group the figcaption under the audio player. * Adds a SCSS partial for grid construction that only contains for now a breakpoint mixin'. * Displays the cover above the player by default, and on the left side for bigger screens. * Fixes the SCSS files according to SCSS linting. Co-Authored-by: iGor milhit <igor@milhit.ch>merge-requests/4/head
parent
e56fddc6e0
commit
e1cf9185f3
GPG Key ID:
692D97C3D0228A99
|
|
@ -1,6 +1,8 @@
|
|||
/******************
|
||||
* SETTING COLORS *
|
||||
******************/
|
||||
////////////////////
|
||||
// //
|
||||
// SETTING COLORS //
|
||||
// //
|
||||
////////////////////
|
||||
|
||||
html,
|
||||
body,
|
||||
|
|
@ -38,5 +40,5 @@ pre {
|
|||
|
||||
figure {
|
||||
background-color: $darkest-polar;
|
||||
box-shadow: 0px 2px 10px 5px $the-darkiest-polar;
|
||||
box-shadow: 0 2px 10px 5px $the-darkiest-polar;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/*
|
||||
* ************** *
|
||||
* FONTS *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// FONTS //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
|
|
@ -19,6 +20,10 @@ nav,
|
|||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
#content {
|
||||
.content {
|
||||
line-height: 1.4; // TODO: fix homepage
|
||||
}
|
||||
|
||||
.smallcaps {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
/*
|
||||
* ************** *
|
||||
* FOOTER *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// FOOTER //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
.main-footer {
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-right: .5em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
////////////////////
|
||||
// //
|
||||
// Grid //
|
||||
// //
|
||||
////////////////////
|
||||
|
||||
@mixin breakpoint($point) {
|
||||
@if $point == desktop {
|
||||
@media (min-width: 75em) { @content ; } // 1200 px
|
||||
} @else if $point == laptop {
|
||||
@media (min-width: 47.5em) { @content ; } // 760 px
|
||||
} @else if $point == tablet {
|
||||
@media (min-width: 37.5rem) { @content ; } // 600 px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,31 +1,32 @@
|
|||
/*
|
||||
* ************** *
|
||||
* HEADER *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// HEADER //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
.main-header {
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
width: 5rem;
|
||||
margin-right: 1rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-right: .5em;
|
||||
align-self: flex-end;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
/*
|
||||
* ************** *
|
||||
* LAYOUT *
|
||||
* ************** *
|
||||
*/
|
||||
//////////////////
|
||||
// //
|
||||
// LAYOUT //
|
||||
// //
|
||||
//////////////////
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
max-width: 46rem; // 920px
|
||||
margin: 0 auto;
|
||||
padding: .5rem;
|
||||
border-radius: .5rem;
|
||||
margin: 0 auto;
|
||||
max-width: 46rem; // 920px
|
||||
padding: .5rem;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -21,5 +21,3 @@ body {
|
|||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/*
|
||||
* ************** *
|
||||
* LISTS *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// LISTS //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
.posts-list {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
/*
|
||||
* ************** *
|
||||
* MAIN *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// MAIN //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
dl {
|
||||
display: inline-flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%; /* set the container width*/
|
||||
overflow: visible;
|
||||
width: 100%; // set the container width
|
||||
}
|
||||
|
||||
dt {
|
||||
|
|
@ -18,7 +18,7 @@ dt {
|
|||
}
|
||||
|
||||
dt::after {
|
||||
content: " :";
|
||||
content: ' :';
|
||||
}
|
||||
|
||||
dd {
|
||||
|
|
@ -29,6 +29,7 @@ dd {
|
|||
|
||||
.contents {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,62 @@
|
|||
.audio, .stream {
|
||||
.audio,
|
||||
.stream {
|
||||
audio {
|
||||
width: 100%;
|
||||
border-radius: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figcaption p {
|
||||
text-align: left;
|
||||
font-size: $font-size-small;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
> p {
|
||||
font-size: $font-size-small;
|
||||
font-variant: small-caps;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-with-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
div {
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include breakpoint(laptop) {
|
||||
|
||||
div {
|
||||
flex-grow: 4;
|
||||
}
|
||||
}
|
||||
|
||||
audio {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: .4rem;
|
||||
border-radius: 5px;
|
||||
margin-right: .4rem;
|
||||
margin-left: .4rem;
|
||||
margin-right: .4rem;
|
||||
padding: .4rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin: .2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
* ************** *
|
||||
* POST *
|
||||
* ************** *
|
||||
*/
|
||||
///////////////////
|
||||
// //
|
||||
// POST //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
.post-header {
|
||||
margin: 1em 0 1em 0;
|
||||
margin: 1em 0;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -13,24 +14,28 @@
|
|||
|
||||
.post-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
> ul:before {
|
||||
content: " ";
|
||||
|
||||
> ul::before {
|
||||
content: ' ';
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
|
@ -38,6 +43,6 @@
|
|||
|
||||
.post-taxonomies:not(:last-child) {
|
||||
&::after {
|
||||
content: ", ";
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
/******************
|
||||
* FONT *
|
||||
******************/
|
||||
///////////////////
|
||||
// //
|
||||
// FONT //
|
||||
// //
|
||||
///////////////////
|
||||
|
||||
$font-size-base: 1.25rem;
|
||||
$font-size-small: 1rem;
|
||||
$font-size-base: 1.25rem; // 20 px
|
||||
$font-size-small: 1rem; // 16 px
|
||||
|
||||
/******************
|
||||
* COLORS *
|
||||
* *
|
||||
* Based on Nord *
|
||||
* color scheme *
|
||||
* *
|
||||
******************/
|
||||
/////////////////////
|
||||
// //
|
||||
// COLORS //
|
||||
// //
|
||||
// Based on Nord //
|
||||
// color scheme //
|
||||
// //
|
||||
/////////////////////
|
||||
|
||||
$nord0: #2e3440; // Polar night, darkest grey
|
||||
$nord1: #3b4252; // Polar night, darker grey
|
||||
|
|
@ -50,8 +53,7 @@ $frost-grey-blue: $nord9;
|
|||
$frost-deep-blue: $nord10;
|
||||
|
||||
//Aurora, translated into something easy to remember, hopefully
|
||||
$aurora-red: $nord11;
|
||||
$aurora-orange: $nord12;
|
||||
$aurora-red: $nord11; $aurora-orange: $nord12;
|
||||
$aurora-yellow: $nord13;
|
||||
$aurora-green: $nord14;
|
||||
$aurora-purple: $nord15;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,37 @@
|
|||
/*
|
||||
* ************** *
|
||||
* Includes *
|
||||
* ************** *
|
||||
*/
|
||||
////////////////////
|
||||
// //
|
||||
// Includes //
|
||||
// //
|
||||
////////////////////
|
||||
|
||||
@import '_variables.scss';
|
||||
@import '_colors.scss';
|
||||
@import '_fonts.scss';
|
||||
@import '_footer.scss';
|
||||
@import '_header.scss';
|
||||
@import '_layout.scss';
|
||||
@import '_lists.scss';
|
||||
@import '_main_body.scss';
|
||||
@import '_medias.scss';
|
||||
@import '_post.scss';
|
||||
@import 'variables';
|
||||
@import 'grid';
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'footer';
|
||||
@import 'header';
|
||||
@import 'layout';
|
||||
@import 'lists';
|
||||
@import 'main_body';
|
||||
@import 'medias';
|
||||
@import 'post';
|
||||
|
||||
/*
|
||||
* ************** *
|
||||
* DIVERS *
|
||||
* ************** *
|
||||
*/
|
||||
|
||||
code, pre {
|
||||
////////////////////
|
||||
// //
|
||||
// Divers //
|
||||
// //
|
||||
////////////////////
|
||||
|
||||
code,
|
||||
pre {
|
||||
border-radius: 5px;
|
||||
padding: .2rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
max-width: 95vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.terms {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{- partial "post-info.html" . -}}
|
||||
</header>
|
||||
<article id="content">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<figure class="audio audio-with-image">
|
||||
<img src="/images/{{ .Get "img" }}" class="cover" \>
|
||||
<div>
|
||||
<audio controls preload="metadata">
|
||||
<source src="/medias/{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
|
||||
<source src="/medias/{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
|
||||
<source src="/medias/{{ .Get "src" }}.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio tag, you can download the audio
|
||||
with <a href="/medias/{{ .Get "src" }}.mp3">this link</a>
|
||||
</audio>
|
||||
<figcaption>
|
||||
<p>{{ .Get "legend" }}</p>
|
||||
<p>
|
||||
<a href="/medias/{{ .Get "src" }}.opus" class="smallcaps">opus</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.ogg" class="smallcaps">ogg</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.mp3" class="smallcaps">mp3</a>
|
||||
</p>
|
||||
</figcaption>
|
||||
</div>
|
||||
</figure>
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<figure class="audio">
|
||||
<figcaption><p>{{ .Get "legend" }}</p></figcaption>
|
||||
<figcaption>
|
||||
<p>{{ .Get "legend" }} /
|
||||
<a href="/medias/{{ .Get "src" }}.opus" class="smallcaps">opus</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.ogg" class="smallcaps">ogg</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.mp3" class="smallcaps">mp3</a>
|
||||
</p>
|
||||
</figcaption>
|
||||
<audio controls preload="metadata">
|
||||
<source src="/medias/{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
|
||||
<source src="/medias/{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
|
||||
|
|
@ -7,9 +13,4 @@
|
|||
Your browser does not support the audio tag, you can download the audio
|
||||
with <a href="/medias/{{ .Get "src" }}.mp3">this link</a>
|
||||
</audio>
|
||||
<p>
|
||||
<a href="/medias/{{ .Get "src" }}.opus">opus</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.ogg">ogg</a> /
|
||||
<a href="/medias/{{ .Get "src" }}.mp3">mp3</a>
|
||||
</p>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<figure class="audio">
|
||||
<figcaption><p>{{ .Get "legend" }}</p></figcaption>
|
||||
<figcaption>
|
||||
<p>
|
||||
{{ .Get "legend" }} /
|
||||
<a href="{{ .Get "src" }}.opus" class="smallcaps">opus</a> /
|
||||
<a href="{{ .Get "src" }}.ogg" class="smallcaps">ogg</a> /
|
||||
<a href="{{ .Get "src" }}.mp3" class="smallcaps">mp3</a>
|
||||
</p>
|
||||
</figcaption>
|
||||
<audio controls preload="metadata">
|
||||
<source src="{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
|
||||
<source src="{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
|
||||
<source src="{{ .Get "src" }}.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
<p>
|
||||
<a href="{{ .Get "src" }}.opus">opus</a> /
|
||||
<a href="{{ .Get "src" }}.ogg">ogg</a> /
|
||||
<a href="{{ .Get "src" }}.mp3">mp3</a>
|
||||
</p>
|
||||
</figure>
|
||||
|
|
|
|||
Loading…
Reference in New Issue