-
Notifications
You must be signed in to change notification settings - Fork 286
/
Copy pathindex.html
377 lines (370 loc) · 17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html class="page" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bluesky</title>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="styles/dark.css" media="(prefers-color-scheme: dark)">
<script type="module" defer src="scripts/index.js"></script>
</head>
<body class="page__body">
<header class="header page__header">
<nav>
<a class="header__avatar" href="">
<img
class="header__avatar-image"
src="images/avatar.png"
width="48"
height="48"
alt="Profile avatar."
>
</a>
<ul class="header__navigation navigation">
<li class="navigation__item">
<a class="navigation__link" href="">
<svg class="navigation__icon" viewBox="0 0 48 48" width="24" height="24">
<path fill="none" stroke="currentColor" stroke-width="4" d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"/>
</svg>
<span class="navigation__text">
Home
</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="">
<svg class="navigation__icon" viewBox="0 0 26 24" width="24" height="24" stroke-width="2" fill="none" stroke="currentColor" stroke-linecap="round">
<ellipse cx="12" cy="11" rx="9" ry="9"/>
<line x1="19" y1="17.3" x2="23.5" y2="21"/>
</svg>
<span class="navigation__text">
Search
</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="">
<svg class="navigation__icon" fill="none" viewBox="0 0 22 22" stroke-width="1.75" stroke="currentColor" width="24" height="24">
<path d="M 12.705346,15.777547 C 14.4635,17.5315 14.7526,17.8509 14.9928,18.1812 c 0.2139,0.2943 0.3371,0.5275 0.3889,0.6822 C 14.0859,19.5872 12.5926,20 11,20 6.02944,20 2,15.9706 2,11 2,9.4151 2.40883,7.9285 3.12619,6.63699 3.304,6.69748 3.56745,6.84213 3.89275,7.08309 4.3705644,7.4380098 4.7486794,7.8160923 6.4999995,9.5689376 8.2513197,11.321783 10.947192,14.023595 12.705346,15.777547 Z"></path><path d="M8 1.62961C9.04899 1.22255 10.1847 1 11.3704 1C16.6887 1 21 5.47715 21 11C21 12.0452 20.8456 13.053 20.5592 14" stroke-linecap="round"/>
<path d="M9 5.38745C9.64553 5.13695 10.3444 5 11.0741 5C14.3469 5 17 7.75517 17 11.1538C17 11.797 16.905 12.4172 16.7287 13" stroke-linecap="round"/>
<path d="M12 12C12 12.7403 11.5978 13.3866 11 13.7324L8.26756 11C8.61337 10.4022 9.25972 10 10 10C11.1046 10 12 10.8954 12 12Z" fill="currentColor" stroke="none"/>
</svg>
<span class="navigation__text">
My Feeds
</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="">
<svg class="navigation__icon" viewBox="0 0 24 24" width="24" height="24" stroke-width="2" fill="none" stroke="currentColor">
<path d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z"/>
<line x1="9" y1="22" x2="15" y2="22"/>
</svg>
<span class="navigation__text">
Notifications
</span>
</a>
</li>
<li class="navigation__item navigation__item--hidden">
<a class="navigation__link" href="">
<svg class="navigation__icon" width="24" height="24" viewBox="0 0 76 76" fill="none" stroke-width="5.5" stroke-linecap="round" stroke="currentColor">
<path d="M33.5 37V11.5C33.5 8.46243 31.0376 6 28 6V6C24.9624 6 22.5 8.46243 22.5 11.5V48V48C22.5 48.5802 21.8139 48.8874 21.3811 48.501L13.2252 41.2189C10.72 38.9821 6.81945 39.4562 4.92296 42.228L4.77978 42.4372C3.17708 44.7796 3.50863 47.9385 5.56275 49.897L16.0965 59.9409C20.9825 64.5996 26.7533 68.231 33.0675 70.6201V70.6201C38.8234 72.798 45.1766 72.798 50.9325 70.6201L51.9256 70.2444C57.4044 68.1713 61.8038 63.9579 64.1113 58.5735V58.5735C65.6874 54.8962 66.5 50.937 66.5 46.9362V22.5C66.5 19.4624 64.0376 17 61 17V17C57.9624 17 55.5 19.4624 55.5 22.5V36.5"/>
<path d="M55.5 37V11.5C55.5 8.46243 53.0376 6 50 6V6C46.9624 6 44.5 8.46243 44.5 11.5V37"/>
<path d="M44.5 37V8.5C44.5 5.46243 42.0376 3 39 3V3C35.9624 3 33.5 5.46243 33.5 8.5V37"/>
</svg>
<span class="navigation__text">
Moderation
</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" aria-current="page" href="">
<svg class="navigation__icon" viewBox="0 0 28 28" width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="2.04" stroke-linecap="round" stroke-linejoin="round">
<path d="M17.5 11.38a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"/>
<path d="M14 18.38c-4 0-6.33 2.33-7 3.5.83.83 3.4 2.5 7 2.5s6.17-1.67 7-2.5c-.67-1.17-3-3.5-7-3.5Z"/>
<path fill="none" d="M20.98 21.85a10.5 10.5 0 1 0-13.96 0m13.96 0a10.46 10.46 0 0 1-13.96 0"/>
</svg>
<span class="navigation__text">
Profile
</span>
</a>
</li>
<li class="navigation__item navigation__item--hidden">
<a class="navigation__link" href="">
<svg class="navigation__icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor">
<path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/>
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<span class="navigation__text">
Settings
</span>
</a>
</li>
</ul>
<div class="header__new-post">
<button class="new-post" type="button">
<svg class="new-post__icon" viewBox="0 0 24 24" width="29" height="29" fill="none" stroke="currentColor">
<path d="M 20 9 L 20 16 C 20 18.209 18.209 20 16 20 L 8 20 C 5.791 20 4 18.209 4 16 L 4 8 C 4 5.791 5.791 4 8 4 L 15 4" stroke-width="1.5"/>
<line stroke-linecap="round" x1="10" y1="14" x2="18.5" y2="5.5" stroke-width="2.25"/>
<line stroke-linecap="round" x1="20.5" y1="3.5" x2="21" y2="3" stroke-width="2.25"></line>
</svg>
<span class="new-post__text">
New post
</span>
</button>
</div>
</nav>
</header>
<main class="page__main">
<div class="profile">
<button class="profile__back back-button" type="button">
<svg class="back-button__icon" viewBox="0 0 320 512" height="18" width="18">
<path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
</svg>
</button>
<img class="profile__cover" src="images/cover.png" width="300" height="100" alt="Profile cover.">
<img class="profile__avatar" src="images/avatar.png" width="80" height="80" alt="Profile avatar.">
<div class="profile__controls">
<button class="profile__button profile__button--text" type="button">
Edit Profile
</button>
<div class="profile__menu">
<button
class="profile__button profile__menu-toggler profile__button--icon"
type="button"
aria-label="More…"
aria-haspopup="true"
aria-controls="profile-menu"
aria-expanded="false"
>
<svg class="profile__icon" viewBox="0 0 448 512" height="20" width="20">
<path fill="currentColor" d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>
</svg>
</button>
<ul class="profile__menu-popup" id="profile-menu" hidden>
<li>
<button class="profile__menu-button" type="button">Share</button>
</li>
<li>
<button class="profile__menu-button" type="button">Report</button>
</li>
</ul>
</div>
</div>
</div>
<div class="user-info">
<h1 class="user-info__name">Vadim Makeev</h1>
<p class="user-info__nick">@pepelsbey.dev</p>
<ul class="user-info__stats">
<li>
<a class="user-info__stats-link" href="">
<span class="user-info__stats-number">34</span>
followers
</a>
</li>
<li>
<a class="user-info__stats-link" href="">
<span class="user-info__stats-number">41</span>
following
</a>
</li>
<li>
<span class="user-info__stats-number">22</span>
posts
</li>
</ul>
<p class="user-info__bio">Frontend developer in love with the Web, browsers, bicycles, and podcasting. He/him, Google Developer Expert, co-host of The F-Word podcast.</p>
</div>
<div class="timeline">
<ul class="timeline__tabs" role="tablist">
<li class="timeline__tabs-item">
<button
class="timeline__tabs-button"
role="tab"
aria-selected="true"
aria-controls="timeline-posts-panel"
id="timeline-posts-tab"
type="button"
>
Posts
</button>
</li>
<li class="timeline__tabs-item">
<button
class="timeline__tabs-button"
role="tab"
aria-selected="false"
aria-controls="timeline-posts-replies-panel"
id="timeline-posts-replies-tab"
type="button"
>
Posts & replies
</button>
</li>
<li class="timeline__tabs-item">
<button
class="timeline__tabs-button"
role="tab"
aria-selected="false"
aria-controls="timeline-media-panel"
id="timeline-media-tab"
type="button"
>
Media
</button>
</li>
<li class="timeline__tabs-item">
<button
class="timeline__tabs-button"
role="tab"
aria-selected="false"
aria-controls="timeline-likes-panel"
id="timeline-likes-tab"
type="button"
>
Likes
</button>
</li>
<li class="timeline__tabs-item">
<button
class="timeline__tabs-button"
role="tab"
aria-selected="false"
aria-controls="timeline-dislikes-panel"
id="timeline-dislikes-tab"
type="button"
>
Dislikes
</button>
</li>
</ul>
<section
class="timeline__section"
role="tabpanel"
tabindex="0"
aria-labelledby="timeline-posts-tab"
id="timeline-posts-panel"
>
<p class="timeline__no-content">
<svg class="timeline__no-content-icon" viewBox="0 0 512 512" height="64" width="64">
<path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/>
</svg>
No posts yet!
</p>
</section>
<section
class="timeline__section"
role="tabpanel"
tabindex="0"
aria-labelledby="timeline-posts-replies-tab"
id="timeline-posts-replies-panel"
hidden
>
<p class="timeline__no-content">
<svg class="timeline__no-content-icon" viewBox="0 0 512 512" height="64" width="64">
<path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/>
</svg>
No posts & replies yet!
</p>
</section>
<section
class="timeline__section"
role="tabpanel"
tabindex="0"
aria-labelledby="timeline-media-tab"
id="timeline-media-panel"
hidden
>
<p class="timeline__no-content">
<svg class="timeline__no-content-icon" viewBox="0 0 512 512" height="64" width="64">
<path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/>
</svg>
No media yet!
</p>
</section>
<section
class="timeline__section"
role="tabpanel"
tabindex="0"
aria-labelledby="timeline-likes-tab"
id="timeline-likes-panel"
hidden
>
<p class="timeline__no-content">
<svg class="timeline__no-content-icon" viewBox="0 0 512 512" height="64" width="64">
<path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/>
</svg>
No likes yet!
</p>
</section>
<section
class="timeline__section"
role="tabpanel"
tabindex="0"
aria-labelledby="timeline-dislikes-tab"
id="timeline-dislikes-panel"
hidden
>
<p class="timeline__no-content">
<svg class="timeline__no-content-icon" viewBox="0 0 512 512" height="64" width="64">
<path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/>
</svg>
No dislikes yet!
</p>
</section>
</div>
</main>
<footer class="footer page__footer">
<search class="footer__item footer__item--search">
<form class="search" action="">
<svg class="search__icon" viewBox="0 0 26 24" width="24" height="24" stroke-width="2" fill="none" stroke="currentColor" stroke-linecap="round">
<ellipse cx="12" cy="11" rx="9" ry="9"></ellipse>
<line x1="19" y1="17.3" x2="23.5" y2="21"></line>
</svg>
<input
class="search__input"
type="text"
placeholder="Search"
inputmode="search"
aria-label="Search"
>
</form>
</search>
<div class="footer__item">
<ul class="footer__options">
<li>
<a class="footer__link action action--secondary action--hover" href="">Following</a>
</li>
<li>
<a class="footer__link action action--hover" href="">More feeds</a>
</li>
</ul>
</div>
<div class="footer__item">
<ul class="footer__pages">
<li class="footer__pages-item">
<a class="footer__link action action--hover" href="">Send feedback</a>
</li>
<li class="footer__pages-item">
<a class="footer__link action action--hover" href="">Privacy</a>
</li>
<li class="footer__pages-item">
<a class="footer__link action action--hover" href="">Terms</a>
</li>
<li class="footer__pages-item">
<a class="footer__link action action--hover" href="">Help</a>
</li>
</ul>
</div>
<div class="footer__item">
<button class="footer__invite action" type="button">
<svg viewBox="0 0 576 512" height="16" width="16">
<path fill="currentColor" d="M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z"/>
</svg>
5 invite code available
</button>
</div>
</footer>
</body>
</html>