From 9d27496b27f761ebfabc4ed6722251c25088ae3e Mon Sep 17 00:00:00 2001 From: Set Sakrecoer Date: Mon, 15 Jul 2019 16:05:25 +0200 Subject: [PATCH] nicer --- _sass/main.scss | 57 +++++++++++---- about/index.html | 2 +- assets/img/header.svg | 161 ++++++++++++++++++++++++++++++++++++++++++ index.html | 21 +----- music.html | 2 +- 5 files changed, 209 insertions(+), 34 deletions(-) create mode 100644 assets/img/header.svg diff --git a/_sass/main.scss b/_sass/main.scss index 860d7e6..ba6c9ba 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -31,12 +31,14 @@ body{ } a { color: #0000009f; - transition: background-color 0.5s ease-in-out; + background-color: rgba(255, 255, 255, 0.705); + transition: color 0.5s ease-in-out; border-radius: 3px; } a:hover { background-color: #00000091; - transition: background-color 0.5s ease-in-out; + transition: color 0.5s ease-in-out; + color: #ffffff9f; } #hero { display: flex; @@ -46,9 +48,9 @@ a:hover { position: relative; height: 100vh; 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: 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/header.svg'); -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @@ -97,7 +99,31 @@ a:hover { font-size: 1em; line-height: .8em; - } + } + a { + background: linear-gradient(230deg, #ff00ff7f, #426a007f); + background-position: center; + background-repeat: repeat; + -webkit-animation: AnimationName 60s ease infinite; + -moz-animation: AnimationName 60s ease infinite; + animation: AnimationName 60s ease infinite; + + @-webkit-keyframes AnimationName { + 0%{background-position:0% 91%} + 50%{background-position:100% 10%} + 100%{background-position:0% 91%} + } + @-moz-keyframes AnimationName { + 0%{background-position:0% 91%} + 50%{background-position:100% 10%} + 100%{background-position:0% 91%} + } + @keyframes AnimationName { + 0%{background-position:0% 91%} + 50%{background-position:100% 10%} + 100%{background-position:0% 91%} + } + } .fullscreen-bg { position: fixed; top: 0; @@ -139,9 +165,7 @@ a:hover { // display: none; // } } - a { - color: #fff; - } + } /* MUSIC INDEX */ @@ -157,10 +181,10 @@ a:hover { background-repeat: repeat; } .trackcontainer { - flex: 1 1 300px; + flex: 1 1 360px; 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)); + // 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)); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; @@ -238,6 +262,9 @@ a:hover { } #controls { + a { + background-color: transparent; + } display: flex; flex: 0 0 200px; flex-wrap: wrap; @@ -370,6 +397,9 @@ min-height: 80vh; bottom: 10px; right: 10px; opacity: 0; + a { + background-color: transparent; + } } .aboutflex { display: flex; @@ -385,9 +415,10 @@ min-height: 80vh; } .logo { flex: 1 0 300px; - margin-top: 0px; - padding-top: 0px; + background-size: 100%; background-repeat: repeat; + max-width: 300px; + max-height: 300px; } \ No newline at end of file diff --git a/about/index.html b/about/index.html index 759fedb..c526927 100644 --- a/about/index.html +++ b/about/index.html @@ -6,7 +6,7 @@ layout: default
-

About

+

About

Sakrecoer

diff --git a/assets/img/header.svg b/assets/img/header.svg new file mode 100644 index 0000000..e0fcc3a --- /dev/null +++ b/assets/img/header.svg @@ -0,0 +1,161 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 64eb7a3..4c0fee4 100644 --- a/index.html +++ b/index.html @@ -36,25 +36,8 @@ layout: default
-
- - -