Refine p8.css: warm poem background, 18px corners, dark golden border

- Use solid #f3e9d0 for .poem light-mode background (average of 7% papere.jpg overlay)

- Refined dark mode color palette

- 18px border-radius (12px on mobile) for #main/.poem/.sitem

- Golden 1px border and shadow for #main/.poem/.sitem in dark mode
This commit is contained in:
hesamat 2026-08-21 12:10:17 -07:00
parent b10e278367
commit f62504458d

View File

@ -66,19 +66,19 @@
:root {
color-scheme: dark;
--bg-page: #081018;
--card-paper: #121922;
--card-poem: #161e2a;
--card-inner: #1d2530;
--card-nested: #252e3a;
--bg-page: #14120f;
--card-paper: #181510;
--card-poem: #1c1916;
--card-inner: #242019;
--card-nested: #2d2620;
--ink-black: #e6edf3;
--text-muted: #9aa4af;
--ink-black: #e7ded0;
--text-muted: #9e9185;
--lapis: #f0f6fc;
--lapis-hover: #78b7ff;
--gold: #c9a050;
--gold-light: #30363d;
--gold-light: #3a322b;
--brand: #d4553a;
--gold-subtle: #2a2418;
--border-gold: #9b7332;
@ -207,7 +207,7 @@ form:after, form div:after {
margin: 18px auto;
display: block;
border: 2px solid var(--accent-border);
border-radius: 10px;
border-radius: 18px;
padding: 0;
background-color: var(--card-poem);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
@ -219,7 +219,7 @@ form:after, form div:after {
.sitem {
margin: 16px auto;
padding: 24px 16px;
border-radius: 5px;
border-radius: 12px;
}
}
@ -228,6 +228,10 @@ form:after, form div:after {
padding: 0;
}
.poem {
background-color: #f3e9d0;
}
.poem p {
text-indent: 20px;
text-align: justify;
@ -235,6 +239,19 @@ form:after, form div:after {
margin-right: 16px;
}
@media (prefers-color-scheme: dark) {
.poem {
background-color: var(--card-poem);
}
#main, .sitem, .poem {
border-width: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
0 16px 36px -14px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(201, 160, 80, 0.08);
}
}
.poem-excerpt a {
color: var(--brand);
-webkit-text-fill-color: var(--brand);