scroll-tech · zzq0826 · Sep 24, 2026
diff --git a/astro.config.ts b/astro.config.ts
@@ -41,17 +41,35 @@ export default defineConfig({
     astroCallouts(),
     solidityRemixCode(),
     expressiveCode({
-      themes: ["dark-plus"],
+      // the blog's code panel (frontends blog.module.css) in light mode, a warm near-black in
+      // dark mode; the site switches themes with the `dark` class on <html>, not the media query
+      themes: ["github-light", "github-dark"],
+      useDarkModeMediaQuery: false,
+      themeCssSelector: (theme) => (theme.type === "dark" ? ".dark" : false),
       defaultProps: {
         frame: "code",
       },
       styleOverrides: {
-        borderRadius: "27px",
-        borderColor: "transparent",
+        borderRadius: "12px",
+        borderWidth: "1px",
+        borderColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"),
+        codeBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"),
+        codeFontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+        codeFontSize: "13.5px",
+        codeLineHeight: "1.65",
+        uiFontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
         frames: {
           shadowColor: "transparent",
           editorTabBorderRadius: "0.5rem",
-          editorBackground: "#2b2b2b",
+          editorBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"),
+          editorTabBarBackground: ({ theme }) => (theme.type === "dark" ? "#1B1A18" : "#F4F2F0"),
+          editorActiveTabBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"),
+          editorActiveTabIndicatorTopColor: "transparent",
+          editorActiveTabIndicatorBottomColor: "transparent",
+          editorTabBarBorderBottomColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"),
+          terminalBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"),
+          terminalTitlebarBackground: ({ theme }) => (theme.type === "dark" ? "#1B1A18" : "#F4F2F0"),
+          terminalTitlebarBorderBottomColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"),
         },
       },
     }),

diff --git a/public/assets/icons/apple-touch-icon-256x256.png b/public/assets/icons/apple-touch-icon-256x256.png
diff --git a/public/assets/icons/favicon-32x32.png b/public/assets/icons/favicon-32x32.png
diff --git a/public/assets/icons/favicon.ico b/public/assets/icons/favicon.ico
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -166,7 +166,6 @@
     "aboutScroll": {
       "title": "About Scroll",
       "bugBounty": "Bug Bounty",
-      "joinUs": "Join Us",
       "healthStatus": "Health Status",
       "privacyPolicy": "Privacy Policy",
       "termsAndConditions": "Terms and Conditions"
@@ -176,7 +175,6 @@
       "scrollDocsURL": "https://docs.scroll.io/",
       "blog": "Blog",
       "documentation": "Documentation",
-      "brandKit": "Brand Kit",
       "audits": "Audits"
     },
     "followUs": {

diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
@@ -169,7 +169,6 @@
     "aboutScroll": {
       "title": "Acerca de Scroll",
       "bugBounty": "Cazarecompensas de bugs",
-      "joinUs": "Únete a nosotros",
       "healthStatus": "Estado de servicios",
       "privacyPolicy": "Políticas de privacidad",
       "termsAndConditions": "Terminos y condiciones"
@@ -179,7 +178,6 @@
       "scrollDocsURL": "https://docs.scroll.io/es",
       "blog": "Blog",
       "documentation": "Documentación",
-      "brandKit": "Kit de Marca",
       "audits": "Auditorías"
     },
     "followUs": {

diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json
@@ -167,7 +167,6 @@
     "aboutScroll": {
       "title": "Scroll Hakkında",
       "bugBounty": "Hata Ödül Programı",
-      "joinUs": "Bize Katılın",
       "healthStatus": "Sağlık Durumu",
       "privacyPolicy": "Gizlilik Politikası",
       "termsAndConditions": "Şartlar ve Koşullar"
@@ -177,7 +176,6 @@
       "scrollDocsURL": "https://docs.scroll.io/",
       "blog": "Blog",
       "documentation": "Dokümantasyon",
-      "brandKit": "Marka Kiti",
       "audits": "Denetimler"
     },
     "followUs": {

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -166,7 +166,6 @@
     "aboutScroll": {
       "title": "关于 Scroll",
       "bugBounty": "漏洞赏金",
-      "joinUs": "加入我们",
       "healthStatus": "健康状况",
       "privacyPolicy": "隐私政策",
       "termsAndConditions": "条款和条件"
@@ -176,7 +175,6 @@
       "scrollDocsURL": "https://docs.scroll.io/",
       "blog": "博客",
       "documentation": "文档",
-      "brandKit": "品牌工具包",
       "audits": "审计"
     },
     "followUs": {

diff --git a/src/assets/svgs/home/Note.svg b/src/assets/svgs/home/Note.svg
diff --git a/src/assets/svgs/home/home-sdk.svg b/src/assets/svgs/home/home-sdk.svg
diff --git a/src/assets/svgs/main/next.svg b/src/assets/svgs/main/next.svg
diff --git a/src/assets/svgs/scroll-mark.svg b/src/assets/svgs/scroll-mark.svg
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -21,7 +21,7 @@ const icons = {
 
 <aside class={`content ${type}`} aria-label={title}>
   <div class="icon">
-    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white-800">
+    <span class="inline-block w-[20px] h-[20px]">
       <Fragment set:html={icons[type]} />
     </span>
   </div>
@@ -38,45 +38,60 @@ const icons = {
 </aside>
 
 <style>
+  /* a callout sits on its type's tint with the icon in the type's ink (styles/brand.css) */
   aside {
     /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
     outline: 1px solid transparent;
 
-    /* display: flex; */
-    @apply p-[30px] gap-4 rounded-[27px] text-info mb-[1rem] bg-callout-note dark:bg-callout-dark-note;
+    --aside-bg: var(--sc-note-bg);
+    --aside-ink: var(--sc-note-ink);
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    column-gap: 14px;
+    align-items: start;
+    padding: 20px 24px;
+    margin-bottom: 1rem;
+    border-radius: 16px;
+    background: var(--aside-bg);
+    color: var(--sc-text);
   }
 
   aside p.title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  aside p {
-    @apply text-info;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--sc-ink);
+    margin-bottom: 4px !important;
   }
 
   .icon {
     flex-shrink: 0;
-    width: 1.5em;
-    margin-bottom: 10px;
+    width: 20px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    color: var(--aside-ink);
   }
-  .icon svg {
+  .icon :global(svg) {
+    width: 20px;
+    height: 20px;
     vertical-align: middle;
     fill: currentcolor;
   }
+  .icon span {
+    color: inherit;
+  }
 
   aside :global(a),
   aside :global(a > code:not([class*="language"])) {
     @apply text-link underline;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
   }
 
   aside :global(p),
   aside.content :global(ul) {
-    @apply text-text;
-  }
-
-  :global(.theme-dark) aside :global(code:not([class*="language"])) {
-    @apply text-code-text;
+    color: var(--sc-text);
   }
 
   aside :global(pre) {
@@ -85,25 +100,33 @@ const icons = {
   }
 
   .tip {
-    @apply bg-callout-tip dark:bg-callout-dark-tip;
+    --aside-bg: var(--sc-tip-bg);
+    --aside-ink: var(--sc-tip-ink);
   }
 
   .caution {
-    @apply bg-callout-caution dark:bg-callout-dark-caution;
+    --aside-bg: var(--sc-caution-bg);
+    --aside-ink: var(--sc-caution-ink);
   }
 
   .danger {
-    @apply bg-callout-danger dark:bg-callout-dark-danger;
+    --aside-bg: var(--sc-danger-bg);
+    --aside-ink: var(--sc-danger-ink);
   }
 
   .note {
-    @apply bg-callout-note dark:bg-callout-dark-note;
+    --aside-bg: var(--sc-note-bg);
+    --aside-ink: var(--sc-note-ink);
+  }
+
+  .asideContent {
+    min-width: 0;
   }
 
   .asideContent :global(p) {
     margin-bottom: 0 !important;
-    font-size: 16px;
-    line-height: 25px;
+    font-size: 15px;
+    line-height: 24px;
   }
 
   .asideContent :global(p + p) {