API tools faq
paste
Advertisement
mogimochi

Theme [16] Epiphany

mogimochi
Dec 25th, 2012
35,166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. :: CODE PACK #09 EPISKEY ::
  8.  
  9. Theme 16 Epiphany
  10. by yukoki/s-ekki
  11.  
  12. 1. Light/Heavy CSS editting is allowed.
  13. 2. Do not use as base code.
  14. 3. Do not remove credit.
  15. 4. Do not claim theme as your own.
  16. 5. Do not redistribute.
  17.  
  18. ++ [YUKOKI 2012 THEMES' REVAMPS] ++ [YUKOKI REVAMP PACK #09] ++
  19. This theme is unlikely to be further edited or updated, & its preview will also be moved to a static page. It's similar to being labeled as an 'old theme'. This theme's first title was 'Cloud'.
  20.  
  21. --------------------------------------------------- UPDATE VER 140717 -->
  22.  
  23. <meta name="color:scrollbar" content="#ffffff">
  24. <meta name="color:scrollbar bg" content="#4a8fa1">
  25. <meta name="color:text highlight" content="#5ac9e1">
  26. <meta name="color:tooltips background" content="#2b505e">
  27. <meta name="color:tooltips text" content="#ffffff">
  28. <meta name="color:background" content="#ffffff">
  29. <meta name="color:header background" content="#000000">
  30.  
  31. <meta name="color:blog title" content="#ffffff">
  32. <meta name="color:navigation icon" content="#ffffff">
  33. <meta name="color:desc background" content="#f3f3f3">
  34. <meta name="color:desc bottom border" content="#80c0cc">
  35. <meta name="color:desc text" content="#8f8f8f">
  36. <meta name="color:desc bold" content="#4c90a1">
  37. <meta name="color:desc italic" content="#a7ced6">
  38. <meta name="color:desc links" content="#bebebe">
  39. <meta name="color:desc links hover" content="#606060">
  40. <meta name="color:custom links text" content="#929292">
  41. <meta name="color:custom links background" content="#ededed">
  42. <meta name="color:custom links text hover" content="#ffffff">
  43. <meta name="color:custom links background hover" content="#559bab">
  44.  
  45. <meta name="color:body text" content="#000000">
  46. <meta name="color:body bold" content="#5095a6">
  47. <meta name="color:body italic" content="#a7ced6">
  48. <meta name="color:body links" content="#b3b3b3">
  49. <meta name="color:body links hover" content="#868686">
  50. <meta name="color:blockquote" content="#e9f2f2">
  51. <meta name="color:text post title" content="#4d92a3">
  52. <meta name="color:text post title background" content="#f7f7f7">
  53. <meta name="color:link post title" content="#4d92a3">
  54. <meta name="color:link post title background" content="#f7f7f7">
  55. <meta name="color:quote post" content="#7a7a7a">
  56. <meta name="color:quote post quotation marks" content="#84DBCA">
  57. <meta name="color:ask icon background" content="#f8f8f8">
  58. <meta name="color:ask icon lines" content="#87c7d7">
  59. <meta name="color:ask text" content="#898989">
  60. <meta name="color:asker" content="#82b4c1">
  61. <meta name="color:asker hover" content="#aaaaaa">
  62. <meta name="color:audio info background" content="#f6f6f6">
  63. <meta name="color:chat even name" content="#4a8fa1">
  64. <meta name="color:chat even text" content="#5a5a5a">
  65. <meta name="color:chat odd name" content="#a7ced6">
  66. <meta name="color:chat odd text" content="#686868">
  67. <meta name="color:permalink background" content="#f1f1f1">
  68. <meta name="color:permalink text" content="#555555">
  69. <meta name="color:permalink hovered border" content="#a7ced6">
  70. <meta name="color:permalink src text" content="#888888">
  71. <meta name="color:permalink src background" content="#fafafa">
  72. <meta name="color:permalink action text" content="#333333">
  73. <meta name="color:permalink action background" content="#f1f1f1">
  74. <meta name="color:tags" content="#929191">
  75. <meta name="color:tags hover" content="#222222">
  76. <meta name="color:pagination text" content="#f1f1f1">
  77. <meta name="color:pagination links background" content="#5195a6">
  78. <meta name="color:pagination links" content="#ffffff">
  79. <meta name="color:pagination links background hover" content="#f7f7f7">
  80. <meta name="color:pagination links hover" content="#aaaaaa">
  81.  
  82. <meta name="image:sidebar" content="">
  83. <meta name="image:background" content="">
  84. <meta name="image:header background" content="">
  85.  
  86. <meta name="if:full size header image" content="0">
  87. <meta name="if:small posts" content="0">
  88. <meta name="if:show captions" content="1">
  89. <meta name="if:infinite scroll" content="0">
  90. <meta name="if:photo fading" content="0">
  91. <meta name="if:monochrome posts" content="0">
  92. <meta name="if:hovered permalink" content="1">
  93. <meta name="if:visible tags" content="1">
  94. <meta name="if:visible like and reblog buttons" content="1">
  95. <meta name="if:post background translucency" content="1">
  96.  
  97. <meta name="text:link 1" content="">
  98. <meta name="text:link 1 URL" content="">
  99. <meta name="text:link 2" content="">
  100. <meta name="text:link 2 URL" content="">
  101. <meta name="text:link 3" content="">
  102. <meta name="text:link 3 URL" content="">
  103. <meta name="text:link 4" content="">
  104. <meta name="text:link 4 URL" content="">
  105. <meta name="text:link 5" content="">
  106. <meta name="text:link 5 URL" content="">
  107. <meta name="text:link 6" content="">
  108. <meta name="text:link 6 URL" content="">
  109. <meta name="text:link 7" content="">
  110. <meta name="text:link 7 URL" content="">
  111. <meta name="text:link 8" content="">
  112. <meta name="text:link 8 URL" content="">
  113.  
  114. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  115. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  116. <link rel="shortcut icon" href="{Favicon}" />
  117.  
  118. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  119. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  120. <script>
  121. (function($){
  122. $(document).ready(function(){
  123. $("a[title]").style_my_tooltips({
  124. tip_follows_cursor:true,
  125. tip_delay_time:0,
  126. tip_fade_speed:400,
  127. attribute:"title"
  128. });
  129. });
  130. })(jQuery);
  131. </script>
  132.  
  133. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  134.  
  135. {block:indexpage}
  136. {block:ifinfinitescroll}
  137. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  138. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  139. <script type="text/javascript" charset="utf-8">
  140. var $j = jQuery.noConflict();
  141. $j(function() {
  142. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  143. $j("img").lazyload({
  144. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  145. effect: "fadeIn",
  146. });
  147. });
  148. </script>
  149. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  150. {/block:ifinfinitescroll}
  151. {/block:indexpage}
  152.  
  153. <style type="text/css">
  154.  
  155. @font-face { font-family: "saniretro"; src:url(https://dl.dropboxusercontent.com/s/mcaqu9nnehiwi18/Saniretro.ttf);}
  156.  
  157. #s-m-t-tooltip {
  158. padding: 3px 5px;
  159. margin: 20px 14px 7px 10px;
  160. background-color: {color:tooltips background}; /* change the background color */
  161. font-family: consolas; /* change the font */
  162. font-size: 8px; /* change the font size */
  163. letter-spacing: 1px; /* change the letter spacing */
  164. text-transform: uppercase; /* can be uppercase, lowercase, none*/
  165. color: {color:tooltips text}; /* change the text color */
  166. z-index: 10000000000000000;
  167. }
  168.  
  169. .tmblr-lightbox {background-color:rgba(255,255,255,0.9)!important;}
  170. .tmblr-lightbox img { opacity:0;padding: 10px;
  171. border: 1px solid #ddd; }
  172. .lightbox-image {
  173. opacity: 1!important;
  174. box-shadow: 0 0 0 transparent!important;
  175. border-radius: 0!important;
  176. -moz-border-radius: 0!important;
  177. -webkit-border-radius: 0!important;
  178. -o-border-radius: 0!important;
  179. padding: 10px!important;
  180. border: 1px solid #ddd!important;
  181. background-color: #fff!important;
  182. }
  183. .lightbox-caption {
  184. color: #aaa!important;
  185. font-family: calibri!important;
  186. font-size: 12px!important;
  187. margin-top: 30px!important;
  188. text-shadow: 0 0 0 transparent!important;
  189. font-weight: 400!important;
  190. }
  191.  
  192. .tmblr-iframe { z-index:999999999!important; }
  193.  
  194. ::-webkit-scrollbar { width: 7px; }
  195. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  196. ::-webkit-scrollbar-thumb:vertical {
  197. width: 10px;
  198. background-color: {color:scrollbar};
  199. border: 3px solid {color:scrollbar bg};
  200. margin-left: 10px;
  201. }
  202.  
  203. ::selection {
  204. color: #fff;
  205. background-color: {color:text highlight};
  206. }
  207.  
  208. ::-moz-selection {
  209. color: #fff;
  210. background-color: {color:text highlight};
  211. }
  212.  
  213. body {
  214. background-attachment: fixed;
  215. margin: 0;
  216. word-wrap: break-word;
  217. background-image: url({image:background});
  218. background-color: {color:background};
  219. }
  220.  
  221. a { text-decoration:none; }
  222.  
  223. #hblok, .hbloksm, .hbloksm2, .hbloksm3 {
  224. background-image: url({image:background});
  225. background-color: {color:background};
  226. }
  227.  
  228. #header {
  229. top: 0;
  230. left: 0;
  231. position: fixed;
  232. width: 100%;
  233. height: 120px;
  234. background-image: url({image:header background});
  235. background-color: {color:header background};
  236. z-index: 1001;
  237. {block:iffullsizeheaderimage}
  238. background-size: cover;
  239. {/block:iffullsizeheaderimage}
  240. }
  241.  
  242. #hlyr1 {
  243. top: 0;
  244. left: 0;
  245. position: fixed;
  246. width: 100%;
  247. height: 150px;
  248. background-image: url({image:header background});
  249. background-color: {color:header background};
  250. background-size: 200px;
  251. z-index: 999;
  252. {block:iffullsizeheaderimage}
  253. background-size: cover;
  254. {/block:iffullsizeheaderimage}
  255. }
  256.  
  257. #hblok {
  258. z-index: 1000;
  259. position: fixed;
  260. height: 30px;
  261. width: 160px;
  262. top: 120px;
  263. left: 0;
  264. background-color: {color:background color};
  265. }
  266.  
  267. .hbloks {
  268. height: 30px;
  269. width: 2000px;
  270. float: left;
  271. margin-left: 216px;
  272. position: absolute;
  273. }
  274.  
  275. .hbloksm, .hbloksm2, .hbloksm3 {
  276. background-color: {color:background color};
  277. height: 30px;
  278. width: 8px;
  279. float: left;
  280. margin-right: 56px;
  281. }
  282.  
  283. .hbloksm2 {
  284. width: 574px;
  285. }
  286.  
  287. .hbloksm3 {
  288. position: fixed;
  289. width: 600px;
  290. margin: 0 924px;
  291. }
  292.  
  293.  
  294. #leftb {
  295. position: fixed;
  296. top: 158px;
  297. left: 160px;
  298. }
  299.  
  300. .leftimg {
  301. width: 248px;
  302. display: block;
  303. }
  304.  
  305. .blogti {
  306. margin-left: 420px;
  307. position: fixed;
  308. top: 0;
  309. z-index: 1300;
  310. width: 540px;
  311. text-align: center;
  312. font-family: saniretro;
  313. text-transform: uppercase;
  314. font-weight: 1000;
  315. color: {color:blog title};
  316. font-size: 22px;
  317. line-height: 115px;
  318. letter-spacing: 10px;
  319. }
  320.  
  321. #iconnav {
  322. position: fixed;
  323. top: 126px;
  324. left: 160px;
  325. z-index: 1200;
  326. }
  327.  
  328. .navicon {
  329. color: {color:navigation icon};
  330. font-size: 16px;
  331. float: left;
  332. text-align: center;
  333. width: 56px;
  334. margin-right: 8px;
  335. }
  336.  
  337. .desc {
  338. width: 228px;
  339. padding: 10px;
  340. margin-top: 8px;
  341. font-family: consolas;
  342. font-size: 10px;
  343. background-color: {color:desc background};
  344. color: {color:desc text};
  345. border-bottom: 6px solid {color:desc bottom border};
  346. }
  347.  
  348. .desc a {color: {color:desc links};transition: 0.6s;}
  349. .desc a:hover { color: {color:desc links hover}; }
  350.  
  351. .desc b,strong {
  352. color: {color:desc bold};
  353. font-weight: 400;
  354. }
  355.  
  356. .desc i,em {
  357. color: {color:desc italic};
  358. }
  359.  
  360. #rightb {
  361. position: fixed;
  362. top: 123px;
  363. z-index: 1200;
  364. left: 989px;
  365. }
  366.  
  367. #sf {
  368. background-image: url(http://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png);
  369. background-color: #f5f5f5;
  370. background-repeat: no-repeat;
  371. background-size: 14px 14px;
  372. background-position: 96% 50%;
  373. padding: 5px 18px 5px 6px;
  374. font-family: consolas;
  375. font-size: 8px;
  376. text-transform: uppercase;
  377. letter-spacing: 1px;
  378. border: 0;
  379. width: 120px;
  380. }
  381.  
  382. #customlinks {
  383. margin: 10px -7px;
  384. width: 190px;
  385. }
  386.  
  387. .link {
  388. float: left;
  389. background-color: {color:custom links background};
  390. color: {color:custom links text};
  391. font-family: consolas;
  392. font-size: 8px;
  393. text-transform: uppercase;
  394. letter-spacing: 1px;
  395. width: 76px; /**76**/
  396. margin-bottom: 5px;
  397. margin-right: 5px;
  398. text-align: center;
  399. padding: 4px 0;
  400. transition: 0.6s;
  401. }
  402.  
  403. .link:hover {
  404. background-color: {color:custom links background hover};
  405. color: {color:custom links text hover};
  406. }
  407.  
  408. #content {
  409. margin-top: 130px;
  410. position: relative;
  411. z-index: 1000;
  412. margin-bottom: 20px;
  413. {block:ifnotsmallposts}
  414. width: 550px;
  415. margin-left: 420px;
  416. {/block:ifnotsmallposts}
  417. {block:ifsmallposts}
  418. width: 450px;
  419. margin-left: 440px;
  420. {/block:ifsmallposts}
  421. }
  422.  
  423. .posts {
  424. {block:ifnotsmallposts}
  425. width: 500px;
  426. {/block:ifnotsmallposts}
  427. {block:ifsmallposts}
  428. width: 400px;
  429. {/block:ifsmallposts}
  430. margin: 20px 0;
  431. padding: 20px;
  432. {block:indexpage}
  433. padding: 20px 20px 0 20px;
  434. {/block:indexpage}
  435. margin-bottom: 60px;
  436. {block:ifpostbackgroundtranslucency}
  437. background-color: rgba(255,255,255,0.5);
  438. {/block:ifpostbackgroundtranslucency}
  439. transition: 0.6s;
  440. -moz-transition: 0.6s;
  441. -webkit-transition: 0.6s;
  442. -o-transition: 0.6s;
  443. border: 1px solid transparent;
  444. }
  445.  
  446. blockquote {
  447. margin: 5px;
  448. padding: 2px 10px;
  449. border-left: 3px solid {color:blockquote};
  450. background-color: rgba(255,255,255,0.2);
  451. }
  452.  
  453. .posts:hover {
  454. background-color: rgba(255,255,255,1);
  455. border: 1px solid transparent;
  456. }
  457.  
  458. .photo {
  459. {block:ifnotsmallposts}
  460. max-width: 500px;
  461. {/block:ifnotsmallposts}
  462. {block:ifsmallposts}
  463. max-width: 400px;
  464. {/block:ifsmallposts}
  465. {block:ifmonochromeposts}
  466. 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+ */
  467. filter: gray; /* IE6-9 */
  468. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  469. {/block:ifmonochromeposts}
  470. transition: 0.6s;
  471. -moz-transition: 0.6s;
  472. -webkit-transition: 0.6s;
  473. -o-transition: 0.6s;
  474. }
  475. .posts:hover .photo {
  476. {block:ifphotofading}
  477. opacity: 1;
  478. {/block:ifphotofading}
  479. {block:ifmonochromeposts}
  480. filter: none;
  481. -webkit-filter: grayscale(0%);
  482. {/block:ifmonochromeposts}
  483. }
  484.  
  485. .posts img {
  486. {block:ifnotsmallposts}
  487. max-width: 500px;
  488. {/block:ifnotsmallposts}
  489. {block:ifsmallposts}
  490. max-width: 400px;
  491. {/block:ifsmallposts}
  492. }
  493. .posts blockquote img {max-width: 100%;}
  494.  
  495. .ptitle {
  496. font-family: saniretro;
  497. font-size: 26px;
  498. text-align: center;
  499. padding: 6px 0;
  500. background-color: {color:text post title background};
  501. padding: 14px 16px;
  502. color: {color:text post title};
  503. }
  504. .quote {
  505. font-family: saniretro;
  506. font-size: 22px;
  507. color: {color:quote post};
  508. }
  509. .quotesrc {
  510. font-family: consolas;
  511. font-size: 8px;
  512. letter-spacing: 1px;
  513. text-transform: uppercase;
  514. }
  515.  
  516. .askerportrait {
  517. padding: 10px;
  518. border-right: 1px solid {color:ask icon lines};
  519. background-color: {color:ask icon background};
  520. }
  521.  
  522. .aske {
  523. position: absolute;
  524. margin: 0 85px;
  525. font-family: consolas;
  526. font-size: 10px;
  527. color: {color:ask text};
  528. {block:indexpage}
  529. width: 400px;
  530. {/block:indexpage}
  531. {block:permalinkpage}
  532. width: 400px;
  533. {/block:permalinkpage}
  534. }
  535.  
  536. .askersent {
  537. border-bottom: 1px solid {color:ask icon lines};
  538. padding: 4px 10px;
  539. }
  540.  
  541. .askersent a {
  542. color: {color:asker};
  543. }
  544.  
  545. .askersent a:hover {
  546. color: {color:asker hover};
  547. }
  548.  
  549. .askco {
  550. padding: 8px 5px 10px 10px;
  551. height: 42px;
  552. overflow: auto;
  553. }
  554.  
  555. #pi {
  556. margin: -40px 0;
  557. }
  558. .audiopost { height: 150px; }
  559.  
  560. .albumartp {
  561. z-index: 10;
  562. width: 150px;
  563. height: 150px;
  564. position: relative;
  565. z-index: 2;
  566. display: block;
  567. }
  568.  
  569. .albumart {
  570. margin-top: -150px;
  571. width: 150px;
  572. height: 150px;
  573. display: block;
  574. background-color: #bbb;
  575. position: relative;
  576. z-index: 9;
  577. }
  578.  
  579. .audioplayer {
  580. z-index: 11;
  581. width: 25px;
  582. height: 25px;
  583. overflow: hidden;
  584. position: relative;
  585. {block:ifnotsmallposts}
  586. margin: -90px 0 0 70px;
  587. {/block:ifnotsmallposts}
  588. {block:ifsmallposts}
  589. margin: -90px 0 0 -240px;
  590. {/block:ifsmallposts}
  591. z-index: 10;
  592. opacity: 0.5;
  593. transition: 0.6s;
  594. -moz-transition: 0.6s;
  595. -webkit-transition: 0.6s;
  596. -o-transition: 0.6s;
  597. }
  598. .audioplayer:hover {opacity: 1;}
  599.  
  600. .audioinfo {
  601. text-align: left;
  602. {block:ifnotsmallposts}
  603. margin-left: 155px;
  604. {/block:ifnotsmallposts}
  605. {block:ifsmallposts}
  606. margin-left: 155px;
  607. {/block:ifsmallposts}
  608. height: 150px;
  609. }
  610.  
  611. .aline {
  612. {block:ifnotsmallposts}
  613. width: 325px;
  614. {/block:ifnotsmallposts}
  615. {block:ifsmallposts}
  616. width: 225px;
  617. {/block:ifsmallposts}
  618. font-family: consolas;
  619. font-size: 10px;
  620. padding: 11px 10px;
  621. margin-bottom: 5px;
  622. text-transform: uppercase;
  623. background-color: {color:audio info background};
  624. color: {color:body text};
  625. }
  626. .aline b,strong { color: {color:body bold};}
  627.  
  628. .line {
  629. font-family: consolas;
  630. font-size: 10px;
  631. text-align: left;
  632. margin: 3px 0;
  633. }
  634.  
  635. .odd .line {padding: 7px 10px;color:{color:chat odd text};background-color:#fff;}
  636. .even .line {padding: 7px 10px;color:{color:chat even text};background-color:#f7f7f7;}
  637. .odd .name {color: {color:chat odd name};}
  638. .even .name {color: {color:chat even name};}
  639.  
  640. .ltitle {
  641. font-family: saniretro;
  642. font-size: 22px;
  643. padding: 16px 20px;
  644. color: {color:link post title};
  645. background-color: {color:link post background};
  646. }
  647.  
  648. .permainfo {
  649. {block:ifnotsmallposts}
  650. width: 500px;
  651. {/block:ifnotsmallposts}
  652. {block:ifsmallposts}
  653. width: 400px;
  654. {/block:ifsmallposts}
  655. padding: 20px;
  656. font-family: consolas;
  657. font-size: 11px;
  658. text-align: center;
  659. background-color: rgba(255,255,255,0.6);
  660. color: {color:body text};
  661. margin-bottom: 10px;
  662. }
  663.  
  664. #notecon {
  665. padding: 20px;
  666. {block:ifnotsmallposts}
  667. width: 500px;
  668. {/block:ifnotsmallposts}
  669. {block:ifsmallposts}
  670. width: 400px;
  671. {/block:ifsmallposts}
  672. text-align: left;
  673. background-color: rgba(255,255,255,0.6);
  674. color: {color:body text};
  675. font-family: consolas;
  676. font-size: 11px;
  677. margin-top: 20px;
  678. }
  679.  
  680. #notecon ol.notes {
  681. list-style-type: none;
  682. font-size: 11px;
  683. color: {color:body text};
  684. font-family: consolas;
  685. text-decoration: none;
  686. margin: 0;
  687. width: 500px;
  688. padding: 5px;
  689. text-align: left;
  690. }
  691. #notecon ol.notes a {
  692. color: {color:body links};
  693. -webkit-transition: all 0.4s ease-in-out;
  694. -moz-transition: all 0.4s ease-in-out;
  695. -o-transition: all 0.4s ease-in-out;
  696. -ms-transition: all 0.4s ease-in-out;
  697. transition: all 0.4s ease-in-out;}
  698. #notecon ol.notes a:hover {color:{color:body links hover};}
  699. #notecon img.avatar {
  700. margin-right: 5px;
  701. width: 10px;
  702. height: 10px;
  703. float: left;
  704. }
  705.  
  706. #pagin {
  707. background-color: rgba(255,255,255,0.4);
  708. border: 1px solid {color:posts border};
  709. border-radius: 5px;
  710. font-family: consolas;
  711. font-size: 8px;
  712. text-transform: uppercase;
  713. letter-spacing: 1px;
  714. height: 10px;
  715. padding: 15px;
  716. color: {color:pagination text};
  717. margin-bottom: 20px;
  718. margin-top: 20px;
  719. }
  720.  
  721. .retreat {
  722. float: left;
  723. color: {color:pagination links};text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
  724. transition: 0.6s;
  725. -moz-transition: 0.6s;
  726. -webkit-transition: 0.6s;
  727. -o-transition: 0.6s;
  728. }
  729. .advance {
  730. float: right;
  731. color: {color:pagination links};text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
  732. transition: 0.6s;
  733. -moz-transition: 0.6s;
  734. -webkit-transition: 0.6s;
  735. -o-transition: 0.6s;
  736. }
  737. .retreat:hover, .advance:hover {
  738. color: {color:pagination links hover};
  739. }
  740.  
  741. .text {
  742. font-family: consolas;
  743. font-size: 10px;
  744. color: {color:body text};
  745. text-align: justify;
  746. text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  747. }
  748.  
  749. .text b,strong, .permainfo b,strong, .quotesrc b,strong {
  750. color: {color:body bold};
  751. background-color: transparent;
  752. text-shadow: 0 0 0 transparent;
  753. font-weight: 100;
  754. }
  755.  
  756. .text i,em, .permainfo a, .quotesrc i,em {
  757. color: {color:body italic};
  758. text-shadow: 0 0 0 transparent;
  759. transition: 0.6s;
  760. -moz-transition: 0.6s;
  761. -webkit-transition: 0.6s;
  762. -o-transition: 0.6s;
  763. }
  764. .text a, .pitags a, #notecon a, .quotesrc a {
  765. color: {color:body links};
  766. text-decoration: underline;
  767. transition: 0.6s;
  768. -moz-transition: 0.6s;
  769. -webkit-transition: 0.6s;
  770. -o-transition: 0.6s;
  771. }
  772. .text a:hover, .permainfo a:hover, .pitags a:hover, #notecon a:hover, .quotesrc a:hover {
  773. color: {color:body links hover};
  774. }
  775. .pitags a { text-decoration: none; }
  776.  
  777. #permal {
  778. font-family: consolas;
  779. font-size: 8px;
  780. text-transform: uppercase;
  781. letter-spacing: 1px;
  782. background-color: {color:permalink background};
  783. color: {color:permalink text};
  784. border-bottom: 6px solid {color:permalink background};
  785. width: 500px;
  786. height: 0;
  787. margin: 20px 0 0 -20px;
  788. padding: 0 20px;
  789. overflow: hidden;
  790. transition: 0.9s;
  791. -moz-transition: 0.9s;
  792. -webkit-transition: 0.9s;
  793. -o-transition: 0.9s;
  794. {block:ifnothoveredpermalink}
  795. height: 8px;
  796. padding: 10px 20px;
  797. border-bottom: 6px solid {color:permalink hovered border};
  798. {/block:ifnothoveredpermalink}
  799. }
  800.  
  801. .posts:hover #permal {
  802. height: 8px;
  803. padding: 10px 20px;
  804. border-bottom: 6px solid {color:permalink hovered border};
  805. }
  806.  
  807. #permal a {
  808. color: {color:permalink text};
  809. }
  810.  
  811. .posttbo {
  812. width: 540px;
  813. min-height: 19px;
  814. margin: 8px -20px;
  815. position: absolute;
  816. text-align: left;
  817. font-family: consolas;
  818. }
  819.  
  820. .permalrr {
  821. float: right;
  822. }
  823.  
  824. .permalrr a {
  825. background-color: {color:permalink src background};
  826. color: {color:permalink src text};
  827. padding: 4px 5px;
  828. }
  829.  
  830. .distags {
  831. width: 436px;
  832. float: right;
  833. text-align: justify;
  834. height: 36px;
  835. overflow: auto;
  836. line-height: 12px;
  837. }
  838.  
  839. .distags a {
  840. font-family: consolas;
  841. font-size: 8px;
  842. padding: 4px 4px;
  843. color: {color:tags};
  844. text-transform: uppercase;
  845. margin: 0 2px;
  846. transition: 0.6s;
  847. -moz-transition: 0.6s;
  848. -webkit-transition: 0.6s;
  849. -o-transition: 0.6s;
  850. }
  851.  
  852. .distags a:hover {
  853. color: {color:tags hover};
  854. }
  855.  
  856. .dista {
  857. font-family: consolas;
  858. font-size: 10px;
  859. text-transform: uppercase;
  860. margin-right: 6px;
  861. font-family: consolas;
  862. font-size: 8px;
  863. padding: 0 7px;
  864. margin-top: -1px;
  865. background-color: {color:permalink action background};
  866. color: {color:permalink action text};
  867. text-transform: uppercase;
  868. display: block;
  869. float: left;
  870. height: 22px;
  871. line-height: 22px;
  872. }
  873.  
  874.  
  875.  
  876. .likb, .rebb {
  877. margin-top: -1px;
  878. float: left;
  879. width: 16px;
  880. height: 19px;
  881. text-align: center;
  882. margin-right: 4px;
  883. background-color: {color:permalink action background};
  884. padding: 3px 3px 0 3px;
  885. transition: 0.6s;
  886. -moz-transition: 0.6s;
  887. -webkit-transition: 0.6s;
  888. -o-transition: 0.6s;
  889. }
  890.  
  891. .rebb {
  892. padding: 3px 2px 0 4px;
  893. }
  894.  
  895. .pagi {
  896. font-family: consolas;
  897. font-size: 10px;
  898. width: 160px;
  899. margin-left: -10px;
  900. text-align: center;
  901. color: {color:pagination text};
  902. margin-top: 80px;
  903. }
  904.  
  905. .pagi a {
  906. color: {color:pagination links};
  907. background-color: {color:pagination links background};
  908. padding: 2px 5px;
  909. transition: 0.6s;
  910. -moz-transition: 0.6s;
  911. -webkit-transition: 0.6s;
  912. -o-transition: 0.6s;
  913. }
  914.  
  915. .pagi a:hover {
  916. color: {color:pagination links hover};
  917. background-color: {color:pagination links background hover};
  918. }
  919.  
  920. :focus { outline:0; }
  921.  
  922. {CustomCSS}
  923.  
  924. </style>
  925. </head>
  926. <body>
  927.  
  928. <div id="hblok">
  929. <div class="hbloks">
  930. <div class="hbloksm"></div>
  931. <div class="hbloksm"></div>
  932. <div class="hbloksm"></div>
  933. <div class="hbloksm2"></div>
  934. <div class="hbloksm3"></div>
  935. </div><!--hbloks-->
  936. </div><!--hblok-->
  937.  
  938. <div id="hlyr1"></div>
  939.  
  940. <div id="header">
  941. </div><!--header-->
  942.  
  943. <div id="rightb">
  944. <script language="javascript">
  945. function send()
  946. {document.theform.submit()}
  947. </script>
  948. <form action="/search" method="get" class="sfm" name="theform">
  949. <input type="text" name="q" value="" id="sf"/>
  950. </form>
  951. </form>
  952. <div id="customlinks">
  953. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="link">{text:Link 1}</div></a>{/block:IfLink1}
  954. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="link">{text:Link 2}</div></a>{/block:IfLink2}
  955. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="link">{text:Link 3}</div></a>{/block:IfLink3}
  956. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="link">{text:Link 4}</div></a>{/block:IfLink4}
  957. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="link">{text:Link 5}</div></a>{/block:IfLink5}
  958. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="link">{text:Link 6}</div></a>{/block:IfLink6}
  959. {block:IfLink7}<a href="{text:Link 7 URL}"><div class="link">{text:Link 7}</div></a>{/block:IfLink7}
  960. {block:IfLink8}<a href="{text:Link 8 URL}"><div class="link">{text:Link 8}</div></a>{/block:IfLink8}
  961. </div><!--customlinks-->
  962.  
  963. {block:ifnotinfinitescroll}
  964. {block:Pagination}<div class="pagi">
  965. {block:PreviousPage}
  966. <a href="{PreviousPage}">-</a>
  967. {/block:PreviousPage}
  968. {block:JumpPagination length="5"}
  969. {block:CurrentPage}
  970. <span class="current_page">{PageNumber}</span>
  971. {/block:CurrentPage}
  972. {block:JumpPage}
  973. <a class="jump_page" href="{URL}">{PageNumber}</a>
  974. {/block:JumpPage}
  975. {/block:JumpPagination}
  976. {block:NextPage}
  977. <a href="{NextPage}">+</a>
  978. {/block:NextPage}
  979. </div><!--pagination-->{/block:Pagination}
  980. {/block:ifnotinfinitescroll}
  981. </div><!--rightb-->
  982.  
  983. <div id="iconnav">
  984. <a href="/" title="reboot"><div class="navicon"><i class="fa fa-power-off"></i></div></a>
  985. <a href="/ask" title="inquire"><div class="navicon"><i class="fa fa-envelope-o"></i></div></a>
  986. <a href="/archive" title="access memories"><div class="navicon"><i class="fa fa-floppy-o"></i></div></a>
  987. <a href="http://yukoki.tumblr.com" title="coding"><div class="navicon"><i class="fa fa-code"></i></div></a>
  988. </div><!--iconnav-->
  989.  
  990. <div id="leftb">
  991. <img class="leftimg" src="{image:sidebar}">
  992. <div class="desc">{description}</div>
  993. </div><!--leftb-->
  994.  
  995.  
  996. <center><div class="blogti">{title}</div></center>
  997. <div id="content">
  998. <div class="autopagerize_page_element">
  999. {block:posts}
  1000.  
  1001. <div class="posts">
  1002.  
  1003. {block:photo}
  1004. {linkopentag}<center><img class="photo" src="{PhotoURL-500}"></center>{linkclosetag}
  1005. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1006. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1007. <div class="text">{Caption}</div>
  1008. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1009. {/block:photo}
  1010.  
  1011. {block:Photoset}
  1012. {block:ifnotsmallposts}
  1013. <div class="photo">{Photoset-500}</div>
  1014. {/block:ifnotsmallposts}
  1015. {block:ifsmallposts}
  1016. <div class="photo">{Photoset-400}</div>
  1017. {/block:ifsmallposts}
  1018. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1019. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1020. <div class="text">{Caption}</div>
  1021. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1022. {/block:Photoset}
  1023.  
  1024. {block:Text}
  1025. {block:title}<div class="ptitle">{Title}</div>{/block:title}
  1026. <div class="text">{Body}</div>
  1027. {/block:Text}
  1028.  
  1029. {block:Quote}
  1030. <span class="quote"><span style="margin-right: 10px; color: {color:quote post quotation marks};"><i class="fa fa-quote-left"></i></span>{Quote}</span>
  1031. <div class="quotesrc">{Source}</div>
  1032. {/block:Quote}
  1033.  
  1034. {block:Answer}
  1035. <div class="aske">
  1036. <div class="askersent">{Asker} sent:</div>
  1037. <div class="askco">{Question}</div>
  1038. </div>
  1039. <img class="askerportrait" src="{AskerPortraitURL-64}">
  1040. <div class="text">{Answer}</div>
  1041. {/block:Answer}
  1042.  
  1043. {block:Audio}
  1044. <div class="audiopost">
  1045. <div class="audioinfo">
  1046. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1047. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1048. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1049. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1050. </div><!--audioinfo-->
  1051.  
  1052. <div class="albumart">{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1053. <div class="audioplayer">{AudioPlayer}</div>
  1054.  
  1055. </div><!--audiopost-->
  1056. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1057. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1058. <div class="text">{Caption}</div>
  1059. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1060. {/block:Audio}
  1061.  
  1062. {block:Chat}
  1063. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  1064. <div class="ctext">
  1065. {block:Lines}<div class="{Alt}">
  1066. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1067. {/block:Lines}
  1068. </div>
  1069. {/block:Chat}
  1070.  
  1071. {block:Link}
  1072. <a href="{URL}"><div class="ltitle"><span style="margin-right: 16px; color: #ccc;"><i class="fa fa-chevron-right"></i></span>{Name}</div></a>
  1073. {block:Description}<div class="text">{Description}</div>{block:Description}
  1074. {/block:Link}
  1075.  
  1076. {block:Video}
  1077. <div class="photo">{Video-500}</div>
  1078. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1079. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1080. <div class="text">{Caption}</div>
  1081. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1082. {/block:Video}
  1083.  
  1084. {block:indexpage}
  1085. <div id="permal">
  1086. <a href="{permalink}">
  1087. <i class="fa fa-paperclip"></i> Posted {timeago} with {NoteCountWithLabel}.
  1088. </a>
  1089. {block:RebloggedFrom}<span class="permalrr">
  1090. <a href="{ReblogParentURL}" title="via {ReblogParentName}">via</a> <a href="{ReblogRootURL}" title="org {ReblogRootName}">original</a><br>
  1091. {/block:RebloggedFrom}</span><!--permalrr-->
  1092. </div><!--permal-->
  1093. <div class="posttbo">
  1094. {block:ifvisiblelikeandreblogbuttons}
  1095. <div class="rebb">{ReblogButton color="grey" size="13"}</div>
  1096. <div class="likb">{LikeButton color="grey" size="13"}</div>
  1097. {/block:ifvisiblelikeandreblogbuttons}
  1098. {block:ifvisibletags}
  1099. {block:HasTags}
  1100. <div class="dista">tags »</div>
  1101. <div class="distags">{block:Tags}
  1102. <a href="{TagURL}">#{Tag} </a>
  1103. {/block:Tags}</div>
  1104. {/block:HasTags}
  1105. {/block:ifvisibletags}
  1106. </div><!--posttbo-->
  1107. {/block:indexpage}
  1108.  
  1109. </div><!--posts-->
  1110.  
  1111. {block:permalinkpage}
  1112. {block:date}<div class="permainfo">
  1113. Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
  1114. {block:RebloggedFrom}
  1115. Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
  1116. {/block:RebloggedFrom}
  1117. {block:HasTags}<div class="pitags">{block:Tags}
  1118. <a href="{TagURL}">#{Tag} </a>
  1119. {/block:Tags}</div>{/block:HasTags}
  1120. </div>{/block:date}
  1121. {block:date}{block:NoteCount}<div id="notecon">
  1122. {PostNotes-16}
  1123. </div><!--notecon-->{/block:NoteCount}{/block:date}
  1124. {/block:permalinkpage}
  1125.  
  1126. {/block:Posts}
  1127. {block:ContentSource}
  1128. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1129. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1130. {/block:SourceLogo}
  1131. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1132. {/block:ContentSource}
  1133.  
  1134. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1135.  
  1136. {/block:posts}
  1137. </div><!--autopagerise-->
  1138. </div><!--content-->
  1139.  
  1140. </body>
  1141. </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!