trnck.dev
blog.trnck.dev
1{% if topic.web_url %}
2 <a href="{{ topic.web_url }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
3 {% if topic.image_url %}
4 <img src="{{ topic.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ topic.name }}">
5 {% else %}
6 <div
7 class="bg-blue-light f4 text-gray-light text-bold rounded-1 flex-shrink-0 text-center mx-auto mb-3"
8 style="width:64px; height:64px; line-height:64px;"
9 >
10 #
11 </div>
12 {% endif %}
13 <p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">{{ topic.name }}</p>
14 {% if topic.description %}
15 <p class="f5 text-gray text-center mb-0 mt-1">{{ topic.description }}</p>
16 {% endif %}
17 </a>
18{% else %}
19 <div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
20 {% if topic.image_url %}
21 <img src="{{ topic.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ topic.name }}">
22 {% else %}
23 <div
24 class="bg-blue-light f4 text-gray-light text-bold rounded-1 flex-shrink-0 text-center mx-auto mb-3"
25 style="width:64px; height:64px; line-height:64px;"
26 >
27 #
28 </div>
29 {% endif %}
30 <p class="f3 lh-condensed text-center mb-0 mt-1">{{ topic.name }}</p>
31 {% if topic.description %}
32 <p class="f5 text-gray text-center mb-0 mt-1">{{ topic.description }}</p>
33 {% endif %}
34 </div>
35{% endif %}