Skip to content

Commit 9985532

Browse files
overheadhunteroverheadhunter
committed
Merge branch 'develop' into tailwind4
# Conflicts: # content/_index.de.html # content/_index.en.html
2 parents 82b98d7 + 730e6ec commit 9985532

File tree

14 files changed

+49
-14
lines changed

14 files changed

+49
-14
lines changed

‎README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,26 @@
1111
* for production builds simply run `npm run build`
1212
* for local development run `npm run dev`
1313
* for local production tests `npm run serve`
14+
15+
## Optional Dependencies for Size Optimizations
16+
17+
### Font Subsets
18+
To create subsets of font files, e.g. when we know only very few characters are required to render the title of the page "CRYPTOMATOR HUB":
19+
20+
1. First install `pip install fonttools brotli`
21+
2. `pyftsubset quicksand-bold.woff2 --text="CRYPTOMATOR HUB" --verbose --flavor=woff2 --output-file=quicksand-bold.reduced.woff2`
22+
23+
### Image Conversions
24+
Using WebP (for smaller images) or AVIF (for >80 kiB due to larger overhead) may yield in better compression. [Here](https://www.reddit.com/r/AV1/comments/aabqdc/lossless_compression_test_png_vs_webp_vs_avif/) is a (rather old) comparison benchmark. However, we need to test the best format ourselves.
25+
26+
* `brew install libavif` (see [GitHub Project Page](https://github.com/AOMediaCodec/libavif?tab=readme-ov-file#installation) for other installation methods)
27+
* Example (lossless): `avifenc -l input.png output.avif`
28+
* Example (lossy): `avifenc --qcolor 70 --qalpha 100 --depth 8 input.png output.avif`
29+
* `brew install libwebm`
30+
* Example (lossless): `cwebp -preset drawing -lossless -z 6 input.png -o output.webp`
31+
* Example (lossy): `cwebp -preset drawing -q 90 -alpha_q 100 input.png -o output.webp`
32+
* `brew install optipng`
33+
* Example: `optipng -o3 image.png`
34+
35+
> [!TIP]
36+
> If you see color banding in lossy conversions, try avif with 10 bit color depth.

‎assets/css/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* custom classes: */
22
.header-bg {
3-
background-image: url(/img/home/header-background.png), linear-gradient(to bottom, #0b0f17 0%, #143454 38%, #3f8bd9 72%, #9ac7f5 90%);
3+
background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, rgb(4.31% 5.88% 9.02%) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
44
background-size: auto 100%;
55
}
66

‎content/_index.de.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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.png" 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>

‎content/_index.en.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2>How does Cryptomator protect your data?</h2>
6969
<article class="prose prose-sm md:prose max-w-none md:max-w-none">
7070
<h2>Optimal protection thanks to the latest technology standards</h2>
7171
<figure class="mx-auto md:w-5/6 lg:w-2/3">
72-
<img data-src="/img/home/split-screenshots.png" class="lazyload aspect-1664/975 w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
72+
<img data-src="/img/home/split-screenshots.avif" class="lazyload aspect-1664/975 w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
7373
<figcaption>If someone looks into the folder in your cloud, they cannot draw any conclusions about your data.</figcaption>
7474
</figure>
7575
</article>

‎layouts/_default/baseof.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>{{ .Title }}</title>
7+
{{ block "preloads" . }}
8+
<!-- optional additional page-specific preloads -->
9+
{{ end }}
10+
<link rel="preload" fetchpriority="low" as="image" href="favicon.ico" type="image/x-icon">
11+
<link rel="preload" fetchpriority="low" as="image" href="img/logo.svg" type="image/svg+xml">
12+
<link rel="preload" fetchpriority="low" href="/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
13+
<link rel="preload" fetchpriority="low" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
714
{{ if and (eq .Section "blog") .IsPage }}
815
<meta name="description" content="{{ .Summary }}">
916
<meta property="og:title" content="{{ .Title }}">
@@ -63,9 +70,6 @@
6370
{{ range .Translations }}
6471
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .RelPermalink }}" />
6572
{{ end }}
66-
{{ block "head" . }}
67-
<!-- optional additional page-specific stuff that goes into head -->
68-
{{ end }}
6973
</head>
7074
<body x-data="{ isNavOpen: false, globalData: { githubStargazers: null } }" x-init="determineGitHubStargazersCount('{{ .Site.Language.Lang }}', globalData)" :class="isNavOpen && 'overflow-hidden'" class="bg-dark font-body text-gray-900">
7175
{{ partial "nav.html" . }}

‎layouts/donate-thanks/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{ define "main" }}
22
<div class="container text-center py-12">
33
<header class="prose prose-sm md:prose max-w-none md:max-w-none">
4-
<img src="/img/logo.svg" class="object-scale-down mx-auto w-1/4 mb-8" alt="Cryptomator Logo"/>
4+
<img src="/img/logo.svg" class="object-scale-down mx-auto w-1/4 mb-8 aspect-1110/942" alt="Cryptomator Logo"/>
55
<h1>{{ .Title }}</h1>
66
{{ .Content }}
77
</header>

‎layouts/downloads/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{ define "head" }}
1+
{{ define "preloads" }}
22
<link rel="dns-prefetch" href="https://github.com">
33
{{ end }}
44
{{ define "main" }}

‎layouts/downloads/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{ define "head" }}
1+
{{ define "preloads" }}
22
<link rel="dns-prefetch" href="https://github.com">
33
{{ end }}
44
{{ define "main" }}

‎layouts/hub/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div class="w-full lg:w-3/5">
88
<div class="flex items-center mb-4">
9-
<img src="/img/logo.svg" class="h-8" alt="Logo"/>
9+
<img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
1010
<span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR&nbsp;HUB</span>
1111
</div>
1212
<h1 class="font-headline font-medium text-3xl md:text-4xl leading-tight mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>

‎layouts/index.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
{{ define "head" }}
1+
{{ define "preloads" }}
22
<link rel="prerender" href="{{ "/downloads" | absLangURL }}">
3+
<link rel="preload" fetchpriority="high" as="image" href="img/home/header-background.avif" type="image/avif">
4+
<link rel="preload" fetchpriority="high" as="image" href="img/home/woman-cloud.png" type="image/png">
5+
<link rel="preload" fetchpriority="auto" href="/fonts/opensans-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
6+
<link rel="preload" fetchpriority="auto" href="/fonts/opensans-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
7+
<link rel="preload" fetchpriority="auto" href="/fonts/opensans-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
8+
<link rel="preload" fetchpriority="auto" href="/fonts/quicksand-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9+
<link rel="preload" fetchpriority="auto" href="/fonts/quicksand-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10+
<link rel="preload" fetchpriority="high" href="/fonts/quicksand-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
311
{{ end }}
412
{{ define "main" }}
513
<section class="flex items-center header-bg bg-dark bg-center min-vh-66 bg-repeat-x">
@@ -36,7 +44,7 @@ <h2 id="get-started" class="text-center font-headline font-medium text-xl md:tex
3644
<div class="flex justify-between items-center p-4 border-b border-primary">
3745
<h3>
3846
<div class="flex items-center">
39-
<img src="/img/logo.svg" class="hidden md:block h-8 mr-2" alt="Logo"/>
47+
<img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
4048
<span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
4149
</div>
4250
</h3>
@@ -74,7 +82,7 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
7482
<div class="flex justify-between items-center p-4 border-b border-primary">
7583
<h3>
7684
<div class="flex items-center">
77-
<img src="/img/logo.svg" class="hidden md:block h-8 mr-2" alt="Logo"/>
85+
<img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
7886
<span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
7987
</div>
8088
</h3>

0 commit comments

Comments
 (0)