diff --git a/src/components/buttons/button.js b/src/components/buttons/button.js index 30857538c..fa72e1e2d 100644 --- a/src/components/buttons/button.js +++ b/src/components/buttons/button.js @@ -1,30 +1,40 @@ -import * as React from "react" -import {Link} from "gatsby"; +import * as React from "react"; +import { Link } from "gatsby"; import { AnchorLink } from "gatsby-plugin-anchor-links"; export default class Button extends React.Component { - render() { - var buttonTitle = this.props.text + render() { + var buttonTitle = this.props.text; - if(this.props.class.includes('external') || this.props.class.includes('external-big')){ - buttonTitle = this.props.text + ''; - } - if(this.props.class === 'icon'){ - buttonTitle = this.props.text + ''; - } + if (this.props.class.includes("external") || this.props.class.includes("external-big")) { + buttonTitle = this.props.text + ''; + } + if (this.props.class === "icon") { + buttonTitle = this.props.text + ''; + } - if(this.props.type === 'internal'){ - return - } - else if(this.props.type === 'external' || this.props.type === 'external-big'){ - return - } - else if(this.props.type === 'anchor'){ - return ( - - {buttonTitle} - - ) - } - } + if (this.props.type === "internal") { + return ( + + ); + } else if (this.props.type === "external" || this.props.type === "external-big") { + return ( + + ); + } else if (this.props.type === "anchor") { + let path = typeof window !== "undefined" ? window.location.pathname : "/"; + return ( + + {buttonTitle} + + ); + } + } } diff --git a/src/components/footer.js b/src/components/footer.js index 2354f33ef..24ebdfab0 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,7 +1,6 @@ import * as React from "react"; import { Link } from "gatsby"; import addToMailchimp from "gatsby-plugin-mailchimp"; -import { AnchorLink } from "gatsby-plugin-anchor-links"; // import FooterBox from "../components/footer-box"; import FooterBox2 from "../components/footer-box-2"; diff --git a/src/components/modules/icon-card.js b/src/components/modules/icon-card.js index 0384c8ab6..dc36a67c7 100644 --- a/src/components/modules/icon-card.js +++ b/src/components/modules/icon-card.js @@ -6,7 +6,7 @@ import { AnchorLink } from "gatsby-plugin-anchor-links"; export default function IconCard({ imageClass, content, variant, iconPosition = "top", className, btnClass = "" }) { return (
-
+
{content.image && (
{content.title} @@ -15,71 +15,64 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
{content.title}
{content.text &&
{content.text}
} -
- {content.link && content.type === "internal" && ( -
+
+
+ {content.link && content.type === "internal" && ( +
diff --git a/src/datas/home/hero-section.js b/src/datas/home/hero-section.js index 834ca99c4..c375b2915 100644 --- a/src/datas/home/hero-section.js +++ b/src/datas/home/hero-section.js @@ -1,18 +1,18 @@ export const heroData = { - title: 'The first modular blockchain network', - text: 'Celestia is a modular data availability network that securely scales with the number of users, making it easy for anyone to launch their own blockchain.', - buttons:[ - { - text: 'Build modular', - class: 'simple plausible-event-name=Build_Modular_Button--Homepage-Hero', - type: 'internal', - url: '/developer-portal/' - }, - { - text: 'Explore', - class: 'white plausible-event-name=Explore_Button--Homepage-Hero', - type: 'anchor', - url: '/#explore-celestia' - } - ] -} + title: "The first modular blockchain network", + text: "Celestia is a modular data availability network that securely scales with the number of users, making it easy for anyone to launch their own blockchain.", + buttons: [ + { + text: "Build modular", + class: "simple plausible-event-name=Build_Modular_Button--Homepage-Hero", + type: "internal", + url: "/developer-portal/", + }, + { + text: "Explore", + class: "white plausible-event-name=Explore_Button--Homepage-Hero", + type: "anchor", + url: "explore-celestia", + }, + ], +}; diff --git a/src/datas/run-a-node/get-started.js b/src/datas/run-a-node/get-started.js deleted file mode 100644 index 7a9d0d3e2..000000000 --- a/src/datas/run-a-node/get-started.js +++ /dev/null @@ -1,36 +0,0 @@ -export const getStarted = { - title: "", - description: "", - items: [ - // { - // id: 1, - // title: "Beginner", - // text: "Kickstart your light node in 2-clicks. Only for m1 and m2 macs.", - // type: "external", - // link: { - // text: "Download app", - // url: "https://www.quasarapp.xyz/", - // }, - // }, - { - id: 2, - title: "Intermediate", - text: "Power up your light node with the command line and Docker, all in under 3 minutes.", - type: "external", - link: { - text: "Follow the guide", - url: "https://docs.celestia.org/nodes/docker-images/", - }, - }, - { - id: 3, - title: "Advanced", - text: "Spin up your light node through the command line.", - type: "external", - link: { - text: "Take me to the docs", - url: "https://docs.celestia.org/nodes/light-node/", - }, - }, - ], -}; diff --git a/src/datas/run-a-node/hero-data.js b/src/datas/run-a-node/hero-data.js index 45f9a546a..d5d0dabd6 100644 --- a/src/datas/run-a-node/hero-data.js +++ b/src/datas/run-a-node/hero-data.js @@ -1,18 +1,18 @@ export const heroData = { - title: "Run a light node", - text: "Join the collective powering an open internet. Run a light node on Celestia to secure your assets and become sovereign.", + title: "Directly verify", + text: "Join the network or integrate the Celestia light node.", buttons: [ { - text: "Show me how to start", + text: "Run a node", class: "simple", type: "anchor", url: "start-up-a-node", }, { - text: "Ask a question", + text: "Integrate", class: "white", type: "anchor", - url: "https://www.google.com/", - } + url: "integrate", + }, ], }; diff --git a/src/datas/run-a-node/join-the-network.js b/src/datas/run-a-node/join-the-network.js new file mode 100644 index 000000000..5890512f2 --- /dev/null +++ b/src/datas/run-a-node/join-the-network.js @@ -0,0 +1,38 @@ +export const joinTheNetwork = { + title: "Join the network", + items: [ + { + id: 1, + title: "Beginner", + text: "Deploy a light node in two commands with Vimana’s on-demand hardware.", + type: "external", + image: "run-a-node/beginner-image.png", + link: { + text: "Deploy on Vimana", + url: "https://docs.vistara.dev/the-vistara-workflow/getting-started", + }, + }, + { + id: 2, + title: "Intermediate", + text: "Power up a light node in under 3 minutes with Docker.", + type: "external", + image: "run-a-node/intermediate-image.png", + link: { + text: "Follow the tutorial", + url: "https://docs.celestia.org/nodes/docker-images", + }, + }, + { + id: 3, + title: "Advanced", + text: "Start a light node with the command line.", + type: "external", + image: "run-a-node/advanced-image.png", + link: { + text: "Read the guide", + url: "https://docs.celestia.org/nodes/light-node", + }, + }, + ], +}; diff --git a/src/datas/run-a-node/light-node.js b/src/datas/run-a-node/light-node.js new file mode 100644 index 000000000..650bf2748 --- /dev/null +++ b/src/datas/run-a-node/light-node.js @@ -0,0 +1,45 @@ +export const lightNode = { + title: "Light nodes for developers", + button: { + text: "Start light node", + class: "simple", + type: "external", + url: "https://docs.celestia.org/nodes/light-node", + }, + description: "How developers can use a Celestia light node for their chain", + items: [ + { + id: 1, + title: "Publish data", + text: "Publish transaction data to Celestia’s DA network.", + type: "external", + image: "run-a-node/publish-image.png", + link: { + text: "Submit data to Celestia", + url: "https://docs.celestia.org/developers/node-tutorial", + }, + }, + { + id: 2, + title: "Retrieve data", + text: "Retrieve transaction data from Celestia’s DA network.", + type: "external", + image: "run-a-node/retrieve-image.png", + link: { + text: "Retrieve data from Celestia", + url: "https://docs.celestia.org/developers/node-tutorial#retrieving-data", + }, + }, + { + id: 3, + title: "Manage Tia wallet", + text: "Generate a Celestia wallet to store Tia and pay for publishing transaction data to Celestia.", + type: "external", + image: "run-a-node/manage-image.png", + link: { + text: "Setup wallet", + url: "https://docs.celestia.org/developers/celestia-node-key", + }, + }, + ], +}; diff --git a/src/datas/run-a-node/what-is-a-node.js b/src/datas/run-a-node/what-is-a-node.js new file mode 100644 index 000000000..a190f450c --- /dev/null +++ b/src/datas/run-a-node/what-is-a-node.js @@ -0,0 +1,8 @@ +export const whatIsANode = { + title: "What is a light node?", + text: ` +

Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways or RPC providers. Data availability sampling enables Celestia to securely increase throughput for rollups as new light nodes join the network over time.

+

Each rollup on Celestia uses a light node to directly publish and retrieve transaction data.

+ `, + image: "run-a-node/run-a-light-node-image-1.png", +}; diff --git a/src/images/BG/run-a-light-node-bg.png b/src/images/BG/run-a-light-node-bg.png new file mode 100644 index 000000000..db37abc48 Binary files /dev/null and b/src/images/BG/run-a-light-node-bg.png differ diff --git a/src/images/run-a-node/advanced-image.png b/src/images/run-a-node/advanced-image.png new file mode 100644 index 000000000..76a2bc9de Binary files /dev/null and b/src/images/run-a-node/advanced-image.png differ diff --git a/src/images/run-a-node/beginner-image.png b/src/images/run-a-node/beginner-image.png new file mode 100644 index 000000000..3844b9da7 Binary files /dev/null and b/src/images/run-a-node/beginner-image.png differ diff --git a/src/images/run-a-node/icon-1.png b/src/images/run-a-node/icon-1.png deleted file mode 100755 index 09cf81f71..000000000 Binary files a/src/images/run-a-node/icon-1.png and /dev/null differ diff --git a/src/images/run-a-node/icon-2.png b/src/images/run-a-node/icon-2.png deleted file mode 100755 index 14c2d8781..000000000 Binary files a/src/images/run-a-node/icon-2.png and /dev/null differ diff --git a/src/images/run-a-node/icon-3.png b/src/images/run-a-node/icon-3.png deleted file mode 100755 index b5c91676a..000000000 Binary files a/src/images/run-a-node/icon-3.png and /dev/null differ diff --git a/src/images/run-a-node/intermediate-image.png b/src/images/run-a-node/intermediate-image.png new file mode 100644 index 000000000..5a7b29e93 Binary files /dev/null and b/src/images/run-a-node/intermediate-image.png differ diff --git a/src/images/run-a-node/manage-image.png b/src/images/run-a-node/manage-image.png new file mode 100644 index 000000000..33a3d34fc Binary files /dev/null and b/src/images/run-a-node/manage-image.png differ diff --git a/src/images/run-a-node/placeholder.png b/src/images/run-a-node/placeholder.png deleted file mode 100644 index 2eb4c861f..000000000 Binary files a/src/images/run-a-node/placeholder.png and /dev/null differ diff --git a/src/images/run-a-node/publish-image.png b/src/images/run-a-node/publish-image.png new file mode 100644 index 000000000..8d5806b7d Binary files /dev/null and b/src/images/run-a-node/publish-image.png differ diff --git a/src/images/run-a-node/retrieve-image.png b/src/images/run-a-node/retrieve-image.png new file mode 100644 index 000000000..20dc67778 Binary files /dev/null and b/src/images/run-a-node/retrieve-image.png differ diff --git a/src/images/run-a-node/run-a-light-node-bg.png b/src/images/run-a-node/run-a-light-node-bg.png new file mode 100644 index 000000000..db37abc48 Binary files /dev/null and b/src/images/run-a-node/run-a-light-node-bg.png differ diff --git a/src/images/run-a-node/run-a-light-node-image-1.png b/src/images/run-a-node/run-a-light-node-image-1.png new file mode 100644 index 000000000..f36cca335 Binary files /dev/null and b/src/images/run-a-node/run-a-light-node-image-1.png differ diff --git a/src/images/run-a-node/run-a-node-1.png b/src/images/run-a-node/run-a-node-1.png deleted file mode 100755 index 1d5572634..000000000 Binary files a/src/images/run-a-node/run-a-node-1.png and /dev/null differ diff --git a/src/images/run-a-node/run-a-node-2.png b/src/images/run-a-node/run-a-node-2.png deleted file mode 100755 index a5086a3a5..000000000 Binary files a/src/images/run-a-node/run-a-node-2.png and /dev/null differ diff --git a/src/images/run-a-node/run-a-node-3.png b/src/images/run-a-node/run-a-node-3.png deleted file mode 100755 index 5a511a17e..000000000 Binary files a/src/images/run-a-node/run-a-node-3.png and /dev/null differ diff --git a/src/pages/developer-portal.js b/src/pages/developer-portal.js index 59a4832dc..de457ca25 100644 --- a/src/pages/developer-portal.js +++ b/src/pages/developer-portal.js @@ -44,7 +44,7 @@ const DevPortal = () => { key={item.id} content={item} variant={"vertical anchor no-image"} - btnClass={`plausible-event-name=${item.title.replace(/ /g,"_")}--Developer_Portal-Hero_Section`} + btnClass={`plausible-event-name=${item.title.replace(/ /g, "_")}--Developer_Portal-Hero_Section`} /> ); })} @@ -52,7 +52,7 @@ const DevPortal = () => {
- +
@@ -66,7 +66,10 @@ const DevPortal = () => { key={item.id} content={item} variant={"vertical no-image"} - btnClass={`plausible-event-name=${item.title.replace(/ /g,"_")}--Developer_Portal-Developer_Resources_Section`} + btnClass={`plausible-event-name=${item.title.replace( + / /g, + "_" + )}--Developer_Portal-Developer_Resources_Section`} /> ); })} @@ -76,7 +79,7 @@ const DevPortal = () => { - + diff --git a/src/pages/index.js b/src/pages/index.js index 2673704a9..655c51b1a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -4,17 +4,14 @@ import Layout from "../components/layout"; import { Link } from "gatsby"; import "../scss/main.scss"; -import AdvantagesSection from "../components/sections/advantages-section"; import { heroData } from "../datas/home/hero-section"; -import { advantages } from "../datas/home/advantages"; + import { backers } from "../datas/home/backers"; import { FooterBoxes } from "../datas/home/content"; import { exploreCelestia } from "../datas/home/explore-celestia"; import { socialChannels } from "../datas/home/social-channels"; -import Card from "../components/modules/card"; -import HeroSection from "../components/sections/hero-section"; import BackersSection from "../components/sections/backers-sections"; import SignUp from "../components/modals/signUp"; import Image from "../components/imageComponent"; @@ -23,9 +20,7 @@ import CommunityItem from "../components/modules/community-item"; import { seoContent } from "../datas/home/seoContent"; import Seo from "../components/seo"; import HomeHeroSection from "../components/sections/home-hero-section"; -import TwoColumn from "../components/sections/two-column"; -import scaleImage from "../images/scale.png"; import TwoColumnH2 from "../components/sections/two-column-h2"; const IndexPage = () => { @@ -77,7 +72,7 @@ const IndexPage = () => { buttonSecondaryUrl={"/developer-portal#deploy"} /> -
+

Explore Celestia

diff --git a/src/pages/run-a-light-node.js b/src/pages/run-a-light-node.js index 2df5dbf89..fd9410193 100644 --- a/src/pages/run-a-light-node.js +++ b/src/pages/run-a-light-node.js @@ -1,19 +1,19 @@ import * as React from "react"; +import Image from "../components/imageComponent"; +import Button from "../components/buttons/button"; import { heroData } from "../datas/run-a-node/hero-data"; -import { getStarted } from "../datas/run-a-node/get-started"; -import { resources } from "../datas/run-a-node/resources"; +import { whatIsANode } from "../datas/run-a-node/what-is-a-node"; +import { joinTheNetwork } from "../datas/run-a-node/join-the-network"; +import { lightNode } from "../datas/run-a-node/light-node"; import { FooterBoxes } from "../datas/run-a-node/content"; import Layout from "../components/layout"; import IconCard from "../components/modules/icon-card"; -import { AnchorLink } from "gatsby-plugin-anchor-links"; import { seoContent } from "../datas/run-a-node/seoContent"; import Seo from "../components/seo"; -import image2 from "../images/run-a-node/run-a-node-2.png"; - const DevPortal = () => { return ( @@ -26,13 +26,9 @@ const DevPortal = () => {
- - {heroData.buttons[0].text} - + {heroData.buttons.map((button, index) => ( +
@@ -43,77 +39,62 @@ const DevPortal = () => {
- {""} + {whatIsANode.title}
-

What is a node?

-

- A node is a piece of software that runs on a device like a computer or a phone. Generally, a node verifies - that a blockchain works correctly and follows the rules. “Verifying” a blockchain can involve tasks like - checking transactions are correct. -

-

What is a Celestia light node?

-

- Light nodes sound like you might expect. They are nodes that can run on cheaper hardware and slower internet - connections than other node types. The lower requirements make it more accessible for anyone to run a node - that verifies the chain. -

+

{whatIsANode.title}

+
-
+
-

Start up a light node

-

- There are many ways to run a Celestia light node. Pick an option that fits you best to get your light node up and - running. -

-
-
-
- -
-
- {getStarted.description &&
{getStarted.description}
} -
- {getStarted.items.map(function (item) { - return ( - - ); - })} +

{joinTheNetwork.title}

+ {joinTheNetwork.description &&
{joinTheNetwork.description}
} +
+ {joinTheNetwork.items.map(function (item) { + return ( + + ); + })} +
-
+
-
-
-

{resources.title}

- {resources.description &&
{resources.description}
} +
+
+

{lightNode.title}

+
-
-
- {resources.items.map(function (item) { - return ( - - ); - })} -
+ {lightNode.description &&
{lightNode.description}
} +
+ {lightNode.items.map(function (item) { + return ( + + ); + })}
diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js index 6a79b0026..c6e7ec9fa 100644 --- a/src/pages/what-is-celestia.js +++ b/src/pages/what-is-celestia.js @@ -37,11 +37,12 @@ const WhatIsCelestia = () => { { rootMargin: "-30% 0px -30% 0px", threshold: 0 } ); - sectionRefs.current.forEach((ref) => observer.observe(ref)); + const currentRefs = sectionRefs.current; + currentRefs.forEach((ref) => observer.observe(ref)); return () => { - if (sectionRefs.current) { - sectionRefs.current.forEach((ref) => observer.unobserve(ref)); + if (currentRefs) { + currentRefs.forEach((ref) => observer.unobserve(ref)); } }; }, []); diff --git a/src/scss/pages/page-run-a-node.scss b/src/scss/pages/page-run-a-node.scss index de90eee1d..004a65012 100644 --- a/src/scss/pages/page-run-a-node.scss +++ b/src/scss/pages/page-run-a-node.scss @@ -36,45 +36,16 @@ h1.main { max-width: 650px; - } - - &:before { - background: url(../images/run-a-node/run-a-node-1.png) no-repeat scroll top right transparent; - background-size: contain; - top: 30px; - right: 0; - left: 55%; - position: absolute; - content: ""; - width: 500px; - height: 500px; - z-index: -1; - @include media-breakpoint-down(xl) { - width: 480px; - height: 480px; - top: 30px; - right: 60px; - left: unset; - } - @include media-breakpoint-down(lg) { - width: 380px; - height: 380px; - top: 70px; - right: 50px; - } - @include media-breakpoint-down(md) { - width: 78%; - height: 78%; - max-width: 450px; - right: unset; - left: 50%; - transform: translateX(-50%); + max-width: 400px; } } main { - padding-top: 100px; + padding-top: 50px; + @include media-breakpoint-down(xl) { + padding-top: 20px; + } } section { padding-top: 50px; @@ -85,6 +56,58 @@ } } + .hero .container { + position: relative; + &:before { + background: url(../images/run-a-node/run-a-light-node-bg.png) no-repeat scroll top right transparent; + background-size: contain; + top: -227px; + right: -40px; + position: absolute; + content: ""; + width: 190%; + height: 190%; + z-index: -1; + max-width: 1100px; + + @include media-breakpoint-up(xxxl) { + width: 200%; + height: 200%; + top: -276px; + right: -60px; + } + @include media-breakpoint-down(xl) { + width: 170%; + height: 170%; + top: -196px; + right: -40px; + left: unset; + } + @include media-breakpoint-down(lg) { + width: 170%; + height: 170%; + top: -197px; + max-width: 600px; + right: -30px; + } + @include media-breakpoint-down(md) { + width: 190%; + height: 190%; + top: -314px; + max-width: 80vw; + right: -20px; + } + @include media-breakpoint-down(sm) { + top: -313px; + width: 180%; + height: 180%; + max-width: 80vw; + right: -10px; + max-width: unset; + } + } + } + .description { font-family: $inter; font-weight: 300; @@ -98,10 +121,11 @@ .hero { @include media-breakpoint-down(md) { - padding-top: 415px; + padding-top: 210px; + padding-bottom: 70px; } @include media-breakpoint-down(sm) { - padding-top: 70vw; + padding-top: 213px; } .text { font-family: $ruberoid; @@ -110,8 +134,9 @@ color: #000000; letter-spacing: 0.22px; line-height: 26px; - max-width: 450px; + max-width: 350px; margin-bottom: 50px; + text-wrap: balance; @include media-breakpoint-down(md) { font-size: 14px; @@ -122,33 +147,76 @@ } } - .get-started { - padding-top: 0px; - padding-bottom: 70px; + .join-the-network { + @include media-breakpoint-down(md) { + padding-top: 70px; + } + } - & .icon-card { - @include media-breakpoint-down(md) { - padding: 30px; + .join-the-network, + .light-nodes { + @include media-breakpoint-up(md) { + h2 { + text-align: center; + width: fit-content; } } + .icon-card { + border-radius: 8px; + border: 1px solid rgba(120, 120, 120, 0.15); + background: rgba(255, 255, 255, 0.5); + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.03); + backdrop-filter: blur(22px); - & .icon-card-wrapper:nth-child(1) { - & .icon-card { - background-color: #f3ecff; + .logo-container { + position: relative; + width: 40px; + height: 40px; + margin-bottom: 20px; + + .gatsby-image-wrapper { + overflow: visible; + &:before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + } + } } - } - & .icon-card-wrapper:nth-child(2) { - & .icon-card { - background-color: #def7ff; + + .title { + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: normal; } - } - & .icon-card-wrapper:nth-child(3) { - & .icon-card { - background-color: #fff2e1; + + .text { + margin-top: 10px; + margin-bottom: 16px; + } + + .link-wrapper { + margin-top: auto; + .button { + margin-top: 0px; + margin-bottom: 0px; + padding: 4px 0px; + } } } } + .light-nodes { + @include media-breakpoint-up(md) { + padding-bottom: 150px; + } + h2 { + text-align: left; + } + } + .button-simple, .button-white, .button-icon, @@ -166,43 +234,8 @@ min-width: 33%; } - // new sections - - .start-up { - padding-top: 110px; - padding-bottom: 25px; - @include media-breakpoint-down(lg) { - padding-top: 100px; - padding-bottom: 20px; - } - h2 { - width: fit-content; - } - - .image-box--startup { - @include media-breakpoint-down(md) { - padding: 16px 20px; - max-width: 85%; - margin-left: auto; - margin-right: auto; - } - } - - .description { - margin-top: 50px; - } - - .image-wrapper img { - width: 100; - max-width: 500px; - @include media-breakpoint-down(md) { - max-width: 100%; - } - } - } - .what-is-a-node { - padding-top: 100px; + padding-top: 50px; padding-bottom: 0px; @include media-breakpoint-down(md) { padding-top: 50px; @@ -212,9 +245,9 @@ } .image-box--node { + padding: 60px 0px 0px 8px; @include media-breakpoint-down(md) { - padding: 32px 20px; - max-width: 85%; + padding: 0px 0px 0px 8px; margin-left: auto; margin-right: auto; } @@ -222,70 +255,8 @@ .text-box { .title { - font-size: 36px; - font-style: normal; - font-weight: 700; - line-height: 1.3em; - max-width: auto; - @include media-breakpoint-down(md) { - font-size: 24px; - max-width: 380px; - } - &:last-of-type { - margin-top: 60px; - @include media-breakpoint-down(md) { - margin-top: 40px; - } - } - } - } - } - - .get-started { - .text-box .title { - font-size: 22px; - font-style: normal; - font-weight: 700; - line-height: 26px; - } - } - - .resources { - padding-top: 0px; - padding-bottom: 140px; - @include media-breakpoint-down(lg) { - padding-top: 40px; - padding-bottom: 60px; - } - - & .icon-card-wrapper .icon-card { - background: transparent; - padding: 10px; - @include media-breakpoint-down(md) { - padding: 0px; - } - } - } - .resources { - .text-box .title { - font-size: 22px; - font-style: normal; - font-weight: 700; - line-height: 26px; - margin-top: 20px; - } - .description { - max-width: 350px; - @include media-breakpoint-down(sm) { - max-width: 100%; + margin-bottom: 30px; } } - .logo-container { - height: 100px; - width: 100px; - } - .gatsby-image-wrapper { - width: 100px; - } } } diff --git a/src/scss/variables.scss b/src/scss/variables.scss index e6a8f232f..b9b876738 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -1,18 +1,19 @@ $grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, + xxxl: 1920px, ); $enable-negative-margins: true; -$inter: 'Inter'; -$ruberoid: 'Ruberoid'; +$inter: "Inter"; +$ruberoid: "Ruberoid"; -$purple: #7B2BF9; +$purple: #7b2bf9; $form-check-input-checked-bg-color: $purple; $form-check-input-focus-box-shadow: none;