API tools faq
paste
Advertisement
southcodes

fic rec #1: alice

southcodes
Aug 5th, 2017
3,147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.14 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - [UPDATED] fic rec #1 'alice' 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. <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 rel="stylesheet" type="text/css" href="https://static.tumblr.com/n7gvaew/8gop026qc/normalize.css">
  19.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Montserrat:500" rel="stylesheet">
  20.    
  21. <style type="text/css">
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {
  24.     background-color: #888;
  25.     border-right:4px solid #fff;
  26.     border-top:5px solid #fff;
  27.     border-bottom:5px solid #fff;}
  28. ::-webkit-scrollbar {
  29.     background-color: inherit;
  30.     width:5px;
  31.     height:0px;
  32.     border-right:4px solid #fff;
  33.     border-top:5px solid #fff;
  34.     border-bottom:5px solid #fff;}
  35.  
  36. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  37. .tmblr-iframe:hover {opacity:.8;}
  38.    
  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:#333;    /*   text color  */
  56.     font-family:'Open Sans', sans-serif;
  57.     font-size:13px;
  58.     overflow-y: scroll;}
  59.  
  60. a {
  61.     color:#aaa;    /*   links color  */
  62.     text-decoration:none;}
  63. a:hover {color:#000;}
  64.  
  65. #container {
  66.     width:90vw;
  67.     max-width: 75rem;
  68.     margin:60px auto;}
  69.  
  70. .content {
  71.     /*background: blue;*/
  72.     width: calc(100% - 6rem - 5px);
  73.     /*background: blue;*/
  74.     vertical-align:top;
  75.     display:inline-block;}
  76.  
  77.  
  78. .filtering {
  79.     width: 6rem;
  80.     vertical-align:top;
  81.     display:inline-block;}
  82.  
  83. .box {
  84. width: 45%;
  85. margin:0px 0px 7rem 5%;
  86. text-transform:lowercase;
  87. position:relative;}
  88.  
  89. /*      topbar      */
  90.  
  91.  
  92. .topbar {
  93.     margin:30px 0 50px;
  94.     padding-bottom:30px;
  95.     border-bottom:1px dotted #bbb;
  96.     min-height:80px;}
  97.  
  98. .links {font-style:italic;font-size:12px;}
  99. .links a{color:#aaa;     /*      topbar links color     */
  100.     margin: 0 12px;}
  101. .links a:first-child{margin-left:0px;}
  102. .links a:last-child{margin-right:2rem;}
  103.  
  104. .simg {
  105.     width:80px;
  106.     height:80px;
  107.     border-radius:100%;
  108.     margin-right:15px;
  109.     vertical-align:middle;}
  110.  
  111. #inside {float:left;}
  112.  
  113. .title {
  114.     text-transform:uppercase;
  115.     font-family:'Montserrat', sans-serif;
  116.     font-size:16px;
  117.     vertical-align: middle;
  118.     font-weight:500;
  119.     display:inline-block;
  120.     margin-right:10px;
  121.     letter-spacing:.6px;}
  122.    
  123. .desc{
  124.     float:right;
  125.     text-align:right;
  126.     line-height: 80px;
  127.     font-size:12px;}
  128.    
  129. .filtert,.filtert1 {
  130.     text-transform:uppercase;
  131.     font-family:'Montserrat', sans-serif;
  132.     font-weight:500;
  133.     letter-spacing:.8px;
  134.     font-style:normal;}
  135. .filtert {margin:25px 0 15px;font-size:11px;}
  136. h1{font-size:14px;margin:0px 0px 10px 0px;}
  137.  
  138.  
  139. .filtering button {
  140.     font-family:'Open Sans', sans-serif;
  141.     text-transform:lowercase;
  142.     font-size:12px;
  143.     line-height:23px;
  144.     font-style:italic;
  145.     background: transparent;
  146.     padding: 0;
  147.     border: 0;
  148.     display: block;
  149.     color: #aaa;
  150.     margin:.1rem 0;}
  151.  
  152. .filtering button:focus {outline:0;}
  153.  
  154. .filtert1{font-size:14px;margin:0px 0px 10px 0px;}
  155.  
  156. .filtering button:hover {cursor: pointer;}
  157.  
  158. /*                        fic boxes                       */
  159.  
  160.  
  161.  
  162. .fav::before {
  163.     content:'★';
  164.     color:#ced3db;      /*star color*/
  165.     font-size:25px;
  166.     float:right;
  167.     margin:-10px 0px 0px 5px;}
  168.  
  169. .name {
  170.     letter-spacing:.7px;
  171.     font-weight:600;
  172.     font-size:15px;}
  173. .name a{color:#555;    /*   fic title color  */
  174. }
  175.  
  176. button.is-checked {
  177.     color:#000;
  178. }
  179. .author {
  180.     margin-top:10px;
  181.     text-align:right;
  182.     font-size:12px;}
  183. .author a{font-style:italic;}
  184.  
  185. .summary {
  186.     text-align:justify;
  187.     margin-top:15px;
  188.     padding-top:15px;
  189.     border-top:3px double #ddd;
  190.     text-transform:none;
  191.     line-height:19px;}
  192. .summary p:first-of-type {margin-top:0;}
  193.  
  194. .details {
  195.     font-size:13px;
  196.     line-height:23px;
  197.     margin-top:10px;
  198.     padding-top:10px;
  199.     border-top:1px solid #ddd;}
  200. .info {font-weight:bold;letter-spacing:.5px;line-height: 180%}
  201.  
  202.  
  203. </style>
  204. </head>
  205. <body>
  206.  
  207. <div id="container">
  208.  
  209.     <div class="links">
  210.    
  211.     <!--    links   -->
  212.         <a href="/">go back</a>;
  213.         <a href="/ask">inbox</a>;
  214.         <a href="https://www.tumblr.com/">dashboard</a>
  215.        
  216.         extra text
  217.        
  218.     </div>
  219.    
  220. <div class="topbar">
  221.  
  222.     <div id="inside">
  223.         <a href="/"><img class="simg" src="IMAGE URL"/></a>
  224.        
  225.         <div class="title">HEY, STRANGER</div>
  226.     </div>
  227.  
  228.     <div class="desc">description</div>
  229.     <div style="clear: both;"></div>
  230. </div>
  231.  
  232. <!--
  233.  
  234. PART 1: HOW TO CUSTOMIZE FILTERS:
  235.  
  236. 1) copy the group template and paste it right under     <div class="filtering">   :
  237.  
  238.     <div class="button-group" data-filter-group="UNIQUE NAME HERE">
  239.     <div class="filtert">FILTER TITLE</div>
  240.  
  241.         <button class="button is-checked" data-filter="">∙ ALL OPTIONS</button>
  242.         <button class="button" data-filter=".filterone">∙ filter one</button>
  243.         <button class="button" data-filter=".filtertwo">∙ filter two</button>
  244.     </div>
  245.  
  246. 2) change the 'UNIQUE NAME HERE' for whatever you want. only letters and no spaces (if you add more groups always choose different names). DO NOT delete the dot at the start of the word or the filters wont work
  247.  
  248. 3) change the 'FILTER TITLE' and 'ALL OPTIONS' for whatever you want them to say
  249.  
  250. 4) change the FILTER TITLE for the name of the filter you want, then change the 'UNIQUE FILTER NAME' for a single word (no spaces) with a dot which you will use to link each fic to each filter. repeat this step and copy paste for multiple options
  251.  
  252. each filter group should look something like this:
  253.  
  254.     <div class="button-group" data-filter-group="colors">
  255.         <span class="filter1">filter by color</span>
  256.    
  257.         <button class="button is-checked" data-filter="">all colors</button>
  258.         <button class="button" data-filter=".red">red hair</button>
  259.         <button class="button" data-filter=".blue">blue hair</button>
  260.         <button class="button" data-filter=".green">green hair</button>
  261.     </div>
  262.  
  263.  
  264. -->
  265.  
  266.  
  267. <!--filters start-->
  268.  
  269. <div class="filtering">
  270.    
  271. <div class="button-group" data-filter-group="a">
  272.     <div class="filtert">filters</div>
  273.  
  274.     <button class="button is-checked" data-filter="">∙ all categories</button>
  275.     <button class="button" data-filter=".fav">∙ favorites</button>
  276. </div>
  277.  
  278.  
  279. <div class="button-group" data-filter-group="b">
  280.     <div class="filtert">Filter title</div>
  281.  
  282.     <button class="button is-checked" data-filter="">∙ all options</button>
  283.     <button class="button" data-filter=".filterone">∙ filter one</button>
  284.     <button class="button" data-filter=".filtertwo">∙ filter two</button>
  285. </div>
  286.  
  287.  
  288. <div class="button-group" data-filter-group="c">
  289.     <div class="filtert">Filter title</div>
  290.  
  291.     <button class="button is-checked" data-filter="">∙ all options</button>
  292.     <button class="button" data-filter=".filterone">∙ filter one</button>
  293.     <button class="button" data-filter=".filtertwo">∙ filter two</button>
  294. </div>
  295.        
  296.  
  297. </div><!--filters end-->
  298.  
  299.  
  300. <!--        START BOXES         -->
  301.  
  302. <div class="content">
  303.  
  304.  
  305. <!-- BOXES TEMPLATE
  306.  
  307.  
  308. <div class="box">
  309.     <div class="name">
  310.         <a href=""></a>
  311.     </div>
  312.    
  313.     <div class="author"> by
  314.         <a href=""></a>
  315.     </div>
  316.    
  317.     <div class="summary">
  318.         <p></p>
  319.     </div>
  320.    
  321.     <div class="details">
  322.         <span class="info">word count:</span> <br>
  323.         <span class="info">au:</span> <br>
  324.         <span class="info">au:</span>
  325.     </div>
  326. </div>
  327.  
  328.  
  329. -->
  330.  
  331. <!-- fic start -->
  332. <div class="box filterone filtertwo">
  333.     <div class="name">
  334.         <a href="LINK URL">FIC NAME</a>
  335.     </div>
  336.    
  337.     <div class="author"> by
  338.         <a href="LINK URL">AUTHOR</a>
  339.     </div>
  340.    
  341.     <div class="summary">
  342.         <p>Summary</p>
  343.         <p>Please wrap each paragraph in p tags like this</p>
  344.     </div>
  345.    
  346.     <div class="details">
  347.         <span class="info">word count:</span> number<br>
  348.         <span class="info">info:</span> or whatever you want <br>
  349.         <span class="info">more info:</span> lalalala
  350.     </div>
  351. </div>
  352. <!-- fic end -->
  353.  
  354.  
  355.  
  356.  
  357. <!-- fic start -->
  358. <div class="box filterone filtertwo">
  359.     <div class="name">
  360.         <a href="LINK URL">FIC NAME</a>
  361.     </div>
  362.    
  363.     <div class="author"> by
  364.         <a href="LINK URL">AUTHOR</a>
  365.     </div>
  366.    
  367.     <div class="summary">
  368.         <p>Summary</p>
  369.         <p>Please wrap each paragraph in p tags like this</p>
  370.     </div>
  371.    
  372.     <div class="details">
  373.         <span class="info">word count:</span> number<br>
  374.         <span class="info">info:</span> or whatever you want <br>
  375.         <span class="info">more info:</span> lalalala
  376.     </div>
  377. </div>
  378. <!-- fic end -->
  379.  
  380.  
  381.  
  382.  
  383. <!-- fic start -->
  384. <div class="box fav filtertwo">
  385.     <div class="name">
  386.         <a href="LINK URL">FIC NAME</a>
  387.     </div>
  388.    
  389.     <div class="author"> by
  390.         <a href="LINK URL">AUTHOR</a>
  391.     </div>
  392.    
  393.     <div class="summary">
  394.         <p>Summary</p>
  395.         <p>Please wrap each paragraph in p tags like this</p>
  396.     </div>
  397.    
  398.     <div class="details">
  399.         <span class="info">word count:</span> number<br>
  400.         <span class="info">info:</span> or whatever you want <br>
  401.         <span class="info">more info:</span> lalalala
  402.     </div>
  403. </div>
  404. <!-- fic end -->
  405.  
  406.  
  407.  
  408.  
  409. <!-- fic start -->
  410. <div class="box fav filterone">
  411.     <div class="name">
  412.         <a href="LINK URL">FIC NAME</a>
  413.     </div>
  414.    
  415.     <div class="author"> by
  416.         <a href="LINK URL">AUTHOR</a>
  417.     </div>
  418.    
  419.     <div class="summary">
  420.         <p>Summary</p>
  421.         <p>Please wrap each paragraph in p tags like this</p>
  422.     </div>
  423.    
  424.     <div class="details">
  425.         <span class="info">word count:</span> number<br>
  426.         <span class="info">info:</span> or whatever you want <br>
  427.         <span class="info">more info:</span> lalalala
  428.     </div>
  429. </div>
  430. <!-- fic end -->
  431.  
  432.  
  433.  
  434.  
  435. <!-- fic start -->
  436. <div class="box filterone filtertwo">
  437.     <div class="name">
  438.         <a href="LINK URL">FIC NAME</a>
  439.     </div>
  440.    
  441.     <div class="author"> by
  442.         <a href="LINK URL">AUTHOR</a>
  443.     </div>
  444.    
  445.     <div class="summary">
  446.         <p>Summary</p>
  447.         <p>Please wrap each paragraph in p tags like this</p>
  448.     </div>
  449.    
  450.     <div class="details">
  451.         <span class="info">word count:</span> number<br>
  452.         <span class="info">info:</span> or whatever you want <br>
  453.         <span class="info">more info:</span> lalalala
  454.     </div>
  455. </div>
  456. <!-- fic end -->
  457.  
  458.  
  459.  
  460. </div><!--content end-->
  461. <div style="position:fixed;bottom:15px;right:10px;font-size:14.5px;line-height:14px;height:14px;width:14px;padding:4px;"><a href="https://southcodes.tumblr.com" title="southcodes" style="color:#666;">sc</a></div>
  462.  
  463. <div style="position:fixed;bottom:15px;left:15px;font-size:10px;line-height:100%"></div>
  464.  
  465. </div><!--container-->
  466.  
  467. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  468. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  469. <script src='https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js'></script>
  470. <script>
  471. (function($){
  472. $(document).ready(function(){
  473. $("a[title]").style_my_tooltips({
  474. tip_follows_cursor:true,
  475. tip_delay_time:30,
  476. tip_fade_speed:300,
  477. attribute:"title"
  478. });
  479. });
  480. })(jQuery);
  481.  
  482. $(document).ready( function() {
  483.  // init Isotope
  484.  var $grid = $('.content').isotope({
  485.   itemSelector: '.box',
  486.   layoutMode: 'masonry'
  487.  });
  488.  // store filter for each group
  489.  var filters = {};
  490.  $('.filtering').on( 'click', '.button', function() {
  491.   var $this = $(this);
  492.   // get group key
  493.   var $buttonGroup = $this.parents('.button-group');
  494.   var filterGroup = $buttonGroup.attr('data-filter-group');
  495.   // set filter for group
  496.   filters[ filterGroup ] = $this.attr('data-filter');
  497.   // combine filters
  498.   var filterValue = concatValues( filters );
  499.   // set filter for Isotope
  500.   $grid.isotope({ filter: filterValue });
  501.  });
  502.  // change is-checked class on buttons
  503.  $('.button-group').each( function( i, buttonGroup ) {
  504.   var $buttonGroup = $( buttonGroup );
  505.   $buttonGroup.on( 'click', 'button', function() {
  506.      $buttonGroup.find('.is-checked').removeClass('is-checked');
  507.      $( this ).addClass('is-checked');
  508.   });
  509.  });
  510. });
  511. // flatten object by concatting values
  512. function concatValues( obj ) {
  513.  var value = '';
  514.  for ( var prop in obj ) {
  515.   value += obj[ prop ];
  516.  }
  517.  return value;
  518. }
  519. </script>
  520.  
  521. </body>
  522. </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!