fix breakpoints, adjust to em, refactor NavCard, basic responsive beh…

…avior
scroll-tech · Aug 6, 2023 · 2dc978b · 2dc978b
1 parent a27c864
commit 2dc978b
Show file tree

Hide file tree

Showing 17 changed files with 157 additions and 97 deletions.
diff --git a/src/components/Footer/PureFooter/PureFooter.module.css b/src/components/Footer/PureFooter/PureFooter.module.css
@@ -1,9 +1,9 @@
 .footerLayout {
   grid-template-areas: "logo about resource follow version";
-  @apply grid w-full pb-[80px] pt-[60px] px-[20px] grid-cols-2 gap-[1em] bg-[var(--black-100)] md:grid-cols-[2fr_2fr_2fr_2fr_4fr]  md:pb-[100px];
+  @apply grid w-full pb-[80px] pt-[60px] px-[20px] grid-cols-2 gap-[1em] bg-[var(--black-100)] lg:grid-cols-[2fr_2fr_2fr_2fr_4fr]  lg:pb-[100px];
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 50em) {
   .footerLayout {
     grid-template-areas:
       "logo follow"

diff --git a/src/components/Footer/Subscribe/EmailInput.module.css b/src/components/Footer/Subscribe/EmailInput.module.css
@@ -81,6 +81,7 @@
 .inputBase::placeholder {
   color: #dcdcdc;
 }
+
 @media (min-width: 50em) {
   .container {
     height: 54px;

diff --git a/src/components/Footer/Subscribe/Subscribe.module.css b/src/components/Footer/Subscribe/Subscribe.module.css
@@ -1,9 +1,9 @@
 .container {
-  @apply py-[60px] px-[20px] bg-[#EAF5FD] md:py-[32px];
+  @apply py-[60px] px-[20px] bg-[#EAF5FD] lg:py-[32px];
 }
 
 .subscribeBox {
-  @apply flex  flex-col gap-[18px] items-start md:gap-[22px] md:items-center md:flex-row md:justify-between;
+  @apply flex  flex-col gap-[18px] items-start lg:gap-[22px] lg:items-center lg:flex-row lg:justify-between;
 }
 
 .subscribeIcon {
@@ -33,7 +33,7 @@
   /* margin-top: 32px; */
   flex: 1;
   width: auto;
-  text-align: right;
+  text-align: left;
   width: 100%;
 }
 
@@ -69,6 +69,7 @@
   }
 
   .emailBox {
+    text-align: right;
   }
 
   .errorMessage {

diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
@@ -234,7 +234,7 @@
   }
 }
 
-@media (max-width: 1200px) and (min-width: 50em) {
+@media (max-width: 72em) and (min-width: 50em) {
   :global(.right-box .tools) {
     display: none;
   }

diff --git a/src/components/HomeSearch/index.module.css b/src/components/HomeSearch/index.module.css
@@ -19,7 +19,7 @@
   width: 22px;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 50em) {
   .container {
     width: 100%;
   }

diff --git a/src/components/NavCard.astro b/src/components/NavCard.astro
@@ -0,0 +1,91 @@
+---
+export type Props = {
+  icon: string
+  name: string
+  content: string
+  link: string
+}
+const { icon, name, content, link } = Astro.props as Props
+
+/**
+ * This component adds the classNames required by the scripts/click-to-zoom.ts script.
+ */
+---
+
+<div class="navs-item">
+  <span style={{ background: `url(${icon}) center no-repeat` }} class="navs-item-icon"></span>
+  <span class="navs-item-title">{name}</span>
+  <span class="navs-item-content">{content}</span>
+  <a class="navs-item-link" href={link}>
+    Read more
+    <span class="link-icon"></span>
+  </a>
+</div>
+
+<style>
+  .navs-item {
+    width: 250px;
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    margin-top: 100px;
+  }
+
+  .navs-item-icon {
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+  }
+  .navs-item-title {
+    font-size: 22px;
+    font-weight: 600;
+  }
+  .navs-item-content {
+    font-size: 20px;
+    line-height: normal;
+    height: 84px;
+  }
+  .navs-item-link {
+    width: 123px;
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    font-size: 16px;
+    text-decoration: 1px underline;
+    text-underline-offset: 2px;
+    color: #c58d49;
+    background-color: #fff0dd;
+  }
+  .navs-item-link:hover {
+    background-color: #ffdeb5;
+  }
+
+  .link-icon {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-left: 2px;
+    background: url(/svgs/home-link.svg) center no-repeat;
+  }
+
+  @media screen and (max-width: 50em) {
+    .navs-item {
+      align-items: center;
+      gap: 8px;
+      width: 260px;
+    }
+    .navs-item-title {
+      font-size: 20px;
+      line-height: normal;
+    }
+    .navs-item-content {
+      text-align: center;
+      height: auto;
+    }
+    .navs-item-link {
+      margin-top: 14px;
+    }
+  }
+</style>
diff --git a/src/content/docs/en/article-components.mdx b/src/content/docs/en/article-components.mdx
@@ -135,8 +135,12 @@ Astro helps you build faster websites with “Islands Architecture”.
 
 ### Markmap
 
+#### Referenced File
+
 <MarkmapView src="/samples/markmap.md" />
 
+{/* <MarkmapView># markmap - beautiful1 - useful - easy - interactive</MarkmapView> */}
+
 ### Mermaid
 
 ```mermaid

diff --git a/src/content/docs/en/learn/index.mdx b/src/content/docs/en/learn/index.mdx
@@ -7,8 +7,23 @@ excerpt: "Learn more about Ethereum scalability and zero knowledge cryptography.
 isMdx: true
 ---
 
+import NavCard from "../../../../components/NavCard.astro"
+
 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.
 
 Want to see a specific topic covered? Create [an issue](https://github.com/scroll-tech/scroll-documentation/issues/new?assignees=&labels=new+content%2Ctriage&projects=&template=new_content.yml&title=%5BNew+Content%5D%3A+%3Cyour-title-here%3E) in our Github repo.
 
-[Insert pretty cards pointing to the first article in each.]
+<div class="navs" class="flex flex-col flex-wrap items-center md:flex-row md:gap-8 md:items-start">
+  <NavCard
+    icon="/svgs/home-technology.svg"
+    name="Ethereum & Protocols"
+    content="Understand the Ethereum ecosystem and how Scroll fits in."
+    link="/en/learn/the-scalability-problem"
+  />
+  <NavCard
+    icon="/svgs/home-learn.svg"
+    name="Zero Knowledge"
+    content="Learn about zero knowledge cryptography and its applications."
+    link="/en/learn/zero-knowledge/introduction-to-zero-knowledge"
+  />
+</div>
diff --git a/src/pages/en/home/ConnectUs.astro b/src/pages/en/home/ConnectUs.astro
@@ -108,7 +108,7 @@ const mediaList = [
     height: 56px;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 50em) {
     .connect-us {
       margin-top: 112px;
     }

diff --git a/src/pages/en/home/Navigate.astro b/src/pages/en/home/Navigate.astro
@@ -1,4 +1,5 @@
 ---
+import NavCard from "~/components/NavCard.astro"
 import SectionHeader from "~/components/SectionHeader/index.astro"
 
 const navList = [
@@ -32,19 +33,7 @@ const navList = [
 <div class="navigate">
   <SectionHeader title="Navigate the Docs" content="Start developing on Scroll today." />
   <div class="navs">
-    {
-      navList.map(({ icon, name, content, link }) => (
-        <div class="navs-item">
-          <span style={{ background: `url(${icon}) center no-repeat` }} class="navs-item-icon" />
-          <span class="navs-item-title">{name}</span>
-          <span class="navs-item-content">{content}</span>
-          <a class="navs-item-link" href={link}>
-            Read more
-            <span class="link-icon" />
-          </a>
-        </div>
-      ))
-    }
+    {navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)}
   </div>
 </div>
 
@@ -57,76 +46,14 @@ const navList = [
     display: flex;
     justify-content: space-between;
   }
-  .navs-item {
-    width: 250px;
-    display: flex;
-    flex-direction: column;
-    gap: 26px;
-    margin-top: 100px;
-  }
 
-  .navs-item-icon {
-    display: inline-block;
-    width: 35px;
-    height: 35px;
-  }
-  .navs-item-title {
-    font-size: 22px;
-    font-weight: 600;
-  }
-  .navs-item-content {
-    font-size: 20px;
-    line-height: normal;
-    height: 84px;
-  }
-  .navs-item-link {
-    width: 123px;
-    height: 34px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 20px;
-    font-size: 16px;
-    text-decoration: 1px underline;
-    text-underline-offset: 2px;
-    color: #c58d49;
-    background-color: #fff0dd;
-  }
-  .navs-item-link:hover {
-    background-color: #ffdeb5;
-  }
-
-  .link-icon {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    margin-left: 2px;
-    background: url(/svgs/home-link.svg) center no-repeat;
-  }
-
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 50em) {
     .navigate {
       margin-top: 106px;
     }
     .navs {
       flex-direction: column;
       align-items: center;
     }
-    .navs-item {
-      align-items: center;
-      gap: 8px;
-      width: 260px;
-    }
-    .navs-item-title {
-      font-size: 20px;
-      line-height: normal;
-    }
-    .navs-item-content {
-      text-align: center;
-      height: auto;
-    }
-    .navs-item-link {
-      margin-top: 14px;
-    }
   }
 </style>
diff --git a/src/pages/en/home/QuickStart.astro b/src/pages/en/home/QuickStart.astro
@@ -59,7 +59,28 @@ const toolList = [
     font-weight: 600;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 72em) {
+    .tools-item figure {
+      font-size: 0;
+      width: 12vw;
+      height: 12vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      background-color: #fff0dd;
+    }
+
+    .tools-item figure img {
+      width: 8vw;
+    }
+
+    .tools-item span {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
     .tools {
       flex-wrap: wrap;
       gap: 50px;

diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
@@ -47,7 +47,7 @@ changeLanguage("en")
     background-color: #fff8f3;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 50em) {
     .header {
       height: 350px;
       padding: 70px 20px 115px;

diff --git a/src/styles/design-system/components/layout.css b/src/styles/design-system/components/layout.css
@@ -12,7 +12,7 @@ main {
   @apply p-6 border-w-primary border-solid border-border-primary;
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 50em) {
   .container {
     max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
   }

diff --git a/src/styles/design-system/components/typography.css b/src/styles/design-system/components/typography.css
@@ -29,7 +29,7 @@
   @apply text-[40px] mb-4 leading-[1];
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 50em) {
   :where(h3) {
     @apply text-[1.75rem];
   }
@@ -92,7 +92,7 @@
   @apply text-[2rem] mb-4;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 50em) {
   :where(.heading-400) {
     @apply text-[1.75rem];
   }
@@ -163,7 +163,7 @@
   @apply text-[3rem] mb-6;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 50em) {
   :where(.display-400) {
     @apply text-[2.5rem];
   }

diff --git a/src/styles/design-system/headerbanner.module.css b/src/styles/design-system/headerbanner.module.css
@@ -37,7 +37,7 @@
   display: none;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 50em) {
   .additionalinfo {
     display: inline;
   }