API tools faq
paste
Advertisement
loranhale

dover

loranhale
Sep 23rd, 2017
936
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!----
  5.  
  6.  
  7. icons: dover
  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=Source+Sans+Pro|Noto+Sans|Open+Sans|PT+Sans' rel='stylesheet' type='text/css'>
  19. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  20. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  21.  
  22. <style type="text/css">
  23.  
  24. /* scrollbar */
  25.  
  26. ::-webkit-scrollbar {
  27. height:5px;
  28. width:1px;
  29. background:#fafafa;
  30. }
  31. ::-webkit-scrollbar-thumb { background:#dcecf5; }
  32.  
  33. /* tumblr controls */
  34.  
  35. .tmblr-iframe, .iframe-controls–desktop { display:none !important; }
  36.  
  37. /* tooltips */
  38.  
  39. #s-m-t-tooltip {
  40. max-width:300px;
  41. margin:15px;
  42. padding:5px 6px;
  43. z-index:99999999;
  44. color:#000;
  45. text-transform:lowercase;
  46. border:1px solid #dcecf5;
  47. background:#fff;
  48. }
  49.  
  50. /* body */
  51.  
  52. body {
  53. background:#fafafa;
  54. color:#555;
  55. font-family:'source sans pro', arial, helvetica, sans-serif;
  56. font-size:10px;
  57. -moz-osx-font-smoothing:grayscale;
  58. -webkit-font-smoothing:antialiased;
  59. font-smoothing:antialiased;
  60. }
  61.  
  62. a {
  63. color:#8892e0;
  64. text-decoration:none;
  65. transition-duration:.6s;
  66. -moz-transition-duration:.6s;
  67. -webkit-transition-duration:.6s;
  68. -o-transition-duration:.6s;
  69. }
  70.  
  71. a:hover { color:#000; text-decoration:none; }
  72.  
  73. section {
  74. width:500px;
  75. box-sizing:border-box;
  76. margin:60px auto;
  77. transform:translate(0px,50px);
  78. }
  79.  
  80. /* header */
  81.  
  82. nav { position:relative; margin-bottom:10px; }
  83.  
  84. .i { display:inline; margin-right:10px; }
  85. .i img {
  86. width:25px;
  87. height:25px;
  88. border-radius:3px;
  89. }
  90.  
  91. .links { float:right; text-align:right; margin-top:8px; }
  92. .links a {
  93. color:#8892e0;
  94. margin-right:6px;
  95. text-transform:lowercase;
  96. font-style:none;
  97. display:inline-block;
  98. font-size:10.5px;
  99. }
  100.  
  101. .links a:last-of-type { margin-right:0; }
  102. .links a:hover { color:#000; }
  103.  
  104. .title {
  105. font-size:16px;
  106. display:inline;
  107. font-weight:600;
  108. letter-spacing:.75px;
  109. text-transform:lowercase;
  110. color:#222;
  111. vertical-align:7px;
  112. }
  113.  
  114. .desc { margin-top:5px; font-style:italic; }
  115.  
  116. /* filter links container */
  117. .filters {
  118. position:relative;
  119. right:0;
  120. left:0;
  121. margin:0px auto 0 auto;
  122. width:500px;
  123. border-bottom:1px solid #dcecf5;
  124. padding-bottom:15px;
  125. }
  126.  
  127. /* filter links */
  128. .button {
  129. display:inline-block;
  130. margin-right:8px;
  131. cursor:pointer;
  132. color:#8892e0;
  133. font-size:11px;
  134. transition-duration:.8s;
  135. -moz-transition-duration:.8s;
  136. -webkit-transition-duration:.8s;
  137. -o-transition-duration:.8s;
  138. }
  139.  
  140. .button:hover { color:#bad0f1; }
  141.  
  142. /* active filter link */
  143. .button.selected { color:#000; }
  144.  
  145. /* filter elements container */
  146. .grid {
  147. position:relative;
  148. right:0;
  149. left:0;
  150. margin:20px auto;
  151. width:500px;
  152. transition-duration:1s;
  153. -moz-transition-duration:1s;
  154. -webkit-transition-duration:1s;
  155. -o-transition-duration:1s;
  156. }
  157.  
  158. /* filter elements */
  159. .icon {
  160. width:65px;
  161. height:65px;
  162. margin:10px;
  163. }
  164.  
  165. .icon img {
  166. width:65px;
  167. height:65px;
  168. border-radius:3px;
  169. }
  170.  
  171. /* sidebar filters */
  172. .bar {
  173. display:none;
  174. position:fixed;
  175. width:120px;
  176. top:25%;
  177. margin-left:calc(50% - 250px - 200px);
  178. }
  179.  
  180. .l .button {
  181. display:block;
  182. margin-bottom:4px;
  183. transition-duration:.8s;
  184. -moz-transition-duration:.8s;
  185. -webkit-transition-duration:.8s;
  186. -o-transition-duration:.8s;
  187. }
  188.  
  189. .l .button.selected { color:#000; }
  190.  
  191. /* filters icons */
  192. .l .button i {
  193. text-align:center!important;
  194. font-size:13px;
  195. width:15px;
  196. height:15px;
  197. padding:5px;
  198. transition:.6s ease-in-out;
  199. border-radius:3px;
  200. vertical-align:middle;
  201. display:inline-block;
  202. margin-right:6px;
  203. border:1px solid #dcecf5;
  204. color:#8892e0;
  205. background:#fafafa;
  206. }
  207.  
  208. .l .button:hover { color:#000; }
  209. .l .button:hover i { color:#000; border:1px solid #000; background:#fff; }
  210.  
  211. .l .button.selected { color:#bad0f1; }
  212. .l .button.selected i {
  213. color:#000;
  214. border:1px solid #bad0f1;
  215. background:#fff;
  216. }
  217.  
  218. /* do not disturb */
  219. .lo { bottom:20px; right:20px; position:fixed; }
  220. .lo a { text-transform:uppercase; padding:5px; font-size:12px; }
  221.  
  222. </style>
  223. <body>
  224.  
  225. <section>
  226.  
  227. <div class="header">
  228.  
  229. <nav>
  230. <div class="i">
  231. <!-- replace with your icon url -->
  232. <img src="{PortraitUrl-128}" />
  233. </div>
  234.  
  235. <div class="title">icons by {name}</div>
  236. <div class="links">
  237. <a href="/">back</a>
  238. <a href="/ask">request</a>
  239. <a href="/">link</a>
  240. </div>
  241.  
  242. <!-- description is optional -->
  243. <div class="desc">do not redistribute or claim these icons as your own. credit is appreciated but not required. </div>
  244.  
  245. </nav>
  246.  
  247. <!--
  248. INSTRUCTIONS:
  249. only replace FILTER and FILTER NAME with your preferred filter
  250. <div class="button" filter="FILTER">FILTER NAME</div>
  251.  
  252. eg. <div class="button" filter="homme">homme</div>
  253. do not touch anything else
  254. -->
  255.  
  256. <!-- start filter links -->
  257. <div class="filters">
  258. <div class="button selected" filter="icon">show all</div>
  259. <div class="button" filter="FILTER">filter name</div>
  260. <div class="button" filter="FILTER">filter name</div>
  261. <div class="button" filter="FILTER">filter name</div>
  262. <div class="button" filter="FILTER">filter name</div>
  263. <div class="button" filter="FILTER">filter name</div>
  264. <!-- add as many as you want -->
  265. </div>
  266. <!-- end filter links -->
  267.  
  268. </div>
  269.  
  270. <!-- GUIDE:
  271. this is your template
  272. <div class="icon filter filter"><img src="insert icon url"></div>
  273.  
  274. you can add as many filters as you want as long as icon remains there
  275.  
  276. eg. <div class="icon femme faceless bw"><img src="http://i.imgur.com/lM3PHhg.png"></div>
  277. -->
  278.  
  279. <!-- start icons -->
  280. <div class="grid">
  281.  
  282. <div class="icon filter"><img src="insert icon url"></div>
  283. <div class="icon filter"><img src="insert icon url"></div>
  284. <div class="icon filter"><img src="insert icon url"></div>
  285. <div class="icon filter"><img src="insert icon url"></div>
  286. <!-- copy and paste to add more -->
  287.  
  288. </div>
  289. <!-- end icons -->
  290.  
  291. </section>
  292.  
  293. <!-- sidebar filters
  294. (this will appear on the left when you scroll down the page -->
  295.  
  296. <div class="bar">
  297. <div class="l">
  298. <!-- the way to customise this is the same as the header filters
  299.  
  300. eg. <div class="button" filter="FILTER"><i class="ion-NAME"></i> FILTER NAME</div>
  301. you can replace the ion icons with your preferred ones at http://ionicons.com/
  302. -->
  303. <div class="button selected" filter="icon"><i class="ion-ios-refresh-outline"></i> show all</div>
  304. <div class="button" filter="FILTER"><i class="ion-male"></i> filter name</div>
  305. <div class="button" filter="FILTER"><i class="ion-female"></i> filter name</div>
  306. <div class="button" filter="FILTER"><i class="ion-ios-lightbulb-outline"></i> filter name</div>
  307. <div class="button" filter="FILTER"><i class="ion-ios-person"></i> filter name</div>
  308. <div class="button" filter="FILTER"><i class="ion-ios-paw"></i> filter name</div>
  309. </div>
  310. </div>
  311.  
  312. <!-- DANGER!KEEP OUT -->
  313. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  314. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  315. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  316. <script>
  317. jQuery.noConflict();
  318. (function($){
  319. $(document).ready(function(){
  320. $("a[title],img[title],[title]").style_my_tooltips({
  321. tip_follows_cursor:true,
  322. tip_delay_time:200,
  323. tip_fade_speed:300,
  324. attribute:"title"
  325. });
  326. });
  327. })(jQuery);
  328. </script>
  329.  
  330. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  331. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  332. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  333.  
  334. <script>
  335. $(document).ready(function(){
  336. // masonry layout
  337. var $grid = $(".grid"); $grid.imagesLoaded(function() {
  338. $grid.masonry({
  339. itemSelector: ".icon",
  340. columnWidth: 100
  341. });
  342. });
  343.  
  344. // filter
  345. $(".button").click(function(){
  346. $(this).addClass("selected");
  347. $(".button").not($(this)).removeClass("selected");
  348. var ssf = $(this).attr("filter");
  349. $(".icon." + ssf).show();
  350. $(".icon").not("." + ssf).hide();
  351. $grid.masonry();
  352. });
  353. });
  354. </script>
  355. </head>
  356.  
  357. <script type="text/javascript">
  358. $(document).scroll(function () {
  359. var y = $(this).scrollTop();
  360. if (y > 300) {
  361. $('.bar').fadeIn();
  362. } if (y < 300) {
  363. $('.bar').fadeOut();
  364. }
  365. });
  366. </script>
  367.  
  368. <div class="lo">
  369. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  370. </div>
  371.  
  372. </body>
  373. </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!