API tools faq
paste
Advertisement
seiche

page two: elderflower v.1

seiche
Aug 15th, 2019 (edited)
5,712
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.42 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.  
  9. <!---
  10.  
  11. THEME BY SEYCHE.TUMBLR.COM
  12.  
  13. CREDITS:
  14. -feather icons by Cole Bemis
  15. -search tags by shythemes
  16. -full list at seyche.tumblr.com/credits
  17.  
  18. --->
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=Overpass:400,400i,700,700i&display=swap" rel="stylesheet">
  21.  
  22. <script src="https://unpkg.com/feather-icons"></script>
  23.  
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  25.  
  26. <style type="text/css">
  27.  
  28. /*----- LAZYLOAD -----*/
  29.  
  30. @keyframes lazyload {
  31. 0% {opacity: 0;}
  32. 100% {opacity: 1;}
  33. }
  34.  
  35. @-webkit-keyframes lazyload {
  36. 0% {opacity: 0;}
  37. 100% {opacity: 1;}
  38. }
  39.  
  40. @-moz-keyframes lazyload {
  41. 0% {opacity: 0;}
  42. 100% {opacity: 1;}
  43. }
  44.  
  45. @-o-keyframes lazyload {
  46. 0% {opacity: 0;}
  47. 100% {opacity: 1;}
  48. }
  49.  
  50. /*----- BASIC DISPLAY OPTIONS
  51.  
  52. for a longer explanation on how to add/change emojis, scroll to the html
  53.  
  54. -----*/
  55.  
  56. /* change this to "visibility: hidden;" to hide the emojis in the tag boxes */
  57. .emoji {visibility: visible;}
  58.  
  59. /* change this to "visibility: hidden;" to hide the emoji in the sidebar */
  60. .titleemoji {visibility: visible;}
  61.  
  62. /*----- COLOURS -----*/
  63.  
  64. body {
  65. font-family: 'Overpass', sans-serif;
  66. font-size: 13px;
  67. color: #4f4f4f; /* text colour */
  68. background-color: #fff; /* background colour */
  69. line-height: 160%;
  70. letter-spacing: 0.2px;
  71. word-wrap: break-word;
  72. -webkit-animation: lazyload 2s;
  73. -moz-animation: lazyload 2s;
  74. -o-animation: lazyload 2s;
  75. animation: lazyload 2s;
  76. }
  77.  
  78. /* link colour */
  79. a {color: #9e9e9e;}
  80.  
  81. /* link hover colour */
  82. a:hover {color: #212121;}
  83.  
  84. /* tag hover colour */
  85. .links a::after {background-color: #212121;}
  86.  
  87. /* search text colour */
  88. .find input, .find input[type=text], input::-webkit-input-placeholder, input::-moz-placeholder, input:-moz-placeholder, input:-ms-input-placeholder {
  89. color: #4f4f4f;
  90. }
  91.  
  92. /* title colour */
  93. title, .title {color: #212121;}
  94.  
  95. /* border colour */
  96. #search, .links a, .dropdown {border-top: 1px solid #e0e0e0;}
  97. article {border: 1px solid #e0e0e0;}
  98. .emoji {border-left: 1px solid #e0e0e0;}
  99.  
  100. /* tags box background colour */
  101. article {background-color: #fff;}
  102.  
  103. /* tag box heading and dropdown box background colour */
  104. .title, .dropdown {background-color: #f5f5f5;}
  105.  
  106. /* emoji background colour */
  107. .emoji {background-color: #fafafa;}
  108.  
  109. /*----- RAINBOW TAG HOVER COLOURS:
  110.  
  111. this section gives each tag box a unique emoji background colour and tag hover colour. change the hex colours below to whichever shades and colours you want.
  112.  
  113. for an explanation of how to edit the colours (i.e. if you wanted to have the boxes alternate pink and blue, and get rid of the rest of the colours), scroll down to the html.
  114.  
  115. if you only want one link hover colour across all the tag boxes, delete everything in the section below.
  116.  
  117. -----*/
  118.  
  119. .yellow .emoji {background-color: #fffced;} /* emoji background colour */
  120. .yellow .links a:hover {color: #f0c000;} /* tag hover colour */
  121. .yellow .links a::after {background-color: #f0c000;} /* tag hover colour */
  122.  
  123. .pink .emoji {background-color: #ffe8ed;}
  124. .pink .links a:hover {color: #f21b46;}
  125. .pink .links a::after {background-color: #f21b46;}
  126.  
  127. .red .emoji {background-color: #ffebeb;}
  128. .red .links a:hover {color: #f44336;}
  129. .red .links a::after {background-color: #f44336;}
  130.  
  131. .purple .emoji {background-color: #f7f0ff;}
  132. .purple .links a:hover {color: #5d00ba;}
  133. .purple .links a::after {background-color: #5d00ba;}
  134.  
  135. .green .emoji {background-color: #ecf5e1;}
  136. .green .links a:hover {color: #8bc34a;}
  137. .green .links a::after {background-color: #8bc34a;}
  138.  
  139. .orange .emoji {background-color: #fff3e8;}
  140. .orange .links a:hover {color: #ed7300;}
  141. .orange .links a::after {background-color: #ed7300;}
  142.  
  143. .white .emoji {background-color: #fafafa;}
  144. .white .links a:hover {color: #dcdcdc;}
  145. .white .links a::after {background-color: #dcdcdc;}
  146.  
  147. .blue .emoji {background-color: #e6f7ff;}
  148. .blue .links a:hover {color: #20b3f7;}
  149. .blue .links a::after {background-color: #20b3f7;}
  150.  
  151. /*----- END OF RAINBOW TAG HOVER COLOURS -----*/
  152.  
  153.  
  154.  
  155. /*----- BASICS -----*/
  156.  
  157. a {
  158. text-decoration: none;
  159. -webkit-transition: all 0.3s;
  160. -moz-transition: all 0.3s;
  161. -ms-transition: all 0.3s;
  162. -o-transition: all 0.3s;
  163. transition: all 0.3s;
  164. }
  165.  
  166. a:hover {
  167. -webkit-transition: all 0.3s;
  168. -moz-transition: all 0.3s;
  169. -ms-transition: all 0.3s;
  170. -o-transition: all 0.3s;
  171. transition: all 0.3s;
  172. }
  173.  
  174. title, .title {
  175. text-transform: uppercase;
  176. letter-spacing: 1px;
  177. font-weight: bold;
  178. }
  179.  
  180. ::-webkit-scrollbar {
  181. width: 17px;
  182. height: 17px;
  183. background-color: inherit;
  184. }
  185.  
  186. ::-webkit-scrollbar-track {
  187. border: 8px solid #fafafa; /* background colour */
  188. background-color: #e0e0e0; /* scrollbar track colour */
  189. }
  190.  
  191. ::-webkit-scrollbar-thumb {
  192. border: 6px solid #fafafa; /* background colour */
  193. background-color: #e0e0e0; /* scrollbar colour */
  194. min-height: 24px;
  195. min-width: 24px;
  196. }
  197.  
  198. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  199.  
  200. #k {
  201. position: fixed;
  202. bottom: 30px;
  203. right: 30px;
  204. }
  205.  
  206. /*----- CONTENT CONTAINER: don't edit this please -----*/
  207.  
  208. #container {margin: 100px auto; width: calc(840px + 225px);}
  209.  
  210. /*----- SIDEBAR -----*/
  211.  
  212. #sidebar {width: 150px; position: fixed;}
  213.  
  214. #sidebar img {
  215. width: 45px;
  216. height: 45px;
  217. border-radius: 50%;
  218. display: block;
  219. position: absolute;
  220. margin: -15px 0 0 -65px;
  221. }
  222.  
  223. .titleemoji {
  224. font-size: 2em;
  225. position: absolute;
  226. margin-left: -2em;
  227. }
  228.  
  229. title {display: inline-block;}
  230.  
  231. #mainlinks {margin-top: 0.25em;}
  232. nav a {display: block;}
  233.  
  234. #search {margin-top: 1.5em; padding-top: 1.5em;}
  235. .find {display: inline-block; width: 150px;}
  236.  
  237. #search .feather {
  238. width: 14px;
  239. height: 14px;
  240. display: inline-block;
  241. vertical-align: middle;
  242. }
  243.  
  244. .find input {
  245. border: 0;
  246. outline: none;
  247. display: inline;
  248. background: inherit;
  249. margin: 0 0 0 1em;
  250. padding: 0;
  251. font-family: inherit;
  252. width: calc(150px - 2em - 14px);
  253. text-transform: uppercase;
  254. letter-spacing: 1px;
  255. font-size: 0.9em;
  256. }
  257.  
  258. /*----- TAGS BOXES -----*/
  259.  
  260. #columns {
  261. margin-left: 225px;
  262. width: 840px;
  263. column-count: 3;
  264. column-gap: 75px;
  265. }
  266.  
  267. article {
  268. width: 230px;
  269. display: inline-block;
  270. break-inside: avoid;
  271. margin-bottom: 75px;
  272. }
  273.  
  274. .title {font-size: 0.9em;}
  275.  
  276. .tagheading {padding: 15px; display: inline-block;}
  277. .emoji {float: right; padding: 15px;}
  278.  
  279. .links a {
  280. display: block;
  281. padding: 12px 15px;
  282. text-transform: lowercase;
  283. }
  284.  
  285. .links a::after {
  286. content: '';
  287. position: relative;
  288. display: block;
  289. height: 1px;
  290. width: 0;
  291. bottom: -13px;
  292. left: -15px;
  293. z-index: 5;
  294. -webkit-transition: all 0.6s;
  295. -moz-transition: all 0.6s;
  296. -ms-transition: all 0.6s;
  297. -o-transition: all 0.6s;
  298. transition: all 0.6s;
  299. }
  300.  
  301. .links a:hover::after {
  302. width: calc(100% + 30px);
  303. -webkit-transition: all 0.6s;
  304. -moz-transition: all 0.6s;
  305. -ms-transition: all 0.6s;
  306. -o-transition: all 0.6s;
  307. transition: all 0.6s;
  308. }
  309.  
  310. .dropbutton {cursor: help;}
  311. .dropdown {display: none; padding: 15px;}
  312. .dropdown a::after {display: none;}
  313.  
  314. .dropdown a {
  315. border-top: none;
  316. padding: 0;
  317. font-style: italic;
  318. }
  319.  
  320. .dropbutton .feather {
  321. float: right;
  322. display: inline-block;
  323. width: 16px;
  324. height: 16px;
  325. margin-top: 0.25em;
  326. vertical-align: middle;
  327. }
  328.  
  329. /*----- RESPONSIVE -----*/
  330.  
  331. @media only screen and (max-width: 1279px) {
  332.  
  333. #container {width: calc(535px + 225px);}
  334. #columns {column-count: 2; width: 535px;}
  335. }
  336.  
  337. @media only screen and (max-width: 899px) {
  338. #container {width: calc(230px + 225px);}
  339. #columns {column-count: 1; width: 230px;}
  340. }
  341.  
  342. @media only screen and (max-width: 599px) {
  343. #container {width: 230px;}
  344. #columns {margin: auto;}
  345.  
  346. #sidebar {
  347. position: relative;
  348. width: 230px;
  349. margin-bottom: 75px;
  350. }
  351.  
  352. nav a {display: inline; margin-right: 0.5em;}
  353.  
  354. #k {
  355. position: relative;
  356. margin: auto;
  357. text-align: center;
  358. left: calc(50vw - 0.5em);
  359. bottom: 50px;
  360. }
  361. }
  362.  
  363. </style>
  364. </head>
  365. <body>
  366.  
  367. <section id="container">
  368.  
  369. <!----- SIDEBAR ----->
  370.  
  371. <aside id="sidebar">
  372. <span class="titleemoji">🍓</span> <!-- change the emoji to whatever you want -->
  373. <title>navigation</title>
  374.  
  375. <nav id="mainlinks"> <!-- add more links here if you want to -->
  376. <a href="/">home</a>
  377. <a href="/ask">message</a>
  378. <a href="https://tumblr.com/dashboard">dashboard</a>
  379. </nav>
  380.  
  381. <!----- SEARCH BAR ----->
  382.  
  383. <nav id="search">
  384. <form action="/search" method="javascript:return false" class="find" name="sform">
  385. <i data-feather="search"></i></a>
  386. <input type="text" class="query" name="q" placeholder="search tags" value="{SearchQuery}" value autocomplete="off"/>
  387. </form>
  388. </nav>
  389.  
  390. </aside>
  391.  
  392. <!----- TAGS CONTAINER ----->
  393.  
  394. <section id="columns">
  395.  
  396. <!----- TAGS START HERE. INSTRUCTIONS ON EDITING THE HTML FOLLOW:
  397.  
  398. the basic structure for each box looks like this:
  399.  
  400. <article>
  401.  
  402. <div class="title">
  403. <div class="tagheading">heading</div>
  404. <span class="emoji">🍍</span>
  405. </div>
  406.  
  407. <div class="links">
  408. <a href="/tagged/name">tag name</a>
  409. <a href="/tagged/name">tag name</a>
  410. <a href="/tagged/name">tag name</a>
  411. <a href="/tagged/name">tag name</a>
  412. </div>
  413.  
  414. </article>
  415.  
  416.  
  417. ----- CHANGING/REMOVING EMOJIS: -----
  418.  
  419. to change the emojis, copy and paste the one you want into the code. just make sure that the one in the sidebar is wrapped with <div class="titleemoji"></div> and that the ones in the tag boxes are wrapped with <span class="emoji"></span>.
  420.  
  421. if you don't want the emojis, you can delete all the lines that look like "<span class="emoji">🍍</span>"
  422.  
  423.  
  424. ----- ADDING DROPDOWNS: -----
  425.  
  426. the basic structure of a dropdown looks like:
  427.  
  428. <a class="dropbutton">dropdown title <i data-feather="chevron-down"></i></a>
  429. <div class="dropdown">
  430. <a href="/">sub tag</a>
  431. <a href="/">sub tag</a>
  432. <a href="/">sub tag</a>
  433. </div>
  434.  
  435. so the basic structure of a box with dropdown tags looks like:
  436.  
  437. <article>
  438.  
  439. <div class="title">
  440. <div class="tagheading">heading</div>
  441. <span class="emoji">🍍</span>
  442. </div>
  443.  
  444. <div class="links">
  445. <a href="/tagged/name">tag name</a>
  446. <a href="/tagged/name">tag name</a>
  447. <a href="/tagged/name">tag name</a>
  448.  
  449. <a class="dropbutton">dropdown title <i data-feather="chevron-down"></i></a>
  450. <div class="dropdown">
  451. <a href="/">sub tag</a>
  452. <a href="/">sub tag</a>
  453. <a href="/">sub tag</a>
  454. </div>
  455.  
  456. <a href="/tagged/name">tag name</a>
  457. </div>
  458.  
  459. </article>
  460.  
  461. you can add dropdowns anywhere you want, just make sure that the dropdown title is wrapped with <a class="dropbutton><i data-feather="chevron-down"></i></a> and that the dropdown comes immediately after it and is wrapped with <div class="dropdown"></div>
  462.  
  463.  
  464. ----- GIVING EACH BOX A UNIQUE HOVER COLOUR AND EMOJI BACKGROUND COLOUR:
  465.  
  466. you just need to add "class="COLOURNAME" to <article></article> with whichever colour you choose so that it looks like:
  467.  
  468. <article class="pink">
  469. etc. etc....
  470. </article>
  471.  
  472. if you don't want this, you can remove all of the parts that say "class="COLOURNAME" from <article></article> or you can scroll up and delete the section i marked in the css.
  473.  
  474. ----->
  475.  
  476.  
  477. <!----- tags box one ----->
  478.  
  479. <article class="yellow">
  480.  
  481. <div class="title">
  482. <div class="tagheading">heading</div>
  483. <span class="emoji">🍍</span>
  484. </div>
  485.  
  486. <div class="links">
  487. <a href="/tagged/NAME">tag name</a>
  488. <a href="/tagged/NAME">tag name</a>
  489. <a href="/tagged/NAME">tag name</a>
  490. <a href="/tagged/NAME">tag name</a>
  491. </div>
  492.  
  493. </article>
  494.  
  495.  
  496. <!----- tags box two ----->
  497.  
  498. <article class="pink">
  499.  
  500. <div class="title">
  501. <div class="tagheading">heading</div>
  502. <span class="emoji">🍉</span>
  503. </div>
  504.  
  505. <div class="links">
  506. <a href="/tagged/NAME">tag name</a>
  507. <a href="/tagged/NAME">tag name</a>
  508. <a href="/tagged/NAME">tag name</a>
  509. <a href="/tagged/NAME">tag name</a>
  510. </div>
  511.  
  512. </article>
  513.  
  514.  
  515. <!----- tags box three ----->
  516.  
  517. <article class="red">
  518.  
  519. <div class="title">
  520. <div class="tagheading">heading</div>
  521. <span class="emoji">🍒</span>
  522. </div>
  523.  
  524. <div class="links">
  525. <a href="/tagged/NAME">tag name</a>
  526.  
  527. <a class="dropbutton">dropdown title <i data-feather="chevron-down"></i></a>
  528. <div class="dropdown">
  529. <a href="/tagged/NAME">sub tag</a>
  530. <a href="/tagged/NAME">sub tag</a>
  531. <a href="/tagged/NAME">sub tag</a>
  532. </div>
  533.  
  534. <a href="/tagged/NAME">tag name</a>
  535. </div>
  536.  
  537. </article>
  538.  
  539.  
  540. <!----- tags box four ----->
  541.  
  542. <article class="purple">
  543.  
  544. <div class="title">
  545. <div class="tagheading">heading</div>
  546. <span class="emoji">🍇</span>
  547. </div>
  548.  
  549. <div class="links">
  550. <a href="/tagged/NAME">tag name</a>
  551. <a href="/tagged/NAME">tag name</a>
  552. </div>
  553.  
  554. </article>
  555.  
  556.  
  557. <!----- tags box five ----->
  558.  
  559. <article class="green">
  560.  
  561. <div class="title">
  562. <div class="tagheading">heading</div>
  563. <span class="emoji">🥝</span>
  564. </div>
  565.  
  566. <div class="links">
  567. <a href="/tagged/NAME">tag name</a>
  568. <a href="/tagged/NAME">tag name</a>
  569.  
  570. <a class="dropbutton">dropdown title <i data-feather="chevron-down"></i></a>
  571. <div class="dropdown">
  572. <a href="/tagged/NAME">sub tag</a>
  573. <a href="/tagged/NAME">sub tag</a>
  574. </div>
  575.  
  576. </div>
  577. </article>
  578.  
  579.  
  580. <!----- tags box six ----->
  581.  
  582. <article class="orange">
  583.  
  584. <div class="title">
  585. <div class="tagheading">heading</div>
  586. <span class="emoji">🍊</span>
  587. </div>
  588.  
  589. <div class="links">
  590.  
  591. <a class="dropbutton">dropdown title <i data-feather="chevron-down"></i></a>
  592. <div class="dropdown">
  593. <a href="/tagged/NAME">sub tag</a>
  594. <a href="/tagged/NAME">sub tag</a>
  595. </div>
  596.  
  597. <a href="/tagged/NAME">tag name</a>
  598. <a href="/tagged/NAME">tag name</a>
  599. </div>
  600.  
  601. </article>
  602.  
  603.  
  604. <!----- tags box seven ----->
  605.  
  606. <article class="white">
  607.  
  608. <div class="title">
  609. <div class="tagheading">heading</div>
  610. <span class="emoji">🥥</span>
  611. </div>
  612.  
  613. <div class="links">
  614. <a href="/tagged/NAME">tag name</a>
  615. <a href="/tagged/NAME">tag name</a>
  616. </div>
  617.  
  618. </article>
  619.  
  620.  
  621. <!----- tags box eight ----->
  622.  
  623. <article class="blue">
  624.  
  625. <div class="title">
  626. <div class="tagheading">heading</div>
  627. <span class="emoji">🔵</span>
  628. </div>
  629.  
  630. <div class="links">
  631. <a href="/tagged/NAME">tag name</a>
  632. <a href="/tagged/NAME">tag name</a>
  633. <a href="/tagged/NAME">tag name</a>
  634. <a href="/tagged/NAME">tag name</a>
  635. </div>
  636.  
  637. </article>
  638.  
  639. <!----- DO NOT EDIT ANYTHING AFTER HERE ----->
  640.  
  641. </section>
  642.  
  643. </section>
  644.  
  645. <a href="https://seyche.tumblr.com" title="theme by seyche" id="k">&.</a>
  646.  
  647. <script type="text/javascript">
  648. jQuery(document).ready(function() {
  649. jQuery(".dropdown").hide();
  650. jQuery(".dropbutton").click(function()
  651. {
  652. jQuery(this).next(".dropdown").slideToggle(450);
  653. });});
  654.  
  655. feather.replace()
  656.  
  657. $(document).ready(function(){
  658. $('.find').submit(function(event){
  659. var value = $('input:first').val();
  660. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  661. });
  662. });
  663. </script>
  664.  
  665. </body>
  666. </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!