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">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | EMERALD THEME BY SAGE / PHANTOMCODES
- | | https://phantomcodes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- CREDITS:
- - phosphor icons / phosphoricons.com
- - tabler icons / https://tabler-icons.io/
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - bunny fonts / https://fonts.bunny.net/
- - npf base code by eggdesign / https://egg.design/post/714907681362771968/npf-based-template
- - 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 audio player by @glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
- - 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@latest/iconfont/tabler-icons.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
- <!---- TOOLTIPS ---->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <!--- 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>
- <!---- VARIABLES ---->
- <meta name="image:Sidebar" content="" />
- <meta name="color:Background" content="#ddd" />
- <meta name="color:Posts" content="#eee" />
- <meta name="color:Borders" content="#ccc" />
- <meta name="color:Title" content="#333" />
- <meta name="color:Text" content="#555" />
- <meta name="color:Accent One" content="#579472"/>
- <meta name="color:Accent Two" content="#81b396"/>
- <meta name="color:Night Background" content="#222" />
- <meta name="color:Night Posts" content="#333" />
- <meta name="color:Night Borders" content="#444" />
- <meta name="color:Night Title" content="#fff" />
- <meta name="color:Night Text" content="#ddd" />
- <meta name="color:Night Accent One" content="#96c3a5"/>
- <meta name="color:Night Accent Two" content="#b6decc"/>
- <meta name="select:Corners" content="10px" title="round"/>
- <meta name="select:Corners" content="5px" title="slightly round"/>
- <meta name="select:Corners" content="0px" title="sharp"/>
- <meta name="select:Tags" content="clicktags" title="on click"/>
- <meta name="select:Tags" content="tags" title="default"/>
- <meta name="if:Updates" content="1"/>
- <meta name="if:Right Sidebar" content="1"/>
- <meta name="text:Body Font" content="Nunito"/>
- <meta name="text:Title Font" content="Montserrat"/>
- <meta name="text:Font Size" content="15"/>
- <meta name="text:Blog Title" content="custom title"/>
- <meta name="text:Blog Name" content="your url here"/>
- <meta name="text:Custom Description" content="custom description"/>
- <meta name="text:Sidebar Link 1" content="/"/>
- <meta name="text:Sidebar Link 1 Name" content="link one"/>
- <meta name="text:Sidebar Link 1 Icon" content="planet"/>
- <meta name="text:Sidebar Link 2" content="/"/>
- <meta name="text:Sidebar Link 2 Name" content="link two"/>
- <meta name="text:Sidebar Link 2 Icon" content="comet"/>
- <meta name="text:Sidebar Link 3" content="/"/>
- <meta name="text:Sidebar Link 3 Name" content="link three"/>
- <meta name="text:Sidebar Link 3 Icon" content="cloud"/>
- <meta name="text:Sidebar Link 4" content=""/>
- <meta name="text:Sidebar Link 4 Name" content=""/>
- <meta name="text:Sidebar Link 4 Icon" content=""/>
- <meta name="text:Update 1" content="watching"/>
- <meta name="text:Update Icon 1" content="device-tv-old"/>
- <meta name="text:Update 2" content="listening to"/>
- <meta name="text:Update Icon 2" content="headphones"/>
- <meta name="text:Update 3" content="reading"/>
- <meta name="text:Update Icon 3" content="book"/>
- <meta name="text:Update 4" content="playing"/>
- <meta name="text:Update Icon 4" content="device-gamepad-2"/>
- <meta name="text:Update 5" content="working on"/>
- <meta name="text:Update Icon 5" content="briefcase"/>
- <meta name="text:Update 6" content=""/>
- <meta name="text:Update Icon 6" 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}
- }
- /* 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,.1);
- --ColorReverseOpacity: rgba(0,0,0,.1);
- }
- 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,.1);
- --ColorReverseOpacity: rgba(255,255,255,.1);
- }
- html.theme-transition,
- html.theme-transition *,
- html.theme-transition *:before,
- html.theme-transition *:after {
- transition: 0s !important;
- transition-delay: 0 !important;
- }
- .light-on{
- display: var(--LightOn);
- }
- .light-off{
- display: var(--LightOff);
- }
- /*--- TOOLTIPS ---*/
- .tippy-tooltip.custom-theme {
- font-size:.95em;
- font-weight:500;
- color:var(--ColorTitle);
- text-transform:lowercase;
- text-align:center;
- background:var(--ColorPosts);
- border-radius:5px;
- box-shadow:0 0px 8px -2px rgba(0,0,0,.3);
- }
- /* 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(--ColorPosts); /* 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(--ColorPosts); /* 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(--ColorPosts); /* 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(--ColorPosts); /* your color here */
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background:var(--ColorBackground);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorBackground);
- 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:140%;
- 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);}
- 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:1px solid var(--ColorBorders);
- padding-left:.75em;
- margin-left:1em;
- }
- ul {list-style-type:circle;}
- ol {list-style-type: decimal-leading-zero;}
- 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); letter-spacing:.1em;}
- 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 */
- .sidebar-desc a, .updates-wrap a, .aanswer a {
- display:inline-block;
- position:relative;
- }
- .sidebar-desc a:after, .updates-wrap a:after, .aanswer 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;
- }
- .sidebar-desc a:hover:after, .updates-wrap a:hover:after, .aanswer a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- .flex {
- display: flex;
- flex-wrap: wrap;
- }
- .centered {
- align-items: center;
- justify-content: center;
- }
- .align-center {
- align-items: center;
- }
- .justify-center {
- justify-content: 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;
- left:0;
- right:0;
- width:100%;
- height:50px;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- padding:0 1em 0 1em;
- background:var(--ColorPosts);
- z-index:9999;
- }
- header:before {
- content:'';
- position:absolute;
- left:0;
- bottom:-1.5px;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- }
- .headerleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- /* HEADER IMG */
- .headerimg {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .headerimg img {
- width:2.25em;
- height:2.25em;
- padding:1px;
- 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.headertitle {
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- line-height:110%;
- }
- a.headertitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1em;
- font-weight:600;
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a.headertitle:hover b {color:var(--ColorAccentOne);}
- a.headertitle i {
- font-size:.95em;
- font-style:normal;
- 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 i {color:var(--ColorTitle);}
- .headerright {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- }
- /* 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 {transform:scale(1.1); color:var(--ColorAccentOne);}
- body.sidebar-click a#sidebarbutton i {color:var(--ColorAccentTwo);}
- /* 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:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle:hover i {
- color:var(--ColorAccentOne);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:daynight;
- -moz-animation-name:daynight;
- }
- @keyframes daynight {
- 50% {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- }
- /* TUMBLR CONTROLS */
- a#controlsbutton {cursor:help;}
- a#controlsbutton {display:flex; justify-content:center; align-items:center;}
- a#controlsbutton i {
- font-size:1.45em;
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#controlsbutton:hover i {
- color:var(--ColorAccentOne);
- -webkit-animation-duration: 1.5s;
- animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:tumblrcontrols;
- -moz-animation-name:tumblrcontrols;
- }
- body.controls-click a#controlsbutton i {color:var(--ColorAccentTwo);}
- @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-top:45px;
- margin-right:-1em;
- 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;
- }
- /*--- LEFT SIDEBAR ---*/
- #leftsidebar {
- position:fixed;
- top:50px;
- left:1em;
- margin:calc(var(--Spacing) * 4) auto;
- width:300px;
- display:flex;
- {block:ifRightSidebar}
- display:none;
- {/block:ifRightSidebar}
- flex-direction:column;
- align-items:center;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
- z-index:999;
- }
- .sidebar-top {
- position:relative;
- width:100%;
- padding:1em;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- border-bottom:1px solid var(--ColorBorders);
- }
- .sidebar-icon {
- padding:2px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .sidebar-icon img {
- width:3em;
- height:3em;
- padding:1px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- a.sidebartitle {
- display:flex;
- flex-direction:column;
- }
- a.sidebartitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- font-weight:bold;
- -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.sidebartitle:hover b {color:var(--ColorAccentOne);}
- a.sidebartitle li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- a.sidebartitle li i {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- a.sidebartitle li span {
- font-style:normal;
- 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.sidebartitle:hover li span {color:var(--ColorTitle);}
- .sidebar-img {
- width:100%;
- height:300px;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .sidebar-img img {width:100%; height:300px; object-fit:cover;}
- .sidebar-desc {
- width:100%;
- padding:1em;
- text-align:left;
- }
- .sidebar-desc p {margin-bottom:0; padding-bottom:0;}
- nav {
- position:relative;
- width:100%;
- padding:.75em;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:0 0 var(--Corners) var(--Corners);
- }
- nav:before {
- content:'';
- position:absolute;
- left:0;
- top:-1.5px;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- }
- nav a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- nav a i {
- font-size:1.45em;
- color:var(--ColorPosts);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a:hover i {transform:scale(1.1);}
- /*--- RIGHT SIDEBAR ---*/
- #rightsidebar {
- position:fixed;
- top:50px;
- right:1em;
- margin:calc(var(--Spacing) * 4) auto;
- width:300px;
- display:flex;
- flex-direction:column;
- align-items:center;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
- z-index:999;
- }
- .sidebar-top {
- position:relative;
- width:100%;
- padding:1em;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- border-bottom:1px solid var(--ColorBorders);
- }
- .sidebar-icon {
- padding:2px;
- display:flex;
- justify-content:center;
- align-items:center;
- background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .sidebar-icon img {
- width:3em;
- height:3em;
- padding:1px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- a.sidebartitle {
- display:flex;
- flex-direction:column;
- }
- a.sidebartitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- font-weight:bold;
- -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.sidebartitle:hover b {color:var(--ColorAccentOne);}
- a.sidebartitle li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- a.sidebartitle li i {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- a.sidebartitle li span {
- font-style:normal;
- 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.sidebartitle:hover li span {color:var(--ColorTitle);}
- .sidebar-img {
- width:100%;
- height:300px;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .sidebar-img img {width:100%; height:300px; object-fit:cover;}
- .sidebar-desc {
- width:100%;
- padding:1em;
- text-align:left;
- }
- .sidebar-desc p {margin-bottom:0; padding-bottom:0;}
- nav {
- position:relative;
- width:100%;
- padding:.75em;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:0 0 var(--Corners) var(--Corners);
- }
- nav:before {
- content:'';
- position:absolute;
- left:0;
- top:-1.5px;
- width:100%;
- height:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- }
- nav a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- nav a i {
- font-size:1.45em;
- color:var(--ColorPosts);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a:hover i {transform:scale(1.1);}
- /*--- FIXED BUTTONS ---*/
- .fixedbuttons {
- position:fixed;
- bottom:1em;
- right:1em;
- {block:ifRightSidebar}
- left:1em;
- right:auto;
- {/block:ifRightSidebar}
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:center;
- gap:.5em;
- z-index:9999999;
- }
- .fixedbuttons a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:2px 2px 8px -2px rgba(0,0,0,.15);
- }
- .fixedbuttons i {
- font-size:1.5em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /* SCROLL TO TOP */
- a#totop {
- display:none;
- justify-content:center;
- align-items:center;
- cursor:help;
- }
- a#totop 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;
- }
- 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)
- }
- }
- a.followbutton i {font-size:1.4em;}
- a.followbutton:hover i {transform:scale(1.1);}
- /* updates button */
- a#updatesbutton, a#updatesclose {cursor:help;}
- a#updatesclose {display:none;}
- a#updatesclose i {}
- a#updatesbutton:hover i, a#updatesclose: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;
- right:calc(100% + .5em);
- {block:ifRightSidebar}
- left:calc(100% + .5em);
- right:auto;
- {/block:ifRightSidebar}
- bottom:0;
- width:250px;
- display:none;
- flex-direction:column;
- background:var(--ColorPosts);
- box-shadow:2px 2px 8px -2px rgba(0,0,0,.15);
- border-radius:var(--Corners);
- }
- .updates-title {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- padding:.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:.75em;
- }
- .updates-wrap li {
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .updates-wrap span {font-size:.95em;}
- .updates-wrap li i {
- font-size:1.3em;
- color:var(--ColorAccent);
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a.credit {}
- a.credit i {}
- 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)
- }
- }
- main {
- width:100%;
- margin:50px auto auto auto;
- max-width:1230px;
- justify-content:center;
- align-items:flex-start;
- }
- section {width:calc(100% - 400px);}
- /*-- TOP POST INFO --*/
- .topinfo {
- position:relative;
- padding:1rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1rem;
- border-bottom:1px solid var(--ColorBorders);
- }
- .topinfoleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5rem;
- }
- .til-img {
- padding:2px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .til-img img {
- width:2.65em;
- height:2.65em;
- padding:1px;
- 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;
- }
- .til-name {
- display:flex;
- flex-direction:column;
- }
- .til-top {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25rem;
- }
- .til-top a {
- font-weight:bold;
- 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;
- }
- .til-top a:hover {color:var(--ColorAccentOne);}
- .til-top i {
- font-size:.9em;
- margin-top:.1rem;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .til-top a.rbvia {
- font-size:.95em;
- font-weight:normal;
- color:var(--ColorText);
- }
- .til-top a.rbvia:hover {color:var(--ColorAccentOne);}
- .til-low {
- margin-top:-.1rem;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.1em;
- }
- .til-low span {font-size:.9em; color:var(--ColorText);}
- .til-low i {
- font-size:1.1rem;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .til-low b {margin-top:.1rem; margin-left:.15em; font-size:.75em; color:var(--ColorText);}
- .topinforight {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topinforight a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topinforight 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;
- }
- .topinforight a:hover i {color:var(--ColorAccentOne);}
- a.morebutton {cursor:help;}
- a.morebutton.more-click {transform:rotate(90deg);}
- .moreinfo {
- position:absolute;
- top:.725rem;
- right:100%;
- width:150px;
- display:none;
- flex-direction:column;
- overflow:hidden;
- background:var(--ColorPosts);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- box-shadow:0 2px 8px -2px rgba(0,0,0,.25);
- z-index:99;
- }
- .moreinfo a {
- width:100%;
- font-size:.95em;
- font-weight:normal;
- color:var(--ColorText);
- text-transform:lowercase;
- padding:.5rem;
- text-align:center;
- border-bottom:1px solid var(--ColorBorders);
- }
- .moreinfo a:last-of-type {border-bottom:none;}
- .moreinfo a:hover {color:var(--ColorPosts); background:var(--ColorAccentOne);}
- a#copybutton {cursor:help;}
- /*--- POST STUFF ---*/
- .tags,
- .reblog-header,
- article .quote,
- article .replies,
- article .source,
- .pagination,
- article h1,
- article h2 {
- padding:var(--Spacing);
- }
- .reblog-header {margin-bottom:var(--Spacing);}
- /*--- TAG / DAY PAGES ---*/
- article.tdpage {
- max-width:540px;
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- padding:1rem;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
- }
- .tdpage-text {text-transform:lowercase;}
- .tdpage-text b {}
- .tdpage-text span {font-weight:500; color:var(--ColorTitle);}
- .tdpage-icon {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- }
- .tdpage-icon i {
- font-size:1.4em;
- color:var(--ColorPosts);
- text-shadow:0 1px rgba(0,0,0,.1);
- padding:.3em;
- background:var(--ColorAccentOne);
- border-radius:100%;
- }
- /*-- poll posts --*/
- .poll-post {
- padding:1rem;
- }
- .poll-post .poll-question {
- font-size:1.2rem!important;
- color:var(--ColorTitle);
- padding:0!important;
- margin:0 0 1rem 0!important;
- }
- .poll-post a.poll-row {
- font-size:1em!important;
- color:var(--ColorTitle)!important;
- padding:0 .25rem 0 .25rem!important;
- background:var(--ColorBackground)!important;
- border:1px solid var(--ColorBorders)!important;
- border-radius:var(--Corners)!important;
- }
- .poll-post a.poll-row:hover {
- color:var(--ColorPosts)!important;
- background:var(--ColorAccentOne)!important;
- border:1px solid var(--ColorAccentOne)!important;
- }
- .poll-post .poll-see-results {
- font-weight:bold;
- text-transform:uppercase;
- color:var(--ColorTitle)!important;
- }
- /*-- quote posts --*/
- .quote {color:var(--ColorTitle)!important;}
- .source {color:var(--ColorTitle)!important;}
- /*-- link posts --*/
- .npf-link-block {
- color:var(--ColorPosts);
- background:var(--ColorAccentOne);
- margin:0!important;
- border:none!important;
- border-radius:0!important;
- }
- .npf-link-block a {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
- .npf-link-block a:hover {margin-left:.5rem;}
- /*-- answer posts --*/
- article .question {
- padding:1rem 1rem .5rem 1rem;
- }
- .qheader {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .qheader li {list-style-type:none; color:var(--ColorTitle);}
- .qheader li a {color:var(--ColorTitle);}
- .qheader li a:hover {color:var(--ColorAccentTwo);}
- .qheader i {
- font-size:1.4em;
- color:var(--ColorPosts);
- padding:.3em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .qcont {
- position:relative;
- margin-top:1em;
- padding:.5em 1em .5em 1em;
- background:var(--ColorBackground);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- }
- .qcont:after {
- content:'';
- position:absolute;
- top:calc(-.625em - 1px);
- left:2.5em;
- width:1.25em;
- height:1.25em;
- transform:rotate(45deg);
- background:var(--ColorBackground);
- border-top:1px solid var(--ColorBorders);
- border-left:1px solid var(--ColorBorders);
- }
- /*--- AUDIO POSTS ---*/
- .audiopost {}
- .spotify_audio_player,
- article iframe[src*='soundcloud'] {
- max-height: calc(170px + var(--Spacing));
- border: 0;
- padding: var(--Spacing);
- padding-bottom: 0;
- }
- /*--- CHAT POSTS ---*/
- .chat li {
- list-style-type:none;
- padding:.5em;
- }
- .chat li:nth-of-type(odd) {background:var(--ColorAccentOne);}
- .chat li:nth-of-type(even) {background:var(--ColorBackground);}
- .chat li:nth-of-type(odd) b, .chat li:nth-of-type(odd) span {color:var(--ColorPosts);}
- article .caption p {
- padding:var(--Spacing);
- /*padding-bottom:0;*/
- margin: 0;
- }
- .reblog-content {
- white-space: pre-wrap;
- }
- .caption:last-child p,
- .reblog-content p:last-of-type {
- padding-bottom: var(--Spacing);
- }
- .reblog-header img {
- width:1.5em;
- height:1.5em;
- margin-right:.5em;
- border-radius:100%;
- }
- .reblog-header a {color:var(--ColorTitle);}
- .reblog-header a:hover {color:var(--ColorAccentTwo);}
- .reblog-header:is(:not(.original)) {
- border-top: 1px solid var(--ColorBorders);
- }
- .reblog-header,
- .reblog-content {
- padding-bottom: 0;
- }
- p:empty {
- display: none;
- }
- /*-- BOTTOM POST INFO --*/
- .bottompostinfo {
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- padding:var(--Spacing);
- border-top:1px solid var(--ColorBorders);
- }
- .bottominfoleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .bottominfoleft a {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:.25em;
- }
- a.notecount i {
- font-size:1.2em;
- 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.notecount b {
- font-weight:normal;
- 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.notecount:hover b, a.notecount:hover i {color:var(--ColorAccentOne);}
- .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 {transform:scale(1.1);}
- a.reblog-btn 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.reblog-btn:hover i {color:var(--ColorAccentOne);}
- a.like-button i {
- font-size:1.35em;
- color:transparent;
- -webkit-text-stroke-width:1.75px;
- -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);}
- .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;}
- .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.tagsbutton {display:none;}
- a.clicktagsbutton {cursor:help;}
- a.clicktagsbutton 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.clicktagsbutton:hover i {color:var(--ColorAccentOne);}
- a.clicktagsbutton.tags-click i {color:var(--ColorAccentOne);}
- /*--- TAGS ---*/
- .tags, .clicktags {
- padding:.5em;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- flex-wrap:wrap;
- gap:.5em;
- }
- .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 {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.pagination {
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- }
- article.pagination span {cursor:default;}
- a.pg-prev, a.pg-next {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- a.pg-prev:hover, a.pg-next:hover {transform:scale(.95);}
- a.pg-prev i, a.pg-next i {
- font-size:1.6em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#nobtn {opacity:.45; cursor:not-allowed;}
- a#nobtn:hover {transform:none;}
- /* common article / pagination / notes */
- article h1 {
- margin:0;
- font-family:'{text:title font}', sans-serif;
- font-size:1.3rem;
- color:var(--ColorTitle);
- }
- .article-wrap,
- .pagination {
- max-width:540px;
- width:100%;
- background:var(--ColorPosts);
- border-radius:var(--Corners);
- box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
- }
- article {width:100%; max-width:540px; margin:calc(var(--Spacing) * 4) auto;}
- ol.notes li {
- padding: 10px;
- }
- ol.notes img {
- display: none;
- }
- article img {
- display: block;
- }
- article iframe,
- article img {
- max-width: 100%;
- }
- a {
- text-decoration: none;
- color: var(--ColorAccentOne);
- }
- blockquote {
- padding: var(--Spacing);
- border-left: 2px solid var(--ColorBorders);
- }
- blockquote p {
- padding: 0!important;
- }
- /*--- RESPONSIVENESS ---*/
- @media only screen and (max-width: 1150px) {
- a#sidebarbutton {display:flex;}
- #rightsidebar {position:fixed; right:-100%; z-index:999; transition:ease-in .55s;}
- body.sidebar-click #rightsidebar {right:1em; transition:ease-out .55s;}
- #leftsidebar {position:fixed; left:-100%; z-index:999; transition:ease-in .55s;}
- body.sidebar-click #leftsidebar {left:1em; transition:ease-out .55s;}
- section {width:100%;}
- article {margin:64px auto;}
- }
- {CustomCSS}
- </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 player 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: "untitle album",
- titleLabel: "track:",
- artistLabel: "artist:",
- albumLabel: "album:"
- });
- </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-background {
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo)); /* background color of player (optional) */
- padding:1.5rem;
- }
- .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) */
- }
- </style>
- <!-- HEADER --->
- <header>
- <div class="headerleft">
- <div class="headerimg"><img src="{PortraitURL-128}"></div>
- <a class="headertitle" href="/"><b>{Title}</b><i>@{Name}</i></a>
- </div>
- <div class="headerright">
- <a id="sidebarbutton" title="toggle sidebar"><i class="ti ti-layout-sidebar"></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"></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>
- <!-- main container -->
- <main class="flex">
- <!--- FIXED BUTTONS --->
- <div class="fixedbuttons">
- <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
- {block:ifUpdates}<a title="show updates" id="updatesbutton"><i class="ti ti-bell"></i></a><a title="hide updates" id="updatesclose"><i class="ti ti-bell-ringing"></i></a>{/block:ifUpdates}
- <!--- CREDIT: DO NOT TOUCH --->
- <a title="emerald theme by sage" class="credit" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
- <!-- updates tab -->
- {block:ifUpdates}<div class="updates">
- <div class="updates-title"><b>updates</b></div>
- <div class="updates-wrap">
- <li><i class="ti ti-{text:Update Icon 1}"></i><span>{text:Update 1}</span></li>
- {block:ifUpdate2}<li><i class="ti ti-{text:Update Icon 2}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
- {block:ifUpdate3}<li><i class="ti ti-{text:Update Icon 3}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
- {block:ifUpdate4}<li><i class="ti ti-{text:Update Icon 4}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
- {block:ifUpdate5}<li><i class="ti ti-{text:Update Icon 5}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
- {block:ifUpdate6}<li><i class="ti ti-{text:Update Icon 6}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
- </div>
- </div>{/block:ifUpdates}
- </div>
- <!--- LEFT SIDEBAR --->
- <div id="leftsidebar">
- <div class="sidebar-top">
- <div class="sidebar-icon"><img src="{PortraitURL-128}"></div>
- <a class="sidebartitle" href="/"><b>{text:Blog Title}</b>
- <li><i class="ti ti-at"></i><span>{text:Blog Name}</span></li></a>
- </div>
- {block:ifSidebarImage}<div class="sidebar-img"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
- {block:ifCustomDescription}<div class="sidebar-desc">{text:Custom Description}</div>{/block:ifCustomDescription}
- <nav>
- <a title="home" href="/"><i class="ti ti-home"></i></a>
- <a title="ask" href="/ask"><i class="ti ti-message"></i></a>
- <a title="archive" href="/archive"><i class="ti ti-calendar-dot"></i></a>
- {block:ifSidebarLink1}<a title="{text:Sidebar Link 1 Name}" href="{text:Sidebar Link 1}"><i class="ti ti-{text:Sidebar Link 1 Icon}"></i></a>{/block:ifSidebarLink1}
- {block:ifSidebarLink2}<a title="{text:Sidebar Link 2 Name}" href="{text:Sidebar Link 2}"><i class="ti ti-{text:Sidebar Link 2 Icon}"></i></a>{/block:ifSidebarLink2}
- {block:ifSidebarLink3}<a title="{text:Sidebar Link 3 Name}" href="{text:Sidebar Link 3}"><i class="ti ti-{text:Sidebar Link 3 Icon}"></i></a>{/block:ifSidebarLink3}
- {block:ifSidebarLink4}<a title="{text:Sidebar Link 4 Name}" href="{text:Sidebar Link 4}"><i class="ti ti-{text:Sidebar Link 4 Icon}"></i></a>{/block:ifSidebarLink4}
- </nav>
- </div>
- <!--- RIGHT SIDEBAR --->
- {block:ifRightSidebar}
- <div id="rightsidebar">
- <div class="sidebar-top">
- <div class="sidebar-icon"><img src="{PortraitURL-128}"></div>
- <a class="sidebartitle" href="/"><b>{text:Blog Title}</b>
- <li><i class="ti ti-at"></i><span>{text:Blog Name}</span></li></a>
- </div>
- {block:ifSidebarImage}<div class="sidebar-img"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
- {block:ifCustomDescription}<div class="sidebar-desc">{text:Custom Description}</div>{/block:ifCustomDescription}
- <nav>
- <a title="home" href="/"><i class="ti ti-home"></i></a>
- <a title="ask" href="/ask"><i class="ti ti-message"></i></a>
- <a title="archive" href="/archive"><i class="ti ti-calendar-dot"></i></a>
- {block:ifSidebarLink1}<a title="{text:Sidebar Link 1 Name}" href="{text:Sidebar Link 1}"><i class="ti ti-{text:Sidebar Link 1 Icon}"></i></a>{/block:ifSidebarLink1}
- {block:ifSidebarLink2}<a title="{text:Sidebar Link 2 Name}" href="{text:Sidebar Link 2}"><i class="ti ti-{text:Sidebar Link 2 Icon}"></i></a>{/block:ifSidebarLink2}
- {block:ifSidebarLink3}<a title="{text:Sidebar Link 3 Name}" href="{text:Sidebar Link 3}"><i class="ti ti-{text:Sidebar Link 3 Icon}"></i></a>{/block:ifSidebarLink3}
- {block:ifSidebarLink4}<a title="{text:Sidebar Link 4 Name}" href="{text:Sidebar Link 4}"><i class="ti ti-{text:Sidebar Link 4 Icon}"></i></a>{/block:ifSidebarLink4}
- </nav>
- </div>
- {/block:ifRightSidebar}
- <!-- posts -->
- <section>
- <!--- TAG AND DAY PAGES --->
- {block:TagPage}
- <article class="tdpage">
- <div class="tdpage-icon"><i class="ti ti-tag-starred"></i></div>
- <div class="tdpage-text">showing <b>{tagresultcount}</b> posts tagged <span>#{Tag}</span></div>
- </article>
- {/block:TagPage}
- {block:DayPage}
- <article class="tdpage">
- <div class="tdpage-icon"><i class="ti ti-calendar"></i></div>
- <div class="tdpage-text">showing posts made on <span>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</span></div>
- </article>
- {/block:DayPage}
- {block:Posts}
- <article id="post-{PostID}" class="{posttype}-post posts">
- <div class="article-wrap">
- {block:Date}
- <div class="topinfo"><!-- top post info -->
- <div class="topinfoleft">
- {block:NotReblog}
- <div class="til-img"><img src="{PortraitURL-128}"></div>
- <div class="til-name">
- <div class="til-top"><a href="{Permalink}">{text:Blog Name}</a></div>
- <div class="til-low"><span class="time-ago">{TimeStamp}</span>{block:PinnedPostLabel}<b>•</b><i class="ti ti-pin"></i><span>pinned</span>{/block:PinnedPostLabel}</div>
- </div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="til-img"><img src="{ReblogRootPortraitURL-128}"></div>
- <div class="til-name">
- <div class="til-top"><a target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a><i class="ti ti-repeat"></i><a title="reblogged from" class="rbvia" href="{ReblogParentURL}">{ReblogParentName}</a>
- </div>
- <div class="til-low"><span class="time-ago">{TimeStamp}</span>{block:PinnedPostLabel}<b>•</b><i class="ti ti-pin"></i><span>pinned</span>{/block:PinnedPostLabel}</div>
- </div>
- {/block:RebloggedFrom}
- </div>
- <div class="topinforight">
- <a title="more info" class="morebutton"><i class="ti ti-dots-vertical"></i></a>
- <div class="moreinfo">
- <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}</a>
- <a href="{Permalink}">permalink</a>
- <a id="copybutton" data-clipboard-text="{Permalink}">copy link</a>
- </div>
- </div>
- </div><!-- top post info ends -->
- {/block:Date}
- {block:Photo}
- <div class="legacy-photo"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
- {/block:Photo}
- {block:Photoset}
- <div class="legacy-photoset">{Photoset}</div>
- {/block:Photoset}
- {block:Panorama}
- <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
- {/block:Panorama}
- {block:Quote}<!-- quote posts -->
- <div class="quote">
- "{Quote}"
- </div>
- <div class="source">
- -{Source}
- </div>
- {/block:Quote}
- {block:Chat}<!-- chat posts -->
- <div class="chat">
- {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="npf-link-block">
- <a href="{URL}">
- {Name}
- </a>
- </div>
- {/block:link}
- {block:Video}<!-- video posts -->
- {Video-500}
- {/block:Video}
- {block:Audio}<!-- audio posts -->
- <div class="audiopost">
- {audioembed}
- </div>
- {/block:Audio}
- {block:Answer}<!-- answer posts -->
- <div class="question">
- <div class="qheader"><i class="ti ti-mail-question"></i><li><b>{Asker}</b> sent:</li></div>
- <div class="qcont">{Question}</div>
- </div>
- {block:Answerer}
- <div class="answer">
- <b>{Answerer}</b> answered: {Answer}
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="replies">
- {Replies}
- </div>
- {/block:NotReblog}
- {/block:Answer}
- <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="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry} flex align-center">
- <a href="{permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
- <a href="{permalink}" target="_blank" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
- {username}
- </a>
- </div>
- <div class="reblog-content">
- {Body}
- </div>
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div>
- {block:Date}<!-- BOTTOM POST INFO --->
- <div class="bottompostinfo">
- <div class="bottominfoleft">
- {block:NoteCount}<a class="notecount" href="{Permalink}"><i class="ti ti-note"></i><b>{NoteCountWithLabel}</b></a>{/block:NoteCount}
- </div>
- <div class="bottominforight">
- <!-- 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-repeat"></i></a>
- </div>
- </div>
- {/block:Date}
- </div><!-- bottom post info ends -->
- </div>
- <!--- TAGS --->
- {block:HasTags}
- <div class="{select:Tags}">
- {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- {PostNotes}
- </article><!--- POSTS END --->
- {/block:Posts}
- <!-- PAGINATION -->
- {block:Pagination}<article class="pagination">
- {block:PreviousPage}
- <a title="previous page" 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>
- <span>page <b>{CurrentPage}</b> of {TotalPages}</span>
- <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 page" class="pg-next" href="{NextPage}"><i class="ti ti-arrow-narrow-right"></i></a>
- {/block:NextPage}
- </article>{/block:Pagination}
- </section>
- </main>
- </body>
- <script>
- /// photoset
- $(document).ready(function(){
- $('.photo-slideshow').pxuPhotoset({
- lightbox: true,
- rounded: '',
- gutter: '4px',
- borderRadius: '',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: true,
- followCursor: true,
- delay: 100,
- placement: 'top',
- offset: "0, 20",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // notes
- $('article').find('.notecount').each(function(){
- var n = $(this).html().split(' ')[0].replace(/,/g, '');
- if (n > 999 & n < 999999) {
- n = Math.floor(n / 100) / 10;
- $(this).text(n + 'k notes');
- }
- if (n > 999999) {
- n = Math.floor(n / 10000) / 100;
- $(this).text(n + 'm notes');
- }
- });
- // 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;
- });
- });
- // more info popup
- $(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;
- });
- });
- // tumblr controls
- $(document).ready(function(){
- $('a#controlsbutton').click(function(){
- $('body').toggleClass('controls-click');
- });
- });
- // sidebar popup
- $(document).ready(function(){
- $('a#sidebarbutton').click(function(){
- $('body').toggleClass('sidebar-click');
- });
- });
- // updates tab
- $(document).ready(function(){
- $('a#updatesbutton').click(function(){
- $(this).css('display', 'none');
- $('a#updatesclose').css('display', 'flex');
- $('.updates').fadeIn(500);
- $('.updates').css('display', 'flex');
- });
- $('a#updatesclose').click(function() {
- $(this).css('display', 'none');
- $('a#updatesbutton').css('display', 'flex');
- $('.updates').fadeOut(400);
- });
- });
- // scroll to top
- $(document).ready(function(){
- $('a#totop').click(function(){
- $('html, body').animate({scrollTop : 0},800);
- return false;
- });
- });
- var mybutton = document.getElementById("totop");
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
- mybutton.style.display = "flex";
- } else {
- mybutton.style.display = "none";
- }
- }
- // day/night mode
- const toggle = document.getElementById("theme-toggle");
- toggle.onclick = function () {
- // add class to html and make transition snappy
- document.documentElement.classList.add("theme-transition");
- // alright lets retrive the info from data-theme
- let currentTheme = document.documentElement.getAttribute("data-theme");
- // if it's dark already, let's go into the light
- let targetTheme = "light";
- // but if it is light let's toggle dark mode
- if (currentTheme === "light") {
- targetTheme = "dark";
- }
- // ok now that theme has been toggled, get rid of snappy transition
- window.setTimeout(function () {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // we're going to save our theme preference now
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- };
- // remove empty p tags
- for (const p of document.querySelectorAll('p')) {
- if (p.innerHTML.trim() === '') {
- p.remove()
- }
- }
- // create posts array
- let posts = []
- {block:Posts}
- posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
- {/block:Posts}
- //function for updating post types
- function updateTypes(type, article) {
- article.classList.remove('text-post')
- article.classList.add(`${ type }-post`, 'npf-post')
- }
- // loop through array to get each post
- for (const post of posts) {
- let npf = post.npf
- let article = document.getElementById(`post-${post.id}`)
- // select captions that have something in them
- let caption = article.querySelector('.caption:is(:not(:empty))')
- if (caption != null && article.classList.contains('text-post')) {
- // if content exists
- if (npf.trail.length || npf.content.length) {
- // assign various post types based on NPF data
- switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
- case 'image':
- updateTypes('photos', article)
- if (article.querySelector('.npf_row') == null) {
- caption.prepend(article.querySelector('figure'))
- }
- break
- case 'video':
- updateTypes('video', article)
- let video = article.querySelector('figure')
- caption.prepend(video)
- break
- case 'link':
- updateTypes('link', article)
- case 'audio':
- updateTypes('audio', article)
- break
- case 'quote':
- updateTypes('quote', article)
- }
- // if there are photos
- if (article.classList.contains('photos-post')) {
- let photoset = document.createElement('div')
- photoset.classList.add('npf-photos')
- caption.prepend(photoset)
- // find where a photoset would be split up by another content block
- let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
- let elements = []
- if (photoBreak) {
- let prevElement = photoBreak.parentNode.firstElementChild
- while (prevElement !== photoBreak) {
- elements.push(prevElement)
- prevElement = prevElement.nextElementSibling
- }
- }
- // if there is nothing that breaks up the photoset, select all rows
- else {
- elements = article.querySelectorAll('.npf_row')
- }
- // move each row to the top
- for (const el of elements) {
- photoset.append(el)
- }
- if (article.querySelectorAll('.npf_row').length > 1) {
- updateTypes('photoset', article)
- }
- else {
- updateTypes('photo', article)
- }
- }
- // clean up any potential stray reblog headers
- let reblogHeader = article.querySelector('.reblog-header')
- let reblogContent = article.querySelector('.reblog-content')
- if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
- reblogHeader.remove()
- reblogContent.remove()
- }
- }
- }
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment