Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>icons / {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 BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- SEARCH 'EDIT HERE'
- 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=Quicksand:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family=Montserrat: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: FONTS, CORNERS, GLOW
- - find and replace the fonts if you change them
- - change glow to 0 0 0 if you don't want it */
- --BodyFont:'Quicksand';
- --TitleFont:'Montserrat';
- --FontSize:15px;
- --Corners:10px;
- --Glow:0 0 10px;
- /* OPACITY SETTINGS */
- --Spacing: 1rem;
- --ColorOpaqueBackground:rgb(from var(--ColorBackground) r g b / .75);
- --ColorMoreOpaqueBackground:rgb(from var(--ColorBackground) r g b / .3);
- --ColorLessOpaquePosts:rgb(from var(--ColorPosts) r g b / .9);
- --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .75);
- --ColorMoreOpaquePosts:rgb(from var(--ColorPosts) r g b / .3);
- --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
- --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
- --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
- --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
- }
- /* theme options - day/night */
- :root, html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- /*--- EDIT HERE: DAYMODE COLORS ---*/
- --ColorBackground:#eee;
- --ColorPosts:#f8f8f8;
- --ColorSidebar:#f2f2f2;
- --ColorBorders:#e2e2e2;
- --ColorTitle:#333;
- --ColorText:#5a5a5a;
- --ColorAccentOne:#5e3592;
- --ColorAccentTwo:#ad638d;
- --ColorAccentText:#fff;
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- /*--- EDIT HERE: NIGHTMODE COLORS ---*/
- --ColorBackground:#333;
- --ColorPosts:#404040;
- --ColorSidebar:#3a3a3a;
- --ColorBorders:#4a4a4a;
- --ColorTitle:#fafafa;
- --ColorText:#dadada;
- --ColorAccentOne:#d5b5ff;
- --ColorAccentTwo:#ffcbe2;
- --ColorAccentText:#fff;
- }
- 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 {
- position:relative;
- font-size:.95em;
- font-weight:500;
- color:var(--ColorTitle);
- text-transform:lowercase;
- text-align:center;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
- }
- /*--- 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));
- 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;
- /*===================== EDIT HERE: BACKGROUND COLOR ========================
- - if you want a regular background color instead of the gradient change the background below to: background:var(--ColorPosts);
- ==========================================================================*/
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- }
- body {
- opacity:1;
- transition:.75s opacity;
- }
- body.fade-out {
- opacity:0;
- transition:none;
- }
- html {background: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(--ColorAccentTwo);
- -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(--ColorAccentTwo);}
- 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(--ColorAccentTwo);
- -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 */
- .sb-text a {
- display:inline-block;
- position:relative;
- }
- .sb-text a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- transform:scaleX(0);
- transform-origin:center;
- transition:transform 0.4s ease-out;
- }
- .sb-text a:hover:after {
- transform:scaleX(1);
- transform-origin:center;
- }
- /*--- HEADER ---*/
- header {
- position:fixed;
- top:0;
- left:0;
- right:0;
- width:100%;
- height:2rem;
- padding:0 .5rem 0 .5rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- backdrop-filter:blur(50px);
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
- z-index:99999;
- }
- .header-left {
- position:relative;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.75rem;
- }
- .header-left a#sidebarbutton {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- .header-left a#sidebarbutton i {
- font-size:1.3em;
- color:var(--ColorAccentText);
- 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;
- }
- .header-left a#sidebarbutton:hover i, body.sidebar-click .header-left a#sidebarbutton i {text-shadow:var(--Glow);}
- a.htitle {
- font-family:var(--TitleFont), sans-serif;
- font-size:1.05em;
- font-weight:700;
- color:var(--ColorAccentText);
- text-shadow:0 1px rgba(0,0,0,.1);
- white-space:nowrap;
- }
- a.htitle:hover {text-shadow:var(--Glow);}
- .header-left a.mainlink {
- font-weight:500;
- color:var(--ColorAccentText);
- text-shadow:0 1px rgba(0,0,0,.1);
- white-space:nowrap;
- }
- a.mainlink:hover {text-shadow:var(--Glow);}
- /* requests button */
- a#requestsbutton {cursor:help;}
- body.requests-click a#requestsbutton {text-shadow:var(--Glow);}
- /* requests popup */
- .requests-wrap {
- position:fixed;
- top:2rem;
- left:0;
- right:0;
- bottom:0;
- width:100%;
- height:calc(100% - 2.5rem);
- display:none; /* change later */
- justify-content:center;
- align-items:flex-start;
- padding:2rem;
- backdrop-filter:blur(50px);
- z-index:9999;
- }
- body.requests-click .requests-wrap {display:flex;}
- .requests {
- width:100%;
- max-width:900px;
- height:fit-content;
- max-height:calc(100vh - 6rem);
- display:flex;
- gap:1.5px;
- overflow:hidden;
- background:var(--ColorBackground);
- border-radius:var(--Corners);
- box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
- }
- .req-leftwrap {
- width:25%;
- display:flex;
- flex-direction:column;
- gap:1rem;
- padding:1rem .5rem 1rem .5rem;
- background:var(--ColorLessOpaqueAccentOne);
- }
- .req-leftwrap .dots {width:fit-content; padding:0 .5rem 0 .5rem;}
- .req-leftwrap .dot:nth-of-type(1) {opacity:.9; background:var(--ColorPosts);}
- .req-leftwrap .dot:nth-of-type(2) {opacity:.75; background:var(--ColorPosts);}
- .req-leftwrap .dot:nth-of-type(3) {opacity:.6; background:var(--ColorPosts);}
- .req-leftwrap .dot i {color:var(--ColorAccentOne); text-shadow:0 1px var(--ColorPosts);}
- .req-left {
- width:100%;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- gap:1rem;
- padding:0 .5rem 0 .5rem;
- }
- .req-left::-webkit-scrollbar {
- width:1.5px;
- background:transparent;
- }
- .req-left::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .req-left::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentOne);
- border-radius:none;
- }
- .req-status, .req-links, .req-rules {
- display:flex;
- flex-direction:column;
- gap:.65rem;
- }
- .status-title, .links-title, .info-title, .rules-title {
- font-size:.925em;
- font-weight:bold;
- color:var(--ColorPosts);
- text-shadow:0 .5px var(--ColorAccentOne);
- text-transform:uppercase;
- }
- .req-info {
- display:flex;
- flex-direction:column;
- gap:.15rem;
- }
- .infotext {
- width:100%;
- color:var(--ColorPosts);
- text-shadow:0 .5px var(--ColorAccentOne);
- }
- .infotext p:first-of-type {margin-top:0;}
- .infotext p:last-of-type {margin-bottom:0;}
- .infotext b {color:var(--ColorPosts);}
- .infotext a, .infotext b a {
- display:inline-block;
- color:var(--ColorPosts);
- text-shadow:0 .5px var(--ColorAccentOne);
- border-bottom:1px solid var(--ColorMoreOpaquePosts);
- }
- .infotext a:hover, .infotext b a:hover {
- border-bottom:1px solid var(--ColorAccentOne);
- }
- .status, .rule, .req-links a {
- line-height:125%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.35rem;
- }
- .status i, .rule i, .req-links a i {font-size:1.2em; color:var(--ColorPosts); text-shadow:0 .5px var(--ColorAccentOne); transition:ease-in-out .4s;}
- .status.on i, .status.off i {font-size:1.4em;}
- .status.off i {color:var(--ColorMoreOpaquePosts); text-shadow:none;}
- .status span, .rule span, .req-links a span {color:var(--ColorPosts); text-shadow:0 .5px var(--ColorAccentOne); transition:ease-in-out .4s;}
- .req-links a:hover {gap:.15rem;}
- .req-links a:hover i {transform:rotate(180deg);}
- .req-right {
- width:75%;
- display:flex;
- flex-direction:column;
- gap:1.5px;
- }
- .req-title {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- padding:.5rem;
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
- }
- .req-title i {
- font-size:1.2em;
- color:var(--ColorPosts);
- text-shadow:0 1px var(--ColorAccentOne);
- }
- .req-title b {font-size:1.05em; color:var(--ColorPosts); text-shadow:0 1px var(--ColorAccentOne);}
- .req-tracking {
- width:100%;
- height:100%;
- display:flex;
- gap:1.5px;
- overflow-y:auto;
- }
- .req-tracking::-webkit-scrollbar, .req-progress::-webkit-scrollbar {
- width:1.5px;
- background:transparent;
- }
- .req-tracking::-webkit-scrollbar-track, .req-progress::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .req-tracking::-webkit-scrollbar-thumb, .req-progress::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentTwo);
- border-radius:none;
- }
- .reqt-wrap {
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- background:var(--ColorPosts);
- }
- .reqt-wrap.progress {width:calc(40% - .75px);}
- .reqt-wrap.complete {width:calc(60% - .75px);}
- .reqt-title {
- width:fit-content;
- padding:.5rem .75rem .5rem .75rem;
- font-size:.925em;
- font-weight:bold;
- color:var(--ColorTitle);
- text-transform:uppercase;
- }
- .req-progress, .req-complete {
- width:100%;
- overflow-y:auto;
- padding:0 .25rem .75rem .25rem;
- display:flex;
- flex-direction:column;
- gap:.15rem;
- }
- .req-complete::-webkit-scrollbar, .req-progress::-webkit-scrollbar {
- width:1.5px;
- background:transparent;
- }
- .req-complete::-webkit-scrollbar-track, .req-progress::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .req-complete::-webkit-scrollbar-thumb, .req-progress::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentTwo);
- border-radius:none;
- }
- .req-progress li, .req-complete a {
- position:relative;
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.35rem;
- line-height:125%;
- padding:.35rem .5rem .35rem .5rem;
- border-radius:5px;
- }
- .req-complete a:hover {background:var(--ColorOpaqueAccentTwo);}
- .req-progress li i {font-size:1.2em; color:var(--ColorAccentOne);}
- .req-complete a i {font-size:1.2em; color:var(--ColorAccentTwo); text-shadow:0 .5px var(--ColorOpaquePosts);}
- .req-complete a span {
- color:var(--ColorText);
- text-shadow:0 .5px var(--ColorOpaquePosts);
- transition:ease-in-out .4s;
- }
- .req-complete a:hover span {color:var(--ColorAccentTwo);}
- .req-askbox {
- width:100%;
- display:flex;
- flex-direction:column;
- background:var(--ColorPosts);
- }
- .req-asktitle {
- width:100%;
- padding:.5rem .75rem .5rem .75rem;
- font-size:.925em;
- font-weight:bold;
- color:var(--ColorTitle);
- text-transform:uppercase;
- }
- .header-right {
- display:flex;
- justify-content:flex-ends;
- align-items:center;
- gap:.5rem;
- }
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop i {
- font-size:1.4em;
- color:var(--ColorAccentText);
- 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;
- }
- a#totop:hover i {
- text-shadow:var(--Glow);
- -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;
- color:var(--ColorAccentText);
- 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;
- }
- button#theme-toggle:hover i {
- text-shadow:var(--Glow);
- -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);
- }
- }
- /* TUMBLR CONTROLS */
- a#controlsbutton {
- display:flex;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#controlsbutton i {
- font-size:1.35em;
- color:var(--ColorAccentText);
- 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;
- }
- a#controlsbutton:hover i {
- text-shadow:var(--Glow);
- -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 {text-shadow:var(--Glow);}
- @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(.75);
- margin-right:3.5rem;
- 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;
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a#credit {
- display:flex;
- justify-content:center;
- align-items:center;
- z-index:999999;
- }
- a#credit:hover {transform:scale(1.1);}
- a#credit i {
- font-size:1.35em;
- color:var(--ColorAccentText);
- 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;
- }
- a#credit:hover i {
- text-shadow:var(--Glow);
- -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)
- }
- }
- /* MAIN STYLING */
- main {
- width:100%;
- height:100vh;
- padding:3.5rem 2rem 1rem 2rem;
- display:flex;
- gap:3rem;
- }
- .main-wrap {
- width:100%;
- max-width:calc(100% - 300px);
- height:fit-content;
- max-height:calc(100vh - 4.5rem);
- display:flex;
- flex-direction:column;
- overflow:hidden;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
- }
- .section-wrap {
- width:100%;
- display:flex;
- overflow-y:auto;
- }
- section {
- width:100%;
- padding:1rem;
- overflow-y:auto;
- display:flex;
- justify-content:center;
- }
- section::-webkit-scrollbar {
- width:1.5px;
- height:1.5px;
- background:transparent;
- }
- section::-webkit-scrollbar-track {
- margin-bottom:2px;
- background:transparent;
- }
- section::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentTwo);
- border-radius:none;
- }
- .icon-wrap {}
- /*-- SECTION HEADER --*/
- .section-header {
- position:relative;
- width:100%;
- padding:.75rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1rem;
- background:var(--ColorBackground);
- box-shadow:inset 2px 2px 4px var(--ColorPosts);
- border-radius:var(--Corners) var(--Corners) 0 0;
- z-index:2;
- }
- /* dots */
- .dots {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .dot {width:.7rem; height:.7rem; display:flex; justify-content:center;
- align-items:center; border-radius:100%;}
- .dot:nth-of-type(1) {background:var(--ColorLessOpaqueAccentOne);}
- .dot:nth-of-type(2) {background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));}
- .dot:nth-of-type(3) {background:var(--ColorLessOpaqueAccentTwo);}
- .dot:nth-of-type(3) i {transform:rotate(-45deg);}
- .dot i {
- opacity:0;
- font-size:.65em;
- 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;
- }
- .dots:hover .dot i {opacity:1;}
- .sh-links {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.75rem;
- }
- .sh-links.two {gap:.5rem;}
- .sh-links a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .sh-links a i {
- font-size:1.35em;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- transition:ease-in-out .5s;
- }
- .sh-links a:hover i {color:transparent;}
- .sh-links a.nolink i {color:var(--ColorText); opacity:.3;}
- .sh-links a.nolink:hover i {color:var(--ColorText);}
- .sh-links a.smaller i {font-size:1.2em;}
- .sh-titlewrap {
- width:100%;
- height:1.75rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5rem;
- padding:.35rem;
- background:var(--ColorPosts);
- border-radius:30px;
- }
- .sh-titlewrap li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .sh-titlewrap li img {
- width:1.4rem;
- height:1.4rem;
- display:flex;
- justify-content:center;
- align-items:center;
- object-fit:cover;
- border-radius:100%;
- }
- .sh-title {
- color:var(--ColorTitle);
- /*
- font-weight:500;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- */
- }
- .sh-titlewrap i {
- padding:.5rem;
- display:flex;
- justify-content:center;
- align-items:center;
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /*--- SIDEBAR ---*/
- #sidebar {
- position:sticky;
- top:2.5rem;
- width:300px;
- max-height:calc(100vh - 4.5rem);
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1rem;
- z-index:999;
- }
- .sidebar::-webkit-scrollbar {
- width:0;
- background:transparent;
- }
- .sidebar::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .sidebar::-webkit-scrollbar-thumb {
- background:transparent;
- border-radius:none;
- }
- .sidebar-top {
- position:relative;
- width:100%;
- display:flex;
- flex-direction:column;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
- }
- .sb-top {
- position:relative;
- width:100%;
- padding:.5rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.75rem;
- background:var(--ColorBackground);
- box-shadow:inset 2px 2px 4px var(--ColorPosts);
- border-radius:var(--Corners) var(--Corners) 0 0;
- }
- .sb-top.two {justify-content:space-between;}
- #sbtwo {
- font-size:1.1em;
- color:var(--ColorTitle);
- margin-right:.5rem;
- }
- .sb-title {
- font-size:1.025em;
- font-weight:500;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- transition:ease-in-out .5s;
- }
- .sb-img {
- position:relative;
- width:100%;
- max-height:200px;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .sb-img img {
- width:100%;
- height:100%;
- max-height:200px;
- object-fit:cover;
- border-radius:0;
- }
- a.main-title {
- width:fit-content;
- line-height:130%;
- padding:.5rem;
- display:flex;
- flex-direction:column;
- }
- a.main-title b {
- font-family:var(--TitleFont), sans-serif;
- font-size:1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- a.main-title i {
- font-size:.95em;
- font-style:normal;
- color:var(--ColorText);
- transition:ease-in-out .4s;
- }
- a.main-title:hover i {color:var(--ColorTitle);}
- .sb-text {
- width:100%;
- padding:0 .5rem .5rem .5rem;
- }
- .sb-text p:first-of-type {margin-top:0;}
- .sb-text p:last-of-type {margin-bottom:0;}
- /* search bar */
- .searchbar {
- width:100%;
- padding:.5rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- background:var(--ColorBackground);
- box-shadow:inset 2px -2px 4px var(--ColorPosts);
- border-radius:0 0 var(--Corners) var(--Corners);
- }
- .searchbar i {
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .search {
- width:100%;
- }
- .search .query {
- border:0;
- outline:0;
- font-family:var(--BodyFont), sans-serif;
- width:100%;
- font-size:.975em;
- font-weight:normal;
- color:var(--ColorText);
- text-transform:lowercase;
- letter-spacing:.04rem;
- line-height:120%;
- word-wrap:break-word;
- background:transparent;
- }
- .search .query::-webkit-input-placeholder {color:inherit; opacity:.85;}
- .search .query:-moz-placeholder {color:inherit; opacity:.85;}
- .search .query::-moz-placeholder {color:inherit; opacity:.85;}
- .search .query:-ms-input-placeholder {color:inherit; opacity:.85;}
- input:focus::-webkit-input-placeholder {color:transparent; text-shadow:none;}
- input:focus:-moz-placeholder {color:transparent; text-shadow:none;}
- input:focus::-moz-placeholder {color:transparent; text-shadow:none;}
- input:focus:-ms-input-placeholder {color:transparent; text-shadow:none;}
- /*--- RULES ---*/
- .rules {
- width:100%;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.075) 0px 1px 2px 0px;
- }
- .sb-rules {
- width:100%;
- overflow-y:auto;
- padding:.5rem;
- display:flex;
- flex-direction:column;
- gap:.65rem;
- }
- .sb-rules::-webkit-scrollbar {
- width:1.5px;
- background:transparent;
- }
- .sb-rules::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .sb-rules::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentTwo);
- border-radius:none;
- }
- .sb-rules li {
- line-height:125%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.35rem;
- }
- .sb-rules i {
- font-size:1.125em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /*--- FILTERS ---*/
- .sort {
- width:275px;
- overflow-y:auto;
- border-right:1px solid var(--ColorBackground);
- }
- .sort::-webkit-scrollbar {
- width:1.5px;
- background:transparent;
- }
- .sort::-webkit-scrollbar-track {
- margin-top:2px;
- margin-bottom:2px;
- background:transparent;
- }
- .sort::-webkit-scrollbar-thumb {
- background:var(--ColorLessOpaqueAccentTwo);
- border-radius:none;
- }
- .sort-top {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5rem;
- padding:.5rem;
- border-bottom:1px solid var(--ColorBackground);
- }
- .sort-title {
- font-size:1.05em;
- font-weight:bold;
- color:var(--ColorTitle);
- }
- .sort-top i {
- font-size:1.2em;
- color:var(--ColorTitle);
- }
- .filtersubtitle {width:100%;}
- .filtersubtitle b {
- font-size:.925em;
- text-transform:uppercase;
- white-space:nowrap;
- }
- /* filterboxes */
- .filterbox ul {
- width:100%;
- margin:0;
- padding:.5rem;
- display:flex;
- flex-direction:column;
- gap:.25rem;
- }
- .filterbox a {
- position:relative;
- line-height:100%;
- padding:.35rem .5rem .35rem .5rem;
- cursor:help;
- z-index:1;
- }
- .filterbox a:after {
- content:'';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:100%;
- opacity:0;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:5px;
- z-index:-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;
- }
- .filterbox a:hover:after {opacity:.5;}
- .filterbox a.selected:after {opacity:1;}
- .filterbox span {
- font-size:.95em;
- font-weight:normal;
- color:var(--ColorText);
- text-shadow:0 1px var(--ColorOpaquePosts);
- line-height:100%;
- -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 span {font-weight:500; color:var(--ColorAccentOne);}
- .filterbox a.selected span {font-weight:bold; color:var(--ColorPosts); text-shadow:none;}
- /*--- ICONS ---*/
- .icon {
- width:85px;
- height:85px;
- margin-bottom:10px;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .icon img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:var(--Corners);
- }
- /*---- RESPONSIVENESS ---*/
- @media only screen and (max-width: 900px) {
- .header-left a#sidebarbutton {display:flex;}
- #sidebar {position:fixed; top:3rem; left:-100%; padding:.35rem; backdrop-filter:blur(50px); background:var(--ColorOpaquePosts); border-radius:var(--Corners);}
- body.sidebar-click #sidebar {left:1rem;}
- main {padding:3rem 1rem 1rem 1rem;}
- .main-wrap {max-width:100%; max-height:calc(100vh - 4rem);}
- }
- @media only screen and (max-width: 750px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, tumblr_controls, .tmblr-iframe, a#controlsbutton {display:none!important;}
- .req-leftwrap {width:35%;}
- .req-right {width:65%;}
- .req-tracking {display:block;}
- .reqt-wrap.progress {border-bottom:1.5px solid var(--ColorBackground);}
- .reqt-wrap.progress, .reqt-wrap.complete {width:100%;}
- }
- @media only screen and (max-width: 650px) {
- a.htitle {display:none;}
- .sh-links.one {display:none;}
- .sh-titlewrap li img, .sh-titlewrap i {display:none;}
- .req-leftwrap {width:40%;}
- .req-right {width:60%;}
- }
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <main><!-- main container -->
- <!--- HEADER --->
- <header>
- <div class="header-left">
- <a id="sidebarbutton" title="toggle sidebar"><i class="ti ti-layout-sidebar-left-collapse-filled"></i></a>
- <a class="htitle" href="/">{Title}</a>
- <a class="mainlink" href="/">home</a>
- <a class="mainlink" href="/ask">ask</a>
- <a class="mainlink" href="/archive">archive</i></a>
- <a class="mainlink" id="requestsbutton">requests</a>
- </div>
- <div class="header-right">
- <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-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>
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
- <!--- CREDIT: DO NOT TOUCH --->
- <a title="custom page by sage" id="credit" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
- </div>
- </header><!-- header ends -->
- <!--- REQUESTS POPUP --->
- <div class="requests-wrap">
- <div class="requests">
- <div class="req-leftwrap">
- <a class="dots" id="requestsbutton" title="close"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></a>
- <div class="req-left">
- <div class="req-info">
- <div class="info-title">info</div>
- <!--====================== EDIT HERE: REQUEST INFO =========================
- - links and bold text can be added to the infotext
- - recommend keeping this text relatively short!
- =========================================================================-->
- <div class="infotext"><!-- ALL TEXT BELOW THIS LINE -->
- your request will be completed in the order that it's received.
- </div><!-- // .infotext / ALL TEXT ABOVE THIS LINE -->
- </div><!-- // .req-info -->
- <div class="req-status">
- <div class="status-title">status</div>
- <!--===================== EDIT HERE: REQUEST STATUSES ======================
- REGULAR STATUS FORMAT:
- <div class="status"><i class="ti ti-ICON-NAME"></i><span>TEXT</span></div>
- TOGGLE STATUS FORMAT:
- <div class="status ON"><i class="ti ti-toggle-RIGHT"></i><span>TEXT</span></div>
- - for the toggle statuses: if you want a status that's off, change ON to OFF and RIGHT to LEFT
- - CAPITALIZED text is what you change
- - you can add as many of these as you like!
- - make sure all your statuses are between the indicated lines
- ======================== ALL STATUSES BELOW THIS LINE ===================-->
- <div class="status"><i class="ti ti-calendar-dot"></i><span>updated dec 21st</span></div>
- <div class="status"><i class="ti ti-bell-ringing-2"></i><span>update text</span></div>
- <div class="status on"><i class="ti ti-toggle-right"></i><span>status on</span></div>
- <div class="status off"><i class="ti ti-toggle-left"></i><span>status off</span></div>
- </div><!-- // .req-status / ALL STATUSES ABOVE THIS LINE -->
- <!--====================== EDIT HERE: REQUEST RULES ========================
- RULES FORMAT:
- <div class="rule"><i class="ti ti-ICON-NAME"></i><span>TEXT</span></div>
- - CAPITALIZED text is what you change
- - you can add as many of these as you like!
- - make sure all your rules are below the rules title and above the indicated line
- - if you don't want the rules here delete the line below ↓
- =========================================================================-->
- <div class="req-rules">
- <div class="rules-title">rules</div>
- <div class="rule"><i class="ti ti-checkbox"></i><span>here's a rule</span></div>
- <div class="rule"><i class="ti ti-checkbox"></i><span>here's a rule</span></div>
- <div class="rule"><i class="ti ti-square-x"></i><span>here's a rule</span></div>
- <div class="rule"><i class="ti ti-square-x"></i><span>here's a rule</span></div>
- </div><!-- // .req-rules / ALL RULES ABOVE THIS LINE -->
- <div class="req-links">
- <div class="links-title">links</div>
- <!--====================== EDIT HERE: REQUEST LINKS ========================
- LINKS FORMAT:
- <a href="/LINKURL"><i class="ti ti-caret-right"></i><span>LINK NAME</span></a>
- - CAPITALIZED text is what you change
- - you can add as many of these as you like!
- - make sure all your links are between the indicated lines
- ========================= ALL LINKS BELOW THIS LINE =====================-->
- <a href="/"><i class="ti ti-caret-right"></i><span>requests tag</span></a>
- <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
- <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
- <a href="/"><i class="ti ti-caret-right"></i><span>link</span></a>
- </div><!-- // .req-links / ALL LINKS ABOVE THIS LINE -->
- </div></div><!-- // .req-left -->
- <div class="req-right">
- <div class="req-title"><i class="ti ti-list-details"></i><b>requests</b></div>
- <div class="req-tracking">
- <div class="reqt-wrap progress">
- <div class="reqt-title">in progress</div>
- <div class="req-progress">
- <!--=================== EDIT HERE: REQUESTS IN PROGRESS ====================
- IN PROGRESS REQUESTS FORMAT:
- <li><i class="ti ti-ICON-NAME"></i><span>REQUEST TEXT</span></li>
- - CAPITALIZED text is what you change
- - you can add as many of these as you like!
- - make sure all your links are between the indicated lines
- ======================= ALL REQUESTS BELOW THIS LINE ====================-->
- <li><i class="ti ti-square-rounded"></i><span>request</span></li>
- <li><i class="ti ti-square-rounded"></i><span>request</span></li>
- <li><i class="ti ti-square-rounded"></i><span>request</span></li>
- </div><!-- // .req-progress / ALL REQUESTS ABOVE --->
- </div><!-- // .reqt-wrap.progress -->
- <div class="reqt-wrap complete">
- <div class="reqt-title">completed</div>
- <div class="req-complete">
- <!--=================== EDIT HERE: REQUESTS COMPLETED ======================
- COMPLETED REQUESTS FORMAT:
- <a href="/LINKURL"><i class="ti ti-ICON-NAME"></i><span>REQUEST TEXT</span></a>
- - CAPITALIZED text is what you change
- - you can add as many of these as you like!
- - make sure all your links are between the indicated lines
- ======================= ALL REQUESTS BELOW THIS LINE ====================-->
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- <a href="/"><i class="ti ti-square-rounded-check"></i><span>completed request</span></a>
- </div><!-- // .req-complete / ALL REQUESTS ABOVE -->
- </div><!-- // .reqt-wrap -->
- </div><!-- // .req-tracking -->
- <div class="req-askbox">
- <div class="req-asktitle">have a question?</div>
- <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="//tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe>
- </div><!-- // .req-askbox -->
- </div><!-- // .req-right -->
- </div><!-- // .requests -->
- </div><!-- // .requests-wrap -->
- <!-- SIDEBAR -->
- <div id="sidebar">
- <div class="sidebar-top">
- <div class="sb-top">
- <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
- <div class="sb-title" href="/">{Name}.txt</div>
- </div>
- <!--===================== EDIT HERE: SIDEBAR IMAGE =========================
- SIDEBAR IMAGE FORMAT:
- <div class="sb-img"><img src="IMAGEURL"></div>
- - CAPITALIZED text is what you change
- - replace the image url below, make sure the link is within the quotation marks ""
- =========================================================================-->
- <div class="sb-img"><img src="//64.media.tumblr.com/c4fd701ce3ef5797cf8a342d21e23c4a/cd457da01e6cbba5-4d/s2048x3072/226687274de043e2cb2570d5c7344d5b274d721d.png"></div>
- <a class="main-title" href="/"><b>icons page</b></a>
- <!--===================== EDIT HERE: SIDEBAR TEXT ==========================
- - i recommend keeping this text relatively short
- - links and bold text can be added!
- - if you don't want this text section delete the line below ↓
- =========================================================================-->
- <div class="sb-text">
- some text can go here! <a href="/">a link</a>. <b>bold text</b>.
- </div><!-- // .sb-text -->
- <!-- search bar -->
- <div class="searchbar">
- <i class="ti ti-search"></i>
- <form class="search" action="javascript:return false">
- <input type="text" class="query" placeholder="search blog . . .">
- </form>
- </div><!-- // .searchbar -->
- </div><!-- // .sidebar-top -->
- <div class="rules"><!-- rules -->
- <div class="sb-top two">
- <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
- <div class="sb-title">rules</div>
- <i id="sbtwo" class="ti ti-text-grammar"></i>
- </div>
- <div class="sb-rules">
- <!--===================== EDIT HERE: SIDEBAR RULES =========================
- RULES FORMAT:
- <li><i class="ti ti-ICON-NAME"></i><span>RULES TEXT</span></li>
- - CAPITALIZED text is what you can change
- - you can add as many of these as you like, it will scroll
- ======================== ALL RULES BELOW THIS LINE ======================-->
- <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
- <li><i class="ti ti-checkbox"></i><span>here is a rule</span></li>
- <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
- <li><i class="ti ti-square-x"></i><span>here is a rule</span></li>
- </div><!-- // .sb-rules - ALL RULES ABOVE THIS LINE -->
- </div><!-- // .rules -->
- </div><!-- // #sidebar -->
- <div class="main-wrap">
- <div class="section-header"><!-- SECTION HEADER -->
- <div class="dots"><div class="dot"><i class="ti ti-x"></i></div><div class="dot"><i class="ti ti-minus"></i></div><div class="dot"><i class="ti ti-caret-up-down-filled"></i></div></div>
- <div class="sh-links one">
- <a href="/" title="back to blog"><i class="ti ti-arrow-left"></i></a>
- <a class="nolink"><i class="ti ti-arrow-right"></i></a>
- <a class="smaller" href="" title="refresh"><i class="ti ti-reload"></i></a>
- </div>
- <div class="sh-titlewrap">
- <li>
- <img src="{PortraitURL-128}">
- <div class="sh-title">{Name}.tumblr.com/icons</div>
- </li>
- <i class="ti ti-star"></i>
- </div>
- <div class="sh-links two">
- <!--=================== EDIT HERE: SECTION HEADER LINKS ====================
- LINKS FORMAT:
- <a class="smaller" href="/LINKURL" title="LINK TITLE"><i class="ti ti-ICON-NAME"></i></a>
- - CAPITALIZED text is what you can change
- - if you don't want these to be links delete: href="/" title="link"
- - example here: <a class="smaller"><i class="ti ti-plus"></i></a>
- ======================== ALL LINKS BELOW THIS LINE ======================-->
- <a class="smaller" href="/" title="link"><i class="ti ti-plus"></i></a>
- <a class="smaller" href="/" title="link"><i class="ti ti-share-2"></i></a>
- </div><!-- // .sh-links.two / ALL LINKS ABOVE THIS LINE -->
- </div><!-- // .section-header -->
- <div class="section-wrap">
- <div class="sort"><!-- filters -->
- <div class="sort-top">
- <div class="sort-title">sort by</div>
- <i class="ti ti-sort-descending"></i>
- </div>
- <!--========================== EDIT HERE: FILTERS ==========================
- 1. FILTERBOX
- - this is if you want to add an entire new filter section
- FORMAT:
- <div class="filterbox [three]">
- <ul class="filter option-set exclusive" data-filter-group="group[3]">
- <div class="filtersubtitle"><b>[filer section name]</b></div>
- <a href="#" data-filter-value="" class="selected" id="allplus">
- <span>all</span></a>
- <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
- <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
- <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
- </ul>
- </div>
- 2. INDIVIDUAL FILTERS
- - make sure each filter name is between <span></span>, example: <span>filter 1</span>
- - if you want to change the filter values (f1, f2, etc.) you can! just make sure to keep the period before each value, example: .f1
- FORMAT:
- <a href="#" data-filter-value=".[filtervalue]"><span>[filter name]</span></a>
- - [bracketed text] is what you can change, delete the brackets
- ======================= ALL FILTERBOXES BELOW THIS LINE =================-->
- <div class="filterbox one"><!-- filterbox one -->
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <div class="filtersubtitle"><b>colors</b></div>
- <a href="#" data-filter-value="" class="selected" id="allplus">
- <span>all</span></a>
- <a href="#" data-filter-value=".f1"><span>color 1</span></a>
- <a href="#" data-filter-value=".f2"><span>color 2</span></a>
- <a href="#" data-filter-value=".f3"><span>color 3</span></a>
- <a href="#" data-filter-value=".f4"><span>color 4</span></a>
- </ul><!-- // all filterbox one filters above this line -->
- </div><!-- // .filterbox.one -->
- <div class="filterbox two"><!-- filterbox two -->
- <ul class="filter option-set exclusive" data-filter-group="group2">
- <div class="filtersubtitle"><b>alphabetical</b></div>
- <a href="#" data-filter-value="" class="selected">
- <span>all</span></a>
- <a href="#" data-filter-value=".ae"><span>a - e</span></a>
- <a href="#" data-filter-value=".fj"><span>f - j</span></a>
- <a href="#" data-filter-value=".ko"><span>k - o</span></a>
- <a href="#" data-filter-value=".pt"><span>p - t</span></a>
- <a href="#" data-filter-value=".uz"><span>u - z</span></a>
- </ul><!-- // all filterbox two filters above this line -->
- </div><!-- // .filterbox.two -->
- <!--==================== ALL FILTERBOXES ABOVE THIS LINE ================-->
- </div><!-- // .sort -->
- <section><!-- section -->
- <div class="icon-wrap">
- <!--========================== EDIT HERE: ICONS ============================
- GENERAL FORMAT:
- <div class="icon FILTER VALUES">
- <img src="IMAGEURL">
- </div>
- - CAPITALIZED text is what you change
- - make sure each filter value is separated by a single space
- ========================= ALL ICONS BELOW THIS LINE =====================-->
- <div class="icon f1 f3 ae ko uz">
- <img src="//i.imgur.com/WT8b1PB.png">
- </div>
- <div class="icon f3 f4 ae fj pt uz">
- <img src="//i.imgur.com/MWUqSqm.png">
- </div>
- <div class="icon f2 f4 fj ko pt">
- <img src="//i.imgur.com/yW6CU8U.png">
- </div>
- <div class="icon f4 fj ko pt">
- <img src="//i.imgur.com/rYQ0c6c.png">
- </div>
- <div class="icon f1 f2 f4 ae fj pt">
- <img src="//i.imgur.com/bXRP6Im.png">
- </div>
- <div class="icon f3 f4 fj fj pt">
- <img src="//i.imgur.com/YJAF2dQ.png">
- </div>
- <div class="icon f2 f3 ae ko pt">
- <img src="//i.imgur.com/WKJTnvQ.png">
- </div>
- <div class="icon f1 f4 fj ko fj">
- <img src="//i.imgur.com/2V4oeru.png">
- </div>
- <div class="icon f1 f4 fj ko fj">
- <img src="//i.imgur.com/ejyElQW.png">
- </div>
- <div class="icon f1 f4 fj ko fj">
- <img src="//i.imgur.com/lNMazbY.png">
- </div>
- <div class="icon f1 f4 fj ko fj">
- <img src="//i.imgur.com/1NpmxHi.png">
- </div>
- <div class="icon f1 f4 fj ko fj">
- <img src="//i.imgur.com/aUFCu8Z.png">
- </div>
- <!--===================== ALL ICONS ABOVE THIS LINE =====================-->
- </div><!-- // .icon-wrap -->
- </div><!-- // .section-wrap -->
- </div><!-- // .main-wrap -->
- </section><!-- // section -->
- </main><!-- end of main container -->
- <script>
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'top',
- offset: "0, 5",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // sidebar popup
- $(document).ready(function(){
- $('a#sidebarbutton').click(function(){
- $('body').toggleClass('sidebar-click');
- $('a#sidebarbutton i').toggleClass("ti-layout-sidebar-left-expand-filled");
- });
- });
- //filters
- $(document).ready(function() {
- var $container = $(".icon-wrap"); // 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: ".icon", // the elements to filter
- masonry: {
- columnWidth:85,
- gutter: 10,
- fitWidth: true,
- horizontalOrder: true
- }
- });
- $('.icon-wrap').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();
- });
- });
- // requests popup
- $(document).ready(function(){
- $('a#requestsbutton').click(function(){
- $('body').toggleClass('requests-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/tagged/' + 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