start adding stuff

1 files changed, 158 insertions, 78 deletions

diff --git a/src/app.css b/src/app.css
index 77bf6af..5e12d43 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,107 +1,187 @@
-@import '@fontsource/fira-mono';
-
 :root {
-	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Fira Mono', monospace;
-	--pure-white: #ffffff;
-	--primary-color: #b9c6d2;
-	--secondary-color: #d0dde9;
-	--tertiary-color: #edf0f8;
-	--accent-color: #ff3e00;
-	--heading-color: rgba(0, 0, 0, 0.7);
-	--text-color: #444444;
-	--background-without-opacity: rgba(255, 255, 255, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
+	--theme-main-background: #111;
+	--theme-lighter-background: #222;
+	--theme-lightest-background: #333;
+	--theme-main-text: #eee;
+	--theme-darker-text: #999;
+	--theme-transparent-border: rgba(128, 128, 128, 0.3);
+	--theme-yellow: #ff0;
+}
+/* minecraft font */
+@font-face {
+	font-family: Minecraft;
+	src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf);
+	font-display: swap;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
 body {
-	min-height: 100vh;
+	font-family: 'Atkinson Hyperlegible', sans-serif;
+	color: var(--theme-main-text);
+	background-color: var(--theme-main-background);
 	margin: 0;
-	background-color: var(--primary-color);
-	background: linear-gradient(
-		180deg,
-		var(--primary-color) 0%,
-		var(--secondary-color) 10.45%,
-		var(--tertiary-color) 41.35%
-	);
+	overflow-x: hidden;
 }
 
-body::before {
-	content: '';
-	width: 80vw;
-	height: 100vh;
-	position: absolute;
-	top: 0;
-	left: 10vw;
-	z-index: -1;
-	background: radial-gradient(
-		50% 50% at 50% 50%,
-		var(--pure-white) 0%,
-		rgba(255, 255, 255, 0) 100%
-	);
-	opacity: 0.05;
+html {
+	scroll-behavior: smooth;
 }
 
-#svelte {
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
+/* content is uglier when its max width */
+main {
+	margin: 0 auto;
+	width: 80%;
+	padding: 1em;
 }
 
-h1,
-h2,
-p {
-	font-weight: 400;
-	color: var(--heading-color);
+/* makes random height and stuff look less broken */
+* {
+	box-sizing: border-box;
+	vertical-align: baseline;
 }
 
-p {
-	line-height: 1.5;
+/* base styles for inputs */
+input[type='text'],
+input[type='submit'] {
+	-webkit-appearance: none;
+	background-color: transparent;
+	color: var(--theme-darker-text);
+	transition-duration: 250ms;
+	border: 1px solid var(--theme-transparent-border);
+	border-radius: 4px;
+	margin: 0;
+	height: 2em;
+	font-size: 1em;
 }
 
-a {
-	color: var(--accent-color);
-	text-decoration: none;
+/* base styles for text input boxes */
+input[type='text'] {
+	text-align: left;
+	padding-left: 0.5em;
 }
 
-a:hover {
-	text-decoration: underline;
+/* Selecting a text box */
+input[type='text']:focus {
+	/* make the text lighter */
+	color: var(--theme-main-text);
 }
 
-h1 {
-	font-size: 2rem;
-	text-align: center;
+/* base styles for buttons */
+input[type='submit'] {
+	margin-left: 0.2em;
+	cursor: pointer;
 }
 
-h2 {
-	font-size: 1rem;
+/* Hovering over a button */
+input[type='submit']:hover {
+	/* make the text lighter */
+	color: var(--theme-main-text);
 }
 
-pre {
-	font-size: 16px;
-	font-family: var(--font-mono);
-	background-color: rgba(255, 255, 255, 0.45);
-	border-radius: 3px;
-	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-	padding: 0.5em;
-	overflow-x: auto;
-	color: var(--text-color);
+/* base styles for anchor tags */
+a {
+	color: #19f;
+	text-decoration: none;
 }
 
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
+h1 {
+	font-size: 2.5em;
+	overflow-wrap: anywhere;
 }
 
-button:focus:not(:focus-visible) {
-	outline: none;
+h2,
+h3 {
+	margin-top: 0;
+	margin-bottom: 0.2em;
+}
+
+hr {
+	opacity: 0.2;
 }
 
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
+button {
+	outline: none;
+	font-family: inherit;
 }