froge/cyberfrog.me
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

24
static/main.css
View file

@ -4,11 +4,10 @@
/* Magic fix which forces outer most element to full view size for background scaling */ /* Magic fix which forces outer most element to full view size for background scaling */
html { html {
min-height: 100%; height: 100%;
min-width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: column;
} }
body { body {
@ -21,8 +20,8 @@ body {
-webkit-hyphens: auto; -webkit-hyphens: auto;
-ms-hyphens: auto; -ms-hyphens: auto;
hyphens: auto; hyphens: auto;
/* Fancy background CSS lives here */ /* Fancy background CSS colouring 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%); 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 { li {
@ -82,6 +81,13 @@ a:hover {
text-align: center; text-align: center;
} }
#blog-page-title {
padding-top: 1.5rem;
padding-bottom: 1rem;
letter-spacing: -2px;
text-align: center;
}
.dotted-border { .dotted-border {
border-bottom: #e4e4e4 8px dotted; border-bottom: #e4e4e4 8px dotted;
width: 100%; width: 100%;
@ -92,11 +98,15 @@ a:hover {
text-align: center; text-align: center;
} }
.blog-post-container { .blog-entry-container {
padding: 1rem; padding: 1rem;
padding-top: 2rem; padding-top: 2rem;
} }
.blog-post-title { .blog-entry-title {
padding-top: 2rem; padding-top: 2rem;
} }
.blog-post-date {
text-align: left;
}

2
templates/base.html
View file

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

2
templates/index.html
View file

@ -5,7 +5,7 @@
<!-- If you are using pagination, section.pages will be empty. <!-- If you are using pagination, section.pages will be empty.
You need to use the paginator object --> You need to use the paginator object -->
{% for page in section.pages %} {% 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 %} {% endfor %}
</ul> </ul>
{% endblock content %} {% endblock content %}

15
templates/page.html
View file

@ -7,10 +7,19 @@
</head> </head>
<body> <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"> <main id="main-content">
<h2 class="blog-title">{{ page.title }}</h2> <h2 id="blog-page-title">{{ page.title }}</h2>
<h4 class="blog-post-date">Published: {{ page.date }} || Last updated: {{ page.updated }}</h4> <h5 class="blog-post-date">Published: {{ page.date }} || Last updated: {{ page.updated }}</h5>
<div class="blog-posts"> <div class="blog-posts">
{% block content %} {% endblock %} {% block content %} {% endblock %}
</div> </div>