API tools faq
paste
Advertisement
kawaiibuu

Raindrop

kawaiibuu
Aug 28th, 2016
631
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.54 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4. Raindrop
  5.  
  6. Started April 18th, 2015 as a personal theme
  7. Released August 2016
  8.  
  9. Created by softwaring.tumblr.com
  10. Downalod at jubileethemes.tumblr.com
  11.  
  12. -->
  13. <head>
  14. <meta charset="utf-8">
  15. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  16.  
  17. <title>
  18. {block:TagPage}{lang:Posts tagged Tag} — {/block:TagPage}
  19. {block:SearchPage}{lang:Search results for SearchQuery} —
  20. {/block:SearchPage}
  21. {block:IndexPage}
  22. {Title}
  23. {/block:IndexPage}
  24. {block:PermalinkPage}
  25. {Title}
  26. {/block:PermalinkPage}
  27. </title>
  28.  
  29. <link rel="shortcut icon" href="{Favicon}">
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  31. {block:Description}
  32. <meta name="description" content="{MetaDescription}" />
  33. {/block:Description}
  34.  
  35. {Block:Hidden}
  36. <meta name="color:Background" content="#FFF"/>
  37. <meta name="color:Background top" content="#FFF"/>
  38. <meta name="color:Background bottom" content="#FFF"/>
  39. <meta name="color:Accent color" content="#e1e1e1"/>
  40. <meta name="color:Intro text" content="#525252"/>
  41. <meta name="color:Text" content="#525252"/>
  42. <meta name="color:Links" content="#0000FF"/>
  43. <meta name="color:First link" content="#000"/>
  44. <meta name="color:Second link" content="#000"/>
  45. <meta name="color:Third link" content="#000"/>
  46.  
  47. <meta name="if:Captions" content="0"/>
  48.  
  49. <meta name="image:Background" content="0"/>
  50. <meta name="image:Avatar" content="0"/>
  51. <meta name="image:Bottom image 1" content="0"/>
  52. <meta name="image:Bottom image 2" content="0"/>
  53. <meta name="image:Bottom image 3" content="0"/>
  54.  
  55. <meta name="select:Background style" content="default" title="Default"/>
  56. <meta name="select:Background style" content="fullscreen-background" title="Fullscreen Background"/>
  57. <meta name="select:Background style" content="pattern-background" title="Tiled Background"/>
  58. <meta name="select:Background style" content="gradient" title="Gradient"/>
  59.  
  60. <meta name="text:Content width" content="200"/>
  61. <meta name="text:About" content="Info here..."/>
  62. <meta name="text:link 1 title" content=""/>
  63. <meta name="text:link 1 url" content="" />
  64. <meta name="text:link 2 title" content="" />
  65. <meta name="text:link 2 url" content="" />
  66. <meta name="text:link 3 title" content="" />
  67. <meta name="text:link 3 url" content="" />
  68. <meta name="text:link 4 title" content="" />
  69. <meta name="text:link 4 url" content="" />
  70. <meta name="text:link 5 title" content="" />
  71. <meta name="text:link 5 url" content="" />
  72. <meta name="text:link 6 title" content="" />
  73. <meta name="text:link 6 url" content="" />
  74. <meta name="text:tag 1 title" content=""/>
  75. <meta name="text:tag 1 url" content="/tagged/" />
  76. <meta name="text:tag 2 title" content="" />
  77. <meta name="text:tag 2 url" content="/tagged/" />
  78. <meta name="text:tag 3 title" content="" />
  79. <meta name="text:tag 3 url" content="/tagged/" />
  80. <meta name="text:tag 4 title" content="" />
  81. <meta name="text:tag 4 url" content="/tagged/" />
  82. <meta name="text:tag 5 title" content="" />
  83. <meta name="text:tag 5 url" content="/tagged/" />
  84. <meta name="text:tag 6 title" content="" />
  85. <meta name="text:tag 6 url" content="/tagged/" />
  86. {/Block:Hidden}
  87. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  88. <style>
  89.  
  90. @import url(http://weloveiconfonts.com/api/?family=entypo);
  91. [class*="entypo-"]:before {
  92. font-family: 'entypo', sans-serif; }
  93.  
  94. #tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  95. z-index: 9999999999999999999999!important;
  96. -webkit-filter: invert(100%); -moz-filter: invert(100%);
  97. -o-filter: invert(100%); -ms-filter: invert(100%);
  98. filter: invert(100%);opacity:0.5; top: 20px; right: 30px;}
  99.  
  100. body {
  101. font: 12px/1.3em Helvetica, sans-serif;
  102. color: {color:Text};
  103. -webkit-font-smoothing: antialiased;
  104. -moz-osx-font-smoothing: grayscale;
  105.  
  106. overflow-x: hidden;
  107. -webkit-animation:intro 3s;
  108. -moz-animation:intro 3s;
  109. -ms-animation:intro 3s; }
  110.  
  111. .default { background:{color:background}; }
  112. .gradient {
  113. background:fixed;
  114. background-image:
  115. -o-linear-gradient(bottom, {color:background bottom}, {color:background top} );
  116. background-image: -moz-linear-gradient(bottom, {color:background bottom}, {color:background top});
  117. background-image: -webkit-linear-gradient(bottom, {color:background bottom}, {color:background top});
  118. background-image: -ms-linear-gradient(bottom, {color:background bottom}, {color:background top});
  119. background-image: linear-gradient(bottom, {color:background bottom}, {color:background top}); }
  120. .pattern-background {
  121. background: url({image:background})top left fixed repeat; }
  122. .fullscreen-background {
  123. background: url({image:background})center center fixed no-repeat;
  124. -webkit-background-size: cover;
  125. -moz-background-size: cover;
  126. -o-background-size: cover;
  127. background-size: cover; }
  128.  
  129. a {
  130. cursor: pointer!important;
  131. color: {color:Links};
  132. text-decoration: none; }
  133.  
  134. #tumblr_lightbox {
  135. background: {color:background}!important; border: none;
  136. z-index: 99999999999999999999999999999999999999999!important; -webkit-transition: all 0.35s ease-in-out;
  137. -moz-transition: all 0.35s ease-in-out;
  138. -ms-transition: all 0.35s ease-in-out;
  139. -o-transition: all 0.35s ease-in-out;
  140. transition: all 0.35s ease-in-out; }
  141. #tumblr_lightbox img { opacity:0; }
  142. #tumblr_lightbox_caption {
  143. color: {color:text}!important;
  144. font: italic 12px/1.5em 'Arial Narrow', Arial, sans-serif!important;
  145. letter-spacing: 2px!important;
  146. text-transform: uppercase!important; }
  147. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
  148. padding:5px!important; border: none;
  149. background: {color:Frame and Intro}!important;
  150. -moz-box-shadow:none!important;
  151. -webkit-box-shadow:none!important;
  152. box-shadow:none!important;
  153. -moz-border-radius:0px!important;
  154. -webkit-border-radius:0px!important;
  155. border-radius:0px!important;
  156. opacity:1!important;
  157. -webkit-transition: all 0.35s ease-in-out;
  158. -moz-transition: all 0.35s ease-in-out;
  159. -ms-transition: all 0.35s ease-in-out;
  160. -o-transition: all 0.35s ease-in-out;
  161. transition: all 0.35s ease-in-out; }
  162. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
  163. opacity: 0!important }
  164.  
  165. ol { margin: 0px; }
  166. li {
  167. list-style: none;
  168. margin: 0px;
  169. padding: 5px 0px; }
  170.  
  171. blockquote {
  172. display: inline-block; margin: -30px 0 0 0; padding: 10px 0 0 0; }
  173.  
  174. .caption, .replies { text-align: center; }
  175.  
  176. .permacaption a, .caption a, .blockquote a, .replies a {
  177. font: italic 10px/1em 'Arial Narrow', Arial, sans-serif;
  178. text-transform: uppercase;
  179. letter-spacing: 1px;
  180. border-bottom: 1px solid transparent;
  181. position: relative; }
  182.  
  183. .permacaption a:before, .caption a:before, .blockquote a:before, .replies a:before {
  184. content:""; position: absolute;
  185. width: 100%;
  186. bottom: -2px; height: 1px;left: 0;
  187. -webkit-transform: scaleX(0);
  188. transform: scaleX(0);
  189. background-color: {color:Links};
  190. -webkit-transition: all .5s ease-in-out;
  191. -moz-transition: all .5s ease-in-out;
  192. -ms-transition: all .5s ease-in-out;
  193. -o-transition: all .5s ease-in-out;
  194. transition: all .5s ease-in-out; }
  195.  
  196. .permacaption a:hover:before, .caption a:hover:before, .blockquote a:hover:before, .replies a:hover:before {
  197. -webkit-transform: scaleX(1); transform: scaleX(1); }
  198.  
  199.  
  200. ::-webkit-scrollbar { width: 12px; height: 12px; background-color: {color:background}; }
  201. ::-webkit-scrollbar-track{ border: 5px solid #fff; background-color: {color:background}; }
  202. ::-webkit-scrollbar-thumb{ border: 5px solid #fff; background-color:{color:text}; }
  203.  
  204. hr {
  205. display: block;
  206. margin-top: 0.5em;
  207. margin-bottom: 0.5em;
  208. margin-left: auto;
  209. margin-right: auto;
  210. border: 1px dashed #efefef; }
  211.  
  212. #content {
  213. display:block;
  214. margin: auto;
  215. {block:IndexPage}
  216. width: {text:content width}px;
  217. {/block:IndexPage}
  218. {block:PermalinkPage}
  219. width: 500px;
  220. {/block:PermalinkPage}
  221.  
  222. -webkit-transition: all 1.5s ease-in-out;
  223. -moz-transition: all 1.5s ease-in-out;
  224. -ms-transition: all 1.5s ease-in-out;
  225. -o-transition: all 1.5s ease-in-out;
  226. transition: all 1.5s ease-in-out; }
  227.  
  228. #content.align {
  229. -moz-transform: translateX(400%);
  230. -webkit-transform: translateX(400%);
  231. -o-transform: translateX(400%);
  232. -ms-transform: translateX(400%);
  233. transform: translateX(400%); }
  234.  
  235. .post {
  236. {block:IndexPage}
  237. width: {text:content width}px;
  238. {/block:IndexPage}
  239. {block:PermalinkPage}
  240. width: 500px;
  241. {/block:PermalinkPage}
  242. margin: 50px 0px 150px 0px;
  243. text-align: justify;
  244. -moz-text-align-last: center; }
  245.  
  246. .post img {
  247. width: 100%;
  248. margin-bottom: -3px; }
  249.  
  250. #clicker {
  251. display: inline-block;
  252. cursor: pointer; }
  253.  
  254. #clicker .int {
  255. width: 0px;
  256. overflow: hidden; }
  257.  
  258. #clicker:hover .int { width: 100%; }
  259.  
  260. .scrollt {
  261. border-left: 1px solid #efefef; padding: 5px 0px 5px 5px;
  262. margin: -2.5px 5px; }
  263.  
  264. .scrollt .int {
  265. width: 0px; display: inline-block;
  266. overflow: hidden; }
  267.  
  268. .scrollt:hover .int {
  269. width: 100%; }
  270.  
  271. #bubble {
  272. background: {color:Accent color};
  273. width: 10px;
  274. height: 10px;
  275. border-radius: 10px;
  276. margin: 10px; }
  277.  
  278. #bubble span {
  279. position: absolute; margin: -2px 10px;
  280. opacity: 0; -webkit-transition: all .5s ease-in-out;
  281. -moz-transition: all .5s ease-in-out;
  282. -ms-transition: all .5s ease-in-out;
  283. -o-transition: all .5s ease-in-out;
  284. transition: all .5s ease-in-out; }
  285.  
  286. #bubble:hover span {
  287. margin: -2px 10px;
  288. opacity: 1; }
  289.  
  290. #permalinks {
  291. position: absolute;
  292. width: 30px;
  293. right: -40px;
  294. top: 0px;
  295. text-align: center; }
  296.  
  297. #permalinks a {
  298. color: {color:Permalink text};
  299. text-decoration: none; }
  300.  
  301. #permalinks a {
  302. font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif;
  303. text-transform: uppercase;
  304. letter-spacing: 1px;
  305. border-bottom: 1px solid transparent;
  306. position: relative; }
  307.  
  308. #permalink {
  309. position:absolute;
  310. font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif;
  311. text-transform: uppercase;
  312. letter-spacing: 2px;
  313. display: none;
  314. bottom: -70px;
  315. left: 50%;
  316. margin-left: -100px;
  317. padding: 2.5px 5px;
  318. width: 200px;}
  319.  
  320. .tags {
  321. position: absolute;
  322. max-height: 11px;
  323. overflow: hidden; }
  324.  
  325. .loll { overflow: hidden;border-radius: 2px; }
  326.  
  327. .lol {
  328. margin-bottom: -5px;
  329. -ms-transform: scale(1);
  330. -webkit-transform: scale(1);
  331. transform: scale(1);
  332. -webkit-transition: all 0.5s ease-in-out;
  333. -moz-transition: all 0.5s ease-in-out;
  334. -ms-transition: all 0.5s ease-in-out;
  335. -o-transition: all 0.5s ease-in-out;
  336. transition: all 0.5s ease-in-out; }
  337.  
  338. .lol iframe, .lol img { border-radius: 2px; }
  339. .post:hover .lol {
  340. -ms-transform: scale(1.05);
  341. -webkit-transform: scale(1.05);
  342. transform: scale(1.05);
  343. -webkit-transition: all 0.5s ease-in-out;
  344. -moz-transition: all 0.5s ease-in-out;
  345. -ms-transition: all 0.5s ease-in-out;
  346. -o-transition: all 0.5s ease-in-out;
  347. transition: all 0.5s ease-in-out; }
  348.  
  349. .answer {
  350. display: inline-block;
  351. font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif; }
  352.  
  353. .asker, .answerer {
  354. font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif;
  355. text-transform: uppercase;
  356. letter-spacing: 1px;
  357. font-weight: 500;
  358. text-align: center!important; }
  359.  
  360. .answerer a {
  361. color: {color:Text}; text-decoration: none;
  362. display: inline-block; padding-right: 5px; }
  363.  
  364. .asker-question, .answerer-answer {
  365. padding: 10px 0;
  366. font: italic 12px/1em 'Arial Narrow', Arial, sans-serif; }
  367.  
  368. .answerer-answer {
  369. border-top: 1px solid {color:Accent color};
  370. padding-top: 0px; padding-bottom: 0px; }
  371.  
  372.  
  373. #info { display: none; }
  374.  
  375. .inner {
  376. height: 100%;
  377. width: 100%;
  378. position: fixed;
  379. top: 0px; left: 0px;
  380. z-index: 1000;
  381. display:inline-flex;
  382. display: -webkit-flex; }
  383.  
  384. .askbox {
  385. width: 400px;
  386. margin: auto; }
  387.  
  388. .top, .bottom, .left, .right {
  389. width: 10px; padding: 15px;
  390. height: calc(100% - 30px);
  391. background: {color:background};
  392. position:fixed;
  393. z-index: 9999; }
  394.  
  395. .bottom {
  396. bottom: 0px;
  397. height: 5px;
  398. width: calc(100% - 30px);
  399. text-transform: uppercase;
  400. font: 10px 'Roboto';
  401. letter-spacing: 1px;
  402. text-indent: 30px; }
  403.  
  404. .right {
  405. right: 0px;
  406. top: 0px; }
  407.  
  408. .left {
  409. top: 0px;
  410. left: 0px; }
  411.  
  412. .top {
  413. top: 0px;
  414. left: 0px;
  415. height: 5px;
  416. width: calc(100% - 30px); }
  417.  
  418.  
  419. #msg {
  420. position: fixed;
  421. width: 100%;
  422. text-align: center;
  423. bottom: 15px;
  424. font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif;
  425. text-transform: uppercase;
  426. letter-spacing: 1px; display: none;
  427. z-index: 10000000; }
  428.  
  429. .permainfo {
  430. font: 8px/1.5em 'calibri', sans-serif;
  431. text-transform: uppercase;
  432. letter-spacing: 1px;
  433. text-align: left!important;
  434. -moz-text-align-last: left!important; }
  435.  
  436. .permainfo a, .notes a {
  437. -webkit-transition: all .5s ease-in-out;
  438. -moz-transition: all .5s ease-in-out;
  439. -ms-transition: all .5s ease-in-out;
  440. -o-transition: all .5s ease-in-out;
  441. transition: all .5s ease-in-out; }
  442.  
  443. .notes img {
  444. width: 15px;
  445. border-radius: 100%;
  446. margin: 0px 10px; }
  447.  
  448. .notes li {
  449. margin-left: -25px;
  450. padding: 5px;
  451. font: 9px/15px 'Arial Narrow', sans-serif;
  452. text-transform: uppercase;
  453. letter-spacing: 1px;
  454. text-align: left!important;
  455. -moz-text-align-last: left!important;
  456. border-top: 1px dotted {color:accent color}; }
  457.  
  458. .line {
  459. text-align: left!important; -moz-text-align-last: left!important; }
  460. .permacaption { padding: 5% 10%; }
  461. .link { position: relative; }
  462.  
  463. .link:before {
  464. content:""; position: absolute;
  465. width: 100%;
  466. top: -7px; height: 1px;left: 0;
  467. -webkit-transform: scaleX(0);
  468. transform: scaleX(0);
  469. background-color: {color:Links};
  470. -webkit-transition: all .5s ease-in-out;
  471. -moz-transition: all .5s ease-in-out;
  472. -ms-transition: all .5s ease-in-out;
  473. -o-transition: all .5s ease-in-out;
  474. transition: all .5s ease-in-out; }
  475.  
  476. .link:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
  477.  
  478. h1 {
  479. font: italic 16px/1.5em 'Arial Narrow', Arial, sans-serif;
  480. text-transform: uppercase; display: none;
  481. position: fixed; top: 5px; left: 80px;
  482. letter-spacing: 1px;
  483. font-weight: 700;
  484. text-align: center; }
  485.  
  486. h2 {
  487. font: italic 14px/1.5em 'Arial Narrow', Arial, sans-serif;
  488. text-transform: uppercase;
  489. letter-spacing: 1px;
  490. font-weight: 700;
  491. text-align: center;
  492. margin-bottom: 30px; }
  493.  
  494. h3 {
  495. font: italic 14px/1.5em 'Arial Narrow', Arial, sans-serif;
  496. text-transform: uppercase; text-align: center;
  497. letter-spacing: 1px; }
  498.  
  499. h4 {
  500. font: italic 18px/1.5em 'Arial Narrow', Arial, sans-serif;
  501. text-transform: uppercase;
  502. margin: 0;
  503. font-weight: 700;
  504. letter-spacing: 1px; }
  505.  
  506. h5 {
  507. font: italic 16px/1.5em 'Arial Narrow', Arial, sans-serif;
  508. text-transform: uppercase;
  509. letter-spacing: 1px;
  510. font-weight: 700;
  511. text-align: center; }
  512.  
  513. h6 {
  514. font: italic 12px/1.5em 'Arial Narrow', Arial, sans-serif;
  515. text-transform: uppercase;
  516. margin: 0 10px 0;
  517. width: calc(100% - 20px);
  518. padding: 10px;
  519. border-bottom: 1px dotted {color:accent color};
  520. letter-spacing: 1px; }
  521.  
  522. .video { padding: 5px; }
  523. .video iframe { width: 100%!important; height: 100%!important; }
  524.  
  525. .navi {
  526. position: fixed;
  527. top: 10px;
  528. left: 15px;
  529. z-index: 100000000;
  530. font-size: 24px; }
  531.  
  532. .arrow { margin-right: 10px; line-height: 30px; }
  533.  
  534. .close {
  535. position: fixed;
  536. display: none;
  537. top: 175px;
  538. left: 145px;
  539. z-index: 100000000000;
  540. font: italic 10px/1.5em 'Helvetica', sans-serif;
  541. letter-spacing: 1px; text-transform: uppercase; }
  542.  
  543. .first {
  544. -webkit-transition: all 0.5s ease-in-out;
  545. -moz-transition: all 0.5s ease-in-out;
  546. -ms-transition: all 0.5s ease-in-out;
  547. -o-transition: all 0.5s ease-in-out;
  548. transition: all 0.5s ease-in-out; }
  549.  
  550. .first i {
  551. -ms-transform: rotate(0deg); /* IE 9 */
  552. -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  553. transform: rotate(0deg);
  554. -webkit-transition: all 0.5s ease-in-out;
  555. -moz-transition: all 0.5s ease-in-out;
  556. -ms-transition: all 0.5s ease-in-out;
  557. -o-transition: all 0.5s ease-in-out;
  558. transition: all 0.5s ease-in-out; }
  559.  
  560. .first i {
  561. -ms-transform: rotate(180deg); /* IE 9 */
  562. -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  563. transform: rotate(180deg); }
  564.  
  565. .links {
  566. position: fixed;
  567. top: 50px;
  568. left: 11px;
  569. z-index: 100000000;
  570. display: none; }
  571.  
  572. .links li { padding: 5px; }
  573.  
  574. .links li span.tiit {
  575. opacity: 0;
  576. position: absolute;
  577. bottom: -40px;
  578. left: 45px;
  579. text-transform: uppercase;
  580. font: italic 10px/1.5em 'Helvetica', sans-serif;
  581. -webkit-transition: all 0.25s ease-in-out;
  582. -moz-transition: all 0.25s ease-in-out;
  583. -ms-transition: all 0.25s ease-in-out;
  584. -o-transition: all 0.25s ease-in-out;
  585. transition: all 0.25s ease-in-out; }
  586.  
  587. .links li span.tiit span {opacity: 0;
  588. -webkit-transition: all 0.25s ease-in-out;
  589. -moz-transition: all 0.25s ease-in-out;
  590. -ms-transition: all 0.25s ease-in-out;
  591. -o-transition: all 0.25s ease-in-out;
  592. transition: all 0.25s ease-in-out; }
  593.  
  594. .links li:hover span.tiit span {
  595. -webkit-transition-delay: .6s; /* Safari */
  596. transition-delay: .6s;
  597. opacity: 1; }
  598.  
  599. .links li:hover span.tiit { opacity: 1; }
  600.  
  601. .links li span.tiit:before {
  602. content:"";
  603. height: 0px;
  604. width: 1px;
  605. background: {color:links};
  606. position:fixed;
  607. left: 23px;
  608. top: 160px;
  609. -webkit-transition: all 2.35s ease-in-out;
  610. -moz-transition: all 2.35s ease-in-out;
  611. -ms-transition: all 2.35s ease-in-out;
  612. -o-transition: all 2.35s ease-in-out;
  613. transition: all 2.35s ease-in-out; }
  614.  
  615. .links li:hover span.tiit:before {
  616. content:"";
  617. height: 25px;
  618. width: 1px;
  619. -webkit-transition: all 0.35s ease-in-out;
  620. -moz-transition: all 0.35s ease-in-out;
  621. -ms-transition: all 0.35s ease-in-out;
  622. -o-transition: all 0.35s ease-in-out;
  623. transition: all 0.35s ease-in-out; }
  624.  
  625. .links li span.tiit:after {
  626. content:"";
  627. height: 1px;
  628. width: 0px;
  629. background: {color:links};
  630. position:fixed;
  631. left: 23px;
  632. -webkit-transition: all 0.25s ease-in-out;
  633. -moz-transition: all 0.25s ease-in-out;
  634. -ms-transition: all 0.25s ease-in-out;
  635. -o-transition: all 0.25s ease-in-out;
  636. transition: all 0.25s ease-in-out;
  637. top: 185px; }
  638.  
  639. .links li:hover span.tiit:after {
  640. -webkit-transition-delay: .35s; /* Safari */
  641. transition-delay: .35s;
  642. content:"";
  643. height: 1px;
  644. width: 20px;
  645. background: {color:links};
  646. position:fixed;
  647. left: 23px; }
  648.  
  649. .about {
  650. position: fixed;
  651. top: 55px;
  652. left: 40px;
  653. z-index: 100000000;
  654. display: none;
  655. width: 140px;
  656. max-height: 100px;
  657. overflow: auto;
  658. padding: 5px;
  659. text-align: justify;
  660. -moz-text-align-last: center;
  661. text-transform: uppercase;
  662. font: italic 10px/1.5em 'Helvetica', sans-serif;
  663. letter-spacing: 0.5px; }
  664.  
  665. .imag {
  666. position: absolute;
  667. left: 30px;
  668. top: 10px;
  669. width: 30px;
  670. -webkit-border-radius: 30px;
  671. -webkit-border-top-left-radius: 0;
  672. -moz-border-radius: 30px;
  673. -moz-border-radius-topleft: 0;
  674. border-radius: 30px;
  675. border-top-left-radius: 0;
  676. -webkit-transition: all 0.5s ease-in-out;
  677. -moz-transition: all 0.5s ease-in-out;
  678. -ms-transition: all 0.5s ease-in-out;
  679. -o-transition: all 0.5s ease-in-out;
  680. transition: all 0.5s ease-in-out; }
  681.  
  682. .imag.ok {
  683. -webkit-border-radius: 3px;
  684. -moz-border-radius: 3px;
  685. border-radius: 3px;
  686. -webkit-transition: all 0.5s ease-in-out;
  687. -moz-transition: all 0.5s ease-in-out;
  688. -ms-transition: all 0.5s ease-in-out;
  689. -o-transition: all 0.5s ease-in-out;
  690. transition: all 0.5s ease-in-out; }
  691.  
  692. .info, .inne {
  693. height: 100%;
  694. width: 100%;
  695. position: fixed;
  696. top: 0px; left: 0px;
  697. z-index: 1000;
  698. display:inline-flex;
  699. display: -webkit-flex;
  700. text-align: justify;
  701. -moz-text-align-last: center;
  702. font: italic 10px/1.5em 'Helvetica', sans-serif;
  703. letter-spacing: 1px; }
  704.  
  705. .infoo, #assk, .aboutt {
  706. height: 100%;
  707. width: 500px;
  708. position: fixed;
  709. top: 0px; left: 0px;
  710. z-index: 1000;
  711. display: none; }
  712.  
  713. .linx { margin: auto; }
  714. .abouter { margin: auto; }
  715.  
  716. .askbox li, .linx li {
  717. list-style: none;
  718. text-align: center;
  719. position: relative;
  720. font: italic 10px/1.5em 'Helvetica', sans-serif;
  721. letter-spacing: 1px; text-transform: uppercase; }
  722.  
  723. .askbox li:before, .linx li:before {
  724. content:"";
  725. top: 12px;
  726. left: -20px;
  727. position: absolute;
  728. width: 15px;
  729. height: 1px;
  730. background: {color:accent color};
  731. -webkit-transition: all 0.5s ease-in-out;
  732. -moz-transition: all 0.5s ease-in-out;
  733. -ms-transition: all 0.5s ease-in-out;
  734. -o-transition: all 0.5s ease-in-out;
  735. transition: all 0.5s ease-in-out; }
  736.  
  737. .askbox li:hover:before, .linx li:hover:before {
  738. width: 20px;
  739. background: black; }
  740.  
  741. .credit1 {
  742. position: fixed;
  743. margin-top: -25px;
  744. margin-left: 35px;
  745. display: none;
  746. opacity: 0.35;
  747. font-size: 8px;
  748. letter-spacing: 1px;
  749. -webkit-transition: all 0.5s ease-in-out;
  750. -moz-transition: all 0.5s ease-in-out;
  751. -ms-transition: all 0.5s ease-in-out;
  752. -o-transition: all 0.5s ease-in-out;
  753. transition: all 0.5s ease-in-out; }
  754.  
  755. .credit2 {
  756. position: fixed;
  757. bottom: 35px;
  758. right: 35px;
  759. z-index: 10000000!important;
  760. font-size: 10px;
  761. text-transform: uppercase; letter-spacing: 1px;
  762. letter-spacing: 1px;
  763. -webkit-transition: all 0.5s ease-in-out;
  764. -moz-transition: all 0.5s ease-in-out;
  765. -ms-transition: all 0.5s ease-in-out;
  766. -o-transition: all 0.5s ease-in-out;
  767. transition: all 0.5s ease-in-out; }
  768.  
  769. .bottomer {
  770. position:fixed;
  771. display: none;
  772. bottom: 7px;
  773. padding: 3px 10px;
  774. left: 50%;
  775. margin-left: -70px;
  776. z-index: 10000000;
  777. font: 10px/1.5em 'Arial Narrow', Arial, sans-serif;
  778. text-transform: uppercase; letter-spacing: 1px; }
  779.  
  780. .notreblob {
  781. background: {color:accent color}; height: 30px;
  782. width: 30px; -webkit-border-radius: 100%;
  783. -webkit-border-top-left-radius: 0;
  784. -moz-border-radius: 100%;
  785. -moz-border-radius-topleft: 0;
  786. border-radius: 100%;
  787. border-top-left-radius: 0; }
  788.  
  789. @-webkit-keyframes intro { 0% {opacity: 0;} 100% {opacity: 1;} }
  790. @-moz-keyframes intro { 0% {opacity: 0;} 100% {opacity: 1;} }
  791. @-ms-keyframes intro { 0% {opacity: 0;} 100% {opacity: 1;} }
  792. @-o-keyframes intro { 0% {opacity: 0;} 100% {opacity: 1;} }
  793. @keyframes intro { 0% {opacity: 0;} 100% {opacity: 1;} }
  794.  
  795. {CustomCSS}
  796. </style>
  797. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  798. </head>
  799. <body>
  800.  
  801. <a href="http://softwaring.tumblr.com" class="credit2">credit</a>
  802.  
  803. <div class="navi">
  804. <a class="arrow"><i class="fa fa-angle-down"></i></a>
  805. <img class="imag" src="{image:avatar}"/>
  806. <h1>{title}</h1>
  807. <a class="close">close</a>
  808. </div>
  809.  
  810. <div class="about">
  811. <a href="http://softwaring.tumblr.com" class="credit1" title="theme credit">@softwaring</a> {Block:Description}{description}{/block:description}
  812. </div>
  813. <div class="links">
  814. <a href="/"><li>01 <span class="tiit"><span>refresh</span></span></li></a>
  815. <a class="ask"><li>02 <span class="tiit"><span>contact</span></span></li></a>
  816. <a class="nav"><li>03 <span class="tiit"><span>links</span></span></li></a>
  817. <a class="abo"><li>04 <span class="tiit"><span>about</span></span></a>
  818. </div>
  819.  
  820. <div class="infoo">
  821. <img src="{image:bottom image 1}" style="position:fixed; bottom: 40px; left: 40px;">
  822. <div class="info">
  823. <div class="linx">
  824. <h6>links</h6>
  825. <a href="{text:link 1 url}"><li>{text:link 1 title}</li></a>
  826. <a href="{text:link 2 url}"><li>{text:link 2 title}</li></a>
  827. <a href="{text:link 3 url}"><li>{text:link 3 title}</li></a>
  828. <a href="{text:link 4 url}"><li>{text:link 4 title}</li></a>
  829. <a href="{text:link 5 url}"><li>{text:link 5 title}</li></a>
  830. <a href="{text:link 6 url}"><li>{text:link 6 title}</li></a>
  831. <h6>tags</h6>
  832. <a href="{text:tag 1 url}"><li>{text:tag 1 title}</li></a>
  833. <a href="{text:tag 2 url}"><li>{text:tag 2 title}</li></a>
  834. <a href="{text:tag 3 url}"><li>{text:tag 3 title}</li></a>
  835. <a href="{text:tag 4 url}"><li>{text:tag 4 title}</li></a>
  836. <a href="{text:tag 5 url}"><li>{text:tag 5 title}</li></a>
  837. <a href="{text:tag 6 url}"><li>{text:tag 6 title}</li></a>
  838. </div>
  839. </div></div>
  840.  
  841. <div class="top"></div>
  842. <div class="left"></div>
  843. <div class="right"></div>
  844. <div class="bottom"></div>
  845.  
  846. <div class="aboutt">
  847. <img src="{image:bottom image 2}" style="position:fixed; bottom: 40px; left: 40px;">
  848. <div class="inne">
  849. <div class="abouter">
  850. {text:about}
  851. </div>
  852. </div> </div>
  853. <div id="assk">
  854. <img src="{image:bottom image 3}" style="position:fixed; bottom: 40px; left: 40px;">
  855. <div class="inner">
  856. <div class="askbox">
  857. <center><iframe frameborder="0" scrolling="no" width="100%" height="255" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></center>
  858. </div>
  859. </div></div>
  860.  
  861. <div id="content">
  862. {block:Posts inlineMediaWidth="400" inlineNestedMediaWidth="400"}
  863. <!-- the area below removes the VIA and SOURCES of posts -->
  864. {block:ContentSource}
  865. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  866. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  867. {/block:SourceLogo}
  868. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  869. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  870. <div class="post">
  871.  
  872. {block:Text}
  873. {block:Title}
  874. <h5>{Title}</h5>
  875. {/block:Title}
  876. <div class="post-body">
  877. {Body}
  878. </div>
  879. {/block:Text}
  880.  
  881. {block:Photo} <div class="loll">
  882. <div class="lol">
  883. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  884. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  885. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}</div></div>
  886. {/block:Photo}
  887.  
  888. {block:Panorama}<div class="loll">
  889. <div class="lol">
  890. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  891. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  892. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}</div></div>
  893. {/block:Panorama}
  894.  
  895. {block:Photoset}
  896. <div class="loll">
  897. <div class="lol">
  898. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  899. {block:Photos}
  900. <div class="photo-data">
  901. <div class="pxu-photo">
  902. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  903. </div>
  904. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  905. </a>
  906. </div>
  907. {/block:Photos}
  908. </div></div></div>
  909. {/block:Photoset}
  910.  
  911. {block:Link}
  912. {block:Description}
  913. <div class="link-body">{Description}</div>
  914. {/block:Description}
  915. <h3><a href="{URL}" class="link" {Target}>{Name}</a></h3>
  916. {/block:Link}
  917.  
  918. {block:Quote}
  919. <h5>{Quote}</h5>
  920. {block:Source}<small style="text-transform: uppercase; letter-spacing: 1px;"> &mdash; {Source} </small>{/block:Source}
  921. {/block:Quote}
  922.  
  923. {block:Chat}
  924. {block:Title}
  925. <h2>{Title}</h2>
  926. {/block:Title}
  927.  
  928. {block:Lines}
  929. <div class="line">
  930. <li class="{Alt} user_{UserNumber}" style="font: italic 10px/1.5em 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; display: inline-block; list-style:none;">
  931. {block:Label}
  932. <div class="label" style="display: inline-block; font-weight: 700; margin-right: 5px;">{Label}</div>
  933. {/block:Label}
  934. {Line}
  935. </li></div>
  936. {/block:Lines}
  937. {/block:Chat}
  938.  
  939. {block:Audio}
  940. <center>{AudioPlayerWhite}</center>
  941. {/block:Audio}
  942.  
  943. {block:Video}
  944. <div class="video">{VideoEmbed-700}</div>
  945. {/block:Video}
  946.  
  947. {block:Answer}
  948. <div class="question">
  949. <div class="asker">{lang:Asker asked}</div>
  950. <div class="asker-question">{Question}</div>
  951. </div>
  952. {block:Answerer}
  953. <div class="answer">
  954. <div class="answerer-answer">{Answer}</div>
  955. <div class="answerer">{Answerer}{lang:Replies}</div>
  956. </div>
  957. {/block:Answerer}
  958. <div class="replies">{Replies}</div>
  959. {/block:Answer}
  960.  
  961. {block:IndexPage}
  962. {block:Caption} <div class="caption"> {Caption} </div> {/block:Caption}
  963.  
  964. <div id="permalinks">
  965. {block:RebloggedFrom}<a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-30}" style="width: 30px; -webkit-border-radius: 100%; -webkit-border-top-left-radius: 0; -moz-border-radius: 100%; -moz-border-radius-topleft: 0;
  966. border-radius: 100%; border-top-left-radius: 0;"/></a>{/block:RebloggedFrom}
  967.  
  968. {block:NotReblog} <div class="notreblob"></div> {/block:NotReblog}
  969.  
  970. <a href="{Permalink}" target="_blank"> <div id="bubble"><span>info</span></div></a>
  971. <a href="{ReblogURL}" target="_blank" class="details"> <div id="bubble"><span>reblog</span></div></a>
  972. </div>
  973. {/block:IndexPage}
  974.  
  975. {block:PermalinkPage}
  976. {block:Caption} <div class="permacaption"> {Caption} </div>
  977. {/block:Caption}
  978. {block:Date}
  979. <div class="permainfo">
  980. Posted on {DayofMonth} {Month} {Year} with {NoteCountwithLabel}<br>
  981. {block:HasTags}
  982. Filed under the tags: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}<br>
  983. {/block:HasTags}
  984. {block:RebloggedFrom}
  985. Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>, but originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>.
  986. {/block:RebloggedFrom}
  987. {/block:Date}
  988.  
  989. {block:PermalinkPagination}
  990. <br>
  991. {block:PreviousPost}
  992. <a href="{PreviousPost}">
  993. {lang:Previous post}
  994. </a>
  995. {/block:PreviousPost}
  996.  
  997. {block:NextPost}
  998. <a href="{NextPost}" style="float: right;">
  999. {lang:Next post}
  1000. </a>
  1001. {/block:NextPost}
  1002. {/block:PermalinkPagination}
  1003. </div>
  1004. {block:PostNotes}
  1005. <div class="notes">
  1006. {PostNotes}
  1007. </div>
  1008. {/block:PostNotes}
  1009. {/block:PermalinkPage}
  1010.  
  1011. </div>
  1012. {/block:Posts}
  1013.  
  1014. <div class="bottomer">{block:Pagination}
  1015. {block:NextPage}
  1016. <div id="clicker">
  1017. load more
  1018. <a href="{NextPage}" id="nextpage" style="display: none;" >next</a>
  1019. {/block:NextPage} </div> {/block:Pagination}
  1020. <a class="scrollt">top</a>
  1021. </div>
  1022. </div>
  1023. <!-- JUBILEE THEMES / SOFTWARING.TUMBLR.COM -->
  1024. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1025. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1026. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1027. <script>
  1028. $(document).scroll(function () {
  1029. var y = $(this).scrollTop();
  1030. if (y > 50) {
  1031. $('.bottomer').fadeIn(500);
  1032. } else {
  1033. $('.bottomer').fadeOut(500);
  1034. }
  1035. });
  1036. </script>
  1037. <script>
  1038. // Script made by jubilee aka softwaring.tumblr.com
  1039. // Do not take this code, bits of it, or copy parts of it thanks
  1040. $(document).ready(function(){
  1041. $('.photo-slideshow').pxuPhotoset({
  1042. lightbox: true,
  1043. rounded: false,
  1044. gutter: '1px',
  1045. borderRadius: '0px',
  1046. photoset: '.photo-slideshow',
  1047. photoWrap: '.photo-data',
  1048. photo: '.pxu-photo'
  1049. });
  1050. $('a.arrow').click(function(){
  1051. $(this).toggleClass('first');
  1052. $('.links').slideToggle(400);
  1053. $('.about, h1').fadeToggle(800);
  1054. $('.credit1').fadeIn(400);
  1055. $('.imag').toggleClass('ok');
  1056. $('#assk, .infoo, a.close, .aboutt').fadeOut(400);
  1057. $('#content').removeClass('align');
  1058. });
  1059. $('a.ask').click(function(){
  1060. setTimeout(function() { $('#assk').fadeIn(400); }, 800);
  1061. $('.infoo, .aboutt').fadeOut(400);
  1062. $('#content').addClass('align');
  1063. $('a.close').fadeIn(400);
  1064. });
  1065. $('a.nav').click(function(){
  1066. setTimeout(function() { $('.infoo').fadeIn(400); }, 800);
  1067. $('#assk, .aboutt').fadeOut(800);
  1068. $('#content').addClass('align');
  1069. $('a.close').fadeIn(400);
  1070. });
  1071. $('a.abo').click(function(){
  1072. setTimeout(function() { $('.aboutt').fadeIn(400); }, 800);
  1073. $('#assk, .infoo').fadeOut(800);
  1074. $('#content').addClass('align');
  1075. $('a.close').fadeIn(400);
  1076. });
  1077. $('a.close').click(function(){
  1078. $('#assk, .infoo, .aboutt').fadeOut(400);
  1079. $('#content').removeClass('align');
  1080. $('a.close').fadeOut(200);
  1081. });
  1082. $('a.scrollt').click(function() {
  1083. $('body, html').animate({scrollTop:0}, 1500);
  1084. });
  1085. });
  1086. </script>
  1087. <script src="http://static.tumblr.com/mqkrxog/293nfwao1/masonry.js"></script>
  1088. <script src="http://static.tumblr.com/mqkrxog/7g3nfwaof/masonry1.js"></script>
  1089. <script src="http://static.tumblr.com/mqkrxog/y5Ongpsyr/infinite.js"></script>
  1090. <script type="text/javascript">
  1091. $(document).ready(function() {
  1092. var $container = $('#content');
  1093. $container.imagesLoaded( function(){
  1094. $container.masonry({
  1095. itemSelector: '.post'
  1096. });
  1097. });
  1098. $container.infinitescroll({
  1099. loading: {
  1100. selector: null,
  1101. speed: 'fast',
  1102. start: undefined
  1103. },
  1104. navSelector : 'a#nextpage',
  1105. nextSelector : 'a#nextpage',
  1106. itemSelector : '.post',
  1107. bufferPx : 1250
  1108. },
  1109. function( newElements ) {
  1110. var $newElems = $( newElements );
  1111. $newElems.hide();
  1112. $newElems.find('a.perma').click(function(){
  1113. $(this).closest('.post').find('#permalink').fadeToggle(600);
  1114. });
  1115. // Script by Jubilee / Softwaring.tumblr.com / Jubileethemes
  1116. $newElems.find('.photo-slideshow').pxuPhotoset({
  1117. lightbox: true,
  1118. rounded: false,
  1119. borderRadius: '1px',
  1120. gutter: '0px',
  1121. photoset: '.photo-slideshow',
  1122. photoWrap: '.photo-data',
  1123. photo: '.pxu-photo'
  1124. });
  1125. $newElems.imagesLoaded(function(){
  1126. $container.masonry( 'appended', $newElems, {isAnimated: true}, function(){$newElems.animate({height:'toggle' },600);});
  1127. });
  1128. });
  1129. jQuery(window).unbind('.infscr');
  1130. jQuery('#clicker').click(function(){
  1131. jQuery('#content').infinitescroll('retrieve');
  1132. return false;
  1133. });
  1134. });
  1135. </script>
  1136. </body>
  1137. </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!