apply tile styling to markdown, maybe fix #26

simonyiszk · Feb 5, 2024 · e9d7cfb · e9d7cfb
1 parent 76f87c2
commit e9d7cfb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/app/giveaway/page.tsx b/src/app/giveaway/page.tsx
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { GiveawayTile } from '@/components/tiles/giveaway-tile';
+import { Tile } from '@/components/tiles/tile';
 import { getIndexData } from '@/models/get-index-data';
 
 export default async function Giveaway() {
@@ -15,9 +16,11 @@ export default async function Giveaway() {
       <h1 className='col-span-6'>Nyereményjáték</h1>
       <GiveawayTile data={data.giveaway} showLink={false} />
 
-      <div className='tile col-span-6 markdown'>
-        <ReactMarkdown children={data.giveaway.rules} remarkPlugins={[remarkGfm]} />
-      </div>
+      <Tile className='col-span-6'>
+        <Tile.Body className='markdown'>
+          <ReactMarkdown children={data.giveaway.rules} remarkPlugins={[remarkGfm]} />
+        </Tile.Body>
+      </Tile>
     </div>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -35,6 +35,14 @@ h2 {
   @apply underline;
 }
 
+.markdown h2 {
+  @apply my-2;
+}
+
+.markdown h1 {
+  @apply mb-4;
+}
+
 .planet {
   @apply absolute hidden xl:block select-none pointer-events-none;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang='hu'>
       <body className={`${raleway.variable} ${recharge.variable}`}>
-        <main className='flex flex-col min-h-screen'>
+        <main className='flex flex-col min-h-screen overflow-hidden'>
           <Navbar />
           <div className='flex-grow relative flex flex-col justify-center items-center'>{children}</div>
           <Footer />