.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:

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:

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:

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.

Contained by Grid with three columns of equal size: 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 >}} 4 4 4 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:

After Dark includes a source build of htmltest which may be used to analyze HTML generated for problems such as linkrot, meta attributes and more. Code analysis is ideal for identifying potential 404 errors and determining when to link to the archived version of an external page which has gone offline. To use install Docker then run the following command: cd after-dark/docker/htmltest && docker build --rm . Build container uses Alpine and includes musl-dev for high-performance.

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, Arduino, 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, Graphql, 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, Matlab, 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, Turing, Turtle, Twig, TypeScript, TypoScript, TypoScriptCssData, TypoScriptHtmlData, VHDL, VimL, WDTE, XML, Xorg, YAML, cfstatement, markdown, reStructuredText, reg, systemverilog, verilog To activate the highlighter indicate the highlighting language in a fenced code block within your markdown:

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.

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.

With progressive image placeholder: {{< figure alt="Artistic map" src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" title="Map of Bali in Watercolor" attr="Stamen Design" attrlink="https://maps.stamen.com/" >}} Map of Bali in Watercolor Stamen Design Above as a Snippet used in a Custom Layout: {{partial"components/figure.html"(dict"alt""Artistic map""src""/images/watercolor_pTIyYTqAlF8_w936h455.jpeg""lqipsrc""/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg""title""Map of Bali in Watercolor""attr""Stamen Design""attrlink""https://maps.stamen.com/")}} See Figures in Hugo for Hugo-specific implementation.

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:

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:

Containing three Cell of equal size: 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 >}} 4 4 4 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:

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.

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 .

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:

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.

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 Custom Homepage thumbnails, 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:

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](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/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:

Sample image placement. Not the real deal. 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. Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:

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

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

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:

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:

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.

Basic usage: {{< video autoplay="true" loop="true" src="assets/sample.mp4" >}} Your browser doesn't support HTML5 video. Download video instead. Assumes the following directory structure: ├── assets ├── content │ └── videos │ └── gifs │ ├── assets │ │ └── sample.mp4 │ └── index.md ├── content With controls: {{< video controls="true" src="assets/sample.mp4" >}} Your browser doesn't support HTML5 video. Download video instead. Absolute src and poster URLs also possible.