silbrigthemes

Feuer und Flamme (Theme 6 Revamp)

Apr 25th, 2020 (edited)
595
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 115.47 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. FEUER UND FLAMME
  7. Theme 6 – Revamp, by silbrigthemes
  8.  
  9.  
  10. "Feuer und Flamme sein" (ger., lit.: being fire and flame):
  11. a figure of speech used to express being passionate about something
  12.  
  13. One column sidebar theme, with gradients.
  14.  
  15. RULES:
  16.  
  17. 1) Do not claim as your own.
  18. 2) Do not steal (parts of) the code.
  19. 3) Do not edit beyond recognition.
  20. 4) Do not use as a base code.
  21. 5) Do not delete or alter the credit.
  22. 6) Please like / reblog if you’re using this theme.
  23.  
  24. If you have any questions or need help, feel free to contact me via
  25. »» silbrigthemes.tumblr.com/ask
  26. »» silbrigsupport.tumblr.com
  27.  
  28. Useful annotations have been made; a customization guide is linked in the blog post.
  29.  
  30. Shine bright for your passions, but don't burn yourself out!
  31.  
  32. Love, Julia
  33.  
  34. ----------
  35.  
  36. Note:
  37.  
  38. This work is protected by a creative commons
  39. Attribution-NonCommercial-NoDerivatives 4.0 International
  40. (CC BY-NC-ND 4.0)
  41. license.
  42.  
  43. -->
  44.  
  45. <head>
  46.  
  47. <meta charset="utf-16">
  48. <title>{Title} {block:TagPage}| {Tag}{/block:TagPage} {block:SearchPage}| {SearchQuery}{/block:SearchPage}</title>
  49. {block:Description}
  50. <meta name="description" content="{MetaDescription}" />
  51. {/block:Description}
  52. <link rel="shortcut icon" href="{Favicon}"/>
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  54. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  55.  
  56. <!-- Necessary for the theme to be responsive. -->
  57. <meta name="viewport" content="width=device-width, initial-scale=1">
  58.  
  59. <!-- Icon font, by suiomi. -->
  60. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  61.  
  62. <!-- Necessary for the scripts to work. -->
  63. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  64.  
  65. <!-- Video Resizing Scripts by @shythemes -->
  66. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  67.  
  68. <!-- Changes the toolbar color on mobile. -->
  69. <meta name="theme-color" content="{color:Accent 2}"/>
  70.  
  71. <!-- Responsive videos, by @nouvae. -->
  72. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  73.  
  74. <!-- CSS Photosets, by annasthms and espoirthemes -->
  75. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  76. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  77. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  78. <script>initPhotosets();</script>
  79.  
  80. <!-- Change Audio iframe color script, by @shudesigns. -->
  81. <script>
  82. $(document).ready(function() {
  83. $('iframe.tumblr_audio_player').load( function() {
  84. // Audio Fallback Background
  85. $('iframe.tumblr_audio_player').contents().find("head")
  86. .append($("<style type='text/css'> .audio-player{background:{color:Accent 2} !important} </style>"));
  87. // Audio Gradient Background
  88. {block:IfGradients}
  89. $('iframe.tumblr_audio_player').contents().find("head")
  90. .append($("<style type='text/css'> .audio-player{background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3}) !important} </style>"));
  91. {/block:IfGradients}
  92. // Audio Track Color
  93. $('iframe.tumblr_audio_player').contents().find("head")
  94. .append($("<style type='text/css'> .track-name{color:{color:Tooltip Text} !important} </style>"));
  95. // Audio Artist Color
  96. $('iframe.tumblr_audio_player').contents().find("head")
  97. .append($("<style type='text/css'> .track-artist{color:{color:Tooltip Text} !important} </style>"));
  98. // Audio Play Button Color
  99. $('iframe.tumblr_audio_player').contents().find("head")
  100. .append($("<style type='text/css'> .play-pause{color:{color:Tooltip Text} !important} </style>"));
  101. });
  102. });
  103. </script>
  104.  
  105. <!-- GRAPHIC TITLE FONTS -->
  106. <!-- Bungee Shade -->
  107. <link href="https://fonts.googleapis.com/css?family=Bungee+Shade&display=swap&subset=latin-ext,vietnamese" rel="stylesheet">
  108. <!-- Bungee Inline -->
  109. <link href="https://fonts.googleapis.com/css?family=Bungee+Inline&display=swap&subset=latin-ext,vietnamese" rel="stylesheet">
  110. <!-- Bungee -->
  111. <link href="https://fonts.googleapis.com/css?family=Bungee&display=swap&subset=latin-ext,vietnamese" rel="stylesheet">
  112.  
  113. <!-- TITLE FONTS -->
  114. <!-- Merriweather -->
  115. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  116. <!-- Playfair Display -->
  117. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap&subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  118. <!-- Roboto Slab -->
  119. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  120.  
  121. <!-- BODY FONTS -->
  122. <!-- Open Sans -->
  123. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  124. <!-- Roboto -->
  125. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  126. <!-- Rubik -->
  127. <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700&display=swap&subset=cyrillic,hebrew,latin-ext" rel="stylesheet">
  128. <!-- Source Sans Pro -->
  129. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  130. <!-- Ubuntu -->
  131. <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext" rel="stylesheet">
  132.  
  133. <!-- CODE FONT -->
  134. <!-- Roboto Mono -->
  135. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  136. <!-- Source Code Pro -->
  137. <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,latin-ext,vietnamese" rel="stylesheet">
  138. <!-- Ubuntu Mono -->
  139. <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext" rel="stylesheet">
  140.  
  141. <!-- TEXT FIELDS -->
  142. <!-- Photos -->
  143. <meta name="text:Photoset Gap" content="4px"/>
  144. <meta name="text:Overlay Opacity" content="0.99"/>
  145. <!-- Custom Lists -->
  146. <meta name="text:Custom Ordered List Icon" content="ec9a"/>
  147. <meta name="text:Custom Unordered List Icon" content="ec99"/>
  148. <!-- Not Found Page -->
  149. <meta name="text:Not Found Title" content="Verbrannt"/>
  150. <meta name="text:Not Found Text" content="This page was lost in the fire."/>
  151.  
  152. <!-- TOGGLES -->
  153. <!-- Gradients -->
  154. <meta name="if:Gradients" content="1"/>
  155. <!-- Posts -->
  156. <meta name="if:Show Captions" content="0"/>
  157. <meta name="if:Show Tags" content="1"/>
  158. <!-- Custom Controls -->
  159. <meta name="if:Custom Controls" content="1"/>
  160. <!-- Accessibility -->
  161. <meta name="if:Custom Colored Text" content="1"/>
  162. <meta name="if:Custom List" content="1"/>
  163. <meta name="if:Bungee Title Font" content="1"/>
  164. <meta name="if:Italics" content="1"/>
  165. <meta name="if:Serif Fonts" content="1"/>
  166.  
  167. <!-- SELECTORS -->
  168. <!-- »» POSTS -->
  169. <!-- Post Width -->
  170. <meta name="select:Post Width" content="40vw" title="normal"/>
  171. <meta name="select:Post Width" content="45vw" title="wide"/>
  172. <meta name="select:Post Width" content="50vw" title="extra wide"/>
  173. <meta name="select:Post Width" content="35vw" title="narrow"/>
  174. <meta name="select:Post Width" content="30vw" title="extra narrow"/>
  175. <!-- »» TEXT -->
  176. <!-- Font -->
  177. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  178. <meta name="select:Font" content="Roboto" title="Roboto"/>
  179. <meta name="select:Font" content="Rubik" title="Rubik"/>
  180. <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro"/>
  181. <meta name="select:Font" content="Ubuntu" title="Ubuntu"/>
  182. <!-- Font Size -->
  183. <meta name="select:Font Size" content="1em" title="16px"/>
  184. <meta name="select:Font Size" content="14px" title="-2px"/>
  185. <meta name="select:Font Size" content="18px" title="+2px"/>
  186. <!-- Text Align -->
  187. <meta name="select:Text Align" content="justify" title="justify"/>
  188. <meta name="select:Text Align" content="left" title="left"/>
  189. <!-- »» TITLES -->
  190. <!-- Graphic Title Font -->
  191. <meta name="select:Bungee Title Font" content="Bungee Shade" title="Bungee Shade"/>
  192. <meta name="select:Bungee Title Font" content="Bungee Inline" title="Bungee Inline"/>
  193. <meta name="select:Bungee Title Font" content="Bungee" title="Bungee"/>
  194. <!-- Title Font -->
  195. <meta name="select:Title Font" content="Merriweather" title="Merriweather"/>
  196. <meta name="select:Title Font" content="Noto Serif JP, Noto Serif" title="Noto Serif"/>
  197. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  198. <meta name="select:Title Font" content="Roboto Slab" title="Roboto Slab"/>
  199. <!-- Title Align -->
  200. <meta name="select:Title Align" content="center" title="center"/>
  201. <meta name="select:Title Align" content="justify" title="justify"/>
  202. <meta name="select:Title Align" content="left" title="left"/>
  203. <!-- »» PREFORMATTED TEXT -->
  204. <!-- Code Font -->
  205. <meta name="select:Code Font" content="Roboto Mono" title="Roboto Mono"/>
  206. <meta name="select:Code Font" content="Source Code Pro" title="Source Code Pro"/>
  207. <meta name="select:Code Font" content="Ubuntu Mono" title="Ubuntu Mono"/>
  208. <!-- »» TEXT TRANSFORM -->
  209. <!-- Sidebar Link Transform -->
  210. <meta name="select:Sidebar Link Transform" content="capitalize" title="capitalize"/>
  211. <meta name="select:Sidebar Link Transform" content="lowercase" title="lowercase"/>
  212. <meta name="select:Sidebar Link Transform" content="uppercase" title="uppercase"/>
  213. <meta name="select:Sidebar Link Transform" content="normal" title="normal"/>
  214. <!-- Tooltip Text Transform -->
  215. <meta name="select:Tooltip Text Transform" content="lowercase" title="lowercase"/>
  216. <meta name="select:Tooltip Text Transform" content="uppercase" title="uppercase"/>
  217. <meta name="select:Tooltip Text Transform" content="normal" title="normal"/>
  218. <!-- »» LISTS -->
  219. <!-- Ordered Lists -->
  220. <meta name="select:Ordered List" content="decimal" title="decimal"/>
  221. <meta name="select:Ordered List" content="lower-alpha" title="lower alpha"/>
  222. <meta name="select:Ordered List" content="lower-roman" title="lower roman"/>
  223. <meta name="select:Ordered List" content="upper-alpha" title="upper alpha"/>
  224. <meta name="select:Ordered List" content="upper-roman" title="upper roman"/>
  225. <!-- Unordered Lists -->
  226. <meta name="select:Unordered List" content="circle" title="circle"/>
  227. <meta name="select:Unordered List" content="disc" title="disc"/>
  228. <meta name="select:Unordered List" content="square" title="square"/>
  229.  
  230. <!-- CUSTOM LINKS -->
  231. <!-- 1st Custom Link -->
  232. <meta name="if:Custom Link 1" content="1"/>
  233. <meta name="text:Custom Icon 1" content="link"/>
  234. <meta name="text:Custom Link 1" content="custom link 1"/>
  235. <meta name="text:Custom URL 1" content="/"/>
  236. <!-- 2nd Custom Link -->
  237. <meta name="if:Custom Link 2" content="1"/>
  238. <meta name="text:Custom Icon 2" content="link"/>
  239. <meta name="text:Custom Link 2" content="custom link 2"/>
  240. <meta name="text:Custom URL 2" content="/"/>
  241. <!-- 3rd Custom Link -->
  242. <meta name="if:Custom Link 3" content="1"/>
  243. <meta name="text:Custom Icon 3" content="link"/>
  244. <meta name="text:Custom Link 3" content="custom link 3"/>
  245. <meta name="text:Custom URL 3" content="/"/>
  246. <!-- 4th Custom Link -->
  247. <meta name="if:Custom Link 4" content="1"/>
  248. <meta name="text:Custom Icon 4" content="link"/>
  249. <meta name="text:Custom Link 4" content="custom link 4"/>
  250. <meta name="text:Custom URL 4" content="/"/>
  251. <!-- 5th Custom Link -->
  252. <meta name="if:Custom Link 5" content="1"/>
  253. <meta name="text:Custom Icon 5" content="link"/>
  254. <meta name="text:Custom Link 5" content="custom link 5"/>
  255. <meta name="text:Custom URL 5" content="/"/>
  256.  
  257. <!-- COLORS -->
  258. <meta name="color:Accent 1" content="#ff0000"/>
  259. <meta name="color:Accent 2" content="#ff5000"/>
  260. <meta name="color:Accent 3" content="#ffa500"/>
  261. <meta name="color:Bold Text" content="#444"/>
  262. <meta name="color:Italic Text" content="#000"/>
  263. <meta name="color:Posts" content="#fff"/>
  264. <meta name="color:Text" content="#222"/>
  265. <meta name="color:Tooltip Text" content="#fff"/>
  266. <!-- Colored Text -->
  267. <meta name="color:Pink Text" content="#ff47b8"/>
  268. <meta name="color:Red Text" content="#ff5151"/>
  269. <meta name="color:Orange Text" content="#ff8551"/>
  270. <meta name="color:Yellow Text" content="#f9cc16"/>
  271. <meta name="color:Green Text" content="#4cce1c"/>
  272. <meta name="color:Blue Text" content="#4775ff"/>
  273. <meta name="color:Purple Text" content="#9a47ff"/>
  274.  
  275. <style>
  276.  
  277. body{
  278. margin:0;
  279. top:0;
  280. left:0;
  281. overflow-x:hiddden;
  282. font-size:{select:Font Size};
  283. color:{color:Text};
  284. background-color:{color:Accent 2};
  285. {block:IfGradients}
  286. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  287. {/block:IfGradients}
  288. background-attachment:fixed;
  289. font-family:"{select:Font}", Verdana;
  290. text-align:{select:Text Align};
  291. overflow-x:hidden;
  292. }
  293.  
  294. /* Custom Scrollbar */
  295. ::-webkit-scrollbar{
  296. width:10px;
  297. background-color: {color:Accent 2};
  298. {block:IfGradients}
  299. background: linear-gradient(to bottom, {color:Accent 2}, {color:Accent 3});
  300. {/block:IfGradients}
  301. }
  302.  
  303. ::-webkit-scrollbar-thumb{
  304. width:10px;
  305. border-radius:5px;
  306. background-color: {color:Accent 2};
  307. {block:IfGradients}
  308. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  309. {/block:IfGradients}
  310. border:4px solid {color:Posts};
  311. }
  312.  
  313. /* Custom Text Selection */
  314. /* Custom Text Selection */
  315. ::selection{
  316. background-color:{color:Accent 2};
  317. color:{color:Tooltip Text};
  318. }
  319.  
  320. ::-moz-selection{
  321. background-color:{color:Accent 2};
  322. color:{color:Tooltip Text};
  323. }
  324.  
  325. ::-o-selection{
  326. background-color:{color:Accent 2};
  327. color:{color:Tooltip Text};
  328. }
  329.  
  330. ::-webkit-selection{
  331. background-color:{color:Accent 2};
  332. color:{color:Tooltip Text};
  333. }
  334.  
  335. /* Custom Tooltips */
  336. .tippy-tooltip.feuer-theme{
  337. background-color: {color:Accent 2};
  338. {block:IfGradients}
  339. background: linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 3});
  340. {/block:IfGradients}
  341. color:{color:Tooltip Text};
  342. box-shadow:0 0 4px {color:Accent 2};
  343. text-align:{select:Text Align};
  344. text-transform:{select:Tooltip Text Transform};
  345. }
  346.  
  347. /* ––– END GENERAL | START TEXT STYLES ––– */
  348.  
  349. /* Bold Text */
  350. b, strong{
  351. color:{color:Bold Text};
  352. font-weight:bold;
  353. }
  354.  
  355. /* Italic Text */
  356. i, em{
  357. color:{color:Italic Text};
  358. font-weight:300;
  359. {block:IfItalics}
  360. font-style:italic;
  361. {/block:IfItalics}
  362. {block:IfNotItalics}
  363. font-style:normal;
  364. {/block:IfNotItalics}
  365. }
  366.  
  367. /* Marked Text */
  368. mark{
  369. background-color:{color:Accent 2};
  370. color:{color:Tooltip Text};
  371. padding:0 4px;
  372. border-radius:4px;
  373. }
  374.  
  375. /* Preformatted Text */
  376. pre{
  377. background-color:{color:Bold Text};
  378. color:{color:Tooltip Text};
  379. font-family:"{select:Code Font}", Courier;
  380. font-size:calc(1em - 2px);
  381. word-wrap:break-all;
  382. white-space:pre-wrap;
  383. padding:0.75em 1em;
  384. border-radius:4px;
  385. }
  386.  
  387. pre b, pre strong, pre i, pre em{
  388. color:{color:Tooltip Text};
  389. }
  390.  
  391. pre u{
  392. border-bottom:2px solid {color:Tooltip Text};
  393. }
  394.  
  395. /* Small Text */
  396. small{
  397. font-size:calc(1em - 4px);
  398. }
  399.  
  400. /* Underlined Text */
  401. u{
  402. text-decoration:none;
  403. border-bottom:2px solid {color:Text};
  404. }
  405.  
  406. /* Blockquote */
  407. blockquote{
  408. padding:1em;
  409. background-color:{color:Accent 2};
  410. color:{color:Tooltip Text};
  411. border-radius:4px;
  412. margin-top:0;
  413. margin-bottom:0;
  414. }
  415.  
  416. blockquote b, blockquote strong,
  417. blockquote i, blockquote em{
  418. color:{color:Tooltip Text};
  419. }
  420.  
  421. blockquote u{
  422. border-bottom:2px solid {color:Tooltip Text};
  423. }
  424.  
  425. blockquote a{
  426. text-decoration:none;
  427. color:{color:Tooltip Text};
  428. border-bottom:2px solid {color:Accent 3};
  429. }
  430.  
  431. blockquote a:hover{
  432. color:{color:Accent 3};
  433. border-bottom:2px solid {color:Accent 3};
  434. }
  435.  
  436. /* Empty Paragraphs */
  437. p:empty{
  438. display:none;
  439. }
  440.  
  441. /* Text Line */
  442. hr{
  443. width:90%;
  444. height:4px;
  445. border-radius:2px;
  446. background-color:{color:Accent 2};
  447. {block:IfGradients}
  448. background:linear-gradient(to right, {color:Accent 1}, {color:Accent 3});
  449. {/block:IfGradients}
  450. border:none;
  451. }
  452.  
  453. /* READ MORE */
  454. a.read_more{
  455. margin-left:calc(50% - (16px + 2px + 32px + 8px));
  456. text-transform:{select:Tooltip Text Transform};
  457. }
  458.  
  459. /* GIF ATTRIBUTION */
  460. p.tmblr-attribution{
  461. text-align:{select:Title Align};
  462. text-transform:{select:Tooltip Text Transform};
  463. margin-top:8px;
  464. }
  465.  
  466. /* READ MORE + GIF ATTRIBUTION */
  467. a.read_more, p.tmblr-attribution a{
  468. box-shadow:none;
  469. border:none;
  470. color:{color:Tooltip Text};
  471. background-color:{color:Accent 1};
  472. font-size:calc(1em - 2px);
  473. padding:4px 8px;
  474. border-radius:4px;
  475. }
  476.  
  477. a.read_more:hover, p.tmblr-attribution a:hover{
  478. box-shadow:none;
  479. border:none;
  480. color:{color:Tooltip Text};
  481. background-color:{color:Accent 3};
  482. }
  483.  
  484. a.read_more, a.read_more:hover,
  485. p.tmblr-attribution a, p.tmblr-attribution a:hover{
  486. transition:0.5s;
  487. -moz-transition:0.5s;
  488. -o-transition:0.5s;
  489. -webkit-transition:0.5s;
  490. }
  491.  
  492. /* LINKS */
  493. /* Link */
  494. a{
  495. text-decoration:none;
  496. color:{color:Accent 1};
  497. border-bottom:2px solid {color:Accent 1};
  498. }
  499.  
  500. /* Link | Hover */
  501. a:hover{
  502. color:{color:Accent 3};
  503. border-bottom:2px solid {color:Accent 3};
  504. }
  505.  
  506. /* Link | Transitions */
  507. a, a:hover{
  508. transition:0.5s;
  509. -moz-transition:0.5s;
  510. -o-transition:0.5s;
  511. -webkit-transition:0.5s;
  512. }
  513.  
  514. /* LISTS */
  515. /* Custom Lists */
  516. {block:IfCustomList}
  517. ul, ol{
  518. list-style-type:none;
  519. }
  520.  
  521. ul li:before, ol li:before{
  522. font-family:'honeybee';
  523. font-weight:400;
  524. font-size:calc(1em - 2px);
  525. position:relative;
  526. z-index:0!important;
  527. color:{color:Accent 2};
  528. {block:IfGradients}
  529. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  530. -webkit-background-clip: text;
  531. -webkit-text-fill-color: transparent;
  532. {/block:IfGradients}
  533. margin-left:-1.5em;
  534. margin-right:0.5em;
  535. }
  536.  
  537. ul li:before{
  538. content:"\{text:Custom Unordered List Icon}";
  539. }
  540.  
  541. ol li:before{
  542. content:"\{text:Custom Ordered List Icon}";
  543. }
  544.  
  545. {/block:IfCustomList}
  546.  
  547. /* Standard Lists */
  548. {block:IfNotCustomList}
  549. /* Ordered List */
  550. ol{
  551. list-style-type:{select:Ordered List};
  552. }
  553.  
  554. /* Unordered List */
  555. ul{
  556. list-style-type:{select:Unordered List};
  557. }
  558. {/block:IfNotCustomList}
  559.  
  560. /* SPECIAL FONTS */
  561. {block:IfNotSerifFonts}
  562. p.npf_quirky, p.npf_chat, p.npf_quote{
  563. font-family:"{select:Font}", Verdana!important;
  564. }
  565. {/block:IfNotSerifFonts}
  566.  
  567. /* COLORED TEXT */
  568. {block:IfCustomColoredText}
  569. /* Red Text */
  570. .npf_color_joey {
  571. color:{color:Red Text}!important;
  572. }
  573.  
  574. /* Orange Text */
  575. .npf_color_monica {
  576. color:{color:Orange Text}!important;
  577. }
  578.  
  579. /* Yellow Text */
  580. .npf_color_phoebe {
  581. color:{color:Yellow Text}!important;
  582. }
  583.  
  584. /* Green Text */
  585. .npf_color_ross {
  586. color:{color:Green Text}!important;
  587. }
  588.  
  589. /* Blue Text */
  590. .npf_color_rachel {
  591. color:{color:Blue Text}!important;
  592. }
  593.  
  594. /* Purple Text */
  595. .npf_color_chandler {
  596. color:{color:Purple Text}!important;
  597. }
  598.  
  599. /* Pink Text */
  600. .npf_color_niles {
  601. color:{color:Pink Text}!important;
  602. }
  603. {/block:IfCustomColoredText}
  604.  
  605. /* HEADINGS */
  606. /* Post Title */
  607. .title{
  608. {block:IfSerifFonts}
  609. {block:IfBungeeTitleFont}
  610. font-family:"{select:Bungee Title Font}", "{select:Title Font}", Georgia;
  611. {/block:IfBungeeTitleFont}
  612. font-size:2.5em;
  613. {block:IfNotBungeeTitleFont}
  614. font-family:"{select:Title Font}", Georgia;
  615. {/block:IfNotBungeeTitleFont}
  616. {/block:IfSerifFonts}
  617. {block:IfNotSerifFonts}
  618. font-family:"{select:Font}", Verdana;
  619. font-size:2em;
  620. {/block:IfNotSerifFonts}
  621. margin-bottom:8px;
  622. text-align:{select:Title Align};
  623. color:{color:Accent 2};
  624. {block:IfGradients}
  625. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  626. -webkit-background-clip: text;
  627. -webkit-text-fill-color: transparent;
  628. {/block:IfGradients}
  629. }
  630.  
  631. /* 1st Heading */
  632. h1{
  633. font-size:1.625em;
  634. border-bottom:4px solid {color:Accent 1};
  635. }
  636.  
  637. /* 2nd Heading */
  638. h2{
  639. font-size:1.5em;
  640. border-bottom:4px solid {color:Accent 2};
  641. }
  642.  
  643. /* 3rd Heading */
  644. h3{
  645. font-size:1.375em;
  646. border-bottom:4px solid {color:Accent 3};
  647. }
  648.  
  649. /* 4th Heading */
  650. h4{
  651. font-size:1.25em;
  652. background-color:{color:Accent 1};
  653. color:{color:Tooltip Text};
  654. }
  655.  
  656. /* 5th Heading */
  657. h5{
  658. font-size:1.125em;
  659. background-color:{color:Accent 2};
  660. color:{color:Tooltip Text};
  661. }
  662.  
  663. /* 6th Heading */
  664. h6{
  665. font-size:1em;
  666. background-color:{color:Accent 3};
  667. color:{color:Tooltip Text};
  668. }
  669.  
  670. h1, h2, h3{
  671. padding-bottom:4px;
  672. }
  673.  
  674. h4, h5, h6{
  675. padding:4px 8px;
  676. border-radius:4px;
  677. }
  678.  
  679. h1, h2, h3 , h4, h5, h6{
  680. font-weight:normal;
  681. }
  682.  
  683. /* ––– END TEXT STYLES | START SIDEBAR ––– */
  684.  
  685. /* SIDEBAR */
  686. #sidebar{
  687. width:calc(30vw - 2em);
  688. height:calc(100vh - 2em);
  689. padding:1em;
  690. position:fixed;
  691. top:0;
  692. left:0;
  693. background-color:{color:Posts};
  694. box-shadow:0 0 8px {color:Accent 2};
  695. display:flex;
  696. align-items:center;
  697. justify-content:center;
  698. flex-direction:column;
  699. }
  700.  
  701. /* »» SIDEBAR TITLE */
  702. #s-title{
  703. {block:IfSerifFonts}
  704. {block:IfBungeeTitleFont}
  705. font-family:"{select:Bungee Title Font}", "{select:Title Font}", Georgia;
  706. {/block:IfBungeeTitleFont}
  707. font-size:2.5em;
  708. {block:IfNotBungeeTitleFont}
  709. font-family:"{select:Title Font}", Georgia;
  710. {/block:IfNotBungeeTitleFont}
  711. {/block:IfSerifFonts}
  712. {block:IfNotSerifFonts}
  713. font-family:"{select:Font}", Verdana;
  714. font-size:2em;
  715. {/block:IfNotSerifFonts}
  716. color:{color:Accent 2};
  717. {block:IfGradients}
  718. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  719. -webkit-background-clip: text;
  720. -webkit-text-fill-color: transparent;
  721. {/block:IfGradients}
  722. }
  723.  
  724. /* »» SIDEBAR DESCRIPTION */
  725. #s-desc{
  726. margin-top:8px;
  727. margin-bottom:8px;
  728. }
  729.  
  730. /* »» SIDEBAR NAVIGATION */
  731. #s-nav{
  732. display:flex;
  733. align-items:flex-start;
  734. justify-content:flex-start;
  735. flex-wrap:wrap;
  736. }
  737.  
  738. /* Navigation Links */
  739. a.s-link, button.s-link{
  740. text-transform:{select:Sidebar Link Transform};
  741. margin-right:2px;
  742. margin-bottom:2px;
  743. border-bottom:none;
  744. font-family:"{select:Font}", Verdana;
  745. padding:2px 8px 2px 2px;
  746. font-size:calc(1em - 2px);
  747. background-color:{color:Accent 1};
  748. {block:IfGradients}
  749. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  750. {/block:IfGradients}
  751. color:{color:Tooltip Text};
  752. border-radius:1em;
  753. display:flex;
  754. align-items:center;
  755. justify-content:flex-start;
  756. }
  757.  
  758. /* Navigation Links | Icons */
  759. a.s-link span, button.s-link span{
  760. font-size:calc(1em - 4px);
  761. margin-right:4px;
  762. width:20px;
  763. height:20px;
  764. border-radius:50%;
  765. background-color:{color:Tooltip Text};
  766. color:{color:Accent 1};
  767. display:flex;
  768. align-items:center;
  769. justify-content:center;
  770. }
  771.  
  772. /* Navigation Links | Hover */
  773. a.s-link:hover, button.s-link:hover{
  774. background-color:{color:Accent 3};
  775. {block:IfGradients}
  776. background:linear-gradient(to top left, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  777. {/block:IfGradients}
  778. cursor:pointer;
  779. }
  780.  
  781. /* Navigation Links | Hover | Icons */
  782. a.s-link:hover span, button.s-link:hover span{
  783. color:{color:Accent 3};
  784. }
  785.  
  786. /* Navigation Links | Transitions */
  787. a.s-link, a.s-link:hover,
  788. button.s-link, button.s-link:hover{
  789. transition:0.5s;
  790. -moz-transition:0.5s;
  791. -o-transition:0.5s;
  792. -webkit-transition:0.5s;
  793. }
  794.  
  795. /* Searchbar Button */
  796. .openBtn, .openBtn:hover, .openBtn:focus{
  797. outline:none;
  798. border:none;
  799. }
  800.  
  801. /* ––– END SIDEBAR | START POSTS ––– */
  802.  
  803. /* POST CONTAINER */
  804. #posts{
  805. width:70vw;
  806. height:100vh;
  807. margin-left:30vw;
  808. }
  809.  
  810. /* ENTRY */
  811. article{
  812. width:{select:Post Width};
  813. height:auto;
  814. background-color:{color:Posts};
  815. padding:1em;
  816. margin-top:15vh;
  817. margin-bottom:15vh;
  818. margin-left:calc((70vw - {select:Post Width})/2 - 1em);
  819. box-shadow:0 0 8px {color:Accent 2};
  820. border-radius:8px;
  821. }
  822.  
  823. /* PHOTOSETS */
  824. /* Photoset Grid */
  825. .photoset-grid{
  826. grid-gap:{text:Photoset Gap};
  827. }
  828.  
  829. .photoset-image img:hover, .photo img:hover,
  830. .panorama img:hover{
  831. cursor:pointer;
  832. }
  833.  
  834. /* –– NPF Photoset Fix, by glenthemes */
  835. :root {
  836. --NPF-Image-Spacing:{text:Photoset Gap};
  837. }
  838.  
  839. .npf_row {
  840. display:flex!important;
  841. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  842. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  843. }
  844.  
  845. .npf_row:last-of-type {
  846. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  847. }
  848.  
  849. .tmblr-full {
  850. flex:1;
  851. margin:0!important;
  852. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  853. width:auto!important;
  854. height:auto!important;
  855. cursor:pointer;
  856. outline:none;
  857. }
  858.  
  859. article img, .tmblr-full img {
  860. max-width:100%;
  861. border-radius:4px;
  862. }
  863.  
  864. .text iframe{
  865. max-width:100%;
  866. }
  867.  
  868. .photo img{
  869. width:100%;
  870. }
  871.  
  872. /* QUOTES */
  873. .quoted{
  874. {block:IfItalics}
  875. font-style:italic;
  876. {/block:IfItalics}
  877. {block:IfNotItalics}
  878. font-style:normal;
  879. {/block:IfNotItalics}
  880. color:{color:Accent 2};
  881. {block:IfGradients}
  882. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  883. -webkit-background-clip: text;
  884. -webkit-text-fill-color: transparent;
  885. {/block:IfGradients}
  886. {block:IfSerifFonts}
  887. {block:IfBungeeTitleFont}
  888. font-family:"{select:Bungee Title Font}", "{select:Title Font}", Georgia;
  889. {/block:IfBungeeTitleFont}
  890. font-size:1.5em;
  891. {block:IfNotBungeeTitleFont}
  892. font-family:"{select:Title Font}", Georgia;
  893. {/block:IfNotBungeeTitleFont}
  894. {/block:IfSerifFonts}
  895. {block:IfNotSerifFonts}
  896. font-family:"{select:Font}", Verdana;
  897. font-size:1.25em;
  898. {/block:IfNotSerifFonts}
  899. text-align:{select:Title Align};
  900. }
  901.  
  902. .quote-source{
  903. margin-top:8px;
  904. }
  905.  
  906. /* AUDIO */
  907. .audio > iframe{
  908. width:100%;
  909. max-width:100%;
  910. }
  911.  
  912. iframe.tumblr_audio_player {
  913. border-radius:4px!important;
  914. }
  915.  
  916. /* Spotify Audio Player */
  917. iframe.spotify_audio_player {
  918. height:80px!important;
  919. border-radius:4px!important;
  920. }
  921.  
  922. /* Soundcloud Audio Player */
  923. iframe.soundcloud_audio_player{
  924. height:80px!important;
  925. border-radius:4px!important;
  926. }
  927.  
  928. /* VIDEO */
  929. .video > iframe{
  930. width:100%;
  931. max-width:100%;
  932. }
  933.  
  934. /* CHATS */
  935. .chat, .chatterbox{
  936. clear:both;
  937. width:{select:Post Width};
  938. }
  939.  
  940. .chat .clear{
  941. clear:both;
  942. }
  943.  
  944. .label_odd, .label_even{
  945. font-weight:bold;
  946. }
  947.  
  948. .label_odd{
  949. color:{color:Accent 1};
  950. }
  951.  
  952. .label_even{
  953. color:{color:Accent 3};
  954. }
  955.  
  956. .label_odd, .line_odd, .label_even, .line_even{
  957. width:fit-width;
  958. max-width:80%;
  959. clear:both;
  960. }
  961.  
  962. /* Even Entries */
  963. .label_even, .line_even{
  964. margin-left:20%;
  965. float:right;
  966. }
  967.  
  968. /* Odd Entries */
  969. .label_odd, .line_odd{
  970. float:left;
  971. }
  972.  
  973. /* Chat Lines */
  974. .line_even, .line_odd{
  975. margin-top:4px;
  976. }
  977.  
  978. /* -- Last Line */
  979. .line:last-child{
  980. margin-bottom:1em;
  981. }
  982.  
  983. /* LINK */
  984. /* Link Title */
  985. .link-title{
  986. font-size:1.5em;
  987. font-weight:300;
  988. background-color:{color:Accent 1};
  989. color:{color:Tooltip Text};
  990. }
  991.  
  992. /* Link Excerpt */
  993. .link-excerpt{
  994. font-size:calc(1em + 2px);
  995. background-color:{color:Accent 2};
  996. color:{color:Tooltip Text};
  997. }
  998.  
  999. /* Link Author */
  1000. .link-author{
  1001. font-size:calc(1em - 2px);
  1002. color:{color:Tooltip Text};
  1003. background-color:{color:Accent 3};
  1004. }
  1005.  
  1006. .link-title:hover, .link-excerpt:hover, .link-author:hover{
  1007. background-color:{color:Posts};
  1008. color:{color:Accent 2};
  1009. {block:IfGradients}
  1010. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1011. -webkit-background-clip: text;
  1012. -webkit-text-fill-color: transparent;
  1013. {/block:IfGradients}
  1014. }
  1015.  
  1016. .link-title, .link-title:hover,
  1017. .link-excerpt, .link-excerpt:hover,
  1018. .link-author, .link-author:hover{
  1019. text-align:justify;
  1020. margin-bottom:4px;
  1021. border-radius:4px;
  1022. padding:4px 8px;
  1023. transition:0.5s;
  1024. -moz-transition:0.5s;
  1025. -o-transition:0.5s;
  1026. -webkit-transition:0.5s;
  1027. }
  1028.  
  1029. /* QUESTIONS + ANSWERS */
  1030. .frage, .antwort{
  1031. padding:0.5em 1em;
  1032. width:calc(100% - 2em);
  1033. border-radius:4px;
  1034. }
  1035.  
  1036. /* QUESTION */
  1037. .frage{
  1038. background-color:{color:Accent 2};
  1039. color:{color:Tooltip Text};
  1040. }
  1041.  
  1042. /* ANSWER */
  1043. .antwort{
  1044. background-color:{color:Bold Text};
  1045. color:{color:Tooltip Text};
  1046. margin-top:8px;
  1047. }
  1048.  
  1049. /* Bold Text */
  1050. .antwort b, .antwort strong{
  1051. color:{color:Tooltip Text};
  1052. }
  1053.  
  1054. /* Italic Text */
  1055. .antwort i, .antwort em{
  1056. color:{color:Tooltip Text};
  1057. }
  1058.  
  1059. /* Underlined Text */
  1060. .antwort u{
  1061. border-bottom:2px solid {color:Tooltip Text};
  1062. }
  1063.  
  1064. .antwort pre{
  1065. background-color:{color:Accent 1};
  1066. color:{color:Tooltip Text};
  1067. }
  1068.  
  1069. /* QA USERNAMES */
  1070. .question-username, .answer-username{
  1071. margin-top:8px;
  1072. margin-bottom:8px;
  1073. }
  1074.  
  1075. /* Question Username */
  1076. a.asker{
  1077. background-color:{color:Tooltip Text};
  1078. color:{color:Accent 1};
  1079. }
  1080.  
  1081. a.asker:hover{
  1082. background-color:{color:Accent 3};
  1083. color:{color:Tooltip Text};
  1084. }
  1085.  
  1086. a.answerer{
  1087. background-color:{color:Accent 2};
  1088. color:{color:Tooltip Text};
  1089. }
  1090.  
  1091. a.answerer:hover{
  1092. background-color:{color:Tooltip Text};
  1093. color:{color:Accent 2};
  1094. }
  1095.  
  1096. a.asker, a.asker:hover, a.answerer, a.answerer:hover{
  1097. border-bottom:none;
  1098. box-shadow:none;
  1099. padding:4px 8px;
  1100. font-size:calc(1em - 2px);
  1101. border-radius:1em;
  1102. transition:0.5s;
  1103. -moz-transition:0.5s;
  1104. -o-transition:0.5s;
  1105. -webkit-transition:0.5s;
  1106. }
  1107.  
  1108. /* ––– END POSTS | START USERNAMES ––– */
  1109.  
  1110. /* USER ICONS */
  1111. .usericon img.cimg{
  1112. width:32px;
  1113. height:32px;
  1114. margin-right:8px;
  1115. border-radius:50%;
  1116. }
  1117.  
  1118. /* USERNAME */
  1119. /* Container */
  1120. .username{
  1121. display:flex;
  1122. align-items:center;
  1123. margin-top:16px;
  1124. }
  1125.  
  1126. /* Username */
  1127. a.userlink{
  1128. font-weight:bold;
  1129. color:{color:Text};
  1130. font-size:calc(1em - 2px);
  1131. border-bottom:none;
  1132. box-shadow:none;
  1133. }
  1134.  
  1135. /* Username on Hover */
  1136. a.userlink:hover{
  1137. color:{color:Accent 2};
  1138. {block:IfGradients}
  1139. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1140. -webkit-background-clip: text;
  1141. -webkit-text-fill-color: transparent;
  1142. {/block:IfGradients}
  1143. }
  1144.  
  1145. a.userlink, a.userlink:hover{
  1146. transition:0.5s;
  1147. -moz-transition:0.5s;
  1148. -o-transition:0.5s;
  1149. -webkit-transition:0.5s;
  1150. }
  1151.  
  1152. /* Deactivated User */
  1153. .deactivated{
  1154. font-weight:bold;
  1155. }
  1156.  
  1157. .deactivated:after {
  1158. content:'deactivated';
  1159. position:absolute;
  1160. padding-left:8px;
  1161. color:{color:Bold Text};
  1162. font-weight:normal;
  1163. opacity:0;
  1164. }
  1165.  
  1166. /* Deactivated User on Hover */
  1167. .deactivated:hover:after {
  1168. opacity:1;
  1169. }
  1170.  
  1171. .deactivated:after, .deactivated:hover:after{
  1172. transition:0.5s ease-in-out;
  1173. -moz-transition:0.5s ease-in-out;
  1174. -o-transition:0.5s ease-in-out;
  1175. -webkit-transition:0.5s ease-in-out;
  1176. }
  1177.  
  1178. /* ––– END USERNAMES | START POST INFORMATION ––– */
  1179.  
  1180. /* POST INFORMATION */
  1181. .post-information{
  1182. display:flex;
  1183. align-items:flex-start;
  1184. justify-content:flex-start;
  1185. flex-wrap:wrap;
  1186. margin-top:1em;
  1187. clear:both;
  1188. }
  1189.  
  1190. /* Specification Link */
  1191. a.specs{
  1192. text-transform:{select:Tooltip Text Transform};
  1193. margin-right:2px;
  1194. margin-bottom:2px;
  1195. border-bottom:none;
  1196. padding:2px 8px 2px 2px;
  1197. font-size:calc(1em - 2px);
  1198. background-color:{color:Accent 1};
  1199. {block:IfGradients}
  1200. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1201. {/block:IfGradients}
  1202. color:{color:Tooltip Text};
  1203. border-radius:1em;
  1204. display:flex;
  1205. align-items:center;
  1206. justify-content:flex-start;
  1207. }
  1208.  
  1209. /* Specification Link | Icon */
  1210. a.specs span{
  1211. font-size:calc(1em - 4px);
  1212. margin-right:4px;
  1213. width:20px;
  1214. height:20px;
  1215. border-radius:50%;
  1216. background-color:{color:Tooltip Text};
  1217. color:{color:Accent 1};
  1218. display:flex;
  1219. align-items:center;
  1220. justify-content:center;
  1221. }
  1222.  
  1223. /* Specification Link | Hover */
  1224. a.specs:hover{
  1225. background-color:{color:Accent 3};
  1226. {block:IfGradients}
  1227. background:linear-gradient(to top left, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1228. {/block:IfGradients}
  1229. }
  1230.  
  1231. /* Specification Link | Hover | Icon */
  1232. a.specs:hover span{
  1233. color:{color:Accent 3};
  1234. }
  1235.  
  1236. /* Specification Link | Transitions */
  1237. a.specs, a.specs:hover{
  1238. transition:0.5s;
  1239. -moz-transition:0.5s;
  1240. -o-transition:0.5s;
  1241. -webkit-transition:0.5s;
  1242. }
  1243.  
  1244. /* LIKE BUTTON */
  1245. /* Like Button */
  1246. .like_button {
  1247. position:relative;
  1248. font-size:1em;
  1249. display:flex;
  1250. align-items:center;
  1251. margin-top:0;
  1252. }
  1253.  
  1254. /* Like Button iframe */
  1255. .like_button iframe {
  1256. height:100%;
  1257. left:0;
  1258. opacity:0;
  1259. position:absolute;
  1260. top:0;
  1261. width:100%;
  1262. z-index:1!important;
  1263. border-bottom:none;
  1264. }
  1265.  
  1266. /* Like Button Before Element */
  1267. .like_button:before{
  1268. content:"\ea55";
  1269. font-family:'honeybee';
  1270. font-weight:400;
  1271. position:relative;
  1272. z-index:0!important;
  1273. font-size:calc(1em - 4px);
  1274. margin-right:4px;
  1275. width:20px;
  1276. height:20px;
  1277. border-radius:50%;
  1278. background-color:{color:Tooltip Text};
  1279. color:{color:Accent 1};
  1280. display:flex;
  1281. align-items:center;
  1282. justify-content:center;
  1283. }
  1284.  
  1285. .like_button:hover:before{
  1286. color:{color:Accent 3};
  1287. }
  1288.  
  1289. /* Like Button After Element */
  1290. .like_button:after {
  1291. content:'like';
  1292. z-index:0!important;
  1293. }
  1294.  
  1295. /* ––– END POST INFORMATION | START PERMALINK PAGE ––– */
  1296.  
  1297. /* PERMALINK PAGE */
  1298. /* User Avatar */
  1299. img.avatar{
  1300. display:none;
  1301. }
  1302.  
  1303. /* Notes List */
  1304. ol.notes{
  1305. padding-top:8px;
  1306. margin-top:8px;
  1307. margin-left:-1.5em;
  1308. list-style-type:none;
  1309. text-align:left;
  1310. }
  1311.  
  1312. /* Notes List on Hover */
  1313. ol.notes:hover{
  1314. border-bottom:none;
  1315. }
  1316.  
  1317. /* Notes List Item */
  1318. li.note{
  1319. line-height:1.75em;
  1320. margin-left:0;
  1321. font-size:calc(1em - 2px);
  1322. }
  1323.  
  1324. /* Original Post */
  1325. li.reblog.original_post:before{
  1326. content:"\eb1b";
  1327. }
  1328.  
  1329. /* Liked by … */
  1330. li.like:before{
  1331. content:"\ea55";
  1332. }
  1333.  
  1334. /* Reblogged by … */
  1335. li.reblog:before{
  1336. content:"\ebc2";
  1337. }
  1338.  
  1339. /* User Replied to … */
  1340. li.reply:before{
  1341. content:"\ebce";
  1342. }
  1343.  
  1344. li.reblog.original_post:before, li.like:before,
  1345. li.reblog:before, li.reply:before{
  1346. font-family:'honeybee';
  1347. font-weight:400;
  1348. position:relative;
  1349. z-index:10!important;
  1350. margin-right:0.25em;
  1351. font-size:calc(1em - 4px);
  1352. padding:0.25em;
  1353. color:{color:Accent 2};
  1354. }
  1355.  
  1356. /* Reblogged with comment */
  1357. li.with_commentary blockquote{
  1358. background-color:{color:Posts};
  1359. }
  1360.  
  1361. li.with_commentary blockquote a{
  1362. border-bottom:none;
  1363. color:{color:Accent 1};
  1364. }
  1365.  
  1366. li.with_commentary blockquote a:hover{
  1367. border-bottom:none;
  1368. color:{color:Accent 3};
  1369. }
  1370.  
  1371. /* Notes Link */
  1372. .notes a{
  1373. text-decoration:none;
  1374. box-shadow:none;
  1375. border-bottom:2px solid {color:Accent 1};
  1376. color:{color:Text};
  1377. margin-bottom:0.25em;
  1378. }
  1379.  
  1380. /* Notes Link | Hover */
  1381. .notes a:hover{
  1382. border-bottom:2px solid {color:Accent 3};
  1383. color:{color:Text};
  1384. }
  1385.  
  1386. /* Notes Link | Tranistions */
  1387. .notes a, .notes a:hover{
  1388. transition:0.5s;
  1389. -moz-transition:0.5s;
  1390. -o-transition:0.5s;
  1391. -webkit-transition:0.5s;
  1392. }
  1393.  
  1394. /* More Notes Container */
  1395. li.more_notes_link_container{
  1396. margin-top:20px;
  1397. }
  1398.  
  1399. li.more_notes_link_container:before{
  1400. content:"";
  1401. }
  1402.  
  1403. /* More Notes Link */
  1404. a.more_notes_link{
  1405. color:{color:Tooltip Text};
  1406. background-color:{color:Accent 1};
  1407. text-transform:{select:Tooltip Text Transform};
  1408. padding:4px 8px;
  1409. border-bottom:none;
  1410. border-radius:4px;
  1411. }
  1412.  
  1413. /* More Notes Link | Hover */
  1414. a.more_notes_link:hover{
  1415. border-bottom:none;
  1416. color:{color:Tooltip Text};
  1417. background-color:{color:Accent 3};
  1418. }
  1419.  
  1420. /* More Notes Link | Transitions */
  1421. a.more_notes_link, a.more_notes_link:hover{
  1422. transition:0.5s;
  1423. -moz-transition:0.5s;
  1424. -o-transition:0.5s;
  1425. -webkit-transition:0.5s;
  1426. }
  1427.  
  1428. /* ––– END PERMALINK PAGE | START EXTRAS ––– */
  1429.  
  1430. /* Hides the tumblr app button, by @yeoli-thm */
  1431. .tmblr-iframe--app-cta-button {
  1432. display: none!important;
  1433. }
  1434.  
  1435. /* CUSTOM TUMBLR CONTROLS */
  1436. /* Hides standard tumblr controls */
  1437. body > iframe:first-child {
  1438. display: none !important;
  1439. }
  1440.  
  1441. /* »» CONTROLS + PAGINATION */
  1442. #custom-controls, #pagination{
  1443. position:fixed;
  1444. left:calc(15vw - (2.5 * 36px + 2 * 8px));
  1445. width:calc(5 * 36px + 4 * 8px);
  1446. height:36px;
  1447. display:flex;
  1448. align-items:center;
  1449. justify-content:space-between;
  1450. }
  1451.  
  1452. /* »» CONTROLS */
  1453. #custom-controls{
  1454. top:8px;
  1455. }
  1456.  
  1457. /* »» PAGINATION */
  1458. #pagination{
  1459. bottom:8px;
  1460. }
  1461.  
  1462. /* Control Link */
  1463. a.conlink{
  1464. border-bottom:none;
  1465. }
  1466.  
  1467. /* Control Element */
  1468. .cont{
  1469. width:36px;
  1470. height:36px;
  1471. border-radius:50%;
  1472. font-size:calc(1em - 2px);
  1473. background-color:{color:Accent 1};
  1474. {block:IfGradients}
  1475. background:linear-gradient(to bottom right, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1476. {/block:IfGradients}
  1477. color:{color:Tooltip Text};
  1478. display:flex;
  1479. align-items:center;
  1480. justify-content:center;
  1481. }
  1482.  
  1483. /* Control Element | Hover */
  1484. .cont:hover{
  1485. background-color:{color:Accent 3};
  1486. {block:IfGradients}
  1487. background:linear-gradient(to top left, {color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1488. {/block:IfGradients}
  1489. color:{color:Tooltip Text};
  1490. }
  1491.  
  1492. /* Control Element | Transitions */
  1493. .cont, .cont:hover{
  1494. transition:0.5s;
  1495. -moz-transition:0.5s;
  1496. -o-transition:0.5s;
  1497. -webkit-transition:0.5s;
  1498. }
  1499.  
  1500. /* SEARCH */
  1501. /* »» OVERLAY */
  1502. .overlay {
  1503. height:100%;
  1504. width:100%;
  1505. display:none;
  1506. position:fixed;
  1507. z-index:1;
  1508. top:0;
  1509. left:0;
  1510. background-color:{color:Posts};
  1511. background:rgba({RGBcolor:Posts}, {text:Overlay Opacity});
  1512. }
  1513.  
  1514. /* Overlay Content */
  1515. .overlay-content {
  1516. position:relative;
  1517. top:46%;
  1518. width:80%;
  1519. text-align:center;
  1520. margin-top:30px;
  1521. margin:auto;
  1522. }
  1523.  
  1524. /* »» OVERLAY CLOSE BUTTON */
  1525. /* Overlay Close Button */
  1526. .overlay .closebtn {
  1527. position:absolute;
  1528. top:20px;
  1529. right:45px;
  1530. font-size:60px;
  1531. cursor:pointer;
  1532. color:{color:Accent 1};
  1533. }
  1534.  
  1535. /* Overlay Close Button | Hover */
  1536. .overlay .closebtn:hover {
  1537. color:{color:Accent 3};
  1538. }
  1539.  
  1540. /* Overlay Close Button | Transitions */
  1541. .overlay .closebtn, .overlay .closebtn:hover{
  1542. transition:0.5s;
  1543. -moz-transition:0.5s;
  1544. -o-transition:0.5s;
  1545. -webkit-transition:0.5s;
  1546. }
  1547.  
  1548. /* »» SEARCHBAR */
  1549. /* Input */
  1550. .overlay input[type=text] {
  1551. padding:1em;
  1552. font-size:1em;
  1553. border:none;
  1554. float:left;
  1555. width:calc(80% - 2em);
  1556. background:{color:Accent 1};
  1557. color:{color:Tooltip Text};
  1558. font-family:"{select:Font}", Verdana;
  1559. }
  1560.  
  1561. /* Input | Hover */
  1562. .overlay input[type=text]:hover {
  1563. background:{color:Accent 3};
  1564. color:{color:Tooltip Text};
  1565. }
  1566.  
  1567. /* Input | Focus */
  1568. .overlay input[type=text]:focus {
  1569. background:{color:Accent 2};
  1570. color:{color:Tooltip Text};
  1571. border:none;
  1572. outline:none;
  1573. }
  1574.  
  1575. /* Input | Transitions */
  1576. .overlay input[type=text], .overlay input[type=text]:hover,
  1577. .overlay input[type=text]:focus{
  1578. transition:0.5s;
  1579. -moz-transition:0.5s;
  1580. -o-transition:0.5s;
  1581. -webkit-transition:0.5s;
  1582. }
  1583.  
  1584. /* »» SEARCH BUTTON */
  1585. /* Button */
  1586. .overlay button {
  1587. float: left;
  1588. width:calc(20% - 2em);
  1589. margin-left:1em;
  1590. padding:1em;
  1591. font-size:1em;
  1592. border:none;
  1593. cursor:pointer;
  1594. background:{color:Accent 3};
  1595. color:{color:Tooltip Text};
  1596. font-family:"{select:Font}", Verdana;
  1597. }
  1598.  
  1599. /* Button | Hover */
  1600. .overlay button:hover {
  1601. background:{color:Accent 1};
  1602. color:{color:Tooltip Text};
  1603. }
  1604.  
  1605. /* Button | Focus */
  1606. .overlay button:focus {
  1607. background:{color:Accent 2};
  1608. color:{color:Tooltip Text};
  1609. border:none;
  1610. outline:none;
  1611. }
  1612.  
  1613. /* Button | Transitions */
  1614. .overlay button, .overlay button:hover,
  1615. .overlay button:focus{
  1616. transition:0.5s;
  1617. -moz-transition:0.5s;
  1618. -o-transition:0.5s;
  1619. -webkit-transition:0.5s;
  1620. }
  1621.  
  1622. /* Placeholder */
  1623. ::-webkit-input-placeholder {
  1624. color:inherit;
  1625. }
  1626.  
  1627. ::-o-placeholder {
  1628. color:inherit;
  1629. opacity:1;
  1630. }
  1631.  
  1632. ::-moz-placeholder {
  1633. color:inherit;
  1634. opacity:1;
  1635. }
  1636.  
  1637. :-ms-input-placeholder {
  1638. color:inherit;
  1639. }
  1640.  
  1641. /* Placeholder on Focus */
  1642. input:focus::-webkit-input-placeholder {
  1643. color:transparent;
  1644. }
  1645.  
  1646. input:focus::-o-placeholder {
  1647. color:transparent;
  1648. }
  1649.  
  1650. input:focus::-moz-placeholder {
  1651. color:transparent;
  1652. }
  1653.  
  1654. input:focus:-ms-input-placeholder {
  1655. color:transparent;
  1656. }
  1657.  
  1658. /* CUSTOM LIGHTBOX */
  1659. /* Custom Lightbox */
  1660. .vignette, #vignette {
  1661. opacity:0;
  1662. }
  1663.  
  1664. /* Lightbox Image */
  1665. .lightbox-image, #tumblr_lightbox img {
  1666. box-shadow:none!important;
  1667. border-radius:none!important;
  1668. max-width:none;
  1669. }
  1670.  
  1671. /* Lightbox Background */
  1672. .tmblr-lightbox, #tumblr_lightbox {
  1673. background-color:{color:Posts}!important;
  1674. background:rgba({RGBcolor:Posts}, {text:Overlay Opacity})!important;
  1675. }
  1676.  
  1677. /* Lightbox Link */
  1678. a.tumblr-box{
  1679. border-bottom:none;
  1680. }
  1681.  
  1682. /* PAGE NOT FOUND */
  1683. /* – Tutorial by fukuo – */
  1684. /* Container */
  1685. .wrapper_notfound {
  1686. position:fixed;
  1687. visibility:hidden;
  1688. left:0px;
  1689. top:0px;
  1690. width:100%;
  1691. height:100%;
  1692. background-color:{color:Posts};
  1693. z-index:9999999999999999!important;
  1694. display:flex;
  1695. align-items:center;
  1696. justify-content:center;
  1697. flex-direction:column;
  1698. }
  1699.  
  1700. /* Text */
  1701. .actual_notfound {
  1702. font-size:calc(22px + 0.25vw);
  1703. line-height:150%;
  1704. text-align:center;
  1705. color:{color:Text};
  1706. }
  1707.  
  1708. .wrapper_notfound, .actual_notfound{
  1709. display:flex;
  1710. align-items:center;
  1711. justify-content:center;
  1712. flex-direction:column;
  1713. }
  1714.  
  1715. /* Title */
  1716. .actual_notfound h1{
  1717. padding-bottom:4px;
  1718. font-weight:400;
  1719. text-align:center;
  1720. line-height:125%;
  1721. border-bottom:none;
  1722. {block:IfSerifFonts}
  1723. {block:IfBungeeTitleFont}
  1724. font-family:"{select:Bungee Title Font}", "{select:Title Font}", Georgia;
  1725. {/block:IfBungeeTitleFont}
  1726. font-size:4em;
  1727. {block:IfNotBungeeTitleFont}
  1728. font-family:"{select:Title Font}", Georgia;
  1729. {/block:IfNotBungeeTitleFont}
  1730. {/block:IfSerifFonts}
  1731. {block:IfNotSerifFonts}
  1732. font-family:"{select:Font}", Verdana;
  1733. font-size:3.5em;
  1734. {/block:IfNotSerifFonts}
  1735. margin-bottom:8px;
  1736. color:{color:Accent 2};
  1737. {block:IfGradients}
  1738. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2}, {color:Accent 3});
  1739. -webkit-background-clip: text;
  1740. -webkit-text-fill-color: transparent;
  1741. {/block:IfGradients}
  1742. }
  1743.  
  1744. /* Link */
  1745. .actual_notfound a {
  1746. text-decoration:none;
  1747. }
  1748.  
  1749. /* Transitions */
  1750. .actual_notfound a, .actual_notfound a:hover{
  1751. transition:0.5s;
  1752. -moz-transition:0.5s;
  1753. -o-transition:0.5s;
  1754. -webkit-transition:0.5s;
  1755. }
  1756.  
  1757. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  1758.  
  1759. /* LARGE SCREENS */
  1760. @media only screen and (min-width:800px){
  1761. #mb-footer, #mb-header{
  1762. display:none;
  1763. }
  1764. }
  1765.  
  1766. /* SMALL SCREENS */
  1767. @media only screen and (max-width:800px){
  1768. #sidebar, #custom-controls, #pagination{
  1769. display:none;
  1770. }
  1771.  
  1772. #posts{
  1773. width:100vw;
  1774. margin-left:0;
  1775. }
  1776.  
  1777. article{
  1778. width:80vw;
  1779. margin-left:calc(10vw - 1em);
  1780. }
  1781.  
  1782. .chat, .chatterbox{
  1783. width:80vw;
  1784. }
  1785.  
  1786. /* MOBILE FOOTER */
  1787. #mb-footer{
  1788. position:fixed;
  1789. width:100vw;
  1790. height:10vh;
  1791. margin-left:0;
  1792. margin-bottom:0;
  1793. left:0;
  1794. bottom:0;
  1795. border-radius:0;
  1796. border:none;
  1797. background-color:{color:Posts};
  1798. z-index:99999!important;
  1799. display:flex;
  1800. align-items:center;
  1801. justify-content:space-between;
  1802. }
  1803.  
  1804. /* Mobile Footer Navigation */
  1805. .mbf-nav{
  1806. height:10vh;
  1807. width:20vw;
  1808. background-color:inherit;
  1809. color:{color:Accent 1};
  1810. {block:IfGradients}
  1811. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2});
  1812. -webkit-background-clip: text;
  1813. -webkit-text-fill-color: transparent;
  1814. {/block:IfGradients}
  1815. display:flex;
  1816. align-items:center;
  1817. justify-content:center;
  1818. }
  1819.  
  1820. /* Mobile Footer Navigation | Icons */
  1821. .mbf-nav span{
  1822. font-size:1em;
  1823. }
  1824.  
  1825. .mbf-nav span.th-chevron-left,
  1826. .mbf-nav span.th-chevron-right{
  1827. font-size:calc(1em - 2px);
  1828. }
  1829.  
  1830. .mbf-nav span.th-code{
  1831. font-size:calc(1em + 2px);
  1832. }
  1833.  
  1834. /* Mobile Footer Navigation | Hover */
  1835. .mbf-nav:hover, .mbf-nav:focus{
  1836. color:{color:Accent 3};
  1837. {block:IfGradients}
  1838. background: -webkit-linear-gradient({color:Accent 2}, {color:Accent 3});
  1839. -webkit-background-clip: text;
  1840. -webkit-text-fill-color: transparent;
  1841. {/block:IfGradients}
  1842. cursor:pointer;
  1843. }
  1844.  
  1845. /* Transitions */
  1846. .mbf-nav, .mbf-nav:hover{
  1847. transition:0.5s;
  1848. -moz-transition:0.5s;
  1849. -o-transition:0.5s;
  1850. -webkit-transition:0.5s;
  1851. }
  1852.  
  1853. /* Mobile Footer Navigation Link */
  1854. a.mbf-link{
  1855. border-bottom:none;
  1856. box-shadow:none;
  1857. }
  1858.  
  1859. /* Dropdown Button */
  1860. .dropbtn {
  1861. font-size:1em;
  1862. cursor:pointer;
  1863. border:none;
  1864. }
  1865.  
  1866. /* Dropdown Button | Focus */
  1867. .dropbtn:focus{
  1868. outline:none;
  1869. border:none;
  1870. }
  1871.  
  1872. /* Dropdown Menu */
  1873. .dropdown {
  1874. position:relative;
  1875. display:inline-block;
  1876. }
  1877.  
  1878. .dropdown-content {
  1879. display:none;
  1880. position:absolute;
  1881. background-color:{color:Posts};
  1882. min-width:160px;
  1883. overflow:auto;
  1884. z-index:1;
  1885. bottom:100%;
  1886. right:100%;
  1887. font-family:"{select:Font}", Verdana;
  1888. font-weight:normal;
  1889. }
  1890.  
  1891. /* Drop Down Menu Link */
  1892. .dropdown-content a{
  1893. color:{color:Accent 1};
  1894. {block:IfGradients}
  1895. background: -webkit-linear-gradient({color:Accent 1}, {color:Accent 2});
  1896. -webkit-background-clip: text;
  1897. -webkit-text-fill-color: transparent;
  1898. {/block:IfGradients}
  1899. padding:12px 16px;
  1900. text-decoration:none;
  1901. display:block;
  1902. border:none;
  1903. box-shadow:none;
  1904. border-top:1px solid {color:Accent 2};
  1905. text-transform:{select:Sidebar Link Transform};
  1906. }
  1907.  
  1908. .dropdown-content a:first-child{
  1909. border-top:none;
  1910. }
  1911.  
  1912. /* Drop Down Menu Link | Hover */
  1913. .dropdown-content a:hover{
  1914. color:{color:Accent 3};
  1915. {block:IfGradients}
  1916. background: -webkit-linear-gradient({color:Accent 2}, {color:Accent 3});
  1917. -webkit-background-clip: text;
  1918. -webkit-text-fill-color: transparent;
  1919. {/block:IfGradients}
  1920. }
  1921.  
  1922. /* Transitions */
  1923. .dropdown-content a, .dropdown-content a:hover{
  1924. transition:0.5s;
  1925. -moz-transition:0.5s;
  1926. -o-transition:0.5s;
  1927. -webkit-transition:0.5s;
  1928. }
  1929.  
  1930. .show{
  1931. display:block;
  1932. }
  1933. }
  1934.  
  1935. /* ––– END RESPONSIVE LAYOUT | START CUSTOM CSS ––– */
  1936.  
  1937. /* CUSTOM CSS */
  1938. {CustomCSS}
  1939.  
  1940. </style>
  1941. </head>
  1942.  
  1943. <body>
  1944.  
  1945. <!-- SIDEBAR -->
  1946. <div id="sidebar">
  1947. <!-- »» BLOG TITLE -->
  1948. <div id="s-title">{Title}</div>
  1949. <!-- »» BLOG DESCRIPTION -->
  1950. <div id="s-desc">{Description}</div>
  1951. <!-- »» NAVIGATION -->
  1952. <div id="s-nav">
  1953. <!-- Home Link -->
  1954. <a href="/" class="s-link" title="refresh blog">
  1955. <span class="th th-home-o" aria-hidden="true"></span>
  1956. Index
  1957. </a>
  1958.  
  1959. <!-- Ask Link -->
  1960. {block:AskEnabled}
  1961. <a href="/ask" class="s-link" title="{AskLabel}">
  1962. <span class="th th-envelope-o" aria-hidden="true"></span>
  1963. {AskLabel}
  1964. </a>
  1965. {/block:AskEnabled}
  1966.  
  1967. <!-- Submissions Link -->
  1968. {block:SubmissionsEnabled}
  1969. <a href="/submit" class="s-link" title="{SubmitLabel}">
  1970. <span class="th th-paper-plane-o" aria-hidden="true"></span>
  1971. {SubmitLabel}
  1972. </a>
  1973. {/block:SubmissionsEnabled}
  1974.  
  1975. <!-- Archive Link -->
  1976. <a href="/archive" class="s-link" title="browse archive">
  1977. <span class="th th-box-2-o" aria-hidden="true"></span>
  1978. Archive
  1979. </a>
  1980.  
  1981. <!-- Custom Link 1 -->
  1982. {block:IfCustomLink1}
  1983. <a href="{text:Custom URL 1}" class="s-link" title="{text:Custom Link 1}">
  1984. <span class="th th-{text:Custom Icon 1}" aria-hidden="true"></span>
  1985. {text:Custom Link 1}
  1986. </a>
  1987. {/block:IfCustomLink1}
  1988.  
  1989. <!-- Custom Link 2 -->
  1990. {block:IfCustomLink2}
  1991. <a href="{text:Custom URL 2}" class="s-link" title="{text:Custom Link 2}">
  1992. <span class="th th-{text:Custom Icon 2}" aria-hidden="true"></span>
  1993. {text:Custom Link 2}
  1994. </a>
  1995. {/block:IfCustomLink2}
  1996.  
  1997. <!-- Custom Link 3 -->
  1998. {block:IfCustomLink3}
  1999. <a href="{text:Custom URL 3}" class="s-link" title="{text:Custom Link 3}">
  2000. <span class="th th-{text:Custom Icon 3}" aria-hidden="true"></span>
  2001. {text:Custom Link 3}
  2002. </a>
  2003. {/block:IfCustomLink3}
  2004.  
  2005. <!-- Custom Link 4 -->
  2006. {block:IfCustomLink4}
  2007. <a href="{text:Custom URL 4}" class="s-link" title="{text:Custom Link 4}">
  2008. <span class="th th-{text:Custom Icon 4}" aria-hidden="true"></span>
  2009. {text:Custom Link 4}
  2010. </a>
  2011. {/block:IfCustomLink4}
  2012.  
  2013. <!-- Custom Link 5 -->
  2014. {block:IfCustomLink5}
  2015. <a href="{text:Custom URL 5}" class="s-link" title="{text:Custom Link 5}">
  2016. <span class="th th-{text:Custom Icon 5}" aria-hidden="true"></span>
  2017. {text:Custom Link 5}
  2018. </a>
  2019. {/block:IfCustomLink5}
  2020.  
  2021. <!-- Open Search -->
  2022. <button class="openBtn s-link" onclick="openSearch()">
  2023. <span class="th th-loupe-o" aria-hidden="true"></span>
  2024. Search
  2025. </button>
  2026.  
  2027. <!-- Credit – Don't delete! You'll burn in hell. -->
  2028. <a href="https://silbrigthemes.tumblr.com/" class="s-link" title="theme by silbrigthemes">
  2029. <span class="th th-code" aria-hidden="true"></span>
  2030. Credit
  2031. </a>
  2032. </div>
  2033. <!-- // end navigation -->
  2034. </div>
  2035. <!-- // end sidebar -->
  2036.  
  2037. <!-- POST CONTAINER -->
  2038. <div id="posts">
  2039.  
  2040. <!-- MOBILE HEADER -->
  2041. <article id="mb-header">
  2042. <div class="title">{Title}</div>
  2043. <p>{Description}</p>
  2044. </article>
  2045.  
  2046. <!-- POSTS -->
  2047. {block:Posts}
  2048. <article>
  2049.  
  2050. <!-- TEXT POSTS -->
  2051. {block:Text}
  2052. {block:Body}
  2053. {block:NotReblog}
  2054. {block:Title}
  2055. <div class="title">{Title}</div>
  2056. {/block:Title}
  2057. {block:Submission}
  2058. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2059. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2060. {Submitter}
  2061. </a>
  2062. {/block:Submission}
  2063. <div class="text">{Body}</div>
  2064. {/block:NotReblog}
  2065. {block:RebloggedFrom}
  2066. {block:Reblogs}
  2067. {block:Title}
  2068. <div class="title">{Title}</div>
  2069. {/block:Title}
  2070. <div class="username">
  2071. <div class="usericon">
  2072. <img class="cimg" src="{PortraitURL-64}">
  2073. </div>
  2074. {block:HasPermalink}
  2075. <a target="_blank" class="userlink" href="{Permalink}">
  2076. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2077. {Username}
  2078. </div>
  2079. </a>
  2080. {/block:HasPermalink}
  2081. {block:HasNoPermalink}
  2082. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2083. {Username}
  2084. </span>
  2085. {/block:HasNoPermalink}
  2086. </div>
  2087. <div class="text">{Body}</div>
  2088. {/block:Reblogs}
  2089. {/block:RebloggedFrom}
  2090. {/block:Body}
  2091. {/block:Text}
  2092.  
  2093. <!-- /*/*/*/ -->
  2094.  
  2095. <!-- QUESTION POSTS -->
  2096. {block:Answer}
  2097. <div class="frage">
  2098. <div class="question-username">
  2099. {Asker} asked:
  2100. </div>
  2101. {Question}
  2102. </div>
  2103.  
  2104. {block:Answerer}
  2105. <div class="antwort">
  2106. <div class="answer-username">
  2107. {Answerer} answered:
  2108. </div>
  2109. <div class="beantwortet">{Answer}</div>
  2110. </div>
  2111. {/block:Answerer}
  2112. {block:NotReblog}
  2113. <div>{Replies}</div>
  2114. {/block:NotReblog}
  2115. {block:RebloggedFrom}
  2116. {block:Reblogs}
  2117. <div class="username">
  2118. <div class="usericon">
  2119. <img class="cimg" src="{PortraitURL-64}">
  2120. </div>
  2121. {block:HasPermalink}
  2122. <a target="_blank" class="userlink" href="{Permalink}">
  2123. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2124. {Username}
  2125. </div>
  2126. </a>
  2127. {/block:HasPermalink}
  2128. {block:HasNoPermalink}
  2129. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2130. {Username}
  2131. </span>
  2132. {/block:HasNoPermalink}
  2133. </div>
  2134. <div class="text">{Body}</div>
  2135. {/block:Reblogs}
  2136. {/block:RebloggedFrom}
  2137. {/block:Answer}
  2138.  
  2139. <!-- /*/*/*/ -->
  2140.  
  2141. <!-- QUOTE POSTS -->
  2142. {block:Quote}
  2143. <div class="quoted">
  2144. {Quote}
  2145. </div>
  2146. {block:Source}
  2147. <div class="quote-source">
  2148. – {Source}
  2149. </div>
  2150. {/block:Source}
  2151. {/block:Quote}
  2152.  
  2153. <!-- /*/*/*/ -->
  2154.  
  2155. <!-- LINK POSTS -->
  2156. {block:Link}
  2157. {block:Thumbnail}
  2158. <img src="{Thumbnail-HighRes}" class="link-image">
  2159. {/block:Thumbnail}
  2160. <div class="link-posts">
  2161. <a href="{URL}">
  2162. <div class="link-cont">
  2163. <div class="link-title">
  2164. {Name}
  2165. </div>
  2166. {block:Excerpt}
  2167. <div class="link-excerpt">{Excerpt}</div>
  2168. {/block:Excerpt}
  2169. {block:Author}
  2170. <div class="link-author">by {Author}</div>
  2171. {/block:Author}
  2172. </div>
  2173. </a>
  2174. </div>
  2175. {block:Description}
  2176. {block:IfShowCaptions}
  2177. {block:NotReblog}
  2178. {block:Submission}
  2179. <a class="userlinklink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2180. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2181. {Submitter}
  2182. </a>
  2183. {/block:Submission}
  2184. {Description}
  2185. {/block:NotReblog}
  2186. {block:RebloggedFrom}
  2187. {block:Reblogs}
  2188. <div class="username">
  2189. <div class="usericon">
  2190. <img class="cimg" src="{PortraitURL-64}">
  2191. </div>
  2192. {block:HasPermalink}
  2193. <a target="_blank" class="userlink" href="{Permalink}">
  2194. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2195. {Username}
  2196. </div>
  2197. </a>
  2198. {/block:HasPermalink}
  2199. {block:HasNoPermalink}
  2200. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2201. {Username}
  2202. </span>
  2203. {/block:HasNoPermalink}
  2204. </div>
  2205. <div class="text">{Body}</div>
  2206. {/block:Reblogs}
  2207. {/block:RebloggedFrom}
  2208. {/block:IfShowCaptions}
  2209. {block:IfNotShowCaptions}
  2210. {block:PermalinkPage}
  2211. {block:NotReblog}
  2212. {block:Submission}
  2213. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2214. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2215. {Submitter}
  2216. </a>
  2217. {/block:Submission}
  2218. {Description}
  2219. {/block:NotReblog}
  2220. {block:RebloggedFrom}
  2221. {block:Reblogs}
  2222. <div class="username">
  2223. <div class="usericon">
  2224. <img class="cimg" src="{PortraitURL-64}">
  2225. </div>
  2226. {block:HasPermalink}
  2227. <a target="_blank" class="userlink" href="{Permalink}">
  2228. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2229. {Username}
  2230. </div>
  2231. </a>
  2232. {/block:HasPermalink}
  2233. {block:HasNoPermalink}
  2234. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2235. {Username}
  2236. </span>
  2237. {/block:HasNoPermalink}
  2238. </div>
  2239. <div class="text">{Body}</div>
  2240. {/block:Reblogs}
  2241. {/block:RebloggedFrom}
  2242. {/block:PermalinkPage}
  2243. {/block:IfNotShowCaptions}
  2244. {/block:Description}
  2245. {/block:Link}
  2246.  
  2247. <!-- /*/*/*/ -->
  2248.  
  2249. <!-- CHAT POSTS -->
  2250. <div class="chatterbox">
  2251. {block:Chat}
  2252. <div class="chat clear">
  2253. {block:Title}
  2254. <div class="title">{Title}</div>
  2255. {/block:Title}
  2256. {block:Lines}
  2257. {block:Label}
  2258. <div class="label_{alt}">
  2259. {Label}<br>
  2260. </div>
  2261. {/block:Label}
  2262. <div class="line_{alt} line">
  2263. {Line}<br>
  2264. </div>
  2265. {/block:Lines}
  2266. </div>
  2267. {/block:Chat}
  2268. </div>
  2269.  
  2270. <!-- /*/*/*/ -->
  2271.  
  2272. <!-- PHOTO POSTS -->
  2273. {block:Photo}
  2274. {LinkOpenTag}
  2275. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false" title="click to open lightbox">
  2276. <div class="photo">
  2277. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  2278. </div>
  2279. </a>
  2280. {LinkCloseTag}
  2281. {block:Caption}
  2282. {block:IfShowCaptions}
  2283. {block:NotReblog}
  2284. {block:Submission}
  2285. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2286. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2287. {Submitter}
  2288. </a>
  2289. {/block:Submission}
  2290. {Caption}
  2291. {/block:NotReblog}
  2292. {block:RebloggedFrom}
  2293. {block:Reblogs}
  2294. <div class="username">
  2295. <div class="usericon">
  2296. <img class="cimg" src="{PortraitURL-64}">
  2297. </div>
  2298. {block:HasPermalink}
  2299. <a target="_blank" class="userlink" href="{Permalink}">
  2300. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2301. {Username}
  2302. </div>
  2303. </a>
  2304. {/block:HasPermalink}
  2305. {block:HasNoPermalink}
  2306. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2307. {Username}
  2308. </span>
  2309. {/block:HasNoPermalink}
  2310. </div>
  2311. <div class="text">{Body}</div>
  2312. {/block:Reblogs}
  2313. {/block:RebloggedFrom}
  2314. {/block:IfShowCaptions}
  2315. <!-- Captions Hidden on Index -->
  2316. {block:IfNotShowCaptions}
  2317. {block:PermalinkPage}
  2318. {block:NotReblog}
  2319. {block:Submission}
  2320. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2321. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2322. {Submitter}
  2323. </a>
  2324. {/block:Submission}
  2325. {Caption}
  2326. {/block:NotReblog}
  2327. {block:RebloggedFrom}
  2328. {block:Reblogs}
  2329. <div class="username">
  2330. <div class="usericon">
  2331. <img class="cimg" src="{PortraitURL-64}">
  2332. </div>
  2333. {block:HasPermalink}
  2334. <a target="_blank" class="userlink" href="{Permalink}">
  2335. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2336. {Username}
  2337. </div>
  2338. </a>
  2339. {/block:HasPermalink}
  2340. {block:HasNoPermalink}
  2341. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2342. {Username}
  2343. </span>
  2344. {/block:HasNoPermalink}
  2345. </div>
  2346. <div class="text">{Body}</div>
  2347. {/block:Reblogs}
  2348. {/block:RebloggedFrom}
  2349. {/block:PermalinkPage}
  2350. {/block:IfNotShowCaptions}
  2351. {/block:Caption}
  2352. {/block:Photo} <!-- / end photos -->
  2353.  
  2354. <!-- /*/*/*/ -->
  2355.  
  2356. <!-- PANORAMA POSTS -->
  2357. {block:Panorama}
  2358. {LinkOpenTag}
  2359. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false" title="click to open lightbox">
  2360. <div class="panorama">
  2361. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  2362. </div>
  2363. </a>
  2364. {LinkCloseTag}
  2365. {block:Caption}
  2366. {block:IfShowCaptions}
  2367. {block:NotReblog}
  2368. {block:Submission}
  2369. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2370. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2371. {Submitter}
  2372. </a>
  2373. {/block:Submission}
  2374. {Caption}
  2375. {/block:NotReblog}
  2376. {block:RebloggedFrom}
  2377. {block:Reblogs}
  2378. <div class="username">
  2379. <div class="usericon">
  2380. <img class="cimg" src="{PortraitURL-64}">
  2381. </div>
  2382. {block:HasPermalink}
  2383. <a target="_blank" class="userlink" href="{Permalink}">
  2384. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2385. {Username}
  2386. </div>
  2387. </a>
  2388. {/block:HasPermalink}
  2389. {block:HasNoPermalink}
  2390. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2391. {Username}
  2392. </span>
  2393. {/block:HasNoPermalink}
  2394. </div>
  2395. <div class="text">{Body}</div>
  2396. {/block:Reblogs}
  2397. {/block:RebloggedFrom}
  2398. {/block:IfShowCaptions}
  2399. <!-- Captions Hidden on Index -->
  2400. {block:IfNotShowCaptions}
  2401. {block:PermalinkPage}
  2402. {block:NotReblog}
  2403. {block:Submission}
  2404. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2405. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2406. {Submitter}
  2407. </a>
  2408. {/block:Submission}
  2409. {Caption}
  2410. {/block:NotReblog}
  2411. {block:RebloggedFrom}
  2412. {block:Reblogs}
  2413. <div class="username">
  2414. <div class="usericon">
  2415. <img class="cimg" src="{PortraitURL-64}">
  2416. </div>
  2417. {block:HasPermalink}
  2418. <a target="_blank" class="userlink" href="{Permalink}">
  2419. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2420. {Username}
  2421. </div>
  2422. </a>
  2423. {/block:HasPermalink}
  2424. {block:HasNoPermalink}
  2425. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2426. {Username}
  2427. </span>
  2428. {/block:HasNoPermalink}
  2429. </div>
  2430. <div class="text">{Body}</div>
  2431. {/block:Reblogs}
  2432. {/block:RebloggedFrom}
  2433. {/block:PermalinkPage}
  2434. {/block:IfNotShowCaptions}
  2435. {/block:Caption}
  2436. {/block:Panorama} <!-- / end panorama -->
  2437.  
  2438. <!-- /*/*/*/ -->
  2439.  
  2440. <!-- PHOTOSETS -->
  2441. {block:Photoset}
  2442. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  2443. {block:Photos}
  2444. <div class="photoset-image" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)" title="click to open lightbox">
  2445. <img src="{PhotoURL-HighRes}"/>
  2446. </div>
  2447. {/block:Photos}
  2448. </div>
  2449. {block:Caption}
  2450. {block:IfShowCaptions}
  2451. {block:NotReblog}
  2452. {block:Submission}
  2453. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2454. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2455. {Submitter}
  2456. </a>
  2457. {/block:Submission}
  2458. {Caption}
  2459. {/block:NotReblog}
  2460. {block:RebloggedFrom}
  2461. {block:Reblogs}
  2462. <div class="username">
  2463. <div class="usericon">
  2464. <img class="cimg" src="{PortraitURL-64}">
  2465. </div>
  2466. {block:HasPermalink}
  2467. <a target="_blank" class="userlink" href="{Permalink}">
  2468. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2469. {Username}
  2470. </div>
  2471. </a>
  2472. {/block:HasPermalink}
  2473. {block:HasNoPermalink}
  2474. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2475. {Username}
  2476. </span>
  2477. {/block:HasNoPermalink}
  2478. </div>
  2479. <div class="text">{Body}</div>
  2480. {/block:Reblogs}
  2481. {/block:RebloggedFrom}
  2482. {/block:IfShowCaptions}
  2483. <!-- Captions Hidden on Index -->
  2484. {block:IfNotShowCaptions}
  2485. {block:PermalinkPage}
  2486. {block:NotReblog}
  2487. {block:Submission}
  2488. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2489. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2490. {Submitter}
  2491. </a>
  2492. {/block:Submission}
  2493. {Caption}
  2494. {/block:NotReblog}
  2495. {block:RebloggedFrom}
  2496. {block:Reblogs}
  2497. <div class="username">
  2498. <div class="usericon">
  2499. <img class="cimg" src="{PortraitURL-64}">
  2500. </div>
  2501. {block:HasPermalink}
  2502. <a target="_blank" class="userlink" href="{Permalink}">
  2503. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2504. {Username}
  2505. </div>
  2506. </a>
  2507. {/block:HasPermalink}
  2508. {block:HasNoPermalink}
  2509. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2510. {Username}
  2511. </span>
  2512. {/block:HasNoPermalink}
  2513. </div>
  2514. <div class="text">{Body}</div>
  2515. {/block:Reblogs}
  2516. {/block:RebloggedFrom}
  2517. {/block:PermalinkPage}
  2518. {/block:IfNotShowCaptions}
  2519. {/block:Caption}
  2520. {/block:Photoset} <!-- / end photosets -->
  2521.  
  2522.  
  2523. <!-- /*/*/*/ -->
  2524.  
  2525. <!-- AUDIO POSTS -->
  2526. {block:Audio}
  2527. {block:AudioEmbed}
  2528. <div class="audio">
  2529. {AudioEmbed}
  2530. </div>
  2531. {/block:AudioEmbed}
  2532. {block:Caption}
  2533. {block:IfShowCaptions}
  2534. {block:NotReblog}
  2535. {block:Submission}
  2536. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2537. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2538. {Submitter}
  2539. </a>
  2540. {/block:Submission}
  2541. {Caption}
  2542. {/block:NotReblog}
  2543. {block:RebloggedFrom}
  2544. {block:Reblogs}
  2545. <div class="username">
  2546. <div class="usericon">
  2547. <img class="cimg" src="{PortraitURL-64}">
  2548. </div>
  2549. {block:HasPermalink}
  2550. <a target="_blank" class="userlink" href="{Permalink}">
  2551. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2552. {Username}
  2553. </div>
  2554. </a>
  2555. {/block:HasPermalink}
  2556. {block:HasNoPermalink}
  2557. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2558. {Username}
  2559. </span>
  2560. {/block:HasNoPermalink}
  2561. </div>
  2562. <div class="text">{Body}</div>
  2563. {/block:Reblogs}
  2564. {/block:RebloggedFrom}
  2565. {/block:IfShowCaptions}
  2566. <!-- Captions Hidden on Index -->
  2567. {block:IfNotShowCaptions}
  2568. {block:PermalinkPage}
  2569. {block:NotReblog}
  2570. {block:Submission}
  2571. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2572. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2573. {Submitter}
  2574. </a>
  2575. {/block:Submission}
  2576. {Caption}
  2577. {/block:NotReblog}
  2578. {block:RebloggedFrom}
  2579. {block:Reblogs}
  2580. <div class="username">
  2581. <div class="usericon">
  2582. <img class="cimg" src="{PortraitURL-64}">
  2583. </div>
  2584. {block:HasPermalink}
  2585. <a target="_blank" class="userlink" href="{Permalink}">
  2586. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2587. {Username}
  2588. </div>
  2589. </a>
  2590. {/block:HasPermalink}
  2591. {block:HasNoPermalink}
  2592. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2593. {Username}
  2594. </span>
  2595. {/block:HasNoPermalink}
  2596. </div>
  2597. <div class="text">{Body}</div>
  2598. {/block:Reblogs}
  2599. {/block:RebloggedFrom}
  2600. {/block:PermalinkPage}
  2601. {/block:IfNotShowCaptions} <!-- / end -->
  2602. {/block:Caption}
  2603. {/block:Audio}
  2604.  
  2605. <!-- /*/*/*/ -->
  2606.  
  2607. <!-- VIDEO POSTS -->
  2608. {block:Video}
  2609. <div class="video">
  2610. {Video-500}
  2611. </div>
  2612. {block:Caption}
  2613. {block:IfShowCaptions}
  2614. {block:NotReblog}
  2615. {block:Submission}
  2616. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2617. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2618. {Submitter}
  2619. </a>
  2620. {/block:Submission}
  2621. {Caption}
  2622. {/block:NotReblog}
  2623. {block:RebloggedFrom}
  2624. {block:Reblogs}
  2625. <div class="username">
  2626. <div class="usericon">
  2627. <img class="cimg" src="{PortraitURL-64}">
  2628. </div>
  2629. {block:HasPermalink}
  2630. <a target="_blank" class="userlink" href="{Permalink}">
  2631. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2632. {Username}
  2633. </div>
  2634. </a>
  2635. {/block:HasPermalink}
  2636. {block:HasNoPermalink}
  2637. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2638. {Username}
  2639. </span>
  2640. {/block:HasNoPermalink}
  2641. </div>
  2642. <div class="text">{Body}</div>
  2643. {/block:Reblogs}
  2644. {/block:RebloggedFrom}
  2645. {/block:IfShowCaptions}
  2646. <!-- Captions Hidden on Index -->
  2647. {block:IfNotShowCaptions}
  2648. {block:PermalinkPage}
  2649. {block:NotReblog}
  2650. {block:Submission}
  2651. <a class="userlink" href="{SubmitterURL}" title="submitted by {Submitter}">
  2652. <img class="cimg" src="{SubmitterPortraitURL-64}" alt="{Submitter}'s Icon">
  2653. {Submitter}
  2654. </a>
  2655. {/block:Submission}
  2656. {Caption}
  2657. {/block:NotReblog}
  2658. {block:RebloggedFrom}
  2659. {block:Reblogs}
  2660. <div class="username">
  2661. <div class="usericon">
  2662. <img class="cimg" src="{PortraitURL-64}">
  2663. </div>
  2664. {block:HasPermalink}
  2665. <a target="_blank" class="userlink" href="{Permalink}">
  2666. <div class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2667. {Username}
  2668. </div>
  2669. </a>
  2670. {/block:HasPermalink}
  2671. {block:HasNoPermalink}
  2672. <span class="user {block:IsDeactivated} inactive deactivated {/block:IsDeactivated}">
  2673. {Username}
  2674. </span>
  2675. {/block:HasNoPermalink}
  2676. </div>
  2677. <div class="text">{Body}</div>
  2678. {/block:Reblogs}
  2679. {/block:RebloggedFrom}
  2680. {/block:PermalinkPage}
  2681. {/block:IfNotShowCaptions} <!-- / end -->
  2682. {/block:Caption}
  2683. {/block:Video}
  2684.  
  2685. <!-- /*/*/*/ -->
  2686.  
  2687. <!-- POST FOOTER -->
  2688. <div class="post-information">
  2689.  
  2690. <!-- TIME STAMP -->
  2691. {block:Date}
  2692. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  2693. <span class="th th-clock-o" aria-hidden="true"></span> {TimeAgo}
  2694. </a>
  2695. {/block:Date}
  2696.  
  2697. <!-- NOTE COUNT -->
  2698. {block:NoteCount}
  2699. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  2700. <span class="th th-information-o" aria-hidden="true"></span> {NoteCountWithLabel}
  2701. </a>
  2702. {/block:NoteCount}
  2703.  
  2704. <!-- VIA -->
  2705. {block:RebloggedFrom}
  2706. <a class="specs" href="{ReblogParentURL}" title="via {ReblogParentName}">
  2707. <span class="th th-paper-plane-o" aria-hidden="true"></span> via {ReblogParentName}
  2708. </a>
  2709. {/block:RebloggedFrom}
  2710.  
  2711. <!-- POST SOURCE -->
  2712. {block:ContentSource}
  2713. <a class="specs" href="{SourceURL}" title="source">
  2714. <span class="th th-location-4-o" aria-hidden="true"></span> {SourceTitle}
  2715. </a>
  2716. {/block:ContentSource}
  2717.  
  2718. <!-- REBLOG BUTTON -->
  2719. <a class="specs" href="{ReblogURL}" title="reblog this post">
  2720. <span class="th th-reblog" aria-hidden="true"></span> reblog
  2721. </a>
  2722.  
  2723. <!-- LIKE BUTTON -->
  2724. <a class="liked specs" href="#" title="like this post">
  2725. {LikeButton}
  2726. </a>
  2727.  
  2728. <!-- TAGS -->
  2729. {block:HasTags}
  2730. {block:IfShowTags}
  2731. {block:Tags}
  2732. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  2733. <span class="th th-folder-3-o" aria-hidden="true"></span> {Tag}
  2734. </a>
  2735. {/block:Tags}
  2736. {block:IfShowTags}
  2737. {block:IfNotShowTags}
  2738. {block:PermalinkPage}
  2739. {block:Tags}
  2740. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  2741. <span class="th th-folder-3-o" aria-hidden="true"></span>
  2742. {Tag}
  2743. </a>
  2744. {/block:Tags}
  2745. {/block:PermalinkPage}
  2746. {/block:IfNotShowTags}
  2747. {/block:HasTags}
  2748. </div><!-- // end post footer -->
  2749.  
  2750. <!-- Post Notes -->
  2751. {block:PermalinkPage}
  2752. {block:NoteCount}
  2753. {block:PostNotes}
  2754. {PostNotes}
  2755. {/block:PostNotes}
  2756. {/block:NoteCount}
  2757. {/block:PermalinkPage}
  2758.  
  2759. </article> <!-- // end posts -->
  2760. {/block:Posts}
  2761. </div>
  2762. <!-- // end post container -->
  2763.  
  2764. <!-- MOBILE FOOTER -->
  2765. <div id="mb-footer">
  2766. <!-- Previous Page -->
  2767. {block:Pagination}
  2768. {block:PreviousPage}
  2769. <a href="{PreviousPage}" title="previous page" class="mbf-link">
  2770. <div class="mbf-nav">
  2771. <span class="th th-chevron-left" aria-hidden="true"></span>
  2772. </div>
  2773. </a>
  2774. {/block:PreviousPage}
  2775. {/block:Pagination}
  2776.  
  2777. <!-- Theme Credit -->
  2778. <!-- Don't touch! -->
  2779. <a href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes" class="mbf-link">
  2780. <div class="mbf-nav">
  2781. <span class="th th-code" aria-hidden="true"></span>
  2782. </div>
  2783. </a>
  2784.  
  2785. <!-- Index -->
  2786. <a href="/" title="index" class="mbf-link">
  2787. <div class="mbf-nav">
  2788. <span class="th th-home-o" aria-hidden="true"></span>
  2789. </div>
  2790. </a>
  2791.  
  2792. <!-- Navigation -->
  2793. <div class="dropdown">
  2794. <button onclick="myFunction()" class="dropbtn mbf-nav" title="click to show links">
  2795. <span class="th th-dial-o" aria-hidden="true"></span>
  2796. </button>
  2797. <div id="myDropdown" class="dropdown-content">
  2798. <!-- Ask Link -->
  2799. {block:AskEnabled}
  2800. <a href="/ask" title="{AskLabel}">{AskLabel}</a>
  2801. {/block:AskEnabled}
  2802.  
  2803. <!-- Submissions Link -->
  2804. {block:SubmissionsEnabled}
  2805. <a href="/submit" title="{SubmitLabel}">
  2806. {SubmitLabel}
  2807. </a>
  2808. {/block:SubmissionsEnabled}
  2809.  
  2810. <!-- Archive Link -->
  2811. <a href="/archive" title="browse archive">
  2812. Archive
  2813. </a>
  2814.  
  2815. <!-- 1st Custom Link -->
  2816. {block:IfCustomLink1}
  2817. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}">
  2818. {text:Custom Link 1}
  2819. </a>
  2820. {/block:IfCustomLink1}
  2821.  
  2822. <!-- 2nd Custom Link -->
  2823. {block:IfCustomLink2}
  2824. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}">
  2825. {text:Custom Link 2}
  2826. </a>
  2827. {/block:IfCustomLink2}
  2828.  
  2829. <!-- 3rd Custom Link -->
  2830. {block:IfCustomLink3}
  2831. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}">
  2832. {text:Custom Link 3}
  2833. </a>
  2834. {/block:IfCustomLink3}
  2835.  
  2836. <!-- 4th Custom Link -->
  2837. {block:IfCustomLink4}
  2838. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}">
  2839. {text:Custom Link 4}
  2840. </a>
  2841. {/block:IfCustomLink4}
  2842.  
  2843. <!-- 5th Custom Link -->
  2844. {block:IfCustomLink5}
  2845. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}">
  2846. {text:Custom Link 5}
  2847. </a>
  2848. {/block:IfCustomLink5}
  2849.  
  2850. <!-- Dashboard Link -->
  2851. <a href="https://www.tumblr.com/dashboard" title="return to dashboard">
  2852. Tumblr Dashboard
  2853. </a>
  2854.  
  2855. <!-- Follow -->
  2856. <!-- Takes people to a page so that they can follow you. -->
  2857. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}">
  2858. Follow Me
  2859. </a>
  2860. </div>
  2861. </div> <!-- // end navigation panel -->
  2862.  
  2863. <!-- Next Page -->
  2864. {block:Pagination}
  2865. {block:NextPage}
  2866. <a href="{NextPage}" title="next page" class="mbf-link">
  2867. <div class="mbf-nav">
  2868. <span class="th th-chevron-right" aria-hidden="true"></span>
  2869. </div>
  2870. </a>
  2871. {/block:NextPage}
  2872. {/block:Pagination}
  2873. </div> <!-- // end mobile footer -->
  2874.  
  2875. <!-- CUSTOM CONTROLS -->
  2876. {block:IfCustomControls}
  2877. <div id="custom-controls">
  2878. <!-- Dashboard Link -->
  2879. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  2880. <div class="cont">
  2881. <span class="th th-tumblr-o" aria-hidden="true"></span>
  2882. </div>
  2883. </a>
  2884.  
  2885. <!-- Message -->
  2886. <!-- Takes people to dashboard to send you a message. -->
  2887. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  2888. <div class="cont">
  2889. <span class="th th-bubble-heart-o" aria-hidden="true"></span>
  2890. </div>
  2891. </a>
  2892.  
  2893. <!-- Customize -->
  2894. <!-- Takes you, the blog owner, to the customization. -->
  2895. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="conlink">
  2896. <div class="cont">
  2897. <span class="th th-pencil-o" aria-hidden="true"></span>
  2898. </div>
  2899. </a>
  2900.  
  2901. <!-- Follow -->
  2902. <!-- Takes people to a page so that they can follow you. -->
  2903. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  2904. <div class="cont">
  2905. <span class="th th-plus-1-o" aria-hidden="true"></span>
  2906. </div>
  2907. </a>
  2908.  
  2909. <!-- Credit – Don't delete! You'll burn in hell. -->
  2910. <a href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes" class="conlink">
  2911. <div class="cont">
  2912. <span class="th th-code" aria-hidden="true"></span>
  2913. </div>
  2914. </a>
  2915. </div>
  2916. {/block:IfCustomControls}
  2917. <!-- // end custom controls -->
  2918.  
  2919. <!-- PAGINATION -->
  2920. {block:Pagination}
  2921. <div id="pagination">
  2922.  
  2923. <!-- Previous Page -->
  2924. {block:PreviousPage}
  2925. <a href="{PreviousPage}" class="conlink" title="previous page">
  2926. <div class="cont">
  2927. <span class="th th-chevron-left" aria-hidden="true"></span>
  2928. </div>
  2929. </a>
  2930. {/block:PreviousPage}
  2931.  
  2932. <!-- Jump Pagination -->
  2933. {block:JumpPagination length="3"}
  2934. <!-- Current Page -->
  2935. {block:CurrentPage}
  2936. <div class="cont" title="you're on page {PageNumber}">
  2937. {PageNumber}
  2938. </div>
  2939. {/block:CurrentPage}
  2940.  
  2941. <!-- Jump Page -->
  2942. {block:JumpPage}
  2943. <a href="{URL}" class="conlink" title="jump to page {PageNumber}">
  2944. <div class="cont">{PageNumber}</div>
  2945. </a>
  2946. {/block:JumpPage}
  2947. {/block:JumpPagination}
  2948.  
  2949. <!-- Next Page -->
  2950. {block:NextPage}
  2951. <a href="{NextPage}" class="conlink" title="next page">
  2952. <div class="cont">
  2953. <span class="th th-chevron-right" aria-hidden="true"></span>
  2954. </div>
  2955. </a>
  2956. {/block:NextPage}
  2957.  
  2958. </div>
  2959. {/block:Pagination}
  2960. <!-- // end pagination -->
  2961.  
  2962. <!-- PAGE NOT FOUND -->
  2963. <!-- Tutorial by fukuo. -->
  2964. <div class="wrapper_notfound">
  2965. <div class="actual_notfound">
  2966. <h1>{text:Not Found Title}</h1>
  2967. <p>{text:Not Found Text}</br>
  2968. Please go <a href="/" title="back to blog">here</a> to return to the blog.</p>
  2969. </div>
  2970. </div>
  2971.  
  2972. <script>
  2973. $(document).ready(function() {
  2974. if ($('p:contains("The URL you requested could not be found.")').html()) {
  2975. $(".wrapper_notfound").css( "visibility", "visible" );
  2976. $(".article_position").remove();
  2977. $('title').prepend( "Not Found | " ); }
  2978. });
  2979. </script>
  2980.  
  2981. <!-- FULLSCREEN SEARCH -->
  2982. <!-- Tutorial by w3schools. -->
  2983. <script>
  2984. function openSearch() {
  2985. document.getElementById("myOverlay").style.display = "block";
  2986. }
  2987.  
  2988. function closeSearch() {
  2989. document.getElementById("myOverlay").style.display = "none";
  2990. }
  2991. </script>
  2992.  
  2993. <div id="myOverlay" class="overlay">
  2994. <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  2995. <div class="overlay-content">
  2996. <form action="/search" method="get" class="search">
  2997. <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search Blog">
  2998. <button type="submit">
  2999. <span class="th th-loupe-o" aria-hidden="true"></span>
  3000. </button>
  3001. </form>
  3002. </div>
  3003. </div>
  3004.  
  3005. <!-- CLICKABLE DROPDOWN MENU -->
  3006. <!-- Tutorial by w3schools. -->
  3007. <script>
  3008. /* When the user clicks on the button,
  3009. toggle between hiding and showing the dropdown content */
  3010. function myFunction() {
  3011. document.getElementById("myDropdown").classList.toggle("show");
  3012. }
  3013.  
  3014. // Close the dropdown if the user clicks outside of it
  3015. window.onclick = function(event) {
  3016. if (!event.target.matches('.dropbtn')) {
  3017. var dropdowns = document.getElementsByClassName("dropdown-content");
  3018. var i;
  3019. for (i = 0; i < dropdowns.length; i++) {
  3020. var openDropdown = dropdowns[i];
  3021. if (openDropdown.classList.contains('show')) {
  3022. openDropdown.classList.remove('show');
  3023. }
  3024. }
  3025. }
  3026. }
  3027. </script>
  3028.  
  3029. <!-- CSS PHOTOSETS SCRIPT -->
  3030. <!-- by annasthms and espoirthemes -->
  3031. <script>
  3032. function gatherData(images, arr) {
  3033. for (let i = 0; i < images.length; i++) {
  3034. let currentData = {
  3035. "width": images[i].getAttribute('data-width'),
  3036. "height": images[i].getAttribute('data-height'),
  3037. "low_res": images[i].getAttribute('data-lowres'),
  3038. "high_res": images[i].getAttribute('data-highres')
  3039. };
  3040. arr.push(currentData);
  3041. }
  3042. }
  3043. function getIndex(elem) {
  3044. let i = 0;
  3045. while( (elem = elem.previousElementSibling) != null ) i++;
  3046. return i;
  3047. }
  3048. function lightbox(elem) {
  3049. let currentPhotoset = elem.parentNode;
  3050. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  3051. let data = [];
  3052. gatherData(photosetPhotos, data);
  3053. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  3054. }
  3055. </script>
  3056.  
  3057. <!-- RESPONSIVE VIDEOS -->
  3058. <!-- Responsive videos script, by @nouvae. -->
  3059. <script>
  3060. $(document).ready(function() {
  3061. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  3062. });
  3063. </script>
  3064.  
  3065. <script>
  3066. function flexFrame() {
  3067. $(".caption").each(function() {
  3068. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  3069. flexibleFrames($(".capframe"));
  3070. });
  3071. flexibleFrames($(".video"));
  3072. }
  3073.  
  3074. $(document).ready(flexFrame);
  3075. </script>
  3076.  
  3077. <!-- NPF PHOTOSETS -->
  3078. <!-- NPF photoset script, by glenthemes. -->
  3079. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  3080. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  3081.  
  3082. <script>
  3083. npfPhotosets("article", npfOptions);
  3084. // article is your posts selector
  3085. </script>
  3086.  
  3087. <!-- TOOLTIPS -->
  3088. <!-- Tippy.js tooltips, by atomiks. -->
  3089. <script src="https://unpkg.com/popper.js@1"></script>
  3090. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  3091. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  3092.  
  3093. <script>
  3094. tippy('a[title], .photoset-image, .dropbtn, .cont[title]', {
  3095. theme: 'feuer',
  3096. zIndex: 9999999999,
  3097. arrow: false,
  3098. maxWidth: 300,
  3099.  
  3100. content(reference) {
  3101. const title = reference.getAttribute('title');
  3102. reference.removeAttribute('title');
  3103. return title;
  3104. },
  3105. });
  3106. </script>
  3107.  
  3108. </body>
  3109. </html>
Advertisement
Add Comment
Please, Sign In to add comment