From ac00446e4a72eac3425c3325575e4c8a5c5843b7 Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Sun, 20 Nov 2022 20:23:52 -0700 Subject: [PATCH] Improving back button styling and colour schemes. --- www/css/main.css | 134 ++++++++++++++++++++++++++++++++++------------- www/js/main.js | 7 ++- www/lucy.html | 4 +- 3 files changed, 106 insertions(+), 39 deletions(-) diff --git a/www/css/main.css b/www/css/main.css index 0369bd1..646bd28 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -89,18 +89,41 @@ textarea { ========================================================================== */ :root { - --jason-bg-color: #F2EDEA; - --jason-accent-color: #302B44; - --jason-hover-bg-color: #913A50; - --jason-hover-fg-color: #FFFFFF; - --flo-bg-color: #601F22; - --flo-accent-color: #FFE4E1; - --flo-hover-bg-color: #00C4FF; - --flo-hover-fg-color: #FFFFFF; - --lucy-bg-color: #ECCFC3; - --lucy-accent-color: #904C77; - --lucy-hover-bg-color: #E49AB0; - --lucy-hover-fg-color: #000000; + --jason-bg: #F2EDEA; + --jason-title-fg: #302B44; + --jason-link-bg: var(--jason-title-fg); + --jason-link-fg: var(--jason-bg); + --jason-hover-bg: #913A50; + --jason-hover-fg: #FFFFFF; + --jason-back-bg: #B05C7144; + --jason-back-fg: var(--jason-title-fg); + --jason-back-fg: #585568; + + --flo-bg: #601F22; + --flo-title-fg: #FFE4E1; + --flo-link-bg: var(--flo-title-fg); + --flo-link-fg: var(--flo-bg); + --flo-hover-bg: #00C4FF; + --flo-hover-fg: #FFFFFF; + --flo-back-bg: #FFE4E188; + --flo-back-fg: #998987; + --flo-back-fg: var(--flo-bg); + + --lucy-bg: #ECCFC3; + --lucy-title-fg: #904C77; + --lucy-link-bg: #ECB8A5; + --lucy-link-fg: var(--lucy-title-fg); + --lucy-hover-bg: #E49AB0; + --lucy-hover-fg: #333333; + --lucy-back-bg: #ECB8A5; + --lucy-back-fg: var(--lucy-title-fg); + --lucy-bio-fg: #333333; + --lucy-bio-link: var(--lucy-title-fg); + --lucy-bio-link-hover: #E49AB0; + --lucy-alert-bg: var(--lucy-title-fg); + --lucy-alert-fg: #FFFFFF; + --lucy-alert-link: #ECCFC3; + --lucy-alert-link-hover: var(--lucy-bio-link-hover); } body { @@ -184,7 +207,6 @@ div { .links #lost { - background-color: #ECB8A5; margin: 0 auto 0 auto; width: 90%; margin-bottom: 1rem; @@ -201,15 +223,13 @@ div { width: 3rem; z-index: 100; border-radius: 1rem; - background-color: rgba(0, 0, 0, 0.5); - color: rgba(192, 192, 192, 0.5); font-size: 2rem; line-height: 3rem; text-align: center; } .splash.jason, .main.jason { - background-color: var(--jason-bg-color); + background-color: var(--jason-bg); font-family: 'Raleway', sans-serif; } @@ -221,21 +241,30 @@ div { .jason h1 a { text-decoration: none; - color: var(--jason-accent-color); + color: var(--jason-title-fg); } .links.jason li a { - background-color: var(--jason-accent-color); - color: var(--jason-bg-color); + background-color: var(--jason-link-bg); + color: var(--jason-link-fg); } .links.jason li a:hover { - background-color: var(--jason-hover-bg-color); - color: var(--jason-hover-fg-color); + background-color: var(--jason-hover-bg); + color: var(--jason-hover-fg); +} + +#backbutton.jason { + background-color: var(--jason-back-bg); + color: var(--jason-back-fg); +} + +#backbutton.jason a { + color: var(--jason-back-fg); } .splash.flo, .main.flo { - background-color: var(--flo-bg-color); + background-color: var(--flo-bg); font-family: 'Quicksand', sans-serif; } @@ -246,21 +275,30 @@ div { .flo h1 a { text-decoration: none; - color: var(--flo-accent-color); + color: var(--flo-title-fg); } .links.flo li a { - background-color: var(--flo-accent-color); - color: var(--flo-bg-color); + background-color: var(--flo-link-bg); + color: var(--flo-link-fg); } .links.flo li a:hover { - background-color: var(--flo-hover-bg-color); - color: var(--flo-hover-fg-color); + background-color: var(--flo-hover-bg); + color: var(--flo-hover-fg); +} + +#backbutton.flo { + background-color: var(--flo-back-bg); + color: var(--flo-back-fg); +} + +#backbutton.flo a { + color: var(--flo-back-fg); } .splash.lucy, .main.lucy { - background-color: var(--lucy-bg-color); + background-color: var(--lucy-bg); font-family: 'Asap', sans-serif; } @@ -271,25 +309,51 @@ div { .lucy h1 a { text-decoration: none; - color: var(--lucy-accent-color); + color: var(--lucy-title-fg); +} + +#lost.lucy { + background-color: var(--lucy-alert-bg); + color: var(--lucy-alert-fg); +} + +#lost.lucy a { + color: var(--lucy-alert-link); +} + +#lost.lucy a:hover { + color: var(--lucy-alert-link-hover); +} + +.links.lucy { + color: var(--lucy-bio-fg); } .links.lucy a { - color: var(--lucy-accent-color); + color: var(--lucy-bio-link); } .links.lucy a:hover { - color: #FF0000; + color: var(--lucy-bio-link-hover); } .links.lucy li a { - background-color: var(--lucy-accent-color); - color: var(--lucy-bg-color); + background-color: var(--lucy-link-bg); + color: var(--lucy-link-fg); } .links.lucy li a:hover { - background-color: var(--lucy-hover-bg-color); - color: var(--lucy-hover-fg-color); + background-color: var(--lucy-hover-bg); + color: var(--lucy-hover-fg); +} + +#backbutton.lucy { + background-color: var(--lucy-back-bg); + color: var(--lucy-back-fg); +} + +#backbutton.lucy a { + color: var(--lucy-back-fg); } diff --git a/www/js/main.js b/www/js/main.js index 5f6c8c8..bfa1bd0 100644 --- a/www/js/main.js +++ b/www/js/main.js @@ -138,7 +138,10 @@ $(() => { top: '-3rem', right: '-3rem' }, { - duration: 300 + duration: 300, + complete: () => { + $('#backbutton').removeAttr('class') + } }) @@ -194,7 +197,7 @@ $(() => { duration: 300 }) - $('#backbutton').animate({ + $('#backbutton').addClass(p).animate({ top: '2.5rem', right: '2.5rem' }, { diff --git a/www/lucy.html b/www/lucy.html index 71861bc..68e9d5a 100644 --- a/www/lucy.html +++ b/www/lucy.html @@ -40,7 +40,7 @@ 🏡Calgary, AB, Canada
♀️ Sheepadoodle
👫 @jaywll & @asiancwgrl -
🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨
+
🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨
flo@de-guzman.ca | j@son-williams.ca | (587) 329-9013
-
+