Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}" />
- <title>{Title}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- {NewPostStyles}
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | JASMINE THEME BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- CREDITS:
- - tabler icons / https://tabler-icons.io/
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - bunny fonts / https://fonts.bunny.net/
- - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
- - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
- - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
- - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
- - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
- - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
- - npf images fix by glenthemes / https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
- - npf audio player by glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
- - unblue polls by glenthemes / https://glenthemes.tumblr.com/post/708014819571302400/unblue-polls
- - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
- - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
- ---->
- <!-- STYLESHEETS -->
- <!---- PHOTOSET ---->
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
- <!----- BUNNY FONTS ---->
- <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}: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>
- <!--- FLICKITY --->
- <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
- <!---- VIDEOS ---->
- <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
- <!---- COPY LINK ---->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
- <script>
- $(document).ready(function(){
- var clipboard = new ClipboardJS("#copybutton");
- });
- </script>
- <!---- TIME AGO ----->
- <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".time-ago").timeAgo({
- time: "letter",
- spaces: false,
- words: false,
- prefix: "",
- suffix: "",
- });
- });
- </script>
- <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
- <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
- <!--
- NPF images fix v3.0 by @glenthemes [2021]
- 💌 git.io/JRBt7
- --->
- <script src="//npf-images-v3.github.io/script.js"></script>
- <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
- <style tmblr-npf>
- :root {
- --NPF-Caption-Spacing:1em;
- --NPF-Image-Spacing:4px;
- }
- </style>
- <!---- VARIABLES ---->
- <meta name="image:Sidebar" content="" />
- <meta name="color:Background" content="#f5f5f5" />
- <meta name="color:Posts" content="#fafafa" />
- <meta name="color:Borders" content="#d5d5d5" />
- <meta name="color:Title" content="#333" />
- <meta name="color:Text" content="#666" />
- <meta name="color:Accent One" content="#61815a"/>
- <meta name="color:Accent Two" content="#789772"/>
- <meta name="color:Night Background" content="#333" />
- <meta name="color:Night Posts" content="#333" />
- <meta name="color:Night Borders" content="#444" />
- <meta name="color:Night Title" content="#eee" />
- <meta name="color:Night Text" content="#ccc" />
- <meta name="color:Night Accent One" content="#c2e5bb"/>
- <meta name="color:Night Accent Two" content="#abc6a5"/>
- <meta name="select:Layout" content="hd" title="header"/>
- <meta name="select:Layout" content="lsb" title="left sidebar"/>
- <meta name="select:Layout" content="rsb" title="right sidebar"/>
- <meta name="select:Corners" content="0px" title="sharp"/>
- <meta name="select:Corners" content="5px" title="slightly round"/>
- <meta name="select:Corners" content="8px" title="round"/>
- <meta name="select:Corners" content="12px" title="more round"/>
- <meta name="select:Tags" content="tags" title="default"/>
- <meta name="select:Tags" content="clicktags" title="on click"/>
- <meta name="if:Updates" content="1"/>
- <meta name="if:Explore" content="1"/>
- <meta name="text:Body Font" content="Quicksand"/>
- <meta name="text:Title Font" content="Montserrat"/>
- <meta name="text:Font Size" content="15"/>
- <meta name="text:Blog Name" content="your url here"/>
- <meta name="text:Custom Title" content="custom title"/>
- <meta name="text:Custom Description" content="custom description"/>
- <meta name="text:Header Link 1" content="/"/>
- <meta name="text:Header Link 1 Icon" content="star"/>
- <meta name="text:Header Link 1 Name" content="link one"/>
- <meta name="text:Header Link 2" content=""/>
- <meta name="text:Header Link 2 Icon" content=""/>
- <meta name="text:Header Link 2 Name" content=""/>
- <meta name="text:Header Link 3" content=""/>
- <meta name="text:Header Link 3 Icon" content=""/>
- <meta name="text:Header Link 3 Name" content=""/>
- <meta name="text:Header Link 4" content=""/>
- <meta name="text:Header Link 4 Icon" content=""/>
- <meta name="text:Header Link 4 Name" content=""/>
- <meta name="text:Update 1" content="update"/>
- <meta name="text:Update 1 Icon" content="bell"/>
- <meta name="text:Update 2" content=""/>
- <meta name="text:Update 2 Icon" content=""/>
- <meta name="text:Update 3" content=""/>
- <meta name="text:Update 3 Icon" content=""/>
- <meta name="text:Update 4" content=""/>
- <meta name="text:Update 4 Icon" content=""/>
- <meta name="text:Update 5" content=""/>
- <meta name="text:Update 5 Icon" content=""/>
- <meta name="text:Update 6" content=""/>
- <meta name="text:Update 6 Icon" content=""/>
- <meta name="text:Update Text" content="update text"/>
- <meta name="text:Info 1" content="name"/>
- <meta name="text:Info 1 Icon" content="writing-sign"/>
- <meta name="text:Info 2" content=""/>
- <meta name="text:Info 2 Icon" content=""/>
- <meta name="text:Info 3" content=""/>
- <meta name="text:Info 3 Icon" content=""/>
- <meta name="text:Info 4" content=""/>
- <meta name="text:Info 4 Icon" content=""/>
- <meta name="text:Info 5" content=""/>
- <meta name="text:Info 5 Icon" content=""/>
- <meta name="text:Explore Text" content="about text here"/>
- <meta name="text:Likes Title" content="interests"/>
- <meta name="text:Likes Title Icon" content="hearts"/>
- <meta name="text:Like 1" content="like"/>
- <meta name="text:Like 2" content=""/>
- <meta name="text:Like 3" content=""/>
- <meta name="text:Like 4" content=""/>
- <meta name="text:Like 5" content=""/>
- <meta name="text:Like 6" content=""/>
- <meta name="text:Dislike 1" content="dislike"/>
- <meta name="text:Dislike 2" content=""/>
- <meta name="text:Dislike 3" content=""/>
- <meta name="text:Dislike 4" content=""/>
- <meta name="text:Skills Title" content="progress"/>
- <meta name="text:Skills Title Icon" content="adjustments"/>
- <meta name="text:Skill 1" content="skill"/>
- <meta name="text:Skill 1 Percent" content="50%"/>
- <meta name="text:Skill 2" content=""/>
- <meta name="text:Skill 2 Percent" content=""/>
- <meta name="text:Skill 3" content=""/>
- <meta name="text:Skill 3 Percent" content=""/>
- <meta name="text:Skill 4" content=""/>
- <meta name="text:Skill 4 Percent" content=""/>
- <meta name="text:Blogs Title" content="blogs"/>
- <meta name="text:Blogs Title Icon" content="users"/>
- <meta name="text:Blog 1" content="blogname"/>
- <meta name="text:Blog 2" content=""/>
- <meta name="text:Blog 3" content=""/>
- <meta name="text:Blog 4" content=""/>
- <meta name="text:Explore Links Title" content="navigate"/>
- <meta name="text:Explore Links Title Icon" content="map"/>
- <meta name="text:Explore Link 1" content="/"/>
- <meta name="text:Explore Link 1 Text" content="link"/>
- <meta name="text:Explore Link 2" content=""/>
- <meta name="text:Explore Link 2 Text" content=""/>
- <meta name="text:Explore Link 3" content=""/>
- <meta name="text:Explore Link 3 Text" content=""/>
- <meta name="text:Explore Link 4" content=""/>
- <meta name="text:Explore Link 4 Text" content=""/>
- <meta name="text:Explore Link 5" content=""/>
- <meta name="text:Explore Link 5 Text" content=""/>
- <meta name="text:Explore Link 6" content=""/>
- <meta name="text:Explore Link 6 Text" content=""/>
- <meta name="text:Explore Link 7" content=""/>
- <meta name="text:Explore Link 7 Text" content=""/>
- <meta name="text:Explore Link 8" content=""/>
- <meta name="text:Explore Link 8 Text" content=""/>
- <meta name="text:Explore Link 9" content=""/>
- <meta name="text:Explore Link 9 Text" content=""/>
- <meta name="text:Explore Link 10" content=""/>
- <meta name="text:Explore Link 10 Text" content=""/>
- <!--- 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 {
- --Spacing:1rem;
- --Corners:{select:Corners};
- --ColorOpaqueBorders:rgb(from var(--ColorBorders) r g b / .5);
- --ColorOpaqueBackground:rgb(from var(--ColorBackground) r g b / .5);
- --ColorLessOpaqueBackground:rgb(from var(--ColorBackground) r g b / .9);
- --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .85);
- --ColorMoreOpaquePosts: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);
- --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
- --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
- {block:ifShadow}
- --ColorShadow:rgba(0,0,0,0.1);
- --ColorOpaqueShadow:rgb(0 0 0 / .05);
- {/block:ifShadow}
- }
- /* theme options - day/night */
- :root, html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- --ColorBackground: {color:background};
- --ColorPosts: {color:posts};
- --ColorBorders: {color:borders};
- --ColorTitle: {color:title};
- --ColorText: {color:text};
- --ColorAccentOne: {color:accent one};
- --ColorAccentTwo: {color:accent two};
- --ColorOpacity: rgba(255,255,255,.25);
- --ColorReverseOpacity: rgba(0,0,0,.15);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- --ColorBackground: {color:night background};
- --ColorPosts: {color:night posts};
- --ColorBorders: {color:night borders};
- --ColorTitle: {color:night title};
- --ColorText: {color:night text};
- --ColorAccentOne: {color:night accent one};
- --ColorAccentTwo: {color:night accent two};
- --ColorOpacity: rgba(0,0,0,.15);
- --ColorReverseOpacity: rgba(255,255,255,.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:.975em;
- font-weight:500;
- color:var(--ColorTitle);
- text-align:center;
- text-transform:lowercase;
- background:var(--ColorPosts);
- border-radius:5px;
- border:.5px solid var(--ColorBorders);
- }
- /* 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:4px;
- height:4px;
- background:var(--ColorPosts);
- }
- ::-webkit-scrollbar-track {
- margin-bottom:.5rem;
- 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(--ColorAccentOne);
- }
- ::selection {
- color:var(--ColorPosts);
- background:var(--ColorAccentOne);
- }
- * {box-sizing:border-box;}
- body {
- font-family:'{text:body font}', sans-serif;
- font-size:{text:font size}px;
- 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(--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:.75em;
- margin-left:1em;
- margin-top:1rem;
- margin-bottom:1rem;
- }
- 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(--ColorAccent);}
- h2 {font-size:1.25em; color:var(--ColorTitle);}
- h3 {font-size:1.15em; color:var(--ColorTitle);}
- h4 {font-size:1.1em; color:var(--ColorTitle);}
- h5 {font-size:1.05em; color:var(--ColorTitle);}
- h1, h1 a, h2, h3, h4, h5 {font-family:'{text:title font}', 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-desc a, .headerdesc a, .exploretext a, .answercont a {
- display:inline-block;
- position:relative;
- line-height:120%;
- text-shadow:.5px .5px var(--ColorPosts);
- z-index:1;
- }
- .sb-desc a:after, .headerdesc a:after, .exploretext a:after, .answercont a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:100%;
- background:var(--ColorOpaqueAccentTwo);
- transform:scaleY(.15);
- transform-origin:bottom;
- transition:transform 0.4s ease-out;
- z-index:-1;
- }
- .sb-desc a:hover:after, .headerdesc a:hover:after, .exploretext a:hover:after, .answercont a:hover:after {
- transform:scaleY(1);
- transform-origin:bottom;
- }
- .sr-text {
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- word-wrap: normal !important;
- }
- /*--- SIDEBAR ---*/
- /* left sidebar */
- #leftsidebar {
- position:sticky;
- top:4rem;
- width:315px;
- padding:1rem;
- display:flex;
- flex-direction:column;
- gap:1rem;
- }
- main.hd #leftsidebar, main.rsb #leftsidebar {display:none;}
- /* right sidebar */
- #rightsidebar {
- position:sticky;
- top:4rem;
- width:315px;
- padding:1rem;
- display:flex;
- flex-direction:column;
- gap:1rem;
- }
- main.hd #rightsidebar, main.lsb #rightsidebar {display:none;}
- .sidebartop {
- width:100%;
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- gap:1rem;
- }
- .sbimg {
- width:125px;
- height:125px;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:5px;
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- }
- .sbimg img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- .sbicon {
- width:65px;
- height:65px;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:3px;
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- }
- .sbicon img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- a.sbtitle {
- display:flex;
- flex-direction:column;
- }
- a.sbtitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.2em;
- font-weight:900;
- color:var(--ColorTitle);
- background-image:linear-gradient(to left, var(--ColorTitle), var(--ColorTitle) 33.33333%, var(--ColorAccentTwo), var(--ColorAccentOne));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-size:300% 100%;
- background-position:top right;
- transition:all 0.5s ease-in-out;
- }
- a.sbtitle:hover b {background-position:top right 100%;}
- a.sbtitle:hover b {color:transparent;}
- a.sbtitle 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.sbtitle:hover span {color:var(--ColorTitle);}
- .sidebarlow {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:1rem;
- }
- .sb-desc {}
- .sb-desc p:last-of-type {margin-bottom:0;}
- .sbinfo {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:.35rem .75rem;
- }
- .sbinfo li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .sbinfo li i {
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .sbinfo span {color:var(--ColorTitle);}
- .sidebarlinks {
- width:100%;
- display:flex;
- align-items:center;
- flex-wrap:wrap;
- gap:.5rem;
- }
- /*--- HEADER ---*/
- header {
- position:relative;
- width:100%;
- display:flex;
- flex-direction:column;
- gap:1rem;
- padding:1rem 0 0 0;
- }
- main.lsb header, main.rsb header {display:none;}
- .headertop {
- width:100%;
- display:flex;
- align-items:center;
- gap:.75rem;
- }
- .headerimg {
- width:125px;
- height:125px;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:4px;
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- }
- .headerimg img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- .headericon {
- width:65px;
- height:65px;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:3px;
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- }
- .headericon img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- a.headertitle {
- display:flex;
- flex-direction:column;
- }
- a.headertitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.2em;
- font-weight:900;
- color:var(--ColorTitle);
- background-image:linear-gradient(to left, var(--ColorTitle), var(--ColorTitle) 33.33333%, var(--ColorAccentTwo), var(--ColorAccentOne));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-size:300% 100%;
- background-position:top right;
- transition:all 0.5s ease-in-out;
- }
- a.headertitle:hover b {background-position:top right 100%;}
- a.headertitle:hover b {color:transparent;}
- a.headertitle 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.headertitle:hover span {color:var(--ColorTitle);}
- .headerlow {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:1rem;
- }
- .headerdesc {}
- .headerdesc p:last-of-type {margin-bottom:0;}
- .headerinfo {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.75rem;
- }
- .headerinfo li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.2rem;
- }
- .headerinfo li i {
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .headerinfo span {color:var(--ColorTitle);}
- /*--- HEADER BAR ---*/
- .headerbar {
- position:sticky;
- top:0;
- width:100%;
- height:4rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.35rem;
- background:var(--ColorBackground);
- z-index:99999;
- }
- .header-left {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- a.followicon {
- position:relative;
- width:1.85rem;
- height:1.85rem;
- padding:2px;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:var(--Corners);
- z-index:2;
- }
- a.followicon:after {
- content:'';
- position:absolute;
- top:-.5px;
- left:-.5px;
- width:100%;
- height:100%;
- background:var(--ColorPosts);
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- 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.followicon:hover:after {background:transparent; border:.5px solid transparent;}
- a.followicon img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- a.hlink {
- position:relative;
- width:1.85rem;
- height:1.85rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:var(--Corners);
- z-index:2;
- }
- a.hlink:after {
- content:'';
- position:absolute;
- top:-.5px;
- left:-.5px;
- width:100%;
- height:100%;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- 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.hlink:hover:after {background:transparent; border:.5px solid transparent;}
- a.hlink i {
- font-size:1.2em;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- -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.hlink:hover i {color:transparent;}
- .header-right {
- width:100%;
- display:flex;
- justify-content:flex-end;
- align-items:center;
- }
- /* header search bar */
- .search {
- width:100%;
- height:1.85rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.1rem;
- padding:0 .25rem 0 .5rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- }
- .search i {
- font-size:1.15em;
- color:var(--ColorTitle);
- }
- .search .query {
- border:0;
- outline:0;
- font-family:'{text:body font}', sans-serif;
- width:100%;
- font-size:1em;
- font-weight:400;
- color:var(--ColorText);
- text-transform:lowercase;
- letter-spacing:.04rem;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- background:transparent;
- }
- ::-webkit-input-placeholder {color: inherit; opacity:.85;}
- :-moz-placeholder {color: inherit; opacity:.85;}
- ::-moz-placeholder {color: inherit; opacity:.85;}
- :-ms-input-placeholder {color: inherit; opacity:.85;}
- input:focus::-webkit-input-placeholder {color:inherit; opacity:.5;}
- input:focus:-moz-placeholder {color:inherit; opacity:.5;}
- input:focus::-moz-placeholder {color:inherit; opacity:.5;}
- input:focus:-ms-input-placeholder { color:inherit; opacity:.5;}
- /*--- FIXED BUTTONS ---*/
- .fixedbuttons {
- position:fixed;
- top:1rem;
- right:.5rem;
- bottom:1rem;
- height:calc(100% - 2rem);
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- z-index:99999;
- }
- a.flink {
- position:relative;
- width:1.85rem;
- height:1.85rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:var(--Corners);
- z-index:2;
- }
- a.flink:after {
- content:'';
- position:absolute;
- top:-.5px;
- left:-.5px;
- width:100%;
- height:100%;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- 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.flink:hover:after {background:transparent; border:.5px solid transparent;}
- a.flink i {
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- -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.flink:hover i {color:transparent;}
- /* fixed top */
- .fixedtop {
- display:flex;
- flex-direction:column;
- gap:.5rem;
- }
- /* DAY/NIGHT */
- button#theme-toggle {
- position:relative;
- width:1.85rem;
- height:1.85rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:var(--Corners);
- border:none;
- z-index:2;
- cursor:help;
- }
- button#theme-toggle:after {
- content:'';
- position:absolute;
- top:-.5px;
- left:-.5px;
- width:100%;
- height:100%;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- 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:hover:after {background:transparent; border:.5px solid transparent;}
- 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.2em;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- -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:transparent;
- -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.3em}
- a#controlsbutton:hover i {
- -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:after {background:transparent; border:.5px solid transparent;}
- body.controls-click a#controlsbutton i {color:var(--ColorPosts);}
- body.controls-click a#controlsbutton {background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));}
- @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);
- 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;
- }
- /* fixed mid */
- .fixedmid {
- display:flex;
- flex-direction:column;
- gap:.5rem;
- }
- /* updates button */
- a#updatesbutton {cursor:help;}
- a#updatesbutton i {font-size:1.25em}
- a#updatesbutton:hover i {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -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: wiggle;
- -moz-animation-name: wiggle;
- }
- body.updates-click a#updatesbutton i {color:var(--ColorPosts);}
- body.updates-click a#updatesbutton {background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));}
- body.updates-click a#updatesbutton:after {background:transparent; border:.5px solid transparent;}
- @keyframes wiggle {
- 0% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- 15% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- 30% {
- -webkit-transform: rotate(10deg);
- -ms-transform: translateX(10deg);
- transform: translateX(10deg)
- }
- 45% {
- -webkit-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- transform: rotate(-10deg)
- }
- 60% {
- -webkit-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- transform: rotate(10deg)
- }
- 75% {
- -webkit-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- transform: rotate(-10deg)
- }
- 85% {
- -webkit-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- transform: rotate(10deg)
- }
- 100% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- }
- /* updates tab */
- .updates-tab {
- position:absolute;
- right:calc(100% + .5rem);
- width:215px;
- overflow:hidden;
- display:none; /* change later */
- flex-direction:column;
- gap:1rem;
- padding:1rem;
- backdrop-filter:blur(100px);
- background:var(--ColorOpaquePosts);
- border-radius:var(--Corners);
- }
- .updates-tab:after {
- content:'';
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- background:var(--ColorLessOpaqueAccentOne);
- border-radius:var(--Corners);
- z-index:-1;
- }
- body.updates-click .updates-tab {display:flex;}
- .updates-tab b {color:var(--ColorPosts);}
- .updates-tab a {
- display:inline-block;
- position:relative;
- color:var(--ColorPosts);
- line-height:120%;
- z-index:1;
- }
- .updates-tab a:hover {color:var(--ColorPosts);}
- .updates-tab a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:100%;
- background:var(--ColorLessOpaqueAccentOne);
- transform:scaleY(.15);
- transform-origin:bottom;
- transition:transform 0.4s ease-out;
- z-index:-1;
- }
- .updates-tab a:hover:after {
- transform:scaleY(1);
- transform-origin:bottom;
- }
- .update-text {
- width:100%;
- font-size:.95em;
- color:var(--ColorPosts);
- text-shadow:.5px .5px var(--ColorAccentOne);
- }
- .update-text p:last-of-type {margin-bottom:0;}
- .updates-wrap {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.5rem;
- }
- .updates-wrap li {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.3em;
- }
- .updates-wrap span {font-size:.95em; color:var(--ColorPosts); text-shadow:.5px .5px var(--ColorAccentOne);}
- .updates-wrap li i {
- font-size:1.15em;
- margin-top:.15em;
- color:var(--ColorPosts);
- text-shadow:.5px .5px var(--ColorAccentOne);
- }
- .updates-wrap li a {color:var(--ColorPosts);}
- /* explore button */
- a#explorebutton {cursor:help;}
- a#explorebutton i {font-size:1.25em;}
- body.explore-click a#explorebutton i {color:var(--ColorPosts);}
- body.explore-click a#explorebutton {background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));}
- body.explore-click a#explorebutton:after {background:transparent; border:.5px solid transparent;}
- /* explore menu */
- .exploremenu {
- position:absolute;
- top:0;
- width:100%;
- height:100%;
- display:none; /* change later */
- z-index:9999;
- }
- body.explore-click .exploremenu {display:flex;}
- .explore {
- position:sticky;
- top:4rem;
- width:100%;
- height:calc(100vh - 4rem);
- overflow-y:auto;
- padding:2rem .25rem 1rem 0;
- background:var(--ColorBackground);
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:1.5rem;
- }
- .explore::-webkit-scrollbar {
- width:2px;
- height:2px;
- background:transparent;
- }
- .explore::-webkit-scrollbar-track {margin-bottom:0; background:transparent;}
- .explore::-webkit-scrollbar-thumb {background:linear-gradient(to top, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));}
- .explorewrap {
- width:100%;
- overflow-y:auto;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:1rem 1.5rem;
- }
- .exploretitle {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .exploretitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.05em;
- font-weight:bold;
- }
- .exploretitle i {
- position:relative;
- width:1.65rem;
- height:1.65rem;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:var(--Corners);
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .exploretitle i:after {
- content:'';
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:var(--Corners);
- z-index:-1;
- }
- /* explore text */
- .exploretext {
- width:100%;
- overflow-y:auto;
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .exploretext p:last-of-type {margin-bottom:0;}
- /* explore likes */
- .explorelikes {
- width:calc(50% - .75rem);
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .elikes {
- width:100%;
- display:flex;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:.5rem 1rem;
- }
- .like {
- min-width:calc(50% - .5rem);
- display:flex;
- align-items:flex-start;
- gap:.25rem;
- }
- .like i {
- margin-top:.1rem;
- font-size:1.2em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .like span {}
- /* explore skills */
- .exploreskills {
- width:calc(50% - .75rem);
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .eskills {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .skill {
- width:100%;
- display:flex;
- flex-direction:column;
- }
- .skillwrap {
- width:100%;
- height:8px;
- overflow:hidden;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- }
- .skill-line {
- height:6px;
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
- }
- .skill li {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5rem;
- }
- .skill li b {font-weight:normal;}
- /* explore blogs */
- .exploreblogs {
- width:calc(50% - .75rem);
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .eblogs {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.35rem;
- }
- .eblogs a {
- width:100%;
- display:flex;
- align-items:center;
- gap:.35rem;
- }
- .eblogs a img {
- position:relative;
- width:1.85rem;
- height:1.85rem;
- padding:2px;
- background:var(--ColorBackground);
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .eblogs a:hover img {border:.5px solid var(--ColorAccentOne);}
- .eblogs 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;
- }
- .eblogs a:hover b {color:var(--ColorAccentOne);}
- /* explore nav */
- .explorenav {
- width:calc(50% - .75rem);
- display:flex;
- flex-direction:column;
- gap:.75rem;
- }
- .enav {
- width:100%;
- display:flex;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:.5rem;
- }
- .enav a {color:var(--ColorText);}
- .enav a:nth-of-type(odd) {border-bottom:.5px solid var(--ColorOpaqueAccentOne);}
- .enav a:nth-of-type(even) {border-bottom:.5px solid var(--ColorOpaqueAccentTwo);}
- .enav a:nth-of-type(odd):hover {color:var(--ColorAccentOne); border-bottom:.5px solid var(--ColorAccentOne);}
- .enav a:nth-of-type(even):hover {color:var(--ColorAccentTwo); border-bottom:.5px solid var(--ColorAccentTwo);}
- /* fixed low */
- .fixedlow {
- display:flex;
- flex-direction:column;
- gap:.5rem;
- }
- /* SCROLL TO TOP */
- a#totop {
- opacity:0;
- display:flex;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop i {font-size:1.3em;}
- 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)
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a#credit {}
- a#credit i {font-size:1.3em;}
- 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)
- }
- }
- /*-- ask box --*/
- #ask_form {margin-bottom:-4px; border-radius:0 0 var(--Corners) var(--Corners);}
- #submit_form {margin-bottom:-4px; border-radius:0 0 var(--Corners) var(--Corners);}
- /*-- read more --*/
- a.read_more {font-size:.95em; text-transform:uppercase;}
- /*--- MAIN STYLING ---*/
- main {
- position:relative;
- width:100%;
- display:flex;
- justify-content:center;
- align-items:flex-start;
- gap:3rem;
- margin:auto;
- transition:ease-in-out .4s;
- }
- section {
- position:relative;
- width:540px;
- height:100%;
- min-height:100vh;
- display:flex;
- flex-direction:column;
- align-items:center;
- transition:ease-in-out .4s;
- }
- .section-wrap {
- position:relative;
- width:100%;
- height:100%;
- min-height:100vh;
- transition:ease-in-out .4s;
- }
- article {
- position:relative;
- width:100%;
- margin:auto;
- padding:2rem 0 2rem 0;
- display:flex;
- flex-direction:column;
- }
- article:first-of-type {}
- article:last-of-type {border-bottom:none;}
- .article-wrap {position:relative; width:100%;}
- .post-wrap {
- position:relative;
- width:100%;
- overflow:hidden;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- }
- /*--- TOP POST INFO ---*/
- .toppostinfo {
- position:relative;
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5rem;
- padding:0 0 .75rem 1px;
- background:var(--ColorBackground);
- }
- .topinfoleft {
- display:flex;
- align-items:center;
- gap:.35rem;
- }
- a.til-name {
- display:flex;
- align-items:center;
- gap:.35rem;
- }
- .til-img {
- position:relative;
- width:2rem;
- height:2rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to right, var(--ColorOpaqueAccentOne), var(--ColorOpaqueAccentTwo));
- border-radius:100%;
- z-index:2;
- }
- .til-img:after {
- content:'';
- position:absolute;
- top:-.5px;
- left:-.5px;
- width:100%;
- height:100%;
- background:var(--ColorPosts);
- border-radius:100%;
- border:.5px solid var(--ColorBorders);
- z-index:-1;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- -ms-transition: all 0.5s;
- -o-transition: all 0.5s;
- transition: all 0.5s;
- }
- a.til-name:hover .til-img:after {background:transparent; border:.5px solid transparent;}
- .til-img img {
- width:100%;
- height:100%;
- object-fit:cover;
- border-radius:100%;
- }
- a.til-name b {
- font-size:1em;
- font-weight:900;
- color:var(--ColorTitle);
- background-image:linear-gradient(to left, var(--ColorTitle), var(--ColorTitle) 33.33333%, var(--ColorAccentTwo), var(--ColorAccentOne));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-size:300% 100%;
- background-position:top right;
- transition:all 0.5s ease-in-out;
- }
- a.til-name:hover b {background-position:top right 100%;}
- .til-via {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .til-via i {
- font-size:.925em;
- color:var(--ColorText);
- margin-top:.05rem;
- }
- .til-via a {
- font-size:.975em;
- font-weight:500;
- color:var(--ColorText);
- }
- .til-via a:hover {color:var(--ColorTitle);}
- .topinforight {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.35rem;
- }
- a.til-date {
- font-size:.9em;
- color:var(--ColorText);
- text-transform:uppercase;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- }
- a.til-date:hover {color:var(--ColorTitle);}
- .pinned {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .pinned i {
- transform:rotate(-45deg);
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /*--- POST STUFF ---*/
- article .caption p {
- margin:0!important;
- padding:.5rem 1rem .5rem 1rem;
- }
- .caption p {margin-top:0!important; margin-bottom:0;}
- .caption p:first-of-type {padding-top:1rem;}
- .caption p:last-of-type {padding-bottom:1rem;}
- /*-- text posts --*/
- .userlink {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- padding:0;
- padding:1rem .5rem .5rem 1rem;
- }
- .userlink.first {display:none;}
- .userlink img {
- width:1.35em;
- height:1.35em;
- border-radius:100%;
- }
- .userlink a {color:var(--ColorTitle); font-weight:500;}
- .userlink a:hover {color:var(--ColorAccentOne);}
- .userlink a.deactive:after {
- content:'(deactivated)';
- margin-left:.5em;
- font-size:.9em;
- font-weight:normal;
- color:var(--ColorText);
- }
- .userlink:is(:not(.original)) {
- border-top: .5px solid var(--ColorBorders);
- }
- p:empty {display:none;}
- article h1 {
- margin:0;
- padding:1rem 1rem .5rem 1rem;
- font-family:'{text:title font}', sans-serif;
- font-size:1.3rem;
- color:var(--ColorTitle);
- }
- article h2 {
- margin:1rem 0 0 0;
- padding:1rem 1rem .25rem 1rem;
- }
- article h2:first-of-type {padding-top:0;}
- article img {display:block;}
- article iframe,
- article img {width:100%; max-width:100%;}
- .vignette, #vignette {opacity:0;}
- .tmblr-lightbox, #tumblr_lightbox {
- backdrop-filter:blur(10px);
- background-color:rgba(0,0,0,.25)!important;
- z-index:9999999;
- }
- .lightbox-image, #tumblr_lightbox img {
- box-shadow:none!important;
- }
- #tumblr_lightbox_caption, .lightbox-caption {
- color:#fff!important;
- font-family:inherit;
- margin-top:1em!important;
- z-index:9999999;
- }
- /*-- photo posts
- .npf_inst > *:last-child {
- border-radius:0 0 var(--Corners) var(--Corners);
- }
- .npf_inst > *:first-child {
- border-radius:var(--Corners) var(--Corners) 0 0;
- }
- .npf_inst > *:only-child {
- border-radius:var(--Corners);
- }
- /*-- poll posts --*/
- .poll-post {padding:1rem 1rem 1rem 1rem!important;}
- .poll-post p {padding-top:.5rem!important; padding-bottom:.5rem!important;}
- .poll-post .poll-question {
- font-size:1.2rem!important;
- color:var(--ColorTitle);
- padding:0!important;
- margin:0!important;
- }
- .poll-post a.poll-row {}
- .poll-post a.poll-row:hover {text-shadow:0 1px var(--ColorOpaquePosts)!important;}
- .poll-post .poll-see-results {
- margin-top:.5rem;
- font-weight:bold;
- text-transform:uppercase;
- color:var(--ColorTitle)!important;
- }
- /*-- quote posts --*/
- .quotepost {width:100%;}
- article .quote,
- article .source {padding:1rem;}
- .quote {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- color:var(--ColorTitle);
- }
- .source {color:var(--ColorTitle);}
- p.npf_quote {color:var(--ColorTitle);}
- p.npf_quote + p {color:var(--ColorTitle);}
- /*-- link posts --*/
- .npf-link-block, .linkpost {
- position:relative;
- width:100%;
- margin:0!important;
- color:var(--ColorBackground)!important;
- text-shadow:0 1px rgba(0,0,0,.1);
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
- border:none!important;
- border-radius:0!important;
- z-index:1;
- }
- .linkpost {padding:.75rem;}
- .npf-link-block .poster {border-bottom:none!important; border-radius:0!important;}
- .npf-link-block .description, .linkpost a {
- color:var(--ColorPosts)!important;
- text-shadow:0 1px rgba(0,0,0,.1);
- transition:ease-in-out .5s;
- }
- .npf-link-block a:hover .description, .linkpost a:hover {text-shadow:none;}
- .npf-link-block .title {text-shadow:0 1px rgba(0,0,0,.1);}
- .npf-link-block .bottom .site-name {
- color:var(--ColorTitle);
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- -ms-transition: all 0.5s;
- -o-transition: all 0.5s;
- transition: all 0.5s;
- }
- .npf-link-block a:hover .bottom .site-name {opacity:1;}
- /*-- answer posts --*/
- .answer-post .caption:last-of-type {padding-top:0!important; padding-bottom:0!important;}
- article .question {
- width:100%;
- display:flex;
- flex-direction:column;
- padding:1rem;
- background:var(--ColorLessOpaqueAccentOne);
- border-bottom:.5px solid var(--ColorBorders);
- }
- .qheader {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .qicon {
- width:1.65rem;
- height:1.65rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- border-radius:100%;
- border:.5px solid var(--ColorLessOpaqueAccentOne);
- }
- .qicon img {
- width:100%;
- height:100%;
- border-radius:100%;
- }
- .qheader li {
- position:relative;
- width:fit-content;
- font-weight:500;
- color:var(--ColorPosts);
- text-shadow:.5px .5px var(--ColorAccentOne);
- text-transform:lowercase;
- display:flex;
- justify-content:center;
- align-items:center;
- gap:.25rem;
- }
- .qheader a, .qheader b {color:var(--ColorPosts);}
- .qheader a:hover {color:var(--ColorOpaquePosts);}
- .qcont {
- position:relative;
- width:100%;
- font-weight:500;
- text-align:left;
- color:var(--ColorPosts);
- text-shadow:.5px .5px var(--ColorAccentOne);
- }
- .qcont p:last-of-type {margin-bottom:0;}
- .qcont a {
- color:var(--ColorPosts);
- text-shadow:.5px .5px var(--ColorAccentOne);
- }
- .qcont a:hover {color:var(--ColorOpaquePosts);}
- /* answer */
- article .replies, article .answer {padding:0;}
- article .answer {padding:1rem;}
- .answerheader {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .answerheader li {list-style-type:none;}
- .answerheader li a {color:var(--ColorTitle);}
- .answerheader li a:hover {color:var(--ColorAccentTwo);}
- .answerheader .aicon {
- width:1.65rem;
- height:1.65rem;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- border-radius:100%;
- border:.5px solid var(--ColorOpaqueAccentTwo);
- }
- .answerheader .aicon img {
- width:100%;
- height:100%;
- border-radius:100%;
- }
- .answerheader a {color:var(--ColorTitle);}
- .answerheader a:hover {color:var(--ColorAccentTwo);}
- .answercont {}
- .answercont p:last-of-type {margin-bottom:0;}
- /*--- AUDIO POSTS ---*/
- .audiopost {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo));
- }
- .audiopost iframe {width:100%;}
- .albumart {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .albumart img {
- width:5.5rem;
- height:5.5rem;
- object-fit:cover;
- border-radius:0;
- }
- .audiotitle {
- padding:.5rem 1rem .5rem 1rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1rem;
- }
- .audioplay {
- position:relative;
- width:30px;
- height:30px;
- overflow:hidden;
- z-index:1;
- }
- .audioplaybg {
- transform:scale(.85);
- display:flex;
- justify-content:center;
- align-items:center;
- padding:8px 8px 5px 5px;
- background:#f2f2f2;
- border-radius:100%;
- }
- .audiotitle li {
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- gap:.15em;
- }
- .audiotitle b {font-size:1.05em; color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
- .audiotitle span {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
- .spotify_audio_player,
- article iframe[src*='soundcloud'] {
- max-height:calc(170px + 1rem);
- border:0;
- padding:1rem;
- padding-bottom:0;
- }
- /*--- CHAT POSTS ---*/
- .chatpost {padding:1rem 1rem 1rem 1rem;}
- .chatpost li {
- font-family:'Courier', sans-serif;
- width:100%;
- list-style-type:none;
- }
- .chatpost li b {text-transform:uppercase;}
- .npf_chat {margin:0!important; padding:1rem 1rem 1rem 1rem!important;}
- /*-- BOTTOM POST INFO --*/
- .bottompostinfo {
- width:100%;
- display:flex;
- align-items:center;
- padding-top:.75rem;
- }
- .bottominfoleft {
- display:flex;
- align-items:center;
- gap:.75rem;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- }
- .bottominfoleft a {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- }
- .bottominfoleft a i {
- font-size:1.15em;
- 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;
- }
- .bottominfoleft a:hover i {color:var(--ColorAccentOne);}
- .bottominfoleft a b {
- font-size:1em;
- font-weight:normal;
- color:var(--ColorText);
- text-transform:lowercase;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .bottominfoleft a:hover b {color:var(--ColorTitle);}
- /* copy button */
- a#copybutton {cursor:copy;}
- a.reblog-btn {}
- a.reblog-btn i {}
- a.reblog-btn:hover i {}
- /* like button */
- a.like-button {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a.like-button i {
- font-size:1em;
- color:transparent;
- -webkit-text-stroke-width:1.4px;
- -webkit-text-stroke-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.like-button:hover i {-webkit-text-stroke-color:var(--ColorAccentOne);}
- .bottompostinfo span {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:.25rem;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .like-button {
- position:relative;
- display:inline-block;
- }
- .like-button .like_button iframe {
- position:absolute;
- top:0;
- left:0;
- bottom:0;
- right:0;
- z-index:2;
- opacity:0;
- }
- .like_button iframe {width:100%!important; height:100%!important;}
- .like-button .liked + .actual-button i {
- color:var(--ColorAccentTwo);
- -webkit-text-stroke-color:var(--ColorAccentTwo);
- }
- .like-button .liked + .actual-button b:after {
- content:'d';
- }
- /* tags button */
- a.tagsbutton {display:none;}
- a.clicktagsbutton {cursor:help;}
- a.clicktagsbutton i {font-size:1.2em;}
- a.clicktagsbutton.tags-click i {color:var(--ColorAccentTwo);}
- /*--- TAGS ---*/
- .tags, .clicktags {
- position:relative;
- width:100%;
- padding-top:.5rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-wrap:wrap;
- gap:.25rem .5rem;
- }
- .tags a, .clicktags a {font-size:.95em; color:var(--ColorText);}
- .tags a:nth-of-type(odd):hover, .clicktags a:nth-of-type(odd):hover {color:var(--ColorAccentOne);}
- .tags a:nth-of-type(even):hover, .clicktags a:nth-of-type(even):hover {color:var(--ColorAccentTwo);}
- /*--- PAGINATION ---*/
- article.paginationwrap {}
- .pagination {
- width:100%;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- padding:1rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- }
- .pagination-title {
- }
- .pagination-btns {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:1.5rem;
- }
- .jumpination {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:1rem;
- }
- .jumpination span.current-page {}
- .jumpination span.current-page b {
- font-size:1.05em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- cursor:default;
- }
- .jumpination a.jump-page {}
- .jumpination a.jump-page b {
- font-size:1em;
- font-weight:500;
- color:var(--ColorText);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- transition:ease-in-out .4s;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .jumpination a.jump-page:hover b {color:transparent;}
- a.pgn-prev, a.pgn-next {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a.pgn-prev i, a.pgn-next i {
- font-size:1.4em;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- -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.pgn-prev:hover i, a.pgn-next:hover i {color:transparent;}
- /* no button */
- a#nobtn {opacity:.3; cursor:not-allowed;}
- a#nobtn:after {background:var(--ColorPosts);}
- a#nobtn i {color:var(--ColorText);}
- a#nobtn:hover i {color:var(--ColorText);}
- /*--- TAG AND DAY PAGES ---*/
- article.tdpage {
- display:flex;
- flex-direction:column;
- gap:.5rem;
- margin-top:1rem;
- padding:1rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:.5px solid var(--ColorBorders);
- }
- .tdpage-text {
- width:fit-content;
- display:flex;
- justify-content:center;
- align-items:center;
- gap:.25rem;
- font-size:1em;
- text-transform:lowercase;
- }
- .tdpage-text b:nth-of-type(odd) {color:var(--ColorAccentOne);}
- .tdpage-text b:nth-of-type(even) {color:var(--ColorAccentTwo);}
- /*--- PERMALINK PAGE ---*/
- .permalinkpage {
- width:100%;
- margin-top:.5rem;
- padding-top:1rem;
- }
- .permalink-info {
- width:100%;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.5rem;
- padding-bottom:1rem;
- }
- .permalink-info li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .permalink-info span {text-transform:lowercase;}
- .permalink-info li i {
- font-size:1.2em;
- color:var(--ColorTitle);
- }
- .permalink-info a {font-weight:600; color:var(--ColorTitle);}
- .permalink-info a:hover {color:var(--ColorAccentOne);}
- .permalink-info b {font-weight:600;}
- /* post notes */
- .postnotes {width:100%; padding:1rem; background:var(--ColorPosts); border-radius:var(--Corners); border:.5px solid var(--ColorBorders);}
- ol.notes {
- max-width: 100%;
- margin:0;
- padding:0;
- }
- .more_notes_link {
- width:100%!important;
- }
- a.more_notes_link {
- font-size:.925em;
- font-weight:normal;
- color:var(--ColorTitle);
- letter-spacing:.075em;
- text-transform:uppercase!important;
- }
- a.more_notes_link:hover {color:var(--ColorAccentOne);}
- ol.notes li.note blockquote {
- display:none;
- }
- ol.notes li.note {
- padding:.5rem .75rem .5rem 0;
- list-style-type:none;
- display:flex;
- align-items:center;
- gap:.25rem;
- font-size:.975em;
- }
- ol.notes li.note:first-of-type {border-top:none;}
- ol.notes li.note a {text-transform:lowercase;}
- ol.notes li.note img.avatar {
- width:1.75em!important;
- height:1.75em!important;
- display:flex;
- align-items:center;
- margin-right:.25rem!important;
- padding:2px;
- background:var(--ColorAccentOne);
- border-radius:100%;
- }
- ol.notes li.note.reblog::after {
- content:'\ec37';
- color:var(--ColorAccentOne);
- }
- ol.notes li.note.like::after {
- content:'\eb04';
- color:var(--ColorAccentTwo);
- }
- ol.notes li.note.reply::after {
- content:'\e9d7';
- color:var(--ColorAccentTwo);
- }
- ol.notes li.note.reply span {
- width:calc(100% - 3rem);
- color:var(--ColorText);
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- }
- ol.notes li.note.reply span.action {
- color:var(--ColorText);
- }
- ol.notes li.note.original_post::after {
- content:'\eb68';
- color:var(--ColorTitle);
- }
- ol.notes li.note.original_post {
- font-weight:bold;
- color:var(--ColorTitle);
- }
- ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post, ol.notes li.note.reply, a.more_notes_link {
- position:relative;
- }
- ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-left:.3em;}
- ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes li.note.original_post::after, ol.notes li.note.reply::after, a.more_notes_link::after {
- position:absolute;
- right:0;
- font-family:'cappuccicons';
- }
- /*--- RESPONSIVENESS ---*/
- @media only screen and (max-width: 1000px) {
- main.lsb header, main.rsb header {display:flex;}
- main.lsb .header-left, main.rsb .header-left {display:flex;}
- main.lsb #leftsidebar, main.rsb #rightsidebar {display:none;}
- }
- @media only screen and (max-width: 650px) {
- section {width:100%; padding:0 3rem 0 3rem;}
- }
- @media only screen and (max-width: 600px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
- }
- @media only screen and (max-width: 575px) {
- .headerinfo {flex-wrap:wrap; gap:.25rem .75rem;}
- }
- {CustomCSS}
- </style>
- <!--✻✻✻✻✻✻ UN-BLUE POLL POSTS by @glenthemes ✻✻✻✻✻✻-->
- <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
- <style>
- .poll-post {
- --Poll-Question-Font-Size:1.2em;
- --Poll-Option-Background-Color:var(--ColorBackground);
- --Poll-Option-Corner-Rounding:var(--Corners);
- --Poll-Option-Border-Size:1px;
- --Poll-Option-Border-Color:var(--ColorBorders);
- --Poll-Option-Padding:.25rem;
- --Poll-Option-Font-Size:1em;
- --Poll-Option-Spacing:.5rem;
- --Poll-Option-Text-Color:var(--ColorText);
- --Poll-Option-HOVER-Border-Color:var(--ColorOpaqueAccentOne);
- --Poll-Option-HOVER-Background-Color:var(--ColorOpaqueAccentOne);
- --Poll-Option-HOVER-Text-Color:var(--ColorAccentOne);
- --Poll-Option-HOVER-Speed:0.4s;
- }
- </style>
- </head>
- <body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
- <!--✻✻✻✻✻✻ npf audio posts by @glenthemes ✻✻✻✻✻✻-->
- <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
- <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
- <script>
- tumblr_npf_audio({
- emptyTitleText: "untitled track",
- emptyArtistText: "untitled artist",
- emptyAlbumText: "",
- titleLabel: "",
- artistLabel: "",
- albumLabel: ""
- });
- </script>
- <style edit-npf-audio-player>
- figcaption.audio-caption,
- figcaption.audio-caption + audio[controls]{
- display:none!important;
- }
- .npf-audio-wrapper {
- --NPF-Audio-Buttons-Size: 1.4rem;
- --NPF-Audio-Buttons-Color:var(--ColorPosts); /* color of play & pause buttons */
- --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
- --NPF-Audio-Image-Size:85px;
- --NPF-Audio-Image-Spacing:0px; /* gap between player info and cover image */
- }
- .npf-audio-image {border-radius:0;}
- .npf-audio-background {
- background:linear-gradient(to right, var(--ColorLessOpaqueAccentOne), var(--ColorLessOpaqueAccentTwo)); /* background color of player (optional) */
- padding:1rem;
- border-radius:0;
- }
- .npf-audio-title-label,
- .npf-audio-artist-label,
- .npf-audio-album-label {
- font-weight:bold;
- }
- .npf-audio-title,
- .npf-audio-artist,
- .npf-audio-album {
- color:var(--ColorPosts); /* color of audio text (optional) */
- text-shadow:0 1px rgba(0,0,0,.1);
- }
- .npf-audio-title {font-weight:bold;}
- </style>
- <!-- main container -->
- <main class="{select:Layout}">
- <!--- LEFT SIDEBAR --->
- <div id="leftsidebar">
- <div class="sidebartop">
- {block:ifSidebarImage}<div class="sbimg"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
- <div class="sbicon" {block:ifSidebarImage}style="display:none;"{/block:ifSidebarImage}><img src="{PortraitURL-128}"></div>
- <a class="sbtitle" href="/"><b>{text:Custom Title}</b><span>@{text:Blog Name}</span></a>
- </div><!-- // .sidebarlow -->
- <div class="sidebarlow">
- <div class="sb-desc">{text:Custom Description}</div>
- {block:ifInfo1}<div class="sbinfo">
- <li><i class="ti ti-{text:Info 1 Icon}"></i><span>{text:Info 1}</span></li>
- {block:ifInfo2}<li><i class="ti ti-{text:Info 2 Icon}"></i><span>{text:Info 2}</span></li>{/block:ifInfo2}
- {block:ifInfo3}<li><i class="ti ti-{text:Info 3 Icon}"></i><span>{text:Info 3}</span></li>{/block:ifInfo3}
- {block:ifInfo4}<li><i class="ti ti-{text:Info 4 Icon}"></i><span>{text:Info 4}</span></li>{/block:ifInfo4}
- {block:ifInfo5}<li><i class="ti ti-{text:Info 5 Icon}"></i><span>{text:Info 5}</span></li>{/block:ifInfo5}
- </div>{/block:ifInfo1}
- </div><!-- // .sidebarlow -->
- <!--- <div class="sidebarlinks">
- <a class="hlink" title="home" href="/"><i class="ti ti-home"></i></a>
- <a class="hlink" title="ask" href="/ask"><i class="ti ti-message-circle"></i></a>
- <a class="hlink" title="archive" href="/archive"><i class="ti ti-history"></i></a>
- {block:ifHeaderLink1}<a class="hlink" title="{text:Header Link 1 Name}" href="{text:Header Link 1}"><i class="ti ti-{text:Header Link 1 Icon}"></i></a>{/block:ifHeaderLink1}
- {block:ifHeaderLink2}<a class="hlink" title="{text:Header Link 2 Name}" href="{text:Header Link 2}"><i class="ti ti-{text:Header Link 2 Icon}"></i></a>{/block:ifHeaderLink2}
- {block:ifHeaderLink3}<a class="hlink" title="{text:Header Link 3 Name}" href="{text:Header Link 3}"><i class="ti ti-{text:Header Link 3 Icon}"></i></a>{/block:ifHeaderLink3}
- {block:ifHeaderLink4}<a class="hlink" title="{text:Header Link 4 Name}" href="{text:Header Link 4}"><i class="ti ti-{text:Header Link 4 Icon}"></i></a>{/block:ifHeaderLink4}
- </div> --->
- </div><!-- // #leftsidebar -->
- <!-- main content -->
- <section>
- <!--- HEADER --->
- <header>
- <div class="headertop">
- {block:ifSidebarImage}<div class="headerimg"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
- <div class="headericon" {block:ifSidebarImage}style="display:none;"{/block:ifSidebarImage}><img src="{PortraitURL-128}"></div>
- <a class="headertitle" href="/"><b>{text:Custom Title}</b><span>@{text:Blog Name}</span></a>
- </div>
- <div class="headerlow">
- <div class="headerdesc">{text:Custom Description}</div>
- {block:ifInfo1}<div class="headerinfo">
- <li><i class="ti ti-{text:Info 1 Icon}"></i><span>{text:Info 1}</span></li>
- {block:ifInfo2}<li><i class="ti ti-{text:Info 2 Icon}"></i><span>{text:Info 2}</span></li>{/block:ifInfo2}
- {block:ifInfo3}<li><i class="ti ti-{text:Info 3 Icon}"></i><span>{text:Info 3}</span></li>{/block:ifInfo3}
- {block:ifInfo4}<li><i class="ti ti-{text:Info 4 Icon}"></i><span>{text:Info 4}</span></li>{/block:ifInfo4}
- {block:ifInfo5}<li><i class="ti ti-{text:Info 5 Icon}"></i><span>{text:Info 5}</span></li>{/block:ifInfo5}
- </div>{/block:ifInfo1}
- </div>
- </header><!-- header ends -->
- <!--- HEADER BAR --->
- <div class="headerbar">
- <div class="header-left">
- <a class="hlink" title="home" href="/"><i class="ti ti-home"></i></a>
- <a class="hlink" title="ask" href="/ask"><i class="ti ti-message-circle"></i></a>
- <a class="hlink" title="archive" href="/archive"><i class="ti ti-history"></i></a>
- {block:ifHeaderLink1}<a class="hlink" title="{text:Header Link 1 Name}" href="{text:Header Link 1}"><i class="ti ti-{text:Header Link 1 Icon}"></i></a>{/block:ifHeaderLink1}
- {block:ifHeaderLink2}<a class="hlink" title="{text:Header Link 2 Name}" href="{text:Header Link 2}"><i class="ti ti-{text:Header Link 2 Icon}"></i></a>{/block:ifHeaderLink2}
- {block:ifHeaderLink3}<a class="hlink" title="{text:Header Link 3 Name}" href="{text:Header Link 3}"><i class="ti ti-{text:Header Link 3 Icon}"></i></a>{/block:ifHeaderLink3}
- {block:ifHeaderLink4}<a class="hlink" title="{text:Header Link 4 Name}" href="{text:Header Link 4}"><i class="ti ti-{text:Header Link 4 Icon}"></i></a>{/block:ifHeaderLink4}
- </div>
- <div class="header-right">
- <form class="search" action="javascript:return false">
- <i class="ti ti-search"></i>
- <input type="text" class="query" placeholder="search . . .">
- </form>
- </div>
- </div>
- <div class="section-wrap"><!-- posts start -->
- <!--- EXPLORE MENU --->
- {block:ifExplore}<div class="exploremenu">
- <div class="explore">
- <div class="explorewrap">
- <!-- explore text -->
- {block:ifExploreText}<div class="exploretext">
- <div class="exploretitle"><i class="ti ti-blockquote"></i><b>about</b></div>
- <div class="etext">{text:Explore Text}</div>
- </div>{/block:ifExploreText}
- <!-- explore likes -->
- {block:ifLikesTitle}<div class="explorelikes">
- <div class="exploretitle"><i class="ti ti-{text:Likes Title Icon}"></i><b>{text:Likes Title}</b></div>
- <div class="elikes">
- {block:ifLike1}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 1}</span></div>{/block:ifLike1}
- {block:ifLike2}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 2}</span></div>{/block:ifLike2}
- {block:ifLike3}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 3}</span></div>{/block:ifLike3}
- {block:ifLike4}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 4}</span></div>{/block:ifLike4}
- {block:ifLike5}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 5}</span></div>{/block:ifLike5}
- {block:ifLike6}<div class="like"><i class="ti ti-thumb-up"></i><span>{text:Like 6}</span></div>{/block:ifLike6}
- {block:ifDislike1}<div class="like"><i class="ti ti-thumb-down"></i><span>{text:Dislike 1}</span></div>{/block:ifDislike1}
- {block:ifDislike2}<div class="like"><i class="ti ti-thumb-down"></i><span>{text:Dislike 2}</span></div>{/block:ifDislike2}
- {block:ifDislike3}<div class="like"><i class="ti ti-thumb-down"></i><span>{text:Dislike 3}</span></div>{/block:ifDislike3}
- {block:ifDislike4}<div class="like"><i class="ti ti-thumb-down"></i><span>{text:Dislike 4}</span></div>{/block:ifDislike4}
- </div>
- </div>{/block:ifLikesTitle}
- <!-- explore skills -->
- {block:ifSkillsTitle}<div class="exploreskills">
- <div class="exploretitle"><i class="ti ti-{text:Skills Title Icon}"></i><b>{text:Skills Title}</b></div>
- <div class="eskills">
- {block:ifSkill1}<div class="skill">
- <div class="skillwrap"><div class="skill-line" style="width:{text:Skill 1 Percent}"></div></div>
- <li><b>{text:Skill 1}</b><span>{text:Skill 1 Percent}</span></li>
- </div>{/block:ifSkill1}
- {block:ifSkill2}<div class="skill">
- <div class="skillwrap"><div class="skill-line" style="width:{text:Skill 2 Percent}"></div></div>
- <li><b>{text:Skill 2}</b><span>{text:Skill 2 Percent}</span></li>
- </div>{/block:ifSkill2}
- {block:ifSkill3}<div class="skill">
- <div class="skillwrap"><div class="skill-line" style="width:{text:Skill 3 Percent}"></div></div>
- <li><b>{text:Skill 3}</b><span>{text:Skill 3 Percent}</span></li>
- </div>{/block:ifSkill3}
- {block:ifSkill4}<div class="skill">
- <div class="skillwrap"><div class="skill-line" style="width:{text:Skill 4 Percent}"></div></div>
- <li><b>{text:Skill 4}</b><span>{text:Skill 4 Percent}</span></li>
- </div>{/block:ifSkill4}
- </div>
- </div>{/block:ifSkillsTitle}
- <!-- explore blogs -->
- {block:ifBlogsTitle}<div class="exploreblogs">
- <div class="exploretitle"><i class="ti ti-{text:Blogs Title Icon}"></i><b>{text:Blogs Title}</b></div>
- <div class="eblogs">
- {block:ifBlog1}<a href="//{text:Blog 1}.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/{text:Blog 1}.tumblr.com/avatar">
- <b>{text:Blog 1}</b>
- </a>{/block:ifBlog1}
- {block:ifBlog2}<a href="//{text:Blog 2}.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/{text:Blog 2}.tumblr.com/avatar">
- <b>{text:Blog 2}</b>
- </a>{/block:ifBlog2}
- {block:ifBlog3}<a href="//{text:Blog 3}.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/{text:Blog 3}.tumblr.com/avatar">
- <b>{text:Blog 3}</b>
- </a>{/block:ifBlog3}
- {block:ifBlog4}<a href="//{text:Blog 4}.tumblr.com">
- <img src="//api.tumblr.com/v2/blog/{text:Blog 4}.tumblr.com/avatar">
- <b>{text:Blog 4}</b>
- </a>{/block:ifBlog4}
- </div>
- </div>{/block:ifBlogsTitle}
- <!-- explore nav -->
- {block:ifExploreLinksTitle}<div class="explorenav">
- <div class="exploretitle"><i class="ti ti-{text:Explore Links Title Icon}"></i><b>{text:Explore Links Title}</b></div>
- <div class="enav">
- {block:ifExploreLink1}<a href="{text:Explore Link 1}">{text:Explore Link 1 Text}</a>{/block:ifExploreLink1}
- {block:ifExploreLink2}<a href="{text:Explore Link 2}">{text:Explore Link 2 Text}</a>{/block:ifExploreLink2}
- {block:ifExploreLink3}<a href="{text:Explore Link 3}">{text:Explore Link 3 Text}</a>{/block:ifExploreLink3}
- {block:ifExploreLink4}<a href="{text:Explore Link 4}">{text:Explore Link 4 Text}</a>{/block:ifExploreLink4}
- {block:ifExploreLink5}<a href="{text:Explore Link 5}">{text:Explore Link 5 Text}</a>{/block:ifExploreLink5}
- {block:ifExploreLink6}<a href="{text:Explore Link 6}">{text:Explore Link 6 Text}</a>{/block:ifExploreLink6}
- {block:ifExploreLink7}<a href="{text:Explore Link 7}">{text:Explore Link 7 Text}</a>{/block:ifExploreLink7}
- {block:ifExploreLink8}<a href="{text:Explore Link 8}">{text:Explore Link 8 Text}</a>{/block:ifExploreLink8}
- {block:ifExploreLink9}<a href="{text:Explore Link 9}">{text:Explore Link 9 Text}</a>{/block:ifExploreLink9}
- {block:ifExploreLink10}<a href="{text:Explore Link 10}">{text:Explore Link 10 Text}</a>{/block:ifExploreLink10}
- </div>
- </div>{/block:ifExploreLinksTitle}
- </div></div><!-- // .explore / .explorewrap -->
- </div>{/block:ifExplore}
- <!--- TAG AND DAY PAGES --->
- {block:TagPage}
- <article class="tdpage">
- <div class="tdpage-text">showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b></div>
- </article>
- {/block:TagPage}
- {block:DayPage}
- <article class="tdpage">
- <div class="tdpage-text">showing posts made on <b>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</b></div>
- </article>
- {/block:DayPage}
- {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <article class="posts" id="{PostID}" post-type="{PostType}">
- {block:Date}
- <div class="toppostinfo"><!--- top post info --->
- <div class="topinfoleft">
- {block:NotReblog}
- <a class="til-name" href="{Permalink}">
- <div class="til-img" href=""><img src="{PortraitURL-128}"></div>
- <b>{text:Blog Name}</b>
- </a>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <a class="til-name" href="{ReblogRootURL}" target="_blank">
- <div class="til-img"><img src="{ReblogRootPortraitURL-128}"></div>
- <b>{ReblogRootName}</b>
- </a>
- <div class="til-via"><i class="ti ti-repeat"></i><a href="{ReblogParentURL}">{ReblogParentName}</a></div>
- {/block:RebloggedFrom}
- </div>
- <div class="topinforight">
- <a class="til-date" href="{Permalink}">{ShortMonth} {DayofMonth}</a>
- {block:PinnedPostLabel}<div class="pinned" title="pinned post"><i class="ti ti-pin"></i></div>{/block:PinnedPostLabel}
- </div>
- </div>
- {/block:Date}
- <div class="article-wrap"><!-- article wrap -->
- <div class="post-wrap"><!-- post wrap // posts start -->
- {block:Photo}
- <div class="photopost"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
- {/block:Photo}
- {block:Photoset}
- <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
- {/block:Photoset}
- {block:Quote}<!-- quote posts -->
- <div class="quotepost">
- <div class="quote">
- "{Quote}"
- </div>
- <div class="source">
- -{Source}
- </div>
- </div>{/block:Quote}
- {block:Chat}<!-- chat posts -->
- <div class="chatpost">
- {block:Lines}
- <li>
- {block:Label}<b>{Label}</b>{/block:Label}
- <span>{Line}</span>
- </li>
- {/block:Lines}
- </div>
- {/block:Chat}
- {block:Link}<!-- link posts -->
- <div class="linkpost">
- <a href="{URL}" target="_blank">
- {Name}
- </a>
- </div>
- {/block:Link}
- {block:Video}<!-- video posts -->
- {Video-700}
- {/block:Video}
- {block:Audio}<!-- audio posts -->
- <div class="audiopost">
- <div class="audiotitle">
- <div class="audioplaybg"><div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
- <li><b>{block:trackname}{Trackname}{/block:trackname}</b>
- <span>{block:Artist}{Artist}{/block:Artist}</span></li>
- </div><!-- audiotitle -->
- <div class="albumart">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
- </div>
- {/block:Audio}
- {block:Answer}<!-- answer posts -->
- <div class="answer-post">
- <div class="question">
- <div class="qheader">
- <div class="qicon"><img src="{AskerPortraitURL-128}"></div>
- <li><b>{Asker}</b> sent:</li>
- </div>
- <div class="qcont">{Question}</div>
- </div>
- {block:Answerer}
- <div class="answer">
- <div class="answerheader"><div class="aicon"><img src="{AnswererPortraitURL-128}"></div><li><b>{Answerer}</b> answered:</li></div>
- <div class="answercont">{Answer}</div>
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="answer">
- <div class="answerheader"><div class="aicon"><img src="{PortraitURL-128}"></div><li><b><a href="/">{text:Blog Name}</a></b> answered:</li></div>
- <div class="answercont">{Replies}</div>
- </div>
- {/block:NotReblog}
- </div>{/block:Answer}
- <!-- text posts -->
- <div class="caption {block:notreblog} original-post {/block:notreblog}">
- {block:Text}
- {block:Title}<h2>{Title}</h2>{/block:Title}
- {/block:Text}
- {block:NotReblog}
- {block:Caption}{Caption}{/block:Caption}
- {block:Text}{Body}{/block:Text}
- {/block:NotReblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="reblogs">
- <div class="userlink source-head">
- <a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
- <a href="{permalink}" target="_blank" {block:isdeactivated}class="deactive"{/block:isdeactivated}>{username}</a>
- </div>
- <div class="reblog-content">
- {Body}
- </div>
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div><!-- caption -->
- </div><!-- post wrap ends -->
- {block:Date}<!-- BOTTOM POST INFO --->
- <div class="bottompostinfo">
- <div class="bottominfoleft">
- <!-- tagsbutton -->
- {block:HasTags}<a class="{select:tags}button"><i class="ti ti-tags"></i><b>tags</b></a>{/block:HasTags}
- <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ti ti-calendar-dot"></i><b class="time-ago">{TimeStamp}</b></a>
- {block:NoteCount}<a href="{Permalink}"><i class="ti ti-activity"></i><b class="notecount">{NoteCount}</b></a>{/block:NoteCount}
- <a id="copybutton" data-clipboard-text="{Permalink}"><i class="ti ti-copy"></i><b>copy</b></a>
- <!-- like button -->
- <a class="like-button" href="#">{LikeButton} <span class="actual-button"><i class="ti ti-heart-filled"></i><b>like</b></span></a>
- <a class="reblog-btn" href="{ReblogURL}" target="_blank"><i class="ti ti-refresh"></i><b>reblog</b></a>
- </div>
- <div class="bottominforight">
- </div>
- </div>{/block:Date} <!-- // .bottompostinfo -->
- <!--- TAGS --->
- {block:HasTags}
- <div class="{select:Tags}">
- {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- </div><!-- article-wrap -->
- <!--- PERMALINK PAGE --->
- {block:PermalinkPage}{block:Date}<div class="permalinkpage">
- <div class="permalink-info">
- {block:NotReblog}
- <li><i class="ti ti-map-pin"></i><span>original post by <a href="{PostAuthorURL}">{PostAuthorName}</a></span></li>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <li><i class="ti ti-map-pin"></i><span>originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a></span></li>
- <li><i class="ti ti-refresh"></i><span>reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></span></li>
- {/block:RebloggedFrom}
- <li><i class="ti ti-calendar-heart"></i><span class="date"><b>{DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix} {Year}</b> at <b>{12Hour}:{Minutes}{AMPM}</b> with <b>{NoteCountWithLabel}</b></span></li>
- </div>
- {block:NoteCount}{block:PostNotes}<!-- post notes -->
- <div class="postnotes">
- {PostNotes-64}
- </div>{/block:PostNotes}{/block:NoteCount}
- </div>{/block:Date}{/block:PermalinkPage}
- </article><!--- POSTS END --->
- {/block:Posts}
- {block:Pagination}<!--- PAGINATION --->
- <article class="paginationwrap">
- <div class="pagination">
- <div class="paginationtitle"><span>page <b>{CurrentPage}</b> of {TotalPages}</span></div>
- <div class="pagination-btns">
- {block:PreviousPage}
- <a title="previous" class="pgn-prev" href="{PreviousPage}"><i class="ti ti-chevron-left"></i></a>
- {/block:PreviousPage}
- <a class="pgn-prev" id="nobtn" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><i class="ti ti-chevron-left"></i></a>
- {block:JumpPagination length="3"}<div class="jumpination">
- {block:CurrentPage}<span class="current-page"><b>{PageNumber}</b></span>{/block:CurrentPage}
- {block:JumpPage}<a class="jump-page" href="{URL}"><b>{PageNumber}</b></a>{/block:JumpPage}
- </div>{/block:JumpPagination}
- <a class="pgn-next" id="nobtn" {block:NextPage}style="display:none;"{/block:NextPage}><i class="ti ti-chevron-right"></i></a>
- {block:NextPage}
- <a title="next" class="pgn-next" href="{NextPage}"><i class="ti ti-chevron-right"></i></a>
- {/block:NextPage}
- </div>
- </div>
- </article>{/block:Pagination}
- </div><!-- section wrap -->
- </section>
- <!--- RIGHT SIDEBAR --->
- <div id="rightsidebar">
- <div class="sidebartop">
- {block:ifSidebarImage}<div class="sbimg"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
- <div class="sbicon" {block:ifSidebarImage}style="display:none;"{/block:ifSidebarImage}><img src="{PortraitURL-128}"></div>
- <a class="sbtitle" href="/"><b>{text:Custom Title}</b><span>@{text:Blog Name}</span></a>
- </div><!-- // .sidebarlow -->
- <div class="sidebarlow">
- <div class="sb-desc">{text:Custom Description}</div>
- {block:ifInfo1}<div class="sbinfo">
- <li><i class="ti ti-{text:Info 1 Icon}"></i><span>{text:Info 1}</span></li>
- {block:ifInfo2}<li><i class="ti ti-{text:Info 2 Icon}"></i><span>{text:Info 2}</span></li>{/block:ifInfo2}
- {block:ifInfo3}<li><i class="ti ti-{text:Info 3 Icon}"></i><span>{text:Info 3}</span></li>{/block:ifInfo3}
- {block:ifInfo4}<li><i class="ti ti-{text:Info 4 Icon}"></i><span>{text:Info 4}</span></li>{/block:ifInfo4}
- {block:ifInfo5}<li><i class="ti ti-{text:Info 5 Icon}"></i><span>{text:Info 5}</span></li>{/block:ifInfo5}
- </div>{/block:ifInfo1}
- </div><!-- // .sidebarlow -->
- <!--- <div class="sidebarlinks">
- <a class="hlink" title="home" href="/"><i class="ti ti-home"></i></a>
- <a class="hlink" title="ask" href="/ask"><i class="ti ti-message-circle"></i></a>
- <a class="hlink" title="archive" href="/archive"><i class="ti ti-history"></i></a>
- {block:ifHeaderLink1}<a class="hlink" title="{text:Header Link 1 Name}" href="{text:Header Link 1}"><i class="ti ti-{text:Header Link 1 Icon}"></i></a>{/block:ifHeaderLink1}
- {block:ifHeaderLink2}<a class="hlink" title="{text:Header Link 2 Name}" href="{text:Header Link 2}"><i class="ti ti-{text:Header Link 2 Icon}"></i></a>{/block:ifHeaderLink2}
- {block:ifHeaderLink3}<a class="hlink" title="{text:Header Link 3 Name}" href="{text:Header Link 3}"><i class="ti ti-{text:Header Link 3 Icon}"></i></a>{/block:ifHeaderLink3}
- {block:ifHeaderLink4}<a class="hlink" title="{text:Header Link 4 Name}" href="{text:Header Link 4}"><i class="ti ti-{text:Header Link 4 Icon}"></i></a>{/block:ifHeaderLink4}
- </div> --->
- </div><!-- // #rightsidebar -->
- <!--- FIXED BUTTONS --->
- <div class="fixedbuttons">
- <div class="fixedtop"><!-- fixed top -->
- <a class="flink" 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="fixedmid"><!-- fixed mid -->
- <!-- updates button -->
- {block:ifUpdates}<a class="flink" title="updates" id="updatesbutton"><i class="ti ti-bell"></i></a>
- <!-- updates tab -->
- <div class="updates-tab">
- {block:ifUpdate1}<div class="updates-wrap">
- <li><i class="ti ti-{text:Update 1 Icon}"></i><span>{text:Update 1}</span></li>
- {block:ifUpdate2}<li><i class="ti ti-{text:Update 2 Icon}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
- {block:ifUpdate3}<li><i class="ti ti-{text:Update 3 Icon}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
- {block:ifUpdate4}<li><i class="ti ti-{text:Update 4 Icon}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
- {block:ifUpdate5}<li><i class="ti ti-{text:Update 5 Icon}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
- {block:ifUpdate6}<li><i class="ti ti-{text:Update 6 Icon}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
- </div>{/block:ifUpdate1}
- {block:ifUpdateText}<div class="update-text">{text:Update Text}</div>{/block:ifUpdateText}
- </div>{/block:ifUpdates}
- {block:ifExplore}<a class="flink" id="explorebutton" title="explore"><i class="ti ti-layout-grid-add"></i></a>{/block:ifExplore}
- </div>
- <div class="fixedlow"><!-- fixed low -->
- <a class="flink" id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
- <!-- CREDIT: DO NOT TOUCH -->
- <a class="flink" id="credit" href="//phantomcodes.tumblr.com" title="jasmine theme by sage"><i class="ti ti-ghost-2"></i></a>
- </div>
- </div><!-- // .fixedbuttons -->
- </main>
- </body>
- <script>
- /// photosets
- $(document).ready(function(){
- $('.photo-slideshow').pxuPhotoset({
- lightbox: true,
- rounded: '',
- gutter: '4px',
- borderRadius: '0',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- // 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;
- },
- });
- // videos
- $(document).ready(function() {
- flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
- });
- // toggle tags
- $(document).ready(function(){
- $('.clicktags').hide();
- $('.clicktagsbutton').click(function() {
- $(this).closest('article').find('.clicktags').slideToggle(0);
- $(this).toggleClass('tags-click');
- return false;
- });
- });
- // notes shortener
- var $container = $('article');
- $container.find('.notecount').each(function(){
- var n = $(this).html().split(' ')[0].replace(/,/g, '');
- if (n > 999) {
- n = Math.floor(n / 100) / 10;
- $(this).text(n + 'k');
- }
- });
- // more info dropdown
- $(document).ready(function(){
- $('.moreinfo').hide();
- $('.morebutton').click(function() {
- $('morebutton').toggleClass('more-click');
- $(this).closest('article').find('.moreinfo').slideToggle(0);
- $(this).toggleClass('more-click');
- return false;
- });
- });
- // first userlink
- $(document).ready(function(){
- $('article').find('.userlink:first').addClass("first");
- });
- // tumblr controls
- $(document).ready(function(){
- $('a#controlsbutton').click(function(){
- $('body').toggleClass('controls-click');
- });
- });
- // updates popup
- $(document).ready(function(){
- $('a#updatesbutton').click(function(){
- $('body').toggleClass('updates-click');
- $('a#updatesbutton i').toggleClass("ti-bell-off");
- });
- });
- // explore popup
- $(document).ready(function(){
- $('a#explorebutton').click(function(){
- $('body').toggleClass('explore-click');
- $('a#explorebutton i').toggleClass("ti-layout-grid-remove");
- });
- });
- // sidebar popup
- $(document).ready(function(){
- $('a#sidebarbutton').click(function(){
- $('body').toggleClass('sidebar-click');
- $('a#sidebarbutton i').toggleClass("ti-layout-grid-remove");
- });
- });
- // searchbar hd
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('//{Name}.tumblr.com/search/' + value);
- });
- });
- // searchbar lsb
- $(document).ready(function(){
- $('.lsearch').submit(function(event){
- var value = $('input:first').val();
- location.replace('//{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 > 500 || document.documentElement.scrollTop > 500) {
- mybutton.style.opacity = "1";
- } else {
- mybutton.style.opacity = "0";
- }
- }
- // 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);
- };
- // remove empty p tags
- for (const p of document.querySelectorAll('p')) {
- if (p.innerHTML.trim() === '') {
- p.remove()
- }
- }
- </script>
- </html>
Add Comment
Please, Sign In to add comment