@@ -36,11 +38,8 @@ const icons = {
/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
outline: 1px solid transparent;
- --aside-bg: var(--color-background-info);
- background-color: var(--aside-bg);
-
/* display: flex; */
- @apply p-[30px] gap-4 rounded-[27px] text-info mb-[1rem];
+ @apply p-[30px] gap-4 rounded-[27px] text-info mb-[1rem] bg-callout-note dark:bg-callout-dark-note;
}
aside p.title {
@@ -82,19 +81,23 @@ const icons = {
}
.tip {
- --aside-bg: #eee;
+ @apply bg-callout-tip dark:bg-callout-dark-tip;
}
.caution {
- --aside-bg: var(--color-background-warning);
+ @apply bg-callout-caution dark:bg-callout-dark-caution;
}
.danger {
- --aside-bg: var(--color-background-error);
+ @apply bg-callout-danger dark:bg-callout-dark-danger;
+ }
+
+ .note {
+ @apply bg-callout-note dark:bg-callout-dark-note;
}
.asideContent :global(p) {
- margin-bottom: 0;
+ margin-bottom: 0 !important;
font-size: 16px;
line-height: 25px;
}
diff --git a/src/components/Footer/Subscribe/EmailInput.module.css b/src/components/Footer/Subscribe/EmailInput.module.css
index 5cb898d2b..107b40bc4 100644
--- a/src/components/Footer/Subscribe/EmailInput.module.css
+++ b/src/components/Footer/Subscribe/EmailInput.module.css
@@ -11,7 +11,6 @@
width: 48px;
height: 100%;
position: absolute;
- background-color: #1f1f1f;
border-radius: 10px;
z-index: 1;
top: 0;
@@ -19,12 +18,12 @@
transition: width 0.5s ease;
overflow: hidden;
cursor: default;
+ @apply bg-black;
}
.iconButton {
width: 54px;
height: 100%;
- color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -47,6 +46,7 @@
border-radius: 50%;
overflow: visible;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ @apply text-white;
}
.iconButton img {
@@ -57,13 +57,12 @@
.success {
font-size: 16px;
font-weight: 600;
- color: #fff;
- background-color: #1f1f1f;
border-radius: 10px;
border-left: none;
text-align: center;
flex: 1;
line-height: 54px;
+ @apply text-white bg-black;
}
.inputBase {
@@ -71,16 +70,11 @@
font-weight: 600;
height: 100%;
width: 100%;
- color: #000;
- background-color: #fff;
border-radius: 10px;
border: 1px solid #000;
border-left: none;
text-align: center;
-}
-
-.inputBase::placeholder {
- color: #dcdcdc;
+ @apply text-black bg-pure-white border-black;
}
@media (min-width: 50em) {
diff --git a/src/components/Footer/Subscribe/EmailInput.tsx b/src/components/Footer/Subscribe/EmailInput.tsx
index b3e586002..8905a6049 100644
--- a/src/components/Footer/Subscribe/EmailInput.tsx
+++ b/src/components/Footer/Subscribe/EmailInput.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from "react"
+import React from "react"
import styles from "./EmailInput.module.css"
+import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react"
+import { clsx } from "~/lib"
const EmailInput = (props) => {
const { end, onClick, onEnter, ...restProps } = props
@@ -13,21 +15,29 @@ const EmailInput = (props) => {
return (
-
)
diff --git a/src/components/Footer/Subscribe/Subscribe.tsx b/src/components/Footer/Subscribe/Subscribe.tsx
index 3ec79e912..6ab9d9824 100644
--- a/src/components/Footer/Subscribe/Subscribe.tsx
+++ b/src/components/Footer/Subscribe/Subscribe.tsx
@@ -1,5 +1,8 @@
+// import React from "react"
import { useState, useEffect } from "preact/hooks"
import MailchimpSubscribe from "react-mailchimp-subscribe"
+import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react"
+import { clsx } from "~/lib"
import EmailInput from "./EmailInput.tsx"
import styles from "./Subscribe.module.css"
@@ -7,7 +10,7 @@ import styles from "./Subscribe.module.css"
const url = "https://gmail.us14.list-manage.com/subscribe/post?u=3b1d822eb27b2fa64d82d430b&id=0b4603244e"
const isValidEmail = (email: string): boolean => {
- const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+ const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
return emailRegex.test(email)
}
@@ -37,12 +40,17 @@ export default function Subscribe() {
}
return (
-
+
-
+
+
+
+
Stay up-to-date on the latest Scroll Developer news
-
Roadmap updates, virtual and live events, ecosystem opportunities and more
+
+ Roadmap updates, virtual and live events, ecosystem opportunities and more
+
+
+
diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro
index d26ad856c..c3f018818 100644
--- a/src/components/RightSidebar/RightSidebar.astro
+++ b/src/components/RightSidebar/RightSidebar.astro
@@ -16,7 +16,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
-
{t("rightSidebar.feedback")}
+
{t("rightSidebar.feedback")}
@@ -37,7 +37,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
@apply !mb-6;
}
.sidebar-nav-inner {
- padding: 16px 20px 70px 4px;
+ padding: 24px 20px 24px 4px;
overflow: auto;
background: #fff8f3;
border-radius: 1em;
@@ -45,16 +45,12 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
width: 280px;
/* width: 250px; */
max-height: 100%;
- /* @apply pt-doc; */
+ @apply bg-white dark:bg-dark-normal;
}
.sidebar-nav-inner > * {
- margin-top: 1rem;
+ margin-top: 32px;
}
.sidebar-nav-inner > *:first-child {
margin-top: 0;
}
-
- .sidebar-nav-inner h2 {
- @apply m-0 mt-4;
- }
diff --git a/src/components/ToggleElement.astro b/src/components/ToggleElement.astro
index 4e6c61234..e2a53d2b5 100644
--- a/src/components/ToggleElement.astro
+++ b/src/components/ToggleElement.astro
@@ -7,7 +7,9 @@ const anchorHash = anchor.replace(/\s+/g, "-")
---
-
+
@@ -46,9 +48,9 @@ const anchorHash = anchor.replace(/\s+/g, "-")
border-radius: 27px;
border: 1px solid #dadada;
overflow: hidden;
- color: var(--color-text-primary);
font-weight: 600;
padding-left: 0.3rem;
+ @apply text-black dark:text-white border-primary dark:border-dark-primary;
}
details:hover {
@@ -89,7 +91,6 @@ const anchorHash = anchor.replace(/\s+/g, "-")
}
summary::before {
- content: "";
display: inline-block;
font-size: 0.75em;
transform: rotate(-90deg);
@@ -97,8 +98,9 @@ const anchorHash = anchor.replace(/\s+/g, "-")
margin-right: 1rem;
height: 10px;
width: 10px;
- background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNC45OTk3NiA2QzQuNzY4MSA2IDQuNTUwMjkgNS45MDc3NCA0LjM4NjQ0IDUuNzQwMTlMMC4yNTM0NTEgMS41MTM4N0MtMC4wODQ0ODM2IDEuMTY4MDIgLTAuMDg0NDgzNiAwLjYwNTY2IDAuMjUzNDUxIDAuMjU5ODExQzAuNDE3Mjk4IDAuMDkyMjY0MiAwLjYzNTExNSAwIDAuODY2NzcgMEMxLjA5ODQzIDAgMS4zMTYyNCAwLjA5MjI2NDIgMS40ODAwOSAwLjI1OTgxMUw1LjAwMDAzIDMuODU5MjVMOC41MTk3IDAuMjU5ODExQzguNjgzNTUgMC4wOTIyNjQyIDguOTAxMzcgMCA5LjEzMzAyIDBDOS4zNjQ2OCAwIDkuNTgyNDkgMC4wOTIyNjQyIDkuNzQ2MzQgMC4yNTk4MTFDMTAuMDg0NiAwLjYwNTY2IDEwLjA4NDYgMS4xNjgzIDkuNzQ2MzQgMS41MTM4N0w1LjYxMzM1IDUuNzQwMTlDNS40NDk1MSA1LjkwNzc0IDUuMjMxNjkgNiA1LjAwMDAzIDZINC45OTk3NloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=)
- center / contain no-repeat;
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
}
details[open] summary::before {
transform: rotate(0deg);
diff --git a/src/content/docs/en/learn/index.mdx b/src/content/docs/en/learn/index.mdx
index 55b8184ed..ade566b4d 100644
--- a/src/content/docs/en/learn/index.mdx
+++ b/src/content/docs/en/learn/index.mdx
@@ -7,6 +7,8 @@ excerpt: "Learn more about Ethereum scalability and zero knowledge cryptography.
---
import NavCard from "../../../../components/NavCard.astro"
+import TechnologySvg from "../../../../assets/svgs/home/home-technology.svg?raw"
+import LearnSvg from "../../../../assets/svgs/home/home-learn.svg?raw"
Scroll pulls together research and engineering from Blockchain Protocols and Zero Knowledge Cryptography. If you want to dive deeper, keep reading and check out the additional resources.
@@ -14,13 +16,13 @@ Want to see a specific topic covered? Create [an issue](https://github.com/scrol
///
+
+interface Window {
+ dataLayer: Array
+}
diff --git a/src/features/landing/components/SectionHeader.tsx b/src/features/landing/components/SectionHeader.tsx
index 0bb31c078..5bb6e8a03 100644
--- a/src/features/landing/components/SectionHeader.tsx
+++ b/src/features/landing/components/SectionHeader.tsx
@@ -1,9 +1,7 @@
-import React, { useState, useCallback } from "react"
-import styles from "./SectionHeader.module.css"
-
+import styles from "./SectionHeader.module.css"
const SectionHeader = (props) => {
- const { dark, title, description, ...rest } = props
+ const { title, description } = props
return (
{title}
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
index f8fd54a44..1c489978a 100644
--- a/src/layouts/HomeLayout.astro
+++ b/src/layouts/HomeLayout.astro
@@ -6,7 +6,7 @@ import * as CONFIG from "../config"
import Footer from "~/components/Footer/Footer"
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"
-const { content = {}, dark } = Astro.props
+const { content = {} } = Astro.props
const currentPage = new URL(Astro.request.url).pathname
const formattedContentTitle = content.title
? `${content.title} | ${CONFIG.SITE.title}`
@@ -29,9 +29,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
#grid-left {
position: fixed;
- background-color: var(--theme-bg);
z-index: 10;
display: none;
+ @apply bg-pure-white dark:bg-black;
}
@media (min-width: 50em) {
@@ -59,16 +59,24 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
height: calc(100vh - 20px);
}
+
+
+
+
+
+
+
+
+