codesbyjack

THEME #22 sherb / made by jinsoouls

Aug 16th, 2020 (edited)
2,919
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.82 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. sherb 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:container" content="#f6f6f6"/>
  13. <meta name="color:background" content="#eeeeee"/>
  14. <meta name="color:posts" content="#ffffff"/>
  15. <meta name="color:border" content="#eeeeee"/>
  16. <meta name="color:accent" content="#dfd6d4"/>
  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" content=""/>
  29.  
  30. <meta name="if:nav tab" content="0"/>
  31.  
  32. <meta name="text:link 1 title" content="link one"/>
  33. <meta name="text:link 1" content="/"/>
  34. <meta name="text:link 2 title" content="link two"/>
  35. <meta name="text:link 2" content="/"/>
  36.  
  37. <meta name="select:free link icon" content="bell" title="bell">
  38. <meta name="select:free link icon" content="heart" title="heart">
  39. <meta name="select:free link icon" content="cloud" title="cloud">
  40. <meta name="select:free link icon" content="user" title="user">
  41. <meta name="select:free link icon" content="plus" title="plus">
  42. <meta name="select:free link icon" content="settings" title="settings">
  43. <meta name="select:free link icon" content="moon" title="moon">
  44. <meta name="select:free link icon" content="tag" title="tag">
  45.  
  46.  
  47.  
  48. <meta name="text:title" content="left & right."/>
  49. <meta name="text:subtitle" content="keep your eyes wide open and your chin up"/>
  50.  
  51. <meta name="text:description" content="call all our friends i'm a celebrate no one can stop us we party today run toward the climax swinging your tail again you know, like a buffalo"/>
  52.  
  53. <meta name="text:nav description" content=" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
  54.  
  55. <meta name="text:nav link 1" content="/1"/>
  56. <meta name="text:nav link 1 title" content="link one"/>
  57. <meta name="text:nav link 2" content="/2"/>
  58. <meta name="text:nav link 2 title" content="link two"/>
  59. <meta name="text:nav link 3" content="/3"/>
  60. <meta name="text:nav link 3 title" content="link three"/>
  61. <meta name="text:nav link 4" content="/4"/>
  62. <meta name="text:nav link 4 title" content="link four"/>
  63. <meta name="text:nav link 5" content="/5"/>
  64. <meta name="text:nav link 5 title" content="link five"/>
  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. <!-- feather icons-->
  80. <script src="https://unpkg.com/feather-icons"></script>
  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. ::-webkit-scrollbar {
  97. width: 1px;
  98. height: 1px;
  99. background: transparent;
  100. }
  101.  
  102. ::-webkit-scrollbar-thumb {
  103. background: transparent;
  104. }
  105.  
  106. ::selection {
  107. color:{color:accent text};
  108. background-color: {color:accent};
  109. }
  110.  
  111. ::-moz-selection {
  112. color:{color:accent text};
  113. background-color: {color:accent};
  114. }
  115.  
  116. #s-m-t-tooltip {
  117. max-width:300px;
  118. padding:6px 9px;
  119. font-size:10px;
  120. margin:20px 7px 2px 20px;
  121. background-color:{color:posts};
  122. text-transform:lowercase;
  123. color:{color:accent};
  124. z-index:999999999999999999999999999999999999;
  125. font-weight:700;
  126. letter-spacing:0.6px;
  127. border-radius:10px;
  128. box-shadow:0px 2.5px 5px rgba(0,0,0,0.05);
  129. }
  130.  
  131.  
  132. body {
  133. background:{color:background};
  134. background-image:url({image:background});
  135. color:{color:text};
  136. font-family: 'Muli', sans-serif;
  137. font-size:11px;
  138. overflow:hidden;
  139. line-height:100%;
  140. }
  141.  
  142. blockquote {
  143. padding-left:20px;
  144. width:auto;
  145. margin-left:10px;
  146. border-left:1px solid {color:border};
  147. }
  148.  
  149. blockquote blockquote {
  150. padding-left:20px;
  151. margin-left:10px;
  152. border-left:1px solid {color:border};
  153. }
  154.  
  155. blockquote img {max-width:100%;}
  156.  
  157. h1 {
  158. font-size:30px;
  159. color:{color:accent};
  160. text-align:center;
  161. letter-spacing:1px;
  162. text-transform:lowercase;
  163. line-height:100%;
  164. margin:0px;
  165. }
  166.  
  167. h2 {
  168. font-size:14px;
  169. color:{color:accent};
  170. text-align:center;
  171. line-height:100%;
  172. text-transform:lowercase;
  173. font-weight:normal;
  174. }
  175.  
  176. a {
  177. text-decoration:none;
  178. color:{color:link};
  179. -moz-transition-duration:0.8s;
  180. -webkit-transition-duration:0.8s;
  181. -o-transition-duration:0.8s;
  182. }
  183.  
  184. a:hover {
  185. color:{color:hover link};
  186. -moz-transition-duration:0.8s;
  187. -webkit-transition-duration:0.8s;
  188. -o-transition-duration:0.8s;
  189. }
  190.  
  191. b {color:{color:bold};}
  192. strong {color:{color:bold}}
  193. i {color:{color:italic};}
  194. em {color:{color:italic};}
  195. sub {font-size:10px;}
  196. sup {font-size:10px;}
  197. small {font-size:10px;}
  198.  
  199.  
  200. .container {
  201. width:850px;
  202. height:525px;
  203. position:absolute;
  204. margin:auto;
  205. overflow:hidden;
  206. top:0; left:0; right:0; bottom:0;
  207. background-color:{color:container};
  208. border-radius:10px;
  209. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  210. }
  211.  
  212. #entries {
  213. position: absolute;
  214. height:100%;
  215. padding:0px 30px;
  216. width:auto;
  217. right:0px;
  218. top:0px;
  219. overflow:scroll;
  220. z-index:5;
  221. }
  222.  
  223. .post {
  224. padding:20px;
  225. width:390px;
  226. background-color:{color:posts};
  227. margin:30px 0px;
  228. line-height:130%;
  229. overflow:hidden;
  230. border-radius:10px;
  231. box-shadow:0px 5px 10px rgba(0,0,0,0.04);
  232. }
  233.  
  234. .post img {
  235. max-width:100%;
  236. height:auto;
  237. width:auto;
  238. }
  239.  
  240. /* post info styling */
  241. .postinfo-top {
  242. width:calc(100% + 20px);
  243. padding:7.5px 10px;
  244. letter-spacing:0.5px;
  245. border-bottom:1px solid {color:border};
  246. margin:-20px 0px 20px -20px;
  247. display:flex;
  248. justify-content:flex-start;
  249. align-items:center;
  250. }
  251.  
  252. .postinfo {
  253. width:calc(100% + 20px);
  254. padding:7.5px 10px;
  255. letter-spacing:0.5px;
  256. border-top:1px solid {color:border};
  257. margin:20px 0px -20px -20px;
  258. display:flex;
  259. justify-content:flex-end;
  260. align-items:center;
  261. }
  262.  
  263. .post-inner a {
  264. color:{color:text};
  265. text-transform:uppercase;
  266. font-size:8px;
  267. font-weight:700;
  268. display:flex;
  269. flex-direction:row;
  270. justify-content:center;
  271. align-items:center;
  272. }
  273.  
  274. .post-inner .feather {
  275. width:10px;
  276. height:10px;
  277. stroke:{color:accent};
  278. margin:0px 5px;
  279. }
  280.  
  281. .dotz {
  282. margin:0px 7.5px;
  283. font-size:6px;
  284. opacity:0.3;
  285. }
  286.  
  287. .reblog-icon {
  288. -moz-transition-duration:0.8s;
  289. -webkit-transition-duration:0.8s;
  290. -o-transition-duration:0.8s;
  291. }
  292.  
  293. #reblogz:hover .reblog-icon {
  294. transform:translate(1.5px,0);
  295. -moz-transition-duration:0.8s;
  296. -webkit-transition-duration:0.8s;
  297. -o-transition-duration:0.8s;
  298. }
  299.  
  300. .tags {
  301. font-size:10px;
  302. letter-spacing:0.5px;
  303. width:390px;
  304. text-align:left;
  305. line-height:120%;
  306. padding:5px 10px;
  307. margin:-27.5px 0px 30px 0px;
  308. }
  309.  
  310. .tags .dotty {
  311. margin:5px;
  312. color:{color:accent};
  313. }
  314.  
  315. .postnote {
  316. background-color:{color:posts};
  317. text-transform:lowercase;
  318. text-align:left;
  319. margin: 0px 0px 20px 20px;
  320. width:370px;
  321. padding: 10px;
  322. border-radius:10px;
  323. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  324. }
  325.  
  326. .postnote li {
  327. margin:5px 0px;
  328. }
  329. /* end post info styling */
  330.  
  331. /* different post types styling */
  332. .question {
  333. padding:20px 10px;
  334. text-align:center;
  335. border:1px solid {color:border};
  336. border-bottom:none;
  337. border-radius:7.5px 7.5px 0px 0px;
  338. }
  339.  
  340. .askerdiv {
  341. padding:5px 10px;
  342. text-align:right;
  343. border:1px solid {color:border};
  344. color:{color:text};
  345. text-transform:uppercase;
  346. font-size:10px;
  347. letter-spacing:0.25px;
  348. border-radius:0px 0px 7.5px 7.5px;
  349. }
  350.  
  351. .askerdiv a {
  352. color:{color:text};
  353. font-weight:700;
  354. }
  355.  
  356. .askerdiv .askbar {
  357. display:inline-block;
  358. height:1px;
  359. width:100px;
  360. background-color:{color:accent};
  361. transform:translateY(-2.5px);
  362. margin-right:10px;
  363. }
  364.  
  365.  
  366. .quotediv {
  367. font-size:15px;
  368. text-align:center;
  369. border:1px solid {color:border};
  370. border-bottom:none;
  371. padding:20px 10px;
  372. text-transform:lowercase;
  373. line-height:150%;
  374. border-radius:7.5px 7.5px 0px 0px;
  375. }
  376.  
  377. .quoteinfo {
  378. color:{color:text};
  379. font-weight:600;
  380. padding:5px 10px;
  381. border:1px solid {color:border};
  382. text-transform:uppercase;
  383. font-size:10px;
  384. letter-spacing:0.25px;
  385. text-align:right;
  386. margin-bottom:20px;
  387. border-radius:0px 0px 7.5px 7.5px;
  388. }
  389.  
  390. .quoteinfo .quotebar {
  391. display:inline-block;
  392. height:1px;
  393. width:100px;
  394. background-color:{color:accent};
  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. border:1px solid {color:border};
  409. font-size:13px;
  410. height:27.5px;
  411. border-radius:7.5px;
  412. margin-bottom:20px;
  413. }
  414.  
  415. .audioinfo {
  416. color:{color:text};
  417. width:100%;
  418. text-align:right;
  419. margin-top:-30px;
  420. letter-spacing:0.4px;
  421. font-weight:600;
  422. line-height:70%;
  423. }
  424.  
  425. .audioinfo div {
  426. font-size:13px;
  427. font-weight:lighter;
  428. }
  429.  
  430. .readmore {
  431. width:100%;
  432. text-transform:uppercase;
  433. text-align:center;
  434. margin-bottom:10px;
  435. padding:10px 0px;
  436. }
  437.  
  438. .readmore a {
  439. font-size:10px;
  440. letter-spacing:1px;
  441. background-color:{color:accent};
  442. padding:5px 12.5px 4px 12.5px;
  443. color:{color:accent text};
  444. font-weight:800;
  445. border-radius:10px;
  446. }
  447.  
  448. .readmore:hover a {
  449. background-color:{color:text};
  450. }
  451.  
  452.  
  453. .photoset-grid {
  454. grid-gap: 1px;
  455. width:calc(100% + 40px);
  456. margin:-20px 0px -20px -20px;
  457. }
  458.  
  459.  
  460. .photoset-grid img {
  461. vertical-align:top;
  462. }
  463.  
  464. .photoset-grid div {
  465.  
  466. vertical-align:top;
  467. }
  468.  
  469. [photoset-layout] div {
  470. cursor: pointer;
  471. }
  472.  
  473. [photoset-layout] div {
  474. vertical-align:top;
  475. }
  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. /* sidebar styling */
  508. .sidebar {
  509. position:absolute;
  510. height:100%;
  511. width:60px;
  512. left:0px;
  513. background-color:{color:posts};
  514. border-right:1px solid {color:border};
  515. z-index:9;
  516. box-shadow:0px 2.5px 7.5px rgba(0,0,0,0.04);
  517. }
  518.  
  519. #links-wrapper {
  520. position:absolute;
  521. top:7.5px;
  522. width:100%;
  523. height:210px;
  524. }
  525.  
  526. .links {
  527. width:100%;
  528. height:100%;
  529. margin-top:0px;
  530. display:flex;
  531. flex-direction:column;
  532. justify-content:flex-start;
  533. align-items:center;
  534. overflow:hidden;
  535. -moz-transition-duration:0.8s;
  536. -webkit-transition-duration:0.8s;
  537. -o-transition-duration:0.8s;
  538. }
  539.  
  540. .link {
  541. width:40px;
  542. height:40px;
  543. display:flex;
  544. border-radius:10px;
  545. justify-content:center;
  546. background-color:{color:accent};
  547. align-items:center;
  548. margin:2.5px 0px;
  549. box-shadow:0px 2.5px 5px rgba(0,0,0,0.05);
  550. cursor:pointer;
  551. }
  552.  
  553. .link .feather {
  554. width:16px;
  555. height:16px;
  556. stroke:{color:accent text};
  557. -moz-transition-duration:0.8s;
  558. -webkit-transition-duration:0.8s;
  559. -o-transition-duration:0.8s;
  560. }
  561.  
  562. .link:hover .feather {
  563. stroke:{color:text};
  564. -moz-transition-duration:0.8s;
  565. -webkit-transition-duration:0.8s;
  566. -o-transition-duration:0.8s;
  567. }
  568.  
  569. .side-box {
  570. position:absolute;
  571. background-color:{color:accent};
  572. top:90px;
  573. left:100px;
  574. width:250px;
  575. height:175px;
  576. padding-bottom:25px;
  577. border-top:none;
  578. border-left:none;
  579. box-shadow:0px 2.5px 10px rgba(0,0,0,0.05);
  580. z-index:1;
  581. border-radius:10px;
  582. }
  583.  
  584. .desc {
  585. position:absolute;
  586. font-size:9px;
  587. letter-spacing:1px;
  588. line-height:250%;
  589. top:305px;
  590. left:105px;
  591. z-index:2;
  592. width:190px;
  593. text-align:justify;
  594. text-transform:uppercase;
  595. opacity:0.8;
  596. }
  597.  
  598. .desc b {
  599. color:{color:accent};
  600. }
  601.  
  602. .subtitle {
  603. position:absolute;
  604. bottom:0px;
  605. font-size:10px;
  606. text-transform:uppercase;
  607. font-weight:600;
  608. letter-spacing:1.5px;
  609. transform:rotate(-90deg);
  610. left:-125px;
  611. bottom:165px;
  612. white-space: nowrap;
  613. width:310px;
  614. }
  615.  
  616. .side-png {
  617. position:absolute;
  618. width:200px;
  619. bottom:0px;
  620. left:150px;
  621. z-index:10;
  622. }
  623.  
  624. .title {
  625. position:absolute;
  626. top:265px;
  627. left:110px;
  628. width:210px;
  629. text-align:right;
  630. font-size:9px;
  631. padding:5px 20px;
  632. color:{color:accent text};
  633. letter-spacing:1px;
  634. text-transform:uppercase;
  635. line-height:150%;
  636. font-weight:700;
  637. z-index:2;
  638. -moz-transition-duration:0.8s;
  639. -webkit-transition-duration:0.8s;
  640. -o-transition-duration:0.8s;
  641. }
  642.  
  643. .pagi {
  644. position:absolute;
  645. top:305px;
  646. left:302.5px;
  647. }
  648.  
  649. .pagi div {
  650. padding:10px;
  651. width:15px;
  652. height:15px;
  653. background-color:{color:posts};
  654. border-radius:10px;
  655. border:1px solid {color:border};
  656. box-shadow:0px 2.5px 7.5px rgba(0,0,0,0.04);
  657. margin:5px;
  658. }
  659.  
  660. .pagi div .feather {
  661. width:15px;
  662. height:15px;
  663. stroke:{color:accent};
  664. -moz-transition-duration:0.8s;
  665. -webkit-transition-duration:0.8s;
  666. -o-transition-duration:0.8s;
  667. }
  668.  
  669. .pagi div:hover .feather {
  670. stroke:{color:text};
  671. -moz-transition-duration:0.8s;
  672. -webkit-transition-duration:0.8s;
  673. -o-transition-duration:0.8s;
  674. }
  675. /* endsidebar styling */
  676.  
  677. /* side tab control styling */
  678. .tabcontainer {
  679. position:absolute;
  680. right:0px;
  681. top:0px;
  682. width:500px;
  683. height:100%;
  684. display:none;
  685. background-color:{color:container};
  686. z-index:9;
  687. }
  688.  
  689. .close {
  690. position:absolute;
  691. border-radius:100%;
  692. width:30px;
  693. height:30px;
  694. font-size:14px;
  695. background-color:{color:accent};
  696. color:{color:accent text};
  697. right:15px;
  698. line-height:25px;
  699. top:15px;
  700. text-align:center;
  701. z-index:999999999999;
  702. border-radius:100%;
  703. box-shadow:0px 5px 3px rgba(0,0,0,0.02);
  704. -moz-transition-duration:0.8s;
  705. -webkit-transition-duration:0.8s;
  706. -o-transition-duration:0.8s;
  707. }
  708.  
  709. .close .feather {
  710. width:16px;
  711. height:16px;
  712. margin-top:7px;
  713. }
  714.  
  715. .close:hover {
  716. cursor: pointer;
  717. background-color:{color:bold};
  718. -moz-transition-duration:0.8s;
  719. -webkit-transition-duration:0.8s;
  720. -o-transition-duration:0.8s;
  721. }
  722. /* end tab control styling */
  723.  
  724. /* cried styling -- DO NOT TOUCH pls */
  725. .cred {
  726. background-color:{color:posts};
  727. position:absolute;
  728. z-index:10;
  729. bottom:15px;
  730. right:15px;
  731. padding:5px;
  732. height:20px;
  733. width:20px;
  734. border-radius:100%;
  735. display:flex;
  736. align-items:center;
  737. justify-content:center;
  738. background-color:{color:accent};
  739. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  740. }
  741.  
  742. .cred .feather {
  743. height:13px;
  744. width:13px;
  745. stroke:{color:accent text};
  746. }
  747.  
  748. .cred-prompt {
  749. position:absolute;
  750. bottom:20px;
  751. right:55px;
  752. width:65px;
  753. padding:0px 15px;
  754. border-radius:20px;
  755. height:20px;
  756. background-color:{color:posts};
  757. letter-spacing:0.5px;
  758. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  759. display:none;
  760. line-height:20px;
  761. font-size:9px;
  762. text-align:center;
  763. }
  764. /* end cred styling */
  765.  
  766. .nav-desc {
  767. width:175px;
  768. height:275px;
  769. border:15px solid {color:accent};
  770. position:absolute;
  771. margin:auto;
  772. top:0; left:175px; right:0; bottom:0;
  773. background-color:{color:accent};
  774. color:{color:accent text};
  775. text-transform:lowercase;
  776. letter-spacing:1px;
  777. line-height:230%;
  778. box-shadow:0px 2.5px 10px rgba(0,0,0,0.05);
  779. z-index:2;
  780. border-radius:15px;
  781. overflow:scroll;
  782. }
  783.  
  784. .nav-links {
  785. width:170px;
  786. height:220px;
  787. padding:15px;
  788. position:absolute;
  789. margin:auto;
  790. top:0; left:0px; right:190px; bottom:0;
  791. background-color:{color:posts};
  792. text-transform:lowercase;
  793. letter-spacing:1px;
  794. line-height:230%;
  795. box-shadow:0px 2.5px 10px rgba(0,0,0,0.05);
  796. z-index:1;
  797. border-radius:15px;
  798. display:flex;
  799. flex-direction:column;
  800. justify-content:center;
  801. align-items:flex-start;
  802. }
  803.  
  804. .nav-link {
  805. width:100%;
  806. height:30px;
  807. margin:7.5px 0px;
  808. cursor:pointer;
  809. display:flex;
  810. justify-content:flex-start;
  811. align-items:center;
  812. }
  813.  
  814. .nav-link-num {
  815. width:30px;
  816. height:30px;
  817. border-radius:100%;
  818. color:{color:accent text};
  819. font-size:13px;
  820. font-weight:bolder;
  821. background:{color:accent};
  822. display:flex;
  823. justify-content:center;
  824. align-items:center;
  825. margin-right:12px;
  826. -moz-transition-duration:0.8s;
  827. -webkit-transition-duration:0.8s;
  828. -o-transition-duration:0.8s;
  829. box-shadow:0px 2.5px 10px rgba(0,0,0,0.05);
  830. }
  831.  
  832. .nav-link-label {
  833. text-transform:uppercase;
  834. font-size:9px;
  835. letter-spacing:1px;
  836. }
  837.  
  838. .nav-link:hover .nav-link-num {
  839. background:{color:bold};
  840. -moz-transition-duration:0.8s;
  841. -webkit-transition-duration:0.8s;
  842. -o-transition-duration:0.8s;
  843. }
  844.  
  845. </style>
  846. </head>
  847. <body>
  848.  
  849. <div class="container">
  850.  
  851. <div class="title">{text:title}</div>
  852.  
  853. <div class="desc">{text:description}</div>
  854.  
  855. <div class="sidebar">
  856. <div class="subtitle">{text:subtitle}</div>
  857. <div id="links-wrapper">
  858. <div class="links">
  859. <a href="/" title="refresh">
  860. <div class="link">
  861. <i data-feather="home"></i>
  862. </div>
  863. </a>
  864. <a href="/ask" title="inbox">
  865. <div class="link">
  866. <i data-feather="message-circle"></i>
  867. </div>
  868. </a>
  869. {block:IfNotNavTab}
  870. <a href="{text:link 1}" title="{text:link 1 title}">
  871. <div class="link">
  872. <i data-feather="compass"></i>
  873. </div>
  874. </a>
  875. {/block:IfNotNavTab}
  876. {block:IfNavTab}
  877. <a onclick="openTab('navTab')" title="navigate">
  878. <div class="link">
  879. <i data-feather="compass"></i>
  880. </div>
  881. </a>
  882. {/block:IfNavTab}
  883. <a href="{text:link 2}" title="{text:link 2 title}">
  884. <div class="link">
  885. <i data-feather="{select:free link icon}"></i>
  886. </div>
  887. </a>
  888. </div>
  889. </div>
  890. </div>
  891.  
  892. <img src="{image:sidebar}" class="side-box">
  893.  
  894. {block:Pagination}
  895. <div class="pagi">
  896. {block:PreviousPage}
  897. <a href="{PreviousPage}">
  898. <div>
  899. <span data-feather="chevron-left"></span>
  900. </div>
  901. </a>
  902. {/block:PreviousPage}{block:NextPage}
  903. <a href="{NextPage}">
  904. <div>
  905. <span data-feather="chevron-right"></span>
  906. </div>
  907. </a>
  908. {/block:NextPage}
  909. </div>
  910. {/block:Pagination}
  911.  
  912. <!-- nav tab start -->
  913. <div id="navTab" class="tabcontainer">
  914. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  915. <div class="nav-desc">{text:nav description}</div>
  916. <div class="nav-links">
  917. <a href="{text:nav link 1}">
  918. <div class="nav-link">
  919. <div class="nav-link-num">01</div>
  920. <div class="nav-link-label">{text:nav link 1 title}</div>
  921. </div>
  922. </a>
  923. <a href="{text:nav link 2}">
  924. <div class="nav-link">
  925. <div class="nav-link-num">02</div>
  926. <div class="nav-link-label">{text:nav link 2 title}</div>
  927. </div>
  928. </a>
  929. <a href="{text:nav link 3}">
  930. <div class="nav-link">
  931. <div class="nav-link-num">03</div>
  932. <div class="nav-link-label">{text:nav link 3 title}</div>
  933. </div>
  934. </a>
  935. <a href="{text:nav link 4}">
  936. <div class="nav-link">
  937. <div class="nav-link-num">04</div>
  938. <div class="nav-link-label">{text:nav link 4 title}</div>
  939. </div>
  940. </a>
  941. <a href="{text:nav link 5}">
  942. <div class="nav-link">
  943. <div class="nav-link-num">05</div>
  944. <div class="nav-link-label">{text:nav link 5 title}</div>
  945. </div>
  946. </a>
  947. </div>
  948. </div>
  949.  
  950. <div id="entries">
  951. {block:Posts}
  952. <!-- start posts-->
  953. <div class="post" id="{PostID}">
  954.  
  955. {block:RebloggedFrom}
  956. <div class="postinfo-top">
  957. <div class="post-inner" style="margin-left:5px">
  958. <a href="{ReblogRootURL}">
  959. <div>posted by {ReblogRootName}</div>
  960. </a>
  961. </div>
  962. </div>
  963. {/block:RebloggedFrom}
  964.  
  965. {block:Text}
  966. {block:Title}<h1>{Title}</h1>{/block:Title}
  967. {Body}
  968. {/block:Text}
  969.  
  970. {block:Quote}
  971. <div class="quotediv">"{Quote}"</div>
  972. {block:Source}
  973. <div class="quoteinfo">
  974. <div class="quotebar"></div>
  975. {Source}
  976. </div>
  977. {/block:Source}
  978. {/block:Quote}
  979.  
  980. {block:Chat}
  981. {block:Title}<h1>{Title}</h1>{/block:Title}
  982. {block:Lines}
  983. <div class="chats">
  984. {block:Label}<b>{Label}</b>{/block:Label}
  985. {Line}<br>
  986. </div>
  987. {/block:Lines}
  988. {/block:Chat}
  989.  
  990. {block:Video}
  991. <div class="video">{Video-500}</div>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  992. {/block:Video}
  993.  
  994. {block:Photo}
  995. <img src="{PhotoURL-500}" style="margin:-20px 0px -25px -20px; max-width:calc(100% + 40px); ">
  996. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  997. {/block:Photo}
  998.  
  999.  
  1000. {block:Photoset}
  1001. <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>
  1002. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1003. {/block:Photoset}
  1004.  
  1005. {block:Link}
  1006. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1007. {block:Description}{Description}{/block:Description}
  1008. {/block:Link}
  1009.  
  1010.  
  1011. {block:AudioPlayer}
  1012. <div class="audioplayer">{AudioPlayer}
  1013. <div class="audioinfo">
  1014. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  1015. {block:Artist}<br/>{Artist}{/block:Artist}
  1016. </div>
  1017. </div>
  1018. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1019. {/block:AudioPlayer}
  1020.  
  1021. {block:Answer}
  1022. <div class="question">{Question}</div>
  1023. <div class="askerdiv">
  1024. <div class="askbar"></div>asked by <b>{Asker}</b>
  1025. </div>
  1026. <div>{Answer}</div>
  1027. {/block:Answer}
  1028.  
  1029.  
  1030. {block:More}
  1031. <div class="readmore">
  1032. <a href="{Permalink}" class="more-btn">read more</a>
  1033. </div>
  1034. {/block:More}
  1035.  
  1036. <!-- to hide source and via on posts-->
  1037. {block:ContentSource}
  1038. <div style="display: none;">{SourceURL}</div>
  1039. {/block:ContentSource}
  1040.  
  1041. {block:NoRebloggedFrom}
  1042. <div style="display: none;">
  1043. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1044. </div>
  1045. {/block:NoRebloggedFrom}
  1046.  
  1047. {block:Date}
  1048. <div class="postinfo">
  1049. {block:ContentSource}
  1050. <div class="post-inner">
  1051.  
  1052. <a href="{SourceURL}" class="source-link">
  1053. <div>source</div>
  1054. </a>
  1055. </div>
  1056. <span class="dotz">•</span>
  1057. {/block:ContentSource}
  1058. <div class="post-inner">
  1059. <a href="{Permalink}" title="{TimeAgo}">
  1060. <i data-feather="calendar"></i>
  1061. <div>{MonthNumberWithZero}.{DayOfMonthWithZero}</div>
  1062. </a>
  1063. </div>
  1064. {block:NoteCount}<span class="dotz">•</span>{/block:NoteCount}
  1065. <div class="post-inner">
  1066. {block:NoteCount}
  1067. <a href="{Permalink}" title="likes & reblogs">
  1068. <i data-feather="paperclip"></i>
  1069. <div>{NoteCount}</div>
  1070. </a>
  1071. {/block:NoteCount}
  1072. </div>
  1073. <span class="dotz">•</span>
  1074. <div class="post-inner">
  1075. <a href="{ReblogURL}" id="reblogz">
  1076. <div>reblog</div>
  1077. <i data-feather="arrow-right" class="reblog-icon"></i>
  1078. </a>
  1079. </div>
  1080. </div>
  1081. {/block:Date}
  1082.  
  1083. </div>
  1084.  
  1085. {block:HasTags}
  1086. <div class="tags">
  1087. {block:Tags}
  1088. <span class="dotty">•</span><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  1089. </div>
  1090. {/block:HasTags}
  1091.  
  1092.  
  1093. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  1094.  
  1095. {/block:Posts}
  1096.  
  1097.  
  1098. </div>
  1099.  
  1100. </div>
  1101.  
  1102. <!-- my credit please do not touch thanks! -->
  1103. <a href="https://jinsoouls.tumblr.com/" >
  1104. <div class="cred" id="cred">
  1105. <span data-feather="cloud-rain"></span>
  1106. </div>
  1107. </a>
  1108. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1109. <!-- end of credit -->
  1110.  
  1111. <script>
  1112.  
  1113. feather.replace();
  1114.  
  1115. $("#cred").hover(
  1116. function() {
  1117. $("#cred-info").fadeIn();
  1118. }, function() {
  1119. $("#cred-info").fadeOut();
  1120. }
  1121. );
  1122.  
  1123. /* photoset script by annathms and espoirthemes */
  1124. function gatherData(images, arr) {
  1125. for (let i = 0; i < images.length; i++) {
  1126. let currentData = {
  1127. "width": images[i].getAttribute('data-width'),
  1128. "height": images[i].getAttribute('data-height'),
  1129. "low_res": images[i].getAttribute('data-lowres'),
  1130. "high_res": images[i].getAttribute('data-highres')
  1131. };
  1132. arr.push(currentData);
  1133. }
  1134. }
  1135. function getIndex(elem) {
  1136. let i = 0;
  1137. while( (elem = elem.previousElementSibling) != null ) i++;
  1138. return i;
  1139. }
  1140. function lightbox(elem) {
  1141. let currentPhotoset = elem.parentNode;
  1142. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1143. let data = [];
  1144. gatherData(photosetPhotos, data);
  1145. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1146. }
  1147.  
  1148. /* tooltip script */
  1149. $(document).ready(function(){
  1150. $("a[title]").style_my_tooltips({
  1151. tip_follows_cursor:true,
  1152. tip_delay_time:90,
  1153. tip_fade_speed:600,
  1154. attribute:"title"
  1155. });
  1156. });
  1157.  
  1158. /* audio player color script by shudesigns */
  1159. $('iframe.tumblr_audio_player').load( function() {
  1160. $('iframe.tumblr_audio_player').contents().find("head")
  1161. .append($("<style type='text/css'> .audio-player{background:{color:posts} !important} </style>"));
  1162. });
  1163.  
  1164.  
  1165. /* tab script by me*/
  1166. function openTab(tabName) {
  1167. $('.tabcontainer').each(function(index) {
  1168. if (tabName == $(this).attr('id')) {
  1169. $(this).fadeIn();
  1170. } else {
  1171. $(this).fadeOut();
  1172. }
  1173. });
  1174. }
  1175.  
  1176. function closeTab(el) {
  1177. $(el).parent().fadeOut();
  1178. $('#nav').removeClass('active');
  1179. }
  1180.  
  1181. </script>
  1182.  
  1183. </html>
Add Comment
Please, Sign In to add comment