Advertisement
tasty2punch

roykkim-opensans-jasonmccann-20140614

Jun 14th, 2014
250
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.76 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  2. <html>
  3.  
  4. <!--
  5. - theme #18 / jasonmcann(tumblr.com) -
  6. don't take parts of this.
  7. don't remove the credits.
  8. -->
  9.  
  10. <head>
  11.  
  12. <title>{Title}{block:PostTitle}, {PostTitle}{/block:PostTitle}</title>
  13. <link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
  16. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}" />
  19. {/block:Description}
  20. <meta name="color:background" content="#ffffff" />
  21. <meta name="color:text" content="#7e7175" />
  22. <meta name="color:link" content="#b64a6b" />
  23. <meta name="color:link hover" content="#7e7175" />
  24. <meta name="color:border" content="#f5f5f5" />
  25. <meta name="color:blockquote" content="#f5f5f5" />
  26. <meta name="color:selection" content="#b64a6b" />
  27. <meta name="color:selection text" content="#ffffff" />
  28. <meta name="color:bold" content="#daa6ad" />
  29. <meta name="color:tags" content="#a6b9bb" />
  30. <meta name="color:links bg" content="#a6b9bb" />
  31. <meta name="color:sb title bg" content="#de9cab" />
  32. <meta name="color:audio bg" content="#fafafa" />
  33. <meta name="color:audio border" content="#eee" />
  34.  
  35. <meta name="text:Link 01 URL" content="/" />
  36. <meta name="text:Link 01 title" content="Link 01">
  37. <meta name="text:Link 02 URL" content="/" />
  38. <meta name="text:Link 02 title" content="Link 02">
  39. <meta name="text:Link 03 URL" content="/" />
  40. <meta name="text:Link 03 title" content="Link 03">
  41. <meta name="text:Link 04 URL" content="/" />
  42. <meta name="text:Link 04 title" content="Link 04">
  43. <meta name="text:Link 05 URL" content="/" />
  44. <meta name="text:Link 05 title" content="Link 05">
  45.  
  46. <meta name="if:400px posts" content="0">
  47. <meta name="if:infinite scrolling" content="0">
  48.  
  49. <meta name="image:background" content="">
  50. <meta name="image:sidebar" content="">
  51.  
  52. <!--- extras --->
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/nb65v05/XPQmpjoyl/jquery.style-my-tooltips.js"></script>
  55.  
  56. <script>
  57. (function($){
  58. $(document).ready(function(){
  59. $("[title]").style_my_tooltips({
  60. tip_follows_cursor:false,
  61. tip_delay_time:20,
  62. tip_fade_speed:300,
  63. attribute:"title"
  64. });});})(jQuery);
  65. </script>
  66.  
  67. <script type="text/javascript"
  68. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  69.  
  70. <style type="text/css">
  71. ::-webkit-scrollbar {width:5px;height:5px;background:#fff;}
  72. ::-webkit-scrollbar-thumb {background:#b8b8b8;}
  73.  
  74. body{
  75. font:11px 'Open Sans', sans-serif;
  76. font-weight: 300;
  77. padding:0;
  78. margin:0;
  79. background:{color:Background} url('{image:Background}') fixed;
  80. color:{color:text};}
  81.  
  82. sub, small, pre, code, sup
  83. {
  84.     font-size: 11px; vertical-align: baseline;
  85. }
  86. a{
  87. text-decoration:none;
  88. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  89. -o-transition:all 0.6s ease-in-out;/*opera*/
  90. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  91. -ms-transition:all 0.6s ease-in-out;/*ie*/
  92. transition:all 0.6s ease-in-out;/*w3c*/
  93. color:{color:link};}
  94.  
  95. a:hover{
  96. color:{color:link hover};}
  97.  
  98. em, strong {
  99. color:{color:bold};}
  100.  
  101. blockquote{
  102. border-left:3px solid {color:border};
  103. margin-left:13px;
  104. padding-left:5px;
  105. margin-top:7px;}
  106.  
  107. ol { list-style-type:lower-roman; }
  108.  
  109.  
  110. img{
  111. max-width:100%;}
  112.  
  113. #entries {
  114. margin:0 0 0 440px;
  115. padding-top:80px;
  116. text-align: justify;
  117. /*top/bottom/right/left*/
  118. {block:ifNot400pxPosts}
  119. width:500px;
  120. {/block:ifNot400pxPosts}
  121. {block:if400pxPosts}
  122. width:400px;
  123. {/block:if400pxPosts}
  124. position:relative;}
  125.  
  126. .posts {
  127. {block:ifNot400pxPosts}
  128. width:500px;
  129. {/block:ifNot400pxPosts}
  130. {block:if400pxPosts}
  131. width:400px;
  132. {/block:if400pxPosts}
  133. overflow:hidden;
  134. margin-bottom:60px;
  135. word-wrap: break-word;}
  136.  
  137. .title{
  138. text-transform:lowercase;
  139. letter-spacing:1px;
  140. font:lighter 14px 'Montserrat', Helvetica;
  141. color:{color:text};}
  142.  
  143. #side{
  144. background-color:#fafafa;
  145. position:fixed;
  146. height:100%;
  147. padding-right:40px;
  148. border:1px solid #f8f8f8;}
  149.    
  150. #sidebar{
  151. width:118px;
  152. margin:160px 0 0 92px;}
  153.  
  154. #sidebar img{
  155. width:118px;
  156. overflow:hidden;}
  157.  
  158. #title{
  159. text-transform:lowercase;
  160. letter-spacing:1px;
  161. text-align:center;
  162. font: 15px 'Montserrat', helvetica;
  163. margin-top:5px;
  164. background-color:{color:sb title bg};
  165. color:#fff;
  166. margin-left:-130px;
  167. text-align:right;
  168. padding-right:5px;}
  169.  
  170. .description{
  171. margin:5px 0 5px 0;
  172. text-align:justify;}
  173.  
  174. #links {
  175. text-align:center;
  176. margin-top:5px;
  177.    
  178. }
  179.  
  180. #links a{
  181. display:inline-block;
  182. width:07px;
  183. height:07px;
  184. border-radius:100%;
  185. font-size:20px;
  186. color:#fff;
  187. line-height:100px;
  188. text-align:center;
  189. background:{color:links bg};}
  190.  
  191. #pagination{
  192. text-align:center;
  193. margin-top:25px;
  194. font:10px 'Montserrat',sans-serif;
  195. text-transform:lowercase;
  196. font-weight: lighter;
  197. }
  198.  
  199. #pagination a{
  200. padding:3px;
  201. color:{color:sb title bg};}
  202.  
  203. #answer{
  204. padding-bottom:10px;}
  205.  
  206. #answer img{
  207. float:left;
  208. -webkit-border-radius: 5px;
  209. -moz-border-radius: 5px;
  210. border-radius: 5px;
  211. margin:0 10px 10px 0;}
  212.  
  213. .caption img, .answer img{
  214. {block:ifNot400pxPosts}
  215. max-width:500px;
  216. {/block:ifNot400pxPosts}
  217. {block:if400pxPosts}
  218. max-width:400px;
  219. {/block:if400pxPosts}}
  220.  
  221. #player{
  222. opacity:0;
  223. position:absolute;
  224. z-index:9999;
  225. margin:0px 0 0 0px;
  226. display: block;
  227. width:50px;
  228. height:50px;
  229. background-color:{color:audio bg};
  230. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  231. -o-transition:all 0.6s ease-in-out;/*opera*/
  232. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  233. -ms-transition:all 0.6s ease-in-out;/*ie*/
  234. transition:all 0.6s ease-in-out;/*w3c*/}
  235.  
  236. .player{
  237. width:27px;
  238. margin:08px;
  239. overflow:hidden;
  240. padding:3px;}
  241.  
  242. #player:hover{
  243. opacity:1;}
  244.  
  245. #auinfo img{
  246. float:left;
  247. padding-right:5px;
  248. padding-bottom:5px;}
  249.  
  250. #audio{
  251. height:50px;
  252. border:1px solid {color:audio border};
  253. background-color:{color:audio bg};}
  254.  
  255. #autrack{
  256. display:table;
  257. height:50px;
  258. {block:ifNot400pxPosts}
  259. width:440px;{/block:ifNot400pxPosts}
  260. {block:if400pxPosts}
  261. width:340px;{/block:if400pxPosts}
  262. padding-left:2px;}
  263.  
  264. .autrack{
  265. text-align:left;
  266. border-left:1px solid {color:audio border};
  267. padding-left:10px;
  268. text-transform:lowercase;
  269. font:300 10px 'Open Sans',sans-serif;
  270. letter-spacing:1px;
  271. line-height:20px;
  272. display: table-cell;
  273. vertical-align: middle;}
  274.  
  275. .autrack a{
  276. cursor:default;
  277. border-bottom:1px solid {color:border};
  278. text-transform:lowercase;
  279. letter-spacing:1px;
  280. font:bold 13px 'Montserrat',helvetica;
  281. color:{color:link};}
  282.  
  283. ol.notes {
  284. padding-left: 30px;
  285. margin: 25px 0px;
  286. list-style-type:lower-roman;}
  287.  
  288. ol.notes li.note {
  289. padding: 10px;}
  290.  
  291. ol.notes li.note img.avatar {
  292. display:none;}
  293.  
  294. ol.notes li.note blockquote {
  295. border-color: #eee;
  296. padding: 4px 10px;
  297. margin: 10px 0px 0px 25px;}
  298.    
  299. ol.notes li.note a{
  300. color:{color:text};}
  301.  
  302. #info{
  303. text-transform:lowercase;
  304. font:9px 'Open Sans', sans-serif;
  305. padding:3px;
  306. text-align:left;
  307. padding-bottom:0;
  308. margin-top:10px;
  309. border-top:1px solid {color:border};}
  310.  
  311. .tags a{
  312. color:{color:tags};}
  313.  
  314. #quotes{
  315.  
  316. margin-left:40px;
  317. padding-top:10px;}
  318. #quotes p
  319. {
  320.     font-family: 'Montserrat', Helvetica;
  321.  
  322.    
  323. }
  324. .quotes{
  325. font-family:consolas;
  326. float:left;
  327. font-size:70px;
  328. position:absolute;
  329. color:{color:blockquote};}
  330.  
  331. #c{
  332. position:fixed;
  333. bottom:10px;
  334. right:10px;
  335. font:italic 12px georgia;
  336. letter-spacing:1px;
  337. text-align:right;
  338. z-index:99;}
  339.  
  340. /* extras */
  341.  
  342. #s-m-t-tooltip{
  343. z-index:9999;
  344. margin:24px 14px 7px 12px;
  345. padding:0 3px 0 3px;
  346. color: white;
  347. font:9px 'Montserrat',sans-serif;
  348. text-transform:lowercase;
  349.  
  350. line-height:16px;
  351. background-color:#b8b8b8;
  352.  
  353.  
  354. ::selection {
  355. background: {color:selection};
  356. color: {color:selection text};}
  357. ::-moz-selection {
  358. background: {color:selection};
  359. color: {color:selection text};}
  360. ::-webkit-selection {
  361. background: {color:selection};
  362. color: {color:selection text};}
  363.  
  364. iframe#tumblr_controls {
  365. right:3px !important;
  366. position: fixed !important;
  367. -webkit-transition: opacity 0.7s linear;
  368. opacity: 0.2;
  369. -webkit-transition: all 0.8s ease-out;
  370. -moz-transition: all 0.8s ease-out;
  371. transition: all 0.8s ease-out;}
  372. iframe#tumblr_controls:hover{
  373. -webkit-transition: opacity 0.7s linear;
  374. opacity: 1;
  375. -webkit-transition: all 0.4s ease-out;
  376. -moz-transition: all 0.4s ease-out;
  377. transition: all 0.4s ease-out;}
  378. iframe#tumblr_controls {
  379. top: 0% !important;
  380. right:0% !important;
  381. position: fixed !important;}
  382.  
  383. ::-webkit-scrollbar {
  384. height:06px;
  385. width:06px;
  386. background-color:{color:background};}
  387. ::-webkit-scrollbar-thumb {
  388. border: 2px solid {color:background};
  389. background-color:{color:link};}
  390.  
  391. .rm{
  392. text-transform:lowercase;
  393. font-weight:bold;}
  394.  
  395. </style>  
  396. {block:ifInfiniteScrolling}
  397. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>{/block:ifInfiniteScrolling}
  398. </head>
  399.  
  400. <body>
  401. <div id="side">
  402. <div id="sidebar">
  403. <div id="links">
  404. <a href="{text:Link 01 URL}" title="{text:Link 01 title}"></a>
  405. <a href="{text:Link 02 URL}" title="{text:Link 02 title}"></a>
  406. <a href="{text:Link 03 URL}" title="{text:Link 03 title}"></a>
  407. <a href="{text:Link 04 URL}" title="{text:Link 04 title}"></a>
  408. <a href="{text:Link 05 URL}" title="{text:Link 05 title}"></a>
  409. </div>
  410. <div id="title">{Title}</div>
  411. <div class="description">
  412. {Description}
  413. </div>
  414. <A href="/"><img src="{image:sidebar}"></A>
  415. {block:Pagination}{block:ifNotInfiniteScrolling}<div id="pagination">
  416. {block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
  417. {CurrentPage} of {TotalPages}
  418. {block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}</div>
  419. {/block:ifNotInfiniteScrolling}{/block:Pagination}
  420. </div><!--- sidebar ---></div>
  421.  
  422. <div id="c">
  423. <a href="http://jasonmcann.tumblr.com" target="_blank" title="theme by jasonmcann">J</a>
  424. </div>
  425.  
  426. <div id="entries">
  427.  
  428. {block:ifInfiniteScrolling}
  429. <div class = "autopagerize_page_element" >{/block:ifInfiniteScrolling}
  430.  
  431. {block:Posts}
  432.  
  433. {block:ContentSource}
  434. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  435. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  436. {/block:SourceLogo}
  437. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  438. {/block:ContentSource}
  439.  
  440. <div class="posts">
  441.  
  442. {block:Text}
  443. {block:Title}
  444. <div class="title">
  445. {Title}</div>
  446. {/block:Title}
  447. {Body}
  448. {/block:Text}
  449.  
  450. {block:Photo}
  451. {LinkOpenTag}
  452. {block:ifNot400pxPosts}
  453. <img src="{PhotoURL-500}"/>
  454. {/block:ifNot400pxPosts}
  455. {block:if400pxPosts}
  456. <img src="{PhotoURL-400}"/>
  457. {/block:if400pxPosts}
  458. {LinkCloseTag}
  459. {block:Caption}
  460. <div class="caption">
  461. {Caption}
  462. </div>
  463. {/block:Caption}
  464. {/block:Photo}
  465.  
  466. {block:Photos}
  467. {block:ifNot400pxPosts}
  468. <img src="{Photoset-500}"/>
  469. {/block:ifNot400pxPosts}
  470. {block:if400pxPosts}
  471. <img src="{Photoset-400}"/>
  472. {/block:if400pxPosts}
  473. {block:Caption}
  474. <div class="caption">
  475. {Caption}
  476. </div>
  477. {/block:Caption}
  478. {/block:Photos}
  479.  
  480. {block:Quote}
  481. <div class="quotes"></div>
  482. <div id="quotes">
  483. <p>{Quote}</p>
  484. {block:Source}
  485. <span style="text-transform:lowercase;float:right"><u>{Source}</u></span>
  486. {/block:Source}
  487. </div><br />
  488. {/block:Quote}
  489.  
  490. {block:Link}
  491. <div class="title">
  492. <a href="{URL}" target="{Target}">
  493. {Name} &rarr;</a></div>
  494. {block:Description}
  495. {Description}
  496. {/block:Description}
  497. {/block:Link}
  498.  
  499. {block:Chat}
  500. {block:Title}
  501. <div class="title">
  502. {Title}</div>{/block:Title}
  503. {block:Lines}{block:Label}{Label}{/block:Label} {Line}<br>{/block:Lines}
  504. {/block:Chat}
  505.  
  506. {block:Audio}
  507. <div id="audio">
  508. <div id="player"><div class="player">{AudioPlayer}</div></div>
  509. <div id="auinfo">
  510.  
  511. <span style="position:relative;float:left;z-index:9;width:30px;height:30px;padding:10px;background-color:{color:audio bg};">
  512. <img src="http://31.media.tumblr.com/58f9ed2573d6cc71d1e805ff744d01df/tumblr_mjcin8WReA1rb8evoo2_r1_250.png" width="30px";/></span>
  513.  
  514. {block:AlbumArt}
  515. <span style="position:relative;float:left;margin-left:-50px;z-index:99;width:30px;height:30px;padding:10px;background-color:{color:audio bg};">
  516. <img src="{AlbumArtURL}"/></span>
  517. {/block:AlbumArt}<div id="autrack">
  518. <div class="autrack">
  519. {block:TrackName}<a title="{block:Artist}by {Artist}{/block:Artist}">{TrackName}</a><br>{/block:TrackName}
  520.  
  521. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}{block:Album} / {Album}{/block:Album}</div>
  522. </div></div></div>
  523.  
  524. {block:Caption}{Caption}{/block:Caption}
  525. {/block:Audio}
  526.  
  527. {block:Video}
  528. {block:ifNot400pxPosts}
  529. {Video-500}
  530. {/block:ifNot400pxPosts}
  531. {block:if400pxPosts}
  532. {Video-400}
  533. {/block:if400pxPosts}
  534. {block:Caption}
  535. <div class="caption">
  536. {Caption}
  537. </div>
  538. {/block:Caption}
  539. {PlayCountWithLabel}
  540. {/block:Video}
  541.  
  542. {block:Answer}
  543. <div id="answer">
  544. <img src="{AskerPortraitURL-24}"/><b><u>{Asker}</u></b><br>
  545. {Question}</div>
  546. <div class="answer">
  547. {Answer}
  548. </div>
  549. {/block:Answer}
  550.  
  551. {block:More}<div class="rm">
  552. <a href="{Permalink}">read more &rarr;</a>
  553. </div>{/block:More}
  554.  
  555. <div id="info">
  556. {block:Date}<a href="{Permalink}">{NoteCountWithLabel}   &nbsp; </a>
  557. {block:RebloggedFrom}
  558. <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
  559. <u>via</u></a> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
  560. +source</a>  &nbsp; {/block:RebloggedFrom}
  561. <span style="float:right;"><a href="{Permalink}">{TimeAgo}</a></span>{/block:Date}
  562. {block:HasTags}<div class="tags"><b>under</b>: {block:Tags}
  563. <a href="{TagURL}">#{Tag} </a>{/block:Tags}</div>{/block:HasTags}
  564. </div>
  565.  
  566. {block:PermalinkPage}
  567. {block:PostNotes}
  568. <div id="notes">{PostNotes}</div>
  569. {/block:PostNotes}
  570. {/block:PermalinkPage}
  571.  
  572. </div><!--- posts --->
  573.  
  574. {/block:Posts}
  575.  
  576. </div>
  577. </div> <!--- entries --->
  578. </body>
  579. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement