pleroma-like client for Bluesky
pl.hexmani.ac
hexmani.ac
bluesky
pleroma
social-media
1@use "../vars";
2
3$currentColor: #1185fe;
4
5.dashboard-feed {
6 font-size: 0.95rem;
7 display: flex;
8 flex-direction: column;
9 overflow: scroll;
10 p {
11 color: #8d8d8d;
12 }
13 max-width: 600px;
14 width: 100%;
15 min-width: 0;
16
17 @media (max-width: 850px) {
18 max-width: 500px;
19 }
20
21 @media (max-width: 768px) {
22 max-width: 100%;
23 margin: 0;
24 padding: 0;
25 }
26}
27
28.post {
29 display: flex;
30 flex-direction: column;
31 gap: 0.1rem;
32 margin: 0.5rem 0;
33 border-bottom: 1px solid #444;
34 min-width: 0;
35 width: 100%;
36}
37
38.post-context {
39 display: flex;
40 gap: 0.5rem;
41 padding-left: 2.5rem;
42 padding-bottom: 0.5rem;
43 max-height: 32px;
44 align-items: center;
45 text-align: left;
46
47 .post-context-user {
48 color: $currentColor;
49 }
50
51 span {
52 color: rgba(185, 185, 186, 0.5);
53 }
54
55 span:first-of-type {
56 margin-left: 0.5rem;
57 }
58
59 img {
60 max-height: 24px;
61 border-radius: 5px;
62 }
63
64 svg {
65 max-height: 16px;
66 border-radius: 5px;
67 }
68
69 @media (max-width: 850px) {
70 span:first-of-type {
71 margin-left: 0rem;
72 }
73 }
74
75 @media (max-width: 768px) {
76 padding-left: 2rem;
77 gap: 0.34rem;
78
79 span:first-of-type {
80 margin-left: 0.1rem;
81 }
82 }
83}
84
85.post-content {
86 display: flex;
87 flex-direction: row;
88 gap: 1rem;
89 padding-left: 1rem;
90 min-width: 0;
91
92 @media (max-width: 850px) {
93 gap: 0.75rem;
94 padding-left: 0.75rem;
95 }
96
97 @media (max-width: 768px) {
98 padding-left: 0.5rem;
99 gap: 0.5rem;
100 }
101}
102
103.post-main {
104 display: flex;
105 flex-direction: column;
106 gap: 0.5rem;
107 flex: 1;
108 min-width: 0;
109 overflow-wrap: break-word;
110}
111
112.post-avatar {
113 width: 48px;
114 height: 48px;
115 border-radius: 5px;
116 flex-shrink: 0;
117
118 @media (max-width: 768px) {
119 width: 48px;
120 height: 48px;
121 }
122}
123
124.post-header {
125 display: flex;
126 flex-direction: row;
127 align-items: flex-start;
128 justify-content: space-between;
129 text-align: left;
130 width: 100%;
131 min-width: 0;
132 gap: 1rem;
133
134 .post-author {
135 display: flex;
136 gap: 0.5rem;
137 align-items: baseline;
138 min-width: 0;
139 flex: 1;
140 overflow: hidden;
141
142 span {
143 white-space: nowrap;
144 overflow: hidden;
145 text-overflow: ellipsis;
146 }
147
148 .post-author-handle {
149 color: #1185fe;
150 }
151 }
152
153 .post-time {
154 color: #8d8d8d;
155 white-space: nowrap;
156 flex-shrink: 0;
157 margin-left: auto;
158 margin-right: 1rem;
159 }
160
161 @media (max-width: 850px) {
162 .post-author {
163 span {
164 max-width: 150px;
165 }
166 }
167 }
168
169 @media (max-width: 768px) {
170 flex-direction: row;
171 align-items: flex-start;
172 justify-content: space-between;
173
174 .post-author {
175 flex-direction: column;
176 align-items: flex-start;
177 gap: 0.25rem;
178 flex: none;
179 max-width: calc(100% - 80px);
180
181 span {
182 white-space: normal;
183 overflow-wrap: break-word;
184 word-break: break-word;
185 max-width: none;
186 overflow: visible;
187 text-overflow: clip;
188 }
189 }
190
191 .post-time {
192 align-self: flex-start;
193 }
194 }
195}
196
197.post-body {
198 text-align: left;
199 margin-top: 0.25rem;
200 margin-right: 1rem;
201 overflow-wrap: break-word;
202 word-break: break-word;
203
204 @media (max-width: 850px) {
205 margin-right: 0.75rem;
206 }
207
208 @media (max-width: 768px) {
209 margin-right: 0.5rem;
210 }
211}
212
213.post-interactions {
214 text-align: left;
215 margin-left: 1rem;
216
217 @media (max-width: 850px) {
218 margin-left: 0.75rem;
219 }
220
221 @media (max-width: 768px) {
222 margin-left: 0.5rem;
223 }
224}