diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx index d26409a..7da5e72 100644 --- a/src/components/Hero/Hero.tsx +++ b/src/components/Hero/Hero.tsx @@ -6,33 +6,10 @@ import breakpoints from "@theme/breakpoints"; const Container = styled.div` display: flex; flex-flow: row wrap; - justify-content: space-between; position: relative; padding: 0; - min-height: 75vh; - - section { - padding: 2rem 6rem; - - @media screen and (max-width: ${breakpoints.mobile}) { - padding: 1rem; - } - } - - aside { - max-width: 50%; - padding: 3rem 6rem; - align-items: center; - - @media screen and (max-width: ${breakpoints.mobile}) { - max-width: unset; - padding: 2rem 1rem; - } - } - - & > div { - flex: 8; - } + min-height: 55vh; + justify-content: space-between; @media screen and (max-width: ${breakpoints.mobile}) { flex-direction: column; diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx index 3032d6f..e19eca8 100644 --- a/src/components/Hero/HeroAside.tsx +++ b/src/components/Hero/HeroAside.tsx @@ -1,7 +1,8 @@ import React from "react"; import styled from "styled-components"; -import colors from "@theme/colors"; import { Link } from "@components/index"; +import colors from "@theme/colors"; +import breakpoints from "@theme/breakpoints"; interface HeroAsideItemProps { header: string; @@ -11,7 +12,7 @@ interface HeroAsideItemProps { } const Article = styled.article` - margin-bottom: 1rem; + margin-top: 1rem; `; export const HeroAsideItem: React.FC = ({ @@ -40,10 +41,17 @@ interface HeroAsideProps { const Aside = styled.aside<{ colors: string }>` ${(p) => p.colors} - flex: 4; display: flex; flex-direction: column; justify-content: center; + padding: 6rem; + align-items: center; + width: 45%; + + @media screen and (max-width: ${breakpoints.mobile}) { + width: unset; + padding: 3rem 2rem; + } & > div { h2 { diff --git a/src/components/Hero/HeroPrimaryButtons.tsx b/src/components/Hero/HeroPrimaryButtons.tsx index 5cc521e..36b83dc 100644 --- a/src/components/Hero/HeroPrimaryButtons.tsx +++ b/src/components/Hero/HeroPrimaryButtons.tsx @@ -1,12 +1,16 @@ +import React from "react"; import styled from "styled-components"; import colors from "@theme/colors"; -const Buttons = styled.div<{ row?: boolean }>` - min-width: 20%; - max-width: fit-content; - margin: auto; +interface HeroPrimaryButtonsProps { + row?: boolean; +} + +const Buttons = styled.div` + ${({ row }) => (row ? "width: 100%;" : "")} + display: flex; - flex-flow: ${(p) => (p.row ? "row" : "column")} wrap; + flex-flow: ${({ row }) => (row ? "row" : "column")} wrap; a { display: contents; @@ -14,10 +18,15 @@ const Buttons = styled.div<{ row?: boolean }>` } button { + margin: 0.5rem; + + /* stylelint-disable function-name-case */ + flex: 1 0 calc(100% / ${({ children }) => React.Children.count(children)} - 2 * 0.5rem); + + /* stylelint-enable function-name-case */ color: ${colors.blue1}; background-color: transparent; padding: 0.8rem 2rem; - margin: 0.5rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; diff --git a/src/components/Hero/HeroPrimarySection.tsx b/src/components/Hero/HeroPrimarySection.tsx index 555df48..e6f12be 100644 --- a/src/components/Hero/HeroPrimarySection.tsx +++ b/src/components/Hero/HeroPrimarySection.tsx @@ -9,12 +9,19 @@ interface HeroPrimarySectionProps { } const Section = styled.section` - max-width: 50%; - margin: 10vh auto 0; + width: 55%; text-align: center; + display: flex; + flex-direction: column; + align-items: center; + padding: 8rem 8rem 2rem; @media screen and (max-width: ${breakpoints.mobile}) { - max-width: unset; + padding: 3rem 2rem; + } + + @media screen and (max-width: ${breakpoints.mobile}) { + width: unset; } p { diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx index f8dad40..7921745 100644 --- a/src/components/Hero/HeroSecondarySection.tsx +++ b/src/components/Hero/HeroSecondarySection.tsx @@ -36,6 +36,7 @@ export const HeroSecondarySectionItem: React.FC = const Section = styled.section` background-color: ${colors.green1}; color: ${colors.darkBlue}; + padding: 3rem; h1 { padding: 1rem 0; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1a93799..b2a0d4f 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -22,8 +22,8 @@ const GlobalCommonStyles = createGlobalStyle` html { font-family: ${fontFamily}; - /* 12px */ - font-size: ${fontSize * 0.75}pt; + /* 10px */ + font-size: ${fontSize * (2 / 3)}pt; line-height: ${lineHeight}; @media screen and (min-width: ${breakpoints.medium}) { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 46c66e8..46d1dcc 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -36,7 +36,6 @@ export default class MyDocument extends Document<{ styleTags: unknown }> { - diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx index 98f648e..db300ba 100644 --- a/src/views/FrontPage/FrontPageHero.tsx +++ b/src/views/FrontPage/FrontPageHero.tsx @@ -15,12 +15,12 @@ const FrontPageHero: React.FC = () => ( diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index aa5cece..2ca152a 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -159,9 +159,6 @@ const FrontPageView: React.FC = ({ events, feed }) => ( Fingrid - - NRCGroup - Okmetic diff --git a/src/views/InEnglishPage/InEnglishPageHero.tsx b/src/views/InEnglishPage/InEnglishPageHero.tsx index 6390b69..db24b17 100644 --- a/src/views/InEnglishPage/InEnglishPageHero.tsx +++ b/src/views/InEnglishPage/InEnglishPageHero.tsx @@ -15,12 +15,12 @@ const InEnglishPageHero: React.FC = () => (