From a8fbbaabbdb02ad666333bbfb55461a1c4ca0337 Mon Sep 17 00:00:00 2001 From: Karthik Ganeshram Date: Wed, 17 Dec 2025 09:44:51 +0100 Subject: [PATCH] add blog author and date to posts Signed-off-by: Karthik Ganeshram --- static/css/styles.css | 72 ++++++++++++++++++++++++++++++----------- static/sass/styles.scss | 40 +++++++++++++++++++++++ templates/blog_post.hbs | 25 ++++++++++---- 3 files changed, 112 insertions(+), 25 deletions(-) diff --git a/static/css/styles.css b/static/css/styles.css index 41ea0837..8b642e98 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -577,6 +577,7 @@ footer { position: relative; z-index: 1400; /* top row of links */ + /* bottom row of smaller links */ } footer ul, footer p { @@ -610,9 +611,6 @@ footer.is-shallow { footer.is-shallow img { max-height: 2.5rem; } -footer { - /* bottom row of smaller links */ -} footer .footer-nav { border-top: 1px solid #D9DBE8; } @@ -763,6 +761,10 @@ body { color: #0D203F; } +.content { + /* Code Styling */ + /* highlight.js css */ +} .content h1, .content h2, .content h3 { font-weight: bold; display: block; @@ -1005,9 +1007,6 @@ body { margin: 0 0 -0.333rem; letter-spacing: -0.02em; } -.content { - /* Code Styling */ -} .content h1 code, .content h2 code, .content h3 code, @@ -1061,9 +1060,6 @@ body { .content .hljs { background-color: transparent !important; } -.content { - /* highlight.js css */ -} .content pre code.hljs { display: block; overflow-x: auto; @@ -1173,16 +1169,16 @@ html.dark-theme > body .content .pagination-link, html.dark-theme > body .conten Responsive Media Queries */ @media screen and (max-width: 1023px) { - #topbar.navbar .logo svg, - #topbar.navbar .logo span { - display: none !important; - } #topbar.navbar .logo { width: 3rem; height: 3rem; background: url(../image/avatar.png) no-repeat 0 0; background-size: contain; } + #topbar.navbar .logo svg, + #topbar.navbar .logo span { + display: none !important; + } #topbar.navbar .logo-project { margin-left: 0.5rem; } @@ -2193,6 +2189,7 @@ html.dark-theme .external { #topbar.navbar { display: flex; align-items: center; + /* Show the dropdown menu on hover */ } #topbar.navbar.is-wide { padding-left: 0 !important; @@ -2423,9 +2420,6 @@ html.dark-theme .external { #topbar.navbar .dropdown-content :first-child { display: none; } -#topbar.navbar { - /* Show the dropdown menu on hover */ -} #topbar.navbar .dropdown:hover .dropdown-content { display: block; } @@ -4435,13 +4429,13 @@ html.dark-theme .changelog-item-tags span { font-size: 1.25rem; padding: 0 !important; } + .documentation .changelog-header { + padding-bottom: 2rem; + } .documentation .changelog-header h1 { margin: 0 0 1.5rem !important; padding-bottom: 0.5rem !important; } - .documentation .changelog-header { - padding-bottom: 2rem; - } .documentation .changelog-content { padding-left: 3rem !important; } @@ -4543,6 +4537,46 @@ html.dark-theme .changelog-item-tags span { color: rgb(139.5576923077, 81.1730769231, 221.8269230769); } +.blog-title::after { + content: none !important; + display: none !important; +} + +.blog-title { + margin-bottom: 0.5rem; + padding-bottom: 0 !important; +} + +.blog-meta-wrapper { + display: inline-block; + padding-bottom: 1.25rem; + margin-bottom: 2rem; + border-bottom: 3px solid #A87CE6; + min-width: 160px; +} + +.blog-meta-author { + color: #A87CE6; + font-weight: 500; + line-height: 1.2; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.by-label { + color: #213762; + font-weight: 400; + margin-right: 4px; +} + +.date { + font-size: 0.85rem !important; + color: #213762; + letter-spacing: 0.125em; + text-transform: uppercase; + font-family: "Work Sans", Europa, Avenir, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; +} + /* Dark theme for blog listing */ html.dark-theme .blog-post-preview { border-bottom-color: rgba(255, 255, 255, 0.1); diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 5ec42870..4b468ea1 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1079,6 +1079,46 @@ html.dark-theme { } } +.blog-title::after { + content: none !important; + display: none !important; +} + +.blog-title { + margin-bottom: 0.5rem; + padding-bottom: 0 !important; +} + +.blog-meta-wrapper { + display: inline-block; + padding-bottom: 1.25rem; + margin-bottom: 2rem; + border-bottom: 3px solid $lavenderfloral; + min-width: 160px; +} + +.blog-meta-author { + color: $lavenderfloral; + font-weight: 500; + line-height: 1.2; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.by-label { + color: $darkspace; + font-weight: 400; + margin-right: 4px; +} + +.date { + font-size: 0.85rem !important; + color: $darkspace; + letter-spacing: 0.125em; + text-transform: uppercase; + font-family: $work; +} + /* Dark theme for blog listing */ html.dark-theme { .blog-post-preview { diff --git a/templates/blog_post.hbs b/templates/blog_post.hbs index 40d336c0..21ec7a35 100644 --- a/templates/blog_post.hbs +++ b/templates/blog_post.hbs @@ -6,11 +6,23 @@
-

{{{page.head.title}}}

- {{! Since this is HTML, we use the triple-curly }} - {{{page.body}}} - {{! Remove the `!` on the line below to see how to call a Rhai script }} - {{! echo "world" }} +

{{{page.head.title}}}

+ +
+ {{#if this.page.head.extra.author}} +
+ By {{page.head.extra.author}} +
+ {{/if}} + + {{#if this.page.head.date}} +
{{date_format "%B %d, %Y" this.page.head.date}}
+ {{/if}} +
+ +
+ {{{page.body}}} +
{{> content_footer }} @@ -24,4 +36,5 @@ {{> content_bottom }} - + + \ No newline at end of file