diff --git a/.gitignore b/.gitignore
index 91dfed8..a42685d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
.DS_Store
-node_modules
\ No newline at end of file
+node_modules
+dist/*
+!dist/.gitkeep
+
diff --git a/dist/.gitkeep b/dist/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/dist/icons/andrew.eot b/dist/icons/andrew.eot
deleted file mode 100644
index 3b8df43..0000000
Binary files a/dist/icons/andrew.eot and /dev/null differ
diff --git a/dist/icons/andrew.svg b/dist/icons/andrew.svg
deleted file mode 100644
index 3c762ad..0000000
--- a/dist/icons/andrew.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/dist/icons/andrew.ttf b/dist/icons/andrew.ttf
deleted file mode 100644
index c3c76e4..0000000
Binary files a/dist/icons/andrew.ttf and /dev/null differ
diff --git a/dist/icons/andrew.woff b/dist/icons/andrew.woff
deleted file mode 100644
index 7d8fe0e..0000000
Binary files a/dist/icons/andrew.woff and /dev/null differ
diff --git a/dist/icons/andrew.woff2 b/dist/icons/andrew.woff2
deleted file mode 100644
index 523d2a1..0000000
Binary files a/dist/icons/andrew.woff2 and /dev/null differ
diff --git a/dist/img/gioias.svg b/dist/img/gioias.svg
deleted file mode 100644
index 9998201..0000000
--- a/dist/img/gioias.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
diff --git a/dist/index.html b/dist/index.html
deleted file mode 100644
index 319bab2..0000000
--- a/dist/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
- Andrew Gioia
-
-
-
-
-
-
-
- Andrew Gioia,
-
-
- dad, designer, & co-founder at TeachBoost,
-
-
- living & tinkering in Pittsburgh.
-
-
-
-
-
-
-
-
diff --git a/dist/site.css b/dist/site.css
deleted file mode 100644
index 5a587d4..0000000
--- a/dist/site.css
+++ /dev/null
@@ -1,434 +0,0 @@
-@charset "UTF-8";
-/*! AndrewGioia.com style definitions v7.0.1 */
-/*! 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;
-}
-
-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;
- }
-}
diff --git a/package.json b/package.json
index 39d2603..b5e8ec7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
"normalize.css": "^8.0.1"
},
"devDependencies": {
- "sass-loader": "^9.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
diff --git a/src/icons/andrew.eot b/src/icons/andrew.eot
index 3b8df43..b8e56de 100644
Binary files a/src/icons/andrew.eot and b/src/icons/andrew.eot differ
diff --git a/src/icons/andrew.svg b/src/icons/andrew.svg
index 3c762ad..195885b 100644
--- a/src/icons/andrew.svg
+++ b/src/icons/andrew.svg
@@ -26,4 +26,6 @@
+
+
\ No newline at end of file
diff --git a/src/icons/andrew.ttf b/src/icons/andrew.ttf
index c3c76e4..c558a00 100644
Binary files a/src/icons/andrew.ttf and b/src/icons/andrew.ttf differ
diff --git a/src/icons/andrew.woff b/src/icons/andrew.woff
index 7d8fe0e..00d9a6b 100644
Binary files a/src/icons/andrew.woff and b/src/icons/andrew.woff differ
diff --git a/src/icons/andrew.woff2 b/src/icons/andrew.woff2
index 523d2a1..182346c 100644
Binary files a/src/icons/andrew.woff2 and b/src/icons/andrew.woff2 differ
diff --git a/src/index.html b/src/index.html
index 319bab2..88750d8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,11 +23,14 @@
diff --git a/src/scss/_icons.scss b/src/scss/_icons.scss
index 69ccc3f..8fb2b66 100644
--- a/src/scss/_icons.scss
+++ b/src/scss/_icons.scss
@@ -1,11 +1,16 @@
+$icon-arrow: '\e902';
+$icon-email: '\e903';
+$icon-github: '\e900';
+$icon-mastodon: '\e901';
+
@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');
+ src: url('icons/andrew.eot?#{$version}');
+ src: url('icons/andrew.eot?#{$version}#iefix') format('embedded-opentype'),
+ url('icons/andrew.woff2?#{$version}') format('woff2'),
+ url('icons/andrew.ttf?#{$version}') format('truetype'),
+ url('icons/andrew.woff?#{$version}') format('woff'),
+ url('icons/andrew.svg?#{$version}#andrew') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@@ -25,9 +30,15 @@
-moz-osx-font-smoothing: grayscale;
}
+.icon-arrow:before {
+ content: $icon-arrow;
+}
+.icon-email:before {
+ content: $icon-email;
+}
.icon-github:before {
- content: "\e900";
+ content: $icon-github;
}
.icon-mastodon:before {
- content: "\e901";
+ content: $icon-mastodon;
}
diff --git a/src/scss/theme.scss b/src/scss/theme.scss
index 554f45b..8ca33ec 100644
--- a/src/scss/theme.scss
+++ b/src/scss/theme.scss
@@ -3,7 +3,8 @@
// normalize
@import "../../node_modules/normalize.css/normalize";
-// our stuff
+// variables
+$version: '1.0.3';
$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";
@@ -14,6 +15,10 @@ $screen-laptop: 1024px;
$screen-display: 1280px;
$screen-full: 1440px;
+// icons
+@import "icons";
+
+// fit and finish
body {
background: $bg-light;
display: flex;
@@ -62,21 +67,52 @@ footer {
font-size: 3rem; // basic fallback
font-size: 5vmin; // premium fallback
font-size: max(5vmin, 32px);
- margin-right: 2vmin;
- text-decoration: none;
+ margin-right: 4vmin;
- .icon-github {
+ &.github {
color: #24292e;
}
- .icon-mastodon {
+ &.mastodon {
color: #3088d4;
}
+
+ &.email {
+ color: #ef5777;
+ }
}
}
-// icons
-@import "icons";
+a {
+ position: relative;
+ text-decoration: none;
+
+ // novelty arrow
+ &::after {
+ color: inherit;
+ content: $icon-arrow;
+ display: block;
+ font-family: 'andrew';
+ font-size: 75%;
+ height: 100%;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ -webkit-transform: translateY(-20%) translateX(80%);
+ -moz-transform: translateY(-20%) translateX(80%);
+ transform: translateY(-20%) translateX(80%);
+ transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
+ }
+
+ // show the arrow on hover
+ &:hover::after {
+ display: block;
+ margin-top: -3px;
+ opacity: 100;
+ }
+
+}
// media queries
@media only screen and (min-width: $screen-display) {