From 3b17c1f479ae15d53d1ae25b5fd7a029c4776b82 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 20 Jul 2025 19:51:11 +1000 Subject: [PATCH 1/2] Add CSS and HTML for blog post styling, remove unused flexbox elements --- static/main.css | 24 +++++++++++++++++------- templates/base.html | 2 +- templates/index.html | 2 +- templates/page.html | 15 ++++++++++++--- 4 files changed, 31 insertions(+), 12 deletions(-) diff --git a/static/main.css b/static/main.css index c893f2c..99d93f0 100644 --- a/static/main.css +++ b/static/main.css @@ -4,11 +4,10 @@ /* Magic fix which forces outer most element to full view size for background scaling */ html { - min-height: 100%; - min-width: 100%; + height: 100%; + width: 100%; display: flex; justify-content: center; - align-items: column; } body { @@ -21,8 +20,8 @@ body { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - /* Fancy background CSS lives here */ - background: linear-gradient(to bottom right, rgba(0,0,0, 1) 2%, rgba(65,15,75, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,80, 1) 60%, rgba(0,0,0, 1) 98%); + /* Fancy background CSS colouring lives here */ + background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(65,15,75, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,80, 1) 60%, rgba(0,0,0, 1)); } li { @@ -82,6 +81,13 @@ a:hover { text-align: center; } +#blog-page-title { + padding-top: 1.5rem; + padding-bottom: 1rem; + letter-spacing: -2px; + text-align: center; +} + .dotted-border { border-bottom: #e4e4e4 8px dotted; width: 100%; @@ -92,11 +98,15 @@ a:hover { text-align: center; } -.blog-post-container { +.blog-entry-container { padding: 1rem; padding-top: 2rem; } -.blog-post-title { +.blog-entry-title { padding-top: 2rem; } + +.blog-post-date { + text-align: left; +} diff --git a/templates/base.html b/templates/base.html index 2b7c948..a4a4bd9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -25,7 +25,7 @@

-
+

View the latest posts

{% block content %} {% endblock %}
diff --git a/templates/index.html b/templates/index.html index ab1d1d4..ce6db9e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,7 +5,7 @@ {% for page in section.pages %} -
  • {{ page.date }} // {{ page.title }}
    • +
  • {{ page.date }} // {{ page.title }}
    • {% endfor %} {% endblock content %} diff --git a/templates/page.html b/templates/page.html index 559a8a0..bac1e34 100644 --- a/templates/page.html +++ b/templates/page.html @@ -7,10 +7,19 @@ -

    Cyberfrog blog

    +
    + + +
    -

    {{ page.title }}

    -

    Published: {{ page.date }} || Last updated: {{ page.updated }}

    +

    {{ page.title }}

    +
    Published: {{ page.date }} || Last updated: {{ page.updated }}
    {% block content %} {% endblock %}
    From 138440d973a55e90a3789c69ad8a7849da43a845 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 20 Jul 2025 22:32:50 +1000 Subject: [PATCH 2/2] Fix content display on blog posts, fix background scaling (again), update styling for blog post content --- content/second.md | 9 ++++++++- static/main.css | 41 ++++++++++++++++++++++++++--------------- templates/base.html | 2 +- templates/page.html | 11 +++++++---- 4 files changed, 42 insertions(+), 21 deletions(-) diff --git a/content/second.md b/content/second.md index 1799360..f0c842c 100644 --- a/content/second.md +++ b/content/second.md @@ -4,4 +4,11 @@ date = 2025-01-31 updated = 2025-01-31 +++ -This is my second blog post. +This is my second blog post, I'm still testing Zola!!! I just really wanted to see how longer form content looks and how it grows within my page + +hopefully this will work well, it seems good, as long as I can get the content of the actual blog post to appear lol... + +who really knows: +- Something is always broken +- If it's not broken it will break eventually +- [x] The thing I care about is currently breaking diff --git a/static/main.css b/static/main.css index 99d93f0..7c9909b 100644 --- a/static/main.css +++ b/static/main.css @@ -3,23 +3,20 @@ } /* Magic fix which forces outer most element to full view size for background scaling */ +/* NOTE: min-height and min-width here prevent body/site-content overflow and background breaking */ html { - height: 100%; - width: 100%; + min-height: 100%; + min-width: 100%; display: flex; justify-content: center; } body { font-family: monospace; - color: #e4e4e4; - padding-top: 2rem; + padding: 2rem; font-size: 18px; max-width: 55rem; line-height: 1.4; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; /* Fancy background CSS colouring lives here */ background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(65,15,75, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,80, 1) 60%, rgba(0,0,0, 1)); } @@ -47,10 +44,7 @@ a:hover { } #site-content { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + color: #e4e4e4; padding: 2rem; border-radius: 1rem; background: rgba(0,0,0, 0.78); @@ -82,12 +76,29 @@ a:hover { } #blog-page-title { - padding-top: 1.5rem; - padding-bottom: 1rem; - letter-spacing: -2px; + padding-bottom: 0.5rem; text-align: center; } +#blog-post-content { + padding-top: 1.5rem; +} + +#blog-post-content p { + padding: 1rem; +} + +#blog-post-content li { + list-style-type: disc; +} + +#blog-post-content ul { + padding: 1rem; + padding-top: 0rem; + /* Align the inner il elements correctly */ + margin-left: 1rem; +} + .dotted-border { border-bottom: #e4e4e4 8px dotted; width: 100%; @@ -108,5 +119,5 @@ a:hover { } .blog-post-date { - text-align: left; + text-align: center; } diff --git a/templates/base.html b/templates/base.html index a4a4bd9..d642fc1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -21,7 +21,7 @@

    Welcome

    This blog is made with 💜 and Zola!

    -

    It's currently running on Vultr for free with 500MB of RAM and OpenBSD +

    It's currently running on Vultr and OpenBSD

    diff --git a/templates/page.html b/templates/page.html index bac1e34..a4658c1 100644 --- a/templates/page.html +++ b/templates/page.html @@ -18,11 +18,14 @@
    -

    {{ page.title }}

    -
    Published: {{ page.date }} || Last updated: {{ page.updated }}
    -
    - {% block content %} {% endblock %} +
    +

    {{ page.title }}

    +
    // Published: {{ page.date }} // Modified: {{ page.updated }} //
    +
    +
    + {{ page.content | safe }} +