From 575b5130066159ea295b3c4c0d102c598c810dc3 Mon Sep 17 00:00:00 2001 From: Yves Gatesoupe Date: Fri, 3 Jul 2020 18:09:55 +0200 Subject: [PATCH] page "nous rejoindre" statique --- src/_data/navigation.json | 8 +- src/_data/site.json | 2 +- src/_includes/layouts/page.njk | 4 +- src/images/arrow-left.svg | 1 + src/images/arrow-right.svg | 1 + src/images/arrow.svg | 1 + src/images/big-boat.svg | 1 + src/images/crew.svg | 1 + src/images/sailor-accomp.svg | 1 + src/images/sailor-thinking.svg | 1 + src/images/sailor.svg | 1 + src/images/small-boat.svg | 1 + src/images/thinking.svg | 1 + src/pages/comprendre-la-cae.md | 75 +++++++++++ src/pages/nous-rejoindre.md | 84 ++++++++++++ src/scss/components/_post.scss | 210 +++++++++++++++++++++++++++++- src/transforms/parse-transform.js | 2 +- 17 files changed, 381 insertions(+), 14 deletions(-) create mode 100644 src/images/arrow-left.svg create mode 100644 src/images/arrow-right.svg create mode 100644 src/images/arrow.svg create mode 100644 src/images/big-boat.svg create mode 100644 src/images/crew.svg create mode 100644 src/images/sailor-accomp.svg create mode 100644 src/images/sailor-thinking.svg create mode 100644 src/images/sailor.svg create mode 100644 src/images/small-boat.svg create mode 100644 src/images/thinking.svg create mode 100644 src/pages/comprendre-la-cae.md create mode 100644 src/pages/nous-rejoindre.md diff --git a/src/_data/navigation.json b/src/_data/navigation.json index ebcae89..87c826d 100644 --- a/src/_data/navigation.json +++ b/src/_data/navigation.json @@ -2,17 +2,17 @@ "items": [ { "text": "Comprendre la CAE", - "url": "/comprendre", + "url": "/comprendre-la-cae", "external": false }, { "text": "Nous rejoindre", - "url": "/rejoindre", + "url": "/nous-rejoindre", "external": false }, { "text": "L'équipe", - "url": "/equipe", + "url": "/l-equipe", "external": false }, { @@ -22,7 +22,7 @@ }, { "text": "Nous contacter", - "url": "/contact", + "url": "/nous-contacter", "external": false } ] diff --git a/src/_data/site.json b/src/_data/site.json index 51f8a5b..5f6cd16 100644 --- a/src/_data/site.json +++ b/src/_data/site.json @@ -15,7 +15,7 @@ }, "designerName": "Yves Gatesoupe", "designerHandle": "https://twitter.com/YGdsgn", - "illustrators": "Igé Maulana, Leopold Merleau", + "illustrators": "Igé Maulana, Leopold Merleau, Visual Glow", "enableThirdPartyComments": false, "maxPostsPerPage": 5, "maxNewsPerPage": 4, diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk index b2e6f50..7a4dd86 100644 --- a/src/_includes/layouts/page.njk +++ b/src/_includes/layouts/page.njk @@ -2,8 +2,8 @@ {% block content %}
-
-
+
+
{{ content | safe }}
diff --git a/src/images/arrow-left.svg b/src/images/arrow-left.svg new file mode 100644 index 0000000..70bd3a2 --- /dev/null +++ b/src/images/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/arrow-right.svg b/src/images/arrow-right.svg new file mode 100644 index 0000000..f72101f --- /dev/null +++ b/src/images/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/arrow.svg b/src/images/arrow.svg new file mode 100644 index 0000000..89c6149 --- /dev/null +++ b/src/images/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/big-boat.svg b/src/images/big-boat.svg new file mode 100644 index 0000000..b220ec3 --- /dev/null +++ b/src/images/big-boat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/crew.svg b/src/images/crew.svg new file mode 100644 index 0000000..f619d56 --- /dev/null +++ b/src/images/crew.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/sailor-accomp.svg b/src/images/sailor-accomp.svg new file mode 100644 index 0000000..73f9cec --- /dev/null +++ b/src/images/sailor-accomp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/sailor-thinking.svg b/src/images/sailor-thinking.svg new file mode 100644 index 0000000..ee732ad --- /dev/null +++ b/src/images/sailor-thinking.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/sailor.svg b/src/images/sailor.svg new file mode 100644 index 0000000..879c800 --- /dev/null +++ b/src/images/sailor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/small-boat.svg b/src/images/small-boat.svg new file mode 100644 index 0000000..ac79451 --- /dev/null +++ b/src/images/small-boat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/thinking.svg b/src/images/thinking.svg new file mode 100644 index 0000000..1398894 --- /dev/null +++ b/src/images/thinking.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/comprendre-la-cae.md b/src/pages/comprendre-la-cae.md new file mode 100644 index 0000000..944bb39 --- /dev/null +++ b/src/pages/comprendre-la-cae.md @@ -0,0 +1,75 @@ +--- +title: 'Comprendre la CAE' +permalink: '/comprendre-la-cae/index.html' +--- + +## Une entreprise partagée +
+
+ +Une [Coopérative d’Activité et d’Emploi](https://fr.wikipedia.org/wiki/Coop%C3%A9rative_d%27activit%C3%A9s_et_d%27emploi) est une entreprise partagée. +

+Elle permet de mettre en commun une structure et des moyens afin que chacun puisse réaliser son activité en autonomie. +

+La CAE c’est aussi une société coopérative, chacun des associés qui la compose participe aux grandes décisions avec le principe Une personne = Une voix. +
+ +
+ +## Le statut d’entrepreneur salarié + +
+ + + ### Au démarrage + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto-entrepreneurGérant sociétéPortage salarialEntrepreneur salarié en CAE
Création du statutRelativement simpleMise en place complexeSimpleSimple
Aide à la créationACRE* pour les demandeurs d'emploiACRE* pour les demandeurs d'emploiPas de dispositif d’aide à la créationARE* pour les demandeurs d'emploi
+ + *ACRE : Aide à la Création et Reprise d’Entreprise + + *ARE : Aide au Retour à l’Emploi +
+ +
+ + + ### Votre activité + + + + + + + + + + + +
Auto-entrepreneurGérant sociétéPortage salarialEntrepreneur salarié en CAE
+
diff --git a/src/pages/nous-rejoindre.md b/src/pages/nous-rejoindre.md new file mode 100644 index 0000000..897b890 --- /dev/null +++ b/src/pages/nous-rejoindre.md @@ -0,0 +1,84 @@ +--- +title: 'Nous rejoindre' +permalink: '/nous-rejoindre/index.html' +--- + +## Comment rejoindre Astrolabe + +
+
+ + + Entrepreneur candidat CAE + + Vous avez un projet d’entrepreneuriat en lien avec la prestation de service dans le domaine des nouvelles technologies et du numérique. + + Après entretien et validation de votre projet nous concluons un Contrat d’Appui au Projet d’Entreprise (CAPE). +
+
+ + + flèche bas +
+ + ### Contrat CAPE + + - Durée maximale de 12 mois (renouvelable 2 fois) + - Accompagnement à la création + - Maintien de l’ARE pour les demandeurs d’emploi + - Ouverture des droits allocation chômage si rémunération + - Attention, ce n’est pas un contrat de travail + + [Voir le contrat CAPE en détail]() +
+
+
+ + + Entrepreneur en contrat CAPE + + Au bout d’un certain temps votre activité devient prérenne. +
+
+
+
+ + + flèche gauche + + Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous ! + +
+ + ### Contrat CESA + + - Durée indéterminée + - Statut salarié + - Ouverture des droits allocation chômage + - Mutuelle santé + + [Voir le contrat CESA en détail]() +
+ + + Equipage Astrolabe + + + flèche bas + + Vous devenez associé d’Astrolabe et partagez la barre avec le reste de l’équipage. + + + Grand bateau de face +
+
+ + + flèche droite + + Vous créez votre propre entreprise, félicitations ! + + + Petit bateau à voile +
+
diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index e93ea72..355b57b 100644 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -1,13 +1,15 @@ .post { + padding-bottom: 8rem; + &__body { - --flow-space: #{get-size(800)}; + // --flow-space: #{get-size(800)}; /** * Generic HTML styles */ h2 + *, h3 + * { - --flow-space: #{get-size(500)}; + // --flow-space: #{get-size(500)}; } h2, @@ -17,6 +19,14 @@ /*display: flex;*/ } + h2 { + margin-top: 8rem; + } + + p { + font-size: 1.125rem; + } + a:not([class]) { @include apply-utility('leading', 'tight'); color: var(--color-dark); @@ -82,17 +92,17 @@ pre > code, .video-player, video { - width: 100vw; + width: 100%; max-width: map-get($metrics, 'wrap-max-width'); - margin-left: 50%; /*changing this value to 47% removes the horizontal scrollbar once the viewport is < 930px */ - transform: translateX (-50%); /* changing this value to 49% allows for the suggestion above to also eliminate the horizontal scroll. */ + // margin-left: 50%; /*changing this value to 47% removes the horizontal scrollbar once the viewport is < 930px */ + // transform: translateX (-50%); /* changing this value to 49% allows for the suggestion above to also eliminate the horizontal scroll. */ position: relative; } figure img, pre > code, .video-player { - box-shadow: 0 10px 30px rgba(0, 0, 0, .15); + // box-shadow: 0 10px 30px rgba(0, 0, 0, .15); } figure img { @@ -114,6 +124,194 @@ padding: get-size(700); font-size: get-size(500); } + + // page specific + .split-content { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto; + grid-column-gap: 1.5rem; + grid-row-gap: 0; + margin-top: 4rem; + + .video-player > iframe { + height: 89%; + } + } + + details { + border-bottom: 1px solid var(--color-mid); + + &:first-of-type { + border-top: 1px solid var(--color-mid); + margin-top: 4rem; + } + + &[open] { + summary::after { + transform: rotateZ(180deg); + } + } + + > summary:first-of-type { + position: relative; + padding: 1rem 0; + list-style-type: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + &::after { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.364 1.636L8 8 1.636 1.636' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + width: 1rem; + height: .625rem; + position: absolute; + right: 0; + top: calc(50% - .3125rem); + } + } + + h3 { + display: inline-block; + font-weight: 600; + + .heading-permalink { + display: none; + } + } + } + + table { + margin-bottom: 1rem; + + &, + thead, + tbody { + display: block; + } + + th, + td { + padding: 0; + } + + tr { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: auto; + grid-column-gap: 1.5rem; + grid-row-gap: 0; + text-align: left; + } + + thead th { + font-weight: 600; + + &:last-child { + background-color: var(--color-primary); + } + } + + tbody tr { + padding: 1.5rem 0; + + &:nth-child(odd) { + background-color: var(--color-light-gray); + } + } + + ~ p { + font-size: .875rem; + + &:last-child { + margin-bottom: 1.5rem; + } + } + } + + .process-cae { + max-width: 34.875rem; + margin: 8rem auto 0; + + &.split { + max-width: 100%; + margin: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 1.5rem; + grid-row-gap: 0; + + .process-cae__block:last-child { + align-items: flex-end; + } + } + + &__block { + display: flex; + flex-direction: column; + margin: 3rem 0; + + &:last-child { + margin-bottom: 0; + } + + p { + margin-top: 2rem; + } + + .highlight { + background-color: var(--color-primary); + width: 100%; + margin: 3rem 0; + padding: 1.5rem; + border-radius: 1.5rem; + display: flex; + flex-direction: column; + + &.secondary { + background-color: var(--color-secondary); + color: var(--color-white); + + .heading-permalink svg { + fill: var(--color-white); + } + + a:not(.heading-permalink) { + background-color: var(--color-primary); + color: var(--color-dark); + } + } + + h3 { + text-align: left; + font-weight: 600; + margin-bottom: 1rem; + } + + a:not(.heading-permalink) { + background-color: var(--color-secondary); + color: var(--color-white); + } + + ul + p { + align-self: flex-end; + font-size: 1rem; + margin-top: 1rem; + } + } + + img { + // width: 18rem; + align-self: center; + margin: 0 auto; + } + } + } } &__footer { diff --git a/src/transforms/parse-transform.js b/src/transforms/parse-transform.js index 78a2c04..09cc22d 100644 --- a/src/transforms/parse-transform.js +++ b/src/transforms/parse-transform.js @@ -11,7 +11,7 @@ module.exports = function(value, outputPath) { }); const document = DOM.window.document; - const articleImages = [...document.querySelectorAll('main article img, .intro img')]; + const articleImages = [...document.querySelectorAll('main section:not(.process-cae) article img, .intro img')]; const articleHeadings = [ ...document.querySelectorAll('main article h2, main article h3') ];