From f27ea9278f7f63111e0c8d03b4d9d9c361c66dc6 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Wed, 24 Apr 2024 13:46:16 +0200 Subject: [PATCH] feat: show avatar; adjust layout --- templates/threads.html | 97 ++++++++++++++++++++++++++---------------- 1 file changed, 61 insertions(+), 36 deletions(-) diff --git a/templates/threads.html b/templates/threads.html index 9056e66..d6b3eb2 100644 --- a/templates/threads.html +++ b/templates/threads.html @@ -10,14 +10,13 @@ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; max-width: 570px; margin: 0 auto; - padding: 1em; } - header { + header, footer { background: linear-gradient(45deg, #3054bf, #416fff); color: white; - width: 100%; padding: 1em; border-radius: 5px; + margin: 1em 0; } summary { cursor: pointer; @@ -27,30 +26,43 @@ list-style: none; } .card { - display:block; margin-left: -40px; margin-top: 1em; - border: 1px solid rgba(34, 34, 34, 0.15); + border: 1px solid rgba(34, 34, 34, 0.35); border-radius: 5px; padding:1em; background-color: #fff; box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15); - } - .card_meta { - font-size: small; color: #888; + display: grid; + grid-template-columns: 55px auto; + gap: 5px; } .card_content { + width & * { margin-top: 1em; } + & img, & video { border-radius: 5px; max-width: 100%; - height: 300px; object-fit: cover; } + + & .meta { + font-size: small; color: #888; + + } } + + .card_avatar img { + border: 1px solid rgba(34, 34, 34, 0.35); + border-radius: 50%; + display: inline; + width: 50px; + } + @@ -62,10 +74,18 @@ +