fix: adjustment

scroll-tech · Aug 5, 2023 · 73b319b · 73b319b
1 parent cc1d504
commit 73b319b
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 12 deletions.
diff --git a/public/scroll.svg b/public/scroll.svg
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
@@ -35,7 +35,11 @@ const section = frontmatter?.section ?? ""
   <nav class="nav-wrapper" title="Top Navigation">
     <div class="logo flex items-center">
       <a href={localizePath("/")}>
-        <img src={dark ? "/scroll-white.svg" : "/scroll.svg"} alt={CONFIG.SITE.title ?? "Documentation"} />
+        <img
+          style={{ height: "22px" }}
+          src={dark ? "/scroll-white.svg" : "/scroll.svg"}
+          alt={CONFIG.SITE.title ?? "Documentation"}
+        />
       </a>
     </div>
     <div class="right-box">

diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
@@ -17,7 +17,7 @@
   max-height: 80vh;
   background: #fff;
   position: absolute;
-  border-radius: 40px;
+  border-radius: 24px;
   padding-top: 0;
   width: 100%;
 }
@@ -204,6 +204,10 @@
     padding-top: 0;
   }
 
+  #searchModal.large {
+    border-radius: 27.5px;
+  }
+
   .queryResults {
     grid-template-columns: 1fr 1fr;
     @apply gap-4;

diff --git a/src/components/Header/Search/SearchInput.module.css b/src/components/Header/Search/SearchInput.module.css
@@ -14,7 +14,7 @@
 
 .wrapper.large {
   height: 48px;
-  border-radius: 40px;
+  border-radius: 24px;
 }
 
 .input {
@@ -39,6 +39,7 @@
   border-bottom: none;
   padding-bottom: 0;
   background: transparent url(/svgs/search.svg) left center no-repeat;
+  background-size: 20px auto;
 }
 
 .input::placeholder {
@@ -68,6 +69,8 @@
 
   .wrapper.large {
     height: 55px;
+    border-radius: 27.5px;
+    width: 100%;
   }
 
   .input {
@@ -83,8 +86,9 @@
 
   .input.large {
     height: 55px;
-    background: transparent url(/svgs/search.svg) left 22px center no-repeat;
+    background: transparent url(/svgs/search.svg) left 20px center no-repeat;
     padding-left: 60px;
+    padding-right: 22px;
   }
 
   .input:focus {

diff --git a/src/components/HomeSearch/index.module.css b/src/components/HomeSearch/index.module.css
@@ -10,7 +10,7 @@
   cursor: pointer;
   width: 100%;
   height: 55px;
-  border-radius: 40px;
+  border-radius: 27.5px;
   font-style: italic;
   background: var(--white);
 }
@@ -26,7 +26,8 @@
   .searchInput {
     width: 100%;
     height: 48px;
-    padding: 8px 18px;
+    padding: 8px 20px;
+    border-spacing: 24px;
   }
   .searchInput img {
     width: 20px;

diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
@@ -4,9 +4,10 @@ import HeadSEO from "../components/HeadSEO.astro"
 import Header from "../components/Header/Header.astro"
 import * as CONFIG from "../config"
 import Footer from "~/components/Footer/Footer"
+import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"
 
 const { content = {}, dark } = Astro.props
-
+const currentPage = new URL(Astro.request.url).pathname
 const formattedContentTitle = content.title
   ? `${content.title} | ${CONFIG.SITE.title}`
   : `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
@@ -18,17 +19,55 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
     <HeadCommon />
     <HeadSEO content={content} canonicalURL={canonicalURL} site="" />
     <title>{formattedContentTitle}</title>
+    <style>
+      body {
+        --doc-padding: 65px;
+      }
+      .home-layout {
+        margin-bottom: 0;
+      }
+
+      #grid-left {
+        position: fixed;
+        background-color: var(--theme-bg);
+        z-index: 10;
+        display: none;
+      }
+
+      @media (min-width: 50em) {
+        #grid-left {
+          display: flex;
+          position: sticky;
+          grid-column: 1;
+          background: transparent;
+        }
+      }
+    </style>
     <style is:global>
       .search-item {
         display: none !important;
       }
+      .mobile-sidebar-toggle {
+        overflow: hidden;
+      }
+
+      .mobile-sidebar-toggle #grid-left {
+        display: block;
+        top: 2rem;
+        left: 0;
+        padding: 0 20px;
+        height: calc(100vh - 2rem);
+      }
     </style>
   </head>
 </html>
 
 <body>
   <Header dark={dark} />
-  <main>
+  <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+    <LeftSidebar currentPage={currentPage} {content} />
+  </aside>
+  <main class="home-layout">
     <slot />
   </main>
   <Footer />

diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
@@ -88,6 +88,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
       .mobile-sidebar-toggle #grid-left {
         display: block;
         top: 2rem;
+        padding: 0 20px;
       }
       /** This is done to hide the search box in the homepage. CSSModules styles are taking precedence over other styles so !important was needed **/
       @media (min-width: 50em) {

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -64,6 +64,7 @@ changeLanguage(content.lang)
       }
 
       .grid-sidebar {
+        width: 100%;
         height: 100vh;
         position: sticky;
         top: 0;

diff --git a/src/pages/en/home/ConnectUs.astro b/src/pages/en/home/ConnectUs.astro
@@ -6,19 +6,19 @@ const mediaList = [
     icon: "/svgs/Discord.svg",
     name: "Join our Discord",
     content: "Connect with other Scroll developers and users.",
-    link: "/en/getting-started/overview",
+    link: "https://discord.gg/scroll",
   },
   {
     icon: "/svgs/Forum.svg",
     name: "Community Forum",
     content: "Discuss and propose changes to Scroll’s core protocols.",
-    link: "/en/developers",
+    link: "http://community.scroll.io/",
   },
   {
     icon: "/svgs/Contribute.svg",
     name: "Contribute to Scroll",
     content: "Build with other developers.",
-    link: "/en/technology",
+    link: "https://github.com/scroll-tech/contribute-to-scroll",
   },
 ]
 ---