stash
This commit is contained in:
Set Hallstrom
parent
b747089fca
commit
5113069605
94
404.html
94
404.html
|
|
@ -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>©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>
|
||||
4
Gemfile
4
Gemfile
|
|
@ -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
|
||||
|
|
|
|||
21
Gemfile.lock
21
Gemfile.lock
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -116,4 +116,6 @@ defaults:
|
|||
width: 720
|
||||
height: 720
|
||||
resize_style: cover
|
||||
uploads_dir: "/images"
|
||||
uploads_dir: "/images"
|
||||
|
||||
|
||||
|
|
|
|||
10
_data/colors.yml
Normal file
10
_data/colors.yml
Normal 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)'
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,41 @@
|
|||
{% 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;">
|
||||
{% if page.collection == 'posts' %}
|
||||
<div class="author-image" alt="Picture of {{ author.name }}" style="background-image:url({{ author.image }});">
|
||||
</div>
|
||||
<br />
|
||||
<p><a href="mailto:{{ author.email }}"><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>
|
||||
|
||||
{% endif %}
|
||||
<h6>
|
||||
|
||||
Share this page:
|
||||
</h6>
|
||||
<ul>
|
||||
<a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook"
|
||||
href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&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 }}&text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}%20&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 }}&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 }}&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>
|
||||
<br />
|
||||
<p style="font-style: normal;"><a href="mailto:{{ author.email }}"><strong>{{ author.name }}</strong></a></p>
|
||||
<p style="font-style: normal;">{{ author.position }}{% if author.gpg != nil %} | <a target="_blank" rel="noopener" href="{{ author.gpg }}">GPG</a>{% endif %}</p>
|
||||
<p style="font-size:14px;font-style: normal;">
|
||||
Published the
|
||||
|
||||
{% include dates.html %}
|
||||
</p>
|
||||
|
||||
{% endif %}
|
||||
<h6>
|
||||
|
||||
Share this page:
|
||||
</h6>
|
||||
<ul class="icons">
|
||||
<li><a target="_blank" rel="nofollow noopener" title="Share to facebook" alt="Share to facebook" href="https://touch.facebook.com/sharer.php?u={{ site.url }}{{ page.url | xml_escape }}&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 }}&text={{ page.title | xml_escape }}%20by%20{{ site.title xml_escape }}%20&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 }}&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 }}&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>
|
||||
{% if page.collection == 'tracks' %}
|
||||
<a href="{{ relBase }}/albums/{{ page.albumSlug }}" class="button smaller"> Back to Album</a><br /><br />
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
|
@ -1,42 +1,47 @@
|
|||
<!-- Contact -->
|
||||
<section id="contact" class="wrapper style1 align-center">
|
||||
<div class="inner medium">
|
||||
<h2 class="editable">
|
||||
|
||||
</h2>
|
||||
<form action="{{ site.baseurl }}/contact-success/" method="post">
|
||||
<input type="hidden" name="_to" value="setto@basspistol.com" /><br />
|
||||
<input type="text" name="_gotcha" style="display: none;" />
|
||||
<div class="fields">
|
||||
<div class="field half">
|
||||
<label for="name">{{ site.data.translations[page.lang].name }}</label>
|
||||
<input type="text" name="name" id="name" placeholder="{{ site.data.translations[page.lang].name }} {{ site.data.translations[page.lang].lastname }}" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="email">{{ site.data.translations[page.lang].email }}</label>
|
||||
<input type="email" name="email" placeholder="{{ site.data.translations[page.lang].required }}" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="message">{{ site.data.translations[page.lang].message }}</label>
|
||||
<textarea name="message" id="message" rows="6" placeholder="{{ site.data.translations[page.lang].write-msg }}"></textarea>
|
||||
</div>
|
||||
<!-- BEGIN contact.html -->
|
||||
<section id="contact">
|
||||
<div>
|
||||
<form action="{{ relBase }}/contact-success/" method="post" class="contact-form">
|
||||
<div>
|
||||
<h2>Kontakta oss!</h2>
|
||||
<input type="hidden" name="_to" value="{{ site.publisher.mail }}" /><br />
|
||||
<input type="text" name="_gotcha" style="display: none;" />
|
||||
</div>
|
||||
<div style="text-align: left;">
|
||||
<input type="checkbox" name="consent" id="consent" required />
|
||||
<label for="consent">{{ site.data.translations[page.lang].privacy }}
|
||||
</label>
|
||||
<br /><br />
|
||||
|
||||
<input type="checkbox" name="newsletter" id="newsletter" />
|
||||
<label for="newsletter">{{ site.data.translations[page.lang].newsletter }}
|
||||
<div class="contact-info">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" placeholder="Email..." required class="contact" />
|
||||
{% if page.url == '/fr-fretag/' %}
|
||||
<label for="phone">Phone</label>
|
||||
<input type="tel" name="telephone" id="telephone" placeholder="Telefonnumer..." required
|
||||
class="contact" />
|
||||
<label for="name">Name</label>
|
||||
<input type="name" name="name" id="name" placeholder="Namn och efternamn..." required class="contact" />
|
||||
<label for="company">Företag</label>
|
||||
<input type="company" name="company" id="company" placeholder="Företag..." required
|
||||
class="contact" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Meddelande</label><br />
|
||||
<textarea name="message" id="message" placeholder="Skriv ditt meddelande här..." required
|
||||
class="contact textspace"></textarea>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<input type="checkbox" name="consent" id="consent" required class="css-checkbox lrg klaus" /><label
|
||||
for="consent" class="css-label lrg klaus">Jag godkänner <a href="/cookies/">integritets policyn</a>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<ul class="actions special">
|
||||
<li><input type="submit" name="submit" id="submit" value="{{ site.data.translations[page.lang].send }}" /></li>
|
||||
</ul>
|
||||
<br />
|
||||
<div>
|
||||
<input type="checkbox" name="news" id="news" class="css-checkbox lrg klaus" /><label for="news"
|
||||
class="css-label lrg klaus">Jag vill ha nyheter</label>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<input type="submit" class="button" value="Send Message" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END Contact -->
|
||||
<!-- END contact.html -->
|
||||
|
|
@ -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 + "=";
|
||||
|
|
|
|||
172
_includes/ethoicon-selector.html
Normal file
172
_includes/ethoicon-selector.html
Normal 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
31
_includes/ethos.html
Normal 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>✎</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>✎</strong>
|
||||
Edit Ethos</a></p>
|
||||
</div>
|
||||
</div>
|
||||
{% break %} {% endif %} {% endfor %} {% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -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>©{{ site.time | date: '%Y' }} {{ site.publisher.name }} | <a href="{{ relBase }}/webcreds/">Credits</a> | <a href="{{ relBase }}/cookies/">Cookies & Privacy</a></p>
|
||||
<p>©{{ 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>
|
||||
|
|
|
|||
21
_includes/forloop-dates.html
Normal file
21
_includes/forloop-dates.html
Normal 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
26
_includes/header.html
Normal 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 %}
|
||||
|
||||
|
||||
|
|
@ -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 -->
|
||||
|
|
@ -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);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,28 +1,33 @@
|
|||
<!-- Navigation -->
|
||||
<div id="logo" class="logo">
|
||||
<a href="/"><img width="100em" src="{{ site.logo }}" alt="{{ site.name }} Logo" /></a>
|
||||
<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span style="font-size: 34px;" class="icon solid fa-bars"></span></a>
|
||||
</div>
|
||||
|
||||
<div id="navbar" style="display: block;" class="modalDialog">
|
||||
<a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu"><div id="closearea"> </div></a>
|
||||
<nav>
|
||||
<a href="#close" title="Close" onclick="removeBlur()" class="close-button close" style="margin: 0 auto;">X</a>
|
||||
<ul>
|
||||
{% if page.url != '/' %}
|
||||
<li><a href="{{ relBase }}/" class="button smaller">{{ site.data.translations[page.lang].home }}</a></li>
|
||||
{% endif %}
|
||||
{% for entry in site.data.navigation %}
|
||||
{% if entry.external_site == false %}
|
||||
<li><a href="{{ relBase }}{{ entry.url }}" class="button smaller">{{ entry.name }}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{ entry.url }}" target="_blank" rel="noopener" class="button smaller">{{ entry.name }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div id="sticky" class="logo{% if page.collection == 'tracks' %} sticky{% endif %}">
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<a id="logo" {% if page.url != '/' %}href="/"{% else %}href="#top"{% endif %}><img height="40px" src="{{ site.logo }}" alt="{{ site.title }} Logo" /></a>
|
||||
<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span
|
||||
class="fas fa-bars navmenu"></span></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="navbar" class="modalDialog">
|
||||
<a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu">
|
||||
<div id="closearea"> </div>
|
||||
</a>
|
||||
<nav>
|
||||
<a href="#close" title="Close" onclick="removeBlur()" class="close-button">X</a>
|
||||
<ul>
|
||||
{% if page.url != '/' %}
|
||||
<li><a href="{{ relBase }}/" onclick="removeBlur()" class="button">home</a></li>
|
||||
{% endif %}
|
||||
{% for entry in site.data.navigation %}
|
||||
{% if entry.external_site == false %}
|
||||
<li><a href="{{ relBase }}{{ entry.url }}" onclick="removeBlur()" class="button">{{ entry.name }}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{ entry.url }}" target="_blank" rel="noopener" onclick="removeBlur()" class="button">{{ entry.name }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- End Navigation -->
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 "{{ page.common.title| strip_html }}" by {{ page.common.artist }}" />
|
||||
<meta name="description" content="A track by {{ page.common.artist }} named "{{ page.common.title | strip_html }}" 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 ©{{ site.time | date: '%Y' }} {{ site.title }}." />
|
||||
<meta name="dcterms.Subject" content="A track by {{ page.common.artist }} named "{{ page.common.title| strip_html }}" published on {{ site.title }}" />
|
||||
<meta name="dcterms.Title" content="Play "{{ page.common.title| strip_html }}" 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 "{{ page.common.album | strip_html }}" 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 "{{ page.common.album | strip_html }}" 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 "{{ page.common.album | strip_html }}" 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 "{{ page.name }}" by {{ artist | uniq }} | {{ site.title }}</title>
|
||||
<meta name="title" content="Play "{{ page.name | strip_html }}" by {{ artist | uniq }}" />
|
||||
<meta name="description" content="A release by {{ artist | uniq }} named "{{ page.name | strip_html }}" 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 ©{{ site.time | date: '%Y' }} {{ site.title }}." />
|
||||
<meta name="dcterms.Subject" content="A release by {{ artist | uniq }} named "{{ page.name | strip_html }}" published on {{ site.title }}" />
|
||||
<meta name="dcterms.Title" content="Play "{{ page.name | strip_html }}" 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 "{{ page.name | strip_html }}" 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 "{{ page.name | strip_html }}" 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 "{{ page.name | strip_html }}" 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 ©{{ 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 ©{{ 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 %}
|
||||
{% endif %}
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" href="{{ site.url}}/feed.xml" title="{{ site.title }}" />
|
||||
<!-- END seo.html -->
|
||||
|
|
@ -1,205 +1,88 @@
|
|||
|
||||
{% 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>
|
||||
<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">
|
||||
|
||||
{% 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>
|
||||
<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;"> </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>
|
||||
{% 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>
|
||||
{% if page.category == 'releases' %}
|
||||
{% if page.check_this_if_cannot_be_bought == false %}
|
||||
<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 %}
|
||||
|
||||
<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>
|
||||
|
||||
<p style="text-align: center;display: block;margin-top:40px;">Stream it, follow, like and subscribe!</p>
|
||||
</section>
|
||||
{% else %}
|
||||
<section class="streambox">
|
||||
<h2>This release can't be obtained</h2>
|
||||
<p>Stream, follow, like and subscribe!</p>
|
||||
<div class="streamer">
|
||||
|
||||
{% for shop in page.stores %}
|
||||
{% if shop.download != true %}
|
||||
|
||||
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" style="flex: 0 0 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 %}
|
||||
{% for shop in site.data.stores %}
|
||||
|
||||
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if page.check_this_if_cannot_be_bought == false %}
|
||||
<section class="streambox">
|
||||
<h2>Get this release</h2>
|
||||
<div class="streamer">
|
||||
{% for shop in page.stores %}
|
||||
|
||||
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% elsif page.collection == 'tracks' %}
|
||||
<section class="streambox">
|
||||
|
||||
<section class="streambox" style="padding: 40px;">
|
||||
{% for post in site.posts %}
|
||||
{% if post.album == page.albumSlug %}
|
||||
{% if post.check_this_if_cannot_be_bought == false %}
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% if post.album == page.albumSlug %}
|
||||
{% if post.check_this_if_cannot_be_bought == false %}
|
||||
<h2>Get this track</h2>
|
||||
<div class="streamer">
|
||||
{% for shop in post.stores %}
|
||||
|
||||
<h2 style="text-align: center;display: block;">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>
|
||||
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<h2>This track can't be obtained</h2>
|
||||
<p>Stream, follow, like and subscribe!</p>
|
||||
<div class="streamer">
|
||||
{% for shop in site.data.stores %}
|
||||
|
||||
<a onclick="_paq.push(['trackEvent', 'StoreLink', '{{ shop.name | remove: " " }}']);" target="_blank" rel="noopener" href="{{ shop.url }}" title="Stream from {{ shop.name }}" class="icon fab {{ shop.icon }}"><span class="label">{{ shop.name }}</span></a>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% break %}
|
||||
|
||||
{% endif %}
|
||||
{% 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 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;"> </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 %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% 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>
|
||||
<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;"> </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 %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</section>
|
||||
</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;"> </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 %}
|
||||
|
||||
<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>
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -1,300 +1,306 @@
|
|||
---
|
||||
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>
|
||||
<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
|
||||
{% include header.html %}
|
||||
|
||||
<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">
|
||||
<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">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
<!-- HERE BEGINS MADNESS -->
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div id="mainwrap">
|
||||
<div id="nowPlay">
|
||||
<p class="right" id="npTitle" style="font-weight: bold;"></p>
|
||||
<p class="left" id="npAction">Paused...</p>
|
||||
</div>
|
||||
<div id="audiowrap">
|
||||
<div id="audio0">
|
||||
<audio id="audio1" preload="metadata" controls="controls">Your browser does not support HTML5
|
||||
Audio!</audio>
|
||||
</div>{% assign onetracker = page.tracks | size %}
|
||||
{% if onetracker > 1 %}
|
||||
<div id="tracks">
|
||||
<a id="btnPrev"><span class="icon solid fa-fast-backward"></span></a>
|
||||
<a id="btnNext"><span class="icon solid fa-fast-forward"></span></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="plwrap">
|
||||
<ul id="plList">
|
||||
{% for track in page.tracks %}
|
||||
<li class="">
|
||||
<div class="plItem">
|
||||
<div class="plNum">{{ track.common.track.no }}.</div>
|
||||
<div class="plTitle">{{ track.common.title }}</div>
|
||||
<div class="plLength">{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noJSalbum">
|
||||
|
||||
{% for track in page.tracks %}
|
||||
|
||||
<div class="plItem">
|
||||
<div class="plNum">{{ track.common.track.no }}.</div>
|
||||
<div class="plTitle"><a href="{{ track.audio }}">{{ track.common.title }} </a></div>
|
||||
<div class="plLength">{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="font-size: 16px;margin-top:60px;">
|
||||
{{ content }}
|
||||
<p>{{ page.credits }}</p>
|
||||
<div id="plwrap">
|
||||
<h2>Track list</h2>
|
||||
<ul id="plList">
|
||||
{% for track in album.tracks %}
|
||||
<li class="" {% if onetracker == 1 %}style="border-radius: 5px;"{% endif %}>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- HERE ENDS MADNESS -->
|
||||
{% include streamer.html %}
|
||||
<section class="wrapper style1 align-center">
|
||||
|
||||
<div class="inner">
|
||||
<h2>Track list</h2>
|
||||
<p>Use thses pages to share one song in particular</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
{% for track in page.tracks %}
|
||||
|
||||
<section
|
||||
class="spotlight style4 orient-{% cycle 'left', 'right' %} content-align-{% cycle 'right', 'left' %} image-position-center onscroll-image-fade-in"
|
||||
{% if forloop.index == 1 %}style="box-shadow: none;" {% endif %}>
|
||||
<div class="content">
|
||||
<h3>{{ track.common.title }}</h3>
|
||||
<p>
|
||||
{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}
|
||||
<br /><strong>{{ track.common.genre }}</strong>
|
||||
<br />{{ track.common.year }}</p>
|
||||
|
||||
<ul class="actions stacked">
|
||||
<li><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button small icon solid fa-play">Play</a></li>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="{{ track.cover }}" alt="{{ track.common.title }}" />
|
||||
</div>
|
||||
<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" 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>
|
||||
|
||||
{% 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 }}&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 }}&text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&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 }}&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 }}&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="track-picker">
|
||||
<div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
|
||||
|
||||
</div>
|
||||
<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 }}/albums/{{ 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 -->
|
||||
|
||||
<!-- post Naviation -->
|
||||
<section class="post-navigation">
|
||||
|
||||
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner">
|
||||
<div class="index align-left">
|
||||
<!-- Author -->
|
||||
{% if page.previous.url or page.next.url %}
|
||||
|
||||
<section>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- post Naviation -->
|
||||
<div style="text-align: center;">
|
||||
<h3>More releases</h3>
|
||||
</div>
|
||||
<div class="post-nav">
|
||||
<div>
|
||||
{% if page.previous.url and page.lang == page.previous.lang %}
|
||||
<h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
|
||||
href="{{page.previous.url}}"> {{page.previous.title}}</a></h4>
|
||||
<p style="margin-right: 20px">{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url and page.lang == page.next.lang %}
|
||||
<h4><a href="{{page.next.url}}"> {{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
|
||||
class="fas fa-arrow-right"></i></a></h4>
|
||||
<p style="margin-left: 20px">{{ page.next.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Post Navigation -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% include footer.html %}
|
||||
<h2>Check out more</h2>
|
||||
<div class="post-nav">
|
||||
{% 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> {{page.previous.title}}</a></h3>
|
||||
<p>{{ page.previous.description }}</p>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url%}
|
||||
|
||||
<h3><a href="{{page.next.url}}">{{page.next.title}} <span class="fas fa-arrow-right"></span></a></h3>
|
||||
<p>{{ page.next.description }}</p>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include navigation.html %}
|
||||
{% include scripts.html %}
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// html5media enables <video> and <audio> tags in all major browsers
|
||||
// External File: http://api.html5media.info/1.1.8/html5media.min.js
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
</section>
|
||||
<!-- End Post Navigation -->
|
||||
|
||||
|
||||
// HTML5 audio player + playlist controls...
|
||||
// Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
|
||||
// Mythium Archive: https://archive.org/details/mythium/
|
||||
jQuery(function ($) {
|
||||
var supportsAudio = !!document.createElement('audio').canPlayType;
|
||||
if (supportsAudio) {
|
||||
var index = 0,
|
||||
playing = false,
|
||||
mediaPath = '',
|
||||
extension = '',
|
||||
tracks = [{% for track in page.tracks %}{
|
||||
"track": {{ track.common.track.no }},
|
||||
"name": "{{ track.common.title }}",
|
||||
"length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
|
||||
"file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
trackCount = tracks.length,
|
||||
npAction = $('#npAction'),
|
||||
npTitle = $('#npTitle'),
|
||||
audio = $('#audio1').bind('play', function () {
|
||||
playing = true;
|
||||
npAction.text('Playing...');
|
||||
}).bind('pause', function () {
|
||||
playing = false;
|
||||
npAction.text('Paused...');
|
||||
}).bind('ended', function () {
|
||||
npAction.text('Paused...');
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
<script type="text/javascript">
|
||||
// html5media enables <video> and <audio> tags in all major browsers
|
||||
// External File: http://api.html5media.info/1.1.8/html5media.min.js
|
||||
|
||||
|
||||
// Add user agent as an attribute on the <html> tag...
|
||||
// Inspiration: http://css-tricks.com/ie-10-specific-styles/
|
||||
// var b = document.documentElement;
|
||||
// b.setAttribute('data-useragent', navigator.userAgent);
|
||||
// b.setAttribute('data-platform', navigator.platform);
|
||||
|
||||
|
||||
// HTML5 audio player + playlist controls...
|
||||
// Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
|
||||
// Mythium Archive: https://archive.org/details/mythium/
|
||||
jQuery(function ($) {
|
||||
var supportsAudio = !!document.createElement('audio').canPlayType;
|
||||
if (supportsAudio) {
|
||||
var index = 0,
|
||||
playing = false,
|
||||
mediaPath = '',
|
||||
extension = '',
|
||||
tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{
|
||||
"track": {{ track.common.track.no }},
|
||||
"name": "{{ track.common.title }}",
|
||||
"length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
|
||||
"file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}",
|
||||
"image": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
|
||||
trackCount = tracks.length,
|
||||
npAction = $('#npAction'),
|
||||
npTitle = $('#npTitle'),
|
||||
npImage = $('#npImage'),
|
||||
audio = $('#audio1').bind('play', function () {
|
||||
playing = true;
|
||||
npAction.text('Playing...');
|
||||
$('#fixedPlayer').removeClass('hideplayer');
|
||||
$("#npImage").addClass('spinnit');
|
||||
}).bind('pause', function () {
|
||||
playing = false;
|
||||
npAction.text('Paused...');
|
||||
|
||||
$("#npImage").removeClass('spinnit');
|
||||
}).bind('ended', function () {
|
||||
npAction.text('Paused...');
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
audio.play();
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}).get(0),
|
||||
btnPrev = $('#btnPrev').click(function () {
|
||||
if ((index - 1) > -1) {
|
||||
index--;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
btnNext = $('#btnNext').click(function () {
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
li = $('#plList li').click(function () {
|
||||
var id = parseInt($(this).index());
|
||||
if (id !== index || playing == false) {
|
||||
playTrack(id);
|
||||
}else {
|
||||
audio.pause();
|
||||
}
|
||||
|
||||
}),
|
||||
loadTrack = function (id) {
|
||||
|
||||
npTitle.text(tracks[id].name);
|
||||
index = id;
|
||||
audio.src = mediaPath + tracks[id].file + extension;
|
||||
$('audio').attr("data-matomo-title", tracks[id].name);
|
||||
$("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');
|
||||
|
||||
|
||||
|
||||
},
|
||||
playTrack = function (id) {
|
||||
$('.plSel').removeClass('plSel');
|
||||
$('#plList li:eq(' + id + ')').addClass('plSel');
|
||||
loadTrack(id);
|
||||
audio.play();
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}).get(0),
|
||||
btnPrev = $('#btnPrev').click(function () {
|
||||
if ((index - 1) > -1) {
|
||||
index--;
|
||||
loadTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
btnNext = $('#btnNext').click(function () {
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
li = $('#plList li').click(function () {
|
||||
var id = parseInt($(this).index());
|
||||
if (id !== index) {
|
||||
playTrack(id);
|
||||
}
|
||||
}),
|
||||
loadTrack = function (id) {
|
||||
$('.plSel').removeClass('plSel');
|
||||
$('#plList li:eq(' + id + ')').addClass('plSel');
|
||||
npTitle.text(tracks[id].name);
|
||||
index = id;
|
||||
audio.src = mediaPath + tracks[id].file + extension;
|
||||
$('audio').attr("data-matomo-title", tracks[id].name);
|
||||
},
|
||||
playTrack = function (id) {
|
||||
loadTrack(id);
|
||||
audio.play();
|
||||
};
|
||||
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
|
||||
loadTrack(index);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
};
|
||||
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
|
||||
loadTrack(index);
|
||||
}
|
||||
});
|
||||
|
||||
{% include cookie-consent.html %}
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
|
|
@ -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>
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper" class="divided">
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include navigation.html %}
|
||||
{% include scripts.html %}
|
||||
{% include cookie-consent.html %}
|
||||
<body>
|
||||
<!-- Wrapper -->
|
||||
|
||||
<div id="main-wrapper">
|
||||
|
||||
{{ content }}
|
||||
<!-- Footer -->
|
||||
{% unless page.collection == 'tracks' or page.url == '/radio/' %}
|
||||
{% include footer.html %}
|
||||
{% endunless %}
|
||||
|
||||
<!-- END Footer -->
|
||||
|
||||
|
||||
</div>
|
||||
<!-- END Wrapper -->
|
||||
{% unless page.collection == 'traks' %}
|
||||
{% include navigation.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>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
{% include header.html %}
|
||||
<section class="info" id="read">
|
||||
<div class="info-pages">
|
||||
{{ content }}
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content -->
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner">
|
||||
|
||||
<div class="index align-left">
|
||||
<!-- Author -->
|
||||
<section>
|
||||
{% if page.url != '/cookies/' %}
|
||||
{% if page.url != '/webcreds/' %}
|
||||
{% include author.html %}
|
||||
{% endif %}{% endif %}
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
{{ content }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
{% include footer.html %}
|
||||
{% if page.url == '/fr-fretag/' %}
|
||||
{% include contact.html %}
|
||||
{% endif %}
|
||||
|
|
@ -1,404 +1,333 @@
|
|||
---
|
||||
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>
|
||||
<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
|
||||
{% include header.html %}
|
||||
|
||||
<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">
|
||||
<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">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<div id="plwrap">
|
||||
<ul id="plList">
|
||||
{% for track in album.tracks %}
|
||||
<li class="">
|
||||
<div class="plItem">
|
||||
<div class="plNum">{{ track.common.track.no }}.</div>
|
||||
<div class="plTitle">{{ track.common.title }}</div>
|
||||
<div class="plLength">{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noJSalbum">
|
||||
|
||||
{% for track in album.tracks %}
|
||||
|
||||
<div class="plItem">
|
||||
<div class="plNum">{{ track.common.track.no }}.</div>
|
||||
<div class="plTitle"><a href="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.mp3">{{ track.common.title }} </a></div>
|
||||
<div class="plLength">{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" style="font-size: 16px;margin-top:60px;">
|
||||
{{ content }}
|
||||
<p>{{ page.credits }}</p>
|
||||
<div id="plwrap">
|
||||
<h2>Track list</h2>
|
||||
<ul id="plList">
|
||||
{% for track in album.tracks %}
|
||||
<li class="" {% if onetracker == 1 %}style="border-radius: 5px;"{% endif %}>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include streamer.html %}
|
||||
<!-- Tracks -->
|
||||
{% for track in album.tracks %}
|
||||
|
||||
<section
|
||||
class="spotlight style4 orient-{% cycle 'left', 'right' %} content-align-left image-position-center onscroll-image-fade-in"
|
||||
{% if forloop.index == 1 %}style="box-shadow: none;" {% endif %}>
|
||||
<div class="content">
|
||||
<h3>{{ track.common.title }}</h3>
|
||||
<p>
|
||||
{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}
|
||||
<br /><strong>{{ track.common.genre }}</strong>
|
||||
<br />{{ track.common.year }}</p>
|
||||
|
||||
<ul class="actions stacked">
|
||||
<li><a href="{{ relBase }}/tracks/{{ track.slug }}/" class="button small icon solid fa-play">Play</a></li>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg" alt="{{ track.common.title }}" />
|
||||
</div>
|
||||
<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" 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>
|
||||
|
||||
{% 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 }}&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 }}&text={{ page.title | xml_escape }}%20by%20{{ site.title | xml_escape }}%20&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 }}&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 }}&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="track-picker">
|
||||
<div class="full-image" style="background-image:url({{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}.jpeg);">
|
||||
|
||||
</div>
|
||||
<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 -->
|
||||
<!-- END Tracks -->
|
||||
{% endif %}
|
||||
|
||||
{% break %} {% endif %} {% endfor %}
|
||||
<!-- HERE ENDS MADNESS -->
|
||||
|
||||
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner">
|
||||
<div class="index align-left">
|
||||
<!-- Author -->
|
||||
|
||||
<section>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- post Naviation -->
|
||||
<div style="text-align: center;">
|
||||
<h3>{{ site.data.translations[page.lang].post-nav}}</h3>
|
||||
</div>
|
||||
<div class="post-nav">
|
||||
<div>
|
||||
{% if page.previous.url and page.lang == page.previous.lang %}
|
||||
<h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
|
||||
href="{{page.previous.url}}"> {{page.previous.title}}</a></h4>
|
||||
<p style="margin-right: 20px">{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url and page.lang == page.next.lang %}
|
||||
<h4><a href="{{page.next.url}}"> {{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
|
||||
class="fas fa-arrow-right"></i></a></h4>
|
||||
<p style="margin-left: 20px">{{ page.next.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Post Navigation -->
|
||||
</div>
|
||||
</section>
|
||||
{% break %} {% endif %} {% endfor %}
|
||||
<!-- HERE ENDS MADNESS -->
|
||||
|
||||
<!-- post Naviation -->
|
||||
<section >
|
||||
<div class="post-navigation">
|
||||
{% if page.previous.url or page.next.url %}
|
||||
<h2>Check out more</h2>
|
||||
<div class="post-nav">
|
||||
{% 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> {{page.previous.title}}</a></h3>
|
||||
<p>{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url%}
|
||||
<h3><a href="{{page.next.url}}">{{page.next.title}} <span class="fas fa-arrow-right"></span></a></h3>
|
||||
<p>{{ page.next.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Post Navigation -->
|
||||
|
||||
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
{% include navigation.html %}
|
||||
{% include scripts.html %}
|
||||
<script type="text/javascript">
|
||||
// html5media enables <video> and <audio> tags in all major browsers
|
||||
// External File: http://api.html5media.info/1.1.8/html5media.min.js
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// html5media enables <video> and <audio> tags in all major browsers
|
||||
// External File: http://api.html5media.info/1.1.8/html5media.min.js
|
||||
// Add user agent as an attribute on the <html> tag...
|
||||
// Inspiration: http://css-tricks.com/ie-10-specific-styles/
|
||||
// var b = document.documentElement;
|
||||
// b.setAttribute('data-useragent', navigator.userAgent);
|
||||
// b.setAttribute('data-platform', navigator.platform);
|
||||
|
||||
|
||||
// Add user agent as an attribute on the <html> tag...
|
||||
// Inspiration: http://css-tricks.com/ie-10-specific-styles/
|
||||
var b = document.documentElement;
|
||||
b.setAttribute('data-useragent', navigator.userAgent);
|
||||
b.setAttribute('data-platform', navigator.platform);
|
||||
// HTML5 audio player + playlist controls...
|
||||
// Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
|
||||
// Mythium Archive: https://archive.org/details/mythium/
|
||||
jQuery(function ($) {
|
||||
var supportsAudio = !!document.createElement('audio').canPlayType;
|
||||
if (supportsAudio) {
|
||||
var index = 0,
|
||||
playing = false,
|
||||
mediaPath = '',
|
||||
extension = '',
|
||||
tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{
|
||||
"track": {{ track.common.track.no }},
|
||||
"name": "{{ track.common.title }}",
|
||||
"length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
|
||||
"file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}",
|
||||
"image": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
|
||||
trackCount = tracks.length,
|
||||
npAction = $('#npAction'),
|
||||
npTitle = $('#npTitle'),
|
||||
npImage = $('#npImage'),
|
||||
audio = $('#audio1').bind('play', function () {
|
||||
playing = true;
|
||||
npAction.text('Playing...');
|
||||
$('#fixedPlayer').removeClass('hideplayer');
|
||||
$("#npImage").addClass('spinnit');
|
||||
}).bind('pause', function () {
|
||||
playing = false;
|
||||
npAction.text('Paused...');
|
||||
|
||||
$("#npImage").removeClass('spinnit');
|
||||
}).bind('ended', function () {
|
||||
npAction.text('Paused...');
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
audio.play();
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}).get(0),
|
||||
btnPrev = $('#btnPrev').click(function () {
|
||||
if ((index - 1) > -1) {
|
||||
index--;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
btnNext = $('#btnNext').click(function () {
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
playTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
li = $('#plList li').click(function () {
|
||||
var id = parseInt($(this).index());
|
||||
if (id !== index || playing == false) {
|
||||
playTrack(id);
|
||||
}else {
|
||||
audio.pause();
|
||||
}
|
||||
|
||||
}),
|
||||
loadTrack = function (id) {
|
||||
|
||||
npTitle.text(tracks[id].name);
|
||||
index = id;
|
||||
audio.src = mediaPath + tracks[id].file + extension;
|
||||
$('audio').attr("data-matomo-title", tracks[id].name);
|
||||
$("#npImage").attr('style', 'background-image:url(' + tracks[id].image + '.jpeg)');
|
||||
|
||||
// HTML5 audio player + playlist controls...
|
||||
// Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
|
||||
// Mythium Archive: https://archive.org/details/mythium/
|
||||
jQuery(function ($) {
|
||||
var supportsAudio = !!document.createElement('audio').canPlayType;
|
||||
if (supportsAudio) {
|
||||
var index = 0,
|
||||
playing = false,
|
||||
mediaPath = '',
|
||||
extension = '',
|
||||
tracks = [{% for album in site.albums %}{% if page.album == album.slug %}{% for track in album.tracks %}{
|
||||
"track": {{ track.common.track.no }},
|
||||
"name": "{{ track.common.title }}",
|
||||
"length": "{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{{ round_seconds | minus: leftover_seconds }}",
|
||||
"file": "{{ site.mediaurl }}/{{ track.albumSlug }}/{{ track.trackSlug }}"
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}{% break %} {% endif %}{% endfor %}],
|
||||
trackCount = tracks.length,
|
||||
npAction = $('#npAction'),
|
||||
npTitle = $('#npTitle'),
|
||||
audio = $('#audio1').bind('play', function () {
|
||||
playing = true;
|
||||
npAction.text('Playing...');
|
||||
}).bind('pause', function () {
|
||||
playing = false;
|
||||
npAction.text('Paused...');
|
||||
}).bind('ended', function () {
|
||||
npAction.text('Paused...');
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
|
||||
|
||||
},
|
||||
playTrack = function (id) {
|
||||
$('.plSel').removeClass('plSel');
|
||||
$('#plList li:eq(' + id + ')').addClass('plSel');
|
||||
loadTrack(id);
|
||||
audio.play();
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}).get(0),
|
||||
btnPrev = $('#btnPrev').click(function () {
|
||||
if ((index - 1) > -1) {
|
||||
index--;
|
||||
loadTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
btnNext = $('#btnNext').click(function () {
|
||||
if ((index + 1) < trackCount) {
|
||||
index++;
|
||||
loadTrack(index);
|
||||
if (playing) {
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
audio.pause();
|
||||
index = 0;
|
||||
loadTrack(index);
|
||||
}
|
||||
}),
|
||||
li = $('#plList li').click(function () {
|
||||
var id = parseInt($(this).index());
|
||||
if (id !== index) {
|
||||
playTrack(id);
|
||||
}
|
||||
}),
|
||||
loadTrack = function (id) {
|
||||
$('.plSel').removeClass('plSel');
|
||||
$('#plList li:eq(' + id + ')').addClass('plSel');
|
||||
npTitle.text(tracks[id].name);
|
||||
index = id;
|
||||
audio.src = mediaPath + tracks[id].file + extension;
|
||||
$('audio').attr("data-matomo-title", tracks[id].name);
|
||||
},
|
||||
playTrack = function (id) {
|
||||
loadTrack(id);
|
||||
audio.play();
|
||||
};
|
||||
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
|
||||
loadTrack(index);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
};
|
||||
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
|
||||
loadTrack(index);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{% include cookie-consent.html %}
|
||||
</body>
|
||||
</html>
|
||||
{% else %}
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Based on _Story_ by html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
Remixed and Jekyllified by Setto
|
||||
-->
|
||||
<html lang="{% if page.lang != site.lang %}{{ page.lang }}{% else %}{{ site.lang }}{% endif %}">
|
||||
<head>
|
||||
|
||||
<link type="application/atom+xml" rel="alternate" href="{{ site.url }}/feed.xml" title="{{ site.name }}" />
|
||||
{% include seo.html %}
|
||||
{% include relBase.html %}
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
|
||||
<link rel="stylesheet" href="{{ relBase }}/assets/css/main20200710.css" />
|
||||
|
||||
<link rel="apple-touch-icon" href="{{ site.url }}/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
|
||||
<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
|
||||
<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscript20200710.css" /></noscript>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<span id="top" style="display: none;"></span>
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper" class="divided">
|
||||
|
||||
<!-- Banner -->
|
||||
<section class="banner onload-image-fade-in onload-content-fade-right style2 fullscreen content-align-center image-position-center" style="min-height:85vh;">
|
||||
|
||||
<div class="content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="image">
|
||||
<img src="{{ page.image }}" alt="unfound page" />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content -->
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner">
|
||||
|
||||
<div class="index align-left">
|
||||
<!-- Author -->
|
||||
<section>
|
||||
{% if page.url != '/cookies/' %}
|
||||
{% if page.url != '/webcreds/' %}
|
||||
{% include author.html %}
|
||||
{% endif %}{% endif %}
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
{{ 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>
|
||||
{% include header.html %}
|
||||
|
||||
<section class="info" id="read">
|
||||
<div class="info-pages">
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include streamer.html %}
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner">
|
||||
<div class="index align-left">
|
||||
<!-- Author -->
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- post Naviation -->
|
||||
<div style="text-align: center;">
|
||||
<h3>{{ site.data.translations[page.lang].post-nav}}</h3>
|
||||
</div>
|
||||
<div class="post-nav">
|
||||
<div>
|
||||
{% if page.previous.url and page.lang == page.previous.lang %}
|
||||
<h4><a href="{{page.previous.url}}" alt="Read {{page.previous.title}}" title="Read {{page.previous.title}}"><i class="fas fa-arrow-left"></i></a> <a
|
||||
href="{{page.previous.url}}"> {{page.previous.title}}</a></h4>
|
||||
<p style="margin-right: 20px">{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url and page.lang == page.next.lang %}
|
||||
<h4><a href="{{page.next.url}}"> {{page.next.title}}</a> <a href="{{page.next.url}}" alt="Read {{page.next.title}}" title="Read {{page.next.title}}"><i
|
||||
class="fas fa-arrow-right"></i></a></h4>
|
||||
<p style="margin-left: 20px">{{ page.next.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Post Navigation -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- post Naviation -->
|
||||
<section >
|
||||
<div class="post-navigation">
|
||||
{% if page.previous.url or page.next.url %}
|
||||
<h2>Check out more</h2>
|
||||
<div class="post-nav">
|
||||
{% 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> {{page.previous.title}}</a></h3>
|
||||
<p>{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url%}
|
||||
<h3><a href="{{page.next.url}}">{{page.next.title}} <span class="fas fa-arrow-right"></span></a></h3>
|
||||
<p>{{ page.next.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</div>
|
||||
{% include navigation.html %}
|
||||
{% include scripts.html %}
|
||||
{% include cookie-consent.html %}
|
||||
</body>
|
||||
</html>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
@ -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 }}
|
||||
</p>
|
||||
<div class="playbutton hideWhenNoJS">
|
||||
<a id="mu_pause" class="button">Play!</a>
|
||||
</div>
|
||||
<h1>{{ page.common.title }}</h1>
|
||||
|
||||
<p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p>
|
||||
|
||||
<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>
|
||||
|
||||
</p>
|
||||
|
||||
<div class="image">
|
||||
<img src="{{ site.mediaurl }}/{{ page.slug }}.jpeg" alt="{{ page.title }} logo" id="coverart" />
|
||||
</div>
|
||||
</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 }}">"{{ page.common.album }}"</a></p>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p>
|
||||
|
||||
|
||||
{% include author.html %}
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="noJSalbum"><a class="button" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3"><span class="fas fa-play"></span> Play!</a></p>
|
||||
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<section class="wrapper style1 align-center">
|
||||
<div class="inner" style="padding-top:40px">
|
||||
<div class="index align-left">
|
||||
<section style="padding-top:40px">
|
||||
{% include author.html %}
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
{% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
|
||||
<p style="font-size:16px;">
|
||||
{{ page.all.USLT.text | newline_to_br }}
|
||||
</p>
|
||||
{% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
|
||||
<p style="font-size:16px;">
|
||||
{{ page.all.USLT.text | newline_to_br }}
|
||||
</p>
|
||||
{% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
|
||||
<p style="font-size:16px;">
|
||||
{{ page.all.UNSYNCEDLYRICS | newline_to_br }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p>
|
||||
{{ page.all.Comment }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
|
||||
<div class="info">
|
||||
<p>
|
||||
{{ page.all.USLT.text | newline_to_br }}
|
||||
</p>
|
||||
</div>
|
||||
{% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
|
||||
<div class="info">
|
||||
<p>
|
||||
{{ page.all.USLT.text | newline_to_br }}
|
||||
</p>
|
||||
</div>
|
||||
{% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
|
||||
<div class="info">
|
||||
<p>
|
||||
{{ page.all.UNSYNCEDLYRICS | newline_to_br }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<p>
|
||||
{{ page.all.Comment }}
|
||||
</p>
|
||||
{% 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 -->
|
||||
<!-- post Naviation -->
|
||||
<section class="post-navigation">
|
||||
|
||||
<section>
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- post Naviation -->
|
||||
<div style="text-align: center;">
|
||||
<h3>Play more songs grom this release</h3>
|
||||
</div>
|
||||
<div class="post-nav">
|
||||
<div>
|
||||
|
||||
<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 }}/"> {{ page.previousTrack.common.title }}</a>
|
||||
</h4>
|
||||
{% if page.previous.url or page.next.url %}
|
||||
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
<h2>Track Navigation</h2>
|
||||
|
||||
<h4><a href="{{ relBase }}/tracks/{{ page.nextTrack.slug }}/"> {{ 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 class="post-nav">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Post Navigation -->
|
||||
</div>
|
||||
</section>
|
||||
{% 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> Previous</a></h4>
|
||||
<h3>{{ page.previous.common.title }}</h3>
|
||||
<p>{{ page.previous.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-nav-next">
|
||||
{% if page.next.url%}
|
||||
<h4><a href="{{ page.next.url }}">Next <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>
|
||||
|
||||
<!-- Audio player-->
|
||||
<audio autoplay preload="metadata" data-matomo-title="{{ page.common.title }}">
|
||||
<source src="{{ site.mediaurl }}/{{ page.slug }}.mp3" type="audio/mpeg" ontimeupdate='updateTrackTime(this);' />
|
||||
<h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
|
||||
</audio>
|
||||
{% include footer.html %}
|
||||
|
||||
|
||||
|
||||
<div id="fixedPlayer" class="showplayer hideplayer">
|
||||
<div id="audiowrap">
|
||||
|
||||
<div id="audio0">
|
||||
<audio controls autoplay preload="metadata" data-matomo-title="{{ page.common.title }}">
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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
63
_sass/_cookies.scss
Normal 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
374
_sass/_elements.scss
Normal 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
125
_sass/_forms.scss
Normal 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
257
_sass/_layout.scss
Normal 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
164
_sass/_navigation.scss
Normal 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
39
_sass/_noscripts.scss
Normal 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
335
_sass/_player.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
452
_sass/_set.scss
452
_sass/_set.scss
|
|
@ -1,331 +1,12 @@
|
|||
|
||||
|
||||
/* Animation */
|
||||
@-webkit-keyframes infiniteRotate {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes infinite-rotate {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes infinite-rotate {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes backgroundBlink {
|
||||
0%{background-position:73% 0%}
|
||||
50%{background-position:28% 100%}
|
||||
100%{background-position:73% 0%}
|
||||
}
|
||||
@-moz-keyframes backgroundBlink {
|
||||
0%{background-position:73% 0%}
|
||||
50%{background-position:28% 100%}
|
||||
100%{background-position:73% 0%}
|
||||
}
|
||||
@keyframes backgroundBlink {
|
||||
0%{background-position:73% 0%}
|
||||
50%{background-position:28% 100%}
|
||||
100%{background-position:73% 0%}
|
||||
}
|
||||
|
||||
@-webkit-keyframes BackgroundFlow {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@-moz-keyframes BackgroundFlow {
|
||||
0%{background-position:0% 50%}
|
||||
50%{background-position:100% 50%}
|
||||
100%{background-position:0% 50%}
|
||||
}
|
||||
@keyframes BackgroundFlow {
|
||||
0%{background-position:0% 100%}
|
||||
50%{background-position:100% 0%}
|
||||
100%{background-position:0% 100%}
|
||||
}
|
||||
|
||||
.slow-background {
|
||||
-webkit-animation: BackgroundFlow 200s ease infinite;
|
||||
-moz-animation: BackgroundFlow 200s ease infinite;
|
||||
animation: BackgroundFlow 200s ease infinite;
|
||||
}
|
||||
|
||||
.spinnit {
|
||||
|
||||
-webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
|
||||
-moz-animation: infiniteRotate 2s linear infinite;
|
||||
animation: infiniteRotate 2s linear infinite;
|
||||
}
|
||||
.paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
|
||||
/* NAVIGATION */
|
||||
/* Style the navbar */
|
||||
#navbar {
|
||||
z-index: 100000;
|
||||
}
|
||||
#logo {
|
||||
padding:10px;
|
||||
z-index: 10000;
|
||||
-webkit-transition: filter 400ms ease-in;
|
||||
-moz-transition: filter 400ms ease-in;
|
||||
transition: filter 400ms ease-in;
|
||||
|
||||
}
|
||||
.logo:hover {
|
||||
filter: blur(0px);
|
||||
-webkit-transition: filter 400ms ease-in;
|
||||
-moz-transition: filter 400ms ease-in;
|
||||
transition: filter 400ms ease-in;
|
||||
|
||||
}
|
||||
.logo {
|
||||
filter: blur(20px);
|
||||
text-decoration: none;
|
||||
position: fixed;
|
||||
top:20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 300px;
|
||||
height: 95px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 95% 95%;
|
||||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
box-shadow: none;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.sticky {
|
||||
filter: blur(0px);
|
||||
-webkit-transition: filter 400ms ease-in;
|
||||
-moz-transition: filter 400ms ease-in;
|
||||
transition: filter 400ms ease-in;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 95% 95%;
|
||||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: _palette(bg);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
ul {
|
||||
margin: auto;
|
||||
|
||||
width: 100%
|
||||
|
||||
}
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin: 10px;
|
||||
width: 80%;
|
||||
padding: 0;
|
||||
a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: auto !important;
|
||||
font-size: 14px
|
||||
}
|
||||
}
|
||||
}
|
||||
.blurredout {
|
||||
filter: blur(5px);
|
||||
-webkit-transition: filter 400ms ease-in;
|
||||
-moz-transition: filter 400ms ease-in;
|
||||
transition: filter 400ms ease-in;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
-webkit-transition: filter 400ms ease-in;
|
||||
-moz-transition: filter 400ms ease-in;
|
||||
transition: filter 400ms ease-in;
|
||||
}
|
||||
.modalDialog {
|
||||
position: fixed;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: _palette(fg-light);
|
||||
z-index: 11;
|
||||
opacity:0;
|
||||
-webkit-transition: opacity 400ms ease-in;
|
||||
-moz-transition: opacity 400ms ease-in;
|
||||
transition: opacity 400ms ease-in;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.modalDialog:target {
|
||||
opacity:1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modalDialog > div {
|
||||
width: 80%;
|
||||
max-width: 1100px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 100px auto;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
background: rgb(0, 31, 36);
|
||||
background: -moz-linear-gradient(#000, rgb(0, 31, 36));
|
||||
background: -webkit-linear-gradient(#000, rgb(0, 31, 36));
|
||||
background: -o-linear-gradient(#000, rgb(0, 31, 36));
|
||||
}
|
||||
|
||||
|
||||
.close-button {
|
||||
background-color: #FFFFFF;
|
||||
color: _palette(accent-dark);
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
text-align: center;
|
||||
top: -10px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
-webkit-border-radius: 48px;
|
||||
-moz-border-radius: 48px;
|
||||
border-radius: 48px;
|
||||
-moz-box-shadow: 1px 1px 3px #000;
|
||||
-webkit-box-shadow: 1px 1px 3px #000;
|
||||
box-shadow: 1px 1px 3px #000;
|
||||
transition: all 400ms ease-in;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: _palette(accent);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#closearea {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
//* 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;
|
||||
margin-top: 0;
|
||||
padding-top: 30px;
|
||||
margin-top: 0;
|
||||
padding-top: 30px;
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -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
33
_sass/_videos.scss
Normal 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%;
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
|
@ -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;
|
||||
|
|
@ -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
98
_sass/ethos.scss
Normal 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);}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
_sass/libs/_animations.scss
Normal file
46
_sass/libs/_animations.scss
Normal 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%}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
78
_sass/libs/_reset.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
||||
// Duration.
|
||||
$duration: (
|
||||
menu: 0.5s,
|
||||
transition: 0.2s,
|
||||
gallery-lightbox: 0.5s,
|
||||
gallery-delay: 0.15s,
|
||||
items-delay: 0.15s,
|
||||
on-load: 0.75s,
|
||||
on-scroll: 0.75s
|
||||
);
|
||||
$result: null;
|
||||
|
||||
// Size.
|
||||
$size: (
|
||||
border-radius: 4px,
|
||||
border-radius-alt: 0.5rem,
|
||||
border-width: 1px,
|
||||
element-height: 2.75rem,
|
||||
element-margin: 2rem,
|
||||
gutter: 3.5rem,
|
||||
inner: 64rem,
|
||||
padding: (
|
||||
default: 7rem,
|
||||
xlarge: 5rem,
|
||||
large: 4rem,
|
||||
medium: 3rem,
|
||||
small: 2rem
|
||||
)
|
||||
);
|
||||
@if type-of($index) != number {
|
||||
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
|
||||
}
|
||||
@else if $index == 0 {
|
||||
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
|
||||
}
|
||||
@else if abs($index) > length($list) {
|
||||
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
|
||||
}
|
||||
@else {
|
||||
|
||||
// Font.
|
||||
$font: (
|
||||
family: ('Astloch', Helvetica, sans-serif),
|
||||
family-fixed: ('Lucida Console', Monaco, monospace),
|
||||
weight: 400,
|
||||
weight-bold: 700,
|
||||
kerning: -0.025em,
|
||||
kerning-alt: 0.125em
|
||||
);
|
||||
$result: ();
|
||||
$index: if($index < 0, length($list) + $index + 1, $index);
|
||||
|
||||
// Palette.
|
||||
$palette: (
|
||||
color1: #30363d,
|
||||
color2: #db8992,
|
||||
color3: #ab7aad,
|
||||
color4: #897cad,
|
||||
color5: #7794ce,
|
||||
color6: #64abb4,
|
||||
color7: #6ba78c,
|
||||
@for $i from 1 through length($list) {
|
||||
|
||||
@if $i != $index {
|
||||
$result: append($result, nth($list, $i));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@return $result;
|
||||
|
||||
}
|
||||
|
||||
/// Gets a value from a map.
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {map} $map Map.
|
||||
/// @param {string} $keys Key(s).
|
||||
/// @return {string} Value.
|
||||
@function val($map, $keys...) {
|
||||
|
||||
@if nth($keys, 1) == null {
|
||||
$keys: remove-nth($keys, 1);
|
||||
}
|
||||
|
||||
@each $key in $keys {
|
||||
$map: map-get($map, $key);
|
||||
}
|
||||
|
||||
@return $map;
|
||||
|
||||
}
|
||||
|
||||
/// Gets a font value.
|
||||
/// @param {string} $keys Key(s).
|
||||
/// @return {string} Value.
|
||||
@function _font($keys...) {
|
||||
@return val($font, $keys...);
|
||||
}
|
||||
|
||||
// /// Gets a palette value.
|
||||
// /// @param {string} $keys Key(s).
|
||||
// /// @return {string} Value.
|
||||
// @function _palette($keys...) {
|
||||
// @return val($palette, $keys...);
|
||||
// }
|
||||
|
||||
|
||||
bg: 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),
|
||||
|
||||
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,
|
||||
),
|
||||
);
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
$font: (
|
||||
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: 0em,
|
||||
kerning-alt: 0.125em
|
||||
);
|
||||
:root {
|
||||
--border-radius: 3px;
|
||||
--max-width: 1000px;
|
||||
--anim-speed: 200ms;
|
||||
|
||||
}
|
||||
|
||||
// // Palette.
|
||||
// $palette: (
|
||||
|
||||
// bg: #0C0F0A,
|
||||
// bg-alt: rgba(12, 15, 10, 0.5),
|
||||
// fg: #FFFFFF,
|
||||
// fg-alt: rgba(255, 255, 255, 0.5),
|
||||
// border: #000000,
|
||||
// border-alt: rgba(0, 0, 0, 0.75),
|
||||
// accent1: #41EAD4,
|
||||
// accent1-alt:rgba(65, 234, 212, 0.75),
|
||||
// accent2: #FF206E,
|
||||
// accent2-alt:rgba(255, 32, 110, 0.75),
|
||||
|
||||
// );
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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)
|
||||
///
|
||||
153
_sass/photos/base/_typography.scss
Normal file
153
_sass/photos/base/_typography.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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)
|
||||
///
|
||||
66
_sass/photos/components/_button.scss
Normal file
66
_sass/photos/components/_button.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
199
_sass/photos/components/_form.scss
Normal file
199
_sass/photos/components/_form.scss
Normal 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;
|
||||
}
|
||||
17
_sass/photos/components/_icon.scss
Normal file
17
_sass/photos/components/_icon.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,28 @@
|
|||
///
|
||||
/// Story by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Icons */
|
||||
|
||||
ul.icons {
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 0.75rem 0 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
///
|
||||
/// Lens by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Icons */
|
||||
|
||||
ul.icons {
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 1em 0 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:before {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
_sass/photos/components/_list.scss
Normal file
56
_sass/photos/components/_list.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
27
_sass/photos/layout/_footer.scss
Normal file
27
_sass/photos/layout/_footer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
_sass/photos/layout/_header.scss
Normal file
16
_sass/photos/layout/_header.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
118
_sass/photos/layout/_main.scss
Normal file
118
_sass/photos/layout/_main.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
75
_sass/photos/layout/_thumbnails.scss
Normal file
75
_sass/photos/layout/_thumbnails.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
267
_sass/photos/layout/_viewer.scss
Normal file
267
_sass/photos/layout/_viewer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
45
_sass/photos/libs/_vars.scss
Normal file
45
_sass/photos/libs/_vars.scss
Normal 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
54
_sass/photos/main.scss
Normal 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';
|
||||
47
_sass/photos/noscript.scss
Normal file
47
_sass/photos/noscript.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
48
_sass/staff.scss
Normal 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
9
_sass/svg.scss
Normal 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
116
_sass/trackplayer.scss
Normal 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;
|
||||
}
|
||||
52
artists.html
52
artists.html
|
|
@ -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>✎</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
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
16
assets/css/colors.css
Normal 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
4
assets/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
21
assets/css/main-20200812.scss
Normal file
21
assets/css/main-20200812.scss
Normal 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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
23
assets/css/noscripts-20200812.scss
Normal file
23
assets/css/noscripts-20200812.scss
Normal 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';
|
||||
|
||||
BIN
assets/fonts/FontAwesome.otf
Normal file
BIN
assets/fonts/FontAwesome.otf
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue