avinal/box-box
1
0
Fork 0
mirror of https://github.com/avinal/box-box.git synced 2026-01-10 21:48:32 +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

2
assets/css/main.css
View File

File diff suppressed because one or more lines are too long

9
layouts/_default/baseof.html
View File

@@ -7,15 +7,12 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </head>
<body class="container mx-auto bg-gray-50"> <body class="container mx-auto bg-gray-50 dark:bg-neutral-700">
<div <div
class="absolute mx-auto inset-0 bg-[url(https://play.tailwindcss.com/img/grid.svg)] bg-top [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" class="relative flex min-h-screen flex-col justify-center overflow-hidden py-8"
></div>
<div
class="relative flex min-h-screen flex-col justify-center overflow-hidden py-8 "
> >
<div <div
class="relative w-full bg-white px-4 shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 md:mx-auto md:max-w-3xl lg:max-w-4xl pb-4" class="relative w-full bg-white dark:bg-neutral-900 px-4 shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 md:mx-auto md:max-w-3xl lg:max-w-4xl pb-4"
> >
<header class="mb-6"> <header class="mb-6">
{{ partial "header.html" . }} {{ partial "header.html" . }}

8
layouts/_default/home.html
View File

@@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div <div class="relative overflow-auto ring-1 ring-black dark:ring-white my-4">
class="relative overflow-auto shadow-md shadow-gray-600 ring-1 ring-gray-800 my-4" <div
> class="prose prose-neutral dark:prose-invert lg:prose-lg md:mx-auto p-4"
<div class="prose prose-neutral lg:prose-lg md:mx-auto p-4"> >
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>

42
layouts/_default/list.html
View File

@@ -1,12 +1,12 @@
{{ define "main" }} {{ define "main" }}
<section> <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 }} {{ range first 1 .Pages }}
{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }} {{- $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 <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 }}"> <a class="lg:col-span-7" href="{{ .RelPermalink }}">
<img <img
@@ -15,20 +15,22 @@
alt="{{ .LinkTitle }}" alt="{{ .LinkTitle }}"
/> />
</a> </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 }}"> <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 }} {{ .LinkTitle }}
</h3> </h3>
<div class="inset-x-0 py-2"> <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" /> --> <!-- <hr class="border-t-1 border-black" /> -->
</div> </div>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }} {{ $dateHuman := .Date | time.Format ":date_long" }}
<time <time
datetime="{{ $dateMachine }}" 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 >{{ $dateHuman }}</time
> >
{{ if gt .ReadingTime 1 }} {{ if gt .ReadingTime 1 }}
@@ -39,11 +41,13 @@
<span <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 }} >~{{ .ReadingTime }}
{{ .Scratch.Get "timeUnit" }} {{ .Scratch.Get "timeUnit" }}
</span> </span>
<p class="break-all mt-2">{{ .Summary | truncate 200 }}</p> <p class="break-all mt-2 ">
{{ .Summary | truncate 200 }}
</p>
</a> </a>
<!-- <span class=""> --> <!-- <span class=""> -->
@@ -62,9 +66,9 @@
> >
{{ range after 1 .Pages }} {{ range after 1 .Pages }}
{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }} {{- $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 <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 }}"> <a href="{{ .RelPermalink }}">
<img <img
@@ -75,15 +79,19 @@
</a> </a>
<div class="p-4 space-y-2"> <div class="p-4 space-y-2">
<a href="{{ .RelPermalink }}"> <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"> <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> </div>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }} {{ $dateHuman := .Date | time.Format ":date_long" }}
<time <time
datetime="{{ $dateMachine }}" 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 >{{ $dateHuman }}</time
> >
{{ if gt .ReadingTime 1 }} {{ if gt .ReadingTime 1 }}
@@ -94,10 +102,12 @@
<span <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 >~{{ .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> </a>
<!-- <span class="flex colums-auto flex-col justify-between"> --> <!-- <span class="flex colums-auto flex-col justify-between"> -->
<a <a

24
layouts/_default/single.html
View File

@@ -1,12 +1,12 @@
{{ define "main" }} {{ define "main" }}
<div <div
class="relative overflow-auto px-4 shadow-md shadow-gray-600 ring-1 ring-gray-800 mt-1 group" class="relative overflow-auto px-4 ring-1 ring-gray-800 dark:ring-gray-50 mt-1 group"
> >
<div class="grid font-mono md:grid-cols-12 md:space-x-10"> <div class="grid font-mono md:grid-cols-12 md:space-x-10">
<div class="hidden md:block md:col-span-1"></div> <div class="hidden md:block md:col-span-1"></div>
<div class="md:col-span-11"> <div class="md:col-span-11">
<h1 <h1
class="text-3xl font-medium uppercase md:py-4 md:text-4xl lg:text-5xl" class="text-3xl font-medium uppercase md:py-4 md:text-4xl lg:text-5xl dark:text-gray-50"
> >
{{ .Title }} {{ .Title }}
</h1> </h1>
@@ -14,23 +14,24 @@
</div> </div>
<div class="inset-x-2 -mx-4 space-y-1"> <div class="inset-x-2 -mx-4 space-y-1">
<hr class="border-t-2 border-black" /> <hr class="border-t-1 border-black dark:border-white" />
<hr class="border-t-2 border-black" /> <hr class="border-t-1 border-black dark:border-white" />
</div> </div>
<div class="md:grid md:grid-cols-12 grid-col-11 md:space-x-10 mb-10"> <div class="md:grid md:grid-cols-12 grid-col-11 md:space-x-10 mb-10">
<div <div
class="hidden font-mono md:block md:col-span-1 mt-6 cursor-default [writing-mode:vertical-rl]" 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> --> <!-- <h2 class="font-light uppercase md:text-2xl">The Secondary header goes here</h2> -->
<div class=" font-medium space-y-2"> <div class=" font-medium space-y-2 dark:text-white">
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }} {{ $dateHuman := .Date | time.Format ":date_long" }}
<time <time
datetime="{{ $dateMachine }}" datetime="{{ $dateMachine }}"
class="border border-black py-2 px-1 group-hover:bg-cyan-400" class="border border-black py-2 px-1 group-hover:bg-cyan-400 dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>{{ $dateHuman }} >{{ $dateHuman }}
</time> </time>
<span class="border border-black py-2 px-1 group-hover:bg-teal-400" <span
class="border border-black py-2 px-1 group-hover:bg-teal-400 dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>{{ .WordCount }} words >{{ .WordCount }} words
</span> </span>
@@ -41,7 +42,8 @@
{{ end }} {{ end }}
<span class="border border-black py-2 px-1 group-hover:bg-pink-400" <span
class="border border-black py-2 px-1 group-hover:bg-pink-400 dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
>~{{ .ReadingTime }} >~{{ .ReadingTime }}
{{ .Scratch.Get "timeUnit" }} {{ .Scratch.Get "timeUnit" }}
</span> </span>
@@ -49,10 +51,10 @@
</div> </div>
<div <div
class="prose prose-neutral lg:prose-lg md:col-span-11 col-span-12 md:mx-auto group-hover:prose-a:bg-violet-300 group-hover:prose-img:grayscale-0 prose-img:grayscale" class="prose prose-neutral dark:prose-invert lg:prose-lg md:col-span-11 col-span-12 md:mx-auto group-hover:prose-a:bg-violet-300 group-hover:prose-img:grayscale-0 prose-img:grayscale dark:group-hover:prose-a:text-black first-letter selection:bg-fuchsia-300 dark:selection:text-black"
> >
<div <div
class="invisible absolute inset-y-0 border-l-2 border-dashed border-black md:visible md:-ml-6" class="invisible absolute inset-y-0 border-l-2 border-dashed border-black dark:border-white md:visible md:-ml-6"
></div> ></div>
<img <img
@@ -65,7 +67,7 @@
</div> </div>
</div> </div>
<div class="inset-x-0 mb-10 -m-4"> <div class="inset-x-0 mb-10 -m-4">
<hr class="border-b-1 border-black" /> <hr class="border-b-1 border-black dark:border-white" />
</div> </div>
</div> </div>
<!-- {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} --> <!-- {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} -->

2
layouts/partials/footer.html
View File

@@ -1,6 +1,6 @@
{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }} {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
<div <div
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" 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 dark:text-gray-200 dark:ring-white dark:hover:ring-black"
> >
<span <span
><a href="https://github.com/avinal/box-box">Box Box</a> | A ><a href="https://github.com/avinal/box-box">Box Box</a> | A

4
layouts/partials/header.html
View File

@@ -1,7 +1,7 @@
{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }} {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
<div class="py-4"> <div class="py-4" onclick="toggleTheme()">
<h1 <h1
class="text-xl font-bold font-mono bg-gradient-to-r to-black hover:to-{{ $color }}-400 from-white" class="text-2xl font-bold font-mono bg-gradient-to-r to-black hover:to-{{ $color }}-400 from-white dark:text-white dark:to-white dark:from-neutral-900 cursor-default"
> >
{{ site.Title }} {{ site.Title }}
</h1> </h1>

6
layouts/partials/menu.html
View File

@@ -23,13 +23,13 @@
{{- range .menuEntries }} {{- range .menuEntries }}
{{- $attrs := dict "href" .URL }} {{- $attrs := dict "href" .URL }}
{{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }} {{- $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" }} {{- $classes := "min-width flex items-center justify-center border border-black text-center dark:border-white" }}
{{- if $page.IsMenuCurrent .Menu . }} {{- if $page.IsMenuCurrent .Menu . }}
{{- $classes = (printf "%s %s" $classes "bg-black text-white active") }} {{- $classes = (printf "%s %s" $classes "bg-black text-white active dark:text-black dark:bg-white") }}
{{- $attrs = merge $attrs (dict "aria-current" "page") }} {{- $attrs = merge $attrs (dict "aria-current" "page") }}
{{- else }} {{- else }}
{{- $classes = (printf "%s %s hover:bg-%s-400" $classes "bg-white text-black ancestor" $color) }} {{- $classes = (printf "%s %s hover:bg-%s-400" $classes "bg-white text-black dark:text-white dark:hover:text-black dark:hover:border-black dark:bg-neutral-900 ancestor" $color) }}
{{- $attrs = merge $attrs (dict "aria-current" "true") }} {{- $attrs = merge $attrs (dict "aria-current" "true") }}
{{- end }} {{- end }}