home3: small-joys rail polished to 'little jewels' (CD spec — focal points, watermarks, accent tags, gradients)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -145,22 +145,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- "small joys" rail: three evenly-weighted daily delights (placeholder content) -->
|
||||
<!-- "small joys" rail — little jewels: focal point + watermark + tag + soft gradient -->
|
||||
<div class="joys">
|
||||
<div class="joy joy-word">
|
||||
<span class="label">WORD OF THE DAY</span>
|
||||
<p class="word-line"><span class="word">Serene</span> <span class="word-meta">adj · /səˈriːn/</span></p>
|
||||
<span class="def">Calm, peaceful, and untroubled.</span>
|
||||
<span class="wm" aria-hidden="true">S</span>
|
||||
<div class="joy-in">
|
||||
<div class="tag"><span class="rule"></span><span class="tag-label">Word of the day</span></div>
|
||||
<p class="word-line"><span class="word">Serene</span> <span class="word-pos">adj.</span></p>
|
||||
<p class="word-pron">/səˈriːn/</p>
|
||||
<p class="def">Calm, peaceful, and untroubled. The quiet after a storm passes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="joy joy-quote">
|
||||
<span class="label">QUOTE OF THE DAY</span>
|
||||
<span class="qglyph" aria-hidden="true">“</span>
|
||||
<span class="quote">Very little is needed to make a happy life.</span>
|
||||
<span class="quote-by">Marcus Aurelius</span>
|
||||
<span class="wm wm-q" aria-hidden="true">“</span>
|
||||
<div class="joy-in">
|
||||
<div class="tag"><span class="rule"></span><span class="tag-label">Quote of the day</span></div>
|
||||
<p class="quote">Very little is needed to make a happy life.</p>
|
||||
<div class="attrib"><span class="attrib-rule"></span><span class="attrib-by">Marcus Aurelius</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="joy joy-fact">
|
||||
<div class="joy-top"><span class="label">A GOOD THING TODAY</span><span class="soon">SOON</span></div>
|
||||
<span class="fact">In 1928, penicillin was discovered by a happy accident.</span>
|
||||
<div class="joy-in">
|
||||
<div class="joy-top">
|
||||
<div class="tag"><span class="rule"></span><span class="tag-label">A good thing today</span></div>
|
||||
<span class="soon">SOON</span>
|
||||
</div>
|
||||
<p class="fact-hero"><span class="year">1928</span> <span class="onthis">ON THIS DAY</span></p>
|
||||
<p class="fact">Penicillin was discovered by a happy accident.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,22 +325,39 @@
|
||||
.moment-line { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.3; color: #214a35; margin: 14px 0 0; }
|
||||
.moment-meta { margin-top: auto; padding-top: 16px; font-size: 13px; color: #6f9683; }
|
||||
|
||||
/* "small joys" rail — three evenly-weighted daily delights, each its own quiet tint */
|
||||
/* "small joys" rail — little jewels: one big focal point per card, a faint oversized
|
||||
watermark glyph, an accent-tag label, soft diagonal gradient + long low shadow. */
|
||||
.joys { flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
|
||||
.joy { border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
||||
.joy-word { background: #f1ece1; border: 1px solid #e6ddc9; }
|
||||
.joy-quote { background: #f2ecf6; border: 1px solid #e4d8ee; }
|
||||
.joy-fact { background: #e8f2ea; border: 1px solid #cfe5d4; }
|
||||
.joy .label { color: var(--muted); }
|
||||
.word-line { margin: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
|
||||
.joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 19px; color: var(--ink); }
|
||||
.word-meta { font-size: 12px; color: var(--muted); font-style: italic; }
|
||||
.joy .def { font-size: 12.5px; color: var(--body); line-height: 1.4; }
|
||||
.qglyph { font-family: 'Newsreader', Georgia, serif; font-size: 26px; line-height: 1; height: 13px; color: #b9a8d6; }
|
||||
.joy .quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 14px; line-height: 1.3; color: #2d2a25; }
|
||||
.quote-by { font-size: 11.5px; color: var(--muted); }
|
||||
.joy { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 24px; }
|
||||
.joy-in { position: relative; } /* content sits above the watermark */
|
||||
.wm { position: absolute; font-family: 'Newsreader', Georgia, serif; line-height: 1; pointer-events: none; }
|
||||
|
||||
.joy-word { background: linear-gradient(165deg, #FBF3E2, #F6EAD2); border: 1px solid #ecdcbb; box-shadow: 0 10px 30px -22px rgba(120, 85, 20, 0.6); --accent: #bd8f33; --rule: #D2861B; }
|
||||
.joy-word .wm { right: -14px; bottom: -30px; font-size: 150px; font-weight: 400; color: rgba(193, 150, 60, 0.09); }
|
||||
.joy-quote { background: linear-gradient(165deg, #F2ECF9, #E9E0F4); border: 1px solid #ddd0ee; box-shadow: 0 10px 30px -22px rgba(90, 60, 140, 0.6); --accent: #8857C2; --rule: #8857C2; }
|
||||
.joy-quote .wm { left: 14px; top: -26px; font-size: 120px; color: rgba(136, 87, 194, 0.16); }
|
||||
.joy-fact { background: linear-gradient(165deg, #E9F4EB, #DCEDDF); border: 1px solid #cee6d3; box-shadow: 0 10px 30px -22px rgba(40, 120, 75, 0.55); --accent: #3F9A66; --rule: #3F9A66; }
|
||||
|
||||
.tag { display: flex; align-items: center; gap: 8px; }
|
||||
.tag .rule { width: 18px; height: 2px; border-radius: 2px; background: var(--rule); }
|
||||
.tag-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
|
||||
.word-line { margin: 14px 0 0; display: flex; align-items: baseline; gap: 9px; }
|
||||
.joy .word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; color: #3a2f1c; }
|
||||
.word-pos { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #b39a64; }
|
||||
.word-pron { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 13px; color: #b39a64; margin: 3px 0 0; }
|
||||
.joy .def { font-size: 13.5px; color: #6b5d44; margin: 12px 0 0; line-height: 1.5; }
|
||||
|
||||
.joy .quote { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.3; color: #2f2240; margin: 26px 0 0; }
|
||||
.attrib { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
|
||||
.attrib-rule { width: 22px; height: 1px; background: #b69ad8; }
|
||||
.attrib-by { font-family: 'Newsreader', Georgia, serif; font-size: 13px; color: #7c64a0; }
|
||||
|
||||
.joy-fact .joy-top { display: flex; align-items: center; justify-content: space-between; }
|
||||
.fact { font-size: 13px; line-height: 1.4; color: var(--body); }
|
||||
.fact-hero { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; }
|
||||
.year { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 30px; color: #1e5b3b; line-height: 0.9; }
|
||||
.onthis { font-size: 11px; color: #6f9683; letter-spacing: 0.04em; }
|
||||
.joy .fact { font-family: 'Newsreader', Georgia, serif; font-size: 16px; color: #214a35; margin: 10px 0 0; line-height: 1.34; }
|
||||
|
||||
.foot {
|
||||
text-align: center; max-width: 1180px; width: 100%; margin: 14px auto 0; box-sizing: border-box;
|
||||
|
||||
Reference in New Issue
Block a user