diff --git a/src/scribeengine/themes/blogger/info.json b/src/scribeengine/themes/blogger/info.json new file mode 100644 index 0000000..9fdb031 --- /dev/null +++ b/src/scribeengine/themes/blogger/info.json @@ -0,0 +1,13 @@ +{ + "application": "scribeengine", + "identifier": "blogger", + "name": "Blogger", + "author": "Raoul Snyman", + "description": "The default theme that comes with ScribeEngine, a derivative of the \"Blog\" template from the Bootstrap 5 examples", + "website": "https://scribeengine.org", + "license": "MIT", + "license_url": "https://opensource.org/license/mit", + "preview": "preview.png", + "doctype": "html5", + "options": {} +} diff --git a/src/scribeengine/themes/blogger/static/css/blogger.css b/src/scribeengine/themes/blogger/static/css/blogger.css new file mode 100644 index 0000000..1a1910c --- /dev/null +++ b/src/scribeengine/themes/blogger/static/css/blogger.css @@ -0,0 +1,116 @@ +.bd-placeholder-img { + font-size: 1.125rem; + text-anchor: middle; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +@media (min-width: 768px) { + .bd-placeholder-img-lg { + font-size: 3.5rem; + } +} + +.b-example-divider { + width: 100%; + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.b-example-vr { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; +} + +.bd-mode-toggle { + z-index: 1500; +} + +.bd-mode-toggle .dropdown-menu .active .bi { + display: block !important; +} + +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ + +.blog-header-logo { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; + font-size: 2.25rem; +} + +.blog-header-logo:hover { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; +} + +.flex-auto { + flex: 0 0 auto; +} + +.h-250 { height: 250px; } +@media (min-width: 768px) { + .h-md-250 { height: 250px; } +} + +/* Pagination */ +.blog-pagination { + margin-bottom: 4rem; +} + +/* + * Blog posts + */ +.blog-post { + margin-bottom: 4rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} diff --git a/src/scribeengine/themes/blogger/templates/base.html b/src/scribeengine/themes/blogger/templates/base.html new file mode 100644 index 0000000..ac80525 --- /dev/null +++ b/src/scribeengine/themes/blogger/templates/base.html @@ -0,0 +1,60 @@ + + + + + + + + {{ page_title }} + + + + + + +
+
+
+
+ Subscribe +
+
+ +
+
+ + Search + + Sign up +
+
+
+
+ +
+
+
+ {% block main %}{% endblock %} +
+ + + + diff --git a/src/scribeengine/themes/blogger/templates/home.html b/src/scribeengine/themes/blogger/templates/home.html new file mode 100644 index 0000000..28bdd13 --- /dev/null +++ b/src/scribeengine/themes/blogger/templates/home.html @@ -0,0 +1,245 @@ +{% extends theme('base.html') %} +{% block main %} +
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

Featured post

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ PlaceholderThumbnail +
+
+
+
+
+
+ Design +

Post title

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ + Continue reading + + +
+
+ PlaceholderThumbnail +
+
+
+
+ +
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2021 by Mark

+ +

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Blockquotes

+

This is an example blockquote in action:

+
+

Quoted text goes here.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example lists

+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

And this is an ordered list:

+
    +
  1. First list item
    2. +
  2. Second list item with a longer description
    3. +
  3. Third list item to close it out
    4. +
+

And this is a definition list:

+
+
HyperText Markup Language (HTML)
+
The language used to describe and define the content of a Web page
+
Cascading Style Sheets (CSS)
+
Used to describe the appearance of Web content
+
JavaScript (JS)
+
The programming language used to build advanced Web sites and applications
+
+

Inline HTML elements

+

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

+
    +
  • To bold text, use <strong>.
    • +
  • To italicize text, use <em>.
    • +
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
    • +
  • Citations, like — Mark Otto, should use <cite>.
    • +
  • Deleted text should use <del> and inserted text should use <ins>.
    • +
  • Superscript text uses <sup> and subscript text uses <sub>.
    • +
+

Most of these elements are styled by browsers with few modifications on our part.

+

Heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Sub-heading

+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+ 
Example code block
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

Another blog post

+

December 23, 2020 by Jacob

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
+

Longer quote goes here, maybe with some emphasized text in the middle of it.

+
+

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+

Example table

+

And don't forget about tables in these posts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUpvotesDownvotes
Alice1011
Bob43
Charlie79
Totals2123
+ +

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ +
+

New feature

+

December 14, 2020 by Chris

+ +

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

+
    +
  • First list item
    • +
  • Second list item with a longer description
    • +
  • Third list item to close it out
    • +
+

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

+
+ + + +
+ +
+
+
+

About

+

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

+
+ +
+

Recent posts

+ +
+ +
+

Archives

+
    +
  1. March 2021
    2. +
  2. February 2021
    3. +
  3. January 2021
    4. +
  4. December 2020
    5. +
  5. November 2020
    6. +
  6. October 2020
    7. +
  7. September 2020
    8. +
  8. August 2020
    9. +
  9. July 2020
    10. +
  10. June 2020
    11. +
  11. May 2020
    12. +
  12. April 2020
    13. +
+
+ +
+

Elsewhere

+
    +
  1. GitHub
    2. +
  2. Twitter
    3. +
  3. Facebook
    4. +
+
+
+
+
+{% endblock %}