API tools faq
paste
glenthemes

Theme [32]: Resonance

glenthemes
Jul 25th, 2018 (edited)
22,239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 126.26 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------------------------
  2.  
  3. Theme [32]: Resonance
  4. Made by glenthemes
  5.  
  6. Initial release: 2018/07/25
  7. Revamp date: 2023/12/31
  8. Last updated: 2025/04/07
  9.  
  10. 「 THEME INFO. 」
  11. ❃ Post: glenthemes.tumblr.com/post/176263839584
  12. ❃ Preview: glenthpvs.tumblr.com/resonance
  13. ❃ Code: pastebin.com/raw/ivPYDzsf
  14.  
  15. 「 HOW TO USE. 」
  16. glen-docs.gitlab.io/theme/32
  17.  
  18. 「 TERMS OF USE. 」
  19. 1) Do not remove the theme credit.
  20. 2) Do not repost/redistribute my themes.
  21. 3) Do not take parts of the code and use it as your own.
  22. 4) Do not use my themes as a base code.
  23. 5) Do not mix my themes together.
  24.  
  25. 「 QUESTIONS. 」
  26. glenthemes.tumblr.com/support
  27.  
  28. 「 CREDITS. 」
  29. ᕕ(๑•◡•๑)ﾉ♬ ~ glencredits.tumblr.com/resonance
  30.  
  31. -------------------------------------------------------------------->
  32.  
  33. <!DOCTYPE html>
  34. <html
  35. lang="en"
  36. tumblr-controls="{select:tumblr controls}"
  37. bg-mode="{select:background image size}"
  38. base-font-size="{select:font size}"
  39. {block:HomePage}home-page{/block:HomePage}
  40. {block:IndexPage}index-page{/block:IndexPage}
  41. {block:PermalinkPage}permalink-page{/block:PermalinkPage}
  42. {block:TagPage}tag-page{/block:TagPage}
  43. {block:SearchPage}search-page{/block:SearchPage}
  44. {block:SubmitPage}submit-page{/block:SubmitPage}
  45. {block:AskPage}ask-page{/block:AskPage}
  46. heading-font="{select:heading font}"
  47. uppercase-font="{select:uppercase font}"
  48. body-font="{select:body font}"
  49. post-padding="{select:post padding}"
  50. rounded-corners="{select:rounded corners}"
  51. sb2-abt-box-top-gap="{select:about box top gap}"
  52. sb2-normal-box-gap-y="{select:sidebar 2 title bottom gap}"
  53. hide-help-msg="{select:hide help message}"
  54. {block:PermalinkPage}url="{Permalink}"{/block:PermalinkPage}
  55. >
  56. <head>
  57.  
  58. <meta charset="UTF-8">
  59. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  60.  
  61. <link href="{Favicon}" rel="shortcut icon"/>
  62. <title>
  63. {Title}
  64. {block:PostSummary} ⋮ {PostSummary}{/block:PostSummary}
  65. {block:TagPage} ⋮ #{Tag}{/block:TagPage}
  66. {block:SearchPage} ⋮ “{SearchQuery}” – {lang:SearchResultCount results}{/block:SearchPage}
  67. </title>
  68.  
  69. {block:Description}
  70. <meta name="description" content="{MetaDescription}"/>
  71. {/block:Description}
  72.  
  73. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  74.  
  75. <!------- FONTS ------->
  76. <link href="//fonts.googleapis.com/css?&display=swap&family=Instrument+Sans:400,400i,600,600i|Inter:400,400i,500,500i,600,600i|Muli:400,400i,600,600i|Manrope:400,400i,600,600i|Libre+Franklin:400,400:i,600,600i|Plus+Jakarta+Sans:400,400i,600,600i|Public+Sans:400,400i,600,600i|Quicksand:600,600i|Geologica:400,600,600i|Golos+Text:500,500i,600,600i|Poppins:500,500i,600,600i|Onest:600,600i|Figtree:500,500i,600,600i|Fragment+Mono:400,400i,600,600i" rel="stylesheet" crossorigin>
  77.  
  78. <!------- ICON LIBRARIES ------->
  79. <link href="//cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet" crossorigin>
  80.  
  81. <link href="//feathericons.gitlab.io/i/icons.css" rel="stylesheet" crossorigin>
  82. <link href="//evil-icons.gitlab.io/i/icons.css" rel="stylesheet" crossorigin>
  83.  
  84. <link href="//saturnicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  85. <link href="//cdn.jsdelivr.net/gh/Richard9394/MingCute@main/fonts/MingCute.css" rel="stylesheet">
  86.  
  87. <!------- SCRIPTS ------->
  88. <script src="//static.tumblr.com/2pnwama/uLNs0r1rq/roots.js"></script>
  89.  
  90. <script src="//glen-iframes.gitlab.io/i/use.js"></script>
  91.  
  92. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet" crossorigin>
  93. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  94.  
  95. <script src="//unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  96. <script src="//unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  97.  
  98. <link href="//static.tumblr.com/gtjt4bo/emIsudjeh/vidyo.min.css" rel="stylesheet">
  99. <script src="//static.tumblr.com/gtjt4bo/bGosudjfz/vidyo.min.js"></script>
  100.  
  101. <script src="//glen-themes.gitlab.io/thms/32/config.js"></script>
  102. <link href="//glen-themes.gitlab.io/thms/32/misc.css" rel="stylesheet" crossorigin>
  103.  
  104. <!------- CUSTOMIZE PAGE OPTIONS ------->
  105. {block:Options}
  106. <!-- DO NOT edit your options here, go back and scroll down to "THEME OPTIONS". -->
  107.  
  108. <!---- IMAGES ---->
  109. <meta name="image:background image" content="//64.media.tumblr.com/8036d9d070eb543153919361c65d9d6f/5ef6deb46ee9e07a-7b/s2048x3072/4dcde989b42a8373190c9b48b50d3b25b1f57c75.png">
  110. <meta name="image:sidebar 1 image" content="//64.media.tumblr.com/5239dc38b7814be3069aca852cacd1e0/e2e93af36ceb1aaa-0e/s2048x3072/8c587b5994d78a148e0a6719de181235f8829440.png">
  111. <meta name="image:sidebar 2 icon" content="//static.tumblr.com/gtjt4bo/97os61zz8/jirou_anime.png">
  112.  
  113. <!---- COLORS ---->
  114. <meta name="color:background" content="#fdfdfd">
  115.  
  116. <!-- divider: posts -->
  117. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;" content="">
  118. <meta name="color:post" content="#fff">
  119. <meta name="color:post borders outer" content="#f0f0f0">
  120. <meta name="color:post borders inner" content="#f0f0f0">
  121. <meta name="color:text" content="#6f7580">
  122.  
  123. <!-- divider: posts: other -->
  124. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;&#x3A;&#x20;&#x1D40E;&#x1D413;&#x1D407;&#x1D404;&#x1D411;" content="">
  125. <meta name="color:alt post" content="#f6f7f8">
  126. <meta name="color:alt post borders inner" content="#ecedef">
  127. <meta name="color:alt text" content="#4f576a">
  128.  
  129. <!-- divider: more colors -->
  130. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40C;&#x1D40E;&#x1D411;&#x1D404;&#x20;&#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;" content="">
  131. <meta name="color:headings" content="#4b5057">
  132. <meta name="color:bold" content="#575d65">
  133. <meta name="color:italic" content="#6f7580">
  134. <meta name="color:links" content="#33373c">
  135. <meta name="color:links underline" content="#e8e8e8">
  136.  
  137. <meta name="color:reblogs usernames" content="#33373c">
  138.  
  139. <meta name="color:buttons BG" content="#33373c">
  140. <meta name="color:buttons icon" content="#eee">
  141.  
  142. <meta name="color:post info border" content="#f0f0f0">
  143. <meta name="color:post info BG" content="#f8f9fb">
  144. <meta name="color:post info text" content="#575a65">
  145.  
  146. <meta name="color:reblog and like border" content="#eaeaea">
  147. <meta name="color:reblog and like BG" content="#fbfcfd">
  148. <meta name="color:reblog and like icon" content="#575a65">
  149.  
  150. <!-- divider: other colors -->
  151. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40E;&#x1D413;&#x1D407;&#x1D404;&#x1D411;&#x20;&#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;" content="">
  152. <meta name="color:scrollbar" content="#b2b4bc">
  153.  
  154. <meta name="color:text highlight BG" content="#b4d7ff">
  155. <meta name="color:text highlighted" content="#6f7580">
  156.  
  157. <meta name="color:pagination border" content="#f0f0f0">
  158. <meta name="color:pagination text" content="#6e7680">
  159.  
  160. <meta name="color:hover text border" content="#f0f0f0">
  161. <meta name="color:hover text BG" content="#fcfcfd">
  162. <meta name="color:hover text" content="#636673">
  163.  
  164. <!-- divider: music player -->
  165. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40C;&#x1D414;&#x1D412;&#x1D408;&#x1D402;&#x20;&#x1D40F;&#x1D40B;&#x1D400;&#x1D418;&#x1D404;&#x1D411;" content="">
  166. <meta name="color:music player buttons" content="#3f424a">
  167. <meta name="color:music player note" content="#3f424a">
  168. <meta name="color:song name" content="#3f424a">
  169.  
  170. <!-- divider: sidebar 1 image -->
  171. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7CF;&#x20;&#x1D408;&#x1D40C;&#x1D400;&#x1D406;&#x1D404;" content="">
  172. <meta name="color:sidebar 1 image border" content="#f0f0f0">
  173. <meta name="color:sidebar 1 image BG" content="#fff">
  174.  
  175. <!-- divider: navlinks -->
  176. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40D;&#x1D400;&#x1D415;&#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;" content="">
  177. <meta name="color:navlinks border" content="#f0f0f0">
  178. <meta name="color:navlinks BG" content="#fff">
  179. <meta name="color:navlinks icons" content="#6f7280">
  180.  
  181. <meta name="color:navlinks HOVER border" content="#f0f0f0">
  182. <meta name="color:navlinks HOVER BG" content="#f8f9fb">
  183. <meta name="color:navlinks HOVER icons" content="#575a65">
  184.  
  185. <!-- divider: custom links -->
  186. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C;&#x20;&#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;" content="">
  187. <meta name="color:custom links border" content="#f0f0f0">
  188. <meta name="color:custom links BG" content="#fcfcfc">
  189. <meta name="color:custom links text" content="#575a65">
  190.  
  191. <meta name="color:custom links HOVER border" content="#33373c">
  192. <meta name="color:custom links HOVER BG" content="#33373c">
  193. <meta name="color:custom links HOVER text" content="#eee">
  194.  
  195. <!-- divider: sidebar 2 title -->
  196. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7D0;&#x20;&#x1D413;&#x1D408;&#x1D413;&#x1D40B;&#x1D404;" content="">
  197. <meta name="color:sidebar 2 title border" content="#f0f0f0">
  198. <meta name="color:sidebar 2 title BG" content="#fcfcfc">
  199. <meta name="color:sidebar 2 title" content="#575a65">
  200.  
  201. <!-- divider: sidebar 2 box -->
  202. <meta name="color:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7D0;&#x20;&#x1D401;&#x1D40E;&#x1D417;&#x1D404;&#x1D412;" content="">
  203. <meta name="color:sidebar 2 box border" content="#f2f2f2">
  204. <meta name="color:sidebar 2 box BG" content="#fff">
  205. <meta name="color:sidebar 2 box text" content="#575a65">
  206.  
  207. <meta name="color:sidebar 2 box bold" content="#454545">
  208. <meta name="color:sidebar 2 box italic" content="#6f7580">
  209. <meta name="color:sidebar 2 box links" content="#33373c">
  210. <meta name="color:sidebar 2 box links underline" content="#e8e8e8">
  211.  
  212. <meta name="color:activity label BG" content="#f9f9f9">
  213. <meta name="color:activity label text" content="#575a65">
  214.  
  215.  
  216. <!---- DROPDOWN OPTS ---->
  217. <!-- divider: general options -->
  218. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D406;&#x1D404;&#x1D40D;&#x1D404;&#x1D411;&#x1D400;&#x1D40B;&#x20;&#x1D40E;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#x1D412;" title="" content="">
  219.  
  220. <meta name="select:hide help message" title="show" content="show">
  221. <meta name="select:hide help message" title="hide" content="hide">
  222.  
  223. <meta name="select:tumblr controls" title="black" content="black">
  224. <meta name="select:tumblr controls" title="white" content="white">
  225.  
  226. <meta name="select:background image size" title="tiled &#x2F; repeating" content="small">
  227. <meta name="select:background image size" title="full screen" content="full">
  228.  
  229. <!-- rounded corners -->
  230. <meta name="select:rounded corners" title="medium" content=".375rem">
  231. <meta name="select:rounded corners" title="none" content="0px">
  232. <meta name="select:rounded corners" title="more" content=".75rem">
  233.  
  234. <!-- divider: layout: gaps -->
  235. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40B;&#x1D400;&#x1D418;&#x1D40E;&#x1D414;&#x1D413;&#x3A;&#x20;&#x1D406;&#x1D400;&#x1D40F;&#x1D412;" title="" content="">
  236.  
  237. <!-- screen gap -->
  238. <meta name="select:screen gap" title="65px" content="65px">
  239. <meta name="select:screen gap" title="30px" content="30px">
  240. <meta name="select:screen gap" title="35px" content="35px">
  241. <meta name="select:screen gap" title="40px" content="40px">
  242. <meta name="select:screen gap" title="45px" content="45px">
  243. <meta name="select:screen gap" title="50px" content="50px">
  244. <meta name="select:screen gap" title="55px" content="55px">
  245. <meta name="select:screen gap" title="60px" content="60px">
  246. <meta name="select:screen gap" title="70px" content="70px">
  247. <meta name="select:screen gap" title="75px" content="75px">
  248. <meta name="select:screen gap" title="80px" content="80px">
  249. <meta name="select:screen gap" title="85px" content="85px">
  250. <meta name="select:screen gap" title="90px" content="90px">
  251. <meta name="select:screen gap" title="95px" content="95px">
  252. <meta name="select:screen gap" title="100px" content="100px">
  253.  
  254. <!-- post side gaps -->
  255. <meta name="select:post side gaps" title="70px" content="70px">
  256. <meta name="select:post side gaps" title="30px" content="30px">
  257. <meta name="select:post side gaps" title="40px" content="40px">
  258. <meta name="select:post side gaps" title="60px" content="60px">
  259. <meta name="select:post side gaps" title="80px" content="80px">
  260. <meta name="select:post side gaps" title="90px" content="90px">
  261. <meta name="select:post side gaps" title="100px" content="100px">
  262. <meta name="select:post side gaps" title="110px" content="110px">
  263. <meta name="select:post side gaps" title="120px" content="120px">
  264. <meta name="select:post side gaps" title="130px" content="130px">
  265. <meta name="select:post side gaps" title="140px" content="140px">
  266.  
  267. <!-- body font -->
  268. <!-- divider: fonts -->
  269. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D405;&#x1D40E;&#x1D40D;&#x1D413;&#x1D412;" title="" content="">
  270. <meta name="select:body font" title="Instrument Sans" content="Instrument Sans">
  271. <meta name="select:body font" title="Inter" content="Inter">
  272. <meta name="select:body font" title="Manrope" content="Manrope">
  273. <meta name="select:body font" title="Libre Franklin" content="Libre Franklin">
  274. <meta name="select:body font" title="Plus Jakarta Sans" content="Plus Jakarta Sans">
  275. <meta name="select:body font" title="Public Sans" content="Public Sans">
  276. <meta name="select:body font" title="Muli" content="Muli">
  277.  
  278. <!-- heading font -->
  279. <meta name="select:heading font" title="Quicksand" content="Quicksand">
  280. <meta name="select:heading font" title="Geologica" content="Geologica">
  281. <meta name="select:heading font" title="Poppins" content="Poppins">
  282.  
  283. <!-- caps font -->
  284. <meta name="select:uppercase font" title="Figtree" content="Figtree">
  285. <meta name="select:uppercase font" title="Quicksand" content="Quicksand">
  286. <meta name="select:uppercase font" title="Golos Text" content="Golos Text">
  287. <meta name="select:uppercase font" title="Poppins" content="Poppins">
  288. <meta name="select:uppercase font" title="Onest" content="Onest">
  289. <meta name="select:uppercase font" title="Inter" content="Inter">
  290.  
  291. <meta name="select:font size" title="13px" content="13px">
  292. <meta name="select:font size" title="11px" content="11px">
  293. <meta name="select:font size" title="12px" content="12px">
  294. <meta name="select:font size" title="14px" content="14px">
  295. <meta name="select:font size" title="15px" content="15px">
  296. <meta name="select:font size" title="16px" content="16px">
  297.  
  298. <!-- music player -->
  299. <!-- divider: music player -->
  300. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40C;&#x1D414;&#x1D412;&#x1D408;&#x1D402;&#x20;&#x1D40F;&#x1D40B;&#x1D400;&#x1D418;&#x1D404;&#x1D411;" title="" content="">
  301.  
  302. <meta name="select:show music player" title="show" content="show">
  303. <meta name="select:show music player" title="hide" content="hide">
  304.  
  305. <meta name="select:music player style" title="fill" content="-filled">
  306. <meta name="select:music player style" title="outline" content="">
  307.  
  308. <meta name="select:music player corner gap" title="20px" content="20px">
  309. <meta name="select:music player corner gap" title="10px" content="10px">
  310. <meta name="select:music player corner gap" title="14px" content="14px">
  311. <meta name="select:music player corner gap" title="18px" content="18px">
  312. <meta name="select:music player corner gap" title="24px" content="24px">
  313. <meta name="select:music player corner gap" title="28px" content="28px">
  314. <meta name="select:music player corner gap" title="32px" content="32px">
  315. <meta name="select:music player corner gap" title="36px" content="36px">
  316.  
  317. <meta name="select:music player buttons size" title="16px" content="16px">
  318. <meta name="select:music player buttons size" title="10px" content="10px">
  319. <meta name="select:music player buttons size" title="12px" content="12px">
  320. <meta name="select:music player buttons size" title="14px" content="14px">
  321. <meta name="select:music player buttons size" title="18px" content="18px">
  322. <meta name="select:music player buttons size" title="20px" content="20px">
  323.  
  324. <meta name="select:song name size" title="11px" content="11px">
  325. <meta name="select:song name size" title="8px" content="8px">
  326. <meta name="select:song name size" title="9px" content="9px">
  327. <meta name="select:song name size" title="10px" content="10px">
  328. <meta name="select:song name size" title="12px" content="12px">
  329. <meta name="select:song name size" title="13px" content="13px">
  330. <meta name="select:song name size" title="14px" content="14px">
  331. <meta name="select:song name size" title="15px" content="15px">
  332. <meta name="select:song name size" title="16px" content="16px">
  333.  
  334. <!-- divider: sidebar 1 -->
  335. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7CF;" title="" content="">
  336. <meta name="select:navlinks icon padding" title="8px" content="8px">
  337. <meta name="select:navlinks icon padding" title="4px" content="4px">
  338. <meta name="select:navlinks icon padding" title="6px" content="6px">
  339. <meta name="select:navlinks icon padding" title="10px" content="10px">
  340. <meta name="select:navlinks icon padding" title="12px" content="12px">
  341. <meta name="select:navlinks icon padding" title="14px" content="14px">
  342.  
  343. <meta name="select:navlinks icon size" title="12px" content="12px">
  344. <meta name="select:navlinks icon size" title="10px" content="10px">
  345. <meta name="select:navlinks icon size" title="14px" content="14px">
  346. <meta name="select:navlinks icon size" title="16px" content="16px">
  347.  
  348. <meta name="select:sidebar 1 row spacing" title="10px" content="10px">
  349. <meta name="select:sidebar 1 row spacing" title="4px" content="4px">
  350. <meta name="select:sidebar 1 row spacing" title="6px" content="6px">
  351. <meta name="select:sidebar 1 row spacing" title="8px" content="8px">
  352. <meta name="select:sidebar 1 row spacing" title="12px" content="12px">
  353. <meta name="select:sidebar 1 row spacing" title="14px" content="14px">
  354. <meta name="select:sidebar 1 row spacing" title="16px" content="16px">
  355. <meta name="select:sidebar 1 row spacing" title="18px" content="18px">
  356. <meta name="select:sidebar 1 row spacing" title="20px" content="20px">
  357.  
  358. <meta name="select:sidebar 1 image width" title="120px" content="120px">
  359. <meta name="select:sidebar 1 image width" title="60px" content="60px">
  360. <meta name="select:sidebar 1 image width" title="80px" content="80px">
  361. <meta name="select:sidebar 1 image width" title="100px" content="100px">
  362. <meta name="select:sidebar 1 image width" title="140px" content="140px">
  363. <meta name="select:sidebar 1 image width" title="160px" content="160px">
  364. <meta name="select:sidebar 1 image width" title="180px" content="180px">
  365. <meta name="select:sidebar 1 image width" title="200px" content="200px">
  366.  
  367. <meta name="select:sidebar 1 image padding" title="12px" content="12px">
  368. <meta name="select:sidebar 1 image padding" title="4px" content="4px">
  369. <meta name="select:sidebar 1 image padding" title="6px" content="6px">
  370. <meta name="select:sidebar 1 image padding" title="8px" content="8px">
  371. <meta name="select:sidebar 1 image padding" title="10px" content="10px">
  372. <meta name="select:sidebar 1 image padding" title="14px" content="14px">
  373. <meta name="select:sidebar 1 image padding" title="16px" content="16px">
  374. <meta name="select:sidebar 1 image padding" title="18px" content="18px">
  375. <meta name="select:sidebar 1 image padding" title="20px" content="20px">
  376.  
  377. <meta name="select:custom links size" title="9px" content="9.5px">
  378. <meta name="select:custom links size" title="8px" content="8.5px">
  379. <meta name="select:custom links size" title="10px" content="10.5px">
  380. <meta name="select:custom links size" title="11px" content="11.5px">
  381. <meta name="select:custom links size" title="12px" content="12.5px">
  382. <meta name="select:custom links size" title="13px" content="13.5px">
  383. <meta name="select:custom links size" title="14px" content="14.5px">
  384. <meta name="select:custom links size" title="15px" content="15.5px">
  385.  
  386. <meta name="select:custom links padding" title="8px" content="8px">
  387. <meta name="select:custom links padding" title="4px" content="4px">
  388. <meta name="select:custom links padding" title="6px" content="6px">
  389. <meta name="select:custom links padding" title="10px" content="10px">
  390. <meta name="select:custom links padding" title="12px" content="12px">
  391. <meta name="select:custom links padding" title="14px" content="14px">
  392. <meta name="select:custom links padding" title="16px" content="16px">
  393. <meta name="select:custom links padding" title="18px" content="18px">
  394. <meta name="select:custom links padding" title="20px" content="20px">
  395.  
  396. <meta name="select:custom links spacing" title="8px" content="8px">
  397. <meta name="select:custom links spacing" title="4px" content="4px">
  398. <meta name="select:custom links spacing" title="6px" content="6px">
  399. <meta name="select:custom links spacing" title="10px" content="10px">
  400. <meta name="select:custom links spacing" title="12px" content="12px">
  401. <meta name="select:custom links spacing" title="14px" content="14px">
  402. <meta name="select:custom links spacing" title="16px" content="16px">
  403. <meta name="select:custom links spacing" title="18px" content="18px">
  404. <meta name="select:custom links spacing" title="20px" content="20px">
  405.  
  406. <!-- divider: sidebar 2 -->
  407. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7D0;" title="" content="">
  408. <meta name="select:sidebar 2 width" title="300px" content="300px">
  409. <meta name="select:sidebar 2 width" title="200px" content="200px">
  410. <meta name="select:sidebar 2 width" title="225px" content="225px">
  411. <meta name="select:sidebar 2 width" title="250px" content="250px">
  412. <meta name="select:sidebar 2 width" title="275px" content="275px">
  413. <meta name="select:sidebar 2 width" title="325px" content="325px">
  414. <meta name="select:sidebar 2 width" title="350px" content="350px">
  415. <meta name="select:sidebar 2 width" title="375px" content="375px">
  416. <meta name="select:sidebar 2 width" title="400px" content="400px">
  417.  
  418. <meta name="select:sidebar 2 title padding" title="12px" content="12px">
  419. <meta name="select:sidebar 2 title padding" title="6px" content="6px">
  420. <meta name="select:sidebar 2 title padding" title="8px" content="8px">
  421. <meta name="select:sidebar 2 title padding" title="10px" content="10px">
  422. <meta name="select:sidebar 2 title padding" title="14px" content="14px">
  423. <meta name="select:sidebar 2 title padding" title="16px" content="16px">
  424. <meta name="select:sidebar 2 title padding" title="18px" content="18px">
  425.  
  426. <meta name="select:sidebar 2 title size" title="10px" content="10.5px">
  427. <meta name="select:sidebar 2 title size" title="8px" content="8.5px">
  428. <meta name="select:sidebar 2 title size" title="9px" content="9.5px">
  429. <meta name="select:sidebar 2 title size" title="11px" content="11.5px">
  430. <meta name="select:sidebar 2 title size" title="12px" content="12.5px">
  431. <meta name="select:sidebar 2 title size" title="13px" content="13.5px">
  432. <meta name="select:sidebar 2 title size" title="14px" content="14.5px">
  433. <meta name="select:sidebar 2 title size" title="15px" content="15.5px">
  434. <meta name="select:sidebar 2 title size" title="16px" content="16.5px">
  435.  
  436. <meta name="select:sidebar 2 title bottom gap" title="none" content="0px">
  437. <meta name="select:sidebar 2 title bottom gap" title="4px" content="4px">
  438. <meta name="select:sidebar 2 title bottom gap" title="6px" content="6px">
  439. <meta name="select:sidebar 2 title bottom gap" title="8px" content="8px">
  440. <meta name="select:sidebar 2 title bottom gap" title="10px" content="10px">
  441. <meta name="select:sidebar 2 title bottom gap" title="12px" content="12px">
  442. <meta name="select:sidebar 2 title bottom gap" title="14px" content="14px">
  443. <meta name="select:sidebar 2 title bottom gap" title="16px" content="16px">
  444. <meta name="select:sidebar 2 title bottom gap" title="18px" content="18px">
  445. <meta name="select:sidebar 2 title bottom gap" title="20px" content="20px">
  446.  
  447. <meta name="select:sidebar 2 icon width" title="64px" content="64px">
  448. <meta name="select:sidebar 2 icon width" title="36px" content="36px">
  449. <meta name="select:sidebar 2 icon width" title="48px" content="48px">
  450. <meta name="select:sidebar 2 icon width" title="100px" content="100px">
  451. <meta name="select:sidebar 2 icon width" title="128px" content="128px">
  452. <meta name="select:sidebar 2 icon width" title="148px" content="148px">
  453.  
  454. <meta name="select:sidebar 2 icon padding" title="10px" content="10px">
  455. <meta name="select:sidebar 2 icon padding" title="4px" content="4px">
  456. <meta name="select:sidebar 2 icon padding" title="6px" content="6px">
  457. <meta name="select:sidebar 2 icon padding" title="8px" content="8px">
  458. <meta name="select:sidebar 2 icon padding" title="12px" content="12px">
  459. <meta name="select:sidebar 2 icon padding" title="14px" content="14px">
  460. <meta name="select:sidebar 2 icon padding" title="16px" content="16px">
  461. <meta name="select:sidebar 2 icon padding" title="18px" content="18px">
  462. <meta name="select:sidebar 2 icon padding" title="20px" content="20px">
  463.  
  464. <meta name="select:sidebar 2 box padding" title="14px" content="14px">
  465. <meta name="select:sidebar 2 box padding" title="4px" content="4px">
  466. <meta name="select:sidebar 2 box padding" title="6px" content="6px">
  467. <meta name="select:sidebar 2 box padding" title="8px" content="8px">
  468. <meta name="select:sidebar 2 box padding" title="10px" content="10px">
  469. <meta name="select:sidebar 2 box padding" title="12px" content="12px">
  470. <meta name="select:sidebar 2 box padding" title="16px" content="16px">
  471. <meta name="select:sidebar 2 box padding" title="18px" content="18px">
  472. <meta name="select:sidebar 2 box padding" title="20px" content="20px">
  473.  
  474. <meta name="select:sidebar 2 box font size" title="13px" content="12.5px">
  475. <meta name="select:sidebar 2 box font size" title="10px" content="9.5px">
  476. <meta name="select:sidebar 2 box font size" title="11px" content="10.5px">
  477. <meta name="select:sidebar 2 box font size" title="12px" content="11.5px">
  478. <meta name="select:sidebar 2 box font size" title="14px" content="13.5px">
  479. <meta name="select:sidebar 2 box font size" title="15px" content="14.5px">
  480. <meta name="select:sidebar 2 box font size" title="16px" content="15.5px">
  481.  
  482. <meta name="select:sidebar 2 row spacing" title="30px" content="30px">
  483. <meta name="select:sidebar 2 row spacing" title="10px" content="10px">
  484. <meta name="select:sidebar 2 row spacing" title="15px" content="15px">
  485. <meta name="select:sidebar 2 row spacing" title="20px" content="20px">
  486. <meta name="select:sidebar 2 row spacing" title="25px" content="25px">
  487. <meta name="select:sidebar 2 row spacing" title="35px" content="35px">
  488. <meta name="select:sidebar 2 row spacing" title="40px" content="40px">
  489. <meta name="select:sidebar 2 row spacing" title="45px" content="45px">
  490. <meta name="select:sidebar 2 row spacing" title="50px" content="50px">
  491. <meta name="select:sidebar 2 row spacing" title="55px" content="55px">
  492. <meta name="select:sidebar 2 row spacing" title="60px" content="60px">
  493.  
  494. <meta name="select:about box top gap" title="10px" content="10px">
  495. <meta name="select:about box top gap" title="none" content="0px">
  496. <meta name="select:about box top gap" title="2px" content="2px">
  497. <meta name="select:about box top gap" title="4px" content="4px">
  498. <meta name="select:about box top gap" title="6px" content="6px">
  499. <meta name="select:about box top gap" title="8px" content="8px">
  500. <meta name="select:about box top gap" title="12px" content="12px">
  501. <meta name="select:about box top gap" title="14px" content="14px">
  502. <meta name="select:about box top gap" title="16px" content="16px">
  503. <meta name="select:about box top gap" title="18px" content="18px">
  504. <meta name="select:about box top gap" title="20px" content="20px">
  505.  
  506. <meta name="select:about box center gap" title="10px" content="10px">
  507. <meta name="select:about box center gap" title="4px" content="4px">
  508. <meta name="select:about box center gap" title="6px" content="6px">
  509. <meta name="select:about box center gap" title="8px" content="8px">
  510. <meta name="select:about box center gap" title="12px" content="12px">
  511. <meta name="select:about box center gap" title="14px" content="14px">
  512. <meta name="select:about box center gap" title="16px" content="16px">
  513. <meta name="select:about box center gap" title="18px" content="18px">
  514. <meta name="select:about box center gap" title="20px" content="20px">
  515.  
  516. <meta name="select:about box padding" title="12px" content="12px">
  517. <meta name="select:about box padding" title="4px" content="4px">
  518. <meta name="select:about box padding" title="6px" content="6px">
  519. <meta name="select:about box padding" title="8px" content="8px">
  520. <meta name="select:about box padding" title="10px" content="10px">
  521. <meta name="select:about box padding" title="14px" content="14px">
  522. <meta name="select:about box padding" title="16px" content="16px">
  523. <meta name="select:about box padding" title="18px" content="18px">
  524. <meta name="select:about box padding" title="20px" content="20px">
  525.  
  526. <meta name="select:about box font size" title="12px" content="12px">
  527. <meta name="select:about box font size" title="10px" content="10px">
  528. <meta name="select:about box font size" title="11px" content="11px">
  529. <meta name="select:about box font size" title="13px" content="13px">
  530. <meta name="select:about box font size" title="14px" content="14px">
  531. <meta name="select:about box font size" title="15px" content="15px">
  532. <meta name="select:about box font size" title="16px" content="16px">
  533.  
  534. <meta name="select:activity label padding" title="10px" content="10px">
  535. <meta name="select:activity label padding" title="4px" content="4px">
  536. <meta name="select:activity label padding" title="6px" content="6px">
  537. <meta name="select:activity label padding" title="8px" content="8px">
  538. <meta name="select:activity label padding" title="12px" content="12px">
  539. <meta name="select:activity label padding" title="14px" content="14px">
  540. <meta name="select:activity label padding" title="16px" content="16px">
  541. <meta name="select:activity label padding" title="18px" content="18px">
  542. <meta name="select:activity label padding" title="20px" content="20px">
  543.  
  544. <meta name="select:activity label size" title="10px" content="10px">
  545. <meta name="select:activity label size" title="9px" content="9px">
  546. <meta name="select:activity label size" title="11px" content="11px">
  547. <meta name="select:activity label size" title="12px" content="12px">
  548. <meta name="select:activity label size" title="13px" content="13px">
  549. <meta name="select:activity label size" title="14px" content="14px">
  550.  
  551. <meta name="select:activity column gap" title="16px" content="16px">
  552. <meta name="select:activity column gap" title="4px" content="4px">
  553. <meta name="select:activity column gap" title="6px" content="6px">
  554. <meta name="select:activity column gap" title="8px" content="8px">
  555. <meta name="select:activity column gap" title="10px" content="10px">
  556. <meta name="select:activity column gap" title="12px" content="12px">
  557. <meta name="select:activity column gap" title="14px" content="14px">
  558. <meta name="select:activity column gap" title="18px" content="18px">
  559. <meta name="select:activity column gap" title="20px" content="20px">
  560.  
  561. <meta name="select:activity row gap" title="8px" content="8px">
  562. <meta name="select:activity row gap" title="4px" content="4px">
  563. <meta name="select:activity row gap" title="6px" content="6px">
  564. <meta name="select:activity row gap" title="10px" content="10px">
  565. <meta name="select:activity row gap" title="12px" content="12px">
  566. <meta name="select:activity row gap" title="14px" content="14px">
  567. <meta name="select:activity row gap" title="16px" content="16px">
  568. <meta name="select:activity row gap" title="18px" content="18px">
  569. <meta name="select:activity row gap" title="20px" content="20px">
  570.  
  571. <!-- post width -->
  572. <!-- divider: posts -->
  573. <meta name="select:&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;" title="" content="">
  574.  
  575. <meta name="select:post width" title="450px" content="450px">
  576. <meta name="select:post width" title="300px" content="300px">
  577. <meta name="select:post width" title="325px" content="325px">
  578. <meta name="select:post width" title="350px" content="350px">
  579. <meta name="select:post width" title="375px" content="375px">
  580. <meta name="select:post width" title="400px" content="400px">
  581. <meta name="select:post width" title="425px" content="425px">
  582. <meta name="select:post width" title="475px" content="475px">
  583. <meta name="select:post width" title="500px" content="500px">
  584. <meta name="select:post width" title="540px" content="540px">
  585. <meta name="select:post width" title="600px" content="600px">
  586. <meta name="select:post width" title="650px" content="650px">
  587. <meta name="select:post width" title="700px" content="700px">
  588.  
  589. <!-- post padding -->
  590. <meta name="select:post padding" title="20px" content="20px">
  591. <meta name="select:post padding" title="0px" content="0px">
  592. <meta name="select:post padding" title="10px" content="10px">
  593. <meta name="select:post padding" title="15px" content="15px">
  594. <meta name="select:post padding" title="25px" content="25px">
  595.  
  596. <!-- post spacing -->
  597. <meta name="select:post spacing" title="45px" content="45px">
  598. <meta name="select:post spacing" title="30px" content="30px">
  599. <meta name="select:post spacing" title="35px" content="35px">
  600. <meta name="select:post spacing" title="40px" content="40px">
  601. <meta name="select:post spacing" title="50px" content="50px">
  602. <meta name="select:post spacing" title="55px" content="55px">
  603. <meta name="select:post spacing" title="60px" content="60px">
  604. <meta name="select:post spacing" title="65px" content="65px">
  605. <meta name="select:post spacing" title="70px" content="70px">
  606. <meta name="select:post spacing" title="75px" content="75px">
  607. <meta name="select:post spacing" title="80px" content="80px">
  608.  
  609. <!-- photos spacing -->
  610. <meta name="select:photos spacing" title="4px" content="4px">
  611. <meta name="select:photos spacing" title="0px" content="0px">
  612. <meta name="select:photos spacing" title="2px" content="2px">
  613. <meta name="select:photos spacing" title="6px" content="6px">
  614. <meta name="select:photos spacing" title="8px" content="8px">
  615. <meta name="select:photos spacing" title="10px" content="10px">
  616.  
  617. <meta name="select:grayscale posts" title="no" content="no">
  618. <meta name="select:grayscale posts" title="yes" content="yes">
  619.  
  620. <!-- divider: music player -->
  621. <meta name="text:&#917536;&#x200B;" content="&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D40C;&#x1D414;&#x1D412;&#x1D408;&#x1D402;&#x20;&#x1D40F;&#x1D40B;&#x1D400;&#x1D418;&#x1D404;&#x1D411;&NewLine;">
  622. <meta name="text:song name" content="&#x6CAB;&#x96EA;&#xFE55;yama&#x2002;{&#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//open.spotify.com/track/43wA7GO59hkeojRFu6jU4n?si=a5dacf96c9014d91&#x22; aria-label=&#x22;Awayuki&#x22;&#x3E;&#x2745;&#x3C;/a&#x3E;}">
  623. <meta name="text:&#x29C;&#x1D0F;&#x1D21; &#x1D1B;&#x1D0F; &#x29F;&#x26A;&#x274;&#x1D0B; &#x1D0D;&#x1D1C;s&#x26A;&#x1D04;&#x3A;" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//linktr.ee/direct_file_links">
  624. <meta name="text:song file URL" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//rhizo.gitlab.io/m/Awayuki.m4a">
  625. <meta name="text:song volume" content="85%">
  626.  
  627. <!-- divider: custom links -->
  628. <meta name="text:&#917536;&#x200B;&#x200B;" content="&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C;&#x20;&#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&NewLine;">
  629. <meta name="text:link 1 name" content="link one">
  630. <meta name="text:link 1 URL" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//youtu.be/8AxV3y6W-Uk">
  631. <meta name="text:link 2 name" content="">
  632. <meta name="text:link 2 URL" content="">
  633. <meta name="text:link 3 name" content="">
  634. <meta name="text:link 3 URL" content="">
  635. <meta name="text:link 4 name" content="">
  636. <meta name="text:link 4 URL" content="">
  637. <meta name="text:link 5 name" content="">
  638. <meta name="text:link 5 URL" content="">
  639. <meta name="text:link 6 name" content="">
  640. <meta name="text:link 6 URL" content="">
  641. <meta name="text:link 7 name" content="">
  642. <meta name="text:link 7 URL" content="">
  643. <meta name="text:link 8 name" content="">
  644. <meta name="text:link 8 URL" content="">
  645.  
  646. <!-- divider: box: about -->
  647. <meta name="text:&#917536;&#x200B;&#x200B;&#x200B;" content="&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D401;&#x1D40E;&#x1D417;&#x3A;&#x20;&#x1D400;&#x1D401;&#x1D40E;&#x1D414;&#x1D413;&NewLine;">
  648. <meta name="text:about box title" content="About this blog">
  649. <meta name="text:about box text" content="It was &#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//quotemadness.com/post/175045702099&#x22;&#x3E;November&#x3C;/a&#x3E; &#x2013; the month of crimson sunsets, parting birds, deep, sad hymns of the sea, passionate wind-songs in the pines. &#x2014; &#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//quotemadness.com/post/175045702099&#x22;&#x3E;L.M. Montgomery&#x3C;/a&#x3E;">
  650.  
  651. <!-- divider: box: activity -->
  652. <meta name="text:&#917536;&#x200B;&#x200B;&#x200B;&#x200B;" content="&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D401;&#x1D40E;&#x1D417;&#x3A;&#x20;&#x1D400;&#x1D402;&#x1D413;&#x1D408;&#x1D415;&#x1D408;&#x1D413;&#x1D418;&NewLine;">
  653.  
  654. <meta name="text:activity box title" content="Currently">
  655.  
  656. <meta name="text:activity 1 label" content="Reading">
  657. <meta name="text:activity 1 text" content="&#x201C;&#x3C;span uppercase&#x3E;Boys in the Valley&#x3C;/span&#x3E;&#x201D; by Philip Fracassi">
  658. <meta name="text:activity 2 label" content="Listening">
  659. <meta name="text:activity 2 text" content="&#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//open.spotify.com/album/38eyJBCScUf3CnlH3JhYrc&#x22; uppercase&#x3E;SUPERBLOOM&#x3C;/a&#x3E; by &#x3C;span uppercase&#x3E;Silent Planet&#x3C;/span&#x3E;">
  660. <meta name="text:activity 3 label" content="Watching">
  661. <meta name="text:activity 3 text" content="&#x3C;span uppercase&#x3E;Bricky&#x3C;/span&#x3E;&#x27;s &#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//&#x77;&#x77;&#x77;.youtube.com/playlist?list=PLFL6F_Ec_mhMGH3Q6-omxoSC5_rdhBpaP&#x22; uppercase&#x3E;Elden Ring playthrough&#x3C;/a&#x3E;">
  662. <meta name="text:activity 4 label" content="Playing">
  663. <meta name="text:activity 4 text" content="&#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//wafflegame.net/daily&#x22; uppercase&#x3E;Waffle&#x3C;/a&#x3E;, &#x3C;a href=&#x22;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//store.steampowered.com/app/588650/Dead_Cells&#x22; uppercase&#x3E;Dead Cells&#x3C;/a&#x3E;">
  664.  
  665. <!-- divider: box: quote -->
  666. <meta name="text:&#917536;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;" content="&#x2726;&#x2002;&#x20;&#x2508;&#x2508;&#x2002;&#x20;&#x1D401;&#x1D40E;&#x1D417;&#x3A;&#x20;&#x1D410;&#x1D414;&#x1D40E;&#x1D413;&#x1D404;&NewLine;">
  667.  
  668. <meta name="text:quote box title" content="Quote of the year">
  669. <meta name="text:quote box text" content="i love her like the ocean&NewLine;&lt;br&gt;&NewLine;loves the moon - endlessly; tirelessly&NewLine;&lt;br&gt;&NewLine;heart swelling every night&NewLine;&lt;br&gt;&NewLine;as her gravity pulls me in like a tide&NewLine;&lt;br&gt;&NewLine;&lt;p align-right&gt;&mdash; &lt;a href=&quot;&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//sapphicssuggestion.tumblr.com/post/148460842344&quot; uppercase&gt;ocean-sapphics&lt;/a&gt;&lt;/p&gt;">
  670. {/block:Options}
  671.  
  672. <style>
  673. :root {
  674. --Autoplay-NPF-Videos:"no";
  675. --Padding-Around-Original-Photos:"yes";
  676.  
  677. /*----- GENERAL LAYOUT -----*/
  678. --Window-Margin:{select:screen gap};
  679. --Post-Side-Gaps:{select:post side gaps};
  680. --Rounded-Corners:{select:rounded corners};
  681.  
  682. /*----- FONT OPTIONS -----*/
  683. --Body-Font-Family:{select:body font};
  684. --Body-Font-Size:{select:font size};
  685. --Text-Color:{color:text};
  686. --Line-Height:1.6; /* number only, no units or suffix */
  687.  
  688. /*----- LEFT SIDEBAR OPTIONS -----*/
  689. --Left-Sidebar-Image-Width:{select:sidebar 1 image width};
  690. --Left-Sidebar-Image-Padding:{select:sidebar 1 image padding};
  691. --Left-Sidebar-Image-Border-Size:1px;
  692. --Left-Sidebar-Image-Border-Color:{color:sidebar 1 image border};
  693. --Left-Sidebar-Image-BG:{color:sidebar 1 image BG};
  694. --Left-Sidebar-Image-Total-Width:calc(var(--Left-Sidebar-Image-Width) + (var(--Left-Sidebar-Image-Padding) * 2) + (var(--Left-Sidebar-Image-Border-Size) * 2));
  695.  
  696. --Navlinks-Icon-Size:{select:navlinks icon size};
  697. --Navlinks-Icon-Color:{color:navlinks icons};
  698. --Navlinks-Icon-Padding:{select:navlinks icon padding};
  699. --Navlinks-Border-Size:1px;
  700. --Navlinks-Border-Color:{color:navlinks border};
  701. --Navlinks-BG:{color:navlinks BG};
  702. --Navlinks-Each-Total-Width:calc(var(--Navlinks-Icon-Size) + (var(--Navlinks-Icon-Padding) * 2) + (var(--Navlinks-Border-Size) * 2));
  703. --Navlinks-Spacing-MINIMUM:4px;
  704.  
  705. --Navlinks-Hover-Border:{color:navlinks HOVER border};
  706. --Navlinks-Hover-BG:{color:navlinks HOVER BG};
  707. --Navlinks-Hover-Text:{color:navlinks HOVER text};
  708. --Navlinks-Hover-Speed:0.5s;
  709.  
  710. --Custom-Links-Border-Size:1px;
  711. --Custom-Links-Border-Color:{color:custom links border};
  712. --Custom-Links-Padding-X:{select:custom links padding};
  713. --Custom-Links-Padding-Y:calc({select:custom links padding} - 2px);
  714. --Custom-Links-BG:{color:custom links BG};
  715. --Custom-Links-Font-Family:var(--Caps-Font-Family);
  716. --Custom-Links-Size:{select:custom links size};
  717. --Custom-Links-Text-Color:{color:custom links text};
  718. --Custom-Links-Spacing:{select:custom links spacing};
  719.  
  720. --Custom-Links-Hover-Border:{color:custom links HOVER border};
  721. --Custom-Links-Hover-BG:{color:custom links HOVER BG};
  722. --Custom-Links-Hover-Text:{color:custom links HOVER text};
  723. --Custom-Links-Hover-Speed:0.5s;
  724.  
  725. --Left-Sidebar-Row-Gaps:{select:sidebar 1 row spacing};
  726.  
  727. /*----- RIGHT SIDEBAR OPTIONS -----*/
  728. --Right-Sidebar-Box-Width:{select:sidebar 2 width};
  729. --Right-Sidebar-Heading-Border-Size:1px;
  730. --Right-Sidebar-Heading-Border-Color:{color:sidebar 2 title border};
  731. --Right-Sidebar-Heading-BG:{color:sidebar 2 title BG};
  732. --Right-Sidebar-Heading-Padding-X:{select:sidebar 2 title padding};
  733. --Right-Sidebar-Heading-Padding-Y:calc({select:sidebar 2 title padding} - 2px);
  734. --Right-Sidebar-Heading-Font-Family:var(--Caps-Font-Family);
  735. --Right-Sidebar-Heading-Size:{select:sidebar 2 title size};
  736. --Right-Sidebar-Heading-Text-Color:{color:sidebar 2 title};
  737.  
  738. --Right-Sidebar-Box-Top-Gap:{select:sidebar 2 title bottom gap};
  739. --Right-Sidebar-Box-Border-Size:1px;
  740. --Right-Sidebar-Box-Border-Color:{color:sidebar 2 box border};
  741. --Right-Sidebar-Box-BG:{color:sidebar 2 box BG};
  742. --Right-Sidebar-Box-Padding-X:{select:sidebar 2 box padding};
  743. --Right-Sidebar-Box-Padding-Y:calc({select:sidebar 2 box padding} - 2px);
  744. --Right-Sidebar-Box-Font-Size:{select:sidebar 2 box font size};
  745. --Right-Sidebar-Box-Text-Color:{color:sidebar 2 box text};
  746. --Right-Sidebar-Box-Text-Color-RGB:{RGBcolor:sidebar 2 box text};
  747. --Right-Sidebar-Box-Links:{color:sidebar 2 box links};
  748. --Right-Sidebar-Box-Links-Underline:{color:sidebar 2 box links underline};
  749. --Right-Sidebar-Box-Bold:{color:sidebar 2 box bold};
  750. --Right-Sidebar-Box-Italic:{color:sidebar 2 box italic};
  751.  
  752. --Right-Sidebar-Icon-Total-Width:calc(var(--Right-Sidebar-Icon-Width) + (var(--Right-Sidebar-Icon-Border-Size) * 2) + (var(--Right-Sidebar-Icon-Padding) * 2));
  753. --Right-Sidebar-Icon-Width:{select:sidebar 2 icon width};
  754. --Right-Sidebar-Icon-Border-Size:1px;
  755. --Right-Sidebar-Icon-Border-Color:var(--Right-Sidebar-Box-Border-Color);
  756. --Right-Sidebar-Icon-BG:var(--Right-Sidebar-Box-BG);
  757. --Right-Sidebar-Icon-Padding:{select:sidebar 2 icon padding};
  758.  
  759. --Desc-Top-Gap:{select:about box top gap};
  760. --Desc-Left-Gap:{select:about box center gap};
  761. --Desc-Border-Size:1px;
  762. --Desc-Border-Color:var(--Right-Sidebar-Box-Border-Color);
  763. --Desc-BG:var(--Right-Sidebar-Box-BG);
  764. --Desc-Padding-X:{select:about box padding};
  765. --Desc-Padding-Y:calc({select:about box padding} - 4px);
  766. --Desc-Font-Size:{select:about box font size};
  767. --Desc-Text-Color:var(--Right-Sidebar-Box-Text-Color);
  768. --Desc-Text-Color-RGB:var(--Right-Sidebar-Box-Text-Color-RGB);
  769.  
  770. --Activity-Label-Padding-X:{select:activity label padding};
  771. --Activity-Label-Padding-Y:calc({select:activity label padding} - 3px);
  772. --Activity-Label-BG:{color:activity label BG};
  773. --Activity-Label-Font-Family:var(--Caps-Font-Family);
  774. --Activity-Label-Font-Size:{select:activity label size};
  775. --Activity-Label-Text-Color:{color:activity label text};
  776.  
  777. --Activity-Column-Spacing:{select:activity column gap};
  778. --Activity-Row-Spacing:{select:activity row gap};
  779.  
  780. --Right-Sidebar-Row-Gaps:{select:sidebar 2 row spacing};
  781.  
  782. /*----- POST OPTIONS -----*/
  783. --Post-Borders-Outer-Size:1px;
  784. --Post-Borders-Outer:{color:post borders outer};
  785. --Post-Borders-Inner:{color:post borders inner};
  786. --Post-Width:{select:post width};
  787. --Post-Padding:{select:post padding};
  788. --Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + (var(--Post-Borders-Outer-Size) * 2));
  789. --Post-BG:{color:post};
  790. --Post-Spacing:{select:post spacing};
  791.  
  792. --Alt-Post-Borders-Inner:{color:alt post borders inner};
  793. --Alt-Post-BG:{color:alt post};
  794. --Alt-Post-Text-Color:{color:alt text};
  795.  
  796. /*----- CODE TEXT -----*/
  797. --Code-Block-Corner-Roundness:calc(var(--Rounded-Corners) / 2);
  798. --Code-Block-Border:var(--Alt-Post-Borders-Inner);
  799. --Code-Block-BG:var(--Alt-Post-BG);
  800. --Code-Block-Padding:1rem;
  801. --Code-Font-Family:"Fragment Mono";
  802. --Code-Font-Size:calc(var(--Body-Font-Size) * 0.85);
  803. --Code-Block-Text-Color:var(--Alt-Post-Text-Color);
  804.  
  805. /*----- HEADINGS -----*/
  806. --Heading-Font-Family:{select:heading font};
  807. --Heading-Letter-Spacing:0.025em;
  808. --Heading-Line-Height:1.55; /* number only, no units or suffix */
  809. --Heading-Color:{color:headings};
  810. --H1-Font-Size:calc(var(--Body-Font-Size) * 1.5);
  811. --H2-Font-Size:calc(var(--Body-Font-Size) * 1.35);
  812. --H3-Font-Size:calc(var(--Body-Font-Size) * 1.15);
  813. --H4-Font-Size:calc(var(--Body-Font-Size) * 1.05);
  814. --H5-Font-Size:calc(var(--Body-Font-Size) * 1.05);
  815. --H6-Font-Size:calc(var(--Body-Font-Size) * 1.05);
  816.  
  817. /*----- ALL CAPS TEXT -----*/
  818. --Caps-Font-Family:{select:uppercase font};
  819. --Caps-Font-Size:calc(var(--Body-Font-Size) - 2px);
  820. --Caps-Font-Weight:normal;
  821. --Caps-Letter-Spacing:0.025em;
  822.  
  823. /*----- TEXT FORMATTING -----*/
  824. --Bold:{color:bold};
  825. --Italic:{color:italic};
  826.  
  827. /*----- LINKS -----*/
  828. --Links-Color:{color:links};
  829. --Links-Underline-Size:1px;
  830. --Links-Underline:{color:links underline};
  831.  
  832. /*----- BLOCKQUOTES -----*/
  833. --Blockquote-Border-Size:1px;
  834. --Blockquote-Border-Color:var(--Post-Borders-Inner);
  835.  
  836. /*----- POST BUTTONS -----*/
  837. /* e.g. posts audio player, image alt text button */
  838. --Misc-Buttons-BG:{color:buttons bg};
  839. --Misc-Buttons-BG-RGB:{RGBcolor:buttons bg}; /* RGB version of ^ */
  840. --Misc-Buttons-Icon:{color:buttons icon};
  841.  
  842. /*----- CAPTIONS & REBLOGS -----*/
  843. --Reblogger-Icon-Size:30px;
  844. --Reblogger-Icon-Corner-Roundness:5px;
  845. --Reblogger-Icon-Gap-Right:9px;
  846. --Reblogger-Name-Font-Family:var(--Caps-Font-Family);
  847. --Reblogger-Name-Font-Size:var(--Caps-Font-Size);
  848. --Reblogger-Name-Color:{color:reblogs usernames};
  849. --Reblogger-Head-Bottom-Gap:1em;
  850. --Reblog-Borders-Size:1px;
  851. --Reblog-Borders:var(--Post-Borders-Inner);
  852.  
  853. /*----- PHOTO OPTIONS -----*/
  854. --Grayscale-Photos-Fade-Speed:0.5s;
  855. --Photoset-Image-Spacing:{select:photos spacing};
  856.  
  857. /*----- NPF OPTIONS -----*/
  858. --NPF-Images-Spacing:var(--Photoset-Image-Spacing);
  859. --NPF-Caption-Spacing:0px;
  860. --NPF-Move-1st-Photoset:"yes";
  861. --Text-Container-Selector:".caption";
  862. --Text-Reblogs-Selector:".reblogs";
  863.  
  864. /*----- POLL OPTIONS -----*/
  865. --Poll-Option-Background:{color:alt post};
  866. --Poll-Option-Text-Color:rgba({RGBcolor:alt text}, 0.9);
  867. --Poll-Option-Border:{color:alt post borders inner};
  868. --Poll-Option-Padding:calc(var(--Body-Font-Size) * 0.69);
  869. --Poll-Option-Roundness:5px;
  870. --Poll-Option-Spacing:0.85em;
  871.  
  872. /*----- QUOTE POST OPTIONS -----*/
  873. --Quote-Font-Family:var(--Heading-Font-Family);
  874. --Quote-Font-Size:var(--H2-Font-Size);
  875. --Quote-Letter-Spacing:var(--Heading-Letter-Spacing);
  876. --Quote-Line-Height:var(--Heading-Line-Height);
  877.  
  878. --Quote-Decor-Icon-Size:calc(var(--Quote-Font-Size) * 1.25);
  879. --Quote-Decor-Icon-Bottom-Gap:1em;
  880. --Quote-Decor-Icon-Side-Gaps:1em;
  881. --Quote-Decor-Border-Width-Thinner-By:calc(var(--Post-Padding) * 2);
  882. --Quote-Decor-Border-Width:calc(((var(--Post-Width) - var(--Quote-Decor-Icon-Size) - (var(--Quote-Decor-Icon-Side-Gaps) * 2)) / 2) - var(--Quote-Decor-Border-Width-Thinner-By));
  883. --Quote-Decor-Border-Size:1px;
  884. --Quote-Decor-Border-Color:var(--Post-Borders-Inner);
  885.  
  886. /*----- AUDIO POST OPTIONS -----*/
  887. --Audio-Post-Album-Cover-Size:84px;
  888. --Audio-Post-Album-Gutter:16px;
  889. --Audio-Post-Buttons-Size:calc(var(--Audio-Post-Album-Cover-Size) * 0.13);
  890. --Audio-Post-Buttons-BG:var(--Misc-Buttons-BG);
  891. --Audio-Post-Buttons-Color:var(--Misc-Buttons-Icon);
  892. --Audio-Post-Buttons-Padding:calc(var(--Audio-Post-Buttons-Size) * 1.25);
  893. --Audio-Post-Download-Button-Size:calc(var(--Body-Font-Size) * 1.5);
  894. --Audio-Post-Download-Button-Color:var(--Text-Color);
  895. --Audio-Post-Download-Button-Padding:4px;
  896. --Audio-Post-Volume:85%;
  897.  
  898. --SoundCloud-Player-Height:116px; /* 20px, 116px, or 500px */
  899. --SoundCloud-Show-Album-Image:"yes";
  900.  
  901. /*----- LINK POST OPTIONS -----*/
  902. --Link-Block-Image-Size:calc((var(--Post-Width) - (var(--Post-Padding) * 2) - 2px) * 0.16);
  903. --Link-Block-Image-Corner-Roundness:5px;
  904.  
  905. --Link-Block-Icon-Padding:calc(var(--H3-Font-Size) * 0.75);
  906. --Link-Block-Icon-BG:var(--Misc-Buttons-BG);
  907. --Link-Block-Icon-Size:calc(var(--H3-Font-Size));
  908. --Link-Block-Icon-Color:var(--Misc-Buttons-Icon);
  909. --Link-Block-Icon-Total-Size:calc(var(--Link-Block-Icon-Size) + (var(--Link-Block-Icon-Padding) * 2));
  910.  
  911. --Link-Block-Middle-Gap:1.15em;
  912. --Link-Block-URL-Top-Gap:0.85em;
  913.  
  914. /*----- ASK POST OPTIONS -----*/
  915. --Asker-Icon-Size:64px;
  916. --Asker-Icon-Corner-Roundness:3px;
  917. --Asker-Icon-Gap-Right:15px;
  918. --Asker-Name-Font-Family:var(--Caps-Font-Family);
  919. --Asker-Name-Font-Size:var(--Caps-Font-Size);
  920. --Asker-Name-Color:{color:reblogs usernames};
  921. --Asker-Name-Bottom-Gap:0.69em;
  922.  
  923. /*----- "KEEP READING" OPTIONS -----*/
  924. --Keep-Reading-Open-Dashboard:"no";
  925. --Keep-Reading-Open-In-New-Tab:"yes";
  926.  
  927. /*----- POST INFO / PERMALINK BAR -----*/
  928. --Permalink-Border-Size:1px;
  929. --Permalink-Border:{color:post info border};
  930. --Permalink-Padding-X:var(--Post-Padding);
  931. --Permalink-Padding-Y:var(--Post-Padding);
  932. --Permalink-BG:{color:post info BG};
  933. --Permalink-Text:{color:post info text};
  934. --Permalink-Text-Items-Spacing:15px;
  935.  
  936. --Post-Controls-Padding:7px;
  937. --Post-Controls-BG:{color:reblog and like BG};
  938. --Post-Controls-Border:{color:reblog and like border};
  939. --Post-Controls-Size:15px;
  940. --Post-Controls-Color:{color:reblog and like icon};
  941. --Post-Controls-Spacing:5px;
  942. --Liked-Button-Color:#ff7474;
  943.  
  944. /*----- PAGINATION -----*/
  945. --Pagination-Border-Size:1px;
  946. --Pagination-Border-Color:{color:pagination border};
  947. --Pagination-Padding:var(--Post-Padding);
  948. --Pagination-Arrows-Size:var(--H3-Font-Size);
  949. --Pagination-Numbers-Size:var(--Body-Font-Size);
  950. --Pagination-Items-Spacing:0.8em;
  951. --Pagination-Arrows-Bonus-Spacing:1em;
  952. --Pagination-Text-Color:{color:pagination text};
  953.  
  954. /*----- POST NOTES -----*/
  955. --Post-Notes-Row-Spacing:15px;
  956. --Post-Notes-Type-Icon-Size:18px;
  957. --Post-Notes-Type-Icon-Gap-Right:11px;
  958.  
  959. /*----- MUSIC PLAYER OPTIONS -----*/
  960. --MusicPlayer-Corner-Gap:{select:music player corner gap};
  961. --MusicPlayer-Buttons-Size:{select:music player buttons size};
  962. --MusicPlayer-Buttons-Color:{color:music player buttons};
  963. --MusicPlayer-Buttons-Touch-Padding:4px;
  964.  
  965. --MusicPlayer-Note-Size:calc(var(--MusicPlayer-Buttons-Size) * 0.85);
  966. --MusicPlayer-Note-Color:{color:music player note};
  967.  
  968. --MusicPlayer-Middle-Gap:9px;
  969.  
  970. --MusicPlayer-Font-Family:var(--Caps-Font-Family);
  971. --MusicPlayer-Font-Size:{select:song name size};
  972. --MusicPlayer-Text-Color:{color:song name};
  973. --MusicPlayer-Text-Color-RGB:{RGBcolor:song name};
  974.  
  975. /*----- SCROLLBAR OPTIONS -----*/
  976. --Scrollbar-Padding:13px;
  977. --Scrollbar-Thumb:{color:scrollbar};
  978.  
  979. /*----- TOOLTIPS OPTIONS -----*/
  980. --Tooltips-Border-Size:1px;
  981. --Tooltips-Border:{color:hover text border};
  982. --Tooltips-Padding-X:var(--Custom-Links-Padding-X);
  983. --Tooltips-Padding-Y:var(--Custom-Links-Padding-Y);
  984. --Tooltips-BG:{color:hover text BG};
  985. --Tooltips-Text-Color:{color:hover text};
  986. --Tooltips-Font-Size:calc(var(--Caps-Font-Size) - 1px);
  987. }/* end root */
  988.  
  989. html[post-padding="0px"]:root {
  990. --Post-Padding:20px;
  991. --Padding-Around-Original-Photos:"no";
  992. }
  993.  
  994. html[post-padding="20px"]:root {
  995. --Permalink-Padding-Y:calc(var(--Post-Padding) - 2px);
  996. }
  997.  
  998. /*------- TUMBLR CONTROLS -------*/
  999. iframe.tmblr-iframe.iframe-controls--desktop {
  1000. position:fixed!important;
  1001. left:initial!important;
  1002. top:0!important;
  1003. right:0!important;
  1004. margin-left:0px!important;
  1005. margin-top:5px!important;
  1006. margin-right:5px!important;
  1007. transform-origin:100% 0%!important;
  1008. transform:scale(0.8,0.8)!important;
  1009. }
  1010.  
  1011. html[tumblr-controls="black"] iframe.tmblr-iframe.iframe-controls--desktop {
  1012. filter:invert(100%) hue-rotate(180deg)!important;
  1013. }
  1014.  
  1015. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  1016. display:none!important;
  1017. visibility:hidden!important;
  1018. height:0!important;
  1019. }
  1020.  
  1021. /*------- BASICS -------*/
  1022. * {
  1023. box-sizing:border-box;
  1024. }
  1025.  
  1026. body {
  1027. margin:0;
  1028. background-color:{color:background};
  1029. background-image:url({image:background image});
  1030. background-attachment:fixed;
  1031. background-position:center;
  1032. font-family:var(--Body-Font-Family), Helvetica, sans-serif;
  1033. word-wrap:break-word;
  1034. font-size:var(--Body-Font-Size);
  1035. line-height:var(--Line-Height);
  1036. color:var(--Text-Color);
  1037. }
  1038.  
  1039. html[bg-mode="full"] body {
  1040. background-size:cover;
  1041. background-repeat:no-repeat;
  1042. }
  1043.  
  1044. html[bg-mode="small"] body {
  1045. background-repeat:repeat;
  1046. }
  1047.  
  1048. .no-overscroll {
  1049. overscroll-behavior:none;
  1050. }
  1051.  
  1052. [class^="mgc_"]:before, [class*=" mgc_"]:before {
  1053. color:inherit;
  1054. }
  1055.  
  1056. /*------- BODY FONT -------*/
  1057. html[body-font="Plus Jakarta Sans"]{
  1058. letter-spacing:0.005em;
  1059. word-spacing:0.08em;
  1060. }
  1061.  
  1062. html[body-font="Manrope"]{
  1063. letter-spacing:0.02em;
  1064. word-spacing:0.05em;
  1065. }
  1066.  
  1067. html[body-font="Instrument Sans"],
  1068. html[body-font="Libre Franklin"]{
  1069. letter-spacing:0.005em;
  1070. word-spacing:0.03em;
  1071. }
  1072.  
  1073. /*------- HEADINGS -------*/
  1074. h1, h2, h3, h4, h5, h6 {
  1075. font-family:var(--Heading-Font-Family);
  1076. font-weight:normal;
  1077. line-height:var(--Heading-Line-Height);
  1078. }
  1079.  
  1080. h1, h2:first-child:only-of-type,
  1081. .npf_quote, .npf-link-block .bottom .description {
  1082. font-size:calc(var(--H1-Font-Size) - 2px);
  1083. text-transform:uppercase;
  1084. letter-spacing:var(--Caps-Letter-Spacing);
  1085. word-spacing:0;
  1086. }
  1087.  
  1088. h1, h2:first-child:only-of-type,
  1089. .npf-link-block .bottom .description {
  1090. color:var(--Heading-Color)!important;
  1091. }
  1092.  
  1093. h1, h2:first-child:only-of-type {
  1094. text-align:center;
  1095. }
  1096.  
  1097. .add-padding + .caption .reblog-content > h2:first-child:only-of-type {
  1098. text-align:initial;
  1099. }
  1100.  
  1101. h2 {
  1102. font-size:var(--H2-Font-Size);
  1103. }
  1104.  
  1105. h3 {
  1106. font-size:var(--H3-Font-Size);
  1107. }
  1108.  
  1109. h4 {
  1110. font-size:var(--H4-Font-Size);
  1111. }
  1112.  
  1113. h5 {
  1114. font-size:var(--H5-Font-Size);
  1115. }
  1116.  
  1117. h6 {
  1118. font-size:var(--H6-Font-Size);
  1119. }
  1120.  
  1121. html[heading-font="Quicksand"]{
  1122. --Heading-Letter-Spacing:0.05em;
  1123. }
  1124.  
  1125. /*------- GENERAL -------*/
  1126. figure { margin:0; }
  1127.  
  1128. img {
  1129. object-fit:cover;
  1130. object-position:center;
  1131. }
  1132.  
  1133. img, iframe, video, canvas {
  1134. max-width:100%;
  1135. vertical-align:middle;
  1136. }
  1137.  
  1138. iframe, video, canvas {
  1139. width:100%;
  1140. }
  1141.  
  1142. /* bold text */
  1143. b, strong {
  1144. font-weight:600;
  1145. color:var(--Bold);
  1146. }
  1147.  
  1148. .post-body b, .post-body strong {
  1149. letter-spacing:0.02em;
  1150. }
  1151.  
  1152. /* italic text */
  1153. i:not([class]), em {
  1154. font-style:italic;
  1155. color:var(--Italic);
  1156. }
  1157.  
  1158. .flex {
  1159. display:flex;
  1160. flex-wrap:wrap;
  1161. }
  1162.  
  1163. .true-center {
  1164. align-items:center;
  1165. justify-content:center;
  1166. }
  1167.  
  1168. .self-y-center { align-self:center; }
  1169. .y-center { align-items:center; }
  1170. .x-center { justify-content:center; }
  1171.  
  1172. .sr-text {
  1173. border:0;
  1174. clip:rect(1px, 1px, 1px, 1px);
  1175. clip-path:inset(50%);
  1176. height:1px;
  1177. margin:-1px;
  1178. overflow:hidden;
  1179. padding:0;
  1180. position:absolute;
  1181. width:1px;
  1182. word-wrap:normal !important;
  1183. }
  1184.  
  1185. p:empty, .caption:empty, .reblogs:empty {
  1186. display:none;
  1187. }
  1188.  
  1189. ul, ol {
  1190. padding-left:0;
  1191. margin-left:calc(0.5em + var(--Body-Font-Size) + 1em);
  1192. }
  1193.  
  1194. li {
  1195. padding-left:0.5em;
  1196. }
  1197.  
  1198. /* nested bullet lists */
  1199. ul ul, ol ol, ul ol, ol ul {
  1200. margin-left:calc(0.5em + var(--Body-Font-Size));
  1201. }
  1202.  
  1203. hr {
  1204. margin:var(--Post-Padding) auto;
  1205. display:block;
  1206. width:69%;
  1207. border:none;
  1208. height:1px;
  1209. background:var(--Post-Borders-Inner);
  1210. transform:perspective(0);
  1211. }
  1212.  
  1213. /*------- UPPERCASE FONT -------*/
  1214. html[uppercase-font="Quicksand"]{
  1215. --Caps-Letter-Spacing:0.06em;
  1216. }
  1217.  
  1218. html[uppercase-font="Golos Text"]{
  1219. --Caps-Letter-Spacing:0.04em;
  1220. }
  1221.  
  1222. html[uppercase-font="Poppins"]{
  1223. --Caps-Letter-Spacing:0.06em;
  1224. }
  1225.  
  1226. html[uppercase-font="Onest"],
  1227. html[uppercase-font="Figtree"]{
  1228. --Caps-Letter-Spacing:0.05em;
  1229. }
  1230.  
  1231. html[uppercase-font="Inter"]{
  1232. --Caps-Font-Size:calc(var(--Body-Font-Size) - 2px);
  1233. --Caps-Letter-Spacing:0.06em;
  1234. }
  1235.  
  1236. /* font-weight:600 */
  1237. html[uppercase-font="Inter"],
  1238. html[uppercase-font="Quicksand"],
  1239. html[uppercase-font="Onest"],
  1240. html[uppercase-font="Figtree"]{
  1241. --Caps-Font-Weight:600;
  1242. }
  1243.  
  1244. /*------- TEXT HIGHLIGHT -------*/
  1245. ::selection {
  1246. background:{color:text highlight BG};
  1247. color:{color:text highlighted};
  1248. }
  1249.  
  1250. ::-moz-selection {
  1251. background:{color:text highlight BG};
  1252. color:{color:text highlighted};
  1253. }
  1254.  
  1255. /*------- SCROLLBAR -------*/
  1256. @-moz-document url-prefix(){
  1257. * {
  1258. scrollbar-width:thin; /* firefox only */
  1259. }
  1260. }
  1261.  
  1262. ::-webkit-scrollbar {
  1263. width:var(--Scrollbar-Padding);
  1264. height:var(--Scrollbar-Padding);
  1265. background-color:transparent;
  1266. }
  1267.  
  1268. ::-webkit-scrollbar-thumb {
  1269. background-color:var(--Scrollbar-Thumb);
  1270. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  1271. background-clip:padding-box;
  1272. }
  1273.  
  1274. ::-webkit-scrollbar-corner {
  1275. background:transparent;
  1276. }
  1277.  
  1278. /*------- LINKS -------*/
  1279. a {
  1280. text-decoration:none;
  1281. color:var(--Links-Color);
  1282. }
  1283.  
  1284. /* link underlines */
  1285. .desc a, .normal-box a,
  1286. .quote-source a,
  1287. .posts.brief a,
  1288. .original-post a[href]:not(.aud-gen a, .reblog-header a.tumblr_blog, .poll-post a, .npf-link-block a),
  1289. .original-post a[title]:not(.aud-gen a, .reblog-header a.tumblr_blog, .poll-post a, .npf-link-block a),
  1290. .reblog-content a[href]:not(.aud-gen a, .reblog-header a.tumblr_blog, .poll-post a, .npf-link-block a),
  1291. .reblog-content a[title]:not(.aud-gen a, .reblog-header a.tumblr_blog, .poll-post a, .npf-link-block a){
  1292. padding-bottom:1px;
  1293. border-bottom:var(--Links-Underline-Size) solid var(--Links-Underline);
  1294. }
  1295.  
  1296. /*------- BLOCKQUOTES -------*/
  1297. blockquote {
  1298. padding-left:calc((var(--Reblogger-Icon-Size) / 2) + var(--Reblogger-Icon-Gap-Right) - 1px);
  1299. border-left:var(--Blockquote-Border-Size) solid var(--Blockquote-Border-Color);
  1300. margin-right:0;
  1301. margin-left:calc(var(--Reblogger-Icon-Size) / 2);
  1302. }
  1303.  
  1304. blockquote p {
  1305. padding:0!important;
  1306. }
  1307.  
  1308. /*------- CODE TEXT -------*/
  1309. pre, code, .npf_chat:not([data-npf*='{"subtype":"chat"}']){
  1310. background:var(--Code-Block-BG);
  1311. border:1px solid var(--Code-Block-Border);
  1312. font-family:var(--Code-Font-Family), monospace!important;
  1313. font-weight:var(--Caps-Font-Weight)!important;
  1314. font-size:var(--Code-Font-Size)!important;
  1315. color:var(--Code-Block-Text-Color)!important;
  1316. }
  1317.  
  1318. pre, .npf_chat:not([data-npf*='{"subtype":"chat"}']) {
  1319. padding:var(--Code-Block-Padding);
  1320. border-radius:var(--Code-Block-Corner-Roundness);
  1321. white-space:pre-wrap;
  1322. }
  1323.  
  1324. code:not(pre code){
  1325. --urr:calc((var(--Code-Font-Size) * var(--Line-Height)) - var(--Code-Font-Size));
  1326. --uhh:calc(var(--urr) / 2);
  1327. border-radius:3px;
  1328. padding:calc(var(--uhh) - 0.5px) calc(var(--uhh) + 2px);
  1329. white-space:nowrap;
  1330. }
  1331.  
  1332. /*------- MASK SVGS -------*/
  1333. .play-icon, .pause-icon {
  1334. -webkit-mask-repeat:no-repeat;
  1335. mask-repeat:no-repeat;
  1336. -webkit-mask-position:center;
  1337. mask-position:center;
  1338. -webkit-mask-size:contain;
  1339. mask-size:contain;
  1340. }
  1341.  
  1342. /*------- PSEUDO ICONS -------*/
  1343. .quote-container:before,
  1344. .npf-link-block .poster:after,
  1345. .npf-link-block .bottom .site-name:before,
  1346. ol.notes li > span.action > a:first-of-type:before {
  1347. font-style: normal;
  1348. font-weight: normal;
  1349. font-variant: normal;
  1350. text-transform: none;
  1351. line-height: 1;
  1352. -webkit-font-smoothing: antialiased;
  1353. -moz-osx-font-smoothing: grayscale;
  1354. speak: never;
  1355. }
  1356.  
  1357. /*------- MAIN CONTAINER -------*/
  1358. main {
  1359. width:100%;
  1360. width:fit-content; /* might not work for all browsers yet so 100% was a fallback */
  1361. padding:0 4vmax;
  1362. margin:auto;
  1363. }
  1364.  
  1365. main.flex {
  1366. align-items:flex-start;
  1367. flex-wrap:nowrap;
  1368. gap:0 var(--Post-Side-Gaps);
  1369. }
  1370.  
  1371. /*------- SIDEBARS -------*/
  1372. .sidebar {
  1373. position:sticky;
  1374. height:100vh;
  1375. top:0;
  1376. }
  1377.  
  1378. /*------- LEFT SIDEBAR -------*/
  1379. .sidebar.left {
  1380. }
  1381.  
  1382. .sidebar.left > .inner {
  1383. display:flex;
  1384. flex-direction:column;
  1385. gap:var(--Left-Sidebar-Row-Gaps) 0;
  1386. }
  1387.  
  1388. .sidebar .sidebar-image {
  1389. margin-left:auto;
  1390. margin-right:auto;
  1391. width:var(--Left-Sidebar-Image-Total-Width);
  1392. height:var(--Left-Sidebar-Image-Total-Width);
  1393. border:var(--Left-Sidebar-Image-Border-Size) solid var(--Left-Sidebar-Image-Border-Color);
  1394. background:var(--Left-Sidebar-Image-BG);
  1395. border-radius:var(--Rounded-Corners);
  1396. box-sizing:border-box;
  1397. }
  1398.  
  1399. .sidebar .sidebar-image[img*="//assets.tumblr.com/images/x.gif"]{
  1400. display:none;
  1401. }
  1402.  
  1403. .sidebar .sidebar-image img {
  1404. width:var(--Left-Sidebar-Image-Width);
  1405. height:auto;
  1406. border-radius:calc(var(--Rounded-Corners) / 2);
  1407. }
  1408.  
  1409. .navlinks {
  1410. justify-content:space-between;
  1411. gap:var(--Navlinks-Spacing-MINIMUM);
  1412. }
  1413.  
  1414. .navlinks > a {
  1415. display:flex;
  1416. align-items:center;
  1417. justify-content:center;
  1418. width:var(--Navlinks-Each-Total-Width);
  1419. height:var(--Navlinks-Each-Total-Width);
  1420. border:var(--Navlinks-Border-Size) solid var(--Navlinks-Border-Color);
  1421. background:var(--Navlinks-BG);
  1422. border-radius:calc(var(--Rounded-Corners) / 2);
  1423. transition:all var(--Navlinks-Hover-Speed) ease-in-out;
  1424. box-sizing:border-box;
  1425. }
  1426.  
  1427. .navlinks > a > *:first-child {
  1428. display:block;
  1429. font-size:var(--Navlinks-Icon-Size);
  1430. color:var(--Navlinks-Icon-Color);
  1431. line-height:0;
  1432. }
  1433.  
  1434. .navlinks > a:hover {
  1435. border-color:var(--Navlinks-Hover-Border);
  1436. background:var(--Navlinks-Hover-BG);
  1437. color:var(--Navlinks-Hover-Text);
  1438. }
  1439.  
  1440. .custom-links {
  1441. display:flex;
  1442. flex-direction:column;
  1443. gap:var(--Custom-Links-Spacing);
  1444. }
  1445.  
  1446. .custom-links > a {
  1447. border:var(--Custom-Links-Border-Size) solid var(--Custom-Links-Border-Color);
  1448. padding:var(--Custom-Links-Padding-Y) var(--Custom-Links-Padding-X);
  1449. background:var(--Custom-Links-BG);
  1450. border-radius:calc(var(--Rounded-Corners) / 2);
  1451. font-family:var(--Custom-Links-Font-Family);
  1452. font-weight:var(--Caps-Font-Weight);
  1453. font-size:var(--Custom-Links-Size);
  1454. text-transform:uppercase;
  1455. word-spacing:0;
  1456. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.09em);
  1457. color:var(--Custom-Links-Text-Color);
  1458. transition:all var(--Custom-Links-Hover-Speed) ease-in-out;
  1459. text-align:center;
  1460. }
  1461.  
  1462. .custom-links > a:hover {
  1463. border-color:var(--Custom-Links-Hover-Border);
  1464. background:var(--Custom-Links-Hover-BG);
  1465. color:var(--Custom-Links-Hover-Text);
  1466. }
  1467.  
  1468. /*------- RIGHT SIDEBAR -------*/
  1469. .sidebar.right .section {
  1470.  
  1471. }
  1472.  
  1473. .sidebar.right > .inner {
  1474. display:flex;
  1475. flex-direction:column;
  1476. gap:var(--Right-Sidebar-Row-Gaps) 0;
  1477. }
  1478.  
  1479. .sidebar.right .section {
  1480. width:var(--Right-Sidebar-Box-Width);
  1481. }
  1482.  
  1483. .sidebar.right .section > h3:first-child {
  1484. position:relative;
  1485. margin:0;
  1486. border:var(--Right-Sidebar-Heading-Border-Size) solid var(--Right-Sidebar-Heading-Border-Color);
  1487. background:var(--Right-Sidebar-Heading-BG);
  1488. padding:var(--Right-Sidebar-Heading-Padding-Y) var(--Right-Sidebar-Heading-Padding-X);
  1489. border-radius:var(--Rounded-Corners);
  1490. font-family:var(--Right-Sidebar-Heading-Font-Family);
  1491. font-weight:var(--Caps-Font-Weight);
  1492. font-size:var(--Right-Sidebar-Heading-Size);
  1493. text-transform:uppercase;
  1494. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.125em);
  1495. word-spacing:0;
  1496. color:var(--Right-Sidebar-Heading-Text-Color);
  1497. text-align:center;
  1498. }
  1499.  
  1500. html[uppercase-font="Inter"] .sidebar.right .section > h3:first-child {
  1501. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.08em)!important;
  1502. }
  1503.  
  1504. .sidebar.right .section h3 + .av {
  1505. margin-top:var(--Desc-Top-Gap);
  1506. }
  1507.  
  1508. .sidebar.right .section .av {
  1509. gap:0 var(--Desc-Left-Gap);
  1510. }
  1511.  
  1512. .sidebar.right .section .icon-wrap {
  1513. width:var(--Right-Sidebar-Icon-Total-Width);
  1514. height:var(--Right-Sidebar-Icon-Total-Width);
  1515. border:var(--Right-Sidebar-Icon-Border-Size) solid var(--Right-Sidebar-Icon-Border-Color);
  1516. background:var(--Right-Sidebar-Icon-BG);
  1517. border-radius:var(--Rounded-Corners);
  1518. box-sizing:border-box;
  1519. }
  1520.  
  1521. .sidebar.right .section[img*="//assets.tumblr.com/images/x.gif"] .icon-wrap {
  1522. display:none;
  1523. }
  1524.  
  1525. .sidebar.right .section img {
  1526. width:var(--Right-Sidebar-Icon-Width);
  1527. height:var(--Right-Sidebar-Icon-Width);
  1528. border-radius:calc(var(--Rounded-Corners) / 2);
  1529. }
  1530.  
  1531. .desc-wrap-a {
  1532. flex:1;
  1533. height:var(--Right-Sidebar-Icon-Total-Width);
  1534. border:var(--Desc-Border-Size) solid var(--Desc-Border-Color);
  1535. padding:var(--Desc-Padding-Y) var(--Desc-Padding-X);
  1536. background:var(--Desc-BG);
  1537. border-radius:var(--Rounded-Corners);
  1538. box-sizing:border-box;
  1539. overflow:auto;
  1540. --Scrollbar-Thumb:rgba(var(--Desc-Text-Color-RGB),0.3);
  1541. }
  1542.  
  1543. .desc-wrap-b {
  1544. font-size:var(--Desc-Font-Size);
  1545. color:var(--Desc-Text-Color);
  1546. }
  1547.  
  1548. .normal-box {
  1549. border:var(--Right-Sidebar-Box-Border-Size) solid var(--Right-Sidebar-Box-Border-Color);
  1550. padding:var(--Right-Sidebar-Box-Padding-Y) var(--Right-Sidebar-Box-Padding-X);
  1551. background:var(--Right-Sidebar-Box-BG);
  1552. font-size:var(--Right-Sidebar-Box-Font-Size);
  1553. border-radius:var(--Rounded-Corners);
  1554. color:var(--Right-Sidebar-Box-Text-Color);
  1555. }
  1556.  
  1557. h3 + .normal-box {
  1558. margin-top:calc(var(--Right-Sidebar-Box-Top-Gap) - var(--Right-Sidebar-Heading-Border-Size));
  1559. }
  1560.  
  1561. .t-table {
  1562. display:table;
  1563. margin:calc(0px - var(--Activity-Row-Spacing)) calc(0px - var(--Activity-Column-Spacing));
  1564. border-spacing:var(--Activity-Column-Spacing) var(--Activity-Row-Spacing);
  1565. border-collapse:initial;
  1566. }
  1567.  
  1568. .t-row {
  1569. display:table-row;
  1570. }
  1571.  
  1572. .t-row > .t-cell {
  1573. display:table-cell;
  1574. vertical-align:top;
  1575. }
  1576.  
  1577. .normal-box label {
  1578. display:inline-block;
  1579. padding:var(--Activity-Label-Padding-Y) var(--Activity-Label-Padding-X);
  1580. background:var(--Activity-Label-BG);
  1581. border-radius:calc(var(--Rounded-Corners) / 2);
  1582. font-family:var(--Activity-Label-Font-Family);
  1583. font-weight:var(--Caps-Font-Weight);
  1584. font-size:var(--Activity-Label-Font-Size);
  1585. text-transform:uppercase;
  1586. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.04em);
  1587. color:var(--Activity-Label-Text-Color);
  1588. cursor:text;
  1589. }
  1590.  
  1591. .normal-box [uppercase]{
  1592. font-family:var(--Caps-Font-Family);
  1593. font-weight:var(--Caps-Font-Weight);
  1594. font-size:calc(var(--Right-Sidebar-Box-Font-Size) - 2px);
  1595. text-transform:uppercase;
  1596. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.03em);
  1597. word-spacing:0;
  1598. }
  1599.  
  1600. html[uppercase-font="Poppins"] .normal-box [uppercase]{
  1601. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.015em)!important;
  1602. }
  1603.  
  1604. .t-row > .t-cell:not(:first-child){
  1605. --tot:calc(((var(--Right-Sidebar-Box-Font-Size) * var(--Line-Height)) - var(--Right-Sidebar-Box-Font-Size)) / 2);
  1606. padding-top:var(--tot);
  1607. }
  1608.  
  1609. .normal-box > blockquote {
  1610. padding:0;
  1611. margin:1em 0;
  1612. border:none;
  1613. }
  1614.  
  1615. .desc p:first-child,
  1616. .normal-box p:first-child,
  1617. .normal-box blockquote:first-child {
  1618. margin-top:0;
  1619. }
  1620.  
  1621. .desc p:last-child,
  1622. .normal-box p:last-child,
  1623. .normal-box blockquote:last-child {
  1624. margin-bottom:0;
  1625. }
  1626.  
  1627. .desc p:only-child,
  1628. .normal-box p:only-child,
  1629. .normal-box blockquote:only-child {
  1630. margin:0;
  1631. }
  1632.  
  1633. .normal-box a, .desc a {
  1634. color:var(--Right-Sidebar-Box-Links);
  1635. border-color:var(--Right-Sidebar-Box-Links-Underline);
  1636. }
  1637.  
  1638. .normal-box i:not([class]), .normal-box em,
  1639. .desc i:not([class]), .desc em {
  1640. color:var(--Right-Sidebar-Box-Italic);
  1641. }
  1642.  
  1643. .normal-box b, .normal-box strong,
  1644. .desc b, .desc strong {
  1645. color:var(--Right-Sidebar-Box-Bold);
  1646. }
  1647.  
  1648. [align-left]{ text-align:left; }
  1649. [align-center]{ text-align:center; }
  1650. [align-right]{ text-align:right; }
  1651.  
  1652. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/dxlru.png */
  1653. html[rounded-corners][sb2-normal-box-gap-y="0px"]
  1654. .sidebar.right .section:not(.about) > h3:first-child:not(:only-child){
  1655. border-radius:var(--Rounded-Corners) var(--Rounded-Corners) 0 0;
  1656. }
  1657.  
  1658. html[rounded-corners][sb2-normal-box-gap-y="0px"]
  1659. .sidebar.right .section:not(.about) > h3:first-child:not(:only-child) + * {
  1660. border-radius:0 0 var(--Rounded-Corners) var(--Rounded-Corners);
  1661. }
  1662.  
  1663. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/aifos.png */
  1664. html[rounded-corners][sb2-abt-box-top-gap="0px"]
  1665. .sidebar.right .section.about[img*="//assets.tumblr.com/images/x.gif"] > h3:first-child:not(:last-child):not(:only-child){
  1666. position:relative;
  1667. border-radius:var(--Rounded-Corners) var(--Rounded-Corners) 0 0;
  1668. }
  1669.  
  1670. html[rounded-corners][sb2-abt-box-top-gap="0px"]
  1671. .sidebar.right .section.about[img*="//assets.tumblr.com/images/x.gif"] .desc-wrap-a:not(:first-child):not(:only-child){
  1672. margin-top:calc(0px - var(--Desc-Border-Size));
  1673. border-radius:0 0 var(--Rounded-Corners) var(--Rounded-Corners);
  1674. height:auto;
  1675. max-height:none;
  1676. }
  1677.  
  1678. /*------- POSTS -------*/
  1679. section.all-posts {
  1680. /*width:calc(100% - var(--Post-Width-Total));*/
  1681. min-width:var(--Post-Width-Total);
  1682. margin:var(--Window-Margin) 0;
  1683. }
  1684.  
  1685. .posts, ol.notes {
  1686. position:relative;
  1687. margin-left:auto;
  1688. margin-right:auto;
  1689. width:var(--Post-Width-Total);
  1690. background:var(--Post-BG);
  1691. border:var(--Post-Borders-Outer-Size) solid var(--Post-Borders-Outer);
  1692. border-radius:var(--Rounded-Corners);
  1693. overflow:hidden;
  1694. }
  1695.  
  1696. .posts + .posts,
  1697. .posts + ol.notes {
  1698. margin-top:var(--Post-Spacing);
  1699. }
  1700.  
  1701. .posts img {
  1702. display:block;
  1703. }
  1704.  
  1705. .posts iframe,
  1706. .posts img {
  1707. max-width:100%;
  1708. box-sizing:border-box;
  1709. }
  1710.  
  1711. [post-type="text"] .original-post .reblog-content > p:first-child { margin-top:0; }
  1712. [post-type="text"] .original-post .reblog-content > p:only-child { margin:0; }
  1713. [post-type="text"] .original-post .reblog-content > p:last-child { margin-bottom:0; }
  1714.  
  1715. .add-padding {
  1716. padding:var(--Post-Padding);
  1717. padding-bottom:0;
  1718. }
  1719.  
  1720. .add-padding.with-bottom {
  1721. padding-bottom:var(--Post-Padding)!important;
  1722. }
  1723.  
  1724. /*------- IF PAGES DON'T EXIST -------*/
  1725. .posts.brief {
  1726. padding:var(--Post-Padding);
  1727. }
  1728.  
  1729. .posts.brief > h3 { margin:0 }
  1730. .posts.brief a.tag:before { content:"#" }
  1731. .posts.brief .search_query:before { content:"“" }
  1732. .posts.brief .search_query:after { content:"”" }
  1733.  
  1734. .posts.brief[class$="disabled"],
  1735. html:not([submit-page])[current-url="/submit"]
  1736. .posts.brief.submit-disabled ~ .posts,
  1737. html:not([ask-page])[current-url="/ask"]
  1738. .posts.brief.ask-disabled ~ .posts,
  1739. .posts.brief .search-disabled ~ * {
  1740. display:none;
  1741. }
  1742.  
  1743. html:not([submit-page])[current-url="/submit"]
  1744. .posts.brief.submit-disabled {
  1745. display:block;
  1746. }
  1747.  
  1748. html:not([ask-page])[current-url="/ask"]
  1749. .posts.brief.ask-disabled {
  1750. display:block;
  1751. }
  1752.  
  1753. /*----- MONOCHROME POSTS / GRAYSCALE POSTS -----*/
  1754. {block:IndexPage}
  1755. .post-body.yes-gray img,
  1756. .post-body.yes-gray .legacy-photo,
  1757. .post-body.yes-gray .legacy-video,
  1758. .post-body.yes-gray .npf_group,
  1759. .post-body.yes-gray .tmblr-full,
  1760. .post-body.yes-gray .npf-link-block .poster:after {
  1761. filter:grayscale(100%);
  1762. transition:filter var(--Grayscale-Photos-Fade-Speed) ease-in-out;
  1763. }
  1764.  
  1765. .posts:hover .post-body.yes-gray img,
  1766. .posts:hover .post-body.yes-gray .legacy-photo,
  1767. .posts:hover .post-body.yes-gray .legacy-video,
  1768. .posts:hover .post-body.yes-gray .npf_group,
  1769. .posts:hover .post-body.yes-gray .tmblr-full,
  1770. .posts:hover .post-body.yes-gray .npf-link-block .poster:after {
  1771. filter:grayscale(0%);
  1772. }
  1773. {/block:IndexPage}
  1774.  
  1775. /*------- FIRST ITEM IN POST -------*/
  1776. .post-body > .add-padding:first-child > *:first-child {
  1777. --First-Item-Border-Radius:calc((var(--Rounded-Corners) / 2) + 2px);
  1778. border-radius:var(--First-Item-Border-Radius);
  1779. overflow:hidden;
  1780. }
  1781.  
  1782. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/dhxdb.png */
  1783. html[first-item-padding="no"] .post-body > .add-padding:first-child > *:first-child {
  1784. border-radius:var(--First-Item-Border-Radius) var(--First-Item-Border-Radius) 0 0;
  1785. }
  1786.  
  1787. /*------- CAPTION / REBLOGS -------*/
  1788. /* ignore this */
  1789. .invis {
  1790. opacity:0;
  1791. }
  1792.  
  1793. .invis, main:not(.invis){
  1794. transition:opacity 1s ease-in-out;
  1795. }
  1796.  
  1797. /* reblogger icon */
  1798. .reblog-header, .reblog-head {
  1799. display:flex;
  1800. align-items:center;
  1801. }
  1802.  
  1803. .reblog-header {
  1804. margin-bottom:var(--Reblogger-Head-Bottom-Gap);
  1805. }
  1806.  
  1807. .reblog-header img {
  1808. width:var(--Reblogger-Icon-Size);
  1809. height:var(--Reblogger-Icon-Size);
  1810. margin-right:var(--Reblogger-Icon-Gap-Right);
  1811. border-radius:var(--Reblogger-Icon-Corner-Roundness);
  1812. }
  1813.  
  1814. /* reblogger username */
  1815. .reblog-user, .reblog-content p > a.tumblr_blog, a.read_more, p.tmblr-attribution a {
  1816. font-family:var(--Reblogger-Name-Font-Family);
  1817. text-transform:uppercase;
  1818. font-size:var(--Reblogger-Name-Font-Size);
  1819. font-weight:var(--Caps-Font-Weight);
  1820. letter-spacing:var(--Caps-Letter-Spacing);
  1821. color:var(--Reblogger-Name-Color);
  1822. }
  1823.  
  1824. /* deactivated user */
  1825. .reblog-head.deactivated {
  1826. cursor:default;
  1827. }
  1828.  
  1829. .reblog-head .reblog-user + .deactivated {
  1830. margin-left:0.5em;
  1831. opacity:0.69;
  1832. }
  1833.  
  1834. .caption {
  1835. padding:0 var(--Post-Padding);
  1836. margin:var(--Post-Padding) 0;
  1837. }
  1838.  
  1839. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/m7tefRF9cLccwTAXa4U_X.png */
  1840. .npf_group + .caption,
  1841. .post-body > .tmblr-embed + .caption,
  1842. .legacy-video + .caption,
  1843. .legacy-photo + .caption,
  1844. .legacy-photoset + .caption {
  1845. margin-top:var(--Post-Padding);
  1846. }
  1847.  
  1848. .caption > .reblogs {
  1849. margin:0 calc(0px - var(--Post-Padding));
  1850. padding:0 var(--Post-Padding);
  1851. }
  1852.  
  1853. .caption > .reblogs + .reblogs {
  1854. margin-top:var(--Post-Padding);
  1855. padding-top:var(--Post-Padding);
  1856. border-top:var(--Reblog-Borders-Size) solid var(--Reblog-Borders);
  1857. }
  1858.  
  1859. .caption p:last-child,
  1860. .reblog-content p:last-child {
  1861. margin-bottom:0;
  1862. }
  1863.  
  1864. .reblog-header,
  1865. .reblog-content {
  1866. padding-bottom:0;
  1867. }
  1868.  
  1869. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/oynxq.png */
  1870. .post-body > .npf_group:first-child + .caption.original-post > .reblogs:only-child .reblog-content > p:first-child {
  1871. margin-top:0;
  1872. }
  1873.  
  1874. /*------- POLLS -------*/
  1875. .original-post > .poll-post > .poll-question:first-child,
  1876. .reblog-content > .poll-post > .poll-question:first-child {
  1877. margin-top:0;
  1878. }
  1879.  
  1880. .poll-question {
  1881. font-family:var(--Heading-Font-Family);
  1882. font-size:var(--H3-Font-Size)!important;
  1883. font-weight:normal!important;
  1884. line-height:var(--Heading-Line-Height);
  1885. margin-bottom:1.2em!important;
  1886. }
  1887.  
  1888. .poll-row {
  1889. display:block!important;
  1890. font-family:var(--Body-Font-Family)!important;
  1891. font-size:var(--Body-Font-Size)!important;
  1892. line-height:var(--Line-Height)!important;
  1893. background:var(--Poll-Option-Background)!important;
  1894. border:1px solid var(--Poll-Option-Border)!important;
  1895. border-radius:var(--Poll-Option-Roundness)!important;
  1896. padding:var(--Poll-Option-Padding)!important;
  1897. min-height:0!important;
  1898. color:var(--Poll-Option-Text-Color)!important;
  1899. font-weight:normal!important;
  1900. margin-bottom:var(--Poll-Option-Spacing)!important;
  1901. text-align:center;
  1902. }
  1903.  
  1904. .poll-date-start {
  1905. margin-top:1.2em;
  1906. }
  1907.  
  1908. .poll-date-start, .poll-date-end, .poll-see-results {
  1909. font-family:var(--Caps-Font-Family);
  1910. font-size:calc(var(--Caps-Font-Size) + 1px);
  1911. font-weight:var(--Caps-Font-Weight);
  1912. text-transform:uppercase;
  1913. letter-spacing:var(--Caps-Letter-Spacing);
  1914. text-align:center;
  1915. }
  1916.  
  1917. .poll-see-results {
  1918. margin-top:1em!important;
  1919. display:block;
  1920. }
  1921.  
  1922. /*------- PHOTO POSTS -------*/
  1923. .legacy-photo img {
  1924. cursor:pointer;
  1925. }
  1926.  
  1927. .legacy-photoset {
  1928. display:grid;
  1929. grid-gap:var(--Photoset-Image-Spacing)
  1930. }
  1931.  
  1932. .legacy-photoset > img {
  1933. display:none; /* handle loading */
  1934. }
  1935.  
  1936. .layout-row {
  1937. display:grid;
  1938. grid-gap:0 var(--Photoset-Image-Spacing);
  1939. }
  1940.  
  1941. .layout-row img {
  1942. width:100%;
  1943. height:100%;
  1944. cursor:pointer;
  1945. }
  1946.  
  1947. /*------- PHOTO LIGHTBOX -------*/
  1948. body[style*="overflow: hidden;"],
  1949. body[style*="overflow:hidden;"]{
  1950. overflow:inherit!important;
  1951. }
  1952.  
  1953. .tmblr-lightbox {
  1954. background:transparent!important;
  1955. }
  1956.  
  1957. .tmblr-lightbox .vignette {
  1958. background-image:none!important;
  1959. background-color:rgba({RGBcolor:background},0.69);
  1960. backdrop-filter:blur(3px)
  1961. }
  1962.  
  1963. .tmblr-lightbox .lightbox-image,
  1964. .tmblr-lightbox img {
  1965. box-shadow:none!important;
  1966. border-radius:var(--Rounded-Corners)!important;
  1967. }
  1968.  
  1969. .tmblr-lightbox img {
  1970. max-width:none;
  1971. }
  1972.  
  1973. /*------- QUOTE POSTS -------*/
  1974. .npf_quote {
  1975. font-family:var(--Quote-Font-Family)!important;
  1976. font-size:var(--Quote-Font-Size)!important;
  1977. font-weight:normal;
  1978. letter-spacing:var(--Quote-Letter-Spacing);
  1979. line-height:var(--Quote-Line-Height)!important;
  1980. }
  1981.  
  1982. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/rcxjv.png */
  1983. [post-type="quote"].previously-npf .reblogs.original-entry .reblog-header {
  1984. display:none;
  1985. }
  1986.  
  1987. blockquote.quote-text {
  1988. position:relative;
  1989. padding:0 1em;
  1990. border:none;
  1991. text-align:center;
  1992. }
  1993.  
  1994. .quote-container {
  1995. position:relative;
  1996. }
  1997.  
  1998. [post-type="quote"]:not(.previously-npf) .quote-container {
  1999. padding:0 var(--Post-Padding);
  2000. }
  2001.  
  2002. .quote-container:before {
  2003. position:absolute;
  2004. top:0;left:0;
  2005. content:"\efbe";
  2006. font-family:"tabler-icons";
  2007. font-size:var(--Quote-Decor-Icon-Size);
  2008. width:100%;
  2009. text-align:center;
  2010. }
  2011.  
  2012. blockquote.quote-text {
  2013. margin-left:0;
  2014. margin-right:0;
  2015. padding-top:calc(var(--Quote-Decor-Icon-Size) + var(--Quote-Decor-Icon-Bottom-Gap));
  2016. }
  2017.  
  2018. blockquote.quote-text:before {
  2019. content:"";
  2020. position:absolute;
  2021. top:0;left:0;
  2022. margin-top:calc((var(--Quote-Decor-Icon-Size) / 2) - (var(--Quote-Decor-Border-Size) / 2));
  2023. margin-left:var(--Quote-Decor-Border-Width-Thinner-By);
  2024. width:var(--Quote-Decor-Border-Width);
  2025. height:var(--Quote-Decor-Border-Size);
  2026. background:var(--Quote-Decor-Border-Color);
  2027. }
  2028.  
  2029. blockquote.quote-text:after {
  2030. content:"";
  2031. position:absolute;
  2032. top:0;right:0;
  2033. margin-top:calc((var(--Quote-Decor-Icon-Size) / 2) - (var(--Quote-Decor-Border-Size) / 2));
  2034. margin-right:var(--Quote-Decor-Border-Width-Thinner-By);
  2035. width:var(--Quote-Decor-Border-Width);
  2036. height:var(--Quote-Decor-Border-Size);
  2037. background:var(--Quote-Decor-Border-Color);
  2038. }
  2039.  
  2040. p.quote-source {
  2041. text-align:center;
  2042. }
  2043.  
  2044. /* legacy quote posts */
  2045. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/ijwxm.png */
  2046. [post-type="quote"]:not(.previously-npf) .quote-container ~ .caption > .reblogs:first-of-type[username="{Name}"]:not(.original-entry){
  2047. display:none;
  2048. }
  2049.  
  2050. /*------- LINK POSTS -------*/
  2051. [post-type="link"] .npf-link-block {
  2052. margin:0!important;
  2053. padding:var(--Post-Padding);
  2054. border:none!important;
  2055. border-radius:0;
  2056. }
  2057.  
  2058. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/tlqwb.png */
  2059. [post-type="link"] .npf-link-block + .caption {
  2060. margin-top:0;
  2061. border-top:var(--Reblog-Borders-Size) solid var(--Reblog-Borders);
  2062. padding-top:var(--Post-Padding);
  2063. }
  2064.  
  2065. [post-type="text"] .npf-link-block:not(.photo-origin){
  2066. margin:1em 0!important;
  2067. padding:1.2rem!important;
  2068. border-color:var(--Reblog-Borders)!important;
  2069. border-radius:var(--Rounded-Corners);
  2070. }
  2071.  
  2072. .npf-link-block > a {
  2073. display:grid;
  2074. grid-template-columns:var(--Link-Block-Image-Size) auto;
  2075. align-items:center;
  2076. grid-gap:var(--Link-Block-Middle-Gap);
  2077. }
  2078.  
  2079. .npf-link-block .poster {
  2080. position:relative!important;
  2081. height:0!important;
  2082. padding-bottom:100%!important;
  2083. background-clip:initial!important;
  2084. line-height:0!important;
  2085. border-radius:var(--Link-Block-Image-Corner-Roundness);
  2086. border:none!important;
  2087. }
  2088.  
  2089. /* if: link block does NOT have image [1/3] */
  2090. .npf-link-block .poster[style*="background-image:url('')"]{
  2091. background-image:url("//assets.tumblr.com/images/x.gif")!important;
  2092. }
  2093.  
  2094. /* if: link block does NOT have image [2/3] */
  2095. .npf-link-block:not(.has-poster) > a {
  2096. grid-template-columns:1fr;
  2097. justify-content:center;
  2098. text-align:center;
  2099. }
  2100.  
  2101. /* if: link block does NOT have image [3/3] */
  2102. .npf-link-block:not(.has-poster) .poster {
  2103. display:none;
  2104. }
  2105.  
  2106. .npf-link-block .poster:before {
  2107. display:none!important;
  2108. }
  2109.  
  2110. .npf-link-block .poster:after {
  2111. font-family:"evil-icons";
  2112. content:'\e815';
  2113.  
  2114. position:absolute;
  2115. top:50%;left:50%;
  2116. transform:translate(-50%,-50%);
  2117. padding:var(--Link-Block-Icon-Padding);
  2118. border-radius:100%;
  2119. background:var(--Link-Block-Icon-BG);
  2120. font-size:var(--Link-Block-Icon-Size);
  2121. color:var(--Link-Block-Icon-Color);
  2122. }
  2123.  
  2124. .npf-link-block .poster:before,
  2125. .npf-link-block .title {
  2126. position:absolute!important;
  2127. top:0!important;
  2128. }
  2129.  
  2130. /* link block description text */
  2131. .npf-link-block .bottom {
  2132. padding:0!important;
  2133. font-size:var(--Body-Font-Size)!important;
  2134. line-height:inherit!important;
  2135. }
  2136.  
  2137. .npf-link-block .title {
  2138. display:none!important;
  2139. }
  2140.  
  2141. .npf-link-block .bottom .description {
  2142. font-family:var(--Heading-Font-Family)!important;
  2143. font-size:var(--H3-Font-Size)!important;
  2144. text-transform:uppercase;
  2145. max-height:none!important;
  2146. line-height:var(--Heading-Line-Height)!important;
  2147. }
  2148.  
  2149. .npf-link-block .bottom .description:after {
  2150. content:"»";
  2151. margin-left:calc(var(--H3-Font-Size) * 0.35);
  2152. font-family:"Fragment Mono", monospace;
  2153. }
  2154.  
  2155. .npf-link-block .bottom .site-name {
  2156. font-family:var(--Caps-Font-Family)!important;
  2157. font-weight:var(--Caps-Font-Weight)!important;
  2158. font-size:var(--Caps-Font-Size)!important;
  2159. letter-spacing:var(--Caps-Letter-Spacing)!important;
  2160. line-height:1!important;
  2161. }
  2162.  
  2163. .npf-link-block .bottom .site-name:before {
  2164. display:inline-block;
  2165. margin-top:calc(var(--Caps-Font-Size) * -0.15);
  2166. vertical-align:middle;
  2167. font-family:"evil-icons";
  2168. content:'\e81e';
  2169.  
  2170. font-size:calc(var(--Caps-Font-Size) * 1.4);
  2171. -webkit-text-stroke-width:0.3px;
  2172. -webkit-text-stroke-color:currentColor;
  2173. margin-right:5px;
  2174. }
  2175.  
  2176. .npf-link-block .bottom > *:only-child { margin:0!important; }
  2177. .npf-link-block .bottom > * + .site-name {
  2178. margin-top:var(--Link-Block-URL-Top-Gap)!important;
  2179. margin-left:-1px;
  2180. }
  2181.  
  2182. /*------- VIDEO -------*/
  2183. p + .tmblr-embed {
  2184. margin-top:1em!important;
  2185. }
  2186.  
  2187. .tmblr-embed + .reblogs {
  2188. margin-top:var(--Post-Padding);
  2189. }
  2190.  
  2191. .caption > .tmblr-embed:first-child {
  2192. margin:calc(0px - var(--Post-Padding)) calc(0px - var(--Post-Padding)) auto calc(0px - var(--Post-Padding))!important;
  2193. }
  2194.  
  2195. .tumblr_video_container {
  2196. max-width:100%;
  2197. }
  2198.  
  2199. .vidyo-video-container {
  2200. --VIDYO-slider-area-transparency:69%;
  2201. }
  2202.  
  2203. /*------- AUDIO -------*/
  2204. audio[controls]{
  2205. display:none!important;
  2206. }
  2207.  
  2208. .aud-gen {
  2209. display:grid;
  2210. grid-template-columns:var(--Audio-Post-Album-Cover-Size) auto calc(var(--Audio-Post-Download-Button-Size) + (var(--Audio-Post-Download-Button-Padding) * 2));
  2211. grid-gap:0 var(--Audio-Post-Album-Gutter);
  2212. align-items:center;
  2213. }
  2214.  
  2215. .aud-gen + .aud-gen {
  2216. margin-top:1em;
  2217. }
  2218.  
  2219. .post-body > .aud-gen:first-child,
  2220. .post-body > .npf_group:first-child > .npf_audio:first-child .aud-gen {
  2221. padding:var(--Post-Padding);
  2222. }
  2223.  
  2224. .tmblr-audio-meta.audio-details {
  2225. padding:0!important;
  2226. }
  2227.  
  2228. .aud-gen + .caption:not(:empty){
  2229. margin-top:0;
  2230. }
  2231.  
  2232. .aud-gen + .caption:not(:empty),
  2233. [post-type="audio"].previously-npf .add-padding:has(.npf_group:not(:nth-child(n+2))) + .caption {
  2234. border-top:var(--Reblog-Borders-Size) solid var(--Reblog-Borders);
  2235. padding-top:var(--Post-Padding);
  2236. }
  2237.  
  2238. .aud-gen img {
  2239. border-radius:var(--Rounded-Corners)!important;
  2240. width:100%;
  2241. height:100%;
  2242. aspect-ratio:1/1;
  2243. object-fit:center;
  2244. }
  2245.  
  2246. .aud-gen img[src*="a/1x1.png"]{
  2247. height:calc((var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2)) + (10px * 2));
  2248. }
  2249.  
  2250. .aud-cover {
  2251. position:relative;
  2252. min-height:var(--Audio-Post-Album-Cover-Size);
  2253. }
  2254.  
  2255. /* flex, true center */
  2256. .aud-ctl, .q-play, .q-pause, .aud-dl {
  2257. display:flex;
  2258. align-items:center;
  2259. justify-content:center;
  2260. }
  2261.  
  2262. .aud-ctl > *, .q-play > *, .q-pause > *, .aud-dl > * {
  2263. flex-shrink:0;
  2264. }
  2265.  
  2266. .aud-ctl {
  2267. position:absolute;
  2268. top:0;left:0;
  2269. width:100%;
  2270. height:100%;
  2271. }
  2272.  
  2273. .q-play, .q-pause {
  2274. border-radius:100%;
  2275. line-height:0;
  2276. font-size:0;
  2277. vertical-align:middle;
  2278. border-radius:100%;
  2279. background:var(--Audio-Post-Buttons-BG);
  2280. width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  2281. height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  2282. cursor:pointer;
  2283. }
  2284.  
  2285. .q-pause { display:none; }
  2286.  
  2287. .aud-gen .play-icon,
  2288. .aud-gen .pause-icon {
  2289. background:var(--Audio-Post-Buttons-Color);
  2290. }
  2291.  
  2292. .aud-gen .play-icon {
  2293. width:var(--Audio-Post-Buttons-Size);
  2294. height:var(--Audio-Post-Buttons-Size);
  2295. -webkit-mask-image:var(--PlayIconMask);
  2296. mask-image:var(--PlayIconMask);
  2297. margin-left:1px;
  2298. }
  2299.  
  2300. .aud-gen .pause-icon {
  2301. width:calc(var(--Audio-Post-Buttons-Size) * 1.25);
  2302. height:calc(var(--Audio-Post-Buttons-Size) * 1.25);
  2303. -webkit-mask-image:var(--PauseIconMask);
  2304. mask-image:var(--PauseIconMask);
  2305. }
  2306.  
  2307. /*--- audio text ---*/
  2308. .aud-info > * + * {
  2309. margin-top:1px; /* row gap */
  2310. }
  2311.  
  2312. .aud-title {
  2313. font-family:var(--Caps-Font-Family);
  2314. font-size:calc(var(--Caps-Font-Size) + 1px);
  2315. font-weight:var(--Caps-Font-Weight);
  2316. text-transform:uppercase;
  2317. letter-spacing:var(--Caps-Letter-Spacing);
  2318. color:var(--Bold);
  2319. }
  2320.  
  2321. .aud-iframe {
  2322. display:none!important;
  2323. visibility:hidden!important;
  2324. }
  2325.  
  2326. /*-- audio download button --*/
  2327. .aud-dl {
  2328. padding:var(--Audio-Post-Download-Button-Padding) 0;
  2329. margin-right:calc(0px - var(--Audio-Post-Download-Button-Padding) - (var(--Audio-Post-Download-Button-Size) * 0.2));
  2330. }
  2331.  
  2332. .aud-dl .feather-icons {
  2333. font-size:var(--Audio-Post-Download-Button-Size);
  2334. color:var(--Audio-Post-Download-Button-Color);
  2335. }
  2336.  
  2337. /*-- other audio --*/
  2338. .spotify_audio_player,
  2339. .posts iframe[src*="soundcloud"]{
  2340. border:0;
  2341. }
  2342.  
  2343. .posts iframe[src*="soundcloud"]{
  2344. border-bottom-left-radius:3px;
  2345. overflow:hidden;
  2346. }
  2347.  
  2348. /* audio embeds in caption: spacing */
  2349. .caption figure[data-npf*='open.spotify.com']:not(:last-child),
  2350. .caption figure[data-npf*='soundcloud.com']:not(:last-child) iframe[src*='soundcloud']{
  2351. margin-bottom:1em;
  2352. }
  2353.  
  2354. .posts iframe[src*='open.spotify.com'][src*='track']:first-child,
  2355. .posts .spotify_audio_player[src*="track"]:first-child {
  2356. height:80px!important;
  2357. max-height:calc((var(--Post-Width)) * 0.69);
  2358. }
  2359.  
  2360. [post-type="audio"] .post-body > .npf_group.add-padding:first-child + .caption,
  2361. .posts iframe[src*="spotify.com"] + .caption,
  2362. .posts iframe[src*="soundcloud.com"] + .caption {
  2363. padding-top:var(--Post-Padding);
  2364. border-top:var(--Reblog-Borders-Size) solid var(--Reblog-Borders);
  2365. }
  2366.  
  2367. /*--------------------*/
  2368.  
  2369. .post-body > .npf_group.npf_audio:first-child {
  2370. padding:var(--Post-Padding);
  2371. }
  2372.  
  2373. .post-body > .npf_group.npf_audio:first-child:not(:last-child){
  2374. padding-bottom:0;
  2375. }
  2376.  
  2377. /*--------------------*/
  2378.  
  2379. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/innbv.png */
  2380. .npf_audio figure.sc-short {
  2381. position:relative;
  2382. z-index:0;
  2383. }
  2384.  
  2385. .npf_audio figure.sc-short:before {
  2386. content:"";
  2387. position:absolute;
  2388. top:0;left:0;
  2389. margin-top:1px;
  2390. width:20px;
  2391. height:20px;
  2392. border-radius:100%;
  2393. background:var(--Audio-Post-Buttons-BG);
  2394. z-index:-1;
  2395. }
  2396.  
  2397. /*------- CHAT POSTS -------*/
  2398. [post-type="chat"] .caption > .reblogs:first-child .reblog-header {
  2399. display:none;
  2400. }
  2401.  
  2402. .npf_chat[data-npf*='{"subtype":"chat"}']{
  2403. font-family:inherit!important;
  2404. font-size:inherit!important;
  2405. color:inherit!important;
  2406. line-height:inherit!important;
  2407. }
  2408.  
  2409. ul.chatwrap {
  2410. margin:1em 0;
  2411. }
  2412.  
  2413. ul.chatwrap, li.chatline {
  2414. list-style:none;
  2415. padding:0;
  2416. }
  2417.  
  2418. li.chatline {
  2419. margin:0;
  2420. padding:0.69rem 0.85rem;
  2421. }
  2422.  
  2423. li.chatline:nth-of-type(odd){
  2424. background:var(--Alt-Post-BG);
  2425. border-radius:calc(var(--Rounded-Corners) / 2);
  2426. color:var(--Alt-Post-Text-Color);
  2427. }
  2428.  
  2429. li.chatline:nth-of-type(odd) b:first-child {
  2430. color:var(--Alt-Post-Text-Color)!important;
  2431. }
  2432.  
  2433. li.chatline:nth-of-type(even) b:first-child {
  2434. color:var(--Text-Color)!important;
  2435. }
  2436.  
  2437. .chatline b,
  2438. .chat-label,
  2439. .npf_chat[data-npf*='{"subtype":"chat"}'] > b:first-child {
  2440. font-family:var(--Caps-Font-Family);
  2441. font-size:var(--Caps-Font-Size);
  2442. font-weight:var(--Caps-Font-Weight);
  2443. text-transform:uppercase;
  2444. letter-spacing:var(--Caps-Letter-Spacing);
  2445. }
  2446.  
  2447. /* legacy chat posts */
  2448. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/xqhst.png */
  2449. [post-type="chat"]:not(.previously-npf) .legacy-chat ~ .caption > .reblogs:first-of-type[username="{Name}"]:not(.original-entry){
  2450. display:none;
  2451. }
  2452.  
  2453. .legacy-chat {
  2454. margin:0!important;
  2455. padding:var(--Post-Padding)!important;
  2456. }
  2457.  
  2458. /*------- ASK POSTS -------*/
  2459. .question {
  2460. padding:0 var(--Post-Padding);
  2461. margin:var(--Post-Padding) 0;
  2462. }
  2463.  
  2464. .asker-img-cont {
  2465. position:relative;
  2466. width:var(--Asker-Icon-Size);
  2467. height:var(--Asker-Icon-Size);
  2468. margin-right:var(--Asker-Icon-Gap-Right);
  2469. }
  2470.  
  2471. .asker-img-cont img {
  2472. display:block;
  2473. width:100%;
  2474. height:100%;
  2475. border-radius:var(--Asker-Icon-Corner-Roundness);
  2476. }
  2477.  
  2478. html[rounded-corners]:not([rounded-corners="0px"]) .asker-img-cont img {
  2479. --Asker-Icon-Corner-Roundness:calc(var(--Rounded-Corners) / 2);
  2480. }
  2481.  
  2482. .asker-w { flex:1 }
  2483.  
  2484. .asker-name {
  2485. font-family:var(--Asker-Name-Font-Family);
  2486. text-transform:uppercase;
  2487. font-size:var(--Asker-Name-Font-Size);
  2488. font-weight:var(--Caps-Font-Weight);
  2489. letter-spacing:var(--Caps-Letter-Spacing);
  2490. color:var(--Asker-Name-Color);
  2491. margin-bottom:var(--Asker-Name-Bottom-Gap);
  2492. }
  2493.  
  2494. .question-text > p:first-child { margin-top:0 }
  2495. .question-text > p:last-child { margin-bottom:0 }
  2496. .question-text > p:only-child {
  2497. margin:0;
  2498. }
  2499.  
  2500. .question + .answer, .answer + .caption {
  2501. padding-top:var(--Post-Padding);
  2502. border-top:var(--Reblog-Borders-Size) solid var(--Reblog-Borders);
  2503. }
  2504.  
  2505. /*------- NPF MISC -------*/
  2506. /* file.garden/ZRt8jW_MomIqlrfn/screenshots/ezfkl.png */
  2507. /* tumblr.com/glenthemes/664357096988475392 */
  2508. figure:not(.tmblr-full) + figure:not(.tmblr-full){
  2509. margin-top:var(--Photoset-Image-Spacing);
  2510. }
  2511.  
  2512. .tmblr-full {
  2513. overflow:hidden;
  2514. }
  2515.  
  2516. .posts .npf_quirky,
  2517. .posts .npf_chat,
  2518. .posts .npf_quote {
  2519. font-size:var(--Quote-Font-Size);
  2520. line-height:var(--Quote-Line-Height);
  2521. }
  2522.  
  2523. .posts .npf_quirky {
  2524. font-size:calc(var(--Quote-Font-Size) + 1px)!important;
  2525. }
  2526.  
  2527. /*----- "KEEP READING" / "READ MORE" -----*/
  2528. .posts p.keep-reading {
  2529. display:flex;
  2530. align-items:center;
  2531. justify-content:center;
  2532. text-align:center;
  2533. }
  2534.  
  2535. .posts p.keep-reading > a.read_more {
  2536. display:block;
  2537. font-size:calc(var(--Caps-Font-Size) + 0.5px);
  2538. }
  2539.  
  2540. /*------ POST INFO / PERMALINK BAR ------*/
  2541. .infobar {
  2542. border-top:var(--Permalink-Border-Size) solid var(--Permalink-Border);
  2543. padding:var(--Permalink-Padding-Y) var(--Permalink-Padding-X);
  2544. background-color:var(--Permalink-BG);
  2545. }
  2546.  
  2547. .infobar.pinned-bar {
  2548. border-top:none;
  2549. border-bottom:var(--Permalink-Border-Size) solid var(--Permalink-Border);
  2550. padding:calc(var(--Permalink-Padding-Y) - 3px) var(--Permalink-Padding-X);
  2551. }
  2552.  
  2553. .infobar.pinned-bar i.sf[class*="sf-push-pin"]{
  2554. display:inline-block;
  2555. transform-origin:center;
  2556. transform:rotate(-45deg) perspective(0);
  2557. font-size:var(--Caps-Font-Size);
  2558. }
  2559.  
  2560. .infobar.pinned-bar i.sf[class*="sf-push-pin"] + span {
  2561. margin-left:calc(var(--Caps-Font-Size) * 0.85);
  2562. }
  2563.  
  2564. .perma-info {
  2565. font-family:var(--Caps-Font-Family);
  2566. font-weight:var(--Caps-Font-Weight);
  2567. font-size:calc(var(--Caps-Font-Size));
  2568. text-transform:uppercase;
  2569. word-spacing:0;
  2570. letter-spacing:var(--Caps-Letter-Spacing);
  2571. flex:1;
  2572. }
  2573.  
  2574. html[uppercase-font="Inter"] .perma-info {
  2575. font-size:calc(var(--Caps-Font-Size) - 0.5px);
  2576. letter-spacing:calc(var(--Caps-Letter-Spacing) + 0.015em);
  2577. }
  2578.  
  2579. .perma-info, .perma-info a {
  2580. color:var(--Permalink-Text)!important;
  2581. }
  2582.  
  2583. .perma-info .label-original {
  2584.  
  2585. }
  2586.  
  2587. .perma-info .segment + .segment {
  2588. margin-left:var(--Permalink-Text-Items-Spacing);
  2589. }
  2590.  
  2591. /*------- POST BUTTONS -------*/
  2592. .infobar,
  2593. .post-buttons {
  2594. justify-content:space-between;
  2595. }
  2596.  
  2597. .post-buttons {
  2598. margin:calc(0px - var(--Post-Controls-Padding)) 0;
  2599. align-items:center;
  2600. }
  2601.  
  2602. .post-buttons > * + * {
  2603. margin-left:var(--Post-Controls-Spacing);
  2604. }
  2605.  
  2606. .post-buttons [icon-name]{
  2607. display:block;
  2608. font-size:var(--Post-Controls-Size);
  2609. color:var(--Post-Controls-Color);
  2610. line-height:1;
  2611. }
  2612.  
  2613. .post-buttons [icon-name^="refresh"].evil-icons {
  2614. }
  2615.  
  2616. .post-buttons [icon-name^="refresh"].evil-icons:before {
  2617. display:block;
  2618. -webkit-text-stroke-width:0.3px;
  2619. -webkit-text-stroke-color:currentColor;
  2620. }
  2621.  
  2622. .post-buttons [icon-name="heart"].evil-icons {
  2623. font-size:calc(var(--Post-Controls-Size) * 0.9);
  2624. }
  2625.  
  2626. .post-buttons [icon-name="heart"].evil-icons:before {
  2627. display:block;
  2628. margin-top:1px;
  2629. -webkit-text-stroke-width:0.5px;
  2630. -webkit-text-stroke-color:currentColor;
  2631. }
  2632.  
  2633. .rb-area, .like-area {
  2634. position:relative;
  2635. width:var(--Post-Controls-Size);
  2636. height:var(--Post-Controls-Size);
  2637. padding:var(--Post-Controls-Padding);
  2638. background:var(--Post-Controls-BG);
  2639. border:1px solid var(--Post-Controls-Border);
  2640. border-radius:100%;
  2641. box-sizing:content-box;
  2642. overflow:hidden;
  2643. z-index:0;
  2644. }
  2645.  
  2646. .rb-area, .like-area, .rb-area > a[href*="/reblog/"]{
  2647. display:flex;
  2648. align-items:center;
  2649. justify-content:center;
  2650. }
  2651.  
  2652. .like_button {
  2653. position:absolute;
  2654. top:0;left:0;
  2655. width:100%;
  2656. height:100%;
  2657. background:black;
  2658. opacity:0;
  2659. overflow:hidden;
  2660. z-index:2;
  2661. }
  2662.  
  2663. .like_button > iframe { height:100%; }
  2664.  
  2665. .like_button.liked + [icon-name^="heart"]{
  2666. color:var(--Liked-Button-Color)!important;
  2667. }
  2668.  
  2669. /*------- TAGS -------*/
  2670. .tags {
  2671. --Tags-Spacing-X:5px;
  2672. --Tags-Spacing-Y:5px;
  2673. margin:calc(0px - var(--Tags-Spacing-Y)) calc(0px - var(--Tags-Spacing-X));
  2674. padding:var(--Post-Padding);
  2675. padding-top:0;
  2676. text-align:right;
  2677. font-family:var(--Caps-Font-Family);
  2678. font-weight:var(--Caps-Font-Weight);
  2679. text-transform:uppercase;
  2680. font-size:calc(var(--Caps-Font-Size) - 0.5px);
  2681. letter-spacing:var(--Caps-Letter-Spacing);
  2682. }
  2683.  
  2684. .caption:empty + .tags,
  2685. *:not(.caption) + .tags {
  2686. margin-top:calc(var(--Post-Padding) - var(--Tags-Spacing-Y));
  2687. }
  2688.  
  2689. .tags a {
  2690. margin:var(--Tags-Spacing-Y) var(--Tags-Spacing-X);
  2691. }
  2692.  
  2693. /*------- POST NOTES -------*/
  2694. ol.notes {
  2695. padding:var(--Post-Padding);
  2696. list-style:none;
  2697. }
  2698.  
  2699. ol.notes li + li {
  2700. margin-top:var(--Post-Notes-Row-Spacing);
  2701. }
  2702.  
  2703. ol.notes li.original_post.with_commentary blockquote {
  2704. display:none;
  2705. }
  2706.  
  2707. ol.notes li a.avatar_frame {
  2708. position:relative;
  2709. }
  2710.  
  2711. ol.notes > li {
  2712. margin-left:calc(var(--Post-Notes-Type-Icon-Size) + var(--Post-Notes-Type-Icon-Gap-Right));
  2713. }
  2714.  
  2715. ol.notes li.note > span.action > a:first-of-type {
  2716. position:relative;
  2717. }
  2718.  
  2719. /* all the :before icon font stuff here */
  2720. ol.notes li > span.action > a:first-of-type:before {
  2721. position:absolute;
  2722. content:"";
  2723. top:0;left:0;
  2724. margin-left:calc(0px - var(--Post-Notes-Type-Icon-Size) - var(--Post-Notes-Type-Icon-Gap-Right));
  2725. display:flex;
  2726. align-items:center;
  2727. height:100%;
  2728. font-family:"evil-icons";
  2729. font-size:var(--Post-Notes-Type-Icon-Size);
  2730. color:var(--Links-Color);
  2731. -webkit-text-stroke-color:currentColor;
  2732. }
  2733.  
  2734. /* JohnSmith liked this post */
  2735. /* icon: heart */
  2736. ol.notes li.like > span.action > a:first-of-type:before {
  2737. content:'\e819';
  2738. font-size:calc(var(--Post-Notes-Type-Icon-Size) * 0.9);
  2739. padding-left:calc(var(--Post-Notes-Type-Icon-Size) * ((1 - 0.9) / 2));
  2740. -webkit-text-stroke-width:0.5px;
  2741. }
  2742.  
  2743. /* JohnSmith reblogged this from JaneDoe */
  2744. /* icon: refresh */
  2745. ol.notes li.reblog.without_commentary > span.action > a:first-of-type:before {
  2746. content:'\e829';
  2747. -webkit-text-stroke-width:0.2px;
  2748. }
  2749.  
  2750. /* JohnSmith added this GIF to a post */
  2751. ol.notes li.post_attribution > span.action > a:first-of-type:before {
  2752. content:'\e824';
  2753. -webkit-text-stroke-width:0.35px;
  2754. }
  2755.  
  2756. /* JohnSmith replied: "..." */
  2757. /* JohnSmith posted this */
  2758. /* icon: comment */
  2759. ol.notes li.reblog.with_commentary > span.action > a:first-of-type:before,
  2760. ol.notes li.reply > span.action > a:first-of-type:before,
  2761. ol.notes li.original_post > span.action > a:first-of-type:before {
  2762. content:'\e811'!important;
  2763. font-size:calc(var(--Post-Notes-Type-Icon-Size) * 0.9)!important;
  2764. padding-left:calc(var(--Post-Notes-Type-Icon-Size) * ((1 - 0.9) / 2))!important;
  2765. -webkit-text-stroke-width:0.35px!important;
  2766. }
  2767.  
  2768. ol.notes li.note > a.avatar_frame[target="_blank"], ol.notes img {
  2769. display:none;
  2770. }
  2771.  
  2772. ol.notes a, .more_notes_link, .notes_loading {
  2773. font-family:var(--Caps-Font-Family);
  2774. font-weight:var(--Caps-Font-Weight);
  2775. font-size:calc(var(--Caps-Font-Size));
  2776. text-transform:uppercase;
  2777. letter-spacing:var(--Caps-Letter-Spacing);
  2778. }
  2779.  
  2780. /* replies */
  2781. ol.notes blockquote,
  2782. ol.notes .answer_content {
  2783. display:block;
  2784. padding-left:calc((var(--Post-Notes-Type-Icon-Size) / 2) + var(--Post-Notes-Type-Icon-Gap-Right));
  2785. border-left:var(--Blockquote-Border-Size) solid var(--Blockquote-Border-Color);
  2786. margin:1em 0 1em calc(0px - (var(--Post-Notes-Type-Icon-Size) / 2) - var(--Post-Notes-Type-Icon-Gap-Right));
  2787. }
  2788.  
  2789. /*------- PAGINATION -------*/
  2790. .pagination {
  2791. position:relative;
  2792. width:var(--Post-Width-Total);
  2793. border-top:var(--Pagination-Border-Size) solid var(--Pagination-Border-Color);
  2794. margin-top:var(--Post-Spacing);
  2795. padding-top:calc(var(--Pagination-Padding) - (var(--Pagination-Items-Spacing) / 2));
  2796. font-family:var(--Reblogger-Name-Font-Family);
  2797. font-weight:var(--Caps-Font-Weight);
  2798. text-transform:uppercase;
  2799. font-size:var(--Reblogger-Name-Font-Size);
  2800. letter-spacing:var(--Caps-Letter-Spacing);
  2801. text-align:center;
  2802. gap:calc(var(--Pagination-Items-Spacing) / 2);
  2803. }
  2804.  
  2805. .pagination, .pagination a {
  2806. color:var(--Pagination-Text-Color);
  2807. }
  2808.  
  2809. .pagination > * {
  2810. display:flex;
  2811. align-items:center;
  2812. justify-content:center;
  2813. padding:calc(var(--Pagination-Items-Spacing) / 2);
  2814. }
  2815.  
  2816. .pagination .prev-page .feather-icons,
  2817. .pagination .next-page .feather-icons {
  2818. font-size:var(--Pagination-Arrows-Size);
  2819. -webkit-text-stroke-width:0.5px;
  2820. -webkit-text-stroke-color:currentColor;
  2821. }
  2822.  
  2823. .pagination .current-page .feather-icons {
  2824. margin-top:-1px;
  2825. font-size:calc(var(--Pagination-Numbers-Size));
  2826. -webkit-text-stroke-width:0.5px;
  2827. -webkit-text-stroke-color:currentColor;
  2828. }
  2829.  
  2830. .pagination .page-num {
  2831. font-size:var(--Pagination-Numbers-Size);
  2832. }
  2833.  
  2834. .pagination .prev-page + .page-num {
  2835. margin-left:var(--Pagination-Arrows-Bonus-Spacing);
  2836. }
  2837.  
  2838. .pagination .page-num + .next-page {
  2839. margin-left:var(--Pagination-Arrows-Bonus-Spacing);
  2840. }
  2841.  
  2842. .pagination > *:first-child:not(.prev-page){
  2843. margin-left:calc(var(--Pagination-Arrows-Size) + ((var(--Pagination-Items-Spacing) / 2) * 2) + var(--Pagination-Arrows-Bonus-Spacing));
  2844. }
  2845.  
  2846. .pagination > *:last-child:not(.next-page){
  2847. margin-right:calc(var(--Pagination-Arrows-Size) + ((var(--Pagination-Items-Spacing) / 2) * 2) + var(--Pagination-Arrows-Bonus-Spacing));
  2848. }
  2849.  
  2850.  
  2851. /*------- MUSIC PLAYER -------*/
  2852. .jirous-player {
  2853. position:fixed;
  2854. bottom:0;left:0;
  2855. margin-bottom:calc(var(--MusicPlayer-Corner-Gap) - var(--MusicPlayer-Buttons-Touch-Padding));
  2856. margin-left:calc(var(--MusicPlayer-Corner-Gap) - var(--MusicPlayer-Buttons-Touch-Padding));
  2857. gap:0 var(--MusicPlayer-Middle-Gap);
  2858. z-index:69;
  2859. }
  2860.  
  2861. .jirous-player.hide {
  2862. display:none!important;
  2863. visibility:hidden!important;
  2864. }
  2865.  
  2866. .jirous-player .ctrls {
  2867. margin-right:calc(0px - var(--MusicPlayer-Buttons-Touch-Padding));
  2868. }
  2869.  
  2870. .jirous-player button {
  2871. background:transparent;
  2872. padding:var(--MusicPlayer-Buttons-Touch-Padding);
  2873. border:none;
  2874. outline:none;
  2875. font-family:inherit;
  2876. font-size:inherit;
  2877. line-height:1;
  2878. cursor:pointer;
  2879. }
  2880.  
  2881. .jirous-player .ti {
  2882. font-size:var(--MusicPlayer-Buttons-Size);
  2883. color:var(--MusicPlayer-Buttons-Color);
  2884. }
  2885.  
  2886. .jirous-player .pause {
  2887. display:none;
  2888. }
  2889.  
  2890. .jirous-player .note-decor {
  2891. font-size:var(--MusicPlayer-Note-Size);
  2892. color:var(--MusicPlayer-Note-Color);
  2893. }
  2894.  
  2895. .jirous-player .note-decor.-filled i[class$="_line"]{
  2896. display:none;
  2897. }
  2898.  
  2899. .jirous-player .note-decor:not(.-filled) i[class$="_fill"]{
  2900. display:none;
  2901. }
  2902.  
  2903. .jirous-player .song-name {
  2904. font-family:var(--MusicPlayer-Font-Family);
  2905. font-weight:var(--Caps-Font-Weight);
  2906. font-size:var(--MusicPlayer-Font-Size);
  2907. letter-spacing:var(--Caps-Letter-Spacing);
  2908. text-transform:uppercase;
  2909. color:var(--MusicPlayer-Text-Color);
  2910. }
  2911.  
  2912. html[uppercase-font="Inter"] .song-name,
  2913. html[uppercase-font="Figtree"] .song-name {
  2914. --Caps-Font-Weight:500;
  2915. }
  2916.  
  2917. .jirous-player .song-name a {
  2918. padding-bottom:0.15em;
  2919. border-bottom:1px solid rgba(var(--MusicPlayer-Text-Color-RGB),0.2);
  2920. }
  2921.  
  2922. /*------- TOOLTIPS -------*/
  2923. .tippy-box {
  2924. border:var(--Tooltips-Border-Size) solid var(--Tooltips-Border);
  2925. background:var(--Tooltips-BG);
  2926. border-radius:calc(var(--Rounded-Corners) / 2);
  2927. }
  2928.  
  2929. .tippy-content {
  2930. font-family:var(--Caps-Font-Family);
  2931. font-size:var(--Tooltips-Font-Size);
  2932. text-transform:uppercase;
  2933. letter-spacing:var(--Caps-Letter-Spacing);
  2934. color:var(--Tooltips-Text-Color);
  2935. }
  2936.  
  2937. /*----- CUSTOMIZE PAGE ADJUSTMENTS -----*/
  2938. .custard { display:none; }
  2939.  
  2940. {CustomCSS}
  2941. </style>
  2942. </head>
  2943.  
  2944. <body>
  2945.  
  2946. <!------- MUSIC PLAYER ------->
  2947. <div class="jirous-player flex y-center {select:show music player}">
  2948. <div class="ctrls flex true-center">
  2949. <button class="play">
  2950. <i class="ti ti-player-play{select:music player style}"></i>
  2951. </button>
  2952.  
  2953. <button class="pause">
  2954. <i class="ti ti-player-pause{select:music player style}"></i>
  2955. </button>
  2956. </div>
  2957.  
  2958. <div class="note-decor {select:music player style}">
  2959. <i class="mgc_music_line"></i>
  2960. <i class="mgc_music_fill"></i>
  2961. </div>
  2962.  
  2963. {block:ifsongname}
  2964. <span class="song-name">{text:song name}</span>
  2965. {/block:ifsongname}
  2966.  
  2967. {block:ifsongfileURL}
  2968. <figure>
  2969. <figcaption class="sr-text">
  2970. Listen to {block:ifsongname}{text:song name}{/block:ifsongname}{block:ifnotsongname}music{/block:ifnotsongname}
  2971. </figcaption>
  2972.  
  2973. <!-- autoplay does NOT work most of the time. -->
  2974. <audio src="{text:song file URL}"{block:ifsongvolume}volume="{text:song volume}"{/block:ifsongvolume}></audio>
  2975. </figure>
  2976. {/block:ifsongfileURL}
  2977. </div><!--end music player-->
  2978.  
  2979. <!------- MAIN CONTAINER ------->
  2980. <main class="flex x-center invis">
  2981.  
  2982. <!------- LEFT SIDEBAR ------->
  2983. <aside class="sidebar left flex true-center">
  2984. <div class="inner">
  2985. <nav class="navlinks flex x-center">
  2986. <!-- HOME link -->
  2987. <a href="/" aria-label="Home">
  2988. <span class="sf sf-home-o"></span>
  2989. </a>
  2990.  
  2991. <!-- ASK link -->
  2992. <a href="/ask" aria-label="Message">
  2993. <span class="sf sf-envelope-2-o"></span>
  2994. </a>
  2995.  
  2996. <!-- ARCHIVE link -->
  2997. <a href="/archive" aria-label="Archive">
  2998. <span class="sf sf-calendar-o"></span>
  2999. </a>
  3000.  
  3001. <!-- THEME CREDIT link -->
  3002. <!-- please do not remove! -->
  3003. <a href="//glenthemes.tumblr.com" aria-label="&#x2727; &#x201C;Resonance&#x201D; theme by glenthemes &#x2727;">
  3004. <span class="sf sf-tools-o"></span>
  3005. </a>
  3006. </nav>
  3007.  
  3008. <div class="sidebar-image flex true-center" img="{image:sidebar 1 image}">
  3009. <img src="{image:sidebar 1 image}" alt="sidebar image"/>
  3010. </div>
  3011.  
  3012. <nav class="custom-links">
  3013. {block:ifLink1Name}
  3014. <a href="{text:link 1 URL}">{text:link 1 name}</a>
  3015. {/block:ifLink1Name}
  3016.  
  3017. {block:ifLink2Name}
  3018. <a href="{text:link 2 URL}">{text:link 2 name}</a>
  3019. {/block:ifLink2Name}
  3020.  
  3021. {block:ifLink3Name}
  3022. <a href="{text:link 3 URL}">{text:link 3 name}</a>
  3023. {/block:ifLink3Name}
  3024.  
  3025. {block:ifLink4Name}
  3026. <a href="{text:link 4 URL}">{text:link 4 name}</a>
  3027. {/block:ifLink4Name}
  3028.  
  3029. {block:ifLink5Name}
  3030. <a href="{text:link 5 URL}">{text:link 5 name}</a>
  3031. {/block:ifLink5Name}
  3032.  
  3033. {block:ifLink6Name}
  3034. <a href="{text:link 6 URL}">{text:link 6 name}</a>
  3035. {/block:ifLink6Name}
  3036.  
  3037. {block:ifLink7Name}
  3038. <a href="{text:link 7 URL}">{text:link 7 name}</a>
  3039. {/block:ifLink7Name}
  3040.  
  3041. {block:ifLink8Name}
  3042. <a href="{text:link 8 URL}">{text:link 8 name}</a>
  3043. {/block:ifLink8Name}
  3044. </nav><!--end custom links-->
  3045. </div><!--end inner-->
  3046. </aside><!--end left sidebar-->
  3047.  
  3048. <!------- POSTS CONTAINER ------->
  3049. <section class="all-posts">
  3050. {block:TagPage}
  3051. <article class="posts brief">
  3052. <h3>{lang:Showing TagResultCount posts tagged Tag 3}.</h3>
  3053. </article>
  3054. {/block:TagPage}
  3055.  
  3056. {block:SearchPage}
  3057. <article class="posts brief">
  3058. {block:HideFromSearchEnabled}
  3059. <h3 class="search-disabled"><a href="//{Name}.tumblr.com">@&hairsp;{Name}</a> has chosen to disable searching.<br>For more information, please see <a href="//glenthemes.tumblr.com/support#visibility" target="_blank">this article</a>.</h3>
  3060. {/block:HideFromSearchEnabled}
  3061. <h3>{lang:Showing SearchResultCount results for SearchQuery 2}{lang:Sorry no results for SearchQuery 2}.</h3>
  3062. </article>
  3063. {/block:SearchPage}
  3064.  
  3065. <article class="posts brief submit-disabled">
  3066. <h3><a href="//{Name}.tumblr.com">@&hairsp;{Name}</a> has turned off their submissions.</h3>
  3067. </article>
  3068.  
  3069. <article class="posts brief ask-disabled">
  3070. <h3><a href="//{Name}.tumblr.com">@&hairsp;{Name}</a> has turned off their askbox.</h3>
  3071. </article>
  3072.  
  3073. <!------- POSTS ------->
  3074. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  3075.  
  3076. <article
  3077. id="post-{PostID}"
  3078. class="posts"
  3079. post-type="{PostType}"
  3080. username="{block:NotReblog}{Name}{/block:NotReblog}{block:RebloggedFrom}{ReblogRootName}{/block:RebloggedFrom}"
  3081. {block:RebloggedFrom}root-url="{ReblogRootURL}"{/block:RebloggedFrom}
  3082. >
  3083.  
  3084. {block:PinnedPostLabel}
  3085. <div class="infobar pinned-bar">
  3086. <div class="perma-info">
  3087. <a class="segment flex" href="{Permalink}">
  3088. <i class="sf sf-push-pin-o"></i>
  3089. <span>{PinnedPostLabel}</span>
  3090. </a>
  3091. </div>
  3092. </div>
  3093. {/block:PinnedPostLabel}
  3094.  
  3095. <div class="post-body {select:grayscale posts}-gray">
  3096.  
  3097. <!------- SINGLE PHOTO ------->
  3098. {block:Photo}
  3099. <div class="legacy-photo">
  3100. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  3101. </div>
  3102. {/block:Photo}
  3103.  
  3104. <!------- PHOTOSET ------->
  3105. {block:Photoset}
  3106. <div class="legacy-photoset" layout="{PhotosetLayout}">
  3107. {block:Photos}
  3108. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"/>
  3109. {/block:Photos}
  3110. </div>
  3111. {/block:Photoset}
  3112.  
  3113. <!------- PHOTO: PANORAMA ------->
  3114. {block:Panorama}
  3115. <div class="legacy-photo">
  3116. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  3117. </div>
  3118. {/block:Panorama}
  3119.  
  3120. <!------- QUOTE ------->
  3121. {block:Quote}
  3122. <div class="quote-container">
  3123. <blockquote class="npf_quote quote-text">
  3124. {Quote}
  3125. </blockquote>
  3126.  
  3127. {block:Source}
  3128. <p class="quote-source">{Source}</p>
  3129. {/block:Source}
  3130. </div>
  3131. {/block:Quote}
  3132.  
  3133. <!------- CHAT ------->
  3134. {block:Chat}
  3135. <ul class="chatwrap legacy-chat">
  3136. {block:Lines}
  3137. <li class="chatline">
  3138. {block:Label}
  3139. <span class="chat-label">{Label}</span>
  3140. {/block:Label}
  3141.  
  3142. <span class="chat-content">
  3143. {Line}
  3144. </span>
  3145. </li>
  3146. {/block:Lines}
  3147. </ul>
  3148. {/block:Chat}
  3149.  
  3150. <!------- EXTERNAL LINK ------->
  3151. {block:Link}
  3152. <div class="npf-link-block{block:Thumbnail} has-poster{/block:Thumbnail}">
  3153. <a href="{URL}" {Target}>
  3154. <div class="poster" style="background-image:url('{block:Thumbnail}{Thumbnail-HighRes}{/block:Thumbnail}')"></div>
  3155.  
  3156. <div class="bottom">
  3157. <div class="description">{Name}</div>
  3158. {block:Host}
  3159. <div class="site-name">{Host}</div>
  3160. {/block:Host}
  3161. </div>
  3162. </a>
  3163. </div>
  3164. {/block:Link}
  3165.  
  3166. <!------- VIDEO ------->
  3167. {block:Video}
  3168. <div class="legacy-video">
  3169. {Video-500}
  3170.  
  3171. {block:VideoThumbnail}
  3172. <span class="poster-thumb" url="{VideoThumbnailURL}"></span>
  3173. {/block:VideoThumbnail}
  3174. </div>
  3175. {/block:Video}
  3176.  
  3177. <!------- AUDIO ------->
  3178. {block:Audio}
  3179. <div class="aud-gen">
  3180. <div class="aud-cover">
  3181. <div class="aud-ctl">
  3182. <div class="q-play">
  3183. <span class="play-icon"></span>
  3184. </div>
  3185.  
  3186. <div class="q-pause">
  3187. <span class="pause-icon"></span>
  3188. </div>
  3189. </div>
  3190.  
  3191. {block:AlbumArt}
  3192. <img src="{AlbumArtURL}" alt="Album cover{block:Album} for &ldquo;{Album}&rdquo;{/block:Album}{block:Artist} by {Artist}{/block:Artist}"/>
  3193. {block:AlbumArt}
  3194. </div>
  3195.  
  3196. <div class="aud-xyz">
  3197. <div class="aud-info">
  3198. {block:TrackName}
  3199. <div class="aud-title">
  3200. {TrackName}
  3201. </div>
  3202. {/block:TrackName}
  3203.  
  3204. {block:Artist}
  3205. <div class="aud-artist">
  3206. {Artist}
  3207. </div>
  3208. {/block:Artist}
  3209.  
  3210. {block:Album}
  3211. <div class="aud-album">
  3212. {Album}
  3213. </div>
  3214. {/block:Album}
  3215. </div><!--end aud-info (text)-->
  3216.  
  3217. {block:AudioPlayer}
  3218. <div class="aud-iframe">{AudioPlayer}</div>
  3219. {/block:AudioPlayer}
  3220. </div><!--end aud-xyz-->
  3221.  
  3222. <a class="aud-dl" href="javascript:void(0)" target="_blank" aria-label="Download">
  3223. <i class="feather-icons" icon-name="download"></i>
  3224. </a>
  3225. </div><!--end audio wrapper-->
  3226. {/block:Audio}
  3227.  
  3228. <!------- ASK POSTS ------->
  3229. {block:Answer}
  3230. <div class="question">
  3231. <div class="question-w flex">
  3232. <div class="asker-img-cont">
  3233. <img src="{AskerPortraitURL-128}"/>
  3234. </div>
  3235. <div class="asker-w">
  3236. <div class="asker-y">
  3237. <div class="asker-name">{lang:Asker asked 2}:</div>
  3238. <div class="question-text">{Question}</div>
  3239. </div>
  3240. </div>
  3241. </div>
  3242. </div>
  3243.  
  3244. <div class="answer caption">
  3245. {block:NotReblog}
  3246. <div class="reblogs original-entry" username="{Name}">
  3247. <div class="reblog-header original-name">
  3248. <a href="{Permalink}" class="reblog-head">
  3249. <img src="{PortraitURL-64}"
  3250. alt="{Name}'s avatar">
  3251. <span class="reblog-user">{Name}</span>
  3252. </a>
  3253. </div>
  3254. <div class="reblog-content original-caption">{Replies}</div>
  3255. </div>
  3256. {/block:NotReblog}
  3257.  
  3258. {block:RebloggedFrom}
  3259. <div class="reblogs" username="{ReblogRootName}">
  3260. <div class="reblog-header">
  3261. <a href="{ReblogRootURL}" class="reblog-head">
  3262. <img src="{ReblogRootPortraitURL-64}"
  3263. alt="{ReblogRootName}'s avatar">
  3264. <span class="reblog-user">{lang:Answered}:</span>
  3265. </a>
  3266. </div>
  3267.  
  3268. {block:Answerer}
  3269. <div class="reblog-content answer-text">{Answer}</div>
  3270. {/block:Answerer}
  3271. </div>
  3272. {/block:RebloggedFrom}
  3273. </div><!--end answer-->
  3274. {/block:Answer}
  3275.  
  3276. <!------- CAPTIONS ------->
  3277. <div class="caption{block:NotReblog} original-post{/block:NotReblog}">
  3278. {block:Text}
  3279. {block:Title}<h2>{Title}</h2>{/block:Title}
  3280. {/block:Text}
  3281.  
  3282. {block:NotReblog}
  3283. {block:Caption}
  3284. <div class="reblogs">
  3285. <div class="reblog-content">{Caption}</div>
  3286. </div>
  3287. {/block:Caption}
  3288.  
  3289. {block:Text}
  3290. <div class="reblogs">
  3291. <div class="reblog-content">{Body}</div>
  3292. </div>
  3293. {/block:Text}
  3294. {/block:NotReblog}
  3295.  
  3296. {block:Rebloggedfrom}
  3297. {block:Reblogs}
  3298.  
  3299. <div class="reblogs{block:IsOriginalEntry} original-entry{/block:IsOriginalEntry}" username="{block:IsOriginalEntry}{ReblogRootName}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}{Username}{/block:IsNotOriginalEntry}">
  3300. <div class="reblog-header{block:IsOriginalEntry} original-name{/block:IsOriginalEntry}">
  3301. <a href="{block:IsOriginalEntry}{ReblogRootURL}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}{Permalink}{/block:IsNotOriginalEntry}" class="reblog-head{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  3302. <img src="{block:IsOriginalEntry}{ReblogRootPortraitURL-64}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}{PortraitURL-64}{/block:IsNotOriginalEntry}" alt="{block:IsOriginalEntry}{ReblogRootName}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}{Username}{/block:IsNotOriginalEntry}'s avatar">
  3303. <span class="reblog-user">{block:IsOriginalEntry}{ReblogRootName}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}{Username}{/block:IsNotOriginalEntry}</span>
  3304. </a>
  3305. </div>
  3306. <div class="reblog-content{block:IsOriginalEntry} original-caption{/block:IsOriginalEntry}">
  3307. {Body}
  3308. </div>
  3309. </div>
  3310.  
  3311. {/block:Reblogs}
  3312. {/block:RebloggedFrom}
  3313. </div><!--end caption-->
  3314.  
  3315.  
  3316. <!------- TAGS ------->
  3317. {block:HasTags}
  3318. <div class="tags">
  3319. {block:Tags}
  3320. <a href="{TagURL}">#&#x200A;{Tag}</a>
  3321. {/block:Tags}
  3322. </div>
  3323. {/block:HasTags}
  3324. </div><!--end post-body-->
  3325.  
  3326.  
  3327. <!----- POST INFO / PERMALINK BAR ----->
  3328. {block:Date}
  3329. <div class="infobar flex y-center">
  3330. <div class="perma-info">
  3331. <a class="segment" {block:IndexPage} href="{Permalink}"{/block:IndexPage}>
  3332. {DayOfMonthWithZero}{DayOfMonthSuffix} {Month} {Year}
  3333. </a>
  3334.  
  3335. <a class="segment" {block:IndexPage} href="{Permalink}"{/block:IndexPage}>{NoteCountWithLabel}</a>
  3336.  
  3337. {block:PermalinkPage}
  3338. {block:RebloggedFrom}
  3339. <br>
  3340. <span class="segment">
  3341. {lang:via}: <a href="{ReblogParentURL}" username="{ReblogParentName}">{ReblogParentName}</a>
  3342. </span>
  3343.  
  3344. <span class="segment">
  3345. {lang:source}: <a href="{ReblogRootURL}" username="{ReblogRootName}">{ReblogRootName}</a>
  3346. </span>
  3347. {/block:RebloggedFrom}
  3348.  
  3349. {block:NotReblog}
  3350. <span class="segment label-original">Original Post</span>
  3351. {/block:NotReblog}
  3352. {/block:PermalinkPage}
  3353. </div>
  3354.  
  3355. <!----- POST BUTTONS ----->
  3356. <div class="post-buttons flex y-center">
  3357. <div class="rb-area">
  3358. <a href="{ReblogURL}" aria-label="Reblog">
  3359. <i class="evil-icons" icon-name="refresh-alt"></i>
  3360. </a>
  3361. </div>
  3362.  
  3363. <div class="like-area" aria-label="Like">
  3364. {LikeButton}
  3365. <i class="evil-icons" icon-name="heart"></i>
  3366. </div>
  3367. </div><!--end post buttons-->
  3368. </div><!--end infobar-->
  3369. {/block:Date}
  3370.  
  3371. </article><!--end posts-->
  3372.  
  3373. {block:PermalinkPage}
  3374. {PostNotes}
  3375. {/block:PermalinkPage}
  3376.  
  3377. {/block:Posts}
  3378.  
  3379. <!------- PAGINATION ------->
  3380. {block:Pagination}
  3381. <div class="pagination flex true-center">
  3382. {block:PreviousPage}
  3383. <a class="prev-page" href="{PreviousPage}" aria-label="Previous Page">
  3384. <i class="feather-icons" icon-name="chevrons-left"></i>
  3385. </a>
  3386. {/block:PreviousPage}
  3387.  
  3388. {block:JumpPagination length="6"}
  3389. {block:CurrentPage}
  3390. <span class="current-page">
  3391. <i class="feather-icons" icon-name="map-pin"></i>
  3392. </span>
  3393. {/block:CurrentPage}
  3394.  
  3395. {block:JumpPage}
  3396. <a class="page-num" href="{URL}" aria-label="Go to Page {PageNumber}">{PageNumber}</a>
  3397. {/block:JumpPage}
  3398. {/block:JumpPagination}
  3399.  
  3400. {block:NextPage}
  3401. <a class="next-page" href="{NextPage}" aria-label="Next Page">
  3402. <i class="feather-icons" icon-name="chevrons-right"></i>
  3403. </a>
  3404. {/block:NextPage}
  3405. </div>
  3406. {/block:Pagination}
  3407. </section><!--end posts container--->
  3408.  
  3409. <!------- RIGHT SIDEBAR ------->
  3410. <aside class="sidebar right flex true-center">
  3411. <div class="inner">
  3412.  
  3413. <!----- SECTION: ABOUT/DESC ----->
  3414. <div class="section about" img="{image:sidebar 2 icon}">
  3415. {block:ifaboutboxtitle}
  3416. <h3>{text:about box title}</h3>
  3417. {/block:ifaboutboxtitle}
  3418.  
  3419. <div class="flex av">
  3420. <div class="icon-wrap flex true-center">
  3421. <img src="{image:sidebar 2 icon}" alt="{Name}'s sidebar icon"/>
  3422. </div>
  3423.  
  3424. <div class="desc-wrap-a">
  3425. <div class="desc-wrap-b">
  3426. <article class="desc">
  3427. {block:ifaboutboxtext}
  3428. {text:about box text}
  3429. {/block:ifaboutboxtext}
  3430.  
  3431. {block:ifnotaboutboxtext}
  3432. {block:Description}
  3433. {Description}
  3434. {/block:Description}
  3435. {/block:ifnotaboutboxtext}
  3436. </article>
  3437. </div>
  3438. </div>
  3439. </div>
  3440. </div><!--end about/desc section-->
  3441.  
  3442. <!----- SECTION: ACTIVITY/CURRENTLY ----->
  3443. <div class="section activity">
  3444. {block:ifactivityboxtitle}
  3445. <h3>{text:activity box title}</h3>
  3446. {/block:ifactivityboxtitle}
  3447.  
  3448. <div class="normal-box">
  3449. <div class="t-table">
  3450. <div class="t-row">
  3451. {block:ifactivity1label}
  3452. <div class="t-cell">
  3453. <label>{text:activity 1 label}</label>
  3454. </div>
  3455. {/block:ifactivity1label}
  3456.  
  3457. {block:ifactivity1text}
  3458. <div class="t-cell">
  3459. <span>{text:activity 1 text}</span>
  3460. </div>
  3461. {/block:ifactivity1text}
  3462. </div>
  3463.  
  3464. <div class="t-row">
  3465. {block:ifactivity2label}
  3466. <div class="t-cell">
  3467. <label>{text:activity 2 label}</label>
  3468. </div>
  3469. {/block:ifactivity2label}
  3470.  
  3471. {block:ifactivity2text}
  3472. <div class="t-cell">
  3473. <span>{text:activity 2 text}</span>
  3474. </div>
  3475. {/block:ifactivity2text}
  3476. </div>
  3477.  
  3478. <div class="t-row">
  3479. {block:ifactivity3label}
  3480. <div class="t-cell">
  3481. <label>{text:activity 3 label}</label>
  3482. </div>
  3483. {/block:ifactivity3label}
  3484.  
  3485. {block:ifactivity3text}
  3486. <div class="t-cell">
  3487. <span>{text:activity 3 text}</span>
  3488. </div>
  3489. {/block:ifactivity3text}
  3490. </div>
  3491.  
  3492. <div class="t-row">
  3493. {block:ifactivity4label}
  3494. <div class="t-cell">
  3495. <label>{text:activity 4 label}</label>
  3496. </div>
  3497. {/block:ifactivity4label}
  3498.  
  3499. {block:ifactivity4text}
  3500. <div class="t-cell">
  3501. <span>{text:activity 4 text}</span>
  3502. </div>
  3503. {/block:ifactivity4text}
  3504. </div>
  3505. </div><!--end table-->
  3506. </div><!--end activity box-->
  3507. </div><!--end activity/currently section-->
  3508.  
  3509. <!----- SECTION: QUOTE ----->
  3510. <div class="section quote">
  3511. {block:ifquoteboxtitle}
  3512. <h3>{text:quote box title}</h3>
  3513. {/block:ifquoteboxtitle}
  3514.  
  3515. {block:ifquoteboxtext}
  3516. <div class="normal-box">
  3517. <blockquote>{text:quote box text}</blockquote>
  3518. </div>
  3519. {/block:ifquoteboxtext}
  3520. </div>
  3521. </div><!--end inner-->
  3522. </aside><!--end right sidebar-->
  3523. </main><!--end main container-->
  3524.  
  3525. {block:Hidden}
  3526. <!--- CUSTOMIZE PAGE REMINDER --->
  3527. {/block:Hidden}
  3528. <div class="custard">Thank you for using this theme! Please note that things will look wonky and some settings don't seem to change if you're still in the customize mode. Please read <a href="https://glen-docs.gitlab.io/theme/32" target="_blank" aria-label="Opens in a new tab">the guide</a> to help with editing!</div>
  3529.  
  3530. </body>
  3531.  
  3532. </html>
Advertisement
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!