New update: 1.0.1
* Updated the theme’s description * Added more custom settings 1) text_color: Option to choose the website’s font color 2) link_of_lottie_json_file: Option to upload a Lottie file as an animated logo 3) show_site_title: Option to show the website’s title beside the logo 4) show_description: Option to show the website’s description beside the logo 5) show_search_icon: Option to hide the search icon 6) flip_columns: Option to flip the main columns in the side-by-side layout * Added the meta tag theme-color and set its value to match the accent color * General improvements
This commit is contained in:
m_assaleh
parent
3073f13cef
commit
6bc8c8092c
102
default.hbs
102
default.hbs
@ -17,6 +17,34 @@
|
||||
:root {
|
||||
--background-color: {{@custom.background_color}}
|
||||
}
|
||||
|
||||
*, html, :root, body, h1, h2, h3, h4, h5, h6, p, a, div, .gh-foot a:hover {
|
||||
color: {{@custom.text_color}};
|
||||
}
|
||||
|
||||
{{#if @custom.flip_columns}}
|
||||
.showOnMedia {
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 840px) {
|
||||
.HideOnMedia {
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.showOnMedia {
|
||||
font-size: clamp(3.2rem, 2.4452rem + 2.0968vw, 5.8rem);
|
||||
visibility: visible;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
{{/if}}
|
||||
|
||||
.gh-about-inner.gh-inner {
|
||||
gap: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -33,7 +61,14 @@
|
||||
document.documentElement.className = `has-${textColor}-text`;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
|
||||
{{ghost_head}}
|
||||
|
||||
<meta name="theme-color" content="{{@site.accent_color}}"/>
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="{{@site.accent_color}}"/>
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{@site.accent_color}}"/>
|
||||
|
||||
</head>
|
||||
|
||||
<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}}">
|
||||
@ -43,15 +78,41 @@
|
||||
<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}}">
|
||||
{{#if @site.logo}}
|
||||
{{#if @custom.link_of_lottie_json_file}}
|
||||
<a class="gh-head-logo playLottie" href="{{@site.url}}">
|
||||
<lottie-player
|
||||
src="{{@custom.link_of_lottie_json_file}}" speed="1.5" style="width: 75px;">
|
||||
</lottie-player>
|
||||
</a>
|
||||
{{#if @custom.show_site_title}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
<a class="gh-head-logo" href="{{@site.url}}"><img style="max-height: 75px;" src="{{@site.logo}}" alt="Logo"></a>
|
||||
{{#if @custom.show_site_title}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
<button class="gh-burger"></button>
|
||||
</div>
|
||||
|
||||
@ -59,7 +120,9 @@
|
||||
{{navigation}}
|
||||
{{#unless @site.members_enabled}}
|
||||
{{#match @custom.navigation_layout "Stacked"}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{/unless}}
|
||||
</nav>
|
||||
@ -67,10 +130,14 @@
|
||||
<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>
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{else}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
<div class="gh-head-members">
|
||||
{{#unless @member}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
@ -98,7 +165,7 @@
|
||||
|
||||
<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>
|
||||
{{@site.title}} © {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
|
||||
{{else}}
|
||||
{{@custom.footer_text}}
|
||||
{{/unless}}
|
||||
@ -114,8 +181,21 @@
|
||||
|
||||
<script src="{{asset "built/main.min.js"}}"></script>
|
||||
|
||||
<script>
|
||||
const containerPlayer = document.querySelectorAll(".playLottie");
|
||||
const play = (container, direction) => {
|
||||
const player = container.querySelector("lottie-player");
|
||||
player.setDirection(direction);
|
||||
player.play();
|
||||
};
|
||||
containerPlayer.forEach(container => {
|
||||
container.addEventListener("mouseover", () => play(container, 1));
|
||||
container.addEventListener("mouseleave", () => play(container, -1));
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ghost_foot}}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
237
index.hbs
237
index.hbs
@ -1,56 +1,201 @@
|
||||
{{!< default}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{@site.locale}}">
|
||||
|
||||
<section class="gh-about gh-outer{{#match @custom.header_section_layout "!=" "Typographic profile"}}{{#unless @site.cover_image}} no-image{{/unless}}{{else}}{{#unless @site.icon}} no-image{{/unless}}{{/match}}">
|
||||
<div class="gh-about-inner gh-inner">
|
||||
{{#match @custom.header_section_layout "!=" "Typographic profile"}}
|
||||
{{#if @site.cover_image}}
|
||||
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{meta_title}}</title>
|
||||
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
|
||||
|
||||
{{#is "home"}}
|
||||
{{#if @site.cover_image}}
|
||||
<link rel="preload" as="image" href="{{@site.cover_image}}">
|
||||
{{/if}}
|
||||
{{/is}}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--background-color: {{@custom.background_color}}
|
||||
}
|
||||
|
||||
*, html, :root, body, h1, h2, h3, h4, h5, h6, p, a, div, .gh-foot a:hover {
|
||||
color: {{@custom.text_color}};
|
||||
}
|
||||
|
||||
{{#if @custom.flip_columns}}
|
||||
.showOnMedia {
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 840px) {
|
||||
.HideOnMedia {
|
||||
font-size: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.showOnMedia {
|
||||
font-size: clamp(3.2rem, 2.4452rem + 2.0968vw, 5.8rem);
|
||||
visibility: visible;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#if @site.icon}}
|
||||
<img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
<script>
|
||||
(function () {
|
||||
if (!document.body.classList.contains('has-background-about')) return;
|
||||
|
||||
const about = document.querySelector('.gh-about');
|
||||
if (!about) return;
|
||||
.gh-about-inner.gh-inner {
|
||||
gap: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
const image = about.querySelector('.gh-about-image');
|
||||
<script>
|
||||
/* The script for calculating the color contrast was taken from
|
||||
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
|
||||
var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
accentColor = accentColor.trim().slice(1);
|
||||
var r = parseInt(accentColor.substr(0, 2), 16);
|
||||
var g = parseInt(accentColor.substr(2, 2), 16);
|
||||
var b = parseInt(accentColor.substr(4, 2), 16);
|
||||
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
||||
var textColor = (yiq >= 128) ? 'dark' : 'light';
|
||||
|
||||
about.style.setProperty('--about-height', image.clientWidth * image.naturalHeight / image.naturalWidth + 'px');
|
||||
about.classList.add('initialized');
|
||||
})();
|
||||
</script>
|
||||
<div class="gh-about-content">
|
||||
<div class="gh-about-content-inner">
|
||||
{{#if @custom.primary_header}}
|
||||
<h1 class="gh-about-primary">{{{@custom.primary_header}}}</h1>
|
||||
{{/if}}
|
||||
{{#if @custom.secondary_header}}
|
||||
<p class="gh-about-secondary">{{{@custom.secondary_header}}}</p>
|
||||
{{/if}}
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<div class="gh-subscribe-input" data-portal>
|
||||
jamie@example.com
|
||||
<span class="gh-btn gh-primary-btn">Subscribe</span>
|
||||
</div>
|
||||
{{/unless}}
|
||||
document.documentElement.className = `has-${textColor}-text`;
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
|
||||
{{ghost_head}}
|
||||
|
||||
<meta name="theme-color" content="{{@site.accent_color}}"/>
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="{{@site.accent_color}}"/>
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{@site.accent_color}}"/>
|
||||
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<div class="gh-head-brand-wrapper">
|
||||
{{#if @site.logo}}
|
||||
{{#if @custom.link_of_lottie_json_file}}
|
||||
<a class="gh-head-logo playLottie" href="{{@site.url}}">
|
||||
<lottie-player
|
||||
src="{{@custom.link_of_lottie_json_file}}" speed="1.5" style="width: 75px;">
|
||||
</lottie-player>
|
||||
</a>
|
||||
{{#if @custom.show_site_title}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{else}}
|
||||
<a class="gh-head-logo" href="{{@site.url}}"><img style="max-height: 75px;" src="{{@site.logo}}" alt="Logo"></a>
|
||||
{{#if @custom.show_site_title}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p class="gh-head-logo"><a class="gh-head-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{#if @custom.show_site_description}}
|
||||
<br/><span class="gh-head-logo" style="font-size: 1.5rem">{{@site.description}}</span>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
<button class="gh-burger"></button>
|
||||
</div>
|
||||
|
||||
<nav class="gh-head-menu">
|
||||
{{navigation}}
|
||||
{{#unless @site.members_enabled}}
|
||||
{{#match @custom.navigation_layout "Stacked"}}
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{/unless}}
|
||||
</nav>
|
||||
|
||||
<div class="gh-head-actions">
|
||||
{{#unless @site.members_enabled}}
|
||||
{{^match @custom.navigation_layout "Stacked"}}
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{else}}
|
||||
{{#if @custom.show_search_icon}}
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{/if}}
|
||||
<div class="gh-head-members">
|
||||
{{#unless @member}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
<a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
|
||||
<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">Sign in</a>
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
|
||||
{{/unless}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<main class="gh-main gh-outer">
|
||||
<div class="gh-feed gh-inner">
|
||||
{{#foreach posts}}
|
||||
{{> "loop"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</main>
|
||||
{{{body}}}
|
||||
|
||||
{{#contentFor "body_class"}}{{#match @custom.header_section_layout "Side by side"}} has-side-about{{/match}}{{#match @custom.header_section_layout "Large background"}}{{#if @site.cover_image}} is-head-transparent has-background-about{{else}} has-side-about{{/if}}{{/match}}{{#match @custom.header_section_layout "Typographic profile"}}{{#if @site.icon}} has-typographic-about{{else}} has-side-about{{/if}}{{/match}}{{/contentFor}}
|
||||
<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>
|
||||
|
||||
<script>
|
||||
const containerPlayer = document.querySelectorAll(".playLottie");
|
||||
const play = (container, direction) => {
|
||||
const player = container.querySelector("lottie-player");
|
||||
player.setDirection(direction);
|
||||
player.play();
|
||||
};
|
||||
containerPlayer.forEach(container => {
|
||||
container.addEventListener("mouseover", () => play(container, 1));
|
||||
container.addEventListener("mouseleave", () => play(container, -1));
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ghost_foot}}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
package.json
31
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "solo",
|
||||
"description": "A Ghost theme",
|
||||
"version": "1.0.0",
|
||||
"description": "A clean, minimal personal Theme for the Ghost publishing platform",
|
||||
"version": "1.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"ghost": ">=5.0.0"
|
||||
@ -46,6 +46,22 @@
|
||||
"type": "color",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"text_color": {
|
||||
"type": "color",
|
||||
"default": "#000000"
|
||||
},
|
||||
"link_of_lottie_json_file": {
|
||||
"type": "text",
|
||||
"default": ""
|
||||
},
|
||||
"show_site_title": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"show_site_description": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"navigation_layout": {
|
||||
"type": "select",
|
||||
"options": ["Logo on the left", "Logo in the middle", "Stacked"],
|
||||
@ -80,6 +96,15 @@
|
||||
"options": ["Classic", "Typographic", "Parallax"],
|
||||
"default": "Classic",
|
||||
"group": "homepage"
|
||||
},
|
||||
"show_search_icon": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"flip_columns": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"group": "homepage"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -104,4 +129,4 @@
|
||||
"postcss-easy-import": "4.0.0",
|
||||
"pump": "3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user