mint 0.8.0 → 0.10.0

data/config/templates/base/variables.css

@@ -0,0 +1,124 @@
+/* Base Design System Variables
+ * All templates inherit from this foundation
+ * Templates should override these variables to create their visual identity
+ */
+
+:root {
+  /* Typography Foundation */
+  --base-font-size: 16px;
+  --base-line-height: 1.6;
+  --base-unit: calc(var(--base-font-size) * var(--base-line-height));
+  
+  /* Typographic Scale - Templates can override --scale-ratio */
+  --scale-ratio: 1.25; /* Minor third by default */
+  --font-size-xs: calc(var(--base-font-size) * 0.75);
+  --font-size-sm: calc(var(--base-font-size) * 0.875);
+  --font-size-base: var(--base-font-size);
+  --font-size-lg: calc(var(--base-font-size) * var(--scale-ratio));
+  --font-size-xl: calc(var(--font-size-lg) * var(--scale-ratio));
+  --font-size-2xl: calc(var(--font-size-xl) * var(--scale-ratio));
+  --font-size-3xl: calc(var(--font-size-2xl) * var(--scale-ratio));
+  
+  /* Spacing Scale - Based on typographic rhythm */
+  --space-xs: calc(var(--base-unit) * 0.25);
+  --space-sm: calc(var(--base-unit) * 0.5);
+  --space-base: var(--base-unit);
+  --space-md: var(--space-base);
+  --space-lg: calc(var(--base-unit) * 1.5);
+  --space-xl: calc(var(--base-unit) * 2);
+  --space-2xl: calc(var(--base-unit) * 3);
+  --space-3xl: calc(var(--base-unit) * 4);
+  
+  /* Semantic Colors - Templates override these for theming */
+  --color-text: #1a1a1a;
+  --color-text-subtle: #666666;
+  --color-text-muted: #8a8a8a;
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-subtle: #f8f9fa;
+  --color-border: #e5e5e5;
+  --color-border-subtle: #f0f0f0;
+  --color-accent: #007acc;
+  --color-accent-hover: #005fa3;
+  --color-accent-subtle: rgba(0, 122, 204, 0.1);
+  
+  /* Component-Specific Colors */
+  --color-code-bg: #f8f8f8;
+  --color-code-text: #d14;
+  --color-code-border: var(--color-border);
+  --color-pre-bg: #f8f8f8;
+  --color-pre-text: var(--color-text);
+  --color-pre-border: var(--color-border);
+  --color-quote-bg: #fafafa;
+  --color-quote-text: var(--color-text-subtle);
+  --color-quote-border: var(--color-accent);
+  --color-nav-bg: #f8f9fa;
+  --color-nav-text: var(--color-text-subtle);
+  --color-nav-text-hover: var(--color-text);
+  --color-nav-text-active: var(--color-accent);
+  --color-nav-bg-hover: var(--color-surface-subtle);
+  --color-nav-bg-active: var(--color-accent-subtle);
+  --color-nav-border: var(--color-border);
+  --color-nav-border-active: var(--color-accent);
+  
+  /* Table Colors */
+  --color-table-bg: var(--color-surface);
+  --color-table-header-bg: var(--color-surface-subtle);
+  --color-table-header-text: var(--color-text);
+  --color-table-border: var(--color-border);
+  --color-table-stripe: rgba(0, 0, 0, 0.02);
+  --color-table-hover: rgba(0, 0, 0, 0.04);
+  
+  /* Container & Layout */
+  --container-max-width: 85ch;
+  --container-padding: var(--space-xl);
+  --navigation-width: 280px;
+  --navigation-gap: 2rem;
+  
+  /* Border Radius */
+  --radius-sm: 3px;
+  --radius-base: 6px;
+  --radius-lg: 8px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.1);
+  
+  /* Print Styles */
+  --print-font-size: 11pt;
+  --print-line-height: 1.4;
+  --print-margin: 0.75in;
+  
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.2s ease;
+  
+  /* Z-Index Scale */
+  --z-navigation: 100;
+  --z-dropdown: 200;
+  --z-modal: 300;
+}
+
+/* Screen-specific overrides for responsive typography */
+@media (max-width: 960px) {
+  :root {
+    --base-font-size: 16px;
+    --container-padding: var(--space-base);
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    --base-font-size: 15px;
+    --container-padding: var(--space-sm);
+  }
+}
+
+/* Print overrides */
+@media print {
+  :root {
+    --base-font-size: var(--print-font-size);
+    --base-line-height: var(--print-line-height);
+  }
+}

data/config/templates/basic/style.css

@@ -0,0 +1,151 @@
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
+
+/* Import base system */
+@import "../base/style.css";
+@import "../base/navigation.css";
+@import "../base/utilities.css";
+
+/* Basic template theme variables */
+:root {
+  /* Typography settings - uses golden ratio scaling */
+  --base-font-size: 21px;
+  --base-line-height: 1.4;
+  --scale-ratio: 1.3; /* Golden ratio for more dramatic scale */
+
+  /* Print settings */
+  --print-font-size: 10pt;
+  --print-line-height: calc(var(--print-font-size) * 1.618);
+  
+  /* Minimal color palette */
+  --color-text: #2c2c2c;
+  --color-text-subtle: #666666;
+  --color-text-muted: #8a8a8a;
+  --color-background: #fcfcfc;
+  --color-surface: #fcfcfc;
+  --color-surface-subtle: #f8f9fa;
+  --color-border: #cccccc;
+  --color-accent: #007acc;
+  --color-accent-hover: #005fa3;
+  --color-accent-subtle: rgba(0, 122, 204, 0.1);
+  
+  /* Component colors - minimal styling */
+  --color-code-bg: rgba(0, 0, 0, 0.04);
+  --color-code-text: var(--color-text);
+  --color-pre-bg: rgba(0, 0, 0, 0.02);
+  --color-pre-text: var(--color-text);
+  --color-quote-bg: transparent;
+  --color-quote-text: var(--color-text-muted);
+  --color-quote-border: var(--color-border);
+  
+  /* Navigation colors */
+  --color-nav-bg: #f8f9fa;
+  --color-nav-text: var(--color-text);
+  --color-nav-text-hover: var(--color-text);
+  --color-nav-text-active: var(--color-accent);
+  --color-nav-bg-hover: #f0f0f0;
+  --color-nav-bg-active: #f0f8ff;
+  --color-nav-border: var(--color-border);
+  --color-nav-border-active: var(--color-accent);
+  
+  /* Table colors - minimal */
+  --color-table-bg: var(--color-surface);
+  --color-table-header-bg: transparent;
+  --color-table-border: var(--color-border);
+  --color-table-stripe: transparent;
+  --color-table-hover: transparent;
+  
+  /* Layout */
+  --container-max-width: 50rem;
+  --container-padding: var(--space-lg) var(--space-2xl);
+  --navigation-gap: 4rem;
+}
+
+/* Typography */
+body {
+  font-family: 'Crimson Text', serif;
+  font-optical-sizing: auto;
+  font-weight: 350;
+  font-style: normal;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 300;
+  color: var(--color-text);
+}
+
+h2 {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: var(--space-xs);
+}
+
+/* Enhanced typography with golden ratio spacing */
+p {
+  hyphens: auto;
+}
+
+/* Container layouts */
+#container {
+  max-width: var(--container-max-width);
+  margin: 0 auto;
+  padding: var(--container-padding);
+}
+
+/* Container adjustments when navigation is present */
+body:has(#navigation) #container,
+body.has-navigation #container {
+  max-width: var(--container-max-width);
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Enhanced code styling */
+code {
+  font-family: Monaco, "Roboto Mono", "Ubuntu Mono", Consolas, "Courier New", monospace;
+  font-weight: 400;
+  line-height: calc(var(--base-line-height) * 1.1);
+}
+
+/* Simplified table styling */
+th {
+  font-weight: 400;
+  font-style: italic;
+  border-bottom: 1px solid var(--color-border);
+}
+
+td {
+  border: none;
+}
+
+/* Navigation font size adjustments - more compact but readable */
+#navigation h3 {
+  font-size: calc(var(--base-font-size) * 1.1);
+  margin-bottom: calc(var(--space-base) * 0.75);
+}
+
+#navigation a {
+  font-size: calc(var(--base-font-size) * 0.75);
+  padding: calc(var(--space-sm) * 0.4) var(--space-sm);
+}
+
+#navigation .directory-name {
+  font-size: calc(var(--base-font-size) * 0.8);
+  padding: calc(var(--space-sm) * 0.4) var(--space-sm);
+}
+
+/* Responsive design */
+@media (max-width: 960px) {
+  #navigation {
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  body:has(#navigation) #container,
+  body.has-navigation #container,
+  #container {
+    max-width: var(--container-max-width);
+    padding: var(--space-xl) var(--space-xl);
+  }
+}

data/config/templates/default/layout.erb

@@ -1,10 +1,40 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><%= title %></title>
     <%= stylesheet_tag %>
-    <style type="text/css"><%= inline_styles %></style>
   </head>
   <body>
-    <div id="container"><%= content %></div>
+    <% if show_navigation && files&.any? %>
+      <nav id="navigation">
+        <% if navigation_title %>
+          <h3><%= navigation_title %></h3>
+        <% end %>
+        <ul>
+          <% files.each do |item| %>
+            <% if item[:is_directory] %>
+              <li class="depth-<%= item[:depth] || 0 %> directory">
+                <span class="directory-name"><%= item[:title] %></span>
+              </li>
+            <% else %>
+              <li class="depth-<%= item[:depth] || 0 %>">
+                <a href="<%= item[:html_path] %>" 
+                   class="<%= item[:source_path] == current_path ? 'current' : '' %>">
+                  <%= item[:title] %>
+                </a>
+              </li>
+            <% end %>
+          <% end %>
+        </ul>
+      </nav>
+    <% end %>
+    <main id="container">
+      <% if insert_title_heading && title %>
+        <h1><%= title %></h1>
+      <% end %>
+      <%= content %>
+    </main>
   </body>
 </html>

data/config/templates/default/style.css

@@ -1,30 +1,67 @@
 @import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
 
-:root {
-  --screen-font-size: 18px;
-  --screen-line-height: calc(var(--screen-font-size) * 1.6);
-  --screen-unit: var(--screen-line-height);
+/* Import base system */
+@import "../base/style.css";
+@import "../base/navigation.css";
+@import "../base/utilities.css";
 
+/* Default template theme variables */
+:root {
+  /* Typography settings for this theme */
+  --base-font-size: 21px;
+  --base-line-height: 1.4;
+  --scale-ratio: 1.25;
+  
+  /* Print settings */
   --print-font-size: 11pt;
-  --print-line-height: calc(var(--print-font-size) * 1.4);
-  --print-unit: var(--print-line-height);
-
-  --text-color: #1a1a1a;
-  --text-subtle: #666666;
-  --link-color: #c7254e;
-  --background: #ffffff;
-  --border-color: #e5e5e5;
-  --code-background: #f8f8f8;
-  --quote-background: #fafafa;
+  --print-line-height: 1.4;
+  
+  /* Theme colors */
+  --color-text: #1a1a1a;
+  --color-text-subtle: #666666;
+  --color-text-muted: #8a8a8a;
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-subtle: #f8f9fa;
+  --color-border: #e5e5e5;
+  --color-accent: #c7254e;
+  --color-accent-hover: #a91e42;
+  --color-accent-subtle: rgba(199, 37, 78, 0.1);
+  
+  /* Component colors */
+  --color-code-bg: #f8f8f8;
+  --color-code-text: #d14;
+  --color-pre-bg: #f8f8f8;
+  --color-pre-text: var(--color-text);
+  --color-quote-bg: #fafafa;
+  --color-quote-text: var(--color-text-subtle);
+  --color-quote-border: var(--color-accent);
+  
+  /* Navigation colors */
+  --color-nav-bg: #f8f9fa;
+  --color-nav-text: var(--color-text-subtle);
+  --color-nav-text-hover: var(--color-text);
+  --color-nav-text-active: var(--color-accent);
+  --color-nav-bg-hover: #f0f0f0;
+  --color-nav-bg-active: #fdf2f8;
+  --color-nav-border: var(--color-border);
+  --color-nav-border-active: var(--color-accent);
+  
+  /* Table colors */
+  --color-table-bg: var(--color-surface);
+  --color-table-header-bg: #fafafa;
+  --color-table-stripe: rgba(0, 0, 0, 0.02);
+  --color-table-hover: rgba(0, 0, 0, 0.04);
+  
+  /* Layout */
+  --container-max-width: 85ch;
 }
 
-@import "../base/style.css";
-
+/* Typography */
 body {
   font-family: "Alegreya", Georgia, Times, "Times New Roman", serif;
-  color: var(--text-color);
-  line-height: 1.6;
-  background-color: var(--background);
+  background-color: var(--color-background);
+  color: var(--color-text);
   font-weight: 400;
   font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
   -webkit-font-smoothing: antialiased;
@@ -34,70 +71,57 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-family: "Alegreya", Georgia, Times, serif;
   font-weight: 600;
-  color: var(--text-color);
-  margin-top: calc(var(--screen-unit) * 1.5);
-  margin-bottom: calc(var(--screen-unit) * 0.5);
-  line-height: 1.2;
-  letter-spacing: -0.02em;
+  color: var(--color-text);
   text-rendering: optimizeLegibility;
 }
 
 h1 {
-  font-size: calc(var(--screen-font-size) * 2.5);
-  margin-top: 0;
-  margin-bottom: calc(var(--screen-unit) * 1);
   font-weight: 700;
-  letter-spacing: -0.03em;
 }
 
 h2 {
-  font-size: calc(var(--screen-font-size) * 1.8);
-  margin-top: calc(var(--screen-unit) * 2);
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: calc(var(--screen-unit) * 0.25);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: var(--space-xs);
 }
 
 h3 {
-  font-size: calc(var(--screen-font-size) * 1.4);
-  font-weight: 600;
-}
-
-h4 {
-  font-size: calc(var(--screen-font-size) * 1.2);
-  font-weight: 600;
-  color: var(--text-subtle);
+  font-weight: 400;
 }
 
 h5, h6 {
-  font-size: var(--screen-font-size);
-  font-weight: 600;
-  color: var(--text-subtle);
+  color: var(--color-text-subtle);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: calc(var(--screen-font-size) * 0.9);
 }
 
+/* Enhanced typography */
 p {
-  margin: calc(var(--screen-unit) * 0.75) 0;
   text-align: justify;
   hyphens: auto;
   text-rendering: optimizeLegibility;
 }
 
 p + p {
-  margin-top: calc(var(--screen-unit) * 0.25);
+  margin-top: var(--space-xs);
+}
+
+/* Container layouts */
+#container {
+  max-width: var(--container-max-width);
+  margin: var(--space-xl) auto;
+  padding: var(--container-padding);
+  background-color: var(--color-background);
 }
 
-blockquote {
-  margin: calc(var(--screen-unit) * 1) 0;
-  padding: calc(var(--screen-unit) * 0.75) calc(var(--screen-unit) * 1.5);
-  border-left: 4px solid var(--link-color);
-  background-color: var(--quote-background);
-  font-style: italic;
-  color: var(--text-subtle);
-  border-radius: 0 4px 4px 0;
+/* Container adjustments when navigation is present */
+body:has(#navigation) #container,
+body.has-navigation #container {
+  max-width: calc(var(--container-max-width) - var(--navigation-width));
+  margin-right: auto;
+  margin-top: var(--space-xl);
+  margin-bottom: var(--space-xl);
 }
 
+/* Enhanced blockquotes */
 blockquote p:first-child {
   margin-top: 0;
 }
@@ -106,130 +130,37 @@ blockquote p:last-child {
   margin-bottom: 0;
 }
 
+/* Enhanced code styling */
 code {
-  font-family: "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", monospace;
-  font-size: calc(var(--screen-font-size) * 0.85);
-  background-color: var(--code-background);
-  color: #d14;
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
   font-weight: 500;
 }
 
-pre {
-  background-color: var(--code-background);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  padding: calc(var(--screen-unit) * 1);
-  overflow-x: auto;
-  margin: calc(var(--screen-unit) * 1) 0;
-  line-height: 1.4;
-}
-
 pre code {
-  background-color: transparent;
-  color: var(--text-color);
-  padding: 0;
-  border-radius: 0;
-  font-size: calc(var(--screen-font-size) * 0.8);
-}
-
-a:link, a:visited {
-  color: var(--link-color);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: border-bottom-color 0.15s ease;
-}
-
-a:hover {
-  border-bottom-color: var(--link-color);
-}
-
-strong {
-  font-weight: 600;
-  color: var(--text-color);
+  color: var(--color-text);
+  font-weight: normal;
 }
 
-em {
-  font-style: italic;
-}
-
-ul, ol {
-  margin: calc(var(--screen-unit) * 0.75) 0;
-  padding-left: calc(var(--screen-unit) * 1.5);
-}
-
-li {
-  margin: calc(var(--screen-unit) * 0.25) 0;
-}
-
-table {
-  border-collapse: collapse;
-  margin: calc(var(--screen-unit) * 1.5) 0;
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-th, td {
-  padding: calc(var(--screen-unit) * 0.5) calc(var(--screen-unit) * 0.75);
-  text-align: left;
-  border-bottom: 1px solid var(--border-color);
-}
-
-th {
-  background-color: var(--quote-background);
-  font-weight: 600;
-  color: var(--text-color);
-  font-size: calc(var(--screen-font-size) * 0.9);
-}
-
-tr:last-child td {
-  border-bottom: none;
-}
-
-tr:nth-child(even) {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-hr {
-  border: none;
-  height: 1px;
-  background-color: var(--border-color);
-  margin: calc(var(--screen-unit) * 2) 0;
-}
-
-#container {
-  max-width: 100ch;
-  width: auto;
-  margin: 2rem auto;
-  padding: calc(var(--screen-unit) * 3) calc(var(--screen-unit) * 2);
-  background-color: var(--background);
-}
-
-@media print {
-  :root {
-    --screen-font-size: var(--print-font-size);
-    --screen-line-height: var(--print-line-height);
-    --screen-unit: var(--print-unit);
+/* Responsive design */
+@media (max-width: 960px) {
+  #navigation {
+    border-bottom: 1px solid var(--color-border);
   }
   
+  body:has(#navigation) #container,
+  body.has-navigation #container,
   #container {
-    margin: 0;
-    padding: 0;
-    max-width: none;
+    max-width: var(--container-max-width);
+    background-color: transparent;
+    margin: var(--space-base) auto;
   }
-  
+}
+
+/* Print styles - inherits from base/print.css but can add theme-specific overrides */
+@media print {
   h2 {
     border-bottom: none;
   }
   
-  a:link, a:visited {
-    color: var(--text-color);
-    border-bottom: none;
-  }
-  
   blockquote, pre {
     background-color: transparent;
     border-color: #ccc;