Design is looking close to final already, moving some things around

This commit is contained in:
Andrew Gioia 2020-07-07 17:03:24 -04:00
parent ec441924c2
commit 6fdd947442
22 changed files with 390 additions and 280 deletions

3
dist/css/app.css vendored
View File

@ -1,3 +0,0 @@
body {
background: #f3f3f1;
}

BIN
dist/icons/andrew.eot vendored Normal file

Binary file not shown.

29
dist/icons/andrew.svg vendored Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<json>
<![CDATA[
{
"fontFamily": "andrew",
"majorVersion": 1,
"minorVersion": 0,
"fontURL": "https://andrewgioia.com",
"version": "Version 1.0",
"fontId": "andrew",
"psName": "andrew",
"subFamily": "Regular",
"fullName": "andrew",
"description": "Font generated by IcoMoon."
}
]]>
</json>
</metadata>
<defs>
<font id="andrew" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="github" data-tags="Github" d="M339.072 116.651c5.632 1.621 15.147-0.427 14.507-7.893-3.755-8.448-19.499-8.064-21.077 1.707 1.323 2.731 3.627 5.12 6.571 6.187v0zM386.219 120.704c-16.469-2.475-12.587 2.347-16.512-8.789 4.779-8.192 17.707-4.821 21.035 3.157l-4.523 5.632zM297.685 122.624v0c-3.029-1.408-5.035-5.333-2.603-8.192 3.84-6.955 18.133-9.003 19.584 0.597-2.091 6.827-10.581 10.112-16.981 7.595zM270.251 143.958l-6.101-0.469c-7.979-7.808 8.448-22.997 15.275-13.696-0.469 10.112 1.237 4.779-9.173 14.165zM242.645 171.392v0c-8.619-5.589 2.56-21.333 10.709-15.573 4.053 6.869-2.645 17.408-10.709 15.573zM221.739 195.414v0c-2.517-6.272 2.133-12.416 8.192-14.037l4.565 1.707c2.347 7.595-5.163 15.189-12.757 12.331zM208.171 212.48c-3.371 2.048-5.931-1.579-7.851-3.84 2.773-5.333 10.752-9.643 14.763-3.157-1.237 3.243-3.328 6.272-6.912 6.997zM512 896c-108.971-7.168-221.653-34.773-303.744-111.147-18.688-11.861-31.189-31.189-48.256-45.141-70.955-76.117-115.84-176-125.44-279.595-1.749-23.253-3.925-46.763-1.536-70.101 2.688-61.952 18.048-123.307 44.331-179.456 27.392-58.752 67.029-111.659 115.371-154.88 47.616-42.539 103.808-75.563 164.267-96.171 8.491-3.285 18.603-2.901 26.496 1.877 6.571 4.437 9.941 12.459 9.941 20.224-0.128 29.696-0.683 59.392-0.768 89.088-31.189-6.613-64.299-8.96-95.275-0.043-28.16 8.064-53.803 27.605-65.621 54.827-10.197 25.899-24.789 51.243-47.531 68.011-7.723 4.949-15.701 9.941-21.675 16.981-1.792 2.176-3.243 4.693-3.584 7.509 0.768 4.693 5.803 6.528 9.856 7.552 17.493 3.627 35.456-2.389 50.304-11.52 15.445-9.984 28.288-23.979 37.461-39.936 12.843-21.205 32.512-39.253 56.832-45.739 26.923-7.68 55.765-1.92 80.853 9.088 3.328 23.808 12.331 48.043 30.635 64.427-21.931 1.877-43.605 6.144-64.853 11.733-27.947 7.68-55.083 19.456-78.251 37.077-20.736 15.915-37.888 36.523-49.579 59.947-16.341 32.043-23.381 68.053-25.429 103.723-1.195 15.488-1.365 31.104 0.469 46.549 3.797 39.637 21.163 77.653 48.256 106.752-15.189 39.509-11.477 84.139 3.072 123.221 0.896 1.493 1.109 4.395 3.328 4.352 15.787 1.963 31.659-1.579 46.635-6.315 30.037-9.685 57.301-25.984 83.541-43.136 59.52 15.787 122.155 20.053 183.168 11.52 19.456-2.432 38.571-7.040 57.6-11.392 23.467 15.36 47.744 29.909 74.112 39.851 18.219 6.4 37.845 12.416 57.301 9.003 5.589-12.971 9.259-26.837 11.776-40.747 4.608-28.544 3.883-58.837-6.784-86.059 4.523-5.675 9.472-11.093 13.696-17.067 21.248-28.757 33.451-63.957 35.2-99.669 1.237-33.792-1.408-67.925-10.368-100.651-8.149-29.568-22.357-57.856-43.477-80.299-21.333-23.125-49.28-39.253-78.72-49.792-27.819-9.813-57.003-15.189-86.272-18.475 24.576-21.931 32.555-56.661 32.512-88.405-0.085-43.947-0.085-87.936-0.384-131.883-0.384-9.557 5.163-19.712 14.635-22.656 10.496-4.139 21.547 0.128 31.445 3.883 33.152 12.245 65.067 28.075 94.72 47.317 78.848 50.56 142.165 124.757 179.755 210.517 23.296 52.907 36.651 110.080 39.808 167.765 0.299 18.219 0.256 36.437-0.128 54.699-1.707 19.285-3.541 38.528-7.211 57.557-11.477 63.061-35.925 123.733-71.296 177.195-29.696 40.661-60.075 82.261-102.357 111.232h-0.597c-80.811 72.235-192.043 103.253-298.24 106.795z" />
<glyph unicode="&#xe901;" glyph-name="mastodon" data-tags="Mastodon" d="M507.52 896h10.88c36.395-0.555 72.789-1.835 109.056-4.907 34.475-2.859 68.864-7.040 102.827-13.739 26.667-5.376 53.205-12.16 78.464-22.528 17.621-6.955 33.152-18.176 47.403-30.507 23.424-20.48 42.752-45.483 57.344-72.96 20.565-38.656 33.664-81.792 35.413-125.44 7.467-184.363 0.085-231.211-14.251-285.909-3.328-12.8-9.984-30.037-16.981-41.216-14.208-22.528-34.176-40.917-55.68-56.448-36.267-25.813-77.909-43.776-121.131-54.272-16.256-3.968-32.853-6.656-49.493-8.448-40.491-4.821-81.109-9.173-121.899-10.496-38.059-1.365-76.203 0.811-114.133 4.565-43.904 4.48-87.637 11.136-130.731 20.864 0.171-24.491 3.371-49.579 13.995-71.936 6.869-14.507 17.152-27.392 29.952-37.077 20.992-15.872 46.976-23.381 72.661-27.435 16.939-2.731 34.048-4.011 51.2-4.821 20.821-1.109 41.728-1.707 62.592-0.384 40.789 2.475 81.408 9.131 120.661 20.523 1.195-25.771 2.347-51.499 3.541-77.269-26.283-12.715-54.528-20.821-82.987-27.051-34.859-7.424-70.485-11.008-106.112-11.776h-20.224c-51.627 0.939-103.125 7.851-153.344 19.84-16.043 3.84-32.128 7.851-47.573 13.824-27.477 10.325-53.205 25.472-75.136 44.971-23.637 20.907-42.752 46.549-57.557 74.325-22.741 42.709-35.968 89.771-44.587 137.216-13.995 78.293-16 158.123-16.597 237.525v82.048c0.427 7.936 0.128 15.872 0.299 23.808 0.256 44.203 6.997 88.747 23.125 130.091 11.648 29.995 28.373 58.112 49.835 82.133 16.683 18.517 35.925 35.072 58.027 46.805 14.421 6.955 29.611 12.203 44.971 16.725 47.915 13.739 97.536 20.139 147.072 24.448 36.267 2.987 72.704 4.395 109.099 4.907zM333.696 731.392c-20.139-5.504-38.827-16.128-53.973-30.507-18.219-16.939-30.933-39.253-38.187-62.933-6.827-22.059-9.173-45.227-9.088-68.181 0.043-81.451 0-162.901 0.043-244.352 32.555 0 65.109-0.043 97.664 0.043 0 80.939-0.043 161.92 0.043 242.859 0.384 16.427 2.901 33.536 11.733 47.701 6.357 10.283 16.555 17.92 28.075 21.461 12.245 3.755 25.344 4.053 37.973 2.304 11.904-1.792 23.595-6.571 32.427-14.891 9.515-8.747 15.445-20.693 18.901-33.024 4.053-14.507 5.077-29.696 4.992-44.672 0-42.624-0.043-85.205 0-127.829 32.384-0.043 64.725 0 97.067 0 0.043 43.563 0 87.125 0.043 130.688 0.043 16.683 1.579 33.664 7.424 49.451 4.395 11.861 11.776 22.912 22.315 30.165 11.52 7.979 25.771 11.051 39.595 11.136 13.056 0.128 26.624-2.133 37.76-9.301 9.6-6.059 16.555-15.659 20.565-26.155 5.376-13.867 6.571-28.885 6.485-43.648 0-78.763-0.043-157.525 0-236.288 32.555 0 65.109 0.043 97.664-0.043 0 81.451 0 162.901 0 244.352 0 11.691-0.512 23.381-2.005 34.987-2.987 23.467-9.813 46.72-21.973 67.115-12.672 21.504-31.531 39.253-53.76 50.517-25.515 12.928-54.955 16.384-83.2 13.696-16.768-1.664-33.451-6.016-48.469-13.781-20.949-10.709-38.187-28.075-49.835-48.384-7.040-11.947-14.336-23.765-21.205-35.797-0.64 1.92-1.835 3.541-2.859 5.248-6.784 11.435-13.611 22.827-20.437 34.261-12.032 19.541-29.355 35.968-50.133 45.909-19.2 9.387-40.747 13.227-62.037 13.355-14.677 0.085-29.44-1.451-43.605-5.461z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
dist/icons/andrew.ttf vendored Normal file

Binary file not shown.

BIN
dist/icons/andrew.woff vendored Normal file

Binary file not shown.

BIN
dist/icons/andrew.woff2 vendored Normal file

Binary file not shown.

25
dist/index.html vendored
View File

@ -3,25 +3,32 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="normalize.css" rel="stylesheet" type="text/css" media="screen"> <link href="site.css" rel="stylesheet" type="text/css" media="screen">
<link href="theme.css" rel="stylesheet" type="text/css" media="screen">
<title>Andrew Gioia</title> <title>Andrew Gioia</title>
<meta name="description" content="Hi, Im Andrew Gioia, a Pittsburgh-based designer and small business owner. I co-founded TeachBoost in 2012 to help teachers become even more amazing."> <meta name="description" content="Hi, Im Andrew Gioia, a Pittsburgh-based designer and small business owner. I co-founded TeachBoost in 2012 to help teachers become even more amazing.">
<meta name="robots" content="index, follow"> <meta name="robots" content="index, follow">
</head> </head>
<body> <body>
<header>
<object id="family" data="img/gioias.svg" type="image/svg+xml" height="64px">
<img src="img/gioias.png" alt="Gioia family face icons" height="64" />
</object>
</header>
<main> <main>
<h1> <h1>
Andrew Gioia,<br /> dad, designer, &amp; co-founder at TeachBoost, living &amp; tinkering in Pittsburgh. <span class="who">
Andrew Gioia,
</span>
<span class="what">
dad, designer, &amp; co-founder at <a href="https://teachboost.com" target="blank">TeachBoost</a>,
</span>
<span class="where">
living &amp; tinkering in Pittsburgh.
</span>
</h1> </h1>
</main> </main>
<footer> <footer>
Footer <a href="https://github.com/andrewgioia" target="blank">
<i class="icon icon-github"></i>
</a>
<a href="https://gioia.social/@andrew" target="blank">
<i class="icon icon-mastodon"></i>
</a>
</footer> </footer>
</body> </body>
</html> </html>

100
dist/interaction.js vendored
View File

@ -1,100 +0,0 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/interaction.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/interaction.js":
/*!****************************!*\
!*** ./src/interaction.js ***!
\****************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("\n\n//# sourceURL=webpack:///./src/interaction.js?");
/***/ })
/******/ });

View File

@ -1,25 +1,24 @@
@charset "UTF-8";
/*! AndrewGioia.com style definitions v7.0.1 */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document /* Document
========================================================================== */ ========================================================================== */
/** /**
* 1. Correct the line height in all browsers. * 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS. * 2. Prevent adjustments of font size after orientation changes in iOS.
*/ */
html { html {
line-height: 1.15; /* 1 */ line-height: 1.15;
-webkit-text-size-adjust: 100%; /* 2 */ /* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
} }
/* Sections /* Sections
========================================================================== */ ========================================================================== */
/** /**
* Remove the margin in all browsers. * Remove the margin in all browsers.
*/ */
body { body {
margin: 0; margin: 0;
} }
@ -27,7 +26,6 @@ body {
/** /**
* Render the `main` element consistently in IE. * Render the `main` element consistently in IE.
*/ */
main { main {
display: block; display: block;
} }
@ -36,7 +34,6 @@ main {
* Correct the font size and margin on `h1` elements within `section` and * Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari. * `article` contexts in Chrome, Firefox, and Safari.
*/ */
h1 { h1 {
font-size: 2em; font-size: 2em;
margin: 0.67em 0; margin: 0.67em 0;
@ -44,35 +41,35 @@ h1 {
/* Grouping content /* Grouping content
========================================================================== */ ========================================================================== */
/** /**
* 1. Add the correct box sizing in Firefox. * 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE. * 2. Show the overflow in Edge and IE.
*/ */
hr { hr {
box-sizing: content-box; /* 1 */ box-sizing: content-box;
height: 0; /* 1 */ /* 1 */
overflow: visible; /* 2 */ height: 0;
/* 1 */
overflow: visible;
/* 2 */
} }
/** /**
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
pre { pre {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace;
font-size: 1em; /* 2 */ /* 1 */
font-size: 1em;
/* 2 */
} }
/* Text-level semantics /* Text-level semantics
========================================================================== */ ========================================================================== */
/** /**
* Remove the gray background on active links in IE 10. * Remove the gray background on active links in IE 10.
*/ */
a { a {
background-color: transparent; background-color: transparent;
} }
@ -81,17 +78,18 @@ a {
* 1. Remove the bottom border in Chrome 57- * 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/ */
abbr[title] { abbr[title] {
border-bottom: none; /* 1 */ border-bottom: none;
text-decoration: underline; /* 2 */ /* 1 */
text-decoration: underline dotted; /* 2 */ text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
} }
/** /**
* Add the correct font weight in Chrome, Edge, and Safari. * Add the correct font weight in Chrome, Edge, and Safari.
*/ */
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
@ -101,18 +99,18 @@ strong {
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
code, code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace;
font-size: 1em; /* 2 */ /* 1 */
font-size: 1em;
/* 2 */
} }
/** /**
* Add the correct font size in all browsers. * Add the correct font size in all browsers.
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
@ -121,7 +119,6 @@ small {
* Prevent `sub` and `sup` elements from affecting the line height in * Prevent `sub` and `sup` elements from affecting the line height in
* all browsers. * all browsers.
*/ */
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
@ -140,41 +137,41 @@ sup {
/* Embedded content /* Embedded content
========================================================================== */ ========================================================================== */
/** /**
* Remove the border on images inside links in IE 10. * Remove the border on images inside links in IE 10.
*/ */
img { img {
border-style: none; border-style: none;
} }
/* Forms /* Forms
========================================================================== */ ========================================================================== */
/** /**
* 1. Change the font styles in all browsers. * 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari. * 2. Remove the margin in Firefox and Safari.
*/ */
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */ font-family: inherit;
font-size: 100%; /* 1 */ /* 1 */
line-height: 1.15; /* 1 */ font-size: 100%;
margin: 0; /* 2 */ /* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
} }
/** /**
* Show the overflow in IE. * Show the overflow in IE.
* 1. Show the overflow in Edge. * 1. Show the overflow in Edge.
*/ */
button, button,
input { /* 1 */ input {
/* 1 */
overflow: visible; overflow: visible;
} }
@ -182,31 +179,29 @@ input { /* 1 */
* Remove the inheritance of text transform in Edge, Firefox, and IE. * Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox. * 1. Remove the inheritance of text transform in Firefox.
*/ */
button, button,
select { /* 1 */ select {
/* 1 */
text-transform: none; text-transform: none;
} }
/** /**
* Correct the inability to style clickable types in iOS and Safari. * Correct the inability to style clickable types in iOS and Safari.
*/ */
button, button,
[type="button"], [type=button],
[type="reset"], [type=reset],
[type="submit"] { [type=submit] {
-webkit-appearance: button; -webkit-appearance: button;
} }
/** /**
* Remove the inner border and padding in Firefox. * Remove the inner border and padding in Firefox.
*/ */
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type=button]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type=reset]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type=submit]::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
@ -214,18 +209,16 @@ button::-moz-focus-inner,
/** /**
* Restore the focus styles unset by the previous rule. * Restore the focus styles unset by the previous rule.
*/ */
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type=button]:-moz-focusring,
[type="reset"]:-moz-focusring, [type=reset]:-moz-focusring,
[type="submit"]:-moz-focusring { [type=submit]:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
/** /**
* Correct the padding in Firefox. * Correct the padding in Firefox.
*/ */
fieldset { fieldset {
padding: 0.35em 0.75em 0.625em; padding: 0.35em 0.75em 0.625em;
} }
@ -236,20 +229,24 @@ fieldset {
* 3. Remove the padding so developers are not caught out when they zero out * 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers. * `fieldset` elements in all browsers.
*/ */
legend { legend {
box-sizing: border-box; /* 1 */ box-sizing: border-box;
color: inherit; /* 2 */ /* 1 */
display: table; /* 1 */ color: inherit;
max-width: 100%; /* 1 */ /* 2 */
padding: 0; /* 3 */ display: table;
white-space: normal; /* 1 */ /* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
} }
/** /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ */
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
@ -257,7 +254,6 @@ progress {
/** /**
* Remove the default vertical scrollbar in IE 10+. * Remove the default vertical scrollbar in IE 10+.
*/ */
textarea { textarea {
overflow: auto; overflow: auto;
} }
@ -266,19 +262,19 @@ textarea {
* 1. Add the correct box sizing in IE 10. * 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10. * 2. Remove the padding in IE 10.
*/ */
[type=checkbox],
[type="checkbox"], [type=radio] {
[type="radio"] { box-sizing: border-box;
box-sizing: border-box; /* 1 */ /* 1 */
padding: 0; /* 2 */ padding: 0;
/* 2 */
} }
/** /**
* Correct the cursor style of increment and decrement buttons in Chrome. * Correct the cursor style of increment and decrement buttons in Chrome.
*/ */
[type=number]::-webkit-inner-spin-button,
[type="number"]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
[type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -286,17 +282,17 @@ textarea {
* 1. Correct the odd appearance in Chrome and Safari. * 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari. * 2. Correct the outline style in Safari.
*/ */
[type=search] {
[type="search"] { -webkit-appearance: textfield;
-webkit-appearance: textfield; /* 1 */ /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px;
/* 2 */
} }
/** /**
* Remove the inner padding in Chrome and Safari on macOS. * Remove the inner padding in Chrome and Safari on macOS.
*/ */
[type=search]::-webkit-search-decoration {
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -304,19 +300,18 @@ textarea {
* 1. Correct the inability to style clickable types in iOS and Safari. * 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari. * 2. Change font properties to `inherit` in Safari.
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button;
font: inherit; /* 2 */ /* 1 */
font: inherit;
/* 2 */
} }
/* Interactive /* Interactive
========================================================================== */ ========================================================================== */
/* /*
* Add the correct display in Edge, IE 10+, and Firefox. * Add the correct display in Edge, IE 10+, and Firefox.
*/ */
details { details {
display: block; display: block;
} }
@ -324,18 +319,15 @@ details {
/* /*
* Add the correct display in all browsers. * Add the correct display in all browsers.
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* Misc /* Misc
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 10+. * Add the correct display in IE 10+.
*/ */
template { template {
display: none; display: none;
} }
@ -343,7 +335,100 @@ template {
/** /**
* Add the correct display in IE 10. * Add the correct display in IE 10.
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }
body {
background: #f3f3f1;
display: flex;
flex-direction: column;
font-size: 16px;
height: 100vh;
justify-content: space-between;
overflow: hidden;
width: 100vw;
}
main {
border-top: 1vmin solid #fff;
padding: 6vmin;
}
main h1 {
color: #002953;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 4rem;
font-size: 10vmin;
font-size: max(10vmin, 24px);
font-weight: 700;
line-height: 1.15;
margin: 0;
}
main h1 span.who {
display: block;
font-weight: 900;
}
main h1 a {
color: #0069ff;
text-decoration: none;
}
footer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: start;
padding: 6vmin;
}
footer a {
font-size: 3rem;
font-size: 5vmin;
font-size: max(5vmin, 32px);
margin-right: 2vmin;
text-decoration: none;
}
footer a .icon-github {
color: #24292e;
}
footer a .icon-mastodon {
color: #3088d4;
}
@font-face {
font-family: "andrew";
src: url("icons/andrew.eot?9vzntv");
src: url("icons/andrew.eot?9vzntv#iefix") format("embedded-opentype"), url("icons/andrew.woff2?9vzntv") format("woff2"), url("icons/andrew.ttf?9vzntv") format("truetype"), url("icons/andrew.woff?9vzntv") format("woff"), url("icons/andrew.svg?9vzntv#andrew") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^=icon-], [class*=" icon-"] {
font-family: "andrew" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-github:before {
content: "";
}
.icon-mastodon:before {
content: "";
}
@media only screen and (min-width: 1280px) {
main {
padding-right: 20vmin;
}
}
@media only screen and (min-width: 1440px) {
main {
padding-right: 32vmin;
}
}

29
dist/theme.css vendored
View File

@ -1,29 +0,0 @@
body {
background: #f3f3f1;
font-size: 16px;
}
h1 {
color: #002953;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: max(5vw, 36px);
font-weight: 900;
line-height: 1.15;
margin: 2vw 33vw 2vw 5vw;
}
header {
background: #fff;
padding: 1vh 5vw 0;
}
header object {
width: 12vw;
}
@media only screen and (max-width: 640px) {
h1 {
margin: 5vw 5vw 0;
}
}
/*# sourceMappingURL=theme.css.map */

1
dist/theme.css.map vendored
View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["../src/theme.scss"],"names":[],"mappings":"AAUA;EACI,YAXgB;EAYhB,WATgB;;;AAYpB;EACI,OAfgB;EAgBhB,aAfgB;EAgBhB;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AAKR;EACI;IACI","file":"theme.css"}

View File

@ -1,7 +1,7 @@
{ {
"name": "andrewgioia.com", "name": "andrewgioia.com",
"version": "7.0.0", "version": "7.0.0",
"description": "Online landing page for Andrew Gioia, co-founder of TeachBoost.", "description": "Internet homepage for Andrew Gioia, co-founder of TeachBoost.",
"main": "public/index.html", "main": "public/index.html",
"private": true, "private": true,
"dependencies": { "dependencies": {
@ -12,7 +12,8 @@
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "sass src/theme.scss dist/theme.css && cp src/index.html dist/index.html && cp -R src/img dist" "dev": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist",
"prod": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -20,9 +21,9 @@
}, },
"keywords": [], "keywords": [],
"author": "Andrew Gioia", "author": "Andrew Gioia",
"license": "ISC", "license": "CC-BY-SA-4.0",
"bugs": { "bugs": {
"url": "https://github.com/andrewgioia/home/issues" "url": "https://github.com/andrewgioia/home/issues"
}, },
"homepage": "https://github.com/andrewgioia/home#readme" "homepage": "https://andrewgioia.com"
} }

BIN
src/icons/andrew.eot Normal file

Binary file not shown.

29
src/icons/andrew.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<json>
<![CDATA[
{
"fontFamily": "andrew",
"majorVersion": 1,
"minorVersion": 0,
"fontURL": "https://andrewgioia.com",
"version": "Version 1.0",
"fontId": "andrew",
"psName": "andrew",
"subFamily": "Regular",
"fullName": "andrew",
"description": "Font generated by IcoMoon."
}
]]>
</json>
</metadata>
<defs>
<font id="andrew" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="github" data-tags="Github" d="M339.072 116.651c5.632 1.621 15.147-0.427 14.507-7.893-3.755-8.448-19.499-8.064-21.077 1.707 1.323 2.731 3.627 5.12 6.571 6.187v0zM386.219 120.704c-16.469-2.475-12.587 2.347-16.512-8.789 4.779-8.192 17.707-4.821 21.035 3.157l-4.523 5.632zM297.685 122.624v0c-3.029-1.408-5.035-5.333-2.603-8.192 3.84-6.955 18.133-9.003 19.584 0.597-2.091 6.827-10.581 10.112-16.981 7.595zM270.251 143.958l-6.101-0.469c-7.979-7.808 8.448-22.997 15.275-13.696-0.469 10.112 1.237 4.779-9.173 14.165zM242.645 171.392v0c-8.619-5.589 2.56-21.333 10.709-15.573 4.053 6.869-2.645 17.408-10.709 15.573zM221.739 195.414v0c-2.517-6.272 2.133-12.416 8.192-14.037l4.565 1.707c2.347 7.595-5.163 15.189-12.757 12.331zM208.171 212.48c-3.371 2.048-5.931-1.579-7.851-3.84 2.773-5.333 10.752-9.643 14.763-3.157-1.237 3.243-3.328 6.272-6.912 6.997zM512 896c-108.971-7.168-221.653-34.773-303.744-111.147-18.688-11.861-31.189-31.189-48.256-45.141-70.955-76.117-115.84-176-125.44-279.595-1.749-23.253-3.925-46.763-1.536-70.101 2.688-61.952 18.048-123.307 44.331-179.456 27.392-58.752 67.029-111.659 115.371-154.88 47.616-42.539 103.808-75.563 164.267-96.171 8.491-3.285 18.603-2.901 26.496 1.877 6.571 4.437 9.941 12.459 9.941 20.224-0.128 29.696-0.683 59.392-0.768 89.088-31.189-6.613-64.299-8.96-95.275-0.043-28.16 8.064-53.803 27.605-65.621 54.827-10.197 25.899-24.789 51.243-47.531 68.011-7.723 4.949-15.701 9.941-21.675 16.981-1.792 2.176-3.243 4.693-3.584 7.509 0.768 4.693 5.803 6.528 9.856 7.552 17.493 3.627 35.456-2.389 50.304-11.52 15.445-9.984 28.288-23.979 37.461-39.936 12.843-21.205 32.512-39.253 56.832-45.739 26.923-7.68 55.765-1.92 80.853 9.088 3.328 23.808 12.331 48.043 30.635 64.427-21.931 1.877-43.605 6.144-64.853 11.733-27.947 7.68-55.083 19.456-78.251 37.077-20.736 15.915-37.888 36.523-49.579 59.947-16.341 32.043-23.381 68.053-25.429 103.723-1.195 15.488-1.365 31.104 0.469 46.549 3.797 39.637 21.163 77.653 48.256 106.752-15.189 39.509-11.477 84.139 3.072 123.221 0.896 1.493 1.109 4.395 3.328 4.352 15.787 1.963 31.659-1.579 46.635-6.315 30.037-9.685 57.301-25.984 83.541-43.136 59.52 15.787 122.155 20.053 183.168 11.52 19.456-2.432 38.571-7.040 57.6-11.392 23.467 15.36 47.744 29.909 74.112 39.851 18.219 6.4 37.845 12.416 57.301 9.003 5.589-12.971 9.259-26.837 11.776-40.747 4.608-28.544 3.883-58.837-6.784-86.059 4.523-5.675 9.472-11.093 13.696-17.067 21.248-28.757 33.451-63.957 35.2-99.669 1.237-33.792-1.408-67.925-10.368-100.651-8.149-29.568-22.357-57.856-43.477-80.299-21.333-23.125-49.28-39.253-78.72-49.792-27.819-9.813-57.003-15.189-86.272-18.475 24.576-21.931 32.555-56.661 32.512-88.405-0.085-43.947-0.085-87.936-0.384-131.883-0.384-9.557 5.163-19.712 14.635-22.656 10.496-4.139 21.547 0.128 31.445 3.883 33.152 12.245 65.067 28.075 94.72 47.317 78.848 50.56 142.165 124.757 179.755 210.517 23.296 52.907 36.651 110.080 39.808 167.765 0.299 18.219 0.256 36.437-0.128 54.699-1.707 19.285-3.541 38.528-7.211 57.557-11.477 63.061-35.925 123.733-71.296 177.195-29.696 40.661-60.075 82.261-102.357 111.232h-0.597c-80.811 72.235-192.043 103.253-298.24 106.795z" />
<glyph unicode="&#xe901;" glyph-name="mastodon" data-tags="Mastodon" d="M507.52 896h10.88c36.395-0.555 72.789-1.835 109.056-4.907 34.475-2.859 68.864-7.040 102.827-13.739 26.667-5.376 53.205-12.16 78.464-22.528 17.621-6.955 33.152-18.176 47.403-30.507 23.424-20.48 42.752-45.483 57.344-72.96 20.565-38.656 33.664-81.792 35.413-125.44 7.467-184.363 0.085-231.211-14.251-285.909-3.328-12.8-9.984-30.037-16.981-41.216-14.208-22.528-34.176-40.917-55.68-56.448-36.267-25.813-77.909-43.776-121.131-54.272-16.256-3.968-32.853-6.656-49.493-8.448-40.491-4.821-81.109-9.173-121.899-10.496-38.059-1.365-76.203 0.811-114.133 4.565-43.904 4.48-87.637 11.136-130.731 20.864 0.171-24.491 3.371-49.579 13.995-71.936 6.869-14.507 17.152-27.392 29.952-37.077 20.992-15.872 46.976-23.381 72.661-27.435 16.939-2.731 34.048-4.011 51.2-4.821 20.821-1.109 41.728-1.707 62.592-0.384 40.789 2.475 81.408 9.131 120.661 20.523 1.195-25.771 2.347-51.499 3.541-77.269-26.283-12.715-54.528-20.821-82.987-27.051-34.859-7.424-70.485-11.008-106.112-11.776h-20.224c-51.627 0.939-103.125 7.851-153.344 19.84-16.043 3.84-32.128 7.851-47.573 13.824-27.477 10.325-53.205 25.472-75.136 44.971-23.637 20.907-42.752 46.549-57.557 74.325-22.741 42.709-35.968 89.771-44.587 137.216-13.995 78.293-16 158.123-16.597 237.525v82.048c0.427 7.936 0.128 15.872 0.299 23.808 0.256 44.203 6.997 88.747 23.125 130.091 11.648 29.995 28.373 58.112 49.835 82.133 16.683 18.517 35.925 35.072 58.027 46.805 14.421 6.955 29.611 12.203 44.971 16.725 47.915 13.739 97.536 20.139 147.072 24.448 36.267 2.987 72.704 4.395 109.099 4.907zM333.696 731.392c-20.139-5.504-38.827-16.128-53.973-30.507-18.219-16.939-30.933-39.253-38.187-62.933-6.827-22.059-9.173-45.227-9.088-68.181 0.043-81.451 0-162.901 0.043-244.352 32.555 0 65.109-0.043 97.664 0.043 0 80.939-0.043 161.92 0.043 242.859 0.384 16.427 2.901 33.536 11.733 47.701 6.357 10.283 16.555 17.92 28.075 21.461 12.245 3.755 25.344 4.053 37.973 2.304 11.904-1.792 23.595-6.571 32.427-14.891 9.515-8.747 15.445-20.693 18.901-33.024 4.053-14.507 5.077-29.696 4.992-44.672 0-42.624-0.043-85.205 0-127.829 32.384-0.043 64.725 0 97.067 0 0.043 43.563 0 87.125 0.043 130.688 0.043 16.683 1.579 33.664 7.424 49.451 4.395 11.861 11.776 22.912 22.315 30.165 11.52 7.979 25.771 11.051 39.595 11.136 13.056 0.128 26.624-2.133 37.76-9.301 9.6-6.059 16.555-15.659 20.565-26.155 5.376-13.867 6.571-28.885 6.485-43.648 0-78.763-0.043-157.525 0-236.288 32.555 0 65.109 0.043 97.664-0.043 0 81.451 0 162.901 0 244.352 0 11.691-0.512 23.381-2.005 34.987-2.987 23.467-9.813 46.72-21.973 67.115-12.672 21.504-31.531 39.253-53.76 50.517-25.515 12.928-54.955 16.384-83.2 13.696-16.768-1.664-33.451-6.016-48.469-13.781-20.949-10.709-38.187-28.075-49.835-48.384-7.040-11.947-14.336-23.765-21.205-35.797-0.64 1.92-1.835 3.541-2.859 5.248-6.784 11.435-13.611 22.827-20.437 34.261-12.032 19.541-29.355 35.968-50.133 45.909-19.2 9.387-40.747 13.227-62.037 13.355-14.677 0.085-29.44-1.451-43.605-5.461z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/icons/andrew.ttf Normal file

Binary file not shown.

BIN
src/icons/andrew.woff Normal file

Binary file not shown.

BIN
src/icons/andrew.woff2 Normal file

Binary file not shown.

View File

@ -3,25 +3,32 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="normalize.css" rel="stylesheet" type="text/css" media="screen"> <link href="site.css" rel="stylesheet" type="text/css" media="screen">
<link href="theme.css" rel="stylesheet" type="text/css" media="screen">
<title>Andrew Gioia</title> <title>Andrew Gioia</title>
<meta name="description" content="Hi, Im Andrew Gioia, a Pittsburgh-based designer and small business owner. I co-founded TeachBoost in 2012 to help teachers become even more amazing."> <meta name="description" content="Hi, Im Andrew Gioia, a Pittsburgh-based designer and small business owner. I co-founded TeachBoost in 2012 to help teachers become even more amazing.">
<meta name="robots" content="index, follow"> <meta name="robots" content="index, follow">
</head> </head>
<body> <body>
<header>
<object id="family" data="img/gioias.svg" type="image/svg+xml" height="64px">
<img src="img/gioias.png" alt="Gioia family face icons" height="64" />
</object>
</header>
<main> <main>
<h1> <h1>
Andrew Gioia,<br /> dad, designer, &amp; co-founder at TeachBoost, living &amp; tinkering in Pittsburgh. <span class="who">
Andrew Gioia,
</span>
<span class="what">
dad, designer, &amp; co-founder at <a href="https://teachboost.com" target="blank">TeachBoost</a>,
</span>
<span class="where">
living &amp; tinkering in Pittsburgh.
</span>
</h1> </h1>
</main> </main>
<footer> <footer>
Footer <a href="https://github.com/andrewgioia" target="blank">
<i class="icon icon-github"></i>
</a>
<a href="https://gioia.social/@andrew" target="blank">
<i class="icon icon-mastodon"></i>
</a>
</footer> </footer>
</body> </body>
</html> </html>

View File

33
src/scss/_icons.scss Normal file
View File

@ -0,0 +1,33 @@
@font-face {
font-family: 'andrew';
src: url('icons/andrew.eot?9vzntv');
src: url('icons/andrew.eot?9vzntv#iefix') format('embedded-opentype'),
url('icons/andrew.woff2?9vzntv') format('woff2'),
url('icons/andrew.ttf?9vzntv') format('truetype'),
url('icons/andrew.woff?9vzntv') format('woff'),
url('icons/andrew.svg?9vzntv#andrew') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'andrew' !important; // !i to prevent issues with browser extensions that change fonts
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
// better rendering
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-github:before {
content: "\e900";
}
.icon-mastodon:before {
content: "\e901";
}

91
src/scss/theme.scss Normal file
View File

@ -0,0 +1,91 @@
/*! AndrewGioia.com style definitions v7.0.1 */
// normalize
@import "../../node_modules/normalize.css/normalize";
// our stuff
$bg-light: #f3f3f1;
$font-color-navy: #002953;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
$font-size-base: 16px;
$screen-mobile: 640px;
$screen-tablet: 768px;
$screen-laptop: 1024px;
$screen-display: 1280px;
$screen-full: 1440px;
body {
background: $bg-light;
display: flex;
flex-direction: column;
font-size: $font-size-base;
height: 100vh;
justify-content: space-between;
overflow: hidden;
width: 100vw;
}
main {
border-top: 1vmin solid #fff;
padding: 6vmin;
h1 {
color: $font-color-navy;
font-family: $font-family-base;
font-size: 4rem; // basic fallback
font-size: 10vmin; // premium fallback
font-size: max(10vmin, 24px);
font-weight: 700;
line-height: 1.15;
margin: 0;
span.who {
display: block;
font-weight: 900;
}
a {
color: #0069ff;
text-decoration: none;
}
}
}
footer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: start;
padding: 6vmin;
a {
font-size: 3rem; // basic fallback
font-size: 5vmin; // premium fallback
font-size: max(5vmin, 32px);
margin-right: 2vmin;
text-decoration: none;
.icon-github {
color: #24292e;
}
.icon-mastodon {
color: #3088d4;
}
}
}
// icons
@import "icons";
// media queries
@media only screen and (min-width: $screen-display) {
main {
padding-right: 20vmin;
}
}
@media only screen and (min-width: $screen-full) {
main {
padding-right: 32vmin;
}
}

View File

@ -1,39 +0,0 @@
$bg-light: #f3f3f1;
$font-color-navy: #002953;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
$font-size-base: 16px;
$screen-mobile: 640px;
$screen-tablet: 768px;
$screen-laptop: 1024px;
$screen-display: 1280px;
$screen-full: 1440px;
body {
background: $bg-light;
font-size: $font-size-base;
}
h1 {
color: $font-color-navy;
font-family: $font-family-base;
font-size: max(5vw, 36px);
font-weight: 900;
line-height: 1.15;
margin: 2vw 33vw 2vw 5vw;
}
header {
background: #fff;
padding: 1vh 5vw 0;
object {
width: 12vw;
}
}
// media queries
@media only screen and (max-width: $screen-mobile) {
h1 {
margin: 5vw 5vw 0;
}
}