8 Ide Outfit Smart Casual Wanita Hijab, OOTD Makin Stylish!

<!-- Main Blog Section - Buttonscarves Style -->
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}

<style>
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
  
  /* Custom Blog Grid Styles */
  .blog-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
  
  @media screen and (min-width: 750px) {
    .blog-articles {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (min-width: 990px) {
    .blog-articles {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  .blog-articles__article {
    width: 100%;
  }
  
  .article-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
  }
  
  .article-card__image-wrapper {
    position: relative;
    width: 100%;
    {% if section.settings.image_height == 'small' %}
      aspect-ratio: 2/1;
    {% elsif section.settings.image_height == 'medium' %}
      aspect-ratio: 16/10;
    {% else %}
      aspect-ratio: 4/3;
    {% endif %}
    overflow: hidden;
  }
  
  .article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .article-card:hover .article-card__image img {
    transform: scale(1.05);
  }
  
  .card__content {
    padding: 20px 0 0 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .article-card__info {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 8px;
  }
  
  .card__heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    flex-grow: 1;
  }
  
  .card__heading a {
    color: #333;
    text-decoration: none;
    display: block;
  }
  
  .card__heading a:hover {
    color: #000;
  }
  
  .title--primary {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    color: #333;
    text-align: center;
  }
  
  @media screen and (min-width: 750px) {
    .card__heading {
      font-size: 20px;
    }
    
    .title--primary {
      font-size: 40px;
    }
  }
</style>

<div class="main-blog page-width section-{{ section.id }}-padding">
  <!-- Blog Title -->
  <h1 class="title--primary">
    {{ blog.title }}
  </h1>

  <!-- Blog Articles Grid -->
  <div class="blog-articles">
    {% for article in blog.articles %}
      <div class="blog-articles__article article">
        <div class="article-card-wrapper card-wrapper">
          <article class="card article-card card--standard card--media">
            
            <!-- Article Image -->
            {% if section.settings.show_image and article.image %}
              <div class="article-card__image-wrapper card__media">
                <div class="article-card__image media">
                  <img
                    srcset="
                      {{ article.image | image_url: width: 165 }} 165w,
                      {{ article.image | image_url: width: 360 }} 360w,
                      {{ article.image | image_url: width: 533 }} 533w,
                      {{ article.image | image_url: width: 720 }} 720w,
                      {{ article.image | image_url: width: 1000 }} 1000w,
                      {{ article.image | image_url }} {{ article.image.width }}w
                    "
                    src="{{ article.image | image_url: width: 533 }}"
                    sizes="(min-width: 1400px) 433px, (min-width: 990px) calc((100vw - 130px) / 3), (min-width: 750px) calc((100vw - 130px) / 2), calc(100vw - 50px)"
                    alt="{{ article.image.alt | escape }}"
                    class="motion-reduce"
                    loading="lazy"
                    width="{{ article.image.width }}"
                    height="{{ article.image.height }}"
                  />
                </div>
              </div>
            {% endif %}

            <!-- Article Content -->
            <div class="card__content">
              <div class="card__information">
                
                <!-- Article Date -->
                {% if section.settings.show_date %}
                  <div class="article-card__info caption-with-letter-spacing h5">
                    <span class="circle-divider">
                      <time datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}">
                        {{ article.published_at | date: '%B %d, %Y' }}
                      </time>
                    </span>
                  </div>
                {% endif %}

                <!-- Article Title -->
                <h3 class="card__heading h3">
                  <a href="{{ article.url }}" class="full-unstyled-link">
                    {{ article.title }}
                  </a>
                </h3>

                <!-- Article Author (Optional) -->
                {% if section.settings.show_author and article.author %}
                  <div class="article-card__info caption-with-letter-spacing h5">
                    <span>By {{ article.author }}</span>
                  </div>
                {% endif %}

              </div>
            </div>
          </article>
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Pagination -->
  {% if paginate.pages > 1 %}
    {{ 'component-pagination.css' | asset_url | stylesheet_tag }}
    <div class="pagination-wrapper" style="margin-top: 50px;">
      <nav class="pagination" role="navigation" aria-label="Pagination">
        <ul class="pagination__list list-unstyled" role="list">
          
          {% if paginate.previous %}
            <li>
              <a href="{{ paginate.previous.url }}" class="pagination__item pagination__item--prev pagination__item-arrow link" aria-label="Previous page">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
                </svg>
              </a>
            </li>
          {% endif %}

          {% for part in paginate.parts %}
            {% if part.is_link %}
              <li>
                <a href="{{ part.url }}" class="pagination__item link" aria-label="Page {{ part.title }}">
                  {{ part.title }}
                </a>
              </li>
            {% else %}
              {% if part.title == paginate.current_page %}
                <li>
                  <span class="pagination__item pagination__item--current light" aria-current="page" aria-label="Page {{ part.title }}">
                    {{ part.title }}
                  </span>
                </li>
              {% else %}
                <li>
                  <span class="pagination__item">{{ part.title }}</span>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}

          {% if paginate.next %}
            <li>
              <a href="{{ paginate.next.url }}" class="pagination__item pagination__item--next pagination__item-arrow link" aria-label="Next page">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
                </svg>
              </a>
            </li>
          {% endif %}

        </ul>
      </nav>
    </div>
  {% endif %}

</div>

{% schema %}
{
  "name": "Blog posts",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "collage", 
          "label": "Collage"
        }
      ],
      "default": "grid",
      "label": "Layout"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "Show featured image"
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium",
      "label": "Image height"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "Show date"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "Show author"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ]
}
{% endschema %}