codesbyjack

THEME #24 beau / made by jinsoouls

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