API tools faq
paste
Advertisement
foundcas

Theme 22: στοργή

foundcas
Jul 10th, 2015
398
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5.  
  6. <!--
  7.  
  8. THEME 22 BY FOUNDCAS/CAPECODING
  9. - If you have any questions or experience troubles send a message to http://capecoding.tumblr.com/ask
  10. - Do not remove the credit
  11. - Do not use this as a base code
  12.  
  13. -->
  14.  
  15.  
  16. <title>{TItle}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  20.  
  21. <meta charset="utf-8">
  22. <meta name="viewport" content="width=device-width, initial-scale=1">
  23. <meta name="color:Borders" content="#f2f2f2">
  24. <meta name="color:Header Border" content="#ddd">
  25. <meta name="color:Text" content="#333">
  26. <meta name="color:Link" content="#999">
  27. <meta name="color:Link Hover" content="#999">
  28. <meta name="color:Scrollbar" content="#fff">
  29. <meta name="color:Scrollbar Background" content="#333">
  30. <meta name="color:Selection" content="#fff">
  31. <meta name="color:Selection Background" content="#333">
  32. <meta name="color:Tooltips" content="#fff">
  33. <meta name="color:Tooltips Background" content="#999">
  34. <meta name="color:Tooltips Border" content="#ddd">
  35.  
  36. <meta name="image:Background" content="https://ununsplash.imgix.net/photo-1424020128429-a60765861de1?fit=crop&fm=jpg&h=700&q=75&w=1050">
  37.  
  38. <meta name="if:Updates" content="1">
  39. <meta name="if:ShowStopBullyingLogo" content="1">
  40.  
  41. <meta name="text:Link 1" content="link 1">
  42. <meta name="text:URL 1" content="link 1 url">
  43. <meta name="text:Link 2" content="link 2">
  44. <meta name="text:URL 2" content="link 2 url">
  45. <meta name="text:Updates 1"content="<u>underline</u> <a>link</a> <i>italic</i> <b>bold</b>">
  46. <meta name="text:Updates 2" content="you can write your updates in the customize window or choose to not have this section at all">
  47. <meta name="text:Updates 3" content="there are three different text boxes to fill in, but you don't have to use them all, it's just to avoid clutter">
  48.  
  49. <!-- Latest compiled and minified CSS -->
  50. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  51.  
  52. <!-- jQuery library -->
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  54.  
  55. <!-- Latest compiled JavaScript -->
  56. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  57.  
  58. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  59.  
  60. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  61.  
  62. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  63.  
  64. <script>
  65.  
  66. (function($){
  67.  
  68. $(document).ready(function(){
  69.  
  70. $("[title]").style_my_tooltips({
  71.  
  72. tip_follows_cursor:true,
  73.  
  74. tip_delay_time:30,
  75.  
  76. tip_fade_speed:300,
  77.  
  78. attribute:"title"
  79.  
  80. });
  81.  
  82. });
  83.  
  84. })(jQuery);
  85.  
  86. </script>
  87.  
  88. <script>
  89. $(document).ready(function(){
  90. $('.cape').click(function(){
  91. $('.theseas').fadeIn();
  92. });
  93. $('.storm').click(function(){
  94. $('.theseas').fadeOut();
  95. });
  96. });
  97. </script>
  98.  
  99. <style>
  100. #s-m-t-tooltip{
  101. position:absolute;
  102. max-width:300px;
  103. margin:20px;
  104. padding:2px 8px;
  105. border:1px solid {color:Tooltips Border};
  106. background:{color:Tooltips Background};
  107. color:{color:Tooltips};
  108. z-index:999999999;
  109. font-size:8px;
  110. text-transform:uppercase;
  111. }
  112.  
  113. #tumblr_controls{
  114. position:fixed !important;
  115. margin-top:60px;
  116. right:5px !important;
  117. }
  118.  
  119.  
  120. ::-webkit-scrollbar{
  121. background:{color:Scrollbar Background};
  122. width:4px;
  123. }
  124.  
  125. ::-webkit-scrollbar-thumb{
  126. background:{color:Scrollbar};
  127. width:4px;
  128. height:auto;
  129. }
  130.  
  131. ::selection{
  132. background:{color:Selection Background};
  133. color:{color:Selection};
  134. }
  135.  
  136. #tumblr_controls{
  137. position:fixed !important;
  138. margin-top:60px;
  139. right:60px !important;
  140. -webkit-filter: invert(100%);
  141. }
  142.  
  143. blockquote{
  144. margin-top:5px;
  145. padding:4px;
  146. border-left:4px solid {color:Text};
  147. background:{color:Borders};
  148. border-radius:5px;
  149. }
  150.  
  151. a{
  152. color:{color:Link};
  153. text-decoration:none;
  154. }
  155.  
  156. a:hover{
  157. color:{color:Link Hover};
  158. -moz-transition:.8s ease;
  159. -o-transition:.8s ease;
  160. -webkit-transition:.8s ease;
  161. transition:.8s ease;
  162. }
  163.  
  164. body{
  165. color:{color:Text};
  166. background: url('{image:Background}') no-repeat center center fixed;
  167. -webkit-background-size: cover;
  168. -moz-background-size: cover;
  169. -o-background-size: cover;
  170. background-size: cover;
  171. }
  172.  
  173.  
  174. .navbar{
  175. border-bottom:1px solid {color:Header Border};
  176. background:{color:Borders};
  177. }
  178.  
  179. .navbar-brand{
  180. text-transform:uppercase;
  181. letter-spacing:5px;
  182. }
  183.  
  184. .desc{
  185. padding:10px;
  186. letter-spacing:1px;
  187. border:none;
  188. border-radius:0px;
  189. background:{color:Borders};
  190. }
  191.  
  192. .theseas{
  193. position:fixed;
  194. bottom:0px;
  195. left:0px;
  196. height:93%;
  197. width:100%;
  198. background:url('{image:Background}');
  199. background-repeat:no-repeat;
  200. background-size:cover;
  201. z-index:9999999;
  202. }
  203.  
  204. .stolen{
  205. font-size:70px;
  206. text-align:center;
  207. text-shadow:2px 2px 2px {color:Link};
  208. text-transform:uppercase;
  209. padding:5px;
  210. height:20%;
  211. background:rgba(255,255,255,.2);
  212. -webkit-transition: all .8s ease;
  213. -moz-transition: all .8s ease;
  214. -o-transition: all .8s ease;
  215. }
  216.  
  217. .dreams{
  218. text-align:center;
  219. padding:50px;
  220. height:65%;
  221. font-size:20px;
  222. line-height:150%;
  223. letter-spacing:1px;
  224. word-spacing:1px;
  225. overflow-y:auto;
  226. overflow-x:hidden;
  227. background:rgba(255,255,255,.35);
  228. }
  229.  
  230. .roar{
  231. display:table;
  232. margin-left:auto;
  233. margin-right:auto;
  234. text-align:center;
  235. width:100%;
  236. height:85%;
  237. }
  238.  
  239. .roar p{
  240. display: table-cell;
  241. text-align: center;
  242. vertical-align: middle;
  243. padding:20px;
  244. }
  245.  
  246. .storm{
  247. height:15%;
  248. padding-top:25px;
  249. text-align:center;
  250. font-size:30px;
  251. background:rgba(255,255,255,.3);
  252. }
  253.  
  254. .fa-code{
  255. font-weight:900;
  256. }
  257.  
  258. #l{
  259. position:fixed;
  260. left:0px;
  261. height:1000%;
  262. width:50px;
  263. background:{color:Borders};
  264. z-index:9;
  265. }
  266.  
  267. #r{
  268. position:fixed;
  269. right:0px;
  270. height:1000%;
  271. width:50px;
  272. background:{color:Borders};
  273. z-index:9;
  274. }
  275.  
  276. #b{
  277. position:fixed;
  278. bottom:0px;
  279. height:50px;
  280. width:1000%;
  281. background:{color:Borders};
  282. z-index:9;
  283. }
  284.  
  285. article{
  286. background:rgba(255,255,255,.3);
  287. border:1px solid {color:Borders};
  288. padding:15px;
  289. margin-top:150px;
  290. margin-bottom:100px;
  291. }
  292.  
  293. .pset,.ph{
  294. -webkit-filter:grayscale(.9);
  295. -moz-transition:.8s ease;
  296. -o-transition:.8s ease;
  297. -webkit-transition:.8s ease;
  298. transition:.8s ease;
  299. }
  300.  
  301. article:hover .pset,.ph{
  302. -webkit-filter:grayscale(0);
  303. -moz-transition:.8s ease;
  304. -o-transition:.8s ease;
  305. -webkit-transition:.8s ease;
  306. transition:.8s ease;
  307. }
  308.  
  309. .qt{
  310. float:left;
  311. font-size:70px;
  312. font-weight:bold;
  313. }
  314.  
  315. .quote{
  316. margin-left:50px;
  317. border-left:4px solid {color:Borders};
  318. padding:5px;
  319. }
  320.  
  321. .chat li{
  322. margin-left:-40px;
  323. list-style-type:none;
  324. }
  325.  
  326. .question{
  327. text-align:center;
  328. background:rgba(255,255,255,.4);
  329. }
  330.  
  331. .info{
  332. text-align:left;
  333. font-size:11px;
  334. margin-top:5px;
  335. padding:5px;
  336. text-transform:uppercase;
  337. word-spacing:5px;
  338. background:rgba(255,255,255,.5);
  339. {block:IndexPage}
  340. opacity:0;
  341. {/block:IndexPage}
  342. -moz-transition:.8s ease;
  343. -o-transition:.8s ease;
  344. -webkit-transition:.8s ease;
  345. transition:.8s ease;
  346. }
  347.  
  348. article:hover .info{
  349. opacity:1;
  350. -moz-transition:.8s ease;
  351. -o-transition:.8s ease;
  352. -webkit-transition:.8s ease;
  353. transition:.8s ease;
  354. }
  355.  
  356. .tags{
  357. font-size:10px;
  358. word-spacing:1px;
  359. text-transform:lowercase;
  360. }
  361.  
  362. .oed li{
  363. margin-left:-40px;
  364. list-style-type:none;
  365. padding:6px;
  366. border-bottom:1px solid {color:Borders};
  367. }
  368.  
  369. .oed img{
  370. display:none;
  371. }
  372.  
  373. {CustomCSS}
  374. </style>
  375.  
  376. <style>
  377. .my-like {
  378. cursor:pointer;
  379. display:inline-block;
  380. vertical-align:top;
  381. }
  382. .my-liked, .my-like:hover {
  383. color: red;
  384. cursor:pointer;
  385. display:inline-block;
  386. vertical-align:top;
  387. }
  388. </style>
  389. <script>
  390. window.onload = function () {
  391. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  392. document.addEventListener( 'click', function ( event ) {
  393. var myLike = event.target;
  394. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  395. var frame = document.getElementById( 'my-like-frame' ),
  396. liked = ( myLike.className == 'my-liked' ),
  397. command = liked ? 'unlike' : 'like',
  398. reblog = myLike.getAttribute( 'data-reblog' ),
  399. id = myLike.getAttribute( 'data-id' ),
  400. oauth = reblog.slice( -8 );
  401. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  402. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  403. };
  404. }, false );
  405. };
  406. </script>
  407.  
  408. </head>
  409. <body>
  410.  
  411. <div class="container-fluid">
  412. <div id="l"></div>
  413. <div id="r"></div>
  414. <div id="b"></div>
  415. </div>
  416.  
  417. <nav class="navbar navbar-default navbar-fixed-top">
  418. <div class="container-fluid">
  419. <div class="navbar-header">
  420. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  421. <span class="icon-bar"></span>
  422. <span class="icon-bar"></span>
  423. <span class="icon-bar"></span>
  424. </button>
  425. <span class="navbar-brand ">{Title}</span>
  426. </div>
  427. <div class="collapse navbar-collapse links navbar-right" id="myNavbar">
  428. <ul class="nav navbar-nav">
  429. <li>
  430. {block:Pagination}
  431. {block:PreviousPage}
  432. <li><a title="prev" href="{PreviousPage}"><i class="fa fa-arrow-left"></i></a></li>
  433. {/block:PreviousPage}
  434. {/block:Pagination}
  435. </li>
  436. <li><a title="index" href="/"><span class="glyphicon glyphicon-refresh"></i></a></li>
  437.  
  438. <li class="dropdown">
  439. <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="description" href="#"><span class="glyphicon glyphicon-pencil"></span><span class="caret"></span></a>
  440. <ul class="dropdown-menu desc" role="menu">
  441. <li>{Description}</li>
  442. </ul>
  443.  
  444. <!--these are the navigation links-->
  445. <li><a title="contact" href="/ask"><span class="glyphicon glyphicon-envelope"></span></a></li>
  446. <li><a title="{text:Link 1}" href="{text:URL 1}"><span class="glyphicon glyphicon-list-alt"></span></a></li>
  447. <li><a title="{text:Link 2}" href="{text:URL 2}"><span class="glyphicon glyphicon-screenshot"></span></a></li>
  448. <li><a class="cape" title="more"><span class="glyphicon glyphicon-folder-open"></span></a></li>
  449. <li><a title="archive" href="/archive"><span class="glyphicon glyphicon-folder-close"></span></a></li>
  450. <li><a title="theme by cape code" href="http://capecoding.tumblr.com"><i class="fa fa-code"></i></a></li>
  451. {block:Pagination}
  452. {block:NextPage}
  453. <li><a title="next" href="{NextPage}"><i class="fa fa-arrow-right"></i></a></li>
  454. {/block:NextPage}
  455. {/block:Pagination}
  456. </ul>
  457. </div>
  458. </div>
  459. </nav>
  460.  
  461.  
  462.  
  463. {block:ifUpdates}
  464. <div class="theseas" style="display:none">
  465. <div class="stolen">updates</div>
  466.  
  467. <div class="dreams">
  468.  
  469. <div class="roar">
  470.  
  471. <p>
  472. {text:Updates 1}<br>
  473. {text:Updates 2}<br>
  474. {text:Updates 3}
  475. </p>
  476.  
  477. </div>
  478. </div>
  479. <div class="storm">close</div>
  480. </div>
  481.  
  482. {/block:ifUpdates}
  483.  
  484.  
  485. <div class="container-fluid">
  486. <div class="row col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
  487.  
  488. {block:Posts}
  489. <article>
  490.  
  491. {block:Text}
  492. {block:Title}<h3>{Title}</h3>{/block:Title}
  493. {Body}
  494. {/block:Text}
  495.  
  496. {block:Link}
  497. <a href="{URL}">{Name}</a>
  498. {block:Description}{Description}{/block:Description}
  499. {/block:Link}
  500.  
  501. {block:Quote}
  502. <div class="qt">&#147;</div>
  503. <div class="quote">
  504. {Quote} <br> {block:Source}- {Source}{/block:Source}
  505. </div>
  506. {/block:Quote}
  507.  
  508. {block:Chat}
  509. {block:Title}<h3>{Title}</h3>{/block:Title}
  510. <ul class="chat">
  511. {block:Lines}
  512. <li class="{Alt} user_{UserNumber}">
  513. {block:Label}<span class="label">{Label}</span>{/block:Label}{Line}
  514. </li>
  515. {/block:Lines}
  516. </ul>
  517. {/block:Chat}
  518.  
  519. {block:Photo}
  520. <img class="ph" src="{PhotoURL-HighRes}" width="100%">
  521. {block:Caption}{Caption}{/block:Caption}
  522. {/block:Photo}
  523.  
  524. {block:Photoset}
  525. <div class="pset">
  526. {Photoset}
  527. </div>
  528. {block:Caption}{Caption}{/block:Caption}
  529. {/block:Photoset}
  530.  
  531. {block:Video}
  532. {Video}
  533. {block:Caption}{Caption}{/block:Caption}
  534. {/block:Video}
  535.  
  536. {block:Audio}
  537. {block:AlbumArt}<img src="{AlbumArtURL}" style="width:100px;height:100px" >{/block:AlbumArt}
  538. <div id="audio">{AudioPlayerBlack}</div>
  539. {block:TrackName}{TrackName}{/block:TrackName}<br>
  540. {block:Artist}{Artist}{/block:Artist}<br>
  541. {block:PlayCount}{FormattedPlayCount}{/block:PlayCount}
  542. <br>
  543. {block:Caption}{Caption}{/block:Caption}
  544. {/block:Audio}
  545.  
  546. {block:Answer}
  547. <div class="question"><div class="asker">{Asker} inquired:</div> {Question}</div>
  548. <div class="response">{Answer}</div>
  549. {/block:Answer}
  550.  
  551.  
  552. <div class="info">
  553. {block:Date}
  554. <a href="{Permalink}" title="posted: {MonthNumber}.{DayofMonth}.{Year}"><span class="glyphicon glyphicon-calendar"></span></a>
  555. {/block:Date}
  556. {block:NoteCount}
  557. <a title="{NoteCountWithLabel}"><span class="glyphicon glyphicon-paperclip"></span></a>
  558. {/block:NoteCount}
  559. {block:RebloggedFrom}
  560. <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>
  561. {block:ContentSource}
  562. <a title="{ReblogRootName}" href="{ReblogRootURL}">src</a>
  563. {/block:ContentSource}
  564. {/block:RebloggedFrom}
  565.  
  566. <span style="float:right">
  567. <div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"><span class="glyphicon glyphicon-heart"></span></div> / <a title="reblog" href="{ReblogURL}"><span class="glyphicon glyphicon-retweet"></span></a>
  568. </span>
  569.  
  570. {block:HasTags}
  571. <div class="tags">
  572. {block:Tags}
  573. <a href="{TagURL}">#{Tag} </a>
  574. {/block:Tags}
  575. </div>
  576. {/block:HasTags}
  577. </div>
  578.  
  579. <div class="oed">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  580.  
  581. </article>
  582. {block:Posts}
  583.  
  584. {block:ContentSource}
  585. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  586. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  587. {/block:SourceLogo}
  588. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  589. {/block:ContentSource}
  590.  
  591. </div>
  592. </div>
  593.  
  594. {block:IfShowStopBullyingLogo}
  595. <div style="bottom:50px; left:50px; width:auto; height:auto; position:fixed; display:block; background-color:transparent"><a href="http://stop-bullies.tumblr.com"><img src=" http://i43.tinypic.com/2w585e1.png" width="90"></a></div>
  596. {/block:IfShowStopBullyingLogo}
  597.  
  598. </body>
  599. </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!