Responsive home page
This commit is contained in:
Yves Gatesoupe
parent
3f2e8ba17a
commit
8bc77f8994
@ -1,7 +1,7 @@
|
||||
<header class="[ intro ]">
|
||||
<div class="[ wrapper ]">
|
||||
<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">
|
||||
<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
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<a class="skip-link" href="#main-content">Skip to content</a>
|
||||
<header role="banner" class="[ site-head ]">
|
||||
<div class="wrapper">
|
||||
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
|
||||
<a href="/" class="[ site-head__site-name ] [ leading-tight ]">
|
||||
<div class="[ site-head__inner ]">
|
||||
<a href="/" class="[ site-head__site-name ]">
|
||||
<span class="visually-hidden">{{ site.name }} - Home</span>
|
||||
{% include "../../../images/astrolabe_logo.svg" %}
|
||||
</a>
|
||||
|
||||
@ -79,14 +79,14 @@ h3 {
|
||||
font-size: get-size(500);
|
||||
}
|
||||
|
||||
@include media-query('md') {
|
||||
// h1 {
|
||||
// font-size: get-size(900);
|
||||
// }
|
||||
@media (max-width: 575.98px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
// h2 {
|
||||
// font-size: get-size(800);
|
||||
// }
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// font-size: get-size(700);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,14 +29,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--compact {
|
||||
max-width: 20ex;
|
||||
}
|
||||
|
||||
+ svg {
|
||||
margin-left: auto;
|
||||
margin-right: 8rem;
|
||||
vertical-align: middle;
|
||||
max-width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,3 +41,32 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,3 +79,32 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,3 +43,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.site-foot {
|
||||
&__inner {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,12 @@
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__site-name {
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user