From 54b5b091fe373f49e9039086dc94ff9fe873dbde Mon Sep 17 00:00:00 2001 From: Avinal Kumar Date: Wed, 1 Jan 2025 17:13:08 +0530 Subject: [PATCH] feat: put some colors in the world Signed-off-by: Avinal Kumar --- assets/css/main.css | 46 +++++++++++++++++++++++++----------- layouts/_default/list.html | 9 +++++-- layouts/_default/single.html | 28 ++++++++++++++++------ layouts/partials/footer.html | 3 ++- layouts/partials/header.html | 7 +++++- layouts/partials/menu.html | 3 ++- 6 files changed, 70 insertions(+), 26 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index cf7f0fb..252898c 100644 --- a/assets/css/main.css +++ b/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; } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e3ecb74..52e050e 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -2,6 +2,9 @@
{{ 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 ) }}
@@ -41,7 +44,7 @@ {{ .Params.Category }} {{ 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 ) }}
@@ -90,7 +95,7 @@ {{ .Params.Category }} -
+
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateHuman := .Date | time.Format ":date_long" }} - - | {{ .WordCount }} words + + {{ .WordCount }} words {{ if gt .ReadingTime 1 }} {{ .Scratch.Set "timeUnit" "mins" }} @@ -35,17 +41,25 @@ {{ end }} - | ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }} + ~{{ .ReadingTime }} + {{ .Scratch.Get "timeUnit" }} +
-
+
+ {{ .Title }} {{ .Content }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 83fa7ee..531b07c 100644 --- a/layouts/partials/footer.html +++ b/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) }}
Box Box | A diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6d40fe6..aa071bb 100644 --- a/layouts/partials/header.html +++ b/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) }}
-

{{ site.Title }}

+

+ {{ site.Title }} +

{{ partial "menu.html" (dict "menuID" "main" "page" .) }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 97dda9d..2206e07 100644 --- a/layouts/partials/menu.html +++ b/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 }}