Browse Source

fix(theme): enable white theme variant

provides two more theme variants suitable for daytime reading
Josh Habdas 1 year ago
parent
commit
2addeaaa18
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
5 changed files with 31 additions and 16 deletions
  1. 17
    7
      README.md
  2. 5
    2
      assets/css/custom.css
  3. 1
    1
      layouts/_default/baseof.html
  4. 6
    4
      package.json
  5. 2
    2
      theme.toml

+ 17
- 7
README.md View File

@@ -1,6 +1,6 @@
1 1
 # After Dark
2 2
 
3
-> A deceptively simple dark theme for [Hugo](https://gohugo.io/).
3
+> A deceptively simple hacker theme for [Hugo](https://gohugo.io/).
4 4
 
5 5
 [![Latest NPM version](https://img.shields.io/npm/v/after-dark.svg?style=flat-square)](https://www.npmjs.com/package/after-dark)
6 6
 [![NPM downloads per month](https://img.shields.io/npm/dm/after-dark.svg?style=flat-square)](https://www.npmjs.com/package/after-dark)
@@ -22,12 +22,13 @@ Feature | Summary
22 22
 --------|--------
23 23
 [Quick Installer](#getting-started) | After Dark provides a cross-platform quick installer. One command is all you need to start creating a website with Hugo and After Dark.
24 24
 [Module System](#module-system) | Add additional functionality to your site using [Hugo Theme Components](https://gohugo.io/themes/theme-components/). After Dark includes a module system and a number of custom-built modules specifically designed to enhance your site.
25
+[Theme Variants](#theme-variants) | Choose from one of four color pallets and two different display modes for 8 unique looks. Toggle between them anytime directly from your site configuration.
25 26
 [Lazy Loading](#lazy-loading) | Decrease page load time and improve user experience on slower connections. After Dark includes [lazysizes](https://github.com/aFarkas/lazysizes), a zero-configuration JavaScript library, for frictionless lazy-loading of images, scripts, iFrames and more.
26 27
 [Social Engagement](#social-engagement) | After Dark provides automatic and configurable [Open Graph](http://ogp.me/) support, Twitter Cards and Telegram Instant View template to make social shares pop like 37 pieces of flair.
27 28
 [Search Optimization](#search-optimization) | Using [Schema Structured Data](https://moz.com/learn/seo/schema-structured-data) and meta tags, After Dark gives crawlers rich data about the site structure and content. No configuration required.
28 29
 [Post Images](#post-images) | Increase visual appeal of posts. After Dark enables configuration-driven post images which are lazy-loaded, responsive and automatically cropped for a consistent look-and-feel across your site.
29 30
 [Fuzzy Search](#fuzzy-search) | After Dark ships with an in-browser search app built with [Vue](https://vuejs.org/), [Fuse](http://fusejs.io/) and [Mark](https://markjs.io). Use it to quickly find crawlable content anywhere your site.
30
-[Personalization](#personalization) | Easily choose between one of several [theme variants](#theme-variants). Tweak CSS using the purpose-built [customization file](#custom-styles). Swap in [your own favicon](#favicon). Leverage [block templates](https://gohugo.io/templates/blocks) to quickly extend new custom layouts. And use [hack.css](https://hackcss.egoist.moe/dark.html) flexbox grids and CSS components to add style your site.
31
+[Personalization](#personalization) | Tweak CSS using the purpose-built [customization file](#custom-styles). Swap in [your own favicon](#favicon). Leverage [block templates](https://gohugo.io/templates/blocks) to quickly extend new custom layouts. And use [hack.css](https://hackcss.egoist.moe/dark.html) flexbox grids and CSS components to add style your site.
31 32
 [Content Reuse](#content-reuse) | Sometimes plan markdown isn't enough to build engaging page content. For this reason After Dark provides a number of reusable code snippets and shortcodes for adding things blockquotes, figure elements, coubs, videos, <a target="feature" href="https://hackcss.egoist.moe/">hackcss components</a> and more to your pages and posts. Use them to create completely custom layouts or simply spice up an old page.
32 33
 [Related Content](#related-content) | Promote more of your content to your site visitors. By offering your readers more content that's relevant to them you can increase your site's page views, the time spent on your site and reader loyalty.
33 34
 [Table of Contents](#table-of-contents) | Help users locate and share information in long posts. By providing a Table of Contents, users will spend less time scrolling to locate information in larger documents and are more likely to deep link to specific information on a page.
@@ -531,16 +532,25 @@ After Dark uses [hack.css](https://hackcss.egoist.moe/dark.html) to automaticall
531 532
 
532 533
 #### Theme Variants
533 534
 
534
-Choose between one of several theme variants. [`hack.css`](https://hackcss.egoist.moe/) provides two display modes and three color palettes. Mix and match directly from your `config.toml`:
535
+Choose between one of several theme variants. [`hack.css`](https://hackcss.egoist.moe/) provides two display modes and four different color palettes. Mix and match directly from your `config.toml`:
535 536
 
537
+```toml
538
+[params.hackcss]
539
+  mode = "standard" # White background with high-contrast text
540
+```
541
+
542
+```toml
543
+[params.hackcss]
544
+  mode = "hack" # Hack display mode
545
+  palette = "dark-grey" # Dark grey background
536 546
 ```
547
+
548
+```toml
537 549
 [params.hackcss]
538
-  disabled = false
539
-  mode = "standard"
540
-  palette = "dark-grey"
550
+  disabled = true # Disable hackcss for easier debugging
541 551
 ```
542 552
 
543
-Once updated take a look at the 404 page, `theme-color.html` partial, and add any [Custom Styles](#custom-styles) you desire.
553
+Once updated adjust the 404 page, `theme-color.html` partial, and add any [Custom Styles](#custom-styles) you desire.
544 554
 
545 555
 #### Custom Styles
546 556
 

+ 5
- 2
assets/css/custom.css View File

@@ -16,7 +16,10 @@ a[itemprop="url"] {
16 16
 a[itemprop="url"]:hover {
17 17
   color: #fff;
18 18
 }
19
-.muted,
19
+.muted, .help-block {
20
+  opacity: 0.70;
21
+}
22
+.hack .muted,
20 23
 .hack .help-block {
21
-  color: #e0e0e070;
24
+  color: #e0e0e0;
22 25
 }

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

@@ -40,7 +40,7 @@
40 40
   </head>
41 41
   {{ $hackcss_disabled := .Site.Params.hackcss.disabled | default false }}
42 42
   {{ $hackcss_mode := .Site.Params.hackcss.mode | default "hack" }}
43
-  {{ $hackcss_palette := .Site.Params.hackcss.palette | default "dark" }}
43
+  {{ $hackcss_palette := .Site.Params.hackcss.palette }}
44 44
   <body class="{{ if ne $hackcss_disabled true }}{{ $hackcss_mode }} {{ $hackcss_palette }} main container{{ end }}">
45 45
     <header>{{ block "header" . }}{{ end }}</header>
46 46
     <main>{{ block "main" . }}{{ end }}</main>

+ 6
- 4
package.json View File

@@ -1,13 +1,15 @@
1 1
 {
2 2
   "name": "after-dark",
3 3
   "version": "5.2.1",
4
-  "description": "A deceptively simple dark theme for Hugo.",
4
+  "description": "A deceptively simple hacker theme for Hugo.",
5 5
   "author": "Josh Habdas <jhabdas@protonmail.com>",
6 6
   "keywords": [
7
+    "docker",
7 8
     "hugo",
8
-    "dark",
9
-    "blog",
10
-    "theme"
9
+    "css",
10
+    "html",
11
+    "vuejs",
12
+    "bash"
11 13
   ],
12 14
   "repository": {
13 15
     "type": "git",

+ 2
- 2
theme.toml View File

@@ -1,7 +1,7 @@
1 1
 name = "After Dark"
2 2
 license = "WTFPL"
3 3
 licenselink = "https://git.habd.as/comfusion/after-dark/src/branch/master/COPYING"
4
-description = "A deceptively simple dark theme for Hugo."
4
+description = "A deceptively simple hacker theme for Hugo."
5 5
 homepage = "https://git.habd.as/comfusion/after-dark/"
6 6
 tags = [
7 7
   "personal",
@@ -11,12 +11,12 @@ tags = [
11 11
   "accessible",
12 12
   "search",
13 13
   "dark",
14
+  "light",
14 15
   "blog"
15 16
 ]
16 17
 features = [
17 18
   "Module System",
18 19
   "Lazy Loading",
19
-  "BPG Image Support",
20 20
   "Social Engagement",
21 21
   "Search Optimization",
22 22
   "Post Images",

Loading…
Cancel
Save