generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
shafin-r
80
newspaper/partials/components/account-data.hbs
Normal file
80
newspaper/partials/components/account-data.hbs
Normal file
@ -0,0 +1,80 @@
|
||||
{{#unless @member.paid}}
|
||||
<div class="account-data">
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Full Name"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Email"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.email}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
{{#foreach @member.subscriptions}}
|
||||
<div class="account-data">
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Full Name"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Email"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.email}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#if @member.paid}}
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Current Plan"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{price plan}}/{{plan.interval}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Card"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
**** **** **** {{default_payment_card_last4}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{#if cancel_at_period_end}}{{t "Expires"}}{{else}}{{t "Billing Date"}}{{/if}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{date current_period_end}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/foreach}}
|
||||
18
newspaper/partials/components/announcement-bar.hbs
Normal file
18
newspaper/partials/components/announcement-bar.hbs
Normal file
@ -0,0 +1,18 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/announcement-bar.css"}}" />
|
||||
|
||||
<custom-announcement-bar class="custom-announcement-bar wide-container" data-announcement-bar-type="{{@custom.announcement_bar_type}}">
|
||||
<div class="announcement-heading">{{t "Announcement"}}</div>
|
||||
<div class="announcement-content">
|
||||
<div class="announcement-inner">
|
||||
<div class="announcement-text">
|
||||
</div>
|
||||
<div class="announcement-text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-close-wrapper">
|
||||
<button class="announcement-close-button unstyled-button" aria-label="Close Announcement Bar">
|
||||
{{> "icons/close-icon"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</custom-announcement-bar>
|
||||
25
newspaper/partials/components/archive-tags.hbs
Normal file
25
newspaper/partials/components/archive-tags.hbs
Normal file
@ -0,0 +1,25 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/archive-tags.css"}}" />
|
||||
|
||||
<div class="archive-tags-outer">
|
||||
<archive-tags data-current-tag="all-tags">
|
||||
<div class="button archive-tag-button">
|
||||
<input id="all-tags" type="radio" name="archive-tags" data-name="{{t "All Tags"}}" checked>
|
||||
<label class="radio-button-text" for="all-tags">
|
||||
{{t "All Tags"}} ({{#get "posts" limit="all"}}{{posts.length}}{{/get}})
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{#get "tags" include="count.posts" limit="all"}}
|
||||
{{#foreach tags}}
|
||||
<div class="account-buttons-separator archive-tags-separator"></div>
|
||||
|
||||
<div class="button archive-tag-button">
|
||||
<input id="{{slug}}" type="radio" name="archive-tags" data-name="{{name}}">
|
||||
<label class="radio-button-text" for="{{slug}}">
|
||||
{{name}} ({{count.posts}})
|
||||
</label>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</archive-tags>
|
||||
</div>
|
||||
334
newspaper/partials/components/article.hbs
Normal file
334
newspaper/partials/components/article.hbs
Normal file
@ -0,0 +1,334 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isPost: Boolean
|
||||
--}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{!-- Table of Contents --}}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/table-of-contents.css"}}" />
|
||||
{{/if}}
|
||||
|
||||
<article class="{{#unless @custom.use_sidebar}}overflow-hidden{{/unless}}{{#unless isPost}} overflow-hidden{{/unless}}" data-post-header-type="{{@custom.post_header_type}}" data-has-feature-image="{{#if feature_image}}true{{else}}false{{/if}}" data-use-sidebar="{{#if isPost}}{{@custom.use_sidebar}}{{else}}false{{/if}}">
|
||||
{{#match @page.show_title_and_feature_image}}
|
||||
<header class="hero {{#if feature_image}}wide-container{{#match @custom.post_header_type "Featured Image Right"}} vertical-post-header{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} vertical-post-header vertical-post-image-left{{/match}}{{else}}{{#unless @custom.use_sidebar}} narrow-container{{else}} wide-container{{/unless}} no-image-container{{/if}}
|
||||
{{#match @custom.post_header_type "Narrow"}}{{#unless @custom.use_sidebar}} narrow-container{{/unless}}{{/match}}{{#unless isPost}} narrow-container{{/unless}}">
|
||||
<div class="hero-content">
|
||||
<div class="post-hero-text-content section-padding-top">
|
||||
{{#if isPost}}
|
||||
{{#primary_tag}}
|
||||
<a class="post-tag hover-underline" href="{{url}}">{{name}}</a>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
|
||||
<h1 class="post-heading">{{title}}</h1>
|
||||
|
||||
<div class="excerpt-and-authors-wrapper">
|
||||
{{#if custom_excerpt}}
|
||||
<div class="post-excerpt-wrapper{{#unless isPost}}{{#unless feature_image}} full-width-post-excerpt-wrapper{{/unless}}{{/unless}}">
|
||||
<p>
|
||||
{{custom_excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{> "components/post-authors" }}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
<div class="post-main-image-wrapper post-main-image-wrapper-header hover-image-opacity">
|
||||
<div class="post-main-image">
|
||||
<figure>
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w,
|
||||
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
||||
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</header>
|
||||
{{/match}}
|
||||
|
||||
<div class="gh-content gh-canvas post-content-and-sidebar{{#match @custom.sidebar_position "Left"}} sidebar-left{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} sidebar-left{{/match}}">
|
||||
<div class="post-content-outer narrow-container{{#unless @custom.use_sidebar}} post-content-outer-without-sidebar{{/unless}}{{#unless isPost}} post-content-outer-without-sidebar{{/unless}}">
|
||||
{{#if feature_image}}
|
||||
{{#if isPost}}
|
||||
{{#match @custom.post_header_type "Narrow"}}
|
||||
{{#if @custom.use_sidebar}}
|
||||
<div class="post-main-image-wrapper post-main-image-wrapper-content hover-image-opacity">
|
||||
<div class="post-main-image">
|
||||
<figure>
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w,
|
||||
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
||||
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div class="post-content section-padding-bottom{{#unless feature_image}} post-content-no-image{{/unless}}">
|
||||
{{content}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if access}}
|
||||
<div class="post-share">
|
||||
<div class="post-share-heading">
|
||||
{{t "Share this article"}}
|
||||
</div>
|
||||
|
||||
<div class="socials post-share-icons">
|
||||
<a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" class="social" aria-label="Share on Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&text={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Twitter/X">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute='true'}}&title={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="social clipboard-link" href="javascript:" aria-label="Copy Link">
|
||||
<div class="social-inner">
|
||||
{{> "icons/link-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="clipboard-alert">
|
||||
<small>{{t "The link has been copied!"}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if comments}}
|
||||
<div class="section-heading">
|
||||
<span>{{t "Members Discussion"}}</span>
|
||||
<span>{{comment_count empty=(t "No Comments") singular=(t "Comment") plural=(t "Comments") autowrap="false"}}</span>
|
||||
</div>
|
||||
|
||||
<div class="comments-container">
|
||||
{{comments title="" count=false}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if @custom.use_sidebar}}
|
||||
<aside class="post-sidebar{{#unless feature_image}} post-content-no-image{{/unless}}{{#match @custom.sidebar_content "Featured Articles"}} sidebar-related-articles{{/match}}">
|
||||
{{#match @custom.sidebar_content "Featured Articles"}}
|
||||
{{#get 'posts' include='tags,authors' limit='4' filter='id:-{{id}}+featured:true' as |featured|}}
|
||||
{{#if featured}}
|
||||
<div class="sidebar-articles">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Featured Articles"}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#foreach featured}}
|
||||
{{> "components/extra-small-side-card" isPost=true name=title}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
|
||||
|
||||
<div class="hidden-sidebar-newsletter{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} sidebar-newsletter-container{{/unless}}{{/unless}}{{/if}}{{/if}}">
|
||||
{{> "components/newsletter" isForPost=true }}
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<div class="gh-toc-outer">
|
||||
<div class="medium-text toc-heading">{{t "Table of Contents"}}</div>
|
||||
<div class="gh-toc"></div>
|
||||
</div>
|
||||
{{/match}}
|
||||
</aside>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
<footer>
|
||||
<div class="wide-container section-padding-bottom">
|
||||
<div class="related-posts">
|
||||
<div class="related-post-wrapper previous-article-horizontal-card">
|
||||
{{#prev_post}}
|
||||
{{> "components/horizontal-card" isRelatedArticle=true}}
|
||||
{{/prev_post}}
|
||||
</div>
|
||||
|
||||
<div class="related-post-line"></div>
|
||||
|
||||
<div class="related-post-wrapper next-article-horizontal-card">
|
||||
{{#next_post}}
|
||||
{{> "components/horizontal-card" isRelatedArticle=true isNextArticle=true}}
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#get "posts" limit="6" include="count.posts" filter='id:-{{id}}+tag:[{{primary_tag.slug}}]'}}
|
||||
{{#if posts}}
|
||||
<section class="footer-slider">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Related Articles"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach posts}}
|
||||
{{> "components/slide-card" isPost=true}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</footer>
|
||||
{{/if}}
|
||||
</article>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightense-images@1.0.17/dist/lightense.min.js"></script>
|
||||
<script>
|
||||
setLightense();
|
||||
</script>
|
||||
|
||||
<script src="{{asset "js/post-content.js"}}"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setToggle();
|
||||
})
|
||||
</script>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#match @custom.sidebar_content "Table Of Contents"}}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
|
||||
<script>
|
||||
tocbot.init({
|
||||
// Where to render the table of contents.
|
||||
tocSelector: '.gh-toc',
|
||||
// Where to grab the headings to build the table of contents.
|
||||
contentSelector: '.gh-content',
|
||||
// Which headings to grab inside of the contentSelector element.
|
||||
headingSelector: 'h2, h3, h4',
|
||||
// Ensure correct positioning
|
||||
hasInnerContainers: true,
|
||||
ignoreSelector: '.kg-card h2, .kg-card h3, .kg-card h4, .post-upgrade-cta h2'
|
||||
});
|
||||
</script>
|
||||
{{/match}}
|
||||
|
||||
{{#if @custom.use_sidebar}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
stickySidebar();
|
||||
})
|
||||
|
||||
window.addEventListener('resize', debounce(() => {stickySidebar()}, 100));
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if access}}
|
||||
<script>
|
||||
copyUrlToClipboard("post-share-icons");
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
const iframe = document.querySelector('#ghost-comments-root iframe');
|
||||
if(!iframe) return;
|
||||
|
||||
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
var targetHead = iframe.contentDocument.head;
|
||||
|
||||
var newLink = document.createElement("link");
|
||||
newLink.setAttribute("rel", "stylesheet");
|
||||
newLink.setAttribute("type", "text/css");
|
||||
newLink.setAttribute("href", "{{asset 'css/comments.css'}}");
|
||||
|
||||
let section = iframeDoc.querySelector('section');
|
||||
section.id = "comments-section"
|
||||
|
||||
const rootStyles = getComputedStyle(document.documentElement);
|
||||
|
||||
//initial variables
|
||||
iframeDoc.documentElement.style.setProperty('--text-color', rootStyles.getPropertyValue('--text-color'))
|
||||
iframeDoc.documentElement.style.setProperty('--background-color', rootStyles.getPropertyValue('--background-color'))
|
||||
iframeDoc.documentElement.style.setProperty('--ease-transition', rootStyles.getPropertyValue('--ease-transition'))
|
||||
iframeDoc.documentElement.style.setProperty('--font1', rootStyles.getPropertyValue('--font1'))
|
||||
iframeDoc.documentElement.style.setProperty('--font2', rootStyles.getPropertyValue('--font2'))
|
||||
iframeDoc.documentElement.style.setProperty('--font3', rootStyles.getPropertyValue('--font3'))
|
||||
iframeDoc.documentElement.style.setProperty('--font4', rootStyles.getPropertyValue('--font4'))
|
||||
iframeDoc.documentElement.style.setProperty('--image-filter', rootStyles.getPropertyValue('--image-filter'))
|
||||
|
||||
targetHead.appendChild(newLink);
|
||||
loadFonts("{{@custom.fonts}}", iframeDoc);
|
||||
|
||||
const linkElement = document.querySelector('link[href*="fonts.bunny.net/css"]');
|
||||
|
||||
if(linkElement){
|
||||
const clone = linkElement.cloneNode(true);
|
||||
targetHead.appendChild(clone);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
45
newspaper/partials/components/big-card.hbs
Normal file
45
newspaper/partials/components/big-card.hbs
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="big-card">
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="big-card-image-link hover-image-opacity">
|
||||
<figure class="big-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="big-text hover-underline big-card-heading">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<p class="big-card-text three-lines{{#if @custom.use_initials}} initial-paragraph{{/if}} initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
</small>
|
||||
</div>
|
||||
231
newspaper/partials/components/demo.hbs
Normal file
231
newspaper/partials/components/demo.hbs
Normal file
@ -0,0 +1,231 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/demo.css"}}" />
|
||||
|
||||
<settings-sidebar class="settings-sidebar">
|
||||
<div class="settings-inner">
|
||||
<div class="settings-item">
|
||||
<label for="theme-presets" class="settings-label">
|
||||
<small>Theme presets</small>
|
||||
</label>
|
||||
<select class="settings-select" name="theme-presets" id="theme-presets">
|
||||
<option value="old-newspaper-light">Old Newspaper Light</option>
|
||||
<option value="modern-newspaper-light" selected>Modern Newspaper Light</option>
|
||||
<option value="old-newspaper-tinted">Old Newspaper Tinted</option>
|
||||
<option value="elegant-newspaper-light">Elegant Newspaper Light</option>
|
||||
<option value="elegant-newspaper-dark">Elegant Newspaper Dark</option>
|
||||
<option value="old-newspaper-dark">Old Newspaper Dark</option>
|
||||
<option value="modern-newspaper-dark">Modern Newspaper Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="background-color" class="settings-label">
|
||||
<small>Background color</small>
|
||||
</label>
|
||||
<div class="color-picker-wrapper">
|
||||
<div class="colorpicker-overlay"></div>
|
||||
<input type="color" id="background-color" name="background-color" value="#FFFFFF" colorpick-eyedropper-active="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="text-color" class="settings-label">
|
||||
<small>Text color</small>
|
||||
</label>
|
||||
<div class="color-picker-wrapper">
|
||||
<div class="colorpicker-overlay colorpicker-overlay-text"></div>
|
||||
<input type="color" id="text-color" name="text-color" value="#000000" colorpick-eyedropper-active="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="fonts" class="settings-label">
|
||||
<small>Fonts</small>
|
||||
</label>
|
||||
<input id="fonts" name="fonts" type="text" value="Open Sans, EB Garamond, Roboto Condensed" class="settings-input"/>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="announcement-bar-type" class="settings-label">
|
||||
<small>Announcement bar type</small>
|
||||
</label>
|
||||
<select class="settings-select" name="announcement-bar-type" id="announcement-bar-type">
|
||||
<option value="Normal">Normal</option>
|
||||
<option value="Moving Several News" selected>Moving Several News</option>
|
||||
<option value="Moving One News">Moving One News</option>
|
||||
<option value="Static">Static</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="card-heading-style" class="settings-label">
|
||||
<small>Card heading style</small>
|
||||
</label>
|
||||
<select class="settings-select" name="card-heading-style" id="card-heading-style">
|
||||
<option value="uppercase">uppercase</option>
|
||||
<option value="capitalize">capitalize</option>
|
||||
<option value="lowercase">lowercase</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="image-style" class="settings-label">
|
||||
<small>Image style</small>
|
||||
</label>
|
||||
<select class="settings-select" name="image-style" id="image-style">
|
||||
<option value="unset">Normal</option>
|
||||
<option value="grayscale(1)">Grayscale</option>
|
||||
<option value="grayscale(1) sepia(0.35) contrast(0.85)">Tinted</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="use-initials" class="settings-label">
|
||||
<small>Use initials</small>
|
||||
</label>
|
||||
<select class="settings-select" name="use-initials" id="use-initials">
|
||||
<option value="true">True</option>
|
||||
<option value="false" selected>False</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="use-newsletter" class="settings-label">
|
||||
<small>Newsletter on homepage and post sidebar</small>
|
||||
</label>
|
||||
<select class="settings-select" name="use-newsletter" id="use-newsletter">
|
||||
<option value="true">True</option>
|
||||
<option value="false">False</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tag-page-layout" class="settings-label">
|
||||
<small>Tag page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="tag-page-layout" id="tag-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/tag/politics">Column</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/tag/politics?tag-layout=simple">Simple</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="author-page-layout" class="settings-label">
|
||||
<small>Author page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="author-page-layout" id="author-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe">Column</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-left">Author Image Left</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-right">Author Image Right</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/katarina-smith-demo">Simple</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="account-page-layout" class="settings-label">
|
||||
<small>Account page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="account-page-layout" id="account-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account">All Data Layout</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?no-subscribe-button=true">All Data Layout No Btn</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple">Simple Layout</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple&no-subscribe-button=true">Simple Layout No Btn</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="post-header-type" class="settings-label">
|
||||
<small>Post header type</small>
|
||||
</label>
|
||||
<div class="settings-links" name="post-header-type" id="post-header-type">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=false">Narrow</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=false">Wide</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=false">Featured Image Left</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=false">Featured Image Right</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=true">Narrow With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=true">Wide With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=true">Featured Image Left With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=true">Featured Image Right With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/innovation-in-the-corporate-world-unveiling-the-latest-business-trends?post-layout=narrow&sidebar=false">Members Only Post</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="sidebar-content" class="settings-label">
|
||||
<small>Sidebar content</small>
|
||||
</label>
|
||||
<select class="settings-select" name="sidebar-content" id="sidebar-content">
|
||||
<option value="Featured Articles">Featured Articles</option>
|
||||
<option value="Table Of Contents">Table Of Contents</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="sidebar-position" class="settings-label">
|
||||
<small>Sidebar position</small>
|
||||
</label>
|
||||
<select class="settings-select" name="sidebar-position" id="sidebar-position">
|
||||
<option value="Right">Right</option>
|
||||
<option value="Left">Left</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="buy-button-wrapper">
|
||||
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="button buy-button" target="_blank">Buy Newspaper</a>
|
||||
</div>
|
||||
</div>
|
||||
</settings-sidebar>
|
||||
|
||||
<div class="demo-buttons-container">
|
||||
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="demo-button" aria-label="Buy Newspaper" target="_blank">
|
||||
<div class="demo-button-inner">
|
||||
{{> "icons/download-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button id="settings-button" class="demo-button" aria-label="Newspaper Settings">
|
||||
<div class="demo-button-inner">
|
||||
{{> "icons/settings-icon"}}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="{{asset "js/demo.js"}}"></script>
|
||||
50
newspaper/partials/components/extra-small-card.hbs
Normal file
50
newspaper/partials/components/extra-small-card.hbs
Normal file
@ -0,0 +1,50 @@
|
||||
<div class="extra-small-card">
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="small-text hover-underline extra-small-card-heading two-lines-mobile">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="extra-small-card-image-link hover-image-opacity">
|
||||
<figure class="extra-small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w"
|
||||
src="{{img_url feature_image size="s"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="big-slide-placeholder hover-image-opacity">
|
||||
{{> "icons/placeholder" }}
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="extra-small-card-mobile-excerpt">
|
||||
<p class="{{#if @custom.use_initials}} initial-paragraph{{/if}} three-lines initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
44
newspaper/partials/components/extra-small-side-card.hbs
Normal file
44
newspaper/partials/components/extra-small-side-card.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isPost: Boolean
|
||||
--}}
|
||||
|
||||
<div class="extra-small-card extra-small-side-card">
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="extra-small-side-card-image-link hover-image-opacity">
|
||||
<figure class="extra-small-side-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w"
|
||||
src="{{img_url feature_image size="xs"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{name}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="extra-small-side-card-content{{#unless feature_image}} no-margin-left{{/unless}}">
|
||||
<a href="{{url}}" class="small-text hover-underline extra-small-side-card-heading three-lines">
|
||||
{{name}}
|
||||
</a>
|
||||
|
||||
<small class="small-card-small-text italic-lower-opac">
|
||||
{{#unless isPost}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{else}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{/unless}}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
103
newspaper/partials/components/footer.hbs
Normal file
103
newspaper/partials/components/footer.hbs
Normal file
@ -0,0 +1,103 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/footer.css"}}" />
|
||||
|
||||
<footer class="footer">
|
||||
<custom-footer>
|
||||
<div class="wide-container footer-inner">
|
||||
<div class="footer-content">
|
||||
<div class="footer-description">
|
||||
<a class="footer-logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img class="footer-logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="footer-logo-text">
|
||||
{{@site.title}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
<div class="footer-paragraph-wrapper">
|
||||
<p>{{@site.description}}</p>
|
||||
</div>
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
{{#unless @member}}
|
||||
<form data-members-form="subscribe" class="subscribe-form footer-form">
|
||||
<div class="subscribe-with-alerts">
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your.email@example.com'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert success-alert">{{t "Please check your inbox and click the link to confirm your subscription."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
<div class="socials footer-socials">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<a href="#" id="instagram-footer" target="_blank" class="social" aria-label="Instagram">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/instagram-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="linkedin-footer" target="_blank" class="social" aria-label="Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="pinterest-footer" target="_blank" class="social" aria-label="Pinterest">
|
||||
<div class="social-inner">
|
||||
{{> "icons/pinterest-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="footer-navigation">
|
||||
<ul class="footer-normal-links-group footer-links-group">
|
||||
<li class="footer-nav-navigation">
|
||||
<div class="footer-links-label">
|
||||
{{t "Navigation"}}
|
||||
</div>
|
||||
<ul class="footer-secondary-links footer-normal-links">
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{{navigation type="secondary" }}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
© {{date format="YYYY"}} <a class="hover-underline" href="{{@site.url}}">{{@site.title}}</a> - {{t "Published with"}} <a href="https://ghost.org/" target="_blank" class="hover-underline">Ghost</a><span> & </span><a class="hover-underline" href="https://www.kusa-projects.com/" target="_blank">{{@site.title}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</custom-footer>
|
||||
</footer>
|
||||
95
newspaper/partials/components/form-hero.hbs
Normal file
95
newspaper/partials/components/form-hero.hbs
Normal file
@ -0,0 +1,95 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- type: String
|
||||
- accountPage: Boolean
|
||||
- hasLink: Boolean
|
||||
--}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/form-page.css"}}" />
|
||||
|
||||
<div class="wide-container">
|
||||
<section class="full-page-section">
|
||||
<div class="form-page-content{{#match type "contact"}} contact-content{{/match}}">
|
||||
<h1 class="text-card-heading">
|
||||
{{title}}
|
||||
</h1>
|
||||
|
||||
<p class="form-page-excerpt">
|
||||
{{custom_excerpt}}
|
||||
</p>
|
||||
|
||||
{{#match type "contact"}}
|
||||
<div class="form-container contact-form-container">
|
||||
<form class="contact-form" action="https://formspree.io/f/{{@custom.formspree_hash_id}}" method="POST" id="contactForm">
|
||||
<div class="contact-form-inputs">
|
||||
<input type="text" name="name" placeholder="{{t 'Your name'}}" required>
|
||||
<input type="email" name="email" placeholder="{{t 'Your email address'}}" required>
|
||||
</div>
|
||||
<textarea name="message" placeholder="{{t 'Your message'}}" required></textarea>
|
||||
<button class="button vertical-form-button" type="submit">
|
||||
{{t "Send message"}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{/match}}
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#if accountPage}}
|
||||
<custom-form class="form-container">
|
||||
<form data-members-form="{{type}}" data-members-autoredirect="false" class="page-form-element">
|
||||
{{#match type "signin"}}
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="vertical-form">
|
||||
<input data-members-name type="text" required="true" placeholder="{{t 'Your name'}}"/>
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}"/>
|
||||
<button class="button vertical-form-button" type="submit">{{#match type "signup"}}{{t "Continue"}}{{else}}{{t "Subscribe"}}{{/match}}</button>
|
||||
</div>
|
||||
{{/match}}
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
|
||||
{{#if hasLink}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
<small class="under-form-text">
|
||||
<span class="lower-opacity-small-text">
|
||||
{{#match type "signin"}}{{t "Don't have an account yet?"}}{{else}}{{t "Already have an account?"}}{{/match}}
|
||||
</span>
|
||||
<a class="bold-link" href="{{@site.url}}/{{#match type "signin"}}signup{{else}}signin{{/match}}/">
|
||||
{{#match type "signin"}}{{t "Sign up"}}{{else}}{{t "Sign in"}}{{/match}}
|
||||
</a>
|
||||
</small>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</form>
|
||||
|
||||
<a href="{{@site.url}}" class="button form-success-button">{{t "Back to homepage"}}</a>
|
||||
|
||||
<span id="form-success-heading-text" class="hidden" data-success-heading="{{t 'Great!'}}"></span>
|
||||
<span id="form-success-paragraph-text" class="hidden" data-success-paragraph="
|
||||
{{#match type "signup"}}{{t 'Please check your inbox and click the link to confirm your signup.'}}{{/match}}
|
||||
{{#match type "signin"}}{{t 'Please check your inbox and click the link to complete signin.'}}{{/match}}
|
||||
{{#match type "subscribe"}}{{t 'Please check your inbox and click the link to confirm your subscription.'}}{{/match}}
|
||||
">
|
||||
</span>
|
||||
</custom-form>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#match type "404"}}
|
||||
<div class="form-container">
|
||||
<a class="button" href="{{@site.url}}">{{t "Back to homepage"}}</a>
|
||||
</div>
|
||||
{{/match}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
58
newspaper/partials/components/horizontal-card.hbs
Normal file
58
newspaper/partials/components/horizontal-card.hbs
Normal file
@ -0,0 +1,58 @@
|
||||
<div class="horizontal-card">
|
||||
<div class="horizontal-card-inner">
|
||||
<small class="small-card-small-text">
|
||||
{{#if isRelatedArticle}}
|
||||
<span>
|
||||
{{#if isNextArticle}}
|
||||
{{t "Next Article"}}
|
||||
{{else}}
|
||||
{{t "Previous Article"}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{else}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="medium-text hover-underline small-card-heading two-lines-mobile">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{#if isRelatedArticle}}
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
{{/if}}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="small-card-image-link horizontal-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xs" format="webp"}} 300w,
|
||||
{{img_url feature_image size="s" format="webp"}} 720w,
|
||||
{{img_url feature_image size="m" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
121
newspaper/partials/components/navbar.hbs
Normal file
121
newspaper/partials/components/navbar.hbs
Normal file
@ -0,0 +1,121 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/navbar.css"}}" />
|
||||
|
||||
<custom-header class="header">
|
||||
<div class="wide-container navbar-inner">
|
||||
<div class="navbar-top">
|
||||
<div class="socials">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<a href="#" id="instagram" target="_blank" class="social" aria-label="Instagram">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/instagram-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="linkedin" target="_blank" class="social" aria-label="Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="pinterest" target="_blank" class="social" aria-label="Pinterest">
|
||||
<div class="social-inner">
|
||||
{{> "icons/pinterest-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<span id="socials-info" class="hidden" data-urls="{{@custom.social_urls}}"></span>
|
||||
</div>
|
||||
|
||||
<div class="menu-button-wrapper">
|
||||
<button class="menu-button unstyled-button" aria-label="Menu button">
|
||||
<div class="menu-line first-line"></div>
|
||||
<div class="menu-line mobile-line"></div>
|
||||
<div class="menu-line second-line"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="logo-wrapper">
|
||||
<a class="logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img class="logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="navbar-logo-text">
|
||||
{{@site.title}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-account-links">
|
||||
<a class="account-button-wrapper" aria-label="Search button" href="javascript:" data-ghost-search>
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/search-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Search"}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<div class="account-buttons-separator"></div>
|
||||
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signin"{{else}}href="{{@site.url}}/signin/"{{/match}} class="account-button-wrapper" aria-label="Sign in">
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/account-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Sign in"}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<div class="account-buttons-separator"></div>
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account"{{else}}href="{{@site.url}}/account/"{{/match}} class="account-button-wrapper" aria-label="Account">
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/account-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Account"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-links-outer">
|
||||
<div class="navbar-links-inner">
|
||||
{{navigation}}
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<div class="subscribe-button-mobile-wrapper">
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button subscribe-button-mobile">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</custom-header>
|
||||
32
newspaper/partials/components/newsletter.hbs
Normal file
32
newspaper/partials/components/newsletter.hbs
Normal file
@ -0,0 +1,32 @@
|
||||
<div class="newsletter-outer{{#if isForPost}} newsletter-outer-for-post{{/if}}">
|
||||
<div class="newsletter">
|
||||
<small class="newsletter-small-top-text">
|
||||
{{t "Subscribe to our newsletter"}}
|
||||
</small>
|
||||
|
||||
<div class="big-text newsletter-heading">
|
||||
{{t "Get all the latest news delivered straight to your inbox."}}
|
||||
</div>
|
||||
|
||||
<form data-members-form="subscribe" class="subscribe-form">
|
||||
<div class="subscribe-with-alerts">
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your.email@example.com'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<small class="newsletter-small-bottom-text">
|
||||
{{t "No spam. Unsubscribe anytime."}}
|
||||
</small>
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert success-alert">{{t "Please check your inbox and click the link to confirm your subscription."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
30
newspaper/partials/components/notifications.hbs
Normal file
30
newspaper/partials/components/notifications.hbs
Normal file
@ -0,0 +1,30 @@
|
||||
<custom-notifications class="global-notifications">
|
||||
<div class="notification subscribe-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification signup-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification signin-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification subscribe-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Great! You've successfully signed up."}}</small>
|
||||
</div>
|
||||
<div class="notification signup-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Great! You've successfully signed up."}}</small>
|
||||
</div>
|
||||
<div class="notification signin-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Welcome back! You've successfully signed in."}}</small>
|
||||
</div>
|
||||
<div class="notification stripe-success">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Success! You now have access to additional content."}}</small>
|
||||
</div>
|
||||
</custom-notifications>
|
||||
37
newspaper/partials/components/post-authors.hbs
Normal file
37
newspaper/partials/components/post-authors.hbs
Normal file
@ -0,0 +1,37 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-authors.css"}}" />
|
||||
|
||||
<div class="post-authors">
|
||||
<div class="post-author-images">
|
||||
{{#foreach authors}}
|
||||
<a href="{{url}}" class="post-author-image">
|
||||
{{#if profile_image}}
|
||||
<img class="image hover-image-opacity"
|
||||
src="{{img_url profile_image size="xxs"}}"
|
||||
alt="{{name}}"
|
||||
loading="lazy">
|
||||
{{else}}
|
||||
<div class="author-avatar-wrapper">
|
||||
{{> "icons/avatar-icon"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
<div class="post-authors-text">
|
||||
<div class="post-authors-inner" id="authors">
|
||||
<small class="post-author-name">
|
||||
{{authors separator=" & "}}
|
||||
</small>
|
||||
</div>
|
||||
<small class="date-small-text italic-lower-opac">
|
||||
<span>
|
||||
<time>
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</time>
|
||||
</span>
|
||||
-
|
||||
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
59
newspaper/partials/components/simple-author-hero.hbs
Normal file
59
newspaper/partials/components/simple-author-hero.hbs
Normal file
@ -0,0 +1,59 @@
|
||||
<section class="simple-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{name}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{bio}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="author-socials" class="socials simple-layout-socials">
|
||||
{{#if location}}
|
||||
<div class="social location-social" aria-label="Location">
|
||||
<div class="social-inner">
|
||||
{{> "icons/location-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{location}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Facebook"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Twitter/X"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" class="social" aria-label="Website URL">
|
||||
<div class="social-inner">
|
||||
{{> "icons/link-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Website"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
44
newspaper/partials/components/slide-card.hbs
Normal file
44
newspaper/partials/components/slide-card.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- title: String
|
||||
--}}
|
||||
|
||||
<div class="slide-card">
|
||||
<a href="{{url}}" class="slide-card-image-link hover-image-opacity" aria-label="{{#if isPost}}{{title}}{{else}}{{name}}{{/if}}">
|
||||
{{#if feature_image}}
|
||||
<figure class="slide-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w"
|
||||
src="{{img_url feature_image size="s"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="{{#match @index 0}}eager{{else}}lazy{{/match}}"
|
||||
>
|
||||
</figure>
|
||||
{{else}}
|
||||
<div class="slide-placeholder">
|
||||
{{> "icons/placeholder" }}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
|
||||
<a href="{{url}}" class="small-text hover-underline slide-card-heading two-lines">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<small class="slide-card-small-text">
|
||||
{{#if isPost}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/if}}
|
||||
</small>
|
||||
</div>
|
||||
64
newspaper/partials/components/small-card.hbs
Normal file
64
newspaper/partials/components/small-card.hbs
Normal file
@ -0,0 +1,64 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isForGrid: Boolean
|
||||
- isForAuthor: Boolean
|
||||
--}}
|
||||
|
||||
<div class="small-card{{#if isForGrid}} grid-small-card{{/if}}">
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{#unless isForAuthor}}
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/unless}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="medium-text hover-underline small-card-heading">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="small-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="{{#match @index 0}}eager{{else}}lazy{{/match}}"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if isForGrid}}
|
||||
<a href="{{url}}" class="placeholder hover-image-opacity">
|
||||
{{> "icons/placeholder" }}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div class="small-card-text-and-author{{#if isForGrid}}{{#unless isForAuthor}} text-min-height{{/unless}}{{/if}}">
|
||||
<p class="small-card-text three-lines{{#if @custom.use_initials}} initial-paragraph{{/if}} initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
61
newspaper/partials/components/tier-card.hbs
Normal file
61
newspaper/partials/components/tier-card.hbs
Normal file
@ -0,0 +1,61 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- yearly: boolean
|
||||
--}}
|
||||
|
||||
<div class="tier-card">
|
||||
<div class="tier-name">
|
||||
<div class="big-text">{{name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="tier-price">
|
||||
<span class="tier-currency{{#match type "free"}} tier-currency-free{{/match}}">
|
||||
|
||||
</span>
|
||||
|
||||
<span class="tier-price-span">
|
||||
{{#match type "paid"}}
|
||||
{{#if yearly}}{{price yearly_price currency=currency}}{{else}}{{price monthly_price currency=currency}}{{/if}}
|
||||
{{else}}
|
||||
0
|
||||
{{/match}}
|
||||
</span>
|
||||
|
||||
<div class="big-text tier-time">
|
||||
{{#match type "paid"}}
|
||||
{{#if yearly}}/{{t "year"}}{{else}}/{{t "month"}}{{/if}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if description}}
|
||||
<div class="medium-text tier-description">
|
||||
{{description}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if benefits}}
|
||||
<div class="benefits-outer">
|
||||
<ul class="benefits-container unstyled-list">
|
||||
{{#foreach benefits}}
|
||||
<li class="benefits-item">
|
||||
<div class="benefit-square">
|
||||
<div class="benefit-icon">
|
||||
{{> "icons/check-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{this}}
|
||||
</p>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="membership-subscribe-button">
|
||||
<a class="button" {{#match type "paid"}}href="javascript:" data-portal="signup/{{id}}/{{#if yearly}}yearly{{else}}monthly{{/if}}"{{else}}{{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signup"{{else}}href="{{@site.url}}/signup/"{{/match}}{{/match}}>
|
||||
{{t "Subscribe now"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user