Update formatting settings and reformat the codebase

.editorconfig

@@ -1,7 +1,7 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true

.eleventy.js

@@ -1,5 +1,4 @@
 const fs = require('fs');
-const path = require('path');
 
 const { DateTime } = require('luxon');
 const pluginRss = require('@11ty/eleventy-plugin-rss');

.prettierrc

@@ -3,5 +3,6 @@
 	"printWidth": 80,
 	"proseWrap": "preserve",
 	"singleQuote": true,
-  "trailingComma": "es5"
+	"trailingComma": "es5",
+	"useTabs": true
 }

src/styles/components/_actions.scss

@@ -118,71 +118,103 @@
 %action-icon-hover {
 	.emphasis-gradient {
 		@keyframes action-icon-emphasis-gradient-1 {
-      0% { stop-color: colors.$blue-500; }
+			0% {
-      40% { stop-color: colors.$yellow-500; }
+				stop-color: colors.$blue-500;
-      80% { stop-color: colors.$teal-500; }
+			}
+			40% {
+				stop-color: colors.$yellow-500;
+			}
+			80% {
+				stop-color: colors.$teal-500;
+			}
 		}
 
 		@keyframes action-icon-emphasis-gradient-2 {
-      0% { stop-color: colors.$blue-500; }
+			0% {
-      20% { stop-color: colors.$blue-800; }
+				stop-color: colors.$blue-500;
-      60% { stop-color: colors.$yellow-500; }
+			}
-      100% { stop-color: colors.$teal-500; }
+			20% {
+				stop-color: colors.$blue-800;
+			}
+			60% {
+				stop-color: colors.$yellow-500;
+			}
+			100% {
+				stop-color: colors.$teal-500;
+			}
 		}
 
 		@for $i from 1 through 2 {
 			> stop:nth-of-type(#{$i}) {
 				stop-color: colors.$teal-500;
-        animation:
+				animation: motion.$prominent
-          motion.$prominent 0s 1 normal backwards running
+					0s
+					1
+					normal
+					backwards
+					running
 					action-icon-emphasis-gradient-#{$i};
 			}
 		}
 	}
 
 	.heart-left {
-    $final-transformation:
+		$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
-      translateX(-0.8rem) translateY(1.4rem) scale(1.5) rotate(-25deg);
+			rotate(-25deg);
 
 		@keyframes action-icon-heart-left {
-      0% { transform: none; }
+			0% {
-      50% {
+				transform: none;
-        transform:
+			}
-          translateX(0.2rem) translateY(0.8rem) scale(1.2) rotate(-10deg);
+			50% {
+				transform: translateX(0.2rem) translateY(0.8rem) scale(1.2)
+					rotate(-10deg);
+			}
+			100% {
+				transform: $final-transformation;
 			}
-      100% { transform: $final-transformation; }
 		}
 
 		transform: $final-transformation;
-    animation:
+		animation: motion.$gentle 0s 1 normal backwards running
-      motion.$gentle 0s 1 normal backwards running action-icon-heart-left;
+			action-icon-heart-left;
 	}
 
 	.heart-right {
-    $final-transformation:
+		$final-transformation: translateX(1.4rem) translateY(-0.1rem) scale(1.6)
-      translateX(1.4rem) translateY(-0.1rem) scale(1.6) rotate(15deg);
+			rotate(15deg);
 
 		@keyframes action-icon-heart-right {
-      0% { transform: none; }
+			0% {
-      50% {
+				transform: none;
-        transform:
+			}
-          translateX(1.3rem) translateY(0.8rem) scale(1.4) rotate(30deg);
+			50% {
+				transform: translateX(1.3rem) translateY(0.8rem) scale(1.4)
+					rotate(30deg);
+			}
+			100% {
+				transform: $final-transformation;
 			}
-      100% { transform: $final-transformation; }
 		}
 
 		transform: $final-transformation;
-    animation:
+		animation: motion.$gentle 0s 1 normal backwards running
-      motion.$gentle 0s 1 normal backwards running action-icon-heart-right;
+			action-icon-heart-right;
 	}
 
 	.coin {
 		$final-transformation: scale(0.8);
 
 		@keyframes action-icon-coin {
-      0% { transform: none; }
+			0% {
-      50% { transform: scale(1.1); }
+				transform: none;
-      100% { transform: $final-transformation; }
+			}
+			50% {
+				transform: scale(1.1);
+			}
+			100% {
+				transform: $final-transformation;
+			}
 		}
 
 		transform: $final-transformation;

src/styles/components/_form-choices.scss

@@ -60,8 +60,12 @@
 	transition: motion.$subtle background-color, motion.$subtle box-shadow;
 
 	@keyframes form-choice-hover {
-    0% { background-position: -100% 0; }
+		0% {
-    100% { background-position: 200% 0; }
+			background-position: -100% 0;
+		}
+		100% {
+			background-position: 200% 0;
+		}
 	}
 
 	&:hover,
@@ -77,8 +81,7 @@
 		background-repeat: no-repeat;
 		color: inherit;
 		@include colors.card-shadow(colors.$yellow-500);
-    animation:
+		animation: motion.$prominent 0s 1 normal both running form-choice-hover;
-      motion.$prominent 0s 1 normal both running form-choice-hover;
 
 		> em {
 			background-color: transparent;

src/styles/components/_markup.scss

@@ -57,7 +57,9 @@ p {
 	@extend %content-gutter;
 }
 
-ul, ol, dl {
+ul,
+ol,
+dl {
 	@extend %content-gutter;
 }
 
@@ -106,7 +108,8 @@ blockquote {
 	text-decoration: none;
 	line-height: 3rem;
 	border: 1px solid colors.$main-text;
-  transition: font motion.$subtle, border-color motion.$subtle, color motion.$subtle;
+	transition: font motion.$subtle, border-color motion.$subtle,
+		color motion.$subtle;
 
 	&:hover {
 		border-color: colors.$blue-800;

src/styles/components/_timeline.scss

@@ -67,7 +67,8 @@
 		line-height: #{$stampSize - 2 * $lineWeight};
 		text-align: center;
 		background-color: colors.$gray-50;
-    transition: border-color motion.$subtle, background-color motion.$subtle, color motion.$subtle;
+		transition: border-color motion.$subtle, background-color motion.$subtle,
+			color motion.$subtle;
 
 		&.small {
 			background-color: colors.$gray-300;

src/styles/finish.scss

@@ -11,11 +11,21 @@
 
 .finish-hero {
 	@keyframes finish-hero {
-    0% { stroke-width: 3px; }
+		0% {
-    10% { stroke-width: 3px; }
+			stroke-width: 3px;
-    20% { stroke-width: 5px; }
+		}
-    60% { stroke-width: 5px; }
+		10% {
-    100% { stroke-width: 3px; }
+			stroke-width: 3px;
+		}
+		20% {
+			stroke-width: 5px;
+		}
+		60% {
+			stroke-width: 5px;
+		}
+		100% {
+			stroke-width: 3px;
+		}
 	}
 
 	display: block;
@@ -28,28 +38,20 @@
 
 	> .stroke-gradient {
 		$idle-color: colors.$gray-900;
-    $colors: [
+		$colors: [ $idle-color $idle-color $idle-color colors.$blue-500
-      $idle-color
+			colors.$teal-500 colors.$yellow-500 colors.$teal-500 colors.$gray-300
-      $idle-color
+			colors.$yellow-500 colors.$blue-500 colors.$gray-300 $idle-color
-      $idle-color
+			$idle-color $idle-color ];
-      colors.$blue-500
-      colors.$teal-500
-      colors.$yellow-500
-      colors.$teal-500
-      colors.$gray-300
-      colors.$yellow-500
-      colors.$blue-500
-      colors.$gray-300
-      $idle-color
-      $idle-color
-      $idle-color
-    ];
 
 		@for $i from 1 through 4 {
 			> stop:nth-of-type(#{$i}) {
 				@keyframes finish-stroke-gradient-#{$i} {
-          0% { stop-color: $idle-color; }
+					0% {
-          15% { stop-color: $idle-color; }
+						stop-color: $idle-color;
+					}
+					15% {
+						stop-color: $idle-color;
+					}
 					// This is some which magic that chooses the correct colors for each
 					// stop - don't change it unless you know what you are doing! In
 					// general, the output will look something like this:
@@ -66,22 +68,39 @@
 							stop-color: list.nth($colors, 4 + $j - $i);
 						}
 					}
-          70% { stop-color: $idle-color; }
+					70% {
-          100% { stop-color: $idle-color; }
+						stop-color: $idle-color;
+					}
+					100% {
+						stop-color: $idle-color;
+					}
 				}
 
-        animation:
+				animation: motion.$prominent
-          motion.$prominent 0s 1 normal both running finish-stroke-gradient-#{$i};
+					0s
+					1
+					normal
+					both
+					running
+					finish-stroke-gradient-#{$i};
 			}
 		}
 	}
 
 	> .cable {
 		@keyframes finish-hero-cable {
-      0% { transform: translateX(0.5rem); }
+			0% {
-      20% { transform: translateX(0.5rem); }
+				transform: translateX(0.5rem);
-      70% { transform: translateX(0.5rem); }
+			}
-      100% { transform: none; }
+			20% {
+				transform: translateX(0.5rem);
+			}
+			70% {
+				transform: translateX(0.5rem);
+			}
+			100% {
+				transform: none;
+			}
 		}
 
 		animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
@@ -89,21 +108,43 @@
 
 	> .plug {
 		@keyframes finish-hero-plug {
-      0% { transform: translateX(-0.5rem); }
+			0% {
-      20% { transform: translateX(-0.5rem); }
+				transform: translateX(-0.5rem);
-      70% { transform: translateX(-0.5rem); }
+			}
-      100% { transform: none; }
+			20% {
+				transform: translateX(-0.5rem);
+			}
+			70% {
+				transform: translateX(-0.5rem);
+			}
+			100% {
+				transform: none;
+			}
 		}
 		@keyframes finish-hero-plug-transition {
-      0% { fill: colors.$gray-900; }
+			0% {
-      100% { fill: colors.$gray-600; }
+				fill: colors.$gray-900;
+			}
+			100% {
+				fill: colors.$gray-600;
+			}
 		}
 		@keyframes finish-hero-plug-idle {
-      0% { fill: colors.$gray-600; }
+			0% {
-      25% { fill: colors.$teal-600; }
+				fill: colors.$gray-600;
-      50% { fill: colors.$yellow-600; }
+			}
-      75% { fill: colors.$blue-800; }
+			25% {
-      100% { fill: colors.$gray-600; }
+				fill: colors.$teal-600;
+			}
+			50% {
+				fill: colors.$yellow-600;
+			}
+			75% {
+				fill: colors.$blue-800;
+			}
+			100% {
+				fill: colors.$gray-600;
+			}
 		}
 
 		animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
@@ -113,10 +154,18 @@
 
 	> .contacts {
 		@keyframes finish-hero-contacts {
-      0% { transform: translateX(0rem); }
+			0% {
-      20% { transform: translateX(-0.7rem); }
+				transform: translateX(0rem);
-      70% { transform: translateX(-0.7rem); }
+			}
-      100% { transform: none; }
+			20% {
+				transform: translateX(-0.7rem);
+			}
+			70% {
+				transform: translateX(-0.7rem);
+			}
+			100% {
+				transform: none;
+			}
 		}
 
 		animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;

src/styles/lib/_motion.scss

@@ -1,4 +1,4 @@
 $subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
 $gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
-$prominent: 0.7s cubic-bezier(.45,.16,.38,.7);
+$prominent: 0.7s cubic-bezier(0.45, 0.16, 0.38, 0.7);
-$background: 8s cubic-bezier(.45,.16,.38,.7);
+$background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7);