9a2c98bc16
- 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
74 lines
3.3 KiB
Handlebars
74 lines
3.3 KiB
Handlebars
{{!< 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}}">
|
|
{{#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">
|
|
{{^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}}
|
|
<script>
|
|
(function () {
|
|
if (!document.body.classList.contains('has-background-about')) return;
|
|
|
|
const about = document.querySelector('.gh-about');
|
|
if (!about) return;
|
|
|
|
const image = about.querySelector('.gh-about-image');
|
|
|
|
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 HideOnMedia">{{{@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}}
|
|
{{/if}}
|
|
</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>
|
|
</section>
|
|
|
|
<main class="gh-main gh-outer">
|
|
<div class="gh-feed gh-inner">
|
|
{{#foreach posts}}
|
|
{{> "loop"}}
|
|
{{/foreach}}
|
|
</div>
|
|
</main>
|
|
|
|
{{#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}} |