codesbyjack

THEME #25.5 shep w full image / made by jinsoouls

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