Add 'infra/website/' from commit '275bec94f9f9e221bfddeb06ca7d5b87068eb7a0'

git-subtree-dir: infra/website
git-subtree-mainline: c4625b175f8200f643fd6e11010932ea44c78433
git-subtree-split: 275bec94f9f9e221bfddeb06ca7d5b87068eb7a0

18 files changed, 487 insertions, 0 deletions

diff --git a/infra/website/crumbs/static/css/crumbs.css b/infra/website/crumbs/static/css/crumbs.css
new file mode 100644
index 000000000000..5ab7b6d7e34d
--- /dev/null
+++ b/infra/website/crumbs/static/css/crumbs.css
@@ -0,0 +1,186 @@
+/*****************************************
+
+      CRUMBS BASE CSS DEFINITIONS
+
+*****************************************/
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/Montserrat-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(../fonts/Montserrat-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  font-style: normal;  font-weight: 400;
+  font-display: swap;
+  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(../fonts/Inconsolata-Regular.ttf) format('truetype');
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    color: #EFEFEF;
+    background-color: #222222;
+    font-size: 1.25em;
+    line-height: 1.5;
+    margin: 0;
+    overflow-y: scroll;
+}
+
+.content a {
+    color: #f6915f;
+    outline: 0;
+}
+
+.content a:hover, .content a:focus {
+    color: #EFEFEF;
+    background-color: #f6915f;
+    text-decoration: underline;
+}
+
+.content .header { padding: 0.5em 1.5em 0.5em; }
+.content h1 { font-size: 1.5em; }
+.content { padding: 0 0 2em 0; }
+
+.article {
+    padding: 1em 3em;
+}
+
+.article code, .article pre {
+    font-size: 1.2em;
+    font-family: monospace;
+}
+
+.article pre {
+    background-color: #353535;
+    border: 1px solid black;
+    padding: 1em;
+
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+.article img {
+    max-width: 100%;
+}
+
+.wrap {
+    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;
+}
+
+.nav a {
+    color:#FFF;
+    text-decoration: none;
+    padding-left: 48px;
+    text-transform: lowercase;
+    font-family: monospace;
+    font-size: 28px;
+    outline: 0;
+}
+
+.nav a:hover, .nav a:focus { text-decoration: underline; }
+
+.footer {
+    border-top: 1px solid #BEBEBE;
+    margin-top: 15px;
+}
+
+.title {
+    flex-grow: 1;
+    font-size: 28px;
+    line-height: 48px;
+    font-family: monospace;
+}
+
+.gay {
+    display: flex;
+    flex-direction: row;
+}
+
+.colour {
+    max-height: calc(1000px / 15);
+    height: 12px;
+    flex-grow: 1;
+}
+
+.list {
+    font-family: monospace;
+    font-size: 1.35em;
+    list-style-type: none;
+    margin: 0;
+}
+
+.list > li {
+    position: relative;
+    padding-left: 12ch;
+}
+
+.date {
+    padding-right: 1em;
+    position: absolute;
+    left: 0;
+}
+
+.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; }
+.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; }
+
+@media (max-width: 480px) {
+    .nav.gay {
+        display: initial;
+    }
+
+    .content .no-side-padding-mobile {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
diff --git a/infra/website/crumbs/static/css/home.css b/infra/website/crumbs/static/css/home.css
new file mode 100644
index 000000000000..16b63e38ec29
--- /dev/null
+++ b/infra/website/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/infra/website/crumbs/static/fonts/Inconsolata-Regular.ttf b/infra/website/crumbs/static/fonts/Inconsolata-Regular.ttf
new file mode 100644
index 000000000000..18a07080f953
--- /dev/null
+++ b/infra/website/crumbs/static/fonts/Inconsolata-Regular.ttf
diff --git a/infra/website/crumbs/static/fonts/Montserrat-Regular.ttf b/infra/website/crumbs/static/fonts/Montserrat-Regular.ttf
new file mode 100644
index 000000000000..8d443d5d56ac
--- /dev/null
+++ b/infra/website/crumbs/static/fonts/Montserrat-Regular.ttf
diff --git a/infra/website/crumbs/static/fonts/Montserrat-SemiBold.ttf b/infra/website/crumbs/static/fonts/Montserrat-SemiBold.ttf
new file mode 100644
index 000000000000..f8a43f2b2030
--- /dev/null
+++ b/infra/website/crumbs/static/fonts/Montserrat-SemiBold.ttf
diff --git a/infra/website/crumbs/static/img/card.png b/infra/website/crumbs/static/img/card.png
new file mode 100644
index 000000000000..9f945a1364b6
--- /dev/null
+++ b/infra/website/crumbs/static/img/card.png
diff --git a/infra/website/crumbs/static/img/cat.png b/infra/website/crumbs/static/img/cat.png
new file mode 100644
index 000000000000..a2fc628c5b6e
--- /dev/null
+++ b/infra/website/crumbs/static/img/cat.png
diff --git a/infra/website/crumbs/static/img/mastodon.svg b/infra/website/crumbs/static/img/mastodon.svg
new file mode 100644
index 000000000000..4b72b3ac8bfd
--- /dev/null
+++ b/infra/website/crumbs/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/infra/website/crumbs/templates/article.html b/infra/website/crumbs/templates/article.html
new file mode 100644
index 000000000000..c3b259646947
--- /dev/null
+++ b/infra/website/crumbs/templates/article.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% 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 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 no-side-padding-mobile">
+    <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 no-side-padding-mobile">
+    {{ article.content }}
+  </div>
+  
+</div>
+{% endblock %}
diff --git a/infra/website/crumbs/templates/base.html b/infra/website/crumbs/templates/base.html
new file mode 100644
index 000000000000..1ec37dedc803
--- /dev/null
+++ b/infra/website/crumbs/templates/base.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="{{ DEFAULT_LANG }}">
+  <head>
+    {% block metatags %}{% endblock %}
+
+    <title>{{ SITENAME }}</title>
+    
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {# Mastodon verification link #}
+    <meta rel="me" href="https://octodon.social/@spacekookie">
+    
+    <link href="{{ SITEURL }}/theme/css/crumbs.css" rel="stylesheet">
+    {% block css %}{% endblock %}
+
+    <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 %}
+
+      {# Footer only used on 'home' #}
+      {% block footer %}{% endblock %}
+    </div>
+  </body>
+</html>
diff --git a/infra/website/crumbs/templates/category.html b/infra/website/crumbs/templates/category.html
new file mode 100644
index 000000000000..22e008128181
--- /dev/null
+++ b/infra/website/crumbs/templates/category.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
+
+{% 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/infra/website/crumbs/templates/components/gay.html b/infra/website/crumbs/templates/components/gay.html
new file mode 100644
index 000000000000..6089ec4b0fc9
--- /dev/null
+++ b/infra/website/crumbs/templates/components/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/infra/website/crumbs/templates/components/links.html b/infra/website/crumbs/templates/components/links.html
new file mode 100644
index 000000000000..d081bef01427
--- /dev/null
+++ b/infra/website/crumbs/templates/components/links.html
@@ -0,0 +1,9 @@
+{# GENERATE LINK SECTION #}
+
+{% for title, link in MENUITEMS %}
+    {% 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/infra/website/crumbs/templates/components/title.html b/infra/website/crumbs/templates/components/title.html
new file mode 100644
index 000000000000..3c914ba5c29c
--- /dev/null
+++ b/infra/website/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/infra/website/crumbs/templates/home.html b/infra/website/crumbs/templates/home.html
new file mode 100644
index 000000000000..65bb3851a282
--- /dev/null
+++ b/infra/website/crumbs/templates/home.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% 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" %}
+
+<div>
+{{ page.content }}
+</div>
+
+{% endblock %}
+
+
diff --git a/infra/website/crumbs/templates/keys.html b/infra/website/crumbs/templates/keys.html
new file mode 100644
index 000000000000..a498ae3d864d
--- /dev/null
+++ b/infra/website/crumbs/templates/keys.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block body %}
+<div class="gay nav">
+  {% include "components/title.html" %}
+  {% include "components/links.html" %}
+</div>
+
+{% include "components/gay.html" %}
+
+<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/infra/website/crumbs/templates/keys.txt b/infra/website/crumbs/templates/keys.txt
new file mode 120000
index 000000000000..d2f262e6863a
--- /dev/null
+++ b/infra/website/crumbs/templates/keys.txt
@@ -0,0 +1 @@
+../../content/keys.txt
\ No newline at end of file
diff --git a/infra/website/crumbs/templates/page.html b/infra/website/crumbs/templates/page.html
new file mode 100644
index 000000000000..fca02b88496b
--- /dev/null
+++ b/infra/website/crumbs/templates/page.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% 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>
+
+</div>
+{% endblock %}