igor
/
portfoligor
1
1
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases 3 Wiki Activity

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
iGor milhit 2020-12-26 19:59:54 +01:00
parent e56fddc6e0
commit e1cf9185f3
Signed by: igor
GPG Key ID: 692D97C3D0228A99
16 changed files with 219 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/_colors.scss
View File

@ -1,6 +1,8 @@
/****************** ////////////////////
* SETTING COLORS * // //
******************/ // SETTING COLORS //
// //
////////////////////
html, html,
body, body,
@ -38,5 +40,5 @@ pre {
figure { figure {
background-color: $darkest-polar; background-color: $darkest-polar;
box-shadow: 0px 2px 10px 5px $the-darkiest-polar; box-shadow: 0 2px 10px 5px $the-darkiest-polar;
} }

19
assets/scss/_fonts.scss
View File

@ -1,10 +1,11 @@
/* ///////////////////
* ************** * // //
* FONTS * // FONTS //
* ************** * // //
*/ ///////////////////
html, body { html,
body {
font-size: $font-size-base; font-size: $font-size-base;
} }
@ -19,6 +20,10 @@ nav,
font-size: $font-size-small; font-size: $font-size-small;
} }
#content { .content {
line-height: 1.4; // TODO: fix homepage line-height: 1.4; // TODO: fix homepage
} }
.smallcaps {
font-variant: small-caps;
}

19
assets/scss/_footer.scss
View File

@ -1,16 +1,17 @@
/* ///////////////////
* ************** * // //
* FOOTER * // FOOTER //
* ************** * // //
*/ ///////////////////
.main-footer { .main-footer {
ul { ul {
display: flex; align-items: center;
align-items: center; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 1em; margin-bottom: 1em;
} }
li { li {
list-style: none; list-style: none;
margin-right: .5em; margin-right: .5em;

16
assets/scss/_grid.scss 100644
View File

@ -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
}
}

17
assets/scss/_header.scss
View File

@ -1,31 +1,32 @@
/* ///////////////////
* ************** * // //
* HEADER * // HEADER //
* ************** * // //
*/ ///////////////////
.main-header { .main-header {
section { section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
header { header {
flex-grow: 1; flex-grow: 1;
} }
} }
.title { .title {
display: flex;
align-items: center; align-items: center;
display: flex;
} }
.avatar { .avatar {
border-radius: 50%; border-radius: 50%;
width: 5rem;
margin-right: 1rem; margin-right: 1rem;
width: 5rem;
} }
nav { nav {
margin-right: .5em;
align-self: flex-end; align-self: flex-end;
margin-right: .5em;
} }

20
assets/scss/_layout.scss
View File

@ -1,15 +1,15 @@
/* //////////////////
* ************** * // //
* LAYOUT * // LAYOUT //
* ************** * // //
*/ //////////////////
.container { .container {
width: 95%;
max-width: 46rem; // 920px
margin: 0 auto;
padding: .5rem;
border-radius: .5rem; border-radius: .5rem;
margin: 0 auto;
max-width: 46rem; // 920px
padding: .5rem;
width: 95%;
} }
body { body {
@ -21,5 +21,3 @@ body {
main { main {
flex-grow: 1; flex-grow: 1;
} }

10
assets/scss/_lists.scss
View File

@ -1,8 +1,8 @@
/* ///////////////////
* ************** * // //
* LISTS * // LISTS //
* ************** * // //
*/ ///////////////////
.posts-list { .posts-list {
display: flex; display: flex;

17
assets/scss/_main_body.scss
View File

@ -1,15 +1,15 @@
/* ///////////////////
* ************** * // //
* MAIN * // MAIN //
* ************** * // //
*/ ///////////////////
dl { dl {
display: inline-flex; display: inline-flex;
flex-flow: row; flex-flow: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; /* set the container width*/
overflow: visible; overflow: visible;
width: 100%; // set the container width
} }
dt { dt {
@ -18,17 +18,18 @@ dt {
} }
dt::after { dt::after {
content: " :"; content: ' :';
} }
dd { dd {
flex:0 0 59%; flex: 0 0 59%;
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
} }
.contents { .contents {
padding: 0; padding: 0;
li { li {
list-style: none; list-style: none;
} }

63
assets/scss/_medias.scss
View File

@ -1,29 +1,62 @@
.audio, .stream { .audio,
.stream {
audio { audio {
width: 100%;
border-radius: .5rem; border-radius: .5rem;
width: 100%;
} }
figcaption p { figcaption p {
text-align: left;
font-size: $font-size-small; font-size: $font-size-small;
padding-left: .5rem; padding-left: .5rem;
} text-align: left;
> p {
font-size: $font-size-small;
font-variant: small-caps;
} }
} }
figure { .audio-with-image {
padding: .4rem; display: flex;
border-radius: 5px; flex-direction: column;
margin-right: .4rem;
margin-left: .4rem; @include breakpoint(tablet) {
img { flex-direction: row;
width: 100%;
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 {
border-radius: 5px;
margin-left: .4rem;
margin-right: .4rem;
padding: .4rem;
img {
width: 100%;
}
p { p {
text-align: center;
margin: .2rem 0; margin: .2rem 0;
text-align: center;
} }
} }

31
assets/scss/_post.scss
View File

@ -1,36 +1,41 @@
/* ///////////////////
* ************** * // //
* POST * // POST //
* ************** * // //
*/ ///////////////////
.post-header { .post-header {
margin: 1em 0 1em 0; margin: 1em 0;
h1 { h1 {
margin: 0; margin: 0;
} }
} }
.post-info { .post-info {
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0; justify-content: space-between;
margin-top: 0; margin-top: 0;
padding: 0;
> li { > li {
padding-right: .5rem; padding-right: .5rem;
} }
li { li {
list-style: none;
display: flex; display: flex;
list-style: none;
> ul { > ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0; padding: 0;
white-space: pre; white-space: pre;
} }
> ul:before {
content: " "; > ul::before {
content: ' ';
white-space: pre; white-space: pre;
} }
} }
@ -38,6 +43,6 @@
.post-taxonomies:not(:last-child) { .post-taxonomies:not(:last-child) {
&::after { &::after {
content: ", "; content: ', ';
} }
} }

30
assets/scss/_variables.scss
View File

@ -1,17 +1,20 @@
/****************** ///////////////////
* FONT * // //
******************/ // FONT //
// //
///////////////////
$font-size-base: 1.25rem; $font-size-base: 1.25rem; // 20 px
$font-size-small: 1rem; $font-size-small: 1rem; // 16 px
/****************** /////////////////////
* COLORS * // //
* * // COLORS //
* Based on Nord * // //
* color scheme * // Based on Nord //
* * // color scheme //
******************/ // //
/////////////////////
$nord0: #2e3440; // Polar night, darkest grey $nord0: #2e3440; // Polar night, darkest grey
$nord1: #3b4252; // Polar night, darker grey $nord1: #3b4252; // Polar night, darker grey
@ -50,8 +53,7 @@ $frost-grey-blue: $nord9;
$frost-deep-blue: $nord10; $frost-deep-blue: $nord10;
//Aurora, translated into something easy to remember, hopefully //Aurora, translated into something easy to remember, hopefully
$aurora-red: $nord11; $aurora-red: $nord11; $aurora-orange: $nord12;
$aurora-orange: $nord12;
$aurora-yellow: $nord13; $aurora-yellow: $nord13;
$aurora-green: $nord14; $aurora-green: $nord14;
$aurora-purple: $nord15; $aurora-purple: $nord15;

47
assets/scss/main.scss
View File

@ -1,34 +1,37 @@
/* ////////////////////
* ************** * // //
* Includes * // Includes //
* ************** * // //
*/ ////////////////////
@import '_variables.scss'; @import 'variables';
@import '_colors.scss'; @import 'grid';
@import '_fonts.scss'; @import 'colors';
@import '_footer.scss'; @import 'fonts';
@import '_header.scss'; @import 'footer';
@import '_layout.scss'; @import 'header';
@import '_lists.scss'; @import 'layout';
@import '_main_body.scss'; @import 'lists';
@import '_medias.scss'; @import 'main_body';
@import '_post.scss'; @import 'medias';
@import 'post';
/*
* ************** *
* DIVERS *
* ************** *
*/
code, pre { ////////////////////
// //
// Divers //
// //
////////////////////
code,
pre {
border-radius: 5px; border-radius: 5px;
padding: .2rem; padding: .2rem;
} }
pre { pre {
overflow: auto;
max-width: 95vw; max-width: 95vw;
overflow: auto;
} }
.terms { .terms {

2
layouts/_default/single.html
View File

@ -3,7 +3,7 @@
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
{{- partial "post-info.html" . -}} {{- partial "post-info.html" . -}}
</header> </header>
<article id="content"> <article class="content">
{{ .Content }} {{ .Content }}
</article> </article>
{{ end }} {{ end }}

20
layouts/shortcodes/audio-cover.html 100644
View File

@ -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>

13
layouts/shortcodes/audio.html
View File

@ -1,5 +1,11 @@
<figure class="audio"> <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"> <audio controls preload="metadata">
<source src="/medias/{{ .Get "src" }}.opus" type="audio/opus" codecs="opus"> <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" }}.ogg" type="audio/ogg" codecs="vorbis">
@ -7,9 +13,4 @@
Your browser does not support the audio tag, you can download the audio Your browser does not support the audio tag, you can download the audio
with <a href="/medias/{{ .Get "src" }}.mp3">this link</a> with <a href="/medias/{{ .Get "src" }}.mp3">this link</a>
</audio> </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> </figure>

14
layouts/shortcodes/published.html
View File

@ -1,13 +1,15 @@
<figure class="audio"> <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"> <audio controls preload="metadata">
<source src="{{ .Get "src" }}.opus" type="audio/opus" codecs="opus"> <source src="{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
<source src="{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis"> <source src="{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
<source src="{{ .Get "src" }}.mp3" type="audio/mpeg"> <source src="{{ .Get "src" }}.mp3" type="audio/mpeg">
</audio> </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> </figure>