crumbs: basically rewriting the theme to be less complicated

20 files changed, 666 insertions, 0 deletions

diff --git a/old/static/css/cr_title.css b/old/static/css/cr_title.css
new file mode 100644
index 0000000..b6b961e
--- /dev/null
+++ b/old/static/css/cr_title.css
@@ -0,0 +1,92 @@
+
+/* 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/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/old/static/css/pygment.css b/old/static/css/pygment.css
new file mode 100755
index 0000000..9ba6e1e
--- /dev/null
+++ b/old/static/css/pygment.css
@@ -0,0 +1,64 @@
+.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/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/old/templates/components/article_header.html b/old/templates/components/article_header.html
new file mode 100644
index 0000000..10c88c0
--- /dev/null
+++ b/old/templates/components/article_header.html
@@ -0,0 +1,18 @@
+{% 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>
diff --git a/old/templates/components/card_content.html b/old/templates/components/card_content.html
new file mode 100644
index 0000000..c46f9ee
--- /dev/null
+++ b/old/templates/components/card_content.html
@@ -0,0 +1,14 @@
+
+<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/old/templates/components/html_head.html b/old/templates/components/html_head.html
new file mode 100644
index 0000000..0082421
--- /dev/null
+++ b/old/templates/components/html_head.html
@@ -0,0 +1,18 @@
+<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/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/old/templates/components/navbar_generator.html b/old/templates/components/navbar_generator.html
new file mode 100644
index 0000000..07121ca
--- /dev/null
+++ b/old/templates/components/navbar_generator.html
@@ -0,0 +1,8 @@
+<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/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/old/templates/normal.html b/old/templates/normal.html
new file mode 100644
index 0000000..4c58b7b
--- /dev/null
+++ b/old/templates/normal.html
@@ -0,0 +1,18 @@
+{% 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/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 %}