mirror of https://github.com/andrewgioia/blog.git
Initial blog design with first post almost complete
This commit is contained in:
commit
c6e83f21dd
|
|
@ -0,0 +1,4 @@
|
|||
.DS_Store
|
||||
logs.txt
|
||||
node_modules
|
||||
public
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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";
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1 @@
|
|||
baseURL: https://blog.lan
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
baseURL: https://posts.andrewgioia.com
|
||||
enableRobotsTXT: true
|
||||
logFile: "~/.log/hugo.txt"
|
||||
|
|
@ -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 >}}
|
||||
<p class="big">
|
||||
Of all the very rational <a href="#reasons">reasons to boycott Facebook</a> or any commercial social media platform, <a href="https://news.ycombinator.com/item?id=23627905" target="blank">that "its support of free speech" has taken hold</a> is alarming.</p>
|
||||
{{< /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 >}}
|
||||
<p class="swqm"><em>"Private companies can do whatever they want"</em> 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. <strong>This is a huge mistake with irrevocable damage,</strong> and if free speech as a moral guideline doesn't persuade you then the realities of voluntarily privatizing "truth arbitration" absolutely should.</p>
|
||||
{{< /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 >}}
|
||||
<p class="big">Social media by design cannot arbitrate truth, and any path with this as its goal is necessarily doomed.</p>
|
||||
{{< /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 >}}
|
||||
<p class="swqm"><em>"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."</em></p>
|
||||
{{< /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 >}}
|
||||
<p class="big">Facebook, Twitter, YouTube, and Reddit are not just carriers, <strong>they're also the town square, courthouse steps, public parks, and shopping malls</strong>. They should not regulate content because of this, and hopefully one day they won't be able to.</p>
|
||||
{{< /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 >}}
|
||||
<p class="big">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 <strong>we're voluntarily forfeiting centuries of speech protections</strong> into the hands of an oligopoly beholden only to the interests of their shareholders and officers.</p>
|
||||
{{< /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 >}}
|
||||
<p class="big">Social media platforms should revert to just that: <em>social</em> communication channels and communities to share media and information, concomitant with a reevaluation of them as leisure activities, not authoritative sources.</p>
|
||||
{{< /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 >}}
|
||||
<p class="big">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!</p>
|
||||
{{< /html >}}
|
||||
|
|
@ -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
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
## Posts page
|
||||
|
||||
Is this a list page? Do I go to `/posts`?
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
{{ block "title" . }} {{ .Site.Title }} {{ end }}
|
||||
</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{ block "header" . }}{{ partial "header.html" .}}{{ end }}
|
||||
|
||||
{{ block "main" . }}
|
||||
<!-- The part of the page that begins to differ between templates -->
|
||||
{{ end }}
|
||||
|
||||
{{ block "footer" . }}
|
||||
{{ end }}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{{ define "main" }}
|
||||
<h1>Posts</h1>
|
||||
{{ range .Pages }}
|
||||
<article>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{{ define "title" }}
|
||||
{{ .Title }} – {{ .Site.Title }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<main id="post" aria-role="main">
|
||||
<aside>
|
||||
<h1>
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<time>
|
||||
{{ .PublishDate.Format "January 2, 2006" }}
|
||||
</time>
|
||||
</aside>
|
||||
<article>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</main>
|
||||
{{ .TableOfContents }}
|
||||
<a id="top" class="arrow back" href="#">To the top!</a>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{{ define "main" }}
|
||||
<main id="home" aria-role="main">
|
||||
<div class="intro">
|
||||
{{.Content}}
|
||||
</div>
|
||||
<ul class="list">
|
||||
{{ range .Site.RegularPages }}
|
||||
<li>
|
||||
<div>
|
||||
<a href="{{ .Permalink }}" class="arrow">{{ .LinkTitle }}</a>
|
||||
</div>
|
||||
<time>
|
||||
{{ .PublishDate.Format "January 2006" }}
|
||||
</time>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<header>
|
||||
<h1>
|
||||
<a href="/" class="arrow back">{{ .Site.Title }}</a>
|
||||
<span class="name">{{ .Site.Params.SubTitle }}</span><!--
|
||||
--><span class="slug">{{ with .Params.slug }}/{{ . }}{{ end }}</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{.Inner}}
|
||||
|
|
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"style.css","MediaType":"text/css","Data":{}}
|
||||
|
|
@ -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}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"scss/main.min.afb5c24c1652247c72072cc1b9ddb9cd8eab2da1db040debe3a25291c5ceafdd.css","MediaType":"text/css","Data":{"Integrity":"sha256-r7XCTBZSJHxyByzBud25zY6rLaHbBA3r46JSkcXOr90="}}
|
||||
|
|
@ -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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/style.css","MediaType":"text/css","Data":{}}
|
||||
|
|
@ -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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"scss/main.css","MediaType":"text/css","Data":{}}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
<json>
|
||||
<![CDATA[
|
||||
{
|
||||
"fontFamily": "andrew",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 0,
|
||||
"fontURL": "https://andrewgioia.com",
|
||||
"version": "Version 1.0",
|
||||
"fontId": "andrew",
|
||||
"psName": "andrew",
|
||||
"subFamily": "Regular",
|
||||
"fullName": "andrew",
|
||||
"description": "Font generated by IcoMoon."
|
||||
}
|
||||
]]>
|
||||
</json>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="andrew" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="github" data-tags="Github" d="M339.072 116.651c5.632 1.621 15.147-0.427 14.507-7.893-3.755-8.448-19.499-8.064-21.077 1.707 1.323 2.731 3.627 5.12 6.571 6.187v0zM386.219 120.704c-16.469-2.475-12.587 2.347-16.512-8.789 4.779-8.192 17.707-4.821 21.035 3.157l-4.523 5.632zM297.685 122.624v0c-3.029-1.408-5.035-5.333-2.603-8.192 3.84-6.955 18.133-9.003 19.584 0.597-2.091 6.827-10.581 10.112-16.981 7.595zM270.251 143.958l-6.101-0.469c-7.979-7.808 8.448-22.997 15.275-13.696-0.469 10.112 1.237 4.779-9.173 14.165zM242.645 171.392v0c-8.619-5.589 2.56-21.333 10.709-15.573 4.053 6.869-2.645 17.408-10.709 15.573zM221.739 195.414v0c-2.517-6.272 2.133-12.416 8.192-14.037l4.565 1.707c2.347 7.595-5.163 15.189-12.757 12.331zM208.171 212.48c-3.371 2.048-5.931-1.579-7.851-3.84 2.773-5.333 10.752-9.643 14.763-3.157-1.237 3.243-3.328 6.272-6.912 6.997zM512 896c-108.971-7.168-221.653-34.773-303.744-111.147-18.688-11.861-31.189-31.189-48.256-45.141-70.955-76.117-115.84-176-125.44-279.595-1.749-23.253-3.925-46.763-1.536-70.101 2.688-61.952 18.048-123.307 44.331-179.456 27.392-58.752 67.029-111.659 115.371-154.88 47.616-42.539 103.808-75.563 164.267-96.171 8.491-3.285 18.603-2.901 26.496 1.877 6.571 4.437 9.941 12.459 9.941 20.224-0.128 29.696-0.683 59.392-0.768 89.088-31.189-6.613-64.299-8.96-95.275-0.043-28.16 8.064-53.803 27.605-65.621 54.827-10.197 25.899-24.789 51.243-47.531 68.011-7.723 4.949-15.701 9.941-21.675 16.981-1.792 2.176-3.243 4.693-3.584 7.509 0.768 4.693 5.803 6.528 9.856 7.552 17.493 3.627 35.456-2.389 50.304-11.52 15.445-9.984 28.288-23.979 37.461-39.936 12.843-21.205 32.512-39.253 56.832-45.739 26.923-7.68 55.765-1.92 80.853 9.088 3.328 23.808 12.331 48.043 30.635 64.427-21.931 1.877-43.605 6.144-64.853 11.733-27.947 7.68-55.083 19.456-78.251 37.077-20.736 15.915-37.888 36.523-49.579 59.947-16.341 32.043-23.381 68.053-25.429 103.723-1.195 15.488-1.365 31.104 0.469 46.549 3.797 39.637 21.163 77.653 48.256 106.752-15.189 39.509-11.477 84.139 3.072 123.221 0.896 1.493 1.109 4.395 3.328 4.352 15.787 1.963 31.659-1.579 46.635-6.315 30.037-9.685 57.301-25.984 83.541-43.136 59.52 15.787 122.155 20.053 183.168 11.52 19.456-2.432 38.571-7.040 57.6-11.392 23.467 15.36 47.744 29.909 74.112 39.851 18.219 6.4 37.845 12.416 57.301 9.003 5.589-12.971 9.259-26.837 11.776-40.747 4.608-28.544 3.883-58.837-6.784-86.059 4.523-5.675 9.472-11.093 13.696-17.067 21.248-28.757 33.451-63.957 35.2-99.669 1.237-33.792-1.408-67.925-10.368-100.651-8.149-29.568-22.357-57.856-43.477-80.299-21.333-23.125-49.28-39.253-78.72-49.792-27.819-9.813-57.003-15.189-86.272-18.475 24.576-21.931 32.555-56.661 32.512-88.405-0.085-43.947-0.085-87.936-0.384-131.883-0.384-9.557 5.163-19.712 14.635-22.656 10.496-4.139 21.547 0.128 31.445 3.883 33.152 12.245 65.067 28.075 94.72 47.317 78.848 50.56 142.165 124.757 179.755 210.517 23.296 52.907 36.651 110.080 39.808 167.765 0.299 18.219 0.256 36.437-0.128 54.699-1.707 19.285-3.541 38.528-7.211 57.557-11.477 63.061-35.925 123.733-71.296 177.195-29.696 40.661-60.075 82.261-102.357 111.232h-0.597c-80.811 72.235-192.043 103.253-298.24 106.795z" />
|
||||
<glyph unicode="" glyph-name="mastodon" data-tags="Mastodon" d="M507.52 896h10.88c36.395-0.555 72.789-1.835 109.056-4.907 34.475-2.859 68.864-7.040 102.827-13.739 26.667-5.376 53.205-12.16 78.464-22.528 17.621-6.955 33.152-18.176 47.403-30.507 23.424-20.48 42.752-45.483 57.344-72.96 20.565-38.656 33.664-81.792 35.413-125.44 7.467-184.363 0.085-231.211-14.251-285.909-3.328-12.8-9.984-30.037-16.981-41.216-14.208-22.528-34.176-40.917-55.68-56.448-36.267-25.813-77.909-43.776-121.131-54.272-16.256-3.968-32.853-6.656-49.493-8.448-40.491-4.821-81.109-9.173-121.899-10.496-38.059-1.365-76.203 0.811-114.133 4.565-43.904 4.48-87.637 11.136-130.731 20.864 0.171-24.491 3.371-49.579 13.995-71.936 6.869-14.507 17.152-27.392 29.952-37.077 20.992-15.872 46.976-23.381 72.661-27.435 16.939-2.731 34.048-4.011 51.2-4.821 20.821-1.109 41.728-1.707 62.592-0.384 40.789 2.475 81.408 9.131 120.661 20.523 1.195-25.771 2.347-51.499 3.541-77.269-26.283-12.715-54.528-20.821-82.987-27.051-34.859-7.424-70.485-11.008-106.112-11.776h-20.224c-51.627 0.939-103.125 7.851-153.344 19.84-16.043 3.84-32.128 7.851-47.573 13.824-27.477 10.325-53.205 25.472-75.136 44.971-23.637 20.907-42.752 46.549-57.557 74.325-22.741 42.709-35.968 89.771-44.587 137.216-13.995 78.293-16 158.123-16.597 237.525v82.048c0.427 7.936 0.128 15.872 0.299 23.808 0.256 44.203 6.997 88.747 23.125 130.091 11.648 29.995 28.373 58.112 49.835 82.133 16.683 18.517 35.925 35.072 58.027 46.805 14.421 6.955 29.611 12.203 44.971 16.725 47.915 13.739 97.536 20.139 147.072 24.448 36.267 2.987 72.704 4.395 109.099 4.907zM333.696 731.392c-20.139-5.504-38.827-16.128-53.973-30.507-18.219-16.939-30.933-39.253-38.187-62.933-6.827-22.059-9.173-45.227-9.088-68.181 0.043-81.451 0-162.901 0.043-244.352 32.555 0 65.109-0.043 97.664 0.043 0 80.939-0.043 161.92 0.043 242.859 0.384 16.427 2.901 33.536 11.733 47.701 6.357 10.283 16.555 17.92 28.075 21.461 12.245 3.755 25.344 4.053 37.973 2.304 11.904-1.792 23.595-6.571 32.427-14.891 9.515-8.747 15.445-20.693 18.901-33.024 4.053-14.507 5.077-29.696 4.992-44.672 0-42.624-0.043-85.205 0-127.829 32.384-0.043 64.725 0 97.067 0 0.043 43.563 0 87.125 0.043 130.688 0.043 16.683 1.579 33.664 7.424 49.451 4.395 11.861 11.776 22.912 22.315 30.165 11.52 7.979 25.771 11.051 39.595 11.136 13.056 0.128 26.624-2.133 37.76-9.301 9.6-6.059 16.555-15.659 20.565-26.155 5.376-13.867 6.571-28.885 6.485-43.648 0-78.763-0.043-157.525 0-236.288 32.555 0 65.109 0.043 97.664-0.043 0 81.451 0 162.901 0 244.352 0 11.691-0.512 23.381-2.005 34.987-2.987 23.467-9.813 46.72-21.973 67.115-12.672 21.504-31.531 39.253-53.76 50.517-25.515 12.928-54.955 16.384-83.2 13.696-16.768-1.664-33.451-6.016-48.469-13.781-20.949-10.709-38.187-28.075-49.835-48.384-7.040-11.947-14.336-23.765-21.205-35.797-0.64 1.92-1.835 3.541-2.859 5.248-6.784 11.435-13.611 22.827-20.437 34.261-12.032 19.541-29.355 35.968-50.133 45.909-19.2 9.387-40.747 13.227-62.037 13.355-14.677 0.085-29.44-1.451-43.605-5.461z" />
|
||||
<glyph unicode="" glyph-name="arrow" data-tags="arrow-up-right" d="M298.667 597.334h323.669l-353.835-353.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l353.835 353.835v-323.669c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v426.667c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-3.925 3.925-8.619 7.083-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-426.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
|
||||
<glyph unicode="" glyph-name="email" data-tags="Email" d="M525.099 896c-285.099 0-482.261-192.128-482.261-469.888 0-281.173 196.608-468.779 491.307-468.779 53.504 0 106.453 6.187 147.029 16.896v100.309c-29.312-9.045-82.816-15.787-134.656-15.787-238.891 0-387.627 140.288-387.627 364.544 0 221.397 147.627 373.547 364.544 373.547 207.872 0 341.419-130.731 341.419-334.677 0-104.789-31.531-170.709-81.109-170.709-30.464 0-48.469 23.637-48.469 63.659v286.208h-129.579v-66.475h-10.709c-22.528 50.688-70.443 80-131.285 80-111.573 0-186.496-92.416-186.496-229.291 0-143.147 77.739-237.781 194.944-237.781 64.811 0 108.757 28.715 131.84 85.632h10.709c15.189-53.504 67.029-85.077 139.733-85.077 140.288 0 226.475 109.867 226.475 287.36 0 250.155-184.235 420.309-455.808 420.309zM507.093 538.795c51.243 0 83.371-44.501 83.371-117.205 0-72.661-31.531-117.205-83.371-117.205-51.285 0-81.707 43.947-81.707 117.205s30.421 117.205 81.707 117.205z" />
|
||||
<glyph unicode="" glyph-name="arrow-left" data-tags="arrow-up-left" d="M341.333 213.334v323.669l353.835-353.835c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-353.835 353.835h323.669c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-426.667c-23.552 0-42.667-19.115-42.667-42.667v-426.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue