From c44995b32d5bfdafb7e1ef6d09f60c41806d4bab Mon Sep 17 00:00:00 2001 From: Adrian Gaudebert Date: Tue, 12 Jun 2018 16:08:38 +0200 Subject: [PATCH] Improve accessibility of the services list. --- css/main.css | 128 +++++++++++++++++++++------------ index.html | 194 ++++++++++++++++++++++++++++++++++----------------- 2 files changed, 215 insertions(+), 107 deletions(-) diff --git a/css/main.css b/css/main.css index ee9c1d0..2df05bd 100644 --- a/css/main.css +++ b/css/main.css @@ -17,33 +17,37 @@ body { margin: auto; line-height: 1.6; } + +/* Forces the footer to always be at the bottom, + whatever the size of the screen. */ body > section:last-of-type { flex: 1; } section { - padding: 1em 1em; + padding: 1rem 1rem; } header h1 { - font-size: 4.0em; - margin: 50px 0 20px 0; + font-size: 4.0rem; + margin: 3rem 0 2rem 0; text-align: center; } section .description { - margin-bottom: 2em; + margin-bottom: 2rem; } p { - margin: 20px 0; + margin: 1.2rem 0; } footer { background-color: black; color: white; - font-size: 0.9em; + font-size: 0.9rem; font-style: italic; - padding: 20px; + margin: 0 1rem; + padding: 1rem; text-align: center; } footer a { @@ -53,85 +57,121 @@ footer a { h1 { font-size: 2em; } -.services h2 { +.services > h2 { border-bottom: 2px solid black; - margin-bottom: .5em; + margin-bottom: 0.5rem; } -.services ul { +.services > ul { display: flex; flex-wrap: wrap; justify-content: space-between; + list-style: none; padding: 0; } -.services ul li { +.card, +.card .text { display: flex; flex-direction: column; +} + +.card { background-color: #5c6bc0; - list-style: none; - margin-bottom: .5em; + margin-bottom: 0.5rem; + position: relative; text-align: center; width: 33%; } -.services ul li:hover { - box-shadow: 1px 1px 4px black; -} -.services ul li:nth-child(6n+2) { +.card:nth-child(6n+2) { background-color: #e84e40; } -.services ul li:nth-child(6n+3) { +.card:nth-child(6n+3) { background-color: #ec407a; } -.services ul li:nth-child(6n+4) { +.card:nth-child(6n+4) { background-color: #ab47bc; } -.services ul li:nth-child(6n+5) { +.card:nth-child(6n+5) { background-color: #7e57c2; } -.services ul li:nth-child(6n+6) { +.card:nth-child(6n+6) { background-color: #738ffe; } -.services ul li a { - display: block; - height: 100%; - margin: 0 0.5em 0.5em 0.5em; + +.card a { + color: white; text-decoration: none; } -.services ul li img { - margin: 1em 1em 0 1em; +.card a::after { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.card:hover { + box-shadow: 1px 1px 4px black; +} +.card a:focus { + outline: none; + text-decoration: underline; +} +.card:focus-within { + box-shadow: 1px 1px 4px black; +} +.card:focus-within a:focus { + text-decoration: none; +} + +.card .text { + color: white; + flex-grow: 1; + order: 1; +} + +.card .text > * + * { + margin-top: 0.75rem; +} +.card .text :last-child { + margin-top: auto; + margin-bottom: 0.5rem; +} +.card .text :nth-last-child(2) { + margin-bottom: 0.75rem; +} + +.card .img img { + margin: 1rem 1rem 0 1rem; max-width: 150px; width: 150px; max-height: 150px; } -.services ul li span { - color: white; - display: block; - text-align: center; - width: 100%; -} -.services ul li .name { - font-size: 1.1em; +.card .name { + font-size: 1.1rem; font-weight: bold; text-transform: uppercase; } -.services ul li .subtitle { - border-top: 1px solid gray; - width: 80%; - margin: auto; - margin-top: 3px; - padding-top: 3px; - font-size: 0.8em; +.card .subtitle { + width: 90%; + margin-left: auto; + margin-right: auto; + font-size: 0.8rem; font-style: oblique; } @media (max-width: 700px) { - .services ul li { + body { + width: 90%; + } + .card { width: 49%; } } @media (max-width: 399px) { - .services ul li { + .card { width: 100%; } } diff --git a/index.html b/index.html index 374fa08..1657269 100644 --- a/index.html +++ b/index.html @@ -65,41 +65,72 @@

Services

En accès libre

@@ -107,50 +138,87 @@

Restreints (nous demander pour l'inscription)