Skip to content

Commit

Permalink
fixed page jumps due to lazyloading
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobihagemann
tobihagemann committed Jul 19, 2024
1 parent 0a10460 commit dda072d
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 16 deletions.
8 changes: 4 additions & 4 deletions content/_index.de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
</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" 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>
Expand Down Expand Up @@ -59,7 +59,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
</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" 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>
Expand All @@ -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" 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>
Expand All @@ -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" 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>
Expand Down
8 changes: 4 additions & 4 deletions content/_index.en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h2>Take the security of your data into your own hands</h2>
</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" alt="Person holding the key to a very secure vault"/>
<img data-src="/img/home/man-vault.png" class="lazyload aspect-[768/533] w-full" alt="Person holding the key to a very secure vault"/>
</figure>
</div>
</article>
Expand Down Expand Up @@ -59,7 +59,7 @@ <h2>How does Cryptomator protect your data?</h2>
</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" alt="Person sitting in front of a laptop while Cryptobot next to the person is pointing at the laptop"/>
<img data-src="/img/home/woman-laptop.png" class="lazyload aspect-[768/431] w-full" alt="Person sitting in front of a laptop while Cryptobot next to the person is pointing at the laptop"/>
</figure>
</div>
</article>
Expand All @@ -69,7 +69,7 @@ <h2>How does Cryptomator protect your data?</h2>
<article class="prose prose-sm md:prose max-w-none md:max-w-none">
<h2>Optimal protection thanks to the latest technology standards</h2>
<figure class="mx-auto md:w-5/6 lg:w-2/3">
<img data-src="/img/home/split-screenshots.png" class="lazyload" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
<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"/>
<figcaption>If someone looks into the folder in your cloud, they cannot draw any conclusions about your data.</figcaption>
</figure>
</article>
Expand All @@ -88,7 +88,7 @@ <h3>GDPR-compliant synchronization with your entire team via the cloud</h3>
<p>When using Cryptomator and a cloud service with an appropriate DPA, you can <a href="/gdpr/">synchronize data GDPR-compliant</a> over the cloud with an entire team.</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" alt="Two people joyfully jumping around their giant smartphone running a trustworthy app"/>
<img data-src="/img/home/people-phone.png" class="lazyload aspect-[768/683] w-full" alt="Two people joyfully jumping around their giant smartphone running a trustworthy app"/>
</figure>
</div>
</article>
Expand Down
16 changes: 8 additions & 8 deletions layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<section class="flex items-center header-bg bg-dark bg-center min-vh-66 bg-repeat-x">
<header class="container flex items-center text-white py-24 md:py-48 lg:py-64">
<div class="hidden pr-6 md:block md:w-1/3 lg:w-2/5">
<img data-src="/img/home/woman-cloud.png" class="lazyload object-scale-down mx-auto lg:w-3/4 animate-hover" alt="{{ i18n "home_header_woman_cloud_alt" . }}"/>
<img data-src="/img/home/woman-cloud.png" class="lazyload aspect-[714/622] w-full object-scale-down mx-auto lg:w-3/4 animate-hover" alt="{{ i18n "home_header_woman_cloud_alt" . }}"/>
</div>
<div class="w-full md:w-2/3 lg:w-3/5">
<h1 class="font-headline font-medium text-3xl md:text-4xl leading-tight mb-6">{{ i18n "home_header_title" . | safeHTML }}</h1>
Expand Down Expand Up @@ -125,16 +125,16 @@ <h2 id="newsletter" class="font-headline font-medium text-xl md:text-2xl leading
<h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-8 md:mb-12 lg:mb-16">{{ i18n "home_trustingbrands_title" . }}</h2>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:w-3/4 lg:w-2/3 mx-auto">
<a href="{{ .Site.LanguagePrefix }}/coop/webde/">
<img class="inline-block h-20 lazyload" data-src="/img/home/3rdparty/webde-logo.svg" alt="WEB.DE Logo"/>
<img class="inline-block h-20 lazyload aspect-square" data-src="/img/home/3rdparty/webde-logo.svg" alt="WEB.DE Logo"/>
</a>
<a href="{{ .Site.LanguagePrefix }}/coop/gmx/">
<img class="inline-block h-20 lazyload" data-src="/img/home/3rdparty/gmx-logo.svg" alt="GMX Logo"/>
<img class="inline-block h-20 lazyload aspect-[123/80]" data-src="/img/home/3rdparty/gmx-logo.svg" alt="GMX Logo"/>
</a>
<a href="{{ .Site.LanguagePrefix }}/coop/1und1/">
<img class="inline-block h-20 lazyload" data-src="/img/home/3rdparty/1und1-logo.png" alt="1&amp;1 Logo"/>
<img class="inline-block h-20 lazyload aspect-square" data-src="/img/home/3rdparty/1und1-logo.png" alt="1&amp;1 Logo"/>
</a>
<a class="md:col-span-3" href="https://connect2id.com/blog/deterministic-encryption-with-aes-siv" target="_blank" rel="noopener">
<img class="inline-block h-20 lazyload" data-src="/img/home/3rdparty/connect2id-logo.svg" alt="connect2id Logo"/>
<img class="inline-block h-20 lazyload aspect-[412/88]" data-src="/img/home/3rdparty/connect2id-logo.svg" alt="connect2id Logo"/>
</a>
</div>
</section>
Expand All @@ -143,7 +143,7 @@ <h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-8 md:mb
<h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-8 md:mb-12 lg:mb-16">{{ i18n "home_sponsors_title" . }}</h2>
<div class="grid grid-cols-1 md:grid-cols-1 gap-8 md:w-3/4 lg:w-2/3 mb-8 md:mb-12 lg:mb-16 mx-auto">
<a href="https://www.gee-whiz.de/" target="_blank" rel="noopener">
<img class="inline-block h-20 lazyload" data-src="/img/sponsors/geewhiz.svg" alt="gee-whiz Logo"/>
<img class="inline-block h-20 lazyload aspect-[613/163]" data-src="/img/sponsors/geewhiz.svg" alt="gee-whiz Logo"/>
</a>
</div>
<a href="{{ .Site.LanguagePrefix }}/sponsors/" role="button" class="btn btn-outline-secondary px-8">
Expand All @@ -166,7 +166,7 @@ <h2 class="font-headline font-medium text-xl md:text-2xl leading-snug text-cente
<div class="flex justify-between mb-4">
<div class="flex items-start">
<a class="flex-shrink-0 w-12 lg:w-16" href="{{ .ProfileURL }}" target="_blank" rel="noopener">
<img data-src="{{ .Image }}" class="lazyload object-contain rounded-lg border border-secondary" alt="{{ i18n "home_testimonials_image_alt" . }} {{ .TwitterHandle }}"/>
<img data-src="{{ .Image }}" class="lazyload aspect-square w-full object-contain rounded-lg border border-secondary" alt="{{ i18n "home_testimonials_image_alt" . }} {{ .TwitterHandle }}"/>
</a>
<a class="text-white px-3 hover:text-secondary hover:no-underline" href="{{ .ProfileURL }}" target="_blank" rel="noopener">
<p class="font-headline lg:text-xl">{{ .Name }}</p>
Expand Down Expand Up @@ -208,7 +208,7 @@ <h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-8 md:mb
<section class="container text-center pt-12 md:pt-16 lg:pt-20 pb-24 md:pb-32 lg:pb-40">
<figure>
<a href="https://web.archive.org/web/20190525164100id_/https://www.cebitaward.de/de/sonderpreis-cryptomator-1759.html" target="_blank" rel="noopener">
<img class="lazyload inline-block mb-6" data-src="/img/home/3rdparty/cebit-award.png" data-srcset="/img/home/3rdparty/cebit-award.png 1x, /img/home/3rdparty/cebit-award@2x.png 2x" alt="CeBIT Innovation Award 2016">
<img class="lazyload aspect-[512/340] h-[170px] inline-block mb-6" data-src="/img/home/3rdparty/cebit-award.png" data-srcset="/img/home/3rdparty/cebit-award.png 1x, /img/home/3rdparty/cebit-award@2x.png 2x" alt="CeBIT Innovation Award 2016">
</a>
<figcaption>
<h2 class="font-headline font-medium text-xl md:text-2xl leading-snug mb-1">{{ i18n "home_cebit_title" . }}</h2>
Expand Down

0 comments on commit dda072d

Please sign in to comment.