Subject:

Reason for Commit: Summary: Notes:
memorialforestdg · Sep 18, 2024 · 242e9e7 · 242e9e7
1 parent ae535a2
commit 242e9e7
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/src/pages/styleguide/flourish-page.astro b/src/pages/styleguide/flourish-page.astro
@@ -36,9 +36,9 @@ import Flourish from '../../components/Flourish.astro'
           </div>
         </section>
 
-        <section class="grid">
+        <section>
           <h3>Flourish Properties</h3>
-          <div class="grid pa-0 grid-cols-3 pb-4 bt">
+          <div class="pa-0 grid-ns grid-cols-3 pb-4 bt">
             <ul class="list f7">
               <li><code>--alder</code></li>
               <li><code>--apple</code></li>
@@ -81,8 +81,10 @@ import Flourish from '../../components/Flourish.astro'
           </div>
           <section>
             <h3>Flourish Examples</h3>
-            <ul class="list bt pt-5 grid grid-cols-2 gap-5">
-              <li>
+            <ul
+              class="list bt pt-5 grid-ns grid-cols-1 grid-cols-2-ns gap-5 gap-4-ns"
+            >
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--alder', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -92,7 +94,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--apple', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -102,7 +104,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--aspen', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -112,7 +114,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--beech', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -122,7 +124,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--downybirch', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -132,7 +134,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--englishoak', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -142,7 +144,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--fieldmaple', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -152,7 +154,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--greywillow', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -162,7 +164,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--hawthorn', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -172,7 +174,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--holly', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -182,7 +184,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--horsechestnut',
@@ -196,7 +198,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--rowan-berries',
@@ -210,7 +212,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--rowan-leaves',
@@ -224,7 +226,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--silverbirch', 'dropcap', '--dc-brand-purple-dk']}
                 >