-
Notifications
You must be signed in to change notification settings - Fork 101
Expand file tree
/
Copy pathheader.html
More file actions
110 lines (104 loc) · 6.07 KB
/
header.html
File metadata and controls
110 lines (104 loc) · 6.07 KB
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
<header class="s-topbar stacks-topbar ps-fixed h64 js-stacks-topbar print:d-none">
<div class="s-topbar--container px8">
<a href="#" class="s-topbar--menu-btn d-none md:d-flex js-hamburger-btn"><span></span></a>
<a class="s-topbar--logo" href="{{ "/" | url }}">
<span class="v-visible-sr">Stacks home</span>
{% icon "LogoGlyphMd", "native" %}
</a>
{% if site-navigation %}
<ul class="s-navigation ml8 fw-nowrap sm:d-none">
{% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
{% for section in site-navigation.sections %}
{% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
<li><a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}">{{ section.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
<ol class="s-topbar--content sm:ml0 overflow-hidden">
<li>
<a class="s-topbar--item sm:d-none" title="Stack Overflow" href="https://stackoverflow.com">
{% icon "LogoGlyphSm" %}
</a>
</li>
<li>
<a class="s-topbar--item" title="Stacks on GitHub" href="https://github.com/StackExchange/Stacks">
{% icon "GitHub", "", "24" %}
</a>
</li>
<li>
<a class="s-topbar--item" title="Stacks Template on Codepen" href="https://codepen.io/pen?template=VwvKygL">
<svg aria-hidden="true" class="svg-icon iconCodepen" width="24" height="24" viewBox="0 0 18 18"><path d="M12.67 8.17l-2.98-2v-3.2l5.38 3.6-2.4 1.6zM13.9 9l1.73-1.15v2.3L13.9 9zm-4.2 2.82l2.98-2 2.4 1.62-5.38 3.59v-3.2zm-4.36-2l2.98 2v3.2l-5.38-3.58 2.4-1.61zM4.1 9l-1.73 1.15v-2.3L4.1 9zm4.2-2.82l-2.98 2-2.4-1.62L8.3 2.97v3.2zm.7 4.45L6.57 9 9 7.37 11.43 9 9 10.63zm7.99-4.19l-.01-.05-.01-.04-.02-.05-.02-.03a.6.6 0 0 0-.02-.05l-.02-.03a.69.69 0 0 0-.15-.17L16.7 6h-.02L9.4 1.11a.69.69 0 0 0-.77 0L1.3 5.99h-.02c0 .02-.02.02-.03.03a.81.81 0 0 0-.12.13.69.69 0 0 0-.03.04l-.02.03-.02.05-.02.03-.02.05v.04L1 6.44v.03a.7.7 0 0 0-.01.1v4.87a.7.7 0 0 0 0 .09l.01.03.01.05.01.04.02.05.02.03a.51.51 0 0 0 .07.12.53.53 0 0 0 .08.1c.02 0 .03.02.04.03l.03.02h.02l7.3 4.88a.69.69 0 0 0 .77 0l7.31-4.87h.02c0-.02.02-.02.03-.03a.72.72 0 0 0 .04-.04l.02-.02a.62.62 0 0 0 .13-.19l.02-.03a.6.6 0 0 0 .02-.05v-.04l.02-.05v-.03a.7.7 0 0 0 .01-.1V6.57a.7.7 0 0 0 0-.09l-.01-.03z"/></svg>
</a>
</li>
</ol>
<div class="s-topbar--searchbar w100 wmx3 sm:wmx-initial js-search">
<div class="s-topbar--searchbar--input-group">
<input
id="searchbox"
type="text"
placeholder="Search Stacks…"
value=""
autocomplete="off"
class="s-input s-input__search"
data-controller="s-keyboard-shortcut"
data-s-keyboard-shortcut-ctrl-value="true"
data-s-keyboard-shortcut-key-value="/"
/>
{% icon "Search", "s-input-icon s-input-icon__search" %}
</div>
</div>
<ol class="s-topbar--content ml0 sm:fl1 overflow-hidden">
<li class="d-none sm:d-inline-flex ml-auto">
<button class="s-topbar--item s-btn__unset c-pointer p8 ml-auto js-search-btn">
{% icon "Search", "js-search-icon" %}
{% icon "Clear", "d-none js-search-close-icon" %}
</button>
</li>
<li>
<button type="button" class="s-topbar--item s-btn__unset c-pointer stacks-theme-button"
aria-controls="theming-popover"
data-controller="s-popover"
data-action="s-popover#toggle"
data-s-popover-toggle-class="is-selected"
data-s-popover-placement="bottom-end"
title="Select a theme">
{% icon "Theme", "", "24" %}
</button>
</li>
</ol>
<div class="s-popover w-auto wmn-initial wmx-initial"
id="theming-popover"
role="menu">
<div class="s-popover--arrow"></div>
<div class="d-flex fd-column gs12 gsy">
<div class="flex--item">
<div class="d-flex ai-center jc-space-between gs8">
<label class="flex--item s-label fs-body1 fw-normal" for="toggle-theme-dark">Dark mode</label>
<div class="flex--item s-toggle-switch">
<input id="toggle-theme-dark" type="checkbox">
<div class="s-toggle-switch--indicator"></div>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex ai-center jc-space-between gs8">
<label class="flex--item s-label fs-body1 fw-normal" for="toggle-theme-custom">Custom theme</label>
<div class="flex--item s-toggle-switch">
<input id="toggle-theme-custom" type="checkbox">
<div class="s-toggle-switch--indicator"></div>
</div>
</div>
</div>
<div class="flex--item">
<div class="d-flex ai-center jc-space-between gs8">
<label class="flex--item s-label fs-body1 fw-normal js-highcontrast-btn" for="toggle-theme-highcontrast">High contrast mode</label>
<div class="flex--item s-toggle-switch">
<input id="toggle-theme-highcontrast" type="checkbox">
<div class="s-toggle-switch--indicator"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>