keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-01 09:27:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Added secondary navigation (#664)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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