diff --git a/www/css/main.css b/www/css/main.css index 9e1ed9e..212fc9c 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -83,6 +83,7 @@ textarea { resize: vertical; } + /* ========================================================================== Author's custom styles ========================================================================== */ @@ -92,6 +93,11 @@ textarea { --flo-bg-color: #601F22; } +div { + box-sizing: border-box; + overflow: hidden; +} + #view { width: 100vw; } @@ -99,23 +105,23 @@ textarea { #container { min-height: 100vh; width: 100vw; - /* position: relative; */ } .main { - position: relative; + display: flex; float: left; - overflow: hidden; + align-items: center; + justify-content: center; + flex-wrap: wrap; } .splash { float: left; width: 0; height: 0; - overflow: hidden; } -.splash .splash-container { +.splash-container { height: 100%; width: 100%; padding: 1rem; @@ -123,22 +129,54 @@ textarea { .splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; } -.banner { - position: absolute; +/* .banner { + position: relative; width: 100%; - top: 50%; - -ms-transform: translateY(-50%); + height: 100%; + margin: auto 0 auto 0; + /* top: 50%; */ + /* -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + transition: all 0.5s ease; +} */ + +.banner { + flex: 0 0 100%; + text-align: center; } .banner img {max-width: 20vw; max-height: 20vh; } -.jason { +.links { + height: 0; + /* flex: 0 0 100%; */ +} + +.links ul { + width: 80%; + margin: 0 auto 0 auto; + padding: 0; + list-style: none; +} + +.links li a { + display: block; + background-color: #FF0000; + height: 3rem; + line-height: 3rem; + margin-bottom: 0.5rem; + border-radius: 1rem; + text-align: center; +} + +.splash.jason, .main.jason { background-color: var(--jason-bg-color); } -.flo { +.splash.flo, .main.flo { background-color: var(--flo-bg-color); } diff --git a/www/css/normalize.css b/www/css/normalize.css index b9786c4..192eb9c 100644 --- a/www/css/normalize.css +++ b/www/css/normalize.css @@ -24,10 +24,6 @@ body { margin: 0; } -div { - box-sizing: border-box; -} - /** * Render the `main` element consistently in IE. */ diff --git a/www/index.html b/www/index.html index 7f81982..abfc292 100644 --- a/www/index.html +++ b/www/index.html @@ -19,31 +19,67 @@ - -
-
-
- -
+
+ + diff --git a/www/js/main.js b/www/js/main.js index 385779d..bf28ac4 100644 --- a/www/js/main.js +++ b/www/js/main.js @@ -28,7 +28,7 @@ $(() => { minHeight: '100vh' }, { duration: 300, - queue: false, + queue: true, complete: () => { $('.main.not' + openPerson).css('width', 0) $('#splash-' + openPerson).css({ @@ -61,11 +61,26 @@ $(() => { }) } }) - - // SHOW LINKS HERE } + + // Display the links + setTimeout(() => { + $('#links-' + openPerson).animate({ + height: $('#links-' + openPerson).get(0).scrollHeight + }, { + duration: 300, + queue: true + }) + }, 300) } else { - // If a profile is open, close it... + // If a profile is open, close it. + $('#links-' + openPerson).animate({ + height: 0 + }, { + duration: 300, + queue: true + }) + if (window.matchMedia('(orientation: portrait)').matches) { // If we're closing in portrait mode... $('.main.not' + openPerson).css('width', '100vw') @@ -109,7 +124,6 @@ $(() => { openPerson = false } }) - } } })