180 lines
3.1 KiB
CSS
180 lines
3.1 KiB
CSS
:root{
|
|
--white: #FFFFFF;
|
|
--black: #282828;
|
|
--pureblack: #000000;
|
|
--font-color: #272727;
|
|
--grey: #A3A3A3;
|
|
--link-color: #1f9bde;
|
|
--linkhover: #00d9ff;
|
|
--navlink: #4b4b4b;
|
|
--switch: #FBFBFE;
|
|
--error: #c23c3c;
|
|
--footer-color: #e9e9e9;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'opensans';
|
|
src:url('/public/fonts/opensans.ttf') format('truetype'),
|
|
url('/public/fonts/opensans.eot') format('embedded-opentype'),
|
|
url('/public/fonts/opensans.svg') format('svg'),
|
|
url('/public/fonts/opensans.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'opensans-bold';
|
|
src:url('/public/fonts/opensans-bold.ttf') format('truetype'),
|
|
url('/public/fonts/opensans-bold.eot') format('embedded-opentype'),
|
|
url('/public/fonts/opensans-bold.svg') format('svg'),
|
|
url('/public/fonts/opensans-bold.woff') format('woff');
|
|
}
|
|
|
|
html, body, div, span, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
abbr, address, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, samp,
|
|
small, strong, sub, sup, var,
|
|
b, i,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, canvas, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section, summary,
|
|
time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
background: transparent;
|
|
}
|
|
|
|
.flex{
|
|
display: flex;
|
|
}
|
|
|
|
.row{
|
|
flex-direction: row;
|
|
}
|
|
|
|
.row-rev{
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.wrap{
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.wrap-rev{
|
|
flex-flow: row wrap-reverse;
|
|
}
|
|
|
|
.column{
|
|
flex-direction: column;
|
|
}
|
|
|
|
.column-rev{
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.between{
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.around{
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.start{
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.end{
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.center{
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
|
|
/* css starts here */
|
|
|
|
a:hover{
|
|
color: var(--linkhover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'opensans-bold', sans-serif;
|
|
letter-spacing: 3px;
|
|
color: var(--font-color);
|
|
font-size: 1.7em;
|
|
margin-bottom: 30px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'opensans-bold',sans-serif;
|
|
font-size: 1.3em;
|
|
color: var(--font-color);
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
h3 {
|
|
font-family: 'opensans-bold',sans-serif;
|
|
font-size: 1.2em;
|
|
color: var(--font-color);
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
p {
|
|
font-family: 'opensans',sans-serif;
|
|
font-size: 1em;
|
|
color: var(--font-color);
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
.App {
|
|
text-align: center;
|
|
}
|
|
|
|
.App-logo {
|
|
height: 40vmin;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.App-logo {
|
|
animation: App-logo-spin infinite 20s linear;
|
|
}
|
|
}
|
|
|
|
.App-header {
|
|
background-color: var(--color-primary);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: calc(10px + 2vmin);
|
|
color: var(--font-color);
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 0 auto; /* This will make sure this container takes all available vertical space */
|
|
}
|
|
|
|
#root {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
} |