1---
2import { WALL_COLUMNS } from "../../data/sentiment";
3import Card from "./SentimentCard.astro";
4
5/** What people say about Alchemy: three hand-ordered columns of post cards. */
6---
7
8<div class="snt-cols">
9 {
10 WALL_COLUMNS.map((col) => (
11 <ul class="snt-col" role="list">
12 {col.map((p) => (
13 <li>
14 <Card post={p} />
15 </li>
16 ))}
17 </ul>
18 ))
19 }
20</div>
21
22<style>
23 /* ---------- card ---------- */
24 :global(.snt-card) {
25 box-sizing: border-box;
26 display: flex;
27 flex-direction: column;
28 gap: 12px;
29 height: 100%;
30 padding: 18px 20px;
31 border: 1px solid var(--alc-hairline-2);
32 border-radius: 14px;
33 background: color-mix(in srgb, var(--alc-bg-elev-1) 75%, transparent);
34 color: inherit;
35 text-decoration: none;
36 transition:
37 border-color 160ms ease,
38 transform 160ms ease;
39 }
40 :global(a.snt-card:hover) {
41 border-color: color-mix(in srgb, var(--alc-accent) 55%, transparent);
42 transform: translateY(-2px);
43 }
44 :global(a.snt-card:focus-visible) {
45 outline: 2px solid var(--alc-accent);
46 outline-offset: 2px;
47 }
48 :global(.snt-card__head) {
49 display: flex;
50 align-items: center;
51 gap: 10px;
52 }
53 :global(.snt-avatar) {
54 flex: none;
55 display: block;
56 width: 32px;
57 height: 32px;
58 border-radius: 50%;
59 object-fit: cover;
60 border: 1px solid var(--alc-hairline-2);
61 }
62 :global(.snt-card__who) {
63 display: flex;
64 flex-direction: column;
65 min-width: 0;
66 line-height: 1.25;
67 }
68 :global(.snt-card__name) {
69 font-size: 14px;
70 font-weight: 600;
71 color: var(--alc-fg-1);
72 }
73 :global(.snt-handle) {
74 font-size: 12.5px;
75 color: var(--alc-fg-3);
76 }
77 :global(.snt-card__x) {
78 margin-left: auto;
79 flex: none;
80 color: var(--alc-fg-3);
81 }
82 :global(.snt-card__text) {
83 margin: 0;
84 font-size: 14.5px;
85 line-height: 1.6;
86 color: var(--alc-fg-2);
87 white-space: pre-line;
88 }
89
90 /* ---------- wall: fixed columns so the order is exactly as curated ---------- */
91 .snt-cols {
92 display: grid;
93 grid-template-columns: repeat(3, minmax(0, 1fr));
94 gap: 16px;
95 align-items: start;
96 }
97 .snt-col {
98 list-style: none;
99 margin: 0;
100 padding: 0;
101 display: grid;
102 gap: 16px;
103 }
104 @media (max-width: 900px) {
105 .snt-cols {
106 grid-template-columns: repeat(2, minmax(0, 1fr));
107 }
108 .snt-col:last-child {
109 grid-column: 1 / -1;
110 grid-template-columns: repeat(2, minmax(0, 1fr));
111 }
112 }
113 @media (max-width: 640px) {
114 .snt-cols,
115 .snt-col:last-child {
116 grid-template-columns: minmax(0, 1fr);
117 }
118 /* Phones: a short sample instead of a very long single column. */
119 .snt-col:nth-child(2) > li:nth-child(n + 3),
120 .snt-col:nth-child(3) {
121 display: none;
122 }
123 }
124</style>