Skip to content

Commit 1ec165c

Browse files
dyedddyedd
committed
feat: 内容页的美化和首页的摘要突出
1 parent 702cb68 commit 1ec165c

File tree

6 files changed

+132
-156
lines changed

6 files changed

+132
-156
lines changed

‎assets/css/comments.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@
6565
}
6666
.comment-content .emoji {
6767
width: 4.8rem;
68-
height: 4.8rem;
6968
}
7069
.comment-author .time {
7170
margin-left: .5rem;

‎assets/css/main.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
--text4: #e4e7ed;
2424
--routine: #606266;
2525
--border: #dee2e6;
26+
--color1:#ff4e6a;
27+
--color1-bg: rgba(255,78,106,0.15);
28+
--color2: #ffb900;
29+
--color2-bg: rgba(255,118,30,0.15);
30+
--color3-bg: #0083ee;
31+
--color4: #33d57a;;
32+
--color4-bg: rgba(51,213,122,0.15);
2633
}
2734
a, a:hover {
2835
text-decoration: none;
@@ -233,6 +240,24 @@ a, a:hover {
233240
.carousel-item {
234241
max-height: 25rem;
235242
}
243+
.carousel-caption {
244+
width: 100%;
245+
position: sticky;
246+
bottom: 0;
247+
}
248+
.carousel-caption h5::after {
249+
content: '';
250+
background-image: linear-gradient(to top, rgba(16,16,16,0.35) 25%, rgba(16,16,16,0) 100%);
251+
pointer-events: none;
252+
background-size: cover;
253+
display: block;
254+
height: 100%;
255+
left: 0;
256+
position: absolute;
257+
bottom: 0;
258+
width: 100%;
259+
z-index: -1;
260+
}
236261

237262
.carousel_link {
238263
color: #fff;
@@ -468,6 +493,13 @@ ol.carousel-indicators li.active {
468493
color: var(--theme-text-color);
469494
line-height: 1.5;
470495
word-wrap: break-word;
496+
background: #f0f8ff;
497+
border-radius: 0.5rem;
498+
padding: 1rem;
499+
}
500+
.describe.gallery,.describe.pic,.describe.text {
501+
background: none;
502+
padding: 0;
471503
}
472504
.describe h1,.describe h2,.describe h3,.describe h4,.describe h5,.describe h6 {
473505
font-size: 1.5rem!important;

‎assets/css/post.css‎

Lines changed: 52 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
line-height: 2.5rem;
55
}
66
.article-info {
7-
position: relative;
87
margin-top: -1rem;
98
background-color: var(--background);
9+
padding: 0 2rem;
1010
}
1111
.no-cover .article-detail {
1212
color: var(--text2);
@@ -23,20 +23,17 @@
2323
.article-cover-inner {
2424
height: 25rem;
2525
overflow: hidden;
26-
}
27-
.article-cover-inner::after {
28-
content: '';
29-
width: 100%;
30-
height: 10%;
31-
position: absolute;
32-
bottom: 0;
33-
left: 0;
34-
background: linear-gradient(to top, rgba(255, 255, 255, 0.87), transparent);
26+
position: relative;
27+
border-radius: 1.5rem;
3528
}
3629
.article-cover-inner img {
3730
object-fit: cover;
3831
width: 100%;
3932
height: 100%;
33+
position: absolute;
34+
left: 0;
35+
top: 0;
36+
display: block;
4037
}
4138
.article-title span {
4239
font-weight: 700;
@@ -52,67 +49,65 @@
5249
color: var(--theme-color);
5350
}
5451
.article-detail {
55-
position: absolute;
56-
color: #fff;
57-
width: 100%;
58-
bottom: 2.5rem;
59-
}
60-
.article-detail.page {
61-
width: auto;
62-
left: 50%;
63-
top: 50%;
64-
transform: translate(-50%,-50%);
65-
}
66-
.article-detail.page span {
67-
font-size: 5rem;
52+
margin: 2rem 0 -2rem;
6853
}
6954
.post-info {
70-
position: relative;
71-
padding: 1.5rem 1.5rem 0.5rem 8rem;
72-
text-shadow: var(--text-shadow);
73-
font-weight: 800;
74-
}
75-
.post-info .created {
76-
float: right;
77-
font-size: 1.25rem;
78-
color: var(--text2);
79-
}
80-
.post-info .avatar {
81-
position: absolute;
82-
width: 4.8rem;
83-
height: 4.8rem;
84-
left: 1.5rem;
85-
top: 1.7rem;
86-
}
87-
.post-info .avatar img {
88-
width: 4.8rem;
89-
height: 4.8rem;
90-
border-radius: .8rem;
91-
}
92-
.post-info .display .name {
93-
font-size: 1.25rem;
94-
}
95-
.post-info .extra {
9655
display: flex;
9756
align-items: center;
9857
font-size: 1.3rem;
9958
}
10059
.post-info-icon {
101-
margin-top: .5rem;
10260
margin-right: 1rem;
61+
border-radius: 2rem;
62+
padding: .5rem;
63+
display: flex;
64+
align-items: center;
65+
}
66+
.post-info-icon:nth-child(1) {
67+
background-color: var(--color1-bg);
68+
color: var(--color1);
69+
}
70+
.post-info-icon:nth-child(2) {
71+
background-color: var(--color4-bg);
72+
color: var(--color4);
73+
}
74+
.post-info-icon:nth-child(3) {
75+
background-color: var(--color3-bg);
76+
color: var(--background);
10377
}
10478
.article-info.no-cover .article-title {
10579
position: relative;
106-
text-align: left;
80+
padding: 0;
81+
}
82+
.article-info.no-cover .article-title::after {
83+
content: '';
84+
background: none;
10785
}
10886
.article-title {
109-
padding: 0 0 0 1.5rem;
110-
text-align: center;
87+
position: absolute;
88+
bottom: 0;
89+
color: #fff;
90+
font-size: 2.5rem;
91+
width: 100%;
92+
box-sizing: border-box;
93+
text-transform: none;
94+
margin: 0;
95+
padding: 2.4rem;
96+
z-index: 1;
97+
text-shadow: 0 .1rem .3rem rgba(0,0,0,0.251);
11198
}
112-
@media (max-width: 500px){
113-
.article-title {
114-
margin-bottom: -3.5rem!important;
115-
}
99+
.article-title::after {
100+
content: '';
101+
background-image: linear-gradient(to top, rgba(16,16,16,0.35) 25%, rgba(16,16,16,0) 100%);
102+
pointer-events: none;
103+
background-size: cover;
104+
display: block;
105+
height: 100%;
106+
left: 0;
107+
position: absolute;
108+
bottom: 0;
109+
width: 100%;
110+
z-index: -1;
116111
}
117112
.article-main {
118113
background: var(--background);

‎component/page.content.php‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
<section class="article-info">
33
<div class="article-cover-inner">
44
<img src="<?= $this->fields->banner ?: utils::indexTheme('assets/img/default.jpg'); ?>" alt="cover">
5-
</div>
6-
<div class="article-detail">
75
<h1 class="article-title">
86
<?php if ($this->user->hasLogin()): ?>
97
<a class="article-edit" title="编辑"
@@ -14,30 +12,22 @@
1412
<span><?php $this->title(); ?></span>
1513
<?php endif; ?>
1614
</h1>
15+
</div>
16+
<div class="article-detail">
1717
<div class="post-info">
18-
<div class="created">
19-
<time datetime="<?php $this->date('c'); ?>"><?php $this->date(); ?></time>
18+
<div class="post-info-icon">
19+
<svg class="icon" aria-hidden="true">
20+
<use xlink:href="#icon-redu"></use>
21+
</svg>
22+
<?php utils::getPostView($this); ?>阅读
2023
</div>
21-
<div class="avatar">
22-
<img src="<?php utils::emailHandle($this->author->mail) ?>s=100"
23-
alt="<?php $this->author->screenName() ?>">
24-
</div>
25-
<div class="display">
26-
<div class="name"><?php $this->author->screenName(); ?></div>
27-
</div>
28-
<div class="extra">
29-
<div class="post-info-icon">
30-
<svg class="icon" aria-hidden="true">
31-
<use xlink:href="#icon-redu"></use>
32-
</svg>
33-
<?php utils::getPostView($this); ?>阅读
34-
</div>
35-
<div class="post-info-icon">
36-
<svg class="icon" aria-hidden="true">
37-
<use xlink:href="#icon-pinglun"></use>
38-
</svg>
39-
<?php $this->commentsNum(); ?>条评论
40-
</div>
24+
<div class="post-info-icon"></div>
25+
<div class="post-info-icon">
26+
<svg class="icon" aria-hidden="true">
27+
<use xlink:href="#icon-shijian"></use>
28+
</svg>
29+
<time datetime="<?php $this->date('c'); ?>">
30+
<?php $this->date(); ?></time>
4131
</div>
4232
</div>
4333
</div>

0 commit comments

Comments
 (0)