Update blog styling and date formatting logic
Refined the blog's CSS, addressing title, meta, and author elements for improved readability and consistency. Reintroduced meta date formatting in the blog's HTML, including localized month names for better user experience. Removed unnecessary commented-out code for cleaner structure.
This commit is contained in:
@@ -1,5 +1,18 @@
|
|||||||
// Blog styling
|
// Blog styling
|
||||||
|
|
||||||
|
// Blog post title styling
|
||||||
|
.md-post__title {
|
||||||
|
margin-top: 0; // Remove margin-top for H2 elements on blog page
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blog post meta styling (date display)
|
||||||
|
.md-post__meta {
|
||||||
|
margin-bottom: 0.5rem; // Add some space between date and title
|
||||||
|
//font-size: 0.9rem; // Slightly smaller than normal text
|
||||||
|
color: var(--md-default-fg-color--light); // Lighter color for the date
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// Author styling in blog posts
|
// Author styling in blog posts
|
||||||
.md-post__authors.md-typeset {
|
.md-post__authors.md-typeset {
|
||||||
font-size: 1.3rem; // Match the general text size of the website
|
font-size: 1.3rem; // Match the general text size of the website
|
||||||
@@ -17,8 +30,10 @@
|
|||||||
// Long author format (used in blog post sidebar)
|
// Long author format (used in blog post sidebar)
|
||||||
.md-author--long {
|
.md-author--long {
|
||||||
img {
|
img {
|
||||||
width: 4rem; // Even larger for the long format
|
//width: 4rem; // Even larger for the long format
|
||||||
height: 4rem; // Maintain aspect ratio
|
//height: 4rem; // Maintain aspect ratio
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -50,6 +65,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.md-typeset h2{
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.md-sidebar--post{
|
.md-sidebar--post{
|
||||||
.md-nav__link{
|
.md-nav__link{
|
||||||
svg{
|
svg{
|
||||||
|
|||||||
+3
-13
@@ -6,19 +6,9 @@
|
|||||||
<div class="md-posts">
|
<div class="md-posts">
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<article class="md-post md-post--excerpt">
|
<article class="md-post md-post--excerpt">
|
||||||
<!--<div class="md-post__meta">
|
<div class="md-post__meta">
|
||||||
<time datetime="{{ post.meta.date }}">{{ post.meta.date }}</time>
|
<time datetime="{{ post.meta.date }}">{{ post.meta.date.strftime('%d. %B %Y')|replace('January', 'Januar')|replace('February', 'Februar')|replace('March', 'März')|replace('April', 'April')|replace('May', 'Mai')|replace('June', 'Juni')|replace('July', 'Juli')|replace('August', 'August')|replace('September', 'September')|replace('October', 'Oktober')|replace('November', 'November')|replace('December', 'Dezember') }}</time>
|
||||||
{% if post.meta.categories %}
|
</div>
|
||||||
<span class="md-post__categories">
|
|
||||||
{% for category in post.meta.categories %}
|
|
||||||
{{ category }}{% if not loop.last %}, {% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
{% if post.meta.readtime %}
|
|
||||||
<span>{{ post.meta.readtime }} Min. Lesezeit</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
<h2 class="md-post__title">
|
<h2 class="md-post__title">
|
||||||
<a href="{{ post.url | replace('blog/', '') }}" title="{{ post.title }}">{{ post.title }}</a>
|
<a href="{{ post.url | replace('blog/', '') }}" title="{{ post.title }}">{{ post.title }}</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user