API tools faq
paste
Advertisement
mogimochi

Theme [41] Catharsis

mogimochi
Oct 22nd, 2017
11,749
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 41 Catharsis
  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 131217 -->
  16.  
  17. <meta name="color:background" content="#ffffff">
  18. <meta name="color:tooltips background" content="#000000">
  19. <meta name="color:tooltips text" content="#ffffff">
  20. <meta name="color:scrollbar" content="#d79e9e">
  21. <meta name="color:text highlight" content="#edd4d4">
  22.  
  23. <meta name="color:theme borders" content="#cccccc">
  24.  
  25. <meta name="color:blog title" content="#6e6e6e">
  26. <meta name="color:blog title accent" content="#f2c7ba">
  27. <meta name="color:blog title icon" content="#ffffff">
  28.  
  29. <meta name="color:description" content="#aaaaaa">
  30. <meta name="color:desc bold" content="#d19d9d">
  31. <meta name="color:desc italic" content="#adadad">
  32. <meta name="color:desc links" content="#bacc95">
  33. <meta name="color:desc links hover" content="#dcdcdc">
  34.  
  35. <meta name="color:navigation square overlay" content="#ffffff">
  36. <meta name="color:nav square cross" content="#cecece">
  37. <meta name="color:nav square icons" content="#777777">
  38. <meta name="color:nav square icon background 1" content="#e8998d">
  39. <meta name="color:nav square icon background 2" content="#dbad8e">
  40. <meta name="color:nav square icon background 3" content="#cfc28e">
  41. <meta name="color:nav square icon background 4" content="#c2d68f">
  42.  
  43. <meta name="color:custom links" content="#888888">
  44. <meta name="color:custom links hover" content="#aaaaaa">
  45. <meta name="color:window close button" content="#e8998d">
  46.  
  47. <meta name="color:inner post borders" content="#dcdcdc">
  48. <meta name="color:post type icon" content="#f2c7ba">
  49.  
  50. <meta name="color:body" content="#7e7e7e">
  51. <meta name="color:body bold" content="#e8998d">
  52. <meta name="color:body italic" content="#b6b6b6">
  53. <meta name="color:body links" content="#bcccb5">
  54. <meta name="color:body links hover" content="#eacfa6">
  55. <meta name="color:body blockquote" content="#dddddd">
  56.  
  57. <meta name="color:post title" content="#777777">
  58. <meta name="color:link post title" content="#777777">
  59. <meta name="color:link post title hover" content="#9db07e">
  60. <meta name="color:chat post odd name" content="#ad8e7e">
  61. <meta name="color:chat post even name" content="#9cad82">
  62.  
  63. <meta name="color:permalink time icon" content="#e8998d">
  64. <meta name="color:permalink notes icon" content="#DFA88E">
  65. <meta name="color:permalink sources icon" content="#D5B88E">
  66. <meta name="color:permalink tags icon" content="#CCC78F">
  67. <meta name="color:permalink reblog icon" content="#C2D68F">
  68. <meta name="color:permalink text" content="#000000">
  69.  
  70. <meta name="color:permalink tags" content="#a29181">
  71. <meta name="color:permalink tags background" content="#fffbe8">
  72. <meta name="color:permalink tags hover" content="#949494">
  73. <meta name="color:permalink tags background hover" content="#f5f5f5">
  74.  
  75. <meta name="if:dark tumblr controls" content="1">
  76. <meta name="if:dark overlay" content="0">
  77. <meta name="if:tags on index" content="1">
  78. <meta name="if:header image blur effect" content="1">
  79. <meta name="if:post blur effect" content="1">
  80. <meta name="if:show captions" content="1">
  81. <meta name="if:show reblog button" content="1">
  82. <meta name="if:three custom links" content="0">
  83. <meta name="if:six custom links" content="1">
  84.  
  85. <meta name="text:blog title icon" content="leaf-2-o">
  86. <meta name="text:body font size" content="12">
  87. <meta name="text:link 1" content="">
  88. <meta name="text:link 1 URL" content="/">
  89. <meta name="text:link 2" content="">
  90. <meta name="text:link 2 URL" content="/">
  91. <meta name="text:link 3" content="">
  92. <meta name="text:link 3 URL" content="/">
  93. <meta name="text:link 4" content="">
  94. <meta name="text:link 4 URL" content="/">
  95. <meta name="text:link 5" content="">
  96. <meta name="text:link 5 URL" content="/">
  97. <meta name="text:link 6" content="">
  98. <meta name="text:link 6 URL" content="/">
  99.  
  100. <meta name="image:background" content="">
  101. <meta name="image:header" content="">
  102.  
  103. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  104. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  105. <link rel="shortcut icon" href="{Favicon}" />
  106.  
  107. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  108.  
  109. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  110. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  111. <script>
  112. (function($){
  113. $(document).ready(function(){
  114. $("a[title]").style_my_tooltips({
  115. tip_follows_cursor:true,
  116. tip_delay_time:0,
  117. tip_fade_speed:300,
  118. attribute:"title"
  119. });
  120. });
  121. })(jQuery);
  122. </script>
  123.  
  124. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  125.  
  126. <!--JAVA-->
  127. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  128. <script>
  129. $(document).ready(function(){
  130.  
  131. $(".btn-more").click(function(){
  132. $(".overlay-more").addClass("show-overlay-more");
  133. $(".wdw-more").addClass("show-wdw-more");
  134. });
  135.  
  136. $(".btn-more-close").click(function(){
  137. $(".overlay-more").removeClass("show-overlay-more");
  138. $(".wdw-more").removeClass("show-wdw-more");
  139. });
  140.  
  141. $('.perma-tags-icon').click(function(){
  142. //find the surrounding div
  143. var location = $(this).parent().parent().parent();
  144.  
  145. //find the correct elements within the location block
  146. $(".hidden-tags",location).slideToggle();
  147. });
  148.  
  149. // fix found by joekarl on stackoverflow
  150. // https://stackoverflow.com/questions/6347016/apply-function-to-only-one-div-class-not-all
  151.  
  152. });
  153. </script>
  154. <!--END JAVA-->
  155.  
  156. <style type="text/css">
  157.  
  158. @font-face { font-family: "opsans"; src: url('https://dl.dropboxusercontent.com/s/6t6k1zdmq4v9u8b/OpenSans-Light.ttf'); }
  159. @font-face { font-family: "gogoia-deco"; src: url('https://dl.dropboxusercontent.com/s/zyh6remaoilffa9/GOGOIA-Deco.otf'); }
  160. @font-face { font-family: "gogoia"; src: url('https://dl.dropboxusercontent.com/s/na2h45x6shj88nq/GOGOIA-Regular.otf'); }
  161.  
  162. body {
  163. background-color: {color:background};
  164. background-image: url({image:background});
  165. background-attachment: fixed;
  166. margin: 0;
  167. word-wrap: break-word;
  168. }
  169. a { text-decoration:none; }
  170.  
  171. ::-webkit-scrollbar { width: 7px; background-color: {color:background}; }
  172. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  173. ::-webkit-scrollbar-thumb:vertical {
  174. width: 7px;
  175. background-color: {color:scrollbar};
  176. }
  177.  
  178. ::selection {
  179. color: #fff;
  180. background-color: {color:text highlight};
  181. }
  182.  
  183. ::-moz-selection {
  184. color: #fff;
  185. background-color: {color:text highlight};
  186. }
  187.  
  188. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  189. top: 4px;
  190. right: 80px;
  191. z-index: 9999;
  192. filter: invert(100%);
  193. }
  194.  
  195. .tctrl {
  196. position: fixed;
  197. top: 20px;
  198. right: 20px;
  199. z-index: 999;
  200. font-size: 16px;
  201. color: #888;
  202. }
  203.  
  204. .tctrl:hover iframe.tmblr-iframe, iframe.tmblr-iframe:hover {
  205. opacity: 0.6!important;
  206. right: 10px!important;
  207. }
  208.  
  209. iframe.tmblr-iframe {
  210. z-index: 1000!important;
  211. top: 0!important;
  212. right: 0px!important;
  213. padding-right: 30px;
  214. opacity: 0;
  215. transition: 0.6s;
  216. {block:ifdarktumblrcontrols}
  217. filter:invert(1);
  218. -webkit-filter:invert(1);
  219. -o-filter:invert(1);
  220. -moz-filter:invert(1);
  221. -ms-filter:invert(1);
  222. {/block:ifdarktumblrcontrols}
  223. }
  224.  
  225. #s-m-t-tooltip {
  226. z-index: 1000000000000000000000000000000000000;
  227. max-width: 300px;
  228. background-color: rgba({RGBcolor:tooltips background},0.6);
  229. color: {color:tooltips text};
  230. text-transform: uppercase;
  231. letter-spacing: 1px;
  232. font-family: opsans;
  233. font-size: 8px;
  234. padding: 2px 6px;
  235. margin: 20px 0 0 20px;
  236. }
  237.  
  238. #header {
  239. width: 550px;
  240. height: 150px;
  241. margin-top: 100px;
  242. }
  243.  
  244. .headericon {
  245. display: block;
  246. width: 150px;
  247. height: 150px;
  248. border-radius: 10px;
  249. position: absolute;
  250. transition: 0.8s;
  251. }
  252.  
  253. #header:hover .headericon {
  254. {block:ifheaderimageblureffect}
  255. filter: blur(2px);
  256. -webkit-filter: blur(2px);
  257. {/block:ifheaderimageblureffect}
  258. }
  259.  
  260. .headercontainer {
  261. width: 370px;
  262. height: 110px;
  263. padding: 20px 0 20px 30px;
  264. margin-left: 150px;
  265. text-align: left;
  266. }
  267.  
  268. .headercontent {
  269. position: relative;
  270. top: 50%;
  271. transform: translateY(-50%);
  272. }
  273.  
  274. .headertitle {
  275. font-family: gogoia-deco;
  276. font-size: 30px;
  277. letter-spacing: 5px;
  278. color: {color:blog title};
  279. }
  280.  
  281. .headertitle t {
  282. border-bottom: 3px solid {color:blog title accent};
  283. padding-left: 50px;
  284. }
  285.  
  286. .headertitle .sf {
  287. padding-left: 2px;
  288. width: 38px;
  289. height: 40px;
  290. line-height: 48px;
  291. text-align: center;
  292. position: absolute;
  293. font-size: 20px;
  294. color: {color:blog title icon};
  295. background-color: {color:blog title accent};
  296. margin-right: 5px;
  297. }
  298.  
  299. .headerdescription {
  300. margin-top: 20px;
  301. font-family: opsans;
  302. font-size: 11px;
  303. line-height: 13px;
  304. color: {color:description};
  305. }
  306.  
  307. .headerdescription b,strong { color: {color:desc bold}; font-weight: 400; }
  308. .headerdescription i,em { color: {color:desc italic}; }
  309. .headerdescription a { color: {color:desc links}; transition: 0.6s; }
  310. .headerdescription a:hover { color: {color:desc links hover}; }
  311.  
  312. .navigationsquare {
  313. width: 150px;
  314. height: 150px;
  315. border-radius: 10px;
  316. z-index: 1;
  317. background-color: rgba(255,255,255,0);
  318. position: absolute;
  319. transition: 0.8s;
  320. }
  321.  
  322. #header:hover .navigationsquare {
  323. width: 110px;
  324. height: 110px;
  325. margin: 20px;
  326. background-color: rgba({RGBcolor:navigation square overlay},0.8);
  327. }
  328.  
  329. .navsq-vertline, .navsq-horiline {
  330. background-color: {color:nav square cross};
  331. position: absolute;
  332. transition: 0.8s;
  333. opacity: 0;
  334. }
  335.  
  336. .navsq-vertline {
  337. width: 1px;
  338. height: 30px;
  339. margin: 60px 75px;
  340. }
  341.  
  342. .navsq-horiline {
  343. width: 30px;
  344. height: 1px;
  345. margin: 75px 60px;
  346. }
  347.  
  348. #header:hover .navsq-vertline {
  349. margin: 20px 55px;
  350. transform: rotate(45deg);
  351. opacity: 1;
  352. width: 1px;
  353. height: 70px;
  354. }
  355.  
  356. #header:hover .navsq-horiline {
  357. margin: 55px 20px;
  358. transform: rotate(45deg);
  359. opacity: 1;
  360. width: 70px;
  361. height: 1px;
  362. }
  363.  
  364. .navsq-icons {
  365. position: absolute;
  366. z-index: 2;
  367. }
  368.  
  369. .navsq-ic {
  370. position: absolute;
  371. width: 10px;
  372. height: 10px;
  373. line-height: 10px;
  374. text-align: center;
  375. margin: 65px;
  376. transition: 0.8s;
  377. opacity: 0;
  378. font-size: 14px;
  379. line-height: 14px;
  380. border-radius: 100px;
  381. }
  382.  
  383. .navsq-ic a {
  384. transition: 0.8s;
  385. padding: 7px 5px 3px 5px;
  386. border-radius: 1000px;
  387. color: {color:nav square icons};
  388. }
  389.  
  390. #header:hover #navsq-ic-blog {
  391. margin: 44px 0 0 63px;
  392. opacity: 1;
  393. transition-delay: 0.4s;
  394. }
  395. #header:hover #navsq-ic-ask {
  396. margin: 67px 0 0 88px;
  397. opacity: 1;
  398. transition-delay: 0.6s;
  399. }
  400. #header:hover #navsq-ic-more {
  401. margin: 68px 0 0 38px;
  402. opacity: 1;
  403. transition-delay: 0.8s;
  404. }
  405. #header:hover #navsq-ic-thm {
  406. margin: 92px 0 0 63px;
  407. opacity: 1;
  408. transition-delay: 1.0s;
  409. }
  410.  
  411. #navsq-ic-blog:hover a {
  412. background-color: {color:nav square icon background 1};
  413. color: #fff;
  414. }
  415. #navsq-ic-ask:hover a {
  416. background-color: {color:nav square icon background 2};
  417. color: #fff;
  418. }
  419. #navsq-ic-more:hover a {
  420. background-color: {color:nav square icon background 3};
  421. color: #fff;
  422. }
  423. #navsq-ic-thm:hover a {
  424. background-color: {color:nav square icon background 4};
  425. color: #fff;
  426. }
  427.  
  428. .border-topleft-hori, .border-topleft-vert, .border-bottomright-hori, .border-bottomright-vert {
  429. position: absolute;
  430. background-color: {color:theme borders};
  431. z-index: 10;
  432. transition: 1.6s;
  433. }
  434.  
  435. .border-topleft-hori {
  436. margin: -30px -50px;
  437. width: 100px;
  438. height: 1px;
  439. }
  440.  
  441. .border-topleft-vert {
  442. margin: -50px -30px;
  443. width: 1px;
  444. height: 100px;
  445. }
  446.  
  447. .border-bottomright-hori {
  448. margin: 180px 500px;
  449. width: 100px;
  450. height: 1px;
  451. }
  452.  
  453. .border-bottomright-vert {
  454. margin: 100px 580px;
  455. width: 1px;
  456. height: 100px;
  457. }
  458.  
  459. #header:hover .border-topleft-hori {
  460. margin: -30px 500px;
  461. width: 100px;
  462. height: 1px;
  463. }
  464.  
  465. #header:hover .border-topleft-vert {
  466. margin: 100px -30px;
  467. width: 1px;
  468. height: 100px;
  469. }
  470.  
  471. #header:hover .border-bottomright-hori {
  472. margin: 180px -50px;
  473. width: 100px;
  474. height: 1px;
  475. }
  476.  
  477. #header:hover .border-bottomright-vert {
  478. margin: -50px 580px;
  479. width: 1px;
  480. height: 100px;
  481. }
  482.  
  483. .overlay-more {
  484. width: 100%;
  485. height: 100%;
  486. position: fixed;
  487. top: 0;
  488. left: 0;
  489. {block:ifnotdarkoverlay}
  490. background-color: rgba(255,255,255,0.85);
  491. {/block:ifnotdarkoverlay}
  492. {block:ifdarkoverlay}
  493. background-color: rgba(0,0,0,0.85);
  494. {/block:ifdarkoverlay}
  495. z-index: 1000;
  496. z-index: -1;
  497. opacity: 0;
  498. }
  499.  
  500. .show-overlay-more {opacity: 1;z-index: 1000;transition: 0.8s;}
  501.  
  502. #cont {
  503. width: 100%;
  504. height: 100%;
  505. }
  506.  
  507. .wdw-more {
  508. position: fixed;
  509. width: 100%;
  510. height: 100%;
  511. text-align: center;
  512. top: 220px;
  513. z-index: -1;
  514. opacity: 0;
  515. {block:ifthreecustomlinks}
  516. top: 260px;
  517. {/block:ifthreecustomlinks}
  518. }
  519.  
  520. .show-wdw-more {
  521. opacity: 1;
  522. z-index: 1001;
  523. transition: 0.8s;
  524. }
  525.  
  526. .more-content {width: 543px;}
  527.  
  528. .more-link {
  529. font-family: opsans;
  530. font-size: 11px;
  531. text-transform: uppercase;
  532. letter-spacing: 1px;
  533. text-align: center;
  534. width: 180px;
  535. float: left;
  536. height: 50px;
  537. line-height: 50px;
  538. margin: 0 1px 1px 0;
  539. color: {color:custom links};
  540. transition: 0.6s;
  541. }
  542.  
  543. .more-link:hover { color:{color:custom links hover}; font-style:italic;}
  544.  
  545. .more-h-d1, .more-h-d2, .more-v-d1, .more-v-d2 {
  546. background-color: {color:theme borders};
  547. position: absolute;
  548. }
  549.  
  550. {block:ifthreecustomlinks}
  551. .more-h-d1 {width: 542px;height: 1px;margin: 50px 0;}
  552. .more-h-d2 {width: 542px;height: 1px;margin: 101px 0; display: none;}
  553. .more-v-d1 {height: 101px;width: 1px;margin: 0 180px;}
  554. .more-v-d2 {height: 101px;width: 1px;margin: 0 361px;}
  555. {/block:ifthreecustomlinks}
  556.  
  557. {block:ifsixcustomlinks}
  558. .more-h-d1 {width: 542px;height: 1px;margin: 50px 0;}
  559. .more-h-d2 {width: 542px;height: 1px;margin: 101px 0;}
  560. .more-v-d1 {height: 152px;width: 1px;margin: 0 180px;}
  561. .more-v-d2 {height: 152px;width: 1px;margin: 0 361px;}
  562. {/block:ifsixcustomlinks}
  563.  
  564. .btn-more { cursor: pointer; }
  565. .btn-more-close {
  566. font-size: 12px;
  567. padding: 10px 10px 6px 10px;
  568. position: absolute;
  569. margin: -30px 570px;
  570. background-color: {color:window close button};
  571. color: #fff;
  572. border-radius: 1000px;
  573. cursor: pointer;
  574. }
  575.  
  576. #content {
  577. margin-top: 100px;
  578. width: 500px;
  579. }
  580.  
  581. .entry {
  582. width: 500px;
  583. margin: 80px 0;
  584. font-family: opsans;
  585. text-align: left;
  586. padding: 30px 0;
  587. }
  588.  
  589. .entry-title {
  590. font-family: gogoia;
  591. font-size: 26px;
  592. margin: 0 0 0 50px;
  593. padding-left: 20px;
  594. letter-spacing: 2px;
  595. border-left: 1px solid {color:inner post borders};
  596. margin-bottom: 20px;
  597. color: {color:post title};
  598. }
  599.  
  600. .entry-title a {color: {color:link post title};transition: 0.6s;}
  601. .entry-title a:hover {color: {color:link post title hover};}
  602.  
  603. .entry-title-icon {
  604. font-size: 24px;
  605. color: {color:post type icon};
  606. position: absolute;
  607. width: 40px;
  608. margin-left: -70px;
  609. text-align: center;
  610. }
  611.  
  612. .entry-body {
  613. font-family: opsans;
  614. font-size: {text:body font size}px;
  615. color: {color:body};
  616. letter-spacing: 1px;
  617. line-height: 18px;
  618. }
  619.  
  620. .entry-body ul {
  621. list-style-image: url('http://static.tumblr.com/2icx37z/wYcoy7lb3/bullet.png');
  622. }
  623.  
  624. .entry-body ol {
  625. list-style-type: lower-roman;
  626. }
  627.  
  628. .entry-body blockquote, #applepie blockquote {
  629. border-left: 1px solid {color:body blockquote};
  630. margin: 10px 10px;
  631. padding: 0 0 0 20px;
  632. }
  633.  
  634. .entry-body blockquote img {
  635. max-width: 100%;
  636. height: auto!important;
  637. }
  638.  
  639. .entry-body b,strong {
  640. font-weight: 400;
  641. color: {color:body bold};
  642. }
  643.  
  644. .entry-body i,em {
  645. color: {color:body italic};
  646. }
  647.  
  648. .entry-body a, #applepie a, .asker-name a, .entry-perma-txt a {
  649. color: {color:body links};
  650. padding-bottom: 1px;
  651. border-bottom: 1px solid {color:body links};
  652. transition: 0.6s;
  653. }
  654.  
  655. .entry-body a:hover, #applepie a:hover, .asker-name a:hover, .entry-perma-txt a:hover {
  656. color: {color:body links hover};
  657. border-bottom: 1px solid {color:body links hover};
  658. }
  659.  
  660. .photo {
  661. border-radius: 10px;
  662. transition: 0.6s;
  663. }
  664.  
  665. .entry:hover .photo {
  666. {block:ifpostblureffect}
  667. filter: blur(2px);
  668. -webkit-filter: blur(2px);
  669. {/block:ifpostblureffect}
  670. }
  671.  
  672. .line {
  673. font-family: opsans;
  674. font-size: 12px;
  675. letter-spacing: 1px;
  676. color: {color:body};
  677. line-height: 20px;
  678. width: 390px;
  679. padding-left: 10px;
  680. border-left: 1px solid {color:inner post borders};
  681. margin: 5px 0;
  682. }
  683.  
  684. .oddname, .evenname {
  685. font-family: opsans;
  686. font-size: 10px;
  687. text-transform: uppercase;
  688. letter-spacing: 2px;
  689. color: #555;
  690. width: 90px;
  691. padding-right: 10px;
  692. text-align: right;
  693. }
  694.  
  695. .oddname { color: {color:chat post odd name}; }
  696. .evenname { color: {color:chat post even name}; }
  697.  
  698. .entry-aud {
  699. width: 500px;
  700. height: 120px;
  701. margin-bottom: 10px;
  702. }
  703.  
  704. .aud-icon {
  705. font-size: 24px;
  706. color: {color:post type icon};
  707. width: 40px;
  708. text-align: center;
  709. border-right: 1px solid {color:inner post borders};
  710. padding-right: 10px;
  711. position: absolute;
  712. height: 120px;
  713. line-height: 120px;
  714. }
  715.  
  716. .aud-info {
  717. padding: 10px 0 10px 20px;
  718. width: 450px;
  719. margin-left: 50px;
  720. color: {color:body};
  721. }
  722.  
  723. .aud-albumart {
  724. width: 100px;
  725. height: 100px;
  726. position: absolute;
  727. border-radius: 5px;
  728. transition: 0.6s;
  729. }
  730.  
  731. .aud-albmart-holder {
  732. width: 100px;
  733. height: 100px;
  734. border-radius: 5px;
  735. position: absolute;
  736. }
  737.  
  738. .aud-noart {
  739. width: 80px;
  740. height: 30px;
  741. line-height: 15px;
  742. padding: 35px 10px;
  743. font-family: opsans;
  744. font-size: 10px;
  745. background-color: #f5f5f5;
  746. color: #aaa;
  747. text-transform: uppercase;
  748. letter-spacing: 1px;
  749. text-align: center;
  750. font-style: italic;
  751. border-radius: 5px;
  752. }
  753.  
  754. .aud-specs {
  755. height: 100px;
  756. margin: 0 100px;
  757. padding-left: 20px;
  758. }
  759.  
  760. .aud-specs-center {
  761. position: relative;
  762. top: 50%;
  763. transform: translateY(-50%);
  764. }
  765.  
  766. .aud-track {
  767. font-family: gogoia;
  768. font-size: 26px;
  769. }
  770.  
  771. .aud-artist-album {
  772. font-family: opsans;
  773. font-size: 12px;
  774. font-style: italic;
  775. }
  776.  
  777. .audd {margin-left: -5px;}
  778.  
  779. .audioplayer {
  780. overflow: hidden;
  781. width: 25px;
  782. height: 25px;
  783. background-color: #f2f2f2;
  784. border-radius: 5px;
  785. overflow: hidden;
  786. position: absolute;
  787. z-index: 1;
  788. margin: 47.5px 107.5px;
  789. opacity: 0;
  790. transition: 0.6s;
  791. }
  792.  
  793. .entry:hover .aud-albumart {
  794. {block:ifpostblureffect}
  795. filter: blur(2px);
  796. -webkit-filter: blur(2px);
  797. {/block:ifpostblureffect}
  798. }
  799.  
  800. .entry:hover .audioplayer {opacity: 0.4;}
  801. .entry:hover .audioplayer:hover {opacity: 1;}
  802.  
  803. .ans-icon {
  804. font-size: 24px;
  805. color: {color:post type icon};
  806. width: 45px;
  807. text-align: center;
  808. }
  809.  
  810. .askericon {
  811. border-radius: 5px;
  812. width: 48px;
  813. height: 48px;
  814. }
  815.  
  816. .ans-c-1 {
  817. padding: 10px 0 10px 20px;
  818. width: 48px;
  819. height: 48px;
  820. border-left: 1px solid {color:inner post borders};
  821. }
  822. .ans-c-2 {
  823. width: 360px;
  824. margin-left: 15px;
  825. }
  826.  
  827. .asker-name {
  828. font-family: opsans;
  829. font-size: 10px;
  830. text-transform: uppercase;
  831. letter-spacing: 2px;
  832. color: {color:body};
  833. }
  834.  
  835. .ans-qn {
  836. font-family: opsans;
  837. font-size: 11px;
  838. letter-spacing: 1px;
  839. color: {color:body};
  840. }
  841.  
  842. .entry-border-v1, .entry-border-v2 {
  843. height: 100px;
  844. width: 1px;
  845. background-color: {color:theme borders};
  846. position: absolute;
  847. transition: 0.8s;
  848. }
  849.  
  850. .entry-border-h1, .entry-border-h2 {
  851. height: 1px;
  852. width: 100px;
  853. background-color: {color:theme borders};
  854. position: absolute;
  855. transition: 0.8s;
  856. }
  857.  
  858. .entry-border-v1 {opacity:0;margin:50px 0 0 530px;}
  859. .entry:hover .entry-border-v1 {opacity:1;margin:-50px 0 0 530px;}
  860. .entry-border-h1 {opacity:0;margin:-30px 0 0 350px;}
  861. .entry:hover .entry-border-h1 {opacity:1;margin:-30px 0 0 450px;}
  862. .entry-border-v2 {opacity:0;margin:-150px 0 0 -30px;}
  863. .entry:hover .entry-border-v2 {opacity:1;margin:-50px 0 0 -30px;}
  864. .entry-border-h2 {opacity:0;margin:30px 0 0 50px;}
  865. .entry:hover .entry-border-h2 {opacity:1;margin:30px 0 0 -50px;}
  866.  
  867. .perma {
  868. margin-top: 20px;
  869. width: 500px;
  870. height: 16px;
  871. opacity: 0;
  872. transition: 0.8s;
  873. }
  874.  
  875. .perma a { color: {color:permalink text}; }
  876.  
  877. .entry:hover .perma {opacity: 1;}
  878.  
  879. .perma-time, .perma-notes, .perma-viasrc {
  880. float: left;
  881. width: 161px;
  882. }
  883.  
  884. .perma-time-icon, .perma-notes-icon, .perma-viasrc-icon, .perma-tags-icon, .perma-rbg-icon {
  885. width: 16px;
  886. height: 16px;
  887. color: #fff;
  888. border-radius: 10000px;
  889. line-height: 18px;
  890. font-size: 10px;
  891. text-align: center;
  892. cursor: pointer;
  893. position: absolute;
  894. }
  895.  
  896. .perma-time-icon {background-color:{color:permalink time icon};}
  897. .perma-notes-icon {background-color:{color:permalink notes icon};}
  898. .perma-viasrc-icon {background-color:{color:permalink sources icon};}
  899. .perma-rbg-icon {background-color:{color:permalink reblog icon};}
  900. .perma-tags-icon {background-color:{color:permalink tags icon};}
  901.  
  902. .perma-txt {
  903. font-family: opsans;
  904. font-size: 10px;
  905. text-transform: uppercase;
  906. letter-spacing: 1px;
  907. margin: 0 0 0 26px;
  908. width: 120px;
  909. color: {color:permalink text};
  910. }
  911.  
  912. .perma-txt a { color: {color:permalink text}; }
  913.  
  914. .perma-tags-icon {
  915. {block:ifshowreblogbutton}margin-left: 462px;{/block:ifshowreblogbutton}
  916. {block:ifnotshowreblogbutton}
  917. margin-left: 494px;
  918. {/block:ifnotshowreblogbutton}
  919. }
  920.  
  921. .perma-rbg-icon { margin-left: 484px; }
  922.  
  923. .hidden-tags {
  924. font-family: opsans;
  925. font-size: 10px;
  926. text-transform: uppercase;
  927. letter-spacing: 1px;
  928. margin-top: 10px;
  929. line-height: 24px;
  930. opacity: 0;
  931. display: none;
  932. transition: 0.8s;
  933. }
  934.  
  935. .entry:hover .hidden-tags { opacity: 1; }
  936.  
  937. .hidden-tags a {
  938. background-color: {color:permalink tags background};
  939. color: {color:permalink tags};
  940. padding: 2px 4px;
  941. border-radius: 3px;
  942. margin-right: 6px;
  943. transition: 0.6s;
  944. }
  945.  
  946. .hidden-tags a:hover {
  947. background-color: {color:permalink tags background hover};
  948. color: {color:permalink tags hover};
  949. font-style: italic;
  950. }
  951.  
  952. .entry-perma {
  953. width: 500px;
  954. text-align: left;
  955. margin-top: 40px;
  956. }
  957.  
  958. .entry-perma-icon {
  959. float: left;
  960. width: 20px;
  961. height: 20px;
  962. color: #fff;
  963. text-align: center;
  964. line-height: 24px;
  965. border-radius: 3px;
  966. font-size: 12px;
  967. margin-right: 16px;
  968. }
  969.  
  970. #ep1 { background-color: {color:permalink time icon}; }
  971. #ep2 { background-color: {color:permalink notes icon}; }
  972. #ep3 { background-color: {color:permalink sources icon}; }
  973. #ep4 { background-color: {color:permalink tags icon}; }
  974.  
  975. .entry-perma-txt {
  976. font-family: opsans;
  977. font-size: 12px;
  978. color: {color:body};
  979. line-height: 20px;
  980. margin-bottom: 6px;
  981. }
  982.  
  983. #applepie {
  984. width: 500px;
  985. font-family: opsans;
  986. font-size: {text:body font size}px;
  987. text-align: left;
  988. color: {color:body};
  989. padding-top: 20px;
  990. }
  991.  
  992. .notes li {
  993. width: 500px;
  994. font-family: opsans;
  995. font-size: {text:body font size}px;
  996. padding: 10px 0;
  997. margin-bottom: 5px;
  998. border-top: 1px solid {color:inner post borders};
  999. margin-left: -40px;
  1000. }
  1001.  
  1002. .notes img {
  1003. margin-right: 10px;
  1004. float: left;
  1005. width: 13px;
  1006. height: 13px;
  1007. border-radius: 2px;
  1008. }
  1009.  
  1010. ol.notes {
  1011. width: 500px;
  1012. list-style-type: none;
  1013. }
  1014.  
  1015. #pagii {
  1016. margin-top: 40px;
  1017. margin-bottom: 100px;
  1018. width: 500px;
  1019. text-align: center;
  1020. }
  1021.  
  1022. .pagination {
  1023. font-family: opsans;
  1024. font-size: 16px;
  1025. color: {color:body};
  1026. letter-spacing: 10px;
  1027. }
  1028.  
  1029. .pagination a {
  1030. color: {color:body links};
  1031. transition: 0.6s;
  1032. }
  1033.  
  1034. .pagination a:hover {
  1035. color: {color:body links hover};
  1036. }
  1037.  
  1038. {CustomCSS}
  1039.  
  1040. </style>
  1041. </head>
  1042. <body>
  1043.  
  1044. <center>
  1045.  
  1046. <center><div class="wdw-more"><center>
  1047. <div class="more-content">
  1048.  
  1049. <div class="btn-more-close"><span class="sf sf-cross-o"></span></div>
  1050.  
  1051. <div class="more-h-d1"></div>
  1052. <div class="more-h-d2"></div>
  1053. <div class="more-v-d1"></div>
  1054. <div class="more-v-d2"></div>
  1055.  
  1056. <a href="/archive"><div class="more-link">archives</div></a>
  1057. <a href="/submit"><div class="more-link">submit</div></a>
  1058. <a href="http://yukoki.tumblr.com"><div class="more-link">theme</div></a>
  1059. {block:ifthreecustomlinks}
  1060. <a href="{text:link 1 URL}"><div class="more-link">{text:link 1}</div></a>
  1061. <a href="{text:link 2 URL}"><div class="more-link">{text:link 2}</div></a>
  1062. <a href="{text:link 3 URL}"><div class="more-link">{text:link 3}</div></a>
  1063. {/block:ifthreecustomlinks}
  1064. {block:ifsixcustomlinks}
  1065. <a href="{text:link 1 URL}"><div class="more-link">{text:link 1}</div></a>
  1066. <a href="{text:link 2 URL}"><div class="more-link">{text:link 2}</div></a>
  1067. <a href="{text:link 3 URL}"><div class="more-link">{text:link 3}</div></a>
  1068. <a href="{text:link 4 URL}"><div class="more-link">{text:link 4}</div></a>
  1069. <a href="{text:link 5 URL}"><div class="more-link">{text:link 5}</div></a>
  1070. <a href="{text:link 6 URL}"><div class="more-link">{text:link 6}</div></a>
  1071. {/block:ifsixcustomlinks}
  1072.  
  1073. </center></div><!--more-content-->
  1074. </div></center>
  1075.  
  1076. <div class="overlay-more"></div>
  1077.  
  1078. <div id="header">
  1079.  
  1080. <div class="border-topleft-hori"></div>
  1081. <div class="border-topleft-vert"></div>
  1082. <div class="border-bottomright-hori"></div>
  1083. <div class="border-bottomright-vert"></div>
  1084.  
  1085. <div class="navsq-icons">
  1086.  
  1087. <div class="navsq-ic" id="navsq-ic-blog">
  1088. <a title="index" href="/"><span class="sf sf-sand-clock-o"></span></a>
  1089. </div>
  1090.  
  1091. <div class="navsq-ic" id="navsq-ic-ask">
  1092. <a title="contact" href="/ask"><span class="sf sf-poet-o"></span></a>
  1093. </div>
  1094.  
  1095. <div class="navsq-ic" id="navsq-ic-more">
  1096. <span class="btn-more"><a title="+ more"><span class="sf sf-push-pin-o"></span></a></span>
  1097. </div>
  1098.  
  1099. <div class="navsq-ic" id="navsq-ic-thm">
  1100. <a title="theme credit" href="http://yukoki.tumblr.com"><span class="sf sf-leaf-2-o"></span></a>
  1101. </div>
  1102.  
  1103. </div><!--navsq-icons-->
  1104.  
  1105. <div class="navigationsquare">
  1106. <div class="navsq-vertline"></div><div class="navsq-horiline"></div>
  1107. </div><!--navigationsquare-->
  1108.  
  1109. <img class="headericon" src="{image:header}">
  1110.  
  1111. <div class="headercontainer">
  1112. <div class="headercontent">
  1113. <div class="headertitle"><t><div class="sf sf-{text:blog title icon}"></div>{Title}</t></div>
  1114. <div class="headerdescription">{description}</div>
  1115. </div><!--headercontent-->
  1116. </div><!--headercontainer-->
  1117.  
  1118. </div><!--header-->
  1119.  
  1120. </center>
  1121.  
  1122. <center>
  1123. <div id="content">
  1124.  
  1125. {block:Posts}
  1126.  
  1127. <div class="entry">
  1128.  
  1129. {block:indexpage}<div class="entry-border-v1"></div><div class="entry-border-h1"></div>{/block:indexpage}
  1130.  
  1131. {block:text}
  1132. {block:Title}<div class="entry-title"><div class="entry-title-icon"><span class="sf sf-feather-o"></span></div>{Title}</div>{/block:Title}
  1133. <div class="entry-body">{Body}</div>
  1134. {/block:text}
  1135.  
  1136. {block:Photo}
  1137. <center><img class="photo" src="{PhotoURL-500}"></center>
  1138. {block:indexpage}
  1139. {block:ifshowcaptions}
  1140. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1141. {/block:ifshowcaptions}
  1142. {/block:indexpage}
  1143. {block:permalinkpage}
  1144. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1145. {/block:permalinkpage}
  1146. {/block:Photo}
  1147.  
  1148. {block:Photoset}
  1149. <div class="photo">{Photoset-500}</div>
  1150. {block:indexpage}
  1151. {block:ifshowcaptions}
  1152. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1153. {/block:ifshowcaptions}
  1154. {/block:indexpage}
  1155. {block:permalinkpage}
  1156. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1157. {/block:permalinkpage}
  1158. {/block:Photoset}
  1159.  
  1160. {block:Quote}
  1161. <div class="entry-title"><div class="entry-title-icon"><span class="sf sf-quotation-mark"></span></div>{Quote}</div>
  1162. {block:Source}<div class="entry-body"><ul><i>{Source}</i></ul></div>{/block:Source}
  1163. {/block:Quote}
  1164.  
  1165. {block:Audio}
  1166. {block:AudioPlayer}<div class="audioplayer"><div class="audd">{AudioPlayer}</div></div>{/block:AudioPlayer}
  1167. <div class="entry-aud">
  1168. <div class="aud-icon"><span class="sf sf-music-note-o"></span></div>
  1169. <div class="aud-info">
  1170. <div class="aud-albmart-holder">
  1171. {block:AlbumArt}
  1172. <img class="aud-albumart" src="{AlbumArtURL}">
  1173. {/block:AlbumArt}
  1174. <div class="aud-noart">album art unavailable</div>
  1175. </div><!--aud-albmart-holder-->
  1176. <div class="aud-specs">
  1177. <div class="aud-specs-center">
  1178. {block:TrackName}
  1179. <div class="aud-track">{TrackName}</div>
  1180. {/block:TrackName}
  1181. <div class="aud-artist-album">
  1182. {block:Artist}{Artist}{/block:Artist} |
  1183. {block:Album}{Album}{/block:Album}
  1184. </div><!--aud-artist-album-->
  1185. </div><!--aud-specs-center-->
  1186. </div><!--aud-specs-->
  1187. </div><!--aud-info-->
  1188. </div><!--entry-aud-->
  1189. {block:indexpage}
  1190. {block:ifshowcaptions}
  1191. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1192. {/block:ifshowcaptions}
  1193. {/block:indexpage}
  1194. {block:permalinkpage}
  1195. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1196. {/block:permalinkpage}
  1197. {/block:Audio}
  1198.  
  1199. {block:Link}
  1200. {block:Thumbnail}<img src="{Thumbnail}">{/block:Thumbnail}
  1201. <div class="entry-title"><div class="entry-title-icon"><span class="sf sf-link-2"></span></div><a href="{URL}">{Name}</a></div>
  1202. {block:Description}<div class="entry-body">{Description}</div>{/block:Description}
  1203. {/block:Link}
  1204.  
  1205. {block:Chat}
  1206. {block:Title}<div class="entry-title"><div class="entry-title-icon"><span class="sf sf-chat-bubbles-o"></span></div>{Title}</div>{/block:Title}
  1207. <table style="width:100%">
  1208. {block:Lines}
  1209. <tr>
  1210. <td>{block:Label}<div class="{Alt}name">{Label}</div>{/block:Label}</td>
  1211. <td><div class="line">{Line}</div></td>
  1212. </tr>
  1213. {/block:Lines}
  1214. </table>
  1215. {/block:Chat}
  1216.  
  1217. {block:Video}
  1218. {Video-500}
  1219. {block:indexpage}
  1220. {block:ifshowcaptions}
  1221. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1222. {/block:ifshowcaptions}
  1223. {/block:indexpage}
  1224. {block:permalinkpage}
  1225. <div class="entry-body">{block:Caption}{Caption}{/block:Caption}</div>
  1226. {/block:permalinkpage}
  1227. {/block:Video}
  1228.  
  1229. {block:Answer}
  1230. <table style="width:100%">
  1231. <tr>
  1232. <td><div class="ans-icon"><span class="sf sf-poet-o"></span></div></td>
  1233. <td><div class="ans-c-1"><img class="askericon" src="{AskerPortraitURL-48}"></div></td>
  1234. <td><div class="ans-c-2"><div class="asker-name">{Asker} inquired -</div><div class="ans-qn">{Question}</div></div></td>
  1235. </tr>
  1236. </table>
  1237. <div class="entry-body">{Answer}</div>
  1238. {/block:Answer}
  1239.  
  1240. {Block:PermalinkPage}{Block:Date}
  1241.  
  1242. <div class="entry-perma">
  1243.  
  1244. <span class="entry-perma-icon" id="ep1"><span class="sf sf-clock-3-o"></span></span><div class="entry-perma-txt">{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}, at {12Hour}.{Minutes}{AmPm}</div>
  1245.  
  1246. {Block:NoteCount}
  1247. <span class="entry-perma-icon" id="ep2"><span class="sf sf-heart-2-o"></span></span><div class="entry-perma-txt">{NoteCountWithLabel}</div>
  1248. {/Block:NoteCount}
  1249.  
  1250. {block:RebloggedFrom}
  1251. <span class="entry-perma-icon" id="ep3"><span class="sf sf-bookmark-o"></span></span><div class="entry-perma-txt">Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1252. {/block:RebloggedFrom}
  1253.  
  1254. {block:HasTags}
  1255. <span class="entry-perma-icon" id="ep4"><span class="sf sf-tag-o"></span></span><div class="entry-perma-txt">
  1256. {block:Tags}
  1257. <a href="{TagURL}">#{Tag}</a>
  1258. {/block:Tags}
  1259. </div>
  1260. {/block:HasTags}
  1261.  
  1262. </div><!--entry-perma-->
  1263.  
  1264. <div id="applepie">{PostNotes-16}</div>
  1265.  
  1266. {/Block:Date}{/Block:PermalinkPage}
  1267.  
  1268. {block:indexpage}{block:Date}<div class="perma">
  1269.  
  1270. <a title="{12HourWithZero}.{Minutes}{CapitalAmPm}" href="{Permalink}"><div class="perma-time">
  1271. <div class="perma-time-icon"><span class="sf sf-clock-3-o"></span></div>
  1272. <div class="perma-txt">{DayOfWeek} {DayOfMonthWithZero} {ShortMonth}</div>
  1273. </div><!--perma-time--></a>
  1274.  
  1275. {block:NoteCount}<a href="{Permalink}"><div class="perma-notes">
  1276. <div class="perma-notes-icon"><span class="sf sf-heart-2-o"></span></div>
  1277. <div class="perma-txt">{NoteCount} %</div>
  1278. </div><!--perma-notes--></a>{/block:NoteCount}
  1279.  
  1280. {block:RebloggedFrom}<div class="perma-viasrc">
  1281. <div class="perma-viasrc-icon"><span class="sf sf-bookmark-o"></span></div>
  1282. <div class="perma-txt"><a href="{ReblogParentURL}" title="from {ReblogParentName}">via</a> / <a href="{ReblogRootURL}" title="originally {ReblogRootName}">src</a></div>
  1283. </div><!--perma-time-->{/block:RebloggedFrom}
  1284.  
  1285. {block:ifshowreblogbutton}<a href="{ReblogURL}" title="reblog ?">
  1286. <div class="perma-rbg-icon"><span class="sf sf-reblog-o"></span></div>
  1287. </a>{/block:ifshowreblogbutton}
  1288.  
  1289. {block:iftagsonindex}
  1290. {block:HasTags}<a title="show tags"><div class="perma-tags-icon"><span class="sf sf-tag-o"></span></div></a>{/block:HasTags}
  1291. {/block:iftagsonindex}
  1292.  
  1293. </div><!--perma-->{/block:Date}{/block:indexpage}
  1294.  
  1295. {block:HasTags}<div class="hidden-tags">
  1296. {block:Tags}
  1297. <a href="{TagURL}">#{Tag}</a>
  1298. {/block:Tags}
  1299. </div><!--hidden-tags-->{/block:HasTags}
  1300.  
  1301. {block:indexpage}<div class="entry-border-v2"></div><div class="entry-border-h2"></div>{/block:indexpage}
  1302.  
  1303. </div><!--entry-->
  1304.  
  1305. {block:ContentSource}
  1306. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1307. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1308. {/block:SourceLogo}
  1309. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1310. {/block:ContentSource}
  1311. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1312.  
  1313. {/block:Posts}
  1314.  
  1315. </div><!--content-->
  1316.  
  1317. <div id="pagii">
  1318. {block:Pagination}<div class="pagination">
  1319. {block:PreviousPage}
  1320. <a href="{PreviousPage}">←</a>
  1321. {/block:PreviousPage}
  1322. {block:JumpPagination length="5"}
  1323. {block:CurrentPage}
  1324. <span class="current_page">{PageNumber}</span>
  1325. {/block:CurrentPage}
  1326. {block:JumpPage}
  1327. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1328. {/block:JumpPage}
  1329. {/block:JumpPagination}
  1330. {block:NextPage}
  1331. <a href="{NextPage}">→</a>
  1332. {/block:NextPage}
  1333. </div><!--pagination-->{/block:Pagination}
  1334. </div><!--pagii-->
  1335.  
  1336. </center>
  1337.  
  1338. <div class="tctrl"><span class="sf sf-cog-o"></span></div>
  1339.  
  1340. </body>
  1341. </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!