A simple AtProto app to read pet.mewsse.link records on my PDS.
mewsse.pet
1html,
2body {
3 background: #0a0022;
4 color: #75beeb;
5 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
6 padding: 0;
7 margin: 0;
8 min-height: 100%;
9}
10
11html {
12 height: 100%;
13}
14
15body {
16 padding: 2vw;
17 min-height: 100%;
18 box-sizing: border-box;
19 background: rgb(136,7,74);
20 background: linear-gradient(180deg, rgba(136,7,74,1) 0%, rgba(21,1,53,1) 100%);
21 background: url(./background.webp) no-repeat center center;
22 background-size: auto;
23 background-attachment: fixed;
24}
25
26body h1 {
27 font-size: 5em;
28 color: oklch(1 0 197);
29 margin: 0 0 0.1em;
30}
31
32body > * {
33 box-sizing: border-box;
34 position: relative;
35 z-index: 1;
36 max-width: 800px;
37 margin: 0 auto;
38 transform: translateZ(0);
39}
40
41h1+p {
42 font-size: 1.3em;
43 color: oklch(1 0 197);
44 margin: 0 0 .5em 0;
45}
46
47p {
48 margin: 0
49}
50
51small {
52 font-size: 1rem;
53}
54
55.atom {
56 display: inline-block;
57 width: 1rem;
58 height: 1rem;
59}
60
61.atom svg {
62 fill: currentColor;
63}
64
65.small {
66 margin: .3em 0 0;
67 color: #75beeb;
68 font-size: .8em;
69}
70
71.description {
72 color: #afd4ff;
73}
74
75a, a:visited {
76 color: oklch(1 0 197);
77 text-decoration: none;
78}
79a:hover {
80 color: #ff91e9;
81 text-decoration: none;
82}
83
84a span {
85 color: #ff91e9;
86}
87
88h1+p a, h1+p a:visited {
89 color: #ff91e9;
90 text-decoration: underline;
91}
92
93a:hover span {
94 color: oklch(1 0 197);
95}
96
97a, a span {
98 transition: color .3s;
99}
100
101header, .links, .pagination{
102 padding: 1em;
103 background: #241844;
104 border: 1px solid oklch(100% 0% 0 / 10%);
105 border-radius: 1em;
106 margin-bottom: 1em;
107}
108
109.item {
110 text-align: center;
111 margin-bottom: 1rem;
112 padding-bottom: 1rem;
113 border-bottom : 1px solid oklch(100% 0% 0 / 10%);
114}
115
116.item:last-child {
117 margin-bottom: 0;
118 padding-bottom: 0;
119 border-bottom : none;
120}
121
122.item section {
123 width: 100%;
124 padding: 0 1rem 0 0;
125 margin-bottom: 1em;
126}
127
128.item .aside {
129 display: block;
130 width: 300px;
131 background: white url(./missing-image.svg) no-repeat center center;
132 border-radius: .6rem;
133 overflow: hidden;
134}
135
136.item h2, .item .description{
137 text-align: left;
138}
139
140.item img {
141 display: block;
142 width: 100%;
143 height: 100%;
144 object-fit: cover;
145 transition: all .3s;
146}
147
148.item .aside input {
149 display: none;
150}
151
152.item.nsfw .aside {
153 background: transparent;
154}
155
156.item.nsfw img {
157 filter: blur(30px);
158}
159
160.item.big .description {
161 margin-bottom: 1rem;
162}
163
164.item.big .aside {
165 width: 100%;
166}
167
168.item.nsfw:hover img {
169 cursor: pointer;
170 filter: blur(0rem);
171}
172
173.pagination ul {
174 text-align: center;
175 list-style: none;
176 margin: 0;
177 padding: 0;
178}
179
180.pagination ul li, .pagination ul li a {
181 display: inline-block;
182}
183
184.pagination ul li a, .pagination ul li.selected {
185 padding: .5rem 1rem;
186}
187
188header {
189 margin-bottom : 1em;
190}
191
192h2 {
193 margin-top: 0;
194}
195
196.media {
197 max-width: 600px;
198 width: 100%;
199 display: flex;
200 margin: 10px auto;
201}
202
203iframe {
204 width: 100%;
205 min-height: 300px;
206}
207
208@media only screen and (max-width: 700px) {
209 body h1 {
210 font-size: 2rem;
211 }
212
213 .item {
214 flex-direction: column;
215 }
216
217 .item .aside {
218 width: 100%;
219 margin-top: 1rem;
220 }
221
222 .item .aside.empty {
223 display: none;
224 }
225}