Refactor the build file

This commit is contained in:
Never Gude 2025-12-10 19:52:48 +01:00
parent 2871657bf6
commit bed0f202bb
14 changed files with 243 additions and 174 deletions

View file

@ -1,134 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="Never Gude" />
<title>Random linux utilities</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="pandoc/style.css" />
</head>
<body>
<header id="page-header">
<ul>
<li><a href="http://nevereverever.de/eh/eh/eh/eh-eh/">Home</a></li>
<li><a href="http://nevereverever.de/eh/eh/eh/eh-eh/about.html">About</a></li>
</ul>
</header>
<header id="title-block-header">
<h1 class="title">Random linux utilities</h1>
<p class="subtitle">Neat things I picked up along the way</p>
<p class="author">Never Gude</p>
<p class="date">25.7.2025</p>
</header>
<section id="content">
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#merge-pdfs" id="toc-merge-pdfs">Merge pdfs</a>
<ul>
<li><a href="#using-ghostscript" id="toc-using-ghostscript">Using
Ghostscript</a></li>
</ul></li>
</ul>
</nav>
<article>
<h2 id="merge-pdfs">Merge pdfs</h2>
<h3 id="using-ghostscript">Using Ghostscript</h3>
<p>Ghostscript has a feature to merge multiple pdf files into one.
Although ImageMagick also has this feature, I prefer this one, as it
doesnt rasterize and scales down the pdf files.</p>
<blockquote>
<p>Block quote time yay</p>
</blockquote>
<div class="sourceCode" id="cb1"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">gs</span> <span class="at">-dNOPAUSE</span> <span class="at">-sDEVICE</span><span class="op">=</span>pdfwrite <span class="dt">\</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="at">-sOUTPUTFILE</span><span class="op">=</span>output.pdf <span class="dt">\</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="at">-dBATCH</span> 1.pdf 2.pdf</span></code></pre></div>
</article>
</section>
<footer id="page-footer">
<embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;">
</footer>
</body>
</html>

View file

@ -1,12 +1,27 @@
.PHONY: articles all template := ./pandoc/template.html
style := ./pandoc/style.css
all: index articles article_list := ./articles.json
list_template := ./pandoc/meta-json-template.txt
articles: articles := $(patsubst %.md,%.html,$(wildcard articles/*.md))
for file in articles/*.md; do \
filename="$$(basename $${file} .md)"; \
pandoc "$${file}" --template pandoc/template.html --css pandoc/style.css --highlight-style zenburn --mathml --toc --output "$${filename}.html"; \
echo "generated $${filename}.html"; \
done
index: all: index.html about.html
clean:
echo '{"articles": []}' > $(article_list); \
rm $(notdir $(articles)); \
rm index.html about.html;
$(articles): %.html: %.md
pandoc $< --template $(abspath $(template)) --css $(abspath $(style)) --highlight-style zenburn --mathml --toc --output $(notdir $@); \
jq '.articles += [$(shell pandoc $< --template $(list_template))]' $(article_list) > articles.json.tmp;
cat ./articles.json.tmp > articles.json;
rm ./articles.json.tmp;
index.html: index.md $(articles)
pandoc $< --template $(template) --css $(style) --metadata-file $(article_list) --output $@
about.html: about.md
pandoc $< --template $(template) --css $(style) --output $@

View file

@ -20,8 +20,9 @@
margin: 0 0.8em 0.2em -1.6em; margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle; vertical-align: middle;
} }
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style> </style>
<link rel="stylesheet" href="pandoc/style.css" /> <link rel="stylesheet" href="./pandoc/style.css" />
</head> </head>
<body> <body>
<header id="page-header"> <header id="page-header">
@ -31,7 +32,7 @@
<ul> <ul>
<li> <li>
<span id="dark-mode"> <span id="dark-mode">
<input id="dark-mode-toggle" type="checkbox"><label for="dark-mode-toggle">Dark mode</label> <input id="dark-mode-toggle" type="checkbox" checked><label for="dark-mode-toggle">Dark mode</label>
</span> </span>
</li> </li>
</ul> </ul>
@ -40,14 +41,10 @@
<h1 class="title">About</h1> <h1 class="title">About</h1>
</header> </header>
<section id="content"> <section id="content">
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#stuff" id="toc-stuff">Stuff</a></li>
</ul>
</nav>
<article> <article>
<h2 id="stuff">Stuff</h2> <h2 id="stuff">Stuff</h2>
<p><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><munderover><mo></mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>k</mi></munderover><mi>i</mi><mo>=</mo><mfrac><mrow><mi>k</mi><mrow><mo stretchy="true" form="prefix">(</mo><mi>k</mi><mo>+</mo><mn>1</mn><mo stretchy="true" form="postfix">)</mo></mrow></mrow><mn>2</mn></mfrac></mrow><annotation encoding="application/x-tex"> \sum_{i=1}^k i = \frac{k(k+1)}{2} </annotation></semantics></math></p> <p><span class="math display">$$ \sum_{i=1}^k i = \frac{k(k+1)}{2}
$$</span></p>
</article> </article>
</section> </section>

View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="Never Gude" />
<title>Article 1</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
/* CSS for syntax highlighting */
html { -webkit-text-size-adjust: 100%; }
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ color: #cccccc; background-color: #303030; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ffcfaf; } /* Alert */
code span.an { color: #7f9f7f; font-weight: bold; } /* Annotation */
code span.at { } /* Attribute */
code span.bn { color: #dca3a3; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #f0dfaf; } /* ControlFlow */
code span.ch { color: #dca3a3; } /* Char */
code span.cn { color: #dca3a3; font-weight: bold; } /* Constant */
code span.co { color: #7f9f7f; } /* Comment */
code span.cv { color: #7f9f7f; font-weight: bold; } /* CommentVar */
code span.do { color: #7f9f7f; } /* Documentation */
code span.dt { color: #dfdfbf; } /* DataType */
code span.dv { color: #dcdccc; } /* DecVal */
code span.er { color: #c3bf9f; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #c0bed1; } /* Float */
code span.fu { color: #efef8f; } /* Function */
code span.im { } /* Import */
code span.in { color: #7f9f7f; font-weight: bold; } /* Information */
code span.kw { color: #f0dfaf; } /* Keyword */
code span.op { color: #f0efd0; } /* Operator */
code span.ot { color: #efef8f; } /* Other */
code span.pp { color: #ffcfaf; font-weight: bold; } /* Preprocessor */
code span.sc { color: #dca3a3; } /* SpecialChar */
code span.ss { color: #cc9393; } /* SpecialString */
code span.st { color: #cc9393; } /* String */
code span.va { } /* Variable */
code span.vs { color: #cc9393; } /* VerbatimString */
code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
</style>
<link rel="stylesheet" href="/home/never/Documents/nevereverever.de/public_html/eh/eh/eh/eh-eh/pandoc/style.css" />
</head>
<body>
<header id="page-header">
<ul>
<li><a href="http://nevereverever.de/eh/eh/eh/eh-eh/">Home</a></li><li><a href="http://nevereverever.de/eh/eh/eh/eh-eh/about.html">About</a></li>
</ul>
<ul>
<li>
<span id="dark-mode">
<input id="dark-mode-toggle" type="checkbox" checked><label for="dark-mode-toggle">Dark mode</label>
</span>
</li>
</ul>
</header>
<header id="title-block-header">
<h1 class="title">Article 1</h1>
<p class="subtitle">Just testimg</p>
<p class="author">Never Gude</p>
<p class="date">10.12.2025</p>
</header>
<section id="content">
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#merge-pdfs" id="toc-merge-pdfs">Merge pdfs</a>
<ul>
<li><a href="#using-ghostscript" id="toc-using-ghostscript">Using
Ghostscript</a></li>
</ul></li>
</ul>
</nav>
<article>
<h2 id="merge-pdfs">Merge pdfs</h2>
<h3 id="using-ghostscript">Using Ghostscript</h3>
<p>Ghostscript has a feature to merge multiple pdf files into one.
Although ImageMagick also has this feature, I prefer this one, as it
doesnt rasterize and scales down the pdf files.</p>
<blockquote>
<p>Block quote time yay</p>
</blockquote>
<div class="sourceCode" id="cb1"><pre
class="sourceCode numberSource bash numberLines"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1"></a><span class="fu">gs</span> <span class="at">-dNOPAUSE</span> <span class="at">-sDEVICE</span><span class="op">=</span>pdfwrite <span class="dt">\</span></span>
<span id="cb1-2"><a href="#cb1-2"></a> <span class="at">-sOUTPUTFILE</span><span class="op">=</span>output.pdf <span class="dt">\</span></span>
<span id="cb1-3"><a href="#cb1-3"></a> <span class="at">-dBATCH</span> 1.pdf 2.pdf</span></code></pre></div>
<div class="sourceCode" id="cb2"><pre class="sourceCode c"><code class="sourceCode c"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt">int</span> hello_world<span class="op">(</span><span class="dt">int</span> x<span class="op">)</span> <span class="op">{</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> printf<span class="op">(</span><span class="st">&quot;Hello World </span><span class="sc">%i</span><span class="st">&quot;</span><span class="op">,</span> x<span class="op">);</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> x<span class="op">;</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="op">}</span></span></code></pre></div>
</article>
</section>
<footer id="page-footer">
<embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;">
</footer>
</body>
</html>

View file

@ -0,0 +1,24 @@
{
"articles": [
{
"author": "Never Gude",
"date": "25.7.2025",
"subtitle": "Neat things I picked up along the way",
"summary": "Testing dsa dsa dsa dsa DDDDDDDDDDDa",
"title": "Random linux utilities"
},
{
"author": "Never Gude",
"date": "10.12.2025",
"subtitle": "Just testimg",
"title": "Article 1"
},
{
"author": "Never Gude",
"date": "25.7.2025",
"subtitle": "Neat things I picked up along the way",
"summary": "Testing dsa dsa dsa dsa DDDDDDDDDDDa",
"title": "Random linux utilities"
}
]
}

View file

@ -0,0 +1,30 @@
---
title: Article 1
subtitle: Just testimg
author: Never Gude
date: 10.12.2025
---
## Merge pdfs
### Using Ghostscript
Ghostscript has a feature to merge multiple pdf files into one.
Although ImageMagick also has this feature, I prefer this one, as it doesn't rasterize and scales down
the pdf files.
> Block
> quote
> time yay
```bash {.numberLines}
gs -dNOPAUSE -sDEVICE=pdfwrite \
-sOUTPUTFILE=output.pdf \
-dBATCH 1.pdf 2.pdf
```
```c
int hello_world(int x) {
printf("Hello World %i", x);
return x;
}
```

View file

@ -3,6 +3,7 @@ title: Random linux utilities
subtitle: Neat things I picked up along the way subtitle: Neat things I picked up along the way
author: Never Gude author: Never Gude
date: 25.7.2025 date: 25.7.2025
summary: Testing dsa dsa dsa dsa DDDDDDDDDDDa
--- ---
## Merge pdfs ## Merge pdfs

View file

@ -22,7 +22,7 @@
} }
.display.math{display: block; text-align: center; margin: 0.5rem auto;} .display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style> </style>
<link rel="stylesheet" href="pandoc/style.css" /> <link rel="stylesheet" href="./pandoc/style.css" />
</head> </head>
<body> <body>
<header id="page-header"> <header id="page-header">
@ -32,7 +32,7 @@
<ul> <ul>
<li> <li>
<span id="dark-mode"> <span id="dark-mode">
<input id="dark-mode-toggle" type="checkbox"><label for="dark-mode-toggle">Dark mode</label> <input id="dark-mode-toggle" type="checkbox" checked><label for="dark-mode-toggle">Dark mode</label>
</span> </span>
</li> </li>
</ul> </ul>
@ -53,25 +53,24 @@
<li> <li>
<div class="articles-header"> <div class="articles-header">
<h3 class="articles-title">Random linux utilities</h3> <h3 class="articles-title">Random linux utilities</h3>
<p class="articles-author"><em>Never Gude 1</em></p> <p class="articles-author"><em>Never Gude</em></p>
</div> </div>
<p class="articles-summary">Neat things I picked up along the way</p> <p class="articles-summary">Testing dsa dsa dsa dsa DDDDDDDDDDDa</p>
<p class="articles-date">25.7.2025</p> <p class="articles-date">25.7.2025</p>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<h3 class="articles-title">Random linux utilities</h3> <h3 class="articles-title">Article 1</h3>
<p class="articles-author"><em>Never Gude 2</em></p> <p class="articles-author"><em>Never Gude</em></p>
</div> </div>
<p class="articles-summary">Neat things I picked up along the way</p> <p class="articles-date">10.12.2025</p>
<p class="articles-date">25.7.2025</p>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<h3 class="articles-title">Random linux utilities</h3> <h3 class="articles-title">Random linux utilities</h3>
<p class="articles-author"><em>Never Gude 3</em></p> <p class="articles-author"><em>Never Gude</em></p>
</div> </div>
<p class="articles-summary">Neat things I picked up along the way</p> <p class="articles-summary">Testing dsa dsa dsa dsa DDDDDDDDDDDa</p>
<p class="articles-date">25.7.2025</p> <p class="articles-date">25.7.2025</p>
</li> </li>
</ul> </ul>

View file

@ -1 +0,0 @@
$meta-json$

View file

@ -1,7 +0,0 @@
{
"articles": [
{"author":"Never Gude 1","date":"25.7.2025","summary":"Neat things I picked up along the way","title":"Random linux utilities"},
{"author":"Never Gude 2","date":"25.7.2025","summary":"Neat things I picked up along the way","title":"Random linux utilities"},
{"author":"Never Gude 3","date":"25.7.2025","summary":"Neat things I picked up along the way","title":"Random linux utilities"}
]
}

View file

@ -41,7 +41,7 @@ $endif$
<ul> <ul>
<li> <li>
<span id="dark-mode"> <span id="dark-mode">
<input id="dark-mode-toggle" type="checkbox"><label for="dark-mode-toggle">Dark mode</label> <input id="dark-mode-toggle" type="checkbox" checked><label for="dark-mode-toggle">Dark mode</label>
</span> </span>
</li> </li>
</ul> </ul>

View file

@ -22,8 +22,9 @@
vertical-align: middle; vertical-align: middle;
} }
/* CSS for syntax highlighting */ /* CSS for syntax highlighting */
html { -webkit-text-size-adjust: 100%; }
pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; } pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; } .sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; } code.sourceCode > span { color: inherit; text-decoration: inherit; }
@ -34,7 +35,7 @@
} }
@media print { @media print {
pre > code.sourceCode { white-space: pre-wrap; } pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
} }
pre.numberSource code pre.numberSource code
{ counter-reset: source-line 0; } { counter-reset: source-line 0; }
@ -85,7 +86,7 @@
code span.vs { color: #cc9393; } /* VerbatimString */ code span.vs { color: #cc9393; } /* VerbatimString */
code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */ code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
</style> </style>
<link rel="stylesheet" href="pandoc/style.css" /> <link rel="stylesheet" href="/home/never/Documents/nevereverever.de/public_html/eh/eh/eh/eh-eh/pandoc/style.css" />
</head> </head>
<body> <body>
<header id="page-header"> <header id="page-header">
@ -95,7 +96,7 @@
<ul> <ul>
<li> <li>
<span id="dark-mode"> <span id="dark-mode">
<input id="dark-mode-toggle" type="checkbox"><label for="dark-mode-toggle">Dark mode</label> <input id="dark-mode-toggle" type="checkbox" checked><label for="dark-mode-toggle">Dark mode</label>
</span> </span>
</li> </li>
</ul> </ul>