all: use default ciigo styles

Changes on ciigo,

* go.mod: update asciidoctor-go module
* all: conform with Lighthouse recommendations
* _static: second round for cleaning up styles
* _static: simplify the topbar section
* all: improve default stylesheet
* all: move _example/ directory under _doc/ directory
* all: embed CSS and index HTML template using memfs
* all: format README with prettier
* go.mod: update pakakeh.go to v0.60.3-0.20260115103415-806359d5462f

3 files changed, 31 insertions, 529 deletions

diff --git a/_content/index.adoc b/_content/index.adoc
index 85eadd6..68d7e82 100644
--- a/_content/index.adoc
+++ b/_content/index.adoc
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: CC-BY-SA-4.0
 // SPDX-FileCopyrightText: 2025 M. Shulhan <ms@kilabit.info>
 
+= kilabit.info
 :description: Personal website of Muhammad Shulhan, contains list of projects and journals.
 :sectanchors:
 :toc:
diff --git a/_content/index.css b/_content/index.css
deleted file mode 100644
index 382c3d5..0000000
--- a/_content/index.css
+++ /dev/null
@@ -1,508 +0,0 @@
-/* SPDX-License-Identifier: CC-BY-SA-4.0 */
-/* SPDX-FileCopyrightText: 2019 M. Shulhan <ms@kilabit.info> */
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Regular"),
-    local("GoRegular"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoRegular.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoRegular.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoRegular.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Bold"),
-    local("Go-Bold"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Bold.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Bold.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Bold.ttf")
-      format("truetype");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Italic"),
-    local("Go-Italic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Italic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Italic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-Italic.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Bold Italic"),
-    local("Go-BoldItalic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-BoldItalic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-BoldItalic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/Go-BoldItalic.ttf")
-      format("truetype");
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Medium"),
-    local("GoMedium"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium.ttf")
-      format("truetype");
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go";
-  src:
-    local("Go Medium Italic"),
-    local("GoMedium-Italic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium-Italic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium-Italic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMedium-Italic.ttf")
-      format("truetype");
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Mono";
-  src:
-    local("Go Mono"),
-    local("GoMono"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Mono";
-  src:
-    local("Go Mono Bold Italic"),
-    local("GoMono-BoldItalic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-BoldItalic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-BoldItalic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-BoldItalic.ttf")
-      format("truetype");
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Mono";
-  src:
-    local("Go Mono Italic"),
-    local("GoMono-Italic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Italic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Italic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Italic.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Mono";
-  src:
-    local("Go Mono Bold"),
-    local("GoMono-Bold"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Bold.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Bold.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoMono-Bold.ttf")
-      format("truetype");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Smallcaps";
-  src:
-    local("Go Smallcaps Italic"),
-    local("GoSmallcaps-Italic"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps-Italic.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps-Italic.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps-Italic.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Go Smallcaps";
-  src:
-    local("Go Smallcaps"),
-    local("GoSmallcaps"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps.woff2")
-      format("woff2"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps.woff")
-      format("woff"),
-    url("https://storage.googleapis.com/umum.kilabit.info/assets/fonts/go/GoSmallcaps.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-:root {
-  --dark-anchor: #c48000;
-  --dark-bg-editor-line: #173740;
-  --dark-bg-mono: #12414d;
-  --dark-bg-topbar: #005c73;
-  --dark-bg: #002b36;
-  --dark-border: #035064;
-  --dark-fg-gray: #76888a;
-  --dark-fg: #b4c5c7;
-  --dark-header-fg: cyan;
-}
-
-body {
-  color-scheme: light dark;
-  color: black;
-  font-family: Go, sans-serif;
-  font-size: 16px;
-  margin: 0 auto;
-  width: 800px;
-}
-
-code {
-  font-family: "Go Mono", monospace;
-}
-
-div {
-  margin: 0;
-  padding: 0;
-}
-
-.toc a {
-  text-decoration: none;
-}
-
-blockquote {
-  border-left: solid 4px darkgray;
-  padding-left: 1em;
-  color: darkgreen;
-}
-
-h1 {
-  font-size: 28px;
-  border-bottom: 1px solid grey;
-  padding-bottom: 8px;
-}
-
-h2 {
-  background-color: lightblue;
-  font-size: 22px;
-}
-
-h3,
-h4 {
-  font-size: 16px;
-}
-
-h3::before {
-  content: "§ ";
-}
-
-h4::before {
-  content: "§§ ";
-}
-
-h5::before {
-  content: "§§§ ";
-}
-
-h2,
-h3,
-h4,
-h5 {
-  border-bottom: 1px solid grey;
-  padding: 6px;
-  color: black;
-}
-
-img,
-video {
-  margin: 0 10px;
-}
-
-pre {
-  background-color: #eee;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  display: block;
-  font-size: 16px;
-  font-family: "Go Mono", monospace;
-  margin: 0 0 10px 20px;
-  overflow: auto;
-  padding: 9.5px;
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
-img.background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  opacity: 0.05;
-  width: 920px;
-  margin: 0 0;
-}
-
-.topbar {
-  padding: 0 1em 1em 1em;
-  background-color: lightblue;
-}
-.topbar-left,
-.topbar-right {
-  margin-top: 1rem;
-}
-
-.topbar-left {
-  font-size: 24px;
-  font-weight: bold;
-  display: inline-block;
-}
-
-.topbar-left a {
-  text-decoration: none;
-}
-
-.topbar-left a:visited {
-  color: black;
-}
-
-.topbar-info {
-  font-size: 12px;
-  font-weight: normal;
-  font-family: "Go Mono", monospace;
-}
-
-.topbar-right {
-  display: inline-block;
-  text-align: right;
-}
-
-.topbar-right img {
-  width: 40px;
-}
-
-.page {
-  margin: 24px 0 0 0;
-}
-
-.quoteblock .attribution {
-  text-align: right;
-  margin-right: 56px;
-}
-
-.container .meta {
-  font-style: italic;
-  margin: 1.25rem;
-}
-
-#footer,
-.footer {
-  text-align: center;
-  color: #666;
-  font-size: 0.875rem;
-}
-
-#footer {
-  border-top: 1px solid #ddd;
-  margin: 4rem 0 1em 0;
-  padding-top: 10px;
-}
-.footer {
-  margin-bottom: 1em;
-}
-
-/** Custom classes for asciidoc */
-
-#toctitle {
-  display: none;
-}
-
-#toc li {
-  list-style: none;
-}
-
-#toc ul .sectlevel1 {
-  padding: 0px;
-  margin: 4px;
-}
-
-#toc ul .sectlevel2 {
-  margin: 4px;
-}
-
-.admonitionblock {
-  border: 1px solid #ddd;
-}
-
-.admonitionblock .icon {
-  background-color: aliceblue;
-  border-right: 1px solid #ddd;
-  margin: 0px;
-  padding: 8px;
-}
-
-.admonitionblock .content {
-  margin: 0px;
-  padding: 8px;
-}
-
-.right {
-  float: right;
-}
-
-.left {
-  float: left;
-}
-
-.sect1,
-.sect2 {
-  clear: both;
-}
-
-@media only screen and (max-width: 960px) {
-  body {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .topbar {
-    padding: 0 1.5em;
-  }
-
-  .topbar-left,
-  .topbar-right {
-    width: 100%;
-    display: block;
-    text-align: left;
-  }
-
-  .page {
-    padding: 0 1.5em;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html,
-  body {
-    background-color: var(--dark-bg);
-  }
-  body,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: var(--dark-fg);
-  }
-  a,
-  a:link,
-  a:visited {
-    color: var(--dark-anchor);
-  }
-  blockquote,
-  input,
-  pre,
-  textarea {
-    background-color: var(--dark-bg-mono);
-    color: var(--dark-fg);
-  }
-  .page > .container,
-  .page > .playground,
-  .topbar {
-    border-color: var(--dark-border);
-  }
-  h2,
-  .playground > .actions,
-  .topbar {
-    background-color: var(--dark-bg-topbar);
-    color: var(--dark-fg);
-  }
-  .topbar .top-heading a {
-    color: var(--dark-fg);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: var(--dark-header-fg);
-  }
-
-  img {
-    background-color: darkseagreen;
-  }
-
-  #output,
-  .wui_editor {
-    background-color: var(--dark-bg-mono) !important;
-    color: var(--dark-fg) !important;
-    font-size: 0.9rem;
-  }
-  .wui_editor_line_number {
-    background-color: var(--dark-bg-editor-line) !important;
-    color: var(--dark-fg-gray) !important;
-  }
-  #footer {
-    border-top: 1px solid var(--dark-border);
-  }
-}
diff --git a/_content/template.gohtml b/_content/template.gohtml
index e60219e..903425b 100644
--- a/_content/template.gohtml
+++ b/_content/template.gohtml
@@ -6,41 +6,50 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#375EAB" />
     {{- if .Metadata.description}}
     <meta name="description" content="{{.Metadata.description}}" />
     {{- end }}
     <title>{{.Title}}</title>
-    <link rel="stylesheet" href="/index.css" />
+{{- if ne .EmbeddedCSS ""}}
+		<style>
+{{.EmbeddedCSS}}
+		</style>
+{{- end}}
+{{- range .Styles}}
+		<link rel="stylesheet" href="{{.}}">
+{{- end}}
   </head>
 
   <body>
-    <div class="topbar">
-      <div class="topbar-left">
-        <div>
-          <a href="/">kilabit.info</a>
+    <div class="topbar" role="banner">
+        <div class="left">
+          <a class="item title" href="/">kilabit.info</a>
+          <span class="item">|</span>
+          <a class="item" href="/ama" target="_blank"> AmA </a>
+          <span class="item">|</span>
+          <a class="item" href="https://build.kilabit.info" target="_blank"> Build </a>
+          <span class="item">|</span>
+          <a class="item" href="mailto:ms@kilabit.info" target="_blank"> Email </a>
+          <span class="item">|</span>
+          <a class="item" href="https://github.com/shuLhan" target="_blank"> GitHub </a>
+          <span class="item">|</span>
+          <a class="item" rel="me" href="https://fosstodon.org/@shuLhan" target="_blank"> Mastodon </a>
+          <span class="item">|</span>
+          <a class="item" href="/project/"> Projects </a>
+          <span class="item">|</span>
+          <a class="item" href="https://sr.ht/~shulhan" target="_blank"> SourceHut </a>
         </div>
-      </div>
-
-      <div class="topbar-right">
-        |
-        <a href="/ama" target="_blank"> AmA </a> |
-        <a href="https://build.kilabit.info" target="_blank"> Build </a> |
-        <a href="mailto:ms@kilabit.info" target="_blank"> Email </a> |
-        <a href="https://github.com/shuLhan" target="_blank"> GitHub </a> |
-        <a rel="me" href="https://fosstodon.org/@shuLhan" target="_blank"> Mastodon </a> |
-        <a href="/project/"> Projects </a> |
-        <a href="https://sr.ht/~shulhan" target="_blank"> SourceHut </a>
-      </div>
     </div>
 
-    <div class="page">
-      <div class="container">{{.Body}}</div>
+    <div class="page" role="main">
+      <div class="container">
+{{.Body}}
+      </div>
       <!-- .container -->
     </div>
     <!-- .page -->
 
-    <div class="footer">
+    <div class="footer" role="contentinfo">
       <div>
         Copyright 2007-2026, Shulhan &lt;ms&#64;kilabit.info&gt;.
       </div>