toolbox/src-11ty/_includes/product-overview.html at ca84d93718f99db757127b0a7d323b4fd8182eed · OpenHomeFoundation/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
---
layout: base.html
---
<div class="details-page">
  <div class="details-container">
    <a href="/" class="back-button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
      </svg>
      Back to Home
    </a>

    <div class="details-layout">
      <div class="details-hero">
        <h1 class="details-hero-title">{{ productTitle }}</h1>
        <p class="details-hero-subtitle">{{ productSubtitle }}</p>

        {{ content | safe }}
      </div>

      <div class="details-actions">
        {%- for action in actions %}
        {% if action.section_header %}
          <div class="action-section-header">{{ action.section_header }}</div>
        {% endif %}
        {% set external = action.href.startsWith('http') %}
        {% if action.tag_open %}
          {{ action.tag_open | safe }}
        {% else %}
          <a href="{{ action.href }}" class="action-item"{% if external %} target="_blank" rel="noopener noreferrer"{% endif %}>
        {% endif %}
          <div class="action-icon">
            <div class="icon-mask" style="--icon-url: url('{{ action.icon }}')"></div>
          </div>
          <div class="action-content">
            <h3>{{ action.title }}</h3>
            <p>
              {%- if action.experimental %}<span class="experimental">Experimental.</span> {% endif -%}
              {{ action.description }}
            </p>
          </div>
          <div class="action-trailing">
            {%- if external %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
            </svg>
            {%- else %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon">
              <path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>
            </svg>
            {%- endif %}
          </div>
        {% if action.tag_close %}
          {{ action.tag_close | safe }}
        {% else %}
          </a>
        {% endif %}
        {%- endfor %}
      </div>
    </div>
  </div>
</div>