SHARE
TWEET

Theme [26] Hotaru

mogimochi Jul 27th, 2013 (edited) 20,273 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 26 Hotaru
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. ---------------------------------------------------------- VER 200917 -->
  16.  
  17. <meta name="color:background" content="#f3f1f1">
  18.  
  19. <meta name="color:post background" content="#ffffff">
  20. <meta name="color:post border" content="#cccccc">
  21.  
  22. <meta name="color:post title" content="#5c5c5b">
  23. <meta name="color:post title first letter" content="#ff7d00">
  24. <meta name="color:link post title" content="#ff9100">
  25. <meta name="color:link post title hover" content="#d5d5d5">
  26.  
  27. <meta name="color:blockquote" content="#f7e4ba">
  28. <meta name="color:body" content="#8f8e8e">
  29. <meta name="color:body links" content="#fd8959">
  30. <meta name="color:body bold" content="#fdaa65">
  31. <meta name="color:body italic" content="#fcdfa9">
  32. <meta name="color:body links" content="#fd8959">
  33. <meta name="color:body links hover" content="#dfdddd">
  34.  
  35. <meta name="color:audio info bg" content="#fcf5e1">
  36. <meta name="color:audio info text" content="#706f6f">
  37. <meta name="color:ask text" content="#868585">
  38. <meta name="color:ask bg" content="#ffefd5">
  39.  
  40. <meta name="color:middle stripe bg" content="#e6c3a7">
  41. <meta name="color:top background" content="#ffefe0">
  42. <meta name="color:bottom background" content="#d8d8d8">
  43. <meta name="color:blog title" content="#ffffff">
  44.  
  45. <meta name="color:sidebar background" content="#ffffff">
  46. <meta name="color:sidebar border" content="#e6c3a7">
  47.  
  48. <meta name="color:desc text" content="#a3a1a1">
  49. <meta name="color:desc bold" content="#ffc975">
  50. <meta name="color:desc italic" content="#f7a06c">
  51. <meta name="color:desc links" content="#ff7300">
  52. <meta name="color:desc links hover" content="#dddddd">
  53.  
  54. <meta name="color:drop down menu bg" content="#ffffff">
  55. <meta name="color:drop down menu text" content="#979696">
  56. <meta name="color:drop down menu border" content="#e6c3a7">
  57.  
  58. <meta name="color:nav icons" content="#0a0a0a">
  59. <meta name="color:nav icons hover" content="#ffca83">
  60.  
  61. <meta name="color:nav background" content="#e6c3a7">
  62. <meta name="color:nav border" content="#ffffff">
  63.  
  64. <meta name="color:perma bg" content="#f3a976">
  65. <meta name="color:perma text" content="#ffffff">
  66.  
  67. <meta name="color:pagination bg 1" content="#e6c3a7" />
  68. <meta name="color:pagination bg 2" content="#ffffff" />
  69. <meta name="color:pagination text 1" content="#ffffff" />
  70. <meta name="color:pagination text 2" content="#e6c3a7" />
  71.  
  72. <meta name="color:scrollbar bg" content="#ffffff" />
  73. <meta name="color:scrollbar" content="#ebb57d" />
  74.  
  75. <meta name="color:chat even background" content="#ffffff" />
  76. <meta name="color:chat even name" content="#faba7d" />
  77. <meta name="color:chat even text" content="#b1b0b0" />
  78. <meta name="color:chat odd background" content="#f3f3f3" />
  79. <meta name="color:chat odd name" content="#ff7d00" />
  80. <meta name="color:chat odd text" content="#646464" />
  81.  
  82. <meta name="color:text highlight" content="#ffffff">
  83. <meta name="color:text highlight bg" content="#fcd3b7">
  84.  
  85. <meta name="image:top background" content="">
  86. <meta name="image:background" content="">
  87. <meta name="image:sidebar" content="">
  88.  
  89. <meta name="if:big posts" content="1">
  90. <meta name="if:med posts" content="0">
  91. <meta name="if:navigation style 2" content="1">
  92. <meta name="if:custom notes name" content="0">
  93. <meta name="if:photo fading" content="1">
  94. <meta name="if:monochrome posts" content="0">
  95. <meta name="if:show captions" content="1">
  96. <meta name="if:infinite scroll" content="0">
  97.  
  98. <meta name="text:link 1" content="">
  99. <meta name="text:link 2" content="">
  100. <meta name="text:link 3" content="">
  101. <meta name="text:link 4" content="">
  102. <meta name="text:link 5" content="">
  103. <meta name="text:link 6" content="">
  104. <meta name="text:link 7" content="">
  105. <meta name="text:link 8" content="">
  106. <meta name="text:link 1 URL" content="">
  107. <meta name="text:link 2 URL" content="">
  108. <meta name="text:link 3 URL" content="">
  109. <meta name="text:link 4 URL" content="">
  110. <meta name="text:link 5 URL" content="">
  111. <meta name="text:link 6 URL" content="">
  112. <meta name="text:link 7 URL" content="">
  113. <meta name="text:link 8 URL" content="">
  114. <meta name="text:custom notes title" content="">
  115.  
  116. <title>{title}</title>
  117. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  118. <link rel="shortcut icon" href="{Favicon}" />
  119.  
  120. <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  121. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  122. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  123.  
  124. <style type="text/css">
  125.  
  126. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  127.  
  128. iframe#tumblr_controls {
  129.     z-index: 100000; right:3px !important; position:fixed !important; opacity: 0.2;
  130. -webkit-transition: all 0.4s ease-in-out;
  131. -moz-transition: all 0.4s ease-in-out;
  132. -o-transition: all 0.4s ease-in-out;
  133. -ms-transition: all 0.4s ease-in-out;
  134. transition: all 0.4s ease-in-out;
  135. }
  136. iframe#tumblr_controls:hover {
  137.     opacity: 1;
  138. -webkit-transition: all 0.4s ease-in-out;
  139. -moz-transition: all 0.4s ease-in-out;
  140. -o-transition: all 0.4s ease-in-out;
  141. -ms-transition: all 0.4s ease-in-out;
  142. transition: all 0.4s ease-in-out;
  143. }
  144.  
  145. ::selection {
  146. background: {color:text highlight bg};
  147. color:{color:text highlight};
  148. }
  149.  
  150. ::-moz-selection {
  151. background: {color:text highlight bg};
  152. color:{color:text highlight};
  153. }
  154.  
  155. ::-webkit-scrollbar { width: 5px; }
  156.  
  157. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  158.  
  159. ::-webkit-scrollbar-thumb:vertical {
  160.     width: 10px;
  161.     border-radius: 100px;
  162.     -moz-border-radius: 100px;
  163.     -webkit-border-radius: 100px;
  164.     -o-border-radius: 100px;
  165.     background-color: {color:scrollbar};
  166. }
  167.  
  168. body {
  169.     background-color: {color:background};
  170.     background-image: url({image:background});
  171.     background-attachment: fixed;
  172.     margin: 0;
  173.     word-wrap: break-word;
  174. }
  175. a { text-decoration:none; }
  176.  
  177. pre {
  178.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  179.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  180.     {block:if2columns}width: 250px;{/block:if2columns}
  181.     word-wrap: break-word;
  182.     overflow: auto;
  183. }
  184.  
  185. #content {
  186.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  187.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  188.     margin: 10px 0 60px 300px;
  189.     position: relative;
  190. }
  191. .posts {
  192.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  193.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  194.     background-color: {color:post background};
  195.     padding: 10px;
  196.     margin: 20px 0;
  197.     border: 1px solid {color:post border};
  198. }
  199.  
  200. .posts img {
  201.     {block:ifbigposts}max-width: 500px;{/block:ifbigposts}
  202.     {block:ifmedposts}max-width: 400px;{/block:ifmedposts}
  203.     border: 0;
  204. }
  205. .posts blockquote img {max-width: 100%;}
  206.  
  207. .postu {
  208.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  209.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  210. }
  211.  
  212. .title {
  213.     font-family: courier new;
  214.     font-size: 12px;
  215.     letter-spacing: 5px;
  216.     text-transform: uppercase;
  217.     padding-left: 30px;
  218.     padding-top: 5px;
  219.     color: {color:post title};
  220. }
  221. .title:first-letter {
  222.     color: {color:post title first letter};
  223.     font-size: 20px;
  224.     letter-spacing: 4px;
  225. }
  226. .ltitle {
  227.     font-family: courier new;
  228.     font-size: 12px;
  229.     letter-spacing: 5px;
  230.     text-transform: uppercase;
  231.     padding-left: 30px;
  232.     padding-top: 5px;
  233.     color: {color:link post title};
  234. -webkit-transition: all 0.4s ease-in-out;
  235. -moz-transition: all 0.4s ease-in-out;
  236. -o-transition: all 0.4s ease-in-out;
  237. -ms-transition: all 0.4s ease-in-out;
  238. transition: all 0.4s ease-in-out;
  239. }
  240. .ltitle:hover { color: {color:link post title hover};}
  241.  
  242. blockquote {
  243.     border-left: 3px solid {color:blockquote};
  244.     padding-left: 10px;
  245.     margin-left: 10px;
  246. }
  247. .text {
  248.     font-family: calibri;
  249.     font-size: 12px;
  250.     color: {color:body};
  251. }
  252. .text ul {list-style-type: square;}
  253. .text b,strong { color: {color:body bold};}
  254. .text i,em { color: {color:body italic};}
  255. .text a, .src a, .permalinkpg a {
  256.     color: {color:body links};
  257.     border-bottom: 1px solid transparent;
  258. -webkit-transition: all 0.4s ease-in-out;
  259. -moz-transition: all 0.4s ease-in-out;
  260. -o-transition: all 0.4s ease-in-out;
  261. -ms-transition: all 0.4s ease-in-out;
  262. transition: all 0.4s ease-in-out;}
  263. .text a:hover, .src a:hover, .permalinkpg a:hover {
  264.     color: {color:body links hover};
  265.     border-bottom: 1px solid {color:body links};
  266. }
  267.  
  268. .quote {
  269.     font-family: courier new;
  270.     font-size: 12px;
  271.     text-align: right;
  272.     color: {color:post title};
  273. }
  274. .src {
  275.     margin-top: -10px;
  276.     font-family: calibri;
  277.     font-size: 12px;
  278.     color: {color:body};
  279.     text-align: right;
  280. }
  281. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;color:{color:chat odd text};}
  282. .even .line {background-color: {color:chat even background};padding: 3px 5px;color:{color:chat even text};}
  283. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  284. .even .name {color: {color:chat even name};padding: 3px 5px;}
  285.  
  286. #album {
  287.     width: 80px;
  288.     height: 80px;
  289.     background-color: #888;
  290.     overflow: hidden;
  291. }
  292. .noalbum {
  293.     width: 80px;
  294.     height: 80px;
  295.     background-color: #888;
  296.     z-index: 50;
  297. }
  298. .albumart {
  299.     width: 80px;
  300.     height: 80px;
  301.     z-index: 50;
  302. }  
  303. .aud {
  304.     width: 25px;
  305.     height: 25px;
  306.     border-radius: 100px;
  307.     opacity: 0.6;
  308.     overflow: hidden;
  309.     margin: 25px 0 0 25px;
  310.     position: absolute;
  311. -webkit-transition: all 0.4s ease-in-out;
  312. -moz-transition: all 0.4s ease-in-out;
  313. -o-transition: all 0.4s ease-in-out;
  314. -ms-transition: all 0.4s ease-in-out;
  315. transition: all 0.4s ease-in-out;
  316. }
  317. .aud:hover {
  318.     opacity: 1;
  319. -webkit-transition: all 0.4s ease-in-out;
  320. -moz-transition: all 0.4s ease-in-out;
  321. -o-transition: all 0.4s ease-in-out;
  322. -ms-transition: all 0.4s ease-in-out;
  323. transition: all 0.4s ease-in-out;
  324. }
  325. .info {
  326.     background-color: {color:audio info bg};
  327.     color: {color:audio info text};
  328.     text-transform: uppercase;
  329.     padding: 0 10px;
  330.     font-family: consolas;
  331.     {block:ifbigposts}width: 400px;{/block:ifbigposts}
  332.     {block:ifmedposts}width: 300px;{/block:ifmedposts}
  333.     font-size: 10px;
  334.     line-height:20px;
  335. -webkit-transition: all 0.4s ease-in-out;
  336. -moz-transition: all 0.4s ease-in-out;
  337. -o-transition: all 0.4s ease-in-out;
  338. -ms-transition: all 0.4s ease-in-out;
  339. transition: all 0.4s ease-in-out;
  340. }
  341. .info b,strong {color: {color:body bold};}
  342. .information {
  343.     position: absolute;
  344.     margin: 0 80px;
  345. }
  346.  
  347. .question {
  348.     font-family: calibri, arial;
  349.     padding: 5px 10px;
  350.     font-size: 12px;
  351.     color: {color:ask text};
  352.     background-color: {color:ask bg};
  353. }
  354. .asker {
  355.     font-family: economica;
  356.     font-size: 16px;
  357.     letter-spacing: 1px;
  358.     padding-left: 10px;
  359.     line-height: 16px;
  360.     text-transform: uppercase;
  361.     margin-top: 5px;
  362. }
  363. .asker a {
  364.     color: {color:body links};
  365. -webkit-transition: all 0.4s ease-in-out;
  366. -moz-transition: all 0.4s ease-in-out;
  367. -o-transition: all 0.4s ease-in-out;
  368. -ms-transition: all 0.4s ease-in-out;
  369. transition: all 0.4s ease-in-out;
  370. }
  371. .asker a:hover {color:{color:body links hover};}
  372. .askerpic {
  373.     width: 16px;
  374.     height: 16px;
  375.     margin-left: 30px;
  376. }
  377. .tri {
  378.     font-size: 30px;
  379.     position: absolute;
  380.     margin-top: -10px;
  381.     color: {color:ask bg};
  382. }
  383.  
  384. #notecontainer {
  385.     padding: 10px;
  386.     text-decoration: none;
  387.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  388.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  389. }
  390.  
  391. #notecontainer ol.notes {
  392.     list-style-type: none;
  393.     letter-spacing: -1px;
  394.     font-size: 11px;
  395.     color: {color:body};
  396.     font-family: consolas;
  397.     text-decoration: none;
  398.     margin: 0;
  399.     width: 500px;
  400.     padding: 5px;
  401.     text-align: left;
  402. }
  403. #notecontainer ol.notes a {color: {color:body links};
  404. -webkit-transition: all 0.5s ease-in-out;
  405. -moz-transition: all 0.5s ease-in-out;
  406. -o-transition: all 0.5s ease-in-out;
  407. -ms-transition: all 0.5s ease-in-out;
  408. transition: all 0.5s ease-in-out;}
  409. #notecontainer ol.notes a:hover {color: {color:body links hover};}
  410. #notecontainer img.avatar {
  411.     margin-right: 5px;
  412.     width: 10px;
  413.     height: 10px;
  414. }
  415.  
  416. .permalinkpg {
  417.     text-align: right;
  418.     border-top: 1px dashed {color:body bold};
  419.     border-bottom: 1px dashed {color:body bold};
  420.     margin-top: 10px;
  421.     font-family: courier new;
  422.     font-size: 10px;
  423.     padding: 10px;
  424.     color: {color:body};
  425. }
  426. .permalinkpg a {color:{color:body links};}
  427. .permalinkpg a:hover {color:{color:body links hover};}
  428.  
  429. #sky {
  430.     width: 100%;
  431.     position: fixed;
  432.     left: 0;
  433.     margin-top: 130px;
  434.     height: 50px;
  435.     background-color: {color:middle stripe bg};
  436.     {block:ifbigposts}padding-left: 850px;{/block:ifbigposts}
  437.     {block:ifmedposts}padding-left: 750px;{/block:ifmedposts}
  438.     font-family: economica;
  439.     text-transform: uppercase;
  440.     color: {color:blog title};
  441.     line-height: 50px;
  442.     font-size: 30px;
  443. }
  444.  
  445. #sidebar {
  446.     width: 200px;
  447.     height: 200px;
  448.     position: fixed;
  449.     padding: 10px;
  450.     margin: 50px 40px;
  451.     border-radius: 250px;
  452.     background-color: {color:sidebar background};
  453.     border: 1px solid {color:sidebar border};
  454.     z-index: 1000;
  455. }
  456.  
  457. .sbpic {
  458.     width: 200px;
  459.     height: 200px;
  460.     position: absolute;
  461.     display:block;
  462.     border-radius: 250px;
  463. -webkit-transition: all 0.8s ease-in-out;
  464. -moz-transition: all 0.8s ease-in-out;
  465. -o-transition: all 0.8s ease-in-out;
  466. -ms-transition: all 0.8s ease-in-out;
  467. transition: all 0.8s ease-in-out;
  468. }
  469.  
  470. #sidebar:hover .sbpic {
  471.     transform: rotate(5deg);
  472.     -moz-transform: rotate(5deg);
  473.     -webkit-transform: rotate(5deg);
  474.     -o-transform: rotate(5deg);
  475.     opacity: 0;
  476. }
  477.  
  478. .desc {
  479.     position: relative;
  480.     width: 190px;
  481.     height: 120px;
  482.     overflow: auto;
  483.     text-align: center;
  484.     font-family: calibri;
  485.     font-size: 10px;
  486.     margin: 40px 5px;
  487.     opacity: 0;
  488.     color: {color:desc text};
  489. -webkit-transition: all 0.8s ease-in-out;
  490. -moz-transition: all 0.8s ease-in-out;
  491. -o-transition: all 0.8s ease-in-out;
  492. -ms-transition: all 0.8s ease-in-out;
  493. transition: all 0.8s ease-in-out;
  494. }
  495. .desc a { color: {color:desc links};
  496. -webkit-transition: all 0.4s ease-in-out;
  497. -moz-transition: all 0.4s ease-in-out;
  498. -o-transition: all 0.4s ease-in-out;
  499. -ms-transition: all 0.4s ease-in-out;
  500. transition: all 0.4s ease-in-out;
  501. }
  502. .desc a:hover {
  503.     color:{color:desc links hover};
  504. }
  505. .desc b,strong { color: {color:desc bold}; }
  506. .desc i,em { color: {color:desc italic}; }
  507.  
  508. #sidebar:hover .desc {opacity: 1;}
  509.  
  510.  
  511. #nav {
  512.     position: fixed;
  513.     top: 305px;
  514.     left: 40px;
  515. }
  516.  
  517. #basicnav {margin-left:40px;position:absolute;}
  518.  
  519. .basicnavpixel {
  520.     width: 25px;
  521.     height: 25px;
  522.     text-align: center;
  523.     line-height: 25px;
  524.     display: block;
  525.     opacity: 0.5;
  526.     color: {color:nav icons};
  527. }
  528.  
  529. .basicnavpixel:hover {
  530.     color: {color:nav icons hover};
  531. -webkit-transition: all 0.4s ease-in-out;
  532. -moz-transition: all 0.4s ease-in-out;
  533. -o-transition: all 0.4s ease-in-out;
  534. -ms-transition: all 0.4s ease-in-out;
  535. transition: all 0.4s ease-in-out;
  536. }
  537.    
  538.  
  539. #ichi {
  540.     position: absolute;
  541.     margin-top: 46px;
  542. }
  543. .storm {
  544.     background-color: {color:nav border};
  545.     height: 50px;
  546.     width: 3px;
  547.     margin-left: 15px;
  548. -webkit-transition: all 0.4s ease-in-out;
  549. -moz-transition: all 0.4s ease-in-out;
  550. -o-transition: all 0.4s ease-in-out;
  551. -ms-transition: all 0.4s ease-in-out;
  552. transition: all 0.4s ease-in-out;
  553. }
  554. .uri {
  555.     border-radius: 100px;
  556.     padding: 3px;
  557.     {block:ifnotnavigationstyle2}
  558.     background-color: {color:nav background};
  559.     {/block:ifnotnavigationstyle2}
  560.     {block:ifnavigationstyle2}
  561.     background-color: {color:nav border};
  562.     {/block:ifnavigationstyle2}
  563.     {block:ifnotnavigationstyle2}
  564.     border: 1px solid {color:nav border};
  565.     {/block:ifnotnavigationstyle2}
  566.     {block:ifnavigationstyle2}
  567.     border: 1px solid {color:nav background};
  568.     {/block:ifnavigationstyle2}
  569. }
  570.  
  571. #ni {
  572.     position: absolute;
  573.     margin-top: 46px;
  574.     margin-left: 30px;
  575. }
  576. .rain {
  577.     background-color: {color:nav border};
  578.     height: 110px;
  579.     width: 3px;
  580.     margin-left: 15px;
  581. -webkit-transition: all 0.4s ease-in-out;
  582. -moz-transition: all 0.4s ease-in-out;
  583. -o-transition: all 0.4s ease-in-out;
  584. -ms-transition: all 0.4s ease-in-out;
  585. transition: all 0.4s ease-in-out;
  586. }
  587. .jiro {
  588.     border-radius: 100px;
  589.     padding: 3px;
  590.     {block:ifnotnavigationstyle2}
  591.     background-color: {color:nav background};
  592.     {/block:ifnotnavigationstyle2}
  593.     {block:ifnavigationstyle2}
  594.     background-color: {color:nav border};
  595.     {/block:ifnavigationstyle2}
  596.     {block:ifnotnavigationstyle2}
  597.     border: 1px solid {color:nav border};
  598.     {/block:ifnotnavigationstyle2}
  599.     {block:ifnavigationstyle2}
  600.     border: 1px solid {color:nav background};
  601.     {/block:ifnavigationstyle2}
  602. }
  603.  
  604. #san {
  605.     position: absolute;
  606.     margin-top: 46px;
  607.     margin-left: 60px;
  608. }
  609. .cloud {
  610.     background-color: {color:nav border};
  611.     height: 30px;
  612.     width: 3px;
  613.     margin-left: 15px;
  614. -webkit-transition: all 0.4s ease-in-out;
  615. -moz-transition: all 0.4s ease-in-out;
  616. -o-transition: all 0.4s ease-in-out;
  617. -ms-transition: all 0.4s ease-in-out;
  618. transition: all 0.4s ease-in-out;
  619. }
  620. .roll {
  621.     border-radius: 100px;
  622.     padding: 3px;
  623.     {block:ifnotnavigationstyle2}
  624.     background-color: {color:nav background};
  625.     {/block:ifnotnavigationstyle2}
  626.     {block:ifnavigationstyle2}
  627.     background-color: {color:nav border};
  628.     {/block:ifnavigationstyle2}
  629.     {block:ifnotnavigationstyle2}
  630.     border: 1px solid {color:nav border};
  631.     {/block:ifnotnavigationstyle2}
  632.     {block:ifnavigationstyle2}
  633.     border: 1px solid {color:nav background};
  634.     {/block:ifnavigationstyle2}
  635. }
  636.  
  637. #yon {
  638.     position: absolute;
  639.     margin-top: 46px;
  640.     margin-left: 90px;
  641. }
  642. .sun {
  643.     background-color: {color:nav border};
  644.     height: 80px;
  645.     width: 3px;
  646.     margin-left: 15px;
  647. -webkit-transition: all 0.4s ease-in-out;
  648. -moz-transition: all 0.4s ease-in-out;
  649. -o-transition: all 0.4s ease-in-out;
  650. -ms-transition: all 0.4s ease-in-out;
  651. transition: all 0.4s ease-in-out;
  652. }
  653. .garyuu {
  654.     border-radius: 100px;
  655.     padding: 3px;
  656.     {block:ifnotnavigationstyle2}
  657.     background-color: {color:nav background};
  658.     {/block:ifnotnavigationstyle2}
  659.     {block:ifnavigationstyle2}
  660.     background-color: {color:nav border};
  661.     {/block:ifnavigationstyle2}
  662.     {block:ifnotnavigationstyle2}
  663.     border: 1px solid {color:nav border};
  664.     {/block:ifnotnavigationstyle2}
  665.     {block:ifnavigationstyle2}
  666.     border: 1px solid {color:nav background};
  667.     {/block:ifnavigationstyle2}
  668. }
  669.  
  670. #ichi:hover .storm,#ni:hover .rain,#san:hover .cloud, #yon:hover .sun {
  671.     padding-top: 10px;
  672. }
  673.  
  674. #basicnavi {
  675.     margin-top: 45px;
  676.     margin-left: -20px;
  677.     position: fixed;
  678. }
  679.  
  680. .basicnavp {
  681.     background-color: {color:nav background};
  682.     margin: 0 5px;
  683.     width: 25px;
  684.     height: 25px;
  685.     text-align: center;
  686.     line-height: 25px;
  687.     float: left;
  688.     color: {color:nav icons};
  689.     border: 1px solid transparent;
  690. -webkit-transition: all 0.4s ease-in-out;
  691. -moz-transition: all 0.4s ease-in-out;
  692. -o-transition: all 0.4s ease-in-out;
  693. -ms-transition: all 0.4s ease-in-out;
  694. transition: all 0.4s ease-in-out;
  695. }
  696.  
  697. .basicnavp:hover {
  698.     color: {color:nav icons hover};
  699.     background-color: #fff;
  700.     padding-top: 20px;
  701.     border-left: 1px solid {color:nav background};
  702.     border-bottom: 1px solid {color:nav background};
  703.     border-right: 1px solid {color:nav background};
  704. }
  705.  
  706. #permalink {
  707.     position: absolute;
  708.     margin-top: 5px;
  709. }
  710. .perma {
  711.     background-color: {color:perma bg};
  712.     color: {color:perma text};
  713.     font-family: consolas;
  714.     font-size: 9px;
  715.     padding: 0 3px;
  716.     text-transform: uppercase;
  717.     float: left;
  718.     margin: 0 5px;
  719. -webkit-transition: all 0.4s ease-in-out;
  720. -moz-transition: all 0.4s ease-in-out;
  721. -o-transition: all 0.4s ease-in-out;
  722. -ms-transition: all 0.4s ease-in-out;
  723. transition: all 0.4s ease-in-out;
  724. }
  725. .perma:hover {padding: 0 10px;}
  726. .perma a {
  727.     color: {color:perma text};
  728. }
  729.  
  730. #pagination {
  731.     position: fixed;
  732.     font-family: source code pro;
  733.     font-size: 10px;
  734.     color: #888;
  735.     top: 210px;
  736.     left: 850px;
  737. }
  738. .jump_page {
  739.     padding: 4px 6px;
  740.     text-align: center;
  741. -webkit-transition: all 0.5s ease-in-out;
  742. -moz-transition: all 0.5s ease-in-out;
  743. -o-transition: all 0.5s ease-in-out;
  744. -ms-transition: all 0.5s ease-in-out;
  745. transition: all 0.5s ease-in-out;
  746.     background-color: {color:pagination bg 2};
  747.     color: {color:pagination text 2};
  748. }
  749. .current_page {
  750.     padding: 4px 6px;
  751.     text-align: center;
  752. -webkit-transition: all 0.5s ease-in-out;
  753. -moz-transition: all 0.5s ease-in-out;
  754. -o-transition: all 0.5s ease-in-out;
  755. -ms-transition: all 0.5s ease-in-out;
  756. transition: all 0.5s ease-in-out;
  757.     background-color: {color:pagination bg 1};
  758.     color: {color:pagination text 1};
  759. }
  760. .jump_page:hover {
  761.     background-color: {color:pagination bg 1};
  762.     color: {color:pagination text 1};
  763. }
  764.  
  765. #top {
  766.     top: 0;
  767.     left: 0;
  768.     width: 100%;
  769.     height: 160px;
  770.     position: fixed;
  771.     background-image: url({image:top background});
  772. }
  773.  
  774. #warning {
  775.     position: fixed;
  776.     width: 100%;
  777.     height:100%;
  778.     background-color: #fff;
  779.     z-index:-1000000;
  780.     top:0;
  781.     left: 0;
  782.     text-align: center;
  783.     padding-top: 250px;
  784.     font-family: economica;
  785.     font-size: 26px;
  786.     opacity: 0;
  787.     {block:ifbigposts}
  788.     {block:ifmedposts}opacity:1;z-index:1000000;{/block:ifmedposts}
  789.     {/block:ifbigposts}
  790.     {block:ifnotbigposts}{block:ifnotmedposts}
  791.     opacity:1;z-index:1000000;
  792.     {/block:ifnotmedposts}{/block:ifnotbigposts}
  793. }
  794.  
  795. .postu {
  796.     {block:ifbigposts}width: 500px;{/block:ifbigposts}
  797.     {block:ifmedposts}width: 400px;{/block:ifmedposts}
  798.     display:block;
  799.     {block:ifphotofading}
  800.     opacity: 0.8;
  801.     {/block:ifphotofading}
  802. -webkit-transition: all 0.4s ease-in-out;
  803. -moz-transition: all 0.4s ease-in-out;
  804. -o-transition: all 0.4s ease-in-out;
  805. -ms-transition: all 0.4s ease-in-out;
  806. transition: all 0.4s ease-in-out;
  807.     {block:IfMonochromePosts}
  808. 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 3.5+ */
  809. filter: gray; /* IE6-9 */
  810. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  811. -webkit-transition: all 0.7s linear;
  812. -moz-transition: all 0.7s linear;
  813. -o-transition: all 0.7s linear;
  814.     {/block:IfMonochromePosts}
  815. }
  816. .posts:hover .postu {
  817.     {block:IfMonochromePosts}
  818.     filter: none;
  819.     -webkit-filter: grayscale(0%);  
  820.     {/block:IfMonochromePosts}
  821.     {block:ifphotofading}
  822.     opacity: 1;
  823.     {/block:ifphotofading}
  824. }
  825.  
  826. {CustomCSS}    
  827.  
  828. </style>
  829.  
  830. {block:Ifinfinitescroll}
  831. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j(“img”).lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  832. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  833. {/block:IfInfiniteScroll}
  834.  
  835. </head>
  836. <body>
  837.  
  838. <div id="warning">Please pick only 1 post size.</div>
  839.  
  840. <div id="top"></div>
  841.  
  842. <div id="sky">{title}</div>
  843.  
  844. {block:Ifnotinfinitescroll}
  845. <div id="pagination">{block:pagination}
  846.             {block:PreviousPage}
  847.                 <a href="{PreviousPage}" class="jump_page">←</a>
  848.             {/block:PreviousPage}
  849.  
  850.             {block:JumpPagination length="7"}
  851.                 {block:CurrentPage}
  852.                     <span class="current_page">✗</span>
  853.                 {/block:CurrentPage}
  854.  
  855.                 {block:JumpPage}
  856.                     <a class="jump_page" href="{URL}">{PageNumber}</a>
  857.                 {/block:JumpPage}
  858.             {/block:JumpPagination}
  859.  
  860.             {block:NextPage}
  861.                 <a href="{NextPage}" class="jump_page">→</a>
  862.             {/block:NextPage}
  863. {/block:pagination}</div><!--pagination-->
  864. {/block:Ifnotinfinitescroll}
  865.  
  866. <div id="sidebar">
  867.  
  868. <img class="sbpic" src="{image:sidebar}">
  869.  
  870. <div class="desc">{description}</div>
  871.  
  872. <center><div id="nav"><select style="width: 220px; border: 1px solid {color:drop down menu border}; padding: 3px; color: {color:drop down menu text}; background-color: {color:drop down menu bg};  font-family: source code pro;text-transform: uppercase; font-size: 8px; letter-spacing: 1px;" onChange="location.href=this.options[this.selectedIndex].value;">
  873. <option value="/">NAVIGATION</option>
  874. {block:Iflink1}<option value="{text:Link 1 URL}">{text:Link 1}</option>{/block:Iflink1}
  875. {block:Iflink2}<option value="{text:Link 2 URL}">{text:Link 2}</option>{/block:Iflink2}
  876. {block:Iflink3}<option value="{text:Link 3 URL}">{text:Link 3}</option>{/block:Iflink3}
  877. {block:Iflink4}<option value="{text:Link 4 URL}">{text:Link 4}</option>{/block:Iflink4}
  878. {block:Iflink5}<option value="{text:Link 5 URL}">{text:Link 5}</option>{/block:Iflink5}
  879. {block:Iflink6}<option value="{text:Link 6 URL}">{text:Link 6}</option>{/block:Iflink6}
  880. {block:Iflink7}<option value="{text:Link 7 URL}">{text:Link 7}</option>{/block:Iflink7}
  881. {block:Iflink8}<option value="{text:Link 8 URL}">{text:Link 8}</option>{/block:Iflink8}
  882. </select></div></center>
  883.  
  884. <div id="basicnav">
  885.  
  886. {block:ifnavigationstyle2}
  887.  
  888. <div id="basicnavi">
  889.  
  890. <a href="/"><div class="basicnavp"><span class="fa fa-home"></div></a>
  891.  
  892. <a href="/ask"><div class="basicnavp"><span class="fa fa-envelope"></div></a>
  893.  
  894. <a href="/archive"><div class="basicnavp"><span class="fa fa-calendar"></div></a>
  895.  
  896. <a href="http://yukoki.tumblr.com/"><div class="basicnavp"><span class="fa fa-paperclip"></div></a>
  897. </div><!--basicnav-->
  898.  
  899. {/block:ifnavigationstyle2}
  900.  
  901. {block:ifnotnavigationstyle2}
  902. <div id="ichi">
  903. <a href="/"><div class="storm"></div>
  904. <div class="uri"><div class="basicnavpixel"><span class="fa fa-home"></span></div></div>
  905. </a></div><!--ichi-->
  906.  
  907. <div id="ni">
  908. <a href="/ask"><div class="rain"></div>
  909. <div class="jiro"><div class="basicnavpixel"><span class="fa fa-envelope"></span></div></div>
  910. </a></div><!--ni-->
  911.  
  912. <div id="san">
  913. <a href="/archive"><div class="cloud"></div>
  914. <div class="roll"><div class="basicnavpixel"><span class="fa fa-calendar"></span></div></div>
  915. </a></div><!--san-->
  916.  
  917. <div id="yon">
  918. <a href="http://yukoki.tumblr.com"><div class="sun"></div>
  919. <div class="garyuu"><div class="basicnavpixel"><span class="fa fa-paperclip"></span></div></div>
  920. </a></div><!--yon-->
  921.  
  922. {/block:ifnotnavigationstyle2}
  923.  
  924. </div><!--basicnav-->
  925.  
  926. </div><!--sidebar-->
  927.  
  928. <div id="content">
  929. {block:Posts}<div class="posts">
  930.  
  931. {block:Photo}
  932. {LinkOpenTag}<div class="postu">
  933. {block:ifbigposts}<center><img src="{PhotoURL-500}" /></center>{/block:ifbigposts}
  934. {block:ifmedposts}<center><img src="{PhotoURL-400}" /></center>{/block:ifmedposts}
  935. </div>
  936. {LinkCloseTag}
  937. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  938. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  939. <div class="text">{Caption}</div>
  940. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  941. {/block:Photo}
  942.  
  943. {block:Photoset}
  944. <div class="postu">
  945. {block:ifbigposts}{Photoset-500}{/block:ifbigposts}
  946. {block:ifmedposts}{Photoset-400}{/block:ifmedposts}
  947. </div>
  948. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  949. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  950. <div class="text">{Caption}</div>
  951. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  952. {/block:Photoset}
  953.  
  954. {block:Video}
  955. <div class="postu">
  956. {block:ifbigposts}{Video-500}{/block:ifbigposts}
  957. {block:ifmedposts}{Video-400}{/block:ifmedposts}
  958. </div>
  959. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  960. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  961. <div class="text">{Caption}</div>
  962. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  963. {/block:Video}
  964.  
  965. {block:Audio}
  966. <div class="information">
  967. <div class="info"><b>TRACK NAME:</b> {block:TrackName}{TrackName}{/block:TrackName}</div>
  968. <div class="info"><b>ALBUM TITLE:</b> {block:Album}{Album}{/block:Album}</div>
  969. <div class="info"><b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}</div>
  970. <div class="info"><b>TIMES PLAYED:</b> {PlayCountWithLabel}</div>
  971. </div>
  972. <div class="aud">{AudioPlayerWhite}</div>
  973. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  974. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  975. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  976. <div class="text">{Caption}</div>
  977. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  978. {/block:Audio}
  979.  
  980. {block:Quote}
  981. <div class="quote">“{Quote}”</div>
  982. {block:Source}<br><div class="src">- {Source}</div>{/block:Source}
  983. {/block:Quote}
  984.  
  985. {block:Text}
  986. {block:Title}<div class="title">{Title}</div>{/block:Title}
  987. <div class="text">{body}</div>
  988. {/block:Text}
  989.  
  990. {block:Answer}
  991. <div class="question">{Question}</div>
  992. <div class="asker"><span class="tri">◥</span><img class="askerpic" src="{AskerPortraitURL-16}">{Asker}</div>
  993. <div class="text">{answer}</div>
  994. {/block:Answer}
  995.  
  996. {block:Chat}
  997. {block:Title}<div class="title">{Title}</div>{/block:Title}
  998. <div class="text">
  999. {block:Lines}<div class="{Alt}">
  1000. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1001. {/block:Lines}
  1002. </div>
  1003. {/block:Chat}
  1004.  
  1005. {block:Link}
  1006. <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
  1007. {block:Description}<div class="text">{description}</div>{/block:Description}
  1008. {/block:Link}
  1009.  
  1010. {block:indexpage}
  1011. <div id="permalink">
  1012. <a href="{permalink}">{block:date}<div class="perma">{timeago}</div>{/block:date}</a>
  1013. <a href="{permalink}"><div class="perma">{block:ifcustomnotesname}{NoteCount} {text:custom notes title}{/block:ifcustomnotesname}{block:ifnotcustomnotesname}{NoteCountWithLabel}{/block:ifnotcustomnotesname}</div></a>
  1014. {block:RebloggedFrom}<a href="{ReblogRootURL}"><div class="perma">src</div></a>{/block:RebloggedFrom}
  1015. </div><!--permalink-->
  1016. {/block:indexpage}
  1017.  
  1018. {block:permalinkpage}
  1019.  
  1020. <div class="permalinkpg">
  1021. Posted at {block:date}{12hour}.{minutes}{ampm}, on {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}{/block:date}{block:notecount}, with {notecountwithlabel}{/block:notecount}.<br>
  1022. {block:RebloggedFrom}Originally by <a href="{reblogrooturl}">{reblogrootname}</a>, reblogged via <a href="{reblogparenturl}">{reblogparentname}</a>.{/block:rebloggedfrom}<br>
  1023. {block:HasTags}
  1024. {block:tags}<a href="{tagurl}">#{tag} {/block:tags}
  1025. {/block:HasTags}
  1026. </div><!--permalinkpg-->
  1027.  
  1028. {block:PostNotes}
  1029. <div id="notecontainer">{PostNotes}</div>
  1030. {/block:PostNotes}
  1031.  
  1032. {/block:permalinkpage}
  1033.  
  1034. </div><!--posts-->{/block:Posts}
  1035.  
  1036. {block:ContentSource}
  1037. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1038. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1039. {/block:SourceLogo}
  1040. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1041. {/block:ContentSource}
  1042.  
  1043. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1044.  
  1045. </div><!--content-->
  1046.  
  1047. </body>
  1048. </html>
RAW Paste Data
Top