Skip to content

Commit

Permalink
ui: post content page added cover display
Browse files Browse the repository at this point in the history
  • Loading branch information
@XPoet
XPoet committed Sep 6, 2023
1 parent 082b637 commit 90ef133
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 84 deletions.
167 changes: 90 additions & 77 deletions layout/article-content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,108 +3,121 @@

<div class="article-content-container border-box">

<div class="article-title">
<span class="title-hover-animation"><%= page.title %></span>
</div>
<% if (page?.cover) { %>
<div class="article-content-top border-box">
<div class="cover-article-title text-ellipsis">
<%= page.title %>
</div>
<img class="post-cover" src="<%= page.cover %>" alt="<%= page.title %>">
</div>
<% } %>
<% if (theme?.base_info?.author || config?.author) { %>
<div class="article-header border-box">
<% if (theme?.style?.avatar) { %>
<div class="avatar-box border-box">
<%- image_tag(theme?.style?.avatar) %>
</div>
<% } %>
<div class="info-box">
<div class="author">
<span class="name"><%= theme?.base_info?.author || config?.author %></span>
<% if (theme?.post?.author_label?.enable === true) { %>
<span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
<% } %>
<div class="article-content-bottom border-box<%= page?.cover ? ' has-cover' : '' %>">
<% if (!page?.cover) { %>
<div class="article-title">
<span class="title-hover-animation"><%= page.title %></span>
</div>
<% } %>
<% if (theme?.base_info?.author || config?.author) { %>
<div class="article-header border-box">
<% if (theme?.style?.avatar) { %>
<div class="avatar-box border-box">
<%- image_tag(theme?.style?.avatar) %>
</div>
<% } %>
<div class="info-box">
<div class="author">
<span class="name"><%= theme?.base_info?.author || config?.author %></span>
<% if (theme?.post?.author_label?.enable === true) { %>
<span class="author-label"><%- getAuthorLabel(site.posts.length, theme?.post?.author_label) %></span>
<% } %>
</div>
<div class="meta-info border-box">
<%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
</div>
</div>
</div>
<% } else { %>
<div class="article-header-meta-info">
<div class="meta-info border-box">
<%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
</div>
</div>
</div>
<% } else { %>
<div class="article-header-meta-info">
<div class="meta-info border-box">
<%- partial('_partial/article-meta-info', { post: page, page_type: 'post' }) %>
</div>
</div>
<% } %>
<div class="article-content keep-markdown-body">
<% if (page?.aging === true) { %>
<div class="article-aging-tips"
data-update-date="<%= page.updated %>"
data-aging-days="<%= page?.aging_days %>"
>
<i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
</div>
<% } %>
<%- page.content %>
</div>
<div class="article-content keep-markdown-body">
<% if (page?.aging === true) { %>
<div class="article-aging-tips"
data-update-date="<%= page.updated %>"
data-aging-days="<%= page?.aging_days %>"
>
<i class="fa-solid fa-circle-exclamation"></i><%- __('article-aging', '<span class="days">0</span>') %>
</div>
<% } %>
<% if (
(theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
) { %>
<div class="post-copyright-info">
<%- partial('_partial/article-copyright-info') %>
<%- page.content %>
</div>
<% } %>
<% if (page.tags.length) { %>
<ul class="post-tags-box">
<% page.tags.forEach((tag) => { %>
<li class="tag-item">
<a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
</li>
<% }); %>
</ul>
<% } %>
<% if (
(theme?.post?.copyright_info === true || theme?.copyright_info?.enable === true) && page?.copyright_info !== false
) { %>
<div class="post-copyright-info">
<%- partial('_partial/article-copyright-info') %>
</div>
<% } %>
<% if (page.prev || page.next) { %>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev"
rel="prev"
href="<%= url_for(page.prev.path) %>"
>
<% if (page.tags.length) { %>
<ul class="post-tags-box">
<% page.tags.forEach((tag) => { %>
<li class="tag-item">
<a href="<%- url_for(tag.path) %>"><i class="icon fas fa-hashtag"></i><%= tag.name %></a>&nbsp;
</li>
<% }); %>
</ul>
<% } %>
<% if (page.prev || page.next) { %>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev"
rel="prev"
href="<%= url_for(page.prev.path) %>"
>
<span class="left arrow-icon flex-center">
<i class="fas fa-chevron-left"></i>
</span>
<span class="title flex-center">
<span class="title flex-center">
<span class="post-nav-title-item text-ellipsis"><%= page.prev.title %></span>
<span class="post-nav-item"><%= __('prev_posts') %></span>
</span>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next"
rel="next"
href="<%= url_for(page.next.path) %>"
>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next"
rel="next"
href="<%= url_for(page.next.path) %>"
>
<span class="title flex-center">
<span class="post-nav-title-item text-ellipsis"><%= page.next.title %></span>
<span class="post-nav-item"><%= __('next_posts') %></span>
</span>
<span class="right arrow-icon flex-center">
<span class="right arrow-icon flex-center">
<i class="fas fa-chevron-right"></i>
</span>
</a>
</div>
<% } %>
</div>
<% } %>
</a>
</div>
<% } %>
</div>
<% } %>
<% if (page?.comment !== false) { %>
<%- partial('_partial/comment/comment') %>
<% } %>
<% if (page?.comment !== false) { %>
<%- partial('_partial/comment/comment') %>
<% } %>
</div>
</div>
<% if (is_post() && theme?.toc?.enable === true && page?.toc !== false) { %>
Expand Down
2 changes: 1 addition & 1 deletion layout/home-content.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<% if (post?.cover) { %>
<div class="home-article-item-top border-box"
style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '8rem' %>"
style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '9.2rem' %>"
>
<% if (post.sticky) { %>
<div class="post-sticky-box cover">
Expand Down
11 changes: 7 additions & 4 deletions source/css/common/variables.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,9 @@ $primary-color-dark-2 = darken($primary-color, 20%)
// theme light mode color set
// ==============================================================================================
$background-color-1 = #fff
$background-color-2= darken($background-color-1, 3%)
$background-color-3= darken($background-color-1, 6%)
$background-color-1-transparent = alpha($background-color-1, 0.6)
$background-color-2 = darken($background-color-1, 3%)
$background-color-3 = darken($background-color-1, 6%)
$content-background-color = #fff

$text-color-3 = #50505c
Expand Down Expand Up @@ -125,8 +126,9 @@ $post-h-bottom-border-color = alpha($text-color-3, 0.15)
// theme dark mode color set
// ==============================================================================================
$dark-background-color-1 = #22272e
$dark-background-color-2= lighten($dark-background-color-1, 4%)
$dark-background-color-3= lighten($dark-background-color-1, 8%)
$dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6)
$dark-background-color-2 = lighten($dark-background-color-1, 4%)
$dark-background-color-3 = lighten($dark-background-color-1, 8%)
$dark-content-background-color = darken($dark-background-color-1, 2%)

$dark-text-color-3 = #adbac5
Expand Down Expand Up @@ -180,6 +182,7 @@ root-color(mode) {

// background color
--background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
--background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent
--background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
--background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3

Expand Down
58 changes: 57 additions & 1 deletion source/css/layout/article-content.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ $arrow-icon-width = 1rem
$post-nav-max-width = 14rem
$article-title-font-size = 1.6rem
$toc-container-width = 15rem
$spacer-padding = 2rem


.post-page-container {
Expand Down Expand Up @@ -38,9 +39,10 @@ $toc-container-width = 15rem
order 0
width 100%
height 100%
overflow hidden


keep-container(1, 2rem, 2rem)
keep-container(1, 0, 2rem)

+keep-mobile() {
padding 1.2rem 0.6rem
Expand All @@ -52,6 +54,60 @@ $toc-container-width = 15rem
}


.article-content-top {
display flex
align-items flex-end
width 100%
height 12rem
padding $spacer-padding * 0.5
overflow hidden
background-color var(--background-color-2)


+keep-tablet() {
height 10rem

.cover-article-title {
font-size $article-title-font-size * 0.9
}
}


.cover-article-title {
position relative
z-index $z-index-1
box-sizing border-box
max-width 100%
padding $spacer-padding * 0.5
color var(--text-color-2)
font-weight 600
font-size $article-title-font-size
background var(--background-color-1-transparent)
border-radius var(--box-border-radius)
backdrop-filter blur(2px)
}


.post-cover {
position absolute
top 0
left 0
box-sizing border-box
width 100%
height 100%
object-fit cover
}
}


.article-content-bottom {
padding $spacer-padding

&.has-cover {
padding-top $spacer-padding * 0.5
}
}

.article-title {
color var(--text-color-2)
font-weight 600
Expand Down
2 changes: 1 addition & 1 deletion source/css/layout/home-content.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
height 100%
object-fit cover
transform-origin center center
transition-t("transform", "0.1", "1", "linear")
transition-t("transform", "0", "1", "linear")

&:hover {
transform scale(1.03)
Expand Down

0 comments on commit 90ef133

Please sign in to comment.