1 files changed, 72 insertions, 0 deletions
diff --git a/docs/src/style.css b/docs/src/style.css
new file mode 100644
index 0000000..b6a0047
--- /dev/null
+++ b/docs/src/style.css
@@ -0,0 +1,72 @@
+/* Dark mode colors. */
+:root {
+    --sl-color-accent-low: #10243e;
+    --sl-color-accent: #3584e4;
+    --sl-color-accent-high: #99c1f1;
+    --sl-color-white: #ffffff;
+    --sl-color-gray-1: #eeeeee;
+    --sl-color-gray-2: #c2c2c2;
+    --sl-color-gray-3: #8b8b8b;
+    --sl-color-gray-4: #585858;
+    --sl-color-gray-5: #383838;
+    --sl-color-gray-6: #272727;
+    --sl-color-black: #171718;
+}
+
+/* Light mode colors. */
+:root[data-theme='light'] {
+    --sl-color-accent-low: #c5d9f2;
+    --sl-color-accent: #156ac7;
+    --sl-color-accent-high: #11325b;
+    --sl-color-white: #181818;
+    --sl-color-gray-1: #272727;
+    --sl-color-gray-2: #383838;
+    --sl-color-gray-3: #585858;
+    --sl-color-gray-4: #8b8b8b;
+    --sl-color-gray-5: #c2c2c2;
+    --sl-color-gray-6: #eeeeee;
+    --sl-color-gray-7: #f6f6f6;
+    --sl-color-black: #ffffff;
+}
+
+:root {
+    --card-radius: 7px;
+}
+
+article.card {
+    border-radius: var(--card-radius);
+    background-color: color-mix(in srgb, var(--sl-color-black), var(--sl-color-white) 2%);
+    border-color: var(--sl-color-gray-6);
+}
+
+/* landing page gradient */
+:root {
+    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 85%);
+}
+
+:root[data-theme='light'] {
+    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 55%);
+}
+
+[data-has-hero] .page {
+    background:
+        linear-gradient(215deg, var(--overlay-gradient), transparent 40%),
+        radial-gradient(var(--overlay-gradient), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
+        radial-gradient(var(--overlay-gradient), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
+}
+
+[data-has-hero] header {
+    border-bottom: 1px solid transparent;
+    background-color: transparent;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+}
+
+[data-has-hero] .hero>img {
+    filter: drop-shadow(0 0 3rem var(--overlay-gradient));
+}
+
+div.showcases {
+    display: flex;
+    flex-direction: column;
+}