itsericwoodward-site-v2/src/support/root/index.html.ejs

348 lines
14 KiB
Plaintext
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie lt-ie10 lt-ie9" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie lt-ie10" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
<!--[if gt IE 9]> <html class="no-js ie" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <![endif]-->
<!--[if !IE]>--> <html class="no-js" lang="en" xmlns:fb="http://ogp.me/ns/fb#"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= site.title %></title>
<!-- Courtesy of https://www.favicon-generator.org/ -->
<link rel="apple-touch-icon" sizes="57x57" href="<%= site.base_uri %>/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="<%= site.base_uri %>/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<%= site.base_uri %>/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="<%= site.base_uri %>/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="<%= site.base_uri %>/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="<%= site.base_uri %>/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="<%= site.base_uri %>/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<%= site.base_uri %>/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<%= site.base_uri %>/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="<%= site.base_uri %>/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="<%= site.base_uri %>/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<%= site.base_uri %>/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%= site.base_uri %>/images/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#9aa8bc">
<meta name="msapplication-TileImage" content="<%= site.base_uri %>/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#9aa8bc">
<meta name="description" content="It's Eric Woodward's home page, the page of a geek, web developer, gamer, tinkerer, husband, father, and American cyborg, though not necessarily in that order.">
<meta name="author" content="<%= site.author.name %>">
<meta name="generator" content="Gulp"/>
<meta name="keywords" content="geek, web developer, gamer, tinkerer, husband, father, American cyborg">
<meta name="robots" content="">
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://itsericwoodward.com/" />
<meta property="og:site_name" content="<%= site.title %>" />
<meta property="og:title" content="<%= site.title %>" />
<meta property="og:image" content="<%= site.base_uri %>/images/eric-8bit.gif" />
<meta property="og:description" content="It's Eric Woodward's home page, the page of a geek, web developer, gamer, tinkerer, husband, father, and American cyborg, though not necessarily in that order." />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="<%= site.base_uri %>/" />
<meta name="twitter:title" content="<%= site.title %>" />
<meta name="twitter:description" content="It's Eric Woodward's home page, the page of a geek, web developer, gamer, tinkerer, husband, father, and American cyborg, though not necessarily in that order." />
<meta name="twitter:image:src" content="<%= site.base_uri %>/images/eric-8bit.gif" />
<meta name="twitter:creator" content="<%= site.author.twitter %>" />
<link rel="canonical" href="https://itsericwoodward.com/"/>
<link rel="authorization_endpoint" href="https://indieauth.com/auth"/>
<style>
@font-face {
font-family: 'exo_2';
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Regular-webfont.eot');
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Regular-webfont.woff') format('woff'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Regular-webfont.ttf') format('truetype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Regular-webfont.svg#exo_2') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'exo_2';
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Italic-webfont.eot');
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Italic-webfont.woff') format('woff'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Italic-webfont.ttf') format('truetype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Italic-webfont.svg#exo_2') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'exo_2';
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Bold-webfont.eot');
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Bold-webfont.woff') format('woff'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Bold-webfont.ttf') format('truetype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-Bold-webfont.svg#exo_2') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'exo_2';
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-BoldItalic-webfont.eot');
src: url('https://www.itsericwoodward.com/fonts/exo2/Exo2-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-BoldItalic-webfont.woff') format('woff'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-BoldItalic-webfont.ttf') format('truetype'),
url('https://www.itsericwoodward.com/fonts/exo2/Exo2-BoldItalic-webfont.svg#exo_2') format('svg');
font-weight: 600;
font-style: italic;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 16px;
height: 100%;
}
body {
background: #0d1852; /* Old browsers */
background: url('<%= site.uri %>/images/code-bg.jpg') top fixed;
color: #9aa8bc;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5em;
}
a {
border: 1px solid transparent;
border-bottom: 1px dashed #25baba;
color: #049c74;
font-weight: bold;
padding: 0 .2rem;
text-decoration: none;
-webkit-transition: .3s background-color, .3s color, .3s border-radius;
transition: .3s background-color, .3s color, .3s border-radius;
}
a:hover {
border: 1px solid #25baba;
background-color: #25baba;
border-radius: .3rem;
color: #040308;
text-decoration: none;
}
a:visited {
color: #094192;
}
a:hover:visited {
color: #040308;
}
blockquote {
border-left: 2px solid #04778f;
margin: 1em 0;
padding: 0 1em;
}
h1 {
color: #25baba;
font-size: 2em;
}
h2 {
color: #25baba;
font-size: 1.5em;
}
h3 {
color: #25baba;
font-size: 1.22em;
}
h4 {
color: #25baba;
font-size: 1.12em;
}
h5 {
color: #25baba;
font-size: 1.06em;
}
h6 {
color: #25baba;
font-size: 1em;
}
li {
margin-bottom: .6em;
}
ol, ul {
padding-left: 1.2em;
}
code, kbd, pre, samp {
font-size: .9em;
}
code, kbd {
color: #aaa;
}
.avatar {
border-bottom: 1px solid transparent;
color: #9aa8bc;
display: block;
margin: 1em;
text-align: center;
}
.avatar:visited {
color: #9aa8bc;
}
.avatar-fig {
margin: 1.5em 0 0.5em 0;
padding: 0;
}
.avatar-figcaption {
background: #040308;
background: rgba(4,3,8,.8);
border: 1px solid #9aa8bc;
border-radius: .5em;
-webkit-transition: .3s background-color, .3s border-color;
transition: .3s background-color, .3s border-color;
}
.avatar:hover .avatar-figcaption {
background: transparent;
border-color: transparent;
}
.avatar-img {
max-width: 75%;
width: 14em;
}
.container {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
min-height: 90vh;
}
.dataDiv {
background: #040308;
background: rgba(4,3,8,.8);
border: 1px solid #9aa8bc;
border-radius: .5em;
display: inline-block;
margin: 1em;
max-width: 40em;
padding: .5em;
}
.webring {
font-size: .9em;
text-align: center;
}
.webring-link {
border: 1px solid #726f6a;
border-radius: .3em;
display: inline-block;
line-height: .25em;
padding: .25em;
}
@media all and (min-width: 35em) {
html {
font-size: 18px;
}
}
@media all and (min-width: 40em) {
html {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container h-card vcard">
<a href="/"
class="avatar url fn u-url u-uid url icon-container"
rel="author">
<figure class="avatar-fig">
<img
class="photo u-photo avatar-img"
alt="It's Eric Woodward's avatar"
src="<%= site.uri %>/images/eric-8bit.gif"/>
<br />
<figcaption class="avatar-figcaption">It&apos;s <span class="p-name">Eric Woodward</span>!</figccaption>
</figure>
</a>
<div class="dataDiv">
<p class="p-role role p-note">
My name is <a class="p-name fn u-url u-uid url"
href="/">Eric Woodward</a>, and I am a
<span class="p-category category">geek</span>,
<span class="p-category category">coder</span>,
<span class="p-category category">gamer</span>,
<span class="p-category category">tinkerer</span>,
<span class="p-category category">husband</span>,
<span class="p-category category">father</span>,
<span class="p-category category">server admin</span>,
<span class="p-category category">web developer</span>,
and <span class="p-category category">American</span>
<span class="p-category category">cyborg</span>,
though not necessarily in that order.
</p>
<p>You can find out more
<a href="<%= site.uri %>/about.html">about me</a> by
checking out
<a rel="me" class="u-url url"
title="It's Eric Woodward's Website"
href="<%= site.uri %>/">my website</a>
or perusing
<a rel="me authn" class="u-url url"
title="It's Eric Woodward's Git Repos"
href="https://git.itsericwoodward.com/eric/">my code</a>.
If you want to reach me, you can send me an <a rel="me" class="u-url url u-email" title="&#69;&#109;&#97;&#105;&#108;"
href="&#109;&#x61;&#x69;&#108;&#116;&#x6f;&#58;&#x65;&#x72;&#x69;&#x63;&#64;&#x69;&#116;&#x73;&#x65;&#114;&#x69;&#x63;&#119;&#111;&#111;&#x64;&#x77;&#97;&#x72;&#100;&#x2e;&#99;&#111;&#109;">&#69;&#109;&#97;&#105;&#108;</a>,
<!-- (securely, if you want to use my
<a rel="pgpkey" type="application/pgp-keys" title="PGP Public Key" href="/files/public.aexpk">PGP Key</a>),-->
or you can find me on
<a rel="me" class="u-url url" title="itsericwoodward on LinkedIn"
href="https://www.linkedin.com/in/itsericwoodward">LinkedIn</a>,
<a rel="me authn" class="u-url url" title="ItsEricWoodward on GitHub"
href="https://github.com/ItsEricWoodward">GitHub</a>, or
<a rel="me" class="u-url url" title="EricPlaysGames on BoardGameGeek"
href="https://boardgamegeek.com/user/ericplaysgames">BoardGameGeek</a>.
Alternatively, you can grab my
<a href="http://h2vx.com/vcf/https%3A//itsericwoodward.com">vCard</a> and add me to your address book.
</p>
<p class="webring">
<a href="https://xn--sr8hvo.ws/1⃣🖲/previous" class="webring-link">←</a>
An IndieWeb Webring 🕸💍
<a href="https://xn--sr8hvo.ws/1⃣🖲/next" class="webring-link">→</a>
</p>
</div>
</div>
</body>
</html>