-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAnalysis.txt
289 lines (238 loc) · 27.7 KB
/
Analysis.txt
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
Twitter clone:
- There are 3 columns.
- All pfps are of same dimension.
- Left navigation is fixed.
- Right navigation is also kinda fixed.
- message box in fullscreen is fixed
-------------------------------------
DESCRIPTION OF ALL 3 SECTIONS
----- FIRST
- A twitter logo
- a flex container having secitons like home, explore, notification, messages, bookmark, twitter-blue, profile, more,
- tweet button
- and your account pfp and username
- size: 27.5rem;
----- SECOND
- 2nd column is divided into 2 more sub-columns: 'for you' and 'Following'
- We can roughly divide this column into 3 rows. First row contains Home, forYou, Following. Second row contains "what's happening section" and the third row which is the biggest the timeline where we see tweets.
- each tweet can be considered as a box that has following components.
- pfp
- account name
- username
- hrs ago tweeted
- more button
- tweet body
- comments, retweets, likes, views, share.
- size: 60rem;
----- THIRD
- a search bar which is mixed
- what's happening section.
- who to follow section.
- small message box which is fixed.
- size: 40.5rem;
-------------------------------------
----- COLOR
blue: rgb(29, 155, 240);
white: #fff;
black: #000;
happening-background-color: rgb(22, 24, 28);; [what's happening]
search-text: rgb(231, 233, 234);; [search]
searc-background-color: rgb(32, 35, 39);
border: rgb(47, 51, 54);
small-text-color: #71767B;
-------------------------------------
Calulations:
WIDTH:
header = 27.5rem (21.48%)
timeline = 60rem (46.87%)
explore = 40.5rem (31.65%)
header + timeline + explore = 128rem;
SINCE header is going to be FIXED
timeline + explore = 100.5rem;
timeline = 59.7% of timeline + explore
explore = 40.3% of timeline + explore
-------------------------------------
----- SVG
-twitter-logo
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 50 50">
<path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"></path>
</svg>
- Message
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 4 4 C 2.895 4 2 4.895 2 6 L 2 18 C 2 19.105 2.895 20 4 20 L 20 20 C 21.105 20 22 19.105 22 18 L 22 6 C 22 4.895 21.105 4 20 4 L 4 4 z M 4 6 L 20 6 L 20 7.0019531 L 12 12 L 4 7.0019531 L 4 6 z M 4 9.0019531 L 12 14 L 20 9.0019531 L 20 18 L 4 18 L 4 9.0019531 z"></path>
</svg>
- home
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 30 30">
<path d="M 14.958984 3 A 1.0001 1.0001 0 0 0 14.470703 3.1523438 L 2.2792969 10.771484 A 1.0001 1.0001 0 1 0 3.3398438 12.466797 L 4.2285156 11.912109 L 7.6210938 25.484375 C 7.8440937 26.374375 8.6445 27 9.5625 27 L 20.439453 27 C 21.357453 27 22.156906 26.374375 22.378906 25.484375 L 25.771484 11.912109 L 26.660156 12.466797 A 1.0001 1.0001 0 1 0 27.720703 10.771484 L 15.529297 3.1523438 A 1.0001 1.0001 0 0 0 14.958984 3 z M 15 10 C 17.209 10 19 11.791 19 14 C 19 16.209 17.209 18 15 18 C 12.791 18 11 16.209 11 14 C 11 11.791 12.791 10 15 10 z M 12 21 L 18 21 C 18.552 21 19 21.448 19 22 C 19 22.552 18.552 23 18 23 L 12 23 C 11.448 23 11 22.552 11 22 C 11 21.448 11.448 21 12 21 z"></path>
</svg>
- hashtag
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 48 48">
<path d="M 33.919922 3.9609375 A 2.0002 2.0002 0 0 0 32.027344 5.671875 L 30.306641 16 L 20.361328 16 L 21.972656 6.328125 A 2.0002 2.0002 0 0 0 19.904297 3.9746094 A 2.0002 2.0002 0 0 0 18.027344 5.671875 L 16.306641 16 L 8 16 A 2.0002 2.0002 0 1 0 8 20 L 15.638672 20 L 14.306641 28 L 6 28 A 2.0002 2.0002 0 1 0 6 32 L 13.638672 32 L 12.027344 41.671875 A 2.0002 2.0002 0 1 0 15.972656 42.328125 L 17.693359 32 L 27.638672 32 L 26.027344 41.671875 A 2.0002 2.0002 0 1 0 29.972656 42.328125 L 31.693359 32 L 40 32 A 2.0002 2.0002 0 1 0 40 28 L 32.361328 28 L 33.693359 20 L 42 20 A 2.0002 2.0002 0 1 0 42 16 L 34.361328 16 L 35.972656 6.328125 A 2.0002 2.0002 0 0 0 33.919922 3.9609375 z M 19.693359 20 L 29.638672 20 L 28.306641 28 L 18.361328 28 L 19.693359 20 z"></path>
</svg>
- bell
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 2 C 11.172 2 10.5 2.672 10.5 3.5 L 10.5 4.1953125 C 7.9131836 4.862095 6 7.2048001 6 10 L 6 16 L 4 18 L 4 19 L 10.269531 19 A 2 2 0 0 0 10 20 A 2 2 0 0 0 12 22 A 2 2 0 0 0 14 20 A 2 2 0 0 0 13.728516 19 L 20 19 L 20 18 L 18 16 L 18 10 C 18 7.2048001 16.086816 4.862095 13.5 4.1953125 L 13.5 3.5 C 13.5 2.672 12.828 2 12 2 z M 12 6 C 14.206 6 16 7.794 16 10 L 16 16 L 16 16.828125 L 16.171875 17 L 7.828125 17 L 8 16.828125 L 8 16 L 8 10 C 8 7.794 9.794 6 12 6 z"></path>
</svg>
- bookmark
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M17,4v14.967l-4.212-1.805L12,16.824l-0.788,0.338L7,18.967V4H17 M17,2H7C5.9,2,5,2.9,5,4v18l7-3l7,3V4C19,2.9,18.1,2,17,2 L17,2z"></path>
</svg>
- twitter blue
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 5 3 C 3.897 3 3 3.897 3 5 L 3 19 C 3 20.103 3.897 21 5 21 L 19 21 C 20.103 21 21 20.103 21 19 L 21 5 C 21 3.897 20.103 3 19 3 L 5 3 z M 5 5 L 19 5 L 19.001953 19 L 5 19 L 5 5 z M 14.566406 7.1132812 C 13.194406 7.1132812 12.080078 8.2286094 12.080078 9.5996094 C 12.080078 9.8566094 12.166016 10.028219 12.166016 10.199219 C 10.109016 10.114219 8.309375 9.0859063 7.109375 7.6289062 C 6.852375 7.9719062 6.765625 8.399125 6.765625 8.828125 C 6.765625 9.685125 7.1948594 10.372656 7.8808594 10.972656 C 7.4528594 10.886656 7.108625 10.799906 6.765625 10.628906 C 6.765625 11.828906 7.6223281 12.772297 8.7363281 13.029297 C 8.4793281 13.115297 8.3077812 13.115234 8.0507812 13.115234 C 7.9647813 13.115234 7.7920938 13.029297 7.6210938 13.029297 C 7.9640937 13.972297 8.8215469 14.742188 9.9355469 14.742188 C 9.0785469 15.342187 7.9636094 15.771484 6.8496094 15.771484 L 6.25 15.771484 C 7.364 16.456484 8.6504844 16.886719 10.021484 16.886719 C 14.564484 16.886719 17.050781 13.114422 17.050781 9.8574219 L 17.050781 9.5136719 C 17.479781 9.1706719 17.906953 8.7425625 18.251953 8.2265625 C 17.737953 8.4845625 17.308922 8.57025 16.794922 8.65625 C 17.308922 8.31425 17.737203 7.8851562 17.908203 7.2851562 C 17.479203 7.5421562 16.965234 7.7987656 16.365234 7.8847656 C 15.936234 7.3707656 15.252406 7.1132812 14.566406 7.1132812 z"></path>
</svg>
- user
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 3 C 9.8027056 3 8 4.8027056 8 7 C 8 9.1972944 9.8027056 11 12 11 C 14.197294 11 16 9.1972944 16 7 C 16 4.8027056 14.197294 3 12 3 z M 12 5 C 13.116414 5 14 5.8835859 14 7 C 14 8.1164141 13.116414 9 12 9 C 10.883586 9 10 8.1164141 10 7 C 10 5.8835859 10.883586 5 12 5 z M 12 14 C 10.255047 14 8.1871638 14.409783 6.4492188 15.095703 C 5.5802462 15.438663 4.7946961 15.84605 4.1660156 16.369141 C 3.5373351 16.892231 3 17.599384 3 18.5 L 3 21 L 21 21 L 21 20 L 21 18.5 C 21 17.599384 20.462665 16.892231 19.833984 16.369141 C 19.205304 15.84605 18.419754 15.438663 17.550781 15.095703 C 15.812836 14.409783 13.744953 14 12 14 z M 12 16 C 13.414047 16 15.346055 16.373999 16.818359 16.955078 C 17.554512 17.245618 18.176961 17.591965 18.554688 17.90625 C 18.932412 18.220535 19 18.434616 19 18.5 L 19 19 L 5 19 L 5 18.5 C 5 18.434616 5.0675867 18.220535 5.4453125 17.90625 C 5.8230383 17.591965 6.4454882 17.245618 7.1816406 16.955078 C 8.6539455 16.373999 10.585953 16 12 16 z"></path>
</svg>
- tweet-feather
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 128 128">
<path d="M83.9,58.2c-1.5,0.6-2.3,2.4-1.6,3.9c0.5,1.2,1.6,1.9,2.8,1.9c0.4,0,0.8-0.1,1.1-0.2L98,58.9c0.8-0.3,1.4-1,1.7-1.8 c3.6-10.8,5.1-21.4,5.8-28.5c0.7-7.1,0.8-10.7,0.6-12.7c0-0.6-0.1-1.2-0.4-1.7c-0.2-0.4-0.4-0.6-0.6-0.8l0,0 c-0.1-0.1-0.3-0.2-0.4-0.3c-1.4-0.9-3.3-0.4-4.1,1C89,32.8,75.7,45.4,63,57.6C53.2,66.9,43.8,75.9,35.7,87 c-0.1-5,0.3-11.8,2.6-19.1c6.3-20.3,22.9-34.8,49.3-43c1.6-0.5,2.5-2.2,2-3.8s-2.2-2.5-3.8-2c-19.5,6.1-44.6,19.2-53.2,47 c-4,12.9-3,24.2-2.2,28.9c-3,4.9-5.8,10.3-8.2,16.2c-0.6,1.5,0.1,3.3,1.6,3.9c0.4,0.2,0.8,0.2,1.1,0.2c1.2,0,2.3-0.7,2.8-1.9 c2-5,4.3-9.5,6.8-13.7c3.8,0.5,7.4,0.8,10.9,0.8c20,0,35.5-8.6,46.1-25.8c0.9-1.4,0.4-3.3-1-4.1c-1.4-0.9-3.3-0.4-4.1,1 C75.8,88.8,59.5,96.4,38.1,94.1C46.4,81.7,56.6,72,67.1,62C78,51.5,89.3,40.8,99.6,26.3c-0.6,7.3-2,17.4-5.2,27.6L83.9,58.2z"></path>
</svg>
- more
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 8 11 A 1 1 0 0 0 7 12 A 1 1 0 0 0 8 13 A 1 1 0 0 0 9 12 A 1 1 0 0 0 8 11 z M 12 11 A 1 1 0 0 0 11 12 A 1 1 0 0 0 12 13 A 1 1 0 0 0 13 12 A 1 1 0 0 0 12 11 z M 16 11 A 1 1 0 0 0 15 12 A 1 1 0 0 0 16 13 A 1 1 0 0 0 17 12 A 1 1 0 0 0 16 11 z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 48 48">
<path d="M 7.9980469 18.498047 C 4.9771871 18.498047 2.4960938 20.97914 2.4960938 24 C 2.4960938 27.02086 4.9771871 29.501953 7.9980469 29.501953 C 11.018274 29.501953 13.5 27.02086 13.5 24 C 13.5 20.97914 11.018274 18.498047 7.9980469 18.498047 z M 39.998047 18.498047 C 36.977187 18.498047 34.496094 20.97914 34.496094 24 C 34.496094 27.02086 36.977187 29.501953 39.998047 29.501953 C 43.018274 29.501953 45.5 27.02086 45.5 24 C 45.5 20.97914 43.018274 18.498047 39.998047 18.498047 z M 23.998047 18.5 C 20.97764 18.5 18.498047 20.980679 18.498047 24 C 18.498047 27.019774 20.978273 29.5 23.998047 29.5 C 27.017821 29.5 29.498047 27.019774 29.498047 24 C 29.498047 20.980226 27.017821 18.5 23.998047 18.5 z"></path>
</svg>
- verified
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 8 11 A 1 1 0 0 0 7 12 A 1 1 0 0 0 8 13 A 1 1 0 0 0 9 12 A 1 1 0 0 0 8 11 z M 12 11 A 1 1 0 0 0 11 12 A 1 1 0 0 0 12 13 A 1 1 0 0 0 13 12 A 1 1 0 0 0 12 11 z M 16 11 A 1 1 0 0 0 15 12 A 1 1 0 0 0 16 13 A 1 1 0 0 0 17 12 A 1 1 0 0 0 16 11 z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 50 50">
<path d="M48,25c0-3.345-1.901-6.265-4.676-7.74c0.758-2.888,0.019-6.098-2.234-8.351c-1.683-1.683-3.9-2.521-6.119-2.521 c-0.751,0-1.502,0.096-2.232,0.288C31.265,3.901,28.345,2,25,2s-6.265,1.901-7.74,4.676c-0.731-0.192-1.481-0.288-2.232-0.288 c-2.219,0-4.436,0.838-6.119,2.521c-2.253,2.253-2.992,5.462-2.234,8.351C3.901,18.735,2,21.655,2,25s1.901,6.265,4.676,7.74 c-0.758,2.888-0.019,6.098,2.234,8.351c1.683,1.683,3.9,2.521,6.119,2.521c0.751,0,1.502-0.096,2.232-0.288 C18.735,46.099,21.655,48,25,48s6.265-1.901,7.74-4.676c0.731,0.192,1.481,0.288,2.232,0.288c2.219,0,4.436-0.838,6.119-2.521 c2.253-2.253,2.992-5.462,2.234-8.351C46.099,31.265,48,28.345,48,25z M21.714,32.985l-7.278-7.278l1.414-1.414l5.864,5.864 L34.15,17.722l1.414,1.414L21.714,32.985z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 30 30">
<path d="M 15 3 C 13.307 3 11.817109 3.8458125 10.912109 5.1328125 C 9.3621094 4.8628125 7.712625 5.318625 6.515625 6.515625 C 5.318625 7.712625 4.8628125 9.3631094 5.1328125 10.912109 C 3.8458125 11.817109 3 13.307 3 15 C 3 16.693 3.8458125 18.182891 5.1328125 19.087891 C 4.8628125 20.637891 5.318625 22.287375 6.515625 23.484375 C 7.712625 24.681375 9.3631094 25.137187 10.912109 24.867188 C 11.817109 26.154187 13.307 27 15 27 C 16.693 27 18.182891 26.154188 19.087891 24.867188 C 20.637891 25.137187 22.287375 24.681375 23.484375 23.484375 C 24.681375 22.287375 25.137187 20.636891 24.867188 19.087891 C 26.154187 18.182891 27 16.693 27 15 C 27 13.307 26.154188 11.817109 24.867188 10.912109 C 25.137187 9.3621094 24.681375 7.712625 23.484375 6.515625 C 22.287375 5.318625 20.636891 4.8628125 19.087891 5.1328125 C 18.182891 3.8458125 16.693 3 15 3 z M 21 10 C 21.25575 10 21.511531 10.097469 21.707031 10.292969 C 22.098031 10.683969 22.098031 11.316031 21.707031 11.707031 L 14.146484 19.267578 C 13.958484 19.455578 13.704453 19.560547 13.439453 19.560547 C 13.174453 19.560547 12.919422 19.455578 12.732422 19.267578 L 9.2792969 15.814453 C 8.8882969 15.423453 8.8882969 14.791391 9.2792969 14.400391 C 9.6702969 14.009391 10.302359 14.009391 10.693359 14.400391 L 13.439453 17.146484 L 20.292969 10.292969 C 20.488469 10.097469 20.74425 10 21 10 z"></path>
</svg>
- insert-img
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 48 48">
<path d="M 11.5 6 C 8.4802259 6 6 8.4802259 6 11.5 L 6 36.5 C 6 39.519774 8.4802259 42 11.5 42 L 36.5 42 C 39.519774 42 42 39.519774 42 36.5 L 42 11.5 C 42 8.4802259 39.519774 6 36.5 6 L 11.5 6 z M 11.5 9 L 36.5 9 C 37.898226 9 39 10.101774 39 11.5 L 39 31.955078 L 32.988281 26.138672 A 1.50015 1.50015 0 0 0 32.986328 26.136719 C 32.208234 25.385403 31.18685 25 30.173828 25 C 29.16122 25 28.13988 25.385387 27.361328 26.138672 L 25.3125 28.121094 L 19.132812 22.142578 C 18.35636 21.389748 17.336076 21 16.318359 21 C 15.299078 21 14.280986 21.392173 13.505859 22.140625 A 1.50015 1.50015 0 0 0 13.503906 22.142578 L 9 26.5 L 9 11.5 C 9 10.101774 10.101774 9 11.5 9 z M 30.5 13 C 29.125 13 27.903815 13.569633 27.128906 14.441406 C 26.353997 15.313179 26 16.416667 26 17.5 C 26 18.583333 26.353997 19.686821 27.128906 20.558594 C 27.903815 21.430367 29.125 22 30.5 22 C 31.875 22 33.096185 21.430367 33.871094 20.558594 C 34.646003 19.686821 35 18.583333 35 17.5 C 35 16.416667 34.646003 15.313179 33.871094 14.441406 C 33.096185 13.569633 31.875 13 30.5 13 z M 30.5 16 C 31.124999 16 31.403816 16.180367 31.628906 16.433594 C 31.853997 16.686821 32 17.083333 32 17.5 C 32 17.916667 31.853997 18.313179 31.628906 18.566406 C 31.403816 18.819633 31.124999 19 30.5 19 C 29.875001 19 29.596184 18.819633 29.371094 18.566406 C 29.146003 18.313179 29 17.916667 29 17.5 C 29 17.083333 29.146003 16.686821 29.371094 16.433594 C 29.596184 16.180367 29.875001 16 30.5 16 z M 16.318359 24 C 16.578643 24 16.835328 24.09366 17.044922 24.296875 A 1.50015 1.50015 0 0 0 17.046875 24.298828 L 23.154297 30.207031 L 14.064453 39 L 11.5 39 C 10.101774 39 9 37.898226 9 36.5 L 9 30.673828 L 15.589844 24.298828 C 15.802764 24.093234 16.059641 24 16.318359 24 z M 30.173828 28 C 30.438806 28 30.692485 28.09229 30.902344 28.294922 L 39 36.128906 L 39 36.5 C 39 37.898226 37.898226 39 36.5 39 L 18.380859 39 L 29.447266 28.294922 C 29.654714 28.094207 29.910436 28 30.173828 28 z"></path>
</svg>
- insert-gif
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 50 50">
<path d="M 7 2 L 7 48 L 43 48 L 43 15.410156 L 29.183594 2 Z M 9 4 L 28 4 L 28 17 L 41 17 L 41 46 L 9 46 Z M 30 5.578125 L 39.707031 15 L 30 15 Z M 21.324219 23.46875 C 19.179688 23.46875 17.078125 24.996094 17.03125 28.671875 C 17.003906 30.410156 17.46875 31.910156 18.339844 32.75 C 19.015625 33.425781 19.882813 33.753906 21.039063 33.753906 C 21.773438 33.753906 22.703125 33.578125 23.140625 33.394531 L 23.140625 27.996094 L 20.421875 27.996094 L 20.421875 29.601563 L 21.324219 29.601563 L 21.324219 32.046875 C 21.25 32.074219 21.113281 32.09375 20.933594 32.09375 C 20.019531 32.09375 19.074219 31.21875 19.074219 28.789063 C 19.074219 26.148438 20.140625 25.234375 21.472656 25.234375 C 21.96875 25.234375 22.34375 25.3125 22.628906 25.460938 L 22.972656 23.765625 C 22.660156 23.613281 22.089844 23.46875 21.324219 23.46875 Z M 24.609375 23.558594 L 24.609375 33.667969 L 26.574219 33.667969 L 26.574219 23.558594 Z M 28.328125 23.558594 L 28.328125 33.667969 L 30.296875 33.667969 L 30.296875 29.496094 L 32.574219 29.496094 L 32.574219 27.859375 L 30.296875 27.859375 L 30.296875 25.265625 L 32.722656 25.265625 L 32.722656 23.558594 Z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 32 32">
<path d="M 6 3 L 6 10 L 8 10 L 8 5 L 24 5 L 24 10 L 26 10 L 26 3 Z M 10.59375 12 C 9.210938 12 8.09375 13.117188 8.09375 14.5 L 8.09375 17.5 C 8.09375 18.882813 9.210938 20 10.59375 20 L 13.09375 20 L 13.09375 16 L 11.09375 16 L 11.09375 18 L 10.59375 18 C 10.378906 18 10.09375 17.714844 10.09375 17.5 L 10.09375 14.5 C 10.09375 14.285156 10.378906 14 10.59375 14 C 10.808594 14 11.09375 14.285156 11.09375 14.5 L 11.09375 15 L 13.09375 15 L 13.09375 14.5 C 13.09375 13.117188 11.976563 12 10.59375 12 Z M 15 12 L 15 20 L 17 20 L 17 12 Z M 19 12 L 19 20 L 21 20 L 21 17 L 23 17 L 23 15 L 21 15 L 21 14 L 24 14 L 24 12 Z M 6 22 L 6 29 L 26 29 L 26 22 L 24 22 L 24 27 L 8 27 L 8 22 Z"></path>
</svg>
- poll
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 6 2 A 3 3 0 0 0 3 5 A 3 3 0 0 0 6 8 A 3 3 0 0 0 9 5 A 3 3 0 0 0 6 2 z M 11 4 L 11 6 L 21 6 L 21 4 L 11 4 z M 6 9 C 4.3549904 9 3 10.35499 3 12 C 3 13.64501 4.3549904 15 6 15 C 7.6450096 15 9 13.64501 9 12 C 9 10.35499 7.6450096 9 6 9 z M 6 11 C 6.5641294 11 7 11.435871 7 12 C 7 12.564129 6.5641294 13 6 13 C 5.4358706 13 5 12.564129 5 12 C 5 11.435871 5.4358706 11 6 11 z M 11 11 L 11 13 L 21 13 L 21 11 L 11 11 z M 6 16 C 4.3549904 16 3 17.35499 3 19 C 3 20.64501 4.3549904 22 6 22 C 7.6450096 22 9 20.64501 9 19 C 9 17.35499 7.6450096 16 6 16 z M 6 18 C 6.5641294 18 7 18.435871 7 19 C 7 19.564129 6.5641294 20 6 20 C 5.4358706 20 5 19.564129 5 19 C 5 18.435871 5.4358706 18 6 18 z M 11 18 L 11 20 L 21 20 L 21 18 L 11 18 z"></path>
</svg>
- emoji
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 0 C 5.363281 0 0 5.363281 0 12 C 0 18.636719 5.363281 24 12 24 C 18.636719 24 24 18.636719 24 12 C 24 5.363281 18.636719 0 12 0 Z M 12 2 C 17.566406 2 22 6.433594 22 12 C 22 17.566406 17.566406 22 12 22 C 6.433594 22 2 17.566406 2 12 C 2 6.433594 6.433594 2 12 2 Z M 8 8 C 6.894531 8 6 8.894531 6 10 C 6 11.105469 6.894531 12 8 12 C 9.105469 12 10 11.105469 10 10 C 10 8.894531 9.105469 8 8 8 Z M 16 8 C 14.894531 8 14 8.894531 14 10 C 14 11.105469 14.894531 12 16 12 C 17.105469 12 18 11.105469 18 10 C 18 8.894531 17.105469 8 16 8 Z M 7.8125 14.84375 L 6.1875 15.96875 C 7.464844 17.828125 9.582031 19 12 19 C 14.417969 19 16.535156 17.828125 17.8125 15.96875 L 16.1875 14.84375 C 15.265625 16.183594 13.78125 17 12 17 C 10.21875 17 8.734375 16.183594 7.8125 14.84375 Z"></path>
</svg>
- schedule
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 128 128">
<path d="M 39 1 C 37.34 1 36 2.34 36 4 L 36 17 L 29 17 C 16.32 17 6 27.32 6 40 L 6 104 C 6 116.68 16.32 127 29 127 L 65 127 C 66.66 127 68 125.66 68 124 C 68 122.34 66.66 121 65 121 L 29 121 C 19.63 121 12 113.37 12 104 L 12 43 L 116 43 L 116 65 C 116 66.66 117.34 68 119 68 C 120.66 68 122 66.66 122 65 L 122 40 C 122 27.32 111.68 17 99 17 L 92 17 L 92 4 C 92 2.34 90.66 1 89 1 C 87.34 1 86 2.34 86 4 L 86 17 L 42 17 L 42 4 C 42 2.34 40.66 1 39 1 z M 29 23 L 99 23 C 107.35 23 114.3007 29.05 115.7207 37 L 12.279297 37 C 13.699297 29.05 20.65 23 29 23 z M 99 71 C 83.56 71 71 83.56 71 99 C 71 114.44 83.56 127 99 127 C 114.44 127 127 114.44 127 99 C 127 83.56 114.44 71 99 71 z M 99 77 C 111.13 77 121 86.87 121 99 C 121 111.13 111.13 121 99 121 C 86.87 121 77 111.13 77 99 C 77 86.87 86.87 77 99 77 z M 99 86 C 97.34 86 96 87.34 96 89 L 96 99 C 96 99.8 96.320859 100.55914 96.880859 101.11914 L 103.94922 108.18945 C 104.53922 108.77945 105.30031 109.07031 106.07031 109.07031 C 106.84031 109.07031 107.60945 108.77945 108.18945 108.18945 C 109.35945 107.01945 109.35945 105.11922 108.18945 103.94922 L 102 97.759766 L 102 89 C 102 87.34 100.66 86 99 86 z"></path>
</svg>
- location
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 12 1.5742188 C 7.861 1.5742188 4.5 4.9352187 4.5 9.0742188 C 4.5 17.178219 11.703125 22.476563 11.703125 22.476562 C 11.879125 22.605563 12.120875 22.605563 12.296875 22.476562 C 12.296875 22.476562 19.5 17.178219 19.5 9.0742188 C 19.5 4.9352187 16.139 1.5742188 12 1.5742188 z M 12 2.5742188 C 15.587 2.5742188 18.5 5.4872187 18.5 9.0742188 C 18.5 15.737219 13.307 20.377453 12 21.439453 C 10.693 20.377453 5.5 15.738219 5.5 9.0742188 C 5.5 5.4872188 8.413 2.5742188 12 2.5742188 z M 12 5.5742188 C 10.068 5.5742188 8.5 7.1422187 8.5 9.0742188 C 8.5 11.006219 10.068 12.574219 12 12.574219 C 13.932 12.574219 15.5 11.006219 15.5 9.0742188 C 15.5 7.1422187 13.932 5.5742188 12 5.5742188 z M 12 6.5742188 C 13.38 6.5742188 14.5 7.6942188 14.5 9.0742188 C 14.5 10.454219 13.38 11.574219 12 11.574219 C 10.62 11.574219 9.5 10.454219 9.5 9.0742188 C 9.5 7.6942188 10.62 6.5742187 12 6.5742188 z"></path>
</svg>
- comments
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M12,1.75c5.954,0 10.75,4.392 10.75,9.75c0,2.595 -1.119,4.959 -2.953,6.711l0.446,3.185c0.038,0.276 -0.079,0.551 -0.305,0.713c-0.227,0.163 -0.524,0.186 -0.773,0.062c-0,-0 -3.207,-1.604 -3.207,-1.604c-1.224,0.44 -2.56,0.683 -3.958,0.683c-5.954,0 -10.75,-4.392 -10.75,-9.75c-0,-5.358 4.796,-9.75 10.75,-9.75Zm-0,1.5c-5.085,0 -9.25,3.674 -9.25,8.25c-0,4.576 4.165,8.25 9.25,8.25c1.324,0 2.584,-0.249 3.725,-0.698c0.198,-0.078 0.42,-0.068 0.61,0.027l2.225,1.112l-0.303,-2.162c-0.035,-0.25 0.058,-0.5 0.247,-0.666c1.69,-1.492 2.746,-3.566 2.746,-5.863c0,-4.576 -4.165,-8.25 -9.25,-8.25Z"></path>
</svg>
- retweets
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 48 48">
<path d="M 7.9707031 7 A 2.0002 2.0002 0 0 0 6.5859375 7.5859375 L 0.5859375 13.585938 A 2.0002 2.0002 0 1 0 3.4140625 16.414062 L 5.9902344 13.837891 L 5.9492188 32 C 5.9492188 35.86 9.0892188 39 12.949219 39 L 32.919922 39 L 30.460938 36.539062 C 30.000937 36.079062 29.649922 35.56 29.419922 35 L 12.949219 35 C 11.299219 35 9.9492187 33.649766 9.9492188 32.009766 L 9.9902344 13.818359 L 12.585938 16.414062 A 2.0002 2.0002 0 1 0 15.414062 13.585938 L 9.4140625 7.5859375 A 2.0002 2.0002 0 0 0 7.9707031 7 z M 15.080078 9 L 17.539062 11.460938 C 17.999063 11.920937 18.350078 12.44 18.580078 13 L 35.050781 13 C 36.700781 13 38.050781 14.35 38.050781 16 L 38.009766 34.181641 L 35.414062 31.585938 A 2.0002 2.0002 0 0 0 33.978516 30.980469 A 2.0002 2.0002 0 0 0 32.585938 34.414062 L 38.585938 40.414062 A 2.0002 2.0002 0 0 0 41.414062 40.414062 L 47.414062 34.414062 A 2.0002 2.0002 0 1 0 44.585938 31.585938 L 42.009766 34.162109 L 42.050781 16 C 42.050781 12.14 38.910781 9 35.050781 9 L 15.080078 9 z"></path>
</svg>
- like
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 30 30">
<path d="M 9.5449219 3 C 5.3895807 3 2 6.3895806 2 10.544922 C 2 14.283156 4.9005496 18.084723 7.6601562 21.119141 C 10.419763 24.153558 13.171875 26.369141 13.171875 26.369141 A 1.0001 1.0001 0 0 0 13.197266 26.388672 C 13.642797 26.725148 14.201794 26.943857 14.808594 26.984375 A 1.0001 1.0001 0 0 0 15 27 A 1.0001 1.0001 0 0 0 15.189453 26.984375 A 1.0001 1.0001 0 0 0 15.199219 26.982422 C 15.802918 26.940449 16.359155 26.723674 16.802734 26.388672 A 1.0001 1.0001 0 0 0 16.828125 26.369141 C 16.828125 26.369141 19.580237 24.153558 22.339844 21.119141 C 25.099451 18.084722 28 14.283156 28 10.544922 C 28 6.3895806 24.610419 3 20.455078 3 C 17.841043 3 15.989939 4.4385487 15 5.4570312 C 14.010061 4.4385487 12.158957 3 9.5449219 3 z M 9.5449219 5 C 12.276127 5 13.937826 7.2424468 14.103516 7.4746094 A 1.0001 1.0001 0 0 0 14.994141 8.0136719 A 1.0001 1.0001 0 0 0 15.017578 8.0136719 A 1.0001 1.0001 0 0 0 15.041016 8.0117188 A 1.0001 1.0001 0 0 0 15.117188 8.0058594 A 1.0001 1.0001 0 0 0 15.892578 7.4785156 C 16.049938 7.2575052 17.716133 5 20.455078 5 C 23.529737 5 26 7.4702629 26 10.544922 C 26 13.147688 23.499768 16.870104 20.859375 19.773438 C 18.227966 22.666891 15.607768 24.780451 15.589844 24.794922 C 15.414236 24.925626 15.219097 25 15 25 C 14.780903 25 14.585764 24.92563 14.410156 24.794922 C 14.392236 24.780452 11.772034 22.666891 9.140625 19.773438 C 6.5002316 16.870105 4 13.147688 4 10.544922 C 4 7.4702629 6.470263 5 9.5449219 5 z"></path>
</svg>
- views
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 24 24">
<path d="M 8 3 L 8 19 L 6 19 L 6 7 L 3 7 L 3 19 L 3 21 L 6 21 L 8 21 L 11 21 L 13 21 L 16 21 L 18 21 L 21 21 L 21 19 L 21 9 L 18 9 L 18 19 L 16 19 L 16 13 L 13 13 L 13 19 L 11 19 L 11 3 L 8 3 z"></path>
</svg>
- share
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 32 32">
<path d="M 16 2.5859375 L 11.292969 7.2929688 L 12.707031 8.7070312 L 15 6.4140625 L 15 21 L 17 21 L 17 6.4140625 L 19.292969 8.7070312 L 20.707031 7.2929688 L 16 2.5859375 z M 9 11 C 7.3550302 11 6 12.35503 6 14 L 6 26 C 6 27.64497 7.3550302 29 9 29 L 23 29 C 24.64497 29 26 27.64497 26 26 L 26 14 C 26 12.35503 24.64497 11 23 11 L 20 11 L 20 13 L 23 13 C 23.56503 13 24 13.43497 24 14 L 24 26 C 24 26.56503 23.56503 27 23 27 L 9 27 C 8.4349698 27 8 26.56503 8 26 L 8 14 C 8 13.43497 8.4349698 13 9 13 L 12 13 L 12 11 L 9 11 z"></path>
</svg>
- search
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100" height="100"
viewBox="0 0 30 30">
<path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z"></path>
</svg>
<svg>
width="100" height="100"
viewBox="0 0 24 24"
<path d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path>
</svg>
-------------------------------------
----- DIFFICULTIES
- Logos and all the svg.
- flexible layout (responsive)
-------------------------------------
----- LEARNINGS
- calc(21.8%)
- wrapper
- Sometimes there is box B inside a box A (sizeOf A > sizeOfB), and you want to change the
hover state of B while hovering on A.
.A:hover .B{
property-of-b: value;
}
- AND SELECTOR
.tweet-icon-link:hover.like-area span {
color: rgb(249, 24, 128);
}
251 x 141
251 x 284
504 x 284