added label-uppercase, see #120

Author: tobihagemann

assets/css/custom.css

@@ -109,6 +109,10 @@
   @apply text-sm md:text-base leading-relaxed text-gray-700;
 }
 
+.label-uppercase {
+  @apply block font-bold text-xs uppercase tracking-wide text-gray-600;
+}
+
 .white-box {
   @apply rounded-sm shadow-sm bg-white;
 }

content/boxcryptor-alternative.de.md

@@ -195,9 +195,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileContentEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand kann unberechtigt den Dateiinhalt mitlesen.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Das ist die Grundvoraussetzung, um dein Recht auf Privatsphäre selbst in die Hand zu nehmen.</p>
       </td>
     </tr>
@@ -218,9 +218,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileNameEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand kann unberechtigt den Dateinamen erkennen.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Metadaten wie der Dateiname verraten mehr über dich, als du denkst. Aus Dateiendungen kann ein Profil über die von dir verwendeten Daten erstellt werden. Im schlimmsten Fall kann dich trotz Verschlüsselung des Dateiinhalts bereits der Name „Bericht Menschensrechtsverletzungen.docx“ am falschen Flughafen vor Probleme stellen.</p>
       </td>
     </tr>
@@ -241,9 +241,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileAttributeEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand erhält Zugriff auf zusätzliche Dateiattribute.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Drittsoftwares speichern möglicherweise Metadaten über deine Datei in dessen Dateiattributen. Werden diese nicht verschlüsselt, kann diese jeder mitlesen und sogar manipulieren, um dein Betriebssystem zu bestimmten Verhaltensweisen zu zwingen.</p>
       </td>
     </tr>
@@ -259,9 +259,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFOSSOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Der Quellcode ist einer breiten Community zugänglich, was die Sicherheit der Verschlüsselung erhöht.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Die Sicherheit eines Systems muss allein vom Schlüssel abhängen und darf nicht auf der Geheimhaltung der Algorithmen beruhen. Da der Verschlüsselungsalgorithmus von einer breiten Community kontrolliert und diskutiert wird, werden Schwachstellen oder Fehler im Code schnell erkannt.</p>
       </td>
     </tr>
@@ -277,9 +277,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isDirectoryObfuscationOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die verschlüsselte Verzeichnisstruktur entspricht nicht der tatsächlichen bzw. unverschlüsselten Verzeichnisstruktur.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Anwendungen erzeugen beim Speichern gleich mehrere Dateien, die in bestimmten Strukturen abgelegt werden. Falls diese Strukturen im verschlüsselten Zustand noch erkennbar ist, kann ein Angreifer trotz Verschlüsselung Rückschlüsse auf die Art der Daten ziehen.</p>
       </td>
     </tr>
@@ -295,9 +295,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isIntegrityProtectionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Da Verschlüsselung nicht sofort auch vor Manipulation der Daten schützt, muss eine unbefugte Veränderung der Daten erkannt werden.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Um dich vor einer Vielzahl raffinierter Angriffe zu schützen, muss die Unversehrtheit deiner verschlüsselten Daten überprüft werden, bevor du sie entschlüsselst. Passiert dies nicht, ist es grundsätzlich denkbar, dass manipulierte Daten eingeschleust werden, die du dann unbemerkt öffnest. ({{< extlink "https://en.wikipedia.org/wiki/Chosen-ciphertext_attack" "Dies kann im schlimmsten Fall sogar von Angreifern genutzt werden, um die Verschlüsselung zu knacken." >}})</p>
       </td>
     </tr>
@@ -313,9 +313,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isQuantumResistantOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die eingesetzten Verschlüsselungsalgorithmen sind auch dann noch sicher, wenn der Angreifer über Quantencomputer verfügt.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Verschlüsselungsverfahren basieren auf mathematischen Problemen, die normalerweise schwer zu berechnen sind. Für Quantencomputer sind sie dagegen viel weniger komplex. Verfügt ein Angreifer über Zugang zu einem entsprechenden Quantencomputer, ist die Verschlüsselung deiner Daten de facto unwirksam.</p>
       </td>
     </tr>
@@ -331,9 +331,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isAuditedCryptographyOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Der Verschlüsselungscode wird von unabhängigen Gutachtern untersucht.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Audits mit Fokus auf kryptografisch relevanten Code können ein wichtiges Element zur Qualitätskontrolle sein, sofern der Auditor genug Zeit hat und nicht nur einen flüchtigen Überblick erhält.</p>
       </td>
     </tr>
@@ -349,9 +349,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isMemoryHardKDFOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die Key Derivation Function (KDF) wird verwendet, um aus dem von dir eingegebenen Passwort den kryptografischen Schlüssel herzuleiten. Diese Funktion muss möglichst komplex sein, um Bruteforce-Angriffe (das wahllose Ausprobieren von Zeichenkombinationen) zu verhindern.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p class="mb-2">Um deinen Schlüssel aus deinem Passwort herzuleiten, braucht ein Computer 200ms. Das klingt kurz, addiert sich aber schnell zu astronomisch hohen Zeiten, wenn ein Angreifer alle denkbaren Passwörter durchprobieren muss. Angreifer könnten allerdings Spezialhardware (sog. ASICs) einsetzen, um hunderttausende Möglichkeiten gleichzeitig zu probieren.</p>
         <p>Um dem vorzubeugen, werden KDFs eingesetzt, die speicherintensiv („memory-hard“) sind, also besonders viel Speicher benötigen. Das  gestaltet einen Angriff unproportional aufwendig und somit unattraktiv für den Angreifer.</p>
       </td>
@@ -368,9 +368,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isShareKeysOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Ideal bei Team-Nutzung des Cloud-Speichers: Jedes Teammitglied kann ein individuelles Passwort verwenden – trotzdem habt ihr Zugriff auf die verschlüsselten Daten.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Individuelle Passwörter in größeren Teams erhöhen die Sicherheit. Zum einen, weil die Weitergabe eines Passworts je nach Kommunikationskanal ein Risiko darstellt, zum anderen, weil Passwörter, die geteilt werden, oft schwächer (weil einfacher zu merken) sind.</p>
       </td>
     </tr>