many fixes

_config.yml

@@ -124,6 +124,21 @@ defaults:
           height: 720
           resize_style: cover
           uploads_dir: "/images/posts"  
+        video_file:
+          uploads_dir: "/videos"
 # ---------
 # Translate
 lang: en
+
+## Colors
+
+bg:           '#3c2a52'
+bg-alt:       'rgba(31, 23, 41, 0.75)'
+fg:           '#ebdbf8'
+fg-alt:       'rgba(235, 219, 248, 0.25)'
+border:       '#000000'
+border-alt:   'rgba(0, 0, 0, 0.75)'
+accent1:      '#38ff59'
+accent1-alt:  'rgba(56, 255, 89, 0.75)'
+accent2:      '#8d3ed8'
+accent2-alt:  'rgba(141, 62, 216, 0.75)'

_includes/header.html

@@ -1,7 +1,20 @@
 <header class="hero" style="background-image: url({{ page.image }});">
   <div>
-  <h1>{{ page.title }}</h1>
-  <p>{{ page.description }}</p>
-</div>
-  <div class="imagecontainer"></div>
+    <h1>{{ page.title }}</h1>
+    <p>{{ page.description }}</p>
+    {% if page.category == 'releases' %}
+    <p><a href="#npImage" class="button">Listen</a></p>
+    {% endif %}
+    {% if page.category == 'ramblings' %}
+    <p><a href="#read" class="button">Read</a></p>
+    {% endif %}
+  </div>
+  <div class="imagecontainer">
+
+  </div>
+  {% if page.video_file %}
+  <video autoplay muted loop id="myVideo">
+    <source src="{{ page.video_file }}" type="video/mp4">
+  </video>
+  {% endif %}
 </header>

_layouts/post.html

@@ -31,7 +31,9 @@ layout: default
   </div>
 </div>
 <div class="noJSalbum">
-
+  <div class="coverartwrapper">
+    <div class="coverartwrapped" style="background-image: url({{ page.image }});"></div>
+  </div>
   {% for track in album.tracks %}
 
   <div class="plItem">
@@ -47,10 +49,12 @@ layout: default
 
 </div>
 
+
 <div class="coverart">
   <div class="coverartwrapper">
     <div id="npImage" class="coverartwrapped"></div>
   </div>
+  
   {% assign author_id = page.author | prepend: "/authors/" | append: "/" %}
   {% assign author = site.authors | where: "url", author_id | first %}
   <div id="author">
@@ -232,6 +236,7 @@ layout: default
             if ((index + 1) < trackCount) {
               index++;
               loadTrack(index);
+              playTrack(index);
               audio.play();
             } else {
               audio.pause();
@@ -304,8 +309,8 @@ layout: default
 
 {% else %}
   {% include header.html %}
-  <section class="info">
-    <div>
+  <section class="info" id="read">
+    <div style="margin-top: 80px;">
       {{ content }}
       <p>&nbsp;</p>
       <p style="text-align: center;"><a href="{{ page.link }}" class="button">Check it out</a></p>

_layouts/track.html

@@ -11,9 +11,9 @@ layout: default
   <div class="coverartwrapper">
     <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
   </div>
-  <div class="playbutton">
+  <div class="playbutton hideWhenNoJS">
   <a id="mu_pause" class="button">Play!</a>
-</div>
+  </div>
 <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
   <br />{{ page.common.year }}
 </p>
@@ -24,24 +24,17 @@ layout: default
 <div id="trackInfo">
 <section>
 
-  <h1 style="margin-top:80px">{{ page.common.title }}</h1>
+  <h1>{{ page.common.title }}</h1>
   <p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p> 
    
 
   {% include author.html %}
 
-<div class="noJSalbum">
-  <h1 style="margin-top:80px">{{ page.common.title }}</h1>
-  <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
-    <br />{{ page.common.year }}
-  </p>
 
-  <p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p> 
+
       
-  <ul class="actions stacked">
-    <li><a class="button" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3"><span  class="fas fa-play"></span> Play!</a></li>
-  </ul>
-</div>
+  <p class="noJSalbum"><a class="button" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3"><span  class="fas fa-play"></span> Play!</a></p>
+
 
 
 <!-- Content -->
@@ -70,7 +63,7 @@ layout: default
   </p>
   {% for albumurl in site.posts %}
   {% if albumurl.album == page.albumSlug %}
-<a href="{{ relBase }}{{ albumurl.url }}" class="button">See release page</a>
+<p><a href="{{ relBase }}{{ albumurl.url }}" class="button">See release page</a></p>
 {% endif %}
 {% endfor %}
 </section>

_posts/2018-12-17-satoshi-mon-ami.md

@@ -6,6 +6,7 @@ description: >-
   The 2 tracks of laid back cloud rap are tales of daily digital life-struggles.
   When day-to-day communication blurs the line between the virtual and real.
 image: /images/posts/1-k-as-tu-fait-de-nous-.jpeg
+video_file: /videos/satoshi.webm
 category: releases
 tags: EP
 link:

_posts/2019-02-07-darkweb.md

@@ -6,6 +6,7 @@ description: >-
   As dystopian as the present might seem on-line, there is always room for the
   strange in the cypher...
 image: /images/darkweb.jpg
+video_file: /videos/darkweb.webm
 category: releases
 tags: EP
 link:

_posts/2019-12-12-cyber-grany.md

@@ -4,6 +4,7 @@ author: setto
 date: 2019-12-12 03:03:00
 description: Jazzy Cybersoul with a hint of 303 baselines.
 image: /images/posts/1-grandma-got-the-ssh-keys.jpeg
+video_file: 
 category: releases
 tags: single
 link:

_posts/2020-04-19-live-with-hardware.md

@@ -7,6 +7,7 @@ description: >-
   can't get my finger on. Assumptions and projections that I think partially
   stem from the lack in body language
 image: /images/posts/1-ep-life-of-a-dudelini.jpeg
+video_file: 
 category: releases
 tags: single
 link:

_posts/2020-08-02-unmet-dependencies.md

@@ -10,6 +10,7 @@ description: >-
 
   Open your mind, open the source!
 image: /images/posts/final-pingnucover1220x1200.jpg
+video_file: 
 category: releases
 tags: EP
 link:

_posts/2020-08-03-333mix.md

@@ -5,6 +5,7 @@ date:  2020-08-03 00:00
 description: >-
   Pignu got Chopped & Screwed by KodTreatment
 image: /images/posts/333mix.jpg
+video_file: 
 category: ramblings
 link: https://kodtreatment.bandcamp.com/
 check_this_if_cannot_be_bought: true

_posts/_defaults.md

@@ -4,6 +4,7 @@ author:
 date: 
 description: 
 image: 
+video_file:
 category: 
 link:
 check_this_if_cannot_be_bought: false

_sass/_layout.scss

@@ -55,6 +55,9 @@ body {
       text-align: center;
       max-width: 1200px;
     }
+    p{
+      margin-top: 40px;
+    }
   }
 
   .imagecontainer {

_sass/_noscripts.scss

@@ -32,4 +32,7 @@
 #fixed-player {
   display: unset;
   height: unset;
+}
+.hideWhenNoJS {
+  display: none;
 }

_sass/_videos.scss

@@ -16,3 +16,10 @@
   transform: translate(-50%, -50%);
   width: 100%;
 }
+#myVideo {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+}

_sass/libs/_reset.scss

@@ -30,7 +30,9 @@ article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
-
+html {
+  scroll-behavior: smooth;
+}
 body {
   line-height: 1.75;
 }

_sass/libs/_vars.scss

@@ -133,8 +133,8 @@ $font: (
 // Palette.
 $palette: (
 
-  bg:         #1f1729,
-  bg-alt:     rgba(31, 23, 41, 0.75),
+  bg:         rgb(60, 42, 82), 
+  bg-alt:     rgba(60, 42, 82, 0.75),
   fg:         #ebdbf8,
   fg-alt:     rgba(235, 219, 248, 0.25),
   border:     #000000,

_sass/trackplayer.scss

@@ -66,6 +66,9 @@
       margin: 20px;
       padding: 0;
     }
+    h1 {
+      margin-top:80px;
+    }
   }
 
   .post-nav-next {
@@ -82,7 +85,7 @@
 
 @media only screen and (max-width: 1023px) {
   #trackArt {
-    height: 80vh;
+
     min-width: 100%;
     section {
       position: absolute;
@@ -93,10 +96,14 @@
     }
   }
  #trackInfo {
-   height: unset;
-   overflow-y: unset;
- }
-
+    height: unset;
+    overflow-y: unset;
+    section {
+      h1 {
+        margin-top:0;
+      }
+    }
+  }
 }
 
 .bouncer {

assets/img/vignette.svg

@@ -1,9 +1,12 @@
+---
+layout: nil
+---
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="480" height="480" version="1.1" viewBox="0 0 127 127" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
   <linearGradient id="linearGradient857" x1="30.295" x2="30.295" y1="120.88" y2="63.5" gradientTransform="scale(3.7795)" gradientUnits="userSpaceOnUse">
-   <stop stop-color="#1f1729" offset="0"/>
-   <stop stop-color="#1f1729" stop-opacity="0" offset="1"/>
+   <stop stop-color="{{ site.bg }}" offset="0"/>
+   <stop stop-color="{{ site.bg }}" stop-opacity="0" offset="1"/>
   </linearGradient>
   <linearGradient id="linearGradient5491" x1="-1.7764e-15" x2="-1.7764e-15" y1="127" y2="-7.1054e-15" gradientTransform="matrix(1 0 0 .8654 0 17.094)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient857"/>
  </defs>