nicolas-sage

custom page 05

Sep 11th, 2024
158
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 41.15 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <title>bookshelf / {Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10. <!----
  11. _________
  12. / \
  13. | __ __ |
  14. | |__| |__| | CUSTOM PAGE 05 BY SAGE / PHANTOMCODES
  15. | | https://phantomcodes.tumblr.com
  16. | _ _ _ |
  17. |_| |_| |_| |_|
  18.  
  19. SEARCH 'EDIT HERE'
  20. theme pack guide: https://phantomcodes.tumblr.com/briethemepackguide
  21.  
  22. CREDITS:
  23. - tabler icons / https://tabler-icons.io/
  24. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  25. - bunny fonts / https://fonts.bunny.net/
  26.  
  27. ---->
  28.  
  29. <!---- JQUERY ---->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!--- FILTERS --->
  33. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  34. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  35.  
  36. <!----- BUNNY FONTS ---->
  37. <link href="https://fonts.bunny.net/css?family=Lora:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Merriweather:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  38.  
  39. <!---- ICONS ---->
  40. <script src="https://unpkg.com/phosphor-icons"></script>
  41. <script src="https://unpkg.com/[email protected]"></script>
  42. <script src="//pull.cappuccicons.com/cpf.js"></script>
  43.  
  44. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  45. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  46.  
  47. <!---- TOOLTIPS ---->
  48. <script src="https://unpkg.com/popper.js@1"></script>
  49. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  50.  
  51. <!--- day/night --->
  52. <script>
  53. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  54. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  55. </script>
  56.  
  57. <!------- CSS -------->
  58. <style>
  59.  
  60. /* theme options - common */
  61. :root {
  62.  
  63. /*--- EDIT HERE: corners & fonts ---*/
  64. --Corners:5px;
  65. --BodyFont:'Lora';
  66. --TitleFont:'Merriweather';
  67. --FontSize:13px;
  68.  
  69. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .8);
  70. --ColorOpaquePostsLess:rgb(from var(--ColorPosts) r g b / .5);
  71. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  72. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  73. --ColorOpaqueAccentThree:rgb(from var(--ColorAccentThree) r g b / .3);
  74. }
  75.  
  76. /* theme options - day/night */
  77. :root, html[data-theme='light'] {
  78. --LightOn: flex;
  79. --LightOff: none;
  80.  
  81. /*--- EDIT HERE: daymode colors ---*/
  82. --ColorBackground:#eee;
  83. --ColorPosts:#f2f2f2;
  84. --ColorBorders:#ccc;
  85. --ColorTitle:#404040;
  86. --ColorText:#606060;
  87. --ColorAccentOne:#cd709d;
  88. --ColorAccentTwo:#de8c9b;
  89. --ColorAccentThree:#e69189;
  90.  
  91. --LightShadow:rgba(255,255,255,.5);
  92. --LightShadowLess:rgba(255,255,255,.25);
  93. --DarkShadow:rgba(0,0,0,.4);
  94. --DarkShadowLess:rgba(0,0,0,.25);
  95. --DarkShadowLeast:rgba(0,0,0,.1);
  96. }
  97. html[data-theme='dark'] {
  98. --LightOn: none;
  99. --LightOff: flex;
  100.  
  101. /*--- EDIT HERE: nightmode colors ---*/
  102. --ColorBackground:#383838;
  103. --ColorPosts:#3a3a3a;
  104. --ColorBorders:#4a4a4a;
  105. --ColorTitle:#fafafa;
  106. --ColorText:#dadada;
  107. --ColorAccentOne:#ffbad7;
  108. --ColorAccentTwo:#ffa5b6;
  109. --ColorAccentThree:#ffb7b7;
  110.  
  111. --LightShadow:rgba(255,255,255,.3);
  112. --LightShadowLess:rgba(255,255,255,.15);
  113. --DarkShadow:rgba(0,0,0,.8);
  114. --DarkShadowLess:rgba(0,0,0,.5);
  115. --DarkShadowLeast:rgba(0,0,0,.15);
  116. }
  117. html.theme-transition,
  118. html.theme-transition *,
  119. html.theme-transition *:before,
  120. html.theme-transition *:after {
  121. transition: 0s !important;
  122. transition-delay: 0 !important;
  123. }
  124.  
  125. .light-on{
  126. display: var(--LightOn);
  127. }
  128. .light-off{
  129. display: var(--LightOff);
  130. }
  131.  
  132. /*--- TOOLTIPS ---*/
  133.  
  134. .tippy-tooltip.custom-theme {
  135. font-size:.95em;
  136. font-weight:500;
  137. color:var(--ColorPosts);
  138. text-transform:lowercase;
  139. text-align:center;
  140. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  141. border-radius:5px;
  142. }
  143.  
  144. /*--- SCROLLBAR ---*/
  145. ::-webkit-scrollbar {
  146. width:4px;
  147. height:4px;
  148. background:var(--ColorBackground);
  149. }
  150. ::-webkit-scrollbar-track {
  151. background:var(--ColorBackground);
  152. border-radius: 5px;
  153. }
  154. ::-webkit-scrollbar-thumb {
  155. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  156. border-radius: 5px;
  157. }
  158.  
  159. /*--- TEXT SELECTION ---*/
  160. ::-moz-selection { /* Code for Firefox */
  161. color:var(--ColorPosts);
  162. background:var(--ColorAccentOne);
  163. }
  164.  
  165. ::selection {
  166. color:var(--ColorPosts);
  167. background:var(--ColorAccentOne);
  168. }
  169.  
  170. * {box-sizing:border-box;}
  171.  
  172. body {
  173. font-family:var(--BodyFont), sans-serif;
  174. font-size:var(--FontSize);
  175. color:var(--ColorText);
  176. line-height:150%;
  177. word-wrap:break-word;
  178. letter-spacing:.04em;
  179. margin:0;
  180. background-color:var(--ColorBackground);
  181. }
  182. body {
  183. opacity:1;
  184. transition:.75s opacity;
  185. }
  186.  
  187. body.fade-out {
  188. opacity:0;
  189. transition:none;
  190. }
  191. html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
  192.  
  193. a {
  194. color:var(--ColorAccentOne);
  195. text-decoration:none;
  196. -webkit-transition: all 0.4s;
  197. -moz-transition: all 0.4s;
  198. -ms-transition: all 0.4s;
  199. -o-transition: all 0.4s;
  200. transition: all 0.4s;
  201. }
  202.  
  203. a:hover {
  204. color:var(--ColorAccentThree);
  205. -webkit-transition: all 0.4s;
  206. -moz-transition: all 0.4s;
  207. -ms-transition: all 0.4s;
  208. -o-transition: all 0.4s;
  209. transition: all 0.4s;
  210. }
  211.  
  212. blockquote {
  213. border-left:1.5px solid var(--ColorBorders);
  214. padding-left:.75rem;
  215. margin-left:1rem;
  216. }
  217. blockquote p {padding:0!important;}
  218.  
  219. ul {list-style-type:circle;}
  220. ol {list-style-type:decimal-leading-zero; margin:0;}
  221. li::marker {color:var(--ColorAccentOne);}
  222.  
  223. small {font-size:.95em;}
  224. big {font-size:1.1em;}
  225.  
  226. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  227. h1 a {color:var(--ColorTitle);}
  228. h1 a:hover {color:var(--ColorAccentThree);}
  229. h2 {font-size:1.25em; color:var(--ColorTitle);}
  230. h3 {font-size:1.15em; color:var(--ColorTitle);}
  231. h4 {font-size:1.1em; color:var(--ColorTitle); margin-bottom:1rem;}
  232. h5 {font-size:1.05em; color:var(--ColorTitle);}
  233. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  234.  
  235. button {font-size:1em;}
  236.  
  237. hr {
  238. height:1px;
  239. border:none;
  240. box-shadow:none;
  241. background:var(--ColorBorders);
  242. }
  243.  
  244. pre {
  245. word-wrap:break-word!important;
  246. white-space:pre-wrap;
  247. }
  248.  
  249. b, strong {
  250. color:var(--ColorTitle);
  251. font-weight:800;
  252. }
  253.  
  254. b a:hover {
  255. color:var(--ColorAccentThree);
  256. -webkit-transition: all 0.4s;
  257. -moz-transition: all 0.4s;
  258. -ms-transition: all 0.4s;
  259. -o-transition: all 0.4s;
  260. transition: all 0.4s;
  261. }
  262.  
  263. /* common link effects */
  264. .moreinfotext a {
  265. display:inline-block;
  266. position:relative;
  267. }
  268. .moreinfotext a:after {
  269. content: '';
  270. position:absolute;
  271. bottom:0;
  272. left:0;
  273. width:100%;
  274. height:1.5px;
  275. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  276. transform:scaleX(0);
  277. transform-origin:center;
  278. transition:transform 0.4s ease-out;
  279. }
  280. .moreinfotext a:hover:after {
  281. transform:scaleX(1);
  282. transform-origin:center;
  283. }
  284.  
  285. /*--- WELCOME POPUP ---*/
  286. .welcomewrap {
  287. position:fixed;
  288. top:0;
  289. left:0;
  290. right:0;
  291. bottom:0;
  292. width:100%;
  293. height:100%;
  294. display:none;
  295. justify-content:center;
  296. align-items:center;
  297. background:var(--ColorBackground);
  298. z-index:999999;
  299. }
  300. body.welcome-click .welcomewrap {display:none;}
  301. .welcome {
  302. width:100%;
  303. max-width:350px;
  304. overflow:hidden;
  305. display:flex;
  306. flex-direction:column;
  307. justify-content:center;
  308. align-items:center;
  309. background:var(--ColorPosts);
  310. border-radius:var(--Corners);
  311. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  312. }
  313. .welcometitle {
  314. width:100%;
  315. padding:.25rem .5rem .25rem .5rem;
  316. display:flex;
  317. justify-content:space-between;
  318. align-items:center;
  319. gap:1rem;
  320. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  321. }
  322. .welcometitle b {font-size:.975em; color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  323. .welcometitle i {
  324. font-size:.9em;
  325. color:var(--ColorPosts);
  326. text-shadow:0 1px rgba(0,0,0,.1);
  327. width:1.1rem;
  328. height:1.1rem;
  329. display:flex;
  330. justify-content:center;
  331. align-items:center;
  332. border-radius:calc(var(--Corners) - 1px);
  333. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  334. }
  335.  
  336. .welcomelogin {
  337. width:100%;
  338. padding:1rem;
  339. display:flex;
  340. flex-direction:column;
  341. align-items:center;
  342. gap:.5rem;
  343. }
  344. .welcomelogin li {
  345. position:relative;
  346. width:100%;
  347. margin-left:-2.75rem;
  348. display:flex;
  349. justify-content:center;
  350. align-items:center;
  351. gap:1rem;
  352. }
  353. .welcomelogin img {
  354. width:2.75rem;
  355. height:2.75rem;
  356. }
  357. .welcomelogin li b {font-weight:500;}
  358.  
  359. a#welcomebutton {
  360. color:var(--ColorTitle);
  361. padding:.25rem .5rem .25rem .5rem;
  362. display:flex;
  363. justify-content:center;
  364. align-items:center;
  365. border-radius:var(--Corners);
  366. border:1px solid var(--DarkShadow);
  367. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  368. cursor:pointer;
  369. }
  370. a#welcomebutton:hover {box-shadow:inset 1px 1px var(--LightShadow), 1px 1px none;}
  371.  
  372. /*--- FIXED BUTTONS ---*/
  373. .fixedbuttons {
  374. position:fixed;
  375. top:.75rem;
  376. right:.75rem;
  377. display:flex;
  378. justify-content:flex-end;
  379. align-items:center;
  380. gap:.5rem;
  381. z-index:9999;
  382. }
  383.  
  384. /* TUMBLR CONTROLS */
  385. a#controlsbutton {
  386. display:flex;
  387. justify-content:center;
  388. align-items:center;
  389. background:var(--ColorBackground);
  390. cursor:help;
  391. }
  392. a#controlsbutton i {
  393. font-size:1.45em;
  394. color:var(--ColorTitle);
  395. -webkit-transition: all 0.4s;
  396. -moz-transition: all 0.4s;
  397. -ms-transition: all 0.4s;
  398. -o-transition: all 0.4s;
  399. transition: all 0.4s;
  400. }
  401. a#controlsbutton:hover i {
  402. color:var(--ColorAccentOne);
  403. -webkit-animation-duration: 1.5s;
  404. animation-duration: 1.5s;
  405. -webkit-animation-fill-mode: both;
  406. animation-fill-mode: both;
  407. -webkit-animation-timing-function: ease-in-out;
  408. animation-timing-function: ease-in-out;
  409. animation-iteration-count:1;
  410. -webkit-animation-iteration-count:1;
  411. animation-name:tumblrcontrols;
  412. -moz-animation-name:tumblrcontrols;
  413. }
  414. body.controls-click a#controlsbutton i {color:var(--ColorAccentOne);}
  415.  
  416. @keyframes tumblrcontrols {
  417. 45% {
  418. -webkit-transform: rotate(180deg);
  419. -ms-transform: rotate(180deg);
  420. transform: rotate(180deg);
  421. }
  422. 55% {
  423. -webkit-transform: rotate(180deg);
  424. -ms-transform: rotate(180deg);
  425. transform: rotate(180deg);
  426. }
  427. 100% {
  428. -webkit-transform: rotate(360deg);
  429. -ms-transform: rotate(360deg);
  430. transform: rotate(360deg);
  431. }
  432. }
  433.  
  434. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  435. transform:scale(.65);
  436. margin-right:2rem;
  437. opacity:0;
  438. visibility:hidden;
  439. z-index:999999999!important;
  440. }
  441.  
  442. body.controls-click iframe.tmblr-iframe {
  443. opacity:1.0;
  444. visibility:visible;
  445. -webkit-transition: all 0.5s;
  446. -moz-transition: all 0.5s;
  447. -ms-transition: all 0.5s;
  448. -o-transition: all 0.5s;
  449. transition: all 0.5s;
  450. }
  451.  
  452. /* MAIN CONTENT */
  453.  
  454. main {
  455. width:calc(100% - 13rem);
  456. margin:4rem 2rem 3rem 11rem;
  457. display:flex;
  458. justify-content:center;
  459. }
  460.  
  461. section {}
  462.  
  463. /*--- SIDEBAR ---*/
  464. .sidebar {
  465. position:fixed;
  466. top:0;
  467. left:0;
  468. bottom:0;
  469. width:11rem;
  470. height:100%;
  471. padding:4rem 1rem 1rem 1rem;
  472. z-index:99;
  473. }
  474.  
  475. /*--- FILTERS ---*/
  476. .sort {
  477. position:relative;
  478. width:100%;
  479. display:flex;
  480. flex-direction:column;
  481. align-items:center;
  482. gap:1rem;
  483. background:var(--ColorBackground);
  484. border-radius:var(--Corners);
  485. z-index:1;
  486. }
  487.  
  488. .filtertitle {width:100%; display:flex; justify-content:center; align-items:center;}
  489. .filtertitle b {
  490. width:fit-content;
  491. position:relative;
  492. display:inline-block;
  493. font-family:var(--TitleFont), sans-serif;
  494. font-size:1.05em;
  495. text-shadow:0 .5px var(--ColorPosts);
  496. line-height:120%;
  497. z-index:1;
  498. }
  499. .filtertitle b:after {
  500. content: '';
  501. position:absolute;
  502. bottom:0;
  503. left:0;
  504. width:100%;
  505. height:50%;
  506. opacity:.5;
  507. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  508. z-index:-1;
  509. }
  510.  
  511. .filterbox ul {
  512. width:fit-content;
  513. margin:0;
  514. padding:0;
  515. display:flex;
  516. justify-content:space-evenly;
  517. align-items:center;
  518. flex-wrap:wrap;
  519. gap:1rem .5rem;
  520. }
  521.  
  522. .filterbox a {
  523. width:calc(50% - .25rem);
  524. display:flex;
  525. flex-direction:column;
  526. align-items:center;
  527. gap:.25rem;
  528. }
  529.  
  530. .filterbox img {
  531. width:1.75rem;
  532. height:1.75rem;
  533. -webkit-transition: all 0.4s;
  534. -moz-transition: all 0.4s;
  535. -ms-transition: all 0.4s;
  536. -o-transition: all 0.4s;
  537. transition: all 0.4s;
  538. }
  539. .filterbox a:hover img, .filterbox a.selected img {transform:scale(1.1);}
  540.  
  541. .filterbox b {
  542. font-size:.95em;
  543. font-weight:normal;
  544. color:var(--ColorText);
  545. -webkit-transition: all 0.2s;
  546. -moz-transition: all 0.2s;
  547. -ms-transition: all 0.2s;
  548. -o-transition: all 0.2s;
  549. transition: all 0.2s;
  550. }
  551. .filterbox a.selected b {font-weight:bold; color:var(--ColorTitle);}
  552.  
  553. /*--- FOLDERS ---*/
  554. .folder-wrap {
  555. width:300px;
  556. height:525px;
  557. margin-bottom:15px;
  558. display:flex;
  559. flex-direction:column;
  560. align-items:center;
  561. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  562. border-radius:var(--Corners);
  563. z-index:1;
  564. }
  565. .folder {
  566. position:relative;
  567. overflow:hidden;
  568. margin-top:1px;
  569. width:calc(100% - 2px);
  570. height:calc(100% - 2px);
  571. display:flex;
  572. flex-direction:column;
  573. align-items:center;
  574. background:var(--ColorPosts);
  575. border-radius:calc(var(--Corners) - 1px);
  576. }
  577.  
  578. .folder-top {
  579. width:100%;
  580. display:flex;
  581. flex-direction:column;
  582. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  583. }
  584.  
  585. .folder-title {
  586. padding:.25rem .5rem .25rem .5rem;
  587. display:flex;
  588. justify-content:space-between;
  589. align-items:center;
  590. gap:.5rem;
  591. background:var(--ColorOpaquePostsLess);
  592. }
  593. .folder-title li.ftitle {
  594. display:flex;
  595. justify-content:flex-start;
  596. align-items:center;
  597. gap:.25rem;
  598. }
  599. li.ftitle b, li.ftitle span {font-size:.95em; color:var(--ColorTitle); text-shadow:0 1px rgba(0,0,0,.1);}
  600. .folder-title li.ficons {
  601. color:var(--ColorTitle);
  602. display:flex;
  603. justify-content:flex-end;
  604. align-items:center;
  605. gap:.25rem;
  606. }
  607. li.ficons i {
  608. font-size:.9em;
  609. width:1.1rem;
  610. height:1.1rem;
  611. display:flex;
  612. justify-content:center;
  613. align-items:center;
  614. border-radius:calc(var(--Corners) - 1px);
  615. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  616. }
  617. li.ficons span {
  618. font-size:.95em;
  619. font-weight:600;
  620. line-height:100%;
  621. padding-bottom:.25rem;
  622. width:1.1rem;
  623. height:1.1rem;
  624. display:flex;
  625. justify-content:center;
  626. align-items:center;
  627. border-radius:calc(var(--Corners) - 1px);
  628. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  629. cursor:default;
  630. }
  631.  
  632. .folder-tabs {
  633. width:100%;
  634. padding:.25rem .5rem 0 .5rem;
  635. display:flex;
  636. justify-content:flex-start;
  637. align-items:center;
  638. gap:.25rem;
  639. }
  640. .tab {
  641. position:relative;
  642. font-size:.925em;
  643. background:var(--ColorOpaquePosts);
  644. border-radius:var(--Corners) var(--Corners) 0 0;
  645. box-shadow:inset 1px 1px 1px var(--LightShadow), 1px 0px var(--DarkShadow);
  646. }
  647. .tab.cover {
  648. font-weight:500;
  649. color:var(--ColorTitle);
  650. padding:.25rem .5rem .15rem .5rem;
  651. cursor:default;
  652. }
  653. .tab.info {
  654. color:var(--ColorText);
  655. margin-top:.125rem;
  656. padding:.125rem .5rem .15rem .5rem;
  657. cursor:help;
  658. -webkit-transition: all 0.2s;
  659. -moz-transition: all 0.2s;
  660. -ms-transition: all 0.2s;
  661. -o-transition: all 0.2s;
  662. transition: all 0.2s;
  663. }
  664. .tab.info:hover {margin-top:0; padding-top:.25rem;}
  665. .tab.info.more-click {margin-top:0; padding-top:.25rem; font-weight:500; color:var(--ColorTitle);}
  666.  
  667. .folder-site {
  668. width:100%;
  669. padding:.25rem;
  670. display:flex;
  671. justify-content:flex-start;
  672. align-items:center;
  673. gap:.5rem;
  674. background:var(--ColorOpaquePosts);
  675. }
  676. .folder-site li {
  677. padding:.4rem;
  678. display:flex;
  679. align-items:center;
  680. gap:.15rem;
  681. background:var(--ColorOpaquePostsLess);
  682. border-radius:var(--Corners);
  683. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  684. }
  685. .folder-site li i {font-size:1em; color:rgba(0,0,0,.25);}
  686. .folder-site li i#yes {
  687. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  688. -webkit-background-clip:text;
  689. -webkit-text-fill-color:transparent;
  690. }
  691. .folder-site li i#yeshalf {
  692. background: linear-gradient(to right, var(--ColorAccentOne) 0%, var(--ColorAccentTwo) 50%, rgba(0,0,0,.25) 51%, rgba(0,0,0,.25) 100%);
  693. -webkit-background-clip:text;
  694. -webkit-text-fill-color:transparent;
  695. }
  696.  
  697. a.fs-name {
  698. width:100%;
  699. overflow:hidden;
  700. padding:.2rem .25rem .2rem .5rem;
  701. display:flex;
  702. justify-content:space-between;
  703. align-items:center;
  704. gap:.25rem;
  705. background:var(--ColorOpaquePosts);
  706. border-radius:var(--Corners);
  707. box-shadow:inset 1px 1px var(--DarkShadowLess);
  708. }
  709. a.fs-name:hover {box-shadow:inset 1px 1px var(--DarkShadow);}
  710. a.fs-name b {
  711. font-size:.9em;
  712. font-weight:normal;
  713. color:var(--ColorText);
  714. white-space:nowrap;
  715. overflow:hidden;
  716. text-overflow:ellipsis;
  717. -webkit-transition: all 0.4s;
  718. -moz-transition: all 0.4s;
  719. -ms-transition: all 0.4s;
  720. -o-transition: all 0.4s;
  721. transition: all 0.4s;
  722. }
  723. a.fs-name:hover b {color:var(--ColorTitle);}
  724. a.fs-name .fs-icon {
  725. padding:.2rem;
  726. display:flex;
  727. justify-content:center;
  728. align-items:center;
  729. border-radius:calc(var(--Corners) - 1px);
  730. box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
  731. -webkit-transition: all 0.4s;
  732. -moz-transition: all 0.4s;
  733. -ms-transition: all 0.4s;
  734. -o-transition: all 0.4s;
  735. transition: all 0.4s;
  736. }
  737. a.fs-name:hover .fs-icon {box-shadow:inset 1px 1px var(--LightShadowLess), 1px 1px var(--DarkShadowLeast);}
  738. .fs-icon i {
  739. font-size:1.1em;
  740. color:var(--ColorText);
  741. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  742. background-clip:text;
  743. -webkit-background-clip:text;
  744. transition:ease-in-out .4s;
  745. }
  746. a.fs-name:hover i {transform:rotate(-90deg); color:transparent;}
  747.  
  748. .folder-cont {
  749. position:relative;
  750. width:100%;
  751. height:100%;
  752. overflow-y:auto;
  753. padding:.35rem;
  754. display:flex;
  755. flex-direction:column;
  756. gap:.25rem;
  757. }
  758. .folder-cont::-webkit-scrollbar {
  759. width:1px;
  760. height:1px;
  761. background:transparent;
  762. }
  763. .folder-cont::-webkit-scrollbar-track {background:transparent;}
  764. .folder-cont::-webkit-scrollbar-thumb {background:transparent;}
  765.  
  766. .book-img {
  767. width:100%;
  768. height:100%;
  769. display:flex;
  770. justify-content:center;
  771. align-items:center;
  772. border-radius:calc(var(--Corners) - 2px);
  773. }
  774. .book-img img {
  775. width:100%;
  776. height:100%;
  777. object-fit:cover;
  778. border-radius:calc(var(--Corners) - 2px);
  779. }
  780.  
  781. .moreinfo {
  782. position:absolute;
  783. top:0;
  784. left:0;
  785. width:100%;
  786. height:100%;
  787. overflow-y:auto;
  788. font-size:.95em;
  789. padding:.5rem;
  790. background:var(--ColorPosts);
  791. }
  792. .moreinfotext {
  793. width:100%;
  794. height:100%;
  795. overflow-y:auto;
  796. }
  797. .moreinfotext::-webkit-scrollbar {
  798. width:2px;
  799. height:2px;
  800. background:transparent;
  801. }
  802. .moreinfotext::-webkit-scrollbar-track {background:transparent;}
  803. .moreinfotext li {list-style-type:circle; margin-left:1rem; margin-bottom:0;}
  804.  
  805. /*--- FOOTER ---*/
  806. footer {
  807. position:fixed;
  808. bottom:0;
  809. left:0;
  810. right:0;
  811. width:100%;
  812. height:2rem;
  813. padding:.5rem;
  814. display:flex;
  815. justify-content:space-between;
  816. align-items:center;
  817. gap:1rem;
  818. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  819. z-index:9999;
  820. }
  821.  
  822. .footerleft {
  823. display:flex;
  824. justify-content:flex-start;
  825. align-items:center;
  826. gap:.5rem;
  827. }
  828. .footerleft a {
  829. display:flex;
  830. justify-content:center;
  831. align-items:center;
  832. }
  833. .footerleft i {
  834. font-size:1.3em;
  835. color:var(--ColorPosts);
  836. text-shadow:0 1px rgba(0,0,0,.1);
  837. -webkit-transition: all 0.4s;
  838. -moz-transition: all 0.4s;
  839. -ms-transition: all 0.4s;
  840. -o-transition: all 0.4s;
  841. transition: all 0.4s;
  842. }
  843. .footerleft a:hover i {transform:scale(1.1);}
  844. a.homelink:after {
  845. content:'|';
  846. font-weight:500;
  847. color:var(--ColorOpaquePosts);
  848. line-height:100%;
  849. margin-bottom:.15rem;
  850. padding-left:.5rem;
  851. }
  852. a.homelink i {font-size:1.5em;}
  853.  
  854. .footerright {
  855. display:flex;
  856. justify-content:flex-end;
  857. align-items:center;
  858. gap:.5rem;
  859. }
  860. .footerright i {
  861. color:var(--ColorPosts);
  862. text-shadow:0 1px rgba(0,0,0,.1);
  863. }
  864. .footerright i#battery {font-size:1.5em;}
  865. .footerright i#volume {font-size:1.4em;}
  866.  
  867. /* SCROLL TO TOP */
  868. a#totop {
  869. display:none;
  870. justify-content:center;
  871. align-items:center;
  872. cursor:help;
  873. }
  874. a#totop i {font-size:1.4em;}
  875. a#totop:hover i {
  876. -webkit-animation-duration: 2.5s;
  877. animation-duration: 2.5s;
  878. -webkit-animation-fill-mode: both;
  879. animation-fill-mode: both;
  880. -webkit-animation-timing-function: ease-in-out;
  881. animation-timing-function: ease-in-out;
  882. animation-iteration-count:1;
  883. -webkit-animation-iteration-count:1;
  884. animation-name:totop;
  885. -moz-animation-name:totop;
  886. }
  887.  
  888. @keyframes totop {
  889. 0% {
  890. -webkit-transform: translateY(0px);
  891. -ms-transform: translateY(0px);
  892. transform: translateY(0px)
  893. }
  894. 10% {
  895. -webkit-transform: translateY(-3px);
  896. -ms-transform: translateY(-3px);
  897. transform: translateY(-3px)
  898. }
  899. 20% {
  900. -webkit-transform: translateY(0px);
  901. -ms-transform: translateY(0px);
  902. transform: translateY(0px)
  903. }
  904. 30% {
  905. -webkit-transform: translateY(-3px);
  906. -ms-transform: translateY(-3px);
  907. transform: translateY(-3px)
  908. }
  909. 40% {
  910. -webkit-transform: translateY(0px);
  911. -ms-transform: translateY(0px);
  912. transform: translateY(0px)
  913. }
  914. 50% {
  915. -webkit-transform: translateY(0px);
  916. -ms-transform: translateY(0px);
  917. transform: translateY(0px)
  918. }
  919. 60% {
  920. -webkit-transform: translateY(0px);
  921. -ms-transform: translateY(0px);
  922. transform: translateY(0px)
  923. }
  924. 70% {
  925. -webkit-transform: translateY(-3px);
  926. -ms-transform: translateY(-3px);
  927. transform: translateY(-3px)
  928. }
  929. 80% {
  930. -webkit-transform: translateY(0px);
  931. -ms-transform: translateY(0px);
  932. transform: translateY(0px)
  933. }
  934. 90% {
  935. -webkit-transform: translateY(-3px);
  936. -ms-transform: translateY(-3px);
  937. transform: translateY(-3px)
  938. }
  939. 100% {
  940. -webkit-transform: translateY(0px);
  941. -ms-transform: translateY(0px);
  942. transform: translateY(0px)
  943. }
  944. }
  945.  
  946. /* DAY/NIGHT */
  947. button#theme-toggle {
  948. position:relative;
  949. outline:none;
  950. border:none;
  951. background:none;
  952. padding:0;
  953. display:flex;
  954. justify-content:center;
  955. align-items:center;
  956. cursor:help;
  957. }
  958.  
  959. button#theme-toggle span {
  960. justify-content:center;
  961. align-items:center;
  962. -webkit-transition: all 0.4s;
  963. -moz-transition: all 0.4s;
  964. -ms-transition: all 0.4s;
  965. -o-transition: all 0.4s;
  966. transition: all 0.4s;
  967. }
  968.  
  969. button#theme-toggle i {
  970. font-size:1.3em;
  971. -webkit-transition: all 0.4s;
  972. -moz-transition: all 0.4s;
  973. -ms-transition: all 0.4s;
  974. -o-transition: all 0.4s;
  975. transition: all 0.4s;
  976. }
  977. button#theme-toggle:hover i {
  978. -webkit-transition: all 0.4s;
  979. -moz-transition: all 0.4s;
  980. -ms-transition: all 0.4s;
  981. -o-transition: all 0.4s;
  982. transition: all 0.4s;
  983. -webkit-animation-duration: .75s;
  984. animation-duration: .75s;
  985. -webkit-animation-fill-mode: both;
  986. animation-fill-mode: both;
  987. -webkit-animation-timing-function: ease-in-out;
  988. animation-timing-function: ease-in-out;
  989. animation-iteration-count:1;
  990. -webkit-animation-iteration-count:1;
  991. animation-name:daynight;
  992. -moz-animation-name:daynight;
  993. }
  994.  
  995. @keyframes daynight {
  996. 50% {
  997. -webkit-transform: scaleX(-1);
  998. -ms-transform: scaleX(-1);
  999. transform: scaleX(-1);
  1000. }
  1001. }
  1002.  
  1003. /*--- CREDIT: DO NOT TOUCH ---*/
  1004. a.credit {
  1005. display:flex;
  1006. justify-content:center;
  1007. align-items:center;
  1008. z-index:99999;
  1009. }
  1010. a.credit:before {
  1011. content:'|';
  1012. font-weight:500;
  1013. color:var(--ColorOpaquePosts);
  1014. line-height:100%;
  1015. margin-bottom:.15rem;
  1016. padding-right:.5rem;
  1017. }
  1018. a.credit i {
  1019. font-size:1.5em;
  1020. -webkit-transition: all 0.4s;
  1021. -moz-transition: all 0.4s;
  1022. -ms-transition: all 0.4s;
  1023. -o-transition: all 0.4s;
  1024. transition: all 0.4s;
  1025. }
  1026. a.credit:hover i {
  1027. -webkit-animation-duration: 2s;
  1028. animation-duration: 2s;
  1029. -webkit-animation-fill-mode: both;
  1030. animation-fill-mode: both;
  1031. -webkit-animation-timing-function: ease-in-out;
  1032. animation-timing-function: ease-in-out;
  1033. animation-iteration-count:infinite;
  1034. -webkit-animation-iteration-count:infinite;
  1035. animation-name: bounce;
  1036. -moz-animation-name: bounce;
  1037. }
  1038.  
  1039. @keyframes bounce {
  1040. 0% {
  1041. -webkit-transform: translateY(0px);
  1042. -ms-transform: translateY(0px);
  1043. transform: translateY(0px)
  1044. }
  1045. 25% {
  1046. -webkit-transform: translateY(-3px);
  1047. -ms-transform: translateY(-3px);
  1048. transform: translateY(-3px)
  1049. }
  1050. 50% {
  1051. -webkit-transform: translateY(0px);
  1052. -ms-transform: translateY(0px);
  1053. transform: translateY(0px)
  1054. }
  1055. 75% {
  1056. -webkit-transform: translateY(-3px);
  1057. -ms-transform: translateY(-3px);
  1058. transform: translateY(-3px)
  1059. }
  1060. 100% {
  1061. -webkit-transform: translateY(0px);
  1062. -ms-transform: translateY(0px);
  1063. transform: translateY(0px)
  1064. }
  1065. }
  1066.  
  1067. /*---- RESPONSIVENESS ---*/
  1068.  
  1069. {CustomCSS}
  1070.  
  1071. </style>
  1072. </head>
  1073.  
  1074. <!----- HTML ----->
  1075. <body>
  1076.  
  1077. <main> <!-- main container -->
  1078.  
  1079. <!-- welcome popup -->
  1080. <div class="welcomewrap">
  1081. <div class="welcome">
  1082. <div class="welcometitle"><b>welcome to the library</b><i class="ti ti-x"></i></div>
  1083. <div class="welcomelogin">
  1084. <li><img src="https://64.media.tumblr.com/3cd13220a07b8a8137d9a150cd7862cb/45d394a3593042b9-61/s540x810/cce19fae86c097e034f418fd2c15eee0324b75db.pnj"><b>click here to login</b></li>
  1085. <a id="welcomebutton">login</a>
  1086. </div>
  1087. </div></div><!-- // .welcomewrap .welcome -->
  1088.  
  1089. <!-- fixed buttons -->
  1090. <div class="fixedbuttons">
  1091. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1092. </div>
  1093.  
  1094. <!-- sidebar -->
  1095. <div class="sidebar">
  1096. <!-- filters -->
  1097. <div class="sort">
  1098. <div class="filtertitle"><b>sort by</b></div>
  1099. <div class="filterbox">
  1100. <ul class="filter option-set exclusive" data-filter-group="group1">
  1101.  
  1102. <a href="#" data-filter-value="" class="selected" id="allplus">
  1103. <img src="https://64.media.tumblr.com/bd6e36361bc78b976e6c6e5cf96d0d68/45d394a3593042b9-4a/s500x750/e93574ef513591699c9ef0b195d813a2760df5fe.pnj"><b>all</b></a>
  1104.  
  1105. <!--========================================================================
  1106. EDIT HERE: FILTERS
  1107.  
  1108. FILTER NAMES:
  1109. - make sure each filter name is between <b></b>, example: <b>filter 1</b>
  1110.  
  1111. OPTIONAL:
  1112. - if you want to change the images you can change the link, make sure to keep your image url within the quotation marks ""
  1113. - if you want to change the filter values (f1, f2, etc.) you can, make sure to keep the period before each value, example: .f1
  1114.  
  1115. FORMAT:
  1116. <a href="#" data-filter-value=".[f1]">
  1117. <img src="[imageurl]"><b>[filter name]</b></a>
  1118.  
  1119. - [bracketed text] is what you can change, delete the brackets
  1120.  
  1121. =========================================================================-->
  1122. <a href="#" data-filter-value=".f1">
  1123. <img src="https://64.media.tumblr.com/4770b58b86b603aac4ac4f1b0b678865/45d394a3593042b9-60/s640x960/2e64e05dca79111ec9ec5404605284923b2a97b9.pnj"><b>filter 1</b></a>
  1124.  
  1125. <a href="#" data-filter-value=".f2">
  1126. <img src="https://64.media.tumblr.com/ea97b102aa8d61abb9fe268f3ceeb894/45d394a3593042b9-ea/s540x810/ada825782e0cd58813557860cf4d4b0185c8e448.pnj"><b>filter 2</b></a>
  1127.  
  1128. <a href="#" data-filter-value=".f3">
  1129. <img src="https://64.media.tumblr.com/c6af47b7dd52a64a13cff6e615d02555/45d394a3593042b9-dd/s540x810/5671c38cacf0459823b67c91cbc4553a476e17f7.pnj"><b>filter 3</b></a>
  1130.  
  1131. <a href="#" data-filter-value=".f4">
  1132. <img src="https://64.media.tumblr.com/38d5bf857a5eede910b9905704619e5c/45d394a3593042b9-78/s500x750/d6aa61d7edefb6e1cbdd7c1e525995aa0caae3cd.pnj"><b>filter 4</b></a>
  1133.  
  1134. <a href="#" data-filter-value=".f5">
  1135. <img src="https://64.media.tumblr.com/656f63c689cd5e93af9e06ed7dfec341/45d394a3593042b9-c5/s1280x1920/89da7f2e2daf5f5edff0ac81c5cdc919a1f407b5.pnj"><b>filter 5</b></a>
  1136.  
  1137. <a href="#" data-filter-value=".f6">
  1138. <img src="https://64.media.tumblr.com/e472faff9077c2afb9d5eb8ee4a623d7/45d394a3593042b9-bf/s500x750/e971428ecc204f4a4dce09b403a5991623a3c129.pnj"><b>filter 6</b></a>
  1139.  
  1140. <a href="#" data-filter-value=".f7">
  1141. <img src="https://64.media.tumblr.com/3cd13220a07b8a8137d9a150cd7862cb/45d394a3593042b9-61/s540x810/cce19fae86c097e034f418fd2c15eee0324b75db.pnj"><b>filter 7</b></a>
  1142.  
  1143. <a href="#" data-filter-value=".f8">
  1144. <img src="https://64.media.tumblr.com/5fe8ee2bbf60f0106e591275d1f12dc5/45d394a3593042b9-ac/s250x400/4002d60a1a0d0827b20bade21efffa9ee4b85cb6.pnj"><b>filter 8</b></a>
  1145.  
  1146. <a href="#" data-filter-value=".f9">
  1147. <img src="https://64.media.tumblr.com/90b25108738089bf96db123fc2c9e703/45d394a3593042b9-d8/s250x400/27eacd5c14e629efb915021b570e581cf0de895d.pnj"><b>filter 9</b></a>
  1148.  
  1149. <a href="#" data-filter-value=".f10">
  1150. <img src="https://64.media.tumblr.com/38ec947272447022ef25a8997d33fac9/45d394a3593042b9-4b/s250x400/1b2db1c624bf012176e4a5a70d49857a03005f00.pnj"><b>filter 10</b></a>
  1151.  
  1152. <a href="#" data-filter-value=".f11">
  1153. <img src="https://64.media.tumblr.com/ac02c8713912e5e0331448f52e1fb1ac/45d394a3593042b9-de/s250x400/32d164d2cbdf93378b2bbd7e87e7ab97f000a02d.pnj"><b>filter 11</b></a>
  1154. </ul><!-- filters end // all filters above this line -->
  1155.  
  1156. </div><!-- .filterbox ends -->
  1157. </div><!-- .sort ends -->
  1158. </div><!-- sidebar ends -->
  1159.  
  1160. <section><!-- section // all folders below this line -->
  1161.  
  1162. <!--========================================================================
  1163. EDIT HERE: FOLDERS
  1164.  
  1165. GENERAL FORMAT:
  1166.  
  1167. <div class="folder-wrap [f1 f2 f3]">
  1168. <div class="folder">
  1169. <div class="folder-top">
  1170. <div class="folder-title">
  1171.  
  1172. <li class="ftitle"><b>[book title]</b><span>- [author]</span></li>
  1173.  
  1174. <li class="ficons"><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li></div>
  1175. <div class="folder-tabs">
  1176. <div class="tab cover">cover</div>
  1177. <div class="tab info">info</div>
  1178. </div>
  1179. <div class="folder-site">
  1180.  
  1181. <li>
  1182. <i id="[yes]" class="ti ti-star-filled"></i>
  1183. <i id="[yes]" class="ti ti-star-filled"></i>
  1184. <i id="[yes]" class="ti ti-star-filled"></i>
  1185. </li>
  1186. <a class="fs-name" href="[booklinkurl]"><b>[book link name]</b> <div class="fs-icon"><i class="ti ti-caret-down"></i></div></a>
  1187. </div>
  1188. </div>
  1189. <div class="folder-cont">
  1190. <div class="book-img"><img src="[imageurl]"></div>
  1191. <div class="moreinfo">
  1192. <div class="moreinfotext">
  1193. [book description here]
  1194. </div>
  1195. </div>
  1196. </div>
  1197. </div>
  1198. </div>
  1199.  
  1200. - [bracketed] text is what you change, delete the brackets
  1201.  
  1202. =========================================================================-->
  1203.  
  1204. <!-- filter values -->
  1205. <div class="folder-wrap f2 f3 f6 f8 f10 f11">
  1206. <div class="folder">
  1207. <div class="folder-top">
  1208. <div class="folder-title">
  1209. <!-- book title/author here -->
  1210. <li class="ftitle"><b>book title</b><span>- author</span></li>
  1211.  
  1212. <li class="ficons"><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li></div>
  1213. <div class="folder-tabs">
  1214. <div class="tab cover">cover</div>
  1215. <div class="tab info">info</div>
  1216. </div>
  1217. <div class="folder-site">
  1218.  
  1219. <li><!-- book rating -->
  1220. <i id="yes" class="ti ti-star-filled"></i>
  1221. <i id="yes" class="ti ti-star-filled"></i>
  1222. <i id="yeshalf" class="ti ti-star-filled"></i>
  1223. </li>
  1224. <a class="fs-name" href="/"><b>goodreads.com/booklink</b>
  1225. <div class="fs-icon"><i class="ti ti-caret-down"></i></div></a>
  1226. </div><!-- // .folder-site -->
  1227. </div><!-- // .folder-top -->
  1228. <div class="folder-cont">
  1229. <div class="book-img"><img src=""></div><!-- book image -->
  1230. <div class="moreinfo">
  1231. <div class="moreinfotext"><!-- all text below this line -->
  1232. book description here, this can be as long as you want! it will scroll.
  1233. <br>line break
  1234. <p>paragraph break
  1235. <li>this is</li>
  1236. <li>a list</li>
  1237. <li>of things</li>
  1238. <blockquote>this is a blockquote</blockquote>
  1239. here's some <b>bold text</b> and <a href="/">a link</a>.
  1240. </p>
  1241. </div><!-- // .moreinfotext - all text above this line -->
  1242. </div><!-- // .moreinfo -->
  1243. </div><!-- // .folder-cont -->
  1244. </div><!-- // .folder -->
  1245. </div><!-- // .folder-wrap -->
  1246.  
  1247. </section><!-- section ends // all folders above this line -->
  1248.  
  1249. <footer><!--- FOOTER --->
  1250. <div class="footerleft">
  1251. <a href="/" title="home" class="homelink"><i class="ti ti-brand-windows"></i></a>
  1252. <!--========================================================================
  1253. EDIT HERE: FOOTER LINKS
  1254.  
  1255. - feel free to delete/add links and change the icons & names
  1256.  
  1257. ========================== all links below this line ====================-->
  1258. <a href="" title="link name"><i class="ti ti-flower"></i></a>
  1259. <a href="" title="link name"><i class="ti ti-mushroom"></i></a>
  1260. <a href="" title="link name"><i class="ti ti-seeding"></i></a>
  1261. <a href="" title="link name"><i class="ti ti-sparkles"></i></a>
  1262. </div><!-- all links above this line -->
  1263.  
  1264. <div class="footerright">
  1265. <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-bold ph-caret-up"></i></a>
  1266. <!-- day/night -->
  1267. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1268. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1269. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1270. </button>
  1271. <i id="battery" class="ti ti-battery-3"></i>
  1272. <i id="volume" class="ti ti-volume"></i>
  1273. <!-- CREDIT: DO NOT TOUCH -->
  1274. <a class="credit" href="//phantomcodes.tumblr.com" title="custom page by sage"><i class="ti ti-ghost-2"></i></a>
  1275. </div>
  1276. </footer>
  1277.  
  1278. </main><!-- end of main container -->
  1279.  
  1280. <script>
  1281.  
  1282. // tooltips
  1283. tippy('[title]', {
  1284. theme: 'custom',
  1285. arrow: false,
  1286. followCursor: true,
  1287. delay: 100,
  1288. placement: 'top',
  1289. offset: "0, 10",
  1290. zIndex: 9999999999,
  1291. maxWidth: 400,
  1292.  
  1293. content(reference) {
  1294. const title = reference.getAttribute('title');
  1295. reference.removeAttribute('title');
  1296. return title;
  1297. },
  1298. });
  1299.  
  1300. //filters
  1301. $(document).ready(function() {
  1302. var $container = $("section"); // the container with all the elements to filter inside
  1303. var filters = {}; //should be outside the scope of the filtering function
  1304. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  1305. var $grid = $container.isotope({
  1306. itemSelector: ".folder-wrap", // the elements to filter
  1307. masonry: {
  1308. columnWidth:300,
  1309. gutter: 15,
  1310. fitWidth: true,
  1311. horizontalOrder: true
  1312. }
  1313. });
  1314. $('section').isotope({
  1315. transitionDuration: '0.8s',
  1316. hiddenStyle: {
  1317. opacity: 0
  1318. },
  1319. visibleStyle: {
  1320. opacity: 1
  1321. }
  1322. })
  1323. $(".option-set a").click(function(e) {
  1324. var $this = $(this); // cache the clicked link
  1325. var filterAttr = "data-filter-value";
  1326. var filterValue = $this.attr(filterAttr); // cache the filter
  1327. var $optionSet = $this.parents(".option-set"); // cache the parent element
  1328. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  1329. var filterGroup = filters[group];
  1330. if (!filterGroup) {
  1331. filterGroup = filters[group] = [];
  1332. }
  1333. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  1334. var activeClass = "selected", // the class for active links
  1335. exclClass = "exclusive"; // the class for exclusive groups
  1336. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  1337. var comboFilter = getComboFilter(filters);
  1338. $grid.isotope({
  1339. filter: comboFilter
  1340. });
  1341. $this.toggleClass(activeClass);
  1342. e.preventDefault();
  1343. });
  1344. });
  1345.  
  1346. // welcome popup
  1347. $(document).ready(function(){
  1348. $('a#welcomebutton').click(function(){
  1349. $('body').toggleClass('welcome-click');
  1350. });
  1351. });
  1352.  
  1353. // tumblr controls
  1354. $(document).ready(function(){
  1355. $('a#controlsbutton').click(function(){
  1356. $('body').toggleClass('controls-click');
  1357. });
  1358. });
  1359.  
  1360. // tab click
  1361. $(document).ready(function(){
  1362. $('.moreinfo').hide();
  1363. $('.tab.info').click(function() {
  1364. $('tab').toggleClass('more-click');
  1365. $(this).closest('.folder').find('.moreinfo').slideToggle(0);
  1366. $(this).toggleClass('more-click');
  1367. return false;
  1368. });
  1369. });
  1370.  
  1371. // searchbar
  1372. $(document).ready(function(){
  1373. $('a#searchbutton').click(function(){
  1374. $('body').toggleClass('search-click');
  1375. });
  1376. });
  1377. $(document).ready(function(){
  1378. $('.search').submit(function(event){
  1379. var value = $('input:first').val();
  1380. location.replace('http://{Name}.tumblr.com/search/' + value);
  1381. });
  1382. });
  1383.  
  1384. // scroll to top
  1385. $(document).ready(function(){
  1386. $('a#totop').click(function(){
  1387. $('html, body').animate({scrollTop : 0},800);
  1388. return false;
  1389. });
  1390. });
  1391.  
  1392. var mybutton = document.getElementById("totop");
  1393. window.onscroll = function() {scrollFunction()};
  1394.  
  1395. function scrollFunction() {
  1396. if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
  1397. mybutton.style.display = "flex";
  1398. } else {
  1399. mybutton.style.display = "none";
  1400. }
  1401. }
  1402.  
  1403. // day/night mode
  1404. const toggle = document.getElementById("theme-toggle");
  1405.  
  1406. toggle.onclick = function () {
  1407. // add class to html and make transition snappy
  1408. document.documentElement.classList.add("theme-transition");
  1409. // alright lets retrive the info from data-theme
  1410. let currentTheme = document.documentElement.getAttribute("data-theme");
  1411. // if it's dark already, let's go into the light
  1412. let targetTheme = "light";
  1413. // but if it is light let's toggle dark mode
  1414. if (currentTheme === "light") {
  1415. targetTheme = "dark";
  1416. }
  1417. // ok now that theme has been toggled, get rid of snappy transition
  1418. window.setTimeout(function () {
  1419. document.documentElement.classList.remove("theme-transition");
  1420. }, 50);
  1421. // we're going to save our theme preference now
  1422. document.documentElement.setAttribute("data-theme", targetTheme);
  1423. localStorage.setItem("theme", targetTheme);
  1424. };
  1425.  
  1426. </script>
  1427.  
  1428. </body>
  1429. </html>
  1430.  
Advertisement
Add Comment
Please, Sign In to add comment