pages comprendre and rejoindre reponsive mobile

This commit is contained in:
Yves Gatesoupe 2020-07-17 15:57:08 +02:00
parent b59f4b55de
commit 1e9b6f6d5f
8 changed files with 219 additions and 144 deletions

View File

@ -23,6 +23,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Au démarrage
</summary>
<div class="table-wrapper">
<table>
<thead>
<tr>
@ -47,6 +48,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
</tr>
</tbody>
</table>
</div>
*ARE : Aide au Retour à lEmploi
@ -58,6 +60,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Votre activité
</summary>
<div class="table-wrapper">
<table>
<thead>
<tr>
@ -100,6 +103,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
</tr>
</tbody>
</table>
</div>
*RCPro : Responsabilité Civile Professionnelle
@ -111,6 +115,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### Vos obligations
</summary>
<div class="table-wrapper">
<table>
<thead>
<tr>
@ -141,6 +146,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
</tr>
</tbody>
</table>
</div>
</details>
<details>
@ -148,6 +154,7 @@ La CAE cest aussi une société coopérative, chacun des associés qui la com
### La prévoyance
</summary>
<div class="table-wrapper">
<table>
<thead>
<tr>
@ -179,6 +186,7 @@ Votre activité ouvre des droits à lARE*</td>
</tr>
</tbody>
</table>
</div>
*ARE: Aide au Retour à l'Emploi

View File

@ -34,13 +34,14 @@ permalink: '/nous-rejoindre/index.html'
<img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;">
Au bout dun certain temps votre activité devient prérenne.
Au bout dun certain temps votre activité devient prérenne. Deux options s'offrent à vous :
</article>
</section>
<section class="process-cae split">
<article class="process-cae__block">
<img src="/images/arrow-left.svg" alt="flèche gauche">
<img class="hide-mobile" src="/images/arrow-left.svg" alt="flèche gauche">
<p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous !
@ -66,10 +67,11 @@ permalink: '/nous-rejoindre/index.html'
</article>
<article class="process-cae__block">
<img src="/images/arrow-right.svg" alt="flèche droite">
<img class="hide-mobile" src="/images/arrow-right.svg" alt="flèche droite">
<p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
Vous créez votre propre entreprise, félicitations !
<img src="/images/small-boat.svg" alt="Petit bateau à voile" style="width: 8rem; margin-top: 4rem; margin-left: 18rem;">
<img class="small-boat" src="/images/small-boat.svg" alt="Petit bateau à voile">
</article>
</section>

View File

@ -128,14 +128,12 @@ legend {
}
@media (max-width: 575.98px) {
.home .form-container {
.form-container {
svg {
width: 70rem;
overflow: hidden;
}
}
.form-container {
.contact-heading {
margin: 2rem 0;
}

View File

@ -34,3 +34,9 @@
}
}
}
@media (max-width: 575.98px) {
.nav {
margin-top: 1rem;
}
}

View File

@ -166,6 +166,16 @@
}
}
.table-wrapper {
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
}
table {
margin-bottom: 1rem;
@ -208,14 +218,6 @@
background-color: var(--color-light-gray);
}
}
~ p {
font-size: .875rem;
&:last-child {
margin-bottom: 1.5rem;
}
}
}
.process-cae {
@ -295,10 +297,15 @@
}
img {
// width: 18rem;
align-self: center;
margin: 0 auto;
}
.small-boat {
width: 8rem;
margin-top: 4rem;
margin-left: 18rem;
}
}
}
}
@ -322,3 +329,45 @@
}
}
}
@media (max-width: 575.98px) {
.post {
&__body {
h1 {
margin: 4rem 0;
font-size: 1.75rem;
}
.split-content {
display: block;
}
.table-wrapper {
overflow-y: auto;
}
table {
min-width: 48rem;
}
.process-cae{
&.split {
display: block;
.process-cae__block:last-child {
align-items: flex-start;
}
}
&__block {
.small-boat {
margin-left: auto;
margin-right: auto;
}
}
}
}
}
}

View File

@ -75,3 +75,4 @@ img {
@import 'components/sponsor';
@import 'components/skip-link';
@import 'components/video-player';
@import 'utilities/responsive';

View File

@ -0,0 +1,11 @@
.hide-desktop {
@media (min-width: 576px) {
display: none;
}
}
.hide-mobile {
@media (max-width: 575.98px) {
display: none;
}
}