add markup instructions

1 files changed, 104 insertions, 1 deletions

diff --git a/static/css/blog/post.css b/static/css/blog/post.css
index ceb6b9a4..45f0888b 100644
--- a/static/css/blog/post.css
+++ b/static/css/blog/post.css
@@ -146,7 +146,8 @@
     white-space: pre-wrap;
 }
 
-.weblog-content blockquote {
+.weblog-content blockquote,
+.comments-section blockquote {
     margin: 12px 0;
     padding: 8px 16px;
     border-left: 4px solid #ff6dc6;
@@ -201,4 +202,106 @@ select[id="comment-sort"] {
 select[id="comment-sort"] option {
     background-color: rgba(255, 255, 255, 0.5);
     color: #4A0080;
+}
+
+.comments-section summary {
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 14px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.comments-section details[open] summary {
+    margin-bottom: 16px;
+}
+
+/* Markup Guide Styling */
+.comments-section .guide-intro p {
+    margin: 0 0 12px 0;
+}
+
+.comments-section .guide-section {
+    margin-bottom: 16px;
+}
+
+.comments-section .guide-section:last-child {
+    margin-bottom: 0;
+}
+
+.comments-section .guide-section h4 {
+    color: #ff96c4;
+    font-weight: bold;
+    margin: 0 0 8px 0;
+}
+
+.comments-section .guide-description {
+    margin: 0 0 8px 0;
+}
+
+.comments-section .formatting-list {
+    margin: 8px 0;
+    padding-left: 20px;
+    list-style-type: none;
+}
+
+.comments-section .formatting-list li {
+    margin: 6px 0;
+    position: relative;
+}
+
+.comments-section .formatting-list li:before {
+    content: "→";
+    position: absolute;
+    left: -16px;
+    color: #AD8CFF;
+    font-weight: bold;
+}
+
+.comments-section .formatting-list code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    color: #54F2F2;
+    border: 1px solid rgba(84, 242, 242, 0.3);
+}
+
+.comments-section .code-example {
+    margin: 12px 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    padding: 12px;
+    border: 1px solid rgba(255, 150, 196, 0.2);
+}
+
+.comments-section .example-code,
+.comments-section .code-example pre[data-language] {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid #333;
+    border-radius: 4px;
+    padding: 8px 8px 0px 8px;
+    margin: 0;
+    overflow-x: auto;
+}
+
+.comments-section .example-label {
+    margin: 8px 0 4px 0;
+    font-weight: bold;
+    color: #AD8CFF;
+}
+
+.comments-section .supported-languages {
+    margin: 12px 0 0 0;
+}
+
+.comments-section .language-tag {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+    color: #54F2F2;
+    border: 1px solid rgba(84, 242, 242, 0.2);
 }
\ No newline at end of file