EQ 95: Landing - Rebuild section 1

README.md

@@ -142,6 +142,7 @@ To convert any image type (`.png`, `.jpg`, etc.) to the `.webp` format, you can
 - Order declaration properties alphabetically, but ignore vendor prefixes (`-webkit`, `-moz`, `-o`, `-ms`). Meaning `-webkit-box-shadow` should be treated as starting with the letter `b`.
 - Order action selectors alphabetically.
 - Place `@media` declarations at the end of properties.
+- Place classes alphabetically after element selector. For example: `a {} p {} .button{} .item {}`.
 - For example:
 
 ```jsx
@@ -152,8 +153,8 @@ const sectionStyled = styled.section`
   -webkit-box-shadow: none;
   box-shadow: none;
   display: inline-block;
-  font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-  font-weight: ${({ theme }) => theme.font.copy.regular};
+  font-family: ${({ theme }) => theme.font.name}, sans-serif;
+  font-weight: ${({ theme }) => theme.font.regular};
   text-align: center;
   a {
     text-decoration: none;

components/404/content.js

@@ -24,7 +24,7 @@ const SectionStyled = styled.section`
   }
   p {
     font-size: 2em;
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     margin: 0 auto 20px auto;
     max-width: 600px;
   }
@@ -36,7 +36,7 @@ const SectionStyled = styled.section`
     text-transform: uppercase;
   }
   .subtitle {
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     font-size: 2em;
   }
   @media ${({ theme }) => theme.breakpoint.sm} {

components/atom/slides.js

@@ -106,7 +106,7 @@ const SectionStyled = styled.section`
     .link {
       background-color: ${({ theme }) => theme.color.navBarLinksListHover};
       color: ${({ theme }) => theme.color.white};
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       padding: 15px 30px;
       text-decoration: none;
       text-transform: uppercase;

components/browser-opt-out/content.js

@@ -16,8 +16,8 @@ const SectionStyled = styled.section`
     cursor: pointer;
     border: 2px solid ${({ theme }) => theme.color.black};
     display: inline-block;
-    font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-    font-weight: ${({ theme }) => theme.font.copy.medium};
+    font-family: ${({ theme }) => theme.font.name}, sans-serif;
+    font-weight: ${({ theme }) => theme.font.semiBold};
     text-decoration: none;
     text-transform: uppercase;
     transition: all 0.25s ease-out;
@@ -28,7 +28,7 @@ const SectionStyled = styled.section`
     }
   }
   .subtitle {
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     margin: 20px auto;
   }
 `

components/careers/application-form.js

@@ -20,7 +20,7 @@ const SectionStyled = styled.section`
       background-color: ${({ theme }) => theme.color.white};
       border: 2px solid ${({ theme }) => theme.color.black};
       cursor: pointer;
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       margin: 0 0 20px 0;
       padding: 10px 20px;
       text-transform: uppercase;

components/contact/info-form.js

@@ -27,7 +27,7 @@ const SectionStyled = styled.section`
     }
     .title {
       color: ${({ theme }) => theme.color.black};
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       font-size: 1.2em;
     }
   }
@@ -43,7 +43,7 @@ const SectionStyled = styled.section`
         background-color: ${({ theme }) => theme.color.white};
         border: 2px solid ${({ theme }) => theme.color.black};
         cursor: pointer;
-        font-weight: ${({ theme }) => theme.font.copy.bold};
+        font-weight: ${({ theme }) => theme.font.bold};
         margin: 0 0 20px 0;
         padding: 10px 20px;
         text-transform: uppercase;
@@ -86,18 +86,18 @@ const SectionStyled = styled.section`
           color: ${({ theme }) => theme.color.greyMedium};
         }
         .subtext {
-          font-weight: ${({ theme }) => theme.font.copy.bold};
+          font-weight: ${({ theme }) => theme.font.bold};
         }
         .subtitle {
           color: ${({ theme }) => theme.color.black};
-          font-weight: ${({ theme }) => theme.font.copy.bold};
+          font-weight: ${({ theme }) => theme.font.bold};
           margin: 0 0 20px 0;
         }
       }
     }
     .title {
       color: ${({ theme }) => theme.color.black};
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       font-size: 1.2em;
       margin: 0 0 10px 0;
     }

components/covid-19/article.js

@@ -24,10 +24,6 @@ const SectionStyled = styled.section`
     ul {
       color: ${({ theme }) => theme.color.greyMedium};
     }
-    .bold {
-      font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-      font-weight: ${({ theme }) => theme.font.copy.bold};
-    }
   }
   .header {
     align-items: center;
@@ -98,7 +94,7 @@ export default function Article() {
           Governments can leverage as readily as multinational technology
           companies. The most compelling attribute of mobile-phone-based Contact
           Tracing is that{' '}
-          <span className='bold'>
+          <span className='font-weight-bold'>
             benefits can be achieved without breaching the trust and privacy of
             the public
           </span>
@@ -110,7 +106,7 @@ export default function Article() {
           country and from location to location. All of our models and data are
           fully privacy compliant. Our team has studied the Contact Tracing
           solutions being deployed in other parts of the world with a{' '}
-          <span className='bold'>
+          <span className='font-weight-bold'>
             goal to maintain Canadian standards for societal norms and public
             trust while adopting international best practices
           </span>
@@ -123,41 +119,43 @@ export default function Article() {
           Our technology and our expertise provide the initial footprint for a
           Contact Tracing application that is tested and ready. Our focus has
           been on{' '}
-          <span className='bold'>
+          <span className='font-weight-bold'>
             Proactive Prevention NOT Policing Enforcement
           </span>{' '}
           and our work is based on the following principles:
         </p>
         <ul>
           <li>
-            <span className='bold'>Prevention</span> – Given the right tools,
-            stakeholders (e.g. public health officials, first responders,
-            citizens) can take proactive, preventative action to flatten the
-            curve.
+            <span className='font-weight-bold'>Prevention</span> – Given the
+            right tools, stakeholders (e.g. public health officials, first
+            responders, citizens) can take proactive, preventative action to
+            flatten the curve.
           </li>
           <li>
-            <span className='bold'>Privacy</span> – No solution should force a
-            trade-off between privacy and public health. Until COVID-19, few
-            topics were of more concern than privacy, user control, and public
-            confidence in the technologies we use in our daily lives.
+            <span className='font-weight-bold'>Privacy</span> – No solution
+            should force a trade-off between privacy and public health. Until
+            COVID-19, few topics were of more concern than privacy, user
+            control, and public confidence in the technologies we use in our
+            daily lives.
           </li>
           <li>
-            <span className='bold'>Knowledge</span> – Armed with the right
-            information, we believe individuals will act in accordance with
-            their own best interest, and that of their families, friends, and
-            communities.
+            <span className='font-weight-bold'>Knowledge</span> – Armed with the
+            right information, we believe individuals will act in accordance
+            with their own best interest, and that of their families, friends,
+            and communities.
           </li>
           <li>
-            <span className='bold'>Collaboration</span> – Broad-based solutions,
-            require coalitions – government, not-for-profit institutes, other
-            technology providers – in order to achieve critical mass.
+            <span className='font-weight-bold'>Collaboration</span> –
+            Broad-based solutions, require coalitions – government,
+            not-for-profit institutes, other technology providers – in order to
+            achieve critical mass.
           </li>
           <li>
-            <span className='bold'>Canadian</span> – We believe it is essential
-            that Canada leverage made-in-Canada solutions.
+            <span className='font-weight-bold'>Canadian</span> – We believe it
+            is essential that Canada leverage made-in-Canada solutions.
           </li>
         </ul>
-        <p className='bold'>
+        <p className='font-weight-bold'>
           Contact Tracing technology and expertise resides in Canada now and can
           be used to help flatten the curve today.
         </p>

components/financial-reports/unordered-list.js

@@ -19,7 +19,7 @@ const SectionStyled = styled.section`
       margin: 0 0 10px 0;
       a {
         color: ${({ theme }) => theme.color.black};
-        font-weight: ${({ theme }) => theme.font.copy.medium};
+        font-weight: ${({ theme }) => theme.font.semiBold};
         text-decoration: none;
       }
       h2 {

components/index/connected-devices.js

@@ -63,10 +63,6 @@ const SectionStyled = styled.section`
           margin: 0 0 10px 0;
           width: 40px;
         }
-        .bold {
-          font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-          font-weight: ${({ theme }) => theme.font.copy.bold};
-        }
       }
     }
     .top {
@@ -113,23 +109,23 @@ export default function ConnectedDevices() {
           <div>
             <MapPin aria-label='map pin' role='img' />
             <p>
-              <span className='bold'>40,000,000</span>
+              <span className='font-weight-bold'>40,000,000</span>
               <br />
               Points of interest
             </p>
           </div>
           <div>
             <Smile aria-label='smiley face' role='img' />
             <p>
-              <span className='bold'>300,000 +</span>
+              <span className='font-weight-bold'>300,000 +</span>
               <br />
               App integrations
             </p>
           </div>
           <div>
             <HardDrive aria-label='hard drive disk' role='img' />
             <p>
-              <span className='bold'>7 TB</span>
+              <span className='font-weight-bold'>7 TB</span>
               <br />
               Data daily
             </p>