codesbyjack

THEME #19 ridin / made by jinsoouls

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