27 lines
1.4 KiB
HTML
27 lines
1.4 KiB
HTML
|
{% extends "_base" %}
|
||
|
|
{% block main %}
|
||
|
|
<h1>Services</h1>
|
||
|
|
<div class="flex flex-row flex-wrap place-content-center place-items-center">
|
||
|
|
{% for service in services %}
|
||
|
|
<a href="https://{{ service.domain }}/"
|
||
|
|
class="flex flex-col basis-11/12 md:basis-5/12 xl:basis-3/12 rounded-lg p-4 m-4 h-60 hover:scale-105 transition bg-surface dark:bg-surface-dark border hover:border-2 border-base-dark dark:border-surface-dark hover:border-surface-dark dark:hover:border-surface">
|
||
|
|
<div class="flex flex-row flex-center basis-1/3">
|
||
|
|
<img src="/assets/images/{{ service.name | lower }}.png" alt="{{ service.name }} logo"
|
||
|
|
class="w-16 dark:hidden">
|
||
|
|
<img src="/assets/images/{{ service.name | lower }}-dark.png" alt="{{ service.name }} logo"
|
||
|
|
class="w-16 hidden dark:inline-block">
|
||
|
|
<div class="flex flex-col justify-center ml-4">
|
||
|
|
<h3>{{ service.name }}</h3>
|
||
|
|
<p class="text-subtle dark:text-subtle-dark">{{ service.domain }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="mt-4 basis-1/3">{{ service.description }}</p>
|
||
|
|
<div class="flex flex-row items-end basis-1/3">
|
||
|
|
<button class="rounded-lg h-7 px-4 text-center text-text-dark bg-overlay dark:bg-overlay-dark"><i
|
||
|
|
class="fa-solid fa-code"></i> {{ service.language }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|