fix(blog): move toc to left on large screens (#9772)

mdn · Oct 9, 2023 · 002bddd · 002bddd
1 parent 780c56a
commit 002bddd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 17 deletions.
diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss
@@ -22,23 +22,56 @@
     grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr);
   }
 
-  > .sidebar-container {
+  @media screen and (min-width: $screen-xxl) {
+    grid-template-areas:
+      "toc post place"
+      "toc newsletter place";
+    grid-template-columns: minmax(15rem, 1fr) minmax(0, 52rem) minmax(
+        15rem,
+        1fr
+      );
+  }
+
+  > .toc-container {
     --offset: var(--top-nav-height);
     display: none;
 
-    .toc-container {
-      position: unset;
-      top: auto;
-    }
-
     @media screen and (min-width: $screen-lg) {
       display: flex;
+      flex-direction: column;
       grid-area: toc;
 
       .toc > nav {
         margin-top: 2rem;
       }
     }
+    @media screen and (min-width: $screen-xxl) {
+      display: contents;
+
+      .place.side,
+      .toc {
+        height: max-content;
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0%,
+          rgb(0, 0, 0) 3rem calc(100% - 3rem),
+          rgba(0, 0, 0, 0) 100%
+        );
+        max-height: calc(100vh - var(--offset));
+        overflow: auto;
+        position: sticky;
+        top: var(--offset);
+      }
+
+      .place.side {
+        grid-area: place;
+        margin-top: 0;
+
+        > .pong-box {
+          margin-top: 2rem;
+        }
+      }
+    }
   }
 
   > .section-newsletter {

diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx
@@ -194,15 +194,11 @@ export function BlogPost(props: HydrationData) {
     <>
       {doc && blogMeta && (
         <main className="blog-post-container container">
-          <div className="sidebar-container">
-            <div className="toc-container">
-              <aside className="toc">
-                <nav>
-                  {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
-                </nav>
-              </aside>
-              {PLACEMENT_ENABLED && !blogMeta?.sponsored && <SidePlacement />}
-            </div>
+          <div className="sidebar-container toc-container">
+            <aside className="toc">
+              <nav>{doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}</nav>
+            </aside>
+            {PLACEMENT_ENABLED && !blogMeta?.sponsored && <SidePlacement />}
           </div>
           <article
             className="blog-post blog-container main-page-content"

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
@@ -792,6 +792,7 @@ kbd {
     }
   }
 
+  &.toc-container,
   .toc-container {
     .place {
       grid-area: toc;
@@ -801,7 +802,7 @@ kbd {
       display: flex;
       flex-direction: column;
       gap: 0;
-      height: calc(100vh - var(--sticky-header-with-actions-height));
+      height: calc(100vh - var(--offset));
       mask-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0) 0%,
@@ -810,7 +811,7 @@ kbd {
       );
       overflow: auto;
       position: sticky;
-      top: var(--sticky-header-with-actions-height);
+      top: var(--offset);
 
       .place {
         margin: 1rem 0;