diff --git a/www/css/main.css b/www/css/main.css index b539203..da3287a 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -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; diff --git a/www/img/profile-lucy.png b/www/img/profile-lucy.png new file mode 100644 index 0000000..827e57f Binary files /dev/null and b/www/img/profile-lucy.png differ diff --git a/www/img/splash-lucy.jpg b/www/img/splash-lucy.jpg new file mode 100644 index 0000000..a9896af Binary files /dev/null and b/www/img/splash-lucy.jpg differ diff --git a/www/js/main.js b/www/js/main.js index bf28ac4..b62d9c7 100644 --- a/www/js/main.js +++ b/www/js/main.js @@ -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) { diff --git a/www/lucy.html b/www/lucy.html index e53b5f9..ad0a8b6 100644 --- a/www/lucy.html +++ b/www/lucy.html @@ -16,13 +16,42 @@ - + -
+
+
+
+ +
+
+
+
+ + +
+
+
+