feat: put some colors in the world

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

assets/css/main.css

@@ -1163,6 +1163,10 @@ video {
   bottom: 0px;
 }
 
+.col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
 .-m-4 {
   margin: -1rem;
 }
@@ -1222,6 +1226,10 @@ video {
   height: 11rem;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
 .h-64 {
   height: 16rem;
 }
@@ -1386,6 +1394,11 @@ video {
   padding: 1rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1463,16 +1476,16 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1778,14 +1791,19 @@ video {
   }
 }
 
-.hover\:bg-black:hover {
+.hover\:bg-cyan-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-white:hover {
+.hover\:bg-pink-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-teal-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:font-bold:hover {
@@ -1797,15 +1815,15 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
 .hover\:no-underline:hover {
   text-decoration-line: none;
 }
 
+.hover\:grayscale-0:hover {
+  --tw-grayscale: grayscale(0);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .focus\:no-underline:focus {
   text-decoration-line: none;
 }

layouts/_default/list.html

@@ -2,6 +2,9 @@
   <section>
     <div class="max-w-6xl mx-auto space-y-4 sm:space-y-5">
       {{ range first 1 .Pages }}
+
+        {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
+        {{- $classes := (printf "flex items-center justify-center border border-black text-center hover:text-black hover:bg-%s-400 text-white bg-black capitalize hover:font-bold" $color ) }}
         <div
           class="block max-x-sm gap-4 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 ring-1 ring-black"
         >
@@ -41,7 +44,7 @@
 
             <!-- <span class=""> -->
             <a
-              class="flex justify-center border border-black text-center text-white bg-black hover:text-black hover:bg-white hover:font-bold capitalize"
+              class="{{ $classes }}"
               href="/posts/category/{{ .Params.Category }}"
             >
               {{ .Params.Category }}</a
@@ -54,6 +57,8 @@
         class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
       >
         {{ range after 1 .Pages }}
+          {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
+          {{- $classes := (printf "flex items-center justify-center border border-black text-center hover:text-black hover:bg-%s-400 text-white bg-black capitalize hover:font-bold" $color ) }}
           <div
             class="max-w-sm mx-auto group hover:no-underline focus:no-underline ring-1 ring-black "
           >
@@ -90,7 +95,7 @@
               </a>
               <!-- <span class="flex colums-auto flex-col justify-between"> -->
               <a
-                class="flex items-center justify-center border border-black text-center hover:text-black hover:bg-white text-white bg-black capitalize hover:font-bold"
+                class="{{ $classes }}"
                 href="/posts/category/{{ .Params.Category }}"
               >
                 {{ .Params.Category }}</a

layouts/_default/single.html

@@ -22,11 +22,17 @@
         class="hidden font-mono md:block md:col-span-1 mt-6 cursor-default [writing-mode:vertical-rl]"
       >
         <!-- <h2 class="font-light uppercase md:text-2xl">The Secondary header goes here</h2> -->
-        <div class=" font-medium">
+        <div class=" font-medium space-y-2">
           {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
           {{ $dateHuman := .Date | time.Format ":date_long" }}
-          <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+          <time
-          <span>| {{ .WordCount }} words</span>
+            datetime="{{ $dateMachine }}"
+            class="border border-black py-2 px-1 hover:bg-cyan-400"
+            >{{ $dateHuman }}</time
+          >
+          <span class="border border-black py-2 px-1 hover:bg-teal-400"
+            >{{ .WordCount }} words</span
+          >
 
           {{ if gt .ReadingTime 1 }}
             {{ .Scratch.Set "timeUnit" "mins" }}
@@ -35,17 +41,25 @@
           {{ end }}
 
 
-          <span class="border border-black"
+          <span class="border border-black py-2 px-1 hover:bg-pink-400"
-            >| ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
+            >~{{ .ReadingTime }}
-          >
+            {{ .Scratch.Get "timeUnit" }}
+          </span>
         </div>
       </div>
 
-      <div class="prose prose-neutral lg:prose-lg md:col-span-11 md:mx-auto">
+      <div
+        class="prose prose-neutral lg:prose-lg md:col-span-11 col-span-12 md:mx-auto"
+      >
         <div
           class="invisible absolute inset-y-0 border-l-2 border-dashed border-black md:visible md:-ml-6"
         ></div>
 
+        <img
+          class="object-cover w-full h-60 sm:h-96 grayscale hover:grayscale-0"
+          src="{{ .Params.Image | absURL }}"
+          alt="{{ .Title }}"
+        />
         {{ .Content }}
 
       </div>

layouts/partials/footer.html

@@ -1,5 +1,6 @@
+{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
 <div
-  class="relative overflow-auto px-4 ring-1 ring-gray-800 mt-5 text-center text-light text-gray-500"
+  class="relative overflow-auto px-4 ring-1 ring-gray-800 mt-5 text-center text-light text-gray-500 hover:text-black hover:bg-{{ $color }}-400"
 >
   <span
     ><a href="https://github.com/avinal/box-box">Box Box</a> | A

layouts/partials/header.html

@@ -1,4 +1,9 @@
+{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
 <div class="py-4">
-  <h1 class="text-xl font-bold font-mono bg-gradient-to-r to-black from-white">{{ site.Title }}</h1>
+  <h1
+    class="text-xl font-bold font-mono bg-gradient-to-r to-black hover:to-{{ $color }}-400 from-white"
+  >
+    {{ site.Title }}
+  </h1>
 </div>
 {{ partial "menu.html" (dict "menuID" "main" "page" .) }}

layouts/partials/menu.html

@@ -22,13 +22,14 @@
   {{- $page := .page }}
   {{- range .menuEntries }}
     {{- $attrs := dict "href" .URL }}
+    {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
     {{- $classes := "min-width flex items-center justify-center border border-black text-center shadow-md shadow-gray-600" }}
 
     {{- if $page.IsMenuCurrent .Menu . }}
       {{- $classes = (printf "%s %s" $classes "bg-black text-white active") }}
       {{- $attrs = merge $attrs (dict "aria-current" "page") }}
     {{- else }}
-      {{- $classes = (printf "%s %s" $classes "bg-white text-black ancestor hover:text-white hover:bg-black") }}
+      {{- $classes = (printf "%s %s hover:bg-%s-400" $classes "bg-white text-black ancestor" $color) }}
       {{- $attrs = merge $attrs (dict "aria-current" "true") }}
     {{- end }}