<section id="journal-feed-{{ section.id }}" class="gbj-journal-section">
  <div class="gbj-journal-shell">
    <header class="gbj-journal-header">
      <div>
        {% if section.settings.kicker != blank %}
          <p class="gbj-journal-kicker">{{ section.settings.kicker }}</p>
        {% endif %}
        {% if section.settings.heading != blank %}
          <h1 class="gbj-journal-heading">{{ section.settings.heading }}</h1>
        {% endif %}
      </div>

      {% if section.settings.badge_text != blank %}
        <span class="gbj-journal-badge">{{ section.settings.badge_text }}</span>
      {% endif %}
    </header>

    {% if section.settings.intro != blank %}
      <div class="gbj-journal-intro rte">
        {{ section.settings.intro }}
      </div>
    {% endif %}

    {% if section.blocks.size > 0 %}
      <div class="gbj-journal-grid">
        {% for block in section.blocks %}
          {% assign cta_label = block.settings.cta_label %}
          {% if cta_label == blank %}
            {% case block.settings.post_type %}
              {% when 'article' %}
                {% assign cta_label = 'Read publication' %}
              {% when 'blog' %}
                {% assign cta_label = 'Read article' %}
              {% else %}
                {% assign cta_label = 'View update' %}
            {% endcase %}
          {% endif %}

          <article class="gbj-journal-card" {{ block.shopify_attributes }}>
            {% if block.settings.image != blank %}
              <a
                {% if block.settings.link != blank %}
                  href="{{ block.settings.link }}"
                {% else %}
                  role="link" aria-disabled="true"
                {% endif %}
                class="gbj-journal-image-link"
                {% if block.settings.link != blank %}target="_blank" rel="noopener noreferrer"{% endif %}
              >
                {{
                  block.settings.image
                  | image_url: width: 1200
                  | image_tag:
                    class: 'gbj-journal-image',
                    loading: 'lazy',
                    widths: '360, 540, 720, 900, 1200',
                    sizes: '(min-width: 990px) calc((100vw - 96px)/2), 100vw',
                    alt: block.settings.image_alt
                }}
              </a>
            {% endif %}

            <div class="gbj-journal-content">
              <div class="gbj-journal-meta">
                {% if block.settings.source != blank %}
                  <span>{{ block.settings.source }}</span>
                {% endif %}
                {% if block.settings.source != blank and block.settings.date != blank %}
                  <span class="gbj-journal-dot"></span>
                {% endif %}
                {% if block.settings.date != blank %}
                  <time datetime="{{ block.settings.iso_date | escape | default: block.settings.date | escape }}">{{ block.settings.date }}</time>
                {% endif %}
              </div>

              {% if block.settings.title != blank %}
                <h2 class="gbj-journal-title">
                  {% if block.settings.link != blank %}
                    <a href="{{ block.settings.link }}" target="_blank" rel="noopener noreferrer">
                      {{ block.settings.title }}
                    </a>
                  {% else %}
                    {{ block.settings.title }}
                  {% endif %}
                </h2>
              {% endif %}

              {% if block.settings.summary != blank %}
                <div class="gbj-journal-summary rte">
                  {{ block.settings.summary }}
                </div>
              {% endif %}

              {% if block.settings.link != blank %}
                <div class="gbj-journal-footer">
                  <a href="{{ block.settings.link }}" target="_blank" rel="noopener noreferrer" class="gbj-journal-cta">
                    <span>{{ cta_label }}</span>
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M14 5l7 7m0 0l-7 7m7-7H3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"></path>
                    </svg>
                  </a>
                </div>
              {% endif %}
            </div>
          </article>
        {% endfor %}
      </div>
    {% else %}
      <div class="gbj-journal-empty">
        <p>Add entries from the Theme Customizer to populate this journal feed.</p>
      </div>
    {% endif %}
  </div>
</section>

<style>
  #journal-feed-{{ section.id }} {
    --bg: {{ section.settings.bg_color }};
    --surface: {{ section.settings.card_bg }};
    --text: {{ section.settings.text_color }};
    --muted: {{ section.settings.muted_color }};
    --heading: {{ section.settings.heading_color }};
    --border: {{ section.settings.border_color }};
    --accent: {{ section.settings.accent_color }};
    --badge-bg: {{ section.settings.badge_bg }};
    --badge-text: {{ section.settings.badge_text_color }};
    background: var(--bg);
    color: var(--text);
    padding: 56px 0 88px;
  }

  #journal-feed-{{ section.id }} * {
    box-sizing: border-box;
  }

  #journal-feed-{{ section.id }} .gbj-journal-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
  }

  #journal-feed-{{ section.id }} .gbj-journal-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
  }

  #journal-feed-{{ section.id }} .gbj-journal-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
  }

  #journal-feed-{{ section.id }} .gbj-journal-heading {
    margin: 0;
    color: var(--heading);
    font-size: clamp(30px, 5vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  #journal-feed-{{ section.id }} .gbj-journal-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--badge_bg, var(--badge-bg));
    color: var(--badge-text);
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
  }

  #journal-feed-{{ section.id }} .gbj-journal-intro {
    max-width: 760px;
    margin: 0 0 38px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
  }

  #journal-feed-{{ section.id }} .gbj-journal-intro p {
    margin: 0;
  }

  #journal-feed-{{ section.id }} .gbj-journal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 36px;
  }

  #journal-feed-{{ section.id }} .gbj-journal-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }

  #journal-feed-{{ section.id }} .gbj-journal-image-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f3f3f3;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 6px;
    margin-bottom: 22px;
  }

  #journal-feed-{{ section.id }} .gbj-journal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
  }

  #journal-feed-{{ section.id }} .gbj-journal-card:hover .gbj-journal-image {
    transform: scale(1.02);
  }

  #journal-feed-{{ section.id }} .gbj-journal-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  #journal-feed-{{ section.id }} .gbj-journal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
  }

  #journal-feed-{{ section.id }} .gbj-journal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--muted) 60%, transparent);
  }

  #journal-feed-{{ section.id }} .gbj-journal-title {
    margin: 0 0 12px;
    color: var(--heading);
    font-size: clamp(21px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  #journal-feed-{{ section.id }} .gbj-journal-title a {
    color: inherit;
    text-decoration: none;
  }

  #journal-feed-{{ section.id }} .gbj-journal-title a:hover {
    color: color-mix(in srgb, var(--heading) 82%, white);
  }

  #journal-feed-{{ section.id }} .gbj-journal-summary {
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 22px;
  }

  #journal-feed-{{ section.id }} .gbj-journal-summary p {
    margin: 0;
  }

  #journal-feed-{{ section.id }} .gbj-journal-footer {
    margin-top: auto;
  }

  #journal-feed-{{ section.id }} .gbj-journal-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--heading);
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  #journal-feed-{{ section.id }} .gbj-journal-cta:hover {
    opacity: 0.72;
  }

  #journal-feed-{{ section.id }} .gbj-journal-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 180ms ease;
  }

  #journal-feed-{{ section.id }} .gbj-journal-cta:hover svg {
    transform: translateX(2px);
  }

  #journal-feed-{{ section.id }} .gbj-journal-empty {
    padding: 44px 24px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--muted);
  }

  @media screen and (max-width: 989px) {
    #journal-feed-{{ section.id }} .gbj-journal-grid {
      gap: 32px 24px;
    }
  }

  @media screen and (max-width: 749px) {
    #journal-feed-{{ section.id }} {
      padding: 40px 0 64px;
    }

    #journal-feed-{{ section.id }} .gbj-journal-shell {
      padding: 0 16px;
    }

    #journal-feed-{{ section.id }} .gbj-journal-header {
      flex-direction: column;
      align-items: start;
      margin-bottom: 20px;
      padding-bottom: 20px;
    }

    #journal-feed-{{ section.id }} .gbj-journal-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    #journal-feed-{{ section.id }} .gbj-journal-title {
      font-size: 24px;
    }
  }
</style>

{% schema %}
{
  "name": "GBJ Journal Feed",
  "settings": [
    {
      "type": "text",
      "id": "kicker",
      "label": "Kicker",
      "default": "Press & Updates"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "GEHNABOX Journal"
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge text",
      "default": "Live Broadcast"
    },
    {
      "type": "richtext",
      "id": "intro",
      "label": "Intro text",
      "default": "<p>Explore new launches, editorial stories, jewellery trends, and brand milestones from GEHNABOX.</p>"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#fcfcfc"
    },
    {
      "type": "color",
      "id": "card_bg",
      "label": "Card background",
      "default": "#fcfcfc"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Body text color",
      "default": "#4a4a4a"
    },
    {
      "type": "color",
      "id": "muted_color",
      "label": "Muted text color",
      "default": "#8a8a8a"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#e5e5e5"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent color",
      "default": "#b08d57"
    },
    {
      "type": "color",
      "id": "badge_bg",
      "label": "Badge background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge text color",
      "default": "#666666"
    }
  ],
  "blocks": [
    {
      "type": "entry",
      "name": "Journal entry",
      "settings": [
        {
          "type": "select",
          "id": "post_type",
          "label": "Entry type",
          "options": [
            { "value": "article", "label": "External publication" },
            { "value": "blog", "label": "Blog post" },
            { "value": "update", "label": "Company update" }
          ],
          "default": "blog"
        },
        {
          "type": "text",
          "id": "source",
          "label": "Source name",
          "default": "GBJ Journal"
        },
        {
          "type": "text",
          "id": "date",
          "label": "Display date",
          "default": "July 28, 2026"
        },
        {
          "type": "text",
          "id": "iso_date",
          "label": "Optional ISO date",
          "info": "Example: 2026-07-28"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "How Independent Jewellery Retail Is Evolving With Digital Storytelling"
        },
        {
          "type": "richtext",
          "id": "summary",
          "label": "Summary",
          "default": "<p>A new editorial note on how modern jewellery brands can blend trust, design, and commerce across retail, content, and customer experience touchpoints.</p>"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "cta_label",
          "label": "Custom CTA label",
          "info": "Leave blank to use the automatic label."
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "image_alt",
          "label": "Image alt text",
          "default": "GEHNABOX journal entry image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "GBJ Journal Feed",
      "blocks": [
        {
          "type": "entry"
        }
      ]
    }
  ]
}
{% endschema %}

 

BACK TO TOP