You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
5.6 KiB

  1. <div
  2. class="w-100 mt1 mt3-l cb pv2 flex flex-grow flex-auto flex-column content-stretch"
  3. >
  4. <article
  5. class="w-100 h-entry mt1 mt3-l pa2 flex flex-grow flex-auto flex-column content-stretch justify-center items-center"
  6. >
  7. <div class="flex flex-column flex-auto flex-grow w-100">
  8. <div class="mw7 w-100 center">
  9. <h2 class="navy f2 lh-title p-summary p-name mb1">
  10. <i class="br-100 pa1 fw1 h2 w2 v-mid" data-feather="heart">Liked</i>
  11. <span class="v-mid">Liked</span>
  12. <a
  13. target="_new"
  14. class="u-like-of h-cite v-mid fw5 underline link navy"
  15. href="http://67efebc0.ngrok.io/post/b5a600c5-98a0-4112-b2d5-9df7c600f5e2"
  16. >
  17. 67efebc0.ngrok.io
  18. </a>
  19. </h2>
  20. <h5 class="f5 code gray lh-solid fw1 ttu">67efebc0.ngrok.io</h5>
  21. </div>
  22. <div
  23. class="mw8 center w-100 order-2 items-end flex flex-wrap justify-around-m justify-between mt4-l mt2"
  24. >
  25. <div
  26. class="db bg-near-black mt4-s ma3-l self-start order-1 w-100 w-auto-ns self-stretch items-center sans-serif"
  27. >
  28. <ul
  29. class="flex flex-column w-100 h-100 justify-center w-auto-l ba b--near-black relative-l left-1-l bottom-1-l self-end-l self-center ma0 pa3 f6 gray list lh-copy bg-dark-gray moon-gray"
  30. >
  31. <li class="lh-copy">
  32. <a href="#mentions-reposts" class="link color-inherit dim">
  33. <i class="v-mid ph1 w1 h1" data-feather="repeat"></i>
  34. <span class="v-mid"><strong>0</strong> Reposts</span>
  35. </a>
  36. </li>
  37. <li class="lh-copy mt1">
  38. <a href="#mentions-replies" class="link color-inherit dim">
  39. <i class="v-mid ph1 w1 h1" data-feather="corner-up-right"></i>
  40. <span class="v-mid"><strong>0</strong> Replies</span>
  41. </a>
  42. </li>
  43. <li class="lh-copy mt1">
  44. <a href="#mentions-likes" class="link color-inherit dim">
  45. <i class="v-mid ph1 w1 h1" data-feather="heart"></i>
  46. <span class="v-mid"><strong>0</strong> Likes</span>
  47. </a>
  48. </li>
  49. <li class="lh-copy mt1">
  50. <a href="#mentions-mentions" class="link color-inherit dim">
  51. <i class="v-mid ph1 w1 h1" data-feather="at-sign"></i>
  52. <span class="v-mid"><strong>0</strong> Mentions</span>
  53. </a>
  54. </li>
  55. <li class="lh-copy mt1">
  56. <a href="#mentions-syndication" class="link color-inherit dim">
  57. <i class="v-mid ph1 w1 h1" data-feather="upload-cloud"></i>
  58. <span class="v-mid"><strong>8</strong> Syndications</span>
  59. </a>
  60. </li>
  61. </ul>
  62. </div>
  63. <div class="w-100 w-auto-l order-3 order-2-l self-center mv3 mv4-m">
  64. <p class="dn-l lh-copy pa0 ma0 f6 gray">An uncategorized post.</p>
  65. </div>
  66. <div
  67. class="db bg-near-black mt3 mt0-m ma3-l self-start w-100 w-auto-ns order-2 order-3-l self-stretch items-center sans-serif"
  68. >
  69. <ul
  70. class="flex flex-column w-100 h-100 justify-center w-auto-l relative-l left--1-l top--1-l self-end-l self-center ma0 pa2 f6 dark-gray list lh-copy bg-lightest-blue near-black ba b--mid-gray"
  71. >
  72. <li class="lh-copy">
  73. published
  74. <time
  75. class="fw5 dt-published"
  76. title="2018-12-19T00:19:04.410503Z"
  77. datetime="2018-12-19T00:19:04.410503Z"
  78. >
  79. 7 minutes
  80. </time>
  81. </li>
  82. <li class="lh-copy mt1">
  83. updated
  84. <time
  85. class="fw5 dt-updated"
  86. title="2018-12-19 00:19:04.406330"
  87. datetime="2018-12-19 00:19:04.406330"
  88. >
  89. 7 minutes
  90. </time>
  91. </li>
  92. <li class="lh-copy mt1">
  93. <a class="link dim fw5 color-inherit" href="/post/of-type/like">
  94. a
  95. <i class="v-mid pv1 h1 w1" data-feather="message-square"></i>
  96. like post
  97. </a>
  98. </li>
  99. <li class="lh-copy mt1">
  100. <a
  101. class="link navy fw5 u-url u-uid"
  102. href="/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32"
  103. >Permalink</a
  104. >
  105. </li>
  106. <li class="lh-copy mt1">
  107. <span class="v-mid">by</span>
  108. <a
  109. class="ml1 u-author h-card v-mid link fw5 navy"
  110. rel="me"
  111. href="/"
  112. >
  113. <img
  114. class="v-mid u-photo br-100 h1 w1 b--near-black"
  115. src="http://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpg"
  116. />
  117. <span class="v-mid">Jacky Alciné</span>
  118. </a>
  119. </li>
  120. </ul>
  121. </div>
  122. <div class="w-100 order-4 self-end bt b--moon-gray">
  123. <h3 class="f3 ttu fw3 tracked lh-title">
  124. <i class="v-mid w2 h2" data-feather="message-circle"></i>
  125. <span class="v-mid">Responses</span>
  126. </h3>
  127. <p class="f5 lh-copy measure">
  128. Here's what people had to say about this like. Want to join in?
  129. <a
  130. target="_new"
  131. href="https://indieweb.org/reply#How_To"
  132. class="link underline navy fw7"
  133. >Learn how</a
  134. >.
  135. </p>
  136. </div>
  137. </div>
  138. </div>
  139. </article>
  140. </div>