API tools faq
paste
seiche

page five: narcissus

seiche
Jun 1st, 2020 (edited)
9,367
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title} / navigation</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!---
  11.  
  12. NARCISSUS NAVIGATION PAGE BY SEYCHE.TUMBLR.COM
  13.  
  14. CREDITS:
  15. -feather icons by Cole Bemis
  16. -tippy.js tooltips by atomiks
  17.  
  18. --->
  19.  
  20. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  21.  
  22. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  23.  
  24. <script src="https://unpkg.com/feather-icons"></script>
  25.  
  26. <style type="text/css">
  27.  
  28. /*----- START EDITING HERE -----*/
  29.  
  30. /*----- VARIABLES: EDIT THIS SECTION!!!! -----*/
  31.  
  32. :root {
  33.  
  34. /*----- colours: change the hex codes below to whatever you want -----*/
  35.  
  36. --background: #f0f0f0;
  37. --content-background: #fff;
  38. --text: #575757;
  39. --links: #8c8c8c;
  40. --title: #212121;
  41. --borders: #e0e0e0;
  42. --accent: #9fa8da;
  43. --gradient-1: #7986cb;
  44. --gradient-2: #e1bee7;
  45. --icon-background: #f5f6ff;
  46. --link-background: #f5f5f5;
  47.  
  48. /*----- font styling -----*/
  49.  
  50. --body-font: 'Public Sans', sans-serif;
  51. --font-size: 14px;
  52.  
  53. /*----- body styling -----*/
  54.  
  55. --content-corners: 10px;
  56. --drop-shadows: 1px 1px 3px var(--borders),
  57. -1px 1px 3px var(--borders); /*----- change this to "none" to get rid of the drop shadows -----*/
  58.  
  59. }
  60.  
  61. /*----- END VARIABLES: you don't need to edit the css after here -----*/
  62.  
  63. @keyframes lazyload {
  64. 0% {opacity: 0;}
  65. 100% {opacity: 1;}
  66. }
  67.  
  68. @-webkit-keyframes lazyload {
  69. 0% {opacity: 0;}
  70. 100% {opacity: 1;}
  71. }
  72.  
  73. @-moz-keyframes lazyload {
  74. 0% {opacity: 0;}
  75. 100% {opacity: 1;}
  76. }
  77.  
  78. @-o-keyframes lazyload {
  79. 0% {opacity: 0;}
  80. 100% {opacity: 1;}
  81. }
  82.  
  83. body {
  84. font-family: var(--body-font);
  85. font-size: var(--font-size);
  86. color: var(--text);
  87. background-color: var(--background);
  88. text-align: left;
  89. line-height: 160%;
  90. word-wrap: break-word;
  91. letter-spacing: 0.2px;
  92. margin: 0;
  93. padding: 0;
  94. overflow-x: hidden;
  95. -webkit-animation: lazyload 2s;
  96. -moz-animation: lazyload 2s;
  97. -o-animation: lazyload 2s;
  98. animation: lazyload 2s;
  99. }
  100.  
  101. a {
  102. color: var(--links);
  103. text-decoration: none;
  104. -webkit-transition: all 0.3s;
  105. -moz-transition: all 0.3s;
  106. -ms-transition: all 0.3s;
  107. -o-transition: all 0.3s;
  108. transition: all 0.3s;
  109. }
  110.  
  111. a:hover {
  112. color: var(--accent);
  113. -webkit-transition: all 0.3s;
  114. -moz-transition: all 0.3s;
  115. -ms-transition: all 0.3s;
  116. -o-transition: all 0.3s;
  117. transition: all 0.3s;
  118. }
  119.  
  120. p a {border-bottom: 2px solid var(--accent);}
  121.  
  122. blockquote {
  123. padding: 0 0 0 1.25em;
  124. border-left: 1px solid var(--borders);
  125. margin: 1.25em 0 1.25em 1.25em;
  126. }
  127.  
  128. h1, h2, h3, h4, h5, .title {
  129. color: var(--title);
  130. letter-spacing: 2px;
  131. line-height: 160%;
  132. font-weight: bold;
  133. text-transform: uppercase;
  134. }
  135.  
  136. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: var(--title);}
  137. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: var(--accent);}
  138. h1, .title {font-size: 1.3em;}
  139. h2 {font-size: 1.25em;}
  140. h3 {font-size: 1.15em;}
  141. h4 {font-size: 1.1em;}
  142. h5 {font-size: 1em;}
  143.  
  144. small {font-size: 0.9em;}
  145. big {font-size: 1.1em;}
  146. b, bold, strong {color: var(--title);}
  147. b a, bold a, strong a {color: var(--title);}
  148. b a:hover, bold a:hover, strong a:hover {color: var(--accent);}
  149.  
  150. ::-webkit-scrollbar {
  151. width: 17px;
  152. height: 17px;
  153. background-color: var(--background);
  154. }
  155.  
  156. ::-webkit-scrollbar-track {border: 8px solid var(--background); background-color: var(--borders);}
  157.  
  158. ::-webkit-scrollbar-thumb {
  159. border: 6px solid var(--background);
  160. background-color: var(--title);
  161. min-height: 24px;
  162. min-width: 24px;
  163. }
  164.  
  165. .tippy-tooltip.custom-theme {
  166. background-color: var(--title);
  167. color: var(--content-background);
  168. text-align: center;
  169. font-family: inherit;
  170. font-weight: normal;
  171. text-transform: uppercase;
  172. letter-spacing: 1px;
  173. border-radius: 3px;
  174. font-style: normal;
  175. padding: 0.25em;
  176. margin: 20px auto auto 10px;
  177. font-size: 0.8em;
  178. }
  179.  
  180. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  181.  
  182. #k {
  183. text-align: center;
  184. margin: 100px auto;
  185. }
  186.  
  187. /*----- SIDEBAR -----*/
  188.  
  189. #sidebar {
  190. width: 250px;
  191. text-align: center;
  192. height: 100%;
  193. position: fixed;
  194. top: 0;
  195. bottom: 0;
  196. left: 0;
  197. box-sizing: border-box;
  198. padding: 50px;
  199. box-shadow: var(--drop-shadows);
  200. background-color: var(--content-background);
  201. overflow: hidden;
  202. }
  203.  
  204. #sidebar .icon {
  205. width: 80px;
  206. height: 80px;
  207. padding: 5px;
  208. display: inline-block;
  209. }
  210.  
  211. #side-icon {
  212. background: linear-gradient(to bottom right, var(--gradient-1), var(--gradient-2));
  213. border-radius: 50%;
  214. padding: 5px;
  215. display: inline-block;
  216. margin-bottom: 1.25em;
  217. }
  218.  
  219. #status-icon {
  220. position: absolute;
  221. margin: -16px auto auto 30px;
  222. width: 20px;
  223. height: 20px;
  224. padding: 6px;
  225. line-height: 20px;
  226. }
  227.  
  228. #status-icon .feather {
  229. width: 20px;
  230. height: 20px;
  231. }
  232.  
  233. #sidebar .title {display: block;}
  234. #description {margin-top: 1.5em;}
  235.  
  236. #sidebar nav {
  237. margin-top: 2.25em;
  238. text-align: left;
  239. }
  240.  
  241. #sidebar nav li {list-style-type: none; margin-bottom: 0.75em;}
  242. .nav-txt {float: right;}
  243.  
  244. #sidebar nav a {
  245. width: 100%;
  246. display: block;
  247. border-radius: 1.75em;
  248. padding: 0.75em;
  249. box-sizing: border-box;
  250. background-color: var(--link-background);
  251. }
  252.  
  253. #sidebar nav a .feather {
  254. display: inline-block;
  255. vertical-align: middle;
  256. margin-right: 1em;
  257. width: 1.5em;
  258. height: 1.5em;
  259. color: var(--accent);
  260. }
  261.  
  262. #sidebar nav a:hover {
  263. background-color: var(--accent);
  264. color: var(--content-background);
  265. box-shadow: var(--drop-shadows);
  266. }
  267.  
  268. #sidebar nav a:hover .feather {
  269. color: var(--content-background);
  270. }
  271.  
  272. /*----- COMMON -----*/
  273.  
  274. .icon, article img {
  275. border-radius: 50%;
  276. display: inline-block;
  277. vertical-align: middle;
  278. background-color: var(--icon-background);
  279. }
  280.  
  281. .icon-gradient {
  282. background: linear-gradient(to bottom right, var(--gradient-1), var(--gradient-2));
  283. border-radius: 50%;
  284. padding: 3px;
  285. display: inline-block;
  286. }
  287.  
  288. article:not(:first-of-type) .icon-gradient {margin-right: 16px;}
  289.  
  290. .ui-icon {
  291. position: absolute;
  292. background-color: var(--accent);
  293. border-radius: 50%;
  294. text-align: center;
  295. }
  296.  
  297. .ui-icon .feather {color: var(--content-background);}
  298.  
  299. a .feather {
  300. -webkit-transition: all 0.3s;
  301. -moz-transition: all 0.3s;
  302. -ms-transition: all 0.3s;
  303. -o-transition: all 0.3s;
  304. transition: all 0.3s;
  305. }
  306.  
  307. a:hover .feather {
  308. -webkit-transition: all 0.3s;
  309. -moz-transition: all 0.3s;
  310. -ms-transition: all 0.3s;
  311. -o-transition: all 0.3s;
  312. transition: all 0.3s;
  313. }
  314.  
  315. .upper {
  316. text-transform: uppercase;
  317. letter-spacing: 1px;
  318. font-size: 0.9em;
  319. }
  320.  
  321. .subtitle {
  322. text-transform: uppercase;
  323. letter-spacing: 1px;
  324. font-weight: bold;
  325. color: #212121;
  326. margin-bottom: 0.5em;
  327. }
  328.  
  329. /*----- CONTENT -----*/
  330.  
  331. #container {
  332. position: relative;
  333. width: calc(99vw - 250px);
  334. margin-left: 250px;
  335. }
  336.  
  337. article {
  338. width: 700px;
  339. background-color: var(--content-background);
  340. margin: 50px auto;
  341. position: relative;
  342. padding: 50px;
  343. box-sizing: border-box;
  344. border-radius: var(--content-corners);
  345. box-shadow: var(--drop-shadows);
  346. }
  347.  
  348. /*----- HEADER -----*/
  349.  
  350. #extra-header .icon {
  351. display: inline-block;
  352. vertical-align: middle;
  353. padding: 3px;
  354. width: 3.25em;
  355. height: 3.25em;
  356. }
  357.  
  358. .find svg {
  359. width: 1.5em;
  360. height: 1.5em;
  361. float: right;
  362. display: inline-block;
  363. text-align: right;
  364. color: var(--accent);
  365. }
  366.  
  367. .find {
  368. background-color: inherit;
  369. width: calc(100% - 6.75em);
  370. margin: auto auto auto 2em;
  371. border: 1px solid var(--borders);
  372. background-color: var(--link-background);
  373. border-radius: 2em;
  374. padding: 1em 1.5em;
  375. box-sizing: border-box;
  376. vertical-align: middle;
  377. display: inline-block;
  378. }
  379.  
  380. .find input {
  381. border: none;
  382. outline: none;
  383. display: inline-block;
  384. background: inherit;
  385. margin: 0;
  386. padding: 0;
  387. color: {color:text};
  388. width: calc(100% - 1.5em);
  389. font-family: inherit;
  390. font-size: inherit;
  391. }
  392.  
  393. .find input[type=text] {color: var(--text);}
  394. input::-webkit-input-placeholder {color: var(--text);}
  395. input::-moz-placeholder {color: var(--text);}
  396. input:-moz-placeholder {color: var(--text);}
  397. input:-ms-input-placeholder {color: var(--text);}
  398.  
  399. #header-nav {text-align: right; margin-top: 1.5em;}
  400. #header-nav a {margin-left: 1.5em; color: var(--accent);}
  401. #header-nav a .feather {width: 1.5em; height: 1.5em;}
  402. #header-nav a:hover .feather {color: var(--title);}
  403.  
  404. /*----- TAGS -----*/
  405.  
  406. article img {
  407. width: 40px;
  408. height: 40px;
  409. padding: 3px;
  410. display: inline-block;
  411. vertical-align: middle;
  412. }
  413.  
  414. article .ui-icon {
  415. width: 16px;
  416. height: 16px;
  417. padding: 6px;
  418. line-height: 16px;
  419. margin: -24px auto auto 26px;
  420. }
  421.  
  422. article .ui-icon .feather {
  423. width: 16px;
  424. height: 16px;
  425. }
  426.  
  427. article .title {
  428. display: inline-block;
  429. font-size: 1.25em;
  430. }
  431.  
  432. .links {
  433. margin-top: 1.25em;
  434. list-style-type: none;
  435. line-height: 250%;
  436. }
  437.  
  438. .links li {display: inline-block;}
  439.  
  440. article li::after {
  441. content: '';
  442. width: 6px;
  443. height: 6px;
  444. background-color: var(--accent);
  445. border-radius: 50%;
  446. margin: 0 1.5em 0.15em 1.5em;
  447. display: inline-block;
  448. vertical-align: middle;
  449. }
  450.  
  451. article li:last-of-type::after {display: none;}
  452.  
  453. article ul {margin: 0; padding: 0; display: inline-block;}
  454.  
  455. .dropbutton {cursor: help;}
  456.  
  457. .dropbutton .feather {
  458. width: 1.25em;
  459. height: 1.25em;
  460. margin-left: 0.5em;
  461. display: inline-block;
  462. vertical-align: middle;
  463. color: var(--accent);
  464. -webkit-transition: all 0.3s;
  465. -moz-transition: all 0.3s;
  466. -ms-transition: all 0.3s;
  467. -o-transition: all 0.3s;
  468. transition: all 0.3s;
  469. }
  470.  
  471. .upside .feather {
  472. -webkit-transform: rotate(180deg);
  473. -moz-transform: rotate(180deg);
  474. -ms-transform: rotate(180deg);
  475. -o-transform: rotate(180deg);
  476. transform: rotate(180deg);
  477. -webkit-transition: all 0.3s;
  478. -moz-transition: all 0.3s;
  479. -ms-transition: all 0.3s;
  480. -o-transition: all 0.3s;
  481. transition: all 0.3s;
  482. }
  483.  
  484. .dropdown {
  485. position: absolute;
  486. width: 150px;
  487. z-index: 2;
  488. background-color: var(--content-background);
  489. border-radius: var(--content-corners);
  490. box-shadow: var(--drop-shadows);
  491. overflow: hidden;
  492. margin-top: 0.5em;
  493. line-height: 160%;
  494. display: none;
  495. }
  496.  
  497. .dropdown a {
  498. border-bottom: 1px solid var(--borders);
  499. padding: 0.5em 0.75em;
  500. display: block;
  501. }
  502.  
  503. .dropdown a::after {display: none;}
  504.  
  505. .dropdown a:hover {
  506. background-color: var(--accent);
  507. color: var(--content-background);
  508. }
  509.  
  510. /*---- MOBILE HEADER -----*/
  511.  
  512. #mobile-header {
  513. position: fixed;
  514. z-index: 100;
  515. padding: 1.75em 2em;
  516. top: 0;
  517. left: 0;
  518. right: 0;
  519. box-sizing: border-box;
  520. box-shadow: var(--drop-shadows);
  521. background-color: var(--content-background);
  522. display: none;
  523. }
  524.  
  525. .menu-button {
  526. display: inline-block;
  527. cursor: help;
  528. vertical-align: middle;
  529. -webkit-transition: all 0.3s;
  530. -moz-transition: all 0.3s;
  531. -ms-transition: all 0.3s;
  532. -o-transition: all 0.3s;
  533. transition: all 0.3s;
  534. }
  535.  
  536. .menu-button .feather, .close a .feather {
  537. color: var(--content-background);
  538. width: 1.5em;
  539. height: 1.5em;
  540. background-color: var(--accent);
  541. border-radius: 50%;
  542. padding: 0.75em;
  543. -webkit-transition: all 0.3s;
  544. -moz-transition: all 0.3s;
  545. -ms-transition: all 0.3s;
  546. -o-transition: all 0.3s;
  547. transition: all 0.3s;
  548. }
  549.  
  550. .menu-button:hover .feather, .close a:hover .feather {
  551. background-color: var(--title);
  552. -webkit-transition: all 0.3s;
  553. -moz-transition: all 0.3s;
  554. -ms-transition: all 0.3s;
  555. -o-transition: all 0.3s;
  556. transition: all 0.3s;
  557. }
  558.  
  559. #mobile-header .subtitle {
  560. display: inline-block;
  561. font-size: 1.15em;
  562. margin-left: 1em;
  563. }
  564.  
  565. #mobile-flex {
  566. display: flex;
  567. justify-content: space-between;
  568. align-items: center;
  569. }
  570.  
  571. .mobile-controls a .feather {
  572. width: 1.75em;
  573. height: 1.75em;
  574. -webkit-transition: all 0s;
  575. -moz-transition: all 0s;
  576. -ms-transition: all 0s;
  577. -o-transition: all 0s;
  578. transition: all 0s;
  579. }
  580.  
  581. .mobile-controls a {margin-left: 1em;}
  582.  
  583. .close {
  584. display: none;
  585. text-align: right;
  586. margin-bottom: 1em;
  587. }
  588.  
  589. .close a {cursor: help;}
  590.  
  591. /*---- RESPONSIVENESS -----*/
  592.  
  593. @media only screen and (max-width: 1100px) {
  594. #mobile-header, .close {display: block;}
  595.  
  596. #sidebar {
  597. left: -250px;
  598. z-index: 9999;
  599. -webkit-transition: ease-in-out 0.7s;
  600. -moz-transition: ease-in-out 0.7s;
  601. -ms-transition: ease-in-out 0.7s;
  602. -o-transition: ease-in-out 0.7s;
  603. transition: ease-in-out 0.7s;
  604. }
  605.  
  606. #sidebar.show {left: 0;}
  607.  
  608. #container {
  609. width: 100%;
  610. margin: 150px auto 50px auto;
  611. }
  612. }
  613.  
  614. @media only screen and (max-width: 800px) {
  615. article {width: 90vw;}
  616. .dropdown {width: 120px;}
  617. }
  618.  
  619. @media only screen and (max-width: 500px) {
  620. article {
  621. width: 100vw;
  622. padding: 30px;
  623. border-radius: 0;
  624. }
  625.  
  626. #sidebar {width: 80vw; left: -80vw;}
  627. }
  628.  
  629. </style>
  630. </head>
  631.  
  632. <body>
  633.  
  634. <!----- HEADER FOR MOBILE LAYOUT: do not edit this section ----->
  635.  
  636. <header id="mobile-header">
  637. <div id="mobile-flex">
  638. <div id="mobile-left">
  639. <div class="menu-button" title="open menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div>
  640. <div class="subtitle">navigation</div>
  641. </div>
  642. <div class="mobile-controls">
  643. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
  644. <a href="https://www.tumblr.com/message/{Name}" title="message">
  645. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>
  646. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  647. </div>
  648. </div>
  649. </header>
  650.  
  651. <!----- ================================
  652.  
  653. SIDEBAR
  654.  
  655. ====================================== ----->
  656.  
  657. <aside id="sidebar">
  658.  
  659. <!--- mobile close button: don't touch --->
  660.  
  661. <div class="close"><a title="close menu"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></a></div>
  662.  
  663. <!----- START EDITING HERE ----->
  664.  
  665. <div id="side-icon">
  666.  
  667. <!--- by default, your blog icon shows up in the sidebar. to change it, replce {PortraitURL-128} below with the url of whatever image you want. --->
  668.  
  669. <img src="{PortraitURL-128}" class="icon"/>
  670. <div class="ui-icon" id="status-icon"><i data-feather="tag" aria-hidden="true"></i></div>
  671.  
  672. </div>
  673.  
  674. <!--- sidebar title --->
  675.  
  676. <div class="title">navigation</div>
  677.  
  678. <!--- sidebar description --->
  679.  
  680. <div id="description">Write a description here, if you'd like, or delete this if you don't want it.</div>
  681.  
  682. <!--- sidebar links: to change the icons, go to feathericons.com and change the name of the icon below to whatever icon you want --->
  683.  
  684. <nav class="upper">
  685.  
  686. <li><a href="/">
  687. <i data-feather="home"></i>
  688. <span class="nav-txt">home</span>
  689. </a></li>
  690. <li><a href="/ask">
  691. <i data-feather="mail"></i>
  692. <span class="nav-txt">message</span>
  693. </a></li>
  694. <li><a href="/archive">
  695. <i data-feather="grid"></i>
  696. <span class="nav-txt">archive</span>
  697. </a></li>
  698. <li><a href="/">
  699. <i data-feather="star"></i>
  700. <span class="nav-txt">one</span>
  701. </a></li>
  702.  
  703. </nav>
  704.  
  705. <!---
  706.  
  707. adding more sidebar links:
  708.  
  709. copy and paste this template:
  710.  
  711. <li><a href="/">
  712. <i data-feather="link"></i>
  713. <span class="nav-txt">link/span>
  714. </a></li>
  715.  
  716. and put it above "</nav>" in the space above. you can copy and paste as many times as you want,
  717.  
  718. --->
  719.  
  720. </aside>
  721.  
  722. <!----- ================================
  723.  
  724. END OF SIDEBAR
  725.  
  726. ====================================== ----->
  727.  
  728. <!----- MAIN CONTENT ----->
  729.  
  730. <section id="container">
  731.  
  732. <!----- ================================
  733.  
  734. HEADER
  735.  
  736. ====================================== ----->
  737.  
  738. <article id="extra-header">
  739.  
  740. <div class="icon-gradient">
  741.  
  742. <!--- this is your blog icon. to replace it, change {PortraitURL-128} to the url of the image you want. --->
  743.  
  744. <img src="{PortraitURL-128}" class="icon"/>
  745.  
  746. </div>
  747.  
  748. <!--- search bar --->
  749.  
  750. <form action="/search" method="get" class="find" name="sform">
  751. <input type="text" name="q" placeholder="Looking for something specific?" value="{SearchQuery}" value autocomplete="off"/>
  752. <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
  753. </form>
  754.  
  755. <!---
  756.  
  757. header nav: by default, the links below redirect to your archive filters. if you have dedicated tags for certain post types, replace the urls below with your own tag urls.
  758.  
  759. if you want to get rid of this section, delete everything between and including <nav id="header-nav"></nav>.
  760.  
  761. --->
  762.  
  763. <nav id="header-nav">
  764.  
  765. <a href="/archive/filter-by/text" title="text posts">
  766. <i data-feather="type"></i>
  767. </a>
  768.  
  769. <a href="/archive/filter-by/photo" title="photo posts">
  770. <i data-feather="image"></i>
  771. </a>
  772.  
  773. <a href="/archive/filter-by/quote" title="quote posts">
  774. <i data-feather="bookmark"></i>
  775. </a>
  776.  
  777. <a href="/archive/filter-by/video" title="video posts">
  778. <i data-feather="film"></i>
  779. </a>
  780.  
  781. <a href="/archive/filter-by/audio" title="audio posts">
  782. <i data-feather="music"></i>
  783. </a>
  784.  
  785. <a href="/archive/filter-by/chat" title="chat posts">
  786. <i data-feather="message-circle"></i>
  787. </a>
  788.  
  789. <a href="/archive/filter-by/ask" title="ask posts">
  790. <i data-feather="mail"></i>
  791. </a>
  792.  
  793. <a href="/archive/filter-by/link" title="link posts">
  794. <i data-feather="link"></i>
  795. </a>
  796.  
  797. </nav>
  798.  
  799. <!--- end of header nav --->
  800.  
  801. </article>
  802.  
  803. <!----- END OF HEADER ----->
  804.  
  805.  
  806. <!----- ================================
  807.  
  808. TAGS START HERE.
  809.  
  810. ====================================== ----->
  811.  
  812. <!---
  813.  
  814. ADDING TAG BOXES: copy and paste this template:
  815.  
  816. <article>
  817.  
  818. <div class="icon-gradient">
  819. <img src="https://via.placeholder.com/40x40.png"/>
  820. </div>
  821. <div class="ui-icon"><i data-feather="tv"></i></div>
  822.  
  823. <div class="title">heading</div>
  824.  
  825. <div class="links">
  826. <li><a href="/">link</a></li>
  827. <li><a href="/">link</a></li>
  828. </div>
  829.  
  830. </article>
  831.  
  832. when you paste it, MAKE SURE YOU DO NOT PASTE IT INTO ANOTHER TAG BOX.
  833.  
  834. ///////////////////////////////////////////////
  835.  
  836. ADDING LINKS:
  837.  
  838. to add new links, copy and paste this:
  839.  
  840. <li><a href="/">link</a></li>
  841.  
  842. as many times as you need.
  843.  
  844. ////////////////////////////////////////////////
  845.  
  846. ADDING DROPDOWNS: copy and paste this:
  847.  
  848. <li class="drop-wrap">
  849. <a class="dropbutton">dropdown title<i data-feather="chevron-down"></i></a>
  850. <div class="dropdown">
  851. <a href="/">dropdown link</a>
  852. </div>
  853. </li>
  854.  
  855. as many times as you need.
  856.  
  857. --->
  858.  
  859. <!----- ================================
  860.  
  861. TAG BOX ONE
  862.  
  863. ====================================== ----->
  864.  
  865. <article>
  866.  
  867. <!--- tag header icon: if you don't want this, delete it. --->
  868.  
  869. <div class="icon-gradient">
  870. <img src="https://via.placeholder.com/40x40.png"/>
  871. </div>
  872.  
  873. <!--- to change the icon below, go to feathericons.com and enter the name of the icon you want below. or, delete the line below to get rid of it. --->
  874.  
  875. <div class="ui-icon"><i data-feather="tv"></i></div>
  876.  
  877. <!--- tag box heading --->
  878.  
  879. <div class="title">heading</div>
  880.  
  881. <!---
  882.  
  883. start your tags here. make sure to wrap your link blocks in <div class="links"></div>
  884.  
  885. --->
  886.  
  887. <!--- link block one --->
  888.  
  889. <div class="links">
  890.  
  891. <li><a href="/">link</a></li>
  892.  
  893. <!--- dropdown one --->
  894.  
  895. <li class="drop-wrap">
  896. <a class="dropbutton">dropdown title<i data-feather="chevron-down"></i></a>
  897. <div class="dropdown">
  898. <a href="/">dropdown link</a>
  899. <a href="/">dropdown link</a>
  900. </div>
  901. </li>
  902.  
  903. <li><a href="/">link</a></li>
  904.  
  905. </div>
  906.  
  907. <!--- link block two --->
  908.  
  909. <div class="links">
  910.  
  911. <!--- subheading --->
  912.  
  913. <div class="subtitle">sub heading</div>
  914.  
  915. <li><a href="/">link</a></li>
  916. <li><a href="/">link</a></li>
  917.  
  918. </div>
  919.  
  920. </article>
  921.  
  922. <!----- ================================
  923.  
  924. END OF TAG BOX ONE
  925.  
  926. ====================================== ----->
  927.  
  928. <!----- ================================
  929.  
  930. START OF TAG BOX TWO
  931.  
  932. ====================================== ----->
  933.  
  934. <article>
  935.  
  936. <!--- tag header icon --->
  937.  
  938. <div class="icon-gradient">
  939. <img src="https://via.placeholder.com/40x40.png"/>
  940. </div>
  941. <div class="ui-icon"><i data-feather="map"></i></div>
  942.  
  943. <!--- tag box heading --->
  944.  
  945. <div class="title">heading</div>
  946.  
  947. <!--- link block --->
  948.  
  949. <div class="links">
  950.  
  951. <!--- dropdown two --->
  952.  
  953. <li class="drop-wrap">
  954. <a class="dropbutton">dropdown title<i data-feather="chevron-down"></i></a>
  955. <div class="dropdown">
  956. <a href="/">dropdown link</a>
  957. <a href="/">dropdown link</a>
  958. </div>
  959. </li>
  960.  
  961. <li><a href="/">link</a></li>
  962. <li><a href="/">link</a></li>
  963.  
  964. </div>
  965.  
  966. </article>
  967.  
  968. <!----- ================================
  969.  
  970. END OF TAG BOX TWO
  971.  
  972. ====================================== ----->
  973.  
  974. <!----- MAKE SURE YOU ADD ANY ADDITIONAL TAG BOXES ABOVE THIS LINE. STOP EDITING AFTER HERE AND DO NOT TOUCH ANY OF THE SCRIPTS BELOW. ----->
  975.  
  976. <div id="k" class="upper"><a href="https://seyche.tumblr.com/" title="narcissus">page by seyche</a></div>
  977.  
  978. </section>
  979.  
  980. <!----- TOOLTIPS ----->
  981.  
  982. <script src="https://unpkg.com/popper.js@1"></script>
  983. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  984.  
  985. <script>
  986.  
  987. $(document).ready(function() {
  988.  
  989. /// DROPDOWNS
  990.  
  991. $('.dropdown').hide();
  992. $('.dropbutton').click(function(event) {
  993. $(this).closest('.drop-wrap').find('.dropdown').slideToggle(500)
  994. event.preventDefault();
  995. $(this).toggleClass('upside', 500);
  996. });
  997.  
  998. /// SLIDE-IN MOBILE SIDEBAR
  999.  
  1000. $('.menu-button').click(function(){
  1001. $('#sidebar').addClass('show', 700);
  1002. });
  1003.  
  1004. $('.close').click(function(){
  1005. $('#sidebar').removeClass('show', 700);
  1006. });
  1007.  
  1008. /// TOOLTIPS
  1009.  
  1010. tippy('[title]', {
  1011. theme: 'custom',
  1012. arrow: false,
  1013. followCursor: true,
  1014. delay: 100,
  1015. placement: 'bottom-start',
  1016. zIndex: 9999999999,
  1017. maxWidth: 400,
  1018.  
  1019. content(reference) {
  1020. const title = reference.getAttribute('title');
  1021. reference.removeAttribute('title');
  1022. return title;
  1023. },
  1024. });
  1025. });
  1026.  
  1027. feather.replace()
  1028.  
  1029. </script>
  1030.  
  1031. </body>
  1032. </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!