Migrated to Tailwind CSS 4

.github/workflows/gh-pages.yml

@@ -22,8 +22,6 @@ jobs:
         cache: 'npm'
         cache-dependency-path: package-lock.json
         registry-url: 'https://npm.pkg.github.com/'
-    - name: Install Tools
-      run: npm install -g postcss-cli autoprefixer
     - name: NPM install
       run: |
         npm config set "@skymatic:registry" https://npm.pkg.github.com/

README.md

@@ -3,9 +3,6 @@
 # Usage
 ## Requirements
 * Hugo
-* NPM
-  * postcss-cli (`npm install -g postcss-cli`)
-  * autoprefixer (`npm install -g autoprefixer`)
 * Fontawesome Pro `npm config set "@skymatic:registry" https://npm.pkg.github.com/ && npm config set "//npm.pkg.github.com/:_authToken" TOKEN`
 
 ## Building

assets/css/custom.css

@@ -12,12 +12,12 @@
 }
 
 .btn {
-  @apply inline-block border rounded no-underline text-center px-4 py-2;
+  @apply inline-block border rounded-sm no-underline text-center px-4 py-2;
 }
 
 .btn:hover,
 .btn:focus {
-  @apply no-underline outline-none;
+  @apply no-underline outline-hidden;
 }
 
 .btn:disabled,
@@ -82,7 +82,7 @@
 }
 
 .StripeElement {
-  @apply rounded border border-gray-300 px-3 py-2;
+  @apply rounded-sm border border-gray-300 px-3 py-2;
 }
 
 .StripeElement--focus {
@@ -127,14 +127,6 @@ textarea:read-only {
   min-height: 80vh;
 }
 
-nav a {
-  color: inherit;
-}
-
-nav a:hover {
-  color: inherit;
-}
-
 .bg-trans-white {
   background-color: rgba(255, 255, 255, 0.05);
 }
@@ -168,8 +160,3 @@ nav a:hover {
   margin-top: -96px;
   visibility: hidden;
 }
-
-/* see https://alpinejs.dev/directives/cloak */
-[x-cloak] {
-  display: none !important;
-}

assets/css/main.css

@@ -1,8 +1,198 @@
-/* purgecss start ignore */
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-/* purgecss end ignore */
-@import "assets/css/custom.css";
-@import "assets/css/fonts.css";
-@import "@skymatic/fontawesome-pro/css/all";
-@import "tailwindcss/utilities";
+@import 'tailwindcss';
+@import './fonts.css';
+
+@layer components {
+  @import './custom.css';
+}
+
+@import '@skymatic/fontawesome-pro/css/all' layer(components);
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@config './tailwind.config.js';
+
+@theme {
+  --color-*: initial;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-gray-100: #f7fafc;
+  --color-gray-200: #edf2f7;
+  --color-gray-300: #e2e8f0;
+  --color-gray-400: #cbd5e0;
+  --color-gray-500: #a0aec0;
+  --color-gray-600: #718096;
+  --color-gray-700: #4a5568;
+  --color-gray-800: #2d3748;
+  --color-gray-900: #1a202c;
+
+  --color-red-100: #fff5f5;
+  --color-red-200: #fed7d7;
+  --color-red-300: #feb2b2;
+  --color-red-400: #fc8181;
+  --color-red-500: #f56565;
+  --color-red-600: #e53e3e;
+  --color-red-700: #c53030;
+  --color-red-800: #9b2c2c;
+  --color-red-900: #742a2a;
+
+  --color-orange-100: #fffaf0;
+  --color-orange-200: #feebc8;
+  --color-orange-300: #fbd38d;
+  --color-orange-400: #f6ad55;
+  --color-orange-500: #ed8936;
+  --color-orange-600: #dd6b20;
+  --color-orange-700: #c05621;
+  --color-orange-800: #9c4221;
+  --color-orange-900: #7b341e;
+
+  --color-yellow-100: #fffff0;
+  --color-yellow-200: #fefcbf;
+  --color-yellow-300: #faf089;
+  --color-yellow-400: #f6e05e;
+  --color-yellow-500: #ecc94b;
+  --color-yellow-600: #d69e2e;
+  --color-yellow-700: #b7791f;
+  --color-yellow-800: #975a16;
+  --color-yellow-900: #744210;
+
+  --color-green-100: #f0fff4;
+  --color-green-200: #c6f6d5;
+  --color-green-300: #9ae6b4;
+  --color-green-400: #68d391;
+  --color-green-500: #48bb78;
+  --color-green-600: #38a169;
+  --color-green-700: #2f855a;
+  --color-green-800: #276749;
+  --color-green-900: #22543d;
+
+  --color-teal-100: #e6fffa;
+  --color-teal-200: #b2f5ea;
+  --color-teal-300: #81e6d9;
+  --color-teal-400: #4fd1c5;
+  --color-teal-500: #38b2ac;
+  --color-teal-600: #319795;
+  --color-teal-700: #2c7a7b;
+  --color-teal-800: #285e61;
+  --color-teal-900: #234e52;
+
+  --color-blue-100: #ebf8ff;
+  --color-blue-200: #bee3f8;
+  --color-blue-300: #90cdf4;
+  --color-blue-400: #63b3ed;
+  --color-blue-500: #4299e1;
+  --color-blue-600: #3182ce;
+  --color-blue-700: #2b6cb0;
+  --color-blue-800: #2c5282;
+  --color-blue-900: #2a4365;
+
+  --color-indigo-100: #ebf4ff;
+  --color-indigo-200: #c3dafe;
+  --color-indigo-300: #a3bffa;
+  --color-indigo-400: #7f9cf5;
+  --color-indigo-500: #667eea;
+  --color-indigo-600: #5a67d8;
+  --color-indigo-700: #4c51bf;
+  --color-indigo-800: #434190;
+  --color-indigo-900: #3c366b;
+
+  --color-purple-100: #faf5ff;
+  --color-purple-200: #e9d8fd;
+  --color-purple-300: #d6bcfa;
+  --color-purple-400: #b794f4;
+  --color-purple-500: #9f7aea;
+  --color-purple-600: #805ad5;
+  --color-purple-700: #6b46c1;
+  --color-purple-800: #553c9a;
+  --color-purple-900: #44337a;
+
+  --color-pink-100: #fff5f7;
+  --color-pink-200: #fed7e2;
+  --color-pink-300: #fbb6ce;
+  --color-pink-400: #f687b3;
+  --color-pink-500: #ed64a6;
+  --color-pink-600: #d53f8c;
+  --color-pink-700: #b83280;
+  --color-pink-800: #97266d;
+  --color-pink-900: #702459;
+
+  --color-primary: #49b04a;
+  --color-primary-l2: #ebf5eb;
+  --color-secondary: #008a7b;
+  --color-tertiary: #005e71;
+  --color-dark: #1e2b33;
+
+  --font-*: initial;
+  --font-headline: Quicksand, sans-serif;
+  --font-body: Open Sans, sans-serif;
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 4rem;
+  --text-7xl: 4.5rem;
+
+  --breakpoint-*: initial;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1280px;
+
+  --animate-hover: hover 10s ease-in-out infinite;
+
+  --height-70px: 70px;
+  --height-412px: 412px;
+
+  --width-fit: fit-content;
+
+  @keyframes hover {
+    0%,
+    100% {
+      transform: rotate(0deg) translateY(0);
+    }
+    50% {
+      transform: rotate(-3deg) translateY(-10px);
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+/* see https://alpinejs.dev/directives/cloak */
+[x-cloak] {
+  display: none;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

content/_index.de.html

@@ -9,22 +9,22 @@
         <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
         <p class="lead">Cryptomator ist ein einfaches Tool zur digitalen Selbstverteidigung. Es ermöglicht dir, deine Cloud-Daten eigenständig und unabhängig zu schützen.</p>
         <div class="flex mb-4">
-          <div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
+          <div class="fa-stack shrink-0 text-xl text-secondary mr-3">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-clouds fa-stack-1x fa-inverse"></i>
           </div>
           <span>Die meisten Cloudanbieter verschlüsseln Daten nur während der Übertragung oder aber sie behalten die Schlüssel zur Entschlüsselung für sich selbst. Diese Schlüssel können gestohlen, kopiert oder missbraucht werden. Dank Cryptomator hast nur du den Schlüssel zu deinen Daten in der Hand.</span>
         </div>
         <div class="flex">
-          <div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
+          <div class="fa-stack shrink-0 text-xl text-secondary mr-3">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-lightbulb-on fa-stack-1x fa-inverse"></i>
           </div>
           <span>Cryptomator ermöglicht dir den Zugriff auf deine Dateien von all deinen Geräten aus. Es lässt sich einfach bedienen und fügt sich nahtlos zwischen deine Daten und der Cloud ein.</span>
         </div>
       </div>
       <figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pl-4 lg:pl-8">
-        <img data-src="/img/home/man-vault.png" class="lazyload aspect-[768/533] w-full" alt="Person mit dem Schlüssel zu einem sehr sicheren Tresor"/>
+        <img data-src="/img/home/man-vault.png" class="lazyload aspect-768/533 w-full" alt="Person mit dem Schlüssel zu einem sehr sicheren Tresor"/>
       </figure>
     </div>
   </article>
@@ -37,29 +37,29 @@ <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
         <h2>Wie schützt Cryptomator deine Daten?</h2>
         <p class="lead">Cryptomators Technologie entspricht den neuesten Standards und verschlüsselt sowohl Dateien als auch Dateinamen mit AES und 256-Bit-Schlüssellänge.</p>
         <div class="flex mb-4">
-          <div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
+          <div class="fa-stack shrink-0 text-xl text-secondary mr-3">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-key fa-stack-1x fa-inverse"></i>
           </div>
           <span>Um mit Cryptomator zu starten, vergibst du ein Passwort für einen Ordner - bei uns heißt dieser dann Tresor - innerhalb deiner Cloud. Das ist alles. Keine komplizierte Schlüsselerstellung, keine Registrierung, keine Konfiguration!</span>
         </div>
         <div class="flex mb-4">
-          <div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
+          <div class="fa-stack shrink-0 text-xl text-secondary mr-3">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-hdd fa-stack-1x fa-inverse"></i>
           </div>
           <span>Um auf den Tresor zugreifen zu können, gibst du das Passwort einfach erneut ein. Dir wird ein virtuelles verschlüsseltes Laufwerk bereitgestellt, auf das du deine Daten schieben kannst - genau wie bei einem USB-Stick. Jedes Mal, wenn du etwas auf diesem Laufwerk speicherst, verschlüsselt Cryptomator die Daten automatisch. Ziemlich einfach, oder?</span>
         </div>
         <div class="flex">
-          <div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
+          <div class="fa-stack shrink-0 text-xl text-secondary mr-3">
             <i class="fas fa-circle fa-stack-2x"></i>
             <i class="fas fa-shield-check fa-stack-1x fa-inverse"></i>
           </div>
           <span>Die Technologie dahinter entspricht den neuesten Standards und verschlüsselt sowohl Dateien als auch Dateinamen mit AES und 256-Bit-Schlüssellänge. Das bedeutet: schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.</span>
         </div>
       </div>
       <figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pr-4 lg:pr-8">
-        <img data-src="/img/home/woman-laptop.png" class="lazyload aspect-[768/431] w-full" alt="Person, die vor einem Laptop sitzt, während Cryptobot neben der Person auf den Laptop zeigt"/>
+        <img data-src="/img/home/woman-laptop.png" class="lazyload aspect-768/431 w-full" alt="Person, die vor einem Laptop sitzt, während Cryptobot neben der Person auf den Laptop zeigt"/>
       </figure>
     </div>
   </article>
@@ -69,7 +69,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
   <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
-      <img data-src="/de/img/home/split-screenshots.png" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
+      <img data-src="/de/img/home/split-screenshots.png" class="lazyload aspect-1664/975 w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
       <figcaption>Schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.</figcaption>
     </figure>
   </article>
@@ -88,7 +88,7 @@ <h3>DSGVO-konform über die Cloud mit deinem ganzen Team synchronisieren</h3>
         <p>Beim Einsatz von Cryptomator und einem Cloud-Service mit entsprechendem AVV kannst du <a href="/de/gdpr/">Daten DSGVO-konform über die Cloud synchronisieren</a> und mit einem ganzen Team nutzen.</p>
       </div>
       <figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pr-4 lg:pr-8">
-        <img data-src="/img/home/people-phone.png" class="lazyload aspect-[768/683] w-full" alt="Zwei Menschen springen freudig um ihr riesiges Smartphone herum und lassen eine vertrauenswürdige App laufen"/>
+        <img data-src="/img/home/people-phone.png" class="lazyload aspect-768/683 w-full" alt="Zwei Menschen springen freudig um ihr riesiges Smartphone herum und lassen eine vertrauenswürdige App laufen"/>
       </figure>
     </div>
   </article>