From 32bb30b2562a81c9d25274448677045cd6edbdf1 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 2 Feb 2025 22:14:29 +1000 Subject: [PATCH 01/10] Fix background styling & overflow issues on body element --- static/main.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/static/main.css b/static/main.css index 92d98cc..d2b498b 100644 --- a/static/main.css +++ b/static/main.css @@ -1,25 +1,21 @@ -* { - margin: 0rem; - padding: 0rem; -} - +/* Magic fix which forces outer most element to full view size for background scaling */ html { - color: #000000; + min-height: 100%; + min-width: 100%; } -/* Magic background CSS lives here */ body { font-family: monospace; color: #e4e4e4; font-size: 18px; - margin: auto; + margin: 5rem auto; max-width: 57rem; line-height: 1.4; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - text-align: center; - background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 1) 40%, rgba(55,17,95, 1) 50%, rgba(32,14,84, 1) 60%, rgba(0,0,0,1) 90%); + /* Fancy background CSS lives here */ + background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(60,14,90, 1) 40%, rgba(55,17,95, 1) 50%, rgba(32,14,84, 1) 60%, rgba(0,0,0, 1)); } ul { @@ -46,12 +42,12 @@ a:hover { } #site-content { - margin: 5rem auto; padding: 1rem; padding-bottom: 2rem; border-radius: 1rem; background: rgba(0,0,0, 0.7); box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5); + text-align: center; } #ascii-header { From a603a8993821b2e3ed6169e75fe0915fbbba10ce Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 2 Feb 2025 23:24:12 +1000 Subject: [PATCH 02/10] Update background colours & body transparency --- static/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/main.css b/static/main.css index d2b498b..877f258 100644 --- a/static/main.css +++ b/static/main.css @@ -15,7 +15,7 @@ body { -ms-hyphens: auto; hyphens: auto; /* Fancy background CSS lives here */ - background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(60,14,90, 1) 40%, rgba(55,17,95, 1) 50%, rgba(32,14,84, 1) 60%, rgba(0,0,0, 1)); + background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(65,15,70, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,85, 1) 60%, rgba(0,0,0, 1)); } ul { @@ -45,7 +45,7 @@ a:hover { padding: 1rem; padding-bottom: 2rem; border-radius: 1rem; - background: rgba(0,0,0, 0.7); + background: rgba(0,0,0, 0.78); box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5); text-align: center; } From 1e6e340f566cf9ca18960ac168c8d1b79f7bf078 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 2 Feb 2025 23:30:25 +1000 Subject: [PATCH 03/10] Update background black fade level --- static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/main.css b/static/main.css index 877f258..3f8635e 100644 --- a/static/main.css +++ b/static/main.css @@ -15,7 +15,7 @@ body { -ms-hyphens: auto; hyphens: auto; /* Fancy background CSS lives here */ - background: linear-gradient(to bottom right, rgba(0,0,0, 1), rgba(65,15,70, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,85, 1) 60%, rgba(0,0,0, 1)); + background: linear-gradient(to bottom right, rgba(0,0,0, 1) 2%, rgba(65,15,70, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,85, 1) 60%, rgba(0,0,0, 1) 98%); } ul { From cb89c32b1afb2f7eca6d78cc30aef38b75a174b5 Mon Sep 17 00:00:00 2001 From: Froge Date: Mon, 3 Feb 2025 00:11:05 +1000 Subject: [PATCH 04/10] Finale background colour change (I swear) --- static/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/main.css b/static/main.css index 3f8635e..22af083 100644 --- a/static/main.css +++ b/static/main.css @@ -15,7 +15,7 @@ body { -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,70, 1) 40%, rgba(65,15,90, 1) 50%, rgba(30,15,85, 1) 60%, rgba(0,0,0, 1) 98%); + 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%); } ul { From a8657514081057aa3ac6270ab545ba59d331e3ec Mon Sep 17 00:00:00 2001 From: Froge Date: Mon, 3 Feb 2025 01:52:51 +1000 Subject: [PATCH 05/10] Finalize styling changes to main page --- static/main.css | 51 +++++++++++++++++++++++++++++++------------- templates/base.html | 17 +++++++-------- templates/index.html | 2 +- 3 files changed, 45 insertions(+), 25 deletions(-) diff --git a/static/main.css b/static/main.css index 22af083..c893f2c 100644 --- a/static/main.css +++ b/static/main.css @@ -1,15 +1,22 @@ +* { + margin: 0rem; +} + /* Magic fix which forces outer most element to full view size for background scaling */ html { min-height: 100%; min-width: 100%; + display: flex; + justify-content: center; + align-items: column; } body { font-family: monospace; color: #e4e4e4; + padding-top: 2rem; font-size: 18px; - margin: 5rem auto; - max-width: 57rem; + max-width: 55rem; line-height: 1.4; -webkit-hyphens: auto; -ms-hyphens: auto; @@ -18,13 +25,12 @@ body { 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%); } -ul { - margin-top: 4rem; +li { + list-style-type: none; } -li { - margin-top: 1rem; - list-style-type: none; +ul { + padding: 0rem; } a { @@ -42,21 +48,22 @@ a:hover { } #site-content { - padding: 1rem; - padding-bottom: 2rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2rem; border-radius: 1rem; background: rgba(0,0,0, 0.78); box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5); - text-align: center; } #ascii-header { font-size: 10px; color: #e4e4e4; text-decoration: none; - margin: 1rem; - padding-bottom: 14px; - border-bottom: #e4e4e4 8px dotted; + padding: 1rem; + text-align: center; } #ascii-header a { @@ -70,12 +77,26 @@ a:hover { } #welcome-message { - margin: 1rem; - padding-bottom: 14px; + padding: 1rem; font-weight: bold; + text-align: center; +} + +.dotted-border { border-bottom: #e4e4e4 8px dotted; + width: 100%; } .title { letter-spacing: -2px; + text-align: center; +} + +.blog-post-container { + padding: 1rem; + padding-top: 2rem; +} + +.blog-post-title { + padding-top: 2rem; } diff --git a/templates/base.html b/templates/base.html index 8657201..2b7c948 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,19 +16,18 @@ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████ +
-

- Welcome -

-

- This blog is made with 💜 and Zola! -
- It's currently running on Vultr for free with 500MB of RAM and OpenBSD +

Welcome

+

This blog is made with 💜 and Zola!

+

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

-
- {% block content %} {% endblock %} +
+
+

View the latest posts

+ {% block content %} {% endblock %}
diff --git a/templates/index.html b/templates/index.html index 43f3a35..ab1d1d4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,7 +5,7 @@ {% for page in section.pages %} -
  • {{ page.title }}
    • +
  • {{ page.date }} // {{ page.title }}
    • {% endfor %} {% endblock content %} From 3b17c1f479ae15d53d1ae25b5fd7a029c4776b82 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 20 Jul 2025 19:51:11 +1000 Subject: [PATCH 06/10] 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 07/10] 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 }} +
    From 2623244fb314eda495f6c7a010b2731dff29a9a3 Mon Sep 17 00:00:00 2001 From: Froge Date: Sun, 20 Jul 2025 23:39:39 +1000 Subject: [PATCH 08/10] Fix background scaling (again (again)) Axel helped me unfuck the HTML and CSS so the background gradient scaling no longer depends on the size of the body element, which I was previously locking to the size of the outer html element, and locking THAT to 100% of the view port size (which is awful code and bad practice) Axel refactored this so that the outer html element and body element both naturally scale to the browser size, as expected, and the CSS background was changed to be fixed at 100% height/width regardless of viewport size, which results in much cleaner code (thanks Axel) --- static/main.css | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/static/main.css b/static/main.css index 7c9909b..2815b49 100644 --- a/static/main.css +++ b/static/main.css @@ -2,23 +2,32 @@ margin: 0rem; } -/* 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 { - min-height: 100%; - min-width: 100%; - display: flex; - justify-content: center; + margin: 0rem; + padding: 0rem; } body { + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; font-family: monospace; padding: 2rem; font-size: 18px; - max-width: 55rem; line-height: 1.4; - /* 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)); + /* Fancy background CSS styling 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) + ); + background-size: 100% 100%; + background-repeat: no-repeat; + background-attachment: fixed; } li { @@ -44,6 +53,7 @@ a:hover { } #site-content { + max-width: 55rem; color: #e4e4e4; padding: 2rem; border-radius: 1rem; From 16941f607406b39fd2de6396ac4cf4f24eee1404 Mon Sep 17 00:00:00 2001 From: Froge Date: Tue, 22 Jul 2025 09:25:54 +1000 Subject: [PATCH 09/10] Add bullet-point styling for markdown lists --- static/main.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/main.css b/static/main.css index 2815b49..07ab95b 100644 --- a/static/main.css +++ b/static/main.css @@ -98,10 +98,6 @@ a:hover { padding: 1rem; } -#blog-post-content li { - list-style-type: disc; -} - #blog-post-content ul { padding: 1rem; padding-top: 0rem; @@ -109,6 +105,10 @@ a:hover { margin-left: 1rem; } +#blog-post-content li { + list-style-type: disc; +} + .dotted-border { border-bottom: #e4e4e4 8px dotted; width: 100%; From c0d63ab5f38c53c266b285c4c2b3e55a7f29b820 Mon Sep 17 00:00:00 2001 From: Froge Date: Wed, 23 Jul 2025 09:52:56 +1000 Subject: [PATCH 10/10] Update page templating to centralize header and metatada, add 404 page --- templates/404.html | 11 +++++++++++ templates/base.html | 14 +------------- templates/index.html | 26 +++++++++++++++++++------- templates/page.html | 36 +++++++++--------------------------- 4 files changed, 40 insertions(+), 47 deletions(-) create mode 100644 templates/404.html diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000..b6a14a0 --- /dev/null +++ b/templates/404.html @@ -0,0 +1,11 @@ +{% extends "base.html" %} + +{% block content %} +
    +
    +

    || 404 Not Found ||

    +
    These are not the frogs you're looking for 👋 🐸
    +
    +
    +
    +{% endblock content %} diff --git a/templates/base.html b/templates/base.html index d642fc1..720988e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,19 +17,7 @@ ██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████
    -
    -
    -

    Welcome

    -

    This blog is made with 💜 and Zola!

    -

    It's currently running on Vultr and OpenBSD -

    -
    -
    -
    -

    View the latest posts

    - {% block content %} {% endblock %} -
    -
    + {% block content %} {% endblock content %} diff --git a/templates/index.html b/templates/index.html index ce6db9e..94f6fb2 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,11 +1,23 @@ {% extends "base.html" %} {% block content %} -
      - - {% for page in section.pages %} -
    • {{ page.date }} // {{ page.title }}
      • - {% endfor %} -
    +
    +
    +

    Welcome

    +

    This blog is made with 💜 and Zola!

    +

    It's currently running on Vultr and OpenBSD +

    +
    +
    +
    +

    View the latest posts

    +
      + + {% for page in section.pages %} +
    • {{ page.date }} // {{ page.title }}
      • + {% endfor %} +
    +
    +
    {% endblock content %} diff --git a/templates/page.html b/templates/page.html index a4658c1..9168758 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,32 +1,14 @@ - - - - - - 🐸 CyberFrog - +{% extends "base.html" %} - -
    - - -
    -
    -
    -

    {{ page.title }}

    -
    // Published: {{ page.date }} // Modified: {{ page.updated }} //
    -
    +{% block content %} +
    +
    +

    {{ page.title }}

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