Skip to content

fix(layout): increase gap between sidebar and content #1154

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
LeoMcA wants to merge 11 commits into
base: main
Choose a base branch
from
Open

fix(layout): increase gap between sidebar and content #1154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d6df248
increase sidebar padding to content in reference layout
LeoMcA Dec 9, 2025
0779e69
don't set layout styles on .left-sidebar
LeoMcA Dec 9, 2025
0272c51
duplicate reference-layout to layout/2-sidebars
LeoMcA Dec 9, 2025
f623a9b
remove layout stuff from reference-layout and reference-layout stuff …
LeoMcA Dec 9, 2025
8191ae8
make names more generic in 2-sidebars and apply to reference-layout
LeoMcA Dec 9, 2025
8359d65
remove unused `reference-layout__*` classes
LeoMcA Dec 9, 2025
95ed27a
split 2-sidebars into two classes
LeoMcA Dec 10, 2025
4db3c2d
use layout__2-sidebars in generic-layout
LeoMcA Dec 10, 2025
5340638
hide top banner when content is in single column mode
LeoMcA Dec 10, 2025
d6f790c
use layout__2-sidebars-inline across curriculum
LeoMcA Dec 10, 2025
33a8009
update readme
LeoMcA Dec 10, 2025
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
21 changes: 15 additions & 6 deletions components/curriculum-about/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,33 @@ export class CurriculumAbout extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
21 changes: 15 additions & 6 deletions components/curriculum-default/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,33 @@ export class CurriculumDefault extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
21 changes: 15 additions & 6 deletions components/curriculum-module/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,17 @@ export class CurriculumModule extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
${doc?.topic ? renderTopicIcon(context, doc.topic) : nothing}
<h1>${doc?.title}</h1>
${doc?.topic
Expand All @@ -48,16 +52,21 @@ export class CurriculumModule extends ServerComponent {
? html`<p class="module-group">${doc.group}</p>`
: nothing}
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
${this.renderPrevNext(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
51 changes: 15 additions & 36 deletions components/curriculum-overview/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,28 @@ export class CurriculumOverview extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle}</h1>
</header>

<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>

<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
${doc?.modules && doc.modules.length > 0
? html`
Expand All @@ -65,41 +71,14 @@ export class CurriculumOverview extends ServerComponent {
</div>
</main>

<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
`,

// html`
// <main
// id="content"
// class="curriculum-content-container container curriculum-overview topic-${topicCssClass}"
// >
// ${sidebar}
// <article id="content" class="curriculum-content" lang=${doc.locale}>
// <header>
// <h1><span>${coloredTitle}</span> ${restTitle}</h1>
// </header>
// ${renderCurriculumBody(context, doc)}
// ${doc?.modules && doc.modules.length > 0
// ? html`
// <section class="module-contents">
// <h2>Module list</h2>
// ${renderModulesList(context, doc.modules)}
// </section>
// `
// : nothing}
// ${this.renderPrevNext(context, doc)}
// </article>
// <div class="toc-container">
// <aside class="toc">
// <nav>${toc}</nav>
// </aside>
// <mdn-placement-sidebar></mdn-placement-sidebar>
// </div>
// </main>
// `,
);
}

Expand Down
79 changes: 2 additions & 77 deletions components/curriculum/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,27 @@
.curriculum-content-container {
display: grid;

grid-template-areas:
"sidebar . header . toc"
"sidebar . body . toc";
grid-template-rows: min-content auto;
grid-template-columns: var(--layout-2-sidebars);

justify-content: space-between;

padding-inline: var(--layout-side-padding);

.curriculum-layout__content {
display: contents;
}

.curriculum-layout__header {
grid-area: header;
}
@import url("../layout/2-sidebars.css");

.curriculum-content-container {
.curriculum-layout__body {
grid-area: body;
padding-bottom: 3rem;
}

.curriculum-layout__sidebar {
grid-area: sidebar;
padding-top: 0;

@media (--screen-layout-2-sidebars) {
.left-sidebar {
padding-right: calc(var(--layout-sidebar-gap) / 2);
margin-right: calc(var(--layout-sidebar-gap) / -2);
}
}
}

.curriculum-layout__toc {
display: flex;

flex-wrap: wrap;

grid-area: toc;

gap: 0.5rem;
align-content: start;
align-items: start;
justify-content: space-between;
}

.curriculum-layout__sidebar .left-sidebar,
.curriculum-layout__toc {
position: sticky;
top: var(--sticky-header-height);

max-height: calc(100vh - var(--sticky-header-height));

overflow-y: auto;
}

@media (--screen-layout-1-sidebar-or-less) {
grid-template-areas:
"toc . header"
"toc . body";
grid-template-columns: var(--layout-1-sidebar-left);

.curriculum-layout__sidebar {
z-index: 1;

display: none;

grid-area: toc;

background: var(--color-background-page);
}
}

@media (--screen-layout-no-sidebar) {
display: block;

.curriculum-layout__sidebar {
position: fixed;
inset: 0;
top: var(--sticky-header-height);
z-index: var(--z-index-sidebar-mobile);

.left-sidebar {
padding: 1rem;
}
}

.curriculum-layout__toc {
position: unset;
top: unset;

max-height: unset;

overflow-y: unset;
--toc-header-font-size: var(--font-size-larger);
}
}
Expand Down
4 changes: 0 additions & 4 deletions components/curriculum/sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.curriculum-content-container .left-sidebar {
position: sticky;
top: var(--sticky-header-height);

padding-bottom: 3rem;

overflow-wrap: anywhere;

ol {
Expand Down
4 changes: 1 addition & 3 deletions components/curriculum/toc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.curriculum-content-container {
.curriculum-layout__toc {
padding: 2px;

.document-toc {
padding: 0;
margin-bottom: 2rem;
Expand Down Expand Up @@ -92,7 +90,7 @@
}
}

@media (--screen-small-and-narrower) {
@media (--screen-layout-no-sidebar) {
padding: 0 1rem;
}

Expand Down
Loading
Loading