From c565ca9979b8f92979adbec30ae451d524866b8a Mon Sep 17 00:00:00 2001
From: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:12:57 +0100
Subject: [PATCH 1/7] Reorganise and refactor of pages
---
package.json | 6 +-
.../AnimatedSummitLogo.astro | 0
src/components/{lander => pages}/Footer.astro | 0
src/components/pages/FoundationFooter.astro | 107 ++++++++++++
src/components/pages/FoundationHeader.astro | 38 +++++
.../LanderHeader.astro} | 5 +-
.../{lander => pages}/Section.astro | 0
src/content/docs/{index.mdx => splash.mdx} | 0
src/layouts/HomeLayout.astro | 131 +++++++++++++++
.../{Layout.astro => LanderLayout.astro} | 40 ++---
src/pages/hackathon-2023.astro | 12 +-
src/pages/hacktoberfest.astro | 13 +-
src/pages/index.astro | 158 ++++++++++++++++++
src/styles/interledger.css | 25 ---
src/styles/lander.css | 74 --------
src/styles/pages.css | 93 +++++++++++
16 files changed, 560 insertions(+), 142 deletions(-)
rename src/components/{lander => pages}/AnimatedSummitLogo.astro (100%)
rename src/components/{lander => pages}/Footer.astro (100%)
create mode 100644 src/components/pages/FoundationFooter.astro
create mode 100644 src/components/pages/FoundationHeader.astro
rename src/components/{lander/TopBanner.astro => pages/LanderHeader.astro} (93%)
rename src/components/{lander => pages}/Section.astro (100%)
rename src/content/docs/{index.mdx => splash.mdx} (100%)
create mode 100644 src/layouts/HomeLayout.astro
rename src/layouts/{Layout.astro => LanderLayout.astro} (69%)
create mode 100644 src/pages/index.astro
delete mode 100644 src/styles/lander.css
create mode 100644 src/styles/pages.css
diff --git a/package.json b/package.json
index 1058301..be358bb 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,10 @@
"astro": "astro"
},
"dependencies": {
- "@astrojs/starlight": "^0.12.0",
+ "@astrojs/starlight": "^0.13.0",
"@interledger/docs-design-system": "^0.1.2",
- "@types/showdown": "^2.0.3",
- "astro": "^3.4.3",
+ "@types/showdown": "^2.0.6",
+ "astro": "^3.6.0",
"node-html-parser": "^6.1.11",
"sharp": "^0.32.6",
"showdown": "^2.1.0"
diff --git a/src/components/lander/AnimatedSummitLogo.astro b/src/components/pages/AnimatedSummitLogo.astro
similarity index 100%
rename from src/components/lander/AnimatedSummitLogo.astro
rename to src/components/pages/AnimatedSummitLogo.astro
diff --git a/src/components/lander/Footer.astro b/src/components/pages/Footer.astro
similarity index 100%
rename from src/components/lander/Footer.astro
rename to src/components/pages/Footer.astro
diff --git a/src/components/pages/FoundationFooter.astro b/src/components/pages/FoundationFooter.astro
new file mode 100644
index 0000000..bb75ed3
--- /dev/null
+++ b/src/components/pages/FoundationFooter.astro
@@ -0,0 +1,107 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+
+
diff --git a/src/components/pages/FoundationHeader.astro b/src/components/pages/FoundationHeader.astro
new file mode 100644
index 0000000..3fb1784
--- /dev/null
+++ b/src/components/pages/FoundationHeader.astro
@@ -0,0 +1,38 @@
+---
+import FoundationLogo from "../FoundationLogo.astro";
+---
+
+
+
diff --git a/src/components/lander/TopBanner.astro b/src/components/pages/LanderHeader.astro
similarity index 93%
rename from src/components/lander/TopBanner.astro
rename to src/components/pages/LanderHeader.astro
index 069ada3..0277db7 100644
--- a/src/components/lander/TopBanner.astro
+++ b/src/components/pages/LanderHeader.astro
@@ -15,8 +15,7 @@ import FoundationLogo from "../FoundationLogo.astro";
diff --git a/src/layouts/Layout.astro b/src/layouts/LanderLayout.astro
similarity index 69%
rename from src/layouts/Layout.astro
rename to src/layouts/LanderLayout.astro
index 6c8d42d..f759c60 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/LanderLayout.astro
@@ -1,7 +1,7 @@
---
-import TopBanner from '../components/lander/TopBanner.astro';
-import Footer from '../components/lander/Footer.astro';
-import '../styles/lander.css';
+import LanderHeader from '../components/pages/LanderHeader.astro';
+import Footer from '../components/pages/Footer.astro';
+import '../styles/pages.css';
interface Props {
title: string;
@@ -13,19 +13,19 @@ const { title, description, gradient = "option1" } = Astro.props;
---
-
+
- {title ? `${title} | Interledger` : 'Interledger'}
+ {title ? `${title} | Interledger Foundation` : 'Interledger Foundation'}
-
+
@@ -52,49 +52,41 @@ const { title, description, gradient = "option1" } = Astro.props;
main {
flex: 1;
- font-size: var(--step-1);
+ font-size: var(--step-0);
}
section {
width: 100%;
- padding-top: var(--space-l);
- padding-bottom: var(--space-l);
+ padding-top: var(--space-m);
+ padding-bottom: var(--space-m);
}
.content-wrapper {
- max-width: var(--max-container-width);
+ max-width: var(--max-content-width);
min-width: 360px;
margin: auto;
- padding-left: var(--space-s);
- padding-right: var(--space-s);
+ padding-left: var(--space-m);
+ padding-right: var(--space-m);
}
.heading--1,
h1 {
- font-size: var(--step-5);
- color: var(--color-primary);
+ font-size: var(--step-4);
}
.heading--2,
h2 {
- font-size: var(--step-3);
- color: var(--color-primary);
+ font-size: var(--step-2);
}
.heading--3,
h3 {
- font-size: var(--step-2);
- color: var(--color-primary);
+ font-size: var(--step-1);
}
.heading--4,
h4 {
- font-size: var(--step-1);
- color: var(--color-primary);
- }
-
- strong {
- color: var(--color-primary);
+ font-size: var(--step-0);
}
a {
diff --git a/src/pages/hackathon-2023.astro b/src/pages/hackathon-2023.astro
index 3287502..e026393 100644
--- a/src/pages/hackathon-2023.astro
+++ b/src/pages/hackathon-2023.astro
@@ -1,10 +1,10 @@
---
-import Layout from '../layouts/Layout.astro';
-import Section from '../components/lander/Section.astro';
-import AnimatedSummitLogo from '../components/lander/AnimatedSummitLogo.astro';
+import LanderLayout from '../layouts/LanderLayout.astro';
+import Section from '../components/pages/Section.astro';
+import AnimatedSummitLogo from '../components/pages/AnimatedSummitLogo.astro';
---
-
+
-
+
diff --git a/src/styles/interledger.css b/src/styles/interledger.css
index f0255b4..0c4bc70 100644
--- a/src/styles/interledger.css
+++ b/src/styles/interledger.css
@@ -50,26 +50,6 @@
--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: "";
-}
-
-[data-theme="light"] body::before {
- filter: blur(150px) opacity(0.25);
-}
-
/* Site header overrides */
header.header {
background-color: var(--sl-color-black);
@@ -80,11 +60,6 @@ header.header {
fill: white;
}
-/* Landing page card styles */
-.card-grid > div {
- background-color: var(--sl-color-black);
-}
-
/* Github pulled spec content */
.content h1 {
display: none;
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..929f41b
--- /dev/null
+++ b/src/styles/pages.css
@@ -0,0 +1,93 @@
+@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;
+ --box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
+ 0px 2px 2px hsla(0, 0%, 0%, 0.06);
+
+ --color-primary-fallback: #6d00cc;
+ --color-primary: oklch(45.77% 0.248 297.11);
+ --color-white: #fff;
+ --color-black: #000;
+ --max-content-width: 1160px;
+ --filter-primary: invert(18%) sepia(97%) saturate(3558%) hue-rotate(269deg)
+ brightness(73%) contrast(131%);
+
+ --color-bg: var(--color-white);
+ --color-text: var(--color-black);
+}
+
+[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;
+}
From 6645c5bca26fb462efe2da5717346e25d16a124b Mon Sep 17 00:00:00 2001
From: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:20:57 +0800
Subject: [PATCH 2/7] Update design and site navigation
---
package.json | 8 +-
public/img/devs.svg | 1 +
src/components/pages/FoundationFooter.astro | 26 +-
src/components/pages/FoundationHeader.astro | 433 +++++++++++++++++++-
src/layouts/HomeLayout.astro | 14 +-
src/layouts/LanderLayout.astro | 6 +-
src/pages/index.astro | 69 +++-
src/styles/interledger.css | 18 +-
src/styles/pages.css | 20 +-
9 files changed, 514 insertions(+), 81 deletions(-)
create mode 100644 public/img/devs.svg
diff --git a/package.json b/package.json
index be358bb..7437d62 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,12 @@
"astro": "astro"
},
"dependencies": {
- "@astrojs/starlight": "^0.13.0",
- "@interledger/docs-design-system": "^0.1.2",
+ "@astrojs/starlight": "^0.15.0",
+ "@interledger/docs-design-system": "^0.2.1",
"@types/showdown": "^2.0.6",
- "astro": "^3.6.0",
+ "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/pages/FoundationFooter.astro b/src/components/pages/FoundationFooter.astro
index bb75ed3..a661cb8 100644
--- a/src/components/pages/FoundationFooter.astro
+++ b/src/components/pages/FoundationFooter.astro
@@ -4,37 +4,37 @@ const currentYear = new Date().getFullYear();