diff --git a/arbitrum-docs/das/daserver-instructions.mdx b/arbitrum-docs/das/daserver-instructions.mdx index 1995eac1a..c71be2fe2 100644 --- a/arbitrum-docs/das/daserver-instructions.mdx +++ b/arbitrum-docs/das/daserver-instructions.mdx @@ -41,7 +41,7 @@ An in-memory cache can be enabled to avoid needing to access underlying storage ## Image: -`offchainlabs/nitro-node:v2.0.9-51f9452` +`@latestNitroNodeImage@` ## Usage of daserver @@ -183,7 +183,7 @@ spec: mkdir -p /home/user/data/keys /usr/local/bin/datool keygen --dir /home/user/data/keys sleep infinity - image: offchainlabs/nitro-node:v2.0.9-51f9452 + image: @latestNitroNodeImage@ imagePullPolicy: Always resources: limits: @@ -238,7 +238,7 @@ spec: mkdir -p /home/user/data/badgerdb /usr/local/bin/daserver --data-availability.l1-node-url --enable-rpc --rpc-addr '0.0.0.0' --enable-rest --rest-addr '0.0.0.0' --log-level 3 --data-availability.local-db-storage.enable --data-availability.local-db-storage.data-dir /home/user/data/badgerdb --data-availability.local-db-storage.discard-after-timeout --data-availability.s3-storage.enable --data-availability.s3-storage.access-key "" --data-availability.s3-storage.bucket --data-availability.s3-storage.region --data-availability.s3-storage.secret-key "" --data-availability.s3-storage.object-prefix "YOUR OBJECT KEY PREFIX/" --data-availability.s3-storage.discard-after-timeout --data-availability.key.key-dir /home/user/data/keys --data-availability.local-cache.enable --data-availability.rest-aggregator.enable --data-availability.rest-aggregator.online-url-list "https://nova.arbitrum.io/das-servers" --data-availability.sequencer-inbox-address '0x211e1c4c7f1bf5351ac850ed10fd68cffcf6c21b' - image: offchainlabs/nitro-node:v2.0.9-51f9452 + image: @latestNitroNodeImage@ imagePullPolicy: Always resources: limits: @@ -339,7 +339,7 @@ spec: mkdir -p /home/user/data/syncState /usr/local/bin/daserver --data-availability.l1-node-url --enable-rest --rest-addr '0.0.0.0' --log-level 3 --data-availability.local-db-storage.enable --data-availability.local-db-storage.data-dir /home/user/data/badgerdb --data-availability.s3-storage.enable --data-availability.s3-storage.access-key "" --data-availability.s3-storage.bucket --data-availability.s3-storage.region --data-availability.s3-storage.secret-key "" --data-availability.s3-storage.object-prefix "YOUR OBJECT KEY PREFIX/" --data-availability.local-cache.enable --data-availability.rest-aggregator.enable --data-availability.rest-aggregator.urls "http://your-committee-member.svc.cluster.local:9877" --data-availability.rest-aggregator.online-url-list "https://nova.arbitrum.io/das-servers" --data-availability.rest-aggregator.sync-to-storage.eager --data-availability.rest-aggregator.sync-to-storage.eager-lower-bound-block 15025611 --data-availability.sequencer-inbox-address '0x211e1c4c7f1bf5351ac850ed10fd68cffcf6c21b' --data-availability.rest-aggregator.sync-to-storage.state-dir /home/user/data/syncState - image: offchainlabs/nitro-node:v2.0.9-51f9452 + image: @latestNitroNodeImage@ imagePullPolicy: Always resources: limits: @@ -407,7 +407,7 @@ spec: mkdir -p /home/user/data/ipfsRepo mkdir -p /home/user/data/syncState /usr/local/bin/daserver --data-availability.l1-node-url --enable-rest --rest-addr '0.0.0.0' --log-level 3 --data-availability.ipfs-storage.enable --data-availability.ipfs-storage.repo-dir /home/user/data/ipfsRepo --data-availability.rest-aggregator.enable --data-availability.rest-aggregator.urls "http://your-committee-member.svc.cluster.local:9877" --data-availability.rest-aggregator.online-url-list "https://nova.arbitrum.io/das-servers" --data-availability.rest-aggregator.sync-to-storage.eager --data-availability.rest-aggregator.sync-to-storage.eager-lower-bound-block 15025611 --data-availability.sequencer-inbox-address '0x211e1c4c7f1bf5351ac850ed10fd68cffcf6c21b' --data-availability.rest-aggregator.sync-to-storage.state-dir /home/user/data/syncState - image: offchainlabs/nitro-node:v2.0.9-51f9452 + image: @latestNitroNodeImage@ imagePullPolicy: Always resources: limits: diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index dd8ba2a2b..9dd0dc019 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -1,16 +1,13 @@ import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; import Link from '@docusaurus/Link'; -import { useColorMode } from '@docusaurus/theme-common'; + +import styles from './styles.module.css'; type FeatureItem = { title: string; Svg: React.ComponentType>; - description: JSX.Element; + description: string; href?: string; - addBackground?: boolean; - animate?: boolean; }; const FeatureList: FeatureItem[] = [ @@ -18,95 +15,65 @@ const FeatureList: FeatureItem[] = [ title: 'Quickstart: Stylus', Svg: require('@site/static/img/stylus-logo.svg').default, href: '/stylus/stylus-quickstart', - description: <>Use Stylus to write an EVM-compatible smart contract in Rust., + description: 'Use Stylus to write an EVM-compatible smart contract in Rust.', }, { title: 'Quickstart: Build a dApp (Solidity)', - Svg: require('@site/static/img/cupcake.svg').default, + Svg: require('@site/static/img/cupcake_icon.svg').default, href: '/for-devs/quickstart-solidity-hardhat', - description: ( - <> - Deploy a cupcake vending machine contract locally, then to Arbitrum Goerli, then to Arbitrum - Mainnet. - - ), + description: + 'Deploy a cupcake vending machine contract locally, then to Arbitrum Goerli, then to Arbitrum Mainnet.', }, { title: 'Quickstart: Run a node', Svg: require('@site/static/img/node.svg').default, href: '/node-running/quickstart-running-a-node', - description: <>Learn how to run a node to interact with any Arbitrum network., + description: 'Learn how to run a node to interact with any Arbitrum network.', }, { title: 'Quickstart: Bridge tokens', - Svg: require('@site/static/img/layer-up.svg').default, + Svg: require('@site/static/img/bridge_token.svg').default, href: '/getting-started-users', - description: ( - <> - Learn how to transfer tokens between Ethereum's L1 chain and Arbitrum's L2 chains using - Arbitrum Bridge. - - ), + description: + "Learn how to transfer tokens between Ethereum's L1 chain and Arbitrum's L2 chains using Arbitrum Bridge.", }, { title: 'The Arbitrum DAO', - Svg: require('@site/static/img/logo.svg').default, + Svg: require('@site/static/img/logo_black.svg').default, href: 'https://docs.arbitrum.foundation/', - description: ( - <>Learn about the decentralized organization that governs the One and Nova chains. - ), + description: 'Learn about the decentralized organization that governs the One and Nova chains.', }, { title: 'Quickstart: Launch an Orbit chain', - Svg: require('@site/static/img/orbit-galaxy.svg').default, + Svg: require('@site/static/img/quickstart.svg').default, href: '/launch-orbit-chain/orbit-quickstart', - description: ( - <> - Learn how to launch a local Orbit chain that settles to the public Arbitrum Goerli testnet. - - ), + description: + 'Learn how to launch a local Orbit chain that settles to the public Arbitrum Goerli testnet.', }, ]; -function Feature({ title, Svg, description, href, addBackground, animate }: FeatureItem) { - const { colorMode } = useColorMode(); - const isDarkTheme = colorMode === 'dark'; - const textStyle = { color: isDarkTheme ? 'white' : 'black' }; +function Feature({ title, Svg, description, href }: FeatureItem) { return ( -
- -
- + +
+
+
-
-

{title}

-

{description}

-
- -
+

{title}

+

{description}

+
+ ); } export default function HomepageFeatures(): JSX.Element { return (
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
+

Resources

+
+ {FeatureList.map((props, idx) => ( + + ))}
); diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index 9fb5cf1f4..8bcc16219 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -1,38 +1,86 @@ .features { display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + flex-direction: column; + gap: 20px; + font-family: var(--arbitrum-font-family); + padding: 20px 20px 150px; + margin-top: 80px; } -.featureSvg { - height: 150px; - width: 150px; +.featureCardsWrapper { + display: flex; + flex-direction: column; + gap: 20px; +} + +.featureCard { + display: flex; + flex-direction: column; + gap: 20px; + height: 100%; + color: var(--arbitrum-text); + background: var(--arbitrum-background-opacity); + padding: 20px 70px 20px 20px; + border-radius: var(--arbitrum-border-radius); +} + +@media screen and (min-width: 1024px) { + .features { + display: grid; + grid-auto-flow: column; + grid-template-columns: 1fr 3fr; + gap: 20px; + } + .featureCardsWrapper { + display: grid; + grid-template-columns: repeat(3, calc(33.33% - 20px * 2 / 3)); + } + .featureCard { + padding: 20px 50px 20px 20px; + } +} + +.features h3, +.features p { + line-height: normal; + margin: 0; } -.landingPageLink { - background-color: black; - color: black; +.features h3 { + font-size: 22px; + font-weight: 400; +} + +.features p { + font-size: var(--arbitrum-font-size); + font-weight: 500; + opacity: 50%; +} + +.features a:hover { text-decoration: none; + opacity: 80%; } -#animate { - opacity: 0; - animation-duration: 1.2s; - animation-name: animate-pop; - animation-timing-function: cubic-bezier(0.23, 0.53, 0.74, 2.2); - animation-delay: 0.8s; - animation-fill-mode: forwards; +.features a:nth-child(1) .featureCard { + background: var(--arbitrum-color-primary); } -@keyframes animate-pop { - 0% { - opacity: 0; - transform: scale(0.1, 0.1); - } +.svgWrapper { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; + background: var(--arbitrum-background-opacity); + border-radius: var(--arbitrum-border-radius-sm); +} - 100% { - opacity: 1; - transform: scale(1, 1); - } +.featureSvg { + height: 24px; + width: 24px; +} + +:global([data-theme='dark']) .featureSvg { + filter: invert(1); } diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 101470baa..98cd03fe8 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1,3 +1,38 @@ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu52xP.ttf) format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAw.ttf) format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlvAw.ttf) format('truetype'); +} @font-face { font-family: 'Space Grotesk'; font-style: normal; @@ -34,9 +69,19 @@ src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf) format('truetype'); } .spacefont { - font-family: "Space Grotesk", sans-serif; + font-family: 'Space Grotesk', sans-serif; } :root { + --arbitrum-font-size: 14px; + --arbitrum-border-radius-sm: 5px; + --arbitrum-border-radius: 10px; + --arbitrum-font-family: 'Roboto', sans-serif; + --arbitrum-color-primary: #8594b4; + --arbitrum-background-opacity: rgba(0, 0, 0, 0.05); + --arbitrum-text: black; + --arbitrum-secondary-text: rgba(0, 0, 0, 0.5); + --arbitrum-primary-button-bg: black; + --arbitrum-primary-button-text: white; --ifm-color-primary: #007bdd; --ifm-color-primary-dark: #295f78; --ifm-color-primary-darker: #275771; @@ -49,6 +94,7 @@ --ifm-code-font-size: 95%; --ifm-global-radius: 2px; --ifm-navbar-item-padding-horizontal: 0.6rem; + --ifm-heading-font-family: 'Roboto', sans-serif; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-color-info-dark: #359aec; --ifm-color-info-contrast-background: #f0f8ff; @@ -58,7 +104,13 @@ --tab-active-color-hover: hsl(217, 58%, 36%); --tab-gray: #ddd; } -[data-theme="dark"] { +[data-theme='dark'] { + --arbitrum-color-primary: #152c4e; + --arbitrum-background-opacity: rgba(255, 255, 255, 0.05); + --arbitrum-text: white; + --arbitrum-secondary-text: rgba(255, 255, 255, 0.5); + --arbitrum-primary-button-bg: white; + --arbitrum-primary-button-text: black; --ifm-color-primary: #28a0f0; --ifm-color-primary-dark: #2182af; --ifm-color-primary-darker: #1f7fa5; @@ -66,27 +118,28 @@ --ifm-color-primary-light: #29b0d5; --ifm-color-primary-lighter: #32b4d8; --ifm-color-primary-lightest: #4fbcdd; + --ifm-color-content: white; --ifm-link-color: #51b2ff; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --prysm-pink: var(--prysm-pink-light); --tab-gray: #aaa; } -[data-theme="dark"] .dynamic-content-tabs .tabgroup-with-label .tabs__item:first-child { +[data-theme='dark'] .dynamic-content-tabs .tabgroup-with-label .tabs__item:first-child { color: #eee; } -[data-theme="dark"] .dynamic-content-tabs .tabgroup-with-label .tabs__item:first-child:hover { +[data-theme='dark'] .dynamic-content-tabs .tabgroup-with-label .tabs__item:first-child:hover { background-color: transparent !important; } -[data-theme="dark"] .troubleshooting-report-area > span { +[data-theme='dark'] .troubleshooting-report-area > span { color: #ddd !important; } -[data-theme="dark"] .checklist .task .input-container input:checked + .done { +[data-theme='dark'] .checklist .task .input-container input:checked + .done { background-color: #002862; } -[data-theme="dark"] .checklist .task .guidance-container label { +[data-theme='dark'] .checklist .task .guidance-container label { color: white; } -[data-theme="dark"] .checklist .task .guidance-container > p { +[data-theme='dark'] .checklist .task .guidance-container > p { color: white; } /* MIXINS */ @@ -251,7 +304,7 @@ article .markdown .footnotes { margin-top: 50px; } article .markdown .footnotes:before { - content: "Footnotes:"; + content: 'Footnotes:'; font-weight: 600; margin-top: 30px; display: inline-block; @@ -266,35 +319,35 @@ article .markdown p > code { border-radius: 3px; background-color: rgba(150, 150, 150, 0.2); } -[class*="launch-a-chain"] table { +[class*='launch-a-chain'] table { font-size: 13px; margin-top: 20px; margin-bottom: 30px; } -[class*="launch-a-chain"] table td { +[class*='launch-a-chain'] table td { padding: 15px; } -[class*="orbit-quickstart"] table, -[class*="orbit-gentle-introduction"] table, -[class*="contribute"] table { +[class*='orbit-quickstart'] table, +[class*='orbit-gentle-introduction'] table, +[class*='contribute'] table { font-size: 12.5px; margin-top: 20px; margin-bottom: 30px; } -[class*="orbit-quickstart"] table td, -[class*="orbit-gentle-introduction"] table td, -[class*="contribute"] table td { +[class*='orbit-quickstart'] table td, +[class*='orbit-gentle-introduction'] table td, +[class*='contribute'] table td { padding: 10px; } -[class*="quickstart-solidity-hardhat"] table { +[class*='quickstart-solidity-hardhat'] table { font-size: 12.5px; margin-top: 20px; margin-bottom: 30px; } -[class*="quickstart-solidity-hardhat"] table td { +[class*='quickstart-solidity-hardhat'] table td { padding: 10px; } -[class*="quickstart-solidity-hardhat"] .vending-machine { +[class*='quickstart-solidity-hardhat'] .vending-machine { border-radius: 5px; display: flex; flex-direction: column; @@ -310,13 +363,13 @@ article .markdown p > code { background-color: rgba(150, 150, 150, 0.2); position: relative; } -[class*="quickstart-solidity-hardhat"] .vending-machine h4 { +[class*='quickstart-solidity-hardhat'] .vending-machine h4 { text-transform: uppercase; color: var(--ifm-color-content); margin: 0; font-family: monospace; } -[class*="quickstart-solidity-hardhat"] .vending-machine .subheader { +[class*='quickstart-solidity-hardhat'] .vending-machine .subheader { font-family: monospace; text-transform: uppercase; color: #828282; @@ -324,7 +377,7 @@ article .markdown p > code { font-weight: 800; margin-bottom: 20px; } -[class*="quickstart-solidity-hardhat"] .vending-machine label { +[class*='quickstart-solidity-hardhat'] .vending-machine label { font-family: monospace; text-transform: uppercase; color: #828282; @@ -334,19 +387,19 @@ article .markdown p > code { display: block; text-align: left; } -[class*="quickstart-solidity-hardhat"] .vending-machine input { +[class*='quickstart-solidity-hardhat'] .vending-machine input { padding: 10px; width: 90%; margin-bottom: 5px; font-size: 11px; font-family: monospace; } -[class*="quickstart-solidity-hardhat"] .vending-machine #cupcake { +[class*='quickstart-solidity-hardhat'] .vending-machine #cupcake { display: block; font-size: 30px; margin-bottom: 10px; } -[class*="quickstart-solidity-hardhat"] .vending-machine #cupcake-please { +[class*='quickstart-solidity-hardhat'] .vending-machine #cupcake-please { color: white; background-color: #007bdd; padding: 10px 20px; @@ -355,31 +408,31 @@ article .markdown p > code { margin-top: 20px; margin-bottom: 10px; } -[class*="quickstart-solidity-hardhat"] .vending-machine #cupcake-please:hover { +[class*='quickstart-solidity-hardhat'] .vending-machine #cupcake-please:hover { cursor: pointer; opacity: 0.9; } -[class*="quickstart-solidity-hardhat"] .vending-machine #refresh-balance { +[class*='quickstart-solidity-hardhat'] .vending-machine #refresh-balance { font-size: 11px; display: block; margin-bottom: 10px; } -[class*="quickstart-solidity-hardhat"] .vending-machine #refresh-balance:hover { +[class*='quickstart-solidity-hardhat'] .vending-machine #refresh-balance:hover { cursor: pointer; opacity: 0.9; } -[class*="quickstart-solidity-hardhat"] .vending-machine #balance-wrapper { +[class*='quickstart-solidity-hardhat'] .vending-machine #balance-wrapper { padding: 10px 0px; font-size: 11px; margin: 0; font-family: monospace; } -[class*="quickstart-solidity-hardhat"] .vending-machine #balance-wrapper > span:first-child { +[class*='quickstart-solidity-hardhat'] .vending-machine #balance-wrapper > span:first-child { font-weight: 600; padding-right: 5px; } -[class*="quickstart-solidity-hardhat"] .vending-machine #error-indicator, -[class*="quickstart-solidity-hardhat"] .vending-machine #success-indicator { +[class*='quickstart-solidity-hardhat'] .vending-machine #error-indicator, +[class*='quickstart-solidity-hardhat'] .vending-machine #success-indicator { background: #aa0000; width: 10px; height: 10px; @@ -389,31 +442,17 @@ article .markdown p > code { right: 15px; display: none; } -[class*="quickstart-solidity-hardhat"] .vending-machine #error-indicator.visible, -[class*="quickstart-solidity-hardhat"] .vending-machine #success-indicator.visible { +[class*='quickstart-solidity-hardhat'] .vending-machine #error-indicator.visible, +[class*='quickstart-solidity-hardhat'] .vending-machine #success-indicator.visible { display: block; } -[class*="quickstart-solidity-hardhat"] .vending-machine #success-indicator { +[class*='quickstart-solidity-hardhat'] .vending-machine #success-indicator { background: #00a400; display: block; } -[class*="quickstart-solidity-hardhat"] .vending-machine .hidden { +[class*='quickstart-solidity-hardhat'] .vending-machine .hidden { display: none; } -.hero--primary .hero__title { - margin-bottom: 20px; -} -.features_src-components-HomepageFeatures-styles-module .text--center > h3, -.landingPageLink_aBTe .text--center > h3 { - margin-top: 10px; - margin-bottom: 5px; -} -.features_src-components-HomepageFeatures-styles-module svg, -.landingPageLink_aBTe svg { - height: 130px; - width: 130px; - margin-top: 10px; -} /* used to hide all but the topmost tabs when using the multidimensional content widget */ .hidden { visibility: hidden !important; @@ -497,7 +536,7 @@ article .markdown p > code { background: transparent; color: transparent; display: inline-block; - content: "Content updated!"; + content: 'Content updated!'; } .dynamic-content-tabs .tabgroup-with-label.updated:after { color: var(--tab-active-color); @@ -528,7 +567,7 @@ article .markdown p > code { /* for Firefox */ overflow-x: scroll; padding: 15px; - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; background-color: #f6f6f6; color: #444 !important; text-align: left; @@ -584,7 +623,7 @@ rows .troubleshooting-report-area > textarea::placeholder { min-width: 100%; font-size: 12px; padding: 20px; - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; background-color: #292929; color: white; text-align: left; @@ -660,24 +699,24 @@ rows .troubleshooting-report-area > textarea::placeholder { .checklist input { margin-right: 5px; } -[data-faq-origin-slug="node-faq"] { +[data-faq-origin-slug='node-faq'] { /* CSS properties */ } -[data-faq-origin-slug="node-faq"] h3 { +[data-faq-origin-slug='node-faq'] h3 { font-size: 16px; margin-bottom: 5px; } h2.anchor { font-size: 24px; } -[class*="announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module"], +[class*='announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module'], .announcementBar_mb4j { - font-family: "Space Grotesk", sans-serif; + font-family: 'Space Grotesk', sans-serif; color: white !important; background-color: #2c374b !important; font-size: 14px !important; } -[class*="announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module"] a, +[class*='announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module'] a, .announcementBar_mb4j a { color: #00e5ff !important; text-decoration: none !important; @@ -712,6 +751,9 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { display: flex; justify-content: center; } +.navbar { + box-shadow: none; +} .navbar__item { font-size: clamp(0.8rem, 1.25vw, 1rem); line-height: 1.5; @@ -754,7 +796,7 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_NprFVc.ttf) format('truetype'); } .apply-fira-font { - font-family: "Fira Code", monospace; + font-family: 'Fira Code', monospace; } .theme-doc-sidebar-container .theme-doc-sidebar-menu { font-weight: 500; @@ -776,7 +818,7 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { border-bottom-right-radius: 0; } .theme-doc-sidebar-container > div > div > nav > ul > .theme-doc-sidebar-item-category > div > a { - font-family: "Fira Code", monospace; + font-family: 'Fira Code', monospace; font-weight: 700; font-size: 11.5px !important; border-bottom-left-radius: 0; diff --git a/website/src/css/custom.less b/website/src/css/custom.less index 30644f217..7f29e463d 100644 --- a/website/src/css/custom.less +++ b/website/src/css/custom.less @@ -1,12 +1,22 @@ // #region imports, variables, mixins, darkmode -@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); .spacefont { - font-family: "Space Grotesk", sans-serif; + font-family: 'Space Grotesk', sans-serif; } :root { + --arbitrum-font-size: 14px; + --arbitrum-border-radius-sm: 5px; + --arbitrum-border-radius: 10px; + --arbitrum-font-family: 'Roboto', sans-serif; + --arbitrum-color-primary: #8594b4; + --arbitrum-background-opacity: rgba(0, 0, 0, 0.05); + --arbitrum-text: black; + --arbitrum-secondary-text: rgba(0, 0, 0, 0.5); + --arbitrum-primary-button-bg: black; + --arbitrum-primary-button-text: white; --ifm-color-primary: #007bdd; --ifm-color-primary-dark: #295f78; --ifm-color-primary-darker: #275771; @@ -19,6 +29,7 @@ --ifm-code-font-size: 95%; --ifm-global-radius: 2px; --ifm-navbar-item-padding-horizontal: 0.6rem; + --ifm-heading-font-family: 'Roboto', sans-serif; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-color-info-dark: #359aec; --ifm-color-info-contrast-background: #f0f8ff; @@ -29,7 +40,13 @@ --tab-gray: #ddd; } -[data-theme="dark"] { +[data-theme='dark'] { + --arbitrum-color-primary: #152c4e; + --arbitrum-background-opacity: rgba(255, 255, 255, 0.05); + --arbitrum-text: white; + --arbitrum-secondary-text: rgba(255, 255, 255, 0.5); + --arbitrum-primary-button-bg: white; + --arbitrum-primary-button-text: black; --ifm-color-primary: #28a0f0; --ifm-color-primary-dark: #2182af; --ifm-color-primary-darker: #1f7fa5; @@ -37,6 +54,7 @@ --ifm-color-primary-light: #29b0d5; --ifm-color-primary-lighter: #32b4d8; --ifm-color-primary-lightest: #4fbcdd; + --ifm-color-content: white; --ifm-link-color: #51b2ff; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --prysm-pink: var(--prysm-pink-light); @@ -57,7 +75,7 @@ } .troubleshooting-report-area { - >span { + > span { color: #ddd !important; } } @@ -65,7 +83,7 @@ .checklist { .task { .input-container { - input:checked+.done { + input:checked + .done { background-color: #002862; } } @@ -75,7 +93,7 @@ color: white; } - >p { + > p { color: white; } } @@ -210,7 +228,7 @@ display: inline-block; vertical-align: top; height: 25px; - max-width: calc(100% ~"-" 33px); + max-width: calc(100% ~'-' 33px); } .badge-avatar { @@ -245,7 +263,7 @@ article { font-size: 30px; } - >h3 { + > h3 { font-size: 21px; margin-top: 50px; margin-bottom: 15px; @@ -305,7 +323,7 @@ article { margin-top: 50px; &:before { - content: "Footnotes:"; + content: 'Footnotes:'; font-weight: 600; margin-top: 30px; display: inline-block; @@ -317,7 +335,7 @@ article { } } - p>code { + p > code { font-size: 13px; padding: 3px 6px; border-radius: 3px; @@ -330,21 +348,21 @@ article { // #region quickstart styles -[class*="launch-a-chain"] { +[class*='launch-a-chain'] { table { .medium-table; } } -[class*="orbit-quickstart"], -[class*="orbit-gentle-introduction"], -[class*="contribute"] { +[class*='orbit-quickstart'], +[class*='orbit-gentle-introduction'], +[class*='contribute'] { table { .small-table; } } -[class*="quickstart-solidity-hardhat"] { +[class*='quickstart-solidity-hardhat'] { table { .small-table; } @@ -438,7 +456,7 @@ article { margin: 0; font-family: monospace; - >span:first-child { + > span:first-child { font-weight: 600; padding-right: 5px; } @@ -474,27 +492,6 @@ article { // #endregion // #region landing page / hero styles - -.hero--primary { - .hero__title { - margin-bottom: 20px; - } -} - -.features_src-components-HomepageFeatures-styles-module, -.landingPageLink_aBTe { - .text--center>h3 { - margin-top: 10px; - margin-bottom: 5px; - } - - svg { - height: 130px; - width: 130px; - margin-top: 10px; - } -} - // #endregion // #region dynamic content tabs @@ -588,7 +585,7 @@ article { background: transparent; color: transparent; display: inline-block; - content: "Content updated!"; + content: 'Content updated!'; } &.updated { @@ -606,14 +603,14 @@ article { .troubleshooting-report-area { text-align: left; - >p { + > p { font-weight: bold; margin-bottom: 0; margin-top: 0; font-size: 16px; } - >span { + > span { display: block; margin-bottom: 0; margin-top: 0; @@ -621,15 +618,15 @@ article { color: #333; } - >code { + > code { font-size: 13px; } - >textarea { + > textarea { .invisible-horizontal-scroll; padding: 15px; - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; background-color: #f6f6f6; color: #444 !important; text-align: left; @@ -676,8 +673,8 @@ article { min-width: 100%; font-size: 12px; padding: 20px; - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; background-color: #292929; color: white; text-align: left; @@ -719,7 +716,7 @@ article { transition-delay: 0s; } - input:checked+.done { + input:checked + .done { position: absolute; top: 0; bottom: 0; @@ -742,7 +739,7 @@ article { font-weight: bold; } - >p, + > p, p { font-size: 14px; line-height: 20px; @@ -766,8 +763,7 @@ article { // #endregion -[data-faq-origin-slug="node-faq"] { - +[data-faq-origin-slug='node-faq'] { /* CSS properties */ h3 { font-size: 16px; @@ -780,7 +776,7 @@ h2.anchor { } // #region banner -[class*="announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module"], +[class*='announcementBar_node_modules-@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module'], .announcementBar_mb4j { .spacefont; color: white !important; @@ -816,7 +812,7 @@ h2.anchor { font-size: 24px; } - .markdown>h3 { + .markdown > h3 { font-size: 18px; margin-top: 35px; margin-bottom: 10px; @@ -832,7 +828,9 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { display: flex; justify-content: center; } - +.navbar { + box-shadow: none; +} .navbar__item { font-size: clamp(0.8rem, 1.25vw, 1rem); line-height: 1.5; @@ -840,19 +838,17 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { padding-bottom: 0; } - // #region consolidated-sidebar-prototype -@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); -@fira-font-family: "Fira Code", monospace; +@fira-font-family: 'Fira Code', monospace; .apply-fira-font { font-family: @fira-font-family; } .theme-doc-sidebar-container { - .theme-doc-sidebar-menu { font-weight: 500; font-size: 13px; @@ -865,22 +861,20 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { } } - >div>div { - - >nav>ul { + > div > div { + > nav > ul { // the wrapper around all root sidebar items - - >.theme-doc-sidebar-item-category { + > .theme-doc-sidebar-item-category { margin-top: 20px; margin-bottom: 50px; - >div { + > div { border-bottom: 1px solid rgba(150, 150, 150, 0.1); border-bottom-left-radius: 0; border-bottom-right-radius: 0; - >a { + > a { .apply-fira-font; font-weight: 700; font-size: 11.5px !important; @@ -892,7 +886,7 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { } } - >ul { + > ul { padding-left: 0 !important; } } @@ -904,4 +898,4 @@ article a:not([data-quicklook-from]):not(.footnote-ref) { } } -// #endregion \ No newline at end of file +// #endregion diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 23e3215bf..8b9ebe8e9 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; @@ -15,17 +14,13 @@ function HomepageHeader(props) { const location = useLocation(); return ( -
-
- {props.notFound ? <>page '{location.pathname}' not found 🤷‍♂️ : null} -

{siteConfig.title}

- {/*

{siteConfig.tagline}

*/} -
- - A gentle introduction to Arbitrum 🔵 - -
-
+
+ {props.notFound ? <>page '{location.pathname}' not found 🤷‍♂️ : null} +

{siteConfig.title}

+ {/*

{siteConfig.tagline}

*/} + + +
); } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 46f393847..e2c74a671 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -17,21 +17,50 @@ } .heroBanner { - padding: 4rem 0; - text-align: center; position: relative; - overflow: hidden; - background-color: #28a0f0; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + height: 350px; + background-color: var(--arbitrum-color-primary); + border-radius: var(--arbitrum-border-radius); + padding: 20px; + margin: 0 20px; +} + +.heroTitle { + position: absolute; + top: 50%; + color: var(--arbitrum-text); + font-size: 36px; + font-weight: 400; + font-family: var(--arbitrum-font-family); + margin-bottom: auto; + transform: translateY(-50%); } -@media screen and (max-width: 996px) { +@media screen and (max-width: 1023px) { .heroBanner { - padding: 2rem; + height: 400px; + } + .heroTitle { + font-size: 28px; } } -.buttons { - display: flex; - align-items: center; - justify-content: center; +.heroBanner .button { + font-size: 14px; + font-weight: 500; + font-family: var(--arbitrum-font-family); + color: var(--arbitrum-primary-button-text); + background: var(--arbitrum-primary-button-bg); + padding: 12px; + border-radius: var(--arbitrum-border-radius-sm); + border: none; + cursor: pointer; +} + +.heroBanner .button:hover { + opacity: 70%; } diff --git a/website/src/remark/variable-injector.js b/website/src/remark/variable-injector.js index 0224117bb..fa5b88aa2 100644 --- a/website/src/remark/variable-injector.js +++ b/website/src/remark/variable-injector.js @@ -19,11 +19,11 @@ const plugin = (options) => { // visit() will match all nodes form the AST that have one of the types specified // in the second argument. // In those nodes, we want to inject variables in different fields: - // - For 'text' and 'code' nodes, we'll look in the "value" property + // - For 'text' 'code' and 'inlineCode' nodes, we'll look in the "value" property // - For 'link' and 'definition' nodes, we'll look in the "url" property // Nodes generated in AST are referenced here: https://github.com/syntax-tree/mdast // Note: to "visit" a node, reference it here in camelCase - visit(ast, ['text', 'code', 'link', 'definition'], (node) => { + visit(ast, ['text', 'code', 'inlineCode', 'link', 'definition'], (node) => { let value; switch (node.type) { case 'link': @@ -33,6 +33,7 @@ const plugin = (options) => { case 'text': case 'code': + case 'inlineCode': value = node.value; break; } @@ -57,6 +58,7 @@ const plugin = (options) => { case 'text': case 'code': + case 'inlineCode': node.value = value; break; } diff --git a/website/static/img/bridge_token.svg b/website/static/img/bridge_token.svg new file mode 100644 index 000000000..ea03a4b07 --- /dev/null +++ b/website/static/img/bridge_token.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/img/cupcake_icon.svg b/website/static/img/cupcake_icon.svg new file mode 100644 index 000000000..3b1281c75 --- /dev/null +++ b/website/static/img/cupcake_icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/img/logo_black.svg b/website/static/img/logo_black.svg new file mode 100644 index 000000000..bda94b915 --- /dev/null +++ b/website/static/img/logo_black.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/img/node.svg b/website/static/img/node.svg index be3037b82..34444def1 100644 --- a/website/static/img/node.svg +++ b/website/static/img/node.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/img/quickstart.svg b/website/static/img/quickstart.svg new file mode 100644 index 000000000..29907fb43 --- /dev/null +++ b/website/static/img/quickstart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/website/static/img/stylus-logo.svg b/website/static/img/stylus-logo.svg index 4587b7d29..dc2d62a00 100644 --- a/website/static/img/stylus-logo.svg +++ b/website/static/img/stylus-logo.svg @@ -3,19 +3,16 @@