southcodes

decay | rec page

May 18th, 2022 (edited)
628
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data Copied