diff --git a/site/README.md b/site/README.md index 0c6c2c27b..3791e1e35 100644 --- a/site/README.md +++ b/site/README.md @@ -5,13 +5,13 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati ### Installation ``` -$ yarn +npm install ``` ### Local Development ``` -$ yarn start +npm start ``` This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. @@ -19,23 +19,7 @@ This command starts a local development server and opens up a browser window. Mo ### Build ``` -$ yarn build +npm run build ``` This command generates static content into the `build` directory and can be served using any static contents hosting service. - -### Deployment - -Using SSH: - -``` -$ USE_SSH=true yarn deploy -``` - -Not using SSH: - -``` -$ GIT_USER= yarn deploy -``` - -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts index c56829240..0d5580d36 100644 --- a/site/docusaurus.config.ts +++ b/site/docusaurus.config.ts @@ -3,230 +3,240 @@ import type { Config } from "@docusaurus/types"; import { themes as prismThemes } from "prism-react-renderer"; const config: Config = { - title: "Ouroboros Leios", - tagline: "A high-throughput protocol for Cardano", - favicon: "img/wave-logo.ico", + title: "Ouroboros Leios", + tagline: "A high-throughput protocol for Cardano", + favicon: "img/favicon.ico", - // Set the production url of your site here - url: "https://leios.cardano-scaling.org/", - // Set the // pathname under which your site is served - // For GitHub pages deployment, it is often '//' - baseUrl: "/", + // Set the production url of your site here + url: "https://leios.cardano-scaling.org/", + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: "/", - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. - organizationName: "input-output-hk", // Usually your GitHub org/user name. - projectName: "ouroboros-leios", // Usually your repo name. + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + organizationName: "input-output-hk", // Usually your GitHub org/user name. + projectName: "ouroboros-leios", // Usually your repo name. - onBrokenLinks: "throw", - onBrokenMarkdownLinks: "warn", + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", - // Even if you don't use internationalization, you can use this field to set - // useful metadata like html lang. For example, if your site is Chinese, you - // may want to replace "en" with "zh-Hans". - i18n: { - defaultLocale: "en", - locales: ["en"], - }, + // Even if you don't use internationalization, you can use this field to set + // useful metadata like html lang. For example, if your site is Chinese, you + // may want to replace "en" with "zh-Hans". + i18n: { + defaultLocale: "en", + locales: ["en"], + }, - scripts: [ - { - src: "https://plausible.io/js/script.js", - defer: true, - "data-domain": "leios.cardano-scaling.org", - }, - ], + scripts: [ + { + src: "https://plausible.io/js/script.js", + defer: true, + "data-domain": "leios.cardano-scaling.org", + }, + ], - // Configure static file serving - staticDirectories: ["static", "public"], + // Configure static file serving + staticDirectories: ["static", "public"], - // Configure plugins - plugins: [], + // Configure plugins + plugins: [], - presets: [ - [ - "classic", - { - docs: { - sidebarPath: "./sidebars.ts", - }, - blog: { - path: "news/", - routeBasePath: "news", - blogTitle: "News", - blogSidebarTitle: "Weekly updates", - sortPosts: "descending", - showReadingTime: true, - authorsMapPath: "../authors.yaml", - }, - theme: { - customCss: "./src/css/custom.css", - }, - } satisfies Preset.Options, - ], + presets: [ + [ + "classic", + { + docs: { + sidebarPath: "./sidebars.ts", + }, + blog: { + path: "news/", + routeBasePath: "news", + blogTitle: "News", + blogSidebarTitle: "Weekly updates", + sortPosts: "descending", + showReadingTime: true, + authorsMapPath: "../authors.yaml", + }, + theme: { + customCss: "./src/css/custom.css", + }, + } satisfies Preset.Options, ], + ], - themeConfig: { - metadata: [{ - name: "description", - content: - "Ouroboros Leios is a high-throughput protocol designed to scale Cardano by optimizing transaction processing and network resource utilization.", - }], - image: "img/social-preview.jpg", - navbar: { - title: "Leios", - logo: { - alt: "Leios Logo", - src: "img/wave-logo.svg", - }, - items: [ - { - type: "docSidebar", - sidebarId: "documentationSidebar", - position: "left", - label: "Documentation", - }, - { - type: "docSidebar", - sidebarId: "developmentSidebar", - position: "left", - label: "Development", - }, - { - to: "/formal-spec/", - label: "Formal Specification", - position: "left", - }, - { to: "/docs/roadmap", label: "Roadmap", position: "right" }, - { to: "/news", label: "Weekly updates", position: "right" }, - { - type: "dropdown", - label: "Tools", - position: "right", - items: [ - { - href: - "https://www.insightmaker.com/insight/4DU4kmFVCFDaq30ux29PCe/Cardano-Throughput-v0-3", - label: "Simulator", - }, - { - to: "https://leios.cardano-scaling.org/cost-estimator/", - label: "Cost Estimator", - }, - { - to: "/traffic-estimator", - label: "Traffic Estimator", - }, - { - to: "https://leios.cardano-scaling.org/visualizer", - label: "Visualizer", - }, - ], - }, - { - href: - "https://github.com/cardano-scaling/CIPs/blob/leios/CIP-0164/README.md", - label: "CIP", - position: "right", - }, - { - href: - "https://github.com/cardano-foundation/CIPs/blob/master/CPS-0018/README.md", - label: "CPS", - position: "right", - }, - { - href: "https://github.com/input-output-hk/ouroboros-leios", - label: "GitHub", - position: "right", - }, - ], + themeConfig: { + metadata: [ + { + name: "description", + content: + "Ouroboros Leios is a high-throughput protocol designed to scale Cardano by optimizing transaction processing and network resource utilization.", + }, + ], + image: "img/social-preview.jpg", + navbar: { + logo: { + alt: "Leios Logo", + src: "img/logo.svg", + srcDark: "img/logo-dark.svg", + }, + items: [ + { + type: "docSidebar", + sidebarId: "documentationSidebar", + position: "right", + label: "Documentation", + }, + { + type: "docSidebar", + sidebarId: "developmentSidebar", + position: "right", + label: "Development", + }, + { + to: "/formal-spec/", + label: "Formal Specification", + position: "right", + }, + { to: "/docs/roadmap", label: "Roadmap", position: "right" }, + { to: "/news", label: "Weekly updates", position: "right" }, + { + type: "dropdown", + label: "Tools", + position: "right", + items: [ + { + href: "https://www.insightmaker.com/insight/4DU4kmFVCFDaq30ux29PCe/Cardano-Throughput-v0-3", + label: "Simulator", + }, + { + to: "https://leios.cardano-scaling.org/cost-estimator/", + label: "Cost Estimator", + }, + { + to: "/traffic-estimator", + label: "Traffic Estimator", + }, + { + to: "https://leios.cardano-scaling.org/visualizer", + label: "Visualizer", + }, + ], }, - footer: { - links: [ - { - title: "Docs", - items: [ - { - label: "Formal Specification", - to: "/formal-spec/", - }, - { - label: "Resources", - to: "/docs/resources", - }, - { - label: "FAQs", - to: "/docs/faq", - }, - { - label: "Glossary", - to: "/docs/glossary", - }, - ], - }, - { - title: "Community", - items: [ - { - label: "Monthly review meetings", - to: "/docs/development/monthly-reviews", - }, - { - label: "GitHub Discussions", - href: - "https://github.com/input-output-hk/ouroboros-leios/discussions", - }, - ], - }, - { - title: "Legal", - items: [ - { - label: "Terms & Conditions", - to: "https://static.iohk.io/terms/iohktermsandconditions.pdf", - }, - { - label: "Privacy Policy", - to: "https://static.iohk.io/terms/iog-privacy-policy.pdf", - }, - { - label: "Contributors", - to: "https://github.com/input-output-hk/ouroboros-leios/graphs/contributors", - }, - ], - }, - { - title: "More resources", - items: [ - { - label: "IOHK research library", - to: "https://iohk.io/en/research/library/", - }, - { - label: "Essential Cardano", - to: "https://www.essentialcardano.io/", - }, - { - label: "Cardano Docs", - to: "https://docs.cardano.org/", - }, - ], - }, - ], - copyright: `Copyright © ${ - new Date().getFullYear() - } Input Output Global
Privacy Policy | Terms & Conditions
Built with Docusaurus`, + { + href: "https://github.com/cardano-scaling/CIPs/blob/leios/CIP-0164/README.md", + label: "CIP", + position: "right", }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, + { + href: "https://github.com/cardano-foundation/CIPs/blob/master/CPS-0018/README.md", + label: "CPS", + position: "right", }, - socials: { - github: "https://github.com/input-output-hk/ouroboros-leios", - discord: "https://discord.gg/83aXYxy9", + { + href: "https://github.com/input-output-hk/ouroboros-leios", + html: ` + + + + + + + + + `, + position: "right", }, - } satisfies Preset.ThemeConfig, + ], + }, + footer: { + logo: { + alt: "Leios Logo", + src: "img/logo-footer.svg", + srcDark: "img/logo-footer.svg", + }, + links: [ + { + title: "Docs", + items: [ + { + label: "Formal Specification", + to: "/formal-spec/", + }, + { + label: "Resources", + to: "/docs/resources", + }, + { + label: "FAQs", + to: "/docs/faq", + }, + { + label: "Glossary", + to: "/docs/glossary", + }, + ], + }, + { + title: "Community", + items: [ + { + label: "Monthly review meetings", + to: "/docs/development/monthly-reviews", + }, + { + label: "GitHub Discussions", + href: "https://github.com/input-output-hk/ouroboros-leios/discussions", + }, + ], + }, + { + title: "Legal", + items: [ + { + label: "Terms & Conditions", + to: "https://static.iohk.io/terms/iohktermsandconditions.pdf", + }, + { + label: "Privacy Policy", + to: "https://static.iohk.io/terms/iog-privacy-policy.pdf", + }, + { + label: "Contributors", + to: "https://github.com/input-output-hk/ouroboros-leios/graphs/contributors", + }, + ], + }, + { + title: "More resources", + items: [ + { + label: "IOHK research library", + to: "https://iohk.io/en/research/library/", + }, + { + label: "Essential Cardano", + to: "https://www.essentialcardano.io/", + }, + { + label: "Cardano Docs", + to: "https://docs.cardano.org/", + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} Input Output Global Privacy Policy Terms & Conditions Built with Docusaurus`, + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + }, + socials: { + github: "https://github.com/input-output-hk/ouroboros-leios", + discord: "https://discord.gg/83aXYxy9", + }, + } satisfies Preset.ThemeConfig, }; export default config; diff --git a/site/package.json b/site/package.json index ef951bbc2..245614785 100644 --- a/site/package.json +++ b/site/package.json @@ -14,6 +14,7 @@ "write-heading-ids": "docusaurus write-heading-ids", "typecheck": "tsc" }, + "packageManager": "npm", "dependencies": { "@docusaurus/core": "3.4.0", "@docusaurus/preset-classic": "3.4.0", @@ -31,11 +32,7 @@ "typescript": "~5.2.2" }, "browserslist": { - "production": [ - ">0.5%", - "not dead", - "not op_mini all" - ], + "production": [">0.5%", "not dead", "not op_mini all"], "development": [ "last 3 chrome version", "last 3 firefox version", diff --git a/site/src/components/HomepageFeatures/index.tsx b/site/src/components/HomepageFeatures/index.tsx index 9d8e2f9f8..51116d45a 100644 --- a/site/src/components/HomepageFeatures/index.tsx +++ b/site/src/components/HomepageFeatures/index.tsx @@ -1,70 +1,75 @@ -import Heading from "@theme/Heading"; -import clsx from "clsx"; +import { LinkButton } from "../LinkButton/LinkButton"; import styles from "./styles.module.css"; +import ScaleSvg from "@site/static/img/scale.svg"; +import SecureSvg from "@site/static/img/secure.svg"; +import FlexibleSvg from "@site/static/img/flexible.svg"; type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: React.ReactElement; + title: string; + Svg: string; + description: React.ReactElement; + button: { + text: string; + url: string; + }; }; const FeatureList: FeatureItem[] = [ - { - title: "Scalable", - Svg: require("@site/static/img/cargo-ship.svg").default, - description: ( - <> - Optimizes network bandwidth for faster transaction processing, - significantly enhancing Cardano’s scalability. Transactions are - confirmed with minimal delays for a seamless user experience. - - ), - }, - { - title: "Secure", - Svg: require("@site/static/img/safe.svg").default, - description: ( - <> - Preserves Ouroboros' strong security properties with robust - defenses against attacks while ensuring fair participation. - - ), - }, - { - title: "Flexible", - Svg: require("@site/static/img/socket-chord.svg").default, - description: ( - <> - Ouroboros Leios supports diverse applications. - - ), - }, + { + title: "Scalable", + Svg: ScaleSvg, + description: ( + <> + Optimizes network bandwidth for faster transaction processing, + significantly enhancing Cardano’s scalability. Transactions are + confirmed with minimal delays for a seamless user experience. + + ), + }, + { + title: "Secure", + Svg: SecureSvg, + description: ( + <> + Preserves Ouroboros' strong security properties with robust defenses + against attacks while ensuring fair participation. + + ), + }, + { + title: "Flexible", + Svg: FlexibleSvg, + description: <>Ouroboros Leios supports diverse applications., + }, ]; -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
+function Feature({ Svg, title, description, button }: FeatureItem) { + return ( +
+
+ +
+

{title}

+

{description}

- ); +
+ {button ? : null} +
+ ); } export default function HomepageFeatures(): React.ReactElement { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); + return ( +
+
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+
+ ); } diff --git a/site/src/components/HomepageFeatures/styles.module.css b/site/src/components/HomepageFeatures/styles.module.css index b248eb2e5..10205d65b 100644 --- a/site/src/components/HomepageFeatures/styles.module.css +++ b/site/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,38 @@ .features { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 2.5rem; +} + +.feature { display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + flex-direction: column; + justify-content: space-between; + height: 100%; + max-width: 20.375rem; +} + +.feature h2 { + margin-bottom: 1.8125rem; +} + +.featureContent { + display: flex; + flex-direction: column; + gap: 1.8125rem; +} + +.featureImg { + object-fit: contain; } -.featureSvg { - height: 200px; - width: 200px; +@media (max-width: 997px) { + .features { + display: flex; + flex-direction: column; + gap: 5.375rem; + } + .feature { + max-width: 100%; + } } diff --git a/site/src/components/LinkButton/LinkButton.tsx b/site/src/components/LinkButton/LinkButton.tsx new file mode 100644 index 000000000..9cee9203b --- /dev/null +++ b/site/src/components/LinkButton/LinkButton.tsx @@ -0,0 +1,21 @@ +import { ArrowRightIcon, FileIcon } from "../icons"; +import styles from "./styles.module.css"; + +type LinkButton = { + text: string; + url: string; + target?: string; + rel?: string; +}; + +export function LinkButton({ text, url, target, rel }: LinkButton) { + return ( + + + + {text} + + + + ); +} diff --git a/site/src/components/LinkButton/styles.module.css b/site/src/components/LinkButton/styles.module.css new file mode 100644 index 000000000..acd767141 --- /dev/null +++ b/site/src/components/LinkButton/styles.module.css @@ -0,0 +1,25 @@ +.linkButton { + display: flex; + height: 3.75rem; + padding: 1.5rem; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + border-radius: 0.25rem; + border: 1px solid var(--ifm-color-primary); + text-decoration: none; + color: var(--ifm-color-primar); +} + +.linkButton:hover { + border: 1px solid rgba(255, 255, 255, 0.25); + background: var(--link-button-background-hover); + color: #fff; + text-decoration: none; +} + +.linkButton span { + display: flex; + gap: 0.75rem; + align-items: center; +} diff --git a/site/src/components/icons/ArrowRightIcon.tsx b/site/src/components/icons/ArrowRightIcon.tsx new file mode 100644 index 000000000..d17ccb81f --- /dev/null +++ b/site/src/components/icons/ArrowRightIcon.tsx @@ -0,0 +1,28 @@ +import type { SVGProps } from "react"; + +import { forwardRef, memo, Ref } from "react"; +const ArrowRightIcon = ( + props: SVGProps, + ref: Ref, +) => ( + + + +); +const ForwardRef = forwardRef(ArrowRightIcon); +const Memo = memo(ForwardRef); +export default Memo; diff --git a/site/src/components/icons/FileIcon.tsx b/site/src/components/icons/FileIcon.tsx new file mode 100644 index 000000000..902ef10e1 --- /dev/null +++ b/site/src/components/icons/FileIcon.tsx @@ -0,0 +1,24 @@ +import type { SVGProps } from "react"; + +import { forwardRef, memo, Ref } from "react"; +const FileIcon = (props: SVGProps, ref: Ref) => ( + + + +); +const ForwardRef = forwardRef(FileIcon); +const Memo = memo(ForwardRef); +export default Memo; diff --git a/site/src/components/icons/index.ts b/site/src/components/icons/index.ts new file mode 100644 index 000000000..d0dfec4e9 --- /dev/null +++ b/site/src/components/icons/index.ts @@ -0,0 +1,2 @@ +export { default as ArrowRightIcon } from "./ArrowRightIcon"; +export { default as FileIcon } from "./FileIcon"; diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 323f3eb9a..e26c5311c 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -4,47 +4,312 @@ * work well for content-centric websites. */ - /*@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&display=swap"); +/*@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&display=swap"); */ /* You can override the default Infima variables here. */ + +@import "./typography.css"; + :root { - /* --ifm-font-family-base: "Quicksand", sans-serif; */ + --ifm-font-family-base: var(--font-base); + + --ifm-background-color: #f8f6fa; + --ifm-navbar-background-color: #f1edf5; - --ifm-background-color: #f1f6f8; + --ifm-font-color-base: #180425; + --ifm-font-color-alternate: #000; + --ifm-background-color-primary: #f8f6fa; + --ifm-background-color-secondary: #f1edf5; + --ifm-color-caption: #73489a; + --ifm-link-color: #73489a; + --ifm-menu-color: #73489a; + --ifm-toc-link-color: #73489a; + --link-button-background-hover: #73489a; - --ifm-color-primary: #326C85; - --ifm-color-primary-dark: #29586C; + --ifm-navbar-height: 6.063rem; + + --ifm-color-primary: #180425; + --ifm-color-primary-dark: #29586c; --ifm-color-primary-darker: #275468; --ifm-color-primary-darkest: #224859; - --ifm-color-primary-light: #97C3D8; - --ifm-color-primary-lighter: #A6CCDD; - --ifm-color-primary-lightest: #B5D4E3; + --ifm-color-primary-light: #97c3d8; + --ifm-color-primary-lighter: #a6ccdd; + --ifm-color-primary-lightest: #b5d4e3; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - --ifm-footer-background-color: #29586C; - --ifm-footer-title-color: #fff; - --ifm-footer-link-color: #ffffffaa; - --ifm-footer-color: #ffffffaa; + --ifm-footer-background-color: #180425; + --ifm-footer-title-color: #f8f6fa; + --ifm-footer-link-color: #f8f6fa; + --ifm-footer-color: #f8f6fa; --ifm-footer-link-hover-color: #ffffffdd; + + --ifm-navbar-padding-vertical: 0; + --ifm-navbar-item-padding-vertical: 0; + --ifm-navbar-item-padding-horizontal: 0; + --ifm-spacing-horizontal: 0; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #6BA8C7; - --ifm-color-primary-dark: #5CA0C1; - --ifm-color-primary-darker: #4E97BC; +[data-theme="dark"] { + --ifm-navbar-background-color: #333; + --ifm-background-color-primary: #1a1a1a; + --ifm-background-color-secondary: #333; + + --ifm-link-color: #b1e0fe; + --ifm-color-caption: #b1e0fe; + --ifm-link-color: #b1e0fe; + --ifm-menu-color: #b1e0fe; + --ifm-toc-link-color: #b1e0fe; + + --link-button-background-hover: rgba(255, 255, 255, 0.15); + + --ifm-footer-link-hover-color: #000000dd; + + --ifm-font-color-base: #f8f6fa; + --ifm-font-color-alternate: #fff; + --ifm-color-primary: #f8f6fa; + --ifm-color-primary-dark: #5ca0c1; + --ifm-color-primary-darker: #4e97bc; --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-lighter:#438DB1; - --ifm-color-primary-lighter: #A6CCDD; - --ifm-color-primary-lightest: #B5D4E3; + --ifm-color-primary-lighter: #438db1; + --ifm-color-primary-lighter: #a6ccdd; + --ifm-color-primary-lightest: #b5d4e3; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } +@media (max-width: 997px) { + :root { + --ifm-navbar-height: 3.75rem; + } +} + /* Hide external link icons in navbar */ .navbar .navbar__items a.navbar__item svg[class*="iconExternalLink"], .navbar .dropdown__menu a.dropdown__link svg[class*="iconExternalLink"] { display: none; } + +.container { + max-width: 1440px; + margin-left: auto; + margin-right: auto; +} + +.container-padding { + width: 100%; + padding-left: 80px; + padding-right: 80px; +} + +.padding-section { + padding-top: 6rem; + padding-bottom: 6rem; +} + +@media (max-width: 997px) { + .container-padding { + padding-left: 24px; + padding-right: 24px; + } + + .padding-section { + padding-top: 4.5rem; + padding-bottom: 4.5rem; + } +} + +.navbar, +.navbar__inner, +.navbar__items, +.navbar__items--right { + padding: 0 !important; + margin: 0 !important; +} + +.navbar { + display: flex; + align-items: center; +} + +.navbar__inner { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + flex-wrap: nowrap; +} + +.navbar__non_homepage { + display: flex; + justify-content: space-between; + width: 100%; + padding: 0.5rem 1rem; +} + +.navbar__brand { + width: fit-content; + min-width: 81px; + max-width: 132px; +} + +.navbar__items--right { + margin-left: auto; + display: flex; + align-items: center; + gap: 0.5rem; + max-width: 978px; + width: 100%; + flex-shrink: 1; + justify-content: space-between; +} + +.navbar_item_menu { + display: contents; +} + +@media (max-width: 997px) { + .navbar_item_menu { + display: none; + } + .navbar__items--right { + justify-content: flex-end; + } +} + +.navbar__link { + font-size: var(--text-sm); + font-weight: var(--font-weight-bold); + display: flex; + align-items: center; + text-decoration: none; +} + +.navbar-sidebar__brand { + padding-left: 20px; + padding-right: 20px; +} + +@media (max-width: 1100px) { + .navbar__link { + font-size: var(--text-xs); + } +} + +.footer { + padding: 3.5rem 0; +} + +.footer a { + text-decoration: none; + font-size: var(--text-sm); + line-height: var(--line-height-sm); +} + +.footer__link-item { + color: inherit; +} + +.footer__title { + margin-bottom: 1.25rem; +} + +.footer__items { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.footer__bottom { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-top: 1rem; + border-top: 1px solid #8b8190; + margin-top: 4.25rem; +} + +.footer__logo { + margin: 0; +} + +.footer__copyright { + font-size: var(--text-sm); + line-height: var(--line-height-sm); + color: #8b8190; +} + +.hero { + padding: 0; + background: linear-gradient(0deg, #200830 0%, rgba(32, 8, 48, 0) 39.98%), + url("/static/img/homepage-background.png"), #200830; + + background-size: cover, cover, auto; + background-repeat: no-repeat, no-repeat, no-repeat; +} + +@media (max-width: 768px) { + .hero { + background: linear-gradient(0deg, #200830 0%, rgba(32, 8, 48, 0) 39.98%), + url("/static/img/homepage-background-mobile.png"), #200830; + + background-size: cover, cover, auto; + background-repeat: no-repeat, no-repeat, no-repeat; + } +} + +.homepage-section-primary { + background-color: var(--ifm-background-color-primary); +} + +.homepage-section-secondary { + background-color: var(--ifm-background-color-secondary); +} + +a { + text-decoration: underline; +} + +.col { + padding: var(--ifm-global-spacing); +} + +.footer__col { + padding: 0; +} + +.pagination-nav { + grid-gap: 1rem; +} + +.theme-admonition { + padding: 1rem; +} + +blockquote { + padding: 0 1rem; +} + +.menu__link, +.table-of-contents__link, +.pagination-nav__link { + text-decoration: none; +} + +@media (max-width: 996px) { + .footer__col { + margin-bottom: 6.25rem; + } + .footer__bottom { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.375rem; + padding-top: 0; + border-top: 0; + margin-top: -1.25rem; + } +} diff --git a/site/src/css/typography.css b/site/src/css/typography.css new file mode 100644 index 000000000..82c35803f --- /dev/null +++ b/site/src/css/typography.css @@ -0,0 +1,117 @@ +/* Poppins font family */ +@font-face { + font-family: "Poppins"; + src: url("/fonts/Poppins/Poppins-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Poppins"; + src: url("/fonts/Poppins/Poppins-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Poppins"; + src: url("/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Poppins"; + src: url("/fonts/Poppins/Poppins-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Poppins"; + src: url("/fonts/Poppins/Poppins-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; +} + +/* Lexend font family */ +@font-face { + font-family: "Lexend"; + src: url("/fonts/Lexend/Lexend-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Lexend"; + src: url("/fonts/Lexend/Lexend-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Lexend"; + src: url("/fonts/Lexend/Lexend-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Lexend"; + src: url("/fonts/Lexend/Lexend-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +:root { + --font-base: "Poppins", sans-serif; + --font-lexend: "Lexend", sans-serif; + + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2rem; + --text-5xl: 2.875rem; + --text-6xl: 4.5rem; + + --line-height-lg: 1.71; + --line-height-sm: 1.25; + --line-height-xs: 1.1; + --line-height-normal: 1.5; +} + +h1 { + font-size: var(--text-6xl); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-xs); +} + +h2 { + font-size: var(--text-4xl); + font-weight: var(--font-weight-regular); + letter-spacing: -0.02rem; + line-height: var(--line-height-sm); +} + +@media (max-width: 997px) { + h1 { + font-size: var(--text-5xl); + } + + h2 { + font-size: var(--text-4xl); + font-weight: var(--font-weight-regular); + letter-spacing: -0.02rem; + line-height: var(--line-height-sm); + } +} diff --git a/site/src/pages/HowLeiosWorksGraphic.tsx b/site/src/pages/HowLeiosWorksGraphic.tsx new file mode 100644 index 000000000..0a1e1465f --- /dev/null +++ b/site/src/pages/HowLeiosWorksGraphic.tsx @@ -0,0 +1,967 @@ +import Link from "@docusaurus/Link"; +import styles from "./index.module.css"; + +export default function HowLeiosWorksGraphic() { + return ( + <> + + + + + + + + + + + + + + + + + {/* Slot Grid */} + + + + + + + + + + {/* Minor grid lines */} + + + + + + + + + + + + + + + + + + + + + + + + {/* Timeline */} + + + Time (slots) → + + + {/* RB Block */} + + + + RB + + + [Txs] + + + + {/* EB Block */} + + + + EB + + + [TxRefs] + + + + {/* RB' Block */} + + + + RB' + + + + {/* Certificate */} + + + + + + C + + + EB + + + + + + {/* Arrows and connections */} + + + announces + + + {/* Parameter brackets */} + + + + + 3 + + + L + + + hdr + + + + + + + + + L + + + vote + + + + + + + + + L + + + diff + + + + + {/* Votes */} + + + + + + + + + + + + + + + + + {/* Delta network characteristics */} + + + + + + + Δ + + RB + + + W + + + + + + + + + + + + Δ + + applyTxs + + + W + + + + + + + + + + + + Δ + + EB + + + O + + + + + + + + + + + + Δ + + EB + + + W + + + + + + + + + + Δ + + reapply + + + W + + + + + + {/* Certificate back arrow */} + + + {/* Additional arrows */} + + + + + {/* Legend */} + + + + Legend + + + {/* Certificate shape */} + + + + + Certificate + + + {/* Vote shape */} + + + + + Vote + + + + Superscripts + + + O = Optimistic + + + W = Worst-case + + + +
+ Protocol timing showing the sequential process from RB announcement + through EB validation to certificate inclusion. Key parameters:{" "} + + + L + + hdr + {" "} + ( + + header diffusion + + ),{" "} + + + L + + vote + {" "} + ( + + voting period + + ),{" "} + + + L + + diff + {" "} + ( + + diffusion period + + ). +
+ + ); +} diff --git a/site/src/pages/ResearchGraphic.tsx b/site/src/pages/ResearchGraphic.tsx new file mode 100644 index 000000000..a3447a4c4 --- /dev/null +++ b/site/src/pages/ResearchGraphic.tsx @@ -0,0 +1,344 @@ +import styles from "./index.module.css"; + +export default function ResearchGraphic() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Throughput + + + (KiloBytes per Second) + + + Inclusion Latency + + + (Seconds) + + + Ecosystem Impact + + + (Adaptation Cost) + + + Time to Market + + + (Years) + + + 1,000+ TxkB/s + + + 100 TxkB/s + + + 10 TxkB/s + + + 1 TxkB/s + + + 300s+ + + + 180s + + + 90s + + + 45s + + + Very High + + + High + + + Medium + + + Low + + + 3+ yr + + + 2 yr + + + 1 yr + + + + + + Ouroboros Praos + + + + Proposed Leios + + + + Research Paper Leios + + + + ); +} diff --git a/site/src/pages/formal-spec/index.tsx b/site/src/pages/formal-spec/index.tsx index 9c8379179..cdb321c20 100644 --- a/site/src/pages/formal-spec/index.tsx +++ b/site/src/pages/formal-spec/index.tsx @@ -39,31 +39,33 @@ export default function FormalSpecPage(): React.ReactElement { description="Ouroboros Leios formal specification" >
-
-

Ouroboros Leios formal specification

-

- This section contains the formal specification of the Ouroboros - Leios protocol, written in Agda. The specification provides a - mathematical foundation for the protocol's properties and - guarantees. -

+
+
+

Ouroboros Leios formal specification

+

+ This section contains the formal specification of the Ouroboros + Leios protocol, written in Agda. The specification provides a + mathematical foundation for the protocol's properties and + guarantees. +

-

Modules

-
- {AGDA_MODULES.map((module) => ( - -
{module.name}
-
- {module.description} -
- - ))} +

Modules

+
+ {AGDA_MODULES.map((module) => ( + +
{module.name}
+
+ {module.description} +
+ + ))} +
diff --git a/site/src/pages/formal-spec/styles.module.css b/site/src/pages/formal-spec/styles.module.css index 228c45e7f..4f1c0be5b 100644 --- a/site/src/pages/formal-spec/styles.module.css +++ b/site/src/pages/formal-spec/styles.module.css @@ -3,12 +3,6 @@ background-color: var(--ifm-background-color); } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; -} - .fileGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); @@ -50,4 +44,4 @@ font-size: 0.9rem; color: var(--ifm-color-emphasis-700); line-height: 1.4; -} \ No newline at end of file +} diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css index 3a520b305..92d7ad18f 100644 --- a/site/src/pages/index.module.css +++ b/site/src/pages/index.module.css @@ -1,287 +1,351 @@ .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; - background-image: url("/static/img/wave-pattern-flipped.svg"), url("/static/img/wave-pattern.svg"); - background-repeat: repeat-x, repeat-x; - background-position: top, bottom; - - background-size: 50px 50px; - + padding-top: 4rem; + padding-bottom: 4rem; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + position: relative; + height: 37.75rem; + color: #fff; } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } +@media (max-width: 997px) { + .heroBanner { + height: 28.125rem; + } } -.buttons { - display: flex; - align-items: center; - justify-content: center; +.heroStandfirst { + font-size: var(--text-2xl); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-sm); } -.videoSection { - padding: 4rem 0; - position: relative; +.heroTitle { + margin-bottom: 2rem !important; } -.videoSection h2 { - font-size: 2.5rem; - margin-bottom: 1rem; +@media (max-width: 997px) { + .heroStandfirst { + font-size: var(--text-xl); + line-height: var(--line-height-normal); + } + .heroTitle { + margin-bottom: 1.8125rem !important; + } } -.videoSection .subtitle { - color: var(--ifm-color-emphasis-700); - font-size: 1.2rem; - max-width: 600px; - margin: 0 auto 2rem; +.buttons { + display: flex; + align-items: center; + justify-content: center; } -.videoWrapper { - position: relative; - padding-bottom: 56.25%; - /* 16:9 aspect ratio */ - height: 0; - overflow: hidden; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +.contentWrapper, +.researchContentWrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 3rem; } -.video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; +.contentWrapper h2, +.researchContentWrapper h2 { + margin-bottom: 0; } -.faqSection { - padding: 4rem 0; - background-color: var(--ifm-color-emphasis-100); +@media (max-width: 997px) { + .contentWrapper { + flex-direction: column; + } } -.faqWrapper { - margin-top: 2rem; +@media (max-width: 997px) { + .researchContentWrapper { + flex-direction: column-reverse; + } } -.faqItem { - margin-bottom: 1rem; - border: 1px solid var(--ifm-color-emphasis-300); - border-radius: 8px; - padding: 1rem; - background-color: var(--ifm-background-color); +.researchContent { + width: 100%; + max-width: 607px; + display: flex; + flex-direction: column; } -.faqQuestion { - cursor: pointer; - font-weight: bold; - list-style: none; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.faqQuestion::-webkit-details-marker { - display: none; +.researchContentinkButton { + max-width: 18.75rem; + margin-top: 1.5rem; } -/* Add chevron and its animation */ -.faqQuestion::after { - content: ''; - width: 24px; - height: 24px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - background-repeat: no-repeat; - transition: transform 0.3s ease; +.howLeiosWorksContentinkButton { + max-width: 19.5rem; + margin-top: 1.5rem; } -/* Rotate chevron when expanded */ -details[open] .faqQuestion::after { - transform: rotate(180deg); +.howLeiosWorksContent { + width: 100%; + max-width: 631px; + display: flex; + flex-direction: column; } -.faqAnswer { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid var(--ifm-color-emphasis-200); - /* Add animation for the answer */ - animation: slideDown 0.3s ease-out; +.stayUpToDateContent { + width: 100%; + max-width: 380px; + display: flex; + flex-direction: column; } -/* Animation keyframes for sliding down */ -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - - to { - opacity: 1; - transform: translateY(0); - } +@media (max-width: 997px) { + .researchContentinkButton { + max-width: 100%; + margin-top: 1.75rem; + } + .howLeiosWorksContentinkButton { + max-width: 100%; + margin-top: 1.75rem; + } + .researchContent { + max-width: 100%; + } + .howLeiosWorksContent { + max-width: 100%; + } + .stayUpToDateContent { + max-width: 100%; + } +} + +.stayUpToDateContent p { + font-size: var(--text-xl); + line-height: var(--line-height-normal); +} + +.reviewMeetingContaner { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + max-width: 39.25rem; + padding: 1.375rem 1.75rem; + gap: 1.5rem; + border: 0.5px solid #8b8190; + background-color: var(--ifm-background-color-primary); +} + +.backgroundGrid { + background-image: url("/static/img/grid-lines.svg"); + background-repeat: no-repeat; + background-size: cover; + position: absolute; + width: 100%; + height: 100%; + inset: 0; + z-index: 0; +} + +.cameraImageContainer { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + max-width: 230px; + background-color: var(--ifm-background-color-secondary); +} + +.cameraImageContainer img { + max-width: 90px; + width: 100%; + height: auto; + object-fit: contain; + display: block; + z-index: 10; +} + +.countdownContainer { + display: flex; + flex-direction: column; + max-width: 230px; + min-width: 230px; + margin-right: 3rem; + z-index: 10; +} + +.countdown { + white-space: pre-line; + font-size: var(--text-2xl); + font-family: var(--font-lexend); + line-height: var(--text-3xl); + color: var(--ifm-font-color-alternate); + text-decoration: none; +} + +.countdownLabel { + color: var(--ifm-font-color-alternate); + margin-top: 1.19rem; + margin-bottom: 1.25rem; +} + +.reviewDate { + color: #fff; + display: flex; + padding: 0.15rem 0.6875rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + background-color: #333; + border-radius: 1rem; +} + +@media (max-width: 997px) { + .reviewMeetingContaner { + flex-direction: column; + max-width: 100%; + } + .countdownContainer { + max-width: 100%; + margin: 0; + height: 10.2rem; + justify-content: center; + text-align: center; + } + .cameraImageContainer { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + max-width: 100%; + height: 12.375rem; + background-color: var(--ifm-background-color-secondary); + } } -.borderTop { - border-top: 1px solid var(--ifm-color-emphasis-300); - margin-top: 2rem; +.subtitle { + font-size: var(--text-xl); + line-height: var(--line-height-normal); + margin: 2.75rem 0; } -.underlineLink { - background: none; - color: var(--ifm-link-color); - text-decoration: underline; - text-underline-offset: 4px; - font-size: 1.1rem; - font-weight: 600; - padding: 0; - border: none; - box-shadow: none; - cursor: pointer; +@media (max-width: 997px) { + .subtitle { + font-size: var(--text-base); + margin: 3rem 0; + } } .leiosSvg { - width: 100%; - height: auto; - max-width: 100%; - display: block; - transition: filter 0.3s ease; - background-color: transparent; - /* Ensure SVG scales properly maintaining aspect ratio */ - object-fit: contain; - max-height: 500px; + width: 100%; + height: auto; + max-width: 100%; + display: block; + transition: filter 0.3s ease; + background-color: transparent; + /* Ensure SVG scales properly maintaining aspect ratio */ + object-fit: contain; + max-height: 500px; } .svgContainer { - /* Container that properly handles SVG aspect ratio */ - overflow: visible; - position: relative; - padding: 1rem; - border-radius: 4px; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; + /* Container that properly handles SVG aspect ratio */ + overflow: visible; + position: relative; + justify-content: center; + border-radius: 4px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; } /* Light theme - specific background color and SVG variables */ -[data-theme='light'] .svgContainer { - background-color: #f1f6f8; - --svg-bg-color: #f1f6f8; - --svg-border-color: #d0d0d0; - --svg-text-color: #333333; - --svg-text-secondary: #666666; - --svg-text-muted: #999999; - --svg-arrow-color: #595959; - --svg-legend-bg: #ffffff; +[data-theme="light"] .svgContainer { + background-color: transparent; + --svg-bg-color: transparent; + --svg-border-color: #d0d0d0; + --svg-text-color: #333333; + --svg-text-secondary: #666666; + --svg-text-muted: #999999; + --svg-arrow-color: #595959; + --svg-legend-bg: #ffffff; } /* Dark theme - specific background color and SVG variables */ -[data-theme='dark'] .svgContainer { - background-color: #1b1b1d; - --svg-bg-color: #1b1b1d; - --svg-border-color: #555555; - --svg-text-color: #e0e0e0; - --svg-text-secondary: #cccccc; - --svg-text-muted: #aaaaaa; - --svg-arrow-color: #bbbbbb; - --svg-legend-bg: #2a2a2c; +[data-theme="dark"] .svgContainer { + background-color: transparent; + --svg-bg-color: transparent; + --svg-border-color: #555555; + --svg-text-color: #e0e0e0; + --svg-text-secondary: #cccccc; + --svg-text-muted: #aaaaaa; + --svg-arrow-color: #bbbbbb; + --svg-legend-bg: #2a2a2c; } /* Remove filters since we're using CSS variables for direct color control */ -[data-theme='light'] .leiosSvg { - filter: none; +[data-theme="light"] .leiosSvg { + filter: none; } -[data-theme='dark'] .leiosSvg { - filter: none; +[data-theme="dark"] .leiosSvg { + filter: none; } /* SVG Hover Effects */ /* Remove default link underlines for all SVG links */ .leiosSvg a { - text-decoration: none; + text-decoration: none; } .leiosSvg a:hover { - text-decoration: none; + text-decoration: none; } .leiosSvg a[href*="ranking-blocks"]:hover rect, .leiosSvg a[href*="endorser-blocks"]:hover rect, .leiosSvg a[href*="votes-and-certificates"]:hover polygon { - stroke-width: 3; - filter: brightness(1.1); + stroke-width: 3; + filter: brightness(1.1); } .leiosSvg a[href*="ranking-blocks"]:hover text, .leiosSvg a[href*="endorser-blocks"]:hover text, .leiosSvg a[href*="votes-and-certificates"]:hover text { - font-weight: bold; + font-weight: bold; } .leiosSvg a[href*="votes-and-certificates"]:hover rect { - transform: scale(2.0); - filter: brightness(1.5) saturate(1.3); - stroke: #ff6b35; - stroke-width: 1; + transform: scale(2); + filter: brightness(1.5) saturate(1.3); + stroke: #ff6b35; + stroke-width: 1; } .leiosSvg a[href*="l-hdr"]:hover path, .leiosSvg a[href*="l-vote"]:hover path, .leiosSvg a[href*="l-diff"]:hover path, .leiosSvg a[href*="delta-"]:hover line { - stroke-width: 4; - filter: brightness(1.1); + stroke-width: 4; + filter: brightness(1.1); } .leiosSvg a[href*="l-hdr"]:hover text, .leiosSvg a[href*="l-vote"]:hover text, .leiosSvg a[href*="l-diff"]:hover text, .leiosSvg a[href*="delta-"]:hover text { - font-weight: bold; + font-weight: bold; } .svgCaption { - margin-top: 0.75rem; - font-size: 0.875rem; - color: var(--ifm-color-emphasis-700); - text-align: center; - font-style: italic; - line-height: 1.4; -} - -.svgCaption a { - color: var(--ifm-link-color); - text-decoration: none; - font-weight: 500; + margin-top: 0.69rem; + color: var(--ifm-color-caption); + text-align: center; + line-height: 1.5; } -.svgCaption a:hover { - text-decoration: underline; +@media (max-width: 997px) { + .svgCaption { + margin-top: 3rem; + } } - -/* Responsive adjustments for SVG sizing */ -@media screen and (max-width: 996px) { - .leiosSvg { - max-height: 400px; - } - - .svgContainer { - padding: 0.75rem; - } -} - -@media screen and (max-width: 768px) { - .leiosSvg { - max-height: 350px; - } - - .svgContainer { - padding: 0.5rem; - } -} \ No newline at end of file diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index a5c904b19..93e4e1752 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -2,1979 +2,349 @@ import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import HomepageFeatures from "@site/src/components/HomepageFeatures"; -import Heading from "@theme/Heading"; import Layout from "@theme/Layout"; import clsx from "clsx"; import React, { useEffect, useState } from "react"; +import { LinkButton } from "../components/LinkButton/LinkButton"; +import HowLeiosWorksGraphic from "./HowLeiosWorksGraphic"; import styles from "./index.module.css"; +import ResearchGraphic from "./ResearchGraphic"; +import VideoCamUrl from "@site/static/img/video-cam.png"; function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - - return ( - <> -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
-
- - ); + const { siteConfig } = useDocusaurusContext(); + + return ( + <> +
+
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+
+
+ + ); } function getLastWednesdayOfMonth(date = new Date()) { - const year = date.getFullYear(); - const month = date.getMonth(); - // Start from the last day of the month - const lastDay = new Date(Date.UTC(year, month + 1, 0)); - // 3 = Wednesday - const lastWednesday = new Date(lastDay); - while (lastWednesday.getUTCDay() !== 3) { - lastWednesday.setUTCDate(lastWednesday.getUTCDate() - 1); - } - // Set to 14:00 UTC (2pm UTC) - lastWednesday.setUTCHours(14, 0, 0, 0); - return lastWednesday; + const year = date.getFullYear(); + const month = date.getMonth(); + // Start from the last day of the month + const lastDay = new Date(Date.UTC(year, month + 1, 0)); + // 3 = Wednesday + const lastWednesday = new Date(lastDay); + while (lastWednesday.getUTCDay() !== 3) { + lastWednesday.setUTCDate(lastWednesday.getUTCDate() - 1); + } + // Set to 14:00 UTC (2pm UTC) + lastWednesday.setUTCHours(14, 0, 0, 0); + return lastWednesday; } function UTCDateTime(year, month, day, hour, minute = 0, second = 0) { - // NOTE: Not use constructor directly as it uses local time - const date = new Date(year, month, day, hour, minute, second); - date.setUTCHours(hour, minute, second); - return date; + // NOTE: Not use constructor directly as it uses local time + const date = new Date(year, month, day, hour, minute, second); + date.setUTCHours(hour, minute, second); + return date; } let exceptions = { - "2025-9": UTCDateTime(2025, 9, 1, 14), + "2025-9": UTCDateTime(2025, 9, 1, 14), }; function getNextMeeting(now = new Date()) { - let nextMeeting = getLastWednesdayOfMonth(now); - const exception = exceptions[`${now.getFullYear()}-${now.getMonth() + 1}`]; - if (exception) { - console.warn("Exceptional next meeting date:", exception); - nextMeeting = exception; - } - const meetingEndTime = new Date(nextMeeting.getTime() + 60 * 60 * 1000); // 1 hour after start - - // If we're past the current month's meeting end time, get next month's meeting - if (now >= meetingEndTime) { - const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1); - return getLastWednesdayOfMonth(nextMonth); - } - - return nextMeeting; + let nextMeeting = getLastWednesdayOfMonth(now); + const exception = exceptions[`${now.getFullYear()}-${now.getMonth() + 1}`]; + if (exception) { + console.warn("Exceptional next meeting date:", exception); + nextMeeting = exception; + } + const meetingEndTime = new Date(nextMeeting.getTime() + 60 * 60 * 1000); // 1 hour after start + + // If we're past the current month's meeting end time, get next month's meeting + if (now >= meetingEndTime) { + const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1); + return getLastWednesdayOfMonth(nextMonth); + } + + return nextMeeting; } function isLiveTime(now = new Date()) { - const nextMeeting = getNextMeeting(now); - const meetingStartTime = nextMeeting.getTime(); - const meetingEndTime = meetingStartTime + 60 * 60 * 1000; // 1 hour after start - const currentTime = now.getTime(); + const nextMeeting = getNextMeeting(now); + const meetingStartTime = nextMeeting.getTime(); + const meetingEndTime = meetingStartTime + 60 * 60 * 1000; // 1 hour after start + const currentTime = now.getTime(); - return currentTime >= meetingStartTime && currentTime < meetingEndTime; + return currentTime >= meetingStartTime && currentTime < meetingEndTime; } function formatCountdown(ms, isLive = false) { - if (isLive) return "Live Now!"; - if (ms <= 0) return "Starting soon"; - const totalSeconds = Math.floor(ms / 1000); - const weeks = Math.floor(totalSeconds / (7 * 24 * 3600)); - const days = Math.floor((totalSeconds % (7 * 24 * 3600)) / (24 * 3600)); - const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600); - const minutes = Math.floor((totalSeconds % 3600) / 60); - const seconds = totalSeconds % 60; - const parts = []; - if (weeks) parts.push(`${weeks} week${weeks > 1 ? "s" : ""}`); - if (days) parts.push(`${days} day${days > 1 ? "s" : ""}`); - if (hours) parts.push(`${hours} hour${hours > 1 ? "s" : ""}`); - if (minutes) parts.push(`${minutes} min${minutes > 1 ? "s" : ""}`); - if (seconds && parts.length < 2) { - parts.push(`${seconds} sec${seconds > 1 ? "s" : ""}`); + if (isLive) return "Live Now!"; + if (ms <= 0) return "Starting soon"; + const totalSeconds = Math.floor(ms / 1000); + const weeks = Math.floor(totalSeconds / (7 * 24 * 3600)); + const days = Math.floor((totalSeconds % (7 * 24 * 3600)) / (24 * 3600)); + const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600); + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = totalSeconds % 60; + const parts = []; + if (weeks) parts.push(`${weeks} week${weeks > 1 ? "s" : ""}`); + if (days) parts.push(`${days} day${days > 1 ? "s" : ""}`); + if (hours) parts.push(`${hours} hour${hours > 1 ? "s" : ""}`); + if (minutes) parts.push(`${minutes} min${minutes > 1 ? "s" : ""}`); + if (seconds && parts.length < 2) { + parts.push(`${seconds} sec${seconds > 1 ? "s" : ""}`); + } + return ` in \n ${parts.slice(0, 2).join(", ")}`; +} + +function highlightNumbers(str: string) { + return str.split(/(\d+)/).map((part, i) => { + if (/^\d+$/.test(part)) { + return ( + + {part} + + ); } - return `Starting in ${parts.slice(0, 2).join(", ")}`; + return part; + }); } function LeiosSpecificationSection() { - return ( -
-
-
-
-

- From Research to Reality -

-

- The{" "} - - published Leios CIP - {" "} - represents a strategic balance between throughput - gains and ecosystem compatibility -

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Throughput - - - (KiloBytes per Second) - - - Inclusion Latency - - - (Seconds) - - - Ecosystem Impact - - - (Adaptation Cost) - - - Time to Market - - - (Years) - - - 1,000+ TxkB/s - - - 100 TxkB/s - - - 10 TxkB/s - - - 1 TxkB/s - - - 300s+ - - - 180s - - - 90s - - - 45s - - - Very High - - - High - - - Medium - - - Low - - - 3+ yr - - - 2 yr - - - 1 yr - - - - - - Ouroboros Praos - - - - Proposed Leios - - - - Research Paper Leios - - - -
-
-
-

- The proposed Leios specification delivers a{" "} - 30-50x throughput increase{" "} - (from ~4.5 TxkB/s to ~140-300 TxkB/s) while - maintaining manageable ecosystem impact. - Unlike the research paper's approach, which - achieves higher throughput but requires - extensive ecosystem changes and 2-3 minute - confirmation times, the CIP specification - strikes a strategic balance. -

-

- Key advantages of the CIP approach include - modest latency increases (45-60 seconds vs - 20 seconds), familiar transaction structures - for ecosystem compatibility, and a realistic - 1-1.5 year deployment timeline compared to - 2.5-3 years for higher-concurrency - alternatives. -

-
- - Read the Full CIP - -
-
-
-
-
+ return ( +
+
+
+
+
+

From Research to Reality

+

+ The{" "} + + published Leios CIP + {" "} + represents a strategic balance between throughput gains and + ecosystem compatibility +

+

+ The proposed Leios specification delivers a{" "} + 30-50x throughput increase (from ~4.5 TxkB/s to + ~140-300 TxkB/s) while maintaining manageable ecosystem impact. + Unlike the research paper's approach, which achieves higher + throughput but requires extensive ecosystem changes and 2-3 + minute confirmation times, the CIP specification strikes a + strategic balance. +

+

+ Key advantages of the CIP approach include modest latency + increases (45-60 seconds vs 20 seconds), familiar transaction + structures for ecosystem compatibility, and a realistic 1-1.5 + year deployment timeline compared to 2.5-3 years for + higher-concurrency alternatives. +

+
+ +
-
- ); +
+ +
+
+
+ + + ); } function HowLeiosWorksSection() { - return ( -
-
-
-
-

How Leios Works

-

- Block producers simultaneously create both a - standard Praos block and a larger secondary block - referencing additional transactions -

-
-
-

- Ouroboros Leios achieves higher transaction - throughput by allowing block producers to - create additional blocks alongside the - regular Praos chain. These supplementary - blocks, called{" "} - - Endorser Blocks (EBs) - - , reference extra transactions that would - otherwise wait for the standard Praos blocks - (called{" "} - - Ranking Blocks or RBs - - {") "} - in this protocol in future active slots. -

-

- To ensure data availability and correctness, - these blocks undergo{" "} - - committee validation - {" "} - before their transactions become part of the - permanent ledger. The key insight is that we - can maintain Praos's security guarantees - while processing more transactions by - carefully managing when and how these - additional blocks are validated and included - in the chain. -

-

- EB inclusion is opportunistic rather than - guaranteed, depending on the random timing - of block production relative to the - certification process. This design preserves - the existing Praos chain structure while - adding substantial transaction capacity - through the secondary validation pathway. -

-
- - Read the Technical Details - -
-
-
-
- - - - - - - - - - - - - - - - - {/* Slot Grid */} - - - - - - - - - - {/* Minor grid lines */} - - - - - - - - - - - - - - - - - - - - - - - - {/* Timeline */} - - - Time (slots) → - - - {/* RB Block */} - - - - RB - - - [Txs] - - - - {/* EB Block */} - - - - EB - - - [TxRefs] - - - - {/* RB' Block */} - - - - RB' - - - - {/* Certificate */} - - - - - - C - - - EB - - - - - - {/* Arrows and connections */} - - - announces - - - {/* Parameter brackets */} - - - - - 3 - - - L - - - hdr - - - - - - - - - L - - - vote - - - - - - - - - L - - - diff - - - - - {/* Votes */} - - - - - - - - - - - - - - - - - {/* Delta network characteristics */} - - - - - - - Δ - - RB - - - W - - - - - - - - - - - - Δ - - applyTxs - - - W - - - - - - - - - - - - Δ - - EB - - - O - - - - - - - - - - - - Δ - - EB - - - W - - - - - - - - - - Δ - - reapply - - - W - - - - - - {/* Certificate back arrow */} - - - {/* Additional arrows */} - - - - - {/* Legend */} - - - - Legend - - - {/* Certificate shape */} - - - - - Certificate - - - {/* Vote shape */} - - - - - Vote - - - - Superscripts - - - O = Optimistic - - - W = Worst-case - - - -
- Protocol timing showing the sequential - process from RB announcement through EB - validation to certificate inclusion. Key - parameters:{" "} - - - L - - hdr - {" "} - ( - - header diffusion - - ),{" "} - - - L - - vote - {" "} - ( - - voting period - - ),{" "} - - - L - - diff - {" "} - ( - - diffusion period - - ). -
-
-
-
-
-
+ return ( +
+
+
+
+
+

How Leios Works

+

+ Block producers simultaneously create both a standard Praos + block and a larger secondary block referencing additional + transactions +

+

+ Ouroboros Leios achieves higher transaction throughput by + allowing block producers to create additional blocks alongside + the regular Praos chain. These supplementary blocks, called{" "} + + Endorser Blocks (EBs) + + , reference extra transactions that would otherwise wait for the + standard Praos blocks (called{" "} + + Ranking Blocks or RBs + + {") "} + in this protocol in future active slots. +

+

+ To ensure data availability and correctness, these blocks + undergo{" "} + + committee validation + {" "} + before their transactions become part of the permanent ledger. + The key insight is that we can maintain Praos's security + guarantees while processing more transactions by carefully + managing when and how these additional blocks are validated and + included in the chain. +

+

+ EB inclusion is opportunistic rather than guaranteed, depending + on the random timing of block production relative to the + certification process. This design preserves the existing Praos + chain structure while adding substantial transaction capacity + through the secondary validation pathway. +

+
+ +
-
- ); +
+ +
+
+ + +
+ ); } function MonthlyReviewsSection() { - const [countdown, setCountdown] = useState(""); - const [nextDate, setNextDate] = useState(""); - const [isLive, setIsLive] = useState(false); - - useEffect(() => { - function updateCountdown() { - const now = new Date(); - const live = isLiveTime(now); - const target = getNextMeeting(now); - - setIsLive(live); - setCountdown( - formatCountdown(target.getTime() - now.getTime(), live), - ); - setNextDate( - target.toLocaleString(undefined, { - weekday: "short", - year: "numeric", - month: "short", - day: "numeric", - hour: "2-digit", - minute: "2-digit", - hour12: false, - }), - ); - } - updateCountdown(); - const interval = setInterval(updateCountdown, 1000); - return () => clearInterval(interval); - }, []); - - return ( -
-
-
-
-

Stay up to date

-

- Catch up on the latest Leios progress, key - decisions, and Q&A in our monthly review videos -

-
-
- - - {isLive ? "Join Live" : "Watch Live"} - - {!isLive && ( - - {countdown} - - )} - - {!isLive && ( -
- Next review meeting: {nextDate} -
- )} -
- - Catch up on past reviews - -
-
-
+ const [countdown, setCountdown] = useState(""); + const [nextDate, setNextDate] = useState(""); + const [isLive, setIsLive] = useState(false); + + useEffect(() => { + function updateCountdown() { + const now = new Date(); + const live = isLiveTime(now); + const target = getNextMeeting(now); + + setIsLive(live); + const rawCountdown = formatCountdown( + target.getTime() - now.getTime(), + live, + ); + //@ts-ignore + setCountdown(highlightNumbers(rawCountdown)); + setNextDate( + target.toLocaleString(undefined, { + weekday: "short", + year: "numeric", + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + hour12: false, + }), + ); + } + updateCountdown(); + const interval = setInterval(updateCountdown, 1000); + return () => clearInterval(interval); + }, []); + + return ( +
+
+
+
+
+

Stay up to date

+

+ Catch up on the latest Leios progress, key decisions, and Q&A in + our monthly review videos +

+ + Catch up on past reviews + +
+
+
+
+ +
+
+ + {isLive ? "Join Live" : "Watch Live"} + {!isLive && {countdown}} + + {!isLive && ( + <> + + Next review meeting: + + {nextDate} + + )} +
-
- ); +
+ + +
+ ); } export default function Home(): React.ReactElement { - const { siteConfig } = useDocusaurusContext(); - return ( - - -
- - - - -
- - ); + const { siteConfig } = useDocusaurusContext(); + return ( + + +
+ + + + +
+ + ); } diff --git a/site/src/theme/Footer/Layout/index.tsx b/site/src/theme/Footer/Layout/index.tsx new file mode 100644 index 000000000..9bcc48c5f --- /dev/null +++ b/site/src/theme/Footer/Layout/index.tsx @@ -0,0 +1,29 @@ +import type { Props } from "@theme/Footer/Layout"; +import clsx from "clsx"; + +export default function FooterLayout({ + style, + links, + logo, + copyright, +}: Props): JSX.Element { + return ( +
+
+
+ {links} + {(logo || copyright) && ( +
+ {logo && logo} + {copyright} +
+ )} +
+
+
+ ); +} diff --git a/site/src/theme/Footer/index.module.css b/site/src/theme/Footer/index.module.css deleted file mode 100644 index 35b4b89d1..000000000 --- a/site/src/theme/Footer/index.module.css +++ /dev/null @@ -1,14 +0,0 @@ - -.preFooter{ - height: 50px; - background-color: transparent; - - /* This fixes some overalp due to the bottom of the wave pattern not being perfectly straight*/ - margin-bottom: -3px; - - background-image: url("/static/img/wave-pattern.svg"); - background-repeat: repeat-x; - background-position: bottom; - - background-size: 50px 50px; -} \ No newline at end of file diff --git a/site/src/theme/Footer/index.tsx b/site/src/theme/Footer/index.tsx deleted file mode 100644 index b039cd3a0..000000000 --- a/site/src/theme/Footer/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Footer from '@theme-original/Footer'; -import type FooterType from '@theme/Footer'; -import type {WrapperProps} from '@docusaurus/types'; -import styles from './index.module.css'; -import clsx from 'clsx'; - - -type Props = WrapperProps; - -export default function FooterWrapper(props: Props): JSX.Element { - return ( -
-
-
-
- ); -} diff --git a/site/src/theme/Navbar/Content/index.tsx b/site/src/theme/Navbar/Content/index.tsx new file mode 100644 index 000000000..42d108b03 --- /dev/null +++ b/site/src/theme/Navbar/Content/index.tsx @@ -0,0 +1,115 @@ +import { ErrorCauseBoundary, useThemeConfig } from "@docusaurus/theme-common"; +import { + splitNavbarItems, + useNavbarMobileSidebar, +} from "@docusaurus/theme-common/internal"; +import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; +import NavbarLogo from "@theme/Navbar/Logo"; +import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; +import NavbarSearch from "@theme/Navbar/Search"; +import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem"; +import SearchBar from "@theme/SearchBar"; +import { type ReactNode } from "react"; + +import { useLocation } from "@docusaurus/router"; +import styles from "./styles.module.css"; + +function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items as NavbarItemConfig[]; +} + +function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element { + return ( + <> + {items.map((item, i) => ( + + new Error( + `A theme navbar item failed to render. +Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: +${JSON.stringify(item, null, 2)}`, + { cause: error } + ) + } + > + + + ))} + + ); +} + +function NavbarContentLayout({ + left, + right, +}: { + left: ReactNode; + right: ReactNode; +}) { + const { pathname } = useLocation(); + return ( + <> + {pathname === "/" || pathname === "/formal-spec/" ? ( +
+
+
+ {/*
{left}
*/} + +
{right}
+
+
+
+ ) : ( +
+ {/*
{left}
*/} + + +
{right}
+
+ )} + + ); +} + +//
+//
{left}
+//
{right}
+//
+ +export default function NavbarContent(): JSX.Element { + const mobileSidebar = useNavbarMobileSidebar(); + + const items = useNavbarItems(); + const [leftItems, rightItems] = splitNavbarItems(items); + + const searchBarItem = items.find((item) => item.type === "search"); + + return ( + + + + } + right={ + // TODO stop hardcoding items? + // Ask the user to add the respective navbar items => more flexible + <> + {!mobileSidebar.disabled && } +
+ + + {!searchBarItem && ( + + + + )} +
+ + } + /> + ); +} diff --git a/site/src/theme/Navbar/Content/styles.module.css b/site/src/theme/Navbar/Content/styles.module.css new file mode 100644 index 000000000..4c9471e10 --- /dev/null +++ b/site/src/theme/Navbar/Content/styles.module.css @@ -0,0 +1,8 @@ +/* +Hide color mode toggle in small viewports + */ +@media (max-width: 996px) { + .colorModeToggle { + display: none; + } +} diff --git a/site/src/theme/Navbar/Layout/index.tsx b/site/src/theme/Navbar/Layout/index.tsx new file mode 100644 index 000000000..05701fb1e --- /dev/null +++ b/site/src/theme/Navbar/Layout/index.tsx @@ -0,0 +1,57 @@ +import { useThemeConfig } from "@docusaurus/theme-common"; +import { + useHideableNavbar, + useNavbarMobileSidebar, +} from "@docusaurus/theme-common/internal"; +import { translate } from "@docusaurus/Translate"; +import type { Props } from "@theme/Navbar/Layout"; +import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar"; +import clsx from "clsx"; +import { type ComponentProps } from "react"; + +import styles from "./styles.module.css"; + +function NavbarBackdrop(props: ComponentProps<"div">) { + return ( +
+ ); +} + +export default function NavbarLayout({ children }: Props): JSX.Element { + const { + navbar: { hideOnScroll, style }, + } = useThemeConfig(); + const mobileSidebar = useNavbarMobileSidebar(); + const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); + return ( + + ); +} diff --git a/site/src/theme/Navbar/Layout/styles.module.css b/site/src/theme/Navbar/Layout/styles.module.css new file mode 100644 index 000000000..e72891a44 --- /dev/null +++ b/site/src/theme/Navbar/Layout/styles.module.css @@ -0,0 +1,7 @@ +.navbarHideable { + transition: transform var(--ifm-transition-fast) ease; +} + +.navbarHidden { + transform: translate3d(0, calc(-100% - 2px), 0); +} diff --git a/site/src/theme/Navbar/Logo/index.tsx b/site/src/theme/Navbar/Logo/index.tsx new file mode 100644 index 000000000..40b1a165d --- /dev/null +++ b/site/src/theme/Navbar/Logo/index.tsx @@ -0,0 +1,11 @@ +import Logo from "@theme/Logo"; + +export default function NavbarLogo(): JSX.Element { + return ( + + ); +} diff --git a/site/src/theme/Navbar/index.tsx b/site/src/theme/Navbar/index.tsx new file mode 100644 index 000000000..a9b61f1ee --- /dev/null +++ b/site/src/theme/Navbar/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import NavbarLayout from '@theme/Navbar/Layout'; +import NavbarContent from '@theme/Navbar/Content'; + +export default function Navbar(): JSX.Element { + return ( + + + + ); +} diff --git a/site/static/fonts/Lexend/Lexend-Bold.ttf b/site/static/fonts/Lexend/Lexend-Bold.ttf new file mode 100644 index 000000000..97614b98f Binary files /dev/null and b/site/static/fonts/Lexend/Lexend-Bold.ttf differ diff --git a/site/static/fonts/Lexend/Lexend-Medium.ttf b/site/static/fonts/Lexend/Lexend-Medium.ttf new file mode 100644 index 000000000..a56f1e9bd Binary files /dev/null and b/site/static/fonts/Lexend/Lexend-Medium.ttf differ diff --git a/site/static/fonts/Lexend/Lexend-Regular.ttf b/site/static/fonts/Lexend/Lexend-Regular.ttf new file mode 100644 index 000000000..b869458f7 Binary files /dev/null and b/site/static/fonts/Lexend/Lexend-Regular.ttf differ diff --git a/site/static/fonts/Lexend/Lexend-SemiBold.ttf b/site/static/fonts/Lexend/Lexend-SemiBold.ttf new file mode 100644 index 000000000..436b93b58 Binary files /dev/null and b/site/static/fonts/Lexend/Lexend-SemiBold.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-Bold.ttf b/site/static/fonts/Poppins/Poppins-Bold.ttf new file mode 100644 index 000000000..00559eeb2 Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-Bold.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-BoldItalic.ttf b/site/static/fonts/Poppins/Poppins-BoldItalic.ttf new file mode 100644 index 000000000..e61e8e88b Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-BoldItalic.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-Italic.ttf b/site/static/fonts/Poppins/Poppins-Italic.ttf new file mode 100644 index 000000000..12b7b3c40 Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-Italic.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-Medium.ttf b/site/static/fonts/Poppins/Poppins-Medium.ttf new file mode 100644 index 000000000..6bcdcc27f Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-Medium.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-MediumItalic.ttf b/site/static/fonts/Poppins/Poppins-MediumItalic.ttf new file mode 100644 index 000000000..be67410fd Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-MediumItalic.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-Regular.ttf b/site/static/fonts/Poppins/Poppins-Regular.ttf new file mode 100644 index 000000000..9f0c71b70 Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-Regular.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-SemiBold.ttf b/site/static/fonts/Poppins/Poppins-SemiBold.ttf new file mode 100644 index 000000000..74c726e32 Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-SemiBold.ttf differ diff --git a/site/static/fonts/Poppins/Poppins-SemiBoldItalic.ttf b/site/static/fonts/Poppins/Poppins-SemiBoldItalic.ttf new file mode 100644 index 000000000..3e6c94223 Binary files /dev/null and b/site/static/fonts/Poppins/Poppins-SemiBoldItalic.ttf differ diff --git a/site/static/img/favicon.ico b/site/static/img/favicon.ico index c01d54bcd..846ab7a41 100644 Binary files a/site/static/img/favicon.ico and b/site/static/img/favicon.ico differ diff --git a/site/static/img/flexible.svg b/site/static/img/flexible.svg new file mode 100644 index 000000000..34b3335c4 --- /dev/null +++ b/site/static/img/flexible.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/static/img/grid-lines.svg b/site/static/img/grid-lines.svg new file mode 100644 index 000000000..5e6df2486 --- /dev/null +++ b/site/static/img/grid-lines.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/site/static/img/homepage-background-mobile.png b/site/static/img/homepage-background-mobile.png new file mode 100644 index 000000000..86d2fff2a Binary files /dev/null and b/site/static/img/homepage-background-mobile.png differ diff --git a/site/static/img/homepage-background.png b/site/static/img/homepage-background.png new file mode 100644 index 000000000..c420b3b1f Binary files /dev/null and b/site/static/img/homepage-background.png differ diff --git a/site/static/img/logo-dark.svg b/site/static/img/logo-dark.svg new file mode 100644 index 000000000..3eade3017 --- /dev/null +++ b/site/static/img/logo-dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/site/static/img/logo-footer.svg b/site/static/img/logo-footer.svg new file mode 100644 index 000000000..8133c25f6 --- /dev/null +++ b/site/static/img/logo-footer.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/site/static/img/logo.svg b/site/static/img/logo.svg new file mode 100644 index 000000000..d74fcbc6b --- /dev/null +++ b/site/static/img/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/site/static/img/prefooter.svg b/site/static/img/prefooter.svg deleted file mode 100644 index 98e6a9098..000000000 --- a/site/static/img/prefooter.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/static/img/safe.svg b/site/static/img/safe.svg deleted file mode 100644 index da304e676..000000000 --- a/site/static/img/safe.svg +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/site/static/img/scale.svg b/site/static/img/scale.svg new file mode 100644 index 000000000..d1b53afe1 --- /dev/null +++ b/site/static/img/scale.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/static/img/secure.svg b/site/static/img/secure.svg new file mode 100644 index 000000000..7385c13a7 --- /dev/null +++ b/site/static/img/secure.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/static/img/social-preview.jpg b/site/static/img/social-preview.jpg index 68a5fa75b..67ad026f8 100644 Binary files a/site/static/img/social-preview.jpg and b/site/static/img/social-preview.jpg differ diff --git a/site/static/img/socket-chord.svg b/site/static/img/socket-chord.svg deleted file mode 100644 index fedcfd89e..000000000 --- a/site/static/img/socket-chord.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/site/static/img/socket-cord.svg b/site/static/img/socket-cord.svg deleted file mode 100644 index fedcfd89e..000000000 --- a/site/static/img/socket-cord.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/site/static/img/video-cam.png b/site/static/img/video-cam.png new file mode 100644 index 000000000..51c3eea8f Binary files /dev/null and b/site/static/img/video-cam.png differ diff --git a/site/static/img/wave-logo.ico b/site/static/img/wave-logo.ico deleted file mode 100644 index df5019bb9..000000000 Binary files a/site/static/img/wave-logo.ico and /dev/null differ diff --git a/site/static/img/wave-logo.png b/site/static/img/wave-logo.png deleted file mode 100644 index b333abe4e..000000000 Binary files a/site/static/img/wave-logo.png and /dev/null differ diff --git a/site/static/img/wave-logo.svg b/site/static/img/wave-logo.svg deleted file mode 100644 index 86b6d87c3..000000000 --- a/site/static/img/wave-logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/site/static/img/wave-pattern-flipped.svg b/site/static/img/wave-pattern-flipped.svg deleted file mode 100644 index d642405fa..000000000 --- a/site/static/img/wave-pattern-flipped.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/site/static/img/wave-pattern.svg b/site/static/img/wave-pattern.svg deleted file mode 100644 index 70c4577c2..000000000 --- a/site/static/img/wave-pattern.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - -