From cecbdce4d291d1516a4b9ec0bdeda9581ac11ef5 Mon Sep 17 00:00:00 2001
From: Luiz Chaves <lucachaves@gmail.com>
Date: Mon, 2 Sep 2024 00:16:08 -0300
Subject: [PATCH] style: change code preview

---
 .../classnotes/css/transition/index.mdx       | 106 +++++++++++-------
 1 file changed, 66 insertions(+), 40 deletions(-)

diff --git a/src/content/classnotes/css/transition/index.mdx b/src/content/classnotes/css/transition/index.mdx
index 6409f6f..b0f45d3 100644
--- a/src/content/classnotes/css/transition/index.mdx
+++ b/src/content/classnotes/css/transition/index.mdx
@@ -14,7 +14,7 @@ import HtmlPreview from '../../../../components/HtmlPreview.astro';
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
 
-```css title="css"
+```css
 /* Apply to 1 property */
 /* property name | duration */
 transition: margin-right 4s;
@@ -42,11 +42,11 @@ Referências:
 
 [opacity.html](/lm/codes/css/transition/opacity.html):
 
-<HtmlPreview src="/codes/css/transition/opacity.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/opacity.html" />
 
-```css title="css"
+```css
 .fade {
   opacity: 0.5;
   transition: opacity 1s;
@@ -58,15 +58,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Border inset
 
 [border-inset.html](/lm/codes/css/transition/border-inset.html):
 
-<HtmlPreview src="/codes/css/transition/border-inset.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/border-inset.html" />
 
-```css title="css"
+```css
 .inset-border {
   transition: box-shadow 1s;
 }
@@ -76,15 +78,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Transform scale grow
 
 [transform-grow.html](/lm/codes/css/transition/transform-grow.html):
 
-<HtmlPreview src="/codes/css/transition/transform-grow.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/transform-grow.html" />
 
-```css title="css"
+```css
 .grow {
   transition: transform 1s;
   will-change: scale;
@@ -95,15 +99,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Transform scale shrink
 
 [transform-shrink.html](/lm/codes/css/transition/transform-shrink.html):
 
-<HtmlPreview src="/codes/css/transition/transform-shrink.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/transform-shrink.html" />
 
-```css title="css"
+```css
 .shrink {
   transition: transform 1s;
   will-change: transform;
@@ -114,15 +120,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Transform scale image
 
 [transform-scale.html](/lm/codes/css/transition/transform-scale.html):
 
-<HtmlPreview src="/codes/css/transition/transform-scale.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/transform-scale.html" />
 
-```css title="css"
+```css
 .img-scale {
   overflow: hidden;
 }
@@ -137,15 +145,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Transform translate
 
 [transform-translate.html](/lm/codes/css/transition/transform-translate.html):
 
-<HtmlPreview src="/codes/css/transition/transform-translate.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/transform-translate.html" />
 
-```css title="css"
+```css
 .translate {
   transition: transform 1s;
   will-change: transform;
@@ -156,15 +166,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Filter blur
 
 [filter-blur.html](/lm/codes/css/transition/filter-blur.html):
 
-<HtmlPreview src="/codes/css/transition/filter-blur.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/filter-blur.html" />
 
-```css title="css"
+```css
 .blur {
   filter: blur(1px);
   transition: filter 1s;
@@ -175,15 +187,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Filter contrast
 
 [filter-contrast.html](/lm/codes/css/transition/filter-contrast.html):
 
-<HtmlPreview src="/codes/css/transition/filter-contrast.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/filter-contrast.html" />
 
-```css title="css"
+```css
 .contrast {
   transition: filter .5s;
 }
@@ -193,15 +207,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Filter sepia
 
 [filter-sepia.html](/lm/codes/css/transition/filter-sepia.html):
 
-<HtmlPreview src="/codes/css/transition/filter-sepia.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/filter-sepia.html" />
 
-```css title="css"
+```css
 .sepia {
   filter: sepia(100%);
   transition: filter 0.5s;
@@ -212,15 +228,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Filter gray scale
 
 [filter-gray-scale.html](/lm/codes/css/transition/filter-gray-scale.html):
 
-<HtmlPreview src="/codes/css/transition/filter-gray-scale.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/filter-gray-scale.html" />
 
-```css title="css"
+```css
 .gray-scale {
   filter: grayscale(100%);
   transition: filter 0.5s;
@@ -231,15 +249,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Filter drop shadow
 
 [filter-drop-shadow.html](/lm/codes/css/transition/filter-drop-shadow.html):
 
-<HtmlPreview src="/codes/css/transition/filter-drop-shadow.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/filter-drop-shadow.html" />
 
-```css title="css"
+```css
 .drop-shadow {
   transition: filter 1s;
   will-change: transform;
@@ -250,15 +270,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Background color
 
 [background-color.html](/lm/codes/css/transition/background-color.html):
 
-<HtmlPreview src="/codes/css/transition/background-color.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/background-color.html" />
 
-```css title="css"
+```css
 .chcolor {
   transition: background 1s;
   will-change: background;
@@ -269,15 +291,17 @@ CSS:
 }
 ```
 
+</div>
+
 ## Background blend mode
 
 [background-blend-mode.html](/lm/codes/css/transition/background-blend-mode.html):
 
-<HtmlPreview src="/codes/css/transition/background-blend-mode.html" />
+<div class="flex flex-col space-y-0.5">
 
-CSS:
+<HtmlPreview src="/codes/css/transition/background-blend-mode.html" />
 
-```css title="css"
+```css
 .filter-blend {
   background-color: transparent;
   background-blend-mode: screen;
@@ -289,6 +313,8 @@ CSS:
 }
 ```
 
+</div>
+
 ## Referências
 
 - Transition