API tools faq
paste
Advertisement
Guest User

Stuart - Atmosphere Edit

a guest
Apr 20th, 2014
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <!--=============================================================
  6.  
  7. A B O U T
  8. ---------
  9.  
  10. Theme Name: Atmposphere
  11. Theme URL: http://atmospheredemo.tumblr.com/
  12. Author Name: Paul Borsan
  13. Author URL: http://paulborsan.com
  14.  
  15. Release Date: April 5, 2014
  16. Version: 1.0.1
  17. + April 8 - Added option to add avatar (circle or square).
  18.  
  19.  
  20. C R E D I T S
  21. -------------
  22.  
  23. **SCRIPTS**
  24. + jQuery - http://jquery.com
  25. + Masonry - http://masonry.desandro.com
  26. + FitVids - http://fitvidsjs.com/
  27. + InfiniteScroll - http://www.infinite-scroll.com/
  28. + PhotosetGrid - http://stylehatch.github.com/photoset-grid/
  29.  
  30. **FONTS**
  31. + Lato - http://www.google.com/fonts
  32. + Montserrat - http://www.google.com/fonts
  33. + Open Sans - http://www.google.com/fonts
  34.  
  35. **IMAGES**
  36. + Header images by Ivo Ruijters
  37. - https://creativemarket.com/AroundSeven
  38. # IMPORTANT:
  39. All images seen on the preview are not included with the theme
  40.  
  41. ==============================================================-->
  42.  
  43. <meta charset="utf-8">
  44. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  45.  
  46. <title>{Title}{block:TagPage} &bull; Posts Tagged &lsquo;{Tag}&rsquo;{/block:TagPage}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
  47.  
  48. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  49.  
  50. <link rel="shortcut icon" href="{Favicon}">
  51. <link rel="apple-touch-icon" href="{PortraitURL-128}">
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  53.  
  54. <!--[if lt IE 9]>
  55. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  56. <![endif]-->
  57.  
  58. <!-- Default fonts -->
  59. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
  60. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  61. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,400,800,300' rel='stylesheet' type='text/css'>
  62.  
  63. <!-- Custom fonts adding option -->
  64. {text:Font Embed Code}
  65.  
  66. <!-- Scripts -->
  67. <script src="http://static.tumblr.com/tp5xqxz/tb4n3ba1y/paulborsan_scripts.js" type="text/javascript"></script>
  68.  
  69. <!-- Style sheets -->
  70. <link href="http://static.tumblr.com/tp5xqxz/HeVn3bbfl/paulborsan_icons.css" rel="stylesheet">
  71. <link rel="stylesheet" href="http://static.tumblr.com/tp5xqxz/lgxn3bbhp/paulborsan_lightbox.css">
  72.  
  73. <!-- Images -->
  74. <meta name="image:Logo" content="">
  75.  
  76. <!-- Selects -->
  77. <meta name="select:Overlay Transparency"
  78. content=".8" title="Dark">
  79. <meta name="select:Overlay Transparency"
  80. content=".6" title="Medium">
  81. <meta name="select:Overlay Transparency"
  82. content=".4" title="Light">
  83.  
  84. <meta name="select:Title Border Style"
  85. content="5px solid" title="Bold solid">
  86. <meta name="select:Title Border Style"
  87. content="5px dashed" title="Bold dashed">
  88. <meta name="select:Title Border Style"
  89. content="5px dotted" title="Bold dotted">
  90. <meta name="select:Title Border Style"
  91. content="3px solid" title="Medium solid">
  92. <meta name="select:Title Border Style"
  93. content="3px dashed" title="Medium dashed">
  94. <meta name="select:Title Border Style"
  95. content="3px dotted" title="Medium dotted">
  96. <meta name="select:Title Border Style"
  97. content="1px solid" title="Thin solid">
  98. <meta name="select:Title Border Style"
  99. content="1px dashed" title="Thin dashed">
  100. <meta name="select:Title Border Style"
  101. content="1px dotted" title="Thin dotted">
  102.  
  103. <!-- Colors -->
  104. <meta name="color:Header Gradient Top" content="#529ecc">
  105. <meta name="color:Header Gradient Bottom" content="#e89e8c">
  106. <meta name="color:Header Links" content="#ffffff">
  107. <meta name="color:Description" content="#ffffff">
  108. <meta name="color:Borders" content="#eeeeee">
  109. <meta name="color:Social Networks" content="#cccccc">
  110. <meta name="color:Copyright" content="#aaaaaa">
  111.  
  112. <!-- Options -->
  113. <meta name="if:Header Overlay" content="1">
  114. <meta name="if:Gradient Header" content="1">
  115. <meta name="if:Contact Link" content="1">
  116. <meta name="if:Submit Link" content="1">
  117. <meta name="if:Archive Link" content="1">
  118. <meta name="if:Show Date" content="1">
  119. <meta name="if:Show Notes" content="1">
  120. <meta name="if:Show Comment Counter" content="1">
  121. <meta name="if:Reblog from Homepage" content="1">
  122. <meta name="if:Like from Homepage" content="1">
  123. <meta name="if:Show Tags" content="1">
  124. <meta name="if:Load More Pagination" content="0">
  125.  
  126. <!-- Texts -->
  127. <meta name="text:Font Embed Code" content="">
  128. <meta name="text:Headings Font Name" content="Montserrat">
  129. <meta name="text:Body Font Name" content="Lato">
  130. <meta name="text:Google Analytics ID" content="">
  131. <meta name="text:Disqus shortname" content="">
  132. <meta name="text:Copyright" content="">
  133.  
  134. <!-- Socials -->
  135. <meta name='text:Dribbble URL' content="">
  136. <meta name='text:Facebook URL' content="">
  137. <meta name='text:Flickr URL' content="">
  138. <meta name='text:Github URL' content="">
  139. <meta name='text:Instagram URL' content="">
  140. <meta name='text:Linkedin URL' content="">
  141. <meta name='text:Pinterest URL' content="">
  142. <meta name='text:Twitter URL' content="">
  143. <meta name='text:Vimeo URL' content="">
  144. <meta name='text:Youtube URL' content="">
  145.  
  146. <style>
  147.  
  148. /* Stylesheet INDEX
  149. -------------------------------------------------------------
  150. 0. Tumblr follow button.
  151. 1. Basic settings.
  152. 2. Header.
  153. 3. Content and posts.
  154. 4. Permalink.
  155. 5. Pagination.
  156. 6. Footer.
  157. 7. Media queries.
  158.  
  159. ---------------------------------------------------------- */
  160.  
  161.  
  162. /* 0. TUMBLR FOLLOW BUTTON
  163. ---------------------------------------------------------- */
  164.  
  165. #tumblr_controls { /* Change it to your needs */
  166. position: fixed;
  167. right: 0px;
  168. top: 0px;
  169. }
  170.  
  171.  
  172. /* 1. BASIC SETTINGS
  173. ---------------------------------------------------------- */
  174.  
  175. *, *:after, *:before {
  176. -webkit-box-sizing: border-box;
  177. -moz-box-sizing: border-box;
  178. -ms-box-sizing: border-box;
  179. -o-box-sizing: border-box;
  180. box-sizing: border-box;
  181. }
  182.  
  183. a, p, h1, h2, h3, h4, h5, img, div, body, html {
  184. margin: 0;
  185. padding: 0;
  186. }
  187.  
  188. a, a:visited {
  189. color: {AccentColor};
  190. text-decoration: none;
  191. opacity: 1;
  192. }
  193.  
  194. a:hover {
  195. opacity: .7;
  196. }
  197.  
  198. body, html {
  199. position: relative;
  200. width: 100%;
  201. }
  202.  
  203. body {
  204. line-height: 150%;
  205. font-size: 18px;
  206. font-weight: 300;
  207. font-family: Lato;
  208. font-family: {text:Body Font Name};
  209. background-color: {BackgroundColor};
  210. color: {color:Body};
  211. }
  212.  
  213. h1, h2, h3, h4, h5 {
  214. /* Bottom margin on ask, submit and 404 pages */
  215. margin: 0 0 15px 0;
  216.  
  217. /* Not on index or posts page */
  218. {block:Indexpage}
  219. margin: 0;
  220. {/block:Indexpage}
  221. {block:PermalinkPagination}
  222. margin: 0;
  223. {/block:PermalinkPagination}
  224.  
  225. line-height: 125%;
  226. font-family: Montserrat;
  227. font-family: {text:Headings Font Name};
  228. font-weight: 900;
  229. text-transform: uppercase;
  230. color: {color:Headings};
  231. }
  232.  
  233. h1 { font-size: 52px; }
  234. h2 { font-size: 40px; }
  235. h3 { font-size: 24px; }
  236. h4 { font-size: 18px; }
  237. h5 { font-size: 14px; }
  238.  
  239. a, a:hover {
  240. -webkit-transition: all .25s linear;
  241. -moz-transition: all .25s linear;
  242. -o-transition: all .25s linear;
  243. -ms-transition: all .25s linear;
  244. transition: all .25s linear;
  245. }
  246.  
  247.  
  248. /* 2. HEADER
  249. ---------------------------------------------------------- */
  250.  
  251. #header {
  252. {block:Indexpage}
  253. height: 500px;
  254. {/block:Indexpage}
  255.  
  256. {block:Permalinkpage}
  257. height: 300px;
  258. {/block:Permalinkpage}
  259.  
  260. position: relative;
  261. overflow: hidden;
  262. text-align: center;
  263. background-image: url('{HeaderImage}');
  264. background-color: {color:Header Gradient Top};
  265. {block:ifGradientHeader}
  266. background-color: -moz-linear-gradient(top, {color:Header Gradient Top} 0%, {color:Header Gradient Bottom} 100%);
  267. background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,{color:Header Gradient Top}), color-stop(100%,{color:Header Gradient Bottom}));
  268. background-color: -webkit-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  269. background-color: -o-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  270. background-color: -ms-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  271. background-color: linear-gradient(to bottom, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  272. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Header Gradient Top}', endColorstr='{color:Header Gradient Bottom}',GradientType=0 );
  273. {/block:ifGradientHeader}
  274. background-size: cover;
  275. }
  276.  
  277. .overlay {
  278. position: absolute;
  279. top: 0; left: 0;
  280. height: 100%;
  281. width: 100%;
  282. opacity: {select:Overlay Transparency};
  283. background: {color:Header Gradient Top};
  284. {block:ifGradientHeader}
  285. background: -moz-linear-gradient(top, {color:Header Gradient Top} 0%, {color:Header Gradient Bottom} 100%);
  286. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,{color:Header Gradient Top}), color-stop(100%,{color:Header Gradient Bottom}));
  287. background: -webkit-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  288. background: -o-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  289. background: -ms-linear-gradient(top, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  290. background: linear-gradient(to bottom, {color:Header Gradient Top} 0%,{color:Header Gradient Bottom} 100%);
  291. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Header Gradient Top}', endColorstr='{color:Header Gradient Bottom}',GradientType=0 );
  292. {/block:ifGradientHeader}
  293. }
  294.  
  295. #topbar {
  296. position: absolute;
  297. top: 0; left: 0;
  298. padding: 25px 0;
  299. width: 100%;
  300. background: rgba(0,0,0,.1);
  301. }
  302.  
  303. .topbar {
  304. width: 700px;
  305. margin: auto;
  306. {block:ShowDescription}
  307. text-align: left;
  308. {/block:ShowDescription}
  309. {block:HideDescription}
  310. text-align: center;
  311. {/block:HideDescription}
  312. }
  313.  
  314. .topbar a {
  315. text-transform: uppercase;
  316. font-size: 14px;
  317. letter-spacing: 2px;
  318. margin: 0 10px;
  319. color: {color:Header Links};
  320. }
  321.  
  322. .description_btn, .close_btn {
  323. float: right;
  324. cursor: pointer;
  325. }
  326.  
  327. .close_btn {
  328. display: none;
  329. }
  330.  
  331. .title {
  332. position: absolute;
  333. width: 100%;
  334. text-align: center;
  335. top: 50%;
  336. z-index: 1;
  337. }
  338.  
  339. .title a {
  340. color: {TitleColor};
  341. opacity: 1;
  342. font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
  343. font-weight: {TitleFontWeight};
  344. padding: 25px;
  345. letter-spacing: 5px;
  346. border: {select:Title Border Style} {TitleColor};
  347. }
  348.  
  349. .logo { height: 40px; }
  350.  
  351. .description {
  352. position: absolute;
  353. top: 50%; left: 50%;
  354. z-index: -1;
  355. margin: 0 0 0 -175px;
  356. color: {color:Description};
  357. width: 350px;
  358. opacity: 0;
  359. }
  360.  
  361. .title, .description {
  362. -webkit-transition: opacity 1s;
  363. -moz-transition: opacity 1s;
  364. -ms-transition: opacity 1s;
  365. -o-transition: opacity 1s;
  366. transition: opacity 1s;
  367. }
  368.  
  369.  
  370. /* 3. CONTENT AND POSTS
  371. ---------------------------------------------------------- */
  372.  
  373. #content {
  374. width: 1280px;
  375. margin: 50px auto 0;
  376. }
  377.  
  378. .post {
  379. width: 1280px;
  380. overflow: hidden;
  381.  
  382. {block:IndexPage}
  383. margin: 50px 0;
  384. {/block:IndexPage}
  385.  
  386. {block:PermalinkPage}
  387. margin: 75px 0;
  388. {/block:PermalinkPage}
  389. }
  390.  
  391. .post img {
  392. max-width: 100%;
  393. }
  394.  
  395. .image-container { text-align: center; }
  396. .photoset-grid a, .image-container a {
  397. opacity: 1;
  398. }
  399.  
  400. .image-container, .photoset-grid, .video-wrapper, .player {
  401. margin-top: 50px;
  402. }
  403.  
  404. .player { text-align: center; }
  405. .p_big { display: block; }
  406. .p_med { display: none; }
  407. .p_small { display: none; }
  408. .p_tiny { display: none; }
  409.  
  410. .info_up, .info_down {
  411. position: relative;
  412. left: 50%;
  413. width: 640px;
  414. }
  415.  
  416. .info_up {
  417. margin: 30px 0 10px -320px;
  418. }
  419.  
  420. .date, .note_count,
  421. .asker_name, .comments {
  422. display: inline-block;
  423. letter-spacing: 1px;
  424. text-transform: uppercase;
  425. font-family: Montserrat;
  426. font-family: {text:Headings Font Name};
  427. font-weight: 400;
  428. font-size: 16px;
  429. }
  430. .date:after, .note_count:after,
  431. .asker_name:before { content: "\2013 "; color: #ccc;}
  432. .date a, .note_count a,
  433. .asker_name, .comments a { color: #aaa; }
  434.  
  435. .reblog_btn,
  436. .like_btn {
  437. display: inline-block;
  438. float: right;
  439. margin: 0 5px;
  440. }
  441.  
  442. .caption {
  443. position: relative;
  444. width: 640px;
  445. margin: 0 auto;
  446. }
  447. .caption h2 { font-weight: 900; }
  448. .article { width: 640px; margin: auto; }
  449. .quote h2 { font-style: italic; }
  450. .quote h2:before { content: "\201C "; }
  451. .quote h2:after { content: "\201D "; }
  452. .quote p:before { content: "\2014 "; }
  453. ol.chat_lines { list-style-type: none; padding: 0; }
  454. .chat_label { font-weight: 400; margin: 0 5px 0 0;}
  455.  
  456. .info_down {
  457. padding-bottom: 100px;
  458. border-bottom: 1px solid {color:Borders};
  459. margin: 10px 0 0 -320px;
  460. }
  461.  
  462. .tags h5, .tags a { display: inline-block; }
  463. .tags h5 { margin : 0 5px 0 0; }
  464. .tags a { margin: 0 0 0 5px; }
  465.  
  466.  
  467. /* 4. PERMALINK
  468. ---------------------------------------------------------- */
  469.  
  470. .permalink-page {
  471. width: 640px;
  472. margin: 75px auto 0;
  473. background: #fff;
  474. -webkit-box-sizing: border-box;
  475. -moz-box-sizing: border-box;
  476. -ms-box-sizing: border-box;
  477. -o-box-sizing: border-box;
  478. box-sizing: border-box;
  479. }
  480.  
  481. ol.notes {
  482. font-weight: 300;
  483. font-size: 14px;
  484. line-height: 100%;
  485. padding: 0px;
  486. margin: 50px 0 0;
  487. list-style-type: none;
  488. }
  489.  
  490. ol.notes li.note { padding: 10px 10px 10px 0; }
  491.  
  492. ol.notes li.note img.avatar {
  493. vertical-align: -4px;
  494. margin-right: 10px;
  495. width: 16px;
  496. height: 16px;
  497. border-radius: 100%;
  498. }
  499.  
  500. ol.notes li.note blockquote {
  501. padding: 4px 10px;
  502. margin: 10px 0px 0px 25px;
  503. }
  504.  
  505. ol.notes li.note blockquote a { text-decoration: none; }
  506.  
  507.  
  508. /* 5. PAGINATION
  509. ---------------------------------------------------------- */
  510.  
  511. .infinite_scroll-container,
  512. .pagination-container {
  513. width: 100%;
  514. padding: 0 0 50px;
  515.  
  516. {block:PermalinkPage}
  517. padding: 50px 0 50px;
  518. {/block:PermalinkPage}
  519. }
  520.  
  521. .pagination, .infinite_scroll {
  522. margin: auto;
  523. width: 640px;
  524. padding: 0 0 50px;
  525.  
  526. {block:PermalinkPage}
  527. padding: 50px 0 50px;
  528. border-top: 1px solid {color:Borders};
  529. {/block:PermalinkPage}
  530.  
  531. overflow: hidden;
  532. border-bottom: 1px solid {color:Borders};
  533. }
  534.  
  535. .page_info {
  536. position: absolute;
  537. width: 150px;
  538. margin-left: 250px;
  539. text-align: center;
  540. }
  541.  
  542. .page_info span {
  543. position: relative;
  544. top: -3px;
  545. font-size: 12px;
  546. opacity: .3;
  547. margin: 0 5px;
  548. }
  549.  
  550. .nextpage, .previouspage {
  551. text-transform: uppercase;
  552. color: {AccentColor};
  553. font-size: 14px;
  554. }
  555.  
  556. .fa-chevron-left, .fa-chevron-right {
  557. color: #000;
  558. font-size: 12px;
  559. }
  560.  
  561. .nextpage:hover,
  562. .previouspage:hover {
  563. opacity: .7;
  564. }
  565.  
  566. .infinite_scroll a {
  567. display: inline-block;
  568. text-align: center;
  569. padding: 10px 40px;
  570. text-transform: uppercase;
  571. font-size: 12px;
  572. color: #fff;
  573. background: {AccentColor};
  574. border-radius: 3px;
  575. }
  576.  
  577. .infinite_scroll a:hover {
  578. opacity: .7;
  579. }
  580.  
  581. .previouspage { float: left; }
  582. .page_info h5 { font-size: 20px; }
  583. .nextpage { float: right; }
  584. .infinite_scroll { text-align: center; }
  585. .previouspage, .page_info, .nextpage { display: inline-block;}
  586. .infinite_scroll a p:hover { background: #444; }
  587. #infscr-loading { display: none !important; }
  588.  
  589.  
  590. /* 6. FOOTER
  591. ---------------------------------------------------------- */
  592.  
  593. footer {
  594. width: 640px;
  595. margin: auto;
  596. text-align: center;
  597. padding: 0 0 50px;
  598. }
  599.  
  600. .social a {
  601. box-sizing: border-box;
  602. margin: 0 10px;
  603. font-size: 26px;
  604. color: {color:Social networks};
  605. }
  606.  
  607. .copyright {
  608. color: {color:Copyright};
  609. margin: 10px 0 0;
  610. font-size: 14px;
  611. }
  612.  
  613. .credit {
  614. font-size: 12px;
  615. color: #aaa;
  616. }
  617.  
  618. .user-avatar { margin: 15px 0 0; }
  619. .avatar-style-circle .user-avatar { border-radius: 50%; }
  620.  
  621.  
  622. /* 7. MEDIA QUERIES
  623. ---------------------------------------------------------- */
  624.  
  625. @media only screen and (max-width : 1380px) {
  626.  
  627. #content, .post {
  628. width: 100%;
  629. }
  630.  
  631. .post {
  632. padding: 0 50px;
  633. }
  634.  
  635. }
  636.  
  637. @media only screen and (min-width : 800px) and (max-width : 1380px) {
  638.  
  639. .image { min-width: 640px; }
  640.  
  641. }
  642.  
  643. @media only screen and (max-width : 740px) {
  644.  
  645. .permalink-page, .pagination, .infinite_scroll, footer {
  646. padding-left: 50px; padding-right: 50px;
  647. width: 100%;
  648. }
  649.  
  650. .page_info { display: none; }
  651.  
  652. }
  653.  
  654. @media only screen and (max-width : 720px) {
  655.  
  656. .image {
  657. max-width: 100% !important;
  658. width: 100% !important;
  659. }
  660.  
  661. .topbar, .article, .caption {
  662. width: 100%;
  663. }
  664.  
  665. .p_big { display: none; }
  666. .p_med { display: block; }
  667. .p_small { display: none; }
  668. .p_tiny { display: none; }
  669.  
  670. .info_up, .info_down {
  671. left: 0;
  672. width: 100%;
  673. }
  674.  
  675. .info_up { margin: 30px 0 10px 0; }
  676. .info_down { margin: 10px 0 0 0; }
  677.  
  678. }
  679.  
  680. @media only screen and (max-width : 600px) {
  681.  
  682. .p_big { display: none; }
  683. .p_med { display: none; }
  684. .p_small { display: block; }
  685. .p_tiny { display: none; }
  686.  
  687. }
  688.  
  689. @media only screen and (max-width : 520px) {
  690.  
  691. #content {
  692. margin-top: 25px;
  693. }
  694.  
  695. .post {
  696. padding: 0 25px;
  697. }
  698.  
  699. .permalink-page, .pagination, .infinite_scroll, footer {
  700. padding-left: 25px; padding-right: 25px;
  701. }
  702.  
  703. }
  704.  
  705. @media only screen and (max-width : 460px) {
  706.  
  707. .p_big { display: none; }
  708. .p_med { display: none; }
  709. .p_small { display: none; }
  710. .p_tiny { display: block; }
  711.  
  712. }
  713.  
  714. /* Custom CSS */
  715. {CustomCSS}
  716.  
  717.  
  718. </style>
  719. </head>
  720. <body>
  721.  
  722. <!-- HTML INDEX
  723. -------------------------------------------------------------
  724.  
  725. 1. Header.
  726. 2. Content and posts.
  727. 3. Posts details ( top ).
  728. 4. Posts details ( bottom ).
  729. 5. Permalink.
  730. 6. Pagination.
  731. 7. Footer.
  732.  
  733. ------------------------------------------------------------>
  734.  
  735.  
  736. <!-- 1. HEADER
  737. ------------------------------------------------------------>
  738.  
  739. <header id="header">
  740. {block:ifHeaderOverlay}
  741. <div class="overlay"></div>
  742. {/block:ifHeaderOverlay}
  743.  
  744. {block:Indexpage}
  745. <div id="topbar">
  746. <div class="topbar">
  747. {block:ifContactLink}
  748. <a href="/ask">Ask</a>
  749. {/block:ifContactLink}
  750.  
  751. {block:ifSubmitLink}
  752. <a href="/submit">Submit</a>
  753. {/block:ifSubmitLink}
  754.  
  755. {block:ifArchiveLink}
  756. <a href="/archive">{lang:Archive}</a>
  757. {/block:ifArchiveLink}
  758.  
  759. {block:HasPages}
  760. {block:Pages}
  761. <a href="{URL}">{Label}</a>
  762. {/block:Pages}
  763. {/block:HasPages}
  764.  
  765. {block:ShowDescription}
  766. <a class="description_btn">
  767. <i class="fa fa-reorder"></i>
  768. </a>
  769.  
  770. <a class="close_btn">
  771. <i class="fa fa-times"></i>
  772. </a>
  773. {/block:ShowDescription}
  774. </div>
  775. </div>
  776. {/block:Indexpage}
  777.  
  778. {block:ifLogoImage}
  779. <a href="/">
  780. <div class="title">
  781. <img class="logo" src="{image:Logo}">
  782. </div>
  783. </a>
  784. {/block:ifLogoImage}
  785.  
  786. {block:ifNotLogoImage}
  787. <h3 class="title">
  788. <a href="/">
  789. {block:Indexpage}{Title}{/block:Indexpage}
  790. {block:Permalinkpage}{lang:Back} {lang:Home}{/block:Permalinkpage}
  791. </a>
  792. </h3>
  793. {/block:ifNotLogoImage}
  794.  
  795. {block:ShowDescription}
  796. <div class="description">
  797. {Description}
  798. </div>
  799. {/block:ShowDescription}
  800. </header>
  801.  
  802.  
  803. <!-- 2. CONTENT AND POSTS
  804. ------------------------------------------------------------>
  805.  
  806. <section id="content">
  807. {block:Posts}
  808.  
  809. <article class="post">
  810. {block:Photo}
  811. <div class="image-container">
  812. {LinkOpenTag}
  813. <img class="image" src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  814. {LinkCloseTag}
  815. </div>
  816. {/block:Photo}
  817.  
  818. {block:Photoset}
  819. <div class="photoset-grid"
  820. data-layout="{PhotosetLayout}"
  821. data-id="photoset{PostID}">
  822. {block:Photos}
  823. {LinkOpenTag}<img src="{PhotoURL-HighRes}"{LinkCloseTag}{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}{block:Caption}alt="{Caption}"{/block:caption} >
  824. {/block:Photos}
  825. </div>
  826. {/block:Photoset}
  827.  
  828. {block:Video}
  829. <div class="video-wrapper">
  830. {VideoEmbed-700}
  831. </div>
  832. {/block:Video}
  833.  
  834. {block:Audio}
  835. <div class="player p_big">{AudioEmbed-640}</div>
  836. <div class="player p_med">{AudioEmbed-500}</div>
  837. <div class="player p_small">{AudioEmbed-400}</div>
  838. <div class="player p_tiny">{AudioEmbed-250}</div>
  839. {/block:Audio}
  840.  
  841. <!-- Disqus comment count -->
  842. <script type="text/javascript">
  843. var disqus_shortname = '{text:Disqus Shortname}';
  844.  
  845. (function () {
  846. var s = document.createElement('script'); s.async = true;
  847. s.type = 'text/javascript';
  848. s.src = '//' + disqus_shortname + '.disqus.com/count.js';
  849. (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
  850. }());
  851. </script>
  852.  
  853.  
  854. <!-- 3. POSTS DETAILS ( top )
  855. ------------------------------------------------------------>
  856.  
  857. <!-- Hide from ask, submit and 404 pages -->
  858. {block:PermalinkPagination}
  859. <section class="info_up">
  860. {block:ifShowDate}
  861. <div class="date">
  862. <a href="{Permalink}">{Month} {DayOfMonth}, {Year}</a>
  863. </div>
  864. {/block:ifShowDate}
  865.  
  866. {block:ifShowNotes}
  867. <div class="note_count">
  868. <a href="{Permalink}#postnotes">{NoteCountWithLabel}</a>
  869. </div>
  870. {/block:ifShowNotes}
  871.  
  872. {block:ifShowCommentCounter}
  873. <div class="comments">
  874. <a class="dsq-comment-count" href="{Permalink}#disqus_thread">comments</a>
  875. </div>
  876. {/block:ifShowCommentCounter}
  877.  
  878. {block:Answer}
  879. <div class="asker_name">
  880. Question from {Asker}
  881. </div>
  882. {/block:Answer}
  883. </section>
  884. {/block:PermalinkPagination}
  885.  
  886. <!-- Show on homepage -->
  887. {block:Indexpage}
  888. <section class="info_up">
  889. {block:ifShowDate}
  890. <div class="date">
  891. <a href="{Permalink}">{Month} {DayOfMonth}, {Year}</a>
  892. </div>
  893. {/block:ifShowDate}
  894.  
  895. {block:ifShowNotes}
  896. <div class="note_count">
  897. <a href="{Permalink}#postnotes">{NoteCountWithLabel}</a>
  898. </div>
  899. {/block:ifShowNotes}
  900.  
  901. {block:ifShowCommentCounter}
  902. <div class="comments">
  903. <a class="dsq-comment-count" href="{Permalink}#disqus_thread">comments</a>
  904. </div>
  905. {/block:ifShowCommentCounter}
  906.  
  907. {block:Answer}
  908. <div class="asker_name">
  909. Question from {Asker}
  910. </div>
  911. {/block:Answer}
  912.  
  913. {block:ifReblogFromHomepage}
  914. <div class="reblog_btn">
  915. {ReblogButton}
  916. </div>
  917. {/block:ifReblogFromHomepage}
  918.  
  919. {block:ifLikeFromHomepage}
  920. <div class="like_btn">
  921. {LikeButton}
  922. </div>
  923. {/block:ifLikeFromHomepage}
  924. </section>
  925. {/block:Indexpage}
  926.  
  927. {block:Caption}
  928. <div class="caption">
  929. {Caption}
  930. </div>
  931. {/block:Caption}
  932.  
  933. {block:Answer}
  934. <article class="article">
  935. <h2>{Question}</h2>
  936. <p>{Answer}</p>
  937. </article>
  938. {/block:Answer}
  939.  
  940. {block:Text}
  941. <article class="article">
  942. {block:Title}
  943. <h2>{Title}</h2>
  944. {/block:Title}
  945. <p>{Body}</p>
  946. </article>
  947. {/block:Text}
  948.  
  949. {block:Quote}
  950. <article class="article quote">
  951. <h2>{Quote}</h2>
  952.  
  953. {block:Source}
  954. <p>{Source}</p>
  955. {/block:Source}
  956. </article>
  957. {/block:Quote}
  958.  
  959. {block:Link}
  960. <article class="article">
  961. <h2><a target="{Target}" href="{URL}"><i class="fa fa-link"></i> {Name}</a></h2>
  962.  
  963. {block:Description}
  964. <p>{Description}</p>
  965. {/block:Description}
  966. </article>
  967. {/block:Link}
  968.  
  969. {block:Chat}
  970. <article class="article">
  971. {block:Title}
  972. <h2>{Title}</h2>
  973. {/block:Title}
  974.  
  975. {block:Lines}
  976. <ol class="chat_lines">
  977. <li>
  978. {block:Label}
  979. <span class="chat_label">
  980. {Label}
  981. </span>
  982. {/block:Label}
  983.  
  984. <span class="chat_line">
  985. {Line}
  986. </span>
  987. </li>
  988. </ol>
  989. {/block:Lines}
  990. </article>
  991. {/block:Chat}
  992.  
  993.  
  994. <!-- 4. POSTS DETAILS ( bottom )
  995. ------------------------------------------------------------>
  996.  
  997. <!-- Hide from ask, submit and 404 pages -->
  998. {block:PermalinkPagination}
  999. <section class="info_down">
  1000. {block:HasTags}
  1001. <div class="tags">
  1002. <h5>{lang:Tags}:</h5>
  1003. {block:Tags}
  1004. <a href="{TagURL}">#{Tag}</a>
  1005. {/block:Tags}
  1006. </div>
  1007. {/block:HasTags}
  1008. </section>
  1009. {/block:PermalinkPagination}
  1010.  
  1011. <!-- Show on homepage -->
  1012. {block:Indexpage}
  1013. <section class="info_down">
  1014. {block:ifShowTags}
  1015. {block:HasTags}
  1016. <div class="tags">
  1017. <h5>{lang:Tags}:</h5>
  1018. {block:Tags}
  1019. <a href="{TagURL}">#{Tag}</a>
  1020. {/block:Tags}
  1021. </div>
  1022. {/block:HasTags}
  1023. {/block:ifShowTags}
  1024. </section>
  1025. {/block:Indexpage}
  1026. </article>
  1027. {/block:Posts}
  1028. </section>
  1029.  
  1030.  
  1031. <!-- 5. PERMALINK
  1032. ------------------------------------------------------------>
  1033.  
  1034. {block:PermalinkPage}
  1035. {block:PermalinkPagination}
  1036. <div class="permalink-page">
  1037. {block:IfDisqusShortname}
  1038. <div id="disqus">
  1039. <div id="disqus_thread"></div>
  1040. <script type="text/javascript">
  1041.  
  1042. var disqus_shortname = '{text:Disqus shortname}';
  1043. (function() {
  1044. var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  1045. dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  1046. (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  1047. })();
  1048. </script>
  1049. <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  1050. <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  1051. </div>
  1052. {/block:IfDisqusShortname}
  1053.  
  1054. {block:PostNotes}
  1055. <div id="postnotes">{PostNotes}</div>
  1056. {/block:PostNotes}
  1057. </div>
  1058. {/block:PermalinkPagination}
  1059. {/block:PermalinkPage}
  1060.  
  1061.  
  1062. <!-- 6. PAGINATION
  1063. ------------------------------------------------------------>
  1064.  
  1065. {block:PermalinkPagination}
  1066. <div class="pagination-container">
  1067. <div class="pagination">
  1068. <div class="previouspage">
  1069. {block:PreviousPost}
  1070. <a class="previous-page" href="{PreviousPost}"><i class="fa fa-chevron-left"></i>&nbsp; {lang:Previous post}</a>
  1071. {/block:PreviousPost}
  1072. </div>
  1073.  
  1074. <div class="nextpage">
  1075. {block:NextPost}
  1076. <a class="next-page" href="{NextPost}">{lang:Next post} &nbsp;<i class="fa fa-chevron-right"></i></a>
  1077. {/block:NextPost}
  1078. </div>
  1079. </div>
  1080. </div>
  1081. {/block:PermalinkPagination}
  1082.  
  1083. {block:ifNotLoadMorePagination}
  1084. {block:Pagination}
  1085. <div class="pagination-container">
  1086. <div class="pagination">
  1087. <div class="page_info">
  1088. <h5>{CurrentPage} <span>of</span> {TotalPages}</h5>
  1089. </div>
  1090.  
  1091. <div class="previouspage">
  1092. {block:PreviousPage}
  1093. <a class="previous-page" href="{PreviousPage}"><i class="fa fa-chevron-left"></i>&nbsp; {lang:Newer}</a>
  1094. {/block:PreviousPage}
  1095. </div>
  1096.  
  1097. <div class="nextpage">
  1098. {block:NextPage}
  1099. <a class="next-page" href="{NextPage}">{lang:Older} &nbsp;<i class="fa fa-chevron-right"></i></a>
  1100. {/block:NextPage}
  1101. </div>
  1102. </div>
  1103. </div>
  1104. {/block:Pagination}
  1105. {/block:ifNotLoadMorePagination}
  1106.  
  1107. {block:ifLoadMorePagination}
  1108. {block:NextPage}
  1109. <div class="infinite_scroll-container">
  1110. <div class="infinite_scroll">
  1111. <div class="pagination-more">
  1112. <div class="loadNext pagination-more">
  1113. <a href="{NextPage}">{lang:Load More Posts}</a>
  1114. </div>
  1115. </div>
  1116. </div>
  1117. </div>
  1118. {/block:NextPage}
  1119. {/block:ifLoadMorePagination}
  1120.  
  1121.  
  1122. <!-- 7. FOOTER
  1123. ------------------------------------------------------------>
  1124.  
  1125. <footer>
  1126. <section class="social">
  1127. {block:ifDribbbleURL}
  1128. <a href="{text:Dribbble URL}">
  1129. <i class="fa fa-dribbble"></i>
  1130.  
  1131. </a>
  1132. {/block:ifDribbbleURL}
  1133.  
  1134. {block:ifFacebookURL}
  1135. <a href="{text:Facebook URL}">
  1136. <i class="fa fa-facebook"></i>
  1137. </a>
  1138. {/block:ifFacebookURL}
  1139.  
  1140. {block:ifFlickrURL}
  1141. <a href="{text:Flickr URL}">
  1142. <i class="fa fa-flickr"></i>
  1143. </a>
  1144. {/block:ifFlickrURL}
  1145.  
  1146. {block:ifGithubURL}
  1147. <a href="{text:Github URL}">
  1148. <i class="fa fa-github"></i>
  1149. </a>
  1150. {/block:ifGithubURL}
  1151.  
  1152. {block:ifInstagramURL}
  1153. <a href="{text:Instagram URL}">
  1154. <i class="fa fa-instagram"></i>
  1155. </a>
  1156. {/block:ifInstagramURL}
  1157.  
  1158. {block:ifLinkedinURL}
  1159. <a href="{text:Linkedin URL}">
  1160. <i class="fa fa-linkedin"></i>
  1161. </a>
  1162. {/block:ifLinkedinURL}
  1163.  
  1164. {block:ifPinterestURL}
  1165. <a href="{text:Pinterest URL}">
  1166. <i class="fa fa-pinterest"></i>
  1167. </a>
  1168. {/block:ifPinterestURL}
  1169.  
  1170. {block:ifTwitterURL}
  1171. <a href="{text:Twitter URL}">
  1172. <i class="fa fa-twitter"></i>
  1173. </a>
  1174. {/block:ifTwitterURL}
  1175.  
  1176. {block:ifVimeoURL}
  1177. <a href="{text:Vimeo URL}">
  1178. <i class="fa fa-vimeo-square"></i>
  1179. </a>
  1180. {/block:ifVimeoURL}
  1181.  
  1182. {block:ifYoutubeURL}
  1183. <a href="{text:Youtube URL}">
  1184. <i class="fa fa-youtube"></i>
  1185. </a>
  1186. {/block:ifYoutubeURL}
  1187. </section>
  1188.  
  1189. <section class="copyright">
  1190. {text:Copyright}
  1191. </section>
  1192.  
  1193. <section class="credit">
  1194. Atmosphere theme - Designed by <a href="http://paulborsan.com">PaulBorsan</a>
  1195. </section>
  1196.  
  1197. {block:ShowAvatar}
  1198. <div class="avatar-style-{AvatarShape}">
  1199. <img class="user-avatar" src="{PortraitURL-48}">
  1200. </div>
  1201. {/block:ShowAvatar}
  1202. </footer>
  1203.  
  1204. <script type="text/javascript">
  1205. $(document).ready(function(){
  1206. // Get the variables
  1207. var btn = $('.description_btn');
  1208. var close = $('.close_btn');
  1209. var desc = $('.description');
  1210. var title = $('.title');
  1211. var descH = $('.description').outerHeight();
  1212. var titleH = $('.title').outerHeight();
  1213. var titleW = $('.title').outerWidth();
  1214.  
  1215. // Center the title and description (both horizontally and vertically)
  1216. title.css('margin-top', -titleH/2);
  1217. desc.css('margin-top', -descH/2);
  1218.  
  1219. // When the menu button is clicked...
  1220. btn.click(function() {
  1221. btn.css("display", "none");
  1222. close.css("display", "block");
  1223. desc.css("opacity", 1).css("z-index", 1);
  1224. title.css("opacity", 0).css("z-index", -1);
  1225. });
  1226.  
  1227. // When the close button is clicked...
  1228. close.click(function() {
  1229. btn.css("display", "block");
  1230. close.css("display", "none");
  1231. desc.css("opacity", 0).css("z-index", -1);
  1232. title.css("opacity", 1).css("z-index", 1);
  1233. });
  1234. });
  1235. </script>
  1236.  
  1237. <script type="text/javascript">
  1238. {block:IfGoogleAnalyticsID}
  1239. var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
  1240. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  1241. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
  1242. {/block:IfGoogleAnalyticsID}
  1243. </script>
  1244.  
  1245. <script>
  1246. // Make the videos responsive ( thanks fitVids.js )
  1247. $(document).ready(function(){
  1248. $(".video-wrapper").fitVids();
  1249. });
  1250. </script>
  1251.  
  1252. <script type="text/javascript">
  1253. // Photoset grid
  1254. $('.photoset-grid').photosetGrid({
  1255. highresLinks: true,
  1256. rel: $('.photoset-grid').attr('data-id'),
  1257. gutter: '5px',
  1258. onComplete: function(){}
  1259. });
  1260.  
  1261. $('.photoset-grid').each(function() {
  1262. $(this).magnificPopup({
  1263. delegate: 'a',
  1264. type: 'image',
  1265. gallery:{enabled:true},
  1266. removalDelay: 300,
  1267. mainClass: 'mfp-fade'
  1268. });});
  1269. </script>
  1270.  
  1271. <script type="text/javascript">
  1272. // Masonry + Infinite Scroll( load more ) set up
  1273. $(function() {
  1274. var $container = $('#content')
  1275. $container.infinitescroll({
  1276. navSelector: '.infinite_scroll',
  1277. nextSelector: '.infinite_scroll a',
  1278. itemSelector: '.post, #permalink, .pagination-container',
  1279. behavior: 'twitter',
  1280. loading: {
  1281. msgText: "",
  1282. finishedMsg : '',
  1283. img : 'http://static.tumblr.com/t8k4hxe/jaZmtwbql/ajax-loader.gif'
  1284. },
  1285. }, function( newElements ) {
  1286. var $elems = $(newElements);
  1287. $(".video-wrapper").fitVids();
  1288.  
  1289. $('.photoset-grid').photosetGrid({
  1290. highresLinks: true,
  1291. rel: $('.photoset-grid').attr('data-id'),
  1292. gutter: '5px',
  1293.  
  1294. onComplete: function(){}
  1295. });
  1296.  
  1297. $('.photoset-grid').each(function() {
  1298. $(this).magnificPopup({
  1299. delegate: 'a',
  1300. type: 'image',
  1301. gallery:{enabled:true},
  1302. removalDelay: 300,
  1303.  
  1304. mainClass: 'mfp-fade'
  1305. });
  1306. });
  1307.  
  1308. $elems.imagesLoaded( function(){
  1309. $('#content').masonry({ appendedContent: $elems })
  1310. })
  1311. }
  1312. );
  1313. });
  1314.  
  1315.  
  1316. </script>
  1317. </body>
  1318. </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!