Minecon724/m724.eu
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Fix footer

Browse source 
Closes #5
This commit is contained in:
Minecon724 2025-01-16 15:35:51 +01:00
parent 3cb7c290d2
commit a2768d3b7f
Signed by: Minecon724
GPG key ID: 3CCC4D267742C8E8
3 changed files with 41 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
template/article_template.html
View file

@ -17,35 +17,38 @@
<link rel="stylesheet" href="{{ static('style.css') }}"> <link rel="stylesheet" href="{{ static('style.css') }}">
</head> </head>
<body> <body>
<article id="post"> <div id="page-content">
<header> <article id="post">
<p id="title"> <header>
<a href="">{{ article.title }}</a> <p id="title">
</p> <a href="">{{ article.title }}</a>
<p id="description"> </p>
{{ article.summary }} <p id="description">
</p> {{ article.summary }}
<div id="details"> </p>
{% if site.custom.defaultAuthor != article.createdBy %} <div id="details">
{% if site.custom.defaultAuthor != article.createdBy %}
<span>{{ article.createdBy }}</span>, <span>{{ article.createdBy }}</span>,
{% endif %} {% endif %}
<span title='{{ article.createdAt | date("dd.MM.yyyy") }}'>{{ article.createdAt | date("dd.MM.yyyy") }}</span> <span title='{{ article.createdAt | date("dd.MM.yyyy") }}'>{{ article.createdAt | date("dd.MM.yyyy") }}</span>
<span class="separator">|</span> <span class="separator">|</span>
<span>5 min read</span> <span>5 min read</span>
</div> </div>
</header> </header>
{% if article.custom.containsKey("photo") %} {% if article.custom.containsKey("photo") %}
<div id="image"> <div id="image">
<img id="front-image" src="{{ asset(article.custom.photo) }}"> <img id="front-image" src="{{ asset(article.custom.photo) }}">
<img id="blurred-image" src="{{ asset(article.custom.photo) }}"> <img id="blurred-image" src="{{ asset(article.custom.photo) }}">
</div> </div>
{% endif %} {% endif %}
<div id="content">
{{ article.htmlContent | raw }}
</div>
</article>
</div>
<div id="content">
{{ article.htmlContent | raw }}
</div>
</article>
<div id="footer"> <div id="footer">
<p>Last modified {{ article.modifiedAt | date("dd.MM.yyyy HH:mm") }} UTC by {{ article.modifiedBy }}</p> <p>Last modified {{ article.modifiedAt | date("dd.MM.yyyy HH:mm") }} UTC by {{ article.modifiedBy }}</p>

12
template/index_template.html
View file

@ -8,11 +8,12 @@
<link rel="stylesheet" href="{{ static('style.css') }}"> <link rel="stylesheet" href="{{ static('style.css') }}">
</head> </head>
<body> <body>
<div style="margin-top: 30vh;"></div> <div id="page-content">
<div style="margin-top: 30vh;"></div>
<img id="current-blurred" src="{{ asset(articles[0].custom.photo) }}"> <img id="current-blurred" src="{{ asset(articles[0].custom.photo) }}">
{% for article in articles %} {% for article in articles %}
<a href="post/{{ article.slug }}.html" class="post-short"> <a href="post/{{ article.slug }}.html" class="post-short">
<article> <article>
<header> <header>
@ -21,11 +22,12 @@
</header> </header>
{% if article.custom.containsKey("photo") %} {% if article.custom.containsKey("photo") %}
<img class="front-image" src="{{ asset(article.custom.photo) }}"> <img class="front-image" src="{{ asset(article.custom.photo) }}">
{% endif %} {% endif %}
</article> </article>
</a></a> </a></a>
{% endfor %} {% endfor %}
</div>
<div id="footer"> <div id="footer">
<p>Content on m724.eu is licensed under <a href="https://creativecommons.org/licenses/by/4.0" target="_blank" rel="license noopener noreferrer">CC BY 4.0</a></p> <p>Content on m724.eu is licensed under <a href="https://creativecommons.org/licenses/by/4.0" target="_blank" rel="license noopener noreferrer">CC BY 4.0</a></p>

8
template/static/style.css
View file

@ -6,9 +6,17 @@ html {
} }
body { body {
display: flex;
flex-direction: column; /* Arrange children vertically */
min-height: 100vh; /* Ensure body is at least the viewport height */
margin: 0; /* Reset default body margin */
}
#page-content {
margin: 0 auto; margin: 0 auto;
min-width: min(calc(100vw - 40px), 1000px); min-width: min(calc(100vw - 40px), 1000px);
width: calc(50vw - 20px); width: calc(50vw - 20px);
flex-grow: 1; /* Allow content to take up available space */
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
width: calc(100vw - 40px); width: calc(100vw - 40px);