mirror of
https://github.com/GenZmeY/casper-i18n.git
synced 2025-07-20 20:56:06 +00:00
Merge branch 'main' of https://github.com/TryGhost/Casper into master-upstream
This commit is contained in:
@ -1,47 +0,0 @@
|
||||
{{!--
|
||||
Wow what the hell is going on in here even?
|
||||
|
||||
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
|
||||
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
|
||||
can only get the image dynamically using Handlebars, and we can only set the image to properly
|
||||
be a background image using CSS, we end up with a handful of inline styles.
|
||||
|
||||
If the template in question has a background image, then we render responsive image styles
|
||||
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
{{#if background}}
|
||||
|
||||
<style type="text/css">
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="outer site-header-background responsive-header-img">
|
||||
|
||||
{{else}}
|
||||
|
||||
<div class="outer site-header-background no-image">
|
||||
|
||||
{{/if}}
|
||||
@ -1,4 +1,7 @@
|
||||
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
|
||||
{{!-- This is a partial file used to generate a post "card"
|
||||
which templates loop over to generate a list of posts. --}}
|
||||
|
||||
<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
|
||||
|
||||
{{#if feature_image}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
@ -9,10 +12,10 @@
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 400px, 700px"
|
||||
loading="lazy"
|
||||
sizes="(max-width: 1000px) 400px, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{title}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
{{/if}}
|
||||
@ -20,7 +23,6 @@
|
||||
<div class="post-card-content">
|
||||
|
||||
<a class="post-card-content-link" href="{{url}}">
|
||||
|
||||
<header class="post-card-header">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
@ -29,29 +31,18 @@
|
||||
{{/if}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
<section class="post-card-excerpt">
|
||||
{{#if feature_image}}
|
||||
<p>{{excerpt words="30"}}</p>
|
||||
{{else}}
|
||||
<p>{{excerpt words="44"}}</p>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
<div class="post-card-excerpt">
|
||||
<p>{{excerpt}}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<footer class="post-card-meta">
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
|
||||
<div class="author-name-tooltip">
|
||||
{{name}}
|
||||
</div>
|
||||
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="static-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
@ -60,8 +51,8 @@
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
<div class="post-card-byline-content">
|
||||
<span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
|
||||
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
|
||||
<span class="post-card-byline-author">{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
|
||||
<span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<div class="outer site-nav-main">
|
||||
<div class="inner">
|
||||
{{> "site-nav"}}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user