API tools faq
paste
Advertisement
loranhale

amsterdam

loranhale
Jun 21st, 2018
2,305
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!----
  5.  
  6.  
  7. network: amsterdam
  8.  
  9. @loranhale
  10.  
  11.  
  12. ----->
  13.  
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18. <link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,600,600italic|Nunito+Sans:400,400italic,600,600italic|Open+Sans:400,400italic,600,600italic' rel='stylesheet' type='text/css'>
  19.  
  20. <style type="text/css">
  21.  
  22. /* scrollbar */
  23.  
  24. ::-webkit-scrollbar {
  25. height:5px;
  26. width:1px;
  27. background:#fafafa;
  28. }
  29.  
  30. ::-webkit-scrollbar-thumb { background:#dcecf5; }
  31.  
  32. /* controls */
  33.  
  34. .iframe-controls--desktop { display:none!important; }
  35.  
  36. /* tooltips */
  37.  
  38. #s-m-t-tooltip {
  39. max-width:300px;
  40. margin:15px;
  41. padding:5px 6px;
  42. z-index:99999999;
  43. color:#000;
  44. text-transform:lowercase;
  45. border:1px solid #dcecf5;
  46. background:#fff;
  47. }
  48.  
  49. /* body */
  50.  
  51. body {
  52. background:#fafafa;
  53. color:#555;
  54. font-family:'nunito sans', arial, sans-serif;
  55. font-size:10.5px;
  56. -moz-osx-font-smoothing:grayscale;
  57. -webkit-font-smoothing:antialiased;
  58. font-smoothing:antialiased;
  59. }
  60.  
  61. a {
  62. color:#8892e0; /* links colour */
  63. text-decoration:none;
  64. transition-duration: 0.6s;
  65. -moz-transition-duration: 0.6s;
  66. -webkit-transition-duration: 0.6s;
  67. -o-transition-duration: 0.6s;
  68. }
  69.  
  70. a:hover { color:#000; }
  71.  
  72. h1 {
  73. font-size:13px;
  74. color:#444;
  75. font-weight:600;
  76. text-transform:uppercase;
  77. letter-spacing:1px;
  78. }
  79.  
  80. b { font-style:bold; color:#222; }
  81. i { font-style:italic; }
  82.  
  83. section {
  84. width:calc(220px * 3);
  85. /* change 3 to 4 or however many columns you want */
  86. box-sizing:border-box;
  87. margin:100px auto;
  88. transform:translate(0px,0px);
  89. }
  90.  
  91. /* general */
  92.  
  93. nav, .grid .item {
  94. border:1px solid #dcecf5;
  95. background:#fff;
  96. }
  97.  
  98. /* header */
  99.  
  100. nav {
  101. margin:0 10px;
  102. padding:10px 20px;
  103. margin-bottom:40px;
  104. }
  105.  
  106. .t {
  107. font-size:18px;
  108. display:inline;
  109. font-weight:600;
  110. letter-spacing:.5px;
  111. text-transform:lowercase;
  112. color:#222;
  113. margin-right:10px;
  114. }
  115.  
  116. .icon { display:inline; float:right; padding-top:5px; }
  117. .icon img {
  118. width:55px;
  119. height:auto;
  120. border-radius:3px;
  121. }
  122.  
  123. .links { vertical-align:1px; display:inline;}
  124. .links a { margin-right:5px; font-size:11.5px;}
  125.  
  126. .d {margin-bottom:10px;}
  127.  
  128. /* filters */
  129.  
  130. nav ul { margin-left:-40px; }
  131. nav ul li {
  132. list-style-type:none;
  133. display:inline-block;
  134. }
  135.  
  136. nav ul li a {
  137. font-weight:600;
  138. margin-right:8px;
  139. padding:1px 5px;
  140. border-radius:3px;
  141. color:#8892e0; /* filters colour */
  142. border:1px solid #e1e4ff;
  143. background:#eff1ff;
  144. }
  145.  
  146. nav ul li a:hover {
  147. color:#000;
  148. background:#fafafa;
  149. border:1px solid #8892e0;
  150. }
  151.  
  152. /* selected filter */
  153.  
  154. nav ul li a.selected {
  155. color:#222;
  156. background:#fafafa;
  157. border:1px solid #8892e0;
  158. }
  159.  
  160. nav ul b { margin-right:8px; }
  161.  
  162. /* boxes */
  163.  
  164. .grid .item {
  165. display: block;
  166. width:200px;
  167. float: left;
  168. margin: 10px;
  169. box-sizing: border-box;
  170. padding:15px;
  171. text-align:center;
  172. }
  173.  
  174. .desc h1 { margin-bottom:5px; }
  175.  
  176. .desc h1 a {
  177. text-transform:lowercase;
  178. font-size:15px;
  179. color:#222;
  180. box-shadow: 0 -5px #e1e4ff inset; /* colour of border under names */
  181. }
  182.  
  183. .desc h1 a:hover {
  184. color:#8892e0; /* colour of name on hover */
  185. box-shadow: 0 -15px #eff1ff inset; /* colour of background on hover */
  186. }
  187.  
  188. .desc b {
  189. font-size:11.5px;
  190. margin-right:8px;
  191. font-style:italic;
  192. font-family:'lora',sans-serif;
  193. }
  194.  
  195. .img {text-align:center;}
  196. .img img {
  197. width:150px;
  198. height:auto;
  199. border-radius:3px;
  200. }
  201.  
  202. .group {
  203. background:#eff1ff;
  204. padding:1px 6px;
  205. border:1px solid #cdd1f0;
  206. position:absolute;
  207. font-weight:600;
  208. color:#000;
  209. margin-top:5px;
  210. border-radius:2px;
  211. }
  212.  
  213. /* do not disturb */
  214.  
  215. .lo { bottom:20px; right:20px; position:fixed; }
  216. .lo a { text-transform:uppercase; padding:5px; font-size:12px; }
  217.  
  218. </style>
  219.  
  220. <body>
  221.  
  222. <section>
  223. <nav>
  224.  
  225. <div class="icon"><img src="{PortraitURL-128}" /></div>
  226. <div class="t">network</div>
  227. <div class="links">
  228. <a href="/">home</a>
  229. <a href="/">mail</a>
  230. <a href="/">link</a>
  231. </div>
  232.  
  233. <!-- optional description -->
  234. <div class="d">this is a description </div>
  235.  
  236.  
  237. <!-- filters
  238.  
  239. below is a template for a new filter
  240. do NOT remove the dot "." before FILTER.
  241. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  242.  
  243.  
  244. below is a template for a whole set of filters that you can add
  245. REMEMBER to change group1 to group2 if it's a different set of filters
  246.  
  247. <ul class="filter option-set exclusive" data-filter-group="group1">
  248. <b>OPTIONAL CATEGORY NAME. you can remove this</b>
  249. <li><a href="#" data-filter-value="" class="selected">FILTER NAME</a></li>
  250. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  251. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  252. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  253. </ul>
  254.  
  255.  
  256. -->
  257.  
  258. <ul class="filter option-set exclusive" data-filter-group="group1">
  259. <!-- add <b>sort</b> if you want a category name -->
  260. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  261. <li><a href="#" data-filter-value=".boys">boys</a></li>
  262. <li><a href="#" data-filter-value=".girls">girls</a></li>
  263. <li><a href="#" data-filter-value=".kpop">kpop</a></li>
  264. </ul>
  265.  
  266. </nav>
  267.  
  268.  
  269. <div class="peeps">
  270.  
  271. <!-- BOX TEMPLATE
  272.  
  273. <div class="grid">
  274. <div class="item FILTER FILTER">
  275.  
  276. <div class="img">
  277. <img src="IMAGE URL" />
  278. </div>
  279.  
  280. <div class="desc">
  281. <h1><a href="/tagged/TAG">TAG NAME</a></h1>
  282.  
  283. add a description here
  284.  
  285. <div class="group">this is optional. you can remove this</div>
  286. </div>
  287.  
  288. </div>
  289. </div>
  290.  
  291. -->
  292.  
  293.  
  294. <div class="grid">
  295. <div class="item FILTER">
  296.  
  297. <div class="img">
  298. <img src="IMAGE URL" />
  299. </div>
  300.  
  301. <div class="desc">
  302. <h1><a href="/tagged/TAG">TAG NAME</a></h1>
  303.  
  304. add a description here
  305.  
  306. <div class="group">this is optional. you can remove this</div>
  307. </div>
  308.  
  309. </div>
  310. </div>
  311.  
  312.  
  313. <div class="grid">
  314. <div class="item FILTER">
  315.  
  316. <div class="img">
  317. <img src="IMAGE URL" />
  318. </div>
  319.  
  320. <div class="desc">
  321. <h1><a href="/tagged/TAG">TAG NAME</a></h1>
  322.  
  323. add a description here
  324.  
  325. <div class="group">this is optional. you can remove this</div>
  326. </div>
  327.  
  328. </div>
  329. </div>
  330.  
  331.  
  332. </div>
  333. </section>
  334.  
  335. <!-- do not disturb -->
  336. <div class="lo">
  337. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  338. </div>
  339.  
  340. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  341. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  342. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  343. <script>
  344. jQuery.noConflict();
  345. (function($){
  346. $(document).ready(function(){
  347. $("a[title],img[title],[title]").style_my_tooltips({
  348. tip_follows_cursor:true,
  349. tip_delay_time:200,
  350. tip_fade_speed:300,
  351. attribute:"title"
  352. });
  353. });
  354. })(jQuery);
  355. </script>
  356.  
  357. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  358. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  359. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  360. <script>
  361. $(document).ready(function() {
  362. var $container = $(".peeps"); // the container with all the elements to filter inside
  363. var filters = {}; //should be outside the scope of the filtering function
  364. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  365. var $grid = $container.isotope({
  366. itemSelector: ".item", // the elements to filter
  367. percentPosition: false // put true if you use percentage widths, otherwise put false
  368. });
  369. $(".option-set a").click(function(e) {
  370. var $this = $(this); // cache the clicked link
  371. var filterAttr = "data-filter-value";
  372. var filterValue = $this.attr(filterAttr); // cache the filter
  373. var $optionSet = $this.parents(".option-set"); // cache the parent element
  374. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  375. var filterGroup = filters[group];
  376. if (!filterGroup) {
  377. filterGroup = filters[group] = [];
  378. }
  379. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  380. var activeClass = "selected", // the class for active links
  381. exclClass = "exclusive"; // the class for exclusive groups
  382. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  383. var comboFilter = getComboFilter(filters);
  384. $grid.isotope({
  385. filter: comboFilter
  386. });
  387. $this.toggleClass(activeClass);
  388. e.preventDefault();
  389. });
  390. });
  391. </script>
  392.  
  393. </head>
  394. </body>
  395. </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!