diff --git a/PyPost.py b/PyPost.py
index 4ed3f03..dd59477 100644
--- a/PyPost.py
+++ b/PyPost.py
@@ -119,6 +119,7 @@ def render_markdown(md_path: Path):
+
{title}
diff --git a/css/main.css b/css/main.css
index 2c7c6d0..a7d6393 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,13 +1,179 @@
-/* basic rules for fallback */body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 1em; color: #000; background: #fff; } h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 1em 0 0.5em; } p, ul, ol, blockquote, pre, table { margin: 0.5em 0; } /* Lists */ ul, ol { padding-left: 2em; } li { margin: 0.25em 0; } /* Links */ a { color: blue; text-decoration: underline; } a:hover { color: darkblue; } /* Tables */ table { border-collapse: collapse; width: 100%; margin: 1em 0; } th, td { border: 1px solid #000; padding: 0.5em; text-align: left; } th { background: #eee; } /* Code blocks */ code, pre { font-family: Consolas, monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 3px; } pre { overflow: auto; padding: 0.5em; } /* Blockquote */ blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #555; margin: 1em 0; } /* Forms */ input, select, textarea, button { font: inherit; padding: 0.4em; margin: 0.25em 0; border: 1px solid #999; border-radius: 3px; } button { background: #eee; cursor: pointer; } button:hover { background: #ddd; } .html-content { margin-left: 1em; } .html-content hr { border: none; height: 1px; background: linear-gradient(to right, transparent, #bbb, transparent); margin: 2em auto; width: 80%; }
+/* Responsive base font size using clamp() */
+body {
+ font-family: Arial, sans-serif;
+ font-size: clamp(14px, 2.5vw, 16px); /* scales from 14px to 16px */
+ line-height: 1.5;
+ margin: 1em;
+ color: #000;
+ background: #fff;
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 768px) {
+ body {
+ margin: 0.5em;
+ font-size: 14px;
+ }
+}
+
+/* Responsive headings */
+h1 {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+h2 {
+ font-size: clamp(1.5rem, 3.5vw, 2rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+h3 {
+ font-size: clamp(1.25rem, 3vw, 1.75rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+h4 {
+ font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+h5 {
+ font-size: clamp(1rem, 2vw, 1.25rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+h6 {
+ font-size: clamp(0.9rem, 1.5vw, 1rem);
+ font-weight: bold;
+ margin: 1em 0 0.5em;
+}
+
+p, ul, ol, blockquote, pre, table {
+ margin: 0.5em 0;
+}
+
+/* Lists */
+ul, ol {
+ padding-left: 2em;
+}
+li {
+ margin: 0.25em 0;
+}
+
+/* Mobile list adjustments */
+@media (max-width: 768px) {
+ ul, ol {
+ padding-left: 1.5em;
+ }
+}
+
+/* Links */
+a {
+ color: blue;
+ text-decoration: underline;
+}
+a:hover {
+ color: darkblue;
+}
+
+/* Tables */
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin: 1em 0;
+ font-size: clamp(0.85rem, 2vw, 1rem); /* slightly smaller on mobile */
+}
+th, td {
+ border: 1px solid #000;
+ padding: 0.5em;
+ text-align: left;
+}
+th {
+ background: #eee;
+}
+
+/* Mobile table adjustments */
+@media (max-width: 768px) {
+ table {
+ font-size: 0.85rem;
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ th, td {
+ padding: 0.4em;
+ min-width: 80px;
+ }
+}
+
+/* Code blocks */
+code, pre {
+ font-family: Consolas, monospace;
+ background: #f5f5f5;
+ padding: 2px 4px;
+ border-radius: 3px;
+ font-size: clamp(0.8rem, 1.8vw, 0.9rem); /* responsive code font */
+}
+pre {
+ overflow: auto;
+ padding: 0.5em;
+}
+
+/* Blockquote */
+blockquote {
+ border-left: 4px solid #ccc;
+ padding-left: 1em;
+ color: #555;
+ margin: 1em 0;
+ font-size: clamp(0.9rem, 2.2vw, 1rem);
+}
+
+/* Forms */
+input, select, textarea, button {
+ font: inherit;
+ padding: 0.4em;
+ margin: 0.25em 0;
+ border: 1px solid #999;
+ border-radius: 3px;
+ font-size: clamp(0.9rem, 2.2vw, 1rem);
+}
+button {
+ background: #eee;
+ cursor: pointer;
+}
+button:hover {
+ background: #ddd;
+}
+
+.html-content {
+ margin-left: 1em;
+}
+.html-content hr {
+ border: none;
+ height: 1px;
+ background: linear-gradient(to right, transparent, #bbb, transparent);
+ margin: 2em auto;
+ width: 80%;
+}
/* Content container */
.html-content {
margin: 0 auto;
- padding: 0 1em;
- max-width: 800px; /* keeps text readable */
+ padding: 0 clamp(0.5em, 3vw, 1em); /* responsive padding */
+ max-width: 800px;
line-height: 1.6;
}
+/* Mobile content container adjustments */
+@media (max-width: 768px) {
+ .html-content {
+ padding: 0 0.5em;
+ margin-left: 0;
+ max-width: 100%;
+ }
+}
+
/* Headings inside content */
.html-content h1,
.html-content h2,
@@ -44,8 +210,8 @@
border-collapse: collapse;
margin: 1.5em auto;
max-width: 100%;
- width: auto; /* shrink to fit content */
- min-width: 60%; /* don’t collapse too much */
+ width: auto;
+ min-width: 60%;
}
.html-content th,
.html-content td {
@@ -104,74 +270,72 @@
background: #ddd;
}
-/* HR (as defined earlier) */
+/* HR */
.html-content hr {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, #bbb, transparent);
- /*margin: 2em auto;*/
width: 80%;
}
-
/* GFM CSS */
- .html-content blockquote.alert {
- border-left: 4px solid;
- padding: 0.75em 1em;
- margin: 1.5em 0;
- border-radius: 4px;
- background: #f9f9f9;
- font-size: 0.95em;
- }
+.html-content blockquote.alert {
+ border-left: 4px solid;
+ padding: 0.75em 1em;
+ margin: 1.5em 0;
+ border-radius: 4px;
+ background: #f9f9f9;
+ font-size: clamp(0.85rem, 2vw, 0.95rem); /* responsive alert font */
+}
- .html-content blockquote.alert p:first-child {
- font-weight: bold;
- margin-top: 0;
- }
+.html-content blockquote.alert p:first-child {
+ font-weight: bold;
+ margin-top: 0;
+}
- /* Variants */
- .html-content .alert-note {
- border-color: #0366d6;
- background: #f0f7ff;
- color: #0366d6;
- }
- .html-content .alert-tip {
- border-color: #28a745;
- background: #f0fff4;
- color: #28a745;
- }
- .html-content .alert-important {
- border-color: #6f42c1;
- background: #f9f5ff;
- color: #6f42c1;
- }
- .html-content .alert-warning {
- border-color: #d97706;
- background: #fffaf0;
- color: #d97706;
- }
- .html-content .alert-caution {
- border-color: #d73a49;
- background: #fff5f5;
- color: #d73a49;
- }
+/* Variants */
+.html-content .alert-note {
+ border-color: #0366d6;
+ background: #f0f7ff;
+ color: #0366d6;
+}
+.html-content .alert-tip {
+ border-color: #28a745;
+ background: #f0fff4;
+ color: #28a745;
+}
+.html-content .alert-important {
+ border-color: #6f42c1;
+ background: #f9f5ff;
+ color: #6f42c1;
+}
+.html-content .alert-warning {
+ border-color: #d97706;
+ background: #fffaf0;
+ color: #d97706;
+}
+.html-content .alert-caution {
+ border-color: #d73a49;
+ background: #fff5f5;
+ color: #d73a49;
+}
- .html-content blockquote.alert p:first-child::before {
- content: "";
- display: inline-block;
- width: 1em;
- height: 1em;
- margin-right: 0.5em;
- vertical-align: -0.125em;
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- }
+.html-content blockquote.alert p:first-child::before {
+ content: "";
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ margin-right: 0.5em;
+ vertical-align: -0.125em;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+}
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none !important;
- color: inherit; /* optional: respect your theme */
+ color: inherit;
}
.language-css .token.string,
@@ -180,7 +344,7 @@ pre[class*="language-"] {
.token.operator,
.token.url {
background: none !important;
- color: inherit; /* keep your color, or override further */
+ color: inherit;
}
/* Dark mode */
@@ -253,43 +417,23 @@ body.dark-mode .html-content .alert-caution {
border-color: #ff8080;
}
+/* SVG icons for alerts */
+.html-content .alert-note p:first-child::before {
+ background-image: url("data:image/svg+xml;utf8,");
+}
- /* INFO */
- .html-content .alert-note p:first-child::before {
- background-image: url("data:image/svg+xml;utf8,\
- ");
- }
+.html-content .alert-tip p:first-child::before {
+ background-image: url("data:image/svg+xml;utf8,");
+}
- /* TIP */
- .html-content .alert-tip p:first-child::before {
- background-image: url("data:image/svg+xml;utf8,\
- ");
- }
+.html-content .alert-important p:first-child::before {
+ background-image: url("data:image/svg+xml;utf8,");
+}
- /* IMPORTANT */
- .html-content .alert-important p:first-child::before {
- background-image: url("data:image/svg+xml;utf8,\
- ");
- }
+.html-content .alert-warning p:first-child::before {
+ background-image: url("data:image/svg+xml;utf8,");
+}
- /* WARNING */
- .html-content .alert-warning p:first-child::before {
- background-image: url("data:image/svg+xml;utf8,\
- ");
- }
-
- /* CAUTION */
- .html-content .alert-caution p:first-child::before {
- background-image: url("data:image/svg+xml;utf8,\
- ");
- }
+.html-content .alert-caution p:first-child::before {
+ background-image: url("data:image/svg+xml;utf8,");
+}