From 7314f5bec3b29fa275f6c4ba7883c88f49181797 Mon Sep 17 00:00:00 2001
From: Serge Ilyashenko <age_bookend_0j@icloud.com>
Date: Mon, 23 Sep 2024 16:51:06 +0200
Subject: [PATCH] feat(homepage): simple-pie examples layout

---
 .../src/components/SimplePieCases.mdx         | 90 +++++++++----------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/apps/homepage/src/components/SimplePieCases.mdx b/apps/homepage/src/components/SimplePieCases.mdx
index 859a541..9032605 100644
--- a/apps/homepage/src/components/SimplePieCases.mdx
+++ b/apps/homepage/src/components/SimplePieCases.mdx
@@ -1,51 +1,49 @@
 ---
 ---
-import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Card } from '@astrojs/starlight/components';
 
 import './PieScript.astro';
 
-<CardGrid>
-  <Card>
-    <div class="pie"
-         data-pie={JSON.stringify([2, 1, 1, 2])}
-         data-options={JSON.stringify({})}
-    ></div>
-    ```js
-      simplePie([2, 1, 1, 2])
-    ```
-  </Card>
-  <Card>
-    <div class="pie"
-         data-pie={JSON.stringify([2, 1, 1, 2])}
-         data-options={JSON.stringify({ borderColor: "transparent" })}
-    ></div>
-    ```js
-      simplePie([2, 1, 1, 2], {
-        borderColor: "transparent"
-      })
-    ```
-  </Card>
-  <Card>
-    <div class="pie"
-         data-doughnut={JSON.stringify([2, 1, 1, 2])}
-         data-options={JSON.stringify({ borderWidth: 3 })}
-    ></div>
-    ```js
-      simpleDoughnut([2, 1, 1, 2], {
-        borderWidth: 3
-      })
-    ```
-  </Card>
-  <Card>
-    <div class="pie"
-         data-doughnut={JSON.stringify([2, 1, 1, 2])}
-         data-options={JSON.stringify({ borderColor: "transparent", inner: 0.3 })}
-    ></div>
-    ```js
-      simpleDoughnut([2, 1, 1, 2], {
-        borderColor: "transparent",
-        inner: 0.3,
-      })
-    ```
-  </Card>
-</CardGrid>
+<Card>
+  <div class="pie"
+       data-pie={JSON.stringify([2, 1, 1, 2])}
+       data-options={JSON.stringify({})}
+  ></div>
+  ```js
+    simplePie([2, 1, 1, 2])
+  ```
+</Card>
+<Card>
+  <div class="pie"
+       data-pie={JSON.stringify([2, 1, 1, 2])}
+       data-options={JSON.stringify({ borderColor: "transparent" })}
+  ></div>
+  ```js
+  simplePie([2, 1, 1, 2], {
+    borderColor: "transparent"
+  })
+  ```
+</Card>
+<Card>
+  <div class="pie"
+       data-doughnut={JSON.stringify([2, 1, 1, 2])}
+       data-options={JSON.stringify({ borderWidth: 3 })}
+  ></div>
+  ```js
+  simpleDoughnut([2, 1, 1, 2], {
+    borderWidth: 3
+  })
+  ```
+</Card>
+<Card>
+  <div class="pie"
+       data-doughnut={JSON.stringify([2, 1, 1, 2])}
+       data-options={JSON.stringify({ borderColor: "transparent", inner: 0.3 })}
+  ></div>
+  ```js
+  simpleDoughnut([2, 1, 1, 2], {
+    borderColor: "transparent",
+    inner: 0.3,
+  })
+  ```
+</Card>