Index page for apps

Without this, it's difficult to grasp the overall project.
pocka · Nov 11, 2024 · 469bacf · 469bacf
1 parent 6c75ebb
commit 469bacf
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 3 deletions.
diff --git a/src/index.html b/src/index.html
@@ -5,14 +5,60 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Ptimer</title>
 		<link rel="icon" type="image/svg+xml" href="./logo.svg" />
+		<style>
+			@import "./index/main.css";
+		</style>
+		<meta http-equiv="content-security-policy" content="default-src 'self'; frame-ancestors 'none'" />
 	</head>
 	<body>
-		<ul>
+		<ul class="links">
 			<li>
-				<a href="./simple/">Player</a>
+				<a class="link" href="./simple/">
+					<span class="link-title">Web Player</span>
+					<span class="link-description">
+						Browser application that plays <code>.ptimer</code> file.
+					</span>
+				</a>
 			</li>
 			<li>
-				<a href="./builder/">Builder</a>
+				<a class="link" href="./builder/">
+					<span class="link-title">Builder</span>
+					<span class="link-description">
+						Browser application to create or edit <code>.ptimer</code> file.
+					</span>
+				</a>
+			</li>
+			<li>
+				<a class="link" href="https://github.com/pocka/ptimer-web">
+					<span class="link-title">Code</span>
+					<span class="link-description">
+						Source code for this page and the browser applications.
+					</span>
+				</a>
+			</li>
+			<li>
+				<a class="link" href="https://github.com/pocka/ptimer-apple-universal">
+					<span class="link-title">macOS Player</span>
+					<span class="link-description">
+						Source code for macOS player application.
+					</span>
+				</a>
+			</li>
+			<li>
+				<a class="link" href="https://github.com/pocka/ptimer-cli">
+					<span class="link-title">CLI</span>
+					<span class="link-description">
+						Source code for CLI application to interact with <code>.ptimer</code> file.
+					</span>
+				</a>
+			</li>
+			<li>
+				<a class="link" href="https://github.com/pocka/ptimer">
+					<span class="link-title">File Format</span>
+					<span class="link-description">
+						File format document for <code>.ptimer</code> file.
+					</span>
+				</a>
 			</li>
 		</ul>
 	</body>

diff --git a/src/index/main.css b/src/index/main.css
@@ -0,0 +1,70 @@
+/*
+SPDX-FileCopyrightText: 2024 Shota FUJI <[email protected]>
+
+SPDX-License-Identifier: Apache-2.0
+*/
+
+@import "./vars.css";
+
+:where(body, body :not(svg, svg *)) {
+	all: unset;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+}
+
+:root {
+	font-display: swap;
+	font-family: var(--font-sans);
+}
+
+body {
+	display: block;
+	font-size: 1rem;
+	line-height: 1.25;
+	padding: var(--space-px-md) var(--space-px-lg);
+
+	background-color: oklch(var(--color-bg));
+	color: oklch(var(--color-fg));
+}
+
+body :focus-visible {
+	border-color: oklch(var(--color-focus));
+	box-shadow: 0 0 0 var(--size-focus-ring) oklch(var(--color-focus) / var(--alpha-focus-ring));
+}
+
+.links {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
+	align-content: stretch;
+	gap: var(--space-px-xl);
+}
+
+.link {
+	--_bg-alpha: var(--alpha-action-bg);
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-px-sm);
+	padding: var(--space-px-md) var(--space-px-lg);
+
+	background-color: oklch(var(--color-fg) / var(--_bg-alpha));
+	border-color: oklch(var(--color-border) / var(--alpha-action-border));
+	border-radius: var(--radii-md);
+	cursor: pointer;
+}
+@media (hover: hover) {
+	.link:hover {
+		--_bg-alpha: var(--alpha-action-hover-bg);
+	}
+}
+.link:active {
+	--_bg-alpha: var(--alpha-action-active-bg);
+}
+
+.link-title {
+	font-size: var(--text-md);
+	font-weight: 600;
+}
+
+.link-description {
+	font-size: var(--text-md);
+}
diff --git a/src/index/vars.css b/src/index/vars.css
@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Shota FUJI <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import "@fontsource-variable/inter";
+
+:root {
+	--font-sans: "Inter Variable", sans-serif;
+
+	/* approx. Plastic ratio */
+	--scale: calc(53 / 40);
+
+	--hue: 260deg;
+	--chroma: 3%;
+
+	--color-bg-l: 99%;
+	--color-bg: var(--color-bg-l) var(--chroma) var(--hue);
+
+	--color-fg-l: 25%;
+	--color-fg: var(--color-fg-l) var(--chroma) var(--hue);
+
+	--color-border-l: var(--color-fg-l);
+	--color-border: var(--color-fg-l) var(--chroma) var(--hue);
+
+	--color-focus-l: 40%;
+	--color-focus: var(--color-focus-l) 40% var(--hue);
+
+	--space-px-md: 8px;
+	--space-px-sm: calc(var(--space-px-md) / var(--scale));
+	--space-px-xs: calc(var(--space-px-sm) / var(--scale));
+	--space-px-2xs: calc(var(--space-px-xs) / var(--scale));
+	--space-px-3xs: calc(var(--space-px-2xs) / var(--scale));
+	--space-px-lg: calc(var(--space-px-md) * var(--scale));
+	--space-px-xl: calc(var(--space-px-lg) * var(--scale));
+
+	--text-md: 1rem;
+	--text-sm: calc(var(--text-md) / var(--scale));
+	--text-xs: calc(var(--text-sm) / var(--scale));
+	--text-lg: calc(var(--text-md) * var(--scale));
+	--text-xl: calc(var(--text-lg) * var(--scale));
+
+	--radii-md: 3px;
+	--radii-sm: calc(var(--radii-md) / var(--scale));
+
+	--size-focus-ring: 3px;
+
+	--alpha-text-dimmed: 60%;
+	--alpha-action-border: 22%;
+	--alpha-action-bg: 0%;
+	--alpha-action-hover-bg: 5%;
+	--alpha-action-active-bg: 15%;
+	--alpha-focus-ring: 15%;
+}