feat(docs): refine product showcase and branding

2026-08-05 02:29:55 +02:00 · 2026-07-16 18:11:06 +02:00
parent d61d6f3c5b
commit 0a185077af
20 changed files with 1658 additions and 663 deletions
--- a/docs/components/header.css
+++ b/docs/components/header.css
@@ -0,0 +1,115 @@
+.site-header {
+  position: fixed;
+  z-index: 220;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 72px;
+  border-bottom: 1px solid rgba(224, 217, 228, 0.76);
+  background: rgba(251, 250, 252, 0.88);
+  box-shadow: 0 8px 30px rgba(42, 26, 49, 0.035);
+  backdrop-filter: blur(20px) saturate(1.3);
+  -webkit-backdrop-filter: blur(20px) saturate(1.3);
+}
+
+.header-inner {
+  display: flex;
+  height: 72px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  width: max-content;
+}
+
+.brand-mark-image {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  filter: drop-shadow(0 7px 14px rgba(126, 42, 189, 0.14));
+}
+
+.brand-name {
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: 19px;
+  font-weight: 780;
+  line-height: 1;
+  letter-spacing: -0.045em;
+}
+
+.header-github-button {
+  display: inline-flex;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 1px solid #28232b;
+  border-radius: 10px;
+  background: var(--ink);
+  box-shadow: 0 8px 22px rgba(23, 20, 25, 0.13), inset 0 1px rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 12px;
+  font-weight: 680;
+  line-height: 1;
+  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.header-github-button:hover {
+  border-color: #403944;
+  background: #29242d;
+  box-shadow: 0 10px 26px rgba(23, 20, 25, 0.17), inset 0 1px rgba(255, 255, 255, 0.12);
+  transform: translateY(-1px);
+}
+
+.header-github-button svg {
+  width: 17px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+@media (max-width: 680px) {
+  .site-header,
+  .header-inner {
+    height: 64px;
+  }
+
+  .brand-mark-image {
+    width: 44px;
+    height: 44px;
+  }
+
+  .brand-name {
+    font-size: 17px;
+  }
+
+  .header-github-button {
+    min-height: 38px;
+    gap: 7px;
+    padding-inline: 12px;
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 360px) {
+  .brand-mark-image {
+    width: 41px;
+    height: 41px;
+  }
+
+  .brand-name {
+    font-size: 16px;
+  }
+
+  .header-github-button {
+    min-height: 36px;
+    padding-inline: 10px;
+    font-size: 10px;
+  }
+}