venissieux: adjust for mobile

This commit is contained in:
Frédéric Péters 2018-09-18 11:13:42 +02:00
parent 36a066777d
commit 74d8f0c541
1 changed files with 49 additions and 0 deletions

View File

@ -12,10 +12,16 @@ nav {
max-width: $width;
margin: 0 auto;
}
@media screen and (max-width: $mobile-limit) {
text-align: center;
}
}
#toplinks {
top: -5rem;
@media screen and (max-width: $mobile-limit) {
top: -9.5rem;
}
background: transparent;
box-shadow: none;
a {
@ -29,6 +35,9 @@ nav {
}
div#header h1 {
@media screen and (max-width: $mobile-limit) {
text-align: center;
}
padding: 2rem 0;
font-family: Oswald;
font-weight: 300;
@ -39,6 +48,9 @@ div#header h1 {
div#section-une {
background-size: cover;
padding: 2rem;
@media screen and (max-width: $mobile-limit) {
padding: 1rem;
}
&::after {
content: "";
display: block;
@ -51,9 +63,22 @@ div#section-une {
width: 50%;
height: 100%;
padding: 2rem 4rem;
@media screen and (max-width: $mobile-limit) {
padding: 1rem 0rem;
float: none;
width: auto;
height: auto;
margin: 1rem 0;
img {
max-width: 30%;
}
}
h2 {
position: absolute;
bottom: 1rem;
@media screen and (max-width: $mobile-limit) {
position: static;
}
&::before {
content: "";
background: $secondary-color;
@ -62,15 +87,27 @@ div#section-une {
height: 3px;
position: relative;
top: -10px;
@media screen and (max-width: $mobile-limit) {
content: none;
}
}
&::after {
content: none;
@media screen and (max-width: $mobile-limit) {
content: "";
}
}
}
}
div.cell {
float: right;
width: 25%;
@media screen and (max-width: $mobile-limit) {
float: none;
width: auto;
margin: 1rem 0;
max-width: 100%;
}
background: $primary-color;
color: white;
h2 {
@ -98,6 +135,10 @@ div#section-une {
}
form {
display: flex;
@media screen and (max-width: $mobile-limit) {
display: block;
padding-bottom: 1rem;
}
button {
background: $secondary-color;
color: white;
@ -172,6 +213,14 @@ div#rub_service {
}
}
div#steps {
@media screen and (max-width: $mobile-limit) {
display: inline-block;
max-width: 90%;
overflow: hidden;
}
}
div#steps ol li.current {
span.marker {
color: $secondary-color;