API tools faq
paste
Advertisement
zojoh

Thirty One

zojoh
Aug 4th, 2013
8,734
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---
  5.  
  6. Theme #31 by Heidi @ladmilk
  7.  
  8. Credit:
  9. Masonry: (masonry.desandro.com)
  10. Infinitescroll: Paulirish (https://github.com/infinite-scroll/infinite-scroll)
  11. Photoset: PixelUnion (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  12. Tool-tips: Malihu (manos.malihu.gr/style-my-tooltips-jquery-plugin/)
  13. Video Resizing: Shy Themes (http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos)
  14.  
  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="#f8f8f8" />
  28. <meta name="color:Posts" content="#ffffff" />
  29. <meta name="color:Post Title" content="#444444" />
  30. <meta name="color:Post Title Background" content="#f5f5f5" />
  31. <meta name="color:Text" content="#888888" />
  32. <meta name="color:Links" content="#000000"/>
  33. <meta name="color:Links Hover" content="#e5e5e5"/>
  34. <meta name="color:Bold" content="#444444"/>
  35. <meta name="color:Italic" content="#cccccc"/>
  36. <meta name="color:Blockquote Border" content="#eeeeee"/>
  37. <meta name="color:Blockquote Background" content="#f7f7f7"/>
  38. <meta name="color:Blockquote Text" content="#aaaaaa"/>
  39. <meta name="color:Borders" content="#eeeeee"/>
  40.  
  41. <meta name="color:Ask Background" content="#f8f8f8"/>
  42. <meta name="color:Ask Text" content="#888888"/>
  43.  
  44. <meta name="color:Perma Background" content="#222222"/>
  45. <meta name="color:Perma Text" content="#eeeeee"/>
  46. <meta name="color:Tags" content="#bbbbbb"/>
  47.  
  48. <meta name="color:Bottom Title Background" content="#222222"/>
  49. <meta name="color:Bottom Title Text" content="#eeeeee"/>
  50. <meta name="color:Bottom Background" content="#ffffff"/>
  51. <meta name="color:Bottom Borders" content="#eeeeee"/>
  52. <meta name="color:Bottom Text" content="#888888"/>
  53. <meta name="color:Navigation Background" content="#eeeeee"/>
  54. <meta name="color:Navigation Links" content="#999999"/>
  55. <meta name="color:Navigation Hover Background" content="#444444"/>
  56. <meta name="color:Navigation Hover Links" content="#eeeeee"/>
  57.  
  58. <meta name="color:Selection Background" content="#222222"/>
  59. <meta name="color:Selection Text" content="#dddddd"/>
  60. <meta name="color:Scroll" content="#ffffff"/>
  61. <meta name="color:Scrollbar" content="#dddddd"/>
  62.  
  63.  
  64. <meta name="image:Background" content="" />
  65. <meta name="image:Top" content="" />
  66.  
  67.  
  68. <meta name="if:Sticky Top" content="1" />
  69. <meta name="if:Click to Show Bottom" content="0" />
  70. <meta name="if:Hover Perma" content="1" />
  71. <meta name="if:Show Captions" content="1" />
  72.  
  73. <meta name="if:Infinitescroll" content="0" />
  74. <meta name="if:Manual Load" content="0" />
  75.  
  76.  
  77. <meta name="select:Tumblr Controls" content="t_w" title="White" />
  78. <meta name="select:Tumblr Controls" content="t_g" title="Grey" />
  79. <meta name="select:Tumblr Controls" content="t_b" title="Black" />
  80.  
  81. <meta name="select:Blockquote" content="bnormal" title="Default" />
  82. <meta name="select:Blockquote" content="bcenter" title="Center" />
  83.  
  84. <meta name="select:Tags" content="tshow" title="Show" />
  85. <meta name="select:Tags" content="thover" title="Hover" />
  86. <meta name="select:Tags" content="tnone" title="None" />
  87.  
  88. <meta name="select:Columns" content="1" title="1" />
  89. <meta name="select:Columns" content="2" title="2" />
  90. <meta name="select:Columns" content="3" title="3" />
  91.  
  92. <meta name="select:Post Size" content="200" title="200px" />
  93. <meta name="select:Post Size" content="250" title="250px" />
  94. <meta name="select:Post Size" content="300" title="300px" />
  95. <meta name="select:Post Size" content="350" title="350px" />
  96. <meta name="select:Post Size" content="400" title="400px" />
  97. <meta name="select:Post Size" content="450" title="450px" />
  98. <meta name="select:Post Size" content="500" title="500px" />
  99.  
  100. <meta name="select:Post Size Permalinkpage" content="200" title="200px" />
  101. <meta name="select:Post Size Permalinkpage" content="250" title="250px" />
  102. <meta name="select:Post Size Permalinkpage" content="300" title="300px" />
  103. <meta name="select:Post Size Permalinkpage" content="350" title="350px" />
  104. <meta name="select:Post Size Permalinkpage" content="400" title="400px" />
  105. <meta name="select:Post Size Permalinkpage" content="450" title="450px" />
  106. <meta name="select:Post Size Permalinkpage" content="500" title="500px" />
  107.  
  108. <meta name="select:Margin" content="10" title="10px" />
  109. <meta name="select:Margin" content="15" title="15px" />
  110. <meta name="select:Margin" content="20" title="20px" />
  111. <meta name="select:Margin" content="30" title="30px" />
  112. <meta name="select:Margin" content="40" title="40px" />
  113. <meta name="select:Margin" content="50" title="50px" />
  114. <meta name="select:Margin" content="60" title="60px" />
  115.  
  116. <meta name="select:Hover Perma Width" content="full" title="Post Size" />
  117. <meta name="select:Hover Perma Width" content="fire" title="200px" />
  118. <meta name="select:Hover Perma Width" content="tre" title="150px" />
  119. <meta name="select:Hover Perma Width" content="to" title="125px" />
  120. <meta name="select:Hover Perma Width" content="en" title="100px" />
  121.  
  122. <meta name="text:Top Text" content="" />
  123. <meta name="text:Bottom Title" content="" />
  124. <meta name="text:Link1" content="" />
  125. <meta name="text:Title1" content="" />
  126. <meta name="text:Link2" content="" />
  127. <meta name="text:Title2" content="" />
  128. <meta name="text:Link3" content="" />
  129. <meta name="text:Title3" content="" />
  130.  
  131.  
  132. <link href="http://static.tumblr.com/3yblkz0/EkLnyuqmx/pxu_ps.css" rel="stylesheet" type="text/css"/>
  133.  
  134.  
  135. <!------- Fonts -------->
  136.  
  137.  
  138. <meta name="select:Body Font" content="Lato" title="Lato" />
  139. <meta name="select:Body Font" content="Roboto" title="Roboto" />
  140. <meta name="select:Body Font" content="Open Sans" title="Open Sans" />
  141. <meta name="select:Body Font" content="calibri" title="Calibri" />
  142. <meta name="select:Body Font" content="helvetica" title="Helvetica" />
  143. <meta name="select:Body Font" content="trebuchet ms" title="Trebuchet ms" />
  144. <meta name="select:Body Font" content="Lora" title="Lora" />
  145. <meta name="select:Body Font" content="Droid Serif" title="Droid Serif" />
  146. <meta name="select:Body Font" content="cambria" title="Cambria" />
  147. <meta name="select:Body Font" content="georgia" title="Georgia" />
  148. <meta name="select:Body Font" content="times new roman" title="Times New Roman" />
  149. <meta name="select:Body Font" content="courier" title="Courier" />
  150. <meta name="select:Body Font" content="consolas" title="Consolas" />
  151. <meta name="select:Body Font" content="lucida console" title="Lucida Console" />
  152.  
  153. <meta name="select:Body Font Size" content="8" title="8px" />
  154. <meta name="select:Body Font Size" content="9" title="9px" />
  155. <meta name="select:Body Font Size" content="10" title="10px" />
  156. <meta name="select:Body Font Size" content="11" title="11px" />
  157.  
  158. <meta name="select:Title Font" content="Lato" title="Lato" />
  159. <meta name="select:Title Font" content="Roboto" title="Roboto" />
  160. <meta name="select:Title Font" content="Open Sans" title="Open Sans" />
  161. <meta name="select:Title Font" content="calibri" title="Calibri" />
  162. <meta name="select:Title Font" content="helvetica" title="Helvetica" />
  163. <meta name="select:Title Font" content="trebuchet ms" title="Trebuchet ms" />
  164. <meta name="select:Title Font" content="Lora" title="Lora" />
  165. <meta name="select:Title Font" content="Droid Serif" title="Droid Serif" />
  166. <meta name="select:Title Font" content="cambria" title="Cambria" />
  167. <meta name="select:Title Font" content="georgia" title="Georgia" />
  168. <meta name="select:Title Font" content="times new roman" title="Times New Roman" />
  169. <meta name="select:Title Font" content="courier" title="Courier" />
  170. <meta name="select:Title Font" content="consolas" title="Consolas" />
  171. <meta name="select:Title 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. /* Scroll */
  213.  
  214.  
  215. ::-webkit-scrollbar { width:7px; height:7px; }
  216. ::-webkit-scrollbar-track-piece { background-color:{color:Scroll}; }
  217. ::-webkit-scrollbar-thumb {
  218. background-color:{color:Scrollbar};
  219. border:2px solid {color:Scroll};
  220. }
  221.  
  222.  
  223.  
  224. /* Selection */
  225.  
  226.  
  227. ::-moz-selection {
  228. background:{color:Selection Background};
  229. color:{color:Selection Text};
  230. }
  231.  
  232. ::selection {
  233. background:{color:Selection Background};
  234. color:{color:Selection Text};
  235. }
  236.  
  237.  
  238. /* Body - General */
  239.  
  240.  
  241. html, body { margin:0; padding:0; border:0; }
  242.  
  243. .top, header, .posts_text, .perma, article, h2, .bottom_outer, .post_information div {
  244. -webkit-box-sizing: border-box;
  245. -moz-box-sizing: border-box;
  246. box-sizing: border-box;
  247. }
  248.  
  249. body {
  250. background-image:url('{image:Background}');
  251. background-attachment:fixed;
  252. background-repeat:repeat;
  253. background-color:{color:Background};
  254. color:{color:Text};
  255. font-family:{select:Body Font}, sans-serif;
  256. font-size:{select:Body Font Size}px;
  257. line-height:140%;
  258. word-wrap:break-word;
  259. }
  260.  
  261. a {
  262. color:{color:Links};
  263. text-decoration:none;
  264. transition-duration: 0.6s;
  265. -moz-transition-duration: 0.6;
  266. -webkit-transition-duration: 0.6s;
  267. -o-transition-duration: 0.6s;
  268. }
  269.  
  270. a:hover, #question p:first-of-type a:hover, .bottom_click a:hover, .perma a:hover, .tags a:hover, .pl a:hover{ color:{color:Links Hover}; }
  271.  
  272. b, strong { color:{color:Bold}; font-weight:bold; }
  273.  
  274. i, em { color:{color:Italic}; font-style:italic; }
  275.  
  276. h1, h2, h3, h4, h5 {
  277. margin:0;
  278. font-family:{select:Title Font}, sans-serif;
  279. font-size:120%;
  280. font-weight:normal;
  281. line-height:120%;
  282. }
  283.  
  284. .posts_cell > h2, .posts > h2 {
  285. width:
  286. {block:IndexPage}
  287. {select:Post Size}px;
  288. {/block:IndexPage}
  289. {block:PermalinkPage}
  290. {select:Post Size Permalinkpage}px;
  291. {/block:PermalinkPage}
  292. padding:8px;
  293. background:{color:Post Title Background};
  294. color:{color:Post Title};
  295. font-family:{select:Title Font}, sans-serif;
  296. font-size:11px;
  297. letter-spacing:1.5px;
  298. text-transform:uppercase;
  299. text-align:center;
  300. position: relative;
  301. }
  302.  
  303. .pl { padding-right:25px; }
  304.  
  305. .pl a { color:{color:Post Title}; }
  306.  
  307. .pl:after {
  308. content:"›";
  309. right:10px;
  310. position:absolute;
  311. display:block;
  312. font-family:georgia;
  313. font-size:15px;
  314. line-height:15px;
  315. top:50%;
  316. -webkit-transform: translateY(-50%);
  317. -ms-transform: translateY(-50%);
  318. transform: translateY(-50%);
  319. }
  320.  
  321. small, sub, sup { font-size:90%; }
  322.  
  323. big { font-size:110%; }
  324.  
  325. sub, sup, small, big { vertical-align:baseline; }
  326.  
  327. p { margin:5px 0; padding:0; }
  328.  
  329. p:first-of-type { margin-top:0; }
  330.  
  331. p:last-of-type { margin-bottom:0; }
  332.  
  333. pre {
  334. margin:5px 0;
  335. padding:2px 4px;
  336. background:#f4f4f4;
  337. white-space:pre-wrap;
  338. word-wrap:break-word;
  339. }
  340.  
  341. .bnormal blockquote, blockquote {
  342. margin:5px 0 5px 10px;
  343. padding:2px 0 2px 10px;
  344. border-left:1px solid {color:Blockquote Border};
  345. }
  346.  
  347. .bcenter blockquote {
  348. width:90%;
  349. margin:5px auto;
  350. padding:2px 5px;
  351. border:1px solid {color:Blockquote Border};
  352. background:rgba({RGBcolor:Blockquote Background}, .7);
  353. color:{color:Blockquote Text};
  354. -webkit-border-radius:3px;
  355. -moz-border-radius:3px;
  356. border-radius:3px;
  357. }
  358.  
  359. .cap { margin:0; padding:15px; }
  360.  
  361. .cp { display:none; }
  362.  
  363. ol, ul { margin:0 0 0 20px; padding:0; }
  364.  
  365. ol li, ul li { padding:2px 0; }
  366.  
  367.  
  368.  
  369. /* Center Wrapper - Posts */
  370.  
  371.  
  372. #wrapper {
  373. width:
  374. {block:IndexPage}
  375. {block:ifnotHoverPerma}
  376. calc(({select:Post Size}px + 150px + 2px + {select:Margin}px*2)*{select:Columns});
  377. {/block:ifnotHoverPerma}
  378. {block:ifHoverPerma}
  379. calc(({select:Post Size}px + 2px + {select:Margin}px*2)*{select:Columns});
  380. {/block:ifHoverPerma}
  381. {/block:IndexPage}
  382. {block:PermalinkPage}
  383. calc({select:Post Size Permalinkpage}px + 2px + {select:Margin}px*2);
  384. {/block:PermalinkPage}
  385. height:auto;
  386. margin:80px auto;
  387. position:relative;
  388. padding:0;
  389. border:0;
  390. }
  391.  
  392. article {
  393. width:
  394. {block:IndexPage}
  395. {block:ifnotHoverPerma}
  396. calc({select:Post Size}px + 150px + 2px);
  397. {/block:ifnotHoverPerma}
  398. {block:ifHoverPerma}
  399. calc({select:Post Size}px + 2px);
  400. {/block:ifHoverPerma}
  401. {/block:IndexPage}
  402. {block:PermalinkPage}
  403. calc({select:Post Size Permalinkpage}px + 2px);
  404. {/block:PermalinkPage}
  405. margin:{select:Margin}px;
  406. position:relative;
  407. }
  408.  
  409. .posts {
  410. width:
  411. {block:IndexPage}
  412. {block:ifnotHoverPerma}
  413. calc({select:Post Size}px + 150px);
  414. {/block:ifnotHoverPerma}
  415. {block:ifHoverPerma}
  416. {select:Post Size}px;
  417. {/block:ifHoverPerma}
  418. {/block:IndexPage}
  419. {block:PermalinkPage}
  420. {select:Post Size Permalinkpage}px;
  421. {/block:PermalinkPage}
  422. height:auto;
  423. {block:ifHoverPerma}
  424. overflow:hidden;
  425. {/block:ifHoverPerma}
  426. border:1px solid {color:Borders};
  427. background:{color:Posts};
  428. color:{color:Text};
  429. }
  430.  
  431.  
  432. .posts_inner { display:table; }
  433.  
  434. .posts_cell { display:table-cell; vertical-align:top; }
  435.  
  436. .posts_cell:first-of-type { background:{color:Perma Background}; vertical-align:middle; }
  437.  
  438.  
  439.  
  440. /* Permalink - Indexpage */
  441.  
  442.  
  443. .perma {
  444. {block:ifnotHoverPerma}
  445. width:150px;
  446. {/block:ifnotHoverPerma}
  447. padding:10px;
  448. background:{color:Perma Background};
  449. color:{color:Perma Text};
  450. line-height:14px;
  451. text-align:center;
  452. -webkit-transition: all 0.8s ease-in-out;
  453. -moz-transition: all 0.8s ease-in-out;
  454. transition: all 0.8s ease-in-out;
  455. }
  456.  
  457. .perma a { color:{color:Perma Text}; }
  458.  
  459. {block:ifHoverPerma}
  460. .en { width:100px; margin-left:-100px; }
  461. .to { width:125px; margin-left:-125px; }
  462. .tre { width:150px; margin-left:-150px; }
  463. .fire { width:200px; margin-left:-200px; }
  464. .full { width:{select:Post Size}px; margin-left:-{select:Post Size}px;}
  465.  
  466. .posts:hover .perma { margin-left:0px; }
  467. {/block:ifHoverPerma}
  468.  
  469. .perma a#w{
  470. display:block;
  471. margin-bottom:4px;
  472. font-size:11px;
  473. line-height:11px;
  474. letter-spacing:1.5px;
  475. text-transform:uppercase;
  476. }
  477.  
  478. .perma a#d {
  479. padding:1px 10px;
  480. background:{color:Navigation Background};
  481. color:{color:Navigation Links};
  482. font-size:8px;
  483. font-style:italic;
  484. line-height:10px;
  485. letter-spacing:1.5px;
  486. text-transform:uppercase;
  487. -webkit-border-radius: 2px;
  488. -moz-border-radius: 2px;
  489. border-radius: 2px;
  490. }
  491.  
  492. .perma p {
  493. margin-top:4px;
  494. font-size:9px;
  495. letter-spacing:1.5px;
  496. text-transform:uppercase;
  497. }
  498.  
  499.  
  500.  
  501. /* Tags - Index page */
  502.  
  503.  
  504. .tags {
  505. margin:5px 0;
  506. text-align:center;
  507. transition-duration: 0.6s;
  508. -moz-transition-duration: 0.6;
  509. -webkit-transition-duration: 0.6s;
  510. -o-transition-duration: 0.6s;
  511. }
  512.  
  513. .tags a { margin:0 5px; color:{color:Tags}; }
  514.  
  515. .thover { opacity:0 }
  516.  
  517. article:hover .thover { opacity:1; }
  518.  
  519. .tnone { display:none; }
  520.  
  521.  
  522.  
  523. /* Text */
  524.  
  525.  
  526. .posts_text {
  527. {block:IndexPage}
  528. width:{select:Post Size}px;
  529. {/block:IndexPage}
  530. padding:15px;
  531. }
  532.  
  533.  
  534.  
  535. /* Img */
  536.  
  537.  
  538. .posts img, img :not(.lightbox-image) { max-width:100%; height:auto; }
  539.  
  540. #photo img {
  541. {block:IndexPage}
  542. width:{select:Post Size}px;
  543. {/block:IndexPage}
  544. {block:PermalinkPage}
  545. width:100%;
  546. {/block:PermalinkPage}
  547. display:block;
  548. }
  549.  
  550.  
  551.  
  552. /* Photoset */
  553.  
  554.  
  555. .tmblr-lightbox, #tumblr_lightbox { background:rgba({RGBcolor:Background}, .8)!important; }
  556.  
  557. .vignette, #vignette, .lightbox-caption, #tumblr_lightbox_caption { opacity:0!important; }
  558.  
  559. .lightbox-image, #tumblr_lightbox img {
  560. background-color:{color:Posts}!important;
  561. padding:15px!important;
  562. border-radius:0px!important;
  563. -webkit-border-radius:0px!important;
  564. -moz-border-radius:0px!important;
  565. box-shadow:none!important;
  566. -webkit-box-shadow:none!important;
  567. -moz-box-shadow:none!important;
  568. }
  569.  
  570.  
  571.  
  572. /* Video */
  573.  
  574.  
  575. #vid, #vid iframe { display:block; overflow:hidden; }
  576.  
  577.  
  578.  
  579. {block:IndexPage}
  580. #photo, #vid, .photo-slideshow { width:{select:Post Size}px; }
  581. {/block:IndexPage}
  582.  
  583.  
  584.  
  585. /* Audio */
  586.  
  587.  
  588. iframe.tumblr_audio_player {
  589. width:30px;
  590. height:30px;
  591. display:block;
  592. overflow:hidden;
  593. border:10px solid #e4e4e4;
  594. background:#e4e4e4;
  595. -webkit-border-radius: 3px;
  596. -moz-border-radius: 3px;
  597. border-radius: 3px;
  598. }
  599.  
  600. #audio_info {
  601. padding:0 10px;
  602. border-left:1px solid #e4e4e4;
  603. font-size:8px;
  604. letter-spacing:1.5px;
  605. text-transform:uppercase;
  606. }
  607.  
  608. #audio_info span {
  609. margin-right:3px;
  610. padding:1px 3px;
  611. background:#e4e4e4;
  612. color:#aaa;
  613. font-style:italic;
  614. -webkit-border-radius: 2px;
  615. -moz-border-radius: 2px;
  616. border-radius: 2px;
  617. }
  618.  
  619. iframe.soundcloud_audio_player {
  620. {block:IndexPage}
  621. width:{select:Post Size}px;
  622. {/block:IndexPage}
  623. {block:PermalinkPage}
  624. width:{select:Post Size Permalinkpage}px;
  625. {/block:PermalinkPage}
  626. height:auto!important;
  627. display:block;
  628. }
  629.  
  630. iframe.spotify_audio_player { height:80px!important; display:block; }
  631.  
  632.  
  633.  
  634. /* Asks */
  635.  
  636.  
  637. #mark {
  638. padding:10px;
  639. display:table-cell;
  640. vertical-align:top;
  641. border-right:1px solid {color:Borders};
  642. border-bottom:1px solid {color:Borders};
  643. background:{color:Ask Background};
  644. color:{color:Ask Text};
  645. font-size:15px;
  646. font-weight:bold;
  647. line-height:15px
  648. text-align:center;
  649. }
  650.  
  651. #question {
  652. padding:10px;
  653. display:table-cell;
  654. vertical-align:top;
  655. border-bottom:1px solid {color:Borders};
  656. background:{color:Ask Background};
  657. color:{color:Ask Text};
  658. }
  659.  
  660. #question p:first-of-type {
  661. font-size:8px;
  662. letter-spacing:1.5px;
  663. text-transform:uppercase;
  664. }
  665.  
  666. #question p:first-of-type a { color:{color:Ask Text}; }
  667.  
  668.  
  669.  
  670. /* Quote */
  671.  
  672.  
  673. #q {
  674. padding-right:10px;
  675. display:table-cell;
  676. vertical-align:top;
  677. border-right:1px solid {color:Borders};
  678. font-size:25px;
  679. line-height:25px;
  680. text-align:center;
  681. }
  682.  
  683. #quote {
  684. padding-left:10px;
  685. display:table-cell;
  686. vertical-align:top;
  687. }
  688.  
  689. #quote p {
  690. margin-top:5px;
  691. font-size:7px;
  692. text-transform:uppercase;
  693. letter-spacing:1.5px;
  694. }
  695.  
  696.  
  697.  
  698. /* Chat */
  699.  
  700.  
  701. .chat p { margin:0; padding:2.5px 0; }
  702.  
  703.  
  704.  
  705. /* Post information - Notes - Permalinkpage */
  706.  
  707.  
  708. .post_information {
  709. margin:20px auto;
  710. border:1px solid {color:Borders};
  711. background:{color:Posts};
  712. }
  713.  
  714. .post_information div { padding:15px; }
  715. .post_information b { margin-right:3px; }
  716. .post_information a { margin-right:5px; }
  717.  
  718. ol.notes {
  719. margin:10px 0px;
  720. padding:0px;
  721. list-style:none;
  722. font-size:8px;
  723. letter-spacing:1.5px;
  724. text-transform:uppercase;
  725. }
  726.  
  727. li.note {
  728. margin:10px 0;
  729. padding:10px;
  730. border:1px solid {color:Borders};
  731. background:{color:Posts};
  732. }
  733.  
  734. img.avatar {
  735. width:14px;
  736. height:14px;
  737. margin-right:10px;
  738. vertical-align:-4px;
  739. }
  740.  
  741.  
  742.  
  743. /* Header - Top */
  744.  
  745.  
  746. header { margin:0 auto; z-index:99999; }
  747.  
  748. header img { max-width:100%; display:block; }
  749.  
  750. .top {
  751. {block:ifnotTopImage}
  752. top:0;
  753. {/block:ifnotTopImage}
  754. padding:10px;
  755. position:absolute;
  756. z-index:99999;
  757. border-bottom:1px solid {color:Borders};
  758. background:{color:Background};
  759. text-align:center;
  760. }
  761.  
  762. .fixed { top:0; margin-left:0; position:fixed; }
  763.  
  764.  
  765.  
  766. header, .top, .bottom_outer, footer {
  767. width:
  768. {block:IndexPage}
  769. {block:ifnotHoverPerma}
  770. calc(({select:Post Size}px + 150px + 2px + {select:Margin}px*2)*{select:Columns} - {select:Margin}px*2);
  771. {/block:ifnotHoverPerma}
  772. {block:ifHoverPerma}
  773. calc(({select:Post Size}px + 2px + {select:Margin}px*2)*{select:Columns} - {select:Margin}px*2);
  774. {/block:ifHoverPerma}
  775. {/block:IndexPage}
  776. {block:PermalinkPage}
  777. calc({select:Post Size Permalinkpage}px + 2px);
  778. {/block:PermalinkPage}
  779. }
  780.  
  781.  
  782.  
  783. /* Bottom - Navigtion */
  784.  
  785.  
  786. .bottom_outer {
  787. bottom:0;
  788. position:fixed;
  789. z-index:99999;
  790. background:{color:Bottom Background};
  791. color:{color:Bottom Text};
  792. left:50%;
  793. -webkit-transform: translateX(-50%);
  794. -ms-transform: translateX(-50%);
  795. transform: translateX(-50%);
  796. }
  797.  
  798. .bottom_click {
  799. min-height:14px;
  800. padding:10px;
  801. display:relative;
  802. background:{color:Bottom Title Background};
  803. color:{color:Bottom Title Text};
  804. text-align:center;
  805. {block:ifClicktoShowBottom}
  806. cursor:help;
  807. {/block:ifClicktoShowBottom}
  808. }
  809.  
  810. .bottom_click a { color:{color:Bottom Title Text}; }
  811.  
  812. {block:ifClicktoShowBottom}
  813. .on:after { content:"ˆ"; }
  814. .off:after { content:"ˇ"; }
  815.  
  816. .bottom_click:after {
  817. right:10px;
  818. padding:5px 0;
  819. position:absolute;
  820. font-family:georgia;
  821. font-size:25px;
  822. line-height:20px;
  823. }
  824. {/block:ifClicktoShowBottom}
  825.  
  826. .bottom {
  827. padding:10px;
  828. {block:ifClicktoShowBottom}
  829. display:none;
  830. {/block:ifClicktoShowBottom}
  831. border:1px solid {color:Bottom Borders};
  832. }
  833.  
  834. .bottom nav {
  835. {block:ShowDescription}margin-top:10px;{/block:ShowDescription}
  836. text-align:center;
  837. }
  838.  
  839. .bottom nav a {
  840. margin:0 5px;
  841. padding:1px 10px;
  842. background:{color:Navigation Background};
  843. color:{color:Navigation Links};
  844. font-size:8px;
  845. font-style:italic;
  846. letter-spacing:1.5px;
  847. text-transform:uppercase;
  848. -webkit-border-radius: 2px;
  849. -moz-border-radius: 2px;
  850. border-radius: 2px;
  851. }
  852.  
  853. .bottom nav a:hover, .perma a#d:hover {
  854. background:{color:Navigation Hover Background};
  855. color:{color:Navigation Hover Links};
  856. }
  857.  
  858.  
  859.  
  860. /* Footer - Pagination - Manual Load */
  861.  
  862.  
  863. footer { margin:50px auto 80px auto; text-align:center; }
  864.  
  865. .pagination {
  866. position:relative;
  867. display:inline-block;
  868. border:1px solid {color:Borders};
  869. background:{color:Posts};
  870. letter-spacing:1.5px;
  871. text-transform:uppercase;
  872. }
  873.  
  874. .pagination a { display:inline-block; padding:5px 7px; }
  875. .pagination p { display:inline-block; padding:5px 10px; }
  876.  
  877. a#prev { border-right:1px solid{color:Borders}; }
  878. a#next { border-left:1px solid{color:Borders}; }
  879.  
  880. a#load {
  881. height:14px;
  882. padding:5px 20px;
  883. position:relative;
  884. display:inline-block;
  885. border:1px solid {color:Borders};
  886. background:{color:Posts};
  887. font-size:10;
  888. }
  889.  
  890. .o {
  891. width:10px;
  892. height:14px;
  893. left:100%;
  894. top:-1px;
  895. padding:5px;
  896. position:absolute;
  897. border:1px solid {color:Borders};
  898. background:{color:Posts};
  899. line-height:20px;
  900. }
  901.  
  902. .o, #prev, #next { font-family:georgia; font-size:15px; }
  903.  
  904. {block:ifInfinitescroll}
  905. .pagination { display:none; }
  906.  
  907. #infscr-loading { display:none!important; }
  908. {/block:ifInfinitescroll}
  909.  
  910.  
  911.  
  912. /* Fade */
  913.  
  914.  
  915. @keyframes fadein {
  916. from { opacity: 0; }
  917. to { opacity: 1; }
  918. }
  919. @-moz-keyframes fadein {
  920. from { opacity: 0; }
  921. to { opacity: 1; }
  922. }
  923.  
  924. @-webkit-keyframes fadein {
  925. from { opacity: 0; }
  926. to { opacity: 1; }
  927. }
  928.  
  929. article, header, .bottom_outer, footer {
  930. animation: fadein 2s;
  931. -webkit-animation: fadein 2s;
  932. -moz-animation: fadein 2s;
  933. }
  934.  
  935.  
  936.  
  937. /* Tooltips */
  938.  
  939.  
  940. #s-m-t-tooltip{
  941. max-width:300px;
  942. margin:25px 15px;
  943. padding:0 5px;
  944. z-index:999999;
  945. border:1px solid {color:Borders};
  946. background:{color:Posts};
  947. color:{color:Text};
  948. }
  949.  
  950.  
  951.  
  952. {CustomCSS}
  953.  
  954.  
  955.  
  956. </style>
  957.  
  958.  
  959. <!---- Scripts ---->
  960.  
  961.  
  962. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  963.  
  964. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  965. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  966. <script src="http://static.tumblr.com/3yblkz0/Bu3nywvqg/shythemes_vr.js"></script>
  967.  
  968.  
  969. {block:ifStickyTop}
  970. <script>
  971. $(document).ready(function(){
  972. $(window).scroll( function(){
  973. if( $(window).scrollTop() > $('#timg').height() ) {
  974. $('.top').addClass('fixed');}
  975. else {
  976. $('.top').removeClass('fixed');}
  977. });
  978. });
  979. </script>
  980. {/block:ifStickyTop}
  981. {block:ifClicktoShowBottom}
  982. <script>
  983. $(document).ready(function(){
  984. $(window).scroll( function(){
  985. if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
  986. $('.bottom').hide(700); }
  987. });
  988. });
  989. </script>
  990. {/block:ifClicktoShowBottom}
  991.  
  992.  
  993. <script>
  994. $(document).ready(function(){
  995. {block:ifTopText}
  996. var cake = "";
  997. cake = $(".top").outerHeight() + 80;
  998. $("header").css({"margin-bottom" : cake });
  999. {/block:ifTopText}
  1000. var ice = "";
  1001. ice = $(".bottom_outer").outerHeight() + 80;
  1002. {block:IndexPage}
  1003. $("footer").css({"margin-bottom" : ice });
  1004. {/block:IndexPage}
  1005. {block:PermalinkPage}
  1006. $("#wrapper").css({"margin-bottom" : ice });
  1007. {/block:PermalinkPage}
  1008. {block:ifClicktoShowBottom}
  1009. $('.bottom_click').click(function () {
  1010. $('.bottom').slideToggle(700);
  1011. });
  1012. $('.bottom_click').click( function() {
  1013. if ( $(this).hasClass('on')) {
  1014. $(this).removeClass('on').addClass('off');}
  1015. else
  1016. if ( $(this).hasClass('off' )) {
  1017. $(this).removeClass('off').addClass('on');}
  1018. });
  1019. {/block:ifClicktoShowBottom}
  1020. });
  1021. </script>
  1022.  
  1023.  
  1024. <script>
  1025. $(document).ready(function(){
  1026. $("[title],a[title],img[title]").style_my_tooltips({
  1027. tip_follows_cursor:true,
  1028. tip_delay_time:50,
  1029. tip_fade_speed:500,
  1030. attribute:"title"
  1031. });
  1032. $('.photo-slideshow').pxuPhotoset({
  1033. lightbox: true,
  1034. rounded: false,
  1035. gutter: '5px',
  1036. borderRadius: '0px',
  1037. photoset: '.photo-slideshow',
  1038. photoWrap: '.photo-data',
  1039. photo: '.pxu-photo'
  1040. });
  1041. });
  1042. </script>
  1043.  
  1044.  
  1045.  
  1046. </head>
  1047. <body class="{select:Tumblr Controls}">
  1048.  
  1049.  
  1050.  
  1051. <header>
  1052. {block:ifTopImage}<center><img src="{image:Top}" id="timg"/></center>{/block:ifTopImage}
  1053. {block:ifTopText}<section class="top">{text:Top Text}</section>{/block:ifTopText}
  1054. </header>
  1055.  
  1056.  
  1057.  
  1058. <div class="bottom_outer">
  1059. <section class="bottom_click on">{text:Bottom Title}</section>
  1060. <section class="bottom">
  1061. {block:ShowDescription}{Description}{/block:ShowDescription}
  1062. <nav>
  1063. <a href="/">home</a>
  1064. <a href="/ask">ask</a>
  1065. <a href="/archive">archive</a>
  1066. {block:ifLink1}<a href="{text:Link1}">{text:Title1}</a>{/block:ifLink1}
  1067. {block:ifLink2}<a href="{text:Link2}">{text:Title2}</a>{/block:ifLink2}
  1068. {block:ifLink3}<a href="{text:Link3}">{text:Title3}</a>{/block:ifLink3}
  1069. </nav>
  1070. </section>
  1071. </div>
  1072.  
  1073.  
  1074.  
  1075. <main id="wrapper">
  1076. {block:Posts}
  1077. <article>
  1078.  
  1079.  
  1080. <div class="posts {select:Blockquote}">
  1081. {block:IndexPage}
  1082. <div class="posts_inner">
  1083.  
  1084.  
  1085. <div class="posts_cell"><div class="perma {select:Hover Perma Width}">
  1086. <a href="{Permalink}" id="w">{DayOfWeek}</a>
  1087. <a href="{Permalink}" id="d">{Month} {DayOfMonth} {Year}</a>
  1088. <p><a href="{ReblogURL}" id="r" title="reblog">↻</a> : {NoteCount} N</p>
  1089. </div></div>
  1090.  
  1091.  
  1092. <div class="posts_cell">
  1093. {/block:IndexPage}
  1094.  
  1095.  
  1096. {block:ContentSource}
  1097. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1098. {/block:SourceLogo}
  1099. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1100. {/block:ContentSource}
  1101.  
  1102.  
  1103. {block:Photo}
  1104. <div id="photo"><center>
  1105. {block:IndexPage}
  1106. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  1107. {/block:IndexPage}
  1108. {block:PermalinkPage}
  1109. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  1110. {/block:PermalinkPage}
  1111. </center></div>
  1112. {/block:Photo}
  1113.  
  1114.  
  1115. {block:Photoset}
  1116. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1117. {block:Photos}
  1118. <div class="photo-data">
  1119. <div class="pxu-photo">
  1120. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1121. </div>
  1122. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1123. </div>
  1124. {/block:Photos}
  1125. </div>
  1126. {/block:Photoset}
  1127.  
  1128.  
  1129. {block:Video}
  1130. <div id="vid">{Video-500}</div>
  1131. {/block:Video}
  1132.  
  1133.  
  1134. {block:Audio}
  1135. <div class="posts_text">
  1136. <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
  1137. <td valign="middle" width="60px">{AudioPlayerGrey}</td>
  1138. <td valign="middle"><div id="audio_info">
  1139. {block:TrackName}<p><span>Track:</span> {TrackName}</p>{/block:TrackName}
  1140. {block:Artist}<p><span>Artist:</span> {Artist}</p>{/block:Artist}
  1141. {block:Album}<p><span>Album:</span> {Album}</p>{/block:Album}
  1142. {block:PlayCount}<p><span>Plays:</span> {FormattedPlayCount}</p>{/block:PlayCount}
  1143. </div></td>
  1144. </tr></table>
  1145. </div>
  1146. {/block:Audio}
  1147.  
  1148.  
  1149. {block:Text}
  1150. {block:Title}<h2>{Title}</h2>{/block:Title}
  1151. <div class="posts_text">{Body}</div>
  1152. {/block:Text}
  1153.  
  1154.  
  1155. {block:Link}
  1156. <h2 class="pl"><a href="{URL}" {Target}>{Name}</a></h2>
  1157. {block:Description}<div class="posts_text">{Description}</div>{/block:Description}
  1158. {/block:Link}
  1159.  
  1160.  
  1161. {block:Answer}
  1162. <div id="mark">?</div>
  1163. <div id="question"><p>{Asker} asked:</p> {Question}</div>
  1164. <div class="posts_text">{Answer}</div>
  1165. {/block:Answer}
  1166.  
  1167.  
  1168. {block:Quote}
  1169. <div class="posts_text">
  1170. <div id="q">“</div>
  1171. <div id="quote">{Quote} {block:Source}<p>— {Source}</p>{/block:Source}</div>
  1172. </div>
  1173. {/block:Quote}
  1174.  
  1175.  
  1176. {block:Chat}
  1177. {block:Title}<h2>{Title}</h2>{/block:Title}
  1178. <div class="posts_text chat">
  1179. {block:Lines}<p>{block:Label}<b>{Label}</b>{/block:Label} {Line}</p>{/block:Lines}
  1180. </div>
  1181. {/block:Chat}
  1182.  
  1183.  
  1184. {block:Caption}<div class="cap {block:IndexPage}{block:ifnotShowCaptions}cp {/block:ifnotShowCaptions}{/block:IndexPage}">{Caption}</div>{/block:Caption}
  1185.  
  1186.  
  1187. {block:IndexPage}
  1188. </div></div>
  1189. {/block:IndexPage}
  1190.  
  1191.  
  1192. </div>
  1193.  
  1194.  
  1195. {block:IndexPage}
  1196. {block:HasTags}<div class="tags {select:Tags}">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1197. {/block:IndexPage}
  1198.  
  1199.  
  1200. {block:PermalinkPage}
  1201. {block:Date}
  1202. <div class="post_information"> <h2>Post information</h2>
  1203. <div>
  1204. <p><b>Posted:</b> {Month} {DayofMonth}, {Year} ({TimeAgo})</p>
  1205. {block:RebloggedFrom}
  1206. <p><b>Reblogged from:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a></p>
  1207. <p><b>Originally by:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a></p>
  1208. {/block:RebloggedFrom}
  1209. {block:HasTags}
  1210. <p><b>Tagged:</b> {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p>
  1211. {/block:HasTags}
  1212. {block:NoteCount}<p><b>Notes:</b> {NoteCount}</p>{/block:NoteCount}
  1213. </div></div>
  1214. {/block:Date}
  1215.  
  1216. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1217. {/block:PermalinkPage}
  1218.  
  1219.  
  1220. </article>
  1221. {/block:Posts}
  1222. </main>
  1223.  
  1224.  
  1225.  
  1226.  
  1227. {block:IndexPage}
  1228. <footer>
  1229. {block:Pagination}
  1230. <div class="pagination">
  1231. {block:PreviousPage}<a href="{PreviousPage}" id="prev">‹</a>{/block:PreviousPage}
  1232. <p>{CurrentPage} / {TotalPages}</p>
  1233. {block:NextPage}<a href="{NextPage}" id="next">›</a>{/block:NextPage}
  1234. </div>
  1235. {/block:Pagination}
  1236.  
  1237. {block:ifInfinitescroll}{block:ifManualLoad}
  1238. <a id="load" style="cursor:pointer">More <div class="o">ˇ</div></a>
  1239. {/block:ifManualLoad}{/block:ifInfinitescroll}
  1240. </footer>
  1241. {/block:IndexPage}
  1242.  
  1243.  
  1244.  
  1245.  
  1246. <a href="http://ladmilk.tumblr.com" style="padding:10px; bottom:5px; left:5px; position:fixed;" title="Theme by Heidi">cr.</a>
  1247.  
  1248.  
  1249.  
  1250. <!---- Scripts ---->
  1251.  
  1252.  
  1253. {block:IndexPage}
  1254. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  1255. {block:ifInfinitescroll}
  1256. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1257. {/block:ifInfinitescroll}
  1258. <script>
  1259. $(document).ready(function(){
  1260. var $container = $('#wrapper');
  1261. $container.masonry({
  1262. itemSelector: 'article',
  1263. columnWidth:
  1264. {block:ifnotHoverPerma}
  1265. {select:Post Size} + {select:Margin}*2 + 150 + 2,
  1266. {/block:ifnotHoverPerma}
  1267. {block:ifHoverPerma}
  1268. {select:Post Size} + {select:Margin}*2 + 2,
  1269. {/block:ifHoverPerma}
  1270. });
  1271. $container.imagesLoaded(function(){
  1272. $container.masonry();
  1273. });
  1274. {block:ifInfinitescroll}
  1275. $container.infinitescroll({
  1276. itemSelector :"article",
  1277. navSelector : ".pagination",
  1278. nextSelector : ".pagination a#next",
  1279. loadingImg : "",
  1280. loadingText : "<em></em>",
  1281. bufferPx : 800,
  1282. {block:ifManualLoad}
  1283. errorCallback: function () { jQuery('a#load').delay(50).fadeOut(); },
  1284. {/block:ifManualLoad}
  1285. },
  1286. function( newElements ) {
  1287. resizeVideos();
  1288. $(newElements).find('.photo-slideshow').pxuPhotoset({
  1289. lightbox: true,
  1290. rounded: false,
  1291. gutter: '5px',
  1292. borderRadius: '0px',
  1293. photoset: '.photo-slideshow',
  1294. photoWrap: '.photo-data',
  1295. photo: '.pxu-photo'
  1296. });
  1297. var $newElems = $( newElements ).css({ opacity: 0 });
  1298. $newElems.imagesLoaded(function(){
  1299. $container.masonry( 'appended', $newElems );
  1300. $newElems.animate({ opacity: 1 });
  1301. });
  1302. });
  1303. {block:ifnotManualLoad}
  1304. if($(window).height() >= $(document).height()){
  1305. $container.infinitescroll('retrieve'); return false;
  1306. };
  1307. {/block:ifnotManualLoad}
  1308. {block:ifManualLoad}
  1309. $(window).unbind('.infscr');
  1310. $('a#load').click(function() {
  1311. $container.infinitescroll('retrieve');return false;
  1312. });
  1313. {/block:ifManualLoad}
  1314. {/block:ifInfinitescroll}
  1315. });
  1316. </script>
  1317. {/block:IndexPage}
  1318.  
  1319.  
  1320.  
  1321. </body>
  1322. </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!