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: enable group coloring

Browse Source 
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
Morumotto
2025-01-01 20:37:09 +05:30
parent f1d6d1f8df
commit 4d907f161e
3 changed files with 31 additions and 25 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

42
layouts/_default/list.html
View File

@@ -4,7 +4,7 @@
{{ 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 hover:text-black hover:bg-%s-400 text-white bg-black capitalize 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" $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"
> >
@@ -17,16 +17,18 @@
</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 "> <h3 class="text-xl font-medium sm:text-3xl space-y-2">
{{ .LinkTitle }} {{ .LinkTitle }}
</h3> </h3>
<div class="inset-x-0 space-y-1 py-2"> <div class="inset-x-0 py-2">
<hr class="border-t-1 border-black" /> <hr class="border-t-2 border-black border-dashed" />
<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 datetime="{{ $dateMachine }}" class="text-gray-400" <time
datetime="{{ $dateMachine }}"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-light"
>{{ $dateHuman }}</time >{{ $dateHuman }}</time
> >
{{ if gt .ReadingTime 1 }} {{ if gt .ReadingTime 1 }}
@@ -36,10 +38,12 @@
{{ end }} {{ end }}
<span class="text-gray-400"> <span
| ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span class="border border-black py-1 px-2 group-hover:bg-pink-400 font-light"
> >~{{ .ReadingTime }}
<p class="break-all">{{ .Summary | truncate 200 }}</p> {{ .Scratch.Get "timeUnit" }}
</span>
<p class="break-all mt-2">{{ .Summary | truncate 200 }}</p>
</a> </a>
<!-- <span class=""> --> <!-- <span class=""> -->
@@ -58,7 +62,7 @@
> >
{{ 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 hover:text-black hover:bg-%s-400 text-white bg-black capitalize 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" $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 "
> >
@@ -72,13 +76,14 @@
<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 space-y-1 py-2"> <div class="inset-x-0 py-2">
<hr class="border-t-1 border-black" /> <hr class="border-t-1 border-dashed 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 datetime="{{ $dateMachine }}" class="text-gray-400" <time
datetime="{{ $dateMachine }}"
class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-light"
>{{ $dateHuman }}</time >{{ $dateHuman }}</time
> >
{{ if gt .ReadingTime 1 }} {{ if gt .ReadingTime 1 }}
@@ -88,10 +93,11 @@
{{ end }} {{ end }}
<span class="text-gray-400"> <span
| ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span class="border border-black py-1 px-2 group-hover:bg-pink-400 font-light"
>~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
> >
<p class="break-all">{{ .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

12
layouts/_default/single.html
View File

@@ -1,6 +1,6 @@
{{ define "main" }} {{ define "main" }}
<div <div
class="relative overflow-auto px-4 shadow-md shadow-gray-600 ring-1 ring-gray-800 mt-1" class="relative overflow-auto px-4 shadow-md shadow-gray-600 ring-1 ring-gray-800 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>
@@ -27,10 +27,10 @@
{{ $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 hover:bg-cyan-400" class="border border-black py-2 px-1 group-hover:bg-cyan-400"
>{{ $dateHuman }} >{{ $dateHuman }}
</time> </time>
<span class="border border-black py-2 px-1 hover:bg-teal-400" <span class="border border-black py-2 px-1 group-hover:bg-teal-400"
>{{ .WordCount }} words >{{ .WordCount }} words
</span> </span>
@@ -41,7 +41,7 @@
{{ end }} {{ end }}
<span class="border border-black py-2 px-1 hover:bg-pink-400" <span class="border border-black py-2 px-1 group-hover:bg-pink-400"
>~{{ .ReadingTime }} >~{{ .ReadingTime }}
{{ .Scratch.Get "timeUnit" }} {{ .Scratch.Get "timeUnit" }}
</span> </span>
@@ -49,14 +49,14 @@
</div> </div>
<div <div
class="prose prose-neutral lg:prose-lg md:col-span-11 col-span-12 md:mx-auto" 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"
> >
<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 md:visible md:-ml-6"
></div> ></div>
<img <img
class="object-cover w-full h-60 sm:h-96 grayscale hover:grayscale-0" class="object-cover w-full h-60 sm:h-96"
src="{{ .Params.Image | absURL }}" src="{{ .Params.Image | absURL }}"
alt="{{ .Title }}" alt="{{ .Title }}"
/> />