API tools faq
paste
Advertisement
ochizukes

Ebb and Flow 2.0

ochizukes
May 3rd, 2015
2,512
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 33.65 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Ebb and Flow 2.0
  4. Support: http://maomuthemes.tumblr.com/ask
  5.  
  6. This theme is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.
  7.  
  8. http://creativecommons.org/licenses/by-nc-nd/4.0/
  9.  
  10. -->
  11.  
  12. <!DOCTYPE html><html>
  13. <head>
  14.  
  15. <!-- META -->
  16.  
  17. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  18. <title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
  19. {block:Description}
  20. <meta name="description" content="{MetaDescription}" />
  21. {/block:Description}
  22. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23. <!--[if lt IE 9]>
  24. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  25. <![endif]-->
  26.  
  27. <!-- LINK REL -->
  28.  
  29. <link rel="shortcut icon" href="{image:Favicon}"/>
  30. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  32. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet' type='text/css'>
  33. <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic,500italic' rel='stylesheet' type='text/css'>
  34.  
  35. <!-- IMAGES -->
  36.  
  37. <meta name="image:Favicon" content=""/>
  38. <meta name="image:Portrait" content=""/>
  39.  
  40. <!-- COLORS -->
  41.  
  42. <meta name="color:Accent Text" content="#ffffff"/>
  43. <meta name="color:Blockquote" content="#ffffff"/>
  44. <meta name="color:Gradient Top" content="#efebf7"/>
  45. <meta name="color:Gradient Bottom" content="#dcecf5"/>
  46. <meta name="color:Hamburger Lines" content="#ededed"/>
  47. <meta name="color:Link" content="#e1f0f8"/>
  48. <meta name="color:Link Hover" content="#ffffff"/>
  49. <meta name="color:Navicons" content="#ffffff"/>
  50. <meta name="color:Post Border" content="#ffffff"/>
  51. <meta name="color:Pagination" content="#cdbdd1"/>
  52. <meta name="color:Perma BG" content="#ffffff"/>
  53. <meta name="color:Perma Border" content="#dcdcdc"/>
  54. <meta name="color:Perma Text" content="#c6c6c6"/>
  55. <meta name="color:Text" content="#ffffff"/>
  56. <meta name="color:Title" content="#ffffff"/>
  57.  
  58. <!-- ON/OFF -->
  59.  
  60. <meta name="if:200px" content="1"/>
  61. <meta name="if:250px" content="0"/>
  62. <meta name="if:300px" content="0"/>
  63. <meta name="if:Audio Player White" content="1"/>
  64. <meta name="if:Borders" content="0"/>
  65. <meta name="if:Caption" content="1"/>
  66. <meta name="if:Faded Tumblr Controls" content="1"/>
  67. <meta name="if:Infinite Scroll" content="1"/>
  68. <meta name="if:Rounded Corners" content="1"/>
  69. <meta name="if:Tumblr Controls on Hover" content="0"/>
  70.  
  71. <!-- TEXT -->
  72.  
  73. <meta name="text:Link1" content="link 1"/>
  74. <meta name="text:Link1 URL" content="/"/>
  75. <meta name="text:Link2" content="link 2"/>
  76. <meta name="text:Link2 URL" content="/"/>
  77. <meta name="text:Link3" content="link 3"/>
  78. <meta name="text:Link3 URL" content="/"/>
  79. <meta name="text:Link4" content="link 4"/>
  80. <meta name="text:Link4 URL" content="/"/>
  81.  
  82. <meta name="text:Blogger" content="/"/>
  83. <meta name="text:Facebook" content=""/>
  84. <meta name="text:Pinterest" content="/"/>
  85. <meta name="text:Twitter" content="/"/>
  86. <meta name="text:YouTube" content="/"/>
  87.  
  88. <!-- SELECT -->
  89.  
  90. <meta name="select:Accent Color" content="255,255,255" title="Light"/>
  91. <meta name="select:Accent Color" content="0,0,0" title="Dark"/>
  92.  
  93. <meta name="select:Accent Transparency" content="1" title="Opaque"/>
  94. <meta name="select:Accent Transparency" content=".9" title="90%"/>
  95. <meta name="select:Accent Transparency" content=".8" title="80%"/>
  96. <meta name="select:Accent Transparency" content=".7" title="70%"/>
  97. <meta name="select:Accent Transparency" content=".6" title="60%"/>
  98. <meta name="select:Accent Transparency" content=".5" title="50%"/>
  99. <meta name="select:Accent Transparency" content=".4" title="40%"/>
  100. <meta name="select:Accent Transparency" content=".3" title="30%"/>
  101. <meta name="select:Accent Transparency" content=".2" title="20%"/>
  102. <meta name="select:Accent Transparency" content=".1" title="10%"/>
  103. <meta name="select:Accent Transparency" content=".0" title="Transparent"/>
  104.  
  105. <meta name="select:Navicon Transparency" content="1" title="Opaque"/>
  106. <meta name="select:Navicon Transparency" content=".9" title="90%"/>
  107. <meta name="select:Navicon Transparency" content=".8" title="80%"/>
  108. <meta name="select:Navicon Transparency" content=".7" title="70%"/>
  109. <meta name="select:Navicon Transparency" content=".6" title="60%"/>
  110. <meta name="select:Navicon Transparency" content=".5" title="50%"/>
  111. <meta name="select:Navicon Transparency" content=".4" title="40%"/>
  112. <meta name="select:Navicon Transparency" content=".3" title="30%"/>
  113. <meta name="select:Navicon Transparency" content=".2" title="20%"/>
  114. <meta name="select:Navicon Transparency" content=".1" title="10%"/>
  115. <meta name="select:Navicon Transparency" content=".0" title="Transparent"/>
  116.  
  117. <meta name="select:Post Color" content="255,255,255" title="Light"/>
  118. <meta name="select:Post Color" content="0,0,0" title="Dark"/>
  119.  
  120. <meta name="select:Post Transparency" content="1" title="Opaque"/>
  121. <meta name="select:Post Transparency" content=".9" title="90%"/>
  122. <meta name="select:Post Transparency" content=".8" title="80%"/>
  123. <meta name="select:Post Transparency" content=".7" title="70%"/>
  124. <meta name="select:Post Transparency" content=".6" title="60%"/>
  125. <meta name="select:Post Transparency" content=".5" title="50%"/>
  126. <meta name="select:Post Transparency" content=".4" title="40%"/>
  127. <meta name="select:Post Transparency" content=".3" title="30%"/>
  128. <meta name="select:Post Transparency" content=".2" title="20%"/>
  129. <meta name="select:Post Transparency" content=".1" title="10%"/>
  130. <meta name="select:Post Transparency" content=".0" title="Transparent"/>
  131.  
  132. <style type="text/css">
  133.  
  134. /* Tumblr controls */
  135.  
  136. {block:IfFadedTumblrControls}
  137.  
  138. iframe#tumblr_controls { {block:IfTumblrControlsOnHover}opacity:0;{/block:IfTumblrControlsOnHover} {block:IfNotTumblrControlsOnHover}opacity:0.35;{/block:IfNotTumblrControlsOnHover} position:fixed !important; -webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; z-index:9999; }
  139.  
  140. iframe#tumblr_controls:hover { opacity:0.8;  -webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; transition:all 0.4s ease-out ;z-index:9999; }
  141.  
  142. {/block:IfFadedTumblrControls}
  143.  
  144. /* Viewport + body properties */
  145.  
  146. html { background: -webkit-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); background: -o-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); background: -moz-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); background: linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); min-height:100%; }
  147.  
  148. body { color:{color:Text}; font:11px ubuntu; letter-spacing:1px; line-height:17px; margin:0; overflow-x:hidden; padding:0; }
  149.  
  150. /* Links + links on mouseover */
  151.  
  152. a { color:{color:Link}; text-decoration:none; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  153.  
  154. a:hover { color:{color:Link Hover}; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  155.  
  156. /* Preformatted + small text */
  157.  
  158. pre { display:block; font:10px open sans; letter-spacing:0.091em; padding-left:0.182px; width:100%; word-wrap:break-word; }
  159.  
  160. small { font:10px open sans; letter-spacing:0.091em; }
  161.  
  162. /* Blockquotes */
  163.  
  164. blockquote { border-left:1px solid {color:Blockquote}; margin-left:12px; padding-top:1px; padding-left:12px; padding-bottom:1px; padding-right:0; width:90%; word-wrap:break-word; }
  165.  
  166. /* Removes viewport padding */
  167.  
  168. figure { margin:0; }
  169.  
  170. /* Restricts photos to post margins */
  171.  
  172. img { max-width:100%; border:0; }
  173.  
  174. /* Navicons */
  175.  
  176. #icons { margin:0 auto; opacity:{select:Navicon Transparency}; padding-left:30px; padding-top:10px; width:350px; }
  177.  
  178. .icon { float:left; width:70px; }
  179.  
  180. /* Menu icon */
  181.  
  182. .hamburger {  background:{color:Navicons}; {block:IfRoundedCorners} border-radius:0.3em; {/block:IfRoundedCorners} font-size:.65em; height:3.3em; position:relative; width:3.3em; }
  183.  
  184. .hamburger:before { border-top:0.3em solid {color:Hamburger Lines}; border-bottom:0.3em solid {color:Hamburger Lines}; {block:IfRoundedCorners} border-radius:0.1em; {/block:IfRoundedCorners} content:""; height: 1em; margin:auto; left:0.7em; position:absolute; top:1em; width:1.9em; }
  185.  
  186. .hamburger:after { background:{color:Hamburger Lines}; {block:IfRoundedCorners }border-radius:0.1em; {/block:IfRoundedCorners} content:""; display:block; height:0.3em; left:0.7em; position:absolute; top:1.6em; width:1.9em; }
  187.  
  188. /* Home icon */
  189.  
  190. .home { border-bottom:none; border-right:1.5em solid {color:Navicons}; border-left:1.5em solid {color:Navicons}; border-top:1.4em solid {color:Navicons}; font-size:.59em; height:1em; margin-top:1.2em; margin-left:-.1em; position:relative; width:0.5em; }
  191.  
  192. .home::before { border-left:2.4em solid transparent; border-right:2.4em solid transparent; border-bottom:1.5em solid {color:Navicons}; content:""; height:0em; position:absolute; right:-2.1em; top:-2.8em; width:0em; }
  193.  
  194. /* Message icon */
  195.  
  196. .comment { background:{color:Navicons}; {block:IfRoundedCorners} border-radius:0.2em; {/block:IfRoundedCorners} font-size:14px; height:1.5em; margin-left:-3px; margin-top:1px; position:relative; width:2em; }
  197.  
  198. .comment::before { border-bottom:0.4em solid transparent; border-left:0.4em solid {color:Navicons}; content:""; bottom:-0.3em; height:0em; position:absolute; right:0.4em; width:0em; }
  199.  
  200. /* Archive icon */
  201.  
  202. .pencil { background:{color:Navicons}; font-size:1.7em; height:0.8em; margin-top:6px; margin-left:13px; position:relative; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); width:0.35em; }
  203.  
  204. .pencil:before{ background:{color:Navicons}; {block:IfRoundedCorners} border-radius:0.1em; {/block:IfRoundedCorners} content:""; height:0.3em; left:0; position:absolute; top:-0.35em; width:0.35em; }
  205.  
  206. .pencil:after { border:solid 0.2em {color:Navicons}; border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent; border-top:solid 0.45em {color:Navicons}; content:""; height:0; position:absolute; top:0.85em; left:0; width:0; }
  207.  
  208. /* Heart icon */
  209.  
  210. .heart { font-size:14px; height:0; margin-top:.1em; margin-left:.8em; position:relative; width:0; }
  211.  
  212. .heart::before, .heart::after { background:{color:Navicons}; border-radius:1em 1em 0 0; -moz-border-radius:1em 1em 0 0; content:""; height:1.6em; position:absolute; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; width: 1em; }
  213.  
  214. .heart::after { left:-0.96em; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; }
  215.  
  216. /* Top bar */
  217.  
  218. #menu { background:transparent; height:50px; left:0; padding-top:15px; transition-duration:0.5s; -webkit-transition-duration:0.5s; top:0; width:100%; z-index:1; }
  219.  
  220. /* Top bar onclick element */
  221.  
  222. #menu.open{ height:323px; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  223.  
  224. /* Description, portrait, links, and social media wrap */
  225.  
  226. #dropbar { margin-left:10px; opacity:0; transition:opacity 0.5s ease, visibility 1s ease; width:424px; visibility:hidden; }
  227.  
  228. #menu.open #dropbar { opacity:1; transition:opacity 1.5s ease, visibility 1s ease; visibility:visible; }
  229.  
  230. /* Title */
  231.  
  232. .title { color:{color:Title}; font:14px ubuntu; font-weight:100; letter-spacing:2px; margin-bottom:13px; padding:5px; text-align:center; text-transform:uppercase; width:272px;}
  233.  
  234. /* Portrait */
  235.  
  236. .drop-img { background:rgba({select:Post Color},{select:Post Transparency}); {block:IfBorders} border:1px solid {color:Post Border}; {/block:IfBorders} {block:IfRoundedCorners} border-radius:5px; {/block:IfRoundedCorners} float:left; height:100px; padding:20px; width:100px; }
  237.  
  238. .image-wrap { height:100px; position:relative; width:90px; }
  239.  
  240. .image { background:rgba({select:Post Color},{select:Post Transparency}); {block:IfBorders} border:1px solid {color:Post Border}; {/block:IfBorders} {block:IfRoundedCorners} border-radius:5px; {/block:IfRoundedCorners} float:left; height:100px; overflow:hidden; padding:20px; position:relative; width:100px; z-index:2; }
  241.  
  242. /* Label wrap + label */
  243.  
  244. .label-wrap { left:18px; opacity:1; position:absolute; top:10px; z-index:100; }
  245.  
  246. .label { display:none; }
  247.  
  248. .image-wrap:hover .label { display:block; background:rgba(0,0,0,0.7); font:10px; letter-spacing:1px; height:80px; margin:10px 0 0 2px; overflow:hidden; padding:10px; padding-bottom:20px; padding-top:0px; text-align:center; width:80px; line-height:14px; }
  249.  
  250. .label a { color:#fff; font-weight:100; }
  251.  
  252. /* Extra links */
  253.  
  254. .linkies { {block:IfBorders} border:1px solid {color:Post Border}; {/block:IfBorders} {block:IfRoundedCorners} border-radius:5px; {/block:IfRoundedCorners} background:rgba({select:Post Color},{select:Post Transparency}); float:left; height:100px; margin:-100px 0px 0px 3px; padding:20px; width:100px; }
  255.  
  256. .linkies a { color:{color:Accent Text}; }
  257.  
  258. .link-wrap { margin-top:0px; }
  259.  
  260. .linkies li { background:rgba({select:Accent Color},{select:Accent Transparency}); border-bottom:1px solid {color:Accent Text}; font:11px ubuntu; list-style-type:none; margin-left:-40px; padding:10px; padding-top:6px; padding-bottom:6px; text-align:center; text-transform:uppercase; width:80px; }
  261.  
  262. /* Social media */
  263.  
  264. .social { background:rgba({select:Post Color},{select:Post Transparency}); {block:IfBorders} border:1px solid {color:Post Border}; {/block:IfBorders} {block:IfRoundedCorners} border-radius:5px; {/block:IfRoundedCorners} color:#fff; float:left; height:45px; margin-top:3px; overflow:hidden; padding:20px; width:243px; }
  265.  
  266. .social-icons { background:rgba({select:Accent Color},{select:Accent Transparency}); margin:0 auto; margin-left:1px; padding:7px; width:30px; }
  267.  
  268. /* Post wrap */
  269.  
  270. #main { margin:0 auto; padding:15px 0px 15px 15px; {block:PermalinkPage}width:460px;{/block:PermalinkPage}}
  271.    
  272. /* Posts */
  273.  
  274. .contain { background:rgba({select:Post Color},{select:Post Transparency}); {block:IfBorders} border:1px solid {color:Post Border}; {/block:IfBorders} {block:IfRoundedCorners} border-radius:5px; {/block:IfRoundedCorners} float:left; line-height:18px; margin:0 auto; margin-bottom:21px; padding:15px; -webkit-transition:left .4s linear; -moz-transition:left .4s linear; -o-transition:left .4s linear; transition:left .4s linear; {block:IndexPage}width:{block:If200px}200{/block:If200px}{block:If250px}250{/block:If250px}{block:If300px}300{/block:If300px}px;{/block:IndexPage}
  275.  
  276. {block:PermalinkPage}width:400px;{/block:PermalinkPage}}
  277.  
  278. /* Post titles - chat, text, link */
  279.  
  280. .chat-title, .text-title { background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-top-left-radius:5px; border-top-right-radius:5px; {/block:IfRoundedCorners} color:{color:Accent Text}; font:14px ubuntu; font-weight:100; letter-spacing:1px; line-height:17px; margin-top:-15px; margin-left:-15px; margin-bottom:5px; padding:10px; text-align:center; {block:IndexPage}width:{block:If200px}210{/block:If200px}{block:If250px}260{/block:If250px}{block:If300px}310{/block:If300px}px;{/block:IndexPage}
  281.  
  282. {block:PermalinkPage}width:410px;{/block:PermalinkPage}}
  283.  
  284. .link { background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-radius:3px; {/block:IfRoundedCorners} font-size:1.05em; letter-spacing:0.091em; margin-top:0px; padding:20px; text-align:center; text-transform:uppercase; {block:IndexPage}width:{block:If200px}161{/block:If200px}{block:If250px}211{/block:If250px}{block:If300px}261{/block:If300px}px;{/block:IndexPage} word-wrap:break-word;
  285.  
  286. {block:PermalinkPage}width:361px;{/block:PermalinkPage}}
  287.  
  288. .link a {  color:{color:Accent Text}; font-weight:normal; }
  289.  
  290. /* Chat lines */
  291.  
  292. .chat-line { background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-radius:2px; {/block:IfRoundedCorners} color:{color:Perma Link}; margin-bottom:3px; padding:8px; {block:IfIndexPage}width:{block:If200px}184{/block:If200px}{block:If250px}234{/block:If250px}{block:If300px}284{/block:If300px}px;{/block:IfIndexPage}
  293.  
  294. {block:PermalinkPage}width:384px;{/block:PermalinkPage}}
  295.  
  296. /* Quote properties */
  297.  
  298. .quote { font-size:13px; font-style:italic; line-height:20px; {block:IfIndexPage}width:{block:If200px}200{/block:If200px}{block:If250px}250{/block:If250px}{block:If300px}300{/block:If300px}px{;{/block:IfIndexPage}
  299.  
  300. {block:PermalinkPage}width:400px;{/block:PermalinkPage}}
  301.  
  302. /* Photoset properties */
  303.  
  304. iframe.photoset {
  305.     {block:IfIndexPage}width:{block:If200px}200{/block:If200px}{block:If250px}250{/block:If250px}{block:If300px}300{/block:If300px}px !important;{/block:IfIndexPage} {block:PermalinkPage}width:400px !important;{/block:PermalinkPage}}
  306.    
  307. /* Audio player */
  308.  
  309. #audio{ background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-radius:3px; {/block:IfRoundedCorners} height:100%; padding:4px; }
  310.  
  311. .tumblr_audio_player{ {block:IfRoundedCorners} border-radius:3px; {/block:IfRoundedCorners} height:50px; {block:IndexPage}width:{block:If200px}192{/block:If200px}{block:If250px}242{/block:If250px}{block:If300px}292{/block:If300px}px;{/block:IndexPage}
  312.  
  313. {block:PermalinkPage}width:392px;{/block:PermalinkPage}}
  314.  
  315. /* Video properties */
  316.  
  317. .videoWrapper { height:0; padding-bottom:56.25%; position:relative; }
  318.  
  319. .videoWrapper iframe { height:100%; left:0; position:absolute; top:0; width:100%; }
  320.  
  321. /* Questions */
  322.  
  323. .question { background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-radius:3px; {/block:IfRoundedCorners} color:{color:Accent Text}; line-height:17px; padding:10px; vertical-align:top; }
  324.  
  325. /* Permalink + reblog buttons */
  326.  
  327. .perma { {block:IndexPage}width:{block:If200px}220{/block:If200px}{block:If250px}270{/block:If250px}{block:If300px}320{/block:If300px}px;{/block:IndexPage} padding-top:9px;
  328.  
  329. {block:PermalinkPage}width:420px;{/block:PermalinkPage}}
  330.  
  331. .permalink-wrap { display:block; margin-left:-15px; margin-bottom:-15px; }
  332.  
  333. .permalinks { background:{color:Perma BG}; border-right:1px solid {color:Perma Border}; border-top:1px solid {color:Perma Border}; color:{color:Perma Text}; font:11px ubuntu; font-weight:normal; letter-spacing:0.098em; padding:10px; text-transform:uppercase; }
  334.    
  335. .permalinks a { color:{color:Perma Text}; }
  336.  
  337. /* Notes tab */
  338.  
  339. .notecount { background:{color:Perma BG}; border-top:1px solid {color:Perma Border}; {block:IfRoundedCorners} border-bottom-right-radius:5px; {/block:IfRoundedCorners} color:{color:Perma Text}; display:inline-block;  font:11px ubuntu; font-weight:100; letter-spacing:0.098em; padding:10px; text-transform:uppercase; {block:IndexPage}width:{block:If200px}147{/block:If200px}{block:If250px}197{/block:If250px}{block:If300px}247{/block:If300px}px;{/block:IndexPage}
  340.  
  341. {block:PermalinkPage}width:347px;{/block:PermalinkPage}}
  342.  
  343. /* Date, notes, via, and source */
  344.  
  345. .permainfo { text-transform:uppercase; font:11px ubuntu; font-weight:normal; letter-spacing:1px; line-height:22px; text-align:left; {block:IndexPage}width:{block:If200px}200{/block:If200px}{block:If250px}250{/block:If250px}{block:If300px}300{/block:If300px}px;{/block:IndexPage}
  346.  
  347. {block:PermalinkPage}width:400px;{/block:PermalinkPage}}
  348.  
  349. .permainfo a { font-weight:normal; }
  350.  
  351. /* Note container */
  352.  
  353. .notecontainer { float:left; margin-bottom:0px; max-height:300px; line-height:18px; overflow-x:hidden; overflow-y:scroll; padding-right:5px; {block:IndexPage}width:{block:If200px}195{/block:If200px}{block:If250px}245{/block:If250px}{block:If300px}295{/block:If300px};{/block:IndexPage}
  354.  
  355. {block:PermalinkPage}width:395px;{/block:PermalinkPage}}
  356.  
  357. .notecontainer a { font-weight:normal; }
  358.    
  359. /* Notes */
  360.  
  361. ol.notes { list-style-type:none; margin:0px 0px; padding:0px; }
  362.  
  363. ol.notes li.note { {block:IfRoundedCorners} border-radius:2px; {/block:IfRoundedCorners} background:rgba({select:Accent Color},{select:Accent Transparency}); margin-bottom:2px; padding:7px; }
  364.  
  365. ol.notes li.note img.avatar { background:rgba({select:Post Color},{select:Post Transparency}); {block:IfRoundedCorners} border-radius:4px; {/block:IfRoundedCorners} height:16px; margin-right:5px; padding:2px; vertical-align:-4px; width:16px; }
  366.  
  367. ol.notes li.note span.action, ol.notes li.note .answer_content, ol.notes li.note blockquote a { font-weight:normal; text-decoration:none; }
  368.  
  369. ol.notes li.note blockquote { border-color:{color:Blockquote}; margin:10px 0px 0px 25px; padding:4px 10px; }
  370.  
  371. /* Bottom bar */
  372.  
  373. #bottom { background:transparent; bottom:50%; height:50px; left:10px; position:fixed; width:100%; }
  374.  
  375. /* Pagination */
  376.  
  377. .pagination { background:transparent; color:{color:Pagination} text-align:right; text-decoration:none; width:15px; {block:IfInfiniteScroll}display:none;{/block:IfInfiniteScroll} }
  378.  
  379. .pagination a, .jump_page a, .c-page { color:{color:Pagination}; font:16px ubuntu; font-weight:bold;}
  380.  
  381. {CustomCSS}
  382. </style>
  383.  
  384. <!-- Jquery -->
  385.  
  386. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  387.  
  388. <!-- Isotope + Images Loaded + Infinite Scroll -->
  389.  
  390. <script type="text/javascript" src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
  391. <script type="text/javascript" src="http://static.tumblr.com/0xll37k/6QRn49wdh/infinitescroll.js"></script>
  392. <script type="text/javascript" src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
  393.  
  394. <script type="text/javascript">
  395.  
  396. $(window).load(function(){
  397.  
  398.   var $container = $('#main').isotope({
  399.     itemSelector : '.contain',
  400.     // options...
  401.     masonry: {
  402.       columnWidth: {block:If200px}232{/block:If200px}{block:If250px}282{/block:If250px}{block:If300px}332{/block:If300px} + 15,
  403.         isFitWidth: {block:IndexPage}true{/block:IndexPage}{block:PermalinkPage}false{/block:PermalinkPage},
  404.         isFitWidth: {block:IndexPage}true{/block:IndexPage}{block:PermalinkPage}false{/block:PermalinkPage},
  405.       isAnimated: false,
  406.       cornerStampSelector: '.corner-stamp',
  407.     } // no trailing comma
  408.   });
  409.  
  410.  
  411.   $container.imagesLoaded( function() {
  412.     $container.isotope('reLayout');
  413.   });
  414.  
  415. {block:IfInfiniteScroll}
  416.   $('#main').infinitescroll({
  417.     navSelector  : '.pagination',    // selector for the paged navigation
  418.     nextSelector : '.pagination a',  // selector for the NEXT link (to page 2)
  419.     itemSelector : '.contain',     // selector for all items you'll retrieve
  420.    loading: {
  421.        finishedMsg: 'No more items to load.',
  422.        img: 'http://static.tumblr.com/at44twr/kqInnreh3/preload_gif.gif'
  423.      }
  424.    },
  425.    // call Isotope as a callback
  426.    function( newElements ) {
  427.      var $newElems = $( newElements );
  428.      $newElems.imagesLoaded( function() {
  429.        $container.isotope( 'appended', $newElems );
  430.      });
  431.    }
  432.  );
  433. {/block:IfInfiniteScroll}
  434.  
  435. });
  436. </script>
  437.  
  438. <!-- Header menu -->
  439.  
  440. <script type="text/javascript">
  441. $(document).ready(function () {
  442.    $('.ham').click(function () {
  443.        $('#menu').toggleClass('open');
  444.    })
  445. });
  446. </script>
  447.  
  448. </head>
  449. <body>
  450.  
  451. <!-- Top bar -->
  452.  
  453. <div id="menu">
  454.  
  455. <div id="icons">
  456. <div class="icon">
  457.  
  458. <!-- Menu icon -->
  459.  
  460.    <a href="#" class="ham">
  461.        <div class="hamburger"></div>
  462.    </a>
  463.    
  464. <!-- End menu icon -->
  465.    
  466. <!-- Dropdown menu -->
  467.    
  468. <div id="dropbar"><br>
  469.  
  470. <div class="title">{Title}</div>
  471.  
  472. <!-- Portrait -->
  473.    
  474.    <div class="image-wrap">
  475.        
  476.        {block:Description}
  477.        <div class="label-wrap"><div class="label">
  478.    
  479.            <br> {Description}
  480.    
  481.        </div></div>
  482.        {/block:Description}
  483.    
  484.        <div class="image">
  485.        
  486.            <img alt="" src="{image:Portrait}"/>
  487.            
  488.        </div>
  489.    
  490.    </div>
  491.  
  492. <!-- End portrait -->
  493.  
  494. <!-- Extra links -->
  495.    
  496.    <div class="linkies">
  497.        <ul class="link-wrap">
  498.            {block:IfLink1}
  499.                <li><a href="{text:Link1 URL}">{text:Link1}</a></li>
  500.            {/block:IfLink1}
  501.            {block:IfLink2}
  502.                <li><a href="{text:Link2 URL}">{text:Link2}</a></li>
  503.            {/block:Link2}
  504.            {block:IfLink3}
  505.                <li><a href="{text:Link3 URL}">{text:Link3}</a></li>
  506.            {/block:IfLink3}
  507.            {block:IfLink4}
  508.                <li style="border-bottom:none"><a href="{text:Link4 URL}">{text:Link4}</a></li>
  509.            {/block:IfLink4}
  510.        </ul>
  511.    </div>
  512.  
  513. <!-- End extra links -->
  514.  
  515. <!-- Social media -->
  516.    
  517.    <div class="social">
  518.    
  519.        {block:IfBlogger}
  520.        <a href="{text:Blogger}"><img class="social-icons" src="http://static.tumblr.com/at44twr/u64n8x2tg/blogger.png"/></a>
  521.        {/block:IfBlogger}
  522.        
  523.        {block:IfFacebook}
  524.        <a href="{text:Facebook}"><img class="social-icons" src="http://static.tumblr.com/at44twr/51sn8x2ug/facebook.png"/></a>
  525.        {/block:IfFacebook}
  526.        
  527.        {block:IfPinterest}
  528.        <a href="{text:Pinterest}"><img class="social-icons" src="http://static.tumblr.com/at44twr/T0Cn8x2uv/pintrest.png"/></a>
  529.        {/block:IfPinterest}
  530.        
  531.        {block:IfTwitter}
  532.        <a href="{text:Twitter}"><img class="social-icons" src="http://static.tumblr.com/at44twr/6K1n8x2va/twitter.png"/></a>
  533.        {/block:IfTwitter}
  534.        
  535.        {block:IfYouTube}
  536.        <a href="{text:YouTube}"><img class="social-icons" src="http://static.tumblr.com/at44twr/zgun8x2vg/youtube.png"/></a>
  537.        {/block:IfYouTube}
  538.    </div>
  539.  
  540. <!-- End social media -->
  541.    
  542. </div></div>
  543.    
  544. <!-- End dropdown menu -->
  545.  
  546. <!-- Index, message, archive, and credit icons -->
  547.  
  548.    <div class="icon">
  549.        <a href="/">
  550.            <div class="home"></div>
  551.        </a>
  552.    </div>
  553.    
  554.    <div class="icon">
  555.        <a href="/ask">
  556.            <div class="comment"></div>
  557.        </a>
  558.    </div>
  559.    
  560.    <div class="icon">
  561.        <a href="/archive">
  562.            <div class="pencil"></div>
  563.        </a>
  564.    </div>
  565.    
  566.    <div class="icon">
  567.        <a href="http://maomuthemes.tumblr.com">
  568.            <div class="heart"></div>
  569.        </a>
  570.    </div>
  571.    
  572. <!-- End icons -->
  573.    
  574. </div></div>
  575.  
  576. <!-- End top bar -->
  577.  
  578. <div id="main" role="main">
  579.  
  580. <!-- Posts -->
  581.  
  582. {block:Posts}
  583.  
  584. <div class="contain">
  585.  
  586. <!-- Photos -->
  587.  
  588. {block:Photo}
  589.    <article>
  590.        <figure>
  591.        
  592.        {LinkOpenTag}
  593.            <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  594.        {LinkCloseTag}
  595.  
  596.        </figure>
  597.    </article>
  598. {/block:Photo}
  599.  
  600. <!-- End photos -->
  601.  
  602. <!-- Photosets -->
  603.  
  604. {block:Photoset}
  605.    <article>
  606.        <figure>
  607.  
  608.        <div class="photoset">{Photoset}</div>
  609.            {block:HighRes}
  610.                {PhotoURL-HighRes}
  611.            {/block:HighRes}
  612.  
  613.        </figure>
  614.    </article>
  615. {/block:Photoset}
  616.  
  617. <!-- End photosets -->
  618.  
  619. <!-- Text -->
  620.  
  621. {block:Text}
  622.    <article>
  623.        <figure>
  624.        
  625.        {block:Title}
  626.            <header>
  627.            <div class="text-title">{Title}</div>
  628.            </header>
  629.        {/block:Title}
  630.  
  631.        <div style="{block:IndexPage}max-width:{block:If200px}200{/block:If200px}{block:If250px}250{/block:If250px}{block:If300px}300{/block:If300px}px;{/block:IndexPage}
  632.  
  633. {block:PermalinkPage}max-width:400px;{/block:PermalinkPage}">{Body}</div>
  634.  
  635.        </figure>
  636.    </article>
  637. {/block:Text}
  638.  
  639. <!-- Text -->
  640.  
  641. <!-- Links -->
  642.  
  643. {block:Link}
  644.    <article>
  645.        <figure>
  646.  
  647.        <h2 class="link">
  648.            <a href="{URL}">{Name} ▶</a>
  649.        </h2>
  650.  
  651.        {block:Description}
  652.            {Description}
  653.        {/block:Description}
  654.  
  655.        </figure>
  656.    </article>
  657. {/block:Link}
  658.  
  659. <!-- End links -->
  660.  
  661. <!-- Chats -->
  662.  
  663. {block:Chat}
  664.    <article>
  665.        <figure>
  666.        
  667.        {block:Title}
  668.            <header>
  669.            <div class="chat-title" style="margin-bottom:13px;">{Title}</div>
  670.            </header>
  671.        {/block:Title}
  672.  
  673.                {block:Lines}
  674.                    <div class="chat-line">
  675.                    
  676.                        {block:Label}
  677.                            {Label}
  678.                        {/block:Label}
  679.                    
  680.                    {Line}
  681.                    </div>
  682.                {/block:Lines}
  683.            
  684.        </figure>
  685.    </article>
  686. {/block:Chat}
  687.  
  688. <!-- End chats -->
  689.  
  690. <!-- Quotes -->
  691.  
  692. {block:Quote}
  693.    <article>
  694.        <figure>
  695.  
  696.        <div class="quote">{Quote}<br>
  697.        {block:Source}
  698.             <div style="text-align:right;font-size:12px;">— {Source}</div>
  699.        {/block:Source}</div>
  700.  
  701.        </figure>
  702.    </article>
  703. {/block:Quote}
  704.  
  705. <!-- End quotes -->
  706.  
  707. <!-- Audio-->
  708.  
  709. {block:Audio}
  710.    <article>
  711.        <figure>
  712.        
  713.            {block:AlbumArt}
  714.            
  715.            <img src="{AlbumArtURL}" style="background:rgba({select:Accent Color},{select:Accent Transparency}); {block:IfRoundedCorners} border-radius:3px; {/block:IfRoundedCorners} padding:5px; {block:IndexPage}width:{block:If200px}190{/block:If200px}{block:If250px}240{/block:If250px}{block:If300px}290{/block:If300px}px;{/block:IndexPage}{block:PermalinkPage}width:390px;{/block:PermalinkPage}" alt=""/><br>
  716.                
  717.            {/block:AlbumArt}
  718.            
  719.            <div id="audio">
  720.                <a style="margin-top:20px;">
  721.                    <div class="tumblr_audio_player">
  722.                    
  723.            {block:AudioEmbed}
  724.                {AudioEmbed-250}
  725.            {/block:AudioEmbed}
  726.            
  727.            {block:AudioPlayer}
  728.            
  729.                {block:IfAudioPlayerWhite}
  730.                    {AudioPlayerWhite}
  731.                {/block:IfAudioPlayerWhite}
  732.                    
  733.                {block:IfNotAudioPlayerWhite}
  734.                    {AudioPlayerBlack}
  735.                {/block:IfNotAudioPlayerWhite}
  736.                    
  737.            {/block:AudioPlayer}
  738.                    </div>
  739.                </a>
  740.            </div>
  741.  
  742.        </figure>
  743.    </article>
  744. {/block:Audio}
  745.  
  746. <!-- End audio -->
  747.  
  748. <!-- Video -->
  749.  
  750. {block:Video}
  751.    <article>
  752.        <figure>
  753.        
  754.            <div class="videoWrapper">
  755.                {VideoEmbed-400}
  756.            </div>
  757.        
  758.        </figure>
  759.    </article>
  760. {/block:Video}
  761.  
  762. <!-- End video -->
  763.  
  764. <!-- Message -->
  765.  
  766. {block:Answer}
  767.    <article>
  768.        <figure>
  769.        
  770.            <div class="question">
  771.            
  772.                {lang:Asker asked}: {Question}
  773.            
  774.            </div>
  775.  
  776.        {Answer}
  777.  
  778.        </figure>
  779.    </article>
  780. {/block:Answer}
  781.  
  782. <!-- End message -->
  783.  
  784. <!-- Caption -->
  785.  
  786. {block:IfCaption}
  787.  
  788.    {block:Caption}
  789.        {Caption}
  790.    {/block:Caption}
  791.    
  792. {/block:IfCaption}
  793.  
  794. {block:IfNotCaption}
  795.    {block:PermalinkPage}
  796.    
  797.        {block:Caption}
  798.            {Caption}
  799.        {/block:Caption}
  800.        
  801.    {/block:PermalinkPage}
  802. {/block:IfNotCaption}
  803.  
  804. <!-- End caption -->
  805.  
  806. <!-- Permalink tab -->
  807.  
  808. {block:IndexPage}
  809.    {block:Date}
  810.        <div class="perma">
  811.        <div class="permalink-wrap">
  812.            <a class="permalinks" title="permalink" href="{Permalink}" style="{block:IfRoundedCorners}border-bottom-left-radius:5px;{/block:IfRoundedCorners}">♥</a><a class="permalinks" title="reblog" href="{ReblogURL}">↺</a><div class="notecount">{NoteCountWithLabel}</div>
  813.        </div>    
  814.        </div>
  815.    {/block:Date}
  816. {/block:IndexPage}
  817.    
  818. <!-- End permalink tab -->
  819.  
  820. <!-- Note container + tags -->
  821.  
  822. {block:PermalinkPage}
  823.    {block:Date}
  824.        <header>
  825.            <h2 class="permainfo">Posted {TimeAgo} on {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} with {NoteCountWithLabel}.</h2>
  826.        </header>
  827.            
  828.        {block:HasTags}
  829.    
  830.            {block:Tags}
  831.                <a href="{TagURL}"><span style="font-weight:normal;color:{color:Link};line-height:19px;">#{Tag}</span></a>
  832.            {/block:Tags}<br><br>
  833.        
  834.        {/block:HasTags}
  835.            
  836.        <div class="notecontainer">
  837.            {PostNotes}
  838.        </div>
  839.    
  840.    {/block:Date}
  841. {/block:PermalinkPage}
  842.  
  843. <!-- End note container + tags -->
  844.  
  845. <!-- Remove via and source -->
  846.  
  847. <div style="display:none;">
  848.  
  849.    {block:ContentSource}    
  850.        <a href="{SourceURL}" title="{lang:Originally from ReblogRootName}">Source</a>  
  851.    {/block:ContentSource}
  852.    
  853.    {block:RebloggedFrom}
  854.        <a title="Via" href="{ReblogParentURL}">Via</a>
  855.    {/block:RebloggedFrom}
  856.    
  857. </div>
  858.  
  859. <!-- End remove -->
  860.  
  861. </div><!-- Ends contain div -->
  862.  
  863. {/block:Posts}
  864.  
  865. <!-- End posts -->
  866.  
  867.    </div>
  868. </div>
  869.  
  870. <!-- Bottom bar + pagination -->
  871.  
  872. {block:IndexPage}
  873. <div id="bottom">
  874.  
  875. {block:Pagination}
  876.    <div class="pagination">
  877.    
  878.    {block:PreviousPage}
  879.        <a href="{PreviousPage}" class="jump_page">↑</a>
  880.    {/block:PreviousPage}
  881.  
  882.        {block:JumpPagination length="4"}
  883.      
  884.            {block:CurrentPage}
  885.                <span class="c-page"><font style="color:{color:Pagination};font-size:16px">{PageNumber}</font></span>
  886.            {/block:CurrentPage}
  887.      
  888.            {block:JumpPage}
  889.                <a class="jump_page" href="{URL}">{PageNumber}</a>
  890.            {/block:JumpPage}
  891.      
  892.        {/block:JumpPagination}
  893.        
  894.    {block:NextPage}
  895.        <a href="{NextPage}" class="jump_page">↓</a>
  896.    {/block:NextPage}    
  897.  
  898.    </div>
  899. {/block:Pagination}
  900.  
  901. </div>
  902. {/block:IndexPage}
  903.  
  904. <!-- End bottom bar + pagination -->
  905.  
  906. </body>
  907. </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!