themes: add classic theme (original default) and redesign default

The original default theme (checkered background, purple/blue palette,
rounded thick border) is preserved as the new 'classic' theme.

The default theme is replaced with a cleaner, more professional design:
indigo accent colour, top border bar, card shadow, better typography
and code block styling, wider at 1100px max-width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

3 files changed, 165 insertions, 25 deletions

diff --git a/extras/html/themes/classic/style.css b/extras/html/themes/classic/style.css
new file mode 100644
index 0000000..4d42872
--- /dev/null
+++ b/extras/html/themes/classic/style.css
@@ -0,0 +1,101 @@
+@font-face {
+    font-family: 'text';
+    src: url("./text.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'heading';
+    src: url("./heading.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'code';
+    src: url("./code.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'handnotes';
+    src: url("./handnotes.ttf") format("truetype");
+}
+
+html {
+    background-color: #f0f0f0;
+    background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),
+                      linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
+}
+
+body {
+    font-family: text, sans-serif;
+    background: #ffffff;
+    max-width: 1200px;
+    padding: 20px;
+    margin: 20px auto;
+    border: 5px solid #dddddd;
+    border-radius: 15px;
+    word-wrap: break-word;
+}
+
+h1, h2, h3 {
+    font-family: heading, serif;
+    color: #6ca0dc;
+}
+
+a {
+    font-family: code, monospace;
+    text-decoration: none;
+    color: #8e44ad;
+    padding: 0 0 0 0;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a.textlink:before {
+    content: "⇒ ";
+}
+
+.quote {
+    font-style: italic;
+}
+
+.quote:before {
+    content: "« ";
+    padding-left: 2px;
+}
+
+.quote:after {
+    content: " »";
+    padding-right: 2px;
+}
+
+ul {
+    list-style: none;
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+}
+
+li:before {
+    content: "★";
+    padding-right: 5px;
+    color: #9b59b6;
+}
+
+img {
+    max-width: 90%;
+}
+
+pre {
+    font-family: code, monospace;
+    padding: 20px;
+    border: 1px solid #dddddd;
+    border-radius: 15px;
+}
+
+span.inlinecode {
+    font-family: code, monospace;
+    border: 1px solid #999999;
+    border-radius: 2px;
+}
diff --git a/extras/html/themes/classic/theme.conf b/extras/html/themes/classic/theme.conf
new file mode 100644
index 0000000..9e06b30
--- /dev/null
+++ b/extras/html/themes/classic/theme.conf
@@ -0,0 +1,8 @@
+declare -xr HTML_HEADER=./extras/html/header.html.part
+declare -xr HTML_FOOTER=./extras/html/footer.html.part
+declare -xr HTML_CSS_STYLE=$HTML_THEME_DIR/style.css
+declare -xr HTML_WEBFONT_HEADING=./extras/html/fonts/Merriweather/Merriweather-Bold.ttf
+declare -xr HTML_WEBFONT_TEXT=./extras/html/fonts/Merriweather/Merriweather-Regular.ttf
+declare -xr HTML_WEBFONT_CODE=./extras/html/fonts/hack/Hack-Regular.ttf
+declare -xr HTML_WEBFONT_HANDNOTES=./extras/html/fonts/khand/khand.ttf
+declare -xr SOURCE_HIGHLIGHT_CSS=./extras/html/source-highlight-styles/mono.css
diff --git a/extras/html/themes/default/style.css b/extras/html/themes/default/style.css
index 4d42872..472178a 100644
--- a/extras/html/themes/default/style.css
+++ b/extras/html/themes/default/style.css
@@ -19,38 +19,49 @@
 }
 
 html {
-    background-color: #f0f0f0;
-    background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),
-                      linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);
-    background-size: 20px 20px;
-    background-position: 0 0, 10px 10px;
+    background-color: #dde3ee;
 }
 
 body {
     font-family: text, sans-serif;
     background: #ffffff;
-    max-width: 1200px;
-    padding: 20px;
-    margin: 20px auto;
-    border: 5px solid #dddddd;
-    border-radius: 15px;
+    color: #1e1e2e;
+    line-height: 1.75;
+    max-width: 1100px;
+    padding: 40px 52px;
+    margin: 40px auto;
+    border: 1px solid #c4cad8;
+    border-top: 5px solid #4f46e5;
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
     word-wrap: break-word;
 }
 
-h1, h2, h3 {
+h1 {
     font-family: heading, serif;
-    color: #6ca0dc;
+    color: #2e1065;
+    margin-top: 0.2em;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.3em;
+    border-bottom: 2px solid #e0e4f0;
+}
+
+h2, h3 {
+    font-family: heading, serif;
+    color: #3730a3;
+    margin-top: 1.5em;
+    margin-bottom: 0.4em;
 }
 
 a {
-    font-family: code, monospace;
+    font-family: text, sans-serif;
     text-decoration: none;
-    color: #8e44ad;
-    padding: 0 0 0 0;
+    color: #4f46e5;
 }
 
 a:hover {
     text-decoration: underline;
+    color: #3730a3;
 }
 
 a.textlink:before {
@@ -59,6 +70,10 @@ a.textlink:before {
 
 .quote {
     font-style: italic;
+    color: #4a4a6a;
+    border-left: 4px solid #a5b4fc;
+    padding-left: 14px;
+    margin-left: 0;
 }
 
 .quote:before {
@@ -73,29 +88,45 @@ a.textlink:before {
 
 ul {
     list-style: none;
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
+    margin: 0.5em 0;
+    padding: 0;
+}
+
+li {
+    margin-bottom: 0.25em;
 }
 
 li:before {
-    content: "★";
-    padding-right: 5px;
-    color: #9b59b6;
+    content: "›";
+    padding-right: 6px;
+    color: #4f46e5;
+    font-weight: bold;
+    font-size: 1.1em;
 }
 
 img {
     max-width: 90%;
+    display: block;
+    margin: 1.2em auto;
+    border-radius: 4px;
+    border: 1px solid #c4cad8;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 pre {
     font-family: code, monospace;
-    padding: 20px;
-    border: 1px solid #dddddd;
-    border-radius: 15px;
+    background: #f3f4f9;
+    color: #1e1e2e;
+    padding: 18px 20px;
+    border-left: 4px solid #4f46e5;
+    border-radius: 4px;
+    overflow-x: auto;
 }
 
 span.inlinecode {
     font-family: code, monospace;
-    border: 1px solid #999999;
-    border-radius: 2px;
+    background: #eef0f8;
+    border: 1px solid #bcc2d8;
+    border-radius: 3px;
+    padding: 1px 5px;
 }