add socials

update social links
update socials
2023-07-28 15:41:35 +02:00 · 2023-07-28 15:38:32 +02:00 · 2023-07-28 15:33:18 +02:00 · 2022-10-15 14:49:23 +02:00 · 2022-10-15 12:35:14 +02:00 · 2022-10-15 12:35:04 +02:00
272 changed files with 12747 additions and 12122 deletions
--- a/.gitignore
+++ b/.gitignore
@ -25,4 +25,10 @@ _data/.~lock.*.csv

 ## No cover artwork or Mp3
 *.mp3
-assets/albums/
+assets/albums/
+
+# No Media Symbolic links
+media
+
+# See if cloudcannon renders plugin
+_data/pleroma.json
--- a/404.html
+++ b/404.html
@ -1,93 +1,9 @@
 ---
-layout: nil
+layout: 404page
 title: Error 404 This is not a page
 description: The page you are looking for has moved to the darknet.
 image: /images/pages/creds.jpg
-permalink: /404.html
+video_path: /videos/37th--chamber.mp4
+permalink: /404/
+sitemap: false
 ---
-
-<!DOCTYPE html>
-<!--
-  Based on _Story_ by html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-  Remixed and Jekyllified by Setto
-->
-<html lang="en">
-<head>
-{% include seo.html %}
-
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="stylesheet" href="/assets/css/main20200710.css" />
-<noscript><link rel="stylesheet" href="/assets/css/noscript20200710.css" /></noscript>
-</head>
-
-<body id="body">
-  <span id="top" style="display: none;"></span>
-  <!-- Wrapper -->
-  <div id="wrapper" class="divided">
-    
-
-
-
-
-<!-- Banner -->
-<section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center" style="min-height:100vh;">
-
-  <div class="content editable">
-    <h1 class="editable">{{ page.title }}</h1>
-    <p>{{ page.description }}</p>
-    <ul class="actions stacked">
-      <li><a href="/" class="button big wide">Take me back!</a></li>
-    </ul>
-  </div>
-
-  <div class="image">
-    <img src="{{ page.image }}" alt="unfound page" />
-  </div>
-</section>
-
-<!-- Footer -->
-<footer id="footer" class="wrapper style1 align-center">
-  <div class="footflex">
-    <div>
-      <h4>{{ site.title }}</h4>
-      <p>{{ site.description }}
-
-    </p></div>
-    <div>
-      <ul>
-
-        <li><a href="{{ relBase }}/">{{ site.data.translations[page.lang].home }}</a></li>
-
-        {% for entry in site.data.navigation %}
-        <li><a href="{{ entry.url }}">{{ entry.name }}</a></li>
-        {% endfor %}
-      </ul>
-    </div>
-    <div><img src="{{ site.logo }}" style="max-width:300px" /></div>
-  </div>
-  <div class="inner">
-
-    <p>&copy;2020 Basspistol | <a href="/webcreds/">Credits</a> | <a href="/cookies/">Cookies & Privacy</a></p>
-  </div>
-</footer>
-</div>
-
-{% include navigation.html %}
-
-<!-- Scripts -->
-
-<script src="/assets/js/jquery.min.js"></script>
-<script src="/assets/js/jquery.scrollex.min.js"></script>
-<script src="/assets/js/jquery.scrolly.min.js"></script>
-<script src="/assets/js/browser.min.js"></script>
-<script src="/assets/js/breakpoints.min.js"></script>
-<script src="/assets/js/util.js"></script>
-<script src="/assets/js/main.js"></script>
-<script src="/assets/js/set.js"></script>
-
-{% include cookie-consent.html %}
-
-</body>
-</html>
--- a/11
+++ b/11
@ -1,8 +1,13 @@
 source 'https://rubygems.org'

-gem 'jekyll', '4.0.0'
+gem 'jekyll', '4.1.1'

 group :jekyll_plugins do
-  gem 'jekyll-sitemap', '1.4.0'
-  gem 'jekyll-last-modified-at','1.1.0'
+  gem 'jekyll-sitemap'
+  gem 'jekyll-last-modified-at'
+  gem 'jekyll-image-size'
+  gem "json"
+  gem "activesupport"
 end
+
+gem "webrick", "~> 1.7"
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,75 +1,93 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    addressable (2.7.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    activesupport (7.0.4)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
    colorator (1.1.0)
-    concurrent-ruby (1.1.6)
-    em-websocket (0.5.1)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
    eventmachine (1.2.7)
-    ffi (1.13.1)
+    fastimage (2.2.6)
+    ffi (1.15.5)
    forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.4)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
      concurrent-ruby (~> 1.0)
-    jekyll (4.0.0)
+    jekyll (4.1.1)
      addressable (~> 2.4)
      colorator (~> 1.0)
      em-websocket (~> 0.5)
-      i18n (>= 0.9.5, < 2)
+      i18n (~> 1.0)
      jekyll-sass-converter (~> 2.0)
      jekyll-watch (~> 2.0)
      kramdown (~> 2.1)
      kramdown-parser-gfm (~> 1.0)
      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (~> 0.4.0)
      pathutil (~> 0.9)
      rouge (~> 3.0)
      safe_yaml (~> 1.0)
      terminal-table (~> 1.8)
-    jekyll-last-modified-at (1.1.0)
+    jekyll-image-size (1.2.1)
+      fastimage (>= 1.8)
+      jekyll (>= 3.7)
+    jekyll-last-modified-at (1.3.0)
      jekyll (>= 3.7, < 5.0)
      posix-spawn (~> 0.3.9)
-    jekyll-sass-converter (2.1.0)
+    jekyll-sass-converter (2.2.0)
      sassc (> 2.0.1, < 3.0)
    jekyll-sitemap (1.4.0)
      jekyll (>= 3.7, < 5.0)
    jekyll-watch (2.2.1)
      listen (~> 3.0)
-    kramdown (2.3.0)
+    json (2.6.2)
+    kramdown (2.4.0)
      rexml
    kramdown-parser-gfm (1.1.0)
      kramdown (~> 2.0)
    liquid (4.0.3)
-    listen (3.2.1)
+    listen (3.7.1)
      rb-fsevent (~> 0.10, >= 0.10.3)
      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
+    minitest (5.16.3)
    pathutil (0.16.2)
      forwardable-extended (~> 2.6)
    posix-spawn (0.3.15)
-    public_suffix (4.0.5)
-    rb-fsevent (0.10.4)
+    public_suffix (5.0.0)
+    rb-fsevent (0.11.2)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
-    rexml (3.2.4)
-    rouge (3.21.0)
+    rexml (3.2.5)
+    rouge (3.30.0)
    safe_yaml (1.0.5)
    sassc (2.4.0)
      ffi (~> 1.9)
    terminal-table (1.8.0)
      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
+    tzinfo (2.0.5)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)

 PLATFORMS
-  ruby
+  x86_64-linux

 DEPENDENCIES
-  jekyll (= 4.0.0)
-  jekyll-last-modified-at (= 1.1.0)
-  jekyll-sitemap (= 1.4.0)
+  activesupport
+  jekyll (= 4.1.1)
+  jekyll-image-size
+  jekyll-last-modified-at
+  jekyll-sitemap
+  json
+  webrick (~> 1.7)

 BUNDLED WITH
-   2.1.4
+   2.3.23
--- a/README.md
+++ b/README.md
@ -1,2 +1,2 @@
-# sakrecoer.com
-Webiste for Sakrecoer
+# setto.basspistol.com
+Webiste for To Setto Setto
--- a/_albums/cyber-grany.md
+++ b/_albums/cyber-grany.md
@ -2,21 +2,23 @@
 layout: album
 slug: cyber-grany
 name: Cyber Grany
-artists: 徒 Setto セット
-bitrate: 320000
-trackCount: 1
-cover: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys.jpeg
+artists:
+  - 徒 Setto セット
+  - 徒 setto セット
+bitrate: 128000
+trackCount: 2
+cover: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-.jpeg
 date: 2019-1-1
 tracks:
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/cyber-grany/1-grandma-got-the-ssh-keys.mp3
-    audio: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys.mp3
-    slug: cyber-grany/1-grandma-got-the-ssh-keys
+      /mnt/usb32gb/organized-setto.media/assets/albums/cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-.mp3
+    audio: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-.mp3
+    slug: cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-
    albumSlug: cyber-grany
-    trackSlug: 1-grandma-got-the-ssh-keys
+    trackSlug: 1-grandma-got-the-ssh-keys-insutrmental-
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/cyber-grany/1-grandma-got-the-ssh-keys.jpeg
-    cover: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-.jpeg
+    cover: /assets/albums/cyber-grany/1-grandma-got-the-ssh-keys-insutrmental-.jpeg
    format:
      tagTypes:
        - ID3v2.3
@ -26,18 +28,18 @@ tracks:
      codec: MPEG 1 Layer 3
      sampleRate: 44100
      numberOfChannels: 2
-      bitrate: 320000
+      bitrate: 128000
      codecProfile: CBR
-      numberOfSamples: 8909568
-      duration: 202.03102040816327
+      numberOfSamples: 8910720
+      duration: 202.05714285714285
    native:
      ID3v2.3:
        - id: TIT2
-          value: Grandma got the SSH keys
+          value: Grandma got the SSH keys (Insutrmental)
        - id: TPE1
          value: 徒 Setto セット
        - id: TRCK
-          value: 1/1
+          value: 1/2
        - id: TALB
          value: Cyber Grany
        - id: TPE2
@ -54,12 +56,12 @@ tracks:
          value: bhKd3SFqkr6x1L9X2JkIZ6UIaRA-
        - id: COMM
          value:
-            language: XXX
+            language: xxx
            description: WEBSITE
            text: 'https://setto.basspistol.com'
        - id: COMM
          value:
-            language: XXX
+            language: xxx
            description: Comment
            text: Special track for Acid December 2019
        - id: TYER
@ -69,11 +71,11 @@ tracks:
    common:
      track:
        'no': 1
-        of: 1
+        of: 2
      disk:
        'no': null
        of: null
-      title: Grandma got the SSH keys
+      title: Grandma got the SSH keys (Insutrmental)
      artists:
        - 徒 Setto セット
      artist: 徒 Setto セット
@ -87,9 +89,9 @@ tracks:
      year: 2019
    transformed:
      ID3v2.3:
-        TIT2: Grandma got the SSH keys
+        TIT2: Grandma got the SSH keys (Insutrmental)
        TPE1: 徒 Setto セット
-        TRCK: 1/1
+        TRCK: 1/2
        TALB: Cyber Grany
        TPE2: To Setto Setto
        TCON: Acid Trap
@ -101,9 +103,9 @@ tracks:
        Comment: Special track for Acid December 2019
        TYER: '2019'
    all:
-      TIT2: Grandma got the SSH keys
+      TIT2: Grandma got the SSH keys (Insutrmental)
      TPE1: 徒 Setto セット
-      TRCK: 1/1
+      TRCK: 1/2
      TALB: Cyber Grany
      TPE2: To Setto Setto
      TCON: Acid Trap
@ -114,4 +116,113 @@ tracks:
      WEBSITE: 'https://setto.basspistol.com'
      Comment: Special track for Acid December 2019
      TYER: '2019'
+  - path: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/cyber-grany/2-grand-ma-is-a-cyborg-now.mp3
+    audio: /assets/albums/cyber-grany/2-grand-ma-is-a-cyborg-now.mp3
+    slug: cyber-grany/2-grand-ma-is-a-cyborg-now
+    albumSlug: cyber-grany
+    trackSlug: 2-grand-ma-is-a-cyborg-now
+    coverPath: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/cyber-grany/2-grand-ma-is-a-cyborg-now.jpeg
+    cover: /assets/albums/cyber-grany/2-grand-ma-is-a-cyborg-now.jpeg
+    format:
+      tagTypes:
+        - ID3v2.3
+      trackInfo: []
+      lossless: false
+      container: MPEG
+      codec: MPEG 1 Layer 3
+      sampleRate: 48000
+      numberOfChannels: 2
+      bitrate: 128000
+      codecProfile: CBR
+      numberOfSamples: 9568512
+      duration: 199.344
+    native:
+      ID3v2.3:
+        - id: TIT2
+          value: Grand'ma Is A Cyborg Now
+        - id: TPE1
+          value: 徒 setto セット
+        - id: TALB
+          value: Cyber Grany
+        - id: TRCK
+          value: 2/2
+        - id: TCON
+          value: Acid Trap
+        - id: TPE2
+          value: To Setto Setto
+        - id: USLT
+          value: &ref_0
+            language: eng
+            description: ''
+            text: |-
+              Got a friend request from my grandma
+              But she spelled her name with an O
+              Felt like it came from Futurama
+              but I know my OP-sec yo!
+
+              Background check just didn't add up
+              Family tree is kind of messy
+              So I called her up
+              She loled out loud and said: hey sweetie!
+
+              Why is it that you never call me?
+              Good thing I went through the zuck
+              Although I think it's kind of shitty
+              I simply had to try my luck
+
+              Do I know what it does to democracy?
+              How come we have to be registered?
+              How can this promote any liberty?
+              If all we do in it is monitored?
+
+              So many questions and all valid,
+              She checked all my OP-sec control
+              94 years old and vivid
+              Holding strong her grandma role.
+
+              She said next time we go for a stroll
+              I'll get to see her augmentation:
+              A 2kg aluminum walker-roll
+              A marvelous invention!
+        - id: TYER
+          value: '2020'
+    quality:
+      warnings: []
+    common:
+      track:
+        'no': 2
+        of: 2
+      disk:
+        'no': null
+        of: null
+      title: Grand'ma Is A Cyborg Now
+      artists:
+        - 徒 setto セット
+      artist: 徒 setto セット
+      album: Cyber Grany
+      genre:
+        - Acid Trap
+      albumartist: To Setto Setto
+      year: 2020
+    transformed:
+      ID3v2.3:
+        TIT2: Grand'ma Is A Cyborg Now
+        TPE1: 徒 setto セット
+        TALB: Cyber Grany
+        TRCK: 2/2
+        TCON: Acid Trap
+        TPE2: To Setto Setto
+        USLT: *ref_0
+        TYER: '2020'
+    all:
+      TIT2: Grand'ma Is A Cyborg Now
+      TPE1: 徒 setto セット
+      TALB: Cyber Grany
+      TRCK: 2/2
+      TCON: Acid Trap
+      TPE2: To Setto Setto
+      USLT: *ref_0
+      TYER: '2020'
 ---
--- a/_albums/darkweb.md
+++ b/_albums/darkweb.md
@ -8,14 +8,12 @@ trackCount: 4
 cover: /assets/albums/darkweb/1-swipe.jpeg
 date: 2019-1-1
 tracks:
-  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/1-swipe.mp3
+  - path: /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/1-swipe.mp3
    audio: /assets/albums/darkweb/1-swipe.mp3
    slug: darkweb/1-swipe
    albumSlug: darkweb
    trackSlug: 1-swipe
-    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/1-swipe.jpeg
+    coverPath: /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/1-swipe.jpeg
    cover: /assets/albums/darkweb/1-swipe.jpeg
    format:
      tagTypes:
@ -340,14 +338,12 @@ tracks:
        Je yeuxt vers l'avant de temps en temps.
      TCON: Cyber Soul
      TYER: '2019'
-  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/2-darkweb.mp3
+  - path: /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/2-darkweb.mp3
    audio: /assets/albums/darkweb/2-darkweb.mp3
    slug: darkweb/2-darkweb
    albumSlug: darkweb
    trackSlug: 2-darkweb
-    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/2-darkweb.jpeg
+    coverPath: /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/2-darkweb.jpeg
    cover: /assets/albums/darkweb/2-darkweb.jpeg
    format:
      tagTypes:
@ -437,13 +433,13 @@ tracks:
      TCON: Cypher Rap
      TYER: '2019'
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/3-swipe-instrumental-.mp3
+      /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/3-swipe-instrumental-.mp3
    audio: /assets/albums/darkweb/3-swipe-instrumental-.mp3
    slug: darkweb/3-swipe-instrumental-
    albumSlug: darkweb
    trackSlug: 3-swipe-instrumental-
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/3-swipe-instrumental-.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/3-swipe-instrumental-.jpeg
    cover: /assets/albums/darkweb/3-swipe-instrumental-.jpeg
    format:
      tagTypes:
@ -526,13 +522,13 @@ tracks:
      TCON: Cyber Soul
      TYER: '2019'
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/4-darkweb-instrumental-.mp3
+      /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/4-darkweb-instrumental-.mp3
    audio: /assets/albums/darkweb/4-darkweb-instrumental-.mp3
    slug: darkweb/4-darkweb-instrumental-
    albumSlug: darkweb
    trackSlug: 4-darkweb-instrumental-
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/darkweb/4-darkweb-instrumental-.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/darkweb/4-darkweb-instrumental-.jpeg
    cover: /assets/albums/darkweb/4-darkweb-instrumental-.jpeg
    format:
      tagTypes:
--- a/_albums/little-bug-ep.md
+++ b/_albums/little-bug-ep.md
@ -0,0 +1,383 @@
+---
+layout: album
+slug: little-bug-ep
+name: Little Bug EP
+artists:
+  - 徒 Setto セット
+  - Randulo
+bitrate: 192000
+trackCount: 2
+cover: /assets/albums/little-bug-ep/1-ding-ding-world.jpeg
+date: 2021-1-1
+tracks:
+  - path: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/little-bug-ep/1-ding-ding-world.mp3
+    audio: /assets/albums/little-bug-ep/1-ding-ding-world.mp3
+    slug: little-bug-ep/1-ding-ding-world
+    albumSlug: little-bug-ep
+    trackSlug: 1-ding-ding-world
+    coverPath: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/little-bug-ep/1-ding-ding-world.jpeg
+    cover: /assets/albums/little-bug-ep/1-ding-ding-world.jpeg
+    format:
+      tagTypes:
+        - ID3v2.3
+      trackInfo: []
+      lossless: false
+      container: MPEG
+      codec: MPEG 1 Layer 3
+      sampleRate: 44100
+      numberOfChannels: 2
+      bitrate: 192000
+      codecProfile: CBR
+      numberOfSamples: 9355392
+      duration: 212.1404081632653
+    native:
+      ID3v2.3:
+        - id: TPE1
+          value: 徒 Setto セット Feat. Randulo
+        - id: TALB
+          value: Little Bug EP
+        - id: TCON
+          value: Lo-Fi Hiphop
+        - id: TIT2
+          value: Ding Ding World
+        - id: TRCK
+          value: '1'
+        - id: COMM
+          value: &ref_0
+            language: eng
+            description: ''
+            text: 'https://setto.basspistol.com'
+        - id: TPE2
+          value: 徒 Setto セット
+        - id: 'TXXX:CATALOGNUMBER'
+          value: BPIST-EP004
+        - id: TPOS
+          value: '1'
+        - id: 'TXXX:RELEASECOUNTRY'
+          value: XW
+        - id: TSO2
+          value: 徒 Setto セット
+        - id: TSOP
+          value: 徒 Setto セット Feat. Randulo
+        - id: 'TXXX:ARTISTS'
+          value: 徒 Setto セット
+        - id: 'TXXX:ARTISTS'
+          value: ''
+        - id: 'TXXX:DISCTOTAL'
+          value: '1'
+        - id: 'TXXX:LABEL'
+          value: Basspistol
+        - id: 'TXXX:MEDIA'
+          value: Digital Media
+        - id: 'TXXX:MUSICBRAINZ_ALBUMARTISTID'
+          value: 31e8e456-0589-47eb-9334-20872851cd3e
+        - id: 'TXXX:MUSICBRAINZ_ALBUMID'
+          value: 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+        - id: 'TXXX:MUSICBRAINZ_ARTISTID'
+          value: 31e8e456-0589-47eb-9334-20872851cd3e
+        - id: 'TXXX:MUSICBRAINZ_ARTISTID'
+          value: 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+        - id: 'TXXX:MUSICBRAINZ_RELEASEGROUPID'
+          value: 89cd67a2-015f-4843-923c-9c4fb129ac28
+        - id: 'TXXX:MUSICBRAINZ_RELEASETRACKID'
+          value: bc760d71-a92d-44a4-8cae-907b26de8947
+        - id: 'TXXX:MUSICBRAINZ_TRACKID'
+          value: 1b726152-48f9-44a6-b7fe-117ecb6e16b7
+        - id: 'TXXX:ORIGINALYEAR'
+          value: '2021'
+        - id: 'TXXX:RELEASESTATUS'
+          value: official
+        - id: 'TXXX:RELEASETYPE'
+          value: ep
+        - id: 'TXXX:TOTALDISCS'
+          value: '1'
+        - id: 'TXXX:TOTALTRACKS'
+          value: '2'
+        - id: 'TXXX:TRACKTOTAL'
+          value: '2'
+        - id: TORY
+          value: '2021'
+        - id: TYER
+          value: '2021'
+        - id: TDAT
+          value: 0803
+    quality:
+      warnings: []
+    common:
+      track:
+        'no': 1
+        of: null
+      disk:
+        'no': 1
+        of: null
+      artists:
+        - 徒 Setto セット
+        - ''
+      artist: 徒 Setto セット Feat. Randulo
+      album: Little Bug EP
+      genre:
+        - Lo-Fi Hiphop
+      title: Ding Ding World
+      comment:
+        - 'https://setto.basspistol.com'
+      albumartist: 徒 Setto セット
+      catalognumber:
+        - BPIST-EP004
+      releasecountry: XW
+      albumartistsort: 徒 Setto セット
+      artistsort: 徒 Setto セット Feat. Randulo
+      originalyear: 2021
+      year: 2021
+    transformed:
+      ID3v2.3:
+        TPE1: 徒 Setto セット Feat. Randulo
+        TALB: Little Bug EP
+        TCON: Lo-Fi Hiphop
+        TIT2: Ding Ding World
+        TRCK: '1'
+        COMM: *ref_0
+        TPE2: 徒 Setto セット
+        'TXXX:CATALOGNUMBER': BPIST-EP004
+        TPOS: '1'
+        'TXXX:RELEASECOUNTRY': XW
+        TSO2: 徒 Setto セット
+        TSOP: 徒 Setto セット Feat. Randulo
+        'TXXX:ARTISTS': ''
+        'TXXX:DISCTOTAL': '1'
+        'TXXX:LABEL': Basspistol
+        'TXXX:MEDIA': Digital Media
+        'TXXX:MUSICBRAINZ_ALBUMARTISTID': 31e8e456-0589-47eb-9334-20872851cd3e
+        'TXXX:MUSICBRAINZ_ALBUMID': 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+        'TXXX:MUSICBRAINZ_ARTISTID': 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+        'TXXX:MUSICBRAINZ_RELEASEGROUPID': 89cd67a2-015f-4843-923c-9c4fb129ac28
+        'TXXX:MUSICBRAINZ_RELEASETRACKID': bc760d71-a92d-44a4-8cae-907b26de8947
+        'TXXX:MUSICBRAINZ_TRACKID': 1b726152-48f9-44a6-b7fe-117ecb6e16b7
+        'TXXX:ORIGINALYEAR': '2021'
+        'TXXX:RELEASESTATUS': official
+        'TXXX:RELEASETYPE': ep
+        'TXXX:TOTALDISCS': '1'
+        'TXXX:TOTALTRACKS': '2'
+        'TXXX:TRACKTOTAL': '2'
+        TORY: '2021'
+        TYER: '2021'
+        TDAT: 0803
+    all:
+      TPE1: 徒 Setto セット Feat. Randulo
+      TALB: Little Bug EP
+      TCON: Lo-Fi Hiphop
+      TIT2: Ding Ding World
+      TRCK: '1'
+      COMM: *ref_0
+      TPE2: 徒 Setto セット
+      'TXXX:CATALOGNUMBER': BPIST-EP004
+      TPOS: '1'
+      'TXXX:RELEASECOUNTRY': XW
+      TSO2: 徒 Setto セット
+      TSOP: 徒 Setto セット Feat. Randulo
+      'TXXX:ARTISTS': ''
+      'TXXX:DISCTOTAL': '1'
+      'TXXX:LABEL': Basspistol
+      'TXXX:MEDIA': Digital Media
+      'TXXX:MUSICBRAINZ_ALBUMARTISTID': 31e8e456-0589-47eb-9334-20872851cd3e
+      'TXXX:MUSICBRAINZ_ALBUMID': 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+      'TXXX:MUSICBRAINZ_ARTISTID': 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+      'TXXX:MUSICBRAINZ_RELEASEGROUPID': 89cd67a2-015f-4843-923c-9c4fb129ac28
+      'TXXX:MUSICBRAINZ_RELEASETRACKID': bc760d71-a92d-44a4-8cae-907b26de8947
+      'TXXX:MUSICBRAINZ_TRACKID': 1b726152-48f9-44a6-b7fe-117ecb6e16b7
+      'TXXX:ORIGINALYEAR': '2021'
+      'TXXX:RELEASESTATUS': official
+      'TXXX:RELEASETYPE': ep
+      'TXXX:TOTALDISCS': '1'
+      'TXXX:TOTALTRACKS': '2'
+      'TXXX:TRACKTOTAL': '2'
+      TORY: '2021'
+      TYER: '2021'
+      TDAT: 0803
+  - path: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/little-bug-ep/2-little-bug.mp3
+    audio: /assets/albums/little-bug-ep/2-little-bug.mp3
+    slug: little-bug-ep/2-little-bug
+    albumSlug: little-bug-ep
+    trackSlug: 2-little-bug
+    coverPath: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/little-bug-ep/2-little-bug.jpeg
+    cover: /assets/albums/little-bug-ep/2-little-bug.jpeg
+    format:
+      tagTypes:
+        - ID3v2.3
+      trackInfo: []
+      lossless: false
+      container: MPEG
+      codec: MPEG 1 Layer 3
+      sampleRate: 44100
+      numberOfChannels: 2
+      bitrate: 192000
+      codecProfile: CBR
+      numberOfSamples: 6884352
+      duration: 156.1077551020408
+    native:
+      ID3v2.3:
+        - id: TPE1
+          value: 徒 Setto セット Feat. Randulo
+        - id: TALB
+          value: Little Bug EP
+        - id: TCON
+          value: Lo-Fi Hiphop
+        - id: TIT2
+          value: Little Bug
+        - id: TRCK
+          value: '2'
+        - id: COMM
+          value: &ref_1
+            language: eng
+            description: ''
+            text: 'https://setto.basspistol.com'
+        - id: TPE2
+          value: 徒 Setto セット
+        - id: 'TXXX:CATALOGNUMBER'
+          value: BPIST-EP004
+        - id: TPOS
+          value: '1'
+        - id: 'TXXX:RELEASECOUNTRY'
+          value: XW
+        - id: TSO2
+          value: 徒 Setto セット
+        - id: TSOP
+          value: 徒 Setto セット Feat. Randulo
+        - id: 'TXXX:ARTISTS'
+          value: 徒 Setto セット
+        - id: 'TXXX:ARTISTS'
+          value: Randulo
+        - id: 'TXXX:DISCTOTAL'
+          value: '1'
+        - id: 'TXXX:LABEL'
+          value: Basspistol
+        - id: 'TXXX:MEDIA'
+          value: Digital Media
+        - id: 'TXXX:MUSICBRAINZ_ALBUMARTISTID'
+          value: 31e8e456-0589-47eb-9334-20872851cd3e
+        - id: 'TXXX:MUSICBRAINZ_ALBUMID'
+          value: 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+        - id: 'TXXX:MUSICBRAINZ_ARTISTID'
+          value: 31e8e456-0589-47eb-9334-20872851cd3e
+        - id: 'TXXX:MUSICBRAINZ_ARTISTID'
+          value: 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+        - id: 'TXXX:MUSICBRAINZ_RELEASEGROUPID'
+          value: 89cd67a2-015f-4843-923c-9c4fb129ac28
+        - id: 'TXXX:MUSICBRAINZ_RELEASETRACKID'
+          value: 7a4ff716-7305-47d2-81b5-2689f1846cdd
+        - id: 'TXXX:MUSICBRAINZ_TRACKID'
+          value: fbb7ab99-ab85-4dea-be4d-282692d0050d
+        - id: 'TXXX:ORIGINALYEAR'
+          value: '2021'
+        - id: 'TXXX:RELEASESTATUS'
+          value: official
+        - id: 'TXXX:RELEASETYPE'
+          value: ep
+        - id: 'TXXX:TOTALDISCS'
+          value: '1'
+        - id: 'TXXX:TOTALTRACKS'
+          value: '2'
+        - id: 'TXXX:TRACKTOTAL'
+          value: '2'
+        - id: TORY
+          value: '2021'
+        - id: TYER
+          value: '2021'
+        - id: TDAT
+          value: 0803
+    quality:
+      warnings: []
+    common:
+      track:
+        'no': 2
+        of: null
+      disk:
+        'no': 1
+        of: null
+      artists:
+        - 徒 Setto セット
+        - Randulo
+      artist: 徒 Setto セット Feat. Randulo
+      album: Little Bug EP
+      genre:
+        - Lo-Fi Hiphop
+      title: Little Bug
+      comment:
+        - 'https://setto.basspistol.com'
+      albumartist: 徒 Setto セット
+      catalognumber:
+        - BPIST-EP004
+      releasecountry: XW
+      albumartistsort: 徒 Setto セット
+      artistsort: 徒 Setto セット Feat. Randulo
+      originalyear: 2021
+      year: 2021
+    transformed:
+      ID3v2.3:
+        TPE1: 徒 Setto セット Feat. Randulo
+        TALB: Little Bug EP
+        TCON: Lo-Fi Hiphop
+        TIT2: Little Bug
+        TRCK: '2'
+        COMM: *ref_1
+        TPE2: 徒 Setto セット
+        'TXXX:CATALOGNUMBER': BPIST-EP004
+        TPOS: '1'
+        'TXXX:RELEASECOUNTRY': XW
+        TSO2: 徒 Setto セット
+        TSOP: 徒 Setto セット Feat. Randulo
+        'TXXX:ARTISTS': Randulo
+        'TXXX:DISCTOTAL': '1'
+        'TXXX:LABEL': Basspistol
+        'TXXX:MEDIA': Digital Media
+        'TXXX:MUSICBRAINZ_ALBUMARTISTID': 31e8e456-0589-47eb-9334-20872851cd3e
+        'TXXX:MUSICBRAINZ_ALBUMID': 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+        'TXXX:MUSICBRAINZ_ARTISTID': 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+        'TXXX:MUSICBRAINZ_RELEASEGROUPID': 89cd67a2-015f-4843-923c-9c4fb129ac28
+        'TXXX:MUSICBRAINZ_RELEASETRACKID': 7a4ff716-7305-47d2-81b5-2689f1846cdd
+        'TXXX:MUSICBRAINZ_TRACKID': fbb7ab99-ab85-4dea-be4d-282692d0050d
+        'TXXX:ORIGINALYEAR': '2021'
+        'TXXX:RELEASESTATUS': official
+        'TXXX:RELEASETYPE': ep
+        'TXXX:TOTALDISCS': '1'
+        'TXXX:TOTALTRACKS': '2'
+        'TXXX:TRACKTOTAL': '2'
+        TORY: '2021'
+        TYER: '2021'
+        TDAT: 0803
+    all:
+      TPE1: 徒 Setto セット Feat. Randulo
+      TALB: Little Bug EP
+      TCON: Lo-Fi Hiphop
+      TIT2: Little Bug
+      TRCK: '2'
+      COMM: *ref_1
+      TPE2: 徒 Setto セット
+      'TXXX:CATALOGNUMBER': BPIST-EP004
+      TPOS: '1'
+      'TXXX:RELEASECOUNTRY': XW
+      TSO2: 徒 Setto セット
+      TSOP: 徒 Setto セット Feat. Randulo
+      'TXXX:ARTISTS': Randulo
+      'TXXX:DISCTOTAL': '1'
+      'TXXX:LABEL': Basspistol
+      'TXXX:MEDIA': Digital Media
+      'TXXX:MUSICBRAINZ_ALBUMARTISTID': 31e8e456-0589-47eb-9334-20872851cd3e
+      'TXXX:MUSICBRAINZ_ALBUMID': 33eaeafa-4dfb-425b-9e74-01cf2364cc8f
+      'TXXX:MUSICBRAINZ_ARTISTID': 95954cb7-fc82-4516-aabc-2b6a4fdeea91
+      'TXXX:MUSICBRAINZ_RELEASEGROUPID': 89cd67a2-015f-4843-923c-9c4fb129ac28
+      'TXXX:MUSICBRAINZ_RELEASETRACKID': 7a4ff716-7305-47d2-81b5-2689f1846cdd
+      'TXXX:MUSICBRAINZ_TRACKID': fbb7ab99-ab85-4dea-be4d-282692d0050d
+      'TXXX:ORIGINALYEAR': '2021'
+      'TXXX:RELEASESTATUS': official
+      'TXXX:RELEASETYPE': ep
+      'TXXX:TOTALDISCS': '1'
+      'TXXX:TOTALTRACKS': '2'
+      'TXXX:TRACKTOTAL': '2'
+      TORY: '2021'
+      TYER: '2021'
+      TDAT: 0803
+---
--- a/_albums/live-with-hardware.md
+++ b/_albums/live-with-hardware.md
@ -9,13 +9,13 @@ cover: /assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.jpeg
 date: 2020-4-20
 tracks:
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.mp3
+      /mnt/usb32gb/organized-setto.media/assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.mp3
    audio: /assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.mp3
    slug: live-with-hardware/1-ep-life-of-a-dudelini
    albumSlug: live-with-hardware
    trackSlug: 1-ep-life-of-a-dudelini
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.jpeg
    cover: /assets/albums/live-with-hardware/1-ep-life-of-a-dudelini.jpeg
    format:
      tagTypes:
--- a/_albums/satoshi-mon-ami.md
+++ b/_albums/satoshi-mon-ami.md
@ -9,13 +9,13 @@ cover: /assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.jpeg
 date: 2018-1-1
 tracks:
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.mp3
+      /mnt/usb32gb/organized-setto.media/assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.mp3
    audio: /assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.mp3
    slug: satoshi-mon-ami/1-k-as-tu-fait-de-nous-
    albumSlug: satoshi-mon-ami
    trackSlug: 1-k-as-tu-fait-de-nous-
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.jpeg
    cover: /assets/albums/satoshi-mon-ami/1-k-as-tu-fait-de-nous-.jpeg
    format:
      tagTypes:
@ -99,13 +99,13 @@ tracks:
      TCON: Cyber Soul
      TYER: '2018'
  - path: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/satoshi-mon-ami/2-r-ve-de-toi.mp3
+      /mnt/usb32gb/organized-setto.media/assets/albums/satoshi-mon-ami/2-r-ve-de-toi.mp3
    audio: /assets/albums/satoshi-mon-ami/2-r-ve-de-toi.mp3
    slug: satoshi-mon-ami/2-r-ve-de-toi
    albumSlug: satoshi-mon-ami
    trackSlug: 2-r-ve-de-toi
    coverPath: >-
-      /home/set/git/basspistol/setto.basspistol.com/assets/albums/satoshi-mon-ami/2-r-ve-de-toi.jpeg
+      /mnt/usb32gb/organized-setto.media/assets/albums/satoshi-mon-ami/2-r-ve-de-toi.jpeg
    cover: /assets/albums/satoshi-mon-ami/2-r-ve-de-toi.jpeg
    format:
      tagTypes:
--- a/_albums/unmet-dependencies.md
+++ b/_albums/unmet-dependencies.md
@ -0,0 +1,220 @@
+---
+layout: album
+slug: unmet-dependencies
+name: Unmet Dependencies
+artists: 徒 setto セット
+bitrate: 128000
+trackCount: 2
+cover: /assets/albums/unmet-dependencies/1-dependency-error.jpeg
+date: 2020-1-1
+tracks:
+  - path: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/unmet-dependencies/1-dependency-error.mp3
+    audio: /assets/albums/unmet-dependencies/1-dependency-error.mp3
+    slug: unmet-dependencies/1-dependency-error
+    albumSlug: unmet-dependencies
+    trackSlug: 1-dependency-error
+    coverPath: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/unmet-dependencies/1-dependency-error.jpeg
+    cover: /assets/albums/unmet-dependencies/1-dependency-error.jpeg
+    format:
+      tagTypes:
+        - ID3v2.3
+      trackInfo: []
+      lossless: false
+      container: MPEG
+      codec: MPEG 1 Layer 3
+      sampleRate: 44100
+      numberOfChannels: 2
+      bitrate: 128000
+      codecProfile: CBR
+      numberOfSamples: 13817088
+      duration: 313.31265306122447
+    native:
+      ID3v2.3:
+        - id: TPE1
+          value: 徒 setto セット
+        - id: TALB
+          value: Unmet Dependencies
+        - id: TRCK
+          value: '1'
+        - id: TCON
+          value: Cybersoul
+        - id: TIT2
+          value: Dependency Error
+        - id: USLT
+          value: &ref_0
+            language: eng
+            description: ''
+            text: |
+              Sudo apt update
+              Sudo apt upgrade
+              Sudo apt update
+              Sudo apt upgrade
+
+              There is an error with my dependencies
+              Consultd 1.2 and emplyomentd 1.70
+              I cannot pay my rent without their libraries
+              And to install I need to share my salary
+              Where do I fit in this society
+              The more I look and the less I see
+              They want no robots nor do they want me
+              Because work is a point in the agenda of the party
+
+              Sudo apt update
+              Sudo apt upgrade
+              Sudo apt update
+              Sudo apt upgrade
+
+              My liver isn't black market worthy
+              And my master degree from a street university
+              My ambitions are low and I am debt free
+              There is no room in the industry for robots like me
+              Don't get me wrong I would also like to be
+              Installed and running and compatible with society
+              But I am running a different library
+              Because my kernel is still libre and free
+
+              Sudo apt update
+              Sudo apt upgrade
+              Sudo apt update
+              Sudo apt upgrade
+        - id: TYER
+          value: '2020'
+        - id: TDAT
+          value: 0208
+    quality:
+      warnings: []
+    common:
+      track:
+        'no': 1
+        of: null
+      disk:
+        'no': null
+        of: null
+      artists:
+        - 徒 setto セット
+      artist: 徒 setto セット
+      album: Unmet Dependencies
+      genre:
+        - Cybersoul
+      title: Dependency Error
+      year: 2020
+    transformed:
+      ID3v2.3:
+        TPE1: 徒 setto セット
+        TALB: Unmet Dependencies
+        TRCK: '1'
+        TCON: Cybersoul
+        TIT2: Dependency Error
+        USLT: *ref_0
+        TYER: '2020'
+        TDAT: 0208
+    all:
+      TPE1: 徒 setto セット
+      TALB: Unmet Dependencies
+      TRCK: '1'
+      TCON: Cybersoul
+      TIT2: Dependency Error
+      USLT: *ref_0
+      TYER: '2020'
+      TDAT: 0208
+  - path: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/unmet-dependencies/2-pingnu.mp3
+    audio: /assets/albums/unmet-dependencies/2-pingnu.mp3
+    slug: unmet-dependencies/2-pingnu
+    albumSlug: unmet-dependencies
+    trackSlug: 2-pingnu
+    coverPath: >-
+      /mnt/usb32gb/organized-setto.media/assets/albums/unmet-dependencies/2-pingnu.jpeg
+    cover: /assets/albums/unmet-dependencies/2-pingnu.jpeg
+    format:
+      tagTypes:
+        - ID3v2.3
+      trackInfo: []
+      lossless: false
+      container: MPEG
+      codec: MPEG 1 Layer 3
+      sampleRate: 44100
+      numberOfChannels: 2
+      bitrate: 128000
+      codecProfile: CBR
+      numberOfSamples: 9795456
+      duration: 222.1191836734694
+    native:
+      ID3v2.3:
+        - id: TPE1
+          value: 徒 setto セット
+        - id: TALB
+          value: Unmet Dependencies
+        - id: TRCK
+          value: '2'
+        - id: TCON
+          value: Cybersoul
+        - id: TIT2
+          value: Pingnu
+        - id: USLT
+          value: &ref_1
+            language: eng
+            description: ''
+            text: |
+              I’m a little Pingu, riding on a GNU.
+              Looking at the world, looking at you.
+              Free at the core, i wonder why don’t you,
+              Look at me the way i look at you.
+
+              It would be so nice, if you could take me in.
+              Your computer and i could change the world we’re in.
+              Your freedom is being diluted.
+              And your code is being polluted.
+
+              I’m a big GNU with my little Pingu,
+              Looking at the world, looking at you.
+              Free at the core, i wonder why don’t you,
+              Look at me the way i look at you.
+
+              It would be so nice, if you could compute.
+              Your freedom is not to dilute,
+              Someone has taken your tool into dispute,
+              This is what together we should refute.
+        - id: TYER
+          value: '2020'
+        - id: TDAT
+          value: 0208
+    quality:
+      warnings: []
+    common:
+      track:
+        'no': 2
+        of: null
+      disk:
+        'no': null
+        of: null
+      artists:
+        - 徒 setto セット
+      artist: 徒 setto セット
+      album: Unmet Dependencies
+      genre:
+        - Cybersoul
+      title: Pingnu
+      year: 2020
+    transformed:
+      ID3v2.3:
+        TPE1: 徒 setto セット
+        TALB: Unmet Dependencies
+        TRCK: '2'
+        TCON: Cybersoul
+        TIT2: Pingnu
+        USLT: *ref_1
+        TYER: '2020'
+        TDAT: 0208
+    all:
+      TPE1: 徒 setto セット
+      TALB: Unmet Dependencies
+      TRCK: '2'
+      TCON: Cybersoul
+      TIT2: Pingnu
+      USLT: *ref_1
+      TYER: '2020'
+      TDAT: 0208
+---
--- a/_authors/setto.md
+++ b/_authors/setto.md
@ -1,6 +1,6 @@
 ---
 name: 徒 setto セット
-position: 'Geek'
+position: 'Information Musician'
 image: /siteicon.png
 url_staff: 'https://setto.basspistol.com'
 email: 'setto@basspistol.com'
--- a/_config.yml
+++ b/_config.yml
@ -1,6 +1,10 @@
+title : 徒settoセット
+description: 'Set, Party, Gang! #Cybersoul.'
+
 url: "https://setto.basspistol.com" # the base hostname & protocol for your site
 permalink: /:categories/:title/

+## jekyll excludes
 exclude:
  - changelog.md
  - '*.*~'
@ -10,9 +14,7 @@ exclude:
  - Gemfile.lock
  - README.md
  - LICENCE
-
-title : 徒 setto セット
-description: 'Set, Party, Gang! &#35;Cybersoul.'
+## SEO
 geo: 
  timezone: "Europe/Switzerland"
  lat: '46.203918'
@ -21,38 +23,60 @@ geo:
  town: 'Geneva'
  country: 'Switzerland'
  postalcode: '1201'
+timezone: CET

 banner:   /images/setto-logo.svg
+banner-vert: /images/setto_logo.svg
 icon:   /images/setto-logoicon.svg
 logo:   /images/setto-logo.svg
-logo-footer: /images/setto-logo-dark.svg
+logo-footer: /images/setto-logoicon-footer.svg
 mediaurl: https://media.basspistol.com/setto.basspistol.com
+#mediaurl: /media

 publisher:
  name: Basspistol
-  domain: setto.basspistol.com
+  domain: basspistol.com
  mail: info@basspistol.com
 social:
  name: To Setto Setto
+  mail: setto@basspistol.com
  links:
    - https://twitter.com/ToSettoSetto
    - https://instagram.com/ToSettoSetto
-
+    - https://s.basspistol.org/@setto
+    - https://www.facebook.com/徒-setto-セット-100627981795265
+  usernames:
+    twitter: ToSettoSetto
+    telegram: tosettosetto
+  hashtag: basspistol
+  irc: 
+    channel: '#tosettosetto'
+    guest-nick: anon
+    matrix: https://matrix.to/#/!YQcdVviFQNGYFMYrxD:matrix.org?via=matrix.org
+## Matomo
+matomo_site_id: '3'
+matomo_container: 'fHO88MfH'
+# defaults
 categories:
  - releases
  - ramblings
+tags: 
+  - LP
+  - EP
+  - Single

 collections:
  albums:
-    output: true
+    output: false
    permalink: /albums/:name/
+    _disable_add: true
  tracks:
    output: true
-    permalink: /albums/:path/
+    permalink: /:path/
+    sort_by: common.year
+    _disable_add: true
  authors:
    output: false
-      
-# defaults

 sass:
  sass_dir: _sass
@ -70,6 +94,7 @@ defaults:
      lang: en
      seo:
        type: "AudioObject"
+      _unlisted: true
  - scope:
      path: ""
      type: "albums"
@ -78,6 +103,7 @@ defaults:
      lang: en
      seo:
        type: "AudioObject"
+      _unlisted: true
  - scope:
      path: ""
      type: "pages"
@ -113,6 +139,52 @@ defaults:
          height: 720
          resize_style: cover
          uploads_dir: "/images/posts"  
+        video_path:
+          uploads_dir: "/videos"
 # ---------
 # Translate
 lang: en
+
+### Cloud Cannon Settings
+
+_explore:
+  groups:
+    - heading: Content
+      collections:
+        - posts
+        - drafts
+        - pages
+    - heading: Other
+      collections:
+        - data
+        - authors
+
+
+
+plugins:
+#   - jekyll-pwa-plugin
+  - jekyll-image-size
+plugins_dir: ./_plugins
+
+jekyll_xml:
+  - data: pleroma
+    source: https://t.basspistol.org/users/setto/feed.atom
+    cache: true
+
+# pwa:
+#   enabled: false # Optional
+#   sw_src_filepath: service-worker.js # Optional
+#   sw_dest_filename: service-worker.js # Optional
+#   dest_js_directory: assets/js # Required
+#   precache_recent_posts_num: 5 # Optional
+#   precache_glob_directory: / # Optional
+#   precache_glob_patterns: # Optional
+#     - "assets/{js,css,fonts}/**/*.{js,css,eot,svg,ttf,woff,png,jpg,jpeg}"
+#     - "videos/*{mp4,webm}"
+#     - "images/**/*.{svg}"
+#     - "images/posts/*.{jpg,jpeg,png}"
+#     - "images/pages/*.{jpg,jpeg,png}"
+#     - "assets/albums/**/*.{mp3,jpeg}"
+#     - index.html
+#   precache_glob_ignores: # Optional
+#     - sw-register.js
--- a/_data/albums.yml
+++ b/_data/albums.yml
--- a/_data/colors.yml
+++ b/_data/colors.yml
@ -0,0 +1,10 @@
+bg_rgba: 'rgb(60, 42, 82)'
+bg-alt_rgba: 'rgba(60, 42, 82, 0.75)'
+fg_rgba: 'rgb(235, 219, 248)'
+fg-alt_rgba: 'rgba(235, 219, 248, 0.25)'
+border_rgba: 'rgb(0, 0, 0)'
+border-alt_rgba: 'rgba(0, 0, 0, 0.75)'
+accent1_rgba: 'rgb(56, 255, 89)'
+accent1-alt_rgba: 'rgba(56, 255, 89, 0.75)'
+accent2_rgba: 'rgba(255, 145, 0, 1)'
+accent2-alt_rgba: 'rgba(255, 145, 0, 0.75)'
--- a/_data/links.yml
+++ b/_data/links.yml
@ -1,44 +1,20 @@
- title: Good Karma Records
-  url: http://www.goodkarma.ru
+- title: Ritarn
+  url: http://ritarn.com
  banner: 
-  image: /assets/img/linkbanners/goodkarma%20copy.banner.png
- title: Villamagica Records
-  url: https://villamagica.bandcamp.com/
-  banner: 
-  image: /assets/img/linkbanners/VILLAMAGICAREBOOT99XX%20copy.banner.png
- title: Finsta
-  url: https://www.finstafari.com
-  banner: 
-  image: /assets/img/linkbanners/finsta.gif
- title: Camera X
-  url: http://www.camerax.tv/
-  banner: 
-  image: /assets/img/linkbanners/graphstyle2011_logo_small6_1.png
- title: Alex Understands
-  url: https://www.alexunderstands.com/
-  banner: 
-  image: /assets/img/linkbanners/alexunderstands.png
+  image: /images/links/ritarn.jpg
 - title: Basspistol
  url: https://basspistol.com
  banner: 
-  image: /assets/img/linkbanners/basspistol_logo3_1mini.png
+  image: /images/links/basspistol.png
 - title: Alsenet
  url: http://www.alsenet.com/
  banner: 
-  image: /assets/img/linkbanners/logo-alsenet.png
+  image: /images/links/cropped-logo_alsenet_pv-1-e1466347695561.png
 - title: Linux Audio
  url: https://www.linuxaudio.org/
  banner: 
-  image: /assets/img/linkbanners/linuxaudio.png
- title: Ubuntu Studio
-  url: http://www.ubuntustudio.org/
-  banner: 
-  image: /assets/img/linkbanners/us-logo.png
- title: Rasta Soft
-  url: https://rastasoft.org/
-  banner: 
-  image: /assets/img/linkbanners/rastalion.jpg
+  image: /images/links/Screenshot_20200908_202439.jpg
 - title: Dyne
  url: https://www.dyne.org/
  banner: 
-  image: /assets/img/linkbanners/moebius-band.png
+  image: /images/links/Screenshot_20200908_202215.jpg
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@ -1,17 +1,28 @@
- icon: fa-disc
-  url: /discography/
-  name: Discog
+- icon: "\U0001F4BD"
+  url: '/discography'
+  name: Music
  external_site: false
- icon: fa-newspaper
-  url: /log/
-  name: Log
-  external_site: false
- icon: fa-finger-print
+- icon: 🎬
+  url: 'https://v.basspistol.org/accounts/setto/video-channels'
+  name: Video
+  external_site: true
+- icon: "\U0001F4F0"
+  url: 'https://txt.basspistol.org/setto'
+  name: Blog
+  external_site: true
+- icon: 📢
+  url: 'https://s.basspistol.org/@setto'
+  name: Fedi
+  external_site: true
+- icon: ㊙️
  url: /about/
  name: About
  external_site: false
- icon: fa-link
+- name: Support
+  url: '#support'
+  icon: 🌮
+  external: false
+- icon: "\U0001F517"
  url: /links/
  name: Links
  external_site: false
-  
--- a/_data/social.yml
+++ b/_data/social.yml
@ -1,21 +1,31 @@
-
- name: Twitter
-  url: https://twitter.com/ToSettoSetto
-  icon: fa-twitter
-  share_link: 'https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&text={{ page.description | xml_escape }}%20via%20&#64;ToSettoSetto&hashtags=cybersoul'
-  we_have_account: true
- name: Instagram
-  url: https://www.instagram.com/tosettosetto/
-  icon: fa-instagram
-  share_link: 
+---
+- name: Mastodon
+  url: 'https://s.basspistol.org/@setto'
+  icon: fa-mastodon
+  share_link:
  we_have_account: true
 - name: Telegram
-  url: https://t.me/basspistol
+  url: 'https://t.me/tosettosetto'
  icon: fa-telegram
-  share_link: 'https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&text={{ page.description }}%20via%20&#64;basspistol'
+  share_link: >-
+    https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&text={{
+    page.description }}%20via%20&#64;tosettosetto
  we_have_account: true
 - name: Reddit
-  url: https://www.reddit.com/r/basspistol
+  url: 'https://www.reddit.com/r/basspistol'
  icon: fa-reddit
-  share_link: 'https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&title={{ page.title | xml_escape }}'
-  we_have_account: true
+  share_link: >-
+    https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&title={{
+    page.title | xml_escape }}
+  we_have_account: true
+- name: Peertube
+  url: 'https://v.basspistol.org/a/setto/'
+  icon: fa-youtube
+  share_link:
+  we_have_account: true
+- name: Matrix
+  url: 'https://matrix.to/#/!YQcdVviFQNGYFMYrxD:matrix.org'
+  icon: fa-connectdevelop
+  share_link:
+  we_have_account: true
+---
--- a/_data/stores.yml
+++ b/_data/stores.yml
@ -2,23 +2,31 @@
  url: https://shop.basspistol.com
  icon: fa-bandcamp
  download: true
- name: Spotify
-  url: https://open.spotify.com/artist/0gus2IdSkfrvFDBPqeiksM/
-  icon: fa-spotify
-  download: false
- name: Apple Music
-  url: https://itunes.apple.com/us/artist/%E5%BE%92-setto-%E3%82%BB%E3%83%83%E3%83%88/1447055514
-  icon: fa-apple
-  download: false
- name: Google Play
-  url: https://play.google.com/store/music/artist/%E5%BE%92_setto_%E3%82%BB%E3%83%83%E3%83%88?id=Ayi4avjpfyinbrepzebpsvpjc5a
-  icon: fa-google-play
-  download: false
- name: Deezer
-  url: https://www.deezer.com/fr/artist/56004012
+#- name: Spotify
+#  url: https://open.spotify.com/artist/0gus2IdSkfrvFDBPqeiksM/
+#  icon: fa-spotify
+#  download: false
+- name: Audius
+  url: https://audius.co/tosettosetto
  icon: fa-creative-commons-sampling
  download: false
- name: Napster
-  url: https://us.napster.com/artist/-setto-
-  icon: fa-napster
-  download: false
+#- name: Apple Music
+#  url: https://itunes.apple.com/us/artist/%E5%BE%92-setto-%E3%82%BB%E3%83%83%E3%83%88/1447055514
+#  icon: fa-apple
+#  download: false
+#- name: Google Play
+#  url: https://play.google.com/store/music/artist/%E5%BE%92_setto_%E3%82%BB%E3%83%83%E3%83%88?id=Ayi4avjpfyinbrepzebpsvpjc5a
+#  icon: fa-google-play
+#  download: false
+#- name: Deezer
+#  url: https://www.deezer.com/fr/artist/56004012
+#  icon: fa-deezer
+#  download: false
+#- name: Napster
+#  url: https://us.napster.com/artist/-setto-
+#  icon: fa-napster
+#  download: false
+- name: PeerTube
+  icon: fa-youtube
+  url: https://v.basspistol.org/accounts/setto/video-channels
+  download: false
--- a/_drafts/2020-09-17-pushing-things-differently.md
+++ b/_drafts/2020-09-17-pushing-things-differently.md
@ -0,0 +1,29 @@
+---
+title: Pushing things differently
+author: setto
+date: 2020-09-17 00:00:00
+description: >-
+  Embracing the mainstream networks and reaching out through sponsored content,
+  the underground is staging it's own isolation.
+image: /images/posts/Screenshot_20200918_112312.jpg
+video_path: /videos/37th--chamber.mp4
+category: ramblings
+link:
+  url:
+  buttontext:
+check_this_if_cannot_be_bought: true
+album:
+stores:
+  - name:
+  - url:
+  - icon:
+  - download: false
+---
+
+"I post what's on my mind, therefore I am".&nbsp; The reflex is hard to avoid. The thumb swipes the screen by muscle-memory. A tiny but well oiled ritual. A digital routine. From the finger-tops we manipulate extensions that may not be attached to our bodies, yet at this point they are intrinsic part of ourselves. We want them, we need them and they keep needing replacement every each year or so. It's not so much the devices in themselves that suck us in, but the applications. What was meant to free us and facilitate our daily bullshit turned out to be alienating masters of complications.
+
+Love/hate relationship doesn't quite cut it as a descriptor though: most of us probably realize something isn't too right with these tools, but how many can explain what, how and why? Society is slowly becoming unavailable to the disconnected: socializing, dating, creating, communicating, paying, learning… everything goes through the wireless wires. In and out of the very real data-centers made of concrete and silicon, that we call "clouds".
+
+### But in the realm of the mind there is a choice: do i want to participate?
+
+&nbsp;
--- a/_includes/_cookie-consent.html
+++ b/_includes/_cookie-consent.html
@ -1,7 +1,20 @@

 <div id="cookie-notice">
-  {{ site.data.translations[page.lang].cookies }}
-    <a class="button small yes" href="#" id="cookie-notice-accept">{{ site.data.translations[page.lang].cookie-agree }}</a>
+
+  <p>
+    I only use cookies if you consent to it, or if you give me your nickname so I can remember you next time you come by. 
+    <br />These cookies are all placed by my crew: Basspistol. No big tech involved.
+  
+    <br />Read more about <a href="/cookies/"> how {{ site.title }} use cookies</a>
+  </p>
+
+    <button class="button no" id="cookie-notice-decline">
+      Nah     
+    </button>
+    <button class="button yes" id="cookie-notice-accept">
+    Ok
+  </button>
+
 </div>

 <script>
@ -12,7 +25,7 @@
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
-    document.cookie = name + "=" + value + expires + "; path=/";
+    document.cookie = name + "=" + value + "; domain=.{{ site.publisher.domain }}" + expires + "; path=/;SameSite=Strict";
  }
  function readCookie(name) {
    var nameEQ = name + "=";
@ -27,39 +40,21 @@
  function eraseCookie(name) {
    createCookie(name, "", -1);
  }
-
  if (readCookie('cookie-notice-dismissed') == 'wantCookies') {
-    {% include analytics.js %}
+
+    {% include mautic - tracker.js %}
  } else {
    document.getElementById('cookie-notice').style.display = 'flex';
-
-    {% include matomo.js %}
-
  }
  if (readCookie('cookie-notice-dismissed') == 'dontWantCookies') {
    document.getElementById('cookie-notice').style.display = 'none';
-
-    {% include matomo.js %}
  }
  document.getElementById('cookie-notice-accept').addEventListener("click", function () {
-    createCookie('cookie-notice-dismissed', 'wantCookies', 31);
+    createCookie('cookie-notice-dismissed', 'wantCookies', 365);
    document.getElementById('cookie-notice').style.display = 'none';
-    _paq.push(['trackEvent', 'Consent', 'wantCookie']);
-    location.reload();
  });
-
  document.getElementById('cookie-notice-decline').addEventListener("click", function () {
-    createCookie('cookie-notice-dismissed', 'dontWantCookies', 31);
+    createCookie('cookie-notice-dismissed', 'dontWantCookies', 365);
    document.getElementById('cookie-notice').style.display = 'none';
-    _paq.push(['trackEvent', 'Consent', 'dontWantCookie']);
-    location.reload();
  });
-
-  // document.getElementById('cookie-notice-gimme').addEventListener("click", function () {
-  //   createCookie('cookie-notice-dismissed', 'wantCookies', 31);
-  //   document.getElementById('cookie-notice').style.display = 'none';
-  //   location.reload();
-  // });
-
-
 </script>
--- a/_includes/analytics.js
+++ b/_includes/analytics.js
@ -2,32 +2,39 @@

 //* Matomo *//

-  var _paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['setDocumentTitle',  '404/URL = ' +  encodeURIComponent(document.location.pathname+document.location.search) + '/From = ' + encodeURIComponent(document.referrer)]);
-  _paq.push(['disableCookies']);
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="https://terminalnetwork.matomo.cloud/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '11']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src='//cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-
+var _paq = window._paq = window._paq || [];
+_paq.push(['setDocumentTitle',  '404/URL = ' +  encodeURIComponent(document.location.pathname+document.location.search) + '/From = ' + encodeURIComponent(document.referrer)]);
+_paq.push(["setCookieDomain", "*.basspistol.com"]);
+_paq.push(["setDomains", ["*.basspistol.org","*.basspistol.com","*.pauvrecoude.basspistol.com","*.paxnion.basspistol.com","*.radio.basspistol.com","*.sakrecoer.basspistol.com","*.sakrecoer.com","*.sethybowoy.basspistol.com","*.setto.basspistol.com","*.tfb.basspistol.com","*.v.basspistol.org"]]);
+_paq.push(["enableCrossDomainLinking"]);
+_paq.push(['trackPageView']);
+_paq.push(['enableLinkTracking']);
+(function() {
+  var u="https://terminalnetwork.matomo.cloud/";
+  _paq.push(['setTrackerUrl', u+'matomo.php']);
+  _paq.push(['setSiteId', '{{ site.matomo_site_id }}']);
+  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+  g.type='text/javascript'; g.async=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+})();
 //* End Matomo *//

-
-
 {% else %}
-//* Matomo Tag Manager *//

-  var _mtm = _mtm || [];
-  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
+
+var _paq = window._paq = window._paq || [];
+_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+_paq.push(["setCookieDomain", "*.basspistol.com"]);
+_paq.push(["setDomains", ["*.basspistol.org","*.basspistol.com","*.pauvrecoude.basspistol.com","*.paxnion.basspistol.com","*.radio.basspistol.com","*.sakrecoer.basspistol.com","*.sakrecoer.com","*.sethybowoy.basspistol.com","*.setto.basspistol.com","*.tfb.basspistol.com","*.v.basspistol.org"]]);
+_paq.push(["enableCrossDomainLinking"]);
+_paq.push(['trackPageView']);
+_paq.push(['enableLinkTracking']);
+(function() {
+  var u="https://terminalnetwork.matomo.cloud/";
+  _paq.push(['setTrackerUrl', u+'matomo.php']);
+  _paq.push(['setSiteId', '{{ site.matomo_site_id }}']);
  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-  g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/container_kJUGWiO2.js'; s.parentNode.insertBefore(g,s);
+  g.type='text/javascript'; g.async=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+})();

-//* End Matomo Tag Manager *//
 {% endif %}

--- a/_includes/author.html
+++ b/_includes/author.html
@ -1,33 +1,34 @@
 {% assign author_id = page.author | prepend: "/authors/" | append: "/" %}
 {% assign author = site.authors | where: "url", author_id | first %}
-<header id="author">
+<div id="author">
  <div class="bio">

-  {% if page.collection == 'posts' %}
-  <div alt="Picture of {{ author.name }}"
-    style="margin-right: 10px;background-image:url({{ author.image }});background-repeat: no-repeat;background-size:cover; border-radius:150px; width:150px; height:150px;">
+    {% if page.collection == 'posts' %}
+    <div class="author-image" alt="Picture of {{ author.name }}" style="background-image:url({{ author.image }});">
+    </div>
+    <br />
+    <p><a href="mailto:{{ author.email }}" rel="me"><strong>{{ author.name }}</strong></a></p>
+    <p>{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener"
+        href="{{ author.gpg }}" rel="pgpkey authn">GPG</a>{% endif %}</p>
+    <p class="date">
+      Published the
+      <time datetime="{{ page.date }}">{% include dates.html %}</time>
+    </p>
+
+    {% endif %}
+    <h6>
+
+      Share this page:
+    </h6>
+    <ul>
+      <a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook" href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;quote={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}%20via%20{{ site.url }}" class="icon smaller fab fa-facebook-f"><span class="label">Facebook</span></a>
+      <a target="_blank" rel="nofollow noopener" title="Share to twitter" alt="Share to twitter" href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.twitter }}%20&amp;hashtags=#{{ site.social.hashtag }}" class="icon smaller fab fa-twitter"><span class="label">Twitter</span></a>
+      <a target="_blank" rel="nofollow noopener" title="Share to telegram" alt="Share to telgram" href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.telegram }}" class="icon smaller fab fa-telegram"><span class="label ">Telegram</span></a>
+      <a target="_blank" rel="nofollow noopener" title="Share to reddit" alt="Share to reddit" href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;title={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}" class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
+    </ul>
+    <br />
+    {% unless page.url == '/radio/' %}
+    <h2><a href="#support" class="button">🙏 Support</a></h2>
+    {% endunless %}
  </div>
-  <br />
-  <p style="font-style: normal;"><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
-  <p style="font-style: normal;">{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener" href="{{ author.gpg }}">GPG</a>{% endif %}</p>
-  <p style="font-size:14px;font-style: normal;">
-    Published the 
-
-{% include dates.html %}
-  </p>
-  
-  {% endif %}
-  <h6>
-
-    Share this page:  
- </h6>
-  <ul class="icons"> 
-    <li><a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook" href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&amp;quote={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}%20via%20{{ site.url }}" class="icon brands style1 fa-facebook-f"><span class="label">Facebook</span></a></li>
-    <li><a target="_blank" rel="nofollow noopener" title="Share to twitter" alt="Share to twitter" href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}%20&amp;hashtags=paxNion" class="icon brands style1 fa-twitter"><span class="label">Twitter</span></a></li>
-    <li><a target="_blank" rel="nofollow noopener" title="Share to telegram" alt="Share to telgram" href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}" class="icon brands style1 fa-telegram"><span class="label">Telegram</span></a></li>
-    <li><a target="_blank" rel="nofollow noopener" title="Share to reddit" alt="Share to reddit" href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}" class="icon brands style1 fa-reddit"><span class="label">Reddit</span></a></li>
-  </ul>
-
-
-</div>
-</header>
+</div>
--- a/_includes/contact.html
+++ b/_includes/contact.html
@ -1,42 +1,47 @@
-<!-- Contact -->
-<section id="contact" class="wrapper style1 align-center">
-  <div class="inner medium">
-    <h2 class="editable">
-      
-    </h2>
-    <form action="{{ site.baseurl }}/contact-success/" method="post">
-      <input type="hidden" name="_to" value="setto@basspistol.com" /><br />
-      <input type="text" name="_gotcha" style="display: none;" />
-      <div class="fields">
-        <div class="field half">
-          <label for="name">{{ site.data.translations[page.lang].name }}</label>
-          <input type="text" name="name" id="name" placeholder="{{ site.data.translations[page.lang].name }} {{ site.data.translations[page.lang].lastname }}" />
-        </div>
-        <div class="field half">
-          <label for="email">{{ site.data.translations[page.lang].email }}</label>
-          <input type="email" name="email" placeholder="{{ site.data.translations[page.lang].required }}" required />
-        </div>
-        <div class="field">
-          <label for="message">{{ site.data.translations[page.lang].message }}</label>
-          <textarea name="message" id="message" rows="6" placeholder="{{ site.data.translations[page.lang].write-msg }}"></textarea>
-        </div>
+<!-- BEGIN contact.html -->
+<section id="contact">
+  <div>
+    <form action="{{ relBase }}/contact-success/" method="post" class="contact-form">
+      <div>
+        <h2>Kontakta oss!</h2>
+        <input type="hidden" name="_to" value="{{ site.publisher.mail }}" /><br />
+        <input type="text" name="_gotcha" style="display: none;" />
      </div>
-      <div style="text-align: left;">
-        <input type="checkbox" name="consent" id="consent" required />
-        <label for="consent">{{ site.data.translations[page.lang].privacy }}
-        </label>
-        <br /><br />
-
-        <input type="checkbox" name="newsletter" id="newsletter" />
-        <label for="newsletter">{{ site.data.translations[page.lang].newsletter }}
+      <div class="contact-info">
+        <label for="email">Email</label>
+        <input type="email" name="email" id="email" placeholder="Email..." required class="contact" />
+        {% if page.url == '/fr-fretag/' %}
+        <label for="phone">Phone</label>
+        <input type="tel" name="telephone" id="telephone" placeholder="Telefonnumer..." required
+          class="contact" />
+        <label for="name">Name</label>
+        <input type="name" name="name" id="name" placeholder="Namn och efternamn..." required class="contact" />
+        <label for="company">Företag</label>
+        <input type="company" name="company" id="company" placeholder="Företag..." required
+          class="contact" />
+        {% endif %}
+      </div>
+      <div>
+        <label for="message">Meddelande</label><br />
+        <textarea name="message" id="message" placeholder="Skriv ditt meddelande här..." required
+          class="contact textspace"></textarea>
+      </div>
+      <br />
+      <div>
+        <input type="checkbox" name="consent" id="consent" required class="css-checkbox lrg klaus" /><label
+          for="consent" class="css-label lrg klaus">Jag godkänner <a href="/cookies/">integritets policyn</a>
        </label>
      </div>
-<br />
-      <ul class="actions special">
-        <li><input type="submit" name="submit" id="submit" value="{{ site.data.translations[page.lang].send }}" /></li>
-      </ul>
+      <br />
+      <div>
+        <input type="checkbox" name="news" id="news" class="css-checkbox lrg klaus" /><label for="news"
+          class="css-label lrg klaus">Jag vill ha nyheter</label>
+      </div>
+      <br />
+      <div>
+        <input type="submit" class="button" value="Send Message" />
+      </div>
    </form>
-
  </div>
 </section>
-<!-- END Contact -->
+<!-- END contact.html -->
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -1,32 +1,35 @@
+{% include streamer.html %}
 <!-- Footer -->
-<footer id="footer" class="wrapper style1 align-center">
-  <div class="footflex">
-    <div>
-      <h4>{{ site.title }}</h4>
-      <p>{{ site.description }}
-      <br /><a href="mailto:{{ site.publisher.email }}">{{ site.publisher.email }}</a></p>
-    </div>
+<footer>
+  <div class="footframe">
    <div>
+      <h3>{{ site.title }}</h3>
+      <p>{{ site.description }}</p>
      <ul>
        {% if page.url != '/' %}
-        <li><a href="{{ relBase }}/">{{ site.data.translations[page.lang].home }}</a></li>
+        <li><a href="{{ relBase }}/">🏡 Home</a></li>
        {% endif %}
        {% for entry in site.data.navigation %}
-        <li><a href="{{ entry.url }}">{{ entry.name }}</a></li>
+        <li><a href="{{ entry.url }}" {% if entry.external_site == true %} target="_blank" rel="noopener"
+            {% endif %}>{{ entry.icon }} {{ entry.name }}</a></li>
        {% endfor %}
      </ul>
    </div>
-    <div><img src="{{ relBase }}{{ site.logo-footer }}" style="max-width:300px" alt="{{ site.title }} Logo" /></div>
-  </div>
-  <div class="inner">
-    <ul class="icons">
-      {% for nw in site.data.social %}

-      <li><a target="_blank" alt="{{ site.title }} on {{ nw.name }}" title="{{ site.title }} on {{ nw.name }}" rel="noopener" href="{{ nw.url }}" class="icon brands style2 {{ nw.icon }}"><span class="label">{{ nw.name }}</span></a></li>
+    <div><a href="{% if page.collection == 'tracks' %}/{% else %}#main-wrapper{% endif %}"><img src="{{ relBase }}{{ site.logo-footer }}" alt="{{ site.title }} Logo" /></a></div>

-      {% endfor %}
-
-    </ul>
-    <p>&copy;{{ site.time | date: '%Y' }} {{ site.publisher.name }} | <a href="{{ relBase }}/webcreds/">Credits</a> | <a href="{{ relBase }}/cookies/">Cookies & Privacy</a></p>
+    <small>
+      <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="{% if nw.url contains 's.basspistol.org' %}me {% endif %}noopener"
+          href="{{ nw.url }}" class="icon small fab {{ nw.icon }}"><span class="label">{{ nw.name }}</span></a>
+        {% endfor %}
+        <a target="_blank" alt="email" title="email" href="mailto:{{ site.social.mail }}" class="icon small fas fa-envelope-open-text" rel="me"><span
+          class="label">Email</span></a>
+      </div>
+      <p>&copy;{{ site.time | date: '%Y' }} {{ site.publisher.name }} | <a href="{{ relBase }}/webcreds/">Credits</a> |
+        <a href="{{ relBase }}/cookies/">Cookies & Privacy</a>
+        <br />This page was last updated on {{ page.last_modified_at | date: "%A, %b %d, %Y" }}</p>
+    </small>
  </div>
 </footer>
--- a/_includes/forloop-dates.html
+++ b/_includes/forloop-dates.html
@ -0,0 +1,21 @@
+
+  {% assign d = post.date | date: "%-d"  %}
+  {% case d %}
+  {% when '1' or '21' or '31' %}{{ d }}:st
+  {% when '2' or '22' %}{{ d }}:nd
+  {% when '3' or '23' %}{{ d }}:rd
+  {% else %}{{ d }}:th
+  {% endcase %} of 
+  {% assign m = post.date | date: "%-m" %}
+  {% case m %}
+  {% when '1' %}January
+  {% when '2' %}February
+  {% when '3' %}March
+  {% when '4' %}April
+  {% when '5' %}May
+  {% when '6' %}June
+  {% when '7' %}July
+  {% when '8' %}August
+  {% when '9' %}September {% when '10' %}October {% when '11' %}November {% when '12' %}December
+  {% endcase %}
+  {{ post.date | date: "%Y" }}
--- a/_includes/header.html
+++ b/_includes/header.html
@ -0,0 +1,36 @@
+{% include relBase.html %}
+<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' %}
+      <a href="/"><img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" /></a>
+      {% else %}
+      <a href="/"><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 == 'ramblings' %}
+      <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>
+ 
+
+
+
+</header>
--- a/_includes/matomo.html
+++ b/_includes/matomo.html
@ -1,17 +0,0 @@
-<!-- Matomo -->
-<script type="text/javascript">
-  var _paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-  _paq.push(["disableCookies"]);
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="https://terminalnetwork.matomo.cloud/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '11']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src='//cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-</script>
-<!-- End Matomo Code -->
--- a/_includes/matomo.js
+++ b/_includes/matomo.js
@ -1,13 +1,45 @@
-var _paq = window._paq || [];
+{% if page.url == '/404/' %}
+
+//* Matomo *//
+
+var _paq = window._paq = window._paq || [];
 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+_paq.push(['setDocumentTitle',  '404/URL = ' +  encodeURIComponent(document.location.pathname+document.location.search) + '/From = ' + encodeURIComponent(document.referrer)]);
+_paq.push(["setCookieDomain", "*.basspistol.com"]);
+_paq.push(["setDomains", ["*.basspistol.org","*.basspistol.com","*.pauvrecoude.basspistol.com","*.paxnion.basspistol.com","*.radio.basspistol.com","*.sakrecoer.basspistol.com","*.sakrecoer.com","*.sethybowoy.basspistol.com","*.setto.basspistol.com","*.tfb.basspistol.com","*.v.basspistol.org"]]);
+_paq.push(["enableCrossDomainLinking"]);
 _paq.push(["disableCookies"]);
 _paq.push(['trackPageView']);
 _paq.push(['enableLinkTracking']);
 (function() {
  var u="https://terminalnetwork.matomo.cloud/";
  _paq.push(['setTrackerUrl', u+'matomo.php']);
-  _paq.push(['setSiteId', '11']);
+  _paq.push(['setSiteId', '{{ site.matomo_site_id }}']);
  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-  g.type='text/javascript'; g.async=true; g.defer=true; g.src='//cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+  g.type='text/javascript'; g.async=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
 })();
+//* End Matomo *//
+
+{% else %}
+
+//* Matomo *//
+
+var _paq = window._paq = window._paq || [];
+_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+_paq.push(["setCookieDomain", "*.basspistol.com"]);
+_paq.push(["setDomains", ["*.basspistol.org","*.basspistol.com","*.pauvrecoude.basspistol.com","*.paxnion.basspistol.com","*.radio.basspistol.com","*.sakrecoer.basspistol.com","*.sakrecoer.com","*.sethybowoy.basspistol.com","*.setto.basspistol.com","*.tfb.basspistol.com","*.v.basspistol.org"]]);
+_paq.push(["enableCrossDomainLinking"]);
+_paq.push(["disableCookies"]);
+_paq.push(['trackPageView']);
+_paq.push(['enableLinkTracking']);
+(function() {
+  var u="https://terminalnetwork.matomo.cloud/";
+  _paq.push(['setTrackerUrl', u+'matomo.php']);
+  _paq.push(['setSiteId', '{{ site.matomo_site_id }}']);
+  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+  g.type='text/javascript'; g.async=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+})();
+
+//* End Matomo *//
+
+{% endif %}
--- a/_includes/mautic-tracker.js
+++ b/_includes/mautic-tracker.js
@ -0,0 +1,8 @@
+
+  (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
+      w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
+      m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://pr.basspistol.com/mtc.js','mt');
+
+  mt('send', 'pageview');
+
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@ -1,28 +1,33 @@
 <!-- Navigation -->
-<div id="logo" class="logo">
-  <a href="/"><img width="100em" src="{{ site.icon }}" alt="{{ site.name }} Logo" /></a>
-  &nbsp;&nbsp;&nbsp;<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span class="icon solid fa-bars navmenu"></span></a>
-  </div>
-  
-  <div id="navbar" style="display: block;" class="modalDialog">
-    <a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu"><div id="closearea">  </div></a>
-    <nav>
-      <a href="#close" title="Close" onclick="removeBlur()" class="close-button close" style="margin: 0 auto;">X</a>
-      <ul> 
-        {% if page.url != '/' %}
-        <li><a href="{{ relBase }}/" class="button smaller">{{ site.data.translations[page.lang].home }}</a></li>
-        {% endif %}
-        {% for entry in site.data.navigation %}
-        {% if entry.external_site == false %}
-        <li><a href="{{ relBase }}{{ entry.url }}" class="button smaller">{{ entry.name }}</a></li>
-        {% else %}
-        <li><a href="{{ entry.url }}" target="_blank" rel="noopener" class="button smaller">{{ entry.name }}</a></li>
-        {% endif %}
-        {% endfor %}
+<div id="sticky" class="logo{% if page.collection == 'tracks' %} sticky{% endif %}">

-      </ul>
-    </nav>
-  </div>
+  <a id="logo" {% if page.url != '/' %}href="/"{% else %}href="#top"{% endif %}><img height="40px" src="{{ site.logo }}" alt="{{ site.title }} Logo" /></a>
+  <a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span
+      class="fas fa-bars navmenu"></span></a>
+
+</div>
+
+<div id="navbar" class="modalDialog">
+  <a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu">
+    <div id="closearea"> </div>
+  </a>
+  <nav>
+    <a href="#close" title="Close" onclick="removeBlur()" class="close-button">X</a>
+    <ul>
+      {% if page.url != '/' %}
+      <li><a href="{{ relBase }}/" onclick="removeBlur()" class="button">🏡 Home</a></li>
+      {% endif %}
+      {% for entry in site.data.navigation %}
+      {% if entry.external_site == false %}
+      <li><a href="{{ relBase }}{{ entry.url }}" onclick="removeBlur()" class="button">{{ entry.icon }} {{ entry.name }}</a></li>
+      {% else %}
+      <li><a href="{{ entry.url }}" target="_blank" rel="noopener" onclick="removeBlur()" class="button">{{ entry.icon }} {{ entry.name }}</a></li>
+      {% endif %}
+      {% endfor %}
+
+    </ul>
+  </nav>
+</div>
  
  
  <!-- End Navigation -->
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@ -1,10 +1,3 @@
 <!-- Scripts -->
 {% include relBase.html %}
-<script src="{{ relBase }}/assets/js/jquery.min.js"></script>
-<script src="{{ relBase }}/assets/js/jquery.scrollex.min.js"></script>
-<script src="{{ relBase }}/assets/js/jquery.scrolly.min.js"></script>
-<script src="{{ relBase }}/assets/js/browser.min.js"></script>
-<script src="{{ relBase }}/assets/js/breakpoints.min.js"></script>
-<script src="{{ relBase }}/assets/js/util.js"></script>
-<script src="{{ relBase }}/assets/js/main.js"></script>
-<script src="{{ relBase }}/assets/js/set.js"></script>
+<script src="{{ relBase }}/assets/js/set-20210906.js"></script>
--- a/_includes/seo.html
+++ b/_includes/seo.html
@ -1,3 +1,5 @@
+<meta charset="utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- 
 ..............................................  
 .............................................. 
@ -26,121 +28,122 @@
 {% if page.collection == 'tracks' %}
 <!-- BEGIN seo.html -->

-<title>Play {{ page.common.title }} by {{ page.common.artist }} | {{ site.title }}</title>
-<meta name="title" content="Play &quot;{{ page.common.title| strip_html }}&quot; by {{ page.common.artist }}" />
-<meta name="description" content="A track by {{ page.common.artist }} named &quot;{{ page.common.title | strip_html }}&quot; published on {{ site.title }}" />
+<title>Play {{ page.common.title | xml_escape }} by {{ page.common.artist | xml_escape }} | {{ site.title | xml_escape }}</title>
+<meta name="title" content="Play &quot;{{ page.common.title | xml_escape }}&quot; by {{ page.common.artist | xml_escape }}" />
+<meta name="description" content="A track by {{ page.common.artist | xml_escape }} named &quot;{{ page.common.title | xml_escape }}&quot; published on {{ site.title | xml_escape }}" />
 <meta name="dc.date.modified" scheme="ISO8601" content="{{ page.last_modified_at | date_to_xmlschema }}" />
 <meta name="robots" content="index" />
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
 <link rel="alternate" hreflang="x-default" href="{{ site.url }}{{ page.url }}" />
 <meta name="geo.region" content="{{ site.geo.region }}" />
 <meta name="geo.placename" content="{{ site.geo.town }}" />
 <meta name="geo.position" content="{{ site.geo.lat }};{{ site.geo.long }}" />
 <meta name="ICBM" content="{{ site.geo.lat }}, {{ site.geo.long }}" />
-<meta name="author" content="{{ site.title }}" />
+<meta name="author" content="{{ site.title | xml_escape }}" />
 <meta name="generator" content="Jekyll v4.0.0" />

 <!-- Dublin Core basic info -->

 <meta name="dcterms.Identifier" content="{{ site.url }}" />
 <meta name="dcterms.Format" content="text/html" />
-<meta name="dcterms.Relation" content="{{ site.title }}" />
-<meta name="dcterms.Publisher" content="{{ site.publisher.name }}" />
+<meta name="dcterms.Relation" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Publisher" content="{{ site.publisher.name | xml_escape }}" />
 <meta name="dcterms.Type" content="text/html" />
 <meta name="dcterms.Coverage" content="{{ site.url }}/" />
 <meta name="dcterms.Rights" content="Copyright &copy;{{ site.time | date: '%Y' }} {{ site.title }}." />
-<meta name="dcterms.Subject" content="A track by {{ page.common.artist }} named &quot;{{ page.common.title| strip_html }}&quot; published on {{ site.title }}" />
-<meta name="dcterms.Title" content="Play &quot;{{ page.common.title| strip_html }}&quot; by {{ page.common.artist }}" />
-<meta name="dcterms.Contributor" content="{{ site.title }}" />
+<meta name="dcterms.Subject" content="A track by {{ page.common.artist | xml_escape }} named &quot;{{ page.common.title | xml_escape }}&quot; published on {{ site.title | xml_escape }}" />
+<meta name="dcterms.Title" content="Play &quot;{{ page.common.title | xml_escape }}&quot; by {{ page.common.artist | xml_escape }}" />
+<meta name="dcterms.Contributor" content="{{ site.title | xml_escape }}" />
 <meta name="dcterms.Date" content="{{ page.last_modified_at | date: '%Y-%m-%d' }}" />
-<meta name="dcterms.Description" content="Listen and to a track by {{ page.common.artist | strip_html }} from the release &quot;{{ page.common.album | strip_html }}&quot; and support your remote artist!" />
+<meta name="dcterms.Description" content="Listen to a track by {{ page.common.artist | xml_escape }} from the release &quot;{{ page.common.album | xml_escape }}&quot; and support your remote artist!" />

 <!-- Facebook -->

-<meta property="og:title" content="{{ page.common.title }}" />
+<meta property="og:title" content="{{ page.common.title | xml_escape }}" />
 <meta property="og:locale" content="en" />
-<meta property="og:description" content="Listen and to a track by {{ page.common.artist | strip_html }} from the release &quot;{{ page.common.album | strip_html }}&quot; and support your remote artist!" />
+<meta property="og:description" content="Listen to a track by {{ page.common.artist | xml_escape }} from the release &quot;{{ page.common.album | xml_escape }}&quot; and support your remote artist!" />
 <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-<meta property="og:site_name" content="{{ site.title }}" />
+<meta property="og:site_name" content="{{ site.title | xml_escape }}" />
 <meta property="og:type" content="music:album:track" />
 <meta property="og:audio" content="{{ site.mediaurl }}/{{ page.slug }}.mp3" />
 <meta property="article:published_time" content="{{ page.last_modified_at | date_to_xmlschema }}" />
 <meta property="og:image" content="{{ site.mediaurl }}/{{ page.slug }}.jpeg" />
 <!-- Twitter Card -->

-<meta name="twitter:card" content="summary" />
-<meta name="twitter:title" content="{{ page.common.title }} | {{ site.title }}" />
-<meta name="twitter:description" content="Listen and to a track by {{ page.common.artist | strip_html }} from the release &quot;{{ page.common.album | strip_html }}&quot; and support your remote artist!" />
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page.common.title | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta name="twitter:description" content="Listen to a track by {{ page.common.artist | xml_escape }} from the release &quot;{{ page.common.album | xml_escape }}&quot; and support your remote artist!" />
 <meta name="twitter:image" content="{{ site.mediaurl }}/{{ page.slug }}.jpeg" />


-{% elsif page.collection == 'albums' %}
+{% elsif page.collection == 'posts' %}
+{% if page.category == 'releases' %}

+{% for album in site.albums %}
+{% if album.slug == page.album %}
 <!-- BEGIN seo.html -->
-{% capture namelist %}{% for art in page.artists %}{{ art }}{% unless forloop.last %}, {% endunless %}{% endfor %}{% endcapture %}
+{% capture namelist %}{% for art in album.artists %}{{ art }}{% unless forloop.last %}, {% endunless %}{% endfor %}{% endcapture %}
 {% capture artist %}{{ namelist }}{% endcapture %}

-<title>Play &quot;{{ page.name }}&quot; by {{ artist | uniq }} | {{ site.title }}</title>
-<meta name="title" content="Play &quot;{{ page.name | strip_html }}&quot; by {{ artist | uniq }}" />
-<meta name="description" content="A release by {{ artist | uniq }} named &quot;{{ page.name | strip_html }}&quot; published on {{ site.title }}" />
+<title>Play &quot;{{ album.name | xml_escape }}&quot; by {{ artist | xml_escape | uniq }} | {{ site.title | xml_escape }}</title>
+<meta name="title" content="Play &quot;{{ album.name | xml_escape }}&quot; by {{ artist | xml_escape | uniq }}" />
+<meta name="description" content="A release by {{ artist | xml_escape | uniq }} named &quot;{{ album.name | xml_escape }}&quot; published on {{ site.title | xml_escape }}" />
 <meta name="dc.date.modified" scheme="ISO8601" content="{{ page.last_modified_at | date_to_xmlschema }}" />
 <meta name="robots" content="index" />
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
 <link rel="alternate" hreflang="x-default" href="{{ site.url }}{{ page.url }}" />
 <meta name="geo.region" content="{{ site.geo.region }}" />
 <meta name="geo.placename" content="{{ site.geo.town }}" />
 <meta name="geo.position" content="{{ site.geo.lat }};{{ site.geo.long }}" />
 <meta name="ICBM" content="{{ site.geo.lat }}, {{ site.geo.long }}" />
-<meta name="author" content="{{ site.title }}" />
+<meta name="author" content="{{ site.title | xml_escape }}" />
 <meta name="generator" content="Jekyll v4.0.0" />

 <!-- Dublin Core basic info -->

 <meta name="dcterms.Identifier" content="{{ site.url }}" />
 <meta name="dcterms.Format" content="text/html" />
-<meta name="dcterms.Relation" content="{{ site.title }}" />
-<meta name="dcterms.Publisher" content="{{ site.publisher.name }}" />
+<meta name="dcterms.Relation" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Publisher" content="{{ site.publisher.name | xml_escape }}" />
 <meta name="dcterms.Type" content="text/html" />
 <meta name="dcterms.Coverage" content="{{ site.url }}/" />
 <meta name="dcterms.Rights" content="Copyright &copy;{{ site.time | date: '%Y' }} {{ site.title }}." />
-<meta name="dcterms.Subject" content="A release by {{ artist | uniq }} named &quot;{{ page.name | strip_html }}&quot; published on {{ site.title }}" />
-<meta name="dcterms.Title" content="Play &quot;{{ page.name | strip_html }}&quot; by {{ artist | uniq }}" />
-<meta name="dcterms.Contributor" content="{{ site.title }}" />
-<meta name="dcterms.Date" content="{{ page.last_modified_at | date: '%Y-%m-%d' }}" />
-<meta name="dcterms.Description" content="Listen and to a release by {{ artist | uniq }} named &quot;{{ page.name | strip_html }}&quot; and support your remote artist!" />
+<meta name="dcterms.Subject" content="A release by {{ artist | xml_escape | uniq }} named &quot;{{ album.name | xml_escape }}&quot; published on {{ site.title | xml_escape }}" />
+<meta name="dcterms.Title" content="Play &quot;{{ album.name | xml_escape }}&quot; by {{ artist | xml_escape | uniq }}" />
+<meta name="dcterms.Contributor" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Date" content="{{ page.date | date: '%Y-%m-%d' }}" />
+<meta name="dcterms.Description" content="Listen to a release by {{ artist | xml_escape | uniq }} named &quot;{{ album.name | xml_escape }}&quot; and support your remote artist!" />

 <!-- Facebook -->

-<meta property="og:title" content="{{ page.name }} by {{ artist | uniq }}" />
+<meta property="og:title" content="{{ album.name | xml_escape }} by {{ artist | xml_escape | uniq }}" />
 <meta property="og:locale" content="en" />
-<meta property="og:description" content="Listen and to a release by {{ artist | uniq }} named &quot;{{ page.name | strip_html }}&quot; and support your remote artist!" />
+<meta property="og:description" content="Listen to a release by {{ artist | xml_escape | uniq }} named &quot;{{ album.name | xml_escape }}&quot; and support your remote artist!" />
 <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-<meta property="og:site_name" content="{{ site.title }}" />
+<meta property="og:site_name" content="{{ site.title | xml_escape }}" />
 <meta property="og:type" content="music:album" />
-{% for track in page.tracks %}<meta property="og:audio" content="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3" />
-{% endfor %}
-<meta property="article:published_time" content="{{ page.last_modified_at | date_to_xmlschema }}" />
-<meta property="og:image" content="{{ site.mediaurl }}/{{ page.tracks[0].slug }}.jpeg" />
+{% for track in album.tracks %}<meta property="og:audio" content="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3" />{% endfor %}
+<meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />
+<meta property="og:image" content="{{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg" />
+
 <!-- Twitter Card -->

-<meta name="twitter:card" content="summary" />
-<meta name="twitter:title" content="{{ page.name }} | {{ site.title }}" />
-<meta name="twitter:description" content="Listen and to a release by {{ artist | uniq }} named &quot;{{ page.name | strip_html }}&quot; and support your remote artist!" />
-<meta name="twitter:image" content="{{ site.mediaurl }}/{{ page.tracks[0].slug }}.jpeg" />
-
-
-
-{% else %}
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ album.name | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta name="twitter:description" content="Listen to a release by {{ artist | uniq }} named &quot;{{ album.name | xml_escape }}&quot; and support your remote artist!" />
+<meta name="twitter:image" content="{{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg" />
+{% endif %}{% endfor %}
+{% elsif page.category == 'ramblings' %}
 <!-- BEGIN seo.html -->

 <title>{{ page.title }} | {{ site.title }}</title>
-<meta name="title" content="{{ page.title }} | {{ site.title }}" />
+<meta name="title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
 <meta name="description" content="{{ page.description }}" />
 <meta name="dc.date.modified" scheme="ISO8601" content="{{ page.last_modified_at | date_to_xmlschema }}" />
 <meta name="robots" content="index" />
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
 <link rel="alternate" hreflang="x-default" href="{{ site.url }}{{ page.url }}" />
 <meta name="geo.region" content="{{ site.geo.region }}" />
@ -154,50 +157,50 @@

 <meta name="dcterms.Identifier" content="{{ site.url }}" />
 <meta name="dcterms.Format" content="text/html" />
-<meta name="dcterms.Relation" content="{{ site.title }}" />
-<meta name="dcterms.Publisher" content="{{ site.publisher.name }}" />
+<meta name="dcterms.Relation" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Publisher" content="{{ site.publisher.name | xml_escape }}" />
 <meta name="dcterms.Type" content="text/html" />
 <meta name="dcterms.Coverage" content="{{ site.url }}/" />
 <meta name="dcterms.Rights" content="Copyright &copy;{{ site.time | date: '%Y' }} {{ site.title }}." />
-<meta name="dcterms.Subject" content="{{ page.description }}" />
-<meta name="dcterms.Title" content="{{ page.title }}" />
-<meta name="dcterms.Contributor" content="{{ site.title }}" />
-<meta name="dcterms.Date" content="{{ page.last_modified_at | date: '%Y-%m-%d' }}" />
-<meta name="dcterms.Description" content="{{ page.description }}" />
+<meta name="dcterms.Subject" content="{{ page.description | xml_escape }}" />
+<meta name="dcterms.Title" content="{{ page.title | xml_escape }}" />
+<meta name="dcterms.Contributor" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Date" content="{{ page.date | date: '%Y-%m-%d' }}" />
+<meta name="dcterms.Description" content="{{ page.description | xml_escape }}" />

 <!-- Facebook -->

-<meta property="og:title" content="{{ page.title }} | {{ site.title }}" />
+<meta property="og:title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
 <meta property="og:locale" content="en" />
-<meta property="og:description" content="{{ page.description }}" />
+<meta property="og:description" content="{{ page.description | xml_escape }}" />
 <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-<meta property="og:site_name" content="{{ site.title }}" />
+<meta property="og:site_name" content="{{ site.title | xml_escape }}" />
 <meta property="og:type" content="webpage" />
-<meta property="article:published_time" content="{{ page.last_modified_at | date_to_xmlschema }}" />
+<meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />
 <meta property="og:image" content="{{ site.url }}{{ page.image }}" />
 <!-- Twitter Card -->

-<meta name="twitter:card" content="summary" />
-<meta name="twitter:title" content="{{ page.name }} | {{ site.title }}" />
-<meta name="twitter:description" content="{{ page.description }}" />
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta name="twitter:description" content="{{ page.description | xml_escape }}" />
 <meta name="twitter:image" content="{{ site.url }}{{ page.image }}" />


-{% endif %}
+


 <script type='application/ld+json'>
  {
    "@context": "http://www.schema.org",
    "@type": "Organization",
-    "name": "{{ site.title }}",
-    "url": "{{ site.url }}",
+    "name": "{{ site.title | xml_escape }}",
+    "url": "{{ site.url | xml_escape }}",
    "sameAs": [
    {% for social in site.social.links %}"{{ social }}"{% unless forloop.last %},{% endunless %}{% endfor %}
    ],
-    "logo": "{{ site.url }}{{ site.banner }}",
-    "image": "{{ site.url }}{{ site.banner }}",
-    "description": "{{ site.description | strip_html }}",
+    "logo": "{{ site.url }}/siteicon.png",
+    "image": "{{ site.url }}{{ page.image }}",
+    "description": "{{ site.description | xml_escape }}",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "{{ site.geo.town }}",
@ -207,49 +210,83 @@
    }
  }
 </script>
+{% endif %}
+{% else %}
+<!-- BEGIN seo.html -->
+
+<title>{{ page.title }} | {{ site.title }}</title>
+<meta name="title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta name="description" content="{{ page.description }}" />
+<meta name="dc.date.modified" scheme="ISO8601" content="{{ page.last_modified_at | date_to_xmlschema }}" />
+<meta name="robots" content="index" />
+
+<link rel="canonical" href="{{ site.url }}{{ page.url }}" />
+<link rel="alternate" hreflang="x-default" href="{{ site.url }}{{ page.url }}" />
+<meta name="geo.region" content="{{ site.geo.region }}" />
+<meta name="geo.placename" content="{{ site.geo.town }}" />
+<meta name="geo.position" content="{{ site.geo.lat }};{{ site.geo.long }}" />
+<meta name="ICBM" content="{{ site.geo.lat }}, {{ site.geo.long }}" />
+<meta name="author" content="{{ site.title }}" />
+<meta name="generator" content="Jekyll v4.0.0" />
+
+<!-- Dublin Core basic info -->
+
+<meta name="dcterms.Identifier" content="{{ site.url }}" />
+<meta name="dcterms.Format" content="text/html" />
+<meta name="dcterms.Relation" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Publisher" content="{{ site.publisher.name | xml_escape }}" />
+<meta name="dcterms.Type" content="text/html" />
+<meta name="dcterms.Coverage" content="{{ site.url }}/" />
+<meta name="dcterms.Rights" content="Copyright &copy;{{ site.time | date: '%Y' }} {{ site.title }}." />
+<meta name="dcterms.Subject" content="{{ page.description | xml_escape }}" />
+<meta name="dcterms.Title" content="{{ page.title | xml_escape }}" />
+<meta name="dcterms.Contributor" content="{{ site.title | xml_escape }}" />
+<meta name="dcterms.Date" content="{{ page.last_modified_at | date: '%Y-%m-%d' }}" />
+<meta name="dcterms.Description" content="{{ page.description | xml_escape }}" />
+
+<!-- Facebook -->
+
+<meta property="og:title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta property="og:locale" content="en" />
+<meta property="og:description" content="{{ page.description | xml_escape }}" />
+<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
+<meta property="og:site_name" content="{{ site.title | xml_escape }}" />
+<meta property="og:type" content="webpage" />
+<meta property="article:published_time" content="{{ page.last_modified_at | date_to_xmlschema }}" />
+<meta property="og:image" content="{{ site.url }}{{ page.image }}" />
+<!-- Twitter Card -->
+
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page.title | xml_escape }} | {{ site.title | xml_escape }}" />
+<meta name="twitter:description" content="{{ page.description | xml_escape }}" />
+<meta name="twitter:image" content="{{ site.url }}{{ page.image }}" />
+
+



-{% if page.url == '/radio/' or page.url == '/' %}
 <script type='application/ld+json'>
  {
    "@context": "http://www.schema.org",
-    "@type": "RadioStation",
-    "name": "Basspistol Libre Radio",
-    "url": "{{ site.url }}/radio",
-    "logo": "{{ site.url }}{{ site.logo }}",
-    "image": "{{ site.url }}{{ site.logo }}",
-    "description": "Unexpected and Impossible Music. Live interventions and special guests. This is Libre music!",
+    "@type": "Organization",
+    "name": "{{ site.title | xml_escape }}",
+    "url": "{{ site.url | xml_escape }}",
+    "sameAs": [
+    {% for social in site.social.links %}"{{ social }}"{% unless forloop.last %},{% endunless %}{% endfor %}
+    ],
+    "logo": "{{ site.url }}/siteicon.png",
+    "image": "{{ site.url }}{{ page.image }}",
+    "description": "{{ site.description | xml_escape }}",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "{{ site.geo.town }}",
      "addressRegion": "{{ site.geo.region }}",
      "postalCode": "{{ site.geo.postalcode }}",
      "addressCountry": "{{ site.geo.country }}"
-    },
-    "geo": {
-      "@type": "GeoCoordinates",
-      "latitude": "{{ site.geo.lat }}",
-      "longitude": "{{ site.geo.long }}"
    }
  }
-  </script>
-  <script type="text/javascript">
-  function getData() {
-    $.getJSON('https://radio.basspistol.com/status-json.xsl', function(json) {
-        output = "<p>" + "<span style='font-size:14px;'>Now Playing:</span> " + "<br/>";
-        output += "<strong>" + json.icestats.source[1].title + "</strong> by <strong>" + json.icestats.source[1].artist + "</strong></p>";
-        output += "<p style='font-size:14px;'>" + json.icestats.source[0].listeners + " peers are listening in MP3 <br />";
-        output += json.icestats.source[1].listeners + " peers are listening in OGG</p>";
-        document.getElementById("radioPlaceholder").innerHTML=output;
-      });
-  }
-  setInterval(getData, 7000);
-
-  $(function() {
-      getData();
-  });
 </script>
-   {% endif %}
+{% endif %}

+<link rel="alternate" type="application/rss+xml" href="{{ site.url}}/feed.xml" title="{{ site.title }}" />
   <!-- END seo.html -->
--- a/_includes/streamer.html
+++ b/_includes/streamer.html
@ -1,176 +1,103 @@
-<section class="streambox" style="padding: 40px;">
+
 {% if page.collection == 'posts' %}
  {% if page.category == 'releases' %}
  {% if page.check_this_if_cannot_be_bought == false %}
-
-  <h3 style="text-align: center;display: block;">Buy this release</h3>
+  <section class="streambox" id="support">
+  <h2>Get this release</h2>
  <div class="streamer">
    {% for shop in page.stores %}
-    {% if shop.download == true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
-    {% endfor %}
-  </div>
-  
-  <h3 style="text-align: center;display: block;margin-top:40px;">&nbsp;</h3>
-  <div class="streamer">
-  
-    {% for shop in page.stores %}
-    {% if shop.download != true %}
-    
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 75px;margin:10px; font-size: 75px;" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="icon style2 brands {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
-    {% endif %}
-    {% endfor %}
-  </div>

+    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
+    {% endfor %}
+  </div>
+  </section>
  {% else %}
-
-  <h3 style="text-align: center;display: block;">This release can't be bought</h3>
-  <p>But you can find others here:</p>
+  <section class="streambox" id="support">
+  <h2>This release can't be obtained</h2>
+  <p>Stream, follow, like and subscribe!</p>
  <div class="streamer">
    {% for shop in site.data.stores %}
-    {% if shop.download == true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
-    {% endfor %}
-  </div>
-  <h3 style="text-align: center;display: block;">&nbsp;</h3>

-  <div class="streamer">
-    {% for shop in site.data.stores %}
-    {% if shop.download != true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
+    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
    {% endfor %}
  </div>
+  </section>
  {% endif %}
-  {% endif %}
+  {% else %}
+  {% if page.check_this_if_cannot_be_bought == false %}
+  <section class="streambox" id="support">
+    <h2>Get this release</h2>
+    <div class="streamer">
+      {% for shop in page.stores %}
+
+      <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
+      {% endfor %}
+    </div>
+  </section>
+  {% else %}
+  <section class="streambox" id="support">
+    <h2>Support {{ site.title }}</h2>
+    <p>Stream, follow, like and subscribe!</p>
+    <div class="streamer">
+    {% for shop in site.data.stores %}
  
-  {% elsif page.collection == 'tracks' %}
-
+    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+  
+    {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+  {% endif %}
+{% elsif page.collection == 'tracks' %}
+  <section class="streambox" id="support">

  {% for post in site.posts %}
  {% if post.album == page.albumSlug %}
  {% if post.check_this_if_cannot_be_bought == false %}
-  
-  <h3 style="text-align: center;display: block;">Buy this track</h3>
+
+  <h2>Get this track</h2>
  <div class="streamer">
    {% for shop in post.stores %}
-    {% if shop.download == true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
-    {% endfor %}
-  </div>
-  
-  <h3 style="text-align: center;display: block;margin-top:40px;">&nbsp;</h3>
-  <div class="streamer">
-  
-    {% for shop in post.stores %}
-    {% if shop.download != true %}
-    
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 75px;margin:10px; font-size: 75px;" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="icon style2 brands {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
-    {% endif %}
+
+    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
    {% endfor %}
  </div>
  {% else %}
-  
-  <h3 style="text-align: center;display: block;">This track can't be bought</h3>
-  <p>But you can find others here:</p>
+
+  <h2>This track can't be obtained</h2>
+  <p>Stream, follow, like and subscribe!</p>
  <div class="streamer">
    {% for shop in site.data.stores %}
-    {% if shop.download == true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
-    {% endfor %}
-  </div>
-  <h3 style="text-align: center;display: block;">&nbsp;</h3>
-  
-  <div class="streamer">
-    {% for shop in site.data.stores %}
-    {% if shop.download != true %}
-    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-    {% endif %}
+
+    <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
    {% endfor %}
  </div>
  {% break %}
-  
+
  {% endif %}
  {% endif %}
  {% endfor %}
-
-
-{% elsif page.collection == 'albums' %}
-
-
-{% for post in site.posts %}
-{% if post.album == page.slug %}
-{% if post.check_this_if_cannot_be_bought == false %}
-
-<h3 style="text-align: center;display: block;">Buy this album</h3>
-<div class="streamer">
-  {% for shop in post.stores %}
-  {% if shop.download == true %}
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-  {% endif %}
-  {% endfor %}
-</div>
-
-<h3 style="text-align: center;display: block;margin-top:40px;">&nbsp;</h3>
-<div class="streamer">
-
-  {% for shop in post.stores %}
-  {% if shop.download != true %}
-  
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 75px;margin:10px; font-size: 75px;" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="icon style2 brands {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
-  {% endif %}
-  {% endfor %}
-</div>
-{% else %}
-
-<h3 style="text-align: center;display: block;">This album can't be bought</h3>
-<p>But you can find others here:</p>
-<div class="streamer">
-  {% for shop in site.data.stores %}
-  {% if shop.download == true %}
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-  {% endif %}
-  {% endfor %}
-</div>
-<h3 style="text-align: center;display: block;">&nbsp;</h3>
-
-<div class="streamer">
-  {% for shop in site.data.stores %}
-  {% if shop.download != true %}
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-  {% endif %}
-  {% endfor %}
-</div>
-{% break %}
-
-{% endif %}
-{% endif %}
-{% endfor %}
-
-
+  </section>

 {% else %}
-<h3 style="text-align: center;display: block;">Support {{ site.name }}</h3>
-<p>Pay for music here:</p>
-<div class="streamer">
+  <section class="streambox" id="support">
+  <h2>Support {{ site.title }}</h2>
+  <p>Stream, follow, like and subscribe!</p>
+  <div class="streamer">
  {% for shop in site.data.stores %}
-  {% if shop.download == true %}
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-  {% endif %}
-  {% endfor %}
-</div>
-<h3 style="text-align: center;display: block;">&nbsp;</h3>

-<div class="streamer">
-  {% for shop in site.data.stores %}
-  {% if shop.download != true %}
-  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " "  }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" alt="Stream from {{ shop.name }}" title="Stream from {{ shop.name }}" class="button icon brands {{ shop.icon }}">{{ shop.name }}</a>
-  {% endif %}
+  <a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
+
  {% endfor %}
-</div>
+  </div>
+  </section>
 {% endif %}
-</section>
+<section class="streambox">
+  <script src="https://liberapay.com/setto/widgets/receiving.js"></script>
+    
+</section>
--- a/_includes/zafari.html
+++ b/_includes/zafari.html
@ -0,0 +1,22 @@
+<div id="zafari" class="modalDialog">
+  <div>
+<h2>Hey Safari User!</h2>
+<p>Amazing! You are surfing the web with one of the leading browsers to download another browser! Such luxury! <br />
+To listen to {{ site.title }}&apos;s music, these are your options:
+<ul>
+  <li><a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noopener" class="button">Download Firefox</a></li>
+  <li><a href="{% for store in site.data.stores %}{% if store.name == 'Spotify' %}{{ store.url }}{% endif %}{% endfor %}" target="_blank" rel="noopener" class="button">Use Spotify</a></li>
+</ul>
+<br />
+If you like browsing the web this way and you really just want to see if this {{ site.title }} thing is for real:<br />
+<ul>
+  <li>
+    <a href="#" onclick="youMadBro()" class="button">Proceed anyway</a>
+  </li>
+</ul>
+
+
+</p>
+{% include streamer.html %}
+</div>
+</div>
--- a/_layouts/404page.html
+++ b/_layouts/404page.html
@ -0,0 +1,133 @@
+---
+layout: nil
+---
+<!DOCTYPE HTML>
+<!--
+  Publikatorized by Sakrecoer
+  Free for personal and commercial use under the CCA 3.0 license
+-->
+<html lang="{{ site.lang }}">
+<head>
+{% include seo.html %}
+
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
+<link rel="stylesheet" href="/assets/css/all.min.css" />
+<link rel="stylesheet" href="/assets/css/colors-20210906.css" />
+<link rel="stylesheet" href="/assets/css/main-20210906.css" />
+<link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
+<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
+<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
+<noscript><link rel="stylesheet" href="/assets/css/noscripts-20210906.css" /></noscript>
+
+<meta name="theme-color" content="{{ site.data.colors.bg }}"/>
+
+
+
+</head>
+
+<body>
+<!-- Wrapper -->
+
+<div id="main-wrapper">
+
+
+  <header class="hero" style="background-image: url({{ 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' %}
+  
+        {% 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>
+   
+  
+  
+  
+  </header>
+  
+  <section class="info" id="read">
+    <div class="info-pages">
+      {{ content }}
+    </div>
+  </section>
+  
+<!-- Footer -->
+{% unless page.collection == 'tracks' or page.url == '/radio/' %}
+<!-- Footer -->
+<footer>
+  <div class="footframe">
+    <div>
+      <h3>{{ site.title }}</h3>
+      <p>{{ site.description }}</p>
+      <ul>
+        {% if page.url != '/' %}
+        <li><a href="/">🏡 Home</a></li>
+        {% endif %}
+        {% for entry in site.data.navigation %}
+        <li><a href="{{ entry.url }}" {% if entry.external_site == true %} target="_blank" rel="noopener"
+            {% endif %}>{{ entry.icon }} {{ entry.name }}</a></li>
+        {% endfor %}
+      </ul>
+    </div>
+
+    <div><a href="#main-wrapper"><img src="{{ site.icon }}" alt="{{ site.title }} Logo" /></a></div>
+
+    <small>
+      <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="{% if nw.url contains 'kolektiva.social' %}me {% endif %}noopener"
+          href="{{ nw.url }}" class="icon small fab {{ nw.icon }}"><span class="label">{{ nw.name }}</span></a>
+        {% endfor %}
+        <a target="_blank" alt="email" title="email" href="mailto:{{ site.social.mail }}" class="icon small fas fa-envelope-open-text" rel="me"><span
+          class="label">Email</span></a>
+      </div>
+      <p>&copy;{{ site.time | date: '%Y' }} {{ site.publisher.name }} | <a href="/webcreds/">Credits</a> |
+        <a href="/cookies/">Cookies & Privacy</a>
+        <br />This page was last updated on {{ page.last_modified_at | date: "%A, %b %d, %Y" }}</p>
+    </small>
+  </div>
+</footer>
+{% endunless %}
+
+<!-- END Footer -->
+
+
+</div>
+<!-- END Wrapper -->
+{% unless page.collection == 'tracks' %}
+{% include navigation.html %}
+{% endunless %}
+
+{% include scripts.html %}
+{% if page.video_path %}
+<div class="fullscreen-bg">
+<video data-matomo-ignore autoplay muted loop poster="{{ page.image }}" class="fullscreen-bg__video">
+  <source src="{{ page.video_path }}" type="video/mp4">
+</video>
+</div>
+{% endif %}
+</body>
+</html>
+
--- a/_layouts/album.html
+++ b/_layouts/album.html
@ -1,303 +1,3 @@
 ---
-lang: en
+layout: nil
 ---
-<!DOCTYPE HTML>
-<!--
-  Based on _Story_ by html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-  Remixed and Jekyllified by Setto
-->
-<html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}">
-<head>
-
-<link type="application/atom+xml" rel="alternate" href="{{ site.url }}/feed.xml" title="{{ site.name }}" />
-{% include seo.html %}
-{% include relBase.html %}
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" />
-<link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
-<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
-<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
-<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript>
-</head>
-<body id="body">
-<span id="top" style="display: none;"></span>
-<!-- Wrapper -->
-<div id="wrapper" class="divided">
-
-<!-- Banner -->
-<section
-  class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center"
-  style="min-height:100vh;">
-  <div class="content editable">
-    <h1 class="editable">{{ page.title }}</h1>
-    <p>by <strong>{{ page.artists }}</strong>
-      <br />{{ page.date | date: '%Y' }}
-    </p>
-    <ul class="actions stacked">
-      <li><a href="#moe" class="button small smooth-scroll">cheggit!</a></li>
-    </ul>
-  </div>
-  <div class="image">
-    <img src="{{ site.mediaurl }}/{{ page.slug }}/{{ page.tracks[0].trackSlug }}.jpeg" alt="{{ page.title }}" />
-  </div>
-</section>
-<!-- Content -->
-<section class="wrapper style1 align-center">
-  <div class="inner" style="padding-top: 40px;">
-    <div class="index align-left">
-      <!-- Author -->
-      <section style="padding-top:40px;" id="moe">
-        {% include author.html %}
-        <!-- Content -->
-        <div class="content">
-
-
-          <!-- HERE BEGINS MADNESS -->
-
-
-          <!-- Content -->
-          <div class="content">
-            <div id="mainwrap">
-              <div id="nowPlay">
-                <p class="right" id="npTitle" style="font-weight: bold;"></p>
-                <p class="left" id="npAction">Paused...</p>
-              </div>
-              <div id="audiowrap">
-                <div id="audio0">
-                  <audio id="audio1" preload="metadata" controls="controls">Your browser does not support HTML5
-                    Audio!</audio>
-                </div>{% assign onetracker = page.tracks | size %}
-                {% if onetracker > 1 %}
-                <div id="tracks">
-                  <a id="btnPrev"><span class="icon solid fa-fast-backward"></span></a>
-                  <a id="btnNext"><span class="icon solid fa-fast-forward"></span></a>
-                </div>
-                {% endif %}
-              </div>
-              <div id="plwrap">
-                <ul id="plList">
-                  {% for track in page.tracks %}
-                  <li class=""> 
-                    <div class="plItem">
-                      <div class="plNum">{{ track.common.track.no }}.</div>
-                      <div class="plTitle">{{ track.common.title }}</div>
-                      <div class="plLength">{% assign round_seconds = track.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 }}</div>
-                    </div>
-                  </li>
-                  {% endfor %}
-                </ul>
-              </div>
-            </div>
-            <div id="noJSalbum">
-
-                {% for track in page.tracks %}
-
-                  <div class="plItem">
-                    <div class="plNum">{{ track.common.track.no }}.</div>
-                    <div class="plTitle"><a href="{{ track.audio }}">{{ track.common.title }} </a></div>
-                    <div class="plLength">{% assign round_seconds = track.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 }}</div>
-                  </div>
-
-                {% endfor %}
-
-            </div>
-          </div>
-          <div class="content" style="font-family: monospace;font-size: 16px;margin-top:60px;">
-            {% for post in site.posts %}
-            {% if post.album == page.slug %}
-            {{ post.content }}
-            {% endif %}
-            {% endfor %}
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</section>
-
-
-<!-- HERE ENDS MADNESS -->
-{% include streamer.html %}
-<section class="wrapper style1 align-center">
-
-  <div class="inner">
-    <h2>Track list</h2>
-    <p>Use thses pages to share one song in particular</p>
-  </div>
-
-</section>
-
-{% for track in page.tracks %}
-
-<section
-  class="spotlight style4 orient-{% cycle 'left', 'right' %} content-align-{% cycle 'right', 'left' %} image-position-center onscroll-image-fade-in"
-  {% if forloop.index == 1 %}style="box-shadow: none;" {% endif %}>
-  <div class="content">
-    <h3>{{ track.common.title }}</h3>
-    <p>
-      {% assign round_seconds = track.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 }}
-      <br /><strong>{{ track.common.genre }}</strong>
-      <br />{{ track.common.year }}</p>
-
-    <ul class="actions stacked">
-      <li><a href="{{ relBase }}/albums/{{ track.slug }}/" class="button">Track</a></li>
-    </ul>
-  </div>
-  <div class="image">
-    <img src="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg" alt="{{ track.common.title }}" />
-  </div>
-</section>
-
-{% endfor %}
-
-
-
-<section class="wrapper style1 align-center">
-  <div class="inner">
-    <div class="index align-left">
-      <!-- Author -->
-
-      <section>
-
-        <!-- Content -->
-        <div class="content">
-          <!-- post Naviation -->
-          <div style="text-align: center;">
-            <h3>More releases</h3>
-          </div>
-          <div class="post-nav">
-            <div>
-              {% if page.previous.url and page.lang == page.previous.lang %}
-              <h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
-                  href="{{page.previous.url}}">&nbsp;{{page.previous.title}}</a></h4>
-              <p style="margin-right: 20px">{{ page.previous.description }}</p>
-              {% endif %}
-            </div>
-            <div class="post-nav-next">
-              {% if page.next.url and page.lang == page.next.lang  %}
-              <h4><a href="{{page.next.url}}">&nbsp;{{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
-                    class="fas fa-arrow-right"></i></a></h4>
-              <p style="margin-left: 20px">{{ page.next.description }}</p>
-              {% endif %}
-            </div>
-          </div>
-          <!-- End Post Navigation -->
-        </div>
-      </section>
-
-    </div>
-  </div>
-</section>
-
-
-{% include footer.html %}
-</div>
-{% include navigation.html %}
-{% include scripts.html %}
-
-
-<script type="text/javascript">
-  // html5media enables <video> and <audio> tags in all major browsers
-  // External File: http://api.html5media.info/1.1.8/html5media.min.js
-
-
-  // Add user agent as an attribute on the <html> tag...
-  // Inspiration: http://css-tricks.com/ie-10-specific-styles/
-  var b = document.documentElement;
-  b.setAttribute('data-useragent', navigator.userAgent);
-  b.setAttribute('data-platform', navigator.platform);
-
-
-  // HTML5 audio player + playlist controls...
-  // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
-  // Mythium Archive: https://archive.org/details/mythium/
-  jQuery(function ($) {
-    var supportsAudio = !!document.createElement('audio').canPlayType;
-    if (supportsAudio) {
-      var index = 0,
-        playing = false,
-        mediaPath = '',
-        extension = '',
-        tracks = [{% for track in page.tracks %}{ 
-          "track": {{ track.common.track.no }},
-          "name": "{{ track.common.title }}",
-          "length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
-          "file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
-        }{% unless forloop.last %},{% endunless %}{% endfor %}],
-        trackCount = tracks.length,
-        npAction = $('#npAction'),
-        npTitle = $('#npTitle'),
-        audio = $('#audio1').bind('play', function () {
-          playing = true;
-          npAction.text('Playing...');
-        }).bind('pause', function () {
-          playing = false;
-          npAction.text('Paused...');
-        }).bind('ended', function () {
-          npAction.text('Paused...');
-          if ((index + 1) < trackCount) {
-            index++;
-            loadTrack(index);
-            audio.play();
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }).get(0),
-        btnPrev = $('#btnPrev').click(function () {
-          if ((index - 1) > -1) {
-            index--;
-            loadTrack(index);
-            if (playing) {
-              audio.play();
-            }
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }),
-        btnNext = $('#btnNext').click(function () {
-          if ((index + 1) < trackCount) {
-            index++;
-            loadTrack(index);
-            if (playing) {
-              audio.play();
-            }
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }),
-        li = $('#plList li').click(function () {
-          var id = parseInt($(this).index());
-          if (id !== index) {
-            playTrack(id);
-          }
-        }),
-        loadTrack = function (id) {
-          $('.plSel').removeClass('plSel');
-          $('#plList li:eq(' + id + ')').addClass('plSel');
-          npTitle.text(tracks[id].name);
-          index = id;
-          audio.src = mediaPath + tracks[id].file + extension;
-          $('audio').attr("data-matomo-title", tracks[id].name);
-        },
-        playTrack = function (id) {
-          loadTrack(id);
-          audio.play();
-        };
-      extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
-      loadTrack(index);
-    }
-  });
-
-</script>
-
-{% include cookie-consent.html %}
-</body>
-</html>
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@ -1,3 +0,0 @@
---
-layout: default
---
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -2,33 +2,68 @@
 ---
 <!DOCTYPE HTML>
 <!--
-  Based on _Story_ by html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-  Remixed and Jekyllified by Setto
+  Publikatorized by Sakrecoer
+  Free for personal and commercial use under the CCA 3.0 license.                                                                                                                                                                                                      
 -->
-<html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}">
+<html lang="{{ site.lang }}">
 <head>
-
 {% include seo.html %}
 {% include relBase.html %}
-<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" />
-
+<link rel="stylesheet" href="{{ relBase }}/assets/css/all.min.css" />
+<link rel="stylesheet" href="{{ relBase }}/assets/css/colors-20210906.css" />
+<link rel="stylesheet" href="{{ relBase }}/assets/css/main-20210906.css" />
 <link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
 <link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
 <link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
-<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript>
+<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscripts-20210906.css" /></noscript>
+<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
+<meta name="theme-color" content="{{ site.data.colors.bg }}"/>
+
+
+
 </head>

-<body id="body">
-  <span id="top" style="display: none;"></span>
-  <!-- Wrapper -->
-  <div id="wrapper" class="divided">
-    {{ content }}
-  </div>
-  {% include navigation.html %}
-  {% include scripts.html %}
-  {% include cookie-consent.html %}
+<body>
+<!-- Wrapper -->
+
+<div id="main-wrapper">
+
+{{ content }}
+<!-- Footer -->
+{% unless page.collection == 'tracks' or page.url == '/radio/' %}
+{% include footer.html %}
+{% endunless %}
+
+<!-- END Footer -->
+
+
+</div>
+<!-- END Wrapper -->
+
+{% include navigation.html %}
+
+
+{% include scripts.html %}
+{% if page.video_path %}
+<div class="fullscreen-bg">
+<video data-matomo-ignore autoplay muted loop poster="{{ page.image }}" class="fullscreen-bg__video">
+  <source src="{{ page.video_path }}" type="video/mp4">
+</video>
+</div>
+{% endif %}
+<!-- Transparent footer -->
+{% if page.image %}
+<style>
+  #main-wrapper {
+    background-image: url({{ page.image }});
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center center;
+  }
+</style>
+{% endif %}
+
 </body>
-</html>
+</html>
+
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -2,42 +2,14 @@
 layout: default
 ---

-{% include relBase.html %}
-
-<!-- Banner -->
-<section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center" style="min-height:100vh;">
-
-  <div class="content">
-    <h1>{{ page.title }}</h1>
-    <p>{{ page.description }}</p>
-  </div>
-
-  <div class="image">
-    <img src="{{ page.image }}" alt="unfound page" />
-  </div>
-</section>
-<!-- Content -->
-<section class="wrapper style1 align-center">
-  <div class="inner">
-
-    <div class="index align-left">
-      <!-- Author -->
-      <section>
-        {% if page.url != '/cookies/' %}
-        {% if page.url != '/webcreds/' %}
-        {% include author.html %}
-        {% endif %}{% endif %}
-        <!-- Content -->
-        <div class="content">
-          {{ content }}
-
-        </div>
-      </section>
+{% include header.html %}
+<section class="info" id="read">
+  <div class="info-pages">
+    <div class="container">
+    {{ content }}
    </div>
  </div>
 </section>
-
-
-
-
-{% include footer.html %}
+{% if page.url == '/about/' %}
+<script src="https://pr.basspistol.com/focus/2.js" type="text/javascript" charset="utf-8" async="async"></script>
+{% endif %}
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,402 +1,412 @@
 ---
+layout: default
 ---
 {% if page.category == 'releases' %}
-<!DOCTYPE HTML>
-<!--
-  Based on _Story_ by html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-  Remixed and Jekyllified by Setto
-->
-<html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}">
-<head>

-<link type="application/atom+xml" rel="alternate" href="{{ site.url }}/feed.xml" title="{{ site.name }}" />
-{% include seo.html %}
+
 {% include relBase.html %}
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" />
-<link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
-<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
-<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
-<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript>
-</head>
-<body id="body">
-<span id="top" style="display: none;"></span>
-<!-- Wrapper -->
-<div id="wrapper" class="divided">

-<!-- Banner -->
-<section
-  class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center"
-  style="min-height:100vh;">
-  <div class="content editable">
-    <h1 class="editable">{{ page.title }}</h1>
-    <p>{{ page.description }}</p>
-    <ul class="actions stacked">
-      <li><a href="#moe" class="button small smooth-scroll">cheggit!</a></li>
-    </ul>
+<header class="hero" id="play" style="background-image: url({{ relBase }}{{ page.image }});">
+  <div class="imagecontainer">
+    <h4>{{ page.title }}</h4>
  </div>
-  <div class="image">
-    <img src="{{ relBase }}{{ page.image }}" alt="{{ page.title }}" class="editable" />
-  </div>
-</section>
-<!-- Content -->
-<section class="wrapper style1 align-center">
-  <div class="inner" style="padding-top: 40px;">
-    <div class="index align-left">
-      <!-- Author -->
-      <section style="padding-top:40px;" id="moe">
-        {% include author.html %}
-        <!-- Content -->
-        <div class="content">
+  <div class="album-player">

+      
+ 
+    <div class="description">
+  

-          <!-- HERE BEGINS MADNESS -->
-          {% for album in site.albums %}
-          {% if page.album == album.slug %}
-          <!-- Content -->
-          <div class="content">
-            <div id="mainwrap">
-              <div id="nowPlay">
-                <p class="right" id="npTitle" style="font-weight: bold;"></p>
-                <p class="left" id="npAction">Paused...</p>
-              </div>
-              <div id="audiowrap">
-                <div id="audio0">
-                  <audio id="audio1" preload="metadata" controls="controls">Your browser does not support HTML5
-                    Audio!</audio>
-                </div>{% assign onetracker = album.tracks | size %}
-                {% if onetracker > 1 %}
-                <div id="tracks">
-                  <a id="btnPrev"><span class="icon solid fa-fast-backward"></span></a>
-                  <a id="btnNext"><span class="icon solid fa-fast-forward"></span></a>
+      
+      {% for album in site.albums %}
+      {% if page.album == album.slug %}
+      {% assign onetracker = album.tracks | size %}
+      <div class="player-wrap">
+        <h1 class="shadow">{{ page.title }}</h1>
+        <p class="shadow">{{ page.description }}</p>
+        <div id="plwrap">
+          <h4>&nbsp;</h4>
+          <h4>Track list</h4>
+          <ul id="plList">
+            {% for track in album.tracks %}
+            <li class="" {% if onetracker == 1 %}style="border-radius: 5px;"{% endif %}>
+              <div class="plItem">
+                <div class="plNum">{{ track.common.track.no }}.</div>
+                <div class="plTitle">{{ track.common.title }}</div>
+                <div class="plLength">
+                  {% assign round_seconds = track.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 }}
                </div>
-                {% endif %}
              </div>
-              <div id="plwrap">
-                <ul id="plList">
-                  {% for track in album.tracks %}
-                  <li class=""> 
-                    <div class="plItem">
-                      <div class="plNum">{{ track.common.track.no }}.</div>
-                      <div class="plTitle">{{ track.common.title }}</div>
-                      <div class="plLength">{% assign round_seconds = track.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 }}</div>
-                    </div>
-                  </li>
-                  {% endfor %}
-                </ul>
-              </div>
-            </div>
-            <div id="noJSalbum">
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      <div class="noJSalbum">
+        <div class="coverartwrapper">
+          <div class="coverartwrapped" style="background-image: url({{ page.image }});"></div>
+        </div>
+        {% for track in album.tracks %}

-                {% for track in album.tracks %}
-
-                  <div class="plItem">
-                    <div class="plNum">{{ track.common.track.no }}.</div>
-                    <div class="plTitle"><a href="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3">{{ track.common.title }} </a></div>
-                    <div class="plLength">{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}</div>
-                  </div>
-
-                {% endfor %}
-
-            </div>
-          </div>
-          <div class="content editable" style="font-family: monospace;font-size: 16px;margin-top:60px;">
-            {{ content }}
+        <div class="plItem">
+          <div class="plNum">{{ track.common.track.no }}.</div>
+          <div class="plTitle"><a href="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3" target="_blank"
+            rel="noopener">{{ track.common.title }} </a></div>
+          <div class="plLength">
+            {% assign round_seconds = track.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 }}
          </div>
        </div>
-      </section>
+        {% endfor %}
+      </div>
+      {% endif %}{% endfor %}
    </div>
+    {% for album in site.albums %}
+      {% if page.album == album.slug %}
+      <div class="coverart" style="text-align: center;">
+        <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">
+          <div class="bio">
+            <p class="date">
+              Published the
+              <time datetime="{{ page.date }}">{% include dates.html %}</time>
+            </p>
+            {% if page.download_form_id %}<script type="text/javascript" src="https://pr.basspistol.com/form/generate.js?id={{ page.download_form_id }}"></script>{% endif %}
+            <h6>
+              Share this release:
+            </h6>
+            <ul>
+              <a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook" href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;quote={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}%20via%20{{ site.url }}" class="icon smaller fab fa-facebook-f"><span class="label">Facebook</span></a>
+              <a target="_blank" rel="nofollow noopener" title="Share to twitter" alt="Share to twitter" href="https://twitter.com/share?url={{ site.url }}{{ page.url | xml_escape }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.twitter }}%20&amp;hashtags=#{{ site.social.hashtag }}" class="icon smaller fab fa-twitter"><span class="label">Twitter</span></a>
+              <a target="_blank" rel="nofollow noopener" title="Share to telegram" alt="Share to telgram" href="https://telegram.me/share/url?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;text={{ page.description | xml_escape }}%20via%20&#64;{{ site.social.usernames.telegram }}" class="icon smaller fab fa-telegram"><span class="label ">Telegram</span></a>
+              <a target="_blank" rel="nofollow noopener" title="Share to reddit" alt="Share to reddit" href="https://reddit.com/submit/?url={{ site.url }}{{ page.url }}&quest;pk_campaign=homeshare&amp;title={{ page.description | xml_escape }}%20By%20{{ site.title | xml_escape }}" class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
+            </ul>
+          </div>
+        </div>
+      </div>
+{% endif %}{% endfor %}
+  </div>
+</header>
+
+
+
+<script type="text/javascript">
+
+  function generateRandomPosts() {
+    $.getJSON("/posts.json", function (data) {
+      console.log("[posts.json loaded for random posts]");
+      var postsCount = data.length;
+      var posts = data;
+      var randomIndexUsed = [];
+      var counter = 0;
+      var numberOfPosts = 1;
+      var divRandomPosts = $("#random_posts");
+      while (counter < numberOfPosts) {
+        var randomIndex = Math.floor(Math.random() * postsCount);
+        if (randomIndexUsed.indexOf(randomIndex) == "-1") {
+          var postHREF = posts[randomIndex].href;
+          var postTitle = posts[randomIndex].title;
+          if (counter == (numberOfPosts - 1)) {
+            divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+          }
+          else {
+            divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+          }
+          randomIndexUsed.push(randomIndex);
+          counter++;
+        }
+      }
+    });
+  }
+
+  $(document).ready(function () {
+    generateRandomPosts();
+  });
+
+</script>
+
+<!-- HERE BEGINS MADNESS -->
+
+{% for album in site.albums %}
+{% if page.album == album.slug %}
+
+<section class="info">
+  <div class="container">
+  {{ content }}
+  {% if page.link.url %}
+  <p class="center">
+
+    <a href="{{ page.link.url }}?ref=TheMusicSyndicateWashere" target="_bank" rel="noopener" class="button">{% if page.link.buttontext %}{{ page.link.buttontext }}{% else %}👀 check it out{% endif %}</a>
+
+  </p>
+  {% endif %}
  </div>
 </section>
+<div id="fixedPlayer" class="showplayer hideplayer">
+  <div id="audiowrap">

-{% include streamer.html %}
-<!-- Tracks -->
+    <div id="audio0">
+      <audio id="audio1" preload="metadata" controls="controls">
+        Your browser does not support HTML5 Audio!
+      </audio>
+    </div>
+
+  </div>
+  <div id="nowPlay">
+
+    {% if onetracker > 1 %}
+    <div id="tracks">
+      <a id="btnPrev"><span class="fas fa-fast-backward"></span></a>
+      <a id="btnNext"><span class="fas fa-fast-forward"></span></a>
+    </div>
+    {% endif %}
+    <p class="right" id="npTitle" style="font-weight: bold;"></p>
+
+    <p id="npTitle" style="font-weight: bold;"></p>
+    <div id="random_posts" style="margin-right: 40px;"></div>
+  </div>
+    
+</div>
+
+{% if onetracker > 1 %}
+  <!-- Tracks -->
 {% for track in album.tracks %}

-<section
-  class="spotlight style4 orient-{% cycle 'left', 'right' %} content-align-left image-position-center onscroll-image-fade-in"
-  {% if forloop.index == 1 %}style="box-shadow: none;" {% endif %}>
-  <div class="content">
-    <h3>{{ track.common.title }}</h3>
-    <p>
-      {% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}
-      <br /><strong>{{ track.common.genre }}</strong>
-      <br />{{ track.common.year }}</p>
-
-    <ul class="actions stacked">
-      <li><a href="{{ relBase }}/albums/{{ track.slug }}/" class="button">Track</a></li>
-    </ul>
+<section class="track-picker">
+  <div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
  </div>
-  <div class="image">
-    <img src="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg" alt="{{ track.common.title }}" />
+  <div>
+    <h2>{{ track.common.title }}</h2>
+    <p>
+      {% assign round_seconds = track.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>{{ track.common.genre }}</strong></p>
+      <p>{{ track.common.year }}</p>
+    <p><a href="{{ relBase }}/{{ track.slug }}/" class="button">🔊 Play</a></p>
+    {% if track.all.UNSYNCEDLYRICS and track.all.USLT %}
+
+      <p>
+        {{ track.all.USLT.text | newline_to_br }}
+      </p>
+
+    {% elsif track.all.USLT and track.all.UNSYNCEDLYRICS == nil %}
+
+      <p>
+        {{ track.all.USLT.text | newline_to_br }}
+      </p>
+
+    {% elsif track.all.UNSYNCEDLYRICS and track.all.USLT == nil %}
+
+      <p>
+        {{ track.all.UNSYNCEDLYRICS | newline_to_br }}
+      </p>
+
+    {% elsif track.all.lyrics %}
+
+      <p>
+        {{ track.all.lyrics | newline_to_br }}
+      </p>
+
+    {% endif %}
  </div>
 </section>

 {% endfor %}

-<!-- END Tracks -->
+  <!-- END Tracks -->
+{% endif %}

-{% break %} {% endif %} {% endfor %}
-<!-- HERE ENDS MADNESS -->
-
-
-<section class="wrapper style1 align-center">
-  <div class="inner">
-    <div class="index align-left">
-      <!-- Author -->
-
-      <section>
-
-        <!-- Content -->
-        <div class="content">
-          <!-- post Naviation -->
-          <div style="text-align: center;">
-            <h3>{{ site.data.translations[page.lang].post-nav}}</h3>
-          </div>
-          <div class="post-nav">
-            <div>
-              {% if page.previous.url and page.lang == page.previous.lang %}
-              <h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
-                  href="{{page.previous.url}}">&nbsp;{{page.previous.title}}</a></h4>
-              <p style="margin-right: 20px">{{ page.previous.description }}</p>
-              {% endif %}
-            </div>
-            <div class="post-nav-next">
-              {% if page.next.url and page.lang == page.next.lang  %}
-              <h4><a href="{{page.next.url}}">&nbsp;{{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
-                    class="fas fa-arrow-right"></i></a></h4>
-              <p style="margin-left: 20px">{{ page.next.description }}</p>
-              {% endif %}
-            </div>
-          </div>
-          <!-- End Post Navigation -->
-        </div>
-      </section>
+  {% break %} {% endif %} {% endfor %}
+  <!-- HERE ENDS MADNESS -->

+<!-- post Naviation -->
+<section class="post-navigation">
+  {% if page.previous.url or page.next.url %}
+  <div class="container">
+    <div class="post-nav">
+      {% if page.previous.url %}
+      <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}"
+        title="Read {{ page.previous.title }}"><span class="fas fa-arrow-left"
+        style="font-size:3em;text-decoration: none;"></span></a></h4>
+      <h3>{{ page.previous.title }}</h3>
+      <p>{{ page.previous.description }}</p>
+      {% endif %}
+    </div>
+    <div class="post-nav-next">
+      {% if page.next.url%}
+      <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
+      <h3>{{ page.next.title }}</h3>
+      <p>{{ page.next.description }}</p>
+      {% endif %}
    </div>
  </div>
+  {% endif %}
 </section>
+<!-- End Post Navigation -->


-{% include footer.html %}
-</div>
-{% include navigation.html %}
-{% include scripts.html %}
+  <script type="text/javascript">
+    // html5media enables <video> and <audio> tags in all major browsers
+    // External File: http://api.html5media.info/1.1.8/html5media.min.js


-<script type="text/javascript">
-  // html5media enables <video> and <audio> tags in all major browsers
-  // External File: http://api.html5media.info/1.1.8/html5media.min.js
+    // Add user agent as an attribute on the <html> tag...
+    // Inspiration: http://css-tricks.com/ie-10-specific-styles/
+    // var b = document.documentElement;
+    // b.setAttribute('data-useragent', navigator.userAgent);
+    // b.setAttribute('data-platform', navigator.platform);


-  // Add user agent as an attribute on the <html> tag...
-  // Inspiration: http://css-tricks.com/ie-10-specific-styles/
-  var b = document.documentElement;
-  b.setAttribute('data-useragent', navigator.userAgent);
-  b.setAttribute('data-platform', navigator.platform);
+    // HTML5 audio player + playlist controls...
+    // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
+    // Mythium Archive: https://archive.org/details/mythium/
+    jQuery(function ($) {
+      var supportsAudio = !!document.createElement('audio').canPlayType;
+      if (supportsAudio) {
+        var index = 0,
+          playing = false,
+          mediaPath = '',
+          extension = '',
+          tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{ 
+            "track": {{ track.common.track.no }},
+            "name": "{{ track.common.title }}",
+            "length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
+            "file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}",
+            "image": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
+          }{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
+          trackCount = tracks.length,
+          npAction = $('#npAction'),
+          npTitle = $('#npTitle'),
+          npImage = $('#npImage'),
+          audio = $('#audio1').bind('play', function () {
+            playing = true;
+            npAction.text('Playing...');
+            $('#fixedPlayer').removeClass('hideplayer');
+            $("#npImage").addClass('spinnit');
+          }).bind('pause', function () {
+            playing = false;
+            npAction.text('Paused...');
+            
+            $("#npImage").removeClass('spinnit');
+          }).bind('ended', function () {
+            npAction.text('Paused...');
+            if ((index + 1) < trackCount) {
+              index++;
+              loadTrack(index);
+              playTrack(index);
+              audio.play();
+            } else {
+              audio.pause();
+              index = 0;
+              loadTrack(index);
+            }
+          }).get(0),
+          btnPrev = $('#btnPrev').click(function () {
+            if ((index - 1) > -1) {
+              index--;
+              loadTrack(index);
+              playTrack(index);
+              if (playing) {
+                audio.play();
+              }
+            } else {
+              audio.pause();
+              index = 0;
+              loadTrack(index);
+            }
+          }),
+          btnNext = $('#btnNext').click(function () {
+            if ((index + 1) < trackCount) {
+              index++;
+              loadTrack(index);
+              playTrack(index);
+              if (playing) {
+                audio.play();
+              }
+            } else {
+              audio.pause();
+              index = 0;
+              loadTrack(index);
+            }
+          }),
+          li = $('#plList li').click(function () {
+            var id = parseInt($(this).index());
+            if (id !== index || playing == false) {
+              playTrack(id);
+            }else {
+              audio.pause();
+            }
+            
+          }),
+          loadTrack = function (id) {

+            npTitle.text(tracks[id].name);
+            index = id;
+            audio.src = mediaPath + tracks[id].file + extension;
+            $('audio').attr("data-matomo-title", tracks[id].name);
+            $("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');

-  // HTML5 audio player + playlist controls...
-  // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
-  // Mythium Archive: https://archive.org/details/mythium/
-  jQuery(function ($) {
-    var supportsAudio = !!document.createElement('audio').canPlayType;
-    if (supportsAudio) {
-      var index = 0,
-        playing = false,
-        mediaPath = '',
-        extension = '',
-        tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{ 
-          "track": {{ track.common.track.no }},
-          "name": "{{ track.common.title }}",
-          "length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
-          "file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
-        }{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
-        trackCount = tracks.length,
-        npAction = $('#npAction'),
-        npTitle = $('#npTitle'),
-        audio = $('#audio1').bind('play', function () {
-          playing = true;
-          npAction.text('Playing...');
-        }).bind('pause', function () {
-          playing = false;
-          npAction.text('Paused...');
-        }).bind('ended', function () {
-          npAction.text('Paused...');
-          if ((index + 1) < trackCount) {
-            index++;
-            loadTrack(index);
+            
+  
+          },
+          playTrack = function (id) {
+            $('.plSel').removeClass('plSel');
+            $('#plList li:eq(' + id + ')').addClass('plSel');
+            loadTrack(id);
            audio.play();
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }).get(0),
-        btnPrev = $('#btnPrev').click(function () {
-          if ((index - 1) > -1) {
-            index--;
-            loadTrack(index);
-            if (playing) {
-              audio.play();
-            }
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }),
-        btnNext = $('#btnNext').click(function () {
-          if ((index + 1) < trackCount) {
-            index++;
-            loadTrack(index);
-            if (playing) {
-              audio.play();
-            }
-          } else {
-            audio.pause();
-            index = 0;
-            loadTrack(index);
-          }
-        }),
-        li = $('#plList li').click(function () {
-          var id = parseInt($(this).index());
-          if (id !== index) {
-            playTrack(id);
-          }
-        }),
-        loadTrack = function (id) {
-          $('.plSel').removeClass('plSel');
-          $('#plList li:eq(' + id + ')').addClass('plSel');
-          npTitle.text(tracks[id].name);
-          index = id;
-          audio.src = mediaPath + tracks[id].file + extension;
-          $('audio').attr("data-matomo-title", tracks[id].name);
-        },
-        playTrack = function (id) {
-          loadTrack(id);
-          audio.play();
-        };
-      extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
-      loadTrack(index);
-    }
-  });

-</script>
+          };
+        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
+        loadTrack(index);
+      }
+    });
+
+  </script>
+

-{% include cookie-consent.html %}
-</body>
-</html>
 {% else %}
-
-<!DOCTYPE HTML>
-<!--
-  Based on _Story_ by html5up.net | @ajlkn
-  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-  Remixed and Jekyllified by Setto
-->
-<html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}">
-<head>
-
-<link type="application/atom+xml" rel="alternate" href="{{ site.url }}/feed.xml" title="{{ site.name }}" />
-{% include seo.html %}
-{% include relBase.html %}
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
-<link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" />
-
-<link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
-<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
-<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
-<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript>
-</head>
-
-<body id="body">
-  <span id="top" style="display: none;"></span>
-  <!-- Wrapper -->
-  <div id="wrapper" class="divided">
-
-<!-- Banner -->
-<section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center" style="min-height:85vh;">
-
-  <div class="content">
-    <h1>{{ page.title }}</h1>
-    <p>{{ page.description }}</p>
-  </div>
-
-  <div class="image">
-    <img src="{{ page.image }}" alt="unfound page" />
-  </div>
-</section>
-<!-- Content -->
-<section class="wrapper style1 align-center">
-  <div class="inner">
-
-    <div class="index align-left">
-      <!-- Author -->
-      <section>
-        {% if page.url != '/cookies/' %}
-        {% if page.url != '/webcreds/' %}
-        {% include author.html %}
-        {% endif %}{% endif %}
-        <!-- Content -->
-        <div class="content editable">
-          {{ content }}
-          {% if page.link != nil %}
-          <ul class="actions stacked">
-            <li><a href="{{ page.link }}?ref=SakrecoerSentMe" target="_blank" rel="noopener" class="button small">cheggit!</a></li>
-          </ul>
-          {% endif %}
-        </div>
-      </section>
+  {% include header.html %}
+  
+  <section class="info" id="read">
+  
+    <div class="info-pages">
+      <div class="container">
+      {{ content }}
+      </div>
+      {% if page.link.url %}
+      <p class="center">
+        <a href="{{ page.link.url }}?ref=ToSettoSettoSentMeHere" target="_bank" rel="noopener" class="button">{% if page.link.buttontext %}{{ page.link.buttontext }}{% else %}👀 check it out{% endif %}</a>
+      </p>
+      {% endif %}
+      {% include author.html %}
    </div>
+  </section>
+
+
+
+<!-- post Naviation -->
+<section class="post-navigation">
+  {% if page.previous.url or page.next.url %}
+  <div class="container">
+  <div class="post-nav">
+    {% if page.previous.url %}
+    <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}" title="Read {{ page.previous.title }}"><span
+      class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
+    <h3>{{ page.previous.title }}</h3>
+    <p>{{ page.previous.description }}</p>
+    {% endif %}
  </div>
-</section>
-<section class="wrapper style1 align-center">
-  <div class="inner">
-    <div class="index align-left">
-      <!-- Author -->
-
-      <section>
-
-        <!-- Content -->
-        <div class="content">
-          <!-- post Naviation -->
-          <div style="text-align: center;">
-            <h3>{{ site.data.translations[page.lang].post-nav}}</h3>
-          </div>
-          <div class="post-nav">
-            <div>
-              {% if page.previous.url and page.lang == page.previous.lang %}
-              <h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
-                  href="{{page.previous.url}}">&nbsp;{{page.previous.title}}</a></h4>
-              <p style="margin-right: 20px">{{ page.previous.description }}</p>
-              {% endif %}
-            </div>
-            <div class="post-nav-next">
-              {% if page.next.url and page.lang == page.next.lang  %}
-              <h4><a href="{{page.next.url}}">&nbsp;{{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
-                    class="fas fa-arrow-right"></i></a></h4>
-              <p style="margin-left: 20px">{{ page.next.description }}</p>
-              {% endif %}
-            </div>
-          </div>
-          <!-- End Post Navigation -->
-        </div>
-      </section>
-
-    </div>
+  <div class="post-nav-next">
+    {% if page.next.url%}
+    <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
+    <h3>{{ page.next.title }}</h3>
+    <p>{{ page.next.description }}</p>
+    {% endif %}
  </div>
-</section>
-
-{% include footer.html %}
-
 </div>
-{% include navigation.html %}
-{% include scripts.html %}
-{% include cookie-consent.html %}
-</body>
-</html>
+{% endif %}
+</section>
 {% endif %}
--- a/_layouts/track.html
+++ b/_layouts/track.html
@ -4,104 +4,169 @@ layout: default

 {% include relBase.html %}
 <!-- Banner -->
-<section
-  class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-center image-position-center" style="background-image:url('{{ site.mediaurl }}/{{ page.slug }}.jpeg');background-size: cover; background-repeat: no-repeat;">
-  <div style="z-index:0;position:absolute; top:0; left:0; width:100%;min-height:100%;background-color: rgba(13, 13 ,13, 0.5);"></div>
-  <div class="content" style="z-index:1">
-    <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>
+{% for album in site.albums %}
+{% if album.slug == page.albumSlug %}
+{% assign onetracker = album.tracks | size %}
+{% endif %}
+{% endfor %}
+<script type="text/javascript">

-    <p><strong><span id="tracktime"></span></strong><span id="{{ page.common.title | slugify | remove: '-'  }}"></span></strong></p> 
-        
-    
-      <script type="text/javascript">
-        var {{ page.common.title | slugify | remove: '-'  }}timestamp = {{ page.format.duration | round }};
-        var {{ page.common.title | slugify | remove: '-'  }}hours = Math.floor({{ page.common.title | slugify | remove: '-'  }}timestamp / 60 / 60);
-        var {{ page.common.title | slugify | remove: '-'  }}minutes = Math.floor({{ page.common.title | slugify | remove: '-'  }}timestamp / 60) - ({{ page.common.title | slugify | remove: '-' }}hours * 60);
-        var {{ page.common.title | slugify | remove: '-'  }}seconds = {{ page.common.title | slugify | remove: '-' }}timestamp % 60;
-        var {{ page.common.title | slugify | remove: '-'  }}formatted = {{ page.common.title | slugify | remove: '-' }}hours.toString().padStart(2, '0') + ':' + {{ page.common.title | slugify | remove: '-' }}minutes.toString().padStart(2, '0') + ':' + {{ page.common.title | slugify | remove: '-' }}seconds.toString().padStart(2, '0');
-        var theSpan = document.getElementById("{{ page.common.title | slugify | remove: '-'  }}");
-        theSpan.innerHTML = {{ page.common.title | slugify | remove: '-' }}formatted;
-      </script>
+  function generateRandomPosts() {
+    $.getJSON("/posts.json", function (data) {
+      console.log("[posts.json loaded for random posts]");
+      var postsCount = data.length;
+      var posts = data;
+      var randomIndexUsed = [];
+      var counter = 0;
+      var numberOfPosts = 1;
+      var divRandomPosts = $("#random_posts");
+      while (counter < numberOfPosts) {
+        var randomIndex = Math.floor(Math.random() * postsCount);
+        if (randomIndexUsed.indexOf(randomIndex) == "-1") {
+          var postHREF = posts[randomIndex].href;
+          var postTitle = posts[randomIndex].title;

- 
-    <ul class="actions stacked">
-      <li><button id="mu_pause" class="button icon solid fa-play">Play dat!</button></li>
-    </ul>
+          if (counter == (numberOfPosts - 1)) {
+            divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+          }
+          else {
+            divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+          }
+          randomIndexUsed.push(randomIndex);
+          counter++;
+        }
+      }
+    });
+  }
+
+  $(document).ready(function () {
+    generateRandomPosts();
+  });
+
+</script>
+
+<div id="trackArt">
+<section>
+  <div class="coverartwrapper">
+    <div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
+  </div>
+  <div class="playbutton hideWhenNoJS">
+  <a id="mu_pause" class="button">🔊 Play!</a>
  </div>

-  <div class="image">
-    <img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" />
-  </div>
 </section>
+</div>
+<!-- Content -->
+<div id="trackInfo">
+
+<section>
+  <h1 style="margin-top:80px;">{{ page.common.title }}</h1>
+  <p>{% for style in page.common.genre %}{{ style }}{% endfor %} by <strong>{{ page.common.artist }}</strong></p>
+  {% for post in site.posts %}
+  {% if post.album == page.albumSlug %}
+  <p>From the {{ page.common.year }} {% if onetracker > 1 %}release{% else %}single{% endif %} <a href="{{ relBase }}{{ post.url }}">&quot;{{ page.common.album }}&quot;</a></p>
+  {% endif %}
+  {% endfor %}
+
+  <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 %}
+
+
+
+      
+  <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 -->
-<section class="wrapper style1 align-center">
-  <div class="inner" style="padding-top:40px">
-    <div class="index align-left">
-      <section style="padding-top:40px">
-        {% include author.html %}
-        <!-- Content -->
-        {% if page.all.UNSYNCEDLYRICS != nil %}
-        <div class="content">
-          {% unless page.all.UNSYNCEDLYRICS == '' %}<h2>Lyrics</h2>{% endunless %}
-          <p style="font-family: monospace;font-size:16px;">
-            {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
-          </p>
-          <p>
-            {{ page.all.Comment }}
-          </p>
-        </div>
-        {% endif %}
-      </section>
-    </div>
+
+  {% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
  </div>
+  {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
+  <div class="info">
+    <p>
+      {{ page.all.USLT.text | newline_to_br }}
+    </p>
+  </div>
+  {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
+  <div class="info">
+    <p>
+      {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
+    </p>
+  </div>
+  {% endif %}
+  <p>
+    {{ page.all.Comment }}
+  </p>
+
 </section>

-{% include streamer.html %}
-<!-- Page navigation -->
-<section class="wrapper style1 align-center">
-  <div class="inner">
-    <div class="index align-left">
-      <!-- Author -->
-
-      <section>
-        <!-- Content -->
-        <div class="content">
-          <!-- post Naviation -->
-          <div style="text-align: center;">
-            <h3>Play more songs grom this release</h3>
-          </div>
-          <div class="post-nav">
-            <div>
-              {% if page.previous.url and page.lang == page.previous.lang %}
-              <h4><a href="{{ relBase }}/albums/{{ page.previousTrack.slug }}/" alt="Read {{ page.previousTrack.common.title }}" title="Read {{ page.previousTrack.common.title }}"><i class="fas fa-arrow-left"></i></a> <a
-                  href="{{ relBase }}/albums/{{ page.previousTrack.slug }}/">&nbsp;{{ page.previousTrack.common.title }}</a>
-              </h4>
-              {% endif %}
-            </div>
-            <div class="post-nav-next">
-              {% if page.next.url and page.lang == page.next.lang  %}
-              <h4><a href="{{ relBase }}/albums/{{ page.nextTrack.slug }}/">&nbsp;{{ page.nextTrack.common.title }}</a> <a
-                  href="{{ relBase }}/albums/{{ page.nextTrack.slug }}/" alt="Read {{ page.nextTrack.common.title }}" title="Read {{ page.nextTrack.common.title }}"><i class="fas fa-arrow-right"></i></a></h4>
-              {% endif %}
-            </div>
-          </div>
-          <!-- End Post Navigation -->
-        </div>
-      </section>
-    </div>
+<!-- post Naviation -->
+<section class="post-navigation">
+  {% if page.previous.url or page.next.url %}
+  <div class="post-nav">
+    {% if page.previous.url %}
+    <h4><a href="{{ relBase }}{{ page.previous.url }}" alt="Read {{ page.previous.title }}" title="Read {{ page.previous.title }}"><span
+          class="fas fa-arrow-left" style="font-size:3em;text-decoration: none;"></span></a></h4>
+    <h3>{{ page.previous.common.title }}</h3>
+    <p>{{ page.previous.description }}</p>
+    {% endif %}
  </div>
+  <div class="post-nav-next">
+    {% if page.next.url%}
+    <h4><a href="{{ page.next.url }}"><span class="fas fa-arrow-right" style="font-size:3em;"></span></a></h4>
+    <h3>{{ page.next.common.title }}</h3>
+    <p>{{ page.next.description }}</p>
+    {% endif %}
+  </div>
+{% endif %}
 </section>
+{% include footer.html %}
+<!-- End Post Navigation -->
+</div>

 <!-- Audio player-->
-<audio autoplay preload="metadata" data-matomo-title="{{ page.common.title }}">
-  <source src="{{ site.mediaurl }}/{{ page.slug }}.mp3" type="audio/mpeg" ontimeupdate='updateTrackTime(this);' />
-  <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
-</audio>
-{% include footer.html %}
+
+
+
+<div id="fixedPlayer" class="showplayer hideplayer">
+  <div id="audiowrap">
+
+    <div id="audio0">
+      <audio controls autoplay preload="metadata" data-matomo-title="{{ page.common.title }} - {{ page.common.album }}">
+        <source src="{{ site.mediaurl }}/{{ page.slug }}.mp3" type="audio/mpeg" />
+        <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
+      </audio>
+    </div>
+
+  </div>
+  <div id="nowPlay">
+
+
+    <div id="tracks">
+      {% if page.previous.url %}
+      <a id="btnPrev" href="{{ relBase }}{{ page.previous.url }}"><span class="fas fa-fast-backward"></span></a>
+      {% endif %}
+
+      {% if page.next.url %}
+      <a id="btnNext" href="{{ relBase }}{{ page.next.url }}"><span class="fas fa-fast-forward"></span></a>
+      {% endif %}
+      
+    </div>
+    
+    <p id="npTitle" style="font-weight: bold;">{{ page.common.title }} </p>
+    <div id="random_posts" style="margin-right: 40px;"></div>
+
+
+  </div>
+ </div>
+

 <script type="text/javascript">
  function loadUrl(newLocation) {
@ -112,19 +177,18 @@ layout: default
  var mu = document.getElementsByTagName("audio")[0];
  var pauseButton = document.getElementById("mu_pause");
  var spincover = document.getElementById("coverart");
+  var fixedplayer = document.getElementById("fixedPlayer");

  mu.addEventListener('ended', function () {
    // only functional if "loop" is removed
    mu.pause();
    mu.currentTime = 0;
-    loadUrl("{{ relBase }}/albums/{{ page.nextTrack.slug }}/"); return false;
+    loadUrl("{{ relBase }}{{ page.next.url }}"); return false;
  });
  mu.onplaying = function() {
-    pauseButton.innerHTML = "Pause";
-    pauseButton.classList.remove("fa-play");
-    pauseButton.classList.add("fa-pause");
-    spincover.classList.add("spinnit");
-    spincover.classList.remove("paused");
+    pauseButton.innerHTML = "⏸️ Pause";
+    fixedplayer.classList.remove("hideplayer");
+
  }; 

  pauseButton.addEventListener("click", function () {
@ -134,21 +198,20 @@ layout: default
    }
    else {
      mu.pause();
-      pauseButton.innerHTML = "Resume";
-      pauseButton.classList.add("fa-play");
-      pauseButton.classList.remove("fa-pause");
-      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>
+
+</script>
+<div class="fullscreen-bg" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);background-size:cover;background-position:center center;">
+</div>
--- a/_manifest.json
+++ b/_manifest.json
@ -0,0 +1,85 @@
+{
+	"short_name": "徒 setto セット",
+	"name": "徒 setto セット Music PWA",
+	"lang": "en",
+	"description": "Music of 徒 setto セット in your phone",
+	"start_url": "/",
+	"background_color": "#3c2a52",
+	"theme_color": "#3c2a52",
+	"dir": "ltr",
+	"display": "standalone",
+	"orientation": "portrait",
+	"icons": [
+		{
+			"src": "/setto-webapp.png",
+			"type": "image/png",
+			"sizes": "512x512"
+		},
+		{
+			"src": "/android-icon-192x192-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "/apple-icon-180x180-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "180x180"
+		},
+		{
+			"src": "/apple-icon-152x152-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "152x152"
+		},
+		{
+			"src": "/apple-icon-144x144-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "144x144"
+		},
+		{
+			"src": "/apple-icon-120x120-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "120x120"
+		},
+		{
+			"src": "/apple-icon-114x114-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "114x114"
+		},
+		{
+			"src": "/favicon-96x96-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "96x96"
+		},
+		{
+			"src": "/apple-icon-76x76-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "76x76"
+		},
+		{
+			"src": "/apple-icon-72x72-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "72x72"
+		},
+		{
+			"src": "/apple-icon-60x60-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "60x60"
+		},
+		{
+			"src": "/apple-icon-57x57-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "57x57"
+		},
+		{
+			"src": "/favicon-32x32-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "32x32"
+		},
+		{
+			"src": "/favicon-16x16-dunplab-manifest-9805.png",
+			"type": "image/png",
+			"sizes": "16x16"
+		}
+	],
+	"prefer_related_applications": "false"
+}
--- a/_old.cookies.md
+++ b/_old.cookies.md
@ -0,0 +1,157 @@
+---
+title: Cookies & Privacy policy
+image: /images/pages/arget-zvhhkivur9m-unsplash.jpg
+description: 'Privacy is important, therefor 徒 setto セット respects it!'
+sitemap: false
+layout: page
+---
+
+To improve our marketing efforts, we at {{ site.publisher.name }} sometimes place small data files called cookies on your device. This site will work perfectly without them. We do however use anonymized analytics of the site-usage regardless of cookies (see bellow if you want to opt out of this too) This usage-data contain no identifiable information.
+
+#### If you were not prompted to consent to cookies when you entered this site, it means you either expressed consent for cookies or dismissed cookies on one of {{ site.publisher.name }}'s subdomain-websites.
+
+## What are cookies?
+
+A cookie is a small text file that a website stores on your computer or mobile device when you visit the site.
+
+* **First party cookies** are cookies set by the website you are visiting. Only that website can read them. In addition, a website might potentially use external services, which also set their own cookies, known as **third-party cookies**.
+* **Persistent cookies** are cookies saved on your computer and that are not deleted automatically when you quit your browser, **unlike a session cookie**, which is deleted when you quit your browser.
+
+Every time you visit the websites managed by the {{ site.publisher.name }}, you will be prompted to **accept or refuse cookies**.<br>The purpose is to enable the site to remember your preferences for a certain period of time.<br>That way, **you do not have to re-enter them** when browsing around the site during the same visit.<br>Cookies can also be used to establish anonymized statistics about the browsing experience on our sites. However, if you do not dismiss the cookie-banner, no cookies will be placed in your browser but we will still be able to see your anonymized actions on this website.
+
+## How do we use cookies?
+
+The websites managed by the {{ site.publisher.name }} mostly use **first-party cookies**. These are cookies set and controlled by the {{ site.publisher.name }}, not by any external organization.<br>However, to view some of our pages, you will have to accept cookies from external organizations.
+
+The **2 types of first-party cookie** we use are to:
+
+* store visitor preferences
+* gather analytics data (about user behaviour).
+
+### 1\. Visitor preferences
+
+This one is set by us. It is only placed if you dismiss the cookie-banner by either chosing to help or declining to help. They remember:
+
+* if you have agreed to (or refused) this site’s cookie policy
+* if you have already replied to our survey pop-up (about how helpful the site content was) – so you will not be asked again.
+
+**Visitor preferences cookies** are:
+
+**Name**\: cookie-notice-dissmissed<br>**Services**\: Cookie consent kit<br>**Purpose**\: Stores your cookie preferences (so you will not be asked again) This cookie is only placed if you accept or decline to help improve our marketing via the cookie-banner buttons.<br>**Cookie type and duration:** First-party session cookie deleted after 12 months.
+
+### 2\. Analytics cookies
+
+We use these purely for internal research on how we can improve the service we provide for all our users.<br>The cookies simply assess how you interact with our website – as an anonymous user (they **data gathered does not identify you personally**).<br>Also, this data is **not shared with any third parties** or used for any other purpose. The anonymized statistics could be shared with contractors working on communication projects under contractual agreement with the {{ site.publisher.name }}.<br>However, you are **free to refuse** these types of cookies –simply let the cookie banner you see in the foot of all pages be displayed
+
+**Analytics cookies** are:
+
+**Name**\: \_pk\_id\#<br>**Services**\: Corporate web analytics service, (Matomo open source software)<br>**Purpose**\: Recognises website visitors (**anonymously** – no personal information is collected on the user)<br>**Cookie type and duration**\: First-party persistent cookie, 13 months
+
+**Name**\: \_pk\_ses\#<br>**Services**\: Corporate web analytics service, (Matomo open source software**)<br>Purpose**\: Identifies the pages viewed by the same user during the same visit. (**anonymously** – no personal information is collected on the user)<br>**Cookie type and duration**\: First-party persistent cookie, 30 minutes
+
+## Third-party cookies
+
+Some of our pages display content from external providers, e.g. YouTube, Facebook and Twitter.<br>To view this third-party content, you first have to accept their specific terms and conditions. This includes their cookie policies, which we have no control over.<br>But if you do not view this content, no third-party cookies are installed on your device.
+
+### Third-party providers that may found on this website
+
+* [YouTube](https://www.youtube.com/t/terms){: target="_blank"}
+* [Internet Archive](https://archive.org/about/terms.php){: target="_blank"}
+* [ScribbleLive](https://www.scribblelive.com/legal/terms-of-use/){: target="_blank"}
+* [Google Maps](https://www.google.com/intl/en_be/help/terms_maps/)
+* [Twitter](https://twitter.com/en/tos?wcmmode=disabled#intlTerms){: target="_blank"}
+* [TV1](https://www.tv1.eu/en/datenschutz/){: target="_blank"}
+* [Vimeo](https://vimeo.com/terms){: target="_blank"}
+* [Microsoft](https://www.microsoft.com/en/servicesagreement/){: target="_blank"}
+* [Facebook](https://www.facebook.com/legal/terms){: target="_blank"}
+* [Google](https://policies.google.com/terms?hl=en&amp;gl=be){: target="_blank"}
+* [LinkedIn](https://www.linkedin.com/legal/user-agreement){: target="_blank"}
+* [Livestream](https://livestream.com/legal/terms){: target="_blank"}
+* [SoundCloud](https://soundcloud.com/pages/privacy){: target="_blank"}
+* [European Parliament](http://www.europarl.europa.eu/portal/en/legal-notice){: target="_blank"}
+
+These third-party services are outside of the control of the {{ site.publisher.name }}. Providers may, at any time, change their terms of service, purpose and use of cookies, etc.
+
+## How can you manage cookies?
+
+You can **manage/delete** cookies as you wish - for details, see [aboutcookies.org](https://www.aboutcookies.org/){: target="_blank"}
+
+### Removing cookies from your device
+
+You can delete all cookies that are already on your device by clearing the browsing history of your browser. This will remove all cookies from all websites you have visited.<br>Be aware though that you may also lose some saved information (e.g. saved login details, site preferences).
+
+### Managing site-specific cookies
+
+For more detailed control over site-specific cookies, check the privacy and cookie settings in your preferred browser.
+
+### Blocking cookies
+
+You can set most modern browsers to prevent any cookies being placed on your device, but you may then have to manually adjust some preferences every time you visit a site/page. And some services and functionalities may not work properly at all (e.g. profile logging-in).
+
+### Opting out of all of log-analytics
+
+(if you can't see a dialogue box here, you are already opted out by your browser and/or any of it's add-ons)<br>&nbsp;
+
+<iframe style="border: 0; height: 300px; width: 300px;" src="https://terminalnetwork.matomo.cloud/index.php?module=CoreAdminHome&amp;action=optOut&amp;language=en&amp;backgroundColor=000000&amp;fontColor=ffffff&amp;fontSize=&amp;fontFamily=sans-serif"></iframe>
+
+## Personal data protection
+
+{{ site.publisher.name }} is committed to user privacy.
+
+The policy on protection of individuals with regard to the processing of personal data by {{ site.publisher.name }} is based on [Regulation (EU) 2018/1725](https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32018R1725) of the European Parliament and Council of 23 October 2018 on the protection of natural persons with regard to the processing of personal data by {{ site.publisher.name }} and on the free movement of such data, and repealing Regulation (EC) No 45/2001 and Decision No 1247/2002/EC.
+
+This general policy covers the {{ site.publisher.name }}'s family of websites, within the {{ site.publisher.domain }} domain. Although you can browse through most of these websites without giving any personal information, in some cases information is required in order to provide the e-services you request. Websites that require such information treat it in full compliance with the regulation mentioned above and provide information about the use of your data in their specific privacy policy statements.
+
+In this respect:
+
+* for each e-service, a controller determines the purposes and means of personal data processing and ensures conformity with the privacy policy
+* within each website/e-service, a Data Protection Officer ensures that the provisions of the regulation are applied and advises controllers on fulfilling their obligations
+
+The {{ site.publisher.name }}'s family of websites, within the {{ site.publisher.domain }} domain, provides links to third party sites. In order to use third party content on our websites, you may need to accept their specific terms and conditions, including their cookie policies, over which we have no control.
+
+## e-service
+
+An e-service on {{ site.publisher.domain }} is a service or resource made available on the Internet in order to improve the communication between people, customers, employees and businesses on the one hand and the {{ site.publisher.name }} on the other hand.
+
+3 types of e-services are, or will be, offered by {{ site.publisher.name }} :
+
+* information services that provide people, media, businesses, administrations and others with access to information
+* interactive communication services that allow better contact with people, businesses, civil society, customers and public bodies, in order to facilitate consultations and feedback
+* services that allow access to all basic forms of transactions with {{ site.publisher.name }}, such as&nbsp; recruitment, event enrolment, and acquisition of documents
+
+### Information contained in a specific privacy statement
+
+A specific privacy policy statement will contain the following information about the use of your data
+
+* what information is collected, for what purpose and the technical means by which {{ site.publisher.name }} collects personal information in order to fulfill a specific purpose
+* to whom your information is disclosed
+* how you can access your information, verify its accuracy and, if necessary, correct it
+* how long your data is kept
+* what security measures are taken to safeguard your information against possible misuse or unauthorised access
+* whom to contact if you have queries or complaints
+
+### {{ site.publisher.name }} Analytics
+
+{{ site.publisher.name }} is the corporation that measures the effectiveness and efficiency of the {{ site.publisher.domain }} site managed by the {{ site.publisher.name }}.
+
+You are free to refuse the use of this service – either by letting the cookie banner that appears at the bottom of all pages you visit be, and using the settings provided above on this page.
+
+{{ site.publisher.name }} manages its own web pages This is the page where you can manage your options.
+
+### Contacting {{ site.publisher.name }}
+
+Many web pages on {{ site.publisher.domain }} have a contact button, which either sends an email on your behalf of activates your e-mail software and invites you to send your comments to a specific mailbox.
+
+When you send such a message, your personal data is collected only to the extent necessary to reply. If the management team of the mailbox is unable to answer your question, it will forward your e-mail to another service. You will be informed, via e-mail, about which service your question has been forwarded to.
+
+If you have any questions about the processing of your e-mail and related personal data, do not hesitate to include them in your message.
+
+## Safeguarding information
+
+Collected personal data is stored and encrypted on a computer of the external subcontractor acting as processor, who must guarantee the data protection and confidentiality required by Regulation (EU) 2018/1725.
+
+## Verifying, modifying or deleting information
+
+If you want to verify, modify or delete your personal data stored by the responsible controllers for the {{ site.publisher.name }} website and its sub-sites, you can email the data controller for the {{ site.publisher.name }} website at the address below. In your email, clearly state your request and include the URL of the website/webpages your request refers to.
+
+Email: [{{ site.publisher.mail }}](mailto:{{ site.publisher.mail }})
--- a/_plugins/jekyll_xml_source.rb
+++ b/_plugins/jekyll_xml_source.rb
@ -0,0 +1,66 @@
+##
+# Download XML data from external sources
+# Convert data to JSON and optionally save it to cache
+#
+# @author Derek Smart<derek@grindaga.com>
+# @copyright 2018
+# @license MIT
+
+require 'json'
+require 'net/http'
+require 'active_support/core_ext/hash'
+
+module Jekyll_Xml_Source
+  class Generator < Jekyll::Generator
+    safe true
+    priority :highest
+
+    def saveToCache(data_source, name, content)
+      path = "#{data_source}/#{name}.json"
+      File.open(path,"w") do |file|
+        file.write(content)
+      end
+    end
+
+    def loadFromCache(data_source, name)
+      path = "#{data_source}/#{name}.json"
+      if not File.exist?(path)
+        return
+      end
+      File.open(path,"r") do |file|
+        return JSON.load(file.read())
+      end
+    end
+
+    def generate(site)
+      config = site.config['jekyll_xml']
+      data_source = (site.config['data_source'] || '_data')
+
+      if !config
+        return
+      end
+
+      config.each do |data|
+        if data['cache']
+          site.data[data['data']] = loadFromCache(data_source, data['data'])
+        end
+
+        if site.data[data['data']].nil?
+          begin
+            result = Net::HTTP.get_response(URI.parse(data['source'])).body
+            site.data[data['data']] = JSON.load(Hash.from_xml(result).to_json)
+          rescue
+            next
+          end
+
+          if data['cache']
+            saveToCache(data_source, data['data'], Hash.from_xml(result).to_json)
+          end
+        end
+
+      end
+
+    end
+
+  end
+end
--- a/_posts/2018-12-17-satoshi-mon-ami.md
+++ b/_posts/2018-12-17-satoshi-mon-ami.md
@ -6,7 +6,13 @@ 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_path: /videos/satoshi.webm
 category: releases
+tags:
+  - EP
+link: 
+  url: 
+  buttontext: 
 check_this_if_cannot_be_bought: false
 album: satoshi-mon-ami
 stores:
@ -14,31 +20,22 @@ stores:
    url: 'https://shop.basspistol.com/album/satoshi-mon-ami'
    icon: fa-bandcamp
    download: true
-  - name: Spotify
-    url: 'https://open.spotify.com/album/116YJCcI5T9Iw9UBQCvJWF'
-    icon: fa-spotify
-    download: false
-  - name: Apple Music
-    url: >-
-      https://itunes.apple.com/us/album/satoshi-mon-ami-single/1447055511?uo=4&app=music&at=1001lry3&ct=dashboard
-    img:
-    icon: fa-apple
-    download: false
-  - name: Google Play
-    url: >-
-      https://play.google.com/store/music/album/%E5%BE%92_setto_%E3%82%BB%E3%83%83%E3%83%88_Satoshi_mon_ami?id=Bygwvidl75kflmclmchl6wc5uba
-    icon: fa-google-play
-    download: false
-  - name: Deezer
-    url: 'https://www.deezer.com/album/82118382'
+  - name: Audius
+    url: 'https://audius.co/tosettosetto/playlist/satoshi-mon-ami-11205'
    icon: fa-creative-commons-sampling
-    download: false
-  - name: Napster
-    url: 'https://us.napster.com/artist/-setto-/album/satoshi-mon-ami'
-    icon: fa-napster
+  - name: Peertube
+    url: >-
+      https://v.basspistol.org/videos/watch/playlist/262e54c5-6f15-402a-972d-474a898129df
+    icon: fa-youtube
    download: false
 ---

 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.

-Being close to someone, without them knowing, anonymously and obsessively through a device. Decrypting interconnected sub-stories from every node in the graph and losing your mind on it.What's the latest story? FOMO to the max, The Fear Of Missing Out!
+Being close to someone, without them knowing, anonymously and obsessively through a device. Decrypting interconnected sub-stories from every node in the graph and losing your mind on it.What's the latest story? FOMO to the max, The Fear Of Missing Out\!
+
+Put your derpy VR-goggles on and check out the 360 video bellow\!
+
+<iframe src="https://www.youtube-nocookie.com/embed/mOPubF0xhG8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="100%" height="360" frameborder="0"></iframe>
+
+The video is delivered from YouTube, but is explicitly set not to push any cookies to your browser\! [Click here for a direct link](https://www.youtube.com/watch?v=mOPubF0xhG8){: target="_blank"}
--- a/_posts/2019-02-07-darkweb.md
+++ b/_posts/2019-02-07-darkweb.md
@ -5,35 +5,30 @@ date: 2019-02-07 19:07:00
 description: >-
  As dystopian as the present might seem on-line, there is always room for the
  strange in the cypher...
-image: /images/posts/2-darkweb-instrumental-.jpeg
+image: /images/darkweb.jpg
+video_path: /videos/darkweb.webm
 category: releases
+tags:
+  - EP
+link: 
+  url: 
+  buttontext: 
 check_this_if_cannot_be_bought: false
 album: darkweb
+download_form_id: 6 
 stores:
  - name: Bandcamp
    url: 'https://shop.basspistol.com/album/darkweb'
    icon: fa-bandcamp
    download: true
-  - name: Spotify
-    url: 'https://open.spotify.com/album/0meSZO7BeGoHJc6BWnRvhN'
-    icon: fa-spotify
-    download: false
-  - name: Apple Music
-    url: 'https://itunes.apple.com/us/album/darkweb-single/1449847586'
-    icon: fa-apple
-    download: false
-  - name: Google Play
-    url: >-
-      https://play.google.com/store/music/album/%E5%BE%92_setto_%E3%82%BB%E3%83%83%E3%83%88_Darkweb?id=Bcrzzrtj7yfcyladynit7hg4age
-    icon: fa-google-play
-    download: false
-  - name: Deezer
-    url: 'https://www.deezer.com/fr/album/84669482'
+  - name: Audius
+    url: 'https://audius.co/tosettosetto/playlist/darkweb-11204'
    icon: fa-creative-commons-sampling
    download: false
-  - name: Napster
-    url: 'https://us.napster.com/artist/-setto-/album/darkweb-single'
-    icon: fa-napster
+  - name: PeerTube
+    url: >-
+      https://v.basspistol.org/videos/watch/playlist/a6d80b4d-5e6e-4546-b90e-2be5b4d8a960
+    icon: fa-youtube
    download: false
 ---

@ -41,4 +36,4 @@ As dystopian as the present might seem on-line, there is always room for the str

 At the end of the tunnel through the flashy but controlled cyberspace we call the "Internet", there is a light of hope for the underground.

-Cover-art by <a href="https://ritarn.com/" target="_blank" rel="noopener">Mattias “Ritarn” Lindström</a>
+Cover-art by [Mattias “Ritarn” Lindström](https://ritarn.com/){: target="_blank"}
--- a/_posts/2019-12-12-cyber-grany.md
+++ b/_posts/2019-12-12-cyber-grany.md
@ -1,19 +0,0 @@
---
-title: Granny is a cyborg now
-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
-category: releases
-check_this_if_cannot_be_bought: true
-album: cyber-grany
-stores:
-  - name:
-    url:
-    icon: 
-    download: false
---
-
-My grandmother, 93,&nbsp; added me on social media yesterday. So I called her. Long-chat good talk. TL;DR Damn what a woman\! She told me she had a roll-walker. I said "we're in the future now Grandma, you're a cyborg, half machine\!"
-
-She laughed and acknowledge it was a marvellous invention\!
--- a/_posts/2019-12-12-granny-is-a-cyborg-now.md
+++ b/_posts/2019-12-12-granny-is-a-cyborg-now.md
@ -0,0 +1,31 @@
+---
+title: Granny is a cyborg now
+author: setto
+date: 2019-12-12 04:03:00 +0100
+description: Jazzy Cybersoul with a hint of 303 baselines.
+image: /images/posts/1-grandma-got-the-ssh-keys.jpeg
+video_path: /videos/37th--chamber.mp4
+category: releases
+tags:
+  - EP
+link:
+  url:
+  buttontext:
+check_this_if_cannot_be_bought: false
+album: cyber-grany
+stores:
+  - name: Audius
+    url: 'https://audius.co/tosettosetto/grandma-is-a-cyborg-now-92454'
+    icon: fa-creative-commons-sampling
+    download: false
+---
+
+My grandmother, 93,&nbsp; added me on social media yesterday. So I called her. Long-chat good talk. TL;DR Damn what a woman\! She told me she had a roll-walker. I said "we're in the future now Grandma, you're a cyborg, half machine\!"
+
+She laughed and acknowledge it was a marvellous invention\!
+
+Now with vocals on Audius\!
+
+<iframe sandbox="allow-same-origin allow-scripts allow-popups" src="https://v.basspistol.org/videos/embed/0073ff9d-d255-40a3-80de-fb3d37bf9ab2" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
+
+&nbsp;
--- a/_posts/2020-04-19-live-with-hardware.md
+++ b/_posts/2020-04-19-live-with-hardware.md
@ -1,13 +1,19 @@
 ---
 title: Live with hardware
 author: setto
-date: 2020-04-19 07:07:00
+date: 2020-04-19 09:07:00 +0200
 description: >-
  There is a weird meta-core to anything social exchange on internet that I
  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_path:
 category: releases
+tags:
+  - Mixtape
+link:
+  url:
+  buttontext:
 album: live-with-hardware
 check_this_if_cannot_be_bought: true
 stores:
@ -23,4 +29,6 @@ It takes at least 2 to have a dialogue. And to achieve that plurality in cybersp

 Either way, there is always something that escapes me when I try to thinker about exchange of information that pertain to the power limbo between humans. Hence the idea of a meta core: like a Russian doll. After all information is vehicular to energy. Be it human or robot information exchange: an impulse that turns a turbine on, a poem that make your heart beat faster…

-Audio extracted from the 360 video of [this jam](/hw-jam/) recorded a while back.
+Audio extracted from the 360 video of [this jam](/hw-jam/) recorded a while back.
+
+<iframe sandbox="allow-same-origin allow-scripts allow-popups" src="https://v.basspistol.org/videos/embed/a6e9af57-b650-4274-92a8-5e806e641420" allowfullscreen="" width="100%" height="360" frameborder="0"></iframe>
--- a/_posts/2020-08-02-unmet-dependencies.md
+++ b/_posts/2020-08-02-unmet-dependencies.md
@ -0,0 +1,48 @@
+---
+title: Unmet Dependencies
+author: setto
+date: 2020-08-02 07:00:00
+description: >-
+  Proprietary tools, consultancies, remote labor... The reality in the digital
+  industry is as hard to cope with as it is building software in Haskell.
+  Freedom is luxury, but also a burden.
+
+
+  Open your mind, open the source!
+image: /images/posts/final-pingnucover1220x1200.jpg
+video_path: /videos/pingu.mp4
+category: releases
+tags:
+  - EP
+link: 
+  url: 
+  buttontext: 
+check_this_if_cannot_be_bought: false
+album: unmet-dependencies
+stores:
+  - name: Bandcamp
+    url: 'https://shop.basspistol.com/album/unmet-dependencies'
+    icon: fa-bandcamp
+    download: true
+  - name: Audius
+    url: 'https://audius.co/tosettosetto/playlist/unmet-dependencies-11206'
+    icon: fa-creative-commons-sampling
+    download: false
+  - name: PeerTube
+    url: >-
+      https://v.basspistol.org/videos/watch/playlist/e2e57ea1-5ed1-41a2-afd9-f8f9a0b7d1c6
+    icon: fa-youtube
+    download: false
+---
+
+## Oldies, but goldies
+
+It is through these 2 tracks that i found the To Setto Setto in me. Before that i used to do some (Excellent, but) sort of lamo Electro-pop. Originally released under Sethybwoy, around 2016, they got some traction in Cyperpunk and geek circles, but never quite made it further…
+
+I don't really expect them to go so much longer this time, the odds are about the same as winning the EU-Jackpot Lottery. But i decided they belonged to To Setto Setto now and i can do as I please with them.
+
+Hope you like them\!
+
+Here is a video that was made for the track Pingnu. It's cute AF… but ok, that's how it was made\!
+
+<iframe sandbox="allow-same-origin allow-scripts allow-popups" src="https://v.basspistol.org/videos/embed/eee983fc-6619-4804-8e49-1b276015f8fa?subtitle=fr" allowfullscreen="" width="100%" height="360" frameborder="0"></iframe>
--- a/_posts/2020-08-03-333mix.md
+++ b/_posts/2020-08-03-333mix.md
@ -0,0 +1,31 @@
+---
+title: 333mix
+author: setto
+date: 2020-08-03 00:00:00 +0200
+description: Pignu got Chopped & Screwed by KodTreatment
+image: /images/posts/333mix.jpg
+video_path:
+category: ramblings
+tags:
+link:
+  url: 'https://kodtreatment.bandcamp.com/'
+  buttontext: Visit KodTreatment
+check_this_if_cannot_be_bought: true
+album:
+stores:
+  - name:
+    url:
+    icon:
+    download: false
+---
+## I'm super stoked about this! 
+
+Internet is wonderful: you put something in it and it gets a life, mutates, grows some muscles, finds a passion, duplicates itself, pops out and then back in on repeat!
+
+Merci Rskp!\
+👑\
+🐧
+
+<iframe width="100%" height="360" src="https://www.youtube-nocookie.com/embed/gR6r4gUw6vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Check out the enitre project's bandcamp on the link below!
--- a/_posts/2020-11-13-make-a-bold-move-or-die-trying.md
+++ b/_posts/2020-11-13-make-a-bold-move-or-die-trying.md
@ -0,0 +1,34 @@
+---
+title: Make a bold move or die trying
+author: setto
+date: 2020-11-13 17:20:00 +0100
+description: >-
+  Being Underground is a dirty job, but someone has to do it! Tell your idols
+  they need to find some courage! Fuck the Haters (yeah you D.Ek!)
+image: /images/posts/fuckit.jpg
+video_path:
+category: ramblings
+tags:
+link:
+  url:
+  buttontext:
+check_this_if_cannot_be_bought: true
+album:
+stores:
+  - name:
+    url:
+    icon:
+    download: false
+---
+
+I've spent ~$90 to be available on streaming services for 2 years and made exactly $9.85 (before taxes) during that time. That's 152 times less then i did by spending 0 on Audius. I don't know if Audius is savior, but i know for sure the mainstreaming platforms are not. Of course i could up my promotion game, send all my listeners into their network of [stalker-bots and trackers.](https://thebaffler.com/downstream/big-mood-machine-pelly){: target="_blank"} Or like the haters say: "mAyBE jUst mAKe bETter muSIC". But instead I'm going to make a bold move.
+
+> A move that is allowed to me because I'm small and truly independent: **I'm deleting that shit\!** 🖕
+
+Effective soon (whatever time it takes for my aggregator to act upon my request), you'll find me everywhere, but i won't promote any other places then:
+
+### This website and [My Peertube Channel](https://v.basspistol.org/accounts/setto/video-channels)
+
+Being Underground is a dirty job, but someone has to do it\! Tell your idols they need to find some courage\!
+
+PS. Fuck the Haters (yeah you D.Ek\!)
--- a/_posts/2020-11-17-social-media-distancing.md
+++ b/_posts/2020-11-17-social-media-distancing.md
@ -0,0 +1,37 @@
+---
+title: Social Media Distancing
+author: setto
+date: 2020-11-17 16:20:00 +0100
+description: 'We see each other less, but when we do it''s on the same screen we work on.'
+image: /images/posts/digital-detox.jpg
+video_path:
+category: ramblings
+tags:
+link:
+  url: 'https://v.basspistol.org/accounts/setto/video-channels'
+  buttontext: "Subscribe to my PeerTube \U0001F4FA"
+check_this_if_cannot_be_bought: true
+album:
+stores:
+  - name:
+    url:
+    icon:
+    download: false
+---
+
+The mainstream networks have gone void of actual content. Everybody is either mimicking something or avoiding any sort of relevance because "it just creates conflicts". And maybe that makes sense in these dark times? Remote work has got us so stuck to our screens that we'd rather not stick around on there. The escapism escaped from those places when the corporation jumped in.
+
+I really do my best to social-media distance myself from the usual suspects. And there are plenty of alternatives:
+
+* [Pixelfed](https://pixfed.com/tosettosetto){: target="_blank"} replaces Insta
+* [Mastodon](https://kolektiva.social/@setto){: target="_blank"} replaces Twitter
+* [Matrix](https://matrix.to/#/!YQcdVviFQNGYFMYrxD:matrix.org?via=matrix.org){: target="_blank"} replaces Whatsapp
+* [PeerTube](https://v.basspistol.org) replace YouTube
+
+The fediverse is a diverse and federate network. Here you can start afresh. Be that GeoCities person you used to be? Or simply a lurker\! It becomes what we make it… The cool thing about Fediverse is that once you have an identity on one of those systems, say mastodon, you can interact with content from all systems\! Be it pixelfed, peertube, disapora…
+
+Try it out\! I suggest you start by looking for a [community node that fits your vibe.](https://joinmastodon.org/communities){: target="_blank"}
+
+> Mastodon isn’t a single website like Twitter or Facebook, it's a network of thousands of communities operated by different organizations and individuals that provide a seamless social media experience.
+
+Get your self an identity on there and once logged in, search for "@setto@v.basspistol.org" That is my PeerTube identity. Wonder how? Ask [me on matrix!](/chat/#read) :)
--- a/_posts/2021-03-08-little-bug-ep.md
+++ b/_posts/2021-03-08-little-bug-ep.md
@ -0,0 +1,33 @@
+---
+title: Little Bug EP
+author: setto
+date: 2021-03-08 19:07:00 +0100
+description: Lofi Hiphop from planet Foss.
+image: /images/posts/littlebug1400x1400.png
+video_path:
+category: releases
+tags:
+  - EP
+link:
+  url:
+  buttontext:
+check_this_if_cannot_be_bought: false
+album: little-bug-ep
+download_form_id: 11
+stores:
+  - name: Bandcamp
+    url: 'https://shop.basspistol.com/album/little-bug-ep'
+    icon: fa-bandcamp
+    download: true
+  - name: Audius
+    url: 'https://audius.co/tosettosetto/playlist/little-bug-ep-31143'
+    icon: fa-creative-commons-sampling
+    download: false
+---
+A smol EP for human kind. A giant leap for me. This is my first release that is entirely produced using Cooperative software (AKA FLOSS). As in: no hardware\!\! Yes\! it is also my first release in over a decade where all the synths and drum machines are software modules. It features flute and sax from the talented [Randulo](https://indieweb.social/@randulo){: target="_blank" rel="noopener noreferrer"}, and I am happy to share it with you.
+
+<iframe title="Little Bug - 徒 setto セット" src="https://v.basspistol.org/videos/embed/82b6d298-be44-4c64-9941-b66d09b2723b" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="100%" height="315" frameborder="0"></iframe>
+
+Let me know what you think\! You can talk to me [here](/chat/#read)
+
+&nbsp;
--- a/_posts/_defaults.md
+++ b/_posts/_defaults.md
@ -4,8 +4,13 @@ author:
 date: 
 description: 
 image: 
+video_path:
 category: 
-check_this_if_cannot_be_bought: false
+tags: 
+link: 
+  url: 
+  buttontext: 
+check_this_if_cannot_be_bought: true
 album:
 stores:
  - name:
--- a/_sass/_cookies.scss
+++ b/_sass/_cookies.scss
@ -0,0 +1,66 @@
+/* cookies */
+
+#cookie-notice {
+
+  display: none;
+  text-align: right;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--bg);
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-content: center;
+  align-items: center;
+  z-index: 10000000;
+  -webkit-box-shadow: 0px -12px 32px -25px var(--border-alt);
+  -moz-box-shadow: 0px -12px 32px -25px var(--border-alt);
+  box-shadow: 0px -12px 32px -25px var(--border-alt);
+  p {
+    flex: 1 0 250px;
+    margin: 40px 20px 40px 40px;
+    font-size: 0.8em;
+    font-family: _font(family);
+    font-weight: 300;
+  }
+  @media only screen and (max-width: 651px) {
+    p {
+      text-align: center;
+      margin: 40px 40px 20px 40px;
+    }
+    .yes, .no {
+      margin: 20px 40px 0px 40px;
+    }
+
+  }
+  button {
+    border: none;
+    font-size: inherit;
+    font-family: inherit;
+  }
+}
+
+.yes, .no {
+  flex: 0 0 100px;
+  -moz-transition: all var(--anim-speed) ease-in-out;
+  -webkit-transition: all var(--anim-speed) ease-in-out;
+  -ms-transition: all var(--anim-speed) ease-in-out;
+  transition: all var(--anim-speed) ease-in-out;
+  text-align: center;
+  margin: 40px 40px 40px 10px;
+}
+.yes {
+  background-image: unset;
+  background-color: var(--accent1) !important;
+}
+.no {
+  background-image: unset;
+  background-color: #f00 !important;
+}
+.yes:hover {
+  // color: #000 !important;
+  -moz-transition: all var(--anim-speed) ease-in-out;
+  -webkit-transition: all var(--anim-speed) ease-in-out;
+  -ms-transition: all var(--anim-speed) ease-in-out;
+  transition: all var(--anim-speed) ease-in-out;
+}
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@ -0,0 +1,373 @@
+
+// Basic Elements
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: _font(title);
+  font-weight: 700;
+
+}
+h1 {
+  font-size: 2.5em;
+}
+h2 {
+  font-size: 1.75em;
+}
+h3 {
+  font-size: 1.5em;
+}
+strong {
+  font-weight: 500;
+}
+a {
+  text-decoration-style: wavy;
+  text-decoration-color: transparent;
+  color: var(--accent1);
+  -moz-transition: all var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  -webkit-transition: all var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  -ms-transition: all var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  transition: all var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+}
+a:hover {
+  color: var(--accent2);
+  text-decoration-style: wavy;
+  text-decoration-color: unset;
+}
+.center {
+  text-align: center;
+}
+
+// Buttons
+
+.button, .mauticform-button {
+  font-family: _font(title);
+  background-color: var(--accent2);
+  padding: 1em;
+  margin-bottom: 20px;
+  display: inline-block;
+  border-radius: var(--border-radius);
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--bg);
+  -webkit-box-shadow: 0px 0px 0px -3px var(--border-alt);
+  -moz-box-shadow: 0px 0px 0px -3px var(--border-alt);
+  box-shadow: 0px 0px 0px -3px var(--border-alt);
+  -webkit-transition: all var(--anim-speed) ease-in-out;
+  -moz-transition: all var(--anim-speed) ease-in-out;
+  -ms-transition: all var(--anim-speed) ease-in-out;
+  transition: all var(--anim-speed) ease-in-out;
+  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;
+
+  
+}
+.button:hover .mauticform-button:hover {
+  background-color: var(--accent1);
+  color: var(--bg);
+  -webkit-box-shadow: 0px 11px 10px -3px var(--border-alt);
+  -moz-box-shadow: 0px 11px 10px -3px var(--border-alt);
+  box-shadow: 0px 11px 10px -3px var(--border-alt);
+  -webkit-transition: all var(--anim-speed) ease-in-out;
+  -moz-transition: all var(--anim-speed) ease-in-out;
+  -ms-transition: all var(--anim-speed) ease-in-out;
+  transition: all var(--anim-speed) ease-in-out;
+}
+.button:active, .mauticform-button:active {
+  -webkit-box-shadow: 0px 0px 0px -3px var(--border-alt);
+  -moz-box-shadow: 0px 0px 0px -3px var(--border-alt);
+  box-shadow: 0px 0px 0px -3px var(--border-alt);
+}
+@media only screen and (max-width: 480px) {
+  .button, .mauticform-button{
+    font-size: 0.75em;
+    padding: 0.75em;
+  }
+}
+
+.normal-section {
+  display:flex; 
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px;
+  -webkit-box-shadow: unset;
+  -moz-box-shadow: unset;
+  box-shadow: unset;
+  h2 {
+    flex: 0 0 100%;
+    margin: 20px;
+  }
+
+    p {
+      margin-top: 20px;
+    }
+    ul{
+      width: 100%;
+
+    }
+
+    .icon {
+      flex: 0 0 100px;
+      margin: 0 0 20px 0;
+      display: inline-block;
+      width: 100px;
+      height: 100px;
+      border-radius: 200px;
+      font-size: 40px;
+
+      line-height: 100px;
+      text-align: center;
+
+    }
+
+
+  
+  img {
+    width:100%;
+    height: 100%; 
+    object-fit: cover;
+    border-radius: var(--border-radius);
+  }
+}
+
+// icon
+
+.label {
+  display: none;
+}
+.icon {
+  flex: 0 0 45px;
+  margin:20px; 
+  font-size: 45px;
+  border-radius: 100px;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  border: 1px solid var(--accent1);
+  color: var(--accent1);
+  text-align: center;
+  text-decoration: none;
+  -moz-transition: border var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  -webkit-transition: border var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  -ms-transition: border var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+  transition: border var(--anim-speed) ease-in-out, color var(--anim-speed) ease-in-out;
+
+}
+.icon:hover {
+  border: 1px solid var(--accent2);
+  color: var(--accent2);
+
+}
+.small {
+  border-radius: 80px;
+  width: 70px;
+  height: 70px;
+  line-height: 70px;
+  font-size: 45px;
+  margin-left: 0;
+}
+.smaller {
+  border-radius: 30px;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 18px;
+  margin: 10px 10px 10px 0;
+}
+
+// Content Author
+#author {
+  flex: 0 0 280px;
+  margin: 0;
+  .date {
+    font-size:.85em;
+  }
+  .author-image {
+    margin-right: 10px;
+    background-repeat: no-repeat;
+    background-size:cover; 
+    border-radius:150px; 
+    width:150px; 
+    height:150px;
+  }
+}
+
+.info{
+  padding: 40px;
+
+  margin: auto;
+  .info-pages {
+    padding-top: 40px;
+    max-width: var(--max-width);
+    margin: auto;
+    .container {
+      img {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+        max-width: 600px;
+        height: auto;
+        display: block;
+      }
+      h6 {
+        font-size: 0.8em;
+        text-align: center;
+      }
+      blockquote {
+        font-weight: 700;
+        border-left: 3px dotted var(--fg);
+        padding-left: 40px;
+      }
+      ul {
+        list-style-type:circle;
+        padding-left:40px;
+      }
+    }
+  }
+
+  p {
+    margin: 20px 0;
+  }
+  h2, h3, h4, h5, h6 {
+    text-align: left;
+  }
+}
+
+.news, .links {
+  margin-top: 40px;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  h2 {
+    flex: 0 0 100%;
+    margin-bottom: 20px;
+  }
+  > div {
+    background-size: cover;
+    background-repeat: no;
+    background-position: center center;
+    flex: 1 1 512px;
+    min-height: 80vh;
+
+    padding: 40px;
+    box-sizing: border-box;
+    text-align: left;
+
+  }
+  .description {
+    h2, p, a {
+      text-align: center;
+    }
+    p {
+      margin-top: 20px;
+    }
+    p:last-child {
+      margin-bottom: 40px;
+    }
+    min-height: unset;
+  }
+}
+.news:nth-child(even), .links:nth-child(even) {
+  flex-direction: row-reverse;
+
+}
+.links {
+  > div {
+    min-height: unset;
+  }
+ 
+}
+.linksbg {
+  background-size: 100%;
+  background: var(--bg);
+  background: linear-gradient(180deg, var(--bg) 26%, var(--accent2-alt) 100%);
+
+}
+
+
+.front-section {
+  flex-direction: row-reverse;
+  -webkit-box-shadow: unset;
+  -moz-box-shadow: unset;
+  box-shadow: unset;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  p, h1, h2, h3, h4 {
+    text-align: left;
+    margin-top: 20px;
+    max-width: 570px;
+  }
+  p:last-child {
+    margin-bottom: 40px;
+  }
+
+  > div {
+    background-size: cover;
+    background-repeat: no;
+    background-position: center center;
+    flex: 1 1 380px;
+    min-height: 50vh;
+
+    padding: 20px;
+    box-sizing: border-box;
+    text-align: left;
+
+  }
+  .description {
+    min-height: unset;
+  }
+  .container {
+    max-width: 460px;
+    margin: 0 20px 0 auto;
+  }
+  @media only screen and (max-width: 1080px) {
+  
+    .container {
+       margin: 0 20px 0 20px;
+    }
+  }
+}
+.front-section:nth-child(even) {
+  flex-direction: row;
+  .container {
+
+    margin: 0 auto 0 20px;
+  }
+  @media only screen and (max-width: 1000px) {
+    .container {
+
+      margin: 0 20px 0 20px;
+    }
+  }
+
+}
+
+
+
+
+#contact {
+  padding: 20px;
+
+  > div {
+    max-width: var(--max-width);
+    margin: auto;
+    padding: 40px 20px;
+  }
+  h2 {
+    padding-top: 20px;
+  }
+}
+
+.normal-section {
+  display:flex; 
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px;
+  -webkit-box-shadow: unset;
+  -moz-box-shadow: unset;
+  box-shadow: unset;
+}
--- a/_sass/_forms.scss
+++ b/_sass/_forms.scss
@ -0,0 +1,125 @@
+.textspace {
+  height: 100px;
+
+} 
+
+input, textarea, select {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  font-family: _font(family);
+  font-size: 1em;
+}
+
+
+input[type=submit] {
+  width: 200px;
+  background-image: linear-gradient(223deg, var(--accent1), var(--accent2));
+  background-size: 800% 800%;
+  -webkit-animation: backgroundBlink 2s ease infinite;
+  -moz-animation: backgroundBlink 2s ease infinite;
+  animation: backgroundBlink 2s ease infinite;
+
+
+  color: var(--bg);
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-image: linear-gradient(223deg, var(--accent2),var(--accent1));
+  background-size: 800% 800%;
+  -webkit-animation: backgroundBlink 2s ease infinite;
+  -moz-animation: backgroundBlink 2s ease infinite;
+  animation: backgroundBlink 2s ease infinite;
+
+}
+
+.contact-info {
+  display: flex; 
+  flex-wrap: wrap;
+  justify-content: space-between;
+  label {
+    display: none;
+
+  }
+  input {
+    flex: 1 1 330px;
+    min-width: 240px;
+
+  }
+}
+
+/*specific classes related to Checkbox skins*/
+/* CSS Created by CSS CHECKBOX */
+/**********************************/
+/**** www.CSScheckbox.com *********/
+
+/*general styles for all CSS Checkboxes*/
+label {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: none;
+  }
+  
+  input[type=checkbox].css-checkbox {
+      position: absolute; 
+      overflow: hidden; 
+      clip: rect(0 0 0 0); 
+      height:1px; 
+      width:1px; 
+      margin:-1px; 
+      padding:0;
+      border:0;
+  }
+  
+  input[type=checkbox].css-checkbox + label.css-label {
+    padding-left:20px;
+    height:15px; 
+    display:inline-block;
+    background-repeat:no-repeat;
+    background-position: 0 0;
+    font-size:1em;
+    vertical-align:middle;
+    cursor:pointer;
+  }
+  
+  input[type=checkbox].css-checkbox:checked + label.css-label {
+    background-position: 0 -15px;
+  }
+  
+  .css-label{
+    background-image:url(/assets/img/check.png);
+  }
+
+
+  
+
+  input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
+    padding-left:22px;
+    height:20px; 
+    display:inline-block;
+    line-height:20px;
+    background-repeat:no-repeat;
+    background-position: 0 0;
+    font-size:1em;
+    vertical-align:middle;
+      cursor:pointer;
+  }
+  
+  input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
+  
+      background-position: 0 -20px;
+  }
+
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@ -0,0 +1,471 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg);
+}
+body {
+  height: 100vh;
+  width: 100%;
+  font-family: _font(family);
+  font-weight: 300;
+  font-size: 1em;
+  color: var(--fg);
+  letter-spacing: _font(kerning);
+  background-color: var(--bg);
+}
+#main-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  -webkit-transition: filter var(--anim-speed) ease-in;
+  -moz-transition: filter var(--anim-speed) ease-in;
+  -ms-transition: filter var(--anim-speed) ease-in-out;
+  transition: filter var(--anim-speed) ease-in;
+  z-index: 1;
+}
+.content-wrapper {
+  max-width: var(--max-width);
+  margin: auto;
+}
+.wrapper {
+  margin: 20px 40px;
+}
+
+.hero {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-content: center;
+  background-color: transparent;
+  justify-content: center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 0;
+  position: relative;
+  min-height: 100vh;
+  width: 100vw;
+
+  .textcontainer {
+    background: var(--bg-alt);
+    background: linear-gradient(33deg, transparent 0%, var(--bg) 90%, transparent 90%);
+    border-radius: var(--border-radius);
+    max-width: var(--max-width);
+    padding: 0px 40px 40px 40px;
+    
+  }
+
+  div {
+    z-index: 10;
+    h1,
+    p {
+      flex: 1 0 100%;
+
+      z-index: 10;
+      color: var(--fg);
+      max-width: var(--max-width);
+      margin-top: 40px;
+    }
+
+    h1 {
+      font-size: 1.8em;
+    }
+  }
+  .imagecontainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../img/vignette.svg");
+    background-size: 960px;
+    background-repeat: repeat-x;
+    background-position: bottom;
+    z-index: 1;
+    h4 {
+      width: 90vw;
+      /* height: auto; */
+      /* min-height: 100px; */
+      line-height: 1.011em;
+      letter-spacing: -0em;
+      color: var(--bg);
+      font-size: 15vw;
+      display: inline;
+      opacity: 1;
+      border-radius: var(--border-radius);
+      position: absolute;
+      bottom: 0;
+      transform: rotate(-3deg);
+      overflow: hidden;
+      background: -webkit-linear-gradient(90deg, var(--bg) 25%,transparent 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      filter: blur(2px);
+    }
+  }
+  .splash {
+    background-color: transparent;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 40px;
+    align-items: flex-start;
+    max-width: var(--max-width);
+    margin: auto;
+      .description {
+        display: flex;
+        flex-wrap: wrap;
+        border-radius: var(--border-radius);
+        background: var(--bg-alt);
+        box-shadow: 15px 15px 28px 24px var(--bg-alt);
+        -webkit-box-shadow: 15px 15px 28px 24px var(--bg-alt);
+        -moz-box-shadow: 15px 15px 28px 24px var(--bg-alt);
+        > * {
+          margin: 40px !important;
+        }
+        > ul {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            
+            .button {
+              background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
+              background-size: 400% 400%;
+              -webkit-animation: backgroundBlink 7s ease infinite;
+              -moz-animation: backgroundBlink 7s ease infinite;
+              animation: backgroundBlink 7s ease infinite;
+              width: 100px;
+              height: 100px;
+              line-height: 100px;
+              margin: 0 0 10px 0;
+              padding:0;
+              font-size: 65px;
+            }
+        }
+        .mauticform_wrapper {
+          width: 200px;
+          .button {
+            border: 0;
+          }
+        }
+      }
+    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) {
+      text-align: center;
+      div {
+        
+        padding: 20px 0;
+      }
+      .splash-logo {
+        padding: 20px 0;
+      }
+
+    }
+    @media only screen and (max-width: 480px) {
+      
+      .description {
+        h1 {
+          font-size: 1.1em
+        }
+        > ul {
+        .button {
+          width: 75px;
+          height: 75px;
+          line-height: 75px;
+
+          font-size: 55px;
+        }
+      }
+      }
+    }
+  }
+}
+
+section {
+  .container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+  }
+  flex: 1 1 100%;
+  background-color: var(--bg);
+
+  z-index: 2;
+  h2 {
+    text-align: center;
+    padding: 40px 0;
+  }
+}
+section:first-of-type {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  margin-top: 0;
+  padding-top: 40px;
+}
+.section-title {
+  padding: 80px;
+}
+footer {
+  width: 100%;
+  padding: 160px 20px 200px 20px;
+  background-color: var(--border-alt);
+  color: var(--fg);
+  background-image: url("../img/vignette-footer.svg");
+  background-size: 500px;
+  background-repeat: repeat-x;
+  background-position: top;
+  box-sizing: border-box;
+  z-index: 2;
+  a {
+    color: var(--fg);
+  }
+  .icon {
+    color: var(--fg);
+    border: 1px solid var(--fg-alt);
+  }
+  .icon:hover {
+    border: 1px solid var(--accent2);
+    color: var(--accent2);
+
+  }
+  .footframe {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: var(--max-width);
+    margin: auto;
+    padding: 20px;
+
+    div {
+      flex: 0 1 300px;
+      margin-bottom: 80px;
+      img {
+        margin: auto;
+        display: block;
+        width: 100%;
+      }
+      li {
+       
+        line-height: 2;
+        font-size: 1.5em;
+        a {
+          font-weight: 700;
+          text-decoration: none;
+          color: var(--fg);
+        }
+        a:hover {
+          color: var(--accent2);
+        }
+
+      }
+    }
+
+    small {
+      flex: 0 0 100%;
+      box-sizing: border-box;
+      margin: 0;
+      text-align: center;
+      font-size: 0.8em;
+      .label {
+        display: none;
+      }
+    }
+  }
+  @media only screen and (max-width: 679px) {
+    .footframe {
+      justify-content: center;
+      div {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.post-navigation {
+  margin: 0;
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 40px;
+    align-items: flex-start;
+    max-width: var(--max-width);
+    margin: 0 auto;
+    h2 {
+      flex: 0 0 100%;
+      margin-top: 40px;
+      text-align: center;
+    }
+    .post-nav,
+    .post-nav-next {
+      flex: 1 0 200px;
+
+      h4 {
+        font-size: 2em;
+        justify-self: right;
+      }
+    }
+    .post-nav {
+      margin: 0 40px 0 0;
+      text-align: left;
+    }
+    .post-nav-next {
+      margin: 0 0 0 40px;
+      text-align: right;
+    }
+  }
+}
+// album index
+.releases {
+  padding: 80px 0;
+
+  .container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    h2 {
+      flex: 0 0 100%;
+      margin: 20px;
+    }
+    article {
+      flex: 0 1 280px;
+      max-width: 480px;
+      margin: 20px 0;
+    }
+    @media only screen and (max-width: 640px) {
+      
+      article {
+        max-width: unset;
+        min-width: 100%;
+        flex-grow: 1;
+        margin: 20px 0;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 5px;
+    }
+  }
+}
+
+// Streambox
+.streambox {
+  text-align: center;
+  line-height: 1em;
+  padding: 0;
+  padding-top: 80px;
+}
+.streamer {
+  max-width: var(--max-width);
+  margin: 80px auto;
+  padding: 0 40px;
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  p {
+    text-align: center !important;
+  }
+  .icon {
+    flex: 0 0 100px;
+    margin: 0;
+    justify-self: center;
+  }
+}
+
+
+#pleroma {
+  padding: 60px 0;
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+
+    border-radius: var(--border-radius);
+    justify-content: space-between;
+    div {
+      flex: 1 1 280px;
+      padding: 20px;
+      margin: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background-color: var(--bg-alt);
+      box-shadow: 15px 15px 28px 24px var(--border-alt);
+      border-radius: var(--border-radius);
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+      .date {
+        font-size: 0.6em;
+        margin-top: 10px;
+        img {
+          border-radius: 40px;
+          width: 40px;
+          height: 40px;
+        }
+      }
+      h2 {
+        padding-top: 0;
+        margin-bottom: 0px;
+
+      }
+      hr {
+
+        border: 1px solid var(--fg-alt);
+      }
+    }
+  }
+  @media only screen and (max-width: 720px) {
+      
+    .container {
+      width: 100vw;
+      justify-content: center;
+      div {
+        
+        flex: 1 1 280px;
+      }
+    }
+  }
+}
+.bio {
+  flex-wrap: wrap;
+  .mauticform_wrapper, .mauticform-input {
+    width: calc(100% - 80px);
+    max-width: 480px;
+    margin: 10px auto;
+    .button {
+      border: 0;
+    }
+  }
+}
+.mautic-focus {
+  font-family: 'Lucida Console', Monaco, monospace;
+  color: #3c2a52;
+  background-color: #3c2a52;
+}
--- a/_sass/_navigation.scss
+++ b/_sass/_navigation.scss
@ -0,0 +1,164 @@
+/* NAVIGATION */
+
+#navbar {
+  z-index: 10000;
+  display: block;
+}
+.logo {
+  filter: blur(20px);
+  opacity: 0;
+  text-decoration: none;
+  position: fixed;
+  top:0;
+  width: 100%;
+  height: 60px;
+  z-index: 100;
+  -webkit-transition: all var(--anim-speed) ease-in;
+  -moz-transition: all var(--anim-speed) ease-in;
+  -ms-transition: all var(--anim-speed) ease-in;
+  transition: all var(--anim-speed) ease-in;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 95% 95%;
+  -webkit-box-shadow: 0px 12px 32px -25px var(--border-alt);
+  -moz-box-shadow: 0px 12px 32px -25px var(--border-alt);
+  box-shadow: 0px 12px 32px -25px var(--border-alt);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  > a {
+    height: 40px;
+
+  }
+
+}
+.logo:hover {
+  filter: blur(0px);
+  opacity: 1;
+  -webkit-transition: all var(--anim-speed) ease-in;
+  -moz-transition: all var(--anim-speed) ease-in;
+  -ms-transition: all var(--anim-speed) ease-in;
+  transition: all var(--anim-speed) ease-in;
+  background-color: var(--bg);
+
+}
+.sticky {
+  filter: blur(0px);
+  opacity: 1;
+  background-color: var(--bg);
+  -webkit-transition: all var(--anim-speed) ease-in;
+  -moz-transition: all var(--anim-speed) ease-in;
+  -ms-transition: all var(--anim-speed) ease-in;
+  transition: all var(--anim-speed) ease-in;
+
+ }
+.navmenu {
+  margin: 0 40px 0 20px;
+  font-size: 34px;
+  color:var(--accent1);
+}
+ 
+ 
+nav {
+  position: absolute;
+  width: 300px;
+  max-height: 90vh;
+  max-width: 90vw;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--bg);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-wrap: wrap;
+  ul {
+    padding: 20px;
+    width: 100%
+  }
+  li {
+    list-style-type: none;
+    margin: 20px;
+    padding: 0;
+    a {
+      display: block;
+      font-size: 14px
+    }
+    .button {
+      display: block;
+    }
+  }
+ }
+ //.blurredout {
+  // filter: blur(5px);
+  // -webkit-transition: filter var(--anim-speed) ease-in;
+  // -moz-transition: filter var(--anim-speed) ease-in;
+  // transition: filter var(--anim-speed) ease-in;
+ // }
+
+.modalDialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--bg-alt);
+  z-index: 10;
+  opacity:0;
+  -webkit-transition: opacity var(--anim-speed) ease-in;
+  -moz-transition: opacity var(--anim-speed) ease-in;
+  -ms-transition: opacity var(--anim-speed) ease-in;
+  transition: opacity var(--anim-speed) ease-in;
+  pointer-events: none;
+  
+}
+
+.modalDialog:target {
+  opacity:1;
+  pointer-events: auto;
+}
+
+.modalDialog > div {
+
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: 100px auto;
+  padding: 20px;
+  border-radius: var(--border-radius);
+
+}
+
+.close-button {
+  background-color: var(--accent2);
+  color: var(--accent1);
+  margin: 0 auto;
+  line-height: 48px;
+  position: absolute;
+  right: -12px;
+  text-align: center;
+  top: -10px;
+  width: 48px;
+  height: 48px;
+  text-decoration: none;
+  font-weight: bold;
+  border-radius: 48px;
+  -webkit-transition: all var(--anim-speed) ease-in;
+  -moz-transition: all var(--anim-speed) ease-in;
+  -ms-transition: all var(--anim-speed) ease-in;
+  transition: all var(--anim-speed) ease-in;
+}
+
+.close-button:hover {   
+  background-color: var(--accent1); 
+  color: var(--accent2);
+
+}
+
+#closearea {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+
+}
--- a/_sass/_noscripts.scss
+++ b/_sass/_noscripts.scss
@ -0,0 +1,39 @@
+// NAvigation
+
+.logo, #sticky {
+  filter: blur(0px);
+  opacity: 1;
+  background-color: var(--bg);
+ }
+
+.blurredout {
+  filter: blur(0px);
+  opacity: 1;
+  background-color: var(--bg);
+  -webkit-transition: all var(--anim-speed) ease-in;
+  -moz-transition: all var(--anim-speed) ease-in;
+  -ms-transition: all var(--anim-speed) ease-in;
+  transition: all var(--anim-speed) ease-in;
+ }
+
+.hero {
+  padding-top: 120px;
+}
+
+// Player link
+.player-wrap {
+  display: none;
+}
+.noJSalbum {
+  display: unset;
+  flex: 0 1 400px;
+  border-radius: var(--border-radius);
+  width: 100%;
+}
+#fixed-player {
+  display: unset;
+  height: unset;
+}
+.hideWhenNoJS {
+  display: none;
+}
--- a/_sass/_player.scss
+++ b/_sass/_player.scss
@ -0,0 +1,344 @@
+/* Audio Player Styles
+================================================== */
+
+/* Default / Desktop / Firefox */
+.album-player {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column-reverse;
+  padding: 0px 40px;
+  justify-content: space-around;
+  flex-direction: row-reverse;
+  align-items: center;
+  max-width: var(--max-width);
+  margin: auto;
+  flex: 1 1 auto;
+  > div {
+    margin: 20px 0;
+    flex: 1 0 300px;
+  }
+  .description {
+
+  }
+}
+
+audio {
+  margin: 0;
+  width: 100%;
+}
+
+.player-wrap {
+  flex: 1 1 400px;
+  max-width: 700px;
+  border-radius: 5px;
+  width: 100%;
+  .shadow {
+    text-shadow: 0px 0px 15px var(--bg),0px 0px 15px var(--bg),0px 0px 30px var(--bg),0px 0px 45px var(--bg);
+  }
+}
+#plwrap {
+
+  ul {
+    list-style: none;
+    padding: 0;
+    li {
+      border-top: solid 1px var(--bg);
+
+    }
+    li:first-child {
+      border-radius: 5px 5px 0 0 ;
+    }
+    li:last-child {
+      border-radius: 0 0 5px 5px;
+      border-bottom: solid 1px var(--bg);
+    }
+  }
+}
+
+#audiowrap {
+  background-color: var(--bg);
+  margin: 0 auto 0 auto;
+}
+
+#plwrap {
+  margin: 0 auto;
+}
+
+#tracks {
+  flex: 1 0 200px;
+  min-height: 65px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  padding-top: 20px;
+}
+
+
+#nowPlay {
+  display: flex;
+  width: 100%;
+  height: 80px;
+  flex-wrap: unset;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--bg);
+
+}
+
+#npTitle {
+  flex: 1 1 100%;
+  margin: 0;
+  padding: 21px;
+
+}
+
+#npAction {
+  display: none;
+  margin: 0;
+  padding: 21px;
+  font-size: 12px;
+}
+
+#plList {
+  margin: 0;
+}
+
+#plList li {
+  background-color: var(--bg-alt);
+  cursor: pointer;
+  margin: 0;
+  padding: 21px 0;
+  border-left: 1px solid var(--bg);
+  border-right: 1px solid var(--bg);
+  border-top: 0;
+  transition: all 400ms ease-in-out;
+}
+
+#plList li:hover {
+  background-color: var(--accent2-alt);
+  color: var(--bg);
+  transition: all 400ms ease-in-out;
+}
+
+.plItem {
+  position: relative;
+}
+
+.plTitle {
+  left: 40px;
+  overflow: hidden;
+  position: absolute;
+  right: 65px;
+  text-overflow: ellipsis;
+  top: 0;
+  white-space: nowrap;
+  font-weight: bold;
+  padding-right: 10px;
+}
+
+.plNum {
+  padding-left: 20px;
+  width: 20px;
+}
+
+.plLength {
+  padding-left: 21px;
+  position: absolute;
+  right: 21px;
+  top: 0;
+}
+
+.plSel {
+  background-color: var(--accent1-alt)!important;
+  cursor: pointer!important;
+  color: var(--bg);
+}
+.plSel:hover {
+  background-color: var(--accent2-alt)!important;
+}
+
+
+a[id^="btn"] {
+  font-size: 1.5em;
+  color: var(--fg);
+  cursor: pointer;
+  margin: 0;
+  padding: 0 27px 0 21px;
+  text-decoration: none;
+}
+
+
+a[id^="btn"]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.coverart {
+  flex: 1 1 400px;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 700px;
+  #author {
+    margin: 40px 0 0 0;
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+.coverartwrapper {
+
+  width: 70%;
+  padding-top: 70%; /* 1:1 Aspect Ratio */
+  position: relative; /* If you want text inside of it */
+}
+ .coverartwrapped {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 100%;
+  padding-bottom: 0;
+  background-size: cover;
+  
+}
+.spinnit {
+
+  -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
+  -moz-animation: infiniteRotate 2s linear infinite;
+  animation: infiniteRotate 2s linear infinite;
+}
+
+.paused {
+  animation-play-state: paused;
+}
+
+.track-picker {
+  display: flex;
+  flex-wrap: wrap;
+  margin:0;
+  padding:0;
+  background-color: var(--accent1);
+  margin: 0;
+  padding: 0;
+  min-height: 50vh;
+  text-align: left;
+  .button {
+    background-color: var(--accent1);
+    color: var(--bg);
+  }
+  .button:hover {
+    background-color: var(--accent2);
+    
+  }
+  > div {
+    flex: 1 1 auto;
+    width: 50%;
+    min-width: 280px;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg);
+    -webkit-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
+    -moz-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
+    box-shadow: inset 0px 23px 25px -25px var(--border-alt);
+    
+    > h2, p {
+      text-align: left;
+      margin: 20px 40px;
+    }
+    p:last-child {
+      margin-bottom: 40px;
+    }
+  }
+
+  .full-image {
+    width: 50%;
+    min-width: 280px;
+    min-height: 50vh;
+    background-color: transparent;
+    background-size: cover;
+    background-position: center;
+  }
+
+}
+
+.track-picker:nth-child(even) {
+  flex-direction: row-reverse;
+  background-color: var(--accent2);
+  text-align: right;
+  .button {
+    background-color: var(--accent2);
+
+  }
+  .button:hover{
+    background-color: var(--accent1);
+
+  }
+  > div {
+    > h2, a, p {
+      text-align: right;
+
+    }
+  }
+}
+
+#fixedPlayer {
+  background-color: var(--bg);
+  margin: 0;
+  padding:0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100000;
+  -webkit-box-shadow: 0px 3px 35px 2px rgba(0,0,0,0.3);
+  -moz-box-shadow: 0px 3px 35px 2px rgba(0,0,0,0.3);
+  box-shadow: 0px 3px 35px 2px rgba(0,0,0,0.3);
+  -webkit-transition: all 400ms ease-in;
+  -moz-transition: all 400ms ease-in;
+  transition: all 400ms ease-in;
+}
+.showplayer {
+  height: 120px;
+
+}
+.hideplayer {
+  height: 0;
+}
+@media only screen and (max-width: 559px) {
+  .track-picker {
+    background-size: 100%;
+    .full-image {
+      min-height: 100vw;
+    }
+
+  }
+  #nowPlay {
+
+    align-items: baseline;
+    padding-bottom: 20px;
+  }
+  #tracks {
+    flex: 1 0 100px;
+    width: 100px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+  } 
+  a[id^="btn"] {
+    font-size: 1em;
+    color: var(--fg);
+    cursor: pointer;
+    margin: 0;
+    padding: 0 0 0 20px;
+    text-decoration: none;
+  }
+  #npTitle{
+
+    font-size: 0.8em;
+
+    text-decoration: none;
+    margin: 0;
+    padding: 0 0 0 20px;
+  }
+}
--- a/_sass/_set.scss
+++ b/_sass/_set.scss
@ -1,339 +1,12 @@
-
-
-/* Animation */
-@-webkit-keyframes infiniteRotate {    
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-@keyframes infinite-rotate {  
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-@-moz-keyframes infinite-rotate {  
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-
-
-@-webkit-keyframes backgroundBlink {
-  0%{background-position:73% 0%}
-  50%{background-position:28% 100%}
-  100%{background-position:73% 0%}
-}
-@-moz-keyframes backgroundBlink {
-  0%{background-position:73% 0%}
-  50%{background-position:28% 100%}
-  100%{background-position:73% 0%}
-}
-@keyframes backgroundBlink {
-  0%{background-position:73% 0%}
-  50%{background-position:28% 100%}
-  100%{background-position:73% 0%}
-}
-
-@-webkit-keyframes BackgroundFlow {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
-}
-@-moz-keyframes BackgroundFlow {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
-}
-@keyframes BackgroundFlow {
-  0%{background-position:0% 100%}
-  50%{background-position:100% 0%}
-  100%{background-position:0% 100%}
-}
-
-.slow-background {
-  -webkit-animation: BackgroundFlow 200s ease infinite;
-  -moz-animation: BackgroundFlow 200s ease infinite;
-  animation: BackgroundFlow 200s ease infinite;
-}
-
-.spinnit {
-
-  -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
-  -moz-animation: infiniteRotate 2s linear infinite;
-  animation: infiniteRotate 2s linear infinite;
-  }
-.paused {
-  animation-play-state: paused;
-}
-
-
-/* NAVIGATION */
-/* Style the navbar */
-#navbar {
-  z-index: 100000;
-}
-#logo {
-  padding:10px;
-  z-index: 10000;
-  -webkit-transition: filter 400ms ease-in;
-  -moz-transition: filter 400ms ease-in;
-  transition: filter 400ms ease-in;
-
-}
-.logo:hover {
-  filter: blur(0px);
-  -webkit-transition: filter 400ms ease-in;
-  -moz-transition: filter 400ms ease-in;
-  transition: filter 400ms ease-in;
-
-}
-.logo {
-  filter: blur(20px);
-  text-decoration: none;
-  position: fixed;
-  top:20px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 300px;
-  height: 95px;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 95% 95%;
-  -webkit-transition: all 400ms ease-in;
-  -moz-transition: all 400ms ease-in;
-  transition: all 400ms ease-in;
-  box-shadow: none;
-  border-radius: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-
-}
-.sticky {
-  filter: blur(0px);
-  -webkit-transition: filter 400ms ease-in;
-  -moz-transition: filter 400ms ease-in;
-  transition: filter 400ms ease-in;
-
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 95% 95%;
-  -webkit-transition: all 400ms ease-in;
-  -moz-transition: all 400ms ease-in;
-  transition: all 400ms ease-in;
-
- }
- 
-
-nav {
-  position: absolute;
-  width: 300px;
-
-  max-height: 90vh;
-  max-width: 90vw;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: _palette(bg);
-  border-radius: 20px;
-  padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
-
-
-  ul {
-    margin: auto;
-
-    width: 100%
-
-  }
-  li {
-    list-style-type: none;
-    margin: 10px;
-    width: 80%;
-    padding: 0;
-    a {
-      width: 100%;
-      display: block;
-      margin: auto !important;
-      font-size: 14px
-    }
-  }
- }
- .blurredout {
-  filter: blur(5px);
-  -webkit-transition: filter 400ms ease-in;
-  -moz-transition: filter 400ms ease-in;
-  transition: filter 400ms ease-in;
- }
-
- #wrapper {
-  -webkit-transition: filter 400ms ease-in;
-  -moz-transition: filter 400ms ease-in;
-  transition: filter 400ms ease-in;
- }
-.modalDialog {
-  position: fixed;
-  font-family: Arial, Helvetica, sans-serif;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: _palette(fg-light);
-  z-index: 11;
-  opacity:0;
-  -webkit-transition: opacity 400ms ease-in;
-  -moz-transition: opacity 400ms ease-in;
-  transition: opacity 400ms ease-in;
-  pointer-events: none;
-  
-}
-
-.modalDialog:target {
-  opacity:1;
-  pointer-events: auto;
-}
-
-.modalDialog > div {
-  width: 80%;
-  max-width: 1100px;
-  max-height: 80vh;
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin: 100px auto;
-  padding: 20px;
-  border-radius: 3px;
-  background: rgb(0, 31, 36);
-  background: -moz-linear-gradient(#000, rgb(0, 31, 36));
-  background: -webkit-linear-gradient(#000, rgb(0, 31, 36));
-  background: -o-linear-gradient(#000, rgb(0, 31, 36));
-}
-
-
-.close-button {
-  background-color: #FFFFFF;
-  color: _palette(accent-dark);
-  line-height: 48px;
-  position: absolute;
-  right: -12px;
-  text-align: center;
-  top: -10px;
-  width: 48px;
-  height: 48px;
-  text-decoration: none;
-  font-weight: bold;
-  -webkit-border-radius: 48px;
-  -moz-border-radius: 48px;
-  border-radius: 48px;
-  -moz-box-shadow: 1px 1px 3px #000;
-  -webkit-box-shadow: 1px 1px 3px #000;
-  box-shadow: 1px 1px 3px #000;
-  transition: all 400ms ease-in;
-}
-
-.close-button:hover { 
-  background-color: _palette(accent); 
-  color: #FFFFFF;
-}
-
-#closearea {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-
-}
-.navmenu {
-  font-size: 34px;
-  color:_palette(accent);
-}
-
-//* POSTS *//
-
-#post-text {
-  padding-top: 1rem;
-}
-//* FOOTER *//
-
-#footer {
-
-  background-color: _palette(fg);
-  color: _palette(bg);
-  box-shadow: inset 0 10px 10px 0 rgba(0, 45, 107, 0.25) !important;
-
-  h1, h2, h3, h4, h5, p, a, strong {
-    color: _palette(bg);
-  }
-  a {
-    text-decoration: none;
-  }
-
-  .footflex {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    div {
-      text-align: left;
-      flex: 0 1 300px;
-      max-width: 300px;
-      margin: 80px 80px 0 80px;
-
-      ul {
-        margin: 0;
-        padding: 0;
-      }
-      li {
-        list-style: none;
-        border-bottom: 1px solid _palette(bg);
-        line-height: 3em;
-        margin: 0;
-        padding: 0;
-      }
-    }
-  }
-  .style2 {
-    &:before {
-    box-shadow: inset 0 0 0 _size(border-width) _palette(bg);
-    }
-  }
-  .style2:hover {
-    &:before {
-    box-shadow: inset 0 0 0 _size(border-width) _palette(accent);
-    }
-  }
-}
-
-/* AUTHOR */
-
-#author {
-  .bio {
-    padding-right: 20px;
-    p {
-      color: _palette(fg);
-    }
-  }
-
-}
-
-/* Content images */
-div.content {
-  img {
-    width: 100%;
-    height: auto;
-    max-width: 500px;
-  }
-}
-
-/* Cloudcannon editor links */
+//* Cloudcannon *//

 .editor-link {
  display: none;
- margin-top: 0;
- padding-top: 30px;
+  margin-top: 0;
+  padding-top: 30px;
 .btn {
   border: 0;
-   border-radius: 2px;
+   border-radius: var(--border-radius);
   width: 100%;
   max-width: 500px;
   box-sizing: border-box;
@ -345,7 +18,6 @@ div.content {
   background-color: #f7e064;
   color: #333;
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
-
   &:hover {
     background-color: #f4d525;
     color: #333;
@ -357,129 +29,6 @@ div.content {
  display: block;
 }

-/* cookies */
-
-#cookie-notice {
-  padding: 15px;
+.noJSalbum {
  display: none;
-  text-align: right;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  background-color: _palette(accent-dark);
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-content: center;
-  align-items: center;
-  z-index: 1000;
-
-  p {
-    flex: 1 0 250px;
-    margin: 0;
-    font-size: 12px;
-    font-family: monospace;
-  }
-  @media only screen and (max-width: 569px) {
-    p {
-      text-align: center;
-    }
-  }
-}
-
-.yes {
-  flex: 0 0 250px;
-
-  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-  border-radius: 0.375em;
-  border: 0;
-  color: #000 !important;
-  background-position-x: 0%;
-  background-position-y: 0%;
-  background-repeat: repeat;
-  background-attachment: scroll;
-  background-image: linear-gradient(228deg, _palette(bg), _palette(fg));
-  background-origin: padding-box;
-  background-clip: border-box;
-
-  background-size: 400% 400%;
-  -webkit-animation: backgroundBlink 2s ease infinite;
-  -moz-animation: backgroundBlink 2s ease infinite;
-  animation: backgroundBlink 2s ease infinite;
-  margin: 20px;
-
-}
-.yes:hover {
-  color: #000 !important;
-}
-
-/* Background Video */
-.fullscreen-bg {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  z-index: -100;
-  background: #fff;
-}
-
-.fullscreen-bg__video {
-  background: #fff;
-  position: relative;
-  left: 50%;
-  top:50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-}
-
-/* Post Navigation */
-
-.post-nav {
-  /* Insert your custom styling here. Example:
-
-     font-size: 14px;
-     margin-bottom: 1em;
-  */
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-}
-.post-nav div {
-  /* flex-grow, flex-shrink, flex-basis */
-  flex: 0 1 300px;
-
-}
-.post-nav-next {
-  text-align: right;
-}
-
-
-/* Stream links */ 
-.streambox {
- 
-    display: block;
-    text-align: center;
-
-  .streamer {
-    list-style-type:none;
-    display:flex;
-    justify-content: center;
-    flex-wrap: wrap;
-
-    a {
-      flex: 1 0 150px;
-      margin:10px;
-    }
-    .button {
-      display: block;
-      flex: unset;
-    }
-    h3 {
-      flex: unset;
-    }
-  }
-}
-
+}
--- a/_sass/_videos.scss
+++ b/_sass/_videos.scss
@ -0,0 +1,33 @@
+/* Background Video */
+.fullscreen-bg {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
+  background: var(--bg);
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+
+}
+
+.fullscreen-bg__video {
+  object-fit: cover;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  
+
+}
+#myVideo {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  
+}
--- a/_sass/base/_page.scss
+++ b/_sass/base/_page.scss
@ -1,47 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Basic */
-
-	// MSIE: Required for IEMobile.
-		@-ms-viewport {
-			width: device-width;
-		}
-
-	// MSIE: Prevents scrollbar from overlapping content.
-		body {
-			-ms-overflow-style: scrollbar;
-		}
-
-	// Ensures page width is always >=320px.
-		@include breakpoint('<=xsmall') {
-			html, body {
-				min-width: 320px;
-			}
-		}
-
-	// Set box model to border-box.
-	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
-		html {
-			box-sizing: border-box;
-		}
-
-		*, *:before, *:after {
-			box-sizing: inherit;
-		}
-
-	body {
-		background: _palette(bg);
-
-		// Stops initial animations until page loads.
-			&.is-preload {
-				*, *:before, *:after {
-					@include vendor('animation', 'none !important');
-					@include vendor('transition', 'none !important');
-				}
-			}
-
-	}
--- a/_sass/base/_reset.scss
+++ b/_sass/base/_reset.scss
@ -1,76 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-// Reset.
-// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
-
-	html, body, div, span, applet, object,
-	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
-	pre, a, abbr, acronym, address, big, cite,
-	code, del, dfn, em, img, ins, kbd, q, s, samp,
-	small, strike, strong, sub, sup, tt, var, b,
-	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
-	form, label, legend, table, caption, tbody,
-	tfoot, thead, tr, th, td, article, aside,
-	canvas, details, embed, figure, figcaption,
-	footer, header, hgroup, menu, nav, output, ruby,
-	section, summary, time, mark, audio, video {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		font-size: 100%;
-		font: inherit;
-		vertical-align: baseline;
-	}
-
-	article, aside, details, figcaption, figure,
-	footer, header, hgroup, menu, nav, section {
-		display: block;
-	}
-
-	body {
-		line-height: 1;
-	}
-
-	ol, ul {
-		list-style:none;
-	}
-
-	blockquote,	q {
-		quotes: none;
-
-		&:before,
-		&:after {
-			content: '';
-			content: none;
-		}
-	}
-
-	table {
-		border-collapse: collapse;
-		border-spacing: 0;
-	}
-
-	body {
-		-webkit-text-size-adjust: none;
-	}
-
-	mark {
-		background-color: transparent;
-		color: inherit;
-	}
-
-	input::-moz-focus-inner {
-		border: 0;
-		padding: 0;
-	}
-
-	input, select, textarea {
-		-moz-appearance: none;
-		-webkit-appearance: none;
-		-ms-appearance: none;
-		appearance: none;
-	}
--- a/_sass/base/_typography.scss
+++ b/_sass/base/_typography.scss
@ -1,234 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Type */
-
-	html {
-		font-size: 18pt;
-
-		@include breakpoint('<=xlarge') {
-			font-size: 20pt;
-		}
-
-		@include breakpoint('<=large') {
-			font-size: 18pt;
-		}
-
-		@include breakpoint('<=small') {
-			font-size: 17pt;
-		}
-
-		@include breakpoint('<=xxsmall') {
-			font-size: 17pt;
-		}
-	}
-
-	body {
-
-    background-size: 20%;
-    background-repeat: repeat;
-		color: _palette(fg);
-	}
-
-	body, input, select, textarea {
-		font-family: _font(family-fixed);
-		font-size: 0.75rem;
-		font-weight: _font(weight);
-		line-height: 1.45;
-	}
-
-	a {
-		@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
-		text-decoration: underline;
-
-		&:hover {
-			text-decoration: none;
-		}
-	}
-
-	strong, b {
-		font-weight: _font(weight-bold);
-	}
-
-	em, i {
-		font-style: italic;
-	}
-
-	p {
-		margin: 0 0 _size(element-margin) 0;
-
-		&.major {
-			font-size: 1.25rem;
-		}
-	}
-
-	h1, h2, h3, h4, h5, h6 {
-		font-weight: _font(weight-bold);
-		line-height: 1.375;
-		letter-spacing: _font(kerning);
-    margin: 0 0 (_size(element-margin) * 0.5) 0;
-    font-family: _font(family);
-
-		a {
-			color: inherit;
-			text-decoration: none;
-		}
-	}
-
-	h1 {
-		font-size: 3.5rem;
-		line-height: 1.2;
-	}
-
-	h2 {
-		font-size: 2.25rem;
-	}
-
-	h3 {
-		font-size: 1.5rem;
-	}
-
-	h4 {
-		font-size: 1.1rem;
-	}
-
-	h5 {
-		font-size: 0.9rem;
-	}
-
-	h6 {
-		font-size: 0.7rem;
-	}
-
-	sub {
-		font-size: 0.8rem;
-		position: relative;
-		top: 0.5rem;
-	}
-
-	sup {
-		font-size: 0.8rem;
-		position: relative;
-		top: -0.5rem;
-	}
-
-	blockquote {
-		border-left: solid (_size(border-width) * 4);
-		font-style: italic;
-		margin: 0 0 _size(element-margin) 0;
-		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
-	}
-
-	code {
-		border-radius: _size(border-radius);
-		font-family: _font(family-fixed);
-		font-size: 0.9em;
-		margin: 0 0.25rem;
-		padding: 0.25rem 0.325rem;
-	}
-
-	pre {
-		-webkit-overflow-scrolling: touch;
-		font-family: _font(family-fixed);
-		font-size: 0.9em;
-		margin: 0 0 _size(element-margin) 0;
-
-		code {
-			display: block;
-			line-height: 1.5;
-			padding: 0.75rem 1rem;
-			overflow-x: auto;
-		}
-	}
-
-	hr {
-		border: 0;
-		border-bottom: solid _size(border-width);
-		margin: (_size(element-margin) * 1.25) 0;
-
-		&.major {
-			margin: (_size(element-margin) * 1.75) 0;
-		}
-	}
-
-	.align-left {
-		text-align: left;
-	}
-
-	.align-center {
-		text-align: center;
-	}
-
-	.align-right {
-		text-align: right;
-	}
-
-	@include breakpoint('<=small') {
-		p {
-			&.major {
-				font-size: 1.1rem;
-			}
-		}
-
-		h1 {
-			font-size: 2.5rem;
-		}
-
-		h2 {
-			font-size: 2rem;
-		}
-
-		h3 {
-			font-size: 1.25rem;
-		}
-
-		h4 {
-			font-size: 1rem;
-		}
-	}
-
-	@mixin color-typography($p: null) {
-
-		@if $p != null {
-			background-color: _palette($p, bg);
-			color: _palette($p, fg);
-		}
-
-		input, select, textarea {
-			color: _palette($p, fg-bold);
-		}
-
-		a {
-			color: _palette($p, fg-bold);
-
-			&:hover {
-				color: _palette($p, accent);
-			}
-		}
-
-		strong, b {
-			color: _palette($p, fg-bold);
-		}
-
-		h1, h2, h3, h4, h5, h6 {
-			color: _palette($p, fg-bold);
-		}
-
-		blockquote {
-			border-left-color: _palette($p, border);
-		}
-
-		code {
-			background: _palette($p, border-bg);
-			border-color: _palette($p, border);
-		}
-
-		hr {
-			border-bottom-color: _palette($p, border);
-		}
-	}
-
-	@include color-typography;
--- a/_sass/components/_actions.scss
+++ b/_sass/components/_actions.scss
@ -1,101 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Actions */
-
-	ul.actions {
-		@include vendor('display', 'flex');
-		cursor: default;
-		list-style: none;
-		margin-left: (_size(element-margin) * -0.5);
-		padding-left: 0;
-
-		li {
-			padding: 0 0 0 (_size(element-margin) * 0.5);
-			vertical-align: middle;
-		}
-
-		&.special {
-			@include vendor('justify-content', 'center');
-			width: 100%;
-			margin-left: 0;
-
-			li {
-				&:first-child {
-					padding-left: 0;
-				}
-			}
-		}
-
-		&.stacked {
-			@include vendor('flex-direction', 'column');
-			margin-left: 0;
-
-			li {
-				padding: (_size(element-margin) * 0.65) 0 0 0;
-
-				&:first-child {
-					padding-top: 0;
-				}
-			}
-		}
-
-		&.fit {
-			width: calc(100% + #{_size(element-margin) * 0.5});
-
-			li {
-				@include vendor('flex-grow', '1');
-				@include vendor('flex-shrink', '1');
-				width: 100%;
-
-				> * {
-					width: 100%;
-				}
-			}
-
-			&.stacked {
-				width: 100%;
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			&:not(.fixed) {
-				@include vendor('flex-direction', 'column');
-				margin-left: 0;
-				width: 100% !important;
-
-				li {
-					@include vendor('flex-grow', '1');
-					@include vendor('flex-shrink', '1');
-					padding: (_size(element-margin) * 0.5) 0 0 0;
-					text-align: center;
-					width: 100%;
-
-					> * {
-						width: 100%;
-					}
-
-					&:first-child {
-						padding-top: 0;
-					}
-
-					input[type="submit"],
-					input[type="reset"],
-					input[type="button"],
-					button,
-					.button {
-						width: 100%;
-
-						&.icon {
-							&:before {
-								margin-left: -0.5rem;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
--- a/_sass/components/_banner.scss
+++ b/_sass/components/_banner.scss
@ -1,990 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Banner (transitions) */
-
-	.banner {
-
-		// Mixin.
-			@mixin transition-banner($event) {
-				$x: null;
-				$y: null;
-
-				@if ($event == 'load') {
-					$x: 'body.is-preload &';
-					$y: _duration(on-load);
-				}
-				@else if ($event == 'scroll') {
-					$x: '&.is-inactive';
-					$y: _duration(on-scroll);
-				}
-
-				// Content.
-					&.on#{$event}-content-fade-up {
-						.content {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-						}
-
-						#{$x} {
-							.content {
-								@include vendor('transform', 'translateY(1rem)');
-								opacity: 0;
-							}
-						}
-					}
-
-					&.on#{$event}-content-fade-down {
-						.content {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-						}
-
-						#{$x} {
-							.content {
-								@include vendor('transform', 'translateY(-1rem)');
-								opacity: 0;
-							}
-						}
-					}
-
-					&.on#{$event}-content-fade-left {
-						.content {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-						}
-
-						#{$x} {
-							.content {
-								@include vendor('transform', 'translateX(1rem)');
-								opacity: 0;
-							}
-						}
-					}
-
-					&.on#{$event}-content-fade-right {
-						.content {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-						}
-
-						#{$x} {
-							.content {
-								@include vendor('transform', 'translateX(-1rem)');
-								opacity: 0;
-							}
-						}
-					}
-
-					&.on#{$event}-content-fade-in {
-						.content {
-							@include vendor('transition', 'opacity #{$y} ease-in-out');
-						}
-
-						#{$x} {
-							.content {
-								opacity: 0;
-							}
-						}
-					}
-
-				// Image.
-					&.on#{$event}-image-fade-up {
-						.image {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-								@include vendor('transition-delay', '#{$y * 0.75}');
-							}
-						}
-
-						#{$x} {
-							.image {
-								@include vendor('transform', 'translateY(1rem)');
-								opacity: 0;
-
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-
-					&.on#{$event}-image-fade-down {
-						.image {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-								@include vendor('transition-delay', '#{$y * 0.75}');
-							}
-						}
-
-						#{$x} {
-							.image {
-								@include vendor('transform', 'translateY(-1rem)');
-								opacity: 0;
-
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-
-					&.on#{$event}-image-fade-left {
-						.image {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-								@include vendor('transition-delay', '#{$y * 0.75}');
-							}
-						}
-
-						#{$x} {
-							.image {
-								@include vendor('transform', 'translateX(1rem)');
-								opacity: 0;
-
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-
-					&.on#{$event}-image-fade-right {
-						.image {
-							@include vendor('transition', (
-								'opacity #{$y} ease-in-out',
-								'transform #{$y} ease-in-out'
-							));
-
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-								@include vendor('transition-delay', '#{$y * 0.75}');
-							}
-						}
-
-						#{$x} {
-							.image {
-								@include vendor('transform', 'translateX(-1rem)');
-								opacity: 0;
-
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-
-					&.on#{$event}-image-fade-in {
-						.image {
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-							}
-						}
-
-						#{$x} {
-							.image {
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-
-			}
-
-		// On Load.
-			@include transition-banner('load');
-
-		// On Scroll.
-			@include transition-banner('scroll');
-
-	}
-
-/* Banner (style1) */
-
-	.banner.style1 {
-		@include vendor('align-items', 'stretch');
-		@include vendor('display', 'flex');
-		@include vendor('flex-direction', 'row');
-		@include vendor('justify-content', 'flex-end');
-		position: relative;
-		text-align: left;
-		overflow-x: hidden;
-
-		.content {
-			@include padding(_size(padding, default), _size(padding, default));
-			@include vendor('align-self', 'center');
-			@include vendor('flex-grow', '1');
-			@include vendor('flex-shrink', '1');
-			width: 50%;
-			max-width: (_size(inner) * 0.75);
-			margin: 0 auto;
-		}
-
-		.image {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			border-radius: 0;
-			width: 50%;
-
-			img {
-				@include vendor('object-fit', 'cover');
-				@include vendor('object-position', 'center');
-				display: block;
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 0;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			.content {
-				@include padding(_size(padding, xlarge), _size(padding, xlarge));
-			}
-		}
-
-		@include breakpoint('<=large') {
-			.content {
-				@include padding(_size(padding, large), _size(padding, large));
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			.content {
-				@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
-			}
-		}
-
-		@include breakpoint('<=small') {
-			.content {
-				@include padding(_size(padding, small) * 1.25, _size(padding, small));
-			}
-		}
-
-		@include orientation(portrait) {
-			@include vendor('flex-direction', 'column-reverse');
-			text-align: center;
-
-			.content {
-				@include vendor('display', 'flex');
-				@include vendor('flex-direction', 'column');
-				@include vendor('justify-content', 'center');
-				width: 100%;
-				max-width: 100%;
-			}
-
-			.image {
-				width: 100%;
-				max-width: 100%;
-				height: 45vh;
-			}
-		}
-
-		// Modifiers.
-
-			// Size.
-				&.fullscreen {
-					min-height: 100vh;
-
-					@include orientation(portrait) {
-						.content {
-							min-height: 50vh;
-						}
-
-						.image {
-							height: 50vh;
-						}
-					}
-				}
-
-			// Orientation.
-				&.orient-left {
-					// ...
-				}
-
-				&.orient-right {
-					@include vendor('flex-direction', 'row-reverse');
-
-					@include orientation(portrait) {
-						@include vendor('flex-direction', 'column-reverse');
-					}
-				}
-
-			// Content Alignment.
-				&.content-align-left {
-					// ...
-				}
-
-				&.content-align-center {
-					text-align: center;
-				}
-
-				&.content-align-right {
-					text-align: right;
-
-					@include orientation(portrait) {
-						text-align: center;
-					}
-				}
-
-			// Image Position.
-				&.image-position-left {
-					.image {
-						img {
-							@include vendor('object-position', 'left');
-						}
-					}
-				}
-
-				&.image-position-center {
-					.image {
-						img {
-							// ...
-						}
-					}
-				}
-
-				&.image-position-right {
-					.image {
-						img {
-							@include vendor('object-position', 'right');
-						}
-					}
-				}
-
-	}
-
-/* Banner (style2) */
-
-	.banner.style2 {
-		@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
-		@include vendor('align-items', 'center');
-		@include vendor('display', 'flex');
-		@include vendor('justify-content', 'center');
-		background-color: _palette(border-darken);
-		position: relative;
-		text-align: center;
-		overflow-x: hidden;
-
-		.content {
-			@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
-			position: relative;
-			width: (_size(inner) * 0.625);
-			max-width: 100%;
-			background-color: inherit;
-			border-radius: _size(border-radius-alt);
-			margin-bottom: _size(element-margin);
-			z-index: 1;
-		}
-
-		.image {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-			border-radius: 0;
-
-			img {
-				@include vendor('object-fit', 'cover');
-				@include vendor('object-position', 'center');
-				display: block;
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 0;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
-
-			.content {
-				@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
-			}
-		}
-
-		@include breakpoint('<=large') {
-			@include padding(_size(padding, large), _size(padding, large) * 0.75);
-
-			.content {
-				@include padding(_size(padding, large), _size(padding, large) * 0.75);
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			@include padding(_size(padding, medium), _size(padding, medium));
-
-			.content {
-				@include padding(_size(padding, medium) * 1.25, _size(padding, medium) * 0.75);
-			}
-		}
-
-		@include breakpoint('<=small') {
-			@include padding(_size(padding, small), _size(padding, small));
-
-			.content {
-				@include padding(_size(padding, small) * 1.25, _size(padding, small) * 0.75);
-			}
-		}
-
-		// Modifiers.
-
-			// Size.
-				&.fullscreen {
-					min-height: 80vh;
-				}
-
-			// Orientation.
-				&.orient-left {
-					@include vendor('justify-content', 'flex-start');
-					padding-left: 0;
-
-					.content {
-						border-top-left-radius: 0;
-						border-bottom-left-radius: 0;
-					}
-				}
-
-				&.orient-center {
-					// ...
-				}
-
-				&.orient-right {
-					@include vendor('justify-content', 'flex-end');
-					padding-right: 0;
-
-					.content {
-						border-top-right-radius: 0;
-						border-bottom-right-radius: 0;
-					}
-				}
-
-			// Content Alignment.
-				&.content-align-left {
-					text-align: left;
-				}
-
-				&.content-align-center {
-					// ...
-				}
-
-				&.content-align-right {
-					text-align: right;
-				}
-
-			// Image Position.
-				&.image-position-left {
-					.image {
-						img {
-							@include vendor('object-position', 'left');
-						}
-					}
-				}
-
-				&.image-position-center {
-					.image {
-						img {
-							// ...
-						}
-					}
-				}
-
-				&.image-position-right {
-					.image {
-						img {
-							@include vendor('object-position', 'right');
-						}
-					}
-				}
-
-	}
-
-/* Banner (style3) */
-
-	.banner.style3 {
-		$image-size: 21rem;
-		$content-size: (_size(inner) * 0.875) - $image-size - (_size(element-margin) * 1.75);
-
-		@include padding(_size(padding, default), _size(padding, default));
-		@include vendor('align-items', 'center');
-		@include vendor('display', 'flex');
-		@include vendor('flex-direction', 'row-reverse');
-		@include vendor('justify-content', 'center');
-		position: relative;
-		text-align: left;
-		overflow-x: hidden;
-
-		.content {
-			width: $content-size;
-			max-width: 100%;
-		}
-
-		.image {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			width: $image-size;
-			height: $image-size;
-			border-radius: 100%;
-			margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0;
-
-			img {
-				@include vendor('object-fit', 'cover');
-				@include vendor('object-position', 'center');
-				display: block;
-				width: 100%;
-				height: 100%;
-				border-radius: 100%;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			@include padding(_size(padding, xlarge), _size(padding, xlarge));
-		}
-
-		@include breakpoint('<=large') {
-			@include padding(_size(padding, large), _size(padding, large));
-		}
-
-		@include breakpoint('<=medium') {
-			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
-
-			.image {
-				width: ($image-size * 0.875);
-				height: ($image-size * 0.875);
-			}
-		}
-
-		@include breakpoint('<=small') {
-			@include padding(_size(padding, small) * 1.25, _size(padding, small));
-			@include vendor('align-items', 'flex-start');
-
-			.image {
-				width: ($image-size * 0.75);
-				height: ($image-size * 0.75);
-				margin: 0 (_size(element-margin) * 1) _size(element-margin) 0;
-			}
-		}
-
-		@include orientation(portrait) {
-			@include vendor('align-items', 'center');
-			@include vendor('flex-direction', 'column-reverse');
-			text-align: center;
-
-			.content {
-				width: 34rem;
-				max-width: 100%;
-			}
-
-			.image {
-				margin-right: 0;
-			}
-		}
-
-		// Modifiers.
-
-			// Size.
-				&.fullscreen {
-					min-height: 100vh;
-				}
-
-			// Orientation.
-				&.orient-left {
-					@include vendor('flex-direction', 'row');
-
-					.image {
-						margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75);
-					}
-
-					@include breakpoint('<=small') {
-						.image {
-							margin: 0 0 _size(element-margin) (_size(element-margin) * 1);
-						}
-					}
-
-					@include orientation(portrait) {
-						@include vendor('flex-direction', 'column-reverse');
-
-						.image {
-							margin-left: 0;
-						}
-					}
-				}
-
-				&.orient-right {
-					// ...
-				}
-
-			// Content Alignment.
-				&.content-align-left {
-					// ...
-				}
-
-				&.content-align-center {
-					text-align: center;
-				}
-
-				&.content-align-right {
-					text-align: right;
-				}
-
-			// Image Position.
-				&.image-position-left {
-					.image {
-						img {
-							@include vendor('object-position', 'left');
-						}
-					}
-				}
-
-				&.image-position-center {
-					// ...
-				}
-
-				&.image-position-right {
-					.image {
-						img {
-							@include vendor('object-position', 'right');
-						}
-					}
-				}
-
-	}
-
-/* Banner (style4) */
-
-	.banner.style4 {
-		$image-width: 13rem;
-		$content-size: (_size(inner) * 0.75) - $image-width - (_size(element-margin) * 1.75);
-
-		@include padding(_size(padding, default), _size(padding, default));
-		@include vendor('align-items', 'center');
-		@include vendor('display', 'flex');
-		@include vendor('flex-direction', 'row-reverse');
-		@include vendor('justify-content', 'center');
-		position: relative;
-		text-align: left;
-		overflow-x: hidden;
-
-		.content {
-			width: $content-size;
-			max-width: 100%;
-		}
-
-		.image {
-			@include phone($image-width);
-			margin-right: (_size(element-margin) * 1.75);
-		}
-
-		@include breakpoint('<=xlarge') {
-			@include padding(_size(padding, xlarge), _size(padding, xlarge));
-		}
-
-		@include breakpoint('<=large') {
-			@include padding(_size(padding, large), _size(padding, large));
-		}
-
-		@include breakpoint('<=medium') {
-			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
-
-			.image {
-				@include resize-phone($image-width, 0.875);
-			}
-		}
-
-		@include breakpoint('<=small') {
-			@include padding(_size(padding, small) * 1.25, _size(padding, small));
-			@include vendor('align-items', 'flex-start');
-
-			.image {
-				@include resize-phone($image-width, 0.625);
-			}
-		}
-
-		@include orientation(portrait) {
-			@include vendor('align-items', 'center');
-			@include vendor('flex-direction', 'column-reverse');
-			text-align: center;
-
-			.content {
-				width: 34rem;
-				max-width: 100%;
-			}
-
-			.image {
-				margin-right: 0;
-				margin-left: 0;
-			}
-		}
-
-		// Modifiers.
-
-			// Size.
-				&.fullscreen {
-					min-height: 100vh;
-				}
-
-			// Variant.
-				&.iphone {
-					// ...
-				}
-
-				&.android {
-					// ...
-				}
-
-			// Orientation.
-				&.orient-left {
-					@include vendor('flex-direction', 'row');
-
-					.image {
-						margin-right: 0;
-						margin-left: (_size(element-margin) * 1.75);
-					}
-
-					@include orientation(portrait) {
-						@include vendor('flex-direction', 'column-reverse');
-
-						.image {
-							margin-right: 0;
-							margin-left: 0;
-						}
-					}
-				}
-
-				&.orient-right {
-					// ...
-				}
-
-			// Content Alignment.
-				&.content-align-left {
-					// ...
-				}
-
-				&.content-align-center {
-					text-align: center;
-				}
-
-				&.content-align-right {
-					text-align: right;
-				}
-
-			// Image Position.
-				&.image-position-left {
-					.image {
-						img {
-							@include vendor('object-position', 'left');
-						}
-					}
-				}
-
-				&.image-position-center {
-					// ...
-				}
-
-				&.image-position-right {
-					.image {
-						img {
-							@include vendor('object-position', 'right');
-						}
-					}
-				}
-
-	}
-
-/* Banner (style5) */
-
-	.banner.style5 {
-		@include padding(_size(padding, default), _size(padding, default));
-		@include vendor('align-items', 'center');
-		@include vendor('display', 'flex');
-		@include vendor('justify-content', 'center');
-		background-color: inherit;
-		position: relative;
-		text-align: center;
-		overflow-x: hidden;
-
-		.content {
-			position: relative;
-			width: (_size(inner) * 0.625);
-			max-width: 100%;
-			margin-bottom: _size(element-margin);
-			z-index: 1;
-		}
-
-		.image {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-			border-radius: 0;
-			opacity: 0.1;
-
-			img {
-				@include vendor('object-fit', 'cover');
-				@include vendor('object-position', 'center');
-				display: block;
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 0;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			@include padding(_size(padding, xlarge), _size(padding, xlarge));
-		}
-
-		@include breakpoint('<=large') {
-			@include padding(_size(padding, large), _size(padding, large));
-		}
-
-		@include breakpoint('<=medium') {
-			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
-		}
-
-		@include breakpoint('<=small') {
-			@include padding(_size(padding, small) * 1.25, _size(padding, small));
-		}
-
-		// Modifiers.
-
-			// Size.
-				&.fullscreen {
-					min-height: 80vh;
-				}
-
-			// Content Alignment.
-				&.content-align-left {
-					text-align: left;
-				}
-
-				&.content-align-center {
-					// ...
-				}
-
-				&.content-align-right {
-					text-align: right;
-				}
-
-			// Image Position.
-				&.image-position-left {
-					.image {
-						img {
-							@include vendor('object-position', 'left');
-						}
-					}
-				}
-
-				&.image-position-center {
-					// ...
-				}
-
-				&.image-position-right {
-					.image {
-						img {
-							@include vendor('object-position', 'right');
-						}
-					}
-				}
-
-	}
-
-// Mixin
-
-	@mixin color-banner($p: null) {
-		.banner {
-			.image {
-				background-color: transparentize(_palette($p, fg-bold), 0.875);
-			}
-
-			@if ($p != 'invert') {
-				&.invert {
-					.image {
-						background-color: transparentize(_palette(invert, fg-bold), 0.875);
-					}
-				}
-			}
-		}
-
-		.banner.style4 {
-			.image {
-				@include color-phone($p);
-			}
-
-			// Variant.
-				&.iphone {
-					.image {
-						@include color-phone-variant('iphone', $p);
-					}
-				}
-
-				&.android {
-					.image {
-						@include color-phone-variant('android', $p);
-					}
-				}
-
-			@if ($p != 'invert') {
-				&.invert {
-					.image {
-						@include color-phone(invert);
-					}
-
-					// Variant.
-						&.iphone {
-							.image {
-								@include color-phone-variant('iphone', invert);
-							}
-						}
-
-						&.android {
-							.image {
-								@include color-phone-variant('android', invert);
-							}
-						}
-
-				}
-			}
-		}
-	}
-
-	@include color-banner;
--- a/_sass/components/_box.scss
+++ b/_sass/components/_box.scss
@ -1,34 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Box */
-
-	.box {
-		border-radius: _size(border-radius);
-		border: solid _size(border-width);
-		margin-bottom: _size(element-margin);
-		padding: 1.5rem;
-
-		> :last-child,
-		> :last-child > :last-child,
-		> :last-child > :last-child > :last-child {
-			margin-bottom: 0;
-		}
-
-		&.alt {
-			border: 0;
-			border-radius: 0;
-			padding: 0;
-		}
-	}
-
-	@mixin color-box($p: null) {
- 		.box {
- 			border-color: _palette($p, border);
- 		}
-	}
-
-	@include color-box;
--- a/_sass/components/_button.scss
+++ b/_sass/components/_button.scss
@ -1,121 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Button */
-
-	input[type="submit"],
-	input[type="reset"],
-	input[type="button"],
-	button,
-	.button {
-		@include vendor('appearance', 'none');
-		@include vendor('transition', (
-			'background-color #{_duration(transition)} ease-in-out',
-			'box-shadow #{_duration(transition)} ease-in-out',
-			'color #{_duration(transition)} ease-in-out'
-		));
-		border: 0;
-		cursor: pointer;
-		display: inline-block;
-    font-weight: _font(weight-bold);
-    font-family: monospace;
-		letter-spacing: _font(kerning-alt);
-		text-align: center;
-		text-decoration: none;
-		text-transform: uppercase;
-		white-space: nowrap;
-		font-size: 0.75rem;
-		max-width: 20rem;
-		height: 3.75em;
-		line-height: 3.75em;
-		border-radius: 7px;
-		padding: 0 2.5em;
-		text-overflow: ellipsis;
-		overflow: hidden;
-
-		&.icon {
-			&:before {
-				margin-right: 0.5rem;
-			}
-		}
-
-		&.fit {
-			width: 100%;
-		}
-
-		&.small {
-			font-size: 0.7rem;
-			height: 3.325em;
-			line-height: 3.325em;
-			border-radius: 7px;
-			padding: 0 2em;
-    }
-    &.smaller {
-			font-size: 0.5rem;
-			height: 2.75em;
-			line-height: 2.75em;
-			border-radius: 7px;
-			padding: 0 2em;
-		}
-
-		&.large {
-			font-size: 0.8rem;
-			height: 4em;
-			line-height: 4em;
-			border-radius: 7px;
-			padding: 0 3em;
-		}
-
-		&.wide {
-			min-width: 14em;
-		}
-
-		&.disabled,
-		&:disabled {
-			@include vendor('pointer-events', 'none');
-			opacity: 0.25;
-		}
-	}
-
-	@mixin color-button($p: null) {
-		input[type="submit"],
-		input[type="reset"],
-		input[type="button"],
-		button,
-		.button {
-			background-color: _palette(fg);
-			box-shadow: inset 0 0 5px _size(border-width) _palette($p, border-darken);
-			color: _palette($p, bg) !important;
-
-			&:hover {
-				box-shadow: inset 0 0 5px _size(border-width) _palette($p, border);
-        color: _palette($p, fg) !important;
-        background-color: _palette(border-darken);
-			}
-
-			&:active {
-				background-color: transparentize(_palette($p, accent), 0.8);
-				box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
-				color: _palette($p, accent) !important;
-			}
-
-			&.primary {
-				background-color: _palette($p, fg-bold);
-				box-shadow: none;
-				color: _palette($p, bg) !important;
-
-				&:hover {
-					background-color: _palette($p, accent);
-				}
-
-				&:active {
-					background-color: darken(_palette($p, accent), 12);
-				}
-			}
-		}
-	}
-
-	@include color-button;
--- a/_sass/components/_form.scss
+++ b/_sass/components/_form.scss
@ -1,287 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Form */
-
-	form {
-		margin: 0 0 _size(element-margin) 0;
-
-		> :last-child {
-			margin-bottom: 0;
-		}
-
-		> .fields  {
-			$gutter: (_size(element-margin) * 0.75);
-
-			@include vendor('display', 'flex');
-			@include vendor('flex-wrap', 'wrap');
-			width: calc(100% + #{$gutter * 2});
-			margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
-
-			> .field {
-				@include vendor('flex-grow', '0');
-				@include vendor('flex-shrink', '0');
-				padding: $gutter 0 0 $gutter;
-				width: calc(100% - #{$gutter * 1});
-
-				&.half {
-					width: calc(50% - #{$gutter * 0.5});
-				}
-
-				&.third {
-					width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
-				}
-
-				&.quarter {
-					width: calc(25% - #{$gutter * 0.25});
-				}
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			> .fields {
-				$gutter: (_size(element-margin) * 0.75);
-
-				width: calc(100% + #{$gutter * 2});
-				margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
-
-				> .field {
-					padding: $gutter 0 0 $gutter;
-					width: calc(100% - #{$gutter * 1});
-
-					&.half {
-						width: calc(100% - #{$gutter * 1});
-					}
-
-					&.third {
-						width: calc(100% - #{$gutter * 1});
-					}
-
-					&.quarter {
-						width: calc(100% - #{$gutter * 1});
-					}
-				}
-			}
-		}
-	}
-
-	label {
-		display: block;
-		font-size: 0.9rem;
-		font-weight: _font(weight-bold);
-		margin: 0 0 (_size(element-margin) * 0.5) 0;
-	}
-
-	input[type="text"],
-	input[type="password"],
-	input[type="email"],
-	input[type="tel"],
-	input[type="search"],
-	input[type="url"],
-	select,
-	textarea {
-		@include vendor('appearance', 'none');
-		background-color: _palette(bg-transparent);
-		border-radius: _size(border-radius);
-		border: none;
-		border: solid _size(border-width);
-		color: inherit;
-		display: block;
-		outline: 0;
-		padding: 0 0.825rem;
-		text-decoration: none;
-    width: 100%;
-    box-shadow: inset 0 0 5px 1px _palette(border);
-
-		&:invalid {
-			box-shadow: none;
-		}
-	}
-
-	select {
-		background-size: 1.25rem;
-		background-repeat: no-repeat;
-		background-position: calc(100% - 1rem) center;
-		height: _size(element-height);
-		padding-right: _size(element-height);
-		text-overflow: ellipsis;
-
-		&:focus {
-			&::-ms-value {
-				background-color: transparent;
-			}
-		}
-
-		&::-ms-expand {
-			display: none;
-		}
-	}
-
-	input[type="text"],
-	input[type="password"],
-	input[type="email"],
-	input[type="tel"],
-	input[type="search"],
-	input[type="url"],
-	select {
-		height: _size(element-height);
-	}
-
-	textarea {
-		padding: 0.75rem 1rem;
-	}
-
-	input[type="checkbox"],
-	input[type="radio"], {
-		@include vendor('appearance', 'none');
-		display: block;
-		float: left;
-		margin-right: -2rem;
-		opacity: 0;
-		width: 1rem;
-		z-index: -1;
-
-		& + label {
-			@include icon(false, solid);
-			@include vendor('user-select', 'none');
-			cursor: pointer;
-			display: inline-block;
-			font-size: 1rem;
-			font-weight: _font(weight);
-			padding-left: (_size(element-height) * 0.6) + 0.75rem;
-			padding-right: 0.75rem;
-			position: relative;
-			margin-bottom: 0;
-
-			&:before {
-				border-radius: _size(border-radius);
-				border: solid _size(border-width);
-				content: '';
-				display: inline-block;
-				font-size: 0.8rem;
-				height: (_size(element-height) * 0.6);
-				left: 0;
-				line-height: (_size(element-height) * 0.6);
-				position: absolute;
-				text-align: center;
-				top: 0;
-				width: (_size(element-height) * 0.6);
-			}
-		}
-
-		&:checked + label {
-			&:before {
-				content: '\f00c';
-			}
-		}
-	}
-
-	input[type="checkbox"] {
-		& + label {
-			&:before {
-				border-radius: _size(border-radius);
-			}
-		}
-	}
-
-	input[type="radio"] {
-		& + label {
-			&:before {
-				border-radius: 100%;
-			}
-		}
-	}
-
-	::-webkit-input-placeholder {
-		opacity: 1.0;
-	}
-
-	:-moz-placeholder {
-		opacity: 1.0;
-	}
-
-	::-moz-placeholder {
-		opacity: 1.0;
-	}
-
-	:-ms-input-placeholder {
-		opacity: 1.0;
-	}
-
-	@mixin color-form($p: null) {
-		label {
-			color: _palette($p, fg-bold);
-		}
-
-		input[type="text"],
-		input[type="password"],
-		input[type="email"],
-		input[type="tel"],
-		input[type="search"],
-		input[type="url"],
-		select,
-		textarea {
-			border-color: _palette($p, border);
-
-			&:focus {
-				border-color: _palette($p, accent);
-				box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
-			}
-		}
-
-		select {
-			background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
-
-			option {
-				color: _palette(fg-bold);
-				background: _palette(bg);
-			}
-		}
-
-		input[type="checkbox"],
-		input[type="radio"], {
-			& + label {
-				color: _palette($p, fg);
-
-				&:before {
-					border-color: _palette($p, fg-light);
-				}
-			}
-
-			&:checked + label {
-				&:before {
-					background-color: _palette($p, fg-bold);
-					border-color: _palette($p, fg-bold);
-					color: _palette($p, bg);
-				}
-			}
-
-			&:focus + label {
-				&:before {
-					border-color: _palette($p, accent);
-					box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
-				}
-			}
-		}
-
-		::-webkit-input-placeholder {
-			color: _palette($p, fg-light) !important;
-		}
-
-		:-moz-placeholder {
-			color: _palette($p, fg-light) !important;
-		}
-
-		::-moz-placeholder {
-			color: _palette($p, fg-light) !important;
-		}
-
-		:-ms-input-placeholder {
-			color: _palette($p, fg-light) !important;
-		}
-	}
-
-	@include color-form;
--- a/_sass/components/_gallery.scss
+++ b/_sass/components/_gallery.scss
@ -1,616 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Gallery (transitions) */
-
-	.gallery {
-
-		// Mixin.
-			@mixin transition-gallery($event) {
-				$x: null;
-				$y: null;
-
-				@if ($event == 'load') {
-					$x: 'body.is-preload &';
-					$y: _duration(on-load);
-				}
-				@else if ($event == 'scroll') {
-					$x: '&.is-inactive';
-					$y: _duration(on-scroll);
-				}
-
-				&.on#{$event}-fade-in {
-					article {
-						.image {
-							img {
-								@include vendor('transition', 'opacity #{$y} ease-in-out');
-								@include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}');
-							}
-						}
-
-						@for $i from 0 through _misc(gallery-limit) {
-							&:nth-child(#{$i + 1}) {
-								.image {
-									img {
-										@include vendor('transition-delay', '#{$i * _duration(gallery-delay)}');
-									}
-								}
-							}
-						}
-					}
-
-					#{$x} {
-						article {
-							.image {
-								img {
-									opacity: 0;
-								}
-							}
-						}
-					}
-				}
-			}
-
-		// On Load.
-			@include transition-gallery('load');
-
-		// On Scroll.
-			@include transition-gallery('scroll');
-
-	}
-
-/* Gallery (style1) */
-
-	.gallery.style1 {
-		@include color-typography(invert);
-		@include color-button(invert);
-		@include vendor('align-items', 'center');
-		@include vendor('display', 'flex');
-		@include vendor('flex-wrap', 'wrap');
-		@include vendor('justify-content', 'center');
-		position: relative;
-		width: 100%;
-		background-color: transparent;
-
-		> .forward, >.backward {
-			display: none;
-		}
-
-		> .inner {
-			@include vendor('align-items', 'inherit');
-			@include vendor('display', 'inherit');
-			@include vendor('flex-wrap', 'inherit');
-			@include vendor('justify-content', 'inherit');
-		}
-
-		article {
-			overflow: hidden;
-			position: relative;
-			width: 25%;
-
-			.image {
-				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-				display: block;
-				width: 100%;
-				border-radius: 0;
-
-				img {
-					display: block;
-					width: 100%;
-					border-radius: 0;
-				}
-			}
-
-			.caption {
-				@include vendor('align-items', 'center');
-				@include vendor('display', 'flex');
-				@include vendor('flex-direction', 'column');
-				@include vendor('justify-content', 'center');
-				@include vendor('pointer-events', 'none');
-				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
-				opacity: 0;
-				padding: 2rem;
-				z-index: 1;
-				font-size: 0.8rem;
-
-				a {
-					@include vendor('pointer-events', 'auto');
-				}
-
-				h2, h3, h4, h5, h6 {
-					font-size: 1.25rem;
-					margin-bottom: 0.25rem;
-				}
-
-				> * {
-					max-width: 100%;
-					margin-bottom: 1rem;
-				}
-
-				> :last-child {
-					margin-bottom: 0;
-				}
-			}
-
-			&:hover {
-				.caption {
-					opacity: 1;
-				}
-			}
-		}
-
-		@include breakpoint('<=large') {
-			article {
-				width: (100% / 3);
-
-				.caption {
-					padding: 1rem;
-				}
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			article {
-				width: 50%;
-
-				.caption {
-					padding: 1rem;
-				}
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			article {
-				width: 100%;
-
-				.caption {
-					padding: 1rem;
-				}
-			}
-		}
-
-		// Modifiers.
-
-			// size
-				&.small {
-					article {
-						width: 20%;
-
-						.caption {
-							padding: 1rem;
-						}
-					}
-
-					@include breakpoint('<=large') {
-						article {
-							width: 25%;
-
-							.caption {
-								padding: 1rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=medium') {
-						article {
-							width: (100% / 3);
-
-							.caption {
-								padding: 1rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=xsmall') {
-						article {
-							width: 50%;
-
-							.caption {
-								padding: 1rem;
-							}
-						}
-					}
-				}
-
-				&.medium {
-					// ...
-				}
-
-				&.big {
-					article {
-						width: (100% / 3);
-
-						.caption {
-							padding: 3rem;
-						}
-					}
-
-					@include breakpoint('<=large') {
-						article {
-							width: 50%;
-
-							.caption {
-								padding: 2rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=medium') {
-						article {
-							width: 50%;
-
-							.caption {
-								padding: 2rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=xsmall') {
-						article {
-							width: 100%;
-
-							.caption {
-								padding: 1rem;
-							}
-						}
-					}
-				}
-
-	}
-
-/* Gallery (style2) */
-
-	.gallery.style2 {
-		@include color-typography(invert);
-		@include color-button(invert);
-		@include vendor('display', 'flex');
-		-webkit-overflow-scrolling: touch;
-		position: relative;
-		background-color: transparent;
-
-		> .forward, >.backward {
-			@include icon(false, solid);
-			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-			position: absolute;
-			top: 0;
-			width: 5rem;
-			height: 100%;
-			cursor: pointer;
-			opacity: 0;
-			z-index: 2;
-
-			&:before {
-				display: block;
-				top: calc(50% - 1.5rem);
-				width: 4rem;
-				height: 3rem;
-				line-height: 1em;
-				font-size: 3rem;
-				position: absolute;
-				text-align: center;
-			}
-		}
-
-		&:hover {
-			> .forward, > .backward {
-				opacity: 1;
-			}
-		}
-
-		> .forward {
-			right: 0;
-			background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
-
-			&:before {
-				content: '\f105';
-				right: 0;
-			}
-		}
-
-		> .backward {
-			left: 0;
-			background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
-
-			&:before {
-				content: '\f104';
-				left: 0;
-			}
-		}
-
-		> .inner {
-			@include vendor('display', 'inherit');
-			overflow-x: auto;
-			overflow-y: hidden;
-			position: relative;
-			width: 100%;
-		}
-
-		article {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			display: block;
-			position: relative;
-			overflow: hidden;
-			width: 22.5rem;
-			max-width: 75vw;
-
-			.image {
-				display: block;
-				width: 100%;
-				border-radius: 0;
-
-				img {
-					display: block;
-					width: 100%;
-					border-radius: 0;
-				}
-			}
-
-			.caption {
-				@include vendor('align-items', 'center');
-				@include vendor('display', 'flex');
-				@include vendor('flex-direction', 'column');
-				@include vendor('justify-content', 'center');
-				@include vendor('pointer-events', 'none');
-				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity));
-				opacity: 0;
-				padding: 3rem;
-				z-index: 1;
-				font-size: 1rem;
-
-				a {
-					@include vendor('pointer-events', 'auto');
-				}
-
-				h2, h3, h4, h5, h6 {
-					font-size: 1.25rem;
-					margin-bottom: 0.25rem;
-				}
-
-				> * {
-					max-width: 100%;
-					margin-bottom: 1rem;
-				}
-
-				> :last-child {
-					margin-bottom: 0;
-				}
-			}
-
-			&:hover {
-				.caption {
-					opacity: 1;
-				}
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			article {
-				.caption {
-					padding: 2rem;
-				}
-			}
-		}
-
-		@include breakpoint('<=small') {
-			article {
-				.caption {
-					padding: 2rem;
-				}
-			}
-		}
-
-		// Modifiers.
-
-			// size
-				&.small {
-					article {
-						width: 17.5rem;
-
-						.caption {
-							padding: 2rem;
-						}
-					}
-
-					@include breakpoint('<=medium') {
-						article {
-							.caption {
-								padding: 2rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=small') {
-						article {
-							.caption {
-								padding: 2rem;
-							}
-						}
-					}
-				}
-
-				&.medium {
-					// ...
-				}
-
-				&.big {
-					article {
-						width: 30rem;
-
-						.caption {
-							padding: 4rem;
-						}
-					}
-
-					@include breakpoint('<=medium') {
-						article {
-							.caption {
-								padding: 3rem;
-							}
-						}
-					}
-
-					@include breakpoint('<=small') {
-						article {
-							.caption {
-								padding: 2rem;
-							}
-						}
-					}
-				}
-
-	}
-
-/* Gallery (lightbox) */
-
-	@include keyframes('gallery-modal-spinner') {
-		0% {
-			@include vendor('transform', 'rotate(0deg)');
-		}
-
-		100% {
-			@include vendor('transform', 'rotate(360deg)');
-		}
-	}
-
-	.gallery.lightbox {
-		.modal {
-			@include vendor('display', 'flex');
-			@include vendor('align-items', 'center');
-			@include vendor('justify-content', 'center');
-			@include vendor('pointer-events', 'none');
-			@include vendor('user-select', 'none');
-			@include vendor('transition', (
-				'opacity #{_duration(gallery-lightbox)} ease',
-				'visibility #{_duration(gallery-lightbox)}',
-				'z-index #{_duration(gallery-lightbox)}'
-			));
-			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			outline: 0;
-			background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity));
-			visibility: none;
-			opacity: 0;
-			z-index: 0;
-
-			&:before {
-				@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
-				@include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease');
-				@include vendor('transition-delay', '#{_duration(gallery-lightbox)}');
-				content: '';
-				display: block;
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				width: 4rem;
-				height: 4rem;
-				margin: -2rem 0 0 -2rem;
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(invert, fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
-				background-position: center;
-				background-repeat: no-repeat;
-				background-size: 4rem;
-				opacity: 0;
-			}
-
-			&:after {
-				content: '';
-				display: block;
-				position: absolute;
-				top: 0.5rem;
-				right: 0.5rem;
-				width: 4rem;
-				height: 4rem;
-				cursor: pointer;
-				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(invert, fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
-				background-position: center;
-				background-repeat: no-repeat;
-				background-size: 3rem;
-			}
-
-			.inner {
-				@include vendor('transform', 'translateY(0.75rem)');
-				@include vendor('transition', (
-					'opacity #{_duration(gallery-lightbox) * 0.5} ease',
-					'transform #{_duration(gallery-lightbox) * 0.5} ease'
-				));
-				opacity: 0;
-
-				img {
-					display: block;
-					max-width: 90vw;
-					max-height: 85vh;
-					box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
-				}
-			}
-
-			&.visible {
-				@include vendor('pointer-events', 'auto');
-				visibility: visible;
-				opacity: 1;
-				z-index: _misc(z-index-base) + 1;
-
-				&:before {
-					opacity: 1;
-				}
-			}
-
-			&.loaded {
-				.inner {
-					@include vendor('transform', 'translateY(0)');
-					@include vendor('transition', (
-						'opacity #{_duration(gallery-lightbox)} ease',
-						'transform #{_duration(gallery-lightbox)} ease'
-					));
-					opacity: 1;
-				}
-
-				&:before {
-					@include vendor('transition-delay', '0s');
-					opacity: 0;
-				}
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			.modal {
-				.inner {
-					img {
-						max-width: 100vw;
-					}
-				}
-			}
-		}
-	}
-
-// Mixin
-
-	@mixin color-gallery($p: null) {
-		.gallery {
-			article {
-				.image {
-					background-color: transparentize(_palette($p, fg-bold), 0.875);
-				}
-			}
-		}
-	}
-
-	@include color-gallery;
--- a/_sass/components/_icon.scss
+++ b/_sass/components/_icon.scss
@ -1,103 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Icon */
-
-	.icon {
-		@include icon;
-		border-bottom: none;
-		position: relative;
-		text-align: center;
-
-		> .label {
-			display: none;
-		}
-
-		&:before {
-			line-height: inherit;
-		}
-
-		&.solid {
-			&:before {
-				font-weight: 900;
-			}
-		}
-
-		&.brands {
-			&:before {
-				font-family: 'Font Awesome 5 Brands';
-			}
-		}
-
-		&.style2 {
-			&:before {
-				border-radius: 2.75em;
-				display: inline-block;
-				height: 2.75em;
-				line-height: 2.75em;
-				width: 2.75em;
-			}
-		}
-
-		&.major {
-			display: block;
-			margin: 0 0 (_size(element-margin) * 0.5) 0;
-
-			&:before {
-				font-size: 1.25rem;
-			}
-		}
-	}
-
-	a.icon {
-		&.style2 {
-			&:before {
-				@include vendor('transition', (
-					'background-color #{_duration(transition)} ease-in-out',
-					'box-shadow #{_duration(transition)} ease-in-out',
-					'color #{_duration(transition)} ease-in-out'
-				));
-			}
-		}
-	}
-
-	@mixin color-icon($p: null) {
- 		.icon {
- 			&.style2 {
- 				&:before {
-					box-shadow: inset 0 0 0 _size(border-width) _palette($p, border);
- 				}
- 			}
- 		}
-     .player {
-      &.style2 {
-        &:before {
-         box-shadow: inset 0 0 0 _size(border-width) _palette($p, fg-light);
-        }
-      }
-    }
-
-		a.icon {
-			&.style2 {
-				&:hover {
-					&:before {
-						box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
-						color: _palette($p, accent);
-					}
-				}
-
-				&:active {
-					&:before {
-						background-color: transparentize(_palette($p, accent), 0.9);
-						box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
-						color: _palette($p, accent);
-					}
-				}
-			}
-		}
-	}
-
-	@include color-icon;
--- a/_sass/components/_icons.scss
+++ b/_sass/components/_icons.scss
@ -1,22 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Icons */
-
-	ul.icons {
-		cursor: default;
-		list-style: none;
-		padding-left: 0;
-
-		li {
-			display: inline-block;
-			padding: 0 0.75rem 0 0;
-
-			&:last-child {
-				padding-right: 0;
-			}
-		}
-	}
--- a/_sass/components/_image.scss
+++ b/_sass/components/_image.scss
@ -1,61 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Image */
-
-	.image {
-		border: 0;
-		border-radius: _size(border-radius);
-		display: inline-block;
-		position: relative;
-
-		img {
-			display: block;
-			border-radius: _size(border-radius);
-		}
-
-		&.left,
-		&.right {
-			width: 40%;
-			max-width: 10rem;
-
-			img {
-				width: 100%;
-			}
-		}
-
-		&.left {
-			float: left;
-			margin: 0 1.5rem 1rem 0;
-			top: 0.25rem;
-		}
-
-		&.right {
-			float: right;
-			margin: 0 0 1rem 1.5rem;
-			top: 0.25rem;
-		}
-
-		&.fit {
-			display: block;
-			margin: 0 0 _size(element-margin) 0;
-			width: 100%;
-
-			img {
-				width: 100%;
-			}
-		}
-
-		&.main {
-			display: block;
-			margin: 0 0 (_size(element-margin) * 1.5) 0;
-			width: 100%;
-
-			img {
-				width: 100%;
-			}
-		}
-	}
--- a/_sass/components/_index.scss
+++ b/_sass/components/_index.scss
@ -1,66 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Index */
-
-	.index {
-		> * {
-			@include padding(3rem, 0);
-			@include vendor('display', 'flex');
-			border-top: solid 1px;
-
-			> header {
-				@include vendor('flex-grow', '0');
-				@include vendor('flex-shrink', '0');
-				width: 15rem;
-			}
-
-			> .content {
-				@include vendor('flex-grow', '1');
-				@include vendor('flex-shrink', '1');
-			}
-		}
-
-		> :first-child {
-			border-top: 0;
-		}
-
-		@include breakpoint('<=medium') {
-			> * {
-				> header {
-					width: 11rem;
-				}
-			}
-		}
-
-		@include breakpoint('<=small') {
-			> * {
-				> header {
-					width: 10rem;
-				}
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			> * {
-				@include vendor('flex-direction', 'column');
-
-				> header {
-					width: 100%;
-				}
-			}
-		}
-	}
-
-	@mixin color-index($p: null) {
-		.index {
-			> * {
- 				border-top-color: _palette($p, border);
- 			}
- 		}
-	}
-
-	@include color-index;
--- a/_sass/components/_items.scss
+++ b/_sass/components/_items.scss
@ -1,338 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Items (transitions) */
-
-	.items {
-
-		// Mixin.
-			@mixin transition-items($event) {
-				$x: null;
-				$y: null;
-
-				@if ($event == 'load') {
-					$x: 'body.is-preload &';
-					$y: _duration(on-load);
-				}
-				@else if ($event == 'scroll') {
-					$x: '&.is-inactive';
-					$y: _duration(on-scroll);
-				}
-
-				&.on#{$event}-fade-in {
-					> * {
-						> .inner {
-							@include vendor('transition', 'opacity #{$y} ease-in-out');
-							@include vendor('transition-delay', '#{_misc(items-limit) * _duration(items-delay)}');
-						}
-
-						@for $i from 0 through _misc(items-limit) {
-							&:nth-child(#{$i + 1}) {
-								> .inner {
-									@include vendor('transition-delay', '#{$i * _duration(items-delay)}');
-								}
-							}
-						}
-					}
-
-					#{$x} {
-						> * {
-							> .inner {
-								opacity: 0;
-							}
-						}
-					}
-				}
-			}
-
-		// On Load.
-			@include transition-items('load');
-
-		// On Scroll.
-			@include transition-items('scroll');
-
-	}
-
-/* Items (style1) */
-
-	@mixin items-style1-size($name, $size, $padding) {
-		&.#{$name} {
-			> * {
-				@include padding($padding, $padding);
-				width: #{100% / $size};
-
-				&:nth-child(-n + #{$size}) {
-					border-top-width: 0;
-				}
-
-				&:nth-child(#{$size}n + 1) {
-					border-left-width: 0;
-				}
-			}
-		}
-	}
-
-	@mixin items-style1-size-reset($name, $size) {
-		&.#{$name} {
-			> * {
-				&:nth-child(-n + #{$size}) {
-					border-top-width: _size(border-width);
-				}
-
-				&:nth-child(#{$size}n + 1) {
-					border-left-width: _size(border-width);
-				}
-			}
-		}
-	}
-
-	.items.style1 {
-		@include vendor('display', 'flex');
-		@include vendor('flex-wrap', 'wrap');
-		@include vendor('justify-content', 'center');
-		margin: (_size(element-margin) * 1.5) 0;
-		position: relative;
-
-		> * {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			border-style: solid;
-			border-left-width: _size(border-width);
-			border-top-width: _size(border-width);
-		}
-
-		// Modifiers.
-
-			// Size.
-				@include items-style1-size(big, 2, _size(gutter));
-				@include items-style1-size(medium, 3, _size(gutter) * 0.625);
-				@include items-style1-size(small, 4, _size(gutter) * 0.375);
-
-				@include breakpoint('<=large') {
-					@include items-style1-size-reset(small, 4);
-					@include items-style1-size(small, 3, _size(gutter) * 0.625);
-				}
-
-				@include breakpoint('<=medium') {
-					@include items-style1-size-reset(medium, 3);
-					@include items-style1-size(medium, 2, _size(gutter));
-
-					@include items-style1-size-reset(small, 3);
-					@include items-style1-size(small, 2, _size(gutter));
-				}
-
-				@include breakpoint('<=xsmall') {
-					@include items-style1-size-reset(big, 2);
-					@include items-style1-size(big, 1, _size(gutter) * 0.75);
-
-					@include items-style1-size-reset(medium, 2);
-					@include items-style1-size(medium, 1, _size(gutter) * 0.75);
-
-					@include items-style1-size-reset(small, 2);
-					@include items-style1-size(small, 1, _size(gutter) * 0.75);
-
-					&.big,
-					&.medium,
-					&.small {
-						> * {
-							padding-left: 0;
-							padding-right: 0;
-						}
-
-						> :first-child {
-							padding-top: 0;
-						}
-
-						> :last-child {
-							padding-bottom: 0;
-
-							> .inner {
-								> :last-child {
-									margin-bottom: 0;
-								}
-							}
-						}
-					}
-				}
-
-	}
-
-/* Items (style2) */
-
-	@mixin items-style2-size($name, $size, $padding) {
-		&.#{$name} {
-			> * {
-				@include padding($padding, $padding);
-				width: #{100% / $size};
-
-				&:nth-child(-n + #{$size}) {
-					border-top-width: 0;
-				}
-
-				&:nth-child(#{$size}n + 1) {
-					border-left-width: 0;
-				}
-			}
-		}
-	}
-
-	@mixin items-style2-size-reset($name, $size) {
-		&.#{$name} {
-			> * {
-				&:nth-child(-n + #{$size}) {
-					border-top-width: _size(border-width);
-				}
-
-				&:nth-child(#{$size}n + 1) {
-					border-left-width: _size(border-width);
-				}
-			}
-		}
-	}
-
-	.items.style2 {
-		@include vendor('display', 'flex');
-		@include vendor('flex-wrap', 'wrap');
-		@include vendor('justify-content', 'center');
-		margin: (_size(element-margin) * 1.5) 0;
-		position: relative;
-		border: solid _size(border-width);
-		border-radius: _size(border-radius);
-
-		> * {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-			border-style: solid;
-			border-left-width: _size(border-width);
-			border-top-width: _size(border-width);
-		}
-
-		// Modifiers.
-
-			// Size.
-				@include items-style2-size(big, 2, _size(gutter));
-				@include items-style2-size(medium, 3, _size(gutter) * 0.625);
-				@include items-style2-size(small, 4, _size(gutter) * 0.375);
-
-				@include breakpoint('<=large') {
-					@include items-style2-size-reset(small, 4);
-					@include items-style2-size(small, 3, _size(gutter) * 0.625);
-				}
-
-				@include breakpoint('<=medium') {
-					@include items-style2-size-reset(medium, 3);
-					@include items-style2-size(medium, 2, _size(gutter));
-
-					@include items-style2-size-reset(small, 3);
-					@include items-style2-size(small, 2, _size(gutter));
-				}
-
-				@include breakpoint('<=xsmall') {
-					@include items-style2-size-reset(big, 2);
-					@include items-style2-size(big, 1, _size(gutter) * 0.75);
-
-					@include items-style2-size-reset(medium, 2);
-					@include items-style2-size(medium, 1, _size(gutter) * 0.75);
-
-					@include items-style2-size-reset(small, 2);
-					@include items-style2-size(small, 1, _size(gutter) * 0.75);
-				}
-
-	}
-
-/* Items (style3) */
-
-	@mixin items-style3-size($name, $size, $padding) {
-		&.#{$name} {
-			> * {
-				@include padding($padding, $padding);
-				width: #{100% / $size};
-			}
-		}
-	}
-
-	.items.style3 {
-		@include vendor('display', 'flex');
-		@include vendor('flex-wrap', 'wrap');
-		@include vendor('justify-content', 'center');
-		margin: (_size(element-margin) * 1.5) 0;
-		position: relative;
-
-		> * {
-			@include vendor('flex-grow', '0');
-			@include vendor('flex-shrink', '0');
-		}
-
-		// Modifiers.
-
-			// Size.
-				@include items-style3-size(big, 2, _size(gutter) * 0.5);
-				@include items-style3-size(medium, 3, _size(gutter) * 0.5 * 0.625);
-				@include items-style3-size(small, 4, _size(gutter) * 0.5 * 0.375);
-
-				@include breakpoint('<=large') {
-					@include items-style3-size(small, 3, _size(gutter) * 0.5 * 0.625);
-				}
-
-				@include breakpoint('<=medium') {
-					@include items-style3-size(medium, 2, _size(gutter) * 0.5);
-					@include items-style3-size(small, 2, _size(gutter) * 0.5);
-				}
-
-				@include breakpoint('<=small') {
-					margin: _size(element-margin) 0;
-				}
-
-				@include breakpoint('<=xsmall') {
-					@include items-style3-size(big, 1, _size(gutter) * 0.5 * 0.75);
-					@include items-style3-size(medium, 1, _size(gutter) * 0.5 * 0.75);
-					@include items-style3-size(small, 1, _size(gutter) * 0.5 * 0.75);
-
-					&.big,
-					&.medium,
-					&.small {
-						> * {
-							padding-left: 0;
-							padding-right: 0;
-						}
-
-						> :first-child {
-							padding-top: 0;
-						}
-
-						> :last-child {
-							padding-bottom: 0;
-
-							> .inner {
-								> :last-child {
-									margin-bottom: 0;
-								}
-							}
-						}
-					}
-				}
-
-	}
-
-// Mixin
-
-	@mixin color-items($p: null) {
- 		.items.style1 {
- 			> * {
-	 			border-color: _palette($p, #fff);
-	 		}
- 		}
-
- 		.items.style2 {
- 			border-color: _palette($p, border);
-
- 			> * {
-	 			border-color: _palette($p, border);
-	 		}
- 		}
-	}
-
-	@include color-items;
--- a/_sass/components/_list.scss
+++ b/_sass/components/_list.scss
@ -1,86 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* List */
-
-	ol {
-		list-style: decimal;
-		margin: 0 0 _size(element-margin) 0;
-		padding-left: 1.25rem;
-
-		li {
-			padding-left: 0.25rem;
-		}
-	}
-
-	ul {
-		list-style: disc;
-		margin: 0 0 _size(element-margin) 0;
-		padding-left: 1rem;
-
-		li {
-			padding-left: 0.5rem;
-		}
-
-		&.alt {
-			list-style: none;
-			padding-left: 0;
-
-			li {
-				border-top: solid _size(border-width);
-				padding: 0.5rem 0;
-
-				&:first-child {
-					border-top: 0;
-					padding-top: 0;
-				}
-			}
-		}
-	}
-
-	dl {
-		margin: 0 0 _size(element-margin) 0;
-
-		dt {
-			display: block;
-			font-weight: _font(weight-bold);
-			margin: 0 0 (_size(element-margin) * 0.5) 0;
-		}
-
-		dd {
-			margin-left: _size(element-margin);
-		}
-
-		&.style2 {
-			dt {
-				width: 25%;
-				float: left;
-			}
-
-			dd {
-				width: 70%;
-				float: left;
-			}
-
-			&:after {
-				content: '';
-				display: block;
-				clear: both;
-			}
-		}
-	}
-
-	@mixin color-list($p: null) {
-		ul {
-			&.alt {
-				li {
-					border-top-color: _palette($p, border);
-				}
-			}
-		}
-	}
-
-	@include color-list;
--- a/_sass/components/_row.scss
+++ b/_sass/components/_row.scss
@ -1,35 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Row */
-
-	.row {
-		@include html-grid(2rem);
-
-		@include breakpoint('<=xlarge') {
-			@include html-grid(2rem, 'xlarge');
-		}
-
-		@include breakpoint('<=large') {
-			@include html-grid(2rem, 'large');
-		}
-
-		@include breakpoint('<=medium') {
-			@include html-grid(2rem, 'medium');
-		}
-
-		@include breakpoint('<=small') {
-			@include html-grid(2rem, 'small');
-		}
-
-		@include breakpoint('<=xsmall') {
-			@include html-grid(2rem, 'xsmall');
-		}
-
-		@include breakpoint('<=xxsmall') {
-			@include html-grid(2rem, 'xxsmall');
-		}
-	}
--- a/_sass/components/_section.scss
+++ b/_sass/components/_section.scss
@ -1,49 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Section/Article */
-
-	section, article {
-		&.special {
-			text-align: center;
-		}
-	}
-
-	header {
-		p {
-			position: relative;
-			margin: (_size(element-margin) * -0.325) 0 (_size(element-margin) * 0.75) 0;
-			font-style: italic;
-		}
-
-		h1 + p {
-			font-size: 1.375rem;
-		}
-
-		h2 + p {
-			font-size: 1.25rem;
-		}
-
-		h3 + p {
-			font-size: 1.1rem;
-		}
-
-		h4 + p,
-		h5 + p,
-		h6 + p {
-			font-size: 0.9rem;
-		}
-	}
-
-	@mixin color-section($p: null) {
-		header {
-			p {
-				color: _palette($p, fg-light);
-			}
-		}
-	}
-
-	@include color-section;
--- a/_sass/components/_spotlight.scss
+++ b/_sass/components/_spotlight.scss
--- a/_sass/components/_table.scss
+++ b/_sass/components/_table.scss
@ -1,137 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Table */
-
-	.table-wrapper {
-		-webkit-overflow-scrolling: touch;
-		margin: 0 0 _size(element-margin) 0;
-		overflow-x: auto;
-
-		> table {
-			margin-bottom: 0;
-		}
-	}
-
-	table {
-		margin: 0 0 _size(element-margin) 0;
-		width: 100%;
-
-		tbody {
-			tr {
-				border: solid _size(border-width);
-				border-left: 0;
-				border-right: 0;
-			}
-		}
-
-		td {
-			padding: 0.75rem 0.75rem;
-		}
-
-		th {
-			font-size: 0.9rem;
-			font-weight: _font(weight-bold);
-			padding: 0 0.75rem 0.75rem 0.75rem;
-			text-align: left;
-		}
-
-		thead {
-			border-bottom: solid (_size(border-width) * 2);
-		}
-
-		tfoot {
-			border-top: solid (_size(border-width) * 2);
-		}
-
-		&.alt {
-			border-collapse: separate;
-
-			tbody {
-				tr {
-					td {
-						border: solid _size(border-width);
-						border-left-width: 0;
-						border-top-width: 0;
-
-						&:first-child {
-							border-left-width: _size(border-width);
-						}
-					}
-
-					&:first-child {
-						td {
-							border-top-width: _size(border-width);
-						}
-					}
-				}
-			}
-
-			thead {
-				border-bottom: 0;
-			}
-
-			tfoot {
-				border-top: 0;
-			}
-		}
-
-		&.fixed {
-			table-layout: fixed;
-		}
-	}
-
-	@mixin color-table($p: null) {
-		table {
-			tbody {
-				tr {
-					border-color: _palette($p, border);
-
-					&:nth-child(2n + 1) {
-						background-color: _palette($p, border-bg);
-					}
-
-					&.alt {
-						background-color: _palette($p, border-bg) !important;
-					}
-				}
-			}
-
-			th {
-				color: _palette($p, fg-bold);
-			}
-
-			thead {
-				border-bottom-color: _palette($p, border);
-			}
-
-			tfoot {
-				border-top-color: _palette($p, border);
-			}
-
-			&.alt {
-				tbody {
-					tr {
-						td {
-							border-color: _palette($p, border);
-						}
-					}
-				}
-			}
-
-			&.uniform {
-				tbody {
-					tr {
-						&:nth-child(2n + 1) {
-							background-color: transparent;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	@include color-table;
--- a/_sass/components/_wrapper.scss
+++ b/_sass/components/_wrapper.scss
@ -1,120 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Wrapper (style1) */
-
-	.wrapper.style1 {
-		> .inner {
-			@include padding(_size(padding, default), _size(padding, default) * 0.5);
-			margin: 0 auto;
-			max-width: 100%;
-			width: _size(inner);
-
-			&.medium {
-				width: _size(inner) * 0.75;
-			}
-
-			&.small {
-				width: _size(inner) * 0.5;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			> .inner {
-				@include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.5);
-			}
-		}
-
-		@include breakpoint('<=large') {
-			> .inner {
-				@include padding(_size(padding, large), _size(padding, large));
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			> .inner {
-				@include padding(_size(padding, medium) * 1.5, _size(padding, medium));
-			}
-		}
-
-		@include breakpoint('<=small') {
-			> .inner {
-				@include padding(_size(padding, small) * 1.5, _size(padding, small));
-			}
-		}
-	}
-
-/* Wrapper (style2) */
-
-	.wrapper.style2 {
-		padding: _size(padding, default);
-		background-color: _palette(bg-alt);
-
-		> .inner {
-			@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.5);
-			background-color: _palette(bg);
-			border-radius: _size(border-radius-alt);
-			margin: 0 auto;
-			max-width: 100%;
-			position: relative;
-			width: _size(inner);
-			z-index: 1;
-
-			&.medium {
-				width: _size(inner) * 0.75;
-			}
-
-			&.small {
-				width: _size(inner) * 0.5;
-			}
-		}
-
-		@include breakpoint('<=xlarge') {
-			padding: _size(padding, xlarge);
-
-			> .inner {
-				@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.5);
-			}
-		}
-
-		@include breakpoint('<=large') {
-			padding: _size(padding, large);
-
-			> .inner {
-				@include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.5);
-			}
-		}
-
-		@include breakpoint('<=medium') {
-			padding: _size(padding, medium) * 0.75;
-
-			> .inner {
-				@include padding(_size(padding, medium), _size(padding, medium) * 0.75);
-			}
-		}
-
-		@include breakpoint('<=small') {
-			padding: _size(padding, small) * 0.75;
-
-			> .inner {
-				@include padding(_size(padding, small), _size(padding, small) * 0.75);
-			}
-		}
-	}
-
-	#wrapper {
-		> .wrapper.style2 {
-			&.invert {
-				&:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6):not(.color7) {
-					background-color: _palette(invert, bg-alt);
-				}
-
-				> .inner {
-					background-color: _palette(invert, bg);
-				}
-			}
-		}
-	}
--- a/_sass/layout/_wrapper.scss
+++ b/_sass/layout/_wrapper.scss
@ -1,49 +0,0 @@
-///
-/// Story by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Wrapper */
-
-	@mixin wrapper-color($n) {
-		> .color#{$n} {
-			background-color: _palette(color#{$n});
-		}
-	}
-
-	#wrapper {
-		background-color: inherit;
-		width: 100%;
-		overflow-x: hidden;
-
-		> .invert {
-			@include color(invert);
-		}
-
-		@include wrapper-color(1);
-		@include wrapper-color(2);
-		@include wrapper-color(3);
-		@include wrapper-color(4);
-		@include wrapper-color(5);
-		@include wrapper-color(6);
-		@include wrapper-color(7);
-
-		&.divided {
-			> * {
-				box-shadow: inset 0 10px 10px 0 _palette(border-alt);
-
-				&:first-child {
-					box-shadow: none !important;
-				}
-			}
-
-			> .invert {
-				box-shadow: inset 0 1px 0 0 _palette(invert, border-alt);
-
-				&:first-child {
-					box-shadow: none !important;
-				}
-			}
-		}
-	}
--- a/_sass/libs/_animations.scss
+++ b/_sass/libs/_animations.scss
@ -0,0 +1,46 @@
+// Animation 
+@-webkit-keyframes infiniteRotate {  
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@-moz-keyframes infiniteRotate {  
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes infiniteRotate {  
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+
+@-webkit-keyframes backgroundBlink {
+  0%{background-position:73% 0%}
+  50%{background-position:28% 100%}
+  100%{background-position:73% 0%}
+}
+@-moz-keyframes backgroundBlink {
+  0%{background-position:73% 0%}
+  50%{background-position:28% 100%}
+  100%{background-position:73% 0%}
+}
+@keyframes backgroundBlink {
+  0%{background-position:73% 0%}
+  50%{background-position:28% 100%}
+  100%{background-position:73% 0%}
+}
+
+@-webkit-keyframes backgroundSize {
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
+}
+@-moz-keyframes backgroundSize {
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
+}
+@keyframes backgroundSize {
+  0%{background-size:100% 150%}
+  50%{background-size:150% 100%}
+  100%{background-size:100% 150%}
+}
--- a/_sass/libs/_breakpoints.scss
+++ b/_sass/libs/_breakpoints.scss
@ -1,223 +0,0 @@
-// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
-
-// Vars.
-
-	/// Breakpoints.
-	/// @var {list}
-	$breakpoints: () !global;
-
-// Mixins.
-
-	/// Sets breakpoints.
-	/// @param {map} $x Breakpoints.
-	@mixin breakpoints($x: ()) {
-		$breakpoints: $x !global;
-	}
-
-	/// Wraps @content in a @media block targeting a specific orientation.
-	/// @param {string} $orientation Orientation.
-	@mixin orientation($orientation) {
-		@media screen and (orientation: #{$orientation}) {
-			@content;
-		}
-	}
-
-	/// Wraps @content in a @media block using a given query.
-	/// @param {string} $query Query.
-	@mixin breakpoint($query: null) {
-
-		$breakpoint: null;
-		$op: null;
-		$media: null;
-
-		// Determine operator, breakpoint.
-
-			// Greater than or equal.
-				@if (str-slice($query, 0, 2) == '>=') {
-
-					$op: 'gte';
-					$breakpoint: str-slice($query, 3);
-
-				}
-
-			// Less than or equal.
-				@elseif (str-slice($query, 0, 2) == '<=') {
-
-					$op: 'lte';
-					$breakpoint: str-slice($query, 3);
-
-				}
-
-			// Greater than.
-				@elseif (str-slice($query, 0, 1) == '>') {
-
-					$op: 'gt';
-					$breakpoint: str-slice($query, 2);
-
-				}
-
-			// Less than.
-				@elseif (str-slice($query, 0, 1) == '<') {
-
-					$op: 'lt';
-					$breakpoint: str-slice($query, 2);
-
-				}
-
-			// Not.
-				@elseif (str-slice($query, 0, 1) == '!') {
-
-					$op: 'not';
-					$breakpoint: str-slice($query, 2);
-
-				}
-
-			// Equal.
-				@else {
-
-					$op: 'eq';
-					$breakpoint: $query;
-
-				}
-
-		// Build media.
-			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
-
-				$a: map-get($breakpoints, $breakpoint);
-
-				// Range.
-					@if (type-of($a) == 'list') {
-
-						$x: nth($a, 1);
-						$y: nth($a, 2);
-
-						// Max only.
-							@if ($x == null) {
-
-								// Greater than or equal (>= 0 / anything)
-									@if ($op == 'gte') {
-										$media: 'screen';
-									}
-
-								// Less than or equal (<= y)
-									@elseif ($op == 'lte') {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
-
-								// Greater than (> y)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Less than (< 0 / invalid)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: -1px)';
-									}
-
-								// Not (> y)
-									@elseif ($op == 'not') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Equal (<= y)
-									@else {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
-
-							}
-
-						// Min only.
-							@else if ($y == null) {
-
-								// Greater than or equal (>= x)
-									@if ($op == 'gte') {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-								// Less than or equal (<= inf / anything)
-									@elseif ($op == 'lte') {
-										$media: 'screen';
-									}
-
-								// Greater than (> inf / invalid)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (max-width: -1px)';
-									}
-
-								// Less than (< x)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Not (< x)
-									@elseif ($op == 'not') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Equal (>= x)
-									@else {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-							}
-
-						// Min and max.
-							@else {
-
-								// Greater than or equal (>= x)
-									@if ($op == 'gte') {
-										$media: 'screen and (min-width: ' + $x + ')';
-									}
-
-								// Less than or equal (<= y)
-									@elseif ($op == 'lte') {
-										$media: 'screen and (max-width: ' + $y + ')';
-									}
-
-								// Greater than (> y)
-									@elseif ($op == 'gt') {
-										$media: 'screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Less than (< x)
-									@elseif ($op == 'lt') {
-										$media: 'screen and (max-width: ' + ($x - 1) + ')';
-									}
-
-								// Not (< x and > y)
-									@elseif ($op == 'not') {
-										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
-									}
-
-								// Equal (>= x and <= y)
-									@else {
-										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
-									}
-
-							}
-
-					}
-
-				// String.
-					@else {
-
-						// Missing a media type? Prefix with "screen".
-							@if (str-slice($a, 0, 1) == '(') {
-								$media: 'screen and ' + $a;
-							}
-
-						// Otherwise, use as-is.
-							@else {
-								$media: $a;
-							}
-
-					}
-
-			}
-
-		// Output.
-	        @media #{$media} {
-				@content;
-			}
-
-	}
--- a/_sass/libs/_fonts.scss
+++ b/_sass/libs/_fonts.scss
@ -1,8 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Astloch';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Astloch Bold'), local('Astloch-Bold'), url(/assets/fonts/Astloch-Bold.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
--- a/_sass/libs/_functions.scss
+++ b/_sass/libs/_functions.scss
@ -1,90 +0,0 @@
-/// Removes a specific item from a list.
-/// @author Hugo Giraudel
-/// @param {list} $list List.
-/// @param {integer} $index Index.
-/// @return {list} Updated list.
-@function remove-nth($list, $index) {
-
-	$result: null;
-
-	@if type-of($index) != number {
-		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
-	}
-	@else if $index == 0 {
-		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
-	}
-	@else if abs($index) > length($list) {
-		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
-	}
-	@else {
-
-		$result: ();
-		$index: if($index < 0, length($list) + $index + 1, $index);
-
-		@for $i from 1 through length($list) {
-
-			@if $i != $index {
-				$result: append($result, nth($list, $i));
-			}
-
-		}
-
-	}
-
-	@return $result;
-
-}
-
-/// Gets a value from a map.
-/// @author Hugo Giraudel
-/// @param {map} $map Map.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function val($map, $keys...) {
-
-	@if nth($keys, 1) == null {
-		$keys: remove-nth($keys, 1);
-	}
-
-	@each $key in $keys {
-		$map: map-get($map, $key);
-	}
-
-	@return $map;
-
-}
-
-/// Gets a duration value.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function _duration($keys...) {
-	@return val($duration, $keys...);
-}
-
-/// Gets a font value.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function _font($keys...) {
-	@return val($font, $keys...);
-}
-
-/// Gets a misc value.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function _misc($keys...) {
-	@return val($misc, $keys...);
-}
-
-/// Gets a palette value.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function _palette($keys...) {
-	@return val($palette, $keys...);
-}
-
-/// Gets a size value.
-/// @param {string} $keys Key(s).
-/// @return {string} Value.
-@function _size($keys...) {
-	@return val($size, $keys...);
-}
--- a/_sass/libs/_html-grid.scss
+++ b/_sass/libs/_html-grid.scss
@ -1,149 +0,0 @@
-// html-grid.scss v1.0 | @ajlkn | MIT licensed */
-
-// Mixins.
-
-	/// Initializes the current element as an HTML grid.
-	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
-	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
-	@mixin html-grid($gutters: 1.5em, $suffix: '') {
-
-		// Initialize.
-			$cols: 12;
-			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
-			$unit: 100% / $cols;
-
-			// Suffixes.
-				$suffixes: null;
-
-				@if (type-of($suffix) == 'list') {
-					$suffixes: $suffix;
-				}
-				@else {
-					$suffixes: ($suffix);
-				}
-
-			// Gutters.
-				$guttersCols: null;
-				$guttersRows: null;
-
-				@if (type-of($gutters) == 'list') {
-
-					$guttersCols: nth($gutters, 1);
-					$guttersRows: nth($gutters, 2);
-
-				}
-				@else {
-
-					$guttersCols: $gutters;
-					$guttersRows: 0;
-
-				}
-
-		// Row.
-			display: flex;
-			flex-wrap: wrap;
-			box-sizing: border-box;
-			align-items: stretch;
-
-			// Columns.
-				> * {
-					box-sizing: border-box;
-				}
-
-			// Gutters.
-				&.gtr-uniform {
-					> * {
-						> :last-child {
-							margin-bottom: 0;
-						}
-					}
-				}
-
-			// Alignment.
-				&.aln-left {
-					justify-content: flex-start;
-				}
-
-				&.aln-center {
-					justify-content: center;
-				}
-
-				&.aln-right {
-					justify-content: flex-end;
-				}
-
-				&.aln-top {
-					align-items: flex-start;
-				}
-
-				&.aln-middle {
-					align-items: center;
-				}
-
-				&.aln-bottom {
-					align-items: flex-end;
-				}
-
-		// Step through suffixes.
-			@each $suffix in $suffixes {
-
-				// Suffix.
-					@if ($suffix != '') {
-						$suffix: '-' + $suffix;
-					}
-					@else {
-						$suffix: '';
-					}
-
-				// Row.
-
-					// Important.
-						> .imp#{$suffix} {
-							order: -1;
-						}
-
-					// Columns, offsets.
-						@for $i from 1 through $cols {
-							> .col-#{$i}#{$suffix} {
-								width: $unit * $i;
-							}
-
-							> .off-#{$i}#{$suffix} {
-								margin-left: $unit * $i;
-							}
-						}
-
-					// Step through multipliers.
-						@each $multiplier in $multipliers {
-
-							// Gutters.
-								$class: null;
-
-								@if ($multiplier != 1) {
-									$class: '.gtr-' + ($multiplier * 100);
-								}
-
-								&#{$class} {
-									margin-top: ($guttersRows * $multiplier * -1);
-									margin-left: ($guttersCols * $multiplier * -1);
-
-									> * {
-										padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
-									}
-
-									// Uniform.
-										&.gtr-uniform {
-											margin-top: $guttersCols * $multiplier * -1;
-
-											> * {
-												padding-top: $guttersCols * $multiplier;
-											}
-										}
-
-								}
-
-						}
-
-			}
-
-	}
--- a/_sass/libs/_mixins.scss
+++ b/_sass/libs/_mixins.scss
@ -1,78 +0,0 @@
-/// Makes an element's :before pseudoelement a FontAwesome icon.
-/// @param {string} $content Optional content value to use.
-/// @param {string} $category Optional category to use.
-/// @param {string} $where Optional pseudoelement to target (before or after).
-@mixin icon($content: false, $category: regular, $where: before) {
-
-	text-decoration: none;
-
-	&:#{$where} {
-
-		@if $content {
-			content: $content;
-		}
-
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-font-smoothing: antialiased;
-		display: inline-block;
-		font-style: normal;
-		font-variant: normal;
-		text-rendering: auto;
-		line-height: 1;
-		text-transform: none !important;
-
-		@if ($category == brands) {
-			font-family: 'Font Awesome 5 Brands';
-		}
-		@elseif ($category == solid) {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 900;
-		}
-		@else {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 400;
-		}
-
-	}
-
-}
-
-/// Applies padding to an element, taking the current element-margin value into account.
-/// @param {mixed} $tb Top/bottom padding.
-/// @param {mixed} $lr Left/right padding.
-/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
-/// @param {bool} $important If true, adds !important.
-@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
-
-	@if $important {
-		$important: '!important';
-	}
-
-	$x: 0.1em;
-
-	@if unit(_size(element-margin)) == 'rem' {
-		$x: 0.1rem;
-	}
-
-	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
-
-}
-
-/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
-/// @param {string} $svg SVG data URL.
-/// @return {string} Encoded SVG data URL.
-@function svg-url($svg) {
-
-	$svg: str-replace($svg, '"', '\'');
-	$svg: str-replace($svg, '%', '%25');
-	$svg: str-replace($svg, '<', '%3C');
-	$svg: str-replace($svg, '>', '%3E');
-	$svg: str-replace($svg, '&', '%26');
-	$svg: str-replace($svg, '#', '%23');
-	$svg: str-replace($svg, '{', '%7B');
-	$svg: str-replace($svg, '}', '%7D');
-	$svg: str-replace($svg, ';', '%3B');
-
-	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
-
-}
--- a/_sass/libs/_reset.scss
+++ b/_sass/libs/_reset.scss
@ -0,0 +1,78 @@
+///
+/// Story by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+html, body, div, span, applet, object,
+iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+pre, a, abbr, acronym, address, big, cite,
+code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var, b,
+u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside,
+canvas, details, embed, figure, figcaption,
+footer, header, hgroup, menu, nav, output, ruby,
+section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  line-height: 1.75;
+}
+
+ol, ul {
+  list-style:none;
+}
+
+blockquote,	q {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+}
+
+mark {
+  background-color: transparent;
+  color: inherit;
+}
+
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input, select, textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+}
--- a/_sass/libs/_vars.scss
+++ b/_sass/libs/_vars.scss
@ -1,85 +1,117 @@
-// Misc.
-  $misc: (
-    z-index-base:    10000,
-    overlay-opacity:  0.75,
-    lightbox-opacity:  0.75,
-    gallery-limit:    32,
-    items-limit:    16
-  );
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {

-// Duration.
-  $duration: (
-    menu:        0.5s,
-    transition:      0.2s,
-    gallery-lightbox:  0.5s,
-    gallery-delay:    0.15s,
-    items-delay:    0.15s,
-    on-load:      0.75s,
-    on-scroll:      0.75s
-  );
+	$result: null;

-// Size.
-  $size: (
-    border-radius:    4px,
-    border-radius-alt:  0.5rem,
-    border-width:    1px,
-    element-height:    2.75rem,
-    element-margin:    2rem,
-    gutter:        3.5rem,
-    inner:        64rem,
-    padding:      (
-      default:    7rem,
-      xlarge:      5rem,
-      large:      4rem,
-      medium:      3rem,
-      small:      2rem
-    )
-  );
+	@if type-of($index) != number {
+		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+	}
+	@else if $index == 0 {
+		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+	}
+	@else if abs($index) > length($list) {
+		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+	}
+	@else {

-// Font.
-  $font: (
-    family:        ('Astloch', Helvetica, sans-serif),
-    family-fixed:    ('Courier New', monospace),
-    weight:        400,
-    weight-bold:    700,
-    kerning:      -0.025em,
-    kerning-alt:    0.125em
-  );
+		$result: ();
+		$index: if($index < 0, length($list) + $index + 1, $index);

-// Palette.
-  $palette: (
-    color1:        #30363d,
-    color2:        #db8992,
-    color3:        #ab7aad,
-    color4:        #897cad,
-    color5:        #7794ce,
-    color6:        #64abb4,
-    color7:        #6ba78c,
+		@for $i from 1 through length($list) {
+
+			@if $i != $index {
+				$result: append($result, nth($list, $i));
+			}
+
+		}
+
+	}
+
+	@return $result;
+
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+
+	@if nth($keys, 1) == null {
+		$keys: remove-nth($keys, 1);
+	}
+
+	@each $key in $keys {
+		$map: map-get($map, $key);
+	}
+
+	@return $map;
+
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+// /// Gets a palette value.
+// /// @param {string} $keys Key(s).
+// /// @return {string} Value.
+// @function _palette($keys...) {
+// 	@return val($palette, $keys...);
+// }


-    bg:          #111111,
-    bg-alt:        rgb(238, 238, 238),
-    bg-transparent: rgba(238, 238, 238, 0.5),
-    fg:          rgb(238, 238, 238),
-    fg-bold:      rgb(238, 238, 238),
-    fg-light:      rgba(238, 238, 238, 0.75),
-    border:        rgba(0, 0, 0, 0.2),
-    border-alt:      rgba(0, 0, 0, 0.075),
-    border-bg:      rgba(0, 0, 0, 0.05),
-    border-darken:  rgba(0, 0, 0, 0.25),
-    border-dark:    rgba(0, 0, 0, 0.85),
-    accent:        rgba(233, 77, 29, 1),
-    accent-dark: rgb(0, 0, 0),

-    invert: (
-      bg:        #000000,
-      bg-alt:      #222222,
-      fg:        #ffffff,
-      fg-bold:    #ffffff,
-      fg-light:    #ffffff,
-      border:      rgb(0, 0, 0),
-      border-alt:    rgba(238, 238, 238, 0.25),
-      border-bg:    rgba(0, 0, 0, 0.125),
-      accent:      #47D3E5
-    ),
-  );
+@font-face {
+  font-family: 'Terminus';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Terminus Regular'), local('Terminus-Regular'), url(/assets/fonts/terminus/TerminusTTF.ttf) format('truetype');
+  }
+
+@font-face {
+  font-family: 'Terminus';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Terminus Bold'), local('Terminus-Vold'), url(/assets/fonts/terminus/TerminusTTF-Bold.ttf) format('truetype');
+  }
+
+$font: (
+  title:         ('Terminus', 'Lucida Console', Monaco, monospace),
+  family:        ('Terminus', 'Poppins', 'Arial', 'Helvetica', sans-serif),
+  family-fixed:  ('Terminus', 'Lucida Console', Monaco, monospace),
+  weight:       400,
+  weight-bold:  700,
+  kerning:      0em,
+  kerning-alt:  0.125em
+);
+:root {
+  --border-radius: 3px;
+  --max-width: 1000px;
+  --anim-speed: 200ms;
+
+}
+
+// // Palette.
+// $palette: (
+
+//   bg:         #0C0F0A, 
+//   bg-alt:     rgba(12, 15, 10, 0.5), 
+//   fg:         #FFFFFF,
+//   fg-alt:     rgba(255, 255, 255, 0.5),
+//   border:     #000000,
+//   border-alt: rgba(0, 0, 0, 0.75),
+//   accent1:    #41EAD4,
+//   accent1-alt:rgba(65, 234, 212, 0.75),
+//   accent2:    #FF206E,
+//   accent2-alt:rgba(255, 32, 110, 0.75),
+
+// );
--- a/_sass/libs/_vendor.scss
+++ b/_sass/libs/_vendor.scss
@ -1,376 +0,0 @@
-// vendor.scss v1.0 | @ajlkn | MIT licensed */
-
-// Vars.
-
-	/// Vendor prefixes.
-	/// @var {list}
-	$vendor-prefixes: (
-		'-moz-',
-		'-webkit-',
-		'-ms-',
-		''
-	);
-
-	/// Properties that should be vendorized.
-	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
-	/// @var {list}
-	$vendor-properties: (
-
-		// Animation.
-			'animation',
-			'animation-delay',
-			'animation-direction',
-			'animation-duration',
-			'animation-fill-mode',
-			'animation-iteration-count',
-			'animation-name',
-			'animation-play-state',
-			'animation-timing-function',
-
-		// Appearance.
-			'appearance',
-
-		// Backdrop filter.
-			'backdrop-filter',
-
-		// Background image options.
-			'background-clip',
-			'background-origin',
-			'background-size',
-
-		// Box sizing.
-			'box-sizing',
-
-		// Clip path.
-			'clip-path',
-
-		// Filter effects.
-			'filter',
-
-		// Flexbox.
-			'align-content',
-			'align-items',
-			'align-self',
-			'flex',
-			'flex-basis',
-			'flex-direction',
-			'flex-flow',
-			'flex-grow',
-			'flex-shrink',
-			'flex-wrap',
-			'justify-content',
-			'order',
-
-		// Font feature.
-			'font-feature-settings',
-			'font-language-override',
-			'font-variant-ligatures',
-
-		// Font kerning.
-			'font-kerning',
-
-		// Fragmented borders and backgrounds.
-			'box-decoration-break',
-
-		// Grid layout.
-			'grid-column',
-			'grid-column-align',
-			'grid-column-end',
-			'grid-column-start',
-			'grid-row',
-			'grid-row-align',
-			'grid-row-end',
-			'grid-row-start',
-			'grid-template-columns',
-			'grid-template-rows',
-
-		// Hyphens.
-			'hyphens',
-			'word-break',
-
-		// Masks.
-			'mask',
-			'mask-border',
-			'mask-border-outset',
-			'mask-border-repeat',
-			'mask-border-slice',
-			'mask-border-source',
-			'mask-border-width',
-			'mask-clip',
-			'mask-composite',
-			'mask-image',
-			'mask-origin',
-			'mask-position',
-			'mask-repeat',
-			'mask-size',
-
-		// Multicolumn.
-			'break-after',
-			'break-before',
-			'break-inside',
-			'column-count',
-			'column-fill',
-			'column-gap',
-			'column-rule',
-			'column-rule-color',
-			'column-rule-style',
-			'column-rule-width',
-			'column-span',
-			'column-width',
-			'columns',
-
-		// Object fit.
-			'object-fit',
-			'object-position',
-
-		// Regions.
-			'flow-from',
-			'flow-into',
-			'region-fragment',
-
-		// Scroll snap points.
-			'scroll-snap-coordinate',
-			'scroll-snap-destination',
-			'scroll-snap-points-x',
-			'scroll-snap-points-y',
-			'scroll-snap-type',
-
-		// Shapes.
-			'shape-image-threshold',
-			'shape-margin',
-			'shape-outside',
-
-		// Tab size.
-			'tab-size',
-
-		// Text align last.
-			'text-align-last',
-
-		// Text decoration.
-			'text-decoration-color',
-			'text-decoration-line',
-			'text-decoration-skip',
-			'text-decoration-style',
-
-		// Text emphasis.
-			'text-emphasis',
-			'text-emphasis-color',
-			'text-emphasis-position',
-			'text-emphasis-style',
-
-		// Text size adjust.
-			'text-size-adjust',
-
-		// Text spacing.
-			'text-spacing',
-
-		// Transform.
-			'transform',
-			'transform-origin',
-
-		// Transform 3D.
-			'backface-visibility',
-			'perspective',
-			'perspective-origin',
-			'transform-style',
-
-		// Transition.
-			'transition',
-			'transition-delay',
-			'transition-duration',
-			'transition-property',
-			'transition-timing-function',
-
-		// Unicode bidi.
-			'unicode-bidi',
-
-		// User select.
-			'user-select',
-
-		// Writing mode.
-			'writing-mode',
-
-	);
-
-	/// Values that should be vendorized.
-	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
-	/// @var {list}
-	$vendor-values: (
-
-		// Cross fade.
-			'cross-fade',
-
-		// Element function.
-			'element',
-
-		// Filter function.
-			'filter',
-
-		// Flexbox.
-			'flex',
-			'inline-flex',
-
-		// Grab cursors.
-			'grab',
-			'grabbing',
-
-		// Gradients.
-			'linear-gradient',
-			'repeating-linear-gradient',
-			'radial-gradient',
-			'repeating-radial-gradient',
-
-		// Grid layout.
-			'grid',
-			'inline-grid',
-
-		// Image set.
-			'image-set',
-
-		// Intrinsic width.
-			'max-content',
-			'min-content',
-			'fit-content',
-			'fill',
-			'fill-available',
-			'stretch',
-
-		// Sticky position.
-			'sticky',
-
-		// Transform.
-			'transform',
-
-		// Zoom cursors.
-			'zoom-in',
-			'zoom-out',
-
-	);
-
-// Functions.
-
-	/// Removes a specific item from a list.
-	/// @author Hugo Giraudel
-	/// @param {list} $list List.
-	/// @param {integer} $index Index.
-	/// @return {list} Updated list.
-	@function remove-nth($list, $index) {
-
-		$result: null;
-
-		@if type-of($index) != number {
-			@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
-		}
-		@else if $index == 0 {
-			@warn "List index 0 must be a non-zero integer for `remove-nth`.";
-		}
-		@else if abs($index) > length($list) {
-			@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
-		}
-		@else {
-
-			$result: ();
-			$index: if($index < 0, length($list) + $index + 1, $index);
-
-			@for $i from 1 through length($list) {
-
-				@if $i != $index {
-					$result: append($result, nth($list, $i));
-				}
-
-			}
-
-		}
-
-		@return $result;
-
-	}
-
-	/// Replaces a substring within another string.
-	/// @author Hugo Giraudel
-	/// @param {string} $string String.
-	/// @param {string} $search Substring.
-	/// @param {string} $replace Replacement.
-	/// @return {string} Updated string.
-	@function str-replace($string, $search, $replace: '') {
-
-		$index: str-index($string, $search);
-
-		@if $index {
-			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-		}
-
-		@return $string;
-
-	}
-
-	/// Replaces a substring within each string in a list.
-	/// @param {list} $strings List of strings.
-	/// @param {string} $search Substring.
-	/// @param {string} $replace Replacement.
-	/// @return {list} Updated list of strings.
-	@function str-replace-all($strings, $search, $replace: '') {
-
-		@each $string in $strings {
-			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
-		}
-
-		@return $strings;
-
-	}
-
-// Mixins.
-
-	/// Wraps @content in vendorized keyframe blocks.
-	/// @param {string} $name Name.
-	@mixin keyframes($name) {
-
-		@-moz-keyframes #{$name} { @content; }
-		@-webkit-keyframes #{$name} { @content; }
-		@-ms-keyframes #{$name} { @content; }
-		@keyframes #{$name} { @content; }
-
-	}
-
-	/// Vendorizes a declaration's property and/or value(s).
-	/// @param {string} $property Property.
-	/// @param {mixed} $value String/list of value(s).
-	@mixin vendor($property, $value) {
-
-		// Determine if property should expand.
-			$expandProperty: index($vendor-properties, $property);
-
-		// Determine if value should expand (and if so, add '-prefix-' placeholder).
-			$expandValue: false;
-
-			@each $x in $value {
-				@each $y in $vendor-values {
-					@if $y == str-slice($x, 1, str-length($y)) {
-
-						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
-						$expandValue: true;
-
-					}
-				}
-			}
-
-		// Expand property?
-			@if $expandProperty {
-			    @each $vendor in $vendor-prefixes {
-			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
-			    }
-			}
-
-		// Expand just the value?
-			@elseif $expandValue {
-			    @each $vendor in $vendor-prefixes {
-			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
-			    }
-			}
-
-		// Neither? Treat them as a normal declaration.
-			@else {
-		        #{$property}: #{$value};
-			}
-
-	}
--- a/_sass/player.scss
+++ b/_sass/player.scss
@ -1,136 +0,0 @@
-/* Audio Player Styles
-================================================== */
-
-/* Default / Desktop / Firefox */
-
-audio {
-  margin: 0;
-  width: 100%;
-}
-
-#mainwrap {
-  border-radius: 5px;
-  width: 100%;
-  ul {
-    list-style: none;
-    padding: 0;
-    li:last-child {
-      border-radius: 0 0 5px 5px;
-    }
-  }
-}
-
-#audiowrap {
-  background-color: _palette(accent-dark);
-  margin: 0 auto 0 auto;
-}
-
-#plwrap {
-  margin: 0 auto;
-}
-
-#tracks {
-  min-height: 65px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-
-}
-
-
-#nowPlay {
-  display: flex;
-  width: 100%;
-  height: 60px;
-  flex-wrap: unset;
-  justify-content: center;
-  align-items: center;
-  background-color: _palette(accent-dark);
-  border-radius: 5px 5px 0 0;
-}
-
-#npTitle {
-  margin: 0;
-  padding: 21px;
-
-}
-
-#npAction {
-  display: none;
-  margin: 0;
-  padding: 21px;
-  font-size: 12px;
-}
-
-#plList {
-  margin: 0;
-}
-
-#plList li {
-  background-color: _palette(border-darken);
-  cursor: pointer;
-  margin: 0;
-  padding: 21px 0;
-  border: 1px solid _palette(accent-dark);
-  border-top: 0;
-  transition: all 400ms ease-in-out;
-}
-
-#plList li:hover {
-  background-color: _palette(border-alt);
-  transition: all 400ms ease-in-out;
-}
-
-.plItem {
-  position: relative;
-}
-
-.plTitle {
-  left: 75px;
-  overflow: hidden;
-  position: absolute;
-  right: 65px;
-  text-overflow: ellipsis;
-  top: 0;
-  white-space: nowrap;
-  font-weight: bold;
-  padding-right: 10px;
-}
-
-.plNum {
-  padding-left: 21px;
-  width: 65px;
-}
-
-.plLength {
-  padding-left: 21px;
-  position: absolute;
-  right: 21px;
-  top: 0;
-}
-
-.plSel, .plSel:hover {
-  background-color: _palette(border-alt)!important;
-  cursor: default!important;
-  border-radius: 5px;
-
-}
-
-a[id^="btn"] {
-  background-color: _palette(border-darken);
-  color: _palette(fg);
-  cursor: pointer;
-  margin: 0;
-  padding: 0 27px 0 21px;
-  text-decoration: none;
-}
-
-
-a[id^="btn"]::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-#noJSalbum {
-  display: none;
-}
--- a/_sass/staff.scss
+++ b/_sass/staff.scss
@ -0,0 +1,48 @@
+.staff {
+  max-width: var(--max-width);
+	padding: 0;
+	margin: auto;
+	list-style: none;
+
+  display: flex;
+  flex-wrap: wrap;
+	li {
+    flex: 1 1 300px;
+    display: flex;
+    flex-direction: column;
+		padding: 30px 20px;
+		box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+
+    .square-image {
+      background-size: cover;
+      background-position: center;
+      width: 100px;
+      height: 100px;
+      border-radius: 200px;
+      margin: 0 auto;
+
+    }
+	}
+
+	.name {
+    margin-top: 20px;
+    font-weight: 700;
+	}
+
+	.position {
+		color: var(--fg);
+		font-size: 1em;
+  }
+  @media only screen and (max-width: 769px) {
+    li {
+      .square-image {
+        width: 70px;
+        height: 70px;
+
+
+      }
+    }
+  }
+}
--- a/_sass/svg.scss
+++ b/_sass/svg.scss
@ -0,0 +1,9 @@
+#linearGradient2060 {
+  stop { 
+    stop-color: var(--accent2);
+  }
+  stop:nth-child(even){
+    stop-color: var(--fg);
+  }
+
+}
--- a/_sass/trackplayer.scss
+++ b/_sass/trackplayer.scss
@ -0,0 +1,116 @@
+
+#trackArt {
+  z-index: 5;
+  overflow-x: hidden;
+  flex: 1 1 50%;
+  min-width: 512px;
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  background-size: 100%;
+  background: var(--bg-alt);
+  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--accent1-alt) 180%);
+
+  > section {
+    position: absolute;
+    height: 100vh;
+    width: 50%;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    > * {
+      margin: 40px;
+    }
+
+  }
+  .coverartwrapper {
+
+    margin-top: 120px;
+    margin-left: 50%;
+    transform: translateX(-50%);
+
+    width: 50%;
+    padding-top: 50%; /* 1:1 Aspect Ratio */
+    position: relative; /* If you want text inside of it */
+  }
+   .coverartwrapped {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: 100%;
+    padding-bottom: 0;
+    background-size: cover;
+  }
+  .playbutton {
+    cursor: pointer;
+    justify-self: center;
+  }
+
+ }
+ #trackInfo {
+  flex: 1 1 50%;
+  z-index: 5;
+  height:100vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+  section {
+    padding: 20px;
+    background-color: var(--bg);
+    > * {
+      margin: 20px;
+    }
+    .info {
+      margin: 20px;
+      padding: 0;
+    }
+    p:first-child {
+      margin-top:80px;
+    }
+  }
+
+  .post-nav-next {
+    text-align: right;
+  }
+  .post-nav {
+    text-align: left;
+  }
+
+ }
+ .playerlogo {
+
+ }
+
+@media only screen and (max-width: 1023px) {
+  #trackArt {
+    z-index: 5;
+    min-width: 100%;
+    section {
+      position: absolute;
+      top: 0;
+      margin: 0;
+      width: 100%;
+      height: 80vh;
+    }
+  }
+ #trackInfo {
+  z-index: 5;
+    height: unset;
+    overflow-y: unset;
+    section {
+      p:first-child {
+        margin-top:20px;
+      }
+    }
+  }
+}
+
+.bouncer {
+  -webkit-animation: backgroundSize 10s ease infinite;
+  -moz-animation: backgroundSize 10s ease infinite;
+  animation: backgroundSize 10s ease infinite;
+}
--- a/_sass/zafari.scss
+++ 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
+      }
+    }
+  }
+}
--- a/Show more
+++ b/Show more