micastruli

Theme 2 | For Maria

Jun 8th, 2015
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.19 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. Theme: Base sidebar by Build Themes
  6. Base code: Build Themes (http://buildthemes.tumblr.com/code/base-sidebar)
  7. Version: 1.4
  8. -->
  9.  
  10. <link href='http://fonts.googleapis.com/css?family=Butterfly+Kids|Niconne|Pompiere|Linden+Hill:400,400italic' rel='stylesheet' type='text/css'>
  11.  
  12. <meta name="color:Background" content="#369fa0" />
  13. <meta name="color:Body links" content="#615151" />
  14. <meta name="color:Body text" content="#1d1818" />
  15. <meta name="color:Text highlight" content="#d83e3e" />
  16. <meta name="font:Body" content='Calibri, Candara, Segoe'/>
  17. <meta name="if:Infinite scroll" content="1"/>
  18. <meta name="image:Background" content="" />
  19. <meta name="text:Font size" content='0.8em'/>
  20. <meta name="text:Post margin" content='5px'/>
  21. <meta name="text:Post width" content='400px'/>
  22. {block:Description}
  23. <meta name="description" content="{MetaDescription}" />
  24. {/block:Description}
  25. <meta charset="utf-8">
  26. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  27. <title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30.  
  31. <!--SIDEBAR CUSTOMIZATION -->
  32. <meta name="color:Sidebar Background" content="#f3f3e9" />
  33. <meta name="color:Sidebar Border" content="" />
  34. {block:IfQuote1}
  35. <meta name="if:Quote 1" content="1" />
  36. <meta name="text:Quote 1" content="I have hated words and I have loved them, and I hope I have made them right." />
  37. <meta name="text:Quote 1 Source" content="markus zuzak" />
  38. {/block:IfQuote1}
  39. <meta name="if:Quote 2" content="1" />
  40. {block:IfQuote2}
  41. <meta name="text:Quote 2" content="There’s quite a difference, isn’t there, between what was and what should have been. There’s an awful lot of one but there’s an infinity of the other." />
  42. <meta name="text:Quote 2 Source" content="doctor who" />
  43. {/block:IfQuote2}
  44. <meta name="if:Quote 3" content="1" />
  45. {block:IfQuote3}
  46. <meta name="text:Quote 3" content="The lone wolf dies but the pack survives" />
  47. <meta name="text:Quote 3 Source" content="game of thrones" />
  48. {/block:IfQuote3}
  49. <meta name="if:Quote 4" content="1" />
  50. {block:IfQuote4}
  51. <meta name="text:Quote 4" content="It is our choices, Harry, That show what we truly are, far more than our abilities." />
  52. <meta name="text:Quote 4 Source" content="harry potter" />
  53. {/block:IfQuote4}
  54. <meta name="if:Quote 5" content="1" />
  55. {block:IfQuote5}
  56. <meta name="text:Quote 5" content="The monsters of the mind are far worse than those that actually exist." />
  57. <meta name="text:Quote 5 Source" content="brisingr" />
  58. {/block:IfQuote5}
  59. <meta name="if:Quote 6" content="1" />
  60. {block:IfQuote6}
  61. <meta name="text:Quote 6" content="Friendship is born at that moment when one person says to another: What! You too? I thought I was the only one." />
  62. <meta name="text:Quote 6 Source" content="c.s. lewis" />
  63. {/block:IfQuote6}
  64. <meta name="if:Quote 7" content="1" />
  65. {block:IfQuote7}
  66. <meta name="text:Quote 7" content="Le vent se lève! … il faut tenter de vivre!" />
  67. <meta name="text:Quote 7 Source" content="the wind rises" />
  68. {/block:IfQuote7}
  69. <!-- NAVIGATION CUSTOMIZATION -->
  70. <meta name="image:Side Picture" content="https://s3.amazonaws.com/teepublicuploadsproduction/uploads/MaskMockupTee_59639c16-1e9a-4682-9850-2ced37bdac51_display.png" />
  71. <meta name="color:Tooltip Background" content="#f3f3e9" />
  72. <meta name="color:Tooltip Border" content="#dbdbd2" />
  73. <meta name="color:Tooltip Font Color" content="#61615d" />
  74. <meta name="text:Link 1" content="/"/>
  75. <meta name="text:Link 1 Name" content="a link"/>
  76. <meta name="text:Link 2" content="/"/>
  77. <meta name="text:Link 2 Name" content="a link"/>
  78. <meta name="text:Link 3" content="/"/>
  79. <meta name="text:Link 3 Name" content="a link"/>
  80. <meta name="text:Link 4" content="/"/>
  81. <meta name="text:Link 4 Name" content="a link"/>
  82. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  83.  
  84.  
  85. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  86.  
  87. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  88.  
  89. <script>
  90.  
  91. (function($){
  92.  
  93. $(document).ready(function(){
  94.  
  95. $("a[title]").style_my_tooltips({
  96.  
  97. tip_follows_cursor:true,
  98.  
  99. tip_delay_time:90,
  100.  
  101. tip_fade_speed:600,
  102.  
  103. attribute:"title"
  104.  
  105. });
  106.  
  107. });
  108.  
  109. })(jQuery);
  110.  
  111. </script>
  112. <!--bubble tooltip from tutorial-baby! Enjoy-->
  113.  
  114. <!-- LAZY LOAD SCRIPT -->
  115. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  116. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  117. <script type="text/javascript" charset="utf-8">
  118. var $j = jQuery.noConflict();
  119. $j(function() {
  120. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  121. $j("img").lazyload({
  122. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  123. effect: "fadeIn",
  124. });
  125. });
  126. </script>
  127.  
  128. <style type="text/css">
  129.  
  130. .tooltip{
  131. display: inline;
  132. position: relative;
  133. opacity: 0.4;
  134. filter: alpha(opacity=40); /* For IE8 and earlier */
  135. }
  136. #s-m-t-tooltip {
  137. max-width:300px; /*how big the tooltip can be at most*/
  138. line-height: 100%;
  139. border-radius: 2px; /*change your border radius*/
  140. padding: 2px;
  141. text-align: center;
  142. margin: 20px 7px 10px -20px; /*distance from word*/
  143. background-color: rgba(166, 172, 173, 0.4); /*background color*/
  144. border:1px solid gray; /*border info*/
  145. font-family: Monospace; /*tooltip font*/
  146. font-size: 1em calc(-1%); /*tooltip font size*/
  147. letter-spacing:2px; /*tooltip letter spacing*/
  148. font-variant: small-caps; /*makes the tooltip title uppercase*/
  149. color: black; /*tooltip font color*/
  150. z-index:999999999999999999999999999999999999;
  151. overflow: visible;
  152. }
  153.  
  154.  
  155. /*Basic styles*/
  156.  
  157. * {
  158. border-radius: 2px;
  159. }
  160.  
  161. ::-moz-selection {
  162. background: {color:Text highlight};
  163. color: #fff;
  164. }
  165. ::selection {
  166. background: {color:Text highlight};
  167. color: #fff;
  168. }
  169. #content {
  170. margin: 2%;
  171. width: 64%;
  172. float: right;
  173. font-size: 11px;
  174. font-family:;
  175. }
  176.  
  177. body {
  178. background: {color:Background Color} url('{image:Background}') no-repeat center center fixed;
  179. background-size: cover;
  180. -webkit-background-size: cover;
  181. -moz-background-size: cover;
  182. -o-background-size: cover;
  183. font-family: {font:Body};
  184. font-size: 1em;
  185. margin: 0;
  186. padding: 0;
  187. }
  188.  
  189. iframe, img, embed, object, video {
  190. max-width: 100%;
  191. }
  192. img {
  193. height: auto;
  194. width: auto;
  195. }
  196. a {
  197. color: {color:Body links};
  198. text-decoration: none;
  199. }
  200. blockquote {
  201. background: rgba(0, 0, 0, 0.1);
  202. border-left: 3px solid rgba(0, 0, 0, 0.2);
  203. margin: 0;
  204. padding: 2%;
  205. }
  206. /*Masthead/Sidebar*/
  207. }
  208. nav li {
  209. display: inline;
  210. }
  211. /*Article*/
  212. article {
  213. background: rgba(166, 172, 173, 0.4);
  214. padding: 1%;
  215. margin: {text:Post margin};
  216. width: {text:Post width};
  217. }
  218. .chat span {
  219. float: left;
  220. margin-right: 1%;
  221. }
  222. /*Metadata*/
  223. .metadata {
  224. border-bottom: 1px solid gray;
  225. font-size: 10px;
  226. display: inline-block;
  227. width: 100%;
  228. background-color: rgba(166, 172, 173, 0.4);
  229. color: black;
  230. padding: 1%;
  231. }
  232. .notecount {
  233. float: right;
  234. }
  235. .reblogged {
  236. float: right;
  237. background-color: rgba(166, 172, 173, 0.4);
  238. margin: 3% 0;
  239. padding-left: 1%;
  240. border-top: 1px solid gray;
  241. font-size: 10px;
  242. width: 100%;
  243. }
  244.  
  245. /* PAGINATION CSS */
  246.  
  247. #pagination {
  248. background-color: {color:Sidebar Background};
  249. width: 50px;
  250. height: 50px;
  251. position: fixed;
  252. left: 200px;
  253. bottom: 0px;
  254. border-left: 1px solid {color:Sidebar Border};
  255. border-top: 1px solid {color:Sidebar Border};
  256. border-right: 1px solid {color:Sidebar Border};
  257. opacity: 0.4;
  258. filter: alpha(opacity=40); /* For IE8 and earlier */
  259. }
  260.  
  261. #pagination:hover {
  262. opacity: 0.7;
  263. filter: alpha(opacity=70);
  264. }
  265.  
  266. #pagination .pagina {
  267. display: block;
  268. text-align: center;
  269. line-height: 50px;
  270. -webkit-transition-duration: 0.5s;
  271. -moz-transition-duration: 0.5s;
  272. -o-transition-duration: 0.5s;
  273. }
  274.  
  275. #pagination .pagina:hover {
  276. color: black;
  277. text-decoration: none;
  278. -webkit-transition-duration: 0.5s;
  279. -moz-transition-duration: 0.5s;
  280. -o-transition-duration: 0.5s;
  281. }
  282.  
  283.  
  284. /*Tags and notes*/
  285. #tags, nav ul, .chat ul {
  286. list-style: none;
  287. list-style-image: none;
  288. margin: 0;
  289. padding: 0;
  290. }
  291. #tags li {
  292. float: left;
  293. margin-right: 1%;
  294. }
  295. .notes {
  296. clear: both;
  297. padding: 0;
  298. }
  299.  
  300. /* SIDEBAR / QUOTES CSS */
  301.  
  302. #sidebar {
  303. width: 250px;
  304. height: 90%;
  305. position: fixed;
  306. top: 10px;
  307. left: 10px;
  308. overflow: visible;
  309. }
  310.  
  311. #sidebar .citas {
  312. background-color: {color:Sidebar Background};
  313. opacity: 0.4;
  314. filter: alpha(opacity=40); /* For IE8 and earlier */
  315. width: 220px;
  316. margin-top: 5%;
  317. border: 1px solid {color:Sidebar Border};
  318. }
  319.  
  320. #sidebar .citas:nth-of-type(odd) {
  321. float: right;
  322. }
  323.  
  324. #sidebar .citas:nth-of-type(even) {
  325. float: left;
  326. }
  327.  
  328.  
  329. #sidebar .cita {
  330. font-family: 'Pompiere', 'Times New Roman', serif;
  331. font-size: calc(1em -2px);
  332. opacity: 1;
  333. filter: alpha(opacity=100); /* For IE8 and earlier */
  334. width: 90%;
  335. text-align: justify;
  336. padding: 2% 1% 0 2%;
  337. line-height: 95%;
  338. }
  339.  
  340. #sidebar .autor {
  341. font-family: Monospace;
  342. font-size: 1em;
  343. text-align: right;
  344. font-variant: small-caps;
  345. padding: 0 2% 2% 0;
  346. }
  347.  
  348. /* NAVIGATION CSS */
  349.  
  350. #navigation {
  351. position: fixed;
  352. display: inline;
  353. left: 0;
  354. bottom: 1px;
  355. height: 50px;
  356. width: 250px;
  357. }
  358.  
  359.  
  360. #navigation .linkis-todo {
  361. background-color: {color:Sidebar Background};
  362. width: 190px;
  363. border: 1px solid {color:Sidebar Border};
  364. opacity: 0.4;
  365. filter: alpha(opacity=40); /* For IE8 and earlier */
  366. }
  367.  
  368. #navigation .linkis-todo:hover {
  369. opacity: 0.7;
  370. filter: alpha(opacity=70); /* For IE8 and earlier */
  371. }
  372.  
  373. #navigation .linkis {
  374. position: relative;
  375. left: 53px;
  376. line-height: 50px;
  377. padding: 20px 5px 20px 5px;
  378. -webkit-transition-duration: 0.5s;
  379. -moz-transition-duration: 0.5s;
  380. -o-transition-duration: 0.5s;
  381. }
  382.  
  383. #navigation .linkis:hover {
  384. text-decoration: none;
  385. color: black;
  386. -webkit-transition-duration: 0.5s;
  387. -moz-transition-duration: 0.5s;
  388. -o-transition-duration: 0.5s;
  389. }
  390.  
  391. .photo, .text, .photoset, .chat, .link, .answer, quote, .audio, .video {
  392. padding: 1%;
  393. }
  394.  
  395.  
  396. .label {text-transform:uppercase; font-size: 10px;}
  397.  
  398. .line_odd .label {
  399. color: #2983a6; background-color:rgba(255, 255, 255, 0.3); padding: 1px;}
  400. .line_even .label {
  401. color: #587652; background-color:rgba(255, 255, 255, 0.3); padding: 1px;}
  402.  
  403. /*Custom CSS*/
  404. {CustomCSS}
  405. </style>
  406. </head>
  407. <body>
  408. <!--Sidebar/masthead-->
  409. <header id="masthead">
  410. <!--Details: portrait (optional), title and description-->
  411. <section id="sidebar">
  412. <div class="citas">
  413. {block:ifQuote1}
  414. <div
  415. class="cita">“{text:Quote 1}”</div>
  416. <div class="autor">{text:Quote 1 Source}</div>
  417. {/block:ifQuote1}
  418. </div>
  419. <div class="citas">
  420. {block:ifQuote2}
  421. <div class="cita">“{text:Quote 2}”</div>
  422. <div class="autor">{text:Quote 2 Source}</div>
  423. {/block:ifQuote2}
  424. </div>
  425. <div class="citas">
  426. {block:ifQuote3}
  427. <div class="cita">“{text:Quote 3}”</div>
  428. <div class="autor">{text:Quote 3 Source}</div>
  429. {/block:ifQuote3}
  430. </div>
  431. <div class="citas">
  432. {block:ifQuote4}
  433. <div class="cita">“{text:Quote 4}”</div>
  434. <div class="autor">{text:Quote 4 Source}</div>
  435. {/block:ifQuote4}
  436. </div>
  437. <div class="citas">
  438. {block:ifQuote5}
  439. <div class="cita">“{text:Quote 5}”</div>
  440. <div class="autor">{text:Quote 5 Source}</div>
  441. {/block:ifQuote5}
  442. </div>
  443. <div class="citas">
  444. {block:ifQuote6}
  445. <div class="cita">“{text:Quote 6}”</div>
  446. <div class="autor">{text:Quote 6 Source}</div>
  447. {/block:ifQuote6}
  448. </div>
  449. <div class="citas">
  450. {block:ifQuote7}
  451. <div class="cita">“{text:Quote 7}”</div>
  452. <div class="autor">{text:Quote 7 Source}</div>
  453. {/block:ifQuote7}
  454. </div>
  455.  
  456. </div><!--End of citas-->
  457.  
  458. </section> <!-- END OF SIDEBAR SECTION -->
  459.  
  460. <section id="navigation">
  461.  
  462. <a href="/">
  463. <img src="{image:Side Picture}" style="width:50px; height: 50px; position: fixed; left: 0px; bottom: 0px;"/>
  464. </a>
  465.  
  466. <div class="linkis-todo">
  467. <a href="{text:Link 1}" class="linkis" title="{text:Link 1 Name}">◕</a>
  468. <a href="{text:Link 2}" class="linkis" title="{text:Link 2 Name}">◔</a>
  469. <a href="{text:Link 3}" class="linkis" title="{text:Link 3 Name}">◐</a>
  470. <a href="{text:Link 4}" class="linkis" title="{text:Link 4 Name}">◑</a>
  471. <a href="http://micastruli.tumblr.com" class="linkis"><small>©</small></a>
  472. </div>
  473.  
  474. <!--Navigation-->
  475. <nav>
  476. <ul>
  477. <!--Pagination: previous/next page links-->
  478. <div id="pagination">
  479. {block:Pagination}
  480. <div class="pagina">
  481. {block:PreviousPage}<a href="{PreviousPage}"><</a>{/block:PreviousPage}
  482. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  483. </div>
  484. {/block:Pagination}
  485. </div>
  486. </ul>
  487. </nav>
  488.  
  489. </section> <!-- END OF NAVIGATION SECTION -->
  490. </header>
  491. <!--Content holder-->
  492. <div id="content">
  493. {block:Posts}
  494. <article>
  495. <!--Metadata: date, note count-->
  496. <header class="metadata">
  497. {block:Date} <a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a> {/block:Date}
  498.  
  499. {block:NoteCount} <a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a> {/block:NoteCount}
  500. </header>
  501. <!--Unique code for each post type-->
  502. {block:Text}
  503. <div class="text">
  504. {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  505. {Body}
  506. {/block:Text}
  507.  
  508. {block:Photo}
  509. <div class="photo">
  510. <img width="400px" src="{PhotoURL-400}" alt="{PhotoAlt}" />
  511. {block:Caption}{Caption}{/block:Caption}
  512. {/block:Photo}
  513.  
  514. {block:Photoset}
  515. <div class="photoset">
  516. {block:IndexPage}{Photoset-400}{/block:IndexPage}
  517. {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  518. {block:Caption}{Caption}{/block:Caption}
  519. {/block:Photoset}
  520.  
  521. {block:Quote}
  522. <div class="quote">
  523. <blockquote>{Quote}</blockquote>
  524. {block:Source}<cite> {Source} </cite>{/block:Source}
  525. {/block:Quote}
  526.  
  527. {block:Link}
  528. <div class="link">
  529. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  530. {block:Description}{Description}{/block:Description}
  531. {/block:Link}
  532.  
  533. {block:Chat}
  534. <div class="chat">
  535. <ul>
  536. {block:Lines}<li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  537. </ul>
  538. {/block:Chat}
  539.  
  540. {block:Audio}
  541. <div class="audio">
  542. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="30" height="30">{/block:AlbumArt}</div>
  543. <div class="player">{AudioPlayerBlack}</div>
  544. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  545. {block:Caption}{Caption}{/block:Caption}
  546. {/block:Audio}
  547.  
  548. {block:Video}
  549. <div class="video">
  550. <div class="video-player">{Video-400}</div>
  551. {block:Caption}{Caption}{/block:Caption}
  552. {/block:Video}
  553.  
  554. {block:Answer}
  555. <table style="margin-top: 5px;padding-bottom:5px;margin-bottom:5px;">
  556. <tr>
  557. <td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:middle;"><strong>{Asker} asked:</strong> {Question}</td>
  558. </tr>
  559. </table>
  560. <div style="border-top: 1px solid #a0a0a0;">
  561. {Answer}</div>
  562. {/block:Answer}
  563.  
  564. <footer class="details">
  565. {block:ContentSource}
  566. <div class="reblogged">
  567. <!--Content source-->
  568. <a href="{SourceURL}">⊗</a>
  569. </div>
  570. {/block:ContentSource}
  571. {block:Permalink}
  572. <!--Tags and notes on displayed on permalink pages-->
  573. {block:HasTags}
  574. <ul id="tags">
  575. {block:Tags}<li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
  576. </ul>
  577. {/block:HasTags}
  578. {block:PostNotes}
  579. <div id="notes">
  580. {PostNotes}
  581. </div>
  582. {/block:PostNotes}
  583. {/block:Permalink}
  584. </footer>
  585. </article>
  586. {/block:Posts}
  587. <!--Close of article-->
  588. </div>
  589. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  590. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  591. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  592. {block:IfInfiniteScroll}
  593. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  594. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  595. {/block:IfInfiniteScroll}
  596. <!--Code for infinite scroll and grid layout-->
  597. <script>
  598. (function() {
  599. var $tumblelog = $('#content');
  600. {block:IfInfiniteScroll}
  601. $tumblelog.infinitescroll({
  602. navSelector : ".pagination",
  603. nextSelector : ".pagination a:first",
  604. itemSelector : "article",
  605. bufferPx : 50,
  606. done : "",
  607. loading: {
  608. img : "",
  609. msgText: ""
  610. },
  611. },
  612. function( newElements ) {
  613. var $newElems = $( newElements ).css({ opacity: 0 });
  614. $newElems.imagesLoaded(function(){
  615. $newElems.animate({ opacity: 1 });
  616. $tumblelog.masonry( 'appended', $newElems);
  617. });
  618. }
  619. );
  620. {/block:IfInfiniteScroll}
  621. $tumblelog.imagesLoaded( function(){
  622. $tumblelog.masonry({
  623. columnWidth: function( containerWidth ) {
  624. return containerWidth / 100;
  625. }
  626. });
  627. });
  628. })();
  629. </script>
  630. <!--For users adding Google Analytics ID-->
  631. <script>
  632. var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
  633. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  634. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  635. s.parentNode.insertBefore(g,s)}(document,'script'));
  636. </script>
  637. </body>
  638. </html>
Advertisement
Add Comment
Please, Sign In to add comment