API tools faq
paste
southcodes

decay | rec page

southcodes
May 18th, 2022 (edited)
1,957
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 27.99 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - page 'decay' 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/
  11.     - slide in by https://stackoverflow.com/a/62432099
  12.  
  13.  -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.  
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <meta name="description" content="{MetaDescription}"/>
  24.  
  25.     <!-- fonts -->
  26.     <link rel="preconnect" href="https://fonts.googleapis.com">
  27.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  28.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  29.    
  30.     <!-- normalize -->
  31.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  32.    
  33. <style>
  34. :root {
  35.     --background:rgb(48, 44, 45);
  36.     --filters-background: rgb(37, 34, 35);
  37.     --text:#eee;
  38.     --links: #8cb3db;
  39.     --links-hover: #36608c;
  40.     --borders:#eee;
  41.     --stars: #36608c;
  42. }
  43.  
  44. * {box-sizing:  border-box;}
  45.  
  46. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  47. .tmblr-iframe:hover {opacity:.8;}
  48.  
  49. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links);}
  50. ::-webkit-scrollbar {width:6px}
  51. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  52.  
  53. pre {font-family:consolas;
  54.     white-space: pre-wrap;       /* css-3 */
  55.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  56.     white-space: -pre-wrap;      /* Opera 4- */
  57.     white-space: -o-pre-wrap;    /* Opera 7 */
  58.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  59.  
  60. body, figure{margin:0;padding:0}
  61. html{font: 14px 'Karla', sans-serif;}
  62. body {font-size:14px;color:var(--text);background:var(--background);}
  63. a {text-decoration: none;color:var(--links);word-break:break-word;}
  64. a:hover {color:var(--links-hover);}
  65. blockquote {margin:0;padding:0;}
  66. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  67. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  68.  
  69. /* header */
  70.  
  71. header {
  72.     width: calc(100vw - 15rem);
  73.     max-width: 50rem;
  74.     margin:5rem 0 0 15rem;
  75.     padding:0 4rem
  76. }
  77.  
  78. /* title */
  79.  
  80. #page-title {
  81.     vertical-align: middle;
  82.     display: inline-block;
  83.     margin-left: 2rem;
  84.     font:500 1.7rem 'Karla', sans-serif
  85. }
  86.  
  87. /* image */
  88.  
  89. .header-image {
  90.     width: 7rem;
  91.     height: 7rem;
  92.     border-radius: 5px;
  93.     object-fit: cover;
  94.     margin:0;
  95.     vertical-align: middle;
  96.     display: inline-block;
  97. }
  98.  
  99. /* description */
  100.  
  101. #description {
  102.     margin-top: 3rem;
  103. }
  104.  
  105. /* navigation */
  106.  
  107. #header-navigation {margin-top: 3rem;}
  108. #header-navigation *{
  109.     list-style: none;
  110.     margin:0;padding: 0;
  111. }
  112.  
  113. #header-navigation li {
  114.     margin-right:3rem;
  115.     display: inline-block;
  116.     font-weight: 600;
  117. }
  118.  
  119. /* wrapper */
  120.  
  121. #container {
  122.     display: flex;
  123.     flex-flow: row wrap;
  124.     justify-content: space-between;
  125. }
  126.  
  127. /* filters sidebar */
  128.  
  129. #hamburger-checkbox {display: none;}
  130. .hamburger {display: none;}
  131.  
  132. #hamburger-checkbox:checked~#filters-navigation {
  133.     transition: 2s ease;
  134.     transform: translateX(0px);
  135. }
  136.  
  137. figure.filters-image {
  138.     width:5rem;
  139.     height: 5rem;
  140.     margin:3rem auto;
  141. }
  142.  
  143. img.filters-image {
  144.     width: 100%;
  145.     height: 100%;
  146.     display: block;
  147.     margin:auto;
  148.     border-radius: 100%;
  149.     object-fit:cover
  150. }
  151.    
  152. #filters-navigation {
  153.     width: 13rem;
  154.     height: 100vh;
  155.     position: fixed;top:0;bottom:0;left:0;
  156.     transition: 2s ease;
  157.     overflow: auto;
  158.     padding:  2rem;
  159.     background-color: var(--filters-background);
  160.     border-right: 1px solid var(--borders);
  161. }
  162.  
  163. .button-group button {
  164.     display: block;
  165.     border: 0;
  166.     background-color: transparent;
  167.     padding: 0;
  168.     margin:1rem 0 0;
  169.     font-family: 'Karla', sans-serif!important;
  170.     color:var(--text);
  171.     text-align:left;
  172.     line-height:155%;
  173. }
  174.  
  175. .button-group {
  176.     margin: 0 0 4rem;
  177.     padding-bottom: 4rem;
  178.     border-bottom: 1px solid var(--borders);
  179. }
  180.  
  181. .button-group:last-of-type {
  182.     border-bottom: 0;
  183.     margin-bottom: 0;
  184.     padding-bottom: 0;
  185. }
  186.  
  187. .button-group h3 {
  188.     text-transform: uppercase;
  189.     margin:0rem 0 2rem;
  190. }
  191.  
  192. .button-group button:before {
  193.     font-family: 'Font Awesome 5 Free';
  194.     font-weight: 900;
  195.     color: var(--links);
  196.     content: '\f111';
  197.     margin-right: 1rem;
  198.     font-size: .5rem;
  199. }
  200.  
  201. .button-group button:focus {outline: 0;}
  202.  
  203. .is-checked {
  204.     color:var(--links)!important;
  205.     font-weight: 700;
  206.     transition-duration: .2s;
  207. }
  208.  
  209. /* boxes */
  210.  
  211. #main {
  212.     width: calc(100vw - 15rem);
  213.     padding: 3rem 0;
  214.     box-sizing: border-box;
  215. }
  216.  
  217. .fanfic-box {
  218.     width: calc(50% - 8rem);
  219.     margin: 5rem 4rem;
  220. }
  221.  
  222. .upper-section {
  223.     display: flex;
  224.     flex-flow: row wrap;
  225.     justify-content: center;
  226. }
  227.  
  228. figure.fanfic-image {
  229.     width:5rem;
  230.     height: 5rem;
  231. }
  232.  
  233. img.fanfic-image {
  234.     width:100%;
  235.     height:100%;
  236.     object-fit: cover;
  237.     display: block;
  238.     margin:0;
  239.     border-radius: 5px;
  240. }
  241.  
  242. .title-author,.star-rating {
  243.     overflow: auto;
  244.     height: 5rem;
  245.     flex-grow: 1;
  246. }
  247.  
  248. .title-author {
  249.     padding:.8rem .9rem;
  250.     width: calc(70% - 5rem);
  251. }
  252.  
  253. .title {
  254.     font-weight: 700;
  255.     font-size: 1.1rem;
  256. }
  257.  
  258. .author {
  259.     font-size:.9rem;
  260.     margin-top: 1rem;
  261.     font-style: italic;
  262.     letter-spacing: .05rem;
  263.     text-decoration: underline;
  264. }
  265.  
  266. .author a{color:var(--text)}
  267.  
  268. .star-rating {
  269.     width: 30%;
  270.     text-align: right;
  271.     display: flex;
  272.     flex-flow: row wrap;
  273.     justify-content: space-around;
  274.     align-items: center;
  275. }
  276.  
  277. .star-rating i{
  278.     font-size: .8rem;
  279. }
  280.  
  281. .one-stars .fa-star:nth-of-type(1),
  282. .two-stars .fa-star:nth-of-type(-n+2),
  283. .three-stars .fa-star:nth-of-type(-n+3),
  284. .four-stars .fa-star:nth-of-type(-n+4),
  285. .five-stars .fa-star:nth-of-type(-n+5)
  286. {
  287.     color:var(--stars);
  288. }
  289.  
  290. .ship-and-fandom {
  291.     display: flex;
  292.     flex-flow: row wrap;
  293.     justify-content: space-between;
  294.     padding: 2rem 1rem;
  295.     text-transform: uppercase;
  296.     letter-spacing: .04rem;
  297. }
  298.  
  299. .ship,.fandom {
  300.     width: 50%;
  301.     flex-grow: 1;
  302. }
  303.  
  304. .fandom {text-align: right;}
  305.  
  306. .fanfic-summary {margin:1rem 0}
  307.  
  308. .fanfic-links {
  309.     font-size: 1.1rem;
  310.     font-weight: 700;
  311.     padding-top: 1.5rem;
  312.     border-top: 1px solid var(--borders);
  313. }
  314.  
  315. .fanfic-info {
  316.     padding-top: 1.5rem;
  317.     margin-top: 1.5rem;
  318.     border-top: 1px solid var(--borders);
  319. }
  320.  
  321. .fanfic-info li {display: inline-block;}
  322.  
  323. .fanfic-info li:after {
  324.     content: '|';
  325.     margin:0 1rem
  326. }
  327.  
  328. .fanfic-info li:last-of-type:after {
  329.     content: '';
  330.     margin:0
  331. }
  332. .fanfic-info b {font-size: 1.1rem;}
  333.  
  334. .fanfic-series {
  335.     text-transform: uppercase;
  336.     font-weight: 600;
  337.     text-align: center;
  338.     margin:2rem 0
  339. }
  340.  
  341. .fanfic-series a{text-decoration: underline;}
  342.  
  343. .fanfic-triggers {margin:1rem 0 0;}
  344.  
  345. .fanfic-triggers li {
  346.     display: inline-block;
  347.     margin-right: 1rem;
  348. }
  349.  
  350. .fa-triangle-exclamation {
  351.     margin-right:1rem;
  352.     color:yellow
  353. }
  354.  
  355. /* medias */
  356.  
  357. @media only screen and (min-width:0px) and (max-width:650px) {
  358.    
  359.     .fanfic-box {
  360.         width: calc(100% - 4rem);
  361.         margin: 5rem 2rem;
  362.     }
  363. }
  364.  
  365.  
  366. @media only screen and (min-width:651px) and (max-width:800px) {
  367.  
  368.     .fanfic-box {
  369.         margin:5rem 2rem;
  370.         padding:0;
  371.         width: calc(50% - 4rem);
  372.     }
  373.  
  374. }
  375.  
  376. @media only screen and (min-width:0px) and (max-width:900px) {
  377.  
  378.     .hamburger {display: block;}
  379.  
  380.     .hamburger .fa-filter {
  381.         font-size: 1.7rem;
  382.         z-index: 9999999999999!important;
  383.         cursor:pointer;
  384.         position: fixed;top:1.7rem;left:1.7rem;
  385.         background-color: var(--filters-background);
  386.         padding: .9rem;
  387.         border-radius: 7px;
  388.     }
  389.  
  390.     header {
  391.         width: 90%;
  392.         max-width: 100%;
  393.         margin: 10rem auto 0;
  394.         padding: 0;
  395.     }
  396.  
  397.     #filters-navigation {
  398.         z-index: 9999999!important;
  399.         transform: translateX(-13rem);
  400.         box-sizing: border-box;
  401.         padding: 4rem 2rem 2rem;
  402.     }
  403.  
  404.     #main {
  405.         width: 100%;
  406.         margin:auto;
  407.         padding: 3rem 0;
  408.         box-sizing: border-box;  
  409.     }
  410.  
  411. }
  412.  
  413. @media only screen and (min-width:2001px) and (max-width:99999999999px) {
  414.  
  415.     .fanfic-box {
  416.         width: calc(33% - 8rem);
  417.         margin: 5rem 4rem;
  418.         flex-grow: 1;
  419.     }
  420.    
  421. }
  422.  
  423. </style>
  424.  
  425. </head>
  426. <body>
  427.  
  428. <header>
  429.  
  430.     <!-- header image -->
  431.     <img src="IMAGE URL"  class="header-image">
  432.    
  433.     <!-- title -->
  434.     <h1 id="page-title">title</h1>
  435.    
  436.     <!-- description -->
  437.     <article id="description">
  438.         description
  439.     </article>
  440.  
  441.     <nav id="header-navigation"><ul>
  442.        
  443.         <!-- links -->
  444.         <li><a href="/">index</a></li>
  445.        
  446.         <li><a href="/ask">inbox</a></li>
  447.        
  448.         <li><a href="">link 1</a></li>
  449.  
  450.         <li><a href="">link 2</a></li>
  451.     </ul></nav>
  452.    
  453. </header>
  454.  
  455.  
  456. <section id="container">
  457.  
  458. <section id="filters-sidebar">
  459. <input type="checkbox" id="hamburger-checkbox"><label class="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-filter"></i></label>
  460.  
  461.  
  462. <nav id="filters-navigation">
  463.  
  464.         <figure class="filters-image">
  465.             <!-- filters image -->
  466.             <img src="IMAGE URL"  class="filters-image">
  467.         </figure>
  468.  
  469.        
  470.     <!-- - TO CUSTOMIZE FILTERS PLEASE SEE THIS TUTORIAL, SCROLL DOWN TO "FILTER BY MULTIPLE CRITERIA": https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a -->
  471.    
  472.  
  473.             <div class="button-group" data-filter-group="stars">
  474.                 <h3>by stars</h3>
  475.  
  476.                 <button class="button is-checked" data-filter="">all</button>
  477.                 <button class="button" data-filter=".one-stars">one</button>
  478.                 <button class="button" data-filter=".two-stars">two</button>
  479.                 <button class="button" data-filter=".three-stars">three</button>
  480.                 <button class="button" data-filter=".four-stars">four</button>
  481.                 <button class="button" data-filter=".five-stars">five</button>
  482.             </div>
  483.  
  484.             <div class="button-group" data-filter-group="UNIQUE ID">
  485.                 <h3>filter title</h3>
  486.  
  487.                 <button class="button is-checked" data-filter="">all</button>
  488.                 <button class="button" data-filter=".class-1">class-1</button>
  489.                 <button class="button" data-filter=".class-1">class-2</button>
  490.             </div>
  491.            
  492.  
  493.            
  494.     </nav>
  495.  
  496. </section>
  497. <!-- filters end -->
  498.  
  499. <main id="main">
  500.  
  501.     <!-- fanfic box start -->
  502.    
  503.     <!-- don't forget to add the corresping class for the scores! (.one-stars / .two-stars / .three-stars / etc)  -->
  504.    <section class="fanfic-box five-stars">
  505.  
  506.        <article class="upper-section">
  507.  
  508.            <figure class="fanfic-image">
  509.                <!-- fanfic image -->
  510.                <img src="IMAGE URL"  class="fanfic-image">
  511.            </figure>
  512.  
  513.            <article class="title-author">
  514.  
  515.                <!-- fanfic title -->
  516.                <div class="title">
  517.                    <a target="_blank" href="fic link">title</a>
  518.                </div>
  519.  
  520.                <!-- fanfic author -->
  521.                <div class="author"><a target="_blank" href="author link">author</a></div>
  522.  
  523.            </article>
  524.  
  525.            <article class="star-rating">
  526.                <i class="fa-solid fa-star"></i>
  527.                <i class="fa-solid fa-star"></i>
  528.                <i class="fa-solid fa-star"></i>
  529.                <i class="fa-solid fa-star"></i>
  530.                <i class="fa-solid fa-star"></i>
  531.            </article>
  532.  
  533.        </article>
  534.        
  535.        <article class="ship-and-fandom">
  536.  
  537.            <!-- ship -->
  538.            <div class="ship">ship</div>
  539.  
  540.            <!-- fandom -->
  541.            <div class="fandom">fandom</div>
  542.        </article>
  543.  
  544.        <article class="fanfic-summary">
  545.  
  546.            <!-- fanfic summary -->
  547.            
  548.            Summary
  549.  
  550.        </article>
  551.  
  552.        <article class="fanfic-links">
  553.  
  554.            <!-- fic links -->
  555.            read on <a target="blank" href="LINK">link</a>
  556.        </article>
  557.  
  558.        <article class="fanfic-info">
  559.  
  560.            <!-- details -->
  561.            <li><b>detail:</b> content</li>
  562.            <li><b>detail:</b> content</li>
  563.            <li><b>detail:</b> content</li>
  564.  
  565.        </article>
  566.  
  567.        <article class="fanfic-series">
  568.            <!-- if part of a series -->
  569.            <a href="series link">series name</a>
  570.        </article>
  571.  
  572.        <article class="fanfic-triggers">
  573.  
  574.            <!-- triggers -->
  575.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  576.            
  577.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  578.        </article>
  579.    
  580.    </section>
  581.    <!-- fanfic box end -->
  582.    
  583.    <section class="fanfic-box five-stars">
  584.  
  585.        <article class="upper-section">
  586.  
  587.            <figure class="fanfic-image">
  588.                <!-- fanfic image -->
  589.                <img src="IMAGE URL"  class="fanfic-image">
  590.            </figure>
  591.  
  592.            <article class="title-author">
  593.  
  594.                <!-- fanfic title -->
  595.                <div class="title">
  596.                    <a target="_blank" href="fic link">title</a>
  597.                </div>
  598.  
  599.                <!-- fanfic author -->
  600.                <div class="author"><a target="_blank" href="author link">author</a></div>
  601.  
  602.            </article>
  603.  
  604.            <article class="star-rating">
  605.                <i class="fa-solid fa-star"></i>
  606.                <i class="fa-solid fa-star"></i>
  607.                <i class="fa-solid fa-star"></i>
  608.                <i class="fa-solid fa-star"></i>
  609.                <i class="fa-solid fa-star"></i>
  610.            </article>
  611.  
  612.        </article>
  613.        
  614.        <article class="ship-and-fandom">
  615.  
  616.            <!-- ship -->
  617.            <div class="ship">ship</div>
  618.  
  619.            <!-- fandom -->
  620.            <div class="fandom">fandom</div>
  621.        </article>
  622.  
  623.        <article class="fanfic-summary">
  624.  
  625.            <!-- fanfic summary -->
  626.            
  627.            Summary
  628.  
  629.        </article>
  630.  
  631.        <article class="fanfic-links">
  632.  
  633.            <!-- fic links -->
  634.            read on <a target="blank" href="LINK">link</a>
  635.        </article>
  636.  
  637.        <article class="fanfic-info">
  638.  
  639.            <!-- details -->
  640.            <li><b>detail:</b> content</li>
  641.            <li><b>detail:</b> content</li>
  642.            <li><b>detail:</b> content</li>
  643.  
  644.        </article>
  645.  
  646.        <article class="fanfic-series">
  647.            <!-- if part of a series -->
  648.            <a href="series link">series name</a>
  649.        </article>
  650.  
  651.        <article class="fanfic-triggers">
  652.  
  653.            <!-- triggers -->
  654.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  655.            
  656.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  657.        </article>
  658.    
  659.    </section>
  660.    <!-- fanfic box end -->
  661.    
  662.    <section class="fanfic-box five-stars">
  663.  
  664.        <article class="upper-section">
  665.  
  666.            <figure class="fanfic-image">
  667.                <!-- fanfic image -->
  668.                <img src="IMAGE URL"  class="fanfic-image">
  669.            </figure>
  670.  
  671.            <article class="title-author">
  672.  
  673.                <!-- fanfic title -->
  674.                <div class="title">
  675.                    <a target="_blank" href="fic link">title</a>
  676.                </div>
  677.  
  678.                <!-- fanfic author -->
  679.                <div class="author"><a target="_blank" href="author link">author</a></div>
  680.  
  681.            </article>
  682.  
  683.            <article class="star-rating">
  684.                <i class="fa-solid fa-star"></i>
  685.                <i class="fa-solid fa-star"></i>
  686.                <i class="fa-solid fa-star"></i>
  687.                <i class="fa-solid fa-star"></i>
  688.                <i class="fa-solid fa-star"></i>
  689.            </article>
  690.  
  691.        </article>
  692.        
  693.        <article class="ship-and-fandom">
  694.  
  695.            <!-- ship -->
  696.            <div class="ship">ship</div>
  697.  
  698.            <!-- fandom -->
  699.            <div class="fandom">fandom</div>
  700.        </article>
  701.  
  702.        <article class="fanfic-summary">
  703.  
  704.            <!-- fanfic summary -->
  705.            
  706.            Summary
  707.  
  708.        </article>
  709.  
  710.        <article class="fanfic-links">
  711.  
  712.            <!-- fic links -->
  713.            read on <a target="blank" href="LINK">link</a>
  714.        </article>
  715.  
  716.        <article class="fanfic-info">
  717.  
  718.            <!-- details -->
  719.            <li><b>detail:</b> content</li>
  720.            <li><b>detail:</b> content</li>
  721.            <li><b>detail:</b> content</li>
  722.  
  723.        </article>
  724.  
  725.        <article class="fanfic-series">
  726.            <!-- if part of a series -->
  727.            <a href="series link">series name</a>
  728.        </article>
  729.  
  730.        <article class="fanfic-triggers">
  731.  
  732.            <!-- triggers -->
  733.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  734.            
  735.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  736.        </article>
  737.    
  738.    </section>
  739.    <!-- fanfic box end -->
  740.    
  741.    <section class="fanfic-box five-stars">
  742.  
  743.        <article class="upper-section">
  744.  
  745.            <figure class="fanfic-image">
  746.                <!-- fanfic image -->
  747.                <img src="IMAGE URL"  class="fanfic-image">
  748.            </figure>
  749.  
  750.            <article class="title-author">
  751.  
  752.                <!-- fanfic title -->
  753.                <div class="title">
  754.                    <a target="_blank" href="fic link">title</a>
  755.                </div>
  756.  
  757.                <!-- fanfic author -->
  758.                <div class="author"><a target="_blank" href="author link">author</a></div>
  759.  
  760.            </article>
  761.  
  762.            <article class="star-rating">
  763.                <i class="fa-solid fa-star"></i>
  764.                <i class="fa-solid fa-star"></i>
  765.                <i class="fa-solid fa-star"></i>
  766.                <i class="fa-solid fa-star"></i>
  767.                <i class="fa-solid fa-star"></i>
  768.            </article>
  769.  
  770.        </article>
  771.        
  772.        <article class="ship-and-fandom">
  773.  
  774.            <!-- ship -->
  775.            <div class="ship">ship</div>
  776.  
  777.            <!-- fandom -->
  778.            <div class="fandom">fandom</div>
  779.        </article>
  780.  
  781.        <article class="fanfic-summary">
  782.  
  783.            <!-- fanfic summary -->
  784.            
  785.            Summary
  786.  
  787.        </article>
  788.  
  789.        <article class="fanfic-links">
  790.  
  791.            <!-- fic links -->
  792.            read on <a target="blank" href="LINK">link</a>
  793.        </article>
  794.  
  795.        <article class="fanfic-info">
  796.  
  797.            <!-- details -->
  798.            <li><b>detail:</b> content</li>
  799.            <li><b>detail:</b> content</li>
  800.            <li><b>detail:</b> content</li>
  801.  
  802.        </article>
  803.  
  804.        <article class="fanfic-series">
  805.            <!-- if part of a series -->
  806.            <a href="series link">series name</a>
  807.        </article>
  808.  
  809.        <article class="fanfic-triggers">
  810.  
  811.            <!-- triggers -->
  812.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  813.            
  814.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  815.        </article>
  816.    
  817.    </section>
  818.    <!-- fanfic box end -->
  819.    
  820.    <section class="fanfic-box five-stars">
  821.  
  822.        <article class="upper-section">
  823.  
  824.            <figure class="fanfic-image">
  825.                <!-- fanfic image -->
  826.                <img src="IMAGE URL"  class="fanfic-image">
  827.            </figure>
  828.  
  829.            <article class="title-author">
  830.  
  831.                <!-- fanfic title -->
  832.                <div class="title">
  833.                    <a target="_blank" href="fic link">title</a>
  834.                </div>
  835.  
  836.                <!-- fanfic author -->
  837.                <div class="author"><a target="_blank" href="author link">author</a></div>
  838.  
  839.            </article>
  840.  
  841.            <article class="star-rating">
  842.                <i class="fa-solid fa-star"></i>
  843.                <i class="fa-solid fa-star"></i>
  844.                <i class="fa-solid fa-star"></i>
  845.                <i class="fa-solid fa-star"></i>
  846.                <i class="fa-solid fa-star"></i>
  847.            </article>
  848.  
  849.        </article>
  850.        
  851.        <article class="ship-and-fandom">
  852.  
  853.            <!-- ship -->
  854.            <div class="ship">ship</div>
  855.  
  856.            <!-- fandom -->
  857.            <div class="fandom">fandom</div>
  858.        </article>
  859.  
  860.        <article class="fanfic-summary">
  861.  
  862.            <!-- fanfic summary -->
  863.            
  864.            Summary
  865.  
  866.        </article>
  867.  
  868.        <article class="fanfic-links">
  869.  
  870.            <!-- fic links -->
  871.            read on <a target="blank" href="LINK">link</a>
  872.        </article>
  873.  
  874.        <article class="fanfic-info">
  875.  
  876.            <!-- details -->
  877.            <li><b>detail:</b> content</li>
  878.            <li><b>detail:</b> content</li>
  879.            <li><b>detail:</b> content</li>
  880.  
  881.        </article>
  882.  
  883.        <article class="fanfic-series">
  884.            <!-- if part of a series -->
  885.            <a href="series link">series name</a>
  886.        </article>
  887.  
  888.        <article class="fanfic-triggers">
  889.  
  890.            <!-- triggers -->
  891.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  892.            
  893.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  894.        </article>
  895.    
  896.    </section>
  897.    <!-- fanfic box end -->
  898.    
  899.    <section class="fanfic-box five-stars">
  900.  
  901.        <article class="upper-section">
  902.  
  903.            <figure class="fanfic-image">
  904.                <!-- fanfic image -->
  905.                <img src="IMAGE URL"  class="fanfic-image">
  906.            </figure>
  907.  
  908.            <article class="title-author">
  909.  
  910.                <!-- fanfic title -->
  911.                <div class="title">
  912.                    <a target="_blank" href="fic link">title</a>
  913.                </div>
  914.  
  915.                <!-- fanfic author -->
  916.                <div class="author"><a target="_blank" href="author link">author</a></div>
  917.  
  918.            </article>
  919.  
  920.            <article class="star-rating">
  921.                <i class="fa-solid fa-star"></i>
  922.                <i class="fa-solid fa-star"></i>
  923.                <i class="fa-solid fa-star"></i>
  924.                <i class="fa-solid fa-star"></i>
  925.                <i class="fa-solid fa-star"></i>
  926.            </article>
  927.  
  928.        </article>
  929.        
  930.        <article class="ship-and-fandom">
  931.  
  932.            <!-- ship -->
  933.            <div class="ship">ship</div>
  934.  
  935.            <!-- fandom -->
  936.            <div class="fandom">fandom</div>
  937.        </article>
  938.  
  939.        <article class="fanfic-summary">
  940.  
  941.            <!-- fanfic summary -->
  942.            
  943.            Summary
  944.  
  945.        </article>
  946.  
  947.        <article class="fanfic-links">
  948.  
  949.            <!-- fic links -->
  950.            read on <a target="blank" href="LINK">link</a>
  951.        </article>
  952.  
  953.        <article class="fanfic-info">
  954.  
  955.            <!-- details -->
  956.            <li><b>detail:</b> content</li>
  957.            <li><b>detail:</b> content</li>
  958.            <li><b>detail:</b> content</li>
  959.  
  960.        </article>
  961.  
  962.        <article class="fanfic-series">
  963.            <!-- if part of a series -->
  964.            <a href="series link">series name</a>
  965.        </article>
  966.  
  967.        <article class="fanfic-triggers">
  968.  
  969.            <!-- triggers -->
  970.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  971.            
  972.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  973.        </article>
  974.    
  975.    </section>
  976.    <!-- fanfic box end -->
  977.    
  978.    <section class="fanfic-box five-stars">
  979.  
  980.        <article class="upper-section">
  981.  
  982.            <figure class="fanfic-image">
  983.                <!-- fanfic image -->
  984.                <img src="IMAGE URL"  class="fanfic-image">
  985.            </figure>
  986.  
  987.            <article class="title-author">
  988.  
  989.                <!-- fanfic title -->
  990.                <div class="title">
  991.                    <a target="_blank" href="fic link">title</a>
  992.                </div>
  993.  
  994.                <!-- fanfic author -->
  995.                <div class="author"><a target="_blank" href="author link">author</a></div>
  996.  
  997.            </article>
  998.  
  999.            <article class="star-rating">
  1000.                <i class="fa-solid fa-star"></i>
  1001.                <i class="fa-solid fa-star"></i>
  1002.                <i class="fa-solid fa-star"></i>
  1003.                <i class="fa-solid fa-star"></i>
  1004.                <i class="fa-solid fa-star"></i>
  1005.            </article>
  1006.  
  1007.        </article>
  1008.        
  1009.        <article class="ship-and-fandom">
  1010.  
  1011.            <!-- ship -->
  1012.            <div class="ship">ship</div>
  1013.  
  1014.            <!-- fandom -->
  1015.            <div class="fandom">fandom</div>
  1016.        </article>
  1017.  
  1018.        <article class="fanfic-summary">
  1019.  
  1020.            <!-- fanfic summary -->
  1021.            
  1022.            Summary
  1023.  
  1024.        </article>
  1025.  
  1026.        <article class="fanfic-links">
  1027.  
  1028.            <!-- fic links -->
  1029.            read on <a target="blank" href="LINK">link</a>
  1030.        </article>
  1031.  
  1032.        <article class="fanfic-info">
  1033.  
  1034.            <!-- details -->
  1035.            <li><b>detail:</b> content</li>
  1036.            <li><b>detail:</b> content</li>
  1037.            <li><b>detail:</b> content</li>
  1038.  
  1039.        </article>
  1040.  
  1041.        <article class="fanfic-series">
  1042.            <!-- if part of a series -->
  1043.            <a href="series link">series name</a>
  1044.        </article>
  1045.  
  1046.        <article class="fanfic-triggers">
  1047.  
  1048.            <!-- triggers -->
  1049.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 1</li>
  1050.            
  1051.            <li><i class="fa-solid fa-triangle-exclamation"></i>trigger 2</li>
  1052.        </article>
  1053.    
  1054.    </section>
  1055.    <!-- fanfic box end -->
  1056.    
  1057.  
  1058. </main>
  1059.  
  1060.  
  1061. </section> <!-- flex container wrapper -->
  1062.  
  1063. <div style="position:fixed;bottom:2rem;right:2rem;font-size:.85rem"><a target="_blank" href="https://southcodes.tumblr.com/">SC</a></div>
  1064.  
  1065.  
  1066. <!-- scripts -->
  1067. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1068.  
  1069. <!-- icon font -->
  1070. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1071.  
  1072. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  1073.  
  1074. <script type="text/javascript">
  1075.    $(document).ready( function() {
  1076.     // init Isotope
  1077.     var $grid = $('#main').isotope({
  1078.       itemSelector: '.fanfic-box'
  1079.     });
  1080.     // store filter for each group
  1081.     var filters = {};
  1082.    
  1083.     $('#filters-navigation').on( 'click', '.button', function() {
  1084.       var $this = $(this);
  1085.       // get group key
  1086.       var $buttonGroup = $this.parents('.button-group');
  1087.       var filterGroup = $buttonGroup.attr('data-filter-group');
  1088.       // set filter for group
  1089.       filters[ filterGroup ] = $this.attr('data-filter');
  1090.       // combine filters
  1091.       var filterValue = concatValues( filters );
  1092.       // set filter for Isotope
  1093.       $grid.isotope({ filter: filterValue });
  1094.     });
  1095.    
  1096.     // change is-checked class on buttons
  1097.     $('.button-group').each( function( i, buttonGroup ) {
  1098.       var $buttonGroup = $( buttonGroup );
  1099.       $buttonGroup.on( 'click', 'button', function() {
  1100.         $buttonGroup.find('.is-checked').removeClass('is-checked');
  1101.         $( this ).addClass('is-checked');
  1102.       });
  1103.     });
  1104.    
  1105.    });
  1106.    // flatten object by concatting values
  1107.    function concatValues( obj ) {
  1108.     var value = '';
  1109.     for ( var prop in obj ) {
  1110.       value += obj[ prop ];
  1111.     }
  1112.     return value;
  1113.    }
  1114.    </script>
  1115. </body>
  1116. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!