You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.0 KiB
CSS
76 lines
2.0 KiB
CSS
4 years ago
|
@font-face {
|
||
|
|
font-family:gill-sans;
|
||
|
|
src:url(../fonts/gill-sans-mt.ttf)
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 699px) {
|
||
|
|
body { background:none; }
|
||
|
|
|
||
|
|
header { width:100%; }
|
||
|
|
header .logo { width:25%; padding-top:30px; float:right; }
|
||
|
|
header .row p { width:100%; }
|
||
|
|
|
||
|
|
main { background:none; }
|
||
|
|
|
||
|
|
.row { flex-direction:column; margin:4em 0; }
|
||
|
|
.row:nth-child(even) { flex-direction:column-reverse; }
|
||
|
|
.row img { max-height:80%; max-width:80%; margin:1em 0; }
|
||
|
|
|
||
|
|
article { max-width:100%; align-self:center !important; padding:1em; }
|
||
|
|
article h2 { margin-top:auto; font-size:2em; }
|
||
|
|
article:nth-child(1) h2 { margin-right:auto; text-align:right; }
|
||
|
|
article:nth-child(2) h2 { margin-left:auto; }
|
||
|
|
}
|
||
|
|
@media screen and (min-width: 700px) {
|
||
|
|
body { background:url(../img/header-pattern.svg) no-repeat left top; background-size: 90% auto; }
|
||
|
|
header { width:auto; }
|
||
|
|
header .logo { max-width:150px; padding-top:150px; }
|
||
|
|
header .row p { max-width:35%; }
|
||
|
|
|
||
|
|
main { background:url(../img/timeline.svg) no-repeat center top; background-size: auto 100%; }
|
||
|
|
|
||
|
|
.row { flex-direction:row; margin:5em 0; }
|
||
|
|
.row img { max-height:130%; max-width:40%; }
|
||
|
|
|
||
|
|
article { max-width:35%; padding:2em; }
|
||
|
|
article h2 { margin-top:-1.7em; font-size:2em; }
|
||
|
|
article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; }
|
||
|
|
article:nth-child(2) h2 { margin-left:-1.5em; }
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size:1.5em;
|
||
|
|
font-family:gill-sans;
|
||
|
|
}
|
||
|
|
|
||
|
|
p { text-align:justify; }
|
||
|
|
|
||
|
|
.wrap {
|
||
|
|
max-width:1200px;
|
||
|
|
margin:0 auto;
|
||
|
|
padding:0 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 { color:#d63647; margin-bottom:0; clear:both; }
|
||
|
|
h2, h3 { color:#68c7d2; }
|
||
|
|
|
||
|
|
header .logo { padding:30px; background-color:#fff; }
|
||
|
|
header .logo img { width:100%; }
|
||
|
|
header .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; }
|
||
|
|
header .row img { max-height:500px; }
|
||
|
|
header .row p { text-align:justify; }
|
||
|
|
|
||
|
|
main {
|
||
|
|
padding-top:200px; margin-top:-200px;
|
||
|
|
padding-bottom:100px; margin-bottom:-100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row { height:auto; width:100%; display:flex; justify-content:space-between; align-items:center; }
|
||
|
|
|
||
|
|
article { background-color:#eee; }
|