API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 28th, 2015
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 53.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5. | ---
  6. | Theme by JAZZatkin
  7. | ---
  8. | http://jazzatkin.com
  9. | @JAZZatkin
  10. | ---
  11. -->
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19. <meta name="viewport" content="width=680">
  20. <meta name="color:Background Left" content="#97c5e0">
  21. <meta name="color:Background Right" content="#bbe4d0">
  22. <meta name="color:Highlight Color" content="#bbe4d0">
  23. <meta name="color:Link Hover" content="#00c0ff"/>
  24. <meta name="if:Dark Theme" content="0">
  25. <meta name="if:Infinite Scroll" content="1">
  26. <meta name="if:Description In Header" content="1" />
  27. <meta name="if:Social Links In Header" content="1" />
  28. <meta name="text:FacebookLink" content="http://facebook.com">
  29. <meta name="text:InstagramLink" content="http://instagram.com">
  30. <meta name="text:TwitterLink" content="http://twitter.com">
  31. <meta name="text:SpotifyLink" content="http://spotify.com">
  32. <meta name="if:Dropdown Menu" content="1" />
  33. <meta name="if:Archive Link" content="1" />
  34. <meta name="if:Ask Link" content="1" />
  35. <meta name="text:Link01" content="Download">
  36. <meta name="text:Link01URL" content="https://www.tumblr.com/theme/39859">
  37. <meta name="text:Link02" content="">
  38. <meta name="text:Link02URL" content="">
  39. <meta name="text:Link03" content="">
  40. <meta name="text:Link03URL" content="">
  41. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|PT+Mono|Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400' rel='stylesheet' type='text/css'>
  42. <style type="text/css">
  43. html, body{
  44. margin:0;
  45. padding:0;
  46. background: -webkit-linear-gradient(left, {color:Background Left}, {color:Background Right});
  47. background: -o-linear-gradient(right, {color:Background Left}, {color:Background Right});
  48. background: -moz-linear-gradient(right, {color:Background Left}, {color:Background Right});
  49. background: linear-gradient(to right, {color:Background Left}, {color:Background Right});
  50. }
  51. body{
  52. padding-bottom: 10px;
  53. -webkit-font-smoothing: antialiased;
  54. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  55. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  56. }
  57. /* Page Borders */
  58. #top, #bottom{
  59. width: 100%;
  60. height: 10px;
  61. background-color: #FFF;
  62. {block:IfDarkTheme}
  63. background-color: #000;
  64. {/block:IfDarkTheme}
  65. z-index: 200;
  66. position: fixed;
  67. display: block;
  68. }
  69. #top{
  70. top: 0;
  71. left: 0;
  72. }
  73. #bottom{
  74. bottom: 0;
  75. left: 0;
  76. }
  77. #left, #right{
  78. width: 10px;
  79. height: 100%;
  80. background-color: #FFF;
  81. {block:IfDarkTheme}
  82. background-color: #000;
  83. {/block:IfDarkTheme}
  84. z-index: 200;
  85. position: fixed;
  86. display: block;
  87. }
  88. #left{
  89. top: 0;
  90. left: 0;
  91. }
  92. #right{
  93. top: 0;
  94. right: 0;
  95. }
  96. /* Header */
  97. header{
  98. width: 800px;
  99. margin: 0 auto;
  100. overflow: hidden;
  101. padding: 130px 0px 60px 0px;
  102. text-align: center;
  103. color: #FFF;
  104. {block:IfDarkTheme}
  105. color: #000;
  106. {/block:IfDarkTheme}
  107. }
  108. @media screen and (max-width: 960px){
  109. header{
  110. width:460px;
  111. }
  112. }
  113. header h1{
  114. padding: 0;
  115. margin: 0;
  116. font-family: 'Roboto';
  117. font-size: 35px;
  118. font-weight: 300;
  119. letter-spacing: 1px;
  120. margin-bottom: 15px;
  121. }
  122. header h1 a{
  123. color: #FFF;
  124. {block:IfDarkTheme}
  125. color: #000;
  126. {/block:IfDarkTheme}
  127. text-decoration: none;
  128. }
  129. header h2{
  130. font-weight: normal;
  131. font-family: 'Playfair Display';
  132. font-style: italic;
  133. font-size: 20px;
  134. padding: 0;
  135. margin: 0;
  136. margin-bottom: 15px;
  137. }
  138. ul#socials{
  139. width: 250px;
  140. margin: 0 auto;
  141. text-align: center;
  142. padding: 0px;
  143. }
  144. ul#socials li{
  145. display: inline-block;
  146. padding: 0;
  147. margin: 0;
  148. }
  149. ul#socials li a{
  150. padding: 0 !important;
  151. margin: 0 !important;
  152. }
  153. a.facebook {
  154. display: block;
  155. margin: 0px;
  156. padding: 0px;
  157. width: 35px;
  158. height: 35px;
  159. background: url('http://static.tumblr.com/ly7no2u/EzYnp35xm/social-sprite.png') 0 0 no-repeat;
  160. background-size: 210px auto;
  161. background-position: 0px 0px;
  162. {block:IfDarkTheme}
  163. background-position: 0px -35px;
  164. {/block:IfDarkTheme}
  165. }
  166. a.facebook:hover {
  167. opacity: 0.5;
  168. }
  169. a.twitter {
  170. display: block;
  171. margin: 0px;
  172. padding: 0px;
  173. width: 35px;
  174. height: 35px;
  175. background: url('http://static.tumblr.com/ly7no2u/EzYnp35xm/social-sprite.png') 0 0 no-repeat;
  176. background-size: 210px auto;
  177. background-position: -35px 0px;
  178. {block:IfDarkTheme}
  179. background-position: -35px -35px;
  180. {/block:IfDarkTheme}
  181. }
  182. a.twitter:hover {
  183. opacity: 0.5;
  184. }
  185. a.tumblr{
  186. display: block;
  187. margin: 0px;
  188. padding: 0px;
  189. width: 35px;
  190. height: 35px;
  191. background: url('http://static.tumblr.com/ly7no2u/EzYnp35xm/social-sprite.png') 0 0 no-repeat;
  192. background-size: 210px auto;
  193. background-position: -70px 0px;
  194. {block:IfDarkTheme}
  195. background-position: -70px -35px;
  196. {/block:IfDarkTheme}
  197. }
  198. a.tumblr:hover {
  199. opacity: 0.5;
  200. }
  201. a.instagram{
  202. display: block;
  203. margin: 0px;
  204. padding: 0px;
  205. width: 35px;
  206. height: 35px;
  207. background: url('http://static.tumblr.com/ly7no2u/EzYnp35xm/social-sprite.png') 0 0 no-repeat;
  208. background-size: 210px auto;
  209. background-position: -105px 0;
  210. {block:IfDarkTheme}
  211. background-position: -105px -35px;
  212. {/block:IfDarkTheme}
  213. }
  214. a.instagram:hover {
  215. opacity: 0.5;
  216. }
  217. a.spotify {
  218. display: block;
  219. margin: 0px;
  220. padding: 0px;
  221. width: 35px;
  222. height: 35px;
  223. float: left;
  224. background: url('http://static.tumblr.com/ly7no2u/EzYnp35xm/social-sprite.png') 0 0 no-repeat;
  225. background-size: 210px auto;
  226. background-position: -140px 0px;
  227. {block:IfDarkTheme}
  228. background-position: -140px -35px;
  229. {/block:IfDarkTheme}
  230. }
  231. a.spotify:hover {
  232. opacity: 0.5;
  233. }
  234. #menu{
  235. position: fixed;
  236. top: 20px;
  237. left: 30px;
  238. z-index: 170;
  239. font-size: 30px;
  240. display: block;
  241. {block:IfDarkTheme}
  242. color: #000;
  243. {/block:IfDarkTheme}
  244. }
  245. #menu:hover{
  246. cursor: pointer;
  247. opacity: 0.5;
  248. }
  249. ul#nav.js{
  250. display: none;
  251. }
  252. ul#nav{
  253. position: fixed;
  254. top: 0px;
  255. left: 0px;
  256. width: 120px;
  257. height: 100vh;
  258. padding: 80px 20px 20px 30px;
  259. display: block;
  260. font-size: 11px;
  261. z-index: 150;
  262. background-image: url('http://static.tumblr.com/ly7no2u/BP9noxnes/dots50.png');
  263. background-attachment: fixed;
  264. }
  265. ul#nav li{
  266. display: block;
  267. text-align: left;
  268. margin-bottom: 20px;
  269. }
  270. ul#nav li a{
  271. padding: 11px 14px;
  272. color: #FFF;
  273. background-color:rgba(255,255,255,0.2);
  274. border: 1px solid #FFF;
  275. {block:IfDarkTheme}
  276. color: #000;
  277. border: 1px solid #000;
  278. background-color:rgba(0,0,0,0.1);
  279. {/block:IfDarkTheme}
  280. display: block;
  281. overflow: hidden;
  282. text-decoration: none;
  283. font-family: 'Roboto';
  284. font-weight: 400;
  285. letter-spacing: 1px;
  286. text-transform: uppercase;
  287. line-height: 1.5em;
  288. text-align: center;
  289. }
  290. ul#nav li a:hover{
  291. background-color:{color:Link Hover};
  292. }
  293. /* Container Structure */
  294. .container{
  295. {block:IndexPage}
  296. width: 90%;
  297. {/block:IndexPage}
  298. {block:PermalinkPage}
  299. width: 100%;
  300. {/block:PermalinkPage}
  301. overflow: hidden;
  302. margin: 0 auto;
  303. margin-bottom: 50px;
  304. }
  305. /* Basics */
  306. a{
  307. -webkit-transition: all 0.3s ease-in-out;
  308. -moz-transition: all 0.3s ease-in-out;
  309. -o-transition: all 0.3s ease-in-out;
  310. transition: all 0.3s ease-in-out;
  311. color: #FFF;
  312. {block:IfDarkTheme}
  313. color: #000;
  314. {/block:IfDarkTheme}
  315. text-decoration: none;
  316. }
  317. p{
  318. margin: 0;
  319. padding: 0;
  320. color: #FFF;
  321. {block:IfDarkTheme}
  322. color: #000;
  323. {/block:IfDarkTheme}
  324. padding-bottom: 10px;
  325. }
  326.  
  327. img{
  328. display: block;
  329. margin: 0;
  330. padding: 0;
  331. }
  332. ul, ol{
  333. padding: 0;
  334. margin: 0;
  335. }
  336. #none{
  337. display: none !important;
  338. }
  339. blockquote{
  340. margin: 10px 0px 10px 30px;
  341. }
  342. /* Posts */
  343. .post{
  344. {block:IndexPage}
  345. float: left;
  346. position: relative;
  347. width: 25%;
  348. margin: 0;
  349. line-height: 0em;
  350. {/block:IndexPage}
  351. {block:PermalinkPage}
  352. width: 640px;
  353. margin: 0 auto;
  354. {/block:PermalinkPage}
  355. padding: 0;
  356. overflow: hidden;
  357. }
  358. .post a{
  359. padding-bottom: 2px;
  360. border-bottom: 1px solid #FFF;
  361. {block:IfDarkTheme}
  362. border-bottom: 1px solid #000;
  363. {/block:IfDarkTheme}
  364. }
  365. .post a:hover{
  366. color:{color:Link Hover};
  367. border-bottom: 1px solid {color:Link Hover};
  368. }
  369. {block:IndexPage}
  370. @media screen and (max-width: 1200px){
  371. .post{
  372. width: 33%;
  373. }
  374. }
  375. @media screen and (max-width: 900px){
  376. .post{
  377. width: 50%;
  378. }
  379. }
  380. @media screen and (max-width: 600px){
  381. .post{
  382. width: 100%;
  383. }
  384. }
  385. {/block:IndexPage}
  386. /* Meta */
  387. .post .meta{
  388. position: absolute;
  389. top: 0;
  390. left: 0;
  391. bottom: 0;
  392. right: 0;
  393. opacity: 0;
  394. overflow:visible;
  395. background-image: url('http://static.tumblr.com/ly7no2u/jhunoz9gb/dots.png');
  396. {block:IfDarkTheme}
  397. background-image: url('http://static.tumblr.com/ly7no2u/3g1np37l8/dots-white.png');
  398. {/block:IfDarkTheme}
  399. -webkit-transition: all 0.4s ease-in-out;
  400. -moz-transition: all 0.4s ease-in-out;
  401. -o-transition: all 0.4s ease-in-out;
  402. -ms-transition: all 0.4s ease-in-out;
  403. transition: all 0.4s ease-in-out;
  404. -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
  405. box-sizing:border-box;
  406. border: 5px solid #FFF;
  407. {block:IfDarkTheme}
  408. border: 5px solid #000;
  409. {/block:IfDarkTheme}
  410. text-align: center;
  411. }
  412.  
  413. .meta a{
  414. border: 0;
  415. }
  416.  
  417.  
  418. .post .buttons{
  419. position: absolute;
  420. width: 100%;
  421. height: 166px;
  422. top: 50%;
  423. left: 0;
  424. opacity: 0;
  425. margin-top: -80px;
  426. -webkit-transition: opacity 0.5s 0s ease-in-out;
  427. -moz-transition: opacity 0.5s 0s ease-in-out;
  428. -o-transition: opacity 0.5s 0s ease-in-out;
  429. -ms-transition: opacity 0.5s 0s ease-in-out;
  430. transition: opacity 0.5s 0s ease-in-out;
  431. }
  432. .post ul#buttons{
  433. width: 100%;
  434. overflow: hidden;
  435. margin: 0 auto;
  436. text-align: center;
  437. padding: 0px;
  438. }
  439. ul#buttons li{
  440. display: inline-block;
  441. padding: 10px;
  442. height: 17px;
  443. width: 17px;
  444. margin: 0px 5px;
  445. border: 2px solid #FFF;
  446. {block:IfDarkTheme}
  447. border: 2px solid #000;
  448. {/block:IfDarkTheme}
  449. border-radius: 20px;
  450. -webkit-transition: all 0.3s ease-in-out;
  451. -moz-transition: all 0.3s ease-in-out;
  452. -o-transition: all 0.3s ease-in-out;
  453. transition: all 0.3s ease-in-out;
  454. line-height: 1em;
  455. }
  456. .post:hover .meta {
  457. opacity: 1;
  458. }
  459. .post:hover .buttons{
  460. opacity:1;
  461. -moz-transition-delay: 0.4s;
  462. -webkit-transition-delay: 0.4s;
  463. -o-transition-delay: 0.4s;
  464. -ms-transition-delay: 0.4s;
  465. transition-delay: 0.4s;
  466. }
  467. .reblogbutton, .likebutton, .perma{
  468. height: 17px;
  469. width: 17px;
  470. overflow: hidden;
  471. }
  472. .perma a{
  473. color: #FFF;
  474. {block:IfDarkTheme}
  475. color: #000;
  476. {/block:IfDarkTheme}
  477. text-decoration: none;
  478. font-family: arial;
  479. font-weight: normal;
  480. letter-spacing: 1px;
  481. line-height: 1em;
  482. font-size: 17px;
  483. text-transform: uppercase;
  484. }
  485.  
  486. .post .notecount{
  487. font-family: 'Oswald';
  488. font-size: 60px;
  489. line-height: normal;
  490. color: #FFF;
  491. {block:IfDarkTheme}
  492. color: #000;
  493. {/block:IfDarkTheme}
  494. width: 100%;
  495. overflow: hidden;
  496. font-weight: bold;
  497. padding-bottom: 5px;
  498. }
  499. .perma a:hover{
  500. color: #FFF;
  501. {block:IfDarkTheme}
  502. color: #000;
  503. {/block:IfDarkTheme}
  504. }
  505. .reblogbutton:hover, .likebutton:hover, .perma:hover{
  506. background-color: {color:Link Hover};
  507.  
  508.  
  509. }
  510. /* Text Posts */
  511. .text{
  512. -webkit-box-sizing: border-box;
  513. -moz-box-sizing: border-box;
  514. box-sizing: border-box;
  515. padding: 40px 40px 30px 40px;
  516. background-color: {color:Highlight Color};
  517. line-height: 1.8em;
  518. font-family: 'Roboto';
  519. font-weight: 300;
  520. font-size: 13pt;
  521. letter-spacing: 1px;
  522. color: #FFF;
  523. {block:IfDarkTheme}
  524. color: #000;
  525. {/block:IfDarkTheme}
  526. {block:PermalinkPage}
  527. border: 1px solid #FFF;
  528. background-color:rgba(255,255,255,0.1);
  529. {block:IfDarkTheme}
  530. border: 1px solid #FFF;
  531. background-color:rgba(0,0,0,0.1);
  532. {/block:IfDarkTheme}
  533. {/block:PermalinkPage}
  534. }
  535. .text h3{
  536. padding: 0;
  537. margin: 0;
  538. margin-bottom: 10px;
  539. padding-bottom: 10px;
  540. border-bottom: 1px solid #FFF;
  541. {block:IfDarkTheme}
  542. border-bottom: 1px solid #000;
  543. {/block:IfDarkTheme}
  544. font-family: 'Roboto';
  545. font-size: 10pt;
  546. text-transform: uppercase;
  547. font-weight: bold;
  548. letter-spacing: 1px;
  549. }
  550. .text h3 a{
  551. color: #FFF;
  552. {block:IfDarkTheme}
  553. color: #000;
  554. {/block:IfDarkTheme}
  555. text-decoration: none;
  556. padding: 0;
  557. border: 0;
  558. }
  559.  
  560. .text h3 a:hover{
  561. color: #FFF;
  562. {block:IfDarkTheme}
  563. color: #000;
  564. {/block:IfDarkTheme}
  565. border: 0;
  566. }
  567. /* Photoset Posts */
  568. ul#photoset{
  569. list-style-type: none;
  570. padding: 0;
  571. margin: 0;
  572. }
  573. ul#photoset li{
  574. padding: 0;
  575. margin: 0;
  576. }
  577.  
  578. ul#photoset li:last-child {
  579. margin-bottom: 0px;
  580.  
  581. }
  582. /* Audio Posts */
  583. .audioWrapper {
  584. position: relative;
  585. padding-bottom: 100%; /* 16:9 */
  586. height: 0;
  587. }
  588. .audioWrapper iframe {
  589. position: absolute;
  590. top: 0;
  591. left: 0;
  592. width: 100%;
  593. height: 100%;
  594. }
  595. /* Video Posts */
  596. .videoWrapper {
  597. position: relative;
  598. padding-bottom: 56.25%; /* 16:9 */
  599. padding-top: 25px;
  600. height: 0;
  601. }
  602. .videoWrapper iframe {
  603. position: absolute;
  604. top: 0;
  605. left: 0;
  606. width: 100%;
  607. height: 100%;
  608. }
  609. /* Quote Posts */
  610. .quote{
  611. -webkit-box-sizing: border-box;
  612. -moz-box-sizing: border-box;
  613. box-sizing: border-box;
  614. padding: 40px;
  615. background-color: {color:Highlight Color};
  616. line-height: 1.8em;
  617. font-family: 'Roboto';
  618. font-weight: 300;
  619. font-size: 13pt;
  620. letter-spacing: 1px;
  621. color: #FFF;
  622. {block:IfDarkTheme}
  623. color: #000;
  624. {/block:IfDarkTheme}
  625. {block:PermalinkPage}
  626. border: 1px solid #FFF;
  627. background-color:rgba(255,255,255,0.1);
  628. {block:IfDarkTheme}
  629. border: 1px solid #FFF;
  630. background-color:rgba(0,0,0,0.1);
  631. {/block:IfDarkTheme}
  632. {/block:PermalinkPage}
  633. }
  634.  
  635. .post-quote{
  636. margin-bottom: 20px;
  637. }
  638. span.quote-mark-right, span.quote-mark-left{
  639. font-family: arial;
  640. font-size: 90px;
  641. display: block;
  642. line-height: 0.8em;
  643. }
  644. span.quote-mark-left{
  645. margin-bottom: -25px;
  646. }
  647. span.quote-mark-right{
  648. text-align: right;
  649. margin-top: -40px;
  650. }
  651. .post-source{
  652. font-family: 'Roboto';
  653. font-size: 10pt;
  654. text-transform: uppercase;
  655. font-weight: bold;
  656. letter-spacing: 1px;
  657. }
  658. /* Link Posts */
  659. a.link{
  660. display: block;
  661. color: #FFF;
  662. {block:IfDarkTheme}
  663. color: #000;
  664. {/block:IfDarkTheme}
  665. text-decoration: none;
  666. line-height: 1.8em;
  667. background-color: {color:Highlight Color};
  668. padding: 0;
  669. border: 0;
  670. }
  671.  
  672. a.link:hover{
  673. background-color:{color:Link Hover};
  674. color: #FFF;
  675. {block:IfDarkTheme}
  676. color: #000;
  677. {/block:IfDarkTheme}
  678. border: 0;
  679. }
  680. .link-thumb img{
  681. width: 100%;
  682. height: auto;
  683. }
  684. .link-host{
  685. border-bottom: 1px solid #FFF;
  686. {block:IfDarkTheme}
  687. border-bottom: 1px solid #000;
  688. {/block:IfDarkTheme}
  689. font-family: 'Roboto';
  690. font-weight: 300;
  691. font-size: 10pt;
  692. text-transform: uppercase;
  693. font-weight: bold;
  694.  
  695. letter-spacing: 1px;
  696. -webkit-box-sizing: border-box;
  697. -moz-box-sizing: border-box;
  698. box-sizing: border-box;
  699. margin: 0px 40px;
  700. padding: 35px 0px 10px 0px;
  701. }
  702. .link-title{
  703. font-family: 'Roboto';
  704. font-weight: 300;
  705. font-size: 13pt;
  706. letter-spacing: 1px;
  707. color: #FFF;
  708. {block:IfDarkTheme}
  709. color: #000;
  710. {/block:IfDarkTheme}
  711. padding: 10px 40px 40px 40px;
  712. }
  713. /* Answer Posts */
  714. .post-question{
  715. -webkit-box-sizing: border-box;
  716. -moz-box-sizing: border-box;
  717. box-sizing: border-box;
  718. padding: 40px;
  719. background-color: {color:Highlight Color};
  720. line-height: 1.8em;
  721. font-family: 'Roboto';
  722. font-weight: 300;
  723. font-size: 13pt;
  724. letter-spacing: 1px;
  725. color: #FFF;
  726. {block:IfDarkTheme}
  727. color: #000;
  728. {/block:IfDarkTheme}
  729. {block:PermalinkPage}
  730. border: 1px solid #FFF;
  731. background-color:rgba(255,255,255,0.1);
  732. {block:IfDarkTheme}
  733. border: 1px solid #000;
  734. background-color:rgba(0,0,0,0.1);
  735. {/block:IfDarkTheme}
  736. {/block:PermalinkPage}
  737. }
  738. .question-container, .answer-container, .replies{
  739. width: 100%;
  740. overflow: hidden;
  741. }
  742.  
  743. .question-container{
  744. border-bottom: 1px solid #FFF;
  745. {block:IfDarkTheme}
  746. border-bottom: 1px solid #000;
  747. {/block:IfDarkTheme}
  748. margin-bottom: 30px;
  749. padding-bottom: 30px;
  750. }
  751.  
  752. .question-icon, .answer-icon{
  753. width: 60px;
  754. margin-bottom: 20px;
  755. }
  756.  
  757. .question-icon img, .answer-icon img{
  758. width: 100%;
  759. height: auto;
  760. -webkit-border-radius: 30px;
  761. -moz-border-radius: 30px;
  762. border-radius: 30px;
  763. }
  764.  
  765. .question, .answer{
  766. float: left;
  767. width: 100%;
  768. }
  769.  
  770. .post-question .asker, .post-question .answerer{
  771. font-size: 10pt;
  772. text-transform: uppercase;
  773. margin-bottom: 0px;
  774. font-weight: bold;
  775. }
  776.  
  777. .post-question .asker a, .post-question .answerer a{
  778. color: #FFF;
  779. {block:IfDarkTheme}
  780. color: #000;
  781. {/block:IfDarkTheme}
  782. text-decoration: none;
  783. padding: 0;
  784. border: 0;
  785. }
  786. /* Chat Posts */
  787. .chat{
  788. -webkit-box-sizing: border-box;
  789. -moz-box-sizing: border-box;
  790. box-sizing: border-box;
  791. padding: 40px 40px 30px 40px;
  792. background-color: {color:Highlight Color};
  793. line-height: 1.8em;
  794. font-family: 'Roboto';
  795. font-weight: 300;
  796. font-size: 13pt;
  797. letter-spacing: 1px;
  798. color: #FFF;
  799. {block:IfDarkTheme}
  800. color: #000;
  801. {/block:IfDarkTheme}
  802. {block:PermalinkPage}
  803. border: 1px solid #FFF;
  804. background-color:rgba(255,255,255,0.1);
  805. {block:IfDarkTheme}
  806. border: 1px solid #000;
  807. background-color:rgba(0,0,0,0.1);
  808. {/block:IfDarkTheme}
  809. {/block:PermalinkPage}
  810. }
  811. .chat h3{
  812. padding: 0;
  813. margin: 0;
  814. margin-bottom: 10px;
  815. padding-bottom: 10px;
  816. border-bottom: 1px solid #FFF;
  817. {block:IfDarkTheme}
  818. border-bottom: 1px solid #000;
  819. {/block:IfDarkTheme}
  820. font-family: 'Roboto';
  821. font-size: 10pt;
  822. text-transform: uppercase;
  823. font-weight: bold;
  824. letter-spacing: 1px;
  825. }
  826. .chat h3 a{
  827. text-decoration: none;
  828. color: #FFF;
  829. {block:IfDarkTheme}
  830. color: #000;
  831. {/block:IfDarkTheme}
  832. padding: 0;
  833. border: 0;
  834. }
  835.  
  836. .chat h3 a:hover{
  837. color: #FFF;
  838. {block:IfDarkTheme}
  839. color: #000;
  840. {/block:IfDarkTheme}
  841. border: 0;
  842. }
  843. ul#chat{
  844. font-family: 'Roboto';
  845. font-weight: 300;
  846. font-size: 13pt;
  847. letter-spacing: 1px;
  848. padding: 0;
  849. margin: 0;
  850. line-height: 1.8em;
  851. }
  852. ul#chat li{
  853. list-style-type: none;
  854. padding: 10px 0px;
  855. border-bottom: 1px solid #FFF;
  856. {block:IfDarkTheme}
  857. border-bottom: 1px solid #000;
  858. {/block:IfDarkTheme}
  859. }
  860.  
  861. ul#chat li:last-child {
  862. border-bottom: 0px solid #FFF;
  863.  
  864. }
  865. ul#chat li span.label{
  866. font-weight: bold;
  867. }
  868. .caption{
  869. width: 640px;
  870. overflow: hidden;
  871. margin: 0 auto;
  872. margin-top: 30px;
  873. text-align: justify;
  874. -webkit-box-sizing: border-box;
  875. -moz-box-sizing: border-box;
  876. box-sizing: border-box;
  877. padding: 40px 40px 30px 40px;
  878. line-height: 1.8em;
  879. text-align: justify;
  880. font-family: 'Roboto';
  881. font-weight: 300;
  882. font-size: 13pt;
  883. border: 1px solid #FFF;
  884. background-color:rgba(255,255,255,0.1);
  885. {block:IfDarkTheme}
  886. border: 1px solid #000;
  887. background-color:rgba(0,0,0,0.1);
  888. {/block:IfDarkTheme}
  889. }
  890.  
  891. .caption a{
  892. color: #FFF;
  893. border-bottom: 1px solid #FFF;
  894. {block:IfDarkTheme}
  895. border: 1px solid #000;
  896. color: #000;
  897. {/block:IfDarkTheme}
  898. text-decoration: none;
  899. padding-bottom: 2px;
  900. }
  901.  
  902. .caption a:hover{
  903. color: {color:Link Hover};
  904. border-bottom: 1px solid {color:Link Hover};
  905. }
  906. .credit{
  907. width: 100%;
  908. overflow: hidden;
  909. font-size: 11px;
  910. font-family: 'Roboto';
  911. color: #FFF;
  912. {block:IfDarkTheme}
  913. color: #000;
  914. {/block:IfDarkTheme}
  915. font-weight: 300;
  916. -webkit-box-sizing: border-box;
  917. -moz-box-sizing: border-box;
  918. box-sizing: border-box;
  919. padding: 30px 40px;
  920. display: block;
  921. text-align: right;
  922. letter-spacing: 1px;
  923. margin: 0;
  924. }
  925. .credit a{
  926. border-bottom: 1px solid #FFF;
  927. color: #FFF;
  928. {block:IfDarkTheme}
  929. color: #000;
  930. border-bottom: 1px solid #000;
  931. {/block:IfDarkTheme}
  932. text-decoration: none;
  933. padding-bottom: 2px;
  934. }
  935. /* Pagination */
  936. .pagination, .perma-pagination{
  937. width: 100%;
  938. overflow: hidden;
  939. background-color:rgba(255,255,255,0.1);
  940. border-top: 1px solid #FFF;
  941. border-bottom: 1px solid #FFF;
  942. {block:IfDarkTheme}
  943. background-color:rgba(0,0,0,0.1);
  944. border-top: 1px solid #000;
  945. border-bottom: 1px solid #000;
  946. {/block:IfDarkTheme}
  947. padding: 30px 0px;
  948. }
  949. .pagination-inner{
  950. width: 90%;
  951. margin: 0 auto;
  952. }
  953. .perma-pagination-container{
  954. width: 640px;
  955. margin: 0 auto;
  956. }
  957.  
  958. .pagination a, .perma-pagination a{
  959. padding: 10px;
  960. width: 80px;
  961. font-size: 12px;
  962. text-align: center;
  963. border: 1px solid #FFF;
  964. color: #FFF;
  965. {block:IfDarkTheme}
  966. border: 1px solid #000;
  967. color: #000;
  968. {/block:IfDarkTheme}
  969. text-decoration: none;
  970. font-family: 'Roboto';
  971. font-weight: 300;
  972. text-transform: uppercase;
  973. letter-spacing: 1px;
  974. }
  975. .perma-pagination a#prev, .pagination a#next{
  976. float: right;
  977. }
  978. .perma-pagination a#next, .pagination a#prev{
  979. float: left;
  980. }
  981. .perma-pagination a:hover, .pagination a:hover{
  982. background-color: {color:Link Hover};
  983. }
  984. /* Notes */
  985. #note-page{
  986. width: 100%;
  987. overflow: hidden;
  988. padding: 30px 0px;
  989. font-family: 'Roboto';
  990. font-weight: 300;
  991. letter-spacing: 1px;
  992. color: #FFF;
  993. {block:IfDarkTheme}
  994. color: #000;
  995. {/block:IfDarkTheme}
  996. line-height: 1.4em;
  997. }
  998. .note-container{
  999. width: 640px;
  1000. margin: 0 auto;
  1001. }
  1002.  
  1003. ol.notes {
  1004. list-style-type: none;
  1005. font-weight: 300;
  1006. }
  1007. ol.notes li.note {
  1008. padding: 0px;
  1009. font-size: 12px;
  1010. }
  1011. ol.notes li.note a{
  1012. color: #FFF;
  1013. padding-bottom: 2px;
  1014. border-bottom: 1px solid #FFF;
  1015. {block:IfDarkTheme}
  1016. color: #000;
  1017. border-bottom: 1px solid #000;
  1018. {/block:IfDarkTheme}
  1019. text-decoration: none;
  1020. }
  1021. ol.notes li.note a:hover{
  1022. color: {color:Link Hover};
  1023. border-bottom: 1px solid {color:Link Hover};
  1024. }
  1025. ol.notes li.note img.avatar {
  1026. display: none;
  1027. }
  1028. ol.notes li.note span.action {
  1029. font-weight: normal;
  1030. }
  1031. ol.notes li.note .answer_content {
  1032. font-weight: normal;
  1033. }
  1034. ol.notes li.note blockquote a {
  1035. text-decoration: none;
  1036. }
  1037.  
  1038. .note.more_notes_link_container{
  1039. border-top: 1px solid #FFF;
  1040. {block:IfDarkTheme}
  1041. border-bottom: 1px solid #000;
  1042. {/block:IfDarkTheme}
  1043. padding-top: 20px !important;
  1044. margin-top: 20px;
  1045. text-align: left !important;
  1046. font-size: 14pt !important;
  1047. }
  1048. .note.more_notes_link_container a, a.more_notes_link, .notes_loading{
  1049. text-decoration: none;
  1050. padding: 0 !important;
  1051. border: 0 !important;
  1052. color: #FFF !important;
  1053. {block:IfDarkTheme}
  1054. color: #000 !important;
  1055. {/block:IfDarkTheme}
  1056. text-transform: uppercase;
  1057. font-weight: 300;
  1058. font-family: 'Roboto';
  1059. text-align: left !important;
  1060. font-size: 10pt !important;
  1061. }
  1062. #infscr-loading{
  1063. position: fixed;
  1064. z-index: 198;
  1065. bottom: 0px;
  1066. left: 0px;
  1067. color: #FFF !important;
  1068. {block:IfDarkTheme}
  1069. color: #000 !important;
  1070. {/block:IfDarkTheme}
  1071. font-style: normal !important;
  1072. font-size: 12px;
  1073. -webkit-box-sizing: border-box;
  1074. -moz-box-sizing: border-box;
  1075. box-sizing: border-box;
  1076. font-size: 11px;
  1077. font-family: 'Roboto';
  1078. font-weight: 300;
  1079. padding: 0px 0px 30px 30px;
  1080. display: block;
  1081. text-align: right;
  1082. letter-spacing: 1px;
  1083. line-height: 1em;
  1084. margin: 0;
  1085. }
  1086. #infscr-loading img{
  1087. width: 40px;
  1088. height: 40px;
  1089. float: left;
  1090. }
  1091. #infscr-loading p{
  1092. padding: 0;
  1093. margin: 0;
  1094. padding: 10px;
  1095. }
  1096.  
  1097. {CustomCSS}
  1098.  
  1099. </style>
  1100. </head>
  1101.  
  1102. <body>
  1103. <div id="top"></div>
  1104. <div id="bottom"></div>
  1105. <div id="right"></div>
  1106. <div id="left"></div>
  1107. <header>
  1108. <h1><a href="{BlogURL}">{Title}</a></h1>
  1109. {block:IfDescriptionInHeader}
  1110. <h2>{Description}</h2>
  1111. {/block:IfDescriptionInHeader}
  1112. {block:IfSocialLinksInHeader}
  1113. <ul id="socials">
  1114. {block:IfFacebookLink}
  1115. <li><a class="facebook" href="{text:FacebookLink}" target="_blank"></a></li>{/block:IfFacebookLink}
  1116. {block:IfTwitterLink}<li><a class="twitter" href="{text:TwitterLink}" target="_blank"></a></li>{/block:IfTwitterLink}
  1117. {block:IfInstagramLink}<li><a class="instagram" href="{text:InstagramLink}" target="_blank"></a></li>{/block:IfInstagramLink}
  1118. {block:IfSpotifyLink}<li><a class="spotify" href="{text:SpotifyLink}" target="_blank"></a></li>{/block:IfSpotifyLink}
  1119. </ul>
  1120. {/block:IfSocialLinksInHeader}
  1121. {block:IfDropdownMenu}
  1122. <nav>
  1123. <ul id="nav">
  1124. {block:IfArchiveLink}
  1125. <li class="left"><a href="/archive">Archive</a></li>
  1126. {/block:IfArchiveLink}
  1127. {block:IfAskLink}
  1128. <li class="left"><a href="/ask">Ask Me</a></li>
  1129. {/block:IfAskLink}
  1130. {block:IfLink01}
  1131. <li class="left"><a href="{text:Link01URL}">{text:Link01}</a></li>
  1132. {/block:IfLink01}
  1133. {block:IfLink02}
  1134. <li class="left"><a href="{text:Link02URL}">{text:Link02}</a></li>
  1135. {/block:IfLink02}
  1136. {block:IfLink03}
  1137. <li class="left"><a href="{text:Link03URL}">{text:Link03}</a></li>
  1138. {/block:IfLink03}
  1139. </ul>
  1140. </nav>
  1141. {/block:IfDropdownMenu}
  1142. </header>
  1143. <div class="container">
  1144. {block:Posts}
  1145. {block:Text}
  1146. <div class="post text">
  1147. {block:Title}
  1148. <h3><a href="{Permalink}">{Title}</a></h3>
  1149. {/block:Title}{Body}
  1150.  
  1151. {/block:Text}
  1152. {block:Photo}
  1153. <div class="post photo">
  1154. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%"/>
  1155.  
  1156. {/block:Photo}
  1157. {block:Panorama}
  1158. <div class="post panorama">
  1159. {LinkOpenTag}
  1160. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1161. {LinkCloseTag}
  1162.  
  1163. {/block:Panorama}
  1164. {block:Photoset}
  1165. <div class="post photoset">
  1166. <ul id="photoset">
  1167. {block:Photos}
  1168. <li class="post-photoset-photo">
  1169.  
  1170. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%"/>
  1171.  
  1172. </li>
  1173. {/block:Photos}
  1174. </ul>
  1175. {/block:Photoset}
  1176. {block:Quote}
  1177. <div class="post quote">
  1178. <div class="post-quote">
  1179. <span class="quote-mark-left">“</span>{Quote}<span class="quote-mark-right">&#8222;</span>
  1180. </div>
  1181. {block:Source}
  1182. <div class="post-source">
  1183. — {Source}
  1184. </div>
  1185. {/block:Source}
  1186. {/block:Quote}
  1187. {block:Link}
  1188. <div class="post link">
  1189. <a href="{URL}" class="link" {Target}>
  1190.  
  1191. {block:Thumbnail}
  1192. <div class="link-thumb">
  1193. <img src="{Thumbnail-HighRes}" alt="{photoalt}">
  1194. </div>
  1195. {/block:Thumbnail}
  1196.  
  1197. {block:Host}
  1198. <div class="link-host">
  1199. {Host}
  1200. </div>
  1201. {/block:Host}
  1202.  
  1203. <div class="link-title">
  1204. {Name}
  1205. </div>
  1206.  
  1207. </a>
  1208.  
  1209. {block:Description}
  1210. <div class="caption">{Description}</div>
  1211. {/block:Description}
  1212.  
  1213. {/block:Link}
  1214. {block:Chat}
  1215. <div class="post chat">
  1216. {block:Title}
  1217. <h3><a href="{Permalink}">{Title}</a></h3>
  1218. {/block:Title}
  1219.  
  1220. <ul id="chat">
  1221. {block:Lines}
  1222. <li class="{Alt} user_{UserNumber}">
  1223. {block:Label}
  1224. <span class="label">{Label}</span>
  1225. {/block:Label}{Line}
  1226. </li>
  1227. {/block:Lines}
  1228. </ul>
  1229.  
  1230. {/block:Chat}
  1231. {block:Video}
  1232. <div class="post video">
  1233. <div class="videoWrapper">
  1234. {VideoEmbed-700}
  1235. </div>
  1236.  
  1237. {/block:Video}
  1238. {block:Audio}
  1239. <div class="post audio">
  1240. <div class="audioWrapper">
  1241. {AudioEmbed}
  1242. </div>
  1243.  
  1244. {/block:Audio}
  1245. {block:Answer}
  1246. <div class="post post-question">
  1247. <div class="question-container">
  1248. <div class="question-icon">
  1249. <img src="{AskerPortraitURL-128}" alt="{photoalt}">
  1250. </div>
  1251. <div class="question">
  1252. <div class="asker">{Asker}:</div>
  1253.  
  1254. <div class="asker-question">{Question}</div>
  1255.  
  1256. </div>
  1257. </div>
  1258. {block:Answerer}
  1259. <div class="answer-container">
  1260. <div class="answer-icon">
  1261. <img src="{AnswererPortraitURL-128}" alt="{photoalt}">
  1262. </div>
  1263. <div class="answer">
  1264. <div class="answerer">{Answerer}:</div>
  1265.  
  1266. <div class="answerer-answer">{Answer}</div>
  1267.  
  1268. </div>
  1269. </div>
  1270. {/block:Answerer}
  1271.  
  1272. <div class="replies">
  1273. {Replies}
  1274. </div>
  1275. {/block:Answer}
  1276. {block:IndexPage}
  1277. <div class="meta">
  1278. <div class="buttons">
  1279. <div class="notecount">
  1280. {NoteCount}
  1281. </div>
  1282. <ul id="buttons">
  1283. <li class="reblogbutton" {block:IfDarkTheme}id="none"{/block:IfDarkTheme}">
  1284. {ReblogButton color="white" size="17"}
  1285. </li>
  1286.  
  1287. {block:IfDarkTheme}
  1288. <li class="reblogbutton">
  1289. {ReblogButton color="black" size="17"}
  1290. </li>
  1291. {/block:IfDarkTheme}
  1292.  
  1293. <li class="likebutton" {block:IfDarkTheme}id="none"{/block:IfDarkTheme}">
  1294. {LikeButton color="white" size="17"}
  1295. </li>
  1296.  
  1297. {block:IfDarkTheme}
  1298. <li class="likebutton">
  1299. {LikeButton color="black" size="17"}
  1300. </li>
  1301. {/block:IfDarkTheme}
  1302.  
  1303. <li class="perma">
  1304. <a class="permalink" href="{Permalink}">+</a>
  1305. </li>
  1306. </ul>
  1307. </div>
  1308. </div>
  1309. {/block:IndexPage}
  1310.  
  1311. {block:PermalinkPage}
  1312. {block:Caption}
  1313. <div class="caption">
  1314. {Caption}
  1315. </div>
  1316. {/block:Caption}
  1317. {/block:PermalinkPage}
  1318.  
  1319. </div>
  1320. {/block:Posts}
  1321. </div>
  1322.  
  1323. <div class="credit">
  1324. THEME BY <a href="http://no2everything.tumblr.com">JAZZ</a>
  1325. </div>
  1326.  
  1327. {block:PermalinkPagination}
  1328. <div class="perma-pagination">
  1329. <div class="perma-pagination-container">
  1330. {block:NextPost}
  1331. <a href="{NextPost}" id="next">&larr; Newer</a>
  1332. {/block:NextPost}
  1333.  
  1334. {block:PreviousPost}
  1335. <a href="{PreviousPost}" id="prev">Older &rarr;</a>
  1336. {/block:PreviousPost}
  1337. </div>
  1338. </div>
  1339. {/block:PermalinkPagination}
  1340.  
  1341. {block:PostNotes}
  1342. <div id="note-page">
  1343. <div class="note-container">
  1344. {PostNotes}
  1345. </div>
  1346. </div>
  1347. {/block:PostNotes}
  1348.  
  1349. {block:Pagination}
  1350. <div class="pagination">
  1351. <div class="pagination-inner">
  1352. {block:PreviousPage}
  1353. <a href="{PreviousPage}" id="prev">&larr; Previous</a>
  1354. {/block:PreviousPage}
  1355.  
  1356. {block:NextPage}
  1357. <a href="{NextPage}" id="next">Next &rarr;</a>
  1358. {/block:NextPage}
  1359. </div>
  1360. </div>
  1361. {/block:Pagination}
  1362.  
  1363. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1364.  
  1365. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1366.  
  1367. <script src="http://static.tumblr.com/libdhwh/m3Rn29ogo/isotope.js"></script>
  1368.  
  1369. <script src="http://static.tumblr.com/xpkglst/58dncebyh/jquery.isotope.sloppy.masonry.js"></script>
  1370.  
  1371. <script src="http://static.tumblr.com/xpkglst/58dncebyh/jquery.isotope.sloppy.masonry.js"></script>
  1372.  
  1373. {block:IfInfiniteScroll}
  1374. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
  1375. {/block:IfInfiniteScroll}
  1376.  
  1377. {block:IndexPage}
  1378.  
  1379. <script type="text/javascript">
  1380. $(document).ready(function(){
  1381.  
  1382. $container = $('.container');
  1383. $container.imagesLoaded(function () {
  1384. $container.isotope({
  1385. layoutMode: 'sloppyMasonry',
  1386. itemSelector: '.post',
  1387. });
  1388. });
  1389.  
  1390. $(window).resize(function(){
  1391. $container.isotope({
  1392. layoutMode: 'sloppyMasonry',
  1393. itemSelector: '.post',
  1394. });
  1395. });
  1396.  
  1397. $container.infinitescroll({
  1398. itemSelector : ".post",
  1399. navSelector : ".pagination",
  1400. nextSelector : ".pagination a#next",
  1401. loadingImg : "http://static.tumblr.com/ly7no2u/p7Vnnwk8r/jazz-loading.gif",
  1402. loadingText : "",
  1403. bufferPx: 500,
  1404. appendCallback: false,
  1405. donetext : "<p>FIN.</p>",
  1406. }, function(newElements) {
  1407. var $newElems = $(newElements);
  1408. $newElems.css('opacity','0');
  1409. $newElems.imagesLoaded(function(){
  1410. setTimeout(function(){
  1411. $('.isotope').isotope('appended', $newElems );
  1412. $newElems.css('opacity','1');
  1413. },300);
  1414. });
  1415. });
  1416. });
  1417.  
  1418. var iframes = document.getElementsByTagName('iframe');
  1419. for (var i = 0; i < iframes.length; ++i) {
  1420. var iframe = iframes[i];
  1421. var players = /soundcloud.com/;
  1422. if (iframe.src.search(players) !== -1) iframe.width = '100%';
  1423. }
  1424. </script>
  1425.  
  1426.  
  1427. {/block:IndexPage}
  1428.  
  1429. <script type="text/javascript">
  1430. $("#nav").addClass("js").before('<div id="menu">☰</div>');
  1431.  
  1432. $("#menu").click(function(){
  1433. $("#nav").fadeToggle();
  1434. });
  1435. </script>
  1436.  
  1437. </body>
  1438. </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!