API tools faq
paste
Advertisement
altraviolence

theme 04 - atlas

altraviolence
Sep 6th, 2017
1,354
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. ATLAS theme (04) by PEACHTHMS | peachthms.tumblr.com
  6. V1.0
  7.  
  8. - do not claim this page or any of the code as your own
  9. - do not redistribute this page or any of the code as your own
  10. - do not mix my code with another theme maker's code
  11. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  12.  
  13. magnusthemes, neothm - unnested captions
  14. cyantists - fade in
  15.  
  16. -->
  17.    
  18. <head>
  19.    
  20. <title>{Title} {block:PostSummary}| {PostSummary}{/block:PostSummary}</title>
  21.    
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <meta charset="UTF-8">
  25. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Karla|PT+Sans|Source+Sans+Pro" rel="stylesheet">
  28.  
  29. <link href="https://file.myfontastic.com/UNcaNR9VcsdFqha2VdHXSM/icons.css" rel="stylesheet">
  30.  
  31. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  32. <meta name="color:background" content="#f1f1f1"/>
  33. <meta name="color:post background" content="#ffffff"/>
  34. <meta name="color:text" content="#686868"/>
  35. <meta name="color:links" content="#686868"/>
  36. <meta name="color:accent" content="#e0c1c1"/>
  37. <meta name="color:accent2" content="#48546e"/>
  38. <meta name="color:accent3" content="#e5e5e5"/>
  39. <meta name="text:link 1 title" content=""/>
  40. <meta name="text:link 1" content=""/>
  41. <meta name="text:link 2 title" content=""/>
  42. <meta name="text:link 2" content=""/>
  43. <meta name="text:link 3 title" content=""/>
  44. <meta name="text:link 3" content=""/>
  45. <meta name="image:sidebar image" content=""/>
  46. <meta name="if:sidebar image" content=""/>
  47. <meta name="if:tumblr icon" content=""/>
  48. <meta name="if:custom icon" content=""/>
  49. <meta name="if:rounded edges" content=""/>
  50. <meta name="if:toggle nav" content=""/>
  51. <meta name="if:fixed sidebar" content=""/>
  52. <meta name="if:link 1" content=""/>
  53. <meta name="if:link 2" content=""/>
  54. <meta name="if:link 3" content=""/>
  55. <meta name="select:font" content="PT Sans" title="PT Sans"/>
  56. <meta name="select:font" content="Karla" title="Karla"/>
  57. <meta name="select:font" content="Source Sans Pro" title="Source Sans Pro"/>
  58. <meta name="select:font size" content="11px" title="11px"/>
  59. <meta name="select:font size" content="12px" title="12px"/>
  60. <meta name="select:font size" content="13px" title="13px"/>
  61.  
  62. <style type="text/css">
  63.  
  64. * {
  65.     margin: 0;
  66.     padding: 0;
  67. }
  68.  
  69. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  70.     margin-top: 3px;
  71.     right: 5px;
  72.     z-index: 99999999999;
  73.     transform: scale(0.7,0.7);
  74.     -webkit-filter: invert(50%);
  75.     filter: invert(50%);
  76. }
  77.  
  78. ::-moz-selection {
  79.     background-color: transparent;
  80.     color: {color:accent};
  81. }
  82.  
  83. ::selection {
  84.     background-color: transparent;
  85.     color: {color:accent};
  86. }
  87.  
  88. ::-webkit-scrollbar {
  89.     width: 5px;
  90.     height: 5px;
  91. }
  92.  
  93. ::-webkit-scrollbar-thumb {
  94.     background: {color:accent};
  95. }
  96.        
  97. ::-webkit-scrollbar-track {
  98.     background: #ffffff;
  99. }
  100.  
  101. /** cyantists | fade in **/
  102.  
  103. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  104. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  105. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  106. .fade-in {
  107.     opacity: 0;
  108.     -webkit-animation: fadeIn ease-in 1;
  109.     -moz-animation: fadeIn ease-in 1;
  110.     animation: fadeIn ease-in 1;
  111.     -webkit-animation-fill-mode:forwards;
  112.     -moz-animation-fill-mode:forwards;
  113.     animation-fill-mode:forwards;
  114.     -webkit-animation-duration:1s;
  115.     -moz-animation-duration:1s;
  116.     animation-duration:1s;
  117. }
  118. .fade-in.one {
  119.     -webkit-animation-delay:0s;
  120.     -moz-animation-delay:0s;
  121.     animation-delay:0s;
  122. }
  123. .fade-in.two {
  124.     -webkit-animation-delay:0.8s;
  125.     -moz-animation-delay:0.8s;
  126.     animation-delay:0.8s;
  127. }
  128.  
  129. body {
  130.     font-family: {select:font}, sans-serif;
  131.     background-color: {color:background};
  132.     color: {color:text};
  133.     font-size: {select:font size};
  134.     line-height: 2.2em;
  135. }
  136.  
  137. h1, h2, h3, h4, h5, h6 {
  138.     color: {color:accent2};
  139.     margin-bottom: 5px;
  140. }
  141.  
  142. p {
  143.     margin: 10px 0;
  144. }
  145.  
  146. a {
  147.     color: {color:links};
  148.     text-decoration: none;
  149. }
  150.  
  151. a:hover {
  152.     color: {color:accent2};
  153.     -webkit-transition: all 0.5s ease;
  154.     -moz-transition: all 0.5s ease;
  155.     -o-transition: all 0.5s ease;
  156.     transition: all 0.5s ease;
  157. }
  158.  
  159. pre {
  160.     margin: 10px 0;
  161.     padding: 20px;
  162.     font-family: Courier New, monospace;
  163.     white-space: pre-wrap;
  164.     white-space: -moz-pre-wrap;
  165.     white-space: -pre-wrap;
  166.     white-space: -o-pre-wrap;
  167.     word-wrap: break-word;
  168.     background-color: #393939;
  169.     color: #f8f8f8;
  170.     max-width: 540px;
  171.     overflow: auto;
  172. }
  173.  
  174. small, big {
  175.     font-size: {select:font size};
  176. }    
  177.  
  178. header {
  179.     z-index: 99999;
  180.     top: 0;
  181.     width: 100%;
  182.     height: 60px;
  183.     position: fixed;
  184.     display: flex;
  185.     align-items: center;
  186.     justify-content: space-between;
  187.     background-color: {color:post background};
  188.     border-bottom: 1px solid {color:accent3};
  189. }
  190.  
  191. .headerbox {
  192.     margin: 0 20px;
  193. }
  194.  
  195. #wrapper {
  196.     width: 940px;
  197.     margin: 0 auto;
  198.     display: flex;
  199.     align-items: flex-start;
  200.     justify-content: space-between;
  201.     {block:iffixedsidebar}
  202.     display: block;
  203.     {/block:iffixedsidebar}
  204. }
  205.  
  206. aside {
  207.     margin-top: 100px;
  208.     background-color: {color:post background};
  209.     width: 200px;
  210.     padding: 15px;
  211.     {block:ifroundededges}
  212.     border-radius: 4px;
  213.     -moz-border-radius: 4px;
  214.     -webkit-border-radius: 4px;
  215.     {/block:ifroundededges}
  216.     {block:iffixedsidebar}
  217.     position: fixed;
  218.     top: 0;
  219.     margin-left: 710px;
  220.     {/block:iffixedsidebar}
  221. }
  222.  
  223. aside h2 {
  224.     font-weight: bold;
  225. }
  226.  
  227. aside h2 a {
  228.     color: {color:accent};
  229. }
  230.  
  231. aside ul {
  232.     margin: 0;
  233.     margin-top: 10px;
  234.     list-style: none;
  235. }
  236.  
  237. aside ul ul {
  238.     margin-top: 5px;
  239. }
  240.  
  241. aside li {
  242.     padding: 7px;
  243.     background-color: {color:background};
  244.     border-bottom: 5px solid {color:post background};
  245.     text-align: right;
  246. }
  247.  
  248. aside li:last-of-type {
  249.     border: none;
  250. }
  251.  
  252. aside li a {
  253.     color: #aaaaaa;
  254. }
  255.  
  256. aside li a:hover {
  257.     color: {color:accent};
  258. }
  259.  
  260. aside img {
  261.     width: 100%;
  262. }
  263.  
  264. #drop a:hover {
  265.     cursor: help;
  266. }
  267.  
  268. #nav {
  269.     {block:iftogglenav}
  270.     display: none;
  271.     {/block:iftogglenav}
  272. }
  273.  
  274. #nav a {
  275.     -webkit-transition: all 0.5s ease;
  276.     -moz-transition: all 0.5s ease;
  277.     -o-transition: all 0.5s ease;
  278.     transition: all 0.5s ease;
  279. }
  280.  
  281. #nav a:hover {
  282.     padding-right: 20px;
  283. }
  284.  
  285. #postcol {
  286.     margin-top: -100px;
  287.     width: 590px;
  288. }    
  289.  
  290. #postcol ul {
  291.     list-style: square;
  292. }
  293.  
  294. #postcol ul, ol {
  295.     margin-left: 15px;
  296. }
  297.  
  298. .posts {
  299.     margin: 0 auto;
  300.     margin: 200px 0;
  301.     padding: 10px 25px 5px 25px;
  302.     width: 540px;
  303.     background-color: {color:post background};
  304.     word-wrap: break-word;
  305.     {block:ifroundededges}
  306.     border-radius: 4px;
  307.     -moz-border-radius: 4px;
  308.     -webkit-border-radius: 4px;
  309.     {/block:ifroundededges}
  310. }
  311.  
  312. .posts:last-of-type {
  313.     margin-bottom: 50px;
  314. }
  315.  
  316. #blogavatar {
  317.     position: absolute;
  318.     margin-left: -100px;
  319.     margin-top: -10px;
  320. }
  321.  
  322. #blogavatar img {
  323.     width: 48px;
  324.     {block:ifroundededges}
  325.     border-radius: 4px;
  326.     -moz-border-radius: 4px;
  327.     -webkit-border-radius: 4px;
  328.     {/block:ifroundededges}
  329. }
  330.  
  331. #ask {
  332.     font-size: {select:font size};
  333.     border-bottom: 1px solid {color:background};
  334.     padding-bottom: 5px;
  335. }
  336.  
  337. #ask span {
  338.     text-transform: lowercase;
  339. }
  340.  
  341. #quote {
  342.     font-size: calc({select:font size} + 2px);
  343. }
  344.  
  345. #source {
  346.     font-size: calc({select:font size} - 1px);
  347. }
  348.  
  349. #lines {
  350.     padding: 10px 0;
  351. }
  352.  
  353. #pag {
  354.     margin-bottom: 100px;
  355.     text-align: center;
  356. }
  357.  
  358. #pag a {
  359.     color: {color:link};
  360.     text-decoration: none;
  361. }
  362.  
  363. #pag a:hover {
  364.     color: {color:accent};
  365. }
  366.  
  367. #pag .jump_page, .current_page {
  368.     color: #aaaaaa;
  369.     padding: 5px;
  370. }
  371.  
  372. #pag .current_page {
  373.     font-weight: bold;
  374. }
  375.  
  376. .info {
  377.     display: flex;
  378.     justify-content: space-between;
  379.     margin-bottom: 10px;
  380. }
  381.  
  382. .info a, .date a, #tags a {
  383.     color: #aaaaaa;
  384.     font-size: calc({select:font size} - 1px);
  385.     text-transform: lowercase;
  386. }
  387.  
  388. #tags {
  389.     width: 500px;
  390.     text-transform: lowercase;
  391.     padding-bottom: 0;
  392.     margin-bottom: 0;
  393.     word-wrap: break-word;
  394. }
  395.  
  396. #tags a {
  397.     margin-right: 30px;
  398. }
  399.  
  400. .perma a {
  401.     margin-right: 10px;
  402. }
  403.  
  404. .notecount a {
  405.     font-size: calc({select:font size} - 1px);
  406.     color: #aaaaaa;
  407.     padding-right: 20px;
  408. }
  409.  
  410. #notes {
  411.     width: 540px;
  412.     background-color: {color:post background};
  413.     margin: 100px auto;
  414.     padding: 25px;
  415.     font-size: calc({select:font size} - 1px);
  416. }
  417.  
  418. #notes a.more_notes_link {
  419.     text-transform: lowercase;
  420. }
  421.  
  422. #notes ol {
  423.     list-style: none;
  424. }
  425.  
  426. #notes img {
  427.     display: none;
  428. }
  429.  
  430. .caption {
  431.     width: 540px;
  432.     border: 0;
  433. }
  434.  
  435. .tumblr_parent a.tumblr_blog {
  436.     display: block;
  437.     vertical-align: middle;
  438.     margin-bottom: 5px;
  439.     font-weight: bold;
  440. }
  441.  
  442. .tumblr_parent .tumblr_avatar {
  443.     width: 20px;
  444.     height: 20px;
  445.     margin-right: 10px;
  446.     display: inline-block;
  447.     float: left;
  448.     clear: left;
  449.     border-radius: 4px;
  450. }
  451.  
  452. .tumblr_avatar img {
  453.     vertical-align: center;
  454. }
  455.  
  456. .tumblr_parent {
  457.     margin: 0 0 5px 0;
  458. }
  459.  
  460. .tumblr_parent p {
  461.     margin-top: -5px;
  462. }
  463.  
  464. #btt {
  465.     position: fixed;
  466.     bottom: 10px;
  467.     right: 10px;
  468.     z-index: 999999;
  469.     color: {color:accent2};
  470.     text-align: center;
  471.     {block:iffixedsidebar}
  472.     display: none;
  473.     {/block:iffixedsidebar}
  474. }
  475.  
  476. #btt:hover {
  477.     color: {color:accent};
  478. }
  479.  
  480. .searchbar input {
  481.     border: 0;
  482.     padding: 3px;
  483.     font-family: 'PT Sans', sans-serif;
  484.     font-size: {select:font size};
  485.     font-style: italic;
  486.     color: {color:text};
  487. }
  488.  
  489. .searchbar input:focus {
  490.     outline: 0;
  491. }
  492.  
  493. placeholder {
  494.     color: {color:text};
  495. }
  496.    
  497. #credit {
  498.     font-size: 10px;
  499.     bottom: 10px;
  500.     left: 10px;
  501.     font-weight: bold;
  502.     position: fixed;
  503. }
  504.  
  505. </style>
  506.  
  507. </head>
  508.  
  509. <body id="top">
  510.  
  511. <header>
  512.    
  513.     <div class="headerbox">
  514.     <form class="searchbar" action="/search" method="get"><input type="text" name="q" placeholder="search {name}..." value="" autocomplete="off"/></form>
  515.     </div>
  516.    
  517. </header>
  518.  
  519. <section id="wrapper">
  520.    
  521.    
  522. <article id="postcol">
  523.    
  524. {block:Posts}
  525.    
  526. {block:ContentSource}
  527. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  528. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  529. {/block:ContentSource}
  530. <!-- {block:NoRebloggedFrom}
  531. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  532. {/block:NoRebloggedFrom} -->
  533.                                
  534. <article class="posts">
  535.    
  536. {block:Date}
  537. <div id="blogavatar">
  538.     <a href="/">
  539.     {block:iftumblricon}
  540.     <img src="{PortraitURL-48}">
  541.     {/block:iftumblricon}
  542.    
  543.     {block:ifcustomicon}
  544.     <img src="{image:custom icon}">
  545.     {/block:ifcustomicon}
  546.     </a>
  547. </div>
  548.    
  549. {block:RebloggedFrom}
  550. <div class="info">
  551.     <div class="perma">
  552.     <a href="{ReblogParentURL}">via: {ReblogParentName}</a>
  553.        
  554.     {block:PermalinkPage}
  555.     <a href="{ReblogRootURL}">source: {ReblogRootName}</a>
  556.     {/block:PermalinkPage}
  557.     </div>
  558.    
  559.     <div class="date">
  560.     <a href="{Permalink}">{DayOfWeek}, {TimeAgo}</a>
  561.     </div>
  562.  
  563. </div>
  564. {/block:RebloggedFrom}
  565.    
  566. {block:NotReblog}
  567. <div class="info">
  568.     <div class="perma">
  569.     <a href="{BlogURL}" title="posted by {Name}">{Name}</a>
  570.     </div>
  571.    
  572.     <div class="date">
  573.     <a href="{Permalink}">{DayOfWeek}, {TimeAgo}</a>
  574.     </div>
  575. </div>
  576. {/block:NotReblog}
  577. {/block:Date}
  578.    
  579. {block:Text}
  580. {block:Title}<h1>{Title}</h1>{/block:Title}
  581. <div class="caption">{Body}</div>
  582. {/block:Text}
  583.                                        
  584. {block:Photo}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a>
  585. {/block:Photo}
  586.            
  587. {block:Photoset}
  588. {Photoset}
  589. {/block:Photoset}
  590.                                    
  591. {block:Video}
  592. {Video-540}
  593. {/block:Video}
  594.                                        
  595. {block:Quote}
  596. <div id="quote">"{Quote}"</div>
  597. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  598. {/block:Quote}
  599.                                        
  600. {block:Link}
  601. <h1><a href="{URL}">{Name}</a></h1>
  602. {block:Description}{Description}{/block:Description}
  603. {/block:Link}
  604.                                    
  605. {block:Chat}
  606. {block:Title}<h1>{Title}</h1>{/block:Title}
  607. {block:Lines}<div id="lines">
  608. {block:Label}<b>{Label}</b>{/block:Label}
  609. <span>{Line}<br></span></div>{/block:Lines}
  610. {/block:Chat}
  611.        
  612. {block:Audio}
  613. {block:AudioEmbed}
  614. {AudioEmbed}
  615. {/block:AudioEmbed}
  616. {AudioPlayerWhite}
  617. {/block:Audio}
  618.    
  619. {block:Answer}
  620. <div id="ask"><span>{Asker} asked &mdash;</span> {Question}</div>
  621. {Answer}
  622. {/block:Answer}
  623.                                        
  624. {block:Caption}
  625. <div class="caption">{Caption}</div>
  626. {/block:Caption}
  627.        
  628. <div id="tags">
  629. {block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}{/block:HasTags}
  630. </div>
  631.    
  632. <div class="info">
  633.     <div class="notecount">
  634.     {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  635.     </div>
  636.        
  637.     {block:Date}
  638.     <a href="{ReblogURL}" class="icon-arrows-ccw" target="_blank" title="reblog this post?"></a>
  639.     {/block:Date}
  640. </div>
  641.    
  642. </article>
  643.  
  644. {block:PostNotes}
  645. <div id="notes">{PostNotes}</div>
  646. {/block:PostNotes}
  647.    
  648. {/block:Posts}    
  649.    
  650. {block:Pagination}
  651. <div id="pag">
  652.     {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">previous</a>{/block:PreviousPage}
  653.     {block:JumpPagination length="5"}
  654.     {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  655.     {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  656.     {block:NextPage}<a href="{NextPage}" class="jump_page">forward</a>{/block:NextPage}
  657. </div>
  658. {/block:Pagination}
  659.    
  660. </article>
  661.    
  662. <aside class="fade-in one">
  663.     <h2><a href="/">{Title}</a></h2>
  664.     {block:ifsidebarimage}<img src="{image:sidebar image}">{/block:ifsidebarimage}
  665.     {Description}
  666.     <ul>
  667.         {block:iftogglenav}<li id="drop"><a>navigation</a></li>{/block:iftogglenav}
  668.         <ul id="nav">
  669.             <li><a href="/">home</a></li>
  670.             <li><a href="/ask">message</a></li>
  671.             <li><a href="/archive">archive</a></li>
  672.             {block:iflink1}<li><a href="{text:link 1}">{text:link 1 title}</a></li>{/block:iflink1}
  673.             {block:iflink2}<li><a href="{text:link 2}">{text:link 2 title}</a></li>{/block:iflink2}
  674.             {block:iflink3}<li><a href="{text:link 3}">{text:link 3 title}</a></li>{/block:iflink3}
  675.         </ul>
  676.     </ul>
  677. </aside>
  678.    
  679. </section>
  680.  
  681. <div id="credit">
  682. <a href="http://peachthms.tumblr.com" title="theme by peachthms">< / ></a>
  683. </div>
  684.    
  685. <a href="#top" id="btt" class="icon-up" title="scroll to top" onclick="scrollToTop();return false"></a>
  686.  
  687. </body>
  688.  
  689. <script>
  690.     var timeOut;
  691. function scrollToTop() {
  692.     if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
  693.         window.scrollBy(0,-50);
  694.         timeOut=setTimeout('scrollToTop()',10);
  695.     }
  696.     else clearTimeout(timeOut);
  697. }
  698. </script>
  699.  
  700. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  701.  
  702. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  703.  
  704. <script> $(function(){  $('.posts').unnest({
  705.     yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  706.     wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  707.     newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  708.     originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  709.     tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  710.     tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  711.     usernameColon: false //if turned to false, removes the colon at the end of usernames
  712.   }); });
  713. </script>
  714.  
  715. <script>
  716. $("#drop").click(function(){
  717.     $("#nav").toggle(500);
  718. });    
  719. </script>
  720.  
  721. </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!