Improve accessibility of the services list.
This commit is contained in:
parent
a674fe4d89
commit
c44995b32d
128
css/main.css
128
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%;
|
||||
}
|
||||
}
|
||||
|
||||
176
index.html
176
index.html
@ -65,41 +65,72 @@
|
||||
<h1>Services</h1>
|
||||
<h2>En accès libre</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://steroids.delire.party/">
|
||||
<img src="img/wekan.png" alt="Logo de Wekan" />
|
||||
<span class="name">Wekan</span>
|
||||
Wekan
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Pour mettre votre productivité
|
||||
sous stéroïdes, un tableau Kanban.
|
||||
</span>
|
||||
<span>steroids.delire.party</span>
|
||||
<span class="subtitle">Pour mettre votre productivité
|
||||
sous stéroïdes, un tableau Kanban.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/wekan.png" alt="Logo de Wekan" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://plaisir.delire.party/">
|
||||
<img src="img/wallabag.png" alt="Logo de Wallabag" />
|
||||
<span class="name">Wallabag</span>
|
||||
Wallabag
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Parce que c'est toujours un
|
||||
plaisir de lire... plus tard.
|
||||
</span>
|
||||
<span>plaisir.delire.party</span>
|
||||
<span class="subtitle">Parce que c'est toujours un
|
||||
plaisir de lire... plus tard.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/wallabag.png" alt="Logo de Wallabag" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://urss.delire.party/">
|
||||
<img src="img/freshrss.png" alt="Logo de FreshRSS" />
|
||||
<span class="name">FreshRSS</span>
|
||||
FreshRSS
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Pour lire vos fl'URSS, euh, vos flux RSS.
|
||||
</span>
|
||||
<span>urss.delire.party</span>
|
||||
<span class="subtitle">Pour lire vos fl'URSS, euh, vos
|
||||
flux RSS.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/freshrss.png" alt="Logo de FreshRSS" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://colle.delire.party/">
|
||||
<img src="img/privatebin.png" alt="Logo de PrivateBin" />
|
||||
<span class="name">PrivateBin</span>
|
||||
<span>colle.delire.party</span>
|
||||
<span class="subtitle">Partager des textes courts et
|
||||
sniffer de la colle, toujours aussi délire.</span>
|
||||
PrivateBin
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Partager des textes courts et
|
||||
sniffer de la colle, toujours aussi délire.
|
||||
</span>
|
||||
<span>colle.delire.party</span>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/privatebin.png" alt="Logo de PrivateBin" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@ -107,50 +138,87 @@
|
||||
<section class="services">
|
||||
<h2>Restreints (nous demander pour l'inscription)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://meilleurtube.delire.party/">
|
||||
<img src="img/peertube.svg" alt="Logo de PeerTube" />
|
||||
<span class="name">PeerTube</span>
|
||||
PeerTube
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Le meilleur du Peer (to peer), pour
|
||||
partager des vidéos complètement délires.
|
||||
</span>
|
||||
<span>meilleurtube.delire.party</span>
|
||||
<span class="subtitle">Le meilleur du Peer (to peer), pour
|
||||
partager des vidéos complètement délires.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/peertube.svg" alt="Logo de PeerTube" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://tutut.delire.party/">
|
||||
<img src="img/mastodon.png" alt="Logo de Mastodon" />
|
||||
<span class="name">Mastodon</span>
|
||||
Mastodon
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Une instance du média social de micro-blogging,
|
||||
pour faire toot-toot, les rageux.
|
||||
</span>
|
||||
<span>tutut.delire.party</span>
|
||||
<span class="subtitle">Une instance du média social de
|
||||
micro-blogging, pour faire toot-toot, les
|
||||
rageux.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/mastodon.png" alt="Logo de Mastodon" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://nuage.delire.party/">
|
||||
<img src="img/nextcloud.png" alt="Logo de NextCloud" />
|
||||
<span class="name">NextCloud</span>
|
||||
<span>nuage.delire.party</span>
|
||||
NextCloud
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">J'ai la tête dans le cloud.</span>
|
||||
</a>
|
||||
<span>nuage.delire.party</span>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/nextcloud.png" alt="Logo de NextCloud" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://osef.delire.party/">
|
||||
<img src="img/mattermost.png" alt="Logo de Mattermost" />
|
||||
<span class="name">Mattermost</span>
|
||||
Mattermost
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
What matters most? Pouvoir
|
||||
discuter ensemble et dire osef.
|
||||
</span>
|
||||
<span>osef.delire.party</span>
|
||||
<span class="subtitle">What matters most? Pouvoir
|
||||
discuter ensemble et dire osef.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/mattermost.png" alt="Logo de Mattermost" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="card">
|
||||
<div class="text">
|
||||
<h3 class="name">
|
||||
<a href="https://vip.delire.party/">
|
||||
<img src="img/thelounge.png" alt="Logo de The Lounge" />
|
||||
<span class="name">The Lounge</span>
|
||||
<span>vip.delire.party</span>
|
||||
<span class="subtitle">Un bouncer IRC très sélect, pour
|
||||
les nostalgiques des années 70.</span>
|
||||
The Lounge
|
||||
</a>
|
||||
</h3>
|
||||
<span class="subtitle">
|
||||
Un bouncer IRC très sélect, pour
|
||||
les nostalgiques des années 70.
|
||||
</span>
|
||||
<span>vip.delire.party</span>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="img/thelounge.png" alt="Logo de The Lounge" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user