From db4210b1ad9021a7ea998db716cd1e3c2686a419 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 27 May 2023 23:49:14 +0900
Subject: [PATCH] update mobile css

---
 .../src/client/components/Grid/Grid.tsx       |  8 ++++++--
 .../src/client/css/custom.scss                | 20 +++++++++++++++++++
 .../theme/DocItem/Layout/styles.module.css    | 19 +++++++++++-------
 .../DocPage/Layout/Main/styles.module.css     | 17 ++++------------
 .../src/client/theme/DocPage/Layout/index.tsx |  7 ++++---
 .../src/client/theme/Navbar/Content/index.tsx |  4 ++--
 .../src/client/theme/style.module.css         |  6 ++++++
 7 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
index 1cdf591..43ecd25 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
@@ -4,6 +4,10 @@ export const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(24, 1fr);
   gap: 16px;
+
+  @media (max-width: 997px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `
 
 export const GridItem = styled.div`
@@ -65,7 +69,7 @@ export const GridItem = styled.div`
     grid-column: span 24;
   }
 
-  @media (max-width: 768px) {
-    grid-column: span 24 !important;
+  @media (max-width: 997px) {
+    grid-column: span 1 !important;
   }
 `
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index b5bc45d..337b6be 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -357,6 +357,7 @@ small {
 .breadcrumbs__item:not(:last-child):after {
   content: '/';
   opacity: 1;
+  background: none;
 }
 
 .breadcrumbs__link {
@@ -374,6 +375,7 @@ small {
 
 .row {
   position: relative;
+  margin: 0;
 }
 
 // TODO temporary style fix for the logo
@@ -432,6 +434,24 @@ div.w-10 > a:not(:last-child) {
   border-left: 1px solid rgb(var(--lsd-border-primary));
 }
 
+@media (max-width: 997px) {
+  .navbar {
+    display: flex;
+    padding-inline: 0;
+    height: 56px;
+    padding: 12px 16px;
+  }
+
+  .footer {
+    margin-left: -16px;
+    padding: 24px 16px;
+  }
+
+  .desktop {
+    display: none;
+  }
+}
+
 @media (max-width: 576px) {
   :root {
     --ifm-global-spacing: 0.5rem;
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
index f103bec..ae50191 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
@@ -7,17 +7,10 @@
   grid-column: span 10;
 }
 
-@media (min-width: 997px) {
-  /* .docItemCol {
-    max-width: 75% !important;
-  } */
-}
-
 .docItemGrid {
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   gap: 16px;
-  padding-left: 12px; /* Temporary offset */
 }
 
 .toc {
@@ -27,3 +20,15 @@
 .gap1 {
   grid-column: span 1;
 }
+
+@media (max-width: 997px) {
+  .docItemGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding-left: 0;
+  }
+
+  .docItemCol {
+    grid-column: span 2;
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
index 7b579cc..4c0ba40 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
@@ -10,18 +10,9 @@
   padding-bottom: 80px !important;
 }
 
-@media (min-width: 997px) {
-  /* .docMainContainer {
-    max-width: calc(100% - var(--doc-sidebar-width));
+@media (max-width: 997px) {
+  .docMainContainer {
+    width: 100%;
+    grid-column: span 2;
   }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  } */
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
index ede7f32..5c0b14b 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
@@ -6,6 +6,7 @@ import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main'
 import styles from './styles.module.css'
 import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
+import clsx from 'clsx'
 
 export default function DocPageLayout({ children }) {
   const sidebar = useDocsSidebar()
@@ -14,7 +15,7 @@ export default function DocPageLayout({ children }) {
     <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
       <Grid>
-        <GridItem className="w-3" />
+        <GridItem className={clsx('w-3', 'desktop')} />
         {sidebar && (
           <DocPageLayoutSidebar
             sidebar={sidebar.items}
@@ -22,11 +23,11 @@ export default function DocPageLayout({ children }) {
             setHiddenSidebarContainer={setHiddenSidebarContainer}
           />
         )}
-        <GridItem className="w-1" />
+        <GridItem className={clsx('w-1', 'desktop')} />
         <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
           {children}
         </DocPageLayoutMain>
-        <GridItem className="w-3" />
+        <GridItem className={clsx('w-3', 'desktop')} />
       </Grid>
     </Layout>
   )
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
index ccab8bb..bfffe0d 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
@@ -54,11 +54,11 @@ export default function NavbarContent() {
       <GridItem className="w-1">
         <NavbarLogo />
       </GridItem>
-      <GridItem className="w-6" />
+      <GridItem className={clsx('w-6', 'desktop')} />
       <GridItem className="w-10">
         <NavbarItems items={leftItems} />
       </GridItem>
-      <GridItem className="w-1" />
+      <GridItem className={clsx('w-1', 'desktop')} />
       <GridItem className={clsx('w-6', styles.rightSection)}>
         <NavbarItems items={rightItems} />
         <NavbarColorModeToggle className={styles.colorModeToggle} />
diff --git a/packages/logos-docusaurus-theme/src/client/theme/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/style.module.css
index 2470ba0..aa01acb 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/style.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/style.module.css
@@ -1,3 +1,9 @@
 .root {
   padding-inline: 32px;
 }
+
+@media (max-width: 997px) {
+  .root {
+    padding-inline: 16px;
+  }
+}