API tools faq
paste
Advertisement
neothm

#14 ITCH

neothm
Mar 7th, 2016
8,765
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. #14 (v.0.4) ITCH by Neo
  6. $. log 26/07 fixed photosets agAIN
  7. Find me on tumblr: @NEOTHM, @MTRICS
  8. If you need help/spotted a glitch, feel free to message me!
  9. Thank you for taking an interest in this theme, enjoy! ♡
  10. -->
  11. <meta charset="utf-8">
  12. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  13. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  14. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  15. <link rel="stylesheet" href="http://static.tumblr.com/emvnqzg/ZjEo04ht8/pxu.css">
  16. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  17. <link href='https://fonts.googleapis.com/css?family={text:GoogleFont}:400,400italic,700,700italic|{text:GoogleFontTitle}:700,700italic' rel='stylesheet' type='text/css'>
  18. <meta name="image:Favicon" content="{Favicon}">
  19. <link rel="shortcut icon" href="{image:Favicon}">
  20. <meta name="image:Side" content="">
  21. <meta name="color:Borders" content="#f2f2f2">
  22. <meta name="text:GoogleFont" content="Roboto">
  23. <meta name="text:GoogleFontTitle" content="Playfair Display">
  24. <meta name="if:PostBorders" content="1">
  25. <meta name="color:SidebarLayer" content="#ffffff">
  26. <meta name="color:MainTitle" content="#000000">
  27. <meta name="color:Subtitle" content="#000000">
  28. <meta name="color:Description" content="#000000">
  29. <meta name="color:Background" content="#ffffff">
  30. <meta name="color:Text" content="#3B3B3B">
  31. <meta name="color:Links" content="#aaaaaa">
  32. <meta name="color:LinksHover" content="#000000">
  33. <meta name="color:NavBackground" content="#ffffff">
  34. <meta name="color:NavLinks" content="#aaaaaa">
  35. <meta name="color:NavLinksHover" content="#000000">
  36. <meta name="color:NavLinksNumber" content="#000000">
  37. <meta name="color:NavToggleArrow" content="#ffffff">
  38. <meta name="select:ToggleNavigationSize" content="18px" title="Small">
  39. <meta name="select:ToggleNavigationSize" content="25px" title="Medium">
  40. <meta name="select:ToggleNavigationSize" content="32px" title="Big">
  41. <meta name="select:LayerOpacity" content="0" title="No layer">
  42. <meta name="select:LayerOpacity" content="0.3" title="Weak">
  43. <meta name="select:LayerOpacity" content="0.5" title="Medium">
  44. <meta name="select:LayerOpacity" content="0.7" title="Strong">
  45. <meta name="select:LayerOpacity" content="0.9" title="Maximal">
  46. <meta name="select:TitlesWidth" content="200px" title="200px">
  47. <meta name="select:TitlesWidth" content="250px" title="250px">
  48. <meta name="select:TitlesWidth" content="300px" title="300px">
  49. <meta name="select:TitlesWidth" content="350px" title="350px">
  50. <meta name="select:TitlesWidth" content="400px" title="400px">
  51. <meta name="select:TitlesWidth" content="450px" title="450px">
  52. <meta name="select:TitlesWidth" content="500px" title="500px">
  53. <meta name="select:FontSize" content="9px" title="9px">
  54. <meta name="select:FontSize" content="10px" title="10px">
  55. <meta name="select:FontSize" content="11px" title="11px">
  56. <meta name="select:FontSize" content="12px" title="12px">
  57. <meta name="select:FontSize" content="13px" title="13px">
  58. <meta name="select:FontSize" content="14px" title="14px">
  59. <meta name="select:NextPage" content="ldmr" title="Load more">
  60. <meta name="select:NextPage" content="ifnt" title="Infinite scroll">
  61. <meta name="select:NextPage" content="pagi" title="Pagination">
  62. <meta name="if:LeftSidebar" content="1">
  63. <meta name="if:VisibleNav" content="0">
  64. <meta name="if:ShowCaption" content="1">
  65. <meta name="if:ShowTags" content="0">
  66. <meta name="select:SidebarContentRatio" content="s2-8" title="20% / 80%">
  67. <meta name="select:SidebarContentRatio" content="s2-7" title="25% / 75%">
  68. <meta name="select:SidebarContentRatio" content="s3-6" title="35% / 65%">
  69. <meta name="select:SidebarContentRatio" content="s5-5" title="50% / 50%">
  70. <meta name="select:SidebarContentRatio" content="s1-1" title="Full header">
  71. <meta name="select:SidebarImageAlign" content="top" title="top">
  72. <meta name="select:SidebarImageAlign" content="center" title="center">
  73. <meta name="select:SidebarImageAlign" content="bottom" title="bottom">
  74. <meta name="select:SidebarImageAlign" content="right" title="right">
  75. <meta name="select:SidebarImageAlign" content="left" title="left">
  76.  
  77. <meta name="select:NumberOfColumns" content="c1" title="Single Column">
  78. <meta name="select:NumberOfColumns" content="c2" title="2 Columns">
  79. <meta name="select:NumberOfColumns" content="c3" title="3 Columns">
  80. <meta name="select:NumberOfColumns" content="c4" title="4 Columns">
  81. <meta name="select:NumberOfColumns" content="c5" title="5 Columns">
  82.  
  83. <meta name="if:CenteredTitles" content="1">
  84. <meta name="if:Titles" content="1">
  85. <meta name="if:Subtitre" content="1">
  86. <meta name="if:Description" content="0">
  87. <meta name="text:Subtitle" content="Some super cool blog on the internet">
  88. <meta name="text:PostWidth" content="300px">
  89. <meta name="text:PostPermalinkWidth" content="600px">
  90. <meta name="text:PostSpacing" content="30px">
  91. <meta name="text:PostPadding" content="40px">
  92. <meta name="text:ContainerSpacing" content="20px">
  93. <meta name="text:PhotosetSpacing" content="2px">
  94. <meta name="text:FullSizeHeaderHeight" content="100%">
  95. <meta name="if:Link1" content="0">
  96. <meta name="if:Link2" content="0">
  97. <meta name="if:Link3" content="0">
  98. <meta name="if:Link4" content="0">
  99. <meta name="if:Link5" content="0">
  100. <meta name="if:Link6" content="0">
  101. <meta name="if:Link7" content="0">
  102. <meta name="if:Link8" content="0">
  103. <meta name="text:Link1Name" content="">
  104. <meta name="text:Link1URL" content="http://">
  105. <meta name="text:Link2Name" content="">
  106. <meta name="text:Link2URL" content="http://">
  107. <meta name="text:Link3Name" content="">
  108. <meta name="text:Link3URL" content="http://">
  109. <meta name="text:Link4Name" content="">
  110. <meta name="text:Link4URL" content="http://">
  111. <meta name="text:Link5Name" content="">
  112. <meta name="text:Link5URL" content="http://">
  113. <meta name="text:Link6Name" content="">
  114. <meta name="text:Link6URL" content="http://">
  115. <meta name="text:Link7Name" content="">
  116. <meta name="text:Link7URL" content="http://">
  117. <meta name="text:Link8Name" content="">
  118. <meta name="text:Link8URL" content="http://">
  119. <style type="text/css">
  120. *{
  121. margin:0;
  122. padding:0;
  123. }
  124. html, body{
  125. height:100%;
  126. }
  127. body{
  128. text-align:justify;
  129. word-break:break-word;
  130. font:400 {select:FontSize}/1.5 {text:GoogleFont}, sans-serif;
  131. color:{color:Text};
  132. background:{color:Background};
  133. -webkit-font-smoothing: antialiased;
  134. -moz-osx-font-smoothing: grayscale;
  135. padding-top:1px;
  136. margin-top:-1px;
  137. }
  138. #noscroll{
  139. overflow-x:hidden;
  140. }
  141. a{
  142. color:{color:Links};
  143. text-decoration:none;
  144. }
  145. a:hover{
  146. color:{color:LinksHover};
  147. cursor:pointer!important;
  148. }
  149. #toggle, #toggle:hover, .rotate,
  150. a, a:hover{
  151. transition-duration:.3s;
  152. -webkit-transition-duration:.3s;
  153. -moz-transition-duration:.3s;
  154. -ms-transition-duration:.3s;
  155. -o-transition-duration:.3s;
  156. }
  157. nav, .active{
  158. transition-duration:.7s;
  159. -webkit-transition-duration:.7s;
  160. -moz-transition-duration:.7s;
  161. -ms-transition-duration:.7s;
  162. -o-transition-duration:.7s;
  163. }
  164. ::selection{
  165. background-color:#000;
  166. color:#fff;
  167. }
  168. ::-moz-selection{
  169. background-color:#000;
  170. color:#fff;
  171. }
  172. ::-webkit-scrollbar{
  173. width:11px;
  174. height:11px;
  175. background-color:{color:Background};
  176. }
  177. ::-webkit-scrollbar-track{
  178. border:5px solid {color:Background};
  179. background-color:{color:Background};
  180. }
  181. ::-webkit-scrollbar-thumb{
  182. border:5px solid {color:Background};
  183. background-color: {color:Text};
  184. }
  185. .tmblr-iframe.iframe-controls--desktop, #tumblr_controls{
  186. position:fixed;
  187. transform:scale(.7);
  188. -webkit-transform:scale(.7);
  189. -moz-transform:scale(.7);
  190. z-index:999999999!important;
  191. filter:invert(100%);
  192. -webkit-filter:invert(100%);
  193. -moz-filter:invert(100%);
  194. -ms-filter:invert(100%);
  195. -o-filter:invert(100%);
  196. }
  197. #s-m-t-tooltip{
  198. line-height:140%;
  199. font-size:8px;
  200. text-transform:uppercase;
  201. text-align:center;
  202. letter-spacing:1px;
  203. max-width:100px;
  204. z-index:9999!important;
  205. padding:5px 10px;
  206. border:1px solid #000;
  207. margin:15px;
  208. background:rgba(0,0,0,.95);
  209. color:#888;
  210. }
  211. h1, h2, h3{
  212. font:700 42px/1.2 {text:GoogleFontTitle}, serif;
  213. }
  214. header{
  215. {block:PermalinkPage}
  216. width:20%;
  217. {/block:PermalinkPage}
  218. height:100%;
  219. position:fixed;
  220. top:0;
  221. {block:ifLeftSidebar}
  222. left:0;
  223. {/block:ifLeftSidebar}
  224. {block:ifNotLeftSidebar}
  225. right:0;
  226. {/block:ifNotLeftSidebar}
  227. background:#fff url('{image:Side}') center {select:SidebarImageAlign};
  228. background-size:cover;
  229. overflow:hidden;
  230. }
  231. header:before{
  232. position:absolute;
  233. width:100%;
  234. height:100%;
  235. background:{color:SidebarLayer};
  236. opacity:{select:LayerOpacity};
  237. top:0;
  238. content:"";
  239. left:0;
  240. }
  241. main{
  242. {block:PermalinkPage}
  243. width:80%;
  244. {/block:PermalinkPage}
  245. {block:ifLeftSidebar}
  246. float:right;
  247. {/block:ifLeftSidebar}
  248. position:relative;
  249. height:100%;
  250. {block:IfTitles}
  251. {block:IndexPage}
  252. padding-top:100vh;
  253. {/block:IndexPage}
  254. {/block:IfTitles}
  255. {block:IfNotTitles}
  256. padding-top:{text:ContainerSpacing};
  257. {/block:IfNotTitles}
  258. {block:PermalinkPage}
  259. padding-top:{text:ContainerSpacing};
  260. {/block:PermalinkPage}
  261. padding-bottom:50px;
  262. }
  263. section{
  264. padding:0 {text:ContainerSpacing};
  265. min-height:100%;
  266. }
  267. .s1-1 main{
  268. padding-top:150px;
  269. }
  270. {block:IndexPage}
  271. .s2-8 header{
  272. width:20%;
  273. }
  274. .s2-8 main{
  275. width:80%;
  276. }
  277. .s2-7 header{
  278. width:25%;
  279. }
  280. .s2-7 main{
  281. width:75%;
  282. }
  283. .s3-6 header{
  284. width:35%;
  285. }
  286. .s3-6 main{
  287. width:65%;
  288. }
  289. .s5-5 header,
  290. .s5-5 main{
  291. width:50%;
  292. }
  293. .s1-1 header,
  294. .s1-1 main{
  295. position:relative;
  296. float:none;
  297. width:100%;
  298. }
  299. .s1-1 header{
  300. height:{text:FullSizeHeaderHeight};
  301. }
  302. {block:IfNotCenteredTitles}
  303. .s2-8 #titles{
  304. {block:ifLeftSidebar}
  305. right:40%;
  306. {/block:ifLeftSidebar}
  307. {block:ifNotLeftSidebar}
  308. left:40%;
  309. {/block:ifNotLeftSidebar}
  310. }
  311. .s2-7 #titles{
  312. {block:ifLeftSidebar}
  313. right:37.5%;
  314. {/block:ifLeftSidebar}
  315. {block:ifNotLeftSidebar}
  316. left:37.5%;
  317. {/block:ifNotLeftSidebar}
  318. }
  319. .s3-6 #titles{
  320. {block:ifLeftSidebar}
  321. right:32.5%;
  322. {/block:ifLeftSidebar}
  323. {block:ifNotLeftSidebar}
  324. left:32.5%;
  325. {/block:ifNotLeftSidebar}
  326. }
  327. .s1-1 #titles,
  328. .s5-5 #titles{
  329. {block:ifLeftSidebar}
  330. right:25%;
  331. {/block:ifLeftSidebar}
  332. {block:ifNotLeftSidebar}
  333. left:25%;
  334. {/block:ifNotLeftSidebar}
  335. }
  336. {/block:IfNotCenteredTitles}
  337. .c1{
  338. overflow:hidden;
  339. }
  340. section:not(.c1) article{
  341. float:left;
  342. margin:{text:PostSpacing};
  343. }
  344. .c2 article{
  345. width:calc(50% - ({text:PostSpacing} * 2) - (({text:ContainerSpacing} * 2) / 2) - 2px);
  346. }
  347. .c3 article{
  348. width:calc(33.333% - ({text:PostSpacing} * 2) - (({text:ContainerSpacing} * 2) / 3) - 2px);
  349. }
  350. .c4 article{
  351. width:calc(25% - ({text:PostSpacing} * 2) - (({text:ContainerSpacing} * 2) / 4) - 2px);
  352. }
  353. .c5 article{
  354. width:calc(20% - ({text:PostSpacing} * 2) - (({text:ContainerSpacing} * 2) / 5) - 2px);
  355. }
  356. {/block:IndexPage}
  357. .c1 article{
  358. {block:IndexPage}width:{text:PostWidth};{/block:IndexPage}
  359. {block:PermalinkPage}width:{text:PostPermalinkWidth};{/block:PermalinkPage}
  360. margin:{text:PostSpacing} auto;
  361. }
  362.  
  363. #titles{
  364. position:absolute;
  365. max-width:{select:TitlesWidth};
  366. top:50%;
  367. {block:IfCenteredTitles}
  368. {block:ifLeftSidebar}
  369. left:50%;
  370. {/block:ifLeftSidebar}
  371. {block:ifNotLeftSidebar}
  372. right:50%;
  373. {/block:ifNotLeftSidebar}
  374. {block:ifLeftSidebar}
  375. transform:translate(-50%,-55%);
  376. -webkit-transform:translate(-50%,-55%);
  377. -moz-transform:translate(-50%,-55%);
  378. {/block:ifLeftSidebar}
  379. {block:ifNotLeftSidebar}
  380. transform:translate(50%,-55%);
  381. -webkit-transform:translate(50%,-55%);
  382. -moz-transform:translate(50%,-55%);
  383. {/block:ifNotLeftSidebar}
  384. {/block:IfCenteredTitles}
  385. {block:IfNotCenteredTitles}
  386. {block:ifLeftSidebar}
  387. transform:translate(50%,-55%);
  388. -webkit-transform:translate(50%,-55%);
  389. -moz-transform:translate(50%,-55%);
  390. {/block:ifLeftSidebar}
  391. {block:ifNotLeftSidebar}
  392. transform:translate(-50%,-55%);
  393. -webkit-transform:translate(-50%,-55%);
  394. -moz-transform:translate(-50%,-55%);
  395. {/block:ifNotLeftSidebar}
  396. {/block:IfNotCenteredTitles}
  397. z-index:1;
  398. text-align:center;
  399. }
  400. {block:IfTitles}
  401. h1{
  402. color:{color:MainTitle};
  403. font-size:50px;
  404. font-style:italic;
  405. }
  406. {block:ifSubtitre}
  407. h2{
  408. color:{color:Subtitle};
  409. font-size:12px;
  410. opacity:.7;
  411. letter-spacing:1px;
  412. text-transform:uppercase;
  413. margin-top:10px;
  414. }
  415. {/block:ifSubtitre}
  416. {block:IfDescription}
  417. #desc{
  418. color:{color:Description};
  419. margin-top:15px;
  420. }
  421. {/block:IfDescription}
  422. {/block:IfTitles}
  423. article{
  424. box-sizing:border-box;
  425. background-color:#fff;
  426. border:1px solid {block:IfPostBorders}{color:Borders}{/block:IfPostBorders}{block:IfNotPostBorders}transparent{/block:IfNotPostBorders};
  427. padding:{text:PostPadding} {text:PostPadding} 10px;
  428. }
  429. nav{
  430. position:absolute;
  431. z-index:2;
  432. left:0;
  433. right:0;
  434. padding:20px 20% 50px;
  435. background-color:{color:NavBackground};
  436. {block:IfNotLeftSidebar}
  437. text-align:right;
  438. {/block:IfNotLeftSidebar}
  439. {block:IfNotVisibleNav}
  440. bottom:-10vw;
  441. {/block:IfNotVisibleNav}
  442. {block:IfVisibleNav}
  443. bottom:0;
  444. {/block:IfVisibleNav}
  445. transform:translateY(100%);
  446. -webkit-transform:translateY(100%);
  447. -moz-transform:translateY(100%);
  448.  
  449. }
  450. nav.active{
  451. transform:translateY(0%);
  452. -webkit-transform:translateY(0%);
  453. -moz-transform:translateY(0%);
  454. bottom:0px;
  455. }
  456. nav:before{
  457. position:absolute;
  458. content:"";
  459. left:0;
  460. top:0;
  461. background:{color:NavBackground};
  462. width:110%;
  463. height:5vw;
  464. z-index:1;
  465. {block:IfLeftSidebar}
  466. transform:rotate(5deg) translate(-5%, -50%);
  467. -webkit-transform:rotate(5deg) translate(-5%, -50%);
  468. -moz-transform:rotate(5deg) translate(-5%, -50%);
  469. {/block:IfLeftSidebar}
  470. {block:IfNotLeftSidebar}
  471. transform:rotate(-5deg) translate(-5%, -50%);
  472. -webkit-transform:rotate(-5deg) translate(-5%, -50%);
  473. -moz-transform:rotate(-5deg) translate(-5%, -50%);
  474. {/block:IfNotLeftSidebar}
  475. }
  476. nav ul{
  477. position:relative;
  478. background:{color:NavBackground};
  479. z-index:2;
  480. }
  481. nav li{
  482. list-style-type:none;
  483. text-transform:uppercase;
  484. font-size:11px;
  485. letter-spacing:1px;
  486. counter-increment: navli;
  487. }
  488. nav li a{
  489. color:{color:NavLinks};
  490. }
  491. nav li a:hover{
  492. color:{color:NavLinksHover};
  493. }
  494. nav li:before{
  495. color:{color:NavLinksNumber};
  496. display:inline-block;
  497. vertical-align:top;
  498. font:bold italic 13px/1 {text:GoogleFontTitle};
  499. content:"0"counter(navli)".";
  500. {block:IfLeftSidebar}
  501. margin-right:8px;
  502. {/block:IfLeftSidebar}
  503. {block:IfNotLeftSidebar}
  504. float:right;
  505. margin-left:13px;
  506. {/block:IfNotLeftSidebar}
  507. }
  508. {block:IndexPage}
  509. .s1-1 nav{
  510. z-index:9;
  511. bottom:0;
  512. transform:translateY(0%);
  513. -webkit-transform:translateY(0%);
  514. -moz-transform:translateY(0%);
  515. text-align:center;
  516. padding:30px;
  517. }
  518. nav.fixed{
  519. position:fixed;
  520. top:0;
  521. bottom:auto;
  522. }
  523. .s1-1 #toggle,
  524. .s1-1 nav:before{
  525. display:none;
  526. }
  527. .s1-1 nav li{
  528. margin:0 10px;
  529. display:inline-block;
  530. }
  531. .s1-1 nav li:before{
  532. float:none;
  533. margin-right:5px;
  534. }
  535. {/block:IndexPage}
  536.  
  537. #toggle{
  538. z-index:3;
  539. position:absolute;
  540. font-size:{select:ToggleNavigationSize};
  541. color:{color:NavToggleArrow};
  542. left:0;
  543. right:0;
  544. width:40px;
  545. display:table;
  546. text-align:center;
  547. margin:auto;
  548. {block:IfNotVisibleNav}
  549. top:calc(-10vw - 80px);
  550. {/block:IfNotVisibleNav}
  551. {block:IfVisibleNav}
  552. top:calc(-10vw - 10px);
  553. {/block:IfVisibleNav}
  554. }
  555. #toggle:not(.rotate):hover{
  556. {block:IfNotVisibleNav}
  557. top:calc(-10vw - 90px);
  558. {/block:IfNotVisibleNav}
  559. {block:IfVisibleNav}
  560. top:calc(-10vw - 20px);
  561. {/block:IfVisibleNav}
  562. }
  563. #toggle:hover,
  564. .rotate:hover{
  565. cursor:pointer!important;
  566. }
  567. .rotate{
  568. top:calc(-5vw - 50px)!important;
  569. transform:rotate(-180deg);
  570. -webkit-transform:rotate(-180deg);
  571. -moz-transform:rotate(-180deg);
  572. }
  573. .caption blockquote{
  574. padding-left:30px;
  575. border-left:1px solid {color:Borders};
  576. }
  577. .caption ul, .caption ol{
  578. padding-left:30px;
  579. }
  580.  
  581.  
  582. .caption a:not(.read_more):not(.tumblr_blog){
  583. border-bottom: 1px solid #ddd;
  584. padding-bottom: 2px;
  585. }
  586. .caption a:not(.read_more):not(.tumblr_blog):hover{
  587. border-bottom-color:transparent;
  588. }
  589. .tumblr_blog{
  590. text-transform:uppercase;
  591. color:{color:LinksHover};
  592. font-weight:bold;
  593. letter-spacing:1px;
  594. font-size:10px;
  595. }
  596. .caption blockquote:not(:first-child),
  597. .caption p:not(:first-child), .caption ul:not(:first-child), .caption ol:not(:first-child){
  598. margin-top:15px;
  599. }
  600. .caption blockquote:not(:last-child),
  601. .caption p:not(:last-child), .caption ul:not(:last-child), .caption ol:not(:last-child){
  602. margin-bottom:15px;
  603. }
  604. .perma{
  605. margin-top:30px;
  606. width:100%;
  607. border-top:1px solid {color:Borders};
  608. display:table;
  609. }
  610. li.note .action,
  611. li.note .avatar_frame,
  612. .perma span,
  613. .perma p{
  614. display:block;
  615. float:left;
  616. }
  617. li.note .avatar_frame,
  618. .perma span{
  619. text-align:center;
  620. width:25px;
  621. height:25px;
  622. line-height:25px;
  623. border-right:1px solid {color:Borders};
  624. }
  625. li.more_notes_link_container,
  626. li.note .action,
  627. .perma p{
  628. text-transform:uppercase;
  629. font-size:9px;
  630. line-height:25px;
  631. letter-spacing:1px;
  632. }
  633. li.more_notes_link_container{
  634. text-align:center;
  635. }
  636. li.note .action,
  637. .perma p{
  638. padding:0 5px;
  639. text-align:right;
  640. width:calc(100% - 36px);
  641. }
  642. li.more_notes_link_container a,
  643. .perma div:not(.tags) a:first-child{
  644. display:inline-table;
  645. border-top:1px solid transparent;
  646. margin-top:-1px;
  647. }
  648. {block:IfNotShowTags}
  649. {block:IndexPage}
  650. .tags{
  651. display:none;
  652. }
  653. .dates{
  654. border-bottom-color:transparent!important;
  655. }
  656. {/block:IndexPage}
  657. {/block:IfNotShowTags}
  658. .tags a{
  659. margin-left:5px;
  660. }
  661. li.more_notes_link_container a:hover,
  662. .perma div:not(.tags) a:first-child:hover{
  663. border-color:{color:LinksHover};
  664. }
  665. .audio:after,
  666. li.note:after,
  667. .perma div:after{
  668. content:"";
  669. clear:both;
  670. display:table;
  671. }
  672. li.note,
  673. .perma div:not(:last-of-type){
  674. border-bottom:1px solid {color:Borders};
  675. }
  676. li.note img{
  677. width:25px;
  678. }
  679. li.note blockquote,
  680. .notes{
  681. display:none;
  682. }
  683. .notes li{
  684. list-style-type:none;
  685. }
  686. .audio > span{
  687. width: 50px;
  688. height: 50px;
  689. display: block;
  690. float:left;
  691. margin-right:20px;
  692. overflow: hidden;
  693. }
  694. .audio{
  695. padding-bottom:20px;
  696. margin-bottom:20px;
  697. border-bottom:1px solid {color:Borders};
  698. }
  699. .audio b{
  700. text-transform:uppercase;
  701. letter-spacing:1px;
  702. font-size:90%;
  703. }
  704. .audio_player{
  705. display: block;
  706. width: 25px;
  707. margin: 10px 12.5px;
  708. height: 30px;
  709. overflow: hidden;
  710. }
  711. .audio p{
  712. width:calc(100% - 70px);
  713. padding:5px 0;
  714. line-height:20px;
  715. }
  716. h3{
  717. text-align:center;
  718. margin-bottom:15px;
  719. }
  720. .chat li{
  721. list-style-type:none;
  722. padding:5px 10px;
  723. }
  724. .chat li:nth-child(odd){
  725. background-color:#f6f6f6;
  726. }
  727. .quote{
  728. font-size:25px;
  729. text-align:left;
  730. line-height:1.4;
  731. font-style:italic;
  732. }
  733. .quote + .caption{
  734. text-transform:uppercase;
  735. font-size:10px;
  736. text-align:center;
  737. display:table;
  738. margin:0 auto;
  739. padding:15px 5px 0;
  740. border-top:1px solid {color:Borders};
  741. }
  742. .question img{
  743. width:30px;
  744. display:block;
  745. float:left;
  746. margin-right:15px;
  747. border-radius:3px;
  748. }
  749. .question h3{
  750. font-size:15px;
  751. display:block;
  752. width:calc(100% - 45px);
  753. text-align:left;
  754. line-height:30px;
  755. float:left;
  756. font-style:italic;
  757. }
  758. .question p{
  759. clear:both;
  760. margin-bottom:20px;
  761. padding-bottom:20px;
  762. border-bottom:1px solid #eee;
  763. }
  764. .pictures{
  765. display:block;
  766. min-width:100%;
  767. }
  768. article *{
  769. max-width:100%;
  770. }
  771. .caption img{
  772. height:auto;
  773. }
  774. .pictures + .caption,
  775. .photo-slideshow + .caption,
  776. .fu-tmblr + .caption{
  777. margin-top:20px;
  778. }
  779. footer{
  780. text-align:center;
  781. text-transform:uppercase;
  782. letter-spacing:1px;
  783. font-size:10px;
  784. padding:80px 0 70px;
  785. }
  786. .pagination a{
  787. font-size:14px;
  788. color:#000;
  789. vertical-align:-1.5px;
  790. margin:0 8px;
  791. }
  792. #loadmore{
  793. font:bold italic 14px/1.4 {text:GoogleFontTitle};
  794. display:table;
  795. padding:10px 20px;
  796. border-radius:2px;
  797. margin:0 auto;
  798. border:1px solid {color:Borders};
  799. }
  800. .fu-tmblr iframe{
  801. min-width:100%;
  802. }
  803. #vignette, .vignette{
  804. background:transparent none!important;
  805. }
  806. .ldmr .pagination,
  807. .pagi #loadmore,
  808. footer.ifnt,
  809. #infscr-loading{block:IndexPage}{block:IfNotShowCaption}
  810. , .hde{/block:IfNotShowCaption}{/block:IndexPage}{
  811. display:none!important;
  812. }
  813.  
  814. #tumblr_lightbox, .tmblr-lightbox{
  815. background-color:rgba(255,255,255,.8)!important;
  816. }
  817. #tumblr_lightbox img, .lightbox-image{
  818. box-shadow:none!important;
  819. }
  820. </style>
  821. </head>
  822. <body id="noscroll" class="{select:SidebarContentRatio}">
  823.  
  824. <header>
  825. <nav{block:PermalinkPage} class="active"{/block:PermalinkPage}>
  826. {block:IndexPage}<span class="ion-chevron-up" id="toggle"></span>{/block:IndexPage}
  827. <ul>
  828. <li><a href="/">Home</a></li>
  829. <li><a href="/ask">Contact</a></li>
  830. {block:IfLink1}<li><a href="{text:Link1URL}">{text:Link1Name}</a></li>{/block:IfLink1}
  831. {block:IfLink2}<li><a href="{text:Link2URL}">{text:Link2Name}</a></li>{/block:IfLink2}
  832. {block:IfLink3}<li><a href="{text:Link3URL}">{text:Link3Name}</a></li>{/block:IfLink3}
  833. {block:IfLink4}<li><a href="{text:Link4URL}">{text:Link4Name}</a></li>{/block:IfLink4}
  834. {block:IfLink5}<li><a href="{text:Link5URL}">{text:Link5Name}</a></li>{/block:IfLink5}
  835. {block:IfLink6}<li><a href="{text:Link6URL}">{text:Link6Name}</a></li>{/block:IfLink6}
  836. {block:IfLink7}<li><a href="{text:Link7URL}">{text:Link7Name}</a></li>{/block:IfLink7}
  837. {block:IfLink8}<li><a href="{text:Link8URL}">{text:Link8Name}</a></li>{/block:IfLink8}
  838. </ul>
  839. </nav>
  840. </header>
  841. {block:IndexPage}
  842. {block:IfTitles}
  843. <div id="titles">
  844. <h1>{Title}</h1>
  845. {block:ifSubtitre}<h2>{text:Subtitle}</h2>{/block:ifSubtitre}
  846. {block:IfDescription}{block:Description}<div id="desc">{Description}</div>{/block:Description}{/block:IfDescription}
  847. </div>
  848. {/block:IfTitles}
  849. {/block:IndexPage}
  850.  
  851.  
  852. <main>
  853. <section class="{block:IndexPage}{select:NumberOfColumns}{/block:IndexPage}{block:PermalinkPage}c1{/block:PermalinkPage}">
  854. {block:Posts}
  855. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  856. <article>
  857. {block:Photo}
  858. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="pictures">
  859. {block:Caption}
  860. <div class="caption hde">
  861. {Caption}
  862. </div>
  863. {/block:Caption}
  864. {/block:Photo}
  865. {block:Photoset}
  866. <div class="photo-slideshow" data-layout="{PhotosetLayout}">
  867. <a onclick="Tumblr.Lightbox.init([/*{block:Photos}, /**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }{/block:Photos}]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  868. {block:Photos}
  869. <div class="photo-data">
  870. <div class="pxu-photo">
  871. <img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}>
  872. </div>
  873. </div>
  874. {/block:Photos}
  875. </a>
  876.  
  877. </div>
  878. {block:Caption}
  879. <div class="caption hde">
  880. {Caption}
  881. </div>
  882. {/block:Caption}
  883. {/block:Photoset}
  884. {block:Text}
  885. {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
  886. <div class="caption">
  887. {Body}
  888. </div>
  889. {/block:Text}
  890. {block:Link}
  891. <h3 class="link"><a href="{URL}" target="{Target}">{Name} »</a></h3>
  892. {block:Description}
  893. <div class="caption">
  894. {Description}
  895. </div>
  896. {/block:Description}
  897. {/block:Link}
  898. {block:Chat}
  899. {block:Title}
  900. <h3><a href="{Permalink}">{Title}</a></h3>
  901. {/block:Title}
  902. <ul class="chat">
  903. {block:Lines}
  904. <li>
  905. {block:Label}
  906. <b>{Label}</b>
  907. {/block:Label}
  908. {Line}
  909. </li>
  910. {/block:Lines}
  911. </ul>
  912. {/block:Chat}
  913. {block:Video}
  914. <div class="fu-tmblr">{Video-500}</div>
  915. {block:Caption}
  916. <div class="caption hde">
  917. {Caption}
  918. </div>
  919. {/block:Caption}
  920. {/block:Video}
  921. {block:Audio}
  922. <div class="audio">
  923. {block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}
  924. <p>
  925. {block:TrackName}
  926. <b>{TrackName}</b> <br>
  927. {/block:TrackName}
  928. {block:Artist}
  929. {Artist}
  930. {/block:Artist}
  931. </p>
  932. </div>
  933. {block:Caption}
  934. <div class="caption hde">{Caption}</div>
  935. {/block:Caption}
  936. {/block:Audio}
  937. {block:Quote}
  938. <h3 class="quote">{Quote}</h3>
  939. {block:Source}
  940. <div class="caption">
  941. {Source}
  942. </div>
  943. {/block:Source}
  944. {/block:Quote}
  945. {block:Answer}
  946. <div class="question">
  947. <img src="{AskerPortraitURL-96}">
  948. <h3>{Asker}</h3>
  949. <p>
  950. {Question}
  951. </p>
  952. </div>
  953. <div class="caption">{Answer}</div>
  954. {/block:Answer}
  955.  
  956.  
  957. {block:Date}
  958. <div class="perma">
  959. <div class="dates">
  960. <span class="ion-android-time"></span>
  961. <p><a href="{Permalink}">{ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a> <i>({TimeAgo})</i></p>
  962. </div>
  963. {block:PermalinkPage}
  964. {block:NoteCount}
  965. <div class="likes">
  966. <span class="ion-ios-heart"></span>
  967. <p>{NoteCountWithLabel}</p>
  968. </div>
  969. {/block:NoteCount}
  970. {block:RebloggedFrom}
  971. <div class="parents">
  972. <span class="ion-android-refresh"></span>
  973. <p>reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a></p>
  974. </div>
  975. <div class="parents">
  976. <span class="ion-paintbucket"></span>
  977. <p>originally from <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></p>
  978. </div>
  979. {/block:RebloggedFrom}
  980. {/block:PermalinkPage}
  981. {block:HasTags}
  982. <div class="tags">
  983. <span class="ion-ios-pricetag-outline"></span>
  984. <p>{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>
  985. </div>
  986. {/block:HasTags}
  987. {block:PostNotes}
  988. <div class="toggle-notes">
  989. <span class="ion-ios-arrow-down"></span>
  990. <p><a href="#">see post notes</a></p>
  991. </div>
  992. {/block:PostNotes}
  993. </div>
  994. {/block:Date}
  995. {block:PostNotes}
  996. {PostNotes-64}
  997. {/block:PostNotes}
  998. </article>
  999. {/block:Posts}
  1000. </section>
  1001. {block:Pagination}
  1002. <footer class="{select:NextPage}">
  1003. <span class="pagination">
  1004. {block:PreviousPage}<a href="{PreviousPage}" class="ion-ios-arrow-back"></a>{/block:PreviousPage} page {CurrentPage} of {TotalPages} {block:NextPage}<a href="{NextPage}" class="ion-ios-arrow-forward" id="nxt"></a>{/block:NextPage}
  1005. </span>
  1006. <a id="loadmore" href="#">
  1007. load more
  1008. </a>
  1009. </footer>
  1010. {/block:Pagination}
  1011. </main>
  1012.  
  1013. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1014. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  1015. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  1016. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1017. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  1018. <script src="http://static.tumblr.com/wgg6svp/MBEnnvwcu/masonry330.js"></script>
  1019. <script type="text/javascript" src="http://static.tumblr.com/wgg6svp/Wf8nw0j2c/pxuphotoset.js"></script>
  1020. <script>
  1021. $(function(){
  1022. var nav = $('nav').offset().top, scrolltop;
  1023. $(window).scroll(function(){
  1024. scrolltop = $(window).scrollTop();
  1025. if($('body').hasClass('s1-1')){
  1026. if(scrolltop > nav){
  1027. $('nav').addClass('fixed');
  1028. }else{
  1029. $('nav').removeClass('fixed');
  1030. }
  1031. }
  1032. });
  1033. $('#toggle').click(function(e){
  1034. e.preventDefault();
  1035. if($(this).hasClass('rotate')){
  1036. $(this).removeClass('rotate');
  1037. $('nav').removeClass('active');
  1038. }else{
  1039. $(this).addClass('rotate');
  1040. $('nav').addClass('active');
  1041. }
  1042. });
  1043.  
  1044. $("[title]").style_my_tooltips({
  1045. tip_follows_cursor:true,
  1046. tip_delay_time:200,
  1047. tip_fade_speed:500
  1048. });
  1049. $('.photo-slideshow').imagesLoaded(function(){
  1050. $('.photo-slideshow').pxuPhotoset({
  1051. 'ligthbox' : true,
  1052. 'rounded' : false,
  1053. 'gutter' : '{text:PhotosetSpacing}'
  1054. });
  1055. });
  1056. $('.fu-tmblr').each(function(){
  1057. var height = parseInt($('iframe', this).height()) * ($('iframe', this).width() / 500);
  1058. $(this).height(height).find('iframe').height(height);
  1059. });
  1060.  
  1061. {block:IndexPage}
  1062. var parent = $('section');
  1063.  
  1064. if('{select:NumberOfColumns}' != 'c1'){
  1065. var numbercolumn;
  1066. switch('{select:NumberOfColumns}'){
  1067. case "c2": numbercolumn = 2; break;
  1068. case "c3": numbercolumn = 3; break;
  1069. case "c4": numbercolumn = 4; break;
  1070. case "c5": numbercolumn = 5; break;
  1071. default: numbercolumn = 0; break;
  1072. }
  1073.  
  1074. parent.imagesLoaded(function(){
  1075. parent.masonry({
  1076. itemSelector: 'article',
  1077. columnWidth: function(sectionw) {
  1078. return sectionw / numbercolumn;
  1079. }(),
  1080. isAnimated: false
  1081. });
  1082. });
  1083. setInterval(function(){parent.masonry("layout");}, 3000);
  1084. }
  1085.  
  1086. if($('footer').hasClass('ldmr') || $('footer').hasClass('ifnt')){
  1087. parent.infinitescroll({
  1088. navSelector : ".pagination",
  1089. nextSelector : "#nxt",
  1090. itemSelector : "article",
  1091. bufferPx : 50,
  1092. done : "",
  1093. loading: {
  1094. img : "",
  1095. msgText: "",
  1096. finishedMsg:""
  1097. },
  1098. },
  1099. function( newElements ) {
  1100. var $newElems = $( newElements ).css({ opacity: 0 });
  1101. $newElems.imagesLoaded(function(){
  1102. $newElems.animate({ opacity: 1 }).find('[title]').style_my_tooltips();
  1103. $newElems.find('.fu-tumblr').each(function(){ var height = parseInt($('iframe', this).height()) * ($('iframe', this).width() / 500);
  1104. $(this).height(height).find('iframe').height(height);});
  1105. $newElems.find('.photo-slideshow').pxuPhotoset({'ligthbox':true,'rounded':false,'gutter':'{text:PhotosetSpacing}'});
  1106. });
  1107. if('{select:NumberOfColumns}' != 'c1') parent.masonry( 'appended', $newElems);
  1108. });
  1109. if($('footer').hasClass('ldmr')){
  1110. parent.infinitescroll({
  1111. behavior: 'twitter'
  1112. });
  1113. $(window).unbind('.infscr');
  1114. $('#loadmore').click(function(e){
  1115. e.preventDefault();
  1116. parent.infinitescroll('retrieve');
  1117. $('footer').show();
  1118. return false;
  1119. });
  1120. }
  1121. }
  1122.  
  1123.  
  1124. {/block:IndexPage}
  1125. {block:PermalinkPage}
  1126. $('.toggle-notes a').click(function(e){
  1127. e.preventDefault();
  1128. $('.notes').slideDown(700);
  1129. $('.toggle-notes').fadeOut(200);
  1130. });
  1131. {/block:PermalinkPage}
  1132.  
  1133. });
  1134. </script>
  1135. </body>
  1136. </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!