feat: add html templates
Diff
templates/deadjournal/index.html.template | 66 ++++-
templates/deadjournal/partials/about.html.template | 3 +-
templates/deadjournal/partials/entry.html.template | 26 ++-
templates/deadjournal/partials/footer.md | 9 +-
templates/deadjournal/partials/generator-info.md | 1 +-
templates/deadjournal/partials/links.md | 1 +-
templates/deadjournal/scss/_config.scss | 23 +-
templates/deadjournal/scss/_stylesheet.scss | 293 ++++++++++++++++++-
templates/deadjournal/scss/colorschemes/_default.scss | 30 ++-
templates/deadjournal/scss/toast/_grid.scss | 302 +++++++++++++++++++-
templates/shared/rss_feed.xml.template | 32 ++-
11 files changed, 786 insertions(+)
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="{{ config.language }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="{{ config.author }}">
<meta name="description" content="{{ config.description }}">
<meta name="generator" content="LiveJrnl">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/stylesheet.min.css">
<title>{{ config.title }}</title>
</head>
<body>
<div class="container">
<div class="grid">
<div class="grid__col grid__col--2-of-5 grid__col--centered">
<!-- About -->
<div class="section about" id="top">
<div class="section-header section-title section-caption about-section-title">
<div class="grid__col grid__col--6-of-12"><h1>{{ config.title }}</h1></div>
<div class="grid__col grid__col--6-of-12 top-navigation meta-shift">
<nav>
{% markdown %}
{% include "partials/links.md" %}
{% endmarkdown %}
</nav>
</div>
</div>
<div class="section-body about-section-body">
{% include "partials/about.html.template" %}
</div>
<div class="about-footer footer">
<div class="grid__col grid__col--12-of-12">
[ <b>all post tags</b>|@none, {{ tags|sort|join(", ") }} ]
</div>
</div>
</div>
<!-- Entry List -->
<div class="section entries">
{% for entry in entries|reverse %}
{% set id = (entries|length - loop.index) + 1 %}
{% include "partials/entry.html.template" %}
{% endfor %}
</div>
<!-- Navigation -->
<div id="copyright" class=" grid__col grid__col--6-of-8 grid__col--centered bottom-navigation">
<div class="bottom-navigation-title">
<h2>The End</h2>
</div>
<div class="bottom-navigation-content">
{% markdown %}
{% include "partials/footer.md" %}
{% endmarkdown %}
</div>
<div class="bottom-navigation-footer footer">
{% markdown %}
{% include "partials/generator-info.md" %}
{% endmarkdown %}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
@@ -0,0 +1,3 @@
<p class="center strong">{{ config.title }}</p>
<p class="center">[ <strong>website|</strong><a rel="me" href="{{ config.author_link }}">My website</a> ]</p>
\ No newline at end of file
@@ -0,0 +1,26 @@
<article id="entry-{{ id }}">
<div class="section-header section-caption section-title">
<div class="grid__col grid__col--6-of-12"><h2>{{ entry.title }}</h2></div>
{% set edate = " ".join([entry.date, entry.time]) %}
<div class="grid__col grid__col--6-of-12 entry-meta meta-shift">[{{ edate|datetime('%d %b %Y|<strong>%H:%M</strong>') }}]</div>
</div>
<div class="section-body entry-body">
{% if entry.body|length %}
{% markdown %}
{{ entry.body }}
{% endmarkdown %}
{% else %}
<p class="shadow"><i>This entry has no content.</i></p>
{% endif %}
</div>
<div class="entry-footer footer">
<div class="grid__col grid__col--9-of-12">
{% set etag = "@none" %}
{% if entry.tags|length > 0 %}
{% set etag = entry.tags|join(", ") %}
{% endif %}
[ <b>tags</b>|{{ etag }} ]
</div>
<div class="grid__col grid__col--3-of-12 entry-id meta-shift">[ <a href="#entry-{{ id }}">#{{ id }}</a> ]</div>
</div>
</article>
\ No newline at end of file
@@ -0,0 +1,9 @@
There are no more posts.
[ **[back to the top](#top)** ]
---
<small>Post content is ©{% now 'Europe/Amsterdam', '%Y' %} <a rel="me" href="{{ config.author_link }}">{{ config.author }}</a>.</small>
<small>Verbatim copying and redistribution of this entire page are permitted provided this notice is preserved.</small>
@@ -0,0 +1 @@
Generated by [LiveJrnl](https://codeberg.org/berrysweet/livejrnl) on {% now 'Europe/Amsterdam', '%a, %d %b %Y %H:%M:%S %z' %}
\ No newline at end of file
@@ -0,0 +1 @@
[ **links|**[first entry](#entry-1) :: [rss](./feed.xml) :: [copyright](#copyright) ]
\ No newline at end of file
@@ -0,0 +1,23 @@
@import 'colorschemes/_default';
$page-margin: 42px;
$line-height: 1.3em;
$emoji-line-height: 1.6em;
$font-stack: Verdana, "Open Sans", sans-serif;
$base-font-size: 0.8333em;
$header-font-size: 1em;
$alt-font-size: 0.8em;
$section-gap: 16px;
$section-header-padding: 4px;
$section-body-padding: 4px 6px;
$section-border-width: 2px;
$entry-footer-padding: 4px;
$navigation-padding: 4px;
$navigation-content-padding: 0px;
$navigation-content-margin: 0px;
$generation-info-size: 0.8em;
$footer-border: 2px 0px 1px 0px;
@@ -0,0 +1,293 @@
@import 'toast/_grid';
@import '_config';
body {
background-color: $background-color;
@if variable-exists(background-image) {
background-image: $background-image;
background-repeat: repeat;
background-attachment: fixed;
}
color: $primary-color;
font-family: $font-stack;
font-size: $base-font-size;
line-height: $line-height;
}
hr {
color: $background-color;
border-color: $background-color;
border-top: 1px solid $background-color;
border-bottom: 1px solid $background-color;
margin: 0px;
}
a {
text-decoration: none;
color: $link-color;
&:hover {
text-decoration: underline;
color: $link-hover-color;
}
&:visited {
color: $link-visited-color;
&:hover {
color: $link-hover-color;
}
}
&:active {
color: $link-active-color;
}
}
.task-list {
padding-left: 0px;
list-style-type: none;
}
.shadow {
color: $background-color;
}
article {
@extend .section
}
.section {
border: $section-border-width;
border-style: solid;
border-color: $section-border-color;
margin-bottom: $section-gap;
}
.section-header {
background-color: $section-header-background;
h2 {
font-size: $header-font-size;
font-weight: normal;
margin: 0px;
}
}
.section-caption {
color: $alt-color;
}
.section-title {
padding: $section-header-padding;
}
.section-body {
padding: $section-body-padding;
}
.about {
margin-top: $page-margin;
margin-right: $section-border-width;
margin-left: $section-border-width;
}
.entries {
border-color: transparent;
}
.about-section-title {
h1 {
font-size: $header-font-size;
margin: 0px;
}
}
.about-section-body {
background-color: $about-section-body;
hr {
color: $hr-color;
border-color: $hr-color;
border-top: 1px solid $hr-color;
border-bottom: 1px solid $hr-color;
}
}
.about-footer {
background: $section-footer-background;
color: $section-footer-color;
padding: $entry-footer-padding;
font-size: $alt-font-size;
}
.footer {
border-width: $footer-border;
border-style: solid;
border-color: $footer-border-color;
}
.strong {
font-weight: bold;
}
.entry-body {
background-color: $section-body-background;
pre {
white-space: pre-wrap;
overflow: auto;
background-color: $section-body-background-alt;
color: $primary-color;
border: 1px solid $background-color;
padding: 8px;
}
p {
code {
background-color: $section-body-background-alt;
color: $primary-color;
border: 1px solid $background-color;
display: inline-block;
padding: 0px 2px;
}
}
table {
border: $section-border-width / 2 solid $background-color;
border-spacing: 0px;
width: 100%;
th {
background-color: $section-footer-background;
color: $primary-color;
}
td {
padding: $section-body-padding;
}
}
}
.entry-meta {
text-align: right;
font-size: $alt-font-size;
}
.entry-footer {
background: $section-footer-background;
color: $section-footer-color;
padding: $entry-footer-padding;
font-size: $alt-font-size;
}
.entry-id {
text-align: right;
}
.top-navigation {
text-align: right;
font-size: $alt-font-size;
font-weight: normal;
nav
{
p {
margin: 0px;
}
}
a {
text-decoration: none;
color: $alt-color;
&:hover {
text-decoration: underline;
color: $alt-color;
}
&:visited {
color: $alt-color;
&:hover {
color: $alt-color;
}
}
&:active {
color: $link-active-color;
}
}
}
.bottom-navigation {
background-color: $section-body-background-alt;
border: $section-border-width solid $section-border-color;
text-align: center;
font-size: $alt-font-size;
p {
margin: 0px;
}
margin-bottom: $section-gap;
}
.bottom-navigation-title {
color: $alt-color;
background-color: $section-header-background;
h2 {
font-size: $header-font-size;
margin: 0px;
}
}
.bottom-navigation-content {
padding: $navigation-padding;
margin: $navigation-content-margin;
p {
margin: $navigation-content-padding;
}
hr {
margin-top: 8px;
}
}
.bottom-navigation-footer {
background: $section-footer-background;
color: $section-footer-color;
padding: $entry-footer-padding;
}
.emojione {
display: inline;
height: $emoji-line-height;
vertical-align: text-bottom;
}
.center {
text-align: center;
}
.blink {
animation: blink 1s ease-in-out infinite alternate;
color: $blink-color;
}
@keyframes blink { to { opacity: 0; } }
.meta-shift {
@media (max-width: $toast-breakpoint-medium) {
text-align: left;
}
@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
&[class*="#{$toast-grid-column-namespace}--m-"] {
text-align: right;
}
}
}
\ No newline at end of file
@@ -0,0 +1,30 @@
$color0: #C0C0FF;
$color1: #000000;
$color2: #6666CC;
$color3: #FFFFFF;
$color4: #EEEEFF;
$color5: #000050;
$color6: #FF00C0;
$background-color: $color0;
$hr-color: $color0;
$primary-color: $color1;
$alt-color: $color3;
$section-header-background: $color2;
$section-body-background: $color3;
$section-body-background-alt: $color4;
$section-border-color: $color2;
$section-footer-background: $color4;
$section-footer-color: $color0;
$about-section-body: $color4;
$link-color: $color5;
$link-visited-color: $color5;
$link-hover-color: $color5;
$link-active-color: $color6;
$blink-color: $color5;
$footer-border-color: transparent;
\ No newline at end of file
@@ -0,0 +1,302 @@
$TOAST-GRID
An insane grid.
You'd be mad to use it.
Usage
=====
Assuming default values:
<div class="grid">
<div class="grid__col grid__col--1-of-2">
A half-width column.
</div>cd
<div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
A quarter, pulled left by its own width. You get this, right?
</div>
</div>
Customisation
=============
$toast-grid-namespace and $toast-grid-column-namespace
adjusts the class names for the grid. With
default values, grid wrappers have a class
of '.grid' and columns '.grid__col'.
$toast-col-groups(n) adjusts column divisions.
For example, $toast-col-groups(12) will produce
a 12-column grid. $col-groups(3,6,8)
will produce a 3-, 6-, and 8-column grid.
$toast-gutter-width is—you guessed it—the gutter
width. Accepts any unit.
That's it. Have fun.
\*-----------------------------------*/
$toast-grid-namespace: "grid" !default;
$toast-grid-column-namespace: "grid__col" !default;
$toast-col-groups: (2, 3, 4, 5, 6, 8, 12) !default;
$toast-gutter-width: 0px !default;
$toast-breakpoint-medium: 700px !default;
$toast-breakpoint-small: 480px !default;
$toast-pushes: true !default;
$toast-pulls: true !default;
.#{$toast-grid-namespace} {
list-style: none;
margin-left: -$toast-gutter-width;
}
%span-all { width: percentage(1/1); }
%one-half { width: percentage(1/2); }
%one-third { width: percentage(1/3); }
%two-thirds { width: percentage(2/3); }
%one-quarter { width: percentage(1/4); }
%two-quarters { width: percentage(2/4); }
%three-quarters { width: percentage(3/4); }
%push-span-all { margin-left: percentage(1/1); }
%push-one-half { margin-left: percentage(1/2); }
%push-one-third { margin-left: percentage(1/3); }
%push-two-thirds { margin-left: percentage(2/3); }
%push-one-quarter { margin-left: percentage(1/4); }
%push-two-quarters { margin-left: percentage(2/4); }
%push-three-quarters { margin-left: percentage(3/4); }
%pull-span-all { margin-left: -(percentage(1/1)); }
%pull-one-half { margin-left: -(percentage(1/2)); }
%pull-one-third { margin-left: -(percentage(1/3)); }
%pull-two-thirds { margin-left: -(percentage(2/3)); }
%pull-one-quarter { margin-left: -(percentage(1/4)); }
%pull-two-quarters { margin-left: -(percentage(2/4)); }
%pull-three-quarters { margin-left: -(percentage(3/4)); }
@each $group in $toast-col-groups {
@for $i from 1 through $group {
.#{$toast-grid-column-namespace}--#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %three-quarters;
} @else {
width: percentage($i/$group);
}
}
@if ($toast-pushes) {
.#{$toast-grid-column-namespace}--push-#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %push-span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %push-one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %push-one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %push-two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %push-one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %push-two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %push-three-quarters;
} @else {
margin-left: percentage($i/$group);
}
}
}
@if ($toast-pulls) {
.#{$toast-grid-column-namespace}--pull-#{$i}-of-#{$group} {
@if percentage($i/$group) == percentage(1/1) {
@extend %pull-span-all;
} @else if percentage($i/$group) == percentage(1/2) {
@extend %pull-one-half;
} @else if percentage($i/$group) == percentage(1/3) {
@extend %pull-one-third;
} @else if percentage($i/$group) == percentage(2/3) {
@extend %pull-two-thirds;
} @else if percentage($i/$group) == percentage(1/4) {
@extend %pull-one-quarter;
} @else if percentage($i/$group) == percentage(2/4) {
@extend %pull-two-quarters;
} @else if percentage($i/$group) == percentage(3/4) {
@extend %pull-three-quarters;
} @else {
margin-left: -(percentage($i/$group));
}
}
} }
}
.#{$toast-grid-column-namespace} {
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: $toast-gutter-width;
vertical-align: top;
@media (max-width: $toast-breakpoint-medium) {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}
@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
&[class*="#{$toast-grid-column-namespace}--m-"] {
display: inline-block;
margin-right: -.24em;
}
&.#{$toast-grid-column-namespace}--m-1-of-2 {
width: percentage(1/2);
}
&.#{$toast-grid-column-namespace}--m-1-of-3 {
width: percentage(1/3);
}
&.#{$toast-grid-column-namespace}--m-2-of-3 {
width: percentage(2/3);
}
&.#{$toast-grid-column-namespace}--m-1-of-4 {
width: percentage(1/4);
}
&.#{$toast-grid-column-namespace}--m-2-of-4 {
@extend .#{$toast-grid-column-namespace}--m-1-of-2;
}
&.#{$toast-grid-column-namespace}--m-3-of-4 {
width: percentage(3/4);
}
}
@media (max-width: $toast-breakpoint-small) {
&[class*="#{$toast-grid-column-namespace}--s-"] {
display: inline-block;
margin-right: -.24em;
}
&.#{$toast-grid-column-namespace}--s-1-of-2 {
width: percentage(1/2);
}
&.#{$toast-grid-column-namespace}--s-1-of-3 {
width: percentage(1/3);
}
&.#{$toast-grid-column-namespace}--s-2-of-3 {
width: percentage(2/3);
}
&.#{$toast-grid-column-namespace}--s-1-of-4 {
width: percentage(1/4);
}
&.#{$toast-grid-column-namespace}--s-2-of-4 {
@extend .#{$toast-grid-column-namespace}--s-1-of-2;
}
&.#{$toast-grid-column-namespace}--s-3-of-4 {
width: percentage(3/4);
}
}
}
.#{$toast-grid-column-namespace}--centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.#{$toast-grid-column-namespace}--d-first {
float: left;
}
.#{$toast-grid-column-namespace}--d-last {
float: right;
}
.#{$toast-grid-namespace}--no-gutter {
margin-left: 0;
width: 100%;
.#{$toast-grid-column-namespace} {
padding-left: 0;
}
.#{$toast-grid-column-namespace}--span-all {
margin-left: 0;
width: 100%;
}
}
.#{$toast-grid-column-namespace}--ab {
vertical-align: bottom;
}
.#{$toast-grid-column-namespace}--am {
vertical-align: middle;
}
@@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>{{ config.title }}</title>
<link>{{ config.base_url }}</link>
<description>{{ config.description }}</description>
<pubDate>{% now 'Europe/Amsterdam', '%a, %d %b %Y %H:%M:%S %z' %}</pubDate>
<language>{{ config.rss_language }}</language>
<lastBuildDate>{% now 'Europe/Amsterdam', '%a, %d %b %Y %H:%M:%S %z' %}</lastBuildDate>
<copyright>All entries are copyright {% now 'Europe/Amsterdam', '%Y' %} {{ config.author }}. Verbatim copying and redistribution of this entire feed is permitted provided this notice is preserved.</copyright>
<atom:link href="{{ config.base_url }}/feed.xml" rel="self" type="application/rss+xml" />
{% set entry_list = entries %}
{% if config.cutoff > 0 %}
{% set entry_list = entries[-config.cutoff:] %}
{% endif %}
{% for entry in entry_list|reverse %}
{% set id = (entries|length - loop.index) + 1 %}
<item>
<title>{{ entry.title|e }}</title>
<link>{{ config.base_url }}#entry-{{ id }}</link>
<guid>{{ config.base_url }}#entry-{{ id }}</guid>
{% set pubdate = " ".join([entry.date, entry.time]) %}
<pubDate>{{ pubdate|datetime }}</pubDate>
{% for tag in entry.tags|sort %}
<category>{{ tag|tagstrip|capitalize }}></category>
{% endfor %}
<description>{{ entry.body|md2html|e }}</description>
</item>
{% endfor %}
</channel>
</rss>
\ No newline at end of file
