API tools faq
paste
rottenfollow229

Page Base Code

rottenfollow229
Dec 28th, 2017 (edited)
201
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Page ⎾TBD⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Tippy.js: https://atomiks.github.io/tippyjs/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Icons: https://phosphoricons.com/
  27.  
  28. > Removing tumblr app button on mobile themes: https://yeolithm.com/post/172903772712/tutorial-removing-tumblr-app-button-on-mobile
  29.  
  30. !-->
  31.  
  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  33. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  34.  
  35. <script>
  36. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  37. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  38. </script>
  39.  
  40. <head>
  41.  
  42. <!------------Smooth Scroll Script------------>
  43. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  44. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  45. <!------------Smooth Scroll Script------------>
  46.  
  47. <!--------------Custom Fonts-------------->
  48. <link rel="preconnect" href="https://fonts.googleapis.com">
  49. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  50. <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,500&family=Mukta:wght@400;500;700&display=swap" rel="stylesheet">
  51. <!--------------Custom Fonts-------------->
  52.  
  53. <!--Homelinks Icons -->
  54. <script src="https://unpkg.com/phosphor-icons"></script>
  55. <!--Homelinks Icons-->
  56.  
  57. <title>{Title}</title>
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  60. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  61. <meta name="viewport" content="width=device-width, initial-scale=1">
  62.  
  63.  
  64. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  65. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  66.  
  67. <style type="text/css">
  68.  
  69. /*------
  70.  
  71. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  72.  
  73. ------ */
  74.  
  75. :root {
  76. --main-font-size: 14px;
  77. }
  78.  
  79. :root, html[data-theme='light'] {
  80.  
  81. --LightOn: block; /* displays <span> with moon icon */
  82. --LightOff: none; /* hides <span> with sun icon */
  83.  
  84. --accent: #EC9969;
  85. --accented-text: #ffffff;
  86. --main-background: #fbfbfb;
  87. --text: #444444;
  88. --bold: #000000;
  89. --italic #000000;
  90. --main-links: #000000;
  91. --main-links-hover: #EC9969;
  92. --link-hover: #B08E72;
  93. --scrollbar: #EC9969;
  94. --text-selection-background: #EC9969;
  95. --text-selection: #fff;
  96. --tooltip: #fff;
  97. --tooltip-background: #EC9969;
  98.  
  99. --topbar-title: #000000;
  100. --top-banner: #ffffff;
  101. --main-posts: #ffffff;
  102. --post-borders: #e8e8e8;
  103. }
  104.  
  105. html[data-theme='dark'] {
  106. --LightOn: none; /* hides <span> with moon icon */
  107. --LightOff: block; /* displays <span> with sun icon */
  108.  
  109. --accent: #EC9969;
  110. --accented-text: #ffffff;
  111. --main-background: #313131;
  112. --text: #ffffff;
  113. --bold: #EC9969;
  114. --italic #000000;
  115. --main-links: #ffffff;
  116. --link-hover: #B08E72;
  117. --scrollbar: #EC9969;
  118. --text-selection-background: #EC9969;
  119. --text-selection: #fff;
  120. --tooltip: #fff;
  121. --tooltip-background: #EC9969;
  122.  
  123. --topbar-title: #ffffff;
  124. --top-banner: #414141;
  125. --main-posts: #414141;
  126. --post-borders: #2e2e2e;
  127. }
  128.  
  129. html.theme-transition,
  130. html.theme-transition *,
  131. html.theme-transition *:before,
  132. html.theme-transition *:after {
  133. transition: 0s !important;
  134. transition-delay: 0 !important;
  135. }
  136.  
  137. /*----------FADE-IN ANIMATION----------*/
  138.  
  139. @keyframes fadein {
  140. from {opacity:0;}
  141. to {opacity:1;}
  142. }
  143.  
  144. @-moz-keyframes fadein { /* Firefox */
  145. from {opacity:0;}
  146. to {opacity:1;}
  147. }
  148.  
  149. @-webkit-keyframes fadein { /* Safari and Chrome */
  150. from {opacity:0;}
  151. to {opacity:1;}
  152. }
  153.  
  154. @-o-keyframes fadein { /* Opera */
  155. from {opacity:0;}
  156. to {opacity: 1;}
  157. }
  158.  
  159. /*----------TUMBLR CONTROLS----------*/
  160.  
  161. iframe#tumblr_controls, .iframe-controls--desktop {
  162. right: 10px !important;
  163. top: 25px !important;
  164. position: fixed !important;
  165. z-index: 99999999999999999999 !important;
  166. -webkit-filter: invert(100%);
  167. -moz-filter: invert(100%);
  168. -o-filter: invert(100%);
  169. -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  170. -webkit-transition: all 0.8s ease-out;
  171. -moz-transition: all 0.8s ease-out;
  172. transition: all 0.8s ease-out;
  173. display: none;
  174. }
  175.  
  176. /*----------SCROLLBAR----------*/
  177.  
  178. ::-webkit-scrollbar {
  179. width: 4px;
  180. height: 4px;
  181. }
  182. ::-webkit-scrollbar-button {
  183. width: 0px;
  184. height: 0px;
  185. }
  186. ::-webkit-scrollbar-thumb {
  187. background-color: var(--scrollbar);
  188. border-radius: 6px;
  189. }
  190.  
  191. ::-webkit-scrollbar-track {
  192. background: var(--main-background);
  193. border-radius: 6px;
  194. }
  195.  
  196. /*----------TOOLTIPS----------*/
  197.  
  198. .tippy-tooltip.custom-theme {
  199. background-color: var(--tooltip-background);
  200. color: var(--tooltip);
  201. text-align:center;
  202. font-weight: 700;
  203. }
  204.  
  205. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  206. fill: var(--tooltip-background);
  207. }
  208.  
  209. /*----------TEXT SELECTION----------*/
  210. ::selection {
  211. background: var(--text-selection-background);
  212. color: var(--text-selection);
  213. }
  214.  
  215. ::-moz-selection {
  216. background: var(--text-selection-background);
  217. color: var(--text-selection);
  218. }
  219.  
  220. ::-webkit-selection {
  221. background: var(--text-selection-background);
  222. color: var(--text-selection);
  223. }
  224.  
  225. /*----------THEME BASICS----------*/
  226.  
  227. body {
  228. margin: 0;
  229. padding: 0;
  230. box-sizing: border-box;
  231. display: flex;
  232. justify-content: center;
  233. align-items: center;
  234. min-height: 100vh;
  235. color: var(--main-font-color);
  236. font-family: 'Mukta', sans-serif;
  237. font-weight: 400;
  238. line-height: 180%;
  239. font-size: var(--main-font-size);
  240. background: var(--main-background) url("") center; /*Add a background image between the quotations*/
  241. background-attachment: fixed;
  242. background-repeat: repeat;
  243. -webkit-font-smoothing: antialiased;
  244. -moz-osx-font-smoothing: grayscale;
  245. animation: fadein 2.5s;
  246. -moz-animation: fadein 2.5s;
  247. -webkit-animation: fadein 2.5s;
  248. -o-animation: fadein 2.5s;
  249. }
  250.  
  251. b,strong {
  252. color:var(--bold);
  253. font-weight: 700;
  254. }
  255.  
  256. i,em {
  257. color:var(--italic);
  258. }
  259.  
  260. small,sub,sup {
  261. font-size: calc(var(--main-font-size) - 0.5px);
  262. }
  263.  
  264. h1,h2,h3 {
  265. font-weight: 700;
  266. font-size: 1.3em;
  267. color: var(--bold);
  268. }
  269.  
  270. h4,h5,h6 {
  271. font-weight: 700;
  272. font-size: 1.2em;
  273. color: var(--bold);
  274. }
  275.  
  276. a {
  277. color: var(--main-links);
  278. text-decoration:none;
  279. -moz-transition-duration: 0.5s;
  280. -o-transition-duration: 0.5s;
  281. -webkit-transition-duration: 0.5s;
  282. transition-duration: 0.5s;
  283. }
  284.  
  285. a:hover {
  286. color: var(--link-hover);
  287. -moz-transition-duration: 0.5s;
  288. -o-transition-duration: 0.5s;
  289. -webkit-transition-duration: 0.5s;
  290. transition-duration: 0.5s;
  291. }
  292.  
  293. /*----------DAY/NIGHT MODE---------*/
  294.  
  295. .toggle-header {
  296. position: fixed;
  297. top: 50px;
  298. right: 50px;
  299. }
  300.  
  301. button#theme-toggle {
  302. outline: none;
  303. border: 0;
  304. background: transparent;
  305. padding: 0;
  306. cursor: pointer;
  307. }
  308.  
  309. button#theme-toggle i {
  310. font-size: 18px;
  311. background-color: var(--accent);
  312. color: var(--accented-text);
  313. padding: 10px;
  314. border-radius: 50%;
  315. }
  316.  
  317. .toggle-header {
  318. display: flex;
  319. }
  320.  
  321. .light-on{
  322. display: var(--LightOn);
  323. }
  324.  
  325. .light-off{
  326. display: var(--LightOff);
  327. }
  328.  
  329. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  330.  
  331. #bottom {
  332. bottom: 40px;
  333. position: fixed;
  334. right: 40px;
  335. z-index: 99;
  336. display: flex;
  337. }
  338.  
  339. .ph-copyright {
  340. padding: 3px;
  341. font-size: 22px;
  342. width: 22px;
  343. height: 22px;
  344. background-color: var(--accent);
  345. color: var(--accented-text);
  346. border-radius: 50%;
  347. margin: 0 2px;
  348. }
  349.  
  350. </style>
  351.  
  352. </head>
  353.  
  354. <body>
  355.  
  356. <div class="toggle-header">
  357. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  358. <span class="light-on"><a href="javascript:;" title="toggle dark mode"><i class="ph-moon"></i></a></span>
  359. <span class="light-off"><a href="javascript:;" title="toggle light mode"><i class="ph-sun"></i></a></span>
  360. </button>
  361. </div>
  362.  
  363. <footer id="bottom">
  364. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  365. <a href="https://sheathemes.tumblr.com" target="_blank" title="sheathemes"><i class="ph-copyright"></i></a>
  366. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  367. </footer>
  368.  
  369. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  370.  
  371. <!-----------Tooltips Script----------->
  372. <script src="https://unpkg.com/popper.js@1"></script>
  373. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  374. <!-----------Tooltips Script----------->
  375.  
  376. <script>
  377. $(document).ready(function(){
  378. tippy('a[title]', {
  379. theme: 'custom',
  380. arrow: tippy.roundArrow,
  381. zIndex: 9999999999,
  382. placement: 'auto',
  383. maxWidth: 300,
  384. content(reference) {
  385. const title = reference.getAttribute('title');
  386. reference.removeAttribute('title'); return title; },
  387.  
  388. });
  389. });
  390. </script>
  391.  
  392. <script>
  393. // toggle dark/light
  394. const toggle = document.getElementById("theme-toggle");
  395.  
  396. toggle.onclick = function () {
  397. document.documentElement.classList.add("theme-transition");
  398.  
  399. let currentTheme = document.documentElement.getAttribute("data-theme");
  400. let targetTheme = "light";
  401.  
  402. if (currentTheme === "light") {
  403. targetTheme = "dark";
  404. }
  405.  
  406. window.setTimeout(function () {
  407. document.documentElement.classList.remove("theme-transition");
  408. }, 50);
  409.  
  410. document.documentElement.setAttribute("data-theme", targetTheme);
  411. localStorage.setItem("theme", targetTheme);
  412. };
  413. </script>
  414.  
  415. </body>
  416. </html> <!---------------------------END--------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!