API tools faq
paste
themesbydoori

Tabs WIP

themesbydoori
Nov 24th, 2024
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.98 KB | None | 0 0
raw download clone embed print report
  1. <!--CSS carousel tabs credit: https://yeolithm.com/carousel/tutorial-->
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  5. <head>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  8.  
  9. <script>
  10. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  11. if (storedTheme) {
  12. document.documentElement.setAttribute("data-theme", storedTheme);
  13. }
  14. </script>
  15.  
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  19. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  20.  
  21. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  22.  
  23. <link rel="preconnect" href="https://fonts.googleapis.com">
  24. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25. <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  26.  
  27. <style type="text/css">
  28.  
  29. :root {
  30. --body-font: 1.5rem;
  31. --line-height: 1.6;
  32. --normal-font-weight: 400;
  33. --medium-font-weight: 500;
  34. --semi-bold-font-weight: 600;
  35. --bold-font-weight: 700;
  36.  
  37. --gap1: 1.2rem;
  38. --gap2: 1.5rem;
  39. --gap3: 2.5rem;
  40. --gap4: 3.5rem;
  41.  
  42. --gap-top-bottom: 12rem;
  43. --gap-post-margin: 10rem;
  44. --text-margin: 1.8rem;
  45.  
  46. --round1: 0.5rem;
  47. --round2: 0.7rem;
  48. --round3: 1rem;
  49. --circle: 100%;
  50. }
  51.  
  52. :root, html[data-theme='light'] {
  53. --light-on: block;
  54. --light-off: none;
  55.  
  56. --color-accent: 77,100,141;
  57. --color-accent-text: 255,255,255;
  58. --color-background: 244,244,244;
  59. --color-text: 31,43,62;
  60. --color-link: 15,28,46;
  61. --color-link-hover: 31,58,95;
  62. --color-post-background: 255,255,255;
  63. --color-post-borders: 225,225,225;
  64. --color-post-accent: 250,250,250;
  65. --color-post-accent-text: 0,0,0;
  66. }
  67.  
  68. html[data-theme='dark'] {
  69. --light-on: none;
  70. --light-off: block;
  71.  
  72. --color-accent: 172,194,239;
  73. --color-accent-text: 0,0,0;
  74. --color-background: 15,28,46;
  75. --color-text: 224,224,224;
  76. --color-link: 206,232,255;
  77. --color-link-hover: 125,155,208;
  78. --color-post-background: 31,43,62;
  79. --color-post-borders: 55,67,87;
  80. --color-post-accent: 55,67,87;
  81. --color-post-accent-text: 255,255,255;
  82. }
  83.  
  84. html.theme-transition,
  85. html.theme-transition *,
  86. html.theme-transition *:before,
  87. html.theme-transition *:after {
  88. transition: 0s !important;
  89. transition-delay: 0 !important;
  90. }
  91.  
  92. /*----------TUMBLR CONTROLS----------*/
  93.  
  94. *,*::before,*::after {
  95. -webkit-font-smoothing: antialiased;
  96. text-rendering: optimizeLegibility;
  97. -moz-osx-font-smoothing: grayscale;
  98. box-sizing: border-box;
  99. }
  100.  
  101. * {
  102. margin: 0;
  103. scrollbar-width: thin; /* firefox scrollbar */
  104. scrollbar-color: rgb(var(--color-accent)) rgb(var(--main-background));
  105. }
  106.  
  107. html {
  108. height: 100%;
  109. font-size: 62.5%;
  110. scrollbar-width: thin;
  111. }
  112.  
  113. button,
  114. textarea,
  115. select {
  116. font: inherit;
  117. }
  118.  
  119. button {
  120. outline: none;
  121. border: 0;
  122. background: transparent;
  123. padding: 0;
  124. cursor: pointer;
  125. color: inherit;
  126. }
  127.  
  128. input{
  129. font: inherit;
  130. border: none;
  131. outline: 0;
  132. padding: 0;
  133. background-color: transparent;
  134. color: rgb(var(--color-text));
  135. }
  136.  
  137. p,h1,h2,h3,h4,h5,h6 {
  138. overflow-wrap: break-word;
  139. }
  140.  
  141. .tmblr-iframe-pushdown {
  142. padding-top: 0!important;
  143. }
  144.  
  145. .iframe-controls--phone-mobile {
  146. display: none!important;
  147. }
  148.  
  149. /* ------------------------------------- tooltips */
  150. .tippy-box[data-theme~='custom'] {
  151. font-size: var(--body-font);
  152. font-weight: 400;
  153. text-align:center;
  154. padding: 0;
  155. color: rgb(var(--color-accent-text));
  156. border: 0px solid rgb(var(--borders));
  157. border-radius: var(--round1);
  158. background-color: rgb(var(--color-accent));
  159. text-transform: lowercase;
  160. margin: 1.5rem;
  161. z-index: 9999999;
  162. }
  163.  
  164. ::-moz-selection {
  165. background-color: rgb(var(--color-accent));
  166. color:rgb(var(--color-text));
  167. }
  168.  
  169. ::selection {
  170. background-color: rgb(var(--color-accent));
  171. color:rgb(var(--color-text));
  172. }
  173.  
  174. /* ------------------------------------- scrollbar (not firefrox) */
  175. ::-webkit-scrollbar {
  176. width: 8px;
  177. background-color: rgb(var(--color-background));
  178. }
  179.  
  180. ::-webkit-scrollbar-thumb {
  181. background: rgb(var(--color-accent));
  182. border-radius: var(--round1);
  183. }
  184.  
  185. ::-webkit-scrollbar-track {
  186. background-color: rgb(var(--color-background));
  187. }
  188.  
  189. iframe.tmblr-iframe, .tmblr-iframe {
  190. display: none;
  191. }
  192.  
  193. body {
  194. font-size: var(--body-font);
  195. line-height: var(--line-height);
  196. font-family: "Poppins", sans-serif;
  197. font-weight: var(--normal-font-weight);
  198. background-color: rgb(var(--color-background));
  199. color: rgb(var(--color-text));
  200. }
  201.  
  202. a {
  203. text-decoration: none;
  204. font-weight: var(--medium-font-weight);
  205. color: rgb(var(--color-link));
  206. }
  207.  
  208. a:hover {
  209. color: rgb(var(--color-link-hover));
  210. transition: .4s;
  211. }
  212.  
  213. .buttons {
  214. display: inline-flex;
  215. align-items: center;
  216. gap: 0.5rem;
  217. position: fixed;
  218. left: 1rem;
  219. top: 1rem;
  220. z-index: 99;
  221. }
  222.  
  223. .toggle-menu {
  224. display: none;
  225. }
  226.  
  227. button.theme-toggle, .toggle-menu {
  228. color: rgb(var(--color-link));
  229. font-size: 2.5rem;
  230. }
  231.  
  232. .light-on {
  233. display: var(--light-on);
  234. }
  235.  
  236. .light-off {
  237. display: var(--light-off);
  238. }
  239.  
  240. #container {
  241. display: flex;
  242. justify-content: center;
  243. align-items: center;
  244. min-height: 100vh;
  245. }
  246.  
  247. #carousel {
  248. flex: initial;
  249. display: block;
  250. }
  251.  
  252. #carousel {
  253. overflow: hidden;
  254. width: 100%;
  255. height: 100vh;
  256. height: 100dvh;
  257. }
  258.  
  259. .cage {
  260. overflow-y: auto;
  261. overflow-x: hidden;
  262. }
  263.  
  264. .p-wrapper {
  265. position: relative;
  266. width: 100%;
  267. height: 100%;
  268. transition: transform 0.4s ease-in-out;
  269. }
  270.  
  271. #button_a:checked ~ #carousel .p-wrapper {
  272. -webkit-transform: translateY(0);
  273. transform: translateY(0);
  274. }
  275.  
  276. #button_b:checked ~ #carousel .p-wrapper {
  277. -webkit-transform: translateY(-100%);
  278. transform: translateY(-100%);
  279. }
  280.  
  281. #button_c:checked ~ #carousel .p-wrapper {
  282. -webkit-transform: translateY(-200%);
  283. transform: translateY(-200%);
  284. }
  285.  
  286. #button_d:checked ~ #carousel .p-wrapper {
  287. -webkit-transform: translateY(-300%);
  288. transform: translateY(-300%);
  289. }
  290.  
  291. [class^="panel_"] {
  292. overflow: auto;
  293. position: relative;
  294. width: inherit;
  295. height: inherit;
  296. padding: 48px;
  297. }
  298.  
  299. #navigation {
  300. position: fixed;
  301. top: 1rem;
  302. right: 1rem;
  303. z-index: 99;
  304. display: flex;
  305. justify-content: center;
  306. align-items: center;
  307. gap: var(--gap1)
  308. }
  309.  
  310. [class^="label_"] {
  311. display: flex;
  312. justify-content: center;
  313. align-items: center;
  314. cursor: pointer;
  315. margin: 8px 0;
  316. width: 32px;
  317. height: 32px;
  318. border-radius: 4px;
  319. color: rgb(var(--color-link));
  320. background-color: rgb(var(--color-post-background));
  321. transition: all 0.3s ease;
  322. }
  323.  
  324. [class^="label_"]:hover {
  325. color: rgb(var(--color-accent-text));
  326. background-color: rgb(var(--color-accent));
  327. }
  328.  
  329. #button_a:checked ~ #navigation .label_a,
  330. #button_b:checked ~ #navigation .label_b,
  331. #button_c:checked ~ #navigation .label_c,
  332. #button_d:checked ~ #navigation .label_d {
  333. cursor: default;
  334. color: rgb(var(--color-accent-text));
  335. background-color: rgb(var(--color-accent));
  336. }
  337.  
  338. @media screen and (max-width: 1100px) {
  339.  
  340. }
  341.  
  342. @media screen and (max-width: 850px) {
  343.  
  344.  
  345. }
  346.  
  347. </style>
  348. </head>
  349. <body>
  350.  
  351. <div class="buttons">
  352. <button class="theme-toggle" aria-label="toggle dark or light mode" type="button">
  353. <i class="ti ti-sun light-on"></i>
  354. <i class="ti ti-moon light-off"></i>
  355. </button>
  356. <button class="toggle-menu" aria-label="toggle menu" type="button" id="menu-button">
  357. <i class="ti ti-menu-deep"></i>
  358. </button>
  359. </div>
  360.  
  361. <div id="container">
  362.  
  363. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  364. <input hidden type="radio" name="carousel-control" id="button_b"/>
  365. <input hidden type="radio" name="carousel-control" id="button_c"/>
  366. <input hidden type="radio" name="carousel-control" id="button_d"/>
  367.  
  368. <div id="navigation">
  369. <label for="button_a" class="label_a"> <span> a </span> </label>
  370. <label for="button_b" class="label_b"> <span> b </span> </label>
  371. <label for="button_c" class="label_c"> <span> c </span> </label>
  372. <label for="button_d" class="label_d"> <span> d </span> </label>
  373. </div> <!-- // #navigation -->
  374.  
  375. <div id="carousel">
  376. <div class="p-wrapper">
  377. <section class="panel_a cage">
  378. <h2> Panel a </h2>
  379. </section>
  380.  
  381. <section class="panel_b cage">
  382. <h2> Panel b </h2>
  383. </section>
  384.  
  385. <section class="panel_c cage">
  386. <h2> Panel c </h2>
  387. </section>
  388.  
  389. <section class="panel_d cage">
  390. <h2> Panel d </h2>
  391. </section>
  392. </div> <!-- // .p-wrapper -->
  393. </div> <!-- // #carousel -->
  394.  
  395. </div> <!-- // #container -->
  396.  
  397.  
  398. <!-- TOOLTIP: tippy.js -->
  399. <script src="https://unpkg.com/@popperjs/core@2"></script>
  400. <script src="https://unpkg.com/tippy.js@6"></script>
  401.  
  402. <script>
  403.  
  404. // ------------------- tooltip
  405. const commonOptions = {
  406. theme: "custom",
  407. arrow: false,
  408. followCursor: true,
  409. placement: "top",
  410. touch: "hold",
  411. };
  412.  
  413. tippy("[title]", {
  414. ...commonOptions,
  415. content(reference) {
  416. const title = reference.getAttribute("title");
  417. reference.removeAttribute("title");
  418. return title;
  419. },
  420. });
  421.  
  422. // ------------------- toggle menu
  423. const menu = document.getElementById("nav-container");
  424. const button = document.getElementById("menu-button");
  425. const buttonOpen = button.querySelector("i");
  426.  
  427. button.addEventListener("click", () => {
  428. menu.classList.toggle("open");
  429.  
  430. const isOpen = menu.classList.contains("open");
  431.  
  432. if(isOpen) {
  433. buttonOpen.setAttribute("class", "ti ti-x");
  434. } else {
  435. buttonOpen.setAttribute("class", "ti ti-menu-deep");
  436. }
  437. });
  438.  
  439. // ------------------- toggle dark/light by @mournstera
  440. const themeToggleButtons = document.querySelectorAll(".theme-toggle");
  441.  
  442. themeToggleButtons.forEach((btn) => {
  443. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  444. const initialTooltipText = storedTheme === "dark" ? "Toggle light mode" : "Toggle dark mode";
  445. tippy(btn, {
  446. ...commonOptions,
  447. content: initialTooltipText,
  448. });
  449. btn.addEventListener("click", function () {
  450.  
  451. document.documentElement.classList.add("theme-transition");
  452.  
  453. let currentTheme = document.documentElement.getAttribute("data-theme");
  454. let targetTheme = (currentTheme === "light") ? "dark" : "light";
  455.  
  456. window.setTimeout(function () {
  457. document.documentElement.classList.remove("theme-transition");
  458. }, 50);
  459.  
  460. document.documentElement.setAttribute("data-theme", targetTheme);
  461. localStorage.setItem("theme", targetTheme);
  462. });
  463. });
  464. </script>
  465. </body>
  466. </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!