Improving back button styling and colour schemes.

This commit is contained in:
Jason Williams 2022-11-20 20:23:52 -07:00
parent a9ac160c85
commit ac00446e4a
3 changed files with 106 additions and 39 deletions

View File

@ -89,18 +89,41 @@ textarea {
========================================================================== */ ========================================================================== */
:root { :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 { body {
@ -184,7 +207,6 @@ div {
.links #lost .links #lost
{ {
background-color: #ECB8A5;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
width: 90%; width: 90%;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -201,15 +223,13 @@ div {
width: 3rem; width: 3rem;
z-index: 100; z-index: 100;
border-radius: 1rem; border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.5);
color: rgba(192, 192, 192, 0.5);
font-size: 2rem; font-size: 2rem;
line-height: 3rem; line-height: 3rem;
text-align: center; text-align: center;
} }
.splash.jason, .main.jason { .splash.jason, .main.jason {
background-color: var(--jason-bg-color); background-color: var(--jason-bg);
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
} }
@ -221,21 +241,30 @@ div {
.jason h1 a { .jason h1 a {
text-decoration: none; text-decoration: none;
color: var(--jason-accent-color); color: var(--jason-title-fg);
} }
.links.jason li a { .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 { .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 { .splash.flo, .main.flo {
background-color: var(--flo-bg-color); background-color: var(--flo-bg);
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
} }
@ -246,21 +275,30 @@ div {
.flo h1 a { .flo h1 a {
text-decoration: none; text-decoration: none;
color: var(--flo-accent-color); color: var(--flo-title-fg);
} }
.links.flo li a { .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 { .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 { .splash.lucy, .main.lucy {
background-color: var(--lucy-bg-color); background-color: var(--lucy-bg);
font-family: 'Asap', sans-serif; font-family: 'Asap', sans-serif;
} }
@ -271,25 +309,51 @@ div {
.lucy h1 a { .lucy h1 a {
text-decoration: none; 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 { .links.lucy a {
color: var(--lucy-accent-color); color: var(--lucy-bio-link);
} }
.links.lucy a:hover { .links.lucy a:hover {
color: #FF0000; color: var(--lucy-bio-link-hover);
} }
.links.lucy li a { .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 { .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);
} }

View File

@ -138,7 +138,10 @@ $(() => {
top: '-3rem', top: '-3rem',
right: '-3rem' right: '-3rem'
}, { }, {
duration: 300 duration: 300,
complete: () => {
$('#backbutton').removeAttr('class')
}
}) })
@ -194,7 +197,7 @@ $(() => {
duration: 300 duration: 300
}) })
$('#backbutton').animate({ $('#backbutton').addClass(p).animate({
top: '2.5rem', top: '2.5rem',
right: '2.5rem' right: '2.5rem'
}, { }, {

View File

@ -40,7 +40,7 @@
🏡Calgary, AB, Canada<br> 🏡Calgary, AB, Canada<br>
♀️ Sheepadoodle<br> ♀️ Sheepadoodle<br>
👫 @<a href="https://instagram.com/jaywll">jaywll</a> &amp; @<a href="https://instagram.com/asiancwgrl">asiancwgrl</a></div> 👫 @<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> <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> </div>
<ul> <ul>
@ -52,7 +52,7 @@
</div> </div>
</div> </div>
<div id="backbutton" class="jason"> <div id="backbutton" class="lucy">
<a href="/"><i class="fa-solid fa-left-long"></i></a> <a href="/"><i class="fa-solid fa-left-long"></i></a>
</div> </div>