jason/Jnf.me
jason
/
Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
www/css/main.css
View File

@ -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);
}

7
www/js/main.js
View File

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

4
www/lucy.html
View File

@ -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>