TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero & typography changes for better responsiveness

Browse Source
This commit is contained in:
Aarni Halinen
2020-12-08 18:59:52 +02:00
parent d592d5eb98
commit b85410e3c2
12 changed files with 116 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero/Hero.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const Container = styled.div`
}
aside {
padding: 0 6rem;
padding: 3rem 6rem;
align-items: center;
@media screen and (max-width: 800px) {
src/components/Hero/HeroAside.tsx
+28 -21
View File
@@ -11,7 +11,6 @@ interface HeroAsideItemProps {
}
const Article = styled.article`
max-width: 350px;
margin-bottom: 1rem;
`;
@@ -43,29 +42,35 @@ const Aside = styled.aside<{ colors: string }>`
flex-direction: column;
justify-content: center;
h2 {
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.5rem;
}
& > div {
max-width: 350px;
p {
margin: 0;
line-height: 2rem;
}
h2 {
word-break: break-word;
hyphens: auto;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.5rem;
}
p {
margin: 0;
line-height: 2rem;
}
& > p {
font-weight: 600;
margin-bottom: 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;
a {
line-height: 2rem;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1rem;
}
}
`;
@@ -87,7 +92,9 @@ color: ${colors.darkBlue};
const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
<Aside colors={textColors(bgColor)}>
{children}
<div>
{children}
</div>
</Aside>
)
src/components/Hero/HeroPrimarySection.tsx
-3
View File
@@ -15,9 +15,6 @@ const Section = styled.section`
h1 {
line-height: 40px;
@media screen and (max-width: 500px) {
font-size: 2rem;
}
}
p {
src/components/Hero/HeroSecondarySection.tsx
+4
View File
@@ -12,6 +12,10 @@ const Note = styled.span`
font-weight: bold;
margin-right: 2rem;
margin-top: -0.5rem;
@media screen and (max-width: 800px) {
font-size: 1.25rem;
}
`;
const Item = styled.div`
src/index.scss
+14
View File
@@ -30,10 +30,16 @@ body {
p {
font-size: 1.2rem;
font-weight: 300;
word-break: break-word;
hyphens: auto;
&.large {
font-size: 2rem;
}
@media screen and (max-width: 800px) {
font-size: 1rem;
}
}
h1 {
@@ -45,6 +51,10 @@ h1 {
&.large {
font-size: 2.75rem;
}
@media screen and (max-width: 800px) {
font-size: 1.5rem;
}
}
h2 {
@@ -58,6 +68,10 @@ h2 {
&.large {
font-size: 2rem;
}
@media screen and (max-width: 800px) {
font-size: 1rem;
}
}
h3 {
src/views/ActualPage/ActualPageHero.tsx
+30 -30
View File
@@ -5,36 +5,23 @@ import noop from "@utils/noop";
const ActualPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Yritystapahtumia ja vastapainoa opiskelulle"
text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
>
<HeroPrimaryButtons row>
<Anchor to="#tapahtumat">
<button onClick={noop}>
<span>Tapahtumat&nbsp;›</span>
</button>
</Anchor>
<Anchor to="#uutiset">
<button onClick={noop}>
<span>Uutiset&nbsp;›</span>
</button>
</Anchor>
</HeroPrimaryButtons>
</HeroPrimarySection>
<HeroSecondarySection
heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
>
<HeroSecondarySectionItem note="Ma">
<span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
</HeroSecondarySectionItem>
<HeroSecondarySectionItem note="To">
<span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
</HeroSecondarySectionItem>
</HeroSecondarySection>
</div>
<HeroPrimarySection
header="Yritystapahtumia ja vastapainoa opiskelulle"
text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
>
<HeroPrimaryButtons row>
<Anchor to="#tapahtumat">
<button onClick={noop}>
<span>Tapahtumat&nbsp;›</span>
</button>
</Anchor>
<Anchor to="#uutiset">
<button onClick={noop}>
<span>Uutiset&nbsp;›</span>
</button>
</Anchor>
</HeroPrimaryButtons>
</HeroPrimarySection>
<HeroAside bgColor="lightTurquoise">
<p>
Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
@@ -60,11 +47,24 @@ const ActualPageHero: React.FC = () => (
linkText="Yritysyhteistyö&nbsp;›">
</HeroAsideItem>
<HeroAsideItem
// TODO: Too long
header="Uusia suhteita ulkopaikkakuntalaisten kanssa"
link="#ulkosuhteet"
linkText="Ulkoiset suhteet&nbsp;›">
</HeroAsideItem>
</HeroAside>
<HeroSecondarySection
heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
>
<HeroSecondarySectionItem note="Ma">
<span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
</HeroSecondarySectionItem>
<HeroSecondarySectionItem note="To">
<span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
</HeroSecondarySectionItem>
</HeroSecondarySection>
</Hero>
)
src/views/CorporatePage/CorporatePageHero.tsx
+4 -6
View File
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
const CorporatePageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!"
text="Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle."
/>
</div>
<HeroPrimarySection
header="Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!"
text="Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle."
/>
<HeroAside bgColor="lightTurquoise">
<HeroAsideItem
src/views/FreshmenPage/FreshmenPageHero.tsx
+4 -6
View File
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
const FreshmenPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Tervetuloa opiskelemaan Otaniemeen!"
text="Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu."
/>
</div>
<HeroPrimarySection
header="Tervetuloa opiskelemaan Otaniemeen!"
text="Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu."
/>
<HeroAside bgColor="lightTurquoise">
<HeroAsideItem
src/views/FrontPage/FrontPageHero.tsx
+17 -19
View File
@@ -5,25 +5,23 @@ import noop from "@utils/noop";
const FrontPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Aalto-yliopiston Sähköinsinöörikilta"
text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
>
<HeroPrimaryButtons>
<Anchor to="/kilta">
<button onClick={noop}>
<span>Tietoa killasta&nbsp;›</span>
</button>
</Anchor>
<Anchor to="/kilta/toiminta">
<button onClick={noop}>
<span>Vastapainoa opiskelulle&nbsp;›</span>
</button>
</Anchor>
</HeroPrimaryButtons>
</HeroPrimarySection>
</div>
<HeroPrimarySection
header="Aalto-yliopiston Sähköinsinöörikilta"
text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
>
<HeroPrimaryButtons>
<Anchor to="/kilta">
<button onClick={noop}>
<span>Tietoa killasta&nbsp;›</span>
</button>
</Anchor>
<Anchor to="/kilta/toiminta">
<button onClick={noop}>
<span>Vastapainoa opiskelulle&nbsp;›</span>
</button>
</Anchor>
</HeroPrimaryButtons>
</HeroPrimarySection>
<HeroAside bgColor="darkBlue">
<HeroAsideItem
src/views/GuildPage/GuildPageHero.tsx
+6 -8
View File
@@ -3,14 +3,12 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
const GuildPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection header="Kilta koostuu Aalto-yliopiston opiskelijoista, joita yhdistää erilaiset sähkötekniikkaan liittyvät alat">
<p>
Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta <a href="/opinnot_ja_ura">opetusta</a>, ja että heistä valmistuu alansa huippuosaajia. Uusille opiskelijoille kilta järjestää <a href="/kilta/fuksi">fuksikasvatusta</a>, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa. Kilta tarjoaa vastapainoa opiskelulle erilaisten <a href="/kilta/toiminta">tapahtumien</a> muodossa ja välittää jäsenilleen tietoa alan <a href="/yritysyhteistyo">työpaikoista ja yrityksistä</a>.
</p>
<p>Kilta toimii opiskelijoiden voimin. Killan <a href="#toimintaan">vapaaehtoisena</a> pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.</p>
</HeroPrimarySection>
</div>
<HeroPrimarySection header="Kilta koostuu Aalto-yliopiston opiskelijoista, joita yhdistää erilaiset sähkötekniikkaan liittyvät alat">
<p>
Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta <a href="/opinnot_ja_ura">opetusta</a>, ja että heistä valmistuu alansa huippuosaajia. Uusille opiskelijoille kilta järjestää <a href="/kilta/fuksi">fuksikasvatusta</a>, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa. Kilta tarjoaa vastapainoa opiskelulle erilaisten <a href="/kilta/toiminta">tapahtumien</a> muodossa ja välittää jäsenilleen tietoa alan <a href="/yritysyhteistyo">työpaikoista ja yrityksistä</a>.
</p>
<p>Kilta toimii opiskelijoiden voimin. Killan <a href="#toimintaan">vapaaehtoisena</a> pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.</p>
</HeroPrimarySection>
<HeroAside bgColor="lightTurquoise">
<HeroAsideItem
src/views/InEnglishPage/InEnglishPageHero.tsx
+4 -6
View File
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
const InEnglishPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Guild of Electrical Engineering"
text="is something"
/>
</div>
<HeroPrimarySection
header="Guild of Electrical Engineering"
text="is something"
/>
<HeroAside bgColor="darkBlue">
<HeroAsideItem
src/views/StudiesPage/StudiesPageHero.tsx
+4 -6
View File
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
const StudiesPageHero: React.FC = () => (
<Hero>
<div>
<HeroPrimarySection
header="Suomen parasta elektroniikan opetusta"
text="Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa."
/>
</div>
<HeroPrimarySection
header="Suomen parasta elektroniikan opetusta"
text="Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa."
/>
<HeroAside bgColor="darkBlue">
<HeroAsideItem