API tools faq
paste
Advertisement
alydae

media ii

alydae
Feb 22nd, 2020 (edited)
4,705
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.10 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. MEDIA II
  7. by alydae
  8.  
  9. released: february 23, 2020
  10. last updated: september 10, 2023
  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. carousel script: https://kenwheeler.github.io/slick/
  17.  
  18. thank you for using!!!
  19.  
  20. -->
  21.  
  22. <title>headers</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <!-- scripts - DO NOT TOUCH -->
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  28.  
  29. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:200,
  36. tip_fade_speed:300
  37. }
  38. );
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
  44. <script>
  45. $(window).load(function () {
  46. $('#main').masonry({
  47. itemSelector : ".media",
  48. horizontalOrder: true
  49. });
  50. });
  51. </script>
  52.  
  53. <!-- custom font -->
  54.  
  55. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  56.  
  57. <script src="https://kit.fontawesome.com/4fe045a39a.js" crossorigin="anonymous"></script>
  58. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  59.  
  60. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  61. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
  62.  
  63.  
  64. <style type="text/css">
  65.  
  66. @keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-moz-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. @-webkit-keyframes fadein {
  77. from { opacity:0; }
  78. to { opacity:1; }
  79. }
  80.  
  81. @-ms-keyframes fadein {
  82. from { opacity:0; }
  83. to { opacity:1; }
  84. }
  85.  
  86. @-o-keyframes fadein {
  87. from { opacity:0; }
  88. to { opacity:1; }
  89. }
  90.  
  91. /*-- selection --*/
  92.  
  93. ::-moz-selection { background:var(--accent); color:var(--title); }
  94. ::selection { background:var(--accent); color:var(--title); }
  95.  
  96. /*-- scrollbar --*/
  97.  
  98. ::-webkit-scrollbar {
  99. width:1px;
  100. height:2px;
  101. }
  102.  
  103. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  104.  
  105. /*-- tooltips --*/
  106.  
  107. #s-m-t-tooltip {
  108. color:var(--text);
  109. background-color:var(--accent);
  110. font-size:calc(var(--font-size) - 2px);
  111. font-family:'Open Sans', helvetica, sans-serif;
  112. letter-spacing:1px;
  113. text-transform:uppercase;
  114. text-align:center;
  115. position:absolute;
  116. padding:0px 5px 0px 5px;
  117. margin-top:30px;
  118. border:1px solid var(--borders);
  119. z-index:9999;
  120. }
  121.  
  122. /*-- tumblr controls --*/
  123.  
  124. .tmblr-iframe, .iframe-controls–desktop {
  125. display:none!important;
  126. }
  127.  
  128. /*-- common --*/
  129.  
  130. a, a:hover, .more, .media:hover .more {
  131. transition-duration: 0.6s;
  132. -moz-transition-duration: 0.6s;
  133. -webkit-transition-duration: 0.6s;
  134. -o-transition-duration: 0.6s;
  135. }
  136.  
  137. /*-- change all variables here --*/
  138.  
  139. :root {
  140. --background:#fff;
  141. --accent:#fafafa;
  142. --text:#666;
  143. --links:#444;
  144. --links-hover:#bad1e7;
  145. --title:#222;
  146. --borders:#eee;
  147. --font-size:10px;
  148. }
  149.  
  150. /*-- general customisation --*/
  151.  
  152. body {
  153. color:var(--text);
  154. background:var(--background);
  155. font-style:normal;
  156. font-family:'Open Sans', helvetica, sans-serif;
  157. font-size:var(--font-size);
  158. font-weight:400;
  159. text-decoration:none;
  160. line-height:180%;
  161. -moz-osx-font-smoothing: grayscale;
  162. -webkit-font-smoothing: antialiased;
  163. font-smoothing: antialiased;
  164. -webkit-animation: fadein 1.5s;
  165. -moz-animation: fadein 1.5s;
  166. -o-animation: fadein 1.5s;
  167. animation: fadein 1.5s;
  168. }
  169.  
  170. a { text-decoration:none; color:var(--links); }
  171. a:hover { color:var(--links-hover); cursor:pointer; }
  172.  
  173. b, strong { font-weight:600; color:var(--title); }
  174. i, em { font-style:italic; }
  175.  
  176. /*-- container --*/
  177.  
  178. #all {
  179. margin:100px auto 0px;
  180. width:calc(325px * 3 + 50px * 2);
  181. /* (image width * how many + margin-left+margin-right * how many-1) */
  182. }
  183.  
  184. /*-- header --*/
  185.  
  186. header { width:100%; height:auto; }
  187.  
  188. .icon { float:left; margin-right:15px; }
  189.  
  190. .icon img {
  191. width:30px;
  192. height:30px;
  193. border-radius:100%;
  194. padding:3px;
  195. border:1px solid var(--borders);
  196. }
  197.  
  198. .title {
  199. font-size:calc(var(--font-size) + 4px);
  200. font-weight:bold;
  201. letter-spacing:2px;
  202. line-height:38px;
  203. text-transform:uppercase;
  204. color:var(--title);
  205. }
  206.  
  207. .desc {
  208. margin-left:150px;
  209. margin-top:20px;
  210. height:72px;
  211. width:550px; /* decrease this value by how much you've increased the filters */
  212. overflow-y:hidden;
  213. }
  214.  
  215. .requests {
  216. float:right;
  217. font-size:calc(var(--font-size) + 2px);
  218. font-weight:700;
  219. text-transform:uppercase;
  220. padding:5px 12px;
  221. color:var(--links-hover);
  222. border:1px solid var(--links-hover);
  223. border-radius:5px;
  224. }
  225.  
  226. .links {
  227. margin-top:20px;
  228. margin-left:-45px;
  229. width:100px;
  230. font-style:italic;
  231. float:left;
  232. height:78px;
  233. overflow:scroll;
  234. }
  235.  
  236. .links a { display:block; }
  237. .links i { margin-right:7px; color:var(--links-hover); }
  238.  
  239. /*--filters--*/
  240.  
  241. .sort {
  242. position:relative;
  243. margin-top:20px;
  244. width:295px; /* increase this value if you want the filters to be wider */
  245. float:right;
  246. background:var(--accent);
  247. padding:10px 15px;
  248. height:56px;
  249. overflow:scroll;
  250. border:1px solid var(--borders);
  251. }
  252.  
  253. .sort ul, .colours ul {
  254. list-style:none;
  255. padding-left:0px;
  256. margin-top:0;
  257. margin-bottom:0;
  258. }
  259.  
  260. .sort li { display:inline; list-style:none; }
  261. .sort li a.selected, .colours a.selected { font-weight:700; color:var(--links-hover); }
  262.  
  263. .sort a { display:inline; margin-right:10px; }
  264.  
  265. .sort b {
  266. text-transform:uppercase;
  267. letter-spacing:0.5px;
  268. font-weight:700;
  269. }
  270.  
  271. /*-- media --*/
  272.  
  273. #main {
  274. width:calc(325px * 3 + 50px * 3);
  275. /* (image width * how many + margin-left+margin-right * how many) */
  276. height:auto;
  277. margin-top:50px;
  278. margin-bottom:75px;
  279. }
  280.  
  281. .media {
  282. float:left;
  283. margin-right:50px;
  284. margin-bottom:50px;
  285. height:auto;
  286. width:325px; /* image width */
  287. }
  288.  
  289. .media img {
  290. height:auto;
  291. width:325px; /* image width */
  292. }
  293.  
  294. .multiple { margin-bottom:5px!important; }
  295.  
  296. .more {
  297. float:left;
  298. position:absolute;
  299. margin:10px;
  300. text-align:center;
  301. font-style:italic;
  302. font-weight:600;
  303. text-transform:uppercase;
  304. letter-spacing:0.5px;
  305. padding:2px 5px;
  306. background:var(--background);
  307. border:1px solid var(--borders);
  308. opacity:0;
  309. border-radius:5px;
  310. z-index:9;
  311. }
  312.  
  313. .media:hover .more { opacity:0.9; }
  314.  
  315. .subtitle {
  316. letter-spacing:1px;
  317. font-weight:bold;
  318. font-size:calc(var(--font-size) + 1px);
  319. line-height:180%;
  320. text-align:center;
  321. text-transform:uppercase;
  322. }
  323.  
  324. /*-- carousel --*/
  325.  
  326. .slick-dots li.slick-active button:before {
  327. opacity:1;
  328. color:var(--links-hover);
  329. }
  330.  
  331. .slick-dots li { margin:0; }
  332. .slick-dots li button:hover:before { color:var(--links-hover); }
  333.  
  334. /*-- credit - DO NOT TOUCH --*/
  335.  
  336. .credit a {
  337. font-size:10px;
  338. bottom:15px;
  339. right:20px;
  340. position:fixed;
  341. text-transform:uppercase;
  342. }
  343.  
  344. </style>
  345. </head>
  346.  
  347.  
  348.  
  349. <body>
  350.  
  351.  
  352. <div id="all">
  353.  
  354. <header>
  355.  
  356. <!-- 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. -->
  357. <div class="icon"><img src="{PortraitURL-128}"/></div>
  358. <!-- optional requests status box! if you don't want it just delete it. -->
  359. <div class="requests">requests status</div>
  360. <div class="title">headers</div><!-- title -->
  361. <div class="links">
  362. <!-- these are your header links. it will scroll if there's more. to change the icon, go to https://fontawesome.com/icons. -->
  363. <a href="/"><i class="fas fa-home fa-fw"></i>home</a>
  364. <a href="/ask"><i class="fas fa-envelope fa-fw"></i>ask</a></a>
  365. <a href="/"><i class="fas fa-bars fa-fw"></i>link</a>
  366. <a href="/"><i class="fas fa-tag fa-fw"></i>link</a>
  367. </div>
  368.  
  369. <!-- HOW TO CUSTOMISE THE FILTERS
  370.  
  371. template for new filter groups:
  372. <ul class="filter option-set" data-filter-group="group1">
  373. <b>category:</b>&emsp;
  374. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  375. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  376. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  377. </ul>
  378.  
  379. template for new filters:
  380. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  381.  
  382. 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.
  383. for example, if I wanted to make my media filter by new only, my code would look like this
  384. <li><a href="#" data-filter-value=".new">new</a></li>
  385. note the areas where it's been changed.
  386.  
  387. 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.
  388. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  389.  
  390. the filter names all need to be different. if you have more than three groups, it will scroll.
  391.  
  392. -->
  393.  
  394. <div class="sort">
  395. <ul class="filter option-set exclusive" data-filter-group="group1">
  396. <li><b><a href="#" data-filter-value="" class="selected">all</a></b></li>
  397. <li><b><a href="#" data-filter-value=".new">*new</a></b></li>
  398. </ul>
  399. <ul class="filter option-set" data-filter-group="group2">
  400. <b>category:</b>&emsp;
  401. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  402. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  403. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  404. </ul>
  405. <ul class="filter option-set" data-filter-group="group3">
  406. <b>category:</b>&emsp;
  407. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  408. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  409. <li><a href="#" data-filter-value=".filter">filter name</a></li>
  410. </ul>
  411. </div>
  412.  
  413. <!-- please have something here! the page design will look weird if there's nothing here. it will automatically scroll. -->
  414. <div class="desc">
  415. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ligula lorem. Donec non purus mi. Sed iaculis ex at odio vehicula, ac hendrerit augue semper. Proin mi massa, egestas in consectetur sed, malesuada nec dolor. Pellentesque viverra mollis libero, accumsan facilisis orci. Cras porttitor feugiat libero quis elementum. Phasellus rhoncus lectus massa, a ullamcorper quam porta.
  416. </div>
  417.  
  418. </header>
  419.  
  420.  
  421.  
  422. <div id="main">
  423.  
  424. <!-- TEMPLATES FOR MORE BOXES
  425.  
  426. FOR SINGLE PICS:
  427. <div class="media">
  428. <div class="more">optional text on hover</div>
  429. <img src="">
  430. </div>
  431.  
  432. FOR MULTIPLE PICS: you can have as many as you want.
  433. <div class="media">
  434. <div class="more">optional text on hover</div>
  435. <div class="multiple">
  436. <img src="">
  437. <img src="">
  438. </div>
  439. </div>
  440.  
  441. to add a link to each picture:
  442. <a href=""><img src=""></a>
  443.  
  444. if you do not want the text on hover, just delete this line.
  445. <div class="more">optional text on hover</div>
  446.  
  447. if you want text under the headers (keep it short!), add this line under the last <img src="">
  448. <div class="subtitle">subtitle</div>
  449.  
  450. -->
  451.  
  452. <!-- HOW TO ADD FILTERS
  453.  
  454. 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.
  455.  
  456. for example, if you wanted to have the filters 'fave' and 'new' together for one box, the filters should look like this
  457. <div class="media fave new">
  458. note how media is still there in front.
  459.  
  460. -->
  461.  
  462. <div class="media">
  463. <div class="more">optional text on hover</div>
  464. <img src="">
  465. </div>
  466.  
  467. <div class="media">
  468. <div class="more">optional text on hover</div>
  469. <div class="multiple">
  470. <img src="">
  471. <img src="">
  472. </div>
  473. </div>
  474.  
  475. <div class="media">
  476. <div class="more">optional text on hover</div>
  477. <div class="multiple">
  478. <a href=""><img src=""></a>
  479. <a href=""><img src=""></a>
  480. <a href=""><img src=""></a>
  481. </div>
  482. </div>
  483.  
  484.  
  485. </div><!-- end main -->
  486.  
  487.  
  488. </div><!-- end all -->
  489.  
  490.  
  491.  
  492. <!-- credit - DO NOT TOUCH -->
  493.  
  494. <div class="credit">
  495. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  496. </div>
  497.  
  498.  
  499. </body>
  500.  
  501.  
  502. <!-- scripts - DO NOT TOUCH -->
  503.  
  504. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  505.  
  506. <script type="text/javascript">
  507. $(document).ready(function(){
  508. $('.multiple').slick({
  509. dots: true,
  510. dotsClass: 'slick-dots',
  511. arrows: false,
  512. infinite: true,
  513. speed: 300,
  514. slidesToShow: 1,
  515. adaptiveHeight: true
  516. });
  517. });
  518. </script>
  519.  
  520. <!-- combination filters by @magnusthemes -->
  521. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  522. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  523.  
  524. <script>
  525. $(document).ready(function() {
  526. var $container = $("#main"); // the container with all the elements to filter inside
  527. var filters = {}; //should be outside the scope of the filtering function
  528. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  529. var $grid = $container.isotope({
  530. itemSelector: ".media", // the elements to filter
  531. percentPosition: false // put true if you use percentage widths, otherwise put false
  532. });
  533. $(".option-set a").click(function(e) {
  534. var $this = $(this); // cache the clicked link
  535. var filterAttr = "data-filter-value";
  536. var filterValue = $this.attr(filterAttr); // cache the filter
  537. var $optionSet = $this.parents(".option-set"); // cache the parent element
  538. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  539. var filterGroup = filters[group];
  540. if (!filterGroup) {
  541. filterGroup = filters[group] = [];
  542. }
  543. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  544. var activeClass = "selected", // the class for active links
  545. exclClass = "exclusive"; // the class for exclusive groups
  546. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  547. var comboFilter = getComboFilter(filters);
  548. $grid.isotope({
  549. filter: comboFilter
  550. });
  551. $this.toggleClass(activeClass);
  552. e.preventDefault();
  553. });
  554. });
  555. </script>
  556.  
  557. <!-- end filter scripts -->
  558.  
  559. </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!