Restore css grid styles and apply selectively via class name

nodejs · Aug 12, 2020 · 314bbd3eb5d8d5d37ec93259892d53dd19f24e47 · 314bbd3
1 parent ff1d859
commit 314bbd3eb5d8d5d37ec93259892d53dd19f24e47
Unified Split

Showing with 10 additions and 3 deletions.

+1 −1 src/pages/docs.tsx

+5 −0 src/styles/layout.scss

+1 −1 src/templates/learn.tsx

+3 −1 test/templates/__snapshots__/learn.test.tsx.snap
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
@@ -570,7 +570,7 @@ export default function APIDocsPage(): JSX.Element {
 
   return (
     <>
-      <main>
+      <main className="grid-container">
         <Layout title={title} description={description} showFooter={false}>
           <nav className="api-nav">
             <ul className="api-nav__list">

diff --git a/src/styles/layout.scss b/src/styles/layout.scss
@@ -232,6 +232,11 @@ select {
   outline: none;
 }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: 28.8rem auto;
+}
+
 .nav {
   display: flex;
   align-items: center;

diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
@@ -25,7 +25,7 @@ const LearnLayout = ({
   pageContext: { slug, next, previous, relativePath, navigationData },
 }: Props): React.ReactNode => (
   <>
-    <main>
+    <main className="grid-container">
       <Layout title={title} description={description} showFooter={false}>
         <Navigation currentSlug={slug} sections={navigationData} />
         <Article

diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Learn Template renders correctly 1`] = `
 <React.Fragment>
-  <main>
+  <main
+    className="grid-container"
+  >
     <Layout
       description="test-description"
       showFooter={false}