Browse Source

feat(personalization): add customizable accent colors

Josh Habdas 1 year ago
parent
commit
bf251a6918
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
4 changed files with 97 additions and 51 deletions
  1. 56
    41
      README.md
  2. 0
    1
      layouts/_default/baseof.html
  3. 30
    8
      layouts/partials/global-styles.html
  4. 11
    1
      layouts/partials/meta/theme-color.html

+ 56
- 41
README.md View File

@@ -20,7 +20,7 @@ After Dark is a minimalist dark theme and website starter kit created for use wi
20 20
 
21 21
 - **Extensible:** Using a combination of layout composition and inheritance After Dark may be used to create a large variety of page layouts and experiences without requiring theme modification. The theme comes preinstalled with an example layout for blog postings and an in-browser search app with full offline support. Styles included are fully customizable and may be disabled at any time for complete design freedom.
22 22
 
23
-After Dark enjoys a community-maintained [port for Gutenberg](https://www.getgutenberg.io/themes/after-dark/) for those who desire to experiment with an alternative to Hugo.
23
+After Dark enjoys a community-maintained [port for Gutenberg](https://www.getgutenberg.io/themes/after-dark/) for those who'd like to experiment with an alternative to Hugo.
24 24
 
25 25
 ## Demo & Tutorial
26 26
 
@@ -37,6 +37,8 @@ Feature | Summary
37 37
 [Section Menu](#section-menu) | Display an accessible site-wide navigation with links to content sections.
38 38
 [Display Variants](#display-variants) | Customize look-and-feel with one of six included display variations.
39 39
 [Custom Styles](#custom-styles) | Add to, override or disable theme styles for complete design control.
40
+[Accent Color](#theme-color) | Tell supporting browsers and OSes how they should style the UI surrounding your content.
41
+[SVG Favicon](#svg-favicon) | Help push browser standards forward by decorating your site with an SVG favicon.
40 42
 [Fuzzy Search](#fuzzy-search) | Find and share indexable content anywhere on your site. No registration required.
41 43
 [Code Highlighter](#code-highlighter) | Highlight code in over 160 languages without requiring JavaScript.
42 44
 [Post Images](#post-images) | Add graphics to your posts without touching an image editor.
@@ -44,12 +46,11 @@ Feature | Summary
44 46
 [Social Engagement](#social-engagement) | Share links to your site with optimal experience on Twitter, Telegram and more.
45 47
 [Search Optimization](#search-optimization) | Give crawlers rich information about your site structure and content.
46 48
 [Modification Dating](#modification-dating) | Recently updated content is flagged and made more discoverable to readers.
47
-[Index Blocking](#index-blocking) | Control what web crawlers see when they visit your site without using robots.txt.
49
+[Index Blocking](#index-blocking) | Hide pages from search engines without modifying robots.txt.
48 50
 [Referrer Policy](#referrer-policy) | Help protect your visitors from nosy neighbors with a simple site-wide policy.
49 51
 [Snippets](#snippets) | Adjust layouts, add form components and more without repeating yourself.
50 52
 [Related Content](#related-content) | Display links to relevant content below blog posts automatically.
51 53
 [Table of Contents](#table-of-contents) | Create collapsable content summaries with deep link and smooth-scroll support.
52
-[SVG Favicon](#svg-favicon) | So small you didn't even know it was there.
53 54
 [404 Page](#404-page) | Entertain users into staying when they experience linkrot on your site.
54 55
 
55 56
 ## Getting Started
@@ -127,7 +128,7 @@ See Hugo's [Menu docs](https://gohugo.io/content-management/menus/) for more inf
127 128
 
128 129
 ### Code Highlighter
129 130
 
130
-After Dark automatically highlights code written in more than 160 languages using a customized version of [One Dark Syntax](https://atom.io/themes/one-dark-syntax) with support for terminal browsers. To activate the code highlighter use the [`highlight` shortcode](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) or simply indicate the [highlighting language](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) with a fenced code block from within your page content, e.g. ```` ```js ````
131
+After Dark automatically highlights code written in more than 160 languages using a customized version of [One Dark Syntax](https://atom.io/themes/one-dark-syntax) with support for terminal browsers. To activate the code highlighter use the [`highlight` shortcode](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) or indicate the [highlighting language](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) with a fenced code block from within your page content, e.g. ```` ```js ````
131 132
 
132 133
 ![Syntax Highlighting screenshot](https://git.habd.as/comfusion/after-dark/raw/branch/master/images/docs/feat-syntax-highlighting-fs8.png "Example JavaScript highlighting with line numbers.")
133 134
 
@@ -144,7 +145,7 @@ Reference the Hugo [Syntax Highlighting](https://gohugo.io/content-management/sy
144 145
 
145 146
 If a web crawler can find it, so can you. Search for indexable content site-wide using the inbuilt JavaScript search app built with [Vue](https://vuejs.org/), [Fuse](http://fusejs.io/) and [Mark](https://markjs.io). Searches are fuzzy and typos are forgiven.
146 147
 
147
-To begin using fuzzy search simply create a section called `search` using the After Dark search layout like so:
148
+To begin using fuzzy search create a section called `search` using the After Dark search layout like so:
148 149
 
149 150
 ```
150 151
 └── content
@@ -329,7 +330,7 @@ Improve the experience for Telegram users by providing an [Instant View](https:/
329 330
 
330 331
 ![Open Graph sharing card screenshot](https://git.habd.as/comfusion/after-dark/raw/branch/master/images/docs/feat-instant-view-fs8.png "Example Telegram Instant View for After Dark")
331 332
 
332
-To create an Instant View for your site simply [create your own](https://instantview.telegram.org/my/) IV template modeling from the example here:
333
+To create an Instant View for your site [create your own](https://instantview.telegram.org/my/) IV template modeling from the example here:
333 334
 
334 335
 ```yaml
335 336
 # enable for items in the post section
@@ -366,7 +367,7 @@ The default set-up helps ensure your After Dark site will rank well in <abbr tit
366 367
 
367 368
 #### Webmaster Verification
368 369
 
369
-Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers simply add the following to your `config.toml` and fill in their respective values:
370
+Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers add the following to your `config.toml` and fill in their respective values:
370 371
 
371 372
 ```toml
372 373
 [params.seo.webmaster_verifications]
@@ -416,7 +417,7 @@ In addition to `date` and `publishdate`, it's also possible to set an expiry dat
416 417
 
417 418
 #### Index Blocking
418 419
 
419
-Just because a page appears in your `sitemap.xml` does not mean you want it to appear in a SERP. Examples of pages which will appear in your `sitemap.xml` that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages that simply list summaries of other pages.
420
+Just because a page appears in your `sitemap.xml` does not mean you want it to appear in a SERP. Examples of pages which will appear in your `sitemap.xml` that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages which list summaries of other pages.
420 421
 
421 422
 Though it's possible to block search indexing from a `robots.txt` file, After Dark makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked:
422 423
 
@@ -523,7 +524,7 @@ See the Hugo docs for additional [configuration options](http://gohugo.io/overvi
523 524
 
524 525
 ### Snippets
525 526
 
526
-Snippets are reusable bits of code you can sprinkle across your site to reduce repetition and improve consistency. After Dark provides several snippets to help you stay consistent and make your site easier to customize and maintain.
527
+Snippets are reusable bits of code you can sprinkle across your site to reduce repetition and improve consistency. After Dark provides several snippets to help make your site easier to customize and maintain.
527 528
 
528 529
 Take for example the included After Dark `blockquote` shortcode:
529 530
 
@@ -538,7 +539,7 @@ Take for example the included After Dark `blockquote` shortcode:
538 539
 </blockquote>
539 540
 ```
540 541
 
541
-Rather than repeat [`blockquote`](https://devdocs.io/html/element/blockquote) HTML in your content simply call the included shortcode within from your markdown files:
542
+Rather than repeat [`blockquote`](https://devdocs.io/html/element/blockquote) HTML in your content call the included shortcode within from your markdown files:
542 543
 
543 544
 ```html
544 545
 {{< blockquote cite="Bitly" citelink="https://bitly.is/2mkxskj" >}}
@@ -575,9 +576,9 @@ After Dark provides several options to give you more freedom and control over yo
575 576
 
576 577
 #### Display Variants
577 578
 
578
-Customize the look-and-feel of your site with variants. After Dark provides three dark color palettes and two display modes. Toggle between them anytime directly from your site configuration.
579
+Customize the look-and-feel of your site with display variants. After Dark provides three dark color palettes and two display modes. Toggle between them anytime directly from your site configuration.
579 580
 
580
-The default theme variant uses the `dark` color palette with the `hack` display mode. To modify it add the following to your site configuration and choose one of the available options:
581
+The default display variant uses the `dark` color palette with the `hack` display mode. To modify it add the following to your site configuration and choose one of the available options:
581 582
 
582 583
 ```toml
583 584
 [params.hackcss]
@@ -586,7 +587,7 @@ The default theme variant uses the `dark` color palette with the `hack` display
586 587
   palette = "dark" # Optional, choose from 'dark', 'dark-grey' and 'solarized-dark'
587 588
 ```
588 589
 
589
-Once updated review the included [404 Page](#404-page), override the [`theme-color.html` partial](layouts/partials/meta/theme-color.html) and tweak your [Custom Styles](#custom-styles) to suit your personal taste.
590
+Once updated review the [404 Page](#404-page), [Accent Color](#accent-color) and tweak your [Custom Styles](#custom-styles) to suit your personal taste.
590 591
 
591 592
 #### Custom Styles
592 593
 
@@ -594,52 +595,66 @@ Add to or override existing styles without modifying theme source.
594 595
 
595 596
 To add your own custom styles:
596 597
 
597
-1. Create a file named `custom.css` in your site's `assets/css` directory. If `assets/css` does not exist yet, simply create it:
598
+1. Create a file named `custom.css` in your site's `assets/css` directory. If it doesn't exist yet, simply create it:
598 599
 
599 600
     ```sh
600
-    cd flying-toasters && mkdir -p assets/css
601
+    mkdir -p assets/css && touch "$_"/custom.css
601 602
     ```
602 603
 
603
-2. Then add your own custom styles to `custom.css`.
604
-
605
-For example, to adjust the treatment of output from the included [`figure` shortcode](https://git.habd.as/comfusion/after-dark#snippets) add the following to your `custom.css`:
606
-
607
-```css
608
-figure {
609
-  margin-left: auto;
610
-  margin-right: auto;
611
-  text-align: center;
612
-}
613
-figure img {
614
-  max-width: 80%;
615
-}
616
-figure a {
617
-  border-bottom: none;
618
-}
619
-figure a:hover {
620
-  background-color: inherit;
621
-}
622
-```
604
+2. Then add any custom styles to `custom.css`. For example, to adjust the treatment of output from the included [`figure` shortcode](https://git.habd.as/comfusion/after-dark#snippets) add the following to your `custom.css`:
605
+
606
+    ```css
607
+    figure {
608
+      margin-left: auto;
609
+      margin-right: auto;
610
+      text-align: center;
611
+    }
612
+    figure img {
613
+      max-width: 80%;
614
+    }
615
+    figure a {
616
+      border-bottom: none;
617
+    }
618
+    figure a:hover {
619
+      background-color: inherit;
620
+    }
621
+    ```
623 622
 
624
-The above will center figures on the page, constrain their width to 80% of the available layout space and remove any link underlines.
623
+    The above will center figures on the page, constrain their width to 80% of the available layout space and remove any link underlines.
625 624
 
626
-**Heads up:** After Dark ships with some example color customizations in [its own `custom.css`](assets/css/custom.css) file. If you wish to keep these in your site, copy the styles within into your site-level `custom.css` file after creating it.
625
+**Heads up:** After Dark ships with some example customizations in [its own `custom.css`](assets/css/custom.css) file. If you wish to keep these in your site, copy the styles within into your site-level `custom.css` file after creating it.
627 626
 
628 627
 With `hugo serve` running, changes to your site `custom.css` will trigger an automatic rebuild and a live reload in any open browsers with JavaScript support.
629 628
 
630 629
 **How does this work?** Custom styles are concatenated into a `style` element in the document `head` along with theme and vendor styles. [Specificity](https://devdocs.io/css/specificity) in this file trumps what is output at the theme or vendor levels, so no `!important` hacks are strictly necessary to override anything. See the [Asset Bundling](https://gohugo.io/hugo-pipes/bundling/) Hugo docs for a better understanding of file concatenation using [Hugo Pipes](https://gohugo.io/hugo-pipes/).
631 630
 
632
-Finally, if you wish to disable all theme styles, simply disable the [Display Variant](#display-variants) after creating your `custom.css`.
631
+Finally, if you wish to disable all theme styles, disable the [Display Variant](#display-variants) after creating your `custom.css`.
632
+
633
+#### Accent Color
634
+
635
+Use [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) in the `<head>` of your pages to suggest the color that browsers and OSes should use if they customize the display of individual pages in their UIs with varying colors.
636
+
637
+If left unchanged, accent color is set automatically to background color of the [Display Variant](#display-variants). To customize the accent color add a CSS variable called `--theme-color` to your [Custom Styles](#custom-styles):
638
+
639
+```css
640
+:root {
641
+  --accent-color: rgba(1e2, .5e1, .5e0, +.25e2%); // functional syntax with floats value
642
+}
643
+```
644
+
645
+You may then start adding and [Using CSS variables](https://devdocs.io/css/using_css_variables) within your `custom.css` anywhere accent colors or other variables are desired.
633 646
 
634 647
 #### SVG Favicon
635 648
 
636
-After Dark ships with a featherweight SVG favicon embedded into every page. To customize or replace it create a file named `favicon.html` under `layouts/partials/head` within your site and place an [`icon` link](http://devdocs.io/html/link_types#icon) within it as illustrated in the included [`favicon.html` partial](layouts/partials/head/favicon.html).
649
+After Dark ships with a 224B SVG favicon embedded into every page.
650
+
651
+**Why SVG?** Though they don't enjoy broad support [yet](http://caniuse.com/#feat=link-icon-svg) they should. SVG favicons are extremely lightweight. And unlike traditional graphics, SVGs can be styled with CSS and even animated with JavaScript.
637 652
 
638
-**Why SVG?** Though they don't enjoy broad support [yet](http://caniuse.com/#feat=link-icon-svg) they should. SVG favicons are so lightweight they can be embedded in every page. And unlike traditional graphics, SVGs can be styled with CSS and even animated with JavaScript.
653
+To customize the favicon create a `favicon.html` under `layouts/partials/head` within your site and place an [`icon` link](http://devdocs.io/html/link_types#icon) within it as illustrated in the included [`favicon.html` partial](layouts/partials/head/favicon.html). If you're planning to optimize for specific [platform experiences](https://github.com/h5bp/html5-boilerplate/blob/6.1.0/dist/doc/extend.md#web-apps) this override file is a good place to add any additional tags required.
639 654
 
640 655
 #### 404 Page
641 656
 
642
-Linkrot can be embarrassing. If you forget to set your [page aliases](https://gohugo.io/content-management/urls/#aliases) when moving content aournd, or simply fat-finger a <kbd>CTRL+V</kbd> when sharing a link, don't send your users packing. After Dark includes a 404 page. Use it to encourage users to stick around when resources can't be located by redirecting users to `domain.example/404.html` where `domain.example` is your `baseURL` or `localhost:1313` if running locally with `hugo serve`.
657
+Linkrot can be embarrassing. If you forget to set your [page aliases](https://gohugo.io/content-management/urls/#aliases) when moving content around, or sipmly fat-finger a <kbd>CTRL+V</kbd> when sharing a link, don't send your users packing. After Dark includes a 404 page. Use it to encourage users to stick around when resources can't be located by redirecting users to `domain.example/404.html` where `domain.example` is your `baseURL` or `localhost:1313` if running locally with `hugo serve`.
643 658
 
644 659
 To customize the provided 404 page create a `404.html` in your site `layouts` directory and let [Hugo's Lookup Order](https://gohugo.io/templates/lookup-order/) do the rest.
645 660
 

+ 0
- 1
layouts/_default/baseof.html View File

@@ -18,7 +18,6 @@
18 18
     {{ template "_internal/twitter_cards.html" . }}
19 19
     {{ partial "meta/ogimage-maybe.html" . }}
20 20
     {{ partial "meta/telegram-channel-maybe.html" . }}
21
-    {{ partial "meta/theme-color.html" . }}
22 21
     {{ if eq .Kind "home" }}
23 22
       {{ partial "head/site-verification.html" . }}
24 23
     {{ end }}

+ 30
- 8
layouts/partials/global-styles.html View File

@@ -1,7 +1,11 @@
1 1
 {{ $custom := resources.Get "css/custom.css" }}
2
-
3 2
 {{ if eq .Site.Params.hackcss.disabled true }}
4
-  <style>{{ (slice $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
3
+  {{ with (slice $custom | resources.Concat "styles.css").Content }}
4
+    {{ if gt (len .) 0 }}
5
+      <style>{{ . | safeCSS }}</style>
6
+      {{ partial "meta/theme-color.html" . }}
7
+    {{ end }}
8
+  {{ end }}
5 9
 {{ else }}
6 10
   {{ $hack := resources.Get "css/vendor/hack/hack.css" }}
7 11
   {{ $standard := resources.Get "css/vendor/hack/standard.css" }}
@@ -11,21 +15,39 @@
11 15
   {{ $theme := resources.Get "css/theme.css" | minify }}
12 16
   {{ if eq .Site.Params.hackcss.palette "dark-grey" }}
13 17
     {{ if eq .Site.Params.hackcss.mode "standard" }}
14
-      <style>{{ (slice $hack $standard $darkgrey $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
18
+      {{ with (slice $hack $standard $darkgrey $theme $custom | resources.Concat "styles.css").Content }}
19
+        <style>{{ . | safeCSS }}</style>
20
+        {{ partial "meta/theme-color.html" . }}
21
+      {{ end }}
15 22
     {{ else }}
16
-      <style>{{ (slice $hack $darkgrey $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
23
+      {{ with (slice $hack $darkgrey $theme $custom | resources.Concat "styles.css").Content }}
24
+        <style>{{ . | safeCSS }}</style>
25
+        {{ partial "meta/theme-color.html" . }}
26
+      {{ end }}
17 27
     {{ end }}
18 28
   {{ else if eq .Site.Params.hackcss.palette "solarized-dark" }}
19 29
     {{ if eq .Site.Params.hackcss.mode "standard" }}
20
-      <style>{{ (slice $hack $standard $solarizeddark $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
30
+      {{ with (slice $hack $standard $solarizeddark $theme $custom | resources.Concat "styles.css").Content }}
31
+        <style>{{ . | safeCSS }}</style>
32
+        {{ partial "meta/theme-color.html" . }}
33
+      {{ end }}
21 34
     {{ else }}
22
-      <style>{{ (slice $hack $solarizeddark $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
35
+      {{ with (slice $hack $solarizeddark $theme $custom | resources.Concat "styles.css").Content }}
36
+        <style>{{ . | safeCSS }}</style>
37
+        {{ partial "meta/theme-color.html" . }}
38
+      {{ end }}
23 39
     {{ end }}
24 40
   {{ else }}
25 41
     {{ if eq .Site.Params.hackcss.mode "standard" }}
26
-      <style>{{ (slice $hack $standard $dark $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
42
+      {{ with (slice $hack $standard $dark $theme $custom | resources.Concat "styles.css").Content }}
43
+        <style>{{ . | safeCSS }}</style>
44
+        {{ partial "meta/theme-color.html" . }}
45
+      {{ end }}
27 46
     {{ else }}
28
-      <style>{{ (slice $hack $dark $theme $custom | resources.Concat "styles.css").Content | safeCSS }}</style>
47
+      {{ with (slice $hack $dark $theme $custom | resources.Concat "styles.css").Content }}
48
+        <style>{{ . | safeCSS }}</style>
49
+        {{ partial "meta/theme-color.html" . }}
50
+      {{ end }}
29 51
     {{ end }}
30 52
   {{ end }}
31 53
 {{ end }}

+ 11
- 1
layouts/partials/meta/theme-color.html View File

@@ -1 +1,11 @@
1
-<meta name="theme-color" content="#000">
1
+{{ $cssvar := "--accent-color:\\s*([^!;}]*).*" }}
2
+{{ $hackbg := "pre{background-color:([^!;}]*).*" }}
3
+{{ with index (findRE $cssvar . 1) 0 }}
4
+  <meta name="theme-color" content={{ strings.TrimRight " " (. | replaceRE $cssvar "$1") }}>
5
+{{ else }}
6
+  {{ with index (findRE $hackbg . 1) 0 }}
7
+    <meta name="theme-color" content={{ . | replaceRE $hackbg "$1" }}>
8
+  {{ else }}
9
+    <meta name="theme-color" content="#000">
10
+  {{ end }}
11
+{{ end }}

Loading…
Cancel
Save