From c6e83f21dd56c7d675c8fe72ee55e4a94fbabcd7 Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Mon, 13 Jul 2020 17:26:05 -0400 Subject: [PATCH] Initial blog design with first post almost complete --- .gitignore | 4 + archetypes/default.md | 6 + assets/css/main.css | 711 +++++++++++++++++ assets/css/style.css | 721 ++++++++++++++++++ assets/scss/_dark.scss | 45 ++ assets/scss/_icons.scss | 48 ++ assets/scss/_media.scss | 50 ++ assets/scss/_variables.scss | 24 + assets/scss/main.scss | 320 ++++++++ config/_default/config.yaml | 10 + config/development/config.yaml | 1 + config/production/config.yaml | 3 + content/_index.md | 0 content/posts/20-07-09-facebook.md | 129 ++++ content/posts/20-07-XX-renovation.md | 7 + content/posts/_index.md | 3 + layouts/_default/baseof.html | 22 + layouts/_default/list.html | 9 + layouts/_default/single.html | 21 + layouts/index.html | 19 + layouts/partials/header.html | 7 + layouts/shortcodes/html.html | 1 + package-lock.json | 13 + package.json | 27 + ...s_1cc8fef01f5ca618195a3ad1e8fbf60b.content | 25 + ...scss_1cc8fef01f5ca618195a3ad1e8fbf60b.json | 1 + ...s_48b060fe05b0a273d182ef83c0605941.content | 1 + ...scss_48b060fe05b0a273d182ef83c0605941.json | 1 + ...s_9ede7f2d2cbefe3d46130bdc1125141a.content | 363 +++++++++ ...scss_9ede7f2d2cbefe3d46130bdc1125141a.json | 1 + ...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 25 + ...scss_f300667da4f5b5f84e1a9e0702b2fdde.json | 1 + static/icons/andrew.eot | Bin 0 -> 3140 bytes static/icons/andrew.svg | 32 + static/icons/andrew.ttf | Bin 0 -> 2980 bytes static/icons/andrew.woff | Bin 0 -> 3056 bytes static/icons/andrew.woff2 | Bin 0 -> 1788 bytes 37 files changed, 2651 insertions(+) create mode 100644 .gitignore create mode 100644 archetypes/default.md create mode 100644 assets/css/main.css create mode 100644 assets/css/style.css create mode 100644 assets/scss/_dark.scss create mode 100644 assets/scss/_icons.scss create mode 100644 assets/scss/_media.scss create mode 100644 assets/scss/_variables.scss create mode 100644 assets/scss/main.scss create mode 100644 config/_default/config.yaml create mode 100644 config/development/config.yaml create mode 100644 config/production/config.yaml create mode 100644 content/_index.md create mode 100644 content/posts/20-07-09-facebook.md create mode 100644 content/posts/20-07-XX-renovation.md create mode 100644 content/posts/_index.md create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.html create mode 100644 layouts/partials/header.html create mode 100644 layouts/shortcodes/html.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.content create mode 100644 resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.json create mode 100644 resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content create mode 100644 resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json create mode 100644 resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.content create mode 100644 resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.json create mode 100644 resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content create mode 100644 resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json create mode 100644 static/icons/andrew.eot create mode 100644 static/icons/andrew.svg create mode 100644 static/icons/andrew.ttf create mode 100644 static/icons/andrew.woff create mode 100644 static/icons/andrew.woff2 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8690dd2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +logs.txt +node_modules +public \ No newline at end of file diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..00e77bd --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..89c30f6 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,711 @@ +@charset "UTF-8"; +/*! posts.andrewgioia.com style definitions v1.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; +} + +:root { + --bg-normal: #f3f3f1; + --bg-dark: #21252b; + --border-normal: #fff; + --border-dark: #353b45; + --font-size-base: 18px; + --link-color-normal: #0069ff; + --link-color-dark: #29baff; + --text-normal: #002953; + --text-normal-hl: #032140; + --text-dark: #d6d7df; + --text-dark-hl: #fff; + --text-title-normal: #736be3; + --text-title-dark: #9690ea; + --text-subdued-normal: #bbb; + --text-subdued-dark: #5a6371; + --screen-mobile: 640px; + --screen-tablet: 768px; + --screen-laptop: 1024px; + --screen-display: 1280px; + --screen-full: 1440px; +} + +@font-face { + font-family: "andrew"; + src: url("../icons/andrew.eot?1.0.5"); + src: url("../icons/andrew.eot?1.0.5#iefix") format("embedded-opentype"), url("../icons/andrew.woff2?1.0.5") format("woff2"), url("../icons/andrew.ttf?1.0.5") format("truetype"), url("../icons/andrew.woff?1.0.5") format("woff"), url("../icons/andrew.svg?1.0.5#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-arrow:before { + content: ""; +} + +.icon-arrow-left:before { + content: ""; +} + +.icon-email:before { + content: ""; +} + +.icon-github:before { + content: ""; +} + +.icon-mastodon:before { + content: ""; +} + +html { + font-size: var(--font-size-base); +} + +body { + align-items: center; + background: var(--bg-normal); + color: var(--text-normal); + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + justify-content: flex-start; +} + +header { + align-self: stretch; + border-top: 1vmax solid var(--border-normal); + padding: 5vmin 6vmin 0; +} +header h1 { + font-size: max(2vmax, 1.25rem); + margin: 0; +} +header h1 a { + color: var(--text-normal); +} +header h1 span { + color: var(--text-subdued-normal); +} + +main { + display: flex; + max-width: var(--screen-display); + padding: max(5vmin, 2rem) 6vmin; + position: relative; +} +main#home { + padding-top: max(10vmin, 2rem); + width: 80%; +} +main#post { + flex-direction: column; + align-items: center; +} +main aside { + margin: 0 7.5vmin max(2vmax, 1rem); + position: relative; + text-align: center; +} +main aside h1 { + color: var(--text-title-normal); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: max(3.75vmax, 2rem); + font-weight: 800; + letter-spacing: -0.075rem; + line-height: 1.1; +} +main aside time { + font-size: max(1.5vmax, 1rem); + font-weight: 900; + text-transform: uppercase; +} +main article { + align-items: center; + display: flex; + flex-direction: column; +} +main article h2 { + color: var(--text-normal-hl); + font-size: max(2.25vmax, 1.5rem); + font-weight: 800; + letter-spacing: -0.05rem; + margin: 2vmax 10vmin 1vmax; + text-align: center; + text-transform: uppercase; +} +main article p, +main article ul, +main article section, +main article blockquote { + width: min(50vmax, 100%); +} +main article p { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); + margin: max(1vmax, 0.75rem) 0; +} +main article p.big { + font-size: max(1.75vmax, 1.25rem); + font-weight: 500; + line-height: max(2.5vmax, 1.75rem); +} +main article p.big > strong { + font-weight: 800; +} +main article p.swqm { + text-indent: min(-0.55vmax, -0.4rem); +} +main article ul, +main article ol { + margin: max(1vmax, 0.75rem) 0; + padding: 0; +} +main article ul li, +main article ol li { + margin-left: max(3vmax, 1rem); + padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem); +} +main article ul li p:first-child, +main article ol li p:first-child { + margin-top: max(0.5vmax, 0.5rem); +} +main article ul li:first-child p:first-child, +main article ol li:first-child p:first-child { + margin-top: 0; +} +main article ul li p:last-child, +main article ol li p:last-child { + margin-bottom: 0; +} +main article ul li { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); +} +main article ul li:last-child { + padding-bottom: 0; +} +main article section ol li, +main article section ol li p { + font-size: max(1vmax, 0.75rem); + line-height: max(1.5vmax, 1.1rem); +} +main article figure { + margin: 2vmax 10vmax 1vmax; +} +main article figure img { + width: 100%; +} +main article figure figcaption { + text-align: center; +} +main article blockquote { + margin: max(0.5vmax, 0.5rem) 0; +} +main article blockquote p { + border-left: 1vmax solid var(--border-normal); + padding-left: 2vmax; +} + +nav#TableOfContents { + display: none; +} + +a { + color: var(--link-color-normal); + position: relative; + text-decoration: none; +} +a:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-normal); +} +a.arrow::after { + color: inherit; + content: ""; + display: block; + font-family: "andrew"; + font-size: 100%; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + right: 0; + -webkit-transform: translateY(-0.5rem) translateX(100%); + -moz-transform: translateY(-0.5rem) translateX(100%); + transform: translateY(-0.5rem) translateX(100%); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; +} +a.arrow.back::after { + content: ""; + left: 0; + -webkit-transform: translateY(-0.5rem) translateX(-1.5rem); + -moz-transform: translateY(-0.5rem) translateX(-1.5rem); + transform: translateY(-0.5rem) translateX(-1.5rem); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; +} +a.arrow:hover::after { + display: block; + margin-top: -3px; + opacity: 100; +} + +header h1 a.back::after { + -webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + -moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); +} + +ul.list { + display: flex; + flex-direction: column; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; +} +ul.list li { + align-items: stretch; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: max(2.5vmax, 1.1rem); +} +ul.list li div { + flex: 0 1 auto; + font-size: max(2.5vmax, 1.1rem); + font-weight: 600; +} +ul.list li time { + flex: 0 0 auto; + font-size: max(2vmax, 1rem); + font-weight: 900; + padding-top: 0.5vmax; + padding-left: 1vmax; + text-transform: uppercase; +} + +@media (prefers-color-scheme: dark) { + body { + background: var(--bg-dark); + color: var(--text-dark); + } + + header { + border-top-color: var(--border-dark); + } + header h1 a { + color: var(--text-dark-hl); + } + header h1 span { + color: var(--text-subdued-dark); + } + + a { + color: var(--link-color-dark); + } + a:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-dark); + } + + main aside h1 { + background: var(--text-title-dark); + background: linear-gradient(135deg, #29baff 0%, #9690ea 67%); + background-clip: text; + color: transparent; + } + main article h2 { + color: var(--text-dark-hl); + } + main article blockquote p { + border-left-color: var(--border-dark); + } +} +@media only screen and (max-width: 768px) { + main { + align-self: stretch; + overflow-x: hidden; + width: auto; + } + main aside, +main article h2, +main article p { + margin-left: 0; + margin-right: 0; + max-width: 100%; + text-align: left; + width: 100%; + } + main article ul { + align-self: end; + padding: 0; + width: calc(100% - 2.5vmax); + } + main article figure { + margin: 2vmax -6vmin 1vmax; + } + + ul.list li { + flex-direction: column; + } + ul.list li time { + padding: 1vmax 0 0 0; + } +} +@media only screen and (min-width: 1280px) { + main article h2 { + margin: 2vmax 7vmin 1vmax; + } + + ul.list li time { + padding-left: 3rem; + } +} +@media only screen and (min-width: 1440px) { + main article h2 { + margin: 2vmax 5vmin 1vmax; + } +} diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..77cdbc2 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,721 @@ +@charset "UTF-8"; +/*! posts.andrewgioia.com style definitions v1.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; +} + +:root { + --bg-normal: #f3f3f1; + --bg-dark: #21252b; + --border-normal: #fff; + --border-dark: #353b45; + --font-size-base: 18px; + --link-color-normal: #0069ff; + --link-color-dark: #29baff; + --text-normal: #002953; + --text-normal-hl: #032140; + --text-dark: #d6d7df; + --text-dark-hl: #fff; + --text-title-normal: #736be3; + --text-title-dark: #9690ea; + --text-subdued-normal: #bbb; + --text-subdued-dark: #5a6371; + --screen-mobile: 640px; + --screen-tablet: 768px; + --screen-laptop: 1024px; + --screen-display: 1280px; + --screen-full: 1440px; +} + +@font-face { + font-family: "andrew"; + src: url("../icons/andrew.eot?1.0.5"); + src: url("../icons/andrew.eot?1.0.5#iefix") format("embedded-opentype"), url("../icons/andrew.woff2?1.0.5") format("woff2"), url("../icons/andrew.ttf?1.0.5") format("truetype"), url("../icons/andrew.woff?1.0.5") format("woff"), url("../icons/andrew.svg?1.0.5#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-arrow:before { + content: ""; +} + +.icon-arrow-left:before { + content: ""; +} + +.icon-email:before { + content: ""; +} + +.icon-github:before { + content: ""; +} + +.icon-mastodon:before { + content: ""; +} + +html { + font-size: var(--font-size-base); +} + +body { + align-items: center; + background: var(--bg-normal); + color: var(--text-normal); + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + justify-content: flex-start; +} + +header { + align-self: stretch; + border-top: 1vmax solid var(--border-normal); + padding: 5vmin 6vmin 0; +} +header h1 { + font-size: max(2vmax, 1.25rem); + margin: 0; +} +header h1 a { + color: var(--text-normal); +} +header h1 span { + color: var(--text-subdued-normal); +} + +main { + display: flex; + max-width: var(--screen-display); + padding: max(5vmin, 2rem) 6vmin; + position: relative; +} +main#home { + padding-top: max(10vmin, 2rem); + width: 80%; +} +main#post { + flex-direction: column; + align-items: center; +} +main aside { + margin: 0 7.5vmin max(2vmax, 1rem); + position: sticky; + text-align: center; + top: -1px; + padding-top: 1px; +} +main aside h1 { + color: var(--text-title-normal); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: max(3.75vmax, 2rem); + font-weight: 800; + letter-spacing: -0.075rem; + line-height: 1.1; +} +main aside time { + font-size: max(1.5vmax, 1rem); + font-weight: 900; + text-transform: uppercase; +} +main aside.stuck { + position: fixed; + top: 0; + height: 100px; + overflow: hidden; + min-height: 100px; + max-height: 100px; +} +main article { + align-items: center; + display: flex; + flex-direction: column; +} +main article h2 { + color: var(--text-normal-hl); + font-size: max(2.25vmax, 1.5rem); + font-weight: 800; + letter-spacing: -0.05rem; + margin: 2vmax 10vmin 1vmax; + text-align: center; + text-transform: uppercase; +} +main article p, +main article ul, +main article section, +main article blockquote { + width: min(50vmax, 100%); +} +main article p { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); + margin: max(1vmax, 0.75rem) 0; +} +main article p.big { + font-size: max(1.75vmax, 1.25rem); + font-weight: 500; + line-height: max(2.5vmax, 1.75rem); +} +main article p.big > strong { + font-weight: 800; +} +main article p.swqm { + text-indent: min(-0.55vmax, -0.4rem); +} +main article ul, +main article ol { + margin: max(1vmax, 0.75rem) 0; + padding: 0; +} +main article ul li, +main article ol li { + margin-left: max(3vmax, 1rem); + padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem); +} +main article ul li p:first-child, +main article ol li p:first-child { + margin-top: max(0.5vmax, 0.5rem); +} +main article ul li:first-child p:first-child, +main article ol li:first-child p:first-child { + margin-top: 0; +} +main article ul li p:last-child, +main article ol li p:last-child { + margin-bottom: 0; +} +main article ul li { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); +} +main article ul li:last-child { + padding-bottom: 0; +} +main article section ol li, +main article section ol li p { + font-size: max(1vmax, 0.75rem); + line-height: max(1.5vmax, 1.1rem); +} +main article figure { + margin: 2vmax 10vmax 1vmax; +} +main article figure img { + width: 100%; +} +main article figure figcaption { + text-align: center; +} +main article blockquote { + margin: max(0.5vmax, 0.5rem) 0; +} +main article blockquote p { + border-left: 1vmax solid var(--border-normal); + padding-left: 2vmax; +} + +nav#TableOfContents { + display: none; +} + +a { + color: var(--link-color-normal); + position: relative; + text-decoration: none; +} +a:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-normal); +} +a.arrow::after { + color: inherit; + content: ""; + display: block; + font-family: "andrew"; + font-size: 100%; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + right: 0; + -webkit-transform: translateY(-0.5rem) translateX(100%); + -moz-transform: translateY(-0.5rem) translateX(100%); + transform: translateY(-0.5rem) translateX(100%); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; +} +a.arrow.back::after { + content: ""; + left: 0; + -webkit-transform: translateY(-0.5rem) translateX(-1.5rem); + -moz-transform: translateY(-0.5rem) translateX(-1.5rem); + transform: translateY(-0.5rem) translateX(-1.5rem); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; +} +a.arrow:hover::after { + display: block; + margin-top: -3px; + opacity: 100; +} + +header h1 a.back::after { + -webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + -moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); +} + +ul.list { + display: flex; + flex-direction: column; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; +} +ul.list li { + align-items: stretch; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: max(2.5vmax, 1.1rem); +} +ul.list li div { + flex: 0 1 auto; + font-size: max(2.5vmax, 1.1rem); + font-weight: 600; +} +ul.list li time { + flex: 0 0 auto; + font-size: max(2vmax, 1rem); + font-weight: 900; + padding-top: 0.5vmax; + padding-left: 1vmax; + text-transform: uppercase; +} + +@media (prefers-color-scheme: dark) { + body { + background: var(--bg-dark); + color: var(--text-dark); + } + + header { + border-top-color: var(--border-dark); + } + header h1 a { + color: var(--text-dark-hl); + } + header h1 span { + color: var(--text-subdued-dark); + } + + a { + color: var(--link-color-dark); + } + a:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-dark); + } + + main aside h1 { + background: var(--text-title-dark); + background: linear-gradient(135deg, #29baff 0%, #9690ea 67%); + background-clip: text; + color: transparent; + } + main article h2 { + color: var(--text-dark-hl); + } + main article blockquote p { + border-left-color: var(--border-dark); + } +} +@media only screen and (max-width: 768px) { + main { + align-self: stretch; + overflow-x: hidden; + width: auto; + } + main aside, +main article h2, +main article p { + margin-left: 0; + margin-right: 0; + max-width: 100%; + text-align: left; + width: 100%; + } + main article ul { + align-self: end; + padding: 0; + width: calc(100% - 2.5vmax); + } + main article figure { + margin: 2vmax -6vmin 1vmax; + } + + ul.list li { + flex-direction: column; + } + ul.list li time { + padding: 1vmax 0 0 0; + } +} +@media only screen and (min-width: 1280px) { + main article h2 { + margin: 2vmax 7vmin 1vmax; + } + + ul.list li time { + padding-left: 3rem; + } +} +@media only screen and (min-width: 1440px) { + main article h2 { + margin: 2vmax 5vmin 1vmax; + } +} diff --git a/assets/scss/_dark.scss b/assets/scss/_dark.scss new file mode 100644 index 0000000..ac3edb4 --- /dev/null +++ b/assets/scss/_dark.scss @@ -0,0 +1,45 @@ +// dark mode preference +@media (prefers-color-scheme: dark) { + body { + background: var(--bg-dark); + color: var(--text-dark); + } + header { + border-top-color: var(--border-dark); + h1 { + a { + color: var(--text-dark-hl); + } + span { + color: var(--text-subdued-dark); + } + } + } + a { + color: var(--link-color-dark); + + &:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-dark); + } + } + main { + aside { + h1 { + background: var(--text-title-dark); + background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%); + background-clip: text; + color: transparent; + } + } + article { + h2 { + color: var(--text-dark-hl); + } + blockquote { + p { + border-left-color: var(--border-dark); + } + } + } + } +} \ No newline at end of file diff --git a/assets/scss/_icons.scss b/assets/scss/_icons.scss new file mode 100644 index 0000000..2ad5e6e --- /dev/null +++ b/assets/scss/_icons.scss @@ -0,0 +1,48 @@ +$icon-arrow: '\e902'; +$icon-arrow-left: '\e904'; +$icon-email: '\e903'; +$icon-github: '\e900'; +$icon-mastodon: '\e901'; + +@font-face { + font-family: 'andrew'; + 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; +} + +[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-arrow:before { + content: $icon-arrow; +} +.icon-arrow-left:before { + content: $icon-arrow-left; +} +.icon-email:before { + content: $icon-email; +} +.icon-github:before { + content: $icon-github; +} +.icon-mastodon:before { + content: $icon-mastodon; +} \ No newline at end of file diff --git a/assets/scss/_media.scss b/assets/scss/_media.scss new file mode 100644 index 0000000..8c1e733 --- /dev/null +++ b/assets/scss/_media.scss @@ -0,0 +1,50 @@ +// media queries + +@media only screen and (max-width: $screen-tablet) { + main { + align-self: stretch; + overflow-x: hidden; // safety for negative figure margin below + width: auto; + + aside, + article h2, + article p { + margin-left: 0; + margin-right: 0; + max-width: 100%; + text-align: left; + width: 100%; + } + article { + ul { + align-self: end; + padding: 0; + width: calc(100% - 2.5vmax); + } + figure { + margin: 2vmax -6vmin 1vmax; + } + } + } + ul.list li { + flex-direction: column; + time { + padding: 1vmax 0 0 0; + } + } +} + +@media only screen and (min-width: $screen-display) { + main article h2 { + margin: 2vmax 7vmin 1vmax; + } + ul.list li time { + padding-left: 3rem; + } +} + +@media only screen and (min-width: $screen-full) { + main article h2 { + margin: 2vmax 5vmin 1vmax; + } +} \ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..09ff658 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,24 @@ +// global variables + +$version: '1.0.5'; +$tan-lt: #f3f3f1; +$tan-md: #bbb; +$black-lt: #5a6371; +$black-md: #353b45; +$black-dk: #21252b; +$white: #fff; +$navy-md: #002953; +$navy-dk: #032140; +$gray: #d6d7df; +$purple-lt: #9690ea; +$purple-md: #736be3; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; +$font-family-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; +$font-size-base: 18px; +$blue-lt: #29baff; +$blue-md: #0069ff; +$screen-mobile: 640px; +$screen-tablet: 768px; +$screen-laptop: 1024px; +$screen-display: 1280px; +$screen-full: 1440px; \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..5370810 --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,320 @@ +/*! posts.andrewgioia.com style definitions v1.0.0 */ + +// normalize +@import "../../node_modules/normalize.css/normalize"; + +// sass variables +@import "variables"; + +:root { + --bg-normal: #{$tan-lt}; + --bg-dark: #{$black-dk}; + --border-normal: #{$white}; + --border-dark: #{$black-md}; + --font-size-base: #{$font-size-base}; + --link-color-normal: #{$blue-md}; + --link-color-dark: #{$blue-lt}; + --text-normal: #{$navy-md}; + --text-normal-hl: #{$navy-dk}; + --text-dark: #{$gray}; + --text-dark-hl: #{$white}; + --text-title-normal: #{$purple-md}; + --text-title-dark: #{$purple-lt}; + --text-subdued-normal: #{$tan-md}; + --text-subdued-dark: #{$black-lt}; + --screen-mobile: #{$screen-mobile}; + --screen-tablet: #{$screen-tablet}; + --screen-laptop: #{$screen-laptop}; + --screen-display: #{$screen-display}; + --screen-full: #{$screen-full}; +} + +// fonts +@import "icons"; + +// base styles +html { + font-size: var(--font-size-base); +} + +body { + align-items: center; + background: var(--bg-normal); + color: var(--text-normal); + display: flex; + flex-direction: column; + font-family: $font-family-base; + justify-content: flex-start; +} + +header { + align-self: stretch; + border-top: 1vmax solid var(--border-normal); + padding: 5vmin 6vmin 0; + + h1 { + font-size: max(2vmax, 1.25rem); + margin: 0; + + a { + color: var(--text-normal); + } + + span { + color: var(--text-subdued-normal); + } + } +} + +main { + display: flex; + max-width: var(--screen-display); + padding: max(5vmin, 2rem) 6vmin; + position: relative; + + // sections + &#home { + padding-top: max(10vmin, 2rem); + width: 80%; + } + &#post { + flex-direction: column; + align-items: center; + } + + // post titles + aside { + margin: 0 7.5vmin max(2vmax, 1rem); + text-align: center; + + h1 { + color: var(--text-title-normal); + font-family: $font-family-title; + font-size: max(3.75vmax, 2rem); + font-weight: 800; + letter-spacing: -0.075rem; + line-height: 1.1; + } + + time { + font-size: max(1.5vmax, 1rem); + font-weight: 900; + text-transform: uppercase; + } + } + + // post content + article { + align-items: center; + display: flex; + flex-direction: column; + + h2 { + color: var(--text-normal-hl); + font-size: max(2.25vmax, 1.5rem); + font-weight: 800; + letter-spacing: -0.05rem; + margin: 2vmax 10vmin 1vmax; + text-align: center; + text-transform: uppercase; + } + + // skinny elements + p, + ul, + section, + blockquote { + width: min(50vmax, 100%); + } + + // paragraphs + p { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); + margin: max(1vmax, 0.75rem) 0; + + &.big { // larger highlight and intro paragraphs + font-size: max(1.75vmax, 1.25rem); + font-weight: 500; + line-height: max(2.5vmax, 1.75rem); + + > strong { + font-weight: 800; + } + } + &.swqm { // starts with a quotation mark + text-indent: min(-0.55vmax, -0.4rem); + } + } + + // lists + ul, + ol { + margin: max(1vmax, 0.75rem) 0; + padding: 0; + + li { + margin-left: max(3vmax, 1rem); + padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem); + + p:first-child { // each li's first p needs reduced top margin + margin-top: max(0.5vmax, 0.5rem) + } + &:first-child p:first-child { // the first item's first p gets none + margin-top: 0; + } + p:last-child { // every last para needs it's bottom margin removed too + margin-bottom: 0; + } + } + } + ul { + li { + font-size: max(1.375vmax, 1rem); + line-height: max(2vmax, 1.5rem); + + &:last-child { + padding-bottom: 0; + } + } + } + section { + ol li, + ol li p { + font-size: max(1vmax, 0.75rem); + line-height: max(1.5vmax, 1.1rem); + } + } + + // images + figure { + margin: 2vmax 10vmax 1vmax; + + img { + width: 100%; + } + figcaption { + text-align: center; + } + } + + // blockquotes + blockquote { + margin: max(0.5vmax, 0.5rem) 0; + + p { + border-left: 1vmax solid var(--border-normal); + padding-left: 2vmax; + } + } + } +} + +nav { + &#TableOfContents { + display: none; + } +} + +a { + color: var(--link-color-normal); + position: relative; + text-decoration: none; + + &:not(.arrow):hover { + border-bottom: 2px solid var(--link-color-normal); + } + + // novelty arrow + &.arrow::after { + color: inherit; + content: $icon-arrow; + display: block; + font-family: 'andrew'; + font-size: 100%; + height: 100%; + opacity: 0; + position: absolute; + top: 0; + right: 0; + -webkit-transform: translateY(-0.5rem) translateX(100%); + -moz-transform: translateY(-0.5rem) translateX(100%); + transform: translateY(-0.5rem) translateX(100%); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; + } + + // back links move this to the left + &.arrow.back::after { + content: $icon-arrow-left; + left: 0; + -webkit-transform: translateY(-0.5rem) translateX(-1.5rem); + -moz-transform: translateY(-0.5rem) translateX(-1.5rem); + transform: translateY(-0.5rem) translateX(-1.5rem); + transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out; + } + + // show the arrow on hover + &.arrow:hover::after { + display: block; + margin-top: -3px; + opacity: 100; + } + + // back-to-top links + &#top { + display: block; + align-self: flex-end; + margin: 3vmax; + + &:hover { + border: none; + } + } +} + +// specific link effects +header h1 a.back::after { + -webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + -moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); + transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem)); +} + +ul { + &.list { + display: flex; + flex-direction: column; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; + + li { + align-items: stretch; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: max(2.5vmax, 1.1rem); + + div { + flex: 0 1 auto; // don't grow, shrink if needed, auto size onload + font-size: max(2.5vmax, 1.1rem); + font-weight: 600; + } + + time { + flex: 0 0 auto; // don't grow, don't shrink. auto size onload + font-size: max(2vmax, 1rem); + font-weight: 900; + padding-top: 0.5vmax; + padding-left: 1vmax; + text-transform: uppercase; + } + } + } +} + +// schemes +@import "dark"; + +// media queries +@import "media"; \ No newline at end of file diff --git a/config/_default/config.yaml b/config/_default/config.yaml new file mode 100644 index 0000000..9d254a1 --- /dev/null +++ b/config/_default/config.yaml @@ -0,0 +1,10 @@ +enableEmoji: true +languageCode: en-us +log: true +logFile: "logs.txt" +params: + AuthorName: Andrew Gioia + GitHubUser: andrewgioia + Subtitle: /posts +title: Andrew Gioia +verboseLog: true \ No newline at end of file diff --git a/config/development/config.yaml b/config/development/config.yaml new file mode 100644 index 0000000..0473be4 --- /dev/null +++ b/config/development/config.yaml @@ -0,0 +1 @@ +baseURL: https://blog.lan \ No newline at end of file diff --git a/config/production/config.yaml b/config/production/config.yaml new file mode 100644 index 0000000..4931fe7 --- /dev/null +++ b/config/production/config.yaml @@ -0,0 +1,3 @@ +baseURL: https://posts.andrewgioia.com +enableRobotsTXT: true +logFile: "~/.log/hugo.txt" \ No newline at end of file diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..e69de29 diff --git a/content/posts/20-07-09-facebook.md b/content/posts/20-07-09-facebook.md new file mode 100644 index 0000000..534d0bc --- /dev/null +++ b/content/posts/20-07-09-facebook.md @@ -0,0 +1,129 @@ +--- +title: Boycott Facebook, but not because it supports free speech +linkTitle: Boycott Facebook, but not for its free speech +slug: "facebook" +date: 2020-07-01 +publishdate: 2020-07-05 +--- + +{{< html >}} +

+Of all the very rational reasons to boycott Facebook or any commercial social media platform, that "its support of free speech" has taken hold is alarming.

+{{< /html >}} + +**Two obvious disclaimers first:** Facebook isn't Congress and has no legal requirement to adhere to any concept of free speech, and The Advertisers similarly may choose not to do business with Facebook for any reason at all. When I and many others talk about "free speech," however, we pretty much always mean Free Speech, not the First Amendment: the American value, moral standard, and human right that we instinctually hold ourselves and others to. + +{{< html >}} +

"Private companies can do whatever they want" is problematic for many reasons, and here it's being used unfairly as a sword to compel Facebook to govern certain types of speech on its platform. This is a huge mistake with irrevocable damage, and if free speech as a moral guideline doesn't persuade you then the realities of voluntarily privatizing "truth arbitration" absolutely should.

+{{< /html >}} + +The answer is simple on its face but difficult given the decade of operant conditioning Facebook and others have been perfecting: **correct and re-frame how we consider and use social media in the first place**. + +## Problem 1: it's way too hard to determine what's "true" and what's "fake" {#arbitrate} + +{{< html >}} +

Social media by design cannot arbitrate truth, and any path with this as its goal is necessarily doomed.

+{{< /html >}} + +At some point Facebook, Twitter, YouTube, and Reddit graduated from personal networks to global platforms that broadcast millions of messages to millions of people every day. Though we still do not admit this, it was at this point they also transformed into _communication platforms_: core communication infrastructural architecture. Facebook became a phone carrier, and if Verizon can't and doesn't police the content on its phone lines, Facebook shouldn't either. + +There are too many messages from too many people at too fast a pace for any reasonable human moderation to enforce rules consistently. The speed and nuance with which news and opinion have evolved have made this an order of magnitude more difficult as well. A headline's truthiness can turn on a _word_. 25,000 users like it and a new headline replaces it 30 minutes later. Multiply that by thousands every day and if determining truth was even possible, the scope becomes insurmountable anyway. + +It's unfortunately just impossible though. Two rational adults at opposing ends of the political spectrum can come to opposite conclusions as to truth for most political headlines. Just from today, at random, from CNN, and looking solely at the headline content: + +* ["Trump commutes Roger Stone's sentence"](https://www.cnn.com/2020/07/10/politics/trump-stone-prison-clemency/index.html) is factual and easy. +* ["Debunking 12 lies and falsehoods from the White House statement on Roger Stone's commutation"](https://www.cnn.com/2020/07/10/politics/fact-check-white-house-statement-roger-stone-commutation/index.html) is decidedly less so. This response directly contradicts a previous article, who decides if they're lies? Which is "true" when 2 ostensibly rational adults differ this wildly on _12_ issues of fact? + +This doesn't even approach actual content examples and nuances. If one of those 12 actually is true is the entire article deemed fake? Does Facebook redact it? When do creative omissions in long quotes or testimony go from "helpful clarity" to "outright misrepresentation"? If a [news outlet describes a presidential speech as "divisive"](https://www.nytimes.com/2020/07/03/us/politics/trump-coronavirus-mount-rushmore.html) but a moderator or large group of users feel differently, is that article "true" or "fake?" Who decides if a message is merely satire or an actual actionable threat or call to violence? + +{{< html >}} +

"But just because it's hard shouldn't mean we don't try. Plus, machine learning and 'algorithms' can do the work of a thousand human moderators."

+{{< /html >}} + +Determining truth is a problem legal systems have dealt with for millenia and ours has only "recently" arrived at an expensive, adversarial, intensely thorough, and months-long effort with a due process backbone and an ultimate unanimous determination by 12 other humans. This is obviously the extreme as lives can be on the line, and merely deciding to nuke certain news stories pales in comparison, but **this is how hard it is to reliably determine truth!** We aren't remotely close to handing this over to machines. + +## Problem 2: commercial social media platforms have become the new public square {#public-fora} + +{{< html >}} +

Facebook, Twitter, YouTube, and Reddit are not just carriers, they're also the town square, courthouse steps, public parks, and shopping malls. They should not regulate content because of this, and hopefully one day they won't be able to.

+{{< /html >}} + +As much as I've hated to admit it, these platforms have become the place where communication happens. People assume to find information here. Our president first tweets official state announcements. If a video isn't on YouTube, outside of certain niches it may as well not exist. + +Commercial social media platforms have [usurped print](https://www.pewresearch.org/fact-tank/2018/12/10/social-media-outpaces-print-newspapers-in-the-u-s-as-a-news-source/) ([and even television](https://www.pewresearch.org/fact-tank/2018/12/10/social-media-outpaces-print-newspapers-in-the-u-s-as-a-news-source/)) as the primary source of news for most American young people, [despite most saying it's worse](https://www.niemanlab.org/2019/10/more-americans-than-ever-are-getting-news-from-social-media-even-as-they-say-social-media-makes-news-worse/)! + +If these platforms are increasingly becoming the _only_ place where voice or opinions are heard—and where public policy and political issues are presented, illuminated, and debated—they've become _de facto_ public fora and should be treated as such. [Sadly they're not yet actually treated this way](https://www.bbc.com/news/technology-51658341), but probably will be if they continue down their censorship paths. + +The knee-jerk response to this has always been that "these are private companies" and they can control their private businesses however they want. [Much more eloquently](https://thehill.com/opinion/technology/456900-government-regulation-of-social-media-would-kill-the-internet-and-free): + +> [S]ocial media companies are private companies, not government actors, and these companies have their own First Amendment right to exclude anyone from their platforms for any reason at all. The government cannot force these companies to open up their sites and associate with viewpoints that their owners and shareholders find objectionable, any more than it can force you to display government-approved speech on your private property. + +These arguments sound great at first but quickly fall flat for 3 reasons: + +* **We already have legal and social precedents for extending 1A requirements to certain private entities.** + + For almost 100 years, phone companies and other types of common carriers have had constitutional requirements extended to them. In telecom's case, phone companies have to provide basic service to everyone at a fair price and without discrimination, and they're regulated by a separate federal entity. We're currently debating whether ISPs should also fall into this category (they should), and it's not inconceivable that "public utility" social networks could and should. + + Network effects and increasingly easier acquisitions are soon making sure that these platforms are _the_ communication platforms in a public utility sense. And as all "real" communication becomes centralized here, the case that we treat them as infrastructural "dumb pipes" gets stronger and stronger. + +* **It begs the question and presents a false dichotomy in presuming there must be censorship.** + + There is no requirement that we must choose between Facebook censoring lawful content or the government censoring lawful content; a third option where no one censors lawful content also exists! + + Rhetoric that presumes censorship, like "Do you trust government bureaucrats to police social media and decide whether content is too politically 'biased'?" is leading and presents a bad false dichotomy. Compelling Facebook to be content-neutral and treating it as a dump pipe does not necessitate "government bureacrats" doing the regulation. There's a reality where we police unlawful content and harassment just like everywhere else, and if we remove that presumption and the threat of scary bureacrats goes away entirely. + +* **Though they're private companies, they're abusing current content liability exemptions and are not being fair.** + + Facebook and others have been slowly increasing their abuse of [Section 230 protections](https://www.eff.org/issues/bloggers/legal/liability/2300). They have no responsibility when their users post harmful or illegal things, ostensibly claiming that moderation is too difficult, but some will moderate content when and how they please. This has been getting worse, not better, and + + While it's possible that Facebook, when told to either remain neutral or face content liability, turns the censorship dial to 11, this is probably correct and probably not all downside either. Platforms cannot have it both ways, and if they want to undergo content-level censorship and become arbiters of fact then they _should_ open themselves to liability. This would open them up to competition from new platforms, or even a publicly run platform, where content is not restricted—competition that's being stifled right now because commercial platforms get a huge advantage by having it both ways. + +Without any action soon, commercial social media platforms will become further entrenched as utility-level services in all but name, while also continuing to push out traditional forms of news and media at the same time. + +## Problem 3: private companies should not unilaterally decide acceptable public speech {#forfeit} + +{{< html >}} +

Perhaps the most confusing aspect of The Advertisers Boycott, as well as much of the defense of social media censorship over the past few years, is that we're voluntarily forfeiting centuries of speech protections into the hands of an oligopoly beholden only to the interests of their shareholders and officers.

+{{< /html >}} + +Continued requests for Facebook to censor its users' content just hands them the keys to controlling acceptable topics and opinions. And as it becomes more normal for them to delete "offensive" content, we consolidate this power and come to expect it from them, giving up our own responsibility in discerning what's true and conditioning ourselves to rely on corporations to do this important work for us. + +Corporations have vested interests that are often very much opposed to public interests. Their reach and dominance can quite literally make a market or sway an election. Giving corporations the power to render a search query return no results, bury a story from appearing on social media at all, hide video evidence of some event, or literally edit the content of the messages posted on their platform is frightening in its societal implications and potential for abuse. The scale of this type of censorship is unmatched and we have no control or due process over them. These are powers that no private entities should ever possess. + +Just as bad an outcome is that we kill our instinct to question the things that we read and see, instead assuming they've been vetted or preapproved and taking them as fact. The cost for this convenience—both consolidating this power into private groups and giving up our own judgment—is also far too high. Over time as we come to expect and await our corporate censors to approve the news we read and messages we share, we'll trust that what we do read is somehow "verified" with a comfy checkmark. There's no need to read opposing viewpoints, if they're even able to be seen. + +**To be fair, it's an impossible situation for private corporations offering a public utility.** They have tremendous pressure from every angle to perform often opposing actions. Flagging a story or not flagging a story creates an opinion. Censoring "hate speech" draws a line and tacitly approves hateful things not yet banned. Political parties and interest groups report each others' content as fake. Enabling true free speech fosters actual debate but impinges requests for safe spaces; censorship gives users their bubble but creates groupthink and echo chambers. + +These utility-level platforms shouldn't just shouldn't just be banned from censorship for power level reasons, **they shouldn't attempt it _because it's impossible_**. It is simply an impossible balance to maintain that no private entity is equipped to handle. + +## A solution: decentralize and re-frame our concept of social media {#solution} + +{{< html >}} +

Social media platforms should revert to just that: social communication channels and communities to share media and information, concomitant with a reevaluation of them as leisure activities, not authoritative sources.

+{{< /html >}} + +This alone is a win, but the further pipedream would be to decentralize them so that the current monopolies are one of many different ways to access content on a federated protocol. Or, at the very least, offload centralized censorship to local groups or client devices. + +### Social media is a toy and we should treat it that way + +Facebook, Twitter, YouTube, and Reddit created incredibly engaging social experiences. They no doubt continue to exploit human pyschology to do so but nevertheless they've succeeded many times over in creating global communities that keep people coming back _a lot_. While they became incredibly popular, however, their authority somehow also grew with them and we've completely forgotten their founding as fun social activities. **This was a huge mistake.** + +These sites are fun to use but are woefully inadequate as "serious" communication tools; treating them as such and censoring content so that they can remain authoritative is a fool's errand. Re-framing them as social websites removes all of the pressure they have to censor and regulate speech. Delegating responsibility to maintain order onto the small local communities within them also relieves significant pressure. Reducing instead of maximizing the degrees of relationships from whom users see content keeps it more _social_. Seeing it as fun might also help us to not get offended over everything we see. + +No one petitions Snapchat or Discord or even Instagram to censor speech, in large part because they're still seen as fun and not authoritative sources of information or where our _president_ feels the need to make official announcements. + +### Decentralization, though a pipedream, is the true fix + +When Grandpa sends an offensive email forward, Email, Inc. doesn't ban him from Email. We delete it at first and if it starts to become too annoying we filter it, tell him to stop, or block him on our personal block list. + +There is no corporate entity controlling Email with its centralized Email servers, shareholders requiring 10% growth every quarter, dark patterns driving Email adoption and use, and datamining. If we want to create an email account we don't have to do it on Email.com, we can do it with any provider (or ourselves!) as long as we interoperate over a published email protocol. + +Replace "Email" with Twitter in the preceding paragraph and we have the real fix to social media's censorship problem, among many other problems. When Facebook, Twitter, YouTube, and Reddit are merely content aggregators, filters, and user interfaces over their respective networks, censorship is moot. If you want a safe space on the official facebook.com or twitter.com instances then you are absolutely entitled to that, but the censorship there would not then impact what I get to read and engage with over the `FB://` or `TWTR://` protocols. + +This is federated, decentralized communication over an official protocol. There are attempts to do this now [that I fully support](https://gioia.social/@andrew) and would love to see grow, but as long as the monopolies remain unfair monopolies they have too steep of a hill to climb. + +## Bonus: better reasons to #BoycottFacebook {#reasons} + +{{< html >}} +

If you've made it this far or came directly here to look for some great reasons to boycott Facebook or any commercial social media platform, here's a nonexhaustive list to get you started!

+{{< /html >}} \ No newline at end of file diff --git a/content/posts/20-07-XX-renovation.md b/content/posts/20-07-XX-renovation.md new file mode 100644 index 0000000..58b8cd7 --- /dev/null +++ b/content/posts/20-07-XX-renovation.md @@ -0,0 +1,7 @@ +--- +title: Things I wish I knew before undertaking a large home renovation +linkTitle: Things I wish I knew before undertaking a large home renovation +slug: "renovation" +date: 2020-07-10 +publishdate: 2020-08-01 +--- \ No newline at end of file diff --git a/content/posts/_index.md b/content/posts/_index.md new file mode 100644 index 0000000..548c469 --- /dev/null +++ b/content/posts/_index.md @@ -0,0 +1,3 @@ +## Posts page + +Is this a list page? Do I go to `/posts`? \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..3f91b1d --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,22 @@ + + + + + + {{ block "title" . }} {{ .Site.Title }} {{ end }} + + + + + + {{ block "header" . }}{{ partial "header.html" .}}{{ end }} + + {{ block "main" . }} + + {{ end }} + + {{ block "footer" . }} + {{ end }} + + + \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..cd75b05 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,9 @@ +{{ define "main" }} +

Posts

+ {{ range .Pages }} +
+

{{ .Title }}

+ {{ .Content }} +
+ {{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..81dc18e --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,21 @@ +{{ define "title" }} + {{ .Title }} – {{ .Site.Title }} +{{ end }} + +{{ define "main" }} +
+ +
+ {{ .Content }} +
+
+{{ .TableOfContents }} +To the top! +{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..cf48e44 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,19 @@ +{{ define "main" }} +
+
+ {{.Content}} +
+ +
+{{ end }} \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..9008346 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,7 @@ +
+

+ {{ .Site.Title }} + {{ .Site.Params.SubTitle }}{{ with .Params.slug }}/{{ . }}{{ end }} +

+
\ No newline at end of file diff --git a/layouts/shortcodes/html.html b/layouts/shortcodes/html.html new file mode 100644 index 0000000..ed3fb8a --- /dev/null +++ b/layouts/shortcodes/html.html @@ -0,0 +1 @@ +{{.Inner}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..1c6f77b --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "posts.andrewgioia.com", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..6f45451 --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "posts.andrewgioia.com", + "version": "1.0.0", + "description": "Longer form content by Andrew Gioia", + "main": "public/index.html", + "private": true, + "dependencies": { + "normalize.css": "^8.0.1" + }, + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "sass": "sass --no-source-map assets/scss/main.scss assets/css/style.css", + "watch": "sass --no-source-map --watch assets/scss/main.scss public/css/style.css" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/andrewgioia/blog.git" + }, + "keywords": [], + "author": "Andrew Gioia", + "license": "CC-BY-NC-ND", + "bugs": { + "url": "https://github.com/andrewgioia/blog/issues" + }, + "homepage": "https://posts.andrewgioia.com" +} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.content b/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.content new file mode 100644 index 0000000..16f671f --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.content @@ -0,0 +1,25 @@ +:root { + --bg-normal: #f3f3f1; + --bg-dark: #21252b; + --border-normal: #fff; + --border-dark: #353b45; + --text-normal: #002953; + --text-normal-hl: #032140; + --text-dark: #d6d7df; + --text-dark-hl: #fff; + --font-base: 16px; + --link-tb-normal: #0069ff; + --link-tb-dark: #29baff; + --link-gh-normal: #24292e; + --link-gh-dark: #f1f1f1; } + +body { + background: var(--bg-normal); + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: var(--font-base); + height: 100vh; + justify-content: space-between; + overflow: hidden; + width: 100vw; } diff --git a/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.json b/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.json new file mode 100644 index 0000000..8d03ad7 --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_1cc8fef01f5ca618195a3ad1e8fbf60b.json @@ -0,0 +1 @@ +{"Target":"style.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content new file mode 100644 index 0000000..dd14f39 --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content @@ -0,0 +1 @@ +:root{--bg-normal: #f3f3f1;--bg-dark: #21252b;--border-normal: #fff;--border-dark: #353b45;--text-normal: #002953;--text-normal-hl: #032140;--text-dark: #d6d7df;--text-dark-hl: #fff;--font-base: 16px;--link-tb-normal: #0069ff;--link-tb-dark: #29baff;--link-gh-normal: #24292e;--link-gh-dark: #f1f1f1}body{background:var(--bg-normal);display:flex;flex-direction:column;font-size:var(--font-base);height:100vh;justify-content:space-between;overflow:hidden;width:100vw} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json new file mode 100644 index 0000000..c72d2f9 --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json @@ -0,0 +1 @@ +{"Target":"scss/main.min.afb5c24c1652247c72072cc1b9ddb9cd8eab2da1db040debe3a25291c5ceafdd.css","MediaType":"text/css","Data":{"Integrity":"sha256-r7XCTBZSJHxyByzBud25zY6rLaHbBA3r46JSkcXOr90="}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.content b/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.content new file mode 100644 index 0000000..4a01559 --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.content @@ -0,0 +1,363 @@ +/*! posts.andrewgioia.com style definitions v1.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; } + +:root { + --bg-normal: #f3f3f1; + --bg-dark: #21252b; + --border-normal: #fff; + --border-dark: #353b45; + --text-normal: #002953; + --text-normal-hl: #032140; + --text-dark: #d6d7df; + --text-dark-hl: #fff; + --font-base: 18px; + --link-tb-normal: #0069ff; + --link-tb-dark: #29baff; + --link-gh-normal: #24292e; + --link-gh-dark: #f1f1f1; + --screen-mobile: 640px; + --screen-tablet: 768px; + --screen-laptop: 1024px; + --screen-display: 1280px; + --screen-full: 1440px; } + +body { + align-items: center; + background: var(--bg-normal); + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: var(--font-base); + justify-content: flex-start; + overflow: hidden; + width: 100vw; } + +header { + align-self: stretch; + border-top: 1vmax solid var(--border-normal); + padding: 5vmin 6vmin 0; } + header h1 { + font-size: 1.5rem; + margin: 0; } + +main { + display: flex; + max-width: var(--screen-laptop); + padding: 5vmin 6vmin; + width: 80%; } + +ul.list { + display: flex; + flex-direction: column; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; } + ul.list li { + align-items: flex-start; + display: flex; + flex-direction: row; + justify-content: space-between; } diff --git a/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.json b/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.json new file mode 100644 index 0000000..28c014b --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_9ede7f2d2cbefe3d46130bdc1125141a.json @@ -0,0 +1 @@ +{"Target":"css/style.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content new file mode 100644 index 0000000..16f671f --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -0,0 +1,25 @@ +:root { + --bg-normal: #f3f3f1; + --bg-dark: #21252b; + --border-normal: #fff; + --border-dark: #353b45; + --text-normal: #002953; + --text-normal-hl: #032140; + --text-dark: #d6d7df; + --text-dark-hl: #fff; + --font-base: 16px; + --link-tb-normal: #0069ff; + --link-tb-dark: #29baff; + --link-gh-normal: #24292e; + --link-gh-dark: #f1f1f1; } + +body { + background: var(--bg-normal); + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: var(--font-base); + height: 100vh; + justify-content: space-between; + overflow: hidden; + width: 100vw; } diff --git a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json new file mode 100644 index 0000000..e2e3d4c --- /dev/null +++ b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json @@ -0,0 +1 @@ +{"Target":"scss/main.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/static/icons/andrew.eot b/static/icons/andrew.eot new file mode 100644 index 0000000000000000000000000000000000000000..a73b227144e54e27a3d487eb9c1c2ee8f15cd627 GIT binary patch literal 3140 zcmaJDTWlLy_1t^s{ql@GGxpeyGxj8Q9?rvYY|}^5N7|~}k}R}o+HEPUlX{bAn>b2S zwcTBzl-;jgBnm%>1+fy3uda~zSn;zTD-e93ej!yW1W1ecS^?qzAMO=^X zJ@0d8&N=s(EA7A1W{olgN2q7fGQr6?TEag}Cx`H_BgT2wby9IIh2jbsE+}~_&w0`~3y>B4? zA^P}qt9@$+_lZM&C*%WT56J`I0qFPWBcyz*vy#6;mB^u7&mg$%XUB1X&pGzV{wHvp z;UAe#K71(Whg0M&^q56nXJwI87C86<(iM;}uoP+j=iL5(_V+_2gdu{-{$G+D>h;*=KAQ{acWM07jq+Gw?Tn!Mf`R#nN=WQE3Q8(XBU1 z6@w&mq%lrPqTn{B3#C#8*LpErlDLYcq98^B0TD!lh|z>=q=%~EgN9~F?I@`kq=c59 zJhfTUsJp!~p`U}NIE`A3V!bh4uXe;{BWpSR4~#JkO^lQ%)dDNlQ>sg$PVft6D;o`{K@Uf*FS8o6eABda|Yw zLYU`hoJy#c)ZAfv?D|-&&#(q@0eL#|VH69$n)$&^x)?vd+R z%Vv}@X&~cH`Xo0H%nuC>-6k9_5)rq`Q6dRUkOvjS9Q}}qV%oN|a#}g`?FB1{k6#-ZTk!o#3}2j61-G2!sVHP^dqCqP9zO}k2t|XA zW_mm?Nbx`;0?)?{Ef-JK()d!jhTC_dk1)zJF{x{UNCl=k5-(82QJgWGlR3AV@v5oh zuw{9YC{weN%%9AQ24x(RQ%3RTiPELAp4IWgOk5qx9dR>uA}xwhx>Gp6|CoJ*x!i_7 zVhL8Ko}^PJF>uBtiL&wOj2VszfEn^sW-3e)L_3nfL9QGCVe)oTsb{Vp*u<1`4wEVh zVeLc`2gYAy9c;3P6>TZx$> z3rCi-R$|oAJQcH>4-FGu5oFIad{cE5wu==e@|+^^rV<-;`i|w_eSKI-N>)}&WF&@J zC}2S_rbvlFQ%#7PjtXdmBB7L!b<8l_tIR}Ba%1M8u(_v2Qe| znR#=pZ@_(R~9?+Mp1fbG7IctyiZa zo?{C^p;)s52a`N_L9Lp@5(*QzUYm}z12*M$b?_9X`s=S;*$r^qzjkeNXg=qjD_%W& z_C_X?&b&G|_vM9S$6raM%7e-DebqWWHWCynx?vdAfq`=6q@}9o>a~%PBQZ0dzq`2j zTD(*)mx|?bk?j_Ox0WuitzTYxvrv$wmMDAaub!G)ym%EbD=$>w6!NxiA8qI9T3eatcGCArE7P-yJ!Z!hoRdF#Z6i-hTA{*J4Ni z2`U%f-0+9-`+t7AVuZq578@FjS7)G3)H7fM5DxZP&rRNukUN|X5~?Ad$NzZ_MR6Ss z*JvnULyo*df60J-2YZl^EW_W?TR5J0jF9eR!f(3D1O%jY3{eo_2VIyU{cacL5dL`= z=CRAW+=T_CzuScsNW-tXunI}+zp!87WTa>))qyECnLqBr4C!C*!W_cC=)ydC9&tiUw{8F^zd6W#h O^YKoX*&F5O;Qs<{3x&A= literal 0 HcmV?d00001 diff --git a/static/icons/andrew.svg b/static/icons/andrew.svg new file mode 100644 index 0000000..8ddab36 --- /dev/null +++ b/static/icons/andrew.svg @@ -0,0 +1,32 @@ + + + + + + +{ + "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." +} + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/andrew.ttf b/static/icons/andrew.ttf new file mode 100644 index 0000000000000000000000000000000000000000..84527c8272454384478f15d40e0e3f1899f6c1d1 GIT binary patch literal 2980 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 literal 0 HcmV?d00001