From f1b2dea2809cbffa8a12ac36813c3c68d3b0380a Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Sat, 11 Apr 2026 00:29:38 +0530
Subject: [PATCH] Move md content styles to a dedicated CSS

---
 assets/css/common/md-content.css  | 254 ++++++++++++++++++++++++++++++
 assets/css/common/post-single.css | 249 -----------------------------
 2 files changed, 254 insertions(+), 249 deletions(-)
 create mode 100644 assets/css/common/md-content.css

diff --git a/assets/css/common/md-content.css b/assets/css/common/md-content.css
new file mode 100644
index 00000000..ed2cf36d
--- /dev/null
+++ b/assets/css/common/md-content.css
@@ -0,0 +1,254 @@
+.post-content {
+    color: var(--content);
+    margin: 30px 0;
+}
+
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
+    margin: 24px 0 16px;
+}
+
+.post-content h1 {
+    margin: 40px auto 32px;
+    font-size: 40px;
+}
+
+.post-content h2 {
+    margin: 32px auto 24px;
+    font-size: 32px;
+}
+
+.post-content h3 {
+    font-size: 24px;
+}
+
+.post-content h4 {
+    font-size: 16px;
+}
+
+.post-content h5 {
+    font-size: 14px;
+}
+
+.post-content h6 {
+    font-size: 12px;
+}
+
+.post-content a {
+    box-shadow: 0 1px 0;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+}
+
+.post-content a code {
+    margin: auto 0;
+    border-radius: 0;
+    box-shadow: 0 -1px 0 var(--primary) inset;
+}
+
+.post-content del {
+    text-decoration: line-through;
+}
+
+.post-content dl,
+.post-content ol,
+.post-content p,
+.post-content figure,
+.post-content ul {
+    margin-bottom: var(--content-gap);
+}
+
+.post-content ol,
+.post-content ul {
+    padding-inline-start: 20px;
+}
+
+.post-content li {
+    margin-top: 5px;
+}
+
+.post-content li p {
+    margin-bottom: 0;
+}
+
+.post-content dl {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+}
+
+.post-content dt {
+    width: 25%;
+    font-weight: 700;
+}
+
+.post-content dd {
+    width: 75%;
+    margin-inline-start: 0;
+    padding-inline-start: 10px;
+}
+
+.post-content dd~dd,
+.post-content dt~dt {
+    margin-top: 10px;
+}
+
+.post-content table {
+    margin-bottom: var(--content-gap);
+}
+
+.post-content table th,
+.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
+    min-width: 80px;
+    padding: 8px 5px;
+    line-height: 1.5;
+    border-bottom: 1px solid var(--border);
+}
+
+.post-content table th {
+    text-align: start;
+}
+
+.post-content table:not(.highlighttable) td code:only-child {
+    margin: auto 0;
+}
+
+.post-content .highlight table {
+    border-radius: var(--radius);
+}
+
+.post-content .highlight:not(table) {
+    margin: 10px auto;
+    background: var(--code-block-bg) !important;
+    border-radius: var(--radius);
+    direction: ltr;
+}
+
+.post-content li>.highlight {
+    margin-inline-end: 0;
+}
+
+.post-content ul pre {
+    margin-inline-start: calc(var(--gap) * -2);
+}
+
+.post-content .highlight pre {
+    margin: 0;
+}
+
+.post-content .highlighttable {
+    table-layout: fixed;
+}
+
+.post-content .highlighttable td:first-child {
+    width: 40px;
+}
+
+.post-content .highlighttable td .linenodiv {
+    padding-inline-end: 0 !important;
+}
+
+.post-content .highlighttable td .highlight,
+.post-content .highlighttable td .linenodiv pre {
+    margin-bottom: 0;
+}
+
+.post-content code {
+    margin: auto 4px;
+    padding: 4px 6px;
+    font-size: 0.78em;
+    line-height: 1.5;
+    background: var(--code-bg);
+    border-radius: 2px;
+}
+
+.post-content pre code {
+    display: grid;
+    margin: auto 0;
+    padding: 10px;
+    color: rgb(213, 213, 214);
+    background: var(--code-block-bg) !important;
+    border-radius: var(--radius);
+    overflow-x: auto;
+    word-break: break-all;
+}
+
+.post-content blockquote {
+    margin: 20px 0;
+    padding: 0 14px;
+    border-inline-start: 3px solid var(--primary);
+}
+
+.post-content hr {
+    margin: 30px 0;
+    height: 2px;
+    background: var(--tertiary);
+    border: 0;
+}
+
+.post-content iframe {
+    max-width: 100%;
+}
+
+.post-content img {
+    border-radius: 4px;
+    margin: 1rem 0;
+}
+
+.post-content img[src*="#center"] {
+    margin: 1rem auto;
+}
+
+.post-content figure.align-center {
+    text-align: center;
+}
+
+.post-content figure>figcaption {
+    color: var(--primary);
+    font-size: 16px;
+    font-weight: bold;
+    margin: 8px 0 16px;
+}
+
+.post-content figure>figcaption>p {
+    color: var(--secondary);
+    font-size: 14px;
+    font-weight: normal;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+    display: inline-flex;
+    color: var(--secondary);
+    margin-inline-start: 8px;
+    font-weight: 500;
+    user-select: none;
+}
+
+
+img.in-text {
+    display: inline;
+    margin: auto;
+}
+
+mark {
+    border-radius: 2px;
+    padding: 0 2px;
+}
+
+audio {
+    width: stretch;
+    max-width: 100%;
+}
+
+video {
+    border: 1px solid var(--code-bg);
+    border-radius: var(--radius);
+    max-width: 100%;
+}
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index ffeea3ec..4258ac35 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -38,45 +38,6 @@
     font-size: 16px;
 }
 
-.post-content {
-    color: var(--content);
-    margin: 30px 0;
-}
-
-.post-content h3,
-.post-content h4,
-.post-content h5,
-.post-content h6 {
-    margin: 24px 0 16px;
-}
-
-.post-content h1 {
-    margin: 40px auto 32px;
-    font-size: 40px;
-}
-
-.post-content h2 {
-    margin: 32px auto 24px;
-    font-size: 32px;
-}
-
-.post-content h3 {
-    font-size: 24px;
-}
-
-.post-content h4 {
-    font-size: 16px;
-}
-
-.post-content h5 {
-    font-size: 14px;
-}
-
-.post-content h6 {
-    font-size: 12px;
-}
-
-.post-content a,
 .post-meta .i18n_list li a,
 .toc a:hover {
     box-shadow: 0 1px 0;
@@ -84,182 +45,6 @@
     -webkit-box-decoration-break: clone;
 }
 
-.post-content a code {
-    margin: auto 0;
-    border-radius: 0;
-    box-shadow: 0 -1px 0 var(--primary) inset;
-}
-
-.post-content del {
-    text-decoration: line-through;
-}
-
-.post-content dl,
-.post-content ol,
-.post-content p,
-.post-content figure,
-.post-content ul {
-    margin-bottom: var(--content-gap);
-}
-
-.post-content ol,
-.post-content ul {
-    padding-inline-start: 20px;
-}
-
-.post-content li {
-    margin-top: 5px;
-}
-
-.post-content li p {
-    margin-bottom: 0;
-}
-
-.post-content dl {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-}
-
-.post-content dt {
-    width: 25%;
-    font-weight: 700;
-}
-
-.post-content dd {
-    width: 75%;
-    margin-inline-start: 0;
-    padding-inline-start: 10px;
-}
-
-.post-content dd~dd,
-.post-content dt~dt {
-    margin-top: 10px;
-}
-
-.post-content table {
-    margin-bottom: var(--content-gap);
-}
-
-.post-content table th,
-.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
-    min-width: 80px;
-    padding: 8px 5px;
-    line-height: 1.5;
-    border-bottom: 1px solid var(--border);
-}
-
-.post-content table th {
-    text-align: start;
-}
-
-.post-content table:not(.highlighttable) td code:only-child {
-    margin: auto 0;
-}
-
-.post-content .highlight table {
-    border-radius: var(--radius);
-}
-
-.post-content .highlight:not(table) {
-    margin: 10px auto;
-    background: var(--code-block-bg) !important;
-    border-radius: var(--radius);
-    direction: ltr;
-}
-
-.post-content li>.highlight {
-    margin-inline-end: 0;
-}
-
-.post-content ul pre {
-    margin-inline-start: calc(var(--gap) * -2);
-}
-
-.post-content .highlight pre {
-    margin: 0;
-}
-
-.post-content .highlighttable {
-    table-layout: fixed;
-}
-
-.post-content .highlighttable td:first-child {
-    width: 40px;
-}
-
-.post-content .highlighttable td .linenodiv {
-    padding-inline-end: 0 !important;
-}
-
-.post-content .highlighttable td .highlight,
-.post-content .highlighttable td .linenodiv pre {
-    margin-bottom: 0;
-}
-
-.post-content code {
-    margin: auto 4px;
-    padding: 4px 6px;
-    font-size: 0.78em;
-    line-height: 1.5;
-    background: var(--code-bg);
-    border-radius: 2px;
-}
-
-.post-content pre code {
-    display: grid;
-    margin: auto 0;
-    padding: 10px;
-    color: rgb(213, 213, 214);
-    background: var(--code-block-bg) !important;
-    border-radius: var(--radius);
-    overflow-x: auto;
-    word-break: break-all;
-}
-
-.post-content blockquote {
-    margin: 20px 0;
-    padding: 0 14px;
-    border-inline-start: 3px solid var(--primary);
-}
-
-.post-content hr {
-    margin: 30px 0;
-    height: 2px;
-    background: var(--tertiary);
-    border: 0;
-}
-
-.post-content iframe {
-    max-width: 100%;
-}
-
-.post-content img {
-    border-radius: 4px;
-    margin: 1rem 0;
-}
-
-.post-content img[src*="#center"] {
-    margin: 1rem auto;
-}
-
-.post-content figure.align-center {
-    text-align: center;
-}
-
-.post-content figure>figcaption {
-    color: var(--primary);
-    font-size: 16px;
-    font-weight: bold;
-    margin: 8px 0 16px;
-}
-
-.post-content figure>figcaption>p {
-    color: var(--secondary);
-    font-size: 14px;
-    font-weight: normal;
-}
-
 .toc {
     margin-bottom: var(--content-gap);
     border: 1px solid var(--border);
@@ -358,19 +143,6 @@
     margin-inline-end: 12px;
 }
 
-h1:hover .anchor,
-h2:hover .anchor,
-h3:hover .anchor,
-h4:hover .anchor,
-h5:hover .anchor,
-h6:hover .anchor {
-    display: inline-flex;
-    color: var(--secondary);
-    margin-inline-start: 8px;
-    font-weight: 500;
-    user-select: none;
-}
-
 .paginav {
     display: flex;
     line-height: 30px;
@@ -410,24 +182,3 @@ h6:hover .anchor {
 h1>a>svg {
     display: inline;
 }
-
-img.in-text {
-    display: inline;
-    margin: auto;
-}
-
-mark {
-    border-radius: 2px;
-    padding: 0 2px;
-}
-
-audio {
-    width: stretch;
-    max-width: 100%;
-}
-
-video {
-    border: 1px solid var(--code-bg);
-    border-radius: var(--radius);
-    max-width: 100%;
-}