mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-07-03 15:41:26 +00:00
Compare commits
No commits in common. "db6deb3205dea40f3b51540e6f6bd7282bd8e8ec" and "b10aec8d15fba6b21178bc38d7ddbfa6bf9df8a7" have entirely different histories.
db6deb3205
...
b10aec8d15
10 changed files with 308 additions and 624 deletions
|
|
@ -90,9 +90,9 @@ const t = getTranslations(lang);
|
|||
margin-bottom: 1rem;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--deep-red) 0 14px,
|
||||
#ef5a6f 0 14px,
|
||||
transparent 14px 28px,
|
||||
var(--deep-blue) 28px 42px,
|
||||
#536493 28px 42px,
|
||||
transparent 42px 56px
|
||||
);
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -26,20 +26,6 @@ const t = getTranslations(lang);
|
|||
</details>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
document.addEventListener("click", (event) => {
|
||||
const nav = document.querySelector(".site-nav-mobile");
|
||||
|
||||
if (!nav) return;
|
||||
|
||||
const target = event.target as Node;
|
||||
|
||||
if (!nav.contains(target)) {
|
||||
nav.removeAttribute("open");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.site-nav {
|
||||
margin: 1rem 0;
|
||||
|
|
@ -56,9 +42,9 @@ const t = getTranslations(lang);
|
|||
height: 12px;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--deep-red) 0 14px,
|
||||
#ef5a6f 0 14px,
|
||||
transparent 14px 28px,
|
||||
var(--deep-blue) 28px 42px,
|
||||
#536493 28px 42px,
|
||||
transparent 42px 56px
|
||||
);
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,118 +0,0 @@
|
|||
<dialog id="image-preview-dialog" class="image-preview-dialog">
|
||||
<button class="image-preview-close" aria-label="关闭图片预览">×</button>
|
||||
|
||||
<img id="image-preview-img" alt="" />
|
||||
|
||||
<a
|
||||
id="image-preview-download"
|
||||
class="image-preview-download"
|
||||
href="#"
|
||||
aria-label="下载图片"
|
||||
title="下载图片"
|
||||
>
|
||||
<svg
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3v12m0 0 5-5m-5 5-5-5M5 21h14"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</dialog>
|
||||
<script is:inline>
|
||||
function initImagePreview() {
|
||||
const dialog = document.getElementById("image-preview-dialog");
|
||||
const previewImg = document.getElementById("image-preview-img");
|
||||
const closeBtn = dialog?.querySelector(".image-preview-close");
|
||||
const downloadBtn = document.getElementById("image-preview-download");
|
||||
|
||||
if (!dialog || !previewImg || !closeBtn || !downloadBtn) return;
|
||||
|
||||
let currentImageUrl = "";
|
||||
|
||||
function getFileNameFromUrl(url) {
|
||||
try {
|
||||
const pathname = new URL(url, window.location.href).pathname;
|
||||
return pathname.split("/").pop() || "image";
|
||||
} catch {
|
||||
return "image";
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadImage(url) {
|
||||
const response = await fetch(url, {
|
||||
mode: "cors",
|
||||
credentials: "omit",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch image");
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = blobUrl;
|
||||
a.download = getFileNameFromUrl(url);
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
|
||||
a.remove();
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
}
|
||||
|
||||
document.querySelectorAll("article img").forEach((img) => {
|
||||
if (img.dataset.previewBound === "true") return;
|
||||
img.dataset.previewBound = "true";
|
||||
|
||||
img.addEventListener("click", () => {
|
||||
const imageUrl = img.currentSrc || img.src;
|
||||
|
||||
currentImageUrl = imageUrl;
|
||||
previewImg.src = imageUrl;
|
||||
previewImg.alt = img.alt || "";
|
||||
|
||||
dialog.showModal();
|
||||
});
|
||||
});
|
||||
|
||||
downloadBtn.addEventListener("click", async (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!currentImageUrl) return;
|
||||
|
||||
try {
|
||||
await downloadImage(currentImageUrl);
|
||||
} catch (error) {
|
||||
// 如果 fetch 因为跨域失败，就退回到直接打开图片
|
||||
window.open(currentImageUrl, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
});
|
||||
|
||||
function closePreview() {
|
||||
dialog.close();
|
||||
previewImg.removeAttribute("src");
|
||||
currentImageUrl = "";
|
||||
}
|
||||
|
||||
closeBtn.addEventListener("click", closePreview);
|
||||
|
||||
dialog.addEventListener("click", (event) => {
|
||||
if (event.target === dialog) {
|
||||
closePreview();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initImagePreview);
|
||||
document.addEventListener("astro:page-load", initImagePreview);
|
||||
</script>
|
||||
|
|
@ -83,56 +83,31 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
<style>
|
||||
.post-menu {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.post-menu-title {
|
||||
margin: 0 0 0.7rem;
|
||||
padding-top: 0.65rem;
|
||||
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(65, 65, 65, 0.8) 0,
|
||||
rgba(65, 65, 65, 0.8) 8px,
|
||||
transparent 8px,
|
||||
transparent 14px
|
||||
);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 14px 2px;
|
||||
background-position: top left;
|
||||
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.72;
|
||||
margin: 0 0 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.post-menu-list {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 0.9rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.post-menu-list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0.15rem;
|
||||
top: 0.25rem;
|
||||
bottom: 0.25rem;
|
||||
width: 1px;
|
||||
background: rgba(128, 128, 128, 0.55);
|
||||
padding: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.post-menu-item {
|
||||
position: relative;
|
||||
margin: 0.42rem 0;
|
||||
line-height: 1.45;
|
||||
margin: 0.45rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-menu-item.depth-3 {
|
||||
padding-left: 0.85rem;
|
||||
padding-left: 1rem;
|
||||
opacity: 0.82;
|
||||
font-size: 0.94em;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.post-menu a {
|
||||
|
|
@ -148,25 +123,13 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1300px) {
|
||||
.post-menu {
|
||||
--content-width: 90ch;
|
||||
--menu-width: clamp(
|
||||
140px,
|
||||
calc((100vw - 1200px) * 0.42 + 140px),
|
||||
260px
|
||||
);
|
||||
--menu-gap: 0rem;
|
||||
|
||||
--menu-width: 180px;
|
||||
position: fixed;
|
||||
top: 8.5rem;
|
||||
width: var(--menu-width);
|
||||
|
||||
left: calc(
|
||||
50vw - var(--content-width) / 2 - var(--menu-gap) -
|
||||
var(--menu-width)
|
||||
);
|
||||
|
||||
left: max(1rem, calc((100vw - 760px) / 4 - var(--menu-width) / 2));
|
||||
max-height: calc(100vh - 10rem);
|
||||
overflow: auto;
|
||||
padding: 0.2rem 0.2rem 0.2rem 0;
|
||||
|
|
@ -174,7 +137,7 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 1299px) {
|
||||
.post-menu-mobile-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -185,9 +148,9 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
z-index: 30;
|
||||
max-width: min(78vw, 22rem);
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1.5px solid var(--deep-blue);
|
||||
border: 1.5px solid rgba(123, 169, 255, 0.55);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: rgba(249, 242, 237, 0.92);
|
||||
backdrop-filter: blur(6px);
|
||||
color: inherit;
|
||||
font-size: 0.85rem;
|
||||
|
|
@ -234,26 +197,15 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
max-height: min(65vh, 32rem);
|
||||
overflow: auto;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1.5px solid var(--deep-blue);
|
||||
border: 1.5px solid rgba(128, 128, 128, 0.55);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.post-menu-title {
|
||||
padding-top: 0;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.post-menu.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:global(html.dark) .post-menu-mobile-toggle,
|
||||
:global(html.dark) .post-menu {
|
||||
background: var(--background-color-dark);
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -299,20 +251,19 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|||
const closeMenu = () => {
|
||||
panel.classList.remove("is-open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
document.addEventListener("click", (e) => {
|
||||
const target = e.target;
|
||||
if (!(target instanceof Node)) return;
|
||||
|
||||
const clickedInsidePanel = panel.contains(target);
|
||||
const clickedButton = btn.contains(target);
|
||||
|
||||
if (!clickedInsidePanel && !clickedButton) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const target = e.target;
|
||||
if (!(target instanceof Node)) return;
|
||||
|
||||
const clickedInsidePanel = panel.contains(target);
|
||||
const clickedButton = btn.contains(target);
|
||||
|
||||
if (!clickedInsidePanel && !clickedButton) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
const updateVisibility = () => {
|
||||
if (window.innerWidth >= 1200) {
|
||||
btn.classList.remove("is-visible");
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
|
|||
---
|
||||
|
||||
<div id="remark42"></div>
|
||||
|
||||
<script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
|
||||
function getTheme() {
|
||||
return document.documentElement.classList.contains("dark")
|
||||
|
|
@ -34,7 +35,6 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
|
|||
resolve(true);
|
||||
return;
|
||||
}
|
||||
|
||||
existing.addEventListener("load", () => resolve(true), {
|
||||
once: true,
|
||||
});
|
||||
|
|
@ -67,42 +67,16 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
|
|||
setRemarkConfig();
|
||||
await ensureScript();
|
||||
|
||||
if (!window.REMARK42) return;
|
||||
|
||||
if (typeof window.REMARK42.destroy === "function") {
|
||||
window.REMARK42.destroy();
|
||||
if (window.REMARK42) {
|
||||
if (typeof window.REMARK42.destroy === "function") {
|
||||
window.REMARK42.destroy();
|
||||
}
|
||||
if (typeof window.REMARK42.createInstance === "function") {
|
||||
node.innerHTML = "";
|
||||
window.REMARK42.createInstance(window.remark_config);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.REMARK42.createInstance === "function") {
|
||||
node.innerHTML = "";
|
||||
window.REMARK42.createInstance(window.remark_config);
|
||||
}
|
||||
}
|
||||
|
||||
function setupRemark42ThemeObserver() {
|
||||
if (window.__remark42ThemeObserver) {
|
||||
window.__remark42ThemeObserver.disconnect();
|
||||
}
|
||||
|
||||
let lastTheme = getTheme();
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
const currentTheme = getTheme();
|
||||
|
||||
if (currentTheme === lastTheme) return;
|
||||
|
||||
lastTheme = currentTheme;
|
||||
mountRemark42();
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
window.__remark42ThemeObserver = observer;
|
||||
}
|
||||
|
||||
mountRemark42();
|
||||
setupRemark42ThemeObserver();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import BaseLayout from "./BaseLayout.astro";
|
|||
import Remark42Embed from "@/components/Remark42Embed.astro";
|
||||
import PostNav from "@/components/Posts/PostNav.astro";
|
||||
import PostMenu from "@/components/Posts/PostMenu.astro";
|
||||
import Dialog from "@/components/Posts/Dialog.astro";
|
||||
import { fade } from "astro:transitions";
|
||||
import { getTranslations } from "@/i18n";
|
||||
import "@/styles/global.css";
|
||||
|
|
@ -82,8 +81,6 @@ const t = getTranslations(lang);
|
|||
<slot />
|
||||
</div>
|
||||
|
||||
<Dialog />
|
||||
|
||||
<PostNav post={post} lang={lang} />
|
||||
|
||||
<h2>{comments}</h2>
|
||||
|
|
@ -191,7 +188,7 @@ const t = getTranslations(lang);
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: #536493 1.5px solid;
|
||||
border: #285ee9 1.5px solid;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #222;
|
||||
/* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); */
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
.image-preview-dialog {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
max-width: min(96vw, 1200px);
|
||||
max-height: 96vh;
|
||||
}
|
||||
|
||||
.image-preview-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.image-preview-dialog img {
|
||||
display: block;
|
||||
max-width: 96vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.image-preview-close:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.image-preview-close:focus-visible {
|
||||
outline: 2px solid rgba(125, 162, 255, 0.9);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.image-preview-close {
|
||||
position: fixed;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 1;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-color-dark);
|
||||
font-size: 2.6rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* .image-preview-close:hover {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
} */
|
||||
|
||||
/* 给文章图片一个可点击提示 */
|
||||
.prose img,
|
||||
.markdown-body img,
|
||||
article img {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.image-preview-download {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: max(1.5rem, env(safe-area-inset-bottom));
|
||||
transform: translateX(-50%);
|
||||
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.4rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
opacity: 0.88;
|
||||
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.image-preview-download:hover {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
}
|
||||
|
||||
.image-preview-download:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.image-preview-download:focus-visible {
|
||||
outline: 2px solid rgba(125, 162, 255, 0.9);
|
||||
outline-offset: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
@import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/400.css");
|
||||
@import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/400-italic.css");
|
||||
@import url("https://unpkg.com/@fontsource/maple-mono@5.2.6/700.css");
|
||||
@import "./latest-comments.css";
|
||||
@import "./variables.css";
|
||||
@import "./dialog.css";
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
|
|
@ -46,8 +43,8 @@ html {
|
|||
serif;
|
||||
font-weight: 500;
|
||||
/* background-color: #ffffff; */
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
background-color: #F9F2ED;
|
||||
color: #0E2F56;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -161,4 +158,268 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.latest-comments {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.latest-comments h2 {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
height: 92px;
|
||||
margin: 0 0 14px 0;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(160, 175, 190, 0.06) 25%,
|
||||
rgba(160, 175, 190, 0.16) 50%,
|
||||
rgba(160, 175, 190, 0.06) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.latest-comments-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment-card {
|
||||
display: block;
|
||||
margin: 0 0 14px 0;
|
||||
padding: 0.6rem 1rem;
|
||||
border: 2px dashed #aeb8c2;
|
||||
background-color: #fbf5f2;
|
||||
|
||||
}
|
||||
|
||||
.comment-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
grid-template-areas:
|
||||
"info title"
|
||||
"text title";
|
||||
gap: 0.2rem 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.comment-card-info {
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-avatar-img,
|
||||
.comment-avatar-fallback {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-avatar-img {
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: #f3f5f7;
|
||||
}
|
||||
|
||||
.comment-avatar-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: rgba(160, 175, 190, 0.12);
|
||||
color: #5e6b77;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-author-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
min-width: 0;
|
||||
line-height: 1.3;
|
||||
font-style: italic;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
"Noto Sans CJK SC",
|
||||
"Source Han Sans SC",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: gray;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
color: #7a7a7a;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.comment-card-title {
|
||||
grid-area: title;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: right;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.comment-title-link {
|
||||
color: #6f8090;
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.comment-title-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment-card-text {
|
||||
grid-area: text;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
font-size: 0.93rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
"Noto Sans CJK SC",
|
||||
"Source Han Sans SC",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.comment-card-text :global(p),
|
||||
.comment-card-text p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-card-text :global(img),
|
||||
.comment-card-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.latest-comments-empty {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.comment-reply-sep {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.latest-comments .comment-reply-to {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: gray;
|
||||
opacity: 0.9;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
html.dark .latest-comments .comment-card,
|
||||
.dark .latest-comments .comment-card {
|
||||
border-color: #7f8c97;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
html.dark .comment-title-link {
|
||||
color: #c8d2dc;
|
||||
}
|
||||
|
||||
html.dark .comment-card-text {
|
||||
color: #d3d7db;
|
||||
}
|
||||
|
||||
html.dark .comment-time {
|
||||
color: #a8b0b7;
|
||||
}
|
||||
|
||||
html.dark .latest-comments .comment-avatar-fallback,
|
||||
.dark .latest-comments .comment-avatar-fallback {
|
||||
border-color: #7f8c97;
|
||||
background-color: #3a444d;
|
||||
color: #dbe3ea;
|
||||
}
|
||||
|
||||
:global(.dark) .comment-avatar-fallback {
|
||||
background: rgba(180, 190, 200, 0.12);
|
||||
color: #dbe3ea;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.comment-card-body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"info"
|
||||
"text";
|
||||
}
|
||||
|
||||
.comment-card-title {
|
||||
text-align: left;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.comment-title-link {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
.latest-comments {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.latest-comments h2 {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
height: 92px;
|
||||
margin: 0 0 14px 0;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(160, 175, 190, 0.06) 25%,
|
||||
rgba(160, 175, 190, 0.16) 50%,
|
||||
rgba(160, 175, 190, 0.06) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.latest-comments-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment-card {
|
||||
display: block;
|
||||
margin: 0 0 14px 0;
|
||||
padding: 0.6rem 1rem;
|
||||
border: 2px dashed #aeb8c2;
|
||||
background-color: #fbf5f2;
|
||||
|
||||
}
|
||||
|
||||
.comment-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
grid-template-areas:
|
||||
"info title"
|
||||
"text title";
|
||||
gap: 0.2rem 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.comment-card-info {
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-avatar-img,
|
||||
.comment-avatar-fallback {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.comment-avatar-img {
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: #f3f5f7;
|
||||
}
|
||||
|
||||
.comment-avatar-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed #aeb8c2;
|
||||
background: rgba(160, 175, 190, 0.12);
|
||||
color: #5e6b77;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-author-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
min-width: 0;
|
||||
line-height: 1.3;
|
||||
font-style: italic;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
"Noto Sans CJK SC",
|
||||
"Source Han Sans SC",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: gray;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
color: #7a7a7a;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.comment-card-title {
|
||||
grid-area: title;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: right;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.comment-title-link {
|
||||
color: #6f8090;
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.comment-title-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment-card-text {
|
||||
grid-area: text;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
font-size: 0.93rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"PingFang SC",
|
||||
"Hiragino Sans GB",
|
||||
"Microsoft YaHei",
|
||||
"Noto Sans CJK SC",
|
||||
"Source Han Sans SC",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.comment-card-text :global(p),
|
||||
.comment-card-text p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-card-text :global(img),
|
||||
.comment-card-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.latest-comments-empty {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.comment-reply-sep {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.latest-comments .comment-reply-to {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: gray;
|
||||
opacity: 0.9;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
html.dark .latest-comments .comment-card,
|
||||
.dark .latest-comments .comment-card {
|
||||
border-color: #7f8c97;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
html.dark .comment-title-link {
|
||||
color: #c8d2dc;
|
||||
}
|
||||
|
||||
html.dark .comment-card-text {
|
||||
color: #d3d7db;
|
||||
}
|
||||
|
||||
html.dark .comment-time {
|
||||
color: #a8b0b7;
|
||||
}
|
||||
|
||||
html.dark .latest-comments .comment-avatar-fallback,
|
||||
.dark .latest-comments .comment-avatar-fallback {
|
||||
border-color: #7f8c97;
|
||||
background-color: #3a444d;
|
||||
color: #dbe3ea;
|
||||
}
|
||||
|
||||
:global(.dark) .comment-avatar-fallback {
|
||||
background: rgba(180, 190, 200, 0.12);
|
||||
color: #dbe3ea;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.comment-card-body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"info"
|
||||
"text";
|
||||
}
|
||||
|
||||
.comment-card-title {
|
||||
text-align: left;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.comment-title-link {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
:root {
|
||||
--deep-blue: #536493;
|
||||
--deep-red: #ef5a6f;
|
||||
--background-color: #f9f2ed;
|
||||
--text-color: #0E2F56;
|
||||
|
||||
--background-color-dark: #1e1e1e;
|
||||
--text-color-dark: #e6e6e6;
|
||||
}
|
||||
Loading…
Reference in a new issue