diff --git a/site/package-lock.json b/site/package-lock.json index d1c889dd8..3fb24cdaa 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -12,6 +12,7 @@ "@docusaurus/preset-classic": "^3.9.2", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "framer-motion": "^12.23.25", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", @@ -9087,6 +9088,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.23.25", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.25.tgz", + "integrity": "sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.23", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -13173,6 +13201,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/motion-dom": { + "version": "12.23.23", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", + "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/mrmime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", diff --git a/site/package.json b/site/package.json index c1a7e3382..4a167e116 100644 --- a/site/package.json +++ b/site/package.json @@ -22,7 +22,8 @@ "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", - "undici": "^7.2.3" + "undici": "^7.2.3", + "framer-motion": "^12.23.25" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.4.0", diff --git a/site/src/components/HomepageFeatures/index.tsx b/site/src/components/HomepageFeatures/index.tsx index 51116d45a..fd56a596c 100644 --- a/site/src/components/HomepageFeatures/index.tsx +++ b/site/src/components/HomepageFeatures/index.tsx @@ -1,14 +1,19 @@ -import { LinkButton } from "../LinkButton/LinkButton"; -import styles from "./styles.module.css"; +import DecentralizedSvg from "@site/static/img/decentralized.svg"; + import ScaleSvg from "@site/static/img/scale.svg"; import SecureSvg from "@site/static/img/secure.svg"; -import FlexibleSvg from "@site/static/img/flexible.svg"; +import { LinkButton } from "../LinkButton/LinkButton"; +import styles from "./styles.module.css"; type FeatureItem = { title: string; - Svg: string; + Svg: React.ComponentType< + React.SVGProps & { + title?: string; + } + >; description: React.ReactElement; - button: { + button?: { text: string; url: string; }; @@ -37,9 +42,15 @@ const FeatureList: FeatureItem[] = [ ), }, { - title: "Flexible", - Svg: FlexibleSvg, - description: <>Ouroboros Leios supports diverse applications., + title: "Decentralized", + Svg: DecentralizedSvg, + description: ( + <> + Improving the throughput by 50x while not compromising decentralization. + So, the network still will maintain its resiliance, fairness and + democratisation. + + ), }, ]; @@ -60,7 +71,7 @@ function Feature({ Svg, title, description, button }: FeatureItem) { export default function HomepageFeatures(): React.ReactElement { return ( -
+
diff --git a/site/src/components/HomepageFeatures/styles.module.css b/site/src/components/HomepageFeatures/styles.module.css index 10205d65b..f2d9d2c66 100644 --- a/site/src/components/HomepageFeatures/styles.module.css +++ b/site/src/components/HomepageFeatures/styles.module.css @@ -13,7 +13,7 @@ } .feature h2 { - margin-bottom: 1.8125rem; + margin-bottom: 1.2rem; } .featureContent { diff --git a/site/src/css/custom.css b/site/src/css/custom.css index e26c5311c..dd7d048bd 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -21,11 +21,11 @@ --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-link-color: #8c02c2; + --ifm-color-caption: var(--ifm-link-color); + --ifm-menu-color: var(--ifm-link-color); + --ifm-toc-link-color: var(--ifm-link-color); + --ifm-color-emphasis-300: var(--ifm-border-color); --ifm-navbar-height: 6.063rem; @@ -44,29 +44,31 @@ --ifm-footer-link-color: #f8f6fa; --ifm-footer-color: #f8f6fa; - --ifm-footer-link-hover-color: #ffffffdd; + --ifm-footer-link-hover-color: rgba(255, 255, 255, 0.6); --ifm-navbar-padding-vertical: 0; --ifm-navbar-item-padding-vertical: 0; --ifm-navbar-item-padding-horizontal: 0; --ifm-spacing-horizontal: 0; + --ifm-heading-font-weight: 500; + + --ifm-footer-heading-color: #8f6dae; + --ifm-container-width-xl: 1440px; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme="dark"] { - --ifm-navbar-background-color: #333; - --ifm-background-color-primary: #1a1a1a; - --ifm-background-color-secondary: #333; +html[data-theme="dark"] { + --ifm-background-color: #180425; + --ifm-navbar-background-color: #180425; + --ifm-background-color-primary: #200830; + --ifm-background-color-secondary: #180425; + --ifm-border-color: #45364e; + --ifm-toc-border-color: var(--ifm-border-color); - --ifm-link-color: #b1e0fe; - --ifm-color-caption: #b1e0fe; - --ifm-link-color: #b1e0fe; - --ifm-menu-color: #b1e0fe; - --ifm-toc-link-color: #b1e0fe; + --ifm-link-color: #6effd1; --link-button-background-hover: rgba(255, 255, 255, 0.15); - - --ifm-footer-link-hover-color: #000000dd; + --ifm-dropdown-background-color: var(--ifm-background-color-primary); --ifm-font-color-base: #f8f6fa; --ifm-font-color-alternate: #fff; @@ -78,6 +80,16 @@ --ifm-color-primary-lighter: #a6ccdd; --ifm-color-primary-lightest: #b5d4e3; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + + --ifm-card-background-color: rgba(0, 0, 0, 0.2); +} + +html[data-theme="dark"] .navbar { + border-bottom: 1px solid var(--ifm-border-color); +} + +html[data-theme="dark"] footer { + border-top: 1px solid var(--ifm-border-color); } @media (max-width: 997px) { @@ -153,13 +165,14 @@ width: fit-content; min-width: 81px; max-width: 132px; + margin-right: 1.5rem; } .navbar__items--right { margin-left: auto; display: flex; align-items: center; - gap: 0.5rem; + gap: 0.25rem; max-width: 978px; width: 100%; flex-shrink: 1; @@ -181,7 +194,6 @@ .navbar__link { font-size: var(--text-sm); - font-weight: var(--font-weight-bold); display: flex; align-items: center; text-decoration: none; @@ -198,6 +210,10 @@ } } +.menu { + font-weight: normal; +} + .footer { padding: 3.5rem 0; } @@ -214,12 +230,14 @@ .footer__title { margin-bottom: 1.25rem; + font-weight: 500; + color: var(--ifm-footer-heading-color); } .footer__items { display: flex; flex-direction: column; - gap: 1.25rem; + gap: 0.75rem; } .footer__bottom { @@ -228,7 +246,7 @@ justify-content: space-between; align-items: center; padding-top: 1rem; - border-top: 1px solid #8b8190; + border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 4.25rem; } diff --git a/site/src/pages/formal-spec/index.tsx b/site/src/pages/formal-spec/index.tsx index cdb321c20..29c6de02a 100644 --- a/site/src/pages/formal-spec/index.tsx +++ b/site/src/pages/formal-spec/index.tsx @@ -41,13 +41,15 @@ export default function FormalSpecPage(): React.ReactElement {
-

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

diff --git a/site/src/pages/formal-spec/styles.module.css b/site/src/pages/formal-spec/styles.module.css index 4f1c0be5b..77f1db967 100644 --- a/site/src/pages/formal-spec/styles.module.css +++ b/site/src/pages/formal-spec/styles.module.css @@ -1,5 +1,5 @@ .main { - padding: 2rem 0; + padding: 3.5rem 0; background-color: var(--ifm-background-color); } @@ -45,3 +45,8 @@ color: var(--ifm-color-emphasis-700); line-height: 1.4; } + +.plainHero { + max-width: 800px; + margin-bottom: 2rem; +} diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css index 92d7ad18f..2fea576d5 100644 --- a/site/src/pages/index.module.css +++ b/site/src/pages/index.module.css @@ -23,7 +23,7 @@ } .heroTitle { - margin-bottom: 2rem !important; + margin-bottom: 1.25rem !important; } @media (max-width: 997px) { @@ -195,7 +195,7 @@ justify-content: center; align-items: center; gap: 0.625rem; - background-color: #333; + background-color: rgba(0, 0, 0, 0.7); border-radius: 1rem; } @@ -225,13 +225,12 @@ .subtitle { font-size: var(--text-xl); line-height: var(--line-height-normal); - margin: 2.75rem 0; + margin: 1.75rem 0; } @media (max-width: 997px) { .subtitle { font-size: var(--text-base); - margin: 3rem 0; } } @@ -276,7 +275,7 @@ background-color: transparent; --svg-bg-color: transparent; --svg-border-color: #555555; - --svg-text-color: #e0e0e0; + --svg-text-color: #fff; --svg-text-secondary: #cccccc; --svg-text-muted: #aaaaaa; --svg-arrow-color: #bbbbbb; @@ -339,7 +338,6 @@ .svgCaption { margin-top: 0.69rem; - color: var(--ifm-color-caption); text-align: center; line-height: 1.5; } diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index e731f8dc9..751dbda35 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -263,7 +263,7 @@ function MonthlyReviewsSection() { setIsLive(live); const rawCountdown = formatCountdown( target.getTime() - now.getTime(), - live, + live ); //@ts-ignore setCountdown(highlightNumbers(rawCountdown)); @@ -276,7 +276,7 @@ function MonthlyReviewsSection() { hour: "2-digit", minute: "2-digit", hour12: false, - }), + }) ); } updateCountdown(); diff --git a/site/src/theme/Footer/Layout/index.tsx b/site/src/theme/Footer/Layout/index.tsx index 9bcc48c5f..b108a083c 100644 --- a/site/src/theme/Footer/Layout/index.tsx +++ b/site/src/theme/Footer/Layout/index.tsx @@ -1,5 +1,6 @@ import type { Props } from "@theme/Footer/Layout"; import clsx from "clsx"; +import { JSX } from "react"; export default function FooterLayout({ style, diff --git a/site/src/theme/Navbar/Content/index.tsx b/site/src/theme/Navbar/Content/index.tsx index 42d108b03..157acbdd3 100644 --- a/site/src/theme/Navbar/Content/index.tsx +++ b/site/src/theme/Navbar/Content/index.tsx @@ -9,7 +9,7 @@ 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 { JSX, type ReactNode } from "react"; import { useLocation } from "@docusaurus/router"; import styles from "./styles.module.css"; @@ -25,12 +25,11 @@ function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element { {items.map((item, i) => ( + onError={() => 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 } +${JSON.stringify(item, null, 2)}` ) } > diff --git a/site/src/theme/Navbar/Layout/index.tsx b/site/src/theme/Navbar/Layout/index.tsx index 05701fb1e..f256be172 100644 --- a/site/src/theme/Navbar/Layout/index.tsx +++ b/site/src/theme/Navbar/Layout/index.tsx @@ -1,3 +1,6 @@ +"use client"; + +import { useLocation } from "@docusaurus/router"; import { useThemeConfig } from "@docusaurus/theme-common"; import { useHideableNavbar, @@ -7,9 +10,8 @@ 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"; +import { motion, useMotionValueEvent, useScroll } from "framer-motion"; +import { JSX, useEffect, useState, type ComponentProps } from "react"; function NavbarBackdrop(props: ComponentProps<"div">) { return ( @@ -26,32 +28,52 @@ export default function NavbarLayout({ children }: Props): JSX.Element { navbar: { hideOnScroll, style }, } = useThemeConfig(); const mobileSidebar = useNavbarMobileSidebar(); - const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); + const { navbarRef } = useHideableNavbar(hideOnScroll); + const location = useLocation(); + const isHomepage = location.pathname === "/"; + + const { scrollY } = useScroll(); + const [isVisible, setIsVisible] = useState(true); + const [lastY, setLastY] = useState(0); + + // Hide/show on scroll similar to your previous code + useMotionValueEvent(scrollY, "change", (latest) => { + if (!isHomepage) return; + if (mobileSidebar.shown) return; + + if (latest > lastY + 10) setIsVisible(false); + else if (latest < lastY - 10) setIsVisible(true); + + setLastY(latest); + }); + + useEffect(() => { + if (mobileSidebar.shown) setIsVisible(true); + }, [mobileSidebar.shown]); + + const NavWrapper = isHomepage ? motion.nav : "nav"; + return ( - + ); } diff --git a/site/src/theme/Navbar/Logo/index.tsx b/site/src/theme/Navbar/Logo/index.tsx index 40b1a165d..b78d31917 100644 --- a/site/src/theme/Navbar/Logo/index.tsx +++ b/site/src/theme/Navbar/Logo/index.tsx @@ -1,4 +1,5 @@ import Logo from "@theme/Logo"; +import { JSX } from "react"; export default function NavbarLogo(): JSX.Element { return ( diff --git a/site/src/theme/Navbar/index.tsx b/site/src/theme/Navbar/index.tsx index a9b61f1ee..dffca20d8 100644 --- a/site/src/theme/Navbar/index.tsx +++ b/site/src/theme/Navbar/index.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import NavbarLayout from '@theme/Navbar/Layout'; -import NavbarContent from '@theme/Navbar/Content'; +import NavbarContent from "@theme/Navbar/Content"; +import NavbarLayout from "@theme/Navbar/Layout"; +import { JSX } from "react"; export default function Navbar(): JSX.Element { return ( diff --git a/site/static/formal-spec/base.css b/site/static/formal-spec/base.css index 9d2c0f529..1f7d7f579 100644 --- a/site/static/formal-spec/base.css +++ b/site/static/formal-spec/base.css @@ -9,7 +9,8 @@ --hover-bg: rgba(0, 119, 204, 0.1); --hover-transform: translateY(-1px); --hover-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; --content-padding: 40px; --background-color: #ffffff; --code-bg: #f6f8fa; @@ -97,6 +98,7 @@ header { } /* Header button/link shared styles */ + .back-button, .github-link, .theme-toggle, @@ -416,8 +418,10 @@ a:hover { } /* Code blocks */ -pre, code { - font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; +pre, +code { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, + monospace; background-color: var(--code-bg); color: var(--code-color); border-radius: 6px; @@ -447,25 +451,64 @@ pre code { } /* Syntax highlighting for Agda */ -.Keyword { color: var(--syntax-keyword); } -.String { color: var(--syntax-string); } -.Comment { color: var(--syntax-comment); } -.Function { color: var(--syntax-function); } -.InductiveConstructor { color: var(--syntax-class); } -.CoinductiveConstructor { color: var(--syntax-class); } -.Datatype { color: var(--syntax-class); } -.Field { color: var(--syntax-variable); } -.Bound { color: var(--code-color); } -.Generalizable { color: var(--syntax-variable); } -.Module { color: var(--syntax-keyword); } -.Number { color: var(--syntax-variable); } -.Postulate { color: var(--syntax-function); } -.Primitive { color: var(--syntax-keyword); } -.Record { color: var(--syntax-class); } -.Hole { color: var(--syntax-operator); background-color: rgba(255, 255, 0, 0.1); } -.Symbol { color: var(--syntax-operator); } -.PrimitiveType { color: var(--syntax-keyword); } -.Macro { color: var(--syntax-function); } +.Keyword { + color: var(--syntax-keyword); +} +.String { + color: var(--syntax-string); +} +.Comment { + color: var(--syntax-comment); +} +.Function { + color: var(--syntax-function); +} +.InductiveConstructor { + color: var(--syntax-class); +} +.CoinductiveConstructor { + color: var(--syntax-class); +} +.Datatype { + color: var(--syntax-class); +} +.Field { + color: var(--syntax-variable); +} +.Bound { + color: var(--code-color); +} +.Generalizable { + color: var(--syntax-variable); +} +.Module { + color: var(--syntax-keyword); +} +.Number { + color: var(--syntax-variable); +} +.Postulate { + color: var(--syntax-function); +} +.Primitive { + color: var(--syntax-keyword); +} +.Record { + color: var(--syntax-class); +} +.Hole { + color: var(--syntax-operator); + background-color: rgba(255, 255, 0, 0.1); +} +.Symbol { + color: var(--syntax-operator); +} +.PrimitiveType { + color: var(--syntax-keyword); +} +.Macro { + color: var(--syntax-function); +} /* Override Agda.css hover styles */ .Agda a[href]:hover { @@ -479,46 +522,46 @@ pre code { } /* Specific Agda syntax improvements for dark theme */ -:root.dark-theme .Agda .Keyword, +:root.dark-theme .Agda .Keyword, :root.dark-theme .Agda .Module, -:root.dark-theme .Agda .Pragma { - color: var(--syntax-keyword) !important; +:root.dark-theme .Agda .Pragma { + color: var(--syntax-keyword) !important; } :root.dark-theme .Agda .Symbol, -:root.dark-theme .Agda .Operator { - color: var(--syntax-operator) !important; +:root.dark-theme .Agda .Operator { + color: var(--syntax-operator) !important; } :root.dark-theme .Agda .InductiveConstructor, -:root.dark-theme .Agda .CoinductiveConstructor { - color: var(--syntax-variable) !important; +:root.dark-theme .Agda .CoinductiveConstructor { + color: var(--syntax-variable) !important; } :root.dark-theme .Agda .Datatype, :root.dark-theme .Agda .Record, :root.dark-theme .Agda .Primitive, -:root.dark-theme .Agda .PrimitiveType { - color: var(--syntax-class) !important; +:root.dark-theme .Agda .PrimitiveType { + color: var(--syntax-class) !important; } -:root.dark-theme .Agda .String { - color: var(--syntax-string) !important; +:root.dark-theme .Agda .String { + color: var(--syntax-string) !important; } -:root.dark-theme .Agda .Comment { - color: var(--syntax-comment) !important; +:root.dark-theme .Agda .Comment { + color: var(--syntax-comment) !important; } :root.dark-theme .Agda .Function, :root.dark-theme .Agda .Macro, -:root.dark-theme .Agda .Postulate { - color: var(--syntax-function) !important; +:root.dark-theme .Agda .Postulate { + color: var(--syntax-function) !important; } :root.dark-theme .Agda .Bound, -:root.dark-theme .Agda .Generalizable { - color: var(--code-color) !important; +:root.dark-theme .Agda .Generalizable { + color: var(--code-color) !important; } /* Code line numbers styling */ @@ -759,8 +802,8 @@ pre.Agda.has-copy-button { width: 40px; padding-right: 8px; } - + .code-content { padding-left: 8px; } -} \ No newline at end of file +} diff --git a/site/static/img/decentralized.svg b/site/static/img/decentralized.svg new file mode 100644 index 000000000..3e79c2ecd --- /dev/null +++ b/site/static/img/decentralized.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/static/img/flexible.svg b/site/static/img/flexible.svg deleted file mode 100644 index 34b3335c4..000000000 --- a/site/static/img/flexible.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -