feat(docs): theme and different size icons (#123)

2026-01-13 18:05:03 +04:00
parent 5ce5d319aa
commit f9757679c2
5 changed files with 101 additions and 0 deletions
@@ -0,0 +1,59 @@
+/* Takopi palette */
+:root {
+  --takopi-pink: #f4a5b8;
+  --takopi-flower: #e87a9f;
+  --takopi-teal: #4a9b8e;
+  --takopi-teal-bright: #5ab5a6;
+}
+
+:root[data-md-color-scheme="default"] {
+  --md-primary-fg-color: var(--takopi-flower);
+  --md-primary-fg-color--light: var(--takopi-pink);
+  --md-primary-fg-color--dark: #d95f86;
+  --md-accent-fg-color: var(--takopi-teal);
+  --md-accent-fg-color--transparent: rgba(74, 155, 142, 0.12);
+  --md-typeset-a-color: var(--takopi-teal);
+  --md-default-bg-color: #fffaf7;
+  --md-code-bg-color: rgba(244, 165, 184, 0.1);
+}
+
+:root[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: var(--takopi-pink);
+  --md-primary-fg-color--light: #f7b9c8;
+  --md-primary-fg-color--dark: var(--takopi-flower);
+  --md-accent-fg-color: var(--takopi-teal-bright);
+  --md-accent-fg-color--transparent: rgba(90, 181, 166, 0.12);
+  --md-typeset-a-color: var(--takopi-teal-bright);
+  --md-code-bg-color: rgba(244, 165, 184, 0.12);
+}
+
+/* Warm bokeh-ish background */
+:root[data-md-color-scheme="default"] body {
+  background:
+    radial-gradient(1100px circle at 12% 6%, rgba(244, 165, 184, 0.3), transparent 55%),
+    radial-gradient(900px circle at 88% 0%, rgba(74, 155, 142, 0.22), transparent 55%),
+    radial-gradient(1000px circle at 45% 95%, rgba(255, 230, 199, 0.55), transparent 60%),
+    var(--md-default-bg-color);
+}
+
+:root[data-md-color-scheme="slate"] body {
+  background:
+    radial-gradient(900px circle at 12% 0%, rgba(244, 165, 184, 0.12), transparent 55%),
+    radial-gradient(900px circle at 85% 0%, rgba(90, 181, 166, 0.1), transparent 55%),
+    radial-gradient(1000px circle at 50% 100%, rgba(255, 230, 199, 0.06), transparent 60%),
+    var(--md-default-bg-color);
+}
+
+/* Softer shapes */
+.md-typeset .admonition,
+.md-typeset details {
+  border-radius: 12px;
+}
+
+.md-typeset .md-button {
+  border-radius: 999px;
+}
+
+::selection {
+  background: rgba(232, 122, 159, 0.35);
+}