Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>{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">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | TWITTER ABOUT PAGE BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- SEARCH 'EDIT HERE'
- CREDITS:
- - phosphor icons / phosphoricons.com
- - 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>
- <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
- <!----- BUNNY FONTS -----
- EDIT HERE: replace Nunito and Montserrat with the names of your fonts -->
- <link href="https://fonts.bunny.net/css?family=Nunito: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>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/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>
- /*--- EDIT HERE ----*/
- :root {
- /*---- VARIABLES ----*/
- --Corners:10px; /* 0px, 5px, or 10px recommended */
- --Glow:0 0 10px; /* change to 0 if you don't want the glow */
- /*---- FONT STYLE -----*/
- --BodyFont:'Nunito'; /* replace the font names above ^ too */
- --TitleFont:'Montserrat';
- --FontSize:15px;
- }
- html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- /* EDIT HERE: LIGHT MODE COLORS */
- --ColorBackground:#eee;
- --ColorContent:#fafafa;
- --ColorBorders:#ddd;
- --ColorTitle:#333;
- --ColorText:#666;
- --ColorLink:#4685b3;
- --ColorAccent:#2d71a2;
- --ColorGradientOne:#6389a5;
- --ColorGradientTwo:#93c0e2;
- --ColorGradientText:#fff;
- --ColorGradientAccent:#def1ff;
- --ColorOpacity:rgba(0,0,0,.1);
- --ColorReverseOpacity:rgba(255,255,255,.1);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- /* EDIT HERE: DARK MODE COLORS */
- --ColorBackground:#222;
- --ColorContent:#333;
- --ColorBorders:#555;
- --ColorTitle:#eee;
- --ColorText:#bbb;
- --ColorLink:#b2d1e4;
- --ColorAccent:#c5e9ff;
- --ColorGradientOne:#7098b1;
- --ColorGradientTwo:#99bbd0;
- --ColorGradientText:#fff;
- --ColorGradientAccent:#dff3ff;
- --ColorOpacity:rgba(255,255,255,.1);
- --ColorReverseOpacity:rgba(0,0,0,.1);
- }
- 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-family:var(--TitleFont), sans-serif;
- font-size:.9em;
- color:var(--ColorContent);
- text-transform:lowercase;
- text-align:center;
- letter-spacing:.1em;
- background:var(--ColorAccent);
- box-shadow:4px 4px 8px rgba(0,0,0,.1);
- border-radius:var(--Corners);
- margin-bottom:.5em;
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background:var(--ColorContent);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorContent);
- border-radius:5px;
- }
- ::-webkit-scrollbar-thumb {
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:5px;
- }
- /*--- TEXT SELECTION ---*/
- ::-moz-selection { /* Code for Firefox */
- color:var(--ColorContent);
- background:var(--ColorAccent);
- }
- ::selection {
- color:var(--ColorContent);
- background:var(--ColorAccent);
- }
- /*--- COMMON ---*/
- body {
- font-family:var(--BodyFont), sans-serif;
- font-size:var(--FontSize);
- color: var(--ColorText);
- background-color: var(--ColorBackground);
- line-height:140%;
- word-wrap:break-word;
- letter-spacing:.04em;
- margin:0;
- }
- a {
- color:var(--ColorLink);
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a:hover {
- color: var(--ColorAccent);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .description a {
- position:relative;
- white-space:nowrap;
- border-bottom:2px solid var(--ColorBorders);
- }
- .description a:after {
- content:'';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:-2px;
- left:0;
- background-color:var(--ColorLink);
- border-radius:5px;
- transform-origin:middle;
- transition: transform 0.25s ease-out;
- }
- .description a:hover:after {
- transform: scaleX(1);
- transform-origin:middle;
- }
- button {font-size:1em;}
- blockquote {
- border-left:2px solid var(--ColorBorders);
- padding-left:.75em;
- margin-left:1em;
- }
- li {list-style-type:circle;}
- li::marker {color:var(--ColorAccent)}
- h1, h1 a, h2, h3, h4, h5 {
- font-family:var(--TitleFont), sans-serif;
- letter-spacing:.1em;
- color:var(--ColorTitle);
- font-weight:700;
- }
- h1 {font-size:1.2em;}
- h2 {font-size:1.15em;}
- h3 {font-size:1.1em; padding:0 0 .5em 0; margin:0; display:inline-block;}
- h4 {font-size:1.05em;}
- h5 {font-size:1.025em;}
- h1 a:hover {color:var(--ColorAccent);}
- h4 {margin:0 0 1em 0; text-align:center;}
- h5 {margin:0; padding:0;}
- small {font-size: 0.95em;}
- big {font-size: 1.1em;}
- hr {
- height: 1px;
- border: none;
- box-shadow: none;
- background-color: var(--ColorBorders);
- }
- pre {
- line-height: inherit;
- font-size: inherit;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- }
- b, strong {
- color:var(--ColorTitle);
- font-weight:800;
- }
- b a:hover {
- color:var(--ColorAccent);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- /*--- MAIN CONTAINERS ---*/
- main {
- width:100%;
- display:flex;
- justify-content:center;
- }
- header {
- position:fixed;
- top:0;
- left:0;
- right:0;
- width:calc(100% - 2em);
- height:60px;
- padding:0 1em 0 1em;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- background:var(--ColorContent);
- z-index:9999;
- }
- .topleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- .topleft a {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- border-radius:100%;
- z-index:2;
- }
- .topleft a:after {
- content:'';
- position:absolute;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- border-radius:100%;
- 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;
- }
- .topleft a:hover:after {opacity:.35;}
- .topleft i {
- font-size:1.5em;
- 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;
- }
- .topleft a:hover i {
- color:var(--ColorAccent);
- 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;
- }
- .topleft li {
- font-family:var(--TitleFont), sans-serif;
- display:flex;
- flex-direction:column;
- line-height:120%;
- }
- .topleft li b {font-weight:600;}
- .topleft li span {font-size:.85em;}
- .topright {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a.credit {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- border:1px solid var(--ColorBorders);
- border-radius:100%;
- z-index:2;
- }
- a.credit:hover {border:1px solid transparent;}
- a.credit:after {
- content:'';
- position:absolute;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- border-radius:100%;
- 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;
- }
- a.credit:hover:after {opacity:.35;}
- a.credit i {
- font-size:1.5em;
- 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.credit:hover i {
- color:var(--ColorAccent);
- 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: 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)
- }
- }
- /* DAY/NIGHT */
- button#theme-toggle {
- outline:none;
- border:none;
- padding:0;
- background:transparent;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- button#theme-toggle span {
- position:relative;
- justify-content:center;
- align-items:center;
- padding:.5em;
- border:1px solid var(--ColorBorders);
- border-radius:100%;
- cursor:help;
- z-index:2;
- -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 span:hover {border:1px solid transparent;}
- button#theme-toggle span:after {
- content:'';
- position:absolute;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- border-radius:100%;
- 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;
- }
- button#theme-toggle span:hover:after {opacity:.35;}
- button#theme-toggle i {
- font-size:1.5em;
- 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;
- }
- button#theme-toggle span:hover i {
- color:var(--ColorAccent);
- 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 {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- border:1px solid var(--ColorBorders);
- border-radius:100%;
- cursor:help;
- z-index:2;
- }
- a#controlsbutton:hover {border:1px solid transparent;}
- a#controlsbutton:after {
- content:'';
- position:absolute;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- border-radius:100%;
- 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;
- }
- a#controlsbutton:hover:after {opacity:.35;}
- a#controlsbutton i {
- font-size:1.5em;
- 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(--ColorAccent);
- 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: 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;
- }
- @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 {
- z-index:999999999!important;
- margin-top:60px;
- margin-right:-2em;
- transform:scale(.75);
- opacity:0;
- visibility:hidden;
- }
- body.controlsclick 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;
- }
- body.controlsclick #controlsbutton i {
- color:var(--ColorAccent);
- }
- /*--- MAIN CONTENT ---*/
- .mainwrap {
- position:relative;
- width:800px;
- max-height:calc(100vh - 60px - 2em);
- overflow-y:auto;
- margin-top:calc(60px + 1em);
- margin-left:2em;
- margin-right:2em;
- margin-bottom:1em;
- background:var(--ColorContent);
- border-radius:var(--Corners);
- }
- section {
- position:relative;
- width:100%;
- height:100%;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- }
- /* BANNER */
- .banner {
- position:relative;
- width:100%;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .bannerimg {
- width:100%;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .bannerimg img {
- width:100%;
- height:200px;
- object-fit:cover;
- border-radius:var(--Corners) var(--Corners) 0 0;
- }
- .portraitimg {
- position:absolute;
- bottom:-50px;
- left:1em;
- width:calc(100% - 1em);
- display:flex;
- justify-content:space-between;
- align-items:flex-end;
- }
- .portraitimg img {
- width:96px;
- height:96px;
- object-fit:cover;
- padding:4px;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- }
- /* main buttons */
- .mainbuttons {
- position:absolute;
- right:0;
- bottom:-60px;
- width:fit-content;
- height:60px;
- padding:0 1em 0 1em;
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- z-index:9999;
- }
- .mainbuttons a.mainlink {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- background:transparent;
- border-radius:100%;
- border:1px solid var(--ColorBorders);
- }
- a#followbutton {padding:.5em 1em .5em 1em; border-radius:50px;}
- a.mainlink:hover {border:1px solid transparent;}
- a.mainlink i {
- font-size:1.5em;
- 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.mainlink:hover i {
- color:var(--ColorAccent);
- text-shadow:var(--Glow);
- }
- a.mainlink b {
- font-family:var(--TitleFont), sans-serif;
- font-weight:600;
- 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.mainlink:hover b {color:var(--ColorAccent); text-shadow:{select:Glow};}
- a.mainlink:after {
- content:'';
- position:absolute;
- left:0;
- top:0;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- border-radius:100%;
- border:1px solid var(--ColorAccent);
- -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#followbutton:after {border-radius:50px;}
- a.mainlink:hover:after {opacity:.25;}
- /* more links dropdown */
- a#morebutton {cursor:help;}
- a#morebutton.more-click i {color:var(--ColorAccent);}
- .moredrop {
- position:absolute;
- right:100%;
- top:50%;
- width:200px;
- display:flex;
- flex-direction:column;
- overflow:hidden;
- background:var(--ColorContent);
- border-radius:var(--Corners);
- box-shadow:2px 2px 10px var(--ColorOpacity);
- }
- .moredrop a {
- position:relative;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- padding:.5em 1em .5em 1em;
- z-index:2;
- }
- .moredrop a:after {
- content:'';
- position:absolute;
- left:0;
- bottom:0;
- width:100%;
- height:100%;
- opacity:0;
- background:var(--ColorAccent);
- 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;
- }
- .moredrop a:hover:after {opacity:.35;}
- .moredrop i {
- font-size:1.3em;
- 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;
- }
- .moredrop a:hover i {color:var(--ColorAccent); text-shadow:var(--Glow);}
- .moredrop b {
- font-weight:normal;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .moredrop a:hover b {color:var(--ColorAccent);}
- /* main title */
- .maintitle {
- margin-top:50px;
- padding:1em;
- font-family:var(--TitleFont), sans-serif;
- display:flex;
- flex-direction:column;
- gap:.25em;
- }
- .maintitle li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .maintitle b {font-size:1.4em;}
- .maintitle i {
- font-size:1.3em;
- color:var(--ColorAccent);
- }
- /* status */
- .status {
- width:calc(100% - 2em);
- color:var(--ColorTitle);
- padding:0 1em .5em 1em;
- }
- .status p {margin-bottom:0; margin-top:0;}
- /* stats & blogs wrap */
- .statwrap {
- display:flex;
- flex-direction:column;
- gap:1em;
- padding:.5em 1em 1em 1em;
- border-bottom:1px solid var(--ColorBorders);
- }
- /* stats */
- .stats {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-wrap:wrap;
- gap:.5em;
- }
- .stats li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- .stats li i {
- position:relative;
- font-size:1.25em;
- color:var(--ColorText);
- display:flex;
- align-items:center;
- }
- .stats li b {
- font-weight:normal;
- color:var(--ColorText);
- white-space:nowrap;
- display:flex;
- align-items:center;
- }
- /* blogs */
- .stats a {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .stats a img {
- width:1.5em;
- height:1.5em;
- object-fit:cover;
- border-radius: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;
- }
- .stats a:hover img {transform:rotate(10deg);}
- .stats a b {
- font-weight:normal;
- color:var(--ColorAccent);
- white-space:nowrap;
- line-height:100%;
- border-bottom:1px solid transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .stats a:hover b {border-bottom:1px solid var(--ColorAccent);}
- /* numbers */
- .numbers {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- .numbers li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- .numbers a {color:var(--ColorTitle);}
- /* DESCRIPTION */
- .description {
- width:calc(100% - 2em);
- height:calc(100% - 2em);
- overflow-y:auto;
- padding:1em;
- }
- .description::-webkit-scrollbar {
- width:4px;
- height:4px;
- background:transparent;
- }
- .description::-webkit-scrollbar-track {background:transparent;margin-bottom:.25em;}
- /*---- RESPONSIVENESS ---*/
- @media only screen and (max-width: 800px) {
- .mainwrap {width:100%;}
- }
- @media only screen and (max-width: 600px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
- .moredrop {right:auto; top:100%;}
- }
- @media only screen and (max-width: 450px) {
- body {background:var(--ColorContent);}
- .mainwrap {margin:0 0 0 0; width:100%; max-height:100vh; overflow-y:visible; border-radius:0;}
- section {overflow-y:visible;}
- .bannerimg img {border-radius:0;}
- .description {overflow-y:visible;}
- }
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <main><!-- main container -->
- <!-- HEADER -->
- <header>
- <div class="topleft">
- <a title="back to blog" href="/"><i class="ti ti-arrow-left"></i></a>
- <li><b>{Title}</b>
- <span>@{Name}</span></li>
- </div>
- <div class="topright">
- <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"></i></span>
- </button>
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
- <!--- CREDIT: DO NOT TOUCH --->
- <a class="credit" title="page by sage" href="https://phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
- </div>
- </header>
- <!-- main content -->
- <div class="mainwrap">
- <section>
- <!--- EDIT HERE: BANNER
- - replace the banner image link with the image link of your choosing
- - you can replace your icon with an image link too if you want
- --->
- <div class="banner">
- <div class="bannerimg"><img src="https://64.media.tumblr.com/c7f3e43582722da0b23cc3f9d1851267/cd457da01e6cbba5-69/s2048x3072/0415fdf4faaffcdbdf374155e077e01c28e43a8f.jpg"></div>
- <div class="portraitimg"><img src="{PortraitURL-128}"></div>
- <div class="mainbuttons">
- <!-- EDIT HERE: MORE LINKS
- if you don't want this, DELETE starting here -->
- <a class="mainlink" id="morebutton" title="toggle links"><i class="ti ti-dots"></i></a>
- <div class="moredrop">
- <!--- EDIT HERE: LINKS DROPDOWN
- FORMAT:
- <a href="LINKURLHERE"><i class="ti ti-TABLER-ICON-HERE"></i><b>LINK NAME</b></a>
- - capitalized words indicate what you can change
- - copy and paste as many links as you want but keep in mind this menu will not scroll
- ---->
- <a href="/"><i class="ti ti-box-multiple-1"></i><b>link one</b></a>
- <a href="/"><i class="ti ti-box-multiple-2"></i><b>link two</b></a>
- <a href="/"><i class="ti ti-box-multiple-3"></i><b>link three</b></a>
- <a href="/"><i class="ti ti-box-multiple-4"></i><b>link four</b></a>
- <a href="/"><i class="ti ti-box-multiple-5"></i><b>link five</b></a>
- </div>
- <!--- DELETE ending here / more links ends ---->
- <a class="mainlink" title="contact" href="/ask"><i class="ti ti-mail"></i></a>
- <a class="mainlink" id="followbutton" target="_blank" href="//tumblr.com/follow/{Name}"><b>follow</b></a>
- </div>
- </div>
- <!--- EDIT HERE: TITLE
- - make sure your title stays wrapped in <b></b>
- - if you change the subtitle make sure it stays wrapped in <span></span>
- --->
- <div class="maintitle">
- <li><b>name</b><i class="ph-circle-wavy-check-fill"></i></li>
- <span>about me</span>
- </div>
- <!-- EDIT HERE: STATUS - keep this short, you can delete it if you don't want it -->
- <div class="status">short text/quote/etc.</div>
- <div class="statwrap">
- <!-- stats & blogs -->
- <div class="stats">
- <!--- EDIT HERE: STATS & BLOGS
- STATS FORMAT:
- <li>
- <i class="ti ti-ICON-NAME-HERE"></i>
- <b>TEXT HERE</b>
- <li>
- BLOGS FORMAT:
- <li><a href="//BLOGNAME.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar">
- <b>BLOGNAME.tumblr.com</b>
- </a></li>
- - capitalized words indicate what you can change
- - copy and paste as many times as you want
- ---->
- <li>
- <i class="ti ti-writing-sign"></i>
- <b>name</b>
- <li>
- <li>
- <i class="ti ti-id"></i>
- <b>pronouns</b>
- <li>
- <li>
- <i class="ti ti-cake"></i>
- <b>age</b>
- <li>
- <li>
- <i class="ti ti-map-pin"></i>
- <b>location</b>
- <li>
- <li><a href="//phantomcodes.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/phantomcodes.tumblr.com/avatar">
- <b>phantomcodes.tumblr.com</b>
- </a></li>
- </div><!-- stats & blogs end -->
- <!-- EDIT HERE: NUMBERS
- FORMAT:
- <li><b>COUNTER SCRIPT HERE</b>
- <span>TEXT HERE</span></li>
- - i use https://freehostedscripts.net/ for their online users and text hit counters
- - it will give you what you need to copy/paste between <b></b>
- -->
- <div class="numbers">
- <li><b>12</b>
- <span>visitors</span></li>
- <li><b>12345</b>
- <span>hits</span></li>
- </div><!-- numbers ends -->
- </div><!-- .statwrap -->
- <!--- EDIT HERE: DESCRIPTION --->
- <div class="description">
- description text goes here. <b>bold text</b>. <a href="/">here's a link</a>.
- <li>this is</li>
- <li>a list</li>
- <li>of things</li>
- <blockquote>blockquote. here's a <b><a href="/">bold link</a></b>.</blockquote>
- </div><!-- description ends -->
- </section>
- </div><!-- mainwrap ends -->
- </main><!-- end of main container -->
- <script>
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'bottom',
- offset: "40, 10",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // more links dropdown
- $(document).ready(function() {
- $(".moredrop").hide();
- $("a#morebutton").click(function(event){
- $(this).next(".moredrop").slideToggle(500);
- event.preventDefault();
- $(this).toggleClass('upside', 500);
- $(this).toggleClass('more-click');
- });
- });
- // tumblr controls
- $(document).ready(function(){
- $('#controlsbutton').click(function(){
- $('body').toggleClass('controlsclick');
- });
- });
- // 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