From d7ac99eb549f784b08ea8b39b7b0b4162596dcdb Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Sat, 10 Oct 2020 17:58:22 +0300 Subject: [PATCH] Typography, HeroAside tweaks --- src/components/AsideSection/AsideSection.tsx | 33 ------- src/components/AsideSection/index.ts | 2 - src/components/ColorDiv/ColorDiv.tsx | 38 -------- src/components/Hero/HeroAside.tsx | 87 +++++++++++-------- src/components/Hero/HeroPrimarySection.tsx | 14 ++- src/components/PageSection.tsx | 49 ----------- src/index.scss | 41 ++++++--- src/views/ActualPage/ActualPageHero.tsx | 2 +- src/views/ContactsPage/ContactsPage.scss | 7 -- src/views/ContactsPage/ContactsPageView.tsx | 22 +++-- src/views/FrontPage/FrontPageHero.tsx | 2 +- src/views/GuildPage/GuildPageHero.tsx | 2 +- src/views/GuildPage/GuildPageView.tsx | 80 +++++++++-------- src/views/InEnglishPage/InEnglishPageHero.tsx | 2 +- src/views/StudiesPage/StudiesPageHero.tsx | 2 +- 15 files changed, 154 insertions(+), 229 deletions(-) delete mode 100644 src/components/AsideSection/AsideSection.tsx delete mode 100644 src/components/AsideSection/index.ts delete mode 100644 src/components/ColorDiv/ColorDiv.tsx delete mode 100644 src/components/PageSection.tsx delete mode 100644 src/views/ContactsPage/ContactsPage.scss diff --git a/src/components/AsideSection/AsideSection.tsx b/src/components/AsideSection/AsideSection.tsx deleted file mode 100644 index 035a961..0000000 --- a/src/components/AsideSection/AsideSection.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { ColorDivProps } from "../ColorDiv/ColorDiv"; -import { ColorMapper } from "@theme/colors"; - -type AsideSectionProps = ColorDivProps; - -const Section = styled.div` - display: flex; - flex: 1; - flex-flow: column; - justify-content: space-between; - padding: 3rem 4rem; - - color: ${(p) => p.textColor}; - background-color: ${(p) => p.backgroundColor}; - &:hover { - color: ${(p) => p.hoverColor}; - background-color: ${(p) => p.hoverBackgroundColor}; - } -`; - -const AsideSection: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( -
-); - -export default AsideSection; diff --git a/src/components/AsideSection/index.ts b/src/components/AsideSection/index.ts deleted file mode 100644 index a8a5279..0000000 --- a/src/components/AsideSection/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import AsideSection from "./AsideSection"; -export default AsideSection; diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx deleted file mode 100644 index 754495b..0000000 --- a/src/components/ColorDiv/ColorDiv.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import styled from "styled-components" -import { Colors, ColorMapper } from "@theme/colors"; - -interface ColorsProps { - textColor?: string; - backgroundColor?: string; - hoverColor?: string; - hoverBackgroundColor?: string; -} - -export type ColorDivProps = React.HTMLAttributes & { - textColor?: Colors; - backgroundColor?: Colors; - hoverColor?: Colors; - backgroundHoverColor?: Colors; -} - -const Div = styled.div` - color: ${(p) => p.textColor}; - background-color: ${(p) => p.backgroundColor}; - &:hover { - color: ${(p) => p.hoverColor}; - background-color: ${(p) => p.hoverBackgroundColor}; - } -`; - -const ColorDiv: React.FC = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => ( -
-); - -export default ColorDiv; diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx index 74392c4..0dbdb28 100644 --- a/src/components/Hero/HeroAside.tsx +++ b/src/components/Hero/HeroAside.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { colors, Colors2 } from "@theme/colors"; +import { colors } from "@theme/colors"; import Anchor from "@components/Anchor"; interface HeroAsideItemProps { @@ -11,33 +11,8 @@ interface HeroAsideItemProps { } const Article = styled.article` - line-height: 1rem; + max-width: 350px; margin-bottom: 1rem; - - h2 { - color: ${colors.lightBlue}; - text-transform: uppercase; - letter-spacing: 3px; - line-height: 20px; - } - - p, a { - color: ${colors.lightBlue}; - font-size: 14px; - font-weight: 300; - line-height: 20px; - } - - a { - color: ${colors.blue1}; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1rem; - - &:hover { - color: ${colors.white}; - } - } `; export const HeroAsideItem: React.FC = ({ header, text, link, linkText }) => ( @@ -47,34 +22,78 @@ export const HeroAsideItem: React.FC = ({ header, text, link

{text}

)} - {linkText} +
+ {linkText} +
) +type Colors = "darkBlue" | "lightTurquoise"; interface HeroAsideProps { - bgColor?: Colors2; + bgColor: Colors; } // TODO: Color combos -const Aside = styled.aside` +const Aside = styled.aside<{ colors: string }>` + ${(p) => p.colors} flex: 4; display: flex; flex-direction: column; justify-content: center; padding: 0 6rem; - background: ${(p) => p.bgColor}; - color: ${colors.darkBlue}; + + h2 { + text-transform: uppercase; + letter-spacing: 3px; + line-height: 1.5rem; + } + + p { + margin: 0; + line-height: 2rem; + } + + + & > p { + font-weight: 600; + margin-bottom: 2rem; + } + + a { + line-height: 2rem; + font-weight: 600; + text-transform: uppercase; + text-decoration: none; + letter-spacing: 0.1rem; + } + @media screen and (max-width: 800px) { margin: 48px auto; } `; -const HeroAside: React.FC = ({ bgColor = "inherit", children}) => ( -
- +

Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:

diff --git a/src/views/ContactsPage/ContactsPage.scss b/src/views/ContactsPage/ContactsPage.scss deleted file mode 100644 index 3c8525d..0000000 --- a/src/views/ContactsPage/ContactsPage.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../assets/scss/globals"; - -.contacts-page { - display: flex; - flex-flow: column wrap; - justify-content: flex-start; -} diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx index 6743ebc..c076f7a 100644 --- a/src/views/ContactsPage/ContactsPageView.tsx +++ b/src/views/ContactsPage/ContactsPageView.tsx @@ -1,10 +1,8 @@ import React from "react"; -import "./ContactsPage.scss"; -import PageSection from "@components/PageSection"; import { Occupation, Committee } from "@models/Contacts"; import CommitteeContainer from "@components/CommitteeContainer"; import TextAnchor from "@components/TextAnchor"; -import { Divider } from "@components/index"; +import { Divider, TextSection } from "@components/index"; interface ContactsPageViewProps { contacts: Occupation[]; @@ -18,15 +16,15 @@ class ContactsPageView extends React.Component { const { contacts, committees } = this.props; const board = contacts.filter(x => x.role.is_board); return ( -
- + <> +

Asiaa olisi, mutta kehen ottaa yhteyttä?
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.

- + - +

@@ -39,20 +37,20 @@ class ContactsPageView extends React.Component {

- + {committees.map((committee, index) => { - const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0; + // const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0; return ( <> - + x.role.committee.name_fi === committee.name_fi)} /> - + ) })} -
+ ); } } diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx index 59fbb23..2ce877d 100644 --- a/src/views/FrontPage/FrontPageHero.tsx +++ b/src/views/FrontPage/FrontPageHero.tsx @@ -24,7 +24,7 @@ const FrontPageHero: React.FC = () => ( - + ( - + ( <> @@ -94,36 +104,40 @@ const GuildPageView: React.FC = () => ( -

- Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

+

Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, toimikunnat ja jaokset.

 + + +
+
Miksi alkaa kilta-aktiiviksi?
+

Näitä töitä tehdessä saa väkisinkin paljon uusia kavereita ja oppii monia palkallisessa työelämässä tarpeellisia taitoja. Eikä laajasta tuttavapiiristä ja monista kontakteista varmasti haittaa ole tulevaa työuraakaan ajatellen. Rahallista tai materiaalista hyötyä kiltatoiminnasta ei saa, eikä kukaan killan toimintaan mukaan tuleva sitä pyrikään tavoittelemaan. Mikä tärkeintä, kiltatoiminta on kivaa!

+
    +
  • » Uusia ystäviä, samanhenkistä seuraa
    • +
  • » Loistava mahdollisuus kokeilla omia kykyjään
    • +
  • » Voit kokeilla ja oppia jotain sellaista, mitä et ikinä aikaisemmin ole tehnyt
    • +
+
+ + +
+
Runsaasti erilaisia tehtäviä
+

Killassa on todella monenlaisia tehtäviä. Olitpa koodaaja, urheilija tai ammattimainen juhlija, killasta löytyy tekemistä juuri sinulle. Toimikunnissa sitoudut toimintaan vuodeksi kerrallaan. Jaostoiminta mahdollistaa kiltatoiminnan kokeilun pienemmässä mittakaavassa. Tehtäväkuvaukset lorem ipsum dolor sit amet alla. Jos ei löydy sopivaa lorem ipsum dolor sit amet, voit perustaa myös oman.

+
    +
  • » Haluatko valtuustoon, hallitukseen tai toimariksi?
    • +
  • » Toimihenkilönä pääset edistämään opintoja
    • +
  • » Lorem ipsum
    • +
+
+ + + - - - - - - +

Sähkötekniikan korkeakoulun toimikunnat

-

Sähkötekniikan korkeakoulun toimikunnat

- Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa. + Ylioppilaskunnalla on edustus suuressa osassa Aalto-yliopiston tiedekuntia. Elektroniikan, tietoliikenteen ja automaation tiedekunnan toimikuntiin eli hallopedeihin opiskelijavalinna EST- ja TLT-tutkinto-ohjelmien osalta tehdään osin ylioppilaskunnan edustajistossa Sähköinsinöörikillan esityksestä ja osin Sähköinsinöörikillassa.

-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus feugiat ante. Nam eget venenatis dui. Morbi purus dui, cursus at velit id, placerat scelerisque turpis. Nulla a mauris odio. Nulla at tempor mi. Maecenas et sapien eu lorem interdum luctus. Proin interdum, tortor eget tempor tristique, massa arcu suscipit ipsum, sit amet lacinia erat lorem sit amet ipsum. Praesent dictum odio auctor odio sodales pharetra. Quisque accumsan iaculis diam, a laoreet odio aliquet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Pellentesque at hendrerit mi. Morbi at lacus finibus, pharetra urna sed, molestie tellus. Duis fermentum sodales leo. Nullam varius, massa in convallis sagittis, mi felis lacinia ipsum, viverra rhoncus nibh ipsum vel mi. Pellentesque ornare hendrerit malesuada. @@ -137,15 +151,13 @@ const GuildPageView: React.FC = () => (
- - -
-

Jaokset—kokeile kiltatoimintaa vapaammin

-

- Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen. -

-
- + + +

Jaokset—kokeile kiltatoimintaa vapaammin

+

+ Kiinnostaako kiltatoiminta, mutta vuoden kestävä sitoutuminen pelottaa? Jaokset mahdollistavat kiltatoiminnan kokeilemisen pienemmässä mittakaavassa. Jaokset toimivat varsin vapaamuotoisesti, mutta siltikin hyvässä hengessä. Mikäli Sinulla olisi hyvä idea, mitä kilta voisi jaosmaisesti toteuttaa, voit myös perustaa oman jaoksen. +

+

Jäsenedut vuonna 2019

diff --git a/src/views/InEnglishPage/InEnglishPageHero.tsx b/src/views/InEnglishPage/InEnglishPageHero.tsx index ac31ca1..976d122 100644 --- a/src/views/InEnglishPage/InEnglishPageHero.tsx +++ b/src/views/InEnglishPage/InEnglishPageHero.tsx @@ -10,7 +10,7 @@ const InEnglishPageHero: React.FC = () => ( /> - + ( /> - +