evbogue.com
a demonstration replicated social networking web app built with anproto
wiredove.net/
social
ed25519
protocols
1body {
2 background-color: #f2f2f2;
3 color: #444;
4 font-family: "Source Sans 3", sans-serif;
5 max-width: 100%;
6 margin-top: 45px;
7 margin-bottom: 10em;
8}
9
10#scroller {max-width: 680px; margin-left: auto; margin-right: auto;}
11
12blockquote { border-left: 5px solid #f5f5f5; margin-left: none; padding-left: 10px; color: #777; }
13
14p, h1, h2, h3, h4, h5, h6 { margin-top: 5px; margin-bottom: 5px;}
15
16pre {
17 //color: #dd1144;
18 background: #f5f5f5;
19 width: 100%;
20 display: block;
21}
22
23code {
24 background: #f5f5f5;
25 padding: 5px;
26 border-radius: 5px;
27 display: inline-block;
28 vertical-align: bottom;
29}
30
31code, pre {
32 font-family: "Roboto Mono", monospace;
33 font-size: .9em;
34 overflow: auto;
35 word-break: break-all;
36 word-wrap: break-word;
37 white-space: pre;
38 white-space: -moz-pre-wrap;
39 white-space: pre-wrap;
40 white-space: pre\9;
41}
42
43button {
44 margin-left: 5px;
45 font-size: .85em;
46 background: #fff;
47 background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
48 border: 1px solid #e4e4e4;
49 padding: 5px 10px 5px 10px;
50 border-radius: 5px;
51}
52
53hr { border: 1px solid #e4e4e4;}
54
55button:hover {
56 background: #f2f2f2;
57 cursor: pointer;
58}
59
60textarea, input {
61 font-size: 1em;
62 font-family: "Source Sans 3", sans-serif;
63 border: 1px solid #f8f8f8;
64 border-radius: 5px;
65 background: #f8f8f8;
66 color: #555;
67 padding: 5px;
68 //box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
69}
70
71.composer { margin-left: 37px; margin-top: 0;}
72
73textarea:hover, textarea:focus, input:hover, input:focus, {
74 background: transparent;
75}
76
77textarea:focus, input:focus {
78 outline: none !important;
79}
80
81textarea {
82 margin-top: 5px;
83 margin-bottom: 5px;
84 width: 99%;
85 height: 150px;
86}
87
88a {
89 color: #045fd0;
90 text-decoration: none;
91}
92
93a:hover {
94 color: #8d82fe;
95}
96
97img {width: 95%; margin: 1em;}
98
99.material-symbols-outlined { color: #666; vertical-align: middle; font-size: 18px; cursor: pointer;}
100
101iframe {
102 width: 100%;
103 border: 1px solid #e4e4e4;
104 border-radius: 5px;
105 margin-top: 5px;
106 height: 275px;
107}
108
109#navbar {
110 padding-top: .5em;
111 padding-left: 1em;
112 padding-bottom: .5em;
113 padding-right: 5em;
114 position: fixed;
115 width: 98.5%;
116 z-index: 1;
117 top: 0;
118 left: 0;
119 background-color: rgba(248,248,248,0.5);
120 border-bottom: 1px solid #eee;
121 backdrop-filter: blur(10px);
122}
123
124.message {
125 padding: .75em;
126 background: #f8f8f8;
127 border: 1px solid #f5f5f5;
128 margin-top: 5px;
129 min-height: 35px;
130 border-radius: 5px;
131 overflow: hidden;
132}
133
134.message:hover {
135 border: 1px solid #eee;
136}
137
138@media (prefers-color-scheme: dark) {
139 body {
140 background-color: #181818;
141 color: #ccc;
142 }
143 #navbar { background-color: rgba(34,34,34,0.5); border-bottom: 1px solid #333; }
144 .message { background-color: #222; border: 1px solid #1e1e1e;}
145 .message:hover { border: 1px solid #333;}
146
147 textarea, input, iframe { background: #222; color: #f5f5f5; border: 1px solid #222;}
148
149 button { color: #ccc; background: #333; border: 1px solid #444;}
150 button:hover { background: #222;}
151 hr { border: 1px solid #333;}
152 pre, code { background: #333; color: #f5f5f5;}
153 a {color: #50afe4;}
154}
155
156.content {margin-top: 5px;}
157
158.message, .message > * {
159 animation: fadein .5s;
160}
161
162@keyframes fadein {
163 from { opacity: 0; }
164 to { opacity: 1; }
165}
166
167.reply { margin-left: 1em; }
168
169.pubkey {
170 color: #9da0a4;
171 font-family: monospace;
172}
173
174.avatar, .avatar_small {
175 border-radius: 100%;
176 margin: 0px;
177 margin-right: 10px;
178 object-fit: cover;
179 vertical-align: top;
180}
181
182.avatar {
183 height: 33px;
184 width: 33px;
185}
186
187.avatar_small { height: 25px; width: 25px;}
188
189.breadcrumbs { font-size: 1em; }
190
191.avatarlink { font-weight: 600;}
192.unstyled { color: #ccc;}
193.hljs { padding: 10px; border-radius: 5px; background: #555; color: #f2f2f2;}