improved responsiveness

tobihagemann · tobihagemann · commit 7ef8abfd0a88 · 2025-04-07T16:58:28.000+02:00
diff --git a/content/comparisons/axcrypt-alternative.de.md b/content/comparisons/axcrypt-alternative.de.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/axcrypt-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/content/comparisons/axcrypt-alternative.en.md b/content/comparisons/axcrypt-alternative.en.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/axcrypt-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/content/comparisons/boxcryptor-alternative.de.md b/content/comparisons/boxcryptor-alternative.de.md
@@ -23,7 +23,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/boxcryptor-logo.svg">
     </div>
   footer: |
-    <a class="btn btn-outline-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" href="/de/comparisons/boxcryptor-alternative/">Detailvergleich</a>
+    <a class="btn btn-outline-primary w-full px-2 md:px-4 py-1 md:py-1" href="/de/comparisons/boxcryptor-alternative/">Detailvergleich</a>
   generalFeatures:
     unlimitedDevices: |
       <div class="has-tooltip">
diff --git a/content/comparisons/boxcryptor-alternative.en.md b/content/comparisons/boxcryptor-alternative.en.md
@@ -23,7 +23,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/boxcryptor-logo.svg">
     </div>
   footer: |
-    <a class="btn btn-outline-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" href="/comparisons/boxcryptor-alternative/">Full Comparison</a>
+    <a class="btn btn-outline-primary w-full px-2 md:px-4 py-1 md:py-1" href="/comparisons/boxcryptor-alternative/">Full Comparison</a>
   generalFeatures:
     unlimitedDevices: |
       <div class="has-tooltip">
diff --git a/content/comparisons/cryptomator.de.md b/content/comparisons/cryptomator.de.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/logo.svg">
     </div>
   footer: |
-    <a class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" href="/de/pricing/">Preise</a>
+    <a class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" href="/de/pricing/">Preise</a>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-check-circle fa-fw text-2xl text-primary"></i>
diff --git a/content/comparisons/cryptomator.en.md b/content/comparisons/cryptomator.en.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/logo.svg">
     </div>
   footer: |
-    <a class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" href="/pricing/">Pricing</a>
+    <a class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" href="/pricing/">Pricing</a>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-check-circle fa-fw text-2xl text-primary"></i>
diff --git a/content/comparisons/tresorit-alternative.de.md b/content/comparisons/tresorit-alternative.de.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/tresorit-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/content/comparisons/tresorit-alternative.en.md b/content/comparisons/tresorit-alternative.en.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/tresorit-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/content/comparisons/veracrypt-alternative.de.md b/content/comparisons/veracrypt-alternative.de.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/veracrypt-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/content/comparisons/veracrypt-alternative.en.md b/content/comparisons/veracrypt-alternative.en.md
@@ -8,7 +8,7 @@ comparison:
       <img class="max-w-16 h-12" src="/img/comparisons/veracrypt-logo.svg">
     </div>
   footer: |
-    <button class="btn btn-primary text-xs md:text-base w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
+    <button class="btn btn-primary w-full px-2 md:px-4 py-1 md:py-1" disabled>Coming Soon</button>
   generalFeatures:
     unlimitedDevices: |
       <i class="fas fa-times-circle fa-fw text-2xl text-red-600"></i>
diff --git a/layouts/comparisons/list.html b/layouts/comparisons/list.html
@@ -10,9 +10,9 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
         <table class="table-fixed divide-y divide-primary white-box w-full mb-1">
           <thead>
             <tr class="py-2">
-              <th class="w-36 md:w-72"></th>
+              <th class="w-44 lg:w-72"></th>
                 {{ range .Pages }}
-                  <th class="font-bold text-xs md:text-base leading-relaxed p-2 md:p-4 w-36 md:w-48">
+                  <th class="font-bold text-xs lg:text-base leading-relaxed p-2 lg:p-4 w-36 lg:w-48">
                     {{ .Params.Comparison.Header | safeHTML }}
                   </th>
                 {{ end }}
@@ -23,11 +23,11 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             {{ range $category := $data.comparisons }}
               <tr>
                 {{ $colspan := add (len $.Pages) 1 }}
-                <td class="font-bold leading-relaxed p-2 md:p-4" colspan="{{ $colspan }}">{{ $category.Content | safeHTML }}</td>
+                <td class="font-bold text-xs lg:text-base leading-relaxed p-2 lg:p-4" colspan="{{ $colspan }}">{{ $category.Content | safeHTML }}</td>
               </tr>
               {{ range $feature := $category.Features }}
                 <tr>
-                  <td class="font-p p-2 md:p-4">
+                  <td class="text-xs lg:text-base leading-relaxed p-2 lg:p-4">
                     {{ if $feature.Explanation }}
                       <a class="flex items-center" href="#" @click.prevent="isExplanationOpen['{{ $feature.Key }}'] = !isExplanationOpen['{{ $feature.Key }}']">
                         <i :class="{ 'fa-chevron-circle-right': !isExplanationOpen['{{ $feature.Key }}'], 'fa-chevron-circle-down': isExplanationOpen['{{ $feature.Key }}'] }" class="shrink-0 fas fa-fw text-gray-600 mr-2"></i>
@@ -38,14 +38,14 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                     {{ end }}
                     </td>
                   {{ range $page := $.Pages }}
-                    <td class="font-p text-center p-2 md:p-4">
+                    <td class="text-xs lg:text-base leading-relaxed text-center p-2 lg:p-4">
                       {{ index (index $page.Params.Comparison $category.Key) $feature.Key | safeHTML }}
                     </td>
                   {{ end }}
                 </tr>
                 {{ if $feature.Explanation }}
                   <tr x-show="isExplanationOpen['{{ $feature.Key }}']" x-cloak>
-                    <td class="font-p p-4">
+                    <td class="text-xs lg:text-base leading-relaxed p-4">
                       {{ $feature.Explanation | safeHTML }}
                     </td>
                   </tr>
@@ -57,7 +57,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             <tr>
               <td></td>
               {{ range .Pages }}
-                <td class="font-p p-2 md:p-4">
+                <td class="text-xs lg:text-base leading-relaxed p-2 lg:p-4">
                   {{ .Params.Comparison.Footer | safeHTML }}
                 </td>
               {{ end }}
