crumbs: basically rewriting the theme to be less complicated

32 files changed, 752 insertions, 301 deletions

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/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/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/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/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/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 %}
diff --git a/crumbs/static/css/cr_title.css b/old/static/css/cr_title.css
index b6b961e..b6b961e 100644
--- a/crumbs/static/css/cr_title.css
+++ b/old/static/css/cr_title.css
diff --git a/old/static/css/crumbs.css b/old/static/css/crumbs.css
new file mode 100644
index 0000000..32bc285
--- /dev/null
+++ b/old/static/css/crumbs.css
@@ -0,0 +1,281 @@
+/**************************************
+
+   BASIC 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;
+}
+
+a {
+  color: #ce7b59;
+  outline: 0;
+}
+
+a:hover {
+  color: #f6915f;
+  text-decoration: none;
+}
+
+ul {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+ol {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+li {
+  font-size: 19px;
+  margin-left: 15px;
+  text-indent: 5px;
+}
+
+strong {
+  font-weight: 600;
+}
+
+h1, h2, h3, h4 {
+    margin-bottom: 18px;
+    font-weight: 600;
+}
+
+h1 { font-size: 36px; }
+h2 { font-size: 28px; }
+
+h1.normal {
+  padding-top: 10px;
+}
+
+.footer {
+  border-top: 1px solid #BEBEBE;
+  margin-top: 15px;
+}
+
+
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.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;
+}
+
+.navigation a {
+  color:#FFF;
+  text-decoration: none;
+  padding-left: 48px;
+  text-transform: lowercase;
+  font-family: monospace;
+  font-size: 28px;
+}
+
+.page- {
+    flex-grow: 1;
+    font-size: 28px;
+    font-family: monospace;
+}
+
+.gay {
+  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;
+}
+
+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+ */
+}
+
+code {
+  /* background-color: #E2E2E2; */
+  background-color: #DBDBDB;
+  color: #333333;
+}
+
+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;
+}
+
+
+/*
+
+    ✨ COLOUR DEFINITIONS ✨
+ 
+  These colours are re-used in many parts of the website
+
+*/
+
+.cursor {
+  animation: flash 0.75s infinite alternate;
+}
+
+@keyframes flash {
+  0%   { opacity: 1; }
+  49%  { opacity: 1; }
+  50%  { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+#t-color-red { color: #ef787b; }
+#t-color-org { color: #f6915f; }
+#t-color-ylw { color: #fdcb71; }
+#t-color-grn { color: #99cb9b; }
+.tc-brown { color: #ce7b59; }
+
+
+.colour1  { background-color: #3c3c3c; }
+.colour2  { background-color: #525252; }
+.colour3  { background-color: #74736a; }
+.colour4  { background-color: #9f9e93; }
+.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;
+}
diff --git a/crumbs/static/css/pygment.css b/old/static/css/pygment.css
index 9ba6e1e..9ba6e1e 100755
--- a/crumbs/static/css/pygment.css
+++ b/old/static/css/pygment.css
diff --git a/old/static/img/card.png b/old/static/img/card.png
new file mode 100644
index 0000000..9f945a1
--- /dev/null
+++ b/old/static/img/card.png
diff --git a/old/static/img/cat.png b/old/static/img/cat.png
new file mode 100644
index 0000000..a2fc628
--- /dev/null
+++ b/old/static/img/cat.png
diff --git a/old/static/img/mastodon.svg b/old/static/img/mastodon.svg
new file mode 100644
index 0000000..4b72b3a
--- /dev/null
+++ b/old/static/img/mastodon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3088d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/></svg>
diff --git a/old/templates/article.html b/old/templates/article.html
new file mode 100644
index 0000000..f156bfa
--- /dev/null
+++ b/old/templates/article.html
@@ -0,0 +1,33 @@
+{% extends "normal.html" %}
+
+{% block title %}{{ article.title }} {% endblock title %}
+
+{% block metatags %}
+{% autoescape true %}
+
+<!-- Primary Meta Tags -->
+<meta name="title" content="{{ article.title }}">
+<meta name="description" content="{{ article.summary | striptags }}">
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://spacekookie.de">
+<meta property="og:title" content="{{ article.title }}">
+<meta property="og:description" content="{{ article.summary | striptags }}">
+<meta property="og:image" content="https://spacekookie.de/theme/img/card.png">
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:image" content="https://spacekookie.de/theme/img/card.png">
+<meta property="twitter:url" content="https://spacekookie.de">
+<meta property="twitter:title" content="{{ article.title }}">
+<meta property="twitter:description" content="{{ article.summary | striptags }}">
+
+{% endautoescape %}
+{% endblock metatags %}
+
+{% block content %}
+    {% with type='single' %}
+    {% include "components/card_content.html" %}
+    {% endwith %}
+{% endblock %}
diff --git a/old/templates/base.html b/old/templates/base.html
new file mode 100644
index 0000000..43eab3a
--- /dev/null
+++ b/old/templates/base.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="{{ DEFAULT_LANG }}">
+
+    <head>
+      {% block metatags %}
+      {% endblock %}
+      {% block head %}
+      {% endblock %}
+    </head>
+    
+    {% block body %}
+    <body>
+        <div class="container">
+            {% block wrapped %}
+            {% endblock %}
+
+            {# This can be used for a footer #}
+            <div>
+                {% block footer %}
+                {% endblock %}
+            </div>
+
+        </div>
+    </body>
+    {% endblock %}
+</html>
diff --git a/old/templates/category.html b/old/templates/category.html
new file mode 100644
index 0000000..39ff421
--- /dev/null
+++ b/old/templates/category.html
@@ -0,0 +1,11 @@
+{% extends "normal.html" %}
+
+{% block title %} {{ category }} {% endblock title %}
+
+{% block content %}
+    {% for article in articles %}
+        {% with type='multi' %}
+        {% include "components/card_content.html" %}
+        {% endwith %}
+    {% endfor %}
+{% endblock content %}
diff --git a/crumbs/templates/components/article_header.html b/old/templates/components/article_header.html
index c8839c7..10c88c0 100644
--- a/crumbs/templates/components/article_header.html
+++ b/old/templates/components/article_header.html
@@ -15,4 +15,4 @@
     </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
+</div>
diff --git a/crumbs/templates/components/card_content.html b/old/templates/components/card_content.html
index c46f9ee..c46f9ee 100644
--- a/crumbs/templates/components/card_content.html
+++ b/old/templates/components/card_content.html
diff --git a/crumbs/templates/components/html_head.html b/old/templates/components/html_head.html
index 0082421..0082421 100644
--- a/crumbs/templates/components/html_head.html
+++ b/old/templates/components/html_head.html
diff --git a/old/templates/components/link_generator.html b/old/templates/components/link_generator.html
new file mode 100644
index 0000000..735e0ba
--- /dev/null
+++ b/old/templates/components/link_generator.html
@@ -0,0 +1,10 @@
+{# This file generates a list of links based on the pelican pages #}
+
+{% 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 %}
diff --git a/crumbs/templates/components/navbar_generator.html b/old/templates/components/navbar_generator.html
index 07121ca..07121ca 100644
--- a/crumbs/templates/components/navbar_generator.html
+++ b/old/templates/components/navbar_generator.html
diff --git a/old/templates/components/super_gay.html b/old/templates/components/super_gay.html
new file mode 100644
index 0000000..6089ec4
--- /dev/null
+++ b/old/templates/components/super_gay.html
@@ -0,0 +1,17 @@
+<div class="gay">
+    <div class="colour colour1"></div>
+    <div class="colour colour2"></div>
+    <div class="colour colour3"></div>
+    <div class="colour colour4"></div>
+    <div class="colour colour5"></div>
+    <div class="colour colour6"></div>
+    <div class="colour colour7"></div>
+    <div class="colour colour8"></div>
+    <div class="colour colour9"></div>
+    <div class="colour colour10"></div>
+    <div class="colour colour11"></div>
+    <div class="colour colour12"></div>
+    <div class="colour colour13"></div>
+    <div class="colour colour14"></div>
+    <div class="colour colour15"></div>
+</div>
diff --git a/old/templates/components/title_text.html b/old/templates/components/title_text.html
new file mode 100644
index 0000000..5ee4da8
--- /dev/null
+++ b/old/templates/components/title_text.html
@@ -0,0 +1,9 @@
+<div class="page-title" title="Inconsolata is my favourite monospace font, after all...">
+    <h1>
+      <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>
+    </h1>
+</div>
diff --git a/old/templates/home.html b/old/templates/home.html
new file mode 100644
index 0000000..0f3774c
--- /dev/null
+++ b/old/templates/home.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+
+{# Define what html head we include #}
+{% block head %}
+    {% with type='home' %}
+    {% include "components/html_head.html" %}
+    {% endwith %}
+{% endblock head %}
+
+{% 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" %}
+
+    {{ page.content }}
+{% endblock %}
diff --git a/old/templates/keys.html b/old/templates/keys.html
new file mode 100644
index 0000000..e1b98ee
--- /dev/null
+++ b/old/templates/keys.html
@@ -0,0 +1,19 @@
+{% extends "normal.html" %}
+
+{% block title %}{{ page.title }} {% endblock title %}
+
+{% block content %}
+<div class="card">
+    <div class="card-content">
+        {{ 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/old/templates/normal.html
index 4c58b7b..4c58b7b 100644
--- a/crumbs/templates/normal.html
+++ b/old/templates/normal.html
diff --git a/old/templates/page.html b/old/templates/page.html
new file mode 100644
index 0000000..2312a15
--- /dev/null
+++ b/old/templates/page.html
@@ -0,0 +1,11 @@
+{% extends "normal.html" %}
+
+{% block title %}{{ page.title }} {% endblock title %}
+
+{% block content %}
+<div class="card">
+    <div class="card-content">
+        {{ page.content }}
+    </div>
+</div>
+{% endblock %}