API tools faq
paste
glenthemes

Theme [39]: Clotho

glenthemes
Mar 13th, 2024 (edited)
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 186.76 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------------------------
  2.  
  3. Theme [39]: Clotho
  4. Made by glenthemes
  5.  
  6. Release date: 2024/03/14
  7. Last updated: 2024/05/11
  8.  
  9. 「 THEME INFO. 」
  10. ❃ Post: glenthemes.tumblr.com/post/744991449083412480
  11. ❃ Preview: glenthpvs.tumblr.com/clotho
  12. ❃ Code: glen-themes.gitlab.io/thms/39/clotho
  13.  
  14. 「 HOW TO USE. 」
  15. dub.sh/clotho-guide
  16.  
  17. 「 TERMS OF USE. 」
  18. 1) Do not remove the theme credit.
  19. 2) Do not repost/redistribute my themes.
  20. 3) Do not take parts of the code and use it as your own.
  21. 4) Do not use my themes as a base code.
  22. 5) Do not mix my themes together.
  23.  
  24. 「 CREDITS. 」
  25. (人^▽')～ glencredits.tumblr.com/clotho
  26.  
  27. -------------------------------------------------------------------->
  28.  
  29. <!DOCTYPE html>
  30. <html
  31. lang="en"
  32. tc-bhv="{select:tumblr controls}"
  33. tc-col="{select:tumblr controls color}"
  34. bg-size="{select:background image size}"
  35. prepend-media="{select:everything inside borders}"
  36. reblog-left-border="{select:posts left border}"
  37. reblog-dividers="{select:reblog dividers}"
  38. font="{select:font}"
  39. heading-font="{select:heading font}"
  40. caps-font="{select:uppercase font}"
  41. rounded-corners="{select:rounded corners}"
  42. infscroll="{select:infinite scroll}"
  43. {block:IndexPage}
  44. page="index-page"
  45. {/block:IndexPage}
  46. {block:PermalinkPage}
  47. page="permalink-page"
  48. {/block:PermalinkPage}
  49. username="{Name}"
  50. >
  51. <head>
  52.  
  53. <meta charset="UTF-8">
  54. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  55.  
  56. <title>
  57. {Title}
  58. {block:PostSummary} ⋮ {PostSummary}{/block:PostSummary}
  59. {block:TagPage} ⋮ #{Tag}{/block:TagPage}
  60. {block:SearchPage} ⋮ “{SearchQuery}” – {lang:SearchResultCount results}{/block:SearchPage}
  61. </title>
  62.  
  63. <link rel="shortcut icon" href="{Favicon}">
  64.  
  65. {block:Description}
  66. <meta name="description" content="{MetaDescription}"/>
  67. {/block:Description}
  68.  
  69. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  70. <meta name="theme-color" content="{AccentColor}">
  71.  
  72. <!------- FONTS ------->
  73. <script src="//cdn.jsdelivr.net/gh/ht-devx/addGoogleFonts/v2/addGoogleFonts.min.js"></script>
  74. <link rel="preconnect" href="//fonts.googleapis.com">
  75. <link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
  76. <script>
  77. addGoogleFonts("Rethink Sans, Figtree, Karla, Lexend, Inter, Onest, Libre Franklin, Readex Pro, Averia Serif Libre, Hahmlet, Domine, Vollkorn");
  78. </script>
  79. <style include-fonts>
  80. @font-face { font-family: "Unageo"; src: url("//cdn.jsdelivr.net/gh/RichardSepsi/Unageo/fonts/variable/Unageo[wght,ital].ttf"); }
  81.  
  82. @font-face { font-family: "Wanted Sans"; src: url("//cdn.jsdelivr.net/gh/wanteddev/wanted-sans/packages/wanted-sans/fonts/variable/WantedSansVariable.ttf"); }
  83.  
  84. @font-face { font-family: "Geist Sans"; src: url("//cdn.jsdelivr.net/gh/vercel/geist-font/packages/next/dist/fonts/geist-sans/Geist-Variable.woff2"); }
  85.  
  86. @font-face { font-family: "Geist Mono"; src: url("//cdn.jsdelivr.net/gh/vercel/geist-font/packages/next/dist/fonts/geist-mono/GeistMono-Variable.woff2"); }
  87. </style>
  88.  
  89. <!------- ICON LIBRARIES ------->
  90. <link href="//eva-icons.gitlab.io/i/icons.css" rel="stylesheet">
  91. <link href="//cdn.jsdelivr.net/gh/Richard9394/[email protected]/fonts/MingCute.css" rel="stylesheet">
  92. <link href="//unpkg.com/@phosphor-icons/[email protected]/src/bold/style.css" rel="stylesheet" crossorigin>
  93. <link href="//hugeicons.gitlab.io/i/icons.css" rel="stylesheet">
  94. <link href="//ios-17-logos.gitlab.io/i/icons.css" rel="stylesheet">
  95.  
  96. <!------- SCRIPTS ------->
  97. <script src="//static.tumblr.com/2pnwama/uLNs0r1rq/roots.js"></script>
  98.  
  99. <script src="//glen-iframes.gitlab.io/i/use.js"></script>
  100.  
  101. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet" crossorigin>
  102. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  103.  
  104. <script src="//unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  105. <script src="//unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  106.  
  107. <script src="//unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
  108.  
  109. <script src="//cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>
  110.  
  111. <link href="//static.tumblr.com/gtjt4bo/emIsudjeh/vidyo.min.css" rel="stylesheet">
  112. <script src="//static.tumblr.com/gtjt4bo/bGosudjfz/vidyo.min.js"></script>
  113.  
  114. <script src="//static.tumblr.com/pasdkqg/YrJsa7cu1/timeago.min.js"></script>
  115.  
  116. <script src="//glen-themes.gitlab.io/thms/39/thread-of-fate.js"></script>
  117. <link href="//glen-themes.gitlab.io/thms/39/moirai.css" rel="stylesheet">
  118.  
  119. {block:Options}
  120. <!--
  121. NO NEED TO TOUCH ANYTHING HERE,
  122. CLICK THE BACK ARROW TO EDIT YOUR OPTIONS.
  123. --->
  124. <!-- divider: images -->
  125. <meta name="image:&#x1F4F8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D408;&#x1D40C;&#x1D400;&#x1D406;&#x1D404;&#x1D412;&#x200A;:" content="">
  126.  
  127. <meta name="image:background image" content="//static.tumblr.com/gtjt4bo/bHqs9wndb/18_f.png">
  128. <meta name="image:header icon" content="//static.tumblr.com/gtjt4bo/ECrsa5qlr/zxxp31m_e4.png">
  129.  
  130. <!-- divider: main colors -->
  131. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40C;&#x1D400;&#x1D408;&#x1D40D; &#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;&#x200A;:" content="">
  132.  
  133. <meta name="color:background" content="#fff">
  134. <meta name="color:borders" content="#f0f0f0">
  135. <meta name="color:container BG" content="#fff">
  136.  
  137. <!-- divider: top nav links -->
  138. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D40E;&#x1D40F; &#x1D40D;&#x1D400;&#x1D415; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#x200A;:" content="">
  139.  
  140. <meta name="color:nav links" content="#6f7580">
  141. <meta name="color:nav links hover text" content="#575a65">
  142. <meta name="color:nav links underline" content="#3e454b">
  143.  
  144. <!-- divider: header text -->
  145. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
  146.  
  147. <meta name="color:header title" content="#6f7580">
  148. <meta name="color:header username" content="#9ba0a8">
  149. <meta name="color:header subtitle BG" content="#f8f9fb">
  150. <meta name="color:header subtitle text" content="#575a65">
  151.  
  152. <!-- divider: description -->
  153. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D403;&#x1D404;&#x1D412;&#x1D402;&#x1D411;&#x1D408;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#x200A;:" content="">
  154.  
  155. <meta name="color:desc text" content="#6f7580">
  156. <meta name="color:desc bold" content="#707084">
  157. <meta name="color:desc italic" content="#707084">
  158. <meta name="color:desc links" content="#6d9cd1">
  159. <meta name="color:desc links underline" content="#e4e7f5">
  160.  
  161. <!-- divider: icon / avatar -->
  162. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D408;&#x1D402;&#x1D40E;&#x1D40D; / &#x1D400;&#x1D415;&#x1D400;&#x1D413;&#x1D400;&#x1D411;&#x200A;:" content="">
  163.  
  164. <meta name="color:header icon BG" content="#fff">
  165. <meta name="color:header icon border" content="#f0f0f0">
  166.  
  167. <!-- divider: status -->
  168. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D413;&#x1D400;&#x1D413;&#x1D414;&#x1D412;&#x200A;:" content="">
  169.  
  170. <meta name="color:header status icon" content="#6f7580">
  171. <meta name="color:header status text" content="#6f7580">
  172.  
  173. <!-- divider: socials -->
  174. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D40E;&#x1D402;&#x1D408;&#x1D400;&#x1D40B;&#x1D412;&#x200A;:" content="">
  175.  
  176. <meta name="color:social links icon" content="#6f7580">
  177. <meta name="color:social links hover icon BG" content="#f5f6f7">
  178. <meta name="color:social links hover icon" content="#575a65">
  179.  
  180. <!-- divider: custom links -->
  181. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#x200A;:" content="">
  182.  
  183. <meta name="color:custom links" content="#6f7580">
  184. <meta name="color:custom links hover text" content="#575a65">
  185. <meta name="color:custom links underline" content="#4b5057">
  186.  
  187. <!-- divider: main text -->
  188. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40C;&#x1D400;&#x1D408;&#x1D40D; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
  189.  
  190. <meta name="color:text" content="#6f7580">
  191. <meta name="color:bold" content="#707084">
  192. <meta name="color:italic" content="#707084">
  193. <meta name="color:links" content="#6d9cd1">
  194. <meta name="color:links underline" content="#e4e7f5">
  195. <meta name="color:posts usernames" content="#3f424a">
  196. <meta name="color:caption left border" content="#e5e5e5">
  197. <meta name="color:blockquote border" content="#eee">
  198.  
  199. <!-- divider: special text -->
  200. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D40F;&#x1D404;&#x1D402;&#x1D408;&#x1D400;&#x1D40B; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
  201.  
  202. <meta name="color:posts accent borders" content="#f0f0f0">
  203. <meta name="color:posts accent BG" content="#f8f9fb">
  204. <meta name="color:posts accent text" content="#575a65">
  205.  
  206. <!-- divider: posts menu -->
  207. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412; &#x1D40C;&#x1D404;&#x1D40D;&#x1D414;&#x200A;:" content="">
  208. <meta name="color:posts menu BUTTON dots" content="#6f7580">
  209. <meta name="color:posts menu BUTTON hover BG" content="#f8f9fb">
  210. <meta name="color:posts menu BUTTON hover dots" content="#575a65">
  211.  
  212. <meta name="color:posts menu border" content="#f0f0f0">
  213. <meta name="color:posts menu BG" content="#fff">
  214. <meta name="color:posts menu text" content="#3f424a">
  215.  
  216. <meta name="color:posts menu hover BG" content="#f8f9fb">
  217. <meta name="color:posts menu hover text" content="#3f424a">
  218.  
  219. <!-- divider: buttons -->
  220. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D401;&#x1D414;&#x1D413;&#x1D413;&#x1D40E;&#x1D40D;&#x1D412;&#x200A;:" content="">
  221.  
  222. <meta name="color:buttons BG" content="#3f424a">
  223. <meta name="color:buttons icons" content="#eee">
  224.  
  225. <!-- divider: tags -->
  226. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D400;&#x1D406;&#x1D412;&#x200A;:" content="">
  227.  
  228. <meta name="color:tags" content="#6f7580">
  229. <meta name="color:tags hover" content="#4b4e57">
  230.  
  231. <!-- divider: posts info -->
  232. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412; &#x1D408;&#x1D40D;&#x1D405;&#x1D40E;&#x200A;:" content="">
  233.  
  234. <meta name="color:posts info icons" content="#575a65">
  235. <meta name="color:posts info icons hover BG" content="#f8f9fb">
  236. <meta name="color:posts info icons hover" content="#575a65">
  237. <meta name="color:liked button" content="#92a8d1">
  238. <meta name="color:notes" content="#575a65">
  239. <meta name="color:date posted" content="#9297a0">
  240. <meta name="color:source" content="#9297a0">
  241.  
  242. <!-- divider: text highlight -->
  243. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D404;&#x1D417;&#x1D413; &#x1D407;&#x1D408;&#x1D406;&#x1D407;&#x1D40B;&#x1D408;&#x1D406;&#x1D407;&#x1D413;&#x200A;:" content="">
  244.  
  245. <meta name="color:text highlight BG" content="#b4d7ff">
  246. <meta name="color:text highlighted" content="#6f7580">
  247.  
  248. <!-- divider: tooltips -->
  249. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D40E;&#x1D40E;&#x1D40B;&#x1D413;&#x1D408;&#x1D40F;&#x1D412;&#x200A;:" content="">
  250.  
  251. <meta name="color:hover text border" content="#f0f0f0">
  252. <meta name="color:hover text BG" content="#fcfcfd">
  253. <meta name="color:hover text" content="#636673">
  254.  
  255. <!-- divider: other colors -->
  256. <meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40E;&#x1D413;&#x1D407;&#x1D404;&#x1D411; &#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;&#x200A;:" content="">
  257.  
  258. <meta name="color:pagination" content="#3f424a">
  259. <meta name="color:loading spinner" content="#3f424a">
  260. <meta name="color:scrollbar" content="#b2b4bc">
  261.  
  262. <!-- divider: general -->
  263. <meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D406;&#x1D404;&#x1D40D;&#x1D404;&#x1D411;&#x1D400;&#x1D40B;&#x200A;:" title="" content="">
  264.  
  265. <!-- hover/show tumblr controls -->
  266. <meta name="select:tumblr controls" title="hover" content="hover">
  267. <meta name="select:tumblr controls" title="always show" content="always-show">
  268.  
  269. <!-- tumblr controls color -->
  270. <meta name="select:tumblr controls color" title="white" content="white">
  271. <meta name="select:tumblr controls color" title="black" content="black">
  272.  
  273. <!-- background image size -->
  274. <meta name="select:background image size" title="small&#x2009;&#x2F;&#x2009;repeating" content="repeat">
  275. <meta name="select:background image size" title="large&#x2009;&#x2F;&#x2009;full" content="full">
  276.  
  277. <!-- rounded corners -->
  278. <meta name="select:rounded corners" title="small" content="y s">
  279. <meta name="select:rounded corners" title="none" content="n x">
  280. <meta name="select:rounded corners" title="medium" content="y m">
  281. <meta name="select:rounded corners" title="large" content="y l">
  282.  
  283. <!-- container shadow -->
  284. <meta name="select:side shadows" title="yes" content="yes">
  285. <meta name="select:side shadows" title="no" content="no">
  286.  
  287. <!-- infinite scroll -->
  288. <meta name="select:infinite scroll" title="yes" content="yes">
  289. <meta name="select:infinite scroll" title="no" content="no">
  290.  
  291. <!-- back to top button -->
  292. <meta name="select:back to top button" title="show" content="yes">
  293. <meta name="select:back to top button" title="hide" content="no">
  294.  
  295. <!-- divider: fonts -->
  296. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D405;&#x1D40E;&#x1D40D;&#x1D413;&#x1D412;&#xFF1A;" title="" content="">
  297.  
  298. <!-- body font -->
  299. <meta name="select:font" title="Geist Sans" content="Geist Sans">
  300. <meta name="select:font" title="Rethink Sans" content="Rethink Sans">
  301. <meta name="select:font" title="Inter" content="Inter">
  302. <meta name="select:font" title="Karla" content="Karla">
  303. <meta name="select:font" title="Libre Franklin" content="Libre Franklin">
  304. <meta name="select:font" title="Hahmlet" content="Hahmlet">
  305. <meta name="select:font" title="Domine" content="Domine">
  306.  
  307. <!-- heading font -->
  308. <meta name="select:heading font" title="Wanted Sans" content="Wanted Sans">
  309. <meta name="select:heading font" title="Lexend" content="Lexend">
  310. <meta name="select:heading font" title="Unageo" content="Unageo">
  311. <meta name="select:heading font" title="Averia Serif Libre" content="Averia Serif Libre">
  312.  
  313. <!-- uppercase font -->
  314. <meta name="select:uppercase font" title="Onest" content="Onest">
  315. <meta name="select:uppercase font" title="Figtree" content="Figtree">
  316. <meta name="select:uppercase font" title="Karla" content="Karla">
  317. <meta name="select:uppercase font" title="Inter" content="Inter">
  318. <meta name="select:uppercase font" title="Readex Pro" content="Readex Pro">
  319. <meta name="select:uppercase font" title="Vollkorn" content="Vollkorn">
  320.  
  321. <!-- font size -->
  322. <meta name="select:font size" title="13px" content="0.85rem">
  323. <meta name="select:font size" title="11px" content="0.75rem">
  324. <meta name="select:font size" title="12px" content="0.8rem">
  325. <meta name="select:font size" title="14px" content="0.9rem">
  326. <meta name="select:font size" title="15px" content="0.95">
  327. <meta name="select:font size" title="16px" content="1rem">
  328.  
  329. <!-- divider: top nav -->
  330. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D413;&#x1D40E;&#x1D40F; &#x1D40D;&#x1D400;&#x1D415;&#xFF1A;" title="" content="">
  331.  
  332. <meta name="select:nav links font size" title="12px" content="0.7rem">
  333. <meta name="select:nav links font size" title="11px" content="0.65rem">
  334. <meta name="select:nav links font size" title="13px" content="0.75rem">
  335. <meta name="select:nav links font size" title="14px" content="0.8rem">
  336. <meta name="select:nav links font size" title="15px" content="0.85rem">
  337.  
  338. <!-- divider: header -->
  339. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411;&#xFF1A;" title="" content="">
  340.  
  341. <meta name="select:header padding" title="40px" content="40px">
  342. <meta name="select:header padding" title="30px" content="30px">
  343. <meta name="select:header padding" title="35px" content="35px">
  344. <meta name="select:header padding" title="45px" content="45px">
  345. <meta name="select:header padding" title="50px" content="50px">
  346. <meta name="select:header padding" title="55px" content="55px">
  347. <meta name="select:header padding" title="60px" content="60px">
  348. <meta name="select:header padding" title="65px" content="65px">
  349. <meta name="select:header padding" title="70px" content="70px">
  350. <meta name="select:header padding" title="75px" content="75px">
  351. <meta name="select:header padding" title="80px" content="80px">
  352.  
  353. <!-- divider: header title -->
  354. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D413;&#x1D408;&#x1D413;&#x1D40B;&#x1D404;&#xFF1A;" title="" content="">
  355.  
  356. <meta name="select:show title" title="yes" content="show">
  357. <meta name="select:show title" title="no" content="hide">
  358.  
  359. <meta name="select:title font size" title="17px" content="1.05rem">
  360. <meta name="select:title font size" title="13px" content="0.9rem">
  361. <meta name="select:title font size" title="14px" content="0.9rem">
  362. <meta name="select:title font size" title="15px" content="0.95rem">
  363. <meta name="select:title font size" title="16px" content="1rem">
  364. <meta name="select:title font size" title="18px" content="1.1rem">
  365. <meta name="select:title font size" title="19px" content="1.15rem">
  366. <meta name="select:title font size" title="20px" content="1.2rem">
  367. <meta name="select:title font size" title="21px" content="1.25rem">
  368. <meta name="select:title font size" title="22px" content="1.3rem">
  369.  
  370. <!-- divider: header username -->
  371. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D414;&#x1D412;&#x1D404;&#x1D411;&#x1D40D;&#x1D400;&#x1D40C;&#x1D404;&#xFF1A;" title="" content="">
  372.  
  373. <meta name="select:show username" title="yes" content="show">
  374. <meta name="select:show username" title="no" content="hide">
  375.  
  376. <meta name="select:username font size" title="13px" content="0.85rem">
  377. <meta name="select:username font size" title="11px" content="0.75rem">
  378. <meta name="select:username font size" title="12px" content="0.8rem">
  379. <meta name="select:username font size" title="14px" content="0.9rem">
  380. <meta name="select:username font size" title="15px" content="0.95">
  381. <meta name="select:username font size" title="16px" content="1rem">
  382.  
  383. <!-- divider: subtitle -->
  384. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D414;&#x1D401;&#x1D413;&#x1D408;&#x1D413;&#x1D40B;&#x1D404;&#xFF1A;" title="" content="">
  385.  
  386. <meta name="select:show subtitle" title="yes" content="show">
  387. <meta name="select:show subtitle" title="no" content="hide">
  388.  
  389. <meta name="select:subtitle font size" title="12px" content="0.8rem">
  390. <meta name="select:subtitle font size" title="11px" content="0.75rem">
  391. <meta name="select:subtitle font size" title="13px" content="0.85rem">
  392. <meta name="select:subtitle font size" title="14px" content="0.9rem">
  393. <meta name="select:subtitle font size" title="15px" content="0.95">
  394. <meta name="select:subtitle font size" title="16px" content="1rem">
  395.  
  396. <meta name="select:subtitle style" title="bold" content="bold">
  397. <meta name="select:subtitle style" title="normal" content="normal">
  398. <meta name="select:subtitle style" title="italic" content="italic">
  399.  
  400. <!-- divider: description -->
  401. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D403;&#x1D404;&#x1D412;&#x1D402;&#x1D411;&#x1D408;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#xFF1A;" title="" content="">
  402.  
  403. <meta name="select:show desc" title="yes" content="show">
  404. <meta name="select:show desc" title="no" content="hide">
  405.  
  406. <meta name="select:desc font size" title="13px" content="0.85rem">
  407. <meta name="select:desc font size" title="11px" content="0.75rem">
  408. <meta name="select:desc font size" title="12px" content="0.8rem">
  409. <meta name="select:desc font size" title="14px" content="0.9rem">
  410. <meta name="select:desc font size" title="15px" content="0.95">
  411. <meta name="select:desc font size" title="16px" content="1rem">
  412.  
  413. <!-- divider: status -->
  414. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D413;&#x1D400;&#x1D413;&#x1D414;&#x1D412;&#xFF1A;" title="" content="">
  415.  
  416. <meta name="select:show status" title="yes" content="show">
  417. <meta name="select:show status" title="no" content="hide">
  418.  
  419. <meta name="select:status icon size" title="18px" content="1.25rem">
  420. <meta name="select:status icon size" title="12px" content="0.875rem">
  421. <meta name="select:status icon size" title="14px" content="1rem">
  422. <meta name="select:status icon size" title="16px" content="1.125rem">
  423. <meta name="select:status icon size" title="20px" content="1.375rem">
  424. <meta name="select:status icon size" title="22px" content="1.5rem">
  425.  
  426. <meta name="select:status font size" title="12px" content="0.8rem">
  427. <meta name="select:status font size" title="11px" content="0.75rem">
  428. <meta name="select:status font size" title="13px" content="0.85rem">
  429. <meta name="select:status font size" title="14px" content="0.9rem">
  430. <meta name="select:status font size" title="15px" content="0.95">
  431. <meta name="select:status font size" title="16px" content="1rem">
  432.  
  433. <!-- divider: header icon -->
  434. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D408;&#x1D402;&#x1D40E;&#x1D40D;&#xFF1A;" title="" content="">
  435.  
  436. <meta name="select:show icon image" title="yes" content="show">
  437. <meta name="select:show icon image" title="no" content="hide">
  438.  
  439. <meta name="select:icon image size" title="75px" content="75px">
  440. <meta name="select:icon image size" title="40px" content="40px">
  441. <meta name="select:icon image size" title="45px" content="45px">
  442. <meta name="select:icon image size" title="50px" content="50px">
  443. <meta name="select:icon image size" title="55px" content="55px">
  444. <meta name="select:icon image size" title="60px" content="60px">
  445. <meta name="select:icon image size" title="65px" content="65px">
  446. <meta name="select:icon image size" title="70px" content="70px">
  447. <meta name="select:icon image size" title="80px" content="80px">
  448. <meta name="select:icon image size" title="85px" content="85px">
  449. <meta name="select:icon image size" title="90px" content="90px">
  450. <meta name="select:icon image size" title="95px" content="95px">
  451. <meta name="select:icon image size" title="100px" content="100px">
  452. <meta name="select:icon image size" title="105px" content="105px">
  453. <meta name="select:icon image size" title="110px" content="110px">
  454.  
  455. <meta name="select:icon image padding" title="8px" content="8px">
  456. <meta name="select:icon image padding" title="none" content="0px">
  457. <meta name="select:icon image padding" title="2px" content="2px">
  458. <meta name="select:icon image padding" title="4px" content="4px">
  459. <meta name="select:icon image padding" title="6px" content="6px">
  460. <meta name="select:icon image padding" title="10px" content="10px">
  461. <meta name="select:icon image padding" title="12px" content="12px">
  462. <meta name="select:icon image padding" title="14px" content="14px">
  463. <meta name="select:icon image padding" title="16px" content="16px">
  464. <meta name="select:icon image padding" title="18px" content="18px">
  465. <meta name="select:icon image padding" title="20px" content="20px">
  466.  
  467. <!-- divider: social links -->
  468. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D40E;&#x1D402;&#x1D408;&#x1D400;&#x1D40B; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#xFF1A;" title="" content="">
  469.  
  470. <meta name="select:social links position" title="right" content="right">
  471. <meta name="select:social links position" title="left" content="left">
  472.  
  473. <meta name="select:social links icon size" title="18px" content="1.125rem">
  474. <meta name="select:social links icon size" title="14px" content="0.9em">
  475. <meta name="select:social links icon size" title="16px" content="1.0125rem">
  476. <meta name="select:social links icon size" title="20px" content="1.25rem">
  477. <meta name="select:social links icon size" title="22px" content="1.38rem">
  478. <meta name="select:social links icon size" title="24px" content="1.5rem">
  479.  
  480. <!-- divider: custom links -->
  481. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#xFF1A;" title="" content="">
  482.  
  483. <meta name="select:custom links font size" title="11px" content="0.65rem">
  484. <meta name="select:custom links font size" title="12px" content="0.7rem">
  485. <meta name="select:custom links font size" title="13px" content="0.75rem">
  486. <meta name="select:custom links font size" title="14px" content="0.8rem">
  487. <meta name="select:custom links font size" title="15px" content="0.85rem">
  488.  
  489. <meta name="select:custom links columns" title="3" content="3">
  490. <meta name="select:custom links columns" title="1" content="1">
  491. <meta name="select:custom links columns" title="2" content="2">
  492. <meta name="select:custom links columns" title="4" content="4">
  493. <meta name="select:custom links columns" title="5" content="5">
  494. <meta name="select:custom links columns" title="6" content="6">
  495. <meta name="select:custom links columns" title="auto" content="auto">
  496.  
  497. <!-- divider: posts -->
  498. <meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;&#xFF1A;" title="" content="">
  499.  
  500. <meta name="select:posts width" title="450px" content="450px">
  501. <meta name="select:posts width" title="300px" content="300px">
  502. <meta name="select:posts width" title="325px" content="325px">
  503. <meta name="select:posts width" title="350px" content="350px">
  504. <meta name="select:posts width" title="375px" content="375px">
  505. <meta name="select:posts width" title="400px" content="400px">
  506. <meta name="select:posts width" title="425px" content="425px">
  507. <meta name="select:posts width" title="475px" content="475px">
  508. <meta name="select:posts width" title="500px" content="500px">
  509. <meta name="select:posts width" title="540px" content="540px">
  510. <meta name="select:posts width" title="600px" content="600px">
  511. <meta name="select:posts width" title="650px" content="650px">
  512. <meta name="select:posts width" title="700px" content="700px">
  513.  
  514. <meta name="select:posts padding" title="25px" content="25px">
  515. <meta name="select:posts padding" title="0px" content="0px">
  516. <meta name="select:posts padding" title="10px" content="10px">
  517. <meta name="select:posts padding" title="15px" content="15px">
  518. <meta name="select:posts padding" title="20px" content="20px">
  519. <meta name="select:posts padding" title="30px" content="30px">
  520. <meta name="select:posts padding" title="35px" content="35px">
  521. <meta name="select:posts padding" title="40px" content="40px">
  522.  
  523. <meta name="select:everything inside borders" title="yes" content="no">
  524. <meta name="select:everything inside borders" title="no" content="yes">
  525.  
  526. <meta name="select:posts left border" title="yes" content="yes">
  527. <meta name="select:posts left border" title="no" content="no">
  528.  
  529. <meta name="select:photos spacing" title="4px" content="4px">
  530. <meta name="select:photos spacing" title="0px" content="0px">
  531. <meta name="select:photos spacing" title="2px" content="2px">
  532. <meta name="select:photos spacing" title="6px" content="6px">
  533. <meta name="select:photos spacing" title="8px" content="8px">
  534. <meta name="select:photos spacing" title="10px" content="10px">
  535.  
  536. <meta name="select:reblog dividers" title="yes" content="yes">
  537. <meta name="select:reblog dividers" title="no" content="no">
  538.  
  539. <!-- divider: tags -->
  540. <meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D400;&#x1D406;&#x1D412;&#x200A;:" title="" content="">
  541.  
  542. <meta name="select:tags position" title="left" content="left">
  543. <meta name="select:tags position" title="right" content="right">
  544.  
  545. <meta name="select:tags" title="click to show" content="toggle">
  546. <meta name="select:tags" title="always show" content="always">
  547.  
  548. <!-- divider: post info -->
  549. <meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413; &#x1D408;&#x1D40D;&#x1D405;&#x1D40E;&#x200A;:" title="" content="">
  550.  
  551. <meta name="select:post info border" title="no" content="no">
  552. <meta name="select:post info border" title="yes" content="yes">
  553.  
  554. <meta name="select:flip post info" title="no" content="no">
  555. <meta name="select:flip post info" title="yes" content="yes">
  556.  
  557. <meta name="select:shorten notes count" title="yes" content="yes">
  558. <meta name="select:shorten notes count" title="no" content="no">
  559.  
  560. <meta name="select:shorten timestamps" title="yes" content="yes">
  561. <meta name="select:shorten timestamps" title="no" content="no">
  562.  
  563. <meta name="select:show copy link" title="yes" content="show">
  564. <meta name="select:show copy link" title="no" content="hide">
  565.  
  566. <meta name="text:&#917536;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
  567.  
  568. <meta name="text:header title" content="clotho.">
  569. <meta name="text:header subtitle" content="omnia vincit amor">
  570. <meta name="text:header desc" content="&#x2060;&#x2060;&#x201C;Love is always reaching for the stars and missing them, but in the missing, we know that we have tried.&#x201D; &#x2014; &#x3C;b&#x3E;L.M. Montgomery&#x3C;/b&#x3E;, &#x3C;i&#x3E;Chronicles of Avonlea&#x3C;/i&#x3E;">
  571.  
  572. <meta name="text:&#917536;&#x2060;" content="&#x2500;&#x2500;&#x2500;&#x2500; &#xB7; &#xB7; &#xB7; &#xB7; &#x2726; &#xB7; &#xB7; &#xB7; &#xB7; &#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&NewLine;">
  573.  
  574. <meta name="text:header status icon list&#x2002;&#x1F447;" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//hugeicons.gitlab.io/i/hugeicons_list.pdf">
  575. <meta name="text:header status icon name" content="game-controller-03">
  576. <meta name="text:header status text" content="up to &#x3C;span&#x3E;SOMETHING&#x3C;/span&#x3E;">
  577.  
  578. <meta name="text:&#917536;&#x2060;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
  579.  
  580. <meta name="text:social icons list&#x2002;&#x1F447;" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//ios-17-logos.gitlab.io/i/icons-list">
  581. <meta name="text:social link 1 URL" content="https://www.youtube.com/watch?v=yIRtlkgysaU">
  582. <meta name="text:social link 1 text" content="sample link">
  583. <meta name="text:social link 1 icon name" content="youtube">
  584. <meta name="text:social link 2 URL" content="">
  585. <meta name="text:social link 2 text" content="">
  586. <meta name="text:social link 2 icon name" content="">
  587. <meta name="text:social link 3 URL" content="">
  588. <meta name="text:social link 3 text" content="">
  589. <meta name="text:social link 3 icon name" content="">
  590. <meta name="text:social link 4 URL" content="">
  591. <meta name="text:social link 4 text" content="">
  592. <meta name="text:social link 4 icon name" content="">
  593.  
  594. <meta name="text:&#917536;&#x2060;&#x2060;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
  595.  
  596. <meta name="text:custom link 1 text" content="sample custom link">
  597. <meta name="text:custom link 1 URL" content="https://www.youtube.com/watch?v=frIGQ7RMmys">
  598.  
  599. <meta name="text:custom link 2 text" content="">
  600. <meta name="text:custom link 2 URL" content="">
  601.  
  602. <meta name="text:custom link 3 text" content="">
  603. <meta name="text:custom link 3 URL" content="">
  604.  
  605. <meta name="text:custom link 4 text" content="">
  606. <meta name="text:custom link 4 URL" content="">
  607.  
  608. <meta name="text:custom link 5 text" content="">
  609. <meta name="text:custom link 5 URL" content="">
  610.  
  611. <meta name="text:custom link 6 text" content="">
  612. <meta name="text:custom link 6 URL" content="">
  613. {/block:Options}
  614.  
  615. <style>
  616. :root, :host {
  617. /*----- THREADS OPTIONS -----*/
  618. /* "yes" e.g.: file.garden/ZRt8jW_MomIqlrfn/screenshots/usxha.png */
  619. /* "no" e.g.: file.garden/ZRt8jW_MomIqlrfn/screenshots/aaqnj.png */
  620. --Prepend-1st-Media:{select:everything inside borders};
  621.  
  622. /*----- GENERAL -----*/
  623. --Screen-Top-Gap:0px;
  624. --Load-In-Delay:25ms; /* delay before the fade animation starts */
  625. --Load-In-Speed:400ms;
  626.  
  627. /*----- CONTAINER SETTINGS -----*/
  628. --Container-Width-Total:min(var(--Post-Width-Total), 85vw);
  629. --Container-BG:{color:container BG};
  630. --Container-Border-Size:1px;
  631. --Container-Border-Color:{color:borders};
  632. --Container-Shadow-Size:45px;
  633. --Container-Shadow-Strength:2%;
  634.  
  635. /*----- TOPNAV SETTINGS -----*/
  636. --NavLinks-Padding:10px;
  637. --NavLinks-Font-Size:{select:nav links font size};
  638. --NavLinks-Text-Color:{color:nav links};
  639. --NavLinks-Hover-Text-Color:{color:nav links hover text};
  640. --NavLinks-Hover-Underline-Size:2px;
  641. --NavLinks-Hover-Underline-Color:{color:nav links underline};
  642. --NavLinks-Hover-Speed:0.25s;
  643.  
  644. /*----- HEADER SETTINGS -----*/
  645. --Header-Padding:{select:header padding};
  646. --Header-Width-Inner:calc(var(--Container-Width-Total) - (var(--Header-Padding) * 2) - (var(--Container-Border-Size) * 2));
  647. --Header-Row-Spacing:16px;
  648.  
  649. --Header-Title-Size:{select:title font size};
  650. --Header-Title-Color:{color:header title};
  651.  
  652. --Header-Username-Size:{select:username font size};
  653. --Header-Username-Color:{color:header username};
  654.  
  655. /*----- HEADER SUBTITLE SETTINGS -----*/
  656. --Header-Subtitle-Gap-Left:12px;
  657. --Header-Subtitle-Font-Size:{select:subtitle font size};
  658. --Header-Subtitle-Padding:8px;
  659. --Header-Subtitle-BG:{color:header subtitle BG};
  660. --Header-Subtitle-Rounded-Corners:calc((var(--Body-Font-Size) + (var(--Header-Subtitle-Padding) * 2)) / 2);
  661. --Header-Subtitle-Text-Color:{color:header subtitle text};
  662.  
  663. /*----- DESC SETTINGS -----*/
  664. --Desc-Font-Size:{select:desc font size};
  665. --Desc-Text-Color:{color:desc text};
  666. --Desc-Bold:{color:desc bold};
  667. --Desc-Italic:{color:desc italic};
  668. --Desc-Links:{color:desc links};
  669. --Desc-Links-Underline-Gap:0.15em;
  670. --Desc-Links-Underline-Size:1px;
  671. --Desc-Links-Underline-Color:{color:desc links underline};
  672.  
  673. /*----- HEADER STATUS SETTINGS -----*/
  674. --Header-Status-Icon-Size:{select:status icon size};
  675. --Header-Status-Icon-Color:{color:header status icon};
  676. --Header-Status-Icon-Gap:8px;
  677. --Header-Status-Font-Size:{select:status font size};
  678. --Header-Status-Line-Height:var(--Body-Line-Height);
  679. --Header-Status-Text-Color:{color:header status text};
  680.  
  681. /*----- HEADER ICON SETTINGS -----*/
  682. --Header-Icon-Size:{select:icon image size};
  683. --Header-Icon-Rounded-Corners:100%;
  684. --Header-Center-Gap:40px;
  685. --Header-Icon-Padding:{select:icon image padding};
  686. --Header-Icon-Border-Size:1px;
  687. --Header-Icon-Border-Color:{color:header icon border};
  688. --Header-Icon-BG:{color:header icon BG};
  689. --Header-Icon-Total-Width:calc(var(--Header-Icon-Size) + (var(--Header-Icon-Padding) * 2) + (var(--Header-Icon-Border-Size) * 2));
  690.  
  691. /*----- SOCIAL LINKS SETTINGS -----*/
  692. --Social-Links-Padding:8px;
  693. --Social-Links-Spacing:calc(var(--Social-Links-Padding) * -0.5);
  694. --Social-Links-Icon-Size:{select:social links icon size};
  695. --Social-Links-Icon-Color:{color:social links icon};
  696. --Social-Links-Hover-Icon-BG:{color:social links hover icon BG};
  697. --Social-Links-Hover-Icon-Color:{color:social links hover icon};
  698. --Social-Links-Hover-Speed:0.15s;
  699.  
  700. /*----- CUSTOM LINKS SETTINGS -----*/
  701. --CustomLinks-Min-Width:min(140px, 30vw);
  702. --CustomLinks-Font-Size:{select:custom links font size};
  703. --CustomLinks-Text-Color:{color:custom links};
  704. --CustomLinks-Padding:10px;
  705. --CustomLinks-Hover-Text-Color:{color:custom links hover text};
  706. --CustomLinks-Hover-Underline-Size:2px;
  707. --CustomLinks-Hover-Underline-Color:{color:custom links underline};
  708. --CustomLinks-Hover-Speed:0.25s;
  709.  
  710. /*----- POST SETTINGS -----*/
  711. --Post-Width:{select:posts width};
  712. --Post-Padding:{select:posts padding};
  713. --Post-BG:var(--Container-BG);
  714. --Post-Spacing:0px;
  715.  
  716. --Post-Accent-Border-Size:1px;
  717. --Post-Accent-Border-Color:{color:posts accent borders};
  718. --Post-Accent-Padding:calc(var(--Post-Padding) - 3px);
  719. --Post-Accent-Rounded-Corners:max(3px, var(--Rounded-Corners));
  720. --Post-Accent-BG:{color:posts accent BG};
  721. --Post-Accent-Text:{color:posts accent text};
  722.  
  723. /*----- BODY TEXT -----*/
  724. --Body-Font-Family:"{select:font}", sans-serif;
  725. --Body-Font-Size:{select:font size};
  726. --Body-Font-Weight:400; /* 400 is default */
  727. --Body-Text-Color:{color:text};
  728. --Body-Text-Color-RGB:{RGBcolor:text};
  729. --Body-Line-Height:1.65;
  730.  
  731. /*----- TEXT FORMATTING -----*/
  732. --Bold-Font-Weight:600; /* 700 is default */
  733. --Bold:{color:bold};
  734. --Italic:{color:italic};
  735.  
  736. /*----- HEADING TEXT -----*/
  737. --Heading-Font-Family:"{select:heading font}", sans-serif;
  738. --Heading-Font-Size:calc({select:font size} + 2px);
  739. --Heading-Font-Weight:700; /* 700 is default */
  740. --Heading-Text-Case:uppercase; /* uppercase, lowercase, capitalize, none */
  741. --Heading-Letter-Spacing:0.025em;
  742. --Heading-Word-Spacing:0em;
  743. --Heading-Line-Height:1.69;
  744.  
  745. /*----- UPPERCASE TEXT -----*/
  746. --Caps-Font-Family:"{select:uppercase font}", sans-serif;
  747. --Caps-Font-Size:calc(var(--Body-Font-Size) - 2px);
  748. --Caps-Font-Weight:400; /* 400 is default */
  749. --Caps-Letter-Spacing:0.04em;
  750. --Caps-Word-Spacing:0em;
  751.  
  752. /*----- CODE TEXT -----*/
  753. --Code-Padding:var(--Post-Accent-Padding);
  754. --Code-Border-Size:var(--Post-Accent-Border-Size);
  755. --Code-Border-Color:var(--Post-Accent-Border-Color);
  756. --Code-Rounded-Corners:var(--Post-Accent-Rounded-Corners);
  757. --Code-BG:var(--Post-Accent-BG);
  758. --Code-Font-Family:"Geist Mono", monospace;
  759. --Code-Font-Size:calc(var(--Body-Font-Size) - 2px);
  760. --Code-Font-Weight:450; /* 400 is default */
  761. --Code-Text-Color:var(--Post-Accent-Text);
  762. --Code-Line-Height:1.5;
  763.  
  764. /*----- LINKS -----*/
  765. --Links-Color:{color:links};
  766. --Links-Underline-Gap:0.1em;
  767. --Links-Underline-Size:1px;
  768. --Links-Underline-Color:{color:links underline};
  769.  
  770. /*----- BLOCKQUOTES -----*/
  771. --Blockquote-Border-Size:min(var(--Reblog-Border-Size), var(--Reblog-Head-Image-Size));
  772. --Blockquote-Border-Color:{color:blockquote border};
  773. --Blockquote-Border-Rounded-Corners:calc(var(--Blockquote-Border-Size) / 2);
  774.  
  775. /*----- CAPTION SETTINGS -----*/
  776. --Captions-Gap:min(1.5em, var(--Post-Padding)); /* static.tumblr.com/gtjt4bo/foCs8ts0f/zbzrb.png */
  777.  
  778. --Reblog-Head-Image-Size:30px;
  779. --Reblog-Head-Image-Rounded-Corners:100%;
  780. --Reblog-Head-Gutter:11px; /* gap between avatar and username */
  781. --Reblog-Name-Color:{color:posts usernames};
  782. --Reblog-Head-Bottom-Gap:min(1em, var(--Post-Padding));
  783.  
  784. /* comment menu BUTTON, post menu BUTTON */
  785. --Comment-Menu-Btn-Icon-Size:calc(var(--Body-Font-Size));
  786. --Comment-Menu-Btn-Icon-Color:{color:posts menu BUTTON dots};
  787. --Comment-Menu-Btn-Padding:calc((var(--Reblog-Head-Image-Size) - var(--Comment-Menu-Btn-Icon-Size)) / 2);
  788. --Comment-Menu-Btn-Hover-BG:{color:posts menu BUTTON hover BG};
  789. --Comment-Menu-Btn-Hover-Icon-Color:{color:posts menu BUTTON hover dots};
  790. --Comment-Menu-Btn-Hover-Speed:0.15s;
  791. --Comment-Menu-Btn-Right-Gap:2px;
  792.  
  793. /* comment MENU, post MENU */
  794. --Comment-Menu-Top-Gap:calc((var(--Reblog-Head-Bottom-Gap) / 2) - 0px);
  795. --Comment-Menu-Right-Gap:calc(0px - var(--Comment-Menu-Top-Gap));
  796. --Comment-Menu-BG:{color:posts menu BG};
  797. --Comment-Menu-Padding:14px;
  798. --Comment-Menu-Border-Size:1px;
  799. --Comment-Menu-Border-Color:{color:posts menu border};
  800. --Comment-Menu-Rounded-Corners:var(--Rounded-Corners);
  801. --Comment-Menu-Icons-Size:calc(var(--Body-Font-Size) + 2px);
  802. --Comment-Menu-Font-Size:calc(var(--Caps-Font-Size) - 1px);
  803. --Comment-Menu-Links-Color:{color:posts menu text};
  804. --Comment-Menu-Links-Spacing:calc(var(--Comment-Menu-Padding) - 2px);
  805. --Comment-Menu-Hover-BG:{color:posts menu hover BG};
  806. --Comment-Menu-Hover-Text:{color:posts menu hover text};
  807. --Comment-Menu-Hover-Speed:0.25s;
  808. --Comment-Menu-Slide-Amount:5px;
  809. --Comment-Menu-Fade-Speed:0.35s;
  810.  
  811. --Reblog-Dividers-Size:1px;
  812. --Reblog-Dividers:var(--Container-Border-Color);
  813.  
  814. --Reblog-Border-Size:3px;
  815. --Reblog-Border-Color:{color:caption left border};
  816. --Reblog-Border-Rounded-Corners:calc(var(--Reblog-Border-Size) / 2);
  817. --Reblog-Border-Gap-Left:calc((var(--Reblog-Head-Image-Size) / 2) - (var(--Reblog-Border-Size) / 2));
  818. --Reblog-Border-Gap-Right:calc(var(--Reblog-Border-Size) + ((var(--Reblog-Head-Image-Size) - var(--Reblog-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
  819. --Reblog-Padding-Right:0px;
  820.  
  821. /*----- PHOTOSET OPTIONS -----*/
  822. --Photoset-Image-Spacing:{select:photos spacing};
  823.  
  824. /*----- NPF OPTIONS -----*/
  825. --NPF-Images-Spacing:var(--Photoset-Image-Spacing);
  826. --NPF-Caption-Spacing:0px;
  827. --NPF-Move-1st-Photoset:var(--Prepend-1st-Media);
  828. --Text-Container-Selector:".text-block";
  829. --Text-Reblogs-Selector:".comment";
  830.  
  831. /*----- QUOTE POSTS -----*/
  832. --Quote-Font-Family:var(--Heading-Font-Family);
  833. --Quote-Font-Size:var(--Heading-Font-Size);
  834. --Quote-Font-Weight:700; /* 700 is default */
  835. --Quote-Text-Case:uppercase; /* uppercase, lowercase, capitalize, none */
  836. --Quote-Letter-Spacing:var(--Heading-Letter-Spacing);
  837. --Quote-Word-Spacing:var(--Heading-Word-Spacing);
  838. --Quote-Line-Height:var(--Heading-Line-Height);
  839.  
  840. /*----- LINK POSTS -----*/
  841. --Link-Block-Border-Size:1px;
  842. --Link-Block-Border-Color:rgba({RGBcolor:text},0.25);
  843. --Link-Block-Rounded-Corners:var(--Rounded-Corners);
  844.  
  845. /*----- AUDIO POST SETTINGS -----*/
  846. --Audio-Post-Album-Cover-Size:80px;
  847. --Audio-Post-Album-Cover-Rounded-Corners:max(3px, var(--Rounded-Corners));
  848. --Audio-Post-Btns-Padding:calc(var(--Audio-Post-Album-Cover-Size) * 0.15);
  849. --Audio-Post-Btns-BG:{color:buttons BG};
  850. --Audio-Post-Btns-Size:calc(var(--Body-Font-Size) - 2px);
  851. --Audio-Post-Btns-Color:{color:buttons icons};
  852. --Audio-Post-Gutter:16px;
  853. --Audio-Post-Download-Icon-Size:calc(var(--Body-Font-Size) + 3px);
  854. --Audio-Post-Download-Icon-Color:var(--Body-Text-Color);
  855. --Audio-Post-Download-Icon-Touch-Padding:5px;
  856. --Audio-Post-Volume:90%;
  857.  
  858. --SoundCloud-Player-Height:116px; /* 20px, 116px, or 500px */
  859. --SoundCloud-Show-Album-Image:"yes";
  860.  
  861. /*----- VIDEO SETTINGS -----*/
  862. --VIDYO-time-font-family:var(--Body-Font-Family);
  863. --VIDYO-time-font-size:var(--Body-Font-Size);
  864.  
  865. /*----- ASK POST SETTINGS -----*/
  866. --Ask-Post-Question-Gutter:min(1em, 14px);
  867. --Ask-Post-Avatar-Size:56px;
  868. --Ask-Post-Avatar-Rounded-Corners:max(3px, var(--Rounded-Corners));
  869. --Ask-Post-Username-Color:var(--Reblog-Name-Color);
  870. --Ask-Post-Username-Bottom-Gap:3px;
  871. --Ask-Post-QnA-Border-Size:var(--Post-Accent-Border-Size);
  872. --Ask-Post-QnA-Border-Color:var(--Post-Accent-Border-Color);
  873. --Ask-Post-QnA-Rounded-Corners:max(3px, var(--Rounded-Corners));
  874. --Ask-Post-QnA-Padding:var(--Post-Accent-Padding);
  875. --Ask-Post-QnA-BG:var(--Post-Accent-BG);
  876. --Ask-Post-QnA-Spacing:1em; /* gap between question & answer */
  877. --Ask-Post-Answer-Alignment:"right"; /* "left" or "right" */
  878.  
  879. /*----- POLL POST SETTINGS -----*/
  880. --Poll-Row-Rounded-Corners:var(--Post-Accent-Rounded-Corners);
  881. --Poll-Row-Border-Size:var(--Post-Accent-Border-Size);
  882. --Poll-Row-Border-Color:var(--Post-Accent-Border-Color);
  883. --Poll-Row-Padding:max(0.69em, 10px);
  884. --Poll-Row-BG:var(--Post-Accent-BG);
  885. --Poll-Row-Text:var(--Post-Accent-Text);
  886. --Poll-Row-Spacing:min(10px, 1em);
  887.  
  888. --Poll-Row-Hover-Border-Color:var(--Container-Border-Color);
  889. --Poll-Row-Hover-BG:transparent;
  890. --Poll-Row-Hover-Text-Color:var(--Body-Text-Color);
  891. --Poll-Row-Hover-Speed:0.25s;
  892.  
  893. /*----- MISC POST BUTTONS -----*/
  894. --Misc-Buttons-BG:{color:buttons bg};
  895. --Misc-Buttons-BG-RGB:{RGBcolor:buttons bg};
  896. --Misc-Buttons-Icon:{color:buttons icons};
  897. --Misc-Buttons-Icon-RGB:{RGBcolor:buttons icons};
  898.  
  899. /*----- TAGS -----*/
  900. --Tags-Hashtag-Spacing:1px;
  901. --Tags-Font-Size:calc(var(--Caps-Font-Size) - 0.5px);
  902. --Tags-Color:{color:tags};
  903. --Tags-Hover-Color:{color:tags hover};
  904. --Tags-Hover-Speed:0.25s;
  905. --Tags-Line-Height:var(--Body-Line-Height);
  906. --Tags-Spacing-X:12px;
  907. --Tags-Spacing-Y:calc((var(--Tags-Spacing-X) - (((var(--Tags-Font-Size) * var(--Tags-Line-Height)) - var(--Tags-Font-Size)) / 2) - 2px));
  908. --Tags-Slide-Speed:0.5s;
  909. --Tags-Fade-Speed:0.3s;
  910. --Tags-Time-Reduction:0.3s;
  911.  
  912. /*----- POST INFO / PERMALINK -----*/
  913. --Permalink-Border-Size:1px;
  914. --Permalink-Border-Color:var(--Container-Border-Color);
  915. --Permalink-Items-Spacing:11px;
  916. --Permalink-Font-Size:calc(var(--Caps-Font-Size) - 1px);
  917.  
  918. /* post info text & icon colors */
  919. --Permalink-Text-Color:var(--Body-Text-Color); /* fallback */
  920. --NoteCount-Text-Color:{color:notes};
  921. --Shorten-NoteCount:{select:shorten notes count};
  922. --TimeAgo-Text-Color:{color:date posted};
  923. --TimeAgo-Shorten:{select:shorten timestamps};
  924. --Post-Source:{color:source};
  925.  
  926. --Post-Controls-Icon-Size:calc(var(--Body-Font-Size) + 4px);
  927. --Post-Controls-Icon-Color:{color:posts info icons};
  928. --Post-Controls-Padding:7px;
  929. --Post-Controls-Spacing:calc(var(--Post-Controls-Padding) * -0.69);
  930. --Post-Controls-Total-Width:calc((var(--Post-Controls-Icon-Size) * 2) + (var(--Post-Controls-Padding) * 2) + (var(--Post-Controls-Spacing) - (var(--Post-Controls-Padding) * 2)));
  931. --Post-Controls-Hover-Speed:0.25s;
  932. --Post-Controls-Hover-BG:{color:posts info icons hover BG};
  933. --Post-Controls-Hover-Icon-Color:{color:posts info icons hover};
  934. --Liked-Button-Color:{color:liked button};
  935.  
  936. /*----- POST NOTES -----*/
  937. --Post-Notes-Type-Icon-Size:calc(var(--Body-Font-Size) + 3px);
  938. --Post-Notes-Type-Icon-Gap-Right:8px;
  939. --Post-Notes-Row-Spacing:calc(1em - (((var(--Body-Font-Size) * var(--Body-Line-Height)) - var(--Body-Font-Size)) / 2));
  940.  
  941. /*----- PAGINATION -----*/
  942. --Pagination-Arrows-Size:calc(var(--Body-Font-Size) + 3px);
  943. --Pagination-Color:{color:pagination};
  944. --Pagination-Items-Spacing:2rem;
  945.  
  946. /*----- SPINNER -----*/
  947. --Spinner-Size:1.5rem;
  948. --Spinner-Color:{color:loading spinner};
  949. --Spinner-Spoke-Delay:0.069s;
  950.  
  951. /*----- SCROLLBAR OPTIONS -----*/
  952. --Scrollbar-Padding:13px;
  953. --Scrollbar-Thumb:{color:scrollbar};
  954. --Scrollbar-Track:transparent;
  955.  
  956. /*----- TOOLTIPS OPTIONS -----*/
  957. --Tooltips-Border-Size:1px;
  958. --Tooltips-Border:{color:hover text border};
  959. --Tooltips-Padding-X:1em;
  960. --Tooltips-Padding-Y:1em;
  961. --Tooltips-Rounded-Corners:max(3px, var(--Rounded-Corners));
  962. --Tooltips-BG:{color:hover text BG};
  963. --Tooltips-Text-Color:{color:hover text};
  964. --Tooltips-Font-Size:calc(var(--Caps-Font-Size) - 1px);
  965.  
  966. /*----- TUMBLR CONTROLS -----*/
  967. --TumblrControls-Bar-Width:20px;
  968. --TumblrControls-Bar-Height:2px;
  969. --TumblrControls-Bar-Rounded-Corners:calc(var(--TumblrControls-Bar-Height) / 2);
  970. --TumblrControls-Bar-Color:var(--Body-Text-Color);
  971. --TumblrControls-Bar-Spacing:5px;
  972.  
  973. /*----- BACK TO TOP BUTTON -----*/
  974. --BackToTop-Corner-Offset:1rem;
  975. --BackToTop-Button-BG:var(--Post-BG);
  976. --BackToTop-Button-Border:var(--Container-Border-Color);
  977. --BackToTop-Button-Padding:0.69rem;
  978. --BackToTop-Button-Rounded-Corners:max(3px, calc(var(--Rounded-Corners) / 2));
  979. --BackToTop-Button-Size:0.8rem;
  980. --BackToTop-Button-Icon-Color:var(--Body-Text-Color);
  981. }/* end root */
  982.  
  983. html.device-touch:root {
  984. --Screen-Top-Gap:54px!important;
  985. }
  986.  
  987. /*------- CAPTION BORDER -------*/
  988. /* preview of what they look like: */
  989. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/krngt.png */
  990. html[prepend-media="yes"][reblog-left-border="yes"],
  991. html[prepend-media="yes"][reblog-left-border="no"],
  992. html[prepend-media="no"][reblog-left-border="no"]{
  993. --Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + (var(--Container-Border-Size) * 2));
  994. }
  995.  
  996. html[prepend-media="no"][reblog-left-border="yes"]{
  997. --Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + var(--Reblog-Border-Gap-Left) + var(--Reblog-Border-Gap-Right) + var(--Reblog-Padding-Right) + (var(--Container-Border-Size) * 2));
  998. }
  999.  
  1000. /*------- BASICS -------*/
  1001. * {
  1002. box-sizing:border-box;
  1003. }
  1004.  
  1005. body {
  1006. margin:0;
  1007. padding:0;
  1008. background-color:{color:background};
  1009. background-image:url("{image:background image}");
  1010. background-attachment:fixed;
  1011. background-position:center;
  1012. font-family:var(--Body-Font-Family), sans-serif;
  1013. font-weight:var(--Body-Font-Weight);
  1014. font-size:var(--Body-Font-Size);
  1015. color:var(--Body-Text-Color);
  1016. line-height:var(--Body-Line-Height);
  1017. -webkit-font-smoothing:antialiased;
  1018. -moz-osx-font-smoothing:grayscale;
  1019. }
  1020.  
  1021. html, body {
  1022. scroll-behavior:smooth;
  1023. }
  1024.  
  1025. html[bg-size="repeat"] body {
  1026. background-repeat:repeat;
  1027. }
  1028.  
  1029. html[bg-size="full"] body {
  1030. background-repeat:no-repeat;
  1031. background-size:cover;
  1032. }
  1033.  
  1034. .no-overscroll {
  1035. overscroll-behavior:none;
  1036. }
  1037.  
  1038. img, canvas, iframe, video {
  1039. vertical-align:middle;
  1040. }
  1041.  
  1042. b, strong {
  1043. font-weight:var(--Bold-Font-Weight);
  1044. color:var(--Bold);
  1045. }
  1046.  
  1047. i:not([class]), em {
  1048. color:var(--Italic);
  1049. }
  1050.  
  1051. pre, li.chat-line:not(ul.chat-wrap li.chat-line){
  1052. padding:calc(var(--Code-Padding) - (((var(--Code-Font-Size) * var(--Code-Line-Height)) - var(--Code-Font-Size)) / 2)) var(--Code-Padding);
  1053. word-wrap:break-word;
  1054. white-space:pre-wrap;
  1055. }
  1056.  
  1057. code {
  1058. padding:calc(0.5em - (((var(--Code-Font-Size) * var(--Code-Line-Height)) - var(--Code-Font-Size)) / 2)) 0.5em;
  1059. }
  1060.  
  1061. pre, code, li.chat-line:not(ul.chat-wrap li.chat-line){
  1062. border:var(--Code-Border-Size) solid var(--Code-Border-Color);
  1063. border-radius:var(--Code-Rounded-Corners);
  1064. background:var(--Code-BG);
  1065. font-family:var(--Code-Font-Family);
  1066. font-weight:var(--Code-Font-Weight);
  1067. font-size:var(--Code-Font-Size);
  1068. color:var(--Code-Text-Color);
  1069. line-height:var(--Code-Line-Height);
  1070. }
  1071.  
  1072. p.keep-reading {
  1073. text-align:center;
  1074. }
  1075.  
  1076. [class^="mgc_"]:before, [class*=" mgc_"]:before {
  1077. color:inherit;
  1078. }
  1079.  
  1080. [data-clipboard-text]{
  1081. cursor:help;
  1082. }
  1083.  
  1084. /*------- TEXT HIGHLIGHT -------*/
  1085. ::selection {
  1086. background:{color:text highlight BG};
  1087. color:{color:text highlighted};
  1088. }
  1089.  
  1090. ::-moz-selection {
  1091. background:{color:text highlight BG};
  1092. color:{color:text highlighted};
  1093. }
  1094.  
  1095. /*------- SCROLLBAR -------*/
  1096. @-moz-document url-prefix(){
  1097. * {
  1098. scrollbar-width:thin; /* firefox only */
  1099. }
  1100. }
  1101.  
  1102. ::-webkit-scrollbar {
  1103. width:var(--Scrollbar-Padding);
  1104. height:var(--Scrollbar-Padding);
  1105. background-color:var(--Scrollbar-Track);
  1106. }
  1107.  
  1108. ::-webkit-scrollbar-thumb {
  1109. background-color:var(--Scrollbar-Thumb);
  1110. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid var(--Scrollbar-Track);
  1111. background-clip:padding-box;
  1112. }
  1113.  
  1114. ::-webkit-scrollbar-corner {
  1115. background:var(--Scrollbar-Track);
  1116. }
  1117.  
  1118. /*------- BODY FONT -------*/
  1119. html[font="Rethink Sans"]:root {
  1120. letter-spacing:0.004em;
  1121. }
  1122.  
  1123. html[font="Inter"]:root {
  1124. --Body-Font-Weight:450;
  1125. }
  1126.  
  1127. html[font="Geist Sans"]:root {
  1128. --Body-Font-Weight:450;
  1129. }
  1130.  
  1131. /*------- HEADING FONT -------*/
  1132. h1, h2, h3, h4, h5, h6 {
  1133. font-family:var(--Heading-Font-Family);
  1134. font-weight:var(--Heading-Font-Weight);
  1135. text-transform:var(--Heading-Text-Case);
  1136. letter-spacing:var(--Heading-Letter-Spacing);
  1137. word-spacing:var(--Heading-Word-Spacing);
  1138. line-height:var(--Heading-Line-Height);
  1139. }
  1140.  
  1141. h1 {
  1142. font-size:var(--Heading-Font-Size);
  1143. }
  1144.  
  1145. h2, h3 {
  1146. font-size:calc(var(--Heading-Font-Size) - 1px);
  1147. }
  1148.  
  1149. h4, h5, h6 {
  1150. font-size:calc(var(--Heading-Font-Size) - 2px);
  1151. }
  1152.  
  1153. /*----- HEADING FONT -----*/
  1154. html[heading-font="Wanted Sans"]:root {
  1155. --Heading-Letter-Spacing:0.04em;
  1156. }
  1157.  
  1158. html[heading-font="Lexend"]:root {
  1159. --Heading-Font-Weight:600;
  1160. }
  1161.  
  1162. /*----- UPPERCASE FONT / CAPS FONT -----*/
  1163. html[caps-font="Figtree"]:root {
  1164. --Caps-Font-Weight:600;
  1165. }
  1166.  
  1167. html[caps-font="Karla"]:root {
  1168. --Caps-Font-Weight:600;
  1169. }
  1170.  
  1171. html[caps-font="Inter"]:root {
  1172. --Caps-Font-Size:calc(var(--Body-Font-Size) - 3px);
  1173. --Caps-Font-Weight:600;
  1174. --Caps-Letter-Spacing:0.05em;
  1175. --Permalink-Font-Size:calc(var(--Caps-Font-Size));
  1176. }
  1177.  
  1178. html[caps-font="Onest"]:root {
  1179. --Caps-Font-Weight:600;
  1180. }
  1181.  
  1182. html[caps-font="Readex Pro"]:root {
  1183. --Caps-Font-Weight:450;
  1184. --Caps-Letter-Spacing:0.025em;
  1185. }
  1186.  
  1187. html[caps-font="Vollkorn"]:root {
  1188. --Caps-Font-Weight:600;
  1189. }
  1190.  
  1191. .caps, .comment-header .username, .chat-label, .aud-title, .site-name, .poll-row, .poll-see-results, .q-top, .a-top, .comment-header .deactivated, .pinned-label, p.keep-reading, ol.notes a:not(li.note.with_commentary blockquote a), .more_notes_link, .notes_loading, p.tmblr-attribution a, .tagscont a, .notes-part, .botpagi, .comment-menu > a, .copied-label, .nav1 a, .nav3 a,
  1192. html[current-path="/customize_preview_receiver.html"] a.tumblr_blog {
  1193. font-family:var(--Caps-Font-Family);
  1194. font-weight:var(--Caps-Font-Weight);
  1195. text-transform:uppercase;
  1196. font-size:var(--Caps-Font-Size);
  1197. letter-spacing:var(--Caps-Letter-Spacing);
  1198. }
  1199.  
  1200. .comment-body .caps {
  1201. font-size:calc(var(--Caps-Font-Size) + 1px);
  1202. }
  1203.  
  1204. /* !important overrides bc t*mblr */
  1205. .poll-row, .poll-see-results {
  1206. font-weight:var(--Caps-Font-Weight)!important;
  1207. font-size:var(--Caps-Font-Size)!important;
  1208. }
  1209.  
  1210. /*------- LINKS -------*/
  1211. a {
  1212. color:var(--Links-Color);
  1213. text-decoration:none;
  1214. }
  1215.  
  1216. /* links underline */
  1217. .quote-set a, .question-text a, .answer-text a,
  1218. .comment-body a:not(html[current-path="/customize_preview_receiver.html"] a.tumblr_blog, a.post_media_photo_anchor, a.aud-dl, a.link-render, a.poll-row, a.poll-see-results), .poll-see-results > span {
  1219. padding-bottom:var(--Links-Underline-Gap);
  1220. border-bottom:var(--Links-Underline-Size) solid var(--Links-Underline-Color);
  1221. }
  1222.  
  1223. /*------- BLOCKQUOTES -------*/
  1224. blockquote {
  1225. position:relative;
  1226. margin-left:calc((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2);
  1227. margin-right:0;
  1228. padding-left:calc(((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
  1229. }
  1230.  
  1231. blockquote:not(.quote-text):before {
  1232. content:"";
  1233. position:absolute;
  1234. top:0;left:0;
  1235. width:var(--Blockquote-Border-Size);
  1236. height:100%;
  1237. background:var(--Blockquote-Border-Color);
  1238. border-radius:var(--Blockquote-Border-Rounded-Corners);
  1239. }
  1240.  
  1241. /*------- BULLET LISTS -------*/
  1242. ul, ol {
  1243. --ul-ol-gap-1:1em;
  1244. --ul-ol-gap-2:0.5em;
  1245. padding-left:0;
  1246. margin-left:calc(1em + var(--ul-ol-gap-1));
  1247. }
  1248.  
  1249. li {
  1250. padding-left:var(--ul-ol-gap-2);
  1251. }
  1252.  
  1253. /* nested bullet lists */
  1254. ul ul, ol ul, ol ol, ul ol {
  1255. margin-left:calc(((1em + var(--ul-ol-gap-1)) * 2) - var(--ul-ol-gap-2));
  1256. }
  1257.  
  1258. /*------- TUMBLR CONTROLS -------*/
  1259. iframe.tmblr-iframe.iframe-controls--desktop {
  1260. position:fixed!important;
  1261. left:initial!important;
  1262. top:0!important;
  1263. right:0!important;
  1264. margin-left:0px!important;
  1265. margin-top:5px!important;
  1266. margin-right:5px!important;
  1267. padding-right:calc(((13px + var(--TumblrControls-Bar-Width)) * 0.8) + 13px);
  1268. transform-origin:100% 0%!important;
  1269. transform:scale(0.8,0.8)!important;
  1270. }
  1271.  
  1272. html[tc-col="black"] iframe.tmblr-iframe.iframe-controls--desktop {
  1273. filter:invert(100%) hue-rotate(180deg)!important;
  1274. }
  1275.  
  1276. .tmblr-iframe--follow-teaser, .follow-teaser, .tmblr-iframe--app-cta-button {
  1277. display:none!important;
  1278. visibility:hidden!important;
  1279. height:0!important;
  1280. }
  1281.  
  1282. .tmblr-iframe-pushdown {
  1283. padding:0!important;
  1284. }
  1285.  
  1286. /* hide the two lines when they're not needed */
  1287. html.device-touch .tg,
  1288. html[current-path="/customize_preview_receiver.html"] .tg {
  1289. display:none;
  1290. }
  1291.  
  1292. .tg {
  1293. position:fixed;
  1294. top:0;right:0;
  1295. margin-right:13px;
  1296. height:53px;
  1297. }
  1298.  
  1299. .tg .te {
  1300. display:flex;
  1301. flex-direction:column;
  1302. gap:var(--TumblrControls-Bar-Spacing) 0;
  1303. width:var(--TumblrControls-Bar-Width);
  1304. height:100%;
  1305. justify-content:center;
  1306. align-items:flex-end;
  1307. }
  1308.  
  1309. .tg .tp {
  1310. width:100%;
  1311. }
  1312.  
  1313. .tg .tq {
  1314. width:55%;
  1315. transition:width 0.15s ease-in-out;
  1316. }
  1317.  
  1318. .tg .tp, .tg .tq {
  1319. height:var(--TumblrControls-Bar-Height);
  1320. border-radius:var(--TumblrControls-Bar-Rounded-Corners);
  1321. background:var(--TumblrControls-Bar-Color);
  1322. transform-origin:center;
  1323. transform:perspective(0);
  1324. }
  1325.  
  1326. html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop {
  1327. opacity:0;
  1328. transition:opacity 0.3s ease-in-out;
  1329. }
  1330.  
  1331. html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop:hover {
  1332. opacity:1;
  1333. }
  1334.  
  1335. html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop:hover ~ .tg .tq {
  1336. width:100%;
  1337. }
  1338.  
  1339. /*------- CONTAINER SETTINGS -------*/
  1340. main {
  1341. margin:0 auto;
  1342. }
  1343.  
  1344. .maincont {
  1345. position:relative;
  1346. margin:var(--Screen-Top-Gap) auto auto auto;
  1347. background:var(--Container-BG);
  1348. border-left:var(--Container-Border-Size) solid var(--Container-Border-Color);
  1349. border-right:var(--Container-Border-Size) solid var(--Container-Border-Color);
  1350. width:var(--Container-Width-Total);
  1351. min-height:100vh;
  1352. }
  1353.  
  1354. /* left shadow */
  1355. .maincont.shad-yes:before {
  1356. content:"";
  1357. position:absolute;
  1358. top:0;right:100%;
  1359. width:var(--Container-Shadow-Size);
  1360. height:100%;
  1361. background-image:linear-gradient(to right, transparent, rgba(0,0,0,var(--Container-Shadow-Strength)));
  1362. z-index:-1;
  1363. pointer-events:none;
  1364. }
  1365.  
  1366. /* right shadow */
  1367. .maincont.shad-yes:after {
  1368. content:"";
  1369. position:absolute;
  1370. top:0;left:100%;
  1371. width:var(--Container-Shadow-Size);
  1372. height:100%;
  1373. background-image:linear-gradient(to left, transparent, rgba(0,0,0,var(--Container-Shadow-Strength)));
  1374. z-index:-1;
  1375. pointer-events:none;
  1376. }
  1377.  
  1378. /*------- TOPNAV -------*/
  1379. .nav1 {
  1380. position:sticky;
  1381. top:0;
  1382. background:var(--Container-BG);
  1383. border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
  1384. z-index:10;
  1385. }
  1386.  
  1387. .nav1 .nav-inner {
  1388. border-top:none!important;
  1389. }
  1390.  
  1391. .nav1 .nav-inner > a {
  1392. flex:1!important;
  1393. }
  1394.  
  1395. .nav1 .nav-inner > a > span {
  1396. border-top:none!important;
  1397. padding:var(--NavLinks-Padding)!important;
  1398. }
  1399.  
  1400. .nav1 a, .nav1 a span {
  1401. font-size:var(--NavLinks-Font-Size);
  1402. color:var(--NavLinks-Text-Color);
  1403. transition:color var(--NavLinks-Hover-Speed) ease-in-out;
  1404. }
  1405.  
  1406. .nav1 a span:before {
  1407. content:"";
  1408. position:absolute;
  1409. bottom:0;left:0;
  1410. width:100%;
  1411. height:var(--NavLinks-Hover-Underline-Size);
  1412. transition:background-color var(--NavLinks-Hover-Speed) ease-in-out;
  1413. }
  1414.  
  1415. .nav1 a:hover span:before {
  1416. background-color:var(--NavLinks-Hover-Underline-Color);
  1417. }
  1418.  
  1419. .nav1 a:hover, .nav1 a:hover span {
  1420. color:var(--NavLinks-Hover-Text-Color);
  1421. }
  1422.  
  1423. /*------- HEADER SETTINGS -------*/
  1424. header {
  1425. border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
  1426. overflow:hidden;
  1427. }
  1428.  
  1429. .head-flex {
  1430. display:grid;
  1431. grid-template-columns:auto var(--Header-Icon-Total-Width);
  1432. align-items:center;
  1433. margin:var(--Header-Padding);
  1434. gap:var(--Header-Center-Gap);
  1435. }
  1436.  
  1437. .head-left {
  1438. display:flex;
  1439. flex-direction:column;
  1440. flex:1;
  1441. gap:var(--Header-Row-Spacing) 0;
  1442. min-width:0; /* stop this from stretching [1/2] */
  1443. max-width:100%; /* stop this from stretching [2/2] */
  1444. }
  1445.  
  1446. .head-right {
  1447. flex-shrink:0;
  1448. align-self:flex-start;
  1449. }
  1450.  
  1451. .tit-cont.tit-hide {
  1452. display:none;
  1453. }
  1454.  
  1455. .tit-cont h1 {
  1456. --hy:calc(((var(--Header-Title-Size) * var(--Heading-Line-Height)) - var(--Header-Title-Size)) / 2);
  1457. margin:calc(0px - var(--hy)) 0;
  1458. font-size:var(--Header-Title-Size);
  1459. color:var(--Header-Title-Color);
  1460. }
  1461.  
  1462. .name-cont {
  1463. font-size:var(--Header-Username-Size);
  1464. white-space:nowrap;
  1465. }
  1466.  
  1467. .name-cont > a {
  1468. display:flex;
  1469. align-items:center;
  1470. color:var(--Header-Username-Color);
  1471. }
  1472.  
  1473. .name-text {
  1474. position:relative;
  1475. }
  1476.  
  1477. .subt-cont {
  1478. display:flex;
  1479. align-items:center;
  1480. flex-wrap:wrap;
  1481. gap:var(--Header-Row-Spacing) var(--Header-Subtitle-Gap-Left);
  1482.  
  1483. --Header-Subtitle-Padding-Y:calc(var(--Header-Subtitle-Padding) - (((var(--Header-Subtitle-Font-Size) * var(--Body-Line-Height)) - var(--Header-Subtitle-Font-Size)) / 2));
  1484. --Header-Subtitle-Padding-X:calc(var(--Header-Subtitle-Padding) * 1.5);
  1485. }
  1486.  
  1487. .subt-cont.sub-hide .subt-text {
  1488. display:none;
  1489. }
  1490.  
  1491. .subt-cont.user-hide .name-cont {
  1492. display:none;
  1493. }
  1494.  
  1495. .head-left:not(.mini) .subt-cont.has-sub:not(.sub-hide){
  1496. margin:calc(0px - var(--Header-Subtitle-Padding-Y)) 0;
  1497. }
  1498.  
  1499. .subt-text {
  1500. padding:var(--Header-Subtitle-Padding-Y) var(--Header-Subtitle-Padding-X);
  1501. border-radius:var(--Header-Subtitle-Rounded-Corners);
  1502. background:var(--Header-Subtitle-BG);
  1503. font-size:var(--Header-Subtitle-Font-Size);
  1504. color:var(--Header-Subtitle-Text-Color);
  1505. white-space:nowrap;
  1506. text-overflow:ellipsis;
  1507. overflow:hidden;
  1508. }
  1509.  
  1510. .subt-text.bold-style {
  1511. font-weight:var(--Bold-Font-Weight);
  1512. }
  1513.  
  1514. .subt-text.italic-style {
  1515. font-style:italic;
  1516. }
  1517.  
  1518. .subt-text > p:first-child { margin-top:0 }
  1519. .subt-text > p:last-child { margin-bottom:0 }
  1520.  
  1521. .desc-cont {
  1522. font-size:var(--Desc-Font-Size);
  1523. color:var(--Desc-Text-Color);
  1524. }
  1525.  
  1526. .desc-cont.desc-hide {
  1527. display:none;
  1528. }
  1529.  
  1530. /* description, italics */
  1531. .desc-cont i:not(:empty), .desc-cont em {
  1532. color:var(--Desc-Italic);
  1533. }
  1534.  
  1535. /* description, bold */
  1536. .desc-cont b, .desc-cont strong {
  1537. color:var(--Desc-Bold);
  1538. }
  1539.  
  1540. /* description, links */
  1541. .desc-cont a {
  1542. padding-bottom:var(--Desc-Links-Underline-Gap);
  1543. border-bottom:var(--Desc-Links-Underline-Size) solid var(--Desc-Links-Underline-Color);
  1544. color:var(--Desc-Links);
  1545. }
  1546.  
  1547. .jus-flex {
  1548. display:grid;
  1549. grid-template-columns:auto var(--Header-Icon-Total-Width);
  1550. width:var(--Header-Width-Inner);
  1551. justify-content:space-between;
  1552. gap:var(--Header-Center-Gap);
  1553. }
  1554.  
  1555. .jus-flex.nav2-pos-left, .jus-flex.stat-hide {
  1556. flex-direction:column;
  1557. align-items:flex-start;
  1558. }
  1559.  
  1560. .jus-flex.stat-hide .nav2 {
  1561. margin-left:calc(var(--Social-Links-Padding) / -2);
  1562. }
  1563.  
  1564. .jus-flex.nav2-pos-left .nav2, .jus-flex.stat-hide .nav2 {
  1565. width:auto!important;
  1566. }
  1567.  
  1568. .jus-flex.stat-hide .status-area {
  1569. display:none;
  1570. }
  1571.  
  1572. .status-area {
  1573. display:flex;
  1574. gap:var(--Header-Status-Icon-Gap);
  1575. }
  1576.  
  1577. .status-icon {
  1578. flex-shrink:0;
  1579. display:flex;
  1580. align-items:center;
  1581. justify-content:center;
  1582. height:calc(var(--Header-Status-Font-Size) * var(--Header-Status-Line-Height));
  1583. }
  1584.  
  1585. .status-icon i[class]{
  1586. font-size:var(--Header-Status-Icon-Size);
  1587. line-height:1em;
  1588. color:var(--Header-Status-Icon-Color);
  1589. }
  1590.  
  1591. .status-text {
  1592. font-size:var(--Header-Status-Font-Size);
  1593. line-height:var(--Header-Status-Line-Height);
  1594. color:var(--Header-Status-Text-Color);
  1595. }
  1596.  
  1597. .status-text .caps {
  1598. font-size:calc(var(--Header-Status-Font-Size) - 1.5px)!important;
  1599. }
  1600.  
  1601. .avi-cont {
  1602. width:var(--Header-Icon-Total-Width);
  1603. height:var(--Header-Icon-Total-Width);
  1604. border:var(--Header-Icon-Border-Size) solid var(--Header-Icon-Border-Color);
  1605. border-radius:var(--Header-Icon-Rounded-Corners);
  1606. display:flex;
  1607. align-items:center;
  1608. justify-content:center;
  1609. }
  1610.  
  1611. .avi-cont.icon-hide {
  1612. display:none;
  1613. }
  1614.  
  1615. .avi-cont[img*="assets.tumblr.com/images/x.gif"]{
  1616. display:none;
  1617. }
  1618.  
  1619. .avi-cont img {
  1620. width:var(--Header-Icon-Size);
  1621. height:var(--Header-Icon-Size);
  1622. object-fit:cover;
  1623. object-position:center;
  1624. border-radius:var(--Header-Icon-Rounded-Corners);
  1625. }
  1626.  
  1627. /*------ SOCIAL LINKS / SOCIAL MEDIA LINKS ------*/
  1628. .nav2 {
  1629. margin:calc(var(--Social-Links-Padding) / -2) 0;
  1630. width:var(--Header-Icon-Total-Width);
  1631. display:flex;
  1632. align-items:flex-start;
  1633. justify-content:center;
  1634. }
  1635.  
  1636. .nav2 > a {
  1637. position:relative;
  1638. display:block;
  1639. margin:calc(var(--Social-Links-Spacing) / 2);
  1640. padding:var(--Social-Links-Padding);
  1641. line-height:0;
  1642. display:flex;
  1643. align-items:center;
  1644. justify-content:center;
  1645. z-index:0;
  1646. }
  1647.  
  1648. .nav2 > a:before {
  1649. content:"";
  1650. position:absolute;
  1651. width:0;
  1652. height:0;
  1653. border-radius:100%;
  1654. background:var(--Social-Links-Hover-Icon-BG);
  1655. z-index:-1;
  1656. transition:width var(--Social-Links-Hover-Speed) ease-in-out, height var(--Social-Links-Hover-Speed) ease-in-out;
  1657. }
  1658.  
  1659. .nav2 > a:hover:before {
  1660. width:100%;
  1661. height:100%;
  1662. }
  1663.  
  1664. .nav2 > a:not([href]), .nav2 > a[href=""]{
  1665. cursor:help;
  1666. }
  1667.  
  1668. .nav2 > a > i[class]{
  1669. font-size:var(--Social-Links-Icon-Size);
  1670. color:var(--Social-Links-Icon-Color);
  1671. font-style:normal;
  1672. transition:color var(--Social-Links-Hover-Speed) ease-in-out;
  1673. }
  1674.  
  1675. .nav2 > a > i.ios-17-logos {
  1676. -webkit-text-stroke-width:0.3px;
  1677. -webkit-text-stroke-color:currentColor;
  1678. }
  1679.  
  1680. .nav2 > a:hover > i[class]{
  1681. color:var(--Social-Links-Hover-Icon-Color);
  1682. }
  1683.  
  1684. /*------- CUSTOM LINKS / CUSTOMLINKS -------*/
  1685. .nav3 {
  1686. overflow:hidden;
  1687. }
  1688.  
  1689. .nav3[class*="cols-"]:not(.cols-auto) .nav-inner {
  1690. display:grid;
  1691. grid-template-columns:repeat({select:custom links columns}, 1fr);
  1692. grid-gap:0px;
  1693. }
  1694.  
  1695. .nav3.cols-auto .nav-inner {
  1696. display:flex;
  1697. }
  1698.  
  1699. .nav3.cols-auto .nav-inner > * {
  1700. flex:1 1 var(--CustomLinks-Min-Width);
  1701. }
  1702.  
  1703. .nav-inner {
  1704. display:flex;
  1705. flex-wrap:wrap;
  1706. align-items:stretch;
  1707. overflow:hidden;
  1708. border-top:calc(var(--Container-Border-Size) / 2) solid var(--Container-Border-Color);
  1709. margin:calc(var(--Container-Border-Size) / -2);
  1710. margin-top:0;
  1711. }
  1712.  
  1713. .nav-inner > a {
  1714. display:grid;
  1715. place-items:center;
  1716. text-align:center;
  1717. overflow:hidden;
  1718. }
  1719.  
  1720. .nav-inner > a > span {
  1721. position:relative;
  1722. width:100%;
  1723. height:100%;
  1724. display:grid;
  1725. place-items:center;
  1726. border:calc(var(--Container-Border-Size) / 2) solid var(--Container-Border-Color);
  1727. padding:var(--CustomLinks-Padding);
  1728. }
  1729.  
  1730. .nav3 a, .nav3 a span {
  1731. font-size:var(--CustomLinks-Font-Size);
  1732. color:var(--CustomLinks-Text-Color);
  1733. transition:color var(--CustomLinks-Hover-Speed) ease-in-out;
  1734. }
  1735.  
  1736. .nav3 a span:before {
  1737. content:"";
  1738. position:absolute;
  1739. bottom:0;left:0;
  1740. width:100%;
  1741. height:var(--CustomLinks-Hover-Underline-Size);
  1742. transition:background-color var(--CustomLinks-Hover-Speed) ease-in-out;
  1743. }
  1744.  
  1745. .nav3 a:hover span:before {
  1746. background-color:var(--CustomLinks-Hover-Underline-Color);
  1747. }
  1748.  
  1749. .nav3 a:hover, .nav3 a:hover span {
  1750. color:var(--CustomLinks-Hover-Text-Color);
  1751. }
  1752.  
  1753. /* semi responsiveness */
  1754. .head-flex.mini {
  1755. display:flex;
  1756. flex-flow:column-reverse;
  1757. }
  1758.  
  1759. .head-flex.mini .head-right {
  1760. align-self:center;
  1761. }
  1762.  
  1763. .head-flex.mini .jus-flex {
  1764. grid-template-columns:1fr;
  1765. gap:var(--Header-Row-Spacing);
  1766. width:auto;
  1767. }
  1768.  
  1769. .head-flex.mini .nav2 {
  1770. width:auto;
  1771. justify-content:flex-start;
  1772. margin-left:calc(var(--Social-Links-Padding) / -2);
  1773. }
  1774.  
  1775. /*------- POSTS SETTINGS -------*/
  1776. .all-posts {
  1777. }
  1778.  
  1779. .posts {
  1780. padding:var(--Post-Padding)
  1781. }
  1782.  
  1783. .posts + .posts {
  1784. margin-top:calc(0px - var(--Post-Padding));
  1785. }
  1786.  
  1787. .posts:last-child {
  1788. padding-bottom:0;
  1789. }
  1790.  
  1791. .posts, .post-notes, .botpagi {
  1792. background:var(--Post-BG);
  1793. width:100%;
  1794. overflow:hidden;
  1795. margin-bottom:var(--Post-Spacing);
  1796. }
  1797.  
  1798. .load-in { opacity:0; }
  1799.  
  1800. .load-in, .load-removing {
  1801. transition:opacity var(--Load-In-Speed) ease-in-out;
  1802. }
  1803.  
  1804. /*---- ROUNDED CORNERS: SIZES ----*/
  1805. html[rounded-corners$="s"]:root {
  1806. --Rounded-Corners:.375rem;
  1807. }
  1808.  
  1809. html[rounded-corners$="m"]:root {
  1810. --Rounded-Corners:.5625rem;
  1811. }
  1812.  
  1813. html[rounded-corners$="l"]:root {
  1814. --Rounded-Corners:.75rem;
  1815. }
  1816.  
  1817. /*---- ROUNDED CORNERS: LEGACY CONTENT ----*/
  1818. html[rounded-corners*="y"] .post-body [class*="-block"] [class^="legacy-"]{
  1819. border-radius:var(--Rounded-Corners);
  1820. overflow:hidden;
  1821. }
  1822.  
  1823. /*---- ROUNDED CORNERS: NPF MULTIMEDIA ----*/
  1824. /* tumblr.com/glen-test/737176738035056640 */
  1825. html[rounded-corners*="y"] .npf_group:not([class*="-only"]){
  1826. border-radius:var(--Rounded-Corners);
  1827. overflow:hidden;
  1828. }
  1829.  
  1830. /*---- ROUNDED CORNERS: NPF SINGLE ----*/
  1831. /* tumblr.com/devsmaycry/190031420024 */
  1832. html[rounded-corners*="y"] .npf-photo-only .npf_photo.npf_single_each.has-smol img {
  1833. border-radius:var(--Rounded-Corners);
  1834. }
  1835.  
  1836. /* tumblr.com/glen-px/736728568588075008 */
  1837. html[rounded-corners*="y"] .npf-photo-only .npf_photo.npf_single_each:not(.has-smol){
  1838. border-radius:var(--Rounded-Corners);
  1839. overflow:hidden;
  1840. }
  1841.  
  1842. /*---- ROUNDED CORNERS: NPF PHOTOSETS ----*/
  1843. html[rounded-corners*="y"] .npf_photo .npf_row[columns="2"]:first-child,
  1844. html[rounded-corners*="y"] .npf_photo .npf_row[columns="3"]:first-child {
  1845. border-top-left-radius:var(--Rounded-Corners);
  1846. border-top-right-radius:var(--Rounded-Corners);
  1847. }
  1848.  
  1849. html[rounded-corners*="y"] .npf_photo .npf_row[columns="2"]:last-child,
  1850. html[rounded-corners*="y"] .npf_photo .npf_row[columns="3"]:last-child {
  1851. border-bottom-left-radius:var(--Rounded-Corners);
  1852. border-bottom-right-radius:var(--Rounded-Corners);
  1853. }
  1854.  
  1855. /*------- TEXT POSTS -------*/
  1856. .text-block > h1.post-title:first-child {
  1857. margin-top:0;
  1858. }
  1859.  
  1860. .comment-body > h1:first-child + p {
  1861. margin-top:calc(0px - 1.33em + 1em);
  1862. }
  1863.  
  1864. /*------- CAPTIONS / COMMENTS -------*/
  1865. .add-op-comment {
  1866. display:none;
  1867. }
  1868.  
  1869. .inc-op .add-op-comment {
  1870. display:block;
  1871. }
  1872.  
  1873. .post-body > [class*="-block"]:first-child > .comments:first-child > .comment:first-child {
  1874. padding-top:0!important;
  1875. }
  1876.  
  1877. .text-block > h1.post-title:first-child:not(:last-child) + .comments {
  1878. margin-top:calc(var(--Heading-Font-Size) * -1.33);
  1879. }
  1880.  
  1881. .text-block > h1.post-title:first-child:not(:last-child) + .comments > .comment:first-child {
  1882. padding-top:var(--Captions-Gap);
  1883. }
  1884.  
  1885. /*-----------*/
  1886.  
  1887. .comments:empty {
  1888. display:none;
  1889. }
  1890.  
  1891. .comment {
  1892. padding:calc(var(--Post-Padding) / 2) 0;
  1893. }
  1894.  
  1895. .comment:first-child {
  1896. padding-top:var(--Post-Padding);
  1897. }
  1898.  
  1899. .post-body [class*="-block"] [class^="legacy-"] + .comments > .comment:first-child, .post-body > .photo-origin:first-child + .text-block > .comments > .comment:first-child {
  1900. padding-top:var(--Captions-Gap);
  1901. }
  1902.  
  1903. .comment:last-child {
  1904. padding-bottom:0;
  1905. }
  1906.  
  1907. .comment-header, .comment-header > a {
  1908. display:flex;
  1909. align-items:center;
  1910. justify-content:flex-start;
  1911. gap:0 var(--Reblog-Head-Gutter);
  1912. }
  1913.  
  1914. .comment-header {
  1915. position:relative;
  1916. justify-content:space-between;
  1917. }
  1918.  
  1919. .comment-header > a {
  1920. width:fit-content;
  1921. }
  1922.  
  1923. .comment-header img.userpic {
  1924. width:var(--Reblog-Head-Image-Size);
  1925. height:var(--Reblog-Head-Image-Size);
  1926. border-radius:var(--Reblog-Head-Image-Rounded-Corners);
  1927. }
  1928.  
  1929. .comment-header .username,
  1930. html[current-path="/customize_preview_receiver.html"] a.tumblr_blog {
  1931. color:var(--Reblog-Name-Color);
  1932. }
  1933.  
  1934. .comment-header:not(:last-child){
  1935. margin-bottom:var(--Reblog-Head-Bottom-Gap);
  1936. }
  1937.  
  1938. /* deactivated users */
  1939. .comment.deactivated .comment-header {
  1940. cursor:default;
  1941. }
  1942.  
  1943. .comment-header .deactivated {
  1944. color:rgba(var(--Body-Text-Color-RGB),0.8);
  1945. }
  1946.  
  1947. .comment-header .username + .deactivated {
  1948. margin-left:calc(0px - var(--Reblog-Head-Gutter) + 0.5em);
  1949. }
  1950.  
  1951. /* comment head, right side */
  1952. .comment-header .droite, .pinned-area {
  1953. display:flex;
  1954. align-items:center;
  1955. justify-content:flex-end;
  1956. gap:0 8px;
  1957. }
  1958.  
  1959. /* pinned post label */
  1960. .pinned-area {
  1961. color:rgba(var(--Body-Text-Color-RGB),0.9);
  1962. cursor:default;
  1963. }
  1964.  
  1965. .pinned-area i[class]:not([class=""]){
  1966. font-size:calc(var(--Body-Font-Size) + 1px);
  1967. }
  1968.  
  1969. /* comment menu BUTTON */
  1970. button.comment-dots {
  1971. position:relative;
  1972. border:none;
  1973. width:var(--Reblog-Head-Image-Size);
  1974. height:var(--Reblog-Head-Image-Size);
  1975. margin-right:calc(0px - var(--Comment-Menu-Btn-Padding) + var(--Comment-Menu-Btn-Right-Gap));
  1976. padding:0;
  1977. background:transparent;
  1978. display:flex;
  1979. align-items:center;
  1980. justify-content:center;
  1981. cursor:pointer;
  1982. z-index:0;
  1983. }
  1984.  
  1985. button.comment-dots:before {
  1986. content:"";
  1987. position:absolute;
  1988. width:0;
  1989. height:0;
  1990. border-radius:100%;
  1991. background:var(--Comment-Menu-Btn-Hover-BG);
  1992. transition:width var(--Comment-Menu-Btn-Hover-Speed) ease-in-out, height var(--Comment-Menu-Btn-Hover-Speed) ease-in-out;
  1993. z-index:-1;
  1994. }
  1995.  
  1996. button.comment-dots:hover:before {
  1997. width:100%;
  1998. height:100%;
  1999. }
  2000.  
  2001. button.comment-dots[aria-label]:not([aria-label='']) * {
  2002. pointer-events:none;
  2003. }
  2004.  
  2005. button.comment-dots > i[class]{
  2006. font-size:var(--Comment-Menu-Btn-Icon-Size);
  2007. color:var(--Comment-Menu-Btn-Icon-Color);
  2008. transition:color var(--Comment-Menu-Btn-Hover-Speed) ease-in-out;
  2009. }
  2010.  
  2011. button.comment-dots:hover > i[class]{
  2012. color:var(--Comment-Menu-Btn-Hover-Icon-Color);
  2013. }
  2014.  
  2015. /* comment MENU */
  2016. .comment-menu {
  2017. position:absolute;
  2018. top:0;right:0;
  2019. margin-top:calc(var(--Reblog-Head-Image-Size) + var(--Comment-Menu-Top-Gap) + var(--Comment-Menu-Slide-Amount));
  2020. margin-right:var(--Comment-Menu-Right-Gap);
  2021. border-radius:var(--Comment-Menu-Rounded-Corners);
  2022. border:var(--Comment-Menu-Border-Size) solid var(--Comment-Menu-Border-Color);
  2023. background:var(--Comment-Menu-BG);
  2024. display:flex;
  2025. flex-direction:column;
  2026. box-shadow:calc(var(--Comment-Menu-Padding) / 2) calc(var(--Comment-Menu-Padding) / 2) calc(var(--Comment-Menu-Padding) * 1.69) 0 rgba(0,0,0,4%);
  2027. visibility:hidden;
  2028. opacity:0;
  2029. transition:opacity var(--Comment-Menu-Fade-Speed) ease-in-out, margin-top var(--Comment-Menu-Fade-Speed) ease-in-out, visibility 0s var(--Comment-Menu-Fade-Speed) ease-in-out;
  2030. overflow:hidden;
  2031. z-index:20;
  2032. }
  2033.  
  2034. .comment-menu.open {
  2035. visibility:visible!important;
  2036. opacity:1!important;
  2037. margin-top:calc(var(--Reblog-Head-Image-Size) + var(--Comment-Menu-Top-Gap))!important;
  2038. transition:opacity var(--Comment-Menu-Fade-Speed) ease-in-out, margin-top var(--Comment-Menu-Fade-Speed) ease-in-out, visibility 0s 0s ease-in-out;
  2039. }
  2040.  
  2041. .comment-menu * {
  2042. color:var(--Comment-Menu-Links-Color)!important;
  2043. line-height:1;
  2044. transition:color var(--Comment-Menu-Hover-Speed) ease-in-out, background-color var(--Comment-Menu-Hover-Speed) ease-in-out;
  2045. }
  2046.  
  2047. .comment-menu > a {
  2048. display:flex;
  2049. align-items:center;
  2050. justify-content:flex-start;
  2051. gap:5px;
  2052. padding:var(--Comment-Menu-Links-Spacing) calc(var(--Comment-Menu-Padding) + 5px) var(--Comment-Menu-Links-Spacing) var(--Comment-Menu-Padding);
  2053. }
  2054.  
  2055. .comment-menu > a + a {
  2056. border-top:var(--Comment-Menu-Border-Size) solid var(--Comment-Menu-Border-Color);
  2057. }
  2058.  
  2059. .comment-menu i[class]{
  2060. font-size:var(--Comment-Menu-Icons-Size);
  2061. }
  2062.  
  2063. .comment-menu span {
  2064. font-size:var(--Comment-Menu-Font-Size);
  2065. }
  2066.  
  2067. .comment-menu > a:hover {
  2068. background-color:var(--Comment-Menu-Hover-BG);
  2069. }
  2070.  
  2071. .comment-menu > a:hover, .comment-menu > a:hover * {
  2072. color:var(--Comment-Menu-Hover-Text)!important;
  2073. }
  2074.  
  2075. /* caption border, caption left border */
  2076. /* preview of what they look like: */
  2077. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/krngt.png */
  2078. html[reblog-left-border="yes"]
  2079. .comment-body:not([id="post-"] .comment-body){
  2080. position:relative;
  2081. margin-left:var(--Reblog-Border-Gap-Left);
  2082. margin-right:0;
  2083. padding-left:var(--Reblog-Border-Gap-Right);
  2084. padding-right:var(--Reblog-Padding-Right);
  2085. z-index:0;
  2086. }
  2087.  
  2088. html[reblog-left-border="yes"]
  2089. .comment-body:not([id="post-"] .comment-body):after {
  2090. content:"";
  2091. position:absolute;
  2092. top:0;left:0;
  2093. width:var(--Reblog-Border-Size);
  2094. height:100%;
  2095. background:var(--Reblog-Border-Color);
  2096. border-radius:var(--Reblog-Border-Rounded-Corners);
  2097. }
  2098.  
  2099. .comment-body > h1:first-child,
  2100. .comment-body > h2:first-child,
  2101. .comment-body > h3:first-child,
  2102. .comment-body > h4:first-child,
  2103. .comment-body > h5:first-child,
  2104. .comment-body > h6:first-child,
  2105. .comment-body > p:first-child,
  2106. .comment-body > blockquote:first-child,
  2107. .comment-body > ul:first-child,
  2108. .comment-body > ol:first-child {
  2109. margin-top:0;
  2110. }
  2111.  
  2112. .comment-body > h1:last-child,
  2113. .comment-body > h2:last-child,
  2114. .comment-body > h3:last-child,
  2115. .comment-body > h4:last-child,
  2116. .comment-body > h5:last-child,
  2117. .comment-body > h6:last-child,
  2118. .comment-body > p:last-child,
  2119. .comment-body > blockquote:last-child,
  2120. .comment-body > ul:last-child,
  2121. .comment-body > ol:last-child {
  2122. margin-bottom:0;
  2123. }
  2124.  
  2125. .comment-body blockquote > p:first-child {
  2126. margin-top:0;
  2127. }
  2128.  
  2129. .comment-body blockquote > p:last-child {
  2130. margin-bottom:0;
  2131. }
  2132.  
  2133. /*------- REBLOG DIVIDERS -------*/
  2134. html[reblog-dividers="yes"] .comment {
  2135. margin-left:calc(0px - var(--Post-Padding));
  2136. margin-right:calc(0px - var(--Post-Padding));
  2137. padding-left:var(--Post-Padding);
  2138. padding-right:var(--Post-Padding);
  2139. }
  2140.  
  2141. html[reblog-dividers="yes"] .comment + .comment {
  2142. border-top:var(--Reblog-Dividers-Size) solid var(--Reblog-Dividers);
  2143. }
  2144.  
  2145. html[reblog-dividers="yes"] .comment:not(:first-child, :last-child){
  2146. padding-top:var(--Post-Padding);
  2147. padding-bottom:var(--Post-Padding);
  2148. }
  2149.  
  2150. html[reblog-dividers="yes"] .comment:first-child:not(:last-child){
  2151. padding-bottom:var(--Post-Padding);
  2152. }
  2153.  
  2154. html[reblog-dividers="yes"] .comment:last-child:not(:first-child){
  2155. padding-top:var(--Post-Padding);
  2156. }
  2157.  
  2158. /*------- PHOTO POSTS -------*/
  2159. .legacy-photo img, .legacy-photoset img {
  2160. display:block;
  2161. max-width:100%;
  2162. height:auto;
  2163. }
  2164.  
  2165. .legacy-photoset {
  2166. display:grid;
  2167. grid-gap:var(--Photoset-Image-Spacing)
  2168. }
  2169.  
  2170. .legacy-photoset > img {
  2171. display:none; /* handle loading */
  2172. }
  2173.  
  2174. .layout-row {
  2175. position:relative;
  2176. display:grid;
  2177. grid-gap:0 var(--Photoset-Image-Spacing);
  2178. overflow:hidden;
  2179. }
  2180.  
  2181. .layout-row img {
  2182. position:absolute;
  2183. width:100%;
  2184. height:auto;
  2185. visibility:hidden;
  2186. object-fit:cover;
  2187. object-position:center;
  2188. cursor:pointer;
  2189. }
  2190.  
  2191. .layout-row.done img {
  2192. position:relative;
  2193. visibility:visible;
  2194. }
  2195.  
  2196. .legacy-photo img {
  2197. cursor:pointer;
  2198. }
  2199.  
  2200. /*------- PHOTO LIGHTBOXES -------*/
  2201. body[style*="overflow: hidden;"],
  2202. body[style*="overflow:hidden;"]{
  2203. overflow:inherit!important;
  2204. }
  2205.  
  2206. .tmblr-lightbox, #tumblr_lightbox {
  2207. background-image:none!important;
  2208. background-color:rgba({RGBcolor:background},0.69)!important;
  2209. backdrop-filter:blur(3px);
  2210. }
  2211.  
  2212. .tmblr-lightbox .vignette, #tumblr_lightbox #vignette {
  2213. opacity:0!important;
  2214. }
  2215.  
  2216. .tmblr-lightbox .lightbox-image,
  2217. .tmblr-lightbox img, #tumblr_lightbox img {
  2218. box-shadow:none!important;
  2219. border-radius:var(--Rounded-Corners)!important;
  2220. }
  2221.  
  2222. .tmblr-lightbox img, #tumblr_lightbox img {
  2223. max-width:none;
  2224. }
  2225.  
  2226. /*------- QUOTE POSTS -------*/
  2227. .quote-block {
  2228. }
  2229.  
  2230. .quote-set blockquote.quote-text {
  2231. margin-left:0;
  2232. padding:0;
  2233. border:none;
  2234. font-family:var(--Quote-Font-Family);
  2235. font-weight:var(--Quote-Font-Weight);
  2236. font-size:var(--Quote-Font-Size);
  2237. text-transform:var(--Quote-Text-Case);
  2238. letter-spacing:var(--Quote-Letter-Spacing);
  2239. word-spacing:var(--Quote-Word-Spacing);
  2240. line-height:var(--Quote-Line-Height);
  2241. text-align:center;
  2242. }
  2243.  
  2244. .comment-body .quote-set {
  2245. padding-right:var(--Reblog-Border-Gap-Right);
  2246. }
  2247.  
  2248. .quote-set > *:first-child { margin-top:0; }
  2249. .quote-set > *:last-child { margin-bottom:0; }
  2250.  
  2251. .quote-source {
  2252. text-align:center;
  2253. }
  2254.  
  2255. /*------- LINK POSTS -------*/
  2256. [post-type="link"] .link-render.photo-origin,
  2257. .link-block > .link-render {
  2258. }
  2259.  
  2260. .link-render {
  2261. display:block;
  2262. }
  2263.  
  2264. [post-type="link"] .link-render.photo-origin:last-child,
  2265. .link-block > .link-render:last-child {
  2266. margin-bottom:calc(0px - var(--Post-Padding));
  2267. }
  2268.  
  2269. .comment-body .link-render {
  2270. margin:1em 0;
  2271. }
  2272.  
  2273. .comment-body .link-render:first-child { margin-top:0 }
  2274. .comment-body .link-render:last-child { margin-bottom:0 }
  2275.  
  2276. .link-render h2 {
  2277. margin:0;
  2278. text-align:center;
  2279. }
  2280.  
  2281. .link-render h2 i[class*="right"],
  2282. .link-render h2 i[icon-name*="right"]{
  2283. margin-left:2px;
  2284. font-size:125%;
  2285. vertical-align:-5%;
  2286. }
  2287.  
  2288. .link-render .site-name {
  2289. display:flex;
  2290. align-items:center;
  2291. justify-content:center;
  2292. margin-top:0.45em;
  2293. color:var(--Body-Text-Color);
  2294. }
  2295.  
  2296. .link-render .site-name i[class]{
  2297. margin-left:calc(0px - var(--Caps-Font-Size) - 2px);
  2298. margin-right:min(0.45em, 8px);
  2299. font-size:calc(var(--Caps-Font-Size) + 2px);
  2300. line-height:1;
  2301. }
  2302.  
  2303. .npf-link-block {
  2304. display:none!important;
  2305. }
  2306.  
  2307. /*------- CHAT POSTS -------*/
  2308. .chat-block {
  2309. }
  2310.  
  2311. ul.chat-wrap {
  2312. list-style:none;
  2313. margin-left:0;
  2314. margin-right:0;
  2315. padding:0;
  2316. }
  2317.  
  2318. ul.chat-wrap:first-child { margin-top:0; }
  2319. ul.chat-wrap:last-child { margin-bottom:0; }
  2320.  
  2321. li.chat-line {
  2322. list-style:none;
  2323. padding:0.7rem 0.85rem;
  2324. }
  2325.  
  2326. li.chat-line:nth-of-type(odd){
  2327. background:var(--Post-Accent-BG);
  2328. border-radius:var(--Post-Accent-Rounded-Corners);
  2329. color:var(--Post-Accent-Text);
  2330. }
  2331.  
  2332. li.chat-line:nth-of-type(odd) b:first-child {
  2333. color:var(--Post-Accent-Text)!important;
  2334. }
  2335.  
  2336. li.chat-line:nth-of-type(even) b:first-child {
  2337. color:var(--Body-Text-Color)!important;
  2338. }
  2339.  
  2340. .chat-label:not(:last-child){
  2341. margin-right:1px;
  2342. }
  2343.  
  2344. /*------- AUDIO POSTS -------*/
  2345. .aud-gen {
  2346. display:flex;
  2347. align-items:center;
  2348. justify-content:space-between;
  2349. overflow:hidden;
  2350. }
  2351.  
  2352. .aud-gen + .comments {
  2353.  
  2354. }
  2355.  
  2356. .aud-cover {
  2357. position:relative;
  2358. width:var(--Audio-Post-Album-Cover-Size);
  2359. height:var(--Audio-Post-Album-Cover-Size);
  2360. z-index:0;
  2361. }
  2362.  
  2363. .aud-cover .aud-ctl, .aud-cover img {
  2364. position:absolute;
  2365. top:0;left:0;
  2366. width:100%;
  2367. height:100%;
  2368. }
  2369.  
  2370. .aud-gen img {
  2371. width:100%;
  2372. height:100%!important;
  2373. object-fit:cover;
  2374. border-radius:var(--Audio-Post-Album-Cover-Rounded-Corners);
  2375. z-index:1;
  2376. }
  2377.  
  2378. .aud-cover .aud-ctl {
  2379. display:flex;
  2380. align-items:center;
  2381. justify-content:center;
  2382. z-index:2;
  2383. }
  2384.  
  2385. .aud-ctl .q-play,
  2386. .aud-ctl .q-pause {
  2387. display:flex;
  2388. align-items:center;
  2389. justify-content:center;
  2390. width:calc(var(--Audio-Post-Btns-Size) + (var(--Audio-Post-Btns-Padding) * 2));
  2391. height:calc(var(--Audio-Post-Btns-Size) + (var(--Audio-Post-Btns-Padding) * 2));
  2392. background-color:var(--Audio-Post-Btns-BG);
  2393. border-radius:100%;
  2394. outline:none;
  2395. border:none;
  2396. line-height:0;
  2397. cursor:pointer;
  2398. }
  2399.  
  2400. .aud-ctl .q-pause, .aud-iframe {
  2401. display:none;
  2402. }
  2403.  
  2404. .aud-ctl .play-icon,
  2405. .aud-ctl .pause-icon {
  2406. display:block;
  2407. width:var(--Audio-Post-Btns-Size);
  2408. height:var(--Audio-Post-Btns-Size);
  2409. -webkit-mask-repeat:no-repeat;
  2410. mask-repeat:no-repeat;
  2411. -webkit-mask-position:center;
  2412. mask-position:center;
  2413. -webkit-mask-size:contain;
  2414. mask-size:contain;
  2415. background-color:var(--Audio-Post-Btns-Color);
  2416. }
  2417.  
  2418. .aud-ctl .play-icon {
  2419. margin-left:calc(var(--Audio-Post-Btns-Size) * 0.1);
  2420. -webkit-mask-image:var(--Audio-Post-Play-Btn-SVG);
  2421. mask-image:var(--Audio-Post-Play-Btn-SVG);
  2422. }
  2423.  
  2424. .aud-ctl .pause-icon {
  2425. width:calc(var(--Audio-Post-Btns-Size) * 1.1);
  2426. height:calc(var(--Audio-Post-Btns-Size) * 1.1);
  2427. -webkit-mask-image:var(--Audio-Post-Pause-Btn-SVG);
  2428. mask-image:var(--Audio-Post-Pause-Btn-SVG);
  2429. }
  2430.  
  2431. .aud-xyz {
  2432. flex:1;
  2433. }
  2434.  
  2435. .aud-info {
  2436. padding:0 var(--Audio-Post-Gutter);
  2437. }
  2438.  
  2439. .aud-dl {
  2440. display:block;
  2441. margin:0 calc(0px - var(--Audio-Post-Download-Icon-Touch-Padding));
  2442. padding:var(--Audio-Post-Download-Icon-Touch-Padding);
  2443. line-height:1;
  2444. }
  2445.  
  2446. .aud-dl i[class]{
  2447. font-size:var(--Audio-Post-Download-Icon-Size);
  2448. color:var(--Audio-Post-Download-Icon-Color);
  2449. }
  2450.  
  2451. .posts audio[controls]{
  2452. display:none!important;
  2453. }
  2454.  
  2455. .npf-audio-only {
  2456. --NPF-Images-Spacing:1em!important;
  2457. }
  2458.  
  2459. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/innbv.png */
  2460. .npf_audio figure.sc-short {
  2461. position:relative;
  2462. z-index:0;
  2463. }
  2464.  
  2465. .npf_audio figure.sc-short:before {
  2466. content:"";
  2467. position:absolute;
  2468. top:0;left:0;
  2469. margin-top:1px;
  2470. width:20px;
  2471. height:20px;
  2472. border-radius:100%;
  2473. background:var(--Audio-Post-Btns-BG);
  2474. z-index:-1;
  2475. }
  2476.  
  2477. iframe[src*='open.spotify.com'][src*='track'],
  2478. figure[data-npf*='open.spotify.com'][data-npf*='track']{
  2479. height:80px!important;
  2480. }
  2481.  
  2482. iframe[src*='soundcloud.com']{
  2483. border-radius:3px!important;
  2484. overflow:hidden;
  2485. }
  2486.  
  2487. /*------- VIDEO POSTS -------*/
  2488. .legacy-video .tumblr_video_container {
  2489. width:auto!important;
  2490. height:auto!important;
  2491. max-width:100%;
  2492. }
  2493.  
  2494. /*------- ASK POSTS -------*/
  2495. .answer-block {
  2496.  
  2497. }
  2498.  
  2499. .question-part, .answer-part {
  2500. display:flex;
  2501. align-items:center;
  2502. gap:0 var(--Ask-Post-Question-Gutter);
  2503. padding:var(--Ask-Post-QnA-Padding);
  2504. background:var(--Ask-Post-QnA-BG);
  2505. border-radius:var(--Ask-Post-QnA-Rounded-Corners);
  2506. border:var(--Ask-Post-QnA-Border-Size) solid var(--Ask-Post-QnA-Border-Color);
  2507. }
  2508.  
  2509. .askerpic, .replypic {
  2510. flex-shrink:0;
  2511. align-self:flex-start;
  2512. width:var(--Ask-Post-Avatar-Size);
  2513. height:var(--Ask-Post-Avatar-Size);
  2514. border-radius:var(--Ask-Post-Avatar-Rounded-Corners);
  2515. }
  2516.  
  2517. .q-right, .a-left {
  2518. display:flex;
  2519. flex-direction:column;
  2520. flex:1;
  2521. gap:var(--Ask-Post-Username-Bottom-Gap) 0;
  2522. }
  2523.  
  2524. .q-top, .a-top {
  2525. margin:0;
  2526. }
  2527.  
  2528. .q-top a, .a-top a {
  2529. color:var(--Ask-Post-Username-Color);
  2530. }
  2531.  
  2532. .q-text > p:first-child, .a-text > p:first-child { margin-top:0; }
  2533. .q-text > p:last-child, .a-text > p:last-child { margin-bottom:0; }
  2534.  
  2535. .answer-part {
  2536. margin-top:var(--Ask-Post-QnA-Spacing);
  2537. }
  2538.  
  2539. [answer-right] .a-left {
  2540. text-align:end;
  2541. }
  2542.  
  2543. [answer-right] .a-left blockquote {
  2544. position:relative;
  2545. margin-left:0;
  2546. margin-right:calc((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2);
  2547. padding-left:0;
  2548. padding-right:calc(((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
  2549. }
  2550.  
  2551. [answer-right] .a-left blockquote:not(.quote-text):before {
  2552. left:initial;
  2553. right:0;
  2554. }
  2555.  
  2556. .a-text > p:last-child,
  2557. .a-text > blockquote:last-child,
  2558. .a-text > blockquote:last-child > *:last-child,
  2559. .a-text > h1:last-child,
  2560. .a-text > h2:last-child,
  2561. .a-text > h3:last-child,
  2562. .a-text > h4:last-child,
  2563. .a-text > h5:last-child,
  2564. .a-text > h6:last-child,
  2565. .a-text > ul:last-child,
  2566. .a-text > ul:last-child > *:last-child,
  2567. .a-text > ol:last-child,
  2568. .a-text > ol:last-child > *:last-child {
  2569. margin-bottom:0;
  2570. }
  2571.  
  2572. /*------- POLL POSTS -------*/
  2573. .poll-post > .poll-question:first-child {
  2574. margin-top:0!important;
  2575. }
  2576.  
  2577. .poll-question {
  2578. margin-bottom:1em!important;
  2579. font-size:inherit!important;
  2580. font-weight:inherit!important;
  2581. line-height:inherit!important;
  2582. }
  2583.  
  2584. .poll-row {
  2585. margin:0!important;
  2586. border:var(--Poll-Row-Border-Size) solid var(--Poll-Row-Border-Color)!important;
  2587. padding:var(--Poll-Row-Padding)!important;
  2588. background:var(--Poll-Row-BG)!important;
  2589. border-radius:var(--Poll-Row-Rounded-Corners)!important;
  2590. color:var(--Poll-Row-Text)!important;
  2591. min-height:0!important;
  2592. text-align:center!important;
  2593. line-height:inherit!important;
  2594. transition:background-color var(--Poll-Row-Hover-Speed) ease-in-out, border-color var(--Poll-Row-Hover-Speed) ease-in-out, color var(--Poll-Row-Hover-Speed) ease-in-out;
  2595. }
  2596.  
  2597. .poll-row:hover {
  2598. background-color:var(--Poll-Row-Hover-BG)!important;
  2599. border-color:var(--Poll-Row-Hover-Border-Color)!important;
  2600. color:var(--Poll-Row-Hover-Text-Color)!important;
  2601. }
  2602.  
  2603. .poll-row + .poll-row {
  2604. margin-top:var(--Poll-Row-Spacing)!important;
  2605. }
  2606.  
  2607. .poll-row:last-child {
  2608. margin-bottom:0!important;
  2609. }
  2610.  
  2611. /* if "see results" doesn't exist, create a space at the bottom since the poll container has something after it */
  2612. .poll-post:not(:last-child) .poll-row:last-child {
  2613. margin-bottom:1em!important;
  2614. }
  2615.  
  2616. .poll-post:not(:last-child) .poll-see-results {
  2617. margin-bottom:1em;
  2618. }
  2619.  
  2620. .poll-see-results {
  2621. margin-top:1em!important;
  2622. }
  2623.  
  2624. /*------- MISC NPF STUFF -------*/
  2625. p.npf_quote, p.npf_quirky {
  2626. line-height:var(--Quote-Line-Height)!important;
  2627. }
  2628.  
  2629. p.npf_quote {
  2630. font-size:var(--Quote-Font-Size)!important;
  2631. font-weight:var(--Quote-Font-Weight)!important;
  2632. }
  2633.  
  2634. p.npf_quirky {
  2635. font-size:calc(var(--Quote-Font-Size) + 1px)!important;
  2636. font-weight:normal!important;
  2637. }
  2638.  
  2639. /* tumblr.com/glen-test/738994635798691840 */
  2640. figure:not(.tmblr-full) + figure:not(.tmblr-full){
  2641. margin-top:var(--NPF-Images-Spacing);
  2642. }
  2643.  
  2644. .tmblr-full {
  2645. overflow:hidden;
  2646. }
  2647.  
  2648. p.tmblr-attribution:last-child {
  2649. margin-bottom:0;
  2650. }
  2651.  
  2652. /*------- TAGS -------*/
  2653. .tagscont {
  2654. display:grid;
  2655. }
  2656.  
  2657. html[page="index-page"] [tags-vis="toggle"] .tagscont {
  2658. grid-template-rows:0fr;
  2659. overflow:hidden;
  2660. }
  2661.  
  2662. html[page="index-page"] [tags-vis="toggle"] .tags-inner-x {
  2663. min-height:0;
  2664. opacity:0;
  2665. visibility:hidden;
  2666. }
  2667.  
  2668. .tags-inner-y {
  2669. display:flex;
  2670. margin-top:var(--Post-Padding);
  2671. }
  2672.  
  2673. .tagscont[align="left"] .tags-inner-y {
  2674. text-align:left;
  2675. justify-content:flex-start;
  2676. }
  2677.  
  2678. .tagscont[align="right"] .tags-inner-y {
  2679. text-align:right;
  2680. justify-content:flex-end;
  2681. }
  2682.  
  2683. html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont {
  2684. grid-template-rows:1fr;
  2685. }
  2686.  
  2687. html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont .tags-inner-x {
  2688. visibility:visible;
  2689. opacity:1;
  2690. }
  2691.  
  2692. html[page="index-page"] [tags-vis="toggle"] .tagscont {
  2693. /* collapse */
  2694. transition:grid-template-rows var(--Tags-Slide-Speed) var(--Tags-Time-Reduction) ease-in-out;
  2695. }
  2696.  
  2697. html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont {
  2698. /* expand */
  2699. transition:grid-template-rows var(--Tags-Slide-Speed) 0s ease-in-out;
  2700. }
  2701.  
  2702. html[page="index-page"] [tags-vis="toggle"] .tags-inner-x {
  2703. /* open -> closed */
  2704. transition:visibility 0s var(--Tags-Fade-Speed) ease-in-out, opacity var(--Tags-Fade-Speed) 0s ease-in-out;
  2705. }
  2706.  
  2707. html[page="index-page"] [tags-vis="toggle"].tags-clicked .tags-inner-x {
  2708. /* closed -> open */
  2709. transition:visibility 0s 0s ease-in-out, opacity var(--Tags-Fade-Speed) var(--Tags-Time-Reduction) ease-in-out;
  2710. }
  2711.  
  2712. .tags-inner-z {
  2713. --Tags-Spacing-X-Half:calc(var(--Tags-Spacing-X) / 2);
  2714. --Tags-Spacing-Y-Half:calc(var(--Tags-Spacing-Y) / 2);
  2715. margin:calc(0px - var(--Tags-Spacing-Y-Half)) calc(0px - var(--Tags-Spacing-X-Half));
  2716. width:calc(100% + var(--Tags-Spacing-X));
  2717. font-size:0;
  2718. }
  2719.  
  2720. .tagscont a {
  2721. display:inline-block;
  2722. margin:var(--Tags-Spacing-Y-Half) var(--Tags-Spacing-X-Half);
  2723. font-size:var(--Tags-Font-Size);
  2724. color:var(--Tags-Color);
  2725. line-height:var(--Tags-Line-Height);
  2726. transition:color var(--Tags-Hover-Speed) ease-in-out;
  2727. }
  2728.  
  2729. .tagscont a:hover {
  2730. color:var(--Tags-Hover-Color);
  2731. }
  2732.  
  2733. .tagscont a:before {
  2734. content:"#";
  2735. margin-right:var(--Tags-Hashtag-Spacing);
  2736. }
  2737.  
  2738. /*------- POST INFO / PERMALINK -------*/
  2739. .infobar {
  2740. margin:var(--Post-Padding) calc(0px - var(--Post-Padding)) 0 calc(0px - var(--Post-Padding));
  2741. padding:var(--Post-Padding);
  2742. border-top:var(--Permalink-Border-Size) solid var(--Permalink-Border-Color);
  2743. border-bottom:var(--Permalink-Border-Size) solid var(--Permalink-Border-Color);
  2744. }
  2745.  
  2746. .infobar.bord-no {
  2747. padding-top:0;
  2748. border-top:none;
  2749. }
  2750.  
  2751. .infobar.flip-yes [class^="pho-"]{
  2752. flex-direction:row-reverse;
  2753. }
  2754.  
  2755. .infobar.flip-yes .post-controls {
  2756. margin-right:calc(0px - var(--Post-Controls-Padding) + 1px);
  2757. }
  2758.  
  2759. .infobar {
  2760. color:var(--Permalink-Text-Color);
  2761. }
  2762.  
  2763. .innerpho, .pho-top, .pho-bot {
  2764. display:flex;
  2765. justify-content:space-between;
  2766. width:100%;
  2767. gap:var(--Permalink-Items-Spacing);
  2768. }
  2769.  
  2770. .innerpho {
  2771. flex-direction:column;
  2772. align-items:flex-start;
  2773. align-items:center;
  2774. }
  2775.  
  2776. .infobar, .infobar a.perma {
  2777. font-size:var(--Permalink-Font-Size);
  2778. }
  2779.  
  2780. .infobar a.perma {
  2781. display:flex;
  2782. align-items:center;
  2783. gap:var(--Permalink-Items-Spacing);
  2784. margin:calc(0px - var(--Post-Controls-Padding));
  2785. padding:var(--Post-Controls-Padding);
  2786. line-height:1;
  2787. }
  2788.  
  2789. .infobar a:not([href],[data-clipboard-text]){
  2790. cursor:default;
  2791. }
  2792.  
  2793. .date-part.shorten-yes .tsy { display:none; }
  2794. .date-part.shorten-no .tsx, .date-part.shorten-no .tsz { display:none; }
  2795.  
  2796. /* permalink text colors */
  2797. .notes-part, .notes-part * {
  2798. color:var(--NoteCount-Text-Color)!important;
  2799. }
  2800.  
  2801. .date-part, .date-part * {
  2802. color:var(--TimeAgo-Text-Color)!important;
  2803. }
  2804.  
  2805. .src-part, .src-part * {
  2806. color:var(--Post-Source)!important;
  2807. }
  2808.  
  2809. /*-- permabar, top layer --*/
  2810. .pho-top {
  2811. align-items:flex-end;
  2812. }
  2813.  
  2814. .pho-top > *:first-child { text-align:left; }
  2815. .pho-top > *:last-child { text-align:right; }
  2816.  
  2817. .post-controls {
  2818. display:flex;
  2819. align-items:center;
  2820. justify-content:center;
  2821. margin-top:calc(0px - var(--Post-Controls-Padding));
  2822. margin-left:calc(0px - var(--Post-Controls-Padding));
  2823. margin-bottom:calc(0px - var(--Post-Controls-Padding));
  2824. }
  2825.  
  2826. .post-controls > * + * {
  2827. margin-left:var(--Post-Controls-Spacing);
  2828. }
  2829.  
  2830. .post-controls [class$="-area"]{
  2831. position:relative;
  2832. line-height:1;
  2833. }
  2834.  
  2835. .post-controls [class$="-area"] > *:last-child {
  2836. position:relative;
  2837. display:flex;
  2838. align-items:center;
  2839. justify-content:center;
  2840. padding:var(--Post-Controls-Padding);
  2841. z-index:0;
  2842. }
  2843.  
  2844. .post-controls [class$="-area"] > *:last-child:after {
  2845. content:"";
  2846. position:absolute;
  2847. width:0;
  2848. height:0;
  2849. border-radius:100%;
  2850. background:var(--Post-Controls-Hover-BG);
  2851. z-index:-1;
  2852. transition:width var(--Post-Controls-Hover-Speed) ease-in-out, height var(--Post-Controls-Hover-Speed) ease-in-out;
  2853. }
  2854.  
  2855. .post-controls [class$="-area"] > *:last-child:hover:after {
  2856. width:100%;
  2857. height:100%;
  2858. }
  2859.  
  2860. .post-controls [class$="-area"] button {
  2861. background:transparent;
  2862. border:none;
  2863. cursor:help;
  2864. }
  2865.  
  2866. .post-controls a[href]:not([href=""]){ cursor:pointer; }
  2867.  
  2868. .post-controls i[class]{
  2869. display:block;
  2870. font-size:var(--Post-Controls-Icon-Size);
  2871. color:var(--Post-Controls-Icon-Color);
  2872. transition:color var(--Post-Controls-Hover-Speed) ease-in-out;
  2873. }
  2874.  
  2875. .post-controls i.ph-heart {
  2876. font-size:calc(var(--Post-Controls-Icon-Size) - 1px);
  2877. }
  2878.  
  2879. /* this is solely for i.mgc_refresh_3_line */
  2880. .post-controls .rb-area > a:first-child {
  2881. margin-right:-1px;
  2882. }
  2883.  
  2884. .post-controls [class$="-area"] > *:last-child:hover i[class]{
  2885. color:var(--Post-Controls-Hover-Icon-Color);
  2886. }
  2887.  
  2888. .copy-area[c="hide"]{
  2889. display:none;
  2890. }
  2891.  
  2892. .copy-area .after, .copy-area.c .before, .copied-label {
  2893. display:none;
  2894. }
  2895.  
  2896. .copy-area.c .after, .copy-area.c + .copied-label {
  2897. display:block;
  2898. }
  2899.  
  2900. .copied-label {
  2901. font-size:var(--Permalink-Font-Size);
  2902. margin-left:var(--Post-Controls-Padding);
  2903. }
  2904.  
  2905. .infobar.flip-yes .copied-label {
  2906. padding-right:var(--Post-Controls-Padding);
  2907. }
  2908.  
  2909. .like_button {
  2910. position:absolute;
  2911. top:0;left:0;
  2912. width:100%;
  2913. height:100%;
  2914. background:black;
  2915. opacity:0;
  2916. overflow:hidden;
  2917. z-index:2;
  2918. }
  2919.  
  2920. .like_button > iframe {
  2921. display:block;
  2922. width:100%;
  2923. height:100%;
  2924. }
  2925.  
  2926. .like_button.liked + i[class*="heart"],
  2927. .like_button.liked + [icon-name*="heart"]{
  2928. color:var(--Liked-Button-Color)!important;
  2929. }
  2930.  
  2931. html[page="permalink-page"] .tags-icon-area,
  2932. html[page="index-page"] [tags-vis="always"] .tags-icon-area {
  2933. display:none;
  2934. }
  2935.  
  2936. /*-- permabar, bottom layer --*/
  2937. .pho-bot {
  2938. align-items:flex-start;
  2939. line-height:1;
  2940. font-size:calc(var(--Body-Font-Size) - 1px);
  2941. letter-spacing:.3px;
  2942. }
  2943.  
  2944. .pho-bot > *:first-child { text-align:left; }
  2945.  
  2946. .pho-bot > .date-part:first-child {
  2947. margin-left:1px;
  2948. }
  2949.  
  2950. .via-part, .src-part {
  2951. display:flex;
  2952. align-items:center;
  2953. }
  2954.  
  2955. .et-symbol {
  2956. display:block;
  2957. margin-top:-1px;
  2958. font-family:"Rethink Sans", sans-serif;
  2959. transform-origin:center;
  2960. transform:perspective(0);
  2961. padding-right:1px;
  2962. }
  2963.  
  2964. /*------- PAGES -------*/
  2965. /* e.g. "Not Found" page */
  2966. .posts[id="post-"]{
  2967. padding-bottom:var(--Post-Padding);
  2968. border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
  2969. }
  2970.  
  2971. .posts[id="post-"] .post-title {
  2972. margin:0!important;
  2973. }
  2974.  
  2975. .posts[id="post-"] .text-block > h1.post-title:first-child:not(:last-child) + .comments {
  2976. margin-top:calc((var(--Heading-Font-Size) * -1.33) + 1em)!important;
  2977. }
  2978.  
  2979. /*------- POST NOTES -------*/
  2980. .posts + .post-notes {
  2981. margin-top:calc(0px - var(--Post-Padding));
  2982. }
  2983.  
  2984. .post-notes {
  2985. padding:var(--Post-Padding);
  2986. }
  2987.  
  2988. ol.notes {
  2989. list-style:none;
  2990. margin:0;
  2991. padding:0;
  2992. }
  2993.  
  2994. ol.notes img {
  2995. display:none;
  2996. }
  2997.  
  2998. ol.notes a {
  2999. color:var(--Reblog-Name-Color);
  3000. }
  3001.  
  3002. ol.notes > li {
  3003. margin-left:calc(var(--Post-Notes-Type-Icon-Size) + var(--Post-Notes-Type-Icon-Gap-Right));
  3004. }
  3005.  
  3006. ol.notes > li + li {
  3007. margin-top:var(--Post-Notes-Row-Spacing);
  3008. }
  3009.  
  3010. ol.notes blockquote:last-child {
  3011. margin-bottom:0;
  3012. }
  3013.  
  3014. ol.notes li.note > span.action > a:first-of-type {
  3015. position:relative;
  3016. }
  3017.  
  3018. /* all the :before icon font stuff here */
  3019. ol.notes li > span.action > a:first-of-type:before {
  3020. position:absolute;
  3021. content:"";
  3022. top:0;left:0;
  3023. margin-left:calc(0px - var(--Post-Notes-Type-Icon-Size) - var(--Post-Notes-Type-Icon-Gap-Right));
  3024. display:flex;
  3025. align-items:center;
  3026. height:100%;
  3027. transform-origin:center;
  3028. font-size:var(--Post-Notes-Type-Icon-Size);
  3029. color:var(--Reblog-Name-Color);
  3030. speak: never;
  3031. font-style: normal;
  3032. font-weight: normal;
  3033. font-variant: normal;
  3034. text-transform: none;
  3035. line-height: 1;
  3036. -webkit-text-stroke-color:currentColor;
  3037. -webkit-font-smoothing: antialiased;
  3038. -moz-osx-font-smoothing: grayscale;
  3039. }
  3040.  
  3041. /* JohnSmith posted this: [...caption] */
  3042. ol.notes li.original_post blockquote {
  3043. display:none;
  3044. }
  3045.  
  3046. /* JohnSmith liked this post */
  3047. /* icon: heart */
  3048. ol.notes li.like > span.action > a:first-of-type:before {
  3049. font-family:"Phosphor-Bold";
  3050. content:"\eb8a";
  3051. font-size:calc(var(--Post-Notes-Type-Icon-Size) - 1px);
  3052. }
  3053.  
  3054. /* JohnSmith reblogged this from JaneDoe */
  3055. /* icon: refresh */
  3056. ol.notes li.reblog.without_commentary > span.action > a:first-of-type:before {
  3057. font-family:"MingCute";
  3058. content:"\f0f5";
  3059. }
  3060.  
  3061. /* JohnSmith added this GIF to a post */
  3062. /* icon: picture/image */
  3063. ol.notes li.post_attribution > span.action > a:first-of-type:before {
  3064. font-family:"MingCute";
  3065. content:"\f077";
  3066. }
  3067.  
  3068. /* JohnSmith replied: "..." */
  3069. /* JohnSmith said: "..." */
  3070. /* JohnSmith posted this */
  3071. /* icon: message */
  3072. ol.notes li.reblog.with_commentary > span.action > a:first-of-type:before,
  3073. ol.notes li.reply > span.action > a:first-of-type:before,
  3074. ol.notes li.original_post > span.action > a:first-of-type:before {
  3075. font-family:"MingCute";
  3076. content:"\ef8f"!important;
  3077. }
  3078.  
  3079. /* replies */
  3080. ol.notes blockquote, ol.notes .answer_content {
  3081. display:block;
  3082. margin-left:calc(0px - var(--Post-Notes-Type-Icon-Size) - var(--Post-Notes-Type-Icon-Gap-Right) + ((var(--Post-Notes-Type-Icon-Size) - var(--Blockquote-Border-Size)) / 2));
  3083. padding-left:calc(((var(--Post-Notes-Type-Icon-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Post-Notes-Type-Icon-Gap-Right) + var(--Blockquote-Border-Size));
  3084. }
  3085.  
  3086. li.more_notes_link_container {
  3087. margin-left:0!important;
  3088. }
  3089.  
  3090. /*------- PAGINATION -------*/
  3091. .botpagi {
  3092. padding:var(--Post-Padding);
  3093. /*border-top:var(--Container-Border-Size) solid var(--Container-Border-Color);*/
  3094. }
  3095.  
  3096. html[infscroll="no"] .bp-wrap.spinner { display:none; }
  3097.  
  3098. .botpagi, .botpagi a {
  3099. color:var(--Pagination-Color)
  3100. }
  3101.  
  3102. .botpagi i[class]{
  3103. font-size:var(--Pagination-Arrows-Size);
  3104. }
  3105.  
  3106. .bp-wrap {
  3107. display:flex;
  3108. align-items:center;
  3109. justify-content:center;
  3110. gap:var(--Pagination-Items-Spacing);
  3111. }
  3112.  
  3113. .bp-wrap > a {
  3114. display:flex;
  3115. align-items:center;
  3116. justify-content:space-between;
  3117. gap:3px;
  3118. }
  3119.  
  3120. /*------- SPINNER -------*/
  3121. html[infscroll="yes"] .bp-wrap.jump-pagi { display:none; }
  3122.  
  3123. .bp-wrap.spinner {
  3124. opacity:0;
  3125. }
  3126.  
  3127. .botpagi .spinner a { pointer-events:none!important; }
  3128.  
  3129. .botpagi .spinner-svg {
  3130. width:var(--Spinner-Size);
  3131. height:var(--Spinner-Size);
  3132. }
  3133.  
  3134. .botpagi .spinner-svg svg {
  3135. display:block;
  3136. width:100%;
  3137. height:100%;
  3138. }
  3139.  
  3140. /*------- BACK TO TOP BUTTON -------*/
  3141. .back-to-top {
  3142. position:fixed;
  3143. bottom:0;right:0;
  3144. margin-bottom:var(--BackToTop-Corner-Offset);
  3145. margin-right:var(--BackToTop-Corner-Offset);
  3146. visibility:hidden;
  3147. opacity:0;
  3148. transition:opacity 0.3s ease-in-out, visibility 0s 0.3s ease-in-out;
  3149. z-index:8;
  3150. }
  3151.  
  3152. .back-to-top.btt-hide {
  3153. display:none!important;
  3154. }
  3155.  
  3156. .back-to-top.f {
  3157. visibility:visible;
  3158. opacity:1;
  3159. transition:opacity 0.3s ease-in-out, visibility 0s 0s ease-in-out;
  3160. }
  3161.  
  3162. .back-to-top button {
  3163. background:var(--BackToTop-Button-BG);
  3164. border:1px solid var(--BackToTop-Button-Border);
  3165. padding:var(--BackToTop-Button-Padding);
  3166. border-radius:var(--BackToTop-Button-Rounded-Corners);
  3167. font-size:var(--BackToTop-Button-Size);
  3168. box-shadow:4px 4px 15px rgba(0,0,0,4%);
  3169. line-height:0;
  3170. cursor:pointer;
  3171. }
  3172.  
  3173. .back-to-top button i[class]{
  3174. color:var(--BackToTop-Button-Icon-Color);
  3175. }
  3176.  
  3177. /*------- TOOLTIPS -------*/
  3178. .tippy-box {
  3179. border:var(--Tooltips-Border-Size) solid var(--Tooltips-Border);
  3180. background:var(--Tooltips-BG);
  3181. border-radius:var(--Tooltips-Rounded-Corners);
  3182. }
  3183.  
  3184. .tippy-content {
  3185. padding:calc(var(--Tooltips-Padding-Y) - (((var(--Caps-Font-Size) * var(--Body-Line-Height)) - var(--Caps-Font-Size)) / 2)) var(--Tooltips-Padding-X);
  3186. font-family:var(--Caps-Font-Family);
  3187. font-weight:var(--Caps-Font-Weight);
  3188. font-size:var(--Tooltips-Font-Size);
  3189. text-transform:uppercase;
  3190. letter-spacing:var(--Caps-Letter-Spacing);
  3191. word-spacing:var(--Caps-Word-Spacing);
  3192. color:var(--Tooltips-Text-Color);
  3193. line-height:var(--Body-Line-Height);
  3194. }
  3195.  
  3196. a[aria-label]:not([aria-label=""]) > i[class]:not([class=""]){
  3197. pointer-events:none; /* prevents tooltip flickering */
  3198. }
  3199.  
  3200. /*------- SCREEN READER TEXT -------*/
  3201. .sr-text {
  3202. position:absolute;
  3203. border:0;
  3204. clip:rect(1px, 1px, 1px, 1px);
  3205. clip-path:inset(50%);
  3206. margin:-1px;
  3207. width:1px;
  3208. height:1px;
  3209. padding:0;
  3210. overflow:hidden;
  3211. word-wrap:normal!important;
  3212. }
  3213.  
  3214. /*------- RESPONSIVENESS -------*/
  3215. @media(max-width:669px){
  3216. html:not([current-path="/customize_preview_receiver.html"]) .nav1 .nav-inner {
  3217. flex-wrap:wrap;
  3218. }
  3219.  
  3220. html:not([current-path="/customize_preview_receiver.html"]) .nav1 .nav-inner > a {
  3221. flex:1 1 90px!important;
  3222. }
  3223.  
  3224. html:not([current-path="/customize_preview_receiver.html"]) .nav3 .nav-inner {
  3225. display:flex!important;
  3226. }
  3227.  
  3228. html:not([current-path="/customize_preview_receiver.html"]) .nav3 .nav-inner > * {
  3229. flex:1 1 90px!important;
  3230. }
  3231. }
  3232.  
  3233. /*------- CUSTOMIZE PAGE ADJUSTMENTS -------*/
  3234. .comment[username=""] .comment-header {
  3235. display:none;
  3236. }
  3237.  
  3238. html[current-path="/customize_preview_receiver.html"] .bp-wrap.spinner {
  3239. display:none;
  3240. }
  3241.  
  3242. {CustomCSS}
  3243. </style>
  3244.  
  3245. </head>
  3246.  
  3247. <body>
  3248.  
  3249. <div class="tg">
  3250. <div class="te">
  3251. <div class="tp"></div>
  3252. <div class="tq"></div>
  3253. </div>
  3254. </div>
  3255.  
  3256. <!----- BACK TO TOP BUTTON ----->
  3257. <div class="back-to-top btt-{select:back to top button}">
  3258. <button aria-label="{lang:Back to top}">
  3259. <i class="ph-bold ph-caret-up"></i>
  3260. </button>
  3261. </div>
  3262.  
  3263. <main>
  3264.  
  3265. <!------- CONTAINER ------->
  3266. <section class="maincont shad-{select:side shadows}">
  3267.  
  3268. <!----- TOPNAV ----->
  3269. <nav class="nav1">
  3270. <div class="nav-inner">
  3271. <!-- home link -->
  3272. <a href="/" aria-label="Back to main">
  3273. <span>Home</span>
  3274. </a>
  3275.  
  3276. <!-- ask link -->
  3277. <a href="/ask"{block:AskEnabled} aria-label="{AskLabel}"{/block:AskEnabled}>
  3278. <span>Askbox</span>
  3279. </a>
  3280.  
  3281. <!-- archive link -->
  3282. <a href="/archive" aria-label="View past posts">
  3283. <span>Archive</span>
  3284. </a>
  3285.  
  3286. <!-- THEME CREDIT -->
  3287. <!-- pls do not remove, ty! -->
  3288. <a href="//glenthemes.tumblr.com" aria-label="&#x2726;&#x2002;&#x201C;Clotho&#x201D; theme by glenthemes&#x2002;&#x2726;">
  3289. <span>Theme</span>
  3290. </a>
  3291. </div>
  3292. </nav>
  3293.  
  3294. <!------- HEADER ------->
  3295. <header>
  3296. <div class="head-flex">
  3297. <div class="head-left">
  3298. <!---- HEADER TITLE ---->
  3299. <div class="tit-cont tit-{select:show title}">
  3300. {block:ifheadertitle}
  3301. <h1>{text:header title}</h1>
  3302. {/block:ifheadertitle}
  3303.  
  3304. {block:ifnotheadertitle}
  3305. <h1>{Title}</h1>
  3306. {/block:ifnotheadertitle}
  3307. </div><!--end tit-cont-->
  3308.  
  3309. <div class="subt-cont{block:ifheadersubtitle} has-sub{/block:ifheadersubtitle} user-{select:show username} sub-{select:show subtitle}">
  3310. <!---- HEADER USERNAME ---->
  3311. <div class="name-cont">
  3312. <a href="/">
  3313. <span class="et-symbol">@</span>
  3314. <span class="name-text">{Name}</span>
  3315. </a>
  3316. </div><!--end name-cont-->
  3317.  
  3318. <!---- HEADER SUBTITLE ---->
  3319. {block:ifheadersubtitle}
  3320. <div class="subt-text {select:subtitle style}-style">
  3321. <p>{text:header subtitle}</p>
  3322. </div>
  3323. {/block:ifheadersubtitle}
  3324. </div><!--end subt-cont-->
  3325.  
  3326. <!---- HEADER DESC ---->
  3327. <div class="desc-cont desc-{select:show desc}">
  3328. {block:ifheaderdesc}
  3329. <article>{text:header desc}</article>
  3330. {/block:ifheaderdesc}
  3331.  
  3332. {block:Description}
  3333. {block:ifnotheaderdesc}
  3334. <article>{Description}</article>
  3335. {/block:ifnotheaderdesc}
  3336. {/block:Description}
  3337. </div><!--end description-->
  3338.  
  3339. <div class="jus-flex nav2-pos-{select:social links position} stat-{select:show status}">
  3340. <!---- HEADER STATUS ---->
  3341. <div class="status-area">
  3342. {block:ifheaderstatusiconname}
  3343. <span class="status-icon">
  3344. <!--<i class="ph ph-{text:header status icon name}"></i>-->
  3345. <i class="hugeicons" icon-name="{text:header status icon name}"></i>
  3346. </span>
  3347. {/block:ifheaderstatusiconname}
  3348.  
  3349. <span class="status-text">
  3350. {text:header status text}
  3351. </span>
  3352. </div><!--end status-area-->
  3353.  
  3354. <!---- SOCIAL LINKS / SOCIAL MEDIA LINKS ---->
  3355. <nav class="nav2">
  3356. {block:ifsociallink1iconname}
  3357. <a {block:ifsociallink1URL}href="{text:social link 1 URL}"{/block:ifsociallink1URL} aria-label="{text:social link 1 text}">
  3358. <i class="ios-17-logos" icon-name="{text:social link 1 icon name}"></i>
  3359. </a>
  3360. {/block:ifsociallink1iconname}
  3361.  
  3362. {block:ifsociallink2iconname}
  3363. <a {block:ifsociallink2URL}href="{text:social link 2 URL}"{/block:ifsociallink2URL} aria-label="{text:social link 2 text}">
  3364. <i class="ios-17-logos" icon-name="{text:social link 2 icon name}"></i>
  3365. </a>
  3366. {/block:ifsociallink2iconname}
  3367.  
  3368. {block:ifsociallink3iconname}
  3369. <a {block:ifsociallink3URL}href="{text:social link 3 URL}"{/block:ifsociallink3URL} aria-label="{text:social link 3 text}">
  3370. <i class="ios-17-logos" icon-name="{text:social link 3 icon name}"></i>
  3371. </a>
  3372. {/block:ifsociallink3iconname}
  3373.  
  3374. {block:ifsociallink4iconname}
  3375. <a {block:ifsociallink4URL}href="{text:social link 4 URL}"{/block:ifsociallink4URL} aria-label="{text:social link 4 text}">
  3376. <i class="ios-17-logos" icon-name="{text:social link 4 icon name}"></i>
  3377. </a>
  3378. {/block:ifsociallink4iconname}
  3379. </nav>
  3380. </div>
  3381. </div><!--end head-left-->
  3382.  
  3383. <div class="head-right">
  3384. <!---- ICON IMAGE ---->
  3385. <div class="avi-cont icon-{select:show icon image}" img="{image:header icon}">
  3386. <img src="{image:header icon}">
  3387. </div><!--end header icon-->
  3388. </div><!--end head-right-->
  3389. </div><!--end head-flex-->
  3390.  
  3391. <!---- CUSTOM LINKS / CUSTOMLINKS ---->
  3392. <nav class="nav3 cols-{select:custom links columns}">
  3393. <div class="nav-inner">
  3394. {block:ifcustomlink1text}
  3395. <a href="{text:custom link 1 URL}">
  3396. <span>{text:custom link 1 text}</span>
  3397. </a>
  3398. {/block:ifcustomlink1text}
  3399.  
  3400. {block:ifcustomlink2text}
  3401. <a href="{text:custom link 2 URL}">
  3402. <span>{text:custom link 2 text}</span>
  3403. </a>
  3404. {/block:ifcustomlink2text}
  3405.  
  3406. {block:ifcustomlink3text}
  3407. <a href="{text:custom link 3 URL}">
  3408. <span>{text:custom link 3 text}</span>
  3409. </a>
  3410. {/block:ifcustomlink3text}
  3411.  
  3412. {block:ifcustomlink4text}
  3413. <a href="{text:custom link 4 URL}">
  3414. <span>{text:custom link 4 text}</span>
  3415. </a>
  3416. {/block:ifcustomlink4text}
  3417.  
  3418. {block:ifcustomlink5text}
  3419. <a href="{text:custom link 5 URL}">
  3420. <span>{text:custom link 5 text}</span>
  3421. </a>
  3422. {/block:ifcustomlink5text}
  3423.  
  3424. {block:ifcustomlink6text}
  3425. <a href="{text:custom link 6 URL}">
  3426. <span>{text:custom link 6 text}</span>
  3427. </a>
  3428. {/block:ifcustomlink6text}
  3429. </div><!--end nav-inner-->
  3430. </nav>
  3431. </header>
  3432.  
  3433. <!------- POSTS CONTAINER ------->
  3434. <section class="all-posts">
  3435. <!------- POSTS ------->
  3436. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  3437. <article
  3438. class="posts load-in"
  3439. id="post-{PostID}"
  3440. post-type="{PostType}"
  3441. post-url="{Permalink}"
  3442. root-url="{block:NotReblog}{Permalink}{block:NotReblog}{block:RebloggedFrom}{ReblogRootURL}{/block:RebloggedFrom}"
  3443. username="{block:NotReblog}{Name}{/block:NotReblog}{block:RebloggedFrom}{ReblogRootName}{/block:RebloggedFrom}"
  3444. reblog-url="{ReblogURL}"
  3445. tags-vis="{select:tags}"
  3446. >
  3447.  
  3448. <div class="post-body">
  3449.  
  3450. <!------ TEXT POSTS ------>
  3451. {block:Text}
  3452. <div class="text-block">
  3453. {block:Title}
  3454. <h1 class="post-title">{Title}</h1>
  3455. {/block:Title}
  3456.  
  3457. {block:NotReblog}
  3458. <div class="comments all-comments">
  3459. <div class="comment original-comment" username="{Name}">
  3460. {block:Date}
  3461.  
  3462. <div class="comment-header">
  3463. <a href="{Permalink}">
  3464. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  3465. <span class="username">{Name}</span>
  3466. </a>
  3467.  
  3468. <div class="droite">
  3469. {block:PinnedPostLabel}
  3470. <div class="pinned-area">
  3471. <i class="mgc_pin_2_line"></i>
  3472. <span class="pinned-label">{PinnedPostLabel}</span>
  3473. </div>
  3474. {/block:PinnedPostLabel}
  3475.  
  3476. <button class="comment-dots" aria-label="{lang:More}">
  3477. <i class="mgc_more_1_fill"></i>
  3478. </button>
  3479. </div><!--end droite-->
  3480.  
  3481. <div class="comment-menu">
  3482. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  3483. <i class="mgc_user_1_line"></i>
  3484. <span>View blog</span>
  3485. </a>
  3486.  
  3487. <a class="cm-post-link" href="{Permalink}">
  3488. <i class="mgc_eye_line"></i>
  3489. <span>View post</span>
  3490. </a>
  3491.  
  3492. <a class="cm-reblog-link" href="#">
  3493. <i class="mgc_refresh_3_line"></i>
  3494. <span>Reblog</span>
  3495. </a>
  3496. </div>
  3497. </div>
  3498.  
  3499. {/block:Date}
  3500. <div class="comment-body">{Body}</div>
  3501. </div>
  3502. </div>
  3503. {/block:NotReblog}
  3504.  
  3505. {block:RebloggedFrom}
  3506. <div class="comments all-comments">
  3507. {block:Reblogs}
  3508. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  3509. <div class="comment-header">
  3510. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  3511. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  3512. <span class="username">{Username}</span>
  3513. {block:IsDeactivated}
  3514. <span class="deactivated">(deactivated)</span>
  3515. {/block:IsDeactivated}
  3516. </a>
  3517.  
  3518. <div class="droite">
  3519. {block:PinnedPostLabel}
  3520. <div class="pinned-area">
  3521. <i class="mgc_pin_2_line"></i>
  3522. <span class="pinned-label">{PinnedPostLabel}</span>
  3523. </div>
  3524. {/block:PinnedPostLabel}
  3525.  
  3526. <button class="comment-dots" aria-label="{lang:More}">
  3527. <i class="mgc_more_1_fill"></i>
  3528. </button>
  3529. </div><!--end droite-->
  3530.  
  3531. <div class="comment-menu">
  3532. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  3533. <i class="mgc_user_1_line"></i>
  3534. <span>View blog</span>
  3535. </a>
  3536.  
  3537. <a class="cm-post-link" href="{Permalink}">
  3538. <i class="mgc_eye_line"></i>
  3539. <span>View post</span>
  3540. </a>
  3541.  
  3542. <a class="cm-reblog-link" href="#">
  3543. <i class="mgc_refresh_3_line"></i>
  3544. <span>Reblog</span>
  3545. </a>
  3546. </div>
  3547. </div>
  3548. <div class="comment-body">{Body}</div>
  3549. </div>
  3550. {/block:Reblogs}
  3551. </div>
  3552. {/block:RebloggedFrom}
  3553. </div><!--end block:text-->
  3554. {/block:Text}
  3555.  
  3556. <!------ PHOTO POSTS: SINGLE PHOTO ------>
  3557. {block:Photo}
  3558. <div class="photo-block">
  3559. <div class="legacy-photo">
  3560. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  3561. </div>
  3562.  
  3563. {block:Date}
  3564. {block:NotReblog}
  3565. <div class="comments all-comments">
  3566. <div class="comment original-comment" username="{Name}">
  3567. <div class="comment-header">
  3568. <a href="{Permalink}">
  3569. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  3570. <span class="username">{Name}</span>
  3571. </a>
  3572.  
  3573. <div class="droite">
  3574. {block:PinnedPostLabel}
  3575. <div class="pinned-area">
  3576. <i class="mgc_pin_2_line"></i>
  3577. <span class="pinned-label">{PinnedPostLabel}</span>
  3578. </div>
  3579. {/block:PinnedPostLabel}
  3580.  
  3581. <button class="comment-dots" aria-label="{lang:More}">
  3582. <i class="mgc_more_1_fill"></i>
  3583. </button>
  3584. </div><!--end droite-->
  3585.  
  3586. <div class="comment-menu">
  3587. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  3588. <i class="mgc_user_1_line"></i>
  3589. <span>View blog</span>
  3590. </a>
  3591.  
  3592. <a class="cm-post-link" href="{Permalink}">
  3593. <i class="mgc_eye_line"></i>
  3594. <span>View post</span>
  3595. </a>
  3596.  
  3597. <a class="cm-reblog-link" href="#">
  3598. <i class="mgc_refresh_3_line"></i>
  3599. <span>Reblog</span>
  3600. </a>
  3601. </div>
  3602. </div>
  3603.  
  3604. <div class="comment-body">{block:Caption}{Caption}{/block:Caption}</div>
  3605. </div>
  3606. </div><!--end notreblog-->
  3607. {/block:NotReblog}
  3608.  
  3609. {block:RebloggedFrom}
  3610. <div class="comments all-comments">
  3611. {block:Reblogs}
  3612. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  3613. <div class="comment-header">
  3614. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  3615. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  3616. <span class="username">{Username}</span>
  3617. {block:IsDeactivated}
  3618. <span class="deactivated">(deactivated)</span>
  3619. {/block:IsDeactivated}
  3620. </a>
  3621.  
  3622. <div class="droite">
  3623. {block:PinnedPostLabel}
  3624. <div class="pinned-area">
  3625. <i class="mgc_pin_2_line"></i>
  3626. <span class="pinned-label">{PinnedPostLabel}</span>
  3627. </div>
  3628. {/block:PinnedPostLabel}
  3629.  
  3630. <button class="comment-dots" aria-label="{lang:More}">
  3631. <i class="mgc_more_1_fill"></i>
  3632. </button>
  3633. </div><!--end droite-->
  3634.  
  3635. <div class="comment-menu">
  3636. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  3637. <i class="mgc_user_1_line"></i>
  3638. <span>View blog</span>
  3639. </a>
  3640.  
  3641. <a class="cm-post-link" href="{Permalink}">
  3642. <i class="mgc_eye_line"></i>
  3643. <span>View post</span>
  3644. </a>
  3645.  
  3646. <a class="cm-reblog-link" href="#">
  3647. <i class="mgc_refresh_3_line"></i>
  3648. <span>Reblog</span>
  3649. </a>
  3650. </div>
  3651. </div>
  3652. <div class="comment-body">{Body}</div>
  3653. </div>
  3654. {/block:Reblogs}
  3655.  
  3656. <div class="comment add-op-comment" username="{ReblogRootName}">
  3657. <div class="comment-header">
  3658. <a href="{ReblogRootURL}">
  3659. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  3660. <span class="username">{ReblogRootName}</span>
  3661. {block:IsDeactivated}
  3662. <span class="deactivated">(deactivated)</span>
  3663. {/block:IsDeactivated}
  3664. </a>
  3665.  
  3666. <div class="droite">
  3667. {block:PinnedPostLabel}
  3668. <div class="pinned-area">
  3669. <i class="mgc_pin_2_line"></i>
  3670. <span class="pinned-label">{PinnedPostLabel}</span>
  3671. </div>
  3672. {/block:PinnedPostLabel}
  3673.  
  3674. <button class="comment-dots" aria-label="{lang:More}">
  3675. <i class="mgc_more_1_fill"></i>
  3676. </button>
  3677. </div><!--end droite-->
  3678.  
  3679. <div class="comment-menu">
  3680. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  3681. <i class="mgc_user_1_line"></i>
  3682. <span>View blog</span>
  3683. </a>
  3684.  
  3685. <a class="cm-post-link" href="{ReblogRootURL}">
  3686. <i class="mgc_eye_line"></i>
  3687. <span>View post</span>
  3688. </a>
  3689.  
  3690. <a class="cm-reblog-link" href="#">
  3691. <i class="mgc_refresh_3_line"></i>
  3692. <span>Reblog</span>
  3693. </a>
  3694. </div>
  3695. </div>
  3696. <div class="comment-body"></div>
  3697. </div>
  3698. </div><!--end reblogs-->
  3699. {/block:RebloggedFrom}
  3700. {/block:Date}
  3701. </div><!--end photo-block-->
  3702. {/block:Photo}
  3703.  
  3704. <!------ PHOTO POSTS: PHOTOSET ------>
  3705. {block:Photoset}
  3706. <div class="photo-block">
  3707. <div class="legacy-photoset" layout="{PhotosetLayout}">
  3708. {block:Photos}
  3709. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"/>
  3710. {/block:Photos}
  3711. </div>
  3712.  
  3713. {block:Date}
  3714. {block:NotReblog}
  3715. <div class="comments all-comments">
  3716. <div class="comment original-comment" username="{Name}">
  3717. <div class="comment-header">
  3718. <a href="{Permalink}">
  3719. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  3720. <span class="username">{Name}</span>
  3721. </a>
  3722.  
  3723. <div class="droite">
  3724. {block:PinnedPostLabel}
  3725. <div class="pinned-area">
  3726. <i class="mgc_pin_2_line"></i>
  3727. <span class="pinned-label">{PinnedPostLabel}</span>
  3728. </div>
  3729. {/block:PinnedPostLabel}
  3730.  
  3731. <button class="comment-dots" aria-label="{lang:More}">
  3732. <i class="mgc_more_1_fill"></i>
  3733. </button>
  3734. </div><!--end droite-->
  3735.  
  3736. <div class="comment-menu">
  3737. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  3738. <i class="mgc_user_1_line"></i>
  3739. <span>View blog</span>
  3740. </a>
  3741.  
  3742. <a class="cm-post-link" href="{Permalink}">
  3743. <i class="mgc_eye_line"></i>
  3744. <span>View post</span>
  3745. </a>
  3746.  
  3747. <a class="cm-reblog-link" href="#">
  3748. <i class="mgc_refresh_3_line"></i>
  3749. <span>Reblog</span>
  3750. </a>
  3751. </div>
  3752. </div>
  3753.  
  3754. <div class="comment-body">{block:Caption}{Caption}{/block:Caption}</div>
  3755. </div>
  3756. </div><!--end notreblog-->
  3757. {/block:NotReblog}
  3758.  
  3759. {block:RebloggedFrom}
  3760. <div class="comments all-comments">
  3761. {block:Reblogs}
  3762. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  3763. <div class="comment-header">
  3764. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  3765. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  3766. <span class="username">{Username}</span>
  3767. {block:IsDeactivated}
  3768. <span class="deactivated">(deactivated)</span>
  3769. {/block:IsDeactivated}
  3770. </a>
  3771.  
  3772. <div class="droite">
  3773. {block:PinnedPostLabel}
  3774. <div class="pinned-area">
  3775. <i class="mgc_pin_2_line"></i>
  3776. <span class="pinned-label">{PinnedPostLabel}</span>
  3777. </div>
  3778. {/block:PinnedPostLabel}
  3779.  
  3780. <button class="comment-dots" aria-label="{lang:More}">
  3781. <i class="mgc_more_1_fill"></i>
  3782. </button>
  3783. </div><!--end droite-->
  3784.  
  3785. <div class="comment-menu">
  3786. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  3787. <i class="mgc_user_1_line"></i>
  3788. <span>View blog</span>
  3789. </a>
  3790.  
  3791. <a class="cm-post-link" href="{Permalink}">
  3792. <i class="mgc_eye_line"></i>
  3793. <span>View post</span>
  3794. </a>
  3795.  
  3796. <a class="cm-reblog-link" href="#">
  3797. <i class="mgc_refresh_3_line"></i>
  3798. <span>Reblog</span>
  3799. </a>
  3800. </div>
  3801. </div>
  3802. <div class="comment-body">{Body}</div>
  3803. </div>
  3804. {/block:Reblogs}
  3805.  
  3806. <div class="comment add-op-comment" username="{ReblogRootName}">
  3807. <div class="comment-header">
  3808. <a href="{ReblogRootURL}">
  3809. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  3810. <span class="username">{ReblogRootName}</span>
  3811. {block:IsDeactivated}
  3812. <span class="deactivated">(deactivated)</span>
  3813. {/block:IsDeactivated}
  3814. </a>
  3815.  
  3816. <div class="droite">
  3817. {block:PinnedPostLabel}
  3818. <div class="pinned-area">
  3819. <i class="mgc_pin_2_line"></i>
  3820. <span class="pinned-label">{PinnedPostLabel}</span>
  3821. </div>
  3822. {/block:PinnedPostLabel}
  3823.  
  3824. <button class="comment-dots" aria-label="{lang:More}">
  3825. <i class="mgc_more_1_fill"></i>
  3826. </button>
  3827. </div><!--end droite-->
  3828.  
  3829. <div class="comment-menu">
  3830. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  3831. <i class="mgc_user_1_line"></i>
  3832. <span>View blog</span>
  3833. </a>
  3834.  
  3835. <a class="cm-post-link" href="{ReblogRootURL}">
  3836. <i class="mgc_eye_line"></i>
  3837. <span>View post</span>
  3838. </a>
  3839.  
  3840. <a class="cm-reblog-link" href="#">
  3841. <i class="mgc_refresh_3_line"></i>
  3842. <span>Reblog</span>
  3843. </a>
  3844. </div>
  3845. </div>
  3846. <div class="comment-body"></div>
  3847. </div>
  3848. </div><!--end reblogs-->
  3849. {/block:RebloggedFrom}
  3850. {/block:Date}
  3851. </div><!--end photo-block-->
  3852. {/block:Photoset}
  3853.  
  3854. <!------ PHOTO POSTS: PANORAMA ------>
  3855. {block:Panorama}
  3856. <div class="photo-block">
  3857. <div class="legacy-photo pano">
  3858. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
  3859. </div>
  3860.  
  3861. {block:Date}
  3862. {block:NotReblog}
  3863. <div class="comments all-comments">
  3864. <div class="comment original-comment" username="{Name}">
  3865. <div class="comment-header">
  3866. <a href="{Permalink}">
  3867. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  3868. <span class="username">{Name}</span>
  3869. </a>
  3870.  
  3871. <div class="droite">
  3872. {block:PinnedPostLabel}
  3873. <div class="pinned-area">
  3874. <i class="mgc_pin_2_line"></i>
  3875. <span class="pinned-label">{PinnedPostLabel}</span>
  3876. </div>
  3877. {/block:PinnedPostLabel}
  3878.  
  3879. <button class="comment-dots" aria-label="{lang:More}">
  3880. <i class="mgc_more_1_fill"></i>
  3881. </button>
  3882. </div><!--end droite-->
  3883.  
  3884. <div class="comment-menu">
  3885. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  3886. <i class="mgc_user_1_line"></i>
  3887. <span>View blog</span>
  3888. </a>
  3889.  
  3890. <a class="cm-post-link" href="{Permalink}">
  3891. <i class="mgc_eye_line"></i>
  3892. <span>View post</span>
  3893. </a>
  3894.  
  3895. <a class="cm-reblog-link" href="#">
  3896. <i class="mgc_refresh_3_line"></i>
  3897. <span>Reblog</span>
  3898. </a>
  3899. </div>
  3900. </div>
  3901.  
  3902. <div class="comment-body">{block:Caption}{Caption}{/block:Caption}</div>
  3903. </div>
  3904. </div><!--end notreblog-->
  3905. {/block:NotReblog}
  3906.  
  3907. {block:RebloggedFrom}
  3908. <div class="comments all-comments">
  3909. {block:Reblogs}
  3910. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  3911. <div class="comment-header">
  3912. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  3913. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  3914. <span class="username">{Username}</span>
  3915. {block:IsDeactivated}
  3916. <span class="deactivated">(deactivated)</span>
  3917. {/block:IsDeactivated}
  3918. </a>
  3919.  
  3920. <div class="droite">
  3921. {block:PinnedPostLabel}
  3922. <div class="pinned-area">
  3923. <i class="mgc_pin_2_line"></i>
  3924. <span class="pinned-label">{PinnedPostLabel}</span>
  3925. </div>
  3926. {/block:PinnedPostLabel}
  3927.  
  3928. <button class="comment-dots" aria-label="{lang:More}">
  3929. <i class="mgc_more_1_fill"></i>
  3930. </button>
  3931. </div><!--end droite-->
  3932.  
  3933. <div class="comment-menu">
  3934. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  3935. <i class="mgc_user_1_line"></i>
  3936. <span>View blog</span>
  3937. </a>
  3938.  
  3939. <a class="cm-post-link" href="{Permalink}">
  3940. <i class="mgc_eye_line"></i>
  3941. <span>View post</span>
  3942. </a>
  3943.  
  3944. <a class="cm-reblog-link" href="#">
  3945. <i class="mgc_refresh_3_line"></i>
  3946. <span>Reblog</span>
  3947. </a>
  3948. </div>
  3949. </div>
  3950. <div class="comment-body">{Body}</div>
  3951. </div>
  3952. {/block:Reblogs}
  3953.  
  3954. <div class="comment add-op-comment" username="{ReblogRootName}">
  3955. <div class="comment-header">
  3956. <a href="{ReblogRootURL}">
  3957. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  3958. <span class="username">{ReblogRootName}</span>
  3959. {block:IsDeactivated}
  3960. <span class="deactivated">(deactivated)</span>
  3961. {/block:IsDeactivated}
  3962. </a>
  3963.  
  3964. <div class="droite">
  3965. {block:PinnedPostLabel}
  3966. <div class="pinned-area">
  3967. <i class="mgc_pin_2_line"></i>
  3968. <span class="pinned-label">{PinnedPostLabel}</span>
  3969. </div>
  3970. {/block:PinnedPostLabel}
  3971.  
  3972. <button class="comment-dots" aria-label="{lang:More}">
  3973. <i class="mgc_more_1_fill"></i>
  3974. </button>
  3975. </div><!--end droite-->
  3976.  
  3977. <div class="comment-menu">
  3978. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  3979. <i class="mgc_user_1_line"></i>
  3980. <span>View blog</span>
  3981. </a>
  3982.  
  3983. <a class="cm-post-link" href="{ReblogRootURL}">
  3984. <i class="mgc_eye_line"></i>
  3985. <span>View post</span>
  3986. </a>
  3987.  
  3988. <a class="cm-reblog-link" href="#">
  3989. <i class="mgc_refresh_3_line"></i>
  3990. <span>Reblog</span>
  3991. </a>
  3992. </div>
  3993. </div>
  3994. <div class="comment-body"></div>
  3995. </div>
  3996. </div><!--end reblogs-->
  3997. {/block:RebloggedFrom}
  3998. {/block:Date}
  3999. </div><!--end photo-block-->
  4000. {/block:Panorama}
  4001.  
  4002. <!------ QUOTE POSTS ------>
  4003. {block:Quote}
  4004. <div class="quote-block inc-op">
  4005.  
  4006. {block:Date}
  4007. {block:NotReblog}
  4008. <div class="comments all-comments">
  4009. <div class="comment original-comment" username="{Name}">
  4010. <div class="comment-header">
  4011. <a href="{Permalink}">
  4012. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  4013. <span class="username">{Name}</span>
  4014. </a>
  4015.  
  4016. <div class="droite">
  4017. {block:PinnedPostLabel}
  4018. <div class="pinned-area">
  4019. <i class="mgc_pin_2_line"></i>
  4020. <span class="pinned-label">{PinnedPostLabel}</span>
  4021. </div>
  4022. {/block:PinnedPostLabel}
  4023.  
  4024. <button class="comment-dots" aria-label="{lang:More}">
  4025. <i class="mgc_more_1_fill"></i>
  4026. </button>
  4027. </div><!--end droite-->
  4028.  
  4029. <div class="comment-menu">
  4030. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  4031. <i class="mgc_user_1_line"></i>
  4032. <span>View blog</span>
  4033. </a>
  4034.  
  4035. <a class="cm-post-link" href="{Permalink}">
  4036. <i class="mgc_eye_line"></i>
  4037. <span>View post</span>
  4038. </a>
  4039.  
  4040. <a class="cm-reblog-link" href="#">
  4041. <i class="mgc_refresh_3_line"></i>
  4042. <span>Reblog</span>
  4043. </a>
  4044. </div>
  4045. </div>
  4046.  
  4047. <div class="comment-body">
  4048. <div class="quote-set">
  4049. <blockquote class="quote-text">
  4050. &ldquo;{Quote}&rdquo;
  4051. </blockquote>
  4052. {block:Source}
  4053. <p class="quote-source">{Source}</p>
  4054. {/block:Source}
  4055. </div><!--end quote-set-->
  4056. </div>
  4057. </div>
  4058. </div><!--end notreblog-->
  4059. {/block:NotReblog}
  4060.  
  4061. {block:RebloggedFrom}
  4062. <div class="comments all-comments">
  4063. <div class="comment add-op-comment" username="{ReblogRootName}">
  4064. <div class="comment-header">
  4065. <a href="{ReblogRootURL}">
  4066. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  4067. <span class="username">{ReblogRootName}</span>
  4068. {block:IsDeactivated}
  4069. <span class="deactivated">(deactivated)</span>
  4070. {/block:IsDeactivated}
  4071. </a>
  4072.  
  4073. <div class="droite">
  4074. {block:PinnedPostLabel}
  4075. <div class="pinned-area">
  4076. <i class="mgc_pin_2_line"></i>
  4077. <span class="pinned-label">{PinnedPostLabel}</span>
  4078. </div>
  4079. {/block:PinnedPostLabel}
  4080.  
  4081. <button class="comment-dots" aria-label="{lang:More}">
  4082. <i class="mgc_more_1_fill"></i>
  4083. </button>
  4084. </div><!--end droite-->
  4085.  
  4086. <div class="comment-menu">
  4087. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  4088. <i class="mgc_user_1_line"></i>
  4089. <span>View blog</span>
  4090. </a>
  4091.  
  4092. <a class="cm-post-link" href="{ReblogRootURL}">
  4093. <i class="mgc_eye_line"></i>
  4094. <span>View post</span>
  4095. </a>
  4096.  
  4097. <a class="cm-reblog-link" href="#">
  4098. <i class="mgc_refresh_3_line"></i>
  4099. <span>Reblog</span>
  4100. </a>
  4101. </div>
  4102. </div>
  4103. <div class="comment-body">
  4104. <div class="quote-set">
  4105. <blockquote class="quote-text">
  4106. &ldquo;{Quote}&rdquo;
  4107. </blockquote>
  4108. {block:Source}
  4109. <p class="quote-source">{Source}</p>
  4110. {/block:Source}
  4111. </div><!--end quote-set-->
  4112. </div>
  4113. </div>
  4114. </div><!--end reblogs-->
  4115. {/block:RebloggedFrom}
  4116. {/block:Date}
  4117. </div><!--end quote-block-->
  4118. {/block:Quote}
  4119.  
  4120. <!------ LINK POSTS ------>
  4121. {block:Link}
  4122. <div class="link-block inc-op">
  4123. {block:Date}
  4124. {block:NotReblog}
  4125. <div class="comments all-comments">
  4126. <div class="comment original-comment not-reblog" username="{Name}">
  4127. <div class="comment-header">
  4128. <a href="{Permalink}">
  4129. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  4130. <span class="username">{Name}</span>
  4131. </a>
  4132.  
  4133. <div class="droite">
  4134. {block:PinnedPostLabel}
  4135. <div class="pinned-area">
  4136. <i class="mgc_pin_2_line"></i>
  4137. <span class="pinned-label">{PinnedPostLabel}</span>
  4138. </div>
  4139. {/block:PinnedPostLabel}
  4140.  
  4141. <button class="comment-dots" aria-label="{lang:More}">
  4142. <i class="mgc_more_1_fill"></i>
  4143. </button>
  4144. </div><!--end droite-->
  4145.  
  4146. <div class="comment-menu">
  4147. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  4148. <i class="mgc_user_1_line"></i>
  4149. <span>View blog</span>
  4150. </a>
  4151.  
  4152. <a class="cm-post-link" href="{Permalink}">
  4153. <i class="mgc_eye_line"></i>
  4154. <span>View post</span>
  4155. </a>
  4156.  
  4157. <a class="cm-reblog-link" href="#">
  4158. <i class="mgc_refresh_3_line"></i>
  4159. <span>Reblog</span>
  4160. </a>
  4161. </div>
  4162. </div>
  4163.  
  4164. <div class="comment-body">
  4165. <a href="{URL}" class="link-render" {Target}>
  4166. <h2>{Name}<i class="eva-icons" icon-name="arrowhead-right-outline"></i></h2>
  4167.  
  4168. {block:Host}
  4169. <div class="site-name">
  4170. <i class="eva-icons" icon-name="link-2-outline"></i>
  4171. <span>{Host}</span>
  4172. </div>
  4173. {/block:Host}
  4174. </a>
  4175.  
  4176. {Body}
  4177. </div>
  4178. </div>
  4179. </div><!--end notreblog-->
  4180. {/block:NotReblog}
  4181.  
  4182. {block:RebloggedFrom}
  4183. <div class="comments all-comments">
  4184. {block:Reblogs}
  4185. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  4186. <div class="comment-header">
  4187. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  4188. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  4189. <span class="username">{Username}</span>
  4190. {block:IsDeactivated}
  4191. <span class="deactivated">(deactivated)</span>
  4192. {/block:IsDeactivated}
  4193. </a>
  4194.  
  4195. <div class="droite">
  4196. {block:PinnedPostLabel}
  4197. <div class="pinned-area">
  4198. <i class="mgc_pin_2_line"></i>
  4199. <span class="pinned-label">{PinnedPostLabel}</span>
  4200. </div>
  4201. {/block:PinnedPostLabel}
  4202.  
  4203. <button class="comment-dots" aria-label="{lang:More}">
  4204. <i class="mgc_more_1_fill"></i>
  4205. </button>
  4206. </div><!--end droite-->
  4207.  
  4208. <div class="comment-menu">
  4209. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  4210. <i class="mgc_user_1_line"></i>
  4211. <span>View blog</span>
  4212. </a>
  4213.  
  4214. <a class="cm-post-link" href="{Permalink}">
  4215. <i class="mgc_eye_line"></i>
  4216. <span>View post</span>
  4217. </a>
  4218.  
  4219. <a class="cm-reblog-link" href="#">
  4220. <i class="mgc_refresh_3_line"></i>
  4221. <span>Reblog</span>
  4222. </a>
  4223. </div>
  4224. </div>
  4225. <div class="comment-body">
  4226. <a href="{URL}" class="link-render" {Target}>
  4227. <h2>{Name}<i class="eva-icons" icon-name="arrowhead-right-outline"></i></h2>
  4228.  
  4229. {block:Host}
  4230. <div class="site-name">
  4231. <i class="eva-icons" icon-name="link-2-outline"></i>
  4232. <span>{Host}</span>
  4233. </div>
  4234. {/block:Host}
  4235. </a>
  4236.  
  4237. {Body}
  4238. </div>
  4239. </div>
  4240. {/block:Reblogs}
  4241. </div><!--end reblogs-->
  4242. {/block:RebloggedFrom}
  4243. {/block:Date}
  4244. </div><!--end link-block-->
  4245. {/block:Link}
  4246.  
  4247. <!------ CHAT POSTS ------>
  4248. {block:Chat}
  4249. <div class="chat-block inc-op">
  4250.  
  4251. {block:Date}
  4252. {block:NotReblog}
  4253. <div class="comments all-comments">
  4254. <div class="comment original-comment not-reblog" username="{Name}">
  4255. <div class="comment-header">
  4256. <a href="{Permalink}">
  4257. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  4258. <span class="username">{Name}</span>
  4259. </a>
  4260.  
  4261. <div class="droite">
  4262. {block:PinnedPostLabel}
  4263. <div class="pinned-area">
  4264. <i class="mgc_pin_2_line"></i>
  4265. <span class="pinned-label">{PinnedPostLabel}</span>
  4266. </div>
  4267. {/block:PinnedPostLabel}
  4268.  
  4269. <button class="comment-dots" aria-label="{lang:More}">
  4270. <i class="mgc_more_1_fill"></i>
  4271. </button>
  4272. </div><!--end droite-->
  4273.  
  4274. <div class="comment-menu">
  4275. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  4276. <i class="mgc_user_1_line"></i>
  4277. <span>View blog</span>
  4278. </a>
  4279.  
  4280. <a class="cm-post-link" href="{Permalink}">
  4281. <i class="mgc_eye_line"></i>
  4282. <span>View post</span>
  4283. </a>
  4284.  
  4285. <a class="cm-reblog-link" href="#">
  4286. <i class="mgc_refresh_3_line"></i>
  4287. <span>Reblog</span>
  4288. </a>
  4289. </div>
  4290. </div>
  4291.  
  4292. <div class="comment-body">
  4293. <ul class="chat-wrap">
  4294. {block:Lines}
  4295. <li class="chat-line">
  4296. {block:Label}
  4297. <b class="chat-label">{Label}</b>
  4298. {/block:Label}
  4299.  
  4300. <span class="chat-content"> {Line}</span>
  4301. </li>
  4302. {/block:Lines}
  4303. </ul>
  4304. </div>
  4305. </div>
  4306. </div><!--end notreblog-->
  4307. {/block:NotReblog}
  4308.  
  4309. {block:RebloggedFrom}
  4310. <div class="comments all-comments">
  4311. {block:Reblogs}
  4312. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  4313. <div class="comment-header">
  4314. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  4315. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  4316. <span class="username">{Username}</span>
  4317. {block:IsDeactivated}
  4318. <span class="deactivated">(deactivated)</span>
  4319. {/block:IsDeactivated}
  4320. </a>
  4321.  
  4322. <div class="droite">
  4323. {block:PinnedPostLabel}
  4324. <div class="pinned-area">
  4325. <i class="mgc_pin_2_line"></i>
  4326. <span class="pinned-label">{PinnedPostLabel}</span>
  4327. </div>
  4328. {/block:PinnedPostLabel}
  4329.  
  4330. <button class="comment-dots" aria-label="{lang:More}">
  4331. <i class="mgc_more_1_fill"></i>
  4332. </button>
  4333. </div><!--end droite-->
  4334.  
  4335. <div class="comment-menu">
  4336. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  4337. <i class="mgc_user_1_line"></i>
  4338. <span>View blog</span>
  4339. </a>
  4340.  
  4341. <a class="cm-post-link" href="{Permalink}">
  4342. <i class="mgc_eye_line"></i>
  4343. <span>View post</span>
  4344. </a>
  4345.  
  4346. <a class="cm-reblog-link" href="#">
  4347. <i class="mgc_refresh_3_line"></i>
  4348. <span>Reblog</span>
  4349. </a>
  4350. </div>
  4351. </div>
  4352. <div class="comment-body">
  4353. <ul class="chat-wrap">
  4354. {block:Lines}
  4355. <li class="chat-line">
  4356. {block:Label}
  4357. <b class="chat-label">{Label}</b>
  4358. {/block:Label}
  4359.  
  4360. <span class="chat-content"> {Line}</span>
  4361. </li>
  4362. {/block:Lines}
  4363. </ul>
  4364. </div>
  4365. </div>
  4366. {/block:Reblogs}
  4367. </div><!--end reblogs-->
  4368. {/block:RebloggedFrom}
  4369. {/block:Date}
  4370. </div><!--end chat-block-->
  4371. {/block:Chat}
  4372.  
  4373. <!------ AUDIO POSTS ------>
  4374. {block:Audio}
  4375. <div class="audio-block inc-op">
  4376. <div class="legacy-audio aud-gen">
  4377. <div class="aud-cover">
  4378. <div class="aud-ctl">
  4379. <button class="q-play" aria-label="Play">
  4380. <span class="play-icon" aria-hidden="true"></span>
  4381. </button>
  4382.  
  4383. <button class="q-pause" aria-label="Pause">
  4384. <span class="pause-icon" aria-hidden="true"></span>
  4385. </button>
  4386. </div>
  4387.  
  4388. {block:AlbumArt}
  4389. <img src="{AlbumArtURL}" alt="{block:Album}&ldquo;{Album}&rdquo; {/block:Album}album cover{block:Artist} by {Artist}{/block:Artist}"/>
  4390. {block:AlbumArt}
  4391. </div>
  4392.  
  4393. <div class="aud-xyz">
  4394. <div class="aud-info">
  4395. {block:TrackName}
  4396. <div class="aud-title">
  4397. {TrackName}
  4398. </div>
  4399. {/block:TrackName}
  4400.  
  4401. {block:Artist}
  4402. <div class="aud-artist">
  4403. {Artist}
  4404. </div>
  4405. {/block:Artist}
  4406.  
  4407. {block:Album}
  4408. <div class="aud-album">
  4409. {Album}
  4410. </div>
  4411. {/block:Album}
  4412. </div><!--end aud-info (text)-->
  4413.  
  4414. {block:AudioPlayer}
  4415. <div class="aud-iframe">{AudioPlayer}</div>
  4416. {/block:AudioPlayer}
  4417. </div><!--end aud-xyz-->
  4418.  
  4419. <a class="aud-dl" href="javascript:void(0)" target="_blank" aria-label="Download">
  4420. <i class="mgc_download_2_line"></i>
  4421. </a>
  4422. </div><!--end audio-gen-->
  4423.  
  4424. {block:Date}
  4425. {block:NotReblog}
  4426. <div class="comments all-comments">
  4427. <div class="comment original-comment" username="{Name}">
  4428. <div class="comment-header">
  4429. <a href="{Permalink}">
  4430. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  4431. <span class="username">{Name}</span>
  4432. </a>
  4433.  
  4434. <div class="droite">
  4435. {block:PinnedPostLabel}
  4436. <div class="pinned-area">
  4437. <i class="mgc_pin_2_line"></i>
  4438. <span class="pinned-label">{PinnedPostLabel}</span>
  4439. </div>
  4440. {/block:PinnedPostLabel}
  4441.  
  4442. <button class="comment-dots" aria-label="{lang:More}">
  4443. <i class="mgc_more_1_fill"></i>
  4444. </button>
  4445. </div><!--end droite-->
  4446.  
  4447. <div class="comment-menu">
  4448. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  4449. <i class="mgc_user_1_line"></i>
  4450. <span>View blog</span>
  4451. </a>
  4452.  
  4453. <a class="cm-post-link" href="{Permalink}">
  4454. <i class="mgc_eye_line"></i>
  4455. <span>View post</span>
  4456. </a>
  4457.  
  4458. <a class="cm-reblog-link" href="#">
  4459. <i class="mgc_refresh_3_line"></i>
  4460. <span>Reblog</span>
  4461. </a>
  4462. </div>
  4463. </div>
  4464.  
  4465. <div class="comment-body">{block:Caption}{Caption}{/block:Caption}</div>
  4466. </div>
  4467. </div><!--end notreblog-->
  4468. {/block:NotReblog}
  4469.  
  4470. {block:RebloggedFrom}
  4471. <div class="comments all-comments">
  4472. {block:Reblogs}
  4473. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  4474. <div class="comment-header">
  4475. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  4476. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  4477. <span class="username">{Username}</span>
  4478. {block:IsDeactivated}
  4479. <span class="deactivated">(deactivated)</span>
  4480. {/block:IsDeactivated}
  4481. </a>
  4482.  
  4483. <div class="droite">
  4484. {block:PinnedPostLabel}
  4485. <div class="pinned-area">
  4486. <i class="mgc_pin_2_line"></i>
  4487. <span class="pinned-label">{PinnedPostLabel}</span>
  4488. </div>
  4489. {/block:PinnedPostLabel}
  4490.  
  4491. <button class="comment-dots" aria-label="{lang:More}">
  4492. <i class="mgc_more_1_fill"></i>
  4493. </button>
  4494. </div><!--end droite-->
  4495.  
  4496. <div class="comment-menu">
  4497. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  4498. <i class="mgc_user_1_line"></i>
  4499. <span>View blog</span>
  4500. </a>
  4501.  
  4502. <a class="cm-post-link" href="{Permalink}">
  4503. <i class="mgc_eye_line"></i>
  4504. <span>View post</span>
  4505. </a>
  4506.  
  4507. <a class="cm-reblog-link" href="#">
  4508. <i class="mgc_refresh_3_line"></i>
  4509. <span>Reblog</span>
  4510. </a>
  4511. </div>
  4512. </div>
  4513. <div class="comment-body">{Body}</div>
  4514. </div>
  4515. {/block:Reblogs}
  4516.  
  4517. <div class="comment add-op-comment" username="{ReblogRootName}">
  4518. <div class="comment-header">
  4519. <a href="{ReblogRootURL}">
  4520. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  4521. <span class="username">{ReblogRootName}</span>
  4522. {block:IsDeactivated}
  4523. <span class="deactivated">(deactivated)</span>
  4524. {/block:IsDeactivated}
  4525. </a>
  4526.  
  4527. <div class="droite">
  4528. {block:PinnedPostLabel}
  4529. <div class="pinned-area">
  4530. <i class="mgc_pin_2_line"></i>
  4531. <span class="pinned-label">{PinnedPostLabel}</span>
  4532. </div>
  4533. {/block:PinnedPostLabel}
  4534.  
  4535. <button class="comment-dots" aria-label="{lang:More}">
  4536. <i class="mgc_more_1_fill"></i>
  4537. </button>
  4538. </div><!--end droite-->
  4539.  
  4540. <div class="comment-menu">
  4541. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  4542. <i class="mgc_user_1_line"></i>
  4543. <span>View blog</span>
  4544. </a>
  4545.  
  4546. <a class="cm-post-link" href="{ReblogRootURL}">
  4547. <i class="mgc_eye_line"></i>
  4548. <span>View post</span>
  4549. </a>
  4550.  
  4551. <a class="cm-reblog-link" href="#">
  4552. <i class="mgc_refresh_3_line"></i>
  4553. <span>Reblog</span>
  4554. </a>
  4555. </div>
  4556. </div>
  4557. <div class="comment-body">{Body}</div>
  4558. </div>
  4559. </div><!--end reblogs-->
  4560. {/block:RebloggedFrom}
  4561. {/block:Date}
  4562. </div><!--end audio-block-->
  4563. {/block:Audio}
  4564.  
  4565. <!------ VIDEO POSTS ------>
  4566. {block:Video}
  4567. <div class="video-block">
  4568. <div class="legacy-video">
  4569. {Video-500}
  4570.  
  4571. {block:VideoThumbnail}
  4572. <span class="poster-thumb" url="{VideoThumbnailURL}"></span>
  4573. {/block:VideoThumbnail}
  4574. </div>
  4575.  
  4576. {block:Date}
  4577. {block:NotReblog}
  4578. <div class="comments all-comments">
  4579. <div class="comment original-comment" username="{Name}">
  4580. <div class="comment-header">
  4581. <a href="{Permalink}">
  4582. <img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
  4583. <span class="username">{Name}</span>
  4584. </a>
  4585.  
  4586. <div class="droite">
  4587. {block:PinnedPostLabel}
  4588. <div class="pinned-area">
  4589. <i class="mgc_pin_2_line"></i>
  4590. <span class="pinned-label">{PinnedPostLabel}</span>
  4591. </div>
  4592. {/block:PinnedPostLabel}
  4593.  
  4594. <button class="comment-dots" aria-label="{lang:More}">
  4595. <i class="mgc_more_1_fill"></i>
  4596. </button>
  4597. </div><!--end droite-->
  4598.  
  4599. <div class="comment-menu">
  4600. <a class="cm-view-blog" href="//{Name}.tumblr.com">
  4601. <i class="mgc_user_1_line"></i>
  4602. <span>View blog</span>
  4603. </a>
  4604.  
  4605. <a class="cm-post-link" href="{Permalink}">
  4606. <i class="mgc_eye_line"></i>
  4607. <span>View post</span>
  4608. </a>
  4609.  
  4610. <a class="cm-reblog-link" href="#">
  4611. <i class="mgc_refresh_3_line"></i>
  4612. <span>Reblog</span>
  4613. </a>
  4614. </div>
  4615. </div>
  4616.  
  4617. <div class="comment-body">{block:Caption}{Caption}{/block:Caption}</div>
  4618. </div>
  4619. </div><!--end notreblog-->
  4620. {/block:NotReblog}
  4621.  
  4622. {block:RebloggedFrom}
  4623. <div class="comments all-comments">
  4624. {block:Reblogs}
  4625. <div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  4626. <div class="comment-header">
  4627. <a{block:IsActive} href="{Permalink}"{/block:IsActive}>
  4628. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  4629. <span class="username">{Username}</span>
  4630. {block:IsDeactivated}
  4631. <span class="deactivated">(deactivated)</span>
  4632. {/block:IsDeactivated}
  4633. </a>
  4634.  
  4635. <div class="droite">
  4636. {block:PinnedPostLabel}
  4637. <div class="pinned-area">
  4638. <i class="mgc_pin_2_line"></i>
  4639. <span class="pinned-label">{PinnedPostLabel}</span>
  4640. </div>
  4641. {/block:PinnedPostLabel}
  4642.  
  4643. <button class="comment-dots" aria-label="{lang:More}">
  4644. <i class="mgc_more_1_fill"></i>
  4645. </button>
  4646. </div><!--end droite-->
  4647.  
  4648. <div class="comment-menu">
  4649. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  4650. <i class="mgc_user_1_line"></i>
  4651. <span>View blog</span>
  4652. </a>
  4653.  
  4654. <a class="cm-post-link" href="{Permalink}">
  4655. <i class="mgc_eye_line"></i>
  4656. <span>View post</span>
  4657. </a>
  4658.  
  4659. <a class="cm-reblog-link" href="#">
  4660. <i class="mgc_refresh_3_line"></i>
  4661. <span>Reblog</span>
  4662. </a>
  4663. </div>
  4664. </div>
  4665. <div class="comment-body">{Body}</div>
  4666. </div>
  4667. {/block:Reblogs}
  4668.  
  4669. <div class="comment add-op-comment" username="{ReblogRootName}">
  4670. <div class="comment-header">
  4671. <a href="{ReblogRootURL}">
  4672. <img class="userpic" src="{ReblogRootPortraitURL-64}">
  4673. <span class="username">{ReblogRootName}</span>
  4674. {block:IsDeactivated}
  4675. <span class="deactivated">(deactivated)</span>
  4676. {/block:IsDeactivated}
  4677. </a>
  4678.  
  4679. <div class="droite">
  4680. {block:PinnedPostLabel}
  4681. <div class="pinned-area">
  4682. <i class="mgc_pin_2_line"></i>
  4683. <span class="pinned-label">{PinnedPostLabel}</span>
  4684. </div>
  4685. {/block:PinnedPostLabel}
  4686.  
  4687. <button class="comment-dots" aria-label="{lang:More}">
  4688. <i class="mgc_more_1_fill"></i>
  4689. </button>
  4690. </div><!--end droite-->
  4691.  
  4692. <div class="comment-menu">
  4693. <a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
  4694. <i class="mgc_user_1_line"></i>
  4695. <span>View blog</span>
  4696. </a>
  4697.  
  4698. <a class="cm-post-link" href="{ReblogRootURL}">
  4699. <i class="mgc_eye_line"></i>
  4700. <span>View post</span>
  4701. </a>
  4702.  
  4703. <a class="cm-reblog-link" href="#">
  4704. <i class="mgc_refresh_3_line"></i>
  4705. <span>Reblog</span>
  4706. </a>
  4707. </div>
  4708. </div>
  4709. <div class="comment-body">{Body}</div>
  4710. </div>
  4711. </div><!--end reblogs-->
  4712. {/block:RebloggedFrom}
  4713. {/block:Date}
  4714. </div><!--end video-block-->
  4715. {/block:Video}
  4716.  
  4717. <!------ ASK POSTS ------>
  4718. {block:Answer}
  4719. <div class="answer-block">
  4720. <div class="question-part">
  4721. <img class="askerpic" src="{AskerPortraitURL-128}"/>
  4722. <div class="q-right">
  4723. <p class="q-top">{lang:Asker asked 2}:</p>
  4724. <div class="q-text">{Question}</div>
  4725. </div>
  4726. </div>
  4727.  
  4728. {block:Date}
  4729. {block:NotReblog}
  4730. <div class="answer-part op-answer">
  4731. <div class="a-left">
  4732. <p class="a-top"><a href="/">{Name}</a> answered:</p>
  4733. <div class="a-text replies">{Replies}</div>
  4734. </div>
  4735. <img class="replypic" src="{PortraitURL-128}" alt="{Name}'s avatar">
  4736. </div>
  4737. {/block:NotReblog}
  4738.  
  4739. {block:RebloggedFrom}
  4740. {block:Answerer}
  4741. <div class="answer-part rb-answer">
  4742. <div class="a-left">
  4743. <p class="a-top">
  4744. <a href="{ReblogRootURL}">{ReblogRootName}</a>
  4745. answered:
  4746. </p>
  4747. <div class="a-text replies">{Answer}</div>
  4748. </div>
  4749. <img class="replypic" src="{ReblogRootPortraitURL-128}" alt="{ReblogRootName}'s avatar">
  4750. </div>
  4751. {/block:Answerer}
  4752.  
  4753. <div class="comments all-comments">
  4754. {block:Reblogs}
  4755. {block:IsNotOriginalEntry}
  4756. <div class="comment extra-comment{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
  4757. <div class="comment-header">
  4758. <a {block:IsActive} href="{Permalink}"{/block:IsActive}>
  4759. <img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
  4760. <span class="username">{Username}</span>
  4761. {block:IsDeactivated}
  4762. <span class="deactivated">(deactivated)</span>
  4763. {/block:IsDeactivated}
  4764. </a>
  4765.  
  4766. <div class="droite">
  4767. {block:PinnedPostLabel}
  4768. <div class="pinned-area">
  4769. <i class="mgc_pin_2_line"></i>
  4770. <span class="pinned-label">{PinnedPostLabel}</span>
  4771. </div>
  4772. {/block:PinnedPostLabel}
  4773.  
  4774. <button class="comment-dots" aria-label="{lang:More}">
  4775. <i class="mgc_more_1_fill"></i>
  4776. </button>
  4777. </div><!--end droite-->
  4778.  
  4779. <div class="comment-menu">
  4780. <a class="cm-view-blog" href="//{Username}.tumblr.com">
  4781. <i class="mgc_user_1_line"></i>
  4782. <span>View blog</span>
  4783. </a>
  4784.  
  4785. <a class="cm-post-link" href="{Permalink}">
  4786. <i class="mgc_eye_line"></i>
  4787. <span>View post</span>
  4788. </a>
  4789.  
  4790. <a class="cm-reblog-link" href="#">
  4791. <i class="mgc_refresh_3_line"></i>
  4792. <span>Reblog</span>
  4793. </a>
  4794. </div>
  4795. </div>
  4796.  
  4797. <div class="comment-body">{Body}</div>
  4798. </div><!--end single comment-->
  4799. {/block:IsNotOriginalEntry}
  4800. {/block:Reblogs}
  4801. </div><!--end reblogs-->
  4802. {/block:RebloggedFrom}
  4803. {/block:Date}
  4804. </div><!--end answer-block-->
  4805. {/block:Answer}
  4806. </div><!--end post-body-->
  4807.  
  4808. <!------ TAGS ------>
  4809. {block:HasTags}
  4810. <div class="tagscont" align="{select:tags position}">
  4811. <div class="tags-inner-x">
  4812. <div class="tags-inner-y">
  4813. <div class="tags-inner-z">
  4814. {block:Tags}
  4815. <a href="{TagURL}" tag="{URLSafeTag}">{Tag}</a>
  4816. {/block:Tags}
  4817. </div>
  4818. </div>
  4819. </div>
  4820. </div>
  4821. {/block:HasTags}
  4822.  
  4823. <!------ POST INFO / PERMALINK ------>
  4824. {block:Date}
  4825. <div class="infobar flip-{select:flip post info} bord-{select:post info border}">
  4826. <div class="innerpho">
  4827. <div class="pho-top">
  4828. <!-- like & reblog btns -->
  4829. <div class="post-controls">
  4830. <!---- LIKE BUTTON ---->
  4831. <div class="like-area" aria-label="Like">
  4832. {LikeButton}
  4833. <i class="ph-bold ph-heart"></i>
  4834. </div>
  4835.  
  4836. <!---- REBLOG LINK ---->
  4837. <div class="rb-area">
  4838. <a href="{ReblogURL}" aria-label="Reblog" target="_blank">
  4839. <i class="mgc_refresh_3_line"></i>
  4840. </a>
  4841. </div>
  4842.  
  4843. <!---- TAGS TOGGLE ---->
  4844. {block:IndexPage}
  4845. {block:HasTags}
  4846. <div class="tags-icon-area">
  4847. <button aria-label="{lang:Tags}">
  4848. <i class="eva-icons" icon-name="pricetags-outline"></i>
  4849. </button>
  4850. </div>
  4851. {/block:HasTags}
  4852. {/block:IndexPage}
  4853.  
  4854. <!---- COPY LINK TO POST ---->
  4855. <div class="copy-area" c="{select:show copy link}">
  4856. <a data-clipboard-text="{Permalink}" aria-label="Copy link to post">
  4857. <span class="before">
  4858. <i class="mgc_send_plane_line"></i>
  4859. </span>
  4860.  
  4861. <span class="after">
  4862. <i class="mgc_check_line"></i>
  4863. </span>
  4864. </a>
  4865. </div>
  4866.  
  4867. <span class="copied-label">Copied!</span>
  4868. </div><!--end post-controls-->
  4869.  
  4870. <!-- permalink -->
  4871. <a class="perma"{block:IndexPage} href="{Permalink}" aria-label="View post"{/block:IndexPage}>
  4872.  
  4873. <!-- no. of notes -->
  4874. <div class="notes-part">
  4875. {NoteCountWithLabel}
  4876. </div>
  4877. </a><!--end permalink (right)-->
  4878. </div><!--end pho-top-->
  4879.  
  4880. <div class="pho-bot">
  4881. <!-- date posted / reblogged -->
  4882. <a class="date-part shorten-{select:shorten timestamps}"{block:IndexPage} href="{Permalink}" aria-label="{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}"{/block:IndexPage}>
  4883. {block:IndexPage}
  4884. <span class="tsx">{Timestamp}</span>
  4885. <span class="tsy">{TimeAgo}</span>
  4886. {/block:IndexPage}
  4887.  
  4888. {block:PermalinkPage}
  4889. {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}
  4890. {/block:PermalinkPage}
  4891. </a>
  4892.  
  4893. <!-- OP -->
  4894. <div class="src-part">
  4895. <span class="et-symbol">@</span>
  4896.  
  4897. {block:NotReblog}
  4898. <a href="{Permalink}" aria-label="Original Poster">{Name}</a>
  4899. {/block:NotReblog}
  4900.  
  4901. {block:RebloggedFrom}
  4902. <a href="{ReblogRootURL}" aria-label="Original Poster">{ReblogRootName}</a>
  4903. {/block:RebloggedFrom}
  4904. </div>
  4905. </div><!--end pho-bot-->
  4906. </div><!--end innerpho-->
  4907. </div><!--end infobar-->
  4908. {/block:Date}
  4909. </article><!--end a post-->
  4910.  
  4911. <!------ POST NOTES ------>
  4912. {block:PostNotes}
  4913. <div class="post-notes">{PostNotes}</div>
  4914. {/block:PostNotes}
  4915.  
  4916. {/block:Posts}
  4917.  
  4918. </section><!--end all posts-->
  4919.  
  4920. <!------ PAGINATION ------>
  4921. {block:Pagination}
  4922. <div class="botpagi">
  4923. <div class="bp-wrap jump-pagi">
  4924. {block:PreviousPage}
  4925. <a class="prev-page" href="{PreviousPage}" aria-label="Previous Page">
  4926. <i class="eva-icons" icon-name="arrowhead-left-outline"></i>
  4927. <span>Previous Page</span>
  4928. </a>
  4929. {/block:PreviousPage}
  4930.  
  4931. {block:NextPage}
  4932. <a class="next-page" href="{NextPage}" aria-label="Next Page">
  4933. <span>Next Page</span>
  4934. <i class="eva-icons" icon-name="arrowhead-right-outline"></i>
  4935. </a>
  4936. {/block:NextPage}
  4937. </div><!--end bp-wrap-->
  4938.  
  4939. {block:NextPage}
  4940. <div class="bp-wrap spinner">
  4941. <a href="{NextPage}" tabindex="-1" aria-hidden="true">
  4942. <div class="spinner-svg"></div>
  4943. </a>
  4944. </div>
  4945. {/block:NextPage}
  4946. </div><!--end botpagi-->
  4947. {/block:Pagination}
  4948.  
  4949. </section><!--end maincont-->
  4950.  
  4951. </main><!--end main-->
  4952.  
  4953. </body>
  4954. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!