codesbyjack

THEME #23 raymond / made by jinsoouls

Sep 10th, 2020 (edited)
1,154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.69 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. raymond 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. <meta name="color:container" content="#ffffff"/>
  12. <meta name="color:background" content="#ffffff"/>
  13. <meta name="color:posts" content="#ffffff"/>
  14. <meta name="color:border" content="#eeeeee"/>
  15. <meta name="color:accent 1" content="#dfd6d4"/>
  16. <meta name="color:accent 2" content="#797979"/>
  17. <meta name="color:accent text" content="#ffffff"/>
  18. <meta name="color:text" content="#313131"/>
  19. <meta name="color:title" content="#414141"/>
  20. <meta name="color:tiny text" content="#7e7e7e"/>
  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 1" content=""/>
  29. <meta name="image:sidebar 2" content=""/>
  30.  
  31. <meta name="image:muse 1" content=""/>
  32. <meta name="image:muse 2" content=""/>
  33. <meta name="image:muse 3" content=""/>
  34. <meta name="image:muse 4" content=""/>
  35. <meta name="image:muse 5" content=""/>
  36. <meta name="image:muse 6" content=""/>
  37. <meta name="image:muse 7" content=""/>
  38. <meta name="image:muse 8" content=""/>
  39. <meta name="image:muse 9" content=""/>
  40.  
  41. <meta name="if:draft count" content="0"/>
  42.  
  43.  
  44. <meta name="if:muse tab" content="0"/>
  45.  
  46. <meta name="text:title" content="check mate."/>
  47. <meta name="text:description" content="the place where the rough breath drove to gathered in a tempting constellation"/>
  48. <meta name="text:nav description" content="some words here hello"/>
  49.  
  50. <meta name="text:free link" content="/"/>
  51. <meta name="text:free link title" content="free link"/>
  52.  
  53. <meta name="text:nav link 1" content="/"/>
  54. <meta name="text:nav link 1 title" content="link one"/>
  55. <meta name="text:nav link 2" content="/"/>
  56. <meta name="text:nav link 2 title" content="link two"/>
  57. <meta name="text:nav link 3" content="/"/>
  58. <meta name="text:nav link 3 title" content="link three"/>
  59. <meta name="text:nav link 4" content="/"/>
  60. <meta name="text:nav link 4 title" content="link four"/>
  61.  
  62. <meta name="text:draft count" content="zero"/>
  63.  
  64.  
  65. <meta name="text:draft count" content="zero"/>
  66.  
  67. <head>
  68.  
  69. <title>{Title}</title>
  70. <link rel="shortcut icon" href="{Favicon}">
  71. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  72. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  73.  
  74. <!-- jquery -->
  75. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  76.  
  77. <!-- script for tooltips -->
  78. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  79.  
  80. <!-- feather icons-->
  81. <script src="https://unpkg.com/feather-icons"></script>
  82.  
  83. <!-- google fonts -->
  84. <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">
  85.  
  86. <!-- photoset.css by annathms and espoirthemes -->
  87. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  88.  
  89. <!-- autoresize video script by shythemes -->
  90. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  91.  
  92. <!-- animate.css -->
  93. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  94.  
  95. <style>
  96.  
  97. @font-face { font-family: "mont"; src: url(" https://dl.dropboxusercontent.com/s/gw86uuuybwd8c96/Mont-HeavyDEMO.otf"); }
  98.  
  99.  
  100. ::-webkit-scrollbar {
  101. width: 1px;
  102. height: 1px;
  103. background: transparent;
  104. }
  105.  
  106. ::-webkit-scrollbar-thumb {
  107. background: transparent;
  108. }
  109.  
  110. ::selection {
  111. color:{color:accent text};
  112. background-color: {color:accent 2};
  113. }
  114.  
  115. ::-moz-selection {
  116. color:{color:accent text};
  117. background-color: {color:accent 2};
  118. }
  119.  
  120. #s-m-t-tooltip {
  121. max-width:300px;
  122. padding:5px 8px;
  123. margin:20px 7px 2px 20px;
  124. background-color:{color:posts};
  125. text-transform:lowercase;
  126. color:{color:text};
  127. z-index:999999999999999999999999999999999999;
  128. font-weight:700;
  129. font-size:8px;
  130. letter-spacing:1px;
  131. text-transform:uppercase;
  132. border-bottom:2px solid {color:accent 1};
  133. }
  134.  
  135.  
  136. body {
  137. background:{color:background};
  138. background-image:url({image:background});
  139. margin:0px;
  140. color:{color:text};
  141. font-family: 'Muli', sans-serif;
  142. font-size:11px;
  143. overflow:hidden;
  144. line-height:100%;
  145. }
  146.  
  147. blockquote {
  148. padding-left:20px;
  149. width:auto;
  150. margin-left:10px;
  151. border-left:1px solid {color:border};
  152. }
  153.  
  154. blockquote blockquote {
  155. padding-left:20px;
  156. margin-left:10px;
  157. border-left:1px solid {color:border};
  158. }
  159.  
  160. blockquote img {max-width:100%;}
  161.  
  162. h1 {
  163. font-size:19px;
  164. color:{color:accent text};
  165. text-align:center;
  166. letter-spacing:3px;
  167. text-transform:uppercase;
  168. line-height:100%;
  169. font-weight:900;
  170. color:{color:title};
  171. }
  172.  
  173. h2 {
  174. font-size:18px;
  175. color:{color:accent 1};
  176. text-align:center;
  177. line-height:100%;
  178. margin-right:20px;
  179. text-transform:uppercase;
  180. letter-spacing:1px;
  181. }
  182.  
  183. a {
  184. text-decoration:none;
  185. color:{color:link};
  186. -moz-transition-duration:0.8s;
  187. -webkit-transition-duration:0.8s;
  188. -o-transition-duration:0.8s;
  189. }
  190.  
  191. a:hover {
  192. color:{color:hover link};
  193. -moz-transition-duration:0.8s;
  194. -webkit-transition-duration:0.8s;
  195. -o-transition-duration:0.8s;
  196. }
  197.  
  198. b {color:{color:bold};}
  199. strong {color:{color:bold}}
  200. i {color:{color:italic};}
  201. em {color:{color:italic};}
  202. sub {font-size:11px;}
  203. sup {font-size:11px;}
  204. small {font-size:11px;}
  205.  
  206. .container {
  207. width:850px;
  208. height:550px;
  209. position:absolute;
  210. margin:auto;
  211. overflow:hidden;
  212. top:0; left:0; right:0; bottom:0;
  213. background-color:{color:container};
  214. }
  215.  
  216. #entries {
  217. position: absolute;
  218. height:100%;
  219. padding:0px 30px;
  220. width:auto;
  221. left:0px;
  222. top:0px;
  223. overflow:scroll;
  224. z-index:5;
  225. }
  226.  
  227. .post {
  228. padding:20px;
  229. width:400px;
  230. background-color:{color:posts};
  231. margin:30px 0px;
  232. line-height:130%;
  233. overflow:hidden;
  234. }
  235.  
  236. .post img {
  237. max-width:100%;
  238. height:auto;
  239. width:auto;
  240. }
  241.  
  242. /* post info styling */
  243. .postinfo-top {
  244. width:calc(100% + 20px);
  245. padding:7.5px 10px;
  246. letter-spacing:0.5px;
  247. border-bottom:1px solid {color:border};
  248. margin:-20px 0px 20px -20px;
  249. display:flex;
  250. justify-content:flex-start;
  251. align-items:center;
  252. }
  253.  
  254. .postinfo {
  255. width:calc(100% + 20px);
  256. padding:7.5px 10px;
  257. letter-spacing:0.5px;
  258. border-top:1px solid {color:border};
  259. margin:20px 0px -20px -20px;
  260. display:flex;
  261. justify-content:flex-end;
  262. align-items:center;
  263. }
  264.  
  265. .post-inner a {
  266. color:{color:text};
  267. text-transform:uppercase;
  268. font-size:8px;
  269. font-weight:700;
  270. display:flex;
  271. flex-direction:row;
  272. justify-content:center;
  273. align-items:center;
  274. }
  275.  
  276. .post-inner .feather {
  277. width:10px;
  278. height:10px;
  279. stroke:{color:accent 1};
  280. margin:0px 5px;
  281. }
  282.  
  283. .dotz {
  284. margin:0px 7.5px;
  285. font-size:6px;
  286. opacity:0.3;
  287. }
  288.  
  289. .reblog-icon {
  290. -moz-transition-duration:0.8s;
  291. -webkit-transition-duration:0.8s;
  292. -o-transition-duration:0.8s;
  293. }
  294.  
  295. #reblogz:hover .reblog-icon {
  296. transform:translate(1.5px,0);
  297. -moz-transition-duration:0.8s;
  298. -webkit-transition-duration:0.8s;
  299. -o-transition-duration:0.8s;
  300. }
  301.  
  302. .tags {
  303. font-size:10px;
  304. letter-spacing:0.5px;
  305. width:410px;
  306. text-align:left;
  307. line-height:120%;
  308. padding:5px 10px;
  309. margin:-27.5px 0px 30px 0px;
  310. }
  311.  
  312. .tags a {
  313. color:{color:text};
  314. }
  315.  
  316. .tags .dotty {
  317. margin:5px;
  318. color:{color:accent 1};
  319. }
  320.  
  321. .postnote {
  322. width:calc(100% - 20px);
  323. background-color:{color:posts};
  324. text-transform:lowercase;
  325. text-align:left;
  326. margin: -20px 0px 50px 0px;
  327. padding: 10px;
  328. }
  329.  
  330. .postnote li {
  331. margin:5px 0px;
  332. }
  333. /* end post info styling */
  334.  
  335. /* different post types styling */
  336. .question {
  337. padding:20px 10px;
  338. text-align:center;
  339. border:1px solid {color:border};
  340. border-bottom:none;
  341. }
  342.  
  343. .askerdiv {
  344. padding:5px 10px;
  345. text-align:right;
  346. border:1px solid {color:border};
  347. color:{color:text};
  348. text-transform:uppercase;
  349. font-size:10px;
  350. letter-spacing:0.25px;
  351. }
  352.  
  353. .askerdiv a {
  354. color:{color:accent 1};
  355. font-weight:700;
  356. }
  357.  
  358. .askerdiv .askbar {
  359. display:inline-block;
  360. height:1px;
  361. width:100px;
  362. background-color:{color:accent 1};
  363. transform:translateY(-2.5px);
  364. margin-right:10px;
  365. }
  366.  
  367.  
  368. .quotediv {
  369. font-size:15px;
  370. text-align:center;
  371. border:1px solid {color:border};
  372. border-bottom:none;
  373. padding:20px 10px;
  374. text-transform:lowercase;
  375. line-height:150%;
  376. }
  377.  
  378. .quoteinfo {
  379. color:{color:text};
  380. font-weight:600;
  381. padding:5px 10px;
  382. border:1px solid {color:border};
  383. text-transform:uppercase;
  384. font-size:10px;
  385. letter-spacing:0.25px;
  386. text-align:right;
  387. margin-bottom:20px;
  388. }
  389.  
  390. .quoteinfo .quotebar {
  391. display:inline-block;
  392. height:1px;
  393. width:100px;
  394. background-color:{color:accent 1};
  395. transform:translateY(-2.5px);
  396. margin-right:10px;
  397. }
  398.  
  399. .chats {
  400. font-size:13px;
  401. line-height:150%;
  402. }
  403.  
  404.  
  405. .audioplayer {
  406. text-align:left;
  407. padding:20px;
  408. background:{color:accent 1};
  409. color:{color:accent text};
  410. border-bottom:3px solid {color:accent 2};
  411. font-size:13px;
  412. margin-bottom:20px;
  413. }
  414.  
  415. .audioinfo {
  416. color:{color:accent text};
  417. width:70%;
  418. margin-left:30%;
  419. text-align:right;
  420. margin-top:-30px;
  421. letter-spacing:0.4px;
  422. font-weight:600;
  423. line-height:70%;
  424. }
  425.  
  426. .audioinfo div {
  427. font-size:13px;
  428. font-weight:lighter;
  429. }
  430.  
  431. .readmore {
  432. width:100%;
  433. text-transform:uppercase;
  434. text-align:center;
  435. margin-bottom:10px;
  436. padding:10px 0px;
  437. }
  438.  
  439. .readmore a {
  440. font-size:10px;
  441. letter-spacing:1px;
  442. background-color:{color:accent 1};
  443. padding:5px 12.5px 4px 12.5px;
  444. color:{color:accent text};
  445. font-weight:800;
  446. border-radius:10px;
  447. }
  448.  
  449. .readmore:hover a {
  450. background-color:{color:accent 2};
  451. }
  452.  
  453.  
  454. .photoset-grid {
  455. grid-gap: 1px;
  456. width:calc(100% + 40px);
  457. margin:-20px 0px -20px -20px;
  458. }
  459.  
  460.  
  461. .photoset-grid img {
  462. vertical-align:top;
  463. }
  464.  
  465. .photoset-grid div {
  466.  
  467. vertical-align:top;
  468. }
  469.  
  470. [photoset-layout] div {
  471. cursor: pointer;
  472. }
  473.  
  474. [photoset-layout] div {
  475. vertical-align:top;
  476. }
  477.  
  478. /* end different post types styling */
  479.  
  480. /* tumblr controls styling by cyantists */
  481. iframe.tmblr-iframe {
  482. z-index:99999999999999!important;
  483. top:0!important;
  484. right:0!important;
  485. opacity:0.4;
  486. /* delete invert(1) from here */
  487. filter:invert(1) contrast(150%);
  488. -webkit-filter:invert(1) contrast(150%);
  489. -o-filter:invert(1) contrast(150%);
  490. -moz-filter:invert(1) contrast(150%);
  491. -ms-filter:invert(1) contrast(150%);
  492. /* to here if your blog has a dark background */
  493. transform:scale(0.65);
  494. transform-origin:100% 0;
  495. -webkit-transform:scale(0.65);
  496. -webkit-transform-origin:100% 0;
  497. -o-transform:scale(0.65);
  498. -o-transform-origin:100% 0;
  499. -moz-transform:scale(0.65);
  500. -moz-transform-origin:100% 0;
  501. -ms-transform:scale(0.65);
  502. -ms-transform-origin:100% 0;}
  503.  
  504. iframe.tmblr-iframe:hover {
  505. opacity:0.6!important;}
  506. /* end control styling */
  507.  
  508.  
  509. /* side tab control styling */
  510. .tabcontainer {
  511. position:absolute;
  512. left:0px;
  513. width:500px;
  514. height:100%;
  515. top:0px;
  516. display:none;
  517. z-index:9;
  518. background-color:{color:container};
  519. }
  520.  
  521. .close {
  522. position:absolute;
  523. border-radius:100%;
  524. width:30px;
  525. height:30px;
  526. font-size:14px;
  527. color:{color:accent 1};
  528. left:12.5px;
  529. line-height:25px;
  530. top:12.5px;
  531. text-align:center;
  532. z-index:999999999999;
  533. border-radius:100%;
  534. -moz-transition-duration:0.8s;
  535. -webkit-transition-duration:0.8s;
  536. -o-transition-duration:0.8s;
  537. }
  538.  
  539. .close .feather {
  540. width:16px;
  541. height:16px;
  542. margin-top:7px;
  543. stroke:{color:accent 1};
  544. -moz-transition-duration:0.8s;
  545. -webkit-transition-duration:0.8s;
  546. -o-transition-duration:0.8s;
  547. }
  548.  
  549. .close:hover {
  550. cursor: pointer;
  551. -moz-transition-duration:0.8s;
  552. -webkit-transition-duration:0.8s;
  553. -o-transition-duration:0.8s;
  554. }
  555.  
  556. .close:hover .feather {
  557. stroke:{color:accent 2};
  558. -moz-transition-duration:0.8s;
  559. -webkit-transition-duration:0.8s;
  560. -o-transition-duration:0.8s;
  561. }
  562. /* end control styling */
  563.  
  564. /* sidebar styling */
  565. .sidebar {
  566. position:absolute;
  567. background:{color:accent 1};
  568. height:100%;
  569. width:350px;
  570. right:0px;
  571. }
  572.  
  573. .image-1 {
  574. position:absolute;
  575. width:195px;
  576. height:225px;
  577. z-index:2;
  578. background:grey;
  579. right:30px;
  580. top:50px;
  581. }
  582.  
  583. .links {
  584. position:absolute;
  585. padding:7.5px 10px;
  586. z-index:3;
  587. background:{color:accent text};
  588. text-transform:uppercase;
  589. font-size:9px;
  590. letter-spacing:1px;
  591. font-weight:700;
  592. }
  593.  
  594. .links a {
  595. margin:0px 5px;
  596. cursor:pointer;
  597. color:{color:text};
  598. }
  599.  
  600. .links a:hover {
  601. color:{color:accent 2};
  602. }
  603.  
  604. .links-1 {
  605. width:175px;
  606. right:30px;
  607. top:30px;
  608. text-align:right;
  609. }
  610.  
  611. .block {
  612. position:absolute;
  613. width:190px;
  614. height:160px;
  615. z-index:1;
  616. background:{color:accent 2};
  617. left:30px;
  618. top:180px;
  619. }
  620.  
  621. .image-2 {
  622. position:absolute;
  623. width:205px;
  624. height:135px;
  625. z-index:2;
  626. background:grey;
  627. right:70px;
  628. bottom:100px;
  629. }
  630.  
  631. .links-2 {
  632. width:185px;
  633. right:70px;
  634. bottom:80px;
  635. text-align:left;
  636. }
  637.  
  638. .title {
  639. position:absolute;
  640. z-index:3;
  641. font-size:75px;
  642. text-transform:uppercase;
  643. letter-spacing:2px;
  644. font-weight:900;
  645. line-height:80%;
  646. text-align:right;
  647. right:25px;
  648. bottom:200px;
  649. color:{color:title};
  650. }
  651.  
  652. .post-title {
  653. text-align:left;
  654. margin-top:0px;
  655. background:{color:accent 1};
  656. color:{color:accent text};
  657. border-bottom:3px solid {color:accent 2};
  658. margin:-20px 0px 0px -20px;
  659. padding:20px;
  660. width:calc(100% + 20px);
  661. margin-bottom:20px;
  662. }
  663.  
  664. .desc {
  665. position:absolute;
  666. width:275px;
  667. height:40px;
  668. overflow:scroll;
  669. bottom:25px;
  670. right:30px;
  671. text-align:right;
  672. font-size:8px;
  673. text-transform:uppercase;
  674. letter-spacing:2px;
  675. line-height:250%;
  676. font-weight:400;
  677. }
  678. /* end sidebar styling */
  679.  
  680. /* muse tab styling */
  681. .muses {
  682. position:absolute;
  683. margin:auto;
  684. top:0;bottom:0;left:0;right:0;
  685. height:400px;
  686. width:350px;
  687. text-align:center;
  688. display:flex;
  689. justify-content:center;
  690. align-items:center;
  691. flex-wrap: wrap;
  692. align-content: center;
  693. }
  694.  
  695. .muse {
  696. width:70px;
  697. height:69px;
  698. background:grey;
  699. margin:15px 20px;
  700. border-bottom:3px solid {color:accent 2};
  701. filter: grayscale(100%);
  702. -moz-transition-duration:0.8s;
  703. -webkit-transition-duration:0.8s;
  704. -o-transition-duration:0.8s;
  705. }
  706.  
  707. .muse:hover {
  708. filter: grayscale(0%);
  709. -moz-transition-duration:0.8s;
  710. -webkit-transition-duration:0.8s;
  711. -o-transition-duration:0.8s;
  712. }
  713. /* end muse tab styling */
  714.  
  715. /* nav tab styling */
  716. .nav-links {
  717. position:absolute;
  718. margin:auto;
  719. top:0;bottom:0;left:0;right:0;
  720. height:400px;
  721. width:400px;
  722. text-align:center;
  723. display:flex;
  724. justify-content:center;
  725. align-items:center;
  726. flex-wrap: wrap;
  727. align-content: center;
  728. }
  729.  
  730. .nav-link {
  731. width:140px;
  732. padding:20px 10px;
  733. background:{color:accent 1};
  734. border-bottom:3px solid {color:accent 2};
  735. margin:15px;
  736. color:{color:accent text};
  737. text-transform:uppercase;
  738. font-size:10px;
  739. letter-spacing:1.7px;
  740. font-weight:700;
  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. color:{color:accent 2};
  748. -moz-transition-duration:0.8s;
  749. -webkit-transition-duration:0.8s;
  750. -o-transition-duration:0.8s;
  751. }
  752.  
  753. .nav-link:hover {
  754. color:{color:accent 2};
  755. border-bottom:3px solid {color:posts};
  756. -moz-transition-duration:0.8s;
  757. -webkit-transition-duration:0.8s;
  758. -o-transition-duration:0.8s;
  759. }
  760.  
  761. .nav-link:hover b {
  762. color:{color:accent text};
  763. -moz-transition-duration:0.8s;
  764. -webkit-transition-duration:0.8s;
  765. -o-transition-duration:0.8s;
  766. }
  767.  
  768. .info {
  769. width:310px;
  770. padding:20px;
  771. margin-bottom:10px;
  772. font-size:9px;
  773. text-align:right;
  774. letter-spacing:1px;
  775. background:{color:posts};
  776. border-bottom:3px solid {color:accent 1};
  777. }
  778. /* end nav tab styling */
  779.  
  780. /* draft count styling */
  781. .draft {
  782. position:absolute;
  783. width:70px;
  784. height:25px;
  785. text-align:right;
  786. text-transform:uppercase;
  787. font-size:8px;
  788. letter-spacing:1px;
  789. line-height:150%;
  790. top:125px;
  791. left:25px;
  792. padding:10px;
  793. border-right:1px solid {color:border};
  794. border-bottom:1px solid {color:border};
  795. }
  796.  
  797. .draft b {
  798. color:{color:text};
  799. }
  800. /* end draft count styling */
  801.  
  802. /* pagi styling */
  803. .pagi {
  804. position:absolute;
  805. text-align:right;
  806. top:350px;
  807. left:15px;
  808. padding:10px;
  809. border-top:1px solid {color:border};
  810. border-right:1px solid {color:border};
  811. text-transform:uppercase;
  812. font-size:9px;
  813. letter-spacing:1px;
  814. line-height:200%;
  815. font-weight:700;
  816. }
  817.  
  818. .pagi div {
  819. color:{color:accent 2};
  820. }
  821.  
  822. .line {
  823. position:absolute;
  824. width:1px;
  825. height:80px;
  826. bottom:112.5px;
  827. right:57.5px;
  828. z-index:9;
  829. border-left:1px solid {color:accent text};
  830. }
  831. /* end pagi styling */
  832.  
  833. /* cried styling -- DO NOT TOUCH pls */
  834. .cred {
  835. position:absolute;
  836. z-index:10;
  837. bottom:15px;
  838. right:15px;
  839. padding:5px;
  840. height:20px;
  841. width:20px;
  842. border-radius:10px;
  843. display:flex;
  844. align-items:center;
  845. justify-content:center;
  846. background-color:{color:accent 1};
  847. }
  848.  
  849. .cred .feather {
  850. height:13px;
  851. width:13px;
  852. stroke:{color:accent text};
  853. }
  854.  
  855. .cred-prompt {
  856. position:absolute;
  857. bottom:20px;
  858. right:55px;
  859. width:65px;
  860. padding:0px 15px;
  861. height:20px;
  862. background-color:{color:posts};
  863. letter-spacing:0.5px;
  864. display:none;
  865. line-height:20px;
  866. font-size:9px;
  867. text-align:center;
  868. }
  869. /* end cred styling */
  870.  
  871. </style>
  872. </head>
  873. <body>
  874.  
  875. <div class="container">
  876.  
  877. <div class="sidebar">
  878. <img src="{image:sidebar 1}" class="image-1">
  879. <div class="block"></div>
  880. <img src="{image:sidebar 2}" class="image-2">
  881.  
  882. <div class="links links-1">
  883. <a href="/">index</a>
  884. <a href="/ask">message</a>
  885. </div>
  886.  
  887. <div class="links links-2">
  888. <a onclick="openTab('navTab')">navigate</a>
  889. {block:IfMuseTab}<a onclick="openTab('museTab')">muses</a>{/block:IfMuseTab}
  890. {block:IfNotMuseTab}<a href="{text:free link}">{text:free link title}</a>{/block:IfNotMuseTab}
  891. </div>
  892.  
  893. <div class="title">{text:title}</div>
  894.  
  895. <div class="desc">{text:description}</div>
  896.  
  897. <div class="draft">
  898. {block:IfDraftCount}
  899. <b>draft count</b><br>
  900. {text:draft count}
  901. {/block:IfDraftCount}
  902. </div>
  903.  
  904. {block:Pagination}
  905. <div class="pagi">
  906. {block:PreviousPage}
  907. <a href="{PreviousPage}">
  908. <div>back</div>
  909. </a>
  910. {block:PreviousPage}{block:NextPage}
  911. <a href="{NextPage}">
  912. <div>next</div>
  913. </a>
  914. {/block:NextPage}
  915. </div>
  916. {/block:Pagination}
  917.  
  918. <div class="line"></div>
  919. </div>
  920.  
  921. <!-- nav tab start -->
  922. <div id="navTab" class="tabcontainer">
  923. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  924. <div class="nav-links">
  925. <div class="info">{text:nav description}</div>
  926. <a href="{text:nav link 1}">
  927. <div class="nav-link"><b>01</b> {text:nav link 1 title}</div>
  928. </a>
  929. <a href="{text:nav link 2}">
  930. <div class="nav-link"><b>02</b> {text:nav link 2 title}</div>
  931. </a>
  932. <a href="{text:nav link 3}">
  933. <div class="nav-link"><b>03</b> {text:nav link 3 title}</div>
  934. </a>
  935. <a href="{text:nav link 4}">
  936. <div class="nav-link"><b>04</b> {text:nav link 4 title}</div>
  937. </a>
  938. </div>
  939. </div>
  940.  
  941. <!-- nav tab start -->
  942. <div id="museTab" class="tabcontainer">
  943. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  944.  
  945. <div class="muses">
  946. <!-- edit muse tooltips and links here
  947. to edit link put link in the 'href="HERE"' and information in the 'title="HERE"'
  948. -->
  949. <a href="/" title="first last. age. something.">
  950. <img src="{image:muse 1}" class="muse">
  951. </a>
  952. <a href="/" title="first last. age. something.">
  953. <img src="{image:muse 2}" class="muse">
  954. </a>
  955. <a href="/" title="first last. age. something.">
  956. <img src="{image:muse 3}" class="muse">
  957. </a>
  958. <a href="/" title="first last. age. something.">
  959. <img src="{image:muse 4}" class="muse">
  960. </a>
  961. <a href="/" title="first last. age. something.">
  962. <img src="{image:muse 5}" class="muse">
  963. </a>
  964. <a href="/" title="first last. age. something.">
  965. <img src="{image:muse 6}" class="muse">
  966. </a>
  967. <a href="/" title="first last. age. something.">
  968. <img src="{image:muse 7}" class="muse">
  969. </a>
  970. <a href="/" title="first last. age. something.">
  971. <img src="{image:muse 8}" class="muse">
  972. </a>
  973. <a href="/" title="first last. age. something.">
  974. <img src="{image:muse 9}" class="muse">
  975. </a>
  976. <!--
  977. to add more muses copy the following and add to above, you'll have to add url of the image for the muse or change the meta tags
  978. <a href="/" title="first last. age. something.">
  979. <img src="URL OF IMAGE" class="muse">
  980. </a>
  981. -->
  982. </div>
  983.  
  984. </div>
  985.  
  986. <div id="entries">
  987. {block:Posts}
  988. <!-- start posts-->
  989. <div class="post" id="{PostID}">
  990.  
  991. {block:RebloggedFrom}
  992. <div class="postinfo-top">
  993. <div class="post-inner">
  994. <a href="{ReblogRootURL}">
  995. <div>posted by {ReblogRootName}</div>
  996. </a>
  997. </div>
  998. </div>
  999. {/block:RebloggedFrom}
  1000.  
  1001. {block:Text}
  1002. {block:Title}<h1 class="post-title">{Title}</h1>{/block:Title}
  1003. {Body}
  1004. {/block:Text}
  1005.  
  1006. {block:Quote}
  1007. <div class="quotediv">"{Quote}"</div>
  1008. {block:Source}
  1009. <div class="quoteinfo">
  1010. <div class="quotebar"></div>
  1011. {Source}
  1012. </div>
  1013. {/block:Source}
  1014. {/block:Quote}
  1015.  
  1016. {block:Chat}
  1017. {block:Title}<h1>{Title}</h1>{/block:Title}
  1018. {block:Lines}
  1019. <div class="chats">
  1020. {block:Label}<b>{Label}</b>{/block:Label}
  1021. {Line}<br>
  1022. </div>
  1023. {/block:Lines}
  1024. {/block:Chat}
  1025.  
  1026. {block:Video}
  1027. <div class="video">{Video-500}</div>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1028. {/block:Video}
  1029.  
  1030. {block:Photo}
  1031. <img src="{PhotoURL-500}" style="margin:-20px 0px -25px -20px; max-width:calc(100% + 40px); ">
  1032. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1033. {/block:Photo}
  1034.  
  1035. {block:Photoset}
  1036. <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>
  1037. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1038. {/block:Photoset}
  1039.  
  1040. {block:Link}
  1041. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1042. {block:Description}{Description}{/block:Description}
  1043. {/block:Link}
  1044.  
  1045.  
  1046. {block:AudioPlayer}
  1047. <div class="audioplayer">{AudioPlayer}
  1048. <div class="audioinfo">
  1049. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  1050. {block:Artist}<br/>{Artist}{/block:Artist}
  1051. </div>
  1052. </div>
  1053. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1054. {/block:AudioPlayer}
  1055.  
  1056. {block:Answer}
  1057. <div class="question">{Question}</div>
  1058. <div class="askerdiv">
  1059. <div class="askbar"></div>asked by <b>{Asker}</b>
  1060. </div>
  1061. <div>{Answer}</div>
  1062. {/block:Answer}
  1063.  
  1064.  
  1065. {block:More}
  1066. <div class="readmore">
  1067. <a href="{Permalink}" class="more-btn">read more</a>
  1068. </div>
  1069. {/block:More}
  1070.  
  1071. <!-- to hide source and via on posts-->
  1072. {block:ContentSource}
  1073. <div style="display: none;">{SourceURL}</div>
  1074. {/block:ContentSource}
  1075.  
  1076. {block:NoRebloggedFrom}
  1077. <div style="display: none;">
  1078. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1079. </div>
  1080. {/block:NoRebloggedFrom}
  1081.  
  1082. {block:Date}
  1083. <div class="postinfo">
  1084. <div class="post-inner">
  1085. <a href="{Permalink}" title="{TimeAgo}">
  1086. <i data-feather="calendar"></i>
  1087. <div>{MonthNumberWithZero}.{DayOfMonthWithZero}</div>
  1088. </a>
  1089. </div>
  1090. {block:NoteCount}<span class="dotz">•</span>{/block:NoteCount}
  1091. <div class="post-inner">
  1092. {block:NoteCount}
  1093. <a href="{Permalink}" title="likes & reblogs">
  1094. <i data-feather="paperclip"></i>
  1095. <div>{NoteCount}</div>
  1096. </a>
  1097. {/block:NoteCount}
  1098. </div>
  1099. <span class="dotz">•</span>
  1100. <div class="post-inner">
  1101. <a href="{ReblogURL}" id="reblogz">
  1102. <div>reblog</div>
  1103. <i data-feather="arrow-right" class="reblog-icon"></i>
  1104. </a>
  1105. </div>
  1106. </div>
  1107. {/block:Date}
  1108.  
  1109. </div>
  1110.  
  1111. {block:HasTags}
  1112. <div class="tags">
  1113. {block:Tags}
  1114. <span class="dotty">•</span><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;
  1115. {/block:Tags}
  1116. </div>
  1117. {/block:HasTags}
  1118.  
  1119.  
  1120. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  1121.  
  1122. {/block:Posts}
  1123.  
  1124.  
  1125. </div>
  1126.  
  1127. </div>
  1128.  
  1129. <!-- my credit please do not touch thanks! -->
  1130. <a href="https://jinsoouls.tumblr.com/" >
  1131. <div class="cred" id="cred">
  1132. <span data-feather="cloud-rain"></span>
  1133. </div>
  1134. </a>
  1135. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1136. <!-- end of credit -->
  1137.  
  1138. <script>
  1139.  
  1140. feather.replace();
  1141.  
  1142. $("#cred").hover(
  1143. function() {
  1144. $("#cred-info").fadeIn();
  1145. }, function() {
  1146. $("#cred-info").fadeOut();
  1147. }
  1148. );
  1149.  
  1150. /* photoset script by annathms and espoirthemes */
  1151. function gatherData(images, arr) {
  1152. for (let i = 0; i < images.length; i++) {
  1153. let currentData = {
  1154. "width": images[i].getAttribute('data-width'),
  1155. "height": images[i].getAttribute('data-height'),
  1156. "low_res": images[i].getAttribute('data-lowres'),
  1157. "high_res": images[i].getAttribute('data-highres')
  1158. };
  1159. arr.push(currentData);
  1160. }
  1161. }
  1162. function getIndex(elem) {
  1163. let i = 0;
  1164. while( (elem = elem.previousElementSibling) != null ) i++;
  1165. return i;
  1166. }
  1167. function lightbox(elem) {
  1168. let currentPhotoset = elem.parentNode;
  1169. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1170. let data = [];
  1171. gatherData(photosetPhotos, data);
  1172. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1173. }
  1174.  
  1175. /* tooltip script */
  1176. $(document).ready(function(){
  1177. $("a[title]").style_my_tooltips({
  1178. tip_follows_cursor:true,
  1179. tip_delay_time:90,
  1180. tip_fade_speed:600,
  1181. attribute:"title"
  1182. });
  1183. });
  1184.  
  1185. /* audio player color script by shudesigns */
  1186. $('iframe.tumblr_audio_player').load( function() {
  1187. $('iframe.tumblr_audio_player').contents().find("head")
  1188. .append($("<style type='text/css'> .audio-player{background:{color:accent 1} !important} </style>"));
  1189. });
  1190.  
  1191. /* tab script by me*/
  1192. function openTab(tabName) {
  1193. $("#entries").fadeOut();
  1194. $('.tabcontainer').each(function(index) {
  1195. if (tabName == $(this).attr('id')) {
  1196. $(this).fadeIn();
  1197. } else {
  1198. $(this).fadeOut();
  1199. }
  1200. });
  1201. }
  1202.  
  1203. function closeTab(el) {
  1204. $(el).parent().fadeOut();
  1205. $('#entries').fadeIn();
  1206. }
  1207.  
  1208. /* popup script by str-wrs */
  1209. $(document).ready(function() {
  1210. //
  1211. $('a.poplight[href^=#]').click(function() {
  1212. var popID = $(this).attr('rel'); //Get Popup Name
  1213. var popURL = $(this).attr('href'); //Get Popup href to define size
  1214. var query= popURL.split('?');
  1215. var dim= query[1].split('&');
  1216. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1217. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="closed"></a>');
  1218. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1219. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1220. //Apply Margin to Popup
  1221. $('#' + popID).css({
  1222. 'margin-top' : -popMargTop,
  1223. 'margin-left' : -popMargLeft
  1224. });
  1225. $('body').append('<div id="fade"></div>');
  1226. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  1227. return false;
  1228. });
  1229. $('a.closed, #fade').live('click', function() {
  1230. $('#fade , .popup_block').fadeOut(function() {
  1231. $('#fade, a.closed').remove(); //fade them both out
  1232. });
  1233. return false;
  1234. });
  1235. });
  1236.  
  1237. </script>
  1238.  
  1239.  
  1240. </script>
  1241. </html>
Add Comment
Please, Sign In to add comment