API tools faq
paste
rapsodias

.artdeco theme.

rapsodias
Nov 4th, 2025 (edited)
739
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 96.37 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. ⠀⠀⠀⠀⠀⠀⠀⣠⠔⣲⠤⠤⠤⠤⠤⠤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  15. ⠀⠀⠀⠀⠀⢠⠞⣥⠋⠀⠀⠀⠀⠀⠀⠀⠀⠈⠑⠢⠤⣄⡀⠀⠀⠀⠀⠀⠀
  16. ⠀⠀⠀⠀⢠⠛⣸⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣆⠀⠀⠀⠀⠀
  17. ⠀⠀⣀⡴⠋⣰⠁⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀  ⠀⠀⠀⠀⠛⡄⠀⠀⠀⠀
  18. ⢠⠋⠁⠀⢰⠉⢸⢠⡇⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⠀⠀⠀⠀
  19. ⢸⠀⠀⠀⣼⠀⠀⠉⠀⠀⠀⠀⠀⠀⣆⣿⠀⠀⢀⠀⠀⠀ ⠀⠀⠀⣧⠀⠀⠀
  20. ⠀⠓⠤⠴⠤⢛⠜⠒⠒⢄⢀⠤⠤⣄⠉⡄⠀⢀⠀⡇⠀⠀⠀⠀⠀⠀⠓⣄⠀
  21. ⠀⠀⠀⠀⠀⢈⠀⠀⠀⠀⠁⠀⠀⠀⣶⣀⣀⣠⡦⠺⡀⠀⠀⠀⠀⠀  ⠀⠀⢆
  22. ⠀⠀⠀⠀⠀⠘⣆⠀⠀⠀⠀⠀⠀⠀⠿⠀⠀⢺⣐⠀⡗⢆⡀⠀⠀⠀  ⠀⠀⢸
  23. ⠀⠀⠀⠀⠀⠸⡘⢦⡀⠀⠀⢀⣀⡖⠷⠶⠒⣺⣀⠖⠁⠀⠑⠲⣆⣀⣀⡠⠊
  24. ⠀⠀⠀⠀⠀⠀⠙⠶⠷⠶⠖⢻⠁⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  25. ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢆⣀⣀⠚⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  26.  
  27.                        .by raffaella.
  28.                          @userraffa
  29.  
  30.  
  31. ════════════════════════════  ♦ ARTDECO ♦  ═══════════════════════════════════
  32.  
  33. info
  34.        ♦ version 1.0
  35.        ♦ released 06.11.2025
  36.        ♦ last updated 06.11.2025
  37.        ♦ do not remove credit
  38.    
  39. credits
  40.        ♦ icons by feathericons;
  41.        ♦ base code & show/hide tags by @seyche;
  42.        ♦ featured posts by @fukuo.site;
  43.        ♦ day/night mode by @egg.design;
  44.        ♦ scroll to top by @paulund (via @seyche);
  45.        ♦ show/hide controls by @themesbytommy;
  46.        ♦ new tumblr controls by @odeysseus;
  47.        ♦ updates tab by @mistletoe;
  48.        ♦ searchbar by @glenthemes;
  49.        ♦ un-blue polls by @glenthemes;
  50.        ♦ inspired by THE BATMAN by @sharpay/annakarenina;
  51.  
  52. --->
  53.  
  54.  
  55. <!--- JQUERY --->
  56.  
  57. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  58.  
  59. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  60.  
  61. <!--
  62.  
  63.        NPF images fix v3.0 by @glenthemes [2021]
  64.        💌 git.io/JRBt7
  65.        
  66. --->
  67.  
  68. <script src="//npf-images-v3.github.io/script.js"></script>
  69. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  70. <style tmblr-npf>
  71. :root {
  72.     --NPF-Caption-Spacing:1em;
  73.     --NPF-Image-Spacing:4px;
  74. }
  75. </style>
  76.  
  77. <script>
  78.        $(document).ready(function() {
  79.            var readData;
  80.            var url = "https://{Name}.tumblr.com/api/read/json";           $.getScript(url, function() {
  81.                readData = tumblr_api_read;
  82.                console.log(readData);
  83.            });
  84.        });
  85. </script>
  86.  
  87.  
  88. <!--- GOOGLEFONTS --->
  89.  
  90. <link rel="preconnect" href="https://fonts.googleapis.com">
  91.  
  92. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  93.  
  94. <link href="https://fonts.googleapis.com/css2?family=Agbalumo&family=DM+Serif+Text:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Karla:ital,wght@0,200..800;1,200..800&family=Limelight&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Playwrite+US+Modern:[email protected]&family=Tiny5&display=swap" rel="stylesheet">
  95.  
  96.  
  97. <!--- UPDATES TAB ANIMATION --->
  98.  
  99. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  100.  
  101. <!--- ICONS --->
  102.  
  103. <script src="https://unpkg.com/feather-icons"></script>
  104.  
  105. <!--- OPTIONS --->
  106.  
  107. <!--- SIDEBAR IMAGE --->
  108.  
  109. <meta name="image:Sidebar" content=""/>
  110.  
  111. <!--- IF CONDITIONS --->
  112.  
  113. <meta name="if:Bold Title" content="1"/>
  114. <meta name="if:Show Updates" content="1"/>
  115. <meta name="if:Show Featured Posts" content="1"/>
  116. <meta name="if:Show Searchbar" content="1"/>
  117. <meta name="if:Show Tracking Tag" content="1"/>
  118. <meta name="if:Show About Me" content="1"/>
  119. <meta name="if:Show Socials" content="1"/>
  120. <meta name="if:Show Sideblogs" content="1"/>
  121. <meta name="if:More Links" content="1"/>
  122. <meta name="if:Night Mode" content="1"/>
  123.  
  124. <!--- COLORS VARIABLES --->
  125.  
  126. <!--- DAY MODE --->
  127.  
  128. <meta name="color:Background" content="#fff"/>
  129. <meta name="color:Container" content="#fff">
  130. <meta name="color:Text" content="#000"/>
  131. <meta name="color:Link" content="#f2992e"/>
  132. <meta name="color:Accent" content="#f7c282"/>
  133. <meta name="color:Diamonds" content="#fff"/>
  134. <meta name="color:Boxes" content="#fff"/>
  135. <meta name="color:Borders" content="#e0e0e0"/>
  136.  
  137. <!--- NIGHT MODE --->
  138.  
  139. <meta name="color:Background Night" content="#000"/>
  140. <meta name="color:Container Night" content="#000"/>
  141. <meta name="color:Text Night" content="#fff"/>
  142. <meta name="color:Link Night" content="#f2992e"/>
  143. <meta name="color:Accent Night" content="#f7c282"/>
  144. <meta name="color:Diamonds Night" content="#000"/>
  145. <meta name="color:Boxes Night" content="#000"/>
  146. <meta name="color:Borders Night" content="#313131"/>
  147.  
  148. <!--- TEXT INPUTS --->
  149.  
  150. <!--- SIDEBAR TEXT --->
  151.  
  152. <meta name="text:Title" content=""/>
  153. <meta name="text:Description" content=""/>
  154. <meta name="text:Updates" content=""/>
  155. <meta name="text:Tracking Tag" content=""/>
  156. <meta name="text:Tracking Tag Info" content=""/>
  157. <meta name="text:Featured Posts Tag" content=""/>
  158. <meta name="text:Featured Posts Title" content=""/>
  159.  
  160. <!--- TRENDING TAGS --->
  161.  
  162. <meta name="text:Trending Tag 1" content=""/>
  163. <meta name="text:Trending Tag 2" content=""/>
  164. <meta name="text:Trending Tag 3" content=""/>
  165. <meta name="text:Trending Tag 4" content=""/>
  166. <meta name="text:Trending Tag 5" content=""/>
  167.  
  168. <!--- PROFILE TEXT --->
  169.  
  170. <meta name="text:Name" content=""/>
  171. <meta name="text:Pronouns" content=""/>
  172. <meta name="text:Age" content=""/>
  173. <meta name="text:Birthday" content=""/>
  174. <meta name="text:Zodiac Sign" content=""/>
  175. <meta name="text:Region" content=""/>
  176. <meta name="text:Sexuality" content=""/>
  177.  
  178. <!--- SOCIAL MEDIA HANDLES --->
  179.  
  180. <meta name="text:Twitter Username" content=""/>
  181. <meta name="text:Instagram Username" content=""/>
  182. <meta name="text:Youtube Username" content=""/>
  183. <meta name="text:Spotify Username" content=""/>
  184. <meta name="text:Discord Username" content=""/>
  185. <meta name="text:Letterboxd Username" content=""/>
  186. <meta name="text:AO3 Username" content=""/>
  187. <meta name="text:Pinterest Username" content=""/>
  188.  
  189. <!--- SIDEBLOGS HANDLES --->
  190.  
  191. <meta name="text:Sideblog 1" content=""/>
  192. <meta name="text:Sideblog 1 Description" content=""/>
  193.  
  194. <meta name="text:Sideblog 2" content=""/>
  195. <meta name="text:Sideblog 2 Description" content=""/>
  196.  
  197. <meta name="text:Sideblog 3" content=""/>
  198. <meta name="text:Sideblog 3 Description" content=""/>
  199.  
  200. <meta name="text:Sideblog 4" content=""/>
  201. <meta name="text:Sideblog 4 Description" content=""/>
  202.  
  203. <meta name="text:Sideblog 5" content=""/>
  204. <meta name="text:Sideblog 5 Description" content=""/>
  205.  
  206. <!--- LINKS (BOTTOM NAVIGATION) --->
  207.  
  208. <meta name="text:Link 1 URL" content=""/>
  209. <meta name="text:Link 1 Title" content=""/>
  210. <meta name="text:Link 2 URL" content=""/>
  211. <meta name="text:Link 2 Title" content=""/>
  212. <meta name="text:Link 3 URL" content=""/>
  213. <meta name="text:Link 3 Title" content=""/>
  214.  
  215. <!--- MORE LINKS (LEFT NAVIGATION) --->
  216.  
  217. <meta name="text:More Links 1 URL" content=""/>
  218. <meta name="text:More Links 1 Title" content=""/>
  219.  
  220. <meta name="text:More Links 2 URL" content=""/>
  221. <meta name="text:More Links 2 Title" content=""/>
  222.  
  223. <meta name="text:More Links 3 URL" content=""/>
  224. <meta name="text:More Links 3 Title" content=""/>
  225.  
  226. <meta name="text:More Links 4 URL" content=""/>
  227. <meta name="text:More Links 4 Title" content=""/>
  228.  
  229. <meta name="text:More Links 5 URL" content=""/>
  230. <meta name="text:More Links 5 Title" content=""/>
  231.  
  232. <!--- SELECTION --->
  233.  
  234. <!--- FONT SIZE --->
  235.  
  236. <meta name="select:Font Size" content="11px" title="11px"/>
  237. <meta name="select:Font Size" content="12px" title="12px"/>
  238. <meta name="select:Font Size" content="13px" title="13px"/>
  239. <meta name="select:Font Size" content="14px" title="14px"/>
  240.  
  241. <!--- TITLE FONT SIZE --->
  242.  
  243. <meta name="select:Title Font Size" content="20px" title="20px"/>
  244. <meta name="select:Title Font Size" content="11px" title="11px"/>
  245. <meta name="select:Title Font Size" content="12px" title="12px"/>
  246. <meta name="select:Title Font Size" content="13px" title="13px"/>
  247. <meta name="select:Title Font Size" content="14px" title="14px"/>
  248. <meta name="select:Title Font Size" content="15px" title="15px"/>
  249. <meta name="select:Title Font Size" content="16px" title="16px"/>
  250. <meta name="select:Title Font Size" content="17px" title="17px"/>
  251. <meta name="select:Title Font Size" content="18px" title="18px"/>
  252. <meta name="select:Title Font Size" content="19px" title="19px"/>
  253.  
  254. <!--- LINK 1 ICON --->
  255.  
  256. <meta name="select:Link 1 Icon" content="smile" title="smile"/>
  257. <meta name="select:Link 1 Icon" content="archive" title="archive"/>
  258. <meta name="select:Link 1 Icon" content="at-sign" title="at"/>
  259. <meta name="select:Link 1 Icon" content="heart" title="heart"/>
  260. <meta name="select:Link 1 Icon" content="hash" title="hash"/>
  261. <meta name="select:Link 1 Icon" content="instagram" title="instagram"/>
  262. <meta name="select:Link 1 Icon" content="map" title="map"/>
  263. <meta name="select:Link 1 Icon" content="menu" title="menu"/>
  264. <meta name="select:Link 1 Icon" content="moon" title="moon"/>
  265. <meta name="select:Link 1 Icon" content="star" title="star"/>
  266. <meta name="select:Link 1 Icon" content="tag" title="tag"/>
  267. <meta name="select:Link 1 Icon" content="tv" title="tv"/>
  268. <meta name="select:Link 1 Icon" content="twitter" title="twitter"/>
  269. <meta name="select:Link 1 Icon" content="user" title="user"/>
  270. <meta name="select:Link 1 Icon" content="code" title="code"/>
  271. <meta name="select:Link 1 Icon" content="sun" title="sun"/>
  272.  
  273. <!--- ASK ICON --->
  274.  
  275. <meta name="select:Ask Link Icon" content="help-circle" title="help"/>
  276. <meta name="select:Ask Link Icon" content="inbox" title="inbox"/>
  277. <meta name="select:Ask Link Icon" content="mail" title="mail"/>
  278. <meta name="select:Ask Link Icon" content="message-circle" title="message"/>
  279. <meta name="select:Ask Link Icon" content="send" title="send"/>
  280.  
  281. <!--- LINK 2 ICON --->
  282.  
  283. <meta name="select:Link 2 Icon" content="heart" title="heart"/>
  284. <meta name="select:Link 2 Icon" content="archive" title="archive"/>
  285. <meta name="select:Link 1 Icon" content="at-sign" title="at"/>
  286. <meta name="select:Link 2 Icon" content="hash" title="hash"/>
  287. <meta name="select:Link 2 Icon" content="instagram" title="instagram"/>
  288. <meta name="select:Link 2 Icon" content="map" title="map"/>
  289. <meta name="select:Link 2 Icon" content="menu" title="menu"/>
  290. <meta name="select:Link 2 Icon" content="moon" title="moon"/>
  291. <meta name="select:Link 2 Icon" content="smile" title="smile"/>
  292. <meta name="select:Link 2 Icon" content="star" title="star"/>
  293. <meta name="select:Link 2 Icon" content="tag" title="tag"/>
  294. <meta name="select:Link 2 Icon" content="tv" title="tv"/>
  295. <meta name="select:Link 2 Icon" content="twitter" title="twitter"/>
  296. <meta name="select:Link 2 Icon" content="user" title="user"/>
  297. <meta name="select:Link 2 Icon" content="code" title="code"/>
  298. <meta name="select:Link 2 Icon" content="sun" title="sun"/>
  299.  
  300. <!--- LINK 3 ICON --->
  301.  
  302. <meta name="select:Link 3 Icon" content="star" title="star"/>
  303. <meta name="select:Link 3 Icon" content="archive" title="archive"/>
  304. <meta name="select:Link 1 Icon" content="at-sign" title="at"/>
  305. <meta name="select:Link 3 Icon" content="heart" title="heart"/>
  306. <meta name="select:Link 3 Icon" content="hash" title="hash"/>
  307. <meta name="select:Link 3 Icon" content="instagram" title="instagram"/>
  308. <meta name="select:Link 3 Icon" content="map" title="map"/>
  309. <meta name="select:Link 3 Icon" content="menu" title="menu"/>
  310. <meta name="select:Link 3 Icon" content="moon" title="moon"/>
  311. <meta name="select:Link 3 Icon" content="smile" title="smile"/>
  312. <meta name="select:Link 3 Icon" content="tag" title="tag"/>
  313. <meta name="select:Link 3 Icon" content="tv" title="tv"/>
  314. <meta name="select:Link 3 Icon" content="twitter" title="twitter"/>
  315. <meta name="select:Link 3 Icon" content="user" title="user"/>
  316. <meta name="select:Link 3 Icon" content="code" title="code"/>
  317. <meta name="select:Link 3 Icon" content="sun" title="sun"/>
  318.  
  319. <!--- ABOUT ICON --->
  320.  
  321. <meta name="select:About Icon" content="moon" title="moon"/>
  322. <meta name="select:About Icon" content="smile" title="smile"/>
  323. <meta name="select:About Icon" content="heart" title="heart"/>
  324. <meta name="select:About Icon" content="map" title="map"/>
  325. <meta name="select:About Icon" content="menu" title="menu"/>
  326. <meta name="select:About Icon" content="star" title="star"/>
  327. <meta name="select:About Icon" content="user" title="user"/>
  328. <meta name="select:About Icon" content="sun" title="sun"/>
  329.  
  330. <!--- SIDEBLOGS ICON --->
  331.  
  332. <meta name="select:Sideblogs Icon" content="star" title="star"/>
  333. <meta name="select:Sideblogs Icon" content="smile" title="smile"/>
  334. <meta name="select:Sideblogs Icon" content="heart" title="heart"/>
  335. <meta name="select:Sideblogs Icon" content="map" title="map"/>
  336. <meta name="select:Sideblogs Icon" content="menu" title="menu"/>
  337. <meta name="select:Sideblogs Icon" content="moon" title="moon"/>
  338. <meta name="select:Sideblogs Icon" content="user" title="user"/>
  339. <meta name="select:Sideblogs Icon" content="sun" title="sun"/>
  340.  
  341. <!--- TITLE FONT --->
  342.  
  343. <meta name="select:Title Font" content="Limelight" title="Limelight"/>
  344. <meta name="select:Title Font" content="Agbalumo" title="Agbalumo"/>
  345. <meta name="select:Title Font" content="Playwrite USA Modern" title="Playwrite USA Modern"/>
  346. <meta name="select:Title Font" content="Josefin Slab" title="Josefin Slab"/>
  347. <meta name="select:Title Font" content="Tiny5" title="Tiny5"/>
  348. <meta name="select:Title Font" content="Literata" title="Literata"/>
  349. <meta name="select:Title Font" content="Georgia" title="Georgia"/>
  350. <meta name="select:Title Font" content="DM Serif Text" title="DM Serif Text"/>
  351. <meta name="select:Title Font" content="Karla" title="Karla"/>
  352. <meta name="select:Title Font" content="Inter" title="Inter"/>
  353. <meta name="select:Title Font" content="Nunito Sans" title="Nunito Sans"/>
  354.  
  355.  
  356. <!--- FONT --->
  357.  
  358. <meta name="select:Font" content="Karla" title="Karla"/>
  359. <meta name="select:Font" content="Literata" title="Literata"/>
  360. <meta name="select:Font" content="Georgia" title="Georgia"/>
  361. <meta name="select:Font" content="Inter" title="Inter"/>
  362. <meta name="select:Font" content="Nunito Sans" title="Nunito Sans"/>
  363.  
  364.  
  365. <!--- CSS --->
  366.  
  367.  
  368. <style type="text/css">
  369.  
  370.  
  371. /*--- TEXT SELECTION ---*/
  372.  
  373. ::-moz-selection {
  374.   color: {color:Accent};
  375.   background: {color:Borders};
  376. }
  377.  
  378. ::selection {
  379.   color: {color:Accent};
  380.   background: {color:Borders};
  381. }
  382.  
  383.  
  384. /*--- TOOLTIPS ---*/
  385.  
  386. .tippy-tooltip.custom-theme {
  387.     background-color: {color:Boxes};
  388.     border:1px solid {color:Borders};
  389.     font-weight: 700;
  390.     color: {color:link};
  391.     text-align: center;
  392.     font-family: inherit;
  393.     text-transform: uppercase;
  394.     padding: 0.3em 0.3em 0.3em 0.3em;
  395.     margin: 15px 0 0 0;
  396.     font-size: 10px;
  397.     border-radius: 0%;
  398. }
  399.  
  400.  
  401. /*--- SCROLLBAR ---*/
  402.  
  403. ::-webkit-scrollbar {
  404.    width: 2px;
  405.    height: 15px;
  406. }
  407.  
  408. ::-webkit-scrollbar {
  409.    background: {color:Background};
  410. }
  411.  
  412. ::-webkit-scrollbar-track {
  413.    border: none;
  414.    background: {color:Background};
  415. }
  416.  
  417. ::-webkit-scrollbar-thumb {
  418.    border: none;
  419.    background: {color:Borders};
  420.    min-height: 24px;
  421.    min-width: 24px;
  422. }
  423.  
  424. body.night ::-webkit-scrollbar {
  425.     background: {color:Background Night};
  426. }
  427.  
  428. body.night ::-webkit-scrollbar-track {
  429.    background: {color:Background Night};
  430. }
  431.  
  432. body.night ::-webkit-scrollbar-thumb {
  433.     background: {color:Borders Night};
  434. }
  435.  
  436. /*--- CONTROLS ---*/
  437.  
  438. .tmblr-iframe--loaded{
  439.     transition: all 0.3s ease;
  440.     height: 0px !important;
  441. }
  442.  
  443. .tmblr-iframe--loaded-active{
  444.     height: 54px !important;
  445. }
  446.    
  447. .tmblr-iframe-pushdown,
  448. .tmblr-iframe-themed {
  449.     padding-top: 0px !important;
  450.     padding: 0px !important;
  451.     animation: none !important;
  452.     -webkit-animation: none !important;
  453. }
  454.  
  455. .tumblr-controls-btn-trigger{
  456.     -webkit-transition: all 0.3s ease;
  457.     -moz-transition: all 0.3s ease;
  458.     transition: all 0.3s ease;
  459.     position: fixed;
  460.     top: 20px;
  461.     right: 60px;
  462.     height: 16px;
  463.     width: 16px;
  464.     cursor: pointer;
  465.     z-index: 99999;
  466. }
  467.  
  468. .tumblr-controls-btn-trigger span{
  469.     -webkit-transition: all 0.2s ease;
  470.     -moz-transition: all 0.2s ease;
  471.     transition: all 0.2s ease;
  472.     position: absolute;
  473.     width: 0;
  474.     height: 0;
  475.     border-left: 10px solid transparent;
  476.     border-right: 10px solid transparent;
  477.     border-bottom: 18px solid transparent;
  478. }
  479.    
  480. .tumblr-controls-btn-trigger-active span{
  481.     -webkit-transform: rotate(0deg);
  482.     -moz-transform: rotate(0deg);
  483.     transform: rotate(0deg);
  484.     transform: translateY(130%);
  485. }
  486.    
  487. .tumblr-controls-btn-trigger svg {
  488.     height: 16px;
  489.     width: 16px;
  490.     color: {color:Link};
  491.     padding: 10px;
  492. }
  493.  
  494. .tumblr-controls-btn-trigger svg:hover {
  495.     color: {color:Accent};
  496. }
  497.  
  498. body.night .tumblr-controls-btn-trigger svg {
  499.     color: {color:Link Night};    
  500. }
  501.  
  502. body.night .tumblr-controls-btn-trigger svg:hover {
  503.     color: {color:Accent Night};
  504. }
  505.  
  506. .tmblr-iframe {
  507.     white-space: nowrap;
  508.     -webkit-filter: invert(100%);
  509.     -moz-filter: invert(100%);
  510.     -o-filter: invert(100%);
  511.     -ms-filter: invert(100%);
  512.     filter: invert(100%);
  513.     transition: .3s ease-in-out;
  514.     -webkit-transition: .3s ease-in-out;
  515.     -moz-transition: .3s ease-in-out;
  516.     -o-transition: .3s ease-in-out;
  517.     position: fixed!important;
  518.     right: -20px!important;
  519.     transform: scale(0.7,0.7);
  520. }
  521.    
  522. .tmblr-iframe:hover {opacity: 1;}
  523.  
  524. body.night .tmblr-iframe {
  525.     filter: none;    
  526. }
  527.  
  528. /*--- FEATURED POSTS ---*/
  529.  
  530. {block:ifShowFeaturedPosts}
  531.  
  532. #wrapper_featured_posts {
  533.     font-family: inherit;
  534.     font-size: inherit;
  535.     box-sizing: border-box;
  536.     display: flex;
  537.     flex-wrap: wrap;
  538.     justify-content: center;
  539. }
  540.  
  541. #wrapper_featured_posts .inner_featured_posts {
  542.     display: grid;
  543.     grid-template-columns: repeat(3,1fr);
  544.     grid-gap: 1rem;
  545.     margin: 1em;
  546. }
  547.  
  548. #wrapper_featured_posts .square-deco-container {
  549.     width:100%;
  550. }
  551.  
  552. #wrapper_featured_posts .inner_featured_posts blockquote {
  553.     border: 1px solid transparent;
  554. }
  555.  
  556. #wrapper_featured_posts .inner_featured_posts>.grid_featured {
  557.     position: relative;
  558.     width: 170px;
  559.     height: 170px;
  560.     overflow: hidden;
  561.     color: {color:Link};
  562. }
  563.  
  564. #wrapper_featured_posts .inner_featured_posts>.grid_featured:after {
  565.     position: absolute;
  566.     content: '';
  567.     width: 100%;
  568.     height: 100px;
  569.     bottom: 0;
  570.     left: 0;
  571. }
  572.  
  573. #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore {
  574.     position: absolute;
  575.     bottom: 10px;
  576.     left: 50%;
  577.     transform: translateX(-50%);
  578.     z-index: 9;
  579.     text-decoration: none;
  580.     display: block;
  581.     font-size: .85em;
  582.     background-color: {color:Boxes};
  583.     color: {color:Link};
  584.     padding: .6em 1em;
  585.     font-weight: bold;
  586.     border: 1px solid {color:Borders};
  587.     font-family: inherit;
  588. }
  589.  
  590. #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore:hover {
  591.     background-color: {color:Borders};
  592.     color: {color:Accent};
  593. }
  594.  
  595. #wrapper_featured_posts .inner_featured_posts img{
  596.     width: 100%;
  597.     height: 100%;
  598.     text-align: center;
  599. }
  600.  
  601. .featuredtitle {
  602.     display: inline-block;
  603.     margin: 0 auto;
  604.     position: relative;
  605.     border: 1px solid {color:Borders};
  606.     text-align: center;
  607.     font-weight: bold;
  608.     border: 1px solid {color:Borders};
  609.     background: {color:Boxes};
  610.     padding: 9px;
  611.     bottom:-8px;
  612. }
  613.  
  614. .featuredtitle:hover {
  615.     background: {color:Borders};
  616.     color: {color:Accent};
  617. }
  618.  
  619. .featuredtitlecontainer {
  620.     display: flex;
  621.     justify-content: center;
  622.     width: 100%;
  623.     margin-top:-3.55em;
  624. }
  625.  
  626. {/block:ifShowFeaturedPosts}
  627.  
  628.  
  629. /*--- BASIC STYLING ---*/
  630.  
  631. body {
  632.     font-family: {select:Font};
  633.     font-size: {select:Font Size};
  634.     color: {color:text};
  635.     background-color: {color:background};
  636.     /*--- background-image: url('https://64.media.tumblr.com/59a23a679e3969c7d7f0521644d19126/8bdce430dd48fa69-80/s1280x1920/b30656e328493d8f3e4084a2bd6d02f1cabd035a.jpg');
  637.     background-size:20%; --*/
  638.     line-height: 160%;
  639.     word-wrap: break-word;
  640.     letter-spacing: 0.04em;
  641.     margin: 0;
  642.     padding: 0;
  643.     text-align: center;
  644. }
  645.  
  646. a {
  647.     color: {color:Link};
  648.     text-decoration: none;
  649.     -webkit-transition: all 0.3s;
  650.     -moz-transition: all 0.3s;
  651.     -ms-transition: all 0.3s;
  652.     -o-transition: all 0.3s;
  653.     transition: all 0.3s;
  654. }
  655.  
  656. a:hover {
  657.     color: {color:Accent};
  658.     -webkit-transition: all 0.3s;
  659.     -moz-transition: all 0.3s;
  660.     -ms-transition: all 0.3s;
  661.     -o-transition: all 0.3s;
  662.     transition: all 0.3s;
  663. }
  664.  
  665. blockquote {
  666.     border-left: 1px solid {color:Borders};
  667.     margin-left: 0;
  668.     width: 100%;
  669. }
  670.  
  671. h1, h2, h3, h4, h5, .title {
  672.     letter-spacing: 0.06em;
  673.     line-height: 125%;
  674. }
  675.  
  676. h1, h2, h3, h5 {
  677.     font-weight: bold;
  678. }
  679.  
  680. {block:ifBoldTitle}
  681.  
  682. .title {
  683.     font-weight: bold;
  684. }
  685.  
  686. {/block:ifBoldTitle}
  687.  
  688. .title {
  689.     font-size: {select:Title Font Size};
  690.     position: relative;
  691.     margin-bottom: 0.5em;
  692.    
  693.     {block:ifDescription}
  694.    
  695.     margin-bottom: 0;
  696.    
  697.     {/block:ifDescription}
  698. }
  699.  
  700. h4 {
  701.     color: {color:Link};
  702.     display: flex;
  703.     justify-content: center;
  704.     width: 100%;
  705.     font-weight: bold;
  706.     margin-left: 0;
  707.     margin-bottom: -0.5em;
  708.     margin-top: -0.5em;
  709. }
  710.  
  711. h1 {font-size: 1.5em;}
  712. h2 {font-size: 1.3em;}
  713. h3 {font-size: 1.25em;}
  714. h4 {font-size: 1.1em;}
  715. h5 {font-size: 1em;}
  716.  
  717. {block:ifTitle}
  718. .title {
  719.     font-family: {select:Title Font};
  720.     display: flex;
  721.     justify-content: center;
  722.     margin-bottom:1.5em;
  723. }
  724. {/block:ifTitle}
  725.  
  726. {block:ifDescription}
  727.  
  728. .title {
  729.     margin-bottom:0;
  730. }
  731.  
  732. {/block:ifDescription}
  733.  
  734. small {font-size: 0.9em;}
  735. big {font-size: 1.1em;}
  736.  
  737. hr {
  738.     height: 1px;
  739.     border: none;
  740.     box-shadow: none;
  741.     background-color: {color:Borders};
  742. }
  743.  
  744. pre {
  745.     line-height: inherit;
  746.     font-size: inherit;
  747.     white-space: pre-wrap;
  748.     white-space: -moz-pre-wrap;
  749.     white-space: -pre-wrap;
  750.     white-space: -o-pre-wrap;
  751.     word-wrap: break-word;
  752. }
  753.  
  754. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  755.  
  756.  
  757. /*---- DAYNIGHT ----*/
  758.  
  759. {block:ifNightMode}
  760.  
  761. .daynight {
  762.     position: fixed;
  763.     bottom: 100px;
  764.     right: 20px;
  765.     border: 1px solid {color:Borders};
  766.     background: {color:Diamonds};
  767.     transform: rotate(45deg);
  768. }
  769.  
  770. .daynight:hover {
  771.     cursor: pointer;
  772.     background-color: {color:Borders};
  773. }
  774.  
  775. .daynight:hover svg {
  776.     color: {color:Accent};
  777. }
  778.  
  779. .daynight svg {
  780.     display: inline-block;
  781.     vertical-align: middle;
  782.     margin: auto;
  783.     padding: 6px;
  784.     width: 14px;
  785.     height: 14px;
  786.     color: {color:Link};
  787.     transform: rotate(-45deg);
  788. }
  789.  
  790. /*---- DAYNIGHT (NIGHT MODE) ----*/
  791.  
  792. body.night .daynight {
  793.     border: 1px solid {color:Borders Night};
  794.     background: {color:Diamonds Night};
  795. }
  796.  
  797. body.night .daynight:hover {
  798.     background-color: {color:Borders Night};
  799. }
  800.  
  801. body.night .daynight:hover svg {
  802.     color: {color:Accent Night};
  803. }
  804.  
  805. body.night .daynight svg {
  806.     color:{color:Link Night};
  807. }
  808.  
  809. {/block:ifNightMode}
  810.  
  811.  
  812. /*--- SIDEBAR ---*/
  813.  
  814. #sidebar {
  815.     display: flex;
  816.     flex-direction: column;
  817.     align-items: center;
  818.     width: 300px;
  819.     height: auto;
  820.     position: fixed;
  821.     top: 200px;
  822.    
  823.     {block:ifSidebarImage}
  824.    
  825.     top: 150px;
  826.    
  827.     {/block:ifSidebarImage}
  828.    
  829.     text-align: center;
  830.     z-index: 2;
  831.     background: {color:Container};
  832. }
  833.  
  834. #sidebar .square-deco-container {
  835.     min-width:300px;
  836.     height:100%;
  837. }
  838.  
  839. .side-img-container {
  840.     border: 1px solid transparent;
  841.     padding: 1em;
  842. }
  843.  
  844. {block:ifSidebarImage}
  845.  
  846. #side-img {
  847.     width: 100%;
  848.     margin-bottom:3em;
  849. }
  850.  
  851. .sidebar-icon {
  852.     display:none;
  853. }
  854.  
  855. .sidebar-icon img {
  856.     display: none;
  857. }
  858.  
  859. {/block:ifSidebarImage}
  860.  
  861. {block:ifDescription}
  862.  
  863. #side-img {
  864.     margin-bottom:1em;
  865. }
  866.  
  867. {/block:ifDescription}
  868.  
  869.     {block:ifTitle}
  870.    
  871. #side-img {
  872.     margin-bottom:0.5em;
  873. }
  874.     {/block:ifTitle}
  875.  
  876. .sidebar-icon {
  877.     display: flex;
  878.     justify-content: center;
  879.     margin-top:20px;
  880.     width:100%;
  881.     height:100%;
  882. }
  883.  
  884. .sidebar-icon img {
  885.     border-radius:0%;
  886.     height:70px;
  887.     width:70px;
  888. }
  889.  
  890. nav {margin-top: 1.25em;}
  891.  
  892. #description {
  893.    
  894.     {block:ifTitle}
  895.    
  896.     margin-top: 0.5em;
  897.    
  898.     {/block:ifTitle}
  899.    
  900.     margin-bottom: 1.5em;
  901.    
  902.     {block:ifSidebarImage}
  903.    
  904.     margin-bottom: 2.5em;
  905.    
  906.     {/block:ifSidebarImage}
  907.    
  908. }
  909.  
  910.  
  911. /*--- TRACKING TAG ---*/
  912.  
  913. {block:ifShowTrackingTag}
  914.  
  915. .usertag {
  916.     display: flex;
  917.     font-weight: bold;
  918.     justify-content: center;
  919.     font-family: inherit;
  920. }
  921.  
  922. .usertag a {
  923.     border: 1px solid {color:Borders};
  924.     width: {select:Tracking Tag Width};
  925.     color: {color:link};
  926.     padding: 9px;
  927.     z-index: 50;
  928.     position: absolute;
  929.     margin-top: -1.4em;
  930.     align-items: center;
  931.     justify-content: center;
  932.     height:1.5em;
  933.     background: {color:Boxes};
  934. }
  935.  
  936. .usertag a:hover {
  937.     color: {color:Accent} !important;
  938.     background: {color:Borders};
  939.     cursor: pointer;
  940.     -webkit-transition: all 0.3s;
  941.     -moz-transition: all 0.3s;
  942.     -ms-transition: all 0.3s;
  943.     -o-transition: all 0.3s;
  944.     transition: all 0.3s;
  945. }
  946.  
  947. .usertaginfo:hover {
  948.     display: block;
  949. }
  950.  
  951. .usertaginfo {
  952.     display: none;
  953.     position: absolute;
  954.     top: 5%;
  955.     left: 50%;
  956.     transform: translateX(-50%);
  957.     margin-top: 2em;
  958.     border: 1px solid {color:Borders};
  959.     background: {color:Container};
  960.     color: {color:Text};
  961.     font-weight: normal;
  962.     padding: 15px;
  963.     width: max-content;
  964.     max-width: 30em;
  965.     z-index: 1500;
  966.     word-wrap: break-word;
  967.     white-space: normal;
  968.     text-align: center;
  969.     box-sizing: border-box;
  970.     opacity: 0;
  971.     font-size: calc({select:Font Size} - 1.5px);
  972.     transition: opacity 0.3s ease;
  973.     font-family:'Karla';
  974. }
  975.  
  976. .usertag:hover .usertaginfo {
  977.     display: block;
  978.     opacity: 1;
  979. }
  980.  
  981. .usertaginfo:empty {
  982.   display: none !important;
  983. }
  984.  
  985. {/block:ifShowTrackingTag}
  986.  
  987.  
  988. /*--- UPDATES ---*/
  989.  
  990. {block:ifShowUpdates}
  991.  
  992. #updates {
  993.     position: fixed;
  994.     top: 20px;
  995.     left: 20px;
  996.     z-index:99;
  997. }
  998.    
  999. #updates a {
  1000.     text-decoration: none;
  1001.     color: {color:Link};
  1002. }
  1003.    
  1004. #updates .updatet {
  1005.     display: block;
  1006.     position: relative;
  1007.     width: 15px;
  1008.     height: 15px;
  1009.     padding: 10px;
  1010.     font-size: {select:Font Size};
  1011.     border: 1px solid {color:Borders};
  1012.     background: {color:Diamonds};
  1013.     transform: rotate(45deg);
  1014.     transition: background-color 0.3s, border-color 0.3s;
  1015. }
  1016.  
  1017. #updates .updatet:hover {
  1018.     background: {color:Borders};
  1019.     -webkit-transition: all 0.3s;
  1020.     -moz-transition: all 0.3s;
  1021.     -ms-transition: all 0.3s;
  1022.     -o-transition: all 0.3s;
  1023.     transition: all 0.3s;
  1024.     color: {color:Accent};
  1025. }
  1026.  
  1027. #updates .updateu {
  1028.     position: absolute;
  1029.     width: 150px;
  1030.     padding: 12px;
  1031.     border: 1px solid {color:Borders};
  1032.     background: {color:Container};
  1033.     text-align: left;
  1034.     margin-left: 50px;
  1035.     top: 0;
  1036.     color: {color:Text};
  1037.     transform: none;
  1038.     text-align: center;
  1039.     z-index: 69;
  1040. }
  1041.  
  1042. #updates .updatet svg {
  1043.     width: 16px;
  1044.     height: 16px;
  1045.     transform: rotate(-45deg);
  1046. }
  1047.  
  1048. .updatet.active {
  1049.   background-color: {color:Borders} !important;
  1050.   border-color: {color:Borders};
  1051. }
  1052.  
  1053. .updatet.active svg {
  1054.   color: {color:Accent};
  1055. }
  1056.  
  1057. {/block:ifShowUpdates}
  1058.  
  1059.  
  1060. /*--- LEFT NAVIGATION ---*/
  1061.  
  1062. .left-nav {
  1063.   display: flex;
  1064.   flex-direction: column;
  1065.   justify-content: center;
  1066.   align-items: center;
  1067.   width: 30px;
  1068.   z-index: 420;
  1069.   position: absolute;
  1070.   top: -15px;
  1071.   left: -12px;
  1072.   height: 100%;
  1073.   gap: 1.2em;
  1074. }
  1075.  
  1076.  
  1077. /*--- ABOUT ME ---*/
  1078.  
  1079. {block:ifShowAboutMe}
  1080.  
  1081. .profile {
  1082.     position: relative;
  1083.     display: flex;
  1084. }
  1085.    
  1086. .profile .profilet {
  1087.     display: block;
  1088.     position: relative;
  1089.     width: 15px;
  1090.     height: 15px;
  1091.     padding: 10px;
  1092.     font-size: {select:Font Size};
  1093.     border: 1px solid {color:Borders};
  1094.     background: {color:Diamonds};
  1095.     transform: rotate(45deg);
  1096.     transition: background-color 0.3s, border-color 0.3s;
  1097. }
  1098.  
  1099. .profile .profilet:hover {
  1100.     background: {color:Borders};
  1101.     -webkit-transition: all 0.3s;
  1102.     -moz-transition: all 0.3s;
  1103.     -ms-transition: all 0.3s;
  1104.     -o-transition: all 0.3s;
  1105.     transition: all 0.3s;
  1106.     color: {color:Accent};
  1107. }
  1108.  
  1109. .profile .profileu {
  1110.     position: absolute;
  1111.     display: block;
  1112.     width: 150px;
  1113.     padding: 12px;
  1114.     border: 1px solid {color:Borders};
  1115.     background: {color:Container};
  1116.     text-align: left;
  1117.     margin-left: 50px;
  1118.     top: 0;
  1119.     color: {color:Text};
  1120.     line-height:20px;
  1121.     transform: none;
  1122.     z-index: 69;
  1123. }
  1124.  
  1125. .profile .profileu svg {
  1126.     color: {color:Link};
  1127.     margin-right: 10px;
  1128.     margin-bottom:-3px;
  1129.     width: calc({select:Font Size} + 2px);
  1130.     height: calc({select:Font Size} + 2px);
  1131. }
  1132.  
  1133. body.night .profile .profileu svg {
  1134.     color: {color:Link Night};
  1135. }
  1136.  
  1137. .profile .profilet svg {
  1138.     width: 16px;
  1139.     height: 16px;
  1140.     transform: rotate(-45deg);
  1141. }
  1142.  
  1143. .profilet.active {
  1144.   background-color: {color:Borders} !important;
  1145.   border-color: {color:Borders};
  1146. }
  1147.  
  1148. .profilet.active svg {
  1149.   color: {color:Accent};
  1150. }
  1151.  
  1152. {/block:ifShowAboutMe}
  1153.  
  1154.  
  1155. /*--- MORE LINKS ---*/
  1156.  
  1157. {block:ifMoreLinks}
  1158.  
  1159. .more {
  1160.     position: relative;
  1161.     display: flex;
  1162. }
  1163.  
  1164. .more a {
  1165.     text-align: left;
  1166.     font-weight: bold;
  1167. }  
  1168.  
  1169. .more .moreu a {
  1170.     padding: 0.2em 0.4em;
  1171. }
  1172.  
  1173. .more .moreu a:hover {
  1174.     background: {color:Link};
  1175.     color: {color:Accent};
  1176. }
  1177.  
  1178. body.night .more .moreu a:hover {
  1179.     background: {color:Link Night};
  1180.     color: {color:Accent Night};
  1181. }
  1182.  
  1183. .more .moret {
  1184.     display: block;
  1185.     position: relative;
  1186.     width: 15px;
  1187.     height: 15px;
  1188.     padding: 10px;
  1189.     font-size: {select:Font Size};
  1190.     border: 1px solid {color:Borders};
  1191.     background: {color:Diamonds};
  1192.     transform: rotate(45deg);
  1193.     transition: background-color 0.3s, border-color 0.3s;
  1194. }
  1195.  
  1196. .more .moret:hover {
  1197.     background: {color:Borders};
  1198.     -webkit-transition: all 0.3s;
  1199.     -moz-transition: all 0.3s;
  1200.     -ms-transition: all 0.3s;
  1201.     -o-transition: all 0.3s;
  1202.     transition: all 0.3s;
  1203.     color: {color:Accent};
  1204. }
  1205.  
  1206. .more .moreu {
  1207.     position: absolute;
  1208.     display: flex;
  1209.     flex-direction:column;
  1210.     width: 200%;
  1211.     padding: 9px;
  1212.     border: 1px solid {color:Borders};
  1213.     background: {color:Container};
  1214.     margin-left: 50px;
  1215.     color: {color:Text};
  1216.     transform: none;
  1217. }
  1218.  
  1219. .more .moreu svg {
  1220.     color: {color:Borders};
  1221.     margin-right: 10px;
  1222.     margin-top: 3px;
  1223.     width: calc({select:Font Size} + 2px);
  1224.     height: calc({select:Font Size} + 2px);
  1225. }
  1226.  
  1227. .more .moret svg {
  1228.     width: 16px;
  1229.     height: 16px;
  1230.     transform: rotate(-45deg);
  1231. }
  1232.  
  1233. .moret.active {
  1234.   background-color: {color:Borders} !important;
  1235.   border-color: {color:Borders};
  1236. }
  1237.  
  1238. .moret.active svg {
  1239.   color: {color:Accent};
  1240. }
  1241.  
  1242. {/block:ifMoreLinks}
  1243.  
  1244.  
  1245. /*--- SOCIALS ---*/
  1246.  
  1247. {block:ifShowSocials}
  1248.  
  1249. .socials {
  1250.     position: relative;
  1251.     display: flex;
  1252. }
  1253.    
  1254. .socials a {
  1255.     text-decoration: none;
  1256.     color: {color:Link};
  1257. }
  1258.    
  1259. .socials .socialt {
  1260.     display: block;
  1261.     position: relative;
  1262.     width: 15px;
  1263.     height: 15px;
  1264.     padding: 10px;
  1265.     font-size: {select:Font Size};
  1266.     border: 1px solid {color:Borders};
  1267.     background:{color:Diamonds};
  1268.     transform: rotate(45deg);
  1269.     transition: background-color 0.3s, border-color 0.3s;
  1270. }
  1271.  
  1272. .socials .socialt:hover {
  1273.     background: {color:Borders};
  1274.     -webkit-transition: all 0.3s;
  1275.     -moz-transition: all 0.3s;
  1276.     -ms-transition: all 0.3s;
  1277.     -o-transition: all 0.3s;
  1278.     transition: all 0.3s;
  1279.     color: {color:Accent};
  1280. }
  1281.  
  1282. .socials .socialu {
  1283.     position: absolute;
  1284.     display: flex;
  1285.     justify-content: center;
  1286.     width: auto;
  1287.     padding: 9px;
  1288.     border: 1px solid {color:Borders};
  1289.     background: {color:Container};
  1290.     margin-left: 50px;
  1291.     color: {color:Text};
  1292.     transform: none;
  1293.     gap: 5px;
  1294. }
  1295.  
  1296. .socials .socialu svg {
  1297.     width: 18px;
  1298.     height: 18px;
  1299.     margin-top: 3px;
  1300. }
  1301.  
  1302. .socials .socialt svg {
  1303.     width: 16px;
  1304.     height: 16px;
  1305.     transform: rotate(-45deg);
  1306. }
  1307.  
  1308. .socials .socialt.active {
  1309.     background-color: {color:Borders} !important;
  1310.     border-color: {color:Borders};
  1311. }
  1312.  
  1313. .socials .socialt.active svg {
  1314.   color: {color:Accent};
  1315. }
  1316.  
  1317. {/block:ifShowSocials}
  1318.  
  1319.  
  1320. /*--- SIDEBLOGS ---*/
  1321.  
  1322. {block:ifShowSideblogs}
  1323.  
  1324. .sideblog {
  1325.     position: relative;
  1326.     display: flex;
  1327. }
  1328.    
  1329. .sideblog a {
  1330.     text-decoration: none;
  1331.     color: {color:Link};
  1332.     text-align: left;
  1333.     font-weight: bold;
  1334.     padding: 0.2em 0.4em;
  1335. }
  1336.  
  1337. .sideblog .sideblogu a:hover {
  1338.     color: {color:Accent};
  1339.     background: {color:Link};
  1340. }
  1341.  
  1342. body.night .sideblog .sideblogu a:hover {
  1343.     color: {color:Accent Night};
  1344.     background: {color:Link Night};
  1345. }
  1346.  
  1347. .sideblog .sideblogt {
  1348.     display: block;
  1349.     position: relative;
  1350.     width: 15px;
  1351.     height: 15px;
  1352.     padding: 10px;
  1353.     font-size: {select:Font Size};
  1354.     border: 1px solid {color:Borders};
  1355.     background:{color:Diamonds};
  1356.     transform: rotate(45deg);
  1357.     transition: background-color 0.3s, border-color 0.3s;
  1358. }
  1359.  
  1360. .sideblog .sideblogt:hover {
  1361.     background: {color:Borders};
  1362.     -webkit-transition: all 0.3s;
  1363.     -moz-transition: all 0.3s;
  1364.     -ms-transition: all 0.3s;
  1365.     -o-transition: all 0.3s;
  1366.     transition: all 0.3s;
  1367.     color: {color:Accent};
  1368. }
  1369.  
  1370. .sideblog .sideblogu {
  1371.     position: absolute;
  1372.     display: flex;
  1373.     flex-direction: column;
  1374.     width: 350%;
  1375.     padding: 9px;
  1376.     border: 1px solid {color:Borders};
  1377.     background: {color:Container};
  1378.     margin-left: 55px;
  1379.     color: {color:Text};
  1380.     transform: none;
  1381. }
  1382.  
  1383. .sideblog .sideblogu svg {
  1384.     width: 18px;
  1385.     height: 18px;
  1386.     margin-top: 3px;
  1387. }
  1388.  
  1389. .sideblog .sideblogt svg {
  1390.     width: 16px;
  1391.     height: 16px;
  1392.     transform: rotate(-45deg);
  1393. }
  1394.  
  1395. .sideblogt.active {
  1396.   background-color: {color:Borders} !important;
  1397.   border-color: {color:Borders};
  1398. }
  1399.  
  1400. .sideblogt.active svg {
  1401.   color: {color:Accent};
  1402. }
  1403.  
  1404. {/block:ifShowSideblogs}
  1405.  
  1406.    
  1407. /*--- NAVIGATION ---*/
  1408.  
  1409. body.night .icon-nav a:hover diamond {
  1410.   background-color: {color:Borders Night};
  1411.   border-color: {color:Borders Night};
  1412. }
  1413.  
  1414. body.night .icon-nav a:hover diamond i,
  1415. .icon-nav a:hover diamond i svg {
  1416.   color: {color:Accent Night};
  1417. }
  1418.  
  1419. body.night .diamond {
  1420.   border: 1px solid {color:Borders Night};
  1421.   background: {color:Diamonds Night};
  1422. }
  1423.  
  1424. body.night .diamond:hover {
  1425.     background-color: {color:Borders Night};
  1426.     border-color: {color:Borders Night};
  1427.     color: {color:Accent Night};
  1428. }
  1429.  
  1430.  
  1431. /*--- BOTTOM NAVIGATION ---*/
  1432.  
  1433. .icon-nav {
  1434.   display: flex;
  1435.   justify-content: center;
  1436.   align-items: center;
  1437.   width: 300px;
  1438.   z-index: 8;
  1439.   position: absolute;
  1440.   margin-bottom: -5.5%;
  1441.   bottom: 0;
  1442.   left: 50%;
  1443.   transform: translateX(-50%);
  1444.   gap: 1.2em;
  1445. }
  1446.  
  1447. .icon-nav a {
  1448.   display: inline-block;
  1449.   text-decoration: none;
  1450. }
  1451.  
  1452. .diamond {
  1453.   display: inline-flex;
  1454.   justify-content: center;
  1455.   align-items: center;
  1456.   position: relative;
  1457.   transform: rotate(45deg);
  1458.   border: 1px solid {color:Borders};
  1459.   width: 40px;
  1460.   height: 40px;
  1461.   background: {color:Diamonds};
  1462.   box-sizing: border-box;
  1463.   transition: background 0.3s, border-color 0.3s;
  1464.   cursor: pointer;
  1465.   font-size: 14px;
  1466.   font-weight: bold;
  1467.   text-align: center;
  1468. }
  1469.  
  1470. .diamond:hover {
  1471.     background-color: {color:Borders};
  1472.     border-color: {color:Borders};
  1473.     color: {color:Accent};
  1474. }
  1475.  
  1476. .diamond svg {
  1477.   width: 18px !important;
  1478.   height: 18px !important;
  1479.   transform:rotate(-45deg);
  1480.  
  1481. }
  1482.  
  1483. .diamond > * {
  1484.   transform: rotate(-45deg);
  1485. }
  1486.  
  1487.  
  1488. /*--- DECORATION ---*/
  1489.  
  1490. .square-deco-container {
  1491.       display: grid;
  1492.       position: relative;
  1493.       flex-direction: column;
  1494.       justify-content:center;
  1495.       box-sizing: border-box;
  1496.       width: auto;
  1497.       height: auto;
  1498.       grid-template-columns:
  1499.         [outer-start]  5px
  1500.         [mid-start]    5px
  1501.         [inner-start]  2px
  1502.         [gap-start]    1fr
  1503.         [gap-end]      2px
  1504.         [inner-end]    5px
  1505.         [mid-end]      5px
  1506.         [outer-end];
  1507.  
  1508.       grid-template-rows:
  1509.         [outer-start]  5px
  1510.         [mid-start]    5px
  1511.         [inner-start]  2px
  1512.         [gap-start]    1fr
  1513.         [gap-end]      2px
  1514.         [inner-end]    5px
  1515.         [mid-end]      5px
  1516.         [outer-end];
  1517.  
  1518. }
  1519.    
  1520. .square-deco-square-* {
  1521.     background: inherit;
  1522. }
  1523.  
  1524. .square-deco-content {
  1525.     grid-column: inner-start / inner-end;
  1526.     grid-row: inner-start / inner-end;
  1527.     font-family: inherit;
  1528.     font-size: inherit;
  1529.     background: transparent;
  1530.     z-index: 1;
  1531.     box-sizing: border-box;
  1532.     display: flex;
  1533.     flex-direction: column;
  1534.     justify-content: space-between;
  1535.     height: 100%;
  1536.     width:100%;
  1537. }
  1538.  
  1539. .square-deco-inner {    
  1540.     grid-column: mid-start / mid-end;
  1541.     grid-row: mid-start / mid-end;
  1542.     border: 1px solid {color:Borders};
  1543. }
  1544.  
  1545. .square-deco-square-left-top {
  1546.     grid-column: outer-start / inner-start;
  1547.     grid-row: outer-start / inner-start;
  1548.     border: 1px solid {color:Borders};
  1549. }
  1550.  
  1551. .square-deco-square-left-bottom {
  1552.     grid-column: outer-start / inner-start;
  1553.     grid-row: inner-end / outer-end;
  1554.     border: 1px solid {color:Borders};
  1555. }
  1556.  
  1557. .square-deco-square-right-top {
  1558.     grid-column: inner-end / outer-end;
  1559.     grid-row: outer-start / inner-start;
  1560.     border: 1px solid {color:Borders};
  1561. }
  1562.  
  1563. .square-deco-square-right-bottom {
  1564.     grid-column: inner-end / outer-end;
  1565.     grid-row: inner-end / outer-end;
  1566.     border: 1px solid {color:Borders};
  1567. }
  1568.  
  1569. .square-deco-tall {
  1570.     grid-column: gap-start / gap-end;
  1571.     grid-row: outer-start / outer-end;
  1572.     border-top: 1px solid {color:Borders};
  1573.     border-bottom: 1px solid {color:Borders};
  1574.    
  1575. }
  1576.  
  1577. .square-deco-wide {
  1578.     grid-column: outer-start / outer-end;
  1579.     grid-row: gap-start / gap-end;
  1580.     border-left: 1px solid {color:Borders};
  1581.     border-right: 1px solid {color:Borders};
  1582. }
  1583.  
  1584. .posts .square-deco-container {
  1585.     width: 600px;
  1586. }
  1587.  
  1588. .square-deco-content {
  1589.     padding: 0.65em;
  1590.     box-sizing: border-box;
  1591. }
  1592.  
  1593. .photo {
  1594.     display: block;
  1595.     width: 100%;
  1596. }
  1597.  
  1598. .photo img {
  1599.     display: block;
  1600.     height: auto !important;
  1601.     margin-bottom: 0.5em;
  1602. }
  1603.  
  1604.  
  1605. /*--- POSTS ---*/
  1606.  
  1607. main {
  1608.     justify-content: center;
  1609.     width: 1100px;
  1610.     margin: auto;
  1611.     margin-top:1em;
  1612. }
  1613.  
  1614. section {
  1615.     bottom: 14px;
  1616.     position: relative;
  1617.     width: 600px;
  1618.     margin-left: 400px;
  1619. }
  1620.  
  1621. article {
  1622.     width: 100%;
  1623.     position: relative;
  1624.     margin-top: 60px;
  1625.     background: {color:Container};
  1626. }
  1627.  
  1628. article.post {
  1629.     display: flex;
  1630.     flex-direction: column;
  1631.     border: 1px solid {color:Borders};
  1632.     background: {color:Container};
  1633.     max-width: 540px;
  1634. }
  1635.  
  1636. .topinfo {
  1637.     display: flex;
  1638.     justify-content: flex-end;
  1639.     padding: 0.5em;
  1640. }
  1641.  
  1642. .post-content {
  1643.     padding: 1em;
  1644.     margin-top: 0.5em;
  1645. }
  1646.  
  1647. .post-footer {
  1648.     display: flex;
  1649.     justify-content: space-between;
  1650.     align-items: flex-start;
  1651.     padding: 0.5em 1em;
  1652.     gap: 1em;
  1653. }
  1654.  
  1655. .tags {
  1656.     display: flex;
  1657.     flex-wrap: wrap;
  1658.     gap: 0.4em;
  1659.     max-width: calc(100% - 50px);
  1660. }
  1661.  
  1662. .tags a {
  1663.     text-decoration: none;
  1664.     padding: 0.2em 0.4em;
  1665. }
  1666.  
  1667. .tags a:hover {
  1668.     background: {color:Link};
  1669.     color: {color: Accent};
  1670. }
  1671.  
  1672. body.night .tags a:hover {
  1673.     background: {color:Link Night};
  1674.     color: {color:Accent Night};
  1675. }
  1676.  
  1677. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  1678.  
  1679.  
  1680. /*--- CAPTIONS ---*/
  1681.  
  1682. .caption {
  1683.     margin-top: 1.5em;
  1684.     list-style-type: none;
  1685.     margin-bottom: -0.5em;
  1686. }
  1687.  
  1688. .caption:empty {
  1689.   display: none;
  1690. }
  1691.        
  1692. .text-caption:first-of-type {margin-top: 0;}
  1693.  
  1694. .permalink-icon {
  1695.     position: relative;
  1696.     display: inline-block;
  1697.     vertical-align: middle;
  1698.     background: {color:Boxes};
  1699.     border: 1px solid {color:Borders};
  1700.     padding: 5px;
  1701.     z-index: 1999;
  1702.     width: 2.5em;
  1703.     height: 2.5em;
  1704.     margin-top: -10px;
  1705. }
  1706.  
  1707. .permalink-icon:hover {
  1708.     background-color: {color:Borders};
  1709.     -webkit-transition: all 0.3s;
  1710.     -moz-transition: all 0.3s;
  1711.     -ms-transition: all 0.3s;
  1712.     -o-transition: all 0.3s;
  1713.     transition: all 0.3s;
  1714. }
  1715.  
  1716. .userblock {
  1717.   display: flex;
  1718.   justify-content: center;
  1719.   align-items: center;
  1720.   margin-bottom: 0.5em;
  1721. }
  1722.  
  1723. .user-icon {
  1724.     display: inline-block;
  1725.     position: relative;
  1726.     vertical-align: middle;
  1727.     width: 2.5em;
  1728.     height: 2.5em;
  1729.     background-color: {color:Boxes};
  1730.     border:1px solid {color:Borders};
  1731.     padding:5px;
  1732. }
  1733.  
  1734. .user-icon:hover {
  1735.     background-color: {color:Borders};
  1736.     -webkit-transition: all 0.3s;
  1737.     -moz-transition: all 0.3s;
  1738.     -ms-transition: all 0.3s;
  1739.     -o-transition: all 0.3s;
  1740.     transition: all 0.3s;
  1741.     cursor: pointer;
  1742. }
  1743.  
  1744. .ask-icon {
  1745.     display: inline-block;
  1746.     vertical-align: middle;
  1747.     width: 2.5em;
  1748.     height: 2.5em;
  1749.     background-color: {color:Boxes};
  1750.     border:1px solid {color:Borders};
  1751.     padding:5px;
  1752.    
  1753. }
  1754.  
  1755. .ask-icon:hover {
  1756.     background-color: {color:Borders};
  1757. }
  1758.    
  1759. .username {
  1760.     display: inline-block;
  1761.     vertical-align: middle;
  1762.     font-weight: bold;
  1763.     font-family: inherit;
  1764.     margin-left: 10px;
  1765. }
  1766.  
  1767. .username a:hover{
  1768.     color:{color:Accent};
  1769. }
  1770.  
  1771. .deactive::after {
  1772.     content: '(deactivated)';
  1773.     margin-left: 0.5em;
  1774.     opacity: 0.75;
  1775.     color: {color:text};
  1776. }
  1777.  
  1778. p.tmblr-attribution {margin-top: 1em !important;}
  1779.  
  1780.  
  1781. /*--- TEXT ---*/
  1782.  
  1783. h1.post-title {margin-top: 0;}
  1784.  
  1785.  
  1786. /*--- LINK ---*/
  1787.  
  1788. a.link-wrap {display: block; border: 1px solid {color:borders};}
  1789. .link {padding: 2em;}
  1790. .link-host, .link-txt {margin-top: 1.5em;}
  1791.  
  1792. .npf-link-block {
  1793.     margin-top: 1.5em;
  1794.     background-color: inherit;
  1795.     border: 1px solid inherit;
  1796.     color: inherit;
  1797. }
  1798.  
  1799.  
  1800. /*--- PHOTO ---*/
  1801.  
  1802. img {
  1803.     margin: 0;
  1804.     display: block;
  1805.     height: auto !important;
  1806.     max-width: 540px;
  1807. }
  1808.  
  1809. .photo img {width: 100%;}
  1810. .vignette, #vignette {opacity: 0;}
  1811. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  1812.  
  1813. .lightbox-image, #tumblr_lightbox img {
  1814.     box-shadow: none !important;
  1815.     border-radius: 0 !important;
  1816.     max-width: none;
  1817. }
  1818.  
  1819. #tumblr_lightbox_caption, .lightbox-caption {
  1820.     color: #fff !important;
  1821.     font-family: inherit;
  1822.     margin-top: 1em !important;
  1823. }
  1824.  
  1825.  
  1826. /*--- PHOTOSET ---*/
  1827.  
  1828. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  1829.     margin-left: 0 !important;
  1830.     margin-right: 0 !important;
  1831. }
  1832.  
  1833.  
  1834. /*--- QUOTE ---*/
  1835.  
  1836. .quote {line-height: 160%; font-size: 1.25em;}
  1837.  
  1838. .quote p:first-of-type {margin-top: 0;}
  1839. .quote p:last-of-type {margin-bottom: 0;}
  1840.  
  1841. .source {margin-top: 1.5em;}
  1842.  
  1843.  
  1844. /*--- CHAT ---*/
  1845.  
  1846. .chat {padding: 0; margin: 0;}
  1847. .chat li {list-style-type: none; margin-top: 1em;}
  1848. .chat li:first-of-type {margin-top: 0;}
  1849. .chatter {font-weight: bold;}
  1850.  
  1851. p.npf_chat, p.npf_chat b {font-family: inherit;}
  1852.  
  1853.  
  1854. /*--- ANSWER ---*/
  1855.  
  1856. .username-answer {
  1857.     display: inline-block;
  1858.     vertical-align: middle;
  1859.     font-weight: bold;
  1860.     font-family: inherit;
  1861.     margin-left: 0.5em;
  1862. }
  1863.  
  1864. .username-answer a:hover {
  1865.     text-decoration: none!important;
  1866.     color: {color:Accent}!important;
  1867. }
  1868.  
  1869. .ask-wrap {
  1870.     border-bottom: 1px solid {color:Borders};
  1871.     padding-bottom: 3em;}
  1872.  
  1873. .ask-wrap .asking {
  1874.     display: inline-block;
  1875.     margin-left: 0.5em;
  1876.     font-weight: bold;
  1877.     font-family:inherit;
  1878. }
  1879.  
  1880. .ask-wrap .asking a:hover {
  1881.     text-decoration: none!important;
  1882.     color: {color:Accent}!important;
  1883. }
  1884.  
  1885. .question {
  1886.     margin-top: 1em;
  1887.     text-align: normal !important;
  1888. }
  1889. .question p:first-of-type {margin-top: 0;}
  1890. .question p:last-of-type {margin-bottom: 0;}
  1891.  
  1892.  
  1893. /*--- AUDIO ---*/
  1894.  
  1895. .audiopost {padding: 0.15em; border: 1px solid {color:Borders};}
  1896.  
  1897. .album-art {
  1898.     z-index: 1;
  1899.     display: inline-block;
  1900.     vertical-align: middle;
  1901.     float: left;
  1902.     width: 100px;
  1903.     height: 100px;
  1904. }
  1905.  
  1906. .audio-player-wrap {
  1907.     width: 100px;
  1908.     height: 100px;
  1909.     display: inline-block;
  1910. }
  1911.  
  1912. .button {
  1913.     width: 30px;
  1914.     height: 30px;
  1915.     overflow: hidden;
  1916.     position: relative;
  1917.     z-index: 2;
  1918.     margin: 7px;
  1919. }
  1920.  
  1921. .audiobox {
  1922.     background-color: #f2f2f2;
  1923.     z-index: 3;
  1924.     position: absolute;
  1925.     margin: 28px 0 0 28px;
  1926.     border-radius: 50%;
  1927. }
  1928.  
  1929. .audioinfo {
  1930.     display: inline-block;
  1931.     height: 100px;
  1932.     max-width: calc(100% - 100px);
  1933.     margin-left: 50px;
  1934.     display: flex;
  1935.     justify-content: center;
  1936.     flex-direction: column;
  1937.     box-sizing: border-box;
  1938.     padding-left: 5px;
  1939.     color: {color:Link};
  1940. }
  1941.  
  1942. .audioinfo li {list-style-type: none;}
  1943. .track {font-weight: bold;}
  1944.  
  1945.  
  1946. /*--- LIKE BUTTON ---*/
  1947.  
  1948. .likeb {
  1949.   position: relative;
  1950.   display: inline-block;
  1951. }
  1952.  
  1953. .likeb .like_button {
  1954.   position: absolute;
  1955.   top: 0;
  1956.   left: 0;
  1957.   width: 100%;
  1958.   height: 100%;
  1959.   opacity: 0;
  1960.   z-index: 2;
  1961. }
  1962.  
  1963. .likeb .like_button iframe {
  1964.   position: absolute;
  1965.   top: 0;
  1966.   left: 0;
  1967.   bottom: 0;
  1968.   right: 0;
  1969.   z-index: 2;
  1970.   opacity: 0;
  1971. }
  1972.  
  1973. .like_button iframe {width: 100% !important; height: 100% !important;}
  1974. .likeb .liked + .actual-button {color: red;}
  1975.  
  1976.  .likeb:hover .postdiamond {
  1977.   background-color: {color:Borders};
  1978.   border-color: {color:Borders};
  1979. }
  1980.  
  1981. .likeb:hover .postdiamond i,
  1982. .likeb:hover .postdiamond i svg {
  1983.   color: {color:Accent};
  1984. }
  1985.  
  1986. .likeb .like_button.liked + .actual-button .postdiamond {
  1987.   background-color: {color:Borders};
  1988.   border-color: {color:Borders};
  1989. }
  1990.  
  1991. .likeb .like_button.liked + .actual-button .postdiamond i,
  1992. .likeb .like_button.liked + .actual-button .postdiamond i svg {
  1993.   color: {color:Accent};
  1994. }
  1995.  
  1996.  
  1997. /*--- PINNED POST ---*/
  1998.  
  1999. .pinned-post {
  2000.     z-index: 10;
  2001.     position: absolute;
  2002.     top: -10px;
  2003.     right: -8px;
  2004.     width: auto;
  2005.     height: auto !important;
  2006.     display: flex;
  2007.     justify-content: flex-end;
  2008.     pointer-events: none;
  2009. }
  2010.  
  2011. .pinned-post .diamond {
  2012.     pointer-events: auto;
  2013. }
  2014.  
  2015. .pinned-post .diamond:hover {
  2016.     background-color: {color:Borders};
  2017.     border-color: {color:Borders};
  2018.     color: {color:Accent};
  2019. }
  2020.  
  2021.  
  2022. /*---- HIDDEN TAGS ---*/
  2023.  
  2024. a.tag-button {
  2025.     cursor: pointer;
  2026.     position: relative;
  2027.     display: inline-block;
  2028.     vertical-align: middle;
  2029. }
  2030.  
  2031. a.tag-button.tag-clicked svg {
  2032.     color: {color:Accent};
  2033. }
  2034.  
  2035. .tags {
  2036.     display: flex;
  2037.     justify-content: center;
  2038.     margin-top: 1em;
  2039.     margin-bottom: 1em;
  2040.     width: 540px;
  2041.     height: auto;
  2042. }
  2043.  
  2044. .tags a {
  2045.     margin-left: 1em;
  2046. }
  2047.  
  2048. a.tags.tag-clicked {
  2049.     width: 540px !important;
  2050. }
  2051.  
  2052. a.tag-button.tag-clicked .postdiamond {
  2053.     background-color: {color:Borders};
  2054.     border-color: {color:Borders};
  2055. }
  2056.  
  2057. a.tag-button.tag-clicked .postdiamond i,
  2058. a.tag-button.tag-clicked .postdiamond i svg {
  2059.     color: {color:Accent};
  2060. }
  2061.  
  2062.  
  2063. /*---- TOP INFO ---*/
  2064.  
  2065. .topinfo {
  2066.     position: absolute;
  2067.     top: 0;
  2068.     left: 50%;
  2069.     transform: translateX(-50%);
  2070.     z-index: 20;
  2071.     display: flex;
  2072.     justify-content: center;
  2073.     align-items: center;
  2074.     width: 100%;
  2075.     text-transform: uppercase;
  2076.     font-weight: bold;
  2077. }
  2078.  
  2079. .topnotes {
  2080.     position: absolute;
  2081.     text-decoration: none;
  2082.     padding: 9px;
  2083.     border: 1px solid {color:Borders};
  2084.     z-index: 1999;
  2085.     background: {color:Boxes};
  2086.     margin-top: -1%;
  2087.     font-size: calc({select:Font Size} - 2px);
  2088. }
  2089.  
  2090. .topnotes:hover {
  2091.     background-color: {color:Borders};
  2092.     border-color: {color:Borders};
  2093.     color: {color:Accent};
  2094. }
  2095.  
  2096.  
  2097. /*---- POST NOTES ---*/
  2098.  
  2099. .notes {margin: auto;}
  2100.  
  2101. ol.notes {
  2102.     max-width: 100%;
  2103.     padding: 0;
  2104.     margin-top:0.5em;
  2105. }
  2106.  
  2107. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  2108.  
  2109. ol.notes li.note img.avatar {
  2110.     margin-right: 0.5em;
  2111.     vertical-align: middle;
  2112.     display: inline-block;
  2113.     width: 1.5em;
  2114.     height: 1.5em;
  2115. }
  2116.  
  2117. img.avatar {
  2118.     border: 1px solid {color:Borders};
  2119.     margin-top: -0.1em;
  2120. }
  2121.  
  2122.  
  2123. /*---- POST BUTTONS ----*/
  2124.  
  2125. .permalink-icon-container {
  2126.   display: flex;
  2127.   align-items: center;
  2128.   position: absolute;
  2129.   gap: 8em;
  2130.   margin-bottom: -5px;
  2131. }  
  2132.  
  2133. .post-buttons {
  2134.     position: absolute;
  2135.     bottom: 0;
  2136.     left: 50%;
  2137.     transform: translateX(-50%);
  2138.     display: flex;
  2139.     gap: 0.5em;
  2140.     padding: 0.5em 0;
  2141.     z-index: 10;
  2142.     margin-top:10%;
  2143.     margin-bottom: -3.5%;
  2144.     justify-content: center;
  2145. }
  2146.  
  2147. .postdiamond {
  2148.   display: inline-flex;
  2149.   justify-content: center;
  2150.   align-items: center;
  2151.   position: relative;
  2152.   transform: rotate(45deg);
  2153.   border: 1px solid {color:Borders};
  2154.   margin-left: 6px;
  2155.   width: 35px;
  2156.   height: 35px;
  2157.   background: {color:Diamonds};
  2158.   box-sizing: border-box;
  2159.   transition: background 0.3s, border-color 0.3s;
  2160.   cursor: pointer;
  2161. }
  2162.  
  2163. .postdiamond:hover {
  2164.     background-color: {color:Borders};
  2165.     border-color: {color:Borders};
  2166. }
  2167.  
  2168. .postdiamond svg {
  2169.   width: 16px !important;
  2170.   height: 16px !important;
  2171.   transform: rotate(-45deg);
  2172.  
  2173. }
  2174.  
  2175. .post-buttons {
  2176.     position: absolute;
  2177.     bottom: 0;
  2178.     left: 50%;
  2179.     transform: translateX(-50%);
  2180.     display: flex;
  2181.     gap: 0.5em;
  2182.     padding: 0.5em 0;
  2183.     z-index: 10;
  2184.     margin-top:10%;
  2185.     margin-bottom: -3.5%;
  2186.     justify-content: center;
  2187. }
  2188.  
  2189. .postdiamond {
  2190.   display: inline-flex;
  2191.   justify-content: center;
  2192.   align-items: center;
  2193.   position: relative;
  2194.   transform: rotate(45deg);
  2195.   border: 1px solid {color:Borders};
  2196.   margin-left: 6px;
  2197.   width: 35px;
  2198.   height: 35px;
  2199.   background: {color:Diamonds};
  2200.   box-sizing: border-box;
  2201.   transition: background 0.3s, border-color 0.3s;
  2202.   cursor: pointer;
  2203. }
  2204.  
  2205. .postdiamond:hover {
  2206.     background-color: {color:Borders};
  2207.     border-color: {color:Borders};
  2208. }
  2209.  
  2210. .postdiamond svg {
  2211.   width: 16px !important;
  2212.   height: 16px !important;
  2213.   transform: rotate(-45deg);
  2214.  
  2215. }
  2216.  
  2217. {block:AskPage}
  2218.  
  2219. section {
  2220.     top:100px;
  2221. }
  2222.  
  2223. .post-buttons {
  2224.     display: none;
  2225. }
  2226.  
  2227. #wrapper_featured_posts {
  2228.     display: none;
  2229. }
  2230.  
  2231. {/block:AskPage}
  2232.  
  2233. {block:CustomPage}
  2234.  
  2235. .post-buttons {
  2236.     display: none;
  2237. }
  2238.  
  2239. #wrapper_featured_posts {
  2240.     display: none;
  2241. }
  2242.  
  2243. section {
  2244.     top: 100px;
  2245. }
  2246.  
  2247. {/block:CustomPage}
  2248.  
  2249.  
  2250. /*---- PAGINATION ---*/
  2251.  
  2252. #page-navigation {
  2253.     display: flex;
  2254.     justify-content: center;
  2255.     text-align: center;
  2256.     margin-right: 100px;
  2257.     margin-bottom: 2em;
  2258.     background:{color:Background};
  2259. }
  2260.  
  2261. article #page-navigation {
  2262.     border: 1px solid transparent;
  2263. }
  2264.  
  2265. #page-navigation .diamond {
  2266.     height: 30px;
  2267.     width: 30px;
  2268.     margin-top: -5px;
  2269. }
  2270.  
  2271. #page-navigation .diamond svg {
  2272.     height: 14px;
  2273.     width: 14px;
  2274.     color: {color:Link};
  2275. }
  2276.  
  2277. #page-navigation .diamond:hover {
  2278.     color: {color:Accent};
  2279.     background: {color:Borders};
  2280. }
  2281.  
  2282. #page-navigation .diamond svg:hover {
  2283.     color: {color:Accent};
  2284. }
  2285.  
  2286. #page-navigation a, .current-page {
  2287.     margin-right: 1em;
  2288. }
  2289.  
  2290. .current-page {
  2291.     display: inline-block;
  2292.     font-weight: bold;
  2293.     color: {color:Link};
  2294.     font-size: calc({select:Font Size}+2px);
  2295. }
  2296.  
  2297.  
  2298. /*----
  2299.  
  2300. MEDIA QUERIES AND RESPONSIVENESS:
  2301.  
  2302. ---*/
  2303.  
  2304. @media only screen and (max-width: 1100px) {
  2305.    
  2306. main {
  2307.     width: 540px;
  2308. }
  2309.  
  2310. #sidebar {
  2311.     position: relative;
  2312.     display: flex;
  2313.     flex-direction: column;
  2314.     justify-content: center;
  2315.     text-align: center;
  2316.     top: 20px;
  2317.     left: 20%;
  2318.     max-width: 100%;
  2319. }
  2320.    
  2321. #sidebar img {
  2322.     max-width: 200px;
  2323.     display: block;
  2324.     height: auto !important;
  2325.     margin: 0 auto 1em;
  2326. }
  2327.    
  2328. #sidebar .square-deco-container {
  2329.     width: auto;
  2330. }
  2331.    
  2332. .side-img-container {
  2333.     display: flex;
  2334.     flex-direction: column;
  2335. }
  2336.    
  2337. #sidebar .icon-nav {
  2338.     margin-bottom: -5.5%;
  2339. }
  2340.  
  2341. .sidebar-icon {
  2342.     display: flex;
  2343.     justify-content: center;
  2344.     margin-top:20px;
  2345.     max-width:100%;
  2346.     margin-bottom:-10px;
  2347. }
  2348.  
  2349. .sidebar-icon img {
  2350.     border-radius: 50%;
  2351.     height: 70px;
  2352.     width: 70px;
  2353. }
  2354.  
  2355. .title {
  2356.     width: 100%;
  2357.     text-align: center;
  2358.     word-wrap: break-word;
  2359. }
  2360.  
  2361. .searchblock {
  2362.     top: 110%;
  2363. }
  2364.  
  2365. #wrapper_featured_posts .inner_featured_posts>.grid_featured {
  2366.     width: 150px;
  2367.     height: 150px;
  2368.     overflow: hidden;
  2369. }
  2370.  
  2371. section {
  2372.     margin-left: 0;
  2373.     top: 80px;
  2374.     width: 100%;
  2375. }
  2376.    
  2377. #page-navigation {
  2378.     top: 60px;
  2379. }
  2380.  
  2381.  
  2382. {block:ifSidebarImage}
  2383.  
  2384. .sidebar-icon {
  2385.     display: none;
  2386. }
  2387.  
  2388. .sidebar-icon img {
  2389.     display: none;
  2390. }
  2391.  
  2392. {/block:ifSidebarImage}
  2393.  
  2394. }
  2395.  
  2396. /*--- MOBILE ---*/
  2397.  
  2398. @media only screen and (max-width: 720px) {
  2399.     main, section {width: 80vw;}
  2400. }
  2401.  
  2402. @media (max-height: 800px) {
  2403.   .search-suggestions {
  2404.     max-height: 30vh;
  2405.     overflow-y: auto;
  2406.   }
  2407.  
  2408. }
  2409.  
  2410. @media (max-height: 500px) {
  2411.   .search-suggestions {
  2412.     max-height: 20vh;
  2413.   }
  2414. }
  2415.  
  2416. /*---- SCROLL TO TOP ---*/
  2417.  
  2418. .scrolltotop {
  2419.     position: fixed;
  2420.     bottom: 60px;
  2421.     right: 20px;
  2422.     border: 1px solid {color:Borders};
  2423.     background: {color:Diamonds};
  2424.     transform: rotate(45deg);
  2425. }
  2426.  
  2427. .scrolltotop:hover {
  2428.     background-color: {color:Borders};
  2429. }
  2430.  
  2431. .scrolltotop svg {
  2432.     display: inline-block;
  2433.     vertical-align: middle;
  2434.     margin: auto;
  2435.     padding: 6px;
  2436.     width: 14px;
  2437.     height: 14px;
  2438.     transform: rotate(-45deg);
  2439. }
  2440.  
  2441.  
  2442. /*---- CREDIT ---*/
  2443.  
  2444. #credit {
  2445.     position: fixed;
  2446.     bottom: 20px;
  2447.     right: 20px;
  2448.     background: {color:Diamonds};
  2449.     border: 1px solid {color:Borders};
  2450.     transform: rotate(45deg);
  2451.  
  2452. }
  2453.  
  2454. #credit svg {
  2455.     display: inline-block;
  2456.     vertical-align: middle;
  2457.     margin: auto;
  2458.     padding: 6px;
  2459.     width: 14px;
  2460.     height: 14px;
  2461.     transform: rotate(-45deg);
  2462. }
  2463.  
  2464. #credit:hover {
  2465.     background: {color:Borders};
  2466. }
  2467.  
  2468. /*--- ABOUT ME (NIGHT MODE) ---*/
  2469.    
  2470. body.night .profile a {
  2471.     color: {color:Link Night};
  2472. }
  2473.    
  2474. body.night .profile .profilet {
  2475.     border: 1px solid {color:Borders Night};
  2476.     background-color: {color:Diamonds Night};
  2477. }
  2478.  
  2479. body.night .profile .profilet:hover {
  2480.     background: {color:Borders Night};
  2481.     color: {color:Accent Night};
  2482. }
  2483.  
  2484. body.night .profile .profileu {
  2485.     border: 1px solid {color:Borders Night};
  2486.     background: {color:Boxes Night};
  2487.     color: {color:Text Night};
  2488. }
  2489.  
  2490. body.night .profilet.active {
  2491.   background-color: {color:Borders Night} !important;
  2492.   border-color: {color:Borders Night};
  2493. }
  2494.  
  2495. body.night .profilet.active svg {
  2496.   color: {color:Accent Night};
  2497. }
  2498.  
  2499.  
  2500. /*--- SOCIALS (NIGHT MODE) ---*/
  2501.    
  2502. body.night .socials a {
  2503.     color: {color:Link Night};
  2504. }
  2505.    
  2506. body.night .socials .socialt {
  2507.     border: 1px solid {color:Borders Night};
  2508.     background-color: {color:Diamonds Night};
  2509. }
  2510.  
  2511. body.night .socials .socialt:hover {
  2512.     background: {color:Borders Night};
  2513.     color: {color:Accent Night};
  2514. }
  2515.  
  2516. body.night .socials .socialu {
  2517.     border: 1px solid {color:Borders Night};
  2518.     background: {color:Boxes Night};
  2519.     color: {color:Text Night};
  2520. }
  2521.  
  2522. body.night .socialt.active {
  2523.   background-color: {color:Borders Night} !important;
  2524.   border-color: {color:Borders Night};
  2525. }
  2526.  
  2527. body.night .socialt.active svg {
  2528.   color: {color:Accent Night};
  2529. }
  2530.  
  2531.  
  2532. /*--- SIDEBLOGS (NIGHT MODE) ---*/
  2533.  
  2534. body.night .sideblog a {
  2535.     color: {color:Link Night};
  2536. }
  2537.    
  2538. body.night .sideblog .sideblogt {
  2539.     border: 1px solid {color:Borders Night};
  2540.     background:{color:Diamonds Night};
  2541. }
  2542.  
  2543. body.night .sideblog .sideblogt:hover {
  2544.     background: {color:Borders Night};
  2545.     color: {color:Accent Night};
  2546. }
  2547.  
  2548. body.night .sideblog .sideblogu {
  2549.     border: 1px solid {color:Borders Night};
  2550.     background: {color:Boxes Night};
  2551.     color: {color:Text Night};
  2552. }
  2553.  
  2554. body.night .sideblog .sideblogu {
  2555.     color: {color:Accent Night};
  2556. }
  2557.  
  2558. body.night .sideblogt.active {
  2559.   background-color: {color:Borders Night} !important;
  2560.   border-color: {color:Borders Night};
  2561. }
  2562.  
  2563. body.night .sideblogt.active svg {
  2564.   color: {color:Accent Night};
  2565. }
  2566.  
  2567.  
  2568. /*--- MORE LINKS (NIGHT MODE) ---*/
  2569.  
  2570. body.night .more .moret {
  2571.     border: 1px solid {color:Borders Night};
  2572.     background: {color:Diamonds Night};
  2573. }
  2574.  
  2575. body.night .more .moret:hover {
  2576.     background: {color:Borders Night};
  2577.     color: {color:Accent Night};
  2578. }
  2579.  
  2580. body.night .more .moreu {
  2581.     border: 1px solid {color:Borders Night};
  2582.     background: {color:Boxes Night};
  2583.     color: {color:Text Night};
  2584.    
  2585. }
  2586.  
  2587. body.night .more .moreu svg {
  2588.     color: {color:Borders Night};
  2589. }
  2590.  
  2591. body.night .moret.active {
  2592.   background-color: {color:Borders Night} !important;
  2593.   border-color: {color:Borders Night};
  2594. }
  2595.  
  2596. body.night .moret.active svg {
  2597.   color: {color:Accent Night};
  2598. }
  2599.  
  2600.  
  2601. /*--- TOOL TIPS (NIGHT MODE) ---*/
  2602.  
  2603. body.night .tippy-tooltip.custom-theme {
  2604.     background-color: {color:Boxes Night};
  2605.     border: 1px solid {color:Borders Night};
  2606.     color: {color:Link Night};
  2607. }
  2608.  
  2609.  
  2610. /*--- SCROLLBAR (NIGHT MODE) ---*/
  2611.  
  2612.  
  2613. /*--- FEATURED POSTS (NIGHT MODE) ---*/
  2614.  
  2615. body.night #wrapper_featured_posts {
  2616.     background: {color:Container Night};
  2617. }
  2618.  
  2619. body.night #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore {
  2620.     background-color: {color:Boxes Night};
  2621.     color: {color:Accent Night} !important;
  2622.     border:1px solid {color:Borders Night};
  2623. }
  2624.  
  2625. body.night #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore:hover {
  2626.     background-color: {color:Borders Night};
  2627.     color: {color:Accent Night};
  2628. }
  2629.  
  2630. body.night .featuredtitle {
  2631.     border: 1px solid {color:Borders Night};
  2632.     border: 1px solid {color:Borders Night};
  2633.     background: {color:Boxes Night};
  2634. }
  2635.  
  2636. body.night .featuredtitle:hover {
  2637.     background: {color:Borders Night};
  2638.     color: {color:Accent Night};
  2639. }
  2640.  
  2641. /*--- UPDATES (NIGHT MODE) ---*/
  2642.  
  2643. body.night #updates a {
  2644.     color:{color:Link Night};
  2645. }
  2646.    
  2647. body.night #updates .updatet {
  2648.     border: 1px solid {color:Borders Night};
  2649.     background-color: {color:Diamonds Night};
  2650. }
  2651.  
  2652. body.night #updates .updatet:hover {
  2653.     background: {color:Borders Night};
  2654.     color: {color:Accent Night};
  2655. }
  2656.  
  2657. body.night #updates .updateu {
  2658.     border: 1px solid {color:Borders Night};
  2659.     background: {color:Boxes Night};
  2660.     color: {color:Text Night};
  2661. }
  2662.  
  2663. body.night .updatet.active {
  2664.   background-color: {color:Borders Night} !important;
  2665.   border-color: {color:Borders Night};
  2666. }
  2667.  
  2668. body.night .updatet.active svg {
  2669.   color: {color:Accent Night};
  2670. }
  2671.  
  2672. /*--- BASIC STYLING (NIGHT MODE) ---*/
  2673.  
  2674. body.night {
  2675.     color: {color:Text Night};
  2676.     background-color: {color:background Night};
  2677. }
  2678.  
  2679. body.night a {
  2680.     color: {color:Link Night};
  2681. }
  2682.  
  2683. body.night a:hover {
  2684.     color: {color:Accent Night};
  2685. }
  2686.  
  2687. body.night blockquote {
  2688.     border-left: 1px solid {color:Borders Night};
  2689. }
  2690.  
  2691. body.night h4 {
  2692.     color: {color:Link Night};
  2693. }
  2694.  
  2695. body.night hr {
  2696.     background-color: {color:Borders Night};
  2697. }
  2698.  
  2699. /*--- SIDEBAR (NIGHT MODE) ---*/
  2700.  
  2701. body.night #sidebar {
  2702.     background: {color:Container Night};
  2703. }
  2704.  
  2705. body.night .usertag a {
  2706.     border: 1px solid {color:Borders Night};
  2707.     color: {color:Link Night};
  2708.     background: {color:Boxes Night};
  2709. }
  2710.  
  2711. body.night .usertag a:hover {
  2712.     color: {color:Accent Night} !important;
  2713.     background: {color:Borders Night};
  2714. }
  2715.  
  2716. body.night .usertaginfo {
  2717.     border: 1px solid {color:Borders Night};
  2718.     background: {color:Boxes Night};
  2719.     color: {color:Text Night};
  2720. }
  2721.  
  2722. /*--- DECORATION (NIGHT MODE) ---*/
  2723.  
  2724. body.night .square-deco-inner {
  2725.     border: 1px solid {color:Borders Night};
  2726. }
  2727.  
  2728. body.night .square-deco-square-left-top {
  2729.       border: 1px solid {color:Borders Night};
  2730. }
  2731.  
  2732. body.night .square-deco-square-left-bottom {
  2733.       border: 1px solid {color:Borders Night};
  2734. }
  2735.  
  2736. body.night .square-deco-square-right-top {
  2737.       border: 1px solid {color:Borders Night};
  2738. }
  2739.  
  2740. body.night .square-deco-square-right-bottom {
  2741.       border: 1px solid {color:Borders Night};
  2742. }
  2743.  
  2744. body.night .square-deco-tall {
  2745.       border-top: 1px solid {color:Borders Night};
  2746.       border-bottom: 1px solid {color:Borders Night};
  2747. }
  2748.  
  2749. body.night .square-deco-wide {
  2750.       border-left: 1px solid {color:Borders Night};
  2751.       border-right: 1px solid {color:Borders Night};
  2752. }
  2753.  
  2754.  
  2755. /*--- SEARCHBAR (NIGHT MODE) ---*/
  2756.  
  2757.  
  2758. body.night .searchbar-button {
  2759.   border: 1px solid {color:Borders Night};
  2760.   background: {color:Borders Night};
  2761.   color: {color:Accent Night};
  2762. }
  2763.  
  2764. body.night .search-suggestions {
  2765.     color: {color:Link Night};
  2766.     background: {color:Container Night};
  2767.     border: 1px solid {color:Borders Night};
  2768. }
  2769.  
  2770. body.night .search-suggestions li:hover {
  2771.     background: {color:Link Night};
  2772.     color: {color:Accent Night};
  2773. }
  2774.  
  2775. body.night .searchbar-button button {
  2776.     border: {color:Borders Night};
  2777.     background: {color:Borders Night};
  2778.     color: {color:Accent Night};
  2779. }
  2780.  
  2781. body.night .searchbar-button button:hover {
  2782.     background: {color:Boxes Night};
  2783.     color: {color:Link Night};
  2784. }
  2785.  
  2786. body.night .search-suggestions a:hover {
  2787.     background: {color:Link Night};
  2788.     color: {color:Accent Night};
  2789. }
  2790.  
  2791. body.night .searchbar-field {
  2792.   border: 1px solid {color:Borders Night};
  2793.   background: {color:Background Night};
  2794.   color: {color:Link Night};
  2795. }
  2796.  
  2797. body.night .searchbar-field::placeholder {
  2798.   color: {color:Link Night};
  2799. }
  2800.  
  2801. /*--- POSTS (NIGHT MODE) ---*/
  2802.  
  2803. body.night article {
  2804.     background: {color:Container Night};
  2805. }
  2806.  
  2807. body.night article.square-deco-container {
  2808.   background: {color:Container Night};
  2809. }
  2810.  
  2811.  
  2812. /*--- CAPTIONS (NIGHT MODE) ---*/
  2813.  
  2814. body.night .permalink-icon {
  2815. background: {color:Boxes Night};
  2816. }
  2817.  
  2818. body.night .permalink-icon:hover {
  2819.     background-color: {color:Borders Night};
  2820. }
  2821.  
  2822. body.night .user-icon {
  2823.     background-color: {color:Boxes Night};
  2824.     border:1px solid {color:Borders Night};
  2825. }
  2826.  
  2827. body.night .user-icon:hover {
  2828.     background-color: {color:Borders Night};
  2829. }
  2830.  
  2831. body.night .ask-icon {
  2832.     display: inline-block;
  2833.     vertical-align: middle;
  2834.     width: 2.5em;
  2835.     height: 2.5em;
  2836.     background-color: {color:Boxes Night};
  2837.     border:1px solid {color:Borders Night};
  2838.     padding:5px;
  2839. }
  2840.  
  2841. body.night .ask-icon:hover {
  2842.     background-color: {color:Borders Night};
  2843. }
  2844.  
  2845. body.night .username a:hover{
  2846.     color: {color:Accent Night};
  2847. }
  2848.  
  2849. body.night .deactive::after {
  2850.     color: {color:Text Night};
  2851. }
  2852.  
  2853.  
  2854. /*--- LINK (NIGHT MODE) ---*/
  2855.  
  2856. body.night a.link-wrap {border: 1px solid {color:Borders Night};}
  2857.  
  2858.  
  2859. /*--- ANSWER (NIGHT MODE) ---*/
  2860.  
  2861. body.night .username-answer a:hover {
  2862.     color: {color:Accent Night} !important;
  2863. }
  2864.  
  2865. body.night .ask-wrap {
  2866.     border-bottom: 1px solid {color:Borders Night};
  2867. }
  2868.  
  2869. body.night .ask-wrap .asking a:hover {
  2870.     color: {color:Accent Night} !important;
  2871. }
  2872.  
  2873. .question {
  2874.     margin-top: 1em;
  2875.     text-align: normal !important;
  2876. }
  2877.  
  2878. .question p:first-of-type {margin-top: 0;}
  2879. .question p:last-of-type {margin-bottom: 0;}
  2880.  
  2881.  
  2882. /*--- AUDIO (NIGHT MODE) ---*/
  2883.  
  2884. body.night .audiopost {border: 1px solid {color:Borders Night};}
  2885.  
  2886. body.night .audioinfo {
  2887.     color: {color:Link Night};
  2888. }
  2889.  
  2890.  
  2891. /*---- HIDDEN TAGS (NIGHT MODE) ---*/
  2892.  
  2893. body.night a.tag-button.tag-clicked svg {
  2894.     color: {color:Accent Night};
  2895. }
  2896.  
  2897. body.night .tag-button.tag-clicked .postdiamond {
  2898.     background-color: {color:Borders Night};
  2899.     border-color: {color:Borders Night};
  2900. }
  2901.  
  2902. body.night a.tag-button.tag-clicked .postdiamond i,
  2903. body.night a.tag-button.tag-clicked .postdiamond i svg {
  2904.     color: {color:Accent Night};
  2905. }
  2906.  
  2907.  
  2908. /*---- TOP INFO (NIGHT MODE) ---*/
  2909.  
  2910. body.night .topnotes {
  2911.     background: {color:Boxes Night};
  2912.     border: 1px solid {color:Borders Night};
  2913. }
  2914.  
  2915. body.night .topnotes:hover {
  2916.     background-color: {color:Borders Night};
  2917.     border-color: {color:Borders Night};
  2918.     color: {color:Accent Night};
  2919. }  
  2920.  
  2921.  
  2922. /*---- POST BUTTONS (NIGHT MODE) ---*/
  2923.  
  2924. body.night .postdiamond {
  2925.   border: 1px solid {color:Borders Night};
  2926.   background: {color:Diamonds Night};
  2927. }
  2928.  
  2929. body.night .postdiamond:hover {
  2930.     background-color: {color:Borders Night};
  2931.     border-color: {color:Borders Night};
  2932. }
  2933.  
  2934.  
  2935. /*--- LIKE BUTTON (NIGHT MODE) ---*/
  2936.  
  2937. body.night .likeb:hover .postdiamond {
  2938.   background-color: {color:Borders Night};
  2939.   border-color: {color:Borders Night};
  2940. }
  2941.  
  2942. body.night .likeb:hover .postdiamond i,
  2943. body.night .likeb:hover .postdiamond i svg {
  2944.   color: {color:Accent Night};
  2945. }
  2946.  
  2947. body.night .likeb .like_button.liked + .actual-button .postdiamond {
  2948.   background-color: {color:Borders Night};
  2949.   border-color: {color:Borders Night};
  2950. }
  2951.  
  2952. body.night .likeb .like_button.liked + .actual-button .postdiamond i,
  2953. body.night .likeb .like_button.liked + .actual-button .postdiamond i svg {
  2954.   color: {color:Accent Night};
  2955. }
  2956.  
  2957.  
  2958. /*---- PAGINATION (NIGHT MODE) ---*/
  2959.  
  2960. body.night #page-navigation {
  2961.     background: {color:Background Night};
  2962.    
  2963. }
  2964.  
  2965. body.night #page-navigation .diamond svg {
  2966.     color: {color:Link Night};
  2967. }
  2968.  
  2969. body.night #page-navigation .diamond:hover {
  2970.     color: {color:Accent Night};
  2971.     background: {color:Borders Night};
  2972. }
  2973.  
  2974. body.night .current-page {color: {color:Link Night};}
  2975.  
  2976.  
  2977. /*---- SCROLL TO TOP (NIGHT MODE) ---*/
  2978.  
  2979. body.night .scrolltotop {
  2980.     border: 1px solid {color:Borders Night};
  2981.     background: {color:Diamonds Night};
  2982. }
  2983.  
  2984. body.night .scrolltotop:hover {
  2985.     background-color: {color:Borders Night};
  2986. }
  2987.  
  2988. /*---- CREDIT (NIGHT MODE) ---*/
  2989.  
  2990. body.night #credit {
  2991.     background: {color:Diamonds Night};
  2992.     border: 1px solid {color:Borders Night};
  2993.  
  2994. }
  2995.  
  2996. body.night #credit:hover {
  2997.     background:{color:Borders Night};
  2998. }
  2999.  
  3000.  
  3001. /*--- SEARCHBAR ROOTS ---*/
  3002.  
  3003. :root {
  3004.     --Searchbar-Field-Border:{color:Borders};
  3005.     --Searchbar-Field-Background:{color:Container};
  3006.     --Searchbar-Field-Placeholder-Color:{color:Link};
  3007.     --Searchbar-Field-Typing-Color:{color:Link};
  3008.     --Searchbar-Button-Border:{color:Borders};
  3009.     --Searchbar-Button-Background:{color:Borders};
  3010.     --Searchbar-Button-Text-Color:{color:Accent};
  3011.  
  3012.     --Search-Suggestion-Box-Border:{color:Borders};
  3013.     --Search-Suggestion-Box-Background:{color:Container};
  3014.     --Search-Suggestions-Text-Color:{color:Link};
  3015.     --Search-Suggestions-HOVER-Background:{color:Link};
  3016.     --Search-Suggestions-HOVER-Text-Color:{color:Accent};
  3017. }
  3018.  
  3019. body.night :root {
  3020.     --Searchbar-Field-Border:{color:Borders Night};
  3021.     --Searchbar-Field-Background:{color:Container Night};
  3022.     --Searchbar-Field-Placeholder-Color:{color:Link Night};
  3023.     --Searchbar-Field-Typing-Color:{color:Link Night};
  3024.  
  3025.     --Searchbar-Button-Border:{color:Borders Night};
  3026.     --Searchbar-Button-Background:{color:Borders Night};
  3027.     --Searchbar-Button-Text-Color:{color:Accent Night};
  3028.  
  3029.     --Search-Suggestion-Box-Border:{color:Borders Night};
  3030.     --Search-Suggestion-Box-Background:{color:Container Night};
  3031.     --Search-Suggestions-Text-Color:{color:Link Night};
  3032.     --Search-Suggestions-HOVER-Background:{color:Borders Night};
  3033.     --Search-Suggestions-HOVER-Text-Color:{color:Accent Night};
  3034. }
  3035.  
  3036. img {
  3037.     display: block;
  3038.     max-width: 100%;
  3039.     width: auto;
  3040.     height: auto;
  3041.     image-rendering: auto; /* smooth & glossy */
  3042.    -webkit-font-smoothing: antialiased;
  3043.     box-sizing: border-box;
  3044. }
  3045.  
  3046. .is_animated img,
  3047. .tmblr-gif img {
  3048.     image-rendering: pixelated;
  3049.     image-rendering: crisp-edges;
  3050.     image-rendering: -webkit-optimize-contrast;
  3051.     backface-visibility: hidden;
  3052.     transform: translateZ(0);
  3053. }
  3054.  
  3055. .is_animated img,
  3056. .tmblr-gif img {
  3057.     width: auto;
  3058.     max-width: 100%;
  3059. }
  3060.  
  3061. {CustomCSS}
  3062.  
  3063.  
  3064. </style>
  3065.  
  3066.  
  3067. <!-- BLUE POLLS by @glenthemes  -->
  3068.  
  3069. <link
  3070. href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">  
  3071. <style>
  3072.  
  3073. .poll-post {
  3074.     --Poll-Question-Font-Size: 16px;    
  3075.     --Poll-Option-Background-Color: {color:Boxes};
  3076.     --Poll-Option-Corner-Rounding: 0px;
  3077.     --Poll-Option-Border-Size: 1px;
  3078.     --Poll-Option-Border-Color: {color:Borders};
  3079.     --Poll-Option-Padding: 10px;
  3080.     --Poll-Option-Font-Size: {select:Font Size};
  3081.     --Poll-Option-Spacing: 10px;
  3082.     --Poll-Option-Text-Color: {color:Text};
  3083.     --Poll-Option-HOVER-Border-Color: {color:Borders};
  3084.     --Poll-Option-HOVER-Background-Color: {color:Borders};
  3085.     --Poll-Option-HOVER-Text-Color: {color:Accent};
  3086.     --Poll-Option-HOVER-Speed: 0.3;
  3087. }
  3088.  
  3089. body.night .poll-post {
  3090.     --Poll-Option-Background-Color: {color:Boxes Night};
  3091.     --Poll-Option-Border-Color: {color:Borders Night};
  3092.     --Poll-Option-Font-Size: {select:Font Size Night};
  3093.     --Poll-Option-Text-Color: {color:Text Night};
  3094.     --Poll-Option-HOVER-Border-Color: {color:Borders Night};
  3095.     --Poll-Option-HOVER-Background-Color: {color:Borders Night};
  3096.     --Poll-Option-HOVER-Text-Color: {color:Accent Night};
  3097. }
  3098.  
  3099. </style>
  3100.  
  3101. </head>
  3102.  
  3103. <!--- HTML --->
  3104.  
  3105. <body>
  3106.  
  3107. <div class="tumblr-controls-btn-trigger" title="click for controls">
  3108.    <span><div class="diamond"><i data-feather="eye"></i></div></span>
  3109.    
  3110. </div>
  3111.  
  3112. <!--- SEARCH BAR --->
  3113.  
  3114. {block:ifShowSearchbar}
  3115.  
  3116. <link href="https://search-dropdown.gitlab.io/i/2.1/style.css" rel="stylesheet">
  3117. <script src="https://search-dropdown.gitlab.io/i/2.1/init.min.js"></script>
  3118.  
  3119. <style searchbar>
  3120.  
  3121. :root {
  3122.   --Searchbar-Field-Corner-Rounding:0px;
  3123.   --Searchbar-Field-Padding:10px;
  3124.   --Searchbar-Field-Font:inherit;
  3125.   --Searchbar-Field-Font-Size:10px;
  3126.   --Searchbar-Spacing:6px;
  3127.  
  3128.   --Searchbar-Button-Corner-Rounding:0px;
  3129.   --Searchbar-Button-Padding:6px;
  3130.   --Searchbar-Button-Font:inherit;
  3131.   --Searchbar-Button-Font-Size:10.5px;
  3132.  
  3133.   --Search-Suggestion-Box-Top-Gap:5px;
  3134.   --Search-Suggestion-Box-Inner-Margin:10px;
  3135.   --Search-Suggestion-Box-Corner-Rounding:0px;
  3136.   --Search-Suggestion-Items-Corner-Rounding:0px;
  3137.   --Search-Suggestion-Items-Padding:5px;
  3138.  
  3139.   --Search-Suggestions-Font:inherit;
  3140.   --Search-Suggestions-Font-Size:inherit;
  3141.   --Search-Suggestions-Expand-Speed:420ms;
  3142.   --Search-Suggestions-HOVER-Speed:0.3s;
  3143. }
  3144.  
  3145. .searchblock {
  3146.     display: flex;
  3147.     justify-content: center;
  3148.     align-items: center;
  3149.     width: 300px;
  3150.     position: absolute;
  3151.     text-align: center;
  3152.     z-index: 69;
  3153.     bottom: -85px;
  3154. }
  3155.  
  3156. .searchblock svg {
  3157.     width: 18px;
  3158.     height: 18px;
  3159. }
  3160.  
  3161. .search-suggestions {
  3162.   text-transform: uppercase;
  3163.   font-weight: bold;
  3164.   text-align: center !important;
  3165.   z-index: 69;
  3166.   color: var(--Search-Suggestions-Text-Color);
  3167.   background: var(--Search-Suggestion-Box-Background);
  3168.   border: 1px solid var(--Search-Suggestion-Box-Border);
  3169.   visibility: hidden;
  3170. }
  3171.  
  3172. .search-suggestions-block {
  3173.     max-height: 200px;
  3174.     width: 113%;
  3175.     margin-left:-40px;
  3176.     padding:3px;
  3177.     overflow-y: auto;
  3178.     overflow-x: clip;
  3179. }
  3180.  
  3181. .search-suggestions a {
  3182.     width:94%;
  3183. }
  3184.  
  3185. .search-suggestions.enabled {
  3186.   visibility: visible;
  3187. }
  3188.  
  3189. .search-suggestions li:hover {
  3190.   background: var(--Search-Suggestions-HOVER-Background);
  3191.   color: var(--Search-Suggestions-HOVER-Text-Color);
  3192. }
  3193.  
  3194. .search-suggestions svg {
  3195.   height: 13px;
  3196.   width: 13px;
  3197.   margin-bottom: -3px;
  3198. }
  3199.  
  3200. .search-suggestions {
  3201.     visibility: hidden;
  3202. }
  3203.  
  3204. .searchbar-button button {
  3205.     border: 1px solid var(--Searchbar-Button-Border);
  3206.     background: var(--Searchbar-Button-Background);
  3207.     color: var(--Searchbar-Button-Text-Color);
  3208.     transition: all 0.3s;
  3209. }
  3210.  
  3211. .searchbar-button button:hover {
  3212.     background: var(--Searchbar-Field-Background);
  3213.     color: var(--Searchbar-Field-Typing-Color);
  3214. }
  3215.  
  3216. .searchbar-field {
  3217.     font-weight: bold;
  3218.     width: 150px;
  3219.     text-align: center;
  3220. }
  3221.  
  3222. .searchbar-field::placeholder {
  3223.   text-align: center;
  3224. }
  3225.  
  3226. </style>
  3227.  
  3228. {/block:ifShowSearchbar}
  3229.  
  3230. <!--- MAIN --->
  3231.  
  3232.  
  3233. <main>
  3234.  
  3235.  
  3236. <!--- UPDATES --->
  3237.  
  3238. {block:ifShowUpdates}
  3239.  
  3240. <div id="updates">
  3241.        
  3242.     <a href="#">
  3243.         <div class="updatet" title="updates">
  3244.             <i data-feather="bell"></i>
  3245.         </div>
  3246.     </a>
  3247.  
  3248.     <div class="updateu">
  3249.         {text:Updates}
  3250.     </div>
  3251.  
  3252. </div>
  3253.  
  3254. {/block:ifShowUpdates}
  3255.  
  3256.  
  3257. <!--- SIDEBAR --->
  3258.  
  3259. <aside id="sidebar">
  3260.  
  3261.  
  3262. <!--- TRACKING TAG --->
  3263.  
  3264. {block:ifShowTrackingTag}
  3265. <div class="usertag" title="tag me!">
  3266.  
  3267.   <a href="https://www.tumblr.com/search/{text:Tracking Tag}">#{text:Tracking Tag}</a>
  3268.  
  3269.   <div class="usertaginfo">{text:Tracking Tag Info}</div>
  3270.  
  3271. </div>
  3272.  
  3273. {/block:ifShowTrackingTag}
  3274.  
  3275.     <div class="square-deco-container">
  3276.     <div class="square-deco-square-left-top"></div>
  3277.     <div class="square-deco-square-left-bottom"></div>
  3278.     <div class="square-deco-square-right-top"></div>
  3279.     <div class="square-deco-square-right-bottom"></div>
  3280.     <div class="square-deco-tall"></div>
  3281.     <div class="square-deco-wide"></div>
  3282.     <div class="square-deco-inner"></div>
  3283.     <div class="square-deco-content">
  3284.  
  3285.  
  3286. <!--- SIDEBAR IMAGE --->
  3287.  
  3288. <!--- ICON --->
  3289.  
  3290. <div class="sidebar-icon">
  3291.  
  3292. <a href="/" title="refresh"><img src="{PortraitURL-512}"></div></a>
  3293.  
  3294. <!--- IMAGE --->
  3295.  
  3296. <div class="side-img-container">
  3297.  
  3298. {block:ifSidebarImage}
  3299.  
  3300. <a href="/" title="refresh"><img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></div>
  3301. </a>
  3302.  
  3303. {/block:ifSidebarImage}
  3304.  
  3305.  
  3306. <!--- SIDEBAR TITLE --->
  3307.  
  3308. {block:ifTitle}
  3309.  
  3310. <div class="title"><a href="/" title="refresh">{text:Title}</a></div>
  3311.  
  3312. {/block:ifTitle}
  3313.  
  3314. <!--- SIDEBAR DESCRIPTION --->
  3315.  
  3316. {block:ifDescription}
  3317.  
  3318. <div id="description">{text:Description}</div>
  3319.  
  3320. {/block:ifDescription}
  3321.  
  3322. </div>
  3323. </div>
  3324.  
  3325.  
  3326. <!--- LEFT SIDEBAR --->
  3327.  
  3328. <nav class="left-nav">
  3329.  
  3330.  
  3331. <!--- ABOUT ME --->
  3332.  
  3333. {block:ifShowAboutMe}
  3334.  
  3335. <div class="profile">
  3336.  
  3337. <a href="#"><div class="profilet" title="about me">
  3338.    
  3339. <i data-feather="{select:About Icon}"></i></div></a>
  3340.        
  3341. <div class="profileu">
  3342.  
  3343. {block:ifName}
  3344.     <i data-feather="smile"></i>{text:Name}
  3345. {/block:ifName}
  3346.  
  3347. {block:ifPronouns}
  3348.     <br><i data-feather="user-check"></i>{text:Pronouns}
  3349. {/block:ifPronouns}
  3350.  
  3351. {block:ifAge}
  3352.     <br><i data-feather="user"></i>{text:Age}
  3353. {/block:ifAge}
  3354.    
  3355. {block:ifBirthday}
  3356.     <br><i data-feather="gift"></i>{text:Birthday}
  3357. {/block:ifBirthday}
  3358.  
  3359. {block:ifZodiacSign}
  3360.    <br><i data-feather="sun"></i>{text:Zodiac Sign}
  3361. {/block:ifZodiacSign}
  3362.  
  3363. {block:ifRegion}
  3364.     <br><i data-feather="map-pin"></i>{text:Region}
  3365. {/block:ifRegion}
  3366.  
  3367. {block:ifSexuality}
  3368.     <br><i data-feather="heart"></i>{text:Sexuality}
  3369. {/block:ifSexuality}
  3370.    
  3371. </div>
  3372. </div>
  3373.  
  3374. {/block:ifShowAboutMe}
  3375.  
  3376.  
  3377. <!--- SOCIALS --->
  3378.  
  3379. {block:ifShowSocials}
  3380.  
  3381. <div class="socials">
  3382.  
  3383. <a href="#"><div class="socialt" title="socials">
  3384.    
  3385. <i data-feather="at-sign"></i></div></a>
  3386.        
  3387. <div class="socialu">
  3388.  
  3389. {block:ifTwitterUsername}
  3390.     <a href="https://x.com/{text:Twitter Username}" title="twitter"><i data-feather="twitter"></i></a>
  3391. {/block:ifTwitterUsername}
  3392.  
  3393. {block:ifInstagramUsername}
  3394.     <a href="https://instagram.com/{text:Instagram Username}" title="instagram"><i data-feather="instagram"></i></a>
  3395. {/block:ifInstagramUsername}
  3396.    
  3397. {block:ifYoutubeUsername}
  3398.     <a href="https://www.youtube.com/channel/{text:Youtube Username}" title="youtube"><i data-feather="youtube"></i></a>
  3399. {/block:ifYoutubeUsername}
  3400.  
  3401. {block:ifSpotifyUsername}
  3402.     <a href="https://open.spotify.com/user/{text:Spotify Username}" title="spotify"><i data-feather="music"></i></a>
  3403. {/block:ifSpotifyUsername}
  3404.    
  3405. {block:ifDiscordUsername}
  3406.     <a href="https://discord.com/users/{text:Discord Username}" title="discord"><i data-feather="message-circle"></i></a>
  3407. {/block:ifDiscordUsername}
  3408.  
  3409. {block:ifAO3Username}
  3410.     <a href="https://archiveofourown.org/users/{text:AO3 Username}" title="ao3"><i data-feather="bookmark"></i></a>
  3411. {/block:ifAO3Username}
  3412.  
  3413. {block:ifLetterboxdUsername}
  3414.     <a href="https://letterboxd.com/{text:Letterboxd Username}" title="letterboxd"><i data-feather="film"></i></a>
  3415. {/block:ifLetterboxdUsername}
  3416.  
  3417. {block:ifPinterestUsername}
  3418.     <a href="https://pinterest.com/{text:Pinterest Username}" title="pinterest"><i data-feather="pinterest"></i></a>
  3419. {/block:ifPinterestUsername}    
  3420.     </div>
  3421.    
  3422. </div>
  3423.  
  3424. {/block:ifShowSocials}
  3425.  
  3426.  
  3427. <!--- SIDEBLOGS --->
  3428.  
  3429. {block:ifShowSideblogs}
  3430.  
  3431. <div class="sideblog">
  3432.        
  3433.             <a href="#">
  3434.             <div class="sideblogt" title="sideblogs">
  3435.             <i data-feather="{select:Sideblogs Icon}"></i>
  3436.             </div></a>
  3437.  
  3438. <div class="sideblogu">
  3439.  
  3440.     {block:ifSideblog1}
  3441.     <a href="https://{text:Sideblog 1}.tumblr.com" title="{text:Sideblog 1 Description}">{text:Sideblog 1}</a>
  3442.     {/block:ifSideblog1}
  3443.    
  3444.     {block:ifSideblog2}
  3445.     <a href="https://{text:Sideblog 2}.tumblr.com" title="{text:Sideblog 2 Description}">{text:Sideblog 2}</a>
  3446.     {/block:ifSideblog2}
  3447.    
  3448.     {block:ifSideblog3}
  3449.     <a href="https://{text:Sideblog 3}.tumblr.com" title="{text:Sideblog 3 Description}">{text:Sideblog 3}</a>
  3450.     {/block:ifSideblog3}
  3451.    
  3452.     {block:ifSideblog4}
  3453.     <a href="https://{text:Sideblog 4}.tumblr.com" title="{text:Sideblog 4 Description}">{text:Sideblog 4}</a>
  3454.     {/block:ifSideblog4}
  3455.    
  3456.     {block:ifSideblog5}
  3457.     <a href="https://{text:Sideblog 5}.tumblr.com" title="{text:Sideblog 5 Description}">{text:Sideblog 5}</a>
  3458.     {/block:ifSideblog5}
  3459. </div>
  3460.  
  3461. </div>
  3462.  
  3463. {/block:ifShowsideblogs}
  3464.  
  3465.  
  3466. <!--- MORE LINKS --->
  3467.  
  3468. {block:ifMoreLinks}
  3469.  
  3470. <div class="more">
  3471.  
  3472. <a href="#"><div class="moret" title="links">
  3473.    
  3474. <i data-feather="plus"></i></div></a>
  3475.        
  3476. <div class="moreu">
  3477.    
  3478.     {block:ifMoreLinks1URL}
  3479.     <a href="https://{text:More Links 1 URL}" title="visit">{text:More Links 1 Title}</a>
  3480.     {/block:ifMoreLinks1URL}
  3481.    
  3482.     {block:ifMoreLinks2URL}
  3483.     <a href="https://{text:More Links 2 URL}" title="visit">{text:More Links 2 Title}</a>
  3484.     {/block:ifMoreLinks2URL}
  3485.    
  3486.     {block:ifMoreLinks3URL}
  3487.     <a href="https://{text:More Links 3 URL}" title="visit">{text:More Links 3 Title}</a>
  3488.     {/block:ifMoreLinks3URL}
  3489.    
  3490.     {block:ifMoreLinks4URL}
  3491.     <a href="https://{text:More Links 4 URL}" title="visit">{text:More Links 4 Title}</a>
  3492.     {/block:ifMoreLinks4URL}
  3493.    
  3494.     {block:ifMoreLinks5URL}
  3495.     <a href="https://{text:More Links 5 URL}" title="visit">{text:More Links 5 Title}</a>
  3496.     {/block:ifMoreLinks5URL}
  3497.    
  3498. </div>
  3499. </div>
  3500.  
  3501. {/block:ifMoreLinks}
  3502.  
  3503. </nav>
  3504.  
  3505.  
  3506. <!--- BOTTOM NAVIGATION --->
  3507.  
  3508. <nav class="icon-nav">
  3509.  
  3510. {block:ifLink1URL}<a href="{text:Link 1 URL}" title="{text:Link 1 Title}"><div class="diamond"><i data-feather="{select:Link 1 Icon}"></i></div></a>{/block:ifLink1URL}
  3511.  
  3512. {block:AskEnabled}
  3513. <a href="/ask" title="Ask"><div class="diamond"><i data-feather="{select:Ask Link Icon}"></i></div></a>
  3514. {/block:AskEnabled}
  3515.        
  3516. {block:ifLink2URL}<a href="{text:Link 2 URL}" title="{text:Link 2 Title}"><div class="diamond"><i data-feather="{select:Link 2 Icon}"></i></div></a>{/block:ifLink2URL}
  3517.        
  3518. {block:ifLink3URL}<a href="{text:Link 3 URL}" title="{text:Link 3 Title}"><div class="diamond"><i data-feather="{select:Link 3 Icon}"></i></div></a>{/block:ifLink3URL}
  3519.        
  3520. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  3521.        
  3522. </nav>
  3523.  
  3524.  
  3525. {block:ifShowSearchbar}
  3526.  
  3527. <!--- SEARCHBAR --->
  3528.  
  3529. <form class="searchblock" action="/search" method="get" autocomplete="off">
  3530.  
  3531. <input class="searchbar-field" type="text" name="q" value="{SearchQuery}" placeholder="SEARCH{block:ifTrendingTag1} & TRENDING TAGS{/block:ifTrendingTag1}" autocomplete="off">
  3532.    
  3533. <div class="searchbar-button" title="search">
  3534.     <button type="submit"><i data-feather="search"></i></button>
  3535.     </div>
  3536.  
  3537.     <div class="search-suggestions-wrapper" fixed>
  3538.    
  3539. {block:ifTrendingTag1}
  3540.    
  3541.         <div class="search-suggestions">
  3542.        
  3543.             <ul class="search-suggestions enabled">
  3544.            
  3545.             <div class="search-suggestions-block">
  3546.            
  3547.             <a href="/tagged/{text:Trending Tag 1}"><i data-feather="tag"></i> {text:Trending Tag 1}</a>
  3548.  
  3549.             {block:ifTrendingTag2}
  3550.             <a href="/tagged/{text:Trending Tag 2}"><i data-feather="tag"></i> {text:Trending Tag 2}</a>
  3551.             {/block:ifTrendingTag2}
  3552.            
  3553.             {block:ifTrendingTag3}
  3554.             <a href="/tagged/{text:Trending Tag 3}"><i data-feather="tag"></i> {text:Trending Tag 3}</a>
  3555.             {/block:ifTrendingTag3}
  3556.            
  3557.             {block:ifTrendingTag4}
  3558.             <a href="/tagged/{text:Trending Tag 4}"><i data-feather="tag"></i> {text:Trending Tag 4}</a>
  3559.             {/block:ifTrendingTag4}
  3560.            
  3561.             {block:ifTrendingTag5}
  3562.             <a href="/tagged/{text:Trending Tag 5}"><i data-feather="tag"></i> {text:Trending Tag 5}</a>
  3563.             {/block:ifTrendingTag5}
  3564.            
  3565.             </div>
  3566.            
  3567.         </div>
  3568.     </div>
  3569.    
  3570.  </ul>
  3571.  
  3572. {/block:ifTrendingTag1}
  3573.  
  3574. </form>
  3575.  
  3576. {/block:ifShowSearchbar}
  3577.  
  3578. </aside>
  3579.  
  3580. </div>
  3581.  
  3582.  
  3583. <!-- SECTION -->
  3584.  
  3585. <section>
  3586.  
  3587.  
  3588. <!--- FEATURED POSTS --->
  3589.  
  3590. {block:ifShowFeaturedPosts}
  3591.  
  3592. <div id="wrapper_featured_posts">
  3593.    
  3594. <article class="square-deco-container">
  3595.  
  3596.   <div class="square-deco-square-left-top"></div>
  3597.   <div class="square-deco-square-left-bottom"></div>
  3598.   <div class="square-deco-square-right-top"></div>
  3599.   <div class="square-deco-square-right-bottom"></div>
  3600.   <div class="square-deco-tall"></div>
  3601.   <div class="square-deco-wide"></div>
  3602.   <div class="square-deco-inner"></div>
  3603.  
  3604. <div class="square-deco-content">
  3605.  
  3606. {block:ifFeaturedPostsTitle}
  3607.  
  3608.       <div class="featuredtitlecontainer">
  3609.      
  3610.      
  3611.         <a href="https://{Name}.tumblr.com/tagged/{text:Featured Posts Tag}" title="see all">
  3612.           <div class="featuredtitle">{text:Featured Posts Title}</div>
  3613.         </a>
  3614.        
  3615.       </div>
  3616.  
  3617. {/block:ifFeaturedPostsTitle}
  3618.  
  3619.       <div class="inner_featured_posts"><!-- JS injected posts here --></div>
  3620.  
  3621.     </div>
  3622.  
  3623.   </div>
  3624.  
  3625. </article>
  3626.  
  3627. {/block:ifShowFeaturedPosts}
  3628.  
  3629.  
  3630. <!--- TAG PAGE --->
  3631.  
  3632. {block:TagPage}
  3633.  
  3634. <article class="square-deco-container">
  3635.  
  3636.   <div class="square-deco-square-left-top"></div>
  3637.   <div class="square-deco-square-left-bottom"></div>
  3638.   <div class="square-deco-square-right-top"></div>
  3639.   <div class="square-deco-square-right-bottom"></div>
  3640.   <div class="square-deco-tall"></div>
  3641.   <div class="square-deco-wide"></div>
  3642.   <div class="square-deco-inner"></div>
  3643.  
  3644. <div class="square-deco-content">
  3645.  
  3646.     <h4>#{Tag}</h4>
  3647.    
  3648. </div>
  3649.  
  3650. </article>
  3651.  
  3652. {/block:TagPage}
  3653.  
  3654.  
  3655. <!--- POSTS --->
  3656.  
  3657. {block:Posts}
  3658.  
  3659. <article class="posts square-deco-container" id="{PostID}">
  3660.  
  3661.   <div class="square-deco-square-left-top"></div>
  3662.   <div class="square-deco-square-left-bottom"></div>
  3663.   <div class="square-deco-square-right-top"></div>
  3664.   <div class="square-deco-square-right-bottom"></div>
  3665.   <div class="square-deco-tall"></div>
  3666.   <div class="square-deco-wide"></div>
  3667.   <div class="square-deco-inner"></div>
  3668.  
  3669.  
  3670. <!--- PINNED POST --->
  3671.  
  3672. {block:PinnedPostLabel}
  3673.  
  3674.     <a href="{Permalink}" class="pinned-post" title="pinned post">
  3675.    
  3676.     <div class="diamond"><i data-feather="star"></i></div></a>
  3677.    
  3678. {/block:PinnedPostLabel}
  3679.  
  3680. <div class="square-deco-content">
  3681.  
  3682.  
  3683. <!--- TOP INFO --->
  3684.  
  3685. <div class="topinfo">
  3686.  
  3687.  
  3688. <!--- NOTES --->
  3689.  
  3690.     {block:NoteCount}
  3691.    
  3692.         <a class="topnotes" title="open post" href="{Permalink}" target="_blank">{NoteCountWithLabel}</a>
  3693.        
  3694.     {/block:NoteCount}
  3695.  
  3696.  
  3697. <!--- ICONS --->
  3698.  
  3699. <div class="permalink-icon-container">
  3700.  
  3701.  
  3702. <!--- PERMALINK PAGE --->
  3703.  
  3704. {block:PermalinkPage}
  3705.        
  3706.     {block:RebloggedFrom}
  3707.          
  3708.         <a href="{ReblogParentURL}" title="via"><img src="{ReblogParentPortraitURL-64}" class="permalink-icon"></a>
  3709.            
  3710.             <a href="{ReblogRootURL}" title="originally"><img src="{ReblogRootPortraitURL-64}" class="permalink-icon"></a>
  3711.            
  3712.     {/block:RebloggedFrom}
  3713.          
  3714.     {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  3715.          
  3716. {/block:PermalinkPage}
  3717.    
  3718. </div>
  3719. </div>
  3720.  
  3721.  
  3722. <!--- POST CONTENT --->
  3723.  
  3724. <div class="post-content">
  3725.  
  3726. {block:Text}
  3727.    
  3728. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  3729.        
  3730. {block:NotReblog}<div class="caption text-caption">{Body}</div>{/block:NotReblog}
  3731.         {block:RebloggedFrom}
  3732.           {block:Reblogs}
  3733.             <div class="caption text-caption">
  3734.             <div class="userblock">
  3735.             <a href="https://{Username}.tumblr.com"><img src="{PortraitURL-64}" class="user-icon" title="from {Username}"></a>
  3736.               <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}" title="visit">
  3737.                 <a href="{Permalink}">{Username}</a>
  3738.               </div></div>
  3739.               {Body}
  3740.             </div>
  3741.           {/block:Reblogs}
  3742.         {/block:RebloggedFrom}
  3743.       {/block:Text}
  3744.  
  3745. {block:Photo}
  3746.   <div class="photo">
  3747.     {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}
  3748.   </div>
  3749.   {block:Caption}
  3750.     <div class="caption">{Caption}</div>
  3751.   {/block:Caption}
  3752. {/block:Photo}
  3753.  
  3754.       {block:Photoset}
  3755.         <div class="photo">{Photoset-700}</div>
  3756.         {block:Caption}
  3757.           <div class="caption">{Caption}</div>
  3758.         {/block:Caption}
  3759.       {/block:Photoset}
  3760.  
  3761.       {block:Video}
  3762.         <div class="video">{Video-500}</div>
  3763.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  3764.       {/block:Video}
  3765.  
  3766.       {block:Quote}
  3767.         <div class="quote">{Quote}</div>
  3768.         {block:Source}<div class="source">{Source}</div>{/block:Source}
  3769.       {/block:Quote}
  3770.  
  3771.       {block:Answer}
  3772.         <div class="ask-wrap">
  3773.           <img src="{AskerPortraitURL-64}" class="ask-icon">
  3774.           <div class="asking">{Asker} asked</div>
  3775.           <div class="question">{Question}</div>
  3776.         </div>
  3777.         {block:Answerer}
  3778.           <div class="caption">
  3779.             <img src="{AnswererPortraitURL-64}" class="user-icon">
  3780.             <div class="username-answer {block:IsDeactivated}deactive{/block:IsDeactivated}">
  3781.               <a href="{Permalink}">{Answerer}</a>
  3782.             </div>
  3783.             {Answer}
  3784.           </div>
  3785.         {/block:Answerer}
  3786.         {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  3787.       {/block:Answer}
  3788.  
  3789.       {block:Link}
  3790.         <a href="{URL}" class="link-wrap">
  3791.           {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  3792.           <div class="link">
  3793.             <div class="title">{Name}</div>
  3794.             {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  3795.             {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  3796.           </div>
  3797.         </a>
  3798.         {block:Description}<div class="caption">{Description}</div>{/block:Description}
  3799.       {/block:Link}
  3800.  
  3801.       {block:Chat}
  3802.         {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  3803.         <ul class="chat">
  3804.           {block:Lines}
  3805.             <li>
  3806.               {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  3807.               {Line}
  3808.             </li>
  3809.           {/block:Lines}
  3810.         </ul>
  3811.       {/block:Chat}
  3812.  
  3813.       {block:Audio}
  3814.         <div class="audiopost">
  3815.           <div class="audiobox">
  3816.             <div class="button">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div>
  3817.           </div>
  3818.           {block:AlbumArt}<img src="{AlbumArtURL}" class="album-art">{/block:AlbumArt}
  3819.           <div class="audioinfo">
  3820.             {block:TrackName}<div class="track">{TrackName}</div>{/block:TrackName}
  3821.             {block:Artist}<div>{Artist}</div>{/block:Artist}
  3822.             {block:Album}<div>{Album}</div>{/block:Album}
  3823.           </div>
  3824.         </div>
  3825.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  3826.       {/block:Audio}
  3827.  
  3828. <div class="post-footer">
  3829.         <div class="tags">
  3830.             {block:HasTags}
  3831.                 {block:Tags}
  3832.                     <a href="{TagURL}">#{Tag}</a>
  3833.                 {/block:Tags}
  3834.             {/block:HasTags}
  3835.         </div>
  3836.  
  3837.     </div>
  3838.  
  3839.       </div>
  3840.     </div>
  3841.  
  3842. <!--- POST BUTTONS --->
  3843.  
  3844.  
  3845. {block:PermalinkPage}
  3846.   <div class="post-buttons">
  3847.      <a href="/day/{Year}/{MonthNumberWithZero}/{DayofMonthWithZero}" title="{DayOfMonth} {Month}, {Year}">
  3848.       <div class="postdiamond"><i data-feather="calendar"></i></div>
  3849.     </a>
  3850.  
  3851.     <a href="{ReblogURL}" title="reblog" target="_blank">
  3852.       <div class="postdiamond"><i data-feather="repeat"></i></div>
  3853.     </a>
  3854.  
  3855.     <a class="likeb" href="#" title="like">
  3856.       {LikeButton}
  3857.       <span class="actual-button">
  3858.         <div class="postdiamond"><i data-feather="heart"></i></div>
  3859.       </span>
  3860.     </a>
  3861.  
  3862.     <a class="tag-button" title="show tags">
  3863.       <div class="postdiamond"><i data-feather="tag"></i></div>
  3864.     </a>
  3865.   </div>
  3866. {/block:PermalinkPage}
  3867.  
  3868. {block:IndexPage}
  3869.   <div class="post-buttons">
  3870.      <a href="/day/{Year}/{MonthNumberWithZero}/{DayofMonthWithZero}" title="{TimeAgo}">
  3871.       <div class="postdiamond"><i data-feather="calendar"></i></div>
  3872.     </a>
  3873.  
  3874.     <a href="{ReblogURL}" title="reblog" target="_blank">
  3875.       <div class="postdiamond"><i data-feather="repeat"></i></div>
  3876.     </a>
  3877.  
  3878.     <a class="likeb" href="#" title="like">
  3879.       {LikeButton}
  3880.       <span class="actual-button">
  3881.         <div class="postdiamond"><i data-feather="heart"></i></div>
  3882.       </span>
  3883.     </a>
  3884.  
  3885.     <a class="tag-button" title="show tags">
  3886.       <div class="postdiamond"><i data-feather="tag"></i></div>
  3887.     </a>
  3888.   </div>
  3889. {/block:IndexPage}
  3890.  
  3891. </article>
  3892.  
  3893.  
  3894. <!--- PERMALINK PAGE --->
  3895.  
  3896. {block:PermalinkPage}
  3897.   {block:PostNotes}
  3898.  
  3899. <article class="square-deco-container">
  3900.     <div class="square-deco-square-left-top"></div>
  3901.     <div class="square-deco-square-left-bottom"></div>
  3902.     <div class="square-deco-square-right-top"></div>
  3903.     <div class="square-deco-square-right-bottom"></div>
  3904.     <div class="square-deco-tall"></div>
  3905.     <div class="square-deco-wide"></div>
  3906.     <div class="square-deco-inner"></div>
  3907.  
  3908.     <div class="square-deco-content">
  3909.  
  3910.     <div class="notes">
  3911.       {PostNotes-64}
  3912.     </div>
  3913.    
  3914.     </div>
  3915.     </div>
  3916.    
  3917.   {/block:PostNotes}
  3918. {/block:PermalinkPage}
  3919.  
  3920. {/block:Posts}
  3921.  
  3922. </section>
  3923.  
  3924.  
  3925. <!--- PAGINATION --->
  3926.  
  3927. {block:Pagination}
  3928.  
  3929. <article id="page-navigation">
  3930.  
  3931.     {block:PreviousPage}<a href="{PreviousPage}" title="previous page"><div class="diamond"><i data-feather="arrow-left"></i></div></a>{/block:PreviousPage}
  3932.    
  3933.         {block:JumpPagination length="5"}
  3934.        
  3935.     {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  3936.            
  3937.     {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  3938.        
  3939.     {block:NextPage}<a href="{NextPage}" title="next page"><div class="diamond"><i data-feather="arrow-right"></i></div></a>{/block:NextPage}
  3940.    
  3941. </article>
  3942.  
  3943. {/block:Pagination}
  3944.  
  3945.  
  3946. <!--- END OF MAIN CONTAINER --->
  3947.  
  3948.  
  3949. </main>
  3950.  
  3951.  
  3952. <!--- SCROLL TO TOP --->
  3953.  
  3954. <a href="#" id="scrolltotop" class="scrolltotop" title="scroll to top"><i data-feather="arrow-up"></i></a>
  3955.  
  3956.  
  3957. <!--- DAYNIGHT --->
  3958.  
  3959. {Block:ifNightMode}
  3960. <div class="daynight" title="change mode"><i data-feather="moon"></i></div>
  3961. {/block:ifNightMode}
  3962.  
  3963.  
  3964. <!--- CREDIT | DO NOT REMOVE --->
  3965.  
  3966. <a href="https://userraffa.tumblr.com" title="by userraffa" id="credit"><i data-feather="heart"></i></a>
  3967.  
  3968.  
  3969. <!--- SCRIPTS --->
  3970.  
  3971. <!--- FEATHER ICONS --->
  3972.  
  3973. <script>
  3974.      
  3975.       feather.replace()
  3976.  
  3977. </script>
  3978.  
  3979. <!---  SHOW/HIDE CONTROLS (@THEMESBYTOMMY) --->
  3980.  
  3981. <script type="text/javascript">
  3982. $(".tumblr-controls-btn-trigger").click(function(){
  3983.   $(".tumblr-controls-btn-trigger").toggleClass("tumblr-controls-btn-trigger-active");
  3984.   $(".tmblr-iframe--loaded").toggleClass("tmblr-iframe--loaded-active");
  3985. });
  3986. </script>
  3987.  
  3988. <!--- HIDDEN TAGS (@SEYCHE) --->
  3989.  
  3990. <script>
  3991. $(document).ready(function(){
  3992.     $('.tags').hide();
  3993.     $('.tag-button').click(function() {
  3994.         $(this).closest('article').find('.tags').slideToggle(500);
  3995.         $(this).toggleClass('tag-clicked');
  3996.         return false;
  3997.     });
  3998. });
  3999. </script>
  4000.  
  4001. <!--- TOOLTIPS (@ATOMIKS) --->
  4002.  
  4003. <script src="https://unpkg.com/popper.js@1"></script>
  4004. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  4005.  
  4006. <script>
  4007.  
  4008.     tippy('[title]',
  4009.     {
  4010.         theme: 'custom',
  4011.         animation: 'fade',
  4012.         arrow: false,
  4013.         followCursor: true,
  4014.         delay: 100,
  4015.         placement: 'bottom',
  4016.         zIndex: 999893275999,
  4017.         maxWidth: 300,
  4018.  
  4019.         content(reference) {
  4020.             const title = reference.getAttribute('title');
  4021.             reference.removeAttribute('title');
  4022.             return title;
  4023.         },
  4024.     });
  4025.  
  4026. </script>
  4027.  
  4028. <script>
  4029.     tippy('[data-tippy-content]', {
  4030.         theme: 'custom',
  4031.         animation: 'fade',
  4032.         arrow: false,
  4033.         followCursor: true,
  4034.         delay: 100,
  4035.         placement: 'bottom',
  4036.         zIndex: 999893275999,
  4037.         maxWidth: 300,
  4038.     });
  4039. </script>
  4040.  
  4041. <!--- UPDATES TAB (@MISTLETOE) --->
  4042.  
  4043. <script type="text/javascript">$(document).ready(function () {
  4044.     $('.updateu').hide();
  4045.     $('.updatet').click(function () {
  4046.         // .parent() selects the A tag, .next() selects the P tag
  4047.         $(this).parent().next().slideToggle(400);
  4048.     });
  4049.     $('.text').slideUp(400);
  4050. });</script>
  4051.  
  4052. <script type="text/javascript">$(document).ready(function () {
  4053.     $('.socialu').hide();
  4054.     $('.socialt').click(function () {
  4055.         // .parent() selects the A tag, .next() selects the P tag
  4056.         $(this).parent().next().slideToggle(400);
  4057.     });
  4058.     $('.text').slideUp(400);
  4059. });</script>
  4060.  
  4061. <script type="text/javascript">$(document).ready(function () {
  4062.     $('.sideblogu').hide();
  4063.     $('.sideblogt').click(function () {
  4064.         // .parent() selects the A tag, .next() selects the P tag
  4065.         $(this).parent().next().slideToggle(400);
  4066.     });
  4067.     $('.text').slideUp(400);
  4068. });</script>
  4069.  
  4070. <script type="text/javascript">$(document).ready(function () {
  4071.     $('.profileu').hide();
  4072.     $('.profilet').click(function () {
  4073.         // .parent() selects the A tag, .next() selects the P tag
  4074.         $(this).parent().next().slideToggle(400);
  4075.     });
  4076.     $('.text').slideUp(400);
  4077. });</script>
  4078.  
  4079. <script type="text/javascript">$(document).ready(function () {
  4080.     $('.moreu').hide();
  4081.     $('.moret').click(function () {
  4082.         // .parent() selects the A tag, .next() selects the P tag
  4083.         $(this).parent().next().slideToggle(400);
  4084.     });
  4085.     $('.text').slideUp(400);
  4086. });</script>
  4087.  
  4088. <!--- FEATURED POSTS (@FUKUO) --->
  4089.  
  4090. <script>
  4091. $(document).ready(function () {
  4092.   var readData, insert;
  4093.   var url = "https://{Name}.tumblr.com/api/read/json?&tagged={text:Featured Posts Tag}";
  4094.  
  4095.   $.getScript(url, function () {
  4096.     readData = tumblr_api_read;
  4097.  
  4098.     for (var i = 0; i <= 2; i++) {
  4099.      var posts = readData.posts[i];
  4100.      var link = posts["url"];
  4101.      var img = posts["photo-url-1280"];
  4102.      var captionPhotos = posts["photo-caption"];
  4103.      var titleText = posts["regular-title"];
  4104.      var captionText = posts["regular-body"];
  4105.      var postDate = new Date(posts["date"]);
  4106.  
  4107.      var formattedDate = postDate.toLocaleDateString("en-UK", {
  4108.        year: "numeric",
  4109.        month: "long",
  4110.        day: "numeric"
  4111.      });
  4112.  
  4113.      if (img === undefined) {
  4114.        insert = '<div class="grid_featured">';
  4115.         insert += '<h3><a href="' + link + '">' + titleText + '</a></h3>';
  4116.         insert += '<div class="body_caption">' + captionText + '</div>';
  4117.         insert += '<a class="btnMore" href="' + link + '" data-tippy-content="' + formattedDate + '">OPEN</a>';
  4118.         insert += '</div>';
  4119.       } else {
  4120.         insert = '<div class="grid_featured">';
  4121.         insert += '<img src="' + img + '">';
  4122.         insert += '<div class="body_caption">' + captionPhotos + '</div>';
  4123.         insert += '<a class="btnMore" href="' + link + '" data-tippy-content="' + formattedDate + '">OPEN</a>';
  4124.         insert += '</div>';
  4125.       }
  4126.  
  4127.       $('.inner_featured_posts').append(insert);
  4128.     }
  4129.  
  4130.     tippy('.btnMore', {
  4131.       theme: 'custom',
  4132.       animation: 'fade',
  4133.       arrow: false,
  4134.       followCursor: true,
  4135.       delay: 100,
  4136.       placement: 'bottom',
  4137.       zIndex: 999893275999,
  4138.       maxWidth: 300,
  4139.     });
  4140.   });
  4141. });
  4142. </script>
  4143.  
  4144. <!--- DAY/NIGHT MODE (@EGG.DESIGN) --->
  4145.  
  4146. <script>
  4147.  
  4148. $(document).ready(function(){
  4149.       $('.daynight').click(function(){
  4150.          $('body').toggleClass('night');
  4151.          $('.daynight span').toggleClass('sun');
  4152.       });
  4153.    });
  4154.    
  4155. </script>
  4156.  
  4157. <script>
  4158.    
  4159. $(document).ready(function() {
  4160.   $(".scrolltotop").click(function(e) {
  4161.     e.preventDefault();
  4162.     $("html, body").animate({ scrollTop: 0 }, "slow");
  4163.     return false;
  4164.   });
  4165. });
  4166.  
  4167. </script>
  4168.  
  4169. </body>
  4170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!