crumbs: basically rewriting the theme to be less complicated

19 files changed, 317 insertions, 532 deletions

diff --git a/crumbs/static/css/cr_title.css b/crumbs/static/css/cr_title.css
deleted file mode 100644
index b6b961e..0000000
--- a/crumbs/static/css/cr_title.css
+++ /dev/null
@@ -1,92 +0,0 @@
-
-/* Use different paddings for titles */
-.title h1 {
-    padding-top: 20px;
-    padding-bottom: 50px;
-    font-size: 36px;
-    font-weight: 500;
-}
-
-/* Use a white navigation divider */
-.navigation {
-    border-bottom: 1px solid white;
-}
-
-/* Use a larger text on the front page */
-p {
-    font-size: 22px;
-    font-weight: 300;
-    padding-bottom: 0px;
-    padding-left: 5px;
-    padding-right: 0px;
-    text-indent: 0px;
-}
-
-/* Colour blocks are bigger on the front page */
-.colour {
-    height: calc((100vw - 2rem) / 15);
-}
-
-/* Override link behaviour differently */
-a, a:visited a:hover, a:active, a:link {
-    color: #BEBEBE;
-    text-decoration: none;
-}
-
-/**
- *
- * Classes and IDs for the social media links & animation
- *
- **/
-
-#twitter:hover {
-    color: #6997c8;
-    animation: .45s jump infinite linear;
-}
-#github:hover {
-    color: #ef787b;
-    animation: .45s jump infinite linear;
-}
-#flickr:hover {
-    color: #99cb9b;
-    animation: .45s jump infinite linear;
-}
-#keys:hover {
-    color: #ca98c9;
-    animation: .45s jump infinite linear;
-}
-#email:hover {
-    color: #6ccaca;
-}
-#legal:hover {
-    color: #e7d853;
-    animation: .45s jump infinite linear;
-}
-
-.icons {
-    padding-top: 25px;
-    padding-bottom: 25px;
-}
-
-.icons h1 {
-    font-family: Inconsolata;
-    font-size: 42px;
-    line-height: 42px;
-    font-style: normal;
-    font-variant: normal;
-}
-
-@keyframes jump {
-  0% {
-    transform: translateY(0);
-  }
-  20% {
-    transform: translateY(-.075em);
-  }
-  80% {
-    transform: translateY(.025em);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
diff --git a/crumbs/static/css/crumbs.css b/crumbs/static/css/crumbs.css
index 1b05761..e288df6 100644
--- a/crumbs/static/css/crumbs.css
+++ b/crumbs/static/css/crumbs.css
@@ -1,178 +1,128 @@
-/**************************************
+/*****************************************
 
-   BASIC DEFINITIONS
+      CRUMBS BASE CSS DEFINITIONS
 
-**************************************/
+*****************************************/
 
 
 body {
-  font-family: 'Montserrat', sans-serif;
-  color: #EFEFEF;
-  background-color: #222222;
-  background-image: none;
-  font-size: 16px;
-  line-height: 1.5;
-  margin: 0;
-  overflow-y: scroll;
+    font-family: 'Montserrat', sans-serif;
+    color: #EFEFEF;
+    background-color: #222222;
+    font-size: 1.25em;
+    line-height: 1.5;
+    margin: 0;
+    overflow-y: scroll;
 }
 
-a {
-  color: #ce7b59;
-  outline: 0;
+.content a {
+    color: #f6915f;
+    outline: 0;
 }
 
-a:hover {
-  color: #f6915f;
-  text-decoration: none;
+.content a:hover, .content a:focus {
+    color: #EFEFEF;
+    background-color: #f6915f;
+    text-decoration: underline;
 }
 
-ul {
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
+.content .header { padding: 0.5em 1.5em 0.5em; }
+.content h1 { font-size: 1.5em; }
+.content { padding: 0 0 2em 0; }
 
-ol {
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-li {
-  font-size: 19px;
-  margin-left: 15px;
-  text-indent: 5px;
+.article {
+    padding: 1em 3em;
 }
 
-strong {
-  font-weight: 600;
+.article code, .article pre {
+    font-size: 1.2em;
+    font-family: monospace;
 }
 
-h1, h2, h3, h4 {
-    margin-bottom: 18px;
-    font-weight: 600;
+.article pre {
+    background-color: #353535;
+    border: 1px solid black;
+    padding: 1em;
 }
 
-h1 { font-size: 36px; }
-h2 { font-size: 28px; }
-
-h1.normal {
-  padding-top: 10px;
+.article img {
+    max-width: 100%;
 }
 
-.footer {
-  border-top: 1px solid #BEBEBE;
-  margin-top: 15px;
+.wrap {
+    display: flex;
+    flex-direction: column;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 1rem;
 }
 
-
-.container {
-  display: flex;
-  flex-direction: column;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 0 1rem;
+.nav {
+    justify-content: flex-end;
+    font-size: 1.5em;
+    padding: 22px 15px 32px;
 }
 
-.navigation {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  height: 50px;
-  line-height: 50px;
-  font-weight: 500;
-  font-size: 22px;
-  padding-top: 22px;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 32px;
+.nav a {
+    color:#FFF;
+    text-decoration: none;
+    padding-left: 48px;
+    text-transform: lowercase;
+    font-family: monospace;
+    font-size: 28px;
+    outline: 0;
 }
 
-.navigation a {
-  color:#FFF;
-  text-decoration: none;
-  padding-left: 48px;
-  text-transform: lowercase;
-  font-family: monospace;
-  font-size: 28px;
+.nav a:hover, .nav a:focus { text-decoration: underline; }
+
+.footer {
+    border-top: 1px solid #BEBEBE;
+    margin-top: 15px;
 }
 
-.page-title {
+.title {
     flex-grow: 1;
     font-size: 28px;
+    line-height: 48px;
     font-family: monospace;
 }
 
 .gay {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
-/* This is a block */
 .colour {
-  max-height: calc(1000px / 15);
-  height: 12px;
-  flex-grow: 1;
-}
-
-pre, code {
-  background: #222222;
-  padding: 15px;
-  font-size: 16px;
-  line-height: 24px;
-  font-family: Inconsolata, monospace;
-  border-radius: 0px;
-  color: #BEBEBE;
-  margin: 34px 0;
-  font-weight: 600;
+    max-height: calc(1000px / 15);
+    height: 12px;
+    flex-grow: 1;
 }
 
-pre {
-  box-shadow: inset 0 0 0.5em black;
-  white-space: pre-wrap;       /* Since CSS 2.1 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+.list {
+    font-family: monospace;
+    font-size: 1.35em;
+    list-style-type: none;
+    margin: 0;
 }
 
-code {
-  /* background-color: #E2E2E2; */
-  background-color: #DBDBDB;
-  color: #333333;
+.list > li {
+    position: relative;
+    padding-left: 12ch;
 }
 
-code { padding: 3px 3px; }
-
-.keys {
-  color: #BEBEBE;
-  background: #222222;
-
-  padding: 15px;
-  border-radius: 0px;
-  margin: 34px 0;
-  
-  font-size: 14px;
-  line-height: 18px;
-  font-family: Inconsolata, monospace;
-  font-weight: 400;
+.date {
+    padding-right: 1em;
+    position: absolute;
+    left: 0;
 }
 
-
-/*
-
-    ✨ COLOUR DEFINITIONS ✨
-
-  These colours are re-used in many parts of the website
-
-*/
-
-.cursor {
-  animation: flash 0.75s infinite alternate;
-}
+.cursor { animation: flash 0.75s infinite alternate; }
 
 @keyframes flash {
-  0%   { opacity: 1; }
-  49%  { opacity: 1; }
-  50%  { opacity: 0; }
-  100% { opacity: 0; }
+    0%   { opacity: 1; }
+    49%  { opacity: 1; }
+    50%  { opacity: 0; }
+    100% { opacity: 0; }
 }
 
 #t-color-red { color: #ef787b; }
@@ -189,93 +139,11 @@ code { padding: 3px 3px; }
 .colour5  { background-color: #d2cfc7; }
 .colour6  { background-color: #e7e5df; }
 .colour7  { background-color: #f1f0ec; }
-.colour8  { background-color: #ef787b; } /* Red */
-.colour9  { background-color: #f6915f; } /* Orange */
-.colour10 { background-color: #fdcb71; } /* Yellow */
-.colour11 { background-color: #99cb9b; } /* Green */
-.colour12 { background-color: #6ccaca; } /* Cyan */
-.colour13 { background-color: #6997c8; } /* Blue */
-.colour14 { background-color: #ca98c9; } /* Purple */
-.colour15 { background-color: #ce7b59; } /* Brown */
-
-/*
-
-    ✨ CARD DEFINITIONS ✨
-
-*/
-
-.card {
-  box-shadow: 0 0 1em black;
-  display: flex;
-  flex-direction: column;
-  padding: 35px;
-  background-color: #E2E2E2;
-  color: #222222;
-  margin-bottom: 25px;
-}
-
-.card p, h2, h3, h4 {
-  padding-left: 35px;
-  padding-right: 35px;
-}
-
-@media (max-width: 850px) {
-    .card {
-        padding: 20px;
-    }
-}
-
-.card-header {
-  border-bottom: 1px solid #222222;
-  margin-bottom: 15px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.card-header-url {
-  padding: 0;
-  margin: 0;
-  flex-grow: 1;
-}
-
-.card-content p {
-  font-size: 18px;
-  margin: 18px 0;
-}
-
-.card-content img {
-  width: calc(100% - 50px);
-  max-width: 1200px;
-}
-
-.card-content img.original {
-  max-width: 100%;
-  width: auto;
-}
-
-.article-meta p {
-  font-style: italic;
-  font-size: 16px;
-  line-height: 16px;
-  text-align: right;
-}
-
-.card-content blockquote {
-  background: #EFEFEF;
-  border-left: 10px solid #ccc;
-  margin: 1.5em 10px;
-  padding: 0.5em 10px;
-  quotes: "\201C""\201D""\2018""\2019";
-}
-.card-content blockquote:before {
-  color: #ccc;
-  content: open-quote;
-  font-size: 4em;
-  line-height: 0.1em;
-  margin-right: 0.25em;
-  vertical-align: -0.4em;
-}
-.card-content blockquote p {
-  display: inline;
-}
+.colour8  { background-color: #ef787b; }
+.colour9  { background-color: #f6915f; }
+.colour10 { background-color: #fdcb71; }
+.colour11 { background-color: #99cb9b; }
+.colour12 { background-color: #6ccaca; }
+.colour13 { background-color: #6997c8; }
+.colour14 { background-color: #ca98c9; }
+.colour15 { background-color: #ce7b59; }
diff --git a/crumbs/static/css/home.css b/crumbs/static/css/home.css
new file mode 100644
index 0000000..16b63e3
--- /dev/null
+++ b/crumbs/static/css/home.css
@@ -0,0 +1,91 @@
+/*****************************************
+
+          CRUMBS HOME PAGE CSS
+
+
+The colours used on the social media links are the same as defined for
+the colour bar used as a divider between article bodies and the nav.
+
+*****************************************/
+
+
+/* Use different paddings for titles */
+.title {
+    padding: 1em 0;
+    font-size: 2.5em;
+    font-weight: 500;
+}
+
+.footer { padding: 1em 2em; }
+
+/* Use a white navigation divider */
+.nav { border-bottom: 1px solid white; }
+
+/* Use a larger text on the front page */
+p { font-size: 1.1em; }
+
+
+/* Colour blocks are bigger on the front page */
+.colour { height: calc((100vw - 2rem) / 15); }
+
+/* Override link behaviour differently */
+a, a:visited a:hover, a:active, a:link {
+    color: #BEBEBE;
+    text-decoration: none;
+    outline: 0;
+}
+
+/*** Social media definitions ***/
+
+.icons > a {
+    display: block;
+    font-family: Inconsolata;
+    font-size: 2.5em;
+    line-height: 1.3em;
+    font-style: normal;
+    font-variant: normal;
+}
+
+#twitter:hover, #twitter:focus {
+    color: #6997c8;
+    animation: .45s jump 2 linear;
+}
+
+#github:hover, #github:focus {
+    color: #ef787b;
+    animation: .45s jump 2 linear;
+}
+
+#flickr:hover, #flickr:focus {
+    color: #99cb9b;
+    animation: .45s jump 2 linear;
+}
+
+#keys:hover, #keys:focus {
+    color: #ca98c9;
+    animation: .45s jump 2 linear;
+}
+
+#email:hover, #email:focus { color: #6ccaca; }
+
+#legal:hover, #legal:focus {
+    color: #e7d853;
+    animation: .45s jump infinite linear;
+}
+
+.icons { padding: 0.25em 1em; }
+
+.icons h1 {
+    font-family: Inconsolata;
+    font-size: 42px;
+    line-height: 42px;
+    font-style: normal;
+    font-variant: normal;
+}
+
+@keyframes jump {
+  0%   { transform: translateY(0); }
+  20%  { transform: translateY(-.075em); }
+  80%  { transform: translateY(.025em); }
+  100% { transform: translateY(0); }
+}
diff --git a/crumbs/static/css/pygment.css b/crumbs/static/css/pygment.css
deleted file mode 100755
index 9ba6e1e..0000000
--- a/crumbs/static/css/pygment.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.highlight .hll { background-color: #49483e }
-.highlight .c { color: #75715e } /* Comment */
-.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-.highlight .k { color: #66d9ef } /* Keyword */
-.highlight .l { color: #ae81ff } /* Literal */
-.highlight .n { color: #f8f8f2 } /* Name */
-.highlight .o { color: #f92672 } /* Operator */
-.highlight .p { color: #f8f8f2 } /* Punctuation */
-.highlight .cm { color: #75715e } /* Comment.Multiline */
-.highlight .cp { color: #75715e } /* Comment.Preproc */
-.highlight .c1 { color: #75715e } /* Comment.Single */
-.highlight .cs { color: #75715e } /* Comment.Special */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .kc { color: #66d9ef } /* Keyword.Constant */
-.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-.highlight .kn { color: #f92672 } /* Keyword.Namespace */
-.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-.highlight .kt { color: #66d9ef } /* Keyword.Type */
-.highlight .ld { color: #e6db74 } /* Literal.Date */
-.highlight .m { color: #ae81ff } /* Literal.Number */
-.highlight .s { color: #e6db74 } /* Literal.String */
-.highlight .na { color: #a6e22e } /* Name.Attribute */
-.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-.highlight .nc { color: #a6e22e } /* Name.Class */
-.highlight .no { color: #66d9ef } /* Name.Constant */
-.highlight .nd { color: #a6e22e } /* Name.Decorator */
-.highlight .ni { color: #f8f8f2 } /* Name.Entity */
-.highlight .ne { color: #a6e22e } /* Name.Exception */
-.highlight .nf { color: #a6e22e } /* Name.Function */
-.highlight .nl { color: #f8f8f2 } /* Name.Label */
-.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-.highlight .nx { color: #a6e22e } /* Name.Other */
-.highlight .py { color: #f8f8f2 } /* Name.Property */
-.highlight .nt { color: #f92672 } /* Name.Tag */
-.highlight .nv { color: #f8f8f2 } /* Name.Variable */
-.highlight .ow { color: #f92672 } /* Operator.Word */
-.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-.highlight .sc { color: #e6db74 } /* Literal.String.Char */
-.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-.highlight .se { color: #ae81ff } /* Literal.String.Escape */
-.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-.highlight .sx { color: #e6db74 } /* Literal.String.Other */
-.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-.highlight .gh { } /* Generic Heading & Diff Header */
-.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
\ No newline at end of file
diff --git a/crumbs/templates/article.html b/crumbs/templates/article.html
index f156bfa..07bb368 100644
--- a/crumbs/templates/article.html
+++ b/crumbs/templates/article.html
@@ -1,6 +1,4 @@
-{% extends "normal.html" %}
-
-{% block title %}{{ article.title }} {% endblock title %}
+{% extends "base.html" %}
 
 {% block metatags %}
 {% autoescape true %}
@@ -26,8 +24,35 @@
 {% endautoescape %}
 {% endblock metatags %}
 
-{% block content %}
-    {% with type='single' %}
-    {% include "components/card_content.html" %}
-    {% endwith %}
+
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
+
+{% include "components/gay.html" %}
+
+<div class="content">
+  <h1>{{ article.title }}</h1>
+  
+  <div class="header">
+    <hr/>
+    <a href="{{ SITEURL }}/{{ article.category|lower }}"> ⇠ back</a>
+    {% if article.tags|length > 0 %}
+    <span> | tags:</span>
+    {% for tag in article.tags|sort %}
+    <span><strong>{{ tag }}</strong>{% if loop.index < article.tags|length %}, </span>{% endif %}
+    {% endfor %}
+    {% endif %}
+    <span> | duration: <strong>{{article.read_time_string}}</strong></span>
+    <hr/>
+  </div>
+  
+
+  <div class="article">
+    {{ article.content }}
+  </div>
+  
+</div>
 {% endblock %}
diff --git a/crumbs/templates/base.html b/crumbs/templates/base.html
index 43eab3a..c655cea 100644
--- a/crumbs/templates/base.html
+++ b/crumbs/templates/base.html
@@ -1,26 +1,34 @@
 <!DOCTYPE html>
 <html lang="{{ DEFAULT_LANG }}">
+  <head>
+    {% block metatags %}{% endblock %}
 
-    <head>
-      {% block metatags %}
-      {% endblock %}
-      {% block head %}
-      {% endblock %}
-    </head>
+    <title>{{ SITENAME }}</title>
     
-    {% block body %}
-    <body>
-        <div class="container">
-            {% block wrapped %}
-            {% endblock %}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-            {# This can be used for a footer #}
-            <div>
-                {% block footer %}
-                {% endblock %}
-            </div>
+    {# Mastodon verification link #}
+    <a rel="me" href="https://octodon.social/@spacekookie"></a>
+    
+    <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
+    {% block css %}{% endblock %}
+    
+    <!-- TODO: remove  -->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet">
+
+    <!-- TODO: remove  -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
+    <link rel="alternate" type="application/rss+xml" href="{{ SITEURL }}/rss.xml" title="{{ SITENAME }} — Latest Posts" />
+  </head>
+
+  <body>
+    <div class="wrap">
+      {# Wrappen body block #}
+      {% block body %}{% endblock %}
 
-        </div>
-    </body>
-    {% endblock %}
+      {# Footer only used on 'home' #}
+      {% block footer %}{% endblock %}
+    </div>
+  </body>
 </html>
diff --git a/crumbs/templates/category.html b/crumbs/templates/category.html
index 39ff421..22e0081 100644
--- a/crumbs/templates/category.html
+++ b/crumbs/templates/category.html
@@ -1,11 +1,21 @@
-{% extends "normal.html" %}
+{% extends "base.html" %}
 
-{% block title %} {{ category }} {% endblock title %}
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
 
-{% block content %}
-    {% for article in articles %}
-        {% with type='multi' %}
-        {% include "components/card_content.html" %}
-        {% endwith %}
-    {% endfor %}
-{% endblock content %}
+{% include "components/gay.html" %}
+
+<div class="content">
+  <h1>{{ category }}</h1>
+  
+  {% for article in articles %}
+  <ul class="list">
+    <li><time class="date">{{ article.locale_date }}</time>
+      <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></li>
+  </ul>
+  {% endfor %}
+</div>
+{% endblock %}
diff --git a/crumbs/templates/components/article_header.html b/crumbs/templates/components/article_header.html
deleted file mode 100644
index c8839c7..0000000
--- a/crumbs/templates/components/article_header.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% if type == 'single' %}
-<h3 class="card-header-url"><a href="{{ SITEURL }}/{{ article.category|lower }}"> ⇠ Back</a></h3>
-{% else %}
-<h2 class="card-header-url"><b><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></b></h2>
-{% endif %}
-
-<div class="article-meta">
-    <p>
-        {% if article.tags|length > 0 %}
-            {% for tag in article.tags|sort %}
-            <strong>{{ tag }} |</strong>
-            {% endfor %}
-            Tags
-        {% endif %}
-    </p>
-    <p>Published <span class="tc-brown"><strong>{{ article.locale_date }}</strong></span></p>
-    <p>This article takes <span class="tc-brown"><strong>{{article.read_time_string}}</strong></span> to read.</p>
-</div>
\ No newline at end of file
diff --git a/crumbs/templates/components/card_content.html b/crumbs/templates/components/card_content.html
deleted file mode 100644
index c46f9ee..0000000
--- a/crumbs/templates/components/card_content.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-<div class="card">
-    <div class="card-header">
-        {% include "components/article_header.html" %}        
-    </div>
-
-    <div class="card-content">
-        {% if type == 'single' %}
-            {{ article.content }}
-        {% else %}
-            {{ article.summary }}
-        {% endif %}
-    </div>
-</div>
diff --git a/crumbs/templates/components/super_gay.html b/crumbs/templates/components/gay.html
index 6089ec4..6089ec4 100644
--- a/crumbs/templates/components/super_gay.html
+++ b/crumbs/templates/components/gay.html
diff --git a/crumbs/templates/components/html_head.html b/crumbs/templates/components/html_head.html
deleted file mode 100644
index 0082421..0000000
--- a/crumbs/templates/components/html_head.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{{ SITENAME }}</title>
-
-{% if type == 'home' %}
-<link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
-<link href="{{ SITEURL }}/theme/css/cr_title.css" rel="stylesheet"> {# This contains various overrides #}
-<a rel="me" href="https://octodon.social/@spacekookie"></a>
-{% else %}
-<link href="{{ SITEURL }}/theme/css/pygment.css" rel="stylesheet">
-<link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
-{% endif %}
-
-<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet">
-
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
-<link rel="alternate" type="application/rss+xml" href="{{ SITEURL }}/rss.xml" title="{{ SITENAME }} — Latest Posts" />
-
diff --git a/crumbs/templates/components/link_generator.html b/crumbs/templates/components/links.html
index 7c7dc6a..d081bef 100644
--- a/crumbs/templates/components/link_generator.html
+++ b/crumbs/templates/components/links.html
@@ -1,8 +1,9 @@
+{# GENERATE LINK SECTION #}
+
 {% for title, link in MENUITEMS %}
-    {# Do magic with http/https #}
     {% if 'http://' in link or 'https://' in link %}
         <a class="nav-item" href="{{ link }}">{{ title }} </a>
     {% else %}
         <a class="nav-item" href="{{ SITEURL }}{{ link }}">{{ title }} </a>
     {% endif %}
-{% endfor %}
\ No newline at end of file
+{% endfor %}
diff --git a/crumbs/templates/components/navbar_generator.html b/crumbs/templates/components/navbar_generator.html
deleted file mode 100644
index 07121ca..0000000
--- a/crumbs/templates/components/navbar_generator.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="navigation">
-    {% if type == 'home' %}
-        {% include "components/link_generator.html" %}
-    {% else %}
-        {% with title_type='page-title' %} {% include "components/title_text.html" %} {% endwith %}
-        {% include "components/link_generator.html" %}
-    {% endif %}
-</div>
diff --git a/crumbs/templates/components/title.html b/crumbs/templates/components/title.html
new file mode 100644
index 0000000..3c914ba
--- /dev/null
+++ b/crumbs/templates/components/title.html
@@ -0,0 +1,8 @@
+{# GENERATE HEADER TITLE  #}
+<div class="title">
+  <span id="t-color-red"><b># ~ </b></span>
+  <span id="t-color-org">fun</span>
+  <span id="t-color-ylw">memory</span>
+  <span id="t-color-grn">violations</span>
+  <span class="cursor">▁</span>
+</div>
diff --git a/crumbs/templates/components/title_text.html b/crumbs/templates/components/title_text.html
deleted file mode 100644
index a77477c..0000000
--- a/crumbs/templates/components/title_text.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="{{ title_type }}" title="Inconsolata is my favourite monospace font, after all...">
-    {% if title_type == 'title' %}
-    <h1>
-    {% endif %}
-    <span id="t-color-red"><b># ~ </b></span>
-    <span id="t-color-org">fun</span>
-    <span id="t-color-ylw">memory</span>
-    <span id="t-color-grn">violations</span>
-    <span class="cursor" id="cursor">&nbsp;▁</span>
-    {% if title_type == 'title' %}
-    </h1>
-    {% endif %}
-</div>
diff --git a/crumbs/templates/home.html b/crumbs/templates/home.html
index 0f3774c..65bb385 100644
--- a/crumbs/templates/home.html
+++ b/crumbs/templates/home.html
@@ -1,16 +1,21 @@
 {% extends "base.html" %}
 
-{# Define what html head we include #}
-{% block head %}
-    {% with type='home' %}
-    {% include "components/html_head.html" %}
-    {% endwith %}
-{% endblock head %}
+{% block css %}
+<link href="{{ SITEURL }}/theme/css/home.css" rel="stylesheet">
+{% endblock %}
+
+{% block body %}
+<div class="gay nav">
+  {% include "components/links.html" %}
+</div>
+
+{% include "components/title.html" %}
+{% include "components/gay.html" %}
 
-{% block wrapped %}
-    {% with type='home' %} {% include "components/navbar_generator.html" %} {% endwith %}
-    {% with title_type='title' %} {% include "components/title_text.html" %} {% endwith %}
-    {% include "components/super_gay.html" %}
+<div>
+{{ page.content }}
+</div>
 
-    {{ page.content }}
 {% endblock %}
+
+
diff --git a/crumbs/templates/keys.html b/crumbs/templates/keys.html
index e1b98ee..a498ae3 100644
--- a/crumbs/templates/keys.html
+++ b/crumbs/templates/keys.html
@@ -1,19 +1,25 @@
-{% extends "normal.html" %}
+{% extends "base.html" %}
 
-{% block title %}{{ page.title }} {% endblock title %}
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
 
-{% block content %}
-<div class="card">
-    <div class="card-content">
-        {{ page.content }}
-        
-        <p>Following is a signed key statement:</p>
+{% include "components/gay.html" %}
 
-        <pre class="keys">
-            {% include "keys.txt" %}
-        </pre>
-    </div>
-</div>
-{% endblock %}
+<div class="content">
+  <h1>Keys</h1>
 
+  <div class="article">
+    {{ page.content }}
+    
+    <p>Following is a signed key statement:</p>
 
+    <pre class="keys">
+      {% include "keys.txt" %}
+    </pre>
+  </div>
+  
+</div>
+{% endblock %}
diff --git a/crumbs/templates/normal.html b/crumbs/templates/normal.html
deleted file mode 100644
index 4c58b7b..0000000
--- a/crumbs/templates/normal.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends "base.html" %}
-
-{# Define what html head we include #}
-{% block head %}
-    {% with type='base' %}
-    {% include "components/html_head.html" %}
-    {% endwith %}
-{% endblock head %}
-
-{% block wrapped %}
-    {% with type='normal' %} {% include "components/navbar_generator.html" %} {% endwith %}
-    {% include "components/super_gay.html" %}
-
-    <h1 class="normal">{% block title %}{% endblock %}</h1>
-
-    {% block content %}
-    {% endblock %}
-{% endblock %}
\ No newline at end of file
diff --git a/crumbs/templates/page.html b/crumbs/templates/page.html
index 2312a15..fca02b8 100644
--- a/crumbs/templates/page.html
+++ b/crumbs/templates/page.html
@@ -1,11 +1,19 @@
-{% extends "normal.html" %}
+{% extends "base.html" %}
 
-{% block title %}{{ page.title }} {% endblock title %}
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
+
+{% include "components/gay.html" %}
+
+<div class="content">
+  <h1>{{ page.title }}</h1>
+
+  <div class="article">
+    {{ page.content }}
+  </div>
 
-{% block content %}
-<div class="card">
-    <div class="card-content">
-        {{ page.content }}
-    </div>
 </div>
 {% endblock %}