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">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | PHANTOM 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: "short",
- spaces: true,
- words: false,
- prefix: "",
- suffix: "ago",
- });
- });
- </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="#e2e2e2" />
- <meta name="color:Posts" content="#eee" />
- <meta name="color:Borders" content="#dadada" />
- <meta name="color:Title" content="#333" />
- <meta name="color:Text" content="#666" />
- <meta name="color:Accent One" content="#535094"/>
- <meta name="color:Accent Two" content="#c96f6f"/>
- <meta name="color:Gradient One" content="#535094"/>
- <meta name="color:Gradient Two" content="#c96f6f"/>
- <meta name="color:Night Background" content="#333" />
- <meta name="color:Night Posts" content="#2a2a2a" />
- <meta name="color:Night Borders" content="#444" />
- <meta name="color:Night Title" content="#f5f5f5" />
- <meta name="color:Night Text" content="#d5d5d5" />
- <meta name="color:Night Accent One" content="#b3b0e2"/>
- <meta name="color:Night Accent Two" content="#ec9c99"/>
- <meta name="color:Night Gradient One" content="#505994"/>
- <meta name="color:Night Gradient Two" content="#c96f6f"/>
- <meta name="select:Post Width" content="540px" title="540px"/>
- <meta name="select:Post Width" content="500px" title="500px"/>
- <meta name="select:Post Width" content="600px" title="600px"/>
- <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:Corners" content="0px" title="sharp"/>
- <meta name="select:Tags" content="tags" title="default"/>
- <meta name="select:Tags" content="clicktags" title="on click"/>
- <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:Recent Release" content="recent release"/>
- <meta name="text:Recent Release IMG" content=""/>
- <meta name="text:Recent Release Preview" content=""/>
- <meta name="text:Recent Release Post" content=""/>
- <meta name="text:Update 1" content="update"/>
- <meta name="text:Update 1 Icon" content="bell"/>
- <meta name="text:Update 2" content="update"/>
- <meta name="text:Update 2 Icon" content="bell"/>
- <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=""/>
- <!--- 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};
- --PostWidth:{select:Post Width};
- --ColorOpaqueBackground:rgb(from var(--ColorBackground) r g b / .5);
- --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .85);
- --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);
- }
- /* 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};
- --ColorGradientOne: {color:gradient one};
- --ColorGradientTwo: {color:gradient 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};
- --ColorGradientOne: {color:night gradient one};
- --ColorGradientTwo: {color:night gradient 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:.95em;
- font-weight:500;
- color:var(--ColorTitle);
- text-transform:lowercase;
- text-align:center;
- background:var(--ColorPosts);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- }
- /*--- SCROLLBAR
- ::-webkit-scrollbar {
- width:4px;
- height:4px;
- background:var(--ColorBackground);
- }
- ::-webkit-scrollbar-track {
- margin-bottom:.5rem;
- background:var(--ColorBackground);
- border-radius: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background:var(--ColorAccentTwo);
- border-radius: 5px;
- }
- /*--- TEXT SELECTION ---*/
- ::-moz-selection { /* Code for Firefox */
- color:var(--ColorBackground);
- background:var(--ColorAccentOne);
- }
- ::selection {
- color:var(--ColorBackground);
- 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 */
- .poprule a, .rbvia a, .updates a, .answercont a {
- display:inline-block;
- position:relative;
- }
- .poprule a:after, .rbvia a:after, .updates a:after, .answercont a:after {
- content: '';
- position:absolute;
- bottom:0;
- left:0;
- width:100%;
- height:2px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:5px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .poprule a:hover:after, .rbvia a:hover:after, .updates a:hover:after, .answercont a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- .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;
- }
- /*--- HEADER ---*/
- header {
- position:fixed;
- top:0;
- right:0;
- width:450px;
- height:3.5rem;
- padding:1rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.75em;
- background:rgba(255,255,255,.15);
- backdrop-filter:blur(30px);
- border-bottom:1px solid rgba(255,255,255,.15);
- overflow-x:hidden;
- z-index:999999;
- }
- a.headertitle {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- font-weight:600;
- color:#eee;
- text-shadow:0 2px rgba(0,0,0,.1);
- }
- .headerright {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.75rem;
- }
- /* sidebar button
- a#sidebarbutton {display:none; justify-content:center; align-items:center; cursor:help;}
- a#sidebarbutton i {
- font-size:1.4em;
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#sidebarbutton:hover i {color:var(--ColorAccentTwo);}
- body.sidebar-click a#sidebarbutton i {var(--ColorAccentTwo);}
- /* extra links */
- a#extralink {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a#extralink i {
- font-size:1.45em;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#extralink:hover i {transform:scale(1.05);}
- /* DAY/NIGHT */
- button#theme-toggle {
- outline:none;
- border:none;
- padding:0;
- background:transparent;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- button#theme-toggle span {
- justify-content:center;
- align-items:center;
- cursor:help;
- -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.4em;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle:hover i {
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:daynight;
- -moz-animation-name:daynight;
- }
- @keyframes daynight {
- 50% {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- }
- /* TUMBLR CONTROLS */
- a#controlsbutton {cursor:help;}
- a#controlsbutton {display:flex; justify-content:center; align-items:center;}
- a#controlsbutton i {
- font-size:1.5em;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#controlsbutton:hover i {
- -webkit-animation-duration: 1.5s;
- animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:tumblrcontrols;
- -moz-animation-name:tumblrcontrols;
- }
- body.controls-click a#controlsbutton i {font-weight:bold;}
- @keyframes tumblrcontrols {
- 45% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 55% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- transform:scale(.75);
- margin-right:435px;
- 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;
- }
- /*--- SMALL BAR ---*/
- .smallbar {
- position:fixed;
- top:0;
- left:0;
- bottom:0;
- width:3.5rem;
- height:100%;
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- padding:.5rem 0 1rem 0;
- background:var(--ColorPosts);
- z-index:9999;
- }
- .smallbar:before {
- content:'';
- position:absolute;
- top:0;
- right:0;
- width:1.5px;
- height:100%;
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- a.mainlink {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.45rem;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- a.mainlink:hover {background:transparent;}
- a.mainlink:after {
- content:'';
- position:absolute;
- top:-1.5px;
- left:-1.5px;
- width:100%;
- height:100%;
- padding:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- z-index:-1;
- }
- a.mainlink i {
- font-size:1.3em;
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.mainlink:hover i {color:var(--ColorPosts);}
- /*-- pop up terms ---*/
- .smallbar a#termsbutton {cursor:help;}
- body.terms-click .smallbar a#termsbutton {background:transparent;}
- body.terms-click .smallbar a#termsbutton i {color:var(--ColorPosts);}
- .popterms-wrap {
- position:fixed;
- top:0;
- left:3.5rem;
- width:calc(100% - 3.5rem);
- height:100%;
- display:none;
- justify-content:center;
- align-items:center;
- backdrop-filter:blur(20px);
- background:var(--ColorOpaqueBackground);
- z-index:999999999999;
- }
- body.terms-click .popterms-wrap {display:flex;}
- .popterms {
- position:relative;
- width:100%;
- max-width:600px;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- border-radius:var(--Corners);
- }
- .popterms a#termsbutton {
- position:absolute;
- top:-1rem;
- right:-1rem;
- width:3.25rem;
- height:2rem;
- display:flex;
- justify-content:center;
- align-items:center;
- background:var(--ColorPosts);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- cursor:help;
- }
- .popterms a#termsbutton:hover {background:var(--ColorAccentOne); border:1px solid var(--ColorAccentOne);}
- .popterms a#termsbutton b {
- font-size:.9em;
- font-weight:600;
- color:var(--ColorTitle);
- line-height:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .popterms a#termsbutton:hover b {color:var(--ColorPosts);}
- .popterms-top {
- width:100%;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- background:var(--ColorPosts);
- border-radius:var(--Corners) var(--Corners) 0 0;
- border-top:1px solid var(--ColorBorders);
- border-left:1px solid var(--ColorBorders);
- border-right:1px solid var(--ColorBorders);
- }
- .popterms-title {
- width:100%;
- padding:1rem;
- border-bottom:1px solid var(--ColorBorders);
- }
- .popterms-title b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.2em;
- }
- .popterms-title span {font-size:.95em;}
- .poprule {
- width:100%;
- display:flex;
- flex-direction:column;
- padding:.5rem;
- }
- .poprule li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .poprule li i {
- font-size:1.3em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .poprule li b {font-size:.975em}
- .poprule span {font-size:.9em;}
- .poplinks {
- width:100%;
- display:flex;
- justify-content:center;
- align-items:center;
- overflow:hidden;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:0 0 var(--Corners) var(--Corners);
- box-shadow:inset 0 2px 2px rgba(0,0,0,.1);
- }
- .poplinks a {
- width:100%;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- text-align:center;
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- padding:.75rem 1rem .75rem 1rem;
- border-right:1px solid rgba(255,255,255,.15);
- }
- .poplinks a:last-of-type {border-right:1px solid transparent;}
- .poplinks a:hover {background:rgba(255,255,255,.15); border-right:1px solid transparent;}
- /*--- SEARCH BAR ---*/
- .smallbar a#searchbutton {cursor:help;}
- body.search-click .smallbar a#searchbutton {background:transparent;}
- body.search-click .smallbar a#searchbutton i {color:var(--ColorPosts);}
- .searchwrap {
- position:fixed;
- top:0;
- left:3.5rem;
- width:calc(100% - 3.5rem);
- height:100%;
- display:none;
- justify-content:center;
- align-items:center;
- backdrop-filter:blur(10px);
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- z-index:999999999999;
- }
- body.search-click .searchwrap {display:flex;}
- #search {
- position:relative;
- width:100%;
- max-width:600px;
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- background:rgba(255,255,255,.05);
- border:1px solid rgba(255,255,255,.25);
- border-radius:var(--Corners);
- }
- #search a#searchbutton {
- position:absolute;
- top:-1rem;
- right:-1rem;
- width:3.25rem;
- height:2rem;
- display:flex;
- justify-content:center;
- align-items:center;
- background:rgba(255,255,255,.15);
- border:1px solid rgba(255,255,255,.15);
- backdrop-filter: blur(10px);
- border-radius:var(--Corners);
- cursor:help;
- }
- #search a#searchbutton:hover {background:transparent;}
- #search a#searchbutton b {
- font-size:.9em;
- font-weight:600;
- color:#eee;
- line-height:100%;
- text-shadow:0 2px rgba(0,0,0,.1);
- }
- .search {
- width:100%;
- padding:1rem;
- border-bottom:1px solid rgba(255,255,255,.25);
- }
- .search .query {
- border: 0;
- outline: 0;
- font-family:'{text:body font}', sans-serif;
- font-size:1.1em;
- width:100%;
- color:#fff;
- text-shadow: 0 2px rgba(0,0,0,.1);
- letter-spacing:.05em;
- 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: transparent; text-shadow:none;}
- input:focus:-moz-placeholder {color: transparent; text-shadow:none;}
- input:focus::-moz-placeholder {color: transparent; text-shadow:none;}
- input:focus:-ms-input-placeholder { color: transparent; text-shadow:none;}
- .searchlinks {
- padding:1rem;
- display:flex;
- justify-content:space-around;
- align-items:center;
- gap:1rem;
- flex-wrap:wrap;
- }
- .searchlinks li {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- flex-wrap:wrap;
- }
- .searchlinks li b {
- width:fit-content;
- font-weight:bold;
- color:#eee;
- text-shadow: 0 2px rgba(0,0,0,.1);
- }
- .searchlinks a {
- font-size:.95em;
- color:#fff;
- text-shadow: 0 1px rgba(0,0,0,.1);
- padding:.25em .5em .25em .5em;
- background:rgba(255,255,255,.1);
- border:1px solid rgba(255,255,255,.25);
- border-radius:var(--Corners);
- }
- .searchlinks a:hover {
- background:transparent;
- }
- .searchnote {
- padding:1rem;
- border-top:1px solid rgba(255,255,255,.25);
- }
- .searchnote span {color:#eee; text-shadow: 0 1px rgba(0,0,0,.1);}
- .searchnote b {font-size:.95em; color:#eee;}
- .smallbartop {
- position:relative;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- /* HEADER IMG */
- a.topicon {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:1.5px;
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- a.topicon img {
- width:2.5em;
- height:2.5em;
- padding:2px;
- background:var(--ColorPosts);
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.topicon:hover img {background:transparent;}
- /* updates button */
- .updateswrap {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a#updatesbutton {cursor:help;}
- body.updates-click a#updatesbutton {background:transparent;}
- body.updates-click a#updatesbutton i {color:var(--ColorPosts);}
- 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;
- }
- @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 {
- position:absolute;
- left:calc(100% + 1em);
- top:calc(100% - 1.5em);
- width:200px;
- display:none;
- flex-direction:column;
- background:var(--ColorPosts);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- }
- body.updates-click .updates {display:flex;}
- .updates-title {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- padding:.5em .75em .5em .75em;
- border-bottom:1px solid var(--ColorBorders);
- }
- .updates-title b {font-weight:600;}
- .updates-wrap {
- width:100%;
- display:flex;
- flex-direction:column;
- gap:.5em;
- padding:.5em;
- }
- .updates-wrap li {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.5em;
- }
- .updates-wrap span {font-size:.9em;}
- .updates-wrap li i {
- font-size:1.2em;
- margin-top:.075em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .smallbarbottom {
- display:flex;
- flex-direction:column;
- justify-content:flex-end;
- align-items:center;
- gap:1em;
- }
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop i {
- font-size:1.5em;
- color:var(--ColorTitle);
- background:linear-gradient(to top, 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#totop:hover i {
- color:transparent;
- -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 {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a#credit:hover {transform:scale(1.1);}
- a#credit i {
- font-size:1.5em;
- 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#credit:hover i {
- color:transparent;
- -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)
- }
- }
- /*--- SIDEBAR ---*/
- .sidebarsection {
- position:fixed;
- top:0;
- right:0;
- bottom:0;
- width:450px;
- height:100vh;
- padding:1rem 3rem 1rem 3rem;
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- z-index:9999;
- }
- #sidebar {
- margin:4.5rem auto;
- width:100%;
- height:100%;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- gap:2em;
- }
- .sidebar-top {
- position:relative;
- width:325px;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:center;
- gap:1.5em;
- }
- .sidebartitle {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .sidebartitle b {
- width:100%;
- font-family:'{text:title font}', sans-serif;
- font-size:1.3em;
- font-weight:600;
- color:#eee;
- text-shadow:0 2px rgba(0,0,0,.1);
- text-align: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;
- }
- .sidebartitle li {
- list-style-type:none;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- text-align:center;
- }
- .sidebartitle li a {
- display:inline-block;
- position:relative;
- font-size:.95em;
- font-weight:bold;
- color:#eee;
- border-bottom:1px solid rgba(255,255,255,.15);
- }
- .sidebartitle li a:after {
- content: '';
- position:absolute;
- bottom:-1px;
- left:0;
- width:100%;
- height:1px;
- background:#eee;
- border-radius:3px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .sidebartitle li a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- .sidebartitle li b {font-size:.75em; color:#eee;}
- .sidebar-img {
- position:relative;
- width:200px;
- height:200px;
- display:flex;
- justify-content:center;
- align-items:center;
- border-radius:30px 80% 50px 100px;
- z-index:1;
- }
- .sidebar-img img {width:200px; height:200px; object-fit:cover; object-position:top; border-radius:30px 80% 50px 100px;}
- .sidebar-img:after {
- content:'';
- position:absolute;
- top:4px;
- right:2px;
- width:200px;
- height:200px;
- transform:rotate(-15deg);
- border:1px solid rgba(255,255,255,.3);
- border-radius:30px 80% 50px 100px;
- }
- .sidebar-desc {
- width:100%;
- font-size:1em;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- text-align:center;
- }
- .sidebar-desc p {margin-bottom:0; padding-bottom:0;}
- .sidebar-desc li {font-size:.95em; list-style-type:none;}
- .sidebar-desc b {color:#eee;}
- .sidebar-desc a {
- display:inline-block;
- position:relative;
- color:#eee;
- border-bottom:1.5px solid rgba(255,255,255,.15);
- }
- .sidebar-desc a:hover {color:#eee;}
- .sidebar-desc a:after {
- content: '';
- position:absolute;
- bottom:-1.5px;
- left:0;
- width:100%;
- height:1.5px;
- background:#eee;
- border-radius:5px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .sidebar-desc a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- .recentrelease {
- position:relative;
- width:325px;
- display:flex;
- flex-direction:column;
- background:rgba(255,255,255,.15);
- border:1px solid rgba(255,255,255,.15);
- border-radius:var(--Corners);
- }
- .rrnew {
- position:absolute;
- top:-1.375rem;
- left:-1.375rem;
- width:2.75rem;
- height:2.75rem;
- font-size:.95em;
- font-weight:bold;
- color:#eee;
- line-height:100%;
- text-shadow:0 2px rgba(0,0,0,.1);
- display:flex;
- justify-content:center;
- align-items:center;
- background:rgba(255,255,255,.15);
- border:1px solid rgba(255,255,255,.15);
- backdrop-filter: blur(10px);
- border-radius:100%;
- }
- .rrtitle {
- font-weight:bold;
- color:#eee;
- text-shadow:0 2px rgba(0,0,0,.1);
- text-align:center;
- padding:.5em;
- }
- .recentrelease img {
- width:100%;
- height:175px;
- object-fit:cover;
- }
- .recentrelease li {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .recentrelease .rrline {
- width:1px;
- height:100%;
- background:rgba(255,255,255,.15);
- }
- .recentrelease li a {
- width:100%;
- font-size:.95em;
- font-weight:500;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.15);
- text-align:center;
- padding:.5em;
- }
- .recentrelease li a:first-of-type {border-radius:0 0 0 var(--Corners);}
- .recentrelease li a:last-of-type {border-radius:0 0 var(--Corners) 0;}
- .recentrelease li a:hover {background:rgba(255,255,255,.1);}
- /*--- RESPONSIVE HEADER ---*/
- .responsiveheader {
- width:100%;
- margin:auto;
- padding:3rem;
- display:none;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- gap:2em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- transition:all .3s ease-in-out;
- }
- .rheader-top {
- max-width:600px;
- display:flex;
- justify-content:center;
- align-items:flex-start;
- gap:1rem;
- }
- .rheader-topleft {
- display:flex;
- flex-direction:column;
- gap:1em;
- }
- .responsiveheader .sidebartitle a {width:100%;}
- .responsiveheader .sidebartitle a b {text-align:left;}
- .responsiveheader .sidebartitle li {width:100%; text-align:left;}
- .responsiveheader .sidebartitle li a {width:fit-content;}
- .rheader-top .sidebar-desc {text-align:left;}
- .responsiverr {
- position:relative;
- width:600px;
- display:flex;
- flex-direction:column;
- background:rgba(255,255,255,.15);
- border:1px solid rgba(255,255,255,.15);
- border-radius:var(--Corners);
- transition:all .3s ease-in-out;
- }
- .responsiverr img {
- width:100%;
- height:290px;
- object-fit:cover;
- }
- .responsiverr li {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .responsiverr .rrline {
- width:1px;
- height:100%;
- background:rgba(255,255,255,.25);
- }
- .responsiverr li a {
- width:100%;
- font-size:.95em;
- color:#eee;
- text-align:center;
- padding:.5em;
- }
- .responsiverr li a:first-of-type {border-radius:0 0 0 var(--Corners);}
- .responsiverr li a:last-of-type {border-radius:0 0 var(--Corners) 0;}
- .responsiverr li a:hover {background:rgba(255,255,255,.15);}
- /*-- ask box --*/
- #ask_form {margin-bottom:-6px; border-radius: 0 0 var(--Corners) var(--Corners);}
- #submit_form {margin-bottom:-6px; 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%;
- height:100%;
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- section {
- position:relative;
- width:calc(100% - 450px - 3.5rem);
- height:100%;
- margin:auto 450px auto 3.5rem;
- transition:ease-in-out .45s;
- }
- .section-wrap {
- position:relative;
- width:100%;
- transition:ease-in-out .45s;
- }
- article {
- position:relative;
- width:100%;
- max-width:calc(var(--PostWidth) + 4rem);
- margin:auto;
- padding:2rem;
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- article:first-of-type {padding-top:4rem;}
- article:last-of-type {padding-bottom:4rem;}
- .article-wrap {
- position:relative;
- width:100%;
- background:var(--ColorPosts);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- z-index:1;
- }
- .post-wrap {width:100%;}
- /*-- TOP POST INFO --*/
- .topinfo {
- position:relative;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- padding:1rem;
- border-bottom:1px solid var(--ColorBorders);
- }
- .topinfoleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .til-img {
- padding:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .til-img img {
- width:2.65em;
- height:2.65em;
- padding:3px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- .topleft-names {
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- }
- .topinfoleft b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.05em;
- font-weight:600;
- color:var(--ColorTitle);
- line-height:100%;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- transition:ease-in-out .5s;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .topinfoleft a:hover b {color:transparent;}
- .topinfoleft li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .topinfoleft i {
- margin-top:.1em;
- font-size:1.15em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .topinfoleft li span {font-size:1em; line-height:100%;}
- .topinfoleft li a {font-size:1em; color:var(--ColorText); text-transform:lowercase; display:flex; justify-content:center; align-items:center;}
- .topinfoleft li a:hover {color:var(--ColorAccentTwo);}
- .topinforight {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topinforight a {}
- .topinforight b {
- font-size:.9em;
- font-weight:500;
- color:var(--ColorText);
- text-transform:uppercase;
- text-align: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;
- }
- .topinforight a:hover b {color:var(--ColorTitle);}
- /*--- 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.75em;
- height:1.75em;
- 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: 1px 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 {
- position:relative;
- width:100%;
- padding:.75rem;
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- gap:.75rem;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .qheader {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .qicon {
- width:2.15rem;
- height:2.15rem;
- padding:2px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:rgba(255,255,255,.15);
- border:1px solid rgba(255,255,255,.15);
- border-radius:100%;
- }
- .qicon img {
- width:100%;
- height:100%;
- border-radius:100%;
- }
- .qheader li {
- position:relative;
- line-height:120%;
- width:fit-content;
- display:flex;
- flex-direction:column;
- }
- .qheader b {font-weight:600; color:#eee; white-space:nowrap; text-transform:lowercase;}
- .qheader a {color:#eee; text-shadow:0 1px rgba(0,0,0,.1);}
- .qheader a:hover {color:#eee; text-shadow:none;}
- .qheader li span {
- font-size:.9em;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- white-space:nowrap;
- cursor:default;
- }
- .qcont {
- position:relative;
- width:100%;
- padding:.75rem 1rem .75rem 1rem;
- color:#eee;
- text-shadow:0 1px rgba(0,0,0,.1);
- text-align:left;
- background:rgba(255,255,255,.1);
- border-radius:var(--Corners);
- border:1px solid rgba(255,255,255,.1);
- backdrop-filter:blur(30px);
- }
- .qcont p:first-of-type {margin-top:0;}
- .qcont p:last-of-type {margin-bottom:0;}
- .qcont b {color:#eee;}
- .qcont a {
- position:relative;
- font-size:.95em;
- font-weight:bold;
- color:#eee;
- border-bottom:1px solid rgba(255,255,255,.15);
- }
- .qcont a:after {
- content: '';
- position:absolute;
- bottom:-1px;
- left:0;
- width:100%;
- height:1px;
- opacity:.5;
- background:#eee;
- border-radius:3px;
- transform:scaleX(0);
- transform-origin:center;
- transition: transform 0.3s ease-out;
- }
- .qcont a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- /* answer */
- article .replies {padding:0;}
- article .answer {padding:1rem;}
- .answerheader {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.35rem;
- }
- .answerheader .aicon {
- width:2.15rem;
- height:2.15rem;
- padding:1.5px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .answerheader .aicon img {
- width:100%;
- height:100%;
- padding:2px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- .answerheader li {
- position:relative;
- line-height:120%;
- width:fit-content;
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- }
- .answerheader li a {font-weight:600; color:var(--ColorTitle);}
- .answerheader li a:hover {color:var(--ColorAccentOne);}
- .answerheader a {color:var(--ColorTitle);}
- .answerheader a:hover {color:var(--ColorAccentOne);}
- .answerheader li span {font-size:.9em;}
- .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 {
- padding:1rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- background:var(--ColorSidebar);
- border-top:1px solid var(--ColorBorders);
- border-radius:0 0 var(--Corners) var(--Corners);
- }
- .bottominfoleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .bottominfoleft span {font-size:.9em;}
- .bottominfoleft a {
- font-weight:500;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- text-transform:lowercase;
- }
- .bottominforight {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- }
- .bottominforight a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .bottominforight a:hover i {transform:scale(1.1);}
- #copybutton {cursor:help;}
- #copybutton i {
- font-size:1.3em;
- 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#copybutton:hover i {color:transparent;}
- a.reblog-btn i {
- font-size:1.45em;
- color:var(--ColorTitle);
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a.reblog-btn:hover i {color:transparent;}
- .bottominforight span {
- display:flex;
- 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;
- }
- .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;}
- a.like-button i {
- font-size:1.3em;
- color:transparent;
- -webkit-text-stroke-width:1.75px;
- -webkit-text-stroke-color:var(--ColorTitle);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a.like-button:hover i {-webkit-text-stroke-color:var(--ColorAccentTwo);}
- .like-button .liked + .actual-button i {
- -webkit-text-stroke-color:transparent;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- a.clicktagsbutton i {
- font-size:1.45em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -ms-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- a.tagsbutton {display:none;}
- a.clicktagsbutton {cursor:help;}
- a.clicktagsbutton.tags-click i {
- -webkit-text-stroke-color:transparent;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- /*--- TAGS ---*/
- .tags, .clicktags {
- width:100%;
- padding:.5rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-wrap:wrap;
- gap:.5rem;
- }
- .tags span, .clicktags span {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .tags a, .clicktags a {font-size:.925em; 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);}
- /*--- TAG AND DAY PAGES ---*/
- .tdpage {
- position:relative;
- width:100%;
- max-width:calc(var(--PostWidth) + 4rem);
- padding:1rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:1px solid var(--ColorBorders);
- }
- .tdpage-title {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- cursor:default;
- }
- .td-icon {
- width:2rem;
- height:2rem;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .td-icon i {
- font-size:1.4em;
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- }
- .tdpage-text {
- font-size:1.025em;
- text-transform:lowercase;
- white-space:nowrap;
- }
- .tdpage-text b {}
- /*--- PERMALINK PAGE ---*/
- .permalinkpage {
- width:100%;
- max-width:calc(var(--PostWidth) + 4rem);
- margin-top:2rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- border:1px solid var(--ColorBorders);
- }
- .permalink-info {
- width:100%;
- padding:1rem;
- display:flex;
- flex-direction:column;
- justify-content:flex-start;
- align-items:flex-start;
- gap: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; border-top:1px 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';
- }
- /*--- PAGINATION ---*/
- .pagination {
- position:relative;
- width:100%;
- max-width:calc(var(--PostWidth) + 4rem);
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- }
- .pg-buttons {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1rem;
- }
- a.pg-prev, a.pg-next {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a.pg-prev i, a.pg-next i {
- font-size:1.7em;
- color:transparent;
- 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.pg-prev:hover i, a.pg-next:hover i {transform:scale(1.1);}
- a#nobtn {opacity:.3; cursor:not-allowed;}
- a#nobtn i {color:var(--ColorText);}
- a#nobtn:hover i {transform:scale(1);}
- .pg-line {
- width:100%;
- height:1px;
- background:var(--ColorBorders);
- }
- .paginationtitle {
- width:fit-content;
- cursor:default;
- }
- .paginationtitle span {
- font-size:1.025em;
- text-transform:lowercase;
- white-space:nowrap;
- }
- /*--- RESPONSIVENESS ---*/
- @media only screen and (max-width: 1100px) {
- header {width:calc(100% - 3.5rem); background:var(--ColorOpaquePosts); border-bottom:none;}
- a.headertitle, button#theme-toggle i, a#controlsbutton i, a#extralink i {
- color:var(--ColorTitle); text-shadow:none;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- background-clip:text;
- -webkit-background-clip:text;
- }
- a.headertitle:hover, button#theme-toggle:hover i, a#controlsbutton:hover i, a#extralink:hover i {color:transparent;}
- body.controls-click a#controlsbutton i {font-weight:normal; color:transparent;}
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {margin-right:6.5rem;}
- .responsiveheader {display:flex;}
- .sidebarsection, .sidebar-top, .recentrelease {display:none;}
- section {width:calc(100% - 3.5rem); margin-top:3.5rem; margin-right:auto;}
- }
- @media only screen and (max-width: 700px) {
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
- .popterms-wrap, .searchwrap {padding-left:.5rem; padding-right:1rem;}
- .responsiveheader .sidebar-img {display:none;}
- article {padding:2rem 1rem 2rem 1rem;}
- article:first-of-type {padding-top:2rem;}
- article:last-of-type {padding-bottom:2rem;}
- }
- {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>
- <!-- HEADER -->
- <header>
- <a class="headertitle" href="/">{Title}</a>
- <div class="headerright">
- <a title="buy me a coffee?" id="extralink" target="_blank" href="//ko-fi.com/snicdoodles"><i class="ti ti-coffee"></i></a>
- <a title="theme store" id="extralink" target="_blank" href="//payhip.com/phantomcodes"><i class="ti ti-shopping-bag"></i></a>
- <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-stars"></i></span>
- <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
- </button>
- <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
- </div>
- </header>
- <!-- SMALL BAR --->
- <div class="smallbar">
- <div class="smallbartop">
- <a class="topicon" target="_blank" href="//tumblr.com/follow/{Name}" title="follow @{Name}"><img src="{PortraitURL-128}"></a>
- <a class="mainlink" title="home" href="/"><i class="ti ti-home"></i></a>
- <a class="mainlink" title="contact" href="/faq"><i class="ti ti-message"></i></a>
- <a class="mainlink" id="termsbutton" title="my codes"><i class="ti ti-rocket"></i></a>
- <a class="mainlink" id="searchbutton" title="navigate"><i class="ti ti-ufo"></i></a>
- <a class="mainlink" title="portfolio" href="/portfolio"><i class="ti ti-planet"></i></a>
- <a class="mainlink" title="commissions" href="/commissions"><i class="ti ti-plant-2"></i></a>
- <!-- updates tab -->
- {block:ifUpdate1}<div class="updateswrap">
- <a class="mainlink" title="updates" id="updatesbutton"><i class="ti ti-bell"></i></a>
- <div class="updates">
- <div class="updates-title"><b>updates</b></div>
- <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 4 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>
- </div>
- </div><!-- updates wrap -->{/block:ifUpdate1}
- </div>
- <div class="smallbarbottom">
- <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
- <!--- CREDIT: DO NOT TOUCH --->
- <a title="theme by sage" id="credit" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
- </div>
- </div>
- <!--- SEARCH BAR --->
- <div class="searchwrap">
- <div id="search">
- <a id="searchbutton"><b>close</b></a>
- <form class="search" action="javascript:return false">
- <input type="text" class="query" placeholder="search blog . . .">
- </form>
- <div class="searchlinks">
- <li><b>by me:</b>
- <a href="/tagged/phantom+code">all codes</a>
- <a href="/tagged/phantom+theme">themes</a>
- <a href="/tagged/phantom+page">pages</a>
- <a href="/portfolio">portfolio</a>
- <a href="/terms">terms of use</a>
- <a href="/support">support ♡</a>
- <a href="/faq">faq</a>
- <a href="/tagged/answered">answered questions</a>
- <a href="/tagged/updates">updates</a>
- <a href="/sage">about me</a>
- </li>
- <li><b>by others:</b>
- <a href="/credits">credits</a>
- <a href="//theme-directory-network.tumblr.com/">theme directory network</a>
- <a href="/tagged/themes">theme recs</a>
- <a href="/tagged/pages">page recs</a>
- <a href="/resources">resources</a>
- <a href="/tutorials">tutorials</a>
- </li>
- <!--<li><b>theme tags:</b>
- <a href="/tagged/strawberry">strawberry</a>
- <a href="/tagged/blueberry">blueberry</a>
- <a href="/tagged/claudia">claudia</a>
- <a href="/tagged/honey">honey</a>
- <a href="/tagged/rosemary">rosemary</a>
- <a href="/tagged/sunrise">sunrise</a>
- <a href="/tagged/seashell">seashell</a>
- <a href="/tagged/flora">flora</a>
- <a href="/tagged/fauna">fauna</a>
- <a href="/tagged/twitter">twitter</a>
- <a href="/tagged/lotus">lotus</a>
- <a href="/tagged/adora">adora</a>
- <a href="/tagged/sienna">sienna</a>
- <a href="/tagged/seafoam">seafoam</a>
- <a href="/tagged/sandcastle">sandcastle</a>
- <a href="/tagged/teyana">teyana</a>
- <a href="/tagged/tangerine">tangerine</a>
- <a href="/tagged/aaliyah">aaliyah</a>
- <a href="/tagged/rose+quartz">rose quartz</a>
- </li>-->
- </div>
- <div class="searchnote">
- <span>all my themes and any answered questions/updates related to them are tagged with their name (<b>ex. /tagged/strawberry</b>), if you have a question about a specific theme please look at that theme's tag before asking!</span>
- </div>
- </div>
- </div>
- <!--- POP UP TERMS --->
- <div class="popterms-wrap">
- <div class="popterms">
- <a id="termsbutton"><b>close</b></a>
- <div class="popterms-top">
- <div class="popterms-title"><b>terms of use</b><span> — by using my themes you agree to the following:</span></div>
- <div class="poprule">
- <li><i class="ti ti-circle-number-1"></i><b>reblog the theme post</b></li>
- <span>reblogging posts is crucial for content creators on tumblr, it's how others can be introduced to us & see our work plus it helps motivate us to create more :) even if you're not using a theme, reblogs are always appreciated!</span>
- </div>
- <div class="poprule">
- <li><i class="ti ti-circle-number-2"></i><b>do not touch the credit</b></li>
- <span>this includes moving it, changing/editing it, etc. just don't touch it please. in some of my themes the credit's in multiple places - don't touch any of them. if you want to change the fill of my credit icon or update the link (demontimes âžž phantomcodes) that's fine!</span>
- </div>
- <div class="poprule">
- <li><i class="ti ti-circle-number-3"></i><b>do not make major changes</b></li>
- <span>small edits are fine as long as the original design is recognizable and the credit is untouched. send me an ask if you're unsure about a customization you wanna make.</span>
- </div>
- <div class="poprule">
- <li><i class="ti ti-circle-number-4"></i><b>do not claim as your own or redistribute</b></li>
- <span>do not copy pieces of my codes for use anywhere else whether it's my other codes or another theme maker's codes. none of my themes are base codes, do not use them to make your own theme.</span>
- </div>
- <div class="poprule">
- <li><i class="ti ti-circle-number-5"></i><b>support me if you can!</b></li>
- <span>enjoying my themes? there are many ways you can <a href="/support">support me</a> whether it's by reblogging my posts, leaving a tip, and/or making donations!</span>
- </div>
- </div><!-- pop terms top -->
- <div class="poplinks">
- <a href="/terms">full terms</a>
- <a href="/portfolio">portfolio</a>
- <a href="/tagged/phantom+code">codes tag</a>
- <a href="/commissions">commissions</a>
- </div>
- </div>
- </div>
- <!--- SIDEBAR --->
- <div class="sidebarsection">
- <div id="sidebar">
- <div class="sidebar-top">
- <div class="sidebartitle"><b>{text:Custom Title}</b>
- <li>a theme blog run by <a href="/sage">sage</a></li></div>
- <div class="sidebar-img"><img src="{image:Sidebar}"></div>
- <div class="sidebar-desc">{text:Custom Description}</div>
- </div>
- <div class="recentrelease">
- <div class="rrnew">new</div>
- <div class="rrtitle">{text:Recent Release}</div>
- <img src="{text:Recent Release IMG}">
- <li><a target="_blank" href="{text:Recent Release Preview}">preview</a><div class="rrline"></div><a href="{text:Recent Release Post}">post</a></li>
- </div>
- </div>
- </div><!-- sidebar section -->
- <!-- main content -->
- <section>
- <!--- RESPONSIVE HEADER --->
- <div class="responsiveheader">
- <div class="rheader-top">
- <div class="rheader-topleft">
- <div class="sidebartitle"><a href="/"><b>{text:Custom Title}</b></a><li>a theme blog run by <a href="/sage">sage</a></li></div>
- <div class="sidebar-desc">{text:Custom Description}</div>
- </div>
- <div class="sidebar-img"><img src="{image:Sidebar}"></div>
- </div>
- <!--<div class="responsiverr">
- <div class="rrnew">new</div>
- <div class="rrtitle">{text:Recent Release}</div>
- <img src="{text:Recent Release IMG}">
- <li><a href="{text:Recent Release Preview}">preview</a><div class="rrline"></div><a href="{text:Recent Release Post}">post</a></li>
- </div>-->
- </div>
- <div class="section-wrap"><!-- posts start -->
- <!--- TAG AND DAY PAGES --->
- {block:TagPage}<article>
- <div class="tdpage">
- <div class="tdpage-title">
- <div class="td-icon"><i class="ti ti-tags"></i></div>
- <div class="tdpage-text">showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b></div>
- </div>
- </div>
- </article>{/block:TagPage}
- {block:DayPage}<article>
- <div class="tdpage">
- <div class="tdpage-title"><div class="td-icon"><i class="ti ti-calendar-event"></i></div>
- <div class="tdpage-text">showing posts made on <b>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</b></div>
- </div>
- </div>
- </article>{/block:DayPage}
- {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <article class="posts" id="{PostID}" post-type="{PostType}">
- <div class="article-wrap"><!-- article wrap -->
- {block:Date}<!-- top post info -->
- <div class="topinfo">
- <div class="topinfoleft">
- {block:NotReblog}
- <div class="til-img"><img src="{PortraitURL-128}"></div>
- <div class="topleft-names">
- <a href="{Permalink}"><b>{text:Blog Name}</b></a>
- <li {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}><i class="ti ti-map-pin"></i><span>original post</span>
- </li>
- {block:PinnedPostLabel}<li><i class="ti ti-pin"></i><span>pinned post</span></li>{/block:PinnedPostLabel}
- </div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="til-img"><img src="{ReblogRootPortraitURL-128}"></div>
- <div class="topleft-names">
- <a target="_blank" href="{ReblogRootURL}"><b>{ReblogRootName}</b></a>
- <li {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}><i class="ti ti-repeat"></i><a target="_blank" title="reblogged from" href="{ReblogParentURL}">{ReblogParentName}</a></li>
- {block:PinnedPostLabel}<li><i class="ti ti-pin"></i><span>pinned post</span></li>{/block:PinnedPostLabel}
- </div>
- {/block:RebloggedFrom}
- </div>
- <div class="topinforight"><a title="permalink" href="{Permalink}"><b class="time-ago">{TimeStamp}</b></a></div>
- </div><!-- // .topinfo -->
- {/block:Date}
- <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><span>sent a message</span></li>
- </div>
- <div class="qcont"><div class="dot"></div><div class="dot"></div>{Question}</div>
- </div>
- {block:Answerer}
- <div class="answer">
- <div class="answerheader">
- <div class="aicon"><img src="{AnswererPortraitURL-128}"></div>
- <li><b>{Answerer}</b><span>answered</span></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><span>answered</span></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 -->
- {block:Date}<!-- BOTTOM POST INFO --->
- <div class="bottompostinfo">
- <div class="bottominfoleft">
- <span>posted <a title="view day page" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayOfWeek}, {Month} {DayofMonth}{DayofMonthSuffix} {Year}</a>
- {block:NoteCount}with <a title="permalink" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</span>
- </div>
- <div class="bottominforight">
- <a id="copybutton" title="copy link to post" data-clipboard-text="{Permalink}"><i class="ti ti-copy"></i></a>
- <!-- tagsbutton -->
- {block:HasTags}<a class="{select:tags}button" title="tags"><i class="ti ti-tag"></i></a>{/block:HasTags}
- <a title="like" class="like-button" href="#">{LikeButton}<span class="actual-button"><i class="ti ti-heart-filled"></i></span></a>
- <a title="reblog" class="reblog-btn" href="{ReblogURL}" target="_blank"><i class="ti ti-refresh"></i></a>
- </div>
- </div>{/block:Date} <!-- // .bottompostinfo -->
- </div><!-- // .article-wrap -->
- <!--- TAGS --->
- {block:HasTags}
- <div class="{select:Tags}">
- {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- <!--- 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}<article><!-- PAGINATION -->
- <div class="pagination">
- <div class="pg-buttons">
- {block:PreviousPage}<a title="previous" class="pg-prev" href="{PreviousPage}"><i class="ti ti-arrow-narrow-left"></i></a>{/block:PreviousPage}
- <a class="pg-prev" id="nobtn" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><i class="ti ti-arrow-narrow-left"></i></a>
- <a class="pg-next" id="nobtn" {block:NextPage}style="display:none;"{/block:NextPage}><i class="ti ti-arrow-narrow-right"></i></a>
- {block:NextPage}<a title="next" class="pg-next" href="{NextPage}"><i class="ti ti-arrow-narrow-right"></i></a>{/block:NextPage}
- </div>
- <div class="pg-line"></div>
- <div class="paginationtitle"><span>page <b>{CurrentPage}</b> of {TotalPages}</span></div>
- </div><!-- // .pagination -->
- </article>{/block:Pagination}
- </div><!-- // .section-wrap -->
- </section>
- </main>
- </body>
- <script>
- /// photoset
- $(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');
- $('.clicktagsbutton i').toggleClass("ti-tags-off");
- 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 notes');
- }
- });
- // 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');
- });
- });
- // pop up terms
- $(document).ready(function(){
- $('a#termsbutton').click(function(){
- $('body').toggleClass('terms-click');
- });
- });
- // sidebar popup
- $(document).ready(function(){
- $('a#sidebarbutton').click(function(){
- $('body').toggleClass('sidebar-click');
- });
- });
- // updates tab
- $(document).ready(function(){
- $('a#updatesbutton').click(function(){
- $('body').toggleClass('updates-click');
- });
- });
- // searchbar
- $(document).ready(function(){
- $('a#searchbutton').click(function(){
- $('body').toggleClass('search-click');
- });
- });
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('http://{Name}.tumblr.com/search/' + value);
- });
- });
- // scroll to top
- $(document).ready(function(){
- $('a#totop').click(function(){
- $('html, body').animate({scrollTop : 0},800);
- return false;
- });
- });
- var mybutton = document.getElementById("totop");
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
- mybutton.style.display = "flex";
- } else {
- mybutton.style.display = "none";
- }
- }
- // day/night mode
- const toggle = document.getElementById("theme-toggle");
- toggle.onclick = function () {
- // add class to html and make transition snappy
- document.documentElement.classList.add("theme-transition");
- // alright lets retrive the info from data-theme
- let currentTheme = document.documentElement.getAttribute("data-theme");
- // if it's dark already, let's go into the light
- let targetTheme = "light";
- // but if it is light let's toggle dark mode
- if (currentTheme === "light") {
- targetTheme = "dark";
- }
- // ok now that theme has been toggled, get rid of snappy transition
- window.setTimeout(function () {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // we're going to save our theme preference now
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- };
- // 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