Adjusted text scaling

laksjfalksjf · laksjfalksjf · commit 3ba3ac020f6e · 2020-02-16T18:56:00.000+01:00
Text is a bit bigger now and fits better to the size of the viewport.
diff --git a/src/containers/Credits.jsx b/src/containers/Credits.jsx
@@ -7,7 +7,15 @@ const { secondary } = colors;
 
 const CreditsBase = styled.section`
     background: ${secondary};
-    padding: 20vh 15vw;
+    padding: 15vh 15vw;
+    columns: 3;
+    p {
+        margin: 0em 0;
+        padding: 0;
+        .subtitle {
+            margin-bottom: 1em;
+        }
+    }
 `;
 
 const Meta = ({title, content}) => {
@@ -35,6 +43,7 @@ const Meta = ({title, content}) => {
 const Credits = ({ client, year, medium, contributors, recourses, copyright }) => {
     return (
        <CreditsBase>
+
            <Meta
                 title="Client"
                 content="Reinier de Graaf ziekehuis"
diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
@@ -9,6 +9,7 @@ const { secondary } = colors;
 const HeaderBase = styled.header`
     background: url(${props => props.backgroundImage});
     background-size: cover;
+    background-position: center;
     height: 100vh;
     padding: 5vh ${containerWidth.xs};
     display: flex;
@@ -31,9 +32,12 @@ const HeaderBase = styled.header`
 const HeaderInformation = styled.div`
     display: flex;
     align-items: center;
+    & > * {
+        width: 50%;
+    }
 `;
 
-const Header = ({title, subtitle, img, children}) => {
+const Header = ({title, subtitle, tagline, img, children}) => {
     return (
         <HeaderBase backgroundImage={img}>
             <HeaderInformation>
@@ -42,6 +46,7 @@ const Header = ({title, subtitle, img, children}) => {
                     <h1>{title}</h1>
                 </div>
                 <div>
+                    <p class="introduction">{tagline}</p>
                     {children}
                 </div>
             </HeaderInformation>
diff --git a/src/pages/case/dawny.jsx b/src/pages/case/dawny.jsx
@@ -29,19 +29,19 @@ const Case = () => (
         <Header
             title="Levens redden met datavisualisatie"
             subtitle="Reinier De Graaf Gasthuis"
+            tagline="Wij hebben een systeem gebouwd waarmee dokters de gezondheid van ouderen langdurig kunnen meten en analyseren om proactief ongevallen te voorkomen"
             img={usecase}
         >
-           <p class='big'> Wij hebben een systeem gebouwd waarmee dokters de gezondheid van ouderen langdurig kunnen analyseren om ongevallen voortijdig te voorkomen.</p>
         </Header>
         <TextAndImage img={lockup} alt="Nonin apparaat met app">
                 <h2>Inroducing Dawny</h2>
-                <p class='big'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                <p class='introduction'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </TextAndImage>
         <Container>
             <Row>
                 <Col md={6}>
                 <h2>De uitdaging</h2>
-                <p class='big'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                <p class='introduction'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </Col>
             </Row>
         </Container>
diff --git a/src/styles/textScaler.js b/src/styles/textScaler.js
@@ -17,7 +17,7 @@ const base = {
 };
 
 const headerSize = {
-    desktop: calcHeaderSize(base.scale.desktop, 1 * 1.125),
+    desktop: calcHeaderSize(base.scale.desktop, 1 * 1.5),
     mobile: calcHeaderSize(base.scale.mobile, 1 * 1.125),
 };
 
@@ -38,17 +38,17 @@ const textScaler = css`
         }
         /* ${headerSize.mobile} */
         @media (${mediaQueries.md}) {
-            font-size: calc(${base.fontSize} * 1.2);
+            font-size: calc(${base.fontSize} * 1.4);
             line-height: calc(${base.lineHeight.paragraph});
         };
         @media (${mediaQueries.lg}) {
-            font-size: calc(${base.fontSize}*1.3);
+            font-size: calc(${base.fontSize}*1.5);
         };
         @media (${mediaQueries.xl}) {
-            font-size: calc(${base.fontSize}*1.4);
+            font-size: calc(${base.fontSize}*1.6);
         };
         @media (${mediaQueries.xl}) and (${mediaQueries.xxl}) {
-            font-size: calc(${base.fontSize}*1.5);
+            font-size: calc(${base.fontSize}*1.66);
         };
     }
 
diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -123,8 +123,8 @@ const bytecode = {
             marginRight: '1.66m',
         },
         introduction: {
-            size: '1.9rem',
-            height: '1.2em',
+            size: '2rem',
+            height: '1.33em',
             spacing: '0.01em',
             font: paragraph,
             weight: regular,
