Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <title>about / {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 04 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>
- <!----- 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 {
- margin-bottom:.5rem;
- 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:.75em;
- margin-left:1em;
- }
- blockquote p {padding:0!important;}
- ul {list-style-type:circle; margin:0 0 1rem 0; padding-right:.5rem;}
- 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 */
- .sb-desc a, .aanswer a {
- display:inline-block;
- position:relative;
- border-bottom:1.5px solid var(--ColorBorders);
- }
- .sb-desc a:after, .aanswer a:after {
- content: '';
- position:absolute;
- bottom:-1.5px;
- 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;
- }
- .sb-desc a:hover:after, .aanswer a:hover:after {
- transform:scaleX(1);
- transform-origin:center;
- }
- /*--- FIXED BUTTONS ---*/
- .fixedbuttons {
- position:fixed;
- top:.75rem;
- right:.75rem;
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5rem;
- z-index:99999;
- }
- /* 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% - 4rem);
- margin:3rem 2rem 2rem 2rem;
- display:flex;
- justify-content:center;
- }
- section {
- position:relative;
- max-width:550px;
- overflow:hidden;
- margin:auto;
- display:flex;
- flex-direction:column;
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- border-radius:var(--Corners);
- z-index:1;
- }
- section:after {
- content:'';
- position:absolute;
- top:1px;
- left:1px;
- width:calc(100% - 2px);
- height:calc(100% - 2px);
- background:var(--ColorPosts);
- border-radius:calc(var(--Corners) - 1px);
- z-index:-1;
- }
- .aboutheader {
- 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));
- }
- .aboutheader b {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1); cursor:default;}
- .aboutheader li {
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.25rem;
- }
- .aboutheader li 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);
- }
- .aboutheader li 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;
- }
- /*-- about container --*/
- .aboutcont {
- width:100%;
- max-height:650px;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- gap:1rem;
- padding:1rem;
- }
- .aboutcont::-webkit-scrollbar {
- width:2px;
- height:2px;
- background:transparent;
- }
- .aboutcont::-webkit-scrollbar-track {background:transparent;}
- /*--- basic info ---*/
- .basicinfo {
- width:100%;
- padding-bottom:1rem;
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- flex-wrap:wrap;
- gap:1rem;
- border-bottom:2px dotted var(--ColorBorders);
- }
- .basicinfo li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .basicinfo i {
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .basicinfo span {color:var(--ColorTitle);}
- /*-- bio image --*/
- .bioimage {
- width:100%;
- max-height:100px;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .bioimage img {
- width:100%;
- max-height:100px;
- object-fit:cover;
- border-radius:var(--Corners);
- }
- /*-- bio text --*/
- .bio {width:100%;}
- .biotitle {margin-bottom:1rem;}
- .biotitle b {
- position:relative;
- display:inline-block;
- font-family:var(--TitleFont), sans-serif;
- font-size:1.2em;
- text-shadow:0 .5px var(--ColorPosts);
- line-height:120%;
- z-index:1;
- }
- .biotitle 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;
- }
- .biotext {width:100%;}
- .biotext li {list-style-type:circle; margin-left:1rem; padding-left:0;}
- .biotext p:last-of-type {margin-bottom:0;}
- .biotext a {
- position:relative;
- display:inline-block;
- font-weight:500;
- border-bottom:1.5px solid var(--ColorBorders);
- }
- .biotext a:after {
- content: '';
- position:absolute;
- bottom:-1.5px;
- left:0;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
- border-radius:3px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .biotext a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- /*-- likes --*/
- .likedislike {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.25rem;
- }
- .likes {
- width:50%;
- display:flex;
- flex-wrap:wrap;
- gap:.5rem;
- }
- .likestitle {width:100%;}
- .likestitle b {
- position:relative;
- display:inline-block;
- width:fit-content;
- font-family:var(--TitleFont), sans-serif;
- font-size:1em;
- text-shadow:0 .5px var(--ColorPosts);
- line-height:120%;
- z-index:1;
- }
- .likes 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;
- }
- .likes li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- .likes i {font-size:1.1em;}
- .likes li:nth-child(3n-3) i {color:var(--ColorAccentOne);}
- .likes li:nth-child(3n-2) i {color:var(--ColorAccentTwo);}
- .likes li:nth-child(3n-1) i {color:var(--ColorAccentThree);}
- .likes span {font-size:.975em; white-space:nowrap;}
- /*--- 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 -->
- <!--- FIXED BUTTONS --->
- <div class="fixedbuttons">
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
- </div><!-- // .fixedbuttons -->
- <section><!-- section -->
- <div class="aboutheader">
- <b>{Name}.txt</b>
- <li><span>_</span><i class="ti ti-browser"></i><i class="ti ti-x"></i></li>
- </div>
- <div class="aboutcont"><!-- about container -->
- <div class="basicinfo">
- <!--========================================================================
- EDIT HERE: BASIC INFO
- FORMAT:
- <li><i class="ti ti-[iconname]"></i><span>[text here]</span></li>
- - [bracketed text] is what you can change, delete the brackets
- - feel free to add/delete these as you like but i recommend not having more than 6
- =========================================================================-->
- <li><i class="ti ti-user"></i><span>name</span></li>
- <li><i class="ti ti-cake"></i><span>age</span></li>
- <li><i class="ti ti-leaf"></i><span>pronouns</span></li>
- <li><i class="ti ti-sun-high"></i><span>zodiac</span></li>
- <li><i class="ti ti-map-pin"></i><span>location</span></li>
- </div><!-- // .basicinfo -->
- <!--========================================================================
- EDIT HERE: IMAGE
- - paste you image link below!
- - it has a 100% width (550px - 2 x font size) and a max height of 100px, i can change this if you have a specific image in mind!
- - you can also delete the entire bioimage div if you don't want it
- =========================================================================-->
- <div class="bioimage">
- <img src="//64.media.tumblr.com/f8e056412f3808d69aed80f6239cdcfb/4e116e4cb49a8ad6-0d/s2048x3072/1790a13681d2b908ab8a73a6a6397f63b5f873dc.pnj">
- </div><!-- // .bioimage -->
- <div class="bio"><!-- bio -->
- <div class="biotitle"><b>about me</b></div>
- <div class="biotext">
- <!--========================================================================
- EDIT HERE: BIO TEXT
- - put your about text below!
- =========================================================================-->
- about text goes here. <b>bold text</b>. <a href="/">here's a link</a>.
- <blockquote>this is a blockquote</blockquote>
- <h4>here's a heading</h4>
- <li>this is</li>
- <li>a list</li>
- <li>of things</li>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at mauris consectetur, faucibus enim vitae, porta ante. Nam laoreet, diam non aliquet blandit, nisl ex ultrices diam, sed placerat eros dolor sit amet augue. Quisque mollis enim a nisl sollicitudin feugiat. Curabitur sed hendrerit lorem.</p>
- </div><!-- // .biotext -->
- </div><!-- // .bio -->
- <div class="likedislike"><!-- likes & dislikes -->
- <div class="likes"><!-- likes -->
- <div class="likestitle"><b>likes</b></div>
- <!--========================================================================
- EDIT HERE: LIKES
- FORMAT:
- <li><i class="ti ti-[thumb-up]"></i><span>[like text]</span></li>
- - [bracketed text] is what you can change, delete the brackets
- - the dislikes format is the same!
- =========================================================================-->
- <li><i class="ti ti-thumb-up"></i><span>like</span></li>
- <li><i class="ti ti-thumb-up"></i><span>like</span></li>
- <li><i class="ti ti-heart"></i><span>like</span></li>
- <li><i class="ti ti-heart"></i><span>like</span></li>
- </div><!-- // .likes -->
- <div class="likes"><!-- dislikes -->
- <div class="likestitle"><b>dislikes</b></div>
- <li><i class="ti ti-thumb-down"></i><span>dislike</span></li>
- <li><i class="ti ti-thumb-down"></i><span>dislike</span></li>
- <li><i class="ti ti-ban"></i><span>dislike</span></li>
- <li><i class="ti ti-ban"></i><span>dislike</span></li>
- </div><!-- // .dislikes -->
- </div><!-- // .likedislike -->
- </div><!-- // .aboutcont -->
- </section><!-- section ends -->
- <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;
- },
- });
- // tumblr controls
- $(document).ready(function(){
- $('a#controlsbutton').click(function(){
- $('body').toggleClass('controls-click');
- });
- });
- // 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 > 200 || document.documentElement.scrollTop > 200) {
- 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