Improving back button styling and colour schemes.

www/css/main.css

@@ -89,18 +89,41 @@ textarea {
    ========================================================================== */
 
 :root {
-  --jason-bg-color: #F2EDEA;
+  --jason-bg: #F2EDEA;
-  --jason-accent-color: #302B44;
+  --jason-title-fg: #302B44;
-  --jason-hover-bg-color: #913A50;
+  --jason-link-bg: var(--jason-title-fg);
-  --jason-hover-fg-color: #FFFFFF;
+  --jason-link-fg: var(--jason-bg);
-  --flo-bg-color: #601F22;
+  --jason-hover-bg: #913A50;
-  --flo-accent-color: #FFE4E1;
+  --jason-hover-fg: #FFFFFF;
-  --flo-hover-bg-color: #00C4FF;
+  --jason-back-bg: #B05C7144;
-  --flo-hover-fg-color: #FFFFFF;
+  --jason-back-fg: var(--jason-title-fg);
-  --lucy-bg-color: #ECCFC3;
+  --jason-back-fg: #585568;
-  --lucy-accent-color: #904C77;
+
-  --lucy-hover-bg-color: #E49AB0;
+  --flo-bg: #601F22;
-  --lucy-hover-fg-color: #000000;
+  --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);
+  background-color: var(--jason-link-bg);
-  color: var(--jason-bg-color);
+  color: var(--jason-link-fg);
 }
 
 .links.jason li a:hover {
-  background-color: var(--jason-hover-bg-color);
+  background-color: var(--jason-hover-bg);
-  color: var(--jason-hover-fg-color);
+  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);
+  background-color: var(--flo-link-bg);
-  color: var(--flo-bg-color);
+  color: var(--flo-link-fg);
 }
 
 .links.flo li a:hover {
-  background-color: var(--flo-hover-bg-color);
+  background-color: var(--flo-hover-bg);
-  color: var(--flo-hover-fg-color);
+  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);
+  background-color: var(--lucy-link-bg);
-  color: var(--lucy-bg-color);
+  color: var(--lucy-link-fg);
 }
 
 .links.lucy li a:hover {
-  background-color: var(--lucy-hover-bg-color);
+  background-color: var(--lucy-hover-bg);
-  color: var(--lucy-hover-fg-color);
+  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);
 }
 
 

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'
     }, {

www/lucy.html

@@ -40,7 +40,7 @@
             🏡Calgary, AB, Canada<br>
             ♀️ Sheepadoodle<br>
             👫 @<a href="https://instagram.com/jaywll">jaywll</a> &amp; @<a href="https://instagram.com/asiancwgrl">asiancwgrl</a></div>
-          <div id="lost">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
+          <div id="lost" class="lucy">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
             <a href='mailto&#58;f&#108;o%40d%6&#53;-%&#54;7uzm&#37;61&#37;6&#69;&#46;%63&#97;'>flo&#64;de-gu&#122;m&#97;n&#46;ca</a> | <a href='m&#97;ilto&#58;%6A&#64;&#115;o&#110;&#45;w&#105;&#108;l%&#54;&#57;&#97;&#37;&#54;Ds%2E%6&#51;%61'>j&#64;son-wi&#108;liams&#46;&#99;a</a> | <a href="tel:+15873299013">(587) 329-9013</a>
           </div>
           <ul>
@@ -52,7 +52,7 @@
     </div>
   </div>
 
-	<div id="backbutton" class="jason">
+	<div id="backbutton" class="lucy">
 		<a href="/"><i class="fa-solid fa-left-long"></i></a>
 	</div>