Skip to content

Commit

Permalink
💄(footer) update footer's logo
Browse files Browse the repository at this point in the history
In response to feedback from the communication team, the Footer's logo
has been updated to the official version.

The Footer component and its styling have been adjusted according to Johann's
Figma design. While I aimed to adhere to the design guidelines, there may
be slight variations in sizes.

Ensuring a seamless responsive experience on very small devices was tricky.
To address potential overflow caused by the logo on screens narrower than 302px,
I opted to hide the overflow. This solution, while effective, is temporary and
can be improved later on.

I wanted to ship asap a Footer with the updated logo, sorry for the quick
and dirty approach.
  • Loading branch information
lebaudantoine authored and manuhabitela committed Mar 20, 2024
1 parent 481773a commit 1bf07a1
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 5 deletions.
16 changes: 11 additions & 5 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,23 @@ export const Footer = () => (
<div className="fr-container">
<div className="flex flex-wrap justify-between mb-6">
<Link
className="w-fit md:flex items-center gap-10 hover:bg-white-1 p-4 pl-0 transition ease-in-out delay-50 duration-300 min-w-[114px] ml-[-0.5rem] "
className="w-fit flex no-wrap items-center gap-2 xs:gap-6 hover:bg-white-1 p-4 pl-0 transition ease-in-out delay-50 duration-300 min-w-[114px] ml-[-0.5rem] overflow-hidden"
href="/"
aria-label="Retour à l'accueil"
>
<p className="logo text-[0.7875rem] font-bold leading-[1.0317460317em] tracking-[-.01em] pl-2 uppercase align-middle inline-block">
république
<p className="logo-footer text-base xs:text-xl font-bold leading-[1.0317460317em] tracking-[-.01em] pl-2 uppercase align-middle inline-block">
Gouvernement
</p>
<span className="logo-footer-separator" />
<p className="font-bold leading-5 text-sm xs:text-base">
Direction
<Br className="inline" />
interministérielle
<Br className="inline" />
française
du numérique
</p>
</Link>
<div className="basis-full md:basis-2/3 max-w-2xl">
<div className="basis-full md:basis-2/4 max-w-2xl">
<p className="text-sm leading-6 text-grey-5">
Ce site est géré par La Suite Numérique de la direction
interministérielle du numérique (DINUM) en charge de la
Expand Down
36 changes: 36 additions & 0 deletions src/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,29 @@
padding-top: 1.65625rem;
}

.logo-footer:before {
content: "";
display: block;
background-image: url("/assets/marianne.svg");
background-repeat: no-repeat;
background-size: contain;
height: 1.25rem;
margin-bottom: 0.2rem;
width: 3rem;
}

.logo-footer:after {
content: "";
display: block;
background-image: url("/assets/devise.svg");
background-repeat: no-repeat;
background-size: contain;

height: 2.313rem;
margin-top: 0.2rem;
width: 3.25rem;
}

.navbar-shadow {
position: relative;
z-index: 10;
Expand Down Expand Up @@ -59,6 +82,19 @@
width: 1px;
}

.logo-footer-separator:after {
box-shadow: inset 0 0 0 1px #000000;
content: "";
display: inline-block;
height: 5rem;
margin-right: 0.75rem;
margin-top: 0.625rem;
margin-bottom: 0.625rem;
position: relative;
vertical-align: middle;
width: 1px;
}

.internal-link-footer:first-child:before {
box-shadow: none;
margin-right: 0;
Expand Down

0 comments on commit 1bf07a1

Please sign in to comment.