API tools faq
paste
Advertisement
ladmilk

Fifty Three

ladmilk
Jan 19th, 2016
10,018
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---
  5.  
  6. Theme #53 by Heidi @ladmilk
  7.  
  8. Credit:
  9. Infinitescroll: Paulirish (https://github.com/infinite-scroll/infinite-scroll)
  10. Photoset: PixelUnion (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  11. Video Resizing: Shy Themes (http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos)
  12. Icons: Font Awesome
  13.  
  14. Inspiration:
  15. Shythemes: Grey Theme
  16.  
  17. ---->
  18.  
  19. <head>
  20. <title>{Title}</title>
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  26. <meta name="viewport" content="width=device-width, initial-scale=1">
  27.  
  28.  
  29. <meta name="color:Background" content="#ffffff"/>
  30. <meta name="color:Text" content="#222222"/>
  31. <meta name="color:Heading" content="#000000"/>
  32. <meta name="color:Links" content="#999999"/>
  33. <meta name="color:Links Hover" content="#eeeeee"/>
  34. <meta name="color:Borders" content="#eeeeee"/>
  35. <meta name="color:Permalinks" content="#bbbbbb"/>
  36. <meta name="color:Accent" content="#7bd4e7"/>
  37. <meta name="color:Icons" content="#ffffff"/>
  38. <meta name="color:Scroll" content="#eeeeee" />
  39. <meta name="color:Scrollbar" content="#666666" />
  40.  
  41. <meta name="image:Icon" content="" />
  42.  
  43. <meta name="if:Borders Full Width" content="0" />
  44. <meta name="if:Scroll to Top" content="1" />
  45.  
  46. <meta name="if:Show Captions" content="1" />
  47. <meta name="if:Show Tags" content="1" />
  48. <meta name="if:Show Reblog and Like" content="1" />
  49.  
  50. <meta name="if:Infinitescroll" content="0" />
  51. <meta name="if:Manual Load" content="0" />
  52.  
  53.  
  54. <meta name="select:Tumblr Controls" content="t_w" title="White" />
  55. <meta name="select:Tumblr Controls" content="t_g" title="Grey" />
  56. <meta name="select:Tumblr Controls" content="t_b" title="Black" />
  57.  
  58. <meta name="select:Post Size" content="700" title="700px" />
  59. <meta name="select:Post Size" content="500" title="500px" />
  60. <meta name="select:Post Size" content="600" title="600px" />
  61. <meta name="select:Post Size" content="800" title="800px" />
  62. <meta name="select:Post Size" content="900" title="900px" />
  63.  
  64. <meta name="select:Text Alignment" content="left" title="Left" />
  65. <meta name="select:Text Alignment" content="center" title="Center" />
  66. <meta name="select:Text Alignment" content="justify" title="Justify" />
  67.  
  68. <meta name="select:Body Font Size" content="14" title="14px" />
  69. <meta name="select:Body Font Size" content="12" title="12px" />
  70. <meta name="select:Body Font Size" content="16" title="16px" />
  71.  
  72. <meta name="select:Body Font" content="georgia" title="Georgia" />
  73. <meta name="select:Body Font" content="cambria" title="Cambria" />
  74. <meta name="select:Body Font" content="century" title="Century" />
  75. <meta name="select:Body Font" content="droid serif" title="Droid Serif" />
  76. <meta name="select:Body Font" content="garamond" title="Garamond" />
  77. <meta name="select:Body Font" content="lora" title="Lora" />
  78. <meta name="select:Body Font" content="libre baskerville" title="Libre Baskerville" />
  79. <meta name="select:Body Font" content="merriweather" title="Merriweather" />
  80. <meta name="select:Body Font" content="pt serif" title="PT Serif" />
  81. <meta name="select:Body Font" content="source serif pro" title="Source Serif Pro" />
  82. <meta name="select:Body Font" content="times new roman" title="Times New Roman" />
  83. <meta name="select:Body Font" content="arial" title="Arial" />
  84. <meta name="select:Body Font" content="calibri" title="Calibri" />
  85. <meta name="select:Body Font" content="tahoma" title="Tahoma" />
  86. <meta name="select:Body Font" content="trebuchet ms" title="Trebuchet ms" />
  87. <meta name="select:Body Font" content="Karla" title="Karla" />
  88. <meta name="select:Body Font" content="Open Sans" title="Open Sans" />
  89. <meta name="select:Body Font" content="Roboto" title="Roboto" />
  90.  
  91. <meta name="select:Heading Font" content="libre baskerville" title="Libre Baskerville" />
  92. <meta name="select:Heading Font" content="cambria" title="Cambria" />
  93. <meta name="select:Heading Font" content="century" title="Century" />
  94. <meta name="select:Heading Font" content="droid serif" title="Droid Serif" />
  95. <meta name="select:Heading Font" content="garamond" title="Garamond" />
  96. <meta name="select:Heading Font" content="georgia" title="Georgia" />
  97. <meta name="select:Heading Font" content="lora" title="Lora" />
  98. <meta name="select:Heading Font" content="merriweather" title="Merriweather" />
  99. <meta name="select:Heading Font" content="pt serif" title="PT Serif" />
  100. <meta name="select:Heading Font" content="source serif pro" title="Source Serif Pro" />
  101. <meta name="select:Heading Font" content="times new roman" title="Times New Roman" />
  102. <meta name="select:Heading Font" content="arial" title="Arial" />
  103. <meta name="select:Heading Font" content="calibri" title="Calibri" />
  104. <meta name="select:Heading Font" content="tahoma" title="Tahoma" />
  105. <meta name="select:Heading Font" content="trebuchet ms" title="Trebuchet ms" />
  106. <meta name="select:Heading Font" content="Karla" title="Karla" />
  107. <meta name="select:Heading Font" content="Open Sans" title="Open Sans" />
  108. <meta name="select:Heading Font" content="Roboto" title="Roboto" />
  109.  
  110. <meta name="text:Ask Title" content="message" />
  111. <meta name="text:Archive Title" content="archive" />
  112. <meta name="text:Link1" content="" />
  113. <meta name="text:Title1" content="" />
  114. <meta name="text:Link2" content="" />
  115. <meta name="text:Title2" content="" />
  116. <meta name="text:Link3" content="" />
  117. <meta name="text:Title3" content="" />
  118.  
  119.  
  120. <link href="http://static.tumblr.com/3yblkz0/EkLnyuqmx/pxu_ps.css" rel="stylesheet" type="text/css"/>
  121.  
  122. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  123. <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700|Lora:400,400italic,700|Merriweather:400,400italic,700|PT+Serif:400,400italic,700|Source+Serif+Pro:400,700|Open+Sans:400,700,400italic|Karla:400,400italic,700|Roboto:300,400,400italic,700' rel='stylesheet' type='text/css'>
  124.  
  125.  
  126. <style type="text/css">
  127.  
  128.  
  129.  
  130. /* Tumblr Controls */
  131.  
  132.  
  133. .t_b .tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop, .t_b #tumblr_controls, #tumblr_controls {
  134. height:25px!important;
  135. top:5px!important;
  136. right:5px!important;
  137. position:fixed!important;
  138. z-index:9999999!important;
  139. }
  140.  
  141. .t_w .tmblr-iframe--desktop-logged-in-controls, .t_w #tumblr_controls {
  142. -webkit-filter:invert(100%);
  143. -moz-filter:invert(100%);
  144. -o-filter:invert(100%);
  145. -ms-filter:invert(100%);
  146. filter:invert(100%);
  147. opacity:0.3;
  148. }
  149.  
  150. .t_g .tmblr-iframe--desktop-logged-in-controls, .t_g #tumblr_controls {
  151. -webkit-filter:invert(70%);
  152. -moz-filter:invert(70%);
  153. -o-filter:invert(70%);
  154. -ms-filter:invert(70%);
  155. filter:invert(70%);
  156. opacity:0.4;
  157. }
  158.  
  159.  
  160.  
  161. /* Scrollbar */
  162.  
  163.  
  164. ::-webkit-scrollbar { width:15px; height:15px; }
  165.  
  166. ::-webkit-scrollbar-track-piece {
  167. background-color:{color:Scroll};
  168. border:7px solid {color:Background};
  169. }
  170. ::-webkit-scrollbar-thumb {
  171. background-color:{color:Scrollbar};
  172. border:7px solid {color:Background};
  173. }
  174.  
  175.  
  176.  
  177. /* Body - General- Universal */
  178.  
  179.  
  180. html, body, * { margin:0; padding:0; border:0; }
  181.  
  182. body {
  183. background-color:{color:Background};
  184. color:{color:Text};
  185. font-family:{select:Body Font}, georgia, serif;
  186. font-size:{select:Body Font Size}px;
  187. line-height:180%;
  188. word-wrap:break-word;
  189. -webkit-font-smoothing:antialiased;
  190. -moz-osx-font-smoothing:grayscale;
  191. }
  192.  
  193. p { margin:5px 0; padding:0; }
  194.  
  195. p:first-of-type { margin-top:0; }
  196.  
  197. p:last-of-type { margin-bottom:0; }
  198.  
  199. pre {
  200. margin:5px 0;
  201. padding:2px 5px;
  202. background:#f5f5f5;
  203. white-space:pre-wrap;
  204. word-wrap:break-word;
  205. }
  206.  
  207. blockquote {
  208. margin:5px 0 5px 10px;
  209. padding:2px 0 2px 10px;
  210. border-left:2px solid {color:Accent};
  211. }
  212.  
  213. .cap {
  214. margin-top:40px;
  215. padding:20px;
  216. border:1px solid {color:Borders};
  217. }
  218.  
  219. .cp { display:none; }
  220.  
  221. ul, ol { margin:5px 0 5px 35px; }
  222.  
  223. hr {
  224. width:30%;
  225. margin:20px auto;
  226. border-top:1px solid {color:Borders};
  227. }
  228.  
  229. span.slash { margin:0 5px; }
  230.  
  231. .icons {
  232. padding:7px;
  233. overflow:hidden;
  234. background:{color:Accent};
  235. -webkit-border-radius:100%;
  236. -moz-border-radius:100%;
  237. border-radius:100%;
  238. }
  239.  
  240. header, .header_nav, .header_sub, .container, .posts.post-quote, .posts.post-chat, .perma, .post_footer, .notes {
  241. -webkit-box-sizin:border-box;
  242. -moz-box-sizing:border-box;
  243. box-sizing:border-box;
  244. }
  245.  
  246. * {
  247. -webkit-transition:all .3s linear;
  248. -moz-transition:all .3s linear;
  249. -o-transition:all .3s linear;
  250. transition:all .3s linear;
  251. }
  252.  
  253. a {
  254. -webkit-transition:all .5s ease;
  255. -moz-transition:all .5s ease;
  256. -o-transition:all .5s ease;
  257. transition:all .5s ease;
  258. }
  259.  
  260.  
  261.  
  262. /* Common Typography */
  263.  
  264.  
  265. a { color:{color:Links}; text-decoration:none; }
  266.  
  267. a:hover, .post_header > h2 a:hover, a:hover, .perma a:hover, .tags a:hover, a.tumblr_blog:hover { color:{color:Links Hover}; }
  268.  
  269. small, sub, sup { font-size:0.90em; }
  270.  
  271. big { font-size:1.10em; }
  272.  
  273. sub, sup, small, big { vertical-align:baseline; }
  274.  
  275. h1, h2, h3, h4 {
  276. margin:20px 0 10px 0;
  277. font-family:{select:Heading Font}, georgia, serif;
  278. line-height:120%;
  279. }
  280.  
  281. h2 { font-size:1.60em; }
  282. h3 { font-size:1.45em; }
  283. h4 { font-size:1.15em; }
  284.  
  285. .post_header > h2 a, .title a, .title { color:{color:Heading}; }
  286.  
  287. .header_nav, .audio_text p, .ask_asker p, a.tumblr_blog, .perma, .tags, .notecount, ol.notes li blockquote, footer, .pagination {
  288. font-family:calibri, arial, sans-serif;
  289. font-size:0.75em;
  290. letter-spacing:2px;
  291. text-transform:uppercase;
  292. }
  293.  
  294. nav a, .perma, .perma a, .tags a, .fa-undo, .like_button:before, .pagination a, .navigation a { color:{color:Permalinks}; }
  295.  
  296. .icons, #load { color:{color:Icons}; }
  297.  
  298. a.tumblr_blog { color:{color:Text}; }
  299.  
  300. .header_sub, .icons, .post_header > h2, .read_more_container, .audio_text, .ask_asker, .post_header, .perma, .post_footer, .notes, footer, .pagination { text-align:center; }
  301.  
  302.  
  303.  
  304. /* Header */
  305.  
  306.  
  307. header {
  308. width:100%;
  309. margin:0 auto;
  310. border-bottom:1px solid {color:Borders};
  311. background:{color:Background};
  312. }
  313.  
  314. .header_nav {
  315. width:{select:Post Size}px;
  316. height:auto;
  317. margin:0 auto;
  318. padding:25px 0;
  319. display:table;
  320. background:{color:Background};
  321. }
  322.  
  323. .header_icon {
  324. width:30px;
  325. padding-right:25px;
  326. display:table-cell;
  327. vertical-align:middle;
  328. border-right:1px solid {color:Borders};
  329. }
  330.  
  331. .h_img {
  332. width:30px;
  333. height:30px;
  334. display:block;
  335. -webkit-border-radius:100%;
  336. -moz-border-radius:100%;
  337. border-radius:100%;
  338. }
  339.  
  340. .title {
  341. {block:ifIconImage}
  342. padding-left:25px;
  343. {/block:ifIconImage}
  344. display:table-cell;
  345. vertical-align:middle;
  346. font-size:1.25em;
  347. font-weight:bold;
  348. }
  349.  
  350. .icons-mobile { display:none; }
  351.  
  352. .fa-bars { font-size:1.5em; }
  353.  
  354. nav {
  355. display:table-cell;
  356. vertical-align:middle;
  357. text-align:right;
  358. }
  359.  
  360. nav a { margin-left:14px; }
  361.  
  362. .header_sub {
  363. width:100%;
  364. margin:100px auto 0 auto;
  365. padding:35px 0;
  366. }
  367.  
  368. .desc {
  369. width:{select:Post Size}px;
  370. margin:0 auto;
  371. font-size:0.9em;
  372. line-height:140%;
  373. }
  374.  
  375.  
  376.  
  377. /* Center Wrapper - Posts */
  378.  
  379.  
  380. .container {
  381. width:{select:Post Size}px;
  382. height:auto;
  383. margin:100px auto;
  384. position:relative;
  385. }
  386.  
  387. article {
  388. width:{select:Post Size}px;
  389. height:auto;
  390. padding:70px 0px;
  391. position:relative;
  392. }
  393.  
  394. article:before, article:last-of-type:after {
  395. content:"";
  396. width:40%;
  397. {block:ifBordersFullWidth}
  398. width:100%;
  399. {/block:ifBordersFullWidth}
  400. height:1px;
  401. left:0;
  402. right:0;
  403. margin:0 auto;
  404. position:absolute;
  405. background:{color:Borders};
  406. }
  407.  
  408. article:before { top:0; }
  409.  
  410. article:last-of-type:after { bottom:0; }
  411.  
  412. .posts.post-quote, .posts.post-chat { width:75%; margin:0 auto; }
  413.  
  414.  
  415.  
  416. /* Text - Links */
  417.  
  418.  
  419. .post_header h2 {
  420. margin-top:0;
  421. color:{color:Heading};
  422. font-size:2.15em;
  423. font-weight:normal;
  424. }
  425.  
  426. .post_header h2:only-child { margin-bottom:40px; }
  427.  
  428. .text { text-align:{select:Text Alignment}; }
  429.  
  430. .text.center blockquote {
  431. margin:10px 0;
  432. position:relative;
  433. border:0;
  434. }
  435.  
  436. .text.center ul, .text.center ol {
  437. margin:10px 0;
  438. list-style-type:none;
  439. }
  440.  
  441. .text.center ul li, .text.center ol li {
  442. padding-left:20px;
  443. position:relative;
  444. }
  445.  
  446. .text.center ul li:before, .text.center ol li:before {
  447. content:"•";
  448. margin-left:-20px;
  449. position:absolute;
  450. }
  451.  
  452. .posts.post-link .icons {
  453. width:20px;
  454. height:20px;
  455. margin:0px auto 20px auto;
  456. line-height:20px;
  457. }
  458.  
  459. .posts.post-link .icons .fa-link {
  460. font-size:16px;
  461. line-height:21px;
  462. }
  463.  
  464.  
  465.  
  466. /* Image */
  467.  
  468.  
  469. article img, img :not(.lightbox-image) { max-width:100%; height:auto; }
  470.  
  471. #photo img { width:100%; display:block; }
  472.  
  473.  
  474.  
  475. /* Photoset */
  476.  
  477.  
  478. .tmblr-lightbox, #tumblr_lightbox { background:rgba({RGBcolor:Background}, 1)!important; }
  479.  
  480. .vignette, #vignette, .lightbox-caption, #tumblr_lightbox_caption { opacity:0!important; }
  481.  
  482. .lightbox-image, #tumblr_lightbox img {
  483. -webkit-border-radius:0px!important;
  484. -moz-border-radius:0px!important;
  485. border-radius:0px!important;
  486. -webkit-box-shadow:none!important;
  487. -moz-box-shadow:none!important;
  488. box-shadow:none!important;
  489. }
  490.  
  491.  
  492.  
  493. /* Video */
  494.  
  495.  
  496. #vid, #vid iframe { display:block; overflow:hidden; }
  497.  
  498.  
  499.  
  500. /* Audio */
  501.  
  502.  
  503. .audio_outer {
  504. width:64px;
  505. height:64px;
  506. margin:0 auto;
  507. position:relative;
  508. display:block;
  509. }
  510.  
  511. iframe.tumblr_audio_player {
  512. width:30px;
  513. height:30px;
  514. top:7px;
  515. left:7px;
  516. padding:10px;
  517. position:absolute;
  518. display:block;
  519. opacity:0;
  520. background:#fff;
  521. -webkit-border-radius:100%;
  522. -moz-border-radius:100%;
  523. border-radius:100%;
  524. }
  525.  
  526. .audio_outer:hover iframe.tumblr_audio_player { opacity:1; }
  527.  
  528. .audio_text { margin-top:10px; }
  529.  
  530. .posts.post-audio .icons {
  531. width:50px;
  532. height:50px;
  533. }
  534.  
  535. .posts.post-audio .icons .fa-volume-down {
  536. font-size:28px;
  537. line-height:50px;
  538. }
  539.  
  540. iframe.soundcloud_audio_player { height:auto!important; display:block; }
  541.  
  542. iframe.spotify_audio_player { display:block; }
  543.  
  544.  
  545.  
  546. /* Ask */
  547.  
  548.  
  549. .ask_outer {
  550. width:100%;
  551. display:table;
  552. }
  553.  
  554. .ask_outer + .text { margin-top:20px; }
  555.  
  556. .ask_asker, .ask_question {
  557. padding:0 20px;
  558. display:table-cell;
  559. }
  560.  
  561. .ask_asker {
  562. width:20%;
  563. vertical-align:middle;
  564. }
  565.  
  566. .ask_asker p { margin-top:5px; }
  567.  
  568. .ask_question {
  569. width:80%;
  570. vertical-align:top;
  571. border-left:1px solid {color:Borders};
  572. }
  573.  
  574. .posts.post-answer .icons {
  575. width:20px;
  576. height:20px;
  577. margin:0px auto;
  578. line-height:20px;
  579. }
  580.  
  581. .posts.post-answer .icons .fa-envelope {
  582. font-size:16px;
  583. line-height:20px;
  584. }
  585.  
  586.  
  587.  
  588. /* Quote */
  589.  
  590.  
  591. .quote {
  592. font-family:{select:Heading Font}, georgia, serif;
  593. font-size:1.75em;
  594. font-style:italic;
  595. line-height:140%;
  596. }
  597.  
  598. .source {
  599. margin-top:15px;
  600. padding-top:15px;
  601. position:relative;
  602. }
  603.  
  604. .source:before {
  605. content:"";
  606. width:80px;
  607. height:2px;
  608. top:0;
  609. position:absolute;
  610. background:{color:Accent};
  611. }
  612.  
  613.  
  614.  
  615. /* Chat */
  616.  
  617.  
  618. ul.chat { margin:0; list-style-type:none; }
  619.  
  620. ul.chat li { padding:10px; color:#888; }
  621.  
  622. ul.chat li:nth-of-type(odd) { background:#f5f5f5; }
  623.  
  624. ul.chat li:nth-of-type(even) { background:#fff; }
  625.  
  626.  
  627.  
  628. /* Perma - Tags - Notes */
  629.  
  630.  
  631. .post_header, .perma, .post_footer, .notes { position:relative; }
  632.  
  633.  
  634. .perma { margin-bottom:40px; }
  635.  
  636. .posts > .post_header:only-child .perma { margin-bottom:0; }
  637.  
  638.  
  639. .tags { margin-top:40px; }
  640.  
  641. .tg { display:none; }
  642.  
  643. .tags a, .reblog_like li { margin:0 7px; }
  644.  
  645.  
  646. .reblog_like {
  647. margin-top:20px;
  648. {block:ifnotShowTags}
  649. margin-top:40px;
  650. {/block:ifnotShowTags}
  651. }
  652.  
  653. .post_footer .reblog_like:only-child { margin-top:40px; }
  654.  
  655. .reblog_like li {
  656. height:1em;
  657. display:inline-block;
  658. vertical-align:middle;
  659. list-style-type:none;
  660. line-height:100%;
  661. }
  662.  
  663. .like_button {
  664. width:1em;
  665. height:1em;
  666. position:relative;
  667. cursor:pointer;
  668. }
  669.  
  670. .like_button iframe {
  671. top:0px;
  672. left:0px;
  673. position:absolute;
  674. opacity:0;
  675. z-index:99;
  676. }
  677.  
  678. .like_button:before {
  679. content:"\f08a";
  680. top:0;
  681. left:0px;
  682. position:absolute;
  683. font-family:'FontAwesome';
  684. font-size:inherit;
  685. font-style:normal;
  686. font-weight:normal;
  687. line-height:100%;
  688. text-decoration:inherit;
  689. text-align:center;
  690. }
  691.  
  692. .like_button.liked:before, .like_button:hover:before, .fa-undo:hover { color:{color:Accent}; }
  693.  
  694.  
  695. .notes { margin-top:70px; }
  696.  
  697. .notecount { margin-bottom:40px; }
  698.  
  699. ol.notes { margin:0; font-size:0.9em; }
  700.  
  701. ol.notes li { padding:2px 0; list-style-type:none; }
  702.  
  703. ol.notes li:first-of-type { padding-top:0; }
  704.  
  705. ol.notes li:last-of-type { padding-bottom:0; }
  706.  
  707. ol.notes li blockquote { margin:0; padding:0; border:0; }
  708.  
  709. ol.notes li.note img.avatar { display:none; }
  710.  
  711.  
  712.  
  713. /* Footer - Pagination - Manual Load */
  714.  
  715.  
  716. footer, .pagination {
  717. width:100%;
  718. margin-bottom:100px;
  719. line-height:100%;
  720. }
  721.  
  722. .pagination a {
  723. margin:0 5px;
  724. padding:3px 5px;
  725. border:1px solid {color:Borders};
  726. }
  727.  
  728. .pagination a:hover { border-color:{color:Accent}; color:{color:Accent}; }
  729.  
  730. #load {
  731. padding:3px 5px;
  732. background:{color:Accent};
  733. font-weight:bold;
  734. cursor:pointer;
  735. }
  736.  
  737. {block:ifInfinitescroll}
  738. #infscr-loading, .pagination { display:none!important; }
  739. {/block:ifInfinitescroll}
  740.  
  741. #totop {
  742. bottom:5px;
  743. right:5px;
  744. padding:10px;
  745. position:fixed;
  746. color:{color:Text};
  747. cursor:pointer;
  748. }
  749.  
  750. .heidi {
  751. bottom:5px;
  752. left:5px;
  753. padding:10px;
  754. position:fixed;
  755. font-size:10px;
  756. }
  757.  
  758.  
  759.  
  760. /* Fade animation */
  761.  
  762.  
  763. @-webkit-keyframes fadein {
  764. from { opacity: 0; }
  765. to { opacity: 1; }
  766. }
  767.  
  768. @-moz-keyframes fadein {
  769. from { opacity: 0; }
  770. to { opacity: 1; }
  771. }
  772.  
  773. @keyframes fadein {
  774. from { opacity: 0; }
  775. to { opacity: 1; }
  776. }
  777.  
  778. header, .header_sub, article, footer, .pagination, .notes {
  779. -webkit-animation: fadein 2s;
  780. -moz-animation: fadein 2s;
  781. animation: fadein 2s;
  782. }
  783.  
  784.  
  785.  
  786. /* Media Queries */
  787.  
  788.  
  789. @media only screen and (min-width:660px) and (max-width:730px) {
  790. .w700 .container, .w700 article, .w700 .header_nav { width:100%; }
  791. .w700 .container { padding:0 25px; }
  792. .w700 .header_nav { padding:25px; }
  793. .w700 .desc { width:75%; }
  794. }
  795.  
  796. @media only screen and (min-width:660px) and (max-width:830px) {
  797. .w800 .container, .w800 article, .w800 .header_nav { width:100%; }
  798. .w800 .container { padding:0 25px; }
  799. .w800 .header_nav { padding:25px; }
  800. .w800 .desc { width:75%; }
  801. }
  802.  
  803. @media only screen and (min-width:660px) and (max-width:930px) {
  804. .w900 .container, .w900 article, .w900 .header_nav { width:100%; }
  805. .w900 .container { padding:0 25px; }
  806. .w900 .header_nav { padding:25px; }
  807. .w900 .desc { width:75%; }
  808. }
  809.  
  810. @media only screen and (max-width: 660px) {
  811. header, .header_nav, .container, article, article:before, article:last-of-type:after, .posts.post-chat, .ask_asker, .ask_question { width:100%; }
  812.  
  813. .header_nav { padding:15px; }
  814. .header_sub { margin:0 auto; }
  815. .desc { width:75%; }
  816. .header_icon { display:block; float:left; }
  817. .title { display:block; float:left; line-height:30px; }
  818. .fa-bars { vertical-align:middle; line-height:inherit; }
  819. .icons-mobile { display:block; float:right; clear:right; text-align:right; cursor:pointer; }
  820.  
  821. nav { width:100%; margin-top:15px; padding-top:15px; display:none; float:left; clear:both; text-align:center; border-top:1px solid {color:Borders}; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; animation: fadein 1s; }
  822. nav a { margin:0 7px; }
  823. .on { display:block; }
  824.  
  825. .container { margin:0; }
  826. article { padding:40px 0; }
  827. {block:HideDescription}
  828. article:first-of-type:before { display:none; }
  829. {/block:HideDescription}
  830. .posts, .perma, .post_footer, .notes { padding:0 15px; }
  831. .posts.post-photo, .posts.post-video { padding:0; }
  832. .cap { margin:0; border:0; }
  833. .ask_outer { padding:0 0 20px 0; border-bottom:1px solid {color:Borders}; }
  834. .ask_asker { padding:0 0 10px 0; display:block; }
  835. .ask_question { padding:0; display:block; border:0; text-align:{select:Text Alignment}; }
  836.  
  837. footer, .pagination { margin:20px 0; }
  838. .heidi { left:0; bottom:0; position:relative; }
  839. }
  840.  
  841.  
  842.  
  843. {CustomCSS}
  844.  
  845.  
  846.  
  847. </style>
  848.  
  849.  
  850. <!--------------- Scripts ---------------------->
  851.  
  852.  
  853. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  854.  
  855. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  856. <script src="http://static.tumblr.com/3yblkz0/Bu3nywvqg/shythemes_vr.js"></script>
  857. {block:IndexPage}
  858. {block:ifInfinitescroll}
  859. <script src="http://static.tumblr.com/3yblkz0/OZInz27pe/jquery.infinitescroll.min.js"></script>
  860. {/block:ifInfinitescroll}
  861. {/block:IndexPage}
  862.  
  863. <script>
  864. $(document).ready(function(){
  865. $('.icons-mobile').click(function(){
  866. if ($('nav').hasClass('on'))
  867. { $('nav').removeClass('on'); }
  868. else
  869. { $('nav').addClass('on'); }
  870. return false;
  871. });
  872. $(window).scroll(function () {
  873. if ($(this).scrollTop() > 200)
  874. { $('#totop').fadeIn(); }
  875. else
  876. { $('#totop').fadeOut(); }
  877. });
  878. $('#totop').click(function () {
  879. $("html, body").animate({scrollTop:0}, 1000); return false;
  880. });
  881. $('.photo-slideshow').pxuPhotoset({
  882. lightbox: true,
  883. highRes : true,
  884. rounded: false,
  885. gutter: '5px',
  886. photoset: '.photo-slideshow',
  887. photoWrap: '.photo-data',
  888. photo: '.pxu-photo'
  889. });
  890. {block:IndexPage}
  891. {block:ifInfinitescroll}
  892. var $container = $('.container');
  893. $container.infinitescroll({
  894. itemSelector :"article",
  895. navSelector : ".pagination",
  896. nextSelector : ".pagination a",
  897. loadingImg : "",
  898. loadingText : "<em></em>",
  899. bufferPx : 800,
  900. {block:ifManualLoad}
  901. errorCallback: function () { jQuery('footer').delay(30).fadeOut("slow"); },
  902. {/block:ifManualLoad}
  903. },
  904. function( newElements ) {
  905. var $newElems = $(newElements);
  906. resizeVideos();
  907. $newElems.find('.photo-slideshow').pxuPhotoset({
  908. lightbox: true,
  909. highRes : true,
  910. rounded: false,
  911. gutter: '5px',
  912. photoset: '.photo-slideshow',
  913. photoWrap: '.photo-data',
  914. photo: '.pxu-photo'
  915. });
  916. var $newElemsIDs = $newElems.map(function (){return this.id;}).get();
  917. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  918. });
  919. {block:ifManualLoad}
  920. $(window).unbind('.infscr');
  921. $('#load').click(function() {
  922. $container.infinitescroll('retrieve');return false;
  923. });
  924. {/block:ifManualLoad}
  925. {/block:ifInfinitescroll}
  926. {/block:IndexPage}
  927. });
  928. </script>
  929.  
  930.  
  931. </head>
  932. <body class="{select:Tumblr Controls} w{select:Post Size}">
  933.  
  934.  
  935.  
  936. <header>
  937. <section class="header_nav">
  938. {block:ifIconImage}<div class="header_icon"><img class="h_img" src="{image:Icon}" /></div>{/block:ifIconImage}
  939. {block:ShowTitle}<div class="title"><a href="/">{Title}</a></div>{block:ShowTitle}
  940. <div class="icons-mobile"><i class="fa fa-bars"></i></div>
  941. <nav>
  942. {block:HideTitle}<a href="/">home</a>{/block:HideTitle}
  943. {block:ifAskTitle}<a href="/ask">{text:Ask Title}</a>{/block:ifAskTitle}
  944. {block:ifLink1}<a href="{text:Link1}">{text:Title1}</a>{/block:ifLink1}
  945. {block:ifLink2}<a href="{text:Link2}">{text:Title2}</a>{/block:ifLink2}
  946. {block:ifLink3}<a href="{text:Link3}">{text:Title3}</a>{/block:ifLink3}
  947. {block:ifArchiveTitle}<a href="/archive">{text:Archive Title}</a>{/block:ifArchiveTitle}
  948. </nav>
  949. </section>
  950. </header>
  951.  
  952. {block:ShowDescription}
  953. <section class="header_sub">
  954. <div class="desc">{Description}</div>
  955. </section>
  956. {/block:ShowDescription}
  957.  
  958.  
  959.  
  960. <section class="container">
  961. {block:Posts}
  962. <article id="{PostID}">
  963. <div class="posts post-{PostType}">
  964.  
  965.  
  966.  
  967. {block:Photo}
  968. {block:Date} <!---- Start of Perma ---->
  969. <div class="perma">
  970. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  971. {block:PermalinkPage}
  972. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  973. {/block:PermalinkPage}
  974. </div>
  975. {/block:Date}<!---- End of Perma ---->
  976.  
  977. <div id="photo">
  978. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  979. </div>
  980. {/block:Photo}
  981.  
  982.  
  983.  
  984. {block:Photoset}
  985. {block:Date} <!---- Start of Perma ---->
  986. <div class="perma">
  987. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  988. {block:PermalinkPage}
  989. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  990. {/block:PermalinkPage}
  991. </div>
  992. {/block:Date}<!---- End of Perma ---->
  993.  
  994. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  995. {block:Photos}
  996. <div class="photo-data">
  997. <div class="pxu-photo">
  998. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  999. </div>
  1000. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1001. </div>
  1002. {/block:Photos}
  1003. </div>
  1004. {/block:Photoset}
  1005.  
  1006.  
  1007.  
  1008. {block:Video}
  1009. {block:Date} <!---- Start of Perma ---->
  1010. <div class="perma">
  1011. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1012. {block:PermalinkPage}
  1013. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1014. {/block:PermalinkPage}
  1015. </div>
  1016. {/block:Date}<!---- End of Perma ---->
  1017.  
  1018. <div id="vid">{Video-700}</div>
  1019. {/block:Video}
  1020.  
  1021.  
  1022.  
  1023. {block:Audio}
  1024. {block:Date} <!---- Start of Perma ---->
  1025. <div class="perma">
  1026. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1027. {block:PermalinkPage}
  1028. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1029. {/block:PermalinkPage}
  1030. </div>
  1031. {/block:Date}<!---- End of Perma ---->
  1032.  
  1033. {block:AudioPlayer}<div class="audio_outer">
  1034. <div class="icons"><i class="fa fa-volume-down"></i></div>
  1035. {AudioPlayerWhite}
  1036. </div>{/block:AudioPlayer}
  1037. <div class="audio_text">
  1038. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  1039. <p>
  1040. {block:Artist}{Artist}{/block:Artist}
  1041. {block:Album}{block:Artist}<span class="slash">/</span>{/block:Artist} {Album}{/block:Album}
  1042. </p>
  1043. </div>
  1044. {/block:Audio}
  1045.  
  1046.  
  1047.  
  1048. {block:Text}
  1049. <div class="post_header">
  1050. {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  1051.  
  1052. {block:Date} <!---- Start of Perma ---->
  1053. <div class="perma">
  1054. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1055. {block:PermalinkPage}
  1056. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1057. {/block:PermalinkPage}
  1058. </div>
  1059. {/block:Date}<!---- End of Perma ---->
  1060. </div>
  1061.  
  1062. {block:Body}<div class="text {select:Text Alignment}">{Body}</div>{/block:Body}
  1063. {/block:Text}
  1064.  
  1065.  
  1066.  
  1067. {block:Link}
  1068. <div class="post_header">
  1069. <div class="icons"><i class="fa fa-link"></i></div>
  1070. <h2><a href="{URL}" target="_blank">{Name}</a></h2>
  1071.  
  1072. {block:Date} <!---- Start of Perma ---->
  1073. <div class="perma">
  1074. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1075. {block:PermalinkPage}
  1076. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1077. {/block:PermalinkPage}
  1078. </div>
  1079. {/block:Date}<!---- End of Perma ---->
  1080. </div>
  1081.  
  1082. {block:Description}<div class="text {select:Text Alignment}">{Description}</div>{/block:Description}
  1083. {/block:Link}
  1084.  
  1085.  
  1086.  
  1087. {block:Answer}
  1088. {block:Date} <!---- Start of Perma ---->
  1089. <div class="perma">
  1090. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1091. {block:PermalinkPage}
  1092. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1093. {/block:PermalinkPage}
  1094. </div>
  1095. {/block:Date}<!---- End of Perma ---->
  1096.  
  1097. <div class="ask_outer">
  1098. <div class="ask_asker"><div class="icons"><i class="fa fa-envelope"></i></div> <p>{Asker}</p></div>
  1099. <div class="ask_question">{Question}</div>
  1100. </div>
  1101. <div class="text {select:Text Alignment}">{Answer}</div>
  1102. {/block:Answer}
  1103.  
  1104.  
  1105.  
  1106. {block:Quote}
  1107. {block:Date} <!---- Start of Perma ---->
  1108. <div class="perma">
  1109. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1110. {block:PermalinkPage}
  1111. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1112. {/block:PermalinkPage}
  1113. </div>
  1114. {/block:Date}<!---- End of Perma ---->
  1115.  
  1116. <div class="quote">{Quote}</div>
  1117. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1118. {/block:Quote}
  1119.  
  1120.  
  1121.  
  1122. {block:Chat}
  1123. <div class="post_header">
  1124. {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  1125.  
  1126. {block:Date} <!---- Start of Perma ---->
  1127. <div class="perma">
  1128. {block:IndexPage}<a href="{Permalink}">{ShortMonth} {DayOfMonth}, {Year}</a>{/block:IndexPage}
  1129. {block:PermalinkPage}
  1130. {DayOfWeek}, {DayOfMonth} {ShortMonth} {Year} {block:RebloggedFrom}<span class="slash">/</span> by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1131. {/block:PermalinkPage}
  1132. </div>
  1133. {/block:Date}<!---- End of Perma ---->
  1134. </div>
  1135.  
  1136. <ul class="chat">
  1137. {block:Lines}
  1138. <li>{block:Label}<b>{Label}</b>{/block:Label} {Line}</li>
  1139. {/block:Lines}
  1140. </ul>
  1141. {/block:Chat}
  1142.  
  1143.  
  1144.  
  1145. </div>
  1146.  
  1147.  
  1148.  
  1149. {block:Caption}
  1150. <div class="cap text {select:Text Alignment} {block:IndexPage}{block:ifnotShowCaptions}cp{/block:ifnotShowCaptions} {block:Audio}cp{/block:Audio}{/block:IndexPage}">{Caption}</div>
  1151. {/block:Caption}
  1152.  
  1153.  
  1154. <div class="post_footer">
  1155. {block:HasTags}
  1156. <div class="tags {block:IndexPage}{block:ifnotShowTags}tg{/block:ifnotShowTags}{/block:IndexPage}">{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>
  1157. {/block:HasTags}
  1158. {block:IndexPage}{block:ifShowReblogandLike}
  1159. <div class="reblog_like">
  1160. <li><a href="{ReblogURL}" target="_blank"><i class="fa fa-undo"></i></a></li>
  1161. <li>{LikeButton size="14"}</li></div>
  1162. {/block:ifShowReblogandLike}{/block:IndexPage}
  1163. </div>
  1164.  
  1165.  
  1166.  
  1167. </article>
  1168.  
  1169.  
  1170.  
  1171. {block:PostNotes}
  1172. <div class="notes">
  1173. {block:NoteCount}
  1174. <div class="notecount">{NoteCountWithLabel}</div>
  1175. {/block:NoteCount}
  1176. {PostNotes}
  1177. </div>
  1178. {/block:PostNotes}
  1179.  
  1180.  
  1181.  
  1182. {block:ContentSource}<!-- {SourceURL}
  1183. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1184. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1185. {/block:ContentSource}
  1186. <!-- {block:NoRebloggedFrom}
  1187. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1188. {/block:NoRebloggedFrom} -->
  1189.  
  1190.  
  1191.  
  1192. {/block:Posts}
  1193. </section>
  1194.  
  1195.  
  1196.  
  1197. {block:Pagination}<div class="pagination">
  1198. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  1199. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  1200. </div>{/block:Pagination}
  1201.  
  1202.  
  1203. {block:IndexPage}{block:ifInfinitescroll}{block:ifManualLoad}
  1204. <footer><a id="load">load more</a></footer>
  1205. {/block:ifManualLoad}{/block:ifInfinitescroll}{/block:IndexPage}
  1206.  
  1207.  
  1208. {block:ifScrolltoTop}<a id="totop"><i class="fa fa-angle-up fa-lg"></i></a>{/block:ifScrolltoTop}
  1209.  
  1210.  
  1211. <a href="http://ladmilk.tumblr.com" title="Theme by Heidi" class="heidi">cr.</a>
  1212.  
  1213.  
  1214.  
  1215. </body>
  1216. </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!