Added new doc theme.

meta/plugins/__init__.py

@@ -52,7 +52,7 @@ class Site(DataClassJsonMixin):
     navbar: str = dt.field(default="")
     footer: str = dt.field(default="")
 
-    path: str = dt.field(default="")
+    path: Path = dt.field(default=Path(""))
 
     @staticmethod
     def load() -> "Site":
@@ -69,7 +69,7 @@ def renderFavicon(self) -> str:
         return f"data:image/svg+xml,{svgEscaped}"
 
     def renderHeader(self) -> str:
-        return f'<a href="/"><h1>{self.header or self.title}</h1></a>'
+        return f'<a class="title" href="/"><h1>{self.header or self.title}</h1></a>'
 
     def renderAll(self, out: Path, args: BuildArgs) -> None:
         style = ""
@@ -181,7 +181,7 @@ def _():
 {
     "favicon": "🐱",
     "title": "Cat",
-    "header": "<span style=\\"white-space: nowrap;\\">ᓚ₍ ^. .^₎</span>",
+    "header": "ᓚ₍ ^. .^₎",
     "navbar": "[Home](/)",
     "footer": "Built with [ᓚ₍ ^. .^₎](https://github.com/cute-engineering/cat)"
 }

meta/plugins/doc.css

@@ -0,0 +1,245 @@
+/* Font */
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@700,701,401,400&display=swap");
+
+/* Settings */
+:root {
+    --color-dark: #1a1a1a;
+    --color-light: #fafafa;
+    --color-primary: #1a8fe3;
+    --spacing: 1.5rem;
+    --font-stack: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --max-width: 1600px;
+}
+
+/* Dark mode settings */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-dark: #fafafa;
+        --color-light: #1a1a1a;
+    }
+}
+
+/* Basic styles */
+body {
+    background: var(--color-light);
+    color: var(--color-dark);
+    padding: 5vw;
+    font-family: var(--font-stack);
+    font-size: 1.5rem;
+    line-height: 1.7;
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    min-height: 100vh;
+    max-width: var(--max-width);
+    margin: 0 auto;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+header,
+main,
+footer {
+    max-width: 60ch;
+    margin-inline: auto;
+    width: 100%;
+}
+
+/* Header styles */
+header {
+    padding-bottom: var(--spacing);
+    flex-basis: 12rem;
+    flex-grow: 1;
+}
+
+/* Main content styles */
+main {
+    flex-basis: 0;
+    flex-grow: 999;
+    padding-bottom: calc(var(--spacing) * 2);
+    flex-basis: 40rem;
+}
+
+/* Footer styles */
+footer {
+    min-width: 100%;
+    flex-basis: 0;
+    flex-grow: 1;
+    padding-top: var(--spacing);
+}
+
+/* Link styles */
+a {
+    color: currentColor;
+    text-decoration-color: var(--color-primary);
+    text-decoration-thickness: 0.2ex;
+    text-underline-offset: 0.3ex;
+}
+
+a:hover {
+    text-decoration-thickness: 0.3ex;
+}
+
+/* Image styles */
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+/* Heading styles */
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-weight: 700;
+    line-height: 1.3;
+    text-wrap: balance;
+}
+
+/* Adjustments for different heading levels */
+h1 {
+    font-size: 3.55rem;
+}
+
+h2 {
+    font-size: 2.66rem;
+}
+
+h3 {
+    font-size: 2rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.13rem;
+}
+
+/* List styles */
+ul,
+ol {
+    padding-inline-start: var(--spacing);
+}
+
+li {
+    margin-block-start: var(--spacing);
+}
+
+/* Blockquote styles */
+blockquote {
+    padding-inline-start: var(--spacing);
+    border-inline-start: 0.3em solid;
+    font-style: italic;
+    font-size: 1.5rem;
+}
+
+/* Flow and rhythm */
+:is(h1, h2, h3, h4, h5, blockquote) {
+    margin-block-end: calc(var(--spacing) / 2);
+}
+
+:is(h1, h2, h3, h4, h5)+* {
+    margin-block-start: calc(var(--spacing) / 3);
+}
+
+:is(h1, h2, h3, h4, h5)+ :where(h2, h3, h4, h5) {
+    margin-block-start: calc(var(--spacing) * 2);
+}
+
+/* Line lengths */
+blockquote {
+    max-width: 50ch;
+}
+
+h1 {
+    max-width: 24ch;
+}
+
+h2,
+h3 {
+    max-width: 32ch;
+}
+
+/* Bear Content */
+.title {
+    text-decoration: none;
+}
+
+.title h1 {
+    font-size: 2rem;
+    margin-top: calc(var(--spacing) / 2);
+}
+
+nav {
+    position: sticky;
+    top: var(--spacing);
+}
+
+nav p {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--spacing);
+    row-gap: 0;
+}
+
+@media screen and (min-width: 1000px) {
+    nav p {
+        flex-direction: column;
+    }
+}
+
+ul.blog-posts {
+    list-style-type: none;
+    padding: unset;
+}
+
+ul.blog-posts li {
+    display: flex;
+    flex-direction: column;
+}
+
+@media screen and (min-width: 600px) {
+    ul.blog-posts li {
+        flex-direction: row;
+        gap: calc(var(--spacing) / 2);
+    }
+}
+
+ul.blog-posts li span {
+    min-width: 11ch;
+}
+
+time {
+    opacity: 0.5;
+    font-style: normal;
+}
+
+.highlight,
+.code {
+    padding: 1px var(--spacing);
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    overflow-x: auto;
+    line-height: 1.2;
+}
+
+table {
+    width: 100%;
+}
+
+th {
+    text-align: left;
+}
+
+hr {
+    border-color: rgba(0, 0, 0, 0.1);
+}