DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

adapte la page d'accueil au design system de l'état

Browse source
This commit is contained in:
kara Diaby 2021-08-25 17:32:41 +02:00
parent daf0f412c9
commit 99cfd4f42c
10 changed files with 43 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/footer/logo-dinum.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

2
app/assets/images/landing/hero/dematerialiser.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

2
app/assets/images/landing/roles/usagers.svg
View file

@ -1 +1 @@
<svg height="96" viewBox="0 0 94 96" width="94" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m17.334 12.334h39" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m26.09 7.316a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001" fill="#0069cc"/><path d="m82.334 39.334h-55m55 9h-53m53 8h-47.339m47.339 9h-42.982m14.982-35h-27m31 44h-19.313m-1.687 20h52.773c1.506 0 2.227-2.268 2.227-3.773v-59.227m-31-29h-40.773c-1.506 0-3.227.174-3.227 1.68v43.32" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056a14.908 14.908 0 0 1 -2.019-7.503c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15s-6.715 15-15 15c-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01z" fill="#d9e9fd"/><path d="m62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056a14.908 14.908 0 0 1 -2.019-7.503c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15s-6.715 15-15 15c-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01z" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m71.667 16.167a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0m7.086 0a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0m7.086 0a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0" fill="#0069cc"/><path d="m1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143" fill="#d9e9fd"/><path d="m1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143z" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082" fill="#d9e9fd"/><path d="m17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082z" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
<svg height="96" viewBox="0 0 94 96" width="94" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m17.334 12.334h39" stroke="#000091" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m26.09 7.316a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1 -4.002-.001 2 2 0 0 1 4.002.001" fill="#7F7FC8"/><path d="m82.334 39.334h-55m55 9h-53m53 8h-47.339m47.339 9h-42.982m14.982-35h-27m31 44h-19.313m-1.687 20h52.773c1.506 0 2.227-2.268 2.227-3.773v-59.227m-31-29h-40.773c-1.506 0-3.227.174-3.227 1.68v43.32" stroke="#000091" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056a14.908 14.908 0 0 1 -2.019-7.503c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15s-6.715 15-15 15c-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01z" fill="#d9e9fd"/><path d="m62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056a14.908 14.908 0 0 1 -2.019-7.503c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15s-6.715 15-15 15c-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01z" stroke="#000091" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m71.667 16.167a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0m7.086 0a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0m7.086 0a1.501 1.501 0 1 1 -3.002 0 1.501 1.501 0 0 1 3.002 0" fill="#7F7FC8"/><path d="m1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143" fill="#d9e9fd"/><path d="m1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143z" stroke="#000091" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="m17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082" fill="#d9e9fd"/><path d="m17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082z" stroke="#000091" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

5
app/assets/stylesheets/_colors.scss
View file

@ -21,3 +21,8 @@ $orange: #F28900;
$orange-bg: lighten($orange, 35%);
$yellow: #FEF3B8;
$light-yellow: #FFFFDE;
$blue-france-700: #00006D;
$blue-france-500: #000091;
$blue-france-400: #7F7FC8;
$g700: #383838;

12
app/assets/stylesheets/buttons.scss
View file

@ -30,22 +30,22 @@
&.primary {
color: #FFFFFF;
border-color: $blue;
background-color: $blue;
border-color: $blue-france-700;
background-color: $blue-france-700;
&:hover:not(:disabled) {
background: $light-blue;
background: $blue-france-500;
}
}
&.secondary {
color: $blue;
border-color: $blue;
color: $blue-france-700;
border-color: $blue-france-700;
background-color: #FFFFFF;
&:hover:not(:disabled) {
color: #FFFFFF;
background: $light-blue;
background: $blue-france-700;
}
}

39
app/assets/stylesheets/landing.scss
View file

@ -37,7 +37,7 @@ $landing-breakpoint: 1040px;
}
.hero-tagline-em {
color: $blue;
color: $blue-france-500;
font-size: 40px;
font-style: normal;
font-weight: bold;
@ -62,6 +62,7 @@ $landing-breakpoint: 1040px;
text-align: center;
margin-bottom: 40px;
margin-top: 0;
color: $g700;
}
.features-panel {
@ -185,7 +186,7 @@ $landing-breakpoint: 1040px;
}
.number-value {
color: $blue;
color: $blue-france-500;
font-weight: bold;
font-size: 36px;
}
@ -193,6 +194,7 @@ $landing-breakpoint: 1040px;
.number-label {
font-weight: bold;
font-size: 20px;
color: $g700;
}
$users-breakpoint: 950px;
@ -248,7 +250,7 @@ $users-breakpoint: 950px;
}
.cta-panel {
background-color: $blue;
background-color: $blue-france-500;
color: #FFFFFF;
}
@ -293,11 +295,21 @@ $users-breakpoint: 950px;
font-size: 24px;
font-weight: bold;
margin-top: 13px;
color: #FFFFFF;
&.grey {
color: $g700;
}
}
.cta-panel-explanation {
font-size: 24px;
margin-bottom: 10px;
color: #FFFFFF;
&.grey {
color: $g700;
}
}
.role-panel-title {
@ -305,6 +317,7 @@ $users-breakpoint: 950px;
font-weight: bold;
line-height: 36px;
margin-bottom: 15px;
color: $g700;
}
.role-panel-explanation {
@ -374,12 +387,12 @@ $cta-panel-button-border-size: 2px;
.cta-panel-button-blue {
@include cta-panel-button;
border: $cta-panel-button-border-size solid $light-blue;
color: $light-blue;
border: $cta-panel-button-border-size solid $blue-france-700;
color: $blue-france-700;
&:hover {
color: #FFFFFF;
background-color: $light-blue;
background-color: $blue-france-500;
text-decoration: none;
&:focus {
@ -388,7 +401,7 @@ $cta-panel-button-border-size: 2px;
}
&:focus {
color: $light-blue;
color: $blue-france-500;
text-decoration: none;
}
}
@ -406,13 +419,13 @@ $cta-panel-button-border-size: 2px;
.role-panel-button-primary {
@include role-button;
background-color: $blue;
background-color: $blue-france-700;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $light-blue;
background-color: $blue-france-500;
}
&:focus {
@ -423,9 +436,9 @@ $cta-panel-button-border-size: 2px;
.role-panel-button-secondary {
@include role-button;
border: $cta-panel-button-border-size solid $blue;
border: $cta-panel-button-border-size solid $blue-france-700;
line-height: 50px - 2 * $cta-panel-button-border-size;
color: $blue;
color: $blue-france-700;
margin-left: 10px;
@media (max-width: $users-breakpoint) {
@ -433,8 +446,8 @@ $cta-panel-button-border-size: 2px;
}
&:hover {
color: $light-blue;
border: $cta-panel-button-border-size solid $light-blue;
color: $blue-france-500;
border: $cta-panel-button-border-size solid $blue-france-500;
text-decoration: none;
}

2
app/assets/stylesheets/new_footer.scss
View file

@ -97,7 +97,7 @@ footer {
&:hover,
&:focus {
color: $blue;
color: $blue-france-700;
text-decoration: none;
}
}

1
app/assets/stylesheets/new_header.scss
View file

@ -27,6 +27,7 @@ $header-mobile-breakpoint: 550px;
display: flex;
flex-wrap: wrap;
align-items: center;
color: $blue-france-500;
img {
margin-right: 10px;

3
app/views/root/_footer.html.haml
View file

@ -8,14 +8,11 @@
Un service fourni par la
= link_to "DINUM", "https://numerique.gouv.fr/", title: "Direction Interministérielle au Numérique"
%br
et incubé par
= link_to "beta.gouv.fr", "https://beta.gouv.fr", title: "le site de Beta.gouv.fr"
%li
= link_to "https://numerique.gouv.fr/", title: "DINUM", 'aria-label': 'DINUM' do
%span.footer-logo.footer-logo-dinum{ role: 'img', 'aria-label': 'Logo DINUM' }
= link_to "https://beta.gouv.fr", title: "le site de Beta.gouv.fr", 'aria-label': 'beta.gouv.fr' do
%span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': 'Logo beta.gouv.fr' }
%span.footer-logo.footer-logo-france{ role: 'img', 'aria-label': 'République Française' }
%li.footer-column
%ul.footer-links

4
app/views/root/landing.html.haml
View file

@ -87,8 +87,8 @@
.container
.cta-panel-wrapper
%div
%h2.cta-panel-title Administration : vous voulez dématerialiser ?
%p.cta-panel-explanation Proposez à vos usagers de remplir leurs dossiers en ligne
%h2.cta-panel-title.grey Administration : vous voulez dématerialiser ?
%p.cta-panel-explanation.grey Proposez à vos usagers de remplir leurs dossiers en ligne
%div
= link_to "Découvrez notre outil",
administration_path,