add CSS-only navbar

This commit is contained in:
2019-10-20 15:40:06 +02:00
parent c4e9633f49
commit ac0d9506d4
4 changed files with 285 additions and 35 deletions

View File

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

View File

@@ -1,23 +1,18 @@
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home"></i></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<header id="luxbar" class="luxbar-default">
<input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
<div class="luxbar-menu luxbar-menu-right luxbar-menu-light">
<ul class="luxbar-navigation">
<li class="luxbar-header">
<a href="/" class="luxbar-brand"><i class="fa fa-home"></i></a>
<label class="luxbar-hamburger luxbar-hamburger-spin" id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
</li>
{{- $rel := .RelPermalink -}}
{{- if .Site.Menus.main -}}
{{- range sort .Site.Menus.main -}}
<!-- if RelPermalink = this menu item, mark it -->
<li class="{{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
<li class="luxbar-item {{if eq $rel .URL}}active{{end}}"><a href="{{ .URL }}">{{ .Name | upper }}</a></li>
{{- end -}}
{{ end }}
</ul>
</div>
</ul>
</div>
</nav>
</header>