arona/website
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Initial AD port

Browse Source
This commit is contained in:
FreneticScribbler
2021-04-26 18:26:42 +01:00
parent 6911ce346b
commit 7e7773258a
408 changed files with 17799 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/after-dark/docs/content/shortcode/_index.md Normal file
View File

@@ -0,0 +1,8 @@
+++
title = "Shortcodes"
description = "Easily create complex interfaces directly within your content."
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++

158
themes/after-dark/docs/content/shortcode/alert.md Normal file
View File

File diff suppressed because one or more lines are too long

80
themes/after-dark/docs/content/shortcode/blockquote.md Normal file
View File

@@ -0,0 +1,80 @@
+++
title = "Blockquote"
description = "Create pull quotes with citations and citation links."
categories = ["experience"]
tags = []
html_attributes = []
custom_attributes = []
snippets_used = ["blockquote"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With source:
```html
{{</* blockquote
cite="Mark Twain"
text="The more things are forbidden, the more popular they become."
/*/>}}
```
{{< blockquote
cite="Mark Twain" text="The more things are forbidden, the more popular they become."
/>}}
With anonymous source:
```html
{{</* blockquote
text="Obsessed is a word that the lazy use to describe the dedicated."
/*/>}}
```
{{< blockquote
text="Obsessed is a word that the lazy use to describe the dedicated."
/>}}
With source and citation link:
```html
{{</* blockquote
citelink="https://style.mla.org/urls-some-practical-advice/"
cite="Angela Gibson, URLs: Some Practical Advice"
text="Ensuring the enduring availability and retrievability of a source is not the primary objective of documentation, even though the Internet allows for the retrieval of online works referred to in other online works."
/*/>}}
```
{{< blockquote
citelink="https://style.mla.org/urls-some-practical-advice/"
cite="Angela Gibson, URLs: Some Practical Advice"
text="Ensuring the enduring availability and retrievability of a source is not the primary objective of documentation, even though the Internet allows for the retrieval of online works referred to in other online works."
/>}}
With citation link but no source:
```html
{{</* blockquote
citelink="https://bitly.is/2mkxskj"
text="When you create your own Branded Short Domain, you can expect to see up to a 34% increase in CTR when compared to standard bit.ly links."
/*/>}}
```
{{< blockquote
citelink="https://bitly.is/2mkxskj"
text="When you create your own Branded Short Domain, you can expect to see up to a 34% increase in CTR when compared to standard bit.ly links."
/>}}
With longer quotations:
```html
{{</* blockquote cite="Erin Cummings" >}}
At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you aren't where you want to be, you will always be a failure.
{{< /blockquote */>}}
```
{{< blockquote cite="Erin Cummings" >}}
At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you aren't where you want to be, you will always be a failure.
{{< /blockquote >}}

68
themes/after-dark/docs/content/shortcode/button-group.md Normal file
View File

@@ -0,0 +1,68 @@
+++
title = "Button Group"
description = "Layout buttons to fit buttons snugly together."
categories = ["interaction"]
tags = ["controls"]
html_attributes = ["class"]
custom_attributes = ["formactions"]
snippets_used = ["button group", "button", "form"]
notes = [
"update 'snippets' if this content is updated"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With three [Buttons](../button), one ghosted and one of type info:
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup */>}}
```
{{< hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}
With three [Buttons](../button) styled using `class` attribute:
```html
<style>.btn-text button::after { content: attr(class) }</style>
{{</* hackcss-buttongroup class="btn-text" >}}
{{< hackcss-button />}}
{{< hackcss-button type="info" />}}
{{< /hackcss-buttongroup */>}}
```
<style>.btn-text button::after { content: attr(class) }</style>
{{< hackcss-buttongroup class="btn-text" >}}
{{< hackcss-button />}}
{{< hackcss-button type="info" />}}
{{< /hackcss-buttongroup >}}
With two [Buttons](../button) inside a [Form](../form) using `formactions` attribute:
```html
{{</* hackcss-form action="/search" >}}
{{< hackcss-textinput type="hidden" name="s" value="button" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form action="/search" >}}
{{< hackcss-textinput type="hidden" name="s" value="group" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form >}}

153
themes/after-dark/docs/content/shortcode/button.md Normal file
View File

@@ -0,0 +1,153 @@
+++
title = "Button"
description = "Add colorful buttons to forms and pages."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "value", "name", "class", "onclick", "tabindex", "target", "disabled", "form"]
custom_attributes = ["type", "text", "isghost", "isblock", "action", "method"]
snippets_used = ["button", "button group", "throbber", "form", "external"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Different types:
```html
{{</* 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" /*/>}}
```
{{< 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" />}}
Ghost types:
```html
{{</* 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" /*/>}}
```
{{< 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" />}}
Block-level:
```html
{{</* hackcss-button type="primary" isghost="true" isblock="true" text="Block Level Button" /*/>}}
```
{{< hackcss-button type="primary" isghost="true" isblock="true" text="Block Level Button" />}}
Text in body:
```html
{{</* hackcss-button >}}Default{{< /hackcss-button */>}}
{{</* hackcss-button type="primary" >}}<i>HTML</i>{{< /hackcss-button */>}}
{{%/* hackcss-button type="success" %}}~~Markdown~~{{% /hackcss-button */%}}
{{</* hackcss-button isghost="true" text="Comment" >}}Hidden comment{{< /hackcss-button */>}}
```
{{< hackcss-button >}}Default{{< /hackcss-button >}}
{{< hackcss-button type="primary" >}}<i>HTML</i>{{< /hackcss-button >}}
{{% hackcss-button type="success" %}}~~Markdown~~{{% /hackcss-button %}}
{{< hackcss-button isghost="true" text="Comment" >}}Hidden comment{{< /hackcss-button >}}
In [Button Group](../button-group):
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button isghost="true" type="success" text="Left" >}}
{{< hackcss-button isghost="true" type="success" text="Middle" >}}
{{< hackcss-button isghost="true" type="success" text="Right" >}}
{{< /hackcss-buttongroup */>}}
```
{{< hackcss-buttongroup >}}
{{< hackcss-button isghost="true" type="success" text="Left" />}}
{{< hackcss-button isghost="true" type="success" text="Middle" />}}
{{< hackcss-button isghost="true" type="success" text="Right" />}}
{{< /hackcss-buttongroup >}}
Print preview:
```html
{{</* hackcss-button type="info" isghost="true" onclick="print()" >}}
<svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</svg>
{{< /hackcss-button */>}}
```
{{< hackcss-button type="info" isghost="true" onclick="print()" >}}
<svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</svg>
{{< /hackcss-button >}}
[Loading](../throbber) indication:
```html
{{</* hackcss-button type="info" isghost="true" >}}
Loading&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button */>}}
```
{{< hackcss-button type="info" isghost="true" >}}
Loading&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button >}}
[External](../external) navigation:
```html
{{</* external rel="shortlink" href="https://go.habd.as/mavic-air" >}}
{{< hackcss-button type="success" text="Open" />}}
{{< /external */>}}
```
{{< external rel="shortlink" href="https://go.habd.as/mavic-air" >}}
{{< hackcss-button type="success" text="Open" />}}
{{< /external >}}
[Form](../form) control:
```html
{{</* hackcss-form action="javascript:alert('Form Alert')" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Custom Action" action="javascript:alert('Custom Alert')" isghost="true" type="primary" />}}
{{< hackcss-button disabled="true" isghost="true" text="Disabled" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form action="javascript:alert('Form Alert')" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Custom Action" action="javascript:alert('Custom Alert')" isghost="true" type="primary" />}}
{{< hackcss-button disabled="true" isghost="true" text="Disabled" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form >}}
```html
{{</* hackcss-form id="owner" action="javascript:alert('Form Alert')" /*/>}}
{{</* hackcss-button form="owner" text="Form Action" type="primary" isghost="true" /*/>}}
```
{{< hackcss-form id="owner" action="javascript:alert('Form Alert')" />}}
{{< hackcss-button form="owner" text="Form Action" type="primary" isghost="true" />}}

47
themes/after-dark/docs/content/shortcode/card.md Normal file
View File

File diff suppressed because one or more lines are too long

148
themes/after-dark/docs/content/shortcode/cell.md Normal file
View File

@@ -0,0 +1,148 @@
+++
title = "Cell"
description = "Display a responsive cell inside a grid."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = []
snippets_used = ["grid", "card", "button"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Contained by [Grid](../grid) with three columns of equal size:
{{< highlight html "linenos=inline" >}}
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid */>}}
{{< /highlight >}}
{{< hackcss-grid class="margin-reset" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid >}}
With two columns of odd size:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="example" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid >}}
With 12 columns:
```html
{{</* 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 */>}}
```
{{< 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 >}}
Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help:
- {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
- {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C

105
themes/after-dark/docs/content/shortcode/external.md Normal file
View File

@@ -0,0 +1,105 @@
+++
title = "External"
description = "Create links with external icon and custom behavior."
categories = ["navigation"]
tags = ["links", "security", "privacy"]
html_attributes = ["href", "class", "referrerpolicy", "target", "type", "rel"]
custom_attributes = ["text", "trusted"]
snippets_used = ["external", "button", "alert"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* external href="https://after-dark.habd.as" text="After Dark" /*/>}}
{{</* external href="https://after-dark.habd.as" /*/>}}
```
{{< external href="https://after-dark.habd.as" text="After Dark" />}}
{{< external href="https://after-dark.habd.as" />}}
Shorthand usage:
```term
{{</* external "https://after-dark.habd.as" "After Dark" /*/>}}
{{</* external href="https://go.habd.as/after-dark" /*/>}}
{{</* external "wss://fs1.habd.as:80" /*/>}}
```
{{< external "https://after-dark.habd.as" "After Dark" />}}
{{< external href="https://go.habd.as/after-dark" />}}
{{< external "wss://fs1.habd.as:80" />}}
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> URIs such as those using the <code>wss</code> scheme may be considered unsafe by the {{< external "https://golang.org/pkg/html/template/" "Go template package" />}}. Learn more in the package {{< external "https://golang.org/pkg/html/template/#hdr-Security_Model" "Security Model" />}}.
{{< /hackcss-alert >}}
With a trusted URL:
```html
{{</* external trusted="true" href="wss://fs1.habd.as:80" /*/>}}
{{</* external trusted="true" href="irc://chat.freenode.net:6667/after-dark" /*/>}}
```
{{< external trusted="true" href="wss://fs1.habd.as:80" />}}
{{< external trusted="true" href="irc://chat.freenode.net:6667/after-dark" />}}
With external link styling removed:
```html
{{</* external rel="noopener" href="https://blog.domain.example" /*/>}}
```
{{< external rel="noopener" href="https://blog.domain.example" />}}
With internal link opening in a new window:
```html
{{</* external href="/404.html" text="Error Page" /*/>}}
```
{{< external href="/404.html" text="Error Page" />}}
With structured data type:
```html
{{</* external itemtype="significantLink" href="https://habd.as" /*/>}}
```
{{< external itemtype="significantLink" href="https://habd.as" />}}
With site-wide [Referrer Policy](/feature/referrer-policy) overridden:
```html
{{</* external referrerpolicy="unsafe-url" href="http://goo.gl" /*/>}}
```
{{< external referrerpolicy="unsafe-url" href="http://goo.gl" />}}
With markdown image and link styling removed:
```markdown
{{%/* external rel="next" href="https://source.unsplash.com/collection/983219/2160x1440" %}}
![Example image](https://source.unsplash.com/collection/983219/1080x720 "View Random Image Enlarged")
{{% /external */%}}
```
{{% external rel="next" href="https://source.unsplash.com/collection/983219/1080x720" %}}
![Example image](https://source.unsplash.com/collection/983219/1080x720 "View Random Image Enlarged")
{{% /external %}}
With interactive [Button](../button) to run a [Fuzzy Search](/feature/fuzzy-search):
```html
{{</* external rel="search" target="_self" href="/search/?s=button" >}}
{{< hackcss-button type="primary" text="Search" />}}
{{< /external */>}}
```
{{< external rel="search" target="_self" href="/search/?s=button" >}}
{{< hackcss-button type="primary" text="Search" />}}
{{< /external >}}

46
themes/after-dark/docs/content/shortcode/figure.md Normal file
View File

@@ -0,0 +1,46 @@
+++
title = "Figure"
description = "Load images progressively with blurry placeholders."
categories = ["experience"]
tags = ["performance", "images", "graphics"]
html_attributes = ["class", "alt", "src"]
custom_attributes = ["lqipsrc", "caption", "link", "linktarget", "attr", "attrlink", "title"]
snippets_used = ["external"]
notes = [
"review 'lazy-loading' if this page is modified"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With progressive image placeholder:
```html
{{</* 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/"
*/>}}
```
{{< figure
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/"
>}}
Above as a [Snippet](/feature/snippets/) used in a [Custom Layout](/feature/custom-layouts/):
```go-html-template
{{ 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 {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for Hugo-specific implementation.

73
themes/after-dark/docs/content/shortcode/form-group.md Normal file
View File

@@ -0,0 +1,73 @@
+++
title = "Form Group"
description = "Use with Label to visualize control validation states."
categories = ["experience"]
tags = ["form"]
html_attributes = ["disabled", "form", "name", "class", "legend", "body"]
custom_attributes = ["hastextarea", "state"]
snippets_used = ["label", "text input", "text area", "help block"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
[Label](../label) states with [Text Input](../text-input):
```html
{{</* 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 */>}}
```
{{< 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 >}}
Disabling [Label](../label) and disabled [Text Area](../text-area) with [Help Block](../help-block):
```html
{{</* hackcss-formgroup hastextarea="true" disabled="true" >}}
{{< hackcss-helpblock >}}<strong>Sorry! Guestbook offline…</strong>{{< /hackcss-helpblock >}}
{{< hackcss-label for="message" text="Message:" />}}
{{< hackcss-textarea id="message" rows="10" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup hastextarea="true" disabled="true" >}}
{{< hackcss-helpblock >}}<strong>Sorry! Guestbook offline…</strong>{{< /hackcss-helpblock >}}
{{< hackcss-label for="message" text="Message:" />}}
{{< hackcss-textarea id="message" rows="10" >}}
{{< /hackcss-formgroup >}}

100
themes/after-dark/docs/content/shortcode/form.md Normal file
View File

@@ -0,0 +1,100 @@
+++
title = "Form"
description = "Collect, validate and handle user input."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "name", "accept-charset", "action", "enctype", "target", "novalidate", "method", "class", "autocomplete"]
custom_attributes = []
snippets_used = ["help block", "button", "alert", "throbber", "label", "form group", "form", "text input"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With auto-focused [Text Input](../text-input) requesting a new email address:
```html
{{</* hackcss-form autocomplete="disabled" >}}
{{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form autocomplete="disabled" >}}
{{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}}
{{< /hackcss-form >}}
With [Text Input](../text-input) and [Label](../label) inside [Form Group](../form-group) running [Fuzzy Search](/feature/fuzzy-search) in new window:
```html
{{</* 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 */>}}
```
{{< 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 >}}
Two forms with a [Button](../button) and [Text Input](../text-input) inside [Alert](../alert) with [Throbber](../throbber):
```html
{{</* hackcss-alert type="info" >}}
{{< hackcss-form id="throttle" method="post" action="/throttle" />}}
{{< hackcss-form id="choke" novalidate="true" />}}
{{< hackcss-button type="primary" form="choke" text="Doh!" disabled="true" />}}
This one doesn't actually do anything… {{< hackcss-throbber >}}
{{< hackcss-textinput type="hidden" name="speed" value="80" form="throttle" >}}
{{< /hackcss-alert */>}}
```
{{< hackcss-alert type="info" >}}
{{< hackcss-form id="throttle" method="post" action="/throttle" />}}
{{< hackcss-form id="choke" novalidate="true" />}}
{{< hackcss-button type="primary" form="choke" text="Doh!" disabled="true" />}}
This one doesn't actually do anything… {{< hackcss-throbber >}}
{{< hackcss-textinput type="hidden" name="speed" value="80" form="throttle" >}}
{{< /hackcss-alert >}}
With [Form Group](../form-group), [Label](../label), required and validated [Text Input](../text-input) and [Help Block](../help-block):
```html
{{</* hackcss-form name="validate" action="/validate" >}}
{{< hackcss-formgroup name="integrity" >}}
{{< hackcss-label for="digest" >}}
<abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
autofocus="true"
autocomplete="off"
type="text" id="digest" name="digest"
pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
{{< hackcss-helpblock >}}
Submit with digest to validate installation.
<noscript>JavaScript must be enabled for proper validation.</noscript>
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form name="validate" action="/validate" >}}
{{< hackcss-formgroup name="integrity" >}}
{{< hackcss-label for="digest" >}}
<abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
autocomplete="off"
type="text" id="digest" name="digest"
pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
{{< hackcss-helpblock >}}
Submit with digest to validate installation.
<noscript>JavaScript must be enabled for proper validation.</noscript>
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}

176
themes/after-dark/docs/content/shortcode/grid.md Normal file
View File

@@ -0,0 +1,176 @@
+++
title = "Grid"
description = "Display a responsive grid with cells."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = []
snippets_used = ["cell", "card", "button"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Containing three [Cell](../cell) of equal size:
{{< highlight html "linenos=inline" >}}
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid */>}}
{{< /highlight >}}
{{< hackcss-grid class="unset-margin" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid >}}
With two columns of odd size:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="example" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid >}}
With 12 columns:
```html
{{</* 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 */>}}
```
{{< 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 >}}
Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
Aligning three [SVG Favicons]({{< relref "svg-favicon" >}}) using `-around` modifier:
```html
{{</* hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help:
- {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
- {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C

44
themes/after-dark/docs/content/shortcode/help-block.md Normal file
View File

@@ -0,0 +1,44 @@
+++
title = "Help Block"
description = "Combine with form controls to guide user input."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = ["text"]
snippets_used = ["form group", "text input"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Plain or formatted text:
```html
{{</* 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 */%}}
```
{{< 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 %}}
Used above and below [Text Input](../text-input) with `class` attribute:
```html
{{</* 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. 27 chars" />}}
{{< /hackcss-formgroup */>}}
```
{{< 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. 27 chars" />}}
{{< /hackcss-formgroup >}}

57
themes/after-dark/docs/content/shortcode/label.md Normal file
View File

@@ -0,0 +1,57 @@
+++
title = "Label"
description = "Provide accessible captions for form controls."
categories = ["experience"]
tags = []
html_attributes = ["for", "form"]
custom_attributes = ["text"]
snippets_used = ["label", "text input", "form group", "help block"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Explicit label association with [Text Input](../text-input):
```html
{{</* hackcss-label for="query" text="Search query:" /*/>}}
{{</* hackcss-textinput type="search" id="query" */>}}
```
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput type="search" id="query" >}}
Implicit label association using [Text Input](../text-input) and [Help Block](../help-block):
```html
{{</* 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 */>}}
```
{{< 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 >}}
Combined with [Form Group](../form-group) to show [Text Input](../text-input) success state:
```html
{{</* hackcss-formgroup state="success" >}}
{{< hackcss-label for="fullname" text="Full Name:" />}}
{{< hackcss-textinput id="fullname" value="Edgar Allan Poe" required="true" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup state="success" >}}
{{< hackcss-label for="fullname" text="Full Name:" />}}
{{< hackcss-textinput id="fullname" value="Edgar Allan Poe" required="true" >}}
{{< /hackcss-formgroup >}}
See [Form Group](../form-group) for additional control states.

53
themes/after-dark/docs/content/shortcode/progress.md Normal file
View File

@@ -0,0 +1,53 @@
+++
title = "Progress"
description = "Show graphical progress bars with completion percentage."
categories = ["experience"]
tags = []
html_attributes = []
custom_attributes = ["showpercent", "value", "filltext"]
snippets_used = ["progress", "card", "alert"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* hackcss-progress value="40" */>}}
{{</* hackcss-progress value="30" showpercent="true" */>}}
{{</* hackcss-progress value="70" showpercent="true" filltext="pemuatan" */>}}
```
{{< hackcss-progress value="40" >}}
{{< hackcss-progress value="30" showpercent="true" >}}
{{< hackcss-progress value="70" showpercent="true" filltext="pemuatan" >}}
Inside an [Alert](../alert):
{{< hackcss-alert type="warning" >}}
{{< hackcss-progress value="90" showpercent="true" filltext="Load Average" >}}
{{< /hackcss-alert >}}
Stacked inside a [Card](../card):
```html
{{</* 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 */>}}
```
{{< 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 >}}

51
themes/after-dark/docs/content/shortcode/select.md Normal file
View File

@@ -0,0 +1,51 @@
+++
title = "Select"
description = "List a group of options in a drop-down menu."
categories = ["experience"]
tags = []
html_attributes = ["name", "class", "disabled", "form"]
custom_attributes = ["body"]
snippets_used = ["label", "form group"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* hackcss-select >}}
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
{{< /hackcss-select */>}}
```
{{< hackcss-select >}}
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
{{< /hackcss-select >}}
With [Label](../label) inside [Form Group](../form-group):
```html
{{</* 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 */>}}
```
{{< 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 >}}

51
themes/after-dark/docs/content/shortcode/text-area.md Normal file
View File

@@ -0,0 +1,51 @@
+++
title = "Text Area"
description = "Add a multi-line plain-text editing control."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "name", "class", "autocomplete", "autofocus", "cols", "disabled", "form", "maxlength", "minlength", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "wrap", "tabindex"]
custom_attributes = ["text"]
snippets_used = []
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Read-only with prefilled text:
```html
{{</* hackcss-textarea readonly="true" text="Only this and nothing more." */>}}
```
{{< hackcss-textarea readonly="true" text="Only this and nothing more." >}}
With spellcheck disabled:
```html
{{</* hackcss-textarea spellcheck="false" */>}}
```
{{< hackcss-textarea spellcheck="false" >}}
With 16 columns and hard wrapping enabled:
```html
{{</* hackcss-textarea cols="16" wrap="hard" */>}}
```
{{< hackcss-textarea cols="16" wrap="hard" >}}
Inside disabled form group with error label and placeholder:
```html
{{</* 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 */>}}
```
{{< 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 >}}

77
themes/after-dark/docs/content/shortcode/text-input.md Normal file
View File

@@ -0,0 +1,77 @@
+++
title = "Text Input"
description = "Add a single-line plain-text editing control."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "name", "class", "autocomplete", "autofocus", "disabled", "form", "formaction", "formmethod", "formtarget", "height", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "tabindex", "type", "value", "width"]
custom_attributes = []
snippets_used = ["text input", "label", "form group", "form", "help block"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* hackcss-textinput */>}}
{{</* hackcss-textinput type="password" */>}}
{{</* hackcss-textinput type="email" placeholder="Please enter your email…" */>}}
{{</* hackcss-textinput disabled="true" placeholder="Disabled" */>}}
```
{{< hackcss-textinput >}}
{{< hackcss-textinput type="password" >}}
{{< hackcss-textinput type="email" placeholder="Please enter your email…" >}}
{{< hackcss-textinput disabled="true" placeholder="Disabled" >}}
With [Label](../label) and [Help Block](../help-block) in [Form](../form) with custom validation:
```html
{{</* 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 */>}}
```
{{< 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 >}}
In [Form Group](../form-group) with warning [Label](../label) and [Help Block](../help-block):
```html
{{</* hackcss-formgroup state="warning" >}}
{{< hackcss-label for="key64" text="64-bit PGP key:" />}}
{{< hackcss-textinput spellcheck="false" type="text" id="key64" >}}
{{< hackcss-helpblock text="In this format: BB73 67EE 9A70 A631" />}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup state="warning" >}}
{{< hackcss-label for="key64" text="64-bit PGP key:" />}}
{{< hackcss-textinput spellcheck="false" type="text" id="key64" >}}
{{< hackcss-helpblock text="In this format: BB73 67EE 9A70 A631" />}}
{{< /hackcss-formgroup >}}
Typed with [Label](../label) in [Form Group](../form-group) targeting [Form](../form) owner:
```html
{{</* hackcss-form id="search" action="/search" /*/>}}
{{</* hackcss-formgroup >}}
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput type="search" id="query" form="search" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-form id="search" action="/search" />}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput type="search" id="query" name="s" form="search" >}}
{{< /hackcss-formgroup >}}

35
themes/after-dark/docs/content/shortcode/throbber.md Normal file
View File

@@ -0,0 +1,35 @@
+++
title = "Throbber"
description = "Display a CSS-only loading indicator."
categories = ["experience"]
tags = []
html_attributes = []
custom_attributes = []
snippets_used = ["throbber", "button"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* hackcss-throbber */>}}
```
{{< hackcss-throbber >}}
Inside a [Button](../button):
```html
{{</* hackcss-button isghost="true" type="info" >}}
Please wait&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button */>}}
```
{{< hackcss-button isghost="true" type="info" >}}
Please wait&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button >}}
Customize by creating your own {{< external text="CSS-only loading" href="https://www.pexels.com/blog/css-only-loaders/" />}} indicator.

BIN
themes/after-dark/docs/content/shortcode/video/assets/sample.mp4 Normal file
View File

Binary file not shown.

44
themes/after-dark/docs/content/shortcode/video/index.md Normal file
View File

@@ -0,0 +1,44 @@
+++
title = "Video"
description = "Lazy-load videos and control playback options."
categories = ["experience"]
tags = []
html_attributes = ["class", "autoplay", "controls", "crossorigin", "height", "loop", "muted", "preload", "intrinsicsize", "poster", "src", "width", "playsinline"]
custom_attributes = []
snippets_used = []
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* video autoplay="true" loop="true" src="assets/sample.mp4" */>}}
```
{{< video autoplay="true" loop="true" src="assets/sample.mp4" >}}
Assumes the following directory structure:
```
├── assets
├── content
│   └── videos
│   └── gifs
│   ├── assets
│   │ └── sample.mp4
│   └── index.md
├── content
```
With controls:
```html
{{</* video controls="true" src="assets/sample.mp4" */>}}
```
{{< video controls="true" src="assets/sample.mp4" >}}
Absolute `src` and `poster` URLs also possible. Absolute URLs must include a scheme such as `http` or `https`. Root-relative URLs not currently possible.