Sample templates

2019-06-21 11:38:13 +02:00
parent 193e7f62cb
commit 17db174926
6 changed files with 461 additions and 13 deletions
@@ -1,18 +1,144 @@
+body, html {
+    padding: 0;
+    margin: 0;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font: 14px/1.45 -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
+    color: #111;
+    -webkit-text-size-adjust: none;
+
+    background-color: #F5F5F5;
+
+    height: 100vh;
+}
+
 main {
    max-width: 70ch;
    padding: 2ch;
    margin: auto;
+
+    background-color: #F0F0F0;
+
+    min-height: 100%;
 }

-.article a, .article a:visited {
-    color: black;
+q:before {
+    content: open-quote;
 }

-.article a:visited {
-    color: black;
+q:after {
+    content: close-quote;
 }

-.article img {
+hr {
+    background: #e1e4e8;
+    border: 0;
+    height: 0.25em;
+    margin: 1em 0;
+}
+
+a {
+    color: #3C3CA1;
+}
+
+a:hover {
+    color: #8484C6;
+}
+
+pre, code {
+    font-size: 96%;
+    background: #f8f8f8;
+}
+
+pre {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 10px 16px;
+}
+
+table td {
+    vertical-align: baseline;
+    padding-left: 8px;
+}
+
+table td:first-of-type {
+    padding-left: 0;
+}
+
+div.header span.time span {
+    color: #888;
+    font-family: serif;
+    font-style: italic;
+}
+
+main.article div.header a.link-home {
+    text-decoration: none;
+    float: right;
+    line-height: 2.4;
+}
+
+main.article div.header h1, main.article div.header h2 {
+    margin-top: 0.85em;
+    margin-bottom: 0.25em;
+    font-size: 1.5em;
+}
+
+main.article div.header h1 a, main.article div.header h2 a {
+    text-decoration: none;
+}
+
+main.article div.header span.time {
+    display: block;
+}
+
+#text h1:first-child {
+    display: none;
+}
+
+#text {
+    text-align: justify;
+    hyphens: auto;
+}
+
+#text li, #text table, #text blockquote {
+    text-align: left;
+}
+
+#text img {
    max-width: 100%;
-    max-height: 10vh;
+    height: auto;
+}
+
+.note {
+    padding: 1em;
+    background: #ff02;
+}
+
+.note > p {
+    margin: 0.6rem 0;
+}
+
+.important {
+    padding: 1em;
+    background: #eff5ff;
+}
+
+.important > p {
+    margin: 0.6rem 0;
+}
+
+/* Sidenotes */
+
+#text .side > p:nth-child(2n+0) {
+    font-style: italic;
+    color: #555;
+}
+
+#text .side > p:nth-child(2n+0) > i, #text .side > p:nth-child(2n+0) > em {
+    font-style: normal;
 }