API tools faq
paste
Advertisement
silbrigthemes

Fathomless (Page #8)

silbrigthemes
Apr 2nd, 2018
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. FATHOMLESS
  7. Page #8 by silbrigthemes
  8.  
  9. This is a revamp of page "Greenery". It's a responsive about page.
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20. 6) Do not redistribute to other sites.
  21.  
  22. ----------
  23.  
  24. Useful comments to this code have been made.
  25.  
  26. If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. Have fun!
  29.  
  30. Love,
  31. Julia <3
  32.  
  33. ----------
  34.  
  35. Note:
  36.  
  37. This work is protected by a creative commons
  38. Attribution-NonCommercial-NoDerivatives 4.0 International
  39. (CC BY-NC-ND 4.0)
  40. license.
  41.  
  42. -->
  43.  
  44. <head>
  45.  
  46. <meta charset="utf-16">
  47. <title>{Title} | Fathomless</title>
  48. {block:Description}
  49. <meta name="description" content="{MetaDescription}" />
  50. {/block:Description}
  51. <link rel="shortcut icon" href="{Favicon}"/>
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  53. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  54.  
  55. <!-- Necessary for the theme to be responsive. -->
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <!-- Necessary for the scripts to work. -->
  59. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  60.  
  61. <!-- Changes the toolbar color on mobile. -->
  62. <meta name="theme-color" content="#000979c"/>
  63.  
  64. <!-- Icon font, by fontawesome. -->
  65. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  66.  
  67. <!-- Tooltip Script -->
  68. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  69. <script>
  70. (function($){
  71. $(document).ready(function(){
  72. $("[title]").style_my_tooltips({
  73. tip_follows_cursor:true,
  74. tip_delay_time:200,
  75. tip_fade_speed:300
  76. }
  77. );
  78. });
  79. })(jQuery);
  80. </script>
  81.  
  82. <!-- Roboto Slab -->
  83. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  84. <!-- Open Sans -->
  85. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  86.  
  87. <!-- Other Fonts -->
  88. <!-- Roboto Mono -->
  89. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  90. <!-- Cormorant Garamond -->
  91. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  92. <!-- Dancing Script -->
  93. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  94.  
  95. <style>
  96.  
  97. body{
  98. margin:0;
  99. top:0;
  100. left:0;
  101. background-color:#00979c; /* background color */
  102. font-size:1em; /* font-size, 1em = 16px */
  103. color:#333; /* text color */
  104. font-family:"Open Sans", Verdana; /* font-family */
  105. text-align:justify;
  106. overflow-x:hidden;
  107. }
  108.  
  109. /* Night Mode */
  110. body.night{
  111. color:white; /* text color */
  112. background-color:#006164; /* background color */
  113. }
  114.  
  115. /* Accessible Mode */
  116. body.access{
  117. text-align:left;
  118. font-size:18px; /* font-size */
  119. /* should be bigger than the one under body */
  120. }
  121.  
  122. /* Custom Scrollbar */
  123. ::-webkit-scrollbar{
  124. width:10px;
  125. }
  126.  
  127. ::-webkit-scrollbar-thumb{
  128. width:10px;
  129. background-color:white;
  130. border-radius:5px;
  131. }
  132.  
  133. /* Custom Text Selection */
  134. ::selection{
  135. background-color:#00979c; /* background-color */
  136. color:white; /* text color */
  137. }
  138.  
  139. ::-moz-selection{
  140. background-color:#00979c; /* background-color */
  141. color:white; /* text color */
  142. }
  143.  
  144. ::-o-selection{
  145. background-color:#00979c; /* background-color */
  146. color:white; /* text color */
  147. }
  148.  
  149. ::-webkit-selection{
  150. background-color:#00979c; /* background-color */
  151. color:white; /* text color */
  152. }
  153.  
  154. /* Custom Tooltips */
  155. #s-m-t-tooltip{
  156. max-width:300px;
  157. margin:15px;
  158. padding:8px;
  159. background-color:#046aaa; /* background color */
  160. color:white; /* text color */
  161. z-index:9999999999999;
  162. font-size:calc(1em - 4px);
  163. text-transform:uppercase;
  164. font-weight:400;
  165. font-family:"Open Sans", Verdana; /* font-family */
  166. border-radius:8px;
  167. }
  168.  
  169. body.night #s-m-t-tooltip{
  170. background-color:#03446d; /* background color */
  171. }
  172.  
  173. body.access #s-m-t-tooltip{
  174. text-transform:none;
  175. }
  176.  
  177. /** –– TEXT STYLES –– **/
  178. /* Bold Text */
  179. b, strong{
  180. font-weight:bold;
  181. color:#89999b; /* text color */
  182. }
  183.  
  184. body.night b, body.night strong{
  185. color:#b3bebf; /* text color */
  186. }
  187.  
  188. /* Italic Text */
  189. i, em{
  190. font-weight:300;
  191. font-style:italic;
  192. color:#607278; /* text color */
  193. }
  194.  
  195. body.night i, body.night em{
  196. color:#99a5a9; /* text color */
  197. }
  198.  
  199. body.access i, body.access em{
  200. font-style:normal;
  201. font-weight:400;
  202. }
  203.  
  204. /* Empty Paragraphs */
  205. p:empty{
  206. display:none;
  207. }
  208.  
  209. /* Underlined Text */
  210. u{
  211. text-decoration:none;
  212. border-bottom:2px solid #333; /* height style color */
  213. }
  214.  
  215. body.night u{
  216. border-bottom:2px solid white; /* height style color */
  217. }
  218.  
  219. body.access u{
  220. border-bottom:none;
  221. }
  222.  
  223. /* Small Text */
  224. small{
  225. font-size:calc(1em - 4px);
  226. }
  227.  
  228. body.access small{
  229. font-size:calc(1em - 2px);
  230. }
  231.  
  232. /* Text Line */
  233. hr{
  234. width:80%;
  235. height:4px;
  236. border-radius:4px;
  237. border:none;
  238. background-color:#046aaa; /* background-color */
  239. }
  240.  
  241. body.night hr{
  242. background-color:#5fa0c8; /* background color */
  243. }
  244.  
  245. /* Sub- and supscripted Text */
  246. body.access sub, body.access sup{
  247. vertical-align:baseline;
  248. }
  249.  
  250. /* Marked Text */
  251. mark{
  252. background-color:#00979c; /* background color */
  253. color:white; /* text color */
  254. padding:0 8px;
  255. border-radius:1em;
  256. }
  257.  
  258. body.night mark{
  259. background-color:#5cbcc0; /* background color */
  260. color:#333; /* text color */
  261. }
  262.  
  263. /* Blockquote */
  264. blockquote{
  265. border-left:4px solid #00979c; /* width style color */
  266. color:#00979c; /* text color */
  267. padding-left:1em;
  268. }
  269.  
  270. body.night blockquote{
  271. color:#5cbcc0; /* text color */
  272. border-left:4px solid #5cbcc0; /* width style color */
  273. }
  274.  
  275. /* Preformatted Text */
  276. pre{
  277. border-left:4px solid #046aaa; /* width style color */
  278. color:#046aaa; /* text color */
  279. padding-left:16px;
  280. font-family:"Roboto Mono", Courier; /* font-family */
  281. font-size:calc(1em - 2px);
  282. word-wrap:break-all;
  283. white-space:pre-wrap;
  284. }
  285.  
  286. body.night pre{
  287. border-left:4px solid #5fa0c8; /* width style color */
  288. color:#5fa0c8; /* text color */
  289. }
  290.  
  291. body.access pre{
  292. font-family:"Open Sans", Verdana; /* font-family */
  293. }
  294.  
  295. /* LINKS */
  296. /* Link */
  297. a{
  298. color:#046aaa; /* text color */
  299. border-bottom:2px solid #046aaa; /* height style color */
  300. text-decoration:none;
  301. }
  302.  
  303. body.night a{
  304. color:#5fa0c8; /* text color */
  305. border-bottom:2px solid #5fa0c8; /* height style color */
  306. }
  307.  
  308. body.access a{
  309. border-bottom:none;
  310. }
  311.  
  312. /* Hover Link */
  313. a:hover{
  314. color:#00979c; /* text color */
  315. border-bottom:2px solid #00979c; /* height style color */
  316. }
  317.  
  318. body.night a:hover{
  319. color:#5cbcc0; /* text color */
  320. border-bottom:2px solid #5cbcc0; /* height style color */
  321. }
  322.  
  323. body.access a:hover{
  324. border-bottom:none;
  325. }
  326.  
  327. a, a:hover{
  328. transition:0.5s;
  329. -moz-transition:0.5s;
  330. -o-transition:0.5s;
  331. -webkit-transition:0.5s;
  332. }
  333.  
  334. /* COLORED TEXT */
  335. /* Red Text */
  336. .npf_color_joey {
  337. color:#f21000;
  338. }
  339.  
  340. /* Orange Text */
  341. .npf_color_monica {
  342. color:#f26d00;
  343. }
  344.  
  345. /* Yellow Text */
  346. .npf_color_phoebe {
  347. color:#f2b100;
  348. }
  349.  
  350. /* Green Text */
  351. .npf_color_ross {
  352. color:#009b17;
  353. }
  354.  
  355. /* Blue Text */
  356. .npf_color_rachel {
  357. color:#0040f2;
  358. }
  359.  
  360. body.night .npf_color_rachel{
  361. color:#3e6ef2;
  362. }
  363.  
  364. /* Purple Text */
  365. .npf_color_chandler {
  366. color:#b900f2;
  367. }
  368.  
  369. /* Pink Text */
  370. .npf_color_niles {
  371. color:#f20099;
  372. }
  373.  
  374. /* depending on text and background color, you might have to
  375. add a color for the night mode to ensure readbility */
  376.  
  377. /* SPECIAL FONTS */
  378. /* Quirky Font */
  379. .npf_quirky{
  380. font-family: "Dancing Script", cursive;
  381. font-size:1.5em;
  382. }
  383.  
  384. /* Chat Font */
  385. .npf_chat{
  386. font-family:"Roboto Mono", Courier;
  387. }
  388.  
  389. /* Quote Font */
  390. .npf_quote{
  391. font-family:"Cormorant Garamond", "Palatino";
  392. font-size:1.25em;
  393. }
  394.  
  395. body.access .npf_quirky, body.access .npf_chat, body.access .npf_quote{
  396. font-family:"Open Sans", Verdana; /* font family */
  397. font-size:1em;
  398. }
  399.  
  400. /* HEADINGS */
  401. /* Title */
  402. #title{
  403. font-size:2.5em;
  404. font-family:"Roboto Slab", Georgia; /* font-family */
  405. color:#00979c; /* text color */
  406. padding:0.5em 1em;
  407. text-align:center;
  408. }
  409.  
  410. body.night #title{
  411. color:#5cbcc0; /* text color */
  412. }
  413.  
  414. body.access #title{
  415. font-family:"Open Sans", Verdana; /* font family */
  416. text-align:left;
  417. }
  418.  
  419. /* First Heading */
  420. h1{
  421. font-size:1.75em;
  422. font-weight:400;
  423. }
  424.  
  425. /* Second Heading */
  426. h2{
  427. font-size:1.5em;
  428. font-weight:300;
  429. }
  430.  
  431. h1, h2{
  432. font-family:"Roboto Slab", Georgia;
  433. }
  434.  
  435. body.access h1, body.access h2{
  436. font-family:"Open Sans", Verdana;
  437. font-weight:400;
  438. }
  439.  
  440. /* Third Heading */
  441. h3{
  442. font-size:1.25em;
  443. }
  444.  
  445. /* Fourth Heading */
  446. h4{
  447. font-size:1em;
  448. }
  449.  
  450. /* Fifth Heading */
  451. h5{
  452. font-size:calc(1em - 2px);
  453. }
  454.  
  455. /* Sixth Heading */
  456. h6{
  457. font-size:calc(1em - 4px);
  458. }
  459.  
  460. h5, h6{
  461. text-transform:uppercase;
  462. }
  463.  
  464. body.access h5, body.access h6{
  465. text-transform:none;
  466. }
  467.  
  468. h3, h4, h5, h6{
  469. font-family:"Open Sans", Verdana;
  470. }
  471.  
  472. /* Container */
  473. #container{
  474. width:60vw;
  475. height:auto;
  476. margin-top:10vh;
  477. margin-bottom:10vh;
  478. margin-left:20vw;
  479. background-color:white; /* background color */
  480. border-radius:8px; /* round corners */
  481. overflow:hidden;
  482. }
  483.  
  484. body.night #container{
  485. background-color:#333; /* background color */
  486. }
  487.  
  488. /* About Section */
  489. #about{
  490. padding:0 2em;
  491. }
  492.  
  493. /* CUSTOM CONTROLS */
  494. /* Hides standard tumblr controls */
  495. body > iframe:first-child {
  496. display:none !important;
  497. }
  498.  
  499. /* Hides the tumblr app button, by @yeoli-thm */
  500. .tmblr-iframe--app-cta-button {
  501. display:none!important;
  502. }
  503.  
  504. /* Control Element */
  505. .cont{
  506. width:32px;
  507. height:32px;
  508. background-color:white; /* background color */
  509. border-radius:8px; /* rounded corners */
  510. font-size:calc(1em - 2px);
  511. color:#046aaa; /* text color */
  512. display:flex;
  513. align-items:center;
  514. justify-content:center;
  515. }
  516.  
  517. body.night .cont{
  518. background-color:#333; /* background color */
  519. color:#5fa0c8; /* text color */
  520. }
  521.  
  522. /* Control Element on Hover */
  523. .cont:hover{
  524. transform:scale(1.05);
  525. }
  526.  
  527. /* Transitions */
  528. .cont, .cont:hover{
  529. transition:0.5s;
  530. -moz-transition:0.5s;
  531. -o-transition:0.5s;
  532. -webkit-transition:0.5s;
  533. }
  534.  
  535. /* Control Element Links */
  536. a.conlink, body.night a.conlink{
  537. border-bottom:none;
  538. color:inherit;
  539. }
  540.  
  541. /* Custom Control Container */
  542. #custom-controls{
  543. width:calc(2 * 32px + 6px);
  544. height:calc(3 * 32px + 16px);
  545. position:fixed;
  546. top:1em;
  547. right:1em;
  548. display:flex;
  549. align-items:space-between;
  550. justify-content:space-between;
  551. flex-wrap:wrap;
  552. }
  553.  
  554. /* Day/Night Toggle */
  555. .daynight{
  556. position:fixed;
  557. top:1em;
  558. left:1em;
  559. cursor:pointer;
  560. }
  561.  
  562. /* Accessible Toggle */
  563. .accessible{
  564. position:fixed;
  565. left:1em;
  566. top:calc(1em + 32px + 8px);
  567. }
  568.  
  569. /* Credit – Don't touch! */
  570. #credit{
  571. position:fixed;
  572. bottom:1em;
  573. left:1em;
  574. }
  575.  
  576. /* RESPONSIVE LAYOUT */
  577. /* Desktop */
  578. @media only screen and (min-width:800px){
  579. #mobile-footer{
  580. display:none;
  581. }
  582. }
  583.  
  584. /* Tablet */
  585. @media only screen and (max-width:800px){
  586. #container{
  587. width:80vw;
  588. margin-left:10vw;
  589. }
  590.  
  591. #custom-controls{
  592. width:32px;
  593. height:calc(6 * 32px + 5 * 8px);
  594. }
  595.  
  596. #mobile-footer{
  597. display:none;
  598. }
  599. }
  600.  
  601. @media only screen and (min-width:450px){
  602. #mobile-footer{
  603. display:none;
  604. }
  605. }
  606.  
  607. /* Phone */
  608. @media only screen and (max-width:450px){
  609. body{
  610. background-color:white; /* background color */
  611. }
  612.  
  613. body.night{
  614. background-color:#333; /* background color */
  615. }
  616.  
  617. ::-webkit-scrollbar{
  618. width:10px;
  619. }
  620.  
  621. ::-webkit-scrollbar-thumb{
  622. width:10px;
  623. background-color:#00979c; /* background color */
  624. border-radius:5px; /* round corners */
  625. }
  626.  
  627. #container{
  628. width:100vw;
  629. margin-left:0;
  630. margin-top:0;
  631. border-radius:0;
  632. }
  633.  
  634. #custom-controls, #credit, .daynight, .accessible{
  635. display:none;
  636. }
  637.  
  638. /* Mobile Footer */
  639. #mobile-footer{
  640. display:flex;
  641. align-items:center;
  642. justify-content:space-evenly;
  643. background-color:#00979c; /* background color */
  644. position:fixed;
  645. bottom:0;
  646. left:0;
  647. width:100vw;
  648. height:10vh;
  649. }
  650.  
  651. body.night #mobile-footer{
  652. background-color:#006164; /* background color */
  653. }
  654.  
  655. /* Navigation Element */
  656. .mf-nav{
  657. width:32px;
  658. height:32px;
  659. font-size:calc(1em - 2px);
  660. border-radius:8px; /* rounded corners */
  661. background-color:white; /* background color */
  662. color:#00979c; /* text color */
  663. display:flex;
  664. align-items:center;
  665. justify-content:center;
  666. }
  667.  
  668. body.night .mf-nav{
  669. color:#5cbcc0; /* text color */
  670. background-color:#333; /* background color */
  671. }
  672.  
  673. /* Navigation Element on Hover */
  674. .mf-nav:hover{
  675. color:#046aaa; /* text color */
  676. cursor:pointer;
  677. }
  678.  
  679. body.night .mf-nav:hover{
  680. color:#5fa0c8; /* text color */
  681. }
  682.  
  683. /* Navigation Element Transitions */
  684. .mf-nav, .mf-nav:hover{
  685. transition:0.5s;
  686. -moz-transition:0.5s;
  687. -o-transition:0.5s;
  688. -webkit-transition:0.5s;
  689. }
  690.  
  691. /* Navigation Element Links */
  692. .mf-link, body.night .mf-link{
  693. border-bottom:none;
  694. }
  695. }
  696.  
  697. </style>
  698. </head>
  699.  
  700. <body>
  701.  
  702. <!-- Main Container -->
  703. <div id="container">
  704. <!-- Title -->
  705. <div id="title"><!-- Title goes here! --></div>
  706. <!-- About Section -->
  707. <div id="about">
  708. <!-- Here goes your text! -->
  709. </div> <!-- // end about section -->
  710. </div> <!-- // end container -->
  711.  
  712. <!-- Mobile Footer -->
  713. <div id="mobile-footer">
  714. <!-- Desktop Link -->
  715. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
  716. <div class="mf-nav">
  717. <span class="fab fa-tumblr" aria-hidden="true"></span>
  718. </div>
  719. </a>
  720.  
  721. <!-- Day/Night Toggle -->
  722. <div class="dn mf-nav" title="toggle day/night-mode">
  723. <span class="fas fa-moon"></span>
  724. </div>
  725.  
  726. <script>
  727. $(document).ready(function(){
  728. $('.dn').click(function(){
  729. $('body').toggleClass('night');
  730. $('.dn span').toggleClass('fa-sun');
  731. });
  732. });
  733. </script>
  734.  
  735. <!-- Home Link -->
  736. <a href="/" title="return to blog" class="mf-link">
  737. <div class="mf-nav">
  738. <span class="fas fa-home" aria-hidden="true"></span>
  739. </div>
  740. </a>
  741.  
  742. <!-- Accessibility Toggle -->
  743. <div class="acs mf-nav" title="increase readability">
  744. <span class="fas fa-font"></span>
  745. </div>
  746.  
  747. <script>
  748. $(document).ready(function(){
  749. $('.acs').click(function(){
  750. $('body').toggleClass('access');
  751. $('.acs span').toggleClass('fa-italic');
  752. });
  753. });
  754. </script>
  755.  
  756. <!-- Credit – Do not touch! -->
  757. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  758. <div class="mf-nav">
  759. <span class="fas fa-code" aria-hidden="true"></span>
  760. </div>
  761. </a>
  762. </div> <!-- // end mobile footer -->
  763.  
  764. <!-- CUSTOM CONTROLS -->
  765. <div id="custom-controls">
  766. <!-- Home Link -->
  767. <a href="/" title="return to blog" class="conlink">
  768. <div class="cont">
  769. <span class="fas fa-home" aria-hidden="true"></span>
  770. </div>
  771. </a>
  772.  
  773. <!-- Dashboard Link -->
  774. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  775. <div class="cont">
  776. <span class="fab fa-tumblr" aria-hidden="true"></span>
  777. </div>
  778. </a>
  779.  
  780. <!-- Message -->
  781. <!-- Takes people to dashboard to send you a message. -->
  782. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  783. <div class="cont">
  784. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  785. </div>
  786. </a>
  787.  
  788. <!-- Customize -->
  789. <!-- Takes you, the blog owner, to the customization. -->
  790. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  791. <div class="cont">
  792. <span class="fas fa-palette" aria-hidden="true"></span>
  793. </div>
  794. </a>
  795.  
  796. <!-- Settings -->
  797. <!-- Takes you to your blog's settings. -->
  798. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="conlink">
  799. <div class="cont">
  800. <span class="fas fa-cog" aria-hidden="true"></span>
  801. </div>
  802. </a>
  803.  
  804. <!-- Follow -->
  805. <!-- Takes people to a page so that they can follow you. -->
  806. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  807. <div class="cont">
  808. <span class="fas fa-plus" aria-hidden="true"></span>
  809. </div>
  810. </a>
  811. </div> <!-- // end custom controls -->
  812.  
  813. <!-- TOGGLES -->
  814. <!-- Day/Night Toggle -->
  815. <div class="daynight cont" title="toggle day/night-mode">
  816. <span class="fas fa-moon"></span>
  817. </div>
  818.  
  819. <script>
  820. $(document).ready(function(){
  821. $('.daynight').click(function(){
  822. $('body').toggleClass('night');
  823. $('.daynight span').toggleClass('fa-sun');
  824. });
  825. });
  826. </script>
  827.  
  828. <!-- Accessibility Toggle -->
  829. <div class="accessible cont" title="increase readability">
  830. <span class="fas fa-font"></span>
  831. </div>
  832.  
  833. <script>
  834. $(document).ready(function(){
  835. $('.accessible').click(function(){
  836. $('body').toggleClass('access');
  837. $('.accessible span').toggleClass('fa-italic');
  838. });
  839. });
  840. </script>
  841.  
  842. <!-- Credit. Don't touch! -->
  843. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="conlink">
  844. <div class="cont" id="credit">
  845. <span class="fas fa-code"></span>
  846. </div>
  847. </a>
  848.  
  849. </body>
  850. </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!