From f730550d97a686764ea86d7070ba67fa7d96db2c Mon Sep 17 00:00:00 2001
From: terrablue <102580937+terrablue@users.noreply.github.com>
Date: Wed, 24 Jan 2024 21:55:33 +0200
Subject: [PATCH] better set i18n, decrease grid margins

---
 docs/examples/i18n.md              | 45 ++++++++++++++++++++++++------
 packages/website/static/master.css |  2 +-
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/docs/examples/i18n.md b/docs/examples/i18n.md
index b7ca4233..fba46f47 100644
--- a/docs/examples/i18n.md
+++ b/docs/examples/i18n.md
@@ -1,7 +1,8 @@
 %%% React, Svelte, Solid
 
 ```jsx caption=components/Index.jsx
-import { default as t, locale } from "@primate/i18n/react";
+import t from "@primate/i18n/react";
+import { locale } from "@primate/i18n/react";
 
 export default function ({ username }) {
   return <>
@@ -12,15 +13,24 @@ export default function ({ username }) {
     {t("bye")}~
 
     <h3>{t("switch-language")}</h3>
-    <div><a onClick={() => locale.set("en-US")}>{t("English")}</a></div>
-    <div><a onClick={() => locale.set("de-DE")}>{t("German")}</a></div>
+    <div>
+      <a onClick={() => locale.set("en-US")}>
+        {t("English")}
+      </a>
+    </div>
+    <div>
+      <a onClick={() => locale.set("de-DE")}>
+        {t("German")}
+      </a>
+    </div>
   </>;
 }
 ```
 
 ```html caption=components/Index.svelte
 <script>
-  import { default as t, locale } from "@primate/i18n/svelte";
+  import t from "@primate/i18n/svelte";
+  import { locale } from "@primate/i18n/svelte";
 
   export let username;
 </script>
@@ -31,12 +41,21 @@ export default function ({ username }) {
 {$t("bye")}~
 
 <h3>{$t("switch-language")}</h3>
-<div><a on:click={() => locale.set("en-US")}>{$t("English")}</a></div>
-<div><a on:click={() => locale.set("de-DE")}>{$t("German")}</a></div>
+<div>
+  <a on:click={() => locale.set("en-US")}>
+    {$t("English")}
+  </a>
+</div>
+<div>
+  <a on:click={() => locale.set("de-DE")}>
+    {$t("German")}
+  </a>
+</div>
 ```
 
 ```jsx caption=components/Index.jsx
-import { default as t, locale } from "@primate/i18n/solid";
+import t from "@primate/i18n/solid";
+import { locale } from "@primate/i18n/solid";
 
 export default function ({ username }) {
   return <>
@@ -47,8 +66,16 @@ export default function ({ username }) {
     {t("bye")}~
 
     <h3>{t("switch-language")}</h3>
-    <div><a onClick={() => locale.set("en-US")}>{t("English")}</a></div>
-    <div><a onClick={() => locale.set("de-DE")}>{t("German")}</a></div>
+    <div>
+      <a onClick={() => locale.set("en-US")}>
+        {t("English")}
+      </a>
+    </div>
+    <div>
+      <a onClick={() => locale.set("de-DE")}>
+        {t("German")}
+      </a>
+    </div>
   </>;
 }
 ```
diff --git a/packages/website/static/master.css b/packages/website/static/master.css
index 1f1a43d2..a970ca87 100644
--- a/packages/website/static/master.css
+++ b/packages/website/static/master.css
@@ -571,7 +571,7 @@ main.hero {
 .hero .table {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  padding: 50px 75px;
+  padding: 50px 30px;
 }
 
 .hero .table > div {