`sections/natural-wallcoverings.liquid`

78 lines
{%- comment -%}
  Natural Wallcoverings — 4 category squares (Grasscloth, Paperweave, Sisal, Mica).
  Horizontal row of squares on desktop; 2-up on mobile. Editable via blocks;
  ships with high-end fallback imagery so it renders correctly on install.
{%- endcomment -%}
{%- liquid
  assign rid = section.id
  assign fb_img = 'https://cdn.shopify.com/s/files/1/0015/4117/7456/files/5002800-1.jpg,https://cdn.shopify.com/s/files/1/0015/4117/7456/products/79afbadaeacc2b2228b00e232f1e84dc.jpg,https://cdn.shopify.com/s/files/1/0015/4117/7456/products/dce4bafa8834f67c25990248c6743eb3.jpg,https://cdn.shopify.com/s/files/1/0015/4117/7456/products/86c999e57ca94ffa6d42d7b55020cc1c.jpg' | split: ','
-%}
<style>
  .nw-{{ rid }}{ padding:64px 24px; text-align:center; background:{{ section.settings.bg }}; }
  .nw-{{ rid }} .nw-eyebrow{ font-size:12px; letter-spacing:2.5px; color:{{ section.settings.accent }}; font-weight:600; margin:0 0 10px; }
  .nw-{{ rid }} h2{ font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:clamp(26px,3.4vw,38px); color:{{ section.settings.heading_color }}; margin:0 0 32px; }
  .nw-{{ rid }} .nw-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1280px; margin:0 auto; }
  .nw-{{ rid }} .nw-sq{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:6px; isolation:isolate; }
  .nw-{{ rid }} .nw-sq img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .nw-{{ rid }} .nw-sq:hover img{ transform:scale(1.05); }
  .nw-{{ rid }} .nw-sq::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.05),rgba(30,25,18,.6)); }
  .nw-{{ rid }} .nw-sq .lbl{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px; color:#fff;
    font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:clamp(17px,1.6vw,22px); letter-spacing:.3px; }
  @media(max-width:749px){
    .nw-{{ rid }}{ padding:44px 16px; }
    .nw-{{ rid }} .nw-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  }
</style>
<section class="nw-{{ rid }}">
  {%- if section.settings.eyebrow != blank -%}<p class="nw-eyebrow">{{ section.settings.eyebrow }}</p>{%- endif -%}
  <h2>{{ section.settings.title }}</h2>
  <div class="nw-grid">
    {%- for block in section.blocks -%}
      {%- assign img = block.settings.image | image_url: width: 800 -%}
      {%- if block.settings.image == blank -%}{%- assign img = fb_img[forloop.index0] | default: fb_img.first -%}{%- endif -%}
      <a class="nw-sq" href="{{ block.settings.link | default: '#' }}" {{ block.shopify_attributes }}>
        <img src="{{ img }}" alt="{{ block.settings.label }}" loading="lazy">
        <span class="lbl">{{ block.settings.label }}</span>
      </a>
    {%- endfor -%}
  </div>
</section>

{% schema %}
{
  "name": "Natural Wallcoverings",
  "tag": "section",
  "class": "section-natural-wallcoverings",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "THE NATURALS" },
    { "type": "text", "id": "title", "label": "Heading", "default": "Natural Wallcoverings" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#f6f2ea" },
    { "type": "color", "id": "heading_color", "label": "Heading color", "default": "#26241f" },
    { "type": "color", "id": "accent", "label": "Eyebrow accent", "default": "#a9773f" }
  ],
  "blocks": [
    {
      "type": "category",
      "name": "Category square",
      "settings": [
        { "type": "text", "id": "label", "label": "Label", "default": "Grasscloth" },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "image_picker", "id": "image", "label": "Image (high-end line only)" }
      ]
    }
  ],
  "max_blocks": 8,
  "presets": [
    {
      "name": "Natural Wallcoverings",
      "blocks": [
        { "type": "category", "settings": { "label": "Grasscloth", "link": "/collections/grasscloth" } },
        { "type": "category", "settings": { "label": "Paperweave", "link": "/search?q=paperweave" } },
        { "type": "category", "settings": { "label": "Sisal", "link": "/collections/sisal" } },
        { "type": "category", "settings": { "label": "Mica", "link": "/collections/mica" } }
      ]
    }
  ]
}
{% endschema %}