API tools faq
paste
Advertisement
roxiestheme

Fic Recs Page - Demo

roxiestheme
Aug 12th, 2015
1,857
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. >> THEMES OF ROXIE
  8.  
  9. Fic Rec Page by roxiestheme
  10. roxiestheme.tumblr.com
  11. 2015-2018 ⓒ All Rights Reserved.
  12.  
  13. ---
  14.  
  15. >> TERMS OF USE
  16.  
  17. Do NOT remove the credit
  18. Do NOT use as a base code
  19. Do NOT republish
  20. Do NOT claim as your own
  21.  
  22. ---
  23.  
  24. >> SPECIAL THANKS
  25.  
  26. Fonts by Google Fonts
  27. Icons by FontAwesome (v4.7)
  28. Isotope by Metafizzy
  29. style-my-tooltips by Malihu
  30.  
  31. -->
  32.  
  33. <meta charset="utf-8" />
  34. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  35.  
  36. <title>Fic Recs</title>
  37. <link rel="shortcut icon" href="{Favicon}" />
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  39.  
  40. <!-- STYLESHEETS -->
  41. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- FONTAWESOME ICONS -->
  42. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" /> <!-- GOOGLE FONT -->
  43.  
  44. <style type="text/css">
  45.  
  46. /*--------------------------------------------------------------*/
  47. /* BASIC -------------------------------------------------------*/
  48. /*--------------------------------------------------------------*/
  49.  
  50. html, body {
  51. font-family: 'Open Sans', sans-serif;
  52. letter-spacing: 0.5px;
  53. background-image: url('http://static.tumblr.com/a0dmjhi/9dQnnpz7c/tiny_grid.png');
  54. margin: 0;
  55. padding: 0;
  56. }
  57.  
  58. /* HYPERLINKS */
  59. a, a:hover, a:active {
  60. text-decoration: none;
  61. -webkit-transition: all 0.3s ease-in-out;
  62. -moz-transition: all 0.3s ease-in-out;
  63. -o-transition: all 0.3s ease-in-out;
  64. -ms-transition: all 0.3s ease-in-out;
  65. transition: all 0.3s ease-in-out;
  66. }
  67.  
  68. /* HEADINGS BASIC */
  69. h1, h2, h3, h4, h5, h6 {
  70. margin: 0;
  71. line-height: 100%;
  72. }
  73.  
  74. /* LIST BASIC */
  75. ul, ol, menu, dir {
  76. margin: 0;
  77. padding: 0;
  78. list-style-type: none;
  79. -webkit-margin-before: 0;
  80. -webkit-margin-after : 0;
  81. -webkit-margin-start : 0;
  82. -webkit-margin-end : 0;
  83. -webkit-padding-start: 0;
  84. }
  85.  
  86. /* TOOL TIP */
  87. #s-m-t-tooltip{
  88. position: absolute;
  89. z-index: 9999;
  90. display: block;
  91. max-width: 150px;
  92. margin-top: 5px;
  93. margin-left: 10px;
  94. padding: 8px;
  95. background: #222;
  96. font-size: 9px;
  97. color: #eee;
  98. letter-spacing: 1px;
  99. }
  100.  
  101. /* SCROLL BAR */
  102. ::-webkit-scrollbar-thumb {
  103. height: 9px;
  104. background-color: #222;
  105. }
  106. ::-webkit-scrollbar {
  107. width: 9px;
  108. height: 4px;
  109. background-color: #eee;
  110. }
  111.  
  112. /* SELECTION */
  113. ::-moz-selection {
  114. color: #fff;
  115. background-color: #222;
  116. }
  117. ::selection {
  118. color: #fff;
  119. background-color: #222;
  120. }
  121.  
  122. /* CONTAINER */
  123. .container {
  124. width: 900px;
  125. margin: auto;
  126. }
  127.  
  128. /*--------------------------------------------------------------*/
  129. /* HEADER ------------------------------------------------------*/
  130. /*--------------------------------------------------------------*/
  131.  
  132. /* header basic */
  133. #header {
  134. width: 100%;
  135. padding: 50px 0;
  136. background-color: #222;
  137. }
  138. #header .container {
  139. display: flex;
  140. justify-content: space-between;
  141. align-items: center;
  142. }
  143. #header ul {
  144. list-style-type: none;
  145. }
  146.  
  147. /* headline */
  148. #header h1 {
  149. font-size: 48px;
  150. color: #fff;
  151. font-weight: 700;
  152. letter-spacing: -2px;
  153. }
  154. #header h1:first-letter {
  155. color: #00ced1;
  156. }
  157. #header h2 {
  158. font-size: 8px;
  159. color: #fff;
  160. font-weight: 300;
  161. text-transform: uppercase;
  162. letter-spacing: 3px;
  163. }
  164. #header h2 span {
  165. color: #00ced1;
  166. }
  167.  
  168. /* links */
  169. #header .links {
  170. line-height: 120%;
  171. text-align: center;
  172. display: flex;
  173. }
  174. #header .links > li + li {
  175. margin-left: 7px;
  176. }
  177. #header .links a {
  178. display: block;
  179. border-radius: 50%;
  180. width: 35px;
  181. height: 35px;
  182. line-height: 35px;
  183. background-color: #fff;
  184. font-size: 16px;
  185. color: #222;
  186. }
  187. #header .links .fa-home {
  188. font-size: 20px;
  189. }
  190. #header .links a:hover {
  191. background-color: #00ced1;
  192. }
  193.  
  194. /*--------------------------------------------------------------*/
  195. /* MAIN --------------------------------------------------------*/
  196. /*--------------------------------------------------------------*/
  197.  
  198. #main {
  199. margin-top: 50px;
  200. overflow: hidden;
  201. }
  202.  
  203. /* SIDEBAR */
  204. .sidebar {
  205. width: 170px;
  206. float: left;
  207. }
  208. .sidebar .tags {
  209. padding: 10px;
  210. background: #fff;
  211. border: 1px solid #eee;
  212. margin-bottom: 20px;
  213. }
  214. .sidebar .tags h3 {
  215. background: #222;
  216. padding: 10px;
  217. color: #fff;
  218. text-align: left;
  219. font-size: 10px;
  220. font-weight: 400;
  221. text-transform: uppercase;
  222. letter-spacing: 3px;
  223. margin-bottom: 5px;
  224. }
  225. .sidebar .tags h3:first-letter{
  226. color: #00ced1;
  227. font-weight: 700;
  228. }
  229. .sidebar .tags ul {
  230. list-style-type: none;
  231. }
  232. .sidebar .tags ul > li + li {
  233. border-top: 1px solid #eee;
  234. }
  235. .sidebar .tags button {
  236. display: block;
  237. width: 150px;
  238. padding: 10px 0 10px 10px;
  239. text-align: left;
  240. font-size: 8px;
  241. letter-spacing: 1.5px;
  242. text-transform: uppercase;
  243. color: #222;
  244. outline: none;
  245. border: none;
  246. background: transparent;
  247. cursor: pointer;
  248. -webkit-transition: all 0.3s ease-in-out;
  249. -moz-transition: all 0.3s ease-in-out;
  250. -o-transition: all 0.3s ease-in-out;
  251. -ms-transition: all 0.3s ease-in-out;
  252. transition: all 0.3s ease-in-out;
  253. }
  254. .sidebar .tags button:before {
  255. font-family: 'FontAwesome';
  256. content: '\f02b';
  257. padding-right: 10px;
  258. }
  259. .sidebar .tags button:hover,
  260. .sidebar .tags button.is-checked {
  261. color: #fff;
  262. background-color: #00ced1;
  263. }
  264.  
  265. /* LIST */
  266. .list {
  267. float: right;
  268. width: 670px;
  269. margin-bottom: 30px;
  270. }
  271. .list .category {
  272. position: relative;
  273. width: 128px;
  274. padding: 15px;
  275. margin-bottom: 10px;
  276. background-color: #fff;
  277. color: #222;
  278. border: 1px solid #eee;
  279. float: left;
  280. }
  281. .list .category .title {
  282. font-size: 11px;
  283. font-weight: 600;
  284. }
  285. .list .category .title a {
  286. color: #222;
  287. }
  288. .list .category .title a:hover {
  289. color: #00ced1;
  290. }
  291. .list .category .author {
  292. display: block;
  293. font-size: 8px;
  294. font-style: italic;
  295. letter-spacing: 1px;
  296. font-weight: 400;
  297. margin: 3px 0 0;
  298. color: #00ced1;
  299. }
  300. .list .category .author:before{
  301. content:'by ';
  302. }
  303. .list .category .desc {
  304. display: block;
  305. font-size: 7px;
  306. letter-spacing: 1px;
  307. font-weight: 300;
  308. margin: 2px 0 0;
  309. color: #aaa;
  310. text-transform: uppercase;
  311. }
  312. .list .category ul {
  313. list-style-type: none;
  314. margin-top: 10px;
  315. font-size: 8px;
  316. font-weight: 400;
  317. color: #aaa;
  318. }
  319. .list .category ul > li + li {
  320. margin-top: 5px;
  321. }
  322. .list .category ul > li:before {
  323. color: #00ced1;
  324. text-transform: uppercase;
  325. letter-spacing: 1px;
  326. }
  327. .category .words{
  328. line-height: 100%;
  329. }
  330. .category .words:before{
  331. content: 'words: ';
  332. }
  333. .category .summary:before{
  334. content:'summary: ';
  335. }
  336. </style>
  337.  
  338. </head>
  339. <body>
  340. <header id="header">
  341. <nav class="container">
  342. <ul class="headline">
  343. <li><h1>fic recs</h1></li>
  344. <li><h2>list by <span>{name}</span></h2></li><!-- This will automatically generate your username, no need to edit unless you want to customize it -->
  345. </ul>
  346. <ul class="links">
  347. <li><a href="/" class="fa fa-home" title="home"></a></li>
  348. <li><a href="/ask" class="fa fa-envelope" title="mail"></a></li>
  349. <li><a href="https://archiveofourown.org/users/username/bookmarks" class="fa fa-heart" title="bookmark"></a></li>
  350. <!-- !!! DO NO REMOVE THE CREDIT !!! -->
  351. <li><a href="http://roxiestheme.tumblr.com" target="_blank" class="fa fa-copyright" title="credit"></a></li>
  352. </ul>
  353. </nav>
  354. </header>
  355. <main id="main" class="container">
  356. <div class="sidebar filters">
  357. <!-- start of a group -->
  358. <div class="tags button-group" data-filter-group="overview">
  359. <h3>Overview</h3>
  360. <ul>
  361. <li><button class="button is-checked" data-filter="">show all</button></li>
  362. <li><button class="button" data-filter=".fave">favorite</button></li>
  363. </ul>
  364. </div>
  365. <!-- end of a group -->
  366. <!-- start of a group -->
  367. <div class="tags button-group" data-filter-group="pairings">
  368. <h3>Pairings</h3>
  369. <ul>
  370. <li><button class="button is-checked" data-filter="">show all</button></li>
  371. <li><button class="button" data-filter=".1">Pairing 1</button></li>
  372. <li><button class="button" data-filter=".2">Pairing 2</button></li>
  373. <li><button class="button" data-filter=".3">Pairing 3</button></li>
  374. </ul>
  375. </div>
  376. <!-- end of a group -->
  377. <!-- start of a group -->
  378. <div class="tags button-group" data-filter-group="ratings">
  379. <h3>Ratings</h3>
  380. <ul>
  381. <li><button class="button is-checked" data-filter="">show all</button></li>
  382. <li><button class="button" data-filter=".explicit">explicit</button></li>
  383. <li><button class="button" data-filter=".mature">mature</button></li>
  384. <li><button class="button" data-filter=".tau">teen and up</button></li>
  385. <li><button class="button" data-filter=".general">general</button></li>
  386. </ul>
  387. </div>
  388. <!-- end of a group -->
  389. </div><!-- sidebar -->
  390. <div class="list">
  391. <!-- start of a category -->
  392. <div class="category 1 fave explicit">
  393. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  394. <span class="author">username</span>
  395. <span class="desc">pairing / rating</span>
  396. <ul>
  397. <li class="words">30,000</li>
  398. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nist, vehicula et, mauris.</li>
  399. </ul>
  400. </div>
  401. <!-- end of a category -->
  402. <!-- start of a category -->
  403. <div class="category 2 explicit">
  404. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  405. <span class="author">username</span>
  406. <span class="desc">pairing / rating</span>
  407. <ul>
  408. <li class="words">30,000</li>
  409. <li class="summary">Lorem adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  410. </ul>
  411. </div>
  412. <!-- end of a category -->
  413. <!-- start of a category -->
  414. <div class="category 2 fave mature">
  415. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  416. <span class="author">username</span>
  417. <span class="desc">pairing / rating</span>
  418. <ul>
  419. <li class="words">30,000</li>
  420. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, vehicula et, mauris.</li>
  421. </ul>
  422. </div>
  423. <!-- end of a category -->
  424. <!-- start of a category -->
  425. <div class="category 3 tau">
  426. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  427. <span class="author">username</span>
  428. <span class="desc">pairing / rating</span>
  429. <ul>
  430. <li class="words">30,000</li>
  431. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  432. </ul>
  433. </div>
  434. <!-- end of a category -->
  435. <!-- start of a category -->
  436. <div class="category 2 general">
  437. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  438. <span class="author">username</span>
  439. <span class="desc">pairing / rating</span>
  440. <ul>
  441. <li class="words">30,000</li>
  442. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvat, vehicula et, mauris.</li>
  443. </ul>
  444. </div>
  445. <!-- end of a category -->
  446. <!-- start of a category -->
  447. <div class="category 3 fave mature">
  448. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  449. <span class="author">username</span>
  450. <span class="desc">pairing / rating</span>
  451. <ul>
  452. <li class="words">30,000</li>
  453. <li class="summary">Lorem ipsum dolor er adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  454. </ul>
  455. </div>
  456. <!-- end of a category -->
  457. <!-- start of a category -->
  458. <div class="category 1 tau">
  459. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  460. <span class="author">username</span>
  461. <span class="desc">pairing / rating</span>
  462. <ul>
  463. <li class="words">30,000</li>
  464. <li class="summary">Lorem amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  465. </ul>
  466. </div>
  467. <!-- end of a category -->
  468. <!-- start of a category -->
  469. <div class="category 1 explicit">
  470. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  471. <span class="author">username</span>
  472. <span class="desc">pairing / rating</span>
  473. <ul>
  474. <li class="words">30,000</li>
  475. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinart, vehicula et, mauris.</li>
  476. </ul>
  477. </div>
  478. <!-- end of a category -->
  479. <!-- start of a category -->
  480. <div class="category 3 fave mature">
  481. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  482. <span class="author">username</span>
  483. <span class="desc">pairing / rating</span>
  484. <ul>
  485. <li class="words">30,000</li>
  486. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulo feugiat, vehicula et, mauris.</li>
  487. </ul>
  488. </div>
  489. <!-- end of a category -->
  490. <!-- start of a category -->
  491. <div class="category 2 general">
  492. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  493. <span class="author">username</span>
  494. <span class="desc">pairing / rating</span>
  495. <ul>
  496. <li class="words">30,000</li>
  497. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  498. </ul>
  499. </div>
  500. <!-- end of a category -->
  501. <!-- start of a category -->
  502. <div class="category 3 fave explicit">
  503. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  504. <span class="author">username</span>
  505. <span class="desc">pairing / rating</span>
  506. <ul>
  507. <li class="words">30,000</li>
  508. <li class="summary">Lorem ipsum dolor sit ame at, vehicula et, mauris.</li>
  509. </ul>
  510. </div>
  511. <!-- end of a category -->
  512. <!-- start of a category -->
  513. <div class="category 2 general">
  514. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  515. <span class="author">username</span>
  516. <span class="desc">pairing / rating</span>
  517. <ul>
  518. <li class="words">30,000</li>
  519. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  520. </ul>
  521. </div>
  522. <!-- end of a category -->
  523. <!-- start of a category -->
  524. <div class="category 1 fave explicit">
  525. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  526. <span class="author">username</span>
  527. <span class="desc">pairing / rating</span>
  528. <ul>
  529. <li class="words">30,000</li>
  530. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nist, vehicula et, mauris.</li>
  531. </ul>
  532. </div>
  533. <!-- end of a category -->
  534. <!-- start of a category -->
  535. <div class="category 2 explicit">
  536. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  537. <span class="author">username</span>
  538. <span class="desc">pairing / rating</span>
  539. <ul>
  540. <li class="words">30,000</li>
  541. <li class="summary">Lorem adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  542. </ul>
  543. </div>
  544. <!-- end of a category -->
  545. <!-- start of a category -->
  546. <div class="category 2 fave mature">
  547. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  548. <span class="author">username</span>
  549. <span class="desc">pairing / rating</span>
  550. <ul>
  551. <li class="words">30,000</li>
  552. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, vehicula et, mauris.</li>
  553. </ul>
  554. </div>
  555. <!-- end of a category -->
  556. <!-- start of a category -->
  557. <div class="category 3 tau">
  558. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  559. <span class="author">username</span>
  560. <span class="desc">pairing / rating</span>
  561. <ul>
  562. <li class="words">30,000</li>
  563. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  564. </ul>
  565. </div>
  566. <!-- end of a category -->
  567. <!-- start of a category -->
  568. <div class="category 2 general">
  569. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  570. <span class="author">username</span>
  571. <span class="desc">pairing / rating</span>
  572. <ul>
  573. <li class="words">30,000</li>
  574. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvat, vehicula et, mauris.</li>
  575. </ul>
  576. </div>
  577. <!-- end of a category -->
  578. <!-- start of a category -->
  579. <div class="category 3 fave mature">
  580. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  581. <span class="author">username</span>
  582. <span class="desc">pairing / rating</span>
  583. <ul>
  584. <li class="words">30,000</li>
  585. <li class="summary">Lorem ipsum dolor er adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  586. </ul>
  587. </div>
  588. <!-- end of a category -->
  589. <!-- start of a category -->
  590. <div class="category 1 tau">
  591. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  592. <span class="author">username</span>
  593. <span class="desc">pairing / rating</span>
  594. <ul>
  595. <li class="words">30,000</li>
  596. <li class="summary">Lorem amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  597. </ul>
  598. </div>
  599. <!-- end of a category -->
  600. <!-- start of a category -->
  601. <div class="category 1 explicit">
  602. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  603. <span class="author">username</span>
  604. <span class="desc">pairing / rating</span>
  605. <ul>
  606. <li class="words">30,000</li>
  607. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinart, vehicula et, mauris.</li>
  608. </ul>
  609. </div>
  610. <!-- end of a category -->
  611. <!-- start of a category -->
  612. <div class="category 3 fave mature">
  613. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  614. <span class="author">username</span>
  615. <span class="desc">pairing / rating</span>
  616. <ul>
  617. <li class="words">30,000</li>
  618. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulo feugiat, vehicula et, mauris.</li>
  619. </ul>
  620. </div>
  621. <!-- end of a category -->
  622. <!-- start of a category -->
  623. <div class="category 2 general">
  624. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  625. <span class="author">username</span>
  626. <span class="desc">pairing / rating</span>
  627. <ul>
  628. <li class="words">30,000</li>
  629. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  630. </ul>
  631. </div>
  632. <!-- end of a category -->
  633. <!-- start of a category -->
  634. <div class="category 3 fave explicit">
  635. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  636. <span class="author">username</span>
  637. <span class="desc">pairing / rating</span>
  638. <ul>
  639. <li class="words">30,000</li>
  640. <li class="summary">Lorem ipsum dolor sit ame at, vehicula et, mauris.</li>
  641. </ul>
  642. </div>
  643. <!-- end of a category -->
  644. <!-- start of a category -->
  645. <div class="category 2 general">
  646. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  647. <span class="author">username</span>
  648. <span class="desc">pairing / rating</span>
  649. <ul>
  650. <li class="words">30,000</li>
  651. <li class="summary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</li>
  652. </ul>
  653. </div>
  654. <!-- end of a category -->
  655. </div><!-- list-->
  656.  
  657. </main>
  658. <!-- SCRIPTS -->
  659. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><!-- JQUERY -->
  660. <script src="https://static.tumblr.com/ickcbh2/sFepe3zg2/isotope.pkgd.min.js"></script><!-- ISOTOPE BY METAFIZZY -->
  661. <script src="https://static.tumblr.com/a0dmjhi/hpUpe5tj0/jquery.style-my-tooltips.min.js"></script><!-- STYLE-MY-TOOLTOPS BY MALIHU -->
  662. <script type="text/javascript">
  663. (function($) {
  664. $(window).on('load', function() {
  665. // init Isotope
  666. var $grid = $('.list').isotope({
  667. itemSelector: '.category',
  668. masonry: {
  669. columnWidth: 160,
  670. gutter: 10
  671. }
  672. });
  673. // store filter for each group
  674. var filters = {};
  675.  
  676. $('.filters').on('click', '.button', function(event) {
  677. var $button = $( event.currentTarget );
  678. // get group key
  679. var $buttonGroup = $button.parents('.button-group');
  680. var filterGroup = $buttonGroup.attr('data-filter-group');
  681. // set filter for group
  682. filters[ filterGroup ] = $button.attr('data-filter');
  683. // combine filters
  684. var filterValue = concatValues( filters );
  685. // set filter for Isotope
  686. $grid.isotope({ filter: filterValue });
  687. });
  688.  
  689. // change is-checked class on buttons
  690. $('.button-group').each(function(i, buttonGroup) {
  691. var $buttonGroup = $(buttonGroup);
  692. $buttonGroup.on('click', 'button', function(event) {
  693. $buttonGroup.find('.is-checked').removeClass('is-checked');
  694. var $button = $(event.currentTarget);
  695. $button.addClass('is-checked');
  696. });
  697. });
  698.  
  699. // flatten object by concatting values
  700. function concatValues( obj ) {
  701. var value = '';
  702. for ( var prop in obj ) {
  703. value += obj[ prop ];
  704. }
  705. return value;
  706. }
  707. });
  708. // tooltips
  709. $(document).ready(function(){
  710. $("[title]").style_my_tooltips({
  711. tip_follows_cursor: true,
  712. tip_delay_time: 200,
  713. tip_fade_speed: 300
  714. });
  715. });
  716. }(jQuery));
  717. </script>
  718. </body>
  719. </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!