API tools faq
paste
nicolas-sage

page 02: moongate navi

nicolas-sage
Jan 22nd, 2022 (edited)
2,347
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>navigate</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!---
  10.  
  11. moongate navi page by SAGE / https://demontimes.tumblr.com
  12.  
  13. - the places where you can edit are marked / search "edit here"
  14. - feel free to send me an ask if you have any questions!
  15.  
  16. CREDITS:
  17. - search tags tutorial by shythemes / https://shythemes.tumblr.com/post/138692201618/tutorial-search-tags
  18. - phosphor icons / https://phosphoricons.com/
  19. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  20. - google fonts / https://fonts.google.com/
  21.  
  22. --->
  23.  
  24. <!----- GOOGLE FONTS ---->
  25. <link rel="preconnect" href="https://fonts.googleapis.com">
  26. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  27. <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
  28.  
  29. <!---- ICONS ---->
  30. <script src="https://unpkg.com/phosphor-icons"></script>
  31.  
  32. <!---- TOOLTIPS ---->
  33. <script src="https://unpkg.com/popper.js@1"></script>
  34. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  35.  
  36. <!---- SEARCH BAR ----->
  37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  38.  
  39. <!----- CSS ----->
  40. <style type="text/css">
  41.  
  42. /*--- EDIT HERE ---*/
  43.  
  44. /*--- COLORS ---*/
  45. :root {
  46. --background: #f5f5f5;
  47. --content-background: #fff;
  48. --link: #8175ff;
  49. --accent: #6251d1;
  50. --title: #9791ff;
  51. --borders: #d8d8d8;
  52. --shadow: #ddd;
  53. --gradient-one: #8e94ec;
  54. --gradient-two: #bfc3ff;
  55. --gradient-text: #fff;
  56. --overlay: rgba(255,255,255,.1);
  57.  
  58. /*--- OTHER ---*/
  59. --body-font: 'Karla'; /*-- lmk if you want help changing the font! --*/
  60. --font-size: 15px;
  61. --border-radius: 5px;
  62. --text-shadow:0 0 10px; /*-- change to 0 if you don't want the glow --*/
  63. }
  64.  
  65. /*----- TOOLTIPS -----*/
  66.  
  67. .tippy-tooltip.custom-theme {
  68. background-color: var(--title);
  69. color: var(--content-background);
  70. font-weight: 700;
  71. text-align: center;
  72. text-transform: uppercase;
  73. letter-spacing: 0.2em;
  74. margin: 5px 0;
  75. font-size: 0.9em;
  76. border-radius:var(--border-radius);
  77. margin: 5px 0;
  78. }
  79.  
  80. /*---- SCROLLBAR ----- */
  81. ::-webkit-scrollbar {
  82. width: 10px;
  83. background-color: var(--background);
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb {
  87. background: linear-gradient(to bottom, var(--gradient-one), var(--gradient-two));
  88. border-radius: 5px;
  89. }
  90.  
  91. body {
  92. font-family: var(--body-font), sans-serif;
  93. font-size: var(--font-size);
  94. color: var(--text);
  95. background: var(--background);
  96. line-height: 160%;
  97. letter-spacing: 0.2px;
  98. word-wrap: break-word;
  99. }
  100.  
  101. a {
  102. color: var(--link);
  103. text-decoration:none;
  104. -webkit-transition: all 0.4s;
  105. -moz-transition: all 0.4s;
  106. -ms-transition: all 0.4s;
  107. -o-transition: all 0.4s;
  108. transition: all 0.4s;
  109. }
  110.  
  111. a:hover {
  112. color: var(--accent);
  113. -webkit-transition: all 0.4s;
  114. -moz-transition: all 0.4s;
  115. -ms-transition: all 0.4s;
  116. -o-transition: all 0.4s;
  117. transition: all 0.4s;
  118. }
  119.  
  120. p {margin-top: 1.2em;}
  121.  
  122. h2 {font-size:1.1em;letter-spacing:1px;margin:10px 0 -10px 0;color:var(--title);}
  123.  
  124. small {font-size: 0.9em;}
  125. big {font-size: 1.1em;}
  126. b, bold, strong {color: var(--title);}
  127.  
  128. blockquote {
  129. padding: 0 0 0 1em;
  130. border-left: 1px solid var(--borders);
  131. margin: 1em 0 1em 1em;
  132. }
  133.  
  134. li {list-style-type:circle;}
  135. li::marker {color:var(--accent);}
  136.  
  137. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  138. z-index: 999999999!important;
  139. opacity:0;
  140. -webkit-transition: all 0.5s;
  141. -moz-transition: all 0.5s;
  142. -ms-transition: all 0.5s;
  143. -o-transition: all 0.5s;
  144. transition: all 0.5s;
  145. }
  146.  
  147. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  148. opacity:1;
  149. -webkit-transition: all 0.5s;
  150. -moz-transition: all 0.5s;
  151. -ms-transition: all 0.5s;
  152. -o-transition: all 0.5s;
  153. transition: all 0.5s;
  154. }
  155.  
  156. /*----- TOP NAVIGATION -----*/
  157.  
  158. header {
  159. position: fixed;
  160. text-align:center;
  161. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  162. padding-top:1em;
  163. padding-bottom:.5em;
  164. width: 100%;
  165. height:40px;
  166. left: 0;
  167. right: 0;
  168. top: 0;
  169. z-index: 99999999;
  170. }
  171.  
  172. header nav {
  173. display:flex; justify-content:center;
  174. }
  175.  
  176. header nav a {margin:0 1em 0 1em;}
  177.  
  178. header nav i {
  179. color:var(--gradient-text);
  180. padding:5px;
  181. border-radius:100%;
  182. font-size:1.5em;
  183. text-shadow:var(--text-shadow);
  184. -webkit-transition: all 0.4s;
  185. -moz-transition: all 0.4s;
  186. -ms-transition: all 0.4s;
  187. -o-transition: all 0.4s;
  188. transition: all 0.4s;
  189. }
  190.  
  191. header nav i:hover {
  192. color:var(--accent);
  193. -webkit-transition: all 0.4s;
  194. -moz-transition: all 0.4s;
  195. -ms-transition: all 0.4s;
  196. -o-transition: all 0.4s;
  197. transition: all 0.4s;
  198. }
  199.  
  200. /*----- CONTENT -----*/
  201.  
  202. #content {
  203. position:relative;
  204. width:800px;
  205. margin:auto;
  206. }
  207.  
  208. .nav-wrap {margin:1em;}
  209. .nav-wrap:first-of-type {margin-top:100px;}
  210. .nav-wrap:last-of-type {margin-bottom:100px;}
  211.  
  212. .about {
  213. display:flex;
  214. justify-content:center;
  215. align-items:center;
  216. }
  217.  
  218. .about #text {
  219. width:50%;
  220. height:70px;
  221. padding:1em;
  222. display:flex;
  223. justify-content:center;
  224. align-items:center;
  225. flex-wrap:nowrap;
  226. background:linear-gradient(to top right, var(--gradient-one), var(--gradient-two));
  227. border-radius:var(--border-radius);
  228. box-shadow:1px 1px 5px 1px var(--shadow);
  229. }
  230.  
  231. .search .query {
  232. border: 0;
  233. outline: 0;
  234. padding:19.5px;
  235. font-size:15px;
  236. color:var(--gradient-text);
  237. background-color:rgba(255,255,255,.1);
  238. border-radius:0 30px 30px 0;
  239. }
  240.  
  241. ::-webkit-input-placeholder {color: inherit;}
  242. :-moz-placeholder {color: inherit; opacity:1;}
  243. ::-moz-placeholder {color: inherit; opacity:1;}
  244. :-ms-input-placeholder {color: inherit;}
  245.  
  246. input:focus::-webkit-input-placeholder {color: transparent;}
  247. input:focus:-moz-placeholder {color: transparent;}
  248. input:focus::-moz-placeholder {color: transparent;}
  249. input:focus:-ms-input-placeholder { color: transparent;}
  250.  
  251. .about #text i {
  252. font-size:22px;
  253. padding:17px;
  254. text-shadow:var(--text-shadow);
  255. border-radius:30px 0 0 30px;
  256. background:rgba(255,255,255,.1);
  257. color:var(--accent);
  258. }
  259.  
  260. .about #abt-img {
  261. width:50%;
  262. height:70px;
  263. padding:1em;
  264. margin-right:1em;
  265. background:var(--content-background);
  266. border-radius:var(--border-radius);
  267. display:flex;
  268. flex-wrap:nowrap;
  269. justify-content:flex-start;
  270. align-items:center;
  271. box-shadow:1px 1px 5px 1px var(--shadow);
  272. }
  273.  
  274. #abt-img img{
  275. width:70px;
  276. height:70px;
  277. object-fit:cover;
  278. border-radius:100%;
  279. padding:4px;
  280. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  281. }
  282.  
  283. #abt-img .txt {
  284. margin-left:1em;
  285. }
  286.  
  287. #abt-img li {
  288. color:var(--accent);
  289. list-style-type:none;
  290. }
  291.  
  292. #abt-img li b {
  293. font-weight:bold;
  294. color:var(--title);
  295. font-size:1.4em;
  296. }
  297.  
  298. .link-wrap {
  299. display:flex;
  300. justify-content:space-between;
  301. flex-wrap:wrap;
  302. }
  303.  
  304. .link-block-left, .link-block-right {
  305. width:47%;
  306. padding:.5em;
  307. margin-bottom:1em;
  308. border-radius:var(--border-radius);
  309. box-shadow:1px 1px 5px 1px var(--shadow);
  310. background:var(--content-background);
  311. }
  312.  
  313. .link-block-left {margin-right:1em;}
  314.  
  315. .link-block-left a, .link-block-right a {
  316. display: inline-block;
  317. position: relative;
  318. border-bottom:2px solid var(--borders);
  319. }
  320.  
  321. .link-block-left a:after, .link-block-right a:after {
  322. content: '';
  323. position: absolute;
  324. width: 100%;
  325. transform: scaleX(0);
  326. height: 2px;
  327. bottom: -2px;
  328. left: 0;
  329. transform-origin: bottom right;
  330. transition: transform 0.25s ease-out;
  331. background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  332. }
  333.  
  334. .link-block-left a:hover:after, .link-block-right a:hover:after {
  335. transform: scaleX(1);
  336. transform-origin: bottom left;
  337. }
  338.  
  339. .link-block-left .title, .link-block-right .title {
  340. margin:.5em;
  341. font-weight:bold;
  342. font-size:1.4em;
  343. text-align:center;
  344. color:var(--title);
  345. }
  346.  
  347. .link-block-left .subtitle, .link-block-right .subtitle {
  348. display:inline-block;
  349. margin-left:1em;
  350. margin-top:.5em;
  351. font-weight:bold;
  352. font-size:1.2em;
  353. text-align:left;
  354. color:var(--accent);
  355. }
  356.  
  357. .link {
  358. display:flex; justify-content:flex-start; flex-wrap:wrap;
  359. margin:1em;
  360. }
  361.  
  362. .link a {
  363. width:auto;
  364. margin:.5em;
  365. letter-spacing:.1em;
  366. color:var(--link);
  367. }
  368.  
  369. .link a:hover {color:var(--accent);}
  370.  
  371. /*--- RESPONSIVENESS ---*/
  372.  
  373. @media only screen and (max-width: 1100px) {
  374. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  375. }
  376.  
  377. @media only screen and (max-width: 850px) {
  378.  
  379. #content {margin:100px auto; width:90%;}
  380.  
  381. .about {justify-content:center; flex-wrap:wrap;}
  382. .about #abt-img {width:100%; margin-bottom:1em; height:auto; margin-right:0;justify-content:center;}
  383. .about #text {width:100%; height:auto;}
  384.  
  385. .link-block-left, .link-block-right {width:100%; margin:0 0 1em 0;}
  386.  
  387. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  388.  
  389. }
  390.  
  391. @media only screen and (max-width:450px) {
  392.  
  393. #content {width:100%;}
  394. .about #text {display:none;}
  395.  
  396. }
  397.  
  398. </style>
  399. </head>
  400. <body>
  401.  
  402. <!---- EDIT HERE ---->
  403.  
  404. <!---- HEADER ---->
  405. <header>
  406. <nav>
  407. <a title="home" href="/"><i class="ph-house-fill"></i></a>
  408. <a title="contact" href="/ask"><i class="ph-chats-circle-fill"></i></a>
  409. <a title="link 1 title" href="/"><i class="ph-sparkle-fill"></i></a>
  410. <a title="link 2 title" href="/"><i class="ph-planet-fill"></i></a>
  411. <a title="link 3 title" href="/"><i class="ph-moon-stars-fill"></i></a>
  412. <!---- CREDIT: DO NOT TOUCH ---->
  413. <a title="page by sage" href="https://demontimes.tumblr.com/"><i class="ph-ghost-fill"></i></a>
  414. </nav>
  415. </header>
  416.  
  417. <!--- main content --->
  418. <div id="content">
  419.  
  420. <div class="nav-wrap">
  421. <div class="about">
  422. <!--- by default this section will show your blog's avatar & url, feel free to change it! --->
  423. <div id="abt-img">
  424. <img src="{portraiturl-128}">
  425. <div class="txt">
  426. <li><b>navigation</b></li>
  427. <li>@{name}</li>
  428. </div>
  429. </div>
  430.  
  431. <!--- the search box will not appear on mobile --->
  432. <div id="text">
  433. <i class="ph-magnifying-glass"></i>
  434. <form class="search" action="javascript:return false">
  435. <input type="text" class="query" placeholder="search tags">
  436. </form>
  437. </div>
  438. </div>
  439. </div>
  440.  
  441. <div class="nav-wrap">
  442. <div class="link-wrap">
  443. <!---
  444.  
  445. put all your links/tags below!
  446. - if you add more link sections make sure you alternate "link-block-left" and "link-block-right"
  447. - if you add subtitles make sure they are **outside** the <div class="link"></div> blocks
  448. - feel free to send me an ask if you have questions!
  449.  
  450. --->
  451. <div class="link-block-left">
  452. <div class="title">title</div>
  453. <div class="link">
  454. <a href="/">link one</a>
  455. <a href="/">link two</a>
  456. <a href="/">link three</a>
  457. <a href="/">link four</a>
  458. <a href="/">link five</a>
  459. </div>
  460. <div class="subtitle">subtitle</div>
  461. <div class="link">
  462. <a href="/">link one</a>
  463. <a href="/">link two</a>
  464. <a href="/">link three</a>
  465. <a href="/">link four</a>
  466. <a href="/">link five</a>
  467. </div>
  468. </div>
  469.  
  470. <div class="link-block-right">
  471. <div class="title">title</div>
  472. <div class="subtitle">subtitle</div>
  473. <div class="link">
  474. <a href="/">link one</a>
  475. <a href="/">link two</a>
  476. <a href="/">link three</a>
  477. <a href="/">link four</a>
  478. <a href="/">link five</a>
  479. </div>
  480. <div class="subtitle">subtitle</div>
  481. <div class="link">
  482. <a href="/">link one</a>
  483. <a href="/">link two</a>
  484. <a href="/">link three</a>
  485. </div>
  486. </div>
  487.  
  488. <div class="link-block-left">
  489. <div class="title">title</div>
  490. <div class="link">
  491. <a href="/">link one</a>
  492. <a href="/">link two</a>
  493. <a href="/">link three</a>
  494. <a href="/">link four</a>
  495. <a href="/">link five</a>
  496. </div>
  497. <div class="subtitle">subtitle</div>
  498. <div class="link">
  499. <a href="/">link one</a>
  500. <a href="/">link two</a>
  501. <a href="/">link three</a>
  502. <a href="/">link four</a>
  503. <a href="/">link five</a>
  504. </div>
  505. </div>
  506.  
  507. <div class="link-block-right">
  508. <div class="title">title</div>
  509. <div class="link">
  510. <a href="/">link one</a>
  511. <a href="/">link two</a>
  512. <a href="/">link three</a>
  513. <a href="/">link four</a>
  514. <a href="/">link five</a>
  515. </div>
  516. <div class="subtitle">subtitle</div>
  517. <div class="link">
  518. <a href="/">link one</a>
  519. <a href="/">link two</a>
  520. <a href="/">link three</a>
  521. <a href="/">link four</a>
  522. <a href="/">link five</a>
  523. </div>
  524. </div>
  525.  
  526. </div>
  527.  
  528. </div>
  529.  
  530. </div>
  531. </div>
  532.  
  533.  
  534. </div>
  535.  
  536.  
  537. <script>
  538.  
  539. // tooltips
  540.  
  541. tippy('[title]', {
  542. theme: 'custom',
  543. arrow: false,
  544. followCursor: true,
  545. delay: 100,
  546. placement: 'top',
  547. zIndex: 9999999999,
  548. maxWidth: 400,
  549.  
  550. content(reference) {
  551. const title = reference.getAttribute('title');
  552. reference.removeAttribute('title');
  553. return title;
  554. },
  555. });
  556.  
  557. // searchbar
  558.  
  559. $(document).ready(function(){
  560. $('.search').submit(function(event){
  561. var value = $('input:first').val();
  562. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  563. });
  564. });
  565.  
  566. </script>
  567.  
  568.  
  569. </body>
  570. </html>
  571.  
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!