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

Added page for Lucy

Browse Source
This commit is contained in:
Jason Williams 2022-11-20 12:30:15 -07:00
parent 09179986a3
commit 78d49c9bc0
5 changed files with 128 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
www/css/main.css
View File

@ -97,6 +97,10 @@ textarea {
--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;
}
body {
@ -167,6 +171,28 @@ div {
text-decoration: none;
}
.links h2 {
margin: 0;
text-align: center;
}
.links #bio
{
margin-bottom: 1rem;
text-align: center;
}
.links #lost
{
background-color: #ECB8A5;
margin: 0 auto 0 auto;
width: 90%;
margin-bottom: 1rem;
padding: 1rem;
border-radius: 1rem;
text-align: center;
}
.splash.jason, .main.jason {
background-color: var(--jason-bg-color);
font-family: 'Raleway', sans-serif;
@ -218,6 +244,40 @@ div {
color: var(--flo-hover-fg-color);
}
.splash.lucy, .main.lucy {
background-color: var(--lucy-bg-color);
font-family: 'Asap', sans-serif;
}
.lucy h1, .lucy h2 {
font-family: 'Reenie Beanie', cursive;
font-weight: 400;
}
.lucy h1 a {
text-decoration: none;
color: var(--lucy-accent-color);
}
.links.lucy #lost a {
color: var(--lucy-accent-color);
}
.links.lucy #lost a:hover {
color: #FF0000;
}
.links.lucy li a {
background-color: var(--lucy-accent-color);
color: var(--lucy-bg-color);
}
.links.lucy li a:hover {
background-color: var(--lucy-hover-bg-color);
color: var(--lucy-hover-fg-color);
}
@media (orientation: landscape) {
.main {
width: 50vw;

BIN
www/img/profile-lucy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
www/img/splash-lucy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

37
www/js/main.js
View File

@ -1,13 +1,48 @@
openPerson = false
$(() => {
// Detect page URL
path = window.location.pathname.replace(/\//g, '')
if (path == 'jason' || path == 'flo' || path == 'lucy') {
// A specific path has been set. Display the profile for that person
openPerson = path
// CHANGE THE DISPLAY HERE FOR JASON / FLO
// Display content for the relevant person, and hide other content
$('.main.not' + openPerson).css({
width: 0,
height: 0,
minHeight: 0
})
$('#main-' + openPerson).css('min-height', '100vh')
$('#splash-' + openPerson).css({
width: '50vw',
height: '100vh'
})
// Animate the display of links
$('#links-' + openPerson).animate({
height: $('#links-' + openPerson).get(0).scrollHeight
}, {
duration: 300,
queue: true
})
}
// Handle clicks on profile links (by doing nothing)
$('a.openlink').click(function(e) {
e.preventDefault();
})
// Handle clicks on the banner
$('div.banner').click(function() {
if (typeof $(this).attr('data-person') == 'undefined') return;
// If no profile is open, open one...
if (!openPerson) {
// If no profile is open, open one...
openPerson = $(this).attr('data-person')
if (window.matchMedia('(orientation: portrait)').matches) {

35
www/lucy.html
View File

@ -16,13 +16,42 @@
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Marck+Script&family=Quicksand&family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Asap&family=Reenie+Beanie&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<div id="container">
<div id="container">
<div id="splash-lucy" class="splash lucy">
<div class="col-container">
<img src="/img/splash-lucy.jpg">
</div>
</div>
<div id="main-lucy" class="main lucy">
<div class="col-container">
<div id="banner-lucy" class="banner lucy">
<a href="/lucy" class="openlink"><img src="/img/profile-lucy.png"></a>
<h1><a href="/jason" class="openlink">“Lucy”</a></h1>
</div>
<div id="links-lucy" class="links lucy">
<h2>Lucinda Tallulah Doodle</h2>
<div id="bio">🎂 Oct 3, 2022<br>
🏡Calgary, AB, Canada<br>
♀️ Sheepadoodle<br>
👫 @jaywll &amp; @asiancwgrl</div>
<div id="lost">🚨⚠️ 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>
<li><a href="https://www.instagram.com/lucy.t.doodle/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://twitter.com/lucy_t_doodle"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- <div id="container">
<div id="splash-jason" class="splash jason notflo">
<div class="col-container">
<img src="/img/splash-jason.jpg">
@ -69,7 +98,7 @@
<img src="/img/splash-flo.jpg">
</div>
</div>
</div>
</div> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>