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 2b4bd69..07ab95b 100644 --- a/static/main.css +++ b/static/main.css @@ -1,23 +1,43 @@ +* { + margin: 0rem; +} + +html { + margin: 0rem; + padding: 0rem; +} + body { - font-family: Open Sans, Arial; - color: #e4e4e4; - font-size: 14px; - margin: auto; - max-width: 50em; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + font-family: monospace; + padding: 2rem; + font-size: 18px; line-height: 1.4; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - text-align: center; - height: 100%; - width: 100%; + /* 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 { - margin-top: 1em; list-style-type: none; } +ul { + padding: 0rem; +} + a { color: #4361ee; text-decoration: none; @@ -33,20 +53,20 @@ a:hover { } #site-content { - height: 100%; - margin: 5em auto; - padding: 1em; - padding-bottom: 2em; - border-radius: 1em; - background: rgba(0,0,0, 0.7); - box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.5); + max-width: 55rem; + color: #e4e4e4; + padding: 2rem; + border-radius: 1rem; + background: rgba(0,0,0, 0.78); + box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5); } #ascii-header { font-size: 10px; color: #e4e4e4; text-decoration: none; - border-bottom: #541287 0.8em dotted; + padding: 1rem; + text-align: center; } #ascii-header a { @@ -59,30 +79,55 @@ a:hover { text-decoration: none; } +#welcome-message { + padding: 1rem; + font-weight: bold; + text-align: center; +} + +#blog-page-title { + padding-bottom: 0.5rem; + text-align: center; +} + +#blog-post-content { + padding-top: 1.5rem; +} + +#blog-post-content p { + padding: 1rem; +} + +#blog-post-content ul { + padding: 1rem; + padding-top: 0rem; + /* Align the inner il elements correctly */ + margin-left: 1rem; +} + +#blog-post-content li { + list-style-type: disc; +} + +.dotted-border { + border-bottom: #e4e4e4 8px dotted; + width: 100%; +} + +.title { + letter-spacing: -2px; + text-align: center; +} + +.blog-entry-container { + padding: 1rem; + padding-top: 2rem; +} + +.blog-entry-title { + padding-top: 2rem; +} + .blog-post-date { - margin: 0; - padding: 0; -} - -.blog-title { - margin-bottom: 0; -} - - -/* Magic background CSS lives here */ -#bg-effect-container { - z-index: -1; - position: absolute; - bottom: 0%; - left: 0%; - height: 100%; - width: 100%; - background-color: #000000; - overflow: hidden; -} - -.bg-effect { - background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 0.6) 40%, rgba(55,17,95,0.7) 50%, rgba(32,14,84,0.6) 60%, rgba(0,0,0,1) 90%); - height: 100%; - width: 100%; + text-align: center; } 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 4f56b3b..720988e 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,7 +6,7 @@ 🐸 CyberFrog - + 
@@ -16,20 +16,8 @@
 ██         ██    ██   ██ ██      ██   ██ ██      ██   ██ ██    ██ ██    ██    ██  ██  ██ ██      
  ██████    ██    ██████  ███████ ██   ██ ██      ██   ██  ██████   ██████  ██ ██      ██ ███████
-
-

- This is my blog made with Zola! -

-

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

-
- {% block content %} {% endblock %} -
-
-
- -
-
-
+
+ {% block content %} {% endblock content %}
diff --git a/templates/index.html b/templates/index.html index 43f3a35..94f6fb2 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,11 +1,23 @@ {% extends "base.html" %} {% block content %} - +
+
+

Welcome

+

This blog is made with 💜 and Zola!

+

It's currently running on Vultr and OpenBSD +

+
+
+
+

View the latest posts

+ +
+
{% endblock content %} diff --git a/templates/page.html b/templates/page.html index 559a8a0..9168758 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,20 +1,14 @@ - - - - - - 🐸 CyberFrog - +{% extends "base.html" %} - -

Cyberfrog blog

-
-

{{ page.title }}

-

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

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

{{ page.title }}

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