miom.space/_includes/homepage.vto

40 lines
1.4 KiB
Plaintext
Raw Normal View History

{{ layout 'default.vto' }}
<main class="mi-main mi-cards">
<div class="mi-logo">
<picture>
<source media="(max-width: 500px)" srcset="/img/logo-500.jpg" />
<source media="(min-width: 501px) and (max-width: 700px)" srcset="/img/logo-700.jpg" />
<source media="(min-width: 701px) and (max-width: 799px)" srcset="/img/logo-1000.jpg" />
<source media="(min-width: 800px) and (max-width: 1400)" srcset="/img/logo-500.jpg" />
<source media="(min-width: 1401px) and (max-width: 1899px)" srcset="/img/logo-700.jpg" />
<source media="(min-width: 1900px)" srcset="/img/logo-1000.jpg" />
<img class="mi-logo--img" src="/img/logo-500.jpg" alt="MiOM Logo" />
</picture>
</div>
<div class="mi-tagline">
{{ tagline |> md |> safe }}
</div>
{{ for card of cards }}
<a
class="mi-card"
href="{{ card.link }}"
>
<picture>
<source media="(max-width: 500px)" srcset="/img/home-{{ card.image.url }}-500.jpg" />
<source media="(min-width: 501px)" srcset="/img/home-{{ card.image.url }}-700.jpg" />
<img
class="mi-card--background"
src="/img/home-{{ card.image.url }}-500.jpg"
alt="{{ card.image.alt }}"
/>
</picture>
<div class="mi-card--text">{{ card.text }}</div>
</a>
{{ /for }}
</main>
<div class="mi-page-filler"></div>
{{ /layout }}