uchihaclan

MERCILESS THEME

Feb 16th, 2020 (edited)
1,020
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.89 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <meta charset="utf-8">
  3. <HTML>
  4.  
  5.  
  6. <!--
  7.  
  8. MERCILESS @ps1 - updated 1/2/22
  9.  
  10. a header theme with a twist.
  11. ____________________________________________
  12.  
  13. specs
  14.  
  15. header image can be any size. will auto resize in table.
  16. keep header links as equal or short as possible.
  17. round border doesn't work for rainbow border.
  18. optional everything.
  19. insert google fonts after <head>
  20. message for bugs so i can fix
  21. ____________________________________________
  22.  
  23. html entitys
  24. choose numbers on 3rd column without # ;
  25. https://www.tutorialbrain.com/html_tutorial/html_entities/
  26.  
  27. annasthms photosets
  28. https://annasthms.github.io/photosets/
  29.  
  30. NPF image fix @glenthemes
  31. git.io/JRBt7
  32.  
  33. unnest captions @neothm
  34. https://codepen.io/neothm/pen/PzVjRy
  35.  
  36. short note count
  37. https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  38.  
  39. -->
  40.  
  41.  
  42.  
  43. <HEAD>
  44.  
  45. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  46. <!--
  47. NPF images fix v3.0 by @glenthemes [2021]
  48. 💌 git.io/JRBt7
  49. --->
  50. <script src="//npf-images-v3.github.io/script.js"></script>
  51. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  52. <style tmblr-npf>
  53. :root {
  54. --NPF-Caption-Spacing:1em;
  55. --NPF-Image-Spacing:4px;
  56. }
  57. </style>
  58.  
  59. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  60. <script>
  61. function gatherData(images, arr) {
  62. for (let i = 0; i < images.length; i++) {
  63. let currentData = {
  64. "width": images[i].getAttribute('data-width'),
  65. "height": images[i].getAttribute('data-height'),
  66. "low_res": images[i].getAttribute('data-lowres'),
  67. "high_res": images[i].getAttribute('data-highres')
  68. };
  69. arr.push(currentData);
  70. }
  71. }
  72. function getIndex(elem) {
  73. let i = 0;
  74. while( (elem = elem.previousElementSibling) != null ) i++;
  75. return i;
  76. }
  77. function lightbox(elem) {
  78. let currentPhotoset = elem.parentNode;
  79. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  80. let data = [];
  81. gatherData(photosetPhotos, data);
  82. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  83. }
  84. </script>
  85.  
  86. {block:IfRedirect}
  87. <script>
  88. if(window.location.pathname == '/') location.replace('{text:redirect}');
  89. </script>
  90. {block:IfRedirect}
  91.  
  92.  
  93. <link rel="icon" href="{image:favicon}" type="image/gif" >
  94.  
  95. <TITLE>{Title}</TITLE>
  96. {block:Description}
  97. <meta name="description" content="{MetaDescription}" />
  98. {/block:Description}
  99.  
  100. <meta name="image:favicon" content="" />
  101. <meta name="image:icon" content="https://i.imgur.com/t71BiVo.gif" />
  102. <meta name="image:header bg" content="" />
  103. <meta name="image:bg" content="" />
  104. <meta name="image:footer bg" content="" />
  105. <meta name="image:cursor" content="https://i.imgur.com/I8lupLx.png"/>
  106.  
  107. <meta name="color:bg" content="#fff" />
  108. <meta name="color:header bg" content="#fff" />
  109. <meta name="color:header link" content="#c1331a" />
  110. <meta name="color:header link glow" content="#c1331a" />
  111. <meta name="color:title" content="#c1331a" />
  112. <meta name="color:title glow" content="#c1331a" />
  113. <meta name="color:desc text" content="#c1331a" />
  114. <meta name="color:desc glow" content="#c1331a" />
  115. <meta name="color:desc link" content="#c1331a" />
  116. <meta name="color:desc link glow" content="#c1331a" />
  117. <meta name="color:text" content="#000" />
  118. <meta name="color:text glow" content="#000" />
  119. <meta name="color:link" content="#c1331a" />
  120. <meta name="color:link glow" content="#c1331a" />
  121. <meta name="color:link hover" content="#ccc" />
  122. <meta name="color:link hover glow" content="#ccc" />
  123. <meta name="color:footer bg" content="#fff" />
  124. <meta name="color:footer text" content="#c1331a" />
  125. <meta name="color:footer glow" content="#c1331a" />
  126. <meta name="color:tooltip bg" content="#fff" />
  127. <meta name="color:tooltip txt" content="#000" />
  128. <meta name="color:tooltip glow" content="#000" />
  129. <meta name="color:tooltip border" content="#000" />
  130. <meta name="color:select bg" content="#000" />
  131. <meta name="color:select text" content="#fff" />
  132. <meta name="color:float symbol" content="#000" />
  133. <meta name="color:header border" content="#000" />
  134. <meta name="color:footer border" content="#000" />
  135.  
  136. <meta name="select:header border" content="solid" />
  137. <meta name="select:header border" content="dashed" />
  138. <meta name="select:header border" content="dotted" />
  139. <meta name="select:header border" content="double" />
  140. <meta name="select:header border" content="inset" />
  141. <meta name="select:header border" content="outset" />
  142. <meta name="select:header border" content="groove" />
  143. <meta name="select:header border" content="ridge" />
  144.  
  145. <meta name="select:header border size" content="0" />
  146. <meta name="select:header border size" content="1" />
  147. <meta name="select:header border size" content="2" />
  148. <meta name="select:header border size" content="3" />
  149. <meta name="select:header border size" content="4" />
  150. <meta name="select:header border size" content="5" />
  151.  
  152. <meta name="select:footer border" content="solid" />
  153. <meta name="select:footer border" content="dashed" />
  154. <meta name="select:footer border" content="dotted" />
  155. <meta name="select:footer border" content="double" />
  156. <meta name="select:footer border" content="inset" />
  157. <meta name="select:footer border" content="outset" />
  158. <meta name="select:footer border" content="groove" />
  159. <meta name="select:footer border" content="ridge" />
  160.  
  161. <meta name="select:footer border size" content="0" />
  162. <meta name="select:footer border size" content="1" />
  163. <meta name="select:footer border size" content="2" />
  164. <meta name="select:footer border size" content="3" />
  165. <meta name="select:footer border size" content="4" />
  166. <meta name="select:footer border size" content="5" />
  167.  
  168. <meta name="select:round border" content="0" />
  169. <meta name="select:round border" content="3" />
  170. <meta name="select:round border" content="5" />
  171. <meta name="select:round border" content="10" />
  172.  
  173. <meta name="select:photoset gap" content="0" />
  174. <meta name="select:photoset gap" content="1" />
  175. <meta name="select:photoset gap" content="2" />
  176. <meta name="select:photoset gap" content="3" />
  177. <meta name="select:photoset gap" content="4" />
  178. <meta name="select:photoset gap" content="5" />
  179. <meta name="select:photoset gap" content="10" />
  180.  
  181. <meta name="select:post margin" content="20" />
  182. <meta name="select:post margin" content="30" />
  183. <meta name="select:post margin" content="40" />
  184. <meta name="select:post margin" content="50" />
  185. <meta name="select:post margin" content="75" />
  186. <meta name="select:post margin" content="100" />
  187.  
  188. <meta name="text:title size" content="20" />
  189. <meta name="text:title font" content="consolas" />
  190. <meta name="text:title" content="title" />
  191. <meta name="text:font family" content="consolas" />
  192. <meta name="text:font size" content="13" />
  193. <meta name="text:description" content="description" />
  194. <meta name="text:icon hover" content="enable with options" />
  195. <meta name="text:link 1" content="01">
  196. <meta name="text:link 1 URL" content="/">
  197. <meta name="text:link 2" content="02">
  198. <meta name="text:link 2 URL" content="/">
  199. <meta name="text:link 3" content="03">
  200. <meta name="text:link 3 URL" content="/">
  201. <meta name="text:link 4" content="04">
  202. <meta name="text:link 4 URL" content="/">
  203. <meta name="text:redirect" content="/tagged/0">
  204. <meta name="text:html entity" content="9733">
  205.  
  206. <meta name="if:250" content="0" />
  207. <meta name="if:500" content="0" />
  208. <meta name="if:icon hover" content="0" />
  209. <meta name="if:custom cursor" content="0"/>
  210. <meta name="if:cover bg" content="0" />
  211. <meta name="if:cover header bg" content="0" />
  212. <meta name="if:glow txt" content="0" />
  213. <meta name="if:bold link" content="0" />
  214. <meta name="if:italic link" content="0" />
  215. <meta name="if:underline link" content="0" />
  216. <meta name="if:rainbow link hover" content="0" />
  217. <meta name="if:hide title" content="0" />
  218. <meta name="if:hide desc" content="0" />
  219. <meta name="if:hide captions" content="0" />
  220. <meta name="if:float symbol" content="0" />
  221. <meta name="if:rainbow title" content="0" />
  222. <meta name="if:rainbow border" content="0"/>
  223. <meta name="if:redirect" content="0" />
  224.  
  225. <style type="text/css">
  226.  
  227. ::-moz-selection {
  228. background: {color:select bg};
  229. color: {color:select text};}
  230.  
  231. ::selection {
  232. background: {color:select bg};
  233. color: {color:select text};}
  234.  
  235.  
  236. ::-webkit-scrollbar {
  237. width: 10px;
  238. }
  239.  
  240. ::-webkit-scrollbar-track {
  241. background: {color:bg};
  242. }
  243.  
  244. ::-webkit-scrollbar-thumb {
  245. background-color: {color:link};
  246. }
  247.  
  248. {block:IfCustomCursor}
  249. body, *, a, a:hover {cursor:url({image:cursor}), auto;}{/block:IfCustomCursor}
  250. {block:IfNotCustomCursor}
  251. a, a:hover {cursor: help;}
  252. {/block:IfNotCustomCursor}
  253.  
  254. pre {
  255. white-space: pre-line;
  256. overflow-wrap: break-word;
  257. word-wrap: break-word;
  258. -ms-hyphens: auto;
  259. -moz-hyphens: auto;
  260. -webkit-hyphens: auto;
  261. hyphens: auto;
  262. }
  263.  
  264. body {
  265. margin: 0;
  266. overflow-x: hidden;
  267. line-height: 100%;
  268. color: {color:text};
  269. font-family: {text:font family};
  270. font-size: {text:font size}px;
  271. {block:ifGlowTxt}
  272. text-shadow: 0 0 3px {color:text glow};
  273. {/block:ifGlowTxt}
  274. background: {color:bg} url("{image:bg}") fixed;
  275. {block:IfCoverBg}
  276. background-image: url("{image:bg}") no-repeat center center fixed;
  277. -webkit-background-size: cover;
  278. -moz-background-size: cover;
  279. -o-background-size: cover;
  280. background-size: cover;
  281. {/block:IfCoverBg}
  282. -webkit-font-smoothing: antialiased;
  283. text-rendering: optimizeLegibility;
  284. -moz-osx-font-smoothing: grayscale;
  285. opacity: 0;
  286. transition: opacity 2s;
  287. }
  288.  
  289. img {max-width: 100%;}
  290. p { margin: 0;}
  291. h1,h2,h3 {margin: 0;}
  292. blockquote {
  293. margin: 0 0 0 10px;
  294. border-left: 1px solid {color:text};
  295. padding-left: 10px;
  296. }
  297. ul {
  298. list-style: square;
  299. color: {color:link};
  300. {block:ifGlowTxt}
  301. text-shadow: 0 0 3px {color:link glow};
  302. {/block:ifGlowTxt}
  303. }
  304.  
  305. a:link, a:active, a:visited {
  306. color: {color:link};
  307. {block:ifGlowTxt}
  308. text-shadow: 0 0 3px {color:link glow};
  309. {/block:ifGlowTxt}
  310. {block:IfBoldLink}
  311. font-weight: bold;{/block:IfBoldLink}
  312. {block:IfItalicLink}
  313. font-style: italic;{/block:IfItalicLink}
  314. {block:IfNotUnderlineLink}
  315. text-decoration: none;{/block:IfNotUnderlineLink}
  316. {block:IfUnderlineLink}
  317. text-decoration: underline;{/block:IfUnderlineLink}
  318. -webkit-transition: all 0.4s ease-in-out;
  319. -moz-transition: all 0.4s ease-in-out;
  320. -o-transition: all 0.4s ease-in-out;
  321. -ms-transition: all 0.4s ease-in-out;
  322. transition: all 0.4s ease-in-out;
  323. }
  324.  
  325. .desc a:hover, .sidebar a:hover, .footer a:hover, a:hover {
  326. {block:IfBoldLink}
  327. font-weight: bold;{/block:IfBoldLink}
  328. color: {color:link hover};
  329. {block:ifGlowTxt}
  330. text-shadow: 0 0 3px {color:link hover glow};
  331. {/block:ifGlowTxt}
  332. -webkit-transition: all 0.4s ease-in-out;
  333. -moz-transition: all 0.4s ease-in-out;
  334. -o-transition: all 0.4s ease-in-out;
  335. -ms-transition: all 0.4s ease-in-out;
  336. transition: all 0.4s ease-in-out;
  337. {block:IfRainbowLinkHover}
  338. -webkit-animation:rainbow 1s infinite;
  339. -ms-animation:rainbow 1s infinite;
  340. -o-animation:rainbow 1s infinite;
  341. animation:rainbow 1s infinite;
  342. {/block:IfRainbowLinkHover}
  343.  
  344. }
  345.  
  346. {block:IfRainbowLinkHover}
  347. @-webkit-keyframes rainbow {
  348. 0% {color: #ff0000;}
  349. 10% {color: #ff8000;}
  350. 20% {color: #ffff00;}
  351. 30% {color: #80ff00;}
  352. 40% {color: #00ff00;}
  353. 50% {color: #00ff80;}
  354. 60% {color: #00ffff;}
  355. 70% {color: #0080ff;}
  356. 80% {color: #0000ff;}
  357. 90% {color: #8000ff;}
  358. 100% {color: #ff0080;}
  359. }
  360. {/block:IfRainbowLinkHover}
  361.  
  362. .content {
  363. margin: auto;
  364. {block:ifNot500}{block:ifNot250}
  365. width: 440px;
  366. {/block:ifNot250}{/block:ifNot500}
  367. {block:if250}width: 290px;{/block:if250}
  368. {block:if500}width: 540px;{/block:if500}
  369. }
  370.  
  371. .title {
  372. margin-top: 50px;
  373. margin-bottom: 30px;
  374. text-align: center;
  375. font-size: {text:title size}px;
  376. font-family: {text:title font};
  377. color: {color:title};
  378. {block:ifGlowTxt}
  379. text-shadow: 0 0 3px {color:title glow};
  380. {/block:ifGlowTxt}
  381. }
  382.  
  383. .sidebar {
  384. background: {color:header bg};
  385. background-image: url({image:header bg});
  386. {block:ifCoverHeaderBg}
  387. background-size: 100% 100%;
  388. {/block:ifCoverHeaderBg}
  389. {block:ifHideTitle}
  390. margin-top: 50px;
  391. {/block:ifHideTitle}
  392. {block:ifNot500}{block:ifNot250}
  393. width: 400px;
  394. {/block:ifNot250}{/block:ifNot500}
  395. {block:if250}width: 250px;{/block:if250}
  396. {block:if500}width: 500px;{/block:if500}
  397. border: {select:header border size}px {select:header border} {color:header border};
  398. border-radius: {select:round border}px;
  399. {block:IfRainbowBorder}
  400. --angle: 0deg;
  401. border: {select:header border size}px {select:header border};
  402. border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  403. animation: 7s rotate linear infinite;
  404. {block:IfRainbowBorder}
  405. }
  406.  
  407. {block:IfRainbowBorder}
  408. @keyframes rotate {
  409. to {
  410. --angle: 360deg;
  411. }
  412. }
  413.  
  414. @property --angle {
  415. syntax: '<angle>';
  416. initial-value: 0deg;
  417. inherits: false;
  418. }
  419. {/block:IfRainbowBorder}
  420.  
  421. .sidebar a {
  422. color: {color:header link};
  423. {block:ifGlowTxt}
  424. text-shadow: 0 0 3px {color:header link glow};
  425. {/block:ifGlowTxt}
  426. }
  427.  
  428. .icon img {
  429. max-width: 100%;
  430. display: block;
  431. border-radius: {select:round border}px;
  432. }
  433.  
  434. .desc {
  435. margin-top: 20px;
  436. text-align: center;
  437. color: {color:desc text};
  438. {block:ifGlowTxt}
  439. text-shadow: 0 0 3px {color:desc text glow};
  440. {/block:ifGlowTxt}
  441. }
  442.  
  443. .desc a {
  444. color: {color:desc link};
  445. {block:ifGlowTxt}
  446. text-shadow: 0 0 3px {color:desc link glow};
  447. {/block:ifGlowTxt}
  448. }
  449.  
  450. .link {
  451. text-align: center;
  452. }
  453.  
  454. .contain {
  455. {block:ifHideDesc}
  456. margin-top: 50px;
  457. {/block:ifHideDesc}
  458. {block:ifNotHideDesc}
  459. margin-top: {select:post margin}px;
  460. {/block:ifNotHideDesc}
  461. }
  462.  
  463. .posts {
  464. {block:ifNot500}{block:ifNot250}
  465. width: 400px;
  466. {/block:ifNot250}{/block:ifNot500}
  467. {block:if250}width: 250px;{/block:if250}
  468. {block:if500}width: 500px;{/block:if500}
  469. margin-bottom: {select:post margin}px;
  470. text-align: left;
  471. }
  472.  
  473. [photoset-layout] img , .pic img {
  474. display: block;
  475. border-radius: {select:round border}px;
  476. -webkit-transition: all 0.4s ease-in-out;
  477. -moz-transition: all 0.4s ease-in-out;
  478. -o-transition: all 0.4s ease-in-out;
  479. -ms-transition: all 0.4s ease-in-out;
  480. transition: all 0.4s ease-in-out;
  481. }
  482.  
  483. [photoset-layout] img:hover, .pic img:hover {
  484. opacity: 0.5;
  485. -webkit-transition: all 0.4s ease-in-out;
  486. -moz-transition: all 0.4s ease-in-out;
  487. -o-transition: all 0.4s ease-in-out;
  488. -ms-transition: all 0.4s ease-in-out;
  489. transition: all 0.4s ease-in-out;
  490. }
  491.  
  492. [photoset-layout] {
  493. grid-gap: {select:photoset gap}px;
  494.  
  495. }
  496.  
  497.  
  498. .cap {
  499. margin-top: 10px;
  500. }
  501.  
  502.  
  503. .tumblr_parent {
  504. margin:10px 10px 10px 20px;
  505. padding: 0px 10px;
  506. border-left: 1px solid {color:text};
  507. line-height: 110%;
  508. }
  509.  
  510.  
  511. .footer {
  512. background: {color:footer bg};
  513. background-image: url({image:footer bg});
  514. margin-top: 10px;
  515. padding: 10px;
  516. border: {select:footer border size}px {select:footer border} {color:footer border};
  517. border-radius: {select:round border}px;
  518. {block:IfRainbowBorder}
  519. --angle: 0deg;
  520. border: {select:footer border size}px {select:footer border};
  521. border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  522. animation: 7s rotate linear infinite;
  523. {block:IfRainbowBorder}
  524. }
  525.  
  526. {block:IfRainbowBorder}
  527. @keyframes rotate {
  528. to {
  529. --angle: 360deg;
  530. }
  531. }
  532.  
  533. @property --angle {
  534. syntax: '<angle>';
  535. initial-value: 0deg;
  536. inherits: false;
  537. }
  538. {/block:IfRainbowBorder}
  539.  
  540. .footer a {
  541. color: {color:footer text};
  542. {block:ifGlowTxt}
  543. text-shadow: 0 0 3px {color:footer glow};
  544. {/block:ifGlowTxt}
  545. }
  546.  
  547. .notecount {
  548. float: right;
  549. display: inline;
  550. {block:IfNotUnderlineLink}
  551. text-decoration: none;{/block:IfNotUnderlineLink}
  552. {block:IfUnderlineLink}
  553. text-decoration: underline;{/block:IfUnderlineLink}
  554. }
  555.  
  556. .time-ago {
  557. display: inline;
  558. }
  559.  
  560. .tags {
  561. margin-top: 10px;
  562. text-align: center;
  563. max-height:0px;
  564. opacity: 0;
  565. -webkit-transition: all 0.7s ease;
  566. transition: all 0.7s ease;
  567. -moz-transition: all 0.7s ease;
  568. -o-transition: all 0.7s ease;
  569. }
  570.  
  571. .posts:hover .tags{
  572. max-height: 300px;
  573. opacity:1;
  574. -webkit-transition: all 0.7s ease;
  575. transition: all 0.7s ease;
  576. -moz-transition: all 0.7s ease;
  577. -o-transition: all 0.7s ease;}
  578.  
  579. ol.notes {
  580. padding: 0px;
  581. margin: 25px 0px;
  582. list-style-type: none;
  583. border: 0;
  584. }
  585.  
  586. ol.notes li.note {
  587. border-top: 2px {select:footer Border} {color:footer border};
  588. padding: 10px;
  589. text-transform: uppercase;
  590. {block:IfRainbowBorder}
  591. --angle: 0deg;
  592. border-top: {select:footer border size}px {select:footer border};
  593. border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  594. animation: 7s rotate linear infinite;
  595. {block:IfRainbowBorder}
  596. }
  597.  
  598. {block:IfRainbowBorder}
  599. @keyframes rotate {
  600. to {
  601. --angle: 360deg;
  602. }
  603. }
  604.  
  605. @property --angle {
  606. syntax: '<angle>';
  607. initial-value: 0deg;
  608. inherits: false;
  609. }
  610. {/block:IfRainbowBorder}
  611.  
  612. ol.notes li.note img.avatar {
  613. vertical-align: middle;
  614. display: inline-block;
  615. margin-right: 10px;
  616. width: 25px;
  617. height: 25px;
  618. image-rendering: pixelated;
  619. }
  620.  
  621. .pagination {
  622. text-align: center;
  623. font-size: 36px;
  624. margin-bottom: 50px;
  625. {block:ifNot500}{block:ifNot250}
  626. width: 400px;
  627. {/block:ifNot250}{/block:ifNot500}
  628. {block:if250}width: 250px;{/block:if250}
  629. {block:if500}width: 500px;{/block:if500}
  630. }
  631.  
  632. .c {
  633. bottom: 5px; left: 5px; padding: 15px; font-size: 16px; position: fixed;
  634. }
  635. .c a {
  636. color: {color:link};
  637. {block:ifGlowTxt}
  638. text-shadow: 0 0 3px {color:link glow};
  639. {/block:ifGlowTxt}
  640. text-decoration: none;
  641. }
  642.  
  643.  
  644. .spotify_audio_player {
  645. height:80px!important;
  646. width:100%!important;}
  647.  
  648. .soundcloud_audio_player {
  649. height:150px!important;
  650. width:100%!important;}
  651.  
  652.  
  653. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  654. -webkit-filter: opacity(0);
  655. filter: opacity(0);
  656. transition: all 0.3s ease-out;
  657. -o-transition: all 0.3s ease-out;
  658. -webkit-transition: all 0.3s ease-out;
  659. -moz-transition: all 0.3s ease-out;
  660. }
  661.  
  662. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  663. -webkit-filter: opacity(1);
  664. filter: opacity(1);
  665. transition: all 0.3s ease-out;
  666. -o-transition: all 0.3s ease-out;
  667. -webkit-transition: all 0.3s ease-out;
  668. -moz-transition: all 0.3s ease-out;
  669. }
  670.  
  671.  
  672.  
  673. #s-m-t-tooltip {
  674. border: 1px solid {color:footer border};
  675. padding: 5px 7px;
  676. background: {color:tooltip bg};
  677. {block:ifGlowTxt}
  678. text-shadow: 0 0 3px {color:tooltip glow};
  679. {/block:ifGlowTxt}
  680. border: 1px solid {color:tooltip border};
  681. text-transform: none;
  682. text-align: center;
  683. transition: all 0.3s ease-out;
  684. -o-transition: all 0.3s ease-out;
  685. -webkit-transition: all 0.3s ease-out;
  686. -moz-transition: all 0.3s ease-out;
  687. color: {color:tooltip txt};
  688. font-family: {text:font family};
  689. font-size: {select:font size}px;
  690. max-width: 200px;
  691. word-wrap: break-word;
  692. display: block;
  693. margin: -30px 0px -10px 10px;
  694. z-index: 999999999999;
  695. {block:IfRainbowBorder}
  696. --angle: 0deg;
  697. border: 1px {select:footer border};
  698. border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  699. animation: 7s rotate linear infinite;
  700. {block:IfRainbowBorder}
  701. }
  702.  
  703. {block:IfRainbowBorder}
  704. @keyframes rotate {
  705. to {
  706. --angle: 360deg;
  707. }
  708. }
  709.  
  710. @property --angle {
  711. syntax: '<angle>';
  712. initial-value: 0deg;
  713. inherits: false;
  714. }
  715.  
  716. {/block:IfRainbowBorder}
  717.  
  718. .q { display: inline-block; padding-bottom: 5px;}
  719. .ask {
  720.  
  721. border-bottom: {select:footer border size}px {select:footer border} {color:footer border};
  722. {block:IfRainbowBorder}
  723. --angle: 0deg;
  724. border-bottom: {select:footer border size}px {select:footer border};
  725. border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  726. animation: 7s rotate linear infinite;
  727. {block:IfRainbowBorder}
  728. }
  729.  
  730. {block:IfRainbowBorder}
  731. @keyframes rotate {
  732. to {
  733. --angle: 360deg;
  734. }
  735. }
  736.  
  737. @property --angle {
  738. syntax: '<angle>';
  739. initial-value: 0deg;
  740. inherits: false;
  741. }
  742. {/block:IfRainbowBorder}
  743. .ans {
  744. padding-top: 5px;
  745. }
  746. </style>
  747.  
  748.  
  749. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  750.  
  751. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  752. <script>
  753. (function($){
  754. $(document).ready(function(){
  755. $("[title]").style_my_tooltips();
  756. });
  757. })(jQuery);
  758. </script>
  759.  
  760.  
  761. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  762. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  763. <script> $(function(){ $('.posts').unnest({
  764. yourCaption: ".cap",
  765. wrapName: ".tumblr_parent",
  766. newCaptionUsername: false,
  767. originalPostCaptionUsername: false,
  768. tumblrAvatars: false,
  769. tumblrAvatarClass: ".tumblr_avatar",
  770. usernameColon: false
  771. }); }); </script>
  772.  
  773.  
  774. </HEAD>
  775.  
  776. <body onload="document.body.style.opacity='1'">
  777.  
  778. <div class="c">
  779. <a href="https://ps1.tumblr.com/" data-toggle="tooltip" title="ps1">#</a>
  780. </div>
  781.  
  782.  
  783. <div class="content">
  784. <center>
  785.  
  786. {block:ifNotHideTitle}
  787. <div class="title">
  788. {block:ifNotRainbowTitle}
  789. {text:title}
  790. {/block:ifNotRainbowTitle}
  791. {block:ifRainbowTitle}
  792. <span id="rainbow">{text:title}</span>
  793. {/block:ifRainbowTitle}
  794. </div>
  795. {/block:ifNotHideTitle}
  796.  
  797. <div class="sidebar">
  798.  
  799. <table style="width: 100%; padding: 5px">
  800. <tbody>
  801. <tr>
  802. <td style="text-align: left;"><a href="{text:link 1 url}">{text:link 1}</a></td>
  803. <td></td>
  804. <td style="text-align: right"><a href="{text:link 2 url}">{text:link 2}</a></td>
  805. </tr>
  806. <tr>
  807. <td></td>
  808. <td>
  809. <center><div class="icon">
  810. <a href="/" data-toggle="tooltip" {block:ifIconHover}title="{text:icon hover}"{/block:ifIconHover}><img src="{image:icon}"></a>
  811. </div></center>
  812. </td>
  813. <td></td>
  814. </tr>
  815. <tr>
  816. <td style="text-align: left"><a href="{text:link 3 url}">{text:link 3}</a></td>
  817. <td></td>
  818. <td style="text-align: right"><a href="{text:link 4 url}">{text:link 4}</a></td>
  819. </tr>
  820. </tbody>
  821. </table>
  822.  
  823. </div>
  824.  
  825. {block:ifNotHideDesc}
  826. <div class="desc">
  827. {text:description}
  828. </div>
  829. {/block:ifNotHideDesc}
  830.  
  831. <div class="contain">
  832. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  833. <div class="posts">
  834.  
  835. {block:Text}
  836. {block:Title}{Title}{/block:Title}
  837. {Body}
  838. {/block:Text}
  839.  
  840. {block:Photo}
  841. {block:IndexPage}
  842. <div class="pic">
  843. <a href="{Permalink}">
  844. {block:ifNot500}{block:ifNot250}
  845. <img src="{PhotoURL-400}">
  846. {/block:ifNot250}{/block:ifNot500}
  847. {block:if250}<img src="{PhotoURL-250}">{/block:if250}
  848. {block:if500}<img src="{PhotoURL-500}">{/block:if500}
  849. </a></div>
  850. {/block:IndexPage}
  851. {block:PermalinkPage}
  852. <div class="pic">
  853. {LinkOpenTag}{block:ifNot500}{block:ifNot250}<img src="{PhotoURL-400}">{/block:ifNot250}{block:ifNot500}{LinkCloseTag}
  854. </div>
  855. {/block:PermalinkPage}
  856. {/block:Photo}
  857.  
  858. {block:Photoset}
  859. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  860. {/block:Photoset}
  861.  
  862. {block:Audio}
  863. {block:AudioEmbed}
  864. <div style="height: 85px">
  865. {block:ifNot500}{block:ifNot250}
  866. {AudioEmbed-400}
  867. {/block:ifNot250}{/block:ifNot500}
  868. {block:if250}{AudioEmbed-250}{/block:if250}
  869. {block:if500}{AudioEmbed-500}{/block:if500}
  870. </div>
  871. {/block:AudioEmbed}
  872. {/block:Audio}
  873.  
  874. {block:Video}
  875. {block:ifNot500}{block:ifNot250}
  876. {VideoEmbed-400}
  877. {/block:ifNot250}{/block:ifNot500}
  878. {block:if250}{VideoEmbed-250}{/block:if250}
  879. {block:if500}{VideoEmbed-500}{/block:if500}
  880. {/block:Video}
  881.  
  882. {block:Answer}
  883. <div class="ask">{Asker}: <div class="q">{Question}</div></div>
  884. <div class="ans">{Answer}</div>
  885. {/block:Answer}
  886.  
  887. {block:Quote}
  888. <p>&#8220;{Quote}&#8221;</p>
  889. {block:Source}<p>&mdash; {Source}</p>{/block:Source}
  890. {/block:Quote}
  891.  
  892. {block:Link}
  893. <a href="{URL}" target="blank">{Name}</a>
  894. {block:Description}{Description}{/block:Description}
  895. {/block:Link}
  896.  
  897. {block:Chat}
  898. {block:Title}{Title}{/block:Title}
  899. {block:Lines}
  900. <div class="{Alt} user_{UserNumber}">
  901. {block:Label}{Label}{/block:Label} {Line}
  902. </div>
  903. {/block:Lines}
  904. {/block:Chat}
  905.  
  906. {block:ifNotHideCaptions}
  907. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  908. {/block:ifNotHideCaptions}
  909.  
  910. {block:IndexPage}
  911. <div class="footer">
  912. <a href="{Permalink}"><div class="time-ago">{TimeStamp}</div></a>
  913. <a href="{ReblogURL}" title="reblog?"><div class="notecount">{NoteCount}</div></a>
  914. </div>
  915.  
  916.  
  917. {block:HasTags}
  918. <div class="tags">
  919. {block:Tags}
  920. <a href="{TagURL}">#{Tag}</a>
  921. {/block:Tags}
  922. </div>
  923. {/block:HasTags}
  924. {/block:IndexPage}
  925.  
  926.  
  927. {block:PermalinkPage}
  928.  
  929. {block:ifHideCaptions}
  930. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  931. {/block:ifHideCaptions}
  932.  
  933. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  934. {/block:PermalinkPage}
  935.  
  936. {block:ContentSource}
  937. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  938. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  939. {/block:SourceLogo}
  940. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  941. {/block:ContentSource}
  942.  
  943. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  944.  
  945. </div> <!-- posts -->
  946. {/block:Posts}
  947.  
  948. {block:IndexPage}
  949. <div class="pagination">
  950. {block:PreviousPage}<a href="{PreviousPage}">&#171;</a> {/block:PreviousPage}{block:NextPage}<a href="{NextPage}" style="margin-left: 20px">&#187;</a></p>{/block:NextPage}{/block:IndexPage}</div>
  951. </div> <!-- container 4 post -->
  952.  
  953. </center>
  954. </div> <!-- content -->
  955.  
  956. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  957. <script type="text/javascript">
  958. $(document).ready(function() {
  959. $(".time-ago").timeAgo({
  960. time: "letter",
  961. });
  962. });
  963. </script>
  964.  
  965. <script>
  966. var $container = $('.posts');
  967. $container.find('.notecount').each(function(){
  968. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  969. if (n > 999) {
  970. n = Math.floor(n / 100) / 10;
  971. $(this).text(n + 'n');
  972. }
  973. });
  974. </script>
  975.  
  976. {block:ifFloatSymbol}
  977. <script type="text/javascript">
  978. // <![CDATA[
  979. var colour="{color:float symbol}"; // what colour are the blobs
  980. var speed=85; // speed of animation, lower is faster
  981. var blobs=15; // how many blobs are in the jar
  982. var charc=String.fromCharCode({text:html entity}); // you must use HTML entity
  983.  
  984. /***************************\
  985. * Blobs in a Jar Effect *
  986. *(c)2012-13 mf2fm web-design*
  987. * http://www.mf2fm.com/rv *
  988. * DON'T EDIT BELOW THIS BOX *
  989. \***************************/
  990.  
  991. var div;
  992. var xpos=new Array();
  993. var ypos=new Array();
  994. var zpos=new Array();
  995. var dx=new Array();
  996. var dy=new Array();
  997. var dz=new Array();
  998. var blob=new Array();
  999. var swide=800;
  1000. var shigh=600;
  1001. var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;
  1002.  
  1003. function addLoadEvent(funky) {
  1004. var oldonload=window.onload;
  1005. if (typeof(oldonload)!='function') window.onload=funky;
  1006. else window.onload=function() {
  1007. if (oldonload) oldonload();
  1008. funky();
  1009. }
  1010. }
  1011.  
  1012. addLoadEvent(fill_the_jar);
  1013.  
  1014. function fill_the_jar() {
  1015. var i, dvs;
  1016. div=document.createElement('div');
  1017. dvs=div.style;
  1018. dvs.position='fixed';
  1019. dvs.left='0px';
  1020. dvs.top='0px';
  1021. dvs.width='1px';
  1022. dvs.height='1px';
  1023. document.body.appendChild(div);
  1024. set_width();
  1025. for (i=0; i<blobs; i++) {
  1026. add_blob(i);
  1027. jamjar(i);
  1028. }
  1029. }
  1030.  
  1031. function add_blob(ref) {
  1032. var dv, sy;
  1033. dv=document.createElement('div');
  1034. sy=dv.style;
  1035. sy.position='absolute';
  1036. sy.textAlign='center';
  1037. if (ie_version && ie_version<10) {
  1038. sy.fontSize="10px";
  1039. sy.width="100px";
  1040. sy.height="100px";
  1041. sy.paddingTop="40px";
  1042. sy.color=colour;
  1043. dv.appendChild(document.createTextNode(charc));
  1044. }
  1045. else if (ie_version) {
  1046. sy.fontSize="1px";
  1047. sy.width="0px";
  1048. sy.height="0px";
  1049. }
  1050. else {
  1051. dv.appendChild(document.createTextNode(charc));
  1052. sy.color='rgba(0,0,0,0)';
  1053. }
  1054. ypos[ref]=Math.floor(shigh*Math.random());
  1055. dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  1056. xpos[ref]=Math.floor(swide*Math.random());
  1057. dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  1058. zpos[ref]=Math.random()*20;
  1059. dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
  1060. blob[ref]=dv;
  1061. div.appendChild(blob[ref]);
  1062. set_blob(ref);
  1063. }
  1064.  
  1065. function rejig(ref, xy) {
  1066. if (xy=='y') {
  1067. dx[ref]=(0.5+Math.random())*sign(dx[ref]);
  1068. dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  1069. }
  1070. else {
  1071. dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  1072. dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  1073. }
  1074. }
  1075.  
  1076. function sign(a) {
  1077. if (a<0) return (-2);
  1078. else if (a>0) return (2);
  1079. else return (0);
  1080. }
  1081.  
  1082. function set_blob(ref) {
  1083. var sy;
  1084. sy=blob[ref].style;
  1085. sy.top=ypos[ref]+'px';
  1086. sy.left=xpos[ref]+'px';
  1087. if (ie_version && ie_version<10) {
  1088. sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
  1089. sy.fontSize=30-zpos[ref]+"px";
  1090. }
  1091. else if (ie_version) {
  1092. sy.boxShadow="0px 0px 40px "+zpos[ref]+"px "+colour;
  1093. }
  1094. else {
  1095. sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
  1096. sy.fontSize=40+zpos[ref]+'px';
  1097. }
  1098. }
  1099.  
  1100. function jamjar(ref) {
  1101. if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
  1102. ypos[ref]+=dy[ref];
  1103. if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
  1104. xpos[ref]+=dx[ref];
  1105. if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
  1106. zpos[ref]+=dz[ref];
  1107. set_blob(ref);
  1108. setTimeout("jamjar("+ref+")", speed);
  1109. }
  1110.  
  1111. window.onresize=set_width;
  1112. function set_width() {
  1113. var sw_min=999999;
  1114. var sh_min=999999;
  1115. if (document.documentElement && document.documentElement.clientWidth) {
  1116. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  1117. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  1118. }
  1119. if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  1120. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  1121. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  1122. }
  1123. if (document.body.clientWidth) {
  1124. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  1125. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  1126. }
  1127. if (sw_min==999999 || sh_min==999999) {
  1128. sw_min=800;
  1129. sh_min=600;
  1130. }
  1131. swide=sw_min;
  1132. shigh=sh_min;
  1133. }
  1134. // ]]>
  1135. </script>
  1136. {/block:ifFloatSymbol}
  1137.  
  1138. {block:ifRainbowTitle}
  1139. <script type="text/javascript">
  1140. // <![CDATA[
  1141. var speed=100; // speed colours change, 1 second = 1000
  1142. var glow=3; // can be set from '0' for no glow, to 10
  1143. var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to
  1144. var alink="/"; // page to link text to (set to ="" for no link)
  1145.  
  1146. /****************************
  1147. * Rainbow Text Effect *
  1148. *(c)2003-13 mf2fm web-design*
  1149. * http://www.mf2fm.com/rv *
  1150. * DON'T EDIT BELOW THIS BOX *
  1151. ****************************/
  1152. var rainbow, raintxt, raincnt=0;
  1153.  
  1154. function addLoadEvent(funky) {
  1155. var oldonload=window.onload;
  1156. if (typeof(oldonload)!='function') window.onload=funky;
  1157. else window.onload=function() {
  1158. if (oldonload) oldonload();
  1159. funky();
  1160. }
  1161. }
  1162.  
  1163. addLoadEvent(regenbogen);
  1164.  
  1165. function regenbogen() { if (document.getElementById) {
  1166. var i, rainbeau;
  1167. rainbow=document.getElementById("rainbow");
  1168. raintxt=rainbow.firstChild.nodeValue;
  1169. while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
  1170. for (i=0; i<raintxt.length; i++) {
  1171. rainbeau=document.createElement("span");
  1172. rainbeau.setAttribute("id", "rain"+i);
  1173. rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
  1174. if (alink) {
  1175. rainbeau.style.cursor="pointer";
  1176. rainbeau.onclick=function() { top.location.href=alink; }
  1177. }
  1178. rainbow.appendChild(rainbeau);
  1179. }
  1180. rainbow=setInterval ("raining()", speed);
  1181. }}
  1182.  
  1183. function raining() {
  1184. var i, c;
  1185. for (i=0; i<raintxt.length; i++) {
  1186. c=raincol[(i+raincnt)%raincol.length];
  1187. document.getElementById("rain"+i).style.color=c;
  1188. if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  1189. }
  1190. raincnt++;
  1191. }
  1192. // ]]>
  1193. </script>
  1194. {/block:ifRainbowTitle}
  1195.  
  1196.  
  1197.  
  1198. </BODY>
  1199.  
  1200. </HTML>
  1201.  
  1202.  
Add Comment
Please, Sign In to add comment