Advertisement
carensthemes

theme 03. a tale of the sleeping prince

Jan 10th, 2017
280
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
RAW Paste Data Copied
Advertisement