hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

make color variables selectable in cloudcannon

Browse source
This commit is contained in:
sakrecoer 2020-08-10 17:31:05 +02:00
parent 11d3e1f5fd
commit 7e61046352
12 changed files with 117 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_data/colors.yml Normal file
View file

@ -0,0 +1,10 @@
bg_color: '#3c2a52'
bg-alt_color: 'rgba(60, 42, 82, 0.75)'
fg_color: '#ebdbf8'
fg-alt_color: 'rgba(235, 219, 248, 0.25)'
border_color: '#000000'
border-alt_color: 'rgba(0, 0, 0, 0.75)'
accent1_color: '#38ff59'
accent1-alt_color: 'rgba(56, 255, 89, 0.75)'
accent2_color: '#8d3ed8'
accent2-alt_color: 'rgba(141, 62, 216, 0.75)'

4
_sass/_cookies.scss
View file

@ -8,7 +8,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-color: _palette(border); background-color: var(--border);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
align-content: center; align-content: center;
@ -43,7 +43,7 @@
background-position-y: 0%; background-position-y: 0%;
background-repeat: repeat; background-repeat: repeat;
background-attachment: scroll; background-attachment: scroll;
background-image: linear-gradient(228deg, _palette(accent1-alt), _palette(accent2-alt)); background-image: linear-gradient(228deg, var(--accent1-alt), var(--accent2-alt));
background-origin: padding-box; background-origin: padding-box;
background-clip: border-box; background-clip: border-box;
background-size: 400% 400%; background-size: 400% 400%;

20
_sass/_elements.scss
View file

@ -20,14 +20,14 @@ strong {
a { a {
text-decoration-style: wavy; text-decoration-style: wavy;
text-decoration-color: transparent; text-decoration-color: transparent;
color: _palette(accent2); color: var(--accent2);
-moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
transition: all 0.2s ease-in-out, color 0.2s ease-in-out; transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
} }
a:hover { a:hover {
color: _palette(accent1); color: var(--accent1);
text-decoration-style: wavy; text-decoration-style: wavy;
text-decoration-color: unset; text-decoration-color: unset;
} }
@ -35,7 +35,7 @@ a:hover {
// Buttons // Buttons
.button { .button {
background-color: _palette(accent2); background-color: var(--accent2);
padding: 1em; padding: 1em;
border-radius: 5px; border-radius: 5px;
@ -43,13 +43,13 @@ a:hover {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
color: _palette(fg); color: var(--fg);
} }
.button:hover { .button:hover {
background-color: _palette(accent1); background-color: var(--accent1);
color: _palette(bg); color: var(--bg);
} }
// album index // album index
@ -102,7 +102,7 @@ a:hover {
width: 100px; width: 100px;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
border: 1px solid _palette(accent2); border: 1px solid var(--accent2);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
-moz-transition: border 0.2s ease-in-out, color 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
@ -112,7 +112,7 @@ a:hover {
} }
.icon:hover { .icon:hover {
border: 1px solid _palette(accent1); border: 1px solid var(--accent1);
} }
.small { .small {
@ -211,7 +211,7 @@ a:hover {
} }
.linksbg { .linksbg {
background-size: 100%; background-size: 100%;
background: _palette(bg); background: var(--bg);
background: linear-gradient(180deg, _palette(bg) 26%, _palette(accent2-alt) 100%); background: linear-gradient(180deg, var(--bg) 26%, var(--accent2-alt) 100%);
} }

24
_sass/_layout.scss
View file

@ -7,9 +7,9 @@ body {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
font-family: _font(family-fixed); font-family: _font(family-fixed);
color: _palette(fg); color: var(--fg);
letter-spacing: _font(kerning); letter-spacing: _font(kerning);
background-color: _palette(bg); background-color: var(--bg);
} }
#main-wrapper { #main-wrapper {
@ -34,7 +34,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
align-content: center; align-content: center;
background-color: _palette(bg); background-color: var(--bg);
justify-content: center; justify-content: center;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -45,7 +45,7 @@ body {
width: 100vw; width: 100vw;
.textcontainer { .textcontainer {
background-color: _palette(bg-alt); background-color: var(--bg-alt);
border-radius: 5px; border-radius: 5px;
max-width: 700px; max-width: 700px;
padding: 20px 20px 40px 20px; padding: 20px 20px 40px 20px;
@ -57,7 +57,7 @@ body {
flex: 1 0 100%; flex: 1 0 100%;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
color: _palette(fg); color: var(--fg);
text-align: center; text-align: center;
max-width: 1200px; max-width: 1200px;
} }
@ -85,10 +85,10 @@ body {
section { section {
flex: 1 1 100%; flex: 1 1 100%;
padding: 20px; padding: 20px;
background-color: _palette(bg); background-color: var(--bg);
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -webkit-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -moz-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
box-shadow: inset 0px 23px 25px -25px _palette(border-alt); box-shadow: inset 0px 23px 25px -25px var(--border-alt);
z-index: 2; z-index: 2;
h2 { h2 {
text-align: center; text-align: center;
@ -106,8 +106,8 @@ footer {
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
padding: 160px 20px 200px 20px; padding: 160px 20px 200px 20px;
background-color: _palette(fg); background-color: var(--fg);
color: _palette(bg); color: var(--bg);
justify-content: center; justify-content: center;
background-image: url('../img/vignette-footer.svg'); background-image: url('../img/vignette-footer.svg');
background-size: 480px 480px; background-size: 480px 480px;
@ -123,7 +123,7 @@ footer {
display: block display: block
} }
li { li {
border-bottom: 1px solid _palette(bg-alt); border-bottom: 1px solid var(--bg-alt);
line-height: 2; line-height: 2;
font-size: 1.5em; font-size: 1.5em;
a { a {

30
_sass/_navigation.scss
View file

@ -23,9 +23,9 @@
-webkit-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in;
transition: all 400ms ease-in; transition: all 400ms ease-in;
-webkit-box-shadow: 0px 3px 29px 0px _palette(border-alt); -webkit-box-shadow: 0px 3px 29px 0px var(--border-alt);
-moz-box-shadow: 0px 3px 29px 0px _palette(border-alt); -moz-box-shadow: 0px 3px 29px 0px var(--border-alt);
box-shadow: 0px 3px 29px 0px _palette(border-alt); box-shadow: 0px 3px 29px 0px var(--border-alt);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
@ -42,13 +42,13 @@
-webkit-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in;
transition: all 400ms ease-in; transition: all 400ms ease-in;
background-color: _palette(bg); background-color: var(--bg);
} }
.sticky { .sticky {
filter: blur(0px); filter: blur(0px);
opacity: 1; opacity: 1;
background-color: _palette(bg); background-color: var(--bg);
-webkit-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in;
transition: all 400ms ease-in; transition: all 400ms ease-in;
@ -57,7 +57,7 @@
.navmenu { .navmenu {
margin: 0 40px 0 20px; margin: 0 40px 0 20px;
font-size: 34px; font-size: 34px;
color:_palette(accent1); color:var(--accent1);
} }
@ -69,7 +69,7 @@ nav {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: _palette(bg); background-color: var(--bg);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -100,7 +100,7 @@ nav {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: _palette(bg-alt); background: var(--bg-alt);
z-index: 10; z-index: 10;
opacity:0; opacity:0;
-webkit-transition: opacity 400ms ease-in; -webkit-transition: opacity 400ms ease-in;
@ -124,14 +124,14 @@ nav {
padding: 20px; padding: 20px;
border-radius: 3px; border-radius: 3px;
background: rgb(0, 31, 36); background: rgb(0, 31, 36);
background: -moz-linear-gradient(_palette(border), _palette(bg)); background: -moz-linear-gradient(var(--border), var(--bg));
background: -webkit-linear-gradient(_palette(border), _palette(bg)); background: -webkit-linear-gradient(var(--border), var(--bg));
background: -o-linear-gradient(_palette(border), _palette(bg)); background: -o-linear-gradient(var(--border), var(--bg));
} }
.close-button { .close-button {
background-color: _palette(accent2); background-color: var(--accent2);
color: _palette(accent1); color: var(--accent1);
margin: 0 auto; margin: 0 auto;
line-height: 48px; line-height: 48px;
position: absolute; position: absolute;
@ -147,8 +147,8 @@ nav {
} }
.close-button:hover { .close-button:hover {
background-color: _palette(accent1); background-color: var(--accent1);
color: _palette(accent2); color: var(--accent2);
} }

4
_sass/_noscripts.scss
View file

@ -3,13 +3,13 @@
.logo, #sticky { .logo, #sticky {
filter: blur(0px); filter: blur(0px);
opacity: 1; opacity: 1;
background-color: _palette(bg); background-color: var(--bg);
} }
.blurredout { .blurredout {
filter: blur(0px); filter: blur(0px);
opacity: 1; opacity: 1;
background-color: _palette(bg); background-color: var(--bg);
-webkit-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in;
transition: all 400ms ease-in; transition: all 400ms ease-in;

56
_sass/_player.scss
View file

@ -32,7 +32,7 @@ audio {
list-style: none; list-style: none;
padding: 0; padding: 0;
li { li {
border-top: solid 1px _palette(fg-alt); border-top: solid 1px var(--fg-alt);
} }
li:first-child { li:first-child {
@ -40,13 +40,13 @@ audio {
} }
li:last-child { li:last-child {
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
border-bottom: solid 1px _palette(fg-alt); border-bottom: solid 1px var(--fg-alt);
} }
} }
} }
#audiowrap { #audiowrap {
background-color: _palette(bg); background-color: var(--bg);
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
} }
@ -71,7 +71,7 @@ audio {
flex-wrap: unset; flex-wrap: unset;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: _palette(bg); background-color: var(--bg);
} }
@ -94,19 +94,19 @@ audio {
} }
#plList li { #plList li {
background-color: _palette(bg); background-color: var(--bg);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 21px 0; padding: 21px 0;
border-left: 1px solid _palette(fg-alt); border-left: 1px solid var(--fg-alt);
border-right: 1px solid _palette(fg-alt); border-right: 1px solid var(--fg-alt);
border-top: 0; border-top: 0;
transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;
} }
#plList li:hover { #plList li:hover {
background-color: _palette(accent1); background-color: var(--accent1);
color: _palette(bg); color: var(--bg);
transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;
} }
@ -139,17 +139,17 @@ audio {
} }
.plSel { .plSel {
background-color: _palette(fg-alt)!important; background-color: var(--fg-alt)!important;
cursor: pointer!important; cursor: pointer!important;
} }
.plSel:hover { .plSel:hover {
background-color: _palette(accent1)!important; background-color: var(--accent1)!important;
} }
a[id^="btn"] { a[id^="btn"] {
font-size: 1.5em; font-size: 1.5em;
color: _palette(fg); color: var(--fg);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0 27px 0 21px; padding: 0 27px 0 21px;
@ -206,18 +206,18 @@ a[id^="btn"]::-moz-focus-inner {
flex-wrap: wrap; flex-wrap: wrap;
margin:0; margin:0;
padding:0; padding:0;
background-color: _palette(accent1); background-color: var(--accent1);
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 50vw; min-height: 50vw;
text-align: left; text-align: left;
.button { .button {
background-color: _palette(accent1); background-color: var(--accent1);
color: _palette(bg); color: var(--bg);
} }
.button:hover { .button:hover {
background-color: _palette(accent2); background-color: var(--accent2);
color: _palette(fg); color: var(--fg);
} }
> div { > div {
flex: 1 1 auto; flex: 1 1 auto;
@ -225,10 +225,10 @@ a[id^="btn"]::-moz-focus-inner {
min-width: 280px; min-width: 280px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: _palette(bg); background-color: var(--bg);
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -webkit-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt); -moz-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
box-shadow: inset 0px 23px 25px -25px _palette(border-alt); box-shadow: inset 0px 23px 25px -25px var(--border-alt);
> h2, p { > h2, p {
text-align: left; text-align: left;
@ -252,15 +252,15 @@ a[id^="btn"]::-moz-focus-inner {
.track-picker:nth-child(even) { .track-picker:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
background-color: _palette(accent2); background-color: var(--accent2);
text-align: right; text-align: right;
.button { .button {
background-color: _palette(accent2); background-color: var(--accent2);
color: _palette(fg); color: var(--fg);
} }
.button:hover{ .button:hover{
background-color: _palette(accent1); background-color: var(--accent1);
color: _palette(bg); color: var(--bg);
} }
> div { > div {
> h2, a, p { > h2, a, p {
@ -271,7 +271,7 @@ a[id^="btn"]::-moz-focus-inner {
} }
#fixedPlayer { #fixedPlayer {
background-color: _palette(bg); background-color: var(--bg);
margin: 0; margin: 0;
padding:0; padding:0;
position: fixed; position: fixed;
@ -316,7 +316,7 @@ a[id^="btn"]::-moz-focus-inner {
} }
a[id^="btn"] { a[id^="btn"] {
font-size: 1em; font-size: 1em;
color: _palette(fg); color: var(--fg);
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0 0 0 20px; padding: 0 0 0 20px;

2
_sass/_videos.scss
View file

@ -5,7 +5,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
background: _palette(bg); background: var(--bg);
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;

36
_sass/libs/_vars.scss
View file

@ -61,12 +61,12 @@
@return val($font, $keys...); @return val($font, $keys...);
} }
/// Gets a palette value. // /// Gets a palette value.
/// @param {string} $keys Key(s). // /// @param {string} $keys Key(s).
/// @return {string} Value. // /// @return {string} Value.
@function _palette($keys...) { // @function _palette($keys...) {
@return val($palette, $keys...); // @return val($palette, $keys...);
} // }
@ -131,17 +131,17 @@ $font: (
kerning-alt: 0.125em kerning-alt: 0.125em
); );
// Palette. // Palette.
$palette: ( // $palette: (
bg: #3c2a52, // bg: #3c2a52,
bg-alt: rgba(60, 42, 82, 0.75), // bg-alt: rgba(60, 42, 82, 0.75),
fg: #ebdbf8, // fg: #ebdbf8,
fg-alt: rgba(235, 219, 248, 0.25), // fg-alt: rgba(235, 219, 248, 0.25),
border: #000000, // border: #000000,
border-alt: rgba(0, 0, 0, 0.75), // border-alt: rgba(0, 0, 0, 0.75),
accent1: #38ff59, // accent1: #38ff59,
accent1-alt:rgba(56, 255, 89, 0.75), // accent1-alt:rgba(56, 255, 89, 0.75),
accent2: #8d3ed8, // accent2: #8d3ed8,
accent2-alt:rgba(141, 62, 216, 0.75), // accent2-alt:rgba(141, 62, 216, 0.75),
); // );

4
_sass/trackplayer.scss
View file

@ -7,8 +7,8 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background-size: 100%; background-size: 100%;
background: _palette(bg-alt); background: var(--bg-alt);
background: linear-gradient(180deg, _palette(bg-alt) 0%, _palette(accent1-alt) 180%); background: linear-gradient(180deg, var(--bg-alt) 0%, var(--accent1-alt) 180%);
> section { > section {
position: absolute; position: absolute;

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

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

1
assets/css/main-20200810.scss
View file

@ -1,5 +1,6 @@
--- ---
--- ---
@import 'colors.css';
@import 'libs/vars'; @import 'libs/vars';
@import 'libs/reset'; @import 'libs/reset';