API tools faq
paste
codesbyjack

THEME #20 marshal / made by jinsoouls

codesbyjack
May 17th, 2020 (edited)
1,968
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. marshal by jinsoouls
  6. you know the deal, the usual rules
  7. apply, don't remove credit,
  8. repost or claim as your own!
  9.  
  10. -->
  11.  
  12. <meta name="color:background" content="#eeeeee"/>
  13. <meta name="color:container" content="#f6f6f6"/>
  14. <meta name="color:posts" content="#ffffff"/>
  15. <meta name="color:border" content="#eeeeee"/>
  16. <meta name="color:accent 1" content="#dfd6d4"/>
  17. <meta name="color:accent 2" content="#797979"/>
  18. <meta name="color:accent text" content="#ffffff"/>
  19. <meta name="color:text" content="#313131"/>
  20. <meta name="color:title" content="#414141"/>
  21. <meta name="color:bold" content="#7e7e7e"/>
  22. <meta name="color:italic" content="#7e7e7e"/>
  23. <meta name="color:border" content="#eeeeee"/>
  24. <meta name="color:link" content="#4c4c4c"/>
  25. <meta name="color:hover link" content="#b0b0b0"/>
  26.  
  27. <meta name="image:background" content=""/>
  28. <meta name="image:sidebar" content=""/>
  29.  
  30. <meta name="text:title" content="my missing puzzle piece"/>
  31. <meta name="text:description" content="as the world iā€™m heading towards and matching up to is getting bigger It makes me feel an emptiness somehow"/>
  32.  
  33. <meta name="text:free link" content="/"/>
  34. <meta name="text:free link title" content="free"/>
  35.  
  36. <meta name="text:link 1" content="/1"/>
  37. <meta name="text:link 1 title" content="link one"/>
  38. <meta name="text:link 2" content="/2"/>
  39. <meta name="text:link 2 title" content="link two"/>
  40. <meta name="text:link 3" content="/3"/>
  41. <meta name="text:link 3 title" content="link three"/>
  42. <meta name="text:link 4" content="/4"/>
  43. <meta name="text:link 4 title" content="link four"/>
  44. <meta name="text:link 5" content="/5"/>
  45. <meta name="text:link 5 title" content="link five"/>
  46. <meta name="text:link 6" content="/6"/>
  47. <meta name="text:link 6 title" content="link six"/>
  48.  
  49. <meta name="if:title shadow" content="0"/>
  50.  
  51. <meta name="text:title font size" content="45"/>
  52. <meta name="text:title margin top" content="95"/>
  53.  
  54. <meta name="select:free link icon" content="heart" title="heart">
  55. <meta name="select:free link icon" content="globe" title="globe">
  56. <meta name="select:free link icon" content="cloud" title="cloud">
  57. <meta name="select:free link icon" content="user" title="user">
  58. <meta name="select:free link icon" content="plus" title="plus">
  59. <meta name="select:free link icon" content="settings" title="settings">
  60. <meta name="select:free link icon" content="moon" title="moon">
  61. <meta name="select:free link icon" content="tag" title="tag">
  62.  
  63. <meta name="select:png width" content="100px" title="100px">
  64. <meta name="select:png width" content="150px" title="150px">
  65. <meta name="select:png width" content="200px" title="200px">
  66. <meta name="select:png width" content="225px" title="225px">
  67. <meta name="select:png width" content="250px" title="250px">
  68. <meta name="select:png width" content="275px" title="275px">
  69. <meta name="select:png width" content="300px" title="300px">
  70. <meta name="select:png width" content="350px" title="350px">
  71.  
  72. <head>
  73.  
  74. <title>{Title}</title>
  75. <link rel="shortcut icon" href="{Favicon}">
  76. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  77. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  78.  
  79. <!-- jquery -->
  80. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  81.  
  82. <!-- script for tooltips -->
  83. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  84.  
  85. <!-- feather icons-->
  86. <script src="https://unpkg.com/feather-icons"></script>
  87.  
  88. <!-- linear icons -->
  89. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  90.  
  91. <!-- google fonts -->
  92. <link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
  93.  
  94. <!-- photoset.css by annathms and espoirthemes -->
  95. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  96.  
  97. <!-- autoresize video script by shythemes -->
  98. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  99.  
  100. <!-- animate.css -->
  101. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  102.  
  103. <style>
  104.  
  105. @font-face { font-family: "mont"; src: url(" https://dl.dropboxusercontent.com/s/gw86uuuybwd8c96/Mont-HeavyDEMO.otf"); }
  106.  
  107. @font-face { font-family: 'forta'; src: url('https://dl.dropboxusercontent.com/s/dnssa7msyhq6ipo/Forta.ttf') ;}
  108.  
  109.  
  110. ::-webkit-scrollbar {
  111. width: 1px;
  112. height: 1px;
  113. background: transparent;
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb {
  117. background: transparent;
  118. }
  119.  
  120. ::selection {
  121. color:{color:accent text};
  122. background-color: {color:accent 2};
  123. }
  124.  
  125. ::-moz-selection {
  126. color:{color:accent text};
  127. background-color: {color:accent 2};
  128. }
  129.  
  130. #s-m-t-tooltip {
  131. max-width:300px;
  132. padding:8px 12px;
  133. margin:20px 7px 2px 20px;
  134. background-color:{color:accent 2};
  135. text-transform:lowercase;
  136. color:{color:accent text};
  137. z-index:999999999999999999999999999999999999;
  138. font-weight:500;
  139. border-radius:7.5px;
  140. box-shadow:0px 0px 10px rgba(0,0,0,0.02);
  141. }
  142.  
  143.  
  144. body {
  145. background:{color:background};
  146. background-image:url({image:background});
  147. margin:0px;
  148. color:{color:text};
  149. font-family: 'Muli', sans-serif;
  150. font-size:11px;
  151. overflow:hidden;
  152. line-height:100%;
  153. }
  154.  
  155. blockquote {
  156. padding-left:20px;
  157. width:auto;
  158. margin-left:10px;
  159. border-left:1px solid {color:border};
  160. }
  161.  
  162. blockquote blockquote {
  163. padding-left:20px;
  164. margin-left:10px;
  165. border-left:1px solid {color:border};
  166. }
  167.  
  168. blockquote img {max-width:100%;}
  169.  
  170. h1 {
  171. font-size:30px;
  172. color:{color:accent 1};
  173. text-align:center;
  174. letter-spacing:1px;
  175. text-transform:lowercase;
  176. line-height:100%;
  177.  
  178. }
  179.  
  180. h2 {
  181. font-size:14px;
  182. color:{color:accent 2};
  183. text-align:center;
  184. line-height:100%;
  185. margin-right:20px;
  186. text-transform:lowercase;
  187. font-weight:normal;
  188. }
  189.  
  190. a {
  191. text-decoration:none;
  192. color:{color:link};
  193. -moz-transition-duration:0.8s;
  194. -webkit-transition-duration:0.8s;
  195. -o-transition-duration:0.8s;
  196. }
  197.  
  198. a:hover {
  199. color:{color:hover link};
  200. -moz-transition-duration:0.8s;
  201. -webkit-transition-duration:0.8s;
  202. -o-transition-duration:0.8s;
  203. }
  204.  
  205. b {color:{color:bold};}
  206. strong {color:{color:bold}}
  207. i {color:{color:italic};}
  208. em {color:{color:italic};}
  209. sub {font-size:11px;}
  210. sup {font-size:11px;}
  211. small {font-size:11px;}
  212.  
  213.  
  214. .container {
  215. width:850px;
  216. height:550px;
  217. background-color:{color:container};
  218. position:absolute;
  219. margin:auto;
  220. top:0; left:0; right:0; bottom:0;
  221. overflow:hidden;
  222. border-radius:10px;
  223. }
  224.  
  225. #entries {
  226. position: absolute;
  227. height:100%;
  228. width:500px;
  229. right:-20px;
  230. overflow:scroll;
  231. z-index:5;
  232. }
  233.  
  234. .post {
  235. padding:20px;
  236. width:350px;
  237. background-color:{color:posts};
  238. margin:50px;
  239. margin-bottom:50px;
  240. line-height:130%;
  241. border-radius:7.5px;
  242. overflow:hidden;
  243. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  244. }
  245.  
  246. .post img {
  247. position:static;
  248. height:auto;
  249. width:auto;
  250. }
  251.  
  252. /* post info styling */
  253. .postinfo-top {
  254. width:calc(100% + 20px);
  255. padding:7.5px 10px;
  256. letter-spacing:0.5px;
  257. border-bottom:1px solid {color:border};
  258. margin:-20px 0px 20px -20px;
  259. display:flex;
  260. justify-content:flex-start;
  261. align-items:center;
  262. }
  263.  
  264. .postinfo {
  265. width:calc(100% + 20px);
  266. padding:7.5px 10px;
  267. letter-spacing:0.5px;
  268. border-top:1px solid {color:border};
  269. margin:20px 0px -20px -20px;
  270. display:flex;
  271. justify-content:flex-end;
  272. align-items:center;
  273. }
  274.  
  275. .post-inner a {
  276. color:{color:text};
  277. text-transform:uppercase;
  278. font-size:8px;
  279. font-weight:700;
  280. display:flex;
  281. flex-direction:row;
  282. justify-content:center;
  283. align-items:center;
  284. }
  285.  
  286. .post-inner span {
  287. color:{color:accent 2};
  288. font-size:11px;
  289. margin-right:4px;
  290. }
  291.  
  292. .dotz {
  293. margin:0px 7.5px;
  294. font-size:6px;
  295. opacity:0.3;
  296. }
  297.  
  298. .reblog-icon {
  299. -moz-transition-duration:0.8s;
  300. -webkit-transition-duration:0.8s;
  301. -o-transition-duration:0.8s;
  302. }
  303.  
  304. #reblogz:hover .reblog-icon {
  305. transform:translate(1.5px,0);
  306. -moz-transition-duration:0.8s;
  307. -webkit-transition-duration:0.8s;
  308. -o-transition-duration:0.8s;
  309. }
  310.  
  311. .tags {
  312. font-size:10px;
  313. text-align:left;
  314. letter-spacing:0.5px;
  315. width:370px;
  316. text-align:center;
  317. line-height:120%;
  318. padding:5px 10px;
  319. margin:-50px 0px 0px 50px;
  320. }
  321.  
  322. .tags b {
  323. margin-right:2px;
  324. text-transform:uppercase;
  325. }
  326.  
  327. .postnote {
  328. background-color:{color:posts};
  329. text-transform:lowercase;
  330. text-align:left;
  331. margin: -20px 0px 50px 50px;
  332. width:370px;
  333. padding: 10px;
  334. border-radius:10px;
  335. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  336. }
  337.  
  338. .postnote li {
  339. margin:5px 0px;
  340. }
  341. /* end post info styling */
  342.  
  343. /* different post types styling */
  344. .question {
  345. padding:20px 10px;
  346. text-align:center;
  347. border:1px solid {color:border};
  348. border-bottom:none;
  349. border-radius:7.5px 7.5px 0px 0px;
  350. }
  351.  
  352. .askerdiv {
  353. padding:5px 10px;
  354. text-align:right;
  355. border:1px solid {color:border};
  356. color:{color:text};
  357. text-transform:uppercase;
  358. font-size:10px;
  359. letter-spacing:0.25px;
  360. border-radius:0px 0px 7.5px 7.5px;
  361. }
  362.  
  363. .askerdiv a {
  364. color:{color:text};
  365. font-weight:700;
  366. }
  367.  
  368. .askerdiv .askbar {
  369. display:inline-block;
  370. height:1px;
  371. width:100px;
  372. background-color:{color:accent 1};
  373. transform:translateY(-2.5px);
  374. margin-right:10px;
  375. }
  376.  
  377.  
  378. .quotediv {
  379. font-size:15px;
  380. text-align:center;
  381. border:1px solid {color:border};
  382. border-bottom:none;
  383. padding:20px 10px;
  384. text-transform:lowercase;
  385. line-height:150%;
  386. border-radius:7.5px 7.5px 0px 0px;
  387. }
  388.  
  389. .quoteinfo {
  390. color:{color:text};
  391. font-weight:600;
  392. padding:5px 10px;
  393. border:1px solid {color:border};
  394. text-transform:uppercase;
  395. font-size:10px;
  396. letter-spacing:0.25px;
  397. text-align:right;
  398. margin-bottom:20px;
  399. border-radius:0px 0px 7.5px 7.5px;
  400. }
  401.  
  402. .quoteinfo .quotebar {
  403. display:inline-block;
  404. height:1px;
  405. width:100px;
  406. background-color:{color:accent 1};
  407. transform:translateY(-2.5px);
  408. margin-right:10px;
  409. }
  410.  
  411. .chats {
  412. font-size:13px;
  413. line-height:150%;
  414. }
  415.  
  416.  
  417. .audioplayer {
  418. text-align:left;
  419. padding:20px;
  420. border:1px solid {color:border};
  421. font-size:13px;
  422. height:27.5px;
  423. border-radius:7.5px;
  424. margin-bottom:20px;
  425. }
  426.  
  427. .audioinfo {
  428. color:{color:text};
  429. width:100%;
  430. text-align:right;
  431. margin-top:-30px;
  432. letter-spacing:0.4px;
  433. font-weight:600;
  434. line-height:70%;
  435. }
  436.  
  437. .audioinfo div {
  438. font-size:13px;
  439. font-weight:lighter;
  440. }
  441.  
  442. .readmore {
  443. width:100%;
  444. text-transform:uppercase;
  445. text-align:center;
  446. margin-bottom:10px;
  447. padding:10px 0px;
  448. }
  449.  
  450. .readmore a {
  451. font-size:10px;
  452. letter-spacing:1px;
  453. background-color:{color:accent 1};
  454. padding:5px 15px;
  455. color:{color:accent text};
  456. border-radius:15px;
  457. font-weight:800;
  458. }
  459.  
  460. .readmore:hover a {
  461. background-color:{color:accent 2};
  462. }
  463.  
  464. .photoset-grid {
  465. grid-gap: 1px;
  466. width:calc(100% + 40px);
  467. margin:-20px 0px 0px -20px;
  468. }
  469.  
  470. .photoset-grid img {
  471. max-width:100%;
  472. }
  473.  
  474. [photoset-layout] div {
  475. cursor: pointer;
  476. }
  477. /* end different post types styling */
  478.  
  479. /* tumblr controls styling by cyantists */
  480. iframe.tmblr-iframe {
  481. z-index:99999999999999!important;
  482. top:0!important;
  483. right:0!important;
  484. opacity:0.4;
  485. /* delete invert(1) from here */
  486. filter:invert(1) contrast(150%);
  487. -webkit-filter:invert(1) contrast(150%);
  488. -o-filter:invert(1) contrast(150%);
  489. -moz-filter:invert(1) contrast(150%);
  490. -ms-filter:invert(1) contrast(150%);
  491. /* to here if your blog has a dark background */
  492. transform:scale(0.65);
  493. transform-origin:100% 0;
  494. -webkit-transform:scale(0.65);
  495. -webkit-transform-origin:100% 0;
  496. -o-transform:scale(0.65);
  497. -o-transform-origin:100% 0;
  498. -moz-transform:scale(0.65);
  499. -moz-transform-origin:100% 0;
  500. -ms-transform:scale(0.65);
  501. -ms-transform-origin:100% 0;}
  502.  
  503. iframe.tmblr-iframe:hover {
  504. opacity:0.6!important;}
  505. /* end control styling */
  506.  
  507.  
  508. /* side tab control styling */
  509. .tabcontainer {
  510. position:absolute;
  511. right:0px;
  512. top:0px;
  513. width:525px;
  514. height:100%;
  515. padding:15px;
  516. display:none;
  517. z-index:9;
  518. }
  519.  
  520. .close {
  521. position:absolute;
  522. border-radius:100%;
  523. width:30px;
  524. height:30px;
  525. font-size:14px;
  526. background-color:{color:accent 1};
  527. color:{color:accent text};
  528. right:12.5px;
  529. line-height:25px;
  530. top:12.5px;
  531. text-align:center;
  532. z-index:999999999999;
  533. border-radius:100%;
  534. box-shadow:0px 5px 3px rgba(0,0,0,0.02);
  535. -moz-transition-duration:0.8s;
  536. -webkit-transition-duration:0.8s;
  537. -o-transition-duration:0.8s;
  538. }
  539.  
  540. .close .feather {
  541. width:16px;
  542. height:16px;
  543. margin-top:7px;
  544. stroke:{color:accent 2}
  545. }
  546.  
  547. .close:hover {
  548. cursor: pointer;
  549. background-color:{color:accent 2};
  550. -moz-transition-duration:0.8s;
  551. -webkit-transition-duration:0.8s;
  552. -o-transition-duration:0.8s;
  553. }
  554.  
  555. .close:hover .feather {
  556. stroke:{color:accent 1}
  557. }
  558. /* end control styling */
  559.  
  560.  
  561. /* sidebar n blob styling */
  562. .links {
  563. position:absolute;
  564. z-index:5;
  565. width:45px;
  566. padding:7.5px 5px;
  567. padding-left:2.5px;
  568. text-align:center;
  569. left:0px;
  570. bottom:20px;
  571. display:flex;
  572. align-items:center;
  573. justify-content:center;
  574. flex-wrap: wrap;
  575. background-color:{color:posts};
  576. border-radius:0px 20px 20px 0px;
  577. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  578. }
  579.  
  580. .link {
  581. width:40px;
  582. height:25px;
  583. color:{color:text};
  584. text-transform:uppercase;
  585. font-size:8px;
  586. letter-spacing:1px;
  587. font-weight:700;
  588. margin:10px 5px;
  589. cursor:pointer;
  590. }
  591.  
  592. .link p {
  593. margin:0px;
  594. }
  595.  
  596. .feather {
  597. width: 16px;
  598. height: 16px;
  599. stroke: {color:accent 1};
  600. stroke-width: 2;
  601. stroke-linecap: round;
  602. stroke-linejoin: round;
  603. fill: none;
  604. -moz-transition-duration:0.8s;
  605. -webkit-transition-duration:0.8s;
  606. -o-transition-duration:0.8s;
  607. }
  608.  
  609. .link:hover .feather{
  610. stroke: {color:accent 2};
  611. -moz-transition-duration:0.8s;
  612. -webkit-transition-duration:0.8s;
  613. -o-transition-duration:0.8s;
  614. }
  615.  
  616. .side-png {
  617. position:absolute;
  618. width:{select:png width};
  619. z-index:6;
  620. bottom:70px;
  621. left:155px;
  622. }
  623.  
  624. .title {
  625. position:absolute;
  626. z-index:4;
  627. font-family: "mont";
  628. text-transform:uppercase;
  629. font-size:{text:title font size}px;
  630. top:{text:title margin top}px;
  631. width:350px;
  632. left:30px;
  633. line-height:100%;
  634. color:{color:title};
  635. {block:IfTitleShadow}
  636. text-shadow:2.5px 2.5px 5px rgba(0,0,0,0.04);
  637. {/block:IfTitleShadow}
  638. }
  639.  
  640. .desc {
  641. position:absolute;
  642. z-index:5;
  643. font-size:8px;
  644. letter-spacing:1px;
  645. width:85px;
  646. text-transform:uppercase;
  647. line-height:250%;
  648. text-align:justify;
  649. top:200px;
  650. height:55px;
  651. left:70px;
  652. overflow:scroll;
  653. }
  654. /* end sidebar styling */
  655.  
  656. /* background n blob styling */
  657. .box {
  658. position:absolute;
  659. background-color:{color:accent 1};
  660. width:100%;
  661. height:425px;
  662. bottom:0px;
  663. overflow:hidden;
  664. z-index:1;
  665. border-radius:0px 1000px 0px 0px;
  666. }
  667.  
  668. .blobs {
  669. position:absolute;
  670. z-index:3;
  671. transform:rotate(15deg);
  672. -webkit-filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  673. filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  674. fill: {color:posts};
  675. fill-rule: evenodd;
  676. }
  677.  
  678. .blob1-out {
  679. z-index:4;
  680. top:-175px;
  681. left:-200px;
  682. }
  683.  
  684. .blob2-out {
  685. z-index:3;
  686. top:-210px;
  687. opacity:0.5;
  688. left:-240px;
  689. }
  690. /* end background n blob styling */
  691.  
  692. /* nav tab styling */
  693. .nav-blob {
  694. transform:rotate(0deg);
  695. }
  696.  
  697. .nav-blob1-out {
  698. position:absolute;
  699. top:-300px;
  700. z-index:3;
  701. left:0px;
  702. transform:rotate(5deg);
  703. z-index:2;
  704. opacity:0.5;
  705. -webkit-filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  706. filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  707. }
  708.  
  709. .nav-blob2-out {
  710. position:absolute;
  711. top:-250px;
  712. z-index:3;
  713. left:60px;
  714. z-index:1;
  715. transform:rotate(5deg);
  716. -webkit-filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  717. filter: drop-shadow( 0px 5px 10px rgba(0,0,0,0.05));
  718. }
  719.  
  720. .nav-links {
  721. position:absolute;
  722. top:75px;
  723. left:255px;
  724. z-index:7;
  725. }
  726.  
  727. .nav-link {
  728. font-size:10px;
  729. text-transform:uppercase;
  730. font-weight:700;
  731. width:125px;
  732. letter-spacing:1px;
  733. color:{color:accent text};
  734. display:flex;
  735. align-items:center;
  736. justify-content:center;
  737. padding:0px 15px;
  738. border-radius:20px;
  739. background-color:{color:accent 2};
  740. margin:10px 0px;
  741. -moz-transition-duration:0.8s;
  742. -webkit-transition-duration:0.8s;
  743. -o-transition-duration:0.8s;
  744. }
  745.  
  746. .nav-link b {
  747. margin-right:5px;
  748. color:{color:accent 1};
  749. }
  750.  
  751. .nav-link:hover {
  752. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  753. -moz-transition-duration:0.8s;
  754. -webkit-transition-duration:0.8s;
  755. -o-transition-duration:0.8s;
  756. }
  757.  
  758. .nav-link:hover b {
  759. color:{color:accent 1};
  760. }
  761. /* end nav tab styling */
  762.  
  763. /* pagination styling */
  764. .pagi {
  765. text-align:center;
  766. width:calc(100% - 110px);
  767. margin:20px 50px;
  768. }
  769.  
  770. .pagi div {
  771. font-size:10px;
  772. width:75px;
  773. padding:5px;
  774. border-radius:20px;
  775. display:inline-block;
  776. color:{color:accent text};
  777. letter-spacing:1px;
  778. text-transform:uppercase;
  779. font-weight:600;
  780. line-height:150%;
  781. margin:0px 10px;
  782. background-color:{color:accent 2};
  783. -moz-transition-duration:0.8s;
  784. -webkit-transition-duration:0.8s;
  785. -o-transition-duration:0.8s;
  786. }
  787.  
  788. .pagi div:hover {
  789. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  790. -moz-transition-duration:0.8s;
  791. -webkit-transition-duration:0.8s;
  792. -o-transition-duration:0.8s;
  793. }
  794. /* end pagination styling */
  795.  
  796. /* cried styling -- DO NOT TOUCH pls */
  797. .cred {
  798. background-color:{color:posts};
  799. position:absolute;
  800. z-index:10;
  801. bottom:15px;
  802. right:15px;
  803. padding:5px;
  804. height:20px;
  805. width:20px;
  806. border-radius:100%;
  807. display:flex;
  808. align-items:center;
  809. justify-content:center;
  810. background-color:{color:accent 2};
  811. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  812. }
  813.  
  814. .cred .feather {
  815. height:13px;
  816. width:13px;
  817. stroke:{color:accent text};
  818. }
  819.  
  820. .cred-prompt {
  821. position:absolute;
  822. bottom:20px;
  823. right:55px;
  824. width:65px;
  825. padding:0px 15px;
  826. border-radius:20px;
  827. height:20px;
  828. background-color:{color:posts};
  829. letter-spacing:0.5px;
  830. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  831. display:none;
  832. line-height:20px;
  833. font-size:9px;
  834. text-align:center;
  835. animation:fadeInDown 1s;
  836. }
  837.  
  838. </style>
  839. </head>
  840. <body>
  841.  
  842. <div class="container">
  843.  
  844. <svg width="650" height="650" viewBox="0 0 600 600" class="blobs blob1-out"><g transform="translate(300,300)"><path d="M72.1,-112.2C103.5,-92,145.9,-89,167.4,-68.6C188.9,-48.2,189.5,-10.4,189.6,31.2C189.7,72.8,189.3,118.3,169,152.4C148.7,186.5,108.4,209.4,70.8,203C33.2,196.7,-1.9,161.2,-37.4,143.5C-73,125.7,-109,125.7,-149.1,111.4C-189.1,97.1,-233.1,68.5,-238.1,34.2C-243,0,-208.8,-39.9,-182.3,-77.1C-155.7,-114.3,-136.8,-148.8,-107.7,-170.1C-78.6,-191.3,-39.3,-199.1,-9.5,-184.4C20.4,-169.7,40.7,-132.4,72.1,-112.2Z" class="blob1" /></g></svg>
  845. <svg width="750" height="750" viewBox="0 0 600 600" class="blobs blob2-out"><g transform="translate(300,300)"><path d="M72.1,-112.2C103.5,-92,145.9,-89,167.4,-68.6C188.9,-48.2,189.5,-10.4,189.6,31.2C189.7,72.8,189.3,118.3,169,152.4C148.7,186.5,108.4,209.4,70.8,203C33.2,196.7,-1.9,161.2,-37.4,143.5C-73,125.7,-109,125.7,-149.1,111.4C-189.1,97.1,-233.1,68.5,-238.1,34.2C-243,0,-208.8,-39.9,-182.3,-77.1C-155.7,-114.3,-136.8,-148.8,-107.7,-170.1C-78.6,-191.3,-39.3,-199.1,-9.5,-184.4C20.4,-169.7,40.7,-132.4,72.1,-112.2Z" class="blob2" /></g></svg>
  846.  
  847. <div class="desc">{text:description}</div>
  848. <div class="box"></div>
  849. <img src="{image:sidebar}" class="side-png">
  850. <div class="title">{text:title}</div>
  851.  
  852. <!-- side links-->
  853. <div class="links">
  854. <a href="/">
  855. <div class="link">
  856. <span data-feather="home"></span>
  857. <p>home</p>
  858. </div>
  859. </a>
  860. <a href="/ask">
  861. <div class="link">
  862. <span data-feather="message-circle"></span>
  863. <p>inbox</p>
  864. </div>
  865. </a>
  866. <a onclick="openTab('navTab')">
  867. <div class="link">
  868. <span data-feather="plus-circle"></span>
  869. <p>links</p>
  870. </div>
  871. </a>
  872. <a href="{text:free link}">
  873. <div class="link">
  874. <span data-feather="{select:free link icon}"></span>
  875. <p>{text:free link title}</p>
  876. </div>
  877. </a>
  878. </div>
  879.  
  880. <!-- nav tab start -->
  881. <div id="navTab" class="tabcontainer">
  882. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  883.  
  884. <svg width="850" height="850" viewBox="0 0 600 600" class="nav-blob1-out"><g transform="translate(300,300)"><path d="M70.7,-106.8C110.7,-84.2,175.4,-96.9,190.5,-81.8C205.6,-66.6,171.1,-23.5,165.2,24.4C159.3,72.2,182.1,124.9,164.9,140.8C147.8,156.7,90.8,135.9,44.2,148.7C-2.3,161.5,-38.5,207.9,-75.5,215.9C-112.5,223.9,-150.3,193.5,-162.1,154.6C-174,115.7,-159.7,68.3,-170.2,22C-180.7,-24.3,-215.9,-69.5,-215,-109.3C-214,-149.1,-177,-183.5,-135.2,-205.2C-93.4,-226.9,-46.7,-236,-15.7,-211.6C15.3,-187.2,30.6,-129.3,70.7,-106.8Z" class="blobs nav-blob" /></g></svg>
  885. <svg width="750" height="750" viewBox="0 0 600 600" class="nav-blob2-out"><g transform="translate(300,300)"><path d="M70.7,-106.8C110.7,-84.2,175.4,-96.9,190.5,-81.8C205.6,-66.6,171.1,-23.5,165.2,24.4C159.3,72.2,182.1,124.9,164.9,140.8C147.8,156.7,90.8,135.9,44.2,148.7C-2.3,161.5,-38.5,207.9,-75.5,215.9C-112.5,223.9,-150.3,193.5,-162.1,154.6C-174,115.7,-159.7,68.3,-170.2,22C-180.7,-24.3,-215.9,-69.5,-215,-109.3C-214,-149.1,-177,-183.5,-135.2,-205.2C-93.4,-226.9,-46.7,-236,-15.7,-211.6C15.3,-187.2,30.6,-129.3,70.7,-106.8Z" class="blobs nav-blob" /></g></svg>
  886.  
  887. <div class="nav-links">
  888. <a href="{text:link 1}">
  889. <div class="nav-link">
  890. <b>01</b>
  891. <p>{text:link 1 title}</p>
  892. </div>
  893. </a>
  894. <a href="{text:link 2}">
  895. <div class="nav-link">
  896. <b>02</b>
  897. <p>{text:link 2 title}</p>
  898. </div>
  899. </a>
  900. <a href="{text:link 3}">
  901. <div class="nav-link">
  902. <b>03</b>
  903. <p>{text:link 3 title}</p>
  904. </div>
  905. </a>
  906. <a href="{text:link 4}">
  907. <div class="nav-link">
  908. <b>04</b>
  909. <p>{text:link 4 title}</p>
  910. </div>
  911. </a>
  912. <a href="{text:link 5}">
  913. <div class="nav-link">
  914. <b>05</b>
  915. <p>{text:link 5 title}</p>
  916. </div>
  917. </a>
  918. <a href="{text:link 6}">
  919. <div class="nav-link">
  920. <b>06</b>
  921. <p>{text:link 6 title}</p>
  922. </div>
  923. </a>
  924. </div>
  925. </div>
  926.  
  927.  
  928. <div id="entries">
  929. {block:Posts}
  930. <!-- start posts-->
  931. <div class="post" id="{PostID}">
  932.  
  933. {block:RebloggedFrom}
  934. <div class="postinfo-top">
  935. <div class="post-inner">
  936. <a href="{ReblogRootURL}">
  937. <div>posted by {ReblogRootName}</div>
  938. </a>
  939. </div>
  940. </div>
  941. {/block:RebloggedFrom}
  942.  
  943. {block:Text}
  944. {block:Title}<h1>{Title}</h1>{/block:Title}
  945. {Body}
  946. {/block:Text}
  947.  
  948. {block:Quote}
  949. <div class="quotediv">"{Quote}"</div>
  950. {block:Source}
  951. <div class="quoteinfo">
  952. <div class="quotebar"></div>
  953. {Source}
  954. </div>
  955. {/block:Source}
  956. {/block:Quote}
  957.  
  958. {block:Chat}
  959. {block:Title}<h1>{Title}</h1>{/block:Title}
  960. {block:Lines}
  961. <div class="chats">
  962. {block:Label}<b>{Label}</b>{/block:Label}
  963. {Line}<br>
  964. </div>
  965. {/block:Lines}
  966. {/block:Chat}
  967.  
  968. {block:Video}
  969. <div class="video">{Video-500}</div>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  970. {/block:Video}
  971.  
  972.  
  973. {block:Photo}
  974. <img src="{PhotoURL-500}" style="width:calc(100% + 40px);margin:-20px 0px -25px -20px">
  975. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  976. {/block:Photo}
  977.  
  978. {block:Photoset}
  979. <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>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  980. {/block:Photoset}
  981.  
  982. {block:Link}
  983. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  984. {block:Description}{Description}{/block:Description}
  985. {/block:Link}
  986.  
  987.  
  988. {block:AudioPlayer}
  989. <div class="audioplayer">{AudioPlayer}
  990. <div class="audioinfo">
  991. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  992. {block:Artist}<br/>{Artist}{/block:Artist}
  993. </div>
  994. </div>
  995. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  996. {/block:AudioPlayer}
  997.  
  998. {block:Answer}
  999. <div class="question">{Question}</div>
  1000. <div class="askerdiv">
  1001. <div class="askbar"></div>asked by <b>{Asker}</b>
  1002. </div>
  1003. <div>{Answer}</div>
  1004. {/block:Answer}
  1005.  
  1006.  
  1007. {block:More}
  1008. <div class="readmore">
  1009. <a href="{Permalink}" class="more-btn">read more</a>
  1010. </div>
  1011. {/block:More}
  1012.  
  1013. <!-- to hide source and via on posts-->
  1014. {block:ContentSource}
  1015. <div style="display: none;">{SourceURL}</div>
  1016. {/block:ContentSource}
  1017.  
  1018. {block:NoRebloggedFrom}
  1019. <div style="display: none;">
  1020. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1021. </div>
  1022. {/block:NoRebloggedFrom}
  1023.  
  1024. {block:Date}
  1025. <div class="postinfo">
  1026. <div class="post-inner">
  1027. <a href="{Permalink}" title="{TimeAgo}">
  1028. <span class="lnr lnr-calendar-full" style="margin-right:6px"></span>
  1029. <div>{MonthNumberWithZero}.{DayOfMonthWithZero}</div>
  1030. </a>
  1031. </div>
  1032. {block:NoteCount}<span class="dotz">ā€¢</span>{/block:NoteCount}
  1033. <div class="post-inner">
  1034. {block:NoteCount}
  1035. <a href="{Permalink}" title="likes & reblogs">
  1036. <span class="lnr lnr-heart"></span>
  1037. <div>{NoteCount}</div>
  1038. </a>
  1039. {/block:NoteCount}
  1040. </div>
  1041. <span class="dotz">ā€¢</span>
  1042. <div class="post-inner">
  1043. <a href="{ReblogURL}" id="reblogz">
  1044. <div>reblog</div>
  1045. <span class="lnr lnr-arrow-right reblog-icon" style="margin-right:2.5px; margin-left:4px;"></span>
  1046. </a>
  1047. </div>
  1048. </div>
  1049. {/block:Date}
  1050.  
  1051. </div>
  1052.  
  1053. {block:HasTags}
  1054. <div class="tags">
  1055. {block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  1056. </div>
  1057. {/block:HasTags}
  1058.  
  1059.  
  1060. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  1061.  
  1062. {/block:Posts}
  1063.  
  1064. {block:Pagination}
  1065. <div class="pagi">
  1066. {block:PreviousPage}
  1067. <a href="{PreviousPage}">
  1068. <div>previous</div>
  1069. </a>
  1070. {block:PreviousPage}{block:NextPage}
  1071. <a href="{NextPage}">
  1072. <div>forward</div>
  1073. </a>
  1074. {block:NextPage}
  1075. </div>
  1076. {/block:Pagination}
  1077.  
  1078. </div>
  1079.  
  1080. </div>
  1081.  
  1082. <!-- my credit please do not touch thanks! -->
  1083. <a href="https://jinsoouls.tumblr.com/" >
  1084. <div class="cred" id="cred">
  1085. <span data-feather="cloud-rain"></span>
  1086. </div>
  1087. </a>
  1088. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1089. <!-- end of credit -->
  1090.  
  1091. <script>
  1092.  
  1093. feather.replace();
  1094.  
  1095. $("#cred").hover(
  1096. function() {
  1097. $("#cred-info").fadeIn();
  1098. }, function() {
  1099. $("#cred-info").fadeOut();
  1100. }
  1101. );
  1102.  
  1103. /* photoset script by annathms and espoirthemes */
  1104. function gatherData(images, arr) {
  1105. for (let i = 0; i < images.length; i++) {
  1106. let currentData = {
  1107. "width": images[i].getAttribute('data-width'),
  1108. "height": images[i].getAttribute('data-height'),
  1109. "low_res": images[i].getAttribute('data-lowres'),
  1110. "high_res": images[i].getAttribute('data-highres')
  1111. };
  1112. arr.push(currentData);
  1113. }
  1114. }
  1115. function getIndex(elem) {
  1116. let i = 0;
  1117. while( (elem = elem.previousElementSibling) != null ) i++;
  1118. return i;
  1119. }
  1120. function lightbox(elem) {
  1121. let currentPhotoset = elem.parentNode;
  1122. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1123. let data = [];
  1124. gatherData(photosetPhotos, data);
  1125. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1126. }
  1127.  
  1128. /* tooltip script */
  1129. $(document).ready(function(){
  1130. $("a[title]").style_my_tooltips({
  1131. tip_follows_cursor:true,
  1132. tip_delay_time:90,
  1133. tip_fade_speed:600,
  1134. attribute:"title"
  1135. });
  1136. });
  1137.  
  1138. /* audio player color script by shudesigns */
  1139. $('iframe.tumblr_audio_player').load( function() {
  1140. $('iframe.tumblr_audio_player').contents().find("head")
  1141. .append($("<style type='text/css'> .audio-player{background:{color:posts} !important} </style>"));
  1142. });
  1143.  
  1144. /* tab script by me*/
  1145. function openTab(tabName) {
  1146. $("#entries").fadeOut();
  1147. $('.tabcontainer').each(function(index) {
  1148. if (tabName == $(this).attr('id')) {
  1149. $(this).fadeIn();
  1150. } else {
  1151. $(this).fadeOut();
  1152. }
  1153. });
  1154. }
  1155.  
  1156. function closeTab(el) {
  1157. $(el).parent().fadeOut();
  1158. $('#entries').fadeIn();
  1159. }
  1160. </script>
  1161.  
  1162.  
  1163. </script>
  1164. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!