diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 65cd09a..28a2889 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -145,22 +145,34 @@ - +
- WORD OF THE DAY -

Serene adj · /səˈriːn/

- Calm, peaceful, and untroubled. + +
+
Word of the day
+

Serene adj.

+

/səˈriːn/

+

Calm, peaceful, and untroubled. The quiet after a storm passes.

+
- QUOTE OF THE DAY - - Very little is needed to make a happy life. - Marcus Aurelius + +
+
Quote of the day
+

Very little is needed to make a happy life.

+
Marcus Aurelius
+
-
A GOOD THING TODAYSOON
- In 1928, penicillin was discovered by a happy accident. +
+
+
A good thing today
+ SOON +
+

1928 ON THIS DAY

+

Penicillin was discovered by a happy accident.

+
@@ -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;