diff --git a/src/_includes/layouts/blog.njk b/src/_includes/layouts/blog.njk index eef59e2..06767c7 100644 --- a/src/_includes/layouts/blog.njk +++ b/src/_includes/layouts/blog.njk @@ -9,12 +9,20 @@ {% include 'snippets/navbar.njk' %} - <main class="container py-5"> - {% include 'snippets/maincontent.njk' %} + <main class="container py-vh-4 pb-0"> + <div class="row d-flex justify-content-center"> + <div class="col-12 col-lg-10 col-xl-8"> + {% include 'snippets/maincontent.njk' %} + </div> + </div> </main> - <div class="container"> - {% include 'snippets/postloop.njk' %} + <div class="container py-vh-4"> + <div class="row d-flex justify-content-center"> + <div class="col-12 col-lg-10 col-xl-8"> + {% include 'snippets/postloop.njk' %} + </div> + </div> </div> <footer class="container"> diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk index bb08507..92ad2e6 100644 --- a/src/_includes/layouts/default.njk +++ b/src/_includes/layouts/default.njk @@ -9,8 +9,12 @@ {% include 'snippets/navbar.njk' %} - <main class="container py-5"> - {% include 'snippets/maincontent.njk' %} + <main class="container py-vh-5"> + <div class="row d-flex justify-content-center"> + <div class="col-12 col-lg-10 col-xl-8"> + {% include 'snippets/maincontent.njk' %} + </div> + </div> </main> <footer class="container"> diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk index 87a708c..b1f8aeb 100644 --- a/src/_includes/layouts/post.njk +++ b/src/_includes/layouts/post.njk @@ -5,12 +5,16 @@ {% include 'snippets/head.njk' %} </head> -<body> + <body> {% include 'snippets/navbar.njk' %} - <main class="container"> - {% include 'snippets/postcontent.njk' %} + <main class="container py-vh-5"> + <div class="row d-flex justify-content-center"> + <div class="col-12 col-lg-10 col-xl-8"> + {% include 'snippets/postcontent.njk' %} + </div> + </div> </main> <footer class="container"> diff --git a/src/_includes/snippets/maincontent.njk b/src/_includes/snippets/maincontent.njk index 7544ec8..a5c3edb 100644 --- a/src/_includes/snippets/maincontent.njk +++ b/src/_includes/snippets/maincontent.njk @@ -1,8 +1,4 @@ -<div class="row d-flex justify-content-center"> - <div class="col-12"> - <header> +<header> <h1 class="display-1">{{ title }}</h1> - </header> - {{ content | safe }} - </div> -</div> +</header> +{{ content | safe }} diff --git a/src/_includes/snippets/postcontent.njk b/src/_includes/snippets/postcontent.njk index cc84fef..9fc92fa 100644 --- a/src/_includes/snippets/postcontent.njk +++ b/src/_includes/snippets/postcontent.njk @@ -13,16 +13,15 @@ <p>Published <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> </p> - <p> - {% for tag in post.data.tags | filterTagList %} - {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} - <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a> - {% endfor %} - </p> + {%- for tag in tags | filterTagList -%} + {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%} + <a href="{{ tagUrl | url }}" class="btn btn-outline-dark btn-sm me-2">{{ tag }}</a> + {%- endfor %} + {% endblock %} </header> <p class="lead"> - {{ intro }} + {{ summary }} </p> {{ content | safe }} </article> diff --git a/src/_includes/snippets/postloop.njk b/src/_includes/snippets/postloop.njk index 8ded04e..ea1268f 100644 --- a/src/_includes/snippets/postloop.njk +++ b/src/_includes/snippets/postloop.njk @@ -1,13 +1,18 @@ <div class="row d-flex justify-content-center"> <div class="col-12"> {%- for post in posts %} - <div class=" border-top py-5"> - <h2>{{ post.data.title}}</h2> - <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time> + <div class="py-5"> + <a href="{{ post.url | url }}" class="text-decoration-none text-dark"><h2 class="display-3">{{ post.data.title}}</h2></a> + <hr/> + <p>Published + <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time> + </p> + <p> {% for tag in post.data.tags | filterTagList %} {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} - <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a> + <a href="{{ tagUrl | url }}" class="btn btn-outline-dark btn-sm me-2">{{ tag }}</a> {% endfor %} + </p> <p>{{ post.data.summary }}</p> <a href="{{ post.url | url }}" class="link-fancy">Read more...</a> </div> @@ -20,7 +25,7 @@ <div class="row d-flex justify-content-between"> <div class="col"> {% if pagination.href.previous %} - <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> + <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> {% endif %} </div> </div> diff --git a/src/default.njk b/src/default.njk index 224315e..111acf3 100644 --- a/src/default.njk +++ b/src/default.njk @@ -2,6 +2,11 @@ layout: layouts/default.njk title: A simple sample page --- -<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. -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. +<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. +</p> +<hr/> +<h2>Dolor sitam est?</h2> +<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> +<h2>At vero eos</h2> +<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. </p> diff --git a/src/posts/post1.md b/src/posts/post1.md index cc3d9c3..038f598 100644 --- a/src/posts/post1.md +++ b/src/posts/post1.md @@ -1,7 +1,7 @@ --- title: Post 1 date: Created -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. +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. tags: - hello --- diff --git a/src/posts/post2.md b/src/posts/post2.md index 8a0fe98..be0543d 100644 --- a/src/posts/post2.md +++ b/src/posts/post2.md @@ -1,7 +1,7 @@ --- title: Post 2 date: Created -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. +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. --- 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. diff --git a/src/posts/post3.md b/src/posts/post3.md index ae934a8..de0b9f5 100644 --- a/src/posts/post3.md +++ b/src/posts/post3.md @@ -1,7 +1,7 @@ --- title: Post 3 date: Created -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. +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. tags: - test - hello diff --git a/src/posts/post4.md b/src/posts/post4.md index bbd808c..0f9a3d2 100644 --- a/src/posts/post4.md +++ b/src/posts/post4.md @@ -1,7 +1,7 @@ --- title: Post 4 date: Created -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. +summary: Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. tags: - hello - nice diff --git a/src/posts/post5.md b/src/posts/post5.md index 4af1d14..0eaa857 100644 --- a/src/posts/post5.md +++ b/src/posts/post5.md @@ -1,7 +1,7 @@ --- title: Post 5 date: Created -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. +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. Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat tags: - hello - nice diff --git a/src/tagslist.njk b/src/tagslist.njk index cbab865..f760032 100644 --- a/src/tagslist.njk +++ b/src/tagslist.njk @@ -1,8 +1,8 @@ --- permalink: /tags/ layout: layouts/default.njk +title: Tags List --- -<h1>Tags</h1> {% for tag in collections.tagList %} {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}