API tools faq
paste
Advertisement
feiinho

theme 35

feiinho
Jul 10th, 2018
456
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.15 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2.  
  3. <!---------------------------------------------------------------------
  4.  
  5.  
  6.  
  7.  
  8. THEME 35 - MADE BY YEOLI.TUMBLR.COM
  9.  
  10.  
  11.  
  12.  
  13. -- Credits --
  14. masonry : masonry.desandro.com
  15. infinite scroll : infinite-scroll.com
  16. icon font : pixeden.com/icon-fonts/stroke-7-icon-font-set
  17. video resize : shythemes.tumblr.com/post/134536748863/
  18.  
  19.  
  20.  
  21.  
  22. ---------------------------------------------------------------------->
  23.  
  24. <head>
  25.  
  26. <meta charset="utf-8">
  27. <title>{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}
  31. <meta name="description" content="{MetaDescription}">
  32. {/block:Description}
  33.  
  34. {block:Hidden}
  35. <meta name="color:Background" content="#f9f9f9"/>
  36. <meta name="color:Post Bg" content="#ffffff"/>
  37. <meta name="color:Borders" content="#eaeaea"/>
  38. <meta name="color:Text" content="#abadad"/>
  39. <meta name="color:Bold Text" content="#88b3b3"/>
  40. <meta name="color:Italic Text" content="#88b3b3"/>
  41. <meta name="color:Links" content="#333333"/>
  42. <meta name="color:Links Hover" content="#88b3b3"/>
  43. <meta name="color:Permalink Text" content="#ffffff"/>
  44. <meta name="color:Permalink Bg" content="#000000"/>
  45. <meta name="color:Header Navigation" content="#333333"/>
  46. <meta name="color:Description Text" content="#abadad"/>
  47. <meta name="color:Description Bg" content="#f9f9f9"/>
  48. <meta name="color:Tooltip Text" content="#ffffff"/>
  49. <meta name="color:Tooltip Bg" content="#000000"/>
  50. <meta name="color:Scrollbar Bg" content="#ffffff"/>
  51. <meta name="color:Scrollbar Border" content="#bbbbbb"/>
  52. <meta name="color:Scrollbar Hover" content="#000000"/>
  53.  
  54. <meta name="if:Custom Tumblr Controls" content="1"/>
  55. <meta name="if:Show Post Info" content="1"/>
  56. <meta name="if:Infinite Scroll" content="0"/>
  57. <meta name="if:Infinite Scroll with Load More Button" content="1"/>
  58.  
  59. <meta name="image:Background Image" content=""/>
  60. <meta name="if:Background Image Repeat" content="1"/>
  61. <meta name="if:Background Image Stretch" content="0"/>
  62. <meta name="text:Background Image Positioning" content="Center"/>
  63.  
  64. <meta name="text:Font Size" content="11px"/>
  65. <meta name="text:Font Name" content="Open Sans"/>
  66. <meta name="text:Custom Web Font URL" content="https://fonts.googleapis.com/css?family=Open+Sans:400,700"/>
  67. <meta name="text:Enlarge nth Post" content="7n"/>
  68. <meta name="text:Number of Columns" content="3"/>
  69. <meta name="text:Post Width" content="160"/>
  70. <meta name="text:Post Margins Size" content="20"/>
  71. <meta name="text:Post Paddings Size" content="20"/>
  72. <meta name="text:Border Radius" content="0"/>
  73.  
  74. <meta name="text:Link 1" content="Link 1"/>
  75. <meta name="text:Link 1 URL" content=""/>
  76. <meta name="text:Link 2" content="Link 2"/>
  77. <meta name="text:Link 2 URL" content=""/>
  78. <meta name="text:Link 3" content="Link 3"/>
  79. <meta name="text:Link 3 URL" content=""/>
  80. <meta name="text:Link 4" content="Link 4"/>
  81. <meta name="text:Link 4 URL" content="">
  82. <meta name="text:Link 5" content="Link 5"/>
  83. <meta name="text:Link 5 URL" content=""/>
  84. <meta name="text:Link 6" content="Link 6"/>
  85. <meta name="text:Link 5 URL" content=""/>
  86. {/block:Hidden}
  87.  
  88. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kmw8hta/bN0oysnob/pe-icon-7-stroke.css"/>
  89.  
  90. <style>
  91.  
  92.  
  93.  
  94.  
  95. /***** FONT FAMILY ****/
  96.  
  97. @import url('{text:Custom Web Font URL}');
  98.  
  99. body {
  100. font-family: '{text:Font Name}', sans-serif;
  101. font-size: {text:Font Size};
  102. }
  103.  
  104. .header, .tags, #s-m-t-tooltip {
  105. font-size: 9px;
  106. }
  107.  
  108. .description, .note-no, .p-tag {
  109. font-size: 10px;
  110. }
  111.  
  112. .time {
  113. font-size: 13px;
  114. }
  115.  
  116. /*************************/
  117.  
  118.  
  119.  
  120.  
  121. ::-webkit-scrollbar {
  122. width: 7px;
  123. height: 7px;
  124. background-color: {color:Scrollbar Bg};
  125. }
  126.  
  127. ::-webkit-scrollbar-button {
  128. width: 0px;
  129. height: 0px;
  130. }
  131.  
  132. ::-webkit-scrollbar-thumb {
  133. border-radius: 5px;
  134. background-color: {color:Scrollbar Bg};
  135. border: 1px solid {color:Scrollbar Border};
  136. }
  137.  
  138. ::-webkit-scrollbar-thumb:hover {
  139. border: 1px solid {color:Scrollbar Hover};
  140. }
  141.  
  142. ::-webkit-scrollbar-thumb:active {
  143. background-color: {color:Scrollbar Hover};
  144. border: 1px solid {color:Scrollbar Bg};
  145. }
  146.  
  147. ::-webkit-scrollbar-corner {
  148. background: transparent;
  149. }
  150.  
  151. #tumblr_controls, .tmblr-iframe{
  152. {block:IfCustomTumblrControls}
  153. {block:IndexPage}display: none!important;{/block:IndexPage}
  154. {/block:IfCustomTumblrControls}
  155. position: fixed!important;
  156. z-index: 99999!important;
  157. top: 2px!important;
  158. right: 3%!important;
  159. }
  160.  
  161. *{
  162. margin: 0;
  163. padding: 0;
  164. box-sizing: border-box;
  165. }
  166.  
  167. body {
  168. cursor: default;
  169. word-wrap: break-word;
  170. text-align: center;
  171. color: {color:Text};
  172. background-color: {color:Background};
  173. }
  174.  
  175. a, a:link, a:active, a:visited {
  176. outline: none;
  177. text-decoration: none;
  178. color: {color:Links};
  179. -webkit-transition: all 0.3s linear;
  180. -moz-transition: all 0.3s linear;
  181. -o-transition: all 0.3s linear;
  182. transition: all 0.3s linear;
  183. }
  184.  
  185. a:hover {
  186. text-decoration: none;
  187. color: {color:Links Hover};
  188. }
  189.  
  190. p {
  191. display: block;
  192. margin: 1em 0;
  193. }
  194.  
  195. img { max-width: 100%; }
  196. b, strong { font-weight: bold; color: {color:Bold Text}; }
  197. i, em { color: {color:Italic Text}; }
  198.  
  199. h1, h2, h3, h4, h5, h6 {
  200. margin: 10px 0;
  201. font-weight: bold;
  202. line-height: 1em;
  203. color: {color:Bold Text};
  204. }
  205.  
  206. h1 { font-size: 1.575em; }
  207. h2 { font-size: 1.500em; }
  208. h3 { font-size: 1.375em; }
  209. h4 { font-size: 1.275em; }
  210. h5 { font-size: 1.150em; }
  211. h6 { font-size: 1.000em; }
  212.  
  213. a h1, a h2, a h3, a h4, a h5, a h6 {
  214. color: {color:Links};
  215. }
  216.  
  217. a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6 {
  218. color: {color:Links Hover};
  219. }
  220.  
  221. blockquote {
  222. margin: 10px 10%;
  223. padding: 5px 10px;
  224. text-align: left;
  225. border-left: 1px dashed {color:Italic Text};
  226. }
  227.  
  228. #grid {
  229. position: relative;
  230. width: 100%;
  231. height: 100vh;
  232. display: grid;
  233. grid-template-columns: 160px calc(100% - 160px);
  234. grid-template-rows: 60px calc(100% - 140px) 80px;
  235. grid-template-areas: "sidebar header"
  236. "sidebar main"
  237. "search main";
  238. }
  239.  
  240. #header {
  241. position: relative;
  242. grid-area: header;
  243. background-color: {color:Post Bg};
  244. border-bottom: 1px solid {color:Borders};
  245. }
  246.  
  247. .tumblr-ctrl {
  248. position: relative;
  249. z-index: 100;
  250. grid-area: header;
  251. justify-self: end;
  252. align-self: center;
  253. margin-right: 4%;
  254. list-style-type: none;
  255. display: flex;
  256. }
  257.  
  258. .tumblr-ctrl a {
  259. display: block;
  260. margin-left: 6px;
  261. width: 24px;
  262. font-size: 15px;
  263. }
  264.  
  265. .status-bar { width: 150px; }
  266.  
  267. .tumblr-ctrl a, .status-bar {
  268. height: 24px;
  269. line-height: 22px;
  270. border-radius: calc({text:Border Radius}px / 1.5);
  271. color: {color:Description Text};
  272. background-color: {color:Description Bg};
  273. border: 1px solid {color:Borders};
  274. }
  275.  
  276. .slide-toggle { display: none; }
  277.  
  278. .slidemenu {
  279. position: relative;
  280. z-index: 99;
  281. grid-area: header;
  282. justify-self: start;
  283. overflow: hidden;
  284. margin-left: 4%;
  285. width: 213px;
  286. height: 60px;
  287. text-transform: uppercase;
  288. letter-spacing: 1px;
  289. }
  290.  
  291. .slidemenu label{ display: block; float: left; }
  292.  
  293. .slidemenu label a {
  294. display: block;
  295. line-height: 59px;
  296. color: {color:Header Navigation};
  297. }
  298.  
  299. .slidemenu label a:hover {
  300. color: {color:Links Hover};
  301. }
  302.  
  303. .slide-1 { width: 42px; margin-left: 4px; }
  304. .slide-2 { width: 32px; margin-left: 10px; }
  305. .slide-3 { width: 56px; margin-left: 10px; }
  306. .slide-4 { width: 48px; margin-left: 10px; }
  307. .slider { display: block; width: 100%; height: 1px; }
  308.  
  309. .slider .bar {
  310. margin: 0;
  311. width: 50px;
  312. height: 1px;
  313. background-color: {color:Header Navigation};
  314. }
  315.  
  316. .slidemenu label, .slider .bar {
  317. -webkit-transition: all 0.3s linear;
  318. -moz-transition: all 0.3s linear;
  319. -o-transition: all 0.3s linear;
  320. transition: all 0.3s linear;
  321. -webkit-transition-delay: 0.15s;
  322. -moz-transition-delay: 0.15s;
  323. -o-transition-delay: 0.15s;
  324. transition-delay: 0.15s;
  325. }
  326.  
  327. .slidemenu input:hover ~ .slider .bar { background-color: {color:Links Hover}; transition-delay: 0s;}
  328. .slidemenu #slide-1:hover ~ .slider .bar { margin-left: 0px; }
  329. .slidemenu #slide-2:hover ~ .slider .bar { margin-left: 47px; }
  330. .slidemenu #slide-3:hover ~ .slider .bar { margin-left: 101px; }
  331. .slidemenu #slide-4:hover ~ .slider .bar { margin-left: 163px; }
  332.  
  333. #sidebar {
  334. position: relative;
  335. grid-area: sidebar;
  336. overflow-y: auto;
  337. background-color: {color:Post Bg};
  338. border-right: 1px solid {color:Borders};
  339. {block:IndexPage}
  340. {block:IfCustomTumblrControls}
  341. padding: 30px 20px 40px 20px;
  342. {block:IfInfiniteScroll}
  343. padding: 30px 20px 10px 20px;
  344. {/block:IfInfiniteScroll}
  345. {block:IfInfiniteScrollwithLoadMoreButton}
  346. padding: 30px 20px 10px 20px;
  347. {/block:IfInfiniteScrollwithLoadMoreButton}
  348. {/block:IfCustomTumblrControls}
  349. {block:IfNotCustomTumblrControls}
  350. padding: 30px 20px 70px 20px;
  351. {block:IfInfiniteScroll}
  352. padding: 30px 20px 40px 20px;
  353. {/block:IfInfiniteScroll}
  354. {block:IfInfiniteScrollwithLoadMoreButton}
  355. padding: 30px 20px 40px 20px;
  356. {/block:IfInfiniteScrollwithLoadMoreButton}
  357. {/block:IfNotCustomTumblrControls}
  358. {/block:IndexPage}
  359. {block:PermalinkPage}
  360. padding: 30px 20px 10px 20px;
  361. {/block:PermalinkPage}
  362. }
  363.  
  364. .line {
  365. margin: 29px 0 0 60px;
  366. width: 58px;
  367. height: 1px;
  368. background-color: {color:Borders};
  369. }
  370.  
  371. .blog-avatar {
  372. overflow: hidden;
  373. margin-top: -20px;
  374. width: 40px;
  375. height: 40px;
  376. padding: 6px;
  377. border-radius: {text:Border Radius}px;
  378. border: 1px solid {color:Borders};
  379. }
  380.  
  381. .blog-avatar img {
  382. border-radius: calc({text:Border Radius}px / 1.5);
  383. }
  384.  
  385. .title {
  386. margin-top: 30px;
  387. font-size: 1.45em;
  388. font-weight: bold;
  389. line-height: 1.05em;
  390. color: {color:Bold Text};
  391. }
  392.  
  393. .desc {
  394. padding: 10px;
  395. line-height: 1.15em;
  396. border-radius: {text:Border Radius}px;
  397. color: {color:Description Text};
  398. background-color: {color:Description Bg};
  399. border: 1px solid {color:Borders};
  400. }
  401.  
  402. .desc a { color: {color:Bold Text}; }
  403. .desc a:hover { color: {color:Links}; }
  404.  
  405. .links {
  406. overflow: hidden;
  407. margin-top: 30px;
  408. list-style-type: none;
  409. text-align: right;
  410. text-transform: uppercase;
  411. letter-spacing: 1px;
  412. line-height: 1.125em;
  413. }
  414.  
  415. .links li { display: block; margin: 6px 0; }
  416.  
  417. .links li a {
  418. display: block;
  419. position: relative;
  420. padding: 6px 5px;
  421. color: {color:Text};
  422. }
  423.  
  424. .links li a:hover {
  425. color: {color:Links Hover};
  426. }
  427.  
  428. .links li a:before {
  429. position: absolute;
  430. bottom: 0;
  431. left: 0;
  432. width: 100%;
  433. height: 1px;
  434. content: '.';
  435. color: transparent;
  436. background-color: {color:Borders};
  437. }
  438.  
  439. .links li a:after {
  440. position: absolute;
  441. bottom: 0;
  442. left: -15%;
  443. opacity: 0;
  444. width: 25%;
  445. height: 1px;
  446. content: '.';
  447. color: transparent;
  448. background-color: {color:Header Navigation};
  449. -webkit-transition: all 0.3s linear;
  450. -moz-transition: all 0.3s linear;
  451. -o-transition: all 0.3s linear;
  452. transition: all 0.3s linear;
  453. -webkit-transition-delay: 0.15s;
  454. -moz-transition-delay: 0.15s;
  455. -o-transition-delay: 0.15s;
  456. transition-delay: 0.15s;
  457. }
  458.  
  459. .links li:hover a:after {
  460. left: 70%;
  461. opacity: 1;
  462. background-color: {color:Links Hover};
  463. -webkit-transition-delay: 0s;
  464. -moz-transition-delay: 0s;
  465. -o-transition-delay: 0s;
  466. transition-delay: 0s;
  467. }
  468.  
  469. .status-side {
  470. {block:IfNotInfiniteScroll}bottom: 110px;{/block:IfNotInfiniteScroll}
  471. {block:IfInfiniteScroll}bottom: 80px;{/block:IfInfiniteScroll}
  472. {block:IfInfiniteScrollwithLoadMoreButton}bottom: 80px;{/block:IfInfiniteScrollwithLoadMoreButton}
  473. position: fixed;
  474. z-index: 97;
  475. left: 0px;
  476. width: 160px;
  477. height: 30px;
  478. line-height: 29px;
  479. color: {color:Description Text};
  480. background-color: {color:Description Bg};
  481. border-top: 1px solid {color:Borders};
  482. border-right: 1px solid {color:Borders};
  483. }
  484.  
  485. .pagi {
  486. {block:IfInfiniteScrollwithLoadMoreButton}display: none;{/block:IfInfiniteScrollwithLoadMoreButton}
  487. overflow: hidden;
  488. list-style-type: none;
  489. position: fixed;
  490. z-index: 98;
  491. left: 0px;
  492. bottom: 80px;
  493. width: 160px;
  494. height: 30px;
  495. line-height: 29px;
  496. color: {color:Text};
  497. background-color: {color:Post Bg};
  498. border-top: 1px solid {color:Borders};
  499. }
  500.  
  501. .pagi-button {
  502. overflow: hidden;
  503. position: relative;
  504. z-index: 1;
  505. float: left;
  506. width: 80px;
  507. height: 30px;
  508. background-color: {color:Post Bg};
  509. border-right: 1px solid {color:Borders};
  510. }
  511.  
  512. .pagi-button span { opacity: 0.5; }
  513.  
  514. .pagi-link {
  515. position: absolute;
  516. z-index: 2;
  517. width: 80px;
  518. height: 30px;
  519. color: {color:Text};
  520. background-color: {color:Post Bg};
  521. }
  522.  
  523. .pagi-link:hover {
  524. color: {color:Links Hover};
  525. background-color: {color:Description Bg};
  526. }
  527.  
  528. #search {
  529. position: relative;
  530. grid-area: search;
  531. background-color: {color:Post Bg};
  532. border-top: 1px solid {color:Borders};
  533. border-right: 1px solid {color:Borders};
  534. }
  535.  
  536. .search {
  537. position: relative;
  538. z-index: 99;
  539. grid-area: search;
  540. justify-self: center;
  541. align-self: center;
  542. overflow: hidden;
  543. height: 24px;
  544. width: 120px;
  545. border-radius: calc({text:Border Radius}px / 1.5);
  546. border: 1px solid {color:Borders};
  547. }
  548.  
  549. .search input {
  550. overflow: hidden;
  551. padding: 0;
  552. outline: 0;
  553. border: 0;
  554. }
  555.  
  556. #smb {
  557. position: relative;
  558. float: right;
  559. cursor: pointer;
  560. width: 25px;
  561. height: 24px;
  562. font-size: 15px;
  563. font-family: 'Pe-icon-7-stroke';
  564. color: {color:Description Text};
  565. background-color: {color:Description Bg};
  566. border-left: 1px solid {color:Borders};
  567. }
  568.  
  569. .sb {
  570. float: left;
  571. height: 24px;
  572. width: 93px;
  573. text-align: left;
  574. text-indent: 10px;
  575. color: {color:Text};
  576. }
  577.  
  578. #main {
  579. position: relative;
  580. z-index: 0;
  581. grid-area: main;
  582. overflow: auto;
  583. {block:IfBackgroundImageRepeat}background-repeat: repeat;{/block:IfBackgroundImageRepeat}
  584. {block:IfNotBackgroundImageRepeat}background-repeat: no-repeat;{/block:IfNotBackgroundImageRepeat}
  585. {block:IfBackgroundImageStretch}-webkit-background-size: cover; background-size: cover;{/block:IfBackgroundImageStretch}
  586. background-position: {text:Background Image Positioning};
  587. {block:IfBackgroundImageImage}background-image: url('{image:Background Image}');{/block:IfBackgroundImageImage}
  588. }
  589.  
  590. #container { margin: 0px auto; padding: 80px 0; }
  591. .container { position: relative; list-style-type: none; }
  592.  
  593. #container, .container {
  594. {block:IndexPage}
  595. width: calc({text:Post Width}px * {text:Number of Columns} + {text:Post Margins Size}px * ({text:Number of Columns} - 1));
  596. {/block:IndexPage}
  597. {block:PermalinkPage}
  598. width: calc(402px + {text:Post Paddings Size}px * 2);
  599. {/block:PermalinkPage}
  600. }
  601.  
  602. .clear {
  603. content: '';
  604. clear: both;
  605. display: table;
  606. }
  607.  
  608. {block:IndexPage}.container.are-images-unloaded { opacity: 0; }{/block:IndexPage}
  609. .col-size { width: {text:Post Width}px; }
  610. .gutter-size { width: {text:Post Margins Size}px; }
  611.  
  612. .posts {
  613. position: relative;
  614. float: left;
  615. overflow: hidden;
  616. {block:IndexPage}
  617. margin-bottom: {text:Post Margins Size}px;
  618. width: {text:Post Width}px;
  619. height: {text:Post Width}px;
  620. {/block:IndexPage}
  621. {block:PermalinkPage}
  622. width: calc(402px + {text:Post Paddings Size}px * 2);
  623. margin-bottom: -1px;
  624. {/block:PermalinkPage}
  625. border-radius: {text:Border Radius}px;
  626. border: 1px solid {color:Borders};
  627. }
  628.  
  629. .posts:nth-child({text:Enlarge nth Post}) {
  630. width: calc({text:Post Width}px * 2 + {text:Post Margins Size}px);
  631. height: calc({text:Post Width}px * 2 + {text:Post Margins Size}px);
  632. }
  633.  
  634. .post {
  635. position: relative;
  636. overflow: hidden;
  637. line-height: 1.125em;
  638. {block:IndexPage}
  639. width: calc({text:Post Width}px - 2px);
  640. height: calc({text:Post Width}px - 2px);
  641. {/block:IndexPage}
  642. {block:PermalinkPage}
  643. width: calc(400px + {text:Post Paddings Size} * 2 );
  644. {/block:PermalinkPage}
  645. background-color: {color:Post Bg};
  646. border: {text:Post Paddings Size}px solid {color:Post Bg};
  647. }
  648.  
  649. .posts:nth-child({text:Enlarge nth Post}) .post{
  650. width: calc({text:Post Width}px * 2 + {text:Post Margins Size}px - 2px);
  651. height: calc({text:Post Width}px * 2 + {text:Post Margins Size}px - 2px);
  652. }
  653.  
  654. .post a, .desc a { position: relative; display: inline-block; }
  655.  
  656. .post a:after, .desc a:after {
  657. position: absolute;
  658. bottom: 0;
  659. left: 0;
  660. opacity: 0;
  661. width: 0;
  662. height: 1px;
  663. content: '.';
  664. color: transparent;
  665. background-color: {color:Links Hover};
  666. -webkit-transition: all 0.3s linear;
  667. -moz-transition: all 0.3s linear;
  668. -o-transition: all 0.3s linear;
  669. transition: all 0.3s linear;
  670. }
  671.  
  672. .post a:hover:after, .desc a:hover:after {
  673. opacity: 1;
  674. width: 100%;
  675. }
  676.  
  677. .post ol, .post ul { margin: 10px 10%; text-align: left; }
  678. .post ol{ counter-reset: item; }
  679. .post ol li { display: block; text-indent: -45px; margin: 0.4em 0; }
  680.  
  681. .post ol li::before {
  682. content: counter(item) ". ";
  683. counter-increment: item;
  684. display: inline-block;
  685. margin-right: 5px;
  686. width: 40px;
  687. text-align: right;
  688. color: {color:Bold Text};
  689. }
  690.  
  691. .post ul{ list-style: none; }
  692. .post ul li { margin: 0.4em 0; }
  693.  
  694. .post ul li:before{
  695. content: '';
  696. display: inline-block;
  697. position: absolute;
  698. margin-left: -17px;
  699. width: 10px;
  700. height: 0.5em;
  701. border-bottom: 1px solid {color:Bold Text};
  702. }
  703.  
  704. .overflow {
  705. {block:IndexPage}
  706. position: absolute;
  707. z-index: 5;
  708. bottom: -10%;
  709. width: 100%;
  710. height: 10%;
  711. background-color: {color:Post Bg};
  712. box-shadow: 0 0 30px 10px #fff;
  713. {/block:IndexPage}
  714. }
  715.  
  716. .center {
  717. {block:IndexPage}
  718. width: 100%;
  719. margin: 50%;
  720. transform: translate(-50%,-50%);
  721. {/block:IndexPage}
  722. }
  723.  
  724. .entry { padding: 10%; max-height: 100%; }
  725.  
  726. .chat { margin-bottom: 5px; }
  727. .chat span {
  728. display: block;
  729. font-weight: bold;
  730. color: {color:Bold Text};
  731. }
  732.  
  733. .vid {
  734. {block:IndexPage}
  735. width: 100%;
  736. margin: 50%;
  737. float: left;
  738. transform: translate(-50%,-50%);
  739. {/block:IndexPage}
  740. }
  741.  
  742. .instagram-media { {block:IndexPage}transform: translate(0,36px);{/block:IndexPage}}
  743. .soundcloud_audio_player { margin-top: 2px; }
  744.  
  745. .audio {
  746. {block:IndexPage}
  747. width: 100%;
  748. height: 100%;
  749. {/block:IndexPage}
  750. {block:PermalinkPage}
  751. width: 400px;
  752. height: 400px;
  753. {/block:PermalinkPage}
  754. }
  755.  
  756. .album-art {
  757. position: relative;
  758. width: 100%;
  759. height: 100%;
  760. margin-bottom: -100%;
  761. }
  762.  
  763. .album-art img { width: 100%; }
  764.  
  765. .player {
  766. overflow: hidden;
  767. position: relative;
  768. z-index: 5;
  769. margin: 50%;
  770. width: 33px;
  771. height: 32px;
  772. background: black;
  773. border-radius: {text:Border Radius}px;
  774. {block:IndexPage}
  775. transform: translate(-50%,-50%);
  776. {/block:IndexPage}
  777. {block:PermalinkPage}
  778. transform: translate(-50%,-50%) scale(1.5,1.5);
  779. {/block:PermalinkPage}
  780. }
  781.  
  782. .posts:nth-child({text:Enlarge nth Post}) .player {
  783. transform: translate(-50%,-50%) scale(1.3,1.3);
  784. }
  785.  
  786. .tumblr_audio_player {
  787. filter: invert(100%);
  788. width: 32px;
  789. margin-top: 2px;
  790. margin-left: -3px;
  791. }
  792.  
  793. .ask-border {
  794. position: relative;
  795. z-index: 1;
  796. margin: 20px 0 -21px 0;
  797. width: 100%;
  798. height: 1px;
  799. background-color: {color:Borders};
  800. }
  801.  
  802. .ask img {
  803. overflow: hidden;
  804. position: relative;
  805. z-index: 2;
  806. width: 40px;
  807. padding: 6px;
  808. border-radius: {text:Border Radius}px;
  809. background-color: {color:Post Bg};
  810. border: 1px solid {color:Borders};
  811. }
  812.  
  813. .ask a { color: {color:Bold Text}; }
  814. .ask a:hover { color: {color:Links}; }
  815. .ask { border-bottom: 1px solid {color:Borders}; }
  816.  
  817. .ask {
  818. position: relative;
  819. padding-bottom: 20px;
  820. margin-bottom: 20px;
  821. }
  822.  
  823. .permalink {
  824. overflow: hidden;
  825. position: absolute;
  826. z-index: 10;
  827. opacity: 0;
  828. top: 0;
  829. right: 6%;
  830. width: 86px;
  831. border-radius: calc({text:Border Radius}px / 1.5);
  832. -webkit-transition: all 0.3s ease-in-out;
  833. -moz-transition: all 0.3s ease-in-out;
  834. -o-transition: all 0.3s ease-in-out;
  835. transition: all 0.3s ease-in-out;
  836. }
  837.  
  838. .post:hover .permalink {
  839. top: 6%;
  840. opacity: 1;
  841. }
  842.  
  843. .permalink a {
  844. float: left;
  845. margin-left: 1px;
  846. padding: 4px;
  847. width: 28px;
  848. height: 28px;
  849. line-height: 20px;
  850. font-size: 14px;
  851. color: {color:Permalink Text};
  852. background-color: {color:Permalink Bg};
  853. -webkit-transition: all 0s;
  854. -moz-transition: all 0s;
  855. -o-transition: all 0s;
  856. transition: all 0s;
  857. }
  858.  
  859. .permalink a:hover {
  860. color: {color:Links Hover};
  861. }
  862.  
  863. .lkbn .like_button {
  864. position: absolute;
  865. z-index: 6;
  866. opacity: 0;
  867. {block:PermalinkPage}display: none;{/block:PermalinkPage}
  868. }
  869.  
  870. .lkbn .like_button.liked + .likeb { font-weight: bold; color: #cc0000; }
  871.  
  872. .post-info {
  873. cursor: default;
  874. overflow: hidden;
  875. position: absolute;
  876. z-index: 10;
  877. opacity: 0;
  878. bottom: 0;
  879. right: 6%;
  880. padding: 4px;
  881. width: 28px;
  882. height: 28px;
  883. border-radius: calc({text:Border Radius}px / 1.5);
  884. color: {color:Permalink Text};
  885. background-color: {color:Permalink Bg};
  886. transition: all 0.5s ease-in-out;
  887. -webkit-transition: all 0.5s ease-in-out;
  888. -moz-transition: all 0.5s ease-in-out;
  889. -o-transition: all 0.5s ease-in-out;
  890. transition: all 0.5s ease-in-out;
  891. }
  892.  
  893. .post:hover .post-info {
  894. bottom: 6%;
  895. opacity: 1;
  896. -webkit-transition: all 0.3s ease-in-out;
  897. -moz-transition: all 0.3s ease-in-out;
  898. -o-transition: all 0.3s ease-in-out;
  899. transition: all 0.3s ease-in-out;
  900. }
  901.  
  902. .post:hover .post-info:hover {
  903. bottom: 0;
  904. right: 0;
  905. width: 100%;
  906. height: 100%;
  907. border-radius: 0px;
  908. -webkit-transition: all 0.5s ease-in-out;
  909. -moz-transition: all 0.5s ease-in-out;
  910. -o-transition: all 0.5s ease-in-out;
  911. transition: all 0.5s ease-in-out;
  912. }
  913.  
  914. .info-icon {
  915. width: 20px;
  916. height: 20px;
  917. line-height: 20px;
  918. font-size: 13px;
  919. -webkit-transition: all 0.3s ease-in-out;
  920. -moz-transition: all 0.3s ease-in-out;
  921. -o-transition: all 0.3s ease-in-out;
  922. transition: all 0.3s ease-in-out;
  923. }
  924.  
  925. .post-info:hover .info-icon {
  926. margin-top: -20px;
  927. -webkit-transition: all 0s;
  928. -moz-transition: all 0s;
  929. -o-transition: all 0s;
  930. transition: all 0s;
  931. }
  932.  
  933. .info {
  934. overflow: hidden;
  935. opacity: 0;
  936. max-height: 100%;
  937. padding: 2px 0;
  938. -webkit-transition: all 0.5s ease-in-out;
  939. -moz-transition: all 0.5s ease-in-out;
  940. -o-transition: all 0.5s ease-in-out;
  941. transition: all 0.5s ease-in-out;
  942. }
  943.  
  944. .post-info:hover .info {
  945. opacity: 1;
  946. -webkit-transition-delay: 0.4s;
  947. -moz-transition-delay: 0.4s;
  948. -o-transition-delay: 0.4s;
  949. transition-delay: 0.4s;
  950. }
  951.  
  952. .time {
  953. margin-top: 10px;
  954. font-weight: bold;
  955. text-transform: uppercase;
  956. }
  957.  
  958. .note-no {
  959. font-style: italic;
  960. }
  961.  
  962. .tags { margin: 14px 0 4px 0; }
  963.  
  964. .tags a {
  965. display: inline;
  966. line-height: 1em;
  967. color: {color:Permalink Text};
  968. -webkit-transition: all 0s;
  969. -moz-transition: all 0s;
  970. -o-transition: all 0s;
  971. transition: all 0s;
  972. }
  973.  
  974. .tags a:hover { color: {color:Links Hover}; }
  975. .tags span, .p-tag span { display: inline; vertical-align: middle; }
  976.  
  977. .p-tag { margin: 20px 0 5px 0; }
  978. .p-tag a { color: {color:Text}; }
  979. .p-tag a:hover { color: {color:Links Hover}; }
  980.  
  981. .source { margin-top: 25px; }
  982.  
  983. .source a{
  984. display: inline-block;
  985. margin: 1px 6px;
  986. width: 24px;
  987. height: 24px;
  988. line-height: 22px;
  989. font-size: 16px;
  990. border-radius: calc({text:Border Radius}px / 1.5);
  991. color: {color:Description Text};
  992. background-color: {color:Description Bg};
  993. border: 1px solid {color:Borders};
  994. }
  995.  
  996. ol.notes {
  997. list-style-type: none;
  998. margin: 0;
  999. padding: 0;
  1000. text-align: center;
  1001. }
  1002.  
  1003. ol.notes li:before { display: none; }
  1004. ol.notes li { margin: 6px 0; text-indent: 0;}
  1005.  
  1006. ol.notes img.avatar {
  1007. overflow: hidden;
  1008. display: inline;
  1009. margin-right: 10px;
  1010. padding: 4px;
  1011. width: 22px;
  1012. height: 22px;
  1013. vertical-align: middle;
  1014. border-radius: {text:Border Radius}px;
  1015. background-color: {color:Description Bg};
  1016. border: 1px solid {color:Borders};
  1017. }
  1018.  
  1019. .pagination { display: none; }
  1020. .page-load-status { display: none; margin: 40px auto -20px auto; }
  1021.  
  1022. .load-more-button {
  1023. cursor: pointer;
  1024. position: relative;
  1025. overflow: hidden;
  1026. margin: 40px auto 0 auto;
  1027. width: 90px;
  1028. height: 26px;
  1029. line-height: 24px;
  1030. border-radius: calc({text:Border Radius}px / 1.5);
  1031. color: {color:Text};
  1032. background-color: {color:Post Bg};
  1033. border: 1px solid {color:Borders};
  1034. }
  1035.  
  1036. #totop {
  1037. cursor: pointer;
  1038. display: none;
  1039. position: fixed;
  1040. z-index: 99999;
  1041. overflow: hidden;
  1042. width: 30px;
  1043. height: 30px;
  1044. bottom: 20px;
  1045. right: 28px;
  1046. font-size: 28px;
  1047. line-height: 28px;
  1048. border-radius: calc({text:Border Radius}px / 1.5);
  1049. color: {color:Text};
  1050. background-color: {color:Post Bg};
  1051. border: 1px solid {color:Borders};
  1052. }
  1053.  
  1054. #s-m-t-tooltip{
  1055. overflow: hidden;
  1056. z-index: 99999;
  1057. margin: 10px 16px;
  1058. padding: 4px 10px;
  1059. color: {color:Tooltip Text};
  1060. background-color: {color:Tooltip Bg};
  1061. border-radius: calc({text:Border Radius}px / 1.5);
  1062. }
  1063.  
  1064. .permalink a:after, .source a:after, .tags a:after, .ai:after, .notes a:after { display: none; }
  1065.  
  1066. {CustomCSS}
  1067.  
  1068. </style>
  1069. </head>
  1070. <body>
  1071.  
  1072. <div id="totop" class="pe-7s-angle-up"></div>
  1073.  
  1074. <div id="grid">
  1075.  
  1076. <div id="header"></div>
  1077.  
  1078. {block:IfCustomTumblrControls}{block:IndexPage}
  1079. <ul class="tumblr-ctrl">
  1080. {block:Pagination}
  1081. <li>
  1082. {block:IfNotInfiniteScroll}
  1083. <div class="status-bar description" style="{block:IfInfiniteScrollwithLoadMoreButton}display: none;{/block:IfInfiniteScrollwithLoadMoreButton}">Currently on page {CurrentPage}</div>
  1084. {/block:IfNotInfiniteScroll}
  1085. {block:IfInfiniteScroll}
  1086. <div class="status-bar description status" style="{block:IfInfiniteScrollwithLoadMoreButton}display: none;{/block:IfInfiniteScrollwithLoadMoreButton}">Currently on page 1</div>
  1087. {/block:IfInfiniteScroll}
  1088. {block:IfInfiniteScrollwithLoadMoreButton}
  1089. <div class="status-bar description status">Currently on page 1</div>
  1090. {/block:IfInfiniteScrollwithLoadMoreButton}
  1091. </li>
  1092. {/block:Pagination}
  1093. <li><a class="pe-7s-add-user" href="https://www.tumblr.com/follow/{Name}" title="Follow"></a></li>
  1094. <li><a class="pe-7s-comment" href="https://www.tumblr.com/message/{Name}" title="Message"></a></li>
  1095. <li><a class="pe-7s-global" href="https://www.tumblr.com/dashboard" title="Dashboard"></a></li>
  1096. </ul>
  1097. {/block:IndexPage}{/block:IfCustomTumblrControls}
  1098.  
  1099. <div class="slidemenu header">
  1100. <input type="radio" name="slideItem" id="slide-1" class="slide-toggle" checked/>
  1101. <label for="slide-1" class="slide-1"><a href="/">Home</a></label>
  1102. <input type="radio" name="slideItem" id="slide-2" class="slide-toggle"/>
  1103. <label for="slide-2" class="slide-2"><a href="/ask">Ask</a></label>
  1104. <input type="radio" name="slideItem" id="slide-3" class="slide-toggle"/>
  1105. <label for="slide-3" class="slide-3"><a href="/archive">Archive</a></label>
  1106. <input type="radio" name="slideItem" id="slide-4" class="slide-toggle"/>
  1107. <label for="slide-4" class="slide-4"><a href="https://yeoli.tumblr.com" target="_blank">Theme</a></label>
  1108. <div class="clear"></div>
  1109. <div class="slider">
  1110. <div class="bar"></div>
  1111. </div>
  1112. </div>
  1113.  
  1114. <div id="sidebar">
  1115. <div class="line"></div>
  1116. <div class="blog-avatar"><img src="{PortraitURL-40}"/></div>
  1117. <div class="title">{Title}</div>
  1118. {block:Description}<div class="desc description">{Description}</div>{/block:Description}
  1119.  
  1120. <ul class="links header">
  1121. {block:IfLink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:IfLink1}
  1122. {block:IfLink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:IfLink2}
  1123. {block:IfLink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:IfLink3}
  1124. {block:IfLink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:IfLink4}
  1125. {block:IfLink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:IfLink5}
  1126. {block:IfLink6}<li><a href="{text:Link 6 URL}">{text:Link 6}</a></li>{/block:IfLink6}
  1127. </ul>
  1128.  
  1129. {block:IndexPage}{block:Pagination}
  1130. {block:IfNotCustomTumblrControls}
  1131. <div class="status-side description">
  1132. {block:IfNotInfiniteScroll}
  1133. <div style="{block:IfInfiniteScrollwithLoadMoreButton}display: none;{/block:IfInfiniteScrollwithLoadMoreButton}">Currently on page {CurrentPage}</div>
  1134. {/block:IfNotInfiniteScroll}
  1135. {block:IfInfiniteScroll}
  1136. <div class="status" style="{block:IfInfiniteScrollwithLoadMoreButton}display: none;{/block:IfInfiniteScrollwithLoadMoreButton}">Currently on page 1</div>
  1137. {/block:IfInfiniteScroll}
  1138. {block:IfInfiniteScrollwithLoadMoreButton}
  1139. <div class="status">Currently on page 1</div>
  1140. {/block:IfInfiniteScrollwithLoadMoreButton}
  1141. </div>
  1142. {/block:IfNotCustomTumblrControls}
  1143. {block:IfNotInfiniteScroll}
  1144. <div class="pagi description">
  1145. <div class="pagi-button">
  1146. {block:PreviousPage}<a href="{PreviousPage}"><div class="pagi-link">Prev</div></a>{/block:PreviousPage}
  1147. <span>Prev</span>
  1148. </div>
  1149. <div class="pagi-button">
  1150. {block:NextPage}<a href="{NextPage}"><div class="pagi-link">Next</div></a>{/block:NextPage}
  1151. <span>Next</span>
  1152. </div>
  1153. </div>
  1154. {/block:IfNotInfiniteScroll}
  1155. {/block:Pagination}{/block:IndexPage}
  1156.  
  1157. </div>
  1158.  
  1159. <div id="search"></div>
  1160.  
  1161. <form action="/search" method="get" class="search">
  1162. <input type="text" name="q" value="{SearchQuery}" placeholder="Find..." class="sb description"/>
  1163. <input type="submit" value="&#xe618" id="smb"/>
  1164. </form>
  1165.  
  1166. <div id="main">
  1167. <div id="container">
  1168.  
  1169. <ol class="container {select:Layout} are-images-unloaded">
  1170. <div class="col-size"></div>
  1171. <div class="gutter-size"></div>
  1172.  
  1173. {block:Posts}
  1174. <li id="{PostID}" class="posts"><div class="post">
  1175.  
  1176. {block:IndexPage}{/block:Date}
  1177. <div class="permalink">
  1178. <a class="icon pe-7s-refresh" href="{ReblogURL}" target="_blank" style="margin-left: 0px; font-size: 12px"></a>
  1179. <a class="icon pe-7s-ribbon" href="{Permalink}"></a>
  1180. <a class="icon lkbn">{LikeButton color="black" size="20"}<span class="likeb pe-7s-like"></span></a>
  1181. </div>
  1182.  
  1183. {block:IfShowPostInfo}
  1184. <div class="post-info">
  1185. <div class="info-icon pe-7s-more"></div>
  1186. <div class="info center">
  1187. <div class="time">{ShortDayOfWeek} {DayOfMonth} {ShortMonth}</div>
  1188. <div class="note-no">with {NoteCountWithLabel}</div>
  1189. <div class="tags">{block:Tags}<span class="pe-7s-close"></span> <a href="{TagURL}">{Tag}</a> {/block:Tags}</div>
  1190. </div>
  1191. </div>
  1192. {/block:IfShowPostInfo}
  1193. {/block:Date}{/block:IndexPage}
  1194.  
  1195. {block:Text}
  1196. <div class="overflow"></div>
  1197. <div class="center entry">
  1198. {block:Title}<h1>{Title}</h1>{/block:Title}
  1199. {Body}
  1200. </div>
  1201. {/block:Text}
  1202.  
  1203. {block:Photo}
  1204. <div class="center">
  1205. {block:IndexPage}
  1206. <img src="{PhotoURL-500}" alt="{PhotoAlt}" style="display: block; width: 100%;"/>
  1207. {/block:IndexPage}
  1208. {block:PermalinkPage}
  1209. <a class="ai" href="/image/{PostID}" target="_blank"><img src="{PhotoURL-500}" alt="{PhotoAlt}" style="display: block; width: 100%;"/></a>
  1210. {/block:PermalinkPage}
  1211. </div>
  1212. {/block:Photo}
  1213.  
  1214. {block:Photoset}
  1215. <div class="center">
  1216. {Photoset}
  1217. </div>
  1218. {/block:Photoset}
  1219.  
  1220. {block:Video}
  1221. <div class="vid"><div class="video">
  1222. {Video-500}
  1223. </div></div>
  1224. {/block:Video}
  1225.  
  1226. {block:Quote}
  1227. <div class="overflow"></div>
  1228. <div class="center entry">
  1229. <div style="height: 8px; font-size: 32px; font-family: Arial; font-weight: normal; color: {color:Italic Text};">❝</div>
  1230. <h6><i> {Quote} </i></h6>
  1231. {block:Source}{Source}{/block:Source}
  1232. </div>
  1233. {/block:Quote}
  1234.  
  1235. {block:Link}
  1236. <div class="overflow"></div>
  1237. <div class="center entry">
  1238. <a href="{URL}" target="{Target}"><h2>{Name}</h2></a>
  1239. {block:Description}{Description}{/block:Description}
  1240. </div>
  1241. {/block:Link}
  1242.  
  1243. {block:Chat}
  1244. <div class="overflow"></div>
  1245. <div class="center entry">
  1246. {block:Title}<h2>{Title}</h2>{/block:Title}
  1247. {block:Lines}
  1248. <div class="chat">
  1249. {block:Label}<span>{Label}</span>{/block:Label}
  1250. {Line}
  1251. </div>
  1252. {/block:Lines}
  1253. </div>
  1254. {/block:Chat}
  1255.  
  1256. {block:Audio}
  1257. <div class="audio">
  1258. <div class="album-art"><img src="http://static.tumblr.com/kmw8hta/PJpoz0q0q/art.jpg"/></div>
  1259. {block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  1260. <div class="player">{AudioPlayer}</div>
  1261. </div>
  1262. {/block:Audio}
  1263.  
  1264. {block:Answer}
  1265. <div class="overflow"></div>
  1266. <div class="center entry">
  1267. <div class="ask">
  1268. <div class="ask-border"></div>
  1269. <img src="{AskerPortraitURL-40}"/>
  1270. <h6>Sent by {Asker} : </h6>
  1271. <p>{Question}</p>
  1272. </div>
  1273. <p>{Answer}</p>
  1274. </div>
  1275. {/block:Answer}
  1276.  
  1277. </div></li>
  1278.  
  1279. {block:PermalinkPage}
  1280. {block:Caption}<li class="posts"><div class="post" style="border: 20px solid {color:Post Bg};">{Caption}</li>{/block:Caption}
  1281.  
  1282. {block:Date}
  1283. <li class="posts"><div class="post" style="border: 20px solid {color:Post Bg};">
  1284. <h4>{DayOfWeek} {DayOfMonth}{DayOfMonthSuffix} {Month} {ShortYear}</h4>
  1285. {block:NoteCount}<p>with {NoteCountWithLabel}</p>{/block:NoteCount}
  1286. {block:HasTags}
  1287. <div class="p-tag">
  1288. {block:Tags}<span class="pe-7s-close"></span> <a href="{TagURL}">{Tag}</a> {/block:Tags}
  1289. </div>
  1290. {/block:HasTags}
  1291.  
  1292. {block:ContentSource}
  1293. <div class="source">
  1294. {block:RebloggedFrom}
  1295. <a class="pe-7s-refresh-cloud" href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}" target="_blank"></a>
  1296. <a class="pe-7s-cloud-upload" href="{ReblogRootURL}}" title="Posted by {ReblogRootName}" target="_blank"></a>
  1297. {/block:RebloggedFrom}
  1298. <a class="pe-7s-cloud-download" href="{SourceURL}" title="Source" target="_blank"></a>
  1299. </div>
  1300. {/block:ContentSource}
  1301. </li>
  1302. {/block:Date}
  1303.  
  1304. {block:PostNotes}
  1305. <li class="posts"><div class="post" style="border: 20px solid {color:Post Bg};">{PostNotes}</li>
  1306. {/block:PostNotes}
  1307. {/block:PermalinkPage}
  1308.  
  1309. {/block:Posts}
  1310. </ol>
  1311.  
  1312. <div class="clear"></div>
  1313.  
  1314. {block:IndexPage}
  1315. <div class="page-load-status">
  1316. <p class="infinite-scroll-request">Loading...</p>
  1317. <p class="infinite-scroll-last">End of content</p>
  1318. <p class="infinite-scroll-error">No more pages to load</p>
  1319. </div>
  1320. {block:IfInfiniteScrollwithLoadMoreButton}
  1321. {block:Pagination}{block:NextPage}
  1322. <div class="load-more-button">Load More</div>
  1323. {/block:NextPage}{/block:Pagination}
  1324. {/block:IfInfiniteScrollwithLoadMoreButton}
  1325. {/block:IndexPage}
  1326.  
  1327. </div>
  1328. </div>
  1329.  
  1330. <div class="pagination">
  1331. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  1332. </div>
  1333.  
  1334. </div>
  1335.  
  1336. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1337. <script type="text/javascript" src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1338. <script type="text/javascript" src="https://static.tumblr.com/kmw8hta/NaEnnqkxd/tooltip.js"></script>
  1339. <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
  1340. <script src="https://static.tumblr.com/fxwznoj/Gxcoy13dm/masonry.pkgd.min.js"></script>
  1341.  
  1342. <script src="http://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1343.  
  1344. <script>
  1345. $('#totop').click(function () {
  1346. $('#main').animate({
  1347. scrollTop: 0
  1348. }, 600);
  1349. return false;
  1350. });
  1351.  
  1352. $('#main').scroll(function () {
  1353. if ($(this).scrollTop() > 50) {
  1354. $('#totop').fadeIn();
  1355. } else {
  1356. $('#totop').fadeOut();
  1357. }
  1358. });
  1359. </script>
  1360.  
  1361. {block:IndexPage}
  1362. <script>
  1363. $(document).ready(function(){
  1364. var $container = $('.container').masonry({
  1365. itemSelector: 'none',
  1366. columnWidth: '.col-size',
  1367. gutter: '.gutter-size',
  1368. });
  1369. var msnry = $container.data('masonry');
  1370. $container.imagesLoaded( function() {
  1371. $container.removeClass('are-images-unloaded');
  1372. $container.masonry( 'option', { itemSelector: '.posts' });
  1373. var $items = $container.find('.posts');
  1374. $container.masonry( 'appended', $items );
  1375. });
  1376. $container.infiniteScroll({
  1377. append: '.posts',
  1378. outlayer: msnry,
  1379. history: false,
  1380. elementScroll: '#main',
  1381. scrollThreshold: 100,
  1382. {block:IfInfiniteScroll}
  1383. path: '.pagination a#next',
  1384. status: '.page-load-status',
  1385. prefill: true,
  1386. {/block:IfInfiniteScroll}
  1387. {block:IfInfiniteScrollwithLoadMoreButton}
  1388. path: '.pagination a#next',
  1389. status: '.page-load-status',
  1390. button: '.load-more-button',
  1391. loadOnScroll: false,
  1392. {/block:IfInfiniteScrollwithLoadMoreButton}
  1393. });
  1394. var infScroll = $container.data('infiniteScroll');
  1395. var $statusBar = $('.status');
  1396. $container.on( 'load.infiniteScroll', function() {
  1397. $statusBar.text( 'Currently on page ' + infScroll.pageIndex );
  1398. });
  1399. $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
  1400. $container.masonry( 'option', { itemSelector: '.posts' });
  1401. var $items = $container.find( items );
  1402. var $newItemsIDs = $items.map(function () {
  1403. return $(this).attr('id');
  1404. }).get();
  1405. Tumblr.LikeButton.get_status_by_post_ids($newItemsIDs);
  1406. resizeVideos();
  1407. });
  1408. });
  1409. </script>
  1410. {/block:IndexPage}
  1411.  
  1412. </body>
  1413. </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!