fix(storybook): make page inner width responsive
This commit is contained in:
1 parent
5be47f9c6f
commit
69677ace2c
1 file changed
+3
-10
@@ -1,8 +1,7 @@
|
|||||||
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
|
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
|
||||||
Inner (max 1280, gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
|
Inner (fluid, 60px each side; vertical gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
|
||||||
Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
|
Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
|
||||||
.sb-page {
|
.sb-page {
|
||||||
--sb-page-max-width: 1280px;
|
|
||||||
--sb-page-gutter: clamp(16px, 3vw, 40px);
|
--sb-page-gutter: clamp(16px, 3vw, 40px);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -13,17 +12,11 @@
|
|||||||
}
|
}
|
||||||
.sb-page > .sb-page-inner {
|
.sb-page > .sb-page-inner {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/* Keep the established content width: the 1280px envelope includes both gutters. */
|
/* 2026-11-05 (user request): no max width; the Inner follows the page width and keeps 60px on each side. */
|
||||||
width: calc(min(100%, var(--sb-page-max-width)) - 2 * var(--sb-page-gutter));
|
width: calc(100% - 120px);
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
/* Wide screens (2026-10-22, user request): 80% of the viewport — 1536px at 1920px, 2048px at 2560px, 3072px at
|
|
||||||
3840px — growing with the screen (vw, so a scrollbar does not shrink it); never wider than the page minus the
|
|
||||||
gutters, so no horizontal scroll. Below 1920px the rule above applies. */
|
|
||||||
@media (min-width: 1920px) {
|
|
||||||
.sb-page > .sb-page-inner { width: min(80vw, calc(100% - 2 * var(--sb-page-gutter))); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.sb-page .sb-page-header {
|
.sb-page .sb-page-header {
|
||||||
padding-bottom: 24px;
|
padding-bottom: 24px;
|
||||||
|
|||||||
Reference in new issue
Block a user