plc.jbc.lol
A webring for Wafrn users. https://wafring.jbc.lol (mirror of https://git.jbc.lol/jbcrn/wafring)
jbc.lol
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Wafring</title>
8</head>
9
10<body>
11 <style>
12 @font-face {
13 font-family: Inter;
14 src: url(https://gh.jbc.lol/fonts/InterVariable.woff2);
15 }
16
17 * {
18 padding: 0;
19 margin: 0;
20 font-weight: normal;
21 }
22
23 body {
24 background-color: #131313;
25 color: #c6c6c6;
26 font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
27 }
28
29 a {
30 color: #c6c6c6;
31 }
32
33 main {
34 max-width: 1000px;
35 margin-inline: auto;
36 margin-block: 24px;
37 padding-inline: 24px;
38 }
39
40 h1 {
41 font-size: 4em;
42 }
43
44 h1, h2, p {
45 margin-block: 5px;
46 }
47
48 h2 {
49 margin-top: 15px;
50 font-size: 2em;
51 }
52
53 h3 {
54 font-size: 1.5em;
55 margin-block: 10px;
56 overflow: hidden;
57 text-overflow: ellipsis;
58 }
59
60 hr {
61 margin-top: 24px;
62 }
63
64 .member-list {
65 display: grid;
66 grid-template-columns: repeat(auto-fit, minmax(150px, 275px));
67 gap: 12px;
68
69 &>div {
70 background-color: #2a2a2a;
71 border-radius: 12px;
72 overflow: hidden;
73 position: relative;
74
75 .banner {
76 width: 100%;
77 position: absolute;
78 top: 0;
79 height: 96px;
80 object-fit: cover;
81 }
82
83 .info {
84 position: relative;
85 padding: 12px;
86 padding-top: 64px;
87
88 img {
89 position: absolute;
90 left: 12px;
91 width: 64px;
92 border-radius: 6px;
93 }
94
95 h3 {
96 padding-top: 65px;
97 margin-block: 5px;
98 }
99 }
100 }
101 }
102 </style>
103
104 <main>
105 <h1>Wafring</h1>
106 <p>Wafring is a webring for Wafrn users, either on the flagship instance, or not!</p>
107
108 <h2>Members ({{members.length}})</h2>
109 <div class="member-list">
110 {{#each members}}
111 <div class="member">
112 <img src={{headerImage}} alt="" class="banner" />
113 <div class="info">
114 <img src={{avatar}} alt="" class="avatar" />
115 <h3><a href="https://wf.jbc.lol/blog/{{handle}}">{{handle}}</a></h3>
116 <p>{{desc}}</p>
117 <a href={{url}}>{{url}}</a>
118 </div>
119 </div>
120 {{/each}}
121 </div>
122
123 <h2>Joining</h2>
124 <p>Every Wafrn instance is accepted, not just the flagship one!</p>
125 <p>To join, DM @wafring@wf.jbc.lol with this template:</p>
126 <h3>@wafring@wf.jbc.lol join [WEBSITE_URL] [DESCRIPTION]</h3>
127 <p>For example: </p>
128 <h3>@wafring@wf.jbc.lol join https://jbc.lol/ Just a dev.</h3>
129 <p>The redirect links will be sent to your DMs also.</p>
130
131 <h2>Not on Wafrn but want to join a Fediverse webring?</h2>
132 <p>Check out <a href="https://fediring.net/">Fediring</a>!</p>
133
134 <hr />
135 <p>developed by @jbcrn@wf.jbc.lol, idea by @verbina29@app.wafrn.net, <a href="https://git.jbc.lol/jbcrn/wafring">source code</a></p>
136 </main>
137</body>
138
139</html>