Advertisement
ladyvicky

THEME #8

Nov 25th, 2014
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 32.34 KB | None | 0 0
  1. <!DOCTYPE>
  2.  
  3. <html>
  4.    
  5. <head>
  6.  
  7. <!-------------------------------------------------------------
  8.  
  9.  
  10. Code by renegade-themes.tumblr.com / renegade-kitten.tumblr.com do not steal, redistribute or remove credit without permission
  11.  
  12.  
  13. -------------------------------------------------------------->
  14.  
  15.  
  16. <!-------------------------------------------------------------
  17. SCRIPTS
  18. -------------------------------------------------------------->
  19.    
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  21.  
  22. <script src="https://googledrive.com/host/0B1LOqmbUyH_GYTZwT2hPTHAtVkU/jPushMenu.js"></script>
  23.  
  24. <script>
  25. jQuery(document).ready(function($) {
  26.     $('.toggle-menu').jPushMenu();
  27. });
  28. </script>
  29.  
  30.  
  31. {block:IfInfiniteScrolling}
  32. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  33. {/block:IfInfiniteScrolling}
  34.  
  35.     {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  36.    
  37.     <title>
  38.         {block:TagPage}{Tag} - {/block:TagPage}
  39.         {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}
  40.         {block:PostSummary}{PostSummary} - {/block:PostSummary}
  41.         {Title}
  42.     </title>
  43.    
  44.     <link rel="shortcut icon" href="http://static.tumblr.com/8di24cd/e4Kn3taya/tumblr_lohor4gvgg1qda978.gif">
  45.    
  46.     <link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}">
  47.    
  48.     <link href='http://fonts.googleapis.com/css?family=Arvo:400,700|Raleway' rel='stylesheet' type='text/css'>
  49.    
  50.    
  51. <!-------------------------------------------------------------    
  52. METATAG THINGS
  53. -------------------------------------------------------------->
  54. <meta name="text:Blog Title" content="Blog Title">
  55. <meta name="text:Blog Subtitle" content="Blog Subtitle">
  56. <meta name="text:Description Title" content="about">
  57.  
  58. <meta name="text:Link A Title" content="Link A">
  59. <meta name="text:Link A URL" content="/">
  60.  
  61. <meta name="text:Link B Title" content="Link B">
  62. <meta name="text:Link B URL" content="/">
  63.  
  64. <meta name="text:Link C Title" content="Link C">
  65. <meta name="text:Link C URL" content="/">
  66.  
  67. <meta name="text:Link D Title" content="Link D">
  68. <meta name="text:Link D URL" content="/">
  69.  
  70. <meta name="text:Link E Title" content="Link E">
  71. <meta name="text:Link E URL" content="/">
  72.  
  73. <meta name="text:Link F Title" content="Link F">
  74. <meta name="text:Link F URL" content="/">
  75.  
  76. <meta name="text:Link G Title" content="Link G">
  77. <meta name="text:Link G URL" content="/">
  78.  
  79. <meta name="text:Link H Title" content="Link H">
  80. <meta name="text:Link H URL" content="/">
  81.  
  82.  
  83. <meta name="color:Main Border" content="#000">
  84. <meta name="color:Background" content="#fff">
  85. <meta name="color:Text" content="#777">
  86. <meta name="color:Links" content="#555">
  87. <meta name="color:Links Hover" content="mediumturquoise">
  88. <meta name="color:Blockquote Background" content="#eee">
  89. <meta name="color:Post BG" content="#fafafa">
  90. <meta name="color:Dates" content="#333">
  91. <meta name="color:Blog Subtitle" content="mediumturquoise">
  92. <meta name="color:Navigation Links Hover" content="mediumturquoise">
  93. <meta name="color:Sidebar BG" content="#fafafa">
  94. <meta name="color:Sidebar Text" content="#aaa">
  95. <meta name="color:Sidebar Links" content="turquoise">
  96. <meta name="color:Description Title" content="turquoise">
  97. <meta name="color:Dates Bullet" content="#eee">
  98. <meta name="color:Index Info Labels" content="#333">
  99. <meta name="color:Index Info" content="mediumturquoise">
  100. <meta name="color:Pagination" content="#eee">
  101. <meta name="color:Current Page" content="#333">
  102.  
  103.  
  104. <meta name="image:Logo" content="">
  105. <meta name="image:Bullet" content="http://static.tumblr.com/8di24cd/vrvn1tla1/mh-pink.gif">
  106. <meta name="image:Background" content="">
  107. <meta name="image:Post BG" content="">
  108.  
  109. <meta name="if:Display Captions" content="0">
  110. <meta name="if:Grayscale Images" content="1">
  111.  
  112. <meta name="if:500px Posts" content="1">
  113. <meta name="if:400px Posts" content="0">
  114. <meta name="if:250px Posts" content="0">
  115.  
  116. <meta name="if:InfiniteScrolling" content="1">
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124. <style>
  125.  
  126. /*-------------------------------------------------------------
  127.  FONTS
  128. -------------------------------------------------------------*/
  129. /*-------------------------------------------------------------
  130.  TOOLS
  131. -------------------------------------------------------------*/
  132. iframe, img, embed, object, video {
  133.     max-width: 100%;
  134. }
  135.  
  136. iframe#tumblr_controls {
  137.     -webkit-filter:invert(100%);
  138.     -moz-filter:invert(100%);
  139.     -o-filter:invert(100%);
  140.     -ms-filter:invert(100%);
  141.     filter:invert(100%);
  142.     opacity:0.2;
  143. }
  144.  
  145.  
  146. ::-webkit-scrollbar-thumb {
  147.     height: auto;
  148.     background-color: {color:Main Border};
  149.     border: 3px solid {color:Background};
  150. }
  151.  
  152. ::-webkit-scrollbar {
  153.     height: 9px;
  154.     width: 10px;
  155.     background-color: {color:Background};
  156.     border: 3px solid {color:Background};
  157. }  
  158.  
  159.  
  160.  
  161. /*-------------------------------------------------------------
  162.  GENERAL
  163. -------------------------------------------------------------*/
  164. html {
  165. {block:IndexPage}
  166.     border:30px solid {color:Main Border};
  167. {/block:IndexPage}
  168. min-height:100%;
  169. }
  170.  
  171. body {
  172.     margin:0px;
  173.     padding:0px;
  174.     color:{color:Text};
  175.     background-image:url('image:Background');
  176.     background-color:{color:Background};
  177.     font-family:'arvo', Sans-Serif;
  178.     font-size:14px;
  179.     letter-spacing:0px;
  180.     word-wrap:break-word;
  181.     line-height:140%;
  182. }
  183.  
  184. iframe, img, embed, object, video {
  185.     max-width: 100%;
  186. }
  187.  
  188. iframe#tumblr_controls {
  189.     -webkit-filter:invert(100%);
  190.     -moz-filter:invert(100%);
  191.     -o-filter:invert(100%);
  192.     -ms-filter:invert(100%);
  193.     filter:invert(100%);
  194.     opacity:0.2;
  195.     margin-right:30px!important;
  196.     margin-top:30px!important;
  197. }
  198.  
  199. h1, h2, h3, h4, h5, h6 {
  200.     font-family:'raleway', sans-serif;
  201.     font-weight:normal;
  202.     text-align:center;
  203.     line-height:100%;
  204. }
  205.  
  206. a, a:hover, a:active {
  207.     text-decoration:none;
  208.     -webkit-transition:all 0.5s ease-in-out;
  209.     -moz-transition:all 0.5s ease-in-out;
  210.     -o-transition:all 0.5s ease-in-out;
  211.     transition:all 0.5s ease-in-out;
  212. }
  213.  
  214. a {
  215.     color:{color:Links};
  216.     -webkit-transition:all 0.5s ease-in-out;
  217.     -moz-transition:all 0.5s ease-in-out;
  218.     -o-transition:all 0.5s ease-in-out;
  219.     transition:all 0.5s ease-in-out;
  220. }
  221.  
  222. a:hover, #notes a:hover, .ask a:hover {
  223.     color:{color:Links Hover};
  224.     -webkit-transition:all 0.5s ease-in-out;
  225.     -moz-transition:all 0.5s ease-in-out;
  226.     -o-transition:all 0.5s ease-in-out;
  227.     transition:all 0.5s ease-in-out;
  228. }
  229.  
  230. ul {
  231.     list-style-position: inside;
  232.     list-style-image: url('image:Bullet');
  233.     margin-left:-40px;
  234. }
  235.  
  236. blockquote {
  237.     padding:10px;
  238.     background:{color:Blockquote Background};
  239. }
  240.  
  241. /*-------------------------------------------------------------
  242.                         MAIN CONTAINERS
  243. -------------------------------------------------------------*/
  244.  
  245. #content {
  246. {block:IndexPage}
  247.  
  248. {block:if500pxPosts}
  249.     width:520px;
  250. {/block:if500pxPosts}
  251.  
  252. {block:if400pxPosts}
  253.     width:420px;
  254. {/block:if400pxPosts}
  255.  
  256. {block:if250pxPosts}
  257.     width:270px;
  258. {/block:if250pxPosts}
  259.  
  260. {/block:IndexPage}
  261.  
  262. {block:PermalinkPage}
  263.     width:720px;
  264. {/block:PermalinkPage}
  265.  
  266.     margin: 0px auto 100px auto;
  267.     padding:10px;
  268. }
  269.  
  270. article {
  271.     position:relative;
  272.     background-color:{color:Post BG};
  273.     background-image:url('image:Post BG');
  274.     padding:10px;
  275.     border-top:5px solid {color:Dates};
  276. {block:Indexpage}
  277.  
  278. {block:if500pxPosts}
  279.     width:500px;
  280. {/block:if500pxPosts}
  281.  
  282. {block:if400pxPosts}
  283.     width:400px;
  284. {/block:if400pxPosts}
  285.  
  286. {block:if250pxPosts}
  287.     width:250px;
  288. {/block:if250pxPosts}
  289.  
  290.     margin-bottom:100px;
  291. {/block:indexpage}
  292.  
  293. {block:PermalinkPage}
  294.     width:700px;
  295. {/block:PermalinkPage}
  296.     top:100px;
  297.     -webkit-transition:all 0.5s ease-in-out;
  298.     -moz-transition:all 0.5s ease-in-out;
  299.     -o-transition:all 0.5s ease-in-out;
  300.     transition:all 0.5s ease-in-out;
  301. }
  302.  
  303. #topbar {
  304.     position:fixed;
  305.     bottom:23px;
  306.     width:100%;
  307.     z-index:9999999
  308. }
  309.  
  310. .topborder {
  311.     width:100%;
  312.     height:30px;
  313.     bottom:0px;
  314.     position:fixed;
  315.     background:{color:Main Border};
  316. }
  317.  
  318. .clear {
  319.     height:90px;
  320.     bottom:0px;
  321.     right:30px;
  322.     left:30px;
  323.     position:fixed;
  324.     background:{color:Background};
  325.     opacity:1;
  326.     z-index:-1;
  327. }
  328.  
  329. #titlebar {
  330.     margin-top:50px;
  331.     width:100%;
  332.     padding:0;
  333. }
  334.  
  335. #titlebar img {
  336.     width:120px;
  337.     border-radius:100%;
  338. }
  339.  
  340. /*-------------------------------------------------------------
  341.                             TITLE
  342. -------------------------------------------------------------*/
  343. .blogtitle {
  344.     font-size:5em;
  345.     letter-spacing:-6px;
  346.     font-style:italic;
  347.     bottom:0px;
  348. }
  349.  
  350. .blogtitle2 {
  351.     color:{color:Blog Subtitle};
  352.     font-size:16px;
  353.     font-family:'raleway', sans-serif;
  354.     text-transform:uppercase;
  355.     font-style:italic;
  356.     letter-spacing:10px;
  357. }
  358.  
  359. /*-------------------------------------------------------------
  360.                         NAVIGATION
  361. -------------------------------------------------------------*/
  362.  
  363. nav a {
  364.     position: relative;
  365.     display: inline-block;
  366.     margin: -6px 10px;
  367.     outline: none;
  368.     color:{color:Main Border};
  369.     text-decoration: none;
  370.     text-transform:lowercase;
  371.     font-family:georgia;
  372.     letter-spacing:-3px;
  373.     font-size:20px;
  374.     font-weight: 700;
  375.     text-shadow: 0 0 1px {color:Navigation Links Hover};
  376. }
  377.  
  378. nav a:hover,
  379. nav a:focus {
  380.     outline: none;
  381. }
  382.  
  383. /* Effect 17: move up fade out, push border */
  384. .cl-effect-17 a {
  385.     color:{color:Navigation Links Hover};
  386.     text-shadow: none;
  387.     padding: 10px 0;
  388. }
  389.  
  390. .cl-effect-17 a::before {
  391.     color:{color:Main Border};
  392.     text-shadow: 0 0 1px {color:Main Border};
  393.     content: attr(data-hover);
  394.     position: absolute;
  395.     -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  396.     -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  397.     transition: transform 0.3s, opacity 0.3s;
  398.     pointer-events: none;
  399. }
  400.  
  401. .cl-effect-17 a::after {
  402.     content: '';
  403.     position: absolute;
  404.     left:0;
  405.     bottom: 0;
  406.     width: 100%;
  407.     height: 0px;
  408.     background:{color:Navigation Links Hover};
  409.     opacity: 0;
  410.     -webkit-transform: translateY(5px);
  411.     -moz-transform: translateY(5px);
  412.     transform: translateY(5px);
  413.     -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  414.     -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  415.     transition: transform 0.3s, opacity 0.3s;
  416.     pointer-events: none;
  417. }
  418.  
  419. .cl-effect-17 a:hover::before,
  420. .cl-effect-17 a:focus::before {
  421.     opacity: 0;
  422.     -webkit-transform: translateY(-2px);
  423.     -moz-transform: translateY(-2px);
  424.     transform: translateY(-2px);
  425. }
  426.  
  427. .cl-effect-17 a:hover::after,
  428. .cl-effect-17 a:focus::after {
  429.     opacity: 1;
  430.     -webkit-transform: translateY(0px);
  431.     -moz-transform: translateY(0px);
  432.     transform: translateY(0px);
  433. }
  434.    
  435. /*-------------------------------------------------------------
  436.                              INFOBAR
  437. -------------------------------------------------------------*/
  438.  
  439. /* General styles for all menus */
  440. .cbp-spmenu {
  441.     background:{color:Sidebar BG};
  442.     color:{color:Sidebar Text};
  443.     position: fixed;
  444.     overflow-y:scroll;
  445. }
  446.  
  447. .cbp-spmenu a {
  448.     color:{color:Sidebar Links};
  449. }
  450.  
  451. /* Orientation-dependent styles for the content of the menu */
  452.  
  453. .cbp-spmenu-vertical {
  454.     width: 250px;
  455.     height: 100%;
  456.     top: 0;
  457.     z-index: 99999999999999999;
  458. }
  459.  
  460. /* Vertical menu that slides from the left or right */
  461.  
  462. .cbp-spmenu-right {
  463.     left: -250px;
  464. }
  465.  
  466. .cbp-spmenu-right.cbp-spmenu-open {
  467.     left: 0px;
  468. }
  469.  
  470. /* Push classes applied to the body */
  471.  
  472. .cbp-spmenu-push {
  473.     overflow-x: hidden;
  474.     position: relative;
  475.     right: 0;
  476. }
  477.  
  478. .cbp-spmenu-push-toleft {
  479.     right: -250px;
  480. }
  481.  
  482. /* Transitions */
  483.  
  484. .cbp-spmenu,
  485. .cbp-spmenu-push {
  486.     -webkit-transition: all 0.3s ease;
  487.     -moz-transition: all 0.3s ease;
  488.     transition: all 0.3s ease;
  489. }
  490.  
  491. .toggle-menu, .menu-right, .push-body {
  492. }
  493.  
  494.  
  495. #stuff {
  496.     position:relative;
  497.     display:block;
  498.     font-family:'raleway', sans-serif;
  499.     padding:20px;
  500.     box-sizing:border-box;
  501. }
  502.  
  503. .stufftitle {
  504.     font-weight:700;
  505.     letter-spacing:-2px;
  506.     font-size:20px;
  507.     font-family:'georgia', serif;
  508.     text-transform:lowercase;
  509.     color:{color:Description Title};
  510.     text-align:center;
  511.     margin:20px;
  512.     -webkit-transition:all 0.1s ease-in-out;
  513.     -moz-transition:all 0.1s ease-in-out;
  514.     -o-transition:all 0.1s ease-in-out;
  515.     transition:all 0.1s ease-in-out;
  516. }
  517.  
  518.  
  519.  
  520. /*-------------------------------------------------------------
  521.                         INDEX INFO
  522. -------------------------------------------------------------*/
  523.  
  524.  
  525. .dates {
  526.     position:absolute;
  527.     text-align:center;
  528.     left:0;
  529.     font-family:'georgia', serif;
  530.     font-weight:900;
  531.     font-style:italic;
  532.     font-size:3em;
  533. {block:if250pxPosts}
  534.     font-size:2em;
  535.     margin-top:-25px;
  536. {/block:if250pxPosts}
  537. {block:if500pxPosts}
  538.     margin-top:-30px;
  539. {/block:if500pxPosts}
  540. {block:if400pxPosts}
  541.     margin-top:-30px;
  542. {/block:if400pxPosts}
  543.     width:100%;
  544.     text-transform:lowercase;
  545.     letter-spacing:-3px;
  546.     color:{color:Dates};
  547.     line-height: 0.1em;
  548.     -webkit-transition:all 0.5s ease-in-out;
  549.     -moz-transition:all 0.5s ease-in-out;
  550.     -o-transition:all 0.5s ease-in-out;
  551.     transition:all 0.5s ease-in-out;
  552. }
  553.  
  554. .bullet {
  555.     color:{color:Dates Bullet};
  556. }
  557.  
  558. .separate {
  559.     position:absolute;
  560.     margin-top:4px;
  561.     margin-left:110px;
  562.     z-index:1;
  563.     opacity:0.5;
  564.     -webkit-transition:all 0.5s ease-in-out;
  565.     -moz-transition:all 0.5s ease-in-out;
  566.     -o-transition:all 0.5s ease-in-out;
  567.     transition:all 0.5s ease-in-out;
  568. }
  569.  
  570. /* INDEX NOTES */
  571.  
  572. .mainpageinfo {
  573.     position:absolute;
  574. {block:If500pxPosts}
  575.     margin-left:540px;
  576. {/block:If500pxPosts}
  577.  
  578. {block:If400pxPosts}
  579.     margin-left:440px;
  580. {/block:If400pxPosts}
  581.  
  582. {block:If250pxPosts}
  583.     margin-left:290px;
  584. {/block:If250pxPosts}
  585.     margin-top:-20px;
  586.     width:500px;
  587.     font-family:'raleway', serif;
  588.     text-transform:Capitalize;
  589.     letter-spacing:0px;
  590.     font-weight:400;
  591.     line-height:200%;
  592.     -webkit-transition:all 0.5s ease-in-out;
  593.     -moz-transition:all 0.5s ease-in-out;
  594.     -o-transition:all 0.5s ease-in-out;
  595.     transition:all 0.5s ease-in-out;
  596. }
  597.  
  598. .mainpageinfo img {
  599.     padding-right:5px
  600. }
  601.  
  602. .mainpageinfo span {
  603.     text-transform:uppercase;  
  604.     font-family:'georgia', serif;
  605.     font-weight:900;
  606.     font-size:12px;
  607.     color:{color:Index Info Labels};
  608.     letter-spacing:-1px;
  609. }
  610.  
  611. .mpi {
  612.     color:{color:Index Info};
  613.     opacity:0;
  614.     display:block;
  615.     margin-left:100px;
  616.     -webkit-transition:all 0.5s ease-in-out;
  617.     -moz-transition:all 0.5s ease-in-out;
  618.     -o-transition:all 0.5s ease-in-out;
  619.     transition:all 0.5s ease-in-out;
  620. }
  621.  
  622. .mpi:nth-child(6), article:hover .mpi:first-child {
  623.     transition-delay:0.0s;background:transparent;
  624. }
  625.  
  626. .mpi:nth-child(5), article:hover .mpi:nth-child(2) {
  627.     transition-delay:0.1s;background:transparent;
  628. }
  629.  
  630. .mpi:nth-child(4), article:hover .mpi:nth-child(3) {
  631.     transition-delay:0.2s;background:transparent;
  632. }
  633.  
  634. .mpi:nth-child(3), article:hover .mpi:nth-child(4) {
  635.     transition-delay:0.3s;background:transparent;
  636. }
  637.  
  638. .mpi:nth-child(2), article:hover .mpi:nth-child(5) {
  639.     transition-delay:0.4s;background:transparent;
  640. }
  641.  
  642. .mpi:first-child, article:hover .mpi:nth-child(6) {
  643.     transition-delay:0.5s;background:transparent;
  644. }
  645.  
  646. article:hover .mpi {
  647.     margin-left:0;
  648.     opacity:1;
  649.     transition-delay:1s;
  650.     -webkit-transition:opacity 0.5s ease-in-out;
  651.     -moz-transition:opacity 0.5s ease-in-out;
  652.     -o-transition:opacity 0.5s ease-in-out;
  653.     transition:opacity 0.5s ease-in-out;
  654. }
  655.  
  656.  
  657.  
  658. /*-------------------------------------------------------------
  659.                             POSTS
  660. -------------------------------------------------------------*/
  661.  
  662.  
  663. .caps {
  664.     margin-left:-10px;
  665.     margin-top:7px;
  666.     padding:10px;
  667. {block:IndexPage}
  668.  
  669. {block:if500pxPosts}
  670.     width:520px;
  671. {/block:if500pxPosts}
  672.  
  673. {block:if400pxPosts}
  674.     width:420px;
  675. {/block:if400pxPosts}
  676.  
  677. {block:if250pxPosts}
  678.     width:270px;
  679. {/block:if250pxPosts}
  680.  
  681.  
  682. {/block:IndexPage}
  683. {block:PermalinkPage}
  684.     width:760px;
  685. {/block:PermalinkPage}
  686.     box-sizing:border-box;
  687.     border-top:10px solid {color:Background};
  688. }
  689.  
  690.  
  691.  
  692.  
  693.  
  694.  
  695.  
  696. /*-------------------------------------------------------------
  697. PHOTO + PHOTOSET POSTS
  698. -------------------------------------------------------------*/
  699. img, .html_photoset {
  700. {block:IfGrayscaleImages}
  701. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  702.     filter: gray; /* IE6-9 */
  703.     -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  704.     -webkit-transition:all 0.5s ease-in-out;
  705.     -moz-transition:all 0.5s ease-in-out;
  706.     -o-transition:all 0.5s ease-in-out;
  707.     transition:all 0.5s ease-in-out;
  708. {/block:IfGrayscaleImages}
  709.  
  710. }
  711.  
  712. img:hover, .html_photoset:hover {
  713. {block:IfGrayscaleImages}
  714.     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  715.     filter: none; /* IE6-9 */
  716.     -webkit-filter: grayscale(0); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  717.     -webkit-transition:all 0.5s ease-in-out;
  718.     -moz-transition:all 0.5s ease-in-out;
  719.     -o-transition:all 0.5s ease-in-out;
  720.     transition:all 0.5s ease-in-out;
  721. {/block:IfGrayscaleImages}
  722.  
  723. }
  724.  
  725. svg image {
  726.     transition: all .6s ease;
  727. }
  728.  
  729. svg image:hover {
  730.     opacity: 0;
  731. }
  732.  
  733.  
  734.  
  735.  
  736.  
  737.  
  738. /*-------------------------------------------------------------
  739. QUOTE POSTS
  740. -------------------------------------------------------------*/
  741. .source {
  742.     text-transform:uppercase;
  743.     font-family:'georgia', serif;
  744.     font-weight:900;
  745. }
  746.  
  747.  
  748.  
  749.  
  750.  
  751. /*-------------------------------------------------------------
  752. LINK POSTS
  753. -------------------------------------------------------------*/
  754. .link {
  755.     text-transform:uppercase;
  756.     font-weight:700;
  757.     font-family:'Raleway', sans-serif;
  758.     line-height:70%;
  759.     border-bottom:5px solid {color:Links};
  760.     margin:50px -10px;
  761. }
  762.  
  763.  
  764.  
  765.  
  766.  
  767.  
  768.  
  769.  
  770. /*-------------------------------------------------------------
  771.  CHAT POSTS
  772. -------------------------------------------------------------*/
  773. .chatpost li {
  774.     text-align:left;
  775.     line-height:50px;
  776.     list-style-type:none;
  777.     font-family:'Raleway', sans-serif;
  778. }
  779.  
  780. .chatpost span {
  781.     font-weight:900;
  782.     font-style:italic;
  783.     font-size:1.2em;
  784.     font-family:'georgia', serif;
  785.     letter-spacing:-2px;
  786. }
  787.  
  788.  
  789.  
  790.  
  791.  
  792.  
  793. /*-------------------------------------------------------------
  794. TEXT POSTS
  795. -------------------------------------------------------------*/
  796. .title {
  797.     font-size:2em;
  798. }
  799.  
  800.  
  801.  
  802.  
  803.  
  804.  
  805.  
  806.  
  807. /*-------------------------------------------------------------
  808.  ANSWER POSTS
  809. -------------------------------------------------------------*/
  810. .answerpost h2, .answerpost h3 {
  811.     text-align:left;
  812. }
  813.  
  814. .asker {
  815.     text-transform:uppercase;
  816.     font-weight:700;
  817.     font-family:'Raleway', sans-serif;
  818.     line-height:70%;
  819.     margin:-19px -10px 25px -10px;
  820. }
  821.  
  822. .question {
  823.     border-bottom:5px solid {color:Links};
  824.     margin:0 -10px;
  825.     padding:25px 10px 35px 10px;
  826. }
  827.  
  828. .answer {
  829.     font-family:'arvo', serif;
  830. }
  831.  
  832.  
  833.  
  834. /*-------------------------------------------------------------
  835.  PAGINATION
  836. -------------------------------------------------------------*/
  837.  
  838. .pagination {  
  839. {block:IfInfiniteScrolling}
  840.     display:none;
  841. {/block:IfInfiniteScrolling}
  842.     line-height:35%;
  843.     position:fixed;
  844.     height:100%;
  845.     margin-left:24%;
  846.     margin-top:15%;
  847.     padding:5px 0;
  848.     font-size:3em;
  849.     font-family:'Georgia', serif;
  850.     font-weight:900;
  851.     font-style:italic;
  852.     -webkit-transition:all 0.1s ease-in-out;
  853.     -moz-transition:all 0.1s ease-in-out;
  854.     -o-transition:all 0.1s ease-in-out;
  855.     transition:all 0.1s ease-in-out;
  856. }
  857.  
  858. .pagination a {
  859.     padding:0;
  860.     margin:-10px 0;
  861.     text-transform:lowercase;
  862. }
  863.  
  864. .jump_page {    
  865.     width:20px;
  866.     padding: 10px 0;
  867.     font-weight:normal;
  868.     text-decoration:none;
  869.     text-transform:capitalize;
  870.     color:{color:Pagination};
  871.     -webkit-transition:all 0.1s ease-in-out;
  872.     -moz-transition:all 0.1s ease-in-out;
  873.     -o-transition:all 0.1s ease-in-out;
  874.     transition:all 0.1s ease-in-out;
  875. }
  876.  
  877. .current_page, .jump_page:hover {  
  878.     padding: 10px 0;
  879.     font-weight:normal;
  880.     text-decoration:none;
  881.     color:{color:Current Page};
  882.     -webkit-transition:all 0.1s ease-in-out;
  883.     -moz-transition:all 0.1s ease-in-out;
  884.     -o-transition:all 0.1s ease-in-out;
  885.     transition:all 0.1s ease-in-out;
  886. }
  887.  
  888.  
  889.  
  890.  
  891.  
  892.  
  893.  
  894. /*-------------------------------------------------------------
  895.                         PERMALINK PAGE
  896. -------------------------------------------------------------*/
  897. #permalinkpageinfo {
  898.     margin-top:50px;
  899.     position:absolute;
  900.     width:740px;
  901.  
  902. }
  903.  
  904. .tags {
  905.     text-align:center;
  906.     display:inline-block;
  907.     margin-top:30px;
  908.     left:0px;
  909. }
  910.  
  911. .tags a {
  912.     margin:0 5px;
  913.     padding:2px 7px;
  914.     text-align:center;
  915. }
  916.  
  917. .tags a:hover {
  918. }
  919.  
  920.  
  921. #notes {
  922.     position:relative;
  923.     margin-top:50px;
  924.     margin-left:-50px;
  925.     margin-bottom:100px;
  926.     width:770px;
  927. }
  928.  
  929. #notes img {
  930.     width:36px;
  931.     margin:-10px;
  932.     float:left;
  933.     display:block;
  934. }
  935.  
  936. #notes ul {
  937.     list-style:none;
  938. }
  939.  
  940. #notes li {
  941.     list-style:none;
  942.     padding:10px;
  943.     margin-bottom:10px;
  944.     background:rgba(255, 255, 255, 0.2);;
  945. }
  946.  
  947. #notes a {
  948.  
  949. }
  950.  
  951. .pinfo {
  952.     display:inline-block;
  953.     font-weight:normal;
  954.     margin:5px;
  955. }
  956.  
  957. .pinfo a {
  958.     text-transform:none;
  959.     text-shadow:none;
  960. }
  961.  
  962.  
  963.  
  964. /*-------------------------------------------------------------
  965.  FIREFOX SPECIFIC
  966. -------------------------------------------------------------*/
  967. @-moz-document url-prefix(http://),url-prefix(https://) {
  968.  
  969. scrollbar {
  970.    -moz-appearance: none !important;
  971.    background: rgb(0,255,0) !important;
  972. }
  973. thumb,scrollbarbutton {
  974.    -moz-appearance: none !important;
  975.    background-color: rgb(0,0,255) !important;
  976. }
  977.  
  978. thumb:hover,scrollbarbutton:hover {
  979.    -moz-appearance: none !important;
  980.    background-color: rgb(255,0,0) !important;
  981. }
  982.  
  983. scrollbarbutton {
  984.    display: none !important;
  985. }
  986.  
  987. scrollbar[orient="vertical"] {
  988.   min-width: 15px !important;
  989. }
  990. }
  991.  
  992.  
  993. {CustomCSS}
  994.  
  995. </style>
  996.    
  997.    
  998. </head>
  999.  
  1000. <body>
  1001.  
  1002. <div class="overlay"></div>
  1003.  
  1004. {block:ContentSource}
  1005.  
  1006. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1007.  
  1008. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1009.  
  1010. {/block:SourceLogo}
  1011.  
  1012. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1013.  
  1014. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  1015.  
  1016.  
  1017.  
  1018.  
  1019.  
  1020.  
  1021.  
  1022.  
  1023.    
  1024.    
  1025.     {block:IndexPage}  
  1026.    
  1027.     <!--titlebar blogtitle title -->
  1028.     <header id="titlebar">
  1029.     <center>
  1030.     {block:ifLogoImage}
  1031.     <img src="{image:Logo}">
  1032.     {/block:ifLogoImage}
  1033.     </center>
  1034.    
  1035.         <h2 class="blogtitle2">{text:Blog Subtitle}</h1>
  1036.     </header>
  1037.     {/block:IndexPage}
  1038.    
  1039.    
  1040.    
  1041.    
  1042.  
  1043. <aside id="topbar">
  1044.         <div class="topborder"></div>
  1045.         <div class="clear"></div>
  1046.    
  1047.    
  1048.     <center>
  1049.         <nav class="cl-effect-17" id="cl-effect-17" align="center">
  1050.        
  1051.             {block:IfBlogTitle}
  1052.             <a href="/" data-hover="{text:Blog Title}" class="blogtitle">{text:Blog Title}</a>
  1053.             {/block:IfBlogTitle}
  1054.             <a href ="/" data-hover="about" class="toggle-menu menu-right push-body">{text:Description Title}</a>
  1055.            
  1056.             {block:IfLinkATitle}
  1057.             <a href ="{text:Link A URL}" data-hover="{text:Link A Title}">{text:Link A Title}</a>
  1058.             {/block:IfLinkATitle}
  1059.            
  1060.             {block:IfLinkBTitle}
  1061.             <a href ="{text:Link B URL}" data-hover="{text:Link B Title}">{text:Link B Title}</a>
  1062.             {/block:IfLinkBTitle}
  1063.            
  1064.             {block:IfLinkCTitle}
  1065.             <a href ="{text:Link C URL}" data-hover="{text:Link C Title}">{text:Link C Title}</a>
  1066.             {/block:IfLinkCTitle}
  1067.            
  1068.             {block:IfLinkDTitle}
  1069.             <a href ="{text:Link D URL}" data-hover="{text:Link D Title}">{text:Link D Title}</a>
  1070.             {/block:IfLinkDTitle}
  1071.            
  1072.             {block:IfLinkETitle}
  1073.             <a href ="{text:Link E URL}" data-hover="{text:Link E Title}">{text:Link E Title}</a>
  1074.             {/block:IfLinkETitle}
  1075.            
  1076.             {block:IfLinkFTitle}
  1077.             <a href ="{text:Link F URL}" data-hover="{text:Link F Title}">{text:Link F Title}</a>
  1078.             {/block:IfLinkFTitle}
  1079.            
  1080.             {block:IfLinkGTitle}
  1081.             <a href ="{text:Link G URL}" data-hover="{text:Link G Title}">{text:Link G Title}</a>
  1082.             {/block:IfLinkGTitle}
  1083.            
  1084.             {block:IfLinkHTitle}
  1085.             <a href ="{text:Link H URL}" data-hover="{text:Link H Title}">{text:Link H Title}</a>
  1086.             {/block:IfLinkHTitle}
  1087.            
  1088.             <a href="//renegade-themes.tumblr.com" data-hover="theme">theme</a>
  1089.            
  1090.         </nav>
  1091.         </center>  
  1092. </aside>
  1093.  
  1094.  
  1095.  
  1096.  
  1097.  
  1098.  
  1099.  
  1100.  
  1101.  
  1102.     {block:IndexPage}
  1103.    
  1104. <!-- sidebar-->
  1105. <div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right">
  1106.  
  1107.  
  1108.     <div id="infobar">
  1109.    
  1110.    
  1111.     <!-- About -->
  1112.         <div id="stuff">
  1113.             <div class="stufftitle">{text:Description Title}</div><br>
  1114.             {block:Description}
  1115.             {Description}
  1116.             {/block:Description}
  1117.         </div>
  1118.     </div>
  1119. </div>
  1120.     {/block:IndexPage}
  1121.  
  1122.    
  1123.    
  1124.    
  1125.    
  1126.  
  1127.    
  1128.  
  1129.    
  1130.  
  1131.     {block:Pagination}
  1132.         <div class="pagination" align="center">
  1133.             {block:Pagination}
  1134.             {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><<</a><br><br><br>{/block:PreviousPage}
  1135.             {block:JumpPagination length="10"}
  1136.             {block:CurrentPage}<span class="current_page">{PageNumber}</span><br><br>{/block:CurrentPage}
  1137.             {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a><br><br>{/block:JumpPage}{/block:JumpPagination}
  1138.             {block:NextPage}<br><a href="{NextPage}" class="jump_page">>></a><br><br>{/block:NextPage}
  1139.             {/block:Pagination}
  1140.         </div>
  1141.     {/block:Pagination}
  1142.    
  1143.  
  1144.  
  1145.  
  1146.  
  1147. <div id="content">
  1148.  
  1149.  
  1150.  
  1151. {block:Posts}
  1152.    
  1153.     <article>
  1154.    
  1155.  
  1156.  
  1157.  
  1158.  
  1159. {block:IndexPage}      
  1160. <div class="mainpageinfo">
  1161.             <a href="{Permalink}" class="mpi"><img src="{image:Bullet}"> <span>Posted:</span> {TimeAgo}</a>
  1162.             {block:RebloggedFrom}
  1163.             <a href="{ReblogParentURL}" class="mpi"><img src="{image:Bullet}"> <span>via:</span> {ReblogParentName}</a>
  1164.             <a href="{ReblogRootURL}" class="mpi"><img src="{image:Bullet}"> <span>source:</span> {ReblogRootName}</a>
  1165.             {/block:RebloggedFrom}
  1166.             {block:NoteCount}
  1167.             <a href="{Permalink}" class="mpi"><img src="{image:Bullet}"> <span>notes:</span> {NoteCount}</a>
  1168.             {/block:NoteCount}
  1169.             <a href="{Permalink}" class="mpi"><img src="{image:Bullet}"> <span>permalink</span></a>
  1170.             <a href="{ReblogURL}" class="mpi"><img src="{image:Bullet}"> <span>reblog</span></a>
  1171. </div>
  1172.  
  1173.  
  1174. <div class="black"></div>
  1175. {/block:IndexPage}
  1176.  
  1177.  
  1178.  
  1179.  
  1180.  
  1181.  
  1182.     {block:IndexPage}
  1183.         <h2 class="dates"><span>
  1184.         {DayOfMonthWithZero}&nbsp;&nbsp;<span class="bullet">&#8226;</span>&nbsp;&nbsp;{Month}&nbsp;&nbsp;<span class="bullet">&#8226;</span>&nbsp;&nbsp;{ShortYear}
  1185.         </span></h2>
  1186.     {/block:IndexPage}
  1187.    
  1188.    
  1189.    
  1190.    
  1191.    
  1192.    
  1193.        
  1194.         {block:Text}
  1195.          <div class="textpost">
  1196.           {block:Title}<h1 class="title"><a href ="{Permalink}">{Title}</a></h1>{/block:Title}
  1197.           {Body}
  1198.          </div>
  1199.         {/block:Text}
  1200.        
  1201.        
  1202.        
  1203.        
  1204.        
  1205.        
  1206.        
  1207.        
  1208.         {block:Photo}
  1209.          <div class="photopost">
  1210.           <center>{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt">{LinkCloseTag}</center>
  1211.           {block:IfDisplayCaptions}
  1212.           {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}
  1213.           {/block:IfDisplayCaptions}
  1214.          </div>
  1215.         {/block:Photo}
  1216.        
  1217.        
  1218.        
  1219.        
  1220.        
  1221.        
  1222.        
  1223.         {block:Photoset}
  1224.          <div class="photosetpost">
  1225.           <center>{Photoset}</center>
  1226.           {block:IfDisplayCaptions}
  1227.           {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}
  1228.           {/block:IfDisplayCaptions}
  1229.          </div>
  1230.         {/block:Photoset}
  1231.        
  1232.        
  1233.        
  1234.        
  1235.        
  1236.        
  1237.        
  1238.         {block:Quote}
  1239.          <div class="quotepost">
  1240.           <h1 class="quote">{Quote}</h1>
  1241.            {block:Source}<h4 class="source">- {Source}</h4>{/block:Source}
  1242.          </div>
  1243.         {/block:Quote}
  1244.        
  1245.        
  1246.        
  1247.        
  1248.        
  1249.        
  1250.        
  1251.         {block:Link}
  1252.         <div class="linkpost">
  1253.         <h1 class="link"><a href="{URL}">{Name}</a></h1>
  1254.         {block:Description}{Description}{/block:Description}
  1255.         </div>
  1256.         {/block:Link}
  1257.        
  1258.        
  1259.        
  1260.        
  1261.        
  1262.        
  1263.        
  1264.         {block:Chat}
  1265.         <div class="chatpost">
  1266.         <ul>
  1267.         {block:Lines}
  1268.         <li class="{Alt}">
  1269.         <p>
  1270.         {block:Label}
  1271.             <span>{Label}</span>
  1272.         {/block:Label}
  1273.          {Line}</p>
  1274.         </li>
  1275.         {block:Lines}
  1276.         </ul>
  1277.         </div>
  1278.         {/block:Chat}
  1279.        
  1280.        
  1281.        
  1282.        
  1283.        
  1284.        
  1285.        
  1286.         {block:Audio}
  1287.         <div class="audiopost">
  1288.         {block:TrackName}<h1 class="audio"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  1289.         <div class="albumart">
  1290.         {block:AlbumArt}
  1291.         <img src="{albumArtUrl}">
  1292.         {/block:AlbumArt}
  1293.         <div>
  1294.        
  1295.         <div class="player">{AudiPlayerWhite}</div>
  1296.         {block:AudioEmbed}<center>{AudioEmbed}</center>{/block:AudioEmbed}
  1297.           {block:IfDisplayCaptions}
  1298.           {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}
  1299.           {/block:IfDisplayCaptions}
  1300.         </div>
  1301.         {/block:Audio}
  1302.        
  1303.        
  1304.        
  1305.        
  1306.        
  1307.        
  1308.        
  1309.         {block:Video}
  1310.         <div class="videopost">
  1311.         <div class="videoplayer">{block:IndexPage}<center>{Video-500}</center>{/block:IndexPage}{block:PermalinkPage}<center>{Video-700}</center>{/block:PermalinkPage}</div>
  1312.           {block:IfDisplayCaptions}
  1313.           {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}
  1314.           {/block:IfDisplayCaptions}
  1315.         </div>
  1316.         {/block:Video}
  1317.        
  1318.        
  1319.        
  1320.        
  1321.        
  1322.        
  1323.        
  1324.         {block:Answer}
  1325.         <div class="answerpost">
  1326.            
  1327.             <h2 class="question">{Question}</h2>
  1328.            
  1329.             <h1 class="asker">{Asker}</h1>
  1330.            
  1331.             <h3 class="answer">{Answer}</h3>
  1332.         </div>
  1333.         {/block:Answer}
  1334.        
  1335.        
  1336.        
  1337.        
  1338.        
  1339.  
  1340.    
  1341. {block:PermalinkPage}
  1342.         <div id="permalinkpageinfo">
  1343.                 <br><br>
  1344.                 <center>
  1345.                     <div class="pinfo">
  1346.                     <img src="{image:Bullet}"> Posted on the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year}
  1347.                     </div>
  1348.                    
  1349.                     <div class="pinfo">
  1350.                     <img src="{image:Bullet}"> {NoteCountWithLabel}
  1351.                     </div><br>
  1352.                      
  1353.                     {block:RebloggedFrom}
  1354.                         <div class="pinfo">
  1355.                             <img src="{image:Bullet}"> Reblogged From:&nbsp;<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>
  1356.                         </div>
  1357.                        
  1358.                         <div class="pinfo">
  1359.                         <img src="{image:Bullet}"> Originally Posted by:&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a><br>
  1360.                         </div>
  1361.                     {/block:RebloggedFrom}
  1362.                
  1363.                 <br>
  1364.                
  1365.                 {block:HasTags}
  1366.                     Filed under:
  1367.                     <div class="tags">
  1368.                         {block:Tags}
  1369.                                  <a href="{TagURL}"><img src="http://static.tumblr.com/8di24cd/vrvn1tla1/mh-pink.gif">&nbsp;{Tag}</a>
  1370.                         {/block:Tags}
  1371.                     </div>
  1372.                 {/block:HasTags}
  1373.               </center>  
  1374.                 {block:PostNotes}
  1375.                     <div id="notes" align="center">{PostNotes-64}</div>
  1376.                 {/block:PostNotes}
  1377.            
  1378.         </div>
  1379. {/block:PermalinkPage}        
  1380.        
  1381.        
  1382.        
  1383.        
  1384.     </article>
  1385. {/block:Posts}
  1386. </div><!-- end content -->
  1387.  
  1388. </body>
  1389.  
  1390. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement