friendship ended with social-app. php is my new best friend
veryroundbird.house
1div.post {
2 border-bottom: 1px var(--border-color) solid;
3 padding: 10px;
4 width: 100%;
5
6 &[data-status="unloaded"],
7 &[data-status="loading"] {
8 display: none;
9 }
10
11 .postHeader {
12 display: grid;
13 grid-template-areas: "avatar displayName"
14 "avatar handle";
15 grid-template-columns: 48px 1fr;
16 grid-template-rows: auto 1fr;
17 position: relative;
18 gap: 0 10px;
19 margin-bottom: 10px;
20 }
21
22 .avatar {
23 width: 48px;
24 height: 48px;
25 border-radius: 100%;
26 overflow: hidden;
27 grid-area: avatar;
28
29 img {
30 width: 48px;
31 height: 48px;
32 object-fit: cover;
33 }
34 }
35
36 .displayName {
37 grid-area: displayName;
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 font-weight: bold;
43 }
44 }
45
46 .handle {
47 grid-area: handle;
48
49 a {
50 text-decoration: none;
51 color: inherit;
52 font-size: .9em;
53 }
54 }
55
56 .timeAgo {
57 text-decoration: none;
58 color: inherit;
59 opacity: .9;
60 font-size: .9em;
61 position: absolute;
62 top: 0px;
63 right: 0px;
64 }
65
66 .postEmbeds {
67 max-width: 100%;
68 display: grid;
69 gap: 10px;
70 margin: 10px 0;
71
72 img {
73 max-width: 100%;
74 height: 100%;
75 object-fit: cover;
76 border: 1px var(--border-color) solid;
77 }
78
79 .btn-invis {
80 width: 100%;
81 height: 100%;
82 }
83
84 .video {
85 width: 100%;
86 }
87
88 video {
89 max-width: 100%;
90 width: 100%;
91 height: auto;
92 margin: 1em 0;
93 border: 1px var(--border-color) solid;
94 }
95
96 &.img-2 {
97 grid-template-columns: repeat(2, 1fr);
98 }
99
100 &.img-3 {
101 grid-template-areas: "one three"
102 "two three";
103 grid-template-columns: repeat(2, 1fr);
104 grid-template-rows: repeat(2, 1fr);
105
106 .img:nth-child(1) {
107 grid-area: one;
108 }
109 .img:nth-child(2) {
110 grid-area: two;
111 }
112 .img:nth-child(3) {
113 grid-area: three;
114 }
115 }
116
117 &.img-4 {
118 grid-template-columns: repeat(2, 1fr);
119 grid-template-rows: repeat(2, 1fr);
120 }
121
122 .record {
123 border: 1px var(--border-color) solid;
124 }
125
126 .externalLink {
127 border: 1px var(--border-color) solid;
128
129 .externalLinkImage {
130 width: 100%;
131 border-bottom: 1px var(--border-color) solid;
132
133 img {
134 border: none;
135 display: block;
136 height: auto;
137 width: 100%;
138 }
139 }
140
141 .externalLinkInfo {
142 padding: 10px;
143 }
144
145 .externalLinkTitle {
146 font-size: 1.5em;
147 margin-bottom: 0.5em;
148 }
149
150 .externalLinkUri {
151 font-size: .7em;
152 opacity: .7;
153 }
154
155 &:hover {
156 .externalLinkUri {
157 opacity: 1;
158 }
159 }
160
161 a {
162 color: inherit;
163 text-decoration: none;
164 }
165 }
166 }
167
168 .postFooter {
169 display: flex;
170 justify-content: space-between;
171 margin-top: 10px;
172 }
173}
174
175.actions,
176#interactions {
177 display: flex;
178 gap: 10px;
179
180 button {
181 font-family: inherit;
182 appearance: none;
183 border: none;
184 padding: 0;
185 color: inherit;
186 background-color: transparent;
187 cursor: pointer;
188 text-transform: lowercase;
189 }
190}
191
192#interactions {
193 border-bottom: 1px var(--border-color) solid;
194 padding: 10px;
195}
196
197#replies {
198 h2 {
199 text-transform: lowercase;
200 border-bottom: 1px var(--border-color) solid;
201 padding-bottom: 10px;
202 }
203}