Advertisement
foundcas

Theme 18: Collide

Feb 12th, 2015 (edited)
879
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.53 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- Don't steal and all that jazz. Any problems just tell me and I'll try to fix it. You can move the credit or change the styling to suit your tastes, but just don't put it on a separate page // capecoding.tumblr.com/ask -->
  6.  
  7.  
  8. <title>{Title}</title>
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}"/>
  13. {/block:Description}
  14.  
  15. <meta name="color:Background" content="#000">
  16. <meta name="color:Text" content="#999">
  17. <meta name="color:Link" content="#3c3c3c">
  18. <meta name="color:Link Hover" content="#999">
  19. <meta name="color:Link Border" content="#fff">
  20. <meta name="color:Info Border" content="#fff">
  21. <meta name="color:Fade Background" content="#fff">
  22. <meta name="color:Scrollbar" content="#999">
  23. <meta name="color:Selection" content="#fff">
  24. <meta name="color:Selection Background" content="#999">
  25. <meta name="color:Tooltips" content="#000">
  26. <meta name="color:Tooltips Background" content="#fff">
  27. <meta name="color:Tooltips Shadow" content="#bbb">
  28. <meta name="color:Tooltips Border" content="#999">
  29.  
  30. <meta name="image:Post Background" content="https://ununsplash.imgix.net/photo-1415226620463-aedee27159c5?fit=crop&fm=jpg&h=800&q=75&w=1050">
  31.  
  32. <meta name="if:ShowStopBullyingLogo" content="1">
  33.  
  34. <meta name="text:Link 1" content="link 1">
  35. <meta name="text:Link 1 URL" content="url 1">
  36. <meta name="text:Link 2" content="link 2">
  37. <meta name="text:Link 2 URL" content="url 2">
  38. <meta name="text:Link 3" content="link 3">
  39. <meta name="text:Link 3 URL" content="url 3">
  40. <meta name="text:Link 4" content="link 4">
  41. <meta name="text:Link 4 URL" content="url 4">
  42. <meta name="text:Link 5" content="link 5">
  43. <meta name="text:Link 5 URL" content="url 5">
  44. <meta name="text:Link 6" content="link 6">
  45. <meta name="text:Link 6 URL" content="url 6">
  46. <meta name="text:Link 7" content="link 7">
  47. <meta name="text:Link 7 URL" content="url 7">
  48.  
  49. <meta name="select:Font" name=".anton" content="Anton">
  50. <meta name="select:Font" name=".dosis" content="Dosis">
  51. <meta name="select:Font" name="calibri" content="Calibri">
  52. <meta name="select:Font" name="cambria" content="Cambria">
  53. <meta name="select:Font" name="century gothic" content="Century Gothic">
  54. <meta name="select:Font" name="consolas" content="Consolas">
  55. <meta name="select:Font" name=".economica" content="Economica">
  56. <meta name="select:Font" name=".jura" content="Jura">
  57. <meta name="select:Font" name=".kaffeesatz" content="Kaffeesatz">
  58. <meta name="select:Font" name=".nova" content="Nova Mono">
  59. <meta name="select:Font" name=".open" content="Open Sans">
  60. <meta name="select:Font" name=".quicksand" content="Quicksand">
  61. <meta name="select:Font" name=".rajdhani" content="Rajdhani">
  62. <meta name="select:Font" name=".ubuntu" content="Ubuntu Mono">
  63.  
  64. <link href='http://fonts.googleapis.com/css?family=Rajdhani|Dosis|Ubuntu+Mono|Economica|Quicksand|Nova+Mono|Anton|Yanone+Kaffeesatz|Open+Sans|Jura' rel='stylesheet' type='text/css'>
  65.  
  66. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  67. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  68. <script>
  69. (function($){
  70. $(document).ready(function(){
  71. $("[title]").style_my_tooltips({
  72. tip_follows_cursor:true,
  73. tip_delay_time:200,
  74. tip_fade_speed:300
  75. }
  76. );
  77. });
  78. })(jQuery);
  79. </script>
  80.  
  81. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  82. <script type="text/javascript">
  83. $(document).ready(function(){
  84. $(".apop").click(function(){
  85. $(".up1").fadeToggle("slow");
  86. });
  87. $(".lpop").click(function(){
  88. $(".up2").fadeToggle("slow");
  89. });
  90. });
  91. </script>
  92.  
  93.  
  94. <style type="text/css">
  95.  
  96.  
  97. /*fonts*/
  98. .anton{
  99. font-family: 'Anton', sans-serif;
  100. }
  101. .dosis{
  102. font-family: 'Dosis', sans-serif;
  103. }
  104. .economica{
  105. font-family: 'Economica', sans-serif;
  106. }
  107. .jura{
  108. font-family: 'Jura', sans-serif;
  109. }
  110. .kaffeesatz{
  111. font-family: 'Yanone Kaffeesatz', sans-serif;
  112. }
  113. .nova{
  114. font-family: 'Nova Mono', ;
  115. }
  116. .open{
  117. font-family: 'Open Sans', sans-serif;
  118. }
  119. .quicksand{
  120. font-family: 'Quicksand', sans-serif;
  121. }
  122. .rajdhani{
  123. font-family:'Rajdhani';
  124. }
  125. .ubuntu{
  126. font-family: 'Ubuntu Mono', ;
  127. }
  128.  
  129. #s-m-t-tooltip{
  130. position:absolute;
  131. max-width:300px;
  132. margin:-20px;
  133. padding:2px 8px;
  134. border:1px solid {color:Tooltips Border};
  135. background:{color:Tooltips Background};
  136. color:{color:Tooltips};
  137. z-index:999999;
  138. font-size:10.5px;
  139. font-weight:bold;
  140. text-transform:lowercase;
  141. box-shadow:1px 1px 3px {color:Tooltips Shadow};
  142. }
  143.  
  144. ::-webkit-scrollbar{
  145. width:4px;
  146. height:auto;
  147. }
  148.  
  149. ::-webkit-scrollbar-thumb{
  150. width:4px;
  151. height:auto;
  152. background:{color:Scrollbar};
  153. }
  154.  
  155. ::selection{
  156. background:{color:Selection Background};
  157. color:{color:Selection};
  158. }
  159.  
  160. body{
  161. background:{color:Background};
  162. font-family: {select:Font};
  163. font-size:12px;
  164. word-wrap:break-word;
  165. overflow-x:hidden;
  166. }
  167.  
  168. blockquote{
  169. border-left:2px solid {color:Text};
  170. padding:5px;
  171. }
  172.  
  173. pre, code {
  174. padding:10px;
  175. box-sizing:border-box;
  176. -moz-box-sizing:border-box;
  177. webkit-box-sizing:border-box;
  178. display:block;
  179. white-space: pre-wrap;
  180. white-space: -moz-pre-wrap;
  181. white-space: -pre-wrap;
  182. white-space: -o-pre-wrap;
  183. word-wrap: break-word;
  184. width:100%; overflow-x:auto;
  185. background:rgba(255, 255, 255, .7);
  186. }
  187.  
  188. a{
  189. color:{color:Link};
  190. text-decoration:none;
  191. -moz-transition:.8s ease;
  192. -webkit-transition:.8s ease;
  193. -o-transition:.8s ease;
  194. }
  195.  
  196. a:hover{
  197. color:{color:Link Hover};
  198. text-shadow:1px 1px .8px {color:Link};
  199. -moz-transition:.8s ease;
  200. -webkit-transition:.8s ease;
  201. -o-transition:.8s ease;
  202. }
  203.  
  204. #title{
  205. letter-spacing:1px;
  206. font-size:30px;
  207. text-align:center;
  208. margin-top:50px;
  209. }
  210.  
  211. #nlink{
  212. text-transform:uppercase;
  213. font-size:15px;
  214. text-align:center;
  215. padding:50px;
  216. background:#fff;
  217. margin:60px;
  218. border:1px solid transparent;
  219. -moz-transition:.8s ease;
  220. -webkit-transition:.8s ease;
  221. -o-transition:.8s ease;
  222. }
  223. #nlink:hover{
  224. color:{color:Link Hover};
  225. border:1px solid {color:Link Border};
  226. background:rgba(255, 255, 255, .5);
  227. text-shadow:none;
  228. -moz-transition:.8s ease;
  229. -webkit-transition:.8s ease;
  230. -o-transition:.8s ease;
  231. }
  232. .pagi{
  233. font-size:15px;
  234. text-align:center;
  235. width:140px;
  236. margin:-6px 60px;
  237. padding:5px;
  238. background:#fff;
  239. border:1px solid transparent;
  240. -moz-transition:.8s ease;
  241. -webkit-transition:.8s ease;
  242. -o-transition:.8s ease;
  243. }
  244. .pagi:hover{
  245. border:1px solid {color:Link Border};
  246. background:rgba(255, 255, 255, .5);
  247. -moz-transition:.8s ease;
  248. -webkit-transition:.8s ease;
  249. -o-transition:.8s ease;
  250. }
  251. #navl{
  252. position:fixed;
  253. margin-top:50px;
  254. margin-left:20px;
  255. }
  256.  
  257. #navr{
  258. position:fixed;
  259. margin-top:50px;
  260. margin-left:1075px;
  261. }
  262.  
  263. #desc{
  264. position:absolute;
  265. width:800px;
  266. height:500px;
  267. max-height:500px;
  268. overflow:hidden;
  269. background:rgba(255, 255, 255, .5);
  270. }
  271.  
  272. .words{
  273. display:table;
  274. margin-left:auto;
  275. margin-right:auto;
  276. height:500px;
  277. width:525px;
  278. text-align:center;
  279. font-size:15px;
  280. word-spacing:1px;
  281. background:{color:Fade Background};
  282. }
  283.  
  284. .words p{
  285. display: table-cell;
  286. text-align: center;
  287. vertical-align: middle;
  288.  
  289. }
  290.  
  291. #menu{
  292. position:absolute;
  293. width:800px;
  294. height:500px;
  295. max-height:500px;
  296. overflow:hidden;
  297. background:rgba(255, 255, 255, .5);
  298. overflow-y:auto;
  299. }
  300.  
  301. .lmenu{
  302. margin-left:auto;
  303. margin-right:auto;
  304. width:525px;
  305. height:500px;
  306. padding:5px;
  307. text-align:center;
  308. font-size:15px;
  309. letter-spacing:1px;
  310. background:{color:Fade Background};
  311. }
  312.  
  313. .mlink{
  314. margin:8px;
  315. border:1px solid {color:Link Border};
  316. padding:20px;
  317. background:{color:Background};
  318. }
  319.  
  320. .con{
  321. margin-top:80px;
  322. margin-left:auto;
  323. margin-right:auto;
  324. width:800px;
  325. height:500px;
  326. background:url('{image:Post Background}');
  327. overflow-y:auto;
  328. }
  329.  
  330. #posts{
  331. margin-top:50px;
  332. margin-bottom:50px;
  333. margin-left:auto;
  334. margin-right:auto;
  335. padding:10px;
  336. width:500px;
  337. border-top-left-radius:15px;
  338. border-top-right-radius:15px;
  339. border-bottom-right-radius:15px;
  340. border-bottom-left-radius:15px;
  341. background:rgba(255, 255, 255, .5);
  342. }
  343.  
  344. .chat li{
  345. list-style-type:none;
  346. margin-left:-40px;
  347. }
  348.  
  349. .question{
  350. text-align:center;
  351. background:rgba(255, 255, 255, .4);
  352. border-top-left-radius:15px;
  353. border-top-right-radius:15px;
  354. border-bottom-right-radius:15px;
  355. border-bottom-left-radius:15px;
  356. }
  357.  
  358. #info{
  359. border-top:2px solid {color:Info Border};
  360. margin-top:3px;
  361. padding-top:1px;
  362.  
  363. }
  364.  
  365. .tags{
  366. display:inline;
  367. }
  368.  
  369. .tags a{
  370. margin:3px;
  371. }
  372.  
  373. .noted li{
  374. list-style-type:none;
  375. vertical-align:middle;
  376. text-align:justify;
  377. padding:8px;
  378. margin-left:4px;
  379. }
  380.  
  381. .noted img{
  382. border:1px solid {color:Info Border};
  383. padding:4px;
  384. vertical-align:middle;
  385. margin-right:4px;
  386. }
  387.  
  388. .credit a{
  389. position:fixed;
  390. font-size:8px;
  391. text-transform:uppercase;
  392. right:15px;
  393. bottom:15px;
  394. line-height:17px;
  395. height:16px;
  396. width:16px;
  397. text-align:center;
  398. padding:3px;
  399. background:#fff;
  400. border-radius:50%;
  401. border:1px solid transparent;
  402. -moz-transition:.8s ease-in-out;
  403. -webkit-transition:.8s ease-in-out;
  404. -o-transition:.8s ease-in-out;
  405. }
  406.  
  407. .credit a:hover{
  408. background:#000;
  409. color:#fff;
  410. border:1px solid {color:Link Hover};
  411. -moz-transition:.8s ease-in-out;
  412. -webkit-transition:.8s ease-in-out;
  413. -o-transition:.8s ease-in-out;
  414. }
  415.  
  416. {CustomCSS}
  417. </style>
  418. </head>
  419. <body>
  420.  
  421.  
  422.  
  423. <div id="navl">
  424. <a href="/"><div id="nlink">index</div></a>
  425. <div id="nlink" class="apop" style="cursor:help">about</div>
  426. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}"><div class="pagi">←</div></a>{/block:PreviousPage}{/block:Pagination}
  427. </div>
  428.  
  429.  
  430. <div id="navr">
  431. <a href="/ask"><div id="nlink">inquire</div></a>
  432. <div id="nlink" class="lpop" style="cursor:help">links</div>
  433. {block:Pagination}{block:NextPage}<a href="{NextPage}"><div class="pagi">→</div></a>{/block:NextPage}{/block:Pagination}
  434. </div>
  435.  
  436.  
  437.  
  438.  
  439.  
  440. <div class="con">
  441.  
  442.  
  443. <div class="up1" id="desc" style="display:none">
  444. <div class="words">
  445. <p>{Description}</p>
  446. </div>
  447. </div>
  448.  
  449.  
  450.  
  451. <div class="up2" id="menu" style="display:none">
  452. <div class="lmenu">
  453. <a href="{text:Link 1 URL}"><div class="mlink">{text:Link 1}</div></a>
  454. <a href="{text:Link 2 URL}"><div class="mlink">{text:Link 2}</div></a>
  455. <a href="{text:Link 3 URL}"><div class="mlink">{text:Link 3}</div></a>
  456. <a href="{text:Link 4 URL}"><div class="mlink">{text:Link 4}</div></a>
  457. <a href="{text:Link 5 URL}"><div class="mlink">{text:Link 5}</div></a>
  458. <a href="{text:Link 6 URL}"><div class="mlink">{text:Link 6}</div></a>
  459. <a href="{text:Link 7 URL}"><div class="mlink">{text:Link 7}</div></a>
  460. </div>
  461. </div>
  462.  
  463.  
  464. <div id="title">
  465. {Title}
  466. </div>
  467.  
  468.  
  469. {block:Posts}
  470. <div id="posts">
  471.  
  472.  
  473.  
  474. {block:Text}
  475. <div class="text">
  476. <h3>{block:Title}{Title}{/block:Title}</h3>
  477. {Body}
  478. </div>
  479. {/block:Text}
  480.  
  481.  
  482. {block:Quote}
  483. <div class="quote">
  484. "{Quote}"
  485. {block:Source}- Source{/block:Source}
  486. </div>
  487. {/block:Quote}
  488.  
  489.  
  490. {block:Link}
  491. <div class="link">
  492. <a href="{URL}">{Name}</a>
  493. {Description}
  494. </div>
  495. {/block:Link}
  496.  
  497.  
  498. {block:Chat}
  499. <h3>{block:Title}{Title}{/block:Title}</h3>
  500. <ul class="chat">
  501. {block:Lines}
  502. <li class="{Alt} user_{UserNumber}">
  503. {block:Label}{Label}{/block:Label}
  504. {Line}
  505. </li>
  506. {/block:Lines}
  507. </ul>
  508. {/block:Chat}
  509.  
  510.  
  511. {block:Panorama}
  512. {Panorama-500}
  513. {block:Caption}{Caption}{/block:Caption}
  514. {/block:Panorama}
  515.  
  516.  
  517. {block:Photoset}
  518. {Photoset-500}
  519. {block:Caption}{Caption}{/block:Caption}
  520. {/block:Photoset}
  521.  
  522.  
  523. {block:Photo}
  524. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  525. {block:Caption}{Caption}{/block:Caption}
  526. {/block:Photo}
  527.  
  528.  
  529. {block:Video}
  530. {Video-500}
  531. {block:Caption}{Caption}{/block:Caption}
  532. {/block:Video}
  533.  
  534.  
  535. {block:Answer}
  536. <div class="question">
  537. <div class="asker">{Asker} asked:</div>
  538. <div class="q">{Question}</div>
  539. </div>
  540. {Answer}
  541. {/block:Answer}
  542.  
  543.  
  544. {block:Audio}
  545. <div id="audio">
  546. <table style="padding:5px;margin-bottom:5px;">
  547. <tr>
  548. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  549. <div id="albumart">
  550. {block:AlbumArt}
  551. <img src="{AlbumArtURL}" style="width:60px;height:60px">
  552. {/block:AlbumArt}</div></td>
  553. <td style="vertical-align:middle; font-size:11px; line-height:12px"> {block:TrackName}<i>Title:</i> {TrackName} <br />{/block:TrackName}
  554. {block:Artist}<i>Artist:</i> {Artist} <br />{/block:Artist}
  555. {block:Album}<i>Album:</i> {Album} <br />{/block:Album}
  556. {block:PlayCount}<i>Played:</i> {FormattedPlayCount} times{/block:PlayCount}
  557. </td>
  558. </tr>
  559. </table>
  560. {block:Caption}{Caption}{/block:Caption}
  561. </div>
  562. {/block:Audio}
  563.  
  564.  
  565.  
  566. <div id="info">
  567.  
  568. {block:Date}<a href="{Permalink}">{DayofMonthWithZero}.{MonthNumberWithZero}.{Year}</a> / {NoteCountWithLabel} / <a href="{ReblogURL}">reblog</a>{/block:Date}
  569.  
  570. <span style="float:right">
  571. {block:RebloggedFrom}<a title="via" href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource}.<a title="source" href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}
  572. </span>
  573. <br>
  574. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  575.  
  576. </div>
  577.  
  578. {block:PostNotes}<div class="noted">{PostNotes}</div>{/block:PostNotes}
  579.  
  580. </div>
  581. {/block:Posts}
  582.  
  583. {block:ContentSource}
  584. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  585. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  586. {/block:SourceLogo}
  587. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  588. {/block:ContentSource}
  589.  
  590. </div>
  591.  
  592.  
  593. {block:IfShowStopBullyingLogo}
  594. <div style="bottom:40px; left:5px; width:50px; height:50px; position:fixed; display:block; z-index:9999999; background-color:transparent"><a href="http://stop-bullies.tumblr.com"><img src=" http://i43.tinypic.com/2w585e1.png" width="90"></a></div>
  595. {/block:IfShowStopBullyingLogo}
  596.  
  597.  
  598.  
  599. <div class="credit"><a title="capecoding theme" href="http://foundcas.tumblr.com">cc</a></div>
  600.  
  601.  
  602. </body>
  603. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement