STYLE Enhance editor styles with new utility classes, responsive design adjustments, and updated color schemes

css/editor-style.css

@@ -44,6 +44,16 @@
   }
 }
 
+@media (min-width: 1840px) {
+  .container {
+    max-width: 1840px
+  }
+}
+
+.relative {
+  position: relative
+}
+
 .m-8 {
   margin: 2rem
 }
@@ -67,10 +77,6 @@
   margin-bottom: 2rem
 }
 
-.mt-4 {
-  margin-top: 1rem
-}
-
 .mb-4 {
   margin-bottom: 1rem
 }
@@ -79,24 +85,36 @@
   margin-bottom: 0.25rem
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem
+}
+
+.mt-8 {
+  margin-top: 2rem
+}
+
 .mb-12 {
   margin-bottom: 3rem
 }
 
-.inline-block {
+.block {
-  display: inline-block
+  display: block
 }
 
 .flex {
   display: flex
 }
 
+.grid {
+  display: grid
+}
+
 .h-1 {
   height: 0.25rem
 }
 
-.h-6 {
+.h-48 {
-  height: 1.5rem
+  height: 12rem
 }
 
 .min-h-screen {
@@ -111,10 +129,6 @@
   width: 4rem
 }
 
-.w-6 {
-  width: 1.5rem
-}
-
 .max-w-sm {
   max-width: 24rem
 }
@@ -131,12 +145,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 +165,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 +191,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 {
@@ -182,9 +209,9 @@
   background-color: rgb(229 231 235 / var(--tw-bg-opacity))
 }
 
-.bg-gray-50 {
+.bg-red-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity))
 }
 
 .bg-white {
@@ -192,9 +219,9 @@
   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 {
@@ -216,18 +243,14 @@
   padding-right: 0.75rem
 }
 
-.py-12 {
+.py-8 {
-  padding-top: 3rem;
+  padding-top: 2rem;
-  padding-bottom: 3rem
+  padding-bottom: 2rem
 }
 
-.py-6 {
+.py-3 {
-  padding-top: 1.5rem;
+  padding-top: 0.75rem;
-  padding-bottom: 1.5rem
+  padding-bottom: 0.75rem
-}
-
-.text-center {
-  text-align: center
 }
 
 .text-5xl {
@@ -250,6 +273,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 +294,10 @@
   font-weight: 800
 }
 
+.font-semibold {
+  font-weight: 600
+}
+
 .uppercase {
   text-transform: uppercase
 }
@@ -280,16 +316,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 +326,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 +336,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 +431,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 +451,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
@@ -425,30 +462,12 @@ body {
 }
 
 @media (min-width: 960px) {
-  .lg\:-mx-4 {
-    margin-left: -1rem;
-    margin-right: -1rem
-  }
-
-  .lg\:mx-4 {
-    margin-left: 1rem;
-    margin-right: 1rem
-  }
-
-  .lg\:mt-0 {
-    margin-top: 0px
-  }
-
-  .lg\:block {
-    display: block
-  }
-
   .lg\:flex {
     display: flex
   }
 
-  .lg\:hidden {
+  .lg\:grid-cols-3 {
-    display: none
+    grid-template-columns: repeat(3, minmax(0, 1fr))
   }
 
   .lg\:items-center {
@@ -459,14 +478,6 @@ body {
     justify-content: space-between
   }
 
-  .lg\:bg-transparent {
-    background-color: transparent
-  }
-
-  .lg\:p-0 {
-    padding: 0px
-  }
-
   .lg\:text-5xl {
     font-size: 3rem;
     line-height: 1