restructuring (#56)

* restructuring

* pin svelte kit version & parallel execution

* update svelte kit

* correct test result assets

* add timeout

* correct locale path

* simplify crypto

* fix for #58

* add verbosity flag

* disable flaky test

packages/frontend/src/app.css

@@ -0,0 +1,126 @@
+@import '@fontsource/fira-mono';
+
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	font-family: 'Fira Mono', monospace;
+
+	--ui-bg-0: #111;
+	--ui-bg-0-85: #111111d9;
+	--ui-bg-1: #333;
+	--ui-bg-2: #444;
+	--ui-text-0: #fefefe;
+	--ui-text-1: #eee;
+	--ui-clr-primary: hsl(186, 65%, 55%);
+	--ui-clr-primary-alt: hsl(186, 85%, 35%);
+	--ui-clr-error: hsl(357, 77%, 51%);
+	--ui-clr-error-alt: hsl(357, 87%, 41%);
+
+	--ui-anim: all 150ms ease;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--ui-bg-0: #fefefe;
+		--ui-bg-0-85: #fefefed9;
+		--ui-bg-1: #eee;
+		--ui-bg-2: #e2e2e2;
+		--ui-text-0: #111;
+		--ui-text-1: #333;
+	}
+}
+
+:root[theme='dark'] {
+	--ui-bg-0: #111 !important;
+	--ui-bg-0-85: #111111d9 !important;
+	--ui-bg-1: #333 !important;
+	--ui-bg-2: #444 !important;
+	--ui-text-0: #fefefe !important;
+	--ui-text-1: #eee !important;
+}
+:root[theme='light'] {
+	--ui-bg-0: #fefefe !important;
+	--ui-bg-0-85: #fefefed9 !important;
+	--ui-bg-1: #eee !important;
+	--ui-bg-2: #e2e2e2 !important;
+	--ui-text-0: #111 !important;
+	--ui-text-1: #333 !important;
+}
+
+.error-text {
+	color: var(--ui-clr-error);
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--ui-bg-0);
+	color: var(--ui-text-0);
+}
+
+a {
+	color: inherit;
+	text-decoration: inherit;
+	box-sizing: content-box;
+	border-bottom: 2px solid var(--ui-bg-2);
+	cursor: pointer;
+}
+
+a:active {
+	border-color: var(--ui-clr-primary);
+}
+
+a:hover {
+	border-color: var(--ui-text-0);
+}
+
+input,
+textarea,
+button {
+	appearance: none;
+	-webkit-appearance: none;
+	border-radius: 0;
+	transition: var(--ui-anim);
+	font-family: inherit;
+	font-size: inherit;
+	background: inherit;
+	color: inherit;
+}
+
+*:disabled,
+*[disabled='true'] {
+	opacity: 0.5;
+}
+
+fieldset {
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.box {
+	width: 100%;
+	min-height: min(calc(100vh - 30rem), 20rem);
+	margin: 0;
+	border: 2px solid var(--ui-bg-1);
+	resize: vertical;
+	outline: none;
+	padding: 0.5rem;
+}
+
+@media screen and (max-width: 30rem) {
+	.box {
+		min-height: calc(100vh - 25rem);
+	}
+}
+
+.box:hover,
+.box:focus {
+	border-color: var(--ui-clr-primary);
+}
+
+.tr {
+	text-align: right;
+}