feat:update templaters
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 61 KiB |
@@ -23,21 +23,28 @@
|
||||
background: #1a1a1a;
|
||||
background-image: url("{{image}}");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-position: center bottom 400px;
|
||||
}
|
||||
|
||||
/* 顶部区域 */
|
||||
.top-section {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 120px;
|
||||
font-size: 100px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
@@ -51,7 +58,7 @@
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 36px;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
color: #000;
|
||||
@@ -65,7 +72,7 @@
|
||||
/* 底部文字区域 */
|
||||
.bottom-section {
|
||||
position: absolute;
|
||||
bottom: 200px;
|
||||
top: 1000px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
@@ -73,7 +80,7 @@
|
||||
}
|
||||
|
||||
.main-text {
|
||||
font-size: 60px;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
text-shadow: -2px -2px 0 #000,
|
||||
@@ -101,6 +108,8 @@
|
||||
<div class="subtitle">{{subtitle=作者}}</div>
|
||||
</div>
|
||||
|
||||
<!-- <img class="img" src="{{image}}" alt="内容图片"> -->
|
||||
|
||||
<!-- 底部文字区 -->
|
||||
<div class="bottom-section">
|
||||
<div class="main-text">{{text}}</div>
|
||||
|
||||
@@ -20,11 +20,11 @@
|
||||
|
||||
/* 顶部标题区(约25%)*/
|
||||
.top {
|
||||
height: 25%;
|
||||
height: 20%;
|
||||
background: #e8d5cc; /* 淡棕粉色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 80px 60px;
|
||||
}
|
||||
@@ -76,7 +76,7 @@
|
||||
background: #f8f6f4; /* 浅灰白色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -100,9 +100,9 @@
|
||||
background: #e8d5cc; /* 与顶部相同颜色 */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.bottom-decoration {
|
||||
|
||||
@@ -47,9 +47,8 @@
|
||||
/* 中间图片区域 */
|
||||
.image-section {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 40px;
|
||||
box-sizing: border-box;
|
||||
@@ -103,7 +102,7 @@
|
||||
/* 底部文字区域 */
|
||||
.bottom-text-section {
|
||||
width: 100%;
|
||||
padding: 0px 60px 90px 60px;
|
||||
padding: 0 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -114,7 +113,7 @@
|
||||
|
||||
/* 人生感悟 - 大红色粗体 */
|
||||
.highlight-text {
|
||||
font-size: 80px;
|
||||
font-size: 40px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3px;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
/* 顶部黑底标题区 */
|
||||
.top {
|
||||
height: 30%;
|
||||
height: 20%;
|
||||
background: #0a0a0a;
|
||||
padding: 100px 70px 40px;
|
||||
display: flex;
|
||||
@@ -47,7 +47,7 @@
|
||||
/* 将图片中心对齐到整页正中心(与标题无关) */
|
||||
.media {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 86%;
|
||||
@@ -78,7 +78,7 @@
|
||||
3px 3px 0 #000;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) { .title { font-size: 84px; } .caption { font-size: 48px; bottom: 300px; } }
|
||||
@media (max-width: 1080px) { .title { font-size: 84px; } .caption { font-size: 48px; bottom: 600px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||