Change styling for badges

Don't hide the content of them, allowing everyone to know what the badge
is about.
This commit is contained in:
Mikkel Munch Mortensen 2019-02-14 12:07:21 +01:00
parent 2ae64d7672
commit 6b3e633383
Signed by: decibyte
GPG key ID: 261C257C74AA764B
2 changed files with 22 additions and 21 deletions

View file

@ -17,23 +17,23 @@ tilfælde vil dette blive særdeklareret under listen af badges ved en tjeneste.
Et badge kan have 3 forskellige statuser: Et badge kan have 3 forskellige statuser:
<h3><span class="badge badge-positive badge-dummy">+</span> Positiv</h3> <h3 class="badge badge-positive badge-dummy">Positiv</h3>
Tjenesten lever op til kravene til det badget dækker over. Tjenesten lever op til kravene til det badget dækker over.
<h3><span class="badge badge-partial badge-dummy">/</span> Delvis</h3> <h3 class="badge badge-partial badge-dummy">Delvis</h3>
Tjenesten lever delvist op til det badget dækker over. Dog i en sådan grad at Tjenesten lever delvist op til det badget dækker over. Dog i en sådan grad at
vi mener det er værd at fremhæve. vi mener det er værd at fremhæve.
<h3><span class="badge badge-negative badge-dummy">-</span> Negativ</h3> <h3 class="badge badge-negative badge-dummy">Negativ</h3>
Tjenesten lever _ikke_ op til det badget dækker over. Tjenesten lever _ikke_ op til det badget dækker over.
## Detaljer om de forskellige badges ## Detaljer om de forskellige badges
<h3 id="stabilitet"><span class="badge badge-stable"></span> Stabilitet</h3> <h3 id="stabilitet" class="badge badge-stable">Stabilitet</h3>
Det første badge er som sådan ikke relateret til hvorvidt tjenesten lever op Det første badge er som sådan ikke relateret til hvorvidt tjenesten lever op
til vores formålsparagraf. Det angiver i stedet hvorvidt tjenesten er stabil til vores formålsparagraf. Det angiver i stedet hvorvidt tjenesten er stabil
@ -47,7 +47,7 @@ indforstået med dette forbehold for stabiliteten.
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/term/traffic-light/1925528/"><em>Traffic Light</em></a> af icon 54 fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/term/traffic-light/1925528/"><em>Traffic Light</em></a> af icon 54 fra the Noun Project.</p>
<h3 id="sikker-forbindelse"><span class="badge badge-secure-connection"></span> Sikker forbindelse</h3> <h3 id="sikker-forbindelse" class="badge badge-secure-connection">Sikker forbindelse</h3>
Sikker forbindelse angiver at trafikken over internettet mellem dig og Sikker forbindelse angiver at trafikken over internettet mellem dig og
tjenesten er krypteret. Du kender det som regel som en hængelås foran tjenesten er krypteret. Du kender det som regel som en hængelås foran
@ -57,7 +57,7 @@ kan se hvad der bliver sendt frem og tilbage mellem dig og tjenesten.
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=transfer&i=37030"><em>transfer</em></a> af Gonzalo Bravo fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=transfer&i=37030"><em>transfer</em></a> af Gonzalo Bravo fra the Noun Project.</p>
<h3 id="krypteret-opbevaring-af-data"><span class="badge badge-encrypted-data-storage"></span> Krypteret opbevaring af data</h3> <h3 id="krypteret-opbevaring-af-data" class="badge badge-encrypted-data-storage">Krypteret opbevaring af data</h3>
Tjenestens data gemmes krypteret, og er dermed ikke umiddelbart læsbare for Tjenestens data gemmes krypteret, og er dermed ikke umiddelbart læsbare for
andre end tjenesten selv og data.coops systemadministratorer. I tilfælde af at andre end tjenesten selv og data.coops systemadministratorer. I tilfælde af at
@ -67,7 +67,7 @@ data lækkes (fx ved virtuelt eller fysisk indbrud), kræver det en særlig
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=safe&i=821403"><em>safe</em></a> af Maxim Kulikov fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=safe&i=821403"><em>safe</em></a> af Maxim Kulikov fra the Noun Project.</p>
<h3 id="zero-knowledge"><span class="badge badge-zero-knowledge"></span> Zero knowledge</h3> <h3 id="zero-knowledge" class="badge badge-zero-knowledge">Zero knowledge</h3>
Data gemmes krypteret, og tjenesten er konstrueret på en måde, så selv ikke Data gemmes krypteret, og tjenesten er konstrueret på en måde, så selv ikke
data.coops systemadministratorer har mulighed for at tilgå og læse brugernes data.coops systemadministratorer har mulighed for at tilgå og læse brugernes
@ -79,7 +79,7 @@ datatyven også har stjålet hovednøglen, da der ingen hovednøgle er.
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=shrug&i=1221199"><em>Shrug</em></a> af Andrew Doane fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=shrug&i=1221199"><em>Shrug</em></a> af Andrew Doane fra the Noun Project.</p>
<h3 id="backup"><span class="badge badge-backup"></span> Backup</h3> <h3 id="backup" class="badge badge-backup">Backup</h3>
Der tages løbende backup af tjenestens data, for at minimere skadens omfang i Der tages løbende backup af tjenestens data, for at minimere skadens omfang i
tilfælde af tekniske nedbrud. tilfælde af tekniske nedbrud.
@ -90,7 +90,7 @@ højt på vores prioritetsliste.
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=backup&i=2120922"><em>backup</em></a> af Adrien Coquet fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=backup&i=2120922"><em>backup</em></a> af Adrien Coquet fra the Noun Project.</p>
<h3 id="logging"><span class="badge badge-logging"></span> Logning</h3> <h3 id="logging" class="badge badge-logging">Logning</h3>
Dette badge er lidt omvendt: Det positive badge tildeles tjenester der _ikke_ Dette badge er lidt omvendt: Det positive badge tildeles tjenester der _ikke_
foretager logning. foretager logning.
@ -105,7 +105,7 @@ overfører filen.
<p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=foot%20print&i=1677273"><em>Dog Paws</em></a> af iejank fra the Noun Project.</p> <p class="badge-credits">Grafikken er <a href="https://thenounproject.com/search/?q=foot%20print&i=1677273"><em>Dog Paws</em></a> af iejank fra the Noun Project.</p>
<h3 id="anonym-adgang"><span class="badge badge-anonymous-access"></span> Anonym adgang</h3> <h3 id="anonym-adgang" class="badge badge-anonymous-access">Anonym adgang</h3>
Tjenester med anonym adgang kan benyttes helt uden at man skal være registreret Tjenester med anonym adgang kan benyttes helt uden at man skal være registreret
ved tjenesten. De fleste tjenester kræver en form for registrering af brugerne, ved tjenesten. De fleste tjenester kræver en form for registrering af brugerne,

View file

@ -1,4 +1,4 @@
.badge { .badge:before {
font-family: monospace; font-family: monospace;
border: .1em solid #000; border: .1em solid #000;
border-radius: 1.1em; border-radius: 1.1em;
@ -11,45 +11,46 @@
text-indent: 10em; text-indent: 10em;
background: #ccc center center; background: #ccc center center;
background-size: contain; background-size: contain;
content: "";
} }
.badge-positive { .badge-positive:before {
background-color: #4c4; background-color: #4c4;
} }
.badge-partial { .badge-partial:before {
background-color: #fd4; background-color: #fd4;
} }
.badge-negative { .badge-negative:before {
background-color: #f44; background-color: #f44;
} }
.badge-stable{ .badge-stable:before {
background-image: url(/images/badges/stable.svg); background-image: url(/images/badges/stable.svg);
} }
.badge-secure-connection{ .badge-secure-connection:before {
background-image: url(/images/badges/secure-connection.svg); background-image: url(/images/badges/secure-connection.svg);
} }
.badge-encrypted-data-storage{ .badge-encrypted-data-storage:before {
background-image: url(/images/badges/encrypted-data-storage.svg); background-image: url(/images/badges/encrypted-data-storage.svg);
} }
.badge-zero-knowledge{ .badge-zero-knowledge:before {
background-image: url(/images/badges/zero-knowledge.svg); background-image: url(/images/badges/zero-knowledge.svg);
} }
.badge-backup{ .badge-backup:before {
background-image: url(/images/badges/backup.svg); background-image: url(/images/badges/backup.svg);
} }
.badge-logging{ .badge-logging:before {
background-image: url(/images/badges/logging.svg); background-image: url(/images/badges/logging.svg);
} }
.badge-anonymous-access { .badge-anonymous-access:before {
background-image: url(/images/badges/anonymous-access.svg); background-image: url(/images/badges/anonymous-access.svg);
} }