feat: added headings css

Author: gerardnico

src/resources/styles/global.css

@@ -7,6 +7,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "./grid.css";
+@import "./headings.css";
 
 /* Project Pages */
 @source "../../../apps/site/pages";
@@ -177,17 +178,27 @@
         @apply mb-3;
     }
 
-    /* Fighting the Preflight reset  */
-    main h1,
-    main h2,
-    main h3,
-    main h4,
-    main h5,
-    main h6 {
-        font-size: revert;
-        font-weight: revert;
-        @apply mb-3 mt-5;
-    }
+    /*main h1, main .h1 {*/
+    /*    @apply text-3xl md:text-4xl xl:text-5xl;*/
+    /*}*/
+    /*main h2, main .h2 {*/
+    /*    @apply text-2xl md:text-3xl xl:text-4xl;*/
+    /*}*/
+    /*main h3, main .h3 {*/
+    /*    @apply text-xl md:text-2xl xl:text-3xl;*/
+    /*}*/
+    /*main h4, main .h4 {*/
+    /*    @apply text-lg md:text-xl xl:text-2xl;*/
+    /*}*/
+    /*main h5, main .h5 {*/
+    /*    @apply text-base md:text-lg xl:text-xl;*/
+    /*}*/
+
+    /*main .lead {*/
+    /*    @apply text-muted-foreground text-lg md:text-xl xl:text-2xl;*/
+    /*}*/
+
+
 
     main p {
         @apply mb-3;
@@ -200,3 +211,5 @@
     }
 
 }
+
+

src/resources/styles/headings.css

@@ -0,0 +1,59 @@
+/* Headings based on Bootstrap */
+
+/* Fighting the Preflight reset  */
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: .5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    @apply mb-3 mt-5;
+}
+
+@utility h1 {
+    font-size: calc(1.375rem + 1.5vw)!important;
+}
+
+h1 {
+    @apply h1 xl:text-5xl
+}
+
+@utility h2 {
+    font-size: calc(1.325rem + .9vw)!important;
+}
+
+h2 {
+    @apply h2 xl:text-4xl
+}
+
+
+@utility h3 {
+    font-size: calc(1.3rem + .6vw)!important;
+}
+
+h3 {
+    @apply h3 xl:text-3xl
+}
+
+@utility h4 {
+    font-size: calc(1.275rem + .3vw)!important;
+}
+
+h4 {
+    @apply h4 xl:text-2xl
+}
+
+@utility h5 {
+    font-size: 1.25rem!important;
+}
+
+h5 {
+    @apply h5 xl:text-xl
+}
+
+@utility h6 {
+    font-size: 1rem!important;
+}
+
+@utility lead {
+    @apply text-xl text-muted-foreground;
+}