Few color fixes

src/components/Sections/TextSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { colors } from "@theme/colors";
 
 const StyledSection = styled.section`
   display: grid;
@@ -8,7 +9,7 @@ const StyledSection = styled.section`
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:
-    "leftaside title rightaside"
+    "title title title"
     "leftaside content rightaside";
 
   @media screen and (max-width: 800px) {
@@ -21,6 +22,10 @@ const StyledSection = styled.section`
       "leftaside";
   }
 
+  h6 {
+    color: ${colors.orange1};
+  }
+
   & > h1,
   & > h2,
   & > h3,
@@ -31,9 +36,11 @@ const StyledSection = styled.section`
     grid-area: title;
   }
 
+
   & > div, p {
     grid-area: content;
     max-width: 1000px;
+
   }
 
   & > aside {

src/index.scss

@@ -31,7 +31,7 @@ p {
   font-size: 1.2rem;
   font-weight: 300;
 
-  .lg {
+  &.large {
     font-size: 2rem;
   }
 }
@@ -42,7 +42,7 @@ h1 {
   margin-block-start: 0;
   margin-block-end: 0;
 
-  .lg {
+  &.large {
     font-size: 2.75rem;
   }
 }
@@ -55,7 +55,7 @@ h2 {
   margin-block-end: 0;
   text-transform: uppercase;
 
-  .lg {
+  &.large {
     font-size: 2rem;
   }
 }
@@ -66,8 +66,8 @@ h3 {
   margin-block-start: 0;
   margin-block-end: 0;
 
-  .lg {
-    font-size: 2.3rem;
+  &.large {
+    font-size: 2rem;
   }
 }
 
@@ -79,7 +79,7 @@ h4 {
   margin-block-end: 0;
   text-transform: uppercase;
 
-  .lg {
+  &.large {
     font-size: 2rem;
   }
 }
@@ -90,7 +90,7 @@ h5 {
   margin-block-start: 0;
   margin-block-end: 0;
 
-  .lg {
+  &.large {
     font-size: 2.3rem;
   }
 }
@@ -103,7 +103,7 @@ h6 {
   margin-block-end: 0;
   text-transform: uppercase;
 
-  .lg {
+  &.large {
     font-size: 2rem;
   }
 }
@@ -113,7 +113,7 @@ li {
   font-size: 1.2rem;
   font-weight: 600;
 
-  .lg {
+  &.large {
     font-size: 2rem;
   }
 }

src/views/GuildPage/GuildPageView.tsx

@@ -6,11 +6,28 @@ import Anchor from "@components/Anchor";
 import { CTASection, TextSection, InfoBox, Accordion } from "@components/index";
 import GuildPageHero from "./GuildPageHero";
 import FullWidthSection from "@components/Sections/FullWidthSection";
+import { colors } from "@theme/colors";
 
 const Column = styled.div`
   display: flex;
   flex-direction: row;
 
+  a {
+    color: inherit;
+  }
+
+  section:first-of-type {
+    background-color: ${colors.lightTurquoise};
+  }
+
+  section:last-of-type {
+    background-color: ${colors.lightBlue};
+    p {
+      a {
+        font-weight: normal;
+      }
+    }
+  }
   ul {
     list-style: none;
   }
@@ -21,7 +38,7 @@ const GuildPageView: React.FC = () => (
     <GuildPageHero />
 
     <TextSection>
-      <h3 id="tehtavat">Killan tehtävät ja tarina</h3>
+      <h3 id="tehtavat" className="large">Killan tehtävät ja tarina</h3>
       <div>
         <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja saunailtoja. Valinnanvaraa on, joten <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
 
@@ -81,7 +98,7 @@ const GuildPageView: React.FC = () => (
     </CTASection>
 
     <TextSection>
-      <h3 id="organisaatio">Organisaatio</h3>
+      <h3 id="organisaatio" className="large">Organisaatio</h3>
       <div>
         <p>Sähköinsinöörikillassa toimeenpanovaltaa käyttää 3–13 kiltalaisen muodostama <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/hallitus">hallitus</TextAnchor> apunaan lukuisa määrä toimihenkilöitä. Hallituksen ja toimihenkilöt valitsee killan <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/valtuusto">valtuusto</TextAnchor>, joka myös valvoo näiden toimintaa. Käytännössä valtuusto valitsee vaalikokouksessaan ensin uuden puheenjohtajan ja jää 1–2 viikon mittaiselle kokoustauolle. Tauon jälkeen puheenjohtaja esittelee valtuustolle ehdotuksensa hallitukseksi ja toimihenkilöiksi, ja valtuusto joko hyväksyy tai hylkää ehdotuksen noin tunnin kestävän kysely- ja esittelytuokion jälkeen. <TextAnchor textColor="blue1" hoverColor="dark-blue" to="/kuulumiset">Hallituksen kuulumiset</TextAnchor> lorem.</p>
 
@@ -131,7 +148,7 @@ const GuildPageView: React.FC = () => (
     </Column>
 
     <TextSection>
-      <h3>Sähkötekniikan korkeakoulun toimikunnat</h3>
+      <h3 className="large">Sähkötekniikan korkeakoulun toimikunnat</h3>
       <div>
         <p>
           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.
@@ -151,7 +168,7 @@ const GuildPageView: React.FC = () => (
       </div>
     </TextSection>
     <TextSection>
-      <h3>Jaokset—kokeile kiltatoimintaa vapaammin</h3>
+      <h3 className="large">Jaokset—kokeile kiltatoimintaa vapaammin</h3>
       <p>
         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.
       </p>
@@ -160,7 +177,7 @@ const GuildPageView: React.FC = () => (
     <CTASection bgColor="orange1">Jäsenedut vuonna 2019</CTASection>
 
     <TextSection>
-      <h3>Aalto-yliopiston tarjoamat monenlaiset edut</h3>
+      <h3 className="large">Aalto-yliopiston tarjoamat monenlaiset edut</h3>
       <div>
         <p>Sen lisäksi että kilta tarjoaa jäsenilleen palveluja ja aktiviteetteja, Aalto-yliopisto tarjoaa lorem ipsum dolor sit amet.</p>
         <p>» <Anchor to={"https://download.aalto.fi"}>Download.aalto.fi</Anchor> Täältä voit ladata yliopiston tarjoamia ohjelmia ilmaiseksi.</p>