API tools faq
paste
Advertisement
carensthemes

theme 03. a tale of the sleeping prince

carensthemes
Jan 10th, 2017
453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <!--
  5.  
  6. theme 03. a tale of the sleeping prince
  7.  
  8. special thanks to:
  9. + http://lunecerise.co.vu/ for the cool description effect!
  10.  
  11. theme made by: caren @ http://plistskys.tumblr.com
  12.  
  13. please do not remove the credit/steal my themes. enjoy ♡
  14.  
  15. -->
  16. <title>{Title}</title>
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. <link rel="shortcut icon" href="{Favicon}">
  19. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  20. <meta name="viewport" content="width=device-width, initial-scale=1">
  21. <meta name="color:background" content="#eeeeee">
  22. <meta name="image:background" content=""/>
  23. <meta name="image:sidebar" content="http://68.media.tumblr.com/3fdc738979b70c97a37b802802143741/tumblr_ogqk0xLkJh1rxf627o4_400.gif"/>
  24. <meta name="color:text" content="#3f3f3f">
  25. <meta name="color:stars" content="#ffffff">
  26. <meta name="color:border" content="#ededed">
  27. <meta name="color:links" content="#444444">
  28. <meta name="color:hover links" content="#cbcbcb">
  29. <meta name="color:entry background" content="#eeeeee">
  30. <meta name="color:pagination" content="#666666">
  31.  
  32. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  33. <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
  34. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  35. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  36.  
  37. <script>
  38. (function($){
  39. $(document).ready(function(){
  40. $("a[title]").style_my_tooltips({
  41. tip_follows_cursor:true,
  42. tip_delay_time:90,
  43. tip_fade_speed:600,
  44. attribute:"title"
  45. });
  46. });
  47. })(jQuery);
  48. </script>
  49.  
  50. <style type="text/css">
  51. body {
  52. margin:0;
  53. font-size:10px;
  54. font-family:arial;
  55. line-height:13px;
  56. color:{color:text};
  57. background: {color:background};
  58. background-attachment: fixed;
  59. background-image:url('{image:background}');
  60. }
  61.  
  62. a {
  63. color:{color:links};
  64. text-decoration:none;
  65. -webkit-transition:all .2s linear;
  66. transition:all .2s linear;
  67. }
  68.  
  69. a:hover {
  70. color:{color:hover links};
  71. text-decoration:none;
  72. -webkit-transition:all .2s linear;
  73. transition:all .2s linear;
  74. }
  75.  
  76. blockquote {
  77. padding:10px;
  78. border-left:1px solid {color:border};
  79. }
  80.  
  81. blockquote, ol, ul, p, pre {
  82. margin:5px;
  83. }
  84.  
  85. img {
  86. border:0;
  87. max-width:100%;
  88. height:auto;
  89. display:block;
  90. }
  91.  
  92. #yuri{
  93. width: 80px;
  94. background:white;
  95. padding:10px;
  96. left:50px;
  97. top:50px;
  98. height:80px;
  99. position:fixed;
  100. }
  101.  
  102. #yuri .image{
  103. width: 80px;
  104. height: 80px;
  105. }
  106.  
  107. #stars{
  108. width: 150px;
  109. padding:10px;
  110. right:50px;
  111. bottom:50px;
  112. height:400px;
  113. position:fixed;
  114. }
  115.  
  116. .posts {
  117. width: 400px;
  118. margin-left:200px;
  119. margin-top:50px;
  120. z-index:1;
  121. }
  122.  
  123. .entry {
  124. background:{color:entry background};
  125. width:400px;
  126. position:relative;
  127. margin-bottom:20px;
  128. margin-top:20px;
  129. padding-bottom:40px;
  130. border-bottom:1px solid #cccccc;
  131. }
  132.  
  133. .caren{
  134. display:block;
  135. width:15px;
  136. margin-left: 410px;
  137. position:absolute;
  138. top:0px;
  139. line-height:15px;
  140. font-size:9px;
  141. letter-spacing:1px;
  142. text-align: center;
  143. -webkit-transition: all 0.4s ease-in-out;
  144. -moz-transition: all 0.4s ease-in-out;
  145. transition: all 0.4s ease-in-out;
  146. opacity:0;
  147. }
  148.  
  149. .entry:hover .caren{
  150. opacity:1;
  151. -webkit-transition: all 0.4s ease-in-out;
  152. -moz-transition: all 0.4s ease-in-out;
  153. transition: all 0.4s ease-in-out;
  154. }
  155.  
  156. .text {
  157. margin:1em 0 0;
  158. }
  159.  
  160. #audioplayer {
  161. width:27px;
  162. height:30px;
  163. overflow:hidden;
  164. position:absolute;
  165. margin-left:187px;
  166. margin-top:35px;
  167. margin-bottom:35px;
  168. }
  169.  
  170. .tags{
  171. display:block;
  172. width:400px;
  173. text-align:left;
  174. margin-top:10px;
  175. margin-bottom:10px;
  176. -webkit-transition: all 0.4s ease-in-out;
  177. -moz-transition: all 04s ease-in-out;
  178. transition: all 0.4s ease-in-out;
  179. }
  180.  
  181. .tags a{
  182. color:{color:links};
  183. font-size:10px;
  184. padding:2px;
  185. }
  186.  
  187. .tags a:hover{
  188. color:{color:hover links};
  189. }
  190.  
  191. .quote{
  192. font-family: 'Nixie One', cursive;
  193. color: {color:text};
  194. font-size: 20px;
  195. line-height:21px;
  196. text-align:left;
  197. margin-bottom: 10px;
  198. }
  199.  
  200. .source{
  201. font-family: 'Nixie One', cursive;
  202. font-size:10px;
  203. letter-spacing:1px;
  204. text-transform:;
  205. text-align:center;
  206. }
  207.  
  208. .subtitle{
  209. font-family: 'Nixie One', cursive;
  210. color:{color:text};
  211. font-size: 15px;
  212. text-align:center;
  213. margin-bottom: 10px;
  214. }
  215.  
  216. .bubble {
  217. color:{color:text};
  218. font-size: 10px;
  219. line-height: 20px;
  220. background: #f5f5f5;
  221. border-bottom: 1px solid #d5d5d5;
  222. padding: 8px 12px;
  223. position: relative;
  224. display: block;
  225. margin-bottom: 1em;
  226. }
  227.  
  228. #thing {
  229. width:180px;
  230. height:180px;
  231. position:fixed;
  232. top:200px;
  233. left:45px;
  234. transition:0.6s ease-in-out;
  235. -o-transition:0.6s ease-in-out;
  236. -ms-transition:0.6s ease-in-out;
  237. -moz-transition:0.6s ease-in-out;
  238. -webkit-transition:0.6s ease-in-out;
  239. }
  240.  
  241. #thing:hover #updates {
  242. height:300px;
  243. opacity:1;
  244. transition:0.6s ease-in-out;
  245. -o-transition:0.6s ease-in-out;
  246. -ms-transition:0.6s ease-in-out;
  247. -moz-transition:0.6s ease-in-out;
  248. -webkit-transition:0.6s ease-in-out;
  249. }
  250.  
  251. #thing:hover #t {
  252. margin-top:-10px;
  253. width:100px;
  254. -ms-transform:none;
  255. -moz-transform:none;
  256. -webkit-transform:none;
  257. -o-transform:rotate:none;
  258. }
  259.  
  260. #thing:hover #l {
  261. margin-top:300px;
  262. width:100px;
  263. -ms-transform:none;
  264. -moz-transform:none;
  265. -webkit-transform:none;
  266. -o-transform:none;
  267. }
  268.  
  269. #thing:hover #l a {
  270. opacity:1;
  271. }
  272.  
  273. #l a {
  274. margin-left:80px;
  275. font-size:10px;
  276. text-align:center;
  277. display:inline-block;
  278. position:fixed;
  279. opacity:0;
  280. margin-top:-5px;
  281. transition:0.7s ease-in-out;
  282. -o-transition:0.7s ease-in-out;
  283. -ms-transition:0.7s ease-in-out;
  284. -moz-transition:0.7s ease-in-out;
  285. -webkit-transition:0.7s ease-in-out;
  286. }
  287.  
  288. #t {
  289. width:100px;
  290. height:1px;
  291. background-color:#777;
  292. margin:20px 5px 0;
  293. position:fixed;
  294. z-index:2;
  295. -ms-transform:rotate(45deg);
  296. -moz-transform:rotate(45deg);
  297. -webkit-transform:rotate(45deg);
  298. -o-transform:rotate(45deg);
  299. transition:0.7s ease-in-out;
  300. -o-transition:0.7s ease-in-out;
  301. -ms-transition:0.7s ease-in-out;
  302. -moz-transition:0.7s ease-in-out;
  303. -webkit-transition:0.7s ease-in-out;
  304. }
  305.  
  306. #l {
  307. position:fixed;
  308. width:100px;
  309. height:1px;
  310. background-color:#777;
  311. margin:20px 5px 0;
  312. z-index:2;
  313. -ms-transform:rotate(-45deg);
  314. -moz-transform:rotate(-45deg);
  315. -webkit-transform:rotate(-45deg);
  316. -o-transform:rotate(-45deg);
  317. transition:0.7s ease-in-out;
  318. -o-transition:0.7s ease-in-out;
  319. -ms-transition:0.7s ease-in-out;
  320. -moz-transition:0.7s ease-in-out;
  321. -webkit-transition:0.7s ease-in-out;
  322. }
  323.  
  324. #updates {
  325. z-index:1;
  326. opacity:0;
  327. padding:5px;
  328. position:fixed;
  329. height:20px;
  330. width:100px;
  331. color:#777777;
  332. font-size:10px;
  333. margin-top:0px;
  334. margin-bottom:10px;
  335. font-family:arial;
  336. overflow:hidden;
  337. line-height:12px;
  338. text-align:;
  339. transition:0.7s ease-in-out;
  340. -o-transition:0.7s ease-in-out;
  341. -ms-transition:0.7s ease-in-out;
  342. -moz-transition:0.7s ease-in-out;
  343. -webkit-transition:0.7s ease-in-out;
  344. }
  345.  
  346. .plis {
  347. font-family:arial;
  348. color:{color:pagination};
  349. font-size:10px;
  350. position:fixed;
  351. right:15px;
  352. bottom:15px;
  353. width:10px;
  354. text-align:center;
  355. padding:5px;
  356. line-height:10px;
  357. }
  358.  
  359. .asker {
  360. display:inline;
  361. font-weight:bold;
  362. }
  363.  
  364. .question {
  365. display:inline;
  366. }
  367.  
  368. .notecontainer{
  369. margin: 10px;
  370. text-align:left;
  371. width: 400px;
  372. font-size: 10px;
  373. }
  374.  
  375. .notecontainer ol.notes{
  376. margin-left:20px;
  377. padding: 5px;
  378. }
  379.  
  380. .notecontainer img.avatar{
  381. opacity:0;
  382. }
  383.  
  384. .media {
  385. position:relative;
  386. display:inline-block;
  387. width:100%;
  388. }
  389.  
  390. .pagination {
  391. color:{color:pagination};
  392. font-family:cambria;
  393. width:px;
  394. margin-bottom:15px;
  395. margin-top:15px;
  396. }
  397.  
  398. #s-m-t-tooltip {
  399. max-width:200px;
  400. background-color:#ffffff;
  401. border:1px solid #efefef;
  402. font-size:8px;
  403. color:#000;
  404. text-transform:lowercase;
  405. padding:3px;
  406. margin:20px 0px 0px 20px;
  407. z-index:99999999;
  408. }
  409.  
  410. </style>
  411. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  412. </head>
  413. <body>
  414.  
  415. <div id="yuri">
  416. <a href="/"> <img class="image" src="{image:sidebar}"/></a>
  417. </div>
  418. <div id="thing">
  419. <div id="t"></div>
  420. <div id="updates">
  421. <p>
  422. {description}
  423. </p>
  424. <div class="pagination">
  425. <center>
  426. {block:Pagination}
  427. <div id="pagination">
  428. <div class="nextprev">
  429. {block:PreviousPage}<a class="prev" href="{PreviousPage}">{/block:PreviousPage}<span>&larr;</span>{block:PreviousPage}</a>{/block:PreviousPage}
  430. {CurrentPage} &nbsp<i>of</i>&nbsp {TotalPages}
  431. {block:NextPage}<a class="next" href="{NextPage}">{/block:NextPage}<span>&rarr;</span>{block:NextPage}</a>{/block:NextPage}
  432. </div>
  433. </div>
  434. {/block:Pagination}
  435. </center>
  436. </div>
  437. </p>
  438. </div><div id="l"></div></div>
  439. <div id="stars">
  440. <div style="font-size:150px; color:{color:stars}; -webkit-transform: rotate(10deg);transform: rotate:(10deg); margin-top:250px;">☆</div>
  441. <div style="font-size:100px; color:{color:stars}; -webkit-transform: rotate(-15deg);transform: rotate:(-15deg); margin-top:100px; margin-left:10px">☆</div>
  442. <div style="font-size:50px; color:{color:stars}; -webkit-transform: rotate(15deg);transform: rotate:(15deg); margin-left:120px; margin-top:-30px;">☆</div>
  443.  
  444. </div>
  445.  
  446. <div class="posts">
  447. {block:Posts}
  448.  
  449. <article class="entry
  450. {block:Photo}ph{/block:Photo}
  451. {block:Photoset}ph{/block:Photoset}">
  452.  
  453. <section class="post">
  454. {block:Audio}
  455. <center>
  456. <div id= "audioplayer">{AudioPlayerWhite}</div>
  457. {block:AlbumArt}
  458. <img src="{AlbumArtURL}" width="100">
  459. {/block:AlbumArt}
  460. {PlayCountWithLabel}
  461. </center>
  462. {/block:Audio}
  463.  
  464. {block:Photo}
  465. <div class="media">
  466. {LinkOpenTag}
  467. <img src="{PhotoURL-500}">
  468. {LinkCloseTag}
  469. </div>
  470. {block:Caption}{Caption}{/block:Caption}
  471. {/block:Photo}
  472.  
  473. {block:Photoset}
  474. <div class="media photoset">
  475. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  476. </div>
  477. {block:Caption}{Caption}{/block:Caption}
  478. {/block:Photoset}
  479.  
  480. {block:Video}
  481. <div class="media video">{Video-400}</div>
  482. {/block:Video}
  483.  
  484. {block:Answer}
  485. <div class="bubble">
  486. <div class="asker">{Asker}</div> asked:
  487. <div class="question">{Question}</div>
  488. </div><div class="answer">{Answer}</div>
  489. {/block:Answer}
  490.  
  491. {block:Chat}
  492. <div class="subtitle">
  493. {block:Title}{Title}{/block:Title}
  494. </div>
  495. {block:Lines}
  496. {block:Label}<b>{Label}</b>{/block:Label}
  497. {Line}<br>
  498. {/block:Lines}
  499. {/block:Chat}
  500.  
  501. {block:Quote}
  502. <div class="quote">
  503. {Quote}
  504. </div>
  505. {block:Source}
  506. <div class="source">
  507. — {Source} -
  508. </div>{/block:Source}
  509. {/block:Quote}
  510.  
  511. {block:Link}
  512. <div class="subtitle">
  513. <a href="{URL}" {Target}>{Name}</a>
  514. </div>
  515. {block:Description}{Description}{/block:Description}
  516. {/block:Link}
  517.  
  518. {block:Text}
  519. <div class="subtitle">
  520. {block:Title}{Title}{/block:Title}
  521. </div>
  522. <div class="text">{Body}</div>
  523. {/block:Text}
  524.  
  525. {block:HasTags}
  526. <div class ="tags"> <span class="lnr lnr-tag"></span>
  527. {block:Tags}
  528. <a title="{TAG}" href="{TagURL}"> {Tag}</a>
  529. {/block:Tags}
  530. </div>
  531. {/block:HasTags}
  532.  
  533. <div class="caren">
  534. {block:NoteCount}
  535. <a title= "{NoteCountWithLabel}" href="{Permalink}"><span class="lnr lnr-magnifier"></span></a><p>
  536. {/block:NoteCount}
  537. {block:Date}
  538. <a title = "{DayofWeek}" href="{Permalink}"><span class="lnr lnr-calendar-full"></span></a><p>
  539. {/block:Date}
  540. {block:RebloggedFrom}
  541. <a title = "via: {ReblogParentName}" href="
  542. {ReblogParentURL}"><span class="lnr lnr-map-marker"></span></a><p>
  543. <a title = "src: {ReblogRootName}" href="
  544. {ReblogRootURL}"><span class="lnr lnr-pushpin"></span></a><p>
  545. {/block:RebloggedFrom}
  546. {block:IndexPage}
  547. <a title = "reblog" href="
  548. {ReblogUrl}"><span class="lnr lnr-sync"></span> </a>
  549. {/block:IndexPage}
  550. </div>
  551.  
  552. {block:PostNotes}
  553. <div class="notecontainer">{PostNotes}</div>
  554. {/block:PostNotes}
  555.  
  556. </section>
  557. </article>
  558. {/block:Posts}
  559.  
  560. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  561. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  562. <script>
  563. $(document).ready(function(){
  564. $('.photo-slideshow').pxuPhotoset({
  565. lightbox: true,
  566. rounded: false,
  567. gutter: '1px',
  568. photoset: '.photo-slideshow',
  569. photoWrap: '.photo-data',
  570. photo: '.pxu-photo'
  571. });
  572. var $container = $('.content');
  573. });
  574. </script>
  575. <a class="plis" title = "theme" href="http://plistskys.tumblr.com/" target="_blank">&.</a>
  576. </body>
  577. </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!