API tools faq
paste
alydae

network i

alydae
Jul 15th, 2016 (edited)
21,956
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.74 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. NETWORK I
  7. by alydae
  8.  
  9. released: july 15, 2016
  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. if you want to add filters to this page, go to
  17. http://enchantedthemes.tumblr.com/networks/filters
  18.  
  19. thank you for using!!!
  20.  
  21. -->
  22.  
  23. <title>members</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!-- scripts - DO NOT TOUCH -->
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29.  
  30. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:200,
  37. tip_fade_speed:300
  38. }
  39. );
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  45. <script>
  46. $(window).load(function () {
  47. $('#content').masonry({
  48. itemSelector : ".box",
  49. });
  50. });
  51. </script>
  52.  
  53. <!-- custom font -->
  54.  
  55. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  56.  
  57.  
  58. <style type="text/css">
  59.  
  60. @keyframes fadein {
  61. from { opacity:0; }
  62. to { opacity:1; }
  63. }
  64.  
  65. @-moz-keyframes fadein {
  66. from { opacity:0; }
  67. to { opacity:1; }
  68. }
  69.  
  70. @-webkit-keyframes fadein {
  71. from { opacity:0; }
  72. to { opacity:1; }
  73. }
  74.  
  75. @-ms-keyframes fadein {
  76. from { opacity:0; }
  77. to { opacity:1; }
  78. }
  79.  
  80. @-o-keyframes fadein {
  81. from { opacity:0; }
  82. to { opacity:1; }
  83. }
  84.  
  85. /*-- selection --*/
  86.  
  87. ::-moz-selection { background:var(--accent); color:var(--title); }
  88. ::selection { background:var(--accent); color:var(--title); }
  89.  
  90. /*-- scrollbar --*/
  91.  
  92. ::-webkit-scrollbar {
  93. width:2px;
  94. height:2px;
  95. }
  96.  
  97. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  98.  
  99. /*-- tooltips --*/
  100.  
  101. #s-m-t-tooltip {
  102. color:var(--text);
  103. background-color:var(--background);
  104. font-size:calc(var(--font-size) - 2px);
  105. font-family:'Open Sans', helvetica, sans-serif;
  106. letter-spacing:1px;
  107. text-transform:uppercase;
  108. text-align:center;
  109. position:absolute;
  110. padding:0px 5px 0px 5px;
  111. margin-top:30px;
  112. border:1px solid var(--borders);
  113. z-index:9999;
  114. }
  115.  
  116. /*-- tumblr controls --*/
  117.  
  118. .tmblr-iframe, .iframe-controls–desktop {
  119. display:none!important;
  120. }
  121.  
  122. /*-- hover animation --*/
  123.  
  124. a, a:hover, .overlay, .show, .box:hover .show {
  125. transition-duration: 0.6s;
  126. -moz-transition-duration: 0.6s;
  127. -webkit-transition-duration: 0.6s;
  128. -o-transition-duration: 0.6s;
  129. }
  130.  
  131. /*-- change all variables here --*/
  132.  
  133. :root {
  134. --background:#fafafa;
  135. --accent:#fff;
  136. --text:#666;
  137. --links:#444;
  138. --links-hover:#bad1e7;
  139. --title:#222;
  140. --borders:#eee;
  141. --font-size:10px;
  142. }
  143.  
  144. /*-- general customisation --*/
  145.  
  146. body {
  147. color:var(--text);
  148. background-color:var(--background);
  149. font-style:normal;
  150. font-family:'Open Sans', helvetica, sans-serif;
  151. font-size:var(--font-size);
  152. font-weight:400;
  153. text-decoration:none;
  154. line-height:180%;
  155. -moz-osx-font-smoothing: grayscale;
  156. -webkit-font-smoothing: antialiased;
  157. font-smoothing: antialiased;
  158. -webkit-animation: fadein 1.5s;
  159. -moz-animation: fadein 1.5s;
  160. -o-animation: fadein 1.5s;
  161. animation: fadein 1.5s;
  162. }
  163.  
  164. a { text-decoration:none; color:var(--links); }
  165. a:hover { color:var(--links-hover); cursor:pointer; }
  166.  
  167. b, strong { font-weight:700; color:var(--title); }
  168. i, em { font-style:italic; }
  169.  
  170. /*-- header --*/
  171.  
  172. #topbar {
  173. position:fixed;
  174. top:0;
  175. left:0;
  176. width:100vw;
  177. background:var(--accent);
  178. border-bottom:1px solid var(--borders);
  179. z-index:99999;
  180. }
  181.  
  182. #header {
  183. position:relative;
  184. width:250px; /* header info width */
  185. margin:80px auto;
  186. z-index:999999;
  187. }
  188.  
  189. .icon {
  190. top:50%;
  191. transform:translateY(-46%);
  192. position:absolute;
  193. }
  194.  
  195. .icon img {
  196. height:50px;
  197. width:50px;
  198. border-radius:100%;
  199. }
  200.  
  201. .title {
  202. position:relative;
  203. margin-left:70px;
  204. text-transform:uppercase;
  205. font-size:calc(var(--font-size) + 4px);
  206. font-weight:700;
  207. letter-spacing:1px;
  208. color:var(--title);
  209. }
  210.  
  211. .links { margin:5px 0px 0px 70px; }
  212.  
  213. .links a {
  214. display:inline;
  215. padding-right:10px;
  216. letter-spacing:0.5px;
  217. text-transform:uppercase;
  218. }
  219.  
  220. /*-- members --*/
  221.  
  222. #content {
  223. position:relative;
  224. margin:275px auto 100px auto;
  225. width:calc((125px + 40px + 2px) * 4);
  226. /* ((image width + 2*margin + 2*border width) * number of columns) */
  227. }
  228.  
  229. .box {
  230. position:block;
  231. margin:20px;
  232. height:158px; /* image height + 33px */
  233. width:125px; /* image width */
  234. float:left;
  235. background:var(--accent);
  236. border:1px solid var(--borders);
  237. }
  238.  
  239. .box h1 {
  240. position:relative;
  241. text-transform:uppercase;
  242. text-align:center;
  243. font-weight:600;
  244. font-size:calc(var(--font-size) + 1px);
  245. letter-spacing:0.5px;
  246. color:var(--title);
  247. }
  248.  
  249. .box img {
  250. position:relative;
  251. width:125px; /* image width */
  252. height:125px; /* image height */
  253. }
  254.  
  255. .overlay {
  256. position:absolute;
  257. top:33px;
  258. left:0;
  259. width:100%;
  260. height:125px; /* image height */
  261. opacity:0;
  262. background:rgba(255,255,255,0.95);
  263. z-index:999;
  264. overflow-y:scroll;
  265. overflow-x:hidden;
  266. }
  267.  
  268. .box:hover .overlay { opacity:1; }
  269.  
  270. .desc {
  271. position:relative;
  272. top:50%;
  273. left:50%;
  274. padding:0px 15px 0px 15px;
  275. line-height:160%;
  276. text-align:center;
  277. text-transform:lowercase;
  278. overflow-y:scroll;
  279. overflow-x:hidden;
  280. transform:translate(-50%, -50%);
  281. }
  282.  
  283. .show {
  284. position:absolute;
  285. margin-top:-34px;
  286. height:33px;
  287. width:100%;
  288. text-align:center;
  289. line-height:33px;
  290. font-style:italic;
  291. font-size:calc(var(--font-size) + 1px);
  292. opacity:0;
  293. background-color:var(--background);
  294. border-top:1px solid var(--borders);
  295. }
  296.  
  297. .box:hover .show { opacity:1; margin-top:-34px; }
  298.  
  299. /*-- credit - DO NOT TOUCH --*/
  300.  
  301. .credit a {
  302. font-size:10px;
  303. bottom:15px;
  304. right:20px;
  305. position:fixed;
  306. text-transform:uppercase;
  307. }
  308.  
  309. </style>
  310. </head>
  311.  
  312.  
  313. <body>
  314.  
  315. <div id="topbar">
  316.  
  317. <div id="header">
  318. <!-- 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. -->
  319. <div class="icon"><img src="{PortraitURL-128}"/></div>
  320. <div class="title">members</div> <!-- title -->
  321. <div class="links">
  322. <!-- this is where your header links are. feel free to add more. -->
  323. <a href="/">home</a>
  324. <a href="/ask">ask</a>
  325. <a href="">link</a>
  326. <!-- do not remove this one!!! -->
  327. <a href="https://enchantedthemes.tumblr.com">credit</a>
  328. </div>
  329. </div>
  330.  
  331. </div>
  332.  
  333.  
  334. <div id="content">
  335.  
  336. <!-- BOX CUSTOMISATION
  337.  
  338. template:
  339. <div class="box">
  340. <h1>name</h1>
  341. <div class="show"><a href="">url</a></div>
  342. <img src=""/>
  343. <div class="overlay">
  344. <div class="desc">desc</div>
  345. </div>
  346. </div>
  347.  
  348. if the text on hover is too long and it scrolls, you'll need to change <div class="desc"> to <div class="desc" style="height:95px">.
  349.  
  350. if you do not want the text on hover, just delete these lines.
  351. <div class="overlay">
  352. <div class="desc">desc</div>
  353. </div>
  354.  
  355. if you do not want an image and overlay, delete these lines.
  356. <img src=""/>
  357. <div class="overlay">
  358. <div class="desc">desc</div>
  359. </div>
  360.  
  361. -->
  362.  
  363. <div class="box">
  364. <h1>name</h1>
  365. <div class="show"><a href="">url</a></div>
  366. <img src=""/>
  367. <div class="overlay">
  368. <div class="desc">desc</div>
  369. </div>
  370. </div>
  371.  
  372. <div class="box">
  373. <h1>name</h1>
  374. <div class="show"><a href="">url</a></div>
  375. <img src=""/>
  376. <div class="overlay">
  377. <div class="desc">desc</div>
  378. </div>
  379. </div>
  380.  
  381. <div class="box">
  382. <h1>name</h1>
  383. <div class="show"><a href="">url</a></div>
  384. <img src=""/>
  385. <div class="overlay">
  386. <div class="desc">desc</div>
  387. </div>
  388. </div>
  389.  
  390. <div class="box">
  391. <h1>name</h1>
  392. <div class="show"><a href="">url</a></div>
  393. <img src=""/>
  394. <div class="overlay">
  395. <div class="desc">desc</div>
  396. </div>
  397. </div>
  398.  
  399. </div>
  400.  
  401.  
  402. <!-- credit - DO NOT TOUCH -->
  403.  
  404. <div class="credit">
  405. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  406. </div>
  407.  
  408.  
  409. </body>
  410. </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!