From 9b10f3fefcffcc40f793d09845258a968ec75212 Mon Sep 17 00:00:00 2001 From: holly sparkles Date: Sun, 24 Sep 2023 16:34:45 +0200 Subject: [PATCH] feat: add html templates --- 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(+) create mode 100644 templates/deadjournal/index.html.template create mode 100644 templates/deadjournal/partials/about.html.template create mode 100644 templates/deadjournal/partials/entry.html.template create mode 100644 templates/deadjournal/partials/footer.md create mode 100644 templates/deadjournal/partials/generator-info.md create mode 100644 templates/deadjournal/partials/links.md create mode 100644 templates/deadjournal/scss/_config.scss create mode 100644 templates/deadjournal/scss/_stylesheet.scss create mode 100644 templates/deadjournal/scss/colorschemes/_default.scss create mode 100644 templates/deadjournal/scss/toast/_grid.scss create mode 100644 templates/shared/rss_feed.xml.template diff --git a/templates/deadjournal/index.html.template b/templates/deadjournal/index.html.template new file mode 100644 index 0000000..0f36c22 --- /dev/null +++ b/templates/deadjournal/index.html.template @@ -0,0 +1,66 @@ + + + + + + + + + + {{ config.title }} + + +

+ +

+ {% include "partials/about.html.template" %} +

+ +

+ + +

+ {% for entry in entries|reverse %} + {% set id = (entries|length - loop.index) + 1 %} + {% include "partials/entry.html.template" %} + {% endfor %} +

+ + + +

+ + \ No newline at end of file diff --git a/templates/deadjournal/partials/about.html.template b/templates/deadjournal/partials/about.html.template new file mode 100644 index 0000000..68168a5 --- /dev/null +++ b/templates/deadjournal/partials/about.html.template @@ -0,0 +1,3 @@ +

+ +

[ website|My website ]

\ No newline at end of file diff --git a/templates/deadjournal/partials/entry.html.template b/templates/deadjournal/partials/entry.html.template new file mode 100644 index 0000000..a9a504a --- /dev/null +++ b/templates/deadjournal/partials/entry.html.template @@ -0,0 +1,26 @@ +

+ {% set edate = " ".join([entry.date, entry.time]) %} +

[{{ edate|datetime('%d %b %Y|%H:%M') }}]

+ {% if entry.body|length %} +{% markdown %} +{{ entry.body }} +{% endmarkdown %} + {% else %} +

This entry has no content.

+ {% endif %} +

+ {% set etag = "@none" %} + {% if entry.tags|length > 0 %} + {% set etag = entry.tags|join(", ") %} + {% endif %} + [ tags|{{ etag }} ] +

[ #{{ id }} ]

\ No newline at end of file diff --git a/templates/deadjournal/partials/footer.md b/templates/deadjournal/partials/footer.md new file mode 100644 index 0000000..99bf29d --- /dev/null +++ b/templates/deadjournal/partials/footer.md @@ -0,0 +1,9 @@ +There are no more posts. + +[ **[back to the top](#top)** ] + +--- + +Post content is ©{% now 'Europe/Amsterdam', '%Y' %} {{ config.author }}. + +Verbatim copying and redistribution of this entire page are permitted provided this notice is preserved. diff --git a/templates/deadjournal/partials/generator-info.md b/templates/deadjournal/partials/generator-info.md new file mode 100644 index 0000000..fd5cb0f --- /dev/null +++ b/templates/deadjournal/partials/generator-info.md @@ -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 diff --git a/templates/deadjournal/partials/links.md b/templates/deadjournal/partials/links.md new file mode 100644 index 0000000..c9c61bb --- /dev/null +++ b/templates/deadjournal/partials/links.md @@ -0,0 +1 @@ +[ **links|**[first entry](#entry-1) :: [rss](./feed.xml) :: [copyright](#copyright) ] \ No newline at end of file diff --git a/templates/deadjournal/scss/_config.scss b/templates/deadjournal/scss/_config.scss new file mode 100644 index 0000000..c168002 --- /dev/null +++ b/templates/deadjournal/scss/_config.scss @@ -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; diff --git a/templates/deadjournal/scss/_stylesheet.scss b/templates/deadjournal/scss/_stylesheet.scss new file mode 100644 index 0000000..3b2a800 --- /dev/null +++ b/templates/deadjournal/scss/_stylesheet.scss @@ -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 diff --git a/templates/deadjournal/scss/colorschemes/_default.scss b/templates/deadjournal/scss/colorschemes/_default.scss new file mode 100644 index 0000000..7ad1168 --- /dev/null +++ b/templates/deadjournal/scss/colorschemes/_default.scss @@ -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 diff --git a/templates/deadjournal/scss/toast/_grid.scss b/templates/deadjournal/scss/toast/_grid.scss new file mode 100644 index 0000000..32a1383 --- /dev/null +++ b/templates/deadjournal/scss/toast/_grid.scss @@ -0,0 +1,302 @@ +/*-----------------------------------*\ + + $TOAST-GRID + + An insane grid. + You'd be mad to use it. + + Usage + ===== + + Assuming default values: + +

+ A half-width column. +

cd +

+ A quarter, pulled left by its own width. You get this, right? +

+ + + 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. + +\*-----------------------------------*/ + +// Namespaces +// This stops me from being overzealous with enforcing classes +$toast-grid-namespace: "grid" !default; +$toast-grid-column-namespace: "grid__col" !default; + +// $col-groups are the column groups you want +// For example, $col-groups: (3, 4, 5) will output: +// .grid__col--n-of-3, .grid__col--n-of-4, [...] +$toast-col-groups: (2, 3, 4, 5, 6, 8, 12) !default; + +// Gutter width +$toast-gutter-width: 0px !default; + +// Breakpoints +$toast-breakpoint-medium: 700px !default; +$toast-breakpoint-small: 480px !default; + +// Pushes and pulls +$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)); } + +// For each of our column groups... +@each $group in $toast-col-groups { + + // For each column width from 1 to the column group... + @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); + + } + } + } // end pushes + + @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)); + + } + } + } // end pulls + } // end @for + +} // end @each + +// All direct descendents of .grid get treated the same way. +// This might be overkill for some, but it's a time-saver for me. +.#{$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); + } + } +} + +// Centers the column in the grid and clears the row of all other columns +.#{$toast-grid-column-namespace}--centered { + display: block; + margin-left: auto; + margin-right: auto; +} + + +// Displays the column as the first in its row +.#{$toast-grid-column-namespace}--d-first { + float: left; +} + +// Displays the column as the last in its row +.#{$toast-grid-column-namespace}--d-last { + float: right; +} + +// Removes gutters from the columns +.#{$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%; + } +} + +// Align column to the bottom. +.#{$toast-grid-column-namespace}--ab { + vertical-align: bottom; +} + +// Align column to the middle. +.#{$toast-grid-column-namespace}--am { + vertical-align: middle; +} diff --git a/templates/shared/rss_feed.xml.template b/templates/shared/rss_feed.xml.template new file mode 100644 index 0000000..92a806f --- /dev/null +++ b/templates/shared/rss_feed.xml.template @@ -0,0 +1,32 @@ + + + + {{ config.title }} + {{ config.base_url }} + {{ config.description }} + {% now 'Europe/Amsterdam', '%a, %d %b %Y %H:%M:%S %z' %} + {{ config.rss_language }} + {% now 'Europe/Amsterdam', '%a, %d %b %Y %H:%M:%S %z' %} + 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. + +{% 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 %} + + {{ entry.title|e }} + {{ config.base_url }}#entry-{{ id }} + {{ config.base_url }}#entry-{{ id }} +{% set pubdate = " ".join([entry.date, entry.time]) %} + {{ pubdate|datetime }} +{% for tag in entry.tags|sort %} + {{ tag|tagstrip|capitalize }}> +{% endfor %} + {{ entry.body|md2html|e }} + +{% endfor %} + + \ No newline at end of file -- libgit2 1.7.2

{{ config.title }}

The End

{{ entry.title }}