jean
/
bifocal
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 1 Wiki Activity

Added navbar options (#187)

This commit is contained in:
Sodbileg Gansukh 2022-11-11 12:02:51 +08:00 committed by GitHub
parent f98c35c6a9
commit 267f9fdb59
3 changed files with 78 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/screen.css
View File

@ -94,14 +94,6 @@ figcaption {
background-color: transparent;
}
.gh-head-inner {
padding: clamp(24px, 1.9355rem + 1.2903vw, 40px) 0;
}
.gh-head-brand-wrapper {
gap: 32px;
}
.gh-head-logo {
font-weight: 800;
}
@ -114,15 +106,13 @@ figcaption {
font-weight: 700;
}
.gh-head-menu a {
color: inherit;
.is-head-stacked .gh-head-menu::before,
.is-head-stacked .gh-head-menu::after {
background-color: var(--color-border);
}
.gh-head-btn.gh-btn {
height: 36px;
padding: 0 16px;
font-size: 1.6rem;
font-weight: 700;
.gh-head-menu a {
color: inherit;
}
@media (max-width: 991px) {

24
default.hbs
View File

@ -36,8 +36,9 @@
{{ghost_head}}
</head>
<body class="{{body_class}}{{{block "body_class"}}}{{#match @custom.typography "Elegant serif"}} has-serif-font{{/match}}{{#match @custom.typography "Consistent mono"}} has-mono-font{{/match}}{{#match @custom.post_feed_layout "Classic"}} has-classic-feed{{/match}}{{#match @custom.post_feed_layout "Typographic"}} has-typographic-feed{{/match}}{{#match @custom.post_feed_layout "Parallax"}} has-parallax-feed{{/match}}">
<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.typography "Elegant serif"}} has-serif-font{{/match}}{{#match @custom.typography "Consistent mono"}} has-mono-font{{/match}}{{#match @custom.post_feed_layout "Classic"}} has-classic-feed{{/match}}{{#match @custom.post_feed_layout "Typographic"}} has-typographic-feed{{/match}}{{#match @custom.post_feed_layout "Parallax"}} has-parallax-feed{{/match}}">
<div class="gh-site">
<header id="gh-head" class="gh-head gh-outer">
<div class="gh-head-inner gh-inner">
<div class="gh-head-brand">
@ -56,19 +57,30 @@
<nav class="gh-head-menu">
{{navigation}}
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}}
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{#if @site.members_enabled}}
{{#unless @member}}
{{^is "home"}}
{{#unless @site.members_invite_only}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{/is}}
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Login</a>
{{/unless}}
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
{{/if}}
{{/unless}}
</div>
</div>
</header>
@ -90,6 +102,7 @@
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
@ -99,6 +112,7 @@
<script src="{{asset "built/main.min.js"}}"></script>
{{ghost_foot}}
</body>
</html>

5
package.json
View File

@ -45,6 +45,11 @@
"type": "color",
"default": "#ffffff"
},
"navigation_layout": {
"type": "select",
"options": ["Logo on the left", "Logo in the middle", "Stacked"],
"default": "Logo on the left"
},
"typography": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif", "Consistent mono"],