@human-synthesis/norns-ui 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/palette-manifest.json +1 -1
- package/src/styles/atoms.css +70 -0
package/package.json
CHANGED
package/src/styles/atoms.css
CHANGED
|
@@ -1697,3 +1697,73 @@
|
|
|
1697
1697
|
}
|
|
1698
1698
|
.carousel-dot-active { background-color: var(--color-bg-inverse); }
|
|
1699
1699
|
}
|
|
1700
|
+
|
|
1701
|
+
@layer components {
|
|
1702
|
+
/* ============================================================ */
|
|
1703
|
+
/* App shell — the generated +layout.svelte (spec-first apps) */
|
|
1704
|
+
/* ============================================================ */
|
|
1705
|
+
|
|
1706
|
+
.norns-shell {
|
|
1707
|
+
@apply grid min-h-screen;
|
|
1708
|
+
grid-template-columns: 15rem minmax(0, 1fr);
|
|
1709
|
+
}
|
|
1710
|
+
.norns-sidebar {
|
|
1711
|
+
@apply sticky top-0 flex h-screen flex-col gap-4 overflow-y-auto border-r px-3 py-4;
|
|
1712
|
+
border-color: var(--color-border);
|
|
1713
|
+
background-color: var(--color-bg);
|
|
1714
|
+
}
|
|
1715
|
+
.norns-brand {
|
|
1716
|
+
@apply px-2 text-sm font-semibold tracking-wide;
|
|
1717
|
+
color: var(--color-fg);
|
|
1718
|
+
}
|
|
1719
|
+
.norns-nav {
|
|
1720
|
+
@apply flex flex-col gap-0.5;
|
|
1721
|
+
}
|
|
1722
|
+
.norns-nav a {
|
|
1723
|
+
@apply block px-2 py-1.5 text-sm no-underline;
|
|
1724
|
+
color: var(--color-fg-muted);
|
|
1725
|
+
border-radius: var(--ui-radius-sm);
|
|
1726
|
+
transition:
|
|
1727
|
+
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1728
|
+
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1729
|
+
}
|
|
1730
|
+
.norns-nav a:hover {
|
|
1731
|
+
background-color: var(--color-bg-muted);
|
|
1732
|
+
color: var(--color-fg);
|
|
1733
|
+
}
|
|
1734
|
+
.norns-nav a:focus-visible {
|
|
1735
|
+
outline: none;
|
|
1736
|
+
box-shadow: var(--ui-focus-ring);
|
|
1737
|
+
}
|
|
1738
|
+
.norns-nav a[aria-current='page'] {
|
|
1739
|
+
@apply font-medium;
|
|
1740
|
+
background-color: var(--color-bg-muted);
|
|
1741
|
+
color: var(--color-fg);
|
|
1742
|
+
}
|
|
1743
|
+
.norns-main {
|
|
1744
|
+
@apply min-w-0 px-8 py-6;
|
|
1745
|
+
}
|
|
1746
|
+
@media (max-width: 40rem) {
|
|
1747
|
+
.norns-shell {
|
|
1748
|
+
grid-template-columns: 1fr;
|
|
1749
|
+
}
|
|
1750
|
+
.norns-sidebar {
|
|
1751
|
+
@apply static h-auto flex-row items-center gap-3 border-r-0 border-b py-2;
|
|
1752
|
+
}
|
|
1753
|
+
.norns-nav {
|
|
1754
|
+
@apply flex-1 flex-row overflow-x-auto;
|
|
1755
|
+
}
|
|
1756
|
+
.norns-main {
|
|
1757
|
+
@apply px-4 py-4;
|
|
1758
|
+
}
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/* Generated page container: readable width, consistent rhythm. */
|
|
1762
|
+
.norns-page {
|
|
1763
|
+
@apply mx-auto flex w-full flex-col gap-6;
|
|
1764
|
+
max-width: 72rem;
|
|
1765
|
+
}
|
|
1766
|
+
.norns-page-title {
|
|
1767
|
+
@apply text-2xl font-semibold tracking-tight leading-snug;
|
|
1768
|
+
}
|
|
1769
|
+
}
|