主页
This commit is contained in:
+266
-1
@@ -437,6 +437,33 @@ a {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
#welcome-info,
|
||||
#welcome-ip-location-info {
|
||||
margin: 0.65em 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #596068;
|
||||
line-height: 1.9;
|
||||
--kouseki-welcome-color: #66c8f5;
|
||||
--kouseki-ip-color: #66c8f5;
|
||||
--kouseki-gl-size: 16px;
|
||||
}
|
||||
|
||||
#welcome-info b span.ip-mask,
|
||||
#welcome-ip-location-info b span.ip-mask {
|
||||
display: inline-block;
|
||||
filter: blur(6px);
|
||||
transition: filter 0.3s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#welcome-info b span.ip-mask:hover,
|
||||
#welcome-info b span.ip-mask:active,
|
||||
#welcome-ip-location-info b span.ip-mask:hover,
|
||||
#welcome-ip-location-info b span.ip-mask:active {
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.calendar-widget,
|
||||
.schedule-widget {
|
||||
display: grid;
|
||||
@@ -716,11 +743,12 @@ time {
|
||||
}
|
||||
|
||||
.article {
|
||||
--article-padding: clamp(24px, 5vw, 48px);
|
||||
width: min(var(--article-width), calc(100% - (var(--page-gutter) * 2)));
|
||||
margin: 64px auto 84px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.58);
|
||||
border-radius: 8px;
|
||||
padding: clamp(24px, 5vw, 48px);
|
||||
padding: var(--article-padding);
|
||||
background:
|
||||
radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
|
||||
linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
|
||||
@@ -733,17 +761,231 @@ time {
|
||||
}
|
||||
|
||||
.article-header {
|
||||
position: relative;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.article-header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article-header h1 {
|
||||
margin: 8px 0 0;
|
||||
font-size: clamp(2rem, 6vw, 3.3rem);
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.article-header-cover {
|
||||
display: grid;
|
||||
align-items: end;
|
||||
min-height: clamp(320px, 40vw, 460px);
|
||||
margin: calc(var(--article-padding) * -1) calc(var(--article-padding) * -1) 34px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: clamp(86px, 13vw, 150px) var(--article-padding) clamp(28px, 6vw, 52px);
|
||||
color: #fff;
|
||||
background: #5d7f78;
|
||||
}
|
||||
|
||||
.article-header-cover::before,
|
||||
.article-header-cover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.article-header-cover::before {
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(23, 55, 48, 0.42), rgba(23, 55, 48, 0.18) 38%, rgba(12, 31, 28, 0.68)),
|
||||
linear-gradient(90deg, rgba(13, 55, 49, 0.52), rgba(19, 90, 79, 0.14) 54%, rgba(13, 55, 49, 0.36));
|
||||
}
|
||||
|
||||
.article-header-cover::after {
|
||||
z-index: 2;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -90px 110px rgba(10, 28, 26, 0.34);
|
||||
}
|
||||
|
||||
.article-header-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: saturate(0.9) contrast(0.94);
|
||||
}
|
||||
|
||||
.article-header-cover .article-header-content {
|
||||
z-index: 3;
|
||||
max-width: 900px;
|
||||
text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
|
||||
}
|
||||
|
||||
.article-header-cover time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-header-cover h1 {
|
||||
max-width: 920px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
|
||||
font-size: clamp(2.4rem, 6vw, 4.2rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.article-hero-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px 12px;
|
||||
align-items: center;
|
||||
margin-top: 18px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.article-hero-meta span,
|
||||
.article-hero-meta a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-hero-meta span:not(:first-child)::before,
|
||||
.article-hero-meta a::before {
|
||||
content: "|";
|
||||
margin-right: 12px;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.article-hero-meta a:hover {
|
||||
color: #d8fff5;
|
||||
}
|
||||
|
||||
.article-summary-card {
|
||||
position: relative;
|
||||
margin: 0 0 30px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(133, 162, 153, 0.34);
|
||||
border-radius: 8px;
|
||||
padding: 34px 20px 16px;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
|
||||
linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)),
|
||||
rgba(245, 250, 246, 0.78);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 14px 34px rgba(58, 51, 38, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||
}
|
||||
|
||||
.article-summary-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
border-bottom: 1px solid rgba(133, 162, 153, 0.18);
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.article-summary-dots {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-summary-dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(1) {
|
||||
background: #ff6b63;
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(2) {
|
||||
background: #ffc247;
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(3) {
|
||||
background: #4ecb71;
|
||||
}
|
||||
|
||||
.article-summary-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
color: #59615f;
|
||||
font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.article-summary-caret {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 1.1em;
|
||||
margin-left: 3px;
|
||||
vertical-align: -0.16em;
|
||||
background: var(--accent);
|
||||
animation: summary-caret-blink 0.9s steps(1) infinite;
|
||||
}
|
||||
|
||||
.article-summary-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
color: rgba(85, 95, 94, 0.56);
|
||||
font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.article-summary-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-summary-brand span {
|
||||
color: rgba(15, 118, 110, 0.56);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.article-summary-model {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes summary-caret-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prose :where(h2, h3, h4) {
|
||||
scroll-margin-top: 110px;
|
||||
margin-top: 2em;
|
||||
@@ -1377,6 +1619,29 @@ time {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.article-header-cover {
|
||||
min-height: 300px;
|
||||
padding-top: 92px;
|
||||
}
|
||||
|
||||
.article-header-cover h1 {
|
||||
font-size: clamp(2rem, 11vw, 3rem);
|
||||
}
|
||||
|
||||
.article-hero-meta {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.article-summary-card {
|
||||
padding: 34px 16px 16px;
|
||||
}
|
||||
|
||||
.article-summary-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.post-copyright-card {
|
||||
padding: 22px 18px 18px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user