fixing layout

_config.yml

@@ -25,7 +25,7 @@ geo:
   postalcode: '1201'
 
 banner:   /images/setto-logo.svg
-banner-vert: 
+banner-vert: /images/setto_logo.svg
 icon:   /images/setto-logoicon.svg
 logo:   /images/setto-logo.svg
 logo-footer: /images/setto-logo-dark.svg

_includes/footer.html

@@ -15,7 +15,7 @@
       {% endfor %}
     </ul>
   </div>
-  <div><img src="{{ relBase }}{{ site.banner-vert }}" height="100%" alt="{{ site.title }} Logo" /></div>
+  <div><img src="{{ relBase }}{{ site.banner-vert }}" width="100%" alt="{{ site.title }} Logo" /></div>
   <div style="text-align: center;">
     {% for nw in site.data.social %}
     <a target="_blank" alt="{{ site.title }} on {{ nw.name }}" title="{{ site.title }} on {{ nw.name }}" rel="noopener"

_layouts/post.html

@@ -14,6 +14,7 @@ layout: default
 <div class="player-wrap">
 
   <div id="plwrap">
+    <h2>Track list</h2>
     <ul id="plList">
       {% for track in album.tracks %}
       <li class="" {% if onetracker == 1 %}style="border-radius: 5px;"{% endif %}>
@@ -242,6 +243,7 @@ layout: default
             if ((index - 1) > -1) {
               index--;
               loadTrack(index);
+              playTrack(index);
               if (playing) {
                 audio.play();
               }
@@ -255,6 +257,7 @@ layout: default
             if ((index + 1) < trackCount) {
               index++;
               loadTrack(index);
+              playTrack(index);
               if (playing) {
                 audio.play();
               }

_layouts/track.html

@@ -6,7 +6,7 @@ layout: default
 <!-- Banner -->
 
 
-<div id="trackArt" style="background-image:url({{ site.mediaurl }}/{{ page.slug }}.jpeg)">
+<div id="trackArt">
 <section>
   <div class="coverartwrapper">
     <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
@@ -18,18 +18,6 @@ layout: default
   <br />{{ page.common.year }}
 </p>
 
-<p><strong><span id="tracktime"></span></strong><span id="trackDuration"></span></strong></p> 
-
-  <script type="text/javascript">
-    var trackDurationtimestamp = {{ page.format.duration | round }};
-    var trackDurationhours = Math.floor(trackDurationtimestamp / 60 / 60);
-    var trackDurationminutes = Math.floor(trackDurationtimestamp / 60) - (trackDurationhours * 60);
-    var trackDurationseconds = trackDurationtimestamp % 60;
-    var trackDurationformatted = trackDurationhours.toString().padStart(2, '0') + ':' + trackDurationminutes.toString().padStart(2, '0') + ':' + trackDurationseconds.toString().padStart(2, '0');
-    var theSpan = document.getElementById("trackDuration");
-    theSpan.innerHTML = trackDurationformatted;
-  </script>
-
 </section>
 </div>
 <!-- Content -->
@@ -37,7 +25,8 @@ layout: default
 <section>
 
   <h1 style="margin-top:80px">{{ 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 %}
 
@@ -56,25 +45,34 @@ layout: default
 
 
 <!-- Content -->
-<div class="info">
+
   {% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
-  <p style="font-size:16px;">
+  <div class="info">
-    {{ page.all.USLT.text | newline_to_br }}
+    <p>
-  </p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
   {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
-  <p style="font-size:16px;">
+  <div class="info">
-    {{ page.all.USLT.text | newline_to_br }}
+    <p>
-  </p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
   {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
-  <p style="font-size:16px;">
+  <div class="info">
-    {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
+    <p>
-  </p>
+      {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
+    </p>
+  </div>
   {% endif %}
   <p>
     {{ page.all.Comment }}
   </p>
-</div>
+  {% for albumurl in site.posts %}
-
+  {% if albumurl.album == page.albumSlug %}
+<a href="{{ relBase }}{{ albumurl.url }}" class="button">See release page</a>
+{% endif %}
+{% endfor %}
 </section>
 {% for post in site.posts %}
 {% if post.album == page.albumSlug %}
@@ -162,7 +160,7 @@ layout: default
   var mu = document.getElementsByTagName("audio")[0];
   var pauseButton = document.getElementById("mu_pause");
   var spincover = document.getElementById("coverart");
-  var fixedplayer = document.getElementById("fixedPlayer")
+  var fixedplayer = document.getElementById("fixedPlayer");
 
   mu.addEventListener('ended', function () {
     // only functional if "loop" is removed
@@ -172,9 +170,8 @@ layout: default
   });
   mu.onplaying = function() {
     pauseButton.innerHTML = "Pause";
-    spincover.classList.add("spinnit");
-    spincover.classList.remove("paused");
     fixedplayer.classList.remove("hideplayer");
+
   }; 
 
   pauseButton.addEventListener("click", function () {
@@ -184,20 +181,18 @@ layout: default
     }
     else {
       mu.pause();
-      pauseButton.innerHTML = "Resume";
 
-      spincover.classList.add("paused");
+
     }
   });
-
+  mu.addEventListener('playing', function () {
-  mu.addEventListener('timeupdate', function () {
+    spincover.classList.add("spinnit");
-    var timestamp = Math.floor(mu.currentTime);
+    spincover.classList.remove("paused");
-    var hours = Math.floor(timestamp / 60 / 60);
+  });
-    var minutes = Math.floor(timestamp / 60) - (hours * 60);
+  mu.addEventListener('pause', function () {
-    var seconds = timestamp % 60;
+    spincover.classList.add("paused");
-    var formatted = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+    pauseButton.innerHTML = "Resume";
-    var thecurrentSpan = document.getElementById("tracktime");
-    thecurrentSpan.innerHTML = formatted + ' / ';
   });
 
+
 </script>

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

@@ -37,7 +37,7 @@ stores:
     download: false
   - name: Deezer
     url: 'https://www.deezer.com/album/82118382'
-    icon: fa-creative-commons-sampling
+    icon: fa-deezer
     download: false
   - name: Napster
     url: 'https://us.napster.com/artist/-setto-/album/satoshi-mon-ami'

_posts/2019-02-07-darkweb.md

@@ -35,7 +35,7 @@ stores:
     download: false
   - name: Deezer
     url: 'https://www.deezer.com/fr/album/84669482'
-    icon: fa-creative-commons-sampling
+    icon: fa-deezer
     download: false
   - name: Napster
     url: 'https://us.napster.com/artist/-setto-/album/darkweb-single'

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

@@ -35,7 +35,7 @@ stores:
     download: true
   - name: Deezer
     url: 'https://www.deezer.com/us/album/162768022'
-    icon: fa-creative-commons-sampling
+    icon: fa-deezer
     download: false
   - name: Youtube
     url: >-

_sass/_elements.scss

@@ -85,7 +85,8 @@ a:hover {
   }
 }
 .streamer {
-  margin-top: 2em;;
+  margin-top: 2em;
+  text-align: center;
 
 }
 // icon

_sass/_layout.scss

@@ -93,7 +93,7 @@ footer {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  padding: 160px 20px 20px 20px;
+  padding: 160px 20px 200px 20px;
   background-color: _palette(fg);
   color: _palette(bg);
   justify-content: center;
@@ -101,6 +101,7 @@ footer {
   background-size: 480px 480px;
   background-repeat: repeat-x;
   background-position: top;
+  box-sizing: border-box;
   div {
     flex: 0 1 280px;
     margin:20px;

_sass/libs/_animations.scss

@@ -30,14 +30,17 @@
 }
 
 @-webkit-keyframes backgroundSize {
-  0%{background-size:200% 400%}
+  0%{background-size:100% 150%}
-  100%{background-size:400% 200%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }
 @-moz-keyframes backgroundSize {
-  0%{background-size:200% 400%}
+  0%{background-size:100% 150%}
-  100%{background-size:400% 200%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }
 @keyframes backgroundSize {
-  0%{background-size:200% 400%}
+  0%{background-size:100% 150%}
-  100%{background-size:400% 200%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }

_sass/libs/_vars.scss

@@ -133,15 +133,15 @@ $font: (
 // Palette.
 $palette: (
 
-  bg:         rgb(66, 66, 66),
+  bg:         #1f1729,
-  bg-alt:     rgba(66, 66, 66, 0.75),
+  bg-alt:     rgba(31, 23, 41, 0.75),
-  fg:         rgb(254, 255, 234),
+  fg:         #a38ab6,
-  fg-alt:     rgba(254, 255, 234, 0.25),
+  fg-alt:     rgba(163, 138, 182, 0.25),
-  border:     rgba(0, 0, 0, 1),
+  border:     #000000,
   border-alt: rgba(0, 0, 0, 0.75),
-  accent1:    rgb(252, 252, 100),
+  accent1:    #38ff59,
-  accent1-alt:rgb(182, 182, 0),
+  accent1-alt:rgba(56, 255, 89, 0.75),
-  accent2:    rgb(0, 146, 137),
+  accent2:    #6800ca,
-  accent2-alt:rgb(0, 97, 90),
+  accent2-alt:rgba(104, 0, 202, 0.75),
 
 );

_sass/trackplayer.scss

@@ -6,12 +6,18 @@
   height: 100vh;
   padding: 0;
   margin: 0;
-
+  background-size: 100%;
+  background: rgb(31,23,41);
+  background: linear-gradient(180deg, rgba(31,23,41,1) 26%, rgba(56,255,89,0.25) 100%);
+  -moz-transition: background-size 2s ease-in-out;
+  -webkit-transition: background-size 2s ease-in-out;
+  -ms-transition: background-size 2s ease-in-out;
+  transition: background-size 2s ease-in-out;
   > section {
     position: absolute;
     height: 100vh;
     width: 50%;
-    background: _palette(border-alt);
+    background: transparent;
     padding: 0;
     margin: 0;
     text-align: center;
@@ -95,3 +101,9 @@
  }
 
 }
+
+.bouncer {
+  -webkit-animation: backgroundSize 10s ease infinite;
+  -moz-animation: backgroundSize 10s ease infinite;
+  animation: backgroundSize 10s ease infinite;
+}

assets/img/vignette.svg

@@ -2,8 +2,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="#424242" offset="0"/>
+   <stop stop-color="#1f1729" offset="0"/>
-   <stop stop-color="#424242" stop-opacity="0" offset="1"/>
+   <stop stop-color="#1f1729" 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>

images/setto-logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg927" fill="#eeeeee" version="1.1" width="416.57043" height="91.665543" viewBox="0 0 110.21759 24.253175">
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg927" fill="#a38ab6" version="1.1" width="416.57043" height="91.665543" viewBox="0 0 110.21759 24.253175">
 
   <g id="g1355">
     <path id="path825" d="m 18.776752,19.26664 c -0.84149,-0.23758 -1.5619,-0.48815 -1.6009,-0.55683 -0.13389,-0.23576 1.17519,-6.64433 1.38113,-6.76129 0.1714,-0.0973 2.18286,1.83925 2.58728,2.49098 0.13901,0.22399 -0.53248,5.08585 -0.71688,5.19057 -0.0664,0.0377 -0.80914,-0.12586 -1.65063,-0.36343 z m -7.71412,3.6497 c -0.11943,-0.10151 -0.46471,-0.76441 -0.76727,-1.47311 l -0.55013,-1.28856 3.0905,-1.82263 c 1.69978,-1.00245 3.13215,-1.7493 3.18305,-1.65966 0.16047,0.28255 -0.35523,3.62001 -0.60662,3.9259 -0.46822,0.56974 -4.11797,2.51485 -4.34953,2.31806 z m -6.3649,-3.70632 c -1.25796,-0.50119 -2.32429,-0.97659 -2.36964,-1.05643 -0.0913,-0.16071 1.26536,-2.75645 1.5146,-2.89799 0.1698,-0.0964 5.98831,2.32745 6.40084,2.66648 0.2054,0.1688 -0.0672,0.38679 -1.50386,1.20269 l -1.75474,0.99652 z m 16.18215,-7.2164 c -0.50323,-0.2754 -4.16428,-5.03379 -3.96153,-5.14894 0.032,-0.0182 0.92215,-0.0526 1.97817,-0.0766 l 1.92003,-0.0436 1.47937,1.66712 c 1.05116,1.18456 1.45442,1.75759 1.39322,1.97969 -0.10705,0.38842 -2.51888,1.78126 -2.80926,1.62235 z M 4.112442,13.68166 2.484422,12.9594 1.886542,10.71411 C 1.557712,9.4792 1.304552,8.41117 1.323962,8.34071 c 0.0194,-0.0705 0.75331,-0.23119 1.63087,-0.35719 1.75007,-0.25126 1.80708,-0.21501 2.16317,1.37546 0.12108,0.54084 0.41232,1.84403 0.64718,2.89598 0.23486,1.05195 0.32538,1.96581 0.20115,2.0308 -0.12423,0.065 -0.95848,-0.20686 -1.85389,-0.6041 z m 10.30409,-8.18967 c -1.67351,-0.0303 -3.09954,-0.15056 -3.16895,-0.26719 -0.0694,-0.11662 0.30683,-0.87455 0.83608,-1.68429 l 0.96229,-1.47226 2.06111,-0.0348 c 3.31853,-0.0561 3.09724,-0.18375 2.91885,1.68397 -0.084,0.87994 -0.24591,1.6516 -0.35972,1.71482 -0.11384,0.0632 -1.57615,0.0901 -3.24966,0.0598 z m -7.77928,3.31209 c -0.25432,-0.48092 -1.2349,-3.29514 -1.1932,-3.42443 0.15114,-0.46861 2.47205,-4.02087 2.65002,-4.05596 0.21024,-0.0415 2.33773,1.6074 2.54508,1.97252 0.079,0.13916 -3.46469,5.63381 -3.731,5.78505 -0.0526,0.0299 -0.17449,-0.0949 -0.2709,-0.27718 z"></path>

index.html

@@ -8,6 +8,9 @@ image: /siteicon.png
 ---
 {% include relBase.html %}
 {% include header.html %}
+<section class="news">
+  
+</section>
 <section class="releases">
   <h2>EPs and LPs</h2>
   {% assign sorted = site.albums | sort: 'date' | reverse %}