mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 19:47:38 +00:00
✨ 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:
Peter Zimon
Naz Gargol
parent
98543dd068
commit
bf4b8d7f15
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
@ -302,26 +324,8 @@ body {
|
||||
-ms-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.site-header-background:not(.responsive-header-img) .site-nav:after,
|
||||
.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-left .nav li:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
flex-shrink: 0;
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 0;
|
||||
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 {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-links a:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
.social-link {
|
||||
display: inline-block;
|
||||
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 {
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
margin: 0 0 0 10px;
|
||||
border: #fff 1px solid;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1em;
|
||||
border-radius: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.site-nav-right .nav + .subscribe-button {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.rss-button {
|
||||
padding: 10px 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
@ -1,32 +1,40 @@
|
||||
<nav class="site-nav">
|
||||
<div class="site-nav-left">
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
<div class="site-nav-content">
|
||||
{{#if @site.navigation}}
|
||||
{{navigation}}
|
||||
<div class="site-nav-left-wrapper">
|
||||
<div class="site-nav-left">
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{#is "post"}}
|
||||
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
||||
{{/is}}
|
||||
<div class="site-nav-content">
|
||||
{{#if @site.navigation}}
|
||||
{{navigation}}
|
||||
{{/if}}
|
||||
{{#is "post"}}
|
||||
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
||||
{{/is}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-nav-right">
|
||||
<div class="social-links">
|
||||
{{#if @site.facebook}}
|
||||
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||
{{/if}}
|
||||
{{#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>
|
||||
{{#if @site.secondary_navigation}}
|
||||
{{navigation type="secondary"}}
|
||||
{{else}}
|
||||
<div class="social-links">
|
||||
{{#if @site.facebook}}
|
||||
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||
{{/if}}
|
||||
{{#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}}
|
||||
<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}}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user