fix post thumbnail

rizkikadafi · Apr 7, 2024 · 228b5f5 · 228b5f5
1 parent 2a043a7
commit 228b5f5
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 29 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,4 +1,4 @@
-baseurl: "https://rizkikadafi.github.io/"
+baseurl: ""
 url: ""
 postcss:
   cache: false

diff --git a/_includes/blog-post-card.html b/_includes/blog-post-card.html
@@ -5,22 +5,28 @@
   <img src="{{ include.post.thumbnail }}" alt="" class="w-full rounded-md">
   {% endif %}
 
-  {% for tag in include.post.tags %}
-  <a href=""
-    class="inline-block mr-2 my-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] text-slate-200">{{tag}}</a>
-  {% endfor %}
 
-  <div>
-    <span class="text-sm">{{ include.post.author }} - {{ include.post.date | date_to_string }}</span>
-  </div>
 
   <div class="mt-3">
-    <h2 class="text-xl font-bold">{{ include.post.title }}</h2>
+    <a href="{{ include.post.url }}">
+      <h2 class="text-xl font-bold hover:text-sky-200">{{ include.post.title }}</h2>
+    </a>
+
+    <div>
+      <span class="text-sm">{{ include.post.author }} - {{ include.post.date | date_to_string }}</span>
+    </div>
+
+    {% for tag in include.post.tags %}
+    <a href=""
+      class="inline-block mr-2 mt-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-3 py-[2px] text-slate-200">{{tag}}</a>
+    {% endfor %}
+
     <p class="text-sm text-justify mt-2">
       {{ include.post.excerpt }}
     </p>
 
-    <a href="{{ include.post.url }}" class="group w-fit mt-3 flex justify-start items-center text-sm hover:underline">
+    <a href="{{ include.post.url }}"
+      class="group w-fit mt-3 flex justify-start items-center text-sm hover:underline  hover:text-sky-200">
       <span class="block mr-2">Read more</span>
       <i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
     </a>

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -4,7 +4,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
     integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
@@ -16,7 +15,7 @@
 
 </head>
 
-<body class="bg-slate-50 dark:bg-slate-800 transition duration-500">
+<body class="bg-slate-50 dark:bg-slate-800 transition duration-500 lg:px-24">
   {% include blog-modal-navigation.html %}
   <nav id="blog-nav"
     class="px-10 lg:px-20 bg-slate-300/70 dark:bg-transparent fixed right-0 left-0 top-0 dark:text-gray-200 z-10 py-3 lg:py-5 transition duration-300 border-slate-600 text-gray-900

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,8 +4,8 @@
 
 <div class="p-4 sm:px-10 lg:px-48 lg:mt-20 mt-12 text-white">
   {% if page.thumbnail %}
-  <div
-    class="w-full mb-5 h-60 sm:h-72 md:h-80 lg:h-96 bg-[url('{{page.thumbnail}}')] bg-cover bg-center rounded-md shadow-custom relative">
+  <div class="w-full mb-5 h-60 sm:h-72 md:h-80 lg:h-96 bg-cover bg-center rounded-md shadow-custom relative"
+    style="background-image: url('{{ page.thumbnail }}')">
     <div
       class="top-0 left-0 bg-gradient-to-t from-black h-full w-full flex flex-col justify-end rounded-md p-5 backdrop-brightness-75 absolute">
       <div>
@@ -22,18 +22,25 @@ <h2 class="lg:w-4/5 lg:text-2xl font-bold">{{ page.title }}</h2>
         {% endfor %}
       </div>
     </div>
+  </div>
+  {% else %}
+  <div>
+    <h2 class="lg:w-4/5 text-2xl lg:text-4xl font-bold text-center m-auto">{{ page.title }}</h2>
+    <div class="text-center m-auto">
+      <span class="text-sm">{{ page.author }} - {{ page.date | date_to_string }}</span>
+    </div>
+  </div>
 
+  <div class="m-auto flex justify-center">
+    {% for tag in page.tags %}
+    <a href=""
+      class="inline-block my-2 mx-[3px] w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
+    {% endfor %}
   </div>
   {% endif %}
 
 
-  <div class="*:py-2 *:text-justify lg:text-base text-sm text-slate-800 dark:text-white">
-    <div class="lg:hidden block">
-      {% for tag in page.tags %}
-      <a href=""
-        class="inline-block mb-2 w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
-      {% endfor %}
-    </div>
+  <div class="px-2 md:px-0 *:py-2 *:text-justify lg:text-base text-sm text-slate-800 dark:text-white mt-5">
     {{ content }}
   </div>
 

diff --git a/blog/blog.html b/blog/blog.html
@@ -5,8 +5,7 @@
 ---
 
 <div class="w-full dark:text-white">
-  <section id="dashboard"
-    class="h-72 sm:h-96 p-5 px-8 sm:px-14 dark:bg-radial-gradient-top-left flex flex-col justify-center items-center">
+  <section id="dashboard" class="h-72 sm:h-96 p-5 px-8 sm:px-14 flex flex-col justify-center items-center">
     <div class="h-full w-full flex flex-col justify-center items-center pt-12">
       <div class="text-center">
         <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</h1>
@@ -67,14 +66,13 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</
 
   <section id='recent' class="p-5">
     {% include header-title.html title='Recent Posts' %}
-    <div
-      class="mt-5 flex *:flex flex-col *:flex-col gap-8 *:gap-8 sm:w-[90%] mx-auto *:sm:flex-row *:sm:flex-wrap *:lg:flex-nowrap">
-      <div class="*:w-[50%]">
-        {% for post in site.posts limit: 2 %}
+    <div class="mt-5 flex flex-col sm:flex-row gap-5">
+      <div class="flex flex-col gap-5">
+        {% for post in site.posts limit: 3 %}
         {% include blog-post-card.html post=post %}
         {% endfor %}
       </div>
-      <div>
+      <div class="flex flex-col gap-5">
         {% for post in site.posts limit: 3 offset: continue %}
         {% include blog-post-card.html post=post %}
         {% endfor %}

diff --git a/blog/linux/_posts/2024-01-24-vim-introduction.md b/blog/linux/_posts/2024-01-24-vim-introduction.md
@@ -1,7 +1,6 @@
 ---
 layout: post
 author: Kadafi
-thumbnail: /assets/image/hero1.jpg
 tags: vim editor
 ---