diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 46a9c2f..6137a36 100644 --- a/src/components/Footer/Footer.jsx +++ b/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` diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index c947d11..1f65a0b 100644 --- a/src/components/Header/Header.jsx +++ b/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 ( -
- - + return (<> + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- ); + + + + + + Subscribe + Already a subscriber? + + + + ) }; +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; diff --git a/src/components/MainStory/MainStory.jsx b/src/components/MainStory/MainStory.jsx index b67f92a..5bac902 100644 --- a/src/components/MainStory/MainStory.jsx +++ b/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` diff --git a/src/components/MainStoryGrid/MainStoryGrid.jsx b/src/components/MainStoryGrid/MainStoryGrid.jsx index 478c2e5..a8f91fd 100644 --- a/src/components/MainStoryGrid/MainStoryGrid.jsx +++ b/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 = () => { {SECONDARY_STORIES.map((story, index) => ( - + ))} @@ -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; diff --git a/src/components/OpinionStory/OpinionStory.jsx b/src/components/OpinionStory/OpinionStory.jsx index 75c00c6..c064437 100644 --- a/src/components/OpinionStory/OpinionStory.jsx +++ b/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 ( + <> @@ -12,11 +14,36 @@ const OpinionStory = ({ id, title, author, avatar }) => { + + ); }; +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` diff --git a/src/components/SecondaryStory/SecondaryStory.jsx b/src/components/SecondaryStory/SecondaryStory.jsx index 640bb7d..f48a363 100644 --- a/src/components/SecondaryStory/SecondaryStory.jsx +++ b/src/components/SecondaryStory/SecondaryStory.jsx @@ -1,18 +1,36 @@ import React from 'react'; import styled from 'styled-components'; +import { COLORS, QUERIES } from '../../constants'; const SecondaryStory = ({ id, title, image, location, abstract }) => { return ( - - - {image.alt} - {title} - {abstract} - - + <> + + + {image.alt} + {title} + {abstract} + + + + ); }; + +const Divider = styled.hr` + color: ${COLORS.gray[300]}; + size: 1px; + width: 100%; + margin: 16px 0px; + border: none; + border-top: 1px solid ${COLORS.gray[300]}; + + &:last-of-type { + display: none + } +` + const Wrapper = styled.article` display: grid; grid-template-areas: @@ -21,6 +39,11 @@ const Wrapper = styled.article` gap: 4px 16px; grid-template-columns: 120px 1fr; color: var(--color-gray-900); + + @media ${QUERIES.tabletOnly} { + display: flex; + flex-direction: column; + } `; const Image = styled.img` @@ -45,6 +68,10 @@ const Abstract = styled.p` grid-area: abstract; font-size: 1rem; white-space: pre-wrap; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; `; export default SecondaryStory; diff --git a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx index b13e627..3c32f5c 100644 --- a/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx +++ b/src/components/SpecialtyStoryGrid/SpecialtyStoryGrid.jsx @@ -6,6 +6,7 @@ import { MARKET_DATA, SPORTS_STORIES } from '../../data'; import MarketCard from '../MarketCard'; import SectionTitle from '../SectionTitle'; import MiniStory from '../MiniStory'; +import { COLORS, QUERIES } from '../../constants'; const SpecialtyStoryGrid = () => { return ( @@ -36,7 +37,9 @@ const SpecialtyStoryGrid = () => { {SPORTS_STORIES.map((data) => ( - + + + ))} @@ -45,16 +48,72 @@ const SpecialtyStoryGrid = () => { }; const Wrapper = styled.div` - display: grid; - gap: 48px; + display: grid; + + @media ${QUERIES.laptopAndUp} { + grid-template-columns: + repeat(auto-fill, minmax(220px, 1fr)) + ; + grid-template-columns: 1fr 1fr; + + & > *:nth-child(1) { + border-right: + 2px solid ${COLORS.gray[300]}; + padding-right: 24px; + } + + & > *:nth-child(2) { + padding-left: 24px; + } + } + } +`; + +const SportsStoryWrapper = styled.div` + min-width: 220px; +` + +const MarketsSection = styled.section` `; -const MarketsSection = styled.section``; +const MarketCards = styled.div` + display: grid; + gap: 16px; + grid-template-columns: + repeat(auto-fill, minmax(150px, 1fr)); +`; + +const SportsSection = styled.section` + margin-top: 32px; + + @media ${QUERIES.laptopAndUp} { + margin-top: -32px; + } + + @media ${QUERIES.tabletAndUp} { + display: flex; + flex-direction: column; + overflow: scroll; + grid-template-columns: revert; + } +`; -const MarketCards = styled.div``; +const SportsStories = styled.div` + display: grid; + gap: 16px; + grid-template-columns: + repeat(auto-fill, minmax(138px, 1fr)); -const SportsSection = styled.section``; + @media ${QUERIES.tabletAndUp} { + display: flex; + overflow: scroll; + grid-template-columns: revert; + } -const SportsStories = styled.div``; + @media ${QUERIES.laptopAndUp} { + display: flex; + grid-template-columns:revert; + } + `; export default SpecialtyStoryGrid;