codesbyjack

THEME #25 shep / made by jinsoouls

Nov 11th, 2020 (edited)
1,330
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.59 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. shep by jinsoouls
  7. you know the deal, the usual rules
  8. apply, don't remove credit,
  9. repost or claim as your own!
  10.  
  11. -->
  12.  
  13. <meta name="color:background" content="#ffffff"/>
  14. <meta name="color:container" content="#ffffff"/>
  15. <meta name="color:posts" content="#ffffff"/>
  16. <meta name="color:border" content="#eeeeee"/>
  17. <meta name="color:accent 1" content="#dfd6d4"/>
  18. <meta name="color:accent 2" content="#797979"/>
  19. <meta name="color:accent 3" content="#797979"/>
  20. <meta name="color:accent text" content="#ffffff"/>
  21. <meta name="color:text" content="#313131"/>
  22. <meta name="color:title" content="#313131"/>
  23. <meta name="color:title" content="#414141"/>
  24. <meta name="color:bold" content="#7e7e7e"/>
  25. <meta name="color:italic" content="#7e7e7e"/>
  26. <meta name="color:border" content="#eeeeee"/>
  27. <meta name="color:link" content="#4c4c4c"/>
  28. <meta name="color:hover link" content="#b0b0b0"/>
  29.  
  30. <meta name="if:updates box" content="0"/>
  31.  
  32. <meta name="image:background" content=""/>
  33. <meta name="image:sidebar" content=""/>
  34.  
  35. <meta name="select:png width" content="100px" title="100px">
  36. <meta name="select:png width" content="125px" title="125px">
  37. <meta name="select:png width" content="150px" title="150px">
  38. <meta name="select:png width" content="175px" title="175px">
  39. <meta name="select:png width" content="200px" title="200px">
  40. <meta name="select:png width" content="225px" title="225px">
  41. <meta name="select:png width" content="250px" title="250px">
  42.  
  43. <meta name="select:png margin left" content="100px" title="100px">
  44. <meta name="select:png margin left" content="125px" title="125px">
  45. <meta name="select:png margin left" content="150px" title="150px">
  46. <meta name="select:png margin left" content="175px" title="175px">
  47. <meta name="select:png margin left" content="200px" title="200px">
  48. <meta name="select:png margin left" content="225px" title="225px">
  49. <meta name="select:png margin left" content="250px" title="250px">
  50.  
  51. <meta name="select:title size" content="60px" title="60px">
  52. <meta name="select:title size" content="50px" title="50px">
  53. <meta name="select:title size" content="40px" title="40px">
  54. <meta name="select:title size" content="30px" title="30px">
  55. <meta name="select:title size" content="25px" title="25px">
  56. <meta name="select:title size" content="20px" title="20px">
  57. <meta name="select:title size" content="15px" title="15px">
  58.  
  59. <meta name="text:title" content="rainbow in the sky"/>
  60. <meta name="text:description" content="as the world i’m heading towards and matching up to is getting bigger It makes me feel an emptiness somehow"/>
  61. <meta name="text:subtitle" content="as the world i’m heading towards and matching up to"/>
  62.  
  63. <meta name="text:free link" content="/"/>
  64. <meta name="text:free link title" content="extra"/>
  65.  
  66. <meta name="text:nav title" content="navigation."/>
  67. <meta name="text:nav description" content="word words words words"/>
  68.  
  69. <meta name="text:nav link 1" content="/1"/>
  70. <meta name="text:nav link 1 title" content="link one"/>
  71. <meta name="text:nav link 2" content="/2"/>
  72. <meta name="text:nav link 2 title" content="link two"/>
  73. <meta name="text:nav link 3" content="/3"/>
  74. <meta name="text:nav link 3 title" content="link three"/>
  75. <meta name="text:nav link 4" content="/4"/>
  76. <meta name="text:nav link 4 title" content="link four"/>
  77. <meta name="text:nav link 5" content="/5"/>
  78. <meta name="text:nav link 5 title" content="link five"/>
  79.  
  80. <meta name="text:updates" content="updates go here"/>
  81.  
  82. <head>
  83.  
  84. <title>{Title}</title>
  85. <link rel="shortcut icon" href="{Favicon}">
  86. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  87. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  88.  
  89. <!-- jquery -->
  90. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  91.  
  92. <!-- script for tooltips -->
  93. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  94.  
  95. <!-- feather icons-->
  96. <script src="https://unpkg.com/feather-icons"></script>
  97.  
  98. <!-- google fonts -->
  99. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  100.  
  101. <!-- photoset.css by annathms and espoirthemes -->
  102. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  103.  
  104. <!-- autoresize video script by shythemes -->
  105. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  106.  
  107. <!-- animate.css -->
  108. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  109.  
  110. <style>
  111.  
  112. @font-face { font-family: "mont"; src: url(" https://dl.dropboxusercontent.com/s/gw86uuuybwd8c96/Mont-HeavyDEMO.otf"); }
  113.  
  114. ::-webkit-scrollbar {
  115. width: 1px;
  116. height: 1px;
  117. background: transparent;
  118. }
  119.  
  120. ::-webkit-scrollbar-thumb {
  121. background: transparent;
  122. }
  123.  
  124. ::selection {
  125. color:{color:accent text};
  126. background-color: {color:accent 2};
  127. }
  128.  
  129. ::-moz-selection {
  130. color:{color:accent text};
  131. background-color: {color:accent 2};
  132. }
  133.  
  134. #s-m-t-tooltip {
  135. max-width:300px;
  136. padding:6px 9px;
  137. margin:20px 7px 2px 20px;
  138. background-color:{color:posts};
  139. text-transform:lowercase;
  140. z-index:999999999999999999999999999999999999;
  141. border:1px solid {color:border};
  142. }
  143.  
  144. body {
  145. background:{color:background};
  146. background-image:url({image:background});
  147. color:{color:text};
  148. font-family: 'Karla', sans-serif;
  149. font-size:11px;
  150. line-height:100%;
  151. }
  152.  
  153. blockquote {
  154. padding-left:20px;
  155. width:auto;
  156. margin-left:10px;
  157. border-left:1px solid {color:border};
  158. }
  159.  
  160. blockquote blockquote {
  161. padding-left:20px;
  162. margin-left:10px;
  163. border-left:1px solid {color:border};
  164. }
  165.  
  166. blockquote img {max-width:100%;}
  167.  
  168. h1 {
  169. font-size:22px;
  170. font-weight:700;
  171. color:{color:accent 1};
  172. text-align:center;
  173. line-height:100%;
  174. text-transform:lowercase;
  175. }
  176.  
  177. h2 {
  178. font-size:16px;
  179. color:{color:accent 1};
  180. text-align:center;
  181. line-height:100%;
  182. text-transform:lowercase;
  183. }
  184.  
  185. a {
  186. text-decoration:none;
  187. color:{color:link};
  188. -moz-transition-duration:0.8s;
  189. -webkit-transition-duration:0.8s;
  190. -o-transition-duration:0.8s;
  191. }
  192.  
  193. a:hover {
  194. color:{color:hover link};
  195. -moz-transition-duration:0.8s;
  196. -webkit-transition-duration:0.8s;
  197. -o-transition-duration:0.8s;
  198. }
  199.  
  200. b {color:{color:bold};}
  201. strong {color:{color:bold}}
  202. i {color:{color:italic};}
  203. em {color:{color:italic};}
  204. sub {font-size:11px;}
  205. sup {font-size:11px;}
  206. small {font-size:11px;}
  207.  
  208. .container {
  209. width:850px;
  210. height:550px;
  211. position:absolute;
  212. margin:auto;
  213. top:0; left:0; right:0; bottom:0;
  214. background-color:{color:container};
  215. border-radius:20px;
  216. overflow:hidden;
  217. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  218. }
  219.  
  220. #entries {
  221. position: absolute;
  222. height:100%;
  223. width:450px;
  224. top:0px;
  225. right:30px;
  226. overflow:scroll;
  227. }
  228.  
  229. .post {
  230. padding:20px;
  231. width:auto;
  232. background-color:{color:posts};
  233. margin:50px 20px;
  234. line-height:130%;
  235. border-radius:15px;
  236. overflow:hidden;
  237. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  238. }
  239.  
  240. /* post info styling */
  241. .postinfo-top {
  242. width:calc(100% - 60px);
  243. padding:7.5px 10px;
  244. letter-spacing:0.5px;
  245. background:{color:posts};
  246. margin:50px 0px -40px 20px;
  247. display:flex;
  248. justify-content:space-between;
  249. align-items:center;
  250. border-radius:15px;
  251. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  252. }
  253.  
  254. .postinfo {
  255. width:calc(100% - 60px);
  256. padding:7.5px 10px;
  257. letter-spacing:0.5px;
  258. background:{color:posts};
  259. margin:-40px 0px 50px 20px;
  260. display:flex;
  261. justify-content:flex-end;
  262. align-items:center;
  263. border-radius:15px;
  264. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  265. }
  266.  
  267. .post-inner {
  268. display:flex;
  269. flex-direction:row;
  270. justify-content:center;
  271. align-items:center;
  272. }
  273.  
  274. .post-inner span {
  275. color:{color:text};
  276. text-transform:uppercase;
  277. font-size:9px;
  278. font-weight:500;
  279. letter-spacing:0.75px;
  280. display:flex;
  281. flex-direction:row;
  282. justify-content:center;
  283. align-items:center;
  284. }
  285.  
  286. .post-inner a {
  287. color:{color:text};
  288. text-transform:uppercase;
  289. font-size:9px;
  290. font-weight:500;
  291. letter-spacing:0.75px;
  292. display:flex;
  293. flex-direction:row;
  294. justify-content:center;
  295. align-items:center;
  296. }
  297.  
  298. .source-link {
  299. font-weight:700;
  300. color:{color:accent 1};
  301. }
  302.  
  303. .post-inner .feather {
  304. width:9px;
  305. height:9px;
  306. stroke:{color:accent 2};
  307. margin:0px 5px;
  308. }
  309.  
  310. .postinfo-top .feather {
  311. margin-right:10px;
  312. }
  313.  
  314. .dotz {
  315. margin:0px 7.5px;
  316. font-size:6px;
  317. opacity:0.3;
  318. }
  319.  
  320. .reblog-icon {
  321. -moz-transition-duration:0.8s;
  322. -webkit-transition-duration:0.8s;
  323. -o-transition-duration:0.8s;
  324. }
  325.  
  326. #reblogz:hover .reblog-icon {
  327. transform:translate(1.5px,0);
  328. -moz-transition-duration:0.8s;
  329. -webkit-transition-duration:0.8s;
  330. -o-transition-duration:0.8s;
  331. }
  332.  
  333. .tags {
  334. width:calc(100% - 60px);
  335. padding:7.5px 10px;
  336. font-size:10px;
  337. letter-spacing:0.5px;
  338. line-height:100%;
  339. display:flex;
  340. flex-wrap: wrap;
  341. align-items:center;
  342. justify-content:flex-start;
  343. margin:-50px 0px 50px 20px;
  344. }
  345.  
  346. .tags a {
  347. color:{color:text};
  348. }
  349.  
  350. .tags a:hover {
  351. color:{color:accent 2};
  352. }
  353.  
  354. .tag {
  355. display:flex;
  356. align-items:center;
  357. justify-content:center;
  358. margin:0px 5px;
  359. }
  360.  
  361. .tag-label {
  362. text-transform:uppercase;
  363. letter-spacing:1.25px;
  364. font-weight:700;
  365. background-color:{color:border};
  366. padding:5px 10px;
  367. border-radius:0px 0px 10px 10px;
  368. margin:0px;
  369. }
  370.  
  371. .tags .feather {
  372. width:10px;
  373. height:10px;
  374. stroke:{color:accent 1};
  375. margin-right:2px;
  376. }
  377.  
  378. .postnote {
  379. background-color:{color:posts};
  380. text-transform:lowercase;
  381. text-align:left;
  382. margin: -40px 0px 50px 65px;
  383. width:320px;
  384. padding: 10px 0px;
  385. border-radius:15px;
  386. overflow:hidden;
  387. box-shadow:0px 0px 5px rgba(0,0,0,0.06);
  388. }
  389.  
  390. .postnote li {
  391. margin:5px 0px;
  392. }
  393. /* end post info styling */
  394.  
  395. /* different post types styling */
  396. .question {
  397. padding:20px 10px;
  398. width:calc(100% + 25px);
  399. margin:-25px 0px 0px -25px;
  400. text-align:center;
  401. background:{color:accent 1};
  402. color:{color:accent text};
  403. line-height:100%;
  404. }
  405.  
  406. .askerdiv {
  407. padding:5px 10px;
  408. width:calc(100% + 25px);
  409. margin:0px 0px 0px -25px;
  410. text-align:center;
  411. border-bottom:1px solid {color:border};
  412. color:{color:text};
  413. text-transform:uppercase;
  414. letter-spacing:0.25px;
  415. font-size:10px;
  416. }
  417.  
  418. .askerdiv a {
  419. color:{color:text};
  420. font-weight:700;
  421. }
  422.  
  423. .quotediv {
  424. padding:20px 10px;
  425. width:calc(100% + 25px);
  426. margin:-25px 0px 0px -25px;
  427. font-size:15px;
  428. text-align:center;
  429. background:{color:accent 1};
  430. color:{color:accent text};
  431. border-bottom:none;
  432. text-transform:lowercase;
  433. line-height:150%;
  434. }
  435.  
  436. .quoteinfo {
  437. color:{color:text};
  438. padding:5px 10px;
  439. width:calc(100% + 25px);
  440. margin:0px 0px -25px -25px;
  441. font-weight:600;
  442. border-bottom:1px solid {color:border};
  443. text-transform:uppercase;
  444. font-size:10px;
  445. letter-spacing:0.25px;
  446. text-align:center;
  447. margin-bottom:20px;
  448. }
  449.  
  450. .chats {
  451. font-size:13px;
  452. line-height:150%;
  453. }
  454.  
  455.  
  456. .audioplayer {
  457. text-align:left;
  458. padding:20px;
  459. background:{color:accent 1};
  460. font-size:13px;
  461. border-radius:50px;
  462. }
  463.  
  464. .audioinfo {
  465. color:{color:accent text};
  466. width:70%;
  467. text-align:right;
  468. margin-top:-30px;
  469. margin-left:25%;
  470. font-size:10px;
  471. letter-spacing:0.4px;
  472. line-height:100%;
  473. }
  474.  
  475. .audioinfo div {
  476. font-size:16px;
  477. font-weight:600;
  478. }
  479.  
  480. .readmore {
  481. width:100%;
  482. text-transform:uppercase;
  483. text-align:center;
  484. padding:10px 0px;
  485. }
  486.  
  487. .readmore a {
  488. font-size:10px;
  489. letter-spacing:1px;
  490. background-color:{color:accent 1};
  491. padding:5px 12.5px 4px 12.5px;
  492. color:{color:accent text};
  493. font-weight:800;
  494. border-radius:10px;
  495. }
  496.  
  497. .readmore:hover a {
  498. background-color:{color:accent 2};
  499. }
  500.  
  501.  
  502. .photoset-grid {
  503. grid-gap: 1px;
  504. width:calc(100% + 40px);
  505. margin:-20px 0px -20px -20px;
  506. }
  507.  
  508.  
  509. .photoset-grid img {
  510. vertical-align:top;
  511. }
  512.  
  513. .photoset-grid div {
  514.  
  515. vertical-align:top;
  516. }
  517.  
  518. [photoset-layout] div {
  519. cursor: pointer;
  520. }
  521.  
  522. [photoset-layout] div {
  523. vertical-align:top;
  524. }
  525.  
  526. .post img {
  527. max-width:100%;
  528. height:auto;
  529. width:auto;
  530. }
  531. /* end different post types styling */
  532.  
  533. /* side tab control styling */
  534. .tabcontainer {
  535. position:absolute;
  536. right:0px;
  537. width:510px;
  538. height:100%;
  539. top:0px;
  540. display:none;
  541. z-index:9;
  542. }
  543.  
  544. .close {
  545. position:absolute;
  546. border-radius:100%;
  547. width:30px;
  548. height:30px;
  549. font-size:14px;
  550. background-color:{color:posts};
  551. color:{color:accent 1};
  552. right:20px;
  553. line-height:25px;
  554. top:20px;
  555. text-align:center;
  556. z-index:999999999999;
  557. border-radius:100%;
  558. box-shadow:0px 5px 3px rgba(0,0,0,0.02);
  559. -moz-transition-duration:0.8s;
  560. -webkit-transition-duration:0.8s;
  561. -o-transition-duration:0.8s;
  562. }
  563.  
  564. .close .feather {
  565. width:16px;
  566. height:16px;
  567. margin-top:7px;
  568. stroke:{color:accent 1}
  569. }
  570.  
  571. .close:hover {
  572. cursor: pointer;
  573. background-color:{color:accent 2};
  574. -moz-transition-duration:0.8s;
  575. -webkit-transition-duration:0.8s;
  576. -o-transition-duration:0.8s;
  577. }
  578.  
  579. .close:hover .feather {
  580. stroke:{color:posts}
  581. }
  582. /* end control styling */
  583.  
  584. /* sidebar styling */
  585. .sidebar {
  586. position:fixed;
  587. margin-left:500px;
  588. margin-top:100px;
  589. padding:20px;
  590. width:220px;
  591. overflow:hidden;
  592. text-align:center;
  593. display:flex;
  594. align-items:center;
  595. justify-content:center;
  596. }
  597.  
  598. .col {
  599. display:flex;
  600. flex-direction:column;
  601. justify-content:flex-start;
  602. align-items:flex-start;
  603. margin-left:25px;
  604. }
  605.  
  606. .side-img {
  607. width:100px;
  608. height:50px;
  609. background:grey;
  610. }
  611.  
  612. .desc {
  613. text-transform:lowercase;
  614. text-align:left;
  615. line-height:200%;
  616. margin-top:10px;
  617. }
  618.  
  619. .sidebar .feather {
  620. width:15px;
  621. height:15px;
  622. stroke:{color:accent 2};
  623. -moz-transition-duration:0.8s;
  624. -webkit-transition-duration:0.8s;
  625. -o-transition-duration:0.8s;
  626. }
  627.  
  628. .sidebar a:hover {
  629. stroke:{color:accent 2};
  630. -moz-transition-duration:0.8s;
  631. -webkit-transition-duration:0.8s;
  632. -o-transition-duration:0.8s;
  633. }
  634.  
  635. .sidebar a:hover .feather {
  636. stroke:{color:accent 2};
  637. -moz-transition-duration:0.8s;
  638. -webkit-transition-duration:0.8s;
  639. -o-transition-duration:0.8s;
  640. }
  641.  
  642. .sidebar h2 {
  643. text-align:left;
  644. font-size:22px;
  645. margin:5px 0;
  646. }
  647.  
  648. .desc b {
  649. font-size:9px;
  650. text-transform:uppercase;
  651. letter-spacing:1px;
  652. color:{color:accent 1};
  653. }
  654.  
  655. .pagi {
  656. position:absolute;
  657. width:145px;
  658. bottom:115px;
  659. text-align:right;
  660. z-index:20;
  661. }
  662.  
  663. .pagi div {
  664. display:inline-block;
  665. font-size:9px;
  666. height:20px;
  667. line-height:20px;
  668. text-transform:uppercase;
  669. letter-spacing:1.5px;
  670. font-weight:800;
  671. color:{color:accent 2};
  672. text-align:center;
  673. margin:2.5px;
  674. -moz-transition-duration:0.8s;
  675. -webkit-transition-duration:0.8s;
  676. -o-transition-duration:0.8s;
  677. }
  678.  
  679. .pagi a div:hover {
  680. color:{color:accent 1};
  681. -moz-transition-duration:0.8s;
  682. -webkit-transition-duration:0.8s;
  683. -o-transition-duration:0.8s;
  684. }
  685.  
  686. .alert {
  687. position:absolute;
  688. width:250px;
  689. padding:15px;
  690. left:45px;
  691. top:60px;
  692. background:{color:accent 1};
  693. border-radius:30px 30px 0px 30px;
  694. display:flex;
  695. justify-content:space-around;
  696. align-items:center;
  697. color:{color:accent text};
  698. text-transform:uppercase;
  699. letter-spacing:1.5px;
  700. font-weight:600;
  701. line-height:160%;
  702. z-index:2;
  703. }
  704.  
  705. .alert .feather {
  706. stroke:{color:accent text};
  707. margin:0px 10px;
  708. }
  709.  
  710. .alert span {
  711. background:{color:posts};
  712. color:{color:accent 1};
  713. padding:1px 7.5px;
  714. border-radius:10px;
  715. margin-right:2.5px;
  716. }
  717.  
  718. .side-img {
  719. position:absolute;
  720. width:250px;
  721. height:275px;
  722. left:75px;
  723. top:90px;
  724. background:{color:accent 2};
  725. z-index:1;
  726. border-radius:25px;
  727. box-shadow:0px 5px 5px rgba(0,0,0,0.05);
  728. }
  729.  
  730. .links {
  731. position:absolute;
  732. z-index:5;
  733. width:225px;
  734. padding:10px 5px;
  735. text-align:center;
  736. left:50px;
  737. bottom:160px;
  738. display:flex;
  739. flex-direction:row;
  740. align-items:space-around;
  741. justify-content:space-around;
  742. background-color:{color:posts};
  743. border-radius:20px;
  744. box-shadow:0px 5px 5px rgba(0,0,0,0.05);
  745. z-index:10;
  746. }
  747.  
  748. .link {
  749. height:100%;
  750. color:{color:text};
  751. text-transform:uppercase;
  752. font-size:8px;
  753. letter-spacing:1px;
  754. font-weight:700;
  755. cursor:pointer;
  756. }
  757.  
  758. .link p {
  759. margin:0px;
  760. }
  761.  
  762. .link .feather {
  763. width: 16px;
  764. height: 16px;
  765. stroke: {color:accent 3};
  766. stroke-width: 2;
  767. stroke-linecap: round;
  768. stroke-linejoin: round;
  769. fill: none;
  770. -moz-transition-duration:0.8s;
  771. -webkit-transition-duration:0.8s;
  772. -o-transition-duration:0.8s;
  773. }
  774.  
  775. .link:hover .feather {
  776. stroke: {color:accent 2};
  777. -moz-transition-duration:0.8s;
  778. -webkit-transition-duration:0.8s;
  779. -o-transition-duration:0.8s;
  780. }
  781.  
  782. .subtitle {
  783. position:absolute;
  784. width:205px;
  785. transform:rotate(-90deg);
  786. text-transform:uppercase;
  787. font-size:8px;
  788. letter-spacing:2.5px;
  789. left:-50px;
  790. top:217.5px;
  791. line-height:200%;
  792. text-align:right;
  793. opacity:0.5;
  794. }
  795.  
  796. .title {
  797. font-size:{select:title size};
  798. position:absolute;
  799. font-family: "mont";
  800. width:275px;
  801. line-height:100%;
  802. color:{color:title};
  803. text-shadow:2px 2px 5px rgba(0,0,0,0.06);
  804. z-index:4;
  805. bottom:215px;
  806. left:100px;
  807. z-index:10;
  808. }
  809.  
  810. .desc {
  811. position:absolute;
  812. width:255px;
  813. height:85px;
  814. padding:15px;
  815. bottom:0px;
  816. left:0px;
  817. background:{color:accent 1};
  818. border-radius:0px 25px 0px 20px;
  819. color:{color:accent text};
  820. letter-spacing:1px;
  821. font-weight:700;
  822. line-height:180%;
  823. text-transform:uppercase;
  824. font-size:9px;
  825. letter-spacing:2px;
  826. }
  827. .round {
  828. position:absolute;
  829. width:25px;
  830. height:25px;
  831. bottom:0px;
  832. left:275px;
  833. background:{color:accent 1};
  834. z-index:1;
  835. }
  836.  
  837. .round-2 {
  838. position:absolute;
  839. width:25px;
  840. height:25px;
  841. bottom:0px;
  842. left:275px;
  843. background:{color:container};
  844. z-index:2;
  845. border-radius:0px 0px 0px 20px;
  846. }
  847.  
  848. .info {
  849. position:absolute;
  850. bottom:15px;
  851. left:75px;
  852. z-index:3;
  853. width:230px;
  854. background:{color:posts};
  855. padding:5px;
  856. z-index:10;
  857. border-radius:50px;
  858. box-shadow:0px 5px 5px rgba(0,0,0,0.05);
  859. display:flex;
  860. justify-content:flex-start;
  861. align-items:center;
  862. }
  863.  
  864. .info input {
  865. width:100%;
  866. font-size:9px;
  867. color:{color:accent 1};
  868. text-transform:uppercase;
  869. letter-spacing:2px;
  870. border:none;
  871. background:{color:posts};
  872. }
  873.  
  874. .info .feather {
  875. width:12px;
  876. height:12px;
  877. stroke:{color:accent 2};
  878. margin:0px 5px;
  879. }
  880.  
  881. .round-3 {
  882. position:absolute;
  883. width:30px;
  884. height:30px;
  885. top:124px;
  886. left:295px;
  887. background:{color:accent 1};
  888. z-index:3;
  889. }
  890.  
  891. .round-4 {
  892. position:absolute;
  893. width:30px;
  894. height:30px;
  895. top:124px;
  896. left:295px;
  897. background:{color:accent 2};
  898. z-index:4;
  899. border-radius:0px 30px 0px 0px;
  900. }
  901.  
  902. .png {
  903. position:absolute;
  904. width:{select:png width};
  905. z-index:8;
  906. bottom:35px;
  907. left:{select:png margin left};
  908. }
  909. /* end sidebar styling */
  910.  
  911. /* updates styling */
  912. .updates {
  913. position:fixed;
  914. top:20px;
  915. font-size:10px;
  916. left:20px;
  917. padding:10px;
  918. width:130px;
  919. line-height:150%;
  920. background:{color:posts};
  921. overflow:hidden;
  922. border-radius:15px;
  923. }
  924.  
  925. .updates h2 {
  926. font-size:12px;
  927. width:100%;
  928. margin:-10px 0px 10px -10px;
  929. padding:10px;
  930. text-transform:uppercase;
  931. letter-spacing:1px;
  932. font-weight:800;
  933. background:{color:accent 1};
  934. color:{color:accent text};
  935. }
  936.  
  937. .updates li {
  938. margin-left:-20px;
  939. }
  940. /* end updates styling */
  941.  
  942. /* nav tab styling */
  943. .disclaimer {
  944. position:absolute;
  945. width:375px;
  946. padding:10px 15px;
  947. bottom:80px;
  948. right:40px;
  949. height:75px;
  950. font-size:9px;
  951. line-height:200%;
  952. letter-spacing:1.5px;
  953. text-transform:uppercase;
  954. background:{color:posts};
  955. color:{color:accent 2};
  956. border-radius:20px;
  957. box-shadow:0px 5px 10px rgba(0,0,0,0.06);
  958. animation:fadeInUp 2s;
  959. z-index:2;
  960. overflow:scroll;
  961. }
  962.  
  963. .navLinks {
  964. padding-top:30px;
  965. position:absolute;
  966. right:90px;
  967. overflow:hidden;
  968. top:85px;
  969. width:275px;
  970. height:290px;
  971. background:{color:accent 2};
  972. border-radius:50px;
  973. overflow:hidden;
  974. z-index:1;
  975. animation:fadeIn 2s;
  976. }
  977.  
  978. .navLink {
  979. width:calc(100% - 50px);
  980. margin:10px 0px;
  981. display:flex;
  982. justify-content:flex-start;
  983. align-items:center;
  984. text-transform:uppercase;
  985. letter-spacing:1px;
  986. color:{color:accent text};
  987. animation:fadeInLeft 3s;
  988. }
  989.  
  990. .navIcon {
  991. padding:10px 15px 10px 20px;
  992. background:{color:accent 3};
  993. margin-right:10px;
  994. border-radius:0px 20px 20px 0px;
  995. -moz-transition-duration:0.8s;
  996. -webkit-transition-duration:0.8s;
  997. -o-transition-duration:0.8s;
  998. }
  999.  
  1000. .navLink:hover .navIcon {
  1001. background:{color:posts};
  1002. padding:10px 15px 10px 30px;
  1003. -moz-transition-duration:0.8s;
  1004. -webkit-transition-duration:0.8s;
  1005. -o-transition-duration:0.8s;
  1006. }
  1007.  
  1008. .navLink .feather {
  1009. width:15px;
  1010. height:15px;
  1011. }
  1012.  
  1013. .navLink:hover .navIcon .feather {
  1014. stroke:{color:accent 1}
  1015. }
  1016.  
  1017. .navTitle {
  1018. animation:fadeIn 3s;
  1019. }
  1020.  
  1021. .navTitle div {
  1022. font-size:45px;
  1023. position:absolute;
  1024. font-family: "mont";
  1025. line-height:100%;
  1026. text-shadow:2px 2px 5px rgba(0,0,0,0.06);
  1027. z-index:4;
  1028. top:190px;
  1029. right:265px;
  1030. z-index:10;
  1031. transform:rotate(-90deg);
  1032. color:{color:title};
  1033. }
  1034. /* end nav tab styling */
  1035.  
  1036. /* tumblr controls styling by cyantists */
  1037. iframe.tmblr-iframe {
  1038. z-index:99999999999999!important;
  1039. top:0!important;
  1040. right:0!important;
  1041. opacity:0.4;
  1042. /* delete invert(1) from here */
  1043. filter:invert(1) contrast(150%);
  1044. -webkit-filter:invert(1) contrast(150%);
  1045. -o-filter:invert(1) contrast(150%);
  1046. -moz-filter:invert(1) contrast(150%);
  1047. -ms-filter:invert(1) contrast(150%);
  1048. /* to here if your blog has a dark background */
  1049. transform:scale(0.65);
  1050. transform-origin:100% 0;
  1051. -webkit-transform:scale(0.65);
  1052. -webkit-transform-origin:100% 0;
  1053. -o-transform:scale(0.65);
  1054. -o-transform-origin:100% 0;
  1055. -moz-transform:scale(0.65);
  1056. -moz-transform-origin:100% 0;
  1057. -ms-transform:scale(0.65);
  1058. -ms-transform-origin:100% 0;}
  1059.  
  1060. iframe.tmblr-iframe:hover {
  1061. opacity:0.6!important;}
  1062. /* end control styling */
  1063.  
  1064. /* cried styling -- DO NOT TOUCH pls */
  1065. .cred {
  1066. position:fixed;
  1067. z-index:10;
  1068. bottom:-1px;
  1069. right:-1px;
  1070. padding:10px 5px 5px 10px;
  1071. height:20px;
  1072. width:20px;
  1073. border-radius:25px 0px 0px 0px;
  1074. display:flex;
  1075. align-items:center;
  1076. justify-content:center;
  1077. background-color:{color:accent 3};
  1078. box-shadow:0px 0px 10px rgba(0,0,0,0.03);
  1079. }
  1080.  
  1081. .cred .feather {
  1082. height:12px;
  1083. width:12px;
  1084. stroke:{color:accent text};
  1085. }
  1086.  
  1087. .cred-prompt {
  1088. position:fixed;
  1089. bottom:0px;
  1090. right:40px;
  1091. width:80px;
  1092. padding:7.5px 15px;
  1093. height:20px;
  1094. background-color:{color:posts};
  1095. letter-spacing:1.5px;
  1096. display:none;
  1097. line-height:21px;
  1098. text-transform:uppercase;
  1099. font-size:8px;
  1100. border-radius:25px 25px 0px 0px;
  1101. text-align:center;
  1102. box-shadow:0px 0px 10px rgba(0,0,0,0.03);
  1103. animation:fadeInUp 1s;
  1104. }
  1105. /*end credit styling*/
  1106.  
  1107. </style>
  1108. </head>
  1109. <body>
  1110.  
  1111. <div class="container">
  1112.  
  1113. <!-- sidebar start -->
  1114.  
  1115. <!-- pagination start -->
  1116. {block:Pagination}
  1117. <div class="pagi">
  1118. {block:PreviousPage}
  1119. <a href="{PreviousPage}">
  1120. <div>
  1121. previous
  1122. </div>
  1123. </a>
  1124. <div>/</div>
  1125. {/block:PreviousPage}
  1126. {block:NextPage}
  1127. <a href="{NextPage}">
  1128. <div>
  1129. forward
  1130. </div>
  1131. </a>
  1132. {/block:NextPage}
  1133. </div>
  1134. {/block:Pagination}
  1135. <!-- pagination end -->
  1136.  
  1137. <div class="alert">
  1138. <div data-feather="user-plus"></div>
  1139. <div style="width:175px">friend request from <span>{Name}</span>
  1140. </div>
  1141. </div>
  1142.  
  1143. <div class="round-3"></div>
  1144. <div class="round-4"></div>
  1145.  
  1146. <img src="{image:sidebar}" class="png">
  1147.  
  1148. <div class="subtitle">{text:subtitle}</div>
  1149.  
  1150. <div class="title">{text:title}</div>
  1151.  
  1152. <div class="desc">
  1153. {text:description}
  1154. <form action="/search" method="get" class="info" name="theform">
  1155. <span data-feather="search"></span>
  1156. <input type="text" name="q" value="SEARCH FOR..."/>
  1157. </form>
  1158. </div>
  1159.  
  1160. <div class="round-2"></div>
  1161. <div class="round"></div>
  1162.  
  1163. <div class="side-img"></div>
  1164.  
  1165. <!-- side links -->
  1166. <div class="links">
  1167. <a href="/">
  1168. <div class="link">
  1169. <span data-feather="home"></span>
  1170. <p>home</p>
  1171. </div>
  1172. </a>
  1173. <a href="/ask">
  1174. <div class="link">
  1175. <span data-feather="message-circle"></span>
  1176. <p>inbox</p>
  1177. </div>
  1178. </a>
  1179. <a onclick="openTab('navTab')">
  1180. <div class="link">
  1181. <span data-feather="compass"></span>
  1182. <p>links</p>
  1183. </div>
  1184. </a>
  1185. <a href="{text:free link}">
  1186. <div class="link">
  1187. <span data-feather="plus"></span>
  1188. <p>extra</p>
  1189. </div>
  1190. </a>
  1191. </div>
  1192. <!-- sidebar end -->
  1193.  
  1194. <!-- nav tab start -->
  1195. <div id="navTab" class="tabcontainer">
  1196. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  1197.  
  1198. <div class="navTitle"><div>{text:nav title}</div></div>
  1199.  
  1200. <div class="disclaimer">{text:nav description}</div>
  1201.  
  1202. <div class="navLinks">
  1203. <a href="{text:nav link 1}">
  1204. <div class="navLink">
  1205. <div class="navIcon">
  1206. <span data-feather="tag"></span>
  1207. </div>
  1208. <div>{text:nav link 1 title}</div>
  1209. </div>
  1210. </a>
  1211. <a href="{text:nav link 2}">
  1212. <div class="navLink">
  1213. <div class="navIcon">
  1214. <span data-feather="heart"></span>
  1215. </div>
  1216. <div>{text:nav link 2 title}</div>
  1217. </div>
  1218. </a>
  1219. <a href="{text:nav link 3}">
  1220. <div class="navLink">
  1221. <div class="navIcon">
  1222. <span data-feather="map-pin"></span>
  1223. </div>
  1224. <div>{text:nav link 3 title}</div>
  1225. </div>
  1226. </a>
  1227. <a href="{text:nav link 4}">
  1228. <div class="navLink">
  1229. <div class="navIcon">
  1230. <span data-feather="coffee"></span>
  1231. </div>
  1232. <div>{text:nav link 4 title}</div>
  1233. </div>
  1234. </a>
  1235. <a href="{text:nav link 5}">
  1236. <div class="navLink">
  1237. <div class="navIcon">
  1238. <span data-feather="bookmark"></span>
  1239. </div>
  1240. <div>{text:nav link 5 title}</div>
  1241. </div>
  1242. </a>
  1243. </div>
  1244. </div>
  1245.  
  1246. <!-- nav tab end -->
  1247.  
  1248. <div id="entries">
  1249.  
  1250. <!-- posts start -->
  1251. {block:Posts}
  1252.  
  1253. <!-- post info start -->
  1254. {block:Date}
  1255. <div class="postinfo-top">
  1256. <div class="post-inner">
  1257.  
  1258. {block:Photoset}<i data-feather="image"></i>{/block:Photoset}
  1259. {block:Text}<i data-feather="edit"></i>{/block:Text}
  1260. {block:Quote}<i data-feather="edit-2"></i>{/block:Quote}
  1261. {block:Chat}<i data-feather="edit-2"></i>{/block:Chat}
  1262. {block:Video}<i data-feather="film"></i>{/block:Video}
  1263. {block:Photo}<i data-feather="image"></i>{/block:Photo}
  1264. {block:Link}<i data-feather="link-2"></i>{/block:Link}
  1265. {block:AudioPlayer}<i data-feather="volume-2"></i>{/block:AudioPlayer}
  1266. {block:Answer}<i data-feather="users"></i>{/block:Answer}
  1267.  
  1268.  
  1269. {block:RebloggedFrom}
  1270. <a href="{ReblogRoot}">from {ReblogRootName}</a>
  1271. {/block:RebloggedFrom}
  1272.  
  1273. {block:NotReblog}
  1274. <a href="{URL}">posted by {Name}</a>
  1275. {/block:NotReblog}
  1276. </div>
  1277. </div>
  1278. {/block:Date}
  1279. <!-- post info end -->
  1280.  
  1281. <div class="post" id="{PostID}">
  1282.  
  1283. {block:Text}
  1284. {block:Title}<h1>{Title}</h1>{/block:Title}
  1285. {Body}
  1286. {/block:Text}
  1287.  
  1288. {block:Quote}
  1289. <div class="quotediv">"{Quote}"</div>
  1290. {block:Source}
  1291. <div class="quoteinfo">{Source}</div>
  1292. {/block:Source}
  1293. {/block:Quote}
  1294.  
  1295. {block:Chat}
  1296. {block:Title}<h1>{Title}</h1>{/block:Title}
  1297. {block:Lines}
  1298. <div class="chats">
  1299. {block:Label}<b>{Label}</b>{/block:Label}
  1300. {Line}<br>
  1301. </div>
  1302. {/block:Lines}
  1303. {/block:Chat}
  1304.  
  1305. {block:Video}
  1306. <div class="video">{Video-500}</div>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1307. {/block:Video}
  1308.  
  1309. {block:Photo}
  1310. <img src="{PhotoURL-500}" style="margin:-20px 0px -25px -20px; max-width:calc(100% + 40px); ">
  1311. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1312. {/block:Photo}
  1313.  
  1314. {block:Photoset}
  1315. <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>
  1316. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1317. {/block:Photoset}
  1318.  
  1319. {block:Link}
  1320. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1321. {block:Description}{Description}{/block:Description}
  1322. {/block:Link}
  1323.  
  1324. {block:AudioPlayer}
  1325. <div class="audioplayer">{AudioPlayer}
  1326. <div class="audioinfo">
  1327. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  1328. {block:Artist}<br/>{Artist}{/block:Artist}
  1329. </div>
  1330. </div>
  1331. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1332. {/block:AudioPlayer}
  1333.  
  1334. {block:Answer}
  1335. <div class="question">{Question}</div>
  1336. <div class="askerdiv">asked by <b>{Asker}</b>
  1337. </div>
  1338. <div style="margin-top:25px">{Answer}</div>
  1339. {/block:Answer}
  1340.  
  1341. {block:More}
  1342. <div class="readmore">
  1343. <a href="{Permalink}" class="more-btn">read more</a>
  1344. </div>
  1345. {/block:More}
  1346.  
  1347. <!-- to hide source and via on posts-->
  1348. {block:ContentSource}
  1349. <div style="display: none;">{SourceURL}</div>
  1350. {/block:ContentSource}
  1351.  
  1352. {block:NoRebloggedFrom}
  1353. <div style="display: none;">
  1354. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1355. </div>
  1356. {/block:NoRebloggedFrom}
  1357.  
  1358. </div>
  1359.  
  1360. <!-- post info bottom start -->
  1361. {block:Date}
  1362. <div class="postinfo">
  1363. {block:ContentSource}
  1364. <div class="post-inner">
  1365.  
  1366. <a href="{SourceURL}" class="source-link">
  1367. <div>source</div>
  1368. </a>
  1369. </div>
  1370. <span class="dotz">•</span>{/block:ContentSource}
  1371. <a href="{Permalink}">
  1372. <div class="post-inner">
  1373. <span>
  1374. <i data-feather="calendar"></i>
  1375. <div>{TimeAgo}</div>
  1376. </span>
  1377. </div>
  1378. </a>
  1379. {block:NoteCount}<span class="dotz">•</span>{/block:NoteCount}
  1380. <a href="{Permalink}">
  1381. <div class="post-inner">
  1382. {block:NoteCount}
  1383. <span>
  1384. <i data-feather="paperclip"></i>
  1385. <div>{NoteCountWithLabel}</div>
  1386. </span>
  1387. {/block:NoteCount}
  1388. </div></a>
  1389. <span class="dotz">•</span>
  1390. <div class="post-inner">
  1391. <a href="{ReblogURL}" id="reblogz">
  1392. <div>reblog</div>
  1393. <i data-feather="arrow-right" class="reblog-icon"></i>
  1394. </a>
  1395. </div>
  1396. </div>
  1397. {/block:Date}
  1398. <!-- post info bottom end -->
  1399.  
  1400. <!-- tags start -->
  1401. {block:HasTags}
  1402. <div class="tags">
  1403. {block:Tags}
  1404. <div class="tag">
  1405. <span data-feather="hash"></span><a href="{TagURL}">{Tag}</a>
  1406. </div>
  1407. {/block:Tags}
  1408. </div>
  1409. {/block:HasTags}
  1410. <!-- tags end -->
  1411.  
  1412. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  1413.  
  1414. {/block:Posts}
  1415. </div>
  1416. </div>
  1417. <!-- posts end -->
  1418.  
  1419. <!-- optional updates tab -->
  1420. {block:IfUpdatesBox}
  1421. <div class="updates">
  1422. <h2>updates.</h2>
  1423. <div>{text:updates}</div>
  1424. </div>
  1425. {/block:IfUpdatesBox}
  1426.  
  1427. <!-- my credit please do not touch thanks! -->
  1428. <a href="https://jinsoouls.tumblr.com/" >
  1429. <div class="cred" id="cred">
  1430. <span data-feather="moon"></span>
  1431. </div>
  1432. </a>
  1433. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1434. <!-- end of credit -->
  1435.  
  1436. <script>
  1437.  
  1438. feather.replace();
  1439.  
  1440. $("#cred").hover(
  1441. function() {
  1442. $("#cred-info").fadeIn();
  1443. }, function() {
  1444. $("#cred-info").fadeOut();
  1445. }
  1446. );
  1447.  
  1448. /* photoset script by annathms and espoirthemes */
  1449. function gatherData(images, arr) {
  1450. for (let i = 0; i < images.length; i++) {
  1451. let currentData = {
  1452. "width": images[i].getAttribute('data-width'),
  1453. "height": images[i].getAttribute('data-height'),
  1454. "low_res": images[i].getAttribute('data-lowres'),
  1455. "high_res": images[i].getAttribute('data-highres')
  1456. };
  1457. arr.push(currentData);
  1458. }
  1459. }
  1460. function getIndex(elem) {
  1461. let i = 0;
  1462. while( (elem = elem.previousElementSibling) != null ) i++;
  1463. return i;
  1464. }
  1465. function lightbox(elem) {
  1466. let currentPhotoset = elem.parentNode;
  1467. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1468. let data = [];
  1469. gatherData(photosetPhotos, data);
  1470. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1471. }
  1472.  
  1473. /* tooltip script */
  1474. $(document).ready(function(){
  1475. $("a[title]").style_my_tooltips({
  1476. tip_follows_cursor:true,
  1477. tip_delay_time:90,
  1478. tip_fade_speed:600,
  1479. attribute:"title"
  1480. });
  1481. });
  1482.  
  1483. /* audio player color script by shudesigns */
  1484. $('iframe.tumblr_audio_player').load( function() {
  1485. $('iframe.tumblr_audio_player').contents().find("head")
  1486. .append($("<style type='text/css'> .audio-player{background:{color:accent 1} !important} </style>"));
  1487. });
  1488.  
  1489. /* tab script by me*/
  1490. function openTab(tabName) {
  1491. $("#entries").fadeOut();
  1492. $('.tabcontainer').each(function(index) {
  1493. if (tabName == $(this).attr('id')) {
  1494. $(this).fadeIn();
  1495. } else {
  1496. $(this).fadeOut();
  1497. }
  1498. });
  1499. }
  1500.  
  1501. function closeTab(el) {
  1502. $(el).parent().fadeOut();
  1503. $('#entries').fadeIn();
  1504. }
  1505.  
  1506. </script>
  1507.  
  1508. </html>
  1509.  
  1510. </script>
  1511. </html>
Add Comment
Please, Sign In to add comment