mint 0.7.3 → 0.8.0

data/config/templates/default/css/style.css

@@ -1,158 +1,205 @@
-@import url(../reset.css);
+@import '../reset.css';
 body {
-  font-family: Georgia, serif; }
+  font-family: Ubuntu, "Hoefler Text", "Grandesign Neue Serif", Ubuntu, Georgia, FreeSerif, serif, Georgia, serif;
+}
 
 h1, h2 {
-  line-height: 1.3; }
+  line-height: 1.3;
+}
 
 h2, h3, h4, h5, h6 {
-  line-height: 23.4px; }
+  line-height: 22.5px;
+}
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: normal; }
+  font-family: "Hoefler Text", Garamond, Georgia;
+  font-weight: normal;
+}
 
 h1 {
-  font-size: 27px;
-  margin-top: 23.4px;
-  margin-bottom: 23.4px; }
+  font-size: 22.5px;
+  margin-top: 22.5px;
+  margin-bottom: 22.5px;
+}
 
 h2 {
-  font-size: 21.6px;
-  margin-top: 23.4px;
-  margin-bottom: 23.4px; }
+  font-size: 18px;
+  margin-top: 33.75px;
+  margin-bottom: 11.25px;
+}
 
 h3 {
-  font-size: 19.8px;
-  margin-top: 35.1px;
-  margin-bottom: 11.7px; }
+  font-size: 16.5px;
+  margin-top: 39.375px;
+  margin-bottom: 5.625px;
+}
 
 h4 {
-  font-size: 18.9px;
-  margin-top: 40.95px;
-  margin-bottom: 5.85px; }
+  font-size: 15.75px;
+  margin-top: 19.6875px;
+  margin-bottom: 2.8125px;
+}
 
 h5, h6 {
-  font-size: 18px;
-  margin-top: 20.475px;
-  margin-bottom: 2.925px; }
+  font-size: 15px;
+  margin-top: 19.6875px;
+  margin-bottom: 2.8125px;
+}
 
 ul {
-  list-style-type: square; }
-  ul ul {
-    list-style-type: circle; }
+  list-style-type: square;
+}
+ul ul {
+  list-style-type: circle;
+}
 
 ul, ol {
-  margin: 5.85px 0 0 11.7px;
-  padding-left: 28.08px; }
-  ul li p, ol li p {
-    text-indent: 0 !important; }
-  ul li + li, ol li + li {
-    margin-top: 5.85px; }
+  margin: 5.625px 0 0 11.25px;
+  padding-left: 27px;
+}
+ul li p, ol li p {
+  text-indent: 0 !important;
+}
+ul li + li, ol li + li {
+  margin-top: 5.625px;
+}
 
 p {
-  margin: 11.7px 0; }
+  margin: 11.25px 0;
+}
 
 ul + p, ol + p, blockquote + p, pre + p {
-  text-indent: 0; }
+  text-indent: 0;
+}
 
 a:link, a:visited, a:active {
   color: #cb0018;
-  text-decoration: none; }
+  text-decoration: none;
+}
 a:hover {
-  text-decoration: underline; }
+  text-decoration: underline;
+}
 
 code {
   font-family: Monaco, Menlo, Mensch, Consolas, Monotype, mono;
-  font-style: normal; }
+  font-style: normal;
+}
 
 pre, blockquote {
   display: block;
-  margin-left: 23.4px;
-  margin-right: 46.8px;
-  padding: 7.8px 23.4px;
-  padding-left: 17.55px;
-  white-space: pre; }
-  pre p, blockquote p {
-    margin: 0;
-    line-height: 1.35; }
+  margin-left: 22.5px;
+  margin-right: 45px;
+  padding: 7.5px 22.5px;
+  padding-left: 16.875px;
+  white-space: pre;
+}
+pre p, blockquote p {
+  margin: 0;
+  line-height: 1.35;
+}
 
 img {
-  display: block; }
+  display: block;
+}
 
 @media screen {
   body {
-    font-size: 18px;
-    line-height: 23.4px;
-    background-color: #666666; }
-
+    font-size: 15px;
+    line-height: 22.5px;
+    background-color: #666;
+    color: #333;
+  }
   #container {
     display: block;
-    border: solid 1px #999999;
-    width: 740px;
-    padding: 60px;
-    margin: 11.7px auto;
-    background-color: white;
+    border: solid 1px #999;
+    width: 780px;
+    padding: 40px 60px;
+    margin: 11.25px auto;
+    background-color: #fff;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; }
-
+    -webkit-box-sizing: border-box;
+  }
   code {
-    font-size: 15.75px; }
-
+    font-size: 13.125px;
+  }
   pre {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -o-pre-wrap;
-    word-wrap: break-word; }
-    pre code {
-      font-size: 13.5px; } }
+    word-wrap: break-word;
+  }
+  pre code {
+    font-size: 11.25px;
+  }
+}
 @media print {
   @page {
     margin-left: 1in;
     margin-right: 1in;
     margin-top: 1in;
-    margin-bottom: 1in; }
-
+    margin-bottom: 1in;
+  }
   body {
     font-size: 12pt;
     line-height: 15.6pt;
     width: auto;
     margin: 0;
-    padding: 0; }
-
+    padding: 0;
+  }
   code {
-    font-size: 10.5pt; }
-
+    font-size: 10.5pt;
+  }
   pre code {
-    font-size: 9pt; }
-
+    font-size: 9pt;
+  }
   h1, h2, h3, h4, h5, h6, li, blockquote {
-    page-break-inside: avoid; }
-
+    page-break-inside: avoid;
+  }
   p {
     widows: 3;
-    orphans: 3; } }
+    orphans: 3;
+  }
+}
 body {
-  font-family: Georgia, "Hoefler Text", Garamond, FreeSerif, serif; }
+  text-rendering: optimizeLegibility;
+}
 
 h1 {
-  border-bottom: solid 2px #666666; }
+  font-size: 25.5px;
+  border-bottom: solid 2px #666;
+}
+
+h2 {
+  font-size: 19.5px;
+}
 
 h3 {
-  font-style: italic; }
+  font-size: 18px;
+  font-style: italic;
+}
 
 h4 {
-  font-variant: small-caps; }
+  font-variant: small-caps;
+}
 
 h5, h6 {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 p + p {
-  text-indent: 23.4px; }
+  text-indent: 22.5px;
+}
 
 pre, blockquote {
-  font-size: 18px;
-  border-left: solid 2px #dddddd; }
+  border-left: solid 2px #ddd;
+  background-color: #fdffe8;
+}
 
 blockquote {
-  font-style: italic; }
+  font-style: italic;
+}
+
+code {
+  font-family: "Ubuntu Mono";
+}

data/config/templates/default/layout.erb

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= stylesheet_tag %>
+    <style type="text/css"><%= inline_styles %></style>
+  </head>
+  <body>
+    <div id="container"><%= content %></div>
+  </body>
+</html>

data/config/templates/default/style.css

@@ -0,0 +1,237 @@
+@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);
+
+  --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;
+}
+
+@import "../base/style.css";
+
+body {
+  font-family: "Alegreya", Georgia, Times, "Times New Roman", serif;
+  color: var(--text-color);
+  line-height: 1.6;
+  background-color: var(--background);
+  font-weight: 400;
+  font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+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;
+  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);
+}
+
+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);
+}
+
+h5, h6 {
+  font-size: var(--screen-font-size);
+  font-weight: 600;
+  color: var(--text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: calc(var(--screen-font-size) * 0.9);
+}
+
+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);
+}
+
+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;
+}
+
+blockquote p:first-child {
+  margin-top: 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+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);
+}
+
+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);
+  }
+  
+  #container {
+    margin: 0;
+    padding: 0;
+    max-width: none;
+  }
+  
+  h2 {
+    border-bottom: none;
+  }
+  
+  a:link, a:visited {
+    color: var(--text-color);
+    border-bottom: none;
+  }
+  
+  blockquote, pre {
+    background-color: transparent;
+    border-color: #ccc;
+  }
+}

data/config/templates/garden/layout.erb

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><%= (metadata.is_a?(Hash) && metadata['title']) || File.basename(source_file, '.*').tr('_-', ' ').split.map(&:capitalize).join(' ') %></title>
+    <%= stylesheet_tag %>
+    <style type="text/css"><%= inline_styles %></style>
+  </head>
+  <body>
+    <div class="garden-container">
+      <nav class="garden-nav">
+        <div class="garden-nav-header">
+          <h3>Garden</h3>
+        </div>
+        <div class="garden-nav-content">
+          <% if files.any? %>
+            <ul class="garden-toc">
+              <% files.each do |file| %>
+                <li class="depth-<%= file[:depth] %>">
+                  <a href="<%= file[:html_path] %>" 
+                     class="<%= file[:source_path] == Pathname.new(source_file).relative_path_from(Pathname.new(root_directory)).to_s ? 'current' : '' %>">
+                    <%= file[:title] %>
+                  </a>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+        </div>
+      </nav>
+      <main class="garden-main">
+        <div class="garden-content">
+          <%= content %>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>