Browse Source

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
master
Peter Zimon 7 months ago
committed by Naz Gargol
parent
commit
bf4b8d7f15
4 changed files with 81 additions and 51 deletions
  1. +1
    -1
      assets/built/screen.css
  2. +1
    -1
      assets/built/screen.css.map
  3. +49
    -27
      assets/css/screen.css
  4. +30
    -22
      partials/site-nav.hbs

+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
View File


+ 49
- 27
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;
}



+ 30
- 22
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>

Loading…
Cancel
Save