⚖️ a centered grid (#411)

* ⚖️ a centered grid * 📗changeset
jupyter-book · Jun 25, 2024 · 583a185 · 583a185
1 parent ec6cd2b
commit 583a185
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 2 deletions.
diff --git a/.changeset/poor-laws-help.md b/.changeset/poor-laws-help.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/styles': patch
+---
+
+A new, centered article grid
diff --git a/docs/stories/1-GridSystem.stories.mdx b/docs/stories/1-GridSystem.stories.mdx
@@ -112,3 +112,43 @@ Note: this view is a bit squished as it is going off of screen width rather than
   <div className="p-3 bg-gray-200 rounded col-screen-inset-left">col-screen-inset-left</div>
   <div className="p-3 bg-gray-200 rounded col-screen-left">col-screen-left</div>
 </article>
+
+`article-center-grid` This is a completely symettrical version of the `article-grid`.
+
+<article className="article article-center-grid grid-gap">
+  <div className="p-3 bg-gray-200 rounded col-page">col-page</div>
+  <div className="p-3 bg-gray-200 rounded col-page-inset">col-page-inset</div>
+  <div className="p-3 bg-gray-200 rounded col-body-outset">col-body-outset</div>
+  <div className="p-3 bg-gray-200 rounded col-body-inset">col-body-inset</div>
+  <div className="p-3 bg-gray-200 rounded col-margin-left">col-margin-left</div>
+  <div className="p-3 bg-gray-200 rounded col-body">col-body</div>
+  <div className="p-3 bg-gray-200 rounded col-margin">col-margin</div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-left">col-gutter-left</div>
+  <div className="p-3 bg-gray-200 rounded col-body-right row-span-2">col-body-right</div>
+  <div className="p-3 bg-gray-200 rounded col-margin-right-inset row-span-2">
+    col-margin-right-inset
+  </div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-outset-left">col-gutter-outset-left</div>
+  <div className="p-3 bg-gray-200 rounded col-body-left row-span-2">col-body-left</div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-right">col-gutter-right</div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-outset-right">col-gutter-outset-right</div>
+  <div className="p-3 bg-gray-200 rounded col-screen-right">col-screen-right</div>
+  <div className="p-3 bg-gray-200 rounded col-screen-inset-right">col-screen-inset-right</div>
+  <div className="p-3 bg-gray-200 rounded col-page-right">col-page-right</div>
+  <div className="p-3 bg-gray-200 rounded col-page-inset-right">col-page-inset-right</div>
+  <div className="p-3 bg-gray-200 rounded col-body-outset-right">col-body-outset-right</div>
+  <div className="p-3 bg-gray-200 rounded col-body-inset-right">col-body-inset-right</div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-page-right row-span-2">
+    col-gutter-page-right
+  </div>
+  <div className="p-3 bg-gray-200 rounded col-gutter-page-left row-span-2">
+    col-gutter-page-left
+  </div>
+  <div className="p-3 bg-gray-200 rounded col-page-middle">col-page-middle</div>
+  <div className="p-3 bg-gray-200 rounded col-body-inset-left">col-body-inset-left</div>
+  <div className="p-3 bg-gray-200 rounded col-body-outset-left">col-body-outset-left</div>
+  <div className="p-3 bg-gray-200 rounded col-page-inset-left">col-page-inset-left</div>
+  <div className="p-3 bg-gray-200 rounded col-page-left">col-page-left</div>
+  <div className="p-3 bg-gray-200 rounded col-screen-inset-left">col-screen-inset-left</div>
+  <div className="p-3 bg-gray-200 rounded col-screen-left">col-screen-left</div>
+</article>
diff --git a/styles/grid-system.css b/styles/grid-system.css
@@ -5,8 +5,13 @@
   .article-left-grid {
     @apply grid content-start grid-cols-article-sm md:grid-cols-article-left-md lg:grid-cols-article-left-lg xl:grid-cols-article-left-xl 2xl:grid-cols-article-left-2xl;
   }
+  .article-center-grid {
+    @apply grid content-start grid-cols-article-center-sm md:grid-cols-article-center-md lg:grid-cols-article-center-lg xl:grid-cols-article-center-xl 2xl:grid-cols-article-center-2xl;
+  }
+
   .article-grid > *,
-  .article-left-grid > * {
+  .article-left-grid > *,
+  .article-center-grid > * {
     /* The default is spanning the body for any child component */
     @apply col-body;
     /* Grids do not have margin-collapse, so each direct child needs to be addressed */

diff --git a/styles/index.js b/styles/index.js
@@ -37,6 +37,19 @@ const themeExtensions = {
       '[screen-start] 0.5rem [screen-inset-start page-start page-inset-start body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 12ch) [middle-start] minmax(8ch, 12ch) [gutter-left-end] minmax(8ch, 12ch) minmax(8ch, 12ch) [gutter-right-start] minmax(8ch, 12ch) [middle-end] minmax(8ch, 12ch) [body-inset-end] 1rem [body-end] 1fr [gutter-right-end] 1rem [body-outset-end] minmax(10rem, 18rem) [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
     'article-left-2xl':
       '[screen-start] 0.5rem [screen-inset-start] 1fr [page-start page-inset-start body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 12ch) [middle-start] minmax(8ch, 12ch) [gutter-left-end] minmax(8ch, 12ch) minmax(8ch, 12ch) [gutter-right-start] minmax(8ch, 12ch) [middle-end] minmax(8ch, 12ch) [body-inset-end] 1rem [body-end] 1fr [gutter-right-end] 1rem [body-outset-end] minmax(10rem, 18rem) [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
+    // article - left theme
+    'article-center-sm':
+      '[screen-start screen-inset-start] 0.5rem [page-start page-inset-start body-outset-start body-start gutter-left-start body-inset-start middle-start] 1fr 1fr [gutter-left-end] 1fr 1fr [gutter-right-start] 1fr 1fr [middle-end body-inset-end body-end gutter-right-end body-outset-end page-inset-end page-end] 0.5rem [screen-inset-end screen-end]',
+    'article-center-md':
+      '[screen-start] 0.25rem [screen-inset-start page-start page-inset-start body-outset-start] 1fr [body-start gutter-left-start] 1rem [body-inset-start] minmax(2ch, 10ch) [middle-start] minmax(2ch, 10ch) [gutter-left-end] minmax(2ch, 10ch) minmax(2ch, 10ch) [gutter-right-start] minmax(2ch, 10ch) [middle-end] minmax(2ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 1fr [body-outset-end page-inset-end page-end screen-inset-end] 0.25rem [screen-end]',
+    'article-center-lg': `[screen-start] 0.25rem [screen-inset-start page-start] 1fr [page-inset-start ] 1rem [] 1rem 
+      [body-outset-start gutter-outset-left-start] minmax(8ch, 10ch) [body-start body-inset-start gutter-left-start] minmax(8ch, 10ch) [gutter-left-end middle-start] minmax(8ch, 10ch) minmax(8ch, 10ch) []
+      minmax(8ch, 10ch) [] minmax(8ch, 10ch) [middle-end gutter-right-start gutter-page-right-start] minmax(8ch, 10ch) [body-end body-inset-end gutter-right-end] minmax(8ch, 10ch) 
+      [body-outset-end] 1rem [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.25rem [screen-end]`,
+    'article-center-xl':
+      '[screen-start] 0.25rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(4rem, 9rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.25rem [screen-end]',
+    'article-center-2xl':
+      '[screen-start] 0.5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(4rem, 9rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
   },
   gridColumn: {
     screen: 'screen',
@@ -66,7 +79,7 @@ const themeExtensions = {
     'gutter-outset-right': 'gutter-right / body-outset',
     'margin-left-lg': 'page / body-start',
     'margin-right-lg': 'body-end / page-end',
-    'margin-right-inset-lg': 'body-outset-end /page-inset',
+    'margin-right-inset-lg': 'body-end /page-inset',
     'body-outset-right': 'body / body-outset',
     'page-inset-right': 'body / page-inset',
     'page-right': 'body / page',
@@ -145,6 +158,8 @@ const safeList = [
   'xl:article-grid',
   'article-left-grid',
   'xl:article-left-grid',
+  'article-center-grid',
+  'xl:article-center-grid',
   'col-screen',
   'col-screen-inset',
   'col-page',