spirkism

Theme #26: Final Frontier

Feb 4th, 2016
825
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.85 KB | None | 0 0
  1. <!--
  2. THEME: THE FINAL FRONTIER
  3. by Zeke (spirkism/spirkthemes)
  4.  
  5. Rules:
  6. - please do not steal/redistribute, I spent quite a bit of time coding this
  7. - also don't (re)move the credit please, that would make me very sad :(
  8. - don't use as a base code, there are plenty of those out there
  9. - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
  10. - tell me if there are any bugs or if you have any questions, need help with the theme or want a detail differently - I'll see what I can do for you ;)
  11. And now: enjoy! :)
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <head>
  16.  
  17. <title>{Title}</title>
  18.  
  19. <!-- /* LINKS */ -->
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  23. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/h5czl1a/aTqnk4mjj/tooltipstuff.css"/>
  24. <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light|Pacifico|Covered+By+Your+Grace|Amatic+SC:400,700|Rock+Salt|Lobster|Righteous|Lobster+Two:400,700italic|Playball|Special+Elite|Audiowide|Limelight' rel='stylesheet' type='text/css'>
  25.  
  26. <!-- /* SCRIPTS */ -->
  27.  
  28. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
  29. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  30. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  31. <script src="http://static.tumblr.com/h5czl1a/ACynk4kjd/tipped.js"></script>
  32.  
  33. <!--
  34. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  35. -->
  36.  
  37.  
  38. <script type='text/javascript'>
  39. $(document).ready(function() {
  40. Tipped.create('#credit','theme credit');
  41. });
  42. </script>
  43.  
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:200,
  50. tip_fade_speed:300
  51. }
  52. );
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57.  
  58. <!-- /* META TAGS */ -->
  59. <meta name="color:background" content="#232961" />
  60. <meta name="color:text" content="#f2f2f2" />
  61. <meta name="color:post background" content="#141414" />
  62. <meta name="color:link color" content="#2889f7" />
  63. <meta name="color:link hover color" content="#0436c9" />
  64. <meta name="color:title" content="##ffffff" />
  65. <meta name="color:sidebar 1" content="#0436c9" />
  66. <meta name="color:sidebar 2" content="#0436c9" />
  67. <meta name="color:sidebar 3" content="#0436c9" />
  68. <meta name="color:sidebar 4" content="#0436c9" />
  69. <meta name="color:accent 1" content="#96E3E6" />
  70. <meta name="color:accent 2" content="#A3E696" />
  71. <meta name="color:accent 3" content="#E6DE96" />
  72. <meta name="color:sidebar links text" content="#000000" />
  73. <meta name="color:sidebar links background hover" content="#000000" />
  74. <meta name="color:sidebar links text hover" content="#ffffff" />
  75.  
  76.  
  77. <meta name="text:opacity" content="0.8" />
  78. <meta name="text:link 1 url" content="/" />
  79. <meta name="text:link 1 text" content="link" />
  80. <meta name="text:link 2 url" content="/" />
  81. <meta name="text:link 2 text" content="link" />
  82. <meta name="text:link 3 url" content="/" />
  83. <meta name="text:link 3 text" content="link" />
  84. <meta name="text:link 4 url" content="/" />
  85. <meta name="text:link 4 text" content="link" />
  86. <meta name="text:link 5 url" content="/" />
  87. <meta name="text:link 5 text" content="link" />
  88. <meta name="text:link 6 url" content="/" />
  89. <meta name="text:link 6 text" content="link" />
  90. <meta name="text:link 7 url" content="/" />
  91. <meta name="text:link 7 text" content="" />
  92. <meta name="text:link 8 url" content="/" />
  93. <meta name="text:link 8 text" content="" />
  94. <meta name="text:link 9 url" content="/" />
  95. <meta name="text:link 9 text" content="" />
  96. <meta name="text:link 10 url" content="/" />
  97. <meta name="text:link 10 text" content="" />
  98.  
  99. <meta name="image:background" content="" />
  100. <meta name="image:sidebar 1" content="" />
  101. <meta name="image:sidebar 2" content="" />
  102. <meta name="image:sidebar 3" content="" />
  103. <meta name="image:sidebar 4" content="" />
  104. <meta name="image:fallback albumart" content="http://i.imgur.com/k3XhJXS.png" />
  105. <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
  106. <meta name="font:Specialfont" content="Arial, Helvetica, sans-serif"/>
  107.  
  108. <meta name="if:Searchbar" content="1" />
  109. <meta name="if:500px posts" content="1" />
  110. <!--
  111. <meta name="if:Infinite scroll" content="0" />
  112. -->
  113.  
  114. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  115. <meta name="select:Index tags" content="no-tags" title="no tags" />
  116. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  117.  
  118. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  119. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  120. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  121.  
  122.  
  123.  
  124. <style type="text/css">
  125.  
  126. /* GENERAL */
  127.  
  128. ::-webkit-scrollbar-thumb {
  129. background-color: {color:text};
  130. height:auto;
  131. width: 7px;
  132. z-index: 9999999999999999999999999999999999999;
  133. }
  134.  
  135. ::-webkit-scrollbar {
  136. height:auto;
  137. width:7px;
  138. background-color:{color:post background};
  139. z-index: 999999999999999999999999999999999999;
  140. }
  141.  
  142.  
  143. div#qTip {
  144. font-size: 11px;
  145. font-family: 'Calibri', sans-serif;
  146. line-height: 11px;
  147. display: none;
  148. text-align: center;
  149. position: absolute;
  150. z-index: 999999999999999999999999999999999999999999999999999999;
  151. background-color: RGBA({RGBcolor:post background},{text:opacity});;
  152. padding: 3px 7px;
  153. color: {color:text};
  154. max-width: 200px;
  155. height: auto;
  156. border: 1px solid {color:link color};
  157. -webkit-transition: all 0.1s ease-out;
  158. -moz-transition: all 0.1s ease-out;
  159. -o-transition: all 0.1s ease-out;
  160. }
  161.  
  162. body {
  163. word-wrap:break-word;
  164. margin: 0;
  165. background-image: url('{image:background}');
  166. background-attachment: fixed;
  167. background-size: 100% auto;
  168. background-color: {color:background};
  169. font: 12px {font:Body};
  170. color: {color:text};
  171. }
  172.  
  173. img {
  174. max-width: 100%;
  175. }
  176.  
  177. a {
  178. text-decoration: none;
  179. color: {color:link color};
  180. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  181. -o-transition: 0.5s ease;
  182. -moz-transition: 0.5s ease;
  183. }
  184.  
  185. a:hover {
  186. text-decoration: none;
  187. color: {color:link hover color};
  188. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  189. -o-transition: 0.5s ease;
  190. -moz-transition: 0.5s ease;
  191. }
  192.  
  193. blockquote {
  194. border-left: solid 2px #818181;
  195. padding-left: 10px;
  196. max-width: 100%;
  197. }
  198.  
  199.  
  200.  
  201. /* SIDEBAR */
  202.  
  203. #sidebar {
  204. position: fixed;
  205. left: 0;
  206. top: 0;
  207. height: 100%;
  208. width: 370px;
  209. z-index: 999;
  210. }
  211.  
  212.  
  213. #stripe01 {
  214. position: absolute;
  215. left: 0px;
  216. top: 0;
  217. width: 170px;
  218. height: 100%;
  219. background-image: url('{image:sidebar 1}');
  220. background-attachment: fixed;
  221. background-size: auto 100%;
  222. background-color: {color:sidebar 1};
  223. }
  224.  
  225. #stripe02 {
  226. position: absolute;
  227. top: 0;
  228. left: 170px;
  229. width: 80px;
  230. height:100%;
  231. background-image: url('{image:sidebar 2}');
  232. background-attachment: fixed;
  233. background-size: auto 100%;
  234. background-color: {color:sidebar 2};
  235. }
  236.  
  237. #stripe03 {
  238. position: absolute;
  239. top: 0;
  240. left:250px;
  241. width: 120px;
  242. height: 100%;
  243. background-image: url('{image:sidebar 3}');
  244. background-attachment: fixed;
  245. background-size: auto 100%;
  246. background-color: {color:sidebar 3};
  247. z-index: 999;
  248. }
  249.  
  250. #stripe04 {
  251. position: fixed;
  252. top: 0;
  253. left: 370px;
  254. width: 120px;
  255. height:100%;
  256. background-image: url('{image:sidebar 4}');
  257. background-attachment: fixed;
  258. background-size: auto 100%;
  259. background-color: {color:sidebar 4};
  260. z-index: -2;
  261. }
  262.  
  263. #title {
  264. font: 2.5em {font:Specialfont};
  265. color: {color:title};
  266. width: 330px;
  267. padding: 20px;
  268. text-align:center;
  269. position: absolute;
  270. z-index: 9999;
  271. }
  272.  
  273.  
  274.  
  275. #desc {
  276. position: absolute;
  277. bottom: 10px;
  278. width: 80px;
  279. padding: 10px;
  280. background-color: RGBA({RGBcolor:post background},{text:opacity});
  281. left: 10px;
  282. font-size: 0.85em;
  283. }
  284.  
  285. #sblinks {
  286. position: absolute;
  287. left: -55px;
  288. top: 150px;
  289. }
  290.  
  291. a.sblink {
  292. position: relative;
  293. padding: 3px;
  294. color: {color:sidebar links text};
  295. margin-bottom: 2px;
  296. width: 100px;
  297. display: block;
  298. text-align: center;
  299. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  300. -o-transition: 0.5s ease;
  301. -moz-transition: 0.5s ease;
  302. }
  303.  
  304. a.sblink:hover {
  305. box-shadow:inset 106px 0 0 0 {color:sidebar links background hover};
  306. color: {color:sidebar links text hover};
  307. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  308. -o-transition: 0.5s ease;
  309. -moz-transition: 0.5s ease;
  310. }
  311.  
  312. a.sblink:nth-child(3n+0) {
  313. background-color: {color:accent 1};
  314. margin-left: 20px;
  315. }
  316.  
  317. a.sblink:nth-child(3n+1) {
  318. background-color: {color:accent 2};
  319. margin-left: -20px;
  320. }
  321.  
  322. a.sblink:nth-child(3n+2) {
  323. background-color: {color:accent 3};
  324. }
  325.  
  326.  
  327.  
  328. #searchbar {
  329. position: absolute;
  330. bottom: 0px;
  331. }
  332.  
  333. #searchform input {
  334.  
  335. }
  336.  
  337. #searchinput {
  338. position: absolute;
  339. width: 114px;
  340. height: 15px;
  341. bottom: 0px;
  342. border: 0px;
  343. padding: 3px;
  344. color: gray;
  345. font-size: 0.8em;
  346. text-transform: uppercase;
  347. letter-spacing: 1px;
  348. }
  349.  
  350. #searchbutton {
  351. position: absolute;
  352. text-transform: uppercase;
  353. font-size: 0.8em;
  354. background-color: {color:text};
  355. color: {color:post background};
  356. padding: 5px;
  357. border: none;
  358. bottom: 0px;
  359. left:120px;
  360. }
  361.  
  362.  
  363. #next {
  364. position: absolute;
  365. bottom: 2px;
  366. right: 5px;
  367. }
  368.  
  369. #next:before {
  370. content: "\f061";
  371. font-family: FontAwesome;
  372. font-size: 1.2em;
  373. }
  374.  
  375. #prev {
  376. position: absolute;
  377. bottom: 2px;
  378. left: 5px;
  379. }
  380.  
  381. #prev:before {
  382. content: "\f060";
  383. font-family: FontAwesome;
  384. font-size: 1.2em;
  385. }
  386.  
  387. /* POSTS & CONTENT */
  388.  
  389.  
  390. #content {
  391. position: absolute;
  392. left: 490px;
  393. z-index: 99;
  394. }
  395.  
  396. #posts {
  397. top: 20px;
  398. position: relative;
  399. {block:If500pxPosts}
  400. width: 542px;
  401. {/block:If500pxPosts}
  402. {block:IfNot500pxPosts}
  403. width: 442px;
  404. {/block:IfNot500pxPosts}
  405. z-index: 99;
  406. }
  407.  
  408. #post {
  409. padding: 20px;
  410. position: relative;
  411. {block:If500pxPosts}
  412. width: 500px;
  413. {/block:If500pxPosts}
  414. {block:IfNot500pxPosts}
  415. width: 400px;
  416. {/block:IfNot500pxPosts}
  417. background-color: RGBA({RGBcolor:post background},{text:opacity});
  418. margin-bottom: 120px;
  419. z-index: 99;
  420. }
  421.  
  422.  
  423.  
  424.  
  425. .caption {
  426. {block:If500pxPosts}
  427.  
  428. {/block:If500pxPosts}
  429. {block:IfNot500pxPosts}
  430.  
  431. {/block:IfNot500pxPosts}
  432. background-color: RGBA({RGBcolor:text},0.2);
  433. padding: 10px 20px;
  434. }
  435.  
  436. .textpost {
  437.  
  438. }
  439.  
  440. .textpost-title {
  441. {block:If500pxPosts}
  442.  
  443. {/block:If500pxPosts}
  444. {block:IfNot500pxPosts}
  445.  
  446. {/block:IfNot500pxPosts}
  447. padding: 15px;
  448. background-color: RGBA({RGBcolor:text},0.2);
  449. font: 1.2em {font:Specialfont};
  450. }
  451.  
  452. .textpost-text img {
  453. max-width: 100%;
  454. max-height: 100%;
  455. }
  456.  
  457. .photopost {
  458.  
  459. }
  460.  
  461. .panorama-post {
  462.  
  463. }
  464.  
  465. .photosetpost {
  466.  
  467. }
  468.  
  469. .quotepost {
  470.  
  471. }
  472.  
  473. .quotepost-quote {
  474. font: 1.5em {font:Specialfont};
  475. text-align:center;
  476. padding: 10px;
  477. background-color: RGBA({RGBcolor:text},0.4);
  478. }
  479.  
  480.  
  481. .quotepost-source {
  482. position: absolute;
  483. bottom: -10px;
  484. border: 10px solid RGBA({RGBcolor:post background},{text:opacity});
  485. padding: 2px 5px;
  486. right: -10px;
  487. background-color: RGBA({RGBcolor:text},0.3);
  488. }
  489.  
  490. .linkpost {
  491.  
  492. }
  493.  
  494. .linkpost-title {
  495. padding: 20px 50px;
  496. font: 1.2em {font:Specialfont};
  497. text-align: center;
  498. {block:If500pxPosts}
  499.  
  500. {/block:If500pxPosts}
  501. {block:IfNot500pxPosts}
  502.  
  503. {/block:IfNot500pxPosts}
  504. background-color: RGBA({RGBcolor:text},0.1);
  505. border:10px solid RGBA({RGBcolor:text},0.7);
  506. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  507. -o-transition: 0.5s ease;
  508. -moz-transition: 0.5s ease;
  509. }
  510.  
  511. .linkpost-title:hover{
  512. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  513. background-color: RGBA({RGBcolor:text},0.5);
  514. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  515. -o-transition: 0.5s ease;
  516. -moz-transition: 0.5s ease;
  517. }
  518.  
  519. #linkpost-titly img {
  520. width: 60px;
  521. position: absolute;
  522. z-index: 9;
  523. right: -10px;
  524. top: -10px;
  525. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  526. }
  527.  
  528. .linkpost .caption {
  529.  
  530. }
  531.  
  532. .linkpost-img {
  533.  
  534. }
  535.  
  536. .chatpost {
  537.  
  538. }
  539.  
  540. .chatpost-title {
  541. {block:If500pxPosts}
  542.  
  543. {/block:If500pxPosts}
  544. {block:IfNot500pxPosts}
  545.  
  546. {/block:IfNot500pxPosts}
  547. padding: 15px;
  548. background-color: RGBA({RGBcolor:text},0.2);
  549. font: 1.2em {font:Specialfont};
  550. }
  551.  
  552. .chatpost ul {
  553. list-style-type: none;
  554. line-height: 20px;
  555. padding-left: 0px;
  556. }
  557.  
  558. .chatpost ul .odd {
  559. border-bottom: 1px solid {color:text};
  560. margin-bottom: 5px;
  561. }
  562.  
  563. .chatpost ul .even {
  564. border-bottom: 1px solid {color:text};
  565. margin-bottom: 5px;
  566. }
  567.  
  568. .audiopost {
  569. min-height: 100px;
  570. }
  571.  
  572. .audiopost-player {
  573. width: 27px;
  574. height: 30px;
  575. position: absolute;
  576. z-index: 999;
  577. overflow: hidden;
  578. top: 57px;
  579. left: 57px;
  580. opacity: 0.7;
  581. }
  582.  
  583.  
  584. .audiopost-img {
  585. width: 80px;
  586. position: absolute;
  587. top: 20px;
  588. left: 20px;
  589. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  590. height: 80px;
  591. z-index: 99;
  592. }
  593.  
  594. #audiopost-fallbackimg {
  595. position: absolute;
  596. top: 20px;
  597. left: 20px;
  598. width: 80px;
  599. height: 80px;
  600. z-index: 9;
  601. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  602. }
  603.  
  604.  
  605.  
  606. .audiopost ul {
  607. list-style: none;
  608. position: absolute;
  609. left: 90px;
  610. background-color: RGBA({RGBcolor:text},0.4);
  611. padding: 20px;
  612. height: 60px;
  613. top: 8px;
  614. left: 120px;
  615. {block:If500pxPosts}
  616. width: 360px;
  617. {/block:If500pxPosts}
  618. {block:IfNot500pxPosts}
  619. width: 260px;
  620. {/block:IfNot500pxPosts}
  621. }
  622.  
  623. .audiopost .caption {
  624. margin-top: 100px;
  625. }
  626.  
  627.  
  628. .videopost {
  629.  
  630. }
  631.  
  632. .videopost-video {
  633.  
  634. }
  635.  
  636. .answerpost {
  637.  
  638. }
  639.  
  640. .answerpost .caption {
  641. padding: 0px;
  642. background-color: transparent;
  643. }
  644.  
  645. .answerpost .caption img {
  646. width: 100%;
  647. height: 100%;
  648. }
  649.  
  650. .answerpost-1 {
  651.  
  652. }
  653.  
  654. .answerpost-asker {
  655. font: 1.2em {font:Specialfont};
  656. top: 10px;
  657. margin-bottom: 7px;
  658. }
  659.  
  660.  
  661. .answerpost-askerimg {
  662. width: 60px;
  663. position: absolute;
  664. z-index: 9;
  665. right: -10px;
  666. top: -10px;
  667. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  668. }
  669.  
  670. .answerpost-arrow {
  671. width: 0;
  672. height: 0;
  673. border-top: 15px solid transparent;
  674. border-bottom: 15px solid transparent;
  675. border-right: 20px solid RGBA({RGBcolor:accent},0.4);
  676. }
  677.  
  678. .answerpost-question {
  679. position: relative;
  680. margin-top: -10px;
  681. background-color: RGBA({RGBcolor:text}, 0.4);
  682. padding: 20px;
  683. top: 10px;
  684. clear: right;
  685. margin-bottom: 20px;
  686. {block:If500pxPosts}
  687. width: 460px;
  688. {/block:If500pxPosts}
  689. {block:IfNot500pxPosts}
  690. width: 360px;
  691. {/block:IfNot500pxPosts}
  692.  
  693. }
  694.  
  695. .answerpost-2 {
  696.  
  697. }
  698.  
  699. .answerpost-answererimg {
  700.  
  701. }
  702.  
  703. .answerpost-answerer {
  704. font: 1.2em {font:Specialfont};
  705. top: 10px;
  706. }
  707.  
  708. .answerpost-answer {
  709. background-color: RGBA({RGBcolor:text}, 0.2);
  710. padding: 20px;
  711. }
  712.  
  713. .answerpost-answer img {
  714. height: 100%;
  715. width: 100%;
  716. }
  717.  
  718. #permbox {
  719. position: absolute;
  720. top: 0px;
  721. margin-left: -130px;
  722. }
  723.  
  724. #perm {
  725. background-color: RGBA({RGBcolor:post background},0.5);
  726. padding: 10px;
  727. width: 80px;
  728. position: relative;
  729. }
  730.  
  731. #time-notes {
  732. position: relative;
  733. text-align: center;
  734. }
  735.  
  736. #timeago-box a {
  737. font-family: 'Lobster', sans-serif;
  738. font-size:1.1em;
  739. }
  740.  
  741. #notecount-box a {
  742. font-family: 'Lobster Two', sans-serif;
  743. font-size: 1.3em;
  744. }
  745.  
  746. #reblog-source {
  747. position: relative;
  748. width: 90px;
  749. margin-left: -4px;
  750. height: 45px;
  751. }
  752.  
  753. .sourceimg {
  754. border: 5px solid {color:post background};
  755. position: relative;
  756. margin: 2px;
  757. float: left;
  758. }
  759.  
  760. #reblog-like {
  761. position: relative;
  762. padding: 5px;
  763. background-color: RGBA({RGBcolor:text},0.7);
  764. height: 20px;
  765. }
  766.  
  767. #reblogbutton {
  768. position: absolute;
  769. left: 10px;
  770. }
  771.  
  772. #likebutton {
  773. position: absolute;
  774. left: 50px;
  775. }
  776.  
  777. .permbox-box {
  778. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  779. -o-transition: 0.5s ease;
  780. -moz-transition: 0.5s ease;
  781. }
  782.  
  783. .permbox-box:hover {
  784.  
  785. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  786. -o-transition: 0.5s ease;
  787. -moz-transition: 0.5s ease;
  788. }
  789.  
  790. #timeago-box {
  791.  
  792. }
  793.  
  794. #tags {
  795. margin-top: 10px;
  796. background-color: RGBA({RGBcolor:post background},0.5);
  797. padding: 10px;
  798. }
  799.  
  800. .no-tags {
  801. display: none;
  802. }
  803.  
  804. .no-tags .comma:last-child {
  805. display: none;
  806. }
  807.  
  808. .hover-tags {
  809. width: 100px;
  810. word-wrap: break-word;
  811. opacity: 0;
  812. font-size:0.85em;
  813. position: absolute;
  814. margin-left: -130px;
  815. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  816. -o-transition: 0.5s ease;
  817. -moz-transition: 0.5s ease;
  818. }
  819.  
  820. .hover-tags .comma:last-child {
  821. display: none;
  822. }
  823.  
  824. #post:hover .hover-tags {
  825. opacity: 1;
  826. margin-left: -10px;
  827. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  828. -o-transition: 0.5s ease;
  829. -moz-transition: 0.5s ease;
  830. }
  831.  
  832. .fixed-tags {
  833. width: 100px;
  834. word-wrap: break-word;
  835. font-size:0.85em;
  836. position: absolute;
  837. margin-left: -10px;
  838. }
  839.  
  840. .fixed-tags .comma:last-child {
  841. display: none;
  842. }
  843.  
  844. #notes {
  845. background-color: RGBA({RGBcolor:post background},0.5);
  846. padding: 20px 0;
  847. margin-top: -90px;
  848. max-height: 300px;
  849. overflow-y:scroll;
  850. margin-bottom: 50px;
  851. }
  852.  
  853. #notes ol {
  854. list-style: none;
  855. font-size: 0.9em;
  856. line-height: 20px;
  857. }
  858.  
  859. #notes img {
  860. margin-right: 5px;
  861. border: 3px solid RGBA({RGBcolor:post background},0.5);
  862. }
  863.  
  864.  
  865. /* -- DO NOT EDIT ANYTHING HERE WITHOUT ASKING ME FIRST -- */
  866.  
  867. #credit {
  868. position: fixed;
  869. right: 5px;
  870. bottom: 5px;
  871. width: 13px;
  872. height: 13px;
  873. background-color: {color:post background};
  874. padding: 5px 7px 7px 5px;
  875. z-index: 99999999999999999999999999999999999999999999999;
  876. }
  877.  
  878. #credit:before {
  879. content: "\f259";
  880. font-family: FontAwesome;
  881. text-align:left;
  882. font-size:1.2em;
  883. }
  884.  
  885.  
  886.  
  887. </style>
  888. </head>
  889.  
  890. <body>
  891.  
  892. <!-- /* SIDEBAR, HEADER, ETC. */ -->
  893.  
  894. <!-- /* SIDEBAR */ -->
  895.  
  896. <div id="sidebar">
  897. <div id="stripe01"><div id="title">{Title}</div>
  898. {block:IfSearchbar}
  899. <div id="searchbar">
  900. <form action="/search" method="get" id=searchform>
  901. <input type="text" name="q" value="{SearchQuery}" id="searchinput"/>
  902. <input type="submit" value="search" id="searchbutton"/>
  903. </div>
  904. </form>
  905. {/block:IfSearchbar}
  906. </div>
  907. <div id="stripe02">
  908. <div id="sblinks">
  909. {block:IfLink1Text}<a href="{text:link 1 url}" class="sblink" id="link1">{text:link 1 text}</a>{/block:IfLink1Text}
  910. {block:IfLink2Text}<a href="{text:link 2 url}" class="sblink" id="link2">{text:link 2 text}</a>{/block:IfLink2Text}
  911. {block:IfLink3Text}<a href="{text:link 3 url}" class="sblink" id="link3">{text:link 3 text}</a>{/block:IfLink3Text}
  912. {block:IfLink4Text}<a href="{text:link 4 url}" class="sblink" id="link4">{text:link 4 text}</a>{/block:IfLink4Text}
  913. {block:IfLink5Text}<a href="{text:link 5 url}" class="sblink" id="link5">{text:link 5 text}</a>{/block:IfLink5Text}
  914. {block:IfLink6Text}<a href="{text:link 6 url}" class="sblink" id="link6">{text:link 6 text}</a>{/block:IfLink6Text}
  915. {block:IfLink7Text}<a href="{text:link 7 url}" class="sblink" id="link7">{text:link 7 text}</a>{/block:IfLink7Text}
  916. {block:IfLink8Text}<a href="{text:link 8 url}" class="sblink" id="link8">{text:link 8 text}</a>{/block:IfLink8Text}
  917. {block:IfLink9Text}<a href="{text:link 9 url}" class="sblink" id="link9">{text:link 9 text}</a>{/block:IfLink9Text}
  918. {block:IfLink10Text}<a href="{text:link 10 url}" class="sblink" id="link10">{text:link 10 text}</a>{/block:IfLink10Text}
  919. </div>
  920.  
  921. {block:PreviousPage}
  922. <a href="{PreviousPage}"><div id="prev"></div></a>
  923. {/block:PreviousPage}
  924. {block:NextPage}
  925. <a href="{NextPage}"><div id="next"></div></a>
  926. {/block:NextPage}
  927. </div>
  928. <div id="stripe03">
  929. <div id="desc">{Description}</div>
  930. </div>
  931. </div>
  932. <div id="stripe04"></div>
  933.  
  934.  
  935.  
  936. <!-- /* POSTS */ DON'T CHANGE ANYTHING HERE PLEASE -->
  937.  
  938. <div id="content">
  939. <div id="posts">
  940. <div class="autopagerize_page_element">
  941. {block:Posts}
  942. <div id="posty">
  943. <div id="post">
  944.  
  945. {block:ContentSource}
  946. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  947. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  948. {/block:SourceLogo}
  949. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  950. {/block:ContentSource}
  951.  
  952. <!-- /* TEXT POST */ -->
  953. {block:Text}<div class="textpost {TagsAsClasses}">
  954. {block:Title}<div class="textpost-title">{Title}</div>{/block:Title}
  955. <div class="textpost-text">
  956. {Body}
  957. </div>
  958. </div>
  959. {/block:Text}
  960.  
  961. <!-- /* PHOTO POST */ -->
  962. {block:Photo}<div class="photopost {TagsAsClasses}">
  963. {LinkOpenTag}
  964. {block:If500pxPosts}
  965. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  966. {/block:If500pxPosts}
  967. {block:IfNot500pxPosts}
  968. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  969. {/block:IfNot500pxPosts}
  970. {LinkCloseTag}
  971. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  972. </div>
  973. {/block:Photo}
  974.  
  975. <!-- /* PANORAMA POST */ -->
  976. {block:Panorama}<div class="panoramapost {TagsAsClasses}">
  977. {LinkOpenTag}
  978. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  979. {LinkCloseTag}
  980. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  981. </div>
  982. {/block:Panorama}
  983.  
  984. <!-- /* PHOTOSET POST */ -->
  985. {block:Photoset}<div class="photosetpost {TagsAsClasses}">
  986. {Photoset}
  987. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  988. </div>
  989. {/block:Photoset}
  990.  
  991. <!-- /* QUOTE POST */ -->
  992. {block:Quote}<div class="quotepost {TagsAsClasses}">
  993. <div class="quotepost-quote">{Quote}</div>
  994. {block:Source}<div class="quotepost-source">&middot;&middot;&middot;&nbsp;{Source}&nbsp;&middot;&middot;&middot;</div>{/block:Source}
  995. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  996. </div>
  997. {/block:Quote}
  998.  
  999. <!-- /* LINK POST */ -->
  1000. {block:Link}<div class="linkpost {TagsAsClasses}">
  1001. <a href="{URL}"><div id="linkpost-titly"><div class="linkpost-title">{Name}</div>{block:Thumbnail}<img src="{Thumbnail}" class="linkpost-img">{/block:Thumbnail}</div></a>
  1002. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1003. </div>
  1004. {/block:Link}
  1005.  
  1006. <!-- /* CHAT POST */ -->
  1007. {block:Chat}<div class="chatpost {TagsAsClasses}">
  1008. {block:Title}<div class="chatpost-title">{Title}</div>{/block:Title}
  1009. <ul>
  1010. {block:Lines}
  1011. <li class="{Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
  1012. {/block:Lines}
  1013. </ul>
  1014. </div>
  1015. {/block:Chat}
  1016.  
  1017. <!-- /* AUDIO POST */ -->
  1018. {block:Audio}<div class="audiopost {TagsAsClasses}">
  1019. {block:AudioPlayer}<div class="audiopost-player">{AudioPlayer}</div>{/block:AudioPlayer}
  1020. {block:AlbumArt}<div class="audiopost-img"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div id="audiopost-fallbackimg"><img src="{image:fallback albumart}"></div>
  1021. <ul>
  1022. {block:Artist}<li><strong>Artist:</strong> {Artist}</li>{/block:Artist}
  1023. {block:Album}<li><strong>Album:</strong> {Album}</li>{/block:Album}
  1024. {block:TrackName}<li><strong>Track:</strong> {TrackName}</li>{/block:TrackName}
  1025. </ul>
  1026. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1027. </div>
  1028. {/block:Audio}
  1029.  
  1030. <!-- /* VIDEO POST */ -->
  1031. {block:Video}<div class="videopost {TagsAsClasses}"><div class="videopost-video">
  1032. {block:If500pxPosts}
  1033. {Video-500}
  1034. {/block:If500pxPosts}
  1035. {block:IfNot500pxPosts}
  1036. {Video-400}
  1037. {/block:IfNot500pxPosts}
  1038. </div>
  1039. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1040. </div>
  1041. {/block:Video}
  1042.  
  1043. <!-- /* ANSWER POST */ -->
  1044.  
  1045. {block:Answer}
  1046. <div class="answerpost {TagsAsClasses}">
  1047. <div class="answerpost-1">
  1048. <img class="answerpost-askerimg" src="{AskerPortraitURL-96}" alt=""><div class="answerpost-question"><div class="answerpost-asker">{Asker}:</div>{Question}</div>
  1049. <div class="answerpost-2">
  1050. {block:Answerer}
  1051. <div class="answerpost-answer"><div class="answerpost-answerer">{Answerer}:</div>{Answer}</div>
  1052. {/block:Answerer}
  1053. <div class="caption">
  1054. {Replies}
  1055. </div>
  1056. </div>
  1057. </div>
  1058. {/block:Answer}
  1059.  
  1060. <!-- /* PERM */ -->
  1061. <div id="permbox">
  1062.  
  1063. <div id="perm">
  1064. <div id="time-notes">
  1065. <div id="timeago-box" class="permbox-box"><a href="{Permalink}">{TimeAgo}</a></div>
  1066. {block:NoteCount}<div id="notecount-box" class="permbox-box"><a href="{Permalink}">{NoteCount}</a></div>{/block:NoteCount}
  1067. </div>
  1068.  
  1069. {block:RebloggedFrom}
  1070. <div id="reblog-source">
  1071. <div id="reblogged-box" class="permbox-box"><a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-30}" class="sourceimg"></a></div>
  1072. <div id="source-box" class="permbox-box">
  1073. <a href="{SourceURL}"><img class="sourceimg" src="{ReblogRootPortraitURL-30}"></a></div>
  1074. </div>
  1075. {/block:RebloggedFrom}
  1076.  
  1077. <div id="reblog-like">
  1078. <div id="reblogbutton">{ReblogButton color="black" size="20"}</div>
  1079. <div id="likebutton">{LikeButton color="black" size="20"}</div>
  1080. </div>
  1081.  
  1082. </div>
  1083. <!--
  1084.  
  1085.  
  1086. -->
  1087.  
  1088. <!-- /* TAGS */ -->
  1089. {block:IndexPage}
  1090. {block:HasTags}<div id="tags" class="{select:Index tags}">
  1091. {block:Tags}
  1092. <a href="{TagURL}">&#35;{Tag}</a><span class="comma">&nbsp;&nbsp;</span>
  1093. {/block:Tags}
  1094. </div>
  1095. {/block:HasTags}
  1096. {/block:IndexPage}
  1097.  
  1098. {block:PermalinkPage}
  1099. {block:HasTags}<div id="tags" class="{select:Perma tags}">
  1100. {block:Tags}
  1101. <a href="{TagURL}">&#35;{Tag}</a><span class="comma">&nbsp;&nbsp;</span>
  1102. {/block:Tags}
  1103. </div>
  1104. {/block:HasTags}
  1105. {/block:PermalinkPage}
  1106.  
  1107.  
  1108. </div>
  1109.  
  1110.  
  1111.  
  1112. </div>
  1113. </div>
  1114. {/block:Posts}
  1115.  
  1116.  
  1117.  
  1118. </div> <!-- post div -->
  1119.  
  1120.  
  1121. <!-- /* POST NOTES */ -->
  1122. {block:PostNotes}
  1123. <div id="notes">
  1124. <ul>
  1125. {PostNotes}
  1126. </ul>
  1127. </div>
  1128. {/block:PostNotes}
  1129. </div> <!-- posts div -->
  1130. </div> <!-- content div -->
  1131.  
  1132. <!-- /* CREDIT: DO NOT REMOVE !!! */ -->
  1133. <a href="http://spirkthemes.tumblr.com"><div id="credit" data-tipped-options="position: 'left'"></div></a>
  1134.  
  1135.  
  1136.  
  1137. </body>
  1138. </html>
Advertisement
Add Comment
Please, Sign In to add comment