app/template/default/Special/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set breadcrumbs = [ {'name': 'SPECIAL'}] %}
  5. {% block main %}
  6.     <section class="px-6 pb-10 pt-[7.5rem] md:pt-20 md:pb-1 text-black">
  7.         <div class="mx-auto w-full max-w-[63rem]">
  8.             <h1 class="flex items-start gap-4 md:gap-2">
  9.                 <span class="block h-[7.5rem] w-0.5 bg-gradient-to-b from-[#ADAAA6] md:h-16 md:w-px"></span>
  10.                 <p class="text-[2rem] font-light leading-normal tracking-widest md:text-xl">
  11.                     SPECIAL</p>
  12.             </h1>
  13.         </div>
  14.     </section>
  15.     {{ include('Block/breadcrumb.twig') }}
  16.     <section class="px-6">
  17.         <div class="mx-auto w-full max-w-[63rem]">
  18.             <ul class="flex flex-wrap gap-2" role="navigation">
  19.                 <li>
  20.                     <a class="grid place-items-center rounded-3xl bg-sub-beige-pale px-4 py-1 text-sm leading-normal tracking-widest text-black hover
  21.                     {% if not category_id %}!bg-sub-beige text-white{% endif %}" href="{{ url('special_posts') }}">
  22.                         ALL
  23.                     </a>
  24.                 </li>
  25.                 {% for category in special_posts.categories %}
  26.                 <li>
  27.                     <a class="grid place-items-center rounded-3xl bg-sub-beige-pale px-4 py-1 text-sm leading-normal tracking-widest text-black hover
  28.                     {% if category_id == category.term_id %}!bg-sub-beige text-white{% endif %}" href="{{ url('special_posts', { category: category.term_id }) }}">
  29.                         {{ category.name }}
  30.                     </a>
  31.                 </li>
  32.                 {% endfor %}
  33.             </ul>
  34.         </div>
  35.     </section>
  36.     <section class="pt-20 md:pt-10 px-6 pb-[7.5rem] md:pb-20 text-black">
  37.         <div class="mx-auto w-full max-w-[46rem]">
  38.             <div class="grid grid-cols-2 gap-x-20 gap-y-28 md:grid-cols-1 md:gap-10">
  39.                 {% for post in special_posts.posts %}
  40.                     <a href="{{ url('special_post', { id: post.id }) }}" class=" border-b border-black pb-4 hover">
  41.                         <article class="grid">
  42.                             <h2 class="mt-4 line-clamp-2 text-base font-medium leading-[1.8] text-black h-[2lh]">
  43.                                 <span class="sr-only">タイトル：</span>
  44.                                 {{ post.title }}</h2>
  45.                             <div class="flex flex-wrap gap-2 row-start-2 row-end-3 mt-4 text-sm leading-normal tracking-wider text-black">
  46.                                 {% for category in post.categories %}
  47.                                 <span>{{ category.name }}</span>
  48.                                 {% endfor %}
  49.                             </div>
  50.                             <time datetime="{{ post.post_date|date('Y-m-d') }}" class="mt-7 text-right text-sm tracking-wider text-black">
  51.                                 <span class="sr-only">投稿日：</span>
  52.                                 {{ post.post_date|date('Y.m.d') }}</time>
  53.                             <div class="row-start-1 row-end-2 aspect-[4/3] "><img alt="{{ post.title }}" loading="lazy" width="327" height="245" decoding="async" data-nimg="1" class="size-full object-cover" style="color:transparent" src="{{ post.special_kv_pc.url }}"></div>
  54.                         </article>
  55.                     </a>
  56.                 {% endfor %}
  57.             </div>
  58.             <div class="ec-pagerRole">
  59.                 {% include "pager.twig" with {'pages': special_posts.paginationData} %}
  60.             </div>
  61.         </div>
  62.     </section>
  63. {% endblock %}