vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

✨ 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 2019-12-04 11:41:50 +01:00 committed by Naz Gargol
parent 98543dd068
commit bf4b8d7f15
4 changed files with 81 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

76
assets/css/screen.css
View File

@ -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;
}

52
partials/site-nav.hbs
View File

@ -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>