upgrading layout

This commit is contained in:
Set Hallstrom 2020-09-25 11:35:37 +02:00
parent 34dfc470d8
commit 90423f31e0
14 changed files with 174 additions and 126 deletions

View file

@ -1,10 +1,10 @@
bg_color: 'rgb(27, 34, 65)' bg_rgba: 'rgb(27, 34, 65)'
bg-alt_color: 'rgba(27, 34, 65, 0.15)' bg-alt_rgba: 'rgba(27, 34, 65, 0.75)'
fg_color: 'rgba(160, 178, 141, 1)' fg_rgba: 'rgba(160, 178, 141, 1)'
fg-alt_color: 'rgba(160, 178, 141, 0.75)' fg-alt_rgba: 'rgba(160, 178, 141, 0.75)'
border_color: 'rgb(0, 25, 1)' border_rgba: 'rgb(0, 25, 1)'
border-alt_color: 'rgba(0, 25, 1, 0.75)' border-alt_rgba: 'rgba(0, 25, 1, 0.75)'
accent2_color: 'rgba(196, 167, 255, 1)' accent2_rgba: 'rgba(196, 167, 255, 1)'
accent2-alt_color: 'rgba(196, 167, 255, 0.75)' accent2-alt_rgba: 'rgba(196, 167, 255, 0.75)'
accent1_color: 'rgba(168, 255, 238, 1)' accent1_rgba: 'rgba(168, 255, 238, 1)'
accent1-alt_color: 'rgba(168, 255, 238, 0.75)' accent1-alt_rgba: 'rgba(168, 255, 238, 0.75)'

View file

@ -1,33 +1,36 @@
{% include relBase.html %} {% include relBase.html %}
<header class="hero" id="top" <header class="hero" style="background-image: url({{ relBase }}{{ page.image }});">
style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
<div class="imagecontainer"> <div class="imagecontainer">
<h4>{{ page.title }}</h4> <h4>{{ page.title }}</h4>
</div> </div>
<div class="splash">
<div class="splash-logo">
{% if page.category == 'releases' or page.category == 'highlights' %}
{% else %}
<a href="#read"><img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" /></a>
{% endif %}
</div>
<div class="description">
<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>
{% if page.category == 'releases' %}
<p><a href="#play" class="button">🔊 Listen</a></p>
{% elsif page.category == 'highlights' %}
<p><a href="#read" class="button">👀 Read</a></p>
{% elsif page.url == '/404/' %}
<p><a href="/" class="button">🏡 Take me home</a></p>
{% elsif page.url == '/about/' %}
<p><a href="#read" class="button">👽 Saywhat?</a></p>
{% else %}
<p><a href="#read" class="button">🔥 Boom</a></p>
{% endif %}
</div>
</div>
</header> </header>
<section class="splash">
<div class="container">
<div class="splash-logo" {% unless page.url == '/' %}style="display: none;"{% endunless %}>
<img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div {% unless page.url == '/' %}style="padding: 0;"{% endunless %}>
<h1>{{ page.title }}</h1>
{% if page.category == 'releases' %}
<h4>by <strong>{{ page.artist }}</strong></h4>
{% endif %}
{% unless page.category == 'releases' %}
<p>{{ page.description }}</p>
{% endunless %}
</div>
</div>
</section>

View file

@ -303,52 +303,9 @@ a:hover {
} }
} }
.front-section:first-of-type {
margin-top: 40px;
}
.splash {
.container {
display: flex;
flex-wrap: wrap;
padding: 40px;
align-items: flex-start;
max-width: var(--max-width);
margin: auto;
h1, h2 {
font-size: 2em;
}
p, h1, h2, h3, h4 {
text-align: left;
margin-top: 20px;
}
h1:first-child {
margin-top: 0;
}
div {
max-width: unset;
margin: 0;
flex: 1 1 300px;
padding: 0 0 0 80px;
}
.splash-logo {
padding: 0;
margin: 0;
}
@media only screen and (max-width: 759px) {
div {
min-width: 100%;
padding: 20px 0;
}
.splash-logo {
padding: 20px 0;
}
}
}
}
#contact { #contact {
padding: 20px; padding: 20px;

View file

@ -30,6 +30,7 @@ body {
.wrapper { .wrapper {
margin: 20px 40px; margin: 20px 40px;
} }
.hero { .hero {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -40,16 +41,18 @@ body {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 40px; padding: 0;
position: relative; position: relative;
min-height: 80vh; min-height: 100vh;
width: 100vw; width: 100vw;
.textcontainer { .textcontainer {
background-color: var(--bg-alt); background: var(--bg-alt);
background: linear-gradient(33deg, transparent 0%, var(--bg) 90%, transparent 90%);
border-radius: var(--border-radius); border-radius: var(--border-radius);
max-width: 700px; max-width: var(--max-width);
padding: 20px 20px 40px 20px; padding: 0px 40px 40px 40px;
} }
div { div {
@ -57,7 +60,7 @@ body {
h1, h1,
p { p {
flex: 1 0 100%; flex: 1 0 100%;
width: 100%;
z-index: 10; z-index: 10;
color: var(--fg); color: var(--fg);
max-width: var(--max-width); max-width: var(--max-width);
@ -75,16 +78,16 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url("../img/vignette.svg"); background-image: url("../img/vignette.svg");
background-size: 240px; background-size: 960px;
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: bottom; background-position: bottom;
z-index: 1; z-index: 1;
h4 { h4 {
width: 90vw; width: 90vw;
height: auto; /* height: auto; */
min-height: 100px; /* min-height: 100px; */
line-height: 0.85em; line-height: 1.011em;
letter-spacing: -0.08em; letter-spacing: -0em;
color: var(--bg); color: var(--bg);
font-size: 15vw; font-size: 15vw;
display: inline; display: inline;
@ -94,12 +97,68 @@ body {
bottom: 0; bottom: 0;
transform: rotate(-3deg); transform: rotate(-3deg);
overflow: hidden; overflow: hidden;
background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg) 56%, var(--bg-alt) 100%); background: -webkit-linear-gradient(90deg, var(--bg) 0%,var(--bg-alt) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
filter: blur(1px); filter: blur(1px);
} }
} }
.splash {
background-color: transparent;
display: flex;
flex-wrap: wrap;
padding: 40px;
align-items: flex-start;
max-width: var(--max-width);
margin: auto;
.description {
border-radius: var(--border-radius);
background: var(--bg-alt);
background: linear-gradient(33deg, var(--bg-alt) 0%, var(--bg) 90%, transparent 90%);
> * {
margin: 40px !important;
}
.button {
background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
background-size: 400% 400%;
-webkit-animation: backgroundBlink 2s ease infinite;
-moz-animation: backgroundBlink 2s ease infinite;
animation: backgroundBlink 2s ease infinite;
}
}
h1, h2 {
font-size: 2em;
}
p, h1, h2, h3, h4 {
text-align: left;
margin-top: 20px;
}
h1:first-child {
margin-top: 0;
}
div {
max-width: unset;
margin: 0;
flex: 1 1 300px;
}
.splash-logo {
padding: 0;
margin: 0;
}
@media only screen and (max-width: 759px) {
div {
min-width: 100%;
padding: 20px 0;
}
.splash-logo {
padding: 20px 0;
}
}
}
} }
section { section {
@ -109,9 +168,7 @@ section {
} }
flex: 1 1 100%; flex: 1 1 100%;
background-color: var(--bg); 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; z-index: 2;
h2 { h2 {
text-align: center; text-align: center;
@ -134,7 +191,7 @@ footer {
background-color: var(--fg); background-color: var(--fg);
color: var(--bg); color: var(--bg);
background-image: url("../img/vignette-footer.svg"); background-image: url("../img/vignette-footer.svg");
background-size: 400px; background-size: 200px;
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: top; background-position: top;
box-sizing: border-box; box-sizing: border-box;
@ -261,6 +318,7 @@ footer {
.streambox { .streambox {
text-align: center; text-align: center;
line-height: 2em; line-height: 2em;
padding: 0 40px;
} }
.streamer { .streamer {
max-width: var(--max-width); max-width: var(--max-width);

View file

@ -5,7 +5,7 @@
.album-player { .album-player {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 40px; padding: 80px 40px 0 40px;
justify-content: space-evenly; justify-content: space-evenly;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
@ -210,7 +210,7 @@ a[id^="btn"]::-moz-focus-inner {
background-color: var(--accent1); background-color: var(--accent1);
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 50vw; min-height: 50vh;
text-align: left; text-align: left;
.button { .button {
background-color: var(--accent1); background-color: var(--accent1);
@ -243,7 +243,7 @@ a[id^="btn"]::-moz-focus-inner {
.full-image { .full-image {
width: 50%; width: 50%;
min-width: 280px; min-width: 280px;
min-height: 50vw; min-height: 50vh;
background-color: transparent; background-color: transparent;
background-size: cover; background-size: cover;
background-position: center; background-position: center;

30
_sass/zafari.scss Normal file
View file

@ -0,0 +1,30 @@
.zafariClass {
opacity:1;
pointer-events: auto;
background-color: var(--bg);
text-align: center;
z-index: 10000;
overflow-y: scroll;
> div {
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 700px;
h2 {
font-family: _font(family);
}
ul {
padding: 20px;
width: 100%
}
li {
list-style-type: none;
margin: 20px;
padding: 0;
a {
display: block;
font-size: 14px
}
}
}
}

View file

@ -25,7 +25,7 @@ image: /assets/vid/artists.jpg
{% assign sorted = site.data.artists | sort: 'id' %} {% assign sorted = site.data.artists | sort: 'id' %}
{% for post in sorted %} {% for post in sorted %}
<section class="front-section"> <section class="front-section" id="read">
<div style="background-image:url({{ post.image }})"> <div style="background-image:url({{ post.image }})">
<p class="editor-link"><a href="cloudcannon:collections/_artists/{{ post.path }}" rel="nofollow" <p class="editor-link"><a href="cloudcannon:collections/_artists/{{ post.path }}" rel="nofollow"

View file

@ -2,15 +2,15 @@
layout: nil layout: nil
--- ---
:root { :root {
--bg: {{ site.data.colors.bg_color }}; --bg: {{ site.data.colors.bg_rgba }};
--bg-alt: {{ site.data.colors.bg-alt_color }}; --bg-alt: {{ site.data.colors.bg-alt_rgba }};
--fg: {{ site.data.colors.fg_color }}; --fg: {{ site.data.colors.fg_rgba }};
--fg-alt: {{ site.data.colors.fg-alt_color }}; --fg-alt: {{ site.data.colors.fg-alt_rgba }};
--border: {{ site.data.colors.border_color }}; --border: {{ site.data.colors.border_rgba }};
--border-alt: {{ site.data.colors.border-alt_color }}; --border-alt: {{ site.data.colors.border-alt_rgba }};
--accent1: {{ site.data.colors.accent1_color }}; --accent1: {{ site.data.colors.accent1_rgba }};
--accent1-alt: {{ site.data.colors.accent1-alt_color }}; --accent1-alt: {{ site.data.colors.accent1-alt_rgba }};
--accent2: {{ site.data.colors.accent2_color }}; --accent2: {{ site.data.colors.accent2_rgba }};
--accent2-alt: {{ site.data.colors.accent2-alt_color }}; --accent2-alt: {{ site.data.colors.accent2-alt_rgba }};
} }

View file

@ -5,6 +5,6 @@ layout: nil
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg"> <svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(180 160.5 50.64)"> <g transform="rotate(180 160.5 50.64)">
<path d="m66.97 93.34 254-7.408v15.88h-254" fill="{{ site.data.colors.bg_color }}"/> <path d="m66.97 93.34 254-7.408v15.88h-254" fill="{{ site.data.colors.bg_rgba }}"/>
</g> </g>
</svg> </svg>

View file

@ -4,6 +4,6 @@ layout: nil
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg"> <svg width="960" height="128" version="1.1" viewBox="0 0 254 33.87" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -66.97 -67.41)"> <g transform="matrix(1 0 0 1 -66.97 -67.41)">
<path d="m66.97 93.87 254-7.408v15.35h-254" fill="{{ site.data.colors.bg_color }}"/> <path d="m66.97 93.87 254-7.408v15.35h-254" fill="{{ site.data.colors.bg_rgba }}"/>
</g> </g>
</svg> </svg>

View file

@ -22,7 +22,7 @@ layout: default
{% for post in site.posts %} {% for post in site.posts %}
{% if album.slug == post.album %} {% if album.slug == post.album %}
<section class="front-section"> <section class="front-section" id="read">
<div style="background-image:url({{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg)"> <div style="background-image:url({{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg)">
<p class="editor-link"><a href="cloudcannon:collections/_albums/{{ post.path }}" rel="nofollow" <p class="editor-link"><a href="cloudcannon:collections/_albums/{{ post.path }}" rel="nofollow"

View file

@ -19,7 +19,7 @@ layout: default
{% for post in site.posts %} {% for post in site.posts %}
{% if post.category == 'highlights' %} {% if post.category == 'highlights' %}
<section class="front-section"> <section class="front-section" id="read">
<div style="background-image:url({{ post.image }})"> <div style="background-image:url({{ post.image }})">
<p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow" <p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow"
class="btn"><strong>&#9998;</strong> Edit Posy</a></p> class="btn"><strong>&#9998;</strong> Edit Posy</a></p>

View file

@ -20,27 +20,27 @@ layout: default
--- ---
{% include relBase.html %} {% include relBase.html %}
{% include relBase.html %}
<header class="hero" id="top" <header class="hero" id="top"
style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}"> style="background-image: url({{ page.image }});">
<div class="imagecontainer"> <div class="imagecontainer">
<h4>{{ page.title }}</h4> <h4>{{ page.title }}</h4>
</div> </div>
<div class="splash">
<div class="splash-logo">
<a href="#read"><img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" /></a>
</div>
<div class="description">
<h1>{{ site.title }}</h1>
<p>{{ page.description }}</p>
<p><a href="#read" class="button">🔥 Boom</a></p>
</div>
</div>
</header> </header>
<section class="splash">
<div class="container">
<div class="splash-logo">
<img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div>
<h1>{{ site.title }}</h1>
<p>{{ page.description }}</p>
<p><a href="/radio/" class="button">📻 Radio App</a></p>
</div>
</div>
</section>
<section class="section-title"> <section class="section-title">
<div class="container"> <div class="container">

View file

@ -18,7 +18,7 @@ image: /assets/vid/links.jpg
{% assign sorted = site.data.links | sort: 'title' %} {% assign sorted = site.data.links | sort: 'title' %}
{% for post in sorted %} {% for post in sorted %}
<section class="front-section"> <section class="front-section" id="read">
<div style="background-image:url({{ post.image }})"> <div style="background-image:url({{ post.image }})">
<p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow" <p class="editor-link"><a href="cloudcannon:collections/_posts/{{ post.path }}" rel="nofollow"