feat: updated

content/posts/second.md

@@ -15,7 +15,7 @@ commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa
 proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
 eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim.
 Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
-duis.
+duis.<!-- more -->
 
 Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
 labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi

static/styles/styles.css

@@ -594,6 +594,10 @@ html,
   margin-right: auto;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .block {
   display: block;
 }
@@ -606,6 +610,22 @@ html,
   display: list-item;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -618,12 +638,32 @@ html,
   place-content: space-around;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -634,6 +674,11 @@ html,
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -644,6 +689,11 @@ html,
   line-height: 2.25rem;
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-peach {
   --tw-text-opacity: 1;
   color: rgba(var(--ctp-peach), var(--tw-text-opacity));
@@ -2082,3 +2132,26 @@ html,
 .blog-summary > p:first-child {
   margin-top: 0px;
 }
+
+.custom-icon {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+  fill: currentColor;
+}
+
+.gitea {
+  background-image: url(https://git.front.kjuulh.io/assets/img/logo.svg);
+}
+
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.hover\:text-orange-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(251 146 60 / var(--tw-text-opacity));
+}

styles/styles.css

@@ -43,3 +43,16 @@
 .blog-summary > p:first-child {
   @apply mt-0;
 }
+
+.custom-icon {
+    display: inline-block;
+    font-size: inherit;
+    height: 1em;
+    overflow: visible;
+    vertical-align: -0.125em;
+    fill: currentColor;
+}
+
+.gitea {
+  background-image: url(https://git.front.kjuulh.io/assets/img/logo.svg);
+}

templates/base.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-  <link rel="stylesheet" href="{{ get_url(path="styles/styles.css") | safe }}" />
+  {{ post_macros::styles() }}
 
   <script defer data-domain="blog.kasperhermansen.com" src="https://plausible.front.kjuulh.io/js/script.js"></script>
 
@@ -34,6 +34,26 @@
   <section class="section container mx-auto">
     {% block content %} {% endblock %}
   </section>
+  <footer>
+    <footer class="mt-auto py-3">
+      <div class="container mx-auto px-4">
+        <div class="flex justify-center space-x-4">
+          <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer"
+            class="text-gray-300 hover:text-gray-900">
+            <i class="fab fa-github"></i>
+          </a>
+          <a href="https://www.linkedin.com/in/kasper-hermansen-50b0b0132/" target="_blank" rel="noopener noreferrer"
+            class="text-gray-300 hover:text-gray-900">
+            <i class="fab fa-linkedin"></i>
+          </a>
+          <a href="https://git.front.kjuulh.io/kjuulh" target="_blank" rel="noopener noreferrer"
+            class="text-gray-300 hover:text-gray-900 custom-icon h-6 w-6 gitea bg-cover"> </a>
+        </div>
+      </div>
+    </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/js/all.min.js"
+      crossorigin="anonymous"></script>
+  </footer>
 </body>
 
 </html>

templates/macros/macros.html

@@ -1,5 +1,5 @@
 {% macro list_posts(pages) %}
-<ul>
+<ul class="space-y-6">
   {%- for page in pages %}
   <section class="list-item">
     <h1 class="title text-peach">
@@ -34,3 +34,7 @@
   {% endfor -%}
 </ul>
 {% endmacro list_posts %}
+
+{% macro styles() %}
+<link rel="stylesheet" href="{{ get_url(path="styles/styles.css") | safe }}" />
+{% endmacro styles %}

templates/page.html

@@ -3,7 +3,6 @@
 {% block content %}
 
 <div class="mx-auto px-4 max-w-3xl py-8">
-
   <div class="py-2">
   {{ prev_macros::page_back_link(page=page) }}
   </div>
@@ -12,6 +11,10 @@
   <h1 class="title">
     {{ page.title }}
   </h1>
+                    <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer" class="text-peach hover:text-orange-400">
+      @kjuulh
+                </a>
+
   <p class="subtitle"><strong>{{ page.date }}</strong></p>
   {{ page.content | safe }}
 </article>