STYLE Enhance editor styles: add new utility classes for layout, spacing, and typography, including grid and flex properties, and update color variables for consistency.

css/editor-style.css

@@ -44,6 +44,10 @@
   }
 }
 
+.relative {
+  position: relative
+}
+
 .m-8 {
   margin: 2rem
 }
@@ -79,10 +83,22 @@
   margin-bottom: 0.25rem
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem
+}
+
+.mt-8 {
+  margin-top: 2rem
+}
+
 .mb-12 {
   margin-bottom: 3rem
 }
 
+.block {
+  display: block
+}
+
 .inline-block {
   display: inline-block
 }
@@ -91,6 +107,10 @@
   display: flex
 }
 
+.grid {
+  display: grid
+}
+
 .h-1 {
   height: 0.25rem
 }
@@ -99,6 +119,10 @@
   height: 1.5rem
 }
 
+.h-48 {
+  height: 12rem
+}
+
 .min-h-screen {
   min-height: 100vh
 }
@@ -131,12 +155,8 @@
   cursor: pointer
 }
 
-.list-disc {
+.grid-cols-1 {
-  list-style-type: disc
+  grid-template-columns: repeat(1, minmax(0, 1fr))
-}
-
-.list-decimal {
-  list-style-type: decimal
 }
 
 .flex-col {
@@ -155,10 +175,22 @@
   justify-content: space-between
 }
 
+.gap-6 {
+  gap: 1.5rem
+}
+
+.overflow-hidden {
+  overflow: hidden
+}
+
 .rounded {
   border-radius: 0.25rem
 }
 
+.rounded-lg {
+  border-radius: 0.5rem
+}
+
 .border {
   border-width: 1px
 }
@@ -169,12 +201,17 @@
 
 .border-primary {
   --tw-border-opacity: 1;
-  border-color: rgb(64 79 142 / var(--tw-border-opacity))
+  border-color: rgb(19 111 99 / var(--tw-border-opacity))
+}
+
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity))
 }
 
 .bg-primary {
   --tw-bg-opacity: 1;
-  background-color: rgb(64 79 142 / var(--tw-bg-opacity))
+  background-color: rgb(19 111 99 / var(--tw-bg-opacity))
 }
 
 .bg-gray-200 {
@@ -187,14 +224,19 @@
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity))
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
-.bg-red-500 {
+.object-cover {
-  --tw-bg-opacity: 1;
+  -o-object-fit: cover;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity))
+     object-fit: cover
 }
 
 .p-4 {
@@ -226,8 +268,14 @@
   padding-bottom: 1.5rem
 }
 
-.text-center {
+.py-8 {
-  text-align: center
+  padding-top: 2rem;
+  padding-bottom: 2rem
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem
 }
 
 .text-5xl {
@@ -250,6 +298,15 @@
   line-height: 1.25rem
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem
+}
+
+.text-xl {
+  font-size: 1.25rem
+}
+
 .font-light {
   font-weight: 300
 }
@@ -262,6 +319,10 @@
   font-weight: 800
 }
 
+.font-semibold {
+  font-weight: 600
+}
+
 .uppercase {
   text-transform: uppercase
 }
@@ -280,16 +341,6 @@
   color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity))
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity))
-}
-
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity))
@@ -300,14 +351,9 @@
   color: rgb(55 65 81 / var(--tw-text-opacity))
 }
 
-.text-blue-500 {
+.text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity))
+  color: rgb(185 28 28 / var(--tw-text-opacity))
-}
-
-.underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline
 }
 
 .antialiased {
@@ -315,6 +361,12 @@
   -moz-osx-font-smoothing: grayscale
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
 .alignfull {
   margin: 2rem calc(50% - 50vw) !important;
   max-width: 100vw !important;
@@ -404,6 +456,12 @@ body {
   max-width: 782px
 }
 
+@media (min-width: 600px) {
+  .sm\:inline {
+    display: inline
+  }
+}
+
 @media (min-width: 782px) {
   .md\:my-6 {
     margin-top: 1.5rem;
@@ -418,6 +476,10 @@ body {
     width: 50%
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem
@@ -451,6 +513,10 @@ body {
     display: none
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+  }
+
   .lg\:items-center {
     align-items: center
   }