diff --git a/home.html b/home.html index 7d92361f..8c6daa6d 100644 --- a/home.html +++ b/home.html @@ -119,25 +119,27 @@ @media (max-width: 980px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cards-grid { grid-template-columns: 1fr; } } - .card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - gap: 8px; padding: 18px 14px 16px; min-height: 148px; - background: var(--card); border: 1px solid var(--line); border-radius: 14px; + .card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; + gap: 14px; padding: 14px 16px; min-height: 92px; + background: rgba(20,26,36,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; cursor: pointer; position: relative; transition: transform .12s, background .12s, border-color .12s; } - .card:hover { background: var(--card-hi); border-color: rgba(75,123,236,.4); transform: translateY(-1px); } - .card .card-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; + .card:hover { background: rgba(20,26,36,.72); border-color: rgba(75,123,236,.4); transform: translateY(-1px); } + .card .card-left { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; } + .card .card-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--iconBg, transparent); display: flex; align-items: center; justify-content: center; color: var(--iconFg, #e7eaf1); font-weight: 700; font-size: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .card .card-ico svg, .card .card-ico img { width: 100%; height: 100%; display: block; } - .card .card-title { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } + .card .card-title { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 1.2; } .card .card-title .tld { color: var(--acid); font-weight: 700; letter-spacing: .3px; text-shadow: 0 0 8px rgb(from var(--acid) r g b / .35); } - .card .card-sub { font-size: 12px; color: var(--mut); text-align: center; line-height: 1.35; - display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - overflow: hidden; max-width: 100%; } + .card .card-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--mut); text-align: left; line-height: 1.4; + display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; + overflow: hidden; } .card:hover .card-sub { color: var(--ink); } .card.dragging { opacity: .6; } .card.drag-before::before, .card.drag-after::after { @@ -225,12 +227,12 @@
A browser that follows the thread. Names that live on the Bitcoin Cash chain.
+A browser that follows the thread. Names that live on decentralized blockchain.
-Tip: type a .bch name in the address bar above to open a decentralized site.
+Tip: type hello.bch in the address bar above to open a decentralized site.