SQUASHME: continue tidying styles

chrisvogt · Jun 1, 2024 · 8473524 · 8473524
1 parent 54a6283
commit 8473524
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/theme/src/components/footer/footer.js b/theme/src/components/footer/footer.js
@@ -12,7 +12,7 @@ export default () => {
   const footerText = getFooterText(metadata)
 
   return (
-    <div sx={{ variant: `styles.PageFooter` }}>
+    <footer id='footer' sx={{ variant: `styles.PageFooter` }}>
       <SwoopTop />
       <Container sx={{ textAlign: `center` }}>
         <div sx={{ mb: 3, pt: 3, pb: [4, 5] }}>
@@ -21,6 +21,6 @@ export default () => {
 
         {footerText ? <div>{footerText}</div> : null}
       </Container>
-    </div>
+    </footer>
   )
 }
diff --git a/theme/src/components/home-navigation.js b/theme/src/components/home-navigation.js
@@ -137,14 +137,12 @@ const HomeNavigation = () => {
 
   return (
     <Fragment>
-      <Card
+      <div
         sx={{
-          boxShadow: 'default',
           display: ['none', 'block'],
           position: `sticky`,
           top: `1.5em`
         }}
-        variant='actionCard'
       >
         <nav aria-label='Navigate to on-page sections' ref={navItemsRef}>
           {links.map(({ href, icon, id, text }) => {
@@ -155,7 +153,7 @@ const HomeNavigation = () => {
                 key={id}
                 variant='homeNavigation'
                 sx={{
-                  fontFamily: `heading`,
+                  fontFamily: `sans`,
                   color: `var(--theme-ui-colors-panel-text)`
                 }}
               >
@@ -165,7 +163,7 @@ const HomeNavigation = () => {
             )
           })}
         </nav>
-      </Card>
+      </div>
     </Fragment>
   )
 }

diff --git a/theme/src/gatsby-plugin-theme-ui/theme.js b/theme/src/gatsby-plugin-theme-ui/theme.js
@@ -62,9 +62,9 @@ const GradientBanner = {
 }
 
 export const card = {
+  borderRadius: 'card',
   backgroundColor: `var(--theme-ui-colors-panel-background)`,
   color: 'var(--theme-ui-colors-panel-text)',
-  borderRadius: `3px`,
   boxShadow: `default`,
   flexGrow: 1,
   padding: 3,
@@ -225,6 +225,11 @@ export default merge(tailwind, {
     }
   },
 
+  radii: {
+    default: '4px',
+    card: '8px',
+  },
+
   styles: {
     root: {
       color: `text`,

diff --git a/theme/src/templates/home.js b/theme/src/templates/home.js
@@ -33,19 +33,27 @@ const HomeTemplate = props => {
         }}
       >
         <Container>
-          <Grid columns={[null, null, `.67fr 1.5fr`]} gap={[null, 4]}>
+          <Grid
+            columns={[
+              null,
+              null,
+              `0.375fr 1.625fr`, /* Sidebar 18%, Content 82% */
+              `0.4fr 1.6fr` /* Sidebar 20%, Content 80% */
+            ]}
+            gap={[null, 4]}
+          >
             <aside sx={{ mb: [4, null] }}>
               <HomeNavigation />
             </aside>
             <main>
               <section>
-                <Card sx={{ mb: 4 }}>
+                <div sx={{ mb: 5 }}>
                   <HomeHeaderContent
                     avatar={avatar}
                     headline={headline}
                     subhead={subhead}
                   />
-                </Card>
+                </div>
               </section>
               <HomeWidgets />
             </main>