Merge branch 'split-services' into 'master'

Many things

Closes #3

See merge request adngdb/delire.party!5
This commit is contained in:
Adrian 2018-06-07 08:26:43 +02:00
commit cb6dd1b53d
3 changed files with 242 additions and 67 deletions

View File

@ -30,7 +30,7 @@ header h1 {
text-align: center; text-align: center;
} }
section .summary { section .description {
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -50,76 +50,88 @@ footer a {
color: #f5f5f5; color: #f5f5f5;
} }
#services h2 { h1 {
font-size: 2em;
}
.services h2 {
border-bottom: 2px solid black; border-bottom: 2px solid black;
margin-bottom: .5em; margin-bottom: .5em;
} }
#services ul {
.services ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0;
} }
#services ul li {
.services ul li {
display: flex;
flex-direction: column;
background-color: #5c6bc0; background-color: #5c6bc0;
position: relative;
height: 230px;
list-style: none; list-style: none;
margin-bottom: .5em; margin-bottom: .5em;
text-align: center; text-align: center;
width: 33%; width: 33%;
} }
#services ul li:hover { .services ul li:hover {
box-shadow: 1px 1px 4px black; box-shadow: 1px 1px 4px black;
} }
#services ul li:nth-child(6n+2) { .services ul li:nth-child(6n+2) {
background-color: #e84e40; background-color: #e84e40;
} }
#services ul li:nth-child(6n+3) { .services ul li:nth-child(6n+3) {
background-color: #ec407a; background-color: #ec407a;
} }
#services ul li:nth-child(6n+4) { .services ul li:nth-child(6n+4) {
background-color: #ab47bc; background-color: #ab47bc;
} }
#services ul li:nth-child(6n+5) { .services ul li:nth-child(6n+5) {
background-color: #7e57c2; background-color: #7e57c2;
} }
#services ul li:nth-child(6n+6) { .services ul li:nth-child(6n+6) {
background-color: #738ffe; background-color: #738ffe;
} }
#services ul li a { .services ul li a {
display: block; display: block;
height: 100%; height: 100%;
margin: 0 0.5em 0.5em 0.5em;
text-decoration: none;
} }
#services ul li img { .services ul li img {
margin: 1em; margin: 1em 1em 0 1em;
max-width: 150px; max-width: 150px;
width: 150px;
max-height: 150px;
} }
#services ul li span { .services ul li span {
color: white; color: white;
display: block; display: block;
position: absolute;
text-align: center; text-align: center;
text-decoration: none;
width: 100%; width: 100%;
} }
#services ul li .name { .services ul li .name {
bottom: 30px;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
#services ul li .url { .services ul li .subtitle {
bottom: 5px; border-top: 1px solid gray;
width: 80%;
margin: auto;
margin-top: 3px;
padding-top: 3px;
font-size: 0.8em;
font-style: oblique;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#services ul li { .services ul li {
width: 49%; width: 49%;
} }
} }
@media (max-width: 399px) { @media (max-width: 399px) {
#services ul li { .services ul li {
width: 100%; width: 100%;
} }
} }

118
img/peertube.svg Normal file
View File

@ -0,0 +1,118 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="2799 -911 16 22"
version="1.1"
id="svg13"
sodipodi:docname="logo.svg"
width="16"
height="22"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1916"
inkscape:window-height="1040"
id="namedview15"
showgrid="false"
inkscape:zoom="29.790476"
inkscape:cx="-1.1827326"
inkscape:cy="12.088"
inkscape:window-x="0"
inkscape:window-y="18"
inkscape:window-maximized="0"
inkscape:current-layer="svg13" />
<defs
id="defs4">
<style
id="style2">
.cls-3 {
fill: #211f20;
}
.cls-4 {
fill: #737373;
}
.cls-5 {
fill: #f1680d;
}
.cls-6 {
fill: rgba(255, 255, 255, 0);
}
</style>
</defs>
<g
id="Artboard_1"
data-name="Artboard 1"
class="cls-1"
transform="translate(0.03356777,-1.9929667)">
<g
id="Symbol_3_1"
data-name="Symbol 3 1"
transform="translate(2759,-975)">
<g
id="Group_44"
data-name="Group 44"
transform="translate(0,2.333)">
<path
id="Path_4"
data-name="Path 4"
class="cls-3"
d="m -949,-500 v 10.667 l 8,-5.333"
transform="translate(989,564)"
inkscape:connector-curvature="0"
style="fill:#211f20" />
<path
id="Path_5"
data-name="Path 5"
class="cls-4"
d="m -949,-500 v 10.667 l 8,-5.333"
transform="translate(989,574.667)"
inkscape:connector-curvature="0"
style="fill:#737373" />
<path
id="Path_6"
data-name="Path 6"
class="cls-5"
d="m -949,-500 v 10.667 l 8,-5.333"
transform="translate(997,569.333)"
inkscape:connector-curvature="0"
style="fill:#f1680d" />
<path
id="Path_7"
data-name="Path 7"
class="cls-6"
d="M 0,0 V 10.667 L 8,5.333 Z"
transform="rotate(180,24,40)"
inkscape:connector-curvature="0"
style="fill:rgba(255,255,255,0)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -15,91 +15,136 @@
<h1>Le Délire !</h1> <h1>Le Délire !</h1>
</header> </header>
<section id="summary"> <section class="description">
<h1>Kewa ?</h1>
<p> <p>
<strong>Bienvenue chez Le Délire</strong> ! <strong>Bienvenue sur Le Délire</strong> !
Nous sommes un collectif hébergeant un ensemble de services libres, Nous sommes un collectif hébergeant un ensemble de services
et proposons l'utilisation à prix libre de ces services à des libres, et proposons l'utilisation à prix libre de ces services
personnes de notre entourage, en qui nous faisons confiance à tout.e.s. Nous faisons confiance à ces personnes pour
pour qu'elles en fassent un usage responsable. En échange de qu'elles en fassent un usage responsable ; en échange de cela,
cela, nous leur demandons de nous faire confiance dans la nous leur demandons de nous faire confiance dans la maintenance
maintenance de ces services et de notre respect de leurs de ces services et de notre respect de leurs données privées.
données privées. </p>
</section>
<section class="description">
<h1>Comment y avoir accès ?</h1>
<p>
Certains services sont en accès libre ; d'autres demandent
notre intervention pour vous y créer un compte. Vous pouvez
voir la liste des différents services ci-dessous. Si vous
souhaitez <strong>bénéficier des services restreints</strong>
que nous hébergeons, vous pouvez nous contacter via Mastodon
(<a href="https://tutut.delire.party/@adngdb">@adngdb</a> et <a
href="https://tutut.delire.party/@bnjbvr">@bnjbvr</a>) ou sur
notre <a
href="https://osef.delire.party/signup_user_complete/?id=zr5n6uedapfh5e8ghpmw3fgjfy">canal
Mattermost</a>. Dans tous les cas, contactez-nous : ceci est
avant tout une aventure humaine !
</p> </p>
<p> <p>
Si vous souhaitez <strong>bénéficier des services</strong> que nous Mettre en place ces services et en prendre soin prend du temps
hébergeons, vous pouvez nous contacter via Mastodon dans la durée, comme en témoigne notre <a href="https://tutut.delire.party/@admin">activité
(<a href="https://tutut.delire.party/@adngdb">@adngdb</a> et d'administration</a> (mises à jour des différents services, mise en place de sauvegardes
<a href="https://tutut.delire.party/@bnjbvr">@bnjbvr</a>) ou sur notre automatiques). Si vous appréciez l'utilisation de ces services, ou voulez simplement aider dans la <a
<a href="https://osef.delire.party/delire/channels/town-square">canal Mattermost</a>. href="https://degooglisons-internet.org/">dégooglisation
Certains services sont en accès libre, d'autres demandent notre d'Internet</a>,
intervention pour vous y créer un compte. Dans tous les cas, vous pouvez <strong>soutenir financièrement</strong> l'équipe
contactez-nous : ceci est avant tout une aventure humaine ! d'administration du Délire : nous acceptons les dons
</p>
<p>
Et bien entendu, si vous voulez <strong>soutenir financièrement</strong>
la mise en place et l'entretien des services du Délire, nous acceptons les dons
réguliers <a href="https://liberapay.com/Le_Delire/">via la plateforme Liberapay</a> ! réguliers <a href="https://liberapay.com/Le_Delire/">via la plateforme Liberapay</a> !
</p> </p>
</section> </section>
<section id="services"> <section class="services">
<h2>Services proposés</h2> <h1>Services</h1>
<h2>En accès libre</h2>
<ul> <ul>
<li>
<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>
</a>
</li>
<li> <li>
<a href="https://steroids.delire.party/"> <a href="https://steroids.delire.party/">
<img src="img/wekan.png" alt="Logo de Wekan" /> <img src="img/wekan.png" alt="Logo de Wekan" />
<span class="name">Wekan</span> <span class="name">Wekan</span>
<span class="url">steroids.delire.party</span> <span>steroids.delire.party</span>
</a> <span class="subtitle">Pour mettre votre productivité
</li> sous stéroïdes, un tableau Kanban.</span>
<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>
</a> </a>
</li> </li>
<li> <li>
<a href="https://plaisir.delire.party/"> <a href="https://plaisir.delire.party/">
<img src="img/wallabag.png" alt="Logo de Wallabag" /> <img src="img/wallabag.png" alt="Logo de Wallabag" />
<span class="name">Wallabag</span> <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> </a>
</li> </li>
<li> <li>
<a href="https://urss.delire.party/"> <a href="https://urss.delire.party/">
<img src="img/freshrss.png" alt="Logo de FreshRSS" /> <img src="img/freshrss.png" alt="Logo de FreshRSS" />
<span class="name">FreshRSS</span> <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> </a>
</li> </li>
<li> <li>
<a href="https://colle.delire.party/"> <a href="https://colle.delire.party/">
<img src="img/privatebin.png" alt="Logo de PrivateBin" /> <img src="img/privatebin.png" alt="Logo de PrivateBin" />
<span class="name">PrivateBin</span> <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>
</section>
<section class="services">
<h2>Restreints (nous demander pour l'inscription)</h2>
<ul>
<li>
<a href="https://meilleurtube.delire.party/">
<img src="img/peertube.svg" alt="Logo de PeerTube" />
<span class="name">PeerTube</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>
</li>
<li>
<a href="https://tutut.delire.party/">
<img src="img/mastodon.png" alt="Logo de Mastodon" />
<span class="name">Mastodon</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>nuage.delire.party</span>
<span class="subtitle">J'ai la tête dans le cloud.</span>
</a> </a>
</li> </li>
<li> <li>
<a href="https://osef.delire.party/"> <a href="https://osef.delire.party/">
<img src="img/mattermost.png" alt="Logo de Mattermost" /> <img src="img/mattermost.png" alt="Logo de Mattermost" />
<span class="name">Mattermost</span> <span class="name">Mattermost</span>
<span class="url">osef.delire.party</span> <span>osef.delire.party</span>
<span class="subtitle">What matters most? Pouvoir
discuter ensemble et dire osef.</span>
</a> </a>
</li> </li>
<li> <li>
<a href="https://vip.delire.party/"> <a href="https://vip.delire.party/">
<img src="img/thelounge.png" alt="Logo de The Lounge" /> <img src="img/thelounge.png" alt="Logo de The Lounge" />
<span class="name">The Lounge</span> <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 sélect, pour
les nostalgiques des années 70.</span>
</a> </a>
</li> </li>
</ul> </ul>