mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-01-18 19:00:24 +00:00
theme: rework header UX #151
This commit is contained in:
Sören Weber
parent
ff06a8ad41
commit
6f35177349
6 changed files with 73 additions and 112 deletions
|
|
@ -1,9 +1,4 @@
|
|||
{{- partial "header.html" . }}
|
||||
<span id="sidebar-toggle-span">
|
||||
<a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}' data-sidebar-toggle="">
|
||||
<i class="fas fa-bars"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
{{if .Site.Home.Content }}
|
||||
{{.Site.Home.Content}}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,6 @@
|
|||
</main><!-- #body-inner -->
|
||||
{{- partial "custom-comments.html" . }}
|
||||
</div>
|
||||
<div id="navigation">
|
||||
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
|
||||
{{- if $showPrevNext }}
|
||||
{{- with ($.Scratch.Get "relearnPrevPage") }}
|
||||
<a class="nav nav-prev default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left"></i></a>
|
||||
{{- end}}
|
||||
{{- with ($.Scratch.Get "relearnNextPage") }}
|
||||
<a class="nav nav-next default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right"></i></a>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</div><!-- #body -->
|
||||
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
|
||||
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
|
||||
|
|
|
|||
|
|
@ -29,15 +29,35 @@
|
|||
<div id="body" class="default-animation">
|
||||
<div id="overlay"></div>
|
||||
<div class="padding highlightable">
|
||||
{{- if not .IsHome }}
|
||||
<div id="top-bar"><div>
|
||||
{{- if and (or .IsPage .IsSection) .Site.Params.editURL }}
|
||||
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
|
||||
{{- if $showPrevNext }}
|
||||
<div class="navigation">
|
||||
{{- if ($.Scratch.Get "relearnNextPage") }}
|
||||
{{- with ($.Scratch.Get "relearnNextPage") }}
|
||||
<a class="nav nav-next" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right fa-fw"></i></a>
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
<span class="nav nav-next"><i class="fa fa-chevron-right fa-fw"></i></span>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="navigation">
|
||||
{{- if ($.Scratch.Get "relearnPrevPage") }}
|
||||
{{- with ($.Scratch.Get "relearnPrevPage") }}
|
||||
<a class="nav nav-prev" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left fa-fw"></i></a>
|
||||
{{- end}}
|
||||
{{- else }}
|
||||
<span class="nav nav-prev"><i class="fa fa-chevron-left fa-fw"></i></span>
|
||||
{{- end}}
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- if .Site.Params.editURL }}
|
||||
{{- $File := .File }}
|
||||
{{- $Site := .Site }}
|
||||
{{- with $File.Path }}
|
||||
<div id="top-github-link">
|
||||
<a class="github-link" title='{{ T "Edit-this-page" }}' href="{{ $Site.Params.editURL }}{{ replace $File.Dir "\\" "/" }}{{ $File.LogicalName }}" target="blank">
|
||||
<i class="fas fa-pencil"></i>
|
||||
<i class="fas fa-pencil fa-fw"></i>
|
||||
</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
@ -49,11 +69,11 @@
|
|||
<div id="breadcrumbs">
|
||||
<span id="sidebar-toggle-span">
|
||||
<a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}' data-sidebar-toggle="">
|
||||
<i class="fas fa-bars"></i>
|
||||
<i class="fas fa-bars fa-fw"></i>
|
||||
</a>
|
||||
</span>
|
||||
{{- if $toc }}
|
||||
<span id="toc-menu"><i class="fas fa-list-alt"></i></span>
|
||||
<span id="toc-menu"><i class="fas fa-list-alt fa-fw"></i></span>
|
||||
{{- end }}
|
||||
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
|
||||
{{- if $showBreadcrumb }}
|
||||
|
|
@ -71,7 +91,6 @@
|
|||
{{- partial "toc.html" . }}
|
||||
{{- end }}
|
||||
</div></div>
|
||||
{{- end }}
|
||||
<div id="head-tags">
|
||||
{{- partial "tags.html" . }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ pre {
|
|||
padding-left: 0; /* for print, we want to align with the footer to ease the layout */
|
||||
color: #777;
|
||||
}
|
||||
.navigation,
|
||||
#top-github-link {
|
||||
/* we don't need this while printing */
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -353,17 +353,22 @@ th {
|
|||
}
|
||||
|
||||
#body .padding {
|
||||
padding: 3rem 6rem;
|
||||
padding: 0;
|
||||
}
|
||||
#body-inner {
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
}
|
||||
@media only all and (max-width: 59.938em) {
|
||||
#body .padding {
|
||||
position: static;
|
||||
padding: 15px 3rem;
|
||||
}
|
||||
#body-inner {
|
||||
padding: 0 2rem 15px 2rem;
|
||||
}
|
||||
}
|
||||
@media only all and (max-width: 47.938em) {
|
||||
#body .padding {
|
||||
padding: 5px 1rem;
|
||||
#body-inner {
|
||||
padding: 0 1rem 5px 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -372,60 +377,6 @@ th {
|
|||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
@media only all and (max-width: 59.938em) {
|
||||
#body #navigation {
|
||||
display: table;
|
||||
margin-right: 0 !important;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#body .nav {
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
display: table;
|
||||
font-size: 50px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 4rem;
|
||||
}
|
||||
#body .nav > i {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media only all and (max-width: 59.938em) {
|
||||
#body .nav {
|
||||
display: table-cell;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
padding-top: 0;
|
||||
position: static;
|
||||
text-align: center;
|
||||
top: auto;
|
||||
width: 50%;
|
||||
}
|
||||
#body .nav > i {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#body .nav:hover {
|
||||
background-color: rgba( 134, 134, 134, .066 );
|
||||
}
|
||||
|
||||
#body .nav.nav-pref {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#body .nav.nav-next {
|
||||
margin-right: 0px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* we limit width if we have large screens */
|
||||
@media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
|
||||
#body #body-inner {
|
||||
|
|
@ -935,27 +886,40 @@ td {
|
|||
|
||||
#top-bar > div {
|
||||
background-color: rgba( 134, 134, 134, .066 );
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#top-bar.is-sticky {
|
||||
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
|
||||
}
|
||||
|
||||
.navigation,
|
||||
#top-github-link {
|
||||
display: block;
|
||||
float: right;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#top-github-link,
|
||||
#body #breadcrumbs {
|
||||
.nav,
|
||||
.github-link {
|
||||
border-left: thin solid rgba( 134, 134, 134, .333 );
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
span.nav i{
|
||||
color: rgba( 134, 134, 134, .333 );
|
||||
}
|
||||
|
||||
.navigation,
|
||||
#top-github-link {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#toc-menu,
|
||||
#sidebar-toggle-span {
|
||||
border-right: thin solid rgba( 134, 134, 134, .333 );
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#body #breadcrumbs {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -963,29 +927,33 @@ td {
|
|||
line-height: 1.4;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
white-space: nowrap;
|
||||
width: 70%;
|
||||
width: calc(100% - 4*3.25rem);
|
||||
}
|
||||
|
||||
#sidebar-toggle-span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
@media only all and (max-width: 47.938em) {
|
||||
#sidebar-toggle-span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
#body #breadcrumbs span {
|
||||
padding: 0 0.1rem;
|
||||
.progress {
|
||||
left: 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
#body #breadcrumbs .links {
|
||||
display: inline;
|
||||
padding: 0 0.1rem;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
#body #breadcrumbs .links * {
|
||||
|
|
@ -1042,7 +1010,7 @@ a[aria-disabled="true"] {
|
|||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1224,6 +1192,7 @@ option {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#body .navigation a.highlight:after,
|
||||
#body #sidebar-toggle-span a.highlight:after,
|
||||
#body #top-github-link a.highlight:after {
|
||||
background-color: transparent;
|
||||
|
|
@ -1262,18 +1231,6 @@ option {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
#toc-menu {
|
||||
border-right: thin solid rgba( 134, 134, 134, .333 );
|
||||
margin-right: 0.5rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
#sidebar-toggle-span {
|
||||
border-right: thin solid rgba( 134, 134, 134, .333 );
|
||||
margin-right: 1rem !important;
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-image: none !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
|
|
|||
|
|
@ -375,10 +375,10 @@ jQuery(function() {
|
|||
|
||||
// allow keyboard control for prev/next links
|
||||
jQuery(function() {
|
||||
jQuery('.nav-prev').click(function(){
|
||||
jQuery('a.nav-prev').click(function(){
|
||||
location.href = jQuery(this).attr('href');
|
||||
});
|
||||
jQuery('.nav-next').click(function() {
|
||||
jQuery('a.nav-next').click(function() {
|
||||
location.href = jQuery(this).attr('href');
|
||||
});
|
||||
});
|
||||
|
|
@ -393,12 +393,12 @@ jQuery(function() {
|
|||
jQuery(document).keydown(function(e) {
|
||||
// prev links - left arrow key
|
||||
if(e.which == '37') {
|
||||
jQuery('.nav.nav-prev').click();
|
||||
jQuery('a.nav-prev').click();
|
||||
}
|
||||
|
||||
// next links - right arrow key
|
||||
if(e.which == '39') {
|
||||
jQuery('.nav.nav-next').click();
|
||||
jQuery('a.nav-next').click();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue