bychloethemes

Submarine Theme - by Chloe

Oct 1st, 2015
523
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.53 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <!------------------------------------------
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. Submarine 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. If I find any of this anywhere me & my squad (aka @fruitelf and @costalies) will personally drag ur name thru the dirt do not test us.
  16.  
  17. For html help go to @htmlqueens
  18.  
  19. ------------------------------------------->
  20.  
  21. <!--meta tags-->
  22. <meta name="image:Background" content="" title="Background Image"/>
  23.  
  24. <meta name="color:Background" content="#fff"/>
  25.  
  26. <meta name="color:Text" content="#666"/>
  27. <meta name="color:Accent" content="#00709e" />
  28.  
  29. <meta name="if:Tiled Background" content="1"/>
  30. <meta name="if:Updates Tab" content="0" />
  31.  
  32. <meta name="select:Columns" content="3" title="3" />
  33. <meta name="select:Columns" content="2" title="2" />
  34.  
  35. <meta name="text:Quote" content="Quote" />
  36. <meta name="text:Updates Tab 1" content="Stats" />
  37. <meta name="text:Updates Tab 2" content="Networks" />
  38. <meta name="text:Updates Tab 3" content="Currently" />
  39.  
  40. <meta name="text:Link 1" content="link 1" />
  41. <meta name="text:Icon 1" content="flash" />
  42. <meta name="text:URL 1" content="http://" />
  43. <meta name="text:Link 2" content="link 2" />
  44. <meta name="text:Icon 2" content="paw" />
  45. <meta name="text:URL 2" content="http://" />
  46. <meta name="text:Link 3" content="link 3" />
  47. <meta name="text:Icon 3" content="star-o" />
  48. <meta name="text:URL 3" content="http://" />
  49.  
  50. <meta charset="UTF-8" />
  51. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  52. <link rel="shortcut icon" href="{Favicon}">
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  54. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  55. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  56. <link href='//fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
  57. <style type="text/css">
  58. #tumblr_controls {
  59. top:15px!important;
  60. right:15px!important;
  61. -webkit-filter: invert(100%);
  62. position:fixed!important;
  63. }
  64. ::-webkit-scrollbar {
  65. background-color:#fff;
  66. height: 7px;
  67. width: 7px;
  68. }
  69. ::-webkit-scrollbar-thumb {
  70. background-color:{color:Accent};
  71. border:2px solid #fff;
  72. }
  73. body{
  74. background:{color:background} url({image:Background})
  75. {block:IfTiledBackground}
  76. repeat fixed;
  77. {/block:IfTiledBackground}
  78. {block:IfNotTiledbackground}
  79. no-repeat center center fixed;
  80. -webkit-background-size:cover;
  81. -moz-background-size:cover;
  82. -ms-background-size:cover;
  83. -o-background-size:cover;
  84. background-size:cover;
  85. {/block:IfNotTiledbackground}
  86. color:{color:text};
  87. font-size:13px;
  88. font-family: 'Roboto', sans-serif;
  89. font-weight:300;
  90. }
  91. a {
  92. text-decoration:none;
  93. color:{color:Text};
  94. }
  95. iframe, img, embed, object, video {
  96. max-width: 100%;
  97. }
  98. img {
  99. height: auto;
  100. width: auto;
  101. vertical-align:middle;
  102. }
  103. #infscr-loading {
  104. position:absolute;
  105. bottom:30px;
  106. width:200px;
  107. margin-left:50%;
  108. left:-100px;
  109. text-align:center;
  110. }
  111. #infscr-loading img{
  112. }
  113. #top, #bottom, #left, #right {
  114. background:{color:Accent};
  115. position:fixed;
  116. z-index:999;
  117. }
  118. #top, #bottom {
  119. height:15px;
  120. width:100%;
  121. left:0;
  122. }
  123. #right, #left {
  124. width:15px;
  125. height:100%;
  126. top:0;
  127. }
  128. #top { top:0; }
  129. #bottom { bottom:0; }
  130. #left { left:0; }
  131. #right { right:0; }
  132. #sidebar {
  133. position:fixed;
  134. top:60px;
  135. right:40px;
  136. width:150px;
  137. text-align:center;
  138. padding:10px;
  139. }
  140. #sidebar h1 {
  141. font-weight:normal;
  142. font-size:1.5em;
  143. text-align:left;
  144. margin:0;
  145. }
  146. ul#navlinks {
  147. list-style-type:none;
  148. font-size:12px;
  149. margin:10px 0 0 0;
  150. padding:0;
  151. }
  152. ul#navlinks li {
  153. border-bottom:1px dotted {color:Text};
  154. text-align:right;
  155. line-height:20px;
  156. }
  157. ul#navlinks a:hover li {
  158. border-bottom:1px solid {color:Accent};
  159. }
  160. ul#navlinks a:hover {
  161. color:{color:Accent};
  162. }
  163. ul#navlinks .fa {
  164. float:left;
  165. line-height:20px;
  166. }
  167. #sidebar p {
  168. margin-bottom:0;
  169. }
  170. {block:IfUpdatesTab}
  171. #updates-lights img {
  172. z-index:99;
  173. position:fixed;
  174. top:-10px;
  175. left:-80px;
  176. }
  177. #hover-1, #hover-2, #hover-3 {
  178. position:fixed;
  179. width:30px;
  180. height:30px;
  181. z-index:99999;
  182. display:block;
  183. border-radius:50%;
  184. }
  185. #hover-1 { top:89px; left:60px; }
  186. #hover-2 { top:170px; left:73px; }
  187. #hover-3 { top:259px; left:36px; }
  188. #inner-1, #inner-2, #inner-3 {
  189. background:rgba(255,255,255,0.8);
  190. width:220px;
  191. height:auto;
  192. position:relative;
  193. top:10px;
  194. left:-400px;
  195. padding:15px;
  196. border:2px solid {color:Accent};
  197. opacity:0;
  198. -webkit-transition: all 0.3s linear;
  199. -moz-transition: all 0.3s linear;
  200. -o-transition: all 0.3s linear;
  201. transition: all 0.3s linear;
  202. max-height:200px;
  203. overflow-y:auto;
  204. }
  205. #hover-1:hover #inner-1,
  206. #hover-2:hover #inner-2,
  207. #hover-3:hover #inner-3 {
  208. top:10px;
  209. left:10px;
  210. opacity:1;
  211. -webkit-transition: all 0.3s linear;
  212. -moz-transition: all 0.3s linear;
  213. -o-transition: all 0.3s linear;
  214. transition: all 0.3s linear;
  215. }
  216. {/block:IfUpdatesTab}
  217. #quote {
  218. position:fixed;
  219. bottom:50px;
  220. left:50px;
  221. width:150px;
  222. text-align:left;
  223. font-style:italic;
  224. }
  225. #posts {
  226. margin-top:35px;
  227. margin-left:50%;
  228. -webkit-transform: translate(-50%, 0%);
  229. -moz-transform: translate(-50%, 0%);
  230. -ms-transform: translate(-50%, 0%);
  231. -o-transform: translate(-50%, 0%);
  232. transform: translate(-50%, 0%);
  233. {block:PermalinkPage}
  234. width:500px;
  235. {/block:PermalinkPage}
  236. }
  237. {block:IndexPage}
  238. .posts-2 {
  239. width:520px;
  240. }
  241. .posts-3 {
  242. width:790px;
  243. }
  244. {/block:IndexPage}
  245. .credit {
  246. width:14px;
  247. height:13px;
  248. color: {color:Accent};
  249. position:fixed;
  250. bottom: 20px;
  251. right: 20px;
  252. line-height: 14px;
  253. font-size:12px;
  254. text-transform: uppercase;
  255. padding:3px 4px;
  256. overflow: hidden;
  257. z-index:999999999999999999;
  258. text-align:left;
  259. -webkit-transition: all 0.5s ease-in-out;
  260. -moz-transition: all 0.5s ease-in-out;
  261. -o-transition: all 0.5s ease-in-out;
  262. transition: all 0.5s ease-in-out;
  263. }
  264. .fa-diamond {
  265. position:absolute;
  266. right:3px;
  267. }
  268. .credit:hover {
  269. width:126px;
  270. background:#444;
  271. color:#fff;
  272. -webkit-transition: all 0.5s ease-in-out;
  273. -moz-transition: all 0.5s ease-in-out;
  274. -o-transition: all 0.5s ease-in-out;
  275. transition: all 0.5s ease-in-out;
  276. }
  277. .credit a {
  278. color:#fff;
  279. text-decoration: none;
  280. }
  281. .credit .mine {
  282. opacity:0;
  283. visibility:hidden;
  284. }
  285. .credit:hover .mine {
  286. opacity: 1;
  287. visibility: visible;
  288. -webkit-transition: all 0.5s ease-in-out 0.5s;
  289. -moz-transition: all 0.5s ease-in-out 0.5s;
  290. -o-transition: all 0.5s ease-in-out 0.5s;
  291. transition: all 0.5s ease-in-out 0.5s;
  292. }
  293. article {
  294. margin-bottom:20px;
  295. position:relative;
  296. {block:IndexPage}
  297. width:250px;
  298. {/block:IndexPage}
  299. {block:PermalinkPage}
  300. width:500px;
  301. {/block:PermalinkPage}
  302. }
  303. article a {
  304. color:{color:Accent};
  305. }
  306. article h2 {
  307. margin:0;
  308. font-size:1.3em;
  309. }
  310. article p {
  311. margin:10px 0;
  312. }
  313. article blockquote {
  314. margin: 5px 0 5px 10px;
  315. border-left:2px solid {color:Accent};
  316. padding-left:10px;
  317. }
  318. article ul, article ol {
  319. padding-left:25px;
  320. }
  321. .quote-post cite {
  322. text-align:right;
  323. display:block;
  324. margin:5px 5px 10px 5px;
  325. }
  326. ul.chat-list {
  327. padding:0;
  328. list-style-type:none;
  329. }
  330. ul.chat-list li {
  331. line-height:17px;
  332. }
  333. ul.chat-list .label {
  334. color:{color:Accent};
  335. font-weight:bold;
  336. }
  337. .album-art img {
  338. {block:IndexPage}
  339. width:80px;
  340. height:80px;
  341. {/block:IndexPage}
  342. float:left;
  343. margin-right:10px;
  344. {block:PermalinkPage}
  345. width:120px;
  346. height:120px;
  347. line-height:120%;
  348. {/block:PermalinkPage}
  349. }
  350. .audio-info {
  351. {block:IndexPage}
  352. min-height:80px;
  353. {/block:IndexPage}
  354. {block:PermalinkPage}
  355. min-height:120px;
  356. {/block:PermalinkPage}
  357. margin-bottom:10px;
  358. }
  359. .tumblr_audio_player {
  360. position: absolute;
  361. {block:IndexPage}
  362. top: 25px;
  363. left: 25px;
  364. {/block:IndexPage}
  365. {block:PermalinkPage}
  366. top: 45px;
  367. left: 45px;
  368. {/block:PermalinkPage}
  369. width: 30px;
  370. height: 30px;
  371. border-radius: 50%;
  372. opacity: 0.8;
  373. }
  374. .photo-mask {
  375. width:100%;
  376. height:100%;
  377. position:absolute;
  378. background:rgba(255,255,255,0.8);
  379. opacity:0;
  380. visibility:hidden;
  381. -webkit-transition: all 0.5s ease-in-out;
  382. -moz-transition: all 0.5s ease-in-out;
  383. -o-transition: all 0.5s ease-in-out;
  384. transition: all 0.5s ease-in-out;
  385. }
  386. article:hover .photo-mask {
  387. opacity:1;
  388. visibility:visible;
  389. -webkit-transition: all 0.5s ease-in-out;
  390. -moz-transition: all 0.5s ease-in-out;
  391. -o-transition: all 0.5s ease-in-out;
  392. transition: all 0.5s ease-in-out;
  393. }
  394. .photo-info {
  395. top:100%;
  396. padding: 20px;
  397. position:relative;
  398. -webkit-transform: translate(0%, -100%);
  399. -moz-transform: translate(0%, -100%);
  400. -ms-transform: translate(0%, -100%);
  401. -o-transform: translate(0%, -100%);
  402. transform: translate(0%, -100%);
  403. color:{color:Accent};
  404. border-bottom:2px solid {color:Accent};
  405. }
  406. .photo-info a {
  407. color:{color:Accent};
  408. }
  409. .other_perma {
  410. text-align:center;
  411. background:{color:Accent};
  412. color:#fff;
  413. padding:3px 10px;
  414. }
  415. .other_perma a {
  416. color:#fff;
  417. }
  418. .extra-info {
  419. position: fixed;
  420. top: 0;
  421. right: 100%;
  422. padding: 0 10px;
  423. line-height: 20px;
  424. width: 120px;
  425. text-align: right;
  426. }
  427. .extra-info .fa {
  428. color:{color:Accent};
  429. }
  430. ol.notes {
  431. padding: 0px;
  432. margin: 20px 0;
  433. list-style-type: none;
  434. }
  435. ol.notes a {
  436. border-bottom:0;
  437. }
  438. ol.notes li.note {
  439. padding: 3px;
  440. margin-bottom:3px;
  441. }
  442. ol.notes li.note img.avatar {
  443. float:right;
  444. border-radius:50%;
  445. }
  446. ol.notes li.note blockquote {
  447. border-color: {color:text};
  448. padding-left: 6px;
  449. margin: 6px;
  450. }
  451. ol.notes li.note blockquote a {
  452. text-decoration: none;
  453. }
  454. a:focus {
  455. outline:none;
  456. }
  457. </style>
  458. </head>
  459. <body>
  460. <div id="top"></div><div id="left"></div>
  461. <div id="right"></div><div id="bottom"></div>
  462.  
  463. <div id="sidebar">
  464. <h1>{Title}</h1>
  465. <ul id="navlinks">
  466. <a href="/"><li><i class="fa fa-refresh"></i>home</li></a>
  467. {block:AskEnabled}
  468. <a href="/ask"><li><i class="fa fa-commenting-o"></i>ask</li></a>
  469. {/block:AskEnabled}
  470. {block:SubmissionsEnabled}
  471. <a href="/submit"><li><i class="fa fa-file-o"></i>submit</li></a>
  472. {/block:SubmissionsEnabled}
  473. {block:IfLink1}
  474. <a href="{text:URL 1}"><li><i class="fa fa-{text:Icon 1}"></i>{text:Link 1}</li></a>
  475. {/block:IfLink1}
  476. {block:IfLink2}
  477. <a href="{text:URL 2}"><li><i class="fa fa-{text:Icon 2}"></i>{text:Link 2}</li></a>
  478. {/block:IfLink2}
  479. {block:IfLink3}
  480. <a href="{text:URL 3}"><li><i class="fa fa-{text:Icon 3}"></i>{text:Link 3}</li></a>
  481. {/block:IfLink3}
  482. <a href="/archive"><li><i class="fa fa-eye"></i>archive</li></a>
  483. <a href="http://dontbrag.tumblr.com" target="_blank"><li><i class="fa fa-code"></i>theme</li></a>
  484. </ul>
  485. {block:Description}<p>{Description}</p>{/block:Description}
  486. </div>
  487.  
  488. {block:IfUpdatesTab}
  489. <div id="updates-lights">
  490. <img src="http://static.tumblr.com/yxfeliq/nMNnvhlq4/dontbrag-lights.png">
  491. <div id="hover-1">
  492. <div id="inner-1">
  493. {text:Updates Tab 1}
  494. </div>
  495. </div>
  496. <div id="hover-2">
  497. <div id="inner-2">
  498. {text:Updates Tab 2}
  499. </div>
  500. </div>
  501. <div id="hover-3">
  502. <div id="inner-3">
  503. {text:Updates Tab 3}
  504. </div>
  505. </div>
  506. </div>
  507. {/block:IfUpdatesTab}
  508.  
  509. <div id="quote">
  510. <span style="color:{color:Accent};">❝</span> {text:Quote} <span style="color:{color:Accent};">❞</span>
  511. </div>
  512.  
  513. <div id="posts" class="posts-{select:Columns}">
  514. {block:Posts}
  515. <article>
  516. {block:Text}
  517. <div class="text-post">
  518. {block:Title}<h2>{Title}</h2>{/block:Title}
  519. {Body}
  520. </div>
  521. {block:IndexPage}
  522. <div class="other_perma">
  523. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  524. </div>
  525. {/block:IndexPage}
  526. {/block:Text}
  527.  
  528. {block:Photo}
  529. <div class="photo-post">
  530. {block:IndexPage}
  531. <div class="photo-mask">
  532. <div class="photo-info"><a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a></div>
  533. </div>
  534. <img src="{PhotoURL-250}">
  535. {/block:IndexPage}
  536. {block:PermalinkPage}
  537. <img src="{PhotoURL-500}">
  538. {block:Caption}{Caption}{/block:Caption}
  539. {/block:PermalinkPage}
  540. </div>
  541. {/block:Photo}
  542.  
  543. {block:Photoset}
  544. <div class="photo-post">
  545. {block:IndexPage}
  546. <div class="photo-mask">
  547. <div class="photo-info"><a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a></div>
  548. </div>
  549. {Photoset-250}
  550. {/block:IndexPage}
  551. {block:PermalinkPage}
  552. {Photoset-500}
  553. {block:Caption}{Caption}{/block:Caption}
  554. {/block:PermalinkPage}
  555. </div>
  556. {/block:Photoset}
  557.  
  558. {block:Quote}
  559. <div class="quote-post">
  560. <h2><span style="color:{color:Accent};">❝</span> {Quote} <span style="color:{color:Accent};">❞</span></h2>
  561. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  562. </div>
  563. {block:IndexPage}
  564. <div class="other_perma">
  565. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  566. </div>
  567. {/block:IndexPage}
  568. {/block:Quote}
  569.  
  570. {block:Link}
  571. <div class="link-post">
  572. <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="fa fa-angle-right"></i></a></h2>
  573. {block:Description}{Description}{/block:Description}
  574. </div>
  575. {/block:IndexPage}
  576. <div class="other_perma">
  577. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  578. </div>
  579. {/block:IndexPage}
  580. {/block:Link}
  581.  
  582. {block:Chat}
  583. <div class="chat-post">
  584. {block:Title}<h2>{Title}</h2>{/block:Title}
  585. <ul class="chat-list">
  586. {block:Lines}
  587. <li class="{Alt}">
  588. {block:Label}<span class="label">{Label}</span>{/block:Label}
  589. {Line}</li>
  590. {/block:Lines}
  591. </ul>
  592. </div>
  593. {block:IndexPage}
  594. <div class="other_perma">
  595. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  596. </div>
  597. {/block:IndexPage}
  598. {/block:Chat}
  599.  
  600. {block:Audio}
  601. <div class="audio">
  602. {block:AlbumArt}
  603. <div class="album-art">
  604. <img src="{AlbumArtURL}">
  605. </div>
  606. {/block:AlbumArt}
  607. <div class="audio-info">
  608. Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  609. Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  610. Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
  611. Plays: {FormattedPlayCount}</div>
  612. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  613. </div>
  614. {block:IndexPage}
  615. <div class="other_perma">
  616. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  617. </div>
  618. {/block:IndexPage}
  619. {/block:Audio}
  620.  
  621. {block:Video}
  622. <div class="video-post">
  623. {block:IndexPage}
  624. {Video-250}
  625. {/block:IndexPage}
  626. {block:PermalinkPage}
  627. {Video-500}
  628. {block:Caption}{Caption}{/block:Caption}
  629. {/block:PermalinkPage}
  630. </div>
  631. {block:IndexPage}
  632. <div class="other_perma">
  633. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;⟡&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  634. </div>
  635. {/block:IndexPage}
  636. {/block:Video}
  637.  
  638. {block:PermalinkPage}
  639.  
  640. {block:PostNotes}
  641. <div id="notes">
  642. {PostNotes-16}
  643. </div>
  644. {/block:PostNotes}
  645. {/block:PermalinkPage}
  646.  
  647. </article>
  648. {block:PermalinkPage}
  649.  
  650. <div class="extra-info">
  651. {block:Date}<i class="fa fa-clock-o"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
  652. {block:NoteCount}<br><i class="fa fa-files-o"></i> {NoteCount}{/block:NoteCount}
  653. {block:RebloggedFrom}<br><i class="fa fa-retweet"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  654. {block:ContentSource}<br><i class="fa fa-copyright"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  655. {block:HasTags}<br><i class="fa fa-tag"></i> {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}
  656. </div>
  657. {/block:PermalinkPage}
  658. {/block:Posts}
  659. </div>
  660.  
  661. {block:Pagination}
  662. <div class="pagination" style="visibility:hidden;">
  663. {block:PreviousPage}
  664. <a href="{PreviousPage}">previous</a>
  665. {/block:PreviousPage}
  666. {block:NextPage}
  667. <a href="{NextPage}" id="next">next</a>
  668. {/block:NextPage}
  669. </div>
  670. {/block:Pagination}
  671. <div class="credit">
  672. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  673. </div>
  674. {block:IndexPage}
  675. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  676. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  677. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  678. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  679. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  680. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  681. <script>
  682. (function () {
  683. var $tumblelog = $('#posts');
  684. $tumblelog.imagesLoaded(function () {
  685. $tumblelog.masonry({
  686. itemSelector: 'article',
  687. isAnimated:true,
  688. columnWidth:250,
  689. gutterWidth:20,
  690. });
  691. });
  692. $tumblelog.infinitescroll({
  693. navSelector : "div.pagination",
  694. nextSelector : ".pagination a#next",
  695. itemSelector : "article",
  696. loading: {
  697. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  698. img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
  699. msg: null,
  700. msgText: ""
  701. },
  702. },
  703.  
  704. function( newElements ) {
  705. var $newElems = $(newElements)
  706. $newElems.hide();
  707. $newElems.imagesLoaded(function(){
  708. $tumblelog.masonry( 'appended', $newElems, {
  709. isAnimated: true,
  710. animationOptions: {
  711. duration: 250,
  712. easing: 'linear',
  713. queue: false
  714. }
  715. },
  716. function(){
  717. $newElems.fadeIn('slow');
  718. }
  719. );
  720. });
  721. });
  722. })();
  723. </script>
  724. {/block:IndexPage}
  725. <div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5091840";
  726. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  727. fhs.src = "http://freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  728. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  729. </script>
  730. </div>
  731. <!--/////////End Masonry//////////-->
  732.  
  733. </body>
  734. </html>
Advertisement
Add Comment
Please, Sign In to add comment