API tools faq
paste
Advertisement
southcodes

symphony | timeline page

southcodes
Jun 2nd, 2022 (edited)
1,391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.70 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - timeline page 'symphony' 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.     - slide in menu https://stackoverflow.com/a/62432099
  10.     - isotope filters https://isotope.metafizzy.co/
  11.     - icon font by https://fontawesome.com/
  12.  
  13.  -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.  
  20.     <meta charset="UTF-8">
  21.    
  22.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23.  
  24.     <link rel="shortcut icon" href="{favicon}">
  25.     <meta name="description" content="{MetaDescription}"/>
  26.  
  27.     <!-- fonts -->
  28.     <link rel="preconnect" href="https://fonts.googleapis.com">
  29.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  30.     <link href="https://fonts.googleapis.com/css2?&family=Montserrat: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;1,400;1,500;1,600&display=swap" rel="stylesheet">
  31.    
  32.     <!-- normalize -->
  33.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  34.  
  35. <style>
  36. :root {
  37.     --background:#fafafa;
  38.     --event-background:#ffffff;
  39.     --text:#333;
  40.     --links: #db8c8c;
  41.     --links-hover: #36608c;
  42.     --borders:#ddd;
  43.     --accents:rgb(255, 132, 132);
  44. }
  45.  
  46. * {margin: 0;padding: 0;box-sizing: border-box;}
  47.    
  48. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  49. .tmblr-iframe:hover {opacity:.8;}
  50.  
  51. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  52. ::-webkit-scrollbar {width:6px}
  53. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  54.  
  55. pre {font-family:consolas;
  56.     white-space: pre-wrap;       /* css-3 */
  57.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  58.     white-space: -pre-wrap;      /* Opera 4- */
  59.     white-space: -o-pre-wrap;    /* Opera 7 */
  60.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  61.  
  62. body, figure{margin:0;padding:0}
  63. html{font: 14px 'Open Sans', sans-serif;}
  64. body {font-size:14px;color:var(--text);background:var(--background);}
  65. a {text-decoration: none;color:var(--links);word-break:break-word;}
  66. a:hover {color:var(--links-hover);}
  67. blockquote {margin:0;padding:0;}
  68. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  69. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  70. p {margin:1rem 0}
  71.  
  72.  
  73. /* filters sidebar */
  74.  
  75. #filters-sidebar {
  76.     width: 15rem;
  77.     height: 100vh;
  78.     transition: 2s ease;
  79.     overflow: auto;
  80.     text-align: right;
  81. }
  82. #hamburger-checkbox,.hamburger {display: none;}
  83. #hamburger-checkbox:checked~.nav {transition: 2s ease;transform: translateX(0px);}
  84.  
  85. .nav {
  86.     position: fixed;top: 0;bottom: 0;left: 0;right: 0;
  87.     width: 15rem;
  88.     height: 100vh;
  89.     transition: 2s ease;
  90.     overflow: auto;
  91.     text-align: right;
  92.     border-right: 1px solid var(--borders);
  93.     background-color: var(--event-background);
  94.     padding: 4rem 2rem 2rem;
  95. }
  96.  
  97. .filters-image {
  98.     width:5rem;
  99.     height:5rem;
  100.     margin:0 auto 4rem;
  101.     border-radius: 100%;
  102. }
  103.  
  104. .button-group {
  105.     margin-bottom: 6rem;
  106. }
  107.  
  108. .button-group button{
  109.     padding:0;margin:1rem 0;
  110.     background-color: transparent;
  111.     border: 0;
  112.     display: block;
  113.     width: 100%;
  114.     text-align: right;
  115.     text-transform: uppercase!important;
  116.     font: 600 .8rem 'Montserrat', sans-serif;
  117.     transition-duration: .2s;
  118.     line-height: 175%;
  119. }
  120. .button-group button:focus{outline:0}
  121.  
  122. .button-group button:after{
  123.     content: '\f111';
  124.     font-family: 'Font Awesome 5 Free';
  125.     font-size: .3rem;
  126.     vertical-align: middle;
  127.     margin-left: .5rem;
  128.     color: var(--accents);
  129. }
  130. .is-checked span{
  131.     border-bottom:1px solid var(--accents);
  132.     transition-duration: .2s;
  133.     padding: 0 .3rem .2rem;
  134. }
  135.  
  136. .filter-title {
  137.     font: 700 1.1rem 'Montserrat', sans-serif;
  138.     text-transform: uppercase;
  139.     margin-bottom: 1.5rem;    
  140. }
  141.  
  142. .filter-title:after {
  143.     content: 'O';
  144.     font-weight: 700;
  145.     margin-left: 1rem;
  146.     color:var(--accents)
  147. }
  148.  
  149. /* wrappers */
  150.  
  151. #main-wrapper {
  152.     display: flex;
  153.     flex-flow: row wrap;
  154.     justify-content: space-evenly;
  155. }
  156.  
  157. #flex-wrapper {width: calc(100% - 15rem);}
  158.  
  159. /*  header  */
  160.  
  161. header {
  162.     margin:4rem auto 8rem;
  163.     width:50rem;
  164.     text-align: center;
  165.     padding:2rem;
  166.     background:var(--event-background);
  167.     border: 1px solid var(--borders);
  168. }
  169.  
  170. /* header image */
  171.  
  172. figure.header-image {
  173.     display:block;margin:0 auto;
  174.     width:100%;
  175.     max-width: 40rem;
  176.     height: 9rem;
  177.     position: relative;
  178. }
  179.  
  180. figure.header-image:before {
  181.     content: '';
  182.     position: absolute;left:0;right:0;top:50%;
  183.     width:100%;
  184.     height:1px;
  185.     background-color: var(--borders);
  186.     z-index: 2;
  187. }
  188.  
  189. img.header-image {
  190.     width:9rem;
  191.     height: 9rem;
  192.     border-radius: 100%;
  193.     display: block;
  194.     object-fit: cover;
  195.     margin:0 auto;
  196.     z-index: 9999;
  197.     border: 1rem solid var(--event-background);
  198.     position: relative;
  199.     z-index:9
  200. }
  201.  
  202. /* page title */
  203.  
  204. #page-title {
  205.     text-transform: uppercase;
  206.     font: 700 1.5rem 'Montserrat', sans-serif;
  207.     line-height: 165%;
  208. }
  209.  
  210. #page-title span {
  211.     box-shadow: inset 0 -7px var(--accents);padding:0 .3rem
  212. }
  213.  
  214. /* header navigation */
  215.  
  216. #header-navigation {
  217.     margin-top: 3rem;
  218.     font-size: .9rem;
  219.     font-family: 'Montserrat', sans-serif;
  220.     line-height: 160%;
  221. }
  222.  
  223. #header-navigation ul,#header-navigation ul li{
  224.     list-style: none;
  225. }
  226.  
  227. #header-navigation ul li{
  228.     display: inline-block;
  229.     font-weight: 600;
  230. }
  231.  
  232. #header-navigation ul li a{
  233.     color:var(--text);
  234.     border-bottom: 1px solid var(--accents);
  235.     padding: 0 .2rem 0;
  236. }
  237.  
  238. #header-navigation ul li:after{
  239.     content: '\f111';
  240.     font-family: 'Font Awesome 5 Free';
  241.     font-weight: 900;
  242.     font-size: .3rem;
  243.     vertical-align: middle;
  244.     margin:0 1rem;
  245.     color: var(--accents);
  246. }
  247.  
  248. #header-navigation ul li:last-of-type:after{
  249.     display: none;
  250. }
  251.  
  252.  
  253. #page-description {
  254.     max-width: 35rem;
  255.     margin:3rem auto 0;
  256.     font-size: .9rem;
  257.     line-height: 160%;
  258.     letter-spacing: .04rem;
  259. }
  260.  
  261. /* timeline */
  262.  
  263. #timeline {position: relative;}
  264. #timeline:after {
  265.     content: '';
  266.     position: absolute;top:0;bottom:0;left:50%;
  267.     width: 1px;
  268.     height: calc(100% - 14rem);
  269.     background-color: var(--borders);
  270.     z-index: -1;
  271. }
  272.  
  273. .fa-circle {
  274.     font-size:1rem;
  275.     display: inline-block;
  276.     vertical-align: top;
  277.     margin: 1rem;
  278.     color: var(--accents);
  279.     border:1px solid var(--borders);
  280.     padding:.3rem;
  281.     border-radius: 100%;
  282.     background-color: var(--event-background);
  283. }
  284.  
  285. /* events */
  286.  
  287. .timeline-event {
  288.     width:50rem;
  289.     max-width: 100%;
  290.     margin:0rem auto 12rem;
  291.     position: relative;
  292. }
  293.  
  294. .event-image {
  295.     width:100%;
  296.     display: block;
  297.     margin: 0;
  298.     height: 100%;
  299.     object-fit: cover;
  300.     object-position: 80% 100%;
  301. }
  302.  
  303. /* event date */
  304.  
  305. .timeline-date {
  306.     width: 10rem;
  307.     display: inline-block;
  308.     vertical-align: top;
  309.     text-align: center;
  310.     font-family: 'Montserrat', sans-serif;
  311.     font-weight: 600;
  312. }
  313.  
  314. .date-year {
  315.     background-color: var(--accents);
  316.     font: 700 1.1rem 'Montserrat', sans-serif;
  317.     padding: .6rem;
  318.     letter-spacing: .04rem;
  319. }
  320. .date-calendar {
  321.     border:1px solid var(--borders);
  322.     background-color: white;
  323. }
  324.  
  325. .date-day {
  326.     padding:1rem 0;
  327.     font: 700 2rem 'Montserrat', sans-serif;
  328.     background-image: url('https://images.vectorhq.com/images/previews/d0a/dots-square-grid-01-pattern-clip-art-83859.png');
  329.     background-size: contain;
  330. }
  331.  
  332. .date-month {
  333.     padding:.6rem 0;
  334.     text-transform: uppercase;
  335.     background-color: var(--accents);
  336.     font: 700 .8rem 'Montserrat', sans-serif;
  337.     letter-spacing: .04rem;
  338. }
  339.  
  340. /* date type */
  341.  
  342. .date-type {
  343.     margin-top: 1rem;
  344.     /* padding: 1rem;     */
  345.     border:1px solid var(--borders);
  346.     background-color: white;
  347. }
  348.  
  349. .date-type hr{
  350.     margin:1rem 0
  351. }
  352.  
  353. .event-person {
  354.     background-color: var(--accents);
  355.     padding: 1rem;
  356.     text-transform: uppercase;
  357.     font-size: 1.1rem;
  358. }
  359.  
  360. .event-type {
  361.     font-size: .9rem;
  362.     padding:.8rem;
  363.     text-transform: uppercase;
  364. }
  365.  
  366. /* event description */
  367.  
  368. .event-description {
  369.     background-color: var(--event-background);
  370.     border:1px solid var(--borders);
  371.     width: calc(100% - 14.2rem - 1px);
  372.     display: inline-block;
  373.     vertical-align: top;
  374.     padding: 1rem 2rem;
  375. }
  376.  
  377. .event-title {
  378.     font: 600 2.5rem 'Montserrat', sans-serif!important;
  379.     margin:2rem 0;
  380. }
  381. .event-title span {box-shadow: inset 0 -10px var(--accents);}
  382.  
  383. /* event links */
  384.  
  385. .event-navigation {
  386.     margin:2rem 0;
  387.     padding-top:2rem;
  388.     border-top: 1px solid var(--borders);
  389.     font-size: .9rem;
  390.     letter-spacing: .04rem;
  391.     font-weight: 600;
  392.     text-align: center;
  393. }
  394. .event-navigation li{
  395.     list-style: none;
  396.     display: inline-block;
  397.     margin: 1rem  2rem 1rem 0;
  398. }
  399.  
  400. .event-navigation li:after {
  401.     content:'\f111';
  402.     margin-left: 2rem;
  403.     font-family: 'Font Awesome 5 Free';
  404.     color:var(--accents);
  405.     border: 1px solid var(--borders);
  406.     padding:.3rem;
  407.     border-radius: 100%;
  408.     font-size:.6rem;
  409. }
  410.  
  411. .event-navigation li:last-of-type:after {
  412.     display: none;
  413. }
  414.  
  415.  
  416.  
  417. /* MEDIA */
  418.  
  419. @media only screen and (min-width:00px) and (max-width:950px) {
  420.  
  421.     .hamburger {
  422.         font-size: 1.2rem;
  423.         position: fixed;
  424.         z-index: 99;
  425.         display:block;
  426.         left:1rem;top:1rem;
  427.         z-index: 999999999999999999!important;
  428.         padding: .5rem;
  429.         background-color: var(--event-background);
  430.         border: 1px solid var(--borders);
  431.         border-radius: 5px;
  432.         cursor: pointer;
  433.         color: var(--accents);
  434.       }
  435.      
  436.     .nav {
  437.         transform: translateX(-20rem);
  438.         z-index: 999;
  439.     }
  440.  
  441.     #flex-wrapper {width: 100%;
  442.     }
  443.  
  444.        
  445.     #filters-sidebar {
  446.         width: 0;
  447.         height: 100vh;
  448.     }
  449.  
  450.     header {
  451.         margin:4rem auto;
  452.         width:90%;
  453.     }
  454.    
  455.     .timeline-event {  
  456.         width:90%;
  457.         max-width: 100%;
  458.     }
  459.        
  460. }
  461.  
  462. @media only screen and (min-width:00px) and (max-width:600px) {
  463.      
  464.     .event-description {
  465.         display: block;
  466.         margin:auto;
  467.         width: 100%;
  468.     }
  469.  
  470.     .timeline-date {margin:0 auto 0;}
  471.  
  472.     .fa-circle {
  473.         font-size:1rem;
  474.         display: block;
  475.         vertical-align: top;
  476.         margin: 2rem auto;
  477.         color: var(--accents);
  478.         border:1px solid var(--borders);
  479.         padding:.3rem;
  480.         border-radius: 100%;
  481.         background-color: var(--event-background);
  482.     }
  483.  
  484.     .event-image {margin-bottom: 2rem;}
  485.  
  486.     .timeline-event{
  487.         display:flex;
  488.         flex-flow: column;
  489.     }
  490.     .event-image{order:1;}
  491.     .timeline-date{order:2;}
  492.     .fa-solid{order:3;}
  493.     .event-description{order:4;}
  494. }
  495.  
  496.  
  497. @media only screen and (min-width:1500px) and (max-width:999999px) {
  498.    
  499.     #flex-wrapper {
  500.         width: calc(100% - 15rem);
  501.     }
  502.  
  503.     header {
  504.         width: 90%;
  505.         max-width: 90rem;
  506.     }
  507.  
  508.     .timeline-event {
  509.         width: 90%;
  510.         max-width: 90rem;
  511.         margin:0rem auto 12rem;
  512.         position: relative;
  513.     }
  514.    
  515. }
  516.  
  517. </style>    
  518. </head>
  519. <body>
  520.  
  521. <section id="main-wrapper">
  522. <!-- filters -->
  523.  
  524.  
  525. <section id="filters-sidebar">
  526.  
  527.     <input type="checkbox" id="hamburger-checkbox">
  528.     <label title="event filters" class="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-filter"></i></label>
  529.    
  530.     <nav class="nav">
  531.  
  532.         <!-- filters image -->
  533.        
  534.     <figure class="filters-image"><img src="IMAGE URL" alt="" class="filters-image"></figure>
  535.  
  536.     <!-- - 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 -->
  537.    
  538.  
  539.         <h3 class="filter-title">filter title 1</h3>
  540.  
  541.         <div class="button-group" data-filter-group="a">
  542.             <button class="button is-checked" data-filter=""><span>all</span></button>
  543.             <button class="button" data-filter=".one"><span>one</span></button>
  544.             <button class="button" data-filter=".two"><span>two</span></button>
  545.         </div>
  546.  
  547.        
  548.         <h3 class="filter-title">filter title 2 </h3>
  549.  
  550.         <div class="button-group" data-filter-group="b">
  551.             <button class="button is-checked" data-filter=""><span>all</span></button>
  552.             <button class="button" data-filter=".three"><span>three</span></button>
  553.             <button class="button" data-filter=".four"><span>four</span></button>
  554.         </div>
  555.  
  556.     </nav>
  557.  
  558. </section>
  559.  
  560. <div id="flex-wrapper">
  561.  
  562. <!-- header -->
  563.  
  564. <header>
  565.  
  566.     <!-- header image -->
  567.  
  568.     <figure class="header-image"><img src="IMAGE URL" alt="" class="header-image"></figure>
  569.  
  570.     <h1 id="page-title"><span>title</span></h1>
  571.  
  572.     <nav id="header-navigation"><ul>
  573.         <li><a href="">link 1</a></li>
  574.         <li><a href="">link 2</a></li>
  575.         <li><a href="">link 3</a></li>
  576.     </ul></nav>
  577.  
  578.     <article id="page-description">
  579.         <p>description</p>
  580.     </article>
  581.    
  582. </header>
  583.  
  584. <!-- timeline -->
  585.  
  586. <main id="timeline">
  587.  
  588.  <!-- you will need to rearrange the html to get the entries to show on the left or the right, or use the templates below
  589.  
  590.  
  591.     ENTRY ON THE RIGHT TEMPLATE:
  592.  
  593. // template start
  594.  
  595. <article class="timeline-event black two">
  596.  
  597.     <figure class="event-image"><img src="IMAGE URL" alt="" class="event-image"></figure>
  598.      
  599.     <div class="timeline-date">
  600.  
  601.    
  602.         <div class="date-calendar">
  603.             <div class="date-year">year</div>
  604.             <div class="date-day">day</div>
  605.             <div class="date-month">month</div>
  606.         </div>
  607.        
  608.        
  609.         <div class="date-type">
  610.             <div class="event-person">person</div>
  611.             <div class="event-type">event type</div>
  612.         </div>
  613.  
  614.     </div>
  615.  
  616.     <i class="fa-solid fa-circle"></i>
  617.  
  618.     <div class="event-description">
  619.  
  620.         <h2 class="event-title"><span>event title</span></h2>
  621.  
  622.         <p>content</p>
  623.  
  624.         <div class="event-navigation">
  625.             <li><a href="">link 1</a></li>
  626.             <li><a href="">link 2</a></li>
  627.             <li><a href="">link 3</a></li>
  628.         </div>
  629.     </div>
  630.  
  631.  </article>
  632.  
  633.  // template end
  634.  
  635.  
  636.     ENTRY ON THE LEFT TEMPLATE:
  637.  
  638.  
  639.  // template start
  640.  
  641.     <article class="timeline-event black two">
  642.    
  643.     <figure class="event-image"><img src="IMAGE URL" alt="" class="event-image"></figure>
  644.  
  645.     <div class="event-description">
  646.  
  647.         <h2 class="event-title"><span>event title</span></h2>
  648.  
  649.         <p>content</p>
  650.  
  651.         <div class="event-navigation">
  652.             <li><a href="">link 1</a></li>
  653.             <li><a href="">link 2</a></li>
  654.             <li><a href="">link 3</a></li>
  655.         </div>
  656.     </div>
  657.    
  658.     <i class="fa-solid fa-circle"></i>
  659.  
  660.     <div class="timeline-date">
  661.  
  662.    
  663.         <div class="date-calendar">
  664.             <div class="date-year">year</div>
  665.             <div class="date-day">day</div>
  666.             <div class="date-month">month</div>
  667.         </div>
  668.        
  669.        
  670.         <div class="date-type">
  671.             <div class="event-person">person</div>
  672.             <div class="event-type">event type</div>
  673.         </div>
  674.  
  675.     </div>
  676.  
  677.  </article>
  678.  
  679.  // template end
  680.  
  681. -->
  682.  
  683. <!-- event start -->
  684. <article class="timeline-event black two">
  685.  
  686.     <!-- event image -->
  687.     <figure class="event-image"><img src="IMAGE URL" alt="" class="event-image"></figure>
  688.      
  689.     <div class="timeline-date">
  690.  
  691.         <!-- date -->
  692.    
  693.         <div class="date-calendar">
  694.             <div class="date-year">year</div>
  695.             <div class="date-day">day</div>
  696.             <div class="date-month">month</div>
  697.         </div>
  698.        
  699.         <!-- info -->
  700.        
  701.         <div class="date-type">
  702.             <div class="event-person">person</div>
  703.             <div class="event-type">event type</div>
  704.         </div>
  705.  
  706.     </div>
  707.  
  708.     <i class="fa-solid fa-circle"></i>
  709.  
  710.     <div class="event-description">
  711.  
  712.         <h2 class="event-title"><span>event title</span></h2>
  713.  
  714.         <p>content</p>
  715.  
  716.         <div class="event-navigation">
  717.             <li><a href="">link 1</a></li>
  718.             <li><a href="">link 2</a></li>
  719.             <li><a href="">link 3</a></li>
  720.         </div>
  721.     </div>
  722.  
  723.  </article>
  724. <!-- event end -->
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731. <!-- event start -->
  732. <article class="timeline-event black two">
  733.    
  734.     <!-- event image -->
  735.     <figure class="event-image"><img src="IMAGE URL" alt="" class="event-image"></figure>
  736.  
  737.     <div class="event-description">
  738.  
  739.         <h2 class="event-title"><span>event title</span></h2>
  740.  
  741.         <p>content</p>
  742.  
  743.         <div class="event-navigation">
  744.             <li><a href="">link 1</a></li>
  745.             <li><a href="">link 2</a></li>
  746.             <li><a href="">link 3</a></li>
  747.         </div>
  748.     </div>
  749.    
  750.     <i class="fa-solid fa-circle"></i>
  751.  
  752.     <div class="timeline-date">
  753.  
  754.         <!-- date -->
  755.    
  756.         <div class="date-calendar">
  757.             <div class="date-year">year</div>
  758.             <div class="date-day">day</div>
  759.             <div class="date-month">month</div>
  760.         </div>
  761.        
  762.         <!-- info -->
  763.        
  764.         <div class="date-type">
  765.             <div class="event-person">person</div>
  766.             <div class="event-type">event type</div>
  767.         </div>
  768.  
  769.     </div>
  770.  
  771.  </article>
  772. <!-- event end -->
  773.  
  774. </main>
  775.  
  776. </div> <!-- flex wrapper -->
  777.  
  778. </section>
  779.  
  780. <!-- do not touch -->
  781. <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>
  782.  
  783. <!-- scripts -->
  784.  
  785. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  786.  
  787. <!-- icon font -->
  788. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  789.  
  790. <!-- isotope -->
  791. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  792. <script type="text/javascript">
  793.     $(document).ready( function() {
  794.      // init Isotope
  795.      var $grid = $('#timeline').isotope({
  796.        itemSelector: '.timeline-event',
  797.        layoutMode: 'vertical',
  798.        vertical: {
  799.        horizontalAlignment: 0.5,
  800.     }
  801.      });
  802.      // store filter for each group
  803.      var filters = {};
  804.      
  805.      $('#filters-sidebar').on( 'click', '.button', function() {
  806.        var $this = $(this);
  807.        // get group key
  808.        var $buttonGroup = $this.parents('.button-group');
  809.        var filterGroup = $buttonGroup.attr('data-filter-group');
  810.        // set filter for group
  811.        filters[ filterGroup ] = $this.attr('data-filter');
  812.        // combine filters
  813.        var filterValue = concatValues( filters );
  814.        // set filter for Isotope
  815.        $grid.isotope({ filter: filterValue });
  816.      });
  817.      
  818.      // change is-checked class on buttons
  819.      $('.button-group').each( function( i, buttonGroup ) {
  820.        var $buttonGroup = $( buttonGroup );
  821.        $buttonGroup.on( 'click', 'button', function() {
  822.          $buttonGroup.find('.is-checked').removeClass('is-checked');
  823.          $( this ).addClass('is-checked');
  824.        });
  825.      });
  826.      
  827.     });
  828.     // flatten object by concatting values
  829.     function concatValues( obj ) {
  830.      var value = '';
  831.      for ( var prop in obj ) {
  832.        value += obj[ prop ];
  833.      }
  834.      return value;
  835.     }
  836.     </script>
  837. </body>
  838. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!