fixing layout

2020-08-04 10:48:11 +02:00 · 2020-08-04 10:48:11 +02:00 · 8fcda1a3d0
parent e81f0ace73
commit 8fcda1a3d0
17 changed files with 96 additions and 348 deletions
--- a/_config.yml
+++ b/_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
--- a/_includes/footer.html
+++ b/_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"
--- a/_layouts/post.html
+++ b/_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();
              }
--- a/_layouts/track.html
+++ b/_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;">
-    {{ page.all.USLT.text | newline_to_br }}
-  </p>
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
  {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
-  <p style="font-size:16px;">
-    {{ page.all.USLT.text | newline_to_br }}
-  </p>
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
  {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
-  <p style="font-size:16px;">
-    {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
-  </p>
+  <div class="info">
+    <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('timeupdate', function () {
-    var timestamp = Math.floor(mu.currentTime);
-    var hours = Math.floor(timestamp / 60 / 60);
-    var minutes = Math.floor(timestamp / 60) - (hours * 60);
-    var seconds = timestamp % 60;
-    var formatted = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
-    var thecurrentSpan = document.getElementById("tracktime");
-    thecurrentSpan.innerHTML = formatted + ' / ';
+  mu.addEventListener('playing', function () {
+    spincover.classList.add("spinnit");
+    spincover.classList.remove("paused");
+  });
+  mu.addEventListener('pause', function () {
+    spincover.classList.add("paused");
+    pauseButton.innerHTML = "Resume";
  });

+
 </script>
--- a/_posts/2018-12-17-satoshi-mon-ami.md
+++ b/_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'
--- a/_posts/2019-02-07-darkweb.md
+++ b/_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'
--- a/_posts/2020-08-02-unmet-dependencies.md
+++ b/_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: >-
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@ -85,7 +85,8 @@ a:hover {
  }
 }
 .streamer {
-  margin-top: 2em;;
+  margin-top: 2em;
+  text-align: center;

 }
 // icon
--- a/_sass/_layout.scss
+++ b/_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;
--- a/_sass/libs/_animations.scss
+++ b/_sass/libs/_animations.scss
@ -30,14 +30,17 @@
 }

@-webkit-keyframes backgroundSize {
-  0%{background-size:200% 400%}
-  100%{background-size:400% 200%}
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }
@-moz-keyframes backgroundSize {
-  0%{background-size:200% 400%}
-  100%{background-size:400% 200%}
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }
@keyframes backgroundSize {
-  0%{background-size:200% 400%}
-  100%{background-size:400% 200%}
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
 }
--- a/_sass/libs/_vars.scss
+++ b/_sass/libs/_vars.scss
@ -133,15 +133,15 @@ $font: (
 // Palette.
 $palette: (

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

 );
--- a/_sass/trackplayer.scss
+++ b/_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;
+}
--- a/assets/img/vignette-footer.svg
+++ b/assets/img/vignette-footer.svg
--- a/assets/img/vignette.svg
+++ b/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="#424242" stop-opacity="0" offset="1"/>
+   <stop stop-color="#1f1729" offset="0"/>
+   <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>
--- a/images/setto-logo.svg
+++ b/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>
--- a/images/setto_logo.svg
+++ b/images/setto_logo.svg
--- a/index.html
+++ b/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 %}