Style content

Author: SebKay

resources/css/app.css

@@ -5,37 +5,14 @@
 
 @plugin '@tailwindcss/forms';
 
+@import "./variables.css";
+
 @import "./typography.css";
+@import "./utilities.css";
 @import "./forms.css";
 @import "./buttons.css";
 @import "./content.css";
 
-@theme {
-    --font-text: "Arial", sans-serif;
-    --font-heading: "Arial", sans-serif;
-
-    --breakpoint-xs: 321px;
-    --breakpoint-sm: 451px;
-    --breakpoint-md: 671px;
-    --breakpoint-lg: 769px;
-    --breakpoint-xl: 1025px;
-    --breakpoint-2xl: 1281px;
-    --breakpoint-3xl: 1441px;
-    --breakpoint-4xl: 1901px;
-
-    --color-brand-50: #f3f6fb;
-    --color-brand-100: #e5e9f4;
-    --color-brand-200: #d0d9ed;
-    --color-brand-300: #b0c0e0;
-    --color-brand-400: #8a9fd0;
-    --color-brand-500: #6a7fc1;
-    --color-brand-600: #5b6bb5;
-    --color-brand-700: #505aa5;
-    --color-brand-800: #464c87;
-    --color-brand-900: #3c416c;
-    --color-brand-950: #282a43;
-}
-
 @layer base {
     #app {
         @apply h-full;

resources/css/content.css

@@ -1,87 +1,114 @@
 @utility content {
-    @apply text-neutral-700;
+    strong {
+        @apply font-bold;
+    }
 
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
-        @apply font-heading font-bold  text-neutral-900;
+        @apply heading;
     }
 
     h1 {
-        @apply text-4xl md:text-5xl;
+        @apply h1;
     }
 
     h2 {
-        @apply text-3xl;
+        @apply h2;
     }
 
     h3 {
-        @apply text-2xl;
+        @apply h3;
     }
 
     h4 {
-        @apply text-xl;
+        @apply h4;
     }
 
     h5 {
-        @apply text-lg;
+        @apply h5;
     }
 
     h6 {
-        @apply text-base;
+        @apply h6;
     }
 
-    li {
-        @apply ml-8;
+    a:not(.button) {
+        @apply text-link;
     }
 
-    a {
-        @apply underline hover:decoration-transparent transition-colors;
+    blockquote {
+        @apply pl-6 py-3 border-l-3 border-brand-300;
+
+        p {
+            @apply text-xl font-serif italic;
+        }
     }
 
-    ul li {
-        @apply list-disc;
+    .table-wrap {
+        @apply p-8 rounded-lg bg-white;
     }
 
-    ol li {
-        @apply list-decimal;
+    table {
+        @apply table;
     }
 
-    strong {
-        @apply font-bold;
+    tr:first-child th {
+        @apply pt-0;
     }
 
-    blockquote {
-        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+    ol,
+    ul {
+        @apply list-inside;
     }
 
-    table {
-        @apply w-full text-sm text-left;
+    ol li {
+        @apply list-decimal;
+    }
+
+    ul li {
+        @apply list-disc;
     }
 
-    th {
-        @apply p-4 font-bold bg-brand-200;
+    > * + * {
+        @apply mt-12;
     }
 
-    td {
-        @apply p-4 font-medium;
+    p + p,
+    p + ol,
+    ol + p,
+    p + ul,
+    ul + p,
+    ul + ul,
+    ol + ol,
+    ul + ol,
+    ol + ul {
+        @apply mt-6;
     }
 
-    tr:not(:last-child) td {
-        @apply border-b border-brand-200;
+    li + li {
+        @apply mt-2;
     }
 
-    * {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        & + p,
+        & + ul,
+        & + ol,
         & + h1,
         & + h2,
         & + h3,
         & + h4,
         & + h5,
         & + h6 {
-            @apply mt-8;
+            @apply mt-6;
         }
     }
 }

resources/css/utilities.css

@@ -0,0 +1,3 @@
+@utility text-link {
+    @apply underline hover:decoration-transparent transition-colors;
+}

resources/css/variables.css

@@ -0,0 +1,26 @@
+@theme {
+    --font-text: "Arial", sans-serif;
+    --font-heading: "Arial", sans-serif;
+    --font-serif: "Georgia", sans-serif;
+
+    --breakpoint-xs: 321px;
+    --breakpoint-sm: 451px;
+    --breakpoint-md: 671px;
+    --breakpoint-lg: 769px;
+    --breakpoint-xl: 1025px;
+    --breakpoint-2xl: 1281px;
+    --breakpoint-3xl: 1441px;
+    --breakpoint-4xl: 1901px;
+
+    --color-brand-50: #f3f6fb;
+    --color-brand-100: #e5e9f4;
+    --color-brand-200: #d0d9ed;
+    --color-brand-300: #b0c0e0;
+    --color-brand-400: #8a9fd0;
+    --color-brand-500: #6a7fc1;
+    --color-brand-600: #5b6bb5;
+    --color-brand-700: #505aa5;
+    --color-brand-800: #464c87;
+    --color-brand-900: #3c416c;
+    --color-brand-950: #282a43;
+}

resources/js/Pages/Elements.vue

@@ -96,8 +96,7 @@
                                     class="sr-only peer"
                                     type="checkbox"
                                 />
-                                <div
-                                    class="peer">
+                                <div class="peer">
                                 </div>
                                 <span>
                                     Toggle
@@ -142,9 +141,11 @@
                         <li>Ordered List Item 3</li>
                     </ol>
                     <blockquote>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic praesentium consectetur eum
-                        laudantium optio temporibus. Beatae, nulla natus aut accusamus sint culpa at itaque, voluptates
-                        architecto laboriosam ipsum voluptatem ducimus.
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic praesentium consectetur eum
+                            laudantium optio temporibus. Beatae, nulla natus aut accusamus sint culpa at itaque,
+                            voluptates architecto laboriosam ipsum voluptatem ducimus.
+                        </p>
                     </blockquote>
                     <table>
                         <thead>