diff --git a/web/card1.png b/web/card1.png new file mode 100644 index 0000000..cf7bfdc Binary files /dev/null and b/web/card1.png differ diff --git a/web/wall.html b/web/wall.html index 6b7f264..c0edab7 100644 --- a/web/wall.html +++ b/web/wall.html @@ -379,31 +379,46 @@ #card-title { font-size: 1.02rem; color: #f5f5f0; } #card-date { font-size: .85rem; color: #b9b9b0; margin-top: 2px; } #card-contrib { font-size: .82rem; color: #cdd8e0; margin-top: 10px; } + /* the card is centred text; the tree needs a common left edge, so it is a + left-aligned block that is itself centred */ /* the card is centred text; the tree needs a common left edge, so it is a left-aligned block that is itself centred */ #card-tags { width: fit-content; max-width: 100%; margin: 14px auto 0; text-align: left; - font-family: system-ui, sans-serif; font-size: .72rem; line-height: 1.5; color: #b8c6d1; + font-family: system-ui, sans-serif; font-size: .8rem; line-height: 1.5; color: #b8c6d1; } #card-tags:empty { display: none; } #card-tags .tn { position: relative; margin-left: 6px; padding-left: 15px; border-left: 1px solid rgba(127,168,201,.3); } - #card-tags > .tn { margin-left: 0; padding-left: 0; border-left: 0; } - #card-tags .tl { padding: 2px 0; overflow-wrap: anywhere; } + #card-tags > .tn { margin-left: 0; padding-left: 0; border-left: 0; margin-top: 4px; } + #card-tags .tl { padding: 4px 0; overflow-wrap: anywhere; } + #card-tags .tl[role="button"] { cursor: pointer; border-radius: 4px; } + #card-tags .tl[role="button"]:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(127,168,201,.6); } + #card-tags .tl[role="button"]:focus-visible { outline: 1px solid var(--f-accent, #7fa8c9); outline-offset: 2px; } /* elbow from the parent's line to this label */ #card-tags .tn .tn > .tl::before { - content: ''; position: absolute; left: 0; top: .82em; width: 10px; border-top: 1px solid rgba(127,168,201,.3); + content: ''; position: absolute; left: 0; top: 1.05em; width: 10px; border-top: 1px solid rgba(127,168,201,.3); } #card-tags .tn .tn:last-child { border-left-color: transparent; } #card-tags .tn .tn:last-child::after { - content: ''; position: absolute; left: -1px; top: 0; height: .82em; border-left: 1px solid rgba(127,168,201,.3); + content: ''; position: absolute; left: -1px; top: 0; height: 1.05em; border-left: 1px solid rgba(127,168,201,.3); } #card-tags .tn.place > .tl { color: #e6eef5; font-weight: 600; } #card-tags .tn.topic > .tl { color: #b8c6d1; } - #card-tags .to { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } - #card-tags .to span { - font-size: .64rem; line-height: 1.7; padding: 0 8px; border-radius: 999px; - background: rgba(127,168,201,.12); border: 1px solid rgba(127,168,201,.22); + #card-tags .tn.group > .tl { color: #8fa6b8; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; } + #card-tags .tm { margin-top: 10px; font-size: .7rem; color: #7d8a94; letter-spacing: .02em; } + #card-tags .more { + all: unset; cursor: pointer; margin: 2px 0 2px 15px; padding: 4px 0; font-size: .72rem; color: #7fa8c9; } + #card-tags .more:hover { text-decoration: underline; } + #card-related { margin: 16px 0 0; text-align: left; } + #card-related h4 { margin: 0 0 6px; font: 600 .66rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8fa6b8; } + #card-related .rel { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } + #card-related .rel button { all: unset; flex: 0 0 auto; cursor: pointer; border-radius: 3px; overflow: hidden; line-height: 0; } + #card-related .rel img { width: 64px; height: 64px; object-fit: cover; display: block; opacity: .85; } + #card-related .rel button:hover img, #card-related .rel button:focus-visible img { opacity: 1; } + #card-img-wrap.zoom { overflow: auto; max-height: 72dvh; cursor: zoom-out; -webkit-overflow-scrolling: touch; } + #card-img-wrap.zoom #card-img { width: 220%; max-width: none; } + #card-img { cursor: zoom-in; } #card-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-family: system-ui, sans-serif; font-size: .68rem; letter-spacing: .04em; color: #888; @@ -601,17 +616,29 @@
- +
+
+ + +
+
+ + +
+
+ + +
@@ -635,6 +662,7 @@
—
+