Add CSS and HTML for blog post styling, remove unused flexbox elements

This commit is contained in:
Froge 2025-07-20 19:51:11 +10:00
parent a865751408
commit 3b17c1f479
Signed by: froge
GPG key ID: A825E09930271BFA
4 changed files with 31 additions and 12 deletions

View file

@ -25,7 +25,7 @@
</p>
</div>
<div class="dotted-border"></div>
<div class="blog-post-container">
<div class="blog-entry-container">
<h3 class="title">View the latest posts</h3>
{% block content %} {% endblock %}
</div>

View file

@ -5,7 +5,7 @@
<!-- If you are using pagination, section.pages will be empty.
You need to use the paginator object -->
{% for page in section.pages %}
<li class="blog-post-title">{{ page.date }} // <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
<li class="blog-entry-title">{{ page.date }} // <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endblock content %}

View file

@ -7,10 +7,19 @@
</head>
<body>
<h1 class="title">Cyberfrog blog</h1>
<div id="site-content">
<!-- Credits to http://patorjk.com/software/taag/ for the header, made using "ANSI Regular" font -->
<div id="ascii-header"><a href="/"><pre>
██████ ██ ██ ██████ ███████ ██████ ███████ ██████ ██████ ██████ ███ ███ ███████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██
██ ████ ██████ █████ ██████ █████ ██████ ██ ██ ██ ███ ██ ████ ██ █████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ███████
</pre></a></div>
<div class="dotted-border"></div>
<main id="main-content">
<h2 class="blog-title">{{ page.title }}</h2>
<h4 class="blog-post-date">Published: {{ page.date }} || Last updated: {{ page.updated }}</h4>
<h2 id="blog-page-title">{{ page.title }}</h2>
<h5 class="blog-post-date">Published: {{ page.date }} || Last updated: {{ page.updated }}</h5>
<div class="blog-posts">
{% block content %} {% endblock %}
</div>