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

112
themes/after-dark/docs/content/feature/skin-styles.md Normal file
View File

@@ -0,0 +1,112 @@
+++
title = "Skin Styles"
description = "Choose one of eight customizable skin styles."
categories = ["customizing"]
tags = ["color", "style", "branding"]
features = ["code highlighter", "snippets", "related content"]
aliases = [
"/feature/display-variants/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark uses {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} to provide four color palettes and two display modes. Toggle between them from your {{< external href="https://gohugo.io/getting-started/configuration/" text="site configuration" />}} for 8 possible combinations:
<style>
table[summary] td pre {
margin: 0;
}
.hack.dark table tr:nth-child(odd) td {
background-color: initial;
}
</style>
<table summary="Color palette and display mode settings">
<thead>
<tr>
<th rowspan="2">Palette</th>
<th colspan="2">Mode</th>
</tr>
<tr>
<th>Hack</th>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dark</td>
<td><i>None required.</i></td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#181818;color:#ccc">Dark Grey</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#073642;color:#78909c">Solarized Dark</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#fff;color:#000">Light</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
</tr>
</tbody>
</table>
The default skin uses the `dark` color palette with the `hack` display mode. No configuration is necessary to use the default skin.
Choose a skin style from your site configuration. For example, to set a dark grey color _without_ the stylistic `markdown` treatment update your config like:
{{< hackcss-card header="config.toml" >}}
{{< highlight toml "linenos=inline" >}}
baseurl = "https://letterboxd.com/"
languageCode = "en-US"
title = "A Scanner Darkly"
[params]
description = "An undercover cop in a not-too-distant future becomes involved with a dangerous new drug and begins to lose his own identity as a result."
images = ["https://a.ltrbxd.com/resized/sm/upload/e3/kt/un/fi/nZuqo9yQpEo447sH0w0MFBgdT6J-1200-1200-675-675-crop-000000.jpg"]
[params.hackcss]
mode = "standard"
palette = "dark-grey"
{{< /highlight >}}
{{< /hackcss-card >}}
Disable skin styles by setting the `disabled` flag:
```toml
[params.hackcss]
disabled = true # disable skin styles entirely
```
When changing colors review [Custom Styles](../custom-styles), [Trim Color](../trim-color) and [Error Page](../error-page), making any adjustments necessary to achieve the desired look-and-feel.