Browse Source

Descriptions courtes pour chacun des services;

merge-requests/5/head
Benjamin Bouvier 2 years ago
parent
commit
839cb9dbea
2 changed files with 38 additions and 18 deletions
  1. +13
    -8
      css/main.css
  2. +25
    -10
      index.html

+ 13
- 8
css/main.css View File

@ -50,20 +50,25 @@ footer a {
color: #f5f5f5;
}
.services h1 {
font-size: 2em;
}
.services h2 {
border-bottom: 2px solid black;
margin-bottom: .5em;
}
.services ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
.services ul li {
display: flex;
flex-direction: column;
background-color: #5c6bc0;
position: relative;
height: 230px;
list-style: none;
margin-bottom: .5em;
text-align: center;
@ -90,27 +95,27 @@ footer a {
.services ul li a {
display: block;
height: 100%;
margin: 0 0.5em 0.5em 0.5em;
text-decoration: none;
}
.services ul li img {
margin: 1em;
margin: 1em 1em 0 1em;
max-width: 150px;
}
.services ul li span {
color: white;
display: block;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
}
.services ul li .name {
bottom: 30px;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
}
.services ul li .url {
bottom: 5px;
.services ul li .subtitle {
font-size: 0.8em;
font-style: oblique;
}
@media (max-width: 700px) {

+ 25
- 10
index.html View File

@ -43,37 +43,44 @@
</p>
</section>
<h1>Services</h1>
<section class="services">
<h1>Services</h1>
<h2>Proposés en accès libre</h2>
<ul>
<li>
<a href="https://steroids.delire.party/">
<img src="img/wekan.png" alt="Logo de Wekan" />
<span class="name">Wekan</span>
<span class="url">steroids.delire.party</span>
<span>steroids.delire.party</span>
<span class="subtitle">Pour mettre votre productivité
sous stéroïdes, un tableau Kanban.</span>
</a>
</li>
<li>
<a href="https://plaisir.delire.party/">
<img src="img/wallabag.png" alt="Logo de Wallabag" />
<span class="name">Wallabag</span>
<span class="url">plaisir.delire.party</span>
<span>plaisir.delire.party</span>
<span class="subtitle">Parce que c'est toujours un
plaisir de lire... plus tard.</span>
</a>
</li>
<li>
<a href="https://urss.delire.party/">
<img src="img/freshrss.png" alt="Logo de FreshRSS" />
<span class="name">FreshRSS</span>
<span class="url">urss.delire.party</span>
<span>urss.delire.party</span>
<span class="subtitle">Pour lire vos fl'URSS, euh, vos
flux RSS.</span>
</a>
</li>
<li>
<a href="https://colle.delire.party/">
<img src="img/privatebin.png" alt="Logo de PrivateBin" />
<span class="name">PrivateBin</span>
<span class="url">colle.delire.party</span>
<span>colle.delire.party</span>
<span class="subtitle">Partager des textes courts et
sniffer de la colle, toujours aussi délire.</span>
</a>
</li>
</ul>
@ -86,28 +93,36 @@
<a href="https://tutut.delire.party/">
<img src="img/mastodon.png" alt="Logo de Mastodon" />
<span class="name">Mastodon</span>
<span class="url">tutut.delire.party</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>
</li>
<li>
<a href="https://nuage.delire.party/">
<img src="img/nextcloud.png" alt="Logo de NextCloud" />
<span class="name">NextCloud</span>
<span class="url">nuage.delire.party</span>
<span>nuage.delire.party</span>
<span class="subtitle">J'ai la tête dans le cloud.</span>
</a>
</li>
<li>
<a href="https://osef.delire.party/">
<img src="img/mattermost.png" alt="Logo de Mattermost" />
<span class="name">Mattermost</span>
<span class="url">osef.delire.party</span>
<span>osef.delire.party</span>
<span class="subtitle">What does matter most? Pouvoir
discuter ensemble et dire osef.</span>
</a>
</li>
<li>
<a href="https://vip.delire.party/">
<img src="img/thelounge.png" alt="Logo de The Lounge" />
<span class="name">The Lounge</span>
<span class="url">vip.delire.party</span>
<span>vip.delire.party</span>
<span class="subtitle">Un bouncer IRC très select, pour
les nostalgiques des années 70.</span>
</a>
</li>
</ul>

Loading…
Cancel
Save