app/assets/stylesheets/layouts/footer.scss
@import "../global/variables.scss";
div#application-footer {
background-image: image-url("home/fond-carte-footer.jpg");
background-size: cover;
background-position: center center;
div.content-wrap {
margin: auto;
max-width: $content-width;
padding: 50px $content-padding 30px $content-padding;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
p.title {
text-transform: uppercase;
color: $color-dark-grey;
font-weight: bold;
}
& > div:nth-child(1) {
& > p:nth-child(1) {
padding: 0 0 13px 0;
}
& > p:nth-child(2) {
font-size: 0.8em;
padding: 0 0 20px 0;
}
& > p:nth-child(3) {
font-size: 0.8em;
}
}
& > div:nth-child(2) {
.social {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 10px 0 20px 0;
img {
height: 60px;
}
}
a {
font-size: 0.8em;
text-decoration: underline;
color: $color-dark-grey;
}
}
& > div:nth-child(3) {
padding: 20px 0 0 0;
img {
max-width: 200px;
}
}
}
.data {
color: $color-dark-grey;
text-align: center;
padding: 20px 20px;
font-size: 0.8em;
svg {
max-width: 40px;
vertical-align: middle;
padding: 0 10px 0 0;
}
}
@media only screen and (max-width: $mobile-width) {
div.content-wrap {
flex-direction: column;
& > div:nth-child(2) {
padding: 30px 0;
}
}
}
}
div#application-footer-second {
text-align: center;
font-size: 0.8em;
padding: 20px 20px 10px 20px;
a {
text-decoration: underline;
color: rgb(199, 199, 199);
}
details.version {
color: rgb(197, 197, 197);
padding-top: 15px;
cursor: pointer;
summary {
padding: 0 0 5px 0;
list-style: none;
&::marker,
&::-webkit-details-marker {
display: none;
}
&:focus {
outline: 0;
}
}
p {
padding: 2px 0;
}
a {
text-decoration: underline;
color: inherit;
}
}
}