update mobile css

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;
   }
 `

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;

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;
+  }
+}

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;
-  } */
 }

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>
   )

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} />

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;
+  }
+}