diff --git a/jnf.me.conf b/jnf.me.conf new file mode 100644 index 0000000..bece0f7 --- /dev/null +++ b/jnf.me.conf @@ -0,0 +1,3 @@ +location / { + return 301 https://www.jnf.me$request_uri; +} \ No newline at end of file diff --git a/jnf.me.sconf b/jnf.me.sconf new file mode 100644 index 0000000..708728e --- /dev/null +++ b/jnf.me.sconf @@ -0,0 +1,25 @@ +if ($host != www.jnf.me) { + return 301 https://www.jnf.me$request_uri; +} + +location / { + index index.php index.html index.htm; + try_files $uri /index.html; +} + +location /lucy { + index index.php index.html index.htm; + try_files $uri /lucy.html; +} + +location ~ \.php$ { + fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; + if (!-f $document_root$fastcgi_script_name) { + return 404; + } + + fastcgi_pass unix:/run/php/php7.4-fpm-ptools.jaywll.co.sock; + fastcgi_index index.php; + include /etc/nginx/fastcgi_params; + include /home/jason/conf/web/ptools.jaywll.co/nginx.fastcgi_cache.conf*; +} \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css new file mode 100644 index 0000000..2df04a5 --- /dev/null +++ b/www/css/main.css @@ -0,0 +1,550 @@ +/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * Vendor-prefixed and regular ::selection selectors cannot be combined: + * https://stackoverflow.com/a/16982510/7133471 + * + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + +:root { + --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: #CCB7B5; + --flo-link-bg: #FFE4E1; + --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 { + overflow-x: hidden; +} + +div { + box-sizing: border-box; + overflow: hidden; +} + +#view { + width: 100vw; +} + +#container { + min-height: 100vh; + width: 100vw; +} + +.main { + display: flex; + float: left; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +.splash { + float: left; + width: 0; + height: 0; +} + +.col-container { + height: 100%; + width: 100%; + padding: 1rem; +} + +.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; } + +.banner { + flex: 0 0 100%; + text-align: center; +} + +.banner img {max-width: 20vw; max-height: 20vh; } + +.links { + height: 0; +} + +.links ul { + width: 80%; + margin: 0 auto 0 auto; + padding: 0; + list-style: none; +} + +.links li a { + display: block; + height: 3rem; + line-height: 3rem; + margin-bottom: 0.5rem; + border-radius: 1rem; + text-align: center; + text-decoration: none; +} + +.links h2 { + margin: 0; + text-align: center; +} + +.links #bio +{ + margin-bottom: 1rem; + text-align: center; +} + +.links #lost +{ + margin: 0 auto 0 auto; + width: 90%; + margin-bottom: 1rem; + padding: 1rem; + border-radius: 1rem; + text-align: center; +} + +#backbutton { + position: fixed; + top: -3rem; + right: -3rem; + height: 3rem; + width: 3rem; + z-index: 100; + border-radius: 1rem; + font-size: 2rem; + line-height: 3rem; + text-align: center; +} + +.splash.jason, .main.jason { + background-color: var(--jason-bg); + font-family: 'Raleway', sans-serif; +} + +.jason h1 { + font-family: 'Cinzel', serif; + font-weight: 400; + word-spacing: -0.15em; +} + +.jason h1 a { + text-decoration: none; + color: var(--jason-title-fg); +} + +.links.jason li a { + background-color: var(--jason-link-bg); + color: var(--jason-link-fg); +} + +.links.jason li a:hover { + 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); + font-family: 'Quicksand', sans-serif; +} + +.flo h1 { + font-family: 'Marck Script', cursive; + font-weight: 400; +} + +.flo h1 a { + text-decoration: none; + color: var(--flo-title-fg); +} + +.links.flo li a { + background-color: var(--flo-link-bg); + color: var(--flo-link-fg); +} + +.links.flo li a:hover { + 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); + 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-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-bio-link); +} + +.links.lucy a:hover { + color: var(--lucy-bio-link-hover); +} + +.links.lucy li a { + background-color: var(--lucy-link-bg); + color: var(--lucy-link-fg); +} + +.links.lucy li a:hover { + 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); +} + + +@media (orientation: landscape) { + .main { + width: 50vw; + min-height: 100vh; + } +} + +@media (orientation: portrait) { + .main { + width: 100vw; + min-height: 50vh; + } + + .splash { + display: none; + } +} + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden, +[hidden] { + display: none !important; +} + +/* + * Hide only visually, but have it available for screen readers: + * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility + * + * 1. For long content, line feeds are not interpreted as spaces and small width + * causes content to wrap 1 word per line: + * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe + */ + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* + * Extends the .sr-only class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ + +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* + * Hide visually and from screen readers, but maintain layout + */ + +.invisible { + visibility: hidden; +} + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + +.clearfix::before, +.clearfix::after { + content: " "; + display: table; +} + +.clearfix::after { + clear: both; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + https://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *::before, + *::after { + background: #fff !important; + color: #000 !important; + /* Black prints faster */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]::after { + content: " (" attr(href) ")"; + } + + abbr[title]::after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]::after, + a[href^="javascript:"]::after { + content: ""; + } + + pre { + white-space: pre-wrap !important; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/www/css/normalize.css b/www/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/www/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/www/img/.gitignore b/www/img/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/www/img/favicon-16x16.png b/www/img/favicon-16x16.png new file mode 100644 index 0000000..0784442 Binary files /dev/null and b/www/img/favicon-16x16.png differ diff --git a/www/img/favicon-32x32.png b/www/img/favicon-32x32.png new file mode 100644 index 0000000..7b460c0 Binary files /dev/null and b/www/img/favicon-32x32.png differ diff --git a/www/img/profile-flo.jpg b/www/img/profile-flo.jpg deleted file mode 100644 index bebbb45..0000000 Binary files a/www/img/profile-flo.jpg and /dev/null differ diff --git a/www/img/profile-flo.png b/www/img/profile-flo.png new file mode 100644 index 0000000..926e61d Binary files /dev/null and b/www/img/profile-flo.png differ diff --git a/www/img/profile-jason.jpg b/www/img/profile-jason.jpg deleted file mode 100644 index 26a8189..0000000 Binary files a/www/img/profile-jason.jpg and /dev/null differ diff --git a/www/img/profile-jason.png b/www/img/profile-jason.png new file mode 100644 index 0000000..99a981d Binary files /dev/null and b/www/img/profile-jason.png differ 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-flo.jpg b/www/img/splash-flo.jpg new file mode 100644 index 0000000..a48496e Binary files /dev/null and b/www/img/splash-flo.jpg differ diff --git a/www/img/splash-jason.jpg b/www/img/splash-jason.jpg new file mode 100644 index 0000000..8fa4037 Binary files /dev/null and b/www/img/splash-jason.jpg 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/index.html b/www/index.html index 7afffc4..4b638b5 100644 --- a/www/index.html +++ b/www/index.html @@ -1,150 +1,91 @@ - - + + + - -Welcome to JnF.me - - - - + + - -
-
-
-

Jay is a caucasian male originally from Swansea, UK but last spotted in Calgary, Canada. By day he's a - mild-mannered bank employee and by night he's... uh... asleep, mostly.

- - -
-
- - -
-
- - -
-
-

Flo is from Winnipeg, MB and now lives in Calgary, AB. She has a small nose that she's self-conscious about, a - Yorkshire Terrier named Charlie, and no concept of the term "inside voice."

- - + +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+ + + + + + + + + + - \ No newline at end of file + + diff --git a/www/js/main.js b/www/js/main.js new file mode 100644 index 0000000..bfa1bd0 --- /dev/null +++ b/www/js/main.js @@ -0,0 +1,207 @@ +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 + immediateOpen(openPerson) + } + + // Listen for pop states + window.onpopstate = function(event) { + path = window.location.pathname.replace(/\//g, '') + //alert(path) + + if (path == '' && openPerson) { + animateClose(openPerson) + openPerson = false + } else if (!openPerson && (path == 'jason' || path == 'flo')) { + openPerson = path + animateOpen(openPerson) + } + }; + + // Handle clicks on profile links (by doing nothing) + $('a.openlink, a.closelink').click(function(e) { + e.preventDefault(); + }) + + // Handle clicks on the banner + $('div.banner, div#backbutton').click(function() { + // If there's no person to open, do nothing + if (typeof $(this).attr('data-person') == 'undefined') return; + + if (!openPerson) { + // If no profile is open, open one, and push a new page URL + openPerson = $(this).attr('data-person') + animateOpen(openPerson) + window.history.pushState({ id: "100" }, '', '/' + openPerson); + } else { + // If a profile is open, close it, and push a new page URL + animateClose(openPerson) + openPerson = false + window.history.pushState({ id: "100" }, '', '/'); + } + }) + + // Immediately open the content for a defined person, with only the display of links being animated + function immediateOpen(p) { + $('.main.not' + p).css({ + width: 0, + height: 0, + minHeight: 0 + }) + + $('#main-' + p).css('min-height', '100vh') + + $('#splash-' + p).css({ + width: '50vw', + height: '100vh' + }) + + animateLinks(p) + } + + // Animate the opening of content for a defined person + function animateOpen(p) { + if (window.matchMedia('(orientation: portrait)').matches) { + // If we're opening in portrait mode... + $('.main.not' + p).css({ + height: '50vh', + minHeight: 0 + }) + + $('.main.not' + p).animate({ + height: 0 + }, { + duration: 300, + queue: false + }) + + $('#main-' + p).animate({ + minHeight: '100vh' + }, { + duration: 300, + queue: true, + complete: () => { + $('.main.not' + p).css('width', 0) + $('#splash-' + p).css({ + width: '50vw', + height: '100vh' + }) + } + }) + + } else { + // If we're opening in landscape mode... + $('#splash-' + p).css('height', '100vh') + + $('.main.not' + p).animate({ + width: 0 + }, { + duration: 300, + queue: false + }) + + $('#splash-' + p).animate({ + width: '50vw' + }, { + duration: 300, + queue: true, + complete: () => { + $('.main.not' + p).css({ + height: 0, + minHeight: 0 + }) + } + }) + } + + // Display the links + setTimeout(() => { + animateLinks(p) + }, 300) + } + + // Animate the closure of a defined person's profile + function animateClose(p) { + $('#links-' + p).animate({ + height: 0 + }, { + duration: 300, + queue: true + }) + + $('#backbutton').animate({ + top: '-3rem', + right: '-3rem' + }, { + duration: 300, + complete: () => { + $('#backbutton').removeAttr('class') + } + }) + + + if (window.matchMedia('(orientation: portrait)').matches) { + // If we're closing in portrait mode... + $('.main.not' + p).css('width', '100vw') + + $('#main-' + p).animate({ + minHeight: '50vh' + }, { + duration: 300, + queue: false + }) + + $('.main.not' + p).animate({ + height: '50vh' + }, { + duration: 300, + queue: false, + complete: () => { + $('.main, .splash').removeAttr('style') + } + }) + + } else { + // If we're closing in landscape mode... + $('.main.not' + p).css('height', '100vh') + + $('#splash-' + p).animate({ + width: 0 + }, { + duration: 300, + queue: false + }) + + $('.main.not' + p).animate({ + width: '50vw' + }, { + duration: 300, + queue: false, + complete: () => { + $('.main, .splash').removeAttr('style') + } + }) + } + } + + // Animate the display of links for a defined person, and show the back button + function animateLinks(p) { + $('#links-' + p).animate({ + height: $('#links-' + p).get(0).scrollHeight + }, { + duration: 300 + }) + + $('#backbutton').addClass(p).animate({ + top: '2.5rem', + right: '2.5rem' + }, { + duration: 300 + }) + } +}) diff --git a/www/js/plugins.js b/www/js/plugins.js new file mode 100644 index 0000000..feb7d19 --- /dev/null +++ b/www/js/plugins.js @@ -0,0 +1,24 @@ +// Avoid `console` errors in browsers that lack a console. +(function() { + var method; + var noop = function () {}; + var methods = [ + 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', + 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', + 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', + 'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' + ]; + var length = methods.length; + var console = (window.console = window.console || {}); + + while (length--) { + method = methods[length]; + + // Only stub undefined methods. + if (!console[method]) { + console[method] = noop; + } + } +}()); + +// Place any jQuery/helper plugins in here. diff --git a/www/js/vendor/modernizr-3.11.2.min.js b/www/js/vendor/modernizr-3.11.2.min.js new file mode 100644 index 0000000..feada51 --- /dev/null +++ b/www/js/vendor/modernizr-3.11.2.min.js @@ -0,0 +1,3 @@ +/*! modernizr 3.11.2 (Custom Build) | MIT * + * https://modernizr.com/download/?-cssanimations-csscolumns-customelements-flexbox-history-picture-pointerevents-postmessage-sizes-srcset-webgl-websockets-webworkers-addtest-domprefixes-hasevent-mq-prefixedcssvalue-prefixes-setclasses-testallprops-testprop-teststyles !*/ +!function(e,t,n,r){function o(e,t){return typeof e===t}function i(e){var t=_.className,n=Modernizr._config.classPrefix||"";if(S&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(e.length>0&&(t+=" "+n+e.join(" "+n)),S?_.className.baseVal=t:_.className=t)}function s(e,t){if("object"==typeof e)for(var n in e)k(e,n)&&s(n,e[n]);else{e=e.toLowerCase();var r=e.split("."),o=Modernizr[r[0]];if(2===r.length&&(o=o[r[1]]),void 0!==o)return Modernizr;t="function"==typeof t?t():t,1===r.length?Modernizr[r[0]]=t:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=t),i([(t&&!1!==t?"":"no-")+r.join("-")]),Modernizr._trigger(e,t)}return Modernizr}function a(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):S?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(){var e=n.body;return e||(e=a(S?"svg":"body"),e.fake=!0),e}function u(e,t,r,o){var i,s,u,f,c="modernizr",d=a("div"),p=l();if(parseInt(r,10))for(;r--;)u=a("div"),u.id=o?o[r]:c+(r+1),d.appendChild(u);return i=a("style"),i.type="text/css",i.id="s"+c,(p.fake?p:d).appendChild(i),p.appendChild(d),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),d.id=c,p.fake&&(p.style.background="",p.style.overflow="hidden",f=_.style.overflow,_.style.overflow="hidden",_.appendChild(p)),s=t(d,e),p.fake?(p.parentNode.removeChild(p),_.style.overflow=f,_.offsetHeight):d.parentNode.removeChild(d),!!s}function f(e,n,r){var o;if("getComputedStyle"in t){o=getComputedStyle.call(t,e,n);var i=t.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(i){var s=i.error?"error":"log";i[s].call(i,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!n&&e.currentStyle&&e.currentStyle[r];return o}function c(e,t){return!!~(""+e).indexOf(t)}function d(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function p(e,n){var o=e.length;if("CSS"in t&&"supports"in t.CSS){for(;o--;)if(t.CSS.supports(d(e[o]),n))return!0;return!1}if("CSSSupportsRule"in t){for(var i=[];o--;)i.push("("+d(e[o])+":"+n+")");return i=i.join(" or "),u("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"===f(e,null,"position")})}return r}function m(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function h(e,t,n,i){function s(){u&&(delete N.style,delete N.modElem)}if(i=!o(i,"undefined")&&i,!o(n,"undefined")){var l=p(e,n);if(!o(l,"undefined"))return l}for(var u,f,d,h,A,v=["modernizr","tspan","samp"];!N.style&&v.length;)u=!0,N.modElem=a(v.shift()),N.style=N.modElem.style;for(d=e.length,f=0;f + + + + + Welcome to JnF.me + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+ + +
+
+
+ +
+ +
+ + + + + + + + + + + + +