Post access indicator
This commit is contained in:
Sodbileg Gansukh
parent
7a86c6fd92
commit
0bf84b2b80
5 changed files with 63 additions and 18 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -624,6 +624,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
|
||||
.post-card-image-link {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
|
@ -634,6 +635,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
padding-bottom: 55%;
|
||||
}
|
||||
|
||||
.post-card:not(.post-access-public) .post-card-image-link::after {
|
||||
position: relative;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -651,6 +658,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
position: static;
|
||||
}
|
||||
|
||||
.post-card-access {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.post-card-content-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -703,6 +723,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.post-card-title svg {
|
||||
margin-top: -3px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.post-card-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
|
|
|||
5
partials/icons/lock.hbs
Normal file
5
partials/icons/lock.hbs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 932 B |
|
|
@ -1,23 +1,31 @@
|
|||
{{!-- 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 "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}}">
|
||||
<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}} post-access-{{visibility}}">
|
||||
|
||||
{{#if feature_image}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img class="post-card-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{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, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
<img class="post-card-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{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, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
{{^has visibility="public"}}
|
||||
<div class="post-card-access">
|
||||
{{> "icons/lock"}} Members-only
|
||||
</div>
|
||||
{{/has}}
|
||||
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-card-content">
|
||||
|
|
@ -32,7 +40,14 @@ which templates loop over to generate a list of posts. --}}
|
|||
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
<h2 class="post-card-title">
|
||||
{{^has visibility="public"}}
|
||||
{{#unless feature_image}}
|
||||
{{> "icons/lock"}}
|
||||
{{/unless}}
|
||||
{{/has}}
|
||||
{{title}}
|
||||
</h2>
|
||||
</header>
|
||||
{{#if excerpt}}
|
||||
<div class="post-card-excerpt">{{excerpt}}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue