API tools faq
paste
Advertisement
southcodes

theme #5: sleepwalking

southcodes
Oct 30th, 2017
946
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.95 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - theme #5 'sleepwalking' 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.     - like button by @shythemes
  8.    
  9.     - k+ notes script by Qshythemes http://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  10.    
  11.     - pxu photosets by pixel union https://github.com/PixelUnion/Extended-Tumblr-Photoset
  12.         tutorial by @shythemes http://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets
  13.        
  14.     - un-nest tumblr captions plugin 2016 @magnusthemes & @neothm
  15. -->
  16.  
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.  
  21.     <title>{Title}</title>
  22.  
  23.     <link rel="shortcut icon" href="{favicon}">
  24.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  26.  
  27.     <meta name="viewport" content="width=device-width">
  28.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Montserrat:500" rel="stylesheet">
  29.    
  30.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  31.     <script src="//static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  32.     <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  33.     <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  34.  
  35. <meta name="image:header" content=""/>
  36. <meta name="image:sidebar" content=""/>
  37.  
  38. <meta name="if:400 posts" content="0"/>
  39. <meta name="if:HeaderImage" content="1"/>
  40. <meta name="if:PostShadow" content="1">
  41.  
  42. <meta name="color:background" content="#fafafa"/>
  43. <meta name="color:text" content="#333333"/>
  44. <meta name="color:links" content="#cd5c5c"/>
  45. <meta name="color:links hover" content="#ff0000"/>
  46. <meta name="color:post background" content="#ffffff"/>
  47. <meta name="color:header color" content="#faf0e6"/>
  48. <meta name="color:borders" content="#faf0e6"/>
  49. <meta name="color:shadows" content="#cccccc"/>
  50.  
  51. <meta name="text:Link 1" content="index" />
  52. <meta name="text:Link 1 URL" content="/" />
  53. <meta name="text:Link 2" content="mail" />
  54. <meta name="text:Link 2 URL" content="/ask" />
  55. <meta name="text:Link 3" content="" />
  56. <meta name="text:Link 3 URL" content="" />
  57. <meta name="text:Link 4" content="" />
  58. <meta name="text:Link 4 URL" content="" />
  59. <meta name="text:Link 5" content="" />
  60. <meta name="text:Link 5 URL" content="" />
  61.  
  62. <style type="text/css">
  63.  
  64. .tmblr-iframe {margin:.7em;opacity:.4;}
  65. .tmblr-iframe:hover {margin:.7em;opacity:.6;}
  66.  
  67. ::-webkit-scrollbar-thumb:vertical {
  68.     background-color: {color:links};
  69.     border-right:4px solid {color:background};
  70.     border-top:5px solid {color:background};
  71.     border-bottom:5px solid {color:background};}
  72. ::-webkit-scrollbar {
  73.     background-color: #ccc;
  74.     width:5px;
  75.     height:0;
  76.     border-right:4px solid {color:background};
  77.     border-top:5px solid {color:background};
  78.     border-bottom:5px solid {color:background};}
  79. pre{
  80.     font-family:consolas;
  81.     white-space: pre-wrap;       /* css-3 */
  82.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  83.     white-space: -pre-wrap;      /* Opera 4- */
  84.     white-space: -o-pre-wrap;    /* Opera 7 */
  85.     word-wrap: break-word;       /* Internet Explorer 5.5+ */}
  86.  
  87. body, figure{margin: 0;padding: 0}
  88. body {font: 14px 'Open Sans', sans-serif;color:{color:text};background:{color:background};padding-top:6em;}
  89. a {text-decoration: none;color:{color:links};word-break:break-word;}
  90. a:hover {color:{color:links hover};}
  91. img {display:block;margin:0;height:auto;}
  92. h2 {margin:.4em 0;}
  93. p {margin:.8em 0;}
  94. hr {border:0;border-top:1px solid #aaa;margin:.2em 0;}
  95.  
  96. main,.posts,header,#himg {
  97.     {block:IfNot400Posts}
  98.     width:518px;
  99.     {/block:IfNot400Posts}
  100.     {block:If400Posts}
  101.     width:418px;
  102.     {/block:If400Posts}
  103.     box-sizing:border-box;}
  104. .posttitle {margin:.2em}
  105. {block:AskPage}
  106. .posttitle {margin:.3em .8em .8em;line-height:130%;font-size:1.4em;text-align:center;color:{color:links};}
  107. {/block:AskPage}
  108.  
  109. /* header */
  110.  
  111. header {
  112.     {block:IfPostShadow}
  113.     box-shadow: 1px 1px 2px {color:shadows};
  114.     {/block:IfPostShadow}
  115.     margin:0 auto;display:block;}
  116. #header {background: {color:header color};font-size: .95em;padding:1.5em;}
  117. #himg {display:block;margin:0;}
  118. #simg {
  119.     width:5.3em;
  120.     height:5.3em;
  121.     border-radius: 100%;
  122.     display: inline-block;
  123.     vertical-align: middle;
  124.     margin-right:1em;}
  125. #sinside {display: inline-block;vertical-align: middle;max-width:calc(100% - 6.6em);}
  126. #btitle {
  127.     font-size: 1.18em;
  128.     letter-spacing: .04em;
  129.     font-weight: 500;
  130.     font-family: 'Montserrat',sans-serif;}
  131. #name {font-size: .9em;}
  132. #desc {letter-spacing: .02em;font-style: italic;margin-top:.57em;font-size: .96em;}
  133.  
  134.  
  135. /* nav */
  136.  
  137. nav {margin-top:1.8em; font-size: 1.01em;letter-spacing: .03em;font-weight: 600;line-height:1.7em;}
  138. nav li a{margin: 0 .8em;}
  139. nav ul,nav li {margin:0;padding:0;list-style-type: none;display: inline-block;}
  140. nav li::first-letter{text-transform: uppercase;}
  141.  
  142.  
  143. /* main */
  144.  
  145. main {font-size:.95em;margin:0 auto 2em;}
  146.  
  147. .posts {
  148.     border-radius:.1em;
  149.     margin:14em auto 0;background:{color:post background};
  150.     border: .3em solid {color:borders};
  151.     border-bottom: .6em solid {color:borders};
  152.     {block:IfPostShadow}
  153.     box-shadow: 1px 1px 2px {color:shadows};
  154.     {/block:IfPostShadow}}
  155. .postc {padding: .4em;}
  156. .photo {display:block;margin:0;width:100%;}
  157.  
  158. /*               posts              */
  159.  
  160. /*      asks    */
  161.  
  162. .asker {text-align:right;margin-bottom:.5em;font-weight:600;}
  163.  
  164. /*    quotes    */
  165.  
  166. .quote {
  167.     font-size:1.1em;
  168.     margin:.3em;
  169. }
  170. .qsrc {
  171.     font-size:.9em;
  172.     font-style:italic;
  173.     text-align:right;
  174.     margin:.7em .3em .3em;
  175. }
  176.  
  177. /*    links    */
  178.  
  179. .linkp {
  180.     background:{color:borders};
  181.     padding:.5em;
  182.     margin:.2em;
  183.     display:block;
  184.     font-size:1.2em;
  185.     font-weight:600;}
  186.  
  187. /*    chat    */
  188.  
  189. .line_even,.line_odd {line-height:1.5em;padding:.3em;}
  190. .label_odd {color:{color:links};font-weight:600;}
  191. .label_even{font-weight:600;margin-left:.5em;}
  192.  
  193. /*    captions    */
  194.  
  195. .caption{padding:0em .8em 0em;}
  196. .tumblr_blog {font-weight:600;margin:.8em 0 0;display:block;}
  197. .tumblr_parent {margin:0;padding:0;}
  198. .caption blockquote {border:none; padding:0;margin:0;}
  199. .caption blockquote blockquote{border-left:1px solid #ddd;padding-left:.5em;}
  200. .caption img {max-width:100%;height:auto;}
  201. .caption li,.caption  ol,.caption  ul {max-width:90%}
  202. /* extras */
  203.  
  204. date {display:block;
  205. text-transform:lowercase;
  206. background:{color:borders};
  207. padding:.15em .6em .5em;
  208. text-align:right;
  209. font-size:.92em;}
  210. .pnotes {font-size:.92em;float:left;vertical-align:bottom;}
  211.  
  212. .rl {text-align:right;padding:.35em;background:{color:borders};}
  213. .rbg {font-size:.7em;
  214.     text-transform: uppercase;
  215.     letter-spacing:.04em;}
  216. svg {width:10px;height:auto;opacity:.5;display:block;overflow:visible;}
  217. .controls {display:inline-block;margin:0em .2em 0 .5em;line-height:3em;}
  218. .controls .like .liked + svg {opacity:1;}
  219. .controls .like .liked + svg path {fill:#ec5a5a;}
  220. .controls .like .like_button {position:relative;}
  221. .controls .like .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:2;opacity:0;}
  222.  
  223. .tags {
  224.     background:{color:borders};
  225.     padding: .6em 1em .4em;
  226.     font-size:.85em;
  227.     line-height:160%;}
  228. .tags a{margin-right:1.3em;}
  229.  
  230. .via {
  231.     background:{color:borders};
  232.     text-align:right;
  233.     padding:.6em;
  234.     line-height:2em;
  235.     font-size:.9em;}
  236.  
  237. .notes {
  238.     font-size:1em;
  239.     line-height:2em;
  240.     margin:6em auto;
  241.     box-sizing:border-box;}
  242. .notes ol{max-height:30em;overflow:auto;padding:.2px;}
  243. .notes a{font-weight:600;}
  244. .notes img{display:none;}
  245. .notes li, .notes ol {
  246.     margin:0;
  247.     padding:0;
  248.     list-style-type:none;}
  249. .notes blockquote {margin:0;padding:0;}
  250.    
  251. .jump_page,.jump_page2 {
  252.     display:block;
  253.     margin:5em 0 4em;}
  254.  
  255. .jump_page {float:left;}
  256. .jump_page2 {float:right;}
  257.    
  258. .ttop {
  259.     margin-top:4em;
  260.     font-size:.8em;
  261.     text-align:center;
  262.     clear:both;}
  263.  
  264. {CustomCSS}
  265.  
  266. </style>
  267. </head>
  268. <body id="top">
  269.  
  270. <header>
  271. {block:IfHeaderImage}
  272. <a href="/"><img id="himg" src="{image:header}"/></a>
  273. {/block:IfHeaderImage}
  274. <div id="header">
  275.     <a href="/"><img id="simg" src="{image:sidebar}"/></a>
  276.  
  277. <div id="sinside">
  278.     <div id="btitle">{Title}</div>
  279.     <div id="name"><a href="/">@{name}</a></div>
  280.     <div id="desc">{Description}</div>
  281. </div>
  282.  
  283. <nav>
  284.     <ul>
  285.     {block:iflink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:iflink1}
  286.     {block:iflink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:iflink2}
  287.     {block:iflink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:iflink3}
  288.     {block:iflink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:iflink4}
  289.     {block:iflink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:iflink5}
  290.     </ul>
  291. </nav>
  292. </div><!-- header -->
  293. </header>
  294.  
  295. <main>
  296.  
  297. {block:Posts}
  298. <article class="posts" id="{PostID}">
  299.  
  300. {block:Date}
  301. <date>
  302. {block:NoteCount}<a  class="pnotes" href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
  303. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithSuffix}">{ShortDayOfWeek}</a>
  304. </date>{/block:Date}
  305.  
  306. <div class="postc">
  307. {block:Text}
  308. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  309. {block:Body}<div class="caption">{Body}</div>{/block:Body}
  310. {/block:Text}
  311.  
  312. {block:Answer}<div style="margin:.8em .8em .1em;padding:.7em;border-radius:.3em;background:{color:borders}">
  313. <div class="asker">{Asker} typed...</div>
  314. <div class="question">{Question}</div></div>
  315. <div class="answer caption">{Answer}</div>
  316. {/block:Answer}
  317.  
  318. {block:Quote}
  319. <div class="quote">{Quote}</div>
  320. {block:Source}<div class="qsrc">{Source}</div>{/block:Source}
  321. {/block:Quote}
  322.  
  323. {block:Link}
  324. <a class="linkp" href="{URL}">{Name}</a>
  325. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  326. {/block:Link}
  327.  
  328. {block:Chat}
  329. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  330. {block:Lines}{block:Label}
  331. <div class="line_{alt}"><span class="label_{alt}">{Label}</span>{/block:Label} {Line}</div>
  332. {/block:Lines}
  333. {/block:Chat}
  334.  
  335. {block:Photo}
  336. <img class="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  337. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  338. {/block:Photo}
  339.  
  340. {block:Photoset}
  341. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  342. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  343. {/block:Photoset}
  344.  
  345. {block:Audio}{block:AudioPlayer}<div style="padding:.7em .7em .4em"><div style="position:absolute;max-width:32px;overflow:hidden;margin:14px 0 0 12px;opacity:.7">{AudioPlayerBlack}</div>{/block:AudioPlayer}{block:AlbumArt}<img src="{AlbumArtURL}" style="width:55px; height:55px;vertical-align:middle;display:inline-block;"/>{/block:AlbumArt}<div style="display:inline-block;vertical-align:middle;margin-left:1em;width:80%;">{block:TrackName}{TrackName} {/block:TrackName}{block:Artist}by {Artist}{/block:Artist}{block:Album}<br>{Album}{/block:Album}
  346. {block:Playcount}<br>{PlayCountWithLabel}{/block:Playcount}</div></div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  347.  
  348. {block:Video}
  349. {block:If400Posts}
  350. {Video-400}
  351. {/block:If400Posts}
  352. {block:IfNot400Posts}
  353. {Video-500}
  354. {/block:IfNot400Posts}
  355. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  356. {/block:Video}
  357. </div>
  358.  
  359. {block:IndexPage}
  360. {block:Date}
  361. <div class="rl">
  362. <span class="rbg"><a href="{ReblogURL}" title="reblog" target="_blank">reblog</a></span>
  363.  
  364. <div class="controls"><a class="like">{LikeButton}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewbox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg></a></div>
  365. </div>{/block:Date}
  366. {/block:IndexPage}
  367.  
  368. {block:HasTags}<div class="tags">{block:Tags}
  369. <a href="{TagURL}">#{Tag} </a>
  370. {/block:Tags}</div>{/block:HasTags}
  371.  
  372. {block:PermalinkPage}
  373. {block:RebloggedFrom}<div class="via">
  374. via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a><br>
  375. src <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  376. </div>{/block:RebloggedFrom}
  377. {/block:PermalinkPage}
  378.  
  379. {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} -->
  380.  
  381.  
  382. </article> <!--posts-->
  383.  
  384. {block:PostNotes}
  385. <div class="notes">{PostNotes}</div>
  386. {/block:PostNotes}
  387. {/block:Posts}
  388.  
  389. {block:Pagination}<div class="pagi">
  390. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">back</a>{/block:PreviousPage}
  391. {block:NextPage}<a href="{NextPage}" class="jump_page2">next</a>{/block:NextPage}</div>
  392. {/block:Pagination}
  393.  
  394. {block:IndexPage}<div class="ttop"><a href="#top">go to top</a></div>{/block:IndexPage}
  395.  
  396. </main>
  397.  
  398.  
  399.  
  400. <a style="position:fixed;bottom:1.3rem;right:1.3rem;font-family:calibri;font-size:1rem;line-height:14px;height:14px;padding:.3rem;color:#555;text-align:center;letter-spacing:.7px" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  401.  
  402. <!-- scripts -->
  403.  
  404. <script type="text/javascript">
  405.     var $container = $('.posts');
  406.     $container.find('.pnotes').each(function(){
  407.         var n = $(this).html().split(' ')[0].replace(/,/g, '');
  408.         if (n > 999) {
  409.             n = Math.floor(n / 100) / 10;
  410.             $(this).text(n + 'K');
  411.         }
  412.     });
  413. </script>
  414.  
  415.  
  416. <script>
  417. $(document).ready(function(){
  418.    $('.photo-slideshow').pxuPhotoset({
  419.        lightbox: true,
  420.        rounded: false,
  421.        gutter: '2px',
  422.        borderRadius: '0px',
  423.        photoset: '.photo-slideshow',
  424.        photoWrap: '.photo-data',
  425.        photo: '.pxu-photo'
  426.    });
  427. });
  428. </script>
  429.  
  430. <script>
  431. $(document).ready(function(){
  432.     $('.posts').unnest({
  433.     yourCaption: ".caption",
  434.     wrapName: ".tumblr_parent",
  435.     newCaptionUsername: true,
  436.     originalPostCaptionUsername: false,
  437.     tumblrAvatars: false,
  438.     usernameColon: false
  439.     });
  440. });
  441. </script>
  442.  
  443. <script type="text/javascript">
  444.     $('a').click(function(){
  445.     $('html, body').animate({
  446.         scrollTop: $( $(this).attr('href') ).offset().top
  447.     }, 450);
  448.     return false;
  449. });
  450. </script>
  451. </body>
  452. </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!