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: put some colors in the world

Browse Source 
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
Morumotto
2025-01-01 17:13:08 +05:30
parent e5f7f9e53e
commit 54b5b091fe
6 changed files with 70 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
assets/css/main.css
View File

@@ -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;
}

9
layouts/_default/list.html
View File

@@ -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

28
layouts/_default/single.html
View File

@@ -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>
<span>| {{ .WordCount }} words</span>
<time
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"
>| ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
>
<span class="border border-black py-2 px-1 hover:bg-pink-400"
>~{{ .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>

3
layouts/partials/footer.html
View File

@@ -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

7
layouts/partials/header.html
View File

@@ -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" .) }}

3
layouts/partials/menu.html
View File

@@ -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 }}