mxmehl/mehl.mx
1
0
Fork 0
Code Issues 3 Pull Requests Actions Releases Wiki Activity

add CSS-only navbar

Browse Source
This commit is contained in:
max.mehl
2019-10-20 15:40:06 +02:00
parent c4e9633f49
commit ac0d9506d4
4 changed files with 285 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
themes/hugo-sustain/layouts/partials/head.html
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>

27
themes/hugo-sustain/layouts/partials/header.html
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>

8
themes/hugo-sustain/static/css/custom.css
View File

@@ -53,10 +53,6 @@ div.avatar img {
-webkit-box-shadow: none;
}
ul.nav li.active a {
font-weight: bold;
}
/* Site specific settings */
section#about p {
font-size: 18px;
@@ -87,10 +83,10 @@ div.contact p {
.metadata-page {
font-size: 18px;
text-align: left;
margin: 3em 0 1em 0;
margin: 3em 0 2em 0;
}
.metadata-page .row {
padding-bottom: .5em;
padding-bottom: 0;
}
.blog-summary {
padding-bottom: 1em;

264
themes/hugo-sustain/static/css/luxbar.css Normal file
View File

@@ -0,0 +1,264 @@
/*
* SPDX-FileCopyrightLicense: 2017 Balazs Saros
* SPDX-FileCopyrightLicense: 2019 Max Mehl
* SPDX-License-Identifier: MIT
*/
.luxbar-default {
width: 100%;
position: relative;
margin-bottom: 10px;
}
.luxbar-static {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
width: 100%;
position: absolute;
top: 0;
left: 0
}
.luxbar-static .luxbar-checkbox:checked ~ .luxbar-menu {
position: absolute
}
.luxbar-fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
}
.luxbar-fixed-bottom {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
}
.luxbar-hamburger span,
.luxbar-hamburger span::before,
.luxbar-hamburger span::after {
display: block;
height: 2px;
width: 26px;
transition: 0.6s ease
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
background-color: transparent
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before,
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
margin-top: 0
}
.luxbar-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 58px
}
.luxbar-menu-left .luxbar-navigation,
.luxbar-menu-left .luxbar-header {
justify-content: flex-start
}
.luxbar-menu-right .luxbar-hamburger {
margin-left: auto
}
.luxbar-brand {
font-size: 1.5em;
padding: 18px 24px 18px 24px
}
.luxbar-menu {
min-height: 58px;
transition: 0.6s ease;
width: auto;
max-width: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.luxbar-navigation {
display: flex;
flex-direction: column;
list-style: none;
padding-left: 0;
margin: 0
}
.luxbar-menu a,
.luxbar-item a {
text-decoration: none;
color: #6b6b6b;
cursor: pointer;
font-size: 16px;
}
.luxbar-item {
height: 58px
}
.luxbar-item a {
padding: 18px 20px 18px 20px;
display: block
}
.luxbar-hamburger {
padding: 18px 24px 18px 24px;
position: relative;
cursor: pointer
}
.luxbar-hamburger span::before,
.luxbar-hamburger span::after {
content: '';
position: absolute
}
.luxbar-hamburger span::before {
margin-top: -8px
}
.luxbar-hamburger span::after {
margin-top: 8px
}
.luxbar-checkbox {
display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
overflow: hidden;
height: 58px
}
.luxbar-checkbox:checked ~ .luxbar-menu {
transition: height 0.6s ease;
height: 50vh;
overflow: auto
}
.dropdown {
position: relative;
height: auto;
min-height: 58px
}
.dropdown:hover>ul {
position: relative;
display: block;
min-width: 100%
}
.dropdown>a::after {
position: absolute;
content: '';
right: 10px;
top: 25px;
border-width: 5px 5px 0;
border-color: transparent;
border-style: solid
}
.dropdown>ul {
display: block;
overflow-x: hidden;
list-style: none;
padding: 0
}
.dropdown>ul .luxbar-item {
min-width: 100%;
height: 29px;
padding: 5px 10px 5px 40px
}
.dropdown>ul .luxbar-item a {
min-height: 29px;
line-height: 29px;
padding: 0
}
@media screen and (min-width: 768px) {
.luxbar-navigation {
flex-flow: row;
justify-content: flex-end
}
.luxbar-hamburger {
display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
overflow: visible
}
.luxbar-checkbox:checked ~ .luxbar-menu {
height: 58px
}
.luxbar-menu .luxbar-item {
border-top: 0
}
.luxbar-menu-right .luxbar-header {
margin-right: auto
}
.dropdown {
height: 58px
}
.dropdown:hover>ul {
position: absolute;
left: 0;
top: 58px;
padding: 0
}
.dropdown>ul {
display: none
}
.dropdown>ul .luxbar-item {
padding: 5px 10px
}
.dropdown>ul .luxbar-item a {
white-space: nowrap
}
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before {
transform: rotate(225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after {
transform: rotate(-225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::before {
transform: rotate(45deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::after {
transform: rotate(-45deg)
}
.luxbar-menu-light,
.luxbar-menu-light .dropdown ul {
background-color: transparent;
color: #212121
}
.luxbar-menu-light .active {
font-weight: 700;
}
.luxbar-menu-light .luxbar-hamburger span,
.luxbar-menu-light .luxbar-hamburger span::before,
.luxbar-menu-light .luxbar-hamburger span::after {
background-color: #212121
}