templating and deployment improvements

Author: stomfaig

.gitignore

@@ -0,0 +1 @@
+public/*

build.sh

@@ -7,11 +7,16 @@ OUTPUT=public
 
 mkdir -p $OUTPUT
 
+cp templates/style.css $OUTPUT/style.css
+
 for file in $INPUT/*.md; do
   name=$(basename "$file" .md)
   pandoc "$file" \
+    -f markdown+fenced_divs \
     --template=templates/page.html \
     --mathjax \
+    --css=style.css \
+    --standalone \
     -o "$OUTPUT/$name.html"
 done
 

templates/style.css

@@ -0,0 +1,124 @@
+body {
+  font-family: Georgia, serif;
+  max-width: 800px;
+  margin: auto;
+  line-height: 1.6;
+}
+
+h1, h2, h3 {
+  color: #2c3e50;
+}
+
+pre {
+  background: #f6f8fa;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  max-width: 800px;
+  margin: 1.5rem auto;
+}
+
+code {
+  background-color: #f6f8fa;   /* light gray background */
+  padding: 0.2em 0.4em;        /* small padding around text */
+  border-radius: 4px;          /* rounded corners */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8em;           /* slightly smaller than normal text */
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+blockquote {
+  border-left: 3px solid #4a90e2; /* thin blue line on left */
+  background-color: #e6f0fa;      /* very light blue background */
+  padding: 0.8rem 1rem;           /* space inside the block */
+  margin: 1rem 0;                 /* space around block */
+  border-radius: 4px;             /* slightly rounded corners */
+  color: #333;                    /* text color */
+  font-style: normal;             /* optional: non-italic text */
+}
+
+/* Definition box */
+div.definition {
+  border-left: 3px solid #4a90e2;
+  background-color: #e6f0fa;
+  padding: 0.8rem 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  position: relative;
+  color: #333;
+}
+
+/* Label on top-left */
+div.definition::before {
+  content: "Definition";
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: #fff;
+  background-color: #4a90e2;
+  padding: 2px 6px;
+  border-radius: 4px;
+  position: absolute;
+  top: -0.7rem;
+  left: 0.5rem;
+}
+
+/* Label */
+div.warning::before {
+  content: "Warning";
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: #fff;
+  background-color: #e74c3c; /* same red as border */
+  padding: 2px 6px;
+  border-radius: 4px;
+  position: absolute;
+  top: -0.7rem;
+  left: 0.5rem;
+}
+
+/* Warning box style */
+div.warning {
+  border-left: 3px solid #e74c3c; /* red vertical line */
+  background-color: #fdecea;       /* very light red background */
+  padding: 0.8rem 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  position: relative;
+  color: #333;
+}
+
+/* Label */
+div.theorem::before {
+  content: "Theorem " attr(data-title);
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: white;
+  background: #2c3e50;
+  padding: 2px 6px;
+  border-radius: 4px;
+  position: absolute;
+  top: -0.7rem;
+  left: 0.5rem;
+}
+
+/* Theorem block */
+div.theorem {
+  border-left: 3px solid #2c3e50; /* dark slate blue */
+  background-color: #f4f6f8;       /* very light gray-blue */
+  padding: 0.8rem 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  position: relative;
+  color: #333;
+  font-style: normal;
+}
+
+
+div.aside {
+  border-left: 2px solid #333;
+  padding: 0.4rem;
+}