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">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | 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
- - npf audio player by @glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
- - 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
- - 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:Sidebar" content="#dddde7" />
- <meta name="color:Posts" content="#f6f6fc" />
- <meta name="color:Borders" content="#dedee3" />
- <meta name="color:Title" content="#333" />
- <meta name="color:Text" content="#525252" />
- <meta name="color:Accent One" content="#8993b3"/>
- <meta name="color:Accent Two" content="#b6c0de"/>
- <meta name="color:Gradient One" content="#8993b3"/>
- <meta name="color:Gradient Two" content="#b6c0de"/>
- <meta name="color:Night Sidebar" content="#262832" />
- <meta name="color:Night Posts" content="#3a3d4b" />
- <meta name="color:Night Borders" content="#4a4e5e" />
- <meta name="color:Night Title" content="#f6f9ff" />
- <meta name="color:Night Text" content="#dde2e9" />
- <meta name="color:Night Accent One" content="#96a2c3"/>
- <meta name="color:Night Accent Two" content="#b6c0de"/>
- <meta name="color:Night Gradient One" content="#96a2c3"/>
- <meta name="color:Night Gradient Two" content="#b6c0de"/>
- <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="text:Body Font" content="Karla"/>
- <meta name="text:Title Font" content="Comfortaa"/>
- <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: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="watching"/>
- <meta name="text:Update Icon 1" content="television"/>
- <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-open"/>
- <meta name="text:Update 4" content="playing"/>
- <meta name="text:Update Icon 4" content="game-controller"/>
- <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;
- --ColorSidebar: {color:sidebar};
- --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,.1);
- --ColorReverseOpacity: rgba(0,0,0,.1);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- --ColorSidebar: {color:night sidebar};
- --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,.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:.9em;
- font-weight:500;
- color:var(--ColorSidebar);
- text-transform:lowercase;
- text-shadow:0 1px rgba(0,0,0,.1);
- text-align:center;
- background:var(--ColorAccentTwo);
- 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(--ColorAccentTwo); /* 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(--ColorAccentTwo); /* 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(--ColorAccentTwo); /* 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(--ColorAccentTwo); /* your color here */
- }
- /*--- SCROLLBAR
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background:var(--ColorOpacity);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorOpacity);
- 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(--ColorSidebar);
- background:var(--ColorAccentOne);
- }
- ::selection {
- color:var(--ColorSidebar);
- 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(--ColorPosts);
- }
- body {
- opacity:1;
- transition:.75s opacity;
- }
- body.fade-out {
- opacity:0;
- transition:none;
- }
- html {background-color:var(--ColorPosts);}
- 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;
- }
- 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;}
- li::marker {color:var(--ColorAccentOne)}
- small {font-size:.95em;}
- big {font-size:1.1em;}
- h1 {font-size:1.45em; margin:0; color:var(--ColorTitle); display:inline-block;}
- h1 a {color:var(--ColorTitle);}
- h1 a:hover {color:var(--ColorAccent);}
- h2 {font-size:1.3em; color:var(--ColorTitle); font-weight:bold; padding-bottom:0;}
- 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 {
- font-size:.9em;
- color:#ddd;
- line-height:160%;
- word-wrap:break-word!important;
- white-space:pre-wrap;
- padding:.5rem;
- background:#222;
- border-radius:5px;
- }
- 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 {
- display:inline-block;
- position:relative;
- }
- .poprule a:after, .rbvia a:after, .updates 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 {
- 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;
- right:0;
- width:450px;
- height:3.5rem;
- padding:1rem;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.75em;
- background:var(--ColorSidebar);
- box-shadow:0 2px 2px rgba(0,0,0,.1);
- overflow-x:hidden;
- z-index:999999;
- }
- a.headertitle {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- font-weight:600;
- color:var(--ColorTitle);
- }
- a.headertitle:hover {color:var(--ColorAccentOne);}
- .headerright {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.75em;
- }
- /* 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);}
- /* 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(--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;
- -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: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(--ColorAccentTwo);
- -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-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:1em;
- padding:.5rem 0 1rem 0;
- background:var(--ColorSidebar);
- 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:.45em;
- background:var(--ColorSidebar);
- 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(--ColorSidebar);}
- /*-- 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(--ColorSidebar);}
- .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(10px);
- background:var(--ColorReverseOpacity);
- 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:1em;
- 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:.5em;
- }
- .poprule li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- .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;
- padding:1em;
- 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(--ColorSidebar);}
- .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(--ColorSidebar);
- 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(--ColorSidebar);}
- 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);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a#totop:hover i {
- color:var(--ColorAccentTwo);
- -webkit-animation-duration: 2.5s;
- animation-duration: 2.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:totop;
- -moz-animation-name:totop;
- }
- @keyframes totop {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 10% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 20% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 30% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 40% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 60% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 70% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 80% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 90% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- a#credit {
- 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);
- -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:var(--ColorAccentOne);
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- animation-name: bounce;
- -moz-animation-name: bounce;
- }
- @keyframes bounce {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 25% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 75% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*-- ask box --*/
- #ask_form {margin-bottom:-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 {
- position:relative;
- width:100%;
- justify-content:flex-start;
- align-items:flex-start;
- }
- /*--- 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));
- }
- #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 100% 50px 100px;
- }
- .sidebar-img img {width:200px; height:200px; object-fit:cover; border-radius:30px 100% 50px 100px;}
- .sidebar-img:after {
- content:'';
- position:absolute;
- top:4px;
- right:6px;
- width:200px;
- height:200px;
- transform:rotate(-15deg);
- border:1px solid rgba(255,255,255,.3);
- border-radius:30px 100% 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 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 left, 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);}
- /*--- PAGINATION ---*/
- .pagination {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- .pagination span {cursor:default; font-size:.95em; color:var(--ColorText); white-space:nowrap;}
- .pagination span b {color:var(--ColorTitle);}
- .pg-line {
- width:100%;
- height:1px;
- background:var(--ColorBorders);
- }
- 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.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.pg-prev:hover i, a.pg-next:hover i {transform:scale(1.1);}
- a#nobtn i {opacity:.4; cursor:not-allowed;}
- a#nobtn:hover i {transform:scale(1);}
- section {
- width:calc(100% - 450px);
- margin:auto 450px auto 3.5rem;
- background:var(--ColorPosts);
- }
- /*-- TOP POST INFO --*/
- .topinfo {
- position:relative;
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:1em;
- padding:1rem;
- background:var(--ColorSidebar);
- border-bottom:1px solid var(--ColorBorders);
- border-radius:var(--Corners) var(--Corners) 0 0;
- }
- .topinfoleft {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .til-img {
- padding:1.5px;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- border-radius:100%;
- }
- .til-img img {
- width:2.5em;
- height:2.5em;
- padding:3px;
- background:var(--ColorPosts);
- border-radius:100%;
- }
- .topleft-names {
- display:flex;
- flex-direction:column;
- justify-content:center;
- align-items:flex-start;
- }
- .topinfoleft b {
- line-height:100%;
- font-weight:600;
- -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:var(--ColorAccentOne);}
- .topinfoleft li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- .topinfoleft i {
- margin-top:.1em;
- font-size:1.1em;
- background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent;
- }
- .topinfoleft li span {font-size:.95em; line-height:100%;}
- .topinfoleft li a {font-size:.95em; color:var(--ColorText); text-transform:lowercase; display:flex; justify-content:center; align-items:center;}
- .topinfoleft li a:hover {color:var(--ColorAccentOne);}
- .topinforight {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topinforight a {}
- .topinforight b {
- font-size:.85em;
- 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 ---*/
- .tags,
- .reblog-header,
- article .quote,
- article .replies,
- article .source {
- padding:var(--Spacing);
- }
- .reblog-header {margin-bottom:var(--Spacing);}
- /*--- TAG / DAY PAGES ---*/
- article.tdpage {
- max-width:600px;
- width:100%;
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- padding:1rem;
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- }
- .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:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
- 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);}
- /*-- 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(--ColorPosts);
- 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(--ColorPosts);
- border-top:1px solid var(--ColorBorders);
- border-left:1px solid var(--ColorBorders);
- }
- .answer {
- padding:.5rem 1rem .5rem 1rem;
- }
- /*--- 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);}
- /*--- AUDIO POSTS ---*/
- .audiopost {}
- .spotify_audio_player,
- article iframe[src*='soundcloud'] {
- max-height: calc(170px + var(--Spacing));
- border: 0;
- padding: var(--Spacing);
- padding-bottom: 0;
- }
- article .caption p {
- padding:.75rem 1rem .75rem 1rem;
- margin:0;
- }
- .caption p {margin-top:0; margin-bottom:0;}
- .reblog-content {}
- .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 {
- 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);
- -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:var(--ColorAccentTwo);}
- a.reblog-btn i {
- font-size:1.45em;
- 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.reblog-btn:hover i {color:var(--ColorAccentTwo);}
- .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 {
- 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 {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);}
- /*--- post notes ---*/
- .permalinkpostnotes {
- font-size:.9em;
- }
- /* common article / notes */
- article h1 {
- margin:0;
- padding:1rem;
- }
- article h2 {
- margin:0;
- padding:1rem 1rem .5rem 1rem;
- }
- article h3 {margin:0; padding:1rem 1rem .15rem 1rem;}
- article {
- width:100%;
- max-width:600px;
- margin:calc(var(--Spacing) * 4) auto;
- }
- .article-wrap {
- max-width:600px;
- width:100%;
- background:var(--ColorSidebar);
- border:1px solid var(--ColorBorders);
- border-radius:var(--Corners);
- }
- ol.notes li {
- padding: 10px;
- }
- ol.notes img {
- display: none;
- }
- article img {
- display: block;
- }
- article iframe,
- article img {
- max-width: 100%;
- }
- /*--- RESPONSIVENESS ---*/
- @media only screen and (max-width: 1100px) {
- .responsiveheader {display:flex;}
- .sidebarsection, .sidebar-top, .recentrelease {display:none;}
- header {width:calc(100% - 3.5rem);}
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {margin-right:3rem;}
- section {width:100%; margin-left:3.5rem; margin-top:3.5rem; margin-right:auto;}
- article {margin:64px auto;}
- }
- @media only screen and (max-width: 700px) {
- .popterms {max-width:450px;}
- #search {max-width:450px;}
- section {margin-left:4.5rem; margin-right:1rem;}
- .responsiveheader {width:calc(100% + 2rem); margin-left:-1rem;}
- .responsiveheader .sidebar-img {display:none;}
- }
- {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>
- <a class="headertitle" href="/">{Title}</a>
- <div class="headerright">
- <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 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>
- </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> — when you use 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">browse the tag</a>
- <a href="/commissions">commissions</a>
- </div>
- </div>
- </div>
- <!-- main container -->
- <main class="flex">
- <!-- posts -->
- <section>
- <!--- RESPONSIVE HEADER --->
- <div class="responsiveheader">
- <div class="rheader-top">
- <div class="rheader-topleft">
- <div class="sidebartitle"><a href="/"><b>{text:Blog 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 class="sidebarimg-line"></div></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>
- <!--- 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"><!-- 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="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>{/block:Date}<!-- top post info ends -->
- <!-- posts content -->
- {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}
- <!-- quote posts -->
- {block:Quote}
- <div class="quote">
- "{Quote}"
- </div>
- <div class="source">
- -{Source}
- </div>
- {/block:Quote}
- <!-- chat posts -->
- {block:Chat}
- <ul class="chat">
- {block:Lines}
- <li>
- {block:Label}{Label}{/block:Label}
- {Line}
- </li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- {block:link}
- <div class="npf-link-block">
- <a href="{URL}">
- {Name}
- </a>
- </div>
- {/block:link}
- {block:Video}
- {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><!-- reblogs -->
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div><!-- caption -->
- {block:Date}<!-- BOTTOM POST INFO --->
- <div class="bottompostinfo">
- <div class="bottominfoleft">
- <span>posted <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayOfWeek}, {Month} {DayofMonth}{DayofMonthSuffix} {Year}</a>
- {block:NoteCount}with <a 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="reblog" class="reblog-btn" href="{ReblogURL}" target="_blank"><i class="ti ti-refresh"></i></a>
- <a title="like" class="like-button" href="#">{LikeButton}<span class="actual-button"><i class="ti ti-heart-filled"></i></span></a>
- </div>
- </div>{/block:Date}<!-- bottom post info ends -->
- </div><!-- article wrap ends -->
- <!--- TAGS --->
- {block:HasTags}
- <div class="{select:Tags}">
- {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- <div class="permalinkpostnotes">
- {PostNotes}
- </div>
- </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>
- <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}
- <div class="pg-line"></div>
- <span>page <b>{CurrentPage}</b> of {TotalPages}</span>
- </article>{/block:Pagination}
- </section> <!--- posts end ---->
- <!--- SIDEBAR --->
- <div class="sidebarsection">
- <div id="sidebar">
- <div class="sidebar-top">
- <div class="sidebartitle"><b>{text:Blog Title}</b>
- <li>a theme blog run by <a href="/sage">sage</a></li></div>
- <div class="sidebar-img"><img src="{image:Sidebar}"><div class="sidebarimg-line"></div></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>
- </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;
- });
- });
- // 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 > 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