API tools faq
paste
Advertisement
foundcas

Theme 13: Possibility

foundcas
Sep 27th, 2014
1,263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- Don't steal and all that jazz. Any problems just tell me and I'll try to fix it. I honestly don't care if you move the credit or change the styling to suit your tastes, just don't put it on a separate page // capecoding.tumblr.com/ask -->
  5.  
  6. <title>{Title}</title>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13. <meta name="color:Text" content="#222">
  14. <meta name="color:Link" content="#553333">
  15. <meta name="color:Hover" content="#aa8866">
  16. <meta name="color:Hover Background" content="#553333">
  17. <meta name="color:Borders" content="#fff">
  18. <meta name="color:Scrollbar Thumb" content="#e3e681">
  19. <meta name="color:Selection" content="#e3e681">
  20. <meta name="color:Selection Background" content="#aaaa99">
  21. <meta name="color:Updates Background" content="#aaaa99">
  22.  
  23. <meta name="if:ShowStopBullyingLogo" content="1">
  24. <meta name="if:Updates" content="1">
  25.  
  26. <meta name="image:Background" content="http://38.media.tumblr.com/0a77ad217328d67e97c00051be7afe33/tumblr_nb1upm4K2n1st5lhmo1_1280.jpg">
  27. <meta name="image:Sidebar" content="http://upload.wikimedia.org/wikipedia/commons/3/38/Flickr_-_Nicholas_T_-_Open_Road.jpg">
  28.  
  29. <meta name="text:Link 1" content="link 1">
  30. <meta name="text:Link 1 URL" content="url 1">
  31. <meta name="text:Link 2" content="link 2">
  32. <meta name="text:Link 2 URL" content="url 2">
  33. <meta name="text:Link 3" content="link 1">
  34. <meta name="text:Link 3 URL" content="url 3">
  35. <meta name="text:Link 4" content="link 4">
  36. <meta name="text:Link 4 URL" content="url 4">
  37.  
  38. <link href='http://fonts.googleapis.com/css?family=Open+Sans|Raleway' rel='stylesheet' type='text/css'>
  39.  
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41.  
  42. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43.  
  44. <script>
  45.  
  46. (function($){
  47.  
  48. $(document).ready(function(){
  49.  
  50. $("a[title]").style_my_tooltips({
  51.  
  52. tip_follows_cursor:true,
  53.  
  54. tip_delay_time:30,
  55.  
  56. tip_fade_speed:300,
  57.  
  58. attribute:"title"
  59.  
  60. });
  61.  
  62. });
  63.  
  64. })(jQuery);
  65.  
  66. </script>
  67.  
  68.  
  69. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  70. <script>
  71. $(document).ready(function(){
  72. $(".click").click(function(){
  73. $(".closed").toggleClass("open");
  74. });
  75. });
  76. </script>
  77.  
  78. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  79. <script>
  80. $(document).ready(function(){
  81. $(".clickme").click(function(){
  82. $(".revealed").toggleClass("cool");
  83. });
  84. });
  85. </script>
  86.  
  87. <style type="text/css">
  88.  
  89. ::selection{
  90. color:{color:Selection};
  91. background:{color:Selection Background};
  92. }
  93.  
  94. ::-webkit-scrollbar{
  95. background:none;
  96. width:4px;
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb{
  100. background:{color:Scrollbar Thumb};
  101. width:4px;
  102. }
  103.  
  104. #s-m-t-tooltip{
  105. max-width:300px;
  106. margin:15px;
  107. padding:2px 8px;
  108. border-radius:4px;
  109. background:#fff;
  110. color:#55333;
  111. z-index:999999;
  112. font-size:10px;
  113. font-style:italic;
  114. text-transform:lowercase;
  115. box-shadow:2px 2px 4px #ddd;
  116. }
  117.  
  118. pre, code {
  119. padding:10px;
  120. box-sizing:border-box;
  121. -moz-box-sizing:border-box;
  122. webkit-box-sizing:border-box;
  123. display:block;
  124. white-space: pre-wrap;
  125. white-space: -moz-pre-wrap;
  126. white-space: -pre-wrap;
  127. white-space: -o-pre-wrap;
  128. word-wrap: break-word;
  129. width:100%; overflow-x:auto;
  130. border-bottom:{color:Borders};
  131. }
  132.  
  133. h1,h2,h3,h4,h5,h6{
  134. font-family: 'Raleway', sans-serif;
  135. line-height:120%;
  136. }
  137.  
  138. blockquote{
  139. padding:3px;
  140. border-left:1px solid {color:Text};
  141. }
  142.  
  143. a{
  144. color:{color:Link};
  145. text-decoration:none;
  146. -moz-transition:all .8s ease;
  147. -webkit-transition:all .8s ease;
  148. -o-transition:all .8s ease;
  149. }
  150.  
  151. a:hover{
  152. color:{color:Hover};
  153. box-shadow:inset 0px 25px 0px{color:Hover Background};
  154. cursor:url('http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif'),auto;
  155. -moz-transition:all .8s ease;
  156. -webkit-transition:all .8s ease;
  157. -o-transition:all .8s ease;
  158. }
  159.  
  160. body{
  161. cursor:url('http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'),auto;
  162. font-family: 'Open Sans', sans-serif;
  163. font-size:11px;
  164. color:{color:Text};
  165. line-height:110%;
  166. word-wrap:break-word;
  167. }
  168.  
  169. html {
  170. background: url('{image:Background}') no-repeat center center fixed;
  171. -webkit-background-size: cover;
  172. -moz-background-size: cover;
  173. -o-background-size: cover;
  174. background-size: cover; }
  175.  
  176. #summertime{
  177. position:fixed;
  178. margin-left:200px;
  179. width:380px;
  180. margin-top:150px;
  181. -moz-transition:all .8s ease;
  182. -webkit-transition:all .8s ease;
  183. -o-transition:all .8s ease;
  184. }
  185.  
  186. #summertime:hover #title{
  187. letter-spacing:4px;
  188. -moz-transition:all .8s ease;
  189. -webkit-transition:all .8s ease;
  190. -o-transition:all .8s ease;
  191. }
  192.  
  193. #title{
  194. text-align:right;
  195. font-size:20px;
  196. font-weight:bold;
  197. font-family: 'Raleway', sans-serif;
  198. margin-top:20px;
  199. -moz-transition:all .8s ease;
  200. -webkit-transition:all .8s ease;
  201. -o-transition:all .8s ease;
  202. }
  203.  
  204. .nav{
  205. font-size:11px;
  206. font-style:italic;
  207. text-align:right;
  208. float:right;
  209. margin-top:15px;
  210. margin-left:150px;
  211. }
  212.  
  213. .nav a{
  214. padding:2px;
  215. }
  216.  
  217. .desc{
  218. margin-top:10px;
  219. float:right;
  220. text-align:right;
  221. padding:5px;
  222. font-size:11px;
  223. width:150px;
  224. max-height:60px;
  225. overflow-y:auto;
  226. }
  227.  
  228. #snapshot{
  229. margin-left:30px;
  230. -moz-transition:all .8s ease;
  231. -webkit-transition:all .8s ease;
  232. -o-transition:all .8s ease;
  233. -webkit-filter:grayscale(.6) blur(2px) brightness(1.2) sepia(0.4);
  234. position:absolute;
  235. ms-transform: scale(.5,.5); /* IE 9 */
  236. -webkit-transform: scale(.5,.5); /* Chrome, Safari, Opera */
  237. transform: scale(.5,.5);
  238. }
  239.  
  240. #summertime:hover #snapshot{
  241. -moz-transition:all .8s ease;
  242. -webkit-transition:all .8s ease;
  243. -o-transition:all .8s ease;
  244. -webkit-filter:none;
  245. ms-transform: scale(1,1); /* IE 9 */
  246. -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
  247. transform: scale(1,1);
  248. }
  249.  
  250. #snapshot img{
  251. border-radius:100%;
  252. width:150px;
  253. height:150px;
  254. -moz-transition:all .8s ease;
  255. -webkit-transition:all .8s ease;
  256. -o-transition:all .8s ease;
  257. }
  258.  
  259. #map{
  260. margin-top:100px;
  261. margin-left:600px;
  262. width:450px;
  263. height:450px;
  264. overflow-y:auto;
  265. overflow-x:hidden;
  266. border:3px solid {color:Borders};
  267. background:rgba(170, 136, 102,.4);
  268. }
  269.  
  270. #road{
  271. margin-bottom:30px;
  272. margin-left:10px;
  273. padding:15px;
  274. width:400px;
  275. }
  276.  
  277. .pagi{
  278. margin-bottom:-1px;
  279. font-family:'Raleway', sans-serif;
  280. font-size:20px;
  281. text-align:center;
  282. }
  283.  
  284. .chat li{
  285. list-style-type:none;
  286. margin-left:-40px;
  287. border-bottom:2px solid {color:Borders};
  288. padding-top:6px;
  289. padding-bottom:6px;
  290. }
  291.  
  292. .quo{
  293. text-align:center;
  294. font-size:15px;
  295. }
  296.  
  297. .src{
  298. margin-top:10px;
  299. font-size:13px;
  300. font-style:italic;
  301. text-align:center;
  302. }
  303.  
  304. #audioplayer {
  305. width:30px;
  306. height:30px;
  307. overflow:hidden;
  308. position:absolute;
  309. margin-top:17px;
  310. margin-left:17px;
  311. z-index:9;
  312. border-radius:100%;
  313. }
  314.  
  315. #albumart {
  316. width:60px;
  317. height:60px;
  318. background-color:#a8a8a8;
  319. }
  320.  
  321. .asker{
  322. margin-top:20px;
  323. font-size:20px;
  324. font-weight:bold;
  325. text-align:center;
  326. font-family: 'Raleway', sans-serif;
  327. }
  328.  
  329. .a{
  330. padding:10px;
  331. }
  332.  
  333. .arrow_box {
  334. margin-top:20px;
  335. position: relative;
  336. background: {color:Updates Background};
  337. border: 4px solid {color:Borders};
  338. padding:10px;
  339. }
  340. .arrow_box:after, .arrow_box:before {
  341. bottom: 100%;
  342. left: 50%;
  343. border: solid transparent;
  344. content: " ";
  345. height: 0;
  346. width: 0;
  347. position: absolute;
  348. pointer-events: none;
  349. }
  350.  
  351. .arrow_box:after {
  352. border-color: rgba(136, 183, 213, 0);
  353. border-bottom-color: {color:Updates Background};
  354. border-width: 10px;
  355. margin-left: -10px;
  356. }
  357. .arrow_box:before {
  358. border-color: rgba(194, 225, 245, 0);
  359. border-bottom-color: {color:Borders};
  360. border-width: 16px;
  361. margin-left: -16px;
  362. }
  363.  
  364. .sun{
  365. font-family: 'Raleway', sans-serif;
  366. margin-bottom:5px;
  367. padding-bottom:5px;
  368. border-bottom:3px solid {color:Borders};
  369. font-size:14px;
  370. font-weight:600;
  371. opacity:0;
  372. -moz-transition:all .8s ease;
  373. -webkit-transition:all .8s ease;
  374. -o-transition:all .8s ease;
  375. }
  376.  
  377. #road:hover .sun{
  378. opacity:1;
  379. -moz-transition:all .8s ease;
  380. -webkit-transition:all .8s ease;
  381. -o-transition:all .8s ease;
  382. }
  383.  
  384. .tags{
  385. font-size:10px;
  386. margin-top:5px;
  387. font-style:italic;
  388. opacity:0;
  389. -moz-transition:all .8s ease;
  390. -webkit-transition:all .8s ease;
  391. -o-transition:all .8s ease;
  392. }
  393.  
  394. #road:hover .tags{
  395. opacity:1;
  396. -moz-transition:all .8s ease;
  397. -webkit-transition:all .8s ease;
  398. -o-transition:all .8s ease;
  399. }
  400.  
  401. #noted li{
  402. padding:4px;
  403. vertical-align:middle;
  404. }
  405.  
  406. #noted img{
  407. padding:4px;
  408. vertical-align:middle;
  409. width:16px;
  410. height:16px;
  411. border-radius:100%;
  412. }
  413.  
  414. {block:ifUpdates}
  415. .closed {
  416. opacity:0;
  417. width:0;
  418. -webkit-transition:all 0.6s;
  419. -moz-transition:all 0.3s;
  420. -ms-transition:all 0.6s;
  421. -o-transition:all 0.6s;
  422. transition:all 0.6s;
  423. }
  424.  
  425. .open {
  426. opacity:1;
  427. width:150px;
  428. padding-left:10px;
  429. padding-right:10px;
  430. -webkit-transition:all 0.6s;
  431. -moz-transition:all 0.3s;
  432. -ms-transition:all 0.6s;
  433. -o-transition:all 0.6s;
  434. transition:all 0.6s;
  435. }
  436.  
  437. #popup {
  438. height:35%;
  439. margin-left:50px;
  440. top:195px;
  441. position:fixed;
  442. background-color:{color:Updates Background};
  443. color:#222;
  444. line-height:120%;
  445. overflow-y:auto;
  446. padding-top:10px;
  447. }
  448.  
  449. #menulink{
  450. font-family: 'Raleway', sans-serif;
  451. position:fixed;
  452. font-weight:bold;
  453. font-size:30px;
  454. margin-top:100px;
  455. margin-left:10px;
  456. -webkit-transition:all 0.6s;
  457. -moz-transition:all 0.3s;
  458. -ms-transition:all 0.6s;
  459. -o-transition:all 0.6s;
  460. transition:all 0.6s;
  461. }
  462. {/block:ifUpdates}
  463.  
  464.  
  465. .credit {
  466. right:10px;
  467. bottom:10px;
  468. font-size:12px;
  469. text-transform:uppercase;
  470. text-align:center;
  471. position:fixed;
  472. padding:5px;
  473. -webkit-transition: all 0.8s ease;
  474. -moz-transition: all 0.8s ease;
  475. -o-transition: all 0.8s ease;
  476. }
  477.  
  478. .credit a:hover {
  479. -webkit-transition: all 0.8s ease;
  480. -moz-transition: all 0.8s ease;
  481. -o-transition: all 0.8s ease;
  482. color:#444;
  483. border-radius:100%;
  484. }
  485.  
  486.  
  487. {CustomCSS}
  488. </style>
  489.  
  490. </head>
  491. <body>
  492.  
  493.  
  494.  
  495. {block:ifUpdates}
  496. <div id="popup" class="closed">
  497.  
  498. <div style="border:1px solid #fff;font-size:13px;text-transform:uppercase;padding:3px;text-align:center;font-family: 'Raleway', sans-serif;font-weight:bold">
  499. subtitle</div>
  500.  
  501. updates <br>
  502. updates <br>
  503. updates <br>
  504.  
  505. <div style="border:1px solid #fff;font-size:13px;text-transform:uppercase;padding:3px;text-align:center;font-family: 'Raleway', sans-serif;font-weight:bold">
  506. subtitle</div>
  507.  
  508. updates <br>
  509. updates <br>
  510. updates <br>
  511.  
  512. </div>
  513.  
  514.  
  515.  
  516.  
  517. <div id="menulink">
  518. <div class="click" style="cursor:help;">
  519. u<br><br><br>
  520. p<br><br><br>
  521. d<br><br><br>
  522. a<br><br><br>
  523. t<br><br><br>
  524. e<br><br><br>
  525. s<br><br>
  526. </div>
  527. </div>
  528. {/block:ifUpdates}
  529.  
  530.  
  531. <div id="summertime">
  532.  
  533. <div id="snapshot"><img src="{image:Sidebar}"></div>
  534.  
  535. <div id="title">{Title}</div>
  536. <div class="nav">
  537.  
  538. <a href="/">refresh</a>
  539. <a href="/msg">msg</a>
  540. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  541. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  542. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  543. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  544.  
  545. </div>
  546. <div class="desc">{Description}</div>
  547.  
  548. </div>
  549.  
  550.  
  551. <div id="map">
  552. {block:Posts}
  553. <div id="road">
  554.  
  555. <div class="sun">
  556. {block:Date}<a title="{DayofMonthWithZero}.{MonthNumberWithZero}.{ShortYear}" href="{Permalink}">summer time</a>{/block:Date}
  557. /
  558. {block:NoteCount}{NoteCountWithLabel}{block:NoteCount}
  559. /
  560. <a href="{ReblogURL}">reblog</a>
  561.  
  562. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{block:HasTags}
  563. </div>
  564.  
  565.  
  566. {block:Text}
  567. {block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
  568. {Body}
  569. {/block:Text}
  570.  
  571.  
  572. {block:Link}
  573. <a href="{URL}"><h1>{Name}</h1></a>
  574. {block:Description}{Description}{/block:Description}
  575. {/block:Link}
  576.  
  577.  
  578. {block:Quote}
  579. <div class="quo">"{Quote}"</div>
  580. {block:Source}<div class="src">{Source}</div>{/block:Source}
  581. {/block:Quote}
  582.  
  583.  
  584. {block:Chat}
  585. {block:Title}<h1>{Title}</h1>{/block:Title}
  586. <ul class="chat">{block:Lines}
  587. <li class="{Alt} user_{UserNumber}">
  588. {block:Label}<span class="label">{Label}</span>{/block:Label}{Line}
  589. </li>
  590. {/block:Lines}
  591. </ul>
  592. {/block:Chat}
  593.  
  594.  
  595. {block:Photoset}
  596. {Photoset-400}
  597. {block:Caption}{Caption}{/block:Caption}
  598. {/block:Photoset}
  599.  
  600.  
  601. {block:Photo}
  602. <img src="{PhotoURL-400}">
  603. {block:Caption}{Caption}{/block:Caption}
  604. {/block:Photo}
  605.  
  606.  
  607. {block:Video}
  608. {Video-400}
  609. {block:Caption}{Caption}{/block:Caption}
  610. {/block:Video}
  611.  
  612.  
  613. {block:Audio}
  614. <div id="audio">
  615. <table style="padding:5px;margin-bottom:5px;">
  616. <tr>
  617. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  618. <div id="albumart">
  619. {block:AlbumArt}
  620. <img src="{AlbumArtURL}" style="width:60px;height:60px">
  621. {/block:AlbumArt}</div></td>
  622. <td style="vertical-align:middle; font-size:11px; line-height:12px"> {block:TrackName}<i>Title:</i> {TrackName} <br />{/block:TrackName}
  623. {block:Artist}<i>Artist:</i> {Artist} <br />{/block:Artist}
  624. {block:Album}<i>Album:</i> {Album} <br />{/block:Album}
  625. {block:PlayCount}<i>Played:</i> {FormattedPlayCount} times{/block:PlayCount}
  626. </td>
  627. </tr>
  628. </table>
  629. {block:Caption}{Caption}{/block:Caption}
  630. </div>
  631. {/block:Audio}
  632.  
  633.  
  634. {block:Answer}
  635. <div class="asker">{Asker}</div>
  636. <div class="arrow_box">"{Question}?"</div>
  637. <div class=".">{Answer}</div>
  638. {/block:Answer}
  639.  
  640.  
  641. {block:PostNotes}<div id="noted">{PostNotes}</div>{/block:PostNotes}
  642.  
  643. </div>
  644. {/block:Posts}
  645.  
  646. <div class="pagi">
  647. {block:Pagination}
  648. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  649. -
  650. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  651. {/block:Pagination}
  652. </div>
  653.  
  654. </div>
  655.  
  656. {block:IfShowStopBullyingLogo}
  657. <div style="bottom:30px; left:30px; width:auto; height:auto; 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"></div>
  658. {/block:IfShowStopBullyingLogo}
  659.  
  660. <div class="credit"><a title="credit" href="http://foundcas.tumblr.com">sunsets</a>
  661.  
  662. </body>
  663. </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!