style: remove redundant classes, add comments and remove white space

Former-commit-id: 4b43af90795cbe916a9e705ea48ec93962e359c6

3 files changed, 44 insertions, 75 deletions

diff --git a/assets/css/_markdown.scss b/assets/css/_markdown.scss
index 31ee8f5a..ba9064a0 100644
--- a/assets/css/_markdown.scss
+++ b/assets/css/_markdown.scss
@@ -6,11 +6,51 @@ $block-background-color: var(--block-background-color);
 $strong-text-color: #A94A4A;
 $em-text-color: #889E73;
 
-// Main styles
 .markdown-body {
   max-width: 100%;
 
-  // Nested styles for child elements
+  p {
+    hyphens: auto;
+    text-justify: ideographic;
+    margin-bottom: 1em;
+  }
+
+  strong { color: $strong-text-color; }
+
+  em { color: $em-text-color; }
+
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 1rem auto;
+  }
+
+  ul {
+    list-style-type: square;
+  }
+
+  ul, ol {
+      padding-inline-start: 1.75rem;
+      li {
+          padding-left: 0.25rem;
+      }
+      ::marker {
+        color: var(--secondary-text-color);
+      }
+  }
+
+  mark {
+    background-color: rgba(255, 235, 0, .5)
+  }
+
+  del {
+      opacity: 0.5
+  }
+
+  iframe {
+      max-width: 100%;
+  }
+
   a {
     text-decoration: underline;
     text-decoration-style: wavy;
@@ -82,26 +122,6 @@ $em-text-color: #889E73;
     }
   }
 
-  p {
-    hyphens: auto;
-    text-justify: ideographic;
-    margin-bottom: 1em;
-  }
-
-  strong {
-    color: $strong-text-color;
-  }
-
-  em {
-    color: $em-text-color;
-  }
-
-  img {
-    max-width: 100%;
-    display: block;
-    margin: 1rem auto;
-  }
-
   figure {
     display: block;
     margin: 0;
@@ -116,57 +136,6 @@ $em-text-color: #889E73;
         }
     }
   }
-
-  ul {
-    list-style-type: square;
-  }
-
-  ul, ol {
-      padding-inline-start: 1.75rem;
-      li {
-          padding-left: 0.25rem;
-      }
-      ::marker {
-        color: var(--secondary-text-color);
-      }
-  }
-
-  mark {
-    background-color: rgba(255, 235, 0, .5)
-  }
-
-  .table-container {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-
-      table {
-          border-collapse: collapse;
-          table-layout: fixed;
-          min-width: 100%;
-          width: max-content;
-
-          border-top: 2px solid var(--border-color);
-
-          tr {
-              border-bottom: 1px solid var(--border-color);
-          }
-          td, th {
-              max-width: 200px;
-              padding: 0.5rem 1rem;
-              line-height: 1.5;
-              white-space: normal;
-              word-wrap: break-word;
-          }
-      }
-  }
-
-  del {
-      opacity: 0.5
-  }
-
-  iframe {
-      max-width: 100%;
-  }
 }
 
 /* gallery shortcode */
diff --git a/assets/css/utils/_reset.scss b/assets/css/utils/_reset.scss
index cf910cc0..1616945a 100644
--- a/assets/css/utils/_reset.scss
+++ b/assets/css/utils/_reset.scss
@@ -23,8 +23,6 @@ body {
     }
 }
 
-
-
 article {
     max-width: var(--page-width);
     margin: 0 auto;
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index 6daa9f0d..7b7c53c3 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -1,3 +1,4 @@
+/* container that extends the page width */
 .outbox {
   display: flex;
   justify-content: center;
@@ -28,6 +29,7 @@
   }
 }
 
+/* filter that gives element a printed look */
 .xerox {
     filter: url(#x);
 }