dark mode logos, lazy loading

This commit is contained in:
Pascal Engélibert
2023-05-12 10:19:07 +02:00
parent 1c4dcec274
commit d18ea59651
11 changed files with 193 additions and 104 deletions

View File

@ -21,8 +21,8 @@
<header>
<a href="/">
<picture>
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)" />
<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/>
<img decoding="async" id="header-logo" src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
</picture>
<h1 class="sr-only">Librezo</h1>

View File

@ -1,7 +1,17 @@
<div class="client_box">
<div class="client_box-left">
<div class="client_box-left-row">
<a class="client_box-link" href="{{href|safe}}"><img class="client_box-img" src="{{img|safe}}" alt="{{title}}" title="{{title}}"/></a>
<a class="client_box-link" href="{{href|safe}}">
{% if img_dark %}
<picture>
<source srcset="{{img_dark|safe}}" media="(prefers-color-scheme: dark)"/>
<source srcset="{{img|safe}}" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/>
<img class="client_box-img" decoding="async" src="{{img|safe}}" alt="{{title}}" title="{{title}}" loading="lazy"/>
</picture>
{% else %}
<img class="client_box-img" src="{{img|safe}}" alt="{{title}}" title="{{title}}" loading="lazy"/>
{% endif %}
</a>
</div>
</div>
<div class="client_box-right">

View File

@ -1 +1 @@
<a class="partner_box-link" href="{{url|safe}}" title="{{title}}"><img class="partner_box-img" src="{{img|safe}}" alt="{{title}}"/></a>
<a class="partner_box-link" href="{{url|safe}}" title="{{title}}"><img class="partner_box-img" src="{{img|safe}}" alt="{{title}}" loading="lazy"/></a>

View File

@ -1,6 +1,6 @@
<div class="team_box">
<div class="team_box-top">
<img class="team_box-img" src="/img/team/{{img|safe}}" alt="{{title}}" aria-hidden/>
<img class="team_box-img" src="/img/team/{{img|safe}}" alt="{{title}}" loading="lazy" aria-hidden/>
<div class="team_box-text">
<span class="team_box-title">{{title|safe}}</span>
{% if subtitle %}