themes/39-Clotho

4954 lines
182 KiB
Plaintext
Raw Permalink Normal View History

2024-03-16 20:26:22 +00:00
<!-------------------------------------------------------------------
Theme [39]: Clotho
Made by glenthemes
Release date: 2024/03/14
Last updated: 2024/03/14
「 THEME INFO. 」
❃ Post: glenthemes.tumblr.com/post/744991449083412480
❃ Preview: glenthpvs.tumblr.com/clotho
❃ Code: glen-themes.gitlab.io/thms/39/clotho
「 HOW TO USE. 」
dub.sh/clotho-guide
「 TERMS OF USE. 」
1) Do not remove the theme credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and. use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
「 CREDITS. 」
(人^▽') glencredits.tumblr.com/clotho
-------------------------------------------------------------------->
<!DOCTYPE html>
<html
lang="en"
tc-bhv="{select:tumblr controls}"
tc-col="{select:tumblr controls color}"
bg-size="{select:background image size}"
prepend-media="{select:everything inside borders}"
reblog-left-border="{select:posts left border}"
reblog-dividers="{select:reblog dividers}"
font="{select:font}"
heading-font="{select:heading font}"
caps-font="{select:uppercase font}"
rounded-corners="{select:rounded corners}"
infscroll="{select:infinite scroll}"
{block:IndexPage}
page="index-page"
{/block:IndexPage}
{block:PermalinkPage}
page="permalink-page"
{/block:PermalinkPage}
username="{Name}"
>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
{Title}
{block:PostSummary} ⋮ {PostSummary}{/block:PostSummary}
{block:TagPage} ⋮ #{Tag}{/block:TagPage}
{block:SearchPage} ⋮ “{SearchQuery}” {lang:SearchResultCount results}{/block:SearchPage}
</title>
<link rel="shortcut icon" href="{Favicon}">
{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="{AccentColor}">
<!------- FONTS ------->
<script src="//cdn.jsdelivr.net/gh/ht-devx/addGoogleFonts/addGoogleFonts.min.js"></script>
<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<script>
addGoogleFonts("Rethink Sans, Figtree, Karla, Lexend, Inter, Onest, Libre Franklin, Readex Pro, Averia Serif Libre, Hahmlet, Domine, Vollkorn");
</script>
<style include-fonts>
@font-face { font-family: "Unageo"; src: url("//cdn.jsdelivr.net/gh/RichardSepsi/Unageo/fonts/variable/Unageo[wght,ital].ttf"); }
@font-face { font-family: "Wanted Sans"; src: url("//cdn.jsdelivr.net/gh/wanteddev/wanted-sans/packages/wanted-sans/fonts/variable/WantedSansVariable.ttf"); }
@font-face { font-family: "Geist Sans"; src: url("//cdn.jsdelivr.net/gh/vercel/geist-font/packages/next/dist/fonts/geist-sans/Geist-Variable.woff2"); }
@font-face { font-family: "Geist Mono"; src: url("//cdn.jsdelivr.net/gh/vercel/geist-font/packages/next/dist/fonts/geist-mono/GeistMono-Variable.woff2"); }
</style>
<!------- ICON LIBRARIES ------->
<link href="//eva-icons.gitlab.io/i/icons.css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/gh/Richard9394/MingCute@2.92/fonts/MingCute.css" rel="stylesheet">
<link href="//unpkg.com/@phosphor-icons/web@latest/src/bold/style.css" rel="stylesheet" crossorigin>
<link href="//hugeicons.gitlab.io/i/icons.css" rel="stylesheet">
<link href="//ios-17-logos.gitlab.io/i/icons.css" rel="stylesheet">
<!------- SCRIPTS ------->
<script src="//static.tumblr.com/2pnwama/uLNs0r1rq/roots.js"></script>
<script src="//glen-iframes.gitlab.io/i/use.js"></script>
<link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet" crossorigin>
<script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
<script src="//unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="//unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="//unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>
<link href="//vid_yo.gitlab.io/o/core.css" rel="stylesheet">
<script src="//vid_yo.gitlab.io/o/init.js"></script>
<script src="//static.tumblr.com/pasdkqg/YrJsa7cu1/timeago.min.js"></script>
<script src="//glen-themes.gitlab.io/thms/39/thread-of-fate.js"></script>
<link href="//glen-themes.gitlab.io/thms/39/moirai.css" rel="stylesheet">
{block:Options}
<!--
NO NEED TO TOUCH ANYTHING HERE,
CLICK THE BACK ARROW TO EDIT YOUR OPTIONS.
--->
<!-- divider: images -->
<meta name="image:&#x1F4F8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D408;&#x1D40C;&#x1D400;&#x1D406;&#x1D404;&#x1D412;&#x200A;:" content="">
<meta name="image:background image" content="//static.tumblr.com/gtjt4bo/bHqs9wndb/18_f.png">
<meta name="image:header icon" content="//static.tumblr.com/gtjt4bo/ECrsa5qlr/zxxp31m_e4.png">
<!-- divider: main colors -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40C;&#x1D400;&#x1D408;&#x1D40D; &#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;&#x200A;:" content="">
<meta name="color:background" content="#fff">
<meta name="color:borders" content="#f0f0f0">
<meta name="color:container BG" content="#fff">
<!-- divider: top nav links -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D40E;&#x1D40F; &#x1D40D;&#x1D400;&#x1D415; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#x200A;:" content="">
<meta name="color:nav links" content="#6f7580">
<meta name="color:nav links hover text" content="#575a65">
<meta name="color:nav links underline" content="#3e454b">
<!-- divider: header text -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
<meta name="color:header title" content="#6f7580">
<meta name="color:header username" content="#9ba0a8">
<meta name="color:header subtitle BG" content="#f8f9fb">
<meta name="color:header subtitle text" content="#575a65">
<!-- divider: description -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D403;&#x1D404;&#x1D412;&#x1D402;&#x1D411;&#x1D408;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#x200A;:" content="">
<meta name="color:desc text" content="#6f7580">
<meta name="color:desc bold" content="#707084">
<meta name="color:desc italic" content="#707084">
<meta name="color:desc links" content="#6d9cd1">
<meta name="color:desc links underline" content="#e4e7f5">
<!-- divider: icon / avatar -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D408;&#x1D402;&#x1D40E;&#x1D40D; / &#x1D400;&#x1D415;&#x1D400;&#x1D413;&#x1D400;&#x1D411;&#x200A;:" content="">
<meta name="color:header icon BG" content="#fff">
<meta name="color:header icon border" content="#f0f0f0">
<!-- divider: status -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D413;&#x1D400;&#x1D413;&#x1D414;&#x1D412;&#x200A;:" content="">
<meta name="color:header status icon" content="#6f7580">
<meta name="color:header status text" content="#6f7580">
<!-- divider: socials -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D40E;&#x1D402;&#x1D408;&#x1D400;&#x1D40B;&#x1D412;&#x200A;:" content="">
<meta name="color:social links icon" content="#6f7580">
<meta name="color:social links hover icon BG" content="#f5f6f7">
<meta name="color:social links hover icon" content="#575a65">
<!-- divider: custom links -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#x200A;:" content="">
<meta name="color:custom links" content="#6f7580">
<meta name="color:custom links hover text" content="#575a65">
<meta name="color:custom links underline" content="#4b5057">
<!-- divider: main text -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40C;&#x1D400;&#x1D408;&#x1D40D; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
<meta name="color:text" content="#6f7580">
<meta name="color:bold" content="#707084">
<meta name="color:italic" content="#707084">
<meta name="color:links" content="#6d9cd1">
<meta name="color:links underline" content="#e4e7f5">
<meta name="color:posts usernames" content="#3f424a">
<meta name="color:caption left border" content="#e5e5e5">
<meta name="color:blockquote border" content="#eee">
<!-- divider: special text -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D412;&#x1D40F;&#x1D404;&#x1D402;&#x1D408;&#x1D400;&#x1D40B; &#x1D413;&#x1D404;&#x1D417;&#x1D413;&#x200A;:" content="">
<meta name="color:posts accent borders" content="#f0f0f0">
<meta name="color:posts accent BG" content="#f8f9fb">
<meta name="color:posts accent text" content="#575a65">
<!-- divider: posts menu -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412; &#x1D40C;&#x1D404;&#x1D40D;&#x1D414;&#x200A;:" content="">
<meta name="color:posts menu BUTTON dots" content="#6f7580">
<meta name="color:posts menu BUTTON hover BG" content="#f8f9fb">
<meta name="color:posts menu BUTTON hover dots" content="#575a65">
<meta name="color:posts menu border" content="#f0f0f0">
<meta name="color:posts menu BG" content="#fff">
<meta name="color:posts menu text" content="#3f424a">
<meta name="color:posts menu hover BG" content="#f8f9fb">
<meta name="color:posts menu hover text" content="#3f424a">
<!-- divider: buttons -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D401;&#x1D414;&#x1D413;&#x1D413;&#x1D40E;&#x1D40D;&#x1D412;&#x200A;:" content="">
<meta name="color:buttons BG" content="#3f424a">
<meta name="color:buttons icons" content="#eee">
<!-- divider: tags -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D400;&#x1D406;&#x1D412;&#x200A;:" content="">
<meta name="color:tags" content="#6f7580">
<meta name="color:tags hover" content="#4b4e57">
<!-- divider: posts info -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412; &#x1D408;&#x1D40D;&#x1D405;&#x1D40E;&#x200A;:" content="">
<meta name="color:posts info icons" content="#575a65">
<meta name="color:posts info icons hover BG" content="#f8f9fb">
<meta name="color:posts info icons hover" content="#575a65">
<meta name="color:liked button" content="#92a8d1">
<meta name="color:notes" content="#575a65">
<meta name="color:date posted" content="#9297a0">
<meta name="color:source" content="#9297a0">
<!-- divider: text highlight -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D404;&#x1D417;&#x1D413; &#x1D407;&#x1D408;&#x1D406;&#x1D407;&#x1D40B;&#x1D408;&#x1D406;&#x1D407;&#x1D413;&#x200A;:" content="">
<meta name="color:text highlight BG" content="#b4d7ff">
<meta name="color:text highlighted" content="#6f7580">
<!-- divider: tooltips -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D40E;&#x1D40E;&#x1D40B;&#x1D413;&#x1D408;&#x1D40F;&#x1D412;&#x200A;:" content="">
<meta name="color:hover text border" content="#f0f0f0">
<meta name="color:hover text BG" content="#fcfcfd">
<meta name="color:hover text" content="#636673">
<!-- divider: other colors -->
<meta name="color:&#x1F3A8; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40E;&#x1D413;&#x1D407;&#x1D404;&#x1D411; &#x1D402;&#x1D40E;&#x1D40B;&#x1D40E;&#x1D411;&#x1D412;&#x200A;:" content="">
<meta name="color:pagination" content="#3f424a">
<meta name="color:loading spinner" content="#3f424a">
<meta name="color:scrollbar" content="#b2b4bc">
<!-- divider: general -->
<meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D406;&#x1D404;&#x1D40D;&#x1D404;&#x1D411;&#x1D400;&#x1D40B;&#x200A;:" title="" content="">
<!-- hover/show tumblr controls -->
<meta name="select:tumblr controls" title="hover" content="hover">
<meta name="select:tumblr controls" title="always show" content="always-show">
<!-- tumblr controls color -->
<meta name="select:tumblr controls color" title="white" content="white">
<meta name="select:tumblr controls color" title="black" content="black">
<!-- background image size -->
<meta name="select:background image size" title="small&#x2009;&#x2F;&#x2009;repeating" content="repeat">
<meta name="select:background image size" title="large&#x2009;&#x2F;&#x2009;full" content="full">
<!-- rounded corners -->
<meta name="select:rounded corners" title="small" content="y s">
<meta name="select:rounded corners" title="none" content="n x">
<meta name="select:rounded corners" title="medium" content="y m">
<meta name="select:rounded corners" title="large" content="y l">
<!-- container shadow -->
<meta name="select:side shadows" title="yes" content="yes">
<meta name="select:side shadows" title="no" content="no">
<!-- infinite scroll -->
<meta name="select:infinite scroll" title="yes" content="yes">
<meta name="select:infinite scroll" title="no" content="no">
<!-- back to top button -->
<meta name="select:back to top button" title="show" content="yes">
<meta name="select:back to top button" title="hide" content="no">
<!-- divider: fonts -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D405;&#x1D40E;&#x1D40D;&#x1D413;&#x1D412;&#xFF1A;" title="" content="">
<!-- body font -->
<meta name="select:font" title="Geist Sans" content="Geist Sans">
<meta name="select:font" title="Rethink Sans" content="Rethink Sans">
<meta name="select:font" title="Inter" content="Inter">
<meta name="select:font" title="Karla" content="Karla">
<meta name="select:font" title="Libre Franklin" content="Libre Franklin">
<meta name="select:font" title="Hahmlet" content="Hahmlet">
<meta name="select:font" title="Domine" content="Domine">
<!-- heading font -->
<meta name="select:heading font" title="Wanted Sans" content="Wanted Sans">
<meta name="select:heading font" title="Lexend" content="Lexend">
<meta name="select:heading font" title="Unageo" content="Unageo">
<meta name="select:heading font" title="Averia Serif Libre" content="Averia Serif Libre">
<!-- uppercase font -->
<meta name="select:uppercase font" title="Onest" content="Onest">
<meta name="select:uppercase font" title="Figtree" content="Figtree">
<meta name="select:uppercase font" title="Karla" content="Karla">
<meta name="select:uppercase font" title="Inter" content="Inter">
<meta name="select:uppercase font" title="Readex Pro" content="Readex Pro">
<meta name="select:uppercase font" title="Vollkorn" content="Vollkorn">
<!-- font size -->
<meta name="select:font size" title="13px" content="0.85rem">
<meta name="select:font size" title="11px" content="0.75rem">
<meta name="select:font size" title="12px" content="0.8rem">
<meta name="select:font size" title="14px" content="0.9rem">
<meta name="select:font size" title="15px" content="0.95">
<meta name="select:font size" title="16px" content="1rem">
<!-- divider: top nav -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D413;&#x1D40E;&#x1D40F; &#x1D40D;&#x1D400;&#x1D415;&#xFF1A;" title="" content="">
<meta name="select:nav links font size" title="12px" content="0.7rem">
<meta name="select:nav links font size" title="11px" content="0.65rem">
<meta name="select:nav links font size" title="13px" content="0.75rem">
<meta name="select:nav links font size" title="14px" content="0.8rem">
<meta name="select:nav links font size" title="15px" content="0.85rem">
<!-- divider: header -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411;&#xFF1A;" title="" content="">
<meta name="select:header padding" title="40px" content="40px">
<meta name="select:header padding" title="30px" content="30px">
<meta name="select:header padding" title="35px" content="35px">
<meta name="select:header padding" title="45px" content="45px">
<meta name="select:header padding" title="50px" content="50px">
<meta name="select:header padding" title="55px" content="55px">
<meta name="select:header padding" title="60px" content="60px">
<meta name="select:header padding" title="65px" content="65px">
<meta name="select:header padding" title="70px" content="70px">
<meta name="select:header padding" title="75px" content="75px">
<meta name="select:header padding" title="80px" content="80px">
<!-- divider: header title -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D413;&#x1D408;&#x1D413;&#x1D40B;&#x1D404;&#xFF1A;" title="" content="">
<meta name="select:show title" title="yes" content="show">
<meta name="select:show title" title="no" content="hide">
<meta name="select:title font size" title="17px" content="1.05rem">
<meta name="select:title font size" title="13px" content="0.9rem">
<meta name="select:title font size" title="14px" content="0.9rem">
<meta name="select:title font size" title="15px" content="0.95rem">
<meta name="select:title font size" title="16px" content="1rem">
<meta name="select:title font size" title="18px" content="1.1rem">
<meta name="select:title font size" title="19px" content="1.15rem">
<meta name="select:title font size" title="20px" content="1.2rem">
<meta name="select:title font size" title="21px" content="1.25rem">
<meta name="select:title font size" title="22px" content="1.3rem">
<!-- divider: header username -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D414;&#x1D412;&#x1D404;&#x1D411;&#x1D40D;&#x1D400;&#x1D40C;&#x1D404;&#xFF1A;" title="" content="">
<meta name="select:show username" title="yes" content="show">
<meta name="select:show username" title="no" content="hide">
<meta name="select:username font size" title="13px" content="0.85rem">
<meta name="select:username font size" title="11px" content="0.75rem">
<meta name="select:username font size" title="12px" content="0.8rem">
<meta name="select:username font size" title="14px" content="0.9rem">
<meta name="select:username font size" title="15px" content="0.95">
<meta name="select:username font size" title="16px" content="1rem">
<!-- divider: subtitle -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D414;&#x1D401;&#x1D413;&#x1D408;&#x1D413;&#x1D40B;&#x1D404;&#xFF1A;" title="" content="">
<meta name="select:show subtitle" title="yes" content="show">
<meta name="select:show subtitle" title="no" content="hide">
<meta name="select:subtitle font size" title="12px" content="0.8rem">
<meta name="select:subtitle font size" title="11px" content="0.75rem">
<meta name="select:subtitle font size" title="13px" content="0.85rem">
<meta name="select:subtitle font size" title="14px" content="0.9rem">
<meta name="select:subtitle font size" title="15px" content="0.95">
<meta name="select:subtitle font size" title="16px" content="1rem">
<meta name="select:subtitle style" title="bold" content="bold">
<meta name="select:subtitle style" title="normal" content="normal">
<meta name="select:subtitle style" title="italic" content="italic">
<!-- divider: description -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D403;&#x1D404;&#x1D412;&#x1D402;&#x1D411;&#x1D408;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#xFF1A;" title="" content="">
<meta name="select:show desc" title="yes" content="show">
<meta name="select:show desc" title="no" content="hide">
<meta name="select:desc font size" title="13px" content="0.85rem">
<meta name="select:desc font size" title="11px" content="0.75rem">
<meta name="select:desc font size" title="12px" content="0.8rem">
<meta name="select:desc font size" title="14px" content="0.9rem">
<meta name="select:desc font size" title="15px" content="0.95">
<meta name="select:desc font size" title="16px" content="1rem">
<!-- divider: status -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D413;&#x1D400;&#x1D413;&#x1D414;&#x1D412;&#xFF1A;" title="" content="">
<meta name="select:show status" title="yes" content="show">
<meta name="select:show status" title="no" content="hide">
<meta name="select:status icon size" title="18px" content="1.25rem">
<meta name="select:status icon size" title="12px" content="0.875rem">
<meta name="select:status icon size" title="14px" content="1rem">
<meta name="select:status icon size" title="16px" content="1.125rem">
<meta name="select:status icon size" title="20px" content="1.375rem">
<meta name="select:status icon size" title="22px" content="1.5rem">
<meta name="select:status font size" title="12px" content="0.8rem">
<meta name="select:status font size" title="11px" content="0.75rem">
<meta name="select:status font size" title="13px" content="0.85rem">
<meta name="select:status font size" title="14px" content="0.9rem">
<meta name="select:status font size" title="15px" content="0.95">
<meta name="select:status font size" title="16px" content="1rem">
<!-- divider: header icon -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D407;&#x1D404;&#x1D400;&#x1D403;&#x1D404;&#x1D411; &#x1D408;&#x1D402;&#x1D40E;&#x1D40D;&#xFF1A;" title="" content="">
<meta name="select:show icon image" title="yes" content="show">
<meta name="select:show icon image" title="no" content="hide">
<meta name="select:icon image size" title="75px" content="75px">
<meta name="select:icon image size" title="40px" content="40px">
<meta name="select:icon image size" title="45px" content="45px">
<meta name="select:icon image size" title="50px" content="50px">
<meta name="select:icon image size" title="55px" content="55px">
<meta name="select:icon image size" title="60px" content="60px">
<meta name="select:icon image size" title="65px" content="65px">
<meta name="select:icon image size" title="70px" content="70px">
<meta name="select:icon image size" title="80px" content="80px">
<meta name="select:icon image size" title="85px" content="85px">
<meta name="select:icon image size" title="90px" content="90px">
<meta name="select:icon image size" title="95px" content="95px">
<meta name="select:icon image size" title="100px" content="100px">
<meta name="select:icon image size" title="105px" content="105px">
<meta name="select:icon image size" title="110px" content="110px">
<meta name="select:icon image padding" title="8px" content="8px">
<meta name="select:icon image padding" title="none" content="0px">
<meta name="select:icon image padding" title="2px" content="2px">
<meta name="select:icon image padding" title="4px" content="4px">
<meta name="select:icon image padding" title="6px" content="6px">
<meta name="select:icon image padding" title="10px" content="10px">
<meta name="select:icon image padding" title="12px" content="12px">
<meta name="select:icon image padding" title="14px" content="14px">
<meta name="select:icon image padding" title="16px" content="16px">
<meta name="select:icon image padding" title="18px" content="18px">
<meta name="select:icon image padding" title="20px" content="20px">
<!-- divider: social links -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D412;&#x1D40E;&#x1D402;&#x1D408;&#x1D400;&#x1D40B; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#xFF1A;" title="" content="">
<meta name="select:social links position" title="right" content="right">
<meta name="select:social links position" title="left" content="left">
<meta name="select:social links icon size" title="18px" content="1.125rem">
<meta name="select:social links icon size" title="14px" content="0.9em">
<meta name="select:social links icon size" title="16px" content="1.0125rem">
<meta name="select:social links icon size" title="20px" content="1.25rem">
<meta name="select:social links icon size" title="22px" content="1.38rem">
<meta name="select:social links icon size" title="24px" content="1.5rem">
<!-- divider: custom links -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D402;&#x1D414;&#x1D412;&#x1D413;&#x1D40E;&#x1D40C; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412;&#xFF1A;" title="" content="">
<meta name="select:custom links font size" title="11px" content="0.65rem">
<meta name="select:custom links font size" title="12px" content="0.7rem">
<meta name="select:custom links font size" title="13px" content="0.75rem">
<meta name="select:custom links font size" title="14px" content="0.8rem">
<meta name="select:custom links font size" title="15px" content="0.85rem">
<meta name="select:custom links columns" title="3" content="3">
<meta name="select:custom links columns" title="1" content="1">
<meta name="select:custom links columns" title="2" content="2">
<meta name="select:custom links columns" title="4" content="4">
<meta name="select:custom links columns" title="5" content="5">
<meta name="select:custom links columns" title="6" content="6">
<meta name="select:custom links columns" title="auto" content="auto">
<!-- divider: posts -->
<meta name="select:&#x1F53D;&#x2003;&#x2500;&#x2500;&#x2500;&#x2003;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;&#xFF1A;" title="" content="">
<meta name="select:posts width" title="450px" content="450px">
<meta name="select:posts width" title="300px" content="300px">
<meta name="select:posts width" title="325px" content="325px">
<meta name="select:posts width" title="350px" content="350px">
<meta name="select:posts width" title="375px" content="375px">
<meta name="select:posts width" title="400px" content="400px">
<meta name="select:posts width" title="425px" content="425px">
<meta name="select:posts width" title="475px" content="475px">
<meta name="select:posts width" title="500px" content="500px">
<meta name="select:posts width" title="540px" content="540px">
<meta name="select:posts width" title="600px" content="600px">
<meta name="select:posts width" title="650px" content="650px">
<meta name="select:posts width" title="700px" content="700px">
<meta name="select:posts padding" title="25px" content="25px">
<meta name="select:posts padding" title="0px" content="0px">
<meta name="select:posts padding" title="10px" content="10px">
<meta name="select:posts padding" title="15px" content="15px">
<meta name="select:posts padding" title="20px" content="20px">
<meta name="select:posts padding" title="30px" content="30px">
<meta name="select:posts padding" title="35px" content="35px">
<meta name="select:posts padding" title="40px" content="40px">
<meta name="select:everything inside borders" title="yes" content="no">
<meta name="select:everything inside borders" title="no" content="yes">
<meta name="select:posts left border" title="yes" content="yes">
<meta name="select:posts left border" title="no" content="no">
<meta name="select:photos spacing" title="4px" content="4px">
<meta name="select:photos spacing" title="0px" content="0px">
<meta name="select:photos spacing" title="2px" content="2px">
<meta name="select:photos spacing" title="6px" content="6px">
<meta name="select:photos spacing" title="8px" content="8px">
<meta name="select:photos spacing" title="10px" content="10px">
<meta name="select:reblog dividers" title="yes" content="yes">
<meta name="select:reblog dividers" title="no" content="no">
<!-- divider: tags -->
<meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D413;&#x1D400;&#x1D406;&#x1D412;&#x200A;:" title="" content="">
<meta name="select:tags position" title="left" content="left">
<meta name="select:tags position" title="right" content="right">
<meta name="select:tags" title="click to show" content="toggle">
<meta name="select:tags" title="always show" content="always">
<!-- divider: post info -->
<meta name="select:&#x1F53D; &#x2002;&#x2500;&#x2500;&#x2002; &#x1D40F;&#x1D40E;&#x1D412;&#x1D413; &#x1D408;&#x1D40D;&#x1D405;&#x1D40E;&#x200A;:" title="" content="">
<meta name="select:post info border" title="no" content="no">
<meta name="select:post info border" title="yes" content="yes">
<meta name="select:flip post info" title="no" content="no">
<meta name="select:flip post info" title="yes" content="yes">
<meta name="select:shorten notes count" title="yes" content="yes">
<meta name="select:shorten notes count" title="no" content="no">
<meta name="select:shorten timestamps" title="yes" content="yes">
<meta name="select:shorten timestamps" title="no" content="no">
<meta name="select:show copy link" title="yes" content="show">
<meta name="select:show copy link" title="no" content="hide">
<meta name="text:&#917536;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<meta name="text:header title" content="clotho.">
<meta name="text:header subtitle" content="omnia vincit amor">
<meta name="text:header desc" content="&#x2060;&#x2060;&#x201C;Love is always reaching for the stars and missing them, but in the missing, we know that we have tried.&#x201D; &#x2014; &#x3C;b&#x3E;L.M. Montgomery&#x3C;/b&#x3E;, &#x3C;i&#x3E;Chronicles of Avonlea&#x3C;/i&#x3E;">
<meta name="text:&#917536;&#x2060;" content="&#x2500;&#x2500;&#x2500;&#x2500; &#xB7; &#xB7; &#xB7; &#xB7; &#x2726; &#xB7; &#xB7; &#xB7; &#xB7; &#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&NewLine;">
<meta name="text:header status icon list&#x2002;&#x1F447;" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//hugeicons.gitlab.io/i/hugeicons_list.pdf">
<meta name="text:header status icon name" content="game-controller-03">
<meta name="text:header status text" content="up to &#x3C;span&#x3E;SOMETHING&#x3C;/span&#x3E;">
<meta name="text:&#917536;&#x2060;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<meta name="text:social icons list&#x2002;&#x1F447;" content="&#x68;&#x74;&#x74;&#x70;&#x73;&#x3A;//ios-17-logos.gitlab.io/i/icons-list">
<meta name="text:social link 1 URL" content="https://www.youtube.com/watch?v=yIRtlkgysaU">
<meta name="text:social link 1 text" content="sample link">
<meta name="text:social link 1 icon name" content="youtube">
<meta name="text:social link 2 URL" content="">
<meta name="text:social link 2 text" content="">
<meta name="text:social link 2 icon name" content="">
<meta name="text:social link 3 URL" content="">
<meta name="text:social link 3 text" content="">
<meta name="text:social link 3 icon name" content="">
<meta name="text:social link 4 URL" content="">
<meta name="text:social link 4 text" content="">
<meta name="text:social link 4 icon name" content="">
<meta name="text:&#917536;&#x2060;&#x2060;&#x2060;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<meta name="text:custom link 1 text" content="sample custom link">
<meta name="text:custom link 1 URL" content="https://www.youtube.com/watch?v=frIGQ7RMmys">
<meta name="text:custom link 2 text" content="">
<meta name="text:custom link 2 URL" content="">
<meta name="text:custom link 3 text" content="">
<meta name="text:custom link 3 URL" content="">
<meta name="text:custom link 4 text" content="">
<meta name="text:custom link 4 URL" content="">
<meta name="text:custom link 5 text" content="">
<meta name="text:custom link 5 URL" content="">
<meta name="text:custom link 6 text" content="">
<meta name="text:custom link 6 URL" content="">
{/block:Options}
<style>
:root, :host {
/*----- THREADS OPTIONS -----*/
/* "yes" e.g.: file.garden/ZRt8jW_MomIqlrfn/screenshots/usxha.png */
/* "no" e.g.: file.garden/ZRt8jW_MomIqlrfn/screenshots/aaqnj.png */
--Prepend-1st-Media:{select:everything inside borders};
/*----- GENERAL -----*/
--Screen-Top-Gap:0px;
--Load-In-Delay:25ms; /* delay before the fade animation starts */
--Load-In-Speed:400ms;
/*----- CONTAINER SETTINGS -----*/
--Container-Width-Total:min(var(--Post-Width-Total), 85vw);
--Container-BG:{color:container BG};
--Container-Border-Size:1px;
--Container-Border-Color:{color:borders};
--Container-Shadow-Size:45px;
--Container-Shadow-Strength:2%;
/*----- TOPNAV SETTINGS -----*/
--NavLinks-Padding:10px;
--NavLinks-Font-Size:{select:nav links font size};
--NavLinks-Text-Color:{color:nav links};
--NavLinks-Hover-Text-Color:{color:nav links hover text};
--NavLinks-Hover-Underline-Size:2px;
--NavLinks-Hover-Underline-Color:{color:nav links underline};
--NavLinks-Hover-Speed:0.25s;
/*----- HEADER SETTINGS -----*/
--Header-Padding:{select:header padding};
--Header-Width-Inner:calc(var(--Container-Width-Total) - (var(--Header-Padding) * 2) - (var(--Container-Border-Size) * 2));
--Header-Row-Spacing:16px;
--Header-Title-Size:{select:title font size};
--Header-Title-Color:{color:header title};
--Header-Username-Size:{select:username font size};
--Header-Username-Color:{color:header username};
/*----- HEADER SUBTITLE SETTINGS -----*/
--Header-Subtitle-Gap-Left:12px;
--Header-Subtitle-Font-Size:{select:subtitle font size};
--Header-Subtitle-Padding:8px;
--Header-Subtitle-BG:{color:header subtitle BG};
--Header-Subtitle-Rounded-Corners:calc((var(--Body-Font-Size) + (var(--Header-Subtitle-Padding) * 2)) / 2);
--Header-Subtitle-Text-Color:{color:header subtitle text};
/*----- DESC SETTINGS -----*/
--Desc-Font-Size:{select:desc font size};
--Desc-Text-Color:{color:desc text};
--Desc-Bold:{color:desc bold};
--Desc-Italic:{color:desc italic};
--Desc-Links:{color:desc links};
--Desc-Links-Underline-Gap:0.15em;
--Desc-Links-Underline-Size:1px;
--Desc-Links-Underline-Color:{color:desc links underline};
/*----- HEADER STATUS SETTINGS -----*/
--Header-Status-Icon-Size:{select:status icon size};
--Header-Status-Icon-Color:{color:header status icon};
--Header-Status-Icon-Gap:8px;
--Header-Status-Font-Size:{select:status font size};
--Header-Status-Line-Height:var(--Body-Line-Height);
--Header-Status-Text-Color:{color:header status text};
/*----- HEADER ICON SETTINGS -----*/
--Header-Icon-Size:{select:icon image size};
--Header-Icon-Rounded-Corners:100%;
--Header-Center-Gap:40px;
--Header-Icon-Padding:{select:icon image padding};
--Header-Icon-Border-Size:1px;
--Header-Icon-Border-Color:{color:header icon border};
--Header-Icon-BG:{color:header icon BG};
--Header-Icon-Total-Width:calc(var(--Header-Icon-Size) + (var(--Header-Icon-Padding) * 2) + (var(--Header-Icon-Border-Size) * 2));
/*----- SOCIAL LINKS SETTINGS -----*/
--Social-Links-Padding:8px;
--Social-Links-Spacing:calc(var(--Social-Links-Padding) * -0.5);
--Social-Links-Icon-Size:{select:social links icon size};
--Social-Links-Icon-Color:{color:social links icon};
--Social-Links-Hover-Icon-BG:{color:social links hover icon BG};
--Social-Links-Hover-Icon-Color:{color:social links hover icon};
--Social-Links-Hover-Speed:0.15s;
/*----- CUSTOM LINKS SETTINGS -----*/
--CustomLinks-Min-Width:min(140px, 30vw);
--CustomLinks-Font-Size:{select:custom links font size};
--CustomLinks-Text-Color:{color:custom links};
--CustomLinks-Padding:10px;
--CustomLinks-Hover-Text-Color:{color:custom links hover text};
--CustomLinks-Hover-Underline-Size:2px;
--CustomLinks-Hover-Underline-Color:{color:custom links underline};
--CustomLinks-Hover-Speed:0.25s;
/*----- POST SETTINGS -----*/
--Post-Width:{select:posts width};
--Post-Padding:{select:posts padding};
--Post-BG:var(--Container-BG);
--Post-Spacing:0px;
--Post-Accent-Border-Size:1px;
--Post-Accent-Border-Color:{color:posts accent borders};
--Post-Accent-Padding:calc(var(--Post-Padding) - 3px);
--Post-Accent-Rounded-Corners:max(3px, var(--Rounded-Corners));
--Post-Accent-BG:{color:posts accent BG};
--Post-Accent-Text:{color:posts accent text};
/*----- BODY TEXT -----*/
--Body-Font-Family:"{select:font}", sans-serif;
--Body-Font-Size:{select:font size};
--Body-Font-Weight:400; /* 400 is default */
--Body-Text-Color:{color:text};
--Body-Text-Color-RGB:{RGBcolor:text};
--Body-Line-Height:1.65;
/*----- TEXT FORMATTING -----*/
--Bold-Font-Weight:600; /* 700 is default */
--Bold:{color:bold};
--Italic:{color:italic};
/*----- HEADING TEXT -----*/
--Heading-Font-Family:"{select:heading font}", sans-serif;
--Heading-Font-Size:calc({select:font size} + 2px);
--Heading-Font-Weight:700; /* 700 is default */
--Heading-Text-Case:uppercase; /* uppercase, lowercase, capitalize, none */
--Heading-Letter-Spacing:0.025em;
--Heading-Word-Spacing:0em;
--Heading-Line-Height:1.69;
/*----- UPPERCASE TEXT -----*/
--Caps-Font-Family:"{select:uppercase font}", sans-serif;
--Caps-Font-Size:calc(var(--Body-Font-Size) - 2px);
--Caps-Font-Weight:400; /* 400 is default */
--Caps-Letter-Spacing:0.04em;
--Caps-Word-Spacing:0em;
/*----- CODE TEXT -----*/
--Code-Padding:var(--Post-Accent-Padding);
--Code-Border-Size:var(--Post-Accent-Border-Size);
--Code-Border-Color:var(--Post-Accent-Border-Color);
--Code-Rounded-Corners:var(--Post-Accent-Rounded-Corners);
--Code-BG:var(--Post-Accent-BG);
--Code-Font-Family:"Geist Mono", monospace;
--Code-Font-Size:calc(var(--Body-Font-Size) - 2px);
--Code-Font-Weight:450; /* 400 is default */
--Code-Text-Color:var(--Post-Accent-Text);
--Code-Line-Height:1.5;
/*----- LINKS -----*/
--Links-Color:{color:links};
--Links-Underline-Gap:0.1em;
--Links-Underline-Size:1px;
--Links-Underline-Color:{color:links underline};
/*----- BLOCKQUOTES -----*/
--Blockquote-Border-Size:min(var(--Reblog-Border-Size), var(--Reblog-Head-Image-Size));
--Blockquote-Border-Color:{color:blockquote border};
--Blockquote-Border-Rounded-Corners:calc(var(--Blockquote-Border-Size) / 2);
/*----- CAPTION SETTINGS -----*/
--Captions-Gap:min(1.5em, var(--Post-Padding)); /* static.tumblr.com/gtjt4bo/foCs8ts0f/zbzrb.png */
--Reblog-Head-Image-Size:30px;
--Reblog-Head-Image-Rounded-Corners:100%;
--Reblog-Head-Gutter:11px; /* gap between avatar and username */
--Reblog-Name-Color:{color:posts usernames};
--Reblog-Head-Bottom-Gap:min(1em, var(--Post-Padding));
/* comment menu BUTTON, post menu BUTTON */
--Comment-Menu-Btn-Icon-Size:calc(var(--Body-Font-Size));
--Comment-Menu-Btn-Icon-Color:{color:posts menu BUTTON dots};
--Comment-Menu-Btn-Padding:calc((var(--Reblog-Head-Image-Size) - var(--Comment-Menu-Btn-Icon-Size)) / 2);
--Comment-Menu-Btn-Hover-BG:{color:posts menu BUTTON hover BG};
--Comment-Menu-Btn-Hover-Icon-Color:{color:posts menu BUTTON hover dots};
--Comment-Menu-Btn-Hover-Speed:0.15s;
--Comment-Menu-Btn-Right-Gap:2px;
/* comment MENU, post MENU */
--Comment-Menu-Top-Gap:calc((var(--Reblog-Head-Bottom-Gap) / 2) - 0px);
--Comment-Menu-Right-Gap:calc(0px - var(--Comment-Menu-Top-Gap));
--Comment-Menu-BG:{color:posts menu BG};
--Comment-Menu-Padding:14px;
--Comment-Menu-Border-Size:1px;
--Comment-Menu-Border-Color:{color:posts menu border};
--Comment-Menu-Rounded-Corners:var(--Rounded-Corners);
--Comment-Menu-Icons-Size:calc(var(--Body-Font-Size) + 2px);
--Comment-Menu-Font-Size:calc(var(--Caps-Font-Size) - 1px);
--Comment-Menu-Links-Color:{color:posts menu text};
--Comment-Menu-Links-Spacing:calc(var(--Comment-Menu-Padding) - 2px);
--Comment-Menu-Hover-BG:{color:posts menu hover BG};
--Comment-Menu-Hover-Text:{color:posts menu hover text};
--Comment-Menu-Hover-Speed:0.25s;
--Comment-Menu-Slide-Amount:5px;
--Comment-Menu-Fade-Speed:0.35s;
--Reblog-Dividers-Size:1px;
--Reblog-Dividers:var(--Container-Border-Color);
--Reblog-Border-Size:3px;
--Reblog-Border-Color:{color:caption left border};
--Reblog-Border-Rounded-Corners:calc(var(--Reblog-Border-Size) / 2);
--Reblog-Border-Gap-Left:calc((var(--Reblog-Head-Image-Size) / 2) - (var(--Reblog-Border-Size) / 2));
--Reblog-Border-Gap-Right:calc(var(--Reblog-Border-Size) + ((var(--Reblog-Head-Image-Size) - var(--Reblog-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
--Reblog-Padding-Right:0px;
/*----- PHOTOSET OPTIONS -----*/
--Photoset-Image-Spacing:{select:photos spacing};
/*----- NPF OPTIONS -----*/
--NPF-Images-Spacing:var(--Photoset-Image-Spacing);
--NPF-Caption-Spacing:0px;
--NPF-Move-1st-Photoset:var(--Prepend-1st-Media);
--Text-Container-Selector:".text-block";
--Text-Reblogs-Selector:".comment";
/*----- QUOTE POSTS -----*/
--Quote-Font-Family:var(--Heading-Font-Family);
--Quote-Font-Size:var(--Heading-Font-Size);
--Quote-Font-Weight:700; /* 700 is default */
--Quote-Text-Case:uppercase; /* uppercase, lowercase, capitalize, none */
--Quote-Letter-Spacing:var(--Heading-Letter-Spacing);
--Quote-Word-Spacing:var(--Heading-Word-Spacing);
--Quote-Line-Height:var(--Heading-Line-Height);
/*----- LINK POSTS -----*/
--Link-Block-Border-Size:1px;
--Link-Block-Border-Color:rgba({RGBcolor:text},0.25);
--Link-Block-Rounded-Corners:var(--Rounded-Corners);
/*----- AUDIO POST SETTINGS -----*/
--Audio-Post-Album-Cover-Size:80px;
--Audio-Post-Album-Cover-Rounded-Corners:max(3px, var(--Rounded-Corners));
--Audio-Post-Btns-Padding:calc(var(--Audio-Post-Album-Cover-Size) * 0.15);
--Audio-Post-Btns-BG:{color:buttons BG};
--Audio-Post-Btns-Size:calc(var(--Body-Font-Size) - 2px);
--Audio-Post-Btns-Color:{color:buttons icons};
--Audio-Post-Gutter:16px;
--Audio-Post-Download-Icon-Size:calc(var(--Body-Font-Size) + 3px);
--Audio-Post-Download-Icon-Color:var(--Body-Text-Color);
--Audio-Post-Download-Icon-Touch-Padding:5px;
--Audio-Post-Volume:90%;
--SoundCloud-Player-Height:116px; /* 20px, 116px, or 500px */
--SoundCloud-Show-Album-Image:"yes";
/*----- VIDEO SETTINGS -----*/
--VIDYO-time-font-family:var(--Body-Font-Family);
--VIDYO-time-font-size:var(--Body-Font-Size);
/*----- ASK POST SETTINGS -----*/
--Ask-Post-Question-Gutter:min(1em, 14px);
--Ask-Post-Avatar-Size:56px;
--Ask-Post-Avatar-Rounded-Corners:max(3px, var(--Rounded-Corners));
--Ask-Post-Username-Color:var(--Reblog-Name-Color);
--Ask-Post-Username-Bottom-Gap:3px;
--Ask-Post-QnA-Border-Size:var(--Post-Accent-Border-Size);
--Ask-Post-QnA-Border-Color:var(--Post-Accent-Border-Color);
--Ask-Post-QnA-Rounded-Corners:max(3px, var(--Rounded-Corners));
--Ask-Post-QnA-Padding:var(--Post-Accent-Padding);
--Ask-Post-QnA-BG:var(--Post-Accent-BG);
--Ask-Post-QnA-Spacing:1em; /* gap between question & answer */
--Ask-Post-Answer-Alignment:"right"; /* "left" or "right" */
/*----- POLL POST SETTINGS -----*/
--Poll-Row-Rounded-Corners:var(--Post-Accent-Rounded-Corners);
--Poll-Row-Border-Size:var(--Post-Accent-Border-Size);
--Poll-Row-Border-Color:var(--Post-Accent-Border-Color);
--Poll-Row-Padding:max(0.69em, 10px);
--Poll-Row-BG:var(--Post-Accent-BG);
--Poll-Row-Text:var(--Post-Accent-Text);
--Poll-Row-Spacing:min(10px, 1em);
--Poll-Row-Hover-Border-Color:var(--Container-Border-Color);
--Poll-Row-Hover-BG:transparent;
--Poll-Row-Hover-Text-Color:var(--Body-Text-Color);
--Poll-Row-Hover-Speed:0.25s;
/*----- MISC POST BUTTONS -----*/
--Misc-Buttons-BG:{color:buttons bg};
--Misc-Buttons-BG-RGB:{RGBcolor:buttons bg};
--Misc-Buttons-Icon:{color:buttons icons};
--Misc-Buttons-Icon-RGB:{RGBcolor:buttons icons};
/*----- TAGS -----*/
--Tags-Hashtag-Spacing:1px;
--Tags-Font-Size:calc(var(--Caps-Font-Size) - 0.5px);
--Tags-Color:{color:tags};
--Tags-Hover-Color:{color:tags hover};
--Tags-Hover-Speed:0.25s;
--Tags-Line-Height:var(--Body-Line-Height);
--Tags-Spacing-X:12px;
--Tags-Spacing-Y:calc((var(--Tags-Spacing-X) - (((var(--Tags-Font-Size) * var(--Tags-Line-Height)) - var(--Tags-Font-Size)) / 2) - 2px));
--Tags-Slide-Speed:0.5s;
--Tags-Fade-Speed:0.3s;
--Tags-Time-Reduction:0.3s;
/*----- POST INFO / PERMALINK -----*/
--Permalink-Border-Size:1px;
--Permalink-Border-Color:var(--Container-Border-Color);
--Permalink-Items-Spacing:11px;
--Permalink-Font-Size:calc(var(--Caps-Font-Size) - 1px);
/* post info text & icon colors */
--Permalink-Text-Color:var(--Body-Text-Color); /* fallback */
--NoteCount-Text-Color:{color:notes};
--Shorten-NoteCount:{select:shorten notes count};
--TimeAgo-Text-Color:{color:date posted};
--TimeAgo-Shorten:{select:shorten timestamps};
--Post-Source:{color:source};
--Post-Controls-Icon-Size:calc(var(--Body-Font-Size) + 4px);
--Post-Controls-Icon-Color:{color:posts info icons};
--Post-Controls-Padding:7px;
--Post-Controls-Spacing:calc(var(--Post-Controls-Padding) * -0.69);
--Post-Controls-Total-Width:calc((var(--Post-Controls-Icon-Size) * 2) + (var(--Post-Controls-Padding) * 2) + (var(--Post-Controls-Spacing) - (var(--Post-Controls-Padding) * 2)));
--Post-Controls-Hover-Speed:0.25s;
--Post-Controls-Hover-BG:{color:posts info icons hover BG};
--Post-Controls-Hover-Icon-Color:{color:posts info icons hover};
--Liked-Button-Color:{color:liked button};
/*----- POST NOTES -----*/
--Post-Notes-Type-Icon-Size:calc(var(--Body-Font-Size) + 3px);
--Post-Notes-Type-Icon-Gap-Right:8px;
--Post-Notes-Row-Spacing:calc(1em - (((var(--Body-Font-Size) * var(--Body-Line-Height)) - var(--Body-Font-Size)) / 2));
/*----- PAGINATION -----*/
--Pagination-Arrows-Size:calc(var(--Body-Font-Size) + 3px);
--Pagination-Color:{color:pagination};
--Pagination-Items-Spacing:2rem;
/*----- SPINNER -----*/
--Spinner-Size:1.5rem;
--Spinner-Color:{color:loading spinner};
--Spinner-Spoke-Delay:0.069s;
/*----- SCROLLBAR OPTIONS -----*/
--Scrollbar-Padding:13px;
--Scrollbar-Thumb:{color:scrollbar};
--Scrollbar-Track:transparent;
/*----- TOOLTIPS OPTIONS -----*/
--Tooltips-Border-Size:1px;
--Tooltips-Border:{color:hover text border};
--Tooltips-Padding-X:1em;
--Tooltips-Padding-Y:1em;
--Tooltips-Rounded-Corners:max(3px, var(--Rounded-Corners));
--Tooltips-BG:{color:hover text BG};
--Tooltips-Text-Color:{color:hover text};
--Tooltips-Font-Size:calc(var(--Caps-Font-Size) - 1px);
/*----- TUMBLR CONTROLS -----*/
--TumblrControls-Bar-Width:20px;
--TumblrControls-Bar-Height:2px;
--TumblrControls-Bar-Rounded-Corners:calc(var(--TumblrControls-Bar-Height) / 2);
--TumblrControls-Bar-Color:var(--Body-Text-Color);
--TumblrControls-Bar-Spacing:5px;
/*----- BACK TO TOP BUTTON -----*/
--BackToTop-Corner-Offset:1rem;
--BackToTop-Button-BG:var(--Post-BG);
--BackToTop-Button-Border:var(--Container-Border-Color);
--BackToTop-Button-Padding:0.69rem;
--BackToTop-Button-Rounded-Corners:max(3px, calc(var(--Rounded-Corners) / 2));
--BackToTop-Button-Size:0.8rem;
--BackToTop-Button-Icon-Color:var(--Body-Text-Color);
}/* end root */
html.device-touch:root {
--Screen-Top-Gap:54px!important;
}
/*------- CAPTION BORDER -------*/
/* preview of what they look like: */
/* file.garden/ZRt8jW_MomIqlrfn/screenshots/krngt.png */
html[prepend-media="yes"][reblog-left-border="yes"],
html[prepend-media="yes"][reblog-left-border="no"],
html[prepend-media="no"][reblog-left-border="no"]{
--Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + (var(--Container-Border-Size) * 2));
}
html[prepend-media="no"][reblog-left-border="yes"]{
--Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + var(--Reblog-Border-Gap-Left) + var(--Reblog-Border-Gap-Right) + var(--Reblog-Padding-Right) + (var(--Container-Border-Size) * 2));
}
/*------- BASICS -------*/
* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
background-color:{color:background};
background-image:url("{image:background image}");
background-attachment:fixed;
background-position:center;
font-family:var(--Body-Font-Family), sans-serif;
font-weight:var(--Body-Font-Weight);
font-size:var(--Body-Font-Size);
color:var(--Body-Text-Color);
line-height:var(--Body-Line-Height);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
html, body {
scroll-behavior:smooth;
}
html[bg-size="repeat"] body {
background-repeat:repeat;
}
html[bg-size="full"] body {
background-repeat:no-repeat;
background-size:cover;
}
.no-overscroll {
overscroll-behavior:none;
}
img, canvas, iframe, video {
vertical-align:middle;
}
b, strong {
font-weight:var(--Bold-Font-Weight);
color:var(--Bold);
}
i:not([class]), em {
color:var(--Italic);
}
pre, li.chat-line:not(ul.chat-wrap li.chat-line){
padding:calc(var(--Code-Padding) - (((var(--Code-Font-Size) * var(--Code-Line-Height)) - var(--Code-Font-Size)) / 2)) var(--Code-Padding);
word-wrap:break-word;
white-space:pre-wrap;
}
code {
padding:calc(0.5em - (((var(--Code-Font-Size) * var(--Code-Line-Height)) - var(--Code-Font-Size)) / 2)) 0.5em;
}
pre, code, li.chat-line:not(ul.chat-wrap li.chat-line){
border:var(--Code-Border-Size) solid var(--Code-Border-Color);
border-radius:var(--Code-Rounded-Corners);
background:var(--Code-BG);
font-family:var(--Code-Font-Family);
font-weight:var(--Code-Font-Weight);
font-size:var(--Code-Font-Size);
color:var(--Code-Text-Color);
line-height:var(--Code-Line-Height);
}
p.keep-reading {
text-align:center;
}
[class^="mgc_"]:before, [class*=" mgc_"]:before {
color:inherit;
}
[data-clipboard-text]{
cursor:help;
}
/*------- TEXT HIGHLIGHT -------*/
::selection {
background:{color:text highlight BG};
color:{color:text highlighted};
}
::-moz-selection {
background:{color:text highlight BG};
color:{color:text highlighted};
}
/*------- SCROLLBAR -------*/
@-moz-document url-prefix(){
* {
scrollbar-width:thin; /* firefox only */
}
}
::-webkit-scrollbar {
width:var(--Scrollbar-Padding);
height:var(--Scrollbar-Padding);
background-color:var(--Scrollbar-Track);
}
::-webkit-scrollbar-thumb {
background-color:var(--Scrollbar-Thumb);
border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid var(--Scrollbar-Track);
background-clip:padding-box;
}
::-webkit-scrollbar-corner {
background:var(--Scrollbar-Track);
}
/*------- BODY FONT -------*/
html[font="Rethink Sans"]:root {
letter-spacing:0.004em;
}
html[font="Inter"]:root {
--Body-Font-Weight:450;
}
html[font="Geist Sans"]:root {
--Body-Font-Weight:450;
}
/*------- HEADING FONT -------*/
h1, h2, h3, h4, h5, h6 {
font-family:var(--Heading-Font-Family);
font-weight:var(--Heading-Font-Weight);
text-transform:var(--Heading-Text-Case);
letter-spacing:var(--Heading-Letter-Spacing);
word-spacing:var(--Heading-Word-Spacing);
line-height:var(--Heading-Line-Height);
}
h1 {
font-size:var(--Heading-Font-Size);
}
h2, h3 {
font-size:calc(var(--Heading-Font-Size) - 1px);
}
h4, h5, h6 {
font-size:calc(var(--Heading-Font-Size) - 2px);
}
/*----- HEADING FONT -----*/
html[heading-font="Wanted Sans"]:root {
--Heading-Letter-Spacing:0.04em;
}
html[heading-font="Lexend"]:root {
--Heading-Font-Weight:600;
}
/*----- UPPERCASE FONT / CAPS FONT -----*/
html[caps-font="Figtree"]:root {
--Caps-Font-Weight:600;
}
html[caps-font="Karla"]:root {
--Caps-Font-Weight:600;
}
html[caps-font="Inter"]:root {
--Caps-Font-Size:calc(var(--Body-Font-Size) - 3px);
--Caps-Font-Weight:600;
--Caps-Letter-Spacing:0.05em;
--Permalink-Font-Size:calc(var(--Caps-Font-Size));
}
html[caps-font="Onest"]:root {
--Caps-Font-Weight:600;
}
html[caps-font="Readex Pro"]:root {
--Caps-Font-Weight:450;
--Caps-Letter-Spacing:0.025em;
}
html[caps-font="Vollkorn"]:root {
--Caps-Font-Weight:600;
}
.caps, .comment-header .username, .chat-label, .aud-title, .site-name, .poll-row, .poll-see-results, .q-top, .a-top, .comment-header .deactivated, .pinned-label, p.keep-reading, ol.notes a:not(li.note.with_commentary blockquote a), .more_notes_link, .notes_loading, p.tmblr-attribution a, .tagscont a, .notes-part, .botpagi, .comment-menu > a, .copied-label, .nav1 a, .nav3 a,
html[current-path="/customize_preview_receiver.html"] a.tumblr_blog {
font-family:var(--Caps-Font-Family);
font-weight:var(--Caps-Font-Weight);
text-transform:uppercase;
font-size:var(--Caps-Font-Size);
letter-spacing:var(--Caps-Letter-Spacing);
}
.comment-body .caps {
font-size:calc(var(--Caps-Font-Size) + 1px);
}
/* !important overrides bc t*mblr */
.poll-row, .poll-see-results {
font-weight:var(--Caps-Font-Weight)!important;
font-size:var(--Caps-Font-Size)!important;
}
/*------- LINKS -------*/
a {
color:var(--Links-Color);
text-decoration:none;
}
/* links underline */
.quote-set a, .question-text a, .answer-text a,
.comment-body a:not(html[current-path="/customize_preview_receiver.html"] a.tumblr_blog, a.post_media_photo_anchor, a.aud-dl, a.link-render, a.poll-row, a.poll-see-results), .poll-see-results > span {
padding-bottom:var(--Links-Underline-Gap);
border-bottom:var(--Links-Underline-Size) solid var(--Links-Underline-Color);
}
/*------- BLOCKQUOTES -------*/
blockquote {
position:relative;
margin-left:calc((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2);
margin-right:0;
padding-left:calc(((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
}
blockquote:not(.quote-text):before {
content:"";
position:absolute;
top:0;left:0;
width:var(--Blockquote-Border-Size);
height:100%;
background:var(--Blockquote-Border-Color);
border-radius:var(--Blockquote-Border-Rounded-Corners);
}
/*------- BULLET LISTS -------*/
ul, ol {
--ul-ol-gap-1:1em;
--ul-ol-gap-2:0.5em;
padding-left:0;
margin-left:calc(1em + var(--ul-ol-gap-1));
}
li {
padding-left:var(--ul-ol-gap-2);
}
/* nested bullet lists */
ul ul, ol ul, ol ol, ul ol {
margin-left:calc(((1em + var(--ul-ol-gap-1)) * 2) - var(--ul-ol-gap-2));
}
/*------- TUMBLR CONTROLS -------*/
iframe.tmblr-iframe.iframe-controls--desktop {
position:fixed!important;
left:initial!important;
top:0!important;
right:0!important;
margin-left:0px!important;
margin-top:5px!important;
margin-right:5px!important;
padding-right:calc(((13px + var(--TumblrControls-Bar-Width)) * 0.8) + 13px);
transform-origin:100% 0%!important;
transform:scale(0.8,0.8)!important;
}
html[tc-col="black"] iframe.tmblr-iframe.iframe-controls--desktop {
filter:invert(100%) hue-rotate(180deg)!important;
}
.tmblr-iframe--follow-teaser, .follow-teaser, .tmblr-iframe--app-cta-button {
display:none!important;
visibility:hidden!important;
height:0!important;
}
.tmblr-iframe-pushdown {
padding:0!important;
}
/* hide the two lines when they're not needed */
html.device-touch .tg,
html[current-path="/customize_preview_receiver.html"] .tg {
display:none;
}
.tg {
position:fixed;
top:0;right:0;
margin-right:13px;
height:53px;
}
.tg .te {
display:flex;
flex-direction:column;
gap:var(--TumblrControls-Bar-Spacing) 0;
width:var(--TumblrControls-Bar-Width);
height:100%;
justify-content:center;
align-items:flex-end;
}
.tg .tp {
width:100%;
}
.tg .tq {
width:55%;
transition:width 0.15s ease-in-out;
}
.tg .tp, .tg .tq {
height:var(--TumblrControls-Bar-Height);
border-radius:var(--TumblrControls-Bar-Rounded-Corners);
background:var(--TumblrControls-Bar-Color);
transform-origin:center;
transform:perspective(0);
}
html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop {
opacity:0;
transition:opacity 0.3s ease-in-out;
}
html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop:hover {
opacity:1;
}
html[tc-bhv="hover"]:not(.device-touch) iframe.tmblr-iframe.iframe-controls--desktop:hover ~ .tg .tq {
width:100%;
}
/*------- CONTAINER SETTINGS -------*/
main {
margin:0 auto;
}
.maincont {
position:relative;
margin:var(--Screen-Top-Gap) auto auto auto;
background:var(--Container-BG);
border-left:var(--Container-Border-Size) solid var(--Container-Border-Color);
border-right:var(--Container-Border-Size) solid var(--Container-Border-Color);
width:var(--Container-Width-Total);
min-height:100vh;
}
/* left shadow */
.maincont.shad-yes:before {
content:"";
position:absolute;
top:0;right:100%;
width:var(--Container-Shadow-Size);
height:100%;
background-image:linear-gradient(to right, transparent, rgba(0,0,0,var(--Container-Shadow-Strength)));
z-index:-1;
pointer-events:none;
}
/* right shadow */
.maincont.shad-yes:after {
content:"";
position:absolute;
top:0;left:100%;
width:var(--Container-Shadow-Size);
height:100%;
background-image:linear-gradient(to left, transparent, rgba(0,0,0,var(--Container-Shadow-Strength)));
z-index:-1;
pointer-events:none;
}
/*------- TOPNAV -------*/
.nav1 {
position:sticky;
top:0;
background:var(--Container-BG);
border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
z-index:10;
}
.nav1 .nav-inner {
border-top:none!important;
}
.nav1 .nav-inner > a {
flex:1!important;
}
.nav1 .nav-inner > a > span {
border-top:none!important;
padding:var(--NavLinks-Padding)!important;
}
.nav1 a, .nav1 a span {
font-size:var(--NavLinks-Font-Size);
color:var(--NavLinks-Text-Color);
transition:color var(--NavLinks-Hover-Speed) ease-in-out;
}
.nav1 a span:before {
content:"";
position:absolute;
bottom:0;left:0;
width:100%;
height:var(--NavLinks-Hover-Underline-Size);
transition:background-color var(--NavLinks-Hover-Speed) ease-in-out;
}
.nav1 a:hover span:before {
background-color:var(--NavLinks-Hover-Underline-Color);
}
.nav1 a:hover, .nav1 a:hover span {
color:var(--NavLinks-Hover-Text-Color);
}
/*------- HEADER SETTINGS -------*/
header {
border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
overflow:hidden;
}
.head-flex {
display:grid;
grid-template-columns:auto var(--Header-Icon-Total-Width);
align-items:center;
margin:var(--Header-Padding);
gap:var(--Header-Center-Gap);
}
.head-left {
display:flex;
flex-direction:column;
flex:1;
gap:var(--Header-Row-Spacing) 0;
min-width:0; /* stop this from stretching [1/2] */
max-width:100%; /* stop this from stretching [2/2] */
}
.head-right {
flex-shrink:0;
align-self:flex-start;
}
.tit-cont.tit-hide {
display:none;
}
.tit-cont h1 {
--hy:calc(((var(--Header-Title-Size) * var(--Heading-Line-Height)) - var(--Header-Title-Size)) / 2);
margin:calc(0px - var(--hy)) 0;
font-size:var(--Header-Title-Size);
color:var(--Header-Title-Color);
}
.name-cont {
font-size:var(--Header-Username-Size);
white-space:nowrap;
}
.name-cont > a {
display:flex;
align-items:center;
color:var(--Header-Username-Color);
}
.name-text {
position:relative;
}
.subt-cont {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--Header-Row-Spacing) var(--Header-Subtitle-Gap-Left);
--Header-Subtitle-Padding-Y:calc(var(--Header-Subtitle-Padding) - (((var(--Header-Subtitle-Font-Size) * var(--Body-Line-Height)) - var(--Header-Subtitle-Font-Size)) / 2));
--Header-Subtitle-Padding-X:calc(var(--Header-Subtitle-Padding) * 1.5);
}
.subt-cont.sub-hide .subt-text {
display:none;
}
.subt-cont.user-hide .name-cont {
display:none;
}
.head-left:not(.mini) .subt-cont.has-sub:not(.sub-hide){
margin:calc(0px - var(--Header-Subtitle-Padding-Y)) 0;
}
.subt-text {
padding:var(--Header-Subtitle-Padding-Y) var(--Header-Subtitle-Padding-X);
border-radius:var(--Header-Subtitle-Rounded-Corners);
background:var(--Header-Subtitle-BG);
font-size:var(--Header-Subtitle-Font-Size);
color:var(--Header-Subtitle-Text-Color);
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.subt-text.bold-style {
font-weight:var(--Bold-Font-Weight);
}
.subt-text.italic-style {
font-style:italic;
}
.subt-text > p:first-child { margin-top:0 }
.subt-text > p:last-child { margin-bottom:0 }
.desc-cont {
font-size:var(--Desc-Font-Size);
color:var(--Desc-Text-Color);
}
.desc-cont.desc-hide {
display:none;
}
/* description, italics */
.desc-cont i:not(:empty), .desc-cont em {
color:var(--Desc-Italic);
}
/* description, bold */
.desc-cont b, .desc-cont strong {
color:var(--Desc-Bold);
}
/* description, links */
.desc-cont a {
padding-bottom:var(--Desc-Links-Underline-Gap);
border-bottom:var(--Desc-Links-Underline-Size) solid var(--Desc-Links-Underline-Color);
color:var(--Desc-Links);
}
.jus-flex {
display:grid;
grid-template-columns:auto var(--Header-Icon-Total-Width);
width:var(--Header-Width-Inner);
justify-content:space-between;
gap:var(--Header-Center-Gap);
}
.jus-flex.nav2-pos-left, .jus-flex.stat-hide {
flex-direction:column;
align-items:flex-start;
}
.jus-flex.stat-hide .nav2 {
margin-left:calc(var(--Social-Links-Padding) / -2);
}
.jus-flex.nav2-pos-left .nav2, .jus-flex.stat-hide .nav2 {
width:auto!important;
}
.jus-flex.stat-hide .status-area {
display:none;
}
.status-area {
display:flex;
gap:var(--Header-Status-Icon-Gap);
}
.status-icon {
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
height:calc(var(--Header-Status-Font-Size) * var(--Header-Status-Line-Height));
}
.status-icon i[class]{
font-size:var(--Header-Status-Icon-Size);
line-height:1em;
color:var(--Header-Status-Icon-Color);
}
.status-text {
font-size:var(--Header-Status-Font-Size);
line-height:var(--Header-Status-Line-Height);
color:var(--Header-Status-Text-Color);
}
.status-text .caps {
font-size:calc(var(--Header-Status-Font-Size) - 1.5px)!important;
}
.avi-cont {
width:var(--Header-Icon-Total-Width);
height:var(--Header-Icon-Total-Width);
border:var(--Header-Icon-Border-Size) solid var(--Header-Icon-Border-Color);
border-radius:var(--Header-Icon-Rounded-Corners);
display:flex;
align-items:center;
justify-content:center;
}
.avi-cont.icon-hide {
display:none;
}
.avi-cont[img*="assets.tumblr.com/images/x.gif"]{
display:none;
}
.avi-cont img {
width:var(--Header-Icon-Size);
height:var(--Header-Icon-Size);
object-fit:cover;
object-position:center;
border-radius:var(--Header-Icon-Rounded-Corners);
}
/*------ SOCIAL LINKS / SOCIAL MEDIA LINKS ------*/
.nav2 {
margin:calc(var(--Social-Links-Padding) / -2) 0;
width:var(--Header-Icon-Total-Width);
display:flex;
align-items:flex-start;
justify-content:center;
}
.nav2 > a {
position:relative;
display:block;
margin:calc(var(--Social-Links-Spacing) / 2);
padding:var(--Social-Links-Padding);
line-height:0;
display:flex;
align-items:center;
justify-content:center;
z-index:0;
}
.nav2 > a:before {
content:"";
position:absolute;
width:0;
height:0;
border-radius:100%;
background:var(--Social-Links-Hover-Icon-BG);
z-index:-1;
transition:width var(--Social-Links-Hover-Speed) ease-in-out, height var(--Social-Links-Hover-Speed) ease-in-out;
}
.nav2 > a:hover:before {
width:100%;
height:100%;
}
.nav2 > a:not([href]), .nav2 > a[href=""]{
cursor:help;
}
.nav2 > a > i[class]{
font-size:var(--Social-Links-Icon-Size);
color:var(--Social-Links-Icon-Color);
font-style:normal;
transition:color var(--Social-Links-Hover-Speed) ease-in-out;
}
.nav2 > a > i.ios-17-logos {
-webkit-text-stroke-width:0.3px;
-webkit-text-stroke-color:currentColor;
}
.nav2 > a:hover > i[class]{
color:var(--Social-Links-Hover-Icon-Color);
}
/*------- CUSTOM LINKS / CUSTOMLINKS -------*/
.nav3 {
overflow:hidden;
}
.nav3[class*="cols-"]:not(.cols-auto) .nav-inner {
display:grid;
grid-template-columns:repeat({select:custom links columns}, 1fr);
grid-gap:0px;
}
.nav3.cols-auto .nav-inner {
display:flex;
}
.nav3.cols-auto .nav-inner > * {
flex:1 1 var(--CustomLinks-Min-Width);
}
.nav-inner {
display:flex;
flex-wrap:wrap;
align-items:stretch;
overflow:hidden;
border-top:calc(var(--Container-Border-Size) / 2) solid var(--Container-Border-Color);
margin:calc(var(--Container-Border-Size) / -2);
margin-top:0;
}
.nav-inner > a {
display:grid;
place-items:center;
text-align:center;
overflow:hidden;
}
.nav-inner > a > span {
position:relative;
width:100%;
height:100%;
display:grid;
place-items:center;
border:calc(var(--Container-Border-Size) / 2) solid var(--Container-Border-Color);
padding:var(--CustomLinks-Padding);
}
.nav3 a, .nav3 a span {
font-size:var(--CustomLinks-Font-Size);
color:var(--CustomLinks-Text-Color);
transition:color var(--CustomLinks-Hover-Speed) ease-in-out;
}
.nav3 a span:before {
content:"";
position:absolute;
bottom:0;left:0;
width:100%;
height:var(--CustomLinks-Hover-Underline-Size);
transition:background-color var(--CustomLinks-Hover-Speed) ease-in-out;
}
.nav3 a:hover span:before {
background-color:var(--CustomLinks-Hover-Underline-Color);
}
.nav3 a:hover, .nav3 a:hover span {
color:var(--CustomLinks-Hover-Text-Color);
}
/* semi responsiveness */
.head-flex.mini {
display:flex;
flex-flow:column-reverse;
}
.head-flex.mini .head-right {
align-self:center;
}
.head-flex.mini .jus-flex {
grid-template-columns:1fr;
gap:var(--Header-Row-Spacing);
width:auto;
}
.head-flex.mini .nav2 {
width:auto;
justify-content:flex-start;
margin-left:calc(var(--Social-Links-Padding) / -2);
}
/*------- POSTS SETTINGS -------*/
.all-posts {
}
.posts {
padding:var(--Post-Padding)
}
.posts + .posts {
margin-top:calc(0px - var(--Post-Padding));
}
.posts:last-child {
padding-bottom:0;
}
.posts, .post-notes, .botpagi {
background:var(--Post-BG);
width:100%;
overflow:hidden;
margin-bottom:var(--Post-Spacing);
}
.load-in { opacity:0; }
.load-in, .load-removing {
transition:opacity var(--Load-In-Speed) ease-in-out;
}
/*---- ROUNDED CORNERS: SIZES ----*/
html[rounded-corners$="s"]:root {
--Rounded-Corners:.375rem;
}
html[rounded-corners$="m"]:root {
--Rounded-Corners:.5625rem;
}
html[rounded-corners$="l"]:root {
--Rounded-Corners:.75rem;
}
/*---- ROUNDED CORNERS: LEGACY CONTENT ----*/
html[rounded-corners*="y"] .post-body [class*="-block"] [class^="legacy-"]{
border-radius:var(--Rounded-Corners);
overflow:hidden;
}
/*---- ROUNDED CORNERS: NPF MULTIMEDIA ----*/
/* tumblr.com/glen-test/737176738035056640 */
html[rounded-corners*="y"] .npf_group:not([class*="-only"]){
border-radius:var(--Rounded-Corners);
overflow:hidden;
}
/*---- ROUNDED CORNERS: NPF SINGLE ----*/
/* tumblr.com/devsmaycry/190031420024 */
html[rounded-corners*="y"] .npf-photo-only .npf_photo.npf_single_each.has-smol img {
border-radius:var(--Rounded-Corners);
}
/* tumblr.com/glen-px/736728568588075008 */
html[rounded-corners*="y"] .npf-photo-only .npf_photo.npf_single_each:not(.has-smol){
border-radius:var(--Rounded-Corners);
overflow:hidden;
}
/*---- ROUNDED CORNERS: NPF PHOTOSETS ----*/
html[rounded-corners*="y"] .npf_photo .npf_row[columns="2"]:first-child,
html[rounded-corners*="y"] .npf_photo .npf_row[columns="3"]:first-child {
border-top-left-radius:var(--Rounded-Corners);
border-top-right-radius:var(--Rounded-Corners);
}
html[rounded-corners*="y"] .npf_photo .npf_row[columns="2"]:last-child,
html[rounded-corners*="y"] .npf_photo .npf_row[columns="3"]:last-child {
border-bottom-left-radius:var(--Rounded-Corners);
border-bottom-right-radius:var(--Rounded-Corners);
}
/*------- TEXT POSTS -------*/
.text-block > h1.post-title:first-child {
margin-top:0;
}
.comment-body > h1:first-child + p {
margin-top:calc(0px - 1.33em + 1em);
}
/*------- CAPTIONS / COMMENTS -------*/
.add-op-comment {
display:none;
}
.inc-op .add-op-comment {
display:block;
}
.post-body > [class*="-block"]:first-child > .comments:first-child > .comment:first-child {
padding-top:0!important;
}
.text-block > h1.post-title:first-child:not(:last-child) + .comments {
margin-top:calc(var(--Heading-Font-Size) * -1.33);
}
.text-block > h1.post-title:first-child:not(:last-child) + .comments > .comment:first-child {
padding-top:var(--Captions-Gap);
}
/*-----------*/
.comments:empty {
display:none;
}
.comment {
padding:calc(var(--Post-Padding) / 2) 0;
}
.comment:first-child {
padding-top:var(--Post-Padding);
}
.post-body [class*="-block"] [class^="legacy-"] + .comments > .comment:first-child, .post-body > .photo-origin:first-child + .text-block > .comments > .comment:first-child {
padding-top:var(--Captions-Gap);
}
.comment:last-child {
padding-bottom:0;
}
.comment-header, .comment-header > a {
display:flex;
align-items:center;
justify-content:flex-start;
gap:0 var(--Reblog-Head-Gutter);
}
.comment-header {
position:relative;
justify-content:space-between;
}
.comment-header > a {
width:fit-content;
}
.comment-header img.userpic {
width:var(--Reblog-Head-Image-Size);
height:var(--Reblog-Head-Image-Size);
border-radius:var(--Reblog-Head-Image-Rounded-Corners);
}
.comment-header .username,
html[current-path="/customize_preview_receiver.html"] a.tumblr_blog {
color:var(--Reblog-Name-Color);
}
.comment-header:not(:last-child){
margin-bottom:var(--Reblog-Head-Bottom-Gap);
}
/* deactivated users */
.comment.deactivated .comment-header {
cursor:default;
}
.comment-header .deactivated {
color:rgba(var(--Body-Text-Color-RGB),0.8);
}
.comment-header .username + .deactivated {
margin-left:calc(0px - var(--Reblog-Head-Gutter) + 0.5em);
}
/* comment head, right side */
.comment-header .droite, .pinned-area {
display:flex;
align-items:center;
justify-content:flex-end;
gap:0 8px;
}
/* pinned post label */
.pinned-area {
color:rgba(var(--Body-Text-Color-RGB),0.9);
cursor:default;
}
.pinned-area i[class]:not([class=""]){
font-size:calc(var(--Body-Font-Size) + 1px);
}
/* comment menu BUTTON */
button.comment-dots {
position:relative;
border:none;
width:var(--Reblog-Head-Image-Size);
height:var(--Reblog-Head-Image-Size);
margin-right:calc(0px - var(--Comment-Menu-Btn-Padding) + var(--Comment-Menu-Btn-Right-Gap));
padding:0;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:0;
}
button.comment-dots:before {
content:"";
position:absolute;
width:0;
height:0;
border-radius:100%;
background:var(--Comment-Menu-Btn-Hover-BG);
transition:width var(--Comment-Menu-Btn-Hover-Speed) ease-in-out, height var(--Comment-Menu-Btn-Hover-Speed) ease-in-out;
z-index:-1;
}
button.comment-dots:hover:before {
width:100%;
height:100%;
}
button.comment-dots[aria-label]:not([aria-label='']) * {
pointer-events:none;
}
button.comment-dots > i[class]{
font-size:var(--Comment-Menu-Btn-Icon-Size);
color:var(--Comment-Menu-Btn-Icon-Color);
transition:color var(--Comment-Menu-Btn-Hover-Speed) ease-in-out;
}
button.comment-dots:hover > i[class]{
color:var(--Comment-Menu-Btn-Hover-Icon-Color);
}
/* comment MENU */
.comment-menu {
position:absolute;
top:0;right:0;
margin-top:calc(var(--Reblog-Head-Image-Size) + var(--Comment-Menu-Top-Gap) + var(--Comment-Menu-Slide-Amount));
margin-right:var(--Comment-Menu-Right-Gap);
border-radius:var(--Comment-Menu-Rounded-Corners);
border:var(--Comment-Menu-Border-Size) solid var(--Comment-Menu-Border-Color);
background:var(--Comment-Menu-BG);
display:flex;
flex-direction:column;
box-shadow:calc(var(--Comment-Menu-Padding) / 2) calc(var(--Comment-Menu-Padding) / 2) calc(var(--Comment-Menu-Padding) * 1.69) 0 rgba(0,0,0,4%);
visibility:hidden;
opacity:0;
transition:opacity var(--Comment-Menu-Fade-Speed) ease-in-out, margin-top var(--Comment-Menu-Fade-Speed) ease-in-out, visibility 0s var(--Comment-Menu-Fade-Speed) ease-in-out;
overflow:hidden;
z-index:20;
}
.comment-menu.open {
visibility:visible!important;
opacity:1!important;
margin-top:calc(var(--Reblog-Head-Image-Size) + var(--Comment-Menu-Top-Gap))!important;
transition:opacity var(--Comment-Menu-Fade-Speed) ease-in-out, margin-top var(--Comment-Menu-Fade-Speed) ease-in-out, visibility 0s 0s ease-in-out;
}
.comment-menu * {
color:var(--Comment-Menu-Links-Color)!important;
line-height:1;
transition:color var(--Comment-Menu-Hover-Speed) ease-in-out, background-color var(--Comment-Menu-Hover-Speed) ease-in-out;
}
.comment-menu > a {
display:flex;
align-items:center;
justify-content:flex-start;
gap:5px;
padding:var(--Comment-Menu-Links-Spacing) calc(var(--Comment-Menu-Padding) + 5px) var(--Comment-Menu-Links-Spacing) var(--Comment-Menu-Padding);
}
.comment-menu > a + a {
border-top:var(--Comment-Menu-Border-Size) solid var(--Comment-Menu-Border-Color);
}
.comment-menu i[class]{
font-size:var(--Comment-Menu-Icons-Size);
}
.comment-menu span {
font-size:var(--Comment-Menu-Font-Size);
}
.comment-menu > a:hover {
background-color:var(--Comment-Menu-Hover-BG);
}
.comment-menu > a:hover, .comment-menu > a:hover * {
color:var(--Comment-Menu-Hover-Text)!important;
}
/* caption border, caption left border */
/* preview of what they look like: */
/* file.garden/ZRt8jW_MomIqlrfn/screenshots/krngt.png */
html[reblog-left-border="yes"]
.comment-body:not([id="post-"] .comment-body){
position:relative;
margin-left:var(--Reblog-Border-Gap-Left);
margin-right:0;
padding-left:var(--Reblog-Border-Gap-Right);
padding-right:var(--Reblog-Padding-Right);
z-index:0;
}
html[reblog-left-border="yes"]
.comment-body:not([id="post-"] .comment-body):after {
content:"";
position:absolute;
top:0;left:0;
width:var(--Reblog-Border-Size);
height:100%;
background:var(--Reblog-Border-Color);
border-radius:var(--Reblog-Border-Rounded-Corners);
}
.comment-body > h1:first-child,
.comment-body > h2:first-child,
.comment-body > h3:first-child,
.comment-body > h4:first-child,
.comment-body > h5:first-child,
.comment-body > h6:first-child,
.comment-body > p:first-child,
.comment-body > blockquote:first-child,
.comment-body > ul:first-child,
.comment-body > ol:first-child {
margin-top:0;
}
.comment-body > h1:last-child,
.comment-body > h2:last-child,
.comment-body > h3:last-child,
.comment-body > h4:last-child,
.comment-body > h5:last-child,
.comment-body > h6:last-child,
.comment-body > p:last-child,
.comment-body > blockquote:last-child,
.comment-body > ul:last-child,
.comment-body > ol:last-child {
margin-bottom:0;
}
.comment-body blockquote > p:first-child {
margin-top:0;
}
.comment-body blockquote > p:last-child {
margin-bottom:0;
}
/*------- REBLOG DIVIDERS -------*/
html[reblog-dividers="yes"] .comment {
margin-left:calc(0px - var(--Post-Padding));
margin-right:calc(0px - var(--Post-Padding));
padding-left:var(--Post-Padding);
padding-right:var(--Post-Padding);
}
html[reblog-dividers="yes"] .comment + .comment {
border-top:var(--Reblog-Dividers-Size) solid var(--Reblog-Dividers);
}
html[reblog-dividers="yes"] .comment:not(:first-child, :last-child){
padding-top:var(--Post-Padding);
padding-bottom:var(--Post-Padding);
}
html[reblog-dividers="yes"] .comment:first-child:not(:last-child){
padding-bottom:var(--Post-Padding);
}
html[reblog-dividers="yes"] .comment:last-child:not(:first-child){
padding-top:var(--Post-Padding);
}
/*------- PHOTO POSTS -------*/
.legacy-photo img, .legacy-photoset img {
display:block;
max-width:100%;
height:auto;
}
.legacy-photoset {
display:grid;
grid-gap:var(--Photoset-Image-Spacing)
}
.legacy-photoset > img {
display:none; /* handle loading */
}
.layout-row {
position:relative;
display:grid;
grid-gap:0 var(--Photoset-Image-Spacing);
overflow:hidden;
}
.layout-row img {
position:absolute;
width:100%;
height:auto;
visibility:hidden;
object-fit:cover;
object-position:center;
cursor:pointer;
}
.layout-row.done img {
position:relative;
visibility:visible;
}
.legacy-photo img {
cursor:pointer;
}
/*------- PHOTO LIGHTBOXES -------*/
body[style*="overflow: hidden;"],
body[style*="overflow:hidden;"]{
overflow:inherit!important;
}
.tmblr-lightbox, #tumblr_lightbox {
background-image:none!important;
background-color:rgba({RGBcolor:background},0.69)!important;
backdrop-filter:blur(3px);
}
.tmblr-lightbox .vignette, #tumblr_lightbox #vignette {
opacity:0!important;
}
.tmblr-lightbox .lightbox-image,
.tmblr-lightbox img, #tumblr_lightbox img {
box-shadow:none!important;
border-radius:var(--Rounded-Corners)!important;
}
.tmblr-lightbox img, #tumblr_lightbox img {
max-width:none;
}
/*------- QUOTE POSTS -------*/
.quote-block {
}
.quote-set blockquote.quote-text {
margin-left:0;
padding:0;
border:none;
font-family:var(--Quote-Font-Family);
font-weight:var(--Quote-Font-Weight);
font-size:var(--Quote-Font-Size);
text-transform:var(--Quote-Text-Case);
letter-spacing:var(--Quote-Letter-Spacing);
word-spacing:var(--Quote-Word-Spacing);
line-height:var(--Quote-Line-Height);
text-align:center;
}
.comment-body .quote-set {
padding-right:var(--Reblog-Border-Gap-Right);
}
.quote-set > *:first-child { margin-top:0; }
.quote-set > *:last-child { margin-bottom:0; }
.quote-source {
text-align:center;
}
/*------- LINK POSTS -------*/
[post-type="link"] .link-render.photo-origin,
.link-block > .link-render {
}
.link-render {
display:block;
}
[post-type="link"] .link-render.photo-origin:last-child,
.link-block > .link-render:last-child {
margin-bottom:calc(0px - var(--Post-Padding));
}
.comment-body .link-render {
margin:1em 0;
}
.comment-body .link-render:first-child { margin-top:0 }
.comment-body .link-render:last-child { margin-bottom:0 }
.link-render h2 {
margin:0;
text-align:center;
}
.link-render h2 i[class*="right"],
.link-render h2 i[icon-name*="right"]{
margin-left:2px;
font-size:125%;
vertical-align:-5%;
}
.link-render .site-name {
display:flex;
align-items:center;
justify-content:center;
margin-top:0.45em;
color:var(--Body-Text-Color);
}
.link-render .site-name i[class]{
margin-left:calc(0px - var(--Caps-Font-Size) - 2px);
margin-right:min(0.45em, 8px);
font-size:calc(var(--Caps-Font-Size) + 2px);
line-height:1;
}
.npf-link-block {
display:none!important;
}
/*------- CHAT POSTS -------*/
.chat-block {
}
ul.chat-wrap {
list-style:none;
margin-left:0;
margin-right:0;
padding:0;
}
ul.chat-wrap:first-child { margin-top:0; }
ul.chat-wrap:last-child { margin-bottom:0; }
li.chat-line {
list-style:none;
padding:0.7rem 0.85rem;
}
li.chat-line:nth-of-type(odd){
background:var(--Post-Accent-BG);
border-radius:var(--Post-Accent-Rounded-Corners);
color:var(--Post-Accent-Text);
}
li.chat-line:nth-of-type(odd) b:first-child {
color:var(--Post-Accent-Text)!important;
}
li.chat-line:nth-of-type(even) b:first-child {
color:var(--Body-Text-Color)!important;
}
.chat-label:not(:last-child){
margin-right:1px;
}
/*------- AUDIO POSTS -------*/
.aud-gen {
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
}
.aud-gen + .comments {
}
.aud-cover {
position:relative;
width:var(--Audio-Post-Album-Cover-Size);
height:var(--Audio-Post-Album-Cover-Size);
z-index:0;
}
.aud-cover .aud-ctl, .aud-cover img {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}
.aud-gen img {
width:100%;
height:100%!important;
object-fit:cover;
border-radius:var(--Audio-Post-Album-Cover-Rounded-Corners);
z-index:1;
}
.aud-cover .aud-ctl {
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}
.aud-ctl .q-play,
.aud-ctl .q-pause {
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--Audio-Post-Btns-Size) + (var(--Audio-Post-Btns-Padding) * 2));
height:calc(var(--Audio-Post-Btns-Size) + (var(--Audio-Post-Btns-Padding) * 2));
background-color:var(--Audio-Post-Btns-BG);
border-radius:100%;
outline:none;
border:none;
line-height:0;
cursor:pointer;
}
.aud-ctl .q-pause, .aud-iframe {
display:none;
}
.aud-ctl .play-icon,
.aud-ctl .pause-icon {
display:block;
width:var(--Audio-Post-Btns-Size);
height:var(--Audio-Post-Btns-Size);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
background-color:var(--Audio-Post-Btns-Color);
}
.aud-ctl .play-icon {
margin-left:calc(var(--Audio-Post-Btns-Size) * 0.1);
-webkit-mask-image:var(--Audio-Post-Play-Btn-SVG);
mask-image:var(--Audio-Post-Play-Btn-SVG);
}
.aud-ctl .pause-icon {
width:calc(var(--Audio-Post-Btns-Size) * 1.1);
height:calc(var(--Audio-Post-Btns-Size) * 1.1);
-webkit-mask-image:var(--Audio-Post-Pause-Btn-SVG);
mask-image:var(--Audio-Post-Pause-Btn-SVG);
}
.aud-xyz {
flex:1;
}
.aud-info {
padding:0 var(--Audio-Post-Gutter);
}
.aud-dl {
display:block;
margin:0 calc(0px - var(--Audio-Post-Download-Icon-Touch-Padding));
padding:var(--Audio-Post-Download-Icon-Touch-Padding);
line-height:1;
}
.aud-dl i[class]{
font-size:var(--Audio-Post-Download-Icon-Size);
color:var(--Audio-Post-Download-Icon-Color);
}
.posts audio[controls]{
display:none!important;
}
.npf-audio-only {
--NPF-Images-Spacing:1em!important;
}
/* file.garden/ZRt8jW_MomIqlrfn/screenshots/innbv.png */
.npf_audio figure.sc-short {
position:relative;
z-index:0;
}
.npf_audio figure.sc-short:before {
content:"";
position:absolute;
top:0;left:0;
margin-top:1px;
width:20px;
height:20px;
border-radius:100%;
background:var(--Audio-Post-Btns-BG);
z-index:-1;
}
iframe[src*='open.spotify.com'][src*='track'],
figure[data-npf*='open.spotify.com'][data-npf*='track']{
height:80px!important;
}
iframe[src*='soundcloud.com']{
border-radius:3px!important;
overflow:hidden;
}
/*------- VIDEO POSTS -------*/
.legacy-video .tumblr_video_container {
width:auto!important;
height:auto!important;
max-width:100%;
}
/*------- ASK POSTS -------*/
.answer-block {
}
.question-part, .answer-part {
display:flex;
align-items:center;
gap:0 var(--Ask-Post-Question-Gutter);
padding:var(--Ask-Post-QnA-Padding);
background:var(--Ask-Post-QnA-BG);
border-radius:var(--Ask-Post-QnA-Rounded-Corners);
border:var(--Ask-Post-QnA-Border-Size) solid var(--Ask-Post-QnA-Border-Color);
}
.askerpic, .replypic {
flex-shrink:0;
align-self:flex-start;
width:var(--Ask-Post-Avatar-Size);
height:var(--Ask-Post-Avatar-Size);
border-radius:var(--Ask-Post-Avatar-Rounded-Corners);
}
.q-right, .a-left {
display:flex;
flex-direction:column;
flex:1;
gap:var(--Ask-Post-Username-Bottom-Gap) 0;
}
.q-top, .a-top {
margin:0;
}
.q-top a, .a-top a {
color:var(--Ask-Post-Username-Color);
}
.q-text > p:first-child, .a-text > p:first-child { margin-top:0; }
.q-text > p:last-child, .a-text > p:last-child { margin-bottom:0; }
.answer-part {
margin-top:var(--Ask-Post-QnA-Spacing);
}
[answer-right] .a-left {
text-align:end;
}
[answer-right] .a-left blockquote {
position:relative;
margin-left:0;
margin-right:calc((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2);
padding-left:0;
padding-right:calc(((var(--Reblog-Head-Image-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Reblog-Head-Gutter));
}
[answer-right] .a-left blockquote:not(.quote-text):before {
left:initial;
right:0;
}
.a-text > p:last-child,
.a-text > blockquote:last-child,
.a-text > blockquote:last-child > *:last-child,
.a-text > h1:last-child,
.a-text > h2:last-child,
.a-text > h3:last-child,
.a-text > h4:last-child,
.a-text > h5:last-child,
.a-text > h6:last-child,
.a-text > ul:last-child,
.a-text > ul:last-child > *:last-child,
.a-text > ol:last-child,
.a-text > ol:last-child > *:last-child {
margin-bottom:0;
}
/*------- POLL POSTS -------*/
.poll-post > .poll-question:first-child {
margin-top:0!important;
}
.poll-question {
margin-bottom:1em!important;
font-size:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.poll-row {
margin:0!important;
border:var(--Poll-Row-Border-Size) solid var(--Poll-Row-Border-Color)!important;
padding:var(--Poll-Row-Padding)!important;
background:var(--Poll-Row-BG)!important;
border-radius:var(--Poll-Row-Rounded-Corners)!important;
color:var(--Poll-Row-Text)!important;
min-height:0!important;
text-align:center!important;
line-height:inherit!important;
transition:background-color var(--Poll-Row-Hover-Speed) ease-in-out, border-color var(--Poll-Row-Hover-Speed) ease-in-out, color var(--Poll-Row-Hover-Speed) ease-in-out;
}
.poll-row:hover {
background-color:var(--Poll-Row-Hover-BG)!important;
border-color:var(--Poll-Row-Hover-Border-Color)!important;
color:var(--Poll-Row-Hover-Text-Color)!important;
}
.poll-row + .poll-row {
margin-top:var(--Poll-Row-Spacing)!important;
}
.poll-row:last-child {
margin-bottom:0!important;
}
/* if "see results" doesn't exist, create a space at the bottom since the poll container has something after it */
.poll-post:not(:last-child) .poll-row:last-child {
margin-bottom:1em!important;
}
.poll-post:not(:last-child) .poll-see-results {
margin-bottom:1em;
}
.poll-see-results {
margin-top:1em!important;
}
/*------- MISC NPF STUFF -------*/
p.npf_quote, p.npf_quirky {
line-height:var(--Quote-Line-Height)!important;
}
p.npf_quote {
font-size:var(--Quote-Font-Size)!important;
font-weight:var(--Quote-Font-Weight)!important;
}
p.npf_quirky {
font-size:calc(var(--Quote-Font-Size) + 1px)!important;
font-weight:normal!important;
}
/* tumblr.com/glen-test/738994635798691840 */
figure:not(.tmblr-full) + figure:not(.tmblr-full){
margin-top:var(--NPF-Images-Spacing);
}
.tmblr-full {
overflow:hidden;
}
p.tmblr-attribution:last-child {
margin-bottom:0;
}
/*------- TAGS -------*/
.tagscont {
display:grid;
}
html[page="index-page"] [tags-vis="toggle"] .tagscont {
grid-template-rows:0fr;
overflow:hidden;
}
html[page="index-page"] [tags-vis="toggle"] .tags-inner-x {
min-height:0;
opacity:0;
visibility:hidden;
}
.tags-inner-y {
display:flex;
margin-top:var(--Post-Padding);
}
.tagscont[align="left"] .tags-inner-y {
text-align:left;
justify-content:flex-start;
}
.tagscont[align="right"] .tags-inner-y {
text-align:right;
justify-content:flex-end;
}
html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont {
grid-template-rows:1fr;
}
html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont .tags-inner-x {
visibility:visible;
opacity:1;
}
html[page="index-page"] [tags-vis="toggle"] .tagscont {
/* collapse */
transition:grid-template-rows var(--Tags-Slide-Speed) var(--Tags-Time-Reduction) ease-in-out;
}
html[page="index-page"] [tags-vis="toggle"].tags-clicked .tagscont {
/* expand */
transition:grid-template-rows var(--Tags-Slide-Speed) 0s ease-in-out;
}
html[page="index-page"] [tags-vis="toggle"] .tags-inner-x {
/* open -> closed */
transition:visibility 0s var(--Tags-Fade-Speed) ease-in-out, opacity var(--Tags-Fade-Speed) 0s ease-in-out;
}
html[page="index-page"] [tags-vis="toggle"].tags-clicked .tags-inner-x {
/* closed -> open */
transition:visibility 0s 0s ease-in-out, opacity var(--Tags-Fade-Speed) var(--Tags-Time-Reduction) ease-in-out;
}
.tags-inner-z {
--Tags-Spacing-X-Half:calc(var(--Tags-Spacing-X) / 2);
--Tags-Spacing-Y-Half:calc(var(--Tags-Spacing-Y) / 2);
margin:calc(0px - var(--Tags-Spacing-Y-Half)) calc(0px - var(--Tags-Spacing-X-Half));
width:calc(100% + var(--Tags-Spacing-X));
font-size:0;
}
.tagscont a {
display:inline-block;
margin:var(--Tags-Spacing-Y-Half) var(--Tags-Spacing-X-Half);
font-size:var(--Tags-Font-Size);
color:var(--Tags-Color);
line-height:var(--Tags-Line-Height);
transition:color var(--Tags-Hover-Speed) ease-in-out;
}
.tagscont a:hover {
color:var(--Tags-Hover-Color);
}
.tagscont a:before {
content:"#";
margin-right:var(--Tags-Hashtag-Spacing);
}
/*------- POST INFO / PERMALINK -------*/
.infobar {
margin:var(--Post-Padding) calc(0px - var(--Post-Padding)) 0 calc(0px - var(--Post-Padding));
padding:var(--Post-Padding);
border-top:var(--Permalink-Border-Size) solid var(--Permalink-Border-Color);
border-bottom:var(--Permalink-Border-Size) solid var(--Permalink-Border-Color);
}
.infobar.bord-no {
padding-top:0;
border-top:none;
}
.infobar.flip-yes [class^="pho-"]{
flex-direction:row-reverse;
}
.infobar.flip-yes .post-controls {
margin-right:calc(0px - var(--Post-Controls-Padding) + 1px);
}
.infobar {
color:var(--Permalink-Text-Color);
}
.innerpho, .pho-top, .pho-bot {
display:flex;
justify-content:space-between;
width:100%;
gap:var(--Permalink-Items-Spacing);
}
.innerpho {
flex-direction:column;
align-items:flex-start;
align-items:center;
}
.infobar, .infobar a.perma {
font-size:var(--Permalink-Font-Size);
}
.infobar a.perma {
display:flex;
align-items:center;
gap:var(--Permalink-Items-Spacing);
margin:calc(0px - var(--Post-Controls-Padding));
padding:var(--Post-Controls-Padding);
line-height:1;
}
.infobar a:not([href],[data-clipboard-text]){
cursor:default;
}
.date-part.shorten-yes .tsy { display:none; }
.date-part.shorten-no .tsx, .date-part.shorten-no .tsz { display:none; }
/* permalink text colors */
.notes-part, .notes-part * {
color:var(--NoteCount-Text-Color)!important;
}
.date-part, .date-part * {
color:var(--TimeAgo-Text-Color)!important;
}
.src-part, .src-part * {
color:var(--Post-Source)!important;
}
/*-- permabar, top layer --*/
.pho-top {
align-items:flex-end;
}
.pho-top > *:first-child { text-align:left; }
.pho-top > *:last-child { text-align:right; }
.post-controls {
display:flex;
align-items:center;
justify-content:center;
margin-top:calc(0px - var(--Post-Controls-Padding));
margin-left:calc(0px - var(--Post-Controls-Padding));
margin-bottom:calc(0px - var(--Post-Controls-Padding));
}
.post-controls > * + * {
margin-left:var(--Post-Controls-Spacing);
}
.post-controls [class$="-area"]{
position:relative;
line-height:1;
}
.post-controls [class$="-area"] > *:last-child {
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:var(--Post-Controls-Padding);
z-index:0;
}
.post-controls [class$="-area"] > *:last-child:after {
content:"";
position:absolute;
width:0;
height:0;
border-radius:100%;
background:var(--Post-Controls-Hover-BG);
z-index:-1;
transition:width var(--Post-Controls-Hover-Speed) ease-in-out, height var(--Post-Controls-Hover-Speed) ease-in-out;
}
.post-controls [class$="-area"] > *:last-child:hover:after {
width:100%;
height:100%;
}
.post-controls [class$="-area"] button {
background:transparent;
border:none;
cursor:help;
}
.post-controls a[href]:not([href=""]){ cursor:pointer; }
.post-controls i[class]{
display:block;
font-size:var(--Post-Controls-Icon-Size);
color:var(--Post-Controls-Icon-Color);
transition:color var(--Post-Controls-Hover-Speed) ease-in-out;
}
.post-controls i.ph-heart {
font-size:calc(var(--Post-Controls-Icon-Size) - 1px);
}
/* this is solely for i.mgc_refresh_3_line */
.post-controls .rb-area > a:first-child {
margin-right:-1px;
}
.post-controls [class$="-area"] > *:last-child:hover i[class]{
color:var(--Post-Controls-Hover-Icon-Color);
}
.copy-area[c="hide"]{
display:none;
}
.copy-area .after, .copy-area.c .before, .copied-label {
display:none;
}
.copy-area.c .after, .copy-area.c + .copied-label {
display:block;
}
.copied-label {
font-size:var(--Permalink-Font-Size);
margin-left:var(--Post-Controls-Padding);
}
.infobar.flip-yes .copied-label {
padding-right:var(--Post-Controls-Padding);
}
.like_button {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background:black;
opacity:0;
overflow:hidden;
z-index:2;
}
.like_button > iframe {
display:block;
width:100%;
height:100%;
}
.like_button.liked + i[class*="heart"],
.like_button.liked + [icon-name*="heart"]{
color:var(--Liked-Button-Color)!important;
}
html[page="permalink-page"] .tags-icon-area,
html[page="index-page"] [tags-vis="always"] .tags-icon-area {
display:none;
}
/*-- permabar, bottom layer --*/
.pho-bot {
align-items:flex-start;
line-height:1;
font-size:calc(var(--Body-Font-Size) - 1px);
letter-spacing:.3px;
}
.pho-bot > *:first-child { text-align:left; }
.pho-bot > .date-part:first-child {
margin-left:1px;
}
.via-part, .src-part {
display:flex;
align-items:center;
}
.et-symbol {
display:block;
margin-top:-1px;
font-family:"Rethink Sans", sans-serif;
transform-origin:center;
transform:perspective(0);
padding-right:1px;
}
/*------- PAGES -------*/
/* e.g. "Not Found" page */
.posts[id="post-"]{
padding-bottom:var(--Post-Padding);
border-bottom:var(--Container-Border-Size) solid var(--Container-Border-Color);
}
.posts[id="post-"] .post-title {
margin:0!important;
}
.posts[id="post-"] .text-block > h1.post-title:first-child:not(:last-child) + .comments {
margin-top:calc((var(--Heading-Font-Size) * -1.33) + 1em)!important;
}
/*------- POST NOTES -------*/
.posts + .post-notes {
margin-top:calc(0px - var(--Post-Padding));
}
.post-notes {
padding:var(--Post-Padding);
}
ol.notes {
list-style:none;
margin:0;
padding:0;
}
ol.notes img {
display:none;
}
ol.notes a {
color:var(--Reblog-Name-Color);
}
ol.notes > li {
margin-left:calc(var(--Post-Notes-Type-Icon-Size) + var(--Post-Notes-Type-Icon-Gap-Right));
}
ol.notes > li + li {
margin-top:var(--Post-Notes-Row-Spacing);
}
ol.notes blockquote:last-child {
margin-bottom:0;
}
ol.notes li.note > span.action > a:first-of-type {
position:relative;
}
/* all the :before icon font stuff here */
ol.notes li > span.action > a:first-of-type:before {
position:absolute;
content:"";
top:0;left:0;
margin-left:calc(0px - var(--Post-Notes-Type-Icon-Size) - var(--Post-Notes-Type-Icon-Gap-Right));
display:flex;
align-items:center;
height:100%;
transform-origin:center;
font-size:var(--Post-Notes-Type-Icon-Size);
color:var(--Reblog-Name-Color);
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-text-stroke-color:currentColor;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* JohnSmith posted this: [...caption] */
ol.notes li.original_post blockquote {
display:none;
}
/* JohnSmith liked this post */
/* icon: heart */
ol.notes li.like > span.action > a:first-of-type:before {
font-family:"Phosphor-Bold";
content:"\eb8a";
font-size:calc(var(--Post-Notes-Type-Icon-Size) - 1px);
}
/* JohnSmith reblogged this from JaneDoe */
/* icon: refresh */
ol.notes li.reblog.without_commentary > span.action > a:first-of-type:before {
font-family:"MingCute";
content:"\f0f5";
}
/* JohnSmith added this GIF to a post */
/* icon: picture/image */
ol.notes li.post_attribution > span.action > a:first-of-type:before {
font-family:"MingCute";
content:"\f077";
}
/* JohnSmith replied: "..." */
/* JohnSmith said: "..." */
/* JohnSmith posted this */
/* icon: message */
ol.notes li.reblog.with_commentary > span.action > a:first-of-type:before,
ol.notes li.reply > span.action > a:first-of-type:before,
ol.notes li.original_post > span.action > a:first-of-type:before {
font-family:"MingCute";
content:"\ef8f"!important;
}
/* replies */
ol.notes blockquote, ol.notes .answer_content {
display:block;
margin-left:calc(0px - var(--Post-Notes-Type-Icon-Size) - var(--Post-Notes-Type-Icon-Gap-Right) + ((var(--Post-Notes-Type-Icon-Size) - var(--Blockquote-Border-Size)) / 2));
padding-left:calc(((var(--Post-Notes-Type-Icon-Size) - var(--Blockquote-Border-Size)) / 2) + var(--Post-Notes-Type-Icon-Gap-Right) + var(--Blockquote-Border-Size));
}
li.more_notes_link_container {
margin-left:0!important;
}
/*------- PAGINATION -------*/
.botpagi {
padding:var(--Post-Padding);
/*border-top:var(--Container-Border-Size) solid var(--Container-Border-Color);*/
}
html[infscroll="no"] .bp-wrap.spinner { display:none; }
.botpagi, .botpagi a {
color:var(--Pagination-Color)
}
.botpagi i[class]{
font-size:var(--Pagination-Arrows-Size);
}
.bp-wrap {
display:flex;
align-items:center;
justify-content:center;
gap:var(--Pagination-Items-Spacing);
}
.bp-wrap > a {
display:flex;
align-items:center;
justify-content:space-between;
gap:3px;
}
/*------- SPINNER -------*/
html[infscroll="yes"] .bp-wrap.jump-pagi { display:none; }
.bp-wrap.spinner {
opacity:0;
}
.botpagi .spinner a { pointer-events:none!important; }
.botpagi .spinner-svg {
width:var(--Spinner-Size);
height:var(--Spinner-Size);
}
.botpagi .spinner-svg svg {
display:block;
width:100%;
height:100%;
}
/*------- BACK TO TOP BUTTON -------*/
.back-to-top {
position:fixed;
bottom:0;right:0;
margin-bottom:var(--BackToTop-Corner-Offset);
margin-right:var(--BackToTop-Corner-Offset);
visibility:hidden;
opacity:0;
transition:opacity 0.3s ease-in-out, visibility 0s 0.3s ease-in-out;
z-index:8;
}
.back-to-top.btt-hide {
display:none!important;
}
.back-to-top.f {
visibility:visible;
opacity:1;
transition:opacity 0.3s ease-in-out, visibility 0s 0s ease-in-out;
}
.back-to-top button {
background:var(--BackToTop-Button-BG);
border:1px solid var(--BackToTop-Button-Border);
padding:var(--BackToTop-Button-Padding);
border-radius:var(--BackToTop-Button-Rounded-Corners);
font-size:var(--BackToTop-Button-Size);
box-shadow:4px 4px 15px rgba(0,0,0,4%);
line-height:0;
cursor:pointer;
}
.back-to-top button i[class]{
color:var(--BackToTop-Button-Icon-Color);
}
/*------- TOOLTIPS -------*/
.tippy-box {
border:var(--Tooltips-Border-Size) solid var(--Tooltips-Border);
background:var(--Tooltips-BG);
border-radius:var(--Tooltips-Rounded-Corners);
}
.tippy-content {
padding:calc(var(--Tooltips-Padding-Y) - (((var(--Caps-Font-Size) * var(--Body-Line-Height)) - var(--Caps-Font-Size)) / 2)) var(--Tooltips-Padding-X);
font-family:var(--Caps-Font-Family);
font-weight:var(--Caps-Font-Weight);
font-size:var(--Tooltips-Font-Size);
text-transform:uppercase;
letter-spacing:var(--Caps-Letter-Spacing);
word-spacing:var(--Caps-Word-Spacing);
color:var(--Tooltips-Text-Color);
line-height:var(--Body-Line-Height);
}
a[aria-label]:not([aria-label=""]) > i[class]:not([class=""]){
pointer-events:none; /* prevents tooltip flickering */
}
/*------- SCREEN READER TEXT -------*/
.sr-text {
position:absolute;
border:0;
clip:rect(1px, 1px, 1px, 1px);
clip-path:inset(50%);
margin:-1px;
width:1px;
height:1px;
padding:0;
overflow:hidden;
word-wrap:normal!important;
}
/*------- RESPONSIVENESS -------*/
@media(max-width:669px){
html:not([current-path="/customize_preview_receiver.html"]) .nav1 .nav-inner {
flex-wrap:wrap;
}
html:not([current-path="/customize_preview_receiver.html"]) .nav1 .nav-inner > a {
flex:1 1 90px!important;
}
html:not([current-path="/customize_preview_receiver.html"]) .nav3 .nav-inner {
display:flex!important;
}
html:not([current-path="/customize_preview_receiver.html"]) .nav3 .nav-inner > * {
flex:1 1 90px!important;
}
}
/*------- CUSTOMIZE PAGE ADJUSTMENTS -------*/
.comment[username=""] .comment-header {
display:none;
}
html[current-path="/customize_preview_receiver.html"] .bp-wrap.spinner {
display:none;
}
{CustomCSS}
</style>
</head>
<body>
<div class="tg">
<div class="te">
<div class="tp"></div>
<div class="tq"></div>
</div>
</div>
<!----- BACK TO TOP BUTTON ----->
<div class="back-to-top btt-{select:back to top button}">
<button aria-label="{lang:Back to top}">
<i class="ph-bold ph-caret-up"></i>
</button>
</div>
<main>
<!------- CONTAINER ------->
<section class="maincont shad-{select:side shadows}">
<!----- TOPNAV ----->
<nav class="nav1">
<div class="nav-inner">
<!-- home link -->
<a href="/" aria-label="Back to main">
<span>Home</span>
</a>
<!-- ask link -->
<a href="/ask"{block:AskEnabled} aria-label="{AskLabel}"{/block:AskEnabled}>
<span>Askbox</span>
</a>
<!-- archive link -->
<a href="/archive" aria-label="View past posts">
<span>Archive</span>
</a>
<!-- THEME CREDIT -->
<!-- pls do not remove, ty! -->
<a href="//glenthemes.tumblr.com" aria-label="&#x2726;&#x2002;&#x201C;Clotho&#x201D; theme by glenthemes&#x2002;&#x2726;">
<span>Theme</span>
</a>
</div>
</nav>
<!------- HEADER ------->
<header>
<div class="head-flex">
<div class="head-left">
<!---- HEADER TITLE ---->
<div class="tit-cont tit-{select:show title}">
{block:ifheadertitle}
<h1>{text:header title}</h1>
{/block:ifheadertitle}
{block:ifnotheadertitle}
<h1>{Title}</h1>
{/block:ifnotheadertitle}
</div><!--end tit-cont-->
<div class="subt-cont{block:ifheadersubtitle} has-sub{/block:ifheadersubtitle} user-{select:show username} sub-{select:show subtitle}">
<!---- HEADER USERNAME ---->
<div class="name-cont">
<a href="/">
<span class="et-symbol">@</span>
<span class="name-text">{Name}</span>
</a>
</div><!--end name-cont-->
<!---- HEADER SUBTITLE ---->
{block:ifheadersubtitle}
<div class="subt-text {select:subtitle style}-style">
<p>{text:header subtitle}</p>
</div>
{/block:ifheadersubtitle}
</div><!--end subt-cont-->
<!---- HEADER DESC ---->
<div class="desc-cont desc-{select:show desc}">
{block:ifheaderdesc}
<article>{text:header desc}</article>
{/block:ifheaderdesc}
{block:Description}
{block:ifnotheaderdesc}
<article>{Description}</article>
{/block:ifnotheaderdesc}
{/block:Description}
</div><!--end description-->
<div class="jus-flex nav2-pos-{select:social links position} stat-{select:show status}">
<!---- HEADER STATUS ---->
<div class="status-area">
{block:ifheaderstatusiconname}
<span class="status-icon">
<!--<i class="ph ph-{text:header status icon name}"></i>-->
<i class="hugeicons" icon-name="{text:header status icon name}"></i>
</span>
{/block:ifheaderstatusiconname}
<span class="status-text">
{text:header status text}
</span>
</div><!--end status-area-->
<!---- SOCIAL LINKS / SOCIAL MEDIA LINKS ---->
<nav class="nav2">
{block:ifsociallink1iconname}
<a {block:ifsociallink1URL}href="{text:social link 1 URL}"{/block:ifsociallink1URL} aria-label="{text:social link 1 text}">
<i class="ios-17-logos" icon-name="{text:social link 1 icon name}"></i>
</a>
{/block:ifsociallink1iconname}
{block:ifsociallink2iconname}
<a {block:ifsociallink2URL}href="{text:social link 2 URL}"{/block:ifsociallink2URL} aria-label="{text:social link 2 text}">
<i class="ios-17-logos" icon-name="{text:social link 2 icon name}"></i>
</a>
{/block:ifsociallink2iconname}
{block:ifsociallink3iconname}
<a {block:ifsociallink3URL}href="{text:social link 3 URL}"{/block:ifsociallink3URL} aria-label="{text:social link 3 text}">
<i class="ios-17-logos" icon-name="{text:social link 3 icon name}"></i>
</a>
{/block:ifsociallink3iconname}
{block:ifsociallink4iconname}
<a {block:ifsociallink4URL}href="{text:social link 4 URL}"{/block:ifsociallink4URL} aria-label="{text:social link 4 text}">
<i class="ios-17-logos" icon-name="{text:social link 4 icon name}"></i>
</a>
{/block:ifsociallink4iconname}
</nav>
</div>
</div><!--end head-left-->
<div class="head-right">
<!---- ICON IMAGE ---->
<div class="avi-cont icon-{select:show icon image}" img="{image:header icon}">
<img src="{image:header icon}">
</div><!--end header icon-->
</div><!--end head-right-->
</div><!--end head-flex-->
<!---- CUSTOM LINKS / CUSTOMLINKS ---->
<nav class="nav3 cols-{select:custom links columns}">
<div class="nav-inner">
{block:ifcustomlink1text}
<a href="{text:custom link 1 URL}">
<span>{text:custom link 1 text}</span>
</a>
{/block:ifcustomlink1text}
{block:ifcustomlink2text}
<a href="{text:custom link 2 URL}">
<span>{text:custom link 2 text}</span>
</a>
{/block:ifcustomlink2text}
{block:ifcustomlink3text}
<a href="{text:custom link 3 URL}">
<span>{text:custom link 3 text}</span>
</a>
{/block:ifcustomlink3text}
{block:ifcustomlink4text}
<a href="{text:custom link 4 URL}">
<span>{text:custom link 4 text}</span>
</a>
{/block:ifcustomlink4text}
{block:ifcustomlink5text}
<a href="{text:custom link 5 URL}">
<span>{text:custom link 5 text}</span>
</a>
{/block:ifcustomlink5text}
{block:ifcustomlink6text}
<a href="{text:custom link 6 URL}">
<span>{text:custom link 6 text}</span>
</a>
{/block:ifcustomlink6text}
</div><!--end nav-inner-->
</nav>
</header>
<!------- POSTS CONTAINER ------->
<section class="all-posts">
<!------- POSTS ------->
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<article
class="posts load-in"
id="post-{PostID}"
post-type="{PostType}"
post-url="{Permalink}"
root-url="{block:NotReblog}{Permalink}{block:NotReblog}{block:RebloggedFrom}{ReblogRootURL}{/block:RebloggedFrom}"
username="{block:NotReblog}{Name}{/block:NotReblog}{block:RebloggedFrom}{ReblogRootName}{/block:RebloggedFrom}"
reblog-url="{ReblogURL}"
tags-vis="{select:tags}"
>
<div class="post-body">
<!------ TEXT POSTS ------>
{block:Text}
<div class="text-block">
{block:Title}
<h1 class="post-title">{Title}</h1>
{/block:Title}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
{block:Date}
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
{/block:Date}
<div class="comment-body">{Body}</div>
</div>
</div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div><!--end block:text-->
{/block:Text}
<!------ PHOTO POSTS: SINGLE PHOTO ------>
{block:Photo}
<div class="photo-block">
<div class="legacy-photo">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
</div>
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body"></div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end photo-block-->
{/block:Photo}
<!------ PHOTO POSTS: PHOTOSET ------>
{block:Photoset}
<div class="photo-block">
<div class="legacy-photoset" layout="{PhotosetLayout}">
{block:Photos}
<img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"/>
{/block:Photos}
</div>
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body"></div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end photo-block-->
{/block:Photoset}
<!------ PHOTO POSTS: PANORAMA ------>
{block:Panorama}
<div class="photo-block">
<div class="legacy-photo pano">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
</div>
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body"></div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end photo-block-->
{/block:Panorama}
<!------ QUOTE POSTS ------>
{block:Quote}
<div class="quote-block inc-op">
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<div class="quote-set">
<blockquote class="quote-text">
&ldquo;{Quote}&rdquo;
</blockquote>
{block:Source}
<p class="quote-source">{Source}</p>
{/block:Source}
</div><!--end quote-set-->
</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<div class="quote-set">
<blockquote class="quote-text">
&ldquo;{Quote}&rdquo;
</blockquote>
{block:Source}
<p class="quote-source">{Source}</p>
{/block:Source}
</div><!--end quote-set-->
</div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end quote-block-->
{/block:Quote}
<!------ LINK POSTS ------>
{block:Link}
<div class="link-block inc-op">
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment not-reblog" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<a href="{URL}" class="link-render" {Target}>
<h2>{Name}<i class="eva-icons" icon-name="arrowhead-right-outline"></i></h2>
{block:Host}
<div class="site-name">
<i class="eva-icons" icon-name="link-2-outline"></i>
<span>{Host}</span>
</div>
{/block:Host}
</a>
{Body}
</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<a href="{URL}" class="link-render" {Target}>
<h2>{Name}<i class="eva-icons" icon-name="arrowhead-right-outline"></i></h2>
{block:Host}
<div class="site-name">
<i class="eva-icons" icon-name="link-2-outline"></i>
<span>{Host}</span>
</div>
{/block:Host}
</a>
{Body}
</div>
</div>
{/block:Reblogs}
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end link-block-->
{/block:Link}
<!------ CHAT POSTS ------>
{block:Chat}
<div class="chat-block inc-op">
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment not-reblog" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<ul class="chat-wrap">
{block:Lines}
<li class="chat-line">
{block:Label}
<b class="chat-label">{Label}</b>
{/block:Label}
<span class="chat-content"> {Line}</span>
</li>
{/block:Lines}
</ul>
</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">
<ul class="chat-wrap">
{block:Lines}
<li class="chat-line">
{block:Label}
<b class="chat-label">{Label}</b>
{/block:Label}
<span class="chat-content"> {Line}</span>
</li>
{/block:Lines}
</ul>
</div>
</div>
{/block:Reblogs}
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end chat-block-->
{/block:Chat}
<!------ AUDIO POSTS ------>
{block:Audio}
<div class="audio-block inc-op">
<div class="legacy-audio aud-gen">
<div class="aud-cover">
<div class="aud-ctl">
<button class="q-play" aria-label="Play">
<span class="play-icon" aria-hidden="true"></span>
</button>
<button class="q-pause" aria-label="Pause">
<span class="pause-icon" aria-hidden="true"></span>
</button>
</div>
{block:AlbumArt}
<img src="{AlbumArtURL}" alt="{block:Album}&ldquo;{Album}&rdquo; {/block:Album}album cover{block:Artist} by {Artist}{/block:Artist}"/>
{block:AlbumArt}
</div>
<div class="aud-xyz">
<div class="aud-info">
{block:TrackName}
<div class="aud-title">
{TrackName}
</div>
{/block:TrackName}
{block:Artist}
<div class="aud-artist">
{Artist}
</div>
{/block:Artist}
{block:Album}
<div class="aud-album">
{Album}
</div>
{/block:Album}
</div><!--end aud-info (text)-->
{block:AudioPlayer}
<div class="aud-iframe">{AudioPlayer}</div>
{/block:AudioPlayer}
</div><!--end aud-xyz-->
<a class="aud-dl" href="javascript:void(0)" target="_blank" aria-label="Download">
<i class="mgc_download_2_line"></i>
</a>
</div><!--end audio-gen-->
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end audio-block-->
{/block:Audio}
<!------ VIDEO POSTS ------>
{block:Video}
<div class="video-block">
<div class="legacy-video">
{Video-500}
{block:VideoThumbnail}
<span class="poster-thumb" url="{VideoThumbnailURL}"></span>
{/block:VideoThumbnail}
</div>
{block:Date}
{block:NotReblog}
<div class="comments all-comments">
<div class="comment original-comment" username="{Name}">
<div class="comment-header">
<a href="{Permalink}">
<img class="userpic" src="{PortraitURL-64}" alt="{Name}'s avatar">
<span class="username">{Name}</span>
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Name}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end notreblog-->
{/block:NotReblog}
{block:RebloggedFrom}
<div class="comments all-comments">
{block:Reblogs}
<div class="comment{block:IsOriginalEntry} original-comment{/block:IsOriginalEntry}{block:IsNotOriginalEntry} extra-comment{/block:IsNotOriginalEntry}{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a{block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
{/block:Reblogs}
<div class="comment add-op-comment" username="{ReblogRootName}">
<div class="comment-header">
<a href="{ReblogRootURL}">
<img class="userpic" src="{ReblogRootPortraitURL-64}">
<span class="username">{ReblogRootName}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{ReblogRootName}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{ReblogRootURL}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div>
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end video-block-->
{/block:Video}
<!------ ASK POSTS ------>
{block:Answer}
<div class="answer-block">
<div class="question-part">
<img class="askerpic" src="{AskerPortraitURL-128}"/>
<div class="q-right">
<p class="q-top">{lang:Asker asked 2}:</p>
<div class="q-text">{Question}</div>
</div>
</div>
{block:Date}
{block:NotReblog}
<div class="answer-part op-answer">
<div class="a-left">
<p class="a-top"><a href="/">{Name}</a> answered:</p>
<div class="a-text replies">{Replies}</div>
</div>
<img class="replypic" src="{PortraitURL-128}" alt="{Name}'s avatar">
</div>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Answerer}
<div class="answer-part rb-answer">
<div class="a-left">
<p class="a-top">
<a href="{ReblogRootURL}">{ReblogRootName}</a>
answered:
</p>
<div class="a-text replies">{Answer}</div>
</div>
<img class="replypic" src="{ReblogRootPortraitURL-128}" alt="{ReblogRootName}'s avatar">
</div>
{/block:Answerer}
<div class="comments all-comments">
{block:Reblogs}
{block:IsNotOriginalEntry}
<div class="comment extra-comment{block:IsDeactivated} deactivated{/block:IsDeactivated}" username="{Username}">
<div class="comment-header">
<a {block:IsActive} href="{Permalink}"{/block:IsActive}>
<img class="userpic" src="{PortraitURL-64}" alt="{Username}'s avatar">
<span class="username">{Username}</span>
{block:IsDeactivated}
<span class="deactivated">(deactivated)</span>
{/block:IsDeactivated}
</a>
<div class="droite">
{block:PinnedPostLabel}
<div class="pinned-area">
<i class="mgc_pin_2_line"></i>
<span class="pinned-label">{PinnedPostLabel}</span>
</div>
{/block:PinnedPostLabel}
<button class="comment-dots" aria-label="{lang:More}">
<i class="mgc_more_1_fill"></i>
</button>
</div><!--end droite-->
<div class="comment-menu">
<a class="cm-view-blog" href="//{Username}.tumblr.com">
<i class="mgc_user_1_line"></i>
<span>View blog</span>
</a>
<a class="cm-post-link" href="{Permalink}">
<i class="mgc_eye_line"></i>
<span>View post</span>
</a>
<a class="cm-reblog-link" href="#">
<i class="mgc_refresh_3_line"></i>
<span>Reblog</span>
</a>
</div>
</div>
<div class="comment-body">{Body}</div>
</div><!--end single comment-->
{/block:IsNotOriginalEntry}
{/block:Reblogs}
</div><!--end reblogs-->
{/block:RebloggedFrom}
{/block:Date}
</div><!--end answer-block-->
{/block:Answer}
</div><!--end post-body-->
<!------ TAGS ------>
{block:HasTags}
<div class="tagscont" align="{select:tags position}">
<div class="tags-inner-x">
<div class="tags-inner-y">
<div class="tags-inner-z">
{block:Tags}
<a href="{TagURL}" tag="{URLSafeTag}">{Tag}</a>
{/block:Tags}
</div>
</div>
</div>
</div>
{/block:HasTags}
<!------ POST INFO / PERMALINK ------>
{block:Date}
<div class="infobar flip-{select:flip post info} bord-{select:post info border}">
<div class="innerpho">
<div class="pho-top">
<!-- like & reblog btns -->
<div class="post-controls">
<!---- LIKE BUTTON ---->
<div class="like-area" aria-label="Like">
{LikeButton}
<i class="ph-bold ph-heart"></i>
</div>
<!---- REBLOG LINK ---->
<div class="rb-area">
<a href="{ReblogURL}" aria-label="Reblog" target="_blank">
<i class="mgc_refresh_3_line"></i>
</a>
</div>
<!---- TAGS TOGGLE ---->
{block:IndexPage}
{block:HasTags}
<div class="tags-icon-area">
<button aria-label="{lang:Tags}">
<i class="eva-icons" icon-name="pricetags-outline"></i>
</button>
</div>
{/block:HasTags}
{/block:IndexPage}
<!---- COPY LINK TO POST ---->
<div class="copy-area" c="{select:show copy link}">
<a data-clipboard-text="{Permalink}" aria-label="Copy link to post">
<span class="before">
<i class="mgc_send_plane_line"></i>
</span>
<span class="after">
<i class="mgc_check_line"></i>
</span>
</a>
</div>
<span class="copied-label">Copied!</span>
</div><!--end post-controls-->
<!-- permalink -->
<a class="perma"{block:IndexPage} href="{Permalink}" aria-label="View post"{/block:IndexPage}>
<!-- no. of notes -->
<div class="notes-part">
{NoteCountWithLabel}
</div>
</a><!--end permalink (right)-->
</div><!--end pho-top-->
<div class="pho-bot">
<!-- date posted / reblogged -->
<a class="date-part shorten-{select:shorten timestamps}"{block:IndexPage} href="{Permalink}" aria-label="{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}"{/block:IndexPage}>
{block:IndexPage}
<span class="tsx">{Timestamp}</span>
<span class="tsy">{TimeAgo}</span>
{/block:IndexPage}
{block:PermalinkPage}
{Month} {DayOfMonth}{DayOfMonthSuffix} {Year}
{/block:PermalinkPage}
</a>
<!-- OP -->
<div class="src-part">
<span class="et-symbol">@</span>
{block:NotReblog}
<a href="{Permalink}" aria-label="Original Poster">{Name}</a>
{/block:NotReblog}
{block:RebloggedFrom}
<a href="{ReblogRootURL}" aria-label="Original Poster">{ReblogRootName}</a>
{/block:RebloggedFrom}
</div>
</div><!--end pho-bot-->
</div><!--end innerpho-->
</div><!--end infobar-->
{/block:Date}
</article><!--end a post-->
<!------ POST NOTES ------>
{block:PostNotes}
<div class="post-notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
</section><!--end all posts-->
<!------ PAGINATION ------>
{block:Pagination}
<div class="botpagi">
<div class="bp-wrap jump-pagi">
{block:PreviousPage}
<a class="prev-page" href="{PreviousPage}" aria-label="Previous Page">
<i class="eva-icons" icon-name="arrowhead-left-outline"></i>
<span>Previous Page</span>
</a>
{/block:PreviousPage}
{block:NextPage}
<a class="next-page" href="{NextPage}" aria-label="Next Page">
<span>Next Page</span>
<i class="eva-icons" icon-name="arrowhead-right-outline"></i>
</a>
{/block:NextPage}
</div><!--end bp-wrap-->
{block:NextPage}
<div class="bp-wrap spinner">
<a href="{NextPage}" tabindex="-1" aria-hidden="true">
<div class="spinner-svg"></div>
</a>
</div>
{/block:NextPage}
</div><!--end botpagi-->
{/block:Pagination}
</section><!--end maincont-->
</main><!--end main-->
</body>
</html>