@mdn/fred 2.2.0 → 2.2.1

package/components/layout/2-sidebars.css

@@ -0,0 +1,141 @@
+.layout__2-sidebars,
+.layout__2-sidebars-inline {
+  display: grid;
+
+  grid-template-columns: var(--layout-2-sidebars);
+
+  justify-content: space-between;
+
+  padding-inline: var(--layout-side-padding);
+
+  .layout__left-sidebar {
+    grid-area: left-sidebar;
+  }
+
+  .layout__right-sidebar {
+    grid-area: right-sidebar;
+  }
+
+  .layout__left-sidebar,
+  .layout__right-sidebar {
+    position: sticky;
+    top: var(--sticky-header-height);
+
+    max-height: calc(100vh - var(--sticky-header-height));
+
+    overflow-y: auto;
+
+    outline-offset: -2px;
+  }
+
+  @media (--screen-layout-2-sidebars) {
+    .layout__left-sidebar {
+      padding-right: var(--layout-sidebar-padding);
+      padding-left: var(--layout-side-padding-min);
+      margin-left: calc(-1 * var(--layout-side-padding-min));
+    }
+
+    .layout__right-sidebar {
+      padding-right: var(--layout-side-padding-min);
+      padding-left: var(--layout-sidebar-padding);
+      margin-right: calc(-1 * var(--layout-side-padding-min));
+    }
+  }
+
+  @media (--screen-layout-1-sidebar-or-less) {
+    grid-template-columns: var(--layout-1-sidebar-left);
+
+    .layout__left-sidebar {
+      z-index: 1;
+      display: none;
+      background: var(--color-background-page);
+    }
+
+    .layout__left-sidebar,
+    .layout__right-sidebar {
+      grid-area: sidebar;
+
+      padding-right: var(--layout-sidebar-padding);
+      padding-left: var(--layout-side-padding-min);
+      margin-left: calc(-1 * var(--layout-side-padding-min));
+    }
+  }
+
+  @media (--screen-layout-no-sidebar) {
+    display: block;
+
+    .layout__left-sidebar,
+    .layout__right-sidebar {
+      padding-right: unset;
+      padding-left: unset;
+      margin-left: unset;
+    }
+
+    .layout__left-sidebar {
+      position: fixed;
+      inset: 0;
+      top: var(--sticky-header-height);
+      z-index: var(--z-index-sidebar-mobile);
+
+      padding: 0 var(--layout-side-padding-min);
+    }
+
+    .layout__right-sidebar {
+      position: unset;
+      top: unset;
+
+      max-height: unset;
+
+      overflow-y: unset;
+    }
+  }
+}
+
+.layout__2-sidebars {
+  .layout__content {
+    grid-area: content;
+  }
+
+  @media (--screen-layout-no-sidebar) {
+    .layout__right-sidebar {
+      display: none;
+    }
+  }
+}
+
+.layout__2-sidebars-inline {
+  grid-template-areas:
+    "left-sidebar . header . right-sidebar"
+    "left-sidebar . body   . right-sidebar";
+  grid-template-rows: min-content 1fr;
+
+  .layout__content {
+    display: contents;
+  }
+
+  .layout__header {
+    grid-area: header;
+  }
+
+  .layout__body {
+    grid-area: body;
+  }
+
+  @media (--screen-layout-1-sidebar-or-less) {
+    grid-template-areas:
+      "sidebar . header"
+      "sidebar . body";
+    grid-template-columns: var(--layout-1-sidebar-left);
+  }
+
+  @media (--screen-layout-no-sidebar) {
+    .layout__right-sidebar {
+      position: unset;
+      top: unset;
+
+      max-height: unset;
+
+      overflow-y: unset;
+    }
+  }
+}

package/components/layout/README.md

@@ -1,8 +1,50 @@
 # Layout
 
-This component provides some global utility variables for consistent layout.
+This component provides some global utility variables and some importable stylesheets for consistent layout.
 
-## Side padding
+If you need to do something very custom, you can use the variables directly, otherwise we recommend using one of the importable stylesheets and applying the classes to your component.
+
+## Class based layouts
+
+### `.layout__2-sidebars`
+
+Import from `./2-sidebars.css`
+
+Classes should be used with this hierarchy:
+
+- `layout__2-sidebars`
+  - `layout__left-sidebar`
+  - `layout__content`
+  - `layout__right-sidebar`
+
+When there's space for 2 sidebars then both sidebars will show, left on the left and right on the right.
+
+When there's only space for 1 sidebar then the right sidebar will show on the left and the left sidebar will become toggleable with `<mdn-toggle-sidebar>`.
+
+When there's no space for sidebars then the right sidebar will be hidden and the left sidebar still toggleable.
+
+### `.layout__2-sidebars-inline`
+
+Import from `./2-sidebars.css`
+
+Classes should be used with this hierarchy:
+
+- `layout__2-sidebars-inline`
+  - `layout__left-sidebar`
+  - `layout__content`
+    - `layout__header`
+    - `layout__right-sidebar`
+    - `layout__body`
+
+When there's space for 2 sidebars then both sidebars will show, left on the left and right on the right, with header and body shown in the central content area.
+
+When there's only space for 1 sidebar then the right sidebar will show on the left and the left sidebar will become toggleable with `<mdn-toggle-sidebar>`.
+
+When there's no space for sidebars then the right sidebar will be displayed inline within the content and the left sidebar still toggleable.
+
+## Global utility variables
+
+### Side padding
 
 In the simplest case, you may just need the `--layout-side-padding` variable. This keeps full width content in line with the padding in the navigation and footer, which provides a small padding on small screens, and centers content on very large screens:
 
@@ -12,7 +54,7 @@ In the simplest case, you may just need the `--layout-side-padding` variable. Th
 }
 ```
 
-## Content and sidebar layouts
+### Content and sidebar layouts
 
 If the page has "content" - some kind of prose - and optionally sidebars, you'll likely want one of the following layouts.
 The columns are sized to ensure that the content column doesn't become too wide (and have unreadably long lines of text), and that the sidebar columns don't become too narrow.
@@ -57,7 +99,7 @@ If you're using sidebars, you'll probably want to use the [custom media queries]
 }
 ```
 
-### 2 sidebars: `--layout-2-sidebars`
+#### 2 sidebars: `--layout-2-sidebars`
 
 A column for content, two columns for sidebars, and two columns for a gap between the content and sidebars. The columns are named as follows:
 
@@ -69,13 +111,13 @@ A column for content, two columns for sidebars, and two columns for a gap betwee
 
 Use the `--screen-layout-1-sidebar-or-less` custom media query to change to a different layout when the viewport becomes too narrow.
 
-### 1 sidebar
+#### 1 sidebar
 
 Two variants, which are identical apart from one having a left sidebar and the other a right sidebar. They have a column for content, a column for the sidebar, and a column for a gap between the content and sidebar.
 
 Use the `--screen-layout-no-sidebar` custom media query to change to a different layout when the viewport becomes too narrow.
 
-#### Left sidebar `--layout-1-sidebar-left`
+##### Left sidebar `--layout-1-sidebar-left`
 
 The columns are named as follows:
 
@@ -86,7 +128,7 @@ The columns are named as follows:
 | left-sidebar |      |         |
 |   sidebar    |      |         |
 
-#### Right sidebar `--layout-1-sidebar-right`
+##### Right sidebar `--layout-1-sidebar-right`
 
 The columns are named as follows:
 
@@ -97,11 +139,11 @@ The columns are named as follows:
 |         |      | right-sidebar |
 |         |      |    sidebar    |
 
-### No sidebar
+#### No sidebar
 
 Two variants, one if you're using `--layout-side-padding`, the other if you'd like to place things within that padding (e.g. a full width banner):
 
-#### Using padding: `--layout-no-sidebar`
+##### Using padding: `--layout-no-sidebar`
 
 The columns are named as follows:
 
@@ -122,7 +164,7 @@ The columns are named as follows:
 }
 ```
 
-#### Not using padding: `--layout-no-sidebar-extended`
+##### Not using padding: `--layout-no-sidebar-extended`
 
 The columns are named as follows:
 

package/components/layout/global.css

@@ -1,9 +1,9 @@
 /* --layout-side-padding-min * 2 + (--layout-sidebar-min + --layout-sidebar-gap) * 2 + --layout-content-min */
-@custom-media --screen-layout-2-sidebars (width >= calc(1rem * 2 + (14rem + 2rem) * 2 + 31rem));
-@custom-media --screen-layout-1-sidebar-or-less (width < calc(1rem * 2 + (14rem + 2rem) * 2 + 31rem));
+@custom-media --screen-layout-2-sidebars (width >= calc(1rem * 2 + (15rem + 2rem) * 2 + 31rem));
+@custom-media --screen-layout-1-sidebar-or-less (width < calc(1rem * 2 + (15rem + 2rem) * 2 + 31rem));
 
 /* --layout-side-padding-min * 2 + --layout-sidebar-min + --layout-sidebar-gap + --layout-content-min */
-@custom-media --screen-layout-no-sidebar (width < calc(1rem * 2 + 14rem + 2rem + 31rem));
+@custom-media --screen-layout-no-sidebar (width < calc(1rem * 2 + 15rem + 2rem + 31rem));
 
 :root {
   --layout-side-padding-min: 1rem;
@@ -13,13 +13,12 @@
   );
   --layout-full-width: calc(100vw - 2 * var(--layout-side-padding));
 
-  --layout-sidebar-min: 14rem;
+  --layout-sidebar-min: 15rem;
   --layout-sidebar-gap: 2rem;
+  --layout-sidebar-padding: 1rem;
   --layout-content-min: 31rem;
   --layout-content-max: 48rem;
 
-  /* WARNING: TODO: left/center/right cols widths will change */
-
   /* prettier-ignore */
   --layout-2-sidebars:
     [full-start left-sidebar-start]

package/components/left-sidebar/server.css

@@ -1,9 +1,5 @@
 .left-sidebar {
-  position: sticky;
-  top: var(--sticky-header-height);
-
   padding-bottom: 3rem;
-
   overflow-wrap: anywhere;
 
   h4 {
@@ -87,7 +83,7 @@
 
   a,
   span:not(.highlight-container) {
-    display: inline-flex;
+    display: inline-block;
     padding-block: 0.25rem;
     vertical-align: middle;
   }
@@ -107,6 +103,7 @@
   code {
     font-family: var(--font-family-code);
     font-size: var(--font-size-normal);
+    line-height: 1;
   }
 
   em {
@@ -131,12 +128,6 @@
   }
 }
 
-.left-sidebar__content {
-  > ol {
-    padding-left: 2px;
-  }
-}
-
 .left-sidebar__header {
   position: sticky;
   top: 0;
@@ -145,7 +136,6 @@
   padding-top: 0.5rem;
   padding-right: 0.5rem;
   padding-bottom: 2rem;
-  padding-left: 2px;
 
   background: linear-gradient(
     to bottom,

package/components/page-layout/server.css

@@ -29,7 +29,7 @@
     color-scheme: dark;
   }
 
-  @media (--screen-small-and-narrower) {
+  @media (--screen-small-and-narrower) or (--screen-layout-no-sidebar) {
     display: none;
   }
 }

package/components/play-console/element.css

@@ -23,13 +23,28 @@ ul {
 
 li {
   padding: 0 0.5em;
+  white-space: nowrap;
 
   &::before {
+    display: inline-block;
+
+    width: 0.75rem;
+
+    vertical-align: top;
+
     content: "> ";
   }
 }
 
 code {
+  display: inline-block;
+
+  width: calc(100% - 0.75rem);
+
+  margin: 0;
+
   font-family: var(--font-family-code);
+
   tab-size: 4;
+  white-space: pre-wrap;
 }

package/components/print/global.css

@@ -42,8 +42,8 @@
   }
 
   .page-layout__banner,
-  .reference-layout__toc,
-  .reference-layout__sidebar,
+  .layout__left-sidebar,
+  .layout__right-sidebar,
   .footer__socials,
   .footer__links,
   .footer__mozilla,

package/components/reference-layout/server.css

@@ -1,25 +1,9 @@
+@import url("../layout/2-sidebars.css");
+
 /* Reference Layout */
 
 .reference-layout {
-  display: grid;
-
-  grid-template-areas:
-    "sidebar . header . toc"
-    "sidebar . body   . toc";
-  grid-template-rows: min-content 1fr;
-  grid-template-columns: var(--layout-2-sidebars);
-
-  justify-content: space-between;
-
-  padding-inline: var(--layout-side-padding);
-
-  .reference-layout__content {
-    display: contents;
-  }
-
   .reference-layout__header {
-    grid-area: header;
-
     h1 {
       margin: 1rem 0;
 
@@ -31,84 +15,22 @@
   }
 
   .reference-layout__body {
-    grid-area: body;
     padding-bottom: 3rem;
   }
 
-  .reference-layout__sidebar {
-    grid-area: sidebar;
-
-    @media (--screen-layout-2-sidebars) {
-      .left-sidebar {
-        padding-right: calc(var(--layout-sidebar-gap) / 2);
-        margin-right: calc(var(--layout-sidebar-gap) / -2);
-      }
-    }
-  }
-
   .reference-layout__toc {
     display: flex;
 
     flex-wrap: wrap;
 
-    grid-area: toc;
-
     gap: 0.5rem;
     align-content: start;
     align-items: start;
     justify-content: space-between;
   }
 
-  .reference-layout__sidebar .left-sidebar,
-  .reference-layout__toc {
-    position: sticky;
-    top: var(--sticky-header-height);
-
-    max-height: calc(100vh - var(--sticky-header-height));
-
-    padding-left: 2px;
-
-    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);
-
-    .reference-layout__sidebar {
-      z-index: 1;
-
-      display: none;
-
-      grid-area: toc;
-
-      background: var(--color-background-page);
-    }
-  }
-
   @media (--screen-layout-no-sidebar) {
-    display: block;
-
-    .reference-layout__sidebar {
-      position: fixed;
-      inset: 0;
-      top: var(--sticky-header-height);
-      z-index: var(--z-index-sidebar-mobile);
-
-      .left-sidebar {
-        padding: 0 1rem;
-      }
-    }
-
     .reference-layout__toc {
-      position: unset;
-      top: unset;
-
-      max-height: unset;
-
-      overflow-y: unset;
       --toc-header-font-size: var(--font-size-larger);
     }
   }

package/components/reference-layout/server.js

@@ -21,24 +21,24 @@ export class ReferenceLayout extends ServerComponent {
       doc.body?.map((section) => ContentSection.render(context, section)) || [];
 
     return html`
-      <div class="reference-layout">
-        <main id="content" class="reference-layout__content">
-          <div class="reference-layout__header">
+      <div class="layout__2-sidebars-inline reference-layout">
+        <main id="content" class="layout__content">
+          <div class="layout__header reference-layout__header">
             ${WRITER_MODE ? WriterToolbar.render(context) : nothing}
             ${TranslationBanner.render(context)}
             <mdn-survey></mdn-survey>
             <h1>${doc.title}</h1>
             ${BaselineIndicator.render(context)} ${description}
           </div>
-          <aside class="reference-layout__toc">
+          <aside class="layout__right-sidebar reference-layout__toc">
             ${ReferenceToc.render(context)}
             <mdn-placement-sidebar></mdn-placement-sidebar>
           </aside>
-          <div class="reference-layout__body">
+          <div class="layout__body reference-layout__body">
             ${sections} ${ArticleFooter.render(context)}
           </div>
         </main>
-        <aside class="reference-layout__sidebar" id="main-sidebar">
+        <aside class="layout__left-sidebar" id="main-sidebar">
           ${LeftSidebar.render(context)}
         </aside>
       </div>