Sorry

This feed does not validate.

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendation.

Source: https://yari21.xyz

  1.  
  2.  
  3. <style>
  4.  
  5. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
  6. body {
  7. min-height: 100vh;
  8. display: flex;
  9. font-size: 16px;
  10. align-items: center;
  11. justify-content: center;
  12. font-family: Inter;
  13. padding: 1rem;
  14. color: #585757;
  15. background: #e8e8e8;
  16. }
  17. p , h2, h3, h4, h5 , h6 { margin : 0px; }
  18. .block {
  19. background: #fff;
  20. width: 504px;
  21. padding: 1rem;
  22. background: #ffffff;
  23. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
  24. 0px 1px 1px rgba(0, 0, 0, 0.08);
  25. border-radius: 8px;
  26. display: block;
  27. &-header {
  28. display: flex;
  29. align-items: center;
  30. justify-content: space-between;
  31. margin-bottom: 16px;
  32. .title {
  33. display: flex;
  34. align-items: flex-start;
  35. .tag {
  36. display: flex;
  37. align-items: center;
  38. justify-content: center;
  39. margin-left: 4px;
  40. background: #f7f7f7;
  41. color: #1c1c1c;
  42. text-align: center;
  43. padding: 0 4px;
  44. letter-spacing: 0.04em;
  45. text-transform: uppercase;
  46. font-weight: 500;
  47. font-size: 10px;
  48. line-height: 16px;
  49. border: 1px solid #e8e8e8;
  50. border-radius: 96px;
  51. }
  52. }
  53. }
  54. }
  55. .writing {
  56. background: #ffffff;
  57. border: 1px solid #e8e8e8;
  58. border-radius: 8px;
  59. overflow: hidden;
  60. margin-bottom: 24px;
  61. padding: 12px;
  62. .textarea {
  63. width: 100%;
  64. font-family: "Inter";
  65. color: #585757;
  66. height: 50px;
  67. overflow-y: auto;
  68. appearance: none;
  69. border: 0;
  70. outline: 0;
  71. resize: none;
  72. font-size: 16px;
  73. line-height: 24px;
  74. }
  75. &:focus-within {
  76. border: 1px solid #0085ff;
  77. box-shadow: 0px 0px 2px 2px rgba(0, 133, 255, 0.15);
  78. }
  79. .footer {
  80. margin-top: 12px;
  81. padding-top: 12px;
  82. display: flex;
  83. align-items: center;
  84. justify-content: space-between;
  85. border-top: 1px solid #e8e8e8;
  86. .text-format {
  87. display: flex;
  88. align-items: center;
  89. gap: 12px;
  90. }
  91. }
  92. }
  93. .comment {
  94. display: grid;
  95. gap: 14px;
  96. .user-banner {
  97. display: flex;
  98. justify-content: space-between;
  99. align-items: center;
  100. .user {
  101. gap: 8px;
  102. align-items: center;
  103. display: flex;
  104. .avatar {
  105. height: 32px;
  106. width: 32px;
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. border: 1px solid transparent;
  111. position: relative;
  112. border-radius: 100px;
  113. font-weight: 500;
  114. font-size: 13px;
  115. line-height: 20px;
  116. img {
  117. max-width: 100%;
  118. border-radius: 50%;
  119. }
  120. .stat {
  121. display: flex;
  122. position: absolute;
  123. right: -2px;
  124. bottom: -2px;
  125. display: block;
  126. width: 12px;
  127. height: 12px;
  128. z-index: 9;
  129. border: 2px solid #ffffff;
  130. border-radius: 100px;
  131. &.green {
  132. background: #00ba34;
  133. }
  134. &.grey {
  135. background: #969696;
  136. }
  137. }
  138. }
  139. }
  140. }
  141. .footer {
  142. gap: 12px;
  143. display: flex;
  144. align-items: center;
  145. .reactions {
  146. display: flex;
  147. align-items: center;
  148. gap: 8px;
  149. }
  150. .divider {
  151. height: 12px;
  152. width: 1px;
  153. background: #e8e8e8;
  154. }
  155. }
  156. &:not(.comment:first-child) {
  157. padding-bottom: 12px;
  158. margin-bottom: 12px;
  159. border-bottom: 1px solid #e8e8e8;
  160. }
  161. & + & {
  162. padding-top: 12px;
  163. }
  164. &.reply {
  165. .user-banner,
  166. .content,
  167. .footer {
  168. margin-left: 32px;
  169. }
  170. }
  171. }
  172. .group-radio {
  173. position: relative;
  174. display: flex;
  175. user-select: none;
  176. align-items: stretch;
  177. .button-radio {
  178. box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
  179. label {
  180. cursor: pointer;
  181. padding: 4px 8px;
  182. font-weight: 500;
  183. font-size: 14px;
  184. display: flex;
  185. height: 28px;
  186. align-items: center;
  187. line-height: 28px;
  188. transition: 0.2s ease;
  189. }
  190. &:first-child {
  191. border-top-left-radius: 8px;
  192. border-bottom-left-radius: 8px;
  193. border-left: 1px solid #e8e8e8;
  194. border-top: 1px solid #e8e8e8;
  195. border-bottom: 1px solid #e8e8e8;
  196. }
  197. &:last-child {
  198. border-top-right-radius: 8px;
  199. border-right: 1px solid #e8e8e8;
  200. border-top: 1px solid #e8e8e8;
  201. border-bottom: 1px solid #e8e8e8;
  202. border-bottom-right-radius: 8px;
  203. }
  204. input[type="radio"] {
  205. display: none;
  206. &:checked + label {
  207. background: #f7f7f7;
  208. }
  209. }
  210. }
  211. .divider {
  212. width: 1px;
  213. background: #e8e8e8;
  214. }
  215. }
  216. h5 {
  217. font-size: 16px;
  218. font-weight: 500;
  219. line-height: 24px;
  220. color: #1c1c1c;
  221. letter-spacing: 0em;
  222. text-align: left;
  223. }
  224. .btn {
  225. appearance: none;
  226. background: transparent;
  227. border: 0;
  228. padding: 0;
  229. display: flex;
  230. font: inherit;
  231. align-items: center;
  232. justify-content: center;
  233. cursor: pointer;
  234. color: #1c1c1c;
  235. transition: 0.2s ease;
  236. i {
  237. color: #969696;
  238. font-size: 18px;
  239. transition: 0.15s ease-in-out;
  240. }
  241. &.primary {
  242. min-width: 64px;
  243. padding: 8px 12px;
  244. height: 40px;
  245. color: #fff;
  246. display: inline-flex;
  247. background: #0085ff;
  248. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
  249. 0px 1px 1px rgba(0, 0, 0, 0.08);
  250. border-radius: 8px;
  251. &:hover {
  252. background: lighten(#0085ff, 10%);
  253. }
  254. }
  255. &:hover {
  256. i {
  257. opacity: 0.7;
  258. }
  259. }
  260. outline: none;
  261. img {
  262. max-width: 18px;
  263. height: auto;
  264. }
  265. &.react {
  266. padding: 4px 8px 4px 4px;
  267. background: #f7f7f7;
  268. border: 1px solid #e8e8e8;
  269. border-radius: 8px;
  270. gap: 4px;
  271. &:hover {
  272. background-color: #eee;
  273. }
  274. }
  275. &.dropdown {
  276. display: flex;
  277. cursor: pointer;
  278. border-radius: 50%;
  279. align-items: center;
  280. justify-content: center;
  281. padding: 0;
  282. width: 26px;
  283. height: 26px;
  284. &:hover {
  285. background-color: #eee;
  286. }
  287. }
  288. }
  289. p {
  290. line-height: 24px;
  291. a.tagged-user {
  292. display: inline-flex;
  293. padding: 2px 8px;
  294. background: #e5f3ff;
  295. border-radius: 256px;
  296. color: #0085ff;
  297. }
  298. }
  299. .is-mute {
  300. font-weight: 400;
  301. font-size: 13px;
  302. line-height: 20px;
  303. color: #969696;
  304. }
  305. a {
  306. font-weight: 500;
  307. font-size: 13px;
  308. line-height: 20px;
  309. color: #1c1c1c;
  310. text-decoration: none;
  311. transition: opacity 0.15s ease-in-out;
  312. &:hover {
  313. opacity: 0.7;
  314. }
  315. }
  316. h2 {
  317. font-weight: 500;
  318. font-size: 20px;
  319. line-height: 28px;
  320. color: #1c1c1c;
  321. }
  322. * {
  323. box-sizing: border-box;
  324. }
  325. .load {
  326. display: flex;
  327. align-items: center;
  328. justify-content: center;
  329. span {
  330. display: flex;
  331. align-items: center;
  332. font-weight: 400;
  333. font-size: 13px;
  334. line-height: 20px;
  335. color: #969696;
  336. i {
  337. margin-right: 6px;
  338. }
  339. }
  340. }
  341. .group-button {
  342. display: flex;
  343. gap: 16px;
  344. }
  345.  
  346.  
  347. </style>
  348.  
  349.  
  350. <div class="block">
  351. <div class="block-header">
  352. <div class="title" style="margin-bottom:20px;">
  353. <h2>Comments</h2>
  354. </div>
  355. <div class="group-radio" style="margin-bottom:20px">
  356. <span class="button-radio">
  357. <input id="latest" name="latest" type="radio" checked>
  358. <label for="latest">Latest</label>
  359. </span>
  360. <div class="divider"></div>
  361. <span class="button-radio">
  362. <input id="popular" name="latest" type="radio">
  363. <label for="popular">Popular</label>
  364. </span>
  365. </div>
  366. </div>
  367. <div class="writing">
  368. <div contenteditable="true" class="textarea" autofocus spellcheck="false">
  369. <p>Hi <a class="tagged-user">@YI</a></p>
  370. </div>
  371. <div class="footer">
  372. <div class="text-format">
  373. <button class="btn"><i class="ri-bold"></i></button>
  374. <button class="btn"><i class="ri-italic"></i></button>
  375. <button class="btn"><i class="ri-underline"></i></button>
  376. <button class="btn"><i class="ri-list-unordered"></i></button>
  377. </div>
  378. <div class="group-button">
  379. <button class="btn"><i class="ri-at-line"></i></button>
  380. <button class="btn primary">Send</button>
  381. </div>
  382. </div>
  383. </div>
  384. <div>
  385. <div class="comment">
  386. <div class="user-banner">
  387. <div class="user">
  388. <div class="avatar" style="background-color:#fff5e9;border-color:#ffe0bd; color:#F98600">
  389. YI
  390. <span class="stat green"></span>
  391. </div>
  392. <h5>Yari</h5>
  393. </div>
  394. <button class="btn dropdown"><i class="ri-more-line"></i></button>
  395. </div>
  396. <div class="content">
  397. <p>Thank you for sharing the <a href="https://yari12.xyz/">post</a>.</p>
  398. </div>
  399. <div class="footer">
  400. <button class="btn"><i class="ri-emotion-line"></i></button>
  401. <div class="divider"></div>
  402. <a href="#">Reply</a>
  403. <div class="divider"></div>
  404. <span class="is-mute">09-02-2025</span>
  405. </div>
  406. </div>
  407.  
  408. </div>
  409. <div class="load">
  410. <span><i class="ri-refresh-line"></i>Loading</span>
  411. </div>
  412. </div>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda