Advertisement
mogimochi

Tagslist [02]:re Ranger

Oct 27th, 2017
1,256
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.21 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Tagslist [02]:re Ranger
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. ---------------------------------------------------------------------------
  16. Please look out for notes throughout the code
  17. to help you in customizing the page!!
  18. ---------------------------------------------------------------------------
  19.  
  20. ------------------------------------------------------------ VER 271017 -->
  21.  
  22. <title>Navigate the Wilderness</title>
  23. <!-------------------------------------------------------------------------
  24. You can edit the above 'Navigate the Wilderness' text to whatever you'd like to display on the browser tab of the page.
  25. -------------------------------------------------------------------------->
  26.  
  27. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  28. <link rel="shortcut icon" href="{Favicon}" />
  29.  
  30. <!-- SATURNTHMS' ICON FONT SCRIPT -->
  31. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  32.  
  33. <!-- SMOOTH SCROLLING SCRIPT -->
  34. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  35.  
  36. <!-- TOOLTIPS SCRIPT -->
  37. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  38. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("a[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:0,
  45. tip_fade_speed:300,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <!-- JQUERY -->
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  54. <script>
  55. $(document).ready(function(){
  56.  
  57. $(".btn-map").click(function(){
  58. $(".wp-cover").addClass("wp-coverage");
  59. $(".map-waypoints").addClass("show-map");
  60. $(".btn-map").addClass("hide-btn-map");
  61. $(".btn-map-hide").addClass("show-btn-map-hide");
  62. });
  63.  
  64. $(".btn-map-hide").click(function(){
  65. $(".wp-cover").removeClass("wp-coverage");
  66. $(".map-waypoints").removeClass("show-map");
  67. $(".btn-map").removeClass("hide-btn-map");
  68. $(".btn-map-hide").removeClass("show-btn-map-hide");
  69. });
  70.  
  71. $(".btn-files").click(function(){
  72. $(".btn-files-view").toggle();
  73. $(".btn-files-hide").toggle();
  74. $(".files").toggleClass("show-files");
  75. $(".files-chevron").toggleClass("show-chevron");
  76. });
  77.  
  78. });
  79.  
  80. $(function(){
  81. $window=$(window);
  82. $link=$("#scrollToTop");
  83. $link.click(function(){
  84. $("html, body").animate({scrollTop:0},"slow")});
  85. });
  86.  
  87. </script>
  88.  
  89. <!-- MASONRY SCRIPT -->
  90. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  91. <script type="text/javascript">
  92. $(window).load(function () {
  93. $('.files').masonry({
  94. itemSelector : ".tagblock",
  95. },
  96. function() { $('.files').masonry({ appendedContent: $(this) }); }
  97. );
  98. });
  99. </script>
  100.  
  101. <style type="text/css">
  102.  
  103. @font-face { font-family: "talldarkhandsome"; src: url('https://dl.dropboxusercontent.com/s/i8kug7l4k6qlzz7/talldark.ttf'); }
  104.  
  105. @font-face { font-family: "printclearly"; src: url('https://dl.dropboxusercontent.com/s/7aiumwmi01kuemw/PrintClearly.otf'); }
  106.  
  107. /* ---------------------------------------------------------------------------
  108.  
  109. These are the fonts for this page:
  110.  
  111. - 'Tall, Dark and Handsome' for headers
  112. https://www.dafont.com/tall-dark-and-hands.font
  113.  
  114. - 'Print Clearly' for the body text
  115. https://www.dafont.com/print-bv.font
  116.  
  117. ----------------------------------------------------------------------------*/
  118.  
  119. body {
  120. background-color: #2d112a; /** colour of the lower area for the navigation and tag blocks area **/
  121. background-attachment: fixed;
  122. margin: 0;
  123. word-wrap: break-word;
  124. }
  125.  
  126. a { text-decoration:none; }
  127.  
  128. iframe.tmblr-iframe {
  129. display: none!important;
  130. opacity: 0;
  131. }
  132.  
  133. #s-m-t-tooltip {
  134. background-color: #000; /** tooltips (hover title thing) background **/
  135. color: #ffffff; /** tooltips (hover title thing) text colour **/
  136. max-width: 300px;
  137. font-family: printclearly;
  138. font-size: 13px;
  139. text-transform: uppercase;
  140. letter-spacing: 1px;
  141. padding: 4px 6px 3px 6px;
  142. margin: 20px 0 0 20px;
  143. z-index: 100000000000000000000;
  144. }
  145.  
  146. ::-webkit-scrollbar {
  147. width: 7px;
  148. background-color: #2d112a; /** scrollbar background **/
  149. }
  150.  
  151. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  152. ::-webkit-scrollbar-thumb:vertical {
  153. width: 7px;
  154. background-color: #ff6c40; /** actual scrollbar colour **/
  155. }
  156.  
  157. #cred {font-size: 13px;color: #fff;background-color: #000;width: 22px;height: 22px;text-align: center;line-height: 25px;position: fixed;bottom: 10px;right: 10px;opacity: 0.4;border-radius: 3px;transition: 0.6s;}
  158. #cred:hover { opacity: 1; }
  159.  
  160. #headerbg {
  161. width: 100%;
  162. height: 280px;
  163. overflow: hidden;
  164. }
  165.  
  166. .headerimg {
  167. width: 100%;
  168. min-height: 280px;
  169. z-index: -2;
  170. }
  171.  
  172. .headertitle {
  173. width: 100%;
  174. background-color: #ffdcc8; /** header background colour **/
  175. color: #2d112a; /** header title colour **/
  176. font-family: talldarkhandsome;
  177. font-size: 40px;
  178. height: 140px;
  179. line-height: 140px;
  180. font-weight: 700;
  181. text-align: center;
  182. letter-spacing: 10px;
  183. }
  184.  
  185. .headerchoice {
  186. color: #e35228; /** navigation text colour (map/files option) **/
  187. font-family: printclearly;
  188. font-size: 26px;
  189. text-align: center;
  190. margin-top: 80px;
  191. width: 461px;
  192. }
  193.  
  194. .headerchoice a { color: #e35228; }
  195. /** navigation text colour (map/files option) **/
  196.  
  197. .btn-map-hide {
  198. width: 200px;
  199. text-align: right;
  200. float: left;
  201. margin-right: 30px;
  202. background-color: #2d112a; /** colour of the lower background **/
  203. cursor: pointer;
  204. padding-bottom: 4px;
  205. border-bottom: 1px solid transparent;
  206. transition: 0.2s;
  207. }
  208.  
  209. .show-btn-map-hide {
  210. z-index: 2;
  211. cursor: pointer;
  212. }
  213.  
  214. .btn-map {
  215. width: 200px;
  216. text-align: right;
  217. float: left;
  218. margin-right: 30px;
  219. background-color: #2d112a; /** colour of the lower background **/
  220. position: absolute;
  221. cursor: pointer;
  222. padding-bottom: 4px;
  223. border-bottom: 1px solid transparent;
  224. transition: 0.2s;
  225. }
  226.  
  227. .hide-btn-map {
  228. opacity: 0;
  229. z-index: -1;
  230. cursor: pointer;
  231. }
  232.  
  233. .btn-files {
  234. margin-left: 30px;
  235. float: left;
  236. width: 200px;
  237. text-align: left;
  238. padding-bottom: 4px;
  239. border-bottom: 1px solid transparent;
  240. cursor: pointer;
  241. transition: 0.2s;
  242. }
  243.  
  244. .btn-files:hover, .btn-map:hover, .btn-map-hide:hover {
  245. border-bottom: 1px solid #e35228;
  246. /** navigation text colour (map/files option) **/
  247. }
  248.  
  249. .choice-divider {
  250. height: 60px;
  251. width: 1px;
  252. float: left;
  253. background-color: #e35228; /** colour of the navigation slash **/
  254. transform: rotate(20deg);
  255. margin-top: -14px;
  256. }
  257.  
  258. .wp-cover {
  259. width: 100%;
  260. height: 280px;
  261. position: absolute;
  262. background-color: transparent;
  263. z-index: 1;
  264. }
  265.  
  266. .wp-coverage {display: none;}
  267.  
  268. .wp-wrapper {
  269. width: 100%;
  270. height: 280px;
  271. position: absolute;
  272. }
  273.  
  274. .map-waypoints {
  275. width: 40px;
  276. height: 280px;
  277. opacity: 0;
  278. margin-top: -10px;
  279. z-index: 0;
  280. position: relative;
  281. transition: 0.6s;
  282. }
  283.  
  284. .show-map {
  285. z-index: 1;
  286. opacity: 1;
  287. margin-top: 0px;
  288. transition: 0.6s;
  289. }
  290.  
  291. .waypoint-marker {
  292. position: absolute;
  293. }
  294.  
  295. .waypoint-inner {
  296. width: 16px;
  297. height: 16px;
  298. border-radius: 500px;
  299. }
  300.  
  301. /** --------------------------------------------------------------------------
  302.  
  303. W A Y P O I N T S
  304.  
  305. Each block styles one waypoint.
  306.  
  307. The first line (margin-top: _px; margin-left: _px;) may be edited to change the positions of the waypoint markers, from the top and from the left respectively. They are already centered to the middle by default. The default ones that come with the page are already positioned.
  308.  
  309. The next couple of lines are for editing the colour of the circles in the middle of the waypoints and the border around the circle.
  310.  
  311. Example of a typical block: (You can copy and paste this to style additional blocks you would like to add)
  312.  
  313. -----
  314.  
  315. #waypoint-08 { margin-top: 80px; margin-left: 0; }
  316. #waypoint-08 .waypoint-inner {
  317. background-color: #ffffff;
  318. border: 2px solid #000000;
  319. }
  320.  
  321. -------------------------------------------------------------------------- **/
  322.  
  323. #waypoint-01 { margin-top: 40px; margin-left: 0; }
  324. #waypoint-01 .waypoint-inner {
  325. background-color: #fe6c40;
  326. border: 2px solid #000000;
  327. }
  328.  
  329. #waypoint-02 { margin-top: 165px; margin-left: -215px; }
  330. #waypoint-02 .waypoint-inner {
  331. background-color: #530030;
  332. border: 2px solid #000000;
  333. }
  334.  
  335. #waypoint-03 { margin-top: 90px; margin-left: 250px; }
  336. #waypoint-03 .waypoint-inner {
  337. background-color: #ca283d;
  338. border: 2px solid #000000;
  339. }
  340.  
  341. #waypoint-04 { margin-top: 190px; margin-left: 40px; }
  342. #waypoint-04 .waypoint-inner {
  343. background-color: #2d112a;
  344. border: 2px solid #000000;
  345. }
  346.  
  347. #waypoint-05 { margin-top: 110px; margin-left: -110px; }
  348. #waypoint-05 .waypoint-inner {
  349. background-color: #ca283d;
  350. border: 2px solid #000000;
  351. }
  352.  
  353. #waypoint-06 { margin-top: 170px; margin-left: 340px; }
  354. #waypoint-06 .waypoint-inner {
  355. background-color: #530030;
  356. border: 2px solid #000000;
  357. }
  358.  
  359. #waypoint-07 { margin-top: 80px; margin-left: -340px; }
  360. #waypoint-07 .waypoint-inner {
  361. background-color: #7e0030;
  362. border: 2px solid #000000;
  363. }
  364.  
  365. /*------------------------------------------------------------------------ **/
  366.  
  367. .waypoint {
  368. padding: 6px;
  369. border-radius: 200px 200px 200px 0;
  370. transform: rotate(-45deg);
  371. background-color: rgba(255,255,255,0.7);
  372. transition: 0.6s;
  373. }
  374.  
  375. .waypoint:hover {
  376. margin-top: -5px;
  377. background-color: rgba(255,255,255,1);
  378. }
  379.  
  380. .btn-files-hide {
  381. display: none;
  382. }
  383.  
  384. .files-chevron {
  385. text-align: center;
  386. color: #ff7e4a; /** down chevron colour **/
  387. width: 600px;
  388. margin-top: 135px;
  389. font-size: 32px;
  390. opacity: 0;
  391. height: 30px;
  392. transition: 0.6s;
  393. }
  394.  
  395. .show-chevron {
  396. opacity: 1;
  397. margin-top: 155px;
  398. }
  399.  
  400. .files {
  401. width: 900px;
  402. margin-top: 0;
  403. height: 10px;
  404. overflow: hidden;
  405. opacity: 0;
  406. transition: 0.6s;
  407. }
  408.  
  409. .show-files {
  410. height: 100%;
  411. opacity: 1;
  412. margin-top: 30px;
  413. margin-bottom: 25px;
  414. }
  415.  
  416. .tagblock {
  417. width: 170px;
  418. padding: 20px;
  419. margin: 25px;
  420. float: left;
  421. background-color: #41213e; /** tag block background colour **/
  422. border: 20px solid #3b1c38; /**tag block border colour **/
  423. }
  424.  
  425. .tagblocktitle {
  426. font-family: talldarkhandsome;
  427. color: #ffffff; /** category title colour **/
  428. border-bottom: 1px solid #fa6d42; /** category underline colour **/
  429. font-size: 20px;
  430. letter-spacing: 4px;
  431. text-align: center;
  432. padding-bottom: 20px;
  433. margin-bottom: 18px;
  434. line-height: 26px;
  435. }
  436.  
  437. .tag {
  438. font-family: printclearly;
  439. font-size: 15px;
  440. letter-spacing: 1px;
  441. margin-top: 2px;
  442. background-color: #573053; /** tag background colour **/
  443. color: #cccccc; /** tag colour **/
  444. padding: 4px 6px;
  445. line-height: 17px;
  446. transition: 0.6s;
  447. }
  448.  
  449. .tag:hover {
  450. background-color: #c9283d; /** hover tag background **/
  451. color: #ffffff; /** hover tag colour **/
  452. }
  453.  
  454. {CustomCSS}
  455.  
  456. </style>
  457. </head>
  458. <body>
  459.  
  460. <center>
  461.  
  462. <div class="headertitle">Navigate the Wilderness</div>
  463. <!-------------------------------------------------------------------------
  464. Edit 'Navigate the Wilderness' to whatever you'd like to display as the huge title at the top of the page.
  465. -------------------------------------------------------------------------->
  466.  
  467. <div class="wp-cover"></div>
  468.  
  469. <center><div id="headerbg">
  470.  
  471. <div class="wp-wrapper"><div class="map-waypoints">
  472.  
  473. <!-------------------------------------------------------------------------
  474.  
  475. W A Y P O I N T S
  476.  
  477. Below is the html coding for each waypoint. Each block of text ("paragraph") encodes a single waypoint. By default there are 7 waypoints in the theme, though you are able to add more.
  478.  
  479. The important thing to know is that each waypoint has its own number tag seen in the first line: "waypoint-01", "waypoint-02", "waypoint-03", etc. By doing so, we are able to individually change the positions and colours of the waypoints. These are edited above, in the CSS.
  480.  
  481. To add a new waypoint, copy and paste the whole block below, but remember you must change the number in the first line to 08 or higher! Then edit the LINK TITLE and replace 'YOUR LINK GOES HERE' with your link url.
  482.  
  483. -----------------------------------------------------------------------------
  484.  
  485.  
  486. <div id="waypoint-08" class="waypoint-marker">
  487. <a title="8 | LINK TITLE" href="YOUR LINK GOES HERE">
  488. <div class="waypoint"><div class="waypoint-inner"></div></div>
  489. </a>
  490. </div><!--waypoint-marker-->
  491.  
  492.  
  493. <!-------------------------------------------------------------------------->
  494.  
  495.  
  496. <div id="waypoint-01" class="waypoint-marker">
  497. <a title="1 | back to main" href="/">
  498. <div class="waypoint"><div class="waypoint-inner"></div></div>
  499. </a>
  500. </div><!--waypoint-marker-->
  501.  
  502.  
  503. <div id="waypoint-02" class="waypoint-marker">
  504. <a title="2 | send a message" href="/ask">
  505. <div class="waypoint"><div class="waypoint-inner"></div></div>
  506. </a>
  507. </div><!--waypoint-marker-->
  508.  
  509.  
  510. <div id="waypoint-03" class="waypoint-marker">
  511. <a title="3 | archives" href="/archive">
  512. <div class="waypoint"><div class="waypoint-inner"></div></div>
  513. </a>
  514. </div><!--waypoint-marker-->
  515.  
  516.  
  517. <div id="waypoint-04" class="waypoint-marker">
  518. <a title="4 | link title" href="YOUR LINK GOES HERE">
  519. <div class="waypoint"><div class="waypoint-inner"></div></div>
  520. </a>
  521. </div><!--waypoint-marker-->
  522.  
  523.  
  524. <div id="waypoint-05" class="waypoint-marker">
  525. <a title="5 | link title" href="YOUR LINK GOES HERE">
  526. <div class="waypoint"><div class="waypoint-inner"></div></div>
  527. </a>
  528. </div><!--waypoint-marker-->
  529.  
  530.  
  531. <div id="waypoint-06" class="waypoint-marker">
  532. <a title="6 | link title" href="YOUR LINK GOES HERE">
  533. <div class="waypoint"><div class="waypoint-inner"></div></div>
  534. </a>
  535. </div><!--waypoint-marker-->
  536.  
  537.  
  538. <div id="waypoint-07" class="waypoint-marker">
  539. <a title="7 | link title" href="YOUR LINK GOES HERE">
  540. <div class="waypoint"><div class="waypoint-inner"></div></div>
  541. </a>
  542. </div><!--waypoint-marker-->
  543.  
  544. <!------------------------- WAYPOINTS HTML END ------------------------------>
  545.  
  546. </div><!--end map-waypoints --></div><!--wp-wrapper-->
  547.  
  548.  
  549. <img class="headerimg" src="http://static.tumblr.com/2icx37z/oJUoyfh29/679478.jpg">
  550. <!-------------------------------------------------------------------------
  551. Replace the image link wih your own image link. The iamge should be reasonably high definition, wide (like more than 1000px) and of minimum height 280px. It will be stretched to fit, but on the usual preview, it'll look fine.
  552. -------------------------------------------------------------------------->
  553.  
  554.  
  555. </div></center><!--headerbg-->
  556.  
  557.  
  558. <div class="headerchoice">
  559. <div class="btn-map">Look at the map.</div>
  560. <div class="btn-map-hide">Hide the map.</div>
  561. <div class="choice-divider"></div>
  562. <a id="scrollToTop"><div class="btn-files"><span class="btn-files-view">View</span><span class="btn-files-hide">Hide</span> my files.</div></a>
  563. </div><!--headerchoice-->
  564.  
  565. <div class="files-chevron"><span class="sf sf-chevron-down"></span></div>
  566.  
  567. <div class="files">
  568.  
  569. <!-------------------------------------------------------------------------
  570.  
  571. T A G B L O C K S
  572.  
  573. Below is the html coding for the tag blocks. Each tag block has a tag block title (Which you can always choose NOT to include), followed by the individual tags. The editing is quite straightforward for this one. Below you'll find the default tag block code that you can copy and paste to add more blocks.
  574.  
  575. -----------------------------------------------------------------------------
  576.  
  577.  
  578. <div class="tagblock">
  579. <div class="tagblocktitle">CATEGORY TITLE</div>
  580. <a href="/tagged/"><div class="tag">tag</div></a>
  581. <a href="/tagged/"><div class="tag">tag</div></a>
  582. <a href="/tagged/"><div class="tag">tag</div></a>
  583. <a href="/tagged/"><div class="tag">tag</div></a>
  584. <a href="/tagged/"><div class="tag">tag</div></a>
  585. </div><!--tagblock-->
  586.  
  587.  
  588. <!-------------------------------------------------------------------------->
  589.  
  590. <div class="tagblock">
  591. <div class="tagblocktitle">CATERGORY</div>
  592. <a href="/tagged/tag"><div class="tag">tag</div></a>
  593. <a href="/tagged/tag"><div class="tag">tag</div></a>
  594. <a href="/tagged/tag"><div class="tag">tag</div></a>
  595. <a href="/tagged/tag"><div class="tag">tag</div></a>
  596. <a href="/tagged/tag"><div class="tag">tag</div></a>
  597. </div><!--tagblock-->
  598.  
  599. <div class="tagblock">
  600. <div class="tagblocktitle">CATEGORY</div>
  601. <a href="/tagged/tag"><div class="tag">tag</div></a>
  602. <a href="/tagged/tag"><div class="tag">tag</div></a>
  603. <a href="/tagged/tag"><div class="tag">tag</div></a>
  604. <a href="/tagged/tag"><div class="tag">tag</div></a>
  605. <a href="/tagged/tag"><div class="tag">tag</div></a>
  606. <a href="/tagged/tag"><div class="tag">tag</div></a>
  607. <a href="/tagged/tag"><div class="tag">tag</div></a>
  608. <a href="/tagged/tag"><div class="tag">tag</div></a>
  609. <a href="/tagged/tag"><div class="tag">tag</div></a>
  610. <a href="/tagged/tag"><div class="tag">tag</div></a>
  611. <a href="/tagged/tag"><div class="tag">tag</div></a>
  612. <a href="/tagged/tag"><div class="tag">tag</div></a>
  613. <a href="/tagged/tag"><div class="tag">tag</div></a>
  614. <a href="/tagged/tag"><div class="tag">tag</div></a>
  615. <a href="/tagged/tag"><div class="tag">tag</div></a>
  616. <a href="/tagged/tag"><div class="tag">tag</div></a>
  617. </div><!--tagblock-->
  618.  
  619. <div class="tagblock">
  620. <div class="tagblocktitle">CATEGORY</div>
  621. <a href="/tagged/tag"><div class="tag">tag</div></a>
  622. <a href="/tagged/tag"><div class="tag">tag</div></a>
  623. <a href="/tagged/tag"><div class="tag">tag</div></a>
  624. <a href="/tagged/tag"><div class="tag">tag</div></a>
  625. </div><!--tagblock-->
  626.  
  627. <div class="tagblock">
  628. <div class="tagblocktitle">CATEGORY</div>
  629. <a href="/tagged/tag"><div class="tag">tag</div></a>
  630. <a href="/tagged/tag"><div class="tag">tag</div></a>
  631. </div><!--tagblock-->
  632.  
  633. <div class="tagblock">
  634. <div class="tagblocktitle">CATEGORY</div>
  635. <a href="/tagged/tag"><div class="tag">tag</div></a>
  636. <a href="/tagged/tag"><div class="tag">tag</div></a>
  637. <a href="/tagged/tag"><div class="tag">tag</div></a>
  638. <a href="/tagged/tag"><div class="tag">tag</div></a>
  639. <a href="/tagged/tag"><div class="tag">tag</div></a>
  640. <a href="/tagged/tag"><div class="tag">tag</div></a>
  641. <a href="/tagged/tag"><div class="tag">tag</div></a>
  642. <a href="/tagged/tag"><div class="tag">tag</div></a>
  643. <a href="/tagged/tag"><div class="tag">tag</div></a>
  644. </div><!--tagblock-->
  645.  
  646. </div><!--files-->
  647.  
  648. </center>
  649.  
  650. <!--please don't edit/remove my credit!!-->
  651. <a title="coded by yukoki" href="http://yukoki.tumblr.com"><div id="cred"><span class="sf sf-leaf-2-o"></span></div></a>
  652.  
  653. </body>
  654. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement