Add typewolf theme and modify templates

public/css/article.css

@@ -2,28 +2,44 @@ body:not(.h-feed) {
     --scroll-bar-color: var(--primary-color-faded);
 }
 
-.entry--article .timestamp {
+.article {
+    line-height: 1.75;
+}
+
+.article__header {
+    margin: 1rem 0;
+    text-align: center;
+}
+
+.article__title {
+    font-size: 26px;
+}
+
+.article .timestamp {
     display: inline;
     font-size: 14px;
 }
 
-.entry--article .p-summary::before {
+.article__summary {
+    font-style: italic;
+}
+
+.article__summary::before {
     content: "Quick summary ↬ ";
     font-family: serif;
     font-size: 1rem;
     font-style: normal;
     font-weight: 600;
-    color: var(--secondary-color);
+    color: var(--secondary-text-color);
     text-transform: uppercase;
     letter-spacing: 2px;
-    margin: 0;
 }
 
-.entry--article .e-content {
+.article__body {
     text-indent: 2.5rem;
 }
 
-.entry--article p:first-child::first-letter {
+.article__body p:first-child::first-letter {
     font-family: Helvetica serif;
     padding: 0 .5rem;
     margin: 0 .5rem;
@@ -46,11 +62,11 @@ body:not(.h-feed) {
 }
 
 @supports not (initial-letter) {
-    .entry--article p:first-child {
+    .article__body p:first-child {
         text-indent: 0;
     }
 
-    .entry--article p:first-child::first-letter {
+    .article__body p:first-child::first-letter {
         font-size: 5rem;
         float: left;
         line-height: 5rem;
@@ -58,7 +74,7 @@ body:not(.h-feed) {
 }
 
 @supports (initial-letter) {
-    .entry--article p:first-child::first-letter {
+    .article__body p:first-child::first-letter {
         initial-letter: 3;
     }
 }

public/css/index.css

@@ -71,7 +71,6 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    line-height: 1.15;
 }
 
 *, *:before, *:after {

public/css/screen-sm.css

 @media screen and (max-width: 600px) {
+    .main-header {
+        padding: 0;
+    }
+
+    .main-header h1 {
+        padding: 0 1rem;
+    }
+
     .main-nav {
         line-height: 3rem;
         overflow: scroll hidden;
@@ -25,5 +33,9 @@
         align-self: flex-end;
         padding: 0 1rem;
     }
+
+    .sm-hidden {
+        display: none;
+    }
 }
 

public/css/typewolf.css

+/* A theme inspired by https://www.typewolf.com */
+:root {
+    --yellow: #b58900;
+    --orange: #cb4b16;
+    --red: #dc322f;
+    --magenta: #d33682;
+    --violet: #6c71c4;
+    --blue: #268bd2;
+    --cyan: #2aa198;
+    --green: #859900;
+}
+
+.typewolf {
+    --primary-color: #916a70;
+    --secondary-color: #e6ddde;
+    --tertiary-color: #654a4e;
+    --badge-color: var(--violet);
+    --border-color: var(--primary-color);
+    --like-color: var(--yellow);
+    --boost-color: var(--green);
+    --reply-color: var(--cyan);
+    --tag-color: var(--primary-color);
+    --primary-text-color: var(--primary-color);
+    --secondary-text-color: #a32929;
+    --divider-color: var(--primary-color);
+}
+
+.typewolf ::selection {
+    background-color: var(--primary-color);
+    color: #ffffff;
+}
+
+.typewolf body,
+.typewolf main {
+    color: var(--primary-text-color);
+    background-color: var(--secondary-color);
+}
+
+.typewolf .main-header {
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+}
+
+.typewolf .main-footer {
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+    border-top: 1px solid var(--divider-color);
+}
+
+.typewolf .main-header a,
+.typewolf .main-footer a {
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+}
+
+.typewolf .main-header a:hover, 
+.typewolf .main-footer a:hover {
+    color: #ffffff;
+}
+
+.typewolf h1,
+.typewolf h2,
+.typewolf h3,
+.typewolf h4,
+.typewolf h5,
+.typewolf h6 {
+    color: var(--primary-text-color);
+}
+
+.typewolf a {
+    color: var(--secondary-text-color);
+}
+
+.typewolf a:hover {
+    color: var(--primary-color);
+    background-color: transparent;
+}
+
+.typewolf a:focus {
+    color: var(--tertiary-color);
+    text-shadow: 0 0px 1px var(--secondary-text-color);
+}
+
+.typewolf .h-card .avatar-container .u-photo:hover,
+.typewolf .h-card .avatar-container .u-photo:focus,
+.typewolf .h-card .avatar-container a:focus .u-photo {
+    filter: drop-shadow(4px 4px 2px var(--base1));
+}
+
+.typewolf .h-card .avatar-container .u-photo {
+    border-top: 1px outset var(--base01);
+    border-left: 1px outset var(--base01);
+}
+
+.typewolf .h-entry {
+    border: none;
+}
+
+.typewolf .block__inner {
+    padding: 0 1rem 1rem;
+}
+
+.typewolf .tags {
+    margin: 0 auto;
+}
+
+.typewolf .h-entry {
+    background-color: var(--#ffffff);
+    box-shadow: 1px 1px 3px 0 var(--border-color);
+}
+
+.typewolf .block {
+    border: none;
+    box-shadow: 1px 1px 3px 0 var(--border-color);
+}
+
+.typewolf .h-feed .h-entry .p-summary {
+    border-left: 2px solid var(--green);
+}
+
+.typewolf .h-entry .timestamp {
+    color: var(--primary-text-color);
+}
+
+.typewolf .h-entry .u-photo + .p-summary {
+    color: var(--base01);
+    border-bottom: 1px solid var(--base2);
+}
+
+.typewolf .p-category {
+    background-color: var(--secondary-color);
+    color: var(--tag-color);
+}
+
+.typewolf .p-category svg {
+    fill: var(--tag-color);
+}
+
+.typewolf .p-category:hover,
+.typewolf .p-category:focus {
+    color: var(--secondary-color);
+    background-color: var(--tag-color);
+    text-shadow: 0 1px 1px var(--primary-color);
+}
+
+.typewolf .p-category:hover svg,
+.typewolf .p-category:focus svg {
+    fill: var(--secondary-color);
+}
+
+.typewolf .h-cite.context {
+    padding: 0.5rem 1rem;
+    color: var(--primary-color);
+    border-bottom: 1px solid var(--primary-color);
+}
+
+.typewolf .divider {
+    border-top: 2px solid var(--divider-color);
+}
+
+.typewolf .extended-divider {
+    border-top: 2px solid var(--divider-color);
+}
+
+.typewolf .back-to-top {
+    background-color: var(--primary-color);
+}
+
+.typewolf .progress-ring {
+    stroke: var(--secondary-color);
+}
+
+.typewolf a.back-to-top:focus,
+.typewolf a.back-to-top:hover {
+    background-color: var(--blue);
+}
+
+.typewolf a.back-to-top:focus .progress-ring,
+.typewolf a.back-to-top:hover .progress-ring {
+    stroke: var(--cyan);
+}
+
+.typewolf a.back-to-top {
+    box-shadow: 2px 2px 5px var(--tertiary-color);
+}
+

src/setup.rs

@@ -43,7 +43,7 @@ pub fn attach_fairing() -> AdHoc {
             page_size,
             avatar_src,
             rel_me_links,
-            themes: vec![String::from("default"), String::from("solarized-dark")],
+            themes: vec![String::from("default"), String::from("solarized-dark"), String::from("typewolf")],
             features: check_features(),
         };
 

templates/base.html.tera

@@ -13,6 +13,7 @@
 
         <link rel="stylesheet" href="{{host}}/public/css/index.css" />
         <link rel="stylesheet" href="{{host}}/public/css/solarized.css" />
+        <link rel="stylesheet" href="{{host}}/public/css/typewolf.css" />
         <link rel="stylesheet" href="{{host}}/public/css/screen-sm.css" media="screen and (max-width: 600px)" />
         <link rel="stylesheet" href="{{host}}/public/css/screen-lg.css" media="screen and (min-width: 601px)" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />

templates/partials/nav.html.tera

@@ -15,7 +15,7 @@
         </form>
     {% endif %}
 
-    <span class="spacer">|</span>
+    <span class="spacer sm-hidden">|</span>
     <a href="/notes" title="{{name}}'s Notes">Notes</a>
     <span class="spacer">|</span>
     <a href="/articles" title="{{name}}'s Articles">Articles</a>

templates/posts/article.html.tera

@@ -24,26 +24,26 @@
 {% endblock opengraph %}
 
 {% block content %}
-    <article class="h-entry block entry entry--article {% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}">
+    <article class="h-entry block entry article {% if post.in_reply_to %} entry--has-badge entry--reply {% endif %}">
         {% if post.in_reply_to %}
             {% include "partials/reply-context" %}
         {% endif %}
         <section class="entry-inner block__inner">
-            <header>
-                <h2 class="p-name">
+            <header class="article__header">
+                <h2 class="article__title p-name">
                     <a href="{{post.url}}">{{post.name | title}}</a>
                 </h2>
-                <address class="h-card p-author entry--inline">
+                <address class="article__byline h-card p-author entry--inline">
                     <h4 class="entry--inline">
                         by <a href="{{host}}/" class="u-url">{{name}}</a>
                     </h4>
                 </address>
-                <span class="spacer">|</span>
+                <span class="spacer sm-hidden">|</span>
                 {% include "partials/timestamp" %}
             </header>
-            <aside class="p-summary">{{ post.summary | safe }}</aside>
+            <aside class="article__summary p-summary">{{ post.summary | safe }}</aside>
             <hr class="divider" />
-            <section class="e-content">{{ post.content | safe }}</section>
+            <section class="article__body e-content">{{ post.content | safe }}</section>
             <hr class="divider" />
             {% if post.tags %}
                 <p>