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:
parent
b10e278367
commit
f62504458d
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user