API tools faq
paste
Advertisement
bct

raincoat theme

bct
Oct 26th, 2016
8,443
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.43 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------------
  2.  
  3. (◍•ᴗ•◍)♡ ✧*。
  4.  
  5. Raincoat Theme by Chloe | @dontbrag | @bychloethemes
  6.  
  7. > Do not delete/alter/obscure any credit.
  8. > Do not claim as your own.
  9. > Do not copy any code.
  10. > Do not redistribute.
  11. > Do not modify beyond recognition.
  12.  
  13. This theme is licensed under a Creative Commons
  14. Attribution-NonCommercial-NoDerivatives 4.0
  15. International License.
  16.  
  17. ====================================================
  18.  
  19. Dependencies:
  20.  
  21. > Outicons by Anton Saputro
  22. > JQuery
  23. > Infinite Scroll by Paul Irish
  24. > ImagesLoaded by Desandro
  25. > PXU Photosets by Pixel Union
  26. > Unnest Captions by @neothm and @magnusthemes
  27.  
  28. > Permalinks Inspired by @acuite
  29.  
  30. --------------------------------------------------->
  31. <html>
  32. <head>{block:Hidden}
  33. <meta name="image:Sidebar" content="http://placehold.it/60" />
  34. <meta name="color:Background" content="#fff"/>
  35. <meta name="color:Accent" content="#fe3b80" />
  36. <meta name="color:Dark Accent" content="#eef"/>
  37. <meta name="if:Blogroll" content="" />
  38. <!--profile tab-->
  39. <meta name="image:Profile" content="http://placehold.it/130" />
  40. <meta name="text:Tagline 1" content="" />
  41. <meta name="text:Tagline 2" content="" />
  42. <meta name="text:Tagline 3" content="" />
  43. <meta name="text:Tagline 4" content="" />
  44. <meta name="text:About" content="" />
  45. <meta name="text:Watching" content="" />
  46. <meta name="text:Reading" content="" />
  47. <meta name="text:Listening" content="" />
  48. <!--faq-->
  49. <meta name="text:Question 1" content="" />
  50. <meta name="text:Answer 1" content="" />
  51. <meta name="text:Question 2" content="" />
  52. <meta name="text:Answer 2" content="" />
  53. <meta name="text:Question 3" content="" />
  54. <meta name="text:Answer 3" content="" />
  55. <meta name="text:Question 4" content="" />
  56. <meta name="text:Answer 4" content="" />
  57. <meta name="text:Question 5" content="" />
  58. <meta name="text:Answer 5" content="" />
  59. <!--links-->
  60. <meta name="text:Link Section 1" content="Link Section 1" />
  61. <meta name="text:Link 1 1" content="" />
  62. <meta name="text:URL 1 1" content="" />
  63. <meta name="text:Link 1 2" content="" />
  64. <meta name="text:URL 1 2" content="" />
  65. <meta name="text:Link 1 3" content="" />
  66. <meta name="text:URL 1 3" content="" />
  67. <meta name="text:Link 1 4" content="" />
  68. <meta name="text:URL 1 4" content="" />
  69. <meta name="text:Link 1 5" content="" />
  70. <meta name="text:URL 1 5" content="" />
  71. <meta name="text:Link 1 6" content="" />
  72. <meta name="text:URL 1 6" content="" />
  73. <meta name="text:Link Section 2" content="Link Section 2" />
  74. <meta name="text:Link 2 1" content="" />
  75. <meta name="text:URL 2 1" content="" />
  76. <meta name="text:Link 2 2" content="" />
  77. <meta name="text:URL 2 2" content="" />
  78. <meta name="text:Link 2 3" content="" />
  79. <meta name="text:URL 2 3" content="" />
  80. <meta name="text:Link 2 4" content="" />
  81. <meta name="text:URL 2 4" content="" />
  82. <meta name="text:Link 2 5" content="" />
  83. <meta name="text:URL 2 5" content="" />
  84. <meta name="text:Link 2 6" content="" />
  85. <meta name="text:URL 2 6" content="" />
  86. <meta name="text:Link Section 3" content="Link Section 3" />
  87. <meta name="text:Link 3 1" content="" />
  88. <meta name="text:URL 3 1" content="" />
  89. <meta name="text:Link 3 2" content="" />
  90. <meta name="text:URL 3 2" content="" />
  91. <meta name="text:Link 3 3" content="" />
  92. <meta name="text:URL 3 3" content="" />
  93. <meta name="text:Link 3 4" content="" />
  94. <meta name="text:URL 3 4" content="" />
  95. <meta name="text:Link 3 5" content="" />
  96. <meta name="text:URL 3 5" content="" />
  97. <meta name="text:Link 3 6" content="" />
  98. <meta name="text:URL 3 6" content="" />{/block:Hidden}
  99. <meta charset="UTF-8" />
  100. <title>{block:TagPage}{Tag} posts | {/block:TagPage}{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  101. <link rel="shortcut icon" href="{Favicon}">{block:Description}
  102. <meta name="description" content="{MetaDescription}" />{/block:Description}
  103. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  104. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i|Anonymous+Pro' rel='stylesheet' type='text/css'>
  105. <link href='http://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>
  106. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  107. <style type="text/css">
  108. * {
  109. margin:0;
  110. padding:0;
  111. }
  112. #tumblr_controls, .tmblr-iframe {
  113. top:15px!important;
  114. right:15px!important;
  115. -webkit-filter: invert(90%);
  116. filter: invert(90%);
  117. position:fixed!important;
  118. -webkit-transform:scale(.9, .9);
  119. -moz-transform:scale(.9, .9);
  120. transform:scale(.9, .9);
  121. -webkit-transform-origin: right top;
  122. -moz-transform-origin: right top;
  123. -ms-transform-origin: right top;
  124. -o-transform-origin: right top;
  125. transform-origin: right top;
  126. z-index:999999999999999999!important
  127. }
  128. ::-webkit-scrollbar {
  129. background-color:#ddd;
  130. height: 11px;
  131. width: 11px;
  132. border:5px solid #fafafa;
  133. }
  134. ::-webkit-scrollbar-thumb {
  135. background-color:#000;
  136. border:5px solid #fafafa;
  137. }
  138. .box::-webkit-scrollbar {
  139. border:5px solid #fff;
  140. }
  141. .box::-webkit-scrollbar-thumb {
  142. border:5px solid #fff;
  143. }
  144. ::selection {
  145. background:rgba({RGBcolor:Accent},0.05);
  146. color:{color:Dark Accent};
  147. }
  148. ::-moz-selection {
  149. background:rgba({RGBcolor:Accent},0.05);
  150. color:{color:Dark Accent};
  151. }
  152. body{
  153. background:#fafafa;
  154. color:#000;
  155. font-size:10px;
  156. font-family:'Open Sans', sans-serif;
  157. font-weight:400;
  158. overflow:hidden;
  159. }
  160. a {
  161. text-decoration:none;
  162. color:{color:Dark Accent};
  163. -webkit-transition: all 0.2s ease-in-out;
  164. -moz-transition: all 0.2s ease-in-out;
  165. -o-transition: all 0.2s ease-in-out;
  166. transition: all 0.2s ease-in-out;
  167. }
  168. a:hover {
  169. color:#666;
  170. -webkit-transition: all 0.2s ease-in-out;
  171. -moz-transition: all 0.2s ease-in-out;
  172. -o-transition: all 0.2s ease-in-out;
  173. transition: all 0.2s ease-in-out;
  174. }
  175. b, strong {
  176. font-weight:600;
  177. }
  178. img:not(.lightbox-image), embed, video, .tumblr_video_container, iframe:not(.instagram-media):not(#ask_frame):not(.tumblr_audio_player):not(.like_toggle) {
  179. max-width:100%!important;
  180. height:auto;
  181. }
  182. .instagram-media {
  183. max-width:100%!important;
  184. }
  185. img:not(.lightbox-image) {
  186. vertical-align:middle;
  187. }
  188. .tumblr_video_container {
  189. height:auto!important;
  190. }
  191. .vine-embed {
  192. height:336px!important;
  193. }
  194. #infscr-loading {
  195. position:absolute;
  196. bottom:-65px;
  197. width:200px;
  198. margin-left:50%;
  199. left:-100px;
  200. text-align:center;
  201. }
  202. #sidebar {
  203. text-align:right;
  204. margin:0 0 0 50%;
  205. margin-top:30px;
  206. z-index:999;
  207. width:120px;
  208. position:fixed;
  209. top:20px;
  210. padding-right:15px;
  211. padding-top:15px;
  212. padding-bottom:15px;
  213. left:calc(-230px - 135px);
  214. }
  215. img#avatar {
  216. width:60px;
  217. border-radius:50%;
  218. margin-bottom:10px;
  219. border:2px solid {color:Accent};
  220. }
  221. #sidebar h1 {
  222. margin:0 0 5px;
  223. font-family:'Anonymous Pro', monospace;
  224. font-weight:normal;
  225. font-size:1.44em;
  226. }
  227. #sidebar p {
  228. font-size:9px;
  229. }
  230. #navbar {
  231. text-align:left;
  232. margin:0 0 0 50%;
  233. margin-bottom:30px;
  234. z-index:999;
  235. width:140px;
  236. position:fixed;
  237. bottom:20px;
  238. padding-left:15px;
  239. padding-top:15px;
  240. padding-bottom:15px;
  241. left:230px;
  242. }
  243. ul#navlinks {
  244. list-style-type:none;
  245. font-size:1.44em;
  246. margin: 0;
  247. padding:10px 0 0 0;
  248. z-index:99;
  249. text-align:left;
  250. counter-reset: LIST-COUNTER;
  251. }
  252. ul#navlinks li:before{
  253. content: '\e0b9';
  254. font-family: untitled-font-1;
  255. speak: none;
  256. font-style: normal;
  257. font-weight: 400;
  258. text-transform: none;
  259. line-height: 1;
  260. -webkit-font-smoothing: antialiased;
  261. font-variant: normal normal;
  262. vertical-align:middle;
  263. margin-right: 5px;
  264. position:relative;
  265. opacity:0;
  266. -webkit-transition: all 0.2s ease-in-out;
  267. -moz-transition: all 0.2s ease-in-out;
  268. -o-transition: all 0.2s ease-in-out;
  269. transition: all 0.2s ease-in-out;
  270. }
  271. ul#navlinks li.active:before {
  272. opacity:1;
  273. color:{color:Dark Accent};
  274. -webkit-transition: all 0.2s ease-in-out;
  275. -moz-transition: all 0.2s ease-in-out;
  276. -o-transition: all 0.2s ease-in-out;
  277. transition: all 0.2s ease-in-out;
  278. }
  279. ul#navlinks li {
  280. line-height:20px;
  281. display:block;
  282. text-transform:lowercase;
  283. font-family:'Anonymous Pro';
  284. text-align:left;
  285. margin:1px 0px;
  286. position:relative;
  287. color:{color:Accent};
  288. cursor:pointer;
  289. opacity:0.5;
  290. -webkit-transition: all 0.2s ease-in-out;
  291. -moz-transition: all 0.2s ease-in-out;
  292. -o-transition: all 0.2s ease-in-out;
  293. transition: all 0.2s ease-in-out;
  294. }
  295. ul#navlinks li:hover {
  296. opacity:1;
  297. -webkit-transition: all 0.2s ease-in-out;
  298. -moz-transition: all 0.2s ease-in-out;
  299. -o-transition: all 0.2s ease-in-out;
  300. transition: all 0.2s ease-in-out;
  301. }
  302. ul#navlinks li.active {
  303. opacity:1;
  304. color:{color:Dark Accent};
  305. -webkit-transition: all 0.2s ease-in-out;
  306. -moz-transition: all 0.2s ease-in-out;
  307. -o-transition: all 0.2s ease-in-out;
  308. transition: all 0.2s ease-in-out;
  309. }
  310. .tab {
  311. padding-top:40px;
  312. padding-bottom:40px;
  313. height:calc(100% - 80px);
  314. width:100%;
  315. overflow-x:hidden;
  316. overflow-y:auto;
  317. display:block;
  318. position:absolute;
  319. top:-100%;
  320. }
  321. .enter {
  322. top:0;
  323. -webkit-transition: all 0.7s ease-in-out;
  324. -moz-transition: all 0.7s ease-in-out;
  325. -o-transition: all 0.7s ease-in-out;
  326. transition: all 0.7s ease-in-out;
  327. }
  328. .exit {
  329. top:100%;
  330. -webkit-transition: all 0.7s ease-in-out;
  331. -moz-transition: all 0.7s ease-in-out;
  332. -o-transition: all 0.7s ease-in-out;
  333. transition: all 0.7s ease-in-out;
  334. }
  335. .content {
  336. position:relative;
  337. margin:0 auto;
  338. width:400px;
  339. padding-left:11px;
  340. }
  341. article {
  342. margin-top:20px;
  343. margin-bottom:100px;
  344. position:relative;
  345. box-sizing:border-box;
  346. width:400px;
  347. padding:2px;
  348. background:{color:Accent};
  349. }
  350. article .tb {
  351. padding:0 20px 15px;
  352. background:#fff;
  353. }
  354. article .video {
  355. padding:20px 15px;
  356. background:#fff;
  357. }
  358. article .tb:first-of-type, .photo + .caption.tb,
  359. .photoset + .caption.tb {
  360. padding-top:20px;
  361. }
  362. article ul, article ol {
  363. padding-left:25px;
  364. line-height:175%;
  365. margin:10px 0;
  366. display:block!important;
  367. }
  368. article ul {
  369. list-style:circle;
  370. }
  371. article hr {
  372. border:none;
  373. width:75%;
  374. margin:15px auto;
  375. height:1px;
  376. background:rgba({RGBcolor:Accent},0.5);
  377. }
  378. blockquote.tumblr_parent {
  379. padding-left:5px;
  380. padding-right:5px;
  381. margin: 15px 0px;
  382. padding-bottom: 15px;
  383. line-height: 140%;
  384. position: relative;
  385. border-bottom:1px solid #eaeaea;
  386. line-height:160%;
  387. }
  388. blockquote.tumblr_parent:before, .chat .label:before {
  389. content: '\e0ca';
  390. font-family: "untitled-font-1" !important;
  391. font-style: normal;
  392. font-weight: normal;
  393. speak: none;
  394. display: inline-block;
  395. text-decoration: inherit;
  396. width: 1em;
  397. text-align: center;
  398. font-variant: normal;
  399. text-transform: none;
  400. line-height: 1em;
  401. font-size: 1em;
  402. vertical-align:middle;
  403. -webkit-font-smoothing: antialiased;
  404. -moz-osx-font-smoothing: grayscale;
  405. margin-right: 5px;
  406. color:{color:Dark Accent};
  407. }
  408. blockquote.tumblr_parent:first-of-type {
  409. margin-top:0;
  410. padding-top:5px;
  411. }
  412. blockquote.tumblr_parent p:first-of-type {
  413. display:inline;
  414. }
  415. blockquote.tumblr_parent:last-of-type {
  416. border-bottom:none;
  417. padding-bottom:5px;
  418. margin-bottom:0px;
  419. }
  420. blockquote.tumblr_parent:last-of-type:after {
  421. content:initial;
  422. }
  423. blockquote.tumblr_parent img {
  424. box-sizing: border-box;
  425. border: 2px solid {color:Accent};
  426. margin: 20px 0;
  427. }
  428. blockquote.tumblr_parent p {
  429. margin:10px 0;
  430. }
  431. blockquote.tumblr_parent p:last-of-type {
  432. margin-bottom:0;
  433. }
  434. blockquote.tumblr_parent p a {
  435. color:{color:Dark Accent};
  436. }
  437. blockquote.tumblr_parent h2 {
  438. margin-top:15px;
  439. }
  440. article h2 {
  441. margin-bottom:15px;
  442. padding-left:5px;
  443. padding-right:5px;
  444. position:relative;
  445. }
  446. h2.title {
  447. margin-bottom:25px;
  448. font-family:'Anonymous Pro', monospace;
  449. font-weight:normal;
  450. }
  451. h2.title:after {
  452. content:'';
  453. height:2px;
  454. width:30px;
  455. position:absolute;
  456. left:5px;
  457. bottom:-17px;
  458. background:{color:Accent};
  459. }
  460. a.tumblr_blog {
  461. font-weight:bold;
  462. margin-right:5px;
  463. color:#000;
  464. }
  465. a.tumblr_blog:after {
  466. content:": ";
  467. }
  468. blockquote.tumblr_parent > blockquote {
  469. border-left:2px solid #eee;
  470. padding-left:10px;
  471. margin:10px 0;
  472. margin-left:5px;
  473. display:block!important;
  474. }
  475. .quote.tb, .link.tb, .chat.tb {
  476. padding-left: 25px;
  477. padding-right: 25px;
  478. }
  479. .quote h3 {
  480. font-family:'Anonymous Pro', monospace;
  481. font-weight:normal;
  482. line-height:130%;
  483. font-size:1.4em;
  484. }
  485. .quote cite {
  486. text-align:right;
  487. display:block;
  488. margin:10px 0 0;
  489. font-size:0.9em;
  490. }
  491. .link h2 {
  492. font-family:'Anonymous Pro', monospace;
  493. padding:0;
  494. }
  495. .link blockquote.tumblr_parent {
  496. padding-left:0;
  497. padding-right:0;
  498. }
  499. ul.chat-list {
  500. list-style-type:none;
  501. padding:0;
  502. }
  503. ul.chat-list li {
  504. line-height:17px;
  505. }
  506. ul.chat-list .label {
  507. font-weight:bold;
  508. }
  509. .album-art {
  510. width: 100%;
  511. height: 100px;
  512. background: #eee repeat center center;
  513. background-size: contain;
  514. opacity: 0.05;
  515. }
  516. .audio-info {
  517. line-height:1.6em;
  518. text-align: center;
  519. position: absolute;
  520. top: 52px;
  521. left: 0;
  522. width: 100%;
  523. }
  524. .tumblr_audio_player {
  525. position: absolute;
  526. top: 45px;
  527. left: 45px;
  528. width: 50px;
  529. height: 50px;
  530. border-radius: 50%;
  531. border: 2px solid {color:Accent};
  532. box-sizing: border-box;
  533. }
  534. .question {
  535. font-weight:bold;
  536. }
  537. .response {
  538. position: relative;
  539. margin-top: 31px!important;
  540. padding:0 5px;
  541. }
  542. .response.answererer {
  543. padding:0;
  544. }
  545. .query {
  546. position:relative;
  547. padding:5px 5px 0;
  548. min-height:30px;
  549. }
  550. .query:after {
  551. content: '';
  552. width:100%;
  553. border-bottom:1px solid #eaeaea;
  554. left: 0px;
  555. bottom: -15px;
  556. position: absolute;
  557. }
  558. img.querier {
  559. float:left;
  560. width:25px;
  561. margin:0px 8px 3px 0 ;
  562. border-radius:5px;
  563. background:#eee;
  564. }
  565. .also_query {
  566. margin-top:31px;
  567. padding:0 5px;
  568. min-height:30px;
  569. }
  570. .also_query p:first-of-type {
  571. display:inline;
  572. margin:0;
  573. }
  574. .query a:first-of-type, .also_query a:first-of-type {
  575. color:#000;
  576. }
  577. .response:empty {
  578. display:none;
  579. overflow:hidden;
  580. }
  581. .answererer:before {
  582. content: '';
  583. width:100%;
  584. border-bottom:1px solid #eaeaea;
  585. left: 0px;
  586. top: -15px;
  587. position: absolute;
  588. }{block:IndexPage}
  589. .permalinks.tb {
  590. padding-top:0;
  591. }
  592. .permalinks a {
  593. color:#a9a9a9;
  594. }
  595. .permalinks ul {
  596. margin:0;
  597. text-align:right;
  598. list-style:none;
  599. padding:15px 5px 5px;
  600. border-top:1px solid #eaeaea;
  601. color:{color:Dark Accent};
  602. font-family:'Anonymous Pro', monospace;
  603. }
  604. .photo + .permalinks.tb ul,
  605. .photoset + .permalinks.tb ul {
  606. padding-top: 20px;
  607. border-top: none;
  608. }
  609. .permalinks li {
  610. display:inline-block;
  611. height:18px;
  612. line-height:18px;
  613. margin-left:7px;
  614. position:relative;
  615. }
  616. .permalinks li i:before {
  617. vertical-align:middle;
  618. line-height:18px;
  619. }
  620. .permalinks li:first-of-type {
  621. float:left;
  622. margin:0;
  623. }
  624. .permalinks i {
  625. background: #eee;
  626. width: 18px;
  627. height:18px;
  628. line-height:18px;
  629. text-align: center;
  630. border-radius: 50%;
  631. display: inline-block;
  632. color:{color:Dark Accent}
  633. }
  634. .like_button {
  635. position: absolute;
  636. top: 0;
  637. left: 0;
  638. right: 0;
  639. bottom: 0;
  640. width: 100%;
  641. height: 100%;
  642. opacity: 0;
  643. z-index: 10;
  644. }
  645. .like_button iframe {
  646. width: 100% !important;
  647. height: 100% !important;
  648. }
  649. .our_toggle {
  650. top: 0;
  651. left: 0;
  652. right: 0;
  653. bottom: 0;
  654. width: 18px;
  655. height: 18px;
  656. z-index: 1;
  657. -webkit-transition: all 0.2s ease-in-out;
  658. -moz-transition: all 0.2s ease-in-out;
  659. -o-transition: all 0.2s ease-in-out;
  660. transition: all 0.2s ease-in-out;
  661. }
  662. .like_button:hover + .our_toggle {
  663. color:#c09992;
  664. -webkit-transition: all 0.2s ease-in-out;
  665. -moz-transition: all 0.2s ease-in-out;
  666. -o-transition: all 0.2s ease-in-out;
  667. transition: all 0.2s ease-in-out;
  668. }
  669. .like_button.liked + .our_toggle .oi-heart:before {
  670. content: "\e098";
  671. }{/block:IndexPage}{block:PermalinkPage}
  672. .extra-info {
  673. line-height: 22px;
  674. border-top: 1px solid #eaeaea;
  675. padding:15px 5px;
  676. font-family: 'Anonymous Pro';
  677. }
  678. .extra-info i {
  679. vertical-align: middle;
  680. margin-right: 5px;
  681. font-size:11px;
  682. color:{color:Dark Accent};
  683. }
  684. #notes {
  685. border-top: 1px solid #eaeaea;
  686. padding:15px 5px;
  687. font-family:'Anonymous Pro';
  688. }
  689. ol.notes {
  690. padding:0;
  691. margin: 0;
  692. list-style-type: none;
  693. }
  694. ol.notes li.note {
  695. padding: 3px 0;
  696. }
  697. ol.notes li.note img.avatar {
  698. float:right;
  699. border-radius:50%;
  700. margin-top:1px;
  701. margin-left:10px;
  702. }
  703. ol.notes li.note blockquote {
  704. border-left:2px solid #eee;
  705. padding-left:10px;
  706. margin:10px 0;
  707. margin-left:15px;
  708. }
  709. ol.notes li.note blockquote a {
  710. text-decoration: none;
  711. }
  712. li.more_notes_link_container {
  713. text-transform: uppercase;
  714. font-size: 0.85em;
  715. }
  716. li.like:before {
  717. content: '\e099';
  718. font-family: untitled-font-1;
  719. speak: none;
  720. font-style: normal;
  721. font-weight: 400;
  722. text-transform: none;
  723. line-height: 1;
  724. -webkit-font-smoothing: antialiased;
  725. font-variant: normal normal;
  726. margin-right:10px;
  727. vertical-align:middle;
  728. color: #f3719f;
  729. }
  730. li.reblog:before {
  731. content: '\e083';
  732. font-family: untitled-font-1;
  733. speak: none;
  734. font-style: normal;
  735. font-weight: 400;
  736. text-transform: none;
  737. line-height: 1;
  738. -webkit-font-smoothing: antialiased;
  739. font-variant: normal normal;
  740. vertical-align:middle;
  741. margin-right: 10px;
  742. }
  743. li.original_post:before {
  744. content:'\e078';
  745. }
  746. {/block:PermalinkPage}
  747. a:focus {
  748. outline:none;
  749. }
  750. .box {
  751. margin-top:20px;
  752. box-sizing:border-box;
  753. background:#fff;
  754. border:2px solid {color:Accent};
  755. padding:20px;
  756. max-height: calc(100vh - 110px);
  757. overflow-x:hidden;
  758. overflow-y: auto;
  759. }
  760. .tab h1 {
  761. font-weight:normal;
  762. font-family:'Anonymous Pro', monospace;
  763. color:{color:Dark Accent};
  764. margin:15px 0;
  765. font-size:1.44em;
  766. }
  767. .tab h1:first-of-type {
  768. margin-top:0;
  769. }
  770. img#profilepic {
  771. border-radius:50%;
  772. float:right;
  773. margin:15px 15px 20px 10px;
  774. width:130px;
  775. height:130px;
  776. -webkit-filter: grayscale(100%);
  777. }
  778. ul#profile-info {
  779. list-style-type:none;
  780. padding:0;
  781. margin:0px 0 10px;
  782. }
  783. ul#profile-info li {
  784. margin:0px 20px 10px 40px;
  785. position:relative;
  786. }
  787. ul#profile-info li:before {
  788. content: '\e028';
  789. font-family: untitled-font-1;
  790. speak: none;
  791. font-style: normal;
  792. font-weight: 400;
  793. text-transform: none;
  794. line-height: 1;
  795. -webkit-font-smoothing: antialiased;
  796. font-variant: normal normal;
  797. vertical-align:middle;
  798. margin-right: 10px;
  799. margin-left:-20px;
  800. }
  801. .about {
  802. border-left:2px solid #eee;
  803. padding-left:13px;
  804. margin:10px 22px;
  805. }
  806. #profile p {
  807. position:relative;
  808. line-height:160%;
  809. margin-bottom:10px;
  810. }
  811. #profile p:last-of-type {
  812. margin-bottom:0;
  813. }
  814. ul#currently {
  815. list-style:none;
  816. }
  817. ul#currently li {
  818. margin:0px 20px 10px 40px;
  819. position:relative;
  820. display:block;
  821. }
  822. ul#currently li:before {
  823. font-family: untitled-font-1;
  824. speak: none;
  825. font-style: normal;
  826. font-weight: 400;
  827. text-transform: none;
  828. line-height: 1;
  829. -webkit-font-smoothing: antialiased;
  830. font-variant: normal normal;
  831. vertical-align:middle;
  832. margin-right: 10px;
  833. margin-left:-20px;
  834. }
  835. ul#currently li.watching:before {
  836. content:'\e08f';
  837. }
  838. ul#currently li.reading:before {
  839. content:'\e039';
  840. }
  841. ul#currently li.listening:before {
  842. content:'\e097';
  843. }
  844. #msg h4 {
  845. line-height:20px;
  846. text-align:left;
  847. position:relative;
  848. font-size:1.2em;
  849. margin:2px;
  850. display:inline-block;
  851. padding-left:20px;
  852. font-family:'Anonymous Pro',monospace;
  853. font-weight:normal;
  854. color:{color:Dark Accent};
  855. }
  856. #msg h4:before {
  857. content:'\e046';
  858. font-family: untitled-font-1;
  859. speak: none;
  860. font-style: normal;
  861. font-weight: 400;
  862. text-transform: none;
  863. line-height: 1;
  864. -webkit-font-smoothing: antialiased;
  865. font-variant: normal normal;
  866. vertical-align:middle;
  867. margin-right: 10px;
  868. margin-left:-20px;
  869. }
  870. #msg p {
  871. position:relative;
  872. display:block;
  873. border-left:2px solid #eee;
  874. padding-left:13px;
  875. margin:10px;
  876. line-height:160%;
  877. }
  878. #msg iframe {
  879. margin-top: 10px;
  880. transform: scale(0.712,0.712);
  881. transform-origin: top left;
  882. }
  883. #nav h4 {
  884. line-height:20px;
  885. text-align:left;
  886. position:relative;
  887. font-size:1.2em;
  888. margin:2px;
  889. padding-left:20px;
  890. font-family:'Anonymous Pro',monospace;
  891. font-weight:normal;
  892. color:{color:Dark Accent};
  893. }
  894. #nav h4:before {
  895. content:'\e06e';
  896. font-family: untitled-font-1;
  897. speak: none;
  898. font-style: normal;
  899. font-weight: 400;
  900. text-transform: none;
  901. line-height: 1;
  902. -webkit-font-smoothing: antialiased;
  903. font-variant: normal normal;
  904. vertical-align:middle;
  905. margin-right: 10px;
  906. margin-left:-20px;
  907. }
  908. ul.link-sections {
  909. list-style-type:none;
  910. padding:0;
  911. margin:10px 10px 30px 10px;
  912. font-size:0;
  913. }
  914. ul.link-sections li {
  915. display: inline-block;
  916. line-height: 20px;
  917. margin: 1px 5px;
  918. position: relative;
  919. text-align: right;
  920. font-size: 11px;
  921. width: calc(100% / 3 - 10px);
  922. border-bottom: 1px solid #eaeaea;
  923. box-sizing: border-box;
  924. padding: 2px 12px;
  925. }
  926. ul.link-sections li a {
  927. color:#000;
  928. }
  929. ul.link-sections {
  930. counter-reset: LIST-COUNTER;
  931. }
  932. ul.link-sections li:before{
  933. content: "0" counter( LIST-COUNTER ) ".";
  934. counter-increment: LIST-COUNTER;
  935. position:relative;
  936. left:-3px;
  937. float:left;
  938. font-family:'Anonymous Pro', monospace;
  939. }
  940. ul#blogroll-content {
  941. margin:0;
  942. list-style-type:none;
  943. padding:0;
  944. text-align:center;
  945. }
  946. ul#blogroll-content li {
  947. display: inline-block;
  948. width: 110px;
  949. vertical-align: top;
  950. margin: 5px 0px 20px;
  951. text-align: center;
  952. }
  953. .follows img {
  954. position: relative;
  955. border-radius: 3px;
  956. display: inline-block;
  957. width: 25px;
  958. margin-right: 5px;
  959. vertical-align: top;
  960. }
  961. .follows .follow-info {
  962. line-height: 1.2;
  963. display: inline-block;
  964. width: 75px;
  965. text-align: left;
  966. }
  967. .follows .follow-url {
  968. display: block;
  969. font-size: 11px;
  970. white-space: nowrap;
  971. overflow: hidden;
  972. text-overflow: ellipsis;
  973. padding: 1px;
  974. font-family: 'Anonymous Pro', monospace;
  975. }
  976. .follows .follow-title {
  977. font-size: 8px;
  978. white-space: nowrap;
  979. overflow: hidden;
  980. text-overflow: ellipsis;
  981. display: block;
  982. }
  983. .follows .follow-title:before {
  984. content:'"';
  985. }
  986. .follows .follow-title:after {
  987. content:'"';
  988. }
  989. </style>
  990. </head>
  991. <body>
  992. <div id="sidebar">{block:IfSidebarImage}
  993. <img src="{image:Sidebar}" id="avatar">{/block:IfSidebarImage}
  994. <a href="/"><h1>{Title}</h1></a>
  995. {block:Description}<p>{Description}</p>{/block:Description}
  996. </div>
  997. <div id="navbar">
  998. <ul id="navlinks">
  999. <li class="swtich active" data-tab="wrapper">home</li>
  1000. <li class="swtich" data-tab="profile">profile</li>
  1001. <li class="swtich" data-tab="msg">message</li>
  1002. <li class="swtich" data-tab="nav">navigate</li>{block:IfBlogroll}
  1003. <li class="swtich" data-tab="br">blogroll</li>{/block:IfBlogroll}
  1004. </ul>
  1005. </div>
  1006. <div id="wrapper" class="tab enter">
  1007. <div id="posts" class="content">
  1008. {block:Posts}<article id="{PostID}">
  1009. {block:Text}<div class="text tb">
  1010. {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  1011. <div class="caption">{Body}</div>
  1012. </div>{/block:Text}{block:Photo}
  1013. <div class="photo">
  1014. <div class="photo-wrap"><img src="{PhotoURL-400}" class="photos"></div>
  1015. </div>{/block:Photo}{block:Photoset}
  1016. <div class="photoset">
  1017. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1018. {block:Photos}<div class="photo-data">
  1019. <div class="pxu-photo">
  1020. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1021. </div>
  1022. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1023. </div>{/block:Photos}
  1024. </div>
  1025. </div>{/block:Photoset}{block:Quote}<div class="quote tb">
  1026. <h3>{Quote}</h3>
  1027. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  1028. </div>{/block:Quote}{block:Link}<div class="link tb">
  1029. <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="oi-chevron-right"></i></a></h2>
  1030. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1031. </div>{/block:Link}{block:Chat}<div class="chat tb">
  1032. {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  1033. <ul class="chat-list">
  1034. {block:Lines}
  1035. <li class="{Alt}">
  1036. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1037. {Line}</li>
  1038. {/block:Lines}
  1039. </ul>
  1040. </div>{/block:Chat}{block:Audio}<div class="audio tb">
  1041. <div class="album-art"{block:AlbumArt} style="background-image:url({AlbumArtURL})"{/block:AlbumArt}></div>
  1042. <div class="audio-info">
  1043. <b><span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}</b> by <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}
  1044. <br>From <i><span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}</i>
  1045. </div>
  1046. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  1047. </div>
  1048. {/block:Audio}{block:Video}<div class="video">
  1049. {Video-400}
  1050. </div>{/block:Video}{block:Answer}<div class="answer tb">
  1051. <div class="query">
  1052. <img src="{AskerPortraitURL-40}" class="querier">
  1053. <b>{Asker} asked: </b>&nbsp;{Question}
  1054. </div>{block:Answerer}
  1055. <div class="also_query">
  1056. <img src="{AnswererPortraitURL-40}" class="querier">
  1057. <b>{Answerer} replied: </b>&nbsp;{Answer}
  1058. </div>{/block:Answerer}
  1059. <div class="response{block:Answerer} answererer caption{/block:Answerer}">{Replies}</div>
  1060. </div>{/block:Answer}
  1061. {block:Caption}<div class="caption tb">
  1062. {Caption}
  1063. </div>{/block:Caption}
  1064. {block:IndexPage}<div class="permalinks tb">
  1065. <ul>
  1066. <li><a href="{Permalink}" target="_blank"><i class="oi-pin"></i> {NoteCount}</a>
  1067. <li class="custom-like-button" title="like">
  1068. {LikeButton}
  1069. <span class="our_toggle">
  1070. <i class="oi-heart"></i>
  1071. </span>
  1072. <li><a href="{ReblogURL}"><i class="oi-refresh"></i></a>
  1073. </ul>
  1074. </div>{/block:IndexPage}
  1075. {block:PermalinkPage}<div class="tb">
  1076. {block:Date}<div class="extra-info">
  1077. <i class="oi-time"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}
  1078. {block:NoteCount}<br><i class="oi-chart"></i> {NoteCount}{/block:NoteCount}
  1079. {block:RebloggedFrom}<br><i class="oi-refresh"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  1080. {block:ContentSource}<br><i class="oi-globe"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  1081. {block:HasTags}<br><i class="oi-tags"></i> {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  1082. </div>{/block:Date}
  1083. {block:PostNotes}<div id="notes" class="tb">
  1084. {PostNotes-16}
  1085. </div>{/block:PostNotes}
  1086. </div>
  1087. {/block:PermalinkPage}
  1088. </article>
  1089. {/block:Posts}
  1090. </div><!--end posts-->
  1091. </div><!--end wrapper-->
  1092. <div id="profile" class="tab">
  1093. <div class="content box">
  1094. <h1 style="display:inline-block;">Profile</h1>{block:IfProfileImage}
  1095. <img src="{image:Profile}" id="profilepic">{/block:IfProfileImage}{block:IfTagline1}
  1096. <ul id="profile-info">
  1097. <li>{text:Tagline 1}</li>{block:IfTagline2}
  1098. <li>{text:Tagline 2}</li>{/block:IfTagline2}{block:IfTagline3}
  1099. <li>{text:Tagline 3}</li>{/block:IfTagline3}{block:IfTagline4}
  1100. <li>{text:Tagline 4}</li>{/block:IfTagline4}
  1101. </ul>{/block:IfTagline1}{block:IfAbout}
  1102. <h1>About</h1>
  1103. <div class="about">
  1104. {text:About}
  1105. </div>{/block:IfAbout}
  1106. <h1>Currently</h1>
  1107. <ul id="currently">{block:IfWatching}
  1108. <li class="watching">{text:Watching}{/block:IfWatching}{block:IfReading}
  1109. <li class="reading">{text:Reading}{/block:IfReading}{block:IfListening}
  1110. <li class="listening">{text:Listening}{/block:IfListening}
  1111. </ul>
  1112. </div>
  1113. </div>
  1114. <div id="msg" class="tab">
  1115. <div class="content box">
  1116. <h1>Message</h1>{block:IfQuestion1}
  1117. <h4>{text:Question 1}</h4>
  1118. <p>{text:Answer 1}</p>{/block:IfQuestion1}{block:IfQuestion2}
  1119. <h4>{text:Question 2}</h4>
  1120. <p>{text:Answer 2}</p>{/block:IfQuestion2}{block:IfQuestion3}
  1121. <h4>{text:Question 3}</h4>
  1122. <p>{text:Answer 3}</p>{/block:IfQuestion3}{block:IfQuestion4}
  1123. <h4>{text:Question 4}</h4>
  1124. <p>{text:Answer 4}</p>{/block:IfQuestion4}{block:IfQuestion5}
  1125. <h4>{text:Question 5}</h4>
  1126. <p>{text:Answer 5}</p>{/block:IfQuestion5}
  1127. <iframe frameborder="0" border="0" scrolling="no" width="500" height="190" allowtransparency="true" id="ask_frame" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  1128. </div>
  1129. </div>
  1130. <div id="nav" class="tab">
  1131. <div class="content box">
  1132. <h1>Navigate</h1>{block:IfLinkSection1}
  1133. <h4>{text:Link Section 1}</h4>
  1134. {block:IfURL11}<ul class="link-sections">
  1135. <li><a href="{text:URL 1 1}">{text:Link 1 1}</a>{block:IfURL12}
  1136. <li><a href="{text:URL 1 2}">{text:Link 1 2}</a>{/block:IfURL12}{block:IfURL13}
  1137. <li><a href="{text:URL 1 3}">{text:Link 1 3}</a>{/block:IfURL13}{block:IfURL14}
  1138. <li><a href="{text:URL 1 4}">{text:Link 1 4}</a>{/block:IfURL14}{block:IfURL15}
  1139. <li><a href="{text:URL 1 5}">{text:Link 1 5}</a>{/block:IfURL15}{block:IfURL16}
  1140. <li><a href="{text:URL 1 6}">{text:Link 1 6}</a>{/block:IfURL16}
  1141. </ul>{/block:IfURL11}{block:IfLinkSection1}{block:IfLinkSection2}
  1142. <h4>{text:Link Section 2}</h4>
  1143. {block:IfURL21}<ul class="link-sections">
  1144. <li><a href="{text:URL 2 1}">{text:Link 2 1}</a>{block:IfURL22}
  1145. <li><a href="{text:URL 2 2}">{text:Link 2 2}</a>{/block:IfURL22}{block:IfURL23}
  1146. <li><a href="{text:URL 2 3}">{text:Link 2 3}</a>{/block:IfURL23}{block:IfURL24}
  1147. <li><a href="{text:URL 2 4}">{text:Link 2 4}</a>{/block:IfURL24}{block:IfURL25}
  1148. <li><a href="{text:URL 2 5}">{text:Link 2 5}</a>{/block:IfURL25}{block:IfURL26}
  1149. <li><a href="{text:URL 2 6}">{text:Link 2 6}</a>{/block:IfURL26}
  1150. </ul>{/block:IfURL21}{block:IfLinkSection2}{block:IfLinkSection3}
  1151. <h4>{text:Link Section 3}</h4>
  1152. {block:IfURL31}<ul class="link-sections">
  1153. <li><a href="{text:URL 3 1}">{text:Link 3 1}</a>{block:IfURL32}
  1154. <li><a href="{text:URL 3 2}">{text:Link 3 2}</a>{/block:IfURL32}{block:IfURL33}
  1155. <li><a href="{text:URL 3 3}">{text:Link 3 3}</a>{/block:IfURL33}{block:IfURL34}
  1156. <li><a href="{text:URL 3 4}">{text:Link 3 4}</a>{/block:IfURL34}{block:IfURL35}
  1157. <li><a href="{text:URL 3 5}">{text:Link 3 5}</a>{/block:IfURL35}{block:IfURL36}
  1158. <li><a href="{text:URL 3 6}">{text:Link 3 6}</a>{/block:IfURL36}
  1159. </ul>{/block:IfURL31}{block:IfLinkSection3}
  1160. </div>
  1161. </div>{block:IfBlogroll}
  1162. <div id="br" class="tab">
  1163. <div class="content box">
  1164. <h1>Blogroll</h1>
  1165. {block:Following}<ul id="blogroll-content">
  1166. {block:Followed}<li class="follows">
  1167. <img class="follow-pic" src="{FollowedPortraitURL-48}">
  1168. <div class="follow-info">
  1169. <span class="follow-url"><a href="{FollowedURL}" target="_blank">{FollowedName}</a></span>
  1170. <span class="follow-title">{FollowedTitle}</span>
  1171. </div>
  1172. </li>
  1173. {/block:Followed}
  1174. </ul>{/block:Following}
  1175. </div>
  1176. </div>{/block:IfBlogroll}
  1177. {block:Pagination}<div class="pagination" style="visibility:hidden;">
  1178. {block:NextPage}<a href="{NextPage}" id="next-link">next</a>{/block:NextPage}
  1179. </div>{/block:Pagination}
  1180. {block:IndexPage}<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1181. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1182. {/block:IndexPage}<link href="https://dl.dropboxusercontent.com/s/hzclyl41cq3yzjk/style.css" rel="stylesheet" type="text/css"/>
  1183. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1184. <script src="http://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1185. <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5391855";var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";document.head.appendChild(fhs);document.write("<span style='display:none' id='o_"+fhs_id+"'></span>");</script>
  1186. <script src="http://static.tumblr.com/8pnyeus/Vm1ofn39c/raincoat.js"></script>{block:IndexPage}
  1187. <script>
  1188. $(function(){
  1189. var $tumblelog = $('#posts');
  1190. $tumblelog.infinitescroll(
  1191. infScrollOptions, function( newElements ) {
  1192. var $newElems = $( newElements );
  1193. var $newElemsIDs = $newElems.map(function () {
  1194. return this.id;
  1195. }).get();
  1196. $newElems.find('.photo-slideshow').pxuPhotoset(pxuOptions);
  1197. $newElems = $(newElements).css({ opacity: 0, zIndex: -1});
  1198. $newElems.imagesLoaded(function(){
  1199. $newElems.animate({ opacity: 1, zIndex: 1 });
  1200. });
  1201. $newElems.unnest(unnestOptions);
  1202. $('.caption p').each(function(index, item) {
  1203. if(($.trim($(item).text()) === "")
  1204. && !($(item).has("img").length)) {
  1205. $(item).remove();
  1206. }
  1207. });
  1208. $('.label:contains(":")').each(function(){
  1209. $(this).html($(this).html().split(":").join(""));
  1210. });
  1211. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1212. });
  1213. });
  1214. </script>{block:IndexPage}
  1215. </body>
  1216. </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!