Add default margin

pomber · pomber · commit 9a0c186a5a91 · 2022-02-03T13:12:15.000+01:00
diff --git a/packages/mdx/src/client/scrollycoding.scss b/packages/mdx/src/client/scrollycoding.scss
@@ -49,22 +49,26 @@
   .ch-scrollycoding-sticker {
     height: 80vh;
     gap: 0.5rem;
-  }
 
-  .ch-scrollycoding-sticker .ch-editor-frame,
-  .ch-scrollycoding-sticker .ch-code {
-    flex: 1;
+    .ch-codeblock,
+    .ch-codegroup {
+      flex: 1;
+    }
   }
 
   .ch-scrollycoding-preview {
     height: 280px;
   }
 }
 
-.ch-scrollycoding-sticker .ch-editor-frame,
-.ch-scrollycoding-sticker .ch-code {
-  width: 100%;
-  min-width: 100%;
-  min-height: 200px;
-  max-height: 80vh;
+.ch-scrollycoding-sticker {
+  .ch-codeblock,
+  .ch-codegroup {
+    width: 100%;
+    min-width: 100%;
+    min-height: 200px;
+    max-height: 80vh;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }
diff --git a/packages/mdx/src/client/slideshow.scss b/packages/mdx/src/client/slideshow.scss
@@ -13,6 +13,8 @@
 .ch-slideshow-slide .ch-codegroup,
 .ch-slideshow-slide .ch-codeblock {
   flex: 2;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .ch-slideshow-preview {
diff --git a/packages/mdx/src/client/spotlight.scss b/packages/mdx/src/client/spotlight.scss
@@ -47,6 +47,8 @@
   min-width: 100%;
   min-height: Min(100%, 80vh);
   max-height: 80vh;
+  margin-top: 0;
+  margin-bottom: 0;
   flex: 1;
 }
 
diff --git a/packages/mdx/src/index.scss b/packages/mdx/src/index.scss
@@ -18,6 +18,12 @@
   }
 }
 
+.ch-codeblock,
+.ch-codegroup {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
 .ch-inline-code > code {
   padding: 0.2em 0.4em;
   margin: 0.1em -0.1em;
diff --git a/packages/playground/content/simple-code.mdx b/packages/playground/content/simple-code.mdx
@@ -6,8 +6,6 @@ function lorem(ipsum, dolor = 1) {
 }
 ```
 
----
-
 ```js
 function lorem(ipsum, dolor = 1) {}
 ```

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@`
`13`	`13`	`.ch-slideshow-slide .ch-codegroup,`
`14`	`14`	`.ch-slideshow-slide .ch-codeblock {`
`15`	`15`	`flex: 2;`
	`16`	`+ margin-top: 0;`
	`17`	`+ margin-bottom: 0;`
`16`	`18`	`}`
`17`	`19`
`18`	`20`	`.ch-slideshow-preview {`
Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,8 @@`
`47`	`47`	`min-width: 100%;`
`48`	`48`	`min-height: Min(100%, 80vh);`
`49`	`49`	`max-height: 80vh;`
	`50`	`+ margin-top: 0;`
	`51`	`+ margin-bottom: 0;`
`50`	`52`	`flex: 1;`
`51`	`53`	`}`
`52`	`54`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,12 @@`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
	`21`	`+.ch-codeblock,`
	`22`	`+.ch-codegroup {`
	`23`	`+ margin-top: 1.25em;`
	`24`	`+ margin-bottom: 1.25em;`
	`25`	`+}`
	`26`	`+`
`21`	`27`	`.ch-inline-code > code {`
`22`	`28`	`padding: 0.2em 0.4em;`
`23`	`29`	`margin: 0.1em -0.1em;`
Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,6 @@ function lorem(ipsum, dolor = 1) {`
`6`	`6`	`}`
`7`	`7`	```
`8`	`8`
`9`		`----`
`10`		`-`
`11`	`9`	```js
`12`	`10`	`function lorem(ipsum, dolor = 1) {}`
`13`	`11`	```