Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/negrel/hugo-theme-pico.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlexandre Negrel <negrel.dev@protonmail.com>2021-01-26 23:37:33 +0300
committerAlexandre Negrel <negrel.dev@protonmail.com>2021-01-26 23:37:33 +0300
commit8965487d66afe78ce73eba972e5362be26a9caca (patch)
tree8b64986974b268ebb8a3890aa94818ff394526cc
parent720f69bdb7918f625622626496660536cf1e7562 (diff)
parent22aa4c64c5cf3645db146b8d062fd12e7faba3a7 (diff)
Merge branch 'dark-mode'
Diffstat
-rw-r--r--assets/config/tailwind.config.js21
-rw-r--r--assets/sass/_theme.sass5
-rw-r--r--assets/sass/_variables.scss29
-rw-r--r--assets/sass/styles.sass3
-rw-r--r--layouts/_default/baseof.html4
-rw-r--r--layouts/index.html2
-rw-r--r--layouts/partials/button.html16
-rw-r--r--layouts/partials/card.html42
-rw-r--r--layouts/partials/contact_icons.html2
-rw-r--r--layouts/partials/header.html5
-rw-r--r--layouts/partials/taxonomy_list.html4
-rw-r--r--layouts/partials/widgets/bars.html4
-rw-r--r--layouts/partials/widgets/contact_form.html12
-rw-r--r--layouts/partials/widgets/hero.html15
-rw-r--r--layouts/partials/widgets/timeline.html15
-rw-r--r--layouts/taxonomy/list.html4
-rw-r--r--layouts/taxonomy/single.html5
17 files changed, 122 insertions, 66 deletions
diff --git a/assets/config/tailwind.config.js b/assets/config/tailwind.config.js
index 97bde37..ff7d5a1 100644
--- a/assets/config/tailwind.config.js
+++ b/assets/config/tailwind.config.js
@@ -26,6 +26,7 @@ maxHeight = generator({
});
module.exports = {
+ darkMode: 'media',
theme: {
inset,
extend: {
@@ -60,8 +61,19 @@ module.exports = {
'700': '#2f855a',
'800': '#276749',
'900': '#22543d',
- }
- }
+ },
+ primary: 'var(--color-primary)',
+ 'primary-dark': 'var(--color-primary-dark)',
+ 'primary-light': 'var(--color-primary-light)',
+
+ secondary: 'var(--color-secondary)',
+ 'secondary-dark': 'var(--color-secondary-dark)',
+ 'secondary-light': 'var(--color-secondary-light)',
+
+ accent: 'var(--color-accent)',
+ 'accent-dark': 'var(--color-accent-dark)',
+ 'accent-light': 'var(--color-accent-light)'
+ },
},
boxShadow: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
@@ -92,8 +104,11 @@ module.exports = {
}
},
variants: {
- backgroundColor: ['hover', 'active'],
+ backgroundColor: ['hover', 'active', 'dark'],
+ fontWeight: ['hover', 'focus'],
scale: ['hover', 'active'],
+ border: ['focus'],
+ textColor: ['hover', 'dark']
},
plugins: []
} \ No newline at end of file
diff --git a/assets/sass/_theme.sass b/assets/sass/_theme.sass
index 4583808..6c506f4 100644
--- a/assets/sass/_theme.sass
+++ b/assets/sass/_theme.sass
@@ -11,7 +11,7 @@ html
scroll-behavior: auto
*::selection
- @apply bg-green-200
+ @apply bg-accent-light
h1
@apply text-3xl font-serif my-6 tracking-tight
@@ -52,6 +52,3 @@ input:not([type='checkbox']):not([type='button']):not([type='submit']):not([type
input[type='submit'], input[type='reset']
@apply cursor-pointer px-2
-
-input:focus, textarea:focus, button:hover
- @apply border-green-300
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
new file mode 100644
index 0000000..d03e61c
--- /dev/null
+++ b/assets/sass/_variables.scss
@@ -0,0 +1,29 @@
+:root {
+ --color-primary: #212121;
+ --color-primary-dark: #000000;
+ --color-primary-light: #484848;
+
+ --color-secondary: #e9ecef;
+ --color-secondary-dark: #ced4da;
+ --color-secondary-light: #f8f9fa;
+
+ --color-accent: #48bb78;
+ --color-accent-dark: #43a76c;
+ --color-accent-light: #7deea7;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-primary: #dee2e6;
+ --color-primary-dark: #adb5bd;
+ --color-primary-light: #e9ecef;
+
+ --color-secondary: #161616;
+ --color-secondary-dark: #000000;
+ --color-secondary-light: #303030;
+
+ --color-accent: #9e44ae;
+ --color-accent-dark: #6d0e7e;
+ --color-accent-light: #d174e0;
+ }
+}
diff --git a/assets/sass/styles.sass b/assets/sass/styles.sass
index d48537a..5d0d224 100644
--- a/assets/sass/styles.sass
+++ b/assets/sass/styles.sass
@@ -1,3 +1,6 @@
+// Theme variables
+@import "_variables.scss"
+
// Fonts
@import "fonts/_all"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a0990db..4c5c8b8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,7 +7,7 @@
{{ partial "head/js.html" . }}
</head>
-<body class="min-h-screen bg-white relative pb-24">
+<body class="min-h-screen bg-secondary-light dark:bg-secondary text-primary relative pb-24">
<div id="top"></div>
{{- partial "dev/size-indicator.html" . -}}
@@ -24,7 +24,7 @@
<div class="absolute bottom-0 w-full">
{{- partial "footer.html" . -}}
- {{/* {{- partial "dev/parameters.html" . -}} */}}
+ {{/* {{- partial "dev/parameters.html" . -}} */}}
</div>
</body>
diff --git a/layouts/index.html b/layouts/index.html
index 7ec96c1..ee8722f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,7 @@
{{ $widget_path := printf "widgets/%s.html" $widget}}
{{ partial $widget_path $st }}
{{ if ne $widget "blank" }}
-<hr class="my-24">
+<hr class="my-24 border-secondary-dark dark:border-secondary-light">
{{ end }}
{{ end }}
{{ end }}
diff --git a/layouts/partials/button.html b/layouts/partials/button.html
new file mode 100644
index 0000000..32b14b1
--- /dev/null
+++ b/layouts/partials/button.html
@@ -0,0 +1,16 @@
+{{ $el := "button" }}
+{{ if isset . "el" }}
+{{ $el = .el }}
+{{ end }}
+
+{{ $defaultClass := "px-4 py-2 mx-2 rounded-sm text-center"}}
+{{ $attrs := merge .attrs (dict "class" (printf "%s %s" $defaultClass .attrs.class)) }}
+
+{{ $btnAttrs := "" }}
+{{ range $attrName, $attrValue := $attrs }}
+{{ $btnAttrs = printf "%s %s='%s'" $btnAttrs $attrName $attrValue }}
+{{ end }}
+
+{{ safeHTML (printf "<%v %v>" $el $btnAttrs) }}
+ {{ .content }}
+{{ safeHTML (printf "</%v>" $el) }} \ No newline at end of file
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
index 39719d9..b79bf14 100644
--- a/layouts/partials/card.html
+++ b/layouts/partials/card.html
@@ -1,25 +1,25 @@
-<div class="mb-4 border border-gray-300 rounded-md overflow-hidden">
+<div class="mb-4 border border-primary-light dark:border-secondary-light rounded-md overflow-hidden">
<a href="{{ .Permalink }}" class="no-underline block">
{{/* A span is used instead a div for accessibiliy, <a> tag can't wrap div elements */}}
- <span class="block">
- {{ with .Params.banner }}
- <div class="h-48 overflow-hidden bg-cover bg-center" style="background-image: url('{{ . | absURL }}');">
- </div>
- {{ end }}
- <div class="px-4 mt-3 mb-3">
- <h2 class="m-0 inline-block overflow-ellipsis">{{ .Title | emojify }}</h2>
- <span class="block no-underline font-thin text-gray-700 -mt-2">
- {{ dateFormat "02/01/2006" .Date }} &middot; {{ i18n "reading_time" . }}
- </span>
- </div>
- <div class="px-4 mb-3 text-gray-600 overflow-ellipsis">
- {{ with .Params.subtitle }}
- {{ . }}
- {{ else }}
- {{ substr .Plain 0 256 }}
+ <span class="block">
+ {{ with .Params.banner }}
+ <div class="h-48 overflow-hidden bg-cover bg-center" style="background-image: url('{{ . | absURL }}');">
+ </div>
{{ end }}
- <span class="text-xs mt-3 block no-underline">{{ i18n "read_more" }}...</span>
- </div>
- </span>
- </a>
+ <div class="px-4 mt-3 mb-3">
+ <h2 class="m-0 inline-block overflow-ellipsis">{{ .Title | emojify }}</h2>
+ <span class="block no-underline font-thin text-primary dark:text-primary-light -mt-2">
+ {{ dateFormat "02/01/2006" .Date }} &middot; {{ i18n "reading_time" . }}
+ </span>
+ </div>
+ <div class="px-4 mb-3 text-primary-dark overflow-ellipsis">
+ {{ with .Params.subtitle }}
+ {{ . }}
+ {{ else }}
+ {{ substr .Plain 0 256 }}
+ {{ end }}
+ <span class="text-xs mt-3 block no-underline">{{ i18n "read_more" }}...</span>
+ </div>
+ </span>
+ </a>
</div> \ No newline at end of file
diff --git a/layouts/partials/contact_icons.html b/layouts/partials/contact_icons.html
index 0d540d3..85aeb05 100644
--- a/layouts/partials/contact_icons.html
+++ b/layouts/partials/contact_icons.html
@@ -3,7 +3,7 @@
<a href="{{ .url }}" title="{{ .name }}"
class="bg-black rounded-full p-3 mx-2 my-2 transform hover:scale-110 active:scale-90 transition-transform duration-300 ease-in-out"
{{ if .blank }} target="_blank" {{ end }} {{ if strings.HasPrefix .url "http" }} rel="noopener" {{ end }}>
- <img src="{{ .icon | relURL }}" alt="{{ .alt }}" class="w-4 h-4 md:w-6 md:h-6">
+ <img src="{{ .icon | relURL }}" alt="{{ .alt }}" class="w-4 h-4 md:w-6 md:h-6 blend-diff">
</a>
{{ end }}
</div> \ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9de2499..c04044b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
{{ $page := . }}
-<header class="w-full flex items-center justify-between px-5 mx-auto md:mt-8 md:max-w-5xl pt-2 md:pt-0">
+<header class="w-full flex items-center justify-between px-5 mx-auto md:pt-8 md:max-w-5xl pt-5">
{{/* Pico responsive icon (square and text) */}}
<div class="flex items-center">
<a href="{{ .Site.Home.Permalink }}" class="inline-block font-bold no-underline select-none">
@@ -27,7 +27,8 @@
<nav class="">
{{ range .Site.Menus.main }}
- <a href="{{ .URL | relLangURL}}" class='mx-1 md:mx-2 hover:text-black no-underline'>
+ <a href="{{ .URL | relLangURL}}"
+ class='mx-1 md:mx-2 hover:text-primary-light dark:hover:text-primary-dark no-underline'>
{{ .Pre }} {{ i18n .Identifier }}
</a>
{{ end }}
diff --git a/layouts/partials/taxonomy_list.html b/layouts/partials/taxonomy_list.html
index 5db1710..6eb24aa 100644
--- a/layouts/partials/taxonomy_list.html
+++ b/layouts/partials/taxonomy_list.html
@@ -1,10 +1,10 @@
{{ range $name, $value_ := . }}
<a class="no-underline" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">
<div
- class="bg-grey-200 hover:bg-grey-300 active:bg-grey-400 rounded-full p-1 pr-2 mr-2 mb-3 flex-initial ease-in-out duration-200">
+ class="bg-secondary-dark dark:bg-secondary-light hover:bg-secondary rounded-full p-1 pr-2 mr-2 mb-3 flex-initial ease-in-out duration-200">
<img style="width: 30px; height: 30px;" class="inline rounded-full shadow-4" src=" {{ "icons/tag.svg" | relURL }}"
alt="tag icon">
- <span class="inline font-sans align-middle select-none text-xl mr-1 text-grey-600">{{ $name | upper }}</span>
+ <span class="inline font-sans align-middle select-none text-xl mr-1 blend-diff">{{ $name | upper }}</span>
</div>
</a>
{{ end }} \ No newline at end of file
diff --git a/layouts/partials/widgets/bars.html b/layouts/partials/widgets/bars.html
index 2687d11..336db31 100644
--- a/layouts/partials/widgets/bars.html
+++ b/layouts/partials/widgets/bars.html
@@ -16,8 +16,8 @@
<h2 class="inline-block">{{ .name }}</h2>
<div class="flex items-center">
<div class="h-4 flex-1 mr-4 shadow-2 rounded-sm bg-gray-200">
- <div class="h-full bg-green-300 rounded-sm"
- style="width: {{ .percent }}; background: radial-gradient( circle farthest-corner at 0.8% 3.1%, rgba(255,188,224,1) 0%, rgba(170,165,255,1) 46%, rgba(165,255,205,1) 100.2% );">
+ <div class="h-full bg-green-300 rounded-sm bg-gradient-to-r from-accent-light via-accent-dark to-accent"
+ style="width: {{ .percent }};">
</div>
</div>
<span class="font-bold">{{ .percent }}</span>
diff --git a/layouts/partials/widgets/contact_form.html b/layouts/partials/widgets/contact_form.html
index b47e96e..bae69fe 100644
--- a/layouts/partials/widgets/contact_form.html
+++ b/layouts/partials/widgets/contact_form.html
@@ -35,30 +35,32 @@
</label>
</div>
{{ end }}
+ {{ $class := "bg-secondary-light border-secondary focus:border-accent" }}
{{ if eq .type "textarea" }}
<textarea rows="5" {{ printf "name=%q" .name | safeHTMLAttr }} {{ printf "id=%q" .name | safeHTMLAttr }}
{{ printf "placeholder=%q" .placeholder | safeHTMLAttr }} {{ $minlength }} {{ $maxlength }}
- {{ if .required }} required {{ end }}></textarea>
+ {{ if .required }} required {{ end }} {{ printf "class='%s'" $class | safeHTMLAttr }}></textarea>
{{ else }}
{{ $type := .type | default "text" }}
<input {{ printf "type=%q" .type | safeHTMLAttr }} {{ printf "name=%q" .name | safeHTMLAttr }}
{{ printf "id=%q" .name | safeHTMLAttr }} {{ printf "placeholder=%q" .placeholder | safeHTMLAttr }}
- {{ $pattern }} {{ if .required }} required {{ end }}>
+ {{ $pattern }} {{ if .required }} required {{ end }}
+ {{ printf "class='%s'" $class | safeHTMLAttr }}>
{{ end }}
</div>
{{ end }}
{{ if .Params.useEmail }}
{{ with .Site.Params.email }}
- <a class="bg-gray-200 px-3 py-2 rounded-md mr-2 no-underline inline-block" href="mailto:{{ . }}">
+ <a class="bg-secondary-dark dark:bg-secondary-light px-3 py-2 rounded-md mr-2 no-underline inline-block" href="mailto:{{ . }}">
{{ i18n "contact_email" }}
</a>
{{ end }}
{{ end }}
<div class="float-right">
- <input type="reset" class="bg-gray-200 mr-2" value='{{ i18n "cancel" }}' />
- <input type="submit" class="bg-black text-white" value='{{ i18n "submit" }}' />
+ <input type="reset" class="bg-secondary-dark dark:bg-secondary-light mr-2" value='{{ i18n "cancel" }}' />
+ <input type="submit" class="bg-primary text-secondary" value='{{ i18n "submit" }}' />
</div>
</form>
</section> \ No newline at end of file
diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html
index d29c5f6..200fdfc 100644
--- a/layouts/partials/widgets/hero.html
+++ b/layouts/partials/widgets/hero.html
@@ -6,17 +6,14 @@
</div>
<div class="mx-auto mt-8 mb-8 md:mb-0 flex justify-center">
{{ range .Params.btn }}
- {{ $class := "border border-green-400 hover:text-white" }}
+ {{ $class := "border border-accent hover:border-accent-dark transition duration-300 ease-in-out no-underline hover:bg-accent-dark hover:text-secondary dark:hover:text-primary dark:text-primary" }}
{{ if .primary }}
- {{ $class = "bg-green-400 text-white"}}
+ {{ $class = printf "%s %s" $class "bg-accent text-secondary"}}
{{ end }}
- <a href="{{ .url | relLangURL }}" class="no-underline">
- <div
- class="px-4 py-2 mx-2 rounded-sm text-center hover:bg-green-500 active:bg-green-600 transition duration-300 ease-in-out {{ $class }}">
- {{ .label }}
- </div>
- </a>
+ {{ $btnAttrs := dict "class" $class "href" (.url | relLangURL)}}
+ {{ $btnOpt := dict "el" "a" "content" .label "attrs" $btnAttrs}}
+ {{ partial "button" $btnOpt }}
{{ end }}
</div>
@@ -24,7 +21,7 @@
{{ with .Params.hero_media }}
<div
- class="my-6 p-4 mx-auto max-w-3/4 sm:max-w-2/3 md:max-w-1/2 lg:relative lg:-right-10 xl:-right-16 shadow-soft relative">
+ class="my-6 p-4 mx-auto max-w-3/4 sm:max-w-2/3 md:max-w-1/2 lg:relative lg:-right-10 xl:-right-16 shadow-soft relative bg-secondary-light">
<img src="{{ . | relURL}}" alt="hero image" class="max-h-vh-3/4">
</div>
{{ end }}
diff --git a/layouts/partials/widgets/timeline.html b/layouts/partials/widgets/timeline.html
index c1b354c..73aa7b0 100644
--- a/layouts/partials/widgets/timeline.html
+++ b/layouts/partials/widgets/timeline.html
@@ -12,17 +12,17 @@
<div class="relative">
{{/* Timeline bar */}}
- <div class="h-full border-l border-black absolute left-0 md:absolute-center"></div>
+ <div class="h-full border-l border-primary-dark absolute left-0 md:absolute-center"></div>
<div>
{{ range $index, $period := .Params.period }}
{{ $even := modBool $index 2 }}
{{ $containerClass := "md:mr-auto pl-4 md:pl-0 md:pr-4"}}
- {{ $dateClass := "md:text-right font-thin text-grey-800 text-xl" }}
+ {{ $dateClass := "md:text-right font-light text-primary text-xl" }}
{{ if $even }}
{{ $containerClass = "md:ml-auto pl-4"}}
- {{ $dateClass = "font-thin text-grey-800 text-xl" }}
+ {{ $dateClass = "font-light text-primary text-xl" }}
{{ end }}
@@ -34,17 +34,18 @@
<div class="mb-4 {{ $dateClass }}">{{ $period.date_end | dateFormat $dateFormat }}
</div>
{{ end }}
- <div class="p-4 border border-black rounded-md transition ease-in-out duration-300 shadow-2 hover:shadow-8 ">
- <h2 class="inline-block my-0 text-grey-800">{{ .title | markdownify }}</h2>
+ <div
+ class="p-4 border-2 border-primary-light dark:border-secondary-light rounded-md transition ease-in-out duration-300 shadow-2 hover:shadow-8 ">
+ <h2 class="inline-block my-0 text-primary">{{ .title | markdownify }}</h2>
{{ with .location }}
<span class="mx-2">&middot; {{ . }}</span>
{{ end }}
- <h3 class="mt-1 mb-0 text-grey-700">{{ .subtitle | markdownify }}</h3>
+ <h3 class="mt-1 mb-0 text-primary-dark">{{ .subtitle | markdownify }}</h3>
{{ with .description }}
- <div class="mb-2 text-grey-800">
+ <div class="mb-2 text-primary">
<p>{{ . | markdownify }}</p>
</div>
{{ end }}
diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html
index 1b99f15..e4fe455 100644
--- a/layouts/taxonomy/list.html
+++ b/layouts/taxonomy/list.html
@@ -1,9 +1,9 @@
{{ define "main" }}
<div class="w-full lg:w-1/3 lg:pr-8 lg:sticky top-12">
- <p class="tracking-widest pb-0 text-xs text-gray-700">
+ <p class="tracking-widest pb-0 text-xs text-primary">
{{ i18n "tagged_in" | upper }}
</p>
- <h2 class="mt-0 text-3xl">
+ <h2 class="mt-0 text-3xl text-primary-dark dark:text-primary-light">
{{ .Name | upper }}
</h2>
<div>
diff --git a/layouts/taxonomy/single.html b/layouts/taxonomy/single.html
deleted file mode 100644
index dfee6ed..0000000
--- a/layouts/taxonomy/single.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ define "main" }}
-<div class="mx-auto mt-20 px-4 max-w-6xl">
- TEST
-</div>
-{{ end }} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-19 17:41:18 +0300