Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>bookshelf / {Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | CUSTOM PAGE 05 BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- SEARCH 'EDIT HERE'
- theme pack guide: https://phantomcodes.tumblr.com/briethemepackguide
- CREDITS:
- - tabler icons / https://tabler-icons.io/
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - bunny fonts / https://fonts.bunny.net/
- ---->
- <!---- JQUERY ---->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!--- FILTERS --->
- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
- <!----- BUNNY FONTS ---->
- <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" />
- <!---- ICONS ---->
- <script src="https://unpkg.com/phosphor-icons"></script>
- <script src="https://unpkg.com/[email protected]"></script>
- <script src="//pull.cappuccicons.com/cpf.js"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
- <!---- TOOLTIPS ---->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <!--- day/night --->
- <script>
- const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
- if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
- </script>
- <!------- CSS -------->
- <style>
- /* theme options - common */
- :root {
- /*--- EDIT HERE: corners & fonts ---*/
- --Corners:5px;
- --BodyFont:'Lora';
- --TitleFont:'Merriweather';
- --FontSize:13px;
- --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .8);
- --ColorOpaquePostsLess:rgb(from var(--ColorPosts) r g b / .5);
- --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
- --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
- --ColorOpaqueAccentThree:rgb(from var(--ColorAccentThree) r g b / .3);
- }
- /* theme options - day/night */
- :root, html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- /*--- EDIT HERE: daymode colors ---*/
- --ColorBackground:#eee;
- --ColorPosts:#f2f2f2;
- --ColorBorders:#ccc;
- --ColorTitle:#404040;
- --ColorText:#606060;
- --ColorAccentOne:#cd709d;
- --ColorAccentTwo:#de8c9b;
- --ColorAccentThree:#e69189;
- --LightShadow:rgba(255,255,255,.5);
- --LightShadowLess:rgba(255,255,255,.25);
- --DarkShadow:rgba(0,0,0,.4);
- --DarkShadowLess:rgba(0,0,0,.25);
- --DarkShadowLeast:rgba(0,0,0,.1);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- /*--- EDIT HERE: nightmode colors ---*/
- --ColorBackground:#383838;
- --ColorPosts:#3a3a3a;
- --ColorBorders:#4a4a4a;
- --ColorTitle:#fafafa;
- --ColorText:#dadada;
- --ColorAccentOne:#ffbad7;
- --ColorAccentTwo:#ffa5b6;
- --ColorAccentThree:#ffb7b7;
- --LightShadow:rgba(255,255,255,.3);
- --LightShadowLess:rgba(255,255,255,.15);
- --DarkShadow:rgba(0,0,0,.8);
- --DarkShadowLess:rgba(0,0,0,.5);
- --DarkShadowLeast:rgba(0,0,0,.15);
- }
- html.theme-transition,
- html.theme-transition *,
- html.theme-transition *:before,
- html.theme-transition *:after {
- transition: 0s !important;
- transition-delay: 0 !important;
- }
- .light-on{
- display: var(--LightOn);
- }
- .light-off{
- display: var(--LightOff);
- }
- /*--- TOOLTIPS ---*/
- .tippy-tooltip.custom-theme {
- font-size:.95em;
- font-weight:500;
- color:var(--ColorPosts);
- text-transform:lowercase;
- text-align:center;
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- border-radius:5px;
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:4px;
- height:4px;
- background:var(--ColorBackground);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorBackground);
- border-radius: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- border-radius: 5px;
- }
- /*--- TEXT SELECTION ---*/
- ::-moz-selection { /* Code for Firefox */
- color:var(--ColorPosts);
- background:var(--ColorAccentOne);
- }
- ::selection {
- color:var(--ColorPosts);
- background:var(--ColorAccentOne);
- }
- * {box-sizing:border-box;}
- body {
- font-family:var(--BodyFont), sans-serif;
- font-size:var(--FontSize);
- color:var(--ColorText);
- line-height:150%;
- word-wrap:break-word;
- letter-spacing:.04em;
- margin:0;
- background-color:var(--ColorBackground);
- }
- body {
- opacity:1;
- transition:.75s opacity;
- }
- body.fade-out {
- opacity:0;
- transition:none;
- }
- html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
- a {
- color:var(--ColorAccentOne);
- text-decoration:none;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a:hover {
- color:var(--ColorAccentThree);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- blockquote {
- border-left:1.5px solid var(--ColorBorders);
- padding-left:.75rem;
- margin-left:1rem;
- }
- blockquote p {padding:0!important;}
- ul {list-style-type:circle;}
- ol {list-style-type:decimal-leading-zero; margin:0;}
- li::marker {color:var(--ColorAccentOne);}
- small {font-size:.95em;}
- big {font-size:1.1em;}
- h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
- h1 a {color:var(--ColorTitle);}
- h1 a:hover {color:var(--ColorAccentThree);}
- h2 {font-size:1.25em; color:var(--ColorTitle);}
- h3 {font-size:1.15em; color:var(--ColorTitle);}
- h4 {font-size:1.1em; color:var(--ColorTitle); margin-bottom:1rem;}
- h5 {font-size:1.05em; color:var(--ColorTitle);}
- h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
- button {font-size:1em;}
- hr {
- height:1px;
- border:none;
- box-shadow:none;
- background:var(--ColorBorders);
- }
- pre {
- word-wrap:break-word!important;
- white-space:pre-wrap;
- }
- b, strong {
- color:var(--ColorTitle);
- font-weight:800;
- }
- b a:hover {
- color:var(--ColorAccentThree);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /* common link effects */
- .moreinfotext a {
- display:inline-block;
- position:relative;
- }
- .moreinfotext a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- transform:scaleX(0);
- transform-origin:center;
- transition:transform 0.4s ease-out;
- }
- .moreinfotext a:hover:after {
- transform:scaleX(1);
- transform-origin:center;
- }
- /*--- WELCOME POPUP ---*/
- .welcomewrap {
- position:fixed;
- top:0;
- left:0;
- right:0;
- bottom:0;
- width:100%;
- height:100%;
- display:none;
- justify-content:center;
- align-items:center;
- background:var(--ColorBackground);
- z-index:999999;
- }
- body.welcome-click .welcomewrap {display:none;}
- .welcome {
- width:100%;
- max-width:350px;
- overflow:hidden;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- }
- .welcometitle {
- width:100%;
- padding:.25rem .5rem .25rem .5rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- }
- .welcometitle b {font-size:.975em; color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
- .welcometitle i {
- font-size:.9em;
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- width:1.1rem;
- height:1.1rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:calc(var(--Corners) - 1px);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- }
- .welcomelogin {
- width:100%;
- padding:1rem;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:.5rem;
- }
- .welcomelogin li {
- position:relative;
- width:100%;
- margin-left:-2.75rem;
- display:flex;
- justify-content:center;
- align-items:center;
- gap:1rem;
- }
- .welcomelogin img {
- width:2.75rem;
- height:2.75rem;
- }
- .welcomelogin li b {font-weight:500;}
- a#welcomebutton {
- color:var(--ColorTitle);
- padding:.25rem .5rem .25rem .5rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:var(--Corners);
- border:1px solid var(--DarkShadow);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- cursor:pointer;
- }
- a#welcomebutton:hover {box-shadow:inset 1px 1px var(--LightShadow), 1px 1px none;}
- /*--- FIXED BUTTONS ---*/
- .fixedbuttons {
- position:fixed;
- top:.75rem;
- right:.75rem;
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5rem;
- z-index:9999;
- }
- /* TUMBLR CONTROLS */
- a#controlsbutton {
- display:flex;
- justify-content:center;
- align-items:center;
- background:var(--ColorBackground);
- cursor:help;
- }
- a#controlsbutton i {
- font-size:1.45em;
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#controlsbutton:hover i {
- color:var(--ColorAccentOne);
- -webkit-animation-duration: 1.5s;
- animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:tumblrcontrols;
- -moz-animation-name:tumblrcontrols;
- }
- body.controls-click a#controlsbutton i {color:var(--ColorAccentOne);}
- @keyframes tumblrcontrols {
- 45% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 55% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- transform:scale(.65);
- margin-right:2rem;
- opacity:0;
- visibility:hidden;
- z-index:999999999!important;
- }
- body.controls-click iframe.tmblr-iframe {
- opacity:1.0;
- visibility:visible;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- -ms-transition: all 0.5s;
- -o-transition: all 0.5s;
- transition: all 0.5s;
- }
- /* MAIN CONTENT */
- main {
- width:calc(100% - 13rem);
- margin:4rem 2rem 3rem 11rem;
- display:flex;
- justify-content:center;
- }
- section {}
- /*--- SIDEBAR ---*/
- .sidebar {
- position:fixed;
- top:0;
- left:0;
- bottom:0;
- width:11rem;
- height:100%;
- padding:4rem 1rem 1rem 1rem;
- z-index:99;
- }
- /*--- FILTERS ---*/
- .sort {
- position:relative;
- width:100%;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1rem;
- background:var(--ColorBackground);
- border-radius:var(--Corners);
- z-index:1;
- }
- .filtertitle {width:100%; display:flex; justify-content:center; align-items:center;}
- .filtertitle b {
- width:fit-content;
- position:relative;
- display:inline-block;
- font-family:var(--TitleFont), sans-serif;
- font-size:1.05em;
- text-shadow:0 .5px var(--ColorPosts);
- line-height:120%;
- z-index:1;
- }
- .filtertitle b:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:50%;
- opacity:.5;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- z-index:-1;
- }
- .filterbox ul {
- width:fit-content;
- margin:0;
- padding:0;
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- flex-wrap:wrap;
- gap:1rem .5rem;
- }
- .filterbox a {
- width:calc(50% - .25rem);
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:.25rem;
- }
- .filterbox img {
- width:1.75rem;
- height:1.75rem;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .filterbox a:hover img, .filterbox a.selected img {transform:scale(1.1);}
- .filterbox b {
- font-size:.95em;
- font-weight:normal;
- color:var(--ColorText);
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -ms-transition: all 0.2s;
- -o-transition: all 0.2s;
- transition: all 0.2s;
- }
- .filterbox a.selected b {font-weight:bold; color:var(--ColorTitle);}
- /*--- FOLDERS ---*/
- .folder-wrap {
- width:300px;
- height:525px;
- margin-bottom:15px;
- display:flex;
- flex-direction:column;
- align-items:center;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- border-radius:var(--Corners);
- z-index:1;
- }
- .folder {
- position:relative;
- overflow:hidden;
- margin-top:1px;
- width:calc(100% - 2px);
- height:calc(100% - 2px);
- display:flex;
- flex-direction:column;
- align-items:center;
- background:var(--ColorPosts);
- border-radius:calc(var(--Corners) - 1px);
- }
- .folder-top {
- width:100%;
- display:flex;
- flex-direction:column;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- }
- .folder-title {
- padding:.25rem .5rem .25rem .5rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5rem;
- background:var(--ColorOpaquePostsLess);
- }
- .folder-title li.ftitle {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- li.ftitle b, li.ftitle span {font-size:.95em; color:var(--ColorTitle); text-shadow:0 1px rgba(0,0,0,.1);}
- .folder-title li.ficons {
- color:var(--ColorTitle);
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.25rem;
- }
- li.ficons i {
- font-size:.9em;
- width:1.1rem;
- height:1.1rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:calc(var(--Corners) - 1px);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- }
- li.ficons span {
- font-size:.95em;
- font-weight:600;
- line-height:100%;
- padding-bottom:.25rem;
- width:1.1rem;
- height:1.1rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:calc(var(--Corners) - 1px);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- cursor:default;
- }
- .folder-tabs {
- width:100%;
- padding:.25rem .5rem 0 .5rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .tab {
- position:relative;
- font-size:.925em;
- background:var(--ColorOpaquePosts);
- border-radius:var(--Corners) var(--Corners) 0 0;
- box-shadow:inset 1px 1px 1px var(--LightShadow), 1px 0px var(--DarkShadow);
- }
- .tab.cover {
- font-weight:500;
- color:var(--ColorTitle);
- padding:.25rem .5rem .15rem .5rem;
- cursor:default;
- }
- .tab.info {
- color:var(--ColorText);
- margin-top:.125rem;
- padding:.125rem .5rem .15rem .5rem;
- cursor:help;
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -ms-transition: all 0.2s;
- -o-transition: all 0.2s;
- transition: all 0.2s;
- }
- .tab.info:hover {margin-top:0; padding-top:.25rem;}
- .tab.info.more-click {margin-top:0; padding-top:.25rem; font-weight:500; color:var(--ColorTitle);}
- .folder-site {
- width:100%;
- padding:.25rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- background:var(--ColorOpaquePosts);
- }
- .folder-site li {
- padding:.4rem;
- display:flex;
- align-items:center;
- gap:.15rem;
- background:var(--ColorOpaquePostsLess);
- border-radius:var(--Corners);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- }
- .folder-site li i {font-size:1em; color:rgba(0,0,0,.25);}
- .folder-site li i#yes {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .folder-site li i#yeshalf {
- background: linear-gradient(to right, var(--ColorAccentOne) 0%, var(--ColorAccentTwo) 50%, rgba(0,0,0,.25) 51%, rgba(0,0,0,.25) 100%);
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- a.fs-name {
- width:100%;
- overflow:hidden;
- padding:.2rem .25rem .2rem .5rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.25rem;
- background:var(--ColorOpaquePosts);
- border-radius:var(--Corners);
- box-shadow:inset 1px 1px var(--DarkShadowLess);
- }
- a.fs-name:hover {box-shadow:inset 1px 1px var(--DarkShadow);}
- a.fs-name b {
- font-size:.9em;
- font-weight:normal;
- color:var(--ColorText);
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.fs-name:hover b {color:var(--ColorTitle);}
- a.fs-name .fs-icon {
- padding:.2rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:calc(var(--Corners) - 1px);
- box-shadow:inset 1px 1px var(--LightShadow), 1px 1px var(--DarkShadowLess);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.fs-name:hover .fs-icon {box-shadow:inset 1px 1px var(--LightShadowLess), 1px 1px var(--DarkShadowLeast);}
- .fs-icon i {
- font-size:1.1em;
- color:var(--ColorText);
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- background-clip:text;
- -webkit-background-clip:text;
- transition:ease-in-out .4s;
- }
- a.fs-name:hover i {transform:rotate(-90deg); color:transparent;}
- .folder-cont {
- position:relative;
- width:100%;
- height:100%;
- overflow-y:auto;
- padding:.35rem;
- display:flex;
- flex-direction:column;
- gap:.25rem;
- }
- .folder-cont::-webkit-scrollbar {
- width:1px;
- height:1px;
- background:transparent;
- }
- .folder-cont::-webkit-scrollbar-track {background:transparent;}
- .folder-cont::-webkit-scrollbar-thumb {background:transparent;}
- .book-img {
- width:100%;
- height:100%;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:calc(var(--Corners) - 2px);
- }
- .book-img img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:calc(var(--Corners) - 2px);
- }
- .moreinfo {
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- overflow-y:auto;
- font-size:.95em;
- padding:.5rem;
- background:var(--ColorPosts);
- }
- .moreinfotext {
- width:100%;
- height:100%;
- overflow-y:auto;
- }
- .moreinfotext::-webkit-scrollbar {
- width:2px;
- height:2px;
- background:transparent;
- }
- .moreinfotext::-webkit-scrollbar-track {background:transparent;}
- .moreinfotext li {list-style-type:circle; margin-left:1rem; margin-bottom:0;}
- /*--- FOOTER ---*/
- footer {
- position:fixed;
- bottom:0;
- left:0;
- right:0;
- width:100%;
- height:2rem;
- padding:.5rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- z-index:9999;
- }
- .footerleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .footerleft a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .footerleft i {
- font-size:1.3em;
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .footerleft a:hover i {transform:scale(1.1);}
- a.homelink:after {
- content:'|';
- font-weight:500;
- color:var(--ColorOpaquePosts);
- line-height:100%;
- margin-bottom:.15rem;
- padding-left:.5rem;
- }
- a.homelink i {font-size:1.5em;}
- .footerright {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5rem;
- }
- .footerright i {
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- }
- .footerright i#battery {font-size:1.5em;}
- .footerright i#volume {font-size:1.4em;}
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop i {font-size:1.4em;}
- a#totop:hover i {
- -webkit-animation-duration: 2.5s;
- animation-duration: 2.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:totop;
- -moz-animation-name:totop;
- }
- @keyframes totop {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 10% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 20% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 30% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 40% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 60% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 70% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 80% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 90% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /* DAY/NIGHT */
- button#theme-toggle {
- position:relative;
- outline:none;
- border:none;
- background:none;
- padding:0;
- display:flex;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- button#theme-toggle span {
- justify-content:center;
- align-items:center;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle i {
- font-size:1.3em;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle:hover i {
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:daynight;
- -moz-animation-name:daynight;
- }
- @keyframes daynight {
- 50% {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a.credit {
- display:flex;
- justify-content:center;
- align-items:center;
- z-index:99999;
- }
- a.credit:before {
- content:'|';
- font-weight:500;
- color:var(--ColorOpaquePosts);
- line-height:100%;
- margin-bottom:.15rem;
- padding-right:.5rem;
- }
- a.credit i {
- font-size:1.5em;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.credit:hover i {
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- animation-name: bounce;
- -moz-animation-name: bounce;
- }
- @keyframes bounce {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 25% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 75% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*---- RESPONSIVENESS ---*/
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <main> <!-- main container -->
- <!-- welcome popup -->
- <div class="welcomewrap">
- <div class="welcome">
- <div class="welcometitle"><b>welcome to the library</b><i class="ti ti-x"></i></div>
- <div class="welcomelogin">
- <li><img src="https://64.media.tumblr.com/3cd13220a07b8a8137d9a150cd7862cb/45d394a3593042b9-61/s540x810/cce19fae86c097e034f418fd2c15eee0324b75db.pnj"><b>click here to login</b></li>
- <a id="welcomebutton">login</a>
- </div>
- </div></div><!-- // .welcomewrap .welcome -->
- <!-- fixed buttons -->
- <div class="fixedbuttons">
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
- </div>
- <!-- sidebar -->
- <div class="sidebar">
- <!-- filters -->
- <div class="sort">
- <div class="filtertitle"><b>sort by</b></div>
- <div class="filterbox">
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <a href="#" data-filter-value="" class="selected" id="allplus">
- <img src="https://64.media.tumblr.com/bd6e36361bc78b976e6c6e5cf96d0d68/45d394a3593042b9-4a/s500x750/e93574ef513591699c9ef0b195d813a2760df5fe.pnj"><b>all</b></a>
- <!--========================================================================
- EDIT HERE: FILTERS
- FILTER NAMES:
- - make sure each filter name is between <b></b>, example: <b>filter 1</b>
- OPTIONAL:
- - if you want to change the images you can change the link, make sure to keep your image url within the quotation marks ""
- - if you want to change the filter values (f1, f2, etc.) you can, make sure to keep the period before each value, example: .f1
- FORMAT:
- <a href="#" data-filter-value=".[f1]">
- <img src="[imageurl]"><b>[filter name]</b></a>
- - [bracketed text] is what you can change, delete the brackets
- =========================================================================-->
- <a href="#" data-filter-value=".f1">
- <img src="https://64.media.tumblr.com/4770b58b86b603aac4ac4f1b0b678865/45d394a3593042b9-60/s640x960/2e64e05dca79111ec9ec5404605284923b2a97b9.pnj"><b>filter 1</b></a>
- <a href="#" data-filter-value=".f2">
- <img src="https://64.media.tumblr.com/ea97b102aa8d61abb9fe268f3ceeb894/45d394a3593042b9-ea/s540x810/ada825782e0cd58813557860cf4d4b0185c8e448.pnj"><b>filter 2</b></a>
- <a href="#" data-filter-value=".f3">
- <img src="https://64.media.tumblr.com/c6af47b7dd52a64a13cff6e615d02555/45d394a3593042b9-dd/s540x810/5671c38cacf0459823b67c91cbc4553a476e17f7.pnj"><b>filter 3</b></a>
- <a href="#" data-filter-value=".f4">
- <img src="https://64.media.tumblr.com/38d5bf857a5eede910b9905704619e5c/45d394a3593042b9-78/s500x750/d6aa61d7edefb6e1cbdd7c1e525995aa0caae3cd.pnj"><b>filter 4</b></a>
- <a href="#" data-filter-value=".f5">
- <img src="https://64.media.tumblr.com/656f63c689cd5e93af9e06ed7dfec341/45d394a3593042b9-c5/s1280x1920/89da7f2e2daf5f5edff0ac81c5cdc919a1f407b5.pnj"><b>filter 5</b></a>
- <a href="#" data-filter-value=".f6">
- <img src="https://64.media.tumblr.com/e472faff9077c2afb9d5eb8ee4a623d7/45d394a3593042b9-bf/s500x750/e971428ecc204f4a4dce09b403a5991623a3c129.pnj"><b>filter 6</b></a>
- <a href="#" data-filter-value=".f7">
- <img src="https://64.media.tumblr.com/3cd13220a07b8a8137d9a150cd7862cb/45d394a3593042b9-61/s540x810/cce19fae86c097e034f418fd2c15eee0324b75db.pnj"><b>filter 7</b></a>
- <a href="#" data-filter-value=".f8">
- <img src="https://64.media.tumblr.com/5fe8ee2bbf60f0106e591275d1f12dc5/45d394a3593042b9-ac/s250x400/4002d60a1a0d0827b20bade21efffa9ee4b85cb6.pnj"><b>filter 8</b></a>
- <a href="#" data-filter-value=".f9">
- <img src="https://64.media.tumblr.com/90b25108738089bf96db123fc2c9e703/45d394a3593042b9-d8/s250x400/27eacd5c14e629efb915021b570e581cf0de895d.pnj"><b>filter 9</b></a>
- <a href="#" data-filter-value=".f10">
- <img src="https://64.media.tumblr.com/38ec947272447022ef25a8997d33fac9/45d394a3593042b9-4b/s250x400/1b2db1c624bf012176e4a5a70d49857a03005f00.pnj"><b>filter 10</b></a>
- <a href="#" data-filter-value=".f11">
- <img src="https://64.media.tumblr.com/ac02c8713912e5e0331448f52e1fb1ac/45d394a3593042b9-de/s250x400/32d164d2cbdf93378b2bbd7e87e7ab97f000a02d.pnj"><b>filter 11</b></a>
- </ul><!-- filters end // all filters above this line -->
- </div><!-- .filterbox ends -->
- </div><!-- .sort ends -->
- </div><!-- sidebar ends -->
- <section><!-- section // all folders below this line -->
- <!--========================================================================
- EDIT HERE: FOLDERS
- GENERAL FORMAT:
- <div class="folder-wrap [f1 f2 f3]">
- <div class="folder">
- <div class="folder-top">
- <div class="folder-title">
- <li class="ftitle"><b>[book title]</b><span>- [author]</span></li>
- <li class="ficons"><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li></div>
- <div class="folder-tabs">
- <div class="tab cover">cover</div>
- <div class="tab info">info</div>
- </div>
- <div class="folder-site">
- <li>
- <i id="[yes]" class="ti ti-star-filled"></i>
- <i id="[yes]" class="ti ti-star-filled"></i>
- <i id="[yes]" class="ti ti-star-filled"></i>
- </li>
- <a class="fs-name" href="[booklinkurl]"><b>[book link name]</b> <div class="fs-icon"><i class="ti ti-caret-down"></i></div></a>
- </div>
- </div>
- <div class="folder-cont">
- <div class="book-img"><img src="[imageurl]"></div>
- <div class="moreinfo">
- <div class="moreinfotext">
- [book description here]
- </div>
- </div>
- </div>
- </div>
- </div>
- - [bracketed] text is what you change, delete the brackets
- =========================================================================-->
- <!-- filter values -->
- <div class="folder-wrap f2 f3 f6 f8 f10 f11">
- <div class="folder">
- <div class="folder-top">
- <div class="folder-title">
- <!-- book title/author here -->
- <li class="ftitle"><b>book title</b><span>- author</span></li>
- <li class="ficons"><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li></div>
- <div class="folder-tabs">
- <div class="tab cover">cover</div>
- <div class="tab info">info</div>
- </div>
- <div class="folder-site">
- <li><!-- book rating -->
- <i id="yes" class="ti ti-star-filled"></i>
- <i id="yes" class="ti ti-star-filled"></i>
- <i id="yeshalf" class="ti ti-star-filled"></i>
- </li>
- <a class="fs-name" href="/"><b>goodreads.com/booklink</b>
- <div class="fs-icon"><i class="ti ti-caret-down"></i></div></a>
- </div><!-- // .folder-site -->
- </div><!-- // .folder-top -->
- <div class="folder-cont">
- <div class="book-img"><img src=""></div><!-- book image -->
- <div class="moreinfo">
- <div class="moreinfotext"><!-- all text below this line -->
- book description here, this can be as long as you want! it will scroll.
- <br>line break
- <p>paragraph break
- <li>this is</li>
- <li>a list</li>
- <li>of things</li>
- <blockquote>this is a blockquote</blockquote>
- here's some <b>bold text</b> and <a href="/">a link</a>.
- </p>
- </div><!-- // .moreinfotext - all text above this line -->
- </div><!-- // .moreinfo -->
- </div><!-- // .folder-cont -->
- </div><!-- // .folder -->
- </div><!-- // .folder-wrap -->
- </section><!-- section ends // all folders above this line -->
- <footer><!--- FOOTER --->
- <div class="footerleft">
- <a href="/" title="home" class="homelink"><i class="ti ti-brand-windows"></i></a>
- <!--========================================================================
- EDIT HERE: FOOTER LINKS
- - feel free to delete/add links and change the icons & names
- ========================== all links below this line ====================-->
- <a href="" title="link name"><i class="ti ti-flower"></i></a>
- <a href="" title="link name"><i class="ti ti-mushroom"></i></a>
- <a href="" title="link name"><i class="ti ti-seeding"></i></a>
- <a href="" title="link name"><i class="ti ti-sparkles"></i></a>
- </div><!-- all links above this line -->
- <div class="footerright">
- <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-bold ph-caret-up"></i></a>
- <!-- day/night -->
- <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
- <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
- <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
- </button>
- <i id="battery" class="ti ti-battery-3"></i>
- <i id="volume" class="ti ti-volume"></i>
- <!-- CREDIT: DO NOT TOUCH -->
- <a class="credit" href="//phantomcodes.tumblr.com" title="custom page by sage"><i class="ti ti-ghost-2"></i></a>
- </div>
- </footer>
- </main><!-- end of main container -->
- <script>
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'top',
- offset: "0, 10",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- //filters
- $(document).ready(function() {
- var $container = $("section"); // the container with all the elements to filter inside
- var filters = {}; //should be outside the scope of the filtering function
- /* --- read the documentation on isotope.metafizzy.co for more options --- */
- var $grid = $container.isotope({
- itemSelector: ".folder-wrap", // the elements to filter
- masonry: {
- columnWidth:300,
- gutter: 15,
- fitWidth: true,
- horizontalOrder: true
- }
- });
- $('section').isotope({
- transitionDuration: '0.8s',
- hiddenStyle: {
- opacity: 0
- },
- visibleStyle: {
- opacity: 1
- }
- })
- $(".option-set a").click(function(e) {
- var $this = $(this); // cache the clicked link
- var filterAttr = "data-filter-value";
- var filterValue = $this.attr(filterAttr); // cache the filter
- var $optionSet = $this.parents(".option-set"); // cache the parent element
- var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
- var filterGroup = filters[group];
- if (!filterGroup) {
- filterGroup = filters[group] = [];
- }
- var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
- var activeClass = "selected", // the class for active links
- exclClass = "exclusive"; // the class for exclusive groups
- comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
- var comboFilter = getComboFilter(filters);
- $grid.isotope({
- filter: comboFilter
- });
- $this.toggleClass(activeClass);
- e.preventDefault();
- });
- });
- // welcome popup
- $(document).ready(function(){
- $('a#welcomebutton').click(function(){
- $('body').toggleClass('welcome-click');
- });
- });
- // tumblr controls
- $(document).ready(function(){
- $('a#controlsbutton').click(function(){
- $('body').toggleClass('controls-click');
- });
- });
- // tab click
- $(document).ready(function(){
- $('.moreinfo').hide();
- $('.tab.info').click(function() {
- $('tab').toggleClass('more-click');
- $(this).closest('.folder').find('.moreinfo').slideToggle(0);
- $(this).toggleClass('more-click');
- return false;
- });
- });
- // searchbar
- $(document).ready(function(){
- $('a#searchbutton').click(function(){
- $('body').toggleClass('search-click');
- });
- });
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('http://{Name}.tumblr.com/search/' + value);
- });
- });
- // scroll to top
- $(document).ready(function(){
- $('a#totop').click(function(){
- $('html, body').animate({scrollTop : 0},800);
- return false;
- });
- });
- var mybutton = document.getElementById("totop");
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
- mybutton.style.display = "flex";
- } else {
- mybutton.style.display = "none";
- }
- }
- // day/night mode
- const toggle = document.getElementById("theme-toggle");
- toggle.onclick = function () {
- // add class to html and make transition snappy
- document.documentElement.classList.add("theme-transition");
- // alright lets retrive the info from data-theme
- let currentTheme = document.documentElement.getAttribute("data-theme");
- // if it's dark already, let's go into the light
- let targetTheme = "light";
- // but if it is light let's toggle dark mode
- if (currentTheme === "light") {
- targetTheme = "dark";
- }
- // ok now that theme has been toggled, get rid of snappy transition
- window.setTimeout(function () {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // we're going to save our theme preference now
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment