@geekity/cms 0.40.0 → 0.42.0

package/themes/default/static/style.css

@@ -321,6 +321,11 @@
     display: none !important;
   }
 
+  :root {
+    --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+    --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+  }
+
   html {
     -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
@@ -331,8 +336,8 @@
 
   body {
     background-color: var(--color-body);
+    font-family: var(--font-body);
     --tw-leading: var(--leading-relaxed);
-    font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
     line-height: var(--leading-relaxed);
     color: var(--color-text);
     -webkit-font-smoothing: antialiased;
@@ -340,6 +345,7 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
     --tw-tracking: var(--tracking-tight);
@@ -519,6 +525,7 @@
   .header-link-home {
     min-block-size: 24px;
     min-inline-size: 24px;
+    font-family: var(--font-heading);
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
     --tw-font-weight: var(--font-weight-bold);
@@ -527,6 +534,15 @@
     display: inline-flex;
   }
 
+  .site-icon {
+    vertical-align: -.12em;
+    border-radius: .18em;
+    width: 1em;
+    height: 1em;
+    margin-inline-end: .3em;
+    display: inline-block;
+  }
+
   .site-tagline {
     margin-top: calc(var(--spacing) * 3);
     font-size: var(--text-lg);
@@ -1685,6 +1701,7 @@
   .backlinks-title {
     margin-bottom: calc(var(--spacing) * 2);
     --tw-font-weight: var(--font-weight-normal);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
     font-size: .72rem;
     font-weight: var(--font-weight-normal);
     --tw-tracking: .14em;
@@ -2223,7 +2240,7 @@
     width: 100%;
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
-    font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
+    font-family: var(--font-body);
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
     color: var(--color-text);
@@ -2408,6 +2425,17 @@
 
 :root {
   color-scheme: light dark;
+}
+
+:root[data-mode="light"] {
+  color-scheme: light;
+}
+
+:root[data-mode="dark"] {
+  color-scheme: dark;
+}
+
+:root, :root[data-scheme="paper"] {
   --color-body: #faf7f2;
   --color-text: #1c1917;
   --color-muted: #534c46;
@@ -2436,7 +2464,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :is(:root, :root[data-scheme="paper"]):not([data-mode="light"]) {
     --color-body: #171412;
     --color-text: #ece6de;
     --color-muted: #b2aaa0;
@@ -2465,6 +2493,464 @@
   }
 }
 
+:is(:root, :root[data-scheme="paper"])[data-mode="dark"] {
+  --color-body: #171412;
+  --color-text: #ece6de;
+  --color-muted: #b2aaa0;
+  --color-primary: #ee9370;
+  --color-secondary: #86b8e2;
+  --color-rule: #3a332e;
+  --color-edge: #706a67;
+  --color-base: #221d1a;
+  --color-base-2: #222124;
+  --color-base-3: #2d2421;
+  --color-code-background: #221d1a;
+  --color-code-text: #ece6de;
+  --color-error: #ff8f9f;
+  --color-code-comment: #a9a9a9;
+  --color-code-tag: #b4b7b4;
+  --color-code-name: #f48b8d;
+  --color-code-literal: #f99157;
+  --color-code-class: #fc6;
+  --color-code-string: #9c9;
+  --color-code-support: #6cc;
+  --color-code-function: #83add6;
+  --color-code-keyword: #c9c;
+  --color-code-meta: #c6a198;
+  --color-code-added-background: #203622;
+  --color-code-removed-background: #401e1e;
+}
+
+:root[data-scheme="slate"] {
+  --color-body: #f4f7fb;
+  --color-text: #161b20;
+  --color-muted: #4b4f54;
+  --color-primary: #0f4e94;
+  --color-secondary: #59447b;
+  --color-rule: #dadee3;
+  --color-edge: #82868a;
+  --color-base: #edf1f6;
+  --color-base-2: #f3f2f5;
+  --color-base-3: #fff;
+  --color-code-background: #edf1f6;
+  --color-code-text: #161b20;
+  --color-error: #9d121d;
+  --color-code-comment: #4e4e4e;
+  --color-code-tag: #514e4f;
+  --color-code-name: #991c21;
+  --color-code-literal: #7c3e03;
+  --color-code-class: #614c02;
+  --color-code-string: #405603;
+  --color-code-support: #045858;
+  --color-code-function: #1f4f8a;
+  --color-code-keyword: #6b3a7f;
+  --color-code-meta: #6d443a;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-scheme="slate"]:not([data-mode="light"]) {
+    --color-body: #12161c;
+    --color-text: #e3e8f0;
+    --color-muted: #a3adba;
+    --color-primary: #80b7fe;
+    --color-secondary: #b7a2e0;
+    --color-rule: #212831;
+    --color-edge: #676e77;
+    --color-base: #181f27;
+    --color-base-2: #1e1d22;
+    --color-base-3: #21272f;
+    --color-code-background: #181f27;
+    --color-code-text: #e3e8f0;
+    --color-error: #ff8a83;
+    --color-code-comment: #acacac;
+    --color-code-tag: #adabab;
+    --color-code-name: #ff8a83;
+    --color-code-literal: #f29551;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5bbaba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd98e4;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme="slate"][data-mode="dark"] {
+  --color-body: #12161c;
+  --color-text: #e3e8f0;
+  --color-muted: #a3adba;
+  --color-primary: #80b7fe;
+  --color-secondary: #b7a2e0;
+  --color-rule: #212831;
+  --color-edge: #676e77;
+  --color-base: #181f27;
+  --color-base-2: #1e1d22;
+  --color-base-3: #21272f;
+  --color-code-background: #181f27;
+  --color-code-text: #e3e8f0;
+  --color-error: #ff8a83;
+  --color-code-comment: #acacac;
+  --color-code-tag: #adabab;
+  --color-code-name: #ff8a83;
+  --color-code-literal: #f29551;
+  --color-code-class: #cca83c;
+  --color-code-string: #95b84d;
+  --color-code-support: #5bbaba;
+  --color-code-function: #7caff1;
+  --color-code-keyword: #cd98e4;
+  --color-code-meta: #d1a195;
+  --color-code-added-background: #213622;
+  --color-code-removed-background: #442727;
+}
+
+:root[data-scheme="forest"] {
+  --color-body: #f5f7ed;
+  --color-text: #1a1b15;
+  --color-muted: #4d4f42;
+  --color-primary: #035b27;
+  --color-secondary: #734301;
+  --color-rule: #dcdfd0;
+  --color-edge: #84867b;
+  --color-base: #eff1e4;
+  --color-base-2: #eef3ef;
+  --color-base-3: #fff;
+  --color-code-background: #eff1e4;
+  --color-code-text: #1a1b15;
+  --color-error: #9c111c;
+  --color-code-comment: #4e4e4e;
+  --color-code-tag: #504d4e;
+  --color-code-name: #991b21;
+  --color-code-literal: #7b3d02;
+  --color-code-class: #604b01;
+  --color-code-string: #3f5501;
+  --color-code-support: #025757;
+  --color-code-function: #1e4e89;
+  --color-code-keyword: #6a3a7f;
+  --color-code-meta: #6c4339;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-scheme="forest"]:not([data-mode="light"]) {
+    --color-body: #0f1912;
+    --color-text: #e2eae4;
+    --color-muted: #9db1a3;
+    --color-primary: #75c687;
+    --color-secondary: #daa168;
+    --color-rule: #1c2c22;
+    --color-edge: #627166;
+    --color-base: #142219;
+    --color-base-2: #182020;
+    --color-base-3: #1c2a21;
+    --color-code-background: #142219;
+    --color-code-text: #e2eae4;
+    --color-error: #fe8c84;
+    --color-code-comment: #acacac;
+    --color-code-tag: #aeacac;
+    --color-code-name: #fe8c84;
+    --color-code-literal: #f39651;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5cbbba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd99e5;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme="forest"][data-mode="dark"] {
+  --color-body: #0f1912;
+  --color-text: #e2eae4;
+  --color-muted: #9db1a3;
+  --color-primary: #75c687;
+  --color-secondary: #daa168;
+  --color-rule: #1c2c22;
+  --color-edge: #627166;
+  --color-base: #142219;
+  --color-base-2: #182020;
+  --color-base-3: #1c2a21;
+  --color-code-background: #142219;
+  --color-code-text: #e2eae4;
+  --color-error: #fe8c84;
+  --color-code-comment: #acacac;
+  --color-code-tag: #aeacac;
+  --color-code-name: #fe8c84;
+  --color-code-literal: #f39651;
+  --color-code-class: #cca83c;
+  --color-code-string: #95b84d;
+  --color-code-support: #5cbbba;
+  --color-code-function: #7caff1;
+  --color-code-keyword: #cd99e5;
+  --color-code-meta: #d1a195;
+  --color-code-added-background: #213622;
+  --color-code-removed-background: #442727;
+}
+
+:root[data-scheme="plum"] {
+  --color-body: #fbf3fa;
+  --color-text: #1e191d;
+  --color-muted: #544b53;
+  --color-primary: #822973;
+  --color-secondary: #3f488b;
+  --color-rule: #e4d9e2;
+  --color-edge: #8a8289;
+  --color-base: #f6ecf5;
+  --color-base-2: #f6f0f1;
+  --color-base-3: #fff;
+  --color-code-background: #f6ecf5;
+  --color-code-text: #1e191d;
+  --color-error: #9c111c;
+  --color-code-comment: #4d4d4d;
+  --color-code-tag: #504d4e;
+  --color-code-name: #981b20;
+  --color-code-literal: #7b3d02;
+  --color-code-class: #604b01;
+  --color-code-string: #3f5501;
+  --color-code-support: #025757;
+  --color-code-function: #1e4e89;
+  --color-code-keyword: #6a397e;
+  --color-code-meta: #6c4339;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-scheme="plum"]:not([data-mode="light"]) {
+    --color-body: #1b121d;
+    --color-text: #ece5ed;
+    --color-muted: #b7a5bc;
+    --color-primary: #f493e0;
+    --color-secondary: #98a6f2;
+    --color-rule: #302233;
+    --color-edge: #766879;
+    --color-base: #251928;
+    --color-base-2: #251b1e;
+    --color-base-3: #2e2131;
+    --color-code-background: #251928;
+    --color-code-text: #ece5ed;
+    --color-error: #ff8880;
+    --color-code-comment: #ababab;
+    --color-code-tag: #acaaab;
+    --color-code-name: #ff8880;
+    --color-code-literal: #f1944f;
+    --color-code-class: #cba63a;
+    --color-code-string: #94b74c;
+    --color-code-support: #5ab9b8;
+    --color-code-function: #7aadef;
+    --color-code-keyword: #cb97e3;
+    --color-code-meta: #d0a093;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme="plum"][data-mode="dark"] {
+  --color-body: #1b121d;
+  --color-text: #ece5ed;
+  --color-muted: #b7a5bc;
+  --color-primary: #f493e0;
+  --color-secondary: #98a6f2;
+  --color-rule: #302233;
+  --color-edge: #766879;
+  --color-base: #251928;
+  --color-base-2: #251b1e;
+  --color-base-3: #2e2131;
+  --color-code-background: #251928;
+  --color-code-text: #ece5ed;
+  --color-error: #ff8880;
+  --color-code-comment: #ababab;
+  --color-code-tag: #acaaab;
+  --color-code-name: #ff8880;
+  --color-code-literal: #f1944f;
+  --color-code-class: #cba63a;
+  --color-code-string: #94b74c;
+  --color-code-support: #5ab9b8;
+  --color-code-function: #7aadef;
+  --color-code-keyword: #cb97e3;
+  --color-code-meta: #d0a093;
+  --color-code-added-background: #213622;
+  --color-code-removed-background: #442727;
+}
+
+:root[data-scheme="ocean"] {
+  --color-body: #eef9fb;
+  --color-text: #141c1d;
+  --color-muted: #435153;
+  --color-primary: #04585c;
+  --color-secondary: #184f90;
+  --color-rule: #d2e1e3;
+  --color-edge: #7c888a;
+  --color-base: #e5f4f6;
+  --color-base-2: #eff3f7;
+  --color-base-3: #fff;
+  --color-code-background: #e5f4f6;
+  --color-code-text: #141c1d;
+  --color-error: #9e131d;
+  --color-code-comment: #4f4f4f;
+  --color-code-tag: #514e4f;
+  --color-code-name: #991c21;
+  --color-code-literal: #7d3e00;
+  --color-code-class: #624c03;
+  --color-code-string: #405603;
+  --color-code-support: #045858;
+  --color-code-function: #1f4f8a;
+  --color-code-keyword: #6b3b80;
+  --color-code-meta: #6d443a;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-scheme="ocean"]:not([data-mode="light"]) {
+    --color-body: #08191f;
+    --color-text: #e0eaee;
+    --color-muted: #91b1be;
+    --color-primary: #57c5cb;
+    --color-secondary: #77aff7;
+    --color-rule: #122b35;
+    --color-edge: #59717a;
+    --color-base: #0a212a;
+    --color-base-2: #1a1e26;
+    --color-base-3: #122a33;
+    --color-code-background: #0a212a;
+    --color-code-text: #e0eaee;
+    --color-error: #ff8a83;
+    --color-code-comment: #acacac;
+    --color-code-tag: #adabab;
+    --color-code-name: #ff8a83;
+    --color-code-literal: #f29551;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5bbaba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd98e4;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme="ocean"][data-mode="dark"] {
+  --color-body: #08191f;
+  --color-text: #e0eaee;
+  --color-muted: #91b1be;
+  --color-primary: #57c5cb;
+  --color-secondary: #77aff7;
+  --color-rule: #122b35;
+  --color-edge: #59717a;
+  --color-base: #0a212a;
+  --color-base-2: #1a1e26;
+  --color-base-3: #122a33;
+  --color-code-background: #0a212a;
+  --color-code-text: #e0eaee;
+  --color-error: #ff8a83;
+  --color-code-comment: #acacac;
+  --color-code-tag: #adabab;
+  --color-code-name: #ff8a83;
+  --color-code-literal: #f29551;
+  --color-code-class: #cca83c;
+  --color-code-string: #95b84d;
+  --color-code-support: #5bbaba;
+  --color-code-function: #7caff1;
+  --color-code-keyword: #cd98e4;
+  --color-code-meta: #d1a195;
+  --color-code-added-background: #213622;
+  --color-code-removed-background: #442727;
+}
+
+:root[data-scheme="ink"] {
+  --color-body: #fff;
+  --color-text: #030303;
+  --color-muted: #3f3f3f;
+  --color-primary: #1b388a;
+  --color-secondary: #3f3f3f;
+  --color-rule: #e6e6e6;
+  --color-edge: #737373;
+  --color-base: #f9f9f9;
+  --color-base-2: #fbfbfb;
+  --color-base-3: #fff;
+  --color-code-background: #f9f9f9;
+  --color-code-text: #030303;
+  --color-error: #840111;
+  --color-code-comment: #3f3f3f;
+  --color-code-tag: #3f3e3f;
+  --color-code-name: #6c2927;
+  --color-code-literal: #61320b;
+  --color-code-class: #4e3d02;
+  --color-code-string: #334408;
+  --color-code-support: #114646;
+  --color-code-function: #264061;
+  --color-code-keyword: #4f345b;
+  --color-code-meta: #513933;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-scheme="ink"]:not([data-mode="light"]) {
+    --color-body: #0d0d0d;
+    --color-text: #f5f5f5;
+    --color-muted: #c2c2c2;
+    --color-primary: #aec8fe;
+    --color-secondary: #c2c2c2;
+    --color-rule: #1e1e1e;
+    --color-edge: #7f7f7f;
+    --color-base: #151515;
+    --color-base-2: #151515;
+    --color-base-3: #1d1d1d;
+    --color-code-background: #151515;
+    --color-code-text: #f5f5f5;
+    --color-error: #ffaaa2;
+    --color-code-comment: #c2c2c2;
+    --color-code-tag: #c1c0c0;
+    --color-code-name: #fcaba4;
+    --color-code-literal: #edb48d;
+    --color-code-class: #d4bf86;
+    --color-code-string: #b1c88c;
+    --color-code-support: #96cac9;
+    --color-code-function: #a4c3eb;
+    --color-code-keyword: #d4b5e3;
+    --color-code-meta: #d8bab2;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme="ink"][data-mode="dark"] {
+  --color-body: #0d0d0d;
+  --color-text: #f5f5f5;
+  --color-muted: #c2c2c2;
+  --color-primary: #aec8fe;
+  --color-secondary: #c2c2c2;
+  --color-rule: #1e1e1e;
+  --color-edge: #7f7f7f;
+  --color-base: #151515;
+  --color-base-2: #151515;
+  --color-base-3: #1d1d1d;
+  --color-code-background: #151515;
+  --color-code-text: #f5f5f5;
+  --color-error: #ffaaa2;
+  --color-code-comment: #c2c2c2;
+  --color-code-tag: #c1c0c0;
+  --color-code-name: #fcaba4;
+  --color-code-literal: #edb48d;
+  --color-code-class: #d4bf86;
+  --color-code-string: #b1c88c;
+  --color-code-support: #96cac9;
+  --color-code-function: #a4c3eb;
+  --color-code-keyword: #d4b5e3;
+  --color-code-meta: #d8bab2;
+  --color-code-added-background: #213622;
+  --color-code-removed-background: #442727;
+}
+
 @media (forced-colors: active) {
   .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
     border: 1px solid buttontext;

package/themes/default/theme.json

@@ -1,9 +1,31 @@
 {
   "name": "Default",
   "kind": "site",
-  "description": "The theme that ships with Geekity: Nunjucks and one stylesheet compiled from Tailwind, in the Paper design, and the layer every other theme is laid over.",
+  "description": "The theme that ships with Geekity CMS: Nunjucks and one stylesheet compiled from Tailwind, in the Paper design, and the layer every other theme is laid over.",
   "colorScheme": "light dark",
   "themeColor": { "light": "#faf7f2", "dark": "#171412" },
+  "schemes": [
+    { "name": "paper", "label": "Paper", "themeColor": { "light": "#faf7f2", "dark": "#171412" } },
+    { "name": "slate", "label": "Slate", "themeColor": { "light": "#f4f7fb", "dark": "#12161c" } },
+    {
+      "name": "forest",
+      "label": "Forest",
+      "themeColor": { "light": "#f5f7ed", "dark": "#0f1912" }
+    },
+    { "name": "plum", "label": "Plum", "themeColor": { "light": "#fbf3fa", "dark": "#1b121d" } },
+    { "name": "ocean", "label": "Ocean", "themeColor": { "light": "#eef9fb", "dark": "#08191f" } },
+    { "name": "ink", "label": "Ink", "themeColor": { "light": "#ffffff", "dark": "#0d0d0d" } }
+  ],
+  "fonts": {
+    "heading": {
+      "label": "Headings",
+      "fallback": "'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif"
+    },
+    "body": {
+      "label": "Body text",
+      "fallback": "'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif"
+    }
+  },
   "areas": [
     { "name": "primary", "label": "Site menu" },
     { "name": "footer", "label": "Footer links" }