bychloethemes

Picturesque Theme - by Chloe

Nov 6th, 2015
6,422
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.25 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <!------------------------------------------
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. Picturesque Theme by Chloe | @dontbrag | @bychloethemes
  12.  
  13. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
  14.  
  15. ------------------------------------------->
  16. <meta name="image:Sidebar" content="" />
  17. <meta name="image:Icon" content="" />
  18.  
  19. <meta name="color:Background" content="#f6f6f6" />
  20. <meta name="color:Text" content="#666"/>
  21. <meta name="color:Accent" content="#9ad7b9" />
  22.  
  23. <meta name="if:Fade In On Page Load" content="0" />
  24.  
  25. <meta name="text:Link 1" content="" />
  26. <meta name="text:URL 1" content="" />
  27. <meta name="text:Link 2" content="" />
  28. <meta name="text:URL 2" content="" />
  29. <meta name="text:Link 3" content="" />
  30. <meta name="text:URL 3" content="" />
  31.  
  32. <meta name="text:Box Title" content="About" />
  33. <meta name="text:Box Content" content="This could be anything really. About, quote, updates - anything you can think of." />
  34.  
  35. <meta charset="UTF-8" />
  36. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  37. <link rel="shortcut icon" href="{Favicon}">
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  39. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  40. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  41. <link href='https://fonts.googleapis.com/css?family=Quicksand:400|PT+Sans:400,700' rel='stylesheet' type='text/css'>
  42. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  43. <script>
  44. $(document).ready(function() {
  45. {block:IfFadeInOnPageLoad}
  46. $('article, #sidebar, .credit').fadeIn('slow');
  47. {/block:IfFadeInOnPageLoad}
  48. $('#clicker').click(function() {
  49. $('#wrapper').toggleClass('shift-posts');
  50. $('#sidebar').toggleClass('shift-sidebar');
  51. $('#navigation').toggleClass('shift-nav');
  52. $('#clicker').toggleClass('swirl');
  53. $('body').toggleClass('lock');
  54. });
  55. })
  56. </script>
  57. <style type="text/css">
  58. #tumblr_controls {
  59. -webkit-filter: invert(95%);
  60. position:fixed!important;
  61. }
  62. ::-webkit-scrollbar {
  63. background-color:{color:background};
  64. height: 7px;
  65. width: 7px;
  66. }
  67. ::-webkit-scrollbar-thumb {
  68. background-color:#aaa;
  69. border:2px solid {color:background};
  70. }
  71. ::selection {
  72. background:transparent;
  73. color:{color:Accent};
  74. }
  75. ::-moz-selection {
  76. background:transparent;
  77. color:{color:Accent};
  78. }
  79. body{
  80. background:{color:Background};
  81. color:{color:text};
  82. font-size:11px;
  83. font-family: 'PT Sans', sans-serif;
  84. font-weight:400;
  85. line-height:1.4em;
  86. overflow-x:hidden;
  87. }
  88. .lock {
  89. overflow:hidden;
  90. }
  91. a {
  92. text-decoration:none;
  93. color:{color:Text};
  94. border-bottom:1px solid #ccc;
  95. -webkit-transition: all 0.3s ease-in-out;
  96. -moz-transition: all 0.3s ease-in-out;
  97. -o-transition: all 0.3s ease-in-out;
  98. transition: all 0.3s ease-in-out;
  99. }
  100. a:hover {
  101. border-color:{color:Accent};
  102. -webkit-transition: all 0.3s ease-in-out;
  103. -moz-transition: all 0.3s ease-in-out;
  104. -o-transition: all 0.3s ease-in-out;
  105. transition: all 0.3s ease-in-out;
  106. }
  107. #s-m-t-tooltip {
  108. max-width:300px;
  109. padding:3px 6px;
  110. margin:20px 0px 0px 20px;
  111. background: #fff;
  112. border:1px solid #ececec;
  113. color:{color:Text};
  114. z-index:999999999999999999;
  115. font-size:9px;
  116. border-radius:3px;
  117. text-transform:uppercase;
  118. }
  119. h1, h2, h3, h4, h5, h6 {
  120. font-family:'Quicksand', sans-serif;
  121. }
  122. hr {
  123. width:70%;
  124. margin:10px auto;
  125. height:1px;
  126. background:{color:Accent};
  127. border:none;
  128. display:block;
  129. }
  130. iframe, img, embed, object, video {
  131. max-width: 100%;
  132. }
  133. img {
  134. height: auto;
  135. width: auto;
  136. vertical-align:middle;
  137. }
  138. #infscr-loading {
  139. position:absolute;
  140. bottom:30px;
  141. width:200px;
  142. margin-left:50%;
  143. left:-100px;
  144. text-align:center;
  145. }
  146. #sidebar {
  147. position:fixed;
  148. top:50%;
  149. margin-top:-55px;
  150. width:112px;
  151. text-align:center;
  152. {block:IfFadeInOnPageLoad}
  153. display:none;
  154. {/block:IfFadeInOnPageLoad}
  155. }
  156. .pre-sidebar {
  157. left:calc(50% + 354px);
  158. -webkit-transition: all 0.5s linear;
  159. -moz-transition: all 0.5s linear;
  160. -o-transition: all 0.5s linear;
  161. transition: all 0.5s linear;
  162. }
  163. .shift-sidebar {
  164. left:calc(50% - 466px);
  165. -webkit-transition: all 0.5s linear;
  166. -moz-transition: all 0.5s linear;
  167. -o-transition: all 0.5s linear;
  168. transition: all 0.5s linear;
  169. }
  170. #avatar {
  171. border-radius:50%;
  172. background:#fff;
  173. padding:5px;
  174. border:1px solid #ececec;
  175. width:100px;
  176. height:100px;
  177. margin-bottom:10px;
  178. }
  179. #clicker {
  180. cursor:pointer;
  181. font-size:18px;
  182. color:{color:Accent};
  183. }
  184. .un-swirl {
  185. -webkit-transition: all 0.5s linear;
  186. -moz-transition: all 0.5s linear;
  187. -o-transition: all 0.5s linear;
  188. transition: all 0.5s linear;
  189. }
  190. .swirl {
  191. -webkit-transform: rotate(180deg);
  192. -moz-transform: rotate(180deg);
  193. -o-transform: rotate(180deg);
  194. -ms-transform: rotate(180deg);
  195. transform: rotate(180deg);
  196. -webkit-transition: all 0.5s linear;
  197. -moz-transition: all 0.5s linear;
  198. -o-transition: all 0.5s linear;
  199. transition: all 0.5s linear;
  200. }
  201. #wrapper {
  202. margin-top:15px;
  203. padding-top:40px;
  204. top:0;
  205. {block:IndexPage}
  206. width:604px;
  207. {/block:IndexPage}
  208. {block:PermalinkPage}
  209. width:500px;
  210. {/block:PermalinkPage}
  211. }
  212. .shuffle {
  213. opacity:1;
  214. margin-left:calc(50% - 466px);
  215. -webkit-transition: all 0.5s linear;
  216. -moz-transition: all 0.5s linear;
  217. -o-transition: all 0.5s linear;
  218. transition: all 0.5s linear;
  219. }
  220. .shift-posts {
  221. opacity:0;
  222. margin-left:-624px;
  223. -webkit-transition: all 0.5s linear;
  224. -moz-transition: all 0.5s linear;
  225. -o-transition: all 0.5s linear;
  226. transition: all 0.5s linear;
  227. }
  228. {block:PermalinkPage}
  229. #posts {
  230. position:relative;
  231. }
  232. {/block:PermalinkPage}
  233. .credit {
  234. {block:IfFadeInOnPageLoad}
  235. display:none;
  236. {/block:IfFadeInOnPageLoad}
  237. width:15px;
  238. height:14px;
  239. color: {color:Text};
  240. position:fixed;
  241. bottom: 25px;
  242. right: 25px;
  243. line-height: 14px;
  244. font-size:11px;
  245. line-height:14px;
  246. padding:3px 4px;
  247. overflow: hidden;
  248. z-index:999999999999999999;
  249. text-align:left;
  250. font-family:'PT Sans', sans-serif;
  251. background:#fff;
  252. border:1px solid #ececec;
  253. border-radius:3px;
  254. -webkit-transition: all 0.5s ease-in-out 0.2s;
  255. -moz-transition: all 0.5s ease-in-out 0.2s;
  256. -o-transition: all 0.5s ease-in-out 0.2s;
  257. transition: all 0.5s ease-in-out 0.2s;
  258. }
  259. .credit .fa-diamond {
  260. position:absolute;
  261. right:5px;
  262. top:4px;
  263. -webkit-transition: all 0.5s ease-in-out;
  264. -moz-transition: all 0.5s ease-in-out;
  265. -o-transition: all 0.5s ease-in-out;
  266. transition: all 0.5s ease-in-out;
  267.  
  268. }
  269. .credit:hover .fa-diamond {
  270. transform: rotateY(180deg);
  271. -webkit-transition: all 0.5s ease-in-out;
  272. -moz-transition: all 0.5s ease-in-out;
  273. -o-transition: all 0.5s ease-in-out;
  274. transition: all 0.5s ease-in-out;
  275. }
  276. .credit:hover {
  277. width:105px;
  278. color:{color:text};
  279. -webkit-transition: all 0.5s ease-in-out;
  280. -moz-transition: all 0.5s ease-in-out;
  281. -o-transition: all 0.5s ease-in-out;
  282. transition: all 0.5s ease-in-out;
  283. }
  284. .credit a {
  285. border-bottom:none;
  286. }
  287. .credit a .wordy {
  288. color:{color:text};
  289. text-decoration: none;
  290. font-size:11px;
  291. }
  292. .credit .wordy {
  293. opacity:0;
  294. visibility:hidden;
  295. -webkit-transition: all 0.2s ease-in-out;
  296. -moz-transition: all 0.2s ease-in-out;
  297. -o-transition: all 0.2s ease-in-out;
  298. transition: all 0.2s ease-in-out;
  299. }
  300. .credit:hover .wordy {
  301. opacity: 1;
  302. visibility: visible;
  303. -webkit-transition: all 0.5s ease-in-out 0.5s;
  304. -moz-transition: all 0.5s ease-in-out 0.5s;
  305. -o-transition: all 0.5s ease-in-out 0.5s;
  306. transition: all 0.5s ease-in-out 0.5s;
  307. }
  308. article {
  309. margin-bottom:80px;
  310. position:relative;
  311. {block:IndexPage}
  312. width:262px;
  313. {/block:IndexPage}
  314. {block:PermalinkPage}
  315. width:500px;
  316. {/block:PermalinkPage}
  317. {block:IfFadeInOnPageLoad}
  318. display:none;
  319. {/block:IfFadeInOnPageLoad}
  320. }
  321. .inner {
  322. margin:5px 0;
  323. background:#fff;
  324. padding:15px;
  325. border:1px solid #ececec;
  326. border-radius:3px;
  327. }
  328. .photo-post, .photoset-post, .video-post {
  329. padding:5px;
  330. }
  331. article h1 {
  332. margin:0;
  333. font-family:'Quicksand', sans-serif;
  334. }
  335. article h2 {
  336. margin-bottom:15px;
  337. {block:IndexPage}
  338. margin:0;
  339. {/block:IndexPage}
  340. {block:PermalinkPagination}
  341. margin:0;
  342. {/block:PermalinkPagination}
  343. font-size:1.5em;
  344. font-family:'Quicksand', sans-serif;
  345. font-weight:bold;
  346. }
  347. article p {
  348. margin:10px 0;
  349. }
  350. article blockquote {
  351. margin: 5px 0 5px 10px;
  352. border-left:1px solid {color:Accent};
  353. padding-left:10px;
  354. }
  355. article ul, article ol {
  356. padding-left:25px;
  357. }
  358. article ul {
  359. list-style-type:none;
  360. }
  361. article li {
  362. position:relative;
  363. }
  364. article li:before {
  365. content:'';
  366. width:7px;
  367. height:1px;
  368. background:{color:Accent};
  369. position:absolute;
  370. left:-16px;
  371. top:7px;
  372. }
  373. .quote-post cite {
  374. text-align:right;
  375. display:block;
  376. margin:5px 5px 10px 5px;
  377. }
  378. .link-post h2 a {
  379. border-bottom:none;
  380. color:{color:Accent};
  381. }
  382. ul.chat-list {
  383. padding:0;
  384. list-style-type:none;
  385. }
  386. ul.chat-list li {
  387. line-height:17px;
  388. }
  389. ul.chat-list li:before {
  390. width:0;
  391. height:0;
  392. }
  393. ul.chat-list .label {
  394. color:{color:Accent};
  395. }
  396. .album-art img {
  397. {block:IndexPage}
  398. width:80px;
  399. height:80px;
  400. {/block:IndexPage}
  401. float:left;
  402. margin-right:10px;
  403. {block:PermalinkPage}
  404. width:120px;
  405. height:120px;
  406. {/block:PermalinkPage}
  407. }
  408. .audio-info {
  409. {block:IndexPage}
  410. min-height:80px;
  411. {/block:IndexPage}
  412. {block:PermalinkPage}
  413. min-height:120px;
  414. line-height:140%;
  415. {/block:PermalinkPage}
  416. margin-bottom:10px;
  417. }
  418. .tumblr_audio_player {
  419. position: absolute;
  420. {block:IndexPage}
  421. top: 25px;
  422. left: 25px;
  423. {/block:IndexPage}
  424. {block:PermalinkPage}
  425. top: 45px;
  426. left: 45px;
  427. {/block:PermalinkPage}
  428. width: 30px;
  429. height: 30px;
  430. border-radius: 50%;
  431. opacity: 0.8;
  432. }
  433. .response {
  434. margin-top:10px;
  435. }
  436. .response > p {
  437. margin:0;
  438. }
  439. .other_perma {
  440. text-align:right;
  441. color:{color:Accent};
  442. padding:3px 10px;
  443. font-family: 'PT Sans', sans-serif;
  444. }
  445. .other_perma a {
  446. color:{color:Accent};
  447. border:none;
  448. }
  449. .other_perma a:hover {
  450. color:{color:text};
  451. }
  452. .extra-info {
  453. line-height: 20px;
  454. text-align: left;
  455. list-style-type:none;
  456. padding:15px;
  457. margin:0;
  458. margin-top:20px;
  459. }
  460. .extra-info li:before {
  461. width:0;
  462. height:0;
  463. }
  464. .extra-info li span {
  465. text-transform:uppercase;
  466. color:{color:Accent};
  467. }
  468. #notes {
  469. margin-top:20px;
  470. }
  471. ol.notes {
  472. padding: 0px;
  473. margin: 0;
  474. list-style-type: none;
  475. }
  476. ol.notes li:before {
  477. width:0;
  478. height:0;
  479. }
  480. ol.notes li.note {
  481. padding: 3px;
  482. margin-bottom:3px;
  483. }
  484. ol.notes li.note img.avatar {
  485. float:right;
  486. border-radius:50%;
  487. }
  488. ol.notes li.note blockquote {
  489. border-color: {color:text};
  490. padding-left: 6px;
  491. margin: 6px;
  492. }
  493. ol.notes li.note blockquote a {
  494. text-decoration: none;
  495. }
  496. #navigation {
  497. top:55px;
  498. width:604px;
  499. position:fixed;
  500. }
  501. .pre-nav {
  502. opacity:0;
  503. left:calc(100% + 20px);
  504. -webkit-transition: all 0.5s linear;
  505. -moz-transition: all 0.5s linear;
  506. -o-transition: all 0.5s linear;
  507. transition: all 0.5s linear;
  508. }
  509. .shift-nav {
  510. opacity:1;
  511. left:calc(50% - 153px);
  512. -webkit-transition: all 0.5s linear;
  513. -moz-transition: all 0.5s linear;
  514. -o-transition: all 0.5s linear;
  515. transition: all 0.5s linear;
  516. }
  517. #nav-title, #nav-desc {
  518. background:#fff;
  519. border:1px solid #ececec;
  520. padding:15px;
  521. width:230px;
  522. margin-bottom:60px;
  523. border-radius:3px;
  524. }
  525. #nav-title h1 {
  526. margin:5px;
  527. }
  528. #nav-pic img {
  529. background:#fff;
  530. border:1px solid #ececec;
  531. padding:5px;
  532. width:250px;
  533. margin-bottom:60px;
  534. border-radius:3px;
  535. }
  536. #right {
  537. position: absolute;
  538. left: 342px;
  539. top: 0;
  540. }
  541. #right h2 {
  542. margin-top:0;
  543. }
  544. #nav-navi {
  545. list-style-type:none;
  546. background:#fff;
  547. border:1px solid #ececec;
  548. padding:15px;
  549. width:230px;
  550. margin:0;
  551. margin-bottom:60px;
  552. border-radius:3px;
  553. }
  554. ul#nav-navi li {
  555. line-height:20px;
  556. display:block;
  557. text-transform:capitalize;
  558. text-align:left;
  559. padding: 2px;
  560. margin:2px;
  561. font-family: 'PT Sans', sans-serif;
  562. border-bottom:1px solid #ececec;
  563. position:relative;
  564. -webkit-transition: all 0.3s ease-in-out;
  565. -moz-transition: all 0.3s ease-in-out;
  566. -o-transition: all 0.3s ease-in-out;
  567. transition: all 0.3s ease-in-out;
  568. }
  569. ul#nav-navi li:before {
  570. background:{color:accent};
  571. content:'';
  572. height:2px;
  573. position:absolute;
  574. width:0%;
  575. left:0;
  576. top:23px;
  577. -webkit-transition: all 0.3s ease-in-out;
  578. -moz-transition: all 0.3s ease-in-out;
  579. -o-transition: all 0.3s ease-in-out;
  580. transition: all 0.3s ease-in-out;
  581. }
  582. ul#nav-navi li:hover:before {
  583. width:100%;
  584. -webkit-transition: all 0.3s ease-in-out;
  585. -moz-transition: all 0.3s ease-in-out;
  586. -o-transition: all 0.3s ease-in-out;
  587. transition: all 0.3s ease-in-out;
  588. }
  589. ul#nav-navi a {
  590. color:{color:text};
  591. border-bottom:none;
  592. -webkit-transition: all 0.3s ease-in-out;
  593. -moz-transition: all 0.3s ease-in-out;
  594. -o-transition: all 0.3s ease-in-out;
  595. transition: all 0.3s ease-in-out;
  596. }
  597. ul#nav-navi a:hover {
  598. color:{color:text};
  599. -webkit-transition: all 0.3s ease-in-out;
  600. -moz-transition: all 0.3s ease-in-out;
  601. -o-transition: all 0.3s ease-in-out;
  602. transition: all 0.3s ease-in-out;
  603. }
  604. #navi-about {background:#fff;
  605. border:1px solid #ececec;
  606. padding:15px;
  607. width:230px;
  608. margin-bottom:60px;
  609. border-radius:3px;
  610. }
  611. a:focus {
  612. outline:none;
  613. }
  614. #tumblr_lightbox {
  615. background:rgba({RGBcolor:Accent}, 0.4)!important;
  616. }
  617. #tumblr_lightbox img {
  618. opacity:0;
  619. border-radius:3px!important;
  620. -moz-border-radius: 3px!important;
  621. -webkit-border-radius: 3px!important;
  622. -o-border-radius: 3px!important;
  623. margin-top:-15px;
  624. }
  625. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
  626. opacity: 1!important;
  627. box-shadow: 0 0 !important;
  628. border-radius: 3px!important;
  629. -moz-border-radius: 3px!important;
  630. -webkit-border-radius: 3px!important;
  631. -o-border-radius: 3px!important;
  632. padding:5px!important;
  633. background:#fff!important;
  634. border:1px solid #ececec!important;
  635. }
  636. </style>
  637. </head>
  638. <body>
  639. <div id="sidebar" class="pre-sidebar">
  640. <a href="/"><img src="{image:Sidebar}" id="avatar"></a>
  641. <i id="clicker" class="fa fa-long-arrow-right un-swirl"></i>
  642. </div>
  643.  
  644. <div id="navigation" class="pre-nav">
  645. <div id="nav-title">
  646. <h1>{Title}</h1>
  647. </div>
  648. <div id="nav-pic">
  649. <img src="{image:Icon}">
  650. </div>
  651. {block:Description}
  652. <div id="nav-desc">
  653. {Description}
  654. </div>
  655. {/block:Description}
  656. <div id="right">
  657. <ul id="nav-navi">
  658. <h2>Navigate</h2>
  659. <a href="/"><li>home</li></a>
  660. {block:AskEnabled}
  661. <a href="/ask"><li>ask</li></a>
  662. {/block:AskEnabled}
  663. {block:IfLink1}
  664. <li><a href="{text:URL 1}">{text:Link 1}</a></li>
  665. {/block:IfLink1}
  666. {block:IfLink2}
  667. <li><a href="{text:URL 2}">{text:Link 2}</a></li>
  668. {/block:IfLink2}
  669. {block:IfLink3}
  670. <li><a href="{text:URL 3}">{text:Link 3}</a></li>
  671. {/block:IfLink3}
  672. <a href="/archive"><li>archive</li></a>
  673. <a href="http://dontbrag.tumblr.com" target="_blank"><li>theme</li></a>
  674. </ul>
  675. <div id="navi-about">
  676. <h2>{text:Box Title}</h2>
  677. {text:Box Content}
  678. </div>
  679. </div>
  680.  
  681. </div>
  682.  
  683. <div id="wrapper" class="shuffle">
  684. <div id="posts">
  685. {block:Posts}
  686. <article>
  687. {block:Text}
  688. <div class="text-post inner">
  689. {block:Title}<h2>{Title}</h2>{/block:Title}
  690. {Body}
  691. </div>
  692. {/block:Text}
  693.  
  694. {block:Photo}
  695. <div class="photo-post inner">
  696. {block:IndexPage}
  697. <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  698. </div>
  699. {/block:IndexPage}
  700. {block:PermalinkPage}
  701. <div class="photo-wrap"><img src="{PhotoURL-500}" class="photos"></div>
  702. {block:Caption}{Caption}{/block:Caption}
  703. {/block:PermalinkPage}
  704. </div>
  705. {/block:Photo}
  706.  
  707. {block:Photoset}
  708. <div class="photoset-post inner">
  709. {block:IndexPage}
  710. {Photoset-250}
  711. {/block:IndexPage}
  712. {block:PermalinkPage}
  713. {Photoset-500}
  714. {block:Caption}{Caption}{/block:Caption}
  715. {/block:PermalinkPage}
  716. </div>
  717. {/block:Photoset}
  718.  
  719. {block:Quote}
  720. <div class="quote-post inner">
  721. <h2><span style="color:{color:Accent};">❝</span> {Quote} <span style="color:{color:Accent};">❞</span></h2>
  722. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  723. </div>
  724. {/block:Quote}
  725.  
  726. {block:Link}
  727. <div class="link-post inner">
  728. <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="fa fa-angle-right"></i></a></h2>
  729. {block:Description}{Description}{/block:Description}
  730. </div>
  731. {/block:Link}
  732.  
  733. {block:Chat}
  734. <div class="chat-post inner">
  735. {block:Title}<h1>{Title}</h1>{/block:Title}
  736. <ul class="chat-list">
  737. {block:Lines}
  738. <li class="{Alt}">
  739. {block:Label}<span class="label">{Label}</span>{/block:Label}
  740. {Line}</li>
  741. {/block:Lines}
  742. </ul>
  743. </div>
  744. {/block:Chat}
  745.  
  746. {block:Audio}
  747. <div class="audio inner">
  748. {block:AlbumArt}
  749. <div class="album-art">
  750. <img src="{AlbumArtURL}">
  751. </div>
  752. {/block:AlbumArt}
  753. <div class="audio-info">
  754. Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  755. Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  756. Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
  757. Plays: {FormattedPlayCount}</div>
  758. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  759. </div>
  760. {block:PermalinkPage}
  761. {block:Caption}{Caption}{/block:Caption}
  762. {/block:PermalinkPage}
  763. {/block:Audio}
  764.  
  765. {block:Video}
  766. <div class="video-post inner">
  767. {block:IndexPage}
  768. {Video-250}
  769. {/block:IndexPage}
  770. {block:PermalinkPage}
  771. {Video-500}
  772. {block:Caption}{Caption}{/block:Caption}
  773. {/block:PermalinkPage}
  774. </div>
  775. {/block:Video}
  776.  
  777. {block:Answer}
  778. <div class="inner">
  779. {Asker}: {Question}
  780. </div>
  781. <div class="inner response">
  782. {Answer}
  783. </div>
  784. {/block:Answer}
  785.  
  786. {block:IndexPage}
  787. <div class="other_perma">
  788. <a href="{Permalink}" target="_blank" title="{TimeAgo}">{NoteCount} N</a> &nbsp;,&nbsp; <a href="{ReblogURL}" target="_blank">RBLG</a>
  789. </div>
  790. {/block:IndexPage}
  791.  
  792. {block:PermalinkPagination}
  793. <ul class="extra-info inner">
  794. {block:NoteCount}<li><span>Notes:</span> {NoteCount}{/block:NoteCount}
  795. {block:Date}<li><span>{block:NotReblog}Posted {/block:NotReblog}{block:RebloggedFrom}Reblogged {block:RebloggedFrom}:</span> {Month} {DayOfMonth}{DayOfMonthSuffix} ({TimeAgo}){/block:Date}
  796. {block:RebloggedFrom}<li><span>From:</span> <a href="{ReblogParentURL}">@{ReblogParentName}</a>{/block:RebloggedFrom}
  797. {block:ContentSource}<li><span>Source:</span> <a href="{SourceURL}">@{SourceTitle}</a>{/block:ContentSource}
  798. {block:HasTags}<li><span>Filed under:</span> {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  799. </ul>
  800. {/block:PermalinkPagination}
  801. {block:PermalinkPage}
  802.  
  803. {block:PostNotes}
  804. <div id="notes" class="inner">
  805. {PostNotes-16}
  806. </div>
  807. {/block:PostNotes}
  808. {/block:PermalinkPage}
  809.  
  810. </article>
  811. {/block:Posts}
  812. </div><!--end posts-->
  813. </div><!--end wrapper-->
  814.  
  815. {block:Pagination}
  816. <div class="pagination" style="visibility:hidden;">
  817. {block:PreviousPage}
  818. <a href="{PreviousPage}">previous</a>
  819. {/block:PreviousPage}
  820. {block:NextPage}
  821. <a href="{NextPage}" id="next">next</a>
  822. {/block:NextPage}
  823. </div>
  824. {/block:Pagination}
  825. <div class="credit">
  826. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com"><span class="wordy">By Chloe Themes</span></a>
  827. </div>
  828. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  829. {block:IndexPage}
  830. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  831. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  832. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  833. <script>
  834. $(function(){
  835. $('.make_lightbox').each(function(){
  836. $(this).on('click',function(){
  837. var lbArray = [];
  838. var arrayContents = {
  839. "width":$(this).data('width'),
  840. "height":$(this).data('height'),
  841. "low_res":$(this).data("lowres"),
  842. "high_res":$(this).data('highres')};
  843. lbArray.push(arrayContents);
  844. Tumblr.Lightbox.init(lbArray,1);
  845. $('body').toggleClass('tumblr_lightbox_active');
  846. });
  847. });
  848. });
  849. (function () {
  850. var $tumblelog = $('#posts');
  851. $tumblelog.imagesLoaded(function () {
  852. $tumblelog.masonry({
  853. itemSelector: 'article',
  854. isAnimated:true,
  855. columnWidth:262,
  856. gutterWidth:80,
  857. });
  858. });
  859. $tumblelog.infinitescroll({
  860. navSelector : "div.pagination",
  861. nextSelector : ".pagination a#next",
  862. itemSelector : "article",
  863. loading: {
  864. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  865. img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
  866. msg: null,
  867. msgText: ""
  868. },
  869. },
  870.  
  871. function( newElements ) {
  872. var $newElems = $(newElements)
  873. $newElems.hide();
  874. $newElems.imagesLoaded(function(){
  875. $tumblelog.masonry( 'appended', $newElems, {
  876. isAnimated: true,
  877. animationOptions: {
  878. duration: 250,
  879. easing: 'linear',
  880. queue: false
  881. }
  882. },
  883. function(){
  884. $newElems.fadeIn('slow');
  885. });
  886. });
  887. $(function(){
  888. $('.make_lightbox').each(function(){
  889. $(this).on('click',function(){
  890. var lbArray = [];
  891. var arrayContents = {
  892. "width":$(this).data('width'),
  893. "height":$(this).data('height'),
  894. "low_res":$(this).data("lowres"),
  895. "high_res":$(this).data('highres')
  896. };
  897. lbArray.push(arrayContents);
  898. Tumblr.Lightbox.init(lbArray,1);
  899. $('body').toggleClass('tumblr_lightbox_active');
  900. });
  901. });
  902. });
  903. });
  904. })();
  905. </script>
  906. {/block:IndexPage}
  907. <div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5127414";
  908. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  909. fhs.src = "http://freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  910. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  911. </script></div>
  912. <!--/////////End Masonry//////////-->
  913.  
  914. </body>
  915. </html>
Advertisement
Add Comment
Please, Sign In to add comment