API tools faq
paste
Advertisement
goldfishmem

✱⁞CHUNMI

goldfishmem
Jan 10th, 2019
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.18 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2.  
  3. [div style="display: none;"][font=IBM Plex Mono]font call[/font][/div]
  4.  
  5. [comment]major sections[/comment]
  6. [class name="root"]
  7. --mainbgcolor: #fbfbfb;
  8. --color1: #ffaed6;
  9. --color2: #cba1ff;
  10. --textcolor: #818181;
  11. --headertext: #ffffff;
  12. --headershadow: #818181;
  13. --subtext: #d4d4d4;
  14. --subtextfont: 'IBM Plex Mono', monospace;
  15. --profileimg: url(https://i.imgur.com/oWMGEOe.jpg);
  16. font-smoothing: antialiased;
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. display: block;
  20. position: relative;
  21. overflow: hidden;
  22. background: var(--mainbgcolor);
  23. padding-bottom: 15px;
  24. font-size: initial;
  25. color: var(--textcolor);
  26. [/class]
  27. [class name="header"]
  28. display: block;
  29. width: 100%;
  30. box-sizing: border-box;
  31. background-color: var(--color1);
  32. font-size: 3.5vh;
  33. letter-spacing: -.05vh;
  34. color: var(--headertext);
  35. text-shadow: 1px 1px 1px var(--headershadow);
  36. border-bottom: 2px solid var(--color2);
  37. padding: 20px 5%;
  38. letter-spacing: -1px;
  39. margin-bottom: 15px;
  40. [/class]
  41. [class name="header" maxWidth=100vh]
  42. padding: 10px 5%;
  43. [/class]
  44. [class name="flexbox"]
  45. display: flex;
  46. width: 100%
  47. box-sizing: border-box;
  48. padding: 0px 5%;
  49. flex-flow: row wrap;
  50. justify-content: flex-start;
  51. align-items: center;
  52. align-content: center;
  53. overflow: hidden;
  54. [/class]
  55. [class name="flexbox" maxWidth=100vh]
  56. justify-content: center;
  57. [/class]
  58.  
  59. [comment]info[/comment]
  60. [class name="sidebar"]
  61. flex: 1 0 200px;
  62. text-align: center;
  63. max-width: 250px;
  64. [/class]
  65. [class name="sidebar" maxWidth=100vh]
  66. margin-bottom: 10px;
  67. [/class]
  68. [class name="username"]
  69. display: block;
  70. box-sizing: border-box;
  71. width: 180px;
  72. background: var(--color2);
  73. padding: 10px;
  74. border-radius: 5px;
  75. margin: 0px calc(50% - 90px);
  76. color: var(--headertext);
  77. font-size: 2vh;
  78. position: relative;
  79. z-index: 2;
  80. [/class]
  81. [class name="arrow"]
  82. display: block;
  83. height: 16px;
  84. width: 16px;
  85. margin: -8px calc(50% - 8px) 15px calc(50% - 8px);
  86. background: var(--color2);
  87. transform: rotate(45deg);
  88. position: relative;
  89. z-index: 1;
  90. [/class]
  91. [class name="icon"]
  92. display: block;
  93. box-sizing: border-box;
  94. width: 130px;
  95. height: 130px;
  96. margin: 5px calc(50% - 65px);
  97. border-radius: 5px;
  98. font-size: 0px;
  99. overflow: hidden;
  100. padding: 5px;
  101. border: 1px solid var(--color2);
  102. background: var(--headertext);
  103. [/class]
  104. [class name="iconimage"]
  105. display: block;
  106. height: 100%;
  107. width: 100%;
  108. border-radius: 5px;
  109. overflow: hidden;
  110. background: var(--profileimg) center center/cover;
  111. [/class]
  112. [class name="information"]
  113. display: block;
  114. width: 174px;
  115. box-shadow: 4px 4px var(--color1);
  116. margin: 15px calc(50% - 87px) 5px calc(50% - 87px);
  117. background: var(--headertext);
  118. box-sizing: border-box;
  119. border: 1px solid var(--color2);
  120. padding: 10px 15px;
  121. font-size: .7em;
  122. text-align: justify;
  123. [/class]
  124. [class name="credits"]
  125. display: block;
  126. width: 150px;
  127. font-family: var(--subtextfont);
  128. color: var(--subtext);
  129. margin: 3vh calc(50% - 75px) 0px calc(50% - 75px);
  130. font-size: 1vh;
  131. text-align: left;
  132. text-transform: uppercase;
  133. [/class]
  134.  
  135. [comment]main content[/comment]
  136. [class name="timeline"]
  137. flex: 2 0 180px;
  138. height: 65vh;
  139. overflow: hidden;
  140. width: calc(100% - 20px);
  141. padding: 0px 10px;
  142. text-align: left;
  143. max-width: 600px;
  144. [/class]
  145. [class name="scrollbox"]
  146. display: block;
  147. height: 100%;
  148. width: 100%;
  149. padding-right: 40%;
  150. overflow-x: hidden;
  151. overflow-y: auto;
  152. [/class]
  153. [class name="tweetscontainer"]
  154. display: flex;
  155. flex-flow: column-reverse nowrap;
  156. justify-content: flex-end;
  157. align-items: stretch;
  158. align-content: flex-end;
  159. [/class]
  160.  
  161. [comment]tweet[/comment]
  162. [class name="tweet"]
  163. display: flex;
  164. flex-flow: row nowrap;
  165. justify-content: flex-start;
  166. align-items: flex-start;
  167. align-content: flex-start;
  168. margin: 15px 0px;
  169. width: 100%;
  170. text-align: left;
  171. [/class]
  172. [class name="twimg"]
  173. display: inline-block;
  174. vertical-align: top;
  175. height: 70px;
  176. width: 70px;
  177. margin-right: 15px;
  178. border-radius: 5px;
  179. overflow: hidden;
  180. background: var(--profileimg) center center/cover;
  181. font-size: 0px;
  182. [/class]
  183. [class name="twcontainer"]
  184. flex: 1 0 0px;
  185. [/class]
  186. [class name="tweetbox"]
  187. display: block;
  188. width: calc(100% - 6px);
  189. vertical-align: top;
  190. box-sizing: border-box;
  191. background: var(--headertext);
  192. border: 1px solid var(--color2);
  193. box-shadow: 4px 4px var(--color1);
  194. padding: 10px 15px;
  195. text-align: justify;
  196. font-size: .73em;
  197. white-space: normal !important;
  198. [/class]
  199. [class name="timestamp"]
  200. margin-top: 6px;
  201. display: block;
  202. box-sizing: border-box;
  203. width: 100%;
  204. padding-right: 25px;
  205. font-family: var(--subtextfont);
  206. color: var(--color2);
  207. font-size: 1vh;
  208. text-align: right;
  209. text-transform: uppercase;
  210. [/class]
  211. [class name="at"]
  212. display: inline;
  213. color: var(--color1);
  214. text-transform: none;
  215. cursor: pointer;
  216. [/class]
  217. [class name="tag"]
  218. display: inline;
  219. color: var(--color2);
  220. cursor: pointer;
  221. [/class]
  222. [class name="url"]
  223. display: inline;
  224. color: var(--color1);
  225. cursor: pointer;
  226. [/class]
  227. [class name="postimg"]
  228. display: block;
  229. border-left: 5px solid var(--color1);
  230. padding-left: 2px;
  231. overflow: hidden;
  232. width: 100%;
  233. margin-top: 2vh;
  234. pointer-events: none;
  235. font-size: 0px;
  236. [/class]
  237.  
  238. [comment]insert fake people here[/comment]
  239. [class name="yunapuppy"]
  240. --color1: #A3826F;
  241. --color2: #F2C140;
  242. --profileimg: url(https://i.imgur.com/CBgA1D4.jpg);
  243. [/class]
  244.  
  245. [div class="root"]
  246. [div class="header"]
  247. [b]夜もすがら君想ふ[/b]
  248. [/div]
  249. [div class="flexbox"]
  250. [div class="sidebar"]
  251. [div class="username"]
  252. [plain]@konbini-p[/plain]
  253. [/div]
  254. [div class="arrow"][/div]
  255. [div class="icon"]
  256. [div class="iconimage"] [/div]
  257. [/div]
  258. [div class="information"]
  259. Group Mu: The group is on the unsteady deck of a wooden ship.
  260. [/div]
  261. [div class="credits"]
  262. C: GLUCOSE GUARDIAN[br][/br]
  263. A: 岩本ゼロゴ
  264. [/div]
  265. [/div]
  266. [div class="timeline"]
  267. [div class="scrollbox"]
  268. [div class="tweetscontainer"]
  269. [div class="tweet"]
  270. [div class="twimg"].[/div]
  271. [div class="twcontainer"]
  272. [div class="tweetbox"]hello please send help[/div]
  273. [div class="timestamp"]posted january 5[/div]
  274. [/div]
  275. [/div]
  276. [div class="tweet"]
  277. [div class="twimg"].[/div]
  278. [div class="twcontainer"]
  279. [div class="tweetbox"]newest tweet with a [div class="url"][plain]http://fakeurl.com[/plain][/div][/div]
  280. [div class="timestamp"]posted january 8[/div]
  281. [/div]
  282. [/div]
  283. [div class="tweet"]
  284. [div class="twimg"].[/div]
  285. [div class="twcontainer"]
  286. [div class="tweetbox"]
  287. testing [div class="tag"]#tags[/div] and [div class="at"][plain]@someone[/plain][/div][br][/br][br][/br]
  288. Reminder that to create linebreaks you need the [plain][br][/br][/plain] tags.
  289. [/div]
  290. [div class="timestamp"]posted january 9[/div]
  291. [/div]
  292. [/div]
  293. [div class="tweet"]
  294. [div class="twimg"].[/div]
  295. [div class="twcontainer"]
  296. [div class="tweetbox"]
  297. testing img. As an fyi, this format works better with horizontal/landscape orientation images.
  298. [div class="postimg"]
  299. [img]https://i.imgur.com/gbwSW0z.jpg[/img]
  300. [/div]
  301. [/div]
  302. [div class="timestamp"]posted january 10[/div]
  303. [/div]
  304. [/div]
  305. [div class="tweet" style="--color1: #B36EFB; --color2: #4DD7FF; --profileimg: url(https://i.imgur.com/iQxsYkQ.jpg);"]
  306. [div class="twimg"].[/div]
  307. [div class="twcontainer"]
  308. [div class="tweetbox"]
  309. you can fake retweets by using this format. if you plan on "retweeting" from a person a lot, make your own variable class and attach it to the tweet class here.
  310. [/div]
  311. [div class="timestamp"]posted by [div class="at"][plain]@anise[/plain][/div] january 9[/div]
  312. [/div]
  313. [/div]
  314. [div class="tweet yunapuppy"]
  315. [div class="twimg"].[/div]
  316. [div class="twcontainer"]
  317. [div class="tweetbox"]
  318. like so. This time I simply added the yunapuppy class name, which has its own variables that override the main's.
  319. [div class="postimg"]
  320. [img]https://i.imgur.com/oD8qU92.jpg[/img]
  321. [/div]
  322. [/div]
  323. [div class="timestamp"]posted by [div class="at"][plain]@yunapuppy[/plain][/div] january 11[/div]
  324. [/div]
  325. [/div]
  326. [div class="tweet"]
  327. [div class="twimg"].[/div]
  328. [div class="twcontainer"]
  329. [div class="tweetbox"]When writing in the code for the tweets, you write them in chronological order. The code automatically displays it in reverse. Retweets can be out of whack date-wise since we're assuming it's based on when they were retweeted and not the original posting date.[/div]
  330. [div class="timestamp"]posted january 14[/div]
  331. [/div]
  332. [/div]
  333. [/div]
  334. [/div]
  335. [/div]
  336. [/div]
  337. [/div]
  338.  
  339. [/nobr]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!