Browse Source

add CSS-only navbar

max.mehl 5 months ago
parent
commit
ac0d9506d4
No account linked to committer's email address

+ 8
- 13
themes/hugo-sustain/layouts/partials/head.html View File

@@ -9,23 +9,18 @@
9 9
     {{ with .Site.Params.keywords }}<meta name="description" content="{{ . }}" />{{ end }}
10 10
     <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}img/favicon.ico" />
11 11
     <title>
12
-    {{- if .IsHome -}}
13
-        {{- .Site.Title -}}
14
-    {{- else -}}
15
-        {{- if .Params.heading -}} {{- .Params.heading -}} {{- else -}} {{- .Site.Title -}} {{ print " | " }} {{- .Title -}} {{- end -}}
16
-    {{- end -}}
17
-	</title>
18
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap-3.3.7.min.css" />
12
+      {{- if .IsHome -}}
13
+          {{- .Site.Title -}}
14
+      {{- else -}}
15
+          {{- if .Params.heading -}} {{- .Params.heading -}} {{- else -}} {{- .Site.Title -}} {{ print " | " }} {{- .Title -}} {{- end -}}
16
+      {{- end -}}
17
+    </title>
18
+    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/bootstrap-3.3.7.min.css" />
19 19
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/main.css" />
20
+    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/luxbar.css" />
20 21
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fontawesome/css/all.min.css" />
21 22
     <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/fonts.css" />
22 23
     {{ range .Site.Params.custom_css }}
23 24
     <link rel="stylesheet" href="{{ $.Site.BaseURL}}{{ . }}?v={{ md5 hugo.BuildDate }}" />
24 25
     {{ end }}
25
-    {{ `<!--[if lt IE 9]>
26
-			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
27
-			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
28
-		<![endif]-->` | safeHTML }}
29
-
30
-    {{ template "_internal/google_analytics.html" . }}
31 26
   </head>

+ 11
- 16
themes/hugo-sustain/layouts/partials/header.html View File

@@ -1,23 +1,18 @@
1
-<nav class="navbar navbar-default">
2
-  <div class="container">
3
-    <div class="navbar-header">
4
-      <a class="navbar-brand" href="/"><i class="fa fa-home"></i></a>
5
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
6
-        <span class="icon-bar"></span>
7
-        <span class="icon-bar"></span>
8
-        <span class="icon-bar"></span>
9
-      </button>
10
-    </div>
11
-    <div class="navbar-collapse collapse" id="navbar">
12
-      <ul class="nav navbar-nav navbar-right">
1
+<header id="luxbar" class="luxbar-default">
2
+  <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
3
+  <div class="luxbar-menu luxbar-menu-right luxbar-menu-light">
4
+    <ul class="luxbar-navigation">
5
+      <li class="luxbar-header">
6
+        <a href="/" class="luxbar-brand"><i class="fa fa-home"></i></a>
7
+        <label class="luxbar-hamburger luxbar-hamburger-spin" id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
8
+      </li>
13 9
       {{- $rel := .RelPermalink -}}
14 10
       {{- if .Site.Menus.main -}}
15 11
         {{- range sort .Site.Menus.main -}}
16 12
         <!-- if RelPermalink = this menu item, mark it -->
17
-        <li class="{{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
13
+        <li class="luxbar-item {{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
18 14
         {{- end -}}
19 15
       {{ end }}
20
-      </ul>
21
-    </div>
16
+    </ul>
22 17
   </div>
23
-</nav>
18
+</header>

+ 2
- 6
themes/hugo-sustain/static/css/custom.css View File

@@ -53,10 +53,6 @@ div.avatar img {
53 53
   -webkit-box-shadow: none;
54 54
 }
55 55
 
56
-ul.nav li.active a {
57
-  font-weight: bold;
58
-}
59
-
60 56
 /* Site specific settings */
61 57
 section#about p {
62 58
   font-size: 18px;
@@ -87,10 +83,10 @@ div.contact p {
87 83
 .metadata-page {
88 84
   font-size: 18px;
89 85
   text-align: left;
90
-  margin: 3em 0 1em 0;
86
+  margin: 3em 0 2em 0;
91 87
 }
92 88
 .metadata-page .row {
93
-  padding-bottom: .5em;
89
+  padding-bottom: 0;
94 90
 }
95 91
 .blog-summary {
96 92
   padding-bottom: 1em;

+ 264
- 0
themes/hugo-sustain/static/css/luxbar.css View File

@@ -0,0 +1,264 @@
1
+/*
2
+ * SPDX-FileCopyrightLicense: 2017 Balazs Saros
3
+ * SPDX-FileCopyrightLicense: 2019 Max Mehl
4
+ * SPDX-License-Identifier: MIT
5
+*/
6
+
7
+.luxbar-default {
8
+  width: 100%;
9
+  position: relative;
10
+  margin-bottom: 10px;
11
+}
12
+
13
+.luxbar-static {
14
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
15
+  width: 100%;
16
+  position: absolute;
17
+  top: 0;
18
+  left: 0
19
+}
20
+
21
+.luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
22
+  position: absolute
23
+}
24
+
25
+.luxbar-fixed {
26
+  width: 100%;
27
+  position: fixed;
28
+  top: 0;
29
+  left: 0;
30
+  z-index: 1000;
31
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
32
+}
33
+
34
+.luxbar-fixed-bottom {
35
+  width: 100%;
36
+  position: fixed;
37
+  bottom: 0;
38
+  left: 0;
39
+  z-index: 1000;
40
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
41
+}
42
+
43
+.luxbar-hamburger span,
44
+.luxbar-hamburger span::before,
45
+.luxbar-hamburger span::after {
46
+  display: block;
47
+  height: 2px;
48
+  width: 26px;
49
+  transition: 0.6s ease
50
+}
51
+
52
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
53
+  background-color: transparent
54
+}
55
+
56
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before,
57
+.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
58
+  margin-top: 0
59
+}
60
+
61
+.luxbar-header {
62
+  display: flex;
63
+  flex-direction: row;
64
+  justify-content: space-between;
65
+  align-items: center;
66
+  height: 58px
67
+}
68
+
69
+.luxbar-menu-left .luxbar-navigation,
70
+.luxbar-menu-left .luxbar-header {
71
+  justify-content: flex-start
72
+}
73
+
74
+.luxbar-menu-right .luxbar-hamburger {
75
+  margin-left: auto
76
+}
77
+
78
+.luxbar-brand {
79
+  font-size: 1.5em;
80
+  padding: 18px 24px 18px 24px
81
+}
82
+
83
+.luxbar-menu {
84
+  min-height: 58px;
85
+  transition: 0.6s ease;
86
+  width: auto;
87
+  max-width: 800px;
88
+  text-align: center;
89
+  margin-left: auto;
90
+  margin-right: auto;
91
+}
92
+
93
+.luxbar-navigation {
94
+  display: flex;
95
+  flex-direction: column;
96
+  list-style: none;
97
+  padding-left: 0;
98
+  margin: 0
99
+}
100
+
101
+.luxbar-menu a,
102
+.luxbar-item a {
103
+  text-decoration: none;
104
+  color: #6b6b6b;
105
+  cursor: pointer;
106
+  font-size: 16px;
107
+}
108
+
109
+.luxbar-item {
110
+  height: 58px
111
+}
112
+
113
+.luxbar-item a {
114
+  padding: 18px 20px 18px 20px;
115
+  display: block
116
+}
117
+
118
+.luxbar-hamburger {
119
+  padding: 18px 24px 18px 24px;
120
+  position: relative;
121
+  cursor: pointer
122
+}
123
+
124
+.luxbar-hamburger span::before,
125
+.luxbar-hamburger span::after {
126
+  content: '';
127
+  position: absolute
128
+}
129
+
130
+.luxbar-hamburger span::before {
131
+  margin-top: -8px
132
+}
133
+
134
+.luxbar-hamburger span::after {
135
+  margin-top: 8px
136
+}
137
+
138
+.luxbar-checkbox {
139
+  display: none
140
+}
141
+
142
+.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
143
+  overflow: hidden;
144
+  height: 58px
145
+}
146
+
147
+.luxbar-checkbox:checked ~ .luxbar-menu {
148
+  transition: height 0.6s ease;
149
+  height: 50vh;
150
+  overflow: auto
151
+}
152
+
153
+.dropdown {
154
+  position: relative;
155
+  height: auto;
156
+  min-height: 58px
157
+}
158
+
159
+.dropdown:hover>ul {
160
+  position: relative;
161
+  display: block;
162
+  min-width: 100%
163
+}
164
+
165
+.dropdown>a::after {
166
+  position: absolute;
167
+  content: '';
168
+  right: 10px;
169
+  top: 25px;
170
+  border-width: 5px 5px 0;
171
+  border-color: transparent;
172
+  border-style: solid
173
+}
174
+
175
+.dropdown>ul {
176
+  display: block;
177
+  overflow-x: hidden;
178
+  list-style: none;
179
+  padding: 0
180
+}
181
+
182
+.dropdown>ul .luxbar-item {
183
+  min-width: 100%;
184
+  height: 29px;
185
+  padding: 5px 10px 5px 40px
186
+}
187
+
188
+.dropdown>ul .luxbar-item a {
189
+  min-height: 29px;
190
+  line-height: 29px;
191
+  padding: 0
192
+}
193
+
194
+@media screen and (min-width: 768px) {
195
+  .luxbar-navigation {
196
+      flex-flow: row;
197
+      justify-content: flex-end
198
+  }
199
+  .luxbar-hamburger {
200
+      display: none
201
+  }
202
+  .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
203
+      overflow: visible
204
+  }
205
+  .luxbar-checkbox:checked ~ .luxbar-menu {
206
+      height: 58px
207
+  }
208
+  .luxbar-menu .luxbar-item {
209
+      border-top: 0
210
+  }
211
+  .luxbar-menu-right .luxbar-header {
212
+      margin-right: auto
213
+  }
214
+  .dropdown {
215
+      height: 58px
216
+  }
217
+  .dropdown:hover>ul {
218
+      position: absolute;
219
+      left: 0;
220
+      top: 58px;
221
+      padding: 0
222
+  }
223
+  .dropdown>ul {
224
+      display: none
225
+  }
226
+  .dropdown>ul .luxbar-item {
227
+      padding: 5px 10px
228
+  }
229
+  .dropdown>ul .luxbar-item a {
230
+      white-space: nowrap
231
+  }
232
+}
233
+
234
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before {
235
+  transform: rotate(225deg)
236
+}
237
+
238
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after {
239
+  transform: rotate(-225deg)
240
+}
241
+
242
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::before {
243
+  transform: rotate(45deg)
244
+}
245
+
246
+.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::after {
247
+  transform: rotate(-45deg)
248
+}
249
+
250
+.luxbar-menu-light,
251
+.luxbar-menu-light .dropdown ul {
252
+  background-color: transparent;
253
+  color: #212121
254
+}
255
+
256
+.luxbar-menu-light .active {
257
+  font-weight: 700;
258
+}
259
+
260
+.luxbar-menu-light .luxbar-hamburger span,
261
+.luxbar-menu-light .luxbar-hamburger span::before,
262
+.luxbar-menu-light .luxbar-hamburger span::after {
263
+  background-color: #212121
264
+}

Loading…
Cancel
Save