3 files changed, 60 insertions, 21 deletions
diff --git a/assets/scss/input.css b/assets/scss/input.css
index c54148e..35c345f 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -156,6 +156,26 @@ blockquote::before {
       margin: 0 0.5rem;
     }
   }
+  .comment {
+    @apply my-2 pl-4 border-l border-lime-500 relative;
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply my-0 pl-2;
+      &::before {
+        font-family: "Font Awesome 6 Free";
+        color: #79c753;
+        content: "\f075";
+        font-weight: 900;
+        font-size: 2rem;
+        position: absolute;
+        left: -0.75rem;
+        top: -1rem;
+        transform: scaleX(-1);
+      }
+    }
+  }
 }
 
 @layer utilities {
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 4c591e7..fdb706a 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -167,27 +167,6 @@ table:not(.u-legend) {
   }
 }
 
-.comment {
-  @extend .mv2, .pl3, .bl, .bw1, .w3-theme-border, .relative;
-  h3,
-  h4,
-  h5,
-  h6 {
-    @extend .mv0, .pl2;
-    &::before {
-      font-family: "Font Awesome 6 Free";
-      color: #79c753;
-      content: "\f075";
-      font-weight: 900;
-      font-size: 2rem;
-      position: absolute;
-      left: -0.75rem;
-      top: -1rem;
-      transform: scaleX(-1);
-    }
-  }
-}
-
 /* gallery
 // https://lubna.dev/articles/create-css-only-image-gallery/
 // box-sizing setup is part of tachyons
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index aadfd30..95d03f9 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -850,6 +850,46 @@ h6 {
   }
 }
 
+.comment {
+  position: relative;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-left-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(132 204 22 / var(--tw-border-opacity, 1));
+  padding-left: 1rem;
+  h3,
+    h4,
+    h5,
+    h6 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+  h3,
+    h4,
+    h5,
+    h6 {
+    padding-left: 0.5rem;
+  }
+  h3,
+    h4,
+    h5,
+    h6 {
+    &::before {
+      font-family: "Font Awesome 6 Free";
+      color: #79c753;
+      content: "\f075";
+      font-weight: 900;
+      font-size: 2rem;
+      position: absolute;
+      left: -0.75rem;
+      top: -1rem;
+      -webkit-transform: scaleX(-1);
+              transform: scaleX(-1);
+    }
+  }
+}
+
 .collapse {
   visibility: collapse;
 }