API tools faq
paste
Advertisement
silbrigthemes

Heimgesucht (Theme #19)

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