API tools faq
paste
Advertisement
cleuron

caramelo

cleuron
Nov 18th, 2014
4,297
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. </a>
  5.  
  6. <!--caramelo theme by daenso @ tumblr
  7. don't copy, don't redistribute, don't use as base
  8. don't remove the credit, thank you
  9.  
  10. DON'T FORGET THAT FOR THIS THEME YOUR TITLE HAS TO BE OF 8 LETTERS OR YOU CAN CUSTOMIZE THE "ABOUTME?" PART BY REMOVING SOME LETTERS BUT JUST REMEMBER THAT BOTH TEXTS HAVE TO HAVE THE SAME NUMBER OF LETTERS AND NOT MORE THEN 8-->
  11.  
  12. <head>
  13.  
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  18.  
  19. <meta name="color:background" content="#ffffff"/>
  20. <meta name="color:text" content="#ddd"/>
  21. <meta name="color:links" content="#c9e0ff"/>
  22. <meta name="color:links hover" content="#e2b5b8"/>
  23. <meta name="color:first column" content="#dad5ce"/>
  24. <meta name="color:second column" content="#f8e1e1"/>
  25. <meta name="color:first title" content="#ffffff"/>
  26. <meta name="color:second title" content="#ccc7be"/>
  27. <meta name="color:icon id" content="#fff"/>
  28. <meta name="color:mainlinks" content="#fff"/>
  29. <meta name="color:text mainbox" content="#ffffff"/>
  30. <meta name="color:scrollbar" content="#f8e1e1" />
  31. <meta name="color:update links" content="#edc7cf"/>
  32. <meta name="color:update links hover" content="#fff"/>
  33. <meta name="color:little desc" content="#fff"/>
  34. <meta name="color:desc" content="#cecece"/>
  35. <meta name="color:links desc" content="#a6ccff"/>
  36. <meta name="color:tags" content="#c9e0ff"/>
  37. <meta name="color:details" content="#f8e1e1"/>
  38. <meta name="color:posts" content="#ffffff"/>
  39. <meta name="color:posttitle" content="#f8d6e4"/>
  40. <meta name="color:posttitle hover" content="#dededf"/>
  41. <meta name="color:border posts" content="#ffffff"/>
  42. <meta name="color:perma text" content="#dddddd"/>
  43. <meta name="color:perma links" content="#f8e1e1"/>
  44. <meta name="color:mainlinks shadow 1" content="#d4c3c0"/>
  45. <meta name="color:mainlinks shadow 2" content="#eec2d1"/>
  46. <meta name="color:bordering" content="#f3f3f3"/>
  47. <meta name="color:captions" content="#ffb8bd" />
  48. <meta name="color:askerbox" content="#e5e1dd"/>
  49. <meta name="color:askerbox links" content="#f8e1e1"/>
  50. <meta name="color:askerbox links hover" content="#e2b5b8"/>
  51.  
  52. <meta name="image:background" content="http://i.imgur.com/5AUlgDK.png" />
  53. <meta name="image:icon" content="" />
  54.  
  55. <meta name="text:abouto" content="aboutme?" />
  56. <meta name="text:subtitle" content="really short subtitle here" />
  57. <meta name="text:updates" content="hover here for your updates" />
  58.  
  59. <meta name="if:showcaptions" content="1" />
  60. <meta name="if:fadephotoset" content="1" />
  61. <meta name="if:grayscale" content="0" />
  62. <meta name="if:showtags" content="1" />
  63. <meta name="if:500px posts" content="0" />
  64. <meta name="if:400px posts" content="1" />
  65. <meta name="if:250px posts" content="0" />
  66. <meta name="if:infinite scroll" content="0" />
  67.  
  68. <meta name="text:link url one" content=""/>
  69. <meta name="text:link title one" content="link one"/>
  70. <meta name="text:link url two" content=""/>
  71. <meta name="text:link title two" content="link two"/>
  72. <meta name="text:link url three" content=""/>
  73. <meta name="text:link title three" content="link three"/>
  74. <meta name="text:link url four" content=""/>
  75. <meta name="text:link title four" content="link four"/>
  76.  
  77. <style type="text/css">
  78.  
  79. {block:indexpage}{block:iffadephotoset}
  80. #posts img:hover, #posts iframe:hover {-webkit-transition: opacity 0.5s linear;opacity: 1;}
  81.  
  82. #posts img, #posts iframe {opacity:0.7;
  83. -moz-transition-duration: 0.5s;
  84. -o-transition-duration: 0.5s;
  85. -webkit-transition-duration: 0.5s;
  86. transition-duration: 0.5s;}{/block:iffadephotoset}
  87.  
  88. {block:ifgrayscale}
  89. #posts img, #posts iframe{-webkit-filter: Grayscale(100%); -webkit-transition-duration: 0.8s; -moz-transition-duration:0.8s; transition-duration:0.8s; -o-transition-duration:0.8s;}
  90.  
  91. #posts img:hover, #posts iframe:hover{-webkit-filter: Grayscale(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
  92. {/block:ifgrayscale}{/block:indexpage}
  93.  
  94. body {
  95. margin:0px;
  96. color:{color:text};
  97. font-family:trebuchet, arial, helvetica;
  98. font-size:11px;
  99. word-wrap:break-word;
  100. background: {color:background} url("{image:background}") repeat fixed;
  101. }
  102.  
  103. a {
  104. color:{color:links};
  105. text-decoration: none;
  106. transition-duration: 0.5s;
  107. -moz-transition-duration: 0.5s;
  108. -webkit-transition-duration: 0.5s;
  109. -o-transition-duration: 0.5s;
  110. }
  111.  
  112. a:hover {
  113. opacity:1;
  114. color:{color:links hover};
  115. transition: all 0.5s ease;
  116. -webkit-transition: all 0.5s ease;
  117. -moz-transition: all 0.5s ease;
  118. -o-transition: all 0.5s ease
  119. }
  120.  
  121. blockquote {
  122. width:90%;
  123. border-left:1px solid {color:captions};
  124. margin-left:auto;
  125. margin-right:auto;
  126. padding-left:10px;
  127. padding-right:10px;
  128. padding-top:0px;
  129. padding-bottom:0px;
  130. }
  131.  
  132. pre {
  133. width:100%;
  134. font-size:10px;
  135. border:1px dotted {color:captions};
  136. padding:3px;
  137. margin-left:auto;
  138. margin-right:auto;
  139. white-space:pre-wrap;
  140. word-wrap:break-word;
  141. }
  142.  
  143. iframe#tumblr_controls {
  144. top:0%!important;
  145. right:0%!important;
  146. position:fixed!important;
  147. z-index:999999999!important;
  148. -webkit-filter: invert(100%);
  149. -moz-filter: invert(100%);
  150. -o-filter: invert(100%);
  151. -ms-filter: invert(100%);
  152. filter: invert(100%);
  153. opacity:0.2;
  154. transition: .8s ease-in-out;
  155. -webkit-transition: .8s ease-in-out;
  156. -moz-transition: .8s ease-in-out;
  157. -o-transition: .8s ease-in-out;
  158. }
  159.  
  160.  
  161. ::-webkit-scrollbar {
  162. width:6px;
  163. height:3px;
  164. }
  165.  
  166. ::-webkit-scrollbar-thumb {
  167. background: {color:scrollbar};
  168. }
  169.  
  170. #container1{
  171. width: auto;
  172. position:relative;
  173. overflow-y:auto;
  174. height:100%;
  175. margin-left:454px;
  176. top: 0px;
  177. bottom:0px;
  178. right: 0px;
  179. }
  180.  
  181.  
  182. #container2{
  183. border-right:4px solid {color:first column};
  184. position:fixed;
  185. top:0px;
  186. overflow:hidden;
  187. float: left;
  188. width: 450px;
  189. height: 100%;
  190. }
  191.  
  192. #mars {
  193. position:absolute;
  194. margin-top:0px;
  195. margin-left:0px;
  196. background:{color:first column};
  197. width:250px;
  198. height:100%;
  199. z-index:999;
  200. transition: .8s ease-in-out;
  201. -webkit-transition: .8s ease-in-out;
  202. -moz-transition: .8s ease-in-out;
  203. -ms-transition: .8s ease-in-out;
  204. -o-transition: .8s ease-in-out;
  205. display:inline-block;
  206.  
  207. }
  208.  
  209. #mars:hover {
  210. width:450px;
  211. z-index:9999;
  212. transition: .8s ease-in-out;
  213. -webkit-transition: .8s ease-in-out;
  214. -moz-transition: .8s ease-in-out;
  215. -ms-transition: .8s ease-in-out;
  216. -o-transition: .8s ease-in-out;
  217. }
  218.  
  219. @font-face {font-family: 'BebasRegular';src: url('fonts/BEBAS___-webfont.eot');src: local('�'), url('../fonts/bebas/BEBAS___-webfont.woff') format('woff'), url('../fonts/bebas/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/bebas/BEBAS___-webfont.svg#webfontSRj8j0PE') format('svg'); font-weight: normal;font-style: normal;}
  220.  
  221. .texty {
  222. text-align:center;
  223. display:block;
  224. width:100%;
  225. height:100%;
  226. overflow: hidden;
  227. }
  228.  
  229. h1 {
  230. display:block;
  231. font-family:'BebasRegular';
  232. font-size:20px;
  233. font-style: normal;
  234. text-transform: uppercase;
  235. color:{color:first title};
  236. position:relative;
  237. font-weight:400;
  238. letter-spacing: 8px;
  239. }
  240.  
  241. .kyung {
  242. top:140px;
  243. z-index:10;
  244. -webkit-transition: all 1s linear;
  245. -moz-transition: all 1s linear;
  246. -o-transition: all 1s linear;
  247. transition: all 1s linear;
  248. }
  249. .soo {
  250. -webkit-transform:skew(-50deg);
  251. -webkit-transition: all 1s linear;
  252. -moz-transform:skew(-50deg);
  253. -moz-transition: all 1s linear;
  254. -o-transform:skew(-50deg);
  255. -o-transition: all 1s linear;
  256. transform:skew(-50deg);
  257. transition: all 1s linear;
  258. color:{color:second title};
  259. top:102px;
  260. font-size:20px;
  261. left:10px;
  262. font-weight:400;
  263. letter-spacing: 8px;
  264. }
  265.  
  266. .texty:hover >.kyung {
  267. -webkit-transform:skew(-50deg);
  268. -webkit-transition: all 1s linear;
  269. -moz-transform:skew(-50deg);
  270. -moz-transition: all 1s linear;
  271. -o-transform:skew(-50deg);
  272. -o-transition: all 1s linear;
  273. transform:skew(-50deg);
  274. transition: all 1s linear;
  275. font-size:20px;
  276. font-weight:700;
  277. letter-spacing: 12px;
  278. top:140px;
  279. left:11px;
  280. color:{color:second title};
  281. }
  282. .texty:hover > .soo {
  283. -webkit-transform:skew(0deg);
  284. -webkit-transition: all 1s linear;
  285. -moz-transform:skew(0deg);
  286. -moz-transition: all 1s linear;
  287. -o-transform:skew(0deg);
  288. -o-transition: all 1s linear;
  289. transform:skew(0deg);
  290. transition: all 1s linear;
  291. letter-spacing:0;
  292. left:2px;
  293. z-index:20;
  294. letter-spacing: 12px;
  295. font-size:20px;
  296. color:{color:first title};
  297. }
  298.  
  299. .back {
  300. height:100%;
  301. }
  302.  
  303. #littledesc {
  304. position:relative;
  305. margin-top:98px;
  306. width:160px;
  307. height:9px; z-index:999;
  308. margin-left:auto;
  309. margin-right:auto;
  310. color:{color:text mainbox};
  311. font-size:9px;
  312. text-align:left;
  313. padding:0px;
  314. text-transform:uppercase;
  315. }
  316.  
  317. #icont {
  318. border:3px solid #fff;
  319. border-radius:100%;
  320. position:relative;
  321. margin-top:-27px;
  322. width:50px;
  323. height:50px; z-index:99;
  324. margin-left:auto;
  325. margin-right:auto;
  326. transition: 1s ease-in-out;
  327. -webkit-transition: 1s ease-in-out;
  328. -moz-transition: 1s ease-in-out;
  329. -o-transition: 1s ease-in-out;
  330. }
  331.  
  332. #icont img{
  333. width:50px;
  334. height:50px;
  335. border-radius:100%;
  336. opacity:0.6;}
  337.  
  338. .texty:hover #icont {margin-top:30px;
  339. transition: 1s ease-in-out;
  340. -webkit-transition: 1s ease-in-out;
  341. -moz-transition: 1s ease-in-out;
  342. -o-transition: 1s ease-in-out;
  343. }
  344.  
  345. #desc {
  346. position:relative;
  347. border-bottom:1px solid {color:second title};
  348. margin-top:20px;
  349. width:162px;
  350. overflow-y:auto;
  351. height:auto;
  352. min-height:10px;
  353. max-height:25px;
  354. z-index:99;
  355. margin-left:auto;
  356. margin-right:auto;
  357. color:{color:text mainbox};
  358. font-size:10px;
  359. text-align:center;
  360. padding:0px 4px 8px 4px;
  361. opacity:0;
  362. text-transform:lowercase;
  363. transition: .8s ease-in-out;
  364. -webkit-transition: .8s ease-in-out;
  365. -moz-transition: .8s ease-in-out;
  366. -o-transition: .8s ease-in-out;
  367. }
  368.  
  369. #desc a {color:{color:links desc};}
  370. #desc a:hover {color:{color:links hover};}
  371.  
  372. .texty:hover #desc {opacity:1;
  373. transition: .8s ease-in-out;
  374. -webkit-transition: .8s ease-in-out;
  375. -moz-transition: .8s ease-in-out;
  376. -o-transition: .8s ease-in-out;
  377. }
  378.  
  379. #links {
  380. position:relative;
  381. width:150px;
  382. margin-left:auto;
  383. margin-right:auto;
  384. margin-top:30px;
  385. height:9px;
  386. color:{color:mainlinks};
  387. font-size:8px;
  388. letter-spacing:1px;
  389. padding:0px 4px 4px 4px;
  390. text-transform:uppercase;
  391. z-index:99999;
  392. }
  393.  
  394. #links a {
  395. color:{color:mainlinks};
  396. padding:0px 6px 0px 6px;
  397. -webkit-transition: opacity 1s linear;
  398. -webkit-transition: all 1s ease-in-out;
  399. -moz-transition: all 1s ease-in-out;
  400. -o-transition: all 1s ease-in-out;
  401. }
  402.  
  403. #links a:hover {
  404. background:{color:mainlinks shadow 1};
  405. color:{color:mainlinks};
  406. box-shadow: inset 60px 0px 0 {color:mainlinks shadow 2};
  407. padding:0px 6px 0px 6px;
  408. -webkit-transition: opacity 1s linear;
  409. -webkit-transition: all 1s ease-in-out;
  410. -moz-transition: all 1s ease-in-out;
  411. -o-transition: all 1s ease-in-out;
  412. }
  413.  
  414. #container {
  415. {block:if500pxposts}width:606px;{/block:if500pxposts}
  416. {block:if400pxposts}width:506px;{/block:if400pxposts}
  417. {block:if250pxposts}width:356px;{/block:if250pxposts}
  418. {/block:indexpage}{block:permalinkpage}width:606px;{/block:permalinkpage}
  419. height:auto;
  420. margin-left:auto;
  421. margin-right:auto;
  422. padding:50px 2px 2px 2px;
  423. position:float;
  424. }
  425.  
  426. #posts {
  427. background:{color:posts};
  428. {block:indexpage}
  429. {block:if500pxposts}width:500px;{/block:if500pxposts}
  430. {block:if400pxposts}width:400px;{/block:if400pxposts}
  431. {block:if250pxposts}width:250px;{/block:if250pxposts}
  432. {/block:indexpage}{block:permalinkpage}width:500px;{/block:permalinkpage}
  433. height:auto;
  434. border:1px solid {color:border posts};
  435. position:relative;
  436. color:{color:text};
  437. border-radius:1px;
  438. margin-left:auto;
  439. padding:50px; margin-bottom:100px;
  440. margin-right:auto;
  441. }
  442.  
  443. #posts img {
  444. max-width:100%;
  445. }
  446.  
  447. #jupiter {
  448. position:absolute;
  449. top:0px;
  450. float:right;
  451. margin-left:250px;
  452. background:{color:second column};
  453. width:200px;
  454. height:100%;
  455. z-index:9;
  456. transition: .8s ease-in-out;
  457. -webkit-transition: .8s ease-in-out;
  458. -moz-transition: .8s ease-in-out;
  459. -o-transition: .8s ease-in-out;
  460. }
  461.  
  462. h2 {
  463. display:block;
  464. font-family:'BebasRegular';
  465. font-size:20px;
  466. font-style: normal;
  467. text-align:center;
  468. text-transform: uppercase;
  469. color:{color:text mainbox};
  470. position:relative;
  471. font-weight:400;
  472. letter-spacing: 4px;
  473. }
  474.  
  475. .jongin {
  476. top:10px;
  477. z-index:1;
  478. -webkit-transition: all 1s linear;
  479. }
  480.  
  481. #updatebox {
  482. width:110px;
  483. height:18px;
  484. top:47px;
  485. height:9px;
  486. overflow:hidden;
  487. margin-left:43px;
  488. color:{color:text mainbox};
  489. font-family:helvetica;
  490. font-size:8px;
  491. line-height:10px;
  492. text-align:left;
  493. z-index:99;
  494. text-transform:uppercase;
  495. position:absolute;
  496. -webkit-transition: .8s ease-in-out;
  497. -moz-transition: .8s ease-in-out;
  498. -o-transition: .8s ease-in-out;
  499. transition: .8s ease-in-out;
  500. }
  501.  
  502. #updatebox:hover {
  503. height:120px;
  504. overflow-y:auto;
  505. -webkit-transition: .8s ease-in-out;
  506. -moz-transition: .8s ease-in-out;
  507. -o-transition: .8s ease-in-out;
  508. transition: .8s ease-in-out;
  509. }
  510.  
  511. #updatebox a{color:{color:update links}; font-weight:bold;}
  512. #updatebox a:hover{color:{color:update links hover};}
  513.  
  514. #res {
  515. width:140px;
  516. height:30%;
  517. top:65px;
  518. margin-left:30px;
  519. position:absolute;
  520. }
  521.  
  522.  
  523. #linksbox {
  524. width:140px;
  525. height:160px;
  526. bottom:30px;
  527. margin-left:30px;
  528. position:absolute;
  529. line-height:13px;
  530. z-index:99;
  531. }
  532.  
  533. .cl-effect-18 {
  534. position: relative;
  535. z-index: 1;
  536. text-align:center;
  537. }
  538.  
  539. .cl-effect-18 a {
  540. padding: 0 5px;
  541. color: {color:text mainbox};
  542. font-weight: 700;
  543. -webkit-transition: color 0.3s;
  544. -moz-transition: color 0.3s;
  545. transition: color 0.3s;
  546. }
  547.  
  548. .cl-effect-18 a::before{
  549. position: absolute;
  550. width: 80px;
  551. left: 30px;
  552. bottom: 10%;
  553. height: 2px;
  554. margin-top: -1px;
  555. background: {color:text mainbox};
  556. content: '';
  557. z-index: -1;
  558. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  559. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  560. transition: transform 0.3s, opacity 0.3s;
  561. pointer-events: none;
  562. }
  563.  
  564. .cl-effect-18 a::after {
  565. position: absolute;
  566. width: 80px;
  567. left:30px;
  568. top: 10%;
  569. height: 2px;
  570. margin-top: -1px;
  571. background: {color:text mainbox};
  572. content: '';
  573. z-index: -1;
  574. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  575. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  576. transition: transform 0.3s, opacity 0.3s;
  577. pointer-events: none;
  578. }
  579.  
  580. .cl-effect-18 a::before {
  581. -webkit-transform: translateY(-20px);
  582. -moz-transform: translateY(-20px);
  583. transform: translateY(-20px);
  584. }
  585.  
  586. .cl-effect-18 a::after {
  587. -webkit-transform: translateY(20px);
  588. -moz-transform: translateY(20px);
  589. transform: translateY(20px);
  590. }
  591.  
  592. .cl-effect-18 a:hover,
  593. .cl-effect-18 a:focus {
  594. color: #fff;
  595. }
  596.  
  597. .cl-effect-18 a:hover::before,
  598. .cl-effect-18 a:hover::after,
  599. .cl-effect-18 a:focus::before,
  600. .cl-effect-18 a:focus::after {
  601. opacity: 0.4;
  602. }
  603.  
  604. .cl-effect-18 a:hover::before,
  605. .cl-effect-18 a:focus::before {
  606. left:56px;
  607. width: 30px;
  608. bottom:45%;
  609. -webkit-transform: rotate(135deg);
  610. -moz-transform: rotate(135deg);
  611. transform: rotate(135deg);
  612. }
  613.  
  614. .cl-effect-18 a:hover::after,
  615. .cl-effect-18 a:focus::after {
  616. left:56px;
  617. width: 30px;
  618. top: 50%;
  619. -webkit-transform: rotate(45deg);
  620. -moz-transform: rotate(45deg);
  621. transform: rotate(45deg);
  622. }
  623.  
  624. {block:indexpage}{block:ifshowtags}#posts:hover .detailo {
  625. opacity:1;
  626. -webkit-transition: opacity 0.7s linear;
  627. -webkit-transition: all 0.7s ease-in-out;
  628. -moz-transition: all 0.7s ease-in-out;
  629. -o-transition: all 0.7s ease-in-out;
  630. }
  631.  
  632. .detailo {
  633. {block:if500pxposts}width:600px;{/block:if500pxposts}{block:if400pxposts}width:500px;{/block:if400pxposts}{block:if250pxposts}width:350px;{/block:if250pxposts}
  634. bottom:0px;
  635. margin-left:-50px;
  636. color:#ddd;
  637. height: 108px;
  638. font-size:8px;
  639. text-transform:uppercase;
  640. float: left;
  641. z-index:99;
  642. overflow: hidden;
  643. position: absolute;
  644. opacity:0;
  645. font-family:helvetica;
  646. text-align: center;
  647. cursor: default;
  648. -webkit-transition: opacity 0.7s linear;
  649. -webkit-transition: all 0.7s ease-in-out;
  650. -moz-transition: all 0.7s ease-in-out;
  651. -o-transition: all 0.7s ease-in-out;
  652. }
  653.  
  654. .detailo a{color:{color:details};}
  655. .detailo a:hover{color:{color:links hover};}{/block:ifshowtags}
  656. .details a{color:{color:details};}
  657. .details a:hover{color:{color:links hover};}
  658.  
  659. #posts:hover .details {
  660. opacity:1;
  661. -webkit-transition: opacity 0.7s linear;
  662. -webkit-transition: all 0.7s ease-in-out;
  663. -moz-transition: all 0.7s ease-in-out;
  664. -o-transition: all 0.7s ease-in-out;
  665. }
  666.  
  667. .details {
  668. {block:if500pxposts}width:600px;{/block:if500pxposts}{block:if400pxposts}width:500px;{/block:if400pxposts}{block:if250pxposts}width:350px;{/block:if250pxposts}
  669. margin-top:-50px;
  670. color:#ddd;
  671. margin-left:-50px;
  672. height: 50px;
  673. float: left;
  674. z-index:99;
  675. overflow: hidden;
  676. position: absolute;
  677. text-transform:uppercase;
  678. letter-spacing:2px;
  679. font-weight:10;
  680. opacity:0;
  681. text-align: center;
  682. cursor: default;
  683. -webkit-transition: opacity 0.7s linear;
  684. -webkit-transition: all 0.7s ease-in-out;
  685. -moz-transition: all 0.7s ease-in-out;
  686. -o-transition: all 0.7s ease-in-out;
  687. }
  688.  
  689. .view-sixth h2{
  690. opacity:0;
  691. border-bottom: 1px solid #eee;
  692. background: transparent;
  693. margin:20px 50px 0px 50px;
  694. font-size:10px;
  695. transform: scale(10);
  696. transition: all 0.3s ease-in-out 0.1s;
  697. }
  698. .view-sixth p {
  699. opacity:0;
  700. transform: scale(10);
  701. transition: all 0.3s ease-in-out 0.2s;
  702. }
  703.  
  704. #posts:hover .mask {
  705. opacity:1;
  706. transition-delay: 0s;
  707. }
  708.  
  709. #posts:hover h2 {
  710. opacity: 1;
  711. transform: scale(1);
  712. transition-delay: 0.1s;
  713. }
  714. #posts:hover p {
  715. opacity:1;
  716. transform: scale(1);
  717. transition-delay: 0.2s;
  718. }
  719.  
  720. {/block:indexpage}
  721.  
  722. #tags {
  723. font-family:helvetica;
  724. font-size:8px;
  725. line-height:9px;
  726. color:{color:tags};
  727. }
  728.  
  729. #tags a {color:{color:tags};}
  730. #tags a:hover {color:{color:links hover};}
  731.  
  732. ol.notes {
  733. width:460px;
  734. height:auto;
  735. margin-left:-10px;
  736. list-style-type:none;
  737. }
  738.  
  739. li.note {
  740. height:24px;
  741. width:24px;
  742. float:left;
  743. margin:5px;
  744. overflow:hidden;
  745. }
  746.  
  747. ol.notes li.note a {
  748. display: block;
  749. }
  750.  
  751. img.avatar {
  752. width: 16px;
  753. height: 16px;
  754. }
  755.  
  756. li.more_notes_link_container{
  757. width:24px;
  758. height:24px;
  759. overflow:hidden;
  760. }
  761.  
  762. li.more_notes_link_container a:before {
  763. content:url('http://i.imgur.com/XcnVttk.png');
  764. }
  765.  
  766. #notes {
  767. width:500px;
  768. height:auto;
  769. background:{color:posts};
  770. margin-top:0px;
  771. position:relative;
  772. overflow:hidden;
  773. margin-left:auto;
  774. margin-right:auto;
  775. padding-top:10px;
  776. padding-bottom:20px;
  777. margin-bottom:40px;
  778. }
  779.  
  780.  
  781. ol.notes li.note img {
  782. padding:3px;
  783. border:1px solid {color:second column};
  784.  
  785. }
  786.  
  787.  
  788. #perma{
  789. width:500px;
  790. background:{color:posts};
  791. border:1px solid {color:border posts};
  792. margin-left:auto;
  793. margin-right:auto;
  794. margin-bottom:50px;
  795. margin-top:-40px;
  796. padding-top:10px; padding-bottom:10px;
  797. padding-left:20px; padding-right:20px;
  798. color:{color:perma text};
  799. font-size:8px;
  800. letter-spacing:1px;
  801. text-align:left;
  802. }
  803.  
  804. #permalinkpage {
  805. width:500px;
  806. margin-left:auto;
  807. margin-right:auto;
  808. margin-top:0px;
  809. padding-top:0px;
  810. font-family:calibri, helvetica;
  811. text-transform:uppercase;
  812. padding:3px;
  813. letter-spacing:0px;
  814. color:{color:perma text};
  815. font-size:11px;
  816. text-align:center;
  817. }
  818.  
  819. #permalinkpage a {color:{color:perma links};}
  820. #permalinkpage a:hover {color:{color:links hover};}
  821.  
  822. #audio{
  823. height:26px;
  824. border-bottom:3px solid {color:border posts};
  825. width:200px;
  826. background:{color:posts};
  827. color:{color:text};
  828. position:relative;
  829. text-align:center;
  830. border-radius:1px;
  831. overflow:hidden;
  832. }
  833.  
  834. #askery {
  835. padding:3px 3px 4px 3px;
  836. {block:if500pxposts}width:494px;{/block:if500pxposts}{block:if400pxposts}width:394px;{/block:if400pxposts}{block:if250pxposts}width:244px;{/block:if250pxposts}{block:permalinkpage}width:494px;{/block:permalinkpage}
  837. overflow:hidden;
  838. height:14px;
  839. text-align:center;
  840. font-family:times, helvetica, arial;
  841. letter-spacing:1px;
  842. text-transform:uppercase;
  843. margin-top:0px;
  844. font-weight:bold;
  845. line-height:15px;
  846. color:{color:askerbox links};
  847. -webkit-transition: all 0.5s ease-out;
  848. -moz-transition: all 0.5s ease-out;
  849. transition: all 0.5s ease-out;
  850. display:inline-block;
  851. font-size:12px;
  852. }
  853.  
  854. #askery a:hover { color:{color:askerbox links hover};}
  855. #askery a { color:{color:askerbox links};}
  856.  
  857. .question {
  858. padding:4px;
  859. word-wrap:break-word;
  860. font-family:helvetica, calibri, trebuchet, arial;
  861. text-align:left;
  862. text-transform:lowercase;
  863. font-size:11px;
  864. margin-top:0px;
  865. color:{color:text};
  866. background-color:{color:posts};
  867. border:1px solid {color:bordering};
  868. z-index:9;
  869. }
  870.  
  871. #answer {
  872. padding-left:6px;padding-right:6px;
  873. padding-top:2px;padding-bottom:0px;
  874. font-family:helvetica, calibri, trebuchet, arial;
  875. text-align:left; font-size:11px;
  876. margin-top:0px; border-bottom:1px dashed {color:bordering};
  877. color:{color:text};
  878. z-index:9;
  879. }
  880.  
  881. #posttitle {
  882. padding:0px 6px 4px 6px;
  883. text-align:center;
  884. color:{color:posttitle};
  885. font-size:12px;
  886. font-family:trebuchet, calibri, helvetica;
  887. margin-bottom:-5px;
  888. text-transform:uppercase;
  889. }
  890.  
  891. #posttitle a { color:{color:posttitle}; }
  892. #posttitle a:hover { color:{color:posttitle hover}; }
  893.  
  894. #quotation {
  895. padding:1px 4px 8px 4px;
  896. color:{color:text};
  897. text-align:center;
  898. font-weight:bold;
  899. font-size:16px;
  900. font-family:trebuchet, calibri, helvetica;
  901. text-transform:lowercase;
  902. }
  903.  
  904. #s-m-t-tooltip{
  905. background:{color:first column};
  906. color:{color:text mainbox};
  907. box-shadow: 1px 1px 1px #ddd;
  908. max-width:170px;
  909. margin-top:20px;
  910. border-radius:2px;
  911. margin-left:20px;
  912. padding:5px;
  913. letter-spacing:1px;
  914. font-weight:700;
  915. z-index:999999;
  916. font-family:trebuchet, helvetica;
  917. font-size:8px;
  918. text-transform:uppercase;
  919. line-height:9px;
  920. }
  921.  
  922. #paginat{
  923. width:22px;
  924. position:fixed;
  925. height:auto;
  926. text-align:center;
  927. line-height:24px;
  928. top:45%;
  929. margin-top:-20px;
  930. margin-left:441px;
  931. z-index:99999;
  932. }
  933.  
  934. </style>
  935.  
  936. {block:IfInfiniteScroll}<script type="text/javascript" src="http://static.tumblr.com/puouuyx/qepnyhkgm/infinitescrolling.min.js"></script>{/block:IfInfiniteScroll}
  937.  
  938.  
  939. </head>
  940.  
  941. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  942. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  943.  
  944. <script>(function($){
  945. $(document).ready(function(){
  946. $("[title],a[title],img[title]").style_my_tooltips({
  947. tip_follows_cursor:true,
  948. tip_delay_time:100,
  949. tip_fade_speed:250,
  950. attribute:"title"});});})(jQuery);</script>
  951.  
  952. <body>
  953.  
  954. <div id="paginat">{block:indexpage}{block:ifnotinfinitescroll}<div id="line4">
  955. <center>{block:Pagination}<div id="pagination">{block:PreviousPage}<span style="background:{color:background}; color:{color:first column}; padding-bottom: 3px; padding-left:5px; padding-right:5px; font-weight:700; font-size:14px; border-radius:100%; text-transform:uppercase; border:2px solid {color:first column};"><a href="{PreviousPage}" title="previous">«</a></span>{/block:PreviousPage}<br/>
  956.  
  957. {block:NextPage}<span style="background:{color:background}; color:{color:text}; padding-left:5px; font-weight:700; padding-bottom: 3px; padding-right:5px; border-radius:100%; font-size:14px; text-transform:uppercase; border:2px solid {color:first column};"><a href="{NextPage}" title="next">»</a></span>{/block:NextPage}
  958. </div>
  959. {/block:Pagination}</center>
  960. </div>{/block:ifnotinfinitescroll}{/block:indexpage}</div>
  961.  
  962. <div id="container2">
  963.  
  964. <div id="mars">
  965.  
  966. <div class="back">
  967. <div class="texty">
  968. <h1 class="kyung">{title}</h1>
  969. <h1 class="soo">{text:abouto}</h1>
  970. <div id="littledesc"><span style="height:9px; width:165px; position:fixed; border-left:3px solid {color:second title}; padding-left:3px; padding-right:3px;">{text:subtitle}</span></div>
  971. <div id="desc">{description}</div>
  972. <div id="icont"><img src="{image:icon}"></div>
  973. <div id="links"><a href="http://{name}.tumblr.com/">home</a>
  974. <a href="http://{name}.tumblr.com/ask">askbox</a>
  975. <a href="http://{name}.tumblr.com/archive">past</a>
  976. </div>
  977.  
  978. </div></div></div>
  979.  
  980. <div id="jupiter">
  981. <h2 class="jongin">updates</h2>
  982. <div id="updatebox"><div style="border-left:3px solid {color:update links}; padding-left:3px;">{text:updates}</div></div>
  983.  
  984.  
  985. <div id="linksbox">
  986.  
  987. <div class="cl-effect-18" style="margin-top:20px;"><a href="{text:link url one}" data-hover="{text:link title one}">{text:link title one}</a></div>
  988.  
  989. <div class="cl-effect-18" style="margin-top:17px;"><a href="{text:link url two}" data-hover="{text:link title two}">{text:link title two}</a></div>
  990.  
  991. <div class="cl-effect-18" style="margin-top:17px;"><a href="{text:link url three}" data-hover="{text:link title three}">{text:link title three}</a></div>
  992.  
  993. <div class="cl-effect-18" style="margin-top:17px;"><a href="{text:link url four}" data-hover="{text:link title four}">{text:link title four}</a></div></div>
  994.  
  995. </div></div>
  996.  
  997. <div id="container1">
  998. <div id="container">
  999.  
  1000.  
  1001. <div class ="autopagerize_page_element">
  1002. {block:Posts}
  1003. <div id="posts">
  1004.  
  1005. {block:indexpage}<div class="details view-sixth">
  1006. <div class="mask"></div>
  1007. <div class="content">
  1008. <h2><a href="{Permalink}" style="font-family:'bebas regular'; font-weight:100;" title="permalink">{NoteCountwithlabel}</a> <a href="{reblogurl}" style="font-family:'bebas regular'; font-weight:100;" >reblog</a></h2>
  1009. </div>
  1010. </div>{/block:indexpage}
  1011.  
  1012. {block:ContentSource}
  1013. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1014. {/block:SourceLogo}
  1015. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1016. {/block:ContentSource}
  1017.  
  1018. {block:Photo}
  1019. {block:IndexPage}
  1020. <div id="photo">{LinkOpenTag}
  1021. <img src="{PhotoURL-500}" alt='{PhotoAlt}'/>
  1022. {LinkCloseTag}</div>
  1023. {/block:IndexPage}
  1024. {block:permalinkpage}
  1025. <div id="photo">{LinkOpenTag}
  1026. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  1027. {LinkCloseTag}</div>
  1028. {/block:PermalinkPage}
  1029. {block:ifShowCaptions}{block:Indexpage}
  1030. {block:Caption}{Caption}{/block:Caption}
  1031. {/block:Indexpage}{/block:ifShowCaptions}
  1032. {block:PermalinkPage}
  1033. {block:Caption}{Caption}{/block:Caption}
  1034. {/block:PermalinkPage}
  1035. {/block:Photo}
  1036.  
  1037.  
  1038. {block:Photoset}
  1039. {block:IndexPage}<div id="photoset">
  1040. {block:if500pxposts}{photoset-500}{/block:if500pxposts}
  1041. {block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  1042. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}
  1043. </div>
  1044. {/block:IndexPage}
  1045. {block:PermalinkPage}
  1046. <div id="photoset">{Photoset-500}</div>
  1047. {/block:PermalinkPage}
  1048. {block:ifShowCaptions}
  1049. {block:Indexpage}
  1050. {block:Caption}{Caption}{/block:Caption}
  1051. {/block:Indexpage}
  1052. {/block:ifShowCaptions}
  1053. {block:PermalinkPage}
  1054. {block:Caption}{Caption}{/block:Caption}
  1055. {/block:PermalinkPage}
  1056. {/block:Photoset}
  1057.  
  1058.  
  1059. {block:Video}
  1060. {block:IndexPage}<div id="video">
  1061. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  1062. {block:if400pxposts}{Video-400}{/block:if400pxposts}
  1063. {block:if250pxposts}{Video-250}{/block:if250pxposts}
  1064. </div>
  1065. {/block:IndexPage}
  1066. {block:PermalinkPage}
  1067. <div id="video">{Video-500}</div>
  1068. {/block:PermalinkPage}
  1069. {block:ifShowCaptions}
  1070. {block:Indexpage}
  1071. {block:Caption}{Caption}{/block:Caption}
  1072. {/block:Indexpage}
  1073. {/block:ifShowCaptions}
  1074. {block:PermalinkPage}
  1075. {block:Caption}{Caption}{/block:Caption}
  1076. {/block:PermalinkPage}
  1077. {/block:Video}
  1078.  
  1079. {block:Quote}
  1080. <div id="quotation">« {Quote} »</div>
  1081. {block:Source}</ br> <center><div style="{block:indexpage}{block:if500pxposts}width:400px;{/block:if500pxposts}{block:if400pxposts}width:300px;{/block:if400pxposts}{block:if250pxposts}}width:150px;{/block:if250pxposts}{/block:indexpage}{block:permalinkpage}width:400px;{/block:permalinkpage} font-size:10px; text-align:center; margin-bottom:-10px">— {Source} —</div></center><br>{/block:Source}
  1082. {/block:Quote}
  1083.  
  1084. {block:Text}
  1085. {block:Title}<div id="posttitle">{Title}</div>{/block:Title}<div style="margin-left:6px; margin-right:6px">{Body}</div>{/block:Text}
  1086.  
  1087. {block:Link}
  1088. <div id="posttitle"><a href="{URL}" {Target}><img src="http://i.imgur.com/QtHKLR1.png"> {Name}</a></div>
  1089. {block:Description}{Description}{/block:Description}{/block:Link}
  1090.  
  1091. {block:Audio}
  1092. <center><div id="audio"><center>{AudioPlayerWhite}</center></div>
  1093. <div style="text-transform:lowercase; width:194px; margin-top:3px;"><b><span style="color:{color:links};">track:</span></b> {block:TrackName}{TrackName}{/block:TrackName}
  1094. {block:Artist}
  1095. ; <b><span style="color:{color:links};">artist:</span></b> {Artist}
  1096. {/block:Artist}
  1097. {block:Album}; <b><span style="color:{color:links};">album:</span></b> {Album}{/block:Album}
  1098. ; <b><span style="color:{color:links};">played</span></b> {block:PlayCount}{PlayCount} times{/block:PlayCount}</div></center>
  1099. {block:ifShowCaptions}{block:Indexpage}
  1100. {block:Caption}{Caption}{/block:Caption}
  1101. {/block:Indexpage}{/block:ifShowCaptions}
  1102. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
  1103. {/block:PermalinkPage}{/block:Audio}
  1104.  
  1105. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  1106.  
  1107.  
  1108. {block:Answer}
  1109. <div id="askery">{asker}:</div>
  1110. <div style="border-top:2px solid {color:askerbox}; border-bottom:2px solid {color:askerbox}; margin-top:-3px; padding:4px;"><div class="question">{Question}</div></div>
  1111.  
  1112. <div id="answer">{Answer}</div>
  1113. {/block:Answer}
  1114.  
  1115. {block:indexpage}{block:ifshowtags}<div class="detailo details view-sixth"> <p style="margin-left:20px; margin-right:20px; height:30px; overflow-y:auto;">{block:HasTags}as: {block:Tags}<a href="{TagURL}" style="text-transform:uppercase; font-size:8px; letter-spacing:1px;">#{Tag} </a>{/block:Tags}{/block:HasTags}</a></p></div>{/block:ifshowtags}{/block:indexpage}
  1116.  
  1117. </div>
  1118.  
  1119. {block:PermalinkPage}{block:date}<div id="perma"><div id="permalinkpage">
  1120. {ShortMonth} {DayOfMonthWithZero}, {Year} <!--{block:RebloggedFrom} from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">© <a href="{SourceURL}">{SourceLink}</a> {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}--> with {NoteCountWithLabel}{/block:date}<br/>
  1121.  
  1122. {block:Date}{block:RebloggedFrom}
  1123. via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource}; source: <a href="{sourceURL}">{sourcelink}</a>{/block:ContentSource}</div>{/block:Date}
  1124.  
  1125. {block:HasTags}<br><div style="text-transform:uppercase;">— tagged as: {block:Tags}<div style="line-height:9px; word-wrap:break-word; display:inline-block;"><div id="tags"><a href="{TagURL}">#{Tag}</a></div></div> {/block:Tags}</div>
  1126. {/block:HasTags}</div>{/block:PermalinkPage}
  1127.  
  1128. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  1129. {/block:posts}</div></div></div>
  1130.  
  1131. <div style="position:fixed; bottom:2px; right:2px; font-size:11px; letter-spacing:1px; border:0px solid #ccc; background:#fff; font-weight:500; font-family:calibri; padding:4px;"><a href="http://daenso.tumblr.com/" title="theme credit"><span style="color:#ccc;">D</span><span style="color:#eec2d1;">Æ</span><span style="color:#ccc;">MES</span></a></center></div>
  1132.  
  1133. </body></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!