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
-