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">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | LAURA ABOUT PAGE BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- SEARCH 'EDIT HERE'
- - customization guide: https://phantomcodes.tumblr.com/lauraaboutguide
- 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 Quicksand and Montserrat with the names of your 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>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/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>
- /*--- EDIT HERE ----*/
- :root {
- /*---- VARIABLES ----*/
- --Corners:10px; /* 0px, 5px, or 10px recommended */
- /*---- FONT STYLE -----*/
- --BodyFont:'Quicksand'; /* replace with your chosen font name */
- --TitleFont:'Montserrat'; /* replace with your chosen font name */
- --FontSize:15px;
- }
- html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- /* EDIT HERE: LIGHT MODE COLORS */
- --ColorBackground:#ddd;
- --ColorPosts:#eee;
- --ColorBorders:#ccc;
- --ColorTitle:#333;
- --ColorText:#555;
- --ColorAccentOne:#b8656b;
- --ColorAccentTwo:#d17976;
- --ColorOpacity:rgba(0,0,0,.075);
- --ColorReverseOpacity:rgba(255,255,255,.15);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- /* EDIT HERE: DARK MODE COLORS */
- --ColorBackground:#252525;
- --ColorPosts:#353535;
- --ColorBorders:#444;
- --ColorTitle:#eaeaea;
- --ColorText:#cacaca;
- --ColorLink:#debc9c;
- --ColorAccentOne:#eda9a3;
- --ColorAccentTwo:#fbc5c7;
- --ColorOpacity:rgba(255,255,255,.15);
- --ColorReverseOpacity:rgba(0,0,0,.075);
- }
- 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:var(--ColorAccentOne);
- border-radius:5px;
- box-shadow:2px 2px 2px rgba(0,0,0,.1);
- }
- /* Right placement tooltip arrow (arrow will be on left side of tooltip) */
- .tippy-popper[x-placement^=right] .tippy-tooltip.custom-theme .tippy-arrow {
- border-right: 7px solid var(--ColorAccentOne); /* your color here */
- }
- /* Left placement tooltip arrow (arrow will be on right side of tooltip) */
- .tippy-popper[x-placement^=left] .tippy-tooltip.custom-theme .tippy-arrow {
- border-left: 7px solid var(--ColorAccentOne); /* your color here */
- }
- /* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
- .tippy-popper[x-placement^=top] .tippy-tooltip.custom-theme .tippy-arrow {
- border-top: 7px solid var(--ColorAccentOne); /* your color here */
- }
- /* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
- .tippy-popper[x-placement^=bottom] .tippy-tooltip.custom-theme .tippy-arrow {
- border-bottom: 7px solid var(--ColorAccentOne); /* your color here */
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:2px;
- height:2px;
- background:var(--ColorPosts);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorPosts);
- 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(--ColorAccentTwo);
- }
- ::selection {
- color:var(--ColorPosts);
- background:var(--ColorAccentTwo);
- }
- /*--- COMMON ---*/
- * {box-sizing:border-box;}
- 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(--ColorAccentOne);
- 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(--ColorAccentTwo);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- 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(--ColorAccentTwo)}
- 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(--ColorAccentTwo);}
- 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(--ColorAccentTwo);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- /* common link effects */
- .about-text a, .lowquote a {
- display:inline-block;
- position:relative;
- }
- .about-text a:after, .lowquote a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:2px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:5px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .about-text a:hover:after, .lowquote a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- /*--- FIXED BUTTONS ---*/
- .fixedbuttons {
- position:fixed;
- top:.5em;
- right:.5em;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:.5em;
- z-index:9999999;
- }
- .fixedbuttons-low {
- position:fixed;
- bottom:.5em;
- right:.5em;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:.5em;
- z-index:9999999;
- }
- .fixedbuttons a, .fixedbuttons-low a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:-2px 2px 2px rgba(0,0,0,.1);
- }
- .fixedbuttons a:hover, .fixedbuttons-low a:hover {box-shadow:none; transform:scale(.975);}
- .fixedbuttons i, .fixedbuttons-low 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;
- }
- /* DAY/NIGHT */
- button#theme-toggle {
- position:relative;
- outline:none;
- border:none;
- padding:.5em;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:-2px 2px 2px rgba(0,0,0,.1);
- display:flex;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- button#theme-toggle:hover {box-shadow:none; transform:scale(.975);}
- 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(--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:hover i {
- color:var(--ColorAccentOne);
- -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 {cursor:help;}
- a#controlsbutton {display:flex; justify-content:center; align-items:center;}
- a#controlsbutton 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;
- }
- 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(.75);
- 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;
- }
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop i {
- font-size:1.4em;
- 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#totop:hover i {
- color:var(--ColorAccentTwo);
- -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)
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a#credit {}
- a#credit i {
- font-size:1.4em;
- color:var(--ColorTitle);
- }
- a#credit:hover i {
- color:var(--ColorAccentTwo);
- -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 CONTENT ---*/
- main {
- width:100%;
- margin:auto;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- gap:1rem;
- }
- section {
- position:relative;
- width:calc(100% - 4.5rem);
- margin:2rem 3.5rem 2rem 1rem;
- display:flex;
- justify-content:center;
- gap:.75rem;
- }
- .sectionbox {
- position:relative;
- width:100%;
- max-height:calc(100vh - 4rem);
- max-width:1000px;
- display:flex;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:2px 2px 2px rgba(0,0,0,.1);
- }
- /*--- section left ---*/
- .sectionleft {
- width:35%;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- border-right:1px solid var(--ColorBorders);
- }
- .sectionleft-top {
- height:100%;
- display:flex;
- flex-direction:column;
- }
- .mainimage {
- position:relative;
- width:100%;
- height:auto;
- }
- .mainimage img.mainimg {width:100%; height:auto; object-fit:cover; border-radius:var(--Corners) 0 0 0;}
- .mainicon {
- position:absolute;
- top:calc(100% - 2rem - 2px);
- left:.75rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:4px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- .mainicon img {
- width:4rem;
- height:4rem;
- border-radius:100%;
- }
- a.mainuser {
- width:100%;
- margin-top:2rem;
- padding:.75rem;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- }
- a.mainuser b {
- font-size:1.1em;
- 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.mainuser:hover b {color:var(--ColorAccentOne);}
- a.mainuser span {
- color:var(--ColorText);
- -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.mainuser:hover span {color:var(--ColorTitle);}
- .mainlinks {
- width:100%;
- padding:.25rem .75rem .75rem .75rem;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:.75em;
- }
- .mainlinks a {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .mainlinks a:hover {margin-left:.5rem;}
- .mainlinks a i {
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color: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;
- }
- .mainlinks a 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;
- }
- .mainlinks a:hover b {color:var(--ColorAccentOne);}
- /*- stats -*/
- .mainstats {
- width:100%;
- padding:.75rem;
- display:flex;
- flex-wrap:wrap;
- gap:.5rem;
- overflow:hidden;
- }
- .mainstats li {
- width:calc(50% - .25rem);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .mainstats li:last-of-type {border-bottom:none;}
- .mainstats li i {
- font-size:1.2em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .mainstats b {font-weight:normal; white-space:nowrap;}
- /* elsewhere */
- .elsewhere {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.75rem;
- padding:.75rem;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- }
- .elsewhere a {
- display:flex;
- align-items:center;
- gap:.5rem;
- }
- .elsewhere a img {
- width:2.75rem;
- height:2.75rem;
- padding:2.5px;
- background:var(--ColorAccentOne);
- border:1.5px solid var(--ColorOpacity);
- 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;
- }
- .elsewhere a:hover img {transform:rotate(10deg);}
- .elsewhere a li {
- display:flex;
- flex-direction:column;
- }
- .elsewhere a li b, .elsewhere a li span {
- color:var(--ColorPosts);
- white-space:nowrap;}
- .elsewhere a li span {font-size:.95em;}
- /*- likes -*/
- .mainfavs {
- width:100%;
- overflow-y:auto;
- }
- .fav {
- width:100%;
- padding:.5rem .75rem 0 .75rem;
- display:flex;
- flex-direction:column;
- }
- .fav:first-of-type {padding-top:.75rem;}
- .fav:last-of-type {padding-bottom:.75rem;}
- .fav li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .fav li i {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .fav li b {font-weight:normal;}
- .fav span {font-size:.95em;}
- /*--- section mid ---*/
- .sectionmid {
- width:45%;
- display:flex;
- flex-direction:column;
- overflow-y:auto;
- }
- .sectiontitle {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- padding:.75rem;
- border-bottom:1px solid var(--ColorBorders);
- }
- .sectiontitle b {
- font-size:1em;
- font-weight:normal;
- text-transform:uppercase;
- letter-spacing:.05em;
- }
- .sectiontitle i {font-size:1.2em; color:var(--ColorTitle);}
- .about-wrap {
- width:100%;
- overflow-y:auto;
- }
- .about-text {
- width:100%;
- padding:.75rem;
- }
- .about-text p:last-of-type {margin-bottom:0;}
- /*-- section right --*/
- .sectionright {
- width:20%;
- display:flex;
- flex-direction:column;
- border-left:1px solid var(--ColorBorders);
- }
- /* search bar */
- .searchbar {
- width:100%;
- padding:.75rem;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:0 var(--Corners) 0 0;
- }
- .search {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.35em;
- }
- .search i {
- font-size:1.2em;
- color:var(--ColorPosts);
- }
- .search .query {
- border:0;
- outline:0;
- font-family:var(--BodyFont), sans-serif;
- font-size:1em;
- width:100%;
- color:var(--ColorPosts);
- letter-spacing:.04em;
- background:transparent;
- }
- ::-webkit-input-placeholder {color: inherit; opacity:.9;}
- :-moz-placeholder {color: inherit; opacity:.9;}
- ::-moz-placeholder {color: inherit; opacity:.9;}
- :-ms-input-placeholder {color: inherit; opacity:.9;}
- 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;}
- .navigate {
- width:100%;
- padding:.75rem;
- display:flex;
- flex-wrap:wrap;
- gap:.5rem;
- }
- .navigate a {color:var(--ColorText); border-bottom:1px solid var(--ColorBorders);}
- .navigate a:hover {color:var(--ColorAccentOne); border-bottom:1px solid var(--ColorAccentTwo);}
- /*- friends -*/
- .friends {
- width:100%;
- padding:.75rem;
- display:flex;
- flex-direction:column;
- gap:.5rem;
- }
- .friends a {
- display:flex;
- align-items:center;
- gap:.5rem;
- }
- .friends a .friendsimg {
- width:1.75rem;
- height:1.75rem;
- padding:1.5px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- 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;
- }
- .friends a:hover .friendsimg {transform:rotate(15deg);}
- .friends a img {
- width:100%;
- height:100%;
- padding:1.5px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- .friends a 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;
- }
- .friends a:hover b {color:var(--ColorAccentOne);}
- /*---- RESPONSIVENESS ---*/
- @media only screen and (max-width: 900px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
- section {margin-top:1rem; margin-bottom:1rem;}
- .sectionbox {flex-wrap:wrap; gap:0; max-height:fit-content;}
- .sectionmid {width:65%;}
- .sectionright {width:100%; border-left:none;}
- .searchbar {border-radius:0;}
- }
- @media only screen and (max-width: 750px) {
- .sectionleft, .sectionmid {width:100%;}
- .sectionleft {border-right:none;}
- .mainimage img.mainimg {border-radius:var(--Corners) var(--Corners) 0 0;}
- }
- @media only screen and (max-width: 600px) {
- section {width:100%; margin:auto auto auto auto;}
- .sectionbox {border-radius:0;}
- .mainimage img.mainimg {border-radius:0;}
- }
- {CustomCSS}
- </style>
- </head>
- <!----- HTML ----->
- <body>
- <main><!-- main container -->
- <section><!-- main info starts -->
- <div class="sectionbox">
- <div class="sectionleft"><!-- section left -->
- <div class="mainimage">
- <!--====================== EDIT HERE: MAIN IMAGE URL =======================
- - the image width is a percentage and will adjust depending on the screen size, the height is auto
- - there's no specific dimensions, i recommend using something with a longer width than height but it can be whatever u prefer!
- - also just to note - when the screen size is small/on mobile the image will fill the full screen width
- ========================================================================--->
- <img class="mainimg" src="//media.allure.com/photos/64de799870a74f6b7acb662a/master/w_1600%2Cc_limit/Allure_Doechii_2023_01.jpg">
- <div class="mainicon"><img src="{PortraitURL-128}"></div>
- </div>
- <a class="mainuser" href="/">
- <b>{Title}</b>
- <span>@{Name}</span>
- </a>
- <div class="mainlinks">
- <a href="/"><i class="ti ti-home"></i><b>home</b></a>
- <a href="/ask"><i class="ti ti-message-circle"></i><b>contact</b></a>
- <a href="/archive"><i class="ti ti-archive"></i><b>archive</b></a>
- </div>
- <div class="sectiontitle"><b>stats</b><i class="ti ti-info-circle"></i></div>
- <div class="mainstats">
- <!--========================== EDIT HERE: STATS ============================
- - feel free to change the icons if you want!
- - keep these short!!! if they get too long the text will cut off
- - feel free to add as many as you like
- FORMAT:
- <li><i class="ti ti-ICON-NAME"></i><b>STAT TEXT</b></li>
- - CAPITALIZED text is what you change
- ========================================================================--->
- <li><i class="ti ti-writing-sign"></i><b>name</b></li>
- <li><i class="ti ti-sparkles"></i><b>pronouns</b></li>
- <li><i class="ti ti-cake"></i><b>age</b></li>
- <li><i class="ti ti-sun-high"></i><b>zodiac</b></li>
- <li><i class="ti ti-map-pin"></i><b>location</b></li>
- <li><i class="ti ti-bell-ringing"></i><b>update</b></li>
- </div><!-- main stats ends -->
- </div><!-- section left ends -->
- <div class="sectionmid"><!-- section mid -->
- <div class="sectiontitle"><b>about</b><i class="ti ti-user"></i></div>
- <div class="about-wrap"><!-- about wrap -->
- <div class="about-text">
- <!--=================== EDIT HERE: ABOUT TEXT / MAIN =======================
- - this text section can be as long as you want
- - the entire about section will scroll if it gets too long, individual sections will not scroll
- - if you don't want a section/want to add one/etc. please see the guide!
- FORMAT:
- <div class="sectiontitle"><b>SECTION HEADER</b><i class="ti ti-ICON-NAME"></i></div>
- <div class="about-text">
- TEXT GOES HERE
- </div>
- - CAPITALIZED text is what you change
- ========================================================================--->
- about text goes here. this can be as long as you want. <a href="/">link</a>. <b>bold text</b>. <i>italics</i>. <b><a href="/">bold link</a></b>.
- <blockquote>this is a blockquote</blockquote>
- <p>lorem ipsum odor amet, consectetuer adipiscing elit. penatibus porta nullam tincidunt, nisl augue commodo. facilisis tristique consequat risus tincidunt convallis quis eu est.</p>
- </div><!-- about-text end -->
- <!---===================== ABOUT TEXT / MAIN ENDS ======================--->
- <!--================ EDIT HERE: ABOUT TEXT / SECTION ONE ===============--->
- <div class="sectiontitle"><b>section header</b><i class="ti ti-hash"></i></div>
- <div class="about-text">
- lorem ipsum odor amet, consectetuer adipiscing elit. penatibus porta nullam tincidunt, nisl augue commodo. facilisis tristique consequat risus tincidunt convallis quis eu est.
- </div><!-- about-text end -->
- <!---================== ABOUT TEXT / SECTION ONE ENDS ==================--->
- <!--================ EDIT HERE: ABOUT TEXT / SECTION TWO ===============--->
- <div class="sectiontitle"><b>section header</b><i class="ti ti-list-details"></i></div>
- <div class="about-text">
- lorem ipsum odor amet, consectetuer adipiscing elit. penatibus porta nullam tincidunt, nisl augue commodo. facilisis tristique consequat risus tincidunt convallis quis eu est.
- </div><!-- about-text end -->
- <!---================== ABOUT TEXT / SECTION TWO ENDS ==================--->
- </div><!-- about wrap ends -->
- </div><!-- section mid -->
- <div class="sectionright"><!-- section right -->
- <div class="searchbar"><!-- search bar -->
- <form class="search" action="javascript:return false">
- <input type="text" class="query" placeholder="search . . .">
- <i class="ti ti-search"></i>
- </form>
- </div>
- <div class="navigate">
- <!--================ EDIT HERE: NAVIGATION =================================
- - feel free to add as many links/tags as you want!
- ========================================================================--->
- <a href="/tagged/tag">tag</a>
- <a href="/tagged/tag">tag</a>
- <a href="/tagged/tag">tag</a>
- <a href="/tagged/tag">tag</a>
- <a href="/tagged/tag">tag</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- </div><!-- navi section ends -->
- <!--===================== EDIT HERE: LIKES =================================
- - this section is made for likes/dislikes but really can be used for anything!
- - feel free to change the icons
- FORMAT:
- <div class="fav"><li><i class="ti ti-ICON-NAME"></i><b>TITLE</b></li>
- <span>SUBTITLE</span>
- </div>
- - CAPITALIZED text is what you change
- ========================================================================--->
- <div class="sectiontitle"><b>likes</b><i class="ti ti-hearts"></i></div>
- <div class="mainfavs"><!-- likes section -->
- <div class="fav"><li><i class="ti ti-heart-filled"></i><b>fav</b></li>
- <span>more text goes here, <u>underlined text</u></span>
- </div>
- <div class="fav"><li><i class="ti ti-heart-filled"></i><b>fav</b></li>
- <span>more text goes here, <u>underlined text</u></span>
- </div>
- <div class="fav"><li><i class="ti ti-thumb-up-filled"></i><b>like</b></li>
- <span>more text goes here, <u>underlined text</u></span>
- </div>
- <div class="fav"><li><i class="ti ti-thumb-down-filled"></i><b>dislike</b></li>
- <span>more text goes here, <u>underlined text</u></span>
- </div>
- </div><!-- likes section ends -->
- <!--===================== EDIT HERE: BLOGS/FRIENDS =========================
- FORMAT:
- <a href="//BLOGNAME.tumblr.com"><div class="friendsimg"><img src="//api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/avatar"></div><b>BLOG NAME</b></a>
- - CAPITALIZED text is what you change
- ========================================================================--->
- <div class="sectiontitle"><b>blogs</b><i class="ti ti-friends"></i></div>
- <div class="friends"><!-- friends section -->
- <a href="//blogname.tumblr.com"><div class="friendsimg"><img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar"></div><b>blog name</b></a>
- <a href="//blogname.tumblr.com"><div class="friendsimg"><img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar"></div><b>blog name</b></a>
- <a href="//blogname.tumblr.com"><div class="friendsimg"><img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar"></div><b>blog name</b></a>
- <a href="//blogname.tumblr.com"><div class="friendsimg"><img src="//api.tumblr.com/v2/blog/blogname.tumblr.com/avatar"></div><b>blog name</b></a>
- </div><!-- blogs/friends section ends -->
- </div><!-- section right ends -->
- </div><!--- sectionbox ends -->
- </section><!-- end of section container -->
- <!--- FIXED BUTTONS --->
- <div class="fixedbuttons">
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></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>
- </div>
- <div class="fixedbuttons-low">
- <a id="totop" class="minilink" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
- <!--- CREDIT: DO NOT TOUCH --->
- <a title="page by sage" id="credit" class="minilink" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
- </div>
- </main><!-- end of main container -->
- <script>
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: true,
- followCursor: true,
- delay: 100,
- placement: 'top',
- offset: "0, 20",
- 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);
- });
- });
- // 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);
- };
- // 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";
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment