various styling enhancements

src/layouts/BlogSingle.astro

@@ -8,7 +8,7 @@ import similerItems from "@/lib/utils/similarItems";
 import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
 import {
-  FaRegClock,
+  FaRegCalendarAlt,
   FaRegFolder,
   FaRegUserCircle,
 } from "react-icons/fa/index.js";
@@ -46,7 +46,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
             {humanize(author)}
           </li>
           <li class="mr-4 inline-block">
-            <FaRegClock className={"mr-2 -mt-1 inline-block"} />
+            <FaRegCalendarAlt className={"mr-2 -mt-1 inline-block"} />
             {dateFormat(date)}
           </li>
           <li class="mr-4 inline-block">

src/layouts/components/BlogCard.astro

@@ -2,7 +2,8 @@
 import config from "@/config/config.json";
 import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
-import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";
+import { FaRegFolder, FaRegUserCircle, FaRegClock } from "react-icons/fa/index.js";
+import readingTime from "@/lib/utils/readingTime";
 
 const {
   summary_length,
@@ -31,14 +32,14 @@ const { title, image, date, author, categories } = data.data;
     </a>
   </h4>
   <ul class="mb-4">
-    <li class="mr-4 inline-block">
+    <!-- <li class="mr-4 inline-block">
       <a href={`/authors/${slugify(author)}`}>
         <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
         {humanize(author)}
       </a>
-    </li>
+    </li> -->
     <li class="mr-4 inline-block">
-      <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
+      <FaRegFolder className={"mr-1 -mt-1 inline-block"} />
       {
         categories.map((category: string, index: number) => (
           <a href={`/blog/categories/${slugify(category)}`}>
@@ -48,6 +49,10 @@ const { title, image, date, author, categories } = data.data;
         ))
       }
     </li>
+    <li class="mr-4 inline-block ">
+      <FaRegClock className={"mr-1 -mt-1 inline-block"} />
+      {readingTime(data.body)}
+    </li>
   </ul>
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
   <a

src/layouts/components/ThemeSwitcher.astro

@@ -10,7 +10,7 @@ const { className }: { className?: string } = Astro.props;
 
 {
   theme_switcher && (
-    <div class={`theme-switcher ${className}`}>
+    <div class={`theme-switcher a ${className}`}>
       <input id="theme-switcher" data-theme-switcher type="checkbox" />
       <label for="theme-switcher">
         <span class="sr-only">theme switcher</span>

src/layouts/partials/Header.astro

@@ -108,7 +108,7 @@ const { pathname } = Astro.url;
       {
         settings.search && (
           <a
-            class="mr-5 inline-block border-r border-border pr-5 text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
+            class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
             href="/search"
             aria-label="search"
           >

src/lib/utils/readingTime.ts

@@ -1,6 +1,6 @@
 // content reading
 const readingTime = (content: string): string => {
-  const WPS = 275 / 60;
+  const WPS = 225 / 60;
 
   let images = 0;
   const regex = /\w/;
@@ -26,14 +26,10 @@ const readingTime = (content: string): string => {
 
   const minutes = Math.ceil(((words - imageAdjust) / WPS + imageSecs) / 60);
 
-  if (minutes < 10) {
-    if (minutes < 2) {
-      return "0" + minutes + ` Min read`;
-    } else {
-      return "0" + minutes + ` Mins read`;
-    }
+  if (minutes < 2) {
+    return minutes + ` minute`;
   } else {
-    return minutes + ` Mins read`;
+    return minutes + ` minutes`;
   }
 };
 

src/pages/about.astro

@@ -22,10 +22,10 @@ const { title, description, meta_title, image } = about.data;
           {
             image && (
               <Image
-                class="mx-auto mb-6 rounded-lg"
+                class="mx-auto mb-6 rounded-lg  w-64"
                 src={image}
-                width={200}
-                height={200}
+                width={1024}
+                height={1024}
                 alt={title}
                 format="webp"
               />

src/styles/base.scss

@@ -53,3 +53,12 @@ strong {
 code {
   @apply after:border-none;
 }
+
+a:hover {
+  @apply scale-105;
+  @apply opacity-60;
+}
+
+.a:hover {
+  @apply opacity-60;
+}

src/styles/navigation.scss

@@ -60,7 +60,7 @@ input#nav-toggle:checked ~ #nav-menu {
   @apply inline-flex;
 
   label {
-    @apply relative inline-block h-4 w-6 cursor-pointer rounded-2xl bg-border lg:w-10;
+    @apply relative inline-block h-4 w-6 cursor-pointer rounded-2xl bg-border;
   }
 
   input {
@@ -70,10 +70,4 @@ input#nav-toggle:checked ~ #nav-menu {
   span {
     @apply absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full bg-dark transition-all duration-300 dark:bg-white;
   }
-
-  input:checked + label {
-    span {
-      @apply lg:left-4;
-    }
-  }
 }