API tools faq
paste
Advertisement
southcodes

quotes page #1: 88

southcodes
Jul 16th, 2017
582
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - quotes page #1 '88' 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. <!DOCTYPE html>
  9. <head>
  10.  
  11.     <title>{Title}</title>
  12.  
  13.     <link rel="shortcut icon" href="{favicon}">
  14.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.    
  16.     <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
  17.     <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
  18.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  19.     <script src='//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script><script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  20.  
  21. <style type="text/css">
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {height:0px;border-left:1px solid #aaa;}
  24. ::-webkit-scrollbar {width:5px;height:0px;background:inherit;}
  25. .tmblr-iframe.iframe-controls--desktop {
  26.     margin: 10px;
  27.     opacity:.4;
  28.     -moz-transition-duration: 0.2s;
  29.     -o-transition-duration: 0.2s;
  30.     -webkit-transition-duration: 0.2s;
  31.     transition-duration: 0.2s;}
  32. .tmblr-iframe--desktop-logged-in-controls {
  33.     -webkit-filter:invert(100%);
  34.     -moz-filter:invert(100%);
  35.     -o-filter:invert(100%);
  36.     -ms-filter:invert(100%);
  37.     filter:invert(100%);
  38.     opacity:0.6;}
  39. #s-m-t-tooltip{
  40.     max-width:300px;
  41.     margin-top:25px;
  42.     margin-left:15px;
  43.     z-index:999999;
  44.     letter-spacing:1.3px;
  45.     text-transform:uppercase;
  46.     font-size:10.5px;
  47.     font-family:calibri;
  48.     border: solid 1px #ddd;
  49.     background-color:#fcfcfc;
  50.     color:#777;
  51.     padding:3px 5px 3px 5px;
  52.     line-height:12px;}
  53.    
  54. body {
  55.     color:#444;
  56.     font-size:13px;
  57.     font-family: Times;
  58.     background-color:#fff;          /* background color */
  59.     letter-spacing:1px;}
  60.  
  61. a{
  62.     word-break:break-word;
  63.     color:#aaa;              /* links color */
  64.     text-decoration:none;
  65.     -moz-transition-duration: 0.6s;
  66.     -o-transition-duration: 0.6s;
  67.     -webkit-transition-duration: 0.6s;
  68.     transition-duration: 0.6s;}
  69. a:hover{
  70.     color:#000;              /* links color on hover*/
  71.     -moz-transition-duration: 0.6s;
  72.     -o-transition-duration: 0.6s;
  73.     -webkit-transition-duration: 0.6s;
  74.     transition-duration: 0.6s;
  75. }
  76.  
  77. #content {margin:40px 0 20px 420px;}
  78.  
  79. #sidebar {
  80.     width:420px;
  81.     text-align:center;
  82.     position:fixed;
  83.     top:0px;
  84.     bottom:0px;
  85.     left:0px;
  86.     border-right:1px solid #eee;
  87.     background:#fefefe;          /* sidebar background color */
  88. }
  89.  
  90. .btitle {
  91.     font-family:'Kaushan Script', serif;
  92.     font-style:italic;
  93.     letter-spacing:.4px;
  94.     font-size:49px;
  95.     text-shadow: #ddd 3px 2px 0px;
  96.     letter-spacing:4px;
  97.     margin-top:50px;
  98. }
  99.  
  100. .nav {margin-top:25px;font-size:13px;letter-spacing:1.4px;}
  101. .nav a{padding-right:10px;color:#888;}
  102. .nav a:last-child{padding-right:0px;}
  103.  
  104. .desc {margin:50px 0 15px;font-size:15px;}
  105.    
  106. .side {
  107.     width:390px;
  108.     margin:auto;
  109.     text-transform:lowercase;
  110.     font-size:14px;
  111.     font-style:italic;
  112.     line-height:58px;
  113.     -webkit-column-count: 2; /* Chrome, Safari, Opera */
  114.     -moz-column-count: 2; /* Firefox */
  115.     column-count: 2;}
  116. .side a{border-bottom:1px dotted #ccc;padding-bottom:12px;}
  117. .side a:before {content:'∙ ';color:#444;}
  118. .scroll {margin-top:50px;max-height:40%;overflow:scroll;}
  119.  
  120. .quote {
  121.     width:360px;
  122.     margin:40px 40px 65px 60px;
  123.     font-size:16px;
  124.     line-height:22px;
  125.     letter-spacing:.8px;}
  126. .quote:first-letter {font-size:23px;text-transform:uppercase;}
  127.  
  128. .source{
  129.     margin-top:10px;
  130.     text-align:right;
  131.     font-style:italic;
  132.     font-size:13px;
  133.     letter-spacing:.7px;}
  134.  
  135. </style>
  136. </head>
  137. <body>
  138.  
  139. <div id="container">
  140.  
  141. <div id="sidebar">
  142.     <div class="btitle">
  143.         quotes      <!-- title -->
  144.     </div>
  145.    
  146.     <div class="nav">
  147.         <a href="/">index</a>
  148.         <a href="/ask">askbox</a>
  149.         <a href="http://tumblr.com">dashboard</a>
  150.     </div>
  151.    
  152.     <div class="desc">
  153.         a collection of my favourite quotes          <!-- description -->
  154.     </div>
  155.  
  156. <!--
  157. INSTRUCTIONS:
  158.  
  159. short version:
  160.  
  161.     1) add this under <div class="side">:
  162.  
  163.     <a href="#" data-filter=".CUSTOM-FILTER">link on sidebar</a><br>
  164.  
  165.     2) then go to <div id="content"> and add this underneath
  166.  
  167.     <div class="quote CUSTOM-FILTER">
  168.         QUOTE HERE
  169.     </div>
  170.  
  171. - the data-filter has to have the same name as the class in the quote div, separated with a space
  172.  
  173. ----------------------------
  174.  
  175. long version:
  176.  
  177. - CUSTOMIZING FILTERS:
  178.  
  179. 1) go to the line that says: "<div class="side">" right under this
  180.     - do not modify the first line, only change the 'all quotes' inside the link for whatever you want it to say. this filter is what shows all the quotes
  181.  
  182.     - heres the template for the filters, add it right underneath:
  183.     <a href="#" data-filter=".CUSTOM">CUSTOM NAME/a><br>
  184.      
  185. 2) change the CUSTOM in [ data-filter=".CUSTOM"> ] for whatever you want, then change the next CUSTOM NAME for the title of the link you want to show up on the left sidebar
  186.  
  187.     example:
  188.     <a href="#" data-filter=".greenday">green day lyrics/a><br>
  189.     - note that i wrote '.greenday' and not '.green day' these filters can't have spaces, only use - and _ if you need. so if you do that it'd look like this:
  190.     <a href="#" data-filter=".green-day">green day lyrics/a><br>
  191.  
  192.  
  193. - ADDING QUOTES:
  194.  
  195. 3) heres the template for the quote itself, paste this right under <div id="content">
  196.    
  197.     <div class="quote">
  198.         QUOTE HERE
  199.     </div>
  200.  
  201.     - dont delete the 'quote' inside the class=""
  202.  
  203. 4) add the filter you want inside <div class="quote"> this time separating the filters with a space.
  204.  
  205.     example:
  206.     <div class="quote greenday">
  207.         QUOTE HERE
  208.     </div>
  209.  
  210. that's it! if you want to add multiple filters, repeat the steps
  211.  
  212. -->
  213.  
  214. <div class="scroll"><div class="side">
  215.        <a href="#" data-filter="*" class="current">All quotes</a><br>
  216.        
  217.    <!--    dont forget to add <br> at the end of each link!    -->
  218.        
  219.        <a href="#" data-filter=".FILTER1">filter 1</a><br>
  220.        <a href="#" data-filter=".FILTER2">filter 2</a><br>
  221.        <a href="#" data-filter=".FILTER3">filter 3</a><br>
  222.        <a href="#" data-filter=".FILTER4">filter 4</a>
  223.        
  224. </div></div>
  225. </div><!--sidebar-->
  226.  
  227. <div id="content" data-masonry='{ "itemSelector": ".quote"}'>
  228.  
  229.    <!--quote start-->
  230.    <div class="quote FILTER1">
  231.        your quote goes here
  232.  
  233.        <div class="source">
  234.            optional source
  235.        </div>
  236.    </div>
  237.    <!--quote end-->
  238.  
  239.  
  240.  
  241.    <!--quote start-->
  242.    <div class="quote FILTER2">
  243.        your quote goes here
  244.    </div>
  245.    <!--quote end-->
  246.  
  247.  
  248.  
  249.    <!--quote start-->
  250.    <div class="quote FILTER3">
  251.        your quote goes here
  252.  
  253.        <div class="source">
  254.            optional source
  255.        </div>
  256.    </div>
  257.    <!--quote end-->
  258.  
  259.  
  260.  
  261.    <!--quote start-->
  262.    <div class="quote FILTER4">
  263.        your quote goes here
  264.    </div>
  265.    <!--quote end-->
  266.  
  267.  
  268.    
  269. </div><!--content-->
  270. </div><!--container-->
  271.  
  272. <script>
  273. $(window).load(function(){
  274.    var $container = $('#content');
  275.    $container.isotope({
  276.        filter: '*',
  277.        animationOptions: {
  278.            duration: 750,
  279.            easing: 'linear',
  280.            queue: false
  281.        }
  282.    });
  283.    $('.side a').click(function(){
  284.        $('.side .current').removeClass('current');
  285.        $(this).addClass('current');
  286.  
  287.        var selector = $(this).attr('data-filter');
  288.        $container.isotope({
  289.            filter: selector,
  290.            animationOptions: {
  291.                duration: 750,
  292.                easing: 'linear',
  293.                queue: false
  294.            }
  295.         });
  296.         return false;
  297.    });
  298. });
  299. </script>
  300.  
  301. <script>
  302. $('#content').masonry({
  303.  itemSelector: '.quote',
  304. });
  305. </script>
  306.  
  307. <!--        tooltips        -->
  308. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  309. <script>
  310. (function($){
  311. $(document).ready(function(){
  312. $("a[title]").style_my_tooltips({
  313. tip_follows_cursor:true,
  314. tip_delay_time:30,
  315. tip_fade_speed:300,
  316. attribute:"title"
  317. });
  318. });
  319. })(jQuery);
  320. </script>
  321. <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>
  322. </body>
  323. </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!