@dodlhuat/basix 1.1.1 → 1.2.1

package/css/defaults.scss

@@ -1,91 +1,91 @@
-@use "properties";
-@use "parameters" as *;
-
-html, body {
-  overflow: auto;
-}
-
-body {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  min-height: 100vh;
-}
-
-a {
-  cursor: pointer;
-}
-
-.content {
-  margin-left: calc(2 * $spacing);
-  margin-right: calc(2 * $spacing);
-  margin-top: calc($spacing * 4);
-}
-
-.hidden {
-  display: none;
-}
-
-.float-right {
-  float: right;
-}
-
-.float-left {
-  float: left;
-}
-
-.block {
-  display: block;
-  width: 100%;
-}
-
-.vertical-align-center {
-  align-items: center;
-  display: flex;
-}
-
-.horizontal-align-center {
-  text-align: center;
-}
-
-.center {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-}
-
-code.code {
-  background: var(--divider);
-  display: block;
-  font-family: monospace;
-  border-radius: $border-radius;
-  font-size: calc($spacing * 1.3);
-  margin: $spacing 0;
-
-  .code-header {
-    display: block;
-    background: var(--disabled);
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    padding: calc($spacing / 2) calc($spacing * 2);
-    color: var(--primary-text);
-    font-weight: bold;
-  }
-
-  .code-content {
-    padding: calc($spacing * 2);
-    white-space: break-spaces;
-  }
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.spacing-right {
-  margin-right: $spacing;
-}
-
-.flex {
-  display: flex;
+@use "properties";
+@use "parameters" as *;
+
+html, body {
+  overflow: auto;
+}
+
+body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  cursor: pointer;
+}
+
+.content {
+  margin-left: calc(2 * $spacing);
+  margin-right: calc(2 * $spacing);
+  margin-top: calc($spacing * 4);
+}
+
+.hidden {
+  display: none;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.block {
+  display: block;
+  width: 100%;
+}
+
+.vertical-align-center {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align-center {
+  text-align: center;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+code.code {
+  background: var(--divider);
+  display: block;
+  font-family: monospace;
+  border-radius: $border-radius;
+  font-size: calc($spacing * 1.3);
+  margin: $spacing 0;
+
+  .code-header {
+    display: block;
+    background: var(--disabled);
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    padding: calc($spacing / 2) calc($spacing * 2);
+    color: var(--primary-text);
+    font-weight: bold;
+  }
+
+  .code-content {
+    padding: calc($spacing * 2);
+    white-space: break-spaces;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.spacing-right {
+  margin-right: $spacing;
+}
+
+.flex {
+  display: flex;
 }

package/css/docs.scss

@@ -0,0 +1,529 @@
+@use "parameters" as *;
+
+// ── Sidebar content (logo + search) ──────────────────────────────────────────
+
+.sidebar-nav {
+
+    .docs-sidebar-logo {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1.25rem 1rem;
+        border-bottom: 1px solid var(--divider);
+        font-weight: 700;
+        font-size: 1.1rem;
+        color: var(--primary-text);
+        text-decoration: none;
+        letter-spacing: -0.01em;
+
+        .docs-logo-badge {
+            font-size: 0.6rem;
+            font-weight: 700;
+            background: var(--accent-color);
+            color: #fff;
+            padding: 0.1rem 0.35rem;
+            border-radius: 0.25rem;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+        }
+    }
+
+    .docs-sidebar-search {
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--divider);
+
+        input {
+            width: 100%;
+            height: 2rem;
+            font-size: 0.8rem;
+            background: var(--secondary-background);
+            border: 1px solid var(--divider);
+            border-radius: $border-radius;
+            padding: 0 0.75rem;
+            color: var(--primary-text);
+            outline: none;
+
+            &::placeholder { color: var(--secondary-text); }
+            &:focus { border-color: var(--accent-color); }
+        }
+    }
+}
+
+.docs-nav {
+    flex: 1;
+    padding: 0.75rem 0 2rem;
+    overflow-y: auto;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .docs-nav-section {
+        margin-bottom: 0.25rem;
+    }
+
+    .docs-nav-section-label {
+        font-size: 0.65rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--secondary-text);
+        padding: 0.85rem 1rem 0.3rem;
+    }
+
+    .docs-nav-item a {
+        display: block;
+        padding: 0.3rem 1rem 0.3rem 1.25rem;
+        font-size: 0.85rem;
+        color: var(--secondary-text);
+        text-decoration: none;
+        border-radius: 0;
+        transition: color 0.15s, background 0.15s;
+        border-left: 2px solid transparent;
+
+        &:hover {
+            color: var(--primary-text);
+            background: var(--secondary-background);
+        }
+
+        &.is-active {
+            color: var(--accent-color);
+            border-left-color: var(--accent-color);
+            background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+            font-weight: 500;
+        }
+    }
+}
+
+.docs-topbar {
+    position: sticky;
+    top: 0;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2rem;
+    background: var(--primary-bg);
+    border-bottom: 1px solid var(--divider);
+    z-index: 90;
+    gap: 1rem;
+
+    .docs-breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-size: 0.8rem;
+        color: var(--secondary-text);
+
+        a {
+            color: var(--secondary-text);
+            text-decoration: none;
+            &:hover { color: var(--primary-text); }
+        }
+
+        .sep { opacity: 0.4; }
+        .current { color: var(--primary-text); font-weight: 500; }
+    }
+
+    .docs-topbar-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
+.docs-content {
+    flex: 1;
+    padding: 2.5rem 2rem 4rem;
+    max-width: 860px;
+
+    h1 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        margin: 0 0 0.5rem;
+    }
+
+    .docs-lead {
+        font-size: 1rem;
+        color: var(--secondary-text);
+        margin: 0 0 1rem;
+        line-height: 1.6;
+        max-width: 600px;
+    }
+
+    .docs-import {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin: 0 0 2rem;
+        padding: 0.4rem 0.75rem;
+        background: var(--secondary-background);
+        border: 1px solid var(--divider);
+        border-radius: $border-radius;
+        font-size: 0.8rem;
+        font-family: ui-monospace, "Cascadia Code", "SF Mono", monospace;
+        color: var(--accent-color);
+
+        &::before {
+            content: 'import';
+            color: var(--secondary-text);
+            font-style: italic;
+            font-family: inherit;
+        }
+    }
+
+    h2 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        margin: 2.5rem 0 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--divider);
+    }
+
+    h3 {
+        font-size: 0.95rem;
+        font-weight: 600;
+        margin: 1.75rem 0 0.75rem;
+    }
+
+    p { line-height: 1.7; margin: 0 0 1rem; }
+
+    code {
+        font-size: 0.8em;
+        background: var(--secondary-background);
+        border: 1px solid var(--divider);
+        border-radius: 0.25rem;
+        padding: 0.1em 0.35em;
+    }
+
+    .docs-demo {
+        background: var(--secondary-background);
+        border: 1px solid var(--divider);
+        border-radius: $border-radius;
+        padding: 2rem;
+        margin: 1rem 0;
+
+        h1 { font-size: 2rem; font-weight: 800; }
+        h2 { font-size: 1.625rem; font-weight: 750; border: none; padding: 0; margin-top: 0; }
+        h3 { font-size: 1.375rem; font-weight: 700; }
+        h4 { font-size: 1.125rem; font-weight: 700; }
+        h5 { font-size: 1rem; font-weight: 600; }
+
+        &.centered {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+        }
+    }
+
+    .docs-props-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.82rem;
+        margin: 1rem 0 2rem;
+
+        th {
+            text-align: left;
+            padding: 0.5rem 0.75rem;
+            background: var(--secondary-background);
+            border: 1px solid var(--divider);
+            font-weight: 600;
+            color: var(--secondary-text);
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        td {
+            padding: 0.5rem 0.75rem;
+            border: 1px solid var(--divider);
+            vertical-align: top;
+
+            code {
+                font-size: 0.78em;
+                background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+                border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+                color: var(--accent-color);
+            }
+        }
+
+        tr:hover td { background: var(--secondary-background); }
+    }
+}
+
+// ── Landing page ─────────────────────────────────────────────────────────────
+
+.landing-hero {
+    padding: 5rem 2rem 4rem;
+    text-align: center;
+    background: var(--primary-bg);
+    border-bottom: 1px solid var(--divider);
+
+    .landing-eyebrow {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--accent-color);
+        background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+        border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
+        border-radius: 2rem;
+        padding: 0.25rem 0.75rem;
+        margin-bottom: 1.5rem;
+    }
+
+    h1 {
+        font-size: clamp(2.5rem, 6vw, 4rem);
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        margin: 0 0 1rem;
+        line-height: 1.1;
+    }
+
+    .landing-tagline {
+        font-size: clamp(1rem, 2.5vw, 1.2rem);
+        color: var(--secondary-text);
+        max-width: 520px;
+        margin: 0 auto 2rem;
+        line-height: 1.6;
+    }
+
+    .landing-actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+    }
+
+    .landing-install {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--secondary-background);
+        border: 1px solid var(--divider);
+        border-radius: $border-radius;
+        padding: 0.5rem 1rem;
+        font-size: 0.85rem;
+        font-family: monospace;
+        color: var(--primary-text);
+        cursor: pointer;
+        transition: border-color 0.15s;
+
+        &:hover { border-color: var(--accent-color); }
+
+        .install-prefix { color: var(--secondary-text); }
+    }
+}
+
+.landing-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0;
+    border-bottom: 1px solid var(--divider);
+
+    .feature-item {
+        padding: 1.5rem 2rem;
+        border-right: 1px solid var(--divider);
+
+        &:last-child { border-right: none; }
+
+        .feature-icon {
+            font-size: 1.25rem;
+            margin-bottom: 0.5rem;
+            svg {
+                width: 1em;
+                height: 1em;
+                display: block;
+            }
+        }
+
+        .feature-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            margin-bottom: 0.2rem;
+        }
+
+        .feature-desc {
+            font-size: 0.78rem;
+            color: var(--secondary-text);
+            line-height: 1.5;
+        }
+    }
+}
+
+.landing-section {
+    padding: 3.5rem 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    width: 100%;
+
+    &-title {
+        font-size: 1.4rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        margin: 0 0 0.4rem;
+    }
+
+    &-sub {
+        color: var(--secondary-text);
+        font-size: 0.9rem;
+        margin: 0 0 2rem;
+    }
+}
+
+.component-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1rem;
+}
+
+.component-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.25rem 1.25rem 1rem;
+    border: 1px solid var(--divider);
+    border-radius: $border-radius * 2;
+    text-decoration: none;
+    color: var(--primary-text);
+    background: var(--primary-bg);
+    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+
+    &:hover {
+        border-color: var(--accent-color);
+        box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 15%, transparent);
+        transform: translateY(-1px);
+    }
+
+    .cc-icon {
+        font-size: 1.4rem;
+        line-height: 1;
+        margin-bottom: 0.25rem;
+        svg {
+            width: 1em;
+            height: 1em;
+            display: block;
+        }
+    }
+
+    .cc-name {
+        font-weight: 600;
+        font-size: 0.9rem;
+    }
+
+    .cc-desc {
+        font-size: 0.78rem;
+        color: var(--secondary-text);
+        line-height: 1.5;
+    }
+
+    .cc-count {
+        font-size: 0.7rem;
+        color: var(--secondary-text);
+        margin-top: auto;
+        padding-top: 0.5rem;
+        border-top: 1px solid var(--divider);
+    }
+}
+
+.landing-quickstart {
+    background: var(--secondary-background);
+    border-top: 1px solid var(--divider);
+    border-bottom: 1px solid var(--divider);
+    padding: 3.5rem 2rem;
+
+    .qs-inner {
+        max-width: 700px;
+        margin: 0 auto;
+    }
+
+    h2 {
+        font-size: 1.4rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        margin: 0 0 0.4rem;
+    }
+
+    p {
+        color: var(--secondary-text);
+        font-size: 0.9rem;
+        margin: 0 0 1.5rem;
+    }
+
+    .qs-steps {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .qs-step {
+        display: flex;
+        gap: 1rem;
+        align-items: flex-start;
+
+        .qs-num {
+            flex-shrink: 0;
+            width: 1.5rem;
+            height: 1.5rem;
+            background: var(--accent-color);
+            color: #fff;
+            border-radius: 50%;
+            font-size: 0.7rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 0.1rem;
+        }
+
+        .qs-text {
+            flex: 1;
+
+            strong { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
+            p { margin: 0; font-size: 0.82rem; }
+            code {
+                display: block;
+                background: var(--primary-bg);
+                border: 1px solid var(--divider);
+                border-radius: $border-radius;
+                padding: 0.5rem 0.75rem;
+                font-size: 0.8rem;
+                margin-top: 0.4rem;
+                font-family: monospace;
+                color: var(--primary-text);
+            }
+        }
+    }
+}
+
+.landing-footer {
+    padding: 1.5rem 2rem;
+    border-top: 1px solid var(--divider);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.78rem;
+    color: var(--secondary-text);
+    gap: 1rem;
+    flex-wrap: wrap;
+
+    a {
+        color: var(--secondary-text);
+        text-decoration: none;
+        &:hover { color: var(--primary-text); }
+    }
+
+    .footer-links {
+        display: flex;
+        gap: 1.25rem;
+    }
+}