API tools faq
paste
Advertisement
enchantique

05. MASK

enchantique
Aug 5th, 2012
8,718
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME: #05 - Mask
  3. by sakurane - (sakurane.tumblr.com)
  4. ----------------------------------------------------------------------
  5. TERMS OF USAGE
  6. 1. Do not remove the credit. (You may move it to a credits page.)
  7. 2. Do not use as a base code.
  8. 3. Do not take any part of the code.
  9. 4. Do not redistribute.
  10. 5. Do not claim as your own.
  11. 6. You may customize to your liking, but keep the credit intact.
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.  
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. <link rel="stylesheet" href="http://static.tumblr.com/kzorqqu/8EOmgtzik/normalize.css"/>
  23.  
  24. {block:Description}
  25. <meta name="description" content="{MetaDescription}" />
  26. {/block:Description}
  27.  
  28. <meta name="image:Sidebar" content=""/>
  29. <meta name="image:Background" content=""/>
  30. <meta name="image:Corner Background" content=""/>
  31.  
  32. <meta name="color:Background" content="#fff"/>
  33. <meta name="color:Post" content="#fff"/>
  34. <meta name="color:Text" content="#808080"/>
  35. <meta name="color:Bold" content="#424242"/>
  36. <meta name="color:Italic" content="#777"/>
  37. <meta name="color:Link" content="#808080"/>
  38. <meta name="color:Link Hover" content="#b8b8b8"/>
  39. <meta name="color:Sidebar Text" content="#666"/>
  40. <meta name="color:Navigation Background" content="#000"/>
  41. <meta name="color:Navigation Link" content="#808080"/>
  42. <meta name="color:Navigation Background Hover" content="#fff"/>
  43. <meta name="color:Navigation Link Hover" content="#808080"/>
  44. <meta name="color:Extra Link" content="#b8b8b8"/>
  45. <meta name="color:Title" content="#fff"/>
  46. <meta name="color:Title Background" content="#000"/>
  47. <meta name="color:Post Title" content="#424242"/>
  48. <meta name="color:Post Title Dash" content="#ccc"/>
  49. <meta name="color:Blockquote Background" content="#f4f4f4"/>
  50. <meta name="color:Info Link" content="#808080"/>
  51. <meta name="color:Info Border" content="#000"/>
  52. <meta name="color:Scrollbar Background" content="#fff"/>
  53. <meta name="color:Scrollbar Bar" content="#000"/>
  54.  
  55. <meta name="if:500px" content="0"/>
  56. <meta name="if:400px" content="1"/>
  57. <meta name="if:250px" content="0"/>
  58. <meta name="if:infinite scroll" content="0"/>
  59. <meta name="if:faded image" content="0"/>
  60. <meta name="if:grayscale" content="0"/>
  61. <meta name="if:grayscale with hover" content="0"/>
  62. <meta name="if:sidebar image" content="0"/>
  63. <meta name="if:show caption" content="0"/>
  64. <meta name="if:show tags" content="0"/>
  65.  
  66. <meta name="text:Blog Title" content=""/>
  67. <meta name="text:Link 1" content=""/>
  68. <meta name="text:Link Url 1" content=""/>
  69. <meta name="text:Link 2" content=""/>
  70. <meta name="text:Link Url 2" content=""/>
  71. <meta name="text:Link 3" content=""/>
  72. <meta name="text:Link Url 3" content=""/>
  73. <meta name="text:Link 4" content=""/>
  74. <meta name="text:Link Url 4" content=""/>
  75. <meta name="text:Link 5" content=""/>
  76. <meta name="text:Link Url 5" content=""/>
  77.  
  78. <style>
  79. @import url(http://static.tumblr.com/6hsqxdt/md2mgu4of/tinytots.css);
  80.  
  81. iframe#tumblr_controls {
  82. position: fixed!important;
  83. right: 3px!important;
  84. }
  85. ::-webkit-scrollbar-thumb:vertical {
  86. height: 100px;
  87. background: {color:Scrollbar Bar};
  88. }
  89. ::-webkit-scrollbar {
  90. height: 10px;
  91. width: 5px;
  92. background: {color:Scrollbar Background};
  93. }
  94. body {
  95. font: 10px arial;
  96. color: {color:Text};
  97. text-align: justify;
  98. word-wrap: break-word;
  99. background: {color:Background} url({image:Background}) repeat fixed;
  100. margin: 0;
  101. }
  102. #bg {
  103. position: fixed;
  104. bottom: 0px;
  105. right: 0px;
  106. z-index: -1;
  107. }
  108. a {
  109. color: {color:Link};
  110. text-decoration: none;
  111. }
  112. a:hover {
  113. color: {color:Link Hover};
  114. }
  115. b, strong {
  116. color: {color:Bold};
  117. }
  118. i, em {
  119. color: {color:Italic};
  120. }
  121. small {
  122. font-size: 10px;
  123. }
  124. pre {
  125. width: 100%;
  126. overflow: auto;
  127. }
  128. #entry img, iframe.photoset {
  129. border: 0;
  130. max-width: 100%;
  131. }
  132. .iframe.photoset {
  133. display: block;
  134. }
  135. #container {
  136. {block:If400px} width: 410px; {/block:If400px}
  137. {block:IfNot400px} width: 510px; {/block:IfNot400px}
  138. margin-left: 250px;
  139. padding-bottom: 10px;
  140. }
  141. #entry {
  142. {block:IndexPage}{block:If500px} width: 500px; {/block:If500px}
  143. {block:If250px} width: 250px; {/block:If250px}{/block:IndexPage}
  144. {block:If400px} width: 400px; {/block:If400px}
  145. {block:IfNot400px}{block:PermalinkPage} width: 500px; {/block:PermalinkPage}{/block:IfNot400px}
  146. background: {color:Post};
  147. padding: 10px;
  148. margin-top: 10px;
  149. overflow: hidden;
  150. }
  151. {block:IndexPage}#entry img, .photoset {
  152. {block:IfFadedImage} opacity: 0.8; {/block:IfFadedImage}
  153. {block:IfNotGrayscale}{block:IfGrayscaleWithHover} filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ *
  154. filter: gray; /* IE6-9 */
  155. -webkit-filter: grayscale(100%); /* Google Chrome */ {/block:IfGrayscaleWithHover}{/block:IfNotGrayscale}
  156. {block:IfFadedImage} opacity: 0.8; {/block:IfFadedImage}
  157. {block:IfNotGrayscaleWithHover}{block:IfGrayscale} filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ *
  158. filter: gray; /* IE6-9 */
  159. -webkit-filter: grayscale(100%); /* Google Chrome */ {/block:IfGrayscale}{/block:IfNotGrayscaleWithHover}
  160. -webkit-transition: all 0.9s ease-in-out;
  161. -moz-transition: all 0.9s ease-in-out;
  162. -o-transition: all 0.9s ease-in-out;
  163. }
  164. #entry img:hover, .photoset:hover {
  165. {block:IfFadedImage} opacity: 1; {/block:IfFadedImage}
  166. {block:IfNotGrayscale}{block:IfGrayscaleWithHover} filter: none;
  167. -webkit-filter: grayscale(0%); {/block:IfGrayscaleWithHover}{/block:IfNotGrayscale}
  168. }{/block:IndexPage}
  169. h1 {
  170. font: italic lighter 16px georgia;
  171. text-transform: lowercase;
  172. text-align: center;
  173. color: {color:Post Title};
  174. border-bottom: 1px dashed {color:Post Title Dash};
  175. }
  176. blockquote {
  177. margin: 8px;
  178. padding: 0 5px;
  179. background: {color:Blockquote Background};
  180. }
  181. #entry:hover #perma {
  182. {block:If500px} margin-left: 516px; {/block:If500px}
  183. {block:If400px} margin-left: 416px; {/block:If400px}
  184. {block:If250px} margin-left: 266px; {/block:If250px}
  185. opacity: 1;
  186. }
  187. #perma {
  188. {block:If500px} margin-left: 500px; {/block:If500px}
  189. {block:If400px} margin-left: 400px; {/block:If400px}
  190. {block:If250px} margin-left: 250px; {/block:If250px}
  191. position: absolute;
  192. opacity: 0;
  193. -webkit-transition: all 0.5s ease-in-out;
  194. -moz-transition: all 0.5s ease-in-out;
  195. -o-transition: all 0.5s ease-in-out;
  196. }
  197. .reblog {
  198. font: 8px tinytots;
  199. text-transform: uppercase;
  200. background: {color:Post};
  201. padding: 2px;
  202. }
  203. #info {
  204. text-align: center;
  205. border-top: 4px solid {color:Info Border};
  206. margin-left: 10px;
  207. padding: 10px 0;
  208. }
  209. #info a, #notes a {
  210. color: {color:Info Link};
  211. }
  212. #info a:hover, #notes a:hover {
  213. text-decoration: underline;
  214. }
  215. #tags {
  216. {block:If500px} width: 520px; {/block:If500px}
  217. {block:If400px} width: 420px; {/block:If400px}
  218. {block:If250px} width: 270px; {/block:If250px}
  219. font: 8px tinytots;
  220. text-transform: uppercase;
  221. letter-spacing: 1px;
  222. line-height: 10px;
  223. {block:IfNotShowTags} display: none; {/block:IfNotShowTags}
  224. }
  225. #notes {
  226. text-align: left;
  227. }
  228. li.note {
  229. list-style-type: none;
  230. }
  231. #sidebar {
  232. width: 200px;
  233. position: fixed;
  234. {block:IfSidebarImage} top: 120px; {/block:IfSidebarImage}
  235. {block:IfNotSidebarImage} top: 350px; {/block:IfNotSidebarImage}
  236. left: 20px;
  237. }
  238. #sidebar:hover #nav {
  239. line-height: 45px;
  240. opacity: 1;
  241. }
  242. #nav {
  243. width: 202px;
  244. line-height: 200px;
  245. opacity: 0;
  246. -webkit-transition: all 0.5s ease-in-out;
  247. -moz-transition: all 0.5s ease-in-out;
  248. -o-transition: all 0.5s ease-in-out;
  249. }
  250. #nav a {
  251. color: {color:Navigation Link};
  252. font: 8px tinytots;
  253. text-transform: uppercase;
  254. background: {color:Navigation Background};
  255. padding: 14px;
  256. -webkit-transition: all 0.8s ease-in-out;
  257. -moz-transition: all 0.8s ease-in-out;
  258. -o-transition: all 0.8s ease-in-out;
  259. }
  260. #nav a:hover {
  261. color: {color:Navigation Link Hover};
  262. background: {color:Navigation Background Hover};
  263. border-radius: 10px 10px 0 0;
  264. -moz-border-radius: 10px 10px 0 0;
  265. padding-top: 20px;
  266. }
  267. #desc {
  268. font: 8px tinytots;
  269. color: {color:Sidebar Text};
  270. text-transform: uppercase;
  271. text-align: left;
  272. padding: 10px;
  273. }
  274. #extra a {
  275. color: {color:Extra Link};
  276. font: 8px tinytots;
  277. text-transform: uppercase;
  278. text-align: right;
  279. letter-spacing: 5px;
  280. display: block;
  281. background: {color:Navigation Hover Background};
  282. border-bottom: 1px dashed #eee;
  283. -webkit-transition: all 0.5s ease-in-out;
  284. -moz-transition: all 0.5s ease-in-out;
  285. -o-transition: all 0.5s ease-in-out;
  286. }
  287. #extra a:hover {
  288. color: {color:Navigation Background Hover};
  289. background: {color:Navigation Link Hover};
  290. padding-right: 20px;
  291. }
  292. #title {
  293. font: italic bold 24px georgia;
  294. color: {color:Title};
  295. text-transform: lowercase;
  296. text-align: center;
  297. line-height: 15px;
  298. background: {color:Title Background};
  299. border-radius: 5px 5px 0 0;
  300. -moz-border-radius: 5px 5px 0 0;
  301. margin-top: -3px;
  302. }
  303. .date {
  304. font: italic bold 14px georgia;
  305. }
  306. .quote {
  307. padding: 0 10px 5px 10px;
  308. text-indent: 20px;
  309. font: italic 15px georgia;
  310. text-align: justify;
  311. }
  312. .qtsource {
  313. text-align: right;
  314. }
  315. .chat {
  316. margin: 2px 0;
  317. }
  318. .label {
  319. font: 8px tinytots;
  320. text-transform: uppercase;
  321. background: {color:Title Background};
  322. color: {color:Title};
  323. padding: 2px 2px 1px 2px;
  324. letter-spacing: 1px;
  325. }
  326. .audio {
  327. width: 100%;
  328. background: #000;
  329. }
  330. .ask {
  331. padding: 0 10px;
  332. }
  333. .ask img {
  334. margin-right: 4px;
  335. }
  336. .qs {
  337. width: 100%;
  338. font: 10px georgia;
  339. color: {color:Title};
  340. background: {color:Title Background};
  341. border-radius: 5px;
  342. -moz-border-radius: 5px;
  343. padding: 5px;
  344. }
  345. #pagi {
  346. {block:If500px} width: 520px; {/block:If500px}
  347. {block:If400px} width: 420px; {/block:If400px}
  348. {block:If250px} width: 270px; {/block:If250px}
  349. margin: 0 0 20px 240px;
  350. text-align: center;
  351. }
  352. #pagi a {
  353. color: {color:Post Title};
  354. margin: 0 20px;
  355. }
  356. #pagi a:hover {
  357. color: {color:Link Hover};
  358. }
  359. #backtotop {
  360. position: fixed;
  361. right: 10px;
  362. bottom: 0px;
  363. padding: 5px;
  364. text-align: center;
  365. }
  366. #backtotop a {
  367. font: 30px lucida console, trebuchet ms, sans-serif;
  368. color: {color:Link};
  369. text-decoration: none;
  370. }
  371. #backtotop a:hover {
  372. color: {color:Link Hover};
  373. }
  374. {CustomCSS}
  375. </style>
  376.  
  377. {block:IfInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScroll}
  378. </head>
  379.  
  380. <body>
  381.  
  382. <div id="bg"><img src="{image:Corner Background}"></div>
  383.  
  384. <div id="backtotop"><a href="javascript:scroll(0,0)">▲</a></div>
  385.  
  386. <div id="sidebar">
  387. {block:IfSidebarImage}<center><img src="{image:Sidebar}" width="170px"></center>{/block:IfSidebarImage}
  388. {block:IfBlogTitle}<div id="title">{text:Blog Title}</div>{/block:IfBlogTitle}
  389. <div id="desc"><img src="{PortraitURL-40}" align="left" style="border: 4px solid #fff; margin-right: 4px;">{Description}</div>
  390. <div id="extra">
  391. {block:ifLink1}<a href="{text:Link Url 1}">{text:Link 1} +</a>{/block:ifLink1}
  392. {block:ifLink2}<a href="{text:Link Url 2}">{text:Link 2} +</a>{/block:ifLink2}
  393. {block:ifLink3}<a href="{text:Link Url 3}">{text:Link 3} +</a>{/block:ifLink3}
  394. {block:ifLink4}<a href="{text:Link Url 4}">{text:Link 4} +</a>{/block:ifLink4}
  395. {block:ifLink5}<a href="{text:Link Url 5}">{text:Link 5} +</a>{/block:ifLink5}</div>
  396. <div id="nav" align="center">
  397. <a class="nav" href="/">index</a> <a class="nav" href="/ask">ask</a> <a class="nav" href="/archive">past</a> <a class="nav" href="http://sakurane.tumblr.com">theme</a></div>
  398. </div>
  399.  
  400. <div id="container">
  401. {block:IfInfiniteScroll}
  402. <div class="autopagerize_page_element">
  403. {/block:IfInfiniteScroll}
  404. {block:Posts}
  405.  
  406. <div id="entry">{block:IndexPage}<div id="perma"><div class="reblog"><a href="{Permalink}"><b>+</b>{NoteCount}</a><br><a href="{ReblogURL}"><b>R</b>eblog</a></div></div>{/block:IndexPage}
  407.  
  408. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  409.  
  410. {block:Photo}{LinkOpenTag}<img style="display: block;" src="{PhotoURL-500}" alt="{PhotoAlt}" {block:If400px}width="400"{/block:If400px}{block:IndexPage}{block:If250px}width="250"{/block:If250px}{/block:IndexPage}/>{LinkCloseTag}{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}{/block:Photo}
  411.  
  412. {block:Photoset}<div class="photoset">{block:IndexPage}{block:If500px}{Photoset-500}{/block:If500px}{block:If250px}{Photoset-250}{/block:If250px}{/block:IndexPage}{block:If400px}{Photoset-400}{/block:If400px}{block:IfNot400px}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{/block:IfNot400px}</div>{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}{/block:Photoset}
  413.  
  414. {block:Quote}<div class="quote">❝ {Quote}❞</div>{block:Source}<div class="qtsource"> —{Source}</div>{/block:Source}{/block:Quote}
  415.  
  416. {block:Link}<h1><a class="link" href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  417.  
  418. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}</div>{/block:Lines}{/block:Chat}
  419.  
  420. {block:Audio}<div class="audio">{AudioPlayerBlack}</div>{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}{/block:Audio}
  421.  
  422. {block:Video}{block:IndexPage}{block:If500px}{Video-500}{/block:If500px}{block:If250px}{Video-250}{/block:If250px}{/block:IndexPage}{block:If400px}{Video-400}{/block:If400px}{block:IfNot400px}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{/block:IfNot400px}{block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{block:IfNotShowCaption}{block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}{/block:Video}
  423.  
  424. {block:Answer}<div class="ask">{Asker}:<br><div class="qs">{Question}</div></div>{Answer}{/block:Answer}
  425.  
  426. {block:ContentSource}
  427. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  428. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  429. {/block:SourceLogo}
  430. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  431. {/block:ContentSource}
  432.  
  433. </div>
  434.  
  435. {block:IndexPage}{block:HasTags}<div id="tags"><span class="label">tagged:</span> {block:Tags}#<a href="{TagUrl}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}
  436.  
  437. {block:PermalinkPage}<div id="info">{block:Date}<span class="date">Posted {TimeAgo} with {NoteCountWithLabel}</span>{/block:Date}{block:PostNotes} {/block:PostNotes}{block:HasTags}<br><span class="label">tagged:</span> {block:Tags}#<a href="{TagUrl}">{Tag}</a> {/block:Tags}{/block:HasTags}{block:RebloggedFrom}<br>(via <a href="{ReblogParentURL}">{ReblogParentName}</a> & source <a href="{ReblogRootURL}">{ReblogRootName}</a>){/block:RebloggedFrom}</div>{/block:PermalinkPage}
  438.  
  439. {block:permalinkpage}<div id="notes">{block:PostNotes}{PostNotes}
  440. {/block:PostNotes}</div>{/block:permalinkpage}
  441.  
  442. {/block:Posts}</div></div>
  443.  
  444. {block:IfNotInfiniteScroll}<div id="pagi">
  445. {block:Pagination}
  446. {block:PreviousPage}
  447. <a class="link" href="{PreviousPage}"> previous</a>
  448. {/block:PreviousPage}
  449.  
  450. {block:NextPage}
  451. <a class="link" href="{NextPage}">next</a>
  452. {/block:NextPage}
  453. {/block:Pagination}
  454. </div>{/block:IfNotInfiniteScroll}
  455. </body></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!