API tools faq
paste
Advertisement
zojoh

Twenty Eight

zojoh
Jul 4th, 2013
16,883
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---
  5.  
  6. Theme #28 by Heidi @ladmilk
  7.  
  8.  
  9. Credit:
  10. Masonry: (masonry.desandro.com)
  11. Infinitescroll: Paulirish (https://github.com/infinite-scroll/infinite-scroll)
  12. Photoset: PixelUnion (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  13. Tool-tips: Malihu (manos.malihu.gr/style-my-tooltips-jquery-plugin/)
  14. Video Resizing: Shy Themes (http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos)
  15.  
  16. ---->
  17.  
  18. <head>
  19. <title>{Title}</title>
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23. <link rel="shortcut icon" href="{Favicon}" />
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  25.  
  26.  
  27. <meta name="color:Background" content="#f6f6f6" />
  28. <meta name="color:Posts" content="#ffffff" />
  29. <meta name="color:Post Title" content="#555555" />
  30. <meta name="color:Text" content="#999999" />
  31. <meta name="color:Links" content="#cccccc" />
  32. <meta name="color:Links Hover" content="#eabcd0" />
  33. <meta name="color:Bold" content="#666666" />
  34. <meta name="color:Italic" content="#bbbbbb"/>
  35. <meta name="color:Blockquote" content="#eeeeee" />
  36. <meta name="color:Borders" content="#eeeeee" />
  37.  
  38. <meta name="color:Ask Background" content="#eeeeee" />
  39. <meta name="color:Ask Text" content="#aaaaaa" />
  40.  
  41. <meta name="color:Perma Text" content="#999999" />
  42. <meta name="color:Perma Links" content="#eabcd0" />
  43. <meta name="color:Perma Links Hover" content="#666666" />
  44.  
  45. <meta name="color:Title" content="#555555" />
  46. <meta name="color:Header Background" content="#ffffff" />
  47. <meta name="color:Header Text" content="#999999" />
  48. <meta name="color:Header Borders" content="#eeeeee" />
  49. <meta name="color:Header Two Accent" content="#eacad8" />
  50. <meta name="color:Nav Hover Background" content="#eacad8" />
  51. <meta name="color:Nav Hover" content="#ffffff" />
  52.  
  53. <meta name="color:Scroll" content="#ffffff" />
  54. <meta name="color:Scrollbar" content="#dddddd" />
  55.  
  56.  
  57. <meta name="image:Background" content="" />
  58.  
  59.  
  60. <meta name="if:Image Fade" content="0" />
  61. <meta name="if:Hover Perma" content="0" />
  62.  
  63. <meta name="if:Show Captions" content="0" />
  64. <meta name="if:Show Tags" content="1" />
  65.  
  66. <meta name="if:Infinitescroll" content="0" />
  67. <meta name="if:Manual Load" content="0" />
  68.  
  69. <meta name="if:White Audio Player" content="1" />
  70. <meta name="if:Black Audio Player" content="0" />
  71.  
  72.  
  73. <meta name="select:Tumblr Controls" content="t_w" title="White" />
  74. <meta name="select:Tumblr Controls" content="t_g" title="Grey" />
  75. <meta name="select:Tumblr Controls" content="t_b" title="Black" />
  76.  
  77. <meta name="select:Header" content="one" title="One" />
  78. <meta name="select:Header" content="two" title="Two" />
  79.  
  80. <meta name="select:Description Width" content="50" title="50%" />
  81. <meta name="select:Description Width" content="60" title="60%" />
  82. <meta name="select:Description Width" content="70" title="70%" />
  83. <meta name="select:Description Width" content="80" title="80%" />
  84.  
  85. <meta name="select:Post Size" content="250" title="250px" />
  86. <meta name="select:Post Size" content="300" title="300px" />
  87. <meta name="select:Post Size" content="350" title="350px" />
  88. <meta name="select:Post Size" content="400" title="400px" />
  89. <meta name="select:Post Size" content="500" title="500px" />
  90.  
  91. <meta name="select:Post Size Permalinkpage" content="250" title="250px" />
  92. <meta name="select:Post Size Permalinkpage" content="300" title="300px" />
  93. <meta name="select:Post Size Permalinkpage" content="350" title="350px" />
  94. <meta name="select:Post Size Permalinkpage" content="400" title="400px" />
  95. <meta name="select:Post Size Permalinkpage" content="500" title="500px" />
  96.  
  97. <meta name="select:Columns" content="1" title="1" />
  98. <meta name="select:Columns" content="2" title="2" />
  99. <meta name="select:Columns" content="3" title="3" />
  100. <meta name="select:Columns" content="4" title="4" />
  101.  
  102.  
  103. <meta name="text:Post Margin" content="20" />
  104. <meta name="text:Link1" content="" />
  105. <meta name="text:Title1" content="" />
  106. <meta name="text:Link2" content="" />
  107. <meta name="text:Title2" content="" />
  108. <meta name="text:Link3" content="" />
  109. <meta name="text:Title3" content="" />
  110. <meta name="text:Link4" content="" />
  111. <meta name="text:Title4" content="" />
  112.  
  113.  
  114. <link href="http://static.tumblr.com/3yblkz0/EkLnyuqmx/pxu_ps.css" rel="stylesheet" type="text/css"/>
  115.  
  116.  
  117. <!--- Fonts --->
  118.  
  119.  
  120. <meta name="select:Body Font" content="Open Sans" title="Open Sans" />
  121. <meta name="select:Body Font" content="helvetica" title="Helvetica" />
  122. <meta name="select:Body Font" content="trebuchet ms" title="Trebuchet ms" />
  123. <meta name="select:Body Font" content="calibri" title="Calibri" />
  124. <meta name="select:Body Font" content="Roboto" title="Roboto" />
  125. <meta name="select:Body Font" content="Lato" title="Lato" />
  126. <meta name="select:Body Font" content="cambria" title="Cambria" />
  127. <meta name="select:Body Font" content="georgia" title="Georgia" />
  128. <meta name="select:Body Font" content="times new roman" title="Times New Roman" />
  129. <meta name="select:Body Font" content="Lora" title="Lora" />
  130. <meta name="select:Body Font" content="Droid Serif" title="Droid Serif" />
  131. <meta name="select:Body Font" content="courier" title="Courier" />
  132. <meta name="select:Body Font" content="consolas" title="Consolas" />
  133. <meta name="select:Body Font" content="lucida console" title="Lucida Console" />
  134.  
  135. <meta name="select:Body Font Size" content="8" title="8px" />
  136. <meta name="select:Body Font Size" content="9" title="9px" />
  137. <meta name="select:Body Font Size" content="10" title="10px" />
  138. <meta name="select:Body Font Size" content="11" title="11px" />
  139. <meta name="select:Body Font Size" content="12" title="12px" />
  140.  
  141.  
  142. <meta name="select:Header Font" content="Open Sans" title="Open Sans" />
  143. <meta name="select:Header Font" content="helvetica" title="Helvetica" />
  144. <meta name="select:Header Font" content="trebuchet ms" title="Trebuchet ms" />
  145. <meta name="select:Header Font" content="calibri" title="Calibri" />
  146. <meta name="select:Header Font" content="Roboto" title="Roboto" />
  147. <meta name="select:Header Font" content="Lato" title="Lato" />
  148. <meta name="select:Header Font" content="cambria" title="Cambria" />
  149. <meta name="select:Header Font" content="georgia" title="Georgia" />
  150. <meta name="select:Header Font" content="times new roman" title="Times New Roman" />
  151. <meta name="select:Header Font" content="Lora" title="Lora" />
  152. <meta name="select:Header Font" content="Droid Serif" title="Droid Serif" />
  153. <meta name="select:Header Font" content="courier" title="Courier" />
  154. <meta name="select:Header Font" content="consolas" title="Consolas" />
  155. <meta name="select:Header Font" content="lucida console" title="Lucida Console" />
  156.  
  157.  
  158. <meta name="select:Perma Font" content="Open Sans" title="Open Sans" />
  159. <meta name="select:Perma Font" content="helvetica" title="Helvetica" />
  160. <meta name="select:Perma Font" content="trebuchet ms" title="Trebuchet ms" />
  161. <meta name="select:Perma Font" content="calibri" title="Calibri" />
  162. <meta name="select:Perma Font" content="Roboto" title="Roboto" />
  163. <meta name="select:Perma Font" content="Lato" title="Lato" />
  164. <meta name="select:Perma Font" content="cambria" title="Cambria" />
  165. <meta name="select:Perma Font" content="georgia" title="Georgia" />
  166. <meta name="select:Perma Font" content="times new roman" title="Times New Roman" />
  167. <meta name="select:Perma Font" content="Lora" title="Lora" />
  168. <meta name="select:Perma Font" content="Droid Serif" title="Droid Serif" />
  169. <meta name="select:Perma Font" content="courier" title="Courier" />
  170. <meta name="select:Perma Font" content="consolas" title="Consolas" />
  171. <meta name="select:Perma Font" content="lucida console" title="Lucida Console" />
  172.  
  173.  
  174. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300|Roboto:400,700,300|Lato:400,300,700|Lora:400,700|Droid+Serif:400,700' rel='stylesheet' type='text/css' />
  175.  
  176.  
  177.  
  178. <style type="text/css">
  179.  
  180.  
  181.  
  182. /* Tumblr Controls */
  183.  
  184.  
  185. .t_b .tmblr-iframe--desktop-logged-in-controls, .tmblr-iframe, .t_b #tumblr_controls, #tumblr_controls {
  186. top:0%!important;
  187. right:0%!important;
  188. position:fixed!important;
  189. z-index:999999999!important;
  190. }
  191.  
  192. .t_w .tmblr-iframe--desktop-logged-in-controls, .t_w #tumblr_controls {
  193. -webkit-filter:invert(100%);
  194. -moz-filter:invert(100%);
  195. -o-filter:invert(100%);
  196. -ms-filter:invert(100%);
  197. filter:invert(100%);
  198. opacity:0.3;
  199. }
  200.  
  201. .t_g .tmblr-iframe--desktop-logged-in-controls, .t_g #tumblr_controls {
  202. -webkit-filter:invert(70%);
  203. -moz-filter:invert(70%);
  204. -o-filter:invert(70%);
  205. -ms-filter:invert(70%);
  206. filter:invert(70%);
  207. opacity:0.4;
  208. }
  209.  
  210.  
  211.  
  212. /* Scrollbar */
  213.  
  214.  
  215. ::-webkit-scrollbar { width:5px; height:5px; }
  216. ::-webkit-scrollbar-track-piece { background-color:{color:Scroll}; }
  217. ::-webkit-scrollbar-thumb { background-color:{color:Scrollbar}; }
  218.  
  219.  
  220.  
  221. /* Body - General */
  222.  
  223.  
  224. body {
  225. margin:0;
  226. padding:0;
  227. border:0;
  228. background:url('{image:Background}');
  229. background-attachment:fixed;
  230. background-repeat:repeat;
  231. background-color:{color:Background};
  232. color:{color:Text};
  233. font-family:{select:Body Font}, sans-serif;
  234. font-size:{select:Body Font Size}px;
  235. line-height:140%;
  236. word-wrap:break-word;
  237. }
  238.  
  239. a {
  240. color:{color:Links};
  241. text-decoration:none;
  242. transition-duration: 0.6s;
  243. -moz-transition-duration: 0.6s;
  244. -webkit-transition-duration: 0.6s;
  245. -o-transition-duration: 0.6s;
  246. }
  247.  
  248. a:hover { color:{color:Links Hover}; }
  249.  
  250. b, strong { color:{color:Bold}; font-weight:bold; }
  251.  
  252. i, em { color:{color:Italic}; font-style:italic; }
  253.  
  254. h1, h2, h3, h4, h5 {
  255. margin:0;
  256. font-size:120%;
  257. font-weight:normal;
  258. line-height:120%;
  259. }
  260.  
  261. .posts > h2 {
  262. margin:0px 0px 5px 0px;
  263. display:block;
  264. color:{color:Post Title};
  265. font-size:14px;
  266. line-height:120%;
  267. letter-spacing:1.5px;
  268. text-transform:uppercase;
  269. }
  270.  
  271. .posts > h2:only-child { margin:0; }
  272.  
  273. .tags, #asker, #audio_text, footer {
  274. font-size:8px;
  275. letter-spacing:1.5px;
  276. text-transform:uppercase;
  277. }
  278.  
  279. nav a, ul.perma_p li p:nth-of-type(1) {
  280. font-size:8px;
  281. letter-spacing:2px;
  282. text-transform:uppercase;
  283. }
  284.  
  285. small, sub, sup { font-size:90%; }
  286.  
  287. big { font-size:110%; }
  288.  
  289. sub, sup, small, big { vertical-align:baseline; }
  290.  
  291. p { margin:5px 0; padding:0; }
  292.  
  293. p:first-of-type :not(.tags) { margin-top:0; }
  294.  
  295. p:last-of-type { margin-bottom:0; }
  296.  
  297. pre {
  298. margin:5px 0;
  299. padding:2px 4px;
  300. background:#f4f4f4;
  301. white-space:pre-wrap;
  302. word-wrap:break-word;
  303. }
  304.  
  305. blockquote {
  306. margin:5px 5px 5px 0px;
  307. padding:2px 0 2px 10px;
  308. border-left:1px solid {color:Blockquote};
  309. }
  310.  
  311. .cap { margin:10px 0 0 0; }
  312.  
  313. .cp { display:none; }
  314.  
  315. ul, ol { padding:0; margin:5px 15px; }
  316.  
  317. ul { list-style:circle; }
  318.  
  319.  
  320.  
  321. /* Center wrapper - Posts */
  322.  
  323.  
  324. #wrapper {
  325. {block:IndexPage}
  326. width:calc(({select:Post Size}px + 20px + {text:Post Margin}px*2)*{select:Columns});
  327. {/block:IndexPage}
  328. {block:PermalinkPage}
  329. width:calc({select:Post Size Permalinkpage}px + 20px);
  330. {/block:PermalinkPage}
  331. margin:80px auto;
  332. padding:0;
  333. position:relative;
  334. border:0;
  335. }
  336.  
  337. .posts {
  338. {block:IndexPage}
  339. width:{select:Post Size}px;
  340. margin:{text:Post Margin}px;
  341. {/block:IndexPage}
  342. {block:PermalinkPage}
  343. width:{select:Post Size Permalinkpage}px;
  344. margin:{text:Post Margin}px auto 10px auto;
  345. {/block:PermalinkPage}
  346. height:auto;
  347. {block:ifHoverPerma}
  348. min-height:60px;
  349. {/block:ifHoverPerma}
  350. padding:10px;
  351. position:relative;
  352. background:{color:Posts};
  353. color:{color:Text};
  354. }
  355.  
  356.  
  357.  
  358. /* Image */
  359.  
  360.  
  361. .posts img, img :not(.lightbox-image) { max-width:100%; height:auto; }
  362.  
  363. #photo img { width:100%; display:block;}
  364.  
  365.  
  366.  
  367. /* Photoset */
  368.  
  369.  
  370. .tmblr-lightbox, #tumblr_lightbox { background:rgba({RGBcolor:Background}, .8)!important; }
  371.  
  372. .vignette, #vignette, .lightbox-caption, #tumblr_lightbox_caption { opacity:0!important; }
  373.  
  374. .lightbox-image, #tumblr_lightbox img {
  375. border-radius:0px!important;
  376. -webkit-border-radius:0px!important;
  377. -moz-border-radius:0px!important;
  378. box-shadow:none!important;
  379. -webkit-box-shadow:none!important;
  380. -moz-box-shadow:none!important;
  381. }
  382.  
  383.  
  384.  
  385. /* Video */
  386.  
  387.  
  388. #vid, #vid iframe { display:block; overflow:hidden; }
  389.  
  390.  
  391.  
  392. {block:IndexPage}
  393. {block:ifImageFade}
  394. #vid, .photo-data, #photo img {
  395. opacity:.7;
  396. -webkit-transition:all .7s ease;
  397. -moz-transition:all .7s ease;
  398. -o-transition:all .7s ease;
  399. transition:all .7s ease;
  400. }
  401.  
  402. .posts:hover #photo img, .posts:hover .photo-data, .posts:hover #vid { opacity:1; }
  403. {/block:ifImageFade}
  404. {/block:IndexPage}
  405.  
  406.  
  407.  
  408. /* Audio */
  409.  
  410.  
  411. iframe.tumblr_audio_player {
  412. width:26px;
  413. height:26px;
  414. display:block;
  415. overflow:hidden;
  416. border:17px solid
  417. {block:ifWhiteAudioPlayer}#fff{/block:ifWhiteAudioPlayer}
  418. {block:ifBlackAudioPlayer}#000{/block:ifBlackAudioPlayer};
  419. background:
  420. {block:ifWhiteAudioPlayer}#fff{/block:ifWhiteAudioPlayer}
  421. {block:ifBlackAudioPlayer}#000{/block:ifBlackAudioPlayer};
  422. }
  423.  
  424. #audio tr td { border:1px solid {color:Borders}; }
  425.  
  426. #audio tr td:first-of-type { border-right:none; }
  427. #audio tr td:last-of-type { border-left:none; }
  428.  
  429. #audio_text {
  430. padding:10px 15px 10px 10px;
  431. background:
  432. {block:ifWhiteAudioPlayer}#fff{/block:ifWhiteAudioPlayer}
  433. {block:ifBlackAudioPlayer}#000{/block:ifBlackAudioPlayer};
  434. color:#aaa;
  435. line-height:10px;
  436. text-align:right;
  437. }
  438.  
  439. iframe.soundcloud_audio_player {
  440. {block:IndexPage}
  441. width:{select:Post Size}px;
  442. {/block:IndexPage}
  443. {block:PermalinkPage}
  444. width:{select:Post Size Permalinkpage}px;
  445. {/block:PermalinkPage}
  446. height:auto!important;
  447. display:block;
  448. }
  449.  
  450. iframe.spotify_audio_player { height:80px!important; display:block; }
  451.  
  452.  
  453.  
  454. /* Ask */
  455.  
  456.  
  457. #question {
  458. margin-bottom:20px;
  459. padding:10px;
  460. background:{color:Ask Background};
  461. color:{color:Ask Text};
  462. }
  463.  
  464. #question:after {
  465. content:"";
  466. width:0;
  467. height:0;
  468. margin:10px 0 0 0;
  469. position:absolute;
  470. display:block;
  471. border-style:solid;
  472. border-width:0 15px 15px 0;
  473. border-color:transparent {color:Ask Background} transparent transparent;
  474. }
  475.  
  476. #asker {
  477. margin:-20px 0 0 35px;
  478. position:absolute;
  479. line-height:15px;
  480. }
  481.  
  482.  
  483.  
  484. /* Quote */
  485.  
  486.  
  487. #quote {
  488. padding:5px;
  489. font-size:120%;
  490. font-style:italic;
  491. line-height:120%;
  492. text-align:center;
  493. }
  494.  
  495. #source {
  496. margin-top:5px;
  497. font-size:{select:Body Font Size}px;
  498. font-style:normal;
  499. }
  500.  
  501.  
  502.  
  503. /* Chat */
  504.  
  505.  
  506. p#chat { margin:0 1px; padding:2px 0px }
  507.  
  508.  
  509.  
  510. /* Perma - Tags - Indexpage */
  511.  
  512.  
  513. ul.perma {
  514. margin:0;
  515. padding:10px 10px 20px 10px;
  516. {block:ifHoverPerma}
  517. width:{select:Post Size}px;
  518. position:absolute;
  519. opacity:0;
  520. z-index:99999;
  521. {/block:ifHoverPerma}
  522. list-style:none;
  523. display:-webkit-box;
  524. display:-moz-box;
  525. display:-ms-flexbox;
  526. display:-webkit-flex;
  527. display:flex;
  528. -webkit-flex-flow:row wrap;
  529. flex-flow:row nowrap;
  530. -webkit-justify-content:flex-start;
  531. justify-content:flex-start;
  532. box-sizing:border-box;
  533. background:{color:Posts};
  534. color:{color:Perma Text};
  535. font-family:{select:Perma Font}, sans-serif;
  536. -webkit-transition:all .7s ease;
  537. -moz-transition:all .7s ease;
  538. -o-transition:all .7s ease;
  539. transition:all .7s ease;
  540. }
  541.  
  542. {block:ifHoverPerma}
  543. .posts:hover ul.perma { opacity:1; }
  544. {/block:ifHoverPerma}
  545.  
  546. ul.perma a { display:block; color:{color:Perma Links}; }
  547.  
  548. ul.perma a:hover { color:{color:Perma Links Hover}; }
  549.  
  550. ul.perma li:first-of-type {
  551. width:70px;
  552. border-right:1px solid {color:Borders};
  553. font-size:38px;
  554. font-weight:300;
  555. line-height:38px;
  556. }
  557.  
  558. ul.perma li:last-of-type { margin-left:10px; }
  559.  
  560. ul.perma li:last-of-type p:nth-of-type(1) {
  561. font-size:12px;
  562. line-height:14px;
  563. letter-spacing:3px;
  564. text-transform:uppercase;
  565. }
  566.  
  567. ul.perma li:last-of-type p:nth-of-type(3) {
  568. font-size:7px;
  569. letter-spacing:1px;
  570. text-transform:uppercase;
  571. }
  572.  
  573. .tags {
  574. margin-top:10px;
  575. padding-top:10px;
  576. overflow:hidden;
  577. border-top:1px solid {color:Borders};
  578. text-overflow:ellipsis;
  579. white-space:nowrap;
  580. }
  581.  
  582. .tags a { margin-right:7px; }
  583.  
  584.  
  585.  
  586. /* Post Information - Notes - Permalinkpage */
  587.  
  588.  
  589. ul.perma_p {
  590. margin:10px 0 0 0;
  591. padding:10px 0 0 0;
  592. list-style:none;
  593. display:-webkit-box;
  594. display:-moz-box;
  595. display:-ms-flexbox;
  596. display:-webkit-flex;
  597. display:flex;
  598. -webkit-flex-flow:row wrap;
  599. flex-flow:row nowrap;
  600. -webkit-justify-content:flex-start;
  601. justify-content:flex-start;
  602. border-top:1px solid {color:Borders};
  603. font-family:{select:Perma Font}, sans-serif;
  604. }
  605.  
  606. ul.perma_p li {
  607. width:calc(100% / (1
  608. {block:RebloggedFrom}+ 1 {/block:RebloggedFrom}
  609. {block:HasTags}+ 1{/block:HasTags}
  610. ));
  611. margin:0 5px;
  612. letter-spacing:.5px;
  613. text-transform:lowercase;
  614. }
  615.  
  616. ul.perma_p li:first-of-type { margin-left:0; }
  617. ul.perma_p li:last-of-type { margin-right:0; }
  618.  
  619. #tags {
  620. text-align:justify;
  621. word-break:break-all;
  622. word-wrap:break-word;
  623. }
  624.  
  625. #tags a { margin-right:5px; }
  626.  
  627. .not {
  628. padding:5px;
  629. background:{color:Posts};
  630. letter-spacing:.5px;
  631. text-align:center;
  632. cursor:help;
  633. }
  634.  
  635. ol.notes {
  636. margin:0;
  637. padding:0;
  638. display:none;
  639. list-style-type:none;
  640. }
  641.  
  642. ol.notes li.note { padding:10px 0px; }
  643.  
  644. ol.notes li.note img.avatar { display:none; }
  645.  
  646.  
  647. ul.perma p, ul.perma_p li p { margin:0; }
  648.  
  649.  
  650. /* Header */
  651.  
  652.  
  653. .header {
  654. {block:IndexPage}
  655. width:{select:Post Size}px;
  656. margin:{text:Post Margin}px;
  657. {/block:IndexPage}
  658. {block:PermalinkPage}
  659. width:{select:Post Size Permalinkpage}px;
  660. margin:{text:Post Margin}px auto;
  661. {/block:PermalinkPage}
  662. height:auto;
  663. padding:10px;
  664. background:{color:Header Background};
  665. color:{color:Header Text};
  666. font-family:{select:Header Font}, sans-serif;
  667. }
  668.  
  669. .outline {
  670. height:100%;
  671. padding:10px;
  672. box-sizing: border-box;
  673. border:1px solid {color:Header Borders};
  674. }
  675.  
  676. .header h1 {
  677. margin:0 0 20px 0;
  678. color:{color:Title};
  679. font-weight:normal;
  680. letter-spacing:3px;
  681. text-transform:uppercase;
  682. }
  683.  
  684. .header h1.one { text-align:center; }
  685.  
  686. .header h1.two { text-align:left; }
  687.  
  688. .flex {
  689. margin:0;
  690. padding:0;
  691. display:-webkit-box;
  692. display:-moz-box;
  693. display:-ms-flexbox;
  694. display:-webkit-flex;
  695. display:flex;
  696. -webkit-flex-flow: row wrap;
  697. flex-flow:row nowrap;
  698. -webkit-justify-content: flex-start;
  699. justify-content: flex-start;
  700. }
  701.  
  702. {block:HideTitle}
  703. .flex.two { margin-top:5px; }
  704. {/block:HideTitle}
  705.  
  706. .desc {
  707. width:{select:Description Width}%;
  708. text-align:justify;
  709. word-break:break-all;
  710. word-wrap:break-word;
  711. }
  712.  
  713. .desc.one {
  714. padding-right:10px;
  715. border-right:1px solid {color:Header Borders};
  716. }
  717.  
  718. .desc.two { margin-right:10px; }
  719.  
  720. nav {
  721. width:calc(100% - {select:Description Width}%);
  722. {block:ShowDescription}
  723. margin-left:10px;
  724. {/block:ShowDescription}
  725. }
  726.  
  727. nav a {
  728. padding:3px 0;
  729. display:block;
  730. color:{color:Header Text};
  731. -webkit-transition:all .7s ease;
  732. -moz-transition:all .7s ease;
  733. -o-transition:all .7s ease;
  734. transition:all .7s ease;
  735. }
  736.  
  737. nav a:hover {
  738. padding-left:10px;
  739. background:{color:Nav Hover Background};
  740. color:{color:Nav Hover};
  741. font-style:italic;
  742. }
  743.  
  744. nav.two:before, .desc.two:before {
  745. content:"";
  746. width:30px;
  747. height:2px;
  748. top:-5px;
  749. left:0;
  750. position:relative;
  751. display:block;
  752. background:{color:Header Two Accent};
  753. }
  754.  
  755.  
  756.  
  757. /* Footer - Pagination - Manual Load */
  758.  
  759.  
  760. footer { margin:80px auto; text-align:center; }
  761.  
  762. .pagination, #load {
  763. padding:5px 10px;
  764. position:relative;
  765. display:inline;
  766. background:{color:Posts};
  767. color:{color:Text};
  768. }
  769.  
  770. .pagination a, a#load { margin:0 5px; cursor:pointer; }
  771.  
  772.  
  773. {block:ifInfinitescroll}
  774. .pagination { display:none; }
  775.  
  776. #infscr-loading { display:none!important; }
  777. {/block:ifInfinitescroll}
  778.  
  779.  
  780.  
  781. /* Tooltips */
  782.  
  783.  
  784. #s-m-t-tooltip{
  785. max-width:300px;
  786. margin:25px 15px;
  787. padding:0 5px;
  788. z-index:999999;
  789. background:{color:Posts};
  790. color:{color:Text};
  791. letter-spacing:1.5px;
  792. }
  793.  
  794.  
  795.  
  796. {CustomCSS}
  797.  
  798.  
  799.  
  800. </style>
  801.  
  802.  
  803.  
  804. <!---- Scripts ---->
  805.  
  806.  
  807. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  808.  
  809. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  810. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  811. <script src="http://static.tumblr.com/3yblkz0/Bu3nywvqg/shythemes_vr.js"></script>
  812. <script>
  813. $(document).ready(function(){
  814. $('.not').click(function(){
  815. $(".notes").slideToggle("slow");
  816. });
  817. $("[title],a[title],img[title]").style_my_tooltips({
  818. tip_follows_cursor:true,
  819. tip_delay_time:50,
  820. tip_fade_speed:500,
  821. attribute:"title"
  822. });
  823. $('.photo-slideshow').pxuPhotoset({
  824. lightbox: true,
  825. rounded: false,
  826. gutter: '5px',
  827. borderRadius: '0px',
  828. photoset: '.photo-slideshow',
  829. photoWrap: '.photo-data',
  830. photo: '.pxu-photo'
  831. });
  832. });
  833. </script>
  834.  
  835.  
  836.  
  837. </head>
  838. <body class="{select:Tumblr Controls}">
  839.  
  840.  
  841.  
  842. <section id="wrapper">
  843.  
  844.  
  845.  
  846. <article class="header"><div class="outline">
  847. {block:ShowTitle}<h1 class="{select:Header}">{Title}</h1>{/block:ShowTitle}
  848. <div class="flex {select:Header}">
  849. {block:ShowDescription}<div class="desc {select:Header}">{Description}</div>{block:ShowDescription}
  850. <nav class="{select:Header}">
  851. <a href="/">refresh</a>
  852. <a href="/ask">message</a>
  853. <a href="/archive">archive</a>
  854. {block:ifLink1}<a href="{text:Link1}">{text:Title1}</a>{/block:ifLink1}
  855. {block:ifLink2}<a href="{text:Link2}">{text:Title2}</a>{/block:ifLink2}
  856. {block:ifLink3}<a href="{text:Link3}">{text:Title3}</a>{/block:ifLink3}
  857. {block:ifLink4}<a href="{text:Link4}">{text:Title4}</a>{/block:ifLink4}
  858. </nav>
  859. </div>
  860. </div></article>
  861.  
  862.  
  863.  
  864. {block:Posts}
  865. <article class="posts">
  866.  
  867.  
  868.  
  869. {block:IndexPage}
  870. <ul class="perma">
  871. {block:Date}
  872. <li><a href="{Permalink}" {block:ifInfinitescroll}target="_blank"{/block:ifInfinitescroll}>{DayOfMonth}</a></li>
  873. <li><p>{DayOfWeek}</p><p>{Month}</p><p>W{WeekOfYear}</p></li>
  874. {/block:Date}
  875. </ul>
  876. {/block:IndexPage}
  877.  
  878.  
  879. {block:ContentSource}
  880. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  881. {/block:SourceLogo}
  882. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  883. {/block:ContentSource}
  884.  
  885.  
  886. {block:Photo}
  887. <div id="photo">
  888. {block:IndexPage}
  889. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  890. {/block:IndexPage}
  891. {block:PermalinkPage}
  892. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  893. {/block:PermalinkPage}
  894. </div>
  895. {/block:Photo}
  896.  
  897.  
  898. {block:Photoset}
  899. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  900. {block:Photos}
  901. <div class="photo-data">
  902. <div class="pxu-photo">
  903. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  904. </div>
  905. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  906. </div>
  907. {/block:Photos}
  908. </div>
  909. {/block:Photoset}
  910.  
  911.  
  912. {block:Video}
  913. <div id="vid">{Video-500}</div>
  914. {/block:Video}
  915.  
  916.  
  917. {block:Audio}
  918. <table id="audio" border="0" cellpadding="0" cellspacing="0" width="100%">
  919. <tr>
  920. <td valign="middle" width="60px">
  921. {block:ifWhiteAudioPlayer}{AudioPlayerWhite}{/block:ifWhiteAudioPlayer}
  922. {block:ifBlackAudioPlayer}{AudioPlayerBlack}{/block:ifBlackAudioPlayer}
  923. </td>
  924. <td id="audio_text" valign="middle">
  925. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}{block:Artist}<br/>by {Artist}{/block:Artist}
  926. </td>
  927. </tr>
  928. </table>
  929. {/block:Audio}
  930.  
  931.  
  932. {block:Text}
  933. {block:Title}<h2>{Title}</h2>{/block:Title}
  934. {Body}
  935. {/block:Text}
  936.  
  937.  
  938. {block:Link}
  939. <h2><a href="{URL}" {Target}>{Name}</a></h2>
  940. {block:Description}{Description}{/block:Description}
  941. {/block:Link}
  942.  
  943.  
  944. {block:Answer}
  945. <div id="question">{Question}</div> <p id="asker">{Asker}</p>
  946. {Answer}
  947. {/block:Answer}
  948.  
  949.  
  950. {block:Quote}
  951. <div id="quote">
  952. {Quote}
  953. {block:Source}<p id="source">— {Source}</p>{/block:Source}
  954. </div>
  955. {/block:Quote}
  956.  
  957.  
  958. {block:Chat}
  959. {block:Title}<h2>{Title}</h2>{/block:Title}
  960. {block:Lines}
  961. <p id="chat" >{block:Label}<b>{Label}</b>{/block:Label} {Line}</p>
  962. {/block:Lines}
  963. {/block:Chat}
  964.  
  965.  
  966. {block:Caption}<div class="cap {block:IndexPage}{block:ifnotShowCaptions}cp{/block:ifnotShowCaptions}{/block:IndexPage}">{Caption}</div>{/block:Caption}
  967.  
  968.  
  969. {block:IndexPage}{block:ifShowTags}{block:HasTags}
  970. <p class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>
  971. {/block:HasTags}{/block:ifShowTags}{/block:IndexPage}
  972.  
  973.  
  974. {block:PermalinkPage}{block:Date}
  975. <ul class="perma_p">
  976. <li><p>date</p>
  977. <p>{DayOfWeek}, week {WeekOfYear}</p>
  978. <p>{DayOfMonth} {Month}, {Year}</p>
  979. </li>
  980. {block:RebloggedFrom}
  981. <li><p>by</p>
  982. <p>origin <a href="{ReblogRootURL}">{ReblogRootName}</a></p>
  983. <p>via <a href="{ReblogParentURL}">{ReblogParentName}</a></p>
  984. </li>
  985. {/block:RebloggedFrom}
  986. {block:HasTags}
  987. <li><p>tags</p>
  988. <p id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p>
  989. </li>
  990. {/block:HasTags}
  991. </ul>
  992. {/block:Date}{/block:PermalinkPage}
  993.  
  994.  
  995.  
  996. </article>
  997.  
  998.  
  999.  
  1000. {block:PermalinkPage}
  1001. {block:NoteCount}<div class="not">{NoteCountWithLabel}</div>{/block:NoteCount}
  1002. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1003. {/block:PermalinkPage}
  1004.  
  1005.  
  1006.  
  1007. {/block:Posts}
  1008. </section>
  1009.  
  1010.  
  1011.  
  1012. {block:IndexPage}
  1013. <footer>
  1014. {block:Pagination}
  1015. <div class="pagination">
  1016. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  1017. {CurrentPage} / {TotalPages}
  1018. {block:NextPage} <a id="next" href="{NextPage}">next</a>{/block:NextPage}
  1019. </div>
  1020. {/block:Pagination}
  1021. {block:ifInfinitescroll}
  1022. {block:ifManualLoad}
  1023. <a id="load">load more</a>
  1024. {/block:ifManualLoad}
  1025. {/block:ifInfinitescroll}
  1026. </footer>
  1027. {/block:IndexPage}
  1028.  
  1029.  
  1030.  
  1031. <a href="http://ladmilk.tumblr.com" style="padding:10px; bottom:5px; left:5px; position:fixed;" title="Theme by Heidi">cr.</a>
  1032.  
  1033.  
  1034.  
  1035. <!---- Scripts ---->
  1036.  
  1037.  
  1038. {block:IndexPage}
  1039. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  1040. {block:ifInfinitescroll}
  1041. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1042. {/block:ifInfinitescroll}
  1043. <script>
  1044. $(document).ready(function(){
  1045. var $container = $('#wrapper');
  1046. $container.masonry({
  1047. itemSelector: 'article',
  1048. columnWidth: {select:Post Size} + 20 + {text:Post Margin}*2,
  1049. });
  1050. $container.imagesLoaded(function(){
  1051. $container.masonry();
  1052. });
  1053. {block:ifInfinitescroll}
  1054. $container.infinitescroll({
  1055. itemSelector : ".posts",
  1056. navSelector : ".pagination",
  1057. nextSelector : ".pagination a#next",
  1058. loadingImg : "",
  1059. loadingText : "<em> </em>",
  1060. bufferPx : 1000,
  1061. extraScrollPx: 500,
  1062. {block:ifManualLoad}
  1063. errorCallback: function () { jQuery('a#load').delay(50).fadeOut(); },
  1064. {/block:ifManualLoad}
  1065. },
  1066. function( newElements ) {
  1067. resizeVideos();
  1068. $(newElements).find('.photo-slideshow').pxuPhotoset({
  1069. lightbox: true,
  1070. rounded: false,
  1071. gutter: '5px',
  1072. borderRadius: '0px',
  1073. photoset: '.photo-slideshow',
  1074. photoWrap: '.photo-data',
  1075. photo: '.pxu-photo'
  1076. });
  1077. var $newElems = $( newElements ).css({ opacity: 0 });
  1078. $newElems.imagesLoaded(function(){
  1079. $container.masonry( 'appended', $newElems );
  1080. $newElems.animate({ opacity: 1 });
  1081. });
  1082. });
  1083. {block:ifnotManualLoad}
  1084. if($(window).height() >= $(document).height()){
  1085. $container.infinitescroll('retrieve'); return false;
  1086. };
  1087. {/block:ifnotManualLoad}
  1088. {block:ifManualLoad}
  1089. $(window).unbind('.infscr');
  1090. $('a#load').click(function() {
  1091. $container.infinitescroll('retrieve');return false;
  1092. });
  1093. {/block:ifManualLoad}
  1094. {/block:ifInfinitescroll}
  1095. });
  1096. </script>
  1097. {/block:IndexPage}
  1098.  
  1099.  
  1100.  
  1101. </body>
  1102. </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!