From 90423f31e0703edb5567ede621197e74cfd57e11 Mon Sep 17 00:00:00 2001
From: Set Hallstrom <set@sakrecoer.com>
Date: Fri, 25 Sep 2020 11:35:37 +0200
Subject: [PATCH] upgrading layout

---
 _data/colors.yml               | 20 ++++----
 _includes/header.html          | 51 ++++++++++---------
 _sass/_elements.scss           | 43 ----------------
 _sass/_layout.scss             | 90 ++++++++++++++++++++++++++++------
 _sass/_player.scss             |  6 +--
 _sass/zafari.scss              | 30 ++++++++++++
 artists.html                   |  2 +-
 assets/css/colors-20200911.css | 20 ++++----
 assets/img/vignette-footer.svg |  2 +-
 assets/img/vignette.svg        |  2 +-
 discography.html               |  2 +-
 highlights.html                |  2 +-
 index.html                     | 28 +++++------
 links.html                     |  2 +-
 14 files changed, 174 insertions(+), 126 deletions(-)
 create mode 100644 _sass/zafari.scss

diff --git a/_data/colors.yml b/_data/colors.yml
index 3c2767e..c953726 100644
--- a/_data/colors.yml
+++ b/_data/colors.yml
@@ -1,10 +1,10 @@
-bg_color: 'rgb(27, 34, 65)'
-bg-alt_color: 'rgba(27, 34, 65, 0.15)'
-fg_color: 'rgba(160, 178, 141, 1)'
-fg-alt_color: 'rgba(160, 178, 141, 0.75)'
-border_color: 'rgb(0, 25, 1)'
-border-alt_color: 'rgba(0, 25, 1, 0.75)'
-accent2_color: 'rgba(196, 167, 255, 1)'
-accent2-alt_color: 'rgba(196, 167, 255, 0.75)'
-accent1_color: 'rgba(168, 255, 238, 1)'
-accent1-alt_color: 'rgba(168, 255, 238, 0.75)'
\ No newline at end of file
+bg_rgba: 'rgb(27, 34, 65)'
+bg-alt_rgba: 'rgba(27, 34, 65, 0.75)'
+fg_rgba: 'rgba(160, 178, 141, 1)'
+fg-alt_rgba: 'rgba(160, 178, 141, 0.75)'
+border_rgba: 'rgb(0, 25, 1)'
+border-alt_rgba: 'rgba(0, 25, 1, 0.75)'
+accent2_rgba: 'rgba(196, 167, 255, 1)'
+accent2-alt_rgba: 'rgba(196, 167, 255, 0.75)'
+accent1_rgba: 'rgba(168, 255, 238, 1)'
+accent1-alt_rgba: 'rgba(168, 255, 238, 0.75)'
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
index 42193fb..63efaca 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,33 +1,36 @@
 {% include relBase.html %}
-<header class="hero" id="top"
-  style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
+<header class="hero" style="background-image: url({{ relBase }}{{ page.image }});">
   <div class="imagecontainer">
     <h4>{{ page.title }}</h4>
   </div>
+  <div class="splash">
+    <div class="splash-logo">
+      {% if page.category == 'releases' or page.category == 'highlights' %}
 
-
-</header>  
-<section class="splash">
-
-<div class="container">
-
-  <div class="splash-logo" {% unless page.url == '/' %}style="display: none;"{% endunless %}>
-    <img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
+      {% else %}
+      <a href="#read"><img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" /></a>
+      {% endif %}
+      
+    </div>
+    <div class="description">
+  
+      <h1>{{ page.title }}</h1>
+      <p>{{ page.description }}</p>
+      {% if page.category == 'releases' %}
+      <p><a href="#play" class="button">🔊 Listen</a></p>
+      {% elsif page.category == 'highlights' %}
+      <p><a href="#read" class="button">👀 Read</a></p>
+      {% elsif page.url == '/404/' %}
+      <p><a href="/" class="button">🏡 Take me home</a></p>
+      {% elsif page.url == '/about/' %}
+      <p><a href="#read" class="button">👽 Saywhat?</a></p>
+      {% else %}
+      <p><a href="#read" class="button">🔥 Boom</a></p>
+      {% endif %}
+    </div>
   </div>
-
-  <div {% unless page.url == '/' %}style="padding: 0;"{% endunless %}>
-   
-    <h1>{{ page.title }}</h1>
-    {% if page.category == 'releases' %}
-    <h4>by <strong>{{ page.artist }}</strong></h4>
-    {% endif %}
-    {% unless page.category == 'releases' %}
-    <p>{{ page.description }}</p>
-    {% endunless %}
-  </div>
-</div>
-
-</section>
+ 
 
 
 
+</header>
diff --git a/_sass/_elements.scss b/_sass/_elements.scss
index d567a6a..7547547 100644
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@@ -303,52 +303,9 @@ a:hover {
   }
 
 }
-.front-section:first-of-type {
-  margin-top: 40px;
 
-}
 
-.splash {
-  .container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 40px;
-  align-items: flex-start;
-  max-width: var(--max-width);
-  margin: auto;
-  h1, h2 {
-    font-size: 2em;
-  }
-  p, h1, h2, h3, h4 {
-    text-align: left;
-    margin-top: 20px;
 
-  }
-  h1:first-child {
-    margin-top: 0;
-  }
-  div {
-    max-width: unset;
-    margin: 0;
-    flex: 1 1 300px;
-    padding: 0 0 0 80px;
-
-  }
-  .splash-logo {
-    padding: 0;
-    margin: 0;
-  }
-  @media only screen and (max-width: 759px) {
-    div {
-      min-width: 100%;
-      padding: 20px 0;
-    }
-    .splash-logo {
-      padding: 20px 0;
-    }
-  }
-}
-}
 
 #contact {
   padding: 20px;
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 55925d6..82afc1b 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -30,6 +30,7 @@ body {
 .wrapper {
   margin: 20px 40px;
 }
+
 .hero {
   display: flex;
   flex-wrap: wrap;
@@ -40,16 +41,18 @@ body {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding: 40px;
+  padding: 0;
   position: relative;
-  min-height: 80vh;
+  min-height: 100vh;
   width: 100vw;
 
   .textcontainer {
-    background-color: var(--bg-alt);
+    background: var(--bg-alt);
+    background: linear-gradient(33deg, transparent 0%, var(--bg) 90%, transparent 90%);
     border-radius: var(--border-radius);
-    max-width: 700px;
-    padding: 20px 20px 40px 20px;
+    max-width: var(--max-width);
+    padding: 0px 40px 40px 40px;
+    
   }
 
   div {
@@ -57,7 +60,7 @@ body {
     h1,
     p {
       flex: 1 0 100%;
-      width: 100%;
+
       z-index: 10;
       color: var(--fg);
       max-width: var(--max-width);
@@ -75,16 +78,16 @@ body {
     width: 100%;
     height: 100%;
     background-image: url("../img/vignette.svg");
-    background-size: 240px;
+    background-size: 960px;
     background-repeat: repeat-x;
     background-position: bottom;
     z-index: 1;
     h4 {
       width: 90vw;
-      height: auto;
-      min-height: 100px;
-      line-height: 0.85em;
-      letter-spacing: -0.08em;
+      /* height: auto; */
+      /* min-height: 100px; */
+      line-height: 1.011em;
+      letter-spacing: -0em;
       color: var(--bg);
       font-size: 15vw;
       display: inline;
@@ -94,12 +97,68 @@ body {
       bottom: 0;
       transform: rotate(-3deg);
       overflow: hidden;
-      background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg) 56%, var(--bg-alt) 100%);
+      background: -webkit-linear-gradient(90deg, var(--bg) 0%,var(--bg-alt) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       filter: blur(1px);
     }
   }
+  .splash {
+    background-color: transparent;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 40px;
+    align-items: flex-start;
+    max-width: var(--max-width);
+    margin: auto;
+      .description {
+        border-radius: var(--border-radius);
+        background: var(--bg-alt);
+        background: linear-gradient(33deg, var(--bg-alt) 0%, var(--bg) 90%, transparent 90%);
+        > * {
+          margin: 40px !important;
+        }
+        .button {
+          background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
+          background-size: 400% 400%;
+          -webkit-animation: backgroundBlink 2s ease infinite;
+          -moz-animation: backgroundBlink 2s ease infinite;
+          animation: backgroundBlink 2s ease infinite;
+        }
+      }
+    h1, h2 {
+      font-size: 2em;
+    }
+    p, h1, h2, h3, h4 {
+      text-align: left;
+      margin-top: 20px;
+  
+    }
+    h1:first-child {
+      margin-top: 0;
+    }
+    div {
+      max-width: unset;
+      margin: 0;
+      flex: 1 1 300px;
+
+  
+    }
+    .splash-logo {
+      padding: 0;
+      margin: 0;
+    }
+    @media only screen and (max-width: 759px) {
+      div {
+        min-width: 100%;
+        padding: 20px 0;
+      }
+      .splash-logo {
+        padding: 20px 0;
+      }
+    }
+  
+  }
 }
 
 section {
@@ -109,9 +168,7 @@ section {
   }
   flex: 1 1 100%;
   background-color: var(--bg);
-  -webkit-box-shadow: inset 0px 12px 32px -25px var(--border-alt);
-  -moz-box-shadow: inset 0px 12px 32px -25px var(--border-alt);
-  box-shadow: inset 0px 12px 32px -25px var(--border-alt);
+
   z-index: 2;
   h2 {
     text-align: center;
@@ -134,7 +191,7 @@ footer {
   background-color: var(--fg);
   color: var(--bg);
   background-image: url("../img/vignette-footer.svg");
-  background-size: 400px;
+  background-size: 200px;
   background-repeat: repeat-x;
   background-position: top;
   box-sizing: border-box;
@@ -261,6 +318,7 @@ footer {
 .streambox {
   text-align: center;
   line-height: 2em;
+  padding: 0 40px;
 }
 .streamer {
   max-width: var(--max-width);
diff --git a/_sass/_player.scss b/_sass/_player.scss
index a1f4b74..060e557 100644
--- a/_sass/_player.scss
+++ b/_sass/_player.scss
@@ -5,7 +5,7 @@
 .album-player {
   display: flex;
   flex-wrap: wrap;
-  padding: 0 40px;
+  padding: 80px 40px 0 40px;
   justify-content: space-evenly;
   flex-direction: row-reverse;
   align-items: center;
@@ -210,7 +210,7 @@ a[id^="btn"]::-moz-focus-inner {
   background-color: var(--accent1);
   margin: 0;
   padding: 0;
-  min-height: 50vw;
+  min-height: 50vh;
   text-align: left;
   .button {
     background-color: var(--accent1);
@@ -243,7 +243,7 @@ a[id^="btn"]::-moz-focus-inner {
   .full-image {
     width: 50%;
     min-width: 280px;
-    min-height: 50vw;
+    min-height: 50vh;
     background-color: transparent;
     background-size: cover;
     background-position: center;
diff --git a/_sass/zafari.scss b/_sass/zafari.scss
new file mode 100644
index 0000000..2d7474c
--- /dev/null
+++ b/_sass/zafari.scss
@@ -0,0 +1,30 @@
+.zafariClass {
+  opacity:1;
+  pointer-events: auto;
+  background-color: var(--bg);
+  text-align: center;
+  z-index: 10000;
+  overflow-y: scroll;
+  > div {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 700px;
+    h2 {
+      font-family: _font(family);
+    }
+    ul {
+      padding: 20px;
+      width: 100%
+    }
+    li {
+      list-style-type: none;
+      margin: 20px;
+      padding: 0;
+      a {
+        display: block;
+        font-size: 14px
+      }
+    }
+  }
+}
diff --git a/artists.html b/artists.html
index 615ffb0..9d52dcb 100644
--- a/artists.html
+++ b/artists.html
@@ -25,7 +25,7 @@ image: /assets/vid/artists.jpg
 {% assign sorted = site.data.artists | sort: 'id' %}      
 {% for post in sorted %}
 
-<section class="front-section">
+<section class="front-section" id="read">
 
   <div style="background-image:url({{ post.image }})">
     <p class="editor-link"><a href="cloudcannon:collections/_artists/{{ post.path }}" rel="nofollow"
diff --git a/assets/css/colors-20200911.css b/assets/css/colors-20200911.css
index 86b82df..f6d8648 100644
--- a/assets/css/colors-20200911.css
+++ b/assets/css/colors-20200911.css
@@ -2,15 +2,15 @@
 layout: nil
 ---
 :root {
---bg: {{ site.data.colors.bg_color }};
---bg-alt: {{ site.data.colors.bg-alt_color }};
---fg: {{ site.data.colors.fg_color }};
---fg-alt: {{ site.data.colors.fg-alt_color }};
---border: {{ site.data.colors.border_color }};
---border-alt: {{ site.data.colors.border-alt_color }};
---accent1: {{ site.data.colors.accent1_color }};
---accent1-alt: {{ site.data.colors.accent1-alt_color }};
---accent2: {{ site.data.colors.accent2_color }};
---accent2-alt: {{ site.data.colors.accent2-alt_color }};
+--bg: {{ site.data.colors.bg_rgba }};
+--bg-alt: {{ site.data.colors.bg-alt_rgba }};
+--fg: {{ site.data.colors.fg_rgba }};
+--fg-alt: {{ site.data.colors.fg-alt_rgba }};
+--border: {{ site.data.colors.border_rgba }};
+--border-alt: {{ site.data.colors.border-alt_rgba }};
+--accent1: {{ site.data.colors.accent1_rgba }};
+--accent1-alt: {{ site.data.colors.accent1-alt_rgba }};
+--accent2: {{ site.data.colors.accent2_rgba }};
+--accent2-alt: {{ site.data.colors.accent2-alt_rgba }};
 
 }
diff --git a/assets/img/vignette-footer.svg b/assets/img/vignette-footer.svg
index 9382040..644746a 100644
--- a/assets/img/vignette-footer.svg
+++ b/assets/img/vignette-footer.svg
@@ -5,6 +5,6 @@ layout: nil
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg">
  <g transform="rotate(180 160.5 50.64)">
-  <path d="m66.97 93.34 254-7.408v15.88h-254" fill="{{ site.data.colors.bg_color }}"/>
+  <path d="m66.97 93.34 254-7.408v15.88h-254" fill="{{ site.data.colors.bg_rgba }}"/>
  </g>
 </svg>
diff --git a/assets/img/vignette.svg b/assets/img/vignette.svg
index f584286..2747d94 100644
--- a/assets/img/vignette.svg
+++ b/assets/img/vignette.svg
@@ -4,6 +4,6 @@ layout: nil
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1 0 0 1 -66.97 -67.41)">
-  <path d="m66.97 93.87 254-7.408v15.35h-254" fill="{{ site.data.colors.bg_color }}"/>
+  <path d="m66.97 93.87 254-7.408v15.35h-254" fill="{{ site.data.colors.bg_rgba }}"/>
  </g>
 </svg>
diff --git a/discography.html b/discography.html
index 13b5f50..62bd9b1 100644
--- a/discography.html
+++ b/discography.html
@@ -22,7 +22,7 @@ layout: default
 {% for post in site.posts %}
 {% if album.slug == post.album %}
 
-<section class="front-section">
+<section class="front-section" id="read">
 
   <div style="background-image:url({{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg)">
     <p class="editor-link"><a href="cloudcannon:collections/_albums/{{ post.path }}" rel="nofollow"
diff --git a/highlights.html b/highlights.html
index 6a9c16c..9ad0ddc 100644
--- a/highlights.html
+++ b/highlights.html
@@ -19,7 +19,7 @@ layout: default
 
 {% for post in site.posts %}
 {% if post.category == 'highlights' %}
-<section class="front-section">
+<section class="front-section" id="read">
   <div style="background-image:url({{ post.image }})">
     <p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow"
         class="btn"><strong>&#9998;</strong> Edit Posy</a></p>
diff --git a/index.html b/index.html
index ed0915c..8105d90 100644
--- a/index.html
+++ b/index.html
@@ -20,27 +20,27 @@ layout: default
 ---
 {% include relBase.html %}
 
+{% include relBase.html %}
 <header class="hero" id="top"
-  style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
+  style="background-image: url({{ page.image }});">
   <div class="imagecontainer">
     <h4>{{ page.title }}</h4>
   </div>
 
+    <div class="splash">
+      <div class="splash-logo">
+        <a href="#read"><img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" /></a>
+      </div>
+      <div class="description">
+    
+        <h1>{{ site.title }}</h1>
+        <p>{{ page.description }}</p>
+        <p><a href="#read" class="button">🔥 Boom</a></p>
+      </div>
+    </div>
+
 
 </header>
-<section class="splash">
-<div class="container">
-  <div class="splash-logo">
-    <img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
-  </div>
-  <div>
-
-    <h1>{{ site.title }}</h1>
-    <p>{{ page.description }}</p>
-    <p><a href="/radio/" class="button">📻 Radio App</a></p>
-  </div>
-</div>
-</section>
 
 <section class="section-title">
   <div class="container">
diff --git a/links.html b/links.html
index d1846c9..a213dc8 100644
--- a/links.html
+++ b/links.html
@@ -18,7 +18,7 @@ image: /assets/vid/links.jpg
 
 {% assign sorted = site.data.links | sort: 'title' %}
 {% for post in sorted %}
-<section class="front-section">
+<section class="front-section" id="read">
 
   <div style="background-image:url({{ post.image }})">
     <p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow"