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

24
default.hbs
View File

@ -36,8 +36,9 @@
{{ghost_head}} {{ghost_head}}
</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"> <div class="gh-site">
<header id="gh-head" class="gh-head gh-outer"> <header id="gh-head" class="gh-head gh-outer">
<div class="gh-head-inner gh-inner"> <div class="gh-head-inner gh-inner">
<div class="gh-head-brand"> <div class="gh-head-brand">
@ -56,19 +57,30 @@
<nav class="gh-head-menu"> <nav class="gh-head-menu">
{{navigation}} {{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> </nav>
<div class="gh-head-actions"> <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> <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
{{#if @site.members_enabled}}
{{#unless @member}} {{#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> <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}} {{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a> <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}} {{/unless}}
{{/if}} {{/unless}}
</div> </div>
</div> </div>
</header> </header>
@ -90,6 +102,7 @@
</div> </div>
</div> </div>
</footer> </footer>
</div> </div>
{{#is "post, page"}} {{#is "post, page"}}
@ -99,6 +112,7 @@
<script src="{{asset "built/main.min.js"}}"></script> <script src="{{asset "built/main.min.js"}}"></script>
{{ghost_foot}} {{ghost_foot}}
</body> </body>
</html> </html>

5
package.json
View File

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