API tools faq
paste
Advertisement
southcodes

crawl | rec page

southcodes
Apr 8th, 2025 (edited)
510
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.57 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - page 'crawl' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by https://fontawesome.com/icons
  11.     - isotope filteres by https://isotope.metafizzy.co/
  12.  
  13.     how to customzie filters: https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
  14.  
  15. -->
  16.  
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.     <title>{title}</title>
  21.  
  22.     <meta charset="UTF-8">
  23.     <meta name="description" content="{MetaDescription}"/>
  24.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  25.  
  26.     <link rel="shortcut icon" href="{favicon}">
  27.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.    
  29.     <!-- fonts -->
  30.     <link rel="preconnect" href="https://fonts.googleapis.com">
  31.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  32.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  33.    
  34. <style>
  35. :root {
  36.     --background:#f4f4f4;
  37.     --boxes-background:#fff;
  38.     --background-square:lightblue;
  39.     --first-header-square:lightblue;
  40.     --second-header-square:rgb(217, 242, 250);
  41.     --text: rgba(0, 0, 0);
  42.     --note-text:#555;
  43.     --links: #6a89bb;
  44.     --links-hover: rgb(23, 59, 80);
  45.     --borders:#ccc;
  46.     --accents:#aadde4;
  47. }
  48.  
  49. * {margin:0;padding:0;box-sizing: border-box;}
  50. p {margin:1rem 0}
  51. html{font-size: 16px}
  52. body {font: 1rem 'Karla', sans-serif;color:var(--text);background-color: var(--background);letter-spacing: .05rem;}
  53. a {text-decoration: none;color:var(--links);transition-duration: .2s;}
  54. a:hover {color:var(--links-hover);}
  55. b {font-weight: 600}
  56. ol,ul,li {list-style-type:none;}
  57. hr {border:0;border-top:1px solid var(--borders);margin:auto;width: 100%;}
  58.  
  59. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--accents);}
  60. ::-webkit-scrollbar {width:6px;height:0;background-color: transparent;}
  61. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  62.  
  63. #background-square {
  64.     position: fixed;
  65.     inset: auto 0 0 auto;
  66.     width: 30vw;
  67.     aspect-ratio: 1 / 1;
  68.     z-index: -1;
  69.     background-color: var(--background-square);
  70. }
  71.  
  72. /* container */
  73.  
  74. #container {display: flex;}
  75.  
  76. /* filters */
  77.  
  78. #hamburger-checkbox {display: none;}
  79.  
  80. #hamburger-checkbox:checked~#filters-wrapper {
  81.     transition: 2s ease;
  82.     transform: translateX(0px);
  83. }
  84.  
  85. .hamburger {
  86.     display:none;
  87.     position: fixed;
  88.     inset:1rem auto auto 1rem;
  89.     z-index: 9999!important;
  90.     padding:.5rem .7rem;
  91.     border: 1px solid var(--borders);
  92.     border-radius: 5px;
  93.     cursor: pointer;
  94.     font-size: 1.5rem;
  95.     color: var(--accents);
  96.     background-color: var(--boxes-background);
  97. }
  98.  
  99. #filters-wrapper {
  100.     position: fixed;
  101.     inset:0 auto 0 0;
  102.     z-index: 9!important;
  103.     width: 18rem;
  104.     height: 100vh;
  105.     border-right: 1px solid var(--borders);
  106.     background-color: var(--boxes-background);
  107. }
  108.  
  109. .filters-image {
  110.     width: 100%;
  111.     height: 10rem;
  112.     object-fit:cover
  113. }
  114.  
  115. #filters-content {
  116.     height: calc(100vh - 10rem);
  117.     overflow: auto;
  118. }
  119.  
  120. #filters-title {
  121.     margin: 3rem 0 3.5rem;
  122.     padding:0 2rem;
  123.     font-weight:400;
  124. }
  125.  
  126. #filters-title span {
  127.     box-shadow: inset 0 -10px var(--accents);
  128.     padding:0 .3rem
  129. }
  130.  
  131. #filters-title::first-letter {text-transform: uppercase;}
  132.  
  133. #filters {padding:0 2rem 1.5rem 3rem}
  134.  
  135. #filters .button-group-title {
  136.     margin-bottom: 1rem;
  137.     font-weight:500;
  138.     font-size: 1rem;
  139.     text-transform: uppercase;
  140. }
  141.  
  142. .button-group {margin-bottom: 3rem;}
  143.  
  144. #filters button {
  145.     display: block;
  146.     margin-bottom: .8rem;
  147.     padding:0 .2rem .2rem;
  148.     outline:none;
  149.     border: 0;
  150.     border-bottom: 2px solid var(--accents);
  151.     font-family: inherit;
  152.     font-size: .95rem;
  153.     color:var(--text);
  154.     background-color: transparent;
  155.     text-align: left;
  156.     transition-duration: .2s;
  157.     cursor:pointer;
  158. }
  159.  
  160. #filters button:hover {color:var(--links-hover)}
  161.  
  162. #filters .is-checked:before {
  163.     content: '';
  164.     position: absolute;
  165.     inset: 6px auto auto 0;
  166.     width: .4rem;
  167.     aspect-ratio: 1 / 1;
  168.     border-radius: 100%;
  169.     background-color: var(--accents);
  170. }
  171.  
  172. #filters .is-checked{
  173.     position: relative;
  174.     margin-left: 1rem;
  175.     padding-left:  1rem;
  176.     border-bottom: 0;
  177.     cursor: pointer;
  178. }
  179.  
  180. #filters-rating span{
  181.     color:var(--accents);
  182. }
  183.  
  184. /* main */
  185.  
  186. #main-wrapper {
  187.     width: calc(100% - 18rem);
  188.     margin-left: 18rem;
  189. }
  190.  
  191. /* header */
  192.  
  193. #main-header {
  194.     padding:6rem 3rem;
  195.     border-bottom: 1px solid var(--borders);
  196.     background-color: var(--boxes-background);
  197. }
  198.  
  199. #header-content {
  200.     display: flex;
  201.     justify-content: center;
  202.     margin: auto;
  203.     max-width: 35rem;
  204. }
  205.  
  206. #header-aside {margin-right: 2rem;}
  207.  
  208. .header-image {
  209.     width: 3.3rem;
  210.     aspect-ratio: 1 / 1;
  211.     object-fit:cover;    
  212.     border-radius: 4px;
  213. }
  214.  
  215. figure.header-image {margin-bottom: .5rem;}
  216.  
  217. #squares-wrapper {
  218.     display: flex;
  219.     justify-content: space-between;
  220. }
  221.  
  222. .color-square {
  223.     width: 1.3rem;
  224.     aspect-ratio: 1 / 1;
  225.     border-radius: 4px;
  226. }
  227.  
  228. .color-square:first-of-type {background-color:var(--first-header-square);}
  229.  
  230. .color-square:nth-of-type(2) {
  231. background-color:var(--second-header-square);}
  232.  
  233. #page-title {
  234.     font:500 1.5rem 'montserrat underline', sans-serif;
  235.     margin-bottom:1rem
  236. }
  237.  
  238. #description {
  239.     border: 1px solid var(--borders);
  240.     padding: .5rem 1.5rem;
  241.     font-style: italic;
  242.     text-align: center;
  243.     border-radius: 4px;
  244. }
  245.  
  246. /* rec content */
  247.  
  248. #rec-wrapper {
  249.     width: 100%;
  250.     margin:7rem auto 0;
  251. }
  252.  
  253. /* rec boxes */
  254.  
  255. .rec-item {
  256.     width: calc(50% - 7rem);
  257.     min-height: 11rem;
  258.     margin:0 3rem 7rem;
  259. }
  260.  
  261. /* rating */
  262.  
  263. .rec-rating {
  264.     font-size: 1.5rem;    
  265.     position: absolute;
  266.     inset:0 -2rem auto auto
  267. }
  268.  
  269. .rec-rating {color:#aaa}
  270.  
  271. .one-star .rec-rating li:nth-of-type(1),
  272. .two-stars .rec-rating li:nth-of-type(-n+2),
  273. .three-stars .rec-rating li:nth-of-type(-n+3),
  274. .four-stars .rec-rating li:nth-of-type(-n+4),
  275. .five-stars .rec-rating li:nth-of-type(-n+5)
  276. {
  277.     color: var(--accents);
  278. }
  279.  
  280. .rec-title {
  281.     position: relative;
  282.     text-indent: 2.5rem;
  283.     font:400 1.2rem 'karla', sans-serif;
  284.     line-height: 130%;
  285.     margin: 0;
  286. }
  287.  
  288. .rec-title:before {
  289.     content: '';
  290.     position:absolute;
  291.     inset:-.3rem auto auto 0;
  292.     width: 1.5rem;    
  293.     aspect-ratio: 1 / 1;
  294.     border-radius: 4px;
  295.     background-color: var(--accents);
  296. }
  297.  
  298. .rec-author {
  299.     position: relative;
  300.     margin:.5rem 0 0 2rem;
  301.     padding-left: 1.3rem;
  302.     font:400 .9rem 'karla', sans-serif;
  303. }
  304.  
  305. .rec-author:before {
  306.     content: '';
  307.     position: absolute;
  308.     inset:.35rem auto auto 0;
  309.     width: .5rem;
  310.     aspect-ratio: 1 / 1;
  311.     border-radius: 100%;
  312.     background-color: var(--accents);
  313. }
  314.  
  315. .rec-description {
  316.     margin-top: 2rem;
  317.     padding:0 1rem;
  318.     line-height: 140%;
  319.     border: 1px solid var(--borders);
  320.     border-bottom: 3px solid var(--accents);
  321.     border-radius: 4px;
  322.     background-color: var(--boxes-background);
  323. }
  324.  
  325. .rec-details {margin-top: 2rem;max-width: 100%;}
  326.  
  327. .rec-details ul {
  328.     display: flex;
  329.     justify-content: center;
  330.     flex-wrap: wrap;
  331. }
  332.  
  333. .rec-details ul li {
  334.     position: relative;
  335.     margin: .2rem 0 .2rem 2.5rem ;
  336. }
  337.  
  338. .rec-details ul li:after {
  339.     content: '';
  340.     position: absolute;
  341.     inset: .45rem auto auto -1.5rem;
  342.     width: .5rem;
  343.     aspect-ratio: 1 / 1;
  344.     border-radius: 100%;
  345.     background-color: var(--accents);
  346. }  
  347.  
  348. .rec-details ul li:first-of-type {margin-left: 0;}
  349.  
  350. .rec-details ul li:first-of-type:after {display: none}
  351.  
  352. .rec-notes {
  353.     margin-top: 2rem;
  354.     padding:0 1rem;
  355.     font-size: .95rem;
  356.     line-height: 140%;
  357.     font-style: italic;
  358.     color: var(--note-text);
  359.     border: 1px solid var(--borders);
  360.     border-top: 4px solid var(--accents);
  361.     border-radius: 4px;
  362.     background-color: var(--boxes-background);
  363. }
  364.  
  365. /* MEDIA */
  366.  
  367. @media only screen and (min-width:0px) and (max-width:1200px) {
  368.  
  369.     #main-wrapper {
  370.         width: 100%;
  371.         margin:0
  372.     }
  373.  
  374.     #filters-wrapper {
  375.         transform: translateX(-18rem);
  376.         transition: 2s ease;
  377.     }
  378.  
  379.     .hamburger {
  380.         display: block;
  381.     }
  382. }
  383.  
  384. </style>    
  385.  
  386. </head>
  387. </head>
  388. <body>
  389.  
  390. <!-- background square -->
  391. <div id="background-square"></div>
  392.  
  393. <!-- container -->
  394.  
  395. <section id="container">
  396.  
  397. <input type="checkbox" id="hamburger-checkbox">
  398. <label class="hamburger" for="hamburger-checkbox">☰</label>
  399.  
  400. <!-- filters start -->
  401. <aside id="filters-wrapper">
  402.    
  403.     <!-- filters image -->
  404.     <figure class="filters-image"><img src="IMAGE URL" alt="" class="filters-image"></figure>
  405.    
  406.     <!-- filters content -->
  407.     <section id="filters-content">
  408.  
  409.         <h2 id="filters-title"><span>filters title</span></h2>
  410.  
  411.         <!-- filters -->
  412.         <section id="filters">
  413.  
  414.             <div class="button-group" data-filter-group="one">
  415.                 <h3 class="button-group-title">filter title</h3>
  416.  
  417.                 <button class="button is-checked" data-filter=""><span>all</span></button>
  418.                 <button class="button" data-filter=".filter-a"><span>filter a</span></button>
  419.  
  420.                 <button class="button" data-filter=".filter-b"><span>filter b</span></button>
  421.             </div>
  422.            
  423.             <div class="button-group" data-filter-group="one" id="filters-rating">
  424.                 <h3 class="button-group-title">rating</h3>
  425.  
  426.                 <button class="button is-checked" data-filter="">all</button>
  427.                 <button class="button" data-filter=".three"><span>★</span></button>
  428.                 <button class="button" data-filter=".three"><span>★★</span></button>
  429.                 <button class="button" data-filter=".three"><span>★★★</span></button>
  430.                 <button class="button" data-filter=".three"><span>★★★★</span></button>
  431.                 <button class="button" data-filter=".three"><span>★★★★★</span></button>
  432.             </div>
  433.  
  434.         </section><!--filters end-->
  435.     </section> <!-- filters content -->
  436. </aside>
  437. <!-- filters wrapper end -->
  438.  
  439. <!-- recs container -->
  440. <main id="main-wrapper">
  441.  
  442. <!-- header start -->
  443. <header id="main-header">
  444.  
  445.     <!-- header -->
  446.     <section id="header-content">
  447.  
  448.         <aside id="header-aside">
  449.             <!-- header image -->
  450.             <figure class="header-image"><img src="IMAGE URL" alt="" class="header-image"></figure>
  451.  
  452.             <!-- color squares -->
  453.             <div id="squares-wrapper">
  454.                 <div class="color-square"></div>
  455.                 <div class="color-square"></div>
  456.             </div>      
  457.         </aside>
  458.  
  459.         <!-- header content -->
  460.         <section id="header-inside">
  461.             <!-- page title -->
  462.             <h1 id="page-title">page title</h1>
  463.  
  464.             <!-- page description -->
  465.             <article id="description">
  466.                 <p>page description</p>
  467.             </article>
  468.         </section>
  469.         <!-- header content end -->
  470.  
  471.     </section>
  472.     <!-- header end -->
  473.  
  474. </header>
  475. <!-- header end -->
  476.  
  477. <!-- rec wrapper -->
  478. <section id="rec-wrapper">
  479.  
  480.     <!-- customize star rating:
  481.        
  482.         find: <article class="rec-item star-rating">
  483.  
  484.         change 'star-rating' to one of the below, depending on how many stars you want it to have:
  485.  
  486.         one-star
  487.         two-stars
  488.         three-stars
  489.         four-stars
  490.         five-stars
  491.  
  492.         example:
  493.        
  494.         <article class="rec-item four-stars">
  495.  
  496.         rec template:
  497.        
  498.         <article class="rec-item star-rating">
  499.            
  500.             <h2 class="rec-title"><a href="" target="_blank">rec title</a></h2>
  501.  
  502.             <h3 class="rec-author"><a href="" target="_blank">author</a></h3>
  503.  
  504.             <article class="rec-description">
  505.                 <p>rec description</p>
  506.             </article>
  507.  
  508.             <article class="rec-details"><ul>
  509.                 <li>genre</li>
  510.                 <li>word count</li>
  511.                 <li>rating</li>
  512.             </ul></article>
  513.  
  514.             <article class="rec-notes">
  515.                 <p>rec notes</p>
  516.             </article>
  517.            
  518.             <article class="rec-rating">
  519.                 <li>★</li>
  520.                 <li>★</li>
  521.                 <li>★</li>
  522.                 <li>★</li>
  523.                 <li>★</li>
  524.             </article>
  525.  
  526.         </article>
  527.  
  528.     -->
  529.  
  530.     <!-- rec item start -->
  531.     <article class="rec-item star-rating">
  532.        
  533.         <!-- rec title -->
  534.         <h2 class="rec-title"><a href="" target="_blank">rec title</a></h2>
  535.  
  536.         <!-- rec author -->
  537.         <h3 class="rec-author"><a href="" target="_blank">author</a></h3>
  538.  
  539.         <!-- rec descrption -->
  540.         <article class="rec-description">
  541.             <p>rec description</p>
  542.         </article>
  543.  
  544.         <!-- rec details -->
  545.         <article class="rec-details"><ul>
  546.             <li>genre</li>
  547.             <li>word count</li>
  548.             <li>rating</li>
  549.         </ul></article>
  550.  
  551.         <!-- rec notes -->
  552.         <article class="rec-notes">
  553.             <p>rec notes</p>
  554.         </article>
  555.        
  556.         <!-- rec star rating -->
  557.         <article class="rec-rating">
  558.             <li>★</li>
  559.             <li>★</li>
  560.             <li>★</li>
  561.             <li>★</li>
  562.             <li>★</li>
  563.         </article>
  564.     </article>
  565.     <!-- rec item end -->
  566.  
  567.     <!-- rec item start -->
  568.     <article class="rec-item star-rating">
  569.        
  570.         <!-- rec title -->
  571.         <h2 class="rec-title"><a href="" target="_blank">rec title</a></h2>
  572.  
  573.         <!-- rec author -->
  574.         <h3 class="rec-author"><a href="" target="_blank">author</a></h3>
  575.  
  576.         <!-- rec descrption -->
  577.         <article class="rec-description">
  578.             <p>rec description</p>
  579.         </article>
  580.  
  581.         <!-- rec details -->
  582.         <article class="rec-details"><ul>
  583.             <li>genre</li>
  584.             <li>word count</li>
  585.             <li>rating</li>
  586.         </ul></article>
  587.  
  588.         <!-- rec notes -->
  589.         <article class="rec-notes">
  590.             <p>rec notes</p>
  591.         </article>
  592.        
  593.         <!-- rec star rating -->
  594.         <article class="rec-rating">
  595.             <li>★</li>
  596.             <li>★</li>
  597.             <li>★</li>
  598.             <li>★</li>
  599.             <li>★</li>
  600.         </article>
  601.     </article>
  602.     <!-- rec item end -->
  603.  
  604.     <!-- rec item start -->
  605.     <article class="rec-item star-rating">
  606.        
  607.         <!-- rec title -->
  608.         <h2 class="rec-title"><a href="" target="_blank">rec title</a></h2>
  609.  
  610.         <!-- rec author -->
  611.         <h3 class="rec-author"><a href="" target="_blank">author</a></h3>
  612.  
  613.         <!-- rec descrption -->
  614.         <article class="rec-description">
  615.             <p>rec description</p>
  616.         </article>
  617.  
  618.         <!-- rec details -->
  619.         <article class="rec-details"><ul>
  620.             <li>genre</li>
  621.             <li>word count</li>
  622.             <li>rating</li>
  623.         </ul></article>
  624.  
  625.         <!-- rec notes -->
  626.         <article class="rec-notes">
  627.             <p>rec notes</p>
  628.         </article>
  629.        
  630.         <!-- rec star rating -->
  631.         <article class="rec-rating">
  632.             <li>★</li>
  633.             <li>★</li>
  634.             <li>★</li>
  635.             <li>★</li>
  636.             <li>★</li>
  637.         </article>
  638.     </article>
  639.     <!-- rec item end -->
  640.  
  641.     <!-- rec item start -->
  642.     <article class="rec-item star-rating">
  643.        
  644.         <!-- rec title -->
  645.         <h2 class="rec-title"><a href="" target="_blank">rec title</a></h2>
  646.  
  647.         <!-- rec author -->
  648.         <h3 class="rec-author"><a href="" target="_blank">author</a></h3>
  649.  
  650.         <!-- rec descrption -->
  651.         <article class="rec-description">
  652.             <p>rec description</p>
  653.         </article>
  654.  
  655.         <!-- rec details -->
  656.         <article class="rec-details"><ul>
  657.             <li>genre</li>
  658.             <li>word count</li>
  659.             <li>rating</li>
  660.         </ul></article>
  661.  
  662.         <!-- rec notes -->
  663.         <article class="rec-notes">
  664.             <p>rec notes</p>
  665.         </article>
  666.        
  667.         <!-- rec star rating -->
  668.         <article class="rec-rating">
  669.             <li>★</li>
  670.             <li>★</li>
  671.             <li>★</li>
  672.             <li>★</li>
  673.             <li>★</li>
  674.         </article>
  675.     </article>
  676.     <!-- rec item end -->
  677.  
  678. </section>
  679. <!-- rec wrapper end -->
  680.  
  681. </main>
  682. <!-- recs container end -->
  683. </section><!-- container -->
  684.  
  685. <!-- don't touch -->
  686. <div style="position: fixed;inset: auto 1rem 1rem auto;font-size: .9rem;"><a style="color:var(--text)" href="https://southcodes.tumblr.com" target="_blank">sc</a></div>
  687.  
  688. <!-- query -->
  689. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  690.  
  691. <!-- font awesome icons font -->
  692. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  693.  
  694. <!-- isotope -->
  695. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  696.  
  697. <script type="text/javascript">
  698.    $(document).ready( function() {
  699.     // init Isotope
  700.     var $grid = $('#rec-wrapper').isotope({
  701.       itemSelector: '.rec-item'
  702.     });
  703.     // store filter for each group
  704.     var filters = {};
  705.    
  706.     $('#filters').on( 'click', '.button', function() {
  707.       var $this = $(this);
  708.       // get group key
  709.       var $buttonGroup = $this.parents('.button-group');
  710.       var filterGroup = $buttonGroup.attr('data-filter-group');
  711.       // set filter for group
  712.       filters[ filterGroup ] = $this.attr('data-filter');
  713.       // combine filters
  714.       var filterValue = concatValues( filters );
  715.       // set filter for Isotope
  716.       $grid.isotope({ filter: filterValue });
  717.     });
  718.    
  719.     // change is-checked class on buttons
  720.     $('.button-group').each( function( i, buttonGroup ) {
  721.       var $buttonGroup = $( buttonGroup );
  722.       $buttonGroup.on( 'click', 'button', function() {
  723.         $buttonGroup.find('.is-checked').removeClass('is-checked');
  724.         $( this ).addClass('is-checked');
  725.       });
  726.     });
  727.    
  728.    });
  729.    // flatten object by concatting values
  730.    function concatValues( obj ) {
  731.     var value = '';
  732.     for ( var prop in obj ) {
  733.       value += obj[ prop ];
  734.     }
  735.     return value;
  736.    }
  737. </script>
  738. </body>
  739. </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!