initial commit

src/styles/_accordion.css

@@ -0,0 +1,73 @@
+.hero__accordion-container {
+	grid-column: 1 / -1;
+	max-width: 600px;
+	padding: 1rem;
+}
+
+.hero__accordion-item {
+	overflow: clip;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+	cursor: pointer;
+	padding: 1rem 0;
+}
+
+.hero__accordion-item:not(:last-child) {
+	border-bottom: 1px solid var(--neutral-content);
+}
+
+.hero__accordion-details[open] + .hero__accordion-item__content {
+	grid-template-rows: 1fr;
+	padding: 10px;
+}
+
+.hero__accordion-details[open] .hero__accordion-item__title-container:after {
+	transform: rotate(270deg);
+}
+
+.hero__accordion-item__summary {
+	display: block;
+
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.hero__accordion-item__title-container {
+	display: flex;
+	justify-content: space-between;
+
+	&:after {
+		content: "\276F";
+		color: var(--base-content);
+		margin-right: 1rem;
+		transform: rotate(90deg);
+		transition: transform 0.3s ease;
+	}
+}
+
+.hero__accordion-item__title {
+	color: var(--base-content);
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+.hero__accordion-item__content {
+	padding: 0 10px;
+	display: grid;
+	grid-template-rows: 0fr;
+	transition:
+		grid-template-rows 0.3s ease,
+		padding 0.3s ease;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+.hero__accordion-item__content__inner {
+	color: var(--neutral-content);
+	overflow: hidden;
+	margin: 0;
+}

src/styles/_file-input.css

@@ -0,0 +1,22 @@
+.file-input {
+	height: 3rem;
+	padding-inline-end: 1rem;
+	font-size: 0.875rem;
+	line-height: 2;
+	border-width: 1px;
+	border-color: var(--accent);
+	border-radius: 0.5rem;
+	background-color: var(--header-bg);
+	flex-shrink: 1;
+}
+
+.file-input::file-selector-button {
+	color: var(--header-bg);
+	font-weight: 600;
+	text-transform: uppercase;
+	text-align: center;
+	background-color: var(--accent);
+	cursor: pointer;
+	height: 100%;
+	padding: 0 1rem;
+}

src/styles/_pgn-viewer.css

@@ -0,0 +1,7 @@
+@import "./vendor/lichess-pgn-viewer.css";
+
+.lpv-board {
+	max-width: 600px;
+	--board-color: #b58863;
+	font-family: "Noto Sans", sans-serif;
+}