mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-25 15:58:53 +00:00
Move to kebab for secondary/toc menu
This commit is contained in:
Ryan Watters
+2
-2
@@ -59,11 +59,11 @@ watch = true
|
||||
[params]
|
||||
organizationname = ""
|
||||
sitedescription = ""
|
||||
release = "0.20 DEV"
|
||||
release = "0.20"
|
||||
# Add GA Tracking Code Here. This leverages a built-in (ie, "internal") partial from HUGO: https://gohugo.io/extras/analytics#configuring-google-analytics
|
||||
googleanalyticstrackingcode = ""
|
||||
## Critical Render Path. If true, site style will be embedded in a <style> tag in each html <head> as part of Gulp Build. False puts a typical <link> to the stylesheet in <head>>
|
||||
usecrp = true
|
||||
usecrp = false
|
||||
## Twitter handle without the "@"
|
||||
twitterhandle = "GoHugoIO"
|
||||
## Facebook URL
|
||||
|
||||
@@ -7,4 +7,13 @@
|
||||
<!-- From https://buttons.github.io/. -->
|
||||
<!-- <a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a> -->
|
||||
</div>
|
||||
{{ with .Params.toc }}
|
||||
<!-- <a href="#" id="toc-toggle"></a> -->
|
||||
<div id="toc-toggle" class="kebab">
|
||||
<div class="figure"></div>
|
||||
<div class="figure middle"></div>
|
||||
<p class="cross">×</p>
|
||||
<div class="figure"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</header>
|
||||
@@ -1,10 +1,19 @@
|
||||
{{ if not .IsHome }}
|
||||
<a class="navigation-toggle-wrapper" id="navigation-toggle" href="#">
|
||||
<div class="navbutton__wrapper">
|
||||
<a class="trigger" href="#">
|
||||
<ul class="nav__trigger">
|
||||
<li class="nav__trigger-item nav__trigger-item--first"></li>
|
||||
<li class="nav__trigger-item nav__trigger-item--second"></li>
|
||||
<li class="nav__trigger-item nav__trigger-item--third"></li>
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <a class="navigation-toggle-wrapper" id="navigation-toggle" href="#">
|
||||
<div class="top bar"></div>
|
||||
<div class="middle bar"></div>
|
||||
<div class="bottom bar"></div>
|
||||
<h4 class="menu">Menu</h4>
|
||||
</a>
|
||||
</a> -->
|
||||
<nav class="site-navigation" id="site-navigation">
|
||||
<ul class="top-menu">
|
||||
{{$.Scratch.Set "currentsection" $.Section}}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -11,5 +11,4 @@
|
||||
</div>
|
||||
<div class="fade"></div>
|
||||
</aside>
|
||||
<a href="#" id="toc-toggle"></a>
|
||||
{{end}}
|
||||
@@ -33,8 +33,8 @@ gulp.task('scss', function() {
|
||||
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
|
||||
.pipe(prefix('last 2 versions', '> 1%', 'ie 10', 'Android 2', 'Firefox ESR'))
|
||||
.pipe(plumber())
|
||||
.pipe(rename('style-embed.html'))
|
||||
.pipe(gulp.dest('../layouts/partials'))
|
||||
// .pipe(rename('style-embed.html'))
|
||||
// .pipe(gulp.dest('../layouts/partials'))
|
||||
.pipe(rename('style.min.css'))
|
||||
.pipe(gulp.dest('../static/css'));
|
||||
});
|
||||
|
||||
@@ -20,16 +20,25 @@ $('.top-menu-item-link.has-children').on('click', function(evt) {
|
||||
// console.log(siblingLinks);
|
||||
});
|
||||
|
||||
//toggle off-canvas navigation for M- screens
|
||||
$('#navigation-toggle').on('click', function(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
$('#site-navigation,.all-content-wrapper,#navigation-toggle,#site-footer').toggleClass('navigation-open');
|
||||
$(document).ready(function() {
|
||||
$(".trigger").on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
$(".navbutton__wrapper").toggleClass("nav__wrapper--active");
|
||||
$('#site-navigation,.all-content-wrapper,#navigation-toggle,#site-footer').toggleClass('navigation-open');
|
||||
});
|
||||
});
|
||||
|
||||
// //toggle off-canvas navigation for M- screens
|
||||
// $('#navigation-toggle').on('click', function(evt) {
|
||||
|
||||
|
||||
// });
|
||||
//close navigation if body content is clicked when docs are open
|
||||
$('#all-content-wrapper').on('click', function() {
|
||||
if ($('.site-navigation.navigation-open')) {
|
||||
$('.site-navigation.navigation-open,.all-content-wrapper.navigation-open,#navigation-toggle,#site-footer').removeClass('navigation-open');
|
||||
$('.site-navigation.navigation-open,.all-content-wrapper.navigation-open,#site-footer').removeClass('navigation-open');
|
||||
$('.navbutton__wrapper.nav__wrapper--active').removeClass('nav__wrapper--active');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
//removes toc if not enough headings
|
||||
(function() {
|
||||
let tocLinks = document.querySelectorAll('#TableOfContents > ul a'),
|
||||
toc = document.getElementById('toc');
|
||||
if (toc && (tocLinks.length < 2)) {
|
||||
toc.remove();
|
||||
} else if (tocLinks.length > 1) {
|
||||
document.getElementById('toc-toggle').addEventListener('click', toggleToc, false);
|
||||
}
|
||||
})();
|
||||
// //removes toc if not enough headings
|
||||
// (function() {
|
||||
// let tocLinks = document.querySelectorAll('#TableOfContents > ul a'),
|
||||
// toc = document.getElementById('toc');
|
||||
// if (toc && (tocLinks.length < 2)) {
|
||||
// toc.remove();
|
||||
// } else if (tocLinks.length > 1) {
|
||||
// document.getElementById('toc-toggle').addEventListener('click', toggleToc, false);
|
||||
// }
|
||||
// })();
|
||||
|
||||
function toggleToc(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
document.getElementById('toc').classList.toggle('toc-open');
|
||||
document.getElementById('toc-toggle').classList.toggle('toc-open');
|
||||
// function toggleToc(evt) {
|
||||
// evt.preventDefault();
|
||||
// evt.stopPropagation();
|
||||
// document.getElementById('toc').classList.toggle('toc-open');
|
||||
// document.getElementById('toc-toggle').classList.toggle('toc-open');
|
||||
// }
|
||||
|
||||
var kebab = document.querySelector('.kebab'),
|
||||
middle = document.querySelector('.middle'),
|
||||
cross = document.querySelector('.cross');
|
||||
|
||||
if (kebab) {
|
||||
kebab.addEventListener('click', function() {
|
||||
middle.classList.toggle('active');
|
||||
cross.classList.toggle('active');
|
||||
document.getElementById('toc').classList.toggle('toc-open');
|
||||
})
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@ $code-block-background-color: $inline-code-background-color;
|
||||
|
||||
//Sidebar & Breadcrumb
|
||||
$site-navigation-width: 250px;
|
||||
$content-max-width: 34em;
|
||||
$content-max-width: 90%;
|
||||
$site-navigation-bg-color:$hugo-gray-ultra-light;
|
||||
$breadcrumb-navigation-bg-color:$hugo-blue-ultra-light;
|
||||
$breadcrumb-navigation-bg-color-active:$hugo-blue;
|
||||
|
||||
@@ -11,3 +11,107 @@ a[role="button"] {
|
||||
text-align: center;
|
||||
@include card(1, 3);
|
||||
}
|
||||
|
||||
//main navigation button
|
||||
.navbutton__wrapper {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
z-index:99;
|
||||
@include MQ(L){
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__wrapper--active:before {
|
||||
content: '';
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: $hugo-blue;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 1s;
|
||||
// box-shadow: 0px 0px 4px #5e5e5e;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: $hugo-white;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
z-index: 2;
|
||||
padding: 19px 0 21px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transition: background 1s, box-shadow 1s;
|
||||
}
|
||||
|
||||
.nav__trigger {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.nav__trigger .nav__trigger-item {
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
background-color: $hugo-blue;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav__wrapper--active .trigger {
|
||||
background-color: $hugo-pink;
|
||||
}
|
||||
|
||||
.nav__trigger .nav__trigger-item.nav__trigger-item--first {
|
||||
top: -8px;
|
||||
transition: top .5s .4s ease, transform .4s ease;
|
||||
background-color: $hugo-blue;
|
||||
}
|
||||
|
||||
.nav__trigger .nav__trigger-item.nav__trigger-item--second {
|
||||
top: 0;
|
||||
transition: opacity .3s .4s ease;
|
||||
}
|
||||
|
||||
.nav__trigger .nav__trigger-item.nav__trigger-item--third {
|
||||
top: 8px;
|
||||
transition: top .5s .4s ease, transform .4s ease;
|
||||
background-color: $hugo-blue;
|
||||
}
|
||||
|
||||
.nav__wrapper--active .nav__trigger-item {
|
||||
background-color: $hugo-white;
|
||||
}
|
||||
|
||||
.nav__wrapper--active .nav__trigger-item.nav__trigger-item--first {
|
||||
top: 0px;
|
||||
transform: rotate(45deg);
|
||||
transition: top .4s ease, transform .5s .4s ease;
|
||||
background-color: $hugo-white;
|
||||
}
|
||||
|
||||
.nav__wrapper--active .nav__trigger-item.nav__trigger-item--second {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav__wrapper--active .nav__trigger-item.nav__trigger-item--third {
|
||||
top: 0px;
|
||||
transform: rotate(-45deg);
|
||||
background-color: $hugo-white;
|
||||
transition: top .4s ease, transform .5s .4s ease;
|
||||
}
|
||||
|
||||
@@ -2,14 +2,17 @@
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: .5em;
|
||||
right: .3em;
|
||||
right: 3.5em;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
font-size: 1.2em;
|
||||
z-index: 60;
|
||||
color: $hugo-pink;
|
||||
@include MQ(L) {
|
||||
@include MQ(M){
|
||||
right:2em;
|
||||
}
|
||||
@include MQ(XL) {
|
||||
top: .3em;
|
||||
// right:1em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,13 +45,14 @@ form#site-search-form {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
right: 0px;
|
||||
right:2em;
|
||||
z-index: 50;
|
||||
width: 300px;
|
||||
transform: translateX(290px);
|
||||
transform: translateX(330px);
|
||||
transition: transform .3s ease-in-out;
|
||||
box-shadow: none;
|
||||
max-height: $site-header-height * .8;
|
||||
background-color:transparent;
|
||||
&.search-open {
|
||||
transition: transform .3s ease-in-out;
|
||||
border-bottom-width: 0px;
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
aside#toc {
|
||||
transition: transform .3s ease-in-out;
|
||||
position: fixed;
|
||||
max-width: $site-navigation-width;
|
||||
min-width: $site-navigation-width;
|
||||
overflow-y: scroll;
|
||||
max-height: calc(100vh - #{$site-header-height} - 40px);
|
||||
padding: {
|
||||
left: .5em;
|
||||
right: .5em;
|
||||
}
|
||||
bottom: 40px;
|
||||
right: 20px;
|
||||
height: auto;
|
||||
top: $site-header-height;
|
||||
transform: translateX(100%);
|
||||
background-color: $body-bg-color;
|
||||
right: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
max-width: 280px;
|
||||
@include card(1);
|
||||
z-index: 30;
|
||||
background-color: $toc-bg-color;
|
||||
transform: scale(0);
|
||||
transform-origin: bottom right;
|
||||
opacity: 0;
|
||||
border-radius: 5px;
|
||||
header.toc-header {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@@ -35,14 +26,15 @@ aside#toc {
|
||||
}
|
||||
}
|
||||
&.toc-open {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
transition: transform .3s ease-in-out;
|
||||
transform: translateX(0%);
|
||||
z-index: 99;
|
||||
}
|
||||
@include MQ(XL) {
|
||||
.toc-inner-wrapper {
|
||||
position: relative;
|
||||
min-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
max-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
max-height: calc(100vh - #{$site-header-height});
|
||||
overflow-y: scroll;
|
||||
}
|
||||
box-shadow: none;
|
||||
@@ -52,36 +44,36 @@ aside#toc {
|
||||
opacity: 1;
|
||||
min-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
max-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
transform: scale(1);
|
||||
// transform: scale(1);
|
||||
transform: translateX(0%);
|
||||
border-radius: 0px;
|
||||
margin-right: 1.5em;
|
||||
// padding-bottom:20px;
|
||||
.fade {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
// background-image: linear-gradient(to bottom, transparent, #ffffff);
|
||||
// box-shadow: 0 1px 20px rgba(255, 255, 255, 0.12), 0 1px 20px rgba(255, 255, 255, 0.24);
|
||||
-webkit-box-shadow: 0px 0px 72px 50px rgba(255, 255, 255, 1);
|
||||
-moz-box-shadow: 0px 0px 72px 50px rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 0px 72px 50px rgba(255, 255, 255, 1);
|
||||
z-index:1;
|
||||
&.toc-open {
|
||||
z-index: 1;
|
||||
}
|
||||
// .fade {
|
||||
// content: '';
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// bottom: -1px;
|
||||
// left: 0px;
|
||||
// width: 100%;
|
||||
// min-height: 1px;
|
||||
// // box-shadow: 0px 0px 72px 50px rgba(255, 255, 255, 1);
|
||||
// box-shadow: 58px 0px 72px 53px rgba(255,255,255,1);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
nav#TableOfContents {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
// margin-bottom: 20px;
|
||||
height: auto;
|
||||
overflow-y: scroll;
|
||||
li code {
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
|
||||
li.active > a > code {
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
@@ -91,7 +83,7 @@ nav#TableOfContents {
|
||||
padding-left: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: .5em;
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 0px;
|
||||
> li {
|
||||
padding-left: 0px;
|
||||
margin-left: 0px;
|
||||
@@ -179,48 +171,59 @@ nav#TableOfContents {
|
||||
}
|
||||
}
|
||||
|
||||
a#toc-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside#toc + a#toc-toggle {
|
||||
display: block;
|
||||
// Kebab styling
|
||||
.kebab {
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 20px;
|
||||
background-color: $toc-bg-color;
|
||||
color: $hugo-white;
|
||||
background-color: $default-anchor-underline-color;
|
||||
@include size(40px);
|
||||
z-index: 99;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
&:after {
|
||||
content: '\2026';
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 2em;
|
||||
line-height: 40px;
|
||||
bottom: 10px;
|
||||
}
|
||||
&.toc-open {
|
||||
box-shadow: none;
|
||||
background-color: $toc-bg-color;
|
||||
color: $base-font-color;
|
||||
&::after {
|
||||
content: "\00D7";
|
||||
font-size: 2em;
|
||||
bottom: 0px;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
top: 12px;
|
||||
right: 4px;
|
||||
.figure {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 5px;
|
||||
background: $hugo-blue;
|
||||
margin: 3px 0;
|
||||
&.middle {
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: scale(1);
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
left: 0%;
|
||||
&.active {
|
||||
transform: scale(6.5);
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include card(2, 5);
|
||||
@include MQ(XL) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cross {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
margin-top: -1px;
|
||||
font-family: $base-font-family;
|
||||
background-color: $hugo-pink;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
@include size(40px);
|
||||
transition: all 0.3s ease-in-out;
|
||||
font-size: 34px;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cross.active {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
align-items: center;
|
||||
height: auto;
|
||||
padding-bottom: 1em;
|
||||
z-index: 20;
|
||||
&.navigation-open {
|
||||
transition:transform .3s ease-in-out;
|
||||
transform: translateX($site-navigation-width);
|
||||
|
||||
@@ -25,14 +25,13 @@
|
||||
float: left;
|
||||
width: auto;
|
||||
justify-content: flex-start;
|
||||
// max-width: 200px;
|
||||
}
|
||||
}
|
||||
#home-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .8em;
|
||||
margin-left: 1.5em;
|
||||
margin-left: -1em;
|
||||
img {
|
||||
height: $site-header-height * .7;
|
||||
margin-right: .25em;
|
||||
@@ -41,6 +40,9 @@
|
||||
align-self: flex-end;
|
||||
font-size: .9em;
|
||||
}
|
||||
@include MQ(L){
|
||||
margin-left:1em;
|
||||
}
|
||||
}
|
||||
a.github-button {
|
||||
display: none;
|
||||
|
||||
@@ -137,32 +137,34 @@
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .top {
|
||||
transform: rotate(45deg);
|
||||
top: 40%;
|
||||
top: 42%;
|
||||
border-radius: 5px;
|
||||
background-color: $hugo-pink;
|
||||
// background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
}
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .middle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 4%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 9%;
|
||||
border-radius: 50%;
|
||||
background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
// background-color: $hugo-pink;
|
||||
// border-color: $hugo-pink;
|
||||
background-color: $hugo-white;
|
||||
border-color: $hugo-white;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .bottom {
|
||||
transform: rotate(-45deg);
|
||||
top: 40%;
|
||||
top: 41%;
|
||||
border-radius: 5px;
|
||||
background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 40px;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
border: 2px solid $hugo-blue;
|
||||
background-color: $hugo-blue;
|
||||
@@ -176,13 +178,13 @@
|
||||
|
||||
.top {
|
||||
left: 15%;
|
||||
top: 20%;
|
||||
top: 30%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.middle {
|
||||
left: 15%;
|
||||
top: 40%;
|
||||
top: 43%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 182 KiB |
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Vendored
+7
-7
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user