WIP FrontPage rewrite

2020-10-09 21:06:41 +03:00
parent ff9385cd47
commit 29b913b834
18 changed files with 499 additions and 317 deletions
@@ -1,53 +1,57 @@
 import React from "react";
 import "./Card.scss";
 import Anchor from "../Anchor";
+import { Button } from "@components/index";

-export interface CardProps {
+interface CardProps {
  title: string;
  start_time: string;
  text: string;
  link?: string;
  image?: string;
-  button?: JSX.Element;
+  buttonText?: string;
+  buttonOnClick?: () => void;
 }
-export interface CardState { }

-class Card extends React.Component<CardProps, CardState> {
-  render() {
-    const { title, text, link, image, button } = this.props;
-    const options = {
-      day: "numeric",
-      month: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit"
-    };
-    const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
+const Card: React.FC<CardProps> = ({ title, text, link, image, buttonText, start_time, buttonOnClick }) => {
+  const options = {
+    day: "numeric",
+    month: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  };
+  const datetime = new Date(start_time).toLocaleString("fi-FI", options);

-    const imageElem = image ? (
-      <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
-    ) : null;
-    if (link) {
-      return (
-        <Anchor to={link} className="card">
-          {imageElem}
-          <div className="card__datetime">{datetime}</div>
-          <div className="card__title">{title}</div>
-          <div className="card__text">{text}</div>
-          <div className="card__button">{button}</div>
-        </Anchor>
-      );
-    }
+  const imageElem = image ? (
+    <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
+  ) : null;
+  if (link) {
    return (
-      <div className="card">
+      <Anchor to={link} className="card">
        {imageElem}
        <div className="card__datetime">{datetime}</div>
        <div className="card__title">{title}</div>
        <div className="card__text">{text}</div>
-        {button}
-      </div>
+        <div className="card__button">
+          <Button type="filled" onClick={buttonOnClick}>
+            <h6>{buttonText}</h6>
+          </Button>
+        </div>
+      </Anchor>
    );
  }
+  return (
+    <div className="card">
+      {imageElem}
+      <div className="card__datetime">{datetime}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__text">{text}</div>
+      <Button type="filled" onClick={buttonOnClick}>
+        <h6>{buttonText}</h6>
+      </Button>
+    </div>
+  );
 }

 export default Card;
@@ -3,7 +3,8 @@ import { colors } from "@theme/colors";

 const Divider = styled.hr`
  width: 98%;
-  border-color: ${colors.blue1};
+  border: 0;
+  border-bottom: 2px solid ${colors.blue1};
  margin: 0 auto;
 `;

@@ -1,90 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.footer {
-  display: flex;
-  flex-direction: column;
-
-  &__content {
-    display: flex;
-    padding: 16px;
-  }
-
-  h4 {
-    color: color(light-blue);
-    padding: 1.5rem 0;
-  }
-
-  & a {
-    color: color(white1);
-    text-decoration: underline;
-    padding: 0.4rem 0;
-    font-size: 14px;
-  }
-
-  & p {
-    color: color(white1);
-    margin: 0;
-    padding: 0.4rem 0;
-    font-size: 14px;
-  }
-
-  &__info {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 100%;
-    align-items: center;
-
-    &__block {
-      padding: 1rem 0;
-    }
-  }
-
-  &__contacts {
-    display: flex;
-    justify-content: space-between;
-    flex-flow: row nowrap;
-    font-weight: 200;
-
-    @media screen and (max-width: 600px - 1px) {
-      flex-flow: column nowrap;
-    }
-  }
-
-  &__text {
-    display: flex;
-    flex-flow: column;
-    min-width: 180px;
-
-    @media screen and (min-width: 600px) {
-      padding-right: 3rem;
-    }
-  }
-
-  &__links {
-    display: flex;
-    flex-flow: column;
-
-    @media screen and (max-width: 600px - 1px) {
-      margin-top: 2rem;
-    }
-  }
-
-  &__copyright {
-    display: flex;
-    flex-flow: row nowrap;
-    background-color: color(black1);
-    text-align: center;
-    justify-content: center;
-    font-size: 12px;
-    padding: 1rem 0;
-
-    p {
-      padding: 0.5rem 1rem;
-    }
-
-    @media screen and (max-width: 600px - 1px) {
-      flex-flow: column nowrap;
-    }
-  }
-}
@@ -1,48 +1,115 @@
 import React from "react";
-import FooterMap from "../FooterMap";
+import styled from "styled-components";
 import Anchor from "../Anchor";
-import "./Footer.scss";
+import { colors } from "@theme/colors";

-export interface FooterProps { }
-export interface FooterState { }
+const StyledFooter = styled.footer`
+  display: flex;
+  flex-direction: column;
+  background-color: ${colors.darkBlue};

-class Footer extends React.Component<FooterProps, FooterState> {
-  render() {
-    return <React.Fragment>
-      <div className="footer">
-        <div className="footer__content">
-          <div className="footer__info">
-            <div className="footer__info__block">
-              <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
-              <div className="footer__contacts">
-                <div className="footer__text">
-                  <p>TUAS-Talo</p>
-                  <p>Maarintie 8</p>
-                  <p>PL 15500, 00076 Aalto</p>
-                  <br></br>
-                  <br></br>
-                  <p>Y-tunnus: 1627010-1</p>
-                  <p>sik-hallitus@list.ayy.fi</p>
-                  <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
-                </div>
-                <div className="footer__links">
-                  <Anchor to="/jaseneksi">Jäseneksi</Anchor>
-                  <Anchor to="/palaute">Palaute</Anchor>
-                  <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
-                  <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
-                </div>
-              </div>
-            </div>
+  a {
+    color: ${colors.white};
+    display: block;
+    text-decoration: underline;
+    padding: 0.4rem 0;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  p {
+    color: ${colors.white};
+    margin: 0;
+    padding: 0.4rem 0;
+    font-size: 14px;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  & > div {
+    flex: 2;
+    padding: 48px 0;
+
+    h4 {
+      color: ${colors.lightBlue};
+      padding: 24px 0;
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+`;
+
+const CopyRight = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: ${colors.black};
+  text-align: center;
+  justify-content: center;
+  font-size: 12px;
+  padding: 1rem 0;
+
+  p {
+    padding: 0.5rem 1rem;
+  }
+
+  @media screen and (max-width: 600px - 1px) {
+    flex-flow: column nowrap;
+  }
+`;
+
+const Map = styled.iframe`
+  border: none;
+  flex: 1;
+
+  @media screen and (max-width: 1200px - 1px) {
+    display: none;
+  }
+`;
+
+const Footer: React.FC = () => (
+  <StyledFooter>
+    <Content>
+      <div>
+        <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
+        <div>
+          <div>
+            <p>TUAS-Talo</p>
+            <p>Maarintie 8</p>
+            <p>PL 15500, 00076 Aalto</p>
+            <br></br>
+            <br></br>
+            <p>Y-tunnus: 1627010-1</p>
+            <p>sik-hallitus@list.ayy.fi</p>
+            <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
+          </div>
+
+          <div>
+            <Anchor to="/jaseneksi">Jäseneksi</Anchor>
+            <Anchor to="/palaute">Palaute</Anchor>
+            <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
+            <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
          </div>
-          <FooterMap />
-        </div>
-        <div className="footer__copyright">
-          <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
-          <p>webmaster: sik-vtmk@list.ayy.fi</p>
        </div>
      </div>
-    </React.Fragment>;
-  }
-}
+      <Map
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+        width="600"
+        height="350"
+      />
+    </Content>
+    <CopyRight>
+      <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
+      <a href="mailto:sik-vtmk@list.ayy.fi">webmaster: sik-vtmk@list.ayy.fi</a>
+    </CopyRight>
+  </StyledFooter>
+)

 export default Footer;
@@ -1,13 +0,0 @@
-@import "../../assets/scss/globals";
-
-.footer-map {
-  display: flex;
-
-  @media screen and (max-width: 1200px - 1px) {
-    display: none;
-  }
-
-  iframe {
-    border: none;
-  }
-}
@@ -1,26 +1,16 @@
 import React from "react";
-import "./FooterMap.scss";
+import styled from "styled-components";

-const AnyReactComponent = ({ text }) => <div>{text}</div>;
+const IFrame = styled.iframe`

-export interface FooterMapProps {}
+`;

-export interface FooterMapState {}
-
-class FooterMap extends React.Component<FooterMapProps, FooterMapState> {
-  render() {
-    return (
-      <div className="footer-map">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
-          width="600"
-          height="350"
-        >
-        </iframe>
-      </div>
-
-    );
-  }
-}
+const FooterMap: React.FC = () => (
+  <IFrame
+    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+    width="600"
+    height="350"
+  />
+)

 export default FooterMap;
@@ -1,31 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.page-link {
-  border-left-color: color(blue1);
-  border-left-width: 0.8rem;
-  border-left-style: solid;
-  margin: 0 1rem 1rem 0;
-
-  & p {
-    display: flex;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    color: color(dark-blue);
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 800;
-    margin-left: 1rem;
-    margin-bottom: 0.5rem;
-    padding: 0;
-  }
-
-  & a {
-    color: color(dark-blue);
-    margin-left: 1rem;
-    display: flex;
-    text-decoration: none;
-    font-weight: normal;
-  }
-}
@@ -1,23 +1,46 @@
 import React from "react";
-import "./PageLink.scss";
+import styled from "styled-components";
 import TextAnchor from "../TextAnchor";
+import { colors } from "@theme/colors";

-export interface PageLinkProps {
+interface PageLinkProps {
  to: string;
  desc: string;
 }
-export interface PageLinkState { }

-class PageLink extends React.Component<PageLinkProps, PageLinkState> {
-  render() {
-    const { to, desc } = this.props;
-    return (
-      <div className="page-link">
-        <p>{this.props.children}</p>
-        <TextAnchor to={to}>{desc}</TextAnchor>
-      </div>
-    );
+const StyledPageLink = styled.div`
+  border-left-color: ${colors.blue1};
+  border-left-width: 0.8rem;
+  border-left-style: solid;
+  margin: 0 1rem 1rem 0;
+
+  p {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    color: ${colors.darkBlue};
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 800;
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
+    padding: 0;
  }
-}
+
+  a {
+    display: block;
+    color: ${colors.darkBlue};
+    margin-left: 1rem;
+    text-decoration: none;
+    font-weight: normal;
+  }
+`;
+
+const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
+  <StyledPageLink>
+    <p>{children}</p>
+    <TextAnchor to={to}>{desc}</TextAnchor>
+  </StyledPageLink>
+);

 export default PageLink;
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ColorDivProps } from "../ColorDiv/ColorDiv";
+import { ColorDivProps } from "./ColorDiv/ColorDiv";
 import { ColorMapper } from "@theme/colors";

 interface PageSectionProps {
@@ -1,2 +0,0 @@
-import PageSection from "./PageSection";
-export default PageSection;
@@ -0,0 +1,91 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Section = styled.section`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  position: relative;
+  padding: 2rem 1rem 2rem;
+
+  &.sectionBg-darkBlue {
+    color: ${colors.white};
+    background-color: ${colors.darkBlue};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-lightBlue {
+    color: ${colors.darkBlue};
+    background-color: ${colors.lightBlue};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-black {
+    color: ${colors.white};
+    background-color: ${colors.black};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-grey1 {
+    color: ${colors.white};
+    background-color: ${colors.grey1};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-grey2 {
+    color: ${colors.white};
+    background-color: ${colors.grey2};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-orange1 {
+    color: ${colors.white};
+    background-color: ${colors.orange1};
+  }
+
+  &.sectionBg-orange2 {
+    color: ${colors.white};
+    background-color: ${colors.orange2};
+    a:hover {
+      color: ${colors.blue1};
+    }
+  }
+
+  &.sectionBg-blue1 {
+    color: ${colors.white};
+    background-color: ${colors.blue1};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-lightTurquoise {
+    color: ${colors.darkBlue};
+    background-color: ${colors.lightTurquoise};
+    a:hover {
+      color: ${colors.white};
+    }
+  }
+
+  &.sectionBg-green1 {
+    color: ${colors.darkBlue};
+    background-color: ${colors.green1};
+  }
+`;
+
+const PageSection: React.FC = (props) => (
+  <Section {...props} />
+);
+
+export default PageSection;
@@ -4,5 +4,5 @@ export { default as Button } from "./Button";
 export { default as Ribbon } from "./Ribbon";
 export { default as SponsorReel } from "./SponsorReel";
 export { default as TextAnchor } from "./TextAnchor";
-export { default as PageSection } from "./PageSection";
+export { default as PageSection } from "./PageSection2";
 export { default as Divider } from "./Divider";
@@ -19,6 +19,8 @@ body {
  min-height: 100vh;
  display: flex;
  flex-flow: column nowrap;
+  color: color(black);
+  background-color: color(white1);
 }

 body {
@@ -48,6 +48,8 @@ export const colors = {
  inherit: "inherit"
 }

+export type Colors2 = keyof typeof colors;
+
 export const colorToClass = (color: Colors): string => color ? `color-div__${color}` : undefined;
 export const bgColorToClass = (color: Colors): string => color ? `color-div__background_${color}` : undefined;
 export const hoverColorToClass = (color: Colors): string => color ? `color-div__${color}Hoverable` : undefined;
@@ -35,11 +35,8 @@ const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
            start_time={e.start_time}
            text={e.description_fi}
            link={`/events/${e.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonText="Lue lisää&nbsp;›"
+            buttonOnClick={() => {}}
          >
          </Card>
        ))}
@@ -35,11 +35,8 @@ const News: React.FC<NewsProps> = ({feed}) => {
            start_time={post.publish_time}
            text={post.description_fi}
            link={`/feed/${post.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonText="Lue lisää&nbsp;›"
+            buttonOnClick={() => {}}
          >
          </Card>
        ))}
@@ -1,52 +1,162 @@
 import React from "react";
-import { PageSection, Button } from "@components/index";
-import HeroMainSection from "@components/Hero/HeroMainSection";
-import HeroAsideSection from "@components/Hero/HeroAsideSection";
-import HeroAsideItem from "@components/Hero/HeroAsideItem";
+import styled from "styled-components";
+import { PageSection } from "@components/index";
+import { colors } from "@theme/colors";
+import Anchor from "@components/Anchor";
+
+const HeroSection = styled(PageSection)`
+  padding: 0;
+  @media screen and (min-width: 800px) {
+    min-height: 85vh;
+  }
+
+  color: ${colors.white};
+  background-color: ${colors.darkBlue};
+  a:hover {
+    color: ${colors.white};
+  }
+`;
+
+const MainSection = styled.section`
+  flex: 6;
+
+  & > div {
+    margin: 15vh auto 0;
+    max-width: 600px;
+    text-align: center;
+    line-height: 1.5rem;
+
+    & > div {
+      min-width: 20%;
+      max-width: fit-content;
+      margin: auto;
+    }
+
+    h1 {
+      line-height: 40px;
+      @media screen and (max-width: 500px) {
+        font-size: 2rem;
+      }
+    }
+
+    p {
+      max-width: 400px;
+      margin: 1em auto;
+      font-weight: 100;
+    }
+  }
+`;
+
+const HeroButton = styled.button`
+  display: block;
+  width: 100%;
+  color: ${colors.blue1};
+  background-color: transparent;
+  padding: 0.8rem 2rem;
+  margin: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  border: 1px solid ${colors.lightTurquoise};
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`;
+
+const AsideSection = styled.aside`
+  flex: 4;
+  padding: 3rem 1rem 2rem;
+`;
+
+const AsideItem = styled.article`
+  max-width: 300px;
+  line-height: 1rem;
+  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};
+    }
+  }
+`;

 const FrontPageHero: React.FC = () => (
-  <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
-    <HeroMainSection>
-      <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-      <p>
+  <HeroSection fullSize>
+    <MainSection>
+      <div>
+        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+        <p>
          on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
          kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
          vauhdilla sähköistyvän maailmamme kehityksessä.
-      </p>
-      <div className="hero-button-container">
-        <Button type="hero" onClick={() => { }}>
-          <h6>Killan tehtävät&nbsp;›</h6>
-        </Button>
-        <Button type="hero" onClick={() => { }}>
-          <h6>Vastapainoa opiskelulle&nbsp;›</h6>
-        </Button>
+        </p>
+        <div>
+          <HeroButton onClick={() => { }}>
+            <span>Killan tehtävät&nbsp;›</span>
+          </HeroButton>
+          <HeroButton onClick={() => { }}>
+            <span>Vastapainoa opiskelulle&nbsp;›</span>
+          </HeroButton>
+        </div>
      </div>
-    </HeroMainSection>
-    <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
-      <HeroAsideItem
-        title="Vasta-aloittanut opiskelija"
-        linkHref="/kilta/fuksi"
-        linkText="Fuksit"
-      >
+    </MainSection>
+
+    <AsideSection>
+      <AsideItem>
+        <h2>Vasta-aloittanut opiskelija</h2>
+        <p>
          Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
-      </HeroAsideItem>
-      <HeroAsideItem
-        title="Harkitsetko uraa alalla?"
-        linkHref="/opinnot_ja_ura"
-        linkText="Opinnot ja ura"
-      >
+        </p>
+        <Anchor to={"/kilta/fuksi"}>
+          Fuksit&nbsp; ›
+        </Anchor>
+      </AsideItem>
+      <AsideItem>
+        <h2>Harkitsetko uraa alalla?</h2>
+        <p>
          Oletko abi, vaihtamassa uraa tai valmistumassa?
-      </HeroAsideItem>
-      <HeroAsideItem
-        title="Yhteistyö yritysten kanssa"
-        linkHref="/yritysyhteistyo"
-        linkText="Yritysyhteistyö"
-      >
-          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
-          sponsseille.
-      </HeroAsideItem>
-    </HeroAsideSection>
-  </PageSection>
+        </p>
+        <Anchor to={"/opinnot_ja_ura"}>
+          Opinnot ja ura&nbsp; ›
+        </Anchor>
+      </AsideItem>
+      <AsideItem>
+        <h2>Yhteistyö yritysten kanssa</h2>
+        <p>
+          Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
+        </p>
+        <Anchor to={"/yritysyhteistyo"}>
+          Yritysyhteistyö&nbsp; ›
+        </Anchor>
+      </AsideItem>
+    </AsideSection>
+  </HeroSection>
 );

 export default FrontPageHero;
@@ -1,19 +1,59 @@
 import React from "react";
-import { PageSection, Card, PageLink, Button, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
+import styled from "styled-components";
+import { PageSection, Card, PageLink, Ribbon, SponsorReel, TextAnchor, Divider } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
+import { colors } from "@theme/colors";

 interface FrontPageViewProps {
  events: Event[];
  feed: Post[];
 }

+const SponsorSection = styled(PageSection)`
+  justify-content: center;
+
+  color: ${colors.black};
+  background-color: ${colors.white};
+  a {
+    color: ${colors.blue1};
+  }
+`;
+
+const CardSection = styled(PageSection)`
+  @media screen and (max-width: 800px - 1px) {
+    flex-flow: column nowrap;
+  }
+
+  color: ${colors.black};
+  background-color: ${colors.white};
+  a {
+    color: ${colors.blue1};
+    &:hover {
+      color: ${colors.darkBlue};
+    }
+  }
+
+  h6 {
+    color: ${colors.orange1};
+  }
+`;
+
+const SössöSection = styled(PageSection)`
+  color: ${colors.white};
+  background-color: ${colors.orange1};
+
+  a:hover {
+    color: ${colors.darkBlue};
+  }
+`;
+
 const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
  <>
    <FrontPageHero />
    <main>
-      <PageSection backgroundColor="white1" cardSection>
+      <CardSection>
        {events.map(event => (
          <Card
            key={event.id}
@@ -22,31 +62,27 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
            text={event.description_fi}
            link={`/events/${event.id}`}
            image={event.image || event.tags[0].icon}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonOnClick={() => {}}
+            buttonText="Lue lisää&nbsp;›"
          />
        ))}
        <div className="card" key="links">
          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
-              Kaikki tapahtumat
+            Kaikki tapahtumat
          </PageLink>
        </div>
-      </PageSection>
-      <PageSection backgroundColor="orange1">
+      </CardSection>
+
+      <SössöSection>
        <Ribbon>
          <h3>Sössöä vuodesta 1969.</h3>
          <TextAnchor textColor="white1" hoverColor="blue1" to="https://sosso.fi">
            <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
          </TextAnchor>
        </Ribbon>
-      </PageSection>
-      <PageSection
-        backgroundColor="white1"
-        cardSection
-      >
+      </SössöSection>
+
+      <CardSection>
        {feed.map(inst => (
          <Card
            key={inst.id}
@@ -54,26 +90,24 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
            start_time={inst.publish_time}
            text={inst.description_fi}
            link={`/feed/${inst.id}`}
-            button={
-              <Button type="filled" onClick={() => { }}>
-                <h6>Lue lisää&nbsp;›</h6>
-              </Button>
-            }
+            buttonOnClick={() => {}}
+            buttonText="Lue lisää&nbsp;›"
          />
        ))}
        <div className="card" key="links">
          <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
-              Lue tuoreimmat uutiset
+            Lue tuoreimmat uutiset
          </PageLink>
          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-              Kuvia tapahtumista
+            Kuvia tapahtumista
          </PageLink>
        </div>
-      </PageSection>
-      <PageSection center backgroundColor="white1">
+      </CardSection>
+
+      <SponsorSection>
        <Divider />
        <SponsorReel />
-      </PageSection>
+      </SponsorSection>
    </main>
  </>
 )