✨ Added secondary navigation (#664)
refs https://github.com/TryGhost/Ghost/pull/11409 - Adds secondary navigation to the main menu - Updated secondary nav mobile styles - Updated cover for the scrollable main navigation
This commit is contained in:
parent
98543dd068
commit
bf4b8d7f15
4 changed files with 81 additions and 51 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -285,6 +285,28 @@ body {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-nav-left-wrapper {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
|
||||||
|
.site-nav-main .site-nav-left-wrapper:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
|
||||||
|
.site-nav-main .site-nav-left-wrapper:after {
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
.site-nav-left {
|
.site-nav-left {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -302,26 +324,8 @@ body {
|
||||||
-ms-overflow-scrolling: touch;
|
-ms-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
.site-nav-left .nav li:last-of-type {
|
||||||
.site-header-background:not(.responsive-header-img) .site-nav:after,
|
padding-right: 20px;
|
||||||
.site-nav-main .site-nav:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
width: 40px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-header-background:not(.responsive-header-img) .site-nav:after,
|
|
||||||
.site-nav-main .site-nav:after {
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav li:last-of-type {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Site Nav Hack Explanation (above):
|
/* Site Nav Hack Explanation (above):
|
||||||
|
@ -448,24 +452,37 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav-right {
|
.site-nav-right {
|
||||||
flex-shrink: 0;
|
flex: 0 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-nav-right .nav {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-right .nav a {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-right .nav a:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-right .nav li:last-of-type a {
|
||||||
|
margin-right: -12px;
|
||||||
|
}
|
||||||
|
|
||||||
.social-links {
|
.social-links {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-links a:last-of-type {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.social-link {
|
.social-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -501,9 +518,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
.subscribe-button {
|
.subscribe-button {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
border: #fff 1px solid;
|
border: #fff 1px solid;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 1.2rem;
|
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
@ -514,7 +531,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-nav-right .nav + .subscribe-button {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.rss-button {
|
.rss-button {
|
||||||
|
padding: 10px 8px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,32 +1,40 @@
|
||||||
<nav class="site-nav">
|
<nav class="site-nav">
|
||||||
<div class="site-nav-left">
|
<div class="site-nav-left-wrapper">
|
||||||
{{#if @site.logo}}
|
<div class="site-nav-left">
|
||||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
{{#if @site.logo}}
|
||||||
{{else}}
|
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
||||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
{{else}}
|
||||||
{{/if}}
|
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||||
<div class="site-nav-content">
|
|
||||||
{{#if @site.navigation}}
|
|
||||||
{{navigation}}
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#is "post"}}
|
<div class="site-nav-content">
|
||||||
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
{{#if @site.navigation}}
|
||||||
{{/is}}
|
{{navigation}}
|
||||||
|
{{/if}}
|
||||||
|
{{#is "post"}}
|
||||||
|
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
||||||
|
{{/is}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-nav-right">
|
<div class="site-nav-right">
|
||||||
<div class="social-links">
|
{{#if @site.secondary_navigation}}
|
||||||
{{#if @site.facebook}}
|
{{navigation type="secondary"}}
|
||||||
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
{{else}}
|
||||||
{{/if}}
|
<div class="social-links">
|
||||||
{{#if @site.twitter}}
|
{{#if @site.facebook}}
|
||||||
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
{{#if @site.twitter}}
|
||||||
|
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{#unless @labs.members}}
|
||||||
|
<a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
||||||
|
{{/unless}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if @labs.members}}
|
{{#if @labs.members}}
|
||||||
<a class="subscribe-button" href="#subscribe">Subscribe</a>
|
<a class="subscribe-button" href="#subscribe">Subscribe</a>
|
||||||
{{else}}
|
|
||||||
<a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
Loading…
Reference in a new issue