kimili

toggle-section {
  display: block;

  --heading-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --heading-font-size: 2rem;
  --primary-color: #222;
}

toggle-section[role="region"] {
  border-top: 2px solid #ddd;

kimili

class ToggleSection extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.render();

    this.btn.addEventListener('click', () => {
      this.setAttribute('open', this.getAttribute('open') === 'true' ? 'false' : 'true');

kimili

const CardHelper = {
  init(selector = '.card') {
    this.card = null;
    this.link = null;
    this.mousedowntime = 0;
    this.selector = selector;

    const body = document.querySelector('body');

    body.addEventListener('mousedown', this.handleCardMouseDown.bind(this));

kimili

const Countdown = {
  init() {
    this.container = document.querySelector('.countdown');
    if ( !this.container || !this.container.dataset.targetDate ) {
      return;
    }
    this.parts = {
      days: document.querySelector('.countdown__part--days'),
      hours: document.querySelector('.countdown__part--hours'),
      minutes: document.querySelector('.countdown__part--minutes'),

kimili

{% set image = snapshot.asset.one() %}

<article class="snapshot snapshot--card">
  <header class="snapshot__header">
     <h3 class="snapshot__title visually-hidden">
        <a href="{{ snapshot.url }}" data-target="overlay" data-overlay-full-width="true">{{ snapshot.title }}</a>
     </h3>
    <p class="snapshot__author">{{ snapshot.author }}</p>
    <p class="snapshot__location">{{ snapshot.geography.one() }}</p>
  </header>

kimili

const compact = arr => arr.filter(Boolean);
compact([1, false, 2, '', 3, null, 'abc']); // [1, 2, 3, 'abc']