API tools faq
paste
Advertisement
southcodes

theme #4: airplane

southcodes
Jul 3rd, 2017
1,580
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.60 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - theme #4 'Airplane' by sur southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/ask
  6.  
  7. -->
  8.  
  9. <!DOCTYPE html>
  10. <head>
  11.  
  12.     <title>{Title}</title>
  13.  
  14.     <link rel="shortcut icon" href="{favicon}">
  15.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  17.  
  18.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
  19.  
  20.     <meta name="color:background" content="#ffffff"/>
  21.     <meta name="color:text" content="#414141"/>
  22.     <meta name="color:links" content="#841d1d"/>
  23.     <meta name="color:links hover" content="#4f1c0d"/>
  24.     <meta name="color:permalink color" content="#999b9c"/>
  25.     <meta name="color:borders" content="#dddddd"/>
  26.    
  27.     <meta name="text:text size" content="13"/>
  28.    
  29.     <meta name="image:sidebar" content=""/>
  30.    
  31.     <meta name="if:show title" content="0"/>
  32.     <meta name="if:square image" content="0"/>
  33.     <meta name="if:right sidebar" content="1"/>
  34.    
  35.     <meta name="text:Link 1" content="index" />
  36.     <meta name="text:Link 1 URL" content="/" />
  37.     <meta name="text:Link 2" content="mail" />
  38.     <meta name="text:Link 2 URL" content="/ask" />
  39.     <meta name="text:Link 3" content="" />
  40.     <meta name="text:Link 3 URL" content="" />
  41.     <meta name="text:Link 4" content="" />
  42.     <meta name="text:Link 4 URL" content="" />
  43.     <meta name="text:Link 5" content="" />
  44.     <meta name="text:Link 5 URL" content="" />
  45.  
  46. <style type="text/css">
  47.  
  48. /*      basics    */
  49.  
  50.  
  51. ::-webkit-scrollbar-thumb:vertical {
  52.     background-color: #444;
  53.     border-right:4px solid {color:background};
  54.     border-top:5px solid {color:background};
  55.     border-bottom:5px solid {color:background};}
  56. ::-webkit-scrollbar {
  57.     background-color: #ccc;
  58.     width:5px;
  59.     height:0px;
  60.     border-right:4px solid {color:background};
  61.     border-top:5px solid {color:background};
  62.     border-bottom:5px solid {color:background};
  63. }
  64.  
  65. .tmblr-iframe.iframe-controls--desktop {
  66.     margin: 10px;
  67.     opacity:.2;
  68.     -moz-transition-duration: 0.6s;
  69.     -o-transition-duration: 0.6s;
  70.     -webkit-transition-duration: 0.6s;
  71.     transition-duration: 0.6s;}
  72. .tmblr-iframe--desktop-logged-in-controls {
  73.     margin:10px;
  74.     -webkit-filter:invert(100%);
  75.     -moz-filter:invert(100%);
  76.     -o-filter:invert(100%);
  77.     -ms-filter:invert(100%);
  78.     filter:invert(100%);
  79.     opacity:0.2;
  80.     -moz-transition-duration: 0.6s;
  81.     -o-transition-duration: 0.6s;
  82.     -webkit-transition-duration: 0.6s;
  83.     transition-duration: 0.6s;}
  84. .tmblr-iframe--desktop-logged-in-controls:hover, .tmblr-iframe.iframe-controls--desktop:hover {opacity:.5;
  85.     -moz-transition-duration: 0.6s;
  86.     -o-transition-duration: 0.6s;
  87.     -webkit-transition-duration: 0.6s;
  88.     transition-duration: 0.6s;}
  89.    
  90. #s-m-t-tooltip{
  91.     max-width:300px;
  92.     margin-top:25px;
  93.     margin-left:15px;
  94.     z-index:999999;
  95.     letter-spacing:1.3px;
  96.     text-transform:uppercase;
  97.     font-size:10.5px;
  98.     font-family:calibri;
  99.     border: solid 1px #ddd;
  100.     background-color:#fcfcfc;
  101.     color:#777;
  102.     padding:3px 5px 3px 5px;
  103.     line-height:12px;
  104. }
  105.  
  106. body {
  107.     font-family: 'Open Sans', sans-serif;
  108.     font-size:{text:text size}px;
  109.     color:{color:text};
  110.     background:{color:background};
  111.     line-height:18px;}
  112. body a{word-break:break-word;}
  113.  
  114. a {
  115.     text-decoration:none;
  116.     word-break:break-word;
  117.     color:{color:links};
  118.     -moz-transition-duration: 0.6s;
  119.     -o-transition-duration: 0.6s;
  120.     -webkit-transition-duration: 0.6s;
  121.     transition-duration: 0.6s;}
  122. a:hover {
  123.     color:{color:links hover};
  124.     -moz-transition-duration: 0.6s;
  125.     -o-transition-duration: 0.6s;
  126.     -webkit-transition-duration: 0.6s;
  127.     transition-duration: 0.6s;
  128. }
  129.  
  130. blockquote {border-left:1px solid #aaa;margin: 0px;padding:0px 0px 0px 13px;}
  131. p {margin:7px 0px;padding:0px;}
  132. img {max-width:100%;height:auto;margin:0px;padding:0px;}
  133.  
  134. pre {
  135.     white-space: pre-wrap;       /* css-3 */
  136.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  137.     white-space: -pre-wrap;      /* Opera 4-6 */
  138.     white-space: -o-pre-wrap;    /* Opera 7 */
  139.     word-wrap: break-word;       /* Internet Explorer 5.5+ */
  140.     border:1px solid {color:borders};
  141.     background:#fcfcfc;
  142.     padding: 0px 0 15px 5px;
  143. }
  144.  
  145. ul, li, ol {margin-left:15px;padding:0px;}
  146. ul li{list-style-type:none;margin-left:0px;}
  147. ul li:before {content:'» ';}
  148.  
  149. b, i {color:{color:links};}
  150.  
  151. small {font-size:calc({text:text size}px - 1px)}
  152. big {font-size:calc({text:text size}px + 1px)}
  153.  
  154.  
  155.                             /*      content    */
  156.                            
  157. #container {
  158.     width:400px;
  159.     margin:auto;
  160. }
  161.  
  162. .entries {
  163.     width:400px;
  164.     margin:-60px auto 0;
  165. }
  166.  
  167. .posts {
  168.     margin:150px 0 60px;
  169. }
  170.  
  171.                             /*      sidebar    */
  172.  
  173. .sidebar {
  174.     position:fixed;
  175.     width:150px;
  176.     margin-top:30px;
  177.     {block:IfRightSidebar}
  178.     margin-left:520px;
  179.     {/block:IfRightSidebar}
  180.     {block:IfNotRightSidebar}
  181.     margin-left:-250px;
  182.     {/block:IfNotRightSidebar}
  183.     text-align:center;
  184.     font-size:12px;
  185. }
  186.  
  187. .simg img, .simg{
  188.     width:100px;
  189.     height:auto;
  190.     margin:auto;
  191.     {block:IfNotSquareImage}
  192.     border-radius:6px;
  193.     {/block:IfNotSquareImage}}
  194. .simg{margin-bottom:21px;}
  195.  
  196. .btitle {
  197.     font-weight:600;
  198.     font-size:12px;
  199.     letter-spacing:.7px;
  200.     margin-bottom:20px;
  201.     padding:0 10px;}
  202. .btitle a{color:{color:text};}
  203.  
  204. .desc {
  205.     letter-spacing:.7px;
  206.     text-align:center;
  207.     padding:0 10px;
  208. }
  209.  
  210. .nav {
  211.     font-style:italic;
  212.     line-height:26px;
  213.     letter-spacing:.6px;
  214.     padding:0 10px;
  215. }
  216.  
  217.                             /*      posts    */
  218.  
  219. .posttitle {font-size:17px;margin-bottom:10px;}
  220.  
  221. /*      chat    */
  222.  
  223. .label {font-weight:600;}
  224. .line_even, .line_odd {line-height:24px}
  225. .line_odd .label {color:{color:links};}
  226.  
  227. /*      asks    */
  228.  
  229. .ask {font-size:12px;}
  230. .askimage {border-radius:100%;vertical-align:middle;margin-right:3px;}
  231. .asker {text-transform:lowercase;}
  232. .asker a{font-style:italic;}
  233. .question {margin-top:7px;border-left:1px solid {color:borders};padding-left:7px;}
  234. .answer {margin:15px 0;font-size:{text:text size}px;}
  235.  
  236. /*      quotes    */
  237.  
  238. .quote {font-size:calc({text:text size}px + 1px)}
  239. .quotesource {font-size:12px;font-style:italic;margin-top:10px;text-align:right;}
  240.  
  241. /*      audio     */
  242.  
  243. .playbox {
  244.     background:transparent;
  245.     position:absolute;
  246.     opacity:0.5;
  247.     width:30px;
  248.     height:25px;
  249.     z-index:5;}
  250. .playbutton {
  251.     margin:15px 0 0 12px;
  252.     width:31px;
  253.     height:25px;
  254.     overflow:hidden;
  255.     position:relative;
  256.     z-index:7;}
  257.  
  258.                             /*      extras    */
  259.  
  260. .via {margin-top:20px;font-size:11px;}
  261. .via a{font-style:italic;}
  262.  
  263. .date, .date a {
  264.     color:{color:permalink color};
  265.     font-size:11px;
  266.     text-transform:lowercase;
  267. }
  268.  
  269. .tags {font-size:12px;margin-top:7px;}
  270. .tags a{padding-right:10px;}
  271.  
  272.  
  273. .pagi {text-align:right;font-size:11.5px;letter-spacing:.5px;font-style:italic;margin-bottom:50px;}
  274. .jump_page {}
  275.  
  276. .notes {color:{color:text};font-size:12px;line-height:26px;margin:30px 0px;padding:0px;}
  277. .notes li, .notes ul {margin:0px;padding:0px;list-style-type:none;}
  278. .notes ul,.notes ol {max-height:350px;overflow:scroll;margin:0px;padding:0px;}
  279. .notes img.avatar {display:none}
  280.  
  281. {CustomCSS}
  282.  
  283. </style>
  284. </head>
  285. <body>
  286.  
  287. <div id="container">
  288. <div class="sidebar">
  289.  
  290. {block:IfSidebarImage}<div class="simg"><a href="/" title="{Name}"><img src="{image:sidebar}"/></a></div>{/block:IfSidebarImage}
  291.  
  292. {block:IfShowTitle}<div class="btitle"><a href="/">{Title}</a></div>{/block:IfShowTitle}
  293.  
  294. <div class="desc">{Description}</div>
  295.  
  296. <hr style="border:0px;border-top:1px dotted {color:borders};margin:25px auto;">
  297.     <div class="nav">
  298.     {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a><br>{/block:ifLink1}
  299.     {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a><br>{/block:ifLink2}
  300.     {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a><br>{/block:ifLink3}
  301.     {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a><br>{/block:ifLink4}
  302.     {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  303.     </div>
  304. </div>
  305.  
  306. <div class="entries">
  307.  
  308. {block:Posts}
  309. <div class="posts" id="{PostID}">
  310.  
  311. {block:Text}
  312. {block:Title}<div class="posttitle">{Title}</div>{/block:Title}
  313. {Body}
  314. {/block:Text}
  315.  
  316. {block:Answer}<div class="ask">
  317. <div class="asker"><img src="{AskerPortraitURL-24}" class="askimage"/>
  318. {Asker} said:</div>
  319. <div class="question">{Question}</div></div>
  320. <div class="answer">{Answer}</div>
  321. {/block:Answer}
  322.  
  323. {block:Quote}
  324. <div class="quote">{Quote}</div>
  325. {block:Source}<div class="quotesource">— {Source}</div>{/block:Source}
  326. {/block:Quote}
  327.  
  328. {block:Link}
  329. <div class="posttitle"><a href="{URL}">{Name}</a></div>
  330. {block:Description}{Description}{/block:Description}
  331. {/block:Link}
  332.  
  333. {block:Chat}
  334. {block:Title}<div class="posttitle">{Title}</div>{/block:Title}
  335. {block:Lines}<span class="line_{Alt}">{block:Label}
  336. <span class="label">{Label}</span>{/block:Label} {Line}</span><br>
  337. {/block:Lines}
  338. {/block:Chat}
  339.  
  340. {block:Photo}
  341. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  342. {block:Caption}{Caption}{/block:Caption}
  343. {/block:Photo}
  344.  
  345. {block:Photoset}
  346. {Photoset-400}
  347. {block:Caption}{Caption}{/block:Caption}
  348. {/block:Photoset}
  349.  
  350. {block:Audio}
  351. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div></div>
  352. {block:AlbumArt}<img src="{AlbumArtURL}" style="width:55px; height:55px"/>{/block:AlbumArt}
  353. <div style="vertical-align:top;display:inline-block;margin-left:5px">
  354. {block:TrackName}{TrackName}{/block:TrackName}
  355. {block:Artist} by {Artist}{/block:Artist}<br>
  356. {block:Album}{Album}{/block:Album}<br>
  357. {block:Playcount}{PlayCountWithLabel}{/block:Playcount}
  358. </div>
  359. {block:Caption}{Caption}{/block:Caption}
  360. {/block:Audio}
  361.  
  362. {block:Video}
  363. {Video-400}
  364. {block:Caption}{Caption}{/block:Caption}
  365. {/block:Video}
  366.  
  367. {block:Date}<hr style="border:0px;border-top:1px solid {color:borders};margin:10px 0;">
  368.  
  369. <div class="date">
  370. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth}</a>
  371.  
  372. <a href="{ReblogURL}" target="_blank" style="float:right;font-style:italic;font-size:10.4px;letter-spacing:.5px;border-bottom:1px dotted {color:links};padding-bottom: 2px;margin-left:5px;color:{color:permalink color};"> reblog</a>
  373.  
  374. {block:NoteCount}<div style="float:right;font-size:11px;letter-spacing:.5px;"><a href="{Permalink}" style="color:{color:Permalink color};font-size:10.4px;margin-right:5px" title="notes">{NoteCount}</a>l</div>{/block:NoteCount}
  375. </div>
  376. {/block:Date}
  377.  
  378. {block:HasTags}<div class="tags">{block:Tags}
  379. <a href="{TagURL}">{Tag} </a>
  380. {/block:Tags}</div>{/block:HasTags}
  381.  
  382. {block:PermalinkPage}
  383. {block:RebloggedFrom}<div class="via">
  384. reblogged from: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a><br>
  385. originally by: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  386. </div>{/block:RebloggedFrom}
  387. {/block:PermalinkPage}
  388.  
  389. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  390.  
  391. {block:PostNotes}
  392. <div class="notes">{PostNotes}</div>
  393. {/block:PostNotes}
  394.  
  395. </div><!--posts-->
  396. {/block:Posts}
  397.  
  398. {block:Pagination}<div class="pagi">
  399. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">back</a>{/block:PreviousPage}
  400. {block:NextPage}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{NextPage}" class="jump_page">next</a>{/block:NextPage}</div>
  401. {/block:Pagination}
  402.  
  403. </div> <!--entries-->
  404.  
  405. </div>
  406.  
  407. <div style="position:fixed;bottom:18px;right:18px;font-family:calibri;font-size:14.5px;line-height:18px;height:20px;text-align:center;width:20px;color:#777;letter-spacing:.7px;background:white"><a style="color:#555" href="http://southcodes.tumblr.com" title="southcodes">sc</a></div>
  408.  
  409. <!--        tooltips        -->
  410. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  411. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  412. <script>
  413. (function($){
  414. $(document).ready(function(){
  415. $("a[title]").style_my_tooltips({
  416. tip_follows_cursor:true,
  417. tip_delay_time:30,
  418. tip_fade_speed:300,
  419. attribute:"title"
  420. });
  421. });
  422. })(jQuery);
  423. </script>
  424.  
  425.  
  426. </body>
  427. </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!