admin/qipaobuzz-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: warm red theme + lantern logo + serif headings + favicon

Browse Source
This commit is contained in:
ed_it
2026-04-20 04:17:21 +00:00
parent 28ab757739
commit 7b078880de
3 changed files with 248 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/favicon.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg viewBox="0 0 60 80" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Lantern">
<defs>
<radialGradient id="lg" cx="35%" cy="35%" r="75%">
<stop offset="0%" stop-color="#E55A56"/>
<stop offset="65%" stop-color="#C73E3A"/>
<stop offset="100%" stop-color="#8B2A28"/>
</radialGradient>
</defs>
<path d="M 30 2 C 34 2 34 7 30 7" stroke="#8B5A2B" stroke-width="1.5" fill="none"/>
<rect x="22" y="7" width="16" height="3" rx="1" fill="#D4A24C"/>
<rect x="18" y="10" width="24" height="3" rx="1" fill="#B8893F"/>
<ellipse cx="30" cy="40" rx="24" ry="28" fill="url(#lg)"/>
<path d="M 10 40 Q 30 32 50 40" stroke="#7A221F" stroke-width="0.8" fill="none" opacity="0.55"/>
<path d="M 10 40 Q 30 48 50 40" stroke="#7A221F" stroke-width="0.8" fill="none" opacity="0.55"/>
<line x1="30" y1="13" x2="30" y2="67" stroke="#7A221F" stroke-width="0.5" opacity="0.35"/>
<rect x="18" y="67" width="24" height="3" rx="1" fill="#B8893F"/>
<rect x="22" y="70" width="16" height="3" rx="1" fill="#D4A24C"/>
<line x1="25" y1="73" x2="25" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
<line x1="30" y1="73" x2="30" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
<line x1="35" y1="73" x2="35" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

24
src/components/LanternLogo.astro Normal file
View File

@@ -0,0 +1,24 @@
---
const { size = 44 } = Astro.props;
---
<svg width={size} height={size * 80 / 60} viewBox="0 0 60 80" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Lantern" style="flex-shrink:0;">
<defs>
<radialGradient id="lanternBody" cx="35%" cy="35%" r="75%">
<stop offset="0%" stop-color="#E55A56"/>
<stop offset="65%" stop-color="#C73E3A"/>
<stop offset="100%" stop-color="#8B2A28"/>
</radialGradient>
</defs>
<path d="M 30 2 C 34 2 34 7 30 7" stroke="#8B5A2B" stroke-width="1.5" fill="none"/>
<rect x="22" y="7" width="16" height="3" rx="1" fill="#D4A24C"/>
<rect x="18" y="10" width="24" height="3" rx="1" fill="#B8893F"/>
<ellipse cx="30" cy="40" rx="24" ry="28" fill="url(#lanternBody)"/>
<path d="M 10 40 Q 30 32 50 40" stroke="#7A221F" stroke-width="0.8" fill="none" opacity="0.55"/>
<path d="M 10 40 Q 30 48 50 40" stroke="#7A221F" stroke-width="0.8" fill="none" opacity="0.55"/>
<line x1="30" y1="13" x2="30" y2="67" stroke="#7A221F" stroke-width="0.5" opacity="0.35"/>
<rect x="18" y="67" width="24" height="3" rx="1" fill="#B8893F"/>
<rect x="22" y="70" width="16" height="3" rx="1" fill="#D4A24C"/>
<line x1="25" y1="73" x2="25" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
<line x1="30" y1="73" x2="30" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
<line x1="35" y1="73" x2="35" y2="78" stroke="#D4A24C" stroke-width="0.9"/>
</svg>

274
src/layouts/Layout.astro
View File

@@ -1,5 +1,6 @@
--- ---
import { site } from '../lib/site.js'; import { site } from '../lib/site.js';
import LanternLogo from '../components/LanternLogo.astro';
const { const {
title, title,
@@ -23,6 +24,8 @@ const ads = site.ads;
<meta name="description" content={description} /> <meta name="description" content={description} />
{canonical && <link rel="canonical" href={canonical} />} {canonical && <link rel="canonical" href={canonical} />}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content={site.name} /> <meta property="og:site_name" content={site.name} />
<meta property="og:title" content={pageTitle} /> <meta property="og:title" content={pageTitle} />
@@ -50,53 +53,149 @@ const ads = site.ads;
)} )}
<style is:global> <style is:global>
:root {
--bg: #FFF5F0;
--surface: #FFFFFF;
--accent: #C73E3A;
--accent-soft: #E8D4CE;
--gold: #C89B4D;
--text: #2C1A15;
--muted: #8B6B5E;
--border: #EAD4CE;
--serif: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: var(--sans);
line-height: 1.6; line-height: 1.7;
color: #333; color: var(--text);
max-width: 800px; background: var(--bg);
background-image:
radial-gradient(circle at 10% 0%, #FFE9E0 0%, transparent 35%),
radial-gradient(circle at 90% 5%, #FFEBE2 0%, transparent 40%);
min-height: 100vh;
max-width: 860px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 24px 20px 40px;
} }
header { header {
border-bottom: 2px solid #eee; border-bottom: 1px solid var(--border);
padding-bottom: 20px; padding-bottom: 24px;
margin-bottom: 30px; margin-bottom: 36px;
} }
header h1 { margin-bottom: 10px; } .brand {
header nav a { display: flex;
margin-right: 20px; align-items: center;
gap: 14px;
margin-bottom: 8px;
text-decoration: none; text-decoration: none;
color: #666; color: var(--text);
}
.brand-name {
font-family: var(--serif);
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--accent);
line-height: 1;
}
.brand-tagline {
color: var(--muted);
font-style: italic;
font-size: 0.95rem;
margin: 6px 0 18px 58px;
}
header nav { margin-left: 58px; }
header nav a {
margin-right: 22px;
text-decoration: none;
color: var(--muted);
font-size: 0.95rem;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: border-color 0.15s, color 0.15s;
}
header nav a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
} }
header nav a:hover { color: #333; }
.post { .post {
border-bottom: 1px solid #eee; background: var(--surface);
padding: 20px 0; border: 1px solid var(--border);
border-radius: 10px;
padding: 22px 26px;
margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(139, 42, 40, 0.04);
transition: box-shadow 0.2s, transform 0.2s;
} }
.post-title { font-size: 1.5rem; margin-bottom: 10px; } .post:hover {
.post-title a { text-decoration: none; color: #333; } box-shadow: 0 6px 18px rgba(139, 42, 40, 0.08);
.post-title a:hover { color: #0066cc; } transform: translateY(-1px);
.post-meta { color: #999; font-size: 0.9rem; margin-bottom: 10px; }
.post-excerpt { color: #666; }
.post-content { line-height: 1.8; font-size: 1.1rem; }
.post-content h1, .post-content h2, .post-content h3 {
margin-top: 30px;
margin-bottom: 15px;
} }
.post-title {
font-family: var(--serif);
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 8px;
}
.post-title a { text-decoration: none; color: var(--text); }
.post-title a:hover { color: var(--accent); }
.post-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; }
.post-excerpt { color: #4a3a33; }
.post-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 32px 36px;
line-height: 1.85;
font-size: 1.08rem;
}
.post-content h1 {
font-family: var(--serif);
font-size: 2rem;
line-height: 1.2;
color: var(--text);
margin-bottom: 4px;
}
.post-content h2, .post-content h3 {
font-family: var(--serif);
margin-top: 32px;
margin-bottom: 12px;
color: var(--text);
}
.post-content h2 { font-size: 1.5rem; }
.post-content h3 { font-size: 1.2rem; }
.post-content p { margin-bottom: 16px; }
.post-content a { color: var(--accent); }
.post-content code { .post-content code {
background: #f4f4f4; background: #f8ece8;
padding: 2px 6px; padding: 2px 6px;
border-radius: 3px; border-radius: 3px;
font-size: 0.92em;
} }
.post-content pre { .post-content pre {
background: #f4f4f4; background: #f8ece8;
padding: 15px; padding: 15px;
border-radius: 5px; border-radius: 6px;
overflow-x: auto; overflow-x: auto;
} }
.post-content img { max-width: 100%; height: auto; } .post-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 14px 0;
}
.post-content blockquote {
border-left: 4px solid var(--accent);
margin: 16px 0;
padding: 4px 18px;
color: var(--muted);
background: #fff9f6;
}
.video-container { .video-container {
position: relative; position: relative;
padding-bottom: 56.25%; padding-bottom: 56.25%;
@@ -104,6 +203,7 @@ const ads = site.ads;
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
margin: 20px 0; margin: 20px 0;
border-radius: 6px;
} }
.video-container iframe { .video-container iframe {
position: absolute; position: absolute;
@@ -115,92 +215,124 @@ const ads = site.ads;
} }
.tiktok-embed { margin: 20px 0; } .tiktok-embed { margin: 20px 0; }
.twitter-tweet { margin: 20px auto; } .twitter-tweet { margin: 20px auto; }
.tag { .tag {
display: inline-block; display: inline-block;
background: #eee; background: var(--accent-soft);
padding: 2px 8px; color: var(--accent);
border-radius: 3px; padding: 2px 10px;
font-size: 0.85rem; border-radius: 999px;
margin-right: 5px; font-size: 0.78rem;
margin-right: 6px;
margin-top: 2px;
} }
.tag a { color: inherit; text-decoration: none; } .tag a { color: inherit; text-decoration: none; }
.tag:hover { background: var(--accent); color: #fff; }
.tag:hover a { color: #fff; }
.back-link { .back-link {
display: inline-block; display: inline-block;
margin-bottom: 20px; margin-bottom: 20px;
color: #0066cc; color: var(--accent);
text-decoration: none; text-decoration: none;
font-size: 0.92rem;
} }
.back-link:hover { text-decoration: underline; }
footer { footer {
margin-top: 50px; margin-top: 60px;
padding-top: 20px; padding-top: 24px;
border-top: 1px solid #eee; border-top: 1px solid var(--border);
color: #999; color: var(--muted);
font-size: 0.9rem; font-size: 0.88rem;
text-align: center;
} }
.pagination { .pagination {
margin-top: 50px; margin-top: 40px;
padding-top: 30px; padding-top: 24px;
border-top: 1px solid #eee; border-top: 1px solid var(--border);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.pagination-link { .pagination-link {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 18px;
background: #f4f4f4; background: var(--surface);
border-radius: 5px; border: 1px solid var(--border);
border-radius: 6px;
text-decoration: none; text-decoration: none;
color: #333; color: var(--text);
font-size: 0.92rem;
} }
.pagination-info { color: #666; } .pagination-link:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.pagination-info { color: var(--muted); font-size: 0.88rem; }
.related-posts { .related-posts {
margin-top: 60px; margin-top: 48px;
padding-top: 40px; padding-top: 32px;
border-top: 2px solid #eee; border-top: 1px solid var(--border);
} }
.related-posts h3 { .related-posts h3 {
font-size: 1.5rem; font-family: var(--serif);
margin-bottom: 25px; font-size: 1.35rem;
color: #333; margin-bottom: 20px;
color: var(--text);
} }
.related-posts-grid { .related-posts-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px; gap: 16px;
} }
.related-post-card { .related-post-card {
border: 1px solid #eee; background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 16px 18px;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
.related-post-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .related-post-card:hover { box-shadow: 0 4px 14px rgba(139, 42, 40, 0.1); }
.related-post-link { text-decoration: none; color: inherit; } .related-post-link { text-decoration: none; color: inherit; }
.related-post-link h4 { .related-post-link h4 {
font-size: 1.1rem; font-family: var(--serif);
margin-bottom: 10px; font-size: 1.02rem;
color: #333; margin-bottom: 8px;
color: var(--text);
} }
.related-post-excerpt { .related-post-excerpt {
font-size: 0.9rem; font-size: 0.88rem;
color: #666; color: var(--muted);
margin-bottom: 10px; margin-bottom: 8px;
line-height: 1.5; line-height: 1.5;
} }
.related-post-date { font-size: 0.8rem; color: #999; } .related-post-date { font-size: 0.78rem; color: var(--muted); }
.ad-slot { margin: 30px 0; text-align: center; }
.ad-slot-top { margin: 20px 0; } .ad-slot { margin: 26px 0; text-align: center; }
.ad-slot-in-article { margin: 30px 0; clear: both; } .ad-slot-top { margin: 14px 0 22px; }
.ad-slot-in-article { margin: 26px 0; clear: both; }
@media (max-width: 600px) { @media (max-width: 600px) {
body { padding: 16px 14px 30px; }
.post { padding: 18px 18px; }
.post-content { padding: 22px 20px; }
.related-posts-grid { grid-template-columns: 1fr; } .related-posts-grid { grid-template-columns: 1fr; }
.brand-name { font-size: 1.75rem; }
.brand-tagline, header nav { margin-left: 0; }
} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<h1><a href="/" style="text-decoration: none; color: #333;">{site.name}</a></h1> <a href="/" class="brand">
<p style="color: #666; margin-bottom: 15px;">{site.description}</p> <LanternLogo size={46} />
<span class="brand-name">{site.name}</span>
</a>
<p class="brand-tagline">{site.description}</p>
<nav> <nav>
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about/">About</a> <a href="/about/">About</a>
@@ -236,7 +368,7 @@ const ads = site.ads;
)} )}
<footer> <footer>
<p>&copy; {year} {site.name}. Powered by Astro.</p> <p>&copy; {year} {site.name}. Lantern in hand, stories in heart.</p>
</footer> </footer>
</body> </body>
</html> </html>