Stephen exercise

src/components/Footer/Footer.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import MaxWidthWrapper from '../MaxWidthWrapper';
 
 import VisuallyHidden from '../VisuallyHidden';
+import { QUERIES } from '../../constants';
 
 const Footer = () => {
   return (
@@ -144,6 +145,16 @@ const TopRow = styled.div`
   font-size: 0.875rem;
   border-bottom: 1px solid var(--color-gray-700);
   padding: 24px 0;
+
+  @media ${QUERIES.tabletAndUp} {
+    flex-direction: row;
+    justify-content:center;
+  }
+
+  @media ${QUERIES.laptopAndUp} {
+    flex-direction: row;
+    justify-content:right;
+  }
 `;
 
 const Social = styled.div`
@@ -157,6 +168,12 @@ const Social = styled.div`
   path {
     stroke-width: 1.5px;
   }
+
+  @media ${QUERIES.tabletAndUp} {
+    padding-left: 32px;
+    flex-direction: row-reverse;
+    gap: 12px;
+  }
 `;
 
 const TopNavList = styled.ul`
@@ -170,6 +187,19 @@ const MainNavArea = styled.div`
   gap: 32px;
   padding: 32px 0 48px;
   text-align: center;
+
+  @media ${QUERIES.tabletAndUp} {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    text-align: left;
+  }
+
+  @media ${QUERIES.laptopAndUp} {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    text-align: left;
+    // justify-items: center;
+  }
 `;
 
 const MainNavHeading = styled.h2`
@@ -196,6 +226,10 @@ const Subfooter = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  @media ${QUERIES.laptopAndUp} {
+    align-items: start;
+  }
 `;
 
 const Logo = styled.a`

src/components/Header/Header.jsx

@@ -2,39 +2,97 @@ import React from 'react';
 import styled from 'styled-components';
 import { Menu, Search, User } from 'react-feather';
 
-import { QUERIES } from '../../constants';
+import { COLORS, FAMILIES, QUERIES } from '../../constants';
 
 import MaxWidthWrapper from '../MaxWidthWrapper';
 import Logo from '../Logo';
 import Button from '../Button';
 
 const Header = () => {
-  return (
-    <header>
-      <SuperHeader>
-        <Row>
+  return (<>
+      <MobileHeader>
+        <SuperHeader>
+          <Row>
+            <ActionGroup>
+              <button>
+                <Search size={24} />
+              </button>
+              <button>
+                <Menu size={24} />
+              </button>
+            </ActionGroup>
+            <ActionGroup>
+              <button>
+                <User size={24} />
+              </button>
+            </ActionGroup>
+          </Row>
+        </SuperHeader>
+        <MainHeader>
+          <Logo />
+        </MainHeader>
+      </MobileHeader>
+      <DesktopHeader>
+        <MainHeader>
           <ActionGroup>
-            <button>
-              <Search size={24} />
-            </button>
-            <button>
-              <Menu size={24} />
-            </button>
-          </ActionGroup>
-          <ActionGroup>
-            <button>
-              <User size={24} />
-            </button>
-          </ActionGroup>
-        </Row>
-      </SuperHeader>
-      <MainHeader>
-        <Logo />
-      </MainHeader>
-    </header>
-  );
+              <button>
+                <Search size={24} />
+              </button>
+              <button>
+                <Menu size={24} />
+              </button>
+            </ActionGroup>
+          <Logo />
+          <SubscribeButtonWrapper>
+            <SubscribeButton>Subscribe</SubscribeButton>
+            <AlreadyMemberLink>Already a subscriber?</AlreadyMemberLink>
+          </SubscribeButtonWrapper>
+        </MainHeader>
+      </DesktopHeader>
+  </>)
 };
 
+const SubscribeButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const SubscribeButton = styled.button`
+  background-color: ${COLORS.primary};;
+  padding: 8px;
+  border-radius: 4px;
+  color: ${COLORS.white};
+  text-transform: uppercase;
+  font-family: ${FAMILIES.sansSerif};
+  font-weight: bold;
+  width: 100%;
+  text-align: center;
+`
+
+const AlreadyMemberLink = styled.a`
+  font-family: ${FAMILIES.serif};
+  font-style: italic;
+  color: ${COLORS.gray};
+  padding-top: 4px;
+  text-decoration: underline;
+`
+
+const DesktopHeader = styled.header`
+  display: none;
+
+  @media ${QUERIES.laptopAndUp} {
+    display: revert;
+
+  }
+`
+
+const MobileHeader = styled.header`
+    @media ${QUERIES.laptopAndUp} {
+    display: none;
+  }
+`
+
 const SuperHeader = styled.div`
   padding: 16px 0;
   background: var(--color-gray-900);
@@ -65,6 +123,11 @@ const MainHeader = styled(MaxWidthWrapper)`
   justify-content: center;
   margin-top: 32px;
   margin-bottom: 48px;
+
+    @media ${QUERIES.laptopAndUp} {
+    justify-content: space-between;
+
+  }
 `;
 
 export default Header;

src/components/MainStory/MainStory.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { QUERIES } from '../../constants';
 
 const MainStory = ({
   id,
@@ -44,6 +45,15 @@ 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;
+    overflow: hidden;
+  }
 `;
 
 const Location = styled.span`

src/components/MainStoryGrid/MainStoryGrid.jsx

@@ -12,6 +12,7 @@ import MainStory from '../MainStory';
 import SecondaryStory from '../SecondaryStory';
 import OpinionStory from '../OpinionStory';
 import Advertisement from '../Advertisement';
+import { COLORS, QUERIES } from '../../constants';
 
 const MainStoryGrid = () => {
   return (
@@ -23,7 +24,7 @@ const MainStoryGrid = () => {
       <SecondaryStorySection>
         <StoryList>
           {SECONDARY_STORIES.map((story, index) => (
-            <SecondaryStory key={story.id} {...story} />
+              <SecondaryStory key={story.id} {...story} />
           ))}
         </StoryList>
       </SecondaryStorySection>
@@ -46,13 +47,29 @@ const MainStoryGrid = () => {
 
 const Wrapper = styled.div`
   display: grid;
+  grid-template-columns: 1fr;
   grid-template-areas:
     'main-story'
     'secondary-stories'
     'opinion-stories'
     'advertisement';
-  gap: 48px;
+  gap: 16px;
   margin-bottom: 48px;
+
+  @media ${QUERIES.tabletAndUp} {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      'main-story secondary-stories'
+      'advertisement advertisement'
+      'opinion-stories opinion-stories';
+  }
+
+  @media ${QUERIES.laptopAndUp} {
+  grid-template-columns: 3fr 2fr 2fr;
+  grid-template-areas:
+    'main-story secondary-stories opinion-stories'
+    'main-story advertisement advertisement'
+  }
 `;
 
 const MainStorySection = styled.section`
@@ -61,19 +78,48 @@ const MainStorySection = styled.section`
 
 const SecondaryStorySection = styled.section`
   grid-area: secondary-stories;
+
+  @media ${QUERIES.tabletAndUp} {
+    border-left: 1px solid ${COLORS.gray[300]};
+    padding-left: 24px;
+    margin-left: 24px;
+  }
 `;
 
 const StoryList = styled.div`
   display: flex;
   flex-direction: column;
+
+  // @media ${QUERIES.tabletOnly} {
+  //   flex-direction: row;
+  // }
 `;
 
 const OpinionSection = styled.section`
   grid-area: opinion-stories;
+
+  @media ${QUERIES.laptopAndUp} {
+    border-left: 1px solid ${COLORS.gray[300]};
+    padding-left: 24px;
+    margin-left: 24px;
+  }
+
+  @media ${QUERIES.tabletOnly} {
+    flex: 1;
+    & > *:nth-child(2) {
+      flex-direction: row;
+    }
+  }
 `;
 
 const AdvertisementSection = styled.section`
   grid-area: advertisement;
+
+  @media ${QUERIES.laptopAndUp} {
+    border-top: 1px solid ${COLORS.gray[300]};
+    padding-left: 24px;
+    margin-left: 24px;
+  }
 `;
 
 export default MainStoryGrid;

src/components/OpinionStory/OpinionStory.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import { COLORS, QUERIES } from '../../constants';
 
 const OpinionStory = ({ id, title, author, avatar }) => {
   return (
+    <>
     <a href={`/story/${id}`}>
       <Wrapper>
         <Avatar alt="" src={avatar} />
@@ -12,11 +14,36 @@ const OpinionStory = ({ id, title, author, avatar }) => {
         </div>
       </Wrapper>
     </a>
+    <Divider />
+    </>
   );
 };
 
+const Divider = styled.hr`
+  size: 1px;
+  width: 100%;
+  margin: 16px 0px;
+  padding-left: 32px;
+  border: none;
+  border-top: 1px solid ${COLORS.gray[300]};
+
+  &:last-of-type {
+    display: none;
+  }
+
+  @media ${QUERIES.tabletOnly} {
+      display: none;
+  }
+`
+
 const Wrapper = styled.article`
   color: var(--color-gray-900);
+
+  @media not (${QUERIES.tabletOnly}) {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+  }
 `;
 
 const Avatar = styled.img`
@@ -25,6 +52,10 @@ const Avatar = styled.img`
   height: 48px;
   border-radius: 50%;
   object-fit: cover;
+
+  @media ${QUERIES.laptopAndUp} {
+    display: revert;
+  }
 `;
 
 const AuthorName = styled.p`