🔧 fix lg breakpoint for center-grid (#421)

jupyter-book · Jul 4, 2024 · ba28db7 · ba28db7
1 parent 6309593
commit ba28db7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/brown-chairs-clean.md b/.changeset/brown-chairs-clean.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/styles': patch
+---
+
+This fixes an asymmetric `col-*` class, improves main column width heirarchy and makes more space for `col-body` on the `lg` breakpoint
diff --git a/docs/stories/1-GridSystem.stories.mdx b/docs/stories/1-GridSystem.stories.mdx
@@ -116,6 +116,7 @@ Note: this view is a bit squished as it is going off of screen width rather than
 `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-screen">col-screen</div>
   <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>

diff --git a/styles/grid-system.css b/styles/grid-system.css
@@ -29,7 +29,7 @@
   }
   .col-margin-right,
   .col-margin {
-    @apply col-body lg:col-margin-right-lg;
+    @apply col-body xl:col-margin-right-lg;
   }
   .col-margin-right-inset {
     @apply col-body lg:col-margin-right-inset-lg;

diff --git a/styles/index.js b/styles/index.js
@@ -42,10 +42,10 @@ const themeExtensions = {
       '[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-lg': `[screen-start] 0.5rem [screen-inset-start page-start] 2rem [page-inset-start] 2fr [body-outset-start gutter-outset-left-start] 1rem 
+      [body-start gutter-left-start] 2rem [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-inset-end gutter-right-end] 2rem 
+      [body-end] 1rem [body-outset-end] 2fr [page-inset-end] 2rem [page-end screen-inset-end] 0.5rem [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':