Commit ec366783 authored by Zachary Dunn's avatar Zachary Dunn

Add typewolf theme and modify templates

parent 7d1e8995
......@@ -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;
}
}
......@@ -71,7 +71,6 @@ html, body {
margin: 0;
padding: 0;
height: 100%;
line-height: 1.15;
}
*, *:before, *:after {
......
@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;
}
}
/* 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);
}
......@@ -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(),
};
......
......@@ -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" />
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment