Skip to content

Commit 3d42306

Browse files
tobihagemanntobihagemann
authored
Merge pull request #118 from cryptomator/tailwind4
Migrated to Tailwind CSS 4
2 parents 9365105 + 612cd81 commit 3d42306

File tree

117 files changed

+1498
-2546
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

117 files changed

+1498
-2546
lines changed

‎.github/workflows/gh-pages.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ jobs:
2222
cache: 'npm'
2323
cache-dependency-path: package-lock.json
2424
registry-url: 'https://npm.pkg.github.com/'
25-
- name: Install Tools
26-
run: npm install -g postcss-cli autoprefixer
2725
- name: NPM install
2826
run: |
2927
npm config set "@skymatic:registry" https://npm.pkg.github.com/

‎README.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33
# Usage
44
## Requirements
55
* Hugo
6-
* NPM
7-
* postcss-cli (`npm install -g postcss-cli`)
8-
* autoprefixer (`npm install -g autoprefixer`)
96
* Fontawesome Pro `npm config set "@skymatic:registry" https://npm.pkg.github.com/ && npm config set "//npm.pkg.github.com/:_authToken" TOKEN`
107

118
## Building

‎assets/css/custom.css‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
}
1313

1414
.btn {
15-
@apply inline-block border rounded no-underline text-center px-4 py-2;
15+
@apply inline-block border rounded-sm no-underline text-center px-4 py-2;
1616
}
1717

1818
.btn:hover,
1919
.btn:focus {
20-
@apply no-underline outline-none;
20+
@apply no-underline outline-hidden;
2121
}
2222

2323
.btn:disabled,
@@ -82,7 +82,7 @@
8282
}
8383

8484
.StripeElement {
85-
@apply rounded border border-gray-300 px-3 py-2;
85+
@apply rounded-sm border border-gray-300 px-3 py-2;
8686
}
8787

8888
.StripeElement--focus {
@@ -127,14 +127,6 @@ textarea:read-only {
127127
min-height: 80vh;
128128
}
129129

130-
nav a {
131-
color: inherit;
132-
}
133-
134-
nav a:hover {
135-
color: inherit;
136-
}
137-
138130
.bg-trans-white {
139131
background-color: rgba(255, 255, 255, 0.05);
140132
}
@@ -168,8 +160,3 @@ nav a:hover {
168160
margin-top: -96px;
169161
visibility: hidden;
170162
}
171-
172-
/* see https://alpinejs.dev/directives/cloak */
173-
[x-cloak] {
174-
display: none !important;
175-
}

‎assets/css/main.css‎

Lines changed: 198 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,198 @@
1-
/* purgecss start ignore */
2-
@import "tailwindcss/base";
3-
@import "tailwindcss/components";
4-
/* purgecss end ignore */
5-
@import "assets/css/custom.css";
6-
@import "assets/css/fonts.css";
7-
@import "@skymatic/fontawesome-pro/css/all";
8-
@import "tailwindcss/utilities";
1+
@import 'tailwindcss';
2+
@import './fonts.css';
3+
4+
@layer components {
5+
@import './custom.css';
6+
}
7+
8+
@import '@skymatic/fontawesome-pro/css/all' layer(components);
9+
10+
@plugin '@tailwindcss/forms';
11+
@plugin '@tailwindcss/typography';
12+
13+
@config './tailwind.config.js';
14+
15+
@theme {
16+
--color-*: initial;
17+
--color-transparent: transparent;
18+
--color-current: currentColor;
19+
--color-black: #000;
20+
--color-white: #fff;
21+
22+
--color-gray-100: #f7fafc;
23+
--color-gray-200: #edf2f7;
24+
--color-gray-300: #e2e8f0;
25+
--color-gray-400: #cbd5e0;
26+
--color-gray-500: #a0aec0;
27+
--color-gray-600: #718096;
28+
--color-gray-700: #4a5568;
29+
--color-gray-800: #2d3748;
30+
--color-gray-900: #1a202c;
31+
32+
--color-red-100: #fff5f5;
33+
--color-red-200: #fed7d7;
34+
--color-red-300: #feb2b2;
35+
--color-red-400: #fc8181;
36+
--color-red-500: #f56565;
37+
--color-red-600: #e53e3e;
38+
--color-red-700: #c53030;
39+
--color-red-800: #9b2c2c;
40+
--color-red-900: #742a2a;
41+
42+
--color-orange-100: #fffaf0;
43+
--color-orange-200: #feebc8;
44+
--color-orange-300: #fbd38d;
45+
--color-orange-400: #f6ad55;
46+
--color-orange-500: #ed8936;
47+
--color-orange-600: #dd6b20;
48+
--color-orange-700: #c05621;
49+
--color-orange-800: #9c4221;
50+
--color-orange-900: #7b341e;
51+
52+
--color-yellow-100: #fffff0;
53+
--color-yellow-200: #fefcbf;
54+
--color-yellow-300: #faf089;
55+
--color-yellow-400: #f6e05e;
56+
--color-yellow-500: #ecc94b;
57+
--color-yellow-600: #d69e2e;
58+
--color-yellow-700: #b7791f;
59+
--color-yellow-800: #975a16;
60+
--color-yellow-900: #744210;
61+
62+
--color-green-100: #f0fff4;
63+
--color-green-200: #c6f6d5;
64+
--color-green-300: #9ae6b4;
65+
--color-green-400: #68d391;
66+
--color-green-500: #48bb78;
67+
--color-green-600: #38a169;
68+
--color-green-700: #2f855a;
69+
--color-green-800: #276749;
70+
--color-green-900: #22543d;
71+
72+
--color-teal-100: #e6fffa;
73+
--color-teal-200: #b2f5ea;
74+
--color-teal-300: #81e6d9;
75+
--color-teal-400: #4fd1c5;
76+
--color-teal-500: #38b2ac;
77+
--color-teal-600: #319795;
78+
--color-teal-700: #2c7a7b;
79+
--color-teal-800: #285e61;
80+
--color-teal-900: #234e52;
81+
82+
--color-blue-100: #ebf8ff;
83+
--color-blue-200: #bee3f8;
84+
--color-blue-300: #90cdf4;
85+
--color-blue-400: #63b3ed;
86+
--color-blue-500: #4299e1;
87+
--color-blue-600: #3182ce;
88+
--color-blue-700: #2b6cb0;
89+
--color-blue-800: #2c5282;
90+
--color-blue-900: #2a4365;
91+
92+
--color-indigo-100: #ebf4ff;
93+
--color-indigo-200: #c3dafe;
94+
--color-indigo-300: #a3bffa;
95+
--color-indigo-400: #7f9cf5;
96+
--color-indigo-500: #667eea;
97+
--color-indigo-600: #5a67d8;
98+
--color-indigo-700: #4c51bf;
99+
--color-indigo-800: #434190;
100+
--color-indigo-900: #3c366b;
101+
102+
--color-purple-100: #faf5ff;
103+
--color-purple-200: #e9d8fd;
104+
--color-purple-300: #d6bcfa;
105+
--color-purple-400: #b794f4;
106+
--color-purple-500: #9f7aea;
107+
--color-purple-600: #805ad5;
108+
--color-purple-700: #6b46c1;
109+
--color-purple-800: #553c9a;
110+
--color-purple-900: #44337a;
111+
112+
--color-pink-100: #fff5f7;
113+
--color-pink-200: #fed7e2;
114+
--color-pink-300: #fbb6ce;
115+
--color-pink-400: #f687b3;
116+
--color-pink-500: #ed64a6;
117+
--color-pink-600: #d53f8c;
118+
--color-pink-700: #b83280;
119+
--color-pink-800: #97266d;
120+
--color-pink-900: #702459;
121+
122+
--color-primary: #49b04a;
123+
--color-primary-l2: #ebf5eb;
124+
--color-secondary: #008a7b;
125+
--color-tertiary: #005e71;
126+
--color-dark: #1e2b33;
127+
128+
--font-*: initial;
129+
--font-headline: Quicksand, sans-serif;
130+
--font-body: Open Sans, sans-serif;
131+
132+
--text-*: initial;
133+
--text-xs: 0.75rem;
134+
--text-sm: 0.875rem;
135+
--text-base: 1rem;
136+
--text-lg: 1.125rem;
137+
--text-xl: 1.25rem;
138+
--text-2xl: 1.5rem;
139+
--text-3xl: 1.875rem;
140+
--text-4xl: 2.25rem;
141+
--text-5xl: 3rem;
142+
--text-6xl: 4rem;
143+
--text-7xl: 4.5rem;
144+
145+
--breakpoint-*: initial;
146+
--breakpoint-md: 768px;
147+
--breakpoint-lg: 1280px;
148+
149+
--animate-hover: hover 10s ease-in-out infinite;
150+
151+
--height-70px: 70px;
152+
--height-412px: 412px;
153+
154+
--width-fit: fit-content;
155+
156+
@keyframes hover {
157+
0%,
158+
100% {
159+
transform: rotate(0deg) translateY(0);
160+
}
161+
50% {
162+
transform: rotate(-3deg) translateY(-10px);
163+
}
164+
}
165+
}
166+
167+
@utility container {
168+
margin-inline: auto;
169+
padding-inline: 1rem;
170+
}
171+
172+
/* see https://alpinejs.dev/directives/cloak */
173+
[x-cloak] {
174+
display: none;
175+
}
176+
177+
/*
178+
The default border color has changed to `currentColor` in Tailwind CSS v4,
179+
so we've added these compatibility styles to make sure everything still
180+
looks the same as it did with Tailwind CSS v3.
181+
182+
If we ever want to remove these styles, we need to add an explicit border
183+
color utility to any element that depends on these defaults.
184+
*/
185+
@layer base {
186+
*,
187+
::after,
188+
::before,
189+
::backdrop,
190+
::file-selector-button {
191+
border-color: var(--color-gray-200, currentColor);
192+
}
193+
194+
button:not(:disabled),
195+
[role="button"]:not(:disabled) {
196+
cursor: pointer;
197+
}
198+
}

‎content/_index.de.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@
99
<h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
1010
<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>
1111
<div class="flex mb-4">
12-
<div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
12+
<div class="fa-stack shrink-0 text-xl text-secondary mr-3">
1313
<i class="fas fa-circle fa-stack-2x"></i>
1414
<i class="fas fa-clouds fa-stack-1x fa-inverse"></i>
1515
</div>
1616
<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>
1717
</div>
1818
<div class="flex">
19-
<div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
19+
<div class="fa-stack shrink-0 text-xl text-secondary mr-3">
2020
<i class="fas fa-circle fa-stack-2x"></i>
2121
<i class="fas fa-lightbulb-on fa-stack-1x fa-inverse"></i>
2222
</div>
2323
<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>
2424
</div>
2525
</div>
2626
<figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pl-4 lg:pl-8">
27-
<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"/>
27+
<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"/>
2828
</figure>
2929
</div>
3030
</article>
@@ -37,29 +37,29 @@ <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
3737
<h2>Wie schützt Cryptomator deine Daten?</h2>
3838
<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>
3939
<div class="flex mb-4">
40-
<div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
40+
<div class="fa-stack shrink-0 text-xl text-secondary mr-3">
4141
<i class="fas fa-circle fa-stack-2x"></i>
4242
<i class="fas fa-key fa-stack-1x fa-inverse"></i>
4343
</div>
4444
<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>
4545
</div>
4646
<div class="flex mb-4">
47-
<div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
47+
<div class="fa-stack shrink-0 text-xl text-secondary mr-3">
4848
<i class="fas fa-circle fa-stack-2x"></i>
4949
<i class="fas fa-hdd fa-stack-1x fa-inverse"></i>
5050
</div>
5151
<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>
5252
</div>
5353
<div class="flex">
54-
<div class="fa-stack flex-shrink-0 text-xl text-secondary mr-3">
54+
<div class="fa-stack shrink-0 text-xl text-secondary mr-3">
5555
<i class="fas fa-circle fa-stack-2x"></i>
5656
<i class="fas fa-shield-check fa-stack-1x fa-inverse"></i>
5757
</div>
5858
<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>
5959
</div>
6060
</div>
6161
<figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pr-4 lg:pr-8">
62-
<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"/>
62+
<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"/>
6363
</figure>
6464
</div>
6565
</article>
@@ -69,7 +69,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
6969
<article class="prose prose-sm md:prose max-w-none md:max-w-none">
7070
<h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
7171
<figure class="mx-auto md:w-5/6 lg:w-2/3">
72-
<img data-src="/de/img/home/split-screenshots.avif" class="lazyload aspect-[1664/975] w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
72+
<img data-src="/de/img/home/split-screenshots.avif" class="lazyload aspect-1664/975 w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
7373
<figcaption>Schaut jemand in den Ordner in deiner Cloud, kann er keinerlei Rückschlüsse auf deine Daten ziehen.</figcaption>
7474
</figure>
7575
</article>
@@ -88,7 +88,7 @@ <h3>DSGVO-konform über die Cloud mit deinem ganzen Team synchronisieren</h3>
8888
<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>
8989
</div>
9090
<figure class="text-2xl max-w-sm md:max-w-none md:w-1/3 md:pr-4 lg:pr-8">
91-
<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"/>
91+
<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"/>
9292
</figure>
9393
</div>
9494
</article>

0 commit comments

Comments
 (0)