Just add a main tag and suddenly it's approved?

pages/copy/index.html

@@ -1,7 +1,7 @@
 <style>
 @import "/style.css";
 </style>
-<div class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
+<main class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
   <h1 class="pb-10!">Copying Popular Websites to Learn Tailwind</h1>
 
   <p>I've advocated for years that copying other websites is the best way to learn web design. Copying is a <b>very</b> common and established way to learn almost any creative discipline including (but not limited to): Painting, Drawing, Writing, Music, Wood Working, Lutherie, Design, and Programming.  To demonstrate this I've been doing copies of websites to learn <a class="text-gray-950 bg-gray-300" href="https://tailwindcss.com/">Tailwind</a>.
@@ -21,4 +21,4 @@
   <p>You can view this code at <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games">my git repository</a>.  The copies can be found in <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games/src/branch/main/pages/copy">pages/copy</a> and the tool I use to generate the pages is one I wrote called <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/ssgod">ssgod</a>.
   </p>
 
-</div>
+</main>

pages/layouts/main.html

@@ -29,9 +29,9 @@
     <a id="login" href="/login/">Login</a>
   </header>
 
-  <div class="p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50">
+  <main>
     {{embed}}
-  </div>
+  </main>
 
   <footer>
     <div class="flex-1">

static/input_style.css

@@ -5,6 +5,10 @@ body {
   @apply text-gray-950 dark:text-gray-50;
 }
 
+main {
+  @apply p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
+}
+
 header {
   @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
 }

static/style.css

@@ -358,9 +358,6 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .gap-10\! {
-    gap: calc(var(--spacing) * 10) !important;
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -492,33 +489,18 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
-  .p-40 {
-    padding: calc(var(--spacing) * 40);
-  }
-  .p-40\! {
-    padding: calc(var(--spacing) * 40) !important;
-  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
-  .pb-2 {
-    padding-bottom: calc(var(--spacing) * 2);
-  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
-  .pb-3\! {
-    padding-bottom: calc(var(--spacing) * 3) !important;
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
-  .pb-4\! {
-    padding-bottom: calc(var(--spacing) * 4) !important;
-  }
   .pb-5 {
     padding-bottom: calc(var(--spacing) * 5);
   }
@@ -648,6 +630,18 @@ body {
     color: var(--color-gray-50);
   }
 }
+main {
+  min-height: 100vh;
+  background-color: var(--color-gray-100);
+  padding: calc(var(--spacing) * 0);
+  color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-gray-900);
+  }
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-50);
+  }
+}
 header {
   display: flex;
   background-color: var(--color-gray-950);