archives.html

<main class="main" id="main" tabindex="-1">
  <div class="content">
    <h1 class="separation separation--primary">
      Archives
    </h1>
    <p>Revoir et explorer les éditions précédentes de Paris Web, plus de 350 conférences à (re)découvrir !</p>
    <form id="search-filters" action="/pages/archives/" method="get">
      <div class="form-oneline form-oneline--inline">
        <div class="form-oneline__field form-field">
          <div class="form-field__label">
            <label for="search">Terme de recherche</label>
          </div>
          <div class="form-field__input" id="searchbox">
            <input type="text" id="search" placeholder="mot-clés, orateur/oratrice, tags, année, &hellip;" />
            <button class="filter__clear" type="button" id="clearSearch" hidden>
              <svg class="icon icon--close" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 15 15" role="img" aria-label="Supprimer la recherche en cours">
                <path fill="#000" d="M7.5 9.397l-4.94 5.145c-.585.61-1.535.61-2.12 0a1.609 1.609 0 0 1 0-2.21L5.078 7.5.439 2.667a1.609 1.609 0 0 1 0-2.21 1.458 1.458 0 0 1 2.122 0L7.5 5.604 12.44.458a1.458 1.458 0 0 1 2.12 0c.586.61.586 1.6 0 2.21L9.922 7.5l4.64 4.833c.585.61.585 1.6 0 2.21-.586.61-1.536.61-2.122 0L7.5 9.396z" />
              </svg>
            </button>
          </div>
        </div>
        <div class="form-oneline__action">
          <button class="btn" type="submit">Rechercher</button>
        </div>
      </div>
    </form>
    <div class="filters filters--oneline js-visible" hidden>
      <p class="filters__title">Filtres</p>
      <ul class="filters__list">
        <li class="filter" id="themes"></li>
        <li class="filter" id="duration"></li>
        <li class="filter" id="year"></li>
      </ul>
    </div>
    <div id="hits-count">Il y a eu 34 résultats</div>
    <div id="hits" class="presentation-grid">
      <section class="presentation-preview">
        <div class="presentation-preview__media thumbnail">
          <a href="/pages/presentation-archive" class="presentation-preview__link">
            <img class="thumbnail__media" src="https://i.vimeocdn.com/filter/overlay?src0=https://i.vimeocdn.com/video/732320900_640.jpg&amp;src1=http://f.vimeocdn.com/p/images/crawler_play.png" />
            <span class="thumbnail__description">
              <span class="thumbnail__date">2017</span>
              <span class="thumbnail__duration"><time datetime="30m 0s">30 <abbr title="minutes">min.</abbr></time></span>
            </span>
          </a>
        </div>
        <div class="presentation-preview__content">
          <h3 class="h4-like"><a class="discreet" href="/pages/presentation-archive">Je prends en main ma vie numérique… et c&#39;est pas si facile !</a></h3>
          <div>
            <a class="discreet" href="/pages/presentation-archive">Delphine Malassingne</a></div>
          <div>
            <dl class="presentation-services">
              <dd><abbr title="Langue des Signes Française">LSF</abbr></dd>
              <dd>Français</dd>
              <dd><abbr title="sous-titré">S‑T</abbr>&nbsp;Français</dd>
            </dl>
          </div>
        </div>
      </section>
    </div>
    <div id="pagination">
      <ul class="pagination">
        <li class="pagination__item pagination__item--disabled">
          <span aria-label="Première page">&lt;&lt;</span>
        </li>
        <li class="pagination__item pagination__item--disabled">
          <span>
            <span aria-hidden="true">&lt;</span>
            Précédent
          </span>
        </li>
        <li class="pagination__item pagination__item--active">
          <a href="#1" aria-current="page">1</a>
        </li>
        <li class="pagination__item"><a href="#2">2</a></li>
        <li class="pagination__item"><a href="#3">3</a></li>
        <li class="pagination__item"><span>…</span></li>
        <li class="pagination__item"><a href="#10">10</a></li>
        <li class="pagination__item"><a href="#11">11</a></li>
        <li class="pagination__item">
          <a href="#next" rel="next">
            Suivant
            <span aria-hidden="true">&gt;</span>
          </a>
        </li>
        <li class="pagination__item">
          <a href="#end">
            <span aria-label="Dernière page">&gt;&gt;</span>
          </a>
        </li>
      </ul>
    </div>
    <p class="align-right js-visible" hidden>
      <small id="powered-by-algolia"></small>
    </p>
  </div>
  <script src="/archives.js"></script>
</main>