Skip to content

Commit 0e7dd3f

Browse files
committed
make it a bit more prettier
1 parent b05a527 commit 0e7dd3f

File tree

13 files changed

+57
-36
lines changed

13 files changed

+57
-36
lines changed

src/_includes/layouts/blog.njk

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,20 @@
99

1010
{% include 'snippets/navbar.njk' %}
1111

12-
<main class="container py-5">
13-
{% include 'snippets/maincontent.njk' %}
12+
<main class="container py-vh-4 pb-0">
13+
<div class="row d-flex justify-content-center">
14+
<div class="col-12 col-lg-10 col-xl-8">
15+
{% include 'snippets/maincontent.njk' %}
16+
</div>
17+
</div>
1418
</main>
1519

16-
<div class="container">
17-
{% include 'snippets/postloop.njk' %}
20+
<div class="container py-vh-4">
21+
<div class="row d-flex justify-content-center">
22+
<div class="col-12 col-lg-10 col-xl-8">
23+
{% include 'snippets/postloop.njk' %}
24+
</div>
25+
</div>
1826
</div>
1927

2028
<footer class="container">

src/_includes/layouts/default.njk

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99

1010
{% include 'snippets/navbar.njk' %}
1111

12-
<main class="container py-5">
13-
{% include 'snippets/maincontent.njk' %}
12+
<main class="container py-vh-5">
13+
<div class="row d-flex justify-content-center">
14+
<div class="col-12 col-lg-10 col-xl-8">
15+
{% include 'snippets/maincontent.njk' %}
16+
</div>
17+
</div>
1418
</main>
1519

1620
<footer class="container">

src/_includes/layouts/post.njk

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@
55
{% include 'snippets/head.njk' %}
66
</head>
77

8-
<body>
8+
<body>
99

1010
{% include 'snippets/navbar.njk' %}
1111

12-
<main class="container">
13-
{% include 'snippets/postcontent.njk' %}
12+
<main class="container py-vh-5">
13+
<div class="row d-flex justify-content-center">
14+
<div class="col-12 col-lg-10 col-xl-8">
15+
{% include 'snippets/postcontent.njk' %}
16+
</div>
17+
</div>
1418
</main>
1519

1620
<footer class="container">
Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<div class="row d-flex justify-content-center">
2-
<div class="col-12">
3-
<header>
1+
<header>
42
<h1 class="display-1">{{ title }}</h1>
5-
</header>
6-
{{ content | safe }}
7-
</div>
8-
</div>
3+
</header>
4+
{{ content | safe }}

src/_includes/snippets/postcontent.njk

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,15 @@
1313
<p>Published
1414
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
1515
</p>
16-
<p>
17-
{% for tag in post.data.tags | filterTagList %}
18-
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
19-
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
20-
{% endfor %}
21-
</p>
16+
{%- for tag in tags | filterTagList -%}
17+
{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
18+
<a href="{{ tagUrl | url }}" class="btn btn-outline-dark btn-sm me-2">{{ tag }}</a>
19+
{%- endfor %}
20+
2221
{% endblock %}
2322
</header>
2423
<p class="lead">
25-
{{ intro }}
24+
{{ summary }}
2625
</p>
2726
{{ content | safe }}
2827
</article>

src/_includes/snippets/postloop.njk

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<div class="row d-flex justify-content-center">
22
<div class="col-12">
33
{%- for post in posts %}
4-
<div class=" border-top py-5">
5-
<h2>{{ post.data.title}}</h2>
6-
<time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
4+
<div class="py-5">
5+
<a href="{{ post.url | url }}" class="text-decoration-none text-dark"><h2 class="display-3">{{ post.data.title}}</h2></a>
6+
<hr/>
7+
<p>Published
8+
<time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
9+
</p>
10+
<p>
711
{% for tag in post.data.tags | filterTagList %}
812
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
9-
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
13+
<a href="{{ tagUrl | url }}" class="btn btn-outline-dark btn-sm me-2">{{ tag }}</a>
1014
{% endfor %}
15+
</p>
1116
<p>{{ post.data.summary }}</p>
1217
<a href="{{ post.url | url }}" class="link-fancy">Read more...</a>
1318
</div>
@@ -20,7 +25,7 @@
2025
<div class="row d-flex justify-content-between">
2126
<div class="col">
2227
{% if pagination.href.previous %}
23-
<a href="{{pagination.href.previous}}"><< Previous Page</a> {% endif %} </div> <div class="col text-end"> {% if pagination.href.next %} <a href="{{pagination.href.next}}">Next Page >></a>
28+
<a href="{{pagination.href.previous}}" class="btn btn-outline-primary">< Previous Page</a> {% endif %} </div> <div class="col text-end"> {% if pagination.href.next %} <a href="{{pagination.href.next}}" class="btn btn-outline-primary">Next Page ></a>
2429
{% endif %}
2530
</div>
2631
</div>

src/default.njk

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
layout: layouts/default.njk
33
title: A simple sample page
44
---
5-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
6-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
5+
<hr/><p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
6+
</p>
7+
<hr/>
8+
<h2>Dolor sitam est?</h2>
9+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
10+
<h2>At vero eos</h2>
11+
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
712
</p>

src/posts/post1.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Post 1
33
date: Created
4-
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
4+
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat diam voluptua.
55
tags:
66
- hello
77
---

src/posts/post2.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Post 2
33
date: Created
4-
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
4+
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
55
---
66

77
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

src/posts/post3.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Post 3
33
date: Created
4-
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
4+
summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
55
tags:
66
- test
77
- hello

0 commit comments

Comments
 (0)