Resetting to HTML5 boilerplate

This commit is contained in:
Jason Williams 2022-11-19 09:43:15 -07:00
parent ec549579b4
commit 6d1d87e4f6
8 changed files with 672 additions and 142 deletions

263
www/css/main.css Normal file
View File

@ -0,0 +1,263 @@
/*! 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
========================================================================== */
/* ==========================================================================
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 Normal file
View File

@ -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;
}

BIN
www/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

0
www/img/.gitignore vendored Normal file
View File

View File

@ -1,150 +1,41 @@
<!DOCTYPE html>
<html>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<title>Welcome to JnF.me</title>
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
<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;}
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
#container {width: 100%; height: 100%; position: relative; left: -50%;}
#container.openjason {left: 0;}
#container.openflo {left: -100%;}
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
.frame {position: absolute; width: 50%; height: 100%; text-align: center;}
.info {position: absolute; width: 50%; font-size: 24px; height: 100%; min-height: 100%; overflow: hidden;}
.info.open {height: auto;}
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
#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;
}
});
}
});
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
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>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<div id="view">
<div id="container">
<div id="infojason" class="info jason">
<p>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.</p>
<ul>
<li><a href="http://www.jason.jnf.me/" class="outbound" data-track="/jason/website">Website</a></li>
<li><a href="http://www.jason.jnf.me/blog/" class="outbound" data-track="/jason/blog">Blog</a></li>
<li><a href="http://www.jason.jnf.me/contact/" class="outbound" data-track="/jason/contact">Contact Me</a></li>
</ul>
<ul>
<li><a href="http://twitter.com/JayWll" class="outbound" data-track="/jason/twitter">Twitter</a></li>
<li><a href="http://www.facebook.com/JayWll" class="outbound" data-track="/jason/facebook">Facebook</a></li>
<li><a href="http://instagram.com/jaywll" class="outbound" data-track="/jason/instagram">Instagram</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>
</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 id="frameflo" class="frame flo" data-person="flo">
<div class="closelink"><a href="#" class="closelink"></a></div>
<div class="profile">
<a href="#" class="openlink" data-person="flo"><img src="/img/profile-flo.jpg" /></a>
<h1><a href="#" class="openlink" data-person="flo">Flo de Guzman</a></h1>
</div>
</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>
<li><a href="http://www.asiancwgrl.jnf.me/" class="outbound" data-track="/flo/blog">Blog</a></li>
</ul>
<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>
</div>
</div>
</div>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<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>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
</html>

0
www/js/main.js Normal file
View File

24
www/js/plugins.js Normal file
View File

@ -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.

3
www/js/vendor/modernizr-3.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long