.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - v*
+      - 'v*'
 
 jobs:
   # NPM Registry & GitHub Release

README.md

@@ -1,9 +1,5 @@
 <h1 align="center">x-markdown-css</h1>
 
-> [!IMPORTANT]  
-> I am working on a new CSS styling library, so `x-markdown-css` is deprecated.  
-> PS. Sass dev team supports Palestine Hamas. **I am dropping it.**
-
 <center>
 
 [![NPM Version](https://img.shields.io/npm/v/x-markdown-css)](https://www.npmjs.com/package/x-markdown-css)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-markdown-css",
-  "version": "0.1.6",
+  "version": "0.1.1-patch",
   "description": "A simple and customizable markdown CSS stylesheet for everyone.",
   "keywords": [
     "markdown",
@@ -47,11 +47,11 @@
     "sass": "^1.58.3"
   },
   "devDependencies": {
-    "@kuohuanhuan/stylelint-config": "^0.0.5",
+    "@kuohuanhuan/stylelint-config": "^0.0.4",
     "@lodder/grunt-postcss": "^3.1.1",
     "autoprefixer": "^10.4.13",
     "bumpp": "^9.0.0",
-    "cssnano": "^6.0.0",
+    "cssnano": "^5.1.15",
     "grunt": "^1.6.1",
     "grunt-sass": "^3.1.0",
     "load-grunt-tasks": "^5.1.0",

src/_vars.scss

@@ -1,5 +1,6 @@
 @use 'sass:meta';
 @use 'variables/constants';
+@use 'variables/colors';
 @use 'variables/modes/light';
 @use 'variables/modes/dark';
 
@@ -7,6 +8,10 @@
   @each $name, $val in meta.module-variables('constants') {
     --xm-#{$name}: #{$val};
   }
+
+  @each $name, $val in meta.module-variables('colors') {
+    --xm-c-#{$name}: #{$val};
+  }
 }
 
 .markdown-body {

src/partials/code.scss

@@ -15,7 +15,7 @@ pre {
   margin-bottom: 1.75rem;
   padding-top: .875rem, 1.15rem;
   border-radius: .375rem;
-  color: var(--xm-c-deep);
+  color: var(--xm-c-pre);
   font-size: .875rem;
   line-height: 1.75;
   code {

src/partials/figure.scss

@@ -3,7 +3,7 @@ figure {
   margin-bottom: 2rem;
   figcaption {
     margin-top: .875rem;
-    color: var(--xm-c-shallow);
+    color: var(--xm-c-figcaption);
     font-size: .875rem;
     line-height: 1.45;
   }

src/partials/link.scss

@@ -1,19 +1,13 @@
 a {
-  border-bottom: 1px solid var(--xm-c-border);
+  border-bottom: 1px solid var(--xm-c-a-border);
   color: var(--xm-c-deeper);
   font-weight: 500;
   text-decoration: none;
   transition: border .3s ease-in-out;
   code {
-    color: var(--xm-c-deep);
+    color: var(--xm-c-code);
   }
   &:hover {
     border-bottom: 1px solid var(--xm-c-regular);
   }
-  &:not([href]) {
-    border-bottom: none;
-    color: inherit;
-    font-weight: normal;
-    transition: none;
-  }
 }

src/partials/list.scss

@@ -14,7 +14,7 @@ ol {
       content: counter(list-item, decimal) '.';
       position: absolute;
       left: 0;
-      color: var(--xm-c-shallow);
+      color: var(--xm-c-ol-counter);
       font-weight: 400;
     }
   }
@@ -35,7 +35,7 @@ ul {
       width: .375rem;
       height: .375rem;
       border-radius: 50%;
-      background-color: var(--xm-c-shallower);
+      background-color: var(--xm-c-ul-counter);
     }
   }
 }

src/partials/media.scss

@@ -1,17 +1,6 @@
-img {
-  display: block;
-  max-width: 92%;
-  margin: 1rem auto;
-  border-radius: .2rem;
-}
-
+img,
 video {
-  margin: auto;
-}
-
-iframe {
-  display: flex;
-  width: 92%;
-  margin: auto;
-  border-radius: .2rem;
+  width: 100%;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }

src/partials/quote.scss

@@ -3,13 +3,13 @@ q {
   margin-top: 1.65rem;
   margin-bottom: 1.65rem;
   padding: .6rem 1.2rem;
-  border-left: .25rem solid var(--xm-c-border);
+  border-left: .25rem solid var(--xm-c-quote-border);
   color: inherit;
   font-weight: 500;
   font-style: italic;
   line-height: 1.5rem;
   quotes: '\201C''\201D''\2018''\2019';
-  opacity: .75;
+  opacity: .8;
   p {
     &:first-of-type::before {
       content: open-quote;

src/partials/table.scss

@@ -1,19 +1,46 @@
 table {
-  overflow: auto;
   width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  th,
-  td {
-    padding: 6px 13px;
-    border: 1.5px solid var(--xm-c-border-table);
-  }
-  thead th {
-    font-weight: 700;
-  }
-  tbody tr {
-    &:hover {
-      background-color: var(--xm-c-shallowest);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  table-layout: auto;
+  font-size: .875rem;
+  line-height: 1.75;
+  text-align: left;
+}
+
+thead {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--xm-c-thead-border);
+  color: var(--xm-c-thead);
+  font-weight: 600;
+  th {
+    vertical-align: bottom;
+    padding-left: auto .575rem .575rem;
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+tbody {
+  tr {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--xm-c-tr-border);
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+  td {
+    vertical-align: top;
+    padding: .575rem;
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
     }
   }
 }

src/variables/_colors.scss

@@ -0,0 +1,14 @@
+// Colors
+$pre: #e5e7eb;
+$code: #111827;
+$figcaption: #6b7280;
+$thead: #111827;
+$ol-counter: #6b7280;
+$ul-counter: #d1d5db;
+
+// Border
+$a-border: hsla(0deg 0% 50% / .3);
+$hr-border: hsla(0deg 0% 50% / .3);
+$quote-border: hsla(0deg 0% 50% / .3);
+$thead-border: #d1d5db;
+$tr-border: #e5e7eb;

src/variables/modes/_dark.scss

@@ -1,10 +1,3 @@
-// Dark mode
-
-$shallowest: #212121;
-$shallower: #555;
-$shallow: #777;
 $regular: #bbb;
 $deep: #ddd;
 $deeper: #fff;
-$border: hsla(0deg 0% 75% / .35);
-$border-table: hsla(0deg 0% 40% / .75);

src/variables/modes/_light.scss

@@ -1,10 +1,3 @@
-// Light mode
-
-$shallowest: #f8f8f8;
-$shallower: #ddd;
-$shallow: #bbb;
 $regular: #555;
 $deep: #222;
 $deeper: #000;
-$border: hsla(0deg 0% 50% / .35);
-$border-table: hsla(0deg 0% 50% / .5);