Redesign landing and generate Proto docs

2026-07-30 17:49:58 -07:00
parent b902298ad6
commit 5d26ef6d89
41 changed files with 5633 additions and 942 deletions
--- a/src/pages/ProtoPage.module.css
+++ b/src/pages/ProtoPage.module.css
@@ -0,0 +1,159 @@
+.page {
+  padding: 48px 0 112px;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+}
+
+.hero {
+  max-width: 780px;
+  padding: 64px 0 48px;
+}
+
+.hero h1 {
+  margin-top: var(--mantine-spacing-lg);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: clamp(52px, 7vw, 76px);
+  font-weight: 600;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
+}
+
+.heroDescription {
+  margin-top: var(--mantine-spacing-lg);
+  font-size: 19px;
+  line-height: 1.65;
+}
+
+.stats {
+  margin-bottom: 56px;
+}
+
+.docsGrid {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 48px;
+  align-items: start;
+}
+
+.sidebar {
+  position: sticky;
+  top: 104px;
+}
+
+.sidebar a {
+  width: fit-content;
+  text-decoration: none;
+}
+
+.documentation {
+  min-width: 0;
+}
+
+.filters {
+  display: grid;
+  gap: var(--mantine-spacing-md);
+  margin-bottom: 56px;
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+}
+
+.schemaSection {
+  scroll-margin-top: 104px;
+  margin-top: 72px;
+}
+
+.schemaSection:first-of-type {
+  margin-top: 0;
+}
+
+.schemaSection > h2 {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.definition {
+  scroll-margin-top: 104px;
+  margin-top: 44px;
+  padding-top: 36px;
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.definition h3 {
+  margin-top: 5px;
+  color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-white));
+  font-size: 27px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.signature {
+  margin: var(--mantine-spacing-lg) 0;
+  padding: 12px 12px 12px 18px;
+  border: 1px solid light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9));
+  border-radius: var(--mantine-radius-md);
+  background: light-dark(var(--mantine-color-blue-0), rgba(34, 139, 230, 0.1));
+}
+
+.signature code {
+  flex: 1;
+  padding: 0;
+  background: transparent;
+  color: light-dark(var(--mantine-color-blue-9), var(--mantine-color-blue-1));
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.table {
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-md);
+}
+
+.table th {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+}
+
+.typeLink {
+  font-family: var(--mantine-font-family-monospace);
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.primitive {
+  color: light-dark(var(--mantine-color-violet-8), var(--mantine-color-violet-3));
+}
+
+@media (max-width: 62em) {
+  .docsGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: static;
+    padding: var(--mantine-spacing-lg);
+    border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+    border-radius: var(--mantine-radius-lg);
+  }
+}
+
+@media (max-width: 48em) {
+  .page {
+    padding-top: 32px;
+  }
+
+  .hero {
+    padding-top: 48px;
+  }
+
+  .docsGrid {
+    gap: 32px;
+  }
+
+  .schemaSection {
+    margin-top: 56px;
+  }
+
+  .definition {
+    margin-top: 36px;
+  }
+}