From d0b36f11bd68eb21f7c069179e62035e47253c47 Mon Sep 17 00:00:00 2001
From: Caio Lente <7017340+clente@users.noreply.github.com>
Date: Mon, 4 Mar 2024 17:16:00 -0300
Subject: Choose between original and herman styles
---
README.md | 11 +++
assets/original.css | 178 +++++++++++++++++++++++++++++++++++++++++++
assets/style.css | 178 -------------------------------------------
exampleSite/hugo.toml | 6 ++
images/social_card.webp | Bin 35348 -> 19920 bytes
layouts/_default/baseof.html | 2 +-
6 files changed, 196 insertions(+), 179 deletions(-)
create mode 100644 assets/original.css
delete mode 100644 assets/style.css
diff --git a/README.md b/README.md
index 701d677..14755bf 100644
--- a/README.md
+++ b/README.md
@@ -125,6 +125,11 @@ already implemented:
without inline styles (see `hugo.toml` for more information), it only load its
`syntax.css` if, and only if, a code block is actually present in the current
page.
+- Alternative "Herman" style (EXPERIMENTAL): if you want to check out a more
+ modern CSS style, you can change the `themeStyle` parameter to `"herman"` in
+ order to activate [Herman Martinus's](https://herman.bearblog.dev/) version of
+ the [Blogster Minimal](https://blogster-minimal.netlify.app/) theme for
+ [Astro](https://astro.build/).
- Dynamic social card generation (EXPERIMENTAL): if you don't add preview images
to a post, this template will generate one based on the title. You can see an
example below.
@@ -203,6 +208,12 @@ enableRobotsTXT = true
# have the theme simply not show any link
hideUntranslated = false
+ # (EXPERIMENTAL) This theme has two options for its CSS styles: "original" and
+ # "herman". The former is what you see on Bear Cub's demo (an optimized
+ # version of Hugo Bear Blog), while the latter has a more modern look based on
+ # Herman Martinus's version of the Blogster Minimal theme for Astro.
+ themeStyle = "original"
+
# (EXPERIMENTAL) This theme is capable of dynamically generating social cards
# for posts that don't have `images` defined in their front matter; By setting
# `generateSocialCard` to false, you can prevent this behavior. For more
diff --git a/assets/original.css b/assets/original.css
new file mode 100644
index 0000000..3492237
--- /dev/null
+++ b/assets/original.css
@@ -0,0 +1,178 @@
+body {
+ font-family: Verdana, sans-serif;
+ margin: auto;
+ padding: 20px;
+ max-width: 720px;
+ text-align: left;
+ background-color: #1d1f27;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ line-height: 1.5;
+ color: #c9d1d9;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+ color: #eee;
+}
+
+a {
+ color: #8cc2dd;
+}
+
+.title {
+ text-decoration: none;
+ border: 0;
+}
+.title h1 {
+ font-size: 24px;
+ margin: 19.92px 0 19.92px 0;
+}
+
+.title span {
+ font-weight: 400;
+}
+
+nav a {
+ margin-right: 10px;
+}
+
+textarea {
+ background-color: #252525;
+ color: #ddd;
+ width: 100%;
+ font-size: 16px;
+}
+
+input {
+ background-color: #252525;
+ color: #ddd;
+ font-size: 16px;
+}
+
+content {
+ line-height: 1.6;
+}
+
+table {
+ width: 100%;
+}
+
+table,
+th,
+td {
+ border: 1px solid;
+ border-collapse: collapse;
+ border-color: #c9d1d9;
+ padding: 5px;
+}
+
+img {
+ max-width: 100%;
+}
+
+code {
+ padding: 2px 5px;
+ color: #f8f8f2;
+ background-color: #282a36;
+}
+
+pre code {
+ display: block;
+ padding: 20px;
+ white-space: pre-wrap;
+ font-size: 14px;
+ overflow-x: auto;
+}
+
+blockquote {
+ border-left: 1px solid #999;
+ color: #ccc;
+ padding-left: 20px;
+ font-style: italic;
+}
+
+footer {
+ padding: 25px;
+ text-align: center;
+}
+
+.helptext {
+ color: #aaa;
+ font-size: small;
+}
+
+.errorlist {
+ color: #eba613;
+ font-size: small;
+}
+
+/* blog posts */
+ul.blog-posts {
+ list-style-type: none;
+ padding: unset;
+}
+
+ul.blog-posts li {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+ul.blog-posts li span {
+ flex: 0 0 130px;
+}
+
+ul.blog-posts li a:visited {
+ color: #8b6fcb;
+}
+
+a.blog-tags {
+ line-height: 2;
+ margin-right: 12px;
+}
+
+h3.blog-filter {
+ margin-bottom: 0;
+}
+
+.disabled {
+ color: currentColor;
+ cursor: not-allowed;
+ opacity: 0.7;
+}
+
+p.byline {
+ font-style: italic;
+}
+
+/* "Skip to main content" link */
+.skip-link {
+ position: absolute;
+ top: 5;
+ transform: translateY(-600%);
+ transition: transform 0.5s;
+ background-color: #1d1f27;
+ padding: 6px;
+}
+
+.skip-link:focus {
+ transform: translateY(0%);
+}
+
+figure {
+ margin-inline-start: 0em;
+ margin-inline-end: 0em;
+}
+
+figcaption > p {
+ margin-block-start: 0px;
+ text-align: center;
+ font-style: italic;
+ color: #ccc;
+}
diff --git a/assets/style.css b/assets/style.css
deleted file mode 100644
index 3492237..0000000
--- a/assets/style.css
+++ /dev/null
@@ -1,178 +0,0 @@
-body {
- font-family: Verdana, sans-serif;
- margin: auto;
- padding: 20px;
- max-width: 720px;
- text-align: left;
- background-color: #1d1f27;
- word-wrap: break-word;
- overflow-wrap: break-word;
- line-height: 1.5;
- color: #c9d1d9;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
- color: #eee;
-}
-
-a {
- color: #8cc2dd;
-}
-
-.title {
- text-decoration: none;
- border: 0;
-}
-.title h1 {
- font-size: 24px;
- margin: 19.92px 0 19.92px 0;
-}
-
-.title span {
- font-weight: 400;
-}
-
-nav a {
- margin-right: 10px;
-}
-
-textarea {
- background-color: #252525;
- color: #ddd;
- width: 100%;
- font-size: 16px;
-}
-
-input {
- background-color: #252525;
- color: #ddd;
- font-size: 16px;
-}
-
-content {
- line-height: 1.6;
-}
-
-table {
- width: 100%;
-}
-
-table,
-th,
-td {
- border: 1px solid;
- border-collapse: collapse;
- border-color: #c9d1d9;
- padding: 5px;
-}
-
-img {
- max-width: 100%;
-}
-
-code {
- padding: 2px 5px;
- color: #f8f8f2;
- background-color: #282a36;
-}
-
-pre code {
- display: block;
- padding: 20px;
- white-space: pre-wrap;
- font-size: 14px;
- overflow-x: auto;
-}
-
-blockquote {
- border-left: 1px solid #999;
- color: #ccc;
- padding-left: 20px;
- font-style: italic;
-}
-
-footer {
- padding: 25px;
- text-align: center;
-}
-
-.helptext {
- color: #aaa;
- font-size: small;
-}
-
-.errorlist {
- color: #eba613;
- font-size: small;
-}
-
-/* blog posts */
-ul.blog-posts {
- list-style-type: none;
- padding: unset;
-}
-
-ul.blog-posts li {
- display: flex;
- margin-bottom: 10px;
-}
-
-ul.blog-posts li span {
- flex: 0 0 130px;
-}
-
-ul.blog-posts li a:visited {
- color: #8b6fcb;
-}
-
-a.blog-tags {
- line-height: 2;
- margin-right: 12px;
-}
-
-h3.blog-filter {
- margin-bottom: 0;
-}
-
-.disabled {
- color: currentColor;
- cursor: not-allowed;
- opacity: 0.7;
-}
-
-p.byline {
- font-style: italic;
-}
-
-/* "Skip to main content" link */
-.skip-link {
- position: absolute;
- top: 5;
- transform: translateY(-600%);
- transition: transform 0.5s;
- background-color: #1d1f27;
- padding: 6px;
-}
-
-.skip-link:focus {
- transform: translateY(0%);
-}
-
-figure {
- margin-inline-start: 0em;
- margin-inline-end: 0em;
-}
-
-figcaption > p {
- margin-block-start: 0px;
- text-align: center;
- font-style: italic;
- color: #ccc;
-}
diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
index 3c8b0d0..c037e60 100644
--- a/exampleSite/hugo.toml
+++ b/exampleSite/hugo.toml
@@ -63,6 +63,12 @@ enableRobotsTXT = true
# have the theme simply not show any link
hideUntranslated = false
+ # (EXPERIMENTAL) This theme has two options for its CSS styles: "original" and
+ # "herman". The former is what you see on Bear Cub's demo (an optimized
+ # version of Hugo Bear Blog), while the latter has a more modern look based on
+ # Herman Martinus's version of the Blogster Minimal theme for Astro.
+ themeStyle = "original"
+
# (EXPERIMENTAL) This theme is capable of dynamically generating social cards
# for posts that don't have `images` defined in their front matter; By setting
# `generateSocialCard` to false, you can prevent this behavior. For more
diff --git a/images/social_card.webp b/images/social_card.webp
index 43ae186..24bf927 100644
Binary files a/images/social_card.webp and b/images/social_card.webp differ
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 475d6f9..294749a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -11,7 +11,7 @@
{{- partial "seo_tags.html" . -}}
- {{ $style := resources.Get "style.css" | minify }}
+ {{ $style := print (default "original" .Site.Params.themeStyle) ".css" | resources.Get | minify }}
{{ if (.Page.Store.Get "hasCodeBlock") }}
--
cgit v1.2.3