API tools faq
paste
bychloethemes

Hold On - by Chloe

bychloethemes
Aug 8th, 2015
557
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. Hold On by Chloe | @dontbrag | @bychloethemes
  12. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
  13.  
  14. For html help go to @htmlqueens
  15.  
  16. -->
  17.  
  18. <meta name="color:Background" content="#fff" />
  19. <meta name="color:Text" content="#000" />
  20. <meta name="color:Links" content="#666" />
  21. <meta name="color:gradient 1" content="#fdb0a6"/>
  22. <meta name="color:gradient 2" content="#ff7f7a"/>
  23. <meta name="color:gradient 3" content="#fff7cc"/>
  24. <meta name="color:gradient 4" content="#cdb5cd"/>
  25. <meta name="color:gradient 5" content="#98d2f7"/>
  26. <meta name="color:gradient 6" content="#8fd6ac"/>
  27.  
  28. <meta name="if:Changing Background" content="1" />
  29. <meta name="if:Pagination" content="0" />
  30. <meta name="if:Tags On Index Page" content="1" />
  31.  
  32. <meta name="text:Link 1" content="" />
  33. <meta name="text:URL 1" content="" />
  34. <meta name="text:Link 2" content="" />
  35. <meta name="text:URL 2" content="" />
  36. <meta name="text:Link 3" content="" />
  37. <meta name="text:URL 3" content="" />
  38.  
  39. {block:Description}
  40. <meta name="description" content="{MetaDescription}" />
  41. {/block:Description}
  42. <meta charset="utf-8">
  43. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  44. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  45. <title>{text:Tab Title}</title>
  46. <link rel="shortcut icon" href="{Favicon}">
  47. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  48. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  49. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  50. <link href='//fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
  51. <style type="text/css">
  52. body {
  53. background: {color:Background};
  54. color: {color:Text};
  55. font-family: 'Raleway', sans-serif;
  56. font-size: 12px;
  57. margin: 0;
  58. padding: 0;
  59. }
  60.  
  61. {block:IfChangingBackground}
  62. #gradient_bg { z-index: -1000; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; background-size: cover; position:fixed; padding: 0px; margin: 0px; }
  63. {/block:IfChangingBackground}
  64. iframe, img, embed, object, video {
  65. max-width: 100%;
  66. }
  67. img {
  68. height: auto;
  69. width: auto;
  70. vertical-align:middle;
  71. }
  72. blockquote {
  73. border-left:1px solid {color:Post Borders};
  74. margin:0 0 0 15px;
  75. padding:0 0 0 5px;
  76. }
  77. a:link, a:visited {
  78. color:{color:Links};
  79. text-decoration:none;
  80. }
  81. a:hover, a:active {
  82. text-decoration:line-through;
  83. }
  84. a:focus {
  85. outline:none;
  86. }
  87. b, strong {
  88. font-weight:600;
  89. }
  90. hr {
  91. height:1px;
  92. background:#000;
  93. border:0;
  94. }
  95. h1 {
  96. font-weight:400;
  97. }
  98. cite {
  99. margin-top:3px;
  100. display:block;
  101. text-align:right;
  102. }
  103. .credit {
  104. width:14px;
  105. height:13px;
  106. color: {color:Post Borders};
  107. position:fixed;
  108. bottom: 15px;
  109. left: 15px;
  110. line-height: 14px;
  111. font-size:12px;
  112. text-transform: uppercase;
  113. padding:3px 4px;
  114. overflow: hidden;
  115. z-index:999999999999999999;
  116. text-align:left;
  117. -webkit-transition: all 0.5s ease-in-out;
  118. -moz-transition: all 0.5s ease-in-out;
  119. -o-transition: all 0.5s ease-in-out;
  120. transition: all 0.5s ease-in-out;
  121. }
  122. .credit:hover {
  123. width:126px;
  124. background:#000;
  125. color:#fff;
  126. -webkit-transition: all 0.5s ease-in-out;
  127. -moz-transition: all 0.5s ease-in-out;
  128. -o-transition: all 0.5s ease-in-out;
  129. transition: all 0.5s ease-in-out;
  130. }
  131. .credit a {
  132. color:#fff;
  133. text-decoration: none;
  134. }
  135. .credit .mine {
  136. opacity:0;
  137. visibility:hidden;
  138. }
  139. .credit:hover .mine {
  140. opacity: 1;
  141. visibility: visible;
  142. -webkit-transition: all 0.5s ease-in-out 0.5s;
  143. -moz-transition: all 0.5s ease-in-out 0.5s;
  144. -o-transition: all 0.5s ease-in-out 0.5s;
  145. transition: all 0.5s ease-in-out 0.5s;
  146. }
  147. .sidebar1 {
  148. width:150px;
  149. height:300px;
  150. position:fixed;
  151. top:100px;
  152. padding:10px;
  153. z-index:9;
  154. left:-250px;
  155. margin-left:50%;
  156. text-align:center;
  157. }
  158. .sidebar h1 {
  159. margin:0;
  160. text-align:center;
  161. }
  162. ul.navlinks {
  163. padding:0;
  164. list-style-type:none;
  165. text-align:center;
  166. margin:0;
  167. }
  168. ul.navlinks li {
  169. display:inline-block;
  170. margin:0;
  171. }
  172. ul.navlinks li:after {
  173. content:' · ';
  174. margin:0 3px;
  175. }
  176. ul.navlinks li:first-child:before {
  177. content:' · ';
  178. margin:0 3px;
  179. }
  180. .content {
  181. width:250px;
  182. float:right;
  183. margin-right:-250px;
  184. right:50%;
  185. position:relative;
  186. {block:permalinkpage}
  187. margin-top:50px;
  188. {/block:permalinkpage}
  189. }
  190. article {
  191. width:250px;
  192. margin:20px 0;
  193. }
  194. article h1 {
  195. margin:0;
  196. }
  197. article p {
  198. margin:10px 0;
  199. }
  200. article ul {
  201. padding:0;
  202. margin-left:30px;
  203. }
  204. .photoset {
  205. margin-bottom:-1px;
  206. }
  207. .short h1 {
  208. font-size:2em;
  209. }
  210. .medium h1 {
  211. font-size:1.5em;
  212. }
  213. .long h1 {
  214. font-size:1em;
  215. }
  216. ul.chat-list {
  217. list-style-type:none;
  218. padding:0;
  219. margin:0;
  220. }
  221. ul.chat-list li {
  222. margin:3px 0;
  223. padding:3px 0;
  224. }
  225. span.label {
  226. font-weight:bold;
  227. }
  228. .tumblr_audio_player {
  229. height: 30px;
  230. width: 250px;
  231. }
  232. .question2 p {
  233. display:inline;
  234. margin:0;
  235. }
  236. ul.permas {
  237. padding:0;
  238. list-style-type:none;
  239. margin:5px 0;
  240. text-align:center;
  241. height:16px;
  242. overflow:hidden;
  243. font-size:10px;
  244. }
  245. ul.permas li {
  246. display:inline-block;
  247. }
  248. ol.notes {
  249. list-style-type: none;
  250. margin:0 5px 0 0;
  251. padding:0;
  252. }
  253.  
  254. ol.notes li.note {
  255. padding:0;
  256. text-align:center;
  257. line-height:16px;
  258. width:100%;
  259. border:0;
  260. border-radius:0;
  261. background:transparent;
  262. padding-bottom:3px;
  263. padding-top:3px;
  264. }
  265. ol.notes li.note img.avatar {
  266. display:none;
  267. }
  268.  
  269. ol.notes li.note span.action {
  270. font-weight: normal;
  271. }
  272.  
  273. ol.notes li.note .answer_content {
  274. font-weight: normal;
  275. }
  276. .taggy {
  277. font-size:10px;
  278. }
  279. </style>
  280. </head>
  281. <body>
  282.  
  283. {block:IfChangingBackground}
  284. <div id="gradient_bg"></div>
  285. {/block:IfChangingBackground}
  286. <div class="sidebar1">
  287. <h1><a href="/">{Title}</a></h1>
  288. {block:Pagination}
  289. <div class="pagination">
  290. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  291. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  292. </div>
  293. {/block:Pagination}
  294. {block:Description}<p>{Description}</p>{/block:Description}
  295. <ul class="navlinks">
  296. <li><a href="/">home</a></li>
  297. {block:AskEnabled}
  298. <li><a href="/ask">ask</a></li>
  299. {/block:AskEnabled}
  300. {block:SubmissionsEnabled}
  301. <li><a href="/submit">submit</a></li>
  302. {/block:SubmissionsEnabled}
  303. {block:HasPages}
  304. <br>&nbsp;&middot;&nbsp;
  305. {block:Pages}
  306. <li><a href="{URL}">{Label}</a></li>
  307. {/block:Pages}
  308. <br>
  309. {/block:HasPages}
  310. {block:IfLink1}
  311. <br>&nbsp;&middot;&nbsp;
  312. <li><a href="{text:URL 1}">{text:Link 1}</a></li>
  313. {/block:IfLink1}
  314. {block:IfLink2}
  315. <li><a href="{text:URL 2}">{text:Link 2}</a></li>
  316. {/block:IfLink2}
  317. {block:IfLink3}
  318. <li><a href="{text:URL 3}" >{text:Link 3}</a></li>
  319. {/block:IfLink3}
  320. <br>&nbsp;&middot;&nbsp;
  321. <li><a href="/archive">archive</a></li>
  322. <li><a href="http://dontbrag.tumblr.com" target="_blank">theme</a></li>
  323. </ul>
  324. </div>
  325. <div class="content">
  326. {block:Posts}
  327. <article>
  328. {block:Text}
  329. <div class="text">
  330. {block:Title}<h1>{Title}</h1>{block:Title}
  331. <p>{Body}</p>
  332. </div>
  333. {/block:Text}
  334.  
  335. {block:Photo}
  336. <div class="photo">
  337. <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  338. </div>
  339. {block:Caption}<p>{Caption}</p>{/block:Caption}
  340. {/block:Photo}
  341.  
  342. {block:Photoset}
  343. <div class="photoset">
  344. {Photoset-250}
  345. {block:Caption}<p>{Caption}</p>{/block:Caption}
  346. </div>
  347. {/block:Photoset}
  348.  
  349. {block:Quote}
  350. <div class="quote {Length}">
  351. <h1>&ldquo;{Quote}&rdquo;</h1>
  352. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  353. </div>
  354. {/block:Quote}
  355.  
  356. {block:Link}
  357. <div class="link">
  358. <h1>&#8627;<a href="{URL}" {Target}>{Name}</a></h1>
  359. {block:Description}<p>{Description}</p>{/block:Description}
  360. </div>
  361. {/block:Link}
  362.  
  363. {block:Chat}
  364. <div class="chat">
  365. {block:Title}<h1>{Title}</h1>{/block:Title}
  366. <ul class="chat-list">
  367. {block:Lines}
  368. <li class="{Alt}">
  369. {block:Label}<span class="label">{Label}</span>{/block:Label}
  370. {Line}</li>
  371. {/block:Lines}
  372. </ul>
  373. </div>
  374. {/block:Chat}
  375.  
  376. {block:Audio}
  377. <div class="audio">
  378. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  379. Artist: <span{block:Artist} style="display:none;"
  380. {/block:Artist}>Unknown</span>
  381. {block:Artist}{Artist}{/block:Artist}</br>
  382. Title: <span{block:TrackName} style="display:none;"
  383. {/block:TrackName}>Unknown</span>
  384. {block:TrackName}{TrackName}{/block:TrackName}</br>
  385. Album: <span{block:Album} style="display:none;"
  386. {/block:Album}>Unknown</span>
  387. {block:Album}{Album}{/block:Album}{block:PlayCount}</br>
  388. Plays: {FormattedPlayCount}{/block:PlayCount}
  389. {block:Caption}<p>{Caption}</p>{/block:Caption}
  390. </div>
  391. {/block:Audio}
  392.  
  393. {block:Video}
  394. <div class="video">
  395. {Video-250}
  396. {block:Caption}<p>{Caption}</p>{/block:Caption}
  397. </div>
  398. {block:Video}
  399.  
  400. {block:Answer}
  401. <div class="answer">
  402. <div>{lang:Asker asked 2}: {Question}</div>
  403. {block:Answerer}
  404. <div class="question2">{Answerer} replied: {Answer}</div>
  405. {/block:Answerer}
  406. <p>{Replies}</p>
  407. </div>
  408. {/block:Answer}
  409. {block:IndexPage}
  410. {block:IfTagsOnIndexPage}
  411. {block:HasTags}<div class="taggy">{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}</div>{/block:HasTags}
  412. {/block:IfTagsOnIndexPage}
  413. <ul class="permas">
  414. <li><a href="{Permalink}">{NoteCount}</a></li>
  415. <li>&middot;</li>
  416. <li><a href="{ReblogURL}">Reblog</a></li>
  417. {block:RebloggedFrom}<li>&middot;</li>
  418. <li><a href="{ReblogParentURL}">Via</a></li>
  419. {/block:RebloggedFrom}
  420. {block:ContentSource}<li>&middot;</li>
  421. <li><a href="{SourceURL}">Source</a></li>
  422. {/block:ContentSource}
  423. </ul>
  424. {/block:IndexPage}
  425. </article>
  426. {block:PermalinkPage}
  427. {block:HasTags}
  428. <article id="tags">
  429. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
  430. </article>{/block:HasTags}
  431. {block:PostNotes}
  432. <article id="notes" class="postnotes">
  433. {PostNotes}
  434. </article>
  435. {/block:PostNotes}
  436. {/block:PermalinkPage}
  437. {/block:Posts}
  438. </div>
  439. {block:IfChangingBackground}
  440. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  441. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  442.  
  443. <script>
  444. var colors = new Array(
  445. [{RGBcolor:gradient 1}],
  446. [{RGBcolor:gradient 2}],
  447. [{RGBcolor:gradient 3}],
  448. [{RGBcolor:gradient 4}],
  449. [{RGBcolor:gradient 5}],
  450. [{RGBcolor:gradient 6}]);
  451. var step = 0;
  452. var colorIndices = [0,1,2,3];
  453. var gradientSpeed = 0.002;
  454. function updateGradient()
  455. {
  456. var c0_0 = colors[colorIndices[0]];
  457. var c0_1 = colors[colorIndices[1]];
  458. var c1_0 = colors[colorIndices[2]];
  459. var c1_1 = colors[colorIndices[3]];
  460. var istep = 1 - step;
  461. var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
  462. var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
  463. var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
  464. var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);
  465. var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
  466. var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
  467. var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
  468. var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);
  469. $('#gradient_bg').css({
  470.  
  471. background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
  472. background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  473. step += gradientSpeed;
  474. if ( step >= 1 )
  475. {
  476. step %= 1;
  477. colorIndices[0] = colorIndices[1];
  478. colorIndices[2] = colorIndices[3];
  479. colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  480. colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  481. }
  482. }
  483. setInterval(updateGradient,10);
  484. </script>
  485. {/block:IfChangingBackground}
  486. <div class="credit">
  487. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  488. </div>
  489. </body>
  490. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!