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 layout: layouts/base.njk
templateClass: tmpl-post
--- ---
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> <p class="post-metadata">
{%- for tag in tags | filterTagList -%} <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%} </p>
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{%- endfor %}
{{ content | safe }} {{ 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 { .post-list {
@extend %content-gutter; @extend %content-gutter;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: layout.$normal-gap; gap: layout.$normal-gap;
margin-top: layout.$huge-gap; margin-top: layout.$huge-gap;
margin-bottom: layout.$huge-gap; margin-bottom: layout.$huge-gap;
} }
:any-link.post-card { :any-link.post-card {
display: inline-block; display: inline-block;
padding-left: layout.$normal-gap; padding-left: layout.$normal-gap;
padding-right: layout.$normal-gap; padding-right: layout.$normal-gap;
text-decoration: none; text-decoration: none;
transition: background-color motion.$subtle, color motion.$subtle, box-shadow motion.$subtle; transition: background-color motion.$subtle, color motion.$subtle,
box-shadow motion.$subtle;
&:hover { &:hover {
@include colors.card-shadow; @include colors.card-shadow;
background-color: colors.$yellow-300; background-color: colors.$yellow-300;
color: colors.$blue-800; color: colors.$blue-800;
} }
> h2 { > h2 {
@extend %subheading; @extend %subheading;
&::after { &::after {
display: none; display: none;
} }
+ time { + time {
margin-top: -1 * layout.$normal-gap; margin-top: -1 * layout.$normal-gap;
} }
} }
> time { > time {
display: block; display: block;
color: colors.$gray-600; color: colors.$gray-600;
} }
}
.post-metadata {
text-align: center;
color: colors.$blue-800;
} }