Responsive home page

This commit is contained in:
Yves Gatesoupe 2020-07-17 13:33:39 +02:00
parent 3f2e8ba17a
commit 8bc77f8994
10 changed files with 160 additions and 14 deletions

View File

@ -1,7 +1,7 @@
<header class="[ intro ]"> <header class="[ intro ]">
<div class="[ wrapper ]"> <div class="[ wrapper ]">
<h1 class="[ intro__heading ]">{{ brandHeading }}</h1> <h1 class="[ intro__heading ]">{{ brandHeading }}</h1>
<svg width="127" height="237" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116.77 20.74c-.472-1.843-2.433-5.326-6.48-5.326h-4.283C105.395 6.814 98.249 0 89.533 0c-9.116 0-16.534 7.448-16.534 16.605v20.597L10.073 61.124a2.422 2.422 0 00-1.403 3.124c6.302 16.578 22.13 26.795 38.897 26.795 2.778 0 5.582-.315 8.375-.895 2.026.425 4.09.704 6.169.824v21.449a2.422 2.422 0 104.842 0V90.962a41.398 41.398 0 006.046-.8v22.259a2.422 2.422 0 104.843 0v-23.59c16.39-5.573 28.22-21.102 28.22-39.352V20.256h4.228c1.262 0 1.737 1.513 1.793 1.708a2.425 2.425 0 002.94 1.723 2.424 2.424 0 001.747-2.948zM32.478 82.973c-8.206-3.684-14.61-10.117-18.31-18.225l62.113-23.615c.013-.004.023-.013.034-.017.09-.036.173-.083.257-.128.058-.032.119-.058.174-.093.066-.044.124-.096.186-.146.06-.05.127-.095.184-.151.05-.05.092-.109.138-.162.054-.063.112-.124.159-.192.043-.065.077-.136.116-.203.037-.067.079-.131.11-.202.03-.07.05-.146.074-.22.024-.076.053-.15.07-.229.015-.065.019-.132.028-.199.013-.093.028-.187.03-.282l.003-.039V16.605c0-6.485 5.245-11.762 11.69-11.762 6.416 0 11.637 5.226 11.687 11.667v30.547H86.663a2.421 2.421 0 00-2.422 2.422c0 .023.007.043.007.068-.033 15.12-9.538 28.88-23.678 34.255-9.166 3.483-19.144 3.192-28.092-.828zm34.639 3.12c12.614-6.78 21.023-19.79 21.88-34.194h12.133c-1.194 18.255-15.785 32.903-34.013 34.195z" fill="#1E1E1E"/><path d="M89.53 20.256h4.464a2.421 2.421 0 100-4.842h-4.463a2.421 2.421 0 100 4.842zM123.897 194.561h-4.496V114.15a2.241 2.241 0 00-2.248-2.233H6.994c-1.24 0-2.248 1-2.248 2.233v80.411H2.498a2.242 2.242 0 00-2.248 2.234v37.971A2.242 2.242 0 002.498 237h121.399a2.243 2.243 0 002.249-2.234v-37.971a2.243 2.243 0 00-2.249-2.234zM9.243 116.384h105.662v78.177H9.243v-78.177zm112.406 116.149H4.746v-33.505H121.65v33.505z" fill="#1E1E1E"/><path d="M103.663 125.318h-83.18a2.242 2.242 0 00-2.249 2.234v55.841a2.241 2.241 0 002.248 2.233h83.181c1.241 0 2.248-1 2.248-2.233v-55.841a2.242 2.242 0 00-2.248-2.234zm-2.248 55.841H22.73v-51.373h78.685v51.373zM114.904 206.846h-13.488a2.242 2.242 0 00-2.248 2.234v13.401a2.242 2.242 0 002.248 2.234h13.488a2.243 2.243 0 002.249-2.234V209.08a2.243 2.243 0 00-2.249-2.234zm-2.248 13.402h-8.992v-8.935h8.992v8.935zM92.423 206.846h-13.49a2.242 2.242 0 00-2.247 2.234v13.401a2.242 2.242 0 002.248 2.234h13.489a2.242 2.242 0 002.248-2.234V209.08a2.242 2.242 0 00-2.248-2.234zm-2.248 13.402h-8.993v-8.935h8.993v8.935z" fill="#1E1E1E"/><path d="M78.934 134.253H27.227v4.467h51.707v-4.467zM63.197 143.187h-35.97v4.468h35.97v-4.468zM45.212 152.122H27.227v4.467h17.985v-4.467zM58.7 152.122h-8.993v4.467h8.992v-4.467z" fill="#111"/></svg> <svg viewBox="0 0 127 237" height="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M116.77 20.74c-.472-1.843-2.433-5.326-6.48-5.326h-4.283C105.395 6.814 98.249 0 89.533 0c-9.116 0-16.534 7.448-16.534 16.605v20.597L10.073 61.124a2.422 2.422 0 00-1.403 3.124c6.302 16.578 22.13 26.795 38.897 26.795 2.778 0 5.582-.315 8.375-.895 2.026.425 4.09.704 6.169.824v21.449a2.422 2.422 0 104.842 0V90.962a41.398 41.398 0 006.046-.8v22.259a2.422 2.422 0 104.843 0v-23.59c16.39-5.573 28.22-21.102 28.22-39.352V20.256h4.228c1.262 0 1.737 1.513 1.793 1.708a2.425 2.425 0 002.94 1.723 2.424 2.424 0 001.747-2.948zM32.478 82.973c-8.206-3.684-14.61-10.117-18.31-18.225l62.113-23.615c.013-.004.023-.013.034-.017.09-.036.173-.083.257-.128.058-.032.119-.058.174-.093.066-.044.124-.096.186-.146.06-.05.127-.095.184-.151.05-.05.092-.109.138-.162.054-.063.112-.124.159-.192.043-.065.077-.136.116-.203.037-.067.079-.131.11-.202.03-.07.05-.146.074-.22.024-.076.053-.15.07-.229.015-.065.019-.132.028-.199.013-.093.028-.187.03-.282l.003-.039V16.605c0-6.485 5.245-11.762 11.69-11.762 6.416 0 11.637 5.226 11.687 11.667v30.547H86.663a2.421 2.421 0 00-2.422 2.422c0 .023.007.043.007.068-.033 15.12-9.538 28.88-23.678 34.255-9.166 3.483-19.144 3.192-28.092-.828zm34.639 3.12c12.614-6.78 21.023-19.79 21.88-34.194h12.133c-1.194 18.255-15.785 32.903-34.013 34.195z" fill="#1E1E1E"/><path d="M89.53 20.256h4.464a2.421 2.421 0 100-4.842h-4.463a2.421 2.421 0 100 4.842zM123.897 194.561h-4.496V114.15a2.241 2.241 0 00-2.248-2.233H6.994c-1.24 0-2.248 1-2.248 2.233v80.411H2.498a2.242 2.242 0 00-2.248 2.234v37.971A2.242 2.242 0 002.498 237h121.399a2.243 2.243 0 002.249-2.234v-37.971a2.243 2.243 0 00-2.249-2.234zM9.243 116.384h105.662v78.177H9.243v-78.177zm112.406 116.149H4.746v-33.505H121.65v33.505z" fill="#1E1E1E"/><path d="M103.663 125.318h-83.18a2.242 2.242 0 00-2.249 2.234v55.841a2.241 2.241 0 002.248 2.233h83.181c1.241 0 2.248-1 2.248-2.233v-55.841a2.242 2.242 0 00-2.248-2.234zm-2.248 55.841H22.73v-51.373h78.685v51.373zM114.904 206.846h-13.488a2.242 2.242 0 00-2.248 2.234v13.401a2.242 2.242 0 002.248 2.234h13.488a2.243 2.243 0 002.249-2.234V209.08a2.243 2.243 0 00-2.249-2.234zm-2.248 13.402h-8.992v-8.935h8.992v8.935zM92.423 206.846h-13.49a2.242 2.242 0 00-2.247 2.234v13.401a2.242 2.242 0 002.248 2.234h13.489a2.242 2.242 0 002.248-2.234V209.08a2.242 2.242 0 00-2.248-2.234zm-2.248 13.402h-8.993v-8.935h8.993v8.935z" fill="#1E1E1E"/><path d="M78.934 134.253H27.227v4.467h51.707v-4.467zM63.197 143.187h-35.97v4.468h35.97v-4.468zM45.212 152.122H27.227v4.467h17.985v-4.467zM58.7 152.122h-8.993v4.467h8.992v-4.467z" fill="#111"/></svg>
<div class="btn-grp"> <div class="btn-grp">
<a role="button" href="/comprendre-la-cae" class="btn btn-secondary">Une CAE c'est quoi ?</a> <a role="button" href="/comprendre-la-cae" class="btn btn-secondary">Une CAE c'est quoi ?</a>
<a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre

View File

@ -1,8 +1,8 @@
<a class="skip-link" href="#main-content">Skip to content</a> <a class="skip-link" href="#main-content">Skip to content</a>
<header role="banner" class="[ site-head ]"> <header role="banner" class="[ site-head ]">
<div class="wrapper"> <div class="wrapper">
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]"> <div class="[ site-head__inner ]">
<a href="/" class="[ site-head__site-name ] [ leading-tight ]"> <a href="/" class="[ site-head__site-name ]">
<span class="visually-hidden">{{ site.name }} - Home</span> <span class="visually-hidden">{{ site.name }} - Home</span>
{% include "../../../images/astrolabe_logo.svg" %} {% include "../../../images/astrolabe_logo.svg" %}
</a> </a>

View File

@ -79,14 +79,14 @@ h3 {
font-size: get-size(500); font-size: get-size(500);
} }
@include media-query('md') { @media (max-width: 575.98px) {
// h1 { h1 {
// font-size: get-size(900); font-size: 2rem;
// } }
// h2 { h2 {
// font-size: get-size(800); font-size: 1.6rem;
// } }
// h3 { // h3 {
// font-size: get-size(700); // font-size: get-size(700);

View File

@ -126,3 +126,26 @@ legend {
} }
} }
} }
@media (max-width: 575.98px) {
.home .form-container {
svg {
width: 70rem;
overflow: hidden;
}
}
.form-container {
.contact-heading {
margin: 2rem 0;
}
}
.field-list {
display: block;
}
.field-list__field-group {
margin-top: 1.5rem;
}
}

View File

@ -29,14 +29,11 @@
display: none; display: none;
} }
&--compact {
max-width: 20ex;
}
+ svg { + svg {
margin-left: auto; margin-left: auto;
margin-right: 8rem; margin-right: 8rem;
vertical-align: middle; vertical-align: middle;
max-width: 8rem;
} }
} }
@ -44,3 +41,32 @@
margin-top: -3.5rem; margin-top: -3.5rem;
} }
} }
@media (max-width: 575.98px) {
.intro {
margin-top: 3rem;
&__heading {
font-size: 1.75rem;
+ svg {
margin: 2rem auto 0;
max-width: 7rem;
}
}
.btn-grp {
margin-top: 0;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
margin-top: 2rem;
.btn + .btn {
margin-left: 0;
margin-top: 1.5rem;
}
}
}
}

View File

@ -79,3 +79,32 @@
top: -9rem; top: -9rem;
} }
} }
@media (max-width: 575.98px) {
.news-list {
> svg {
width: 70rem;
overflow: hidden;
}
&__items {
display: flex;
overflow-y: auto;
padding-bottom: 1rem;
}
&__item {
flex-shrink: 0;
flex-basis: 16rem;
}
}
.home .news-list {
margin: 6rem 0;
&__inner {
position: static;
margin-top: -9rem;
}
}
}

View File

@ -80,3 +80,30 @@
} }
} }
} }
@media (max-width: 575.98px) {
.presentation {
article {
display: block;
margin-bottom: 4rem;
}
.content {
h2 {
font-size: 1.6rem;
+ p {
font-size: 1rem;
}
}
}
.side-info {
margin-top: 2rem;
img {
margin-bottom: 2.5rem;
}
}
}
}

View File

@ -43,3 +43,11 @@
} }
} }
} }
@media (max-width: 575.98px) {
.site-foot {
&__inner {
display: block;
}
}
}

View File

@ -2,6 +2,12 @@
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
&__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
&__site-name { &__site-name {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
@ -12,3 +18,16 @@
} }
} }
} }
@media (max-width: 575.98px) {
.site-head {
&__inner {
display: block;
}
&__site-name {
display: inline-block;
margin: 0 auto;
}
}
}

View File

@ -35,3 +35,17 @@
} }
} }
} }
@media (max-width: 575.98px) {
.sponsor {
&__list {
display: flex;
overflow-y: auto;
padding-bottom: 1rem;
}
&__list-item + &__list-item {
margin-left: 1.5rem;
}
}
}