API tools faq
paste
Advertisement
mogimochi

Theme [26] Hotaru

mogimochi
Jul 27th, 2013
23,407
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.73 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!