API tools faq
paste
alydae

media i

alydae
Apr 28th, 2017 (edited)
11,989
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. MEDIA I
  7. by alydae
  8.  
  9. released: april 28, 2017
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>bookshelf</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  42. <script>
  43. $(window).load(function () {
  44. $('#content').masonry({
  45. itemSelector : ".media",
  46. horizontalOrder: true
  47. });
  48. });
  49. </script>
  50.  
  51. <!-- custom font -->
  52.  
  53. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic|Karla:300,400,600,400italic' rel='stylesheet' type='text/css'>
  54.  
  55. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  56. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  57.  
  58.  
  59. <style type="text/css">
  60.  
  61. @keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-moz-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-webkit-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. @-ms-keyframes fadein {
  77. from { opacity:0; }
  78. to { opacity:1; }
  79. }
  80.  
  81. @-o-keyframes fadein {
  82. from { opacity:0; }
  83. to { opacity:1; }
  84. }
  85.  
  86. /*-- selection --*/
  87.  
  88. ::-moz-selection { background:var(--accent); color:var(--title); }
  89. ::selection { background:var(--accent); color:var(--title); }
  90.  
  91. /*-- scrollbar --*/
  92.  
  93. ::-webkit-scrollbar {
  94. width:1px;
  95. height:2px;
  96. }
  97.  
  98. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  99.  
  100. /*-- tooltips --*/
  101.  
  102. #s-m-t-tooltip {
  103. color:var(--text);
  104. background-color:var(--accent);
  105. font-size:calc(var(--font-size) - 2px);
  106. font-family:'Open Sans', helvetica, sans-serif;
  107. letter-spacing:1px;
  108. text-transform:uppercase;
  109. text-align:center;
  110. position:absolute;
  111. padding:0px 5px 0px 5px;
  112. margin-top:30px;
  113. border:1px solid var(--borders);
  114. z-index:9999;
  115. }
  116.  
  117. /*-- tumblr controls --*/
  118.  
  119. .tmblr-iframe, .iframe-controls–desktop {
  120. display:none!important;
  121. }
  122.  
  123. /*-- change all variables here --*/
  124.  
  125. :root {
  126. --background:#fff;
  127. --accent:#fafafa;
  128. --text:#666;
  129. --links:#444;
  130. --links-hover:#bad1e7;
  131. --title:#222;
  132. --borders:#eee;
  133. --font-size:10px;
  134. }
  135.  
  136. /*-- general customisation --*/
  137.  
  138. body {
  139. color:var(--text);
  140. background-color:var(--background);
  141. font-style:normal;
  142. font-family:'Open Sans', helvetica, sans-serif;
  143. font-size:var(--font-size);
  144. font-weight:400;
  145. text-decoration:none;
  146. line-height:180%;
  147. -moz-osx-font-smoothing: grayscale;
  148. -webkit-font-smoothing: antialiased;
  149. font-smoothing: antialiased;
  150. -webkit-animation: fadein 1.5s;
  151. -moz-animation: fadein 1.5s;
  152. -o-animation: fadein 1.5s;
  153. animation: fadein 1.5s;
  154. }
  155.  
  156. a {
  157. text-decoration:none;
  158. color:var(--links);
  159. transition-duration: 0.6s;
  160. -moz-transition-duration: 0.6s;
  161. -webkit-transition-duration: 0.6s;
  162. -o-transition-duration: 0.6s
  163. }
  164.  
  165. a:hover {
  166. color:var(--links-hover);
  167. cursor:pointer;
  168. transition-duration: 0.6s;
  169. -moz-transition-duration: 0.6s;
  170. -webkit-transition-duration: 0.6s;
  171. -o-transition-duration: 0.6s
  172. }
  173.  
  174. b, strong { font-weight:700; color:var(--title); }
  175. i, em { font-style:italic; }
  176.  
  177. h1, h2, h3 {
  178. margin:0;
  179. font-size:10px;
  180. line-height:150%;
  181. }
  182.  
  183. /*-- header --*/
  184.  
  185. #header {
  186. position:fixed;
  187. margin:0;
  188. top:0;
  189. left:0;
  190. z-index:9999;
  191. }
  192.  
  193. .info {
  194. margin:0;
  195. top:0;
  196. left:0;
  197. width:100vw;
  198. height:50px;
  199. padding:15px;
  200. background:var(--background);
  201. }
  202.  
  203. .info img {
  204. position:relative;
  205. height:50px;
  206. width:50px;
  207. border-radius:50%;
  208. }
  209.  
  210. .t {
  211. position:relative;
  212. margin:-50px 70px;
  213. text-transform:uppercase;
  214. font-size:calc(var(--font-size) + 4px);
  215. font-weight:700;
  216. letter-spacing:1px;
  217. color:var(--title);
  218. }
  219.  
  220. .l { position:absolute; margin:55px 70px; }
  221. .l a { margin-right:10px; }
  222. .l i { margin-right:5px; }
  223.  
  224. .d {
  225. position:relative;
  226. float:right;
  227. text-align:right;
  228. top:12px;
  229. right:15px;
  230. margin:15px;
  231. width:400px;
  232. line-height:160%;
  233. max-height:50px;
  234. overflow:auto;
  235. padding-right:10px;
  236. padding-bottom:0px;
  237. }
  238.  
  239. /*--filters--*/
  240.  
  241. #sort {
  242. position:relative;
  243. width:100vw;
  244. top:0;
  245. left:0;
  246. padding-top:10px;
  247. padding-bottom:10px;
  248. text-align:center;
  249. background:var(--accent);
  250. border:1px solid var(--borders);
  251. }
  252.  
  253. #sort ul {
  254. display:block;
  255. list-style:none;
  256. padding-left:0px;
  257. margin-top:0;
  258. margin-bottom:0;
  259. }
  260.  
  261. #sort a {
  262. display:inline;
  263. margin-right:10px;
  264. }
  265.  
  266. #sort li { display:inline; list-style:none; }
  267. #sort li a.selected { font-weight:600; color:var(--title); }
  268. #sort li:before { content:'#'; margin-right:2px; }
  269.  
  270. /*-- media --*/
  271.  
  272. #content {
  273. height:100%;
  274. position:relative;
  275. margin:200px auto 100px auto;
  276. width:calc((133px + 30px + 2px) * 6);
  277. /* ((media width + 2*margin + 2*border) * number of columns) */
  278. }
  279.  
  280. .media {
  281. margin:15px;
  282. height:auto;
  283. width:133px;
  284. float:left;
  285. background-color:var(--accent);
  286. border:1px solid var(--borders);
  287. }
  288.  
  289. .media img {
  290. width:133px;
  291. height:200px;
  292. margin-bottom:-5px;
  293. object-fit:cover;
  294. }
  295.  
  296. .media h1 {
  297. padding:10px 10px 5px;
  298. text-transform:uppercase;
  299. text-align:left;
  300. font-weight:600;
  301. font-size:calc(var(--font-size) + 0.5px);
  302. color:var(--title);
  303. }
  304.  
  305. .media h2 {
  306. width:calc((133px/2) - 10px);
  307. padding-left:10px;
  308. padding-bottom:10px;
  309. text-transform:lowercase;
  310. text-align:left;
  311. font-weight:400;
  312. font-style:italic;
  313. color:var(--title);
  314. }
  315.  
  316. .media h3 {
  317. width:calc((133px/2) - 10px);
  318. float:right;
  319. margin-top:-25px;
  320. padding-right:10px;
  321. text-align:right;
  322. font-weight:400;
  323. }
  324.  
  325. .overlay {
  326. position:absolute;
  327. top:0;
  328. left:0;
  329. width:133px;
  330. height:200px;
  331. opacity:0;
  332. background:rgba(255,255,255,0.95);
  333. z-index:99;
  334. overflow-y:scroll;
  335. overflow-x:hidden;
  336. transition:0.6s ease;
  337. -o-transition:0.6s ease;
  338. -moz-transition:0.6s ease;
  339. -webkit-transition:0.6s ease;
  340. }
  341.  
  342. .media:hover .overlay { opacity:1; }
  343.  
  344. .desc {
  345. position:relative;
  346. top:0;
  347. left:0;
  348. width:113px;
  349. max-height:180px;
  350. margin:5px;
  351. padding:5px;
  352. overflow-y:scroll;
  353. overflow-x:hidden;
  354. }
  355.  
  356. /*-- credit - DO NOT TOUCH --*/
  357.  
  358. .credit a {
  359. font-size:10px;
  360. bottom:15px;
  361. right:20px;
  362. position:fixed;
  363. text-transform:uppercase;
  364. }
  365.  
  366. </style>
  367. </head>
  368.  
  369.  
  370. <body>
  371.  
  372. <div id="header">
  373.  
  374. <div class="info">
  375. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  376. <img src="{PortraitURL-128}"/>
  377. <div class="t">bookshelf</div><!-- title -->
  378. <div class="l">
  379. <!-- these are your header links. feel free to add more. to change the icon, go to https://fontawesome.com/icons. -->
  380. <a href="/"><i class="fas fa-home"></i>index</a>
  381. <a href="/ask"><i class="fas fa-envelope"></i>message</a>
  382. <a href="/"><i class="fas fa-heart"></i>link</a>
  383. <a href="/"><i class="fas fa-bars"></i>link</a>
  384. </div>
  385. <!-- delete this section if you don't want a description -->
  386. <div class="d">
  387. this page can be used for books, movies, tv shows, fic recs etc.
  388. <br>you can filter by anything you like!
  389. <br>there are instructions to delete this description, which will automatically scroll, if you don't want it.
  390. </div>
  391. <!-- up to here! -->
  392. </div>
  393.  
  394. <!-- HOW TO CUSTOMISE THE FILTERS
  395.  
  396. template for new filter groups:
  397. <ul class="filter option-set" data-filter-group="group1">
  398. <b>category:</b>&nbsp;&nbsp;&nbsp;
  399. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  400. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  401. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  402. </ul>
  403.  
  404. template for new filters:
  405. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  406.  
  407. in order to make your filters match your books/tv shows/fic/whatever, you only need to change the '.filter' and 'filter name' part. the 'category' line is optional.
  408. for example, if I wanted to make my media filter by favourites only, my code would look like this
  409. <li><a href="#" data-filter-value=".fave">favourites</a></li>
  410. note the areas where it's been changed.
  411.  
  412. it is essential that you do not change any other part, including the 'exclusive' in the first filter group, as well as the first filter in every group.
  413. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  414.  
  415. -->
  416.  
  417. <div id="sort">
  418. <ul class="filter option-set exclusive" data-filter-group="group1">
  419. <b>category:</b>&nbsp;&nbsp;&nbsp;
  420. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  421. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  422. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  423. </ul>
  424. <ul class="filter option-set" data-filter-group="group2">
  425. <b>category:</b>&nbsp;&nbsp;&nbsp;
  426. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  427. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  428. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  429. </ul>
  430. </div>
  431.  
  432. </div><!-- end header -->
  433.  
  434.  
  435. <div id="content" class="clearfix">
  436.  
  437. <!-- HOW TO ADD FILTERS TO EACH BOX
  438.  
  439. template:
  440. <div class="media">
  441. <img src=""/>
  442. <h1>title</h1>
  443. <h2>author</h2>
  444. <h3><a href="">link</a></h3>
  445. <div class="overlay">
  446. <div class="desc">desc</div>
  447. </div>
  448. </div>
  449.  
  450. to add the filters, add the same name that you used above in the '.filter' but without the dot in front. you can add as many as you want but the 'media' in the beginning MUST stay there.
  451.  
  452. for example, if you wanted to have the filters 'fave' and 'new' together for one box, the filters should look like this
  453. <div class="media fave new">
  454. note how media is still there in front.
  455.  
  456. if you do not want the text on hover, just delete these lines from the book/tv show/fic/whatever in question.
  457. <div class="overlay">
  458. <div class="desc">desc</div>
  459. </div>
  460.  
  461. if you do not want an image and overlay, delete these lines from the book/tv/show/fic/whatever in question
  462. <img src=""/>
  463. <div class="overlay">
  464. <div class="desc">desc</div>
  465. </div>
  466.  
  467. -->
  468.  
  469.  
  470. <div class="media">
  471. <img src=""/>
  472. <h1>title</h1>
  473. <h2>author</h2>
  474. <h3><a href="">link</a></h3>
  475. <div class="overlay">
  476. <div class="desc">desc</div>
  477. </div>
  478. </div>
  479.  
  480.  
  481. <div class="media">
  482. <img src=""/>
  483. <h1>title</h1>
  484. <h2>author</h2>
  485. <h3><a href="">link</a></h3>
  486. <div class="overlay">
  487. <div class="desc">desc</div>
  488. </div>
  489. </div>
  490.  
  491.  
  492. <div class="media">
  493. <img src=""/>
  494. <h1>title</h1>
  495. <h2>author</h2>
  496. <h3><a href="">link</a></h3>
  497. <div class="overlay">
  498. <div class="desc">desc</div>
  499. </div>
  500. </div>
  501.  
  502.  
  503. <div class="media">
  504. <img src=""/>
  505. <h1>title</h1>
  506. <h2>author</h2>
  507. <h3><a href="">link</a></h3>
  508. <div class="overlay">
  509. <div class="desc">desc</div>
  510. </div>
  511. </div>
  512.  
  513.  
  514. <div class="media">
  515. <img src=""/>
  516. <h1>title</h1>
  517. <h2>author</h2>
  518. <h3><a href="">link</a></h3>
  519. <div class="overlay">
  520. <div class="desc">desc</div>
  521. </div>
  522. </div>
  523.  
  524.  
  525. <div class="media">
  526. <img src=""/>
  527. <h1>title</h1>
  528. <h2>author</h2>
  529. <h3><a href="">link</a></h3>
  530. <div class="overlay">
  531. <div class="desc">desc</div>
  532. </div>
  533. </div>
  534.  
  535. </div><!-- end content -->
  536.  
  537.  
  538. <!-- credit - DO NOT TOUCH -->
  539.  
  540. <div class="credit">
  541. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  542. </div>
  543.  
  544.  
  545. </body>
  546.  
  547. <!-- scripts - DO NOT TOUCH -->
  548.  
  549. <!-- combination filters by @magnusthemes -->
  550. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  551. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  552.  
  553. <script>
  554. $(document).ready(function() {
  555. var $container = $("#content");
  556. var filters = {};
  557. var $grid = $container.isotope({
  558. itemSelector: ".media",
  559. percentPosition: false,
  560. masonry: {
  561. horizontalOrder: true
  562. }
  563. });
  564.  
  565. $(".option-set a").click(function(e) {
  566. var $this = $(this); // cache the clicked link
  567. var filterAttr = "data-filter-value";
  568. var filterValue = $this.attr(filterAttr); // cache the filter
  569. var $optionSet = $this.parents(".option-set"); // cache the parent element
  570. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  571. var filterGroup = filters[group];
  572. if (!filterGroup) {
  573. filterGroup = filters[group] = [];
  574. }
  575. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  576. var activeClass = "selected", // the class for active links
  577. exclClass = "exclusive"; // the class for exclusive groups
  578. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  579. var comboFilter = getComboFilter(filters);
  580. $grid.isotope({
  581. filter: comboFilter
  582. });
  583. $this.toggleClass(activeClass);
  584. e.preventDefault();
  585. });
  586. });
  587. </script>
  588. <!-- end filter scripts -->
  589.  
  590. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!