mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 18:15:31 +00:00
feat: add more color themes
also - rename theme_default to mode - port feedback comp
This commit is contained in:
George Cushen committed
1 parent
f295093397
commit
fef14e4b4c
19 files changed
+261
-72
No files matched your search
@@ -1,3 +1,31 @@
|
||||
:root {
|
||||
/* TW Neutral */
|
||||
--color-neutral-50: 250 250 250;
|
||||
--color-neutral-100: 245 245 245;
|
||||
--color-neutral-200: 229 229 229;
|
||||
--color-neutral-300: 212 212 212;
|
||||
--color-neutral-400: 163 163 163;
|
||||
--color-neutral-500: 115 115 115;
|
||||
--color-neutral-600: 82 82 82;
|
||||
--color-neutral-700: 64 64 64;
|
||||
--color-neutral-800: 38 38 38;
|
||||
--color-neutral-900: 23 23 23;
|
||||
--color-neutral-950: 10 10 10;
|
||||
|
||||
/* TW Zinc */
|
||||
--color-secondary-50: 250 250 250;
|
||||
--color-secondary-100: 244 244 245;
|
||||
--color-secondary-200: 228 228 231;
|
||||
--color-secondary-300: 212 212 216;
|
||||
--color-secondary-400: 161 161 170;
|
||||
--color-secondary-500: 113 113 122;
|
||||
--color-secondary-600: 82 82 91;
|
||||
--color-secondary-700: 63 63 70;
|
||||
--color-secondary-800: 39 39 42;
|
||||
--color-secondary-900: 24 24 27;
|
||||
--color-secondary-950: 9 9 11;
|
||||
}
|
||||
|
||||
.hbb-section {
|
||||
@apply mb-10 last:mb-0;
|
||||
}
|
||||
@@ -5,4 +5,3 @@
|
||||
@import "main.css";
|
||||
@import "./components/all.css";
|
||||
@import "./blox/all.css";
|
||||
@import "themes/default.css";
|
||||
@@ -0,0 +1,27 @@
|
||||
/* Hugo Blox color theme: BLUE */
|
||||
:root {
|
||||
/* TW Blue Palette */
|
||||
--color-primary-50: 239 246 255;
|
||||
--color-primary-100: 219 234 254;
|
||||
--color-primary-200: 191 219 254;
|
||||
--color-primary-300: 147 197 253;
|
||||
--color-primary-400: 96 165 250;
|
||||
--color-primary-500: 59 130 246;
|
||||
--color-primary-600: 37 99 235;
|
||||
--color-primary-700: 29 78 216;
|
||||
--color-primary-800: 30 64 175;
|
||||
--color-primary-900: 30 58 138;
|
||||
--color-primary-950: 23 37 84;
|
||||
/* TW Cyan Palette */
|
||||
--color-secondary-50: 236 254 255;
|
||||
--color-secondary-100: 207 250 254;
|
||||
--color-secondary-200: 165 243 252;
|
||||
--color-secondary-300: 103 232 249;
|
||||
--color-secondary-400: 34 211 238;
|
||||
--color-secondary-500: 6 182 212;
|
||||
--color-secondary-600: 8 145 178;
|
||||
--color-secondary-700: 14 116 144;
|
||||
--color-secondary-800: 21 94 117;
|
||||
--color-secondary-900: 22 78 99;
|
||||
--color-secondary-950: 8 51 68;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: CYAN */
|
||||
:root {
|
||||
--color-primary-50: 236 254 255;
|
||||
--color-primary-100: 207 250 254;
|
||||
--color-primary-200: 165 243 252;
|
||||
--color-primary-300: 103 232 249;
|
||||
--color-primary-400: 34 211 238;
|
||||
--color-primary-500: 6 182 212;
|
||||
--color-primary-600: 8 145 178;
|
||||
--color-primary-700: 14 116 144;
|
||||
--color-primary-800: 21 94 117;
|
||||
--color-primary-900: 22 78 99;
|
||||
--color-primary-950: 8 51 68;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
/* Default Wowchemy color theme */
|
||||
:root {
|
||||
/* Neutral */
|
||||
--color-neutral: 255, 255, 255;
|
||||
--color-neutral-50: 248, 250, 252;
|
||||
--color-neutral-100: 241, 245, 249;
|
||||
--color-neutral-200: 226, 232, 240;
|
||||
--color-neutral-300: 203, 213, 225;
|
||||
--color-neutral-400: 148, 163, 184;
|
||||
--color-neutral-500: 100, 116, 139;
|
||||
--color-neutral-600: 71, 85, 105;
|
||||
--color-neutral-700: 51, 65, 85;
|
||||
--color-neutral-800: 30, 41, 59;
|
||||
--color-neutral-900: 15, 23, 42;
|
||||
/* TW Blue Palette */
|
||||
--color-primary-50: 239, 246, 255;
|
||||
--color-primary-100: 219, 234, 254;
|
||||
--color-primary-200: 191, 219, 254;
|
||||
--color-primary-300: 147, 197, 253;
|
||||
--color-primary-400: 96, 165, 250;
|
||||
--color-primary-500: 59, 130, 246;
|
||||
--color-primary-600: 37, 99, 235;
|
||||
--color-primary-700: 29, 78, 216;
|
||||
--color-primary-800: 30, 64, 175;
|
||||
--color-primary-900: 30, 58, 138;
|
||||
/* TW Cyan Palette */
|
||||
--color-secondary-50: 236, 254, 255;
|
||||
--color-secondary-100: 207, 250, 254;
|
||||
--color-secondary-200: 165, 243, 252;
|
||||
--color-secondary-300: 103, 232, 249;
|
||||
--color-secondary-400: 34, 211, 238;
|
||||
--color-secondary-500: 6, 182, 212;
|
||||
--color-secondary-600: 8, 145, 178;
|
||||
--color-secondary-700: 14, 116, 144;
|
||||
--color-secondary-800: 21, 94, 117;
|
||||
--color-secondary-900: 22, 78, 99;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: GREEN */
|
||||
:root {
|
||||
--color-primary-50: 240 253 244;
|
||||
--color-primary-100: 220 252 231;
|
||||
--color-primary-200: 187 247 208;
|
||||
--color-primary-300: 134 239 172;
|
||||
--color-primary-400: 74 222 128;
|
||||
--color-primary-500: 34 197 94;
|
||||
--color-primary-600: 22 163 74;
|
||||
--color-primary-700: 21 128 61;
|
||||
--color-primary-800: 22 101 52;
|
||||
--color-primary-900: 20 83 45;
|
||||
--color-primary-950: 5 46 22;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: INDIGO */
|
||||
:root {
|
||||
--color-primary-50: 238 242 255;
|
||||
--color-primary-100: 224 231 255;
|
||||
--color-primary-200: 199 210 254;
|
||||
--color-primary-300: 165 180 252;
|
||||
--color-primary-400: 129 140 248;
|
||||
--color-primary-500: 99 102 241;
|
||||
--color-primary-600: 79 70 229;
|
||||
--color-primary-700: 67 56 202;
|
||||
--color-primary-800: 55 48 163;
|
||||
--color-primary-900: 49 46 129;
|
||||
--color-primary-950: 30 27 75;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: PURPLE */
|
||||
:root {
|
||||
--color-primary-50: 250 245 255;
|
||||
--color-primary-100: 243 232 255;
|
||||
--color-primary-200: 233 213 255;
|
||||
--color-primary-300: 216 180 254;
|
||||
--color-primary-400: 192 132 252;
|
||||
--color-primary-500: 168 85 247;
|
||||
--color-primary-600: 147 51 234;
|
||||
--color-primary-700: 126 34 206;
|
||||
--color-primary-800: 107 33 168;
|
||||
--color-primary-900: 88 28 135;
|
||||
--color-primary-950: 59 7 100;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: RED */
|
||||
:root {
|
||||
--color-primary-50: 254 242 242;
|
||||
--color-primary-100: 254 226 226;
|
||||
--color-primary-200: 254 202 202;
|
||||
--color-primary-300: 252 165 165;
|
||||
--color-primary-400: 248 113 113;
|
||||
--color-primary-500: 239 68 68;
|
||||
--color-primary-600: 220 38 38;
|
||||
--color-primary-700: 185 28 28;
|
||||
--color-primary-800: 153 27 27;
|
||||
--color-primary-900: 127 29 29;
|
||||
--color-primary-950: 69 10 10;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: ROSE */
|
||||
:root {
|
||||
--color-primary-50: 255 241 242;
|
||||
--color-primary-100: 255 228 230;
|
||||
--color-primary-200: 254 205 211;
|
||||
--color-primary-300: 253 164 175;
|
||||
--color-primary-400: 251 113 133;
|
||||
--color-primary-500: 244 63 94;
|
||||
--color-primary-600: 225 29 72;
|
||||
--color-primary-700: 190 18 60;
|
||||
--color-primary-800: 159 18 57;
|
||||
--color-primary-900: 136 19 55;
|
||||
--color-primary-950: 76 5 25;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: SKY */
|
||||
:root {
|
||||
--color-primary-50: 240 249 255;
|
||||
--color-primary-100: 224 242 254;
|
||||
--color-primary-200: 186 230 253;
|
||||
--color-primary-300: 125 211 252;
|
||||
--color-primary-400: 56 189 248;
|
||||
--color-primary-500: 14 165 233;
|
||||
--color-primary-600: 2 132 199;
|
||||
--color-primary-700: 3 105 161;
|
||||
--color-primary-800: 7 89 133;
|
||||
--color-primary-900: 12 74 110;
|
||||
--color-primary-950: 8 47 73;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: TEAL */
|
||||
:root {
|
||||
--color-primary-50: 240 253 250;
|
||||
--color-primary-100: 204 251 241;
|
||||
--color-primary-200: 153 246 228;
|
||||
--color-primary-300: 94 234 212;
|
||||
--color-primary-400: 45 212 191;
|
||||
--color-primary-500: 20 184 166;
|
||||
--color-primary-600: 13 148 136;
|
||||
--color-primary-700: 15 118 110;
|
||||
--color-primary-800: 17 94 89;
|
||||
--color-primary-900: 19 78 74;
|
||||
--color-primary-950: 4 47 46;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* Hugo Blox color theme: ZINC */
|
||||
:root {
|
||||
--color-primary-50: 250 250 250;
|
||||
--color-primary-100: 244 244 245;
|
||||
--color-primary-200: 228 228 231;
|
||||
--color-primary-300: 212 212 216;
|
||||
--color-primary-400: 161 161 170;
|
||||
--color-primary-500: 113 113 122;
|
||||
--color-primary-600: 82 82 91;
|
||||
--color-primary-700: 63 63 70;
|
||||
--color-primary-800: 39 39 42;
|
||||
--color-primary-900: 24 24 27;
|
||||
--color-primary-950: 9 9 11;
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
{{ printf "<!-- Last Published: %s -->" (now | time.Format ":date_long") | safeHTML }}
|
||||
{{- $language_code := site.LanguageCode | default "en-us" -}}
|
||||
<html lang="{{$language_code}}" {{ if in site.Data.i18n.rtl.rtl $language_code }}dir="rtl"{{else}}dir="ltr"{{end}}
|
||||
data-wc-theme-default="{{ site.Params.appearance.theme_default | default "system" }}">
|
||||
data-wc-theme-default="{{ (lower site.Params.appearance.mode) | default "system" }}">
|
||||
{{ partial "site_head" . }}
|
||||
<body class="dark:bg-gray-800 dark:text-white-800 page-wrapper">
|
||||
<div id="page-bg"></div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<a href="{{ .RelPermalink }}" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
|
||||
{{ .Name }}
|
||||
<span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
|
||||
<span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-primary-800 bg-primary-200 rounded-full">
|
||||
{{ $count }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
{{/* TODO: port JS & response text from Bootstrap module. Re-integrate with GA plus Fathom/Plausible */}}
|
||||
{{/* $ga := site.Params.marketing.analytics.google_analytics | default site.GoogleAnalytics | default "" */}}
|
||||
{{ $show_feedback := .Params.feedback | default true }}
|
||||
|
||||
{{ if hugo.IsProduction | and $show_feedback }}{{/* | and $ga */}}
|
||||
<div class="
|
||||
mt-3
|
||||
bg-[#EAEEF6]
|
||||
dark:bg-[#1F2938] dark:text-[#e2e8f0]
|
||||
shadow-sm
|
||||
pt-5
|
||||
pb-5
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
flex-col
|
||||
rounded-md
|
||||
">
|
||||
<div class="contents">
|
||||
<div class="opacity-60">
|
||||
{{ i18n "feedback_widget_question" | default "Was this page helpful?" }}
|
||||
</div>
|
||||
<div class="flex items-center justify-around mt-3">
|
||||
<div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
😞
|
||||
</div>
|
||||
<div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
😐
|
||||
</div>
|
||||
<div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
🤩
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -45,6 +45,16 @@
|
||||
{{ end }}
|
||||
<link rel="alternate" hreflang="{{ site.LanguageCode | default "en-us" }}" href="{{ .Permalink }}" />
|
||||
|
||||
{{/* Hugo Blox Color Theme Initialization */}}
|
||||
{{ $theme_name := (lower site.Params.appearance.color) | default "blue" }}
|
||||
{{ $theme_path := printf "css/themes/%s.css" $theme_name }}
|
||||
{{ if not (fileExists (printf "assets/%s" $theme_path)) }}
|
||||
{{ errorf "The specified color theme `%s.css` was not found in `assets/css/themes/`. Either install your custom color theme in the folder or set the `color` theme value in `params.yaml` to an existing theme such as `blue`." }}
|
||||
{{ else }}
|
||||
{{ $theme_css := resources.Get $theme_path | minify }}
|
||||
<link rel="stylesheet" href="{{ $theme_css.RelPermalink }}" />
|
||||
{{ end }}
|
||||
|
||||
{{/* Style */}}
|
||||
{{ if fileExists "assets/dist/wc.css" }}
|
||||
{{ $styles := resources.Get "dist/wc.css" }}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{{ if .Param $taxonomy }}
|
||||
<div class="flex justify-center">
|
||||
{{ range $index, $value := (.GetTerms $taxonomy) }}
|
||||
<a class="no-underline bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-blue-900 dark:text-blue-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
<a class="no-underline bg-primary-100 text-primary-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-primary-900 dark:text-primary-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -13,41 +13,41 @@ module.exports = {
|
||||
extend: {
|
||||
colors: {
|
||||
neutral: {
|
||||
DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",
|
||||
50: "rgba(var(--color-neutral-50), <alpha-value>)",
|
||||
100: "rgba(var(--color-neutral-100), <alpha-value>)",
|
||||
200: "rgba(var(--color-neutral-200), <alpha-value>)",
|
||||
300: "rgba(var(--color-neutral-300), <alpha-value>)",
|
||||
400: "rgba(var(--color-neutral-400), <alpha-value>)",
|
||||
500: "rgba(var(--color-neutral-500), <alpha-value>)",
|
||||
600: "rgba(var(--color-neutral-600), <alpha-value>)",
|
||||
700: "rgba(var(--color-neutral-700), <alpha-value>)",
|
||||
800: "rgba(var(--color-neutral-800), <alpha-value>)",
|
||||
900: "rgba(var(--color-neutral-900), <alpha-value>)",
|
||||
DEFAULT: "rgb(var(--color-neutral) / <alpha-value>)",
|
||||
50: "rgb(var(--color-neutral-50) / <alpha-value>)",
|
||||
100: "rgb(var(--color-neutral-100) / <alpha-value>)",
|
||||
200: "rgb(var(--color-neutral-200) / <alpha-value>)",
|
||||
300: "rgb(var(--color-neutral-300) / <alpha-value>)",
|
||||
400: "rgb(var(--color-neutral-400) / <alpha-value>)",
|
||||
500: "rgb(var(--color-neutral-500) / <alpha-value>)",
|
||||
600: "rgb(var(--color-neutral-600) / <alpha-value>)",
|
||||
700: "rgb(var(--color-neutral-700) / <alpha-value>)",
|
||||
800: "rgb(var(--color-neutral-800) / <alpha-value>)",
|
||||
900: "rgb(var(--color-neutral-900) / <alpha-value>)",
|
||||
},
|
||||
primary: {
|
||||
50: "rgba(var(--color-primary-50), <alpha-value>)",
|
||||
100: "rgba(var(--color-primary-100), <alpha-value>)",
|
||||
200: "rgba(var(--color-primary-200), <alpha-value>)",
|
||||
300: "rgba(var(--color-primary-300), <alpha-value>)",
|
||||
400: "rgba(var(--color-primary-400), <alpha-value>)",
|
||||
500: "rgba(var(--color-primary-500), <alpha-value>)",
|
||||
600: "rgba(var(--color-primary-600), <alpha-value>)",
|
||||
700: "rgba(var(--color-primary-700), <alpha-value>)",
|
||||
800: "rgba(var(--color-primary-800), <alpha-value>)",
|
||||
900: "rgba(var(--color-primary-900), <alpha-value>)",
|
||||
50: "rgb(var(--color-primary-50) / <alpha-value>)",
|
||||
100: "rgb(var(--color-primary-100) / <alpha-value>)",
|
||||
200: "rgb(var(--color-primary-200) / <alpha-value>)",
|
||||
300: "rgb(var(--color-primary-300) / <alpha-value>)",
|
||||
400: "rgb(var(--color-primary-400) / <alpha-value>)",
|
||||
500: "rgb(var(--color-primary-500) / <alpha-value>)",
|
||||
600: "rgb(var(--color-primary-600) / <alpha-value>)",
|
||||
700: "rgb(var(--color-primary-700) / <alpha-value>)",
|
||||
800: "rgb(var(--color-primary-800) / <alpha-value>)",
|
||||
900: "rgb(var(--color-primary-900) / <alpha-value>)",
|
||||
},
|
||||
secondary: {
|
||||
50: "rgba(var(--color-secondary-50), <alpha-value>)",
|
||||
100: "rgba(var(--color-secondary-100), <alpha-value>)",
|
||||
200: "rgba(var(--color-secondary-200), <alpha-value>)",
|
||||
300: "rgba(var(--color-secondary-300), <alpha-value>)",
|
||||
400: "rgba(var(--color-secondary-400), <alpha-value>)",
|
||||
500: "rgba(var(--color-secondary-500), <alpha-value>)",
|
||||
600: "rgba(var(--color-secondary-600), <alpha-value>)",
|
||||
700: "rgba(var(--color-secondary-700), <alpha-value>)",
|
||||
800: "rgba(var(--color-secondary-800), <alpha-value>)",
|
||||
900: "rgba(var(--color-secondary-900), <alpha-value>)",
|
||||
50: "rgb(var(--color-secondary-50) / <alpha-value>)",
|
||||
100: "rgb(var(--color-secondary-100) / <alpha-value>)",
|
||||
200: "rgb(var(--color-secondary-200) / <alpha-value>)",
|
||||
300: "rgb(var(--color-secondary-300) / <alpha-value>)",
|
||||
400: "rgb(var(--color-secondary-400) / <alpha-value>)",
|
||||
500: "rgb(var(--color-secondary-500) / <alpha-value>)",
|
||||
600: "rgb(var(--color-secondary-600) / <alpha-value>)",
|
||||
700: "rgb(var(--color-secondary-700) / <alpha-value>)",
|
||||
800: "rgb(var(--color-secondary-800) / <alpha-value>)",
|
||||
900: "rgb(var(--color-secondary-900) / <alpha-value>)",
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
|
||||
Reference in new issue
Block a user