diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx index d88c272..b1aa8a2 100644 --- a/src/components/ContactCard.tsx +++ b/src/components/ContactCard.tsx @@ -18,8 +18,8 @@ const Row = styled.div` const ImageContainer = styled.div` position: relative; - height: 150px; - width: 150px; + height: 125px; + width: 125px; flex-shrink: 0; img { @@ -33,17 +33,17 @@ const Info = styled.div` flex-direction: column; align-items: flex-start; margin-left: -20px; - min-width: 225px; + min-width: 150px; padding: 2rem; color: ${colors.darkBlue}; & > p { - font-size: 1.1rem; + font-size: 1.0rem; margin: 0; } & > h3 { - font-size: 1.4rem; + font-size: 1.2rem; font-weight: 500; } `; diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index dc8646c..312f292 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -70,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees const Container = styled.div` color: ${colors.darkBlue}; + align-items: center; + justify-content: center; + width: 50vw; & > h2 { text-transform: uppercase; + font-size: 4rem; width: 100%; } @@ -80,15 +84,39 @@ const Container = styled.div` display: flex; flex-flow: row wrap; } + + @media (max-width: 950px) { + width: 100vw; + } +`; + +const ContactContainer = styled.div` + margin-top: -13rem; + overflow-x: hidden; + @media (max-width: 950px) { + margin-top: 0; + } +`; + +const TitleContainer = styled.div` + display: flex; + width: 100%; + align-items: center; + justify-content: center; + padding: 10px 10px; + flex-direction: column; + margin: auto; `; const CommitteeContainer: React.FC<{ committee: Committee; }> = ({ committee, children }) => ( -

- {committee.name_fi || committee.name_en} -

+ +

+ {committee.name_fi || committee.name_en} +

+
{committee.roles.map((role) => ( role.representatives.map((representative) => ( @@ -143,28 +171,31 @@ const ContactsPageView: React.FC = () => (
+ - {orderedCommittees.map((json) => ( - - {(json.slug !== "board") && ( - - )} - - - {(json.slug === "board") && ( -

- {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} - - hallitus@sahkoinsinoorikilta.fi + {orderedCommittees.map((json) => ( + + {(json.slug !== "board") && ( + + )} + + + {(json.slug === "board") && ( +

+ {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} + + hallitus@sahkoinsinoorikilta.fi - {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} -

- )} -
-
-
- ))} + {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."} +

+ )} + + + + ))} +
); + export default ContactsPageView;