This commit is contained in:
Set Hallstrom 2020-09-08 18:07:38 +02:00
parent b747089fca
commit 5113069605
171 changed files with 9868 additions and 10786 deletions

View file

@ -1,92 +1,8 @@
---
layout: nil
title: Error 404 This is not a page
description: The page you are looking for has moved to the darknet.
image: /images/kaur-kristjan-cppf4w5pb1c-unsplash.jpg
title: 404
description: >-
Wrong page.
image: /images/openpension-banner.svg
layout: page
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;background-color: rgba(13,13,13,0.85);">
<div class="content editable">
<h1 class="editable">{{ page.title }}</h1>
<p>{{ page.description }}</p>
<ul class="actions stacked">
<li><a href="/" class="button small 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 }}
</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="/assets/panix-logo-dark.svg" 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>

View file

@ -1,9 +1,9 @@
source 'https://rubygems.org'
gem 'jekyll', '4.0.0'
gem 'jekyll', '4.1.1'
group :jekyll_plugins do
gem 'jekyll-seo-tag', '2.6.1'
gem 'jekyll-sitemap', '1.4.0'
gem 'jekyll-last-modified-at','1.1.0'
# gem 'jekyll-pwa-plugin'
end

View file

@ -4,7 +4,7 @@ GEM
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.6)
concurrent-ruby (1.1.7)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
@ -12,19 +12,19 @@ GEM
ffi (1.13.1)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (1.8.3)
i18n (1.8.5)
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)
@ -34,8 +34,6 @@ GEM
posix-spawn (~> 0.3.9)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-seo-tag (2.6.1)
jekyll (>= 3.3, < 5.0)
jekyll-sitemap (1.4.0)
jekyll (>= 3.7, < 5.0)
jekyll-watch (2.2.1)
@ -48,16 +46,16 @@ GEM
listen (3.2.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.3.6)
mercenary (0.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
posix-spawn (0.3.14)
posix-spawn (0.3.15)
public_suffix (4.0.5)
rb-fsevent (0.10.4)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.4)
rouge (3.20.0)
rouge (3.22.0)
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
@ -69,9 +67,8 @@ PLATFORMS
ruby
DEPENDENCIES
jekyll (= 4.0.0)
jekyll (= 4.1.1)
jekyll-last-modified-at (= 1.1.0)
jekyll-seo-tag (= 2.6.1)
jekyll-sitemap (= 1.4.0)
BUNDLED WITH

View file

@ -1,117 +0,0 @@
# ----
# Site
title : pax:nion
description: PHI, Panix Heavy Industries
url : https://paxnion.basspistol.com
# banner should be 1024x1024
banner: /siteicon.png
icon: /siteicon.png
logo: /siteicon.png
author:
name: pax:nion
publisher:
name: Basspistol
domain: basspistol.com
mail: info@basspistol.com
plugins:
- jekyll-sitemap
- jekyll-seo-tag
- jekyll-last-modified-at
# GEO
geo:
timezone: "Europe/Stockholm"
lat: '59.333759'
long: '18.052554'
region: 'SE-AB'
town: 'Stockholm'
collections:
albums:
output: true
permalink: /albums/:name/
tracks:
output: true
permalink: /albums/:path/
# Defaults
permalink: pretty
categories:
- release
- rambling
exclude:
- changelog.md
- '*.*~'
- '*.xcf'
- '*.blend*'
- Gemfile
- Gemfile.lock
- README.md
- LICENCE
- '*.mp3'
sass:
sass_dir: _sass
defaults:
- scope:
path: ""
values:
lang: en
- scope:
path: ""
type: "tracks"
values:
layout: "track"
lang: en
seo:
type: "AudioObject"
- scope:
path: ""
type: "pages"
values:
layout: "default"
lang: en
_options:
image:
width: 1024
height: 720
resize_style: cover
uploads_dir: "/images"
content:
width: 720
height: 720
resize_style: cover
uploads_dir: "/images"
- scope:
path: ""
type: "posts"
values:
layout: "post"
lang: en
permalink: /:title/
_options:
image:
width: 1024
height: 720
resize_style: cover
uploads_dir: "/images"
content:
width: 720
height: 720
resize_style: cover
uploads_dir: "/images"
# ---------
# Translate
lang: en

View file

@ -48,7 +48,7 @@ categories:
collections:
albums:
output: true
output: false
permalink: /albums/:name/
tracks:
output: true
@ -105,7 +105,7 @@ defaults:
values:
layout: "post"
lang: en
permalink: /:title/
permalink: /:categories/:slug/
_options:
image:
width: 1024
@ -117,3 +117,5 @@ defaults:
height: 720
resize_style: cover
uploads_dir: "/images"

10
_data/colors.yml Normal file
View file

@ -0,0 +1,10 @@
bg_color: 'rgb(27, 34, 65)'
bg-alt_color: 'rgba(27, 34, 65, 0.95)'
fg_color: 'rgba(178, 211, 168, 1)'
fg-alt_color: 'rgba(178, 211, 168, 0.75)'
border_color: 'rgb(33, 42, 24)'
border-alt_color: 'rgba(33, 42, 24, 0.75)'
accent2_color: 'rgba(82, 183, 136, 1)'
accent2-alt_color: 'rgba(82, 183, 136, 0.75)'
accent1_color: 'rgba(237, 229, 166, 1)'
accent1-alt_color: 'rgba(237, 229, 166, 0.75)'

View file

@ -1,24 +1,24 @@
- icon: fa-disc
- icon: 💽
url: /discography/
name: Discog
external_site: false
- icon: fa-radio
- icon: 📻
url: /radio/
name: Radio
external_site: false
- icon: fa-newspaper
- icon: 📰
url: /highlights/
name: Hi-lights
external_site: false
- icon: fa-people
- icon: 🧑🏾‍🤝‍🧑🏼🧑🏻‍🤝‍🧑🏽
url: /artists/
name: Artists
external_site: false
- icon: fa-finger-print
- icon:
url: /about/
name: About
external_site: false
- icon: fa-link
- icon: 🔗
url: /links/
name: Links
external_site: false

View file

@ -11,9 +11,9 @@
(function() {
var u="https://terminalnetwork.matomo.cloud/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
_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.defer=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
})();
//* End Matomo *//
@ -26,7 +26,7 @@
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
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_fHO88MfH.js'; s.parentNode.insertBefore(g,s);
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/container_{{ site.matomo_container }}.js'; s.parentNode.insertBefore(g,s);
//* End Matomo Tag Manager *//
{% endif %}

View file

@ -1,16 +1,16 @@
{% assign author_id = page.author | prepend: "/staff_members/" | append: "/" %}
{% assign author = site.staff_members | where: "url", author_id | first %}
<header id="author">
{% assign author_id = page.author | prepend: "/authors/" | append: "/" %}
{% assign author = site.authors | where: "url", author_id | first %}
<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;">
<div class="author-image" alt="Picture of {{ author.name }}" style="background-image:url({{ author.image }});">
</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;">
<p><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
<p>{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener"
href="{{ author.gpg }}">GPG</a>{% endif %}</p>
<p class="date">
Published the
{% include dates.html %}
@ -21,14 +21,21 @@
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>
<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 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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}%20&amp;hashtags=basspistol"
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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}"
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 }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}"
class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
</ul>
{% if page.collection == 'tracks' %}
<a href="{{ relBase }}/albums/{{ page.albumSlug }}" class="button smaller"> Back to Album</a><br /><br />
{% endif %}
</div>
</div>
</header>

View file

@ -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 />
<!-- 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 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 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 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>
<label for="message">Meddelande</label><br />
<textarea name="message" id="message" placeholder="Skriv ditt meddelande här..." required
class="contact textspace"></textarea>
</div>
</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 }}
<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>
<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 -->

View file

@ -1,7 +1,13 @@
<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>Vi använder bara cookies om du går med på det. Hjälp oss förbättra våran marknadsföring!
<br />Klicka <a href="#" id="cookie-notice-decline">här</a> om du inte vill hjälpa till.
<br />Läs mer om <a href="/cookies/">hur vi använder cookies,</a>
</p>
<a class="button yes" href="#"
id="cookie-notice-accept">Jag hjälper gärna!</a>
</div>
<script>
@ -12,7 +18,7 @@
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
document.cookie = name + "=" + value + expires + "; path=/;SameSite=Strict";
}
function readCookie(name) {
var nameEQ = name + "=";

View file

@ -0,0 +1,172 @@
{% case include.icon %}
{% when "alcohol" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M366.85,190.69v-29.3h-31.71v28.06c0,0,0,0,0,0c0.31,0.88,0.59,1.76,0.86,2.65c0.03,0.09,0.05,0.17,0.08,0.26 c0.25,0.83,0.48,1.66,0.7,2.49c0.04,0.16,0.09,0.33,0.13,0.49c0.2,0.77,0.38,1.55,0.55,2.33c0.05,0.25,0.11,0.5,0.16,0.74 c0.15,0.72,0.29,1.43,0.41,2.15c0.06,0.34,0.11,0.68,0.17,1.01c0.1,0.65,0.21,1.3,0.29,1.95c0.06,0.44,0.1,0.89,0.15,1.33 c0.06,0.56,0.13,1.13,0.18,1.69c0.05,0.59,0.09,1.19,0.12,1.78c0.03,0.43,0.06,0.87,0.08,1.3c0.05,1.04,0.07,2.09,0.07,3.14v22.46 h44.56v80.98h-44.56v26.85v5.99h23.85h36.9v-36.9v-38.38v-46.4C399.86,208.32,385.4,192.63,366.85,190.69z"
/>
<rect
x="335.14"
y="137.02"
width="31.71"
height="12.96"
/>
<path
d="M160.89,316.22h-44.56v-80.98h44.56v-22.46c0-1.05,0.03-2.09,0.07-3.14c0.02-0.44,0.06-0.87,0.08-1.3 c0.04-0.59,0.07-1.19,0.12-1.78c0.05-0.57,0.12-1.13,0.18-1.69c0.05-0.44,0.1-0.89,0.15-1.33c0.09-0.65,0.19-1.3,0.29-1.95 c0.05-0.34,0.11-0.68,0.17-1.01c0.13-0.72,0.27-1.44,0.41-2.15c0.05-0.25,0.1-0.5,0.16-0.74c0.17-0.78,0.35-1.56,0.55-2.33 c0.04-0.17,0.08-0.33,0.13-0.49c0.22-0.84,0.45-1.67,0.7-2.49c0.03-0.09,0.05-0.17,0.08-0.26c0.27-0.89,0.56-1.77,0.86-2.65 c0,0,0,0,0,0v-28.06h-31.71v29.3c-18.55,1.94-33.01,17.63-33.01,36.7v46.4v38.38v36.9h36.9h23.85v-5.99V316.22z"
/>
<rect
x="133.15"
y="137.02"
width="31.71"
height="12.96"
/>
<path
d="M274.37,156.37v-43.04h-48.73v43.04c-28.51,2.99-50.74,27.1-50.74,56.4v71.31v58.99v56.72h56.72h36.78h56.72 v-56.72v-58.99v-71.31C325.11,183.47,302.88,159.36,274.37,156.37z M300.21,349.31H199.79V224.84h100.41V349.31z"
/>
<rect
x="225.63"
y="75.42"
width="48.73"
height="19.92"
/>
</svg>
{% when "fossile" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M399.93,235.6c-1.34-13.13-3.23-44.55-42.91-92.29c-2.75,64.22-111.81,127.38-74.85-72.37 c-81.51,27.67-104.42,88.03-117.43,129.97c-8.38,27.01-42.67,41.09-52.23-3.55c-12.89,33.91-13.8,72.5,0.31,108.35 c30.1,76.48,117.09,113.89,193.03,84c41.76-16.44,72.09-49.74,86.13-89.03C399.33,280.1,402.21,257.89,399.93,235.6z M247.53,347.17 c-15.92,0-30.16-7.2-39.65-18.51c-3.57-3.81-6.39-8.4-8.34-13.88c-2.41-5.98-3.75-12.51-3.75-19.35c0-52.9,37.71-94.6,37.71-94.6 s-5.1,34.56,4.78,50.48c23.46,37.79,61,15.55,61,44.12S276.1,347.17,247.53,347.17z"
/>
</svg>
{% when "gambling" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M250,90c-88.37,0-160,71.63-160,160s71.63,160,160,160s160-71.63,160-160S338.37,90,250,90z M390,250.17 c-13.42,0-26.56,0-39.85,0c-0.31-21.64-6.68-41.08-19.07-58.58c10.92-7.94,21.61-15.72,32.41-23.58c17.21,23.71,26.5,52.14,26.5,82 C390,250.06,390,250.11,390,250.17z M171.25,250.46c-0.03-43.48,35.23-78.83,78.66-78.86c43.47-0.03,78.83,35.23,78.86,78.66 c0.03,43.47-35.23,78.83-78.66,78.86C206.64,329.15,171.29,293.89,171.25,250.46z M293.34,116.81c-4.21,12.9-8.34,25.56-12.5,38.3 c-20.77-6.44-41.12-6.35-61.65-0.02c-4.19-12.83-8.32-25.49-12.49-38.28c13.81-4.47,28.38-6.8,43.31-6.8 C264.94,110,279.52,112.33,293.34,116.81z M136.51,167.99c10.92,7.95,21.63,15.74,32.46,23.62 c-12.56,17.65-18.77,37.16-19.13,58.76c-13.39,0-26.53,0-39.84,0c0-0.12,0-0.25,0-0.37C110,220.13,119.3,191.7,136.51,167.99z M136.94,332.6c10.78-7.82,21.24-15.41,31.14-22.59c8.11,7.46,15.1,15.14,23.34,21.11c8.3,6.02,17.84,10.33,27.19,15.58 c-3.81,11.77-7.77,23.99-11.83,36.52c-20.8-6.73-39.86-18.32-55.76-34.23C145.86,343.85,141.17,338.36,136.94,332.6z M293.26,383.21c-4.08-12.6-8.11-25.06-12.19-37.66c20.5-6.99,36.93-19.04,49.89-36.27c10.77,7.82,21.4,15.53,32.11,23.3 c-4.23,5.77-8.93,11.25-14.08,16.41C333.1,364.89,314.05,376.49,293.26,383.21z"
/>
<rect
x="212.86"
y="212.86"
transform="matrix(0.7071 -0.7071 0.7071 0.7071 -103.5534 250)"
width="74.28"
height="74.28"
/>
</svg>
{% when "gmo" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M283.83,427.61c10.73-1.98,21.32-4.92,31.62-8.83c0.49-15.49,4.34-30.89,11.57-44.99 c-12.49,7.87-25.92,13.67-39.8,17.39C284.48,403.14,283.36,415.4,283.83,427.61z"
/>
<path
d="M323.77,324.73L323.77,324.73c-41.13,41.13-108,41.2-149.22,0.21c-5.57-5.6-10.63-11.41-14.69-17.83 l139.79-139.79c-10.14-6.12-21.16-10.23-32.48-12.32L146.53,275.64c-5.93-24.49-3.05-50.69,8.66-73.51 c-12.49,7.87-25.92,13.67-39.8,17.39c-10.24,44.6,1.84,93.42,36.42,128.15c53.76,53.52,141.03,53.45,194.69-0.22l0,0 c20.21-20.21,46.64-30.5,73.18-30.88c4.18-10.38,7.36-21.07,9.55-31.92C391.32,282.48,352.67,295.83,323.77,324.73z"
/>
<path
d="M214.61,72.93c-10.73,1.98-21.32,4.92-31.62,8.83c-0.49,15.49-4.34,30.89-11.57,44.99 c12.49-7.87,25.92-13.67,39.8-17.39C213.96,97.4,215.08,85.14,214.61,72.93z"
/>
<path
d="M174.67,175.81L174.67,175.81c41.13-41.13,108.26-41.45,149.48-0.47c5.57,5.6,10.37,11.67,14.43,18.08 L198.79,333.21c10.14,6.12,21.16,10.23,32.48,12.32L351.91,224.9c5.93,24.49,3.05,50.69-8.66,73.51 c12.49-7.87,25.92-13.67,39.8-17.39c10.24-44.6-1.92-93.34-36.5-128.07c-53.76-53.52-140.95-53.53-194.62,0.14l0,0 c-20.21,20.21-46.64,30.5-73.18,30.88c-4.18,10.38-7.36,21.07-9.55,31.92C107.11,218.06,145.77,204.71,174.67,175.81z"
/>
</svg>
{% when "nuclear" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M225.87,206.36l-48.55-88.25c-46.37,25.56-77.79,74.91-77.79,131.61h100.22 C200.07,231.25,210.58,214.9,225.87,206.36z"
/>
<path
d="M300.07,249.72h99.83c0-57.19-31.97-106.91-79.01-132.28l-47.66,88.57 C288.94,214.44,299.76,230.99,300.07,249.72z"
/>
<path
d="M249.82,300.65c-8.97,0-17.41-2.4-24.73-6.59l-48.31,86.97c21.6,12.03,46.47,18.89,72.95,18.89 c25.76,0,49.99-6.49,71.18-17.91l-47.06-87.46C266.69,298.43,258.5,300.65,249.82,300.65z"
/>
<path
d="M249.86,276.03c14.11,0,25.66-11.45,25.66-25.56c0-14.02-11.55-25.76-25.66-25.76 c-14.02,0-25.56,11.74-25.56,25.76C224.3,264.58,235.85,276.03,249.86,276.03z"
/>
</svg>
{% when "meat" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M348.94,153.25c-14.61-30.67-53.4-52.6-98.94-52.6c-45.53,0-84.3,21.91-98.93,52.57 c-33.83-15-70.55-7.81-70.55-7.81s17.68,33.28,51.94,49.22c5.38,2.51,10.72,4.71,15.91,6.6c6.44-5.1,18.01-4.08,27.7,2.94 c11.02,7.98,9.86,28.39,9.86,28.39s-15.32,6.01-26.43,1.48l23.59,86.07l26.66-88.33c0,0,2.25,31.81,2.25,48.19 c0,20.82-17.8,39.1-26.99,47.15l0.08,0.3c-2.74,7.09-4.11,14.78-4.11,22.73c0,32.4,13.32,50.41,69,50.41c55.68,0,69-18.01,69-50.41 c0-7.91-1.36-15.56-4.07-22.61l0.13-0.46c-9.21-8.07-26.93-26.32-26.93-47.1c0-16.39,2.25-48.19,2.25-48.19L317,319.99L340.58,234 c-11.11,4.6-26.51-1.44-26.51-1.44s-1.16-20.41,9.86-28.39c9.7-7.03,21.29-8.03,27.72-2.92c5.21-1.9,10.56-4.11,15.97-6.62 c34.26-15.94,51.94-49.22,51.94-49.22S382.8,138.21,348.94,153.25z M217.25,366.57c-3.85,0.73-7.69-3.99-8.57-10.55 c-0.88-6.56,1.53-12.47,5.38-13.21c3.85-0.73,7.69,3.99,8.57,10.55S221.11,365.84,217.25,366.57z M291.32,356.02 c-0.88,6.56-4.72,11.28-8.57,10.55c-3.85-0.73-6.26-6.65-5.38-13.21s4.72-11.28,8.57-10.55 C289.79,343.55,292.2,349.46,291.32,356.02z"
/>
</svg>
{% when "pesticide" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M191.24,327.05l-39.8-39.8l-41.47,41.47l62.66,62.66l25.99-25.99c-5.08-8.75-8.01-18.9-8.01-29.73 C190.61,332.73,190.83,329.86,191.24,327.05z"
/>
<path
d="M390.03,328.71l-41.47-41.47l-39.8,39.8c0.41,2.81,0.63,5.68,0.63,8.6c0,10.83-2.93,20.98-8.01,29.73 l25.99,25.99L390.03,328.71z"
/>
<path
d="M250,276.26c22.92,0,42.84,13.06,52.73,32.12c34.57-18.75,58.04-55.35,58.04-97.44 c0-61.18-49.59-110.77-110.77-110.77s-110.77,49.59-110.77,110.77c0,42.09,23.47,78.69,58.04,97.44 C207.16,289.32,227.08,276.26,250,276.26z M297.28,161.32c18.4,0,33.32,18.04,33.32,40.3s-14.92,40.3-33.32,40.3 s-33.32-18.04-33.32-40.3S278.88,161.32,297.28,161.32z M169.4,201.62c0-22.26,14.92-40.3,33.32-40.3s33.32,18.04,33.32,40.3 s-14.92,40.3-33.32,40.3S169.4,223.88,169.4,201.62z"
/>
<ellipse
cx="250"
cy="335.62"
rx="46.71"
ry="46.71"
/>
</svg>
{% when "processed" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M124.37,221.51h-5.17c-0.67,0-1.3,0.18-1.96,0.25c-2.76,0.29-5.36,1.13-7.75,2.54 c-7.77,4.56-13.17,14.31-13.17,25.7c0,10.67,4.77,19.86,11.75,24.74c2.31,1.62,4.84,2.77,7.57,3.31c1.17,0.23,2.35,0.45,3.58,0.45 h3.57h0.83h15.44h29.23h192.67h15.45h0.83h3.58c1.22,0,2.4-0.21,3.56-0.45c2.73-0.53,5.26-1.68,7.57-3.3 c6.98-4.88,11.76-14.07,11.76-24.74c0-11.4-5.41-21.15-13.19-25.7c-2.39-1.4-5.01-2.24-7.75-2.53c-0.65-0.07-1.28-0.25-1.95-0.25 h-5.18h-2.25h-16.61H172.84h-29.62h-16.61H124.37z M133.8,238.98c8.49-3.49,18.02-3.64,28.89,0.85c2.71,1.12,5.46,2.92,8.3,4.71 c6.92,4.34,14.35,8.62,22.94,2.91c4.34-2.89,9.52-6.84,14.88-7.72c10.6-1.76,20.21-1.61,29.51,4.56 c16.1,10.68,30.12,13.57,46.9,2.29c7.13-4.78,15.81-10.93,24.96-10.46c10.97,0.57,20.63,4.7,30.06,10.2 c11.58,6.74,18.07,6.64,27.44-0.37c1.43-1.07,2.92-2.27,4.51-3.66c2.45-2.14,5.34-1.86,7.52-0.49c0.45,0.28,0.89,0.54,1.26,0.91 c1.91,1.89,2.53,4.72,0.75,7.17c-0.27,0.37-0.44,0.76-0.84,1.11c-0.2,0.17-0.38,0.31-0.59,0.49c-4.39,3.79-8.56,6.81-12.71,9 c-9.24,4.86-18.43,5.26-30.19-1.58c-14.54-8.48-27.34-14.22-42.66-3.92c-8.07,5.42-16.84,11.27-26.88,11.94 c-12.47,0.83-21.55-2.62-31.83-9.44c-18.57-12.3-29.44-1.02-46.43,5.66c-8.35,3.28-13.97-0.94-19.67-5.23 c-2.73-2.06-5.49-4.14-8.57-5.42c-12.62-5.23-21.46-4.19-29.53,1.93c-3.34,2.53-6.56,5.85-9.85,10.09 c-0.47,0.6-0.99,0.96-1.51,1.3c-0.3,0.2-0.59,0.37-0.9,0.49c-2.26,0.85-4.65-0.29-6.16-2.33c-1.52-2.05-2.03-4.88-0.45-7.48 c0.14-0.23,0.17-0.45,0.33-0.68c1.61-2.07,3.26-4.01,4.96-5.8c0.51-0.53,1.04-0.94,1.55-1.45 C124.13,244.33,128.78,241.05,133.8,238.98z"
/>
<path
d="M148,338.68c5.24,1.74,10.69,2.77,16.32,2.77h171.36c25.76,0,48.22-19.41,60.13-48.05h-5.61h-23.29H151.63 h-18.55h-23.29h-5.6C113.49,315.79,129.25,332.44,148,338.68z"
/>
<path
d="M148,161.32c5.24-1.74,10.69-2.77,16.32-2.77h171.36c25.76,0,48.22,19.41,60.13,48.05h-5.61h-23.29H151.63 h-18.55h-23.29h-5.6C113.49,184.21,129.25,167.56,148,161.32z"
/>
</svg>
{% when "tobak" %}
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<rect
x="130.78"
y="267.87"
width="171.39"
height="57.76"
/>
<path
d="M342.82,209c7.81-8.02,12.55-18.56,12.55-30.11c0-25.13-22.42-45.5-50.08-45.5c-3.51,0-6.94,0.33-10.25,0.96 c-11.31-19.74-34.01-33.22-60.2-33.22c-37.47,0-67.84,27.59-67.84,61.63s30.37,61.63,67.84,61.63c0.75,0,1.48-0.03,2.22-0.05 c0.35,0.01,0.72,0.02,1.11,0.02c0.01,0,0.71,0,1.79,0c-0.01-0.02-0.02-0.03-0.03-0.05c-3.15-5.97-1.71-12.62,0.11-20.96 c-11.64-1.35-20.52-8.61-25.3-13.13c-7.71-7.28-12.13-17.44-12.12-27.89c-0.01-9.42,3.28-18.89,9.01-25.98 c4.9-6.05,13.87-13.24,28.97-13.53c0,0-25.1,9.29-25.1,39.51c0,24.51,41.26,28.42,47.28,29.27c-5.84,8.36-8.5,30.05,6.77,32.76 c10.27,0,23.36,0,34.7,0c0.35,0.01,0.69,0.02,1.04,0.02c0.35,0,0.7-0.02,1.05-0.02c13.01,0,23.21,0,23.22,0 c17.54,0.04,21.26,9.98,21.29,18.29v82.84h17.78v-82.87C368.58,225.21,360.35,211.15,342.82,209z"
/>
<polygon
points="317.86,325.4 335.89,325.49 335.89,267.05 317.86,266.95 "
/>
</svg>
{% when "weapon" %}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<path
d="M250,399.91c65.42,0,119.03-50.59,123.85-114.78h-247.7C130.97,349.32,184.58,399.91,250,399.91z"
/>
<path
d="M294.61,159.76v-52.42h-74.17c-12.8-12.02-30-19.4-48.91-19.4c-39.44,0-71.53,32.09-71.53,71.53 c0,12.95,3.48,25.1,9.53,35.59c-12.8,21.59-19.43,45.24-19.43,69.96h20c0-18.79,4.31-36.55,12.85-53.13 c4.45,4.13,9.42,7.7,14.8,10.6c-6.22,13.11-10.22,27.48-11.5,42.63h247.5C369.68,216.87,338.03,176.48,294.61,159.76z M116,159.47 c0-30.62,24.91-55.53,55.53-55.53c12.74,0,24.48,4.32,33.86,11.56v8.56h-15.44l-1.95,0.87c-1,0.45-24.8,11.2-48.75,33.59 c-7.24,6.77-13.7,13.88-19.38,21.29C117.39,173.51,116,166.65,116,159.47z M131.42,197.81c5.83-8.44,12.85-16.53,21.05-24.26 c17.95-16.9,36.19-26.66,41.88-29.49h11.04v15.7c-24.76,9.53-45.69,26.76-59.86,48.75C140.26,205.71,135.51,202.09,131.42,197.81z"
/>
</svg>
{% endcase %}

31
_includes/ethos.html Normal file
View file

@ -0,0 +1,31 @@
<section id="ethossection">
<h2 class="editable">
Kategorier
</h2>
<p style="text-align:center" class="editor-link"><a href="cloudcannon:collections/_data/ethos_ordning.yml" rel="nofollow" class="btn"><strong>&#9998;</strong>
Edit order</a></p><br />
<div class="ethos-flex">
{% for etho_name in site.data.ethos_ordning %}{% for etho in site.ethos %}
{% capture name -%}{{ etho.relative_path | replace_first: etho.collection, '' | replace_first: '_/', '' | replace_first: '.md', '' }}{%- endcapture %}
{% if name == etho_name %}
<div class="ethos">
<div class="icon">
<a href="{{ etho.url }}" alt="{{ etho.title }}" class="st1">
{% capture name -%}{{ etho.relative_path | replace_first: etho.collection, '' | replace_first: '_/', '' | replace_first: '.md', '' }}{%- endcapture %}
{% include ethoicon-selector.html icon=name %}
</a>
</div>
<div class="cartouche">
<h3>{{ etho.title }}</h3>
<p>{{ etho.description }}</p>
<p class="editor-link"><a href="cloudcannon:collections/{{ etho.path }}" rel="nofollow" class="btn"><strong>&#9998;</strong>
Edit Ethos</a></p>
</div>
</div>
{% break %} {% endif %} {% endfor %} {% endfor %}
</div>
</section>

View file

@ -1,33 +1,27 @@
{% 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.author.email }}">{{ site.author.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 }}" style="max-width:300px" alt="{{ site.title }} Logo" /></div>
</div>
<div class="inner">
<ul class="icons">
{% for nw in site.data.social %}
<div><a href="#main-wrapper"><img src="{{ relBase }}{{ site.icon }}" alt="{{ site.title }} Logo" /></a></div>
<li><a target="_blank" alt="{{ site.title }} on {{ nw.name }}" title="{{ site.title }} on {{ nw.name }}" rel="{% if nw.url contains 'mastodon.art' %}me {% endif %}noopener" href="{{ nw.url }}" class="icon brands style2 {{ nw.icon }}"><span class="label">{{ nw.name }}</span></a></li>
<small>
{% endfor %}
<!-- <li><a href="mailto:{{ site.author.email }}" class="icon style2 fa-envelope"><span class="label">Email</span></a></li> -->
</ul>
<p>&copy;{{ site.time | date: '%Y' }} {{ site.publisher.name }} | <a href="{{ relBase }}/webcreds/">Credits</a> | <a href="{{ relBase }}/cookies/">Cookies & Privacy</a></p>
<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>

View file

@ -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" }}

26
_includes/header.html Normal file
View file

@ -0,0 +1,26 @@
{% include relBase.html %}
<header class="hero" id="top"
style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
<div class="imagecontainer">
</div>
</header> {% unless page.collection == 'posts' %}
<section class="splash">
<div class="container">
<div class="splash-logo">
<img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div>
<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>
</div>
</div>
</section>
{% endunless %}

View file

@ -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', '3']);
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 -->

View file

@ -7,7 +7,7 @@ _paq.push(['enableLinkTracking']);
(function() {
var u="https://terminalnetwork.matomo.cloud/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
_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.defer=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
})();

View file

@ -1,22 +1,27 @@
<!-- Navigation -->
<div id="logo" class="logo">
<a href="/"><img width="100em" src="{{ site.logo }}" alt="{{ site.name }} Logo" /></a>
&nbsp;&nbsp;&nbsp;<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span style="font-size: 34px;" class="icon solid fa-bars"></span></a>
<div id="sticky" class="logo{% if page.collection == 'tracks' %} sticky{% endif %}">
<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" style="display: block;" class="modalDialog">
<a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu"><div id="closearea"> </div></a>
<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 close" style="margin: 0 auto;">X</a>
<a href="#close" title="Close" onclick="removeBlur()" class="close-button">X</a>
<ul>
{% if page.url != '/' %}
<li><a href="{{ relBase }}/" class="button smaller">{{ site.data.translations[page.lang].home }}</a></li>
<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 }}" class="button smaller">{{ entry.name }}</a></li>
<li><a href="{{ relBase }}{{ entry.url }}" onclick="removeBlur()" class="button">{{ entry.name }}</a></li>
{% else %}
<li><a href="{{ entry.url }}" target="_blank" rel="noopener" class="button smaller">{{ entry.name }}</a></li>
<li><a href="{{ entry.url }}" target="_blank" rel="noopener" onclick="removeBlur()" class="button">{{ entry.name }}</a></li>
{% endif %}
{% endfor %}

View file

@ -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-20200805.js"></script>

View file

@ -1,146 +1,15 @@
<!--
..............................................
..............................................
...........'';,...............................
.........'',,;:o:,............................
.......',;;::::::;;;,.........................
.....,;:ooooooooooo;,,''''....................
....,;ooooooooooooooo;,'..'''''...............
...,:ooooooooooooooooo;''......'''............
..,;:ooooooooooooooooo',,.........,'.......... _______ _ _ __
..,,;:,ooooo;;:ooo;o,:;,',.........;,''....... \____ \____ _____ __________ |_| ______/ |_ ___ | |
..,'..,,;:o,''.,;;'''..'';,,,,,,''',;'''...... | | _/\__ \/ __// __/\___ \| |/ __/\ _\/ \| |
..,'......':ooo:.......'';,'''''''',;,,,...... | | _/\__ \/ __// __/\___ \| |/ __/\ _\/ \| |
..,,.......,:o:'.......,'oooo:::::;:,.',;,.... | | _/\__ \/ __// __/\___ \| |/ __/\ _\/ \| |
..','.................',,..'',,,;;;;;;,.,:.... | | \ / _ \__ \ \__ \ | |_> > |\__ \ | | ( <> ) |__
...,,'...............',;oooooooooo:;;:,;oo,... |____ /(___ /___ >___ >| __/|_/____ > |_| \___/|____/
....,,'.............,,;ooooooooo;,..'',oooo,.. \/ \/ \/ \/ |_| \/
.....',,'........',,;ooo::;;,'........'oooo;..
.......'',,'''',,;;;,,'...............';;;'... All you saw was sound!
...........'''''..............................
..............................................
..............................................
..............................................
..............................................
-->
{% 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 }}" />
<meta name="dc.date.modified" scheme="ISO8601" content="{{ page.last_modified_at | date_to_xmlschema }}" />
<meta name="robots" content="index" />
<meta charset="utf-8" />
<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="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.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.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!" />
<!-- Facebook -->
<meta property="og:title" content="{{ page.common.title }}" />
<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:url" content="{{ site.url }}{{ page.url }}" />
<meta property="og:site_name" content="{{ site.title }}" />
<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:image" content="{{ site.mediaurl }}/{{ page.slug }}.jpeg" />
{% elsif page.collection == 'albums' %}
<!-- BEGIN seo.html -->
{% capture namelist %}{% for art in page.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 }}" />
<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="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.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!" />
<!-- Facebook -->
<meta property="og:title" content="{{ page.name }} by {{ artist | 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:url" content="{{ site.url }}{{ page.url }}" />
<meta property="og:site_name" content="{{ site.title }}" />
<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" />
<!-- 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 %}
{% if page.collection == 'posts' %}
<!-- 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 +23,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: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 }}",
@ -208,48 +77,82 @@
}
</script>
{% 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" />
<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 %}
<link rel="alternate" type="application/rss+xml" href="{{ site.url}}/feed.xml" title="{{ site.title }}" />
<!-- END seo.html -->

View file

@ -2,122 +2,68 @@
{% if page.collection == 'posts' %}
{% if page.category == 'releases' %}
{% if page.check_this_if_cannot_be_bought == false %}
<section class="streambox" style="padding: 40px;">
<h2 style="text-align: center;display: block;">Get this release</h2>
<section class="streambox">
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<p style="text-align: center;display: block;margin-top:40px;">Stream it, follow, like and subscribe!</p>
<div class="streamer">
<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>
{% for shop in page.stores %}
{% if shop.download != true %}
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 45px;margin:10px; font-size: 45px;" 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>
</section>
{% else %}
<section class="streambox" style="padding: 40px;">
<h2 style="text-align: center;display: block;">This release can't be obtained</h2>
<section class="streambox">
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<h2 style="text-align: center;display: block;">&nbsp;</h2>
<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 small 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 %}
{% else %}
{% if page.check_this_if_cannot_be_bought == false %}
<section class="streambox" style="padding: 40px;">
<h2 style="text-align: center;display: block;">Get this release</h2>
<section class="streambox">
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<p style="text-align: center;display: block;margin-top:40px;">Stream it, follow, like and subscribe!</p>
<div class="streamer">
<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>
{% for shop in page.stores %}
{% if shop.download != true %}
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 45px;margin:10px; font-size: 45px;" 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>
</section>
{% else %}
{% endif %}
{% endif %}
{% elsif page.collection == 'tracks' %}
<section class="streambox" style="padding: 40px;">
<section class="streambox">
{% for post in site.posts %}
{% if post.album == page.albumSlug %}
{% if post.check_this_if_cannot_be_bought == false %}
<h2 style="text-align: center;display: block;">Get this track</h2>
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<p style="text-align: center;display: block;margin-top:40px;">Stream it, follow, like and subscribe!</p>
<div class="streamer">
<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>
{% for shop in post.stores %}
{% if shop.download != true %}
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 45px;margin:10px; font-size: 45px;" 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 %}
<h2 style="text-align: center;display: block;">This track can't be obtained</h2>
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<h2 style="text-align: center;display: block;">&nbsp;</h2>
<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 small 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 %}
@ -127,78 +73,15 @@
{% endfor %}
</section>
{% elsif page.collection == 'albums' %}
<section class="streambox" style="padding: 40px;">
{% for post in site.posts %}
{% if post.album == page.slug %}
{% if post.check_this_if_cannot_be_bought == false %}
<h2 style="text-align: center;display: block;">Get this album</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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<p style="text-align: center;display: block;margin-top:40px;">Stream it, follow, like and subscribe!</p>
<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 45px;margin:10px; font-size: 45px;" 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 %}
<h2 style="text-align: center;display: block;">This album can't be obtained</h2>
<section class="streambox">
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<h2 style="text-align: center;display: block;">&nbsp;</h2>
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
{% break %}
<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>
{% endif %}
{% endif %}
{% endfor %}
</section>
{% else %}
<section class="streambox" style="padding: 40px;">
<h2 style="text-align: center;display: block;">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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
<h2 style="text-align: center;display: block;">&nbsp;</h2>
<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 small icon brands {{ shop.icon }}">{{ shop.name }}</a>
{% endif %}
{% endfor %}
</div>
</section>

View file

@ -1,121 +0,0 @@
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg927"
version="1.1"
width="416.57043"
height="91.665543"
viewBox="0 0 110.21759 24.253175">
<g
id="g1355">
<path
id="path825"
d="m 18.776752,19.26664 c -0.84149,-0.23758 -1.5619,-0.48815 -1.6009,-0.55683 -0.13389,-0.23576 1.17519,-6.64433 1.38113,-6.76129 0.1714,-0.0973 2.18286,1.83925 2.58728,2.49098 0.13901,0.22399 -0.53248,5.08585 -0.71688,5.19057 -0.0664,0.0377 -0.80914,-0.12586 -1.65063,-0.36343 z m -7.71412,3.6497 c -0.11943,-0.10151 -0.46471,-0.76441 -0.76727,-1.47311 l -0.55013,-1.28856 3.0905,-1.82263 c 1.69978,-1.00245 3.13215,-1.7493 3.18305,-1.65966 0.16047,0.28255 -0.35523,3.62001 -0.60662,3.9259 -0.46822,0.56974 -4.11797,2.51485 -4.34953,2.31806 z m -6.3649,-3.70632 c -1.25796,-0.50119 -2.32429,-0.97659 -2.36964,-1.05643 -0.0913,-0.16071 1.26536,-2.75645 1.5146,-2.89799 0.1698,-0.0964 5.98831,2.32745 6.40084,2.66648 0.2054,0.1688 -0.0672,0.38679 -1.50386,1.20269 l -1.75474,0.99652 z m 16.18215,-7.2164 c -0.50323,-0.2754 -4.16428,-5.03379 -3.96153,-5.14894 0.032,-0.0182 0.92215,-0.0526 1.97817,-0.0766 l 1.92003,-0.0436 1.47937,1.66712 c 1.05116,1.18456 1.45442,1.75759 1.39322,1.97969 -0.10705,0.38842 -2.51888,1.78126 -2.80926,1.62235 z M 4.112442,13.68166 2.484422,12.9594 1.886542,10.71411 C 1.557712,9.4792 1.304552,8.41117 1.323962,8.34071 c 0.0194,-0.0705 0.75331,-0.23119 1.63087,-0.35719 1.75007,-0.25126 1.80708,-0.21501 2.16317,1.37546 0.12108,0.54084 0.41232,1.84403 0.64718,2.89598 0.23486,1.05195 0.32538,1.96581 0.20115,2.0308 -0.12423,0.065 -0.95848,-0.20686 -1.85389,-0.6041 z m 10.30409,-8.18967 c -1.67351,-0.0303 -3.09954,-0.15056 -3.16895,-0.26719 -0.0694,-0.11662 0.30683,-0.87455 0.83608,-1.68429 l 0.96229,-1.47226 2.06111,-0.0348 c 3.31853,-0.0561 3.09724,-0.18375 2.91885,1.68397 -0.084,0.87994 -0.24591,1.6516 -0.35972,1.71482 -0.11384,0.0632 -1.57615,0.0901 -3.24966,0.0598 z m -7.77928,3.31209 c -0.25432,-0.48092 -1.2349,-3.29514 -1.1932,-3.42443 0.15114,-0.46861 2.47205,-4.02087 2.65002,-4.05596 0.21024,-0.0415 2.33773,1.6074 2.54508,1.97252 0.079,0.13916 -3.46469,5.63381 -3.731,5.78505 -0.0526,0.0299 -0.17449,-0.0949 -0.2709,-0.27718 z"
/>
<path
id="path927"
d="m 45.243829,12.21324 q 0,0.0489 -0.01967,0.0782 L 43.1624,14.3532 h -5.071341 q -0.0293,0 -0.07816,-0.0293 -0.03908,-0.0293 -0.03908,-0.0684 v -2.11062 q 0,-0.0197 0.03908,-0.0586 0.03908,-0.0391 0.05864,-0.0391 h 7.07447 q 0.04886,0 0.06842,0.0586 0.0293,0.0586 0.0293,0.1075 z M 40.573114,9.39908 q -0.02931,0 -0.07817,-0.0391 -0.03908,-0.0391 -0.03908,-0.0684 V 7.18097 q 0,-0.0197 0.03908,-0.0586 0.03908,-0.0391 0.05864,-0.0391 h 2.628497 l 2.061759,2.06176 v 2.60895 q 0,0.0293 -0.04886,0.0782 -0.03908,0.0391 -0.06839,0.0391 h -2.07153 q -0.01967,0 -0.07816,-0.0293 -0.04886,-0.0391 -0.04886,-0.0684 V 9.39913 Z M 40.035691,4.60134 h 5.110423 q 0.03908,0 0.06842,0.0489 0.0293,0.0391 0.0293,0.0684 v 2.07153 q 0,0.0197 -0.04886,0.0782 -0.04886,0.0489 -0.06839,0.0489 h -4.836827 v 2.3549 q 0,0.0197 -0.05864,0.0684 -0.04886,0.0489 -0.06839,0.0489 h -2.07153 q -0.02931,0 -0.07816,-0.0293 -0.03908,-0.0293 -0.03908,-0.0684 V 6.66328 Z" />
<path
id="path929"
d="m 45.494679,14.33362 q -0.0097,-0.01 -0.03908,-0.0293 -0.01967,-0.0293 -0.01967,-0.0489 V 12.1448 q 0,-0.0197 0.03908,-0.0586 0.03908,-0.0391 0.05864,-0.0391 h 7.074467 q 0.0391,0 0.0684,0.0489 0.0293,0.0391 0.0293,0.0684 v 2.07153 q 0,0.0293 -0.0489,0.0782 -0.0391,0.0391 -0.0684,0.0391 h -7.03526 q -0.03908,0 -0.05864,-0.0197 z m 4.709797,-5.20813 q 0.0197,0.0197 0.0197,0.0586 0,0.0293 0,0.0489 0,0.0391 -0.0391,0.1075 -0.0293,0.0586 -0.0782,0.0586 h -2.35501 v 2.3549 q 0,0.0197 -0.05864,0.0684 -0.04886,0.0489 -0.06842,0.0489 H 45.5533 q -0.02931,0 -0.07816,-0.0293 -0.03908,-0.0293 -0.03908,-0.0684 V 7.18104 q 0,-0.0197 0.03908,-0.0586 0.03908,-0.0391 0.05864,-0.0391 h 2.618725 z M 45.43605,6.74127 q 0,-0.0197 0,-0.0489 0,-0.0293 0.01967,-0.0489 l 2.042214,-2.04221 h 5.110422 q 0.0391,0 0.0684,0.0489 0.0293,0.0391 0.0293,0.0684 v 2.07153 q 0,0.0293 -0.0489,0.0782 -0.0391,0.0391 -0.0684,0.0391 h -7.035494 q -0.06842,0 -0.09772,-0.0489 -0.01967,-0.0586 -0.01967,-0.11725 z" />
<path
id="path931"
d="m 55.438726,14.33362 q -0.01,-0.01 -0.0391,-0.0293 -0.0197,-0.0293 -0.0197,-0.0489 V 7.18095 q 0,-0.0197 0.0391,-0.0586 0.0391,-0.0391 0.0586,-0.0391 h 2.11062 q 0.0391,0 0.0684,0.0489 0.0293,0.0391 0.0293,0.0684 v 7.03538 q 0,0.0293 -0.0489,0.0782 -0.0391,0.0391 -0.0684,0.0391 h -2.0714 q -0.0391,0 -0.0586,-0.0197 z m 4.7098,-7.69006 q 0.0197,0.0197 0.0197,0.0586 0,0.0293 0,0.0489 0,0.0489 -0.0391,0.10749 -0.0293,0.0489 -0.0782,0.0489 h -7.03539 q -0.0293,0 -0.0782,-0.0293 -0.0391,-0.0293 -0.0391,-0.0684 V 4.69914 q 0,-0.0197 0.0391,-0.0586 0.0391,-0.0391 0.0586,-0.0391 h 5.11042 z" />
<path
id="path933"
d="m 62.900846,14.33362 q -0.01,-0.01 -0.0391,-0.0293 -0.0197,-0.0293 -0.0197,-0.0489 V 7.18095 q 0,-0.0197 0.0391,-0.0586 0.0391,-0.0391 0.0586,-0.0391 h 2.11062 q 0.0391,0 0.0684,0.0489 0.0293,0.0391 0.0293,0.0684 v 7.03538 q 0,0.0293 -0.0489,0.0782 -0.0391,0.0391 -0.0684,0.0391 h -2.07153 q -0.0391,0 -0.0586,-0.0197 z m 4.7098,-7.69006 q 0.0197,0.0197 0.0197,0.0586 0,0.0293 0,0.0489 0,0.0489 -0.0391,0.10749 -0.0293,0.0489 -0.0782,0.0489 h -7.03538 q -0.0293,0 -0.0782,-0.0293 -0.0391,-0.0293 -0.0391,-0.0684 V 4.69914 q 0,-0.0197 0.0391,-0.0586 0.0391,-0.0391 0.0586,-0.0391 h 5.11043 z" />
<path
id="path935"
d="m 74.994586,12.03735 q 0.0489,0 0.0684,0.0684 0.0293,0.0684 0.0293,0.1075 0,0.0489 -0.0197,0.0782 l -2.06176,2.06176 h -5.07134 q -0.0293,0 -0.0782,-0.0293 -0.0391,-0.0293 -0.0391,-0.0684 V 7.18104 q 0,-0.0197 0.0391,-0.0586 0.0391,-0.0391 0.0586,-0.0391 h 2.11062 q 0.0293,0 0.0684,0.0489 0.0391,0.0391 0.0391,0.0684 v 4.83683 z m -7.05492,-5.12019 q -0.0684,0 -0.0977,-0.0586 -0.0197,-0.0684 -0.0197,-0.11725 0,-0.0197 0,-0.0489 0,-0.0293 0.0197,-0.0489 l 2.04221,-2.04221 h 5.11043 q 0.0391,0 0.0684,0.0489 0.0293,0.0391 0.0293,0.0684 v 7.03539 q 0,0.0293 -0.0489,0.0782 -0.0391,0.0391 -0.0684,0.0391 h -2.07153 q -0.0197,0 -0.0782,-0.0293 -0.0489,-0.0391 -0.0489,-0.0684 V 6.91722 Z" />
<path
d="M 31.960938,2.9921875 C 31.844555,3.0038686 31.755926,3.1017828 31.755859,3.21875 V 4.6074219 H 29.238281 C 29.111919,4.6070424 29.009386,4.709575 29.009766,4.8359375 V 5.625 c -3.8e-4,0.1263625 0.102153,0.2288951 0.228515,0.2285156 h 2.517578 v 1.2324219 h -3.15039 c -0.126363,-3.801e-4 -0.228896,0.1021527 -0.228516,0.2285156 v 0.8125 c -3.8e-4,0.1263629 0.102153,0.2288958 0.228516,0.2285157 h 3.234375 v 4.2343752 c -0.584997,-0.319354 -1.073779,-0.812555 -1.408203,-1.732422 0.09241,-0.52829 0.175541,-1.0770292 0.222656,-1.6660158 0.01054,-0.1250496 -0.08202,-0.23508 -0.207031,-0.2460937 l -0.886719,-0.072266 c -0.12646,-0.010489 -0.237119,0.084361 -0.246094,0.2109375 -0.135017,1.89039 -0.558199,3.344885 -1.429687,4.314454 V 7.6367188 c 0.373879,-0.5048007 0.741434,-1.023037 1.029296,-1.5507813 0.06735,-0.123488 0.0078,-0.2779045 -0.125,-0.3242187 L 27.988281,5.4824219 c -0.104187,-0.03624 -0.21937,0.00737 -0.273437,0.1035156 -0.696612,1.2397318 -1.849185,2.4885894 -2.925782,3.28125 -0.105191,0.077402 -0.123919,0.2272092 -0.04102,0.328125 0.134722,0.1658015 0.415341,0.6143464 0.480469,0.7539063 0.06233,0.1330422 0.232428,0.1731772 0.347656,0.082031 0.34174,-0.2698009 0.672235,-0.6096667 1.003906,-0.9414072 v 5.2578132 c -3.79e-4,0.125601 0.100963,0.227817 0.226563,0.228516 h 0.851562 c 0.1256,-6.99e-4 0.226942,-0.102915 0.226563,-0.228516 v -0.265625 c 0.194918,0.144078 0.464827,0.350485 0.541015,0.433594 0.08868,0.09543 0.23917,0.0972 0.330078,0.0039 0.551829,-0.56309 0.905062,-1.296129 1.205079,-2.091797 0.452628,0.693062 0.967875,1.257003 1.625,1.541016 0.760499,0.328692 1.63416,0.425781 2.609374,0.425781 h 1.931641 c 0.107857,-2.1e-4 0.200789,-0.07602 0.222656,-0.18164 0.04503,-0.213909 0.163827,-0.602259 0.263672,-0.765625 0.09576,-0.154642 -0.01938,-0.353622 -0.201172,-0.347657 -0.397544,0.01155 -1.864653,0.01172 -2.15625,0.01172 -0.387448,0 -0.750891,-0.03168 -1.097656,-0.08008 v -2.0625 h 2.566406 c 0.126363,3.8e-4 0.228896,-0.102153 0.228516,-0.228516 V 9.9375 C 35.952421,9.8119025 35.850208,9.7105611 35.724609,9.7109375 H 33.158203 V 8.3554688 h 3.078125 c 0.1256,-6.989e-4 0.226942,-0.1029148 0.226563,-0.2285157 v -0.8125 C 36.46327,7.1888522 36.361927,7.0866364 36.236328,7.0859375 H 33.074219 V 5.8535156 h 2.589843 C 35.790425,5.8538957 35.892958,5.7513629 35.892578,5.625 V 4.8359375 C 35.892958,4.7095746 35.790425,4.6070418 35.664062,4.6074219 H 33.074219 V 3.21875 C 33.07352,3.0931506 32.971304,2.9918083 32.845703,2.9921875 h -0.863281 c -0.0072,-3.377e-4 -0.01432,-3.377e-4 -0.02148,0 z m -4.34961,0.023437 c -0.07518,0.00329 -0.143893,0.043491 -0.183594,0.1074219 -0.505675,0.8044738 -1.57791,1.8468269 -2.484375,2.4589843 -0.118931,0.079624 -0.135854,0.2478982 -0.03516,0.3496094 0.124901,0.1248938 0.351801,0.4427333 0.470707,0.6210943 0.07154,0.1071241 0.217596,0.1336796 0.322266,0.058594 1.045776,-0.7469829 2.196798,-1.8845904 2.933594,-2.933594 0.08496,-0.1227448 0.0309,-0.2926709 -0.109375,-0.34375 L 27.699219,3.0292969 c -0.02811,-0.010287 -0.05798,-0.014933 -0.08789,-0.013672 z"
id="path925" />
<path
d="m 79.542969,4.4355469 c -0.131457,0.013346 -0.223948,0.1354704 -0.201172,0.265625 0.05751,0.3334207 0.08203,0.7241382 0.08203,1.078125 v 1.8847656 c -1.187925,0.2227552 -2.288455,0.4198441 -2.787108,0.4863281 -0.129992,0.016339 -0.219374,0.1387916 -0.195313,0.2675782 L 76.636719,9.4375 c 0.02395,0.1264335 0.147881,0.2078758 0.273437,0.1796875 0.434852,-0.097842 1.438423,-0.3097079 2.513672,-0.5253906 v 3.3867191 c 0,0.626753 0.120756,1.170353 0.578125,1.521484 0.457369,0.351131 1.170186,0.488281 2.318359,0.488281 1.526641,0 2.752644,-0.09729 3.841797,-0.24414 0.10904,-0.01452 0.19208,-0.104964 0.197266,-0.214844 l 0.04883,-1.042969 c 0.0072,-0.147818 -0.126306,-0.263116 -0.271484,-0.234375 -1.201697,0.228328 -2.347554,0.347656 -3.742188,0.347656 -0.714225,0 -1.119575,-0.07877 -1.300781,-0.199218 -0.0906,-0.06022 -0.138348,-0.124119 -0.175781,-0.228516 -0.03743,-0.104397 -0.05664,-0.253619 -0.05664,-0.449219 V 8.8046875 c 1.010764,-0.2054422 2.03848,-0.4136185 2.839844,-0.5761719 0.53376,-0.108271 0.704917,-0.1434696 0.984375,-0.2011718 -0.424729,0.7306214 -1.041021,1.7093552 -1.777344,2.3769532 -0.112815,0.102343 -0.09519,0.284472 0.03516,0.363281 l 0.84961,0.509766 c 0.09093,0.05473 0.207624,0.03933 0.28125,-0.03711 0.998771,-1.036228 1.947567,-2.5621607 2.511719,-3.5800778 3e-6,-6.5e-4 3e-6,-0.0013 0,-0.00195 0.07695,-0.1429856 0.211309,-0.3490179 0.291015,-0.4628906 0.06976,-0.099439 0.04912,-0.2361357 -0.04688,-0.31055 L 86.113281,6.328125 C 86.040141,6.27106 85.939682,6.264105 85.859375,6.310547 85.755131,6.371328 85.535503,6.4456752 85.279297,6.5039063 84.80162,6.6062362 82.803364,7.0149861 80.861328,7.3945313 V 5.7792969 c 0,-0.3414128 0.02474,-0.7454399 0.08203,-1.078125 0.02358,-0.139003 -0.08362,-0.2657801 -0.224608,-0.265625 h -1.152344 c -0.0078,-4.027e-4 -0.01563,-4.027e-4 -0.02344,0 z"
id="path937" />
<path
d="m 93.927734,6.8261719 c -0.0226,5.865e-4 -0.04498,0.00454 -0.06641,0.011719 L 92.974609,7.140625 c -0.128693,0.043621 -0.190722,0.1895728 -0.132812,0.3125 0.239305,0.5128205 0.809448,2.0899602 0.931641,2.589844 0.03122,0.13145 0.169414,0.206914 0.296874,0.162109 L 94.96875,9.8886719 C 95.083074,9.8484013 95.145769,9.7255882 95.111328,9.609375 94.944591,9.0449828 94.359749,7.4712472 94.144531,6.9648438 94.107852,6.8782717 94.021708,6.8231706 93.927734,6.8261719 Z m 3.333985,0.3515625 c -0.106637,0.010851 -0.191245,0.094645 -0.203125,0.2011718 -0.177,1.5102565 -0.797555,3.0192998 -1.625,4.0332028 -6.71e-4,6.63e-4 -0.0013,0.0013 -0.002,0.002 -0.957777,1.203066 -2.4668,2.10687 -3.828125,2.494141 -0.167251,0.04626 -0.223253,0.255193 -0.101563,0.378906 l 0.800781,0.824219 c 0.06316,0.06534 0.159141,0.08684 0.244141,0.05469 1.392796,-0.534726 2.906436,-1.502185 4.052734,-2.958985 0.898452,-1.123067 1.430629,-2.4488726 1.763672,-3.800781 0.05136,-0.1670755 0.09748,-0.354903 0.179688,-0.6015625 C 98.583285,7.6843909 98.517386,7.554288 98.396484,7.515625 L 97.351562,7.1875 c -0.02899,-0.00923 -0.05954,-0.012552 -0.08984,-0.00977 z m -6.134766,0.2539064 c -0.03069,-9.065e-4 -0.06125,0.00441 -0.08984,0.015625 L 90.138672,7.8007812 C 90.009515,7.8511856 89.955063,8.0043887 90.023438,8.125 c 0.202412,0.3542574 0.887146,2.085369 1.058593,2.679688 0.03658,0.127777 0.174414,0.197145 0.298828,0.15039 l 0.921875,-0.339844 C 92.419992,10.571742 92.480178,10.441776 92.4375,10.324219 92.203262,9.6831847 91.579821,8.1097694 91.326172,7.5644531 91.290305,7.4860021 91.213164,7.434575 91.126953,7.4316408 Z"
id="path939" />
<path
d="m 102.38086,4.421875 c -0.14305,3.925e-4 -0.25027,0.1311197 -0.22266,0.2714844 0.0668,0.3451475 0.0918,0.889798 0.0918,1.21875 v 7.0624996 c 0,0.440767 -0.0243,1.034932 -0.0703,1.404297 -0.0171,0.136149 0.0893,0.25632 0.22656,0.25586 h 1.16406 c 0.13722,4.66e-4 0.24363,-0.119707 0.22657,-0.25586 -0.0461,-0.380619 -0.0723,-1.025459 -0.0723,-1.404297 l -0.01,-3.6660152 c 1.33315,0.438253 3.21551,1.1581242 4.43164,1.8164062 0.12029,0.06517 0.27048,0.01022 0.32032,-0.117188 l 0.41211,-1.0312495 c 0.0434,-0.1095234 -0.004,-0.2340884 -0.10913,-0.2871094 C 107.50079,9.055083 105.31846,8.231509 103.71289,7.734375 V 5.9121094 c 0,-0.343862 0.0476,-0.8648807 0.084,-1.2402344 0.0133,-0.1339388 -0.092,-0.2500683 -0.22657,-0.25 z"
id="path941" />
<path
d="m 26.652537,17.87435 c 0.0093,-0.12957 0.06016,-0.24526 0.120314,-0.32392 0.120313,-0.15271 0.273019,-0.17585 0.39796,-0.17585 0.379451,0 0.52753,0.25451 0.52753,0.52753 0,0.27765 -0.161961,0.40722 -0.259138,0.45812 -0.09718,0.0509 -0.231372,0.074 -0.351686,0.0648 v 0.30542 c 0.120314,-0.005 0.25451,0.0185 0.351686,0.0648 0.236,0.10643 0.305412,0.34243 0.305412,0.51827 0,0.34244 -0.263765,0.62471 -0.606196,0.62471 -0.194353,0 -0.374823,-0.0833 -0.476627,-0.23137 -0.06016,-0.0833 -0.09718,-0.19898 -0.111059,-0.31004 h -0.342431 c 0.0046,0.11106 0.02314,0.21286 0.06941,0.32392 0.166589,0.39796 0.541412,0.53216 0.860706,0.53216 0.527529,0 0.948627,-0.35169 0.948627,-0.93012 0,-0.53216 -0.337804,-0.70337 -0.444235,-0.74502 0.314667,-0.15733 0.397961,-0.46275 0.397961,-0.68486 0,-0.42573 -0.286902,-0.83294 -0.869961,-0.83294 -0.185098,0 -0.513647,0.0416 -0.717255,0.36094 -0.07867,0.12494 -0.134196,0.28227 -0.14345,0.45349 z"
id="path1019" />
<path
d="m 30.971941,20.25286 c 0.245255,0 0.555294,-0.12032 0.791294,-0.46275 0.203608,-0.29616 0.310039,-0.69412 0.310039,-1.13372 0,-0.43961 -0.106431,-0.83757 -0.310039,-1.13373 -0.236,-0.34243 -0.546039,-0.46274 -0.791294,-0.46274 -0.245255,0 -0.555294,0.12031 -0.791294,0.46274 -0.203608,0.29616 -0.310039,0.69412 -0.310039,1.13373 0,0.4396 0.106431,0.83756 0.310039,1.13372 0.236,0.34243 0.546039,0.46275 0.791294,0.46275 z m 0,-2.87828 c 0.157333,0 0.370196,0.0833 0.532157,0.34243 0.166588,0.26377 0.226745,0.61545 0.226745,0.93938 0,0.32392 -0.06016,0.6756 -0.226745,0.93937 -0.161961,0.25914 -0.374824,0.34243 -0.532157,0.34243 -0.157333,0 -0.370196,-0.0833 -0.532157,-0.34243 -0.166588,-0.26377 -0.226745,-0.61545 -0.226745,-0.93937 0,-0.32393 0.06016,-0.67561 0.226745,-0.93938 0.161961,-0.25913 0.374824,-0.34243 0.532157,-0.34243 z"
id="path1021" />
<path
d="m 34.17331,20.19733 h 0.342431 v -3.08651 h -0.680235 l -0.18047,0.32392 h 0.518274 z"
id="path1023" />
<path
d="m 37.246412,20.27137 1.050431,-1.45302 c 0.231372,-0.3193 0.254509,-0.59232 0.254509,-0.708 0,-0.48589 -0.342431,-1.05043 -1.068941,-1.05043 -0.61545,0 -1.059686,0.44423 -1.059686,1.05968 0,0.57381 0.407216,1.01804 0.99953,1.01804 0.09718,0 0.185098,-0.0139 0.273019,-0.0416 l -0.708,0.98565 z m 0.240627,-2.89679 c 0.430353,0 0.721882,0.32392 0.721882,0.73577 0,0.40259 -0.296157,0.71262 -0.717255,0.71262 -0.421098,0 -0.726509,-0.30078 -0.726509,-0.71262 0,-0.41647 0.296157,-0.73577 0.721882,-0.73577 z"
id="path1025" />
<path
d="m 43.928097,18.41576 c -0.09255,-0.0648 -0.291529,-0.1851 -0.596941,-0.1851 -0.592313,0 -1.027293,0.43035 -1.027293,1.01804 0,0.57843 0.430352,1.00416 1.027293,1.00416 0.180471,0 0.402589,-0.0463 0.610824,-0.19898 v -0.39796 c -0.175843,0.21286 -0.421098,0.30078 -0.620078,0.30078 -0.342432,0 -0.675608,-0.24526 -0.675608,-0.71263 0,-0.46737 0.323921,-0.71725 0.680235,-0.71725 0.171216,0 0.425725,0.0648 0.601568,0.2869 z"
id="path1027" />
<path
d="m 45.559605,21.26164 h 0.370196 l 1.411373,-2.9847 h -0.370196 l -0.624706,1.37435 -0.680235,-1.37435 h -0.379451 l 0.883843,1.73992 z"
id="path1029" />
<path
d="m 49.145916,19.92893 c 0.14345,0.1851 0.36094,0.32393 0.67098,0.32393 0.58306,0 0.92087,-0.47663 0.92087,-1.00416 0,-0.51827 -0.33318,-1.01804 -0.93475,-1.01804 -0.13882,0 -0.43035,0.0324 -0.6571,0.31467 v -1.72141 h -0.333173 v 3.37341 h 0.333173 z m 0.62471,0.0278 c -0.39333,0 -0.64322,-0.31929 -0.64322,-0.71263 0,-0.46274 0.32855,-0.71725 0.63859,-0.71725 0.31004,0 0.62934,0.24988 0.62934,0.72188 0,0.38408 -0.236,0.708 -0.62471,0.708 z"
id="path1031" />
<path
d="m 53.784766,19.55411 c -0.0417,0.0926 -0.11106,0.18973 -0.19898,0.26377 -0.11106,0.0925 -0.236,0.13882 -0.39334,0.13882 -0.33317,0 -0.60619,-0.25451 -0.61082,-0.65247 h 1.49467 c 0.009,-0.25451 -0.0602,-0.55067 -0.18048,-0.72188 -0.11568,-0.16659 -0.35168,-0.35169 -0.7265,-0.35169 -0.57844,0 -0.93012,0.44424 -0.93012,1.01804 0,0.71263 0.48588,1.00416 0.94863,1.00416 0.24525,0 0.46274,-0.0787 0.63858,-0.236 0.0972,-0.0879 0.18047,-0.20361 0.236,-0.31004 z m -1.18,-0.52753 c 0.0509,-0.2869 0.28227,-0.49976 0.56455,-0.49976 0.28227,0 0.50901,0.19898 0.56454,0.49976 z"
id="path1033" />
<path
d="m 55.698396,20.19733 h 0.33318 v -1.01341 c 0,-0.31467 0.0555,-0.44424 0.11106,-0.51828 0.0509,-0.0648 0.13419,-0.12031 0.26839,-0.12031 0.0509,0 0.12031,0.0139 0.19435,0.0648 l 0.15734,-0.30078 c -0.0833,-0.0417 -0.19436,-0.0787 -0.29616,-0.0787 -0.25914,0 -0.40259,0.20361 -0.43498,0.25451 v -0.20823 h -0.33318 z"
id="path1035" />
<path
d="m 59.197806,18.57772 c -0.15271,-0.32855 -0.42573,-0.34706 -0.52753,-0.34706 -0.32392,0 -0.55992,0.19898 -0.55992,0.53678 0,0.0972 0.0139,0.18973 0.0879,0.28228 0.0879,0.10643 0.236,0.18047 0.46737,0.28227 0.18047,0.0787 0.31004,0.13883 0.31004,0.3193 0,0.14345 -0.0972,0.30541 -0.31467,0.30541 -0.24062,0 -0.35168,-0.21286 -0.3887,-0.31467 l -0.2869,0.12032 c 0.16196,0.48125 0.59231,0.49051 0.67098,0.49051 0.37019,0 0.66172,-0.22675 0.66172,-0.62934 0,-0.10643 -0.0185,-0.20823 -0.1018,-0.31004 -0.074,-0.0925 -0.20361,-0.18047 -0.48126,-0.29615 -0.21749,-0.0925 -0.31004,-0.1342 -0.31004,-0.27302 0,-0.14808 0.11106,-0.21749 0.23138,-0.21749 0.12494,0 0.22211,0.0833 0.26839,0.19435 z"
id="path1037" />
<path
d="m 61.773596,20.25286 c 0.58306,0 1.01804,-0.42573 1.01804,-1.00879 0,-0.58306 -0.43035,-1.01341 -1.01804,-1.01341 -0.58768,0 -1.01804,0.43035 -1.01804,1.01341 0,0.58306 0.43499,1.00879 1.01804,1.00879 z m 0,-1.72604 c 0.35169,0 0.67561,0.24525 0.67561,0.71725 0,0.46737 -0.32855,0.71263 -0.67561,0.71263 -0.34243,0 -0.6756,-0.24063 -0.6756,-0.71263 0,-0.46737 0.32392,-0.71725 0.6756,-0.71725 z"
id="path1039" />
<path
d="m 64.746776,18.27694 h -0.33317 v 1.15686 c 0,0.236 0.0231,0.41184 0.17584,0.57843 0.17121,0.18047 0.39796,0.24063 0.58769,0.24063 0.18972,0 0.41647,-0.0602 0.58768,-0.24063 0.15271,-0.16659 0.17584,-0.34243 0.17584,-0.57843 v -1.15686 h -0.33317 v 1.11984 c 0,0.13419 0,0.29153 -0.0926,0.41184 -0.0509,0.0648 -0.15271,0.14808 -0.3378,0.14808 -0.1851,0 -0.28691,-0.0833 -0.33781,-0.14808 -0.0926,-0.12031 -0.0926,-0.27765 -0.0926,-0.41184 z"
id="path1041" />
<path
d="m 67.689226,16.82392 v 3.37341 h 0.33318 v -3.37341 z"
id="path1043" />
<path
d="m 75.188236,16.4676 -0.24526,0.10643 c 0.12495,0.17122 0.27765,0.44424 0.3702,0.62934 l -0.0787,-0.0463 c -0.074,0.0278 -0.18047,0.0417 -0.30541,0.0417 h -1.24941 c 0.0324,-0.0555 0.0648,-0.11106 0.0925,-0.16196 0.0463,-0.0879 0.12957,-0.24526 0.20824,-0.36557 l -0.4211,-0.1342 c -0.0278,0.12032 -0.10181,0.28228 -0.14808,0.36557 -0.21286,0.4211 -0.68949,1.11985 -1.48541,1.61498 l 0.31004,0.236 c 0.51827,-0.35631 0.93011,-0.8098 1.22627,-1.22164 h 1.56408 c -0.0926,0.37945 -0.32855,0.87458 -0.62933,1.2818 -0.32393,-0.22675 -0.67098,-0.45349 -0.9764,-0.62933 l -0.24988,0.25913 c 0.29616,0.1851 0.65247,0.42573 0.98102,0.66636 -0.41184,0.44886 -1.00878,0.87458 -1.79082,1.11058 l 0.33317,0.29153 c 0.78204,-0.29615 1.35122,-0.71725 1.76306,-1.17537 0.19436,0.14808 0.36557,0.29153 0.50439,0.41647 l 0.27302,-0.31929 c -0.14807,-0.12032 -0.32854,-0.25914 -0.52753,-0.40259 0.34706,-0.472 0.60157,-1.01804 0.72651,-1.44376 0.0231,-0.074 0.0694,-0.18048 0.10644,-0.24526 l -0.21749,-0.12957 0.24525,-0.11106 c -0.0972,-0.18972 -0.26376,-0.46737 -0.37945,-0.63396 z m 0.50902,-0.1851 -0.24526,0.10181 c 0.12957,0.17584 0.28228,0.43498 0.38408,0.63859 l 0.24988,-0.11106 c -0.0879,-0.17122 -0.26839,-0.46275 -0.3887,-0.62934 z"
id="path1045" />
<path
d="m 77.863236,18.19364 v 0.45349 c 0.14345,-0.0139 0.3887,-0.0231 0.64321,-0.0231 h 2.54047 c 0.20824,0 0.40259,0.0185 0.49514,0.0231 v -0.45349 c -0.1018,0.009 -0.26839,0.0231 -0.49977,0.0231 h -2.53584 c -0.25914,0 -0.50439,-0.0139 -0.64321,-0.0231 z"
id="path1047" />
<path
d="m 85.619166,16.6018 -0.43035,-0.13883 c -0.0278,0.12032 -0.0972,0.28691 -0.14345,0.36557 -0.19898,0.41647 -0.6571,1.08745 -1.45302,1.56408 l 0.31929,0.24063 c 0.5044,-0.3378 0.8931,-0.74965 1.17538,-1.13835 h 1.56407 c -0.0972,0.42109 -0.37945,1.01804 -0.74039,1.44376 -0.4211,0.49051 -0.99953,0.91161 -1.84635,1.16149 l 0.33318,0.30078 c 0.86996,-0.31929 1.42062,-0.74501 1.84172,-1.25866 0.41184,-0.49977 0.69875,-1.12447 0.82369,-1.59184 0.0231,-0.074 0.0694,-0.18047 0.10643,-0.24526 l -0.31004,-0.18972 c -0.074,0.0324 -0.17584,0.0463 -0.30078,0.0463 h -1.25404 c 0.0416,-0.0648 0.0787,-0.12957 0.11106,-0.19435 0.0416,-0.0879 0.12494,-0.24526 0.2036,-0.36557 z"
id="path1049" />
<path
d="m 91.380676,16.49074 h -0.44424 c 0.0185,0.14345 0.0231,0.24988 0.0231,0.34706 v 0.43035 h -1.02266 c -0.16197,0 -0.29616,-0.005 -0.43036,-0.0185 0.0139,0.10181 0.0139,0.25914 0.0139,0.35631 v 0.81444 c 0,0.0879 -0.005,0.21286 -0.0139,0.29615 h 0.40259 c -0.0139,-0.074 -0.0185,-0.19435 -0.0185,-0.27764 v -0.82832 h 2.58675 c -0.0417,0.39796 -0.18973,0.95788 -0.43961,1.35122 -0.28228,0.43498 -0.7913,0.78204 -1.25404,0.93012 -0.14808,0.0555 -0.32392,0.10643 -0.48126,0.12956 l 0.30079,0.34706 c 0.84682,-0.23137 1.48541,-0.70337 1.83247,-1.30957 0.25914,-0.44423 0.39333,-1.02266 0.45349,-1.39286 0.0185,-0.0879 0.0463,-0.20823 0.0694,-0.27765 l -0.24988,-0.15733 c -0.0602,0.0231 -0.14808,0.037 -0.3193,0.037 h -1.03655 v -0.43035 c 0,-0.0972 0.005,-0.20361 0.0278,-0.34706 z"
id="path1051" />
<path
d="m 95.564226,17.80494 v 0.37019 c 0.0972,-0.009 0.24525,-0.0139 0.31929,-0.0139 h 0.85145 v 1.7029 h -1.06431 c -0.10643,0 -0.22675,-0.009 -0.33318,-0.0231 v 0.38871 c 0.11106,-0.009 0.23137,-0.0139 0.33318,-0.0139 h 2.55898 c 0.074,0 0.21749,0.005 0.31004,0.0139 v -0.38871 c -0.0925,0.0139 -0.19898,0.0231 -0.31004,0.0231 h -1.11985 v -1.7029 h 0.90236 c 0.10643,0 0.22674,0.005 0.32855,0.0139 v -0.37019 c -0.0972,0.009 -0.21287,0.0185 -0.32855,0.0185 h -2.12863 c -0.074,0 -0.22212,-0.005 -0.31929,-0.0185 z"
id="path1053" />
<path
d="m 103.86157,16.35192 -0.25451,0.10643 c 0.10644,0.14808 0.24063,0.37482 0.33781,0.55529 -0.0694,0.0139 -0.13883,0.0139 -0.19898,0.0139 h -2.31835 c -0.15271,0 -0.33781,-0.0139 -0.46275,-0.0324 v 0.41184 c 0.11569,-0.005 0.27765,-0.0139 0.45812,-0.0139 h 2.36925 c -0.0648,0.44424 -0.27765,1.08745 -0.60619,1.50855 -0.38871,0.49514 -0.90698,0.88847 -1.80471,1.11059 l 0.31467,0.34706 c 0.84682,-0.26377 1.39749,-0.69412 1.82321,-1.23553 0.36557,-0.47663 0.58769,-1.22165 0.68949,-1.70753 0.0185,-0.0925 0.037,-0.16659 0.0694,-0.23137 l -0.22674,-0.14345 0.17584,-0.0787 c -0.0925,-0.17584 -0.25913,-0.45349 -0.36557,-0.61082 z m 0.59232,-0.12032 -0.25451,0.10643 c 0.12494,0.16196 0.27764,0.42573 0.37945,0.61545 l 0.25451,-0.11105 c -0.0972,-0.17585 -0.26377,-0.45349 -0.37945,-0.61083 z"
id="path1055" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 24 KiB

View file

@ -1,15 +0,0 @@
<svg id="remoteControl" version="1.1" viewBox="0 0 151 55" xmlns="http://www.w3.org/2000/svg">
<g fill="#0f0">
<path d="m43.79 44.97c-2.048-0.5781-3.801-1.188-3.896-1.355-0.3258-0.5737 2.86-16.17 3.361-16.45 0.4171-0.2368 5.312 4.476 6.296 6.061 0.3383 0.545-1.296 12.38-1.744 12.63-0.1616 0.09174-1.969-0.3063-4.017-0.8844zm-18.77 8.881c-0.2906-0.247-1.131-1.86-1.867-3.585l-1.339-3.136 7.52-4.435c4.136-2.439 7.622-4.257 7.746-4.039 0.3905 0.6875-0.8644 8.809-1.476 9.553-1.139 1.386-10.02 6.12-10.58 5.641zm-15.49-9.019c-3.061-1.22-5.656-2.376-5.766-2.571-0.2222-0.3911 3.079-6.707 3.686-7.052 0.4132-0.2346 14.57 5.664 15.58 6.489 0.4998 0.4108-0.1635 0.9412-3.659 2.927l-4.27 2.425zm39.38-17.56c-1.225-0.6701-10.13-12.25-9.64-12.53 0.07787-0.04429 2.244-0.128 4.814-0.1864l4.672-0.1061 3.6 4.057c2.558 2.882 3.539 4.277 3.39 4.817-0.2605 0.9452-6.129 4.334-6.836 3.948zm-40.8 4.108-3.962-1.758-1.455-5.464c-0.8002-3.005-1.416-5.604-1.369-5.775 0.04721-0.1716 1.833-0.5626 3.968-0.8692 4.259-0.6114 4.397-0.5232 5.264 3.347 0.2946 1.316 1.003 4.487 1.575 7.047s0.7918 4.784 0.4895 4.942c-0.3023 0.1582-2.332-0.5034-4.511-1.47zm25.07-19.93c-4.072-0.07373-7.542-0.3664-7.711-0.6502-0.1689-0.2838 0.7466-2.128 2.034-4.098l2.342-3.583 5.015-0.08468c8.075-0.1365 7.537-0.4471 7.103 4.098-0.2044 2.141-0.5984 4.019-0.8753 4.173-0.277 0.1538-3.835 0.2192-7.908 0.1455zm-18.93 8.06c-0.6189-1.17-3.005-8.018-2.903-8.333 0.3678-1.14 6.015-9.784 6.448-9.87 0.5116-0.101 5.689 3.911 6.193 4.8 0.1922 0.3386-8.431 13.71-9.079 14.08-0.128 0.07276-0.4246-0.2309-0.6592-0.6745z"/>
<path id="play" d="m23.48 20.4c-0.7423-0.0171-1.353 0.5798-1.354 1.322v11.75c0.0011 1.018 1.103 1.653 1.984 1.145l10.18-5.875c0.8836-0.5089 0.8836-1.784 0-2.293l-10.18-5.875c-0.1921-0.1112-0.409-0.1723-0.6309-0.1777z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000"/>
<path id="pause" d="m25.08 20.4a1.323 1.323 0 0 0-1.322 1.322v11.75a1.323 1.323 0 0 0 1.322 1.322h1.107a1.323 1.323 0 0 0 1.322-1.322v-11.75a1.323 1.323 0 0 0-1.322-1.322zm5.822 0a1.323 1.323 0 0 0-1.324 1.322v11.75a1.323 1.323 0 0 0 1.324 1.322h1.105a1.323 1.323 0 0 0 1.322-1.322v-11.75a1.323 1.323 0 0 0-1.322-1.322z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000"/>
</g>
<g id="rwdButton">
<path id="skipRwd" d="m79.91 12.38-8.592 10.77 3.059 13.43 12.41 5.983 12.41-5.972 3.072-13.43-8.584-10.77zm-0.9978 7.89h1.108a1.323 1.323 0 0 1 1.322 1.322v11.75a1.323 1.323 0 0 1-1.322 1.322h-1.108a1.323 1.323 0 0 1-1.322-1.322v-11.75a1.323 1.323 0 0 1 1.322-1.322zm8.308 0c0.747-0.02382 1.365 0.5752 1.365 1.322v11.75c-0.0021 1.273-1.625 1.809-2.385 0.7872l-4.358-5.877c-0.3461-0.4678-0.3461-1.107 0-1.574l4.358-5.877c0.2403-0.3247 0.616-0.5221 1.02-0.5353zm7.409 0c0.747-0.02382 1.365 0.5752 1.365 1.322v11.75c-0.0021 1.273-1.625 1.809-2.385 0.7872l-4.358-5.877c-0.3461-0.4678-0.3461-1.107 0-1.574l4.358-5.877c0.2403-0.3247 0.616-0.5221 1.02-0.5353z" fill="#0f0" stroke-width=".2646"/>
<rect x="72.4" y="13.44" width="28.33" height="27.86" fill="none"/>
</g>
<g id="ffwButton">
<path id="skipFfw" d="m127.5 12.38-8.594 10.77 3.059 13.43 12.41 5.983 12.41-5.972 3.072-13.43-8.584-10.77zm-0.9555 7.89c0.4038 0.0134 0.7792 0.2107 1.02 0.5353l4.358 5.877c0.3461 0.4678 0.3461 1.107 0 1.574l-4.358 5.877c-0.7597 1.022-2.382 0.4861-2.385-0.7872v-11.75c6e-5 -0.7472 0.6181-1.346 1.365-1.322zm7.409 0c0.4038 0.0134 0.7792 0.2107 1.02 0.5353l4.358 5.877c0.3461 0.4678 0.3461 1.107 0 1.574l-4.358 5.877c-0.7597 1.022-2.383 0.4861-2.385-0.7872v-11.75c7e-5 -0.7472 0.6186-1.346 1.365-1.322zm7.202 0h1.108a1.323 1.323 0 0 1 1.322 1.322v11.75a1.323 1.323 0 0 1-1.322 1.322h-1.108a1.323 1.323 0 0 1-1.322-1.322v-11.75a1.323 1.323 0 0 1 1.322-1.322z" fill="#0f0" stroke-width=".2646"/>
<rect x="120" y="13.45" width="28.33" height="27.86" fill="none"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.9 KiB

View file

@ -1,198 +1,190 @@
---
lang: en
layout: default
---
<!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 icon solid fa-volume-up">Listen</a></li>
</ul>
</div>
<div class="image">
<img src="{{ page.cover }}" 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">
<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
{% include header.html %}
<section>
<div class="album-player">
<!-- HERE BEGINS MADNESS -->
{% for album in site.albums %}
{% if page.album == album.slug %}
{% assign onetracker = album.tracks | size %}
<div class="player-wrap">
<!-- 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">
<h2>Track list</h2>
<ul id="plList">
{% for track in page.tracks %}
<li class="">
{% 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>
<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="noJSalbum">
<div class="coverartwrapper">
<div class="coverartwrapped" style="background-image: url({{ page.image }});"></div>
</div>
{% for track in album.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 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>
{% endfor %}
</div>
<div class="coverart">
<div class="coverartwrapper">
<div id="npImage" class="coverartwrapped"></div>
</div>
<div class="content" style="font-size: 16px;margin-top:60px;">
{% assign author_id = page.author | prepend: "/authors/" | append: "/" %}
{% assign author = site.authors | where: "url", author_id | first %}
<div id="author">
<div class="bio">
<p><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
<p>{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener"
href="{{ author.gpg }}">GPG</a>{% endif %}</p>
<p class="date">
Published the
{% include dates.html %}
</p>
<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 }}&amp;quote={{ page.title | 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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&amp;hashtags=basspistol"
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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
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 }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
{{ content }}
<p>{{ page.credits }}</p>
</div>
</div>
</section>
</div>
</div>
</section>
<div id="fixedPlayer" class="showplayer hideplayer">
<div id="audiowrap">
<div id="audio0">
<audio id="audio1" preload="metadata" controls="controls">
Your browser does not support HTML5 Audio!
</audio>
</div>
<!-- HERE ENDS MADNESS -->
</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 class="left" id="npAction">Paused...</p>
</div>
</div>
{% 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>
{% if onetracker > 1 %}
<!-- Tracks -->
{% for track in album.tracks %}
<section class="track-picker">
<div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
</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>
<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 }}
<br /><strong>{{ track.common.genre }}</strong>
<br />{{ track.common.year }}</p>
| <strong>{{ track.common.genre }}</strong></p>
<p>{{ track.common.year }}</p>
<p><a href="{{ relBase }}/albums/{{ track.slug }}/" class="button"><span class="fas fa-play"></span> Play</a></p>
<ul class="actions stacked">
<li><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button small icon solid fa-play">Play</a></li>
</ul>
</div>
<div class="image">
<img src="{{ track.cover }}" alt="{{ track.common.title }}" />
</div>
</section>
{% endfor %}
<!-- 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>More releases</h3>
</div>
<section class="post-navigation">
{% if page.previous.url or page.next.url %}
<h2>Check out more</h2>
<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>
{% if page.previous.url %}
<h3><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><span
class="fas fa-arrow-left"></span>&nbsp;{{page.previous.title}}</a></h3>
<p>{{ 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>
{% if page.next.url%}
<h3><a href="{{page.next.url}}">{{page.next.title}}&nbsp;<span class="fas fa-arrow-right"></span></a></h3>
<p>{{ page.next.description }}</p>
{% endif %}
</div>
</div>
{% endif %}
</section>
<!-- End Post Navigation -->
</div>
</section>
</div>
</div>
</section>
{% include footer.html %}
</div>
{% include navigation.html %}
{% include scripts.html %}
<script type="text/javascript">
@ -202,9 +194,9 @@ lang: en
// 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);
// var b = document.documentElement;
// b.setAttribute('data-useragent', navigator.userAgent);
// b.setAttribute('data-platform', navigator.platform);
// HTML5 audio player + playlist controls...
@ -217,26 +209,33 @@ lang: en
playing = false,
mediaPath = '',
extension = '',
tracks = [{% for track in page.tracks %}{
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 %}],
"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();
@ -248,6 +247,7 @@ lang: en
if ((index - 1) > -1) {
index--;
loadTrack(index);
playTrack(index);
if (playing) {
audio.play();
}
@ -261,6 +261,7 @@ lang: en
if ((index + 1) < trackCount) {
index++;
loadTrack(index);
playTrack(index);
if (playing) {
audio.play();
}
@ -272,21 +273,30 @@ lang: en
}),
li = $('#plList li').click(function () {
var id = parseInt($(this).index());
if (id !== index) {
if (id !== index || playing == false) {
playTrack(id);
}else {
audio.pause();
}
}),
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);
$("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');
},
playTrack = function (id) {
$('.plSel').removeClass('plSel');
$('#plList li:eq(' + id + ')').addClass('plSel');
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
@ -294,7 +304,3 @@ lang: en
});
</script>
{% include cookie-consent.html %}
</body>
</html>

View file

@ -1,3 +0,0 @@
---
layout: default
---

View file

@ -2,33 +2,56 @@
---
<!DOCTYPE HTML>
<!--
Based on _Story_ by html5up.net | @ajlkn
Publikatorized by Sakrecoer
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 %}">
<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.css" />
<link rel="stylesheet" href="{{ relBase }}/assets/css/main-20200812.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-20200812.css" /></noscript>
<meta name="theme-color" content="{{ site.data.colors.bg }}"/>
</head>
<body id="body">
<span id="top" style="display: none;"></span>
<body>
<!-- Wrapper -->
<div id="wrapper" class="divided">
<div id="main-wrapper">
{{ content }}
<!-- Footer -->
{% unless page.collection == 'tracks' or page.url == '/radio/' %}
{% include footer.html %}
{% endunless %}
<!-- END Footer -->
</div>
<!-- END Wrapper -->
{% unless page.collection == 'traks' %}
{% include navigation.html %}
{% include scripts.html %}
{% endunless %}
{% include cookie-consent.html %}
{% include scripts.html %}
{% if page.video_path %}
<div class="fullscreen-bg">
<video autoplay muted loop poster="{{ page.image }}" class="fullscreen-bg__video">
<source src="{{ page.video_path }}" type="video/mp4">
</video>
</div>
{% endif %}
</body>
</html>

View file

@ -1,43 +1,13 @@
---
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">
{% include header.html %}
<section class="info" id="read">
<div class="info-pages">
{{ content }}
</div>
</section>
</div>
</div>
</section>
{% include footer.html %}
{% if page.url == '/fr-fretag/' %}
{% include contact.html %}
{% endif %}

View file

@ -1,190 +1,181 @@
---
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>
</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">
<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
{% include header.html %}
<section>
<div class="album-player">
<!-- 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>
</div>
{% endif %}
</div>
{% assign onetracker = album.tracks | size %}
<div class="player-wrap">
<div id="plwrap">
<h2>Track list</h2>
<ul id="plList">
{% for track in album.tracks %}
<li class="">
<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>
<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">
<div class="noJSalbum">
<div class="coverartwrapper">
<div class="coverartwrapped" style="background-image: url({{ page.image }});"></div>
</div>
{% 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 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>
{% endfor %}
</div>
</div>
<div class="content" style="font-size: 16px;margin-top:60px;">
{{ content }}
<p>{{ page.credits }}</p>
</div>
</div>
</section>
</div>
</div>
</section>
<div class="coverart">
<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><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
<p>{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener"
href="{{ author.gpg }}">GPG</a>{% endif %}</p>
<p class="date">
Published the
{% include dates.html %}
</p>
<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 }}&amp;quote={{ page.title | 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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&amp;hashtags=basspistol"
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 }}&amp;text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
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 }}&amp;title={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}"
class="icon smaller fab fa-reddit"><span class="label">Reddit</span></a>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
{{ content }}
</div>
</section>
<div id="fixedPlayer" class="showplayer hideplayer">
<div id="audiowrap">
<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 class="left" id="npAction">Paused...</p>
</div>
</div>
{% include streamer.html %}
{% 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>
<section class="track-picker">
<div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
<ul class="actions stacked">
<li><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button small icon solid fa-play">Play</a></li>
</ul>
</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 }}/tracks/{{ track.slug }}/" class="button"><span class="fas fa-play"></span> Play</a></p>
</div>
</section>
{% endfor %}
<!-- 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>
<section >
<div class="post-navigation">
{% if page.previous.url or page.next.url %}
<h2>Check out more</h2>
<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>
{% if page.previous.url %}
<h3><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><span
class="fas fa-arrow-left"></span>&nbsp;{{page.previous.title}}</a></h3>
<p>{{ 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>
{% if page.next.url%}
<h3><a href="{{page.next.url}}">{{page.next.title}}&nbsp;<span class="fas fa-arrow-right"></span></a></h3>
<p>{{ page.next.description }}</p>
{% endif %}
</div>
{% endif %}
</div>
</section>
<!-- End Post Navigation -->
</div>
</section>
</div>
</div>
</section>
{% include footer.html %}
</div>
{% include navigation.html %}
{% include scripts.html %}
<script type="text/javascript">
@ -194,9 +185,9 @@
// 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);
// var b = document.documentElement;
// b.setAttribute('data-useragent', navigator.userAgent);
// b.setAttribute('data-platform', navigator.platform);
// HTML5 audio player + playlist controls...
@ -213,22 +204,29 @@
"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 }}"
"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();
@ -240,6 +238,7 @@
if ((index - 1) > -1) {
index--;
loadTrack(index);
playTrack(index);
if (playing) {
audio.play();
}
@ -253,6 +252,7 @@
if ((index + 1) < trackCount) {
index++;
loadTrack(index);
playTrack(index);
if (playing) {
audio.play();
}
@ -264,21 +264,30 @@
}),
li = $('#plList li').click(function () {
var id = parseInt($(this).index());
if (id !== index) {
if (id !== index || playing == false) {
playTrack(id);
}else {
audio.pause();
}
}),
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);
$("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');
},
playTrack = function (id) {
$('.plSel').removeClass('plSel');
$('#plList li:eq(' + id + ')').addClass('plSel');
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
@ -287,118 +296,38 @@
</script>
{% include cookie-consent.html %}
</body>
</html>
{% else %}
{% include header.html %}
<!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">
<section class="info" id="read">
<div class="info-pages">
<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 }}
{% if page.link != nil %}
<ul class="actions stacked">
<li><a href="{{ page.link }}?ref=TheOuthernationalMusicSyndicate" target="_blank" rel="noopener" class="button small icon solid fa-external-link-alt">Let's go!</a></li>
</ul>
{% endif %}
</div>
</section>
</div>
</div>
</section>
{% include streamer.html %}
<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>
<section >
<div class="post-navigation">
{% if page.previous.url or page.next.url %}
<h2>Check out more</h2>
<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>
{% if page.previous.url %}
<h3><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><span
class="fas fa-arrow-left"></span>&nbsp;{{page.previous.title}}</a></h3>
<p>{{ 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>
{% if page.next.url%}
<h3><a href="{{page.next.url}}">{{page.next.title}}&nbsp;<span class="fas fa-arrow-right"></span></a></h3>
<p>{{ 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 %}
{% include cookie-consent.html %}
</body>
</html>
{% endif %}
</div>
</section>
{% endif %}

View file

@ -4,124 +4,154 @@ 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 id="mainwrap" 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 %}
<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>
<ul class="actions stacked">
<li><button id="mu_pause" class="button small icon solid fa-play">Play!</button></li>
</ul>
<div id="trackArt">
<section>
<div class="coverartwrapper">
<div class="coverartwrapped" id="coverart" style="background-image: url({{ site.mediaurl }}/{{ page.slug }}.jpeg);"></div>
</div>
<div id="noJSalbum" 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 }}
<div class="playbutton hideWhenNoJS">
<a id="mu_pause" class="button">Play!</a>
</div>
<h1>{{ page.common.title }}</h1>
</p>
</section>
</div>
<!-- Content -->
<div id="trackInfo">
<section>
<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>
<ul class="actions stacked">
<li><a class="button small icon solid fa-play" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3">Play dat!</a></li>
</ul>
</div>
<div class="image">
<img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" />
</div>
</section>
<!-- 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 %}
<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 -->
<div class="content">
{% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
<p style="font-size:16px;">
<div class="info">
<p>
{{ page.all.USLT.text | newline_to_br }}
</p>
</div>
{% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
<p style="font-size:16px;">
<div class="info">
<p>
{{ page.all.USLT.text | newline_to_br }}
</p>
</div>
{% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
<p style="font-size:16px;">
<div class="info">
<p>
{{ page.all.UNSYNCEDLYRICS | newline_to_br }}
</p>
</div>
{% endif %}
<p>
{{ page.all.Comment }}
</p>
</div>
</section>
</div>
</div>
{% for albumurl in site.posts %}
{% if albumurl.album == page.albumSlug %}
<p><a href="{{ relBase }}{{ albumurl.url }}" class="button">See release page</a></p>
{% endif %}
{% endfor %}
</section>
{% for post in site.posts %}
{% if post.album == page.albumSlug %}
{% include streamer.html %}
{% endif %}
{% endfor %}
<!-- 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>
<section class="post-navigation">
{% if page.previous.url or page.next.url %}
<h2>Track Navigation</h2>
<div class="post-nav">
<div>
<h4><a href="{{ relBase }}/tracks/{{ 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 }}/tracks/{{ page.previousTrack.slug }}/">&nbsp;{{ page.previousTrack.common.title }}</a>
</h4>
{% 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"></span>&nbsp;Previous</a></h4>
<h3>{{ page.previous.common.title }}</h3>
<p>{{ page.previous.description }}</p>
{% endif %}
</div>
<div class="post-nav-next">
<h4><a href="{{ relBase }}/tracks/{{ page.nextTrack.slug }}/">&nbsp;{{ page.nextTrack.common.title }}</a> <a
href="{{ relBase }}/tracks/{{ page.nextTrack.slug }}/" alt="Read {{ page.nextTrack.common.title }}" title="Read {{ page.nextTrack.common.title }}"><i class="fas fa-arrow-right"></i></a></h4>
</div>
{% if page.next.url%}
<h4><a href="{{ page.next.url }}">Next&nbsp;<span class="fas fa-arrow-right"></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>
</section>
</div>
</div>
</section>
<!-- Audio player-->
<audio autoplay preload="metadata" data-matomo-title="{{ page.common.title }}">
<div id="fixedPlayer" class="showplayer hideplayer">
<div id="audiowrap">
<div id="audio0">
<audio controls 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>
</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>
</div>
<script type="text/javascript">
function loadUrl(newLocation) {
@ -132,19 +162,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 }}/tracks/{{ 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");
fixedplayer.classList.remove("hideplayer");
};
pauseButton.addEventListener("click", function () {
@ -154,21 +183,18 @@ 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>

View file

@ -34,7 +34,7 @@ stores:
icon: fa-creative-commons-sampling
download: true
---
This record got tremendous attention in the middle east capital cities.A journey from one end of the Kick'N'Base musical genre spectrum to the other, this record was produced during 2010 and was intended for kangaroos and happy ravers.
A journey from one end of the Kick'N'Base musical genre spectrum to the other, this record was produced during 2010 and was intended for kangaroos and happy ravers.
<p>Credits</p>
<p>(1) feat science futurst David Apfel<br />

View file

@ -13,7 +13,7 @@ description: >-
Paperplattunes and the uncertain future of free publications implicating links
to data in a semi-regulated data-market is kinda uncertain #SWOUP
uid: sparktapeculrywolverine
image: /assets/img/Screenshot at 2019-04-02 17-42-40.png
image: '/assets/img/Screenshot-at-2019-04-02-17-42-40.png'
download:
link: 'https://smt.xxx/'
album:

63
_sass/_cookies.scss Normal file
View file

@ -0,0 +1,63 @@
/* 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: 1em;
font-family: _font(family);
font-weight: 300;
}
@media only screen and (max-width: 651px) {
p {
text-align: center;
margin: 40px 40px 20px 40px;
}
.yes {
margin: 20px 40px 40px 40px;
}
}
}
.yes {
flex: 0 0 250px;
-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;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
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: 40px 40px 40px 20px;
}
.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;
}

374
_sass/_elements.scss Normal file
View file

@ -0,0 +1,374 @@
// Basic Elements
h1, h2, h3, h4, h5, h6 {
font-family: _font(title);
}
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(--accent2);
-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(--accent1);
text-decoration-style: wavy;
text-decoration-color: unset;
}
// Buttons
.button {
background-color: var(--accent2);
padding: 1em;
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;
}
.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 {
-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);
}
.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(--accent2);
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(--accent1);
}
.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: 20px;
.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;
}
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;
}
}
}
.front-section:first-of-type {
margin-top: 40px;
}
.splash {
.container {
display: flex;
flex-wrap: wrap;
padding: 40px;
align-items: flex-start;
max-width: var(--max-width);
margin: auto;
h1, h2 {
font-size: 2em;
}
p, h1, h2, h3, h4 {
text-align: left;
margin-top: 20px;
}
h1:first-child {
margin-top: 0;
}
div {
max-width: unset;
margin: 0;
flex: 1 1 300px;
padding: 0 0 0 80px;
}
.splash-logo {
padding: 0;
margin: 0;
}
@media only screen and (max-width: 759px) {
div {
min-width: 100%;
padding: 20px 0;
}
.splash-logo {
padding: 20px 0;
}
}
}
}
#contact {
padding: 20px;
> 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;
}

125
_sass/_forms.scss Normal file
View file

@ -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;
}

257
_sass/_layout.scss Normal file
View file

@ -0,0 +1,257 @@
html,
body {
margin:0;
padding:0;
background-color: var(--bg);
}
body {
height: 100vh;
width: 100%;
font-family: _font(family);
font-weight: 300;
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: 40px;
position: relative;
min-height: 80vh;
width: 100vw;
.textcontainer {
background-color: var(--bg-alt);
border-radius: var(--border-radius);
max-width: 700px;
padding: 20px 20px 40px 20px;
}
div {
z-index: 10;
h1, p {
flex: 1 0 100%;
width: 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: 240px;
background-repeat: repeat-x;
background-position: bottom;
z-index: 1;
}
}
section {
.container {
max-width: var(--max-width);
margin: 0 auto;
}
flex: 1 1 100%;
background-color: var(--bg);
-webkit-box-shadow: inset 0px 12px 32px -25px var(--border-alt);
-moz-box-shadow: inset 0px 12px 32px -25px var(--border-alt);
box-shadow: inset 0px 12px 32px -25px var(--border-alt);
z-index: 2;
h2 {
text-align: center;
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(--fg);
color: var(--bg);
background-image: url('../img/vignette-footer.svg');
background-size: 400px;
background-repeat: repeat-x;
background-position: top;
box-sizing: border-box;
z-index: 2;
.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 {
border-bottom: 1px solid var(--bg-alt);
line-height: 2;
font-size: 1.5em;
a {
font-weight: 700;
text-decoration: none;
color: var(--bg)
}
}
}
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 {
padding: 80px 0 160px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
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 250px;
h4 {
font-size: 2em;
justify-self: right;
}
}
.post-nav {
margin: 0 40px 0 0;
}
.post-nav-next {
margin: 0 0 0 40px;
}
}
// 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;
}
img {
width:100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
}
}
// Streambox
.streambox {
text-align: center;
line-height: 2em;
}
.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;
}
}

164
_sass/_navigation.scss Normal file
View file

@ -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%;
}

39
_sass/_noscripts.scss Normal file
View file

@ -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;
}

335
_sass/_player.scss Normal file
View file

@ -0,0 +1,335 @@
/* Audio Player Styles
================================================== */
/* Default / Desktop / Firefox */
.album-player {
display: flex;
flex-wrap: wrap;
padding: 0 40px;
justify-content: space-evenly;
flex-direction: row-reverse;
align-items: center;
max-width: var(--max-width);
margin: auto;
> div {
margin: 20px;
}
}
audio {
margin: 0;
width: 100%;
}
.player-wrap {
flex: 1 1 400px;
max-width: 700px;
border-radius: 5px;
width: 100%;
}
#plwrap {
ul {
list-style: none;
padding: 0;
li {
border-top: solid 1px var(--fg-alt);
}
li:first-child {
border-radius: 5px 5px 0 0 ;
}
li:last-child {
border-radius: 0 0 5px 5px;
border-bottom: solid 1px var(--fg-alt);
}
}
}
#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);
cursor: pointer;
margin: 0;
padding: 21px 0;
border-left: 1px solid var(--fg-alt);
border-right: 1px solid var(--fg-alt);
border-top: 0;
transition: all 400ms ease-in-out;
}
#plList li:hover {
background-color: var(--accent1);
color: var(--bg);
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 {
background-color: var(--fg-alt)!important;
cursor: pointer!important;
}
.plSel:hover {
background-color: var(--accent1)!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: 50vw;
text-align: left;
.button {
background-color: var(--accent1);
color: var(--bg);
}
.button:hover {
background-color: var(--accent2);
color: var(--fg);
}
> 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: 50vw;
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);
color: var(--fg);
}
.button:hover{
background-color: var(--accent1);
color: var(--bg);
}
> 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;
}
}

View file

@ -1,323 +1,4 @@
/* 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%;
}
//* 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;
}
}
/* Content images */
div.content {
img {
width: 100%;
height: auto;
}
}
/* Cloudcannon editor links */
//* Cloudcannon *//
.editor-link {
display: none;
@ -325,7 +6,7 @@ div.content {
padding-top: 30px;
.btn {
border: 0;
border-radius: 2px;
border-radius: var(--border-radius);
width: 100%;
max-width: 500px;
box-sizing: border-box;
@ -337,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;
@ -349,128 +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: _font(family-fixed);
}
@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;
}
}
}

33
_sass/_videos.scss Normal file
View file

@ -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%;
}

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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: _font(family-fixed);
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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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%;
}
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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');
}
}

View file

@ -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;

File diff suppressed because it is too large Load diff

View file

@ -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;

View file

@ -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);
}
}
}
}

98
_sass/ethos.scss Normal file
View file

@ -0,0 +1,98 @@
#ethossection {
padding: 80px 40px;
.ethos-flex {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: var(--max-width);
margin: auto;
}
.ethos {
flex: 1 1 320px;
min-width: 450px;
height: 100%;
flex-direction: row;
-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;
margin-top: 40px;
display: flex;
align-items: flex-start;
align-self: baseline;
justify-content: flex-start;
.mobile-hide{
display: none;
}
.cartouche, {
background-color: var(--bg);
width: 100%;
height: unset;
margin: 20px 0 20px 20px;
display: block;
border-radius: var(--border-radius);
}
.icon {
flex: 0 0 100px;
width: 100px;
height: 100px;
border-radius: 200px;
margin: 20px 20px 20px 0;
}
}
.ethos:nth-child(odd) {
.cartouche {
padding-right: 20px;
}
}
@media only screen and (max-width: 769px) {
.ethos {
flex: 0 0 auto;
flex-wrap: wrap;
min-width: unset;
max-width: unset;
justify-content: space-between;
margin: 20px;
.cartouche {
display: none;
}
.icon {
margin:0;
flex: 0 0 70px;
width: 70px;
height: 70px;
border-radius: 200px;
}
}
}
.st1 {
fill:var(--accent2);
-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;
}
.st1:hover {
fill:var(--accent1);
}
.st2 {animation: col 15s ease-in-out infinite;}
@keyframes col {
0% {fill:var(--accent2);}
50% {fill:var(--accent1);}
100% {fill:var(--accent2);}
}
}

View file

@ -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;
}
}
}
}

View file

@ -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%}
}

View file

@ -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/Staatliches/Staatliches-Regular.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;
}

View file

@ -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;
}
}
}
}
}
}

78
_sass/libs/_reset.scss Normal file
View file

@ -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;
}

View file

@ -1,85 +1,162 @@
// 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) {
$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 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...);
// }
@font-face {
font-family: 'Jetbrain-regular';
font-style: normal;
font-weight: 400;
src: local('Jetbrain Regular'), local('Jetbrain-Regular'), url(/assets/fonts/jetBrainsMono/JetBrainsMono_Regular.ttf) format('truetype'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-Regular.woff) format('woff'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-Regular.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Jetbrain-regular';
font-style: italic;
font-weight: 400;
src: local('Jetbrain Regular'), local('Jetbrain-Regular'), url(/assets/fonts/jetBrainsMono/JetBrainsMono_Italic.ttf) format('truetype'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-Italic.woff) format('woff'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-Italic.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Jetbrain-Extrabold';
font-style: normal;
font-weight: 700;
src: local('Jetbrain ExtraBold'), local('Jetbrain-ExtraBold'), url(/assets/fonts/jetBrainsMono/JetBrainsMono_ExtraBold.ttf) format('truetype'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-ExtraBold.woff) format('woff'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-ExtraBold.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Jetbrain-Extrabold';
font-style: italic;
font-weight: 700;
src: local('Jetbrain ExtraBold'), local('Jetbrain-ExtraBold'), url(/assets/fonts/JetBrainsMono_ExtraBold_Italic.ttf) format('truetype'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-ExtraBold-Italic.woff) format('woff'), url(/assets/fonts/jetBrainsMono/JetBrainsMono-ExtraBold-Italic.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: local('Poppins Light'), local('Poppins-Light'), url(/assets/fonts/poppins/Poppins-Light.ttf) format('truetype'), url(/assets/fonts/poppins/popin-light.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 300;
src: local('Poppins Light'), local('Poppins-Light'), url(/assets/fonts/poppins/Poppins-LightItalic.ttf) format('truetype'), url(/assets/fonts/poppins/popin-light-italic.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url(/assets/fonts/poppins/Poppins-Medium.ttf) format('truetype'), url(/assets/fonts/poppins/popin-medium.woff2) format('woff2');
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;
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url(/assets/fonts/poppins/Poppins-MediumItalic.ttf) format('truetype'), url(/assets/fonts/poppins/popin-medium-italic.woff2) format('woff2');
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;
}
// 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
);
// 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
)
);
// Font.
$font: (
family: ('Astloch', Helvetica, sans-serif),
family-fixed: ('Lucida Console', Monaco, monospace),
title: ('Jetbrain-Extrabold', 'Lucida Console', Monaco, monospace),
family: ('Poppins', 'Arial', 'Helvetica', sans-serif),
family-fixed: ('Jetbrain-Regular', 'Lucida Console', Monaco, monospace),
weight: 400,
weight-bold: 700,
kerning: -0.025em,
kerning: 0em,
kerning-alt: 0.125em
);
:root {
--border-radius: 3px;
--max-width: 1000px;
--anim-speed: 200ms;
// Palette.
$palette: (
color1: #30363d,
color2: #db8992,
color3: #ab7aad,
color4: #897cad,
color5: #7794ce,
color6: #64abb4,
color7: #6ba78c,
}
// // Palette.
// $palette: (
bg: rgb(49, 61, 38),
bg-alt: rgb(168, 255, 238),
bg-transparent: rgba(135, 153, 118, 0.5),
fg: rgb(254, 236, 237),
fg-bold: rgb(254, 236, 237),
fg-light: rgba(135, 153, 118, 0.75),
border: rgba(44, 55, 104, 0.2),
border-alt: rgba(44, 55, 104, 0.075),
border-bg: rgba(44, 55, 104, 0.05),
border-darken: rgba(29, 36, 22, 0.85),
border-dark: rgba(44, 55, 104, 0.85),
accent: rgba(244, 91, 105, 1),
accent-dark: rgb(31, 39, 24),
// 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),
invert: (
bg: rgb(49, 61, 38),
bg-alt: #222222,
fg: #ffffff,
fg-bold: #ffffff,
fg-light: #ffffff,
border: rgb(27, 34, 65),
border-alt: rgba(238, 238, 238, 0.25),
border-bg: rgba(44, 55, 104, 0.125),
accent: #47D3E5,
),
);
// );

View file

@ -1,5 +1,5 @@
///
/// Story by HTML5 UP
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
@ -7,14 +7,11 @@
/* 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') {
@ -23,6 +20,14 @@
}
}
// Stops initial animations until page loads.
body.is-preload-0 {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
@ -33,15 +38,7 @@
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');
}
}
html, body {
background-color: _palette(page-bg);
overflow: hidden;
}

View file

@ -1,5 +1,5 @@
///
/// Story by HTML5 UP
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

View file

@ -0,0 +1,153 @@
///
/// Lens 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: 16pt;
@include breakpoint('<=xlarge') {
font-size: 12pt;
}
@include breakpoint('<=large') {
font-size: 11pt;
}
}
body {
background-color: _palette(bg);
color: _palette(fg);
}
body, input, select, textarea {
font-family: _font(family);
font-weight: _font(weight);
line-height: 1.65;
font-size: 1em;
color: _palette(fg);
}
a {
@include vendor('transition', ('color #{_duration(transition)} ease', 'border-bottom-color #{_duration(transition)} ease'));
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
&:hover {
border-bottom-color: transparent;
color: _palette(accent);
}
}
strong, b {
font-weight: _font(weight);
color: _palette(fg-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: _font(weight);
line-height: 1.25;
margin: 0 0 (_size(element-margin) * 0.4) 0;
color: _palette(fg-bold);
a {
color: inherit;
text-decoration: none;
}
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.8em;
}
h6 {
font-size: 0.7em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: solid (_size(border-width) * 4) _palette(border);
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);
border: solid _size(border-width);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
border-color: _palette(border);
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
padding: 1em 1.5em;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid _size(border-width) _palette(border);
margin: _size(element-margin) 0;
&.major {
margin: (_size(element-margin) * 1.5) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}

View file

@ -1,5 +1,5 @@
///
/// Story by HTML5 UP
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

View file

@ -0,0 +1,66 @@
///
/// Lens 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',
'border-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: solid 1px _palette(border);
color: _palette(fg-bold);
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 0.75em 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
&:hover {
border-color: _palette(accent);
color: _palette(accent);
&:active {
background-color: transparentize(_palette(accent), 0.85);
}
}
&.icon {
padding-left: 1.35em;
&:before {
margin-right: 0.5em;
}
}
&.fit {
width: 100%;
}
&.small {
font-size: 0.8em;
}
&.large {
font-size: 1.35em;
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
}

View file

@ -0,0 +1,199 @@
///
/// Lens 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;
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
@include vendor('appearance', 'none');
background-color: transparent;
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 0.75em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
border-color: _palette(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>");
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;
option {
color: _palette(fg-bold);
background: _palette(bg);
}
&:focus {
&::-ms-value {
background-color: transparent;
}
}
&::-ms-expand {
display: none;
}
}
.select-wrapper {
@include icon;
display: block;
position: relative;
&:before {
color: _palette(border);
content: '\f107';
display: block;
height: _size(element-height);
line-height: _size(element-height);
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: _size(element-height);
}
select::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
& + label {
@include icon;
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: _font(weight);
margin: 0;
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&:before {
background: transparent;
border-radius: _size(border-radius);
border: solid _size(border-width) _palette(border);
content: '';
display: inline-block;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.575);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.6);
}
}
&:checked + label {
&:before {
background-color: _palette(fg-bold);
border-color: _palette(fg-bold);
color: _palette(bg);
content: '\f00c';
}
}
&:focus + label {
&:before {
border-color: _palette(accent);
}
}
}
input[type="checkbox"] {
& + label {
&:before {
border-radius: _size(border-radius);
}
}
}
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
opacity: 1.0;
color: _palette(fg-light) !important;
}
:-moz-placeholder {
opacity: 1.0;
color: _palette(fg-light) !important;
}
::-moz-placeholder {
opacity: 1.0;
color: _palette(fg-light) !important;
}
:-ms-input-placeholder {
opacity: 1.0;
color: _palette(fg-light) !important;
}
.field {
margin: 0 0 _size(element-margin) 0;
}

View file

@ -0,0 +1,17 @@
///
/// Lens 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;
> .label {
display: none;
}
}

View file

@ -1,5 +1,5 @@
///
/// Story by HTML5 UP
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
@ -13,10 +13,16 @@
li {
display: inline-block;
padding: 0 0.75rem 0 0;
padding: 0 1em 0 0;
&:last-child {
padding-right: 0;
}
.icon {
&:before {
font-size: 1.5rem;
}
}
}
}

View file

@ -0,0 +1,56 @@
///
/// Lens 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.25em;
li {
padding-left: 0.25em;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
li {
padding-left: 0.5em;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid _size(border-width) _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
}
dl {
margin: 0 0 _size(element-margin) 0;
dt {
display: block;
font-weight: _font(weight);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
dd {
margin-left: _size(element-margin);
}
}

View file

@ -0,0 +1,27 @@
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Footer */
#footer {
@include padding(2.25em, 2.25em);
.copyright {
list-style: none;
padding: 0;
li {
display: inline-block;
font-size: 0.8em;
margin-left: 0.35em;
padding: 0;
&:first-child {
margin-left: 0;
}
}
}
}

View file

@ -0,0 +1,16 @@
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Header */
#header {
@include padding(3em, 2.25em);
h1 {
font-size: 2.25em;
font-weight: _font(weight-bold);
}
}

View file

@ -0,0 +1,118 @@
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Main */
#main {
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: _size(main);
height: 100%;
background: _palette(bg);
outline: 0;
overflow-x: hidden;
overflow-y: auto;
text-align: _misc(main-align);
visibility: visible;
z-index: _misc(z-index-base);
@if _misc(main-side) == 'left' {
left: 0;
}
@else {
right: 0;
}
.toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url('images/close-small-alt.svg');
background-repeat: no-repeat;
background-size: 32px 32px;
cursor: pointer;
display: none;
z-index: 1;
@if _misc(main-side) == 'left' {
background-position: calc(100% - 0.5em) 0.5em;
right: 0;
}
@else {
background-position: 0.5em 0.5em;
left: 0;
}
}
body.fullscreen & {
visibility: hidden;
@if _misc(main-side) == 'left' {
left: (_size(main) * -1);
}
@else {
right: (_size(main) * -1);
}
}
body.is-preload-1 & {
opacity: 0;
@if _misc(main-side) == 'left' {
left: -2em;
}
@else {
right: -2em;
}
}
@include breakpoint('<=large') {
width: _size(main-alt);
body.fullscreen & {
@if _misc(main-side) == 'left' {
left: (_size(main-alt) * -1);
}
@else {
right: (_size(main-alt) * -1);
}
}
}
@include breakpoint('<=medium') {
background: transparentize(_palette(bg), 0.075);
.toggle {
display: block;
}
}
@include breakpoint('<=xsmall') {
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
width: 100%;
background: _palette(bg);
text-align: center;
body.is-preload-1 & {
left: auto !important;
right: auto !important;
}
body.fullscreen & {
left: auto !important;
right: auto !important;
opacity: 0;
}
.toggle {
display: none;
}
}
}

View file

@ -0,0 +1,75 @@
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Thumbnails */
#thumbnails {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
padding: 0 0.75em;
article {
position: relative;
width: #{100% / _misc(thumbnails-per-row)};
background: #101010;
outline: 0;
.thumbnail {
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: block;
position: relative;
border: 0;
outline: 0;
img {
display: block;
width: 100%;
}
&:before {
@include vendor('pointer-events', 'none');
@include vendor('transition', 'opacity 0.25s ease');
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
opacity: 0;
z-index: 1;
}
&:focus {
&:before {
opacity: 0.5;
}
}
}
h2, p {
display: none;
}
&.active {
.thumbnail {
&:before {
opacity: 1;
}
}
}
}
@include breakpoint('<=xsmall') {
article {
.thumbnail {
&:before {
display: none;
}
}
}
}
}

View file

@ -0,0 +1,267 @@
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Viewer */
@include keyframes(spinner) {
0% {
@include vendor('transform', 'rotate(0deg)');
}
100% {
@include vendor('transform', 'rotate(360deg)');
}
}
#viewer {
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'width #{_duration(layout)} ease'));
position: absolute;
top: 0;
width: calc(100% - #{_size(main)});
height: 100%;
@if _misc(main-side) == 'left' {
right: 0;
}
@else {
left: 0;
}
.inner {
@include vendor('pointer-events', 'none');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
> * {
@include vendor('pointer-events', 'auto');
}
&:before {
@include vendor('background-image', (
'linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))',
'linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))'
));
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 0;
width: 4em;
height: 4em;
background-image: url('images/close.svg');
background-repeat: no-repeat;
background-size: 64px 64px;
cursor: pointer;
z-index: 1;
@if _misc(main-side) == 'left' {
left: 0;
background-position: 0.75em 0.75em;
}
@else {
right: 0;
background-position: calc(100% - 0.75em) 0.75em;
}
}
.nav-next,
.nav-previous {
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: absolute;
top: 50%;
width: 6em;
height: 6em;
margin-top: -3em;
background-image: url('images/arrow.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.nav-previous {
@include vendor('transform', 'scaleX(-1)');
left: 0;
}
.nav-next {
right: 0;
}
}
.slide {
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
.caption {
@include vendor('background-image', (
'linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0))',
));
@include padding(2em, 2em);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: rgba(255,255,255,0.5);
z-index: 1;
h2, h3, h4, h5, h6 {
color: #fff;
}
}
.image {
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
}
&:before {
@include vendor('animation', 'spinner #{_duration(spinner)} linear infinite');
@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
background-image: url('images/spinner.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: -1.5em 0 0 -1.5em;
opacity: 0;
}
&.loading {
&:before {
opacity: 1;
}
}
&.active {
.image {
opacity: 1;
}
}
}
body.fullscreen & {
width: 100%;
.inner {
.toggle {
background-image: url('images/open.svg');
}
}
}
body.is-preload-1 & {
opacity: 0;
}
body.is-preload-2 & {
.slide {
opacity: 0;
}
}
@include breakpoint('<=large') {
width: calc(100% - #{_size(main-alt)});
}
@include breakpoint('<=medium') {
width: 100%;
.inner {
.toggle {
@include vendor('transition', 'opacity #{_duration(layout)} ease');
background-image: url('images/open.svg');
opacity: 0;
@if _misc(main-side) == 'left' {
left: 0;
}
@else {
right: 0;
}
}
}
body.fullscreen & {
.inner {
.toggle {
opacity: 1;
}
}
}
}
@include breakpoint('<=small') {
.inner {
.toggle {
background-size: 32px 32px;
}
.nav-next,
.nav-previous {
background-image: url('images/arrow-small.svg');
background-size: 32px 32px;
}
}
body.fullscreen & {
.inner {
.toggle {
background-image: url('images/open-small.svg');
}
}
}
}
@include breakpoint('<=xsmall') {
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease'));
@include vendor('transition-delay', '0s');
opacity: 0;
.inner {
.toggle {
background-image: url('images/close-small.svg') !important;
background-size: 32px 32px;
}
}
body.fullscreen & {
@include vendor('transition-delay', '#{_duration(layout-alt)}');
opacity: 1;
}
}
}

View file

@ -1,8 +1,7 @@
/// 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) {
@mixin icon($content: false, $where: before) {
text-decoration: none;
@ -14,25 +13,11 @@
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-weight: normal;
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;
}
}
}

View file

@ -0,0 +1,45 @@
// Misc.
$misc: (
z-index-base: 10000,
main-side: right,
main-align: right,
thumbnails-per-row: 2
);
// Duration.
$duration: (
transition: 0.25s,
layout: 0.75s,
layout-alt: 0.5s,
slide: 0.5s,
spinner: 1s
);
// Size.
$size: (
border-radius: 4px,
border-width: 1px,
element-height: 2.75em,
element-margin: 1.25em,
main: 22.5em,
main-alt: 19em
);
// Font.
$font: (
family: ('avant', 'Roboto', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 400,
weight-bold: 700
);
// Palette.
$palette: (
page-bg: #101010,
bg: rgb(51, 51, 51),
fg: rgb(224, 224, 224),
fg-bold: rgb(224, 224, 224),
fg-light: #ccc,
border: #ccc,
accent: #00D3B7
);

54
_sass/photos/main.scss Normal file
View file

@ -0,0 +1,54 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'font-awesome.min.css';
@font-face {
font-family: avant;
src: url('../fonts/free_avantgarde.woff');
}
@font-face {
font-family: avantB;
src: url('../fonts/free_avantgardeBOLD.woff');
}
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
// Breakpoints.
@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( 481px, 736px ),
xsmall: ( null, 480px )
));
// Base.
@import 'base/reset';
@import 'base/page';
@import 'base/typography';
// Component.
@import 'components/button';
@import 'components/form';
@import 'components/icon';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
// Layout.
@import 'layout/main';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/thumbnails';
@import 'layout/viewer';

View file

@ -0,0 +1,47 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
/*
Lens by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Main */
#main {
opacity: 1 !important;
@if _misc(main-side) == 'left' {
left: 0 !important;
}
@else {
right: 0 !important;
}
}
body:before {
content: 'Javascript is disabled :(';
display: block;
position: absolute;
top: 50%;
width: calc(100% - #{_size(main)} * 0.333333333);
height: 4em;
margin-top: -2em;
color: mix(_palette(page-bg), #fff, 90%);
cursor: default;
font-size: 3em;
line-height: 4em;
text-align: center;
white-space: nowrap;
@if _misc(main-side) == 'left' {
right: 0;
}
@else {
left: 0;
}
}

View file

@ -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;
}

48
_sass/staff.scss Normal file
View file

@ -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;
}
}
}
}

9
_sass/svg.scss Normal file
View file

@ -0,0 +1,9 @@
#linearGradient2060 {
stop {
stop-color: var(--accent2);
}
stop:nth-child(even){
stop-color: var(--fg);
}
}

116
_sass/trackplayer.scss Normal file
View file

@ -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-alt);
> * {
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;
}

View file

@ -18,45 +18,33 @@ video_path: /assets/vid/artists.mp4
image: /assets/vid/artists.jpg
---
{% include relBase.html %}
<!-- Banner -->
<section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center">
{% include header.html %}
<div class="image">
<img src="{{ relBase }}{{ page.image }}" alt="{{ page.title | smartify }}" class="editable" />
</div>
</section>
<!-- NEWS -->
<section id="news" class="wrapper style1 align-center">
<div class="inner" style="padding-top: 40px;">
<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>
<p>Our Artists are free and independent: We have no exclusivity deals. If you feel you can offer these Geniuses a better deal then <a href="https://github.com/Basspistol/Music-Syndicate" target="_blank" rel="noopener">ours,</a> you should contact them ASAP</p>
</div>
</section>
{% assign sorted = site.data.artists | sort: 'id' %}
{% for artist in sorted %}
{% for post in sorted %}
<section id="second" class="spotlight style2 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">
<h2>{{ artist.display_name }}</h2>
<!-- <p>{{ artist.bio }}</p> -->
<section class="front-section">
<ul class="actions stacked">
<li><a href="{{ artist.web }}?ref=TheOuternationalMusicSyndicate" target="_blank" rel="noopener" style="text-decoration:none;" class="button small icon solid fa-external-link-alt">Visit</a></li>
</ul>
<div style="background-image:url({{ post.image }})">
<p class="editor-link"><a href="cloudcannon:collections/_artists/{{ post.path }}" rel="nofollow"
class="btn"><strong>&#9998;</strong> Edit Posy</a></p>
</div>
<div class="image">
<img src="{{ relBase }}{{ artist.image }}" alt="{{ artist.display_name | smartify }}" />
<div class="description">
<div class="container">
<div class="">
<h3></h3>
{{ post.description }}
</div>
<div>
<p><a class="button" href="{{ relBase }}{{ post.link }}">🌍 {{ post.display_name }}</a></p>
</div>
</div>
</div>
</section>
{% endfor %}
{% include footer.html %}
</body>
</html>

Binary file not shown.

Binary file not shown.

5
assets/css/all.min.css vendored Normal file

File diff suppressed because one or more lines are too long

16
assets/css/colors.css Normal file
View file

@ -0,0 +1,16 @@
---
layout: nil
---
:root {
--bg: {{ site.data.colors.bg_color }};
--bg-alt: {{ site.data.colors.bg-alt_color }};
--fg: {{ site.data.colors.fg_color }};
--fg-alt: {{ site.data.colors.fg-alt_color }};
--border: {{ site.data.colors.border_color }};
--border-alt: {{ site.data.colors.border-alt_color }};
--accent1: {{ site.data.colors.accent1_color }};
--accent1-alt: {{ site.data.colors.accent1-alt_color }};
--accent2: {{ site.data.colors.accent2_color }};
--accent2-alt: {{ site.data.colors.accent2-alt_color }};
}

4
assets/css/font-awesome.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,21 @@
---
---
@import 'libs/vars';
@import 'libs/reset';
// sethy stuff
@import 'libs/animations';
@import 'layout';
@import 'elements';
@import 'forms';
@import 'navigation';
@import 'videos';
@import 'player';
@import 'trackplayer';
@import 'cookies';
@import 'set';
@import 'svg';
@import 'ethos';
@import 'staff';

View file

@ -1,192 +0,0 @@
---
---
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import 'fontawesome-all.min.css';
@import 'libs/fonts';
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
// Breakpoints.
@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( 481px, 736px ),
xsmall: ( 361px, 480px ),
xxsmall: ( null, 360px )
));
// Mixins.
@mixin color($p) {
@include color-typography($p);
@include color-box($p);
@include color-button($p);
@include color-form($p);
@include color-icon($p);
@include color-list($p);
@include color-section($p);
@include color-table($p);
@include color-banner($p);
@include color-spotlight($p);
@include color-gallery($p);
@include color-items($p);
@include color-index($p);
}
// Phone.
@mixin phone($image-width) {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-radius: 0;
border: solid _size(border-width);
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
width: 100%;
height: 100%;
border-radius: 0;
}
&:before {
content: '';
display: block;
background-position: center;
background-repeat: no-repeat;
border: solid _size(border-width);
border-bottom: 0;
}
&:after {
content: '';
display: block;
background-position: center;
background-repeat: no-repeat;
border: solid _size(border-width);
border-top: 0;
}
@include resize-phone($image-width, 1);
}
@mixin resize-phone($image-width, $image-factor) {
$image-pad-top: 2.5rem;
$image-pad-bottom: 3rem;
$image-height: ($image-width * (1920 / 1080));
width: ($image-width * $image-factor);
height: (($image-width * $image-factor) * (1920 / 1080));
margin-top: ($image-pad-top * $image-factor);
margin-bottom: (_size(element-margin) + ($image-pad-bottom * $image-factor));
&:before {
height: ($image-pad-top * $image-factor);
background-size: (64px * $image-factor) (32px * $image-factor);
margin-top: (($image-pad-top * $image-factor) * -1);
border-radius: (1rem * $image-factor) (1rem * $image-factor) 0 0;
}
&:after {
height: ($image-pad-bottom * $image-factor);
background-size: (64px * $image-factor) (32px * $image-factor);
margin-bottom: (($image-pad-bottom * $image-factor) * -1);
border-radius: 0 0 (1rem * $image-factor) (1rem * $image-factor);
}
}
@mixin color-phone($p) {
border-color: _palette($p, border);
background-color: _palette($p, border);
@if ($p != 'invert') {
border-width: 0;
}
@else {
border-width: _size(border-width);
}
&:before {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="11" y="12" width="42" height="8" vector-effect="non-scaling-stroke" /></svg>');
border-color: _palette($p, border);
@if ($p == 'invert') {
width: calc(100% + #{_size(border-width) * 2});
margin-left: (_size(border-width) * -1);
}
@else {
width: 100%;
}
}
&:after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><circle cx="32" cy="16" r="14" vector-effect="non-scaling-stroke" /></svg>');
border-color: _palette($p, border);
@if ($p == 'invert') {
width: calc(100% + #{_size(border-width) * 2});
margin-left: (_size(border-width) * -1);
}
@else {
width: 100%;
}
}
}
@mixin color-phone-variant($v, $p) {
@if ($v == 'android') {
&:after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="6" y="4" width="52" height="24" vector-effect="non-scaling-stroke" /></svg>');
}
}
@else if ($p == 'iphone') {
// ...
}
}
// Base.
@import 'base/reset';
@import 'base/page';
@import 'base/typography';
// Component.
@import 'components/row';
@import 'components/box';
@import 'components/button';
@import 'components/form';
@import 'components/icon';
@import 'components/image';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
@import 'components/section';
@import 'components/table';
@import 'components/banner';
@import 'components/spotlight';
@import 'components/gallery';
@import 'components/wrapper';
@import 'components/items';
@import 'components/index';
// Layout.
@import 'layout/wrapper';
// Set's customizations
@import 'set.scss';
@import 'player.scss';

View file

@ -1,258 +0,0 @@
---
---
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import 'libs/fonts';
/*
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', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-down {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-left {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-right {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-in {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
// Image.
&.on#{$event}-image-fade-up {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-down {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-left {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-right {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-in {
.image {
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
img {
opacity: 1;
}
}
}
}
}
// On Load.
@include transition-banner('load');
// On Scroll.
@include transition-banner('scroll');
}
// Set's customizations
@import 'set';
@import 'player';
.logo {
position: fixed;
top: 20px;
right: 20px;
width: 50%;
height: 10%;
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: 0 0 10px 1px _palette(border-alt);
}
@media only screen and (min-width: 769px) {
.logo {
position: fixed;
top: 20px;
right: 20px;
width: 20%;
height: 10%;
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: 0 0 10px 1px _palette(border-alt);
}
}
// Player link
#mainwrap {
display: none;
}
#noJSalbum {
display: unset;
}

View file

@ -0,0 +1,23 @@
---
---
@import 'libs/vars';
@import 'libs/reset';
// sethy stuff
@import 'libs/animations';
@import 'layout';
@import 'elements';
@import 'forms';
@import 'navigation';
@import 'videos';
@import 'player';
@import 'trackplayer';
@import 'cookies';
@import 'set';
@import 'svg';
@import 'ethos';
@import 'staff';
@import 'noscripts';

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show more