Added page for Lucy
This commit is contained in:
Jason Williams
parent
09179986a3
commit
78d49c9bc0
@ -97,6 +97,10 @@ textarea {
|
|||||||
--flo-accent-color: #FFE4E1;
|
--flo-accent-color: #FFE4E1;
|
||||||
--flo-hover-bg-color: #00C4FF;
|
--flo-hover-bg-color: #00C4FF;
|
||||||
--flo-hover-fg-color: #FFFFFF;
|
--flo-hover-fg-color: #FFFFFF;
|
||||||
|
--lucy-bg-color: #ECCFC3;
|
||||||
|
--lucy-accent-color: #904C77;
|
||||||
|
--lucy-hover-bg-color: #E49AB0;
|
||||||
|
--lucy-hover-fg-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -167,6 +171,28 @@ div {
|
|||||||
text-decoration: none;
|
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 {
|
.splash.jason, .main.jason {
|
||||||
background-color: var(--jason-bg-color);
|
background-color: var(--jason-bg-color);
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
@ -218,6 +244,40 @@ div {
|
|||||||
color: var(--flo-hover-fg-color);
|
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) {
|
@media (orientation: landscape) {
|
||||||
.main {
|
.main {
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
|
|||||||
BIN
www/img/profile-lucy.png
Normal file
BIN
www/img/profile-lucy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
www/img/splash-lucy.jpg
Normal file
BIN
www/img/splash-lucy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
@ -1,13 +1,48 @@
|
|||||||
openPerson = false
|
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) {
|
$('a.openlink').click(function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Handle clicks on the banner
|
||||||
$('div.banner').click(function() {
|
$('div.banner').click(function() {
|
||||||
|
if (typeof $(this).attr('data-person') == 'undefined') return;
|
||||||
|
|
||||||
|
// If no profile is open, open one...
|
||||||
if (!openPerson) {
|
if (!openPerson) {
|
||||||
// If no profile is open, open one...
|
|
||||||
openPerson = $(this).attr('data-person')
|
openPerson = $(this).attr('data-person')
|
||||||
|
|
||||||
if (window.matchMedia('(orientation: portrait)').matches) {
|
if (window.matchMedia('(orientation: portrait)').matches) {
|
||||||
|
|||||||
@ -16,13 +16,42 @@
|
|||||||
<link rel="stylesheet" href="/css/main.css">
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<meta name="theme-color" content="#fafafa">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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 & @asiancwgrl</div>
|
||||||
|
<div id="lost">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
|
||||||
|
<a href='mailto:flo%40d%65-%67uzm%61%6E.%63a'>flo@de-guzman.ca</a> | <a href='mailto:%6A@son-will%69a%6Ds%2E%63%61'>j@son-williams.ca</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 id="splash-jason" class="splash jason notflo">
|
||||||
<div class="col-container">
|
<div class="col-container">
|
||||||
<img src="/img/splash-jason.jpg">
|
<img src="/img/splash-jason.jpg">
|
||||||
@ -69,7 +98,7 @@
|
|||||||
<img src="/img/splash-flo.jpg">
|
<img src="/img/splash-flo.jpg">
|
||||||
</div>
|
</div>
|
||||||
</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/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>
|
<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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user