feat: mobile header + ellipsis

package.json

@@ -8,7 +8,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-feather": "2.0.9",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "styled-components": "5.2.1"
   },
   "scripts": {

src/components/Advertisement/Advertisement.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import styled from 'styled-components/macro';
-import { QUERIES } from '../../constants';
+import React from "react";
+import styled from "styled-components/macro";
+import { QUERIES } from "../../constants";
 
 const Advertisement = (props) => {
   return (
@@ -20,6 +20,12 @@ const Wrapper = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 8px;
+
+  @media ${QUERIES.desktopAndUp} {
+    border-top: 1px solid var(--color-gray-300);
+    padding-top: 16px;
+    margin-top: 16px;
+  }
 `;
 
 const Prefix = styled.p`
@@ -30,7 +36,7 @@ const Prefix = styled.p`
 
   &::before,
   &::after {
-    content: '—';
+    content: "—";
     margin: 0 8px;
   }
 `;

src/components/Footer/Footer.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Twitter, Facebook } from 'react-feather';
-import styled from 'styled-components/macro';
-import MaxWidthWrapper from '../MaxWidthWrapper';
+import React from "react";
+import { Twitter, Facebook } from "react-feather";
+import styled from "styled-components/macro";
+import MaxWidthWrapper from "../MaxWidthWrapper";
 
-import VisuallyHidden from '../VisuallyHidden';
+import VisuallyHidden from "../VisuallyHidden";
+import { QUERIES } from "../../constants";
 
 const Footer = () => {
   return (
@@ -25,15 +26,11 @@ const Footer = () => {
           </nav>
           <Social>
             <a href="/">
-              <VisuallyHidden>
-                Visit The Grid Times on Facebook
-              </VisuallyHidden>
+              <VisuallyHidden>Visit The Grid Times on Facebook</VisuallyHidden>
               <Facebook size={20} />
             </a>
             <a href="/">
-              <VisuallyHidden>
-                Visit The Grid Times on Twitter
-              </VisuallyHidden>
+              <VisuallyHidden>Visit The Grid Times on Twitter</VisuallyHidden>
               <Twitter size={20} />
             </a>
           </Social>
@@ -144,6 +141,19 @@ const TopRow = styled.div`
   font-size: 0.875rem;
   border-bottom: 1px solid var(--color-gray-700);
   padding: 24px 0;
+
+  @media ${QUERIES.tabletAndUp} {
+    gap: 48px;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  @media ${QUERIES.desktopAndUp} {
+    justify-content: flex-end;
+  }
+}
+
+}
 `;
 
 const Social = styled.div`
@@ -157,6 +167,8 @@ const Social = styled.div`
   path {
     stroke-width: 1.5px;
   }
+
+  flex-direction: row-reverse;
 `;
 
 const TopNavList = styled.ul`
@@ -170,6 +182,13 @@ const MainNavArea = styled.div`
   gap: 32px;
   padding: 32px 0 48px;
   text-align: center;
+
+  @media ${QUERIES.tabletAndUp} {
+    display: grid;
+    flex-direction: revert;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    text-align: left;
+  }
 `;
 
 const MainNavHeading = styled.h2`
@@ -196,6 +215,10 @@ const Subfooter = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  @media ${QUERIES.desktopAndUp} {
+    align-items: flex-start;
+  }
 `;
 
 const Logo = styled.a`

src/components/Header/Header.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import styled from 'styled-components/macro';
-import { Menu, Search, User } from 'react-feather';
+import React from "react";
+import styled from "styled-components/macro";
+import { Menu, Search, User } from "react-feather";
 
-import { QUERIES } from '../../constants';
+import { QUERIES } from "../../constants";
 
-import MaxWidthWrapper from '../MaxWidthWrapper';
-import Logo from '../Logo';
-import Button from '../Button';
+import MaxWidthWrapper from "../MaxWidthWrapper";
+import Logo from "../Logo";
+import Button from "../Button";
 
 const Header = () => {
   return (
@@ -29,16 +29,33 @@ const Header = () => {
         </Row>
       </SuperHeader>
       <MainHeader>
+        <DesktopActionGroup>
+          <button>
+            <Search size={24} />
+          </button>
+          <button>
+            <Menu size={24} />
+          </button>
+        </DesktopActionGroup>
         <Logo />
+        <SubscribeWrapper>
+          <Button>Subscribe</Button>
+          <SubscribeText>Already a subscriber ?</SubscribeText>
+        </SubscribeWrapper>
       </MainHeader>
     </header>
   );
 };
 
 const SuperHeader = styled.div`
+  position: relative;
   padding: 16px 0;
   background: var(--color-gray-900);
   color: white;
+
+  @media ${QUERIES.laptopAndUp} {
+    display: none;
+  }
 `;
 
 const Row = styled(MaxWidthWrapper)`
@@ -59,12 +76,64 @@ const ActionGroup = styled.div`
   }
 `;
 
+const SubscribeWrapper = styled.div`
+  display: none;
+  position: relative;
+
+  @media ${QUERIES.laptopAndUp} {
+    display: flex;
+    justify-self: end;
+    align-self: center;
+  }
+`;
+
+const SubscribeText = styled.a`
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  margin-top: 38px;
+  font-family: Crimson Text;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 22px;
+  text-decoration-line: underline;
+`;
+
+const DesktopActionGroup = styled.div`
+  display: none;
+
+  svg {
+    display: block;
+  }
+
+  @media ${QUERIES.laptopAndUp} {
+    display: flex;
+    gap: 24px;
+  }
+`;
+
 const MainHeader = styled(MaxWidthWrapper)`
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 32px;
   margin-bottom: 48px;
+
+  @media ${QUERIES.tabletAndUp} {
+    margin-top: 48px;
+    margin-bottom: 72px;
+  }
+
+  @media ${QUERIES.laptopAndUp} {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    height: 120px;
+    justify-content: revert;
+    align-items: center;
+    margin-top: 16px;
+    margin-bottom: 72px;
+  }
 `;
 
 export default Header;

src/components/Logo/Logo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 import format from 'date-fns/format';
+import { QUERIES } from "../../constants";
 
 const Logo = (props) => {
   return (
@@ -22,6 +23,10 @@ const Wrapper = styled.div`
 const Link = styled.a`
   font-family: var(--font-family-logo);
   font-size: 3rem;
+
+  @media ${QUERIES.tabletAndUp} {
+    font-size: 4rem;
+  }
 `;
 
 const TodaysDate = styled.p`

src/components/MainStory/MainStory.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/macro';
+import { QUERIES } from '../../constants';
 
 const MainStory = ({
   id,
@@ -44,6 +45,16 @@ const Abstract = styled.p`
   font-size: 1rem;
   margin-bottom: 1em;
   white-space: pre-wrap;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+  overflow: hidden;
+
+  @media ${QUERIES.tabletAndUp} {
+    -webkit-line-clamp: 16;
+  }
+
 `;
 
 const Location = styled.span`