Remove display grid, make texts bigger

lexicongovernance · Feb 9, 2024 · 678cfd2 · 678cfd2
1 parent 14ca0bc
commit 678cfd2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/packages/berlin/src/components/header/Header.styled.tsx b/packages/berlin/src/components/header/Header.styled.tsx
@@ -13,6 +13,7 @@ export const HeaderContainer = styled.div`
   align-items: center;
   background-color: var(--color-white);
   display: flex;
+  gap: 2rem;
   justify-content: space-between;
   margin-inline: auto;
   width: min(85%, 1080px);
@@ -22,32 +23,32 @@ export const LogoContainer = styled.div`
   display: block;
 
   @media (min-width: 640px) {
+    align-items: center;
     cursor: pointer;
-    column-gap: 1rem;
-    display: grid;
-    grid-template-columns: 6rem 11rem;
-    grid-template-rows: 3.5rem 2rem;
-    row-gap: 0.5rem;
+    display: flex;
+    gap: 1rem;
   }
 `;
 
 export const LogoImage = styled.img`
-  grid-column: 1/2;
-  grid-row: 1/3;
   height: 6rem;
   width: 6rem;
 `;
 
+export const LogoTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
 export const LogoText = styled.h1`
   display: none;
 
   @media (min-width: 640px) {
     display: block;
     font-family: var(--font-family-title);
-    font-size: 1.5rem;
+    font-size: 1.85rem;
     font-weight: 600;
-    grid-column: 2/3;
-    grid-row: 1/2;
     line-height: 1.75rem;
   }
 `;
@@ -58,11 +59,9 @@ export const LogoSubtext = styled.h2`
   @media (min-width: 640px) {
     display: block;
     font-family: var(--font-family-body);
-    font-size: 0.875rem;
+    font-size: 1rem;
     font-style: italic;
     font-weight: 600;
-    grid-column: 2/3;
-    grid-row: 2/3;
     line-height: 1rem;
   }
 `;

diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -32,6 +32,7 @@ import {
   NavButtons,
   NavContainer,
   SyledHeader,
+  LogoTextContainer,
   ThemeButton,
 } from './Header.styled';
 
@@ -63,8 +64,10 @@ function Header() {
             height={96}
             width={96}
           />
-          <LogoText>Plural Research Experiment</LogoText>
-          <LogoSubtext>An experiment in research independence and innovation</LogoSubtext>
+          <LogoTextContainer>
+            <LogoText>Plural Research Experiment</LogoText>
+            <LogoSubtext>An experiment in research independence and innovation</LogoSubtext>
+          </LogoTextContainer>
         </LogoContainer>
         <NavContainer>
           <NavButtons>