API tools faq
paste
Advertisement
noziam

THEME 20: DUO

noziam
Mar 27th, 2014
7,548
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.                                          
  7.         .                                 .o8       oooo              
  8.       .o8                                "888       `888              
  9.    .o888oo oooo  oooo  ooo. .oo.  .oo.   888oooo.   888  oooo d8b    
  10.      888   `888  `888  `888P"Y88bP"Y88b  d88' `88b  888  `888""8P    
  11.      888    888   888   888   888   888  888   888  888   888        
  12.      888 .  888   888   888   888   888  888   888  888   888    .o.
  13.      "888"  `V88V"V8P' o888o o888o o888o `Y8bod8P' o888o d888b   Y8P    
  14.  
  15. -->
  16.  
  17.  
  18. <!--
  19.  
  20. THEME 20 DUO BY URSULA @ GLAES
  21.  
  22. PLEASE SEND ME A MESSAGE IF YOU HAVE ANY QUESTIONS.
  23.  
  24. THANK YOU.
  25. ENJOY!
  26.  
  27.  
  28. -->
  29.  
  30. <meta name="color:Background" content="#369fa0" />
  31. <meta name="color:border" content="#000000" />
  32. <meta name="color:links" content="#615151" />
  33. <meta name="color:text" content="#1d1818" />
  34. <meta name="color:sidebar background" content="#0a0303" />
  35. <meta name="color:sidebar links" content="#b9b8b8" />
  36. <meta name="color:sidebar text" content="#868484" />
  37. <meta name="color:Post color" content="#ffffff" />
  38. <meta name="color:Text highlight" content="#d83e3e" />
  39. <meta name="font:Body" content='Helvetica Neue'/>
  40. <meta name="if:Infinite scroll" content="1"/>
  41. <meta name="if:Menu" content="1"/>
  42. <meta name="if:UnHideCaption" content="1"/>
  43. <meta name="if:PostBorder" content="1"/>
  44. <meta name="text:Menu 1" content="" />
  45. <meta name="text:Menu 1 Title" content="" />
  46. <meta name="text:Menu 2" content="" />
  47. <meta name="text:Menu 2 Title" content="" />
  48. <meta name="text:Menu 3" content="" />
  49. <meta name="text:Menu 3 Title" content="" />
  50.  
  51. <meta name="image:Background" content="" />
  52. <meta name="image:favicon" content=""/>
  53.  
  54.  
  55. <meta name="text:Post margin" content='10px'/>
  56. <meta name="text:Post width" content='38%'/>
  57. {block:Description}
  58. <meta name="description" content="{MetaDescription}" />
  59. {/block:Description}
  60. <meta charset="utf-8">
  61. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  62. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  63. <link rel="shortcut icon" href="{image:favicon}">
  64. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  65.  
  66.  
  67. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  68.  
  69.  
  70.  
  71. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  72. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  73.  
  74. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  75.  
  76. <script>
  77.  
  78. (function($){
  79.  
  80. $(document).ready(function(){
  81.  
  82. $("a[title]").style_my_tooltips({
  83.  
  84. tip_follows_cursor:true,
  85.  
  86. tip_delay_time:30,
  87.  
  88. tip_fade_speed:300,
  89.  
  90. attribute:"title"
  91.  
  92. });
  93.  
  94. });
  95.  
  96. })(jQuery);
  97.  
  98. </script>
  99.  
  100. <style type="text/css">
  101. /*Basic styles*/
  102.  
  103. #s-m-t-tooltip{
  104.     position:absolute;
  105.     margin-top: 15px;
  106.     z-index:9999;
  107.     background:#ffffff;
  108. }
  109.  
  110.  
  111.  
  112. ::-moz-selection {
  113.     background: {color:Text highlight};
  114.     color: #fff;
  115. }
  116. ::selection {
  117.     background: {color:Text highlight};
  118.     color: #fff;
  119. }
  120. #content {
  121.     margin: 2%;
  122.     width: 64%;
  123.     float: right;
  124. }
  125. body {
  126.     background:{color:background};
  127. color:{color:text};
  128. font-family:helvetica;
  129. font-size:10px;
  130. text-align:justify;
  131. margin:0;
  132. line-height:16px;
  133. }
  134. a {
  135.     color: {color:links};
  136.     text-decoration: none;
  137.    
  138.    
  139. }
  140.  
  141. a:hover {
  142.     color: {color:text};
  143.     text-decoration:underline;
  144.  
  145.    
  146. }
  147. blockquote {padding:5px 0 5px 10px;
  148. border-left:1px solid {color:text};
  149. margin-left:10px;
  150.  
  151. }
  152. iframe, img, embed, object, video {
  153.     max-width: 100%;
  154. }
  155. img {
  156.     height: auto;
  157.     width: auto;
  158. }
  159. #sidebar {
  160.     background: {color:sidebar background};
  161.     color: {color:text};
  162.     width: 100px;
  163.     position:fixed;
  164.    
  165.     margin-left: 15%;
  166.     margin-top:100px;
  167.     padding:10px;
  168.     margin-bottom:-90px;
  169.       {block:ifPostBorder}border:1px solid {color:border};{/block:ifPostBorder}
  170. }
  171. #sidebar a {
  172.     color: {color:sidebar links};
  173. }
  174. nav li {
  175.     display: inline;
  176. }
  177. /*Article*/
  178. article {
  179.     background: {color:Post color};
  180.     margin: {text:Post margin};
  181.     padding: 1%;
  182.     width: {text:Post width};
  183.  
  184.     margin-top:0px;
  185.     {block:ifPostBorder}border:1px solid {color:border};{/block:ifPostBorder}
  186. }
  187. .chat span {
  188.     float: left;
  189.     margin-right: 1%;
  190. }
  191. /*Metadata*/
  192. .metadata {
  193.     text-align:right;
  194.  
  195.     width: 100%;
  196.     font-size:10px;
  197. }
  198. .notecount {
  199.     text-align:right;
  200.  
  201. }
  202. .reblogged {
  203.     text-align:right;
  204.  
  205.     margin: 1% ;
  206.     width: 100%;
  207.     line-height:120%;
  208. }
  209. /*Tags and notes*/
  210. #tags, nav ul, .chat ul {
  211.     list-style: none;
  212.     list-style-image: none;
  213.     margin: 0;
  214.     padding: 0;
  215. }
  216. #tags li {
  217.     float: left;
  218.     margin-right: 1%;
  219. }
  220. .notes {
  221.     clear: both;
  222.     padding: 0;
  223. }
  224. /*Custom CSS*/
  225. {CustomCSS}
  226. </style>
  227. </head>
  228. <body>
  229. <!--Sidebar/sidebar-->
  230. <header id="sidebar">
  231.     <!--Details: portrait (optional), title and description-->
  232.     <div id="header">
  233.       <center>
  234.        
  235.         {block:Description}
  236.         {Description}</p>
  237.         {block:Description}
  238.         {block:ifMenu}
  239. <select onChange="location.href=this.options[this.selectedIndex].value;" style="width: 100px; font-family: helvetica, sans-serif; font-size:10px; border-radius:0px; background-color:transparent; margin-bottom:5px; border-color:{color:border}">
  240. <option value="/">links</option>
  241. <option value="/">home</option>
  242. <option value="/ask">ask</option>
  243. <option value="{text:Menu 1}">{text:Menu 1 Title}</option>
  244. <option value="{text:Menu 2}">{text:Menu 2 Title}</option>
  245. <option value="{text:Menu 3}">{text:Menu 3 Title}</option>
  246. </select>
  247. {/block:ifMenu} </center></div>
  248.  
  249.  
  250.         {block:Pagination}
  251. <div class="pagination"><center>
  252.     {block:PreviousPage}<a href="{PreviousPage}">last</a>{/block:PreviousPage}
  253.     {block:NextPage}<a href="{NextPage}" title="next page">next</a>{/block:NextPage}
  254. </div></center>
  255. {/block:Pagination}
  256.     </div>
  257.     <!--Navigation-->
  258.     <nav>
  259.         <ul>
  260.             {block:HasPages}
  261.             {block:Pages}
  262.             <li> <a href="{URL}">{Label}</a></li>
  263.             {/block:Pages}
  264.             {/block:HasPages}
  265.             {block:SubmissionsEnabled}
  266.             <li> <a href="/submit">{SubmitLabel}</a></li>
  267.             {/block:SubmissionsEnabled}
  268.             {block:AskEnabled}
  269.             <li> <a href="/ask">{AskLabel}</a></li>
  270.             {/block:AskEnabled}
  271.         </ul>
  272.     </nav>
  273.  
  274. </header>
  275. <!--Content holder-->
  276. <div id="content">
  277. {block:Posts}
  278. <article>
  279. <!--Metadata: date, note count-->
  280.  
  281. <!--Unique code for each post type-->
  282. {block:Text}
  283. <div class="text">
  284.     {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  285.     {Body}
  286. {/block:Text}
  287.  
  288. {block:Photo}
  289. <div class="photo">
  290.     {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  291.     {block:ifUnHideCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifUnHideCaption}
  292. {/block:Photo}
  293.  
  294. {block:Photoset}
  295. <div class="photoset">
  296.     {block:IndexPage}{Photoset-250}{/block:IndexPage}
  297.     {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  298.     {block:ifUnHideCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifUnHideCaption}
  299. {/block:Photoset}
  300.  
  301. {block:Quote}
  302. <div class="quote">
  303.     <blockquote>{Quote}</blockquote>
  304.     {block:Source}<cite> {Source} </cite>{/block:Source}
  305. {/block:Quote}
  306.  
  307. {block:Link}
  308. <div class="link">
  309.     <h1 class="title"><a href="{URL}">{Name}</a></h1>
  310.     {block:Description}{Description}{/block:Description}
  311. {/block:Link}
  312.  
  313. {block:Chat}
  314. <div class="chat">
  315.     <ul>
  316.         {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  317.     </ul>
  318. {/block:Chat}
  319.  
  320. {block:Audio}
  321. <div class="audio">
  322.     {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  323.     <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  324.     <div class="player">{AudioPlayerBlack}</div>
  325.     {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  326.     {block:ifUnHideCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifUnHideCaption}
  327. {/block:Audio}
  328.  
  329. {block:Video}
  330. <div class="video">
  331.     <div class="video-player">{Video-500}</div>
  332.     {block:ifUnHideCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifUnHideCaption}
  333. {/block:Video}
  334.  
  335. {block:Answer}
  336. <div class="answer">
  337.     <h1 class="title">{Question}</h1>
  338.     <div class="user"><img src="{AskerPortraitURL-48}"/><p>{Asker}</p></div>
  339.     {Answer}
  340. {/block:Answer}
  341. </div>
  342. <footer class="details">
  343. {block:ContentSource}
  344. <div class="reblogged">
  345. <!--Content source-->
  346.  {block:Date} <a href="{Permalink}"> {12Hour}:{Minutes} {AmPm} </a> {/block:Date}
  347.  
  348.     {block:NoteCount} <a class="notecount" href="{Permalink}#notes">- {NoteCount}</a> {/block:NoteCount}- <a href="{ReblogParentURL}" title="{ReblogParentName}">➝</a> <a href="{SourceURL}" title="{ReblogRootName}">©</a>{/block:ContentSource}  <a href="{ReblogURL}" target="_blank" title="reblog">↺</a>
  349. {block:Permalink}
  350. <!--Tags and notes on displayed on permalink pages-->
  351. {block:HasTags}
  352.     <ul id="tags">
  353.         {block:Tags}<li> <a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
  354.     </ul>
  355. {/block:HasTags}
  356. {block:PostNotes}
  357.  
  358. <div id="notes">
  359.     {PostNotes}
  360. </div>
  361. {/block:PostNotes}
  362. {/block:Permalink}
  363. </footer>
  364. <header class="metadata">
  365.  
  366. </header>
  367.  </article>
  368. {/block:Posts}
  369. <!--Close of article-->
  370. </div>
  371.  
  372. <div style="position:fixed;bottom:5px;right:5px;z-index:999"><a href="http://glaes.tumblr.com" title="glaes">ursula.</a></div>
  373.  
  374. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  375. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  376. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  377. {block:IfInfiniteScroll}
  378. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  379. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  380. {/block:IfInfiniteScroll}
  381. <!--Code for infinite scroll and grid layout-->
  382. <script>
  383. (function() {
  384.     var $tumblelog = $('#content');
  385.     {block:IfInfiniteScroll}
  386.     $tumblelog.infinitescroll({
  387.         navSelector  : ".pagination",            
  388.         nextSelector : ".pagination a:first",    
  389.         itemSelector : "article",
  390.         bufferPx     : 50,
  391.         done : "",
  392.         loading: {
  393.             img : "",
  394.             msgText: ""
  395.         },
  396.     },
  397.       function( newElements ) {
  398.             var $newElems = $( newElements ).css({ opacity: 0 });
  399.             $newElems.imagesLoaded(function(){
  400.                 $newElems.animate({ opacity: 1 });
  401.                 $tumblelog.masonry( 'appended', $newElems);
  402.             });
  403.           }
  404.     );
  405.     {/block:IfInfiniteScroll}
  406.     $tumblelog.imagesLoaded( function(){
  407.       $tumblelog.masonry({
  408.         columnWidth: function( containerWidth ) {
  409.             return containerWidth / 100;
  410.           }
  411.       });
  412.     });
  413. })();
  414. </script>
  415. <!--For users adding Google Analytics ID-->
  416. <script>
  417. var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
  418. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  419. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  420. s.parentNode.insertBefore(g,s)}(document,'script'));
  421. </script>
  422.  
  423. <!--
  424.  ╭╮╱╭╮╭━━━╮╱╭╮╱╭━━━╮╭━━━╮╭━━━╮
  425. ┃┃╱┃┃┃╭━━╯╭╯┃╱┃╭━╮┃┃╭━╮┃┃╭━━╯
  426. ┃╰━╯┃┃╰━━╮╰╮┃╱┃╰━╯┃╰╯╭╯┃┃╰━━╮
  427. ┃╭━╮┃┃╭━━╯╱┃┃╱╰━━╮┃╱╱┃╭╯╰━━╮┃
  428. ┃┃╱┃┃┃╰━━╮╭╯╰╮╭━━╯┃╱╱┃┃╱╭━━╯┃
  429. ╰╯╱╰╯╰━━━╯╰━━╯╰━━━╯╱╱╰╯╱╰━━━╯
  430. -->
  431. </body>
  432. </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!