diff --git a/public/assets/images/devise.svg b/public/assets/images/devise.svg new file mode 100644 index 0000000..77d9df4 --- /dev/null +++ b/public/assets/images/devise.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/assets/images/logo-eidas.png b/public/assets/images/logo-eidas.png new file mode 100644 index 0000000..f985fd4 Binary files /dev/null and b/public/assets/images/logo-eidas.png differ diff --git a/public/assets/images/marianne.svg b/public/assets/images/marianne.svg new file mode 100644 index 0000000..6f2760e --- /dev/null +++ b/public/assets/images/marianne.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/assets/styles/commun.css b/public/assets/styles/commun.css index 57368ab..1756367 100644 --- a/public/assets/styles/commun.css +++ b/public/assets/styles/commun.css @@ -1,3 +1,99 @@ +html { + height: 100%; +} + body { + display: flex; + flex-direction: column; + + height: 100%; + margin: 0; font-family: 'Marianne'; } + +header, main, footer { + padding: 2em; +} + +header, footer .logos { + display: flex; + align-items: center; + column-gap: 1.2em; +} + +header { + box-shadow: 0px 3px 10px #bbb; +} + +main { + flex-grow: 1; + margin: 3em 0 5em; +} + +footer { + display: flex; + align-items: center; + justify-content: space-between; + + border-top: 2px solid #02b +} + +footer ul { + display: flex; + column-gap: 3em; + font-size: 0.6em; +} + +footer li { + list-style-type: none; +} + +footer a { + text-decoration: none; + font-weight: bold; + color: black; +} + +.bloc-eidas a { + display: flex; + align-items: center; + column-gap: .2em; + + text-decoration: none; +} + +.devise, .logo-eidas, .marianne { + background-repeat: no-repeat; + background-size: contain; +} + +.marianne { + height: .75em; + + background-image: url(/statique/assets/images/marianne.svg); +} + +.republique-francaise { + padding: .1em 0; + font-size: .7em; + font-weight: bold; + line-height: 1em; +} + +.devise { + height: 1.25em; + + background-image: url(/statique/assets/images/devise.svg); +} + +.logo-eidas { + width: 2.5em; + height: 2.5em; + background-image: url(/statique/assets/images/logo-eidas.png); +} + +.titre-eidas { + color: #779; + font-size: .7em; + font-weight: bold; +} diff --git a/src/vues/base.pug b/src/vues/base.pug index 4b90d6a..3eaecb6 100644 --- a/src/vues/base.pug +++ b/src/vues/base.pug @@ -1,4 +1,5 @@ doctype html + html(lang = 'fr', xml:lang = 'fr', xmlns = 'http://www.w3.org/1999/xhtml') head meta(charset='UTF-8') @@ -8,4 +9,32 @@ html(lang = 'fr', xml:lang = 'fr', xmlns = 'http://www.w3.org/1999/xhtml') link(rel='stylesheet', href='/statique/assets/styles/fontes.css') block styles - block page + body + header + .bloc-marque + .marianne + .republique-francaise RÉPUBLIQUE
FRANÇAISE + .devise + .bloc-eidas + a(href='https://eidas.ec.europa.eu/', target='_blank') + .logo-eidas + .titre-eidas European
digital ID + + main + block page + + footer + .logos + .bloc-marque + .marianne + .republique-francaise RÉPUBLIQUE
FRANÇAISE + .devise + .bloc-eidas + a(href='https://eidas.ec.europa.eu/', target='_blank') + .logo-eidas + .titre-eidas European
digital ID + ul + li: a(href='https://agentconnect.gouv.fr', target='_blank') agentconnect.gouv.fr + li: a(href='https://gouvernement.fr', target='_blank') gouvernement.fr + li: a(href='https://service-public.fr', target='_blank') service-public.fr + li: a(href='https://data.gouv.fr', target='_blank') data.gouv.fr