feat: Add more stuff

1 files changed, 627 insertions, 0 deletions

diff --git a/src/app.postcss b/src/app.postcss
index b5c61c9..bbc170b 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,3 +1,630 @@
 @tailwind base;
 @tailwind components;
+
+/* colors + base typography */
+@layer base {
+	/* --------------------------------
+
+  (START) Global editor code https://codyhouse.co/ds/globals/colors
+
+  -------------------------------- */
+	:root,
+	[data-theme="default"] {
+		/* main */
+		--color-primary-darker: 250 84% 38%;
+		--color-primary-dark: 250 84% 46%;
+		--color-primary: 250 84% 54%;
+		--color-primary-light: 250 84% 60%;
+		--color-primary-lighter: 250 84% 67%;
+
+		--color-accent-darker: 342 89% 38%;
+		--color-accent-dark: 342 89% 43%;
+		--color-accent: 342 89% 48%;
+		--color-accent-light: 342 89% 56%;
+		--color-accent-lighter: 342 89% 62%;
+
+		--color-black: 231 15% 9%;
+		--color-white: 0 0% 100%;
+
+		/* feedback */
+		--color-warning-darker: 35 79% 48%;
+		--color-warning-dark: 35 79% 56%;
+		--color-warning: 35 79% 66%;
+		--color-warning-light: 35 79% 74%;
+		--color-warning-lighter: 35 79% 82%;
+
+		--color-success-darker: 170 78% 26%;
+		--color-success-dark: 170 78% 31%;
+		--color-success: 170 78% 36%;
+		--color-success-light: 170 78% 42%;
+		--color-success-lighter: 170 78% 47%;
+
+		--color-error-darker: 342 89% 38%;
+		--color-error-dark: 342 89% 43%;
+		--color-error: 342 89% 48%;
+		--color-error-light: 342 89% 56%;
+		--color-error-lighter: 342 89% 62%;
+
+		/* background */
+		--color-floor-darker: 240 4% 90%;
+		--color-floor-dark: 240 4% 95%;
+		--color-floor: 0 0% 100%;
+		--color-floor-light: 0 0% 100%;
+		--color-floor-lighter: 0 0% 100%;
+
+		/* color contrasts */
+		--color-contrast-lower: 240 4% 85%;
+		--color-contrast-low: 240 4% 65%;
+		--color-contrast-medium: 225 4% 47%;
+		--color-contrast-high: 230 7% 23%;
+		--color-contrast-higher: 230 13% 9%;
+	}
+
+	[data-theme="dark"] {
+		/* main */
+		--color-primary-darker: 250 100% 60%;
+		--color-primary-dark: 250 100% 64%;
+		--color-primary: 250 100% 69%;
+		--color-primary-light: 250 100% 72%;
+		--color-primary-lighter: 250 100% 76%;
+
+		--color-accent-darker: 342 92% 41%;
+		--color-accent-dark: 342 92% 47%;
+		--color-accent: 342 92% 54%;
+		--color-accent-light: 342 92% 60%;
+		--color-accent-lighter: 342 92% 65%;
+
+		--color-black: 230 13% 9%;
+		--color-white: 0 0% 100%;
+
+		/* feedback */
+		--color-warning-darker: 35 79% 48%;
+		--color-warning-dark: 35 79% 56%;
+		--color-warning: 35 79% 66%;
+		--color-warning-light: 35 79% 74%;
+		--color-warning-lighter: 35 79% 82%;
+
+		--color-success-darker: 170 78% 26%;
+		--color-success-dark: 170 78% 31%;
+		--color-success: 170 78% 36%;
+		--color-success-light: 170 78% 42%;
+		--color-success-lighter: 170 78% 47%;
+
+		--color-error-darker: 342 92% 41%;
+		--color-error-dark: 342 92% 47%;
+		--color-error: 342 92% 54%;
+		--color-error-light: 342 92% 60%;
+		--color-error-lighter: 342 92% 65%;
+
+		/* background */
+		--color-floor-darker: 232 7% 8%;
+		--color-floor-dark: 233 8% 11%;
+		--color-floor: 232 11% 15%;
+		--color-floor-light: 233 8% 19%;
+		--color-floor-lighter: 232 7% 22%;
+
+		/* color contrasts */
+		--color-contrast-lower: 240 6% 26%;
+		--color-contrast-low: 240 3% 41%;
+		--color-contrast-medium: 231 3% 57%;
+		--color-contrast-high: 240 5% 82%;
+		--color-contrast-higher: 240 100% 99%;
+
+		/* font rendering */
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	/* --------------------------------
+
+  (END) Global editor code
+
+  -------------------------------- */
+
+	body,
+	[data-theme] {
+		@apply bg-floor text-contrast-high;
+	}
+
+	/* --------------------------------
+
+  (START) Global editor code https://codyhouse.co/ds/globals/typography
+
+  -------------------------------- */
+
+	body {
+		@apply font-sans font-normal;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4 {
+		@apply font-bold;
+	}
+
+	/* --------------------------------
+
+  (END) Global editor code
+
+  -------------------------------- */
+
+	body {
+		@apply text-base lg:text-xl;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4 {
+		@apply text-contrast-higher;
+	}
+
+	h1 {
+		@apply text-3xl lg:text-5xl;
+	}
+
+	h2 {
+		@apply text-2xl lg:text-4xl;
+	}
+
+	h3 {
+		@apply text-xl lg:text-3xl;
+	}
+
+	h4 {
+		@apply text-lg lg:text-2xl;
+	}
+
+	small {
+		@apply text-sm lg:text-base;
+	}
+
+	a,
+	.link {
+		@apply text-primary underline;
+	}
+
+	strong {
+		@apply font-bold;
+	}
+
+	s {
+		@apply line-through;
+	}
+
+	u {
+		@apply underline;
+	}
+
+	mark {
+		@apply bg-accent/20 text-inherit;
+	}
+
+	/* no-js support */
+	html:not(.js) .no-js\:is-hidden {
+		display: none !important;
+	}
+}
+
+/* button components */
+
+/* --------------------------------
+-------------------------------- */
+@layer components {
+	.btn {
+		position: relative;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		white-space: nowrap;
+		font-size: 1em;
+		@apply px-3 lg:px-5 py-1.5 lg:py-2 rounded bg-floor-dark text-contrast-higher;
+		cursor: pointer;
+		text-decoration: none;
+		line-height: 1.2;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		transition: all 0.2s ease;
+		will-change: transform;
+	}
+
+	.btn:focus-visible {
+		box-shadow: 0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 2px hsla(var(--color-contrast-higher) / 0.15);
+		outline: none;
+	}
+
+	.btn:active {
+		transform: translateY(2px);
+	}
+
+	/* themes */
+	.btn--primary {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-white));
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-primary-darker) / 0.25),
+			0px 2px 6px hsla(var(--color-primary-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker) / 0.25);
+	}
+
+	.btn--primary:hover {
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25),
+			0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25);
+	}
+
+	.btn--primary:focus-visible {
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-primary-darker) / 0.25),
+			0px 1px 4px hsla(var(--color-primary-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker) / 0.25),
+			0 0 0 2px hsl(var(--color-floor)), 0px 0px 0px 4px hsl(var(--color-primary));
+	}
+
+	.btn--subtle {
+		background: hsl(var(--color-floor-lighter));
+		color: hsl(var(--color-contrast-higher));
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+			0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
+			0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.btn--subtle:hover {
+		background: hsl(var(--color-floor-light));
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+			0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
+	}
+
+	.btn--subtle:focus-visible {
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.1), 0px 0px 0px 1px hsla(var(--color-black) / 0.02),
+			0px 1px 3px -1px hsla(var(--color-black) / 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12),
+			0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-contrast-high));
+	}
+
+	.btn--accent {
+		background: hsl(var(--color-accent));
+		color: hsl(var(--color-white));
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 3px hsla(var(--color-accent-darker) / 0.25),
+			0px 2px 6px hsla(var(--color-accent-darker) / 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker) / 0.25);
+	}
+
+	.btn--accent:hover {
+		background: hsl(var(--color-accent-light));
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25),
+			0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1);
+	}
+
+	.btn--accent:focus-visible {
+		box-shadow: inset 0px 1px 0px hsla(var(--color-white) / 0.15), 0px 1px 2px hsla(var(--color-accent-darker) / 0.25),
+			0px 1px 4px hsla(var(--color-accent-darker) / 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker) / 0.1),
+			0 0 0 2px hsl(var(--color-floor)), 0 0 0 4px hsl(var(--color-accent));
+	}
+
+	/* feedback */
+	.btn--disabled,
+	.btn[disabled],
+	.btn[readonly] {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+}
+
+/* --------------------------------
+
+  (END) Global editor code
+
+-------------------------------- */
+
+/* input/form style  */
+
+/* --------------------------------
+
+  (START) Global editor code https://codyhouse.co/ds/globals/forms
+
+-------------------------------- */
+@layer components {
+	.form-control {
+		font-size: 1em;
+		@apply px-2 lg:px-3 py-1.5 lg:py-2 rounded bg-floor-dark;
+		line-height: 1.2;
+		box-shadow: inset 0px 0px 0px 1px hsl(var(--color-contrast-lower));
+		transition: all 0.2s ease;
+	}
+
+	.form-control::placeholder {
+		opacity: 1;
+		@apply text-contrast-low;
+	}
+
+	.form-control:focus,
+	.form-control:focus-within {
+		@apply bg-floor;
+		box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-primary)),
+			0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+		outline: none;
+	}
+
+	.form-control--disabled,
+	.form-control[disabled],
+	.form-control[readonly] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.form-control[aria-invalid="true"],
+	.form-control.form-control--error {
+		box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error));
+	}
+
+	.form-control[aria-invalid="true"]:focus,
+	.form-control[aria-invalid="true"]:focus-within,
+	.form-control.form-control--error:focus,
+	.form-control.form-control--error:focus-within {
+		box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower) / 0), 0px 0px 0px 2px hsl(var(--color-error)),
+			0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.form-legend {
+		@apply mb-3 lg:mb-5 text-contrast-higher text-lg lg:text-2xl;
+	}
+
+	.form-label {
+		display: inline-block;
+		@apply text-sm lg:text-base;
+	}
+}
+
+/* --------------------------------
+
+  (END) Global editor code
+
+-------------------------------- */
+
+/* text component + icon + inner shadow */
+@layer components {
+	/* Custom text component classes */
+	.text-component {
+		--line-height-multiplier: 1;
+		--text-space-y-multiplier: 1;
+		--heading-line-height: 1.2;
+		--body-line-height: 1.4;
+	}
+	.text-component.leading-extra-tight {
+		line-height: normal;
+		--heading-line-height: 1;
+		--body-line-height: 1.1;
+	}
+	.text-component.leading-tight {
+		--heading-line-height: 1.1;
+		--body-line-height: 1.2;
+		line-height: normal;
+	}
+	.text-component.leading-snug {
+		--heading-line-height: 1.15;
+		--body-line-height: 1.4;
+		line-height: normal;
+	}
+	.text-component.leading-normal {
+		--heading-line-height: 1.22;
+		--body-line-height: 1.58;
+		line-height: normal;
+	}
+	.text-component.leading-relaxed {
+		--heading-line-height: 1.3;
+		--body-line-height: 1.72;
+		line-height: normal;
+	}
+
+	.text-component.text-space-y-xxs {
+		--text-space-y-multiplier: 0.25;
+	}
+	.text-component.text-space-y-xs {
+		--text-space-y-multiplier: 0.5;
+	}
+	.text-component.text-space-y-sm {
+		--text-space-y-multiplier: 0.75;
+	}
+	.text-component.text-space-y-md {
+		--text-space-y-multiplier: 1.25;
+	}
+	.text-component.text-space-y-lg {
+		--text-space-y-multiplier: 1.5;
+	}
+	.text-component.text-space-y-xl {
+		--text-space-y-multiplier: 1.75;
+	}
+	.text-component.text-space-y-xxl {
+		--text-space-y-multiplier: 2;
+	}
+
+	.text-component :where(h1),
+	.text-component :where(h2),
+	.text-component :where(h3),
+	.text-component :where(h4) {
+		line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
+		margin-bottom: calc(0.3125em * var(--text-space-y-multiplier, 1));
+	}
+
+	.text-component :where(h2),
+	.text-component :where(h3),
+	.text-component :where(h4) {
+		margin-top: calc(0.9375em * var(--text-space-y-multiplier, 1));
+	}
+
+	.text-component p,
+	.text-component blockquote,
+	.text-component ul li,
+	.text-component ol li {
+		line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
+	}
+
+	.text-component ul,
+	.text-component ol,
+	.text-component p,
+	.text-component blockquote {
+		margin-bottom: calc(0.9375em * var(--text-space-y-multiplier, 1));
+	}
+
+	.text-component :where(ul),
+	.text-component :where(ol) {
+		list-style-position: inside;
+	}
+
+	.text-component ul ul,
+	.text-component ul ol,
+	.text-component ol ul,
+	.text-component ol ol {
+		padding-left: 1em;
+		margin-bottom: 0;
+	}
+
+	.text-component :where(ul) {
+		list-style-type: disc;
+	}
+
+	.text-component :where(ol) {
+		list-style-type: decimal;
+	}
+
+	.text-component :where(img) {
+		display: block;
+		margin: 0 auto;
+	}
+
+	.text-component :where(figcaption) {
+		@apply text-contrast-low text-sm lg:text-base;
+		text-align: center;
+		margin-top: 0.5em;
+	}
+
+	.text-component :where(em) {
+		font-style: italic;
+	}
+
+	.text-component :where(hr) {
+		@apply bg-contrast-lower;
+		height: 1px;
+		margin-top: calc(1.875em * var(--text-space-y-multiplier, 1));
+		margin-bottom: calc(1.875em * var(--text-space-y-multiplier, 1));
+		margin-left: auto;
+		margin-right: auto;
+		border: none;
+	}
+
+	.text-component > *:first-child {
+		margin-top: 0;
+	}
+
+	.text-component > *:last-child {
+		margin-bottom: 0;
+	}
+
+	.text-component :where(blockquote) {
+		padding-left: 1em;
+		@apply border-l-4 border-contrast-lower;
+		font-style: italic;
+	}
+
+	.article {
+		/* e.g., blog posts */
+		--body-line-height: 1.58;
+		--text-space-y-multiplier: 1.2;
+	}
+
+	/* Icons */
+	.icon {
+		--size: 1em;
+		height: var(--size);
+		width: var(--size);
+		display: inline-block;
+		color: inherit;
+		fill: currentColor;
+		line-height: 1;
+		flex-shrink: 0;
+		max-width: initial;
+	}
+
+	.icon--is-spinning {
+		animation: icon-spin 1s infinite linear;
+	}
+
+	@keyframes icon-spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* inner shadow */
+	:where(.inner-glow, .inner-glow-top) {
+		position: relative;
+	}
+
+	.inner-glow::after,
+	.inner-glow-top::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
+	.inner-glow::after {
+		box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
+	}
+	.inner-glow-top::after {
+		box-shadow: var(inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075));
+	}
+}
+
+/* #region CodyHouse components CSS */
+
+/* #endregion */
+
 @tailwind utilities;
+
+/* custom utility classes */
+@layer utilities {
+	/* overflow */
+	.momentum-scrolling {
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* perspective */
+	.perspective-xs {
+		perspective: 250px;
+	}
+	.perspective-sm {
+		perspective: 500px;
+	}
+	.perspective-md {
+		perspective: 1000px;
+	}
+	.perspective-lg {
+		perspective: 1500px;
+	}
+	.perspective-xl {
+		perspective: 3000px;
+	}
+
+	/* text shadow */
+	.text-shadow-xs {
+		text-shadow: 0 1px 1px rgba(#000, 0.15);
+	}
+	.text-shadow-sm {
+		text-shadow: 0 1px 2px rgba(#000, 0.25);
+	}
+	.text-shadow-md {
+		text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2);
+	}
+	.text-shadow-lg {
+		text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2);
+	}
+	.text-shadow-xl {
+		text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2),
+			0 6px 24px rgba(#000, 0.25);
+	}
+	.text-shadow-none {
+		text-shadow: none;
+	}
+}