API tools faq
paste
Advertisement
alydae

tags i

alydae
Mar 26th, 2016 (edited)
19,563
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS I
  7. by alydae
  8.  
  9. released: march 26, 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. please read the customisation guide to edit this page!
  17. http://enchantedthemes.tumblr.com/tags1/editing
  18.  
  19. thank you for using!!!
  20.  
  21. -->
  22.  
  23. <title>navigation</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.8.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="jquery.collapse.js"></script>
  45.  
  46. <!-- drop down script - tutorial by @acuite -->
  47.  
  48. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  49. <script>
  50. $(document).ready(function(){
  51. $(".droptags").hide();
  52. $(".droptitle").click(function(){
  53. $(this).next(".droptags").slideToggle('fast');
  54. }); });
  55. </script>
  56.  
  57. <!-- custom font -->
  58.  
  59. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  60.  
  61. <script src="https://kit.fontawesome.com/4fe045a39a.js" crossorigin="anonymous"></script>
  62.  
  63.  
  64. <style type="text/css">
  65.  
  66. @keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-moz-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. @-webkit-keyframes fadein {
  77. from { opacity:0; }
  78. to { opacity:1; }
  79. }
  80.  
  81. @-ms-keyframes fadein {
  82. from { opacity:0; }
  83. to { opacity:1; }
  84. }
  85.  
  86. @-o-keyframes fadein {
  87. from { opacity:0; }
  88. to { opacity:1; }
  89. }
  90.  
  91. /*-- selection --*/
  92.  
  93. ::-moz-selection { background:var(--accent); color:var(--title); }
  94. ::selection { background:var(--accent); color:var(--title); }
  95.  
  96. /*-- scrollbar --*/
  97.  
  98. ::-webkit-scrollbar {
  99. width:1px;
  100. height:8px;
  101. }
  102.  
  103. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  104.  
  105. /*-- tooltips --*/
  106.  
  107. #s-m-t-tooltip {
  108. color:var(--text);
  109. background-color:var(--background);
  110. font-size:calc(var(--font-size) - 2px);
  111. font-family:'Open Sans', helvetica, sans-serif;
  112. letter-spacing:1px;
  113. text-transform:uppercase;
  114. text-align:center;
  115. position:absolute;
  116. padding:0px 5px 0px 5px;
  117. margin-top:30px;
  118. border:1px solid var(--borders);
  119. z-index:9999;
  120. }
  121.  
  122. /*-- tumblr controls --*/
  123.  
  124. .tmblr-iframe, .iframe-controls–desktop {
  125. display:none!important;
  126. }
  127.  
  128. /*-- change all variables here --*/
  129.  
  130. :root {
  131. --background:#fff;
  132. --accent:#fafafa;
  133. --text:#666;
  134. --links:#444;
  135. --links-hover:#bad1e7;
  136. --title:#222;
  137. --borders:#eee;
  138. --font-size:10px;
  139. }
  140.  
  141. /*-- general customisation --*/
  142.  
  143. body {
  144. color:var(--text);
  145. background-color:var(--accent);
  146. font-style:normal;
  147. font-family:'Open Sans', helvetica, sans-serif;
  148. font-size:var(--font-size);
  149. font-weight:400;
  150. text-decoration:none;
  151. line-height:180%;
  152. height:100vh;
  153. -moz-osx-font-smoothing:grayscale;
  154. -webkit-font-smoothing:antialiased;
  155. font-smoothing:antialiased;
  156. -webkit-animation: fadein 1.5s;
  157. -moz-animation: fadein 1.5s;
  158. -o-animation: fadein 1.5s;
  159. animation: fadein 1.5s;
  160. }
  161.  
  162. a, .droptitle {
  163. text-transform:lowercase;
  164. text-decoration:none;
  165. color:var(--links);
  166. transition-duration: 0.6s;
  167. -moz-transition-duration: 0.6s;
  168. -webkit-transition-duration: 0.6s;
  169. -o-transition-duration: 0.6s
  170. }
  171.  
  172. a:hover, .droptitle:hover {
  173. color:var(--links-hover);
  174. cursor:pointer;
  175. transition-duration: 0.6s;
  176. -moz-transition-duration: 0.6s;
  177. -webkit-transition-duration: 0.6s;
  178. -o-transition-duration: 0.6s
  179. }
  180.  
  181. /*-- header --*/
  182.  
  183. #header {
  184. padding:20px 15px 20px 15px;
  185. position:relative;
  186. width:calc((177px * 3 + 50px * 2) - 35px);
  187. /* (box width+borders * number of columns + margin * number of columns-1) - 35px */
  188. margin:100px auto 25px;
  189. background:var(--background);
  190. border:1px solid var(--borders);
  191. }
  192.  
  193. .title {
  194. color:var(--title);
  195. text-transform:uppercase!important;
  196. text-align:left;
  197. font-weight:bold;
  198. font-size:calc(var(--font-size) + 2px);
  199. letter-spacing:1px;
  200. line-height:100%;
  201. }
  202.  
  203. .links {
  204. float:right;
  205. position:relative;
  206. margin-top:-15px;
  207. }
  208.  
  209. .links a { margin-left:10px; }
  210.  
  211. /*-- tags --*/
  212.  
  213. #main {
  214. position:relative;
  215. margin:auto;
  216. width:calc(177px * 3 + 50px * 2);
  217. /* (box width+borders * number of columns + margin * number of columns-1) - 30px */
  218. }
  219.  
  220. .column {
  221. position:relative;
  222. float:left;
  223. margin-bottom:100px;
  224. margin-right:50px;
  225. border:1px solid transparent;
  226. }
  227.  
  228. .column:last-of-type { margin-right:0!important; }
  229.  
  230. .box { width:175px; margin-bottom:40px; }
  231. .box:last-of-type { margin-bottom:0!important; }
  232.  
  233. .box h1 {
  234. color:var(--title);
  235. font-size:calc(var(--font-size) + 1px)!important;
  236. font-weight:700;
  237. text-transform:uppercase;
  238. text-align:center;
  239. letter-spacing:0.5px;
  240. background:var(--background);
  241. padding:10px;
  242. border:1px solid var(--borders);
  243. margin-top:50px;
  244. }
  245.  
  246. .tags {
  247. margin-top:5px;
  248. padding:10px 15px 10px 15px;
  249. background:var(--background);
  250. border:1px solid var(--borders);
  251. }
  252.  
  253. .tags a, .droptitle {
  254. padding-bottom:7.5px;
  255. display:block;
  256. }
  257.  
  258. .tags a:hover, .droptitle:hover { margin-left:10px; }
  259. .tags a:last-of-type { padding-bottom:0px; }
  260.  
  261. .droptitle i { margin-right:10px; }
  262.  
  263. .droptags {
  264. padding-left:15px;
  265. text-transform:lowercase;
  266. max-height:150px; /* height of dropdown tags */
  267. overflow-y:scroll;
  268. }
  269.  
  270. .droptags a { line-height:130%; }
  271. .droptags a:last-of-type { padding-bottom:7.5px; }
  272.  
  273. /*-- credit - DO NOT TOUCH --*/
  274.  
  275. .credit a {
  276. font-size:10px;
  277. bottom:15px;
  278. right:20px;
  279. position:fixed;
  280. text-transform:uppercase;
  281. }
  282.  
  283. </style>
  284. </head>
  285.  
  286.  
  287. <body>
  288.  
  289. <div id="header">
  290. <div class="title">navigation</div> <!-- title -->
  291. <div class="links">
  292. <!-- this is where your header links are. feel free to add more. -->
  293. <a href="/">index</a>
  294. <a href="/ask">message</a>
  295. <a href="/">link</a>
  296. <!-- do not remove this one!!! -->
  297. <a href="https://enchantedthemes.tumblr.com">credit</a>
  298. </div>
  299. </div>
  300.  
  301.  
  302. <div id="main">
  303.  
  304. <!-- INSTRUCTIONS ON CUSTOMISATION
  305.  
  306. this page is structured into columns, tag boxes and then dropdown tags. there is a separate page to explain how to edit it at
  307. http://enchantedthemes.tumblr.com/tags1/editing
  308.  
  309. however, the templates that are needed for new sections have been included below.
  310.  
  311. TEMPLATE FOR NEW BOXES:
  312.  
  313. <div class="box">
  314. <h1>title here</h1>
  315.  
  316. <div class="tags">
  317.  
  318. <a href="/tagged/">tag title</a>
  319. <a href="/tagged/">tag title</a>
  320. <a href="/tagged/">tag title</a>
  321.  
  322. </div>
  323. </div>
  324.  
  325. TEMPLATE FOR DROPDOWN TAGS (this goes inside the boxes):
  326.  
  327. <div class="droptitle"><i class="fas fa-angle-down"></i>tag title</div>
  328. <div class="droptags">
  329. <a href="/tagged/">subtag</a>
  330. <a href="/tagged/">subtag</a>
  331. <a href="/tagged/">subtag</a>
  332. </div>
  333.  
  334. -->
  335.  
  336.  
  337. <!-- column one start -->
  338. <div class="column">
  339.  
  340. <!-- box one start -->
  341. <div class="box">
  342. <h1>title here</h1>
  343.  
  344. <div class="tags">
  345.  
  346. <div class="droptitle"><i class="fas fa-angle-down"></i>tag title</div>
  347. <div class="droptags">
  348. <a href="/tagged/">subtag</a>
  349. <a href="/tagged/">subtag</a>
  350. <a href="/tagged/">subtag</a>
  351. </div>
  352.  
  353. <div class="droptitle"><i class="fas fa-angle-down"></i>tag title</div>
  354. <div class="droptags">
  355. <a href="/tagged/">subtag</a>
  356. <a href="/tagged/">subtag</a>
  357. <a href="/tagged/">subtag</a>
  358. </div>
  359.  
  360. <div class="droptitle"><i class="fas fa-angle-down"></i>tag title</div>
  361. <div class="droptags">
  362. <a href="/tagged/">subtag</a>
  363. <a href="/tagged/">subtag</a>
  364. <a href="/tagged/">subtag</a>
  365. </div>
  366.  
  367. <a href="/tagged/">tag title</a>
  368. <a href="/tagged/">tag title</a>
  369. <a href="/tagged/">tag title</a>
  370.  
  371. </div>
  372. </div>
  373. <!-- box one end -->
  374.  
  375. <!-- box two start -->
  376. <div class="box">
  377. <h1>title here</h1>
  378.  
  379. <div class="tags">
  380.  
  381. <a href="/tagged/">tag title</a>
  382. <a href="/tagged/">tag title</a>
  383. <a href="/tagged/">tag title</a>
  384.  
  385. </div>
  386. </div>
  387. <!-- box two end -->
  388.  
  389. </div>
  390. <!-- column one end -->
  391.  
  392.  
  393. <!-- column two start -->
  394. <div class="column">
  395.  
  396. <!-- box one start -->
  397. <div class="box">
  398. <h1>title here</h1>
  399.  
  400. <div class="tags">
  401.  
  402. <a href="/tagged/">tag title</a>
  403. <a href="/tagged/">tag title</a>
  404. <a href="/tagged/">tag title</a>
  405.  
  406. </div>
  407. </div>
  408. <!-- box one end -->
  409.  
  410. <!-- box two start -->
  411. <div class="box">
  412. <h1>title here</h1>
  413.  
  414. <div class="tags">
  415.  
  416. <div class="droptitle"><i class="fas fa-angle-down"></i>tag title</div>
  417. <div class="droptags">
  418. <a href="/tagged/">subtag</a>
  419. <a href="/tagged/">subtag</a>
  420. <a href="/tagged/">subtag</a>
  421. </div>
  422.  
  423. <a href="/tagged/">tag title</a>
  424. <a href="/tagged/">tag title</a>
  425. <a href="/tagged/">tag title</a>
  426.  
  427. </div>
  428. </div>
  429. <!-- box two end -->
  430.  
  431. </div>
  432. <!-- column two end -->
  433.  
  434.  
  435. <!-- column three start -->
  436. <div class="column">
  437.  
  438. <!-- box one start -->
  439. <div class="box">
  440. <h1>title here</h1>
  441.  
  442. <div class="tags">
  443.  
  444. <a href="/tagged/">tag title</a>
  445. <a href="/tagged/">tag title</a>
  446. <a href="/tagged/">tag title</a>
  447.  
  448. </div>
  449. </div>
  450. <!-- box one end -->
  451.  
  452. <!-- box two start -->
  453. <div class="box">
  454. <h1>title here</h1>
  455.  
  456. <div class="tags">
  457.  
  458. <a href="/tagged/">tag title</a>
  459. <a href="/tagged/">tag title</a>
  460. <a href="/tagged/">tag title</a>
  461.  
  462. </div>
  463. </div>
  464. <!-- box two end -->
  465.  
  466. <!-- box three start -->
  467. <div class="box">
  468. <h1>title here</h1>
  469.  
  470. <div class="tags">
  471.  
  472. <a href="/tagged/">tag title</a>
  473. <a href="/tagged/">tag title</a>
  474. <a href="/tagged/">tag title</a>
  475.  
  476. </div>
  477. </div>
  478. <!-- box three end -->
  479.  
  480. </div>
  481. <!-- column three end-->
  482.  
  483. </div>
  484.  
  485.  
  486. <!-- credit - DO NOT TOUCH -->
  487.  
  488. <div class="credit">
  489. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  490. </div>
  491.  
  492.  
  493. </body>
  494. </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!