API tools faq
paste
Advertisement
alydae

tags iii

alydae
Mar 26th, 2017 (edited)
12,849
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS III
  7. by alydae
  8.  
  9. released: march 26, 2017
  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. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>navigation</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  42. <script>
  43. $(window).load(function () {
  44. $('#content').masonry({
  45. itemSelector : ".box",
  46. });
  47. });
  48. </script>
  49.  
  50. <!-- custom font -->
  51.  
  52. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  53.  
  54.  
  55. <style type="text/css">
  56.  
  57. @keyframes fadein {
  58. from { opacity:0; }
  59. to { opacity:1; }
  60. }
  61.  
  62. @-moz-keyframes fadein {
  63. from { opacity:0; }
  64. to { opacity:1; }
  65. }
  66.  
  67. @-webkit-keyframes fadein {
  68. from { opacity:0; }
  69. to { opacity:1; }
  70. }
  71.  
  72. @-ms-keyframes fadein {
  73. from { opacity:0; }
  74. to { opacity:1; }
  75. }
  76.  
  77. @-o-keyframes fadein {
  78. from { opacity:0; }
  79. to { opacity:1; }
  80. }
  81.  
  82. /*-- selection --*/
  83.  
  84. ::-moz-selection { background:var(--accent); color:var(--title); }
  85. ::selection { background:var(--accent); color:var(--title); }
  86.  
  87. /*-- scrollbar --*/
  88.  
  89. ::-webkit-scrollbar {
  90. width:2px;
  91. height:2px;
  92. }
  93.  
  94. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  95.  
  96. /*-- tooltips --*/
  97.  
  98. #s-m-t-tooltip {
  99. color:var(--text);
  100. background-color:var(--accent);
  101. font-size:calc(var(--font-size) - 2px);
  102. font-family:'Open Sans', helvetica, sans-serif;
  103. letter-spacing:1px;
  104. text-transform:uppercase;
  105. text-align:center;
  106. position:absolute;
  107. padding:0px 5px 0px 5px;
  108. border:1px solid var(--borders);
  109. margin-top:30px;
  110. z-index:9999;
  111. }
  112.  
  113. /*-- tumblr controls --*/
  114.  
  115. .tmblr-iframe, .iframe-controls–desktop {
  116. display:none!important;
  117. }
  118.  
  119. /*-- change all variables here --*/
  120.  
  121. :root {
  122. --background:#fff;
  123. --accent:#fafafa;
  124. --text:#666;
  125. --links:#444;
  126. --links-hover:#bad1e7;
  127. --title:#222;
  128. --borders:#eee;
  129. --font-size:10px;
  130. }
  131.  
  132. /*-- general customisation --*/
  133.  
  134. body {
  135. color:var(--text);
  136. background-color:var(--background);
  137. font-style:normal;
  138. font-family:'Open Sans', helvetica, sans-serif;
  139. font-size:var(--font-size);
  140. font-weight:400;
  141. text-decoration:none;
  142. line-height:180%;
  143. -moz-osx-font-smoothing: grayscale;
  144. -webkit-font-smoothing: antialiased;
  145. font-smoothing: antialiased;
  146. -webkit-animation: fadein 1.5s;
  147. -moz-animation: fadein 1.5s;
  148. -o-animation: fadein 1.5s;
  149. animation: fadein 1.5s;
  150. }
  151.  
  152. a {
  153. text-decoration:none;
  154. color:var(--links);
  155. transition-duration: 0.6s;
  156. -moz-transition-duration: 0.6s;
  157. -webkit-transition-duration: 0.6s;
  158. -o-transition-duration: 0.6s
  159. }
  160.  
  161. a:hover {
  162. color:var(--links-hover);
  163. cursor:pointer;
  164. transition-duration: 0.6s;
  165. -moz-transition-duration: 0.6s;
  166. -webkit-transition-duration: 0.6s;
  167. -o-transition-duration: 0.6s
  168. }
  169.  
  170. b, strong { font-weight:700; color:var(--title); }
  171. i, em { font-style:italic; }
  172.  
  173. /*-- header --*/
  174.  
  175. #header {
  176. position:relative;
  177. background:var(--background);
  178. width:200px;
  179. margin:-30px auto;
  180. padding:15px;
  181. border-top:1px solid var(--borders);
  182. border-bottom:1px solid var(--borders);
  183. z-index:99;
  184. }
  185.  
  186. .icon {
  187. position:relative;
  188. margin-top:100px;
  189. margin-left:calc(50% - 150px);
  190. width:60px;
  191. height:60px;
  192. z-index:9999!important;
  193. }
  194.  
  195. .icon img { width:60px; height:60px; border-radius:100%; }
  196.  
  197. .title {
  198. text-align:center;
  199. text-transform:uppercase;
  200. font-size:calc(var(--font-size) + 4px);
  201. font-weight:700;
  202. letter-spacing:1px;
  203. color:var(--title);
  204. }
  205.  
  206. .links { margin-top:10px; text-align:center; }
  207.  
  208. .links a {
  209. display:inline;
  210. padding:5px;
  211. letter-spacing:0.5px;
  212. text-transform:uppercase;
  213. }
  214.  
  215. /*-- boxes --*/
  216.  
  217. #content {
  218. position:relative;
  219. margin:100px auto 100px auto;
  220. width:calc((275px + 30px + 2px) * 2);
  221. /* ((box width + 2*margin + 2*border) * number of columns) */
  222. }
  223.  
  224. .box {
  225. margin:15px;
  226. height:auto;
  227. width:275px; /* box width */
  228. float:left;
  229. background:var(--background);
  230. border:1px solid var(--background);
  231. }
  232.  
  233. .subtitle {
  234. float:left;
  235. margin:0px;
  236. width:60px;
  237. padding:10px 15px 10px 15px;
  238. text-align:center!important;
  239. }
  240.  
  241. .subtitle h1 {
  242. word-wrap:break-word;
  243. text-transform:uppercase;
  244. font-size:calc(var(--font-size) + 1px);
  245. font-weight:600;
  246. letter-spacing:1px;
  247. color:var(--title);
  248. }
  249.  
  250. .tags {
  251. margin-left:90px;
  252. width:140px;
  253. padding:15px 20px 15px 0px;
  254. border-left:1px solid var(--borders);
  255. }
  256.  
  257. .tcontent {
  258. direction:rtl;
  259. margin-left:-1px;
  260. padding-left:20px;
  261. overflow:scroll;
  262. }
  263.  
  264. .more {
  265. max-height:calc(18px * 10); /* 10 is the number of tags you want to show before scrolling down */
  266. }
  267.  
  268. .tags a:before { content:">"; margin-right:5px; }
  269. .tags a { display:block; direction:ltr; }
  270. .tags a:hover { margin-left:10px; }
  271.  
  272. /*-- credit - DO NOT TOUCH --*/
  273.  
  274. .credit a {
  275. font-size:10px;
  276. bottom:15px;
  277. right:20px;
  278. position:fixed;
  279. text-transform:uppercase;
  280. }
  281.  
  282. </style>
  283. </head>
  284.  
  285.  
  286. <body>
  287.  
  288. <div class="icon"><img src="{PortraitURL-128}"/></div>
  289. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  290.  
  291. <div id="header">
  292. <div class="title">navigation</div> <!-- title -->
  293. <div class="links">
  294. <!-- this is where your header links are. feel free to add more. -->
  295. <a href="/">index</a>
  296. <a href="/ask">message</a>
  297. <a href="/">link</a>
  298. <!-- do not remove this one!!! -->
  299. <a href="http://enchantedthemes.tumblr.com">credit</a>
  300. </div>
  301. </div>
  302.  
  303.  
  304. <div id="content">
  305.  
  306. <!-- INSTRUCTIONS ON CUSTOMISATION
  307.  
  308. template:
  309. <div class="box">
  310. <div class="subtitle"><h1>subtitle</h1></div>
  311. <div class="tags"><div class="tcontent">
  312. <a href="/tagged/">tag name</a>
  313. <a href="/tagged/">tag name</a>
  314. <a href="/tagged/">tag name</a>
  315. <a href="/tagged/">tag name</a>
  316. <a href="/tagged/">tag name</a>
  317. </div></div>
  318. </div>
  319.  
  320. if the number of tags in one box gets too long and you want it to scroll, add more inside <div class="tcontent"> so it becomes
  321. <div class="tcontent more">
  322. you can change the number of tags you want to be shown above.
  323.  
  324. -->
  325.  
  326.  
  327. <div class="box">
  328. <div class="subtitle"><h1>subtitle</h1></div>
  329. <div class="tags"><div class="tcontent">
  330. <a href="/tagged/">tag name</a>
  331. <a href="/tagged/">tag name</a>
  332. <a href="/tagged/">tag name</a>
  333. <a href="/tagged/">tag name</a>
  334. <a href="/tagged/">tag name</a>
  335. </div></div>
  336. </div>
  337.  
  338. <div class="box">
  339. <div class="subtitle"><h1>subtitle</h1></div>
  340. <div class="tags"><div class="tcontent">
  341. <a href="/tagged/">tag name</a>
  342. <a href="/tagged/">tag name</a>
  343. <a href="/tagged/">tag name</a>
  344. <a href="/tagged/">tag name</a>
  345. <a href="/tagged/">tag name</a>
  346. <a href="/tagged/">tag name</a>
  347. <a href="/tagged/">tag name</a>
  348. <a href="/tagged/">tag name</a>
  349. </div></div>
  350. </div>
  351.  
  352. <div class="box">
  353. <div class="subtitle"><h1>subtitle</h1></div>
  354. <div class="tags"><div class="tcontent">
  355. <a href="/tagged/">tag name</a>
  356. <a href="/tagged/">tag name</a>
  357. <a href="/tagged/">tag name</a>
  358. <a href="/tagged/">tag name</a>
  359. <a href="/tagged/">tag name</a>
  360. </div></div>
  361. </div>
  362.  
  363.  
  364. </div>
  365.  
  366.  
  367. <!-- credit - DO NOT TOUCH -->
  368.  
  369. <div class="credit">
  370. <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
  371. </div>
  372.  
  373.  
  374. </body>
  375. </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!