mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-24 15:28:54 +00:00
Update anchor styles
This commit is contained in:
Ryan Watters
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Hosting and Deployment Overview
|
||||
linktitle:
|
||||
description: Description for the Hosting and Deployment Section
|
||||
description: Build process, automated deployments, and popular hosting solutions.
|
||||
date: 2016-11-01
|
||||
publishdate: 2016-11-01
|
||||
lastmod: 2016-11-01
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Introduction to Hugo Templating
|
||||
linktitle:
|
||||
description: Description of the template section and its contents.
|
||||
description: Golang templating, template types and lookup order, shortcodes, and data.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Template Variables
|
||||
title: Go Template Primer
|
||||
linktitle:
|
||||
description:
|
||||
date: 2017-02-01
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Goland Primer
|
||||
title: Tutorials
|
||||
linktitle:
|
||||
description:
|
||||
date: 2017-02-01
|
||||
@@ -1,4 +1,9 @@
|
||||
<a href="#" id="navigation-toggle"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a>
|
||||
<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>
|
||||
<nav class="site-navigation" id="site-navigation">
|
||||
<ul class="top-menu">
|
||||
{{ $menuitems := .Site.Params.sitemenuitems }}
|
||||
@@ -25,7 +30,7 @@
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="nav-buttons">
|
||||
<a role="button" class="icon-forum" href="https://discuss.gohugo.io" target="_blank">Discussion Forum</a><br>
|
||||
<a role="button" class="icon-mailing-list" href="{{.Site.BaseURL}}mailing-list/">Join the Mailing List</a>
|
||||
<a role="button" class="icon-forum" href="https://discuss.gohugo.io" target="_blank">Discuss Hugo</a><br>
|
||||
<a role="button" class="icon-mailing-list" href="{{.Site.BaseURL}}mailing-list/">Mailing List</a>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,9 +1,10 @@
|
||||
//toggle off-canvas navigation for M- screens
|
||||
$('#navigation-toggle').on('click', function() {
|
||||
$('#site-navigation,.all-content-wrapper').toggleClass('navigation-open');
|
||||
$('#site-navigation,.all-content-wrapper,#navigation-toggle').toggleClass('navigation-open');
|
||||
});
|
||||
|
||||
$('#all-content-wrapper').on('click',function(){
|
||||
if($('.site-navigation.navigation-open')){
|
||||
$('.site-navigation.navigation-open,.all-content-wrapper.navigation-open').removeClass('navigation-open');
|
||||
}
|
||||
//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').removeClass('navigation-open');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -15,7 +15,7 @@ $hugo-pink:#ff4088;
|
||||
$hugo-blue:#0594CB;
|
||||
|
||||
$default-anchor-color:$hugo-pink;
|
||||
$default-anchor-weight: inherit;
|
||||
$default-anchor-weight: 500;
|
||||
$active-color: $default-anchor-color;
|
||||
|
||||
//Document Body
|
||||
|
||||
@@ -1,8 +1,87 @@
|
||||
a {
|
||||
color:$default-anchor-color;
|
||||
font-weight:$default-anchor-weight;
|
||||
@include on-event($self:true){
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
color: $default-anchor-color;
|
||||
font-weight: $default-anchor-weight;
|
||||
@include on-event($self: true) {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $default-anchor-color;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
perspective: 1800px;
|
||||
&:hover {
|
||||
color:$hugo-white;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -4px;
|
||||
padding: 0 4px;
|
||||
z-index: -1;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
&::before {
|
||||
background-color: $default-anchor-color;
|
||||
transition: transform 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transform: rotateX(90deg);
|
||||
transform-origin: 50% 100%;
|
||||
}
|
||||
&:hover::before,
|
||||
&:focus::before {
|
||||
transform: rotateX(0);
|
||||
}
|
||||
&::after {
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .body-copy {
|
||||
// a {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// outline: none;
|
||||
// color: $default-anchor-color;
|
||||
// vertical-align: bottom;
|
||||
// text-decoration: none;
|
||||
// white-space: nowrap;
|
||||
// font-weight: 500;
|
||||
// &:hover {
|
||||
// color:$hugo-white;
|
||||
// }
|
||||
// &:before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: -5px;
|
||||
// z-index: -1;
|
||||
// box-sizing: content-box;
|
||||
// padding: 0 5px;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// border-radius: 10px;
|
||||
// background-color: $default-anchor-color;
|
||||
// content: '';
|
||||
// opacity: 0;
|
||||
// transition: transform 0.2s, opacity 0.2s;
|
||||
// transform: scale(0);
|
||||
// }
|
||||
// &:hover::before,
|
||||
// &:focus::before {
|
||||
// opacity: 1;
|
||||
// -webkit-transform: scale(1);
|
||||
// transform: scale(1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
// .navigation-toggle-wrapper {
|
||||
// width: 60px;
|
||||
// height: 60px;
|
||||
// /*border:1px solid red;*/
|
||||
// position: fixed;
|
||||
// top: $site-header-height;
|
||||
// left: 0px;
|
||||
// z-index: 20;
|
||||
// h4.menu {
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// bottom: -1em;
|
||||
// left: .8em;
|
||||
// color: $hugo-blue;
|
||||
// display: none;
|
||||
// }
|
||||
// @include MQ(L) {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .navigation-toggle-wrapper.navigation-open .middle {
|
||||
// width: 40px;
|
||||
// height: 40px;
|
||||
// top: 10%;
|
||||
// border-radius: 50%;
|
||||
// background-color: $hugo-pink;
|
||||
// border-color: $hugo-pink;
|
||||
// opacity: 0.3;
|
||||
// }
|
||||
|
||||
// .navigation-toggle-wrapper.navigation-open .top {
|
||||
// -webkit-transform: rotate(45deg);
|
||||
// top: 40%;
|
||||
// border-radius: 5px;
|
||||
// background-color: $hugo-pink;
|
||||
// border-color: $hugo-pink;
|
||||
// }
|
||||
|
||||
// .navigation-toggle-wrapper.navigation-open .bottom {
|
||||
// -webkit-transform: rotate(-45deg);
|
||||
// top: 40%;
|
||||
// border-radius: 5px;
|
||||
// background-color: $hugo-pink;
|
||||
// border-color: $hugo-pink;
|
||||
// }
|
||||
|
||||
// .bar {
|
||||
// width: 40px;
|
||||
// height: 2px;
|
||||
// border: 2px solid $hugo-blue;
|
||||
// background-color: $hugo-blue;
|
||||
// position: absolute;
|
||||
// border-radius: 10px;
|
||||
// &.navigation-open {
|
||||
// background-color: $hugo-pink;
|
||||
// border: 2px solid $hugo-pink;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .top {
|
||||
// left: 15%;
|
||||
// top: 20%;
|
||||
// -webkit-transition: all 0.5s;
|
||||
// }
|
||||
|
||||
// .middle {
|
||||
// left: 15%;
|
||||
// top: 40%;
|
||||
// -webkit-transition: all 0.5s;
|
||||
// }
|
||||
|
||||
// .bottom {
|
||||
// left: 15%;
|
||||
// top: 60%;
|
||||
// -webkit-transition: all 0.5s;
|
||||
// }
|
||||
@@ -29,21 +29,24 @@ main.main {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 2.5em;
|
||||
margin-top: 3em;
|
||||
@include MQ(M) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
a.edit-link {
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
top: -1em;
|
||||
right: 0px;
|
||||
@include MQ(M) {
|
||||
@include MQ(L) {
|
||||
font-size: .7em;
|
||||
position:fixed;
|
||||
top:$site-header-height + 40px;
|
||||
right: 2em;
|
||||
}
|
||||
.edit-text {
|
||||
display: none;
|
||||
@include MQ(M) {
|
||||
@include MQ(L) {
|
||||
display: inline;
|
||||
margin-right: .15em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
transform: translateX(0px);
|
||||
}
|
||||
ul.top-menu {
|
||||
margin-top: $site-header-height + 20px;
|
||||
margin-top: $site-header-height + 30px;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -33,7 +33,7 @@
|
||||
margin-top: .66em;
|
||||
margin-bottom: .66em;
|
||||
ul li {
|
||||
padding-left:.5em;
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
a.top-menu-item-link {
|
||||
@@ -44,6 +44,7 @@
|
||||
font-weight: 600;
|
||||
+ ul.submenu {
|
||||
display: block;
|
||||
border-left: 1px solid $hugo-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -65,23 +66,88 @@
|
||||
|
||||
.nav-buttons {
|
||||
a {
|
||||
margin-left:1em;
|
||||
margin-bottom:.5em;
|
||||
display:inline-block;
|
||||
width:200px;
|
||||
font-size:.9em;
|
||||
margin-left: 1em;
|
||||
margin-bottom: .5em;
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-toggle {
|
||||
.navigation-toggle-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
/*border:1px solid red;*/
|
||||
position: fixed;
|
||||
top: $site-header-height;
|
||||
left: 0px;
|
||||
z-index: 20;
|
||||
h4.menu {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: -1em;
|
||||
left: .8em;
|
||||
color: $hugo-blue;
|
||||
display: none;
|
||||
}
|
||||
@include MQ(L) {
|
||||
display: none;
|
||||
}
|
||||
position:fixed;
|
||||
top:$site-header-height;
|
||||
left:0px;
|
||||
padding:.25em .5em;
|
||||
@include card(1);
|
||||
z-index:15;
|
||||
background-color: $body-bg-color;
|
||||
}
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .middle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .top {
|
||||
-webkit-transform: rotate(45deg);
|
||||
top: 40%;
|
||||
border-radius: 5px;
|
||||
background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
}
|
||||
|
||||
.navigation-toggle-wrapper.navigation-open .bottom {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
top: 40%;
|
||||
border-radius: 5px;
|
||||
background-color: $hugo-pink;
|
||||
border-color: $hugo-pink;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
border: 2px solid $hugo-blue;
|
||||
background-color: $hugo-blue;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
&.navigation-open {
|
||||
background-color: $hugo-pink;
|
||||
border: 2px solid $hugo-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
left: 15%;
|
||||
top: 20%;
|
||||
-webkit-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.middle {
|
||||
left: 15%;
|
||||
top: 40%;
|
||||
-webkit-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
left: 15%;
|
||||
top: 60%;
|
||||
-webkit-transition: all 0.5s;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
@import 'components/buttons';
|
||||
@import 'components/lists';
|
||||
@import 'components/anchors';
|
||||
// @import 'components/navigation-menu';
|
||||
|
||||
//major layout parts/chrome
|
||||
@import 'layout/site-header';
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user