ghostcms/solo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New update: 1.0.1

Browse Source 
- 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 2023-01-22 18:59:31 +01:00
parent 3073f13cef
commit 9a2c98bc16
3 changed files with 148 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
default.hbs
View File

@ -17,6 +17,34 @@
:root { :root {
--background-color: {{@custom.background_color}} --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> </style>
<script> <script>
@ -33,7 +61,14 @@
document.documentElement.className = `has-${textColor}-text`; document.documentElement.className = `has-${textColor}-text`;
</script> </script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
{{ghost_head}} {{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> </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}}"> <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-inner gh-inner">
<div class="gh-head-brand"> <div class="gh-head-brand">
<div class="gh-head-brand-wrapper"> <div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}"> {{#if @site.logo}}
{{#if @site.logo}} {{#if @custom.link_of_lottie_json_file}}
<img src="{{@site.logo}}" alt="{{@site.title}}"> <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}} {{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}} {{/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> </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> <button class="gh-burger"></button>
</div> </div>
@ -59,7 +120,9 @@
{{navigation}} {{navigation}}
{{#unless @site.members_enabled}} {{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}} {{#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}} {{/match}}
{{/unless}} {{/unless}}
</nav> </nav>
@ -67,10 +130,14 @@
<div class="gh-head-actions"> <div class="gh-head-actions">
{{#unless @site.members_enabled}} {{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}} {{^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}} {{/match}}
{{else}} {{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"> <div class="gh-head-members">
{{#unless @member}} {{#unless @member}}
{{#unless @site.members_invite_only}} {{#unless @site.members_invite_only}}
@ -98,7 +165,7 @@
<div class="gh-copyright"> <div class="gh-copyright">
{{#unless @custom.footer_text}} {{#unless @custom.footer_text}}
{{@site.title}} © {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a> {{@site.title}} &copy; {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
{{else}} {{else}}
{{@custom.footer_text}} {{@custom.footer_text}}
{{/unless}} {{/unless}}
@ -114,6 +181,19 @@
<script src="{{asset "built/main.min.js"}}"></script> <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}} {{ghost_foot}}
</body> </body>

38
index.hbs
View File

@ -1,16 +1,23 @@
{{!< default}} {{!< default}}
<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}}"> <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}}">
{{#if @custom.flip_columns}}
{{#if @custom.primary_header}}
<h1 class="gh-about-primary showOnMedia">{{{@custom.primary_header}}}</h1>
{{/if}}
{{/if}}
<div class="gh-about-inner gh-inner"> <div class="gh-about-inner gh-inner">
{{#match @custom.header_section_layout "!=" "Typographic profile"}} {{^if @custom.flip_columns}}
{{#if @site.cover_image}} {{#match @custom.header_section_layout "!=" "Typographic profile"}}
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}"> {{#if @site.cover_image}}
{{/if}} <img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{else}} {{/if}}
{{#if @site.icon}} {{else}}
<img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}"> {{#if @site.icon}}
{{/if}} <img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">
{{/match}} {{/if}}
{{/match}}
{{/if}}
<script> <script>
(function () { (function () {
if (!document.body.classList.contains('has-background-about')) return; if (!document.body.classList.contains('has-background-about')) return;
@ -27,7 +34,7 @@
<div class="gh-about-content"> <div class="gh-about-content">
<div class="gh-about-content-inner"> <div class="gh-about-content-inner">
{{#if @custom.primary_header}} {{#if @custom.primary_header}}
<h1 class="gh-about-primary">{{{@custom.primary_header}}}</h1> <h1 class="gh-about-primary HideOnMedia">{{{@custom.primary_header}}}</h1>
{{/if}} {{/if}}
{{#if @custom.secondary_header}} {{#if @custom.secondary_header}}
<p class="gh-about-secondary">{{{@custom.secondary_header}}}</p> <p class="gh-about-secondary">{{{@custom.secondary_header}}}</p>
@ -42,6 +49,17 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
{{#if @custom.flip_columns}}
{{#match @custom.header_section_layout "!=" "Typographic profile"}}
{{#if @site.cover_image}}
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{else}}
{{#if @site.icon}}
<img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/if}}
</div> </div>
</section> </section>

29
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "solo", "name": "solo",
"description": "A Ghost theme", "description": "A clean, minimal personal Theme for the Ghost publishing platform",
"version": "1.0.0", "version": "1.0.1",
"private": true, "private": true,
"engines": { "engines": {
"ghost": ">=5.0.0" "ghost": ">=5.0.0"
@ -46,6 +46,22 @@
"type": "color", "type": "color",
"default": "#ffffff" "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": { "navigation_layout": {
"type": "select", "type": "select",
"options": ["Logo on the left", "Logo in the middle", "Stacked"], "options": ["Logo on the left", "Logo in the middle", "Stacked"],
@ -80,6 +96,15 @@
"options": ["Classic", "Typographic", "Parallax"], "options": ["Classic", "Typographic", "Parallax"],
"default": "Classic", "default": "Classic",
"group": "homepage" "group": "homepage"
},
"show_search_icon": {
"type": "boolean",
"default": true
},
"flip_columns": {
"type": "boolean",
"default": false,
"group": "homepage"
} }
} }
}, },