parent
de036f830d
commit
1990089079
GPG Key ID:
F972AEEA2887D547
@ -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); } |
||||
} |
||||
@ -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> |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
@ -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> |
||||
@ -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"> ▁</span> |
||||
{% if title_type == 'title' %} |
||||
</h1> |
||||
{% endif %} |
||||
</div> |
||||
@ -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 %} |
||||
|
||||
|
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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; |
||||
} |
||||
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -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 %} |
||||
@ -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> |
||||
@ -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 %} |
||||
@ -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> |
||||
@ -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"> ▁</span> |
||||
</h1> |
||||
</div> |
||||
@ -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 %} |
||||
@ -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 %} |
||||
|
||||
|
||||
@ -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 %} |
||||
Loading…
Reference in new issue