fix grid class

Author: bjohansebas

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -94,7 +94,7 @@ const ReleaseCodeBox: FC = () => {
   } = currentPlatform ?? {};
 
   return (
-    <div className="mb-6 mt-4 flex flex-col gap-2">
+    <div className="mt-4 mb-6 flex flex-col gap-2">
       <noscript>
         <AlertBox
           title={t('components.common.alertBox.warning')}

apps/site/components/__design__/font-family.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 export const FontFamily: StoryObj = {
   render: () => (
-    <div className="align-center ga-1 w-100 flex h-full flex-row flex-wrap justify-start">
+    <div className="align-center ga-1 flex h-full w-100 flex-row flex-wrap justify-start">
       <div>
         <p className="font-regular text-xs">Text XS/Regular</p>
         <p className="text-xs font-medium">Text XS/Medium</p>

apps/site/layouts/layouts.module.css

@@ -11,21 +11,21 @@
 
 .articleLayout {
   @apply max-w-8xl
-    sm:grid-areas-[sidebar_main,sidebar_footer]
-    lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
     mx-auto
     block
     w-full
     sm:grid
     sm:grid-cols-[theme(spacing.52)_1fr]
     sm:grid-rows-[1fr]
     sm:overflow-visible
+    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
     md:grid-cols-[theme(spacing.64)_1fr]
     lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
     xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
-    @apply grid-in-[sidebar]
+    @apply [grid-area:'sidebar']
       lg:sticky
       lg:top-0
       lg:h-[100vh]
@@ -37,20 +37,20 @@
       sm:max-lg:block;
 
     > *:first-child {
-      @apply grid-in-[main]
-        sm:bg-gradient-subtle
+      @apply sm:bg-gradient-subtle
         sm:dark:bg-gradient-subtle-dark
         p-4
+        [grid-area:'main']
         motion-safe:scroll-smooth
         sm:bg-fixed
         sm:p-12
         xl:px-18;
     }
 
     > *:last-child {
-      @apply grid-in-[metabar]
-        mt-8
+      @apply mt-8
         border-t
+        [grid-area:'metabar']
         sm:mt-0
         lg:sticky
         lg:top-0
@@ -61,8 +61,7 @@
   }
 
   > *:nth-child(3) {
-    @apply grid-in-[footer]
-      sticky
+    @apply sticky
       bottom-0
       flex
       w-full
@@ -73,6 +72,7 @@
       border-t-neutral-200
       bg-white
       py-4
+      [grid-area:'footer']
       dark:border-t-neutral-900
       dark:bg-neutral-950;
   }

apps/site/styles/locals.css

@@ -4,7 +4,7 @@
  * managed to avoid disrupting the layout.
  */
 html[lang='ko'] {
-  @apply break-words
-    break-keep
-    leading-7;
+  @apply leading-7
+    break-words
+    break-keep;
 }