API tools faq
paste
Advertisement
southcodes

kaleidoscope | media page

southcodes
Oct 9th, 2022 (edited)
2,142
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.02 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page 'kaleidoscope' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icon font by http://fontawesome.io/icons/
  10.     - slide in sidebar https://stackoverflow.com/questions/62431834/css-onclick-event-for-a-slide-in-menu-no-js
  11.     - isotope filters https://isotope.metafizzy.co/
  12.  
  13.  -->
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.     <title>{title}</title>
  18.    
  19.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.  
  21.     <link rel="shortcut icon" href="{favicon}">
  22.     <meta name="description" content="{MetaDescription}"/>
  23.  
  24.     <!-- fonts -->
  25.     <link rel="preconnect" href="https://fonts.googleapis.com">
  26.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  27.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  28.    
  29.     <!-- normalize -->
  30.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  31.    
  32. <style>
  33. :root {
  34.     --background:#fafafa;
  35.     --text:#333;
  36.     --links: #8cb3db;
  37.     --links-hover: #36608c;
  38.     --borders:#eee;
  39.     --icons: #36608c;
  40.     --sidebar-background:#fff;
  41.     --boxes-background:#fff;
  42.     --header-background:#fff
  43. }
  44.  
  45. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  46. .tmblr-iframe:hover {opacity:.8;}
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  49. ::-webkit-scrollbar {width:6px}
  50. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  51.  
  52. pre {font-family:consolas;
  53.     white-space: pre-wrap;       /* css-3 */
  54.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  55.     white-space: -pre-wrap;      /* Opera 4- */
  56.     white-space: -o-pre-wrap;    /* Opera 7 */
  57.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  58.  
  59. body, figure{margin:0;padding:0}
  60. html{font: 14px 'Karla', sans-serif;}
  61. body {font-size:14px;color:var(--text);background:var(--background);}
  62. a {text-decoration: none;color:var(--links);word-break:break-word;}
  63. a:hover {color:var(--links-hover);}
  64. blockquote {margin:0;padding:0;}
  65. img {max-width:100%;height: auto;display: block;margin:0}
  66. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  67. ol,li,ul {list-style: none;padding:0;margin:0;}
  68.  
  69. * {margin:0;padding:0;box-sizing: border-box;}
  70. p {margin:1rem 0}
  71.  
  72. body {
  73.     background-image: url(https://static.tumblr.com/p5i0ib5/qDgrji1uh/pattern2.png);
  74. }
  75.  
  76. /* container  */
  77.  
  78. #wrapper {
  79.     display: flex;
  80.     flex-flow: row wrap;
  81. }
  82.  
  83. /* sidebar */
  84.  
  85. #hamburger-checkbox {display: none;}  
  86. #hamburger {display: none;}
  87.  
  88. #filters {
  89.     width: 17rem;
  90.     background-color: var(--sidebar-background);
  91.     position: fixed;left:0;top:0;bottom:0;
  92.     overflow: auto;
  93.     border-right: 1px solid var(--borders);
  94.     padding:4rem 3rem;
  95. }
  96.  
  97. #filters .is-checked {
  98.     border-left: 4px solid var(--icons);
  99.     padding-left: .5rem;
  100.     transition-duration: .1s;
  101. }
  102.  
  103. .filters-title {
  104.     margin:0 0 2rem;
  105.     font: 600 .95rem 'Raleway', sans-serif;
  106.     letter-spacing: .04rem;
  107.     text-transform: uppercase;
  108.     display: flex;
  109.     align-items: center;
  110. }
  111.  
  112. .filters-title:before {
  113.     content: '\f111';
  114.     font-family: 'Font Awesome 5 free';
  115.     font-weight: 900;
  116.     color:var(--icons);
  117.     margin-right: 1rem;
  118.     font-size: .5rem;
  119. }
  120.  
  121. #filters i {
  122.     color: var(--icons);
  123.     margin-right: 1rem;
  124. }
  125.  
  126. #filters .fa-star {
  127.     font-size: .7rem;
  128.     margin:0 .3rem 0 0;
  129.     color: gold;
  130. }
  131.  
  132. .button-group {margin:1rem 0 5rem;}
  133.  
  134. .button-group:last-of-type {margin-bottom: 0;}
  135.  
  136. #filters button {
  137.     background-color: transparent;
  138.     padding:.3rem 0;margin:1.5rem 0;
  139.     display: block;
  140.     border:0;
  141.     cursor:pointer;
  142.     font-family: 'Karla', sans-serif;
  143.     transition-duration: .2s;
  144.     color:var(--text)
  145. }
  146.  
  147. #filters button:focus {outline:0}
  148. #filters-rating button{margin: 0;}
  149. .button-group#filters-rating button{margin:.3rem 0}
  150. .button-group#filters-rating button:first-of-type{margin-bottom: 1rem;}
  151.  
  152. .other-filter .button {
  153.     margin:1rem 0!important;
  154.     display:flex!important;
  155.     align-items: center!important;
  156. }
  157.  
  158. .other-filter button:before {
  159.     content: '\f111';
  160.     font-family: 'Font Awesome 5 free';
  161.     font-weight: 900;
  162.     color:var(--icons);
  163.     margin:0 1rem;
  164.     font-size: .3rem;
  165. }
  166.  
  167. /* main content */
  168.  
  169. main {
  170.     width: calc(100% - 17rem);
  171.     margin:5rem 0 0rem 17rem;
  172. }
  173.  
  174. /*  header  */
  175.  
  176. header {
  177.     width:calc(80% - 2rem);
  178.     padding: 3rem;
  179.     margin:0 auto 5rem;
  180.     background-color: var(--header-background);
  181.     border:1px solid var(--borders);
  182.     border-radius: 4px;
  183. }
  184.  
  185. figure.header-image {
  186.     width:5rem;
  187.     height:5rem;
  188.     margin-right: 2rem;
  189.     display: inline-block;
  190.     vertical-align:middle;
  191. }
  192.  
  193. img.header-image {
  194.     width: 100%;
  195.     height: 100%;
  196.     object-fit: cover;
  197.     border-radius: 4px;
  198. }
  199.  
  200. #page-title {
  201.     display: inline-block;
  202.     vertical-align: middle;
  203.     margin:0;
  204.     font: 600 1.2rem 'Raleway', sans-serif;
  205.     letter-spacing: .05rem;
  206. }
  207.  
  208. #page-description {
  209.     margin-top: 2rem;
  210.     letter-spacing: .03rem;
  211.     line-height: 130%;
  212. }
  213.  
  214. /* main navi */
  215.  
  216. #main-navigation {margin-top: 2rem;}
  217.  
  218. #main-navigation li{
  219.     display: inline-block;
  220.     margin-right: 2rem;
  221. }
  222.  
  223. #main-navigation li a {text-decoration: underline;}
  224.  
  225. /* grid */
  226.  
  227. #grid {
  228.     width:80%;
  229.     margin:0 auto
  230. }
  231.  
  232. .grid-item {
  233.     width: calc(50% - 2rem);
  234.     margin:0rem 1rem 6rem;
  235. }
  236.  
  237. .box-inside {
  238.     background-color: var(--boxes-background);
  239.     padding:2rem;
  240.     border:1px solid var(--borders);
  241.     border-bottom: 0;
  242.     border-radius: 4px;
  243.     border-bottom-left-radius:0 ;
  244.     border-bottom-right-radius:0 ;
  245. }
  246.  
  247. figure.media-image {
  248.     width:3rem;
  249.     height:3rem;
  250.     margin-right: 1rem;
  251.     display: inline-block;
  252.     vertical-align:middle;
  253. }
  254.  
  255. img.media-image {
  256.     width: 100%;
  257.     height: 100%;
  258.     object-fit: cover;
  259.     border-radius: 4px;
  260. }
  261.  
  262. .media-title {
  263.     display: inline-block;
  264.     vertical-align: middle;
  265.     margin:0;
  266.     font: 600 1rem 'Raleway', sans-serif;
  267.     letter-spacing: .05rem;
  268. }
  269.  
  270. .media-info {
  271.     display: flex;
  272.     justify-content: space-between;
  273.     margin:1rem 0 2rem;
  274. }
  275.  
  276. .media-info time {color:#aaa;}
  277.  
  278. .media-info .fa-star {
  279.     font-size: .7rem;
  280.     margin:0 .3rem 0 0;
  281.     color: gold;
  282. }
  283.  
  284. .media-progress {width: 100%;}
  285.  
  286. .media-progress .progress-bar{
  287.     width: 100%;
  288.     height:5px;
  289.     background-color: var(--boxes-background);
  290.     position: relative;
  291.     border:1px solid var(--borders);
  292.     border-top: 0;
  293.     border-bottom-left-radius:4px ;
  294.     border-bottom-right-radius:4px ;
  295. }
  296.  
  297. .media-progress .progress-bar .progress-filling{
  298.     position: absolute;top:0;bottom:0;left:0;
  299.     background-color: var(--icons);
  300.     height:5px;
  301.     border-bottom-left-radius:4px ;
  302.     border-bottom-right-radius:4px ;
  303. }
  304.  
  305. .media-details ul{
  306.     display:flex;
  307.     justify-content: center;
  308.     flex-wrap: wrap;
  309.     padding:1rem;
  310.     line-height: 150%;
  311.     text-align: center;
  312. }
  313.  
  314. .media-details ul li {
  315.     display:flex;
  316.     align-items: center;
  317. }
  318.  
  319. .media-details li:before{
  320.     content: '\f111';
  321.     font-family: 'Font Awesome 5 free';
  322.     font-weight: 900;
  323.     color:var(--icons);
  324.     margin:0 1rem;
  325.     font-size: .3rem;
  326. }
  327.  
  328. .media-details li:first-of-type:before{display: none;}
  329.  
  330. /* MEDIA */
  331.  
  332.  
  333. @media only screen and (min-width:0px) and (max-width:699px) {
  334.  
  335.     #hamburger {
  336.         position: fixed;
  337.         top:2rem;left:2rem;
  338.         z-index: 99;
  339.         display: block;
  340.         cursor:pointer
  341.     }
  342.  
  343.     #hamburger .fa-bars {
  344.         font-weight: 900;
  345.         font-size: 1.5rem;
  346.         background-color: var(--sidebar-background);
  347.         padding:1rem;
  348.         border:1px solid var(--borders);
  349.         color: var(--icons);
  350.         border-radius: 3px;
  351.     }
  352.  
  353.     #hamburger-checkbox:checked~#filters {
  354.         transition: 2s ease;
  355.         transform: translateX(0px);
  356.     }
  357.    
  358.     #filters {
  359.         width: 200px;
  360.         height: 100vh;
  361.         transform: translateX(-200px);
  362.         transition: 2s ease;
  363.         position: fixed;top:0;left:0;bottom:0;
  364.         z-index: 9;
  365.         padding-top: 8rem;
  366.     }
  367.  
  368.     main {
  369.         width: 100%;
  370.         margin:7rem 0 0;
  371.     }
  372.    
  373.     header {
  374.         width:90%
  375.     }
  376.    
  377.     #grid {
  378.         width:90%;
  379.     }
  380.  
  381. }
  382.  
  383.  
  384. @media only screen and (min-width:0px) and (max-width:900px) {
  385.        
  386.     .grid-item {
  387.         width: calc(100% - 2rem);
  388.         margin:0rem 1rem 6rem;
  389.     }
  390. }
  391. </style>
  392.    
  393. </head>
  394. <body>
  395.  
  396. <div id="wrapper">
  397.  
  398. <!-- sidebar open button -->
  399. <input type="checkbox" id="hamburger-checkbox">
  400. <label id="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-bars"></i></label>
  401.  
  402. <!-- filters sidebar start -->
  403. <aside id="filters">
  404.  
  405.   <!-- by type filter -->
  406.  
  407.   <h3 class="filters-title">media type</h3>
  408.     <div class="button-group" data-filter-group="one">
  409.        
  410.         <button class="button is-checked" data-filter=""><i class="fa-solid fa-plus"></i> all</button>
  411.        
  412.         <button class="button" data-filter=".series"><i class="fa-solid fa-tv"></i> series</button>
  413.        
  414.         <button class="button" data-filter=".movies"><i class="fa-solid fa-film"></i> movies</button>
  415.  
  416.         <button class="button" data-filter=".pods"><i class="fa-solid fa-music"></i> podcasts</button>
  417.     </div>
  418.  
  419.    
  420.   <!-- by stars filter -->
  421.  
  422.     <h3 class="filters-title">rating</h3>
  423.     <div class="button-group" id="filters-rating" data-filter-group="two">
  424.        
  425.         <button class="button is-checked" data-filter=""><i class="fa-solid fa-plus"></i> all</button>
  426.        
  427.         <button class="button" data-filter=".one-star"><i class="fa-solid fa-star"></i></button>
  428.        
  429.         <button class="button" data-filter=".two-stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></button>
  430.        
  431.         <button class="button" data-filter=".three-stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></button>
  432.        
  433.         <button class="button" data-filter=".four-stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></button>
  434.  
  435.         <button class="button" data-filter=".five-stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></button>
  436.        
  437.     </div>
  438.  
  439.    
  440.     <!--
  441.      
  442.       filter template
  443.  
  444.       to costumize filters please see: https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
  445.  
  446.     -->
  447.     <h3 class="filters-title">other filter</h3>
  448.     <div class="button-group other-filter" data-filter-group="three">
  449.        
  450.         <button class="button is-checked" data-filter="">all</button>
  451.        
  452.        
  453.         <button class="button" data-filter=".filter-one">filter 1</button>
  454.        
  455.         <button class="button" data-filter=".filter-two">filter 2</button>
  456.        
  457.         <button class="button" data-filter=".filter-three">filter 3</button>
  458.        
  459.     </div>
  460.  
  461.    
  462.     <h3 class="filters-title">other filter</h3>
  463.     <div class="button-group other-filter" data-filter-group="three">
  464.        
  465.         <button class="button is-checked" data-filter="">all</button>
  466.  
  467.         <button class="button" data-filter=".filter-one">filter 1</button>
  468.        
  469.         <button class="button" data-filter=".filter-two">filter 2</button>
  470.        
  471.         <button class="button" data-filter=".filter-three">filter 3</button>
  472.        
  473.     </div>
  474.  
  475.    
  476. </aside>
  477. <!--filters sidebar end-->
  478.  
  479. <!-- main content start -->
  480. <main>
  481.  
  482. <!-- header start -->
  483. <header>
  484.  
  485.     <!-- header image -->
  486.     <figure class="header-image"><img src="HEADER IMAGE URL" alt="header image" class="header-image"></figure>
  487.  
  488.     <!-- page title -->
  489.     <h1 id="page-title">page title</h1>
  490.  
  491.     <!-- page description -->
  492.     <article id="page-description">
  493.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At laboriosam reiciendis modi, eos doloribus exercitationem. Expedita soluta nihil, corrupti distinctio molestiae nemo, minima doloremque maiores, debitis placeat totam. Sit, provident?</p>
  494.     </article>
  495.  
  496.     <!-- page navigation -->
  497.     <nav id="main-navigation"><ul>
  498.         <li><a href="">link</a></li>
  499.         <li><a href="">link</a></li>
  500.         <li><a href="">link</a></li>
  501.     </ul></nav>
  502.    
  503. </header>
  504. <!-- header end -->
  505.  
  506. <!-- grid items start -->
  507. <section id="grid">
  508.  
  509.  
  510.     <!-- box start -->
  511.     <div class="grid-item filter-one filter-two"><div class="box-inside">
  512.      
  513.       <!-- media image -->
  514.         <figure class="media-image"><img src="MEDIA IMAGE" alt="media image" class="media-image"></figure>
  515.  
  516.         <!-- media title -->
  517.         <h2 class="media-title">media name</h2>
  518.  
  519.         <!-- media year -->
  520.         <div class="media-info">
  521.           <time>year</time>
  522.  
  523.           <!-- star rating -->
  524.           <div>
  525.             <i class="fa-solid fa-star"></i>
  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.           </div>
  531.         </div>
  532.  
  533.         <!-- media description -->
  534.         <article id="media-description">
  535.           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quo, qui odit vero voluptatem beatae doloremque consequatur, possimus id excepturi nulla labore neque provident omnis voluptates placeat. Quisquam, dolorum odit?</p>
  536.         </article>
  537.  
  538.     </div><!-- box inside end -->
  539.        
  540.     <!-- media progress bar -->
  541.       <article class="media-progress">
  542.           <div class="progress-bar">
  543.             <!-- change the width to fill the bar -->
  544.             <div class="progress-filling" style="width:100%"></div>
  545.           </div>
  546.         </article>
  547.  
  548.         <!-- media details -->
  549.         <article class="media-details">
  550.           <ul>
  551.             <li>info</li>
  552.             <li>info</li>
  553.             <li>info</li>
  554.             <li>info</li>
  555.           </ul>
  556.         </article>
  557.  
  558.     </div>
  559.     <!-- box end -->
  560.  
  561.    
  562.  
  563.     <!-- box start -->
  564.     <div class="grid-item filter-one filter-two"><div class="box-inside">
  565.      
  566.       <!-- media image -->
  567.         <figure class="media-image"><img src="MEDIA IMAGE" alt="media image" class="media-image"></figure>
  568.  
  569.         <!-- media title -->
  570.         <h2 class="media-title">media name</h2>
  571.  
  572.         <!-- media year -->
  573.         <div class="media-info">
  574.           <time>year</time>
  575.  
  576.           <!-- star rating -->
  577.           <div>
  578.             <i class="fa-solid fa-star"></i>
  579.             <i class="fa-solid fa-star"></i>
  580.             <i class="fa-solid fa-star"></i>
  581.             <i class="fa-solid fa-star"></i>
  582.             <i class="fa-solid fa-star"></i>
  583.           </div>
  584.         </div>
  585.  
  586.         <!-- media description -->
  587.         <article id="media-description">
  588.           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quo, qui odit vero voluptatem beatae doloremque consequatur, possimus id excepturi nulla labore neque provident omnis voluptates placeat. Quisquam, dolorum odit?</p>
  589.         </article>
  590.  
  591.     </div><!-- box inside end -->
  592.        
  593.     <!-- media progress bar -->
  594.       <article class="media-progress">
  595.           <div class="progress-bar">
  596.             <!-- change the width to fill the bar -->
  597.             <div class="progress-filling" style="width:100%"></div>
  598.           </div>
  599.         </article>
  600.  
  601.         <!-- media details -->
  602.         <article class="media-details">
  603.           <ul>
  604.             <li>info</li>
  605.             <li>info</li>
  606.             <li>info</li>
  607.             <li>info</li>
  608.           </ul>
  609.         </article>
  610.  
  611.     </div>
  612.     <!-- box end -->
  613.  
  614.  
  615.  
  616. </section>
  617. <!-- grid items end -->
  618.  
  619. </main>
  620. <!-- main content end -->
  621.  
  622. </div> <!-- wrapper end -->
  623.  
  624. <!-- do not touch -->
  625. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  626.  
  627.  
  628. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  629.  
  630. <!-- isotope -->
  631. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  632.  
  633. <!-- icons font -->
  634. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  635.  
  636. <script>
  637. $(document).ready( function() {
  638.  // init Isotope
  639.  var $grid = $('#grid').isotope({
  640.    itemSelector: '.grid-item'
  641.  });
  642.  // store filter for each group
  643.  var filters = {};
  644.  
  645.  $('#filters').on( 'click', '.button', function() {
  646.    var $this = $(this);
  647.    // get group key
  648.    var $buttonGroup = $this.parents('.button-group');
  649.    var filterGroup = $buttonGroup.attr('data-filter-group');
  650.    // set filter for group
  651.    filters[ filterGroup ] = $this.attr('data-filter');
  652.    // combine filters
  653.    var filterValue = concatValues( filters );
  654.    // set filter for Isotope
  655.    $grid.isotope({ filter: filterValue });
  656.  });
  657.  
  658.  // change is-checked class on buttons
  659.  $('.button-group').each( function( i, buttonGroup ) {
  660.    var $buttonGroup = $( buttonGroup );
  661.    $buttonGroup.on( 'click', 'button', function() {
  662.      $buttonGroup.find('.is-checked').removeClass('is-checked');
  663.      $( this ).addClass('is-checked');
  664.    });
  665.  });
  666.  
  667. });
  668. // flatten object by concatting values
  669. function concatValues( obj ) {
  670.  var value = '';
  671.  for ( var prop in obj ) {
  672.    value += obj[ prop ];
  673.  }
  674.  return value;
  675. }
  676. </script>
  677. </body>
  678. </html>
Advertisement
Comments
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!