make it a bit more prettier

holger1411 · Jul 14, 2021 · 0e7dd3f · 0e7dd3f · vercel · Jul 14, 2021
1 parent b05a527
commit 0e7dd3f
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}