diff --git a/astro.config.mjs b/astro.config.mjs
index 7566286..1cffd7a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -7,7 +7,7 @@ export default defineConfig({
base: "/developers",
integrations: [
starlight({
- title: "Interledger Protocol (ILP)",
+ title: "Interledger",
description: "Enable seamless exchange of value across payment networks.",
customCss: [
"./node_modules/@interledger/docs-design-system/src/styles/green-theme.css",
diff --git a/package.json b/package.json
index 1058301..7437d62 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,12 @@
"astro": "astro"
},
"dependencies": {
- "@astrojs/starlight": "^0.12.0",
- "@interledger/docs-design-system": "^0.1.2",
- "@types/showdown": "^2.0.3",
- "astro": "^3.4.3",
+ "@astrojs/starlight": "^0.15.0",
+ "@interledger/docs-design-system": "^0.2.1",
+ "@types/showdown": "^2.0.6",
+ "astro": "^4.0.3",
"node-html-parser": "^6.1.11",
- "sharp": "^0.32.6",
+ "sharp": "^0.33.0",
"showdown": "^2.1.0"
}
}
diff --git a/public/img/devs.svg b/public/img/devs.svg
new file mode 100644
index 0000000..4e46e8f
--- /dev/null
+++ b/public/img/devs.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/DevelopersLogo.astro b/src/components/DevelopersLogo.astro
new file mode 100644
index 0000000..8e007d6
--- /dev/null
+++ b/src/components/DevelopersLogo.astro
@@ -0,0 +1,4 @@
+---
+const { class: className } = Astro.props;
+---
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2305fd2..532a66d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,12 +2,24 @@
import type { Props } from '@astrojs/starlight/props';
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
-import FoundationLogo from "../components/FoundationLogo.astro";
+import DevelopersLogo from "../components/DevelopersLogo.astro";
---
-
+
diff --git a/src/styles/interledger.css b/src/styles/interledger.css
index f0255b4..8c6d624 100644
--- a/src/styles/interledger.css
+++ b/src/styles/interledger.css
@@ -23,8 +23,6 @@
}
:root {
- --sl-font: "Titillium Web";
-
/* Text size and line height */
--step--2: clamp(0.72rem, calc(0.95rem + -0.26vw), 0.89rem);
--step--1: clamp(0.9rem, calc(1.03rem + -0.15vw), 1rem);
@@ -47,51 +45,32 @@
--sl-text-xs: var(--step--1);
--sl-text-sm: var(--step--1);
- --sl-nav-height: 5rem;
-}
-
-/* Background swirl */
-body::before {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 0;
- background-image: url(/developers/img/bg-swirl.svg);
- background-repeat: repeat;
- background-size: 150%;
- filter: blur(150px) opacity(0.1);
- transform: translate3d(0, 0, 0);
- content: "";
-}
+ --sl-nav-height: 4.275rem;
-[data-theme="light"] body::before {
- filter: blur(150px) opacity(0.25);
+ --color-primary-fallback: #057972;
+ --color-primary: oklch(51.95% 0.089 187.7);
+ --color-primary-bg-fallback: rgba(7, 121, 114, 0.1);
+ --color-primary-bg: oklch(51.95% 0.089 187.7 / 0.1);
}
/* Site header overrides */
header.header {
background-color: var(--sl-color-black);
border-bottom: 0;
+ font-family: "Titillium Web";
}
[data-theme="dark"] .logo-text {
fill: white;
}
-/* Landing page card styles */
-.card-grid > div {
- background-color: var(--sl-color-black);
-}
-
/* Github pulled spec content */
-.content h1 {
+.sl-markdown-content h1 {
display: none;
}
-.sl-container .content astro-island > h1 + p,
-.sl-container .content astro-island > h1 + blockquote {
+.sl-container .sl-markdown-content astro-island > h1 + p,
+.sl-container .sl-markdown-content astro-island > h1 + blockquote {
margin-top: 0;
}
@@ -108,14 +87,14 @@ header.header {
font-family: var(--sl-font-system);
}
-.content > blockquote,
-.content > h1 + blockquote {
+.sl-markdown-content > blockquote,
+.sl-markdown-content > h1 + blockquote {
border-inline-start: 2px solid var(--sl-color-text-accent);
font-size: var(--step-1);
font-style: italic;
}
-.content > :first-child {
+.sl-markdown-content > :first-child {
margin-top: var(--space-s);
}
@@ -177,16 +156,16 @@ div.community.community p {
}
/* Code block styles */
-.content pre {
+.sl-markdown-content pre {
background-color: var(--astro-code-color-background);
overflow-x: auto;
}
-.content.content pre {
+.sl-markdown-content.sl-markdown-content pre {
padding: 0;
}
/* Misc tweaks */
-.content img {
+.sl-markdown-content img {
background-color: white;
}
diff --git a/src/styles/lander.css b/src/styles/lander.css
deleted file mode 100644
index 9314bee..0000000
--- a/src/styles/lander.css
+++ /dev/null
@@ -1,74 +0,0 @@
-@font-face {
- font-family: "Titillium";
- src: url("/developers/fonts/titilliumweb-regular.woff2") format("woff2");
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: "Titillium";
- src: url("/developers/fonts/titilliumweb-bold.woff2") format("woff2");
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: "Titillium";
- src: url("/developers/fonts/titilliumweb-italic.woff2") format("woff2");
- font-weight: normal;
- font-style: italic;
-}
-
-:root {
- --step--1: clamp(0.8rem, calc(0.7rem + 0.44vw), 0.95rem);
- --step-0: clamp(1rem, calc(0.88rem + 0.56vw), 1.19rem);
- --step-1: clamp(1.25rem, calc(1.09rem + 0.69vw), 1.48rem);
- --step-2: clamp(1.56rem, calc(1.37rem + 0.87vw), 1.86rem);
- --step-3: clamp(1.95rem, calc(1.71rem + 1.09vw), 2.32rem);
- --step-4: clamp(2.44rem, calc(2.14rem + 1.36vw), 2.9rem);
- --step-5: clamp(3.05rem, calc(2.67rem + 1.69vw), 3.62rem);
- --space-3xs: clamp(0.25rem, calc(0.21rem + 0.19vw), 0.31rem);
- --space-2xs: clamp(0.5rem, calc(0.42rem + 0.37vw), 0.63rem);
- --space-xs: clamp(0.75rem, calc(0.67rem + 0.37vw), 0.88rem);
- --space-s: clamp(1rem, calc(0.88rem + 0.56vw), 1.19rem);
- --space-m: clamp(1.5rem, calc(1.29rem + 0.93vw), 1.81rem);
- --space-l: clamp(2rem, calc(1.75rem + 1.11vw), 2.38rem);
- --space-xl: clamp(3rem, calc(2.63rem + 1.67vw), 3.56rem);
- --space-2xl: clamp(4rem, calc(3.5rem + 2.22vw), 4.75rem);
- --space-3xl: clamp(6rem, calc(5.25rem + 3.33vw), 7.13rem);
- --color-bg: #000;
- --color-text: #fff;
- --max-container-width: 1160px;
- --border-radius: 6px;
- --option1: linear-gradient(
- to bottom,
- hsla(162, 86%, 12%, 1),
- hsla(176, 100%, 30%, 1)
- );
-}
-
-/* CSS Resets */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-* {
- margin: 0;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
- max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
- font: inherit;
-}
diff --git a/src/styles/pages.css b/src/styles/pages.css
new file mode 100644
index 0000000..b44bdda
--- /dev/null
+++ b/src/styles/pages.css
@@ -0,0 +1,97 @@
+@font-face {
+ font-family: "Titillium";
+ src: url("/developers/fonts/titilliumweb-regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Titillium";
+ src: url("/developers/fonts/titilliumweb-bold.woff2") format("woff2");
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Titillium";
+ src: url("/developers/fonts/titilliumweb-italic.woff2") format("woff2");
+ font-weight: normal;
+ font-style: italic;
+}
+
+/* Shared custom property values */
+:root {
+ --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ --step--1: clamp(0.9rem, 0.7826rem + 0.5217vw, 1.2rem);
+ --step-0: clamp(1.125rem, 0.9783rem + 0.6522vw, 1.5rem);
+ --step-1: clamp(1.4063rem, 1.2228rem + 0.8152vw, 1.875rem);
+ --step-2: clamp(1.7581rem, 1.529rem + 1.0185vw, 2.3438rem);
+ --step-3: clamp(2.1975rem, 1.9109rem + 1.2739vw, 2.93rem);
+ --step-4: clamp(2.7469rem, 2.3888rem + 1.5913vw, 3.6619rem);
+ --step-5: clamp(3.4331rem, 2.9853rem + 1.9902vw, 4.5775rem);
+ --step-6: clamp(4.2913rem, 3.7314rem + 2.488vw, 5.7219rem);
+ --space-3xs: clamp(0.3125rem, 0.288rem + 0.1087vw, 0.375rem);
+ --space-2xs: clamp(0.5625rem, 0.4891rem + 0.3261vw, 0.75rem);
+ --space-xs: clamp(0.875rem, 0.7772rem + 0.4348vw, 1.125rem);
+ --space-s: clamp(1.125rem, 0.9783rem + 0.6522vw, 1.5rem);
+ --space-m: clamp(1.6875rem, 1.4674rem + 0.9783vw, 2.25rem);
+ --space-l: clamp(2.25rem, 1.9565rem + 1.3043vw, 3rem);
+ --space-xl: clamp(3.375rem, 2.9348rem + 1.9565vw, 4.5rem);
+ --space-2xl: clamp(4.5rem, 3.913rem + 2.6087vw, 6rem);
+ --space-3xl: clamp(6.75rem, 5.8696rem + 3.913vw, 9rem);
+ --border-radius: 6px;
+ --max-content-width: 1160px;
+ --site-header-height: 4.275rem;
+
+ --box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
+ 0px 2px 2px hsla(0, 0%, 0%, 0.06);
+ --color-white: #fff;
+ --color-black: #000;
+
+ --color-primary-fallback: #057972;
+ --color-primary: oklch(51.95% 0.089 187.7);
+ --color-primary-bg-fallback: rgba(7, 121, 114, 0.1);
+ --color-primary-bg: oklch(51.95% 0.089 187.7 / 0.1);
+ --filter-primary: invert(33%) sepia(60%) saturate(1165%) hue-rotate(139deg)
+ brightness(89%) contrast(96%);
+
+ --color-header-bg: var(--color-white);
+ --color-btn-bg: var(--color-white);
+}
+
+[data-theme="dark"] {
+ --color-bg: var(--color-black);
+ --color-text: var(--color-white);
+ --option1: linear-gradient(
+ to bottom,
+ hsla(162, 86%, 12%, 1),
+ hsla(176, 100%, 30%, 1)
+ );
+}
+
+/* CSS Resets */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+ max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+