Skip to content

Doors: a shared minimum padding and gap for framed boxes #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LukasWallrich wants to merge 2 commits into
base: rebrand-doors
Choose a base branch
from
Open

Doors: a shared minimum padding and gap for framed boxes #1140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d92366
Give framed boxes a shared minimum padding and gap
LukasWallrich Nov 13, 2026
e95afb6
Bring the AI metascience programme and recording links up to the box …
LukasWallrich Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions assets/css/doors/article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,10 +120,10 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
}
@media(max-width:1000px){.article-layout .article-card{order:1}}
/* Sections that open: the spoiler and expand shortcodes. */
.article-layout .article-style .spoiler{margin:0 0 12px;background:var(--surface);border-radius:var(--r-small)}
.article-layout .article-style .spoiler>summary{padding:10px 14px;font-weight:600;font-size:18px;line-height:1.35;color:var(--link);cursor:pointer}
.article-layout .article-style .spoiler{margin:0 0 var(--box-gap);background:var(--surface);border-radius:var(--r-small)}
.article-layout .article-style .spoiler>summary{padding:var(--box-pad-y) var(--box-pad);font-weight:600;font-size:18px;line-height:1.35;color:var(--link);cursor:pointer}
.article-layout .article-style .spoiler>summary:hover{color:var(--ink)}
.article-layout .article-style .spoiler-body{padding:2px 14px 12px;font-size:18px;line-height:1.55}
.article-layout .article-style .spoiler-body{padding:2px var(--box-pad) var(--box-pad);font-size:18px;line-height:1.55}

@cubic-dev-ai cubic-dev-ai Bot Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: This shared body padding also reaches the compact list-item Statistics spoilers, despite their explicit small-toggle styling. Add a compact li .spoiler-body override so opening an entry does not gain the framed-box spacing.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/article.css, line 126:

<comment>This shared body padding also reaches the compact list-item Statistics spoilers, despite their explicit small-toggle styling. Add a compact `li .spoiler-body` override so opening an entry does not gain the framed-box spacing.</comment>

<file context>
@@ -120,10 +120,10 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
+.article-layout .article-style .spoiler>summary{padding:var(--box-pad-y) var(--box-pad);font-weight:600;font-size:18px;line-height:1.35;color:var(--link);cursor:pointer}
 .article-layout .article-style .spoiler>summary:hover{color:var(--ink)}
-.article-layout .article-style .spoiler-body{padding:2px 14px 12px;font-size:18px;line-height:1.55}
+.article-layout .article-style .spoiler-body{padding:2px var(--box-pad) var(--box-pad);font-size:18px;line-height:1.55}
 .article-layout .article-style .spoiler-body>:last-child{margin-bottom:0}
 /* Disclosures hold prose, so they stay at reading width unless a PDF is open inside one. */
</file context>

.article-layout .article-style .spoiler-body>:last-child{margin-bottom:0}
/* Disclosures hold prose, so they stay at reading width unless a PDF is open inside one. */
.article-layout-wide .article-style .spoiler:not([open]),.article-layout-wide .article-style .spoiler:not(:has(.pdf-viewer)){max-width:580px}
Expand Down Expand Up @@ -172,11 +172,15 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
.sc-page .crumbs{margin-bottom:18px}
.sc-page #sc-container{padding:0;font-family:var(--text);max-width:none}
/* A team's name heads its own row, so it cannot end one row with its people starting the next. */
.sc-page .sc-grid .sc-title-card{flex:0 0 100%;grid-column:1/-1;width:100%;aspect-ratio:auto;padding:10px 16px;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}
.sc-page .sc-grid .sc-title-card{flex:0 0 100%;grid-column:1/-1;width:100%;aspect-ratio:auto;padding:var(--box-pad-y) var(--box-pad);flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}
.sc-page .sc-title-card :is(.sc-title-label,.sc-title-text){margin:0}
.sc-page .sc-title-card .sc-title-text{font-size:17px}
.sc-page .sc-title-card .sc-cbar{display:none}
.sc-team{display:contents}
/* On a phone the cards and team names share one grid: the box gap between them, and a team's name further
from the cards of the team before it than from its own. */
.sc-page .sc-grid{gap:var(--box-gap)}
@media(max-width:760px){.sc-page .sc-grid .sc-title-card:not(:first-child){margin-top:var(--box-gap)}}

@cubic-dev-ai cubic-dev-ai Bot Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: This selector never matches the generated team bands on phones: every title card is the first child of its own .sc-team. Select non-first .sc-team elements instead, or later team names never receive the intended extra 16px separation.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/article.css, line 183:

<comment>This selector never matches the generated team bands on phones: every title card is the first child of its own `.sc-team`. Select non-first `.sc-team` elements instead, or later team names never receive the intended extra 16px separation.</comment>

<file context>
@@ -172,11 +172,15 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
+/* On a phone the cards and team names share one grid: the box gap between them, and a team's name further
+   from the cards of the team before it than from its own. */
+.sc-page .sc-grid{gap:var(--box-gap)}
+@media(max-width:760px){.sc-page .sc-grid .sc-title-card:not(:first-child){margin-top:var(--box-gap)}}
 @media(min-width:761px){
   .sc-page .sc-grid{gap:28px 40px}
</file context>
Suggested change
@media(max-width:760px){.sc-page .sc-grid .sc-title-card:not(:first-child){margin-top:var(--box-gap)}}
@media(max-width:760px){.sc-page .sc-grid .sc-team:not(:first-child)>.sc-title-card{margin-top:var(--box-gap)}}

@media(min-width:761px){
.sc-page .sc-grid{gap:28px 40px}
.sc-page .sc-team{display:flex;flex-wrap:wrap;align-content:flex-start;gap:1rem;width:calc(var(--sc-members)*190px + (var(--sc-members) - 1)*1rem);max-width:100%}
Expand Down Expand Up @@ -213,7 +217,7 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti
.doi-link,.cite-us-text a{text-decoration:underline;text-underline-offset:3px}
.toc-phone{display:none}
@media(max-width:1000px){
.toc-phone{display:block;margin:0 0 20px;padding:12px 16px;background:var(--surface);border-radius:var(--r-small)}
.toc-phone{display:block;margin:0 0 20px;padding:var(--box-pad-y) var(--box-pad);background:var(--surface);border-radius:var(--r-small)}
.toc-phone-label{margin:0 0 4px;font:700 15px/1.3 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.toc-phone.is-short .toc-extra{display:none}
.toc-phone-more{margin:6px 0 0;padding:4px 0;border:0;background:none;font:600 16px/1.35 var(--text);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
Expand Down
2 changes: 1 addition & 1 deletion assets/css/doors/sections.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@
.pub-citation-section>summary::-webkit-details-marker{display:none}
.pub-citation-section>summary i{transition:transform .15s}
.pub-citation-section[open]>summary i{transform:rotate(90deg)}
.pub-citation-section .citation-text{margin-top:8px;padding:10px 12px;background:#fff;border-radius:var(--r-small)}
.pub-citation-section .citation-text{margin-top:8px;padding:var(--box-pad-y) var(--box-pad);background:#fff;border-radius:var(--r-small)}
#just-os-fullpage{margin-bottom:24px}
/* On a phone the empty chat takes about half the screen, so its question box is in view at once; it is the site's card, not a shadowed box. */
#just-os-fullpage{border-color:var(--line)!important;border-radius:var(--r-large)!important;box-shadow:none!important}
Expand Down
6 changes: 6 additions & 0 deletions assets/css/doors/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,10 @@
--display-weight:500;
--r-small:8px;
--r-large:18px;
/* Framed boxes (cards, panels, disclosures, bars with their own fill or border): the least space between
a box's edge and its text, and between two boxes side by side or one above the other. A component may
use more, never less. Small controls and chips (buttons, pills, tags) and joined groups are exempt. */
--box-pad:16px;
--box-pad-y:14px; /* top and bottom of a one-line bar, such as a disclosure's summary */

@cubic-dev-ai cubic-dev-ai Bot Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: --box-pad-y is documented for one-line bars, but the new usages apply it to the multi-line On this page box and citation text. Use var(--box-pad) for those boxes so they retain the declared 16px vertical minimum.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/css/doors/tokens.css, line 35:

<comment>`--box-pad-y` is documented for one-line bars, but the new usages apply it to the multi-line On this page box and citation text. Use `var(--box-pad)` for those boxes so they retain the declared 16px vertical minimum.</comment>

<file context>
@@ -28,4 +28,10 @@
+     a box's edge and its text, and between two boxes side by side or one above the other. A component may
+     use more, never less. Small controls and chips (buttons, pills, tags) and joined groups are exempt. */
+  --box-pad:16px;
+  --box-pad-y:14px;  /* top and bottom of a one-line bar, such as a disclosure's summary */
+  --box-gap:16px;
 }
</file context>

--box-gap:16px;
}
8 changes: 4 additions & 4 deletions content/ai-metascience/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ image:
---

<style>
.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 6px; max-width: 620px; }
.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
.article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }
Comment on lines +21 to 22

@cubic-dev-ai cubic-dev-ai Bot Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The recording cards now use the shared gap but still retain 12px × 14px inner padding, below the 16px minimum for framed boxes. Change .am-playlist to padding: var(--box-pad); these two-line cards are not small chip controls.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At content/ai-metascience/index.md, line 21:

<comment>The recording cards now use the shared gap but still retain 12px × 14px inner padding, below the 16px minimum for framed boxes. Change `.am-playlist` to `padding: var(--box-pad)`; these two-line cards are not small chip controls.</comment>

<file context>
@@ -18,7 +18,7 @@ image:
 
 <style>
-.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 6px; max-width: 620px; }
+.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
 .article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }
 .article-layout .article-style .am-playlist strong { color: var(--am-deep); font-size: 17px; }
</file context>
Suggested change
.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
.article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }
.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-gap); margin: 18px 0 6px; max-width: 620px; }
.article-layout .article-style .am-playlist { display: flex; flex-direction: column; gap: 2px; padding: var(--box-pad); border: 2px solid var(--am-deep) !important; border-radius: 12px; background: var(--am-tint, #eef5f3); color: var(--am-ink); text-decoration: none !important; font-size: 15px; line-height: 1.3; }

.article-layout .article-style .am-playlist strong { color: var(--am-deep); font-size: 17px; }
.article-layout .article-style .am-playlist:hover { background: var(--am-tint); }
Expand Down Expand Up @@ -232,14 +232,14 @@ image:
}
.am-prog-half::after { content: ""; flex: 1; height: 1px; background: var(--am-rule); }
.am-prog-session {
margin: 0 0 10px;
padding: 8px 12px 4px;
margin: 0 0 var(--box-gap);
padding: 10px var(--box-pad) 6px;

@cubic-dev-ai cubic-dev-ai Bot Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: These framed session cards still have only 10px top and 6px bottom padding, while the solo variant has just 6px at the top. Use the shared vertical token for the session padding and its solo override so the new box-spacing contract is actually met.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At content/ai-metascience/index.md, line 236:

<comment>These framed session cards still have only 10px top and 6px bottom padding, while the solo variant has just 6px at the top. Use the shared vertical token for the session padding and its solo override so the new box-spacing contract is actually met.</comment>

<file context>
@@ -232,14 +232,14 @@ image:
-  margin: 0 0 10px;
-  padding: 8px 12px 4px;
+  margin: 0 0 var(--box-gap);
+  padding: 10px var(--box-pad) 6px;
   border: 1px solid var(--am-rule);
   border-left: 4px solid var(--am-accent);
</file context>

border: 1px solid var(--am-rule);
border-left: 4px solid var(--am-accent);
border-radius: 8px;
background: var(--am-card);
}
.am-prog-session-solo { padding-top: 4px; }
.am-prog-session-solo { padding-top: 6px; }
.article-layout .article-style .am-prog-session h4 {
margin: 0 0 2px;
font-size: 18px;
Expand Down
Loading