keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-11-03 23:59:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Post access indicator

Browse Source
This commit is contained in:
Sodbileg Gansukh
2022-05-26 14:31:14 +08:00
parent 7a86c6fd92
commit 0bf84b2b80
5 changed files with 63 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

25
assets/css/screen.css
View File

@@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 932 B

47
partials/post-card.hbs
View File

@@ -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>