diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 3875b13..be06284 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -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; } diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 685fba0..91bba39 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -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; +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 40be7c5..00f1abc 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -1,16 +1,17 @@ -/* - * ************** * - * FOOTER * - * ************** * -*/ +/////////////////// +// // +// FOOTER // +// // +/////////////////// .main-footer { ul { - display: flex; - align-items: center; - justify-content: flex-end; - margin-bottom: 1em; + align-items: center; + display: flex; + justify-content: flex-end; + margin-bottom: 1em; } + li { list-style: none; margin-right: .5em; diff --git a/assets/scss/_grid.scss b/assets/scss/_grid.scss new file mode 100644 index 0000000..20d5cd0 --- /dev/null +++ b/assets/scss/_grid.scss @@ -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 + } +} + diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index ca2d5dd..83a6033 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -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; } diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index b097b6f..f9902fb 100644 --- a/assets/scss/_layout.scss +++ b/assets/scss/_layout.scss @@ -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; } - - diff --git a/assets/scss/_lists.scss b/assets/scss/_lists.scss index 9f866a7..10282e9 100644 --- a/assets/scss/_lists.scss +++ b/assets/scss/_lists.scss @@ -1,8 +1,8 @@ -/* - * ************** * - * LISTS * - * ************** * -*/ +/////////////////// +// // +// LISTS // +// // +/////////////////// .posts-list { display: flex; diff --git a/assets/scss/_main_body.scss b/assets/scss/_main_body.scss index 11736c4..6deea4f 100644 --- a/assets/scss/_main_body.scss +++ b/assets/scss/_main_body.scss @@ -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,17 +18,18 @@ dt { } dt::after { - content: " :"; + content: ' :'; } dd { - flex:0 0 59%; + flex: 0 0 59%; margin-left: auto; text-align: left; } .contents { padding: 0; + li { list-style: none; } diff --git a/assets/scss/_medias.scss b/assets/scss/_medias.scss index cde4be0..d70949a 100644 --- a/assets/scss/_medias.scss +++ b/assets/scss/_medias.scss @@ -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; } } -figure { - padding: .4rem; - border-radius: 5px; - margin-right: .4rem; - margin-left: .4rem; - img { - width: 100%; +.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 { + border-radius: 5px; + margin-left: .4rem; + margin-right: .4rem; + padding: .4rem; + + img { + width: 100%; + } + p { - text-align: center; margin: .2rem 0; + text-align: center; } } diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss index 9cf82c2..8397653 100644 --- a/assets/scss/_post.scss +++ b/assets/scss/_post.scss @@ -1,36 +1,41 @@ -/* - * ************** * - * POST * - * ************** * -*/ +/////////////////// +// // +// POST // +// // +/////////////////// .post-header { - margin: 1em 0 1em 0; + margin: 1em 0; + h1 { - margin: 0; + margin: 0; } } .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: ', '; } } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 40626ce..d7578ff 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -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; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index fa3cdc9..24ec0aa 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -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 { diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a81308f..e3209da 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,7 @@

{{ .Title }}

{{- partial "post-info.html" . -}} -
+
{{ .Content }}
{{ end }} diff --git a/layouts/shortcodes/audio-cover.html b/layouts/shortcodes/audio-cover.html new file mode 100644 index 0000000..639b45f --- /dev/null +++ b/layouts/shortcodes/audio-cover.html @@ -0,0 +1,20 @@ +
+ +
+ +
+

{{ .Get "legend" }}

+

+ opus / + ogg / + mp3 +

+
+
+
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html index 21853db..0251bfa 100644 --- a/layouts/shortcodes/audio.html +++ b/layouts/shortcodes/audio.html @@ -1,5 +1,11 @@
-

{{ .Get "legend" }}

+
+

{{ .Get "legend" }} / + opus / + ogg / + mp3 +

+
-

- opus / - ogg / - mp3 -

diff --git a/layouts/shortcodes/published.html b/layouts/shortcodes/published.html index 85559ae..bbffcce 100644 --- a/layouts/shortcodes/published.html +++ b/layouts/shortcodes/published.html @@ -1,13 +1,15 @@
-

{{ .Get "legend" }}

+
+

+ {{ .Get "legend" }} / + opus / + ogg / + mp3 +

+
-

- opus / - ogg / - mp3 -