diff --git a/404.html b/404.html index b619d62..0b1c3c9 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ - + @@ -99,13 +99,13 @@ body{
-
-
+
{% if page.collection != 'tracks' %} diff --git a/_layouts/default.html b/_layouts/default.html index ae014d6..751e26c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,7 +7,7 @@ - + {% include seo.html %} diff --git a/_layouts/music.html b/_layouts/music.html index 9d2ac13..0206be9 100644 --- a/_layouts/music.html +++ b/_layouts/music.html @@ -85,7 +85,7 @@ layout: default } #wallpaper { - background-image: url(/assets/img/world.svg); + background-image: url(/assets/img/world2.svg); -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; diff --git a/_sass/isotope.scss b/_sass/isotope.scss index 4eb8514..569f91a 100644 --- a/_sass/isotope.scss +++ b/_sass/isotope.scss @@ -9,7 +9,7 @@ margin: 0 10px 10px 0; width: 50px; height: 50px; - background: rgba(65, 106, 0, 0.473); + background: $color3; border: none; border-radius: 300px; @@ -20,13 +20,13 @@ .button:hover { - text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); - color: #222; + text-shadow: 0 1px $color4; + color: $color4; } .button:active, .button.is-checked { - background: linear-gradient(230deg, rgba(255, 0, 255, 0.902), rgba(66, 107, 0, 0.902)); + background: linear-gradient(230deg, $color5, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; @@ -35,12 +35,12 @@ } .button.is-checked { - color: white; - text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); + color: $color1; + text-shadow: $color4; } .button:active { - box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8); + box-shadow: inset 0 1px 10px $color4; } /* ---- button-group ---- */ diff --git a/_sass/main.scss b/_sass/main.scss index a6d2939..bb8d252 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -20,7 +20,9 @@ html { body{ margin: 0; padding: 0; - background: linear-gradient(230deg, #ff00ff7f, #426a007f); + background-color: $color1; + color: $color4; + background: linear-gradient(230deg, $color1, $color3); background-position: center; background-repeat: repeat; -webkit-animation: AnimationName 60s ease infinite; @@ -28,15 +30,13 @@ body{ animation: AnimationName 60s ease infinite; } a { - color: #0000009f; - background-color: rgba(255, 255, 255, 0.705); - transition: color 0.5s ease-in-out; + color: $color4; + transition: all 0.5s ease-in-out; border-radius: 3px; } a:hover { - background-color: #00000091; transition: color 0.5s ease-in-out; - color: #ffffff9f; + color: $color5; } #hero { display: flex; @@ -48,7 +48,7 @@ a:hover { width: 100%; // background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8)); // background-size: 1000% 1000%; - background-image: url('/assets/img/world.svg'); + background-image: url('/assets/img/world2.svg'); -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @@ -64,8 +64,8 @@ a:hover { } .pivot { border-radius: 3px; - background: linear-gradient(230deg, #ff00ff7f, #426a007f); - + background: linear-gradient(230deg, $color1, $color3); + box-shadow: 5px 10px 100px $color4; } h1 { @@ -79,10 +79,7 @@ a:hover { font-size: 1em; line-height: .8em; } - a { - background: linear-gradient(230deg, #ff00ff7f, #426a007f); - } .fullscreen-bg { position: fixed; top: 0; @@ -99,7 +96,7 @@ a:hover { left: 0; width: 100vw; height: 100%; - background: linear-gradient(230deg, #ff00ffe6, #416a00e6); + background: linear-gradient(230deg, $color1, $color3); margin:0; padding: 0; } @@ -120,11 +117,10 @@ a:hover { @media (max-width: 767px) { .fullscreen-bg { - background: url('/assets/img/sakrecoer-logo.svg') center center / cover no-repeat; + background: url('/assets/img/sakrecoer-logo2.svg') center center / cover no-repeat; } .pivot { - background: transparent; flex: 0 0 250px; } h1 { @@ -152,6 +148,8 @@ a:hover { } .trackcontainer { flex: 1 1 360px; + width: 250px; + padding: 10px; margin: 0; // background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1)); @@ -163,7 +161,7 @@ a:hover { h1, h2, h3, p { padding: 5px; - background: linear-gradient(230deg, rgba(255, 0, 255, 0.9), rgba(65, 106, 0, 0.9)); + background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; @@ -171,7 +169,7 @@ a:hover { padding: 10px; border-radius: 3px; - box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); + box-shadow: 5px 10px 100px $color4; } } @@ -179,11 +177,11 @@ a:hover { width: 100%; background-size: cover; background-position: 50% 50%; - min-height: 300px; + min-height: 250px; padding: 0; margin: 0; border-radius: 3px; - box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); + box-shadow: 5px 10px 100px $color4; } @@ -216,9 +214,9 @@ a:hover { .container { - box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); + box-shadow: 5px 10px 100px $color4; -background: linear-gradient(230deg, #ff00ff7f, #426a007f); +background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; @@ -233,7 +231,7 @@ background: linear-gradient(230deg, #ff00ff7f, #426a007f); } } button { - background: linear-gradient(230deg, rgba(255, 0, 255, 0.9), rgba(66, 106, 0, 0.9)); + background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; color: #fff; -webkit-animation: AnimationName 30s ease infinite; @@ -245,7 +243,7 @@ button { transition: background-color 0.5s ease-in-out; } button:hover { - background-color: rgba(117, 253, 83, 0.9); + background-color: $color2; } #info { flex: 1 1 500px; @@ -258,7 +256,7 @@ min-height: 80vh; } #timer { flex: 1 1 200px; - background: linear-gradient(230deg, #ff00ffe6, #416a00e6); + background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; @@ -267,15 +265,15 @@ min-height: 80vh; padding: 15px; p { - background-color: rgba(151, 189, 146, 0.3); + background-color: $color1; padding: 10px; border-radius: 3px; - box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); + box-shadow: 5px 10px 100px $color4; } img { - box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); + box-shadow: 5px 10px 100px $color4; border-radius: 3px; } @@ -299,7 +297,12 @@ min-height: 80vh; flex-direction: row; margin: 0; padding: 0; - background-color: #ffffff; + background: linear-gradient(230deg, $color1, $color2, $color3, $color4, $color5); + background-position: center; + background-repeat: repeat; + -webkit-animation: AnimationName 60s ease infinite; + -moz-animation: AnimationName 60s ease infinite; + animation: AnimationName 60s ease infinite; background-repeat: repeat; } diff --git a/_sass/palette.scss b/_sass/palette.scss new file mode 100644 index 0000000..fa66f8e --- /dev/null +++ b/_sass/palette.scss @@ -0,0 +1,8 @@ +/* Coolors Exported Palette - coolors.co/deefb7-98dfaf-5fb49c-414288-682d63 */ + +/* RGB */ +$color1: rgba(222, 239, 183, 1); +$color2: rgba(152, 223, 175, 1); +$color3: rgba(95, 180, 156, 1); +$color4: rgba(65, 66, 136, 1); +$color5: rgba(104, 45, 99, 1); \ No newline at end of file diff --git a/about/index.html b/about/index.html index 6406c5e..369a250 100644 --- a/about/index.html +++ b/about/index.html @@ -13,7 +13,7 @@ description: What is Sakrecoer about and what does its music stand for? {% include liberapay.html %}
-
-
-
+
diff --git a/music.html b/music.html index e777490..69a56a5 100644 --- a/music.html +++ b/music.html @@ -2,7 +2,7 @@ title: Sakrecoer Music Tracks description: Officially released but also exclusive audio-material by Sakrecoer layout: default -image: /assets/img/world.svg +image: /assets/img/world2.svg --- {% include navmenu.html %} @@ -46,7 +46,7 @@ image: /assets/img/world.svg
{% for track in site.tracks reversed %} -