canapayyy

2024-12-21 10:21:55 +00:00 · 2019-11-28 02:05:31 +01:00 · 2019-11-28 02:05:31 +01:00 · 3e647135a6
commit 3e647135a6
parent dd4b2c71ad
15 changed files with 316 additions and 94 deletions
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@ -0,0 +1,110 @@
+class MobileMenu {
+  constructor() {
+    this.btn = document.querySelector('[data-menu="btn"]')
+    this.navigation = document.querySelector('[data-menu="navigation"]')
+    this.overlay = document.querySelector('[data-menu="overlay"]')
+
+    this.activeClass = 'active'
+
+    this.startDistance = 0
+    this.movedDistance = 0
+    this.distance = 0
+
+  }
+
+  init () {
+    this.bindEvents()
+  }
+
+  bindEvents () {
+    document.addEventListener('touchstart', (event) => {
+      this.touchStart(event)
+    }, false)
+    document.addEventListener('touchmove', (event) => {
+      this.touchMove(event)
+    }, false)
+    document.addEventListener('touchend', (event) => {
+      this.touchEnd(event)
+    }, false)
+    this.btn.addEventListener('click', (event) => {
+      this.toggleMenu(event)
+    }, false)
+    this.overlay.addEventListener('touchstart', (event) => {
+      this.touchAction = true
+    }, false)
+    this.overlay.addEventListener('touchend', (event) => {
+      this.toggleMenu(event)
+      this.touchAction = false
+    }, false)
+    this.overlay.addEventListener('click', (event) => {
+      this.toggleMenu(event)
+      if (this.touchAction) return
+    }, false)
+  }
+
+  toggleMenu (event) {
+    if (!this.isMenuOpen()) {
+      this.showMenu()
+    } else {
+      this.hideMenu()
+    }
+  }
+
+  isMenuOpen () {
+    return this.navigation.classList.contains(this.activeClass)
+  }
+
+  hideMenu () {
+    this.navigation.style.transform = ''
+    this.navigation.classList.remove(this.activeClass)
+    this.overlay.classList.remove(this.activeClass)
+    this.btn.setAttribute('aria-expanded', 'false')
+    this.navigation.setAttribute('aria-hidden', 'true')
+  }
+
+  showMenu () {
+    this.navigation.classList.add(this.activeClass)
+    this.overlay.classList.add(this.activeClass)
+    this.btn.setAttribute('aria-expanded', 'true')
+    this.navigation.setAttribute('aria-hidden', 'false')
+  }
+
+  transitionEnd () {
+    if (!this.isMenuOpen()) {
+      this.hideMenu()
+    }
+  }
+
+  touchStart (event) {
+    if (!this.isMenuOpen()) {
+      return
+    }
+    this.startDistance = event.touches[0].pageX
+    this.distance = this.startDistance
+  }
+
+  touchMove (event) {
+    if (!this.isMenuOpen()) {
+      return
+    }
+
+    this.movedDistance = event.touches[0].pageX
+
+    let translate = Math.min(0, this.movedDistance - this.startDistance)
+    if (translate < 0) {
+      event.preventDefault()
+    }
+    this.navigation.style.transform = 'translateX(' + translate + 'px)'
+  }
+
+  touchEnd (event) {
+    let endDistance = Math.min(0, this.movedDistance - this.startDistance)
+
+    this.navigation.style.transform = ''
+    if (endDistance < 0 && this.movedDistance !== 0) {
+      this.hideMenu()
+    }
+  }
+}
+
+new MobileMenu().init()
--- a/assets/js/random.js
+++ b/assets/js/random.js
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -8,5 +8,11 @@
    {{ block "main" . }}{{ end }}

    {{ block "footer" . }}{{ partial "footer" . }}{{end}}
+
+    {{ $mobilemenu := resources.Get "js/menu.js" }}
+    {{ $randomizer := resources.Get "js/random.js" }}
+    {{ $js := slice $mobilemenu $randomizer | resources.Concat "js/bundle.js" }}
+    {{ $secureJS := $js | resources.Fingerprint "sha512" }}
+    <script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
  </body>
 </html>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,82 @@
+{{ define "main" }}
+<main>
+  <div class="album">
+    <div class="container">
+      <div class="album-layout">
+        <div class="album-cover">
+          {{ $original := resources.Get .Params.cover }}
+          {{ $coverSmall := $original.Resize "x250" }}
+          {{ $coverMedium := $original.Resize "x500" }}
+          {{ $coverBig := $original.Resize "x1000" }}
+          {{ $placeholder := $original.Resize "x1" }}
+          <img
+            class="album-cover__visual"
+            width="500"
+            height="500"
+            style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
+            src="{{ $coverMedium.Permalink }}"
+            srcset="{{ $coverSmall.Permalink }} 250w, {{ $coverMedium.Permalink }} 500w, {{ $coverBig.Permalink }} 1000w"
+            alt="{{ .Title }} album's cover"
+            title=":)"
+          >
+        </div>
+        <div class="album-infos">
+          <h1 class="album-name">{{ .Title }}</h1>
+          <strong class="album-artist">by {{ .Params.artist }}</strong>
+          <ul class="album-tags">
+            {{ range .Params.styles }}
+              <li class="album-tags__item">{{ . }}</li>
+            {{ end }}
+          </ul>
+
+          <div class="album-links">
+            Listen on&nbsp;:
+            {{ if not (.Params.links.spotify | or .Params.links.youtube | or .Params.links.applemusic | or .Params.links.soundcloud | or .Params.links.bandcamp | or .Params.links.googleplay | or .Params.links.deezer) }}
+            <div>
+              There are no links (for now~)
+            </div>
+            {{ else }}
+              <div class="album-links__list">
+                {{ if .Params.links.spotify }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Spotify" data-tooltip="Spotify" href="{{ .Params.links.spotify }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/spotify" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.youtube }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Youtube" data-tooltip="Youtube" href="{{ .Params.links.youtube }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/youtube" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.applemusic }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Apple Music" data-tooltip="Apple Music" href="{{ .Params.links.applemusic }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/applemusic" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.soundcloud }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Soundcloud" data-tooltip="Soundcloud" href="{{ .Params.links.soundcloud }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/soundcloud" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.bandcamp }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Bandcamp" data-tooltip="Bandcamp" href="{{ .Params.links.bandcamp }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/bandcamp" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.googleplay }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Google Play" data-tooltip="Google Play" href="{{ .Params.links.googleplay }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/googleplay" .}}
+                </a>
+                {{ end }}
+                {{ if .Params.links.deezer }}
+                <a class="album-links__item tooltip tooltip--bottom" aria-label="Deezer" data-tooltip="Deezer" href="{{ .Params.links.deezer }}" target="_blank" rel="noreferrer">
+                  {{ partial "social/deezer" .}}
+                </a>
+                {{ end }}
+              </div>
+            {{ end }}
+          </div>
+        </div>
+    </div>
+  </div>
+</main>
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,33 +1,72 @@
 {{ define "main" }}
-<main>
-    <div class="home-head">
-      <div class="container">
-        <div class="home-head__container">
-          <h1 class="home-head__title" data-text="Handpicked Albums">
-            <span class="glitch" data-text="Handpicked">Handpicked</span> <span class="glitch" data-text="Albums">Albums</span>
-          </h1>
-          <p class="home-head__subtitle">by the Glitch Family</p>
+  {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+  <main>
+    {{ if .IsHome | (not $paginator.HasPrev) }}
+      <div class="home-head">
+        <div class="container">
+          <div class="home-head__container">
+            <h1 class="home-head__title" data-text="Handpicked Albums">
+              <span class="glitch" data-text="Handpicked">Handpicked</span> <span class="glitch" data-text="Albums">Albums</span>
+            </h1>
+            <p class="home-head__subtitle">by the Glitch Family</p>
+          </div>
        </div>
      </div>
+    {{ else }}
+    <div class="catalog-head">
+      <div class="container">
+        <h1 class="catalog-head__title">
+          <span class="catalog-head__title--primary">Albums</span>
+          <span class="catalog-head__title--secondary">Page {{ $paginator.PageNumber }}</span>
+        </h1>
+      </div>
    </div>
+    {{ end }}
+

    <!-- Album list -->
    <div class="content">
      <div class="container">
-        {{ partial "musics" . }}
+        <div class="grid grid-catalog">
+          {{ range sort $paginator.Pages "Date" "desc" }}
+            {{ $original := resources.Get .Params.cover }}
+            {{ $cover := $original.Resize "x320" }}
+            {{ $cover2x := $original.Resize "x640" }}
+            {{ $placeholder := $cover.Resize "x1" }}
+            <div class="catalog-item">
+              <a class="catalog-item__content" href="{{ .Permalink }}">
+                <h2 class="catalog-item__album">{{ .Title }}</h2>
+                <div class="catalog-item__artist">by {{ .Params.artist }}</div>
+                  <img
+                  class="catalog-item__visual"
+                  width="320"
+                  height="320"
+                  style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
+                  src="{{ $cover.Permalink }}"
+                  srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
+                  alt="{{ .Title }} album's cover'"
+                  title="{{ .Title }} album's cover'"
+                  >
+              </a>
+            </div>
+          {{ end }}
+        </div>
+
        {{ partial "pagination" . }}
      </div>
    </div>
    <!-- About  -->
-    <section class="home-about">
-      <div class="container">
-        <h2 class="visually-hidden">About</h2>
-        <p>At Glitch Family we love music, I mean we LOVE music! And we also LOVE great album covers. So we decided to make a place where we can showcase albums that are dear to us.</p>
-        <p>
-          This is Now Playing.<br>
-          A Glitch Family’s project.
-        </p>
-      </div>
-    </section>
+    {{ if not $paginator.HasPrev }}
+      <section class="home-about">
+        <div class="container">
+          <h2 class="visually-hidden">About</h2>
+          <p>At Glitch Family we love music, I mean we LOVE music! And we also LOVE great album covers. So we decided to make a place where we can showcase albums that are dear to us.</p>
+          <p>
+            This is Now Playing.<br>
+            A Glitch Family’s project.
+          </p>
+        </div>
+      </section>
+    {{ end }}
  </main>
 {{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -28,6 +28,6 @@
  <meta name="twitter:description" content="Handpicked Albums by the Glitch Family" />

  {{ $sass := resources.Get "/scss/style.scss" }}
-  {{ $style := $sass | resources.ToCSS }}
+  {{ $style := $sass | resources.ToCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $style.Permalink }}">
 </head>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,4 +1,8 @@
-<header class="header">
+{{ if .IsHome }}
+  <header class="header header--home">
+{{ else }}
+  <header class="header">
+{{ end }}
  <div class="container">
    <div class="header__left">
      <a class="header__logo glitch--hover" data-text="Now Playing" href="/" title="Homepage">Now Playing</a>
@ -6,12 +10,12 @@
        Great music should be shared
      </div>
    </div>
-    <nav class="navigation" >
+    <nav class="navigation" data-menu="navigation">
      <a class="navigation__item active" href="/">Latest</a>
-      <button class="navigation__item">Random</button>
+      <button class="navigation__item" data-random="btn">Random</button>
    </nav>
-    <div class="navigation__mobileOverlay"></div>
-    <button class="navigation__mobileBtn">
+    <div class="navigation__mobileOverlay" data-menu="overlay"></div>
+    <button class="navigation__mobileBtn" data-menu="btn">
      Menu
    </button>
  </div>
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@ -1,75 +1,23 @@
-<!-- pagination -->
-  <div class="mt-5">
-    {{"<!-- pagination -->" | safeHTML }}
-    {{ $paginator := .Paginator }}
-    <!-- Number of links either side of the current page. -->
-    {{ $adjacent_links := 2 }}
-    <!-- $max_links = ($adjacent_links * 2) + 1 -->
-    {{ $max_links := (add (mul $adjacent_links 2) 1) }}
-    <!-- $lower_limit = $adjacent_links + 1 -->
-    {{ $lower_limit := (add $adjacent_links 1) }}
-    <!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
-    {{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
-    <!-- If there's more than one page. -->
-    {{ if gt $paginator.TotalPages 1 }}
-    <nav aria-label="Page navigation">
-      <ul class="pagination justify-content-center align-items-center">
-        <!-- Previous page. -->
+{{ $paginator := .Paginator }}
+<!-- Pagination -->
+{{ if gt $paginator.TotalPages 1 }}
+  <div class="pagination">
+    <div class="container">
+      {{ if $paginator.HasNext }}
+        <a class="btn btn--primary btn--big w100" href="{{ $paginator.Next.URL }}">Load moaaaar</a>
+      {{ end }}
+      <div class="pagination__side">
        {{ if $paginator.HasPrev }}
-        <li class="page-item">
-          <a href="{{ $paginator.Prev.URL }}" class="page-link">
-            &laquo;
-          </a>
-        </li>
-        {{ end }}
-        <!-- Page numbers. -->
-        {{ range $paginator.Pagers }}
-        {{ $.Scratch.Set "page_number_flag" false }}
-        <!-- Advanced page numbers. -->
-        {{ if gt $paginator.TotalPages $max_links }}
-        <!-- Lower limit pages. -->
-        <!-- If the user is on a page which is in the lower limit.  -->
-        {{ if le $paginator.PageNumber $lower_limit }}
-        <!-- If the current loop page is less than max_links. -->
-        {{ if le .PageNumber $max_links }}
-        {{ $.Scratch.Set "page_number_flag" true }}
-        {{ end }}
-        <!-- Upper limit pages. -->
-        <!-- If the user is on a page which is in the upper limit. -->
-        {{ else if ge $paginator.PageNumber $upper_limit }}
-        <!-- If the current loop page is greater than total pages minus $max_links -->
-        {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
-        {{ $.Scratch.Set "page_number_flag" true }}
-        {{ end }}
-        <!-- Middle pages. -->
+          <a class="btn btn--secondary w100" href="{{ $paginator.Prev.URL }}">Prev</a>
        {{ else }}
-        {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
-        {{ $.Scratch.Set "page_number_flag" true }}
+          <span class="btn btn--secondary w100 disabled">Prev</span>
        {{ end }}
-        {{ end }}
-        <!-- Simple page numbers. -->
-        {{ else }}
-        {{ $.Scratch.Set "page_number_flag" true }}
-        {{ end }}
-        <!-- Output page numbers. -->
-        {{ if eq ($.Scratch.Get "page_number_flag") true }}
-        <li class="page-item{{ if eq . $paginator }} page-item active {{ end }}">
-          <a href="{{ .URL }}" class="page-link">
-            {{ .PageNumber }}
-          </a>
-        </li>
-        {{ end }}
-        {{ end }}
-        <!-- Next page. -->
        {{ if $paginator.HasNext }}
-        <li class="page-item">
-          <a href="{{ $paginator.Next.URL }}" class="page-link">
-            &raquo;
-          </a>
-        </li>
+          <a class="btn btn--secondary w100" href="{{ $paginator.Next.URL }}">Next</a>
+        {{ else }}
+          <span class="btn btn--secondary w100 disabled">Next</span>
        {{ end }}
-      </ul>
-    </nav>
-    {{ end }}
-    {{"<!-- /pagination -->" | safeHTML }}
+      </div>
+    </div>
  </div>
+{{ end}}
--- a/layouts/partials/social/applemusic.html
+++ b/layouts/partials/social/applemusic.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none">
+    <path fill="currentColor" d="M37.9008333,11.5 C38.3471667,15.5538333 34.7266667,19.7831667 30.9545,19.4885 C30.4886667,15.9481667 33.8188333,11.6646667 37.9008333,11.5 Z M37.409,46.1211667 C35.0863333,46.1666667 34.3388333,44.7453333 31.6846667,44.7453333 C29.0305,44.7453333 28.2028333,46.08 26.0058333,46.1666667 C22.29,46.3075 16.557,37.747 16.557,30.2828333 C16.557,23.4253333 21.3345,20.0258333 25.5096667,19.9651667 C27.7478333,19.924 29.8625,21.4731667 31.2296667,21.4731667 C32.6011667,21.4731667 35.1686667,19.6098333 37.8683333,19.885 C38.9971667,19.9305 42.1691667,20.34 44.208,23.3191667 C38.8021667,26.8443333 39.645,34.2218333 45.4451667,36.9345 C44.3098333,40.2256667 40.9103333,46.0583333 37.409,46.1211667 Z"/>
+  </g>
+</svg>
--- a/layouts/partials/social/bandcamp.html
+++ b/layouts/partials/social/bandcamp.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none">
+    <polygon fill="currentColor" points="13.667 41.833 38.625 41.833 48.333 20.167 23.375 20.167"/>
+  </g>
+</svg>
--- a/layouts/partials/social/deezer.html
+++ b/layouts/partials/social/deezer.html
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62">
+  <path fill="currentColor" fill-rule="evenodd" d="M14 39.127h6.199V41H14v-1.873zm0-.664v-1.855h6.239v1.855H14zm0-2.319V34.29h6.239v1.855H14zm0-2.55v-1.855h6.239v1.855H14zm0-2.384v-1.884h6.199v1.884H14zM20.95 41v-1.873h6.2V41h-6.2zm-.018-2.537v-1.855h6.238v1.855h-6.238zm.018-2.351v-1.885h6.2v1.885h-6.2zM27.9 41v-1.873h6.2V41h-6.2zm-.036-2.537v-1.855h6.238v1.855h-6.238zm0-2.319V34.29h6.238v1.855h-6.238zm0-2.55v-1.855h6.238v1.855h-6.238zm0-2.319V29.42h6.238v1.855h-6.238zm0-2.55v-1.856h6.238v1.855h-6.238zm.036-2.415v-1.885h6.2v1.885h-6.2zM34.85 41v-1.873h6.2V41h-6.2zm-.055-4.856V34.29h6.239v1.855h-6.239zm0-2.55v-1.855h6.239v1.855h-6.239zm.056-2.384v-1.884h6.198v1.884h-6.198zM41.8 41v-1.873H48V41h-6.2zm-.074-2.537v-1.855h6.239v1.855h-6.239zm0-2.319V34.29h6.239v1.855h-6.239zm0-2.55v-1.855h6.239v1.855h-6.239zm0-2.319V29.42h6.239v1.855h-6.239zm0-2.55v-1.856h6.239v1.855h-6.239zm0-2.551v-1.855h6.239v1.855h-6.239zm0-2.319V22h6.239v1.855h-6.239zm-6.932 14.608v-1.855h6.239v1.855h-6.239z"/>
+</svg>
--- a/layouts/partials/social/googleplay.html
+++ b/layouts/partials/social/googleplay.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="currentColor" d="M16.6566667,47.848 L31.871,32.6791667 L37.2313333,38.0265 L19.1483333,48.0516667 C18.4615,48.433 17.6186667,48.4265 16.9361667,48.0365 L16.6566667,47.848 Z M30.337,31.1495 L15.8333333,45.6098333 L15.8333333,16.6891667 L30.337,31.1495 Z M39.398,25.1738333 L46.483,29.102 C47.1806667,29.4898333 47.6118333,30.2135 47.6118333,31 C47.6118333,31.7865 47.1806667,32.5101667 46.483,32.898 L39.203,36.9323333 L33.405,31.1495 L39.398,25.1738333 Z M16.4963333,14.2928333 L16.9361667,13.9635 C17.6186667,13.5735 18.4615,13.567 19.1483333,13.9483333 L37.4263333,24.0818333 L31.871,29.6198333 L16.4963333,14.2928333 Z"/>
+  </g>
+</svg>
--- a/layouts/partials/social/soundcloud.html
+++ b/layouts/partials/social/soundcloud.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none">
+    <path fill="currentColor" d="M15.1118333,38.6353333 C14.2343333,37.8445 13.6666667,36.6788333 13.6666667,35.3593333 C13.6666667,34.042 14.2343333,32.8763333 15.1118333,32.0833333 L15.1118333,38.6353333 Z M18,39.6666667 C17.4735,39.6666667 17.2005,39.6731667 16.5548333,39.4673333 L16.5548333,31.2513333 C17.2395,31.0325 17.5623333,31.0411667 18,31.0758333 L18,39.6666667 Z M20.8881667,39.6666667 L19.4451667,39.6666667 L19.4451667,31.481 L19.8915,31.7431667 C20.0886667,30.9306667 20.4396667,30.1875 20.8903333,29.5266667 L20.8903333,39.6666667 L20.8881667,39.6666667 Z M23.7785,39.6666667 L22.3333333,39.6666667 L22.3333333,28.0143333 C22.7796667,27.6806667 23.2563333,27.3946667 23.7785,27.1975 L23.7785,39.6666667 Z M26.6666667,39.6666667 L25.2215,39.6666667 L25.2215,26.8725 C25.7653333,26.814 25.9321667,26.7728333 26.6666667,26.8855 L26.6666667,39.6666667 Z M29.5548333,39.6666667 L28.1096667,39.6666667 L28.1096667,27.3166667 L28.6578333,27.5831667 C28.9156667,27.1346667 29.2233333,26.7273333 29.5548333,26.3438333 L29.5548333,39.6666667 Z M44.13,39.6666667 L31,39.6666667 L31,25.046 C32.1526667,24.253 33.5133333,23.7785 34.9888333,23.7785 C38.9083333,23.7785 42.0846667,27.0155 42.3793333,31.1148333 C45.2003333,29.7325 48.3333333,31.9533333 48.3333333,35.1795 C48.3333333,37.656 46.4505,39.6666667 44.13,39.6666667 Z"/>
+  </g>
+</svg>
--- a/layouts/partials/social/spotify.html
+++ b/layouts/partials/social/spotify.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="currentColor" d="M31,13.6666667 C21.4276667,13.6666667 13.6666667,21.4276667 13.6666667,31 C13.6666667,40.5745 21.4276667,48.3333333 31,48.3333333 C40.5723333,48.3333333 48.3333333,40.5745 48.3333333,31 C48.3333333,21.4276667 40.5723333,13.6666667 31,13.6666667 Z M38.9495,38.6678333 C38.6375,39.1791667 37.9723333,39.3395 37.4631667,39.0275 C33.3941667,36.5401667 28.27,35.9768333 22.2358333,37.3548333 C21.6551667,37.4891667 21.0766667,37.1251667 20.9423333,36.5423333 C20.8101667,35.9616667 21.172,35.3831667 21.7548333,35.251 C28.3588333,33.7408333 34.0225,34.3908333 38.592,37.1815 C39.1011667,37.4935 39.2615,38.1586667 38.9495,38.6678333 Z M41.0706667,33.9488333 C40.6785,34.5836667 39.8465,34.783 39.2116667,34.393 C34.5533333,31.5286667 27.451,30.701 21.939,32.3736667 C21.224,32.5881667 20.47,32.1851667 20.2533333,31.4723333 C20.0366667,30.7573333 20.4396667,30.0055 21.1546667,29.7866667 C27.4488333,27.8778333 35.2748333,28.803 40.6265,32.0898333 C41.2613333,32.482 41.4606667,33.314 41.0706667,33.9488333 Z M41.2526667,29.0326667 C35.667,25.7155 26.45,25.41 21.1156667,27.0285 C20.2598333,27.2885 19.3541667,26.8053333 19.0941667,25.9495 C18.8341667,25.0915 19.3173333,24.1858333 20.1753333,23.9258333 C26.2983333,22.0668333 36.4751667,22.4265 42.908,26.2441667 C43.6793333,26.7013333 43.9306667,27.698 43.4756667,28.4671667 C43.0185,29.2363333 42.0218333,29.4898333 41.2526667,29.0326667 Z"/>
+  </g>
+</svg>
--- a/layouts/partials/social/youtube.html
+++ b/layouts/partials/social/youtube.html
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
+  <g fill="none">
+    <path fill="currentColor" d="M26.6666667,25.2215 L38.2215,30.9891667 L26.6666667,36.7785 L26.6666667,25.2215 Z M48.3333333,31 C48.29,22.0668333 47.6335,18.65 42.0001667,18.2665 C36.7936667,17.9111667 25.1998333,17.9133333 20.002,18.2665 C14.373,18.65 13.71,22.0516667 13.6666667,31 C13.71,39.9331667 14.3665,43.35 19.9998333,43.7335 C25.1976667,44.0866667 36.7915,44.0888333 41.998,43.7335 C47.627,43.35 48.29,39.9483333 48.3333333,31 Z"/>
+  </g>
+</svg>