Merge pull request #916: Splash page styling fixes

nextstrain · Jun 25, 2024 · 05aba2b · 05aba2b
2 parents 2cbfdf6 + 2839b91
commit 05aba2b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/static-site/src/components/splash/index.jsx b/static-site/src/components/splash/index.jsx
@@ -10,7 +10,7 @@ import { cards } from "./showcase.yaml";
 const Section = ({id, title, abstract, buttonText, buttonLink}) => (
   <div id={id} className="col-md-6" style={{paddingBottom: "40px"}}>
     <div style={{display: "flex", flexDirection: "column", alignItems: "center", height: "100%"}}>
-      <Styles.H1>{title}</Styles.H1>
+      <Styles.H1Small>{title}</Styles.H1Small>
       <Styles.CenteredFocusParagraph style={{flexGrow: 1}}>
         {abstract}
       </Styles.CenteredFocusParagraph>
@@ -37,7 +37,7 @@ const Splash = () => {
       </FlexCenter>
 
       <HugeSpacer />
-      <Styles.H1> Real-time tracking of pathogen evolution </Styles.H1>
+      <Styles.H1Small> Real-time tracking of pathogen evolution </Styles.H1Small>
       <SmallSpacer />
 
       <FlexCenter>
@@ -60,9 +60,9 @@ const Splash = () => {
 
       <HugeSpacer/>
 
-      <Styles.H1>
+      <Styles.H1Small>
         Featured analyses
-      </Styles.H1>
+      </Styles.H1Small>
 
       <BigSpacer/>
       <Showcase cards={cards} CardComponent={UrlShowcaseTile} />
@@ -122,7 +122,7 @@ const Splash = () => {
 
       {/* PHILOSOPHY */}
       <ScrollableAnchor id={'philosophy'}>
-        <Styles.H1>Philosophy</Styles.H1>
+        <Styles.H1Small>Philosophy</Styles.H1Small>
       </ScrollableAnchor>
       <div className="row">
         <div className="col-md-6">
@@ -178,7 +178,7 @@ const Splash = () => {
       <HugeSpacer/>
 
       <ScrollableAnchor id={'tools'}>
-        <Styles.H1>A bioinformatics and data viz toolkit</Styles.H1>
+        <Styles.H1Small>A bioinformatics and data viz toolkit</Styles.H1Small>
       </ScrollableAnchor>
 
       <FlexCenter>

diff --git a/static-site/src/components/splash/styles.jsx b/static-site/src/components/splash/styles.jsx
@@ -33,6 +33,10 @@ export const H1 = styled.div`
   margin-bottom: 0px;
 `;
 
+export const H1Small = styled(H1)`
+  font-size: 32px;
+`;
+
 export const H2 = styled.div`
   text-align: ${(props) => props.$left ? "left" : "center"};
   font-size: 24px;