diff --git a/CHANGELOG.md b/CHANGELOG.md index 8659bc43..ddb19009 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -177,7 +177,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Wrapper - Decorations/Bracket - Decorations/Stick - + - TwoColumn - Extracted :root from themes.scss to globals.scss - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility - Updated SearchInput width to 100% for better styling diff --git a/components/blog/BlogPostContainer/index.js b/components/blog/BlogPostContainer/index.js index 5bc9581b..2973af87 100644 --- a/components/blog/BlogPostContainer/index.js +++ b/components/blog/BlogPostContainer/index.js @@ -26,9 +26,11 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => { content='Feel free to contact us.' image='/images/svg/square-brackets.svg' altTag='' - $contentType='questions' + color='var(--color-primary-content)' + bgColor='var(--color-white)' link='/contact' linkText='Contact us' + customInnerClass='questions' customBtnClass='inverted-grey' /> diff --git a/components/containers/TwoColumn/TwoColumn.module.scss b/components/containers/TwoColumn/TwoColumn.module.scss new file mode 100644 index 00000000..be223774 --- /dev/null +++ b/components/containers/TwoColumn/TwoColumn.module.scss @@ -0,0 +1,234 @@ +@use '@/styles/index' as *; + +.wrapper { + align-self: stretch; + + .inner { + padding: 5rem 0; + margin: 0 auto; + width: 90%; + + .inner__content { + margin-bottom: 5rem; + @include desktop { + flex-basis: 50%; + margin-bottom: 0; + } + + .title { + font-weight: bold; + margin: 0; + } + + .content { + display: flex; + align-items: center; + margin: 3.875rem 0 2.5rem; + max-width: 39rem; + font-size: 1.5rem; + line-height: 1.938rem; + + a { + text-decoration: underline; + text-underline-offset: 2px; + + &:hover { + opacity: 0.6; + text-decoration: none; + } + } + } + } + + .inner__image { + width: 100%; + height: 34rem; + position: relative; + + @include desktop { + width: 25rem; + } + + .img { + border-radius: 0.25rem; + object-fit: cover; + } + } + + // Homepage + + &.get-involved { + @include desktop-breakpoint-minus { + padding-bottom: 0; + } + } + + &.non-profit { + @include desktop-breakpoint-minus { + .inner__content { + margin-bottom: 0; + } + } + } + + // end Homepage + + //About page + + &.our-process, + &.peer-reviews, + &.get-started, + &.our-purpose, + &.our-background, + &.version-control, + &.questions { + .inner__image { + height: 10rem; + .img { + object-fit: contain; + } + } + } + + &.our-background { + .inner__image { + @include desktop { + height: 15rem; + } + } + } + + &.our-process { + .inner__image { + @include desktop { + height: 12rem; + } + } + } + + &.our-purpose { + .inner__image { + @include desktop { + height: 18rem; + } + } + } + + &.get-started { + .inner__image { + @include desktop { + height: 20rem; + } + } + } + + &.questions { + .inner__image { + @include desktop { + height: 13rem; + } + } + } + + &.wanna-learn-more { + .content { + margin: 0; + } + + .inner__image { + height: 10rem; + + @include desktop { + height: 15rem; + } + + .img { + object-fit: contain; + } + } + } + + &.two-text-columns { + justify-content: space-evenly; + + .inner { + padding: 0; + margin: 0; + } + + .inner__content { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + h2 { + font-size: 2rem; + line-height: 2.5rem; + } + + .inner { + margin: 0; + padding: 0; + } + + .inner__content { + flex-basis: unset; + + @include desktop { + width: 25rem; + } + } + } + + &.second-text-column { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + .inner { + height: 100%; + } + + .inner__content { + height: 100%; + display: flex; + position: relative; + + @include desktop { + a { + position: absolute; + bottom: 0; + } + } + } + } + + &.get-started, + &.questions { + padding-bottom: 0; + .inner__image { + display: none; + + @include desktop { + display: unset; + } + } + + @include desktop { + padding-bottom: 5rem; + } + } + + // end About page + + @include desktop { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + } +} diff --git a/components/containers/TwoColumn/index.js b/components/containers/TwoColumn/index.js index 4cf3240f..0c6b6867 100644 --- a/components/containers/TwoColumn/index.js +++ b/components/containers/TwoColumn/index.js @@ -1,58 +1,61 @@ -import ButtonLink from '@/components/buttons/ButtonLink'; -import TwoColumnStyles from './styles'; - -export default function TwoColumn({ - image, - altTag, - title, - content, - rowOrder, - color, - bgColor, - link, - customBtnClass, - linkText = 'Learn more', - secondTextColumn, - openNewTab, - $contentType, -}) { - //Set Styles based on content type - const S = TwoColumnStyles[$contentType] - ? TwoColumnStyles[$contentType] - : TwoColumnStyles.base; - - // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop - return ( - - - - {title && {title}} - {content} - {link && ( - - {linkText} - - )} - - {secondTextColumn && secondTextColumn} - {!secondTextColumn && image && ( - - - - )} - - - ); -} +import styles from './TwoColumn.module.scss'; +import ButtonLink from '@/components/buttons/ButtonLink'; +import Container from '@/components/containers/Container'; +import Image from 'next/image'; +import { combineClasses } from '@/utils/classnames'; + +export default function TwoColumn({ + image, + altTag, + title, + content, + rowOrder, + color, + bgColor, + link, + customBtnClass, + customInnerClass, + linkText = 'Learn more', + secondTextColumn, + openNewTab, +}) { + const styleProps = { + wrapper: { + color, + backgroundColor: bgColor, + }, + container: { + flexDirection: rowOrder, + }, + }; + + // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop + return ( +
+ +
+ {title &&

{title}

} +
{content}
+ {link && ( + + {linkText} + + )} +
+ {secondTextColumn || + (image && ( +
+ {altTag} +
+ ))} + +
+ ); +} diff --git a/components/containers/TwoColumn/styles.js b/components/containers/TwoColumn/styles.js deleted file mode 100644 index 73a2c4a3..00000000 --- a/components/containers/TwoColumn/styles.js +++ /dev/null @@ -1,331 +0,0 @@ -import styled, { css } from 'styled-components'; -import Container from '../Container'; -import Image from 'next/image'; - -//TwoColumn Base styles - -const TwoColumnWrapper = styled.section` - align-self: stretch; - color: ${props => (props.$color ? props.$color : '')}; - background-color: ${props => (props.$bgColor ? props.$bgColor : '')}; -`; - -const InnerContainer = styled(Container)` - padding: 5rem 0; - margin: 0 auto; - width: 90%; - max-width: ${({ theme }) => theme.breakpoints.lgDesktop}; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - } - `} -`; - -const InnerContent = styled.div` - margin-bottom: 5rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - flex-basis: 50%; - margin-bottom: 0; - } - `} -`; - -const Title = styled.h2` - font-weight: bold; - margin: 0; - color: ${props => - props.$color ? props.$color : ({ theme }) => theme.colors.primaryContent}; -`; - -const Content = styled.div` - display: flex; - align-items: center; - margin: 3.875rem 0 2.5rem; - max-width: 39rem; - font-size: 1.5rem; - line-height: 1.938rem; - - a { - text-decoration: underline; - text-underline-offset: 2px; - - &:hover { - opacity: 0.6; - text-decoration: none; - } - } -`; - -const InnerImageWrapper = styled.div` - width: 100%; - height: 34rem; - position: relative; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - width: 25rem; - } - `} -`; - -const InnerImage = styled(Image)` - border-radius: 0.25rem; - object-fit: cover; -`; - -const BaseStyles = { - TwoColumnWrapper, - InnerContainer, - InnerContent, - Title, - Content, - InnerImageWrapper, - InnerImage, -}; - -// About page InnerImage -const AboutUsInnerImage = styled(InnerImage)` - object-fit: contain; -`; - -const AboutUs = { - ...BaseStyles, - InnerImage: AboutUsInnerImage, -}; - -// Our Process -const OurProcessInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 12rem; - } - `} -`; - -const OurProcess = { - ...AboutUs, - InnerImageWrapper: OurProcessInnerImageWrapper, -}; - -// Get Started -const GetStartedInnerContainer = styled(InnerContainer)` - padding-bottom: 0px; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - padding-bottom: 5rem; - } - `} -`; - -const GetStartedInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - display: none; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 20rem; - display: unset; - } - `} -`; - -const GetStarted = { - ...AboutUs, - InnerContainer: GetStartedInnerContainer, - InnerImageWrapper: GetStartedInnerImageWrapper, -}; - -// Our Purpose -const OurPurposeInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 18rem; - } - `} -`; - -const OurPurpose = { - ...AboutUs, - InnerImageWrapper: OurPurposeInnerImageWrapper, -}; - -// Our Background -const OurBackgroundInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 15rem; - } - `} -`; - -const OurBackground = { - ...AboutUs, - InnerImageWrapper: OurBackgroundInnerImageWrapper, -}; - -// Get Involved -const GetInvolvedInnerContainer = styled(InnerContainer)` - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktopMinus}) { - padding-bottom: 0; - } - `} -`; - -const GetInvolved = { - ...BaseStyles, - InnerContainer: GetInvolvedInnerContainer, -}; - -// Non Profit -const NonProfitInnerContent = styled(InnerContent)` - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktopMinus}) { - margin-bottom: 0; - } - `} -`; - -const NonProfit = { - ...BaseStyles, - InnerContent: NonProfitInnerContent, -}; - -// Wanna Learn More -const WannaLearnMoreContent = styled(Content)` - margin: 0; -`; - -const WannaLearnMoreInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 15rem; - } - `} -`; - -const WannaLearnMoreInnerImage = styled(InnerImage)` - object-fit: contain; -`; - -const WannaLearnMore = { - ...BaseStyles, - Content: WannaLearnMoreContent, - InnerImageWrapper: WannaLearnMoreInnerImageWrapper, - InnerImage: WannaLearnMoreInnerImage, -}; - -// Questions -const QuestionsInnerContainer = styled(InnerContainer)` - padding-bottom: 0px; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - padding-bottom: 5rem; - } - `} -`; - -const QuestionsInnerImageWrapper = styled(InnerImageWrapper)` - height: 10rem; - display: none; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - height: 13rem; - display: unset; - } - `} -`; - -const QuestionsMore = { - ...AboutUs, - InnerContainer: QuestionsInnerContainer, - InnerImageWrapper: QuestionsInnerImageWrapper, -}; - -// Two Text Columns -const TwoTextColumnsInnerContainer = styled(InnerContainer)` - justify-content: space-evenly !important; - - h2 { - font-size: 2rem; - line-height: 2.5rem; - } - - a { - margin-top: auto; - color: ${({ theme }) => theme.colors.lightBg}; - } - - a:hover { - color: ${({ theme }) => theme.colors.primaryContent}; - } -`; - -const TwoTextColumnsInnerContent = styled(InnerContent)` - display: flex; - flex-direction: column; - align-items: flex-start; - flex-basis: unset !important; - - ${props => css` - @media (min-width: ${props.theme.breakpoints.desktop}) { - width: 25rem; - } - `} -`; - -const TwoTextColumns = { - ...BaseStyles, - InnerContainer: TwoTextColumnsInnerContainer, - InnerContent: TwoTextColumnsInnerContent, -}; - -//Second Text Columns -const SecondTextColumnInnerContent = styled(TwoTextColumnsInnerContent)` - height: 100%; -`; - -const SecondTextColumnInnerContainer = styled(InnerContainer)` - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; -`; - -const SecondTextColumn = { - ...BaseStyles, - InnerContainer: SecondTextColumnInnerContainer, - InnerContent: SecondTextColumnInnerContent, -}; - -export default { - 'our-process': OurProcess, - 'get-started': GetStarted, - 'our-purpose': OurPurpose, - 'our-background': OurBackground, - 'get-involved': GetInvolved, - 'non-profit': NonProfit, - 'wanna-learn-more': WannaLearnMore, - questions: QuestionsMore, - 'two-text-columns': TwoTextColumns, - 'second-text-column': SecondTextColumn, - base: BaseStyles, -}; diff --git a/pages/about.js b/pages/about.js index e5ff5921..82388557 100644 --- a/pages/about.js +++ b/pages/about.js @@ -7,11 +7,8 @@ import Container from '@/components/containers/Container'; import { Row } from '@/components/containers/Row'; import Member from '@/components/containers/Member'; import { whoWeAre } from '@/utils/about'; -import { useTheme } from 'styled-components'; export default function AboutUs() { - const theme = useTheme(); - return (
@@ -32,9 +29,8 @@ export default function AboutUs() { rowOrder='row' image='/images/svg/square-brackets.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.primaryAccent} - $contentType='our-background' + bgColor='var(--color-primary-accent)' + customInnerClass='our-background' /> @@ -73,9 +69,7 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/open-angle-bracket.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='our-process' + customInnerClass='peer-reviews' /> @@ -138,9 +130,7 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/semi-colon.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='our-purpose' + customInnerClass='our-purpose' /> @@ -149,9 +139,8 @@ export default function AboutUs() { content={''} image='/images/svg/close-curly-bracket.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.lightBg} - $contentType='wanna-learn-more' + bgColor='var(--color-light-bg)' + customInnerClass='wanna-learn-more' /> } /> @@ -218,9 +205,7 @@ export default function AboutUs() { rowOrder='row-reverse' image='/images/svg/slash.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='get-started' + customInnerClass='get-started' link='mailto:hello@webdevpath.co' linkText='Ping us' customBtnClass='inverted-grey' @@ -255,12 +240,10 @@ export default function AboutUs() { content='Feel free to contact us.' image='/images/svg/hashtag.svg' altTag='' - color={theme.colors.primaryContent} - bgColor={theme.colors.white} - $contentType='questions' link='/contact' linkText='Contact us' customBtnClass='inverted-grey' + customInnerClass='questions' />
diff --git a/pages/index.js b/pages/index.js index 6a771041..3baa8192 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,10 +5,8 @@ import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss' import Stick from '@/components/decorations/Stick'; import stickStyles from '@/components/decorations/Stick/Stick.module.scss'; import RevealContentContainer from '@/components/containers/RevealContentContainer'; -import { useTheme } from 'styled-components'; export default function Home() { - const theme = useTheme(); return ( <> @@ -19,7 +17,7 @@ export default function Home() { content='Web Dev Path is an open-source initiative that provides hands-on experience in a simulated professional environment to people who seek to begin or move forward in their web development journey.' link='/about' customBtnClass='inverted-grey' - bgColor={theme.colors.lightBg} + bgColor='var(--color-light-bg)' /> @@ -29,8 +27,8 @@ export default function Home() { title='Get involved.' content='Web Dev Path runs on volunteers. Here are the ways you can get involved with us:' rowOrder='row-reverse' - $contentType='get-involved' - bgColor={theme.colors.white} + customInnerClass='get-involved' + bgColor='var(--color-white)' /> @@ -73,10 +71,10 @@ export default function Home() {