diff --git a/client/modules/IDE/pages/About.jsx b/client/modules/IDE/pages/About.jsx index dabef5e89a..a1852f2cc9 100644 --- a/client/modules/IDE/pages/About.jsx +++ b/client/modules/IDE/pages/About.jsx @@ -3,256 +3,468 @@ import { useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; + +import { remSize, prop } from '../../../theme'; import AsteriskIcon from '../../../images/p5-asterisk.svg'; import Nav from '../components/Header/Nav'; import packageData from '../../../../package.json'; import LogoIcon from '../../../images/p5js-square-logo.svg'; -function About(props) { +export const AboutContent = styled.div` + margin: ${remSize(42)} ${remSize(295)}; + + @media (max-width: 1279px) { + margin: ${remSize(20)}; + width: 95%; + overflow-y: auto; + overflow-x: hidden; + flex-direction: column; + } +`; + +export const IntroSection = styled.div` + & h1 { + font-size: ${remSize(32)}; + font-weight: 700; + } + & button { + padding: ${remSize(12)}; + border: ${remSize(1)} solid black; + border-radius: ${remSize(24)}; + } +`; + +export const IntroSectionContent = styled.div` + display: flex; + align-items: center; + + & div { + height: 100%; + align-items: center; + font-weight: 550; + font-size: ${remSize(24)}; + margin: ${remSize(24)}; + } + + & svg { + & path { + // fill: ${prop('logo-color')}; + } + } + + @media (max-width: 769px) { + flex-direction: column; + align-items: start; + + & div { + margin: ${remSize(24)} 0; + } + } +`; + +export const IntroSectionDescription = styled.div` + line-height: ${remSize(27)}; + font-size: ${remSize(16)}; + margin: ${remSize(24)} 0; + + p { + margin-bottom: ${remSize(24)}; + } +`; + +export const Section = styled.div` + margin: ${remSize(50)} 0; + + & h3 { + font-size: ${remSize(24)}; + font-weight: 600; + } + + @media (max-width: 1279px) { + & h3 { + padding-bottom: ${remSize(20)}; + } + } + + @media (max-width: 769px) { + display: grid; + } +`; + +export const SectionContainer = styled.div` + display: flex; + justify-content: row; + padding-top: ${remSize(40)}; + font-size: ${remSize(16)}; + width: 100%; + + @media (max-width: 1279px) { + flex-wrap: wrap; + padding-top: 0; + } + + @media (max-width: 769px) { + display: grid; + } +`; + +export const SectionItem = styled.div` + width: 33%; + display: flex; + line-height: ${remSize(19.5)}; + font-size: ${remSize(14)}; + padding-right: ${remSize(30)}; + + & p { + margin-top: ${remSize(7)}; + } + + & a { + font-weight: 700; + font-size: ${remSize(16)}; + } + + & svg { + padding-right: ${remSize(8)}; + width: ${remSize(30)}; + height: ${remSize(20)}; + & path { + // fill: ${prop('logo-color')}; + // stroke: ${prop('logo-color')}; + } + } + + @media (max-width: 1279px) { + width: 50%; + padding-bottom: ${remSize(30)}; + } + + @media (max-width: 769px) { + width: 100%; + padding-bottom: ${remSize(20)}; + } +`; + +export const ContactSection = styled.div` + margin-bottom: ${remSize(50)}; + + & h3 { + font-size: ${remSize(24)}; + font-weight: 600; + } + + & div { + display: flex; + width: 100%; + margin: ${remSize(20)} 0; + font-size: ${remSize(16)}; + } +`; + +export const ContactSectionTitle = styled.p` + width: 50%; + + @media (max-width: 769px) { + width: 30%; + } +`; + +export const ContactSectionDetails = styled.p` + width: 50%; + + @media (max-width: 769px) { + width: 70%; + } +`; + +export const Footer = styled.div` + border-top: 0.1rem dashed; + padding-right: ${remSize(20)}; + padding-bottom: ${remSize(70)}; + width: 100%; + font-size: ${remSize(16)}; + // border-color: ${prop('logo-color')}; + + & div { + display: flex; + flex-wrap: wrap; + width: 100%; + } + + & a { + padding-top: ${remSize(20)}; + padding-right: 9.5%; + // color: ${prop('logo-color')}; + } + + & p { + padding-top: ${remSize(20)}; + padding-right: 9.5%; + } + + @media (max-width: 770px) { + flex-direction: column; + padding-left: ${remSize(20)}; + padding-right: ${remSize(20)}; + } + + @media (max-width: 550px) { + padding-left: 0; + + & div { + display: grid; + } + } +`; + +const About = () => { const { t } = useTranslation(); + const p5version = useSelector((state) => { const index = state.files.find((file) => file.name === 'index.html'); return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1]; }); + return ( -
+
{t('About.TitleHelmet')}