Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!---------------------------------------------------------
- Theme [21]: Punchline
- Made by glenthemes
- Initial release: 2016/12/23
- Major facelift: 2021/02/20
- Last updated: 2026/02/09
- What's new:
- ✱ minor fixes for npf quotes, chats, links
- TERMS OF USE:
- 1) Do not remove the credit.
- 2) Do not remove parts of the code without my permission.
- 3) Do not claim my codes as your own.
- 4) Do not use my works as base codes.
- 5) You may add widgets to my themes and pages.
- ---------------------------------------------------------->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <!------------------------------------->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:0,
- tip_fade_speed:69,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <!------ FONTS ------->
- <link href="//fonts.googleapis.com/css?family=Karla|Cousine|Libre+Franklin|Chakra+Petch|K2D" rel="stylesheet">
- <link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css">
- <!------ ICON FONTS ------->
- <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
- <!------ THEME SCRIPTS ------->
- <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
- <script src="//glen-themes.gitlab.io/thms/21/fkn-audio.js"></script>
- <script src="//npf-images-v3.github.io/script.js"></script>
- <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
- <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
- <script src="//glen-themes.gitlab.io/thms/21/viceps.js"></script>
- <script src="//glen-themes.gitlab.io/thms/21/her-cupcake.js"></script>
- {block:ifshowmusicplayer}
- <script src="//glenthemes.github.io/-music-/glenplayer06.js"></script>
- {/block:ifshowmusicplayer}
- <script>
- // minimal soundcloud player @ shythemes.tumblr
- // shythemes.tumblr.com/post/114792480648
- $(document).ready(function(){
- var soundcloud_btn = '{color:link}';
- $('.soundcloud_audio_player').each(function(){
- $(this).attr({ src: $(this).attr('src').split('&')[0] + '&liking=false&sharing=false&auto_play=false&show_comments=false&continuous_play=false&buying=false&show_playcount=false&show_artwork=true&origin=tumblr&color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
- });
- });
- </script>
- <!-- unblue polls -->
- <!-- glenthemes.tumblr.com/post/708014819571302400 -->
- <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
- <style unblue-polls>
- .poll-post {
- --Poll-Question-Font-Size: {select:post font size};
- --Poll-Option-Background-Color: transparent;
- --Poll-Option-Corner-Rounding: 5px;
- --Poll-Option-Border-Size: 1px;
- --Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
- --Poll-Option-Padding: 10px;
- --Poll-Option-Font-Size: {select:post font size};
- --Poll-Option-Spacing: 10px;
- --Poll-Option-Text-Color: {color:text};
- --Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.25);
- --Poll-Option-HOVER-Background-Color: transparent;
- --Poll-Option-HOVER-Text-Color: {color:link};
- --Poll-Option-HOVER-Speed: 0.4s;
- }
- .poll-see-results {
- padding-bottom:0!important;
- border-bottom:none!important;
- font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
- text-transform:uppercase;
- letter-spacing:0.5px;
- }
- </style>
- <!-- npf audio player -->
- <!-- glenthemes.tumblr.com/post/722160746171072512 -->
- <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: "Untitled album",
- titleLabel: "",
- artistLabel: "",
- albumLabel: ""
- });
- </script>
- <style edit-npf-audio-player>
- .npf-audio-wrapper {
- --NPF-Audio-Buttons-Size: calc(var(--Audio-Post-PlayButton-Size) * 0.6);
- --NPF-Audio-Buttons-Color: {color:text};
- --NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * (1 - 0.6)) - 3px);
- --NPF-Audio-Buttons-Spacing: calc(var(--p) + 14px);
- --NPF-Audio-Image-Size: var(--Audio-Post-Album-Image-Size);
- --NPF-Audio-Image-Spacing: 0px;
- --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
- --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
- }
- .npf-audio-wrapper {
- position:relative;
- z-index:0;
- }
- .npf-audio-background {
- margin-left:var(--p);
- }
- .npf-audio-play, .npf-audio-pause {
- position:relative;
- z-index:0;
- }
- .npf-audio-play:after, .npf-audio-pause:after {
- content:"";
- position:absolute;
- top:0;left:0;
- margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
- margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
- width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
- height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
- background:{color:post};
- border:1px solid rgba({RGBcolor:text},0.420);
- border-radius:100%;
- z-index:-1;
- }
- .npf-audio-play svg { margin-left:1px; }
- .npf-audio-pause svg { margin-left:0; }
- figcaption.audio-caption,
- figcaption.audio-caption ~ audio[controls],
- .npf-audio-album {
- display:none;
- }
- .npf-audio-image {
- position:absolute;
- top:0;left:0;
- border-radius:3px;
- z-index:-1;
- }
- .npf-audio-image-shadow {
- width:var(--NPF-Audio-Image-Size);
- height:var(--NPF-Audio-Image-Size);
- }
- </style>
- <script src="//glen-npf.gitlab.io/other/neue.js"></script>
- <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
- <!------------ THEME OPTIONS ------------>
- <meta name="image:background image" content="//64.media.tumblr.com/2ed40da241cd7d18ca2a32f325dcec9b/89fd344281db72fc-9a/s2048x3072/90d13dd929b0491dd8a5eacb175b84243b0317b3.jpg">
- <meta name="image:topleft icon" content="https://static.tumblr.com/2pnwama/ZFMs1x7up/pktrbwt.png">
- <meta name="color:background" content="#121116">
- <meta name="color:top bar background" content="#1a1e29">
- <meta name="color:topleft arrow" content="#b3aeac">
- <meta name="color:topleft icon border" content="#3e414d">
- <meta name="color:top title 1" content="#b3aeac">
- <meta name="color:top title 2" content="#b3aeac">
- <meta name="color:top links" content="#aaa19f">
- <meta name="color:top links glow" content="#5f504e">
- <meta name="color:descbox background" content="#191c1f">
- <meta name="color:descbox text" content="#979597">
- <meta name="color:descbox links" content="#b59a8e">
- <meta name="color:corner title" content="#b4aba3">
- <meta name="color:corner subtitle" content="#b4aba3">
- <meta name="color:bottom bar background" content="#171a24">
- <meta name="color:music player" content="#9d9187">
- <meta name="color:customlinks" content="#a8a09f">
- <meta name="color:customlinks glow" content="#5f504e">
- <meta name="color:post" content="#16171f">
- <meta name="color:text" content="#908e91">
- <meta name="color:link" content="#c7a190">
- <meta name="color:reblogger" content="#b59a8e">
- <meta name="color:reblog separators" content="#262a32">
- <meta name="color:tags" content="#a78d81">
- <meta name="color:permalink" content="#a78d81">
- <meta name="color:post buttons" content="#a78d81">
- <meta name="color:permalink background" content="#191c1f">
- <meta name="color:scrollbar" content="#4c4b50">
- <!------------ TOP BAR OPTIONS ------------>
- <meta name="select:topleft arrow size" title="16px" content="16px">
- <meta name="select:topleft arrow size" title="12px" content="12px">
- <meta name="select:topleft arrow size" title="14px" content="14px">
- <meta name="select:topleft arrow size" title="18px" content="18px">
- <meta name="select:topleft arrow size" title="20px" content="20px">
- <meta name="select:topleft icon size" title="35px" content="35px">
- <meta name="select:topleft icon size" title="30px" content="30px">
- <meta name="select:topleft icon size" title="40px" content="40px">
- <meta name="select:topleft icon size" title="45px" content="45px">
- <meta name="select:topleft icon size" title="50px" content="50px">
- <meta name="select:topleft icon padding" title="4px" content="4px">
- <meta name="select:topleft icon padding" title="none" content="0">
- <meta name="select:topleft icon padding" title="2px" content="2px">
- <meta name="select:topleft icon padding" title="6px" content="6px">
- <meta name="select:topleft icon padding" title="8px" content="8px">
- <meta name="select:topleft icon padding" title="10px" content="10px">
- <meta name="select:topleft icon padding" title="12px" content="12px">
- <meta name="select:topleft icon margin" title="8px" content="8px">
- <meta name="select:topleft icon margin" title="4px" content="4px">
- <meta name="select:topleft icon margin" title="6px" content="6px">
- <meta name="select:topleft icon margin" title="10px" content="10px">
- <meta name="select:topleft icon margin" title="12px" content="12px">
- <meta name="select:topleft icon margin" title="14px" content="14px">
- <meta name="select:top title 1 size" title="10px" content="10px">
- <meta name="select:top title 1 size" title="8px" content="8px">
- <meta name="select:top title 1 size" title="9px" content="9px">
- <meta name="select:top title 1 size" title="11px" content="11px">
- <meta name="select:top title 1 size" title="12px" content="12px">
- <meta name="select:top title 1 size" title="14px" content="14px">
- <meta name="select:top title 2 size" title="14px" content="14px">
- <meta name="select:top title 2 size" title="11px" content="11px">
- <meta name="select:top title 2 size" title="12px" content="12px">
- <meta name="select:top title 2 size" title="13px" content="13px">
- <meta name="select:top title 2 size" title="15px" content="15px">
- <meta name="select:top links font size" title="11px" content="11px">
- <meta name="select:top links font size" title="10px" content="10px">
- <meta name="select:top links font size" title="12px" content="12px">
- <meta name="select:top links font size" title="13px" content="13px">
- <meta name="select:top links spacing" title="16px" content="16px">
- <meta name="select:top links spacing" title="10px" content="10px">
- <meta name="select:top links spacing" title="12px" content="12px">
- <meta name="select:top links spacing" title="14px" content="14px">
- <meta name="select:top links spacing" title="18px" content="18px">
- <meta name="select:top links spacing" title="20px" content="20px">
- <meta name="select:top bar padding" title="15px" content="15px">
- <meta name="select:top bar padding" title="10px" content="10px">
- <meta name="select:top bar padding" title="20px" content="20px">
- <meta name="select:top bar padding" title="25px" content="25px">
- <meta name="select:top bar padding" title="30px" content="30px">
- <meta name="select:top bar transparency" title="40%" content="0.6">
- <meta name="select:top bar transparency" title="none" content="1">
- <meta name="select:top bar transparency" title="10%" content="0.9">
- <meta name="select:top bar transparency" title="20%" content="0.8">
- <meta name="select:top bar transparency" title="30%" content="0.7">
- <meta name="select:top bar transparency" title="50%" content="0.5">
- <meta name="select:top bar transparency" title="60%" content="0.4">
- <meta name="select:top bar transparency" title="70%" content="0.3">
- <meta name="select:top bar transparency" title="80%" content="0.2">
- <meta name="select:top bar transparency" title="90%" content="0.1">
- <meta name="select:top bar transparency" title="100%" content="0">
- <meta name="select:descbox margin" title="25px" content="25px">
- <meta name="select:descbox margin" title="10px" content="10px">
- <meta name="select:descbox margin" title="15px" content="15px">
- <meta name="select:descbox margin" title="20px" content="20px">
- <meta name="select:descbox margin" title="30px" content="30px">
- <meta name="select:descbox margin" title="35px" content="35px">
- <meta name="select:descbox margin" title="40px" content="40px">
- <meta name="select:descbox width" title="325px" content="325px">
- <meta name="select:descbox width" title="200px" content="200px">
- <meta name="select:descbox width" title="225px" content="225px">
- <meta name="select:descbox width" title="250px" content="250px">
- <meta name="select:descbox width" title="275px" content="275px">
- <meta name="select:descbox width" title="300px" content="300px">
- <meta name="select:descbox width" title="350px" content="350px">
- <meta name="select:descbox width" title="375px" content="375px">
- <meta name="select:descbox padding" title="20px" content="20px">
- <meta name="select:descbox padding" title="8px" content="8px">
- <meta name="select:descbox padding" title="12px" content="12px">
- <meta name="select:descbox padding" title="16px" content="16px">
- <meta name="select:descbox padding" title="24px" content="24px">
- <meta name="select:descbox padding" title="28px" content="28px">
- <meta name="select:descbox font size" title="12px" content="12px">
- <meta name="select:descbox font size" title="9px" content="9px">
- <meta name="select:descbox font size" title="10px" content="10px">
- <meta name="select:descbox font size" title="11px" content="11px">
- <meta name="select:descbox font size" title="13px" content="13px">
- <meta name="select:descbox font size" title="14px" content="14px">
- <meta name="select:descbox line height" title="1.6em" content="1.6em">
- <meta name="select:descbox line height" title="1.5em" content="1.5em">
- <meta name="select:descbox line height" title="1.7em" content="1.7em">
- <meta name="select:descbox line height" title="1.8em" content="1.8em">
- <meta name="select:descbox line height" title="1.9em" content="1.9em">
- <meta name="select:descbox transparency" title="30%" content="0.7">
- <meta name="select:descbox transparency" title="none" content="1">
- <meta name="select:descbox transparency" title="10%" content="0.9">
- <meta name="select:descbox transparency" title="20%" content="0.8">
- <meta name="select:descbox transparency" title="40%" content="0.6">
- <meta name="select:descbox transparency" title="50%" content="0.5">
- <meta name="select:descbox transparency" title="60%" content="0.4">
- <meta name="select:descbox transparency" title="70%" content="0.3">
- <meta name="select:descbox transparency" title="80%" content="0.2">
- <meta name="select:descbox transparency" title="90%" content="0.1">
- <meta name="select:descbox transparency" title="100%" content="0">
- <meta name="select:descbox text align" title="left" content="left">
- <meta name="select:descbox text align" title="justify" content="justify">
- <meta name="select:descbox text align" title="right" content="right">
- <meta name="select:descbox text align" title="center" content="center">
- <meta name="select:descbox hover" title="on hover" content="dhov">
- <meta name="select:descbox hover" title="always show" content="dstill">
- <!------------ BACKGROUND OPTIONS ------------>
- <meta name="select:background size" title="full screen" content="bg-full">
- <meta name="select:background size" title="pattern" content="bg-small">
- <meta name="select:screen margin" title="60px" content="60px">
- <meta name="select:screen margin" title="40px" content="40px">
- <meta name="select:screen margin" title="50px" content="50px">
- <meta name="select:screen margin" title="70px" content="70px">
- <!------------ CORNER TEXT OPTIONS ------------>
- <meta name="select:corner text margin" title="30px" content="30px">
- <meta name="select:corner text margin" title="10px" content="10px">
- <meta name="select:corner text margin" title="20px" content="20px">
- <meta name="select:corner text margin" title="40px" content="40px">
- <meta name="select:corner text margin" title="50px" content="50px">
- <meta name="select:corner title size" title="58px" content="58px">
- <meta name="select:corner title size" title="14px" content="14px">
- <meta name="select:corner title size" title="18px" content="18px">
- <meta name="select:corner title size" title="22px" content="22px">
- <meta name="select:corner title size" title="26px" content="26px">
- <meta name="select:corner title size" title="30px" content="30px">
- <meta name="select:corner title size" title="34px" content="34px">
- <meta name="select:corner title size" title="38px" content="38px">
- <meta name="select:corner title size" title="42px" content="42px">
- <meta name="select:corner title size" title="46px" content="46px">
- <meta name="select:corner title size" title="50px" content="50px">
- <meta name="select:corner title size" title="54px" content="54px">
- <meta name="select:corner title size" title="62px" content="62px">
- <meta name="select:corner title size" title="66px" content="66px">
- <meta name="select:corner subtitle size" title="22px" content="22px">
- <meta name="select:corner subtitle size" title="14px" content="14px">
- <meta name="select:corner subtitle size" title="18px" content="18px">
- <meta name="select:corner subtitle size" title="26px" content="26px">
- <meta name="select:corner subtitle size" title="30px" content="30px">
- <meta name="select:corner subtitle size" title="34px" content="34px">
- <meta name="select:corner subtitle size" title="38px" content="38px">
- <meta name="select:corner text spacing" title="10px" content="10px">
- <meta name="select:corner text spacing" title="5px" content="5px">
- <meta name="select:corner text spacing" title="15px" content="15px">
- <!------------ BOTTOM BAR OPTIONS ------------>
- <meta name="select:bottom bar padding" title="30px" content="30px">
- <meta name="select:bottom bar padding" title="10px" content="10px">
- <meta name="select:bottom bar padding" title="20px" content="20px">
- <meta name="select:bottom bar padding" title="40px" content="40px">
- <meta name="select:bottom bar transparency" title="40%" content="0.6">
- <meta name="select:bottom bar transparency" title="none" content="1">
- <meta name="select:bottom bar transparency" title="10%" content="0.9">
- <meta name="select:bottom bar transparency" title="20%" content="0.8">
- <meta name="select:bottom bar transparency" title="30%" content="0.7">
- <meta name="select:bottom bar transparency" title="50%" content="0.5">
- <meta name="select:bottom bar transparency" title="60%" content="0.4">
- <meta name="select:bottom bar transparency" title="70%" content="0.3">
- <meta name="select:bottom bar transparency" title="80%" content="0.2">
- <meta name="select:bottom bar transparency" title="90%" content="0.1">
- <meta name="select:bottom bar transparency" title="100%" content="0">
- <meta name="select:customlinks size" title="11px" content="11px">
- <meta name="select:customlinks size" title="9px" content="9px">
- <meta name="select:customlinks size" title="10px" content="10px">
- <meta name="select:customlinks size" title="12px" content="12px">
- <meta name="select:customlinks size" title="13px" content="13px">
- <meta name="select:customlinks size" title="14px" content="14px">
- <meta name="select:customlinks spacing" title="16px" content="16px">
- <meta name="select:customlinks spacing" title="10px" content="10px">
- <meta name="select:customlinks spacing" title="12px" content="12px">
- <meta name="select:customlinks spacing" title="14px" content="14px">
- <meta name="select:customlinks spacing" title="18px" content="18px">
- <meta name="select:customlinks spacing" title="20px" content="20px">
- <!------------ POST OPTIONS ------------>
- <meta name="select:photoset spacing" title="4px" content="4px">
- <meta name="select:photoset spacing" title="6px" content="6px">
- <meta name="select:photoset spacing" title="10px" content="10px">
- <meta name="select:post width" title="500px" content="500px">
- <meta name="select:post width" title="400px" content="400px">
- <meta name="select:post width" title="450px" content="450px">
- <meta name="select:post width" title="540px" content="540px">
- <meta name="select:post transparency" title="40%" content="0.6">
- <meta name="select:post transparency" title="none" content="1">
- <meta name="select:post transparency" title="10%" content="0.9">
- <meta name="select:post transparency" title="20%" content="0.8">
- <meta name="select:post transparency" title="30%" content="0.7">
- <meta name="select:post transparency" title="50%" content="0.5">
- <meta name="select:post transparency" title="60%" content="0.4">
- <meta name="select:post transparency" title="70%" content="0.3">
- <meta name="select:post transparency" title="80%" content="0.2">
- <meta name="select:post transparency" title="90%" content="0.1">
- <meta name="select:post transparency" title="100%" content="0">
- <meta name="select:semitransparent images" title="yes" content="0.8">
- <meta name="select:semitransparent images" title="no" content="1">
- <meta name="select:post padding" title="15px" content="15px">
- <meta name="select:post padding" title="none" content="0px">
- <meta name="select:post padding" title="10px" content="10px">
- <meta name="select:post padding" title="20px" content="20px">
- <meta name="select:post font size" title="12px" content="12px">
- <meta name="select:post font size" title="11px" content="11px">
- <meta name="select:post font size" title="13px" content="13px">
- <meta name="select:post font size" title="14px" content="14px">
- <meta name="select:post buttons size" title="12px" content="12px">
- <meta name="select:post buttons size" title="14px" content="14px">
- <meta name="select:post buttons size" title="16px" content="16px">
- <meta name="select:post buttons spacing" title="8px" content="8px">
- <meta name="select:post buttons spacing" title="4px" content="4px">
- <meta name="select:post buttons spacing" title="6px" content="6px">
- <meta name="select:post buttons spacing" title="10px" content="10px">
- <meta name="select:permalink padding" title="14px" content="14px">
- <meta name="select:permalink padding" title="10px" content="10px">
- <meta name="select:permalink padding" title="12px" content="12px">
- <meta name="select:permalink padding" title="16px" content="16px">
- <meta name="select:permalink padding" title="18px" content="18px">
- <meta name="select:post spacing" title="45px" content="45px">
- <meta name="select:post spacing" title="30px" content="30px">
- <meta name="select:post spacing" title="35px" content="35px">
- <meta name="select:post spacing" title="45px" content="45px">
- <meta name="select:post spacing" title="50px" content="50px">
- <meta name="select:post text line height" title="1.7em" content="1.7em">
- <meta name="select:post text line height" title="1.5em" content="1.5em">
- <meta name="select:post text line height" title="1.9em" content="1.9em">
- <meta name="if:background gradient" content="1">
- <meta name="if:reblog separators" content="1">
- <meta name="if:full width reblog separators" content="1">
- <meta name="if:tags on click" content="1">
- <meta name="if:show music player" content="1">
- <meta name="if:black tumblr controls" content="0">
- <meta name="text:top title 1" content="">
- <meta name="text:top title 2" content="">
- <meta name="text:corner title" content="vi">
- <meta name="text:corner subtitle" content="the piltover enforcer">
- <meta name="text:how to link music" content="linktr.ee/direct_file_links">
- <meta name="text:music name" content="never back down">
- <meta name="text:music artist" content="Jeremiah Kane<br>(BlazerJacket remix)">
- <meta name="text:music file mp3" content="https://rhizo.gitlab.io/m/Never_Back_Down__BlazerJacket_Remix_.mp3">
- <meta name="text:customlink 1 name" content="dashboard">
- <meta name="text:customlink 1 URL" content="//tumblr.com/dashboard">
- <meta name="text:customlink 2 name" content="">
- <meta name="text:customlink 2 URL" content="">
- <meta name="text:customlink 3 name" content="">
- <meta name="text:customlink 3 URL" content="">
- <meta name="text:customlink 4 name" content="">
- <meta name="text:customlink 4 URL" content="">
- <meta name="text:customlink 5 name" content="">
- <meta name="text:customlink 5 URL" content="">
- <meta name="text:customlink 6 name" content="">
- <meta name="text:customlink 6 URL" content="">
- <!-------------------------------------->
- <style type="text/css">
- @font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort W01 Regular.ttf'); }
- /*------------ TOOLTIPS ------------*/
- #s-m-t-tooltip {
- margin:24px 18px;
- max-width:{select:post width};
- padding:7px 9px;
- background:{color:post};
- border:1px solid rgba({RGBcolor:text},0.2);
- font-family:karla;
- font-size:calc({select:post font size} - 4px);
- letter-spacing:1px;
- text-transform:uppercase;
- color:{color:text};
- z-index:100;
- }
- /*------------ TUMBLR CONTROLS ------------*/
- iframe#tumblr_controls, .iframe-controls--desktop {
- position:fixed!important;
- top:calc(var(--TBH) + 2px)!important;
- right:5px!important;
- filter:brightness(102%) contrast(0.69);
- -webkit-filter:brightness(102%) contrast(0.69);
- {block:ifblacktumblrcontrols}
- filter:invert(100%) hue-rotate(180deg);
- -webkit-filter:invert(100%) hue-rotate(180deg);
- {/block:ifblacktumblrcontrols}
- transform:scale(0.69,0.69);
- transform-origin:100% 0;
- z-index:99!important;
- }
- /*------------ BASICS ------------*/
- * {
- margin:0;
- padding:0;
- }
- body {
- background:{color:background};
- /*
- if you're looking to edit the background image,
- search for .wallpaper
- */
- font-family:karla;
- color:{color:text};
- overscroll-behavior-y:none;
- overflow-x:hidden;
- }
- .plsstop {
- overflow-y:scroll!important;
- }
- /*--------------------SCROLLBAR--------------------*/
- ::-webkit-scrollbar {
- width:var(--Scrollbar-Padding);
- height:var(--Scrollbar-Padding);
- background:{color:background};
- }
- ::-webkit-scrollbar-thumb {
- background:{color:scrollbar};
- border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid {color:background};
- border-top-width:calc(var(--Scrollbar-Padding) * 0.69);
- border-bottom-width:calc(var(--Scrollbar-Padding) * 0.69);
- }
- ::-webkit-scrollbar-corner {
- background:{color:background};
- }
- img {
- vertical-align:middle;
- }
- a, a:visited {
- color:{color:link};
- text-decoration:none;
- }
- h1, h2, h3, h4, h5, h6 {
- margin:var(--Heading-Margins) 0;
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- font-size:{select:post font size};
- letter-spacing:1.5px;
- }
- h1.title, .linkpath, a.read_more {
- display:block;
- border:1px solid rgba({RGBcolor:text},0.2);
- background:rgba({RGBcolor:post},0.420);
- border-radius:5px;
- padding:0.8em 0.95em;
- font-family:beaufort;
- font-weight:bold;
- font-size:calc({select:post font size} + 1px);
- text-transform:uppercase;
- letter-spacing:1.5px;
- line-height:calc({select:post text line height} * 0.69);
- text-align:center;
- }
- h1.title {
- margin-top:0;
- margin-bottom:calc(var(--Heading-Margins) * 2);
- }
- p:first-child {
- margin-top:0;
- }
- p:last-child {
- margin-bottom:0;
- }
- p {
- margin:var(--Paragraph-Margins) 0;
- }
- ul, ol {
- margin:1em 0;
- margin-left:1.69em;
- }
- ol li {
- padding-left:0.420em;
- }
- ul li {
- position:relative;
- padding-left:0.25em;
- margin-left:calc(({select:post font size} * 1.420) - 3px);
- list-style:none;
- }
- ul li:before {
- content:"";
- position:absolute;
- margin-top:calc(({select:post font size} * var(--LH)) / 2);
- transform:translateY(-50%);
- left:0;margin-left:calc(({select:post font size} * -1.420) - 3px);
- width:{select:post font size};
- height:.7px;
- background:rgba({RGBcolor:text},0.8);
- }
- pre {
- display:block;
- white-space:break-spaces;
- padding:var(--Captions-Gap);
- border:1px solid rgba({RGBcolor:text},0.420);
- border-radius:3px;
- margin:1em 0;
- }
- pre, code {
- font-family:cousine;
- font-size:calc({select:post font size} - 1.5px);
- }
- hr {
- margin:var(--Heading-Margins) 0;
- width:69%;
- border-width:0px;
- height:1px;
- background:rgba({RGBcolor:text},0.25);
- }
- .flex {
- display:flex;
- align-items:center;
- }
- .flex.space-between {
- justify-content:space-between;
- }
- :root {
- --TBH:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + ({select:top bar padding} * 2));
- --Scrollbar-Padding:13px;
- --Post-Padding:{select:post padding};
- --Photos-Spacing:{select:photoset spacing};
- --Posts-Avatar-Size:23px;
- --Captions-Gap:12px;
- --Blockquote-Border-Color:rgba({RGBcolor:text},0.7);
- --Paragraph-Margins:0.69em;
- --Heading-Margins:0.5em;
- --NPF-Image-Spacing:{select:photoset spacing};
- --NPF-Caption-Spacing:1em;
- --Audio-Post-Album-Image-Size:64px;
- --Audio-Post-PlayButton-Size:18px;
- --Audio-Post-PlayButton-Padding:8px;
- --Text-LineHeight:{select:post text line height};
- --Like-Button-Liked:#f75c64;
- /* music player opts */
- --Music-Player-Vinyl:{color:music player};
- --Vinyl-Icon-Size:17px;
- --Vinyl-Spin-Speed:2.69s;
- --Music-Controls:{color:music player};
- --Music-Controls-Size:12px;
- --Music-Title-Font-Size:9px;
- --Music-Title-Color:{color:music player};
- }
- .spotify_audio_player {
- height:80px!important;
- }
- /*--------- BACKGROUND/WALLPAPER ---------*/
- .wallpaper {
- position:fixed;
- top:0;left:0;
- width:100%;
- height:100%;
- background-image:url({image:background image});
- display:none;
- z-index:-69;
- }
- .wallpaper[type="bg-full"] {
- background-repeat:no-repeat;
- background-size:cover;
- background-position:center;
- }
- .wallpaper[type="bg-small"] {
- background-repeat:repeat;
- }
- .botgradient {
- position:fixed;
- bottom:0;left:0;
- width:100%;
- height:30vh;
- background:linear-gradient(to bottom, transparent, {color:background});
- opacity:0.8;
- z-index:-68;
- }
- .boxshad {
- position:fixed;
- top:0;left:0;
- width:100%;
- height:100%;
- box-shadow:inset 0 0 var(--TBH) {color:background};
- z-index:-68;
- }
- .sidegrad {
- position:fixed;
- top:0;right:0;
- width:calc({select:screen margin} + {select:post width} + ({select:post padding} * 2));
- height:100%;
- background:linear-gradient(to right, transparent, {color:background} 30%);
- z-index:-68;
- }
- /*--------- TOP BAR ---------*/
- .topbar {
- position:fixed;
- top:0;left:0;
- width:100%;
- display:table;
- background:rgba({RGBcolor:top bar background},{select:top bar transparency});
- padding:calc({select:top bar padding} / 1) 0;
- z-index:2;
- }
- .tbm {
- display:table-cell;
- vertical-align:middle;
- }
- .jhin-n-tonic {
- position:relative;
- height:100%;
- display:flex;
- align-items:center;
- }
- /*------ TOPLEFT THING ------*/
- .topleft {
- margin-top:1px;
- margin:-{select:top bar padding} 0;
- display:flex;
- align-items:center;
- margin-top:-{select:top bar padding};
- padding:{select:top bar padding} 0;
- padding-left:calc({select:top bar padding} + 5px);
- padding-right:calc({select:top bar padding} - 5px);
- }
- .chev {
- margin-left:-5px;
- filter:drop-shadow(1px 1px 1px rgba({RGBcolor:top bar background}, 0.420));
- width:{select:topleft arrow size};
- height:{select:topleft arrow size};
- }
- .chev svg {
- width:{select:topleft arrow size};
- height:{select:topleft arrow size};
- color:{color:topleft arrow};
- }
- .dothething {
- transform:scaleY(-1);
- }
- .chevhov, .dothething {
- transition:transform 0.69s ease-in-out; /* fade-in */
- }
- .wayback {
- transition-duration:1s; /* fade-out */
- }
- .icoe-a, .icoe-b, .icon-act {
- border-radius:100%;
- }
- .icoe-a {
- position:relative;
- margin-left:{select:topleft icon margin};
- margin-right:calc({select:topleft icon margin} * 1.269);
- width:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
- height:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
- border:.5px solid {color:topleft icon border};
- filter:drop-shadow(1px 1px 1px rgba({RGBcolor:top bar background}, 0.420));
- }
- .icoe-b {
- position:absolute;
- top:0;left:0;
- width:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
- height:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
- background:{color:top bar background};
- }
- .icon-act {
- position:absolute;
- margin-top:calc({select:topleft icon padding} + .5px);
- margin-left:calc({select:topleft icon padding} + .5px);
- width:{select:topleft icon size};
- height:{select:topleft icon size};
- background-image:url({image:topleft icon});
- background-position:center;
- background-size:cover;
- background-repeat:no-repeat;
- }
- .tl-text {
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- text-shadow:2px 3px 2px rgba({RGBcolor:top bar background},0.69);
- cursor:default;
- }
- .tl-top, .tl-bot {
- margin:2px 0;
- }
- .tl-top {
- font-size:{select:top title 1 size};
- color:{color:top title 1};
- letter-spacing:1.5px;
- word-spacing:-1px;
- }
- .tl-bot {
- font-size:{select:top title 2 size};
- color:{color:top title 2};
- letter-spacing:2px;
- word-spacing:-1.5px;
- }
- /*------ CUSTOM LINKS ------*/
- .linqhoe {
- position:absolute;
- right:0;margin-right:calc({select:top bar padding} - {select:top links spacing} + 0px);
- height:calc(100% + ({select:top bar padding} * 2));
- overflow:hidden;
- display:flex;
- align-items:center;
- }
- .linqhoe a {
- position:relative;
- display:block;
- padding:calc({select:top bar padding} * 2.5) calc({select:top links spacing} / 1);
- font-family:beaufort;
- font-weight:bold;
- font-size:{select:top links font size};
- text-transform:uppercase;
- letter-spacing:1.5px;
- color:{color:top links};
- text-shadow:2px 2px 3px rgba({RGBcolor:top bar background},0.69);
- }
- .linqhoe a:after {
- content:"";
- position:absolute;
- top:50%;left:50%;
- transform:translate(-50%,-50%);
- width:100%;
- height:100%;
- background:radial-gradient(circle at bottom, {color:top links glow} 0%, transparent 55%);
- opacity:0;
- z-index:-1;
- }
- .linqhoe a:hover:after {
- opacity:0.420;
- }
- /*--------- DESCRIPTION BOX ---------*/
- .descbox {
- position:fixed;
- top:0;padding-top:calc(var(--TBH) + {select:descbox margin});
- left:0;padding-left:{select:descbox margin};
- padding-right:{select:descbox padding};
- padding-bottom:{select:descbox padding};
- }
- .descbox[hover="dhov"] {
- visibility:hidden;
- }
- .desc {
- width:calc({select:descbox width} - ({select:descbox padding} * 2));
- padding:{select:descbox padding} calc({select:descbox padding} * 1.069);
- background:rgba({RGBcolor:descbox background},{select:descbox transparency});
- box-shadow:0 4px 30px rgba({RGBcolor:descbox background},0.25);
- /* description text styling: */
- font-family:libre franklin;
- letter-spacing:0.3px;
- font-size:{select:descbox font size};
- color:{color:descbox text};
- text-shadow:1px 2px 2px rgba({RGBcolor:descbox background},0.420);
- line-height:{select:descbox line height};
- text-align:{select:descbox text align};
- }
- .desc a {
- color:{color:descbox links};
- }
- .deschov {
- padding-top:calc(var(--TBH) / 2);
- cursor:default;
- opacity:0;
- visibility:visible!important;
- }
- .dix {
- padding-top:calc(var(--TBH) + {select:descbox margin});
- opacity:1;
- }
- .deschov, .dix {
- transition:all 0.69s ease-in-out; /* fade-in */
- }
- .okboomer {
- transition-duration:1s; /* fade-out */
- }
- /*------ CORNER TITLE, CORNER TEXT ------*/
- .cornerside {
- position:fixed;
- bottom:0;margin-bottom:calc(({select:bottom bar padding} * 2) + {select:customlinks size} + {select:corner text margin});
- left:0;margin-left:calc({select:corner text margin} * 1.2);
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- letter-spacing:0.069em;
- font-style:italic;
- text-shadow:2px 2px 3px rgba({RGBcolor:background},0.69);
- }
- .corner-title {
- font-size:{select:corner title size};
- color:{color:corner title};
- }
- .corner-sub {
- margin-top:{select:corner text spacing};
- margin-left:5px;
- font-size:{select:corner subtitle size};
- color:{color:corner subtitle};
- }
- /*--------- BOTTOM BAR ---------*/
- .botbar {
- position:fixed;
- bottom:0;left:0;
- width:100%;
- padding:{select:bottom bar padding} 0;
- background:rgba({RGBcolor:bottom bar background},{select:bottom bar transparency});
- z-index:2;
- }
- /* music player */
- {/block:ifshowmusicplayer}
- .sike {
- position:absolute;
- top:0;left:0;
- height:100%;
- display:flex;
- align-items:center;
- }
- .glenjams-06 {
- margin-left:calc({select:bottom bar padding} - 5px);
- padding:{select:bottom bar padding} 0;
- }
- .pasta {
- display:flex;
- align-items:center;
- }
- .vinyl-spin {
- animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
- -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
- -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
- -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
- }
- .vinyl-pause {
- animation-play-state:paused;
- -webkit-animation-play-state:paused;
- -moz-animation-play-state:paused;
- -o-animation-play-state:paused;
- }
- @-webkit-keyframes recordspin {
- from {
- -webkit-transform:rotate(0deg);
- -o-transform:rotate(0deg);
- transform:rotate(0deg);
- }
- to {
- -webkit-transform:rotate(360deg);
- -o-transform:rotate(360deg);
- transform:rotate(360deg);
- }
- }
- @keyframes recordspin {
- from {
- -ms-transform:rotate(0deg);
- -moz-transform:rotate(0deg);
- -webkit-transform:rotate(0deg);
- -o-transform:rotate(0deg);
- transform:rotate(0deg);
- }
- to {
- -ms-transform:rotate(360deg);
- -moz-transform:rotate(360deg);
- -webkit-transform:rotate(360deg);
- -o-transform:rotate(360deg);
- transform:rotate(360deg);
- }
- }
- .vinyl, .vinyl svg {
- width:var(--Vinyl-Icon-Size);
- height:var(--Vinyl-Icon-Size);
- }
- .music-controls {
- margin-left:10px;
- width:var(--Music-Controls-Size);
- overflow:hidden;
- cursor:pointer;
- }
- .music-controls svg {
- width:var(--Music-Controls-Size);
- height:var(--Music-Controls-Size);
- color:var(--Music-Controls);
- stroke-width:1.5px;
- }
- .pausee {display:none;}
- .beff {display:none;}
- .aff {display:block;}
- .klutch {
- position:relative;
- margin-left:8px;
- font-family:chakra petch;
- font-size:var(--Music-Title-Font-Size);
- text-transform:uppercase;
- letter-spacing:1px;
- color:var(--Music-Title-Color);
- height:100%;
- display:flex;
- align-items:center;
- cursor:default;
- line-height:160%;
- white-space:nowrap;
- }
- .klutch > * {
- position:absolute;
- padding:{select:bottom bar padding} 0;
- transition:opacity 0.269s ease-in-out;
- text-shadow:1px 1px 2px rgba({RGBcolor:bottom bar background},0.69);
- }
- .music-artist {
- opacity:0;
- }
- .glenjams-06:hover .music-title {
- {block:ifmusicartist}
- opacity:0;
- {/block:ifmusicartist}
- }
- .glenjams-06:hover .music-artist {
- opacity:1;
- }
- {/block:ifshowmusicplayer}
- /* custom links */
- .botlinks {
- margin:-{select:bottom bar padding} auto;
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .botlinks a {
- position:relative;
- display:block;
- padding:{select:bottom bar padding} {select:customlinks spacing};
- font-family:beaufort;
- font-weight:bold;
- font-size:{select:customlinks size};
- text-transform:uppercase;
- letter-spacing:1.5px;
- color:{color:customlinks};
- text-shadow:2px 2px 3px rgba({RGBcolor:bottom bar background},0.69);
- }
- .botlinks a:after {
- content:"";
- position:absolute;
- top:50%;left:50%;
- transform:translate(-50%,-50%);
- width:100%;
- height:100%;
- background:radial-gradient(circle at top, {color:customlinks glow} 0%, transparent 55%);
- opacity:0;
- z-index:-1;
- }
- .botlinks a:hover:after {
- opacity:0.420;
- }
- /*----- BACKTOTOP BUTTON -----*/
- .tangerine {
- position:absolute;
- top:0;right:0;
- margin-right:calc({select:bottom bar padding} * 0.69);
- height:100%;
- line-height:1;
- display:none;
- }
- .bork {
- display:flex;
- align-items:center;
- height:100%;
- cursor:pointer;
- text-shadow:1px 1px 2px rgba({RGBcolor:bottom bar background},0.69);
- }
- .bork span {
- display:block;
- margin-top:1px;
- margin-right:9px;
- font-family:chakra petch;
- font-size:9px;
- text-transform:uppercase;
- letter-spacing:1.5px;
- color:rgba({RGBcolor:customlinks},0.9);
- opacity:0;
- }
- .bork span, .tangerine:hover {
- transition:opacity 0.269s ease-in-out;
- }
- .tangerine:hover .bork span {
- opacity:1;
- }
- .bork i {
- font-size:15px;
- color:rgba({RGBcolor:customlinks},0.9);
- }
- /*------------ MAIN POSTS ------------*/
- .postscont {
- position:absolute;
- right:0;margin-right:{select:screen margin};
- top:0;margin-top:calc(var(--TBH) + {select:screen margin});
- min-width:calc({select:post width} + ({select:post padding} * 2));
- /* post text styling: */
- font-family:libre franklin;
- font-size:{select:post font size};
- letter-spacing:.3px;
- color:{color:text};
- text-shadow:1px 2px 2px rgba({RGBcolor:post},0.420);
- line-height:{select:post text line height};
- }
- .posts {
- position:relative;
- margin-bottom:{select:post spacing};
- padding:{select:post padding};
- background:rgba({RGBcolor:post},{select:post transparency});
- width:{select:post width};
- overflow:hidden;
- }
- .posts:last-of-type {
- {block:IndexPage}
- margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
- {/block:IndexPage}
- }
- .posts img, .lightbox-image, #tumblr_lightbox_center_image {
- opacity:{select:semitransparent images};
- }
- /*--------- LIGHTBOX BS ---------*/
- .vignette, #vignette {
- opacity:0;
- }
- .tmblr-lightbox, #tumblr_lightbox {
- background:rgba({RGBcolor:background},0.69)!important;
- box-shadow:inset 0 0 69px rgba({RGBcolor:background},0.69)!important;
- }
- .lightbox-image, #tumblr_lightbox_center_image {
- box-shadow:0 4px 30px rgba({RGBcolor:background},0.69)!important;
- border-radius:0px!important;
- }
- /*------------ REBLOG STYLING ------------*/
- .caption {
- margin-top:var(--NPF-Caption-Spacing);
- }
- .comment_container {
- {block:ifreblogseparators}
- padding:calc(var(--Captions-Gap) / 2) 0;
- border-bottom:1px solid {color:reblog separators};
- {block:iffullwidthreblogseparators}
- margin:0 -{select:post padding};
- padding-left:{select:post padding};
- padding-right:{select:post padding};
- {/block:iffullwidthreblogseparators}
- {/block:ifreblogseparators}
- {block:ifnotreblogseparators}
- padding:calc(var(--Captions-Gap) / 2.5) 0;
- {/block:ifnotreblogseparators}
- }
- .comment_container:first-of-type, .ccfirst {
- padding-top:0px;
- border-top:0px solid transparent;
- }
- .comment_container:last-of-type, .cclast {
- padding-bottom:0px;
- border-bottom:0px solid transparent;
- }
- .commenter {
- margin:0.69em 0;
- display:flex;
- align-items:center;
- }
- .sfr {position:relative}
- .commenter img {
- width:var(--Posts-Avatar-Size);
- height:var(--Posts-Avatar-Size);
- border-radius:100%;
- border:.5px solid rgba({RGBcolor:reblogger},0.5);
- }
- .sfr:before {
- content:"";
- position:absolute;
- top:0;left:0;
- width:100%;
- height:100%;
- border-radius:100%;
- background:linear-gradient(to bottom, transparent, transparent 69%, rgba({RGBcolor:post},0.269) 100%);
- }
- .sfr:after {
- content:"";
- position:absolute;
- top:0;left:0;
- width:100%;
- height:100%;
- border-radius:100%;
- box-shadow:inset 0 0 4px {color:post};
- z-index:1;
- }
- .commenter a, a.tumblr_blog, .asker_ .commenter {
- font-family:beaufort;
- font-weight:bold;
- font-size:calc({select:post font size} - 2px);
- text-transform:uppercase;
- letter-spacing:1.5px;
- color:{color:reblogger};
- }
- .commenter a {
- padding-left:7px;
- }
- .nosrc {
- display:none;
- margin-top:0;
- }
- /* note: may need to remove the ">" if inconsistencies occur */
- .comment > :last-child:not([data-npf*='audio'], .spotify_audio_player, .soundcloud_audio_player){
- margin-bottom:{select:post padding};
- }
- /*----- TEXT STUFF -----*/
- .allcaps, a.read_more {
- font-family:beaufort;
- font-weight:bold;
- font-size:calc({select:post font size} - 1px);
- text-transform:uppercase;
- letter-spacing:1.5px;
- }
- a.read_more {
- display:block;
- text-align:center;
- }
- .posts blockquote {
- margin:calc(var(--Posts-Avatar-Size) / 2);
- padding-left:calc(var(--Posts-Avatar-Size) / 2);
- border-left:1px solid var(--Blockquote-Border-Color);
- }
- /*----- LINK POSTS -----*/
- .linkpath {
- color:{color:reblogger}!important;
- }
- .linkdesc {
- margin-top:calc(var(--Heading-Margins) * 1.269);
- padding:0.69em 0.8em;
- border:1px solid rgba({RGBcolor:text},0.169);
- background:rgba({RGBcolor:post},0.25);
- border-radius:5px;
- }
- .genlinkbase {
- margin-top:calc(var(--Paragraph-Margins) / 2);
- font-family:chakra petch;
- font-size:calc({select:post font size} - 2.5px);
- text-transform:uppercase;
- letter-spacing:1px;
- }
- .genlinkbase .et {
- padding-right:1px;
- }
- .linkcapt {
- margin-top:var(--Paragraph-Margins);
- }
- /*----- QUOTE POSTS -----*/
- .quote-words {
- padding:0 1.269em;
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- font-size:calc({select:post font size} + 1px);
- letter-spacing:1.5px;
- line-height:calc({select:post text line height} * 1.2);
- text-align:center;
- }
- .quote-source {
- margin-top:var(--Heading-Margins);
- text-align:center;
- }
- /*----- PHOTO POSTS -----*/
- .photopic {
- width:100%;
- cursor:pointer;
- }
- .posts img {
- max-width:100%;
- }
- /*----- PHOTOSETS -----*/
- [photoset-layout] {
- grid-gap:{select:photoset spacing};
- }
- [photoset-layout] div {
- cursor:pointer;
- }
- /*----- CHAT POSTS -----*/
- .chatholder {
- }
- .chat_label {
- margin-right:4px;
- font-weight:bold;
- }
- .chat_content {
- }
- /*----- ASK POSTS -----*/
- .askhold {
- }
- .askhold span {
- display:block;
- margin-left:4px;
- margin-top:-2px;
- font-family:libre franklin;
- font-weight:normal;
- letter-spacing:.3px;
- font-size:{select:post font size};
- text-transform:none;
- color:{color:text};
- }
- .asker_ {
- padding-bottom:0;
- border-bottom:0px solid transparent;
- }
- .asker_ .commenter {
- {block:ifreblogseparators}
- margin-top:;
- {/block:ifreblogseparators}
- {block:ifnotreblogseparators}
- margin-top:0;
- {/block:ifnotreblogseparators}
- justify-content:center;
- }
- .asker_ .sfr {
- margin-bottom:calc(0.069em / -2);
- }
- .asker_ .commenter img {
- width:calc(var(--Posts-Avatar-Size) + 3px);
- height:calc(var(--Posts-Avatar-Size) + 3px);
- }
- .asker_ .commenter a {
- padding-left:0;
- }
- .question_text {
- padding:0.69em 0.8em;
- border:1px solid rgba({RGBcolor:text},0.2);
- background:rgba({RGBcolor:post},0.420);
- border-radius:5px;
- }
- .answer_text {
- }
- /*----- AUDIO -----*/
- .tumblr_audio_player[width] {
- width:100%!important;
- height:0!important;
- }
- .audiocont {
- position:absolute;
- display:none;
- overflow:hidden;
- width:0!important;
- height:0!important;
- opacity:0;
- }
- .alcove {
- position:relative;
- width:var(--Audio-Post-Album-Image-Size);
- height:var(--Audio-Post-Album-Image-Size);
- }
- .strawberries {
- position:absolute;
- top:0;margin-top:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
- left:0;margin-left:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
- width:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
- height:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
- }
- .summer {
- border:1px solid rgba({RGBcolor:text},0.420);
- width:100%;
- height:100%;
- background:{color:post};
- box-sizing:border-box;
- border-radius:100%;
- display:flex;
- align-items:center;
- justify-content:center;
- line-height:1em;
- cursor:pointer;
- user-select:none;
- }
- .splay {
- margin-top:2px;
- }
- .splay i, .spause i {
- font-size:var(--Audio-Post-PlayButton-Size);
- color:{color:text};
- }
- .spause {
- display:none;
- margin-top:2px;
- }
- .spause i {
- font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
- }
- .a-lbum-img {
- width:100%;
- height:100%;
- border-radius:3px;
- visibility:hidden;
- }
- .vingt, .npf-audio-image-shadow {
- position:absolute;
- top:0;left:0;
- border-radius:3px;
- box-shadow:inset 0 0 15px rgba({RGBcolor:post},0.69);
- }
- .vingt {
- width:100%;
- height:100%;
- }
- .tin {
- width:calc(100% - var(--Audio-Post-Album-Image-Size));
- height:var(--Audio-Post-Album-Image-Size);
- }
- .trackinfo {
- margin-left:14px;
- }
- .t-name, .npf-audio-title {
- font-family:beaufort;
- font-weight:bold;
- font-size:calc({select:post font size} - .5px);
- text-transform:uppercase;
- letter-spacing:1.5px;
- }
- .dongload {
- text-transform:initial!important;
- }
- .dongload svg {
- width:calc({select:post font size} + 4px);
- height:calc({select:post font size} + 4px);
- stroke:{color:text};
- stroke-width:1.5px;
- pointer-events:none;
- }
- /*----- VIDEOS -----*/
- video {
- display:block;
- outline:none;
- cursor:default;
- width:100%;
- }
- /*----- TAGS -----*/
- .tagcont {
- {block:IndexPage}
- {block:iftagsonclick}
- display:none;
- padding-bottom:{select:post padding};
- margin:-3px 0;
- {/block:iftagsonclick}
- {/block:IndexPage}
- }
- .tagholder {
- display:flex;
- flex-wrap:wrap;
- justify-content:flex-end;
- text-align:right;
- margin:0 -5px;
- font-family:k2d;
- font-size:calc({select:post font size} - 3px);
- text-transform:uppercase;
- letter-spacing:1px;
- }
- .tagholder a {
- display:block;
- margin:0 3.5px;
- color:{color:tags};
- }
- /*------------ PERMALINK ------------*/
- .permarow {
- display:flex;
- align-items:center;
- justify-content:space-between;
- margin-bottom:-{select:post padding};
- margin-left:-{select:post padding};
- width:calc(100% + ({select:post padding} * 2));
- padding:calc({select:permalink padding} * 0.8) 0;
- background:rgba({RGBcolor:permalink background},{select:post transparency});
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- {block:IndexPage}
- font-size:calc({select:post font size} - 2px);
- {/block:IndexPage}
- {block:PermalinkPage}
- font-size:calc({select:post font size} - 2.5px);
- {/block:PermalinkPage}
- letter-spacing:1.5px;
- text-shadow:1px 2px 2px rgba({RGBcolor:permalink background},0.420);
- }
- .posts, .permarow {
- border-radius:0 0 5px 5px;
- }
- .permarow a {
- color:{color:permalink};
- }
- .permaleft {
- flex:1;
- margin-left:{select:permalink padding};
- }
- .permaright {
- margin-right:{select:permalink padding};
- }
- .permaright, .les-controls {
- display:flex;
- align-items:center;
- }
- .les-controls > a {
- display:block;
- margin-right:{select:post buttons spacing};
- width:{select:post buttons size};
- height:{select:post buttons size};
- }
- .les-controls svg {
- display:block;
- width:100%;
- height:100%;
- fill:{color:post buttons};
- }
- .permaright a {margin-right:{select:post buttons spacing};}
- .permaright a:last-of-type {margin-right:0;}
- .viewtags {
- cursor:help;
- }
- .viewtags svg {
- width:{select:post buttons size};
- height:{select:post buttons size};
- color:{color:post buttons};
- stroke-width:1.5px;
- }
- .retweet svg {
- transform:scaleX(-1);
- }
- .likecont {
- position:relative;
- }
- .like_button {
- position:absolute;
- width:100%;
- height:100%;
- }
- .like_button iframe {
- position:absolute;
- top:0;left:0;
- width:100%;
- height:100%;
- opacity:0;
- z-index:2;
- }
- .like_button.liked + .heart svg {
- fill:var(--Like-Button-Liked)!important;
- }
- /*----- POST NOTES -----*/
- .notescont {
- width:calc({select:post width} + ({select:post padding} * 2));
- margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
- }
- ol.notes {
- margin:0;
- padding:0 {select:post padding};
- list-style:none;
- }
- ol.notes .avatar {
- display:none;
- }
- ol.notes li {
- margin-bottom:1.25em;
- padding:0;
- }
- ol.notes blockquote {
- margin:1em;
- padding-left:1em;
- border-left:var(--Blockquote-Border-Color);
- }
- .more_notes_link_container {
- margin-top:{select:post padding};
- }
- ol.notes a, .more_notes_link {
- font-family:beaufort;
- font-weight:bold;
- text-transform:uppercase;
- font-size:calc({select:post font size} - 2px);
- letter-spacing:1.5px;
- color:{color:reblogger};
- }
- .more_notes_link {
- color:{color:link}!important;
- }
- /*------- PAGINATION -------*/
- .botpagi {
- margin-top:calc(({select:screen margin} * -0.8) + {select:post spacing} + {select:post padding});
- margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
- }
- .botpagi span {
- padding:0 4px;
- font-family:beaufort;
- font-size:calc({select:post font size} - 1px);
- font-weight:bold;
- text-transform:uppercase;
- letter-spacing:1.5px;
- color:{color:text};
- }
- .botpagi svg {
- width:calc({select:post font size} + 2px);
- height:calc({select:post font size} + 2px);
- color:{color:text};
- }
- .pn {
- margin-left:auto;
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <!----- BACKGROUND IMAGE ----->
- <div class="wallpaper" type="{select:background size}"></div>
- {block:ifbackgroundgradient}
- <div class="botgradient"></div>
- <div class="boxshad"></div>
- <div class="sidegrad"></div>
- {/block:ifbackgroundgradient}
- <!----- TOP BAR ----->
- <div class="topbar">
- <div class="tbm">
- <div class="jhin-n-tonic">
- <div class="topleft">
- <div class="chev">
- <i data-feather="chevron-down"></i>
- </div>
- <div class="icoe-a">
- <div class="icoe-b">
- <div class="icon-act"></div>
- </div>
- </div>
- <div class="tl-text">
- <div class="tl-top">
- {block:iftoptitle1}
- {text:top title 1}
- {/block:iftoptitle1}
- {block:ifnottoptitle1}
- {Name}
- {/block:ifnottoptitle1}
- </div>
- <div class="tl-bot">
- {block:iftoptitle2}
- {text:top title 2}
- {/block:iftoptitle2}
- {block:ifnottoptitle2}
- {Title}
- {/block:ifnottoptitle2}
- </div>
- </div>
- </div><!--topleft-->
- <div class="linqhoe">
- <a href="/">home</a>
- <a href="/ask" title="{AskLabel}">ask</a>
- <a href="/submit" title="{SubmitLabel}">submit</a>
- <a href="/archive">archive</a>
- <a href="//glenthemes.tumblr.com" title="theme by glenthemes">theme</a>
- </div><!--end toplinks-->
- </div><!--jhin-n-tonic-->
- </div><!--tbm-->
- </div><!--end topbar-->
- <!----- DESCRIPTION BOX ----->
- {block:Description}
- <div class="descbox" hover="{select:descbox hover}">
- <div class="desc">
- {Description}
- </div><!--end description-->
- </div><!--end description box-->
- {/block:Description}
- <!----- BOTTOM LEFT CORNER TEXT ----->
- <div class="cornerside">
- <div class="corner-title">{text:corner title}</div>
- <div class="corner-sub">{text:corner subtitle}</div>
- </div>
- <!----- BOTTOM BAR ----->
- <div class="botbar">
- {block:ifshowmusicplayer}
- <div class="sike">
- <div class="glenjams-06">
- <div class="pasta">
- <div class="vinyl"></div>
- <div class="music-controls">
- <div class="playy"><i data-feather="play"></i></div>
- <div class="pausee"><i data-feather="pause"></i></div>
- </div>
- <div class="klutch">
- <div class="music-title">{text:music name}</div>
- <div class="music-artist">{text:music artist}</div>
- </div>
- <audio id="audio" src="{text:music file mp3}" type="audio"></audio>
- </div><!--pasta-->
- </div><!--glenjams-06-->
- </div><!--sike-->
- {/block:ifshowmusicplayer}
- <div class="botlinks">
- {block:ifcustomlink1name}
- <a href="{text:customlink 1 URL}">{text:customlink 1 name}</a>
- {/block:ifcustomlink1name}
- {block:ifcustomlink2name}
- <a href="{text:customlink 2 URL}">{text:customlink 2 name}</a>
- {/block:ifcustomlink2name}
- {block:ifcustomlink3name}
- <a href="{text:customlink 3 URL}">{text:customlink 3 name}</a>
- {/block:ifcustomlink3name}
- {block:ifcustomlink4name}
- <a href="{text:customlink 4 URL}">{text:customlink 4 name}</a>
- {/block:ifcustomlink4name}
- {block:ifcustomlink5name}
- <a href="{text:customlink 5 URL}">{text:customlink 5 name}</a>
- {/block:ifcustomlink5name}
- {block:ifcustomlink6name}
- <a href="{text:customlink 6 URL}">{text:customlink 6 name}</a>
- {/block:ifcustomlink6name}
- </div><!--end customlinks-->
- <div class="tangerine">
- <div class="bork">
- <span>scroll to top</span>
- <i class="material-icons">arrow_upward</i>
- </div>
- </div>
- </div><!--botbar-->
- <!----- MAIN POSTS ----->
- <div class="postscont">
- {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <div class="posts {block:ifreblogseparators}oui{/block:ifreblogseparators}" id="{PostID}" post-type="{PostType}">
- <!------ POST TITLE ------>
- {block:Title}
- <h1 href="{Permalink}" class="title">{Title}</h1>
- {/block:Title}
- <!------ END POST TITLE ------>
- {block:RebloggedFrom}
- <div class="commenter nosrc">
- <img src="{ReblogRootPortraitURL-64}">
- <a href="{ReblogRootURL}">{ReblogRootName}</a>
- </div>
- {/block:RebloggedFrom}
- <!------ TEXT POSTS ------>
- {block:Text}
- <div class="body">
- {block:NotReblog}{Body}{/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter source-head">
- <img src="{PortraitURL-64}">
- <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
- </div>
- <div class="comment">{Body}</div>
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div>
- {/block:Text}
- <!------ END TEXT POSTS ------>
- <!------ SINGLE PHOTO ------>
- {block:Photo}
- <a class="single" onclick="Tumblr.Lightbox.init([{ width:{PhotoWidth-HighRes}, height:{PhotoHeight-HighRes}, low_res:'{PhotoURL-500}', high_res:'{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img class="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
- {/block:Photo}
- <!------ END SINGLE PHOTO ------>
- <!------ PHOTOSETS ------>
- {block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
- <!------ END PHOTOSETS ------>
- <!------ QUOTE POSTS ------>
- {block:Quote}
- <div class="quote-words">{Quote}</div>
- {block:Source}<div class="quote-source">— {Source}</div>{/block:Source}
- {/block:Quote}
- <!------ END QUOTE POSTS ------>
- <!------ LINK POSTS ------>
- {block:Link}
- <a href="{URL}" class="linkpath" {Target}>{Name} »</a>
- {block:Excerpt}
- <div class="linkdesc">
- {Excerpt}
- <div class="genlinkbase">{Host}</div>
- </div>
- {/block:Excerpt}
- {block:Description}
- <div class="linkcapt">
- {block:NotReblog}{Description}{/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter">
- <img src="{PortraitURL-64}">
- <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
- </div>
- <div class="comment">{Body}</div>
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div>
- {/block:Description}
- {/block:Link}
- <!------ END LINK POSTS ------>
- <!------ CHAT POSTS ------>
- {block:Chat}
- <div class="chatholder">
- {block:Lines}
- {block:Label}
- <span class="chat_label">{Label}</span>
- {/block:Label}
- <span class="chat_content">{Line}</span>
- {/block:Lines}
- </div>
- {/block:Chat}
- <!------ END CHAT ------>
- <!------ AUDIO POSTS ------>
- {block:Audio}
- <div class="flex">
- <div class="audiocont">
- {AudioEmbed}
- </div>
- <div class="alcove">
- <img class="a-lbum-img">
- <div class="strawberries">
- <div class="summer">
- <div class="splay">
- <i class="material-icons">play_arrow</i>
- </div>
- <div class="spause">
- <i class="material-icons">pause</i>
- </div>
- </div><!--summer-->
- </div>
- </div>
- <div class="tin flex space-between">
- <div class="trackinfo">
- {block:TrackName}
- <div class="t-name">{TrackName}</div>
- {/block:TrackName}
- {block:Artist}
- <div class="t-artist">{Artist}</div>
- {/block:Artist}
- </div><!--trackinfo-->
- <a class="dongload" title="download">
- <i data-feather="download"></i>
- </a>
- </div><!--flex-->
- </div><!--oofy-->
- {/block:Audio}
- <!------ END AUDIO ------>
- <!------ VIDEO POSTS ------>
- {block:Video}<div class="video">{Video-500}</div>{/block:Video}
- <!------ END VIDEOS ------>
- <!------ ANSWER POSTS ------>
- {block:Answer}
- <div class="comment_container askhold asker_">
- <div class="commenter">
- <img src="{AskerPortraitURL-48}">
- </div>
- <div class="commenter">
- {Asker}<span>asked:</span>
- </div>
- <div class="question_text">{Question}</div>
- </div>
- {block:Answerer}
- <div class="comment_container askhold answerer_">
- <div class="commenter">
- <img src="{AnswererPortraitURL-48}">
- {Answerer}<span>answered:</span>
- </div>
- <div class="answer_text body">{Answer}</div>
- </div>
- {block:Reblogs}
- <div class="comment_container">
- <div class="replier commenter">
- <img src="{PortraitURL-64}">
- <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
- </div>
- <div class="reply">{Body}</div>
- </div>
- {/block:Reblogs}
- {/block:Answerer}
- {block:NotReblog}
- <div class="comment_container">
- <div class="answerer commenter">
- <img src="{PortraitURL-48}">
- <a href="{Permalink}">{Name}</a>
- </div><!--answerer-->
- <div class="answer_text">{Answer}</div>
- </div><!--answer-container-->
- {/block:NotReblog}
- {/block:Answer}
- <!------ END ANSWER ------>
- {block:Caption}
- <div class="caption">
- {block:NotReblog}{Caption}{/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="comment_container">
- <div class="commenter">
- <img src="{PortraitURL-64}">
- <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
- </div><!--commenter-->
- <div class="comment">{Body}</div>
- </div><!--comment-container-->
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div><!--caption-->
- {/block:Caption}
- {block:HasTags}
- <div class="tagcont">
- <div class="tagholder">
- {block:Tags}
- <a href="{TagURL}">#{Tag}</a>
- {/block:Tags}
- </div>
- </div>
- {/block:HasTags}
- {block:Date}
- <div class="permarow">
- <div class="permaleft">
- {block:IndexPage}
- <a href="{Permalink}">{NoteCountWithLabel}</a>
- {/block:IndexPage}
- {block:PermalinkPage}
- {block:NotReblog}Posted{/block:NotReblog}
- {block:RebloggedFrom}Reblogged{/block:RebloggedFrom}
- on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}
- · {NoteCountWithLabel}
- {/block:PermalinkPage}
- </div>
- <div class="permaright">
- {block:IndexPage}
- <div class="les-controls flex">
- {block:iftagsonclick}
- {block:HasTags}
- <a class="viewtags">
- <i data-feather="hash"></i>
- </a>
- {/block:HasTags}
- {/block:iftagsonclick}
- <a href="{ReblogURL}" target="_blank">
- <span class="retweet"></span>
- </a>
- <a class="likecont like">
- {LikeButton}
- <span class="heart"></span>
- </a>
- </div>
- {/block:IndexPage}
- {block:PermalinkPage}
- {block:RebloggedFrom}
- <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
- <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
- {/block:RebloggedFrom}
- {/block:PermalinkPage}
- </div>
- </div><!--permarow-->
- {/block:Date}
- </div><!--posts-->
- {block:PostNotes}
- <div class="notescont">
- {PostNotes}
- </div>
- {/block:PostNotes}
- {/block:Posts}
- <!------- PAGINATION ------->
- {block:Pagination}
- <div class="botpagi flex space-between">
- {block:PreviousPage}
- <a class="flex" href="{PreviousPage}">
- <i data-feather="chevron-left"></i>
- <span>previous</span>
- </a>
- {/block:PreviousPage}
- {block:NextPage}
- <a class="flex pn" href="{NextPage}">
- <span>next</span>
- <i data-feather="chevron-right"></i>
- </a>
- {/block:NextPage}
- </div><!--botpagi-->
- {/block:Pagination}
- </div><!--postscont-->
- <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
- <script>
- feather.replace();
- </script>
- <script>
- $(document).ready(function(){
- $('img[src*="media.tumblr.com"]').each(function(){
- var newsrc = $(this).attr('src').replace('gifv','gif');
- $(this).attr('src', newsrc);
- });
- $('a[href*="media.tumblr.com"]').each(function(){
- var newhref = $(this).attr('href').replace('gifv','gif');
- $(this).attr('href', newhref);
- });
- $('div[data-lowres*="media.tumblr.com').each(function(){
- var newdata = $(this).attr('data-lowres').replace('gifv','gif');
- $(this).attr('data-lowres', newdata);
- });
- $('div[data-highres*="media.tumblr.com').each(function(){
- var newdata = $(this).attr('data-highres').replace('gifv','gif');
- $(this).attr('data-highres', newdata);
- });
- });
- </script>
- </body>
- </html>
Advertisement