make color variables selectable in cloudcannon
This commit is contained in:
sakrecoer
parent
11d3e1f5fd
commit
7e61046352
10
_data/colors.yml
Normal file
10
_data/colors.yml
Normal 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)'
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: _palette(border);
|
||||
background-color: var(--border);
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-content: center;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
background-position-y: 0%;
|
||||
background-repeat: repeat;
|
||||
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-clip: border-box;
|
||||
background-size: 400% 400%;
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@ strong {
|
|||
a {
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: transparent;
|
||||
color: _palette(accent2);
|
||||
color: var(--accent2);
|
||||
-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;
|
||||
-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;
|
||||
}
|
||||
a:hover {
|
||||
color: _palette(accent1);
|
||||
color: var(--accent1);
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: unset;
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ a:hover {
|
|||
// Buttons
|
||||
|
||||
.button {
|
||||
background-color: _palette(accent2);
|
||||
background-color: var(--accent2);
|
||||
padding: 1em;
|
||||
|
||||
border-radius: 5px;
|
||||
|
|
@ -43,13 +43,13 @@ a:hover {
|
|||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: _palette(fg);
|
||||
color: var(--fg);
|
||||
|
||||
|
||||
}
|
||||
.button:hover {
|
||||
background-color: _palette(accent1);
|
||||
color: _palette(bg);
|
||||
background-color: var(--accent1);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
// album index
|
||||
|
|
@ -102,7 +102,7 @@ a:hover {
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
border: 1px solid _palette(accent2);
|
||||
border: 1px solid var(--accent2);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
-moz-transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
|
|
@ -112,7 +112,7 @@ a:hover {
|
|||
|
||||
}
|
||||
.icon:hover {
|
||||
border: 1px solid _palette(accent1);
|
||||
border: 1px solid var(--accent1);
|
||||
|
||||
}
|
||||
.small {
|
||||
|
|
@ -211,7 +211,7 @@ a:hover {
|
|||
}
|
||||
.linksbg {
|
||||
background-size: 100%;
|
||||
background: _palette(bg);
|
||||
background: linear-gradient(180deg, _palette(bg) 26%, _palette(accent2-alt) 100%);
|
||||
background: var(--bg);
|
||||
background: linear-gradient(180deg, var(--bg) 26%, var(--accent2-alt) 100%);
|
||||
|
||||
}
|
||||
|
|
@ -7,9 +7,9 @@ body {
|
|||
height: 100vh;
|
||||
width: 100%;
|
||||
font-family: _font(family-fixed);
|
||||
color: _palette(fg);
|
||||
color: var(--fg);
|
||||
letter-spacing: _font(kerning);
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
|
||||
}
|
||||
#main-wrapper {
|
||||
|
|
@ -34,7 +34,7 @@ body {
|
|||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -45,7 +45,7 @@ body {
|
|||
width: 100vw;
|
||||
|
||||
.textcontainer {
|
||||
background-color: _palette(bg-alt);
|
||||
background-color: var(--bg-alt);
|
||||
border-radius: 5px;
|
||||
max-width: 700px;
|
||||
padding: 20px 20px 40px 20px;
|
||||
|
|
@ -57,7 +57,7 @@ body {
|
|||
flex: 1 0 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
color: _palette(fg);
|
||||
color: var(--fg);
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
|
@ -85,10 +85,10 @@ body {
|
|||
section {
|
||||
flex: 1 1 100%;
|
||||
padding: 20px;
|
||||
background-color: _palette(bg);
|
||||
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
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);
|
||||
z-index: 2;
|
||||
h2 {
|
||||
text-align: center;
|
||||
|
|
@ -106,8 +106,8 @@ footer {
|
|||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 160px 20px 200px 20px;
|
||||
background-color: _palette(fg);
|
||||
color: _palette(bg);
|
||||
background-color: var(--fg);
|
||||
color: var(--bg);
|
||||
justify-content: center;
|
||||
background-image: url('../img/vignette-footer.svg');
|
||||
background-size: 480px 480px;
|
||||
|
|
@ -123,7 +123,7 @@ footer {
|
|||
display: block
|
||||
}
|
||||
li {
|
||||
border-bottom: 1px solid _palette(bg-alt);
|
||||
border-bottom: 1px solid var(--bg-alt);
|
||||
line-height: 2;
|
||||
font-size: 1.5em;
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
-webkit-box-shadow: 0px 3px 29px 0px _palette(border-alt);
|
||||
-moz-box-shadow: 0px 3px 29px 0px _palette(border-alt);
|
||||
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 var(--border-alt);
|
||||
box-shadow: 0px 3px 29px 0px var(--border-alt);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -42,13 +42,13 @@
|
|||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
|
||||
}
|
||||
.sticky {
|
||||
filter: blur(0px);
|
||||
opacity: 1;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
.navmenu {
|
||||
margin: 0 40px 0 20px;
|
||||
font-size: 34px;
|
||||
color:_palette(accent1);
|
||||
color:var(--accent1);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ nav {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -100,7 +100,7 @@ nav {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: _palette(bg-alt);
|
||||
background: var(--bg-alt);
|
||||
z-index: 10;
|
||||
opacity:0;
|
||||
-webkit-transition: opacity 400ms ease-in;
|
||||
|
|
@ -124,14 +124,14 @@ nav {
|
|||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
background: rgb(0, 31, 36);
|
||||
background: -moz-linear-gradient(_palette(border), _palette(bg));
|
||||
background: -webkit-linear-gradient(_palette(border), _palette(bg));
|
||||
background: -o-linear-gradient(_palette(border), _palette(bg));
|
||||
background: -moz-linear-gradient(var(--border), var(--bg));
|
||||
background: -webkit-linear-gradient(var(--border), var(--bg));
|
||||
background: -o-linear-gradient(var(--border), var(--bg));
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background-color: _palette(accent2);
|
||||
color: _palette(accent1);
|
||||
background-color: var(--accent2);
|
||||
color: var(--accent1);
|
||||
margin: 0 auto;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
|
|
@ -147,8 +147,8 @@ nav {
|
|||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: _palette(accent1);
|
||||
color: _palette(accent2);
|
||||
background-color: var(--accent1);
|
||||
color: var(--accent2);
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
.logo, #sticky {
|
||||
filter: blur(0px);
|
||||
opacity: 1;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.blurredout {
|
||||
filter: blur(0px);
|
||||
opacity: 1;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
-webkit-transition: all 400ms ease-in;
|
||||
-moz-transition: all 400ms ease-in;
|
||||
transition: all 400ms ease-in;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ audio {
|
|||
list-style: none;
|
||||
padding: 0;
|
||||
li {
|
||||
border-top: solid 1px _palette(fg-alt);
|
||||
border-top: solid 1px var(--fg-alt);
|
||||
|
||||
}
|
||||
li:first-child {
|
||||
|
|
@ -40,13 +40,13 @@ audio {
|
|||
}
|
||||
li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
border-bottom: solid 1px _palette(fg-alt);
|
||||
border-bottom: solid 1px var(--fg-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#audiowrap {
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ audio {
|
|||
flex-wrap: unset;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -94,19 +94,19 @@ audio {
|
|||
}
|
||||
|
||||
#plList li {
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 21px 0;
|
||||
border-left: 1px solid _palette(fg-alt);
|
||||
border-right: 1px solid _palette(fg-alt);
|
||||
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: _palette(accent1);
|
||||
color: _palette(bg);
|
||||
background-color: var(--accent1);
|
||||
color: var(--bg);
|
||||
transition: all 400ms ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -139,17 +139,17 @@ audio {
|
|||
}
|
||||
|
||||
.plSel {
|
||||
background-color: _palette(fg-alt)!important;
|
||||
background-color: var(--fg-alt)!important;
|
||||
cursor: pointer!important;
|
||||
}
|
||||
.plSel:hover {
|
||||
background-color: _palette(accent1)!important;
|
||||
background-color: var(--accent1)!important;
|
||||
}
|
||||
|
||||
|
||||
a[id^="btn"] {
|
||||
font-size: 1.5em;
|
||||
color: _palette(fg);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0 27px 0 21px;
|
||||
|
|
@ -206,18 +206,18 @@ a[id^="btn"]::-moz-focus-inner {
|
|||
flex-wrap: wrap;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-color: _palette(accent1);
|
||||
background-color: var(--accent1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 50vw;
|
||||
text-align: left;
|
||||
.button {
|
||||
background-color: _palette(accent1);
|
||||
color: _palette(bg);
|
||||
background-color: var(--accent1);
|
||||
color: var(--bg);
|
||||
}
|
||||
.button:hover {
|
||||
background-color: _palette(accent2);
|
||||
color: _palette(fg);
|
||||
background-color: var(--accent2);
|
||||
color: var(--fg);
|
||||
}
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -225,10 +225,10 @@ a[id^="btn"]::-moz-focus-inner {
|
|||
min-width: 280px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: _palette(bg);
|
||||
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
|
||||
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;
|
||||
|
|
@ -252,15 +252,15 @@ a[id^="btn"]::-moz-focus-inner {
|
|||
|
||||
.track-picker:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
background-color: _palette(accent2);
|
||||
background-color: var(--accent2);
|
||||
text-align: right;
|
||||
.button {
|
||||
background-color: _palette(accent2);
|
||||
color: _palette(fg);
|
||||
background-color: var(--accent2);
|
||||
color: var(--fg);
|
||||
}
|
||||
.button:hover{
|
||||
background-color: _palette(accent1);
|
||||
color: _palette(bg);
|
||||
background-color: var(--accent1);
|
||||
color: var(--bg);
|
||||
}
|
||||
> div {
|
||||
> h2, a, p {
|
||||
|
|
@ -271,7 +271,7 @@ a[id^="btn"]::-moz-focus-inner {
|
|||
}
|
||||
|
||||
#fixedPlayer {
|
||||
background-color: _palette(bg);
|
||||
background-color: var(--bg);
|
||||
margin: 0;
|
||||
padding:0;
|
||||
position: fixed;
|
||||
|
|
@ -316,7 +316,7 @@ a[id^="btn"]::-moz-focus-inner {
|
|||
}
|
||||
a[id^="btn"] {
|
||||
font-size: 1em;
|
||||
color: _palette(fg);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0 0 0 20px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
background: _palette(bg);
|
||||
background: var(--bg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -61,12 +61,12 @@
|
|||
@return val($font, $keys...);
|
||||
}
|
||||
|
||||
/// Gets a palette value.
|
||||
/// @param {string} $keys Key(s).
|
||||
/// @return {string} Value.
|
||||
@function _palette($keys...) {
|
||||
@return val($palette, $keys...);
|
||||
}
|
||||
// /// Gets a palette value.
|
||||
// /// @param {string} $keys Key(s).
|
||||
// /// @return {string} Value.
|
||||
// @function _palette($keys...) {
|
||||
// @return val($palette, $keys...);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
|
@ -131,17 +131,17 @@ $font: (
|
|||
kerning-alt: 0.125em
|
||||
);
|
||||
// Palette.
|
||||
$palette: (
|
||||
// $palette: (
|
||||
|
||||
bg: #3c2a52,
|
||||
bg-alt: rgba(60, 42, 82, 0.75),
|
||||
fg: #ebdbf8,
|
||||
fg-alt: rgba(235, 219, 248, 0.25),
|
||||
border: #000000,
|
||||
border-alt: rgba(0, 0, 0, 0.75),
|
||||
accent1: #38ff59,
|
||||
accent1-alt:rgba(56, 255, 89, 0.75),
|
||||
accent2: #8d3ed8,
|
||||
accent2-alt:rgba(141, 62, 216, 0.75),
|
||||
// bg: #3c2a52,
|
||||
// bg-alt: rgba(60, 42, 82, 0.75),
|
||||
// fg: #ebdbf8,
|
||||
// fg-alt: rgba(235, 219, 248, 0.25),
|
||||
// border: #000000,
|
||||
// border-alt: rgba(0, 0, 0, 0.75),
|
||||
// accent1: #38ff59,
|
||||
// accent1-alt:rgba(56, 255, 89, 0.75),
|
||||
// accent2: #8d3ed8,
|
||||
// accent2-alt:rgba(141, 62, 216, 0.75),
|
||||
|
||||
);
|
||||
// );
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
background-size: 100%;
|
||||
background: _palette(bg-alt);
|
||||
background: linear-gradient(180deg, _palette(bg-alt) 0%, _palette(accent1-alt) 180%);
|
||||
background: var(--bg-alt);
|
||||
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--accent1-alt) 180%);
|
||||
|
||||
> section {
|
||||
position: absolute;
|
||||
|
|
|
|||
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.accent-fg_color }};
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
---
|
||||
@import 'colors.css';
|
||||
@import 'libs/vars';
|
||||
|
||||
@import 'libs/reset';
|
||||
|
|
|
|||
Loading…
Reference in a new issue