Aarni Halinen
153 lines
3.2 KiB
TypeScript
153 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import Head from "next/head";
|
|
import { AppProps } from "next/app";
|
|
import styled, { createGlobalStyle } from "styled-components";
|
|
import { ToastContainer } from "react-toastify";
|
|
import colors from "@theme/colors";
|
|
import breakpoints from "@theme/breakpoints";
|
|
import LocaleStore from "../i18n";
|
|
|
|
import "react-mde/lib/styles/css/react-mde-all.css";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
|
|
const fontFamily = "'Montserrat', sans-serif";
|
|
const fontSize = 12; // 16px
|
|
const lineHeight = 1.5;
|
|
|
|
const GlobalCommonStyles = createGlobalStyle`
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: ${fontFamily};
|
|
|
|
/* 12px */
|
|
font-size: ${fontSize * 0.75}pt;
|
|
line-height: ${lineHeight};
|
|
|
|
@media screen and (min-width: ${breakpoints.medium}) {
|
|
/* 16px */
|
|
font-size: ${fontSize}pt;
|
|
}
|
|
|
|
@media screen and (min-width: ${breakpoints.large}) {
|
|
/* 20px */
|
|
font-size: ${fontSize * 1.25}pt;
|
|
}
|
|
|
|
@media screen and (min-width: ${breakpoints.xlarge}) {
|
|
/* 24px */
|
|
font-size: ${fontSize * 1.5}pt;
|
|
}
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
background-color: ${colors.darkBlue};
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
h1 {
|
|
line-height: 1.15;
|
|
font-size: 2.5rem;
|
|
font-weight: 200;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2rem;
|
|
font-weight: 200;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.1em;
|
|
font-weight: 800;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
li {
|
|
font-weight: 600;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
color: ${colors.blue1};
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
`;
|
|
|
|
const AppContainer = styled.div`
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
color: ${colors.black};
|
|
background-color: ${colors.white};
|
|
`;
|
|
|
|
const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => (
|
|
<>
|
|
<Head>
|
|
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
|
|
<meta
|
|
name="description"
|
|
content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
|
|
/>
|
|
<meta name="keywords" content="SIK AYY" />
|
|
</Head>
|
|
<GlobalCommonStyles />
|
|
<LocaleStore>
|
|
<AppContainer>
|
|
<Component {...pageProps} />
|
|
</AppContainer>
|
|
</LocaleStore>
|
|
<ToastContainer position="bottom-right" />
|
|
</>
|
|
);
|
|
|
|
export default Web20App;
|