remove Grid styled component and update CSS

packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx

@@ -1,75 +0,0 @@
-import styled from '@emotion/styled'
-
-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`
-  grid-column: span 4;
-
-  &.w-1 {
-    grid-column: span 1;
-  }
-
-  &.w-2 {
-    grid-column: span 2;
-  }
-
-  &.w-3 {
-    grid-column: span 3;
-  }
-
-  &.w-4 {
-    grid-column: span 4;
-  }
-
-  &.w-6 {
-    grid-column: span 6;
-  }
-
-  &.w-7 {
-    grid-column: span 7;
-  }
-
-  &.w-8 {
-    grid-column: span 8;
-  }
-
-  &.w-10 {
-    grid-column: span 10;
-  }
-
-  &.w-12 {
-    grid-column: span 12;
-  }
-
-  &.w-14 {
-    grid-column: span 14;
-  }
-
-  &.w-16 {
-    grid-column: span 16;
-  }
-
-  &.w-17 {
-    grid-column: span 17;
-  }
-
-  &.w-18 {
-    grid-column: span 18;
-  }
-
-  &.w-24 {
-    grid-column: span 24;
-  }
-
-  @media (max-width: 997px) {
-    grid-column: span 1 !important;
-  }
-`

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -240,6 +240,112 @@ svg * {
   stroke: rgb(var(--lsd-text-primary));
 }
 
+.grid {
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  gap: 16px;
+}
+
+.grid-item {
+  grid-column: span 4;
+
+  &.w-1 {
+    grid-column: span 1;
+  }
+
+  &.w-2 {
+    grid-column: span 2;
+  }
+
+  &.w-3 {
+    grid-column: span 3;
+  }
+
+  &.w-4 {
+    grid-column: span 4;
+  }
+
+  &.w-5 {
+    grid-column: span 4;
+  }
+
+  &.w-6 {
+    grid-column: span 6;
+  }
+
+  &.w-7 {
+    grid-column: span 7;
+  }
+
+  &.w-8 {
+    grid-column: span 8;
+  }
+
+  &.w-9 {
+    grid-column: span 8;
+  }
+
+  &.w-10 {
+    grid-column: span 10;
+  }
+
+  &.w-11 {
+    grid-column: span 10;
+  }
+
+  &.w-12 {
+    grid-column: span 12;
+  }
+
+  &.w-13 {
+    grid-column: span 12;
+  }
+
+  &.w-14 {
+    grid-column: span 14;
+  }
+
+  &.w-15 {
+    grid-column: span 14;
+  }
+
+  &.w-16 {
+    grid-column: span 16;
+  }
+
+  &.w-17 {
+    grid-column: span 17;
+  }
+
+  &.w-18 {
+    grid-column: span 18;
+  }
+
+  &.w-19 {
+    grid-column: span 18;
+  }
+
+  &.w-20 {
+    grid-column: span 18;
+  }
+
+  &.w-21 {
+    grid-column: span 18;
+  }
+
+  &.w-22 {
+    grid-column: span 18;
+  }
+
+  &.w-23 {
+    grid-column: span 18;
+  }
+
+  &.w-24 {
+    grid-column: span 24;
+  }
+}
+
 .table-of-contents__link--active {
   color: rgb(var(--lsd-text-primary)) !important;
 }
@@ -434,24 +540,6 @@ 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;
@@ -478,3 +566,29 @@ div.w-10 > a:not(:last-child) {
     --ifm-h4-font-size: 1.25rem !important;
   }
 }
+
+@include utils.responsive('lg', 'down') {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .navbar {
+    display: flex;
+    padding-inline: 0;
+    height: 56px;
+    padding: 12px 16px;
+  }
+
+  .footer {
+    margin-left: -16px;
+    padding: 24px 16px;
+  }
+
+  .desktop {
+    display: none;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx

@@ -5,7 +5,6 @@ import BackToTopButton from '@theme/BackToTopButton'
 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 }) {
@@ -14,8 +13,8 @@ export default function DocPageLayout({ children }) {
   return (
     <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
-      <Grid>
-        <GridItem className={clsx('w-3', 'desktop')} />
+      <div className="grid">
+        <div className={clsx('grid-item', 'w-3', 'desktop')} />
         {sidebar && (
           <DocPageLayoutSidebar
             sidebar={sidebar.items}
@@ -23,12 +22,12 @@ export default function DocPageLayout({ children }) {
             setHiddenSidebarContainer={setHiddenSidebarContainer}
           />
         )}
-        <GridItem className={clsx('w-1', 'desktop')} />
+        <div className={clsx('grid-item', 'w-1', 'desktop')} />
         <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
           {children}
         </DocPageLayoutMain>
-        <GridItem className={clsx('w-3', 'desktop')} />
-      </Grid>
+        <div className={clsx('grid-item', 'w-3', 'desktop')} />
+      </div>
     </Layout>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import clsx from 'clsx'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './style.module.css'
-import styled from '@emotion/styled'
 
 export default function FooterLayout({ style, copyright }) {
   return (
@@ -12,17 +10,17 @@ export default function FooterLayout({ style, copyright }) {
         'footer--dark': style === 'dark',
       })}
     >
-      <CustomGrid>
-        <GridItem className={clsx('w-6', styles.footerInfo)}>
+      <div className={clsx('grid', 'footer-grid')}>
+        <div className={clsx('grid-item', 'w-6', styles.footerInfo)}>
           <Typography component="div" variant="body2">
             Copyright © 2023 Logos
           </Typography>
           <Typography component="div" variant="body2">
             Built with Docusaurus.
           </Typography>
-        </GridItem>
-        <GridItem className={clsx('w-1', 'desktop')} />
-        <GridItem className="w-6">
+        </div>
+        <div className={clsx('grid-item', 'w-1', 'desktop')} />
+        <div className={clsx('grid-item', 'w-6')}>
           <div className={styles.section}>
             <div>
               <Typography component="div" variant="body2">
@@ -60,9 +58,9 @@ export default function FooterLayout({ style, copyright }) {
               </div>
             </div>
           </div>
-        </GridItem>
-        <GridItem className="w-1" />
-        <GridItem className="w-6">
+        </div>
+        <div className={clsx('grid-item', 'w-1')} />
+        <div className={clsx('grid-item', 'w-6')}>
           <div className={styles.section}>
             <div>
               <Typography component="div" variant="body2">
@@ -103,15 +101,9 @@ export default function FooterLayout({ style, copyright }) {
               </div>
             </div>
           </div>
-        </GridItem>
-        <GridItem className="w-4" />
-      </CustomGrid>
+        </div>
+        <div className={clsx('grid-item', 'w-4')} />
+      </div>
     </footer>
   )
 }
-
-const CustomGrid = styled(Grid)`
-  @media (max-width: 997px) {
-    grid-template-columns: 1fr;
-  }
-`

packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx

@@ -11,7 +11,6 @@ import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'
 import NavbarLogo from '@theme/Navbar/Logo'
 import NavbarSearch from '@theme/Navbar/Search'
 import styles from './styles.module.css'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
 import clsx from 'clsx'
 
 function useNavbarItems() {
@@ -49,17 +48,17 @@ export default function NavbarContent() {
   const searchBarItem = items.find((item) => item.type === 'search')
 
   return (
-    <Grid className="navbar__inner">
+    <div className={clsx('grid', 'navbar__inner')}>
       {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
-      <GridItem className="w-1">
+      <div className={clsx('grid-item', 'w-1')}>
         <NavbarLogo />
-      </GridItem>
-      <GridItem className={clsx('w-6', 'desktop')} />
-      <GridItem className="w-10">
+      </div>
+      <div className={clsx('grid-item', 'w-6', 'desktop')} />
+      <div className={clsx('grid-item', 'w-10')}>
         <NavbarItems items={leftItems} />
-      </GridItem>
-      <GridItem className={clsx('w-1', 'desktop')} />
-      <GridItem className={clsx('w-6', styles.rightSection)}>
+      </div>
+      <div className={clsx('grid-item', 'w-1', 'desktop')} />
+      <div className={clsx('grid-item', 'w-6', styles.rightSection)}>
         <NavbarItems items={rightItems} />
         <NavbarColorModeToggle className={styles.colorModeToggle} />
         {!searchBarItem && (
@@ -67,7 +66,7 @@ export default function NavbarContent() {
             <SearchBar />
           </NavbarSearch>
         )}
-      </GridItem>
-    </Grid>
+      </div>
+    </div>
   )
 }