Experience

Alert

Display contextual alert messages and dialogs.
.margin-reset { margin: 0; } Quick Example Toggle alert styling. 1{{< hackcss-alert type="info" >}} 2 {{< hackcss-button 3 type="primary" text="Toggle" 4 onclick="this.parentElement.classList.toggle('alert')" 5 />}} alert styling. 6{{< /hackcss-alert >}} Default with plain text and hidden comment: {{< hackcss-alert text="Alert Text" />}} {{< hackcss-alert >}}Inner Alert Text{{< /hackcss-alert >}} {{< hackcss-alert text="Alert Text" >}}Hidden Comment{{< /hackcss-alert >}} Alert Text Inner Alert Text Alert Text Default with formatted text:

Blockquote

Create pull quotes with citations and citation links.
With source: {{< blockquote cite="Mark Twain" text="The more things are forbidden, the more popular they become." />}} The more things are forbidden, the more popular they become. Mark Twain With anonymous source: {{< blockquote text="Obsessed is a word that the lazy use to describe the dedicated." />}} Obsessed is a word that the lazy use to describe the dedicated. N.N. With source and citation link: {{< blockquote citelink="https://style.

Button

Add colorful buttons to forms and pages.
Different types: {{< hackcss-button text="Default" />}} {{< hackcss-button text="Primary" type="primary" />}} {{< hackcss-button text="Success" type="success" />}} {{< hackcss-button text="Info" type="info" />}} {{< hackcss-button text="Warning" type="warning" />}} {{< hackcss-button text="Error" type="error" />}} Default Primary Success Info Warning Error Ghost types: {{< hackcss-button isghost="true" text="Default" />}} {{< hackcss-button isghost="true" text="Primary" type="primary" />}} {{< hackcss-button isghost="true" text="Success" type="success" />}} {{< hackcss-button isghost="true" text="Info" type="info" />}} {{< hackcss-button isghost="true" text="Warning" type="warning" />}} {{< hackcss-button isghost="true" text="Error" type="error" />}} Default Primary Success Info Warning Error Block-level:

Card

Display a bordered container with title area.
With header attribute and plain text: {{< hackcss-card header="Title" text="Lorem ipsum dolor sit amet" />}} Title Lorem ipsum dolor sit amet With header attribute and formatted text: {{< hackcss-card header="Hacker Ipsum" >}}<samp>Haxx0r ipsum true class firewall continue bytes recursively grep <b>Linus Torvalds</b> gobble Trojan horse d00dz baz. Crack bang <mark>ssh for int buffer</mark> sql fork mailbomb gnu then client salt spoof. Server python error throw sudo fatal while echo dereference concurrently.

Cell

Display a responsive cell inside a grid.
.margin-reset { margin: 0; } Quick Example 4 4 4 1{{< hackcss-grid >}} 2 {{< hackcss-cell class="-4of12" text="4" />}} 3 {{< hackcss-cell class="-4of12" text="4" />}} 4 {{< hackcss-cell class="-4of12" text="4" />}} 5{{< /hackcss-grid >}} With two columns of odd size: {{< hackcss-grid >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid >}} 4 8 With 12 columns: {{< hackcss-grid >}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< /hackcss-grid >}} 1 1 1 1 1 1 1 1 1 1 1 1 Enclosing Cards with various Buttons inside:

Code Highlighter

Highlight code written in more than 160 languages.
After Dark uses a customized version of One Dark Syntax to produce print-friendly code highlighting for more than 160 languages. .card-content .inner { overflow: scroll; height: 200px; } Supported Languages ABNF, ANTLR, APL, ActionScript, ActionScript 3, Ada, Angular2, ApacheConf, AppleScript, Awk, BNF, Ballerina, Base Makefile, Bash, Batchfile, BlitzBasic, Brainfuck, C, C#, C++, CFEngine3, CMake, COBOL, CSS, Cap'n Proto, Ceylon, ChaiScript, Cheetah, Clojure, CoffeeScript, Common Lisp, Coq, Crystal, Cython, DTD, Dart, Diff, Django/Jinja, Docker, EBNF, Elixir, Elm, EmacsLisp, Erlang, FSharp, Factor, Fish, Forth, Fortran, GAS, GDScript, GLSL, Genshi, Genshi HTML, Genshi Text, Gnuplot, Go, Go HTML Template, Go Text Template, Groovy, HTML, HTTP, Handlebars, Haskell, Haxe, Hexdump, Hy, INI, Idris, Io, JSON, JSX, Java, JavaScript, Julia, Kotlin, LLVM, Lighttpd configuration file, Lua, Mako, Mason, Mathematica, MiniZinc, Modula-2, MorrowindScript, MySQL, Myghty, NASM, Newspeak, Nginx configuration file, Nim, Nix, OCaml, Objective-C, Octave, Org Mode, PHP, PL/pgSQL, POVRay, PacmanConf, Perl, Pig, PkgConfig, PostScript, PostgreSQL SQL dialect, PowerShell, Prolog, Protocol Buffer, Puppet, Python, Python 3, QBasic, R, Racket, Ragel, Rexx, Ruby, Rust, SCSS, SPARQL, SQL, Sass, Scala, Scheme, Scilab, Smalltalk, Smarty, Snobol, Solidity, SquidConf, Swift, TASM, TOML, Tcl, Tcsh, TeX, Termcap, Terminfo, Terraform, Thrift, Transact-SQL, Turtle, Twig, TypeScript, TypoScript, TypoScriptCssData, TypoScriptHtmlData, VHDL, VimL, WDTE, XML, Xorg, YAML, cfstatement, markdown, reStructuredText, reg, systemverilog, verilog To activate the highlighter use the Hugo highlight shortcode or indicate the highlighting language in a fenced code block within your markdown:

Error Page

Give visitors a reason to stay when errors occur.
After Dark includes an animated 404 Page you can display when other pages cannot be found. The error page contains a full-screen background animation and “404” link with Ginsu treatment. Following the link navigates to the homepage. Interactive Example Adjust it from 404.html in the site content directory: ├── archetypes ├── content │ ├── post │ └── 404.html ├── layouts If the file doesn’t exist yet, copy it from the theme default:

Fetch Injection

Load external scripts and styles with incredible speed.
After Dark uses the Fetch Inject library to load and execute external scripts and styles faster than browsers are capable of otherwise. Fetch Injection was conceptualized and developed for After Dark to make it possible to deep-link to full-sized Image Gallery images without blocking page load and has other performance applications: Use Case Chrome Performance Comparison (4G simulated connection speed) Without Fetch Inject With Fetch Inject WordPress Twenty Seventeen ~3.

Figure

Present lazy-loaded images with LQIP support.
With low-quality image placeholder: {{< figure src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456" lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720" caption="Be Creative" attr="AK¥N Cakiner" attrlink="https://unsplash.com/@akin" >}} Be Creative AK¥N Cakiner See Figures in Hugo for additional usage.

Form

Collect, validate and handle user input.
With auto-focused Text Input requesting a new email address: {{< hackcss-form autocomplete="disabled" >}} {{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}} {{< /hackcss-form >}} With Text Input and Label inside Form Group running Fuzzy Search in new window: {{< hackcss-form id="search" action="/search/" target="_blank" >}} {{< hackcss-formgroup >}} {{< hackcss-label for="query" text="Search query:" />}} {{< hackcss-textinput id="query" type="search" name="s" form="search" >}} {{< /hackcss-formgroup >}} Search query: Two forms with a Button and Text Input inside Alert with Throbber:

Form Group

Use with Label to visualize control validation states.
Label states with Text Input: {{< hackcss-formgroup >}} {{< hackcss-label for="default" text="Default:" />}} {{< hackcss-textinput id="default" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="success" >}} {{< hackcss-label for="success" text="Success:" />}} {{< hackcss-textinput id="success" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="warning" >}} {{< hackcss-label for="warning" text="Warning:" />}} {{< hackcss-textinput id="warning" >}} {{< /hackcss-formgroup >}} {{< hackcss-formgroup state="error" >}} {{< hackcss-label for="error" text="Error:" />}} {{< hackcss-textinput id="error" >}} {{< /hackcss-formgroup >}} Default: Success: Warning: Error: Disabling Label and disabled Text Area with Help Block:

Grid

Display a responsive grid with cells.
.margin-reset { margin: 0; } Quick Example 4 4 4 1{{< hackcss-grid >}} 2 {{< hackcss-cell class="-4of12" text="4" />}} 3 {{< hackcss-cell class="-4of12" text="4" />}} 4 {{< hackcss-cell class="-4of12" text="4" />}} 5{{< /hackcss-grid >}} With two columns of odd size: {{< hackcss-grid >}} {{< hackcss-cell class="-4of12" text="4" />}} {{< hackcss-cell class="-8of12" text="8" />}} {{< /hackcss-grid >}} 4 8 With 12 columns: {{< hackcss-grid >}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< hackcss-cell class="-1of12" text="1" />}} {{< /hackcss-grid >}} 1 1 1 1 1 1 1 1 1 1 1 1 Enclosing Cards with various Buttons inside:

Help Block

Combine with form controls to guide user input.
Plain or formatted text: {{< hackcss-helpblock text="Plain text Help Block" />}} {{< hackcss-helpblock >}}<i>Italicized HTML Help Block</i>{{< /hackcss-helpblock >}} {{% hackcss-helpblock %}}**Bold Markdown Help Block**{{% /hackcss-helpblock %}} Plain text Help Block Italicized HTML Help Block Bold Markdown Help Block Used above and below Text Input with class attribute: {{< hackcss-formgroup >}} {{< hackcss-helpblock >}} <strong>Enter a <em>secure</em> password below:</strong> {{< /hackcss-helpblock >}} {{< hackcss-textinput type="password" minlength="27" >}} {{< hackcss-helpblock class="muted" text="Min.

JIT Requests

Maximize resources while minimizing external requests.
After Dark makes JIT requests for some external assets to cut down on resource consumption and increase page performance. Take the Code Highlighter stylesheet for example: .highlight,pre.highlight{background:#000;color:#abb2bf}.highlight pre{background:#000}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .ow{font-weight:700}.highlight .n,.highlight .nf,.highlight .nn,.highlight .o,.highlight .p{color:#abb2bf}.highlight .c,.highlight .c1,.highlight .cm,.highlight .cp,.highlight .cs{color:#5c6370;font-style:italic}.highlight .sr,.highlight .ss{color:#56b6c2}.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:#c678dd}.highlight .l,.highlight .ld,.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#98c379}.highlight .nt,.highlight .nx,.highlight .vi{color:#e06c75}.highlight .il,.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .

Label

Provide accessible captions for form controls.
Explicit label association with Text Input: {{< hackcss-label for="query" text="Search query:" />}} {{< hackcss-textinput type="search" id="query" >}} Search query: Implicit label association using Text Input and Help Block: {{< hackcss-form >}} {{< hackcss-label >}} {{< hackcss-helpblock text="Enter your Associate Tag:" />}} {{< hackcss-textinput name="AssociateTag" required="true" pattern="^\b\w*\b-20$" placeholder="associate-20" >}} {{< /hackcss-label >}} {{< /hackcss-form >}} Enter your Associate Tag: Combined with Form Group to show Text Input success state:

Last Modified

Help visitors understand when posts were last modified.
Denote posts with substantive changes or simply draw older, more relevant posts closer to the top of the listings with last modified. Modifications will be made obvious to visitors with a visible callout in post summaries and the original publish date will be kept intact in the post bylines. For robots, making this change will automatically update Schema Structured Data, RSS feeds and the lastmod setting in your Sitemap. Adjust last modified by adding a publishdate to post Front Matter and updating the date to the date and time you would like to show for the modification.

Lazy Loading

Defer loading of images, iframes and scripts.
After Dark uses lazySizes to prioritize loading of certain external resources to improve page load times and help reduce overall bandwidth consumption. Lazy loading works automatically for Post Images and when using the Figure Shortcode, or related Snippet, as seen here: Be Creative AK¥N Cakiner To use lazy loading in Custom Layouts or when creating your own Shortcodes adding the lazyload class and relevant data attributes as shown here:

Module System

Enhance functionality with prebuilt addon modules.
After Dark uses Hugo Theme Components to produce a system for including a number of prebuilt add-on Modules providing additional functionality. See Modules a summary of available modules.

Online Help

Complete self-hosted help guide and example website.
After Dark includes an extensive online help manual and example website. View help docs locally by navigating to http://localhost:1414 following a Quick Install or after running the Upgrade Script. Internet connection not required. If help is not running you may start it anytime via script: cd flying-toasters && \ ./themes/after-dark/bin/help Or simply create an alias and serve docs with live-reload: alias hs='hugo serve --navigateToChanged' && \ hs --port 1414 --source themes/after-dark/docs Help is included within the After Dark source code.

Post Bylines

Create human and machine readable bylines in posts.
After Dark creates rich post bylines automatically. Bylines include optional author name, word count, links to Taxonomy Pages and Structured Data. Example Byline Published [by author] [publishdate or date] in navigation and tagged links and taxonomy using [wordcount] words. If author is specified in Site Configuration params or post Front Matter it will be included automatically in the byline attributing the author: [params] author = "Billy Joe Jim Bob" # the guy behind the guy behind the guy Adjust hide_author in Site Configuration to suppress attribution site-wide:

Post Images

Add graphics to posts without touching an image editor.
Add visual appeal to your posts with post images. Post images appear above post content and leverage Hugo Image Processing and Lazy Loading to provide fully automatic, lazy-loaded responsive images with LQIP and built-in art direction. Be Creative. Photo: AK¥N Cakiner on Unsplash Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:

Progress

Show graphical progress bars with completion percentage.
Basic usage: {{< hackcss-progress value="40" >}} {{< hackcss-progress value="30" showpercent="true" >}} {{< hackcss-progress value="70" showpercent="true" filltext="pemuatan" >}} Inside an Alert: Stacked inside a Card: {{< hackcss-card header="Value-added Tax by Country" >}} {{< hackcss-progress value="16" showpercent="true" filltext="China – 增值税" >}} {{< hackcss-progress value="20" showpercent="true" filltext="France – TVA" >}} {{< hackcss-progress value="10" showpercent="true" filltext="Indonesia – PPN" >}} {{< hackcss-progress value="8" showpercent="true" filltext="Japan – 消費税" >}} {{< hackcss-progress value="15" showpercent="true" filltext="New Zealand – GST" >}} {{< hackcss-progress value="20" showpercent="true" filltext="United Kingdom – VAT" >}} {{< /hackcss-card >}} Value-added Tax by Country

Quick Install

One command is all you need to start a new website.
After Dark includes a portable installation script for quick set-up: .card-content .inner { overflow: scroll; max-height: 30em; } themes/after-dark/bin/install Expand to view script 1#!/bin/sh 2 3validate_hugo () { 4 # Exit with error if hugo is not installed 5 if ! hash hugo 2>/dev/null ; then 6 echo "Error: After Dark requires Hugo version 0.44 or greater" >&2; exit 1 7 fi 8 9 # Exit with error if not minimum required hugo version 10 re="v(0\d*\.

Select

List a group of options in a drop-down menu.
Basic usage: {{< hackcss-select >}} <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> {{< /hackcss-select >}} Option 1 Option 2 Option 3 With Label inside Form Group: {{< hackcss-formgroup name="poolgroup" >}} {{< hackcss-label for="pool" text="Mining pool:" />}} {{< hackcss-select id="pool" name="pool" >}} <option>moneroocean.stream</option> <option>etn.nanopool.org</option> <option>monero.hashvault.pro</option> {{< /hackcss-select >}} {{< /hackcss-formgroup >}} Mining pool: moneroocean.stream etn.nanopool.org monero.hashvault.pro

Text Area

Add a multi-line plain-text editing control.
Read-only with prefilled text: {{< hackcss-textarea readonly="true" text="Only this and nothing more." >}} Only this and nothing more. With spellcheck disabled: {{< hackcss-textarea spellcheck="false" >}} With 16 columns and hard wrapping enabled: {{< hackcss-textarea cols="16" wrap="hard" >}} Inside disabled form group with error label and placeholder: {{< hackcss-formgroup hastextarea="true" disabled="true" state="error" >}} {{< hackcss-label for="message" text="Message:" />}} {{< hackcss-textarea id="message" placeholder="Guestbook offline…" rows="10" >}} {{< /hackcss-formgroup >}} Message:

Text Input

Add a single-line plain-text editing control.
Basic usage: {{< hackcss-textinput >}} {{< hackcss-textinput type="password" >}} {{< hackcss-textinput type="email" placeholder="Please enter your email…" >}} {{< hackcss-textinput disabled="true" placeholder="Disabled" >}} With Label and Help Block in Form with custom validation: {{< hackcss-form >}} {{< hackcss-label >}} {{< hackcss-helpblock text="Enter your Associate Tag:" />}} {{< hackcss-textinput name="AssociateTag" required="true" pattern="^\b\w*\b-20$" placeholder="associate-20" >}} {{< /hackcss-label >}} {{< /hackcss-form >}} Enter your Associate Tag: In Form Group with warning Label and Help Block:

Throbber

Display a CSS-only loading indicator.
Basic usage: {{< hackcss-throbber >}} Inside a Button: {{< hackcss-button isghost="true" type="info" >}} Please wait&hellip; {{< hackcss-throbber >}} {{< /hackcss-button >}} Please wait… Customize by creating your own CSS-only loading indicator.

Upgrade Script

Check for After Dark updates and upgrade effortlessly.
To check for updates and automatically upgrade After Dark to the latest version simply run the upgrade script from your site directory: cd flying toasters && \ ./themes/after-dark/bin/upgrade If you’re already using the latest version the script will let you know: Did not upgrade after-dark. Already using latest version. If an update is available the script will download and install it automatically: Starting upgrade from 6.7.6 to 6.8.0 ...
Connecting to server…
0 hashes (0 h/s)