Compare commits
No commits in common. "release" and "where-map" have entirely different histories.
@ -1,3 +0,0 @@
|
|||||||
location / {
|
|
||||||
return 301 https://www.jnf.me$request_uri;
|
|
||||||
}
|
|
25
jnf.me.sconf
@ -1,25 +0,0 @@
|
|||||||
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*;
|
|
||||||
}
|
|
550
www/css/main.css
@ -1,550 +0,0 @@
|
|||||||
/*! 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;
|
|
||||||
}
|
|
||||||
}
|
|
349
www/css/normalize.css
vendored
@ -1,349 +0,0 @@
|
|||||||
/*! 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;
|
|
||||||
}
|
|
0
www/img/.gitignore
vendored
Before Width: | Height: | Size: 575 B |
Before Width: | Height: | Size: 1.3 KiB |
BIN
www/img/profile-flo.jpg
Normal file
After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 287 KiB |
BIN
www/img/profile-jason.jpg
Normal file
After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 81 KiB |
Before Width: | Height: | Size: 334 KiB |
Before Width: | Height: | Size: 596 KiB |
Before Width: | Height: | Size: 301 KiB |
Before Width: | Height: | Size: 307 KiB |
205
www/index.html
@ -1,91 +1,150 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html class="no-js" lang="">
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<title>Welcome to JnF.me</title>
|
<title>Welcome to JnF.me</title>
|
||||||
<meta name="description" content="">
|
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<style type="text/css">
|
||||||
|
* {margin: 0; border: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 300;}
|
||||||
|
html, body {height: 100%; min-height: 100%;}
|
||||||
|
body {background-color: #333333;}
|
||||||
|
#view {width: 100%; height: 100%; overflow-x: hidden;}
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/normalize.css">
|
#container {width: 100%; height: 100%; position: relative; left: -50%;}
|
||||||
<link rel="stylesheet" href="/css/main.css">
|
#container.openjason {left: 0;}
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
#container.openflo {left: -100%;}
|
||||||
<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 rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
.frame {position: absolute; width: 50%; height: 100%; text-align: center;}
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
|
||||||
|
.info {position: absolute; width: 50%; font-size: 24px; height: 100%; min-height: 100%; overflow: hidden;}
|
||||||
|
.info.open {height: auto;}
|
||||||
|
|
||||||
|
#infojason {left: 0; text-align: right; background-color: #162840; color: #8699B1;}
|
||||||
|
#framejason {left: 50%; background-color: #DAE5E1;}
|
||||||
|
#frameflo {left: 100%; background-color: #601F22;}
|
||||||
|
#infoflo {left: 150%; text-align: left; background-color: #CCCCCC; color: #555555;}
|
||||||
|
|
||||||
|
.info p {margin: 30px;}
|
||||||
|
.info ul {margin: 30px; list-style-type: none;}
|
||||||
|
.info ul li {line-height: 40px;}
|
||||||
|
|
||||||
|
.frame .profile {position: absolute; top: 75px; bottom: 0; left: 0; right: 0; margin: auto; height: 200px; width: 100%;}
|
||||||
|
.frame.open img {width: 80%; max-width: 150px;}
|
||||||
|
|
||||||
|
.frame div.closelink {display: none; position: absolute; top: 20px; left: 0; right: 0; font-size: 24px;}
|
||||||
|
.frame.open div.closelink {display: block;}
|
||||||
|
|
||||||
|
#framejason a {text-decoration: none; color: #000000;}
|
||||||
|
#frameflo a {text-decoration: none; color: #FFFFFF;}
|
||||||
|
|
||||||
|
#infojason a {color: #929FB1;}
|
||||||
|
#infoflo a {color: #333333;}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('a.openlink, a.closelink').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('div.frame').click(function() {
|
||||||
|
if ($('#container').hasClass('open') == false) {
|
||||||
|
p = $(this).attr('data-person');
|
||||||
|
$('.frame.' + p + ', .info.' + p).addClass('open');
|
||||||
|
$('#container').addClass('open open' + p);
|
||||||
|
if (window.location.hostname == 'www.jnf.me') ga('send', 'pageview', {'page': '/' + p });
|
||||||
|
} else {
|
||||||
|
$('.frame, .info, #container').removeClass('open');
|
||||||
|
$('#container').removeClass('openjason openflo');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('a.outbound').click(function(e) {
|
||||||
|
if (window.location.hostname == 'www.jnf.me') {
|
||||||
|
e.preventDefault();
|
||||||
|
trURL = $(this).attr('data-track');
|
||||||
|
nvURL = $(this).attr('href');
|
||||||
|
|
||||||
|
ga('send', 'event', {
|
||||||
|
'eventCategory': 'extlink',
|
||||||
|
'eventAction': trURL.split('/')[1],
|
||||||
|
'eventLabel': trURL.split('/')[2],
|
||||||
|
'nonInteraction': 1,
|
||||||
|
'hitCallback': function() {
|
||||||
|
$('.frame, .info').removeClass('open');
|
||||||
|
$('#container').removeClass('openjason openflo');
|
||||||
|
location.href = nvURL;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (window.location.hostname == 'www.jnf.me') {
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
|
ga('create', 'UA-52787536-2', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="view">
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="splash-jason" class="splash jason notflo">
|
<div id="infojason" class="info jason">
|
||||||
<div class="col-container">
|
<p>Jay is a caucasian male originally from Swansea, UK but last spotted in Calgary, Canada. By day he's a
|
||||||
<img src="/img/splash-jason.jpg">
|
mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="main-jason" class="main jason notflo">
|
|
||||||
<div class="col-container">
|
|
||||||
<div id="banner-jason" class="banner jason notflo" data-person="jason">
|
|
||||||
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
|
|
||||||
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
|
|
||||||
</div>
|
|
||||||
<div id="links-jason" class="links jason notflo">
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
|
<li><a href="http://www.jason.jnf.me/" class="outbound" data-track="/jason/website">Website</a></li>
|
||||||
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
|
<li><a href="http://www.jason.jnf.me/blog/" class="outbound" data-track="/jason/blog">Blog</a></li>
|
||||||
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
|
<li><a href="http://www.jason.jnf.me/contact/" class="outbound" data-track="/jason/contact">Contact Me</a></li>
|
||||||
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
|
</ul>
|
||||||
<li><a href="https://mstdn.ca/@jaywll"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
|
<ul>
|
||||||
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
|
<li><a href="http://twitter.com/JayWll" class="outbound" data-track="/jason/twitter">Twitter</a></li>
|
||||||
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
|
<li><a href="http://www.facebook.com/JayWll" class="outbound" data-track="/jason/facebook">Facebook</a></li>
|
||||||
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
|
<li><a href="http://instagram.com/jaywll" class="outbound" data-track="/jason/instagram">Instagram</a></li>
|
||||||
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
|
<li><a href="http://ca.linkedin.com/in/jaywll/" class="outbound" data-track="/jason/linkedin">LinkedIn</a></li>
|
||||||
|
<li><a href="http://gitlab.com/jaywll" class="outbound" data-track="/jason/gitlab">GitLab</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="framejason" class="frame jason" data-person="jason">
|
||||||
|
<div class="closelink"><a href="#" class="closelink">→</a></div>
|
||||||
|
<div class="profile">
|
||||||
|
<a href="#" class="openlink" data-person="jason"><img src="/img/profile-jason.jpg" /></a>
|
||||||
|
<h1><a href="#" class="openlink" data-person="jason">Jason Williams</a></h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main-flo" class="main flo notjason">
|
<div id="frameflo" class="frame flo" data-person="flo">
|
||||||
<div class="col-container">
|
<div class="closelink"><a href="#" class="closelink">←</a></div>
|
||||||
<div id="banner-flo" class="banner flo notjason" data-person="flo">
|
<div class="profile">
|
||||||
<a href="/flo" class="openlink"><img src="/img/profile-flo.png"></a>
|
<a href="#" class="openlink" data-person="flo"><img src="/img/profile-flo.jpg" /></a>
|
||||||
<h1><a href="/flo" class="openlink">Flo de Guzman</a></h1>
|
<h1><a href="#" class="openlink" data-person="flo">Flo de Guzman</a></h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="links-flo" class="links flo notjason">
|
</div>
|
||||||
|
<div id="infoflo" class="info flo">
|
||||||
|
<p>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."</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
|
<li><a href="http://www.asiancwgrl.jnf.me/" class="outbound" data-track="/flo/blog">Blog</a></li>
|
||||||
<li><a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
|
</ul>
|
||||||
<li><a href="#"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
|
<ul>
|
||||||
|
<li><a href="http://twitter.com/asiancwgrl" class="outbound" data-track="/flo/twitter">Twitter</a></li>
|
||||||
|
<li><a href="http://www.facebook.com/asiancowgrl" class="outbound" data-track="/flo/facebook">Facebook</a></li>
|
||||||
|
<li><a href="http://instagram.com/asiancwgrl" class="outbound" data-track="/flo/instagram">Instagram</a></li>
|
||||||
|
<li><a href="http://ca.linkedin.com/pub/flo-de-guzman/25/9b5/591" class="outbound" data-track="/flo/linkedin">LinkedIn</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="splash-flo" class="splash flo notjason">
|
|
||||||
<div class="col-container">
|
|
||||||
<img src="/img/splash-flo.jpg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="backbutton" class="jason" data-person="none">
|
|
||||||
<a href="/" class="closelink"><i class="fa-solid fa-left-long"></i></a>
|
|
||||||
</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>
|
</div>
|
||||||
<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="/js/vendor/modernizr-3.11.2.min.js"></script>
|
|
||||||
<script src="/js/plugins.js"></script>
|
|
||||||
<script src="/js/main.js"></script>
|
|
||||||
|
|
||||||
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z7645Z1330"></script>
|
|
||||||
<script>
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
gtag('js', new Date());
|
|
||||||
|
|
||||||
gtag('config', 'G-Z7645Z1330');
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
207
www/js/main.js
@ -1,207 +0,0 @@
|
|||||||
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
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
@ -1,24 +0,0 @@
|
|||||||
// 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.
|
|
3
www/js/vendor/modernizr-3.11.2.min.js
vendored
@ -1,72 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html class="no-js" lang="">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Welcome to JnF.me</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/normalize.css">
|
|
||||||
<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=Asap&family=Reenie+Beanie&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<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>
|
|
||||||
👫 @<a href="https://instagram.com/jaywll">jaywll</a> & @<a href="https://instagram.com/asiancwgrl">asiancwgrl</a></div>
|
|
||||||
<div id="lost" class="lucy">🚨⚠️ 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="backbutton" class="lucy">
|
|
||||||
<a href="/"><i class="fa-solid fa-left-long"></i></a>
|
|
||||||
</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>
|
|
||||||
<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
|
|
||||||
<script src="/js/plugins.js"></script>
|
|
||||||
<script src="/js/main.js"></script>
|
|
||||||
|
|
||||||
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z7645Z1330"></script>
|
|
||||||
<script>
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
gtag('js', new Date());
|
|
||||||
|
|
||||||
gtag('config', 'G-Z7645Z1330');
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
BIN
www/signature/jason.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
www/signature/jasonwilliams.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
80
www/where/index.php
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<?php
|
||||||
|
if (isset($_GET["data"])):
|
||||||
|
$options = array(
|
||||||
|
'http' => array(
|
||||||
|
'method' => 'GET',
|
||||||
|
'header' => 'x-ha-access: nXa7LiR1PG'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$context = stream_context_create($options);
|
||||||
|
$data = json_decode(file_get_contents("http://192.168.0.25:8123/api/states", false, $context), true);
|
||||||
|
|
||||||
|
foreach($data as $item) {
|
||||||
|
$output[$item["entity_id"]] = $item;
|
||||||
|
}
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
echo json_encode($output['device_tracker.jasonsphone_jason']);
|
||||||
|
exit();
|
||||||
|
|
||||||
|
else:
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||||
|
<style type="text/css">
|
||||||
|
* {box-sizing: border-box; margin: 0; border: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center;}
|
||||||
|
html, body {height: 100%; min-height: 100%;}
|
||||||
|
body {background-color: #333333;}
|
||||||
|
p {font-size: 5vh; color: #FFFFFF; opacity: 0.5;}
|
||||||
|
h1 {font-size: 13.9vh; color: #FFFFFF;}
|
||||||
|
#map {width: 100; height: 100%;}
|
||||||
|
#container {position: absolute; top: 0; width: 100%; height: 100%; border: 1.5vw solid #333333; background: linear-gradient(135deg, rgba(139,51,175,0.8) 0%, rgba(0,131,214,0.8) 100%);}
|
||||||
|
#centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
||||||
|
</style>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyCo79O07nOpWmdxKBUdgslJRrBwYSykDxwv=3.exp"></script>
|
||||||
|
<script>
|
||||||
|
var map;
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
var locConnaught = new google.maps.LatLng(51.0426695, -114.0898373);
|
||||||
|
var mapOptions = {
|
||||||
|
zoom: 15,
|
||||||
|
center: locConnaught,
|
||||||
|
disableDefaultUI: true,
|
||||||
|
styles: [{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":0},{"lightness":-100},{"visibility":"off"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"hue":"#000000"},{"saturation":-100},{"lightness":-100},{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbbbbb"},{"saturation":-100},{"lightness":26},{"visibility":"on"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"hue":"#dddddd"},{"saturation":-100},{"lightness":-3},{"visibility":"on"}]}]
|
||||||
|
}
|
||||||
|
|
||||||
|
map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
||||||
|
|
||||||
|
updateLocation();
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
updateLocation();
|
||||||
|
}, 60000);
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateLocation() {
|
||||||
|
$.getJSON('?data', function(data) {
|
||||||
|
$('h1').html((data.state == 'away') ? 'Nobody Knows' : 'At ' + data.state.replace(/^\w/, c => c.toUpperCase()));
|
||||||
|
var locLive = new google.maps.LatLng(data.attributes.latitude, data.attributes.longitude);
|
||||||
|
map.setCenter(locLive);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<div id="container">
|
||||||
|
<div id="centered">
|
||||||
|
<p>Where tf is Jason?</p>
|
||||||
|
<h1>Nobody Knows</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<? endif; ?>
|