API tools faq
paste
silbrigthemes

Wärme (Theme 24)

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