4954 lines
182 KiB
Plaintext
4954 lines
182 KiB
Plaintext
<!-------------------------------------------------------------------
|
||
|
||
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:📸  ──  𝐈𝐌𝐀𝐆𝐄𝐒 :" 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:🎨  ──  𝐌𝐀𝐈𝐍 𝐂𝐎𝐋𝐎𝐑𝐒 :" 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:🎨  ──  𝐓𝐎𝐏 𝐍𝐀𝐕 𝐋𝐈𝐍𝐊𝐒 :" 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:🎨  ──  𝐇𝐄𝐀𝐃𝐄𝐑 𝐓𝐄𝐗𝐓 :" 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:🎨  ──  𝐃𝐄𝐒𝐂𝐑𝐈𝐏𝐓𝐈𝐎𝐍 :" 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:🎨  ──  𝐈𝐂𝐎𝐍 / 𝐀𝐕𝐀𝐓𝐀𝐑 :" content="">
|
||
|
||
<meta name="color:header icon BG" content="#fff">
|
||
<meta name="color:header icon border" content="#f0f0f0">
|
||
|
||
<!-- divider: status -->
|
||
<meta name="color:🎨  ──  𝐒𝐓𝐀𝐓𝐔𝐒 :" content="">
|
||
|
||
<meta name="color:header status icon" content="#6f7580">
|
||
<meta name="color:header status text" content="#6f7580">
|
||
|
||
<!-- divider: socials -->
|
||
<meta name="color:🎨  ──  𝐒𝐎𝐂𝐈𝐀𝐋𝐒 :" 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:🎨  ──  𝐂𝐔𝐒𝐓𝐎𝐌 𝐋𝐈𝐍𝐊𝐒 :" 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:🎨  ──  𝐌𝐀𝐈𝐍 𝐓𝐄𝐗𝐓 :" 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:🎨  ──  𝐒𝐏𝐄𝐂𝐈𝐀𝐋 𝐓𝐄𝐗𝐓 :" 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:🎨  ──  𝐏𝐎𝐒𝐓𝐒 𝐌𝐄𝐍𝐔 :" 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:🎨  ──  𝐁𝐔𝐓𝐓𝐎𝐍𝐒 :" content="">
|
||
|
||
<meta name="color:buttons BG" content="#3f424a">
|
||
<meta name="color:buttons icons" content="#eee">
|
||
|
||
<!-- divider: tags -->
|
||
<meta name="color:🎨  ──  𝐓𝐀𝐆𝐒 :" content="">
|
||
|
||
<meta name="color:tags" content="#6f7580">
|
||
<meta name="color:tags hover" content="#4b4e57">
|
||
|
||
<!-- divider: posts info -->
|
||
<meta name="color:🎨  ──  𝐏𝐎𝐒𝐓𝐒 𝐈𝐍𝐅𝐎 :" 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:🎨  ──  𝐓𝐄𝐗𝐓 𝐇𝐈𝐆𝐇𝐋𝐈𝐆𝐇𝐓 :" content="">
|
||
|
||
<meta name="color:text highlight BG" content="#b4d7ff">
|
||
<meta name="color:text highlighted" content="#6f7580">
|
||
|
||
<!-- divider: tooltips -->
|
||
<meta name="color:🎨  ──  𝐓𝐎𝐎𝐋𝐓𝐈𝐏𝐒 :" 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:🎨  ──  𝐎𝐓𝐇𝐄𝐑 𝐂𝐎𝐋𝐎𝐑𝐒 :" 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:🔽  ──  𝐆𝐄𝐍𝐄𝐑𝐀𝐋 :" 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 / repeating" content="repeat">
|
||
<meta name="select:background image size" title="large / 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:🔽 ─── 𝐅𝐎𝐍𝐓𝐒：" 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:🔽 ─── 𝐓𝐎𝐏 𝐍𝐀𝐕：" 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:🔽 ─── 𝐇𝐄𝐀𝐃𝐄𝐑：" 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:🔽 ─── 𝐇𝐄𝐀𝐃𝐄𝐑 𝐓𝐈𝐓𝐋𝐄：" 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:🔽 ─── 𝐇𝐄𝐀𝐃𝐄𝐑 𝐔𝐒𝐄𝐑𝐍𝐀𝐌𝐄：" 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:🔽 ─── 𝐒𝐔𝐁𝐓𝐈𝐓𝐋𝐄：" 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:🔽 ─── 𝐃𝐄𝐒𝐂𝐑𝐈𝐏𝐓𝐈𝐎𝐍：" 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:🔽 ─── 𝐒𝐓𝐀𝐓𝐔𝐒：" 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:🔽 ─── 𝐇𝐄𝐀𝐃𝐄𝐑 𝐈𝐂𝐎𝐍：" 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:🔽 ─── 𝐒𝐎𝐂𝐈𝐀𝐋 𝐋𝐈𝐍𝐊𝐒：" 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:🔽 ─── 𝐂𝐔𝐒𝐓𝐎𝐌 𝐋𝐈𝐍𝐊𝐒：" 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:🔽 ─── 𝐏𝐎𝐒𝐓𝐒：" 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:🔽  ──  𝐓𝐀𝐆𝐒 :" 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:🔽  ──  𝐏𝐎𝐒𝐓 𝐈𝐍𝐅𝐎 :" 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:󠀠⁠" content="━━━━༺❀༻━━━━
">
|
||
|
||
<meta name="text:header title" content="clotho.">
|
||
<meta name="text:header subtitle" content="omnia vincit amor">
|
||
<meta name="text:header desc" content="⁠⁠“Love is always reaching for the stars and missing them, but in the missing, we know that we have tried.” — <b>L.M. Montgomery</b>, <i>Chronicles of Avonlea</i>">
|
||
|
||
<meta name="text:󠀠⁠" content="──── · · · · ✦ · · · · ─────
">
|
||
|
||
<meta name="text:header status icon list 👇" content="https://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 <span>SOMETHING</span>">
|
||
|
||
<meta name="text:󠀠⁠⁠" content="━━━━༺❀༻━━━━
">
|
||
|
||
<meta name="text:social icons list 👇" content="https://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:󠀠⁠⁠⁠" content="━━━━༺❀༻━━━━
">
|
||
|
||
<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="✦ “Clotho” theme by glenthemes ✦">
|
||
<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">
|
||
“{Quote}”
|
||
</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">
|
||
“{Quote}”
|
||
</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}“{Album}” {/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> |