API tools faq
paste
Advertisement
mogimochi

Theme [18]:re Hiraeth

mogimochi
Mar 1st, 2018
11,763
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 18 Hiraeth
  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 060318 -->
  16.  
  17. <meta name="image:background" content="">
  18. <meta name="image:sidebar image" content="">
  19. <meta name="image:slide menu image" content="">
  20.  
  21. <meta name="color:tooltips background" content="#000000">
  22. <meta name="color:tooltips text" content="#ffffff">
  23. <meta name="color:scrollbar" content="#d79e9e">
  24. <meta name="color:text highlight" content="#edd4d4">
  25. <meta name="color:background" content="#ffffff">
  26. <meta name="color:page side border" content="#6c7579">
  27.  
  28. <meta name="color:blog title" content="#5c5c5c">
  29. <meta name="color:subtitle" content="#000000">
  30. <meta name="color:accent" content="#abc8d0">
  31. <meta name="color:navigation links" content="#86a2a5">
  32. <meta name="color:navigation links hover" content="#000000">
  33.  
  34. <meta name="color:description" content="#dddddd">
  35. <meta name="color:description bold" content="#ffffff">
  36. <meta name="color:description italic" content="#ffffff">
  37. <meta name="color:description links" content="#8ed0dc">
  38. <meta name="color:description links hover" content="#ffffff">
  39.  
  40. <meta name="color:slide menu title" content="#bbcad1">
  41. <meta name="color:slide menu links text" content="#ffffff">
  42. <meta name="color:slide menu links border" content="#bbcad1">
  43. <meta name="color:slide menu links hover text" content="#ffffff">
  44. <meta name="color:slide menu links hover background" content="#bbcad1">
  45.  
  46. <meta name="color:post divider" content="#eaeaea">
  47.  
  48. <meta name="color:body" content="#3a3a3a">
  49. <meta name="color:body bold" content="#676d6d">
  50. <meta name="color:body italic" content="#888888">
  51. <meta name="color:body links" content="#a9c7cf">
  52. <meta name="color:body links underline" content="#dddddd">
  53. <meta name="color:body links hover" content="#aaaaaa">
  54. <meta name="color:body links hover underline" content="#aaaaaa">
  55. <meta name="color:blockquote" content="#888888">
  56.  
  57. <meta name="color:post title" content="#5c5c5c">
  58. <meta name="color:link post title" content="#aaaaaa">
  59. <meta name="color:link post title hover" content="#666666">
  60.  
  61. <meta name="color:quote post" content="#596b6d">
  62. <meta name="color:quote source" content="#999999">
  63. <meta name="color:chat post dividers" content="#eaeaea">
  64. <meta name="color:chat post even names" content="#7fa29f">
  65. <meta name="color:chat post even lines" content="#555555">
  66. <meta name="color:chat post odd names" content="#c0d5da">
  67. <meta name="color:chat post odd lines" content="#999999">
  68. <meta name="color:audio post background" content="#fafafa">
  69.  
  70. <meta name="color:permalink background" content="#f8f8f8">
  71. <meta name="color:permalink text" content="#aaaaaa">
  72. <meta name="color:permalink hover background" content="#ffffff">
  73. <meta name="color:permalink hover text" content="#bbbbbb">
  74. <meta name="color:tags" content="#888888">
  75. <meta name="color:tags hover" content="#000000">
  76.  
  77. <meta name="color:post permalink background" content="#f8f8f8">
  78. <meta name="color:post permalink text" content="#666666">
  79.  
  80. <meta name="if:always show slide out menu" content="0">
  81. <meta name="if:monochrome posts" content="1">
  82. <meta name="if:fading photos" content="1">
  83. <meta name="if:show reblog button on index" content="1">
  84. <meta name="if:show tags on index" content="1">
  85.  
  86. <meta name="text:link 1 name" content="link">
  87. <meta name="text:link 1 url" content="/">
  88. <meta name="text:link 2 name" content="link">
  89. <meta name="text:link 2 url" content="/">
  90. <meta name="text:link 3 name" content="link">
  91. <meta name="text:link 3 url" content="/">
  92. <meta name="text:link 4 name" content="link">
  93. <meta name="text:link 4 url" content="/">
  94.  
  95. <meta name="text:subtitle" content="unseen, unheard, unfelt">
  96. <meta name="text:sidebar image height" content="300">
  97. <meta name="text:slide menu title" content="more info">
  98.  
  99. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  100. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  101. <link rel="shortcut icon" href="{Favicon}" />
  102.  
  103. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  104.  
  105. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  106. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  107. <script>
  108. (function($){
  109. $(document).ready(function(){
  110. $("a[title]").style_my_tooltips({
  111. tip_follows_cursor:true,
  112. tip_delay_time:0,
  113. tip_fade_speed:300,
  114. attribute:"title"
  115. });
  116. });
  117. })(jQuery);
  118. </script>
  119.  
  120. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  121.  
  122. <!--JAVA-->
  123. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  124. <script>
  125. $(document).ready(function(){
  126.  
  127. $("#btn-more").click(function(){
  128. $(".sidestrip").addClass("show-sidestrip");
  129. $(".side").addClass("show-side");
  130. $(".bottomleft").addClass("show-bottomleft");
  131. $(".content").addClass("show-content");
  132. $("#btn-more").toggle();
  133. $("#btn-less").toggle();
  134. });
  135.  
  136. $("#btn-less").click(function(){
  137. $(".sidestrip").removeClass("show-sidestrip");
  138. $(".side").removeClass("show-side");
  139. $(".bottomleft").removeClass("show-bottomleft");
  140. $(".content").removeClass("show-content");
  141. $("#btn-more").toggle();
  142. $("#btn-less").toggle();
  143. });
  144.  
  145. $(".btn-showtags").click(function(){
  146. $(".show-hidetags").toggle();
  147. var location = $(this).parent().parent();
  148. $(".entry-tags",location).slideToggle("slow");
  149. });
  150.  
  151. // fix found by joekarl on stackoverflow
  152. // https://stackoverflow.com/questions/6347016/apply-function-to-only-one-div-class-not-all
  153.  
  154. });
  155. </script>
  156. <!--END JAVA-->
  157.  
  158. <style type="text/css">
  159.  
  160. @font-face { font-family: "bebas"; src: url('https://dl.dropboxusercontent.com/s/mpb5uqcayz0sai1/BebasNeue.otf'); }
  161. @font-face { font-family: "opsans"; src: url('https://dl.dropboxusercontent.com/s/6t6k1zdmq4v9u8b/OpenSans-Light.ttf'); }
  162.  
  163. ::-webkit-scrollbar { width: 7px; background-color: {color:background}; }
  164. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  165. ::-webkit-scrollbar-thumb:vertical {
  166. width: 7px;
  167. background-color: {color:scrollbar};
  168. }
  169.  
  170. ::selection {
  171. color: #fff;
  172. background-color: {color:text highlight};
  173. }
  174.  
  175. ::-moz-selection {
  176. color: #fff;
  177. background-color: {color:text highlight};
  178. }
  179.  
  180. #s-m-t-tooltip {
  181. z-index: 1000000000000000000000000000000000000;
  182. max-width: 300px;
  183. background-color: rgba({RGBcolor:tooltips background},0.8);
  184. color: {color:tooltips text};
  185. text-transform: uppercase;
  186. letter-spacing: 1px;
  187. font-family: opsans;
  188. font-size: 8px;
  189. padding: 2px 6px;
  190. margin: 20px 0 0 20px;
  191. }
  192.  
  193. body {
  194. background-color: {color:background};
  195. background-image: url({image:background});
  196. background-attachment: fixed;
  197. margin: 0;
  198. word-wrap: break-word;
  199. }
  200. a { text-decoration:none; }
  201.  
  202. .side {
  203. position: fixed;
  204. top: 80px;
  205. left: 110px;
  206. width: 250px;
  207. transition: 1.8s;
  208. {block:ifalwaysshowslideoutmenu}
  209. left: 280px;
  210. {/block:ifalwaysshowslideoutmenu}
  211. }
  212.  
  213. .show-side { left: 280px ; }
  214.  
  215. .overside {
  216. width: 220px;
  217. margin: 10px;
  218. height: calc( {text:sidebar image height}px - 30px );
  219. border: 5px solid {color:background};
  220. position: absolute;
  221. }
  222.  
  223. .sideimg {
  224. width: 250px;
  225. display: block;
  226. }
  227.  
  228. .btitle {
  229. font-family: bebas;
  230. font-size: 20px;
  231. letter-spacing: 10px;
  232. color: {color:blog title};
  233. text-align: center;
  234. margin-top: 30px;
  235. }
  236.  
  237. .bsubtitle {
  238. text-align: center;
  239. letter-spacing: 2px;
  240. font-family: opsans;
  241. font-size: 10px;
  242. font-style: italic;
  243. color: {color:subtitle};
  244. margin-bottom: 20px;
  245. }
  246.  
  247. .krypton {
  248. height: 3px;
  249. border-radius: 100px;
  250. width: 60px;
  251. margin: 20px 0;
  252. background-color: {color:accent};
  253. }
  254.  
  255. .nav {
  256. width: 250px;
  257. text-align: center;
  258. font-family: opsans;
  259. font-size: 10px;
  260. text-transform: uppercase;
  261. letter-spacing: 1px;
  262. }
  263.  
  264. .nav a {
  265. margin: 0 7px;
  266. color: {color:navigation links};
  267. text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  268. transition: 0.6s;
  269. cursor: pointer;
  270. }
  271.  
  272. .nav:hover a {
  273. color: #bbb;
  274. text-shadow: 2px 0 0 #ddd, -2px 0 0 #ddd;
  275. }
  276.  
  277. .nav:hover a:hover {
  278. color: {color:navigation links hover};
  279. text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  280. }
  281.  
  282. .sidestrip {
  283. position: fixed;
  284. top: 0;
  285. left: -170px;
  286. height: 100%;
  287. width: 140px;
  288. padding: 30px;
  289. background-color: {color:page side border};
  290. transition: 1.8s;
  291. {block:ifalwaysshowslideoutmenu}
  292. left: 0;
  293. {/block:ifalwaysshowslideoutmenu}
  294. }
  295.  
  296. .show-sidestrip {
  297. left: 0;
  298. }
  299.  
  300. .side-content { position: relative; z-index: 15; }
  301.  
  302. .desc {
  303. font-family: opsans;
  304. font-size: 10px;
  305. color: {color:description};
  306. text-align: center;
  307. letter-spacing: 1px;
  308. line-height: 18px;
  309. padding-bottom: 20px;
  310. border-bottom: 1px solid #bbcad1;
  311. }
  312.  
  313. .desc b,strong { font-weight: 400; color: {color:description bold}; }
  314. .desc i,em { color: {color:description italic}; }
  315. .desc a { color: {color:description links}; border-bottom: 1px solid {color:description links}; transition: 0.6s; }
  316. .desc a:hover { color: {color:description links hover}; border-bottom: 1px solid {color:description links hover}; }
  317.  
  318. .sidet {
  319. font-family: bebas;
  320. font-size: 16px;
  321. color: {color:slide menu title};
  322. text-align: center;
  323. letter-spacing: 2px;
  324. margin: 15px 0 10px 0;
  325. }
  326.  
  327. .sideic {
  328. width: 64px;
  329. height: 64px;
  330. border-radius: 1000px;
  331. margin-left: 38px;
  332. }
  333.  
  334. .bottomleft {
  335. position: fixed;
  336. z-index: 10;
  337. bottom: -40px;
  338. left: -170px;
  339. width: 200px;
  340. transition: 1.8s;
  341. opacity: 0;
  342. {block:ifalwaysshowslideoutmenu}
  343. opacity: 1;
  344. bottom: 0;
  345. left: 0;
  346. {/block:ifalwaysshowslideoutmenu}
  347. }
  348.  
  349. .show-bottomleft {
  350. opacity: 1;
  351. bottom: 0;
  352. left: 0;
  353. }
  354.  
  355. .bl-gradient {
  356. width: 200px;
  357. height: 140px;
  358. position: absolute;
  359. z-index: 11;
  360. background: -moz-linear-gradient(top, rgba({RGBcolor:page side border},1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  361. background: -webkit-linear-gradient(top, rgba({RGBcolor:page side border},1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  362. background: linear-gradient(to bottom, rgba({RGBcolor:page side border},1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  363. }
  364.  
  365. .bl-img {
  366. width: 200px;
  367. display: block;
  368. }
  369.  
  370. .clink {
  371. padding: 5px 10px;
  372. color: {color:slide menu links text};
  373. text-transform: uppercase;
  374. letter-spacing: 3px;
  375. font-size: 9px;
  376. font-family: opsans;
  377. border-bottom: 1px solid {color:slide menu links border};
  378. transition: 1.0s;
  379. }
  380.  
  381. .clink:hover {
  382. color: {color:slide menu links hover text};
  383. background-color: {color:slide menu links hover background};
  384. }
  385.  
  386. #btn-less {display: none;}
  387.  
  388. #cr {
  389. font-family: opsans;
  390. font-size: 9px;
  391. text-transform: uppercase;
  392. letter-spacing: 2px;
  393. padding: 3px 6px;
  394. background-color: #fff;
  395. color: #000;
  396. position: fixed;
  397. bottom: 5px;
  398. right: 5px;
  399. transition: 1.0s;
  400. }
  401.  
  402. #cr:hover { background-color: #000; color: #bbb; }
  403.  
  404. .content {
  405. width: 500px;
  406. margin-top: 60px;
  407. margin-left: 440px;
  408. transition: 1.8s;
  409. {block:ifalwaysshowslideoutmenu}
  410. margin-left: 610px;
  411. {/block:ifalwaysshowslideoutmenu}
  412. }
  413.  
  414. .show-content { margin-left: 610px; }
  415.  
  416. .krypton-end {
  417. width: 300px;
  418. height: 1px;
  419. background-color: {color:post divider};
  420. margin: 80px 0;
  421. }
  422.  
  423. .entry-title, .entry-link {
  424. font-family: bebas;
  425. font-size: 20px;
  426. text-align: center;
  427. letter-spacing: 6px;
  428. color: {color:post title};
  429. }
  430.  
  431. .entry-link { color: {color:link post title}; transition: 1.0s; }
  432. .entry-link:hover { color: {color:link post title hover}; }
  433.  
  434. .krypton-e {
  435. height: 3px;
  436. border-radius: 100px;
  437. width: 60px;
  438. margin: 20px 0;
  439. background-color: {color:accent};
  440. }
  441.  
  442. .entry-body {
  443. font-family: opsans;
  444. font-size: 12px;
  445. color: {color:body};
  446. letter-spacing: 1px;
  447. line-height: 20px;
  448. }
  449.  
  450. .entry-body b,strong, .post-perma b,strong { color: {color:body bold}; font-weight: 400; }
  451. .entry-body i,em { color: {color:body italic}; }
  452. .entry-body a, .entry-q-src a, .asker-name a, .post-perma a, #applepie a {
  453. color: {color:body links};
  454. padding-bottom: 1px;
  455. border-bottom: 1px solid {color:body links};
  456. transition: 0.8s;
  457. }
  458. .entry-body a:hover, .entry-q-src a:hover, .asker-name a:hover, .post-perma a:hover, #applepie a:hover { color: {color:body links hover}; border-bottom: 1px solid {color:body links hover underline}; }
  459.  
  460. .entry-quote {
  461. font-family: bebas;
  462. font-size: 24px;
  463. letter-spacing: 4px;
  464. color: {color:quote post};
  465. text-align: center;
  466. }
  467.  
  468. .entry-q-src {
  469. font-family: opsans;
  470. font-size: 10px;
  471. font-style: italic;
  472. text-align: center;
  473. letter-spacing: 1px;
  474. color: {color:quote source};
  475. margin-top: 10px;
  476. }
  477.  
  478. .entry-photo, .albartimg {
  479. {block:ifmonochromeposts}
  480. 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+ */
  481. filter: gray; /* IE6-9 */
  482. -webkit-filter: grayscale(1);
  483. {/block:ifmonochromeposts}
  484. -webkit-transition: all 0.5s ease-in-out;
  485. -moz-transition: all 0.5s ease-in-out;
  486. -o-transition: all 0.5s ease-in-out;
  487. -ms-transition: all 0.5s ease-in-out;
  488. transition: all 0.5s ease-in-out;
  489. {block:iffadingphotos}
  490. opacity: 0.5;
  491. {/block:iffadingphotos}
  492. }
  493.  
  494. .entry:hover .entry-photo, .entry:hover .albartimg {
  495. filter: none;
  496. -webkit-filter: grayscale(0);
  497. -webkit-transition: all 0.7s ease-in-out;
  498. -moz-transition: all 0.7s ease-in-out;
  499. -o-transition: all 0.7s ease-in-out;
  500. opacity: 1.0;
  501. }
  502.  
  503. .line {
  504. font-family: opsans;
  505. font-size: 12px;
  506. padding: 10px 0;
  507. border-bottom: 1px solid {color:chat post dividers};
  508. }
  509. .odd .line { color: {color:chat post odd lines}; }
  510. .even .line { color: {color:chat post even lines}; }
  511. .name {
  512. font-family: opsans;
  513. font-size: 12px;
  514. color: #fff;
  515. padding: 2px 6px;
  516. margin-right: 10px;
  517. }
  518. .odd .name { background-color: {color:chat post odd names}; }
  519. .even .name { background-color: {color:chat post even names}; }
  520.  
  521. ul {
  522. list-style: none; /* Remove list bullets */
  523. padding: 0;
  524. margin: 0;
  525. }
  526.  
  527. ul li {
  528. padding-left: 18px;
  529. }
  530.  
  531. ul li:before {
  532. content: "—"; /* Insert content that looks like bullets */
  533. padding-right: 8px;
  534. color: {color:body}; /* Or a color you prefer */
  535. }
  536.  
  537. blockquote {
  538. margin: 5px;
  539. padding: 0 20px;
  540. border-left: 1px solid {color:blockquote};
  541. }
  542.  
  543. .albumart {
  544. width: 150px;
  545. height: 150px;
  546. }
  547.  
  548. .albartimg {
  549. width: 150px;
  550. height: 150px;
  551. display: block;
  552. position: absolute;
  553. opacity: 1;
  554. }
  555.  
  556. .noalbart {
  557. width: 130px;
  558. height: 80px;
  559. padding-top: 50px;
  560. background-color: #f3f3f3;
  561. border: 10px solid #f9f9f9;
  562. font-family: opsans;
  563. font-size: 10px;
  564. text-transform: uppercase;
  565. letter-spacing: 2px;
  566. font-style: italic;
  567. text-align: center;
  568. color: #666;
  569. }
  570.  
  571. .audinfocon {
  572. background-color: {color:audio post background};
  573. width: 320px;
  574. height: 150px;
  575. padding: 0 10px 0 20px;
  576. position: absolute;
  577. margin-left: 150px;
  578. }
  579.  
  580. .audinfo {
  581. position: relative;
  582. top: 50%;
  583. transform: translateY(-50%);
  584. font-family: opsans;
  585. font-size: 9px;
  586. text-transform: uppercase;
  587. letter-spacing: 1px;
  588. }
  589.  
  590. .aud-track {
  591. font-family: bebas;
  592. font-size: 18px;
  593. text-transform: uppercase;
  594. letter-spacing: 2px;
  595. margin-bottom: 5px;
  596. }
  597.  
  598. .audioplayer {
  599. background-color: #fff;
  600. width: 30px;
  601. height: 30px;
  602. overflow: hidden;
  603. position: absolute;
  604. margin: 60px;
  605. z-index: 10;
  606. border-radius: 5000px;
  607. opacity: 0.2;
  608. transition: 0.6s;
  609. }
  610.  
  611. .entry:hover .audioplayer { opacity: 0.6; }
  612. .entry:hover .audioplayer:hover { opacity: 1; }
  613.  
  614. .askericon {
  615. border-radius: 50000px;
  616. width: 48px;
  617. height: 48px;
  618. }
  619.  
  620. .ans-c-1 {
  621. padding: 10px 0 10px 0;
  622. width: 48px;
  623. height: 48px;
  624. }
  625. .ans-c-2 {
  626. width: 440px;
  627. margin-left: 10px;
  628. }
  629.  
  630. .asker-name {
  631. font-family: opsans;
  632. font-size: 10px;
  633. text-transform: uppercase;
  634. letter-spacing: 2px;
  635. color: {color:body};
  636. }
  637.  
  638. .ans-qn {
  639. font-family: opsans;
  640. font-size: 11px;
  641. letter-spacing: 1px;
  642. color: {color:body};
  643. }
  644.  
  645. .entry-perma {
  646. margin-top: 30px;
  647. text-align: center;
  648. font-family: opsans;
  649. font-size: 10px;
  650. text-transform: uppercase;
  651. letter-spacing: 2px;
  652. }
  653.  
  654. .entry-perma a {
  655. background-color: {color:permalink background};
  656. color: {color:permalink text};
  657. margin: 0 2px;
  658. padding: 2px 4px 3px 6px;
  659. transition: 0.6s;
  660. cursor: pointer;
  661. }
  662.  
  663. .entry-perma a:hover {
  664. color: {color:permalink hover text};
  665. background-color: {color:permalink hover background};
  666. }
  667.  
  668. .entry-tags {
  669. font-family: opsans;
  670. font-size: 10px;
  671. font-style: italic;
  672. letter-spacing: 1px;
  673. margin-top: 10px;
  674. text-align: center;
  675. display: none;
  676. }
  677.  
  678. .entry-tags a {
  679. color: {color:tags};
  680. margin: 0 5px;
  681. text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  682. transition: 0.6s;
  683. }
  684.  
  685. .entry-tags:hover a {
  686. color: #bbb;
  687. text-shadow: 2px 0 0 #ddd, -2px 0 0 #ddd;
  688. }
  689.  
  690. .entry-tags:hover a:hover {
  691. color: {color:tags hover};
  692. text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  693. }
  694.  
  695. .show-hidetags { display: none; }
  696.  
  697. .post-perma {
  698. background-color: {color:post permalink background};
  699. color: {color:post permalink text};
  700. text-transform: uppercase;
  701. letter-spacing: 1px;
  702. text-transform: uppercase;
  703. font-family: opsans;
  704. font-size: 10px;
  705. padding: 20px;
  706. margin-top: 40px;
  707. }
  708.  
  709. .post-perma a { border-bottom: 0 solid transparent; }
  710. .post-perma a:hover { border-bottom: 0 solid transparent; }
  711.  
  712. #applepie {
  713. width: 500px;
  714. font-family: opsans;
  715. font-size: 12px;
  716. text-align: left;
  717. color: {color:body};
  718. padding-top: 20px;
  719. }
  720.  
  721. .notes li {
  722. width: 500px;
  723. font-family: opsans;
  724. font-size: 12px;
  725. padding: 10px 0;
  726. margin-bottom: 5px;
  727. margin-left: -40px;
  728. }
  729.  
  730. .notes img {
  731. margin-right: 10px;
  732. float: left;
  733. width: 12px;
  734. height: 12px;
  735. border-radius: 2px;
  736. }
  737.  
  738. ol.notes {
  739. width: 500px;
  740. list-style-type: none;
  741. }
  742.  
  743. .cpagi {
  744. font-family: bebas;
  745. font-size: 20px;
  746. color: {color:body};
  747. width: 500px;
  748. text-align: center;
  749. letter-spacing: 4px;
  750. margin-bottom: 50px;
  751. }
  752.  
  753. .cpagi a {
  754. color: {color:body links};
  755. transition: 0.6s;
  756. }
  757.  
  758. .cpagi a:hover { color: {color:body links hover}; }
  759.  
  760.  
  761. {CustomCSS}
  762.  
  763. </style>
  764. </head>
  765. <body>
  766.  
  767. <a href="http://yukoki.tumblr.com"><div id="cr">yukoki</div></a>
  768.  
  769. <div class="sidestrip">
  770.  
  771. <div class="bottomleft">
  772. <div class="bl-gradient"></div>
  773. <img class="bl-img" src="{image:slide menu image}">
  774. </div><!--bottomleft-->
  775.  
  776. <div class="side-content">
  777. <img class="sideic" src="{PortraitURL-64}">
  778. <div class="sidet">{text:slide menu title}</div>
  779. <div class="desc">{Description}</div>
  780.  
  781. <a href="{text:link 1 url}"><div class="clink">{text:link 1 name}</div></a>
  782. <a href="{text:link 2 url}"><div class="clink">{text:link 2 name}</div></a>
  783. <a href="{text:link 3 url}"><div class="clink">{text:link 3 name}</div></a>
  784. <a href="{text:link 4 url}"><div class="clink">{text:link 4 name}</div></a>
  785.  
  786. </div><!--side-content-->
  787. </div><!--sidestrip-->
  788.  
  789. <div class="side">
  790.  
  791. <div class="overside"></div>
  792.  
  793. <img class="sideimg" src="{image:sidebar image}">
  794.  
  795. <div class="btitle">{Title}</div>
  796. <center><div class="krypton"></div></center>
  797. <div class="bsubtitle">{text:subtitle}</div>
  798.  
  799. <center><div class="nav">
  800. <a href="/">home</a>
  801. <a href="/ask">inbox</a>
  802. <a href="/archive">archives</a>
  803. {block:ifnotalwaysshowslideoutmenu}
  804. <span id="btn-more"><a title="click for more info">more</a></span>
  805. <span id="btn-less"><a title="click to hide more info">less</a></span>
  806. {/block:ifnotalwaysshowslideoutmenu}
  807. </div><!--nav--></center>
  808.  
  809. </div><!--side-->
  810.  
  811. <div class="content">
  812.  
  813. {block:Posts}
  814.  
  815. <div class="entry">
  816.  
  817. {block:Answer}
  818. <table style="width:100%">
  819. <tr>
  820. <td><div class="ans-c-1"><img class="askericon" src="{AskerPortraitURL-48}"></div></td>
  821. <td><div class="ans-c-2"><div class="asker-name">{Asker} asked:</div><div class="ans-qn">{Question}</div></div></td>
  822. </tr>
  823. </table>
  824. <center><div class="krypton-e"></div></center>
  825. <div class="entry-body">{Answer}</div>
  826. {/block:Answer}
  827.  
  828. {block:text}
  829. {block:Title}<div class="entry-title">{Title}</div>
  830. <center><div class="krypton-e"></div></center>{/block:Title}
  831. <div class="entry-body">{Body}</div>
  832. {/block:text}
  833.  
  834. {block:Photo}
  835. <img class="entry-photo" src="{PhotoURL-500}">
  836. {block:Caption}<div class="entry-body">{Caption}</div>{/block:Caption}
  837. {/block:Photo}
  838.  
  839. {block:Photoset}
  840. <div class="entry-photo">{Photoset-500}</div>
  841. {block:Caption}<div class="entry-body">{Caption}</div>{/block:Caption}
  842. {/block:Photoset}
  843.  
  844. {block:Quote}
  845. <div class="entry-quote">{Quote}</div>
  846. {block:Source}<center><div class="krypton-e"></div></center><div class="entry-q-src">{Source}</div>{/block:Source}
  847. {/block:Quote}
  848.  
  849. {block:Link}
  850. <a href="{URL}"><div class="entry-link">{Name} <span class="lnr lnr-arrow-right"></span></div></a>
  851. <center><div class="krypton-e"></div></center>
  852. {block:Description}<div class="entry-body">{Description}</div>{/block:Description}
  853. {/block:Link}
  854.  
  855. {block:Chat}
  856. {block:Title}<div class="entry-title">{Title}</div>
  857. <center><div class="krypton-e"></div></center>{/block:Title}
  858. <div style="width: 500px; height: 1px; background-color: #eaeaea;"></div>
  859. {block:Lines}<div class="{Alt}">
  860. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  861. {/block:Lines}
  862. {/block:Chat}
  863.  
  864. {block:Audio}
  865. <div class="audinfocon"><div class="audinfo">
  866. {block:TrackName}<div class="aud-track">{TrackName}</div>{/block:TrackName}
  867. {block:Album}{Album}<br>{/block:Album}
  868. {block:Artist}By {Artist}{/block:Artist}
  869. {block:PlayCount}<br>Played {FormattedPlayCount} times{/block:PlayCount}
  870. </div><!--audinfo--></div>
  871. <div class="audioplayer"><div class="audp">
  872. {AudioPlayer}
  873. </div><!--audp--></div><!--audioplayer-->
  874. {block:AlbumArt}
  875. <div class="albumart">
  876. <img class="albartimg" src="{AlbumArtURL}">
  877. <div class="noalbart">album art unavailable</div>
  878. </div><!--albumart-->
  879. {/block:AlbumArt}
  880. {block:Caption}<div class="entry-body">{Caption}</div>{/block:Caption}
  881. {/block:Audio}
  882.  
  883. {block:Video}
  884. {Video-500}
  885. {block:Caption}<div class="entry-body">{Caption}</div>{/block:Caption}
  886. {/block:Video}
  887.  
  888. {Block:Date}{Block:PermalinkPage}
  889. <div class="post-perma">
  890. {block:RebloggedFrom}
  891. Post reblogged on <b>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</b>, {12Hour}.{Minutes}{AmPm}
  892. <br>
  893. With {NoteCountWithLabel}
  894. Via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally <a href="{ReblogRootURL}">{ReblogRootName}</a>
  895. {/block:RebloggedFrom}
  896. {block:NotReblog}
  897. An original post made on <b>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</b>, {12Hour}.{Minutes}{AmPm}
  898. {/block:NotReblog}
  899. {block:hastags}
  900. <br>Tagged as {block:tags} <a href="{TagURL}"> #{Tag} </a> {/block:tags}
  901. {/block:hastags}
  902. </div><!--post-perma-->
  903. <div id="applepie">{PostNotes-16}</div>
  904. {/Block:PermalinkPage}{/Block:Date}
  905.  
  906. {Block:Date}{Block:IndexPage}
  907. <div class="entry-perma">
  908. <a href="{Permalink}">{NoteCountWithLabel}</a>
  909. <a href="{Permalink}" title="@ {24HourWithZero} {Minutes} hrs">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
  910. {block:ifshowreblogbuttononindex}
  911. <a href="{ReblogURL}">Reblog</a>
  912. {/block:ifshowreblogbuttononindex}
  913. {block:ifshowtagsonindex}
  914. {block:hastags}<a class="btn-showtags"><span class="show-hidetags">Hide </span> Tags</a>{/block:hastags}
  915. {/block:ifshowtagsonindex}
  916. </div><!--entry-perma-->
  917. {block:hastags}<div class="entry-tags">
  918. {block:tags} <a href="{TagURL}">{Tag}</a> {/block:tags}
  919. </div>{/block:hastags}
  920. {/Block:IndexPage}{/Block:Date}
  921.  
  922. </div><!--entry-->
  923.  
  924. <center><div class="krypton-end"></div></center>
  925.  
  926. {block:ContentSource}
  927. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  928. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  929. {/block:SourceLogo}
  930. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  931. {/block:ContentSource}
  932.  
  933. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  934.  
  935. {/block:Posts}
  936.  
  937. {block:pagination}<div class="cpagi">
  938.  
  939. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} / {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  940.  
  941. </div><!--cpagi-->{/block:pagination}
  942.  
  943. </div><!--content-->
  944.  
  945. </body>
  946. </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!