API tools faq
paste
silbrigthemes

Simple & Clean (Theme 2 Revamp)

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