bulma/docs/_includes/global/header.html at 29236624b9947c98178a840cdd5b773548959365 · jgthms/bulma · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<header class="bd-header">
  <a class="bulma-logo" href="{{ site.url }}/">
    {% include svg/bulma-logo.html %}
  </a>

  <nav id="js-nav" class="bd-nav">
    {% for link_id in site.data.links.navbar %} {% include global/nav-item.html
    link_id=link_id %} {% endfor %}

    <div class="bd-nav-icons">
      {% for link_id in site.data.links.navbar_icons %} {% include
      global/nav-item.html link_id=link_id %} {% endfor %}

      <button class="bd-nav-item is-search is-icon">
        <span class="icon">
          <i class="fas fa-search fa-lg"></i>
        </span>
      </button>

      <button
        class="bd-nav-item is-icon is-ellipsis js-burger"
        data-target="js-more"
      >
        <span class="icon">
          <i class="fas fa-ellipsis-h fa-lg"></i>
        </span>
      </button>

      <div id="js-more" class="bd-nav-menu is-more js-menu">
        {% for link_id in site.data.links.navbar_more %} {% include
        global/nav-item.html link_id=link_id %} {% endfor %}
      </div>
    </div>

    <a
      class="button is-primary bd-nav-mobile-download"
      href="{{ site.data.meta.download }}"
    >
      Download
    </a>
  </nav>

  <div class="bd-nav-themes">
    <button id="js-cycle" class="bd-cycle js-burger" data-target="js-themes">
      <div class="bd-cycles">
        <div class="bd-cycle-sun">
          <span class="icon">
            <i class="fas fa-lg fa-sun" aria-hidden="true"></i>
          </span>
        </div>

        <div class="bd-cycle-moon">
          <span class="icon">
            <i class="fas fa-lg fa-moon" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </button>

    <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
      <button
        data-scheme="light"
        class="bd-nav-item is-sun"
        aria-label="Light mode"
      >
        <span class="icon">
          <i class="fas fa-sun" aria-hidden="true"></i>
        </span>
        <span>Light</span>
      </button>

      <button
        data-scheme="dark"
        class="bd-nav-item is-moon"
        aria-label="Dark mode"
      >
        <span class="icon">
          <i class="fas fa-moon" aria-hidden="true"></i>
        </span>
        <span>Dark</span>
      </button>

      <button
        data-scheme="system"
        class="bd-nav-item is-system"
        aria-label="System mode"
      >
        <span class="icon">
          <i class="fas fa-desktop" aria-hidden="true"></i>
        </span>
        <span>System</span>
      </button>
    </div>
  </div>

    <div class="bd-nav-search bg">
      <button class="bd-nav-item is-search-desktop js-burger bd-nav-search-trigger" data-target="js-search" >
        <span class="bd-search-pill">
          <span class="icon">
            <i class="fas fa-search fa-lg"></i>
          </span>

          <span class="bd-nav-item-name">Ctrl K</span>
        </span>
      </button>

      <div id="js-search" class="bd-nav-menu is-search js-menu">
        <input id="algoliaSearch" class="input" type="text" placeholder="Search" />
      </div>
    </div>

    <a class="button is-primary bd-nav-desktop-download" href="{{ site.data.meta.download }}">
     Download
    </a>

  <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </button>
</header>