API tools faq
paste
silbrigthemes

Nekozuki (Theme 25)

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