avinal/box-box
1
0
Fork 0
mirror of https://github.com/avinal/box-box.git synced 2026-01-11 05:58:33 +05:30
Code Issues Packages Releases Wiki Activity

feat: add automatic dark mode tailwind classes

Browse Source 
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
Morumotto
2025-01-01 22:14:16 +05:30
parent 4d907f161e
commit a7443aa0c8
8 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
layouts/_default/list.html
View File

@@ -1,12 +1,12 @@
{{ define "main" }}
<section>
<div class="max-w-6xl mx-auto space-y-4 sm:space-y-5">
<div class="max-w-6xl mx-auto space-y-4 sm:space-y-5 dark:text-white">
{{ 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 group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold" $color ) }}
{{- $classes := (printf "flex items-center justify-center border border-black text-center group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold dark:bg-white dark:text-black" $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"
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 dark:ring-white"
>
<a class="lg:col-span-7" href="{{ .RelPermalink }}">
<img
@@ -15,20 +15,22 @@
alt="{{ .LinkTitle }}"
/>
</a>
<div class="p-4 space-y-2 lg:col-span-5">
<div class="p-4 space-y-2 lg:col-span-5 ">
<a href="{{ .RelPermalink }}">
<h3 class="text-xl font-medium sm:text-3xl space-y-2">
<h3 class="text-xl font-medium sm:text-3xl space-y-2 ">
{{ .LinkTitle }}
</h3>
<div class="inset-x-0 py-2">
<hr class="border-t-2 border-black border-dashed" />
<hr
class="border-t-2 border-black border-dashed dark:border-white"
/>
<!-- <hr class="border-t-1 border-black" /> -->
</div>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time
datetime="{{ $dateMachine }}"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-light"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>{{ $dateHuman }}</time
>
{{ if gt .ReadingTime 1 }}
@@ -39,11 +41,13 @@
<span
class="border border-black py-1 px-2 group-hover:bg-pink-400 font-light"
class="border border-black py-1 px-2 group-hover:bg-pink-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>~{{ .ReadingTime }}
{{ .Scratch.Get "timeUnit" }}
</span>
<p class="break-all mt-2">{{ .Summary | truncate 200 }}</p>
<p class="break-all mt-2 ">
{{ .Summary | truncate 200 }}
</p>
</a>
<!-- <span class=""> -->
@@ -62,9 +66,9 @@
>
{{ 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 group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold" $color ) }}
{{- $classes := (printf "flex items-center justify-center border border-black text-center group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold dark:bg-white dark:text-black" $color ) }}
<div
class="max-w-sm mx-auto group hover:no-underline focus:no-underline ring-1 ring-black "
class="max-w-sm mx-auto group hover:no-underline focus:no-underline ring-1 ring-black dark:ring-white"
>
<a href="{{ .RelPermalink }}">
<img
@@ -75,15 +79,19 @@
</a>
<div class="p-4 space-y-2">
<a href="{{ .RelPermalink }}">
<h3 class="text-2xl font-medium ">{{ .LinkTitle }}</h3>
<h3 class="text-2xl font-medium ">
{{ .LinkTitle }}
</h3>
<div class="inset-x-0 py-2">
<hr class="border-t-1 border-dashed border-black" />
<hr
class="border-t-1 border-dashed border-black dark:border-white"
/>
</div>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time
datetime="{{ $dateMachine }}"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-light"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>{{ $dateHuman }}</time
>
{{ if gt .ReadingTime 1 }}
@@ -94,10 +102,12 @@
<span
class="border border-black py-1 px-2 group-hover:bg-pink-400 font-light"
class="border border-black py-1 px-2 group-hover:bg-pink-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
>
<p class="break-all mt-2">{{ .Summary | truncate 147 }}</p>
<p class="break-all mt-2 ">
{{ .Summary | truncate 147 }}
</p>
</a>
<!-- <span class="flex colums-auto flex-col justify-between"> -->
<a