Merge pull request #46 from strudel-science/update/minor-styling-updates

Update/minor styling updates - footer & header spacing

content/about/background.mdx

@@ -154,10 +154,6 @@ STRUDEL is an open source science project advocating for and advancing the inclu
         The Alfred P. Sloan Foundation <Link href="https://sloan.org/grant-detail/10074" target="_blank"> funded</Link> the team at LBNL to create a typology and design system for scientific software.
       </StepContent>
     </ProjectHistoryStep>
-    <ProjectHistoryStep>
-    </ProjectHistoryStep>
-    <ProjectHistoryStep>
-    </ProjectHistoryStep>
     <ProjectHistoryStep>
       <StepLabel>
         ### DOE Workshop on Workshop on the Science of Scientific Software Development and Use – Dec 2021
@@ -166,12 +162,6 @@ STRUDEL is an open source science project advocating for and advancing the inclu
         LBNL SciData UX team contributed <Link href="https://www.osti.gov/biblio/1843575/" target="_blank">position papers</Link> to <Link href="https://web.cvent.com/event/1b7d7c3a-e9b4-409d-ae2b-284779cfe72f/summary" target="_blank">DOE workshop</Link> on science of scientiifc software development outlining a range of sociotechnical needs including democratization of UX research and urgency of a science design system.
       </StepContent>
     </ProjectHistoryStep>
-    <ProjectHistoryStep>
-    </ProjectHistoryStep>
-    <ProjectHistoryStep>
-    </ProjectHistoryStep>
-    <ProjectHistoryStep>
-    </ProjectHistoryStep>
     <ProjectHistoryStep>
       <StepLabel>
         ### <em>“Experiences with a Flexible User Research Process to Build Data Change Tools”</em> paper — Sept 2020

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
 import { Box, Breakpoint, Container } from '@mui/material';
 import { Link } from '@mui/material';
 
@@ -15,6 +16,7 @@ export const Footer: React.FC<FooterProps> = ({
         borderTop: '1px solid',
         borderTopColor: 'neutral.main',
       }}
+      backgroundColor='secondary.main'
     >
       <Container
         maxWidth={containerWidth}
@@ -23,17 +25,19 @@ export const Footer: React.FC<FooterProps> = ({
           paddingBottom: 8
         }}
       >
-        <em>STRUDEL is an effort of the Berkeley Lab Scientific Data <Link href="https://crd.lbl.gov/divisions/scidata/" target="_blank" rel="noreferrer">(SciData)</Link> Division <Link href="https://ux.lbl.gov" target="_blank" rel="noreferrer">UX team</Link></em>.
-        <br />
-        <em>STRUDEL is generously funded by the Alfred P. Sloan Foundation, Liz Vu & Josh Greenberg Program Officers, initial grant <Link href="https://sloan.org/grant-detail/10074" target="_blank" rel="noreferrer">#10074</Link></em>
-        <br />
-        <br />
+
         <strong>Questions? Ideas? Looking to stay up to date?</strong>
+
         <ul>
           <li>Get in touch at <Link href="mailto:[email protected]" target="_blank">[email protected]</Link></li>
           <li>Join our mailing list by emailing <Link href="mailto:[email protected]" target="_blank">[email protected]</Link></li>
           <li>Visit us on <Link href='https://github.com/strudel-science/' target="_blank">GitHub</Link> and join the <Link href='https://github.com/orgs/strudel-science/discussions/' target='_blank'>Discussion</Link></li>
         </ul>
+        <br />
+        <em>STRUDEL is an effort of the Berkeley Lab Scientific Data <Link href="https://crd.lbl.gov/divisions/scidata/" target="_blank" rel="noreferrer">(SciData)</Link> Division <Link href="https://ux.lbl.gov" target="_blank" rel="noreferrer">UX team</Link></em>.
+        <br />
+        <em>STRUDEL is generously funded by the Alfred P. Sloan Foundation, Liz Vu & Josh Greenberg Program Officers, initial grant <Link href="https://sloan.org/grant-detail/10074" target="_blank" rel="noreferrer">#10074</Link></em>
+
       </Container>
     </Box>
   )

src/components/ProjectHistoryStepper.tsx

@@ -15,27 +15,28 @@ export const ProjectHistoryStepper: React.FC<PropsWithChildren> = ({ children })
         sx={{
           '& .MuiStepIcon-root.Mui-active.MuiSvgIcon-root': {
             overflow: 'visible',
-            color: 'black',
+            color: 'error.main',
             '& circle': {
-              fill: 'none',
-              r: 15,
-              stroke: theme.palette.success.main,
-              strokeWidth: 3,
-            },
+              fill: 'error.main',
+              r: 5,
+              stroke: theme.palette.error.main,
+              strokeWidth: 2,
+            }
+            ,
             '& text': {
-              fill: 'white',
+              display: 'none',
               fontSize: '1rem',
             }
           },
           '& .MuiStepConnector-line': {
-            borderColor: 'success.main',
+            borderColor: 'error.main',
             borderLeftStyle: 'dashed',
-            borderLeftWidth: 3
+            borderLeftWidth: 2
           },
           '& .MuiStep-root:not(:last-child) .MuiStepContent-root': {
-            borderColor: 'success.main',
+            borderColor: 'error.main',
             borderLeftStyle: 'dashed',
-            borderLeftWidth: 3,
+            borderLeftWidth: 2,
           },
           '& .MuiStepContent-root': {
             paddingLeft: 3.25,

src/components/StyledMarkdown.tsx

@@ -13,12 +13,12 @@ export const StyledMarkdown: React.FC<PropsWithChildren> = ({ children }) => {
       sx={{
         '& h1, & h2, & h3, & h4, & h5, & h6': {
           marginBottom: 2,
-          marginTop: 2,
+          marginTop: 6,
         },
         '& h2:not(:first-of-type)': {
           borderTop: '2px dotted',
           borderTopColor: 'error.light',
-          paddingTop: 2,
+          paddingTop: 3,
         },
         '& *:last-child': {
           marginBottom: 0,