tags

WaylonWalker · Dec 19, 2023 · 16c6910 · 16c6910
1 parent b394730
commit 16c6910
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/pages/templates/post_template.html b/pages/templates/post_template.html
@@ -149,7 +149,9 @@ <h1 id="title" class="flair blog title no-link">
                         date
                         }}</time>
                 </p>
-                <div class="h-card p-author" rel="author">
+                <div class="h-card p-author flex flex-row space-between" rel="author">
+                    <img class="u-photo w-16 h-16 rounded-full m-auto ml-0"
+                        src="https://images.waylonwalker.com/8bitc.png" />
                     <div class="content">
                         <a class="p-name u-url h-card p-author" rel='me' href="https://waylonwalker.com/">
                             <p>
@@ -171,7 +173,18 @@ <h1 id="title" class="flair blog title no-link">
                 <!-- </p> -->
             </div>
 
-            <div id="post-body" {{ 'data-pagefind-body' if post in markata.feeds.pagefind.posts else '' }}>{{ body }}
+            <h2 class="text-center text-sm max-w-md m-auto text-zinc-500 no-link">Tags</h2>
+            <ul class="tags p-0 m-auto max-w-md flex flex-wrap justify-center border-yellow-400">
+                {% for tag in post.tags %}
+                <li class='list-none px-4 ring-1 ring-pink-500 rounded-full '>
+                    <a class="p-category" href="https://waylonwalker.com/{{ tag }}">{{ tag }}</a>
+                </li>
+                {% endfor %}
+            </ul>
+
+            <div class="e-content" id="post-body" {{ 'data-pagefind-body' if post in markata.feeds.pagefind.posts
+                else '' }}>
+                {{ body }}
             </div>
 
             <div id="show"></div>

diff --git a/static/app.css b/static/app.css
@@ -883,6 +883,10 @@ video {
   margin: 1.5rem;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
@@ -910,6 +914,10 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.ml-0 {
+  margin-left: 0px;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -994,6 +1002,10 @@ video {
   width: 100%;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1109,6 +1121,11 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 204 21 / var(--tw-border-opacity));
+}
+
 .bg-neutral-600\/10 {
   background-color: rgb(82 82 82 / 0.1);
 }
@@ -1277,6 +1294,11 @@ video {
   color: rgb(255 255 255 / 0.6);
 }
 
+.text-zinc-500 {
+  --tw-text-opacity: 1;
+  color: rgb(113 113 122 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1341,6 +1363,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1351,6 +1379,11 @@ video {
   --tw-ring-color: rgb(6 182 212 / 0.3);
 }
 
+.ring-pink-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
+}
+
 .ring-zinc-950\/5 {
   --tw-ring-color: rgb(9 9 11 / 0.05);
 }