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) {

122
default.hbs
View File

@ -36,69 +36,83 @@
{{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">
<div class="gh-head-inner gh-inner">
<div class="gh-head-brand">
<div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<nav class="gh-head-menu"> <header id="gh-head" class="gh-head gh-outer">
{{navigation}} <div class="gh-head-inner gh-inner">
</nav> <div class="gh-head-brand">
<div class="gh-head-brand-wrapper">
<div class="gh-head-actions"> <a class="gh-head-logo" href="{{@site.url}}">
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button> {{#if @site.logo}}
{{#if @site.members_enabled}} <img src="{{@site.logo}}" alt="{{@site.title}}">
{{#unless @member}}
{{^is "home"}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{/is}}
{{else}} {{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a> {{@site.title}}
{{/if}}
</a>
</div>
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<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>
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Login</a>
{{/unless}} {{/unless}}
{{/if}}
</div>
</div>
</header>
{{{body}}}
<footer class="gh-foot gh-outer">
<div class="gh-foot-inner gh-inner">
<nav class="gh-foot-menu">
{{navigation type="secondary"}}
</nav>
<div class="gh-copyright">
{{#unless @custom.footer_text}}
{{@site.title}} © {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
{{else}} {{else}}
{{@custom.footer_text}} <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}} {{/unless}}
</div> {{/unless}}
</div> </div>
</footer> </div>
</div> </header>
{{#is "post, page"}} {{{body}}}
{{> "pswp"}}
{{/is}}
<script src="{{asset "built/main.min.js"}}"></script> <footer class="gh-foot gh-outer">
<div class="gh-foot-inner gh-inner">
<nav class="gh-foot-menu">
{{navigation type="secondary"}}
</nav>
<div class="gh-copyright">
{{#unless @custom.footer_text}}
{{@site.title}} © {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
{{else}}
{{@custom.footer_text}}
{{/unless}}
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
<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"],