Revamp Home with better responsive design

Studio384 · Feb 19, 2024 · 06427c5 · 06427c5
1 parent be8a207
commit 06427c5
Show file tree

Hide file tree

Showing 4 changed files with 1,251 additions and 789 deletions.
diff --git a/docs/src/app/Components/LargeIconGrid.tsx b/docs/src/app/Components/LargeIconGrid.tsx
@@ -1,41 +1,43 @@
 import { Box, Sheet } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';
 
 import Amicon, { IAmicon } from '@studio384/amaranth';
 
-export default function LargeIconGrid({ icon }: { icon: IAmicon }) {
+export default function LargeIconGrid({ icon, sx }: { icon: IAmicon; sx?: SxProps }) {
   return (
     <Box
-      sx={{
-        '--Amicon-scale': '16px',
-        p: 4,
-        background: 'rgba(var(--joy-palette-background-channel) / .5)',
-        borderRadius: 'xl',
-        boxShadow: 'lg',
-        backdropFilter: 'blur(20px)',
-        border: '1px solid rgba(var(--joy-palette-background-channel) / .5)'
-      }}
+      sx={[
+        {
+          p: 'calc(var(--Amicon-scale, 16px) * 2)',
+          background: 'rgba(var(--joy-palette-background-channel) / .5)',
+          borderRadius: 'xl',
+          boxShadow: 'lg',
+          backdropFilter: 'blur(20px)',
+          border: '1px solid rgba(var(--joy-palette-background-channel) / .5)'
+        },
+        ...(Array.isArray(sx) ? sx : [sx])
+      ]}
     >
       <Sheet
         variant="outlined"
         sx={{
           // Icon display
-          '--Amicon-scale': '16px',
           color: 'text.primary',
           borderColor: 'var(--joy-palette-primary-200)',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          width: 'calc(var(--Amicon-scale) * 16)',
-          height: 'calc(var(--Amicon-scale) * 16)',
+          width: 'calc(var(--Amicon-scale, 16px) * 16)',
+          height: 'calc(var(--Amicon-scale, 16px) * 16)',
           borderRadius: 'sm',
           backgroundColor: 'transparent',
-          backgroundSize: 'var(--Amicon-scale) var(--Amicon-scale)',
+          backgroundSize: 'var(--Amicon-scale, 16px) var(--Amicon-scale, 16px)',
           backgroundPosition: '-1px -1px',
           backgroundImage:
             'linear-gradient(to right, var(--joy-palette-primary-200) 1px, transparent 1px), linear-gradient(to bottom, var(--joy-palette-primary-200) 1px, transparent 1px)'
         }}
       >
-        <Amicon icon={icon} style={{ fontSize: 'calc(var(--Amicon-scale) * 16)' }} />
+        <Amicon icon={icon} style={{ fontSize: 'calc(var(--Amicon-scale, 16px) * 16)' }} />
       </Sheet>
     </Box>
   );

diff --git a/docs/src/app/Home.tsx b/docs/src/app/Home.tsx
@@ -25,10 +25,10 @@ export default function Home() {
   return (
     <>
       <Header>
-        <Stack direction="row" alignItems="center" justifyContent="space-between" gap={5} sx={{ my: 7 }}>
-          <Stack gap={5} sx={{ flexGrow: 1 }}>
+        <Stack direction={{ xs: 'column', md: 'row' }} alignItems="center" justifyContent="space-between" gap={5} sx={{ my: 7 }}>
+          <Stack gap={5} sx={{ flexGrow: 1, order: { xs: 2, md: 1 } }}>
             <Box>
-              <Typography level="h1" fontSize={48}>
+              <Typography level="h1" fontSize={{ xs: 36, md: 48 }} sx={{ textAlign: { xs: 'center', md: 'initial' } }}>
                 <Typography color="primary">{icons.length}</Typography> amicable icons
                 <br />
                 to delight <Typography color="primary">your</Typography> designs
@@ -58,16 +58,16 @@ export default function Home() {
               />
             </form>
           </Stack>
-          <LargeIconGrid icon={aiAmicons} />
+          <LargeIconGrid icon={aiAmicons} sx={{ order: { xs: 1, md: 2 }, '--Amicon-scale': { xs: '8px', md: '16px' } }} />
         </Stack>
       </Header>
       <Container>
         <Stack gap={5} sx={{ my: 5 }}>
           <Alert color="danger" variant="solid" startDecorator={<Amicon icon={aiCircleExclamation} />} size="lg" sx={{ borderRadius: 'xl' }}>
             We're still working on this, a lot can change.
           </Alert>
-          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
-            <Stack gap={1} justifyContent="center">
+          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1f', md: '1fr 1fr' }, gap: 5 }}>
+            <Stack gap={1} justifyContent="center" sx={{ order: { xs: 2, md: 1 } }}>
               <Typography level="h2">Get started</Typography>
               <Typography>Get started with Amicons by installing the npm package.</Typography>
               <Codeblock>npm install @studio384/amaranth</Codeblock>
@@ -79,6 +79,7 @@ export default function Home() {
             </Stack>
             <Box
               sx={{
+                order: { xs: 1, md: 2 },
                 p: 3,
                 borderRadius: 'xl',
                 backgroundImage:
@@ -89,16 +90,17 @@ export default function Home() {
                 gap: 3,
                 fontSize: 'xl4',
                 border: '1px solid var(--joy-palette-primary-outlinedBorder)',
-                height: 300
+                height: { xs: 120, md: 300 }
               }}
             >
               <Amicon icon={aiFlag} />
               <Amicon icon={aiAmicons} />
             </Box>
           </Box>
-          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1f', md: '1fr 1fr' }, gap: 5 }}>
             <Box
               sx={{
+                order: { xs: 1, md: 2 },
                 p: 3,
                 borderRadius: 'xl',
                 backgroundImage:
@@ -109,14 +111,14 @@ export default function Home() {
                 gap: 3,
                 fontSize: 'xl4',
                 border: '1px solid var(--joy-palette-success-outlinedBorder)',
-                height: 300
+                height: { xs: 120, md: 300 }
               }}
             >
               <Amicon icon={aiAmicons} />
               <Amicon icon={aiHeart} />
               <Amicon icon={aiIcons} />
             </Box>
-            <Stack gap={1} justifyContent="center">
+            <Stack gap={1} justifyContent="center" sx={{ order: { xs: 1, md: 2 } }}>
               <Typography level="h2">Icons with love</Typography>
               <Typography>Every icon is made by hand, and with our heart. We don't include that in the package tho, we still need it.</Typography>
               <Stack direction="row" gap={1} sx={{ mt: 3 }}>
@@ -126,8 +128,8 @@ export default function Home() {
               </Stack>
             </Stack>
           </Box>
-          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
-            <Stack gap={1} justifyContent="center">
+          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1f', md: '1fr 1fr' }, gap: 5 }}>
+            <Stack gap={1} justifyContent="center" sx={{ order: { xs: 2, md: 1 } }}>
               <Typography level="h2">Open source. Powered by you.</Typography>
               <Typography>Amicons is open source, and funded by you.</Typography>
               <Stack direction="row" gap={1} sx={{ mt: 3 }}>
@@ -138,6 +140,7 @@ export default function Home() {
             </Stack>
             <Box
               sx={{
+                order: { xs: 1, md: 2 },
                 p: 3,
                 borderRadius: 'xl',
                 backgroundImage:
@@ -148,7 +151,7 @@ export default function Home() {
                 gap: 3,
                 fontSize: 'xl4',
                 border: '1px solid var(--joy-palette-danger-outlinedBorder)',
-                height: 300
+                height: { xs: 120, md: 300 }
               }}
             >
               <Amicon icon={aiLockOpen} />