Wrap speakers in a section, add ID

This commit is contained in:
Oliver Davies 2019-05-14 23:06:31 +01:00
parent 5a7689c215
commit 933a05e9ab

View file

@ -1,25 +1,27 @@
<h2 class="tw-text-3xl md:tw-text-4xl tw-font-bold tw-mb-10">Featuring Talks From</h2> <section id="speakers">
<h2 class="tw-text-3xl md:tw-text-4xl tw-font-bold tw-mb-10">Featuring Talks From</h2>
<div class="text-left tw-px-12"> <div class="text-left tw-px-12">
<ul class="tw-list-reset tw-flex tw-flex-wrap tw--mx-4 tw--mb-12"> <ul class="tw-list-reset tw-flex tw-flex-wrap tw--mx-4 tw--mb-12">
{% for speaker in speakers %} {% for speaker in speakers %}
<li class="tw-w-full lg:tw-w-1/2 tw-text-left tw-mb-6"> <li class="tw-w-full lg:tw-w-1/2 tw-text-left tw-mb-6">
<a href="{{ speaker.url }}" class="group tw-px-4 tw-flex tw-flex-row-reverse tw-no-underline focus:tw-outline-none"> <a href="{{ speaker.url }}" class="group tw-px-4 tw-flex tw-flex-row-reverse tw-no-underline focus:tw-outline-none">
<span class="tw-flex-1 tw-flex tw-flex-col tw-justify-center"> <span class="tw-flex-1 tw-flex tw-flex-col tw-justify-center">
<span class="tw-block tw-font-bold tw-text-xl tw-text-gray-900 group-hocus:tw-underline">{{ speaker.name }}</span> <span class="tw-block tw-font-bold tw-text-xl tw-text-gray-900 group-hocus:tw-underline">{{ speaker.name }}</span>
<span class="tw-block tw-text-gray-800"> <span class="tw-block tw-text-gray-800">
{{ speaker.role }} {{ speaker.role }}
{%- if speaker.role and speaker.organisation %}, {% endif %} {%- if speaker.role and speaker.organisation %}, {% endif %}
{{ speaker.organisation }} {{ speaker.organisation }}
</span>
</span> </span>
</span> <span class="tw-w-24 md:tw-w-32 tw-mr-6">
<span class="tw-w-24 md:tw-w-32 tw-mr-6"> <span class="tw-rounded-full tw-overflow-hidden tw-block tw-border-4 tw-border-solid tw-border-purple-500 group-hocus:tw-border-pink-500 tw-transition-border tw-transition-100">
<span class="tw-rounded-full tw-overflow-hidden tw-block tw-border-4 tw-border-solid tw-border-purple-500 group-hocus:tw-border-pink-500 tw-transition-border tw-transition-100"> <img class="tw-block tw-w-full" src="/images/speakers/{{ speaker.image }}" alt="Photo of {{ speaker.name }}">
<img class="tw-block tw-w-full" src="/images/speakers/{{ speaker.image }}" alt="Photo of {{ speaker.name }}"> </span>
</span> </span>
</span> </a>
</a> </li>
</li> {% endfor %}
{% endfor %} </ul>
</ul> </div>
</div> </section>