Update demo page

markteekman · Feb 26, 2022 · 58f2cfd · 58f2cfd
1 parent dc8474c
commit 58f2cfd
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,38 +4,41 @@ import DarkMode from '../components/DarkMode.astro'
 ---
 
 <DefaultLayout title="Home">
-  <section class="margin-32">
+  <section class="margin-48">
     <div class="container">
       <h1 tabindex="-1">Hello world!</h1><br>
       <DarkMode client:load />
     </div>
   </section>
-  <section class="padding-32 color-primary">
+  <section class="padding-48 color-primary">
     <div class="container">
-      <h2 class="margin-16 bottom">Grid example</h2>
+      <h2 class="margin-16 bottom">Auto Grid</h2>
     </div>
     <div class="container" data-auto-grid="3">
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in">
         <h3>Column 1</h3>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. </p>
       </div>
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.25s">
         <h3>Column 2</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
       </div>
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.5s">
         <h3>Column 3</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
       </div>
     </div>
+    <div class="container margin-16 top">
+      <strong><a href="#">Tab to me!</a></strong>
+    </div>
   </section>
-  <section class="margin-32">
+  <section class="margin-64">
     <div class="container">
-      <div class="grid gutters">
-        <div class="cell">
-          <h2>Flexbox example</h2>
+      <div class="grid">
+        <div class="small-12">
+          <h2>12 Column Grid</h2>
         </div>
-        <div class="cell space-content small-12 medium-3">
+        <div class="small-12 medium-3 space-content">
           <h3>Sidebar</h3>
           <ul>
             <li>Lorem ipsum dolor sit amet.</li>
@@ -44,7 +47,7 @@ import DarkMode from '../components/DarkMode.astro'
             <li>Lorem ipsum dolor sit amet.</li>
           </ul>
         </div>
-        <div class="cell space-content small-12 medium-8 offset-medium-1">
+        <div class="small-12 medium-8 offset-medium-4 space-content">
           <h3>Main</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis. <strong><a href="#">Tab to me!</a></strong></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis.</p>