API tools faq
paste
Advertisement
circlejourney

Starset (Tumblr theme)

circlejourney
Jun 15th, 2015
488
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 28.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---
  4.  
  5. S T A R S E T
  6. DESIGNED BY CIRCLEJOURNEY
  7. circlejourney-themes.tumblr.com
  8.  
  9. --->
  10.    
  11.     <head>
  12.    
  13.     <script src="http://static.tumblr.com/g06rfu3/Iz5npyyq8/jquery-2.1.4.min.js"></script>
  14. <script src="http://static.tumblr.com/g06rfu3/Ej1npyyqv/masonry.pkgd.min.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
  16. <script src="http://static.tumblr.com/g06rfu3/iwFnpyyql/jquery.infinitescroll.min.js"></script>
  17. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  18.    
  19.     <meta name = "if:Title image" content = "1"/>
  20.     <meta name = "if:Truncate posts" content ="1"/>
  21.     <meta name = "if:Loading screen" content = "1"/>
  22.     <meta name = "if:Post background" content = "0"/>
  23.     <meta name = "if:Bar visible" content = "0"/>
  24.     <meta name = "image:Post Background" content = "http://static.tumblr.com/g06rfu3/hVznqwj9t/45-degree-fabric-dark.png"/>
  25.     <meta name = "image:Loading GIF" content = "http://static.tumblr.com/g06rfu3/5Xynpyy9t/723__4_.gif"/>
  26.     <meta name = "if:Userpic" content ="0"/>
  27.     <meta name = "image:Title Image" content = "http://static.tumblr.com/g06rfu3/2ATnpyyhz/starset3.jpg"/>
  28.     <meta name = "image:Background Image" content = ""/>
  29.     <meta name = "font:Main font" content = "Brutal Type"/>
  30.     <meta name = "font:Title font" content = "Alternate Gothic"/>
  31.     <meta name = "font:Quote font" content = "Capita"/>
  32.     <meta name = "color:Background color" content = "#EFEFEF"/>
  33.     <meta name = "color:Title color" content = "white"/>
  34.     <meta name = "color:Accent color" content = "#d9f5ca"/>
  35.     <meta name = "color:Container color" content = "#d7c9c9"/>
  36.     <meta name = "color:Post color" content = "#c0d1da"/>
  37.     <meta name = "color:Hyperlink color" content = "teal"/>
  38.    
  39.    
  40.     <style type="text/css">
  41.        
  42.         * {
  43.             -webkit-transition:0.2s all linear;
  44.             -moz-transition:0.2s all linear;
  45.             -o-transition:0.2s all linear;
  46.         }
  47.        
  48.    
  49.         body {
  50.             font-family:{font:Main font},Helvetica,sans-serif;
  51.             -webkit-font-smoothing: antialiased;
  52.             margin:0;
  53.             padding:0;
  54.             background:url("{image:Background Image}");
  55.             background-color:{color:Background color};
  56.             background-size:cover;
  57.             background-attachment:fixed;
  58.             width:100%;
  59.             height:100%;
  60.             font-size:11pt;
  61.             color:#333;
  62.         }
  63.        
  64.         img {
  65.             -webkit-filter:saturate(1.2) sepia(0.1);
  66.             -moz-filter:saturate(1.2) sepia(0.1);
  67.             -o-filter:saturate(1.2) sepia(0.1);
  68.             display:block;
  69.         }
  70.        
  71.         ::-webkit-scrollbar {
  72.             width:7px;
  73.         }
  74.        
  75.         ::-webkit-scrollbar:horizontal {
  76.             height:7px;
  77.         }
  78.        
  79.         ::-webkit-scrollbar-track {
  80.             background:transparent;
  81.         }
  82.        
  83.         ::-webkit-scrollbar-thumb {
  84.             background-color:white;
  85.         }
  86.        
  87.         a {
  88.             text-decoration:none;
  89.             margin:0;
  90.             padding:0;
  91.         }
  92.        
  93.         ol {
  94.             margin-right:10px;
  95.         }
  96.        
  97.         hr {
  98.             border:none;
  99.             border-bottom:1px solid rgba(0,0,0,0.3);
  100.             width:50%;
  101.             margin:10px auto;
  102.             padding:0;
  103.         }
  104.        
  105.         #loading {
  106.             position:fixed;
  107.             opacity:0.9;
  108.             top:0;
  109.             left:0;
  110.             width:100%;
  111.             height:100%;
  112.             background:url({image:Loading GIF}) #FFF;
  113.             background-position:center bottom 100px;
  114.             background-repeat:no-repeat;
  115.         }
  116.        
  117.         #container {
  118.             width:1240px;
  119.             margin:0 auto;
  120.             background:{color:Container color};
  121.             height:auto; !important
  122.         }
  123.            
  124.         #menubar {
  125.             position:relative;
  126.             display:block
  127.             background:gray;
  128.             color:{color:Title color};
  129.             width:1220px;
  130.             margin:0 10px;
  131.             padding:0;
  132.             {block:IfTitleImage}
  133.             width:100%;
  134.             margin:0;
  135.             background-image:url({image:Title Image});
  136.             background-size:cover;
  137.             background-position:center;
  138.             {/block:IfTitleImage}
  139.             overflow:hidden;
  140.         }
  141.        
  142.         #branding {
  143.             position:relative;
  144.             width:100%;
  145.             height:auto;
  146.             padding:30px 0;
  147.             {block:IfTitleImage}
  148.             padding:100px 0;
  149.             {block:IfUserpic}
  150.             padding:80px 0;
  151.             {/block:IfUserpic}
  152.             {/block:IfTitleImage}
  153.         }
  154.        
  155.         #favicon {
  156.             display:block;
  157.             position:relative;
  158.             max-width:80px;
  159.             border-radius:100px;
  160.             margin:auto;
  161.         }
  162.    
  163.         h1 {
  164.             display:block;
  165.             position:relative;
  166.             font-family:{font:Title font},Helvetica,sans-serif;
  167.             font-size:36pt;
  168.             font-weight:normal;
  169.             text-align:center;
  170.             margin:0;
  171.             padding:0;
  172.             text-shadow:0 0 5px {color:Title color};
  173.         }
  174.        
  175.         h1 a{
  176.             color:{color:Title color};
  177.         }
  178.        
  179.         #description {
  180.             text-align:center;
  181.             width:30%;
  182.             margin:10px auto 0 auto;
  183.             font-size:10pt;
  184.         }
  185.        
  186.         #description a {
  187.             color:{color:Title color};
  188.             font-weight:bold;
  189.             text-decoration:underline;
  190.         }
  191.        
  192.         .linklist {
  193.             width:100%;
  194.             position:absolute;
  195.             background:rgba(0,0,0,0.4);
  196.             font-size:10pt;            
  197.             list-style-type:none;
  198.             margin:0;
  199.             padding:0;
  200.  
  201.         }
  202.        
  203.         {block:IfBarVisible}
  204.         .linklist {
  205.             bottom:0;
  206.         }
  207.         {/block:IfBarVisible}
  208.        
  209.         {block:IfBarNotVisible}
  210.         .linklist {
  211.             bottom:-35px;
  212.         }
  213.         {/block:IfBarNotVisible}
  214.        
  215.         #menubar:hover .linklist {
  216.             bottom:0;
  217.         }
  218.    
  219.        
  220.         .linklist li {
  221.             color:{color:Accent color};
  222.             display:inline-block;
  223.             padding:10px;
  224.             line-height:15px;
  225.             background:rgba(77, 132, 132,0);
  226.             text-align:center;
  227.             min-width:60px;
  228.         }
  229.        
  230.         .linklist li:hover {
  231.             background:rgba(77, 132, 132,0.5);
  232.         }
  233.        
  234.         #themelink {
  235.             float:right;
  236.             color:white;
  237.         }
  238.        
  239.         #main {
  240.             width:1220px;
  241.             margin:0 auto;
  242.             margin-top:10px;
  243.             {block:PermalinkPage}
  244.             width:900px;
  245.             {/block:PermalinkPage}
  246.         }
  247.        
  248.         h2 {
  249.             padding:10px;
  250.             margin:0;
  251.             font-weight:normal;
  252.             font-size:16pt;
  253.             background:{color:Accent color};
  254.             color:{color:Hyperlink color};
  255.         }
  256.        
  257.         h3 {
  258.             padding:10px;
  259.             margin:0;
  260.             font-weight:normal;
  261.             font-size:16pt;
  262.             text-align:left;
  263.             color:{color:Accent color};
  264.             background:url({image:Title Image});
  265.             background-position:center;
  266.         }
  267.        
  268.         .post {
  269.             background:{color:Post color} {block:IfPostBackground}url({image:Post Background}){/block:IfPostBackground};
  270.             height:auto;
  271.             margin-bottom:10px;
  272.             display:block;
  273.             width:400px;
  274.             color:#333;
  275.             {block:IndexPage}
  276.             overflow:hidden;
  277.             {/block:IndexPage}
  278.             {block:PermalinkPage}
  279.             width:100%;
  280.             padding:10px;
  281.             {/block:PermalinkPage}
  282.         }
  283.        
  284.         .truncated {
  285.             height:800px;
  286.         }
  287.        
  288.         .post a {
  289.             color:{color:Hyperlink color};
  290.             font-weight:bold;
  291.         }
  292.        
  293.         .post p {
  294.             margin:10px;
  295.         }
  296.        
  297.         .post img {
  298.             height:auto; !important
  299.             margin:0;
  300.         }
  301.        
  302.         {block:PermalinkPage}
  303.         .post .textcontent {
  304.             margin:10px;
  305.         }
  306.         {/block:PermalinkPage}
  307.        
  308.         {block:IndexPage}
  309.         .post p img {
  310.             margin-left:-10px;
  311.         }
  312.         {/block:IndexPage}
  313.  
  314.         .photo img {
  315.             {block:IndexPage}
  316.             max-width:400px;
  317.             min-width:400px;
  318.             {/block:IndexPage}
  319.             {block:PermalinkPage}
  320.             max-width:100%;
  321.             {/block:PermalinkPage}
  322.         }
  323.        
  324.         .tmblr-full {
  325.             width:auto; !important
  326.         }
  327.        
  328.         .textcontent img, figure {
  329.             {block:IndexPage}
  330.             margin:10px 0;
  331.             max-width:400px;
  332.             min-width:400px;
  333.             {/block:IndexPage}
  334.             {block:PermalinkPage}
  335.             max-width:90%;
  336.             margin-left:auto;
  337.             margin-right:auto;
  338.             {/block:PermalinkPage}
  339.         }
  340.        
  341.         .photo, .photo-set {
  342.             min-height:100px;
  343.         }
  344.    
  345.         .photo-set {
  346.             display:block;
  347.         }
  348.        
  349.         .thephotoset,.thevideo {
  350.             position:relative;
  351.             width:700px;
  352.             margin-left:auto;
  353.             margin-right:auto;
  354.         }
  355.  
  356.         .thechat {
  357.             margin:10px;
  358.         }
  359.        
  360.         .answer .textcontent {
  361.             margin:0;
  362.         }
  363.        
  364.         .askbubble {
  365.             margin:10px;
  366.         }
  367.        
  368.         .theanswer {
  369.             text-align:right;
  370.             right:0;
  371.         }
  372.        
  373.         .ask {
  374.             display:inline-block;
  375.             background:{color:Accent color};
  376.             border-radius:10px;
  377.             padding:15px;
  378.             text-align:left;
  379.             {block:IndexPage}
  380.             max-width:270px;
  381.             {/block:IndexPage}
  382.             {block:PermalinkPage}
  383.             max-width:750px;
  384.             {/block:PermalinkPage}
  385.         }
  386.        
  387.         .ask img, .ask figure {
  388.             margin:10px auto;
  389.             min-width:250px;
  390.             max-width:250px;
  391.             {block:PermalinkPage}
  392.             max-width:730px;
  393.             min-width:730px;
  394.             {/block:PermalinkPage}
  395.         }
  396.        
  397.         .ask p {
  398.             margin:0;
  399.         }
  400.        
  401.         .ask, .askerimg, .answererimg, .arrowleft, .arrowright {
  402.             display:inline-block;
  403.         }
  404.        
  405.         .arrowleft {
  406.             width: 0;
  407.             height: 0;
  408.             border-top: 10px solid transparent;
  409.             border-bottom: 10px solid transparent;
  410.             border-right:15px solid {color:Accent color};
  411.         }
  412.        
  413.         .arrowright {
  414.             width: 0;
  415.             height: 0;
  416.             border-top: 10px solid transparent;
  417.             border-bottom: 10px solid transparent;
  418.             border-left:15px solid {color:Accent color};
  419.         }
  420.        
  421.         blockquote {
  422.             background:rgba(255,255,255,0.2);
  423.             margin:0;
  424.             {block:IndexPage}
  425.             padding:0;
  426.             border:none;
  427.             color:gray;
  428.             border-bottom:3px dotted {color:Hyperlink color};
  429.             border-top:3px dotted {color:Hyperlink color};
  430.             {/block:IndexPage}
  431.             {block:PermalinkPage}
  432.             padding:10px;
  433.             border-left:5px solid {color:Hyperlink color};
  434.             {/block:PermalinkPage}
  435.         }
  436.        
  437.         .overlay{
  438.             position:absolute;
  439.             bottom:0;
  440.             width:100%;
  441.             height:60px;
  442.             z-index:-10;
  443.             display:none;
  444.         }
  445.    
  446.         .seefull {
  447.             opacity:0;
  448.             position:absolute;
  449.             bottom:0;
  450.             width:100%;
  451.             height:60px;
  452.             background-image:linear-gradient(transparent,{color:Container color});
  453.             color:{color:Accent color};
  454.         }
  455.        
  456.         .seefull:hover {
  457.             -webkit-filter:brightness(105%);
  458.             -moz-filter:brightness(105%);
  459.             -o-filter:brightness(105%);
  460.         }
  461.        
  462.         .seefull div {
  463.             position:absolute;
  464.             width:100%;
  465.             bottom:5px;
  466.             left:20px;
  467.         }
  468.        
  469.         .showtruncation {
  470.             z-index:2;
  471.             display:block;
  472.         }
  473.        
  474.         .attachedbutton {
  475.             line-height:25px;
  476.             font-size:20px;
  477.             text-align:left;
  478.             margin:5px 5px 0 5px;
  479.             float:right;
  480.             background:transparent;
  481.             color:white;
  482.         }
  483.        
  484.         .notecount {
  485.             width:auto;
  486.             padding-right:5px;
  487.         }
  488.  
  489.         .attachedbutton a {
  490.             color:white;
  491.         }
  492.        
  493.         .buttons {
  494.             display:block;
  495.             opacity:0;
  496.             position:absolute;
  497.             top:10px;
  498.             right:10px;
  499.         }
  500.        
  501.         .post:hover .buttons {
  502.             opacity:1;
  503.         }
  504.        
  505.         .button {
  506.             width:30px;
  507.             height:30px;
  508.             margin-left:5px;
  509.             padding-top:10px;
  510.             padding-left:10px;
  511.             font-size:20px;
  512.             line-height:20px;
  513.             display:block;
  514.             float:left;
  515.             color:black;
  516.             background:white;
  517.             opacity:0.6;
  518.             border-radius:200px;
  519.         }
  520.        
  521.         .button:hover {
  522.             opacity:1;
  523.         }
  524.        
  525.         .meta {
  526.         }
  527.        
  528.         .thequote {
  529.             font-family:{font:Quote font},Georgia,serif;
  530.             margin:0;
  531.             padding:0;
  532.             line-height:90%;
  533.         }
  534.        
  535.         .quotewrapper {
  536.             margin:10px;
  537.         }
  538.        
  539.         .short {
  540.             font-size:40pt;
  541.         }
  542.        
  543.         .medium {
  544.             font-size:25pt;
  545.         }
  546.        
  547.         .long {
  548.             font-size:20pt;
  549.         }
  550.        
  551.         .quotesrc {
  552.             text-align:right;
  553.         }
  554.        
  555.         .theplayer {
  556.             {block:IndexPage}
  557.             width:400px;
  558.             {/block:IndexPage}
  559.             {block:PermalinkPage}
  560.             width:700px;
  561.             {/block:PermalinkPage}
  562.             margin:0 auto;
  563.         }
  564.        
  565.         .tumblr_audio_player {
  566.             width:100%;
  567.         }
  568.        
  569.         .albumart {
  570.             {block:IndexPage}
  571.             height:400px;
  572.             {/block:IndexPage}
  573.             {block:PermalinkPage}
  574.             height:700px;
  575.             {block:PermalinkPage}
  576.             background-size:cover;
  577.             background-position:center;
  578.             background-repeat:no-repeat;
  579.         }
  580.        
  581.         #infscr-loading {
  582.             opacity:0;
  583.         }
  584.        
  585.         .tags {
  586.             display:block;
  587.             width:100%;
  588.             margin:0;
  589.             padding:0;
  590.         }
  591.        
  592.         .tag {
  593.             padding:3px;
  594.             margin:3px;
  595.             display:inline-block;
  596.             background-image:{color:Accent color};
  597.         }
  598.        
  599.         .tag a {
  600.             font-weight:normal;
  601.         }
  602.        
  603.         .info {
  604.             background:{color:Hyperlink color};
  605.         }
  606.        
  607.         .info a {
  608.             color:{color:Accent color};
  609.         }
  610.        
  611.         .notes {
  612.             display:block;
  613.             padding:0;
  614.             width:90%;
  615.             margin:0 auto;
  616.             list-style-type:none;
  617.         }
  618.        
  619.         .note {
  620.             padding:5px 0;
  621.         }
  622.        
  623.         .avatar {
  624.             display:inline;
  625.             margin:0;
  626.         }
  627.        
  628.         .note blockquote {
  629.             display:inline-block;
  630.             width:auto;
  631.             max-width:60%;
  632.             border-left:3px solid {color:Hyperlink color};
  633.             margin:5px 0 5px 20px;
  634.         }
  635.        
  636.         #nav {
  637.             display:none;
  638.         }
  639.            
  640.  
  641.     </style>
  642.    
  643.         <title>{Title}{block:PostSummary}: {PostSummary}
  644. {/block:PostSummary}</title>
  645.     </head>
  646.  
  647.     <body>
  648.     <div id="container">
  649.         <div id="menubar">
  650.         <div id="branding">
  651.         {block:IfUserpic}<img id="favicon" src="{Favicon}"/>{/block:IfUserpic}
  652.         <h1><a href="/">{Title}</a></h1>
  653.        
  654.         {block:Description}<div id="description"><p>{Description}</p></div>{/block:Description}</div>
  655.  
  656.             <ul class = "linklist">
  657.                 <a href="/"><li>Home</li></a>
  658.                 {block:AskEnabled}
  659.                 <a href="/ask"><li>{AskLabel}</li></a>
  660.                 {/block:AskEnabled}
  661.                 {block:SubmitEnabled}
  662.                 <a href="/submit"><li>{SubmitLabel}</li></a>
  663.                 {/block:SubmitEnabled}
  664.             {block:HasPages}
  665.             {block:Pages}
  666.                 <a href="{URL}"><li>{Label}</li></a>
  667.             {/block:Pages}
  668.             {/block:HasPages}
  669.                 <a href="/RSS"><li>RSS</li></a>
  670.                 <a href="/archive"><li>Archive</li></a>
  671.                 <a href="http://circlejourney-themes.tumblr.com"><li id="themelink">Theme</li></a>
  672.             </ul>
  673.            
  674.         </div> <!---end menubar --->
  675.         <div id="main">
  676.         {block:Posts}
  677.        
  678.                 {block:Text}
  679.                 <div class = "post text">
  680.                 {block:Title}<a class = "texttitle" href="{Permalink}"><h3>{Title}</h3></a>{/block:Title}
  681.                 <div class= "textcontent">{Body}</div>
  682.                 {/block:Text}
  683.                
  684.                
  685.                 {block:Answer}
  686.                 <div class = "post answer">
  687.                 <div class="askbubble question">
  688.                 <img class ="askerimg" src="{AskerPortraitURL-40}"/>
  689.                 <div class="arrowleft"></div><div class="ask">
  690.                     <b>{Asker} asked:</b> <p>{Question}</p></div>
  691.                     </div>
  692.                     {block:Answerer}
  693.                     <div class="askbubble theanswer">
  694.                     <div class="ask">
  695.                     <b>{Answerer} answered:</b> {Answer}
  696.                     </div><div class="arrowright"></div><img src="{AnswererPortraitURL-40}" class = "answererimg"/>
  697.                     </div>
  698.                     {/block:Answerer}
  699.                     <div class="textcontent">{Replies}</div>
  700.                 {/block:Answer}
  701.                
  702.                
  703.                
  704.                 {block:Photo}
  705.                 <div class = "post photo">
  706.                
  707.                 {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-400}" class="photo" alt="{PhotoAlt}" /></a>{/block:IndexPage}
  708.                 {block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-1280}" class="photo" alt="{PhotoAlt}" />{LinkCloseTag}
  709.                 {block:Caption}
  710.                     <div class="textcontent">{Caption}</div>
  711.                 {/block:Caption}
  712.                 {/block:PermalinkPage}
  713.                
  714.                 {/block:Photo}
  715.                
  716.                
  717.                
  718.                 {block:Panorama}
  719.                 <div class= "post photo">
  720.                 {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" /></a>{/block:IndexPage}
  721.            
  722.                 {block:PermalinkPage}
  723.                 {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
  724.                 {block:Caption}
  725.                     <div class="textcontent">{Caption}</div>
  726.                 {/block:Caption}
  727.                 {/block:PermalinkPage}
  728.                 {/block:Panorama}
  729.                
  730.                
  731.                
  732.                 {block:Photoset}
  733.                 <div class = "post photo-set">
  734.                     {block:IndexPage}{Photoset-400}{/block:IndexPage}
  735.                     {block:PermalinkPage}<div class="thephotoset">{Photoset-700}</div>
  736.                     {block:Caption}<div class="textcontent">{Caption}</div>{/block:Caption}
  737.                     {/block:PermalinkPage}
  738.                 {/block:Photoset}
  739.                
  740.                
  741.                
  742.                 {block:Quote}
  743.                 <div class = "post quote">
  744.                 <div class ="quotewrapper textcontent">
  745.                     <p class="thequote {Length}">"{Quote}"</p>
  746.                     {block:Source}
  747.                     <div class="quotesrc">&mdash; {Source}</div>
  748.                     {/block:Source}
  749.                     </div>
  750.                 {/block:Quote}
  751.                
  752.                
  753.                
  754.                 {block:Link}
  755.                 <div class = "post link">
  756.                     <a href="{Permalink}"><h2>{Name} &#9755;</h2></a>
  757.                     {block:Description}<div class="textcontent">{Description}</div>{/block:Description}
  758.                 {/block:Link}
  759.                
  760.                
  761.                
  762.                 {block:Chat}
  763.                 <div class = "post chat">
  764.                         {block:Lines}
  765.                         <li class = "{Alt} user_{UserNumber}">
  766.                             {block:Label}<b>{Label}</b>{/block:Label} {Line}
  767.                         </li>
  768.                     {/block:Lines}
  769.                 </ul>
  770.                 {/block:Chat}
  771.                
  772.                
  773.                
  774.                 {block:Audio}
  775.                 <div class = "post audio">
  776.                 <div class = "theplayer">
  777.                 {block:AlbumArt}
  778.                     <div class="albumart" style="background-image:url({AlbumArtURL});"></div>
  779.                 {/block:AlbumArt}
  780.                     {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  781.                     </div>
  782.                     {block:PermalinkPage}
  783.                     {block:Caption}
  784.                         <div class="textcontent">{Caption}</div>
  785.                     {/block:Caption}
  786.                     {/block:PermalinkPage}
  787.                 {/block:Audio}
  788.                
  789.                
  790.                
  791.                 {block:Video}
  792.                 <div class = "post video">
  793.                     <div class="thevideo">{block:IndexPage}{Video-400}{/block:IndexPage}{block:PermalinkPage}{Video-700}{/block:PermalinkPage}</div>
  794.                 {block:PermalinkPage}
  795.                 {block:Caption}
  796.                 <div class="textcontent">{Caption}</div>
  797.                 {/block:Caption}
  798.                 {/block:PermalinkPage}
  799.                 {/block:Video}
  800.                
  801.                
  802.                 {block:IndexPage}
  803.                
  804.                 <div class="buttons"><a href="{Permalink}"><div class="button"><i class="fas fa-link"></i></div></a><div class="button">{LikeButton size="20" color="black"}</div><div class="button">{ReblogButton size="20" color="black"}</div></div>
  805.                
  806.                 <div class="overlay"><a class="seefull" href="{Permalink}"><div>See full post</div></a></div>
  807.            
  808.             {block:Text}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"><i class="fas fa-link"></i></a></div>{/block:Text}
  809.            
  810.             {block:Link}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"><i class="fas fa-link"></i></a></div>{/block:Link}
  811.            
  812.             {block:Answer}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"><i class="fas fa-link"></i></a></div>{/block:Answer}
  813.            
  814.             {block:Video}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"><i class="fas fa-link"></i></a></div>{/block:Video}
  815.            
  816.             {block:Audio}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"><i class="fas fa-link"></i></a></div>{/block:Audio}
  817.            
  818.             {block:Chat}<div class="attachedbutton">{ReblogButton size="20" color="white"}</div><div class="attachedbutton">{LikeButton size="20" color="white"}</div><div class="attachedbutton"><a href="{Permalink}"<i class="fas fa-link"></i></a></div>{/block:Chat}
  819.             {/block:IndexPage}
  820.  
  821.             </div><!---end post content--->
  822.  
  823.         {block:PermalinkPage}
  824.             <div class="post meta">
  825.                 <ul class="tags">
  826.                     {block:Date}<li class="tag info"><a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a></li>{/block:Date}{block:RebloggedFrom}<li class="tag info"><a href="{ReblogParentURL}">via {ReblogParentName}</a></li>{/block:RebloggedFrom}{block:NoteCount}<li class="tag info"><a href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}{block:HasTags}{block:Tags}<li class = "tag"><a href="{TagURL}">#{Tag}</a></li>{/block:Tags}{/block:HasTags}
  827.                 </ul>
  828.             </div><!---end meta--->
  829.  
  830.                 <div class="post notelist">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  831.         {/block:PermalinkPage}
  832.        
  833.         {/block:Posts}
  834.  
  835.  
  836.            
  837.         {block:Pagination}<div id="nav" style="display:none">{block:NextPage}<a href="{NextPage}" id="next">Next</a>{/block:NextPage}{block:PreviousPage}<a href="{PreviousPage}" id="prev">Prev</a>{/block:PreviousPage}</div>{/block:Pagination}
  838.        
  839.     {block:IndexPage}
  840.     {block:IfLoadingScreen}
  841.     <div id="loading"><div>
  842.     {/block:IfLoadingScreen}
  843.     {/block:IndexPage}
  844.     </div><!---end main--->
  845. </div>
  846.        
  847.  
  848.     <script>
  849.     {block:PermalinkPage}
  850.     $.each(document.getElementsByTagName("img"),function(a,b) {
  851.         b.src = b.src.replace(/500\.|400\./,"1280.");
  852.         console.log(b.src);
  853.     });
  854.     {/block:PermalinkPage}
  855.    
  856.     function truncate () {
  857.     var posts = document.getElementsByClassName("post");
  858.     for (var i=0;i<posts.length;i++) {
  859.             if(parseInt(window.getComputedStyle(posts[i]).height)>800) {
  860.                 posts[i].className+=" truncated";
  861.                 posts[i].getElementsByClassName("overlay")[0].className+=" showtruncation";
  862.             }
  863.         }
  864.         console.log("Truncated posts");
  865.     }
  866.    
  867.     function showOverlay() {
  868.         var overlays=document.getElementsByClassName("seefull");
  869.         for(var i=0;i<overlays.length;i++) {
  870.             overlays[i].style.opacity="1";
  871.         }
  872.     }
  873.    
  874.     {block:IndexPage}
  875.     {block:IfTruncatePosts}truncate();{/block:IfTruncatePosts}
  876.     $(window).on("load", function() {
  877.         document.getElementById("loading").style.opacity="0";
  878.         setTimeout(function(){document.getElementById("loading").style.display="none";},800);
  879.         showOverlay();
  880.         msnry = new Masonry('#main',{
  881.             itemSelector:".post",
  882.             columnWidth:400,
  883.             gutter:10
  884.         });
  885.    
  886.     $('#main').infinitescroll({
  887.       navSelector  : 'div#nav',    // selector for the paged navigation
  888.       nextSelector : '#next',  // selector for the NEXT link (to page 2)
  889.       itemSelector : '.post',     // selector for all items you'll retrieve
  890.      bufferPx: 1500,
  891.      transitionDuration:0,
  892.      loading: {
  893.          finishedMsg: 'No more pages to load.',
  894.        }
  895.      },
  896.      // trigger Masonry as a callback
  897.        function(newElements) {
  898.            $container = $('#main');
  899.            $container.imagesLoaded(function(){
  900.                $container.append(newElements);
  901.                {block:IfTruncatePosts}truncate();{/block:IfTruncatePosts}
  902.                msnry.appended(newElements);
  903.                msnry.layout();
  904.                showOverlay();
  905.            });
  906.        });
  907.    });
  908.    
  909.    
  910.    
  911.    {/block:IndexPage}
  912.    </script>
  913.    </body>
  914. </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!