API tools faq
paste
Advertisement
ciralism

Cambriolage - Theme VI by ciralism

ciralism
Jul 13th, 2015
6,752
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <!---
  10.  
  11. CAMBRIOLAGE
  12. a simple header theme by ciralism
  13.  
  14. //use respectfully
  15. //you know the rules
  16. //created to match my coups et blessures about page
  17.  
  18. ---->
  19.  
  20. <meta name="image:header" content=""/>
  21.  
  22. <meta name="color:text" content="#000000"/>
  23. <meta name="color:background" content="#ffffff"/>
  24. <meta name="color:heading1" content="#000000"/>
  25. <meta name="color:heading2" content="#000000"/>
  26. <meta name="color:link hover" content="#888888"/>
  27. <meta name="color:accent" content="#dddddd"/>
  28. <meta name="color:header bg" content="#ffffff"/>
  29.  
  30. <meta name="select:post size" content="300" title="300px"/>
  31. <meta name="select:post size" content="350" title="350px"/>
  32. <meta name="select:post size" content="400" title="400px"/>
  33. <meta name="select:post size" content="450" title="450px"/>
  34. <meta name="select:post size" content="500" title="500px"/>
  35. <meta name="select:post size" content="550" title="550px"/>
  36.  
  37. <meta name="text:quote" content="quote goes here"/>
  38. <meta name="text:source" content="source"/>
  39. <meta name="text:link1url" content="link 1 url"/>
  40. <meta name="text:link 1" content="link 1"/>
  41. <meta name="text:link2url" content="link 2 url"/>
  42. <meta name="text:link 2" content="link 2"/>
  43. <meta name="text:link3url" content="link 3 url"/>
  44. <meta name="text:link 3" content="link 3"/>
  45. <meta name="text:link4url" content="link 4 url"/>
  46. <meta name="text:link 4" content="link 4"/>
  47. <meta name="text:link5url" content="link 5 url"/>
  48. <meta name="text:link 5" content="link 5"/>
  49.  
  50. <meta name="if:hide captions" content="1"/>
  51. <meta name="if:hide tags" content="0"/>
  52. <meta name="if:reblog" content="1"/>
  53. <meta name="if:like" content="1"/>
  54. <meta name="if:via" content="1"/>
  55. <meta name="if:source" content="1"/>
  56.  
  57. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  58. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  59. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  60.  
  61. <script>
  62. window.onload = function () {
  63. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  64. document.addEventListener( 'click', function ( event ) {
  65. var myLike = event.target;
  66. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  67. var frame = document.getElementById( 'my-like-frame' ),
  68. liked = ( myLike.className == 'my-liked' ),
  69. command = liked ? 'unlike' : 'like',
  70. reblog = myLike.getAttribute( 'data-reblog' ),
  71. id = myLike.getAttribute( 'data-id' ),
  72. oauth = reblog.slice( -8 );
  73. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  74. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  75. };
  76. }, false );
  77. };
  78. </script>
  79.  
  80. <script type="text/javascript">
  81. $(function() {
  82. $.fn.scrollToTop = function() {
  83. if ($(window).scrollTop() != "0") {
  84. }
  85. var scrollDiv = $(this); $(window).scroll(function() {
  86. if ($(window).scrollTop() == "0") {
  87. }
  88. else { $(scrollDiv).fadeIn("slow") } });
  89. $(this).click(function() { $("html, body") .animate({ scrollTop: 0 }, "slow")}) } });
  90. $(function() { $(".button").scrollToTop(); });
  91. </script>
  92.  
  93. <style type="text/css">
  94. /* BASICS */
  95. body {background-color:{color:background};font-family:Lato;color:{color:text};font-size:11px;}
  96. a {color:#000;text-decoration:none;-webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;}
  97. a:hover, a:active {
  98. color:{color:link hover};
  99. }
  100. h1 {text-align:left;padding:10px 0px;font-size:11px;font-weight:400;font-style:italic;letter-spacing:3px;font-family:Lato;margin:0;color:{color:heading1};text-transform:uppercase;}
  101. #tumblr_controls, .tmblr-iframe {transform:scale(.8);-webkit-transform:scale(.8);position:fixed;top:0;right:-10px;filter:invert(100%);-webkit-filter:invert(100%);opacity:.3;}
  102. blockquote {font-size:9px;font-family:Lato;text-transform:none;letter-spacing:1px;padding:10px;background-color:#fafafa;line-height:15px;font-weight:300;text-align:left;color:#444;border:1px solid #f3f3f3;}
  103. blockquote img {max-width:100%;height:auto;}
  104.  
  105. ::-webkit-scrollbar {width:7px;background-color:#f3f3f3;}
  106. ::-webkit-scrollbar-thumb {width:7px;background-color:#fff;border:1px solid #ddd;}
  107. ::selection {background-color:{color:accent};}
  108. /* header */
  109.  
  110. .header {
  111. width:calc(100% - 50px);background-color:#fff;text-align:center;padding:25px;padding-bottom:0px;line-height:200%;height:100%;border-right:1px solid #f3f3f3;margin-top:-10px;
  112. }
  113.  
  114. .title {text-transform:uppercase;font-family:Lato, Sans-Serif;color:#000;font-weight:900;letter-spacing:2px;}
  115.  
  116. .headerimage {width:50px;height:50px;margin-top:10px;border-radius:50% 50%;-webkit-border-radius:50% 50%;display:block;margin-left:auto;margin-right:auto;}
  117.  
  118. .description {font-size:9px;font-family:Lato;text-transform:none;letter-spacing:1px;margin-top:15px;line-height:15px;font-weight:300;text-align:left;color:#444;}
  119. .description b {font-size:1em;color:#222;font-weight:400;}
  120.  
  121. .links {display:block;font-size:9px;text-align:center;width:calc(100% + 53px);margin-left:-27px;border-top:1px solid #f3f3f3;margin-top:15px;}
  122. .links a {color:{color:links};display:inline-block;padding:3px 5px 7px 5px;font-weight:300;font-size:7px;text-transform:uppercase;letter-spacing:1px;width:calc(20% - 13px);border-left:1px solid #f3f3f3;}
  123. .links a:hover {color:{color:link hover};}
  124. .credit {position:fixed;text-transform:uppercase;font-size:7px;font-weight:bold;right:5px;bottom:5px;letter-spacing:1px;color:#888;}
  125.  
  126. .container {width:{select:post size}px;margin:50px auto;padding-bottom:50px;}
  127.  
  128. .post {width:{select:post size}px;line-height:180%;font-size:11px;font-weight:300;margin-top:90px;background-color:#fff;}
  129.  
  130. .photo_post img {
  131. width:{select:post size}px;
  132. display:block;
  133. }
  134.  
  135. .photo_post iframe {
  136. display:block;
  137. width:calc({select:post size} + 3px);
  138. }
  139.  
  140. .caption {
  141. width:calc(100%-20px);
  142. font-size:9px;
  143. line-height:180%;
  144. color:{color:text};
  145. padding:10px;
  146. background-color:#fff;
  147. }
  148. .quote {
  149. text-align:center;
  150. font-family:Didot;
  151. font-style:italic;
  152. font-weight:normal;
  153. padding-top:10px;
  154. font-size:12px;
  155. }
  156. .source{
  157. text-align:center;
  158. text-transform:uppercase;
  159. font-size:8px;
  160. letter-spacing:2px;
  161. font-weight:300;
  162. }
  163.  
  164. .linkpost_description{
  165. text-align:center;
  166. font-size:10px;
  167. letter-spacing:1px;
  168. }
  169. .lines {
  170. text-align:left;
  171. padding:20px;
  172. }
  173. .line {
  174. padding:5px 0px;
  175. font-size:9px;
  176. }
  177. .label {
  178. font-weight:normal;
  179. font-size:8px;
  180. letter-spacing:1px;
  181. color:#666;
  182. display:block;
  183. text-transform:uppercase;
  184. }
  185. .question {
  186. display:block;
  187. border-bottom:1px solid #f3f3f3;
  188. padding:15px;
  189. font-size:9px;
  190. letter-spacing:1px;
  191. text-align:left;
  192. line-height:13px;
  193. }
  194. .asker{
  195. text-transform:uppercase;
  196. font-size:8px;
  197. font-weight:normal;
  198. color:#777;
  199. letter-spacing:1px;
  200. display:block;
  201. }
  202. .answer {text-align:left;padding-left:15px;font-size:10px;letter-spacing:0px;padding-bottom:10px;}
  203.  
  204. .audio_left {
  205. width:calc(50% - 7px);
  206. display:inline-block;
  207. padding-right:10px;
  208. height:172px;
  209. }
  210. .art {
  211. width:100%;
  212. }
  213. .albumart {
  214. width:100%;
  215. }
  216. .play_wrap {
  217. position:absolute;
  218. margin-top:-130px;
  219. margin-left:70px;
  220. width:60px;
  221. height:60px;
  222. background-color:#fff;
  223. border-radius:50% 50%;
  224. -webkit-border-radius:50% 50%;
  225. -webkit-transition-duration:400ms;
  226. -o-transition-duration:400ms;
  227. -moz-transition-duration:400ms;
  228. -ms-transition-duration:400ms;
  229. }
  230.  
  231. .play_wrap:hover {
  232. -webkit-transform:scale(1.6);
  233. transform:scale(1.6);
  234. }
  235. .play_wrap:hover .player {
  236. -webkit-transform:scale(.6);
  237. transform:scale(.6);
  238. }
  239. .player {
  240. overflow:hidden;
  241. width:25px;
  242. height:25px;
  243. margin-left:17px;
  244. margin-top:17px;-webkit-transform:scale(.8);
  245. transform:scale(.8);
  246. opacity:.6;-webkit-transition-duration:400ms;
  247. -o-transition-duration:400ms;
  248. -moz-transition-duration:400ms;
  249. -ms-transition-duration:400ms;
  250. }
  251. .audio_right {
  252. width:calc(50% - 7px);
  253. height:172px;
  254. background-color:#fff;
  255. display:inline-block;
  256. margin-left:-10px;
  257. float:right;
  258. }
  259. .audio_info {
  260. vertical-align:center;
  261. height:140px;
  262. line-height:150%;
  263. padding:20px 10px 10px 10px;
  264. background-color:#fff;
  265. }
  266. .audio_info li {
  267. list-style-type:none;
  268. text-align:center;
  269. margin-left:-40px;
  270. padding:0;
  271. }
  272. .audio_info li:nth-of-type(odd) {
  273. font-weight:normal;
  274. font-size:8px;
  275. color:#777;
  276. text-transform:uppercase;
  277. letter-spacing:1px;
  278. }
  279. .audio_info h3 {
  280. text-transform:uppercase;
  281. font-size:10px;
  282. letter-spacing:1px;
  283. font-family:Lato;
  284. font-style:italic;color:#777;font-weight:normal;
  285. padding:0;
  286. margin:0;
  287. text-align:center;
  288. }
  289. .pagination {text-align:center;margin-top:50px;width:100%;font-size:8px;}
  290. .current_page, .jump_page:hover {font-weight:bold;padding:5px 10px;}
  291. .jump_page{font-weight:normal;padding:5px 10px;}
  292.  
  293. .info {
  294. width:100%;
  295. padding:10px;
  296. {block:ifnothidecaptions}border-top:1px solid #f3f3f3;{/block:ifnothidecaptions}
  297. letter-spacing:1px;
  298. font-size:7px;
  299. line-height:100%!important;
  300. font-weight:400;
  301. text-align:left;
  302. color:#999;
  303. text-transform:uppercase;
  304. -webkit-transition-duration:700ms;-moz-transition-duration:700ms;-o-transition-duration:700ms;-ms-transition-duration:700ms;transition-duration:700ms;
  305. }
  306. .info a {color:#999;}
  307.  
  308. .tags {
  309. display:block;
  310. text-align:left;
  311. font-size:7px;
  312. margin-top:8px;
  313. letter-spacing:1px;
  314. font-weight:300;
  315. }
  316.  
  317. .sbquote {
  318. font-family:Didot;
  319. font-style:italic;
  320. margin-top:10px;
  321. }
  322. .sbsource {
  323. text-transform:uppercase;letter-spacing:2px;font-weight:300;font-size:7px;margin-top:-5px;
  324. }
  325.  
  326. .textbody {padding:25px;font-size:10px;}
  327.  
  328. .notesbin img {width:0;height:0;}
  329. .notesbin ol,.notesbin ul {list-style-type:none;margin:0;font-weight:300;text-transform:uppercase;padding:0;}
  330. .notesbin {line-height:200%;border:1px solid #f3f3f3;font-size:7px;text-align:left;margin-top:15px;width:400px;letter-spacing:1px;}
  331. .notesbin a {font-weight:400;}
  332.  
  333. .my-like {
  334. cursor:pointer;
  335. font-size:7px;
  336. display:inline-block;
  337. vertical-align:center;-webkit-transition-duration:500ms;-o-transition-duration:500ms;-ms-transition-duration:500ms;-moz-transition-duration:500ms;transition-duration:500ms;
  338. }
  339. .my-liked, .my-like:hover {
  340. color: #e55c5c;
  341. cursor:pointer;
  342. display:inline-block;
  343. vertical-align:top;
  344. }
  345. .r:hover {color:green!important;}
  346.  
  347. .button {
  348. cursor:pointer;
  349. padding:5px 6px 5px 8px;
  350. font-size:7px;
  351. color:#888;
  352. font-weight:400;
  353. text-transform:uppercase;
  354. letter-spacing:1px;
  355. position:fixed;
  356. text-align:center;
  357. border:none;
  358. right:0px;
  359. bottom:15px;
  360. -webkit-transition-duration:400ms;
  361. -moz-transition-duration:400ms;
  362. -o-transition-duration:400ms;
  363. -ms-transition-duration:400ms;
  364. }
  365. .button i {font-size:12px;}
  366.  
  367. .button:hover {
  368. bottom:20px;
  369. }
  370.  
  371. </style>
  372. </head>
  373. <body>
  374.  
  375. <div class="container">
  376. <div class="header">
  377. <img class="headerimage" src="{image:header}"/>
  378. <div class="sbquote">❝ {text:quote} ❞</div>
  379. <div class="sbsource">{text:source}</div>
  380. <div class="description">{Description}</div>
  381. <div class="links">
  382. <a href="{text:link1url}">{text:link 1}</a>
  383. <a href="{text:link2url}">{text:link 2}</a>
  384. <a href="{text:link3url}">{text:link 3}</a>
  385. <a href="{text:link4url}">{text:link 4}</a>
  386. <a href="{text:link5url}">{text:link 5}</a>
  387.  
  388. </div>
  389. </div>
  390. {block:Posts}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  391.  
  392. <article class="post">
  393. {block:Text}<div class="textbody"><h1>{Title}</h1>{Body}</div>{/block:Text}
  394.  
  395. {block:Photo}<div class="photo_post">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}</div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Photo}
  396.  
  397. {block:Photoset}<div class="photo_post">{Photoset}</div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Photoset}
  398.  
  399. {block:Quote}<div class="quote">{Quote}</div><div class="source">{Source}</div>{/block:Quote}
  400.  
  401. {block:Link}<h1><a href="{URL}" class="linkpost" {Target}>{Name}</a></h1>{block:Description}<div class="linkpost_description">{Description}</div>{/block:Description}{/block:Link}
  402.  
  403. {block:Chat}<div class="lines">{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<div class="line">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</div>{/block:Lines}</div>{/block:Chat}
  404.  
  405. {block:Video}<div class="photo_post">{Video}</div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Video}
  406.  
  407. {block:Answer}<div class="question"><div class="asker">{Asker} </div>{Question}</div><div class="answer">{Answer}</div>{/block:Answer}
  408.  
  409. {block:Audio}<div class="audio_left">{Block:AlbumArt}<div class="art"><img src="{AlbumArtURL}" class="albumart"><div class="play_wrap">{block:AudioPlayer}<div class="player">{AudioPlayer}</div>{/block:AudioPlayer}</div></div>{/block:AlbumArt}</div><div class="audio_right"><div class="audio_info">{block:TrackName}<h3>{TrackName}</h3>{/block:TrackName}<ul>{block:Artist}<li>Artist</li><li>{Artist}</li>{/block:Artist}{block:Album}<li>Album</li><li>{Album}</li>{/block:Album}{block:PlayCount}<li>Plays</li><li>{FormattedPlayCount}</li>{/block:PlayCount}</ul></div></div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Audio}
  410.  
  411. {block:Date}<div class="info"><a href="{Permalink}">{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a> / <a href="{Permalink}"> {NoteCountWithLabel}</a> {block:IfReblog}/ <a href="{ReblogURL}" class="r"><i class="fa fa-retweet"></i></a> {/block:ifReblog}{block:iflike}/ <div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"><i class="fa fa-heart"></i></div>{/block:ifLike}{block:IfVia}/ {block:RebloggedFrom}via: <a href=“{ReblogParentURL}”>{ReblogParentName}</a>{/block:RebloggedFrom}{/block:IfVia} {block:ifSource}/ {block:ContentSource}<a href="{SourceURL}">source: {SourceTitle}</a>{/block:ContentSource}
  412. {/block:ifSource}
  413. {block:IfNotHideTags}{block:IndexPage}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}{/block:IfNotHideTags}{block:PermalinkPage}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:PermalinkPage}</div>{/block:Date}
  414.  
  415. </article>
  416. {block:PostNotes}<article class="notesbin">{PostNotes}</article>{/block:PostNotes}
  417. {/block:Posts}
  418. <article class="pagination">
  419. {Block:Pagination}
  420. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  421.  
  422. {block:JumpPagination length="5"}{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  423. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  424.  
  425. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  426. {/block:Pagination}
  427. </article>
  428. </div>
  429. <a class="button"><i class="fa fa-angle-up"></i><br>top</a>
  430.  
  431. <a href="http://ciralism.tumblr.com" class="credit">ciralism</a>
  432. </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!