angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Complete basic post styling

Browse source
This commit is contained in:
Yannik Rödel 2022-03-21 16:45:02 +01:00
parent 8293cfac75
commit 1b355c8696
2 changed files with 38 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/includes/layouts/post.njk
View file

@ -1,23 +1,10 @@
---
layout: layouts/base.njk
templateClass: tmpl-post
---
<h1>{{ title }}</h1>
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
{%- for tag in tags | filterTagList -%}
{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{%- endfor %}
<p class="post-metadata">
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
</p>
{{ content | safe }}
{%- set nextPost = collections.posts | getNextCollectionItem(page) %}
{%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
{%- if nextPost or previousPost %}
<hr>
<ul>
{%- if nextPost %}<li>Next: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
</ul>
{%- endif %}

64
src/styles/components/_markup.scss
View file

@ -154,41 +154,47 @@ ul.link-grid {
}
.post-list {
@extend %content-gutter;
display: grid;
grid-template-columns: 1fr 1fr;
gap: layout.$normal-gap;
margin-top: layout.$huge-gap;
margin-bottom: layout.$huge-gap;
@extend %content-gutter;
display: grid;
grid-template-columns: 1fr 1fr;
gap: layout.$normal-gap;
margin-top: layout.$huge-gap;
margin-bottom: layout.$huge-gap;
}
:any-link.post-card {
display: inline-block;
padding-left: layout.$normal-gap;
padding-right: layout.$normal-gap;
text-decoration: none;
transition: background-color motion.$subtle, color motion.$subtle, box-shadow motion.$subtle;
display: inline-block;
padding-left: layout.$normal-gap;
padding-right: layout.$normal-gap;
text-decoration: none;
transition: background-color motion.$subtle, color motion.$subtle,
box-shadow motion.$subtle;
&:hover {
@include colors.card-shadow;
background-color: colors.$yellow-300;
color: colors.$blue-800;
}
&:hover {
@include colors.card-shadow;
background-color: colors.$yellow-300;
color: colors.$blue-800;
}
> h2 {
@extend %subheading;
> h2 {
@extend %subheading;
&::after {
display: none;
}
&::after {
display: none;
}
+ time {
margin-top: -1 * layout.$normal-gap;
}
}
+ time {
margin-top: -1 * layout.$normal-gap;
}
}
> time {
display: block;
color: colors.$gray-600;
}
> time {
display: block;
color: colors.$gray-600;
}
}
.post-metadata {
text-align: center;
color: colors.$blue-800;
}