github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize post-gallery style

Browse Source
This commit is contained in:
Mimi 2020-07-30 13:12:30 +08:00
parent 52e5d7ce69
commit 5883e29ad3
5 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
layout/_macro/post.njk
View File

@ -14,6 +14,15 @@
<meta itemprop="name" content="{{ title }}"> <meta itemprop="name" content="{{ title }}">
</span> </span>
{# Gallery support #}
{%- if post.photos and post.photos.length %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{%- for photo in post.photos %}
<div class="post-gallery-image" style="background-image: url({{ url_for(photo) }});" itemprop="contentUrl"></div>
{%- endfor %}
</div>
{%- endif %}
{%- if post.header !== false %} {%- if post.header !== false %}
<header class="post-header"> <header class="post-header">
<{%- if is_index %}h2{% else %}h1{%- endif %} class="post-title{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="name headline"> <{%- if is_index %}h2{% else %}h1{%- endif %} class="post-title{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="name headline">
@ -163,16 +172,6 @@
{### POST BODY ###} {### POST BODY ###}
{#################} {#################}
<div class="post-body{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody"> <div class="post-body{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody">
{# Gallery support #}
{%- if post.photos and post.photos.length %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{%- for photo in post.photos %}
<img src="{{ url_for(photo) }}" itemprop="contentUrl">
{%- endfor %}
</div>
{%- endif %}
{%- if is_index %} {%- if is_index %}
{%- if post.description and theme.excerpt_description %} {%- if post.description and theme.excerpt_description %}
<p>{{ post.description }}</p> <p>{{ post.description }}</p>

25
source/css/_common/components/post/post-gallery.styl
View File

@ -1,20 +1,19 @@
.post-gallery { .post-gallery {
align-items: center; display: flex;
display: grid; margin-bottom: 60px;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 20px;
+mobile() { .post-gallery-image {
grid-template-columns: 1fr 1fr; background-size: cover;
flex: 1;
height: 200px;
&:not(:first-child) {
clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
margin-left: -20px;
} }
a { &:not(:last-child) {
// For fancybox margin-right: -20px;
border: 0;
} }
img {
margin: 0;
} }
} }

6
source/css/_common/components/post/post-header.styl
View File

@ -1,12 +1,13 @@
.posts-expand .post-header { .posts-expand .post-header {
font-size: $font-size-large; font-size: $font-size-large;
margin-bottom: 60px;
text-align: center;
} }
.posts-expand .post-title { .posts-expand .post-title {
font-size: $font-size-largest; font-size: $font-size-largest;
font-weight: normal; font-weight: normal;
margin: initial; margin: initial;
text-align: center;
word-wrap(); word-wrap();
if (hexo-config('post_edit.enable')) { if (hexo-config('post_edit.enable')) {
@ -62,8 +63,7 @@
color: $grey-dark; color: $grey-dark;
font-family: $font-family-posts; font-family: $font-family-posts;
font-size: $font-size-smallest; font-size: $font-size-smallest;
margin: 3px 0 60px 0; margin-top: 3px;
text-align: center;
.post-description { .post-description {
font-size: $font-size-small; font-size: $font-size-small;

4
source/css/_common/outline/mobile.styl
View File

@ -13,8 +13,8 @@
// For all schemes wider width. // For all schemes wider width.
.posts-expand { .posts-expand {
.post-meta { .post-header {
margin: 3px 0 10px 0 !important; margin-bottom: 10px !important;
} }
} }

7
source/css/_schemes/Mist/_posts-expand.styl
View File

@ -2,7 +2,7 @@
// -------------------------------------------------- // --------------------------------------------------
.posts-expand { .posts-expand {
&.index { &.index {
.post-title, .post-meta { .post-header {
text-align: $site-meta-text-align; text-align: $site-meta-text-align;
+mobile() { +mobile() {
@ -11,7 +11,7 @@
} }
.post-meta { .post-meta {
margin: 5px 0 20px 0; margin-top: 5px;
} }
} }
@ -23,7 +23,8 @@
margin-top: 120px; margin-top: 120px;
} }
.post-title, .post-meta { .post-header {
margin-bottom: 20px;
text-align: center; text-align: center;
} }