API tools faq
paste
Advertisement
divinethm

aegle — network i

divinethm
Nov 23rd, 2018
2,723
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. aegle — network i
  7. by divinethemes
  8.  
  9.  
  10. › do not steal any part of this code
  11. › edit however you want, but only for personal use
  12. › send any questions to divinethemes.tumblr.com/ask
  13. › thank you for using! <3
  14.  
  15. —
  16.  
  17. › ctrl/command + f, type "#ede1cf" and replace with desired color to change all the link hover colors at once
  18. › your customize page may show scrolling instead of the hover effect bc the window that your page is displayed on now is too small to fit three columns - check your actual blog if you think something is wrong
  19. › if you change any of the widths of the member elements (icon, desc, etc.) pls note that it may affect how they'll fit on smaller/bigger screens
  20. › i will not assist with redjusting sizes since they have already been made to be fit on (hopefully) all screen sizes
  21.  
  22. -->
  23.  
  24. <title>members — {Name}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  28.  
  29. <!-- tooltips script-->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:200,
  39. tip_fade_speed:300
  40. }
  41. );
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <!--font awesome -->
  47. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  48.  
  49. <!-- honeybee icons by @themehive -->
  50. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  51.  
  52. <!--fonts-->
  53. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  54.  
  55. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  56.  
  57. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
  58.  
  59. <style type="text/css">
  60.  
  61. @keyframes fadein {from {opacity:0;}to {opacity:1;}}
  62. @-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  63. @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  64. @-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}
  65.  
  66. /*-- scrollbar --*/
  67. ::-webkit-scrollbar {
  68. width:6px;
  69. background:#fafafa; /* scrollbar bg color - i recommend making it the same as the desc bg */
  70. }
  71.  
  72. ::-webkit-scrollbar-thumb {
  73. background:#ede1cf; /* scrollbar color */
  74. }
  75.  
  76. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {
  77. border:5px solid #fafafa; /* make this same as desc bg if you change that color */
  78. border-left:none;
  79. }
  80.  
  81. /*-- selection --*/
  82. ::-moz-selection { background:#eaeaea; color:#222; }
  83. ::selection { background:#eaeaea; color:#222; }
  84.  
  85. /*-- hide tumblr controls --*/
  86. .tmblr-iframe, .iframe-controls–desktop {display:none !important;}
  87.  
  88. /*-- tooltips --*/
  89. #s-m-t-tooltip {
  90. position:absolute;
  91. padding:0px 5px 0px 5px;
  92. margin-top:30px;
  93. color:#444;
  94. background-color:#fafafa;
  95. font-family:'Fira Sans', sans-serif;
  96. font-size:9.5px;
  97. font-style:italic;
  98. text-transform:lowercase;
  99. text-align:center;
  100. border:1px solid #eee;
  101. letter-spacing:0.5px;
  102. z-index:999999;
  103. }
  104.  
  105. /*--general--*/
  106. body {
  107. background-color:#fff;
  108. font-family:'Fira Sans', sans-serif;
  109. font-size:11px;
  110. font-weight:400;
  111. line-height:190%;
  112. text-decoration:none;
  113. color:#555;
  114. -moz-osx-font-smoothing:grayscale;
  115. -webkit-font-smoothing:antialiased;
  116. font-smoothing:antialiased;
  117. animation: fadein 2s;
  118. -moz-animation: fadein 2s;
  119. -webkit-animation: fadein 2s;
  120. -o-animation: fadein 2s;
  121. }
  122.  
  123. body, * {
  124. cursor:auto;
  125. }
  126.  
  127. a {
  128. text-decoration:none;
  129. color:#999; /* link color */
  130. -webkit-transition:0.4s ease-in;
  131. -moz-transition:0.4s ease-in;
  132. -o-transition:0.4s ease-in;
  133. }
  134.  
  135. a:hover {
  136. color:#ede1cf; /* link hover color */
  137. text-decoration:none;
  138. cursor:pointer;
  139. -webkit-transition:0.4s ease-in;
  140. -moz-transition:0.4s ease-in;
  141. -o-transition:0.4s ease-in;
  142. }
  143.  
  144. b, strong {
  145. font-weight:700;
  146. color:#222;
  147. }
  148.  
  149. i, em {
  150. font-style:italic;
  151. }
  152.  
  153. blockquote {
  154. padding-left:10px;
  155. border-left:1px solid #eee;
  156. margin:0px;
  157. }
  158.  
  159. /*-- credit // no touch you mortal (except the hover color) --*/
  160. .c {
  161. position:fixed;
  162. bottom:15px;
  163. right:20px;
  164. font-size:10.5px;
  165. -webkit-transition:0.7s ease-in;
  166. -moz-transition:0.7s ease-in;
  167. -o-transition:0.7s ease-in;
  168. }
  169.  
  170. .c a {
  171. color:#555;
  172. }
  173.  
  174. .c a:hover {
  175. color:#ede1cf; /* you can change this */
  176. }
  177.  
  178. .c:hover {
  179. transform:rotate(540deg);
  180. -webkit-transition:0.7s ease-in;
  181. -moz-transition:0.7s ease-in;
  182. -o-transition:0.7s ease-in;
  183. }
  184.  
  185. .c i:hover {
  186. cursor:pointer;
  187. }
  188.  
  189. /*-- header --*/
  190. #header {
  191. position:relative;
  192. margin:60px auto 50px auto;
  193. text-align:center;
  194. }
  195.  
  196. #header h1 {
  197. font-family:'Playfair Display', serif;
  198. font-size:16px;
  199. letter-spacing:1px;
  200. text-transform:lowercase;
  201. font-weight:600;
  202. font-style:normal;
  203. }
  204.  
  205. #header img {
  206. width:50px;
  207. height:50px;
  208. border-radius:50%;
  209. background:#fafafa;
  210. border:1px solid #eee;
  211. padding:6px;
  212. margin:auto;
  213. }
  214.  
  215. .links {
  216. width:366px;
  217. margin:auto;
  218. }
  219.  
  220. .links a {
  221. border-top:1px solid #eee;
  222. border-bottom:1px solid #eee;
  223. font-style:italic;
  224. font-size:12px;
  225. display:inline-block;
  226. padding:5px 8px 8px 8px;
  227. width:45px;
  228. line-height:200%;
  229. margin:-3px;
  230. text-align:center;
  231. }
  232.  
  233. .links a:before {
  234. content:'';
  235. display:block;
  236. width:0;
  237. float:right;
  238. height:2px;
  239. margin-top:-6px;
  240. background:#ede1cf; /* header link hover top border */
  241. transition: width .5s;
  242. }
  243.  
  244. .links a:after {
  245. content:'';
  246. display:block;
  247. width:0;
  248. height:2px;
  249. margin-bottom:-9px;
  250. background:#ede1cf; /* header link hover bottom border */
  251. transition: width .5s;
  252. }
  253.  
  254. .links a:hover:before, .links a:hover:after {
  255. width: 100%;
  256. }
  257.  
  258. .hdesc {
  259. margin:0 auto 15px auto;
  260. width:330px; /* you may want to change according to the number of links
  261. (link width + 16px - 6px) * # of links */
  262. }
  263.  
  264. /*-- members --*/
  265. #members {
  266. position:relative;
  267. width:calc((280px + 60px) * 3); /* (box width + margin*2) * # of columns */
  268. margin:0 auto;
  269. }
  270.  
  271. .member {
  272. float:left;
  273. width:280px;
  274. height:150px;
  275. margin:30px;
  276. }
  277.  
  278. .member:nth-last-child(1) {
  279. margin-bottom:250px; /* increase/decrease this depending on the longest length of a desc in the last row */
  280. }
  281.  
  282. .left {
  283. float:left;
  284. width:110px;
  285. height:110px;
  286. margin-top:5px;
  287. display:inline;
  288. }
  289.  
  290. .left img {
  291. width:110px;
  292. height:110px;
  293. border-radius:4px;
  294. display:inline;
  295. margin-right:15px;
  296. }
  297.  
  298. h1 {
  299. margin-top:6px;
  300. text-align:center;
  301. font-family:'Karla', sans-serif;
  302. font-weight:500;
  303. font-style:italic;
  304. font-size:15px;
  305. letter-spacing:0.5px;
  306. }
  307.  
  308. .desc {
  309. float:right;
  310. width:125px;
  311. height:88px; /* change max-height to the same value */
  312. max-height:88px; /* and if you change go down to the media queries and follow instructions */
  313. padding:10px;
  314. margin-top:5px;
  315. background:#fafafa; /* desc backgound color */
  316. border-radius:4px;
  317. border:1px solid #eee; /* desc box border color */
  318. text-align:justify;
  319. overflow:hidden;
  320. display:-webkit-box;
  321. -webkit-line-clamp:5; /* if you do change the height of the desc change this to whatever new number of lines there are */
  322. -webkit-box-orient:vertical;
  323. transition: max-height 0.25s ease-out; /* don't change this! */
  324. }
  325.  
  326. .desc a {
  327. border-bottom:1px solid #eee; /* desc link border bottom color */
  328. }
  329.  
  330. .desc a:hover {
  331. border-bottom:1px solid #ede1cf; /* desc link border bottom hover color */
  332. }
  333.  
  334. .member:hover .desc {
  335. height:auto;
  336. display:-webkit-box;
  337. -webkit-line-clamp:99999999;
  338. -webkit-box-orient:vertical;
  339. min-height:88px;
  340. max-height:5000px;
  341. transition: max-height 3.5s ease-in;
  342. opacity:0.99;
  343. }
  344.  
  345. .url {
  346. text-align:center;
  347. margin-top:4px;
  348. }
  349.  
  350. .url a {
  351. font-size:11px;
  352. font-style:italic;
  353. letter-spacing:0.3px;
  354. border-top:1px solid #eee;
  355. border-bottom:1px solid #eee;
  356. display:inline-block;
  357. }
  358.  
  359. .url a:hover {
  360. color:#999;
  361. }
  362.  
  363. .url a:before, .url a:after {
  364. content:'';
  365. display:block;
  366. width:0;
  367. height:1px;
  368. background:#ede1cf; /* url hover border top and bottom color */
  369. transition:width .5s;
  370. }
  371.  
  372. .url a:before {
  373. margin-top:-1px;
  374. }
  375.  
  376. .url a:after {
  377. float:right;
  378. margin-bottom:-1px;
  379. }
  380.  
  381. .url a:hover:before, .url a:hover:after {
  382. width: 100%;
  383. }
  384.  
  385. /*-- media queries --*/
  386. @media only screen
  387. and (max-width: 960px){
  388. html, body {
  389. overflow-x: hidden;
  390. max-width:100vw;
  391. }
  392. body {
  393. position: relative;
  394. }
  395. }
  396.  
  397. @media only screen
  398. and (max-width : 600px){
  399. #members {
  400. width:100vw;
  401. }
  402. }
  403.  
  404. @media only screen
  405. and (max-width: 960px)
  406. and (min-width: 601px) {
  407. #members {
  408. width:calc((280px + 60px) * 2);
  409. }
  410. }
  411.  
  412. @media only screen
  413. and (min-width: 1700px) {
  414. #members {
  415. width:calc((280px + 60px) * 4);
  416. }
  417. }
  418.  
  419. @media only screen
  420. and (max-width : 600px) {
  421. .member:nth-last-child {
  422. margin-bottom:60px;
  423. }
  424. .member {
  425. float:none;
  426. position:relative;
  427. margin:60px auto;
  428. }
  429. }
  430.  
  431. @media only screen
  432. and (max-width : 960px) {
  433. .desc {
  434. overflow:auto;
  435. display: -webkit-box;
  436. -webkit-line-clamp:9999999999;
  437. -webkit-box-orient:vertical;
  438. }
  439. /* change height and max-height to the same value as you did above */
  440. .member:hover .desc {
  441. height:88px;
  442. max-height:88px;
  443. overflow:auto;
  444. }
  445. }
  446.  
  447. @media only screen
  448. and (max-width: 960px)
  449. and (min-width: 601px) {
  450. .member:nth-last-child {
  451. margin-bottom:30px;
  452. }
  453. }
  454.  
  455. @media only screen
  456. and (min-width: 961px) {
  457. .member:hover, .left img:hover, .desc:hover, .member h1:hover {
  458. cursor:help;
  459. }
  460. }
  461.  
  462.  
  463. </style>
  464. </head>
  465.  
  466. <body>
  467.  
  468. <!-- header start ------------------------------------------------------------->
  469. <div id="header">
  470. <img src="{PortraitURL-64}"/> <!-- replace {PortraitURL-64} w/ an image url or your default icon will show up -->
  471. <h1>members</h1>
  472.  
  473. <div class="hdesc">
  474. a description here perhaps
  475. </div>
  476.  
  477. <!-- header links -->
  478. <div class="links">
  479. <a href="/">index</a>
  480. <a href="/ask">ask</a>
  481. <a href="">alpha</a>
  482. <a href="">beta</a>
  483. <a href="">gamma</a>
  484. <a href="http://divinethemes.tumblr.com">credit</a>
  485. </div>
  486.  
  487. </div>
  488. <!-- header end --------------------------------------------------------------->
  489.  
  490.  
  491. <!-- member template :
  492.  
  493. <div class="member">
  494. <div class="left">
  495. <img src="icon image url here"/>
  496. <div class="url"><a href="url here">username/url</a></div>
  497. </div>
  498. <h1>name</h1>
  499.  
  500. <div class="desc">
  501. description here
  502. </div>
  503. </div>
  504.  
  505.  
  506. members start ----------------------------------------------------------------->
  507. <div id="members">
  508.  
  509.  
  510. <div class="member">
  511. <div class="left">
  512. <img src="icon image url here"/>
  513. <div class="url"><a href="url here">username/url</a></div>
  514. </div>
  515. <h1>name</h1>
  516.  
  517. <div class="desc">
  518. description here
  519. </div>
  520. </div>
  521.  
  522.  
  523. <div class="member">
  524. <div class="left">
  525. <img src="icon image url here"/>
  526. <div class="url"><a href="url here">username/url</a></div>
  527. </div>
  528. <h1>name</h1>
  529.  
  530. <div class="desc">
  531. description here
  532. </div>
  533. </div>
  534.  
  535.  
  536. <div class="member">
  537. <div class="left">
  538. <img src="icon image url here"/>
  539. <div class="url"><a href="url here">username/url</a></div>
  540. </div>
  541. <h1>name</h1>
  542.  
  543. <div class="desc">
  544. description here
  545. </div>
  546. </div>
  547.  
  548.  
  549. </div>
  550. <!-- members end -------------------------------------------------------------->
  551.  
  552.  
  553. <!-- credit // no touch you mortal -->
  554. <div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
  555. </div>
  556.  
  557.  
  558. </body>
  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!