API tools faq
paste
silbrigthemes

Stadt (Theme #11)

silbrigthemes
Dec 18th, 2018 (edited)
1,856
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 78.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. STADT
  7. Theme #11 by silbrigthemes
  8.  
  9. A responsive, minimalist theme with a two column flexbox layout.
  10.  
  11. Rules:
  12.  
  13. 1) Do not steal (parts of) the code.
  14. 2) Do not redistribute on other websites.
  15. 3) Do not claim as your own.
  16. 4) Do not edit beyond recognition.
  17. 5) Do not alter or delete the credit.
  18.  
  19. Useful comments to this code have been made. There is customization guide which can be accessed via esperantotheme.tumblr.com/customization-guide.
  20.  
  21. If you need any help for a problem that is not listed in the customization guide or where you cannot find a solution, feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  22.  
  23. Last Update: 10th April 2020
  24.  
  25. -->
  26.  
  27. <head>
  28.  
  29. <meta charset="utf-16">
  30. <title>{Title}</title>
  31. {block:Description}
  32. <meta name="description" content="{MetaDescription}" />
  33. {/block:Description}
  34. <link rel="shortcut icon" href="{Favicon}"/>
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  36. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  37.  
  38. <!-- Necessary for the theme to be responsive. -->
  39. <meta name="viewport" content="width=device-width, initial-scale=1">
  40.  
  41. <!-- "Honeybee" icon font, by @suiomi. -->
  42. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  43.  
  44. <!-- Necessary for the scripts to work. -->
  45. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  46.  
  47. <!-- Video Resizing Scripts by @shythemes -->
  48. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  49.  
  50. <!-- Changes the toolbar color on mobile. -->
  51. <meta name="theme-color" content="{color:Borders}"/>
  52.  
  53. <!-- Change Audio iframe color script, by @shudesigns. -->
  54. <script>
  55. $(document).ready(function() {
  56. $('iframe.tumblr_audio_player').load( function() {
  57. $('iframe.tumblr_audio_player').contents().find("head")
  58. .append($("<style type='text/css'> .audio-player{background:{color:Link Hover} !important} </style>"));
  59. // Audio Track Color
  60. $('iframe.tumblr_audio_player').contents().find("head")
  61. .append($("<style type='text/css'> .track-name{color:{color:Text} !important} </style>"));
  62. // Audio Artist Color
  63. $('iframe.tumblr_audio_player').contents().find("head")
  64. .append($("<style type='text/css'> .track-artist{color:{color:Text} !important} </style>"));
  65. // Audio Play Button Color
  66. $('iframe.tumblr_audio_player').contents().find("head")
  67. .append($("<style type='text/css'> .play-pause{color:{color:Text} !important} </style>"));
  68. });
  69. });
  70. </script>
  71.  
  72. <!-- Responsive videos, by @nouvae. -->
  73. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  74.  
  75. <!-- CSS Photosets, by annasthms and espoirthemes -->
  76. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  77. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  78. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  79. <script>initPhotosets();</script>
  80.  
  81. <!-- Masonry Libraries -->
  82. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  83. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  84.  
  85. <!-- Cormorant Garamond -->
  86. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  87. <!-- Dancing Script -->
  88. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  89.  
  90. <!-- Title Fonts -->
  91. <!-- Playfair Display -->
  92. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  93. <!-- Merriweather -->
  94. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  95. <!-- Roboto Slab -->
  96. <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">
  97.  
  98. <!-- Body Fonts -->
  99. <!-- Roboto Mono -->
  100. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  101. <!-- Roboto -->
  102. <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">
  103. <!-- Source Sans Pro -->
  104. <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  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. <!-- IBM Plex Mono -->
  108. <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  109.  
  110. <meta name="if:Show Captions" content="0"/>
  111. <meta name="if:Grayscale Images" content="1"/>
  112. <meta name="if:Masonry" content="0"/>
  113.  
  114. <meta name="if:Show Link 1" content="0"/>
  115. <meta name="if:Show Link 2" content="0"/>
  116. <meta name="if:Show Link 3" content="0"/>
  117. <meta name="if:Show Link 4" content="0"/>
  118. <meta name="if:Show Link 5" content="0"/>
  119.  
  120. <meta name="if:Show Captions" content="0"/>
  121. <meta name="if:Show Tags" content="1"/>
  122.  
  123. <meta name="text:Photo Gap" content="16px"/>
  124.  
  125. <meta name="text:Custom URL 1" content=""/>
  126. <meta name="text:Custom Link 1" content="Link 1"/>
  127. <meta name="text:Custom Icon 1" content="link-o"/>
  128.  
  129. <meta name="text:Custom URL 2" content=""/>
  130. <meta name="text:Custom Link 2" content="Link 2"/>
  131. <meta name="text:Custom Icon 2" content="link-o"/>
  132.  
  133. <meta name="text:Custom URL 3" content=""/>
  134. <meta name="text:Custom Link 3" content="Link 3"/>
  135. <meta name="text:Custom Icon 3" content="link-o"/>
  136.  
  137. <meta name="text:Custom URL 4" content=""/>
  138. <meta name="text:Custom Link 4" content="Link 4"/>
  139. <meta name="text:Custom Icon 4" content="link-o"/>
  140.  
  141. <meta name="text:Custom URL 5" content=""/>
  142. <meta name="text:Custom Link 5" content="Link 5"/>
  143. <meta name="text:Custom Icon 5" content="link-o"/>
  144.  
  145. <meta name="color:Background" content="#eae3d4"/>
  146. <meta name="color:Bold" content="#444"/>
  147. <meta name="color:Borders" content="#333"/>
  148. <meta name="color:Info Text" content="#333"/>
  149. <meta name="color:Info Text Hover" content="#333"/>
  150. <meta name="color:Italic" content="#000"/>
  151. <meta name="color:Link" content="#6e85b8"/>
  152. <meta name="color:Link Hover" content="#d4dbea"/>
  153. <meta name="color:Scrollbar Background" content="#aaa"/>
  154. <meta name="color:Text" content="#222"/>
  155. <meta name="color:Pink Text" content="#d538b8"/>
  156. <meta name="color:Red Text" content="#d53843"/>
  157. <meta name="color:Orange Text" content="#d57c38"/>
  158. <meta name="color:Yellow Text" content="#d5be38"/>
  159. <meta name="color:Green Text" content="#54b967"/>
  160. <meta name="color:Blue Text" content="#4b71c2"/>
  161. <meta name="color:Purple Text" content="#8838d5"/>
  162.  
  163. <meta name="select:Font" content="Roboto Mono" title="Roboto Mono"/>
  164. <meta name="select:Font" content="Roboto" title="Roboto"/>
  165. <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro"/>
  166. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  167. <meta name="select:Font" content="IBM Plex Mono" title="IBM Plex Mono"/>
  168.  
  169. <meta name="select:Font Size" content="1em" title="16px"/>
  170. <meta name="select:Font Size" content="14px" title="14px"/>
  171. <meta name="select:Font Size" content="12px" title="12px"/>
  172.  
  173. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  174. <meta name="select:Title Font" content="Merriweather" title="Merriweather"/>
  175. <meta name="select:Title Font" content="Roboto Slab" title="Roboto Slab"/>
  176.  
  177. <style>
  178.  
  179. body{
  180. margin:0;
  181. top:0;
  182. left:0;
  183. background-color:{color:Background};
  184. font-family:{select:Font}, Courier;
  185. font-size:{select:Font Size};
  186. color:{color:Text};
  187. text-align:justify;
  188. overflow-x:hidden;
  189. {block:IfNotMasonry}
  190. display:flex;
  191. flex-wrap:wrap;
  192. justify-content:space-evenly;
  193. align-items:center;
  194. {/block:IfNotMasonry}
  195. }
  196.  
  197. /* Custom Scrollbar */
  198. ::-webkit-scrollbar{
  199. width:10px;
  200. background-color:{color:Scrollbar Background};
  201. border:4px solid {color:Background};
  202. }
  203.  
  204. ::-webkit-scrollbar-thumb{
  205. width:10px;
  206. background-color:{color:Text};
  207. border:4px solid {color:Background};
  208. }
  209.  
  210. /* Custom Text Selection */
  211. ::selection{
  212. background-color:{color:Link Hover};
  213. color:{color:Borders};
  214. text-shadow:none;
  215. }
  216.  
  217. ::-moz-selection{
  218. background-color:{color:Link Hover};
  219. color:{color:Borders};
  220. text-shadow:none;
  221. }
  222.  
  223. ::-o-selection{
  224. background-color:{color:Link Hover};
  225. color:{color:Borders};
  226. text-shadow:none;
  227. }
  228.  
  229. ::-webkit-selection{
  230. background-color:{color:Link Hover};
  231. color:{color:Borders};
  232. text-shadow:none;
  233. }
  234.  
  235. /* Custom Tooltips */
  236. .tippy-tooltip.stadt-theme{
  237. background-color:{color:Link Hover};
  238. color:{color:Borders};
  239. text-align:left;
  240. text-transform:lowercase;
  241. font-weight:300;
  242. }
  243.  
  244. .tippy-tooltip.stadt-theme .tippy-svg-arrow{
  245. fill:{color:Link Hover};
  246. }
  247.  
  248. /* Bold Text */
  249. b, strong{
  250. font-weight:700, bold;
  251. color:{color:Bold};
  252. }
  253.  
  254. /* Italic Text */
  255. i, em{
  256. font-style:italic;
  257. font-weight:300;
  258. color:{color:Italic};
  259. }
  260.  
  261. /* Underlined Text */
  262. u{
  263. text-decoration:none;
  264. border-bottom:2px solid {color:Text};
  265. }
  266.  
  267. /* Empty Paragraph */
  268. p:empty{
  269. display:none;
  270. }
  271.  
  272. /* Small Text */
  273. small{
  274. font-size:calc({select:Font Size} - 4px);
  275. }
  276.  
  277. /* Line Break */
  278. hr{
  279. width:80%;
  280. height:2px;
  281. background-color:{color:Text};
  282. border:none;
  283. }
  284.  
  285. /* Blockquote */
  286. blockquote{
  287. margin-left:1em;
  288. border-left:2px solid {color:Text};
  289. padding-left:0.5em;
  290. }
  291.  
  292. /* Preformatted Text */
  293. pre{
  294. font-family:{select:Font}, Courier;
  295. padding-left:0.25em;
  296. padding-top:0.125em;
  297. padding-right:0.25em;
  298. padding-bottom:0.125em;
  299. background-color:{color:Link Hover};
  300. word-wrap:break-all;
  301. white-space:pre-wrap;
  302. }
  303.  
  304. /* Marked Text */
  305. mark{
  306. background-color:{color:Link Hover};
  307. padding:0 0.25em;
  308. }
  309.  
  310. /* Read More */
  311. p.read_more_container{
  312. border-right:2px solid {color:Text};
  313. border-bottom:2px solid {color:Text};
  314. width:calc(30% - 0.5em);
  315. margin-left:35%;
  316. text-align:center;
  317. padding:0 0.25em;
  318. }
  319.  
  320. a.read_more{
  321. border-bottom:none;
  322. box-shadow:none;
  323. }
  324.  
  325. /* Embedded GIFs */
  326. p.tmblr-attribution{
  327. border-left:2px solid {color:Borders};
  328. border-bottom:2px solid {color:Borders};
  329. border-right:2px solid {color:Borders};
  330. padding:0 0.25em;
  331. text-align:center;
  332. }
  333.  
  334. p.tmblr-attribution a{
  335. border-bottom:none;
  336. box-shadow:inset 0 {color:Link Hover};
  337. padding:0 0.25em;
  338. color:{color:Borders};
  339. transition:0.5s;
  340. -moz-transition:0.5s;
  341. -o-transition:0.5s;
  342. -webkit-transition:0.5s;
  343. }
  344.  
  345. p.tmblr-attribution a:hover{
  346. box-shadow:inset 0 -16px {color:Link Hover};
  347. transition:0.5s;
  348. -moz-transition:0.5s;
  349. -o-transition:0.5s;
  350. -webkit-transition:0.5s;
  351. }
  352.  
  353. /* Links */
  354. a{
  355. color:{color:Link};
  356. text-decoration:none;
  357. border-bottom:2px solid {color:Link};
  358. box-shadow:inset 0 0px {color:Link Hover};
  359. transition:0.5s;
  360. -moz-transition:0.5s;
  361. -o-transition:0.5s;
  362. -webkit-transition:0.5s;
  363. }
  364.  
  365. a:hover{
  366. box-shadow:inset 0 -8px {color:Link Hover};
  367. transition:0.5s;
  368. -moz-transition:0.5s;
  369. -o-transition:0.5s;
  370. -webkit-transition:0.5s;
  371. }
  372.  
  373. /** HEADINGS **/
  374. /* Post Title */
  375. .title{
  376. color:{color:Borders};
  377. font-size:calc(2.5 * {select:Font Size});
  378. font-family:{select:Title Font}, Georgia;
  379. text-align:center;
  380. }
  381.  
  382. /* First Heading */
  383. h1{
  384. font-size:calc(1.75 * {select:Font Size});
  385. font-family:{select:Font}, Courier;
  386. font-weight:700, bold;
  387. }
  388.  
  389. /* Second Heading */
  390. h2{
  391. font-size:calc(1.5 * {select:Font Size});
  392. font-family:{select:Font}, Courier;
  393. font-weight:300;
  394. }
  395.  
  396. /** COLORED TEXT **/
  397. /* Red Text */
  398. .npf_color_joey {
  399. color:{color:Red Text};
  400. }
  401.  
  402. /* Orange Text */
  403. .npf_color_monica {
  404. color:{color:Orange Text};
  405. }
  406.  
  407. /* Yellow Text */
  408. .npf_color_phoebe {
  409. color:{color:Yellow Text};
  410. }
  411.  
  412. /* Green Text */
  413. .npf_color_ross {
  414. color:{color:Green Text};
  415. }
  416.  
  417. /* Blue Text */
  418. .npf_color_rachel {
  419. color:{color:Blue Text};
  420. }
  421.  
  422. /* Purple Text */
  423. .npf_color_chandler {
  424. color:{color:Purple Text};
  425. }
  426.  
  427. /* Pink Text */
  428. .npf_color_niles {
  429. color: {color:Pink Text};
  430. }
  431.  
  432. /** SPECIAL FONTS **/
  433. /* Quirky Font */
  434. p.npf_quirky{
  435. font-family: 'Dancing Script', cursive;
  436. font-size:calc(1.5 * {select:Font Size});
  437. }
  438.  
  439. /* Chat Font */
  440. p.npf_chat{
  441. font-family:Courier;
  442. }
  443.  
  444. /* Quote Font */
  445. p.npf_quote{
  446. font-family:"Cormorant Garamond", "Palatino";
  447. font-size:calc(1.5 * {select:Font Size});
  448. }
  449.  
  450. /*** BLOG INFORMATION ***/
  451. /** CONTAINER **/
  452. #information{
  453. width:calc(40vw - 2em);
  454. padding:1em;
  455. }
  456.  
  457. /** TITLE **/
  458. #info-title{
  459. font-size:calc(2.5 * {select:Font Size});
  460. color:{color:Borders};
  461. font-family:{select:Title Font}, Georgia;
  462. border-bottom:4px solid {color:Borders};
  463. margin-bottom:8px;
  464. }
  465.  
  466. /** DESCRIPTION **/
  467. #info-desc{
  468. text-align:justify;
  469. font-style:italic;
  470. }
  471.  
  472. /** NAVIGATION **/
  473. /* Navigation Container */
  474. #info-nav{
  475. margin-top:8px;
  476. display:flex;
  477. align-items:center;
  478. justify-content:space-between;
  479. flex-wrap:wrap;
  480. }
  481.  
  482. /* Navigation Element */
  483. .navi{
  484. width:15vw;
  485. padding:0 0.25em;
  486. color:{color:Borders};
  487. border-bottom:2px solid {color:Borders};
  488. box-shadow:inset 0 {color:Link Hover};
  489. line-height:1.5em;
  490. transition:0.5s;
  491. -moz-transition:0.5s;
  492. -o-transition:0.5s;
  493. -webkit-transition:0.5s;
  494. }
  495.  
  496. /* Navigation Element on Hover */
  497. .navi:hover{
  498. box-shadow:inset 0 -10px {color:Link Hover};
  499. transition:0.5s;
  500. -moz-transition:0.5s;
  501. -o-transition:0.5s;
  502. -webkit-transition:0.5s;
  503. }
  504.  
  505. /* Navigation Links */
  506. a.navlink{
  507. border-bottom:none;
  508. box-shadow:none;
  509. }
  510.  
  511. #info-searchbar{
  512. border-bottom:2px solid {color:Borders};
  513. padding-bottom:4px;
  514. margin-top:8px;
  515. }
  516.  
  517. .sfm input {
  518. background-color: {color:Background};
  519. font-size: calc({select:Font Size} - 2px);
  520. border: 2px solid {color:Borders};
  521. text-transform: uppercase;
  522. color: {color:Borders};
  523. padding: 4px 8px;
  524. font-family: {select:Font}, Courier;
  525. width:calc(100% - (2em - 2px));
  526. text-align:center;
  527. transition:0.5s;
  528. -moz-transition:0.5s;
  529. -o-transition:0.5s;
  530. -webkit-transition:0.5s;
  531. }
  532.  
  533. .sfm input:hover{
  534. color:{color:Text};
  535. border:2px solid {color:Text};
  536. transition:0.5s;
  537. -moz-transition:0.5s;
  538. -o-transition:0.5s;
  539. -webkit-transition:0.5s;
  540. }
  541.  
  542. /*** POSTS ***/
  543. article{
  544. width:calc(40vw - 2em);
  545. padding:1em;
  546. margin-top:2em;
  547. margin-bottom:2em;
  548. {block:IfMasonry}
  549. margin-left:calc(5vw + 2em);
  550. {/block:IfMasonry}
  551. }
  552.  
  553. /** IMAGES **/
  554. article img{
  555. max-width:100%;
  556. {block:IfGrayscaleImages}
  557. filter: grayscale(100%);
  558. -moz-filter:grayscale(100%);
  559. -o-filter:grayscale(100%);
  560. -webkit-filter:grayscale(100%);
  561. {/block:IfGrayscaleImages}
  562. transition:0.5s;
  563. -moz-transition:0.5s;
  564. -o-transition:0.5s;
  565. -webkit-transition:0.5s;
  566. }
  567.  
  568. article img:hover{
  569. transition:0.5s;
  570. -moz-transition:0.5s;
  571. -o-transition:0.5s;
  572. -webkit-transition:0.5s;
  573. {block:IfGrayscaleImages}
  574. filter: grayscale(0%);
  575. -moz-filter:grayscale(0%);
  576. -o-filter:grayscale(0%);
  577. -webkit-filter:grayscale(0%);
  578. {/block:IfGrayscaleImages}
  579. }
  580.  
  581. /** PHOTOSETS **/
  582. /* Photoset Grid */
  583. .photoset-grid{
  584. grid-gap:{text:Photo Gap};
  585. }
  586.  
  587. /* –– NPF Photoset Fix, by glenthemes */
  588. :root {
  589. --NPF-Image-Spacing:{text:Photo Gap}; /* spacing value */
  590. }
  591.  
  592. .npf_row {
  593. display:flex!important;
  594. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  595. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  596. }
  597.  
  598. .npf_row:last-of-type {
  599. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  600. }
  601.  
  602. .tmblr-full {
  603. flex:1;
  604. margin:0!important;
  605. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  606. width:auto!important;
  607. height:auto!important;
  608. cursor:pointer;
  609. outline:none;
  610. }
  611.  
  612. article img, .tmblr-full img {
  613. max-width:100%;
  614. }
  615.  
  616. .photo img:hover, [photoset-layout] img:hover{
  617. cursor:pointer;
  618. transform:scale(0.95);
  619. box-shadow:0 0 4px {color:Scrollbar Background};
  620. transition:0.5s;
  621. -moz-transition:0.5s;
  622. -o-transition:0.5s;
  623. -webkit-transition:0.5s;
  624. }
  625.  
  626. /** QUOTE POSTS **/
  627. .quoted{
  628. font-size:calc(1.5 * {select:Font Size});
  629. font-style:italic;
  630. font-family:{select:Title Font}, Georgia;
  631. }
  632.  
  633. .quote-source{
  634. margin-top:8px;
  635. text-align:right;
  636. }
  637.  
  638. /** AUDIO POSTS **/
  639. .audio > iframe{
  640. width:100%;
  641. max-width:100%;
  642. }
  643.  
  644. /** VIDEO POSTS **/
  645. .video > iframe{
  646. width:100%;
  647. max-width:100%;
  648. }
  649.  
  650. /** QUESTIONS **/
  651. /* ANSWER */
  652. .answer{
  653. border:2px solid {color:Borders};
  654. padding:8px 16px;
  655. }
  656.  
  657. .answer-username img{
  658. width:36px;
  659. height:35px;
  660. border-radius:50%;
  661. margin-left:0.5em;
  662. }
  663.  
  664. .answer-username{
  665. display:flex;
  666. justify-content:flex-start;
  667. align-items:center;
  668. flex-direction:row-reverse;
  669. }
  670.  
  671. .answer-username a{
  672. text-decoration:none;
  673. border-bottom:none;
  674. box-shadow:none;
  675. margin-right:0.5em;
  676. margin-top:2em;
  677. }
  678.  
  679. .answer-username mark{
  680. padding:0.25em 0.5em;
  681. border-radius:1em;
  682. background-color:{color:Link Hover};
  683. color:{color:Link};
  684. transition:0.5s;
  685. -moz-transition:0.5s;
  686. -o-transition:0.5s;
  687. -webkit-transition:0.5s;
  688. }
  689.  
  690. .answer-username mark:hover{
  691. color:{color:Borders};
  692. cursor:pointer;
  693. transition:0.5s;
  694. -moz-transition:0.5s;
  695. -o-transition:0.5s;
  696. -webkit-transition:0.5s;
  697. }
  698.  
  699. .answer-username a:hover{
  700. color:{color:Borders};
  701. }
  702.  
  703. /* QUESTION */
  704. .question{
  705. background-color:{color:Link Hover};
  706. color:{color:Borders};
  707. margin-bottom:0.5em;
  708. padding:8px 16px;
  709. }
  710.  
  711. .question img{
  712. width:36px;
  713. height:36px;
  714. border-radius:50%;
  715. margin-right:0.5em;
  716. }
  717.  
  718. .question-username{
  719. display:flex;
  720. justify-content:flex-start;
  721. align-items:center;
  722. flex-direction:row;
  723. }
  724.  
  725. .question-username a{
  726. text-decoration:none;
  727. border-bottom:none;
  728. box-shadow:none;
  729. margin-right:0.5em;
  730. margin-top:2em;
  731. }
  732.  
  733. .question-username mark{
  734. padding:0 0.25em;
  735. border-bottom:2px solid {color:Link};
  736. color:{color:Link};
  737. transition:0.5s;
  738. -moz-transition:0.5s;
  739. -o-transition:0.5s;
  740. -webkit-transition:0.5s;
  741. }
  742.  
  743. .question-username mark:hover{
  744. border-bottom:2px solid {color:Borders};
  745. cursor:pointer;
  746. transition:0.5s;
  747. -moz-transition:0.5s;
  748. -o-transition:0.5s;
  749. -webkit-transition:0.5s;
  750. }
  751.  
  752. /** CHAT **/
  753. /* Containers */
  754. .chatterbox{
  755. width:100%;
  756. overflow:hidden;
  757. }
  758.  
  759. .chat{
  760. width:100%;
  761. }
  762.  
  763. .chat .clear{
  764. clear:both;
  765. }
  766.  
  767. /* Odd Chat Elements (1,3,5,…) */
  768. .chat .label_odd, .line_odd{
  769. height:auto;
  770. width:60%;
  771. margin-left:calc(10%);
  772. float:left;
  773. padding:0.25 1em;
  774. }
  775.  
  776. /* Odd Chat Lines (1,3,5,…) */
  777. .chat .line_odd{
  778. margin-bottom:0.5em;
  779. padding:0.3em 0.625em;
  780. }
  781.  
  782. /* Odd Chat Labels (1,3,5,…) */
  783. .chat .label_odd{
  784. font-weight:300;
  785. color:{color:Borders};
  786. font-size:calc(1.25 * {select:Font Size});
  787. padding:0.25em 0.5em;
  788. margin-bottom:0.25em;
  789. border-bottom:2px solid {color:Borders};
  790. }
  791.  
  792. /* Even Chat Elements (2,4,6,…) */
  793. .chat .label_even, .line_even{
  794. width:60%;
  795. height:auto;
  796. float:right;
  797. text-align:right;
  798. padding:0.25 0.5em;
  799. margin-right:calc(10%);
  800. }
  801.  
  802. /* Even Chat Lines (2,4,6,…) */
  803. .chat .line_even{
  804. padding:0.3em 0.625em;
  805. margin-bottom:0.5em;
  806. }
  807.  
  808. /* Even Chat Labels (2,4,6,…) */
  809. .chat .label_even{
  810. font-weight:300;
  811. font-size:calc(1.25 * {select:Font Size});
  812. padding:0.25em 0.5em;
  813. margin-bottom:0.25em;
  814. border-bottom:2px solid {color:Borders};
  815. color:{color:Borders};
  816. }
  817.  
  818. /** LINK POSTS **/
  819. .link-posts{
  820. width:100%;
  821. padding-bottom:0.5em;
  822. transition:0.5s;
  823. -moz-transition:0.5s;
  824. -o-transition:0.5s;
  825. -webkit-transition:0.5s;
  826. display:flex;
  827. align-items:center;
  828. justify-content:center;
  829. }
  830.  
  831. .link-posts:hover{
  832. transition:0.5s;
  833. -moz-transition:0.5s;
  834. -o-transition:0.5s;
  835. -webkit-transition:0.5s;
  836. }
  837.  
  838. .link-posts a{
  839. text-decoration:none;
  840. border-bottom:none;
  841. box-shadow:none;
  842. font-size:calc(1.5 * {select:Font Size});
  843. letter-spacing:1px;
  844. line-height: 1.5em;
  845. width:100%;
  846. font-weight:300;
  847. color:{color:Borders};
  848. }
  849.  
  850. .link-posts a:hover{
  851. color:{color:Link};
  852. }
  853.  
  854. .link-posts a img{
  855. width:100%;
  856. max-width:100%;
  857. }
  858.  
  859. /*** USER SPECIFICATIONS ***/
  860. /** USERNAME **/
  861. .username{
  862. margin-top:1em;
  863. height:40px;
  864. width:auto;
  865. display:flex;
  866. align-items:center;
  867. justify-content:flex-start;
  868. }
  869.  
  870. .username a{
  871. text-decoration:none;
  872. border-bottom:none;
  873. box-shadow:none;
  874. }
  875.  
  876. img.cimg {
  877. width:36px;
  878. height:36px;
  879. border-radius:50%;
  880. margin-right:0.5em;
  881. }
  882.  
  883. /* User Name Link */
  884. .user a{
  885. text-decoration:none;
  886. border-bottom:none;
  887. box-shadow:none;
  888. }
  889.  
  890. /* Username Mark */
  891. .user mark{
  892. padding:0.25em 0.5em;
  893. background-color:{color:Link Hover};
  894. color:{color:Link};
  895. border-radius:1em;
  896. margin-right:0.5em;
  897. transition:0.5s;
  898. -moz-transition:0.5s;
  899. -o-transition:0.5s;
  900. -webkit-transition:0.5s;
  901. }
  902.  
  903. /* Username Mark on Hover */
  904. .user mark:hover{
  905. color:{color:Borders};
  906. transition:0.5s;
  907. -moz-transition:0.5s;
  908. -o-transition:0.5s;
  909. -webkit-transition:0.5s;
  910. }
  911.  
  912. /*** PERMALINK PAGE ***/
  913. /* User Avatar */
  914. img.avatar{
  915. display:none;
  916. }
  917.  
  918. /* Notes List */
  919. ol.notes{
  920. list-style-type:none;
  921. margin-left:0px;
  922. border-bottom:none;
  923. }
  924.  
  925. /* Notes List on Hover */
  926. ol.notes:hover{
  927. border-bottom:none;
  928. }
  929.  
  930. /* Notes List Item */
  931. li.note{
  932. line-height:1.5em;
  933. margin-left:-2em;
  934. }
  935.  
  936. /* Liked by … */
  937. li.like:before{
  938. content:"\ea55";
  939. font-family:"honeybee";
  940. font-weight:400;
  941. position:relative;
  942. font-size:{select:Font Size};
  943. padding:0.25em;
  944. z-index:10!important;
  945. }
  946.  
  947. /* Reblogged by … */
  948. li.reblog:before{
  949. content:"\ebc2";
  950. font-family:"honeybee";
  951. font-weight:400;
  952. position:relative;
  953. font-size:{select:Font Size};
  954. padding:0.25em;
  955. z-index:10!important;
  956. }
  957.  
  958. /* User Replied to … */
  959. li.reply:before{
  960. content:"\ebce";
  961. font-family:"honeybee";
  962. font-weight:400;
  963. position:relative;
  964. font-size:{select:Font Size};
  965. padding:0.25em;
  966. z-index:10!important;
  967. }
  968.  
  969. /* User Reply */
  970. .answer_content{
  971. background-color:{color:Link Hover};
  972. color:{color:Borders};
  973. padding:0 0.25em;
  974. }
  975.  
  976. /* Notes Link */
  977. .notes a{
  978. text-decoration:none;
  979. color:{color:Text};
  980. border-bottom:2px solid {color:Text};
  981. box-shadow:none;
  982. transition:0.5s;
  983. -moz-transition:0.5s;
  984. -o-transition:0.5s;
  985. -webkit-transition:0.5s;
  986. margin-bottom:0.25em;
  987. }
  988.  
  989. /* Notes Link on Hover */
  990. .notes a:hover{
  991. border-bottom:2px solid {color:Link};
  992. color:{color:Link};
  993. box-shadow:none;
  994. transition:0.5s;
  995. -moz-transition:0.5s;
  996. -o-transition:0.5s;
  997. -webkit-transition:0.5s;
  998. }
  999.  
  1000. /*** POST FOOTER ***/
  1001. .post-information{
  1002. display:flex;
  1003. align-items:flex-start;
  1004. justify-content:flex-start;
  1005. flex-wrap:wrap;
  1006. margin-top:1em;
  1007. clear:both;
  1008. border-top:2px solid {color:Text};
  1009. padding-top:8px;
  1010. }
  1011.  
  1012. /* Specification Link */
  1013. a.specs{
  1014. border-bottom:none;
  1015. box-shadow:none;
  1016. padding:4px 8px;
  1017. border-bottom:2px solid {color:Borders};
  1018. border-right:2px solid {color:Borders};
  1019. margin-right:8px;
  1020. background-color:{color:Background};
  1021. box-shadow:inset -4px -4px {color:Link Hover};
  1022. color:{color:Info Text};
  1023. text-transform:lowercase;
  1024. margin-right:4px;
  1025. margin-bottom:4px;
  1026. }
  1027.  
  1028. a.specs span{
  1029. font-size:calc(1em - 2px);
  1030. }
  1031.  
  1032. /* Specification Link | Hover */
  1033. a.specs:hover{
  1034. box-shadow:inset -2em -2.25em {color:Link Hover};
  1035. color:{color:Info Text Hover};
  1036. }
  1037.  
  1038. /* Specification Link | Transitions */
  1039. a.specs, a.specs:hover{
  1040. transition:0.5s;
  1041. -moz-transition:0.5s;
  1042. -o-transition:0.5s;
  1043. -webkit-transition:0.5s;
  1044. }
  1045.  
  1046. /* LIKE BUTTON */
  1047. /* Like Button */
  1048. .like_button {
  1049. display:inline-block;
  1050. position:relative;
  1051. margin-top:-4px;
  1052. font-size:1em;
  1053. }
  1054.  
  1055. /* Like Button iFrame */
  1056. .like_button iframe {
  1057. height:100%;
  1058. left:0;
  1059. opacity:0;
  1060. position:absolute;
  1061. top:0;
  1062. width:100%;
  1063. z-index:1!important;
  1064. border-bottom:none;
  1065. }
  1066.  
  1067. /* Like Button Before Element */
  1068. .like_button:before{
  1069. content:"\ea55";
  1070. font-family:'honeybee';
  1071. font-weight:400;
  1072. position:relative;
  1073. font-size:calc(1em - 2px);
  1074. z-index:0!important;
  1075. margin-right:4px;
  1076. }
  1077.  
  1078. /* Like Button After Element */
  1079. .like_button:after {
  1080. content:'like';
  1081. z-index:0!important;
  1082. }
  1083.  
  1084. /*** PAGINATION ***/
  1085. /* Container */
  1086. #f-pagination{
  1087. width:calc(40vw - 2em);
  1088. height:auto;
  1089. display:flex;
  1090. align-items:center;
  1091. justify-content:space-evenly;
  1092. margin-bottom:2em;
  1093. }
  1094.  
  1095. /* Pagination Links */
  1096. a.f-pagi-link{
  1097. text-decoration:none;
  1098. border-bottom:none;
  1099. box-shadow:none;
  1100. }
  1101.  
  1102. .f-box{
  1103. width:36px;
  1104. height:36px;
  1105. border-radius:50%;
  1106. background-color:{color:Background};
  1107. color:{color:Borders};
  1108. border:1px solid {color:Borders};
  1109. display:flex;
  1110. align-items:center;
  1111. justify-content:center;
  1112. transition:0.5s;
  1113. -moz-transition:0.5s;
  1114. -o-transition:0.5s;
  1115. -webkit-transition:0.5s;
  1116. }
  1117.  
  1118. .f-box:hover{
  1119. background-color:{color:Link Hover};
  1120. transition:0.5s;
  1121. -moz-transition:0.5s;
  1122. -o-transition:0.5s;
  1123. -webkit-transition:0.5s;
  1124. }
  1125.  
  1126. /*** MORE ***/
  1127. /* Hides the tumblr app button, by @yeoli-thm */
  1128. .tmblr-iframe--app-cta-button {
  1129. display: none!important;
  1130. }
  1131.  
  1132.  
  1133. /** CUSTOM TUMBLR CONTROLS **/
  1134. /* Hides standard tumblr controls */
  1135. body > iframe:first-child {
  1136. display: none !important;
  1137. }
  1138.  
  1139. #big-box{
  1140. height:240px;
  1141. width:40px;
  1142. left:1em;
  1143. top:calc(50vh - 120px);
  1144. position:fixed;
  1145. display:flex;
  1146. flex-direction:column;
  1147. align-items:center;
  1148. justify-content:space-evenly;
  1149. }
  1150.  
  1151. a.boxlink{
  1152. text-decoration:none;
  1153. border-bottom:none;
  1154. box-shadow:none;
  1155. }
  1156.  
  1157. .box{
  1158. width:36px;
  1159. height:36px;
  1160. border-radius:50%;
  1161. border:1px solid {color:Borders};
  1162. color:{color:Borders};
  1163. background-color:{color:Background};
  1164. display:flex;
  1165. align-items:center;
  1166. justify-content:center;
  1167. transition:0.5s;
  1168. -moz-transition:0.5s;
  1169. -o-transition:0.5s;
  1170. -webkit-transition:0.5s;
  1171. }
  1172.  
  1173. .box:hover{
  1174. background-color:{color:Link Hover};
  1175. transition:0.5s;
  1176. -moz-transition:0.5s;
  1177. -o-transition:0.5s;
  1178. -webkit-transition:0.5s;
  1179. }
  1180.  
  1181. /** CUSTOM LIGHTBOX **/
  1182. /* Custom Lightbox */
  1183. .vignette, #vignette {
  1184. opacity:0;
  1185. }
  1186. .lightbox-image, #tumblr_lightbox img {
  1187. box-shadow:none!important;
  1188. border-radius:0!important;
  1189. max-width:none;
  1190. box-shadow:0 0 8px {color:Scrollbar Background}!important;
  1191. }
  1192.  
  1193. .tmblr-lightbox, #tumblr_lightbox {
  1194. background-color:{color:Background}!important;
  1195. }
  1196.  
  1197. a.tumblr-box{
  1198. border-bottom:none;
  1199. }
  1200.  
  1201. /** CREDIT **/
  1202. /* Do NOT delete the credit! */
  1203. a.credlink{
  1204. border-bottom:none;
  1205. box-shadow:none;
  1206. }
  1207.  
  1208. .credit{
  1209. position:fixed;
  1210. bottom:0.5em;
  1211. right:0.5em;
  1212. color:{color:Borders};
  1213. border:1px solid {color:Borders};
  1214. width:36px;
  1215. height:36px;
  1216. border-radius:50%;
  1217. background-color:{color:Background};
  1218. font-size:20px;
  1219. display:flex;
  1220. align-items:center;
  1221. justify-content:center;
  1222. transition:0.5s;
  1223. -moz-transition:0.5s;
  1224. -o-transition:0.5s;
  1225. -webkit-transition:0.5s;
  1226. }
  1227.  
  1228. .credit:hover{
  1229. background-color:{color:Link Hover};
  1230. transition:0.5s;
  1231. -moz-transition:0.5s;
  1232. -o-transition:0.5s;
  1233. -webkit-transition:0.5s;
  1234. }
  1235.  
  1236. /** RESPONSIVE LAYOUT **/
  1237. @media only screen and (min-width:800px){
  1238. #mb-footer, #space{
  1239. display:none;
  1240. }
  1241. }
  1242.  
  1243. @media only screen and (max-width:800px){
  1244. #information{
  1245. width:calc(80vw - 2em);
  1246. }
  1247.  
  1248. #info-nav{
  1249. display:none;
  1250. }
  1251.  
  1252. article{
  1253. width:calc(80vw - 2em);
  1254. {block:IfMasonry}
  1255. margin-left:10vw;
  1256. {/block:IfMasonry}
  1257. }
  1258.  
  1259. .chatterbox, .chat{
  1260. width:calc(80vw - 2em);
  1261. }
  1262.  
  1263. .chat .label_odd, .line_odd{
  1264. margin-left:0;
  1265. }
  1266.  
  1267. .chat .label_even, .line_even{
  1268. margin-right:0;
  1269. }
  1270.  
  1271. #f-pagination{
  1272. display:none;
  1273. }
  1274.  
  1275. #big-box, .credit{
  1276. display:none;
  1277. }
  1278.  
  1279. #space{
  1280. height:2em;
  1281. }
  1282.  
  1283. /* MOBILE FOOTER */
  1284. #mb-footer{
  1285. position:fixed;
  1286. width:100vw;
  1287. height:10vh;
  1288. margin-left:0;
  1289. margin-bottom:0;
  1290. left:0;
  1291. bottom:0;
  1292. border-radius:0;
  1293. border:none;
  1294. background-color:{color:Link};
  1295. z-index:99999!important;
  1296. display:flex;
  1297. align-items:center;
  1298. justify-content:space-between;
  1299. }
  1300.  
  1301. /* Mobile Footer Navigation */
  1302. .mbf-nav{
  1303. height:10vh;
  1304. width:20vw;
  1305. background-color:inherit;
  1306. color:{color:Link Hover};
  1307. display:flex;
  1308. align-items:center;
  1309. justify-content:center;
  1310. }
  1311.  
  1312. /* Mobile Footer Navigation | Icons */
  1313. .mbf-nav span{
  1314. font-size:1em;
  1315. }
  1316.  
  1317. .mbf-nav span.th-chevron-left,
  1318. .mbf-nav span.th-chevron-right{
  1319. font-size:calc(1em - 2px);
  1320. }
  1321.  
  1322. .mbf-nav span.th-code{
  1323. font-size:calc(1em + 2px);
  1324. }
  1325.  
  1326. /* Mobile Footer Navigation | Hover */
  1327. .mbf-nav:hover, .mbf-nav:focus{
  1328. color:{color:Background};
  1329. transform:scale(1.05);
  1330. cursor:pointer;
  1331. }
  1332.  
  1333. /* Transitions */
  1334. .mbf-nav, .mbf-nav:hover{
  1335. transition:0.5s;
  1336. -moz-transition:0.5s;
  1337. -o-transition:0.5s;
  1338. -webkit-transition:0.5s;
  1339. }
  1340.  
  1341. /* Mobile Footer Navigation Link */
  1342. a.mbf-link{
  1343. border-bottom:none;
  1344. box-shadow:none;
  1345. }
  1346.  
  1347. /* Dropdown Button */
  1348. .dropbtn {
  1349. font-size:1em;
  1350. cursor:pointer;
  1351. border:none;
  1352. }
  1353.  
  1354. /* Dropdown Button | Focus */
  1355. .dropbtn:focus{
  1356. outline:none;
  1357. border:none;
  1358. }
  1359.  
  1360. /* Dropdown Menu */
  1361. .dropdown {
  1362. position:relative;
  1363. display:inline-block;
  1364. }
  1365.  
  1366. .dropdown-content {
  1367. display:none;
  1368. position:absolute;
  1369. background-color:{color:Link Hover};
  1370. min-width:160px;
  1371. overflow:auto;
  1372. z-index:1;
  1373. bottom:100%;
  1374. right:100%;
  1375. font-family:"{select:Font}", Verdana;
  1376. font-weight:normal;
  1377. }
  1378.  
  1379. /* Drop Down Menu Link */
  1380. .dropdown-content a{
  1381. color:{color:Link};
  1382. padding:12px 16px;
  1383. text-decoration:none;
  1384. display:block;
  1385. border:none;
  1386. box-shadow:none;
  1387. border-top:1px solid {color:Link};
  1388. }
  1389.  
  1390. .dropdown-content a:first-child{
  1391. border-top:none;
  1392. }
  1393.  
  1394. /* Drop Down Menu Link | Hover */
  1395. .dropdown-content a:hover{
  1396. background-color:{color:Link};
  1397. color:{color:Link Hover};
  1398. }
  1399.  
  1400. /* Transitions */
  1401. .dropdown-content a, .dropdown-content a:hover{
  1402. transition:0.5s;
  1403. -moz-transition:0.5s;
  1404. -o-transition:0.5s;
  1405. -webkit-transition:0.5s;
  1406. }
  1407.  
  1408. .show{
  1409. display:block;
  1410. }
  1411. }
  1412.  
  1413. </style>
  1414. </head>
  1415.  
  1416. <body>
  1417.  
  1418. <!-- CUSTOM TUMBLR CONTROLS -->
  1419. <div id="big-box">
  1420. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="boxlink">
  1421. <div class="box">
  1422. <span class="th th-tumblr-o"></span>
  1423. </div>
  1424. </a>
  1425.  
  1426. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="boxlink">
  1427. <div class="box">
  1428. <span class="th th-chat-bubble-o"></span>
  1429. </div>
  1430. </a>
  1431.  
  1432. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="boxlink">
  1433. <div class="box">
  1434. <span class="th th-pencil-o"></span>
  1435. </div>
  1436. </a>
  1437.  
  1438. <a href="https://www.tumblr.com/settings/blog/{Name}" title="change settings" class="boxlink">
  1439. <div class="box">
  1440. <span class="th th-settings-o"></span>
  1441. </div>
  1442. </a>
  1443.  
  1444. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="boxlink">
  1445. <div class="box">
  1446. <span class="th th-plus-1-o"></span>
  1447. </div>
  1448. </a>
  1449. </div>
  1450.  
  1451. <!-- BLOG INFORMATION -->
  1452. <article id="information">
  1453. <!-- Blog Title -->
  1454. <div id="info-title">{Title}</div>
  1455. <!-- Blog Description -->
  1456. <div id="info-desc">{Description}</div>
  1457. <!-- Searchbar -->
  1458. <div id="info-searchbar">
  1459. <form action="/search" method="get" class="sfm" name="theform">
  1460. <input type="text" name="q" value="SEARCH"/>
  1461. </form>
  1462. </div>
  1463. <!-- Navigation -->
  1464. <div id="info-nav">
  1465. <!-- Index Link -->
  1466. <a href="/" title="index" class="navlink">
  1467. <div class="navi">
  1468. <span class="th th-home-o"></span> Index
  1469. </div>
  1470. </a>
  1471.  
  1472. <!-- Ask Link -->
  1473. {block:AskEnabled}
  1474. <a href="/ask" title="{AskLabel}" class="navlink">
  1475. <div class="navi">
  1476. <span class="th th-envelope-o"></span> {AskLabel}
  1477. </div>
  1478. </a>
  1479. {/block:AskEnabled}
  1480.  
  1481. <!-- Archive -->
  1482. <a href="/archive" title="browse archive" class="navlink">
  1483. <div class="navi">
  1484. <span class="th th-box-2-o"></span> Archive
  1485. </div>
  1486. </a>
  1487. {/block:SubmissionsEnabled}
  1488.  
  1489. <!-- First Custom Link -->
  1490. {block:IfShowLink1}
  1491. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}" class="navlink">
  1492. <div class="navi">
  1493. <span class="th th-{text:Custom Icon 1}"></span> {text:Custom Link 1}
  1494. </div>
  1495. </a>
  1496. {/block:IfShowLink1}
  1497.  
  1498. <!-- Second Custom Link -->
  1499. {block:IfShowLink2}
  1500. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}" class="navlink">
  1501. <div class="navi">
  1502. <span class="th th-{text:Custom Icon 2}"></span> {text:Custom Link 2}
  1503. </div>
  1504. </a>
  1505. {/block:IfShowLink2}
  1506.  
  1507. <!-- Third Custom Link -->
  1508. {block:IfShowLink3}
  1509. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}" class="navlink">
  1510. <div class="navi">
  1511. <span class="th th-{text:Custom Icon 3}"></span> {text:Custom Link 3}
  1512. </div>
  1513. </a>
  1514. {/block:IfShowLink3}
  1515.  
  1516. <!-- Fourth Custom Link -->
  1517. {block:IfShowLink4}
  1518. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}" class="navlink">
  1519. <div class="navi">
  1520. <span class="th th-{text:Custom Icon 4}"></span> {text:Custom Link 4}
  1521. </div>
  1522. </a>
  1523. {/block:IfShowLink4}
  1524.  
  1525. <!-- Fifth Custom Link -->
  1526. {block:IfShowLink5}
  1527. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}" class="navlink">
  1528. <div class="navi">
  1529. <span class="th th-{text:Custom Icon 5}"></span> {text:Custom Link 5}
  1530. </div>
  1531. </a>
  1532. {/block:IfShowLink5}
  1533. </div>
  1534. </article>
  1535.  
  1536. <!-- POSTS -->
  1537. {block:Posts}
  1538. <article>
  1539.  
  1540. <!-- TEXT POSTS -->
  1541. {block:Text}
  1542. {block:Title}
  1543. <div class="title">{Title}</div>
  1544. {/block:Title}
  1545. {block:Body}
  1546. {block:NotReblog}
  1547. <div class="text">{Body}</div>
  1548. {/block:NotReblog}
  1549. {block:RebloggedFrom}
  1550. {block:Reblogs}
  1551. <div class="username">
  1552. {block:HasAvatar}
  1553. {block:HasPermalink}
  1554. <a href="{Permalink}" target="_blank">
  1555. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1556. {/block:HasPermalink}
  1557. {block:HasNoPermalink}
  1558. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1559. {/block:HasNoPermalink}
  1560. {/block:HasAvatar}
  1561. {block:HasPermalink}
  1562. <div class="user">
  1563. <a target="_blank" class="user" href="{Permalink}">
  1564. <mark>{Username}</mark>
  1565. </a>
  1566. </div>
  1567. {/block:HasPermalink}
  1568. {block:HasNoPermalink}
  1569. <span class="user"><mark>{Username}</mark></span>
  1570. {/block:HasNoPermalink}
  1571. </div>
  1572. <div class="text">{Body}</div>
  1573. {/block:Reblogs}
  1574. {/block:RebloggedFrom}
  1575. {/block:Body}
  1576. {/block:Text}
  1577.  
  1578. <!-- QUESTION POSTS -->
  1579. {block:Answer}
  1580. <div class="question">
  1581. <div class="question-username">
  1582. <img src="{AskerPortraitURL-96}" alt="user icon">
  1583. <mark>{Asker}</mark>
  1584. </div>
  1585. {Question}
  1586. </div>
  1587.  
  1588. {block:Answerer}
  1589. <div class="answer">
  1590. <div class="answer-username">
  1591. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1592. <mark>{Answerer}</mark>
  1593. </div>
  1594. {Answer}
  1595. </div>
  1596. {/block:Answerer}
  1597. {block:NotReblog}
  1598. <div>{Replies}</div>
  1599. {/block:NotReblog}
  1600. {block:RebloggedFrom}
  1601. {block:Reblogs}
  1602. <div class="username">
  1603. {block:HasAvatar}
  1604. {block:HasPermalink}
  1605. <a href="{Permalink}" target="_blank">
  1606. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1607. {/block:HasPermalink}
  1608. {block:HasNoPermalink}
  1609. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1610. {/block:HasNoPermalink}
  1611. {/block:HasAvatar}
  1612. {block:HasPermalink}
  1613. <div class="user">
  1614. <a target="_blank" class="user" href="{Permalink}">
  1615. <mark>{Username}</mark>
  1616. </a>
  1617. </div>
  1618. {/block:HasPermalink}
  1619. {block:HasNoPermalink}
  1620. <span class="user"><mark>{Username}</mark></span>
  1621. {/block:HasNoPermalink}
  1622. </div>
  1623. <div class="text">{Body}</div>
  1624. {/block:Reblogs}
  1625. {/block:RebloggedFrom}
  1626. {/block:Answer}
  1627.  
  1628.  
  1629. <!-- QUOTE POSTS -->
  1630. {block:Quote}
  1631. <div class="quoted">
  1632. {Quote}
  1633. </div>
  1634. {block:Source}
  1635. <div class="quote-source">
  1636. – {Source}
  1637. </div>
  1638. {/block:Source}
  1639. {/block:Quote}
  1640.  
  1641. <!-- LINK POSTS -->
  1642. {block:Link}
  1643. <div class="link-posts">
  1644. <a href="{URL}">
  1645. <div class="link-cont">
  1646. <div class="link-title">
  1647. {Name}
  1648. </div>
  1649. </div>
  1650. </a>
  1651. </div>
  1652. {block:Description}
  1653. {block:NotReblog}
  1654. {Description}
  1655. {/block:NotReblog}
  1656. {block:RebloggedFrom}
  1657. {block:Reblogs}
  1658. <div class="username">
  1659. {block:HasAvatar}
  1660. {block:HasPermalink}
  1661. <a href="{Permalink}" target="_blank">
  1662. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1663. {/block:HasPermalink}
  1664. {block:HasNoPermalink}
  1665. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1666. {/block:HasNoPermalink}
  1667. {/block:HasAvatar}
  1668. {block:HasPermalink}
  1669. <div class="user">
  1670. <a target="_blank" class="user" href="{Permalink}">
  1671. <mark>{Username}</mark>
  1672. </a>
  1673. </div>
  1674. {/block:HasPermalink}
  1675. {block:HasNoPermalink}
  1676. <span class="user"><mark>{Username}</mark> </span>
  1677. {/block:HasNoPermalink}
  1678. </div>
  1679. <div class="text">{Body}</div>
  1680. {/block:Reblogs}
  1681. {/block:RebloggedFrom}
  1682. {/block:Description}
  1683. {/block:Link}
  1684.  
  1685. <!-- CHAT POSTS -->
  1686. <div class="chatterbox">
  1687. {block:Chat}
  1688. <div class="chat clear">
  1689. {block:Title}
  1690. <div class="title">{Title}</div>
  1691. {/block:Title}
  1692. {block:Lines}
  1693. {block:Label}
  1694. <span class="label_{alt}">
  1695. {Label}
  1696. </span>
  1697. {/block:Label}
  1698. <div class="line_{alt}">
  1699. {Line}<br>
  1700. </div>
  1701. {/block:Lines}
  1702. </div>
  1703. {/block:Chat}
  1704. </div>
  1705.  
  1706. <!-- PHOTO POSTS -->
  1707. {block:Photo}
  1708. {LinkOpenTag}
  1709. <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">
  1710. <div class="photo">
  1711. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1712. </div>
  1713. </a>
  1714. {LinkCloseTag}
  1715. {block:Caption}
  1716. {block:IfShowCaptions}
  1717. {block:NotReblog}{Caption}{/block:NotReblog}
  1718. {block:RebloggedFrom}
  1719. {block:Reblogs}
  1720. <div class="username">
  1721. {block:HasAvatar}
  1722. {block:HasPermalink}
  1723. <a href="{Permalink}" target="_blank">
  1724. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1725. </a>
  1726. {/block:HasPermalink}
  1727. {block:HasNoPermalink}
  1728. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1729. {/block:HasNoPermalink}
  1730. {/block:HasAvatar}
  1731. {block:HasPermalink}
  1732. <div class="user">
  1733. <a target="_blank" class="user" href="{Permalink}">
  1734. <mark>{Username}</mark>
  1735. </a>
  1736. </div>
  1737. {/block:HasPermalink}
  1738. {block:HasNoPermalink}
  1739. <span class="user"><mark>{Username}</mark></span>
  1740. {/block:HasNoPermalink}
  1741. </div>
  1742. <div class="text">{Body}</div>
  1743. {/block:Reblogs}
  1744. {/block:RebloggedFrom}
  1745. {/block:IfShowCaptions}
  1746. {/block:Caption}
  1747. {/block:Photo} <!-- / end photos -->
  1748.  
  1749. <!-- /*/*/*/ -->
  1750.  
  1751. <!-- PANORAMA POSTS -->
  1752. {block:Panorama}
  1753. {LinkOpenTag}
  1754. <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">
  1755. <div class="panorama">
  1756. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1757. </div>
  1758. </a>
  1759. {LinkCloseTag}
  1760. {block:Caption}
  1761. {block:IfShowCaptions}
  1762. {block:NotReblog}
  1763. {Caption}
  1764. {/block:NotReblog}
  1765. {block:RebloggedFrom}
  1766. {block:Reblogs}
  1767. <div class="username">
  1768. {block:HasAvatar}
  1769. {block:HasPermalink}
  1770. <a href="{Permalink}" target="_blank" title="permalink page">
  1771. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1772. </a>
  1773. {/block:HasPermalink}
  1774. {block:HasNoPermalink}
  1775. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1776. {/block:HasNoPermalink}
  1777. {/block:HasAvatar}
  1778. {block:HasPermalink}
  1779. <div class="user">
  1780. <a target="_blank" class="user" href="{Permalink}" title="permalink page">
  1781. <mark>{Username}</mark>
  1782. </a>
  1783. </div>
  1784. {/block:HasPermalink}
  1785. {block:HasNoPermalink}
  1786. <span class="user"><mark>{Username}</mark></span>
  1787. {/block:HasNoPermalink}
  1788. </div>
  1789. <div class="text">{Body}</div>
  1790. {/block:Reblogs}
  1791. {/block:RebloggedFrom}
  1792. {/block:IfShowCaptions}
  1793. {/block:Caption}
  1794. {/block:Panorama} <!-- / end panorama -->
  1795.  
  1796. <!-- /*/*/*/ -->
  1797.  
  1798. <!-- PHOTOSETS -->
  1799. {block:Photoset}
  1800. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1801. {block:Photos}
  1802. <div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)" title="click to open lightbox">
  1803. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1804. </div>
  1805. {/block:Photos}
  1806. </div>
  1807. {block:Caption}
  1808. {block:IfShowCaptions}
  1809. {block:NotReblog}
  1810. {Caption}
  1811. {/block:NotReblog}
  1812. {block:RebloggedFrom}
  1813. {block:Reblogs}
  1814. <div class="username">
  1815. {block:HasAvatar}
  1816. {block:HasPermalink}
  1817. <a href="{Permalink}" target="_blank">
  1818. <img class="cimg" src="{PortraitURL-64}"></a>
  1819. {/block:HasPermalink}
  1820. {block:HasNoPermalink}
  1821. <img class="cimg" src="{PortraitURL-64}">
  1822. {/block:HasNoPermalink}
  1823. {/block:HasAvatar}
  1824. {block:HasPermalink}
  1825. <div class="user">
  1826. <a target="_blank" class="user" href="{Permalink}">
  1827. <mark>{Username}</mark>
  1828. </a>
  1829. </div>
  1830. {/block:HasPermalink}
  1831. {block:HasNoPermalink}
  1832. <span class="user"><mark>{Username}</mark></span>
  1833. {/block:HasNoPermalink}
  1834. </div>
  1835. <div class="text">{Body}</div>
  1836. {/block:Reblogs}
  1837. {/block:RebloggedFrom}
  1838. {block:IfShowCaptions}
  1839. {/block:Caption}
  1840. {/block:Photoset} <!-- / end photosets -->
  1841.  
  1842. <!-- AUDIO POSTS -->
  1843. {block:Audio}
  1844. {block:AudioEmbed}
  1845. <div class="audio">
  1846. {AudioEmbed}
  1847. </div>
  1848. {/block:AudioEmbed}
  1849. {block:Caption}
  1850. {block:NotReblog}
  1851. {Caption}
  1852. {/block:NotReblog}
  1853. {block:RebloggedFrom}
  1854. {block:Reblogs}
  1855. <div class="username">
  1856. {block:HasAvatar}
  1857. {block:HasPermalink}
  1858. <a href="{Permalink}" target="_blank">
  1859. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1860. {/block:HasPermalink}
  1861. {block:HasNoPermalink}
  1862. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1863. {/block:HasNoPermalink}
  1864. {/block:HasAvatar}
  1865. {block:HasPermalink}
  1866. <div class="user">
  1867. <a target="_blank" class="user" href="{Permalink}">
  1868. <mark>{Username}</mark>
  1869. </a>
  1870. </div>
  1871. {/block:HasPermalink}
  1872. {block:HasNoPermalink}
  1873. <span class="user"><mark>{Username}</mark></span>
  1874. {/block:HasNoPermalink}
  1875. </div>
  1876. <div class="text">{Body}</div>
  1877. {/block:Reblogs}
  1878. {/block:RebloggedFrom}
  1879. {/block:Caption}
  1880. {/block:Audio}
  1881.  
  1882.  
  1883. <!-- VIDEO POSTS -->
  1884. {block:Video}
  1885. <div class="video">
  1886. {Video-500}
  1887. </div>
  1888. {block:Caption}
  1889. {block:NotReblog}
  1890. {Caption}
  1891. {/block:NotReblog}
  1892. {block:RebloggedFrom}
  1893. {block:Reblogs}
  1894. <div class="username">
  1895. {block:HasAvatar}
  1896. {block:HasPermalink}
  1897. <a href="{Permalink}" target="_blank">
  1898. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1899. {/block:HasPermalink}
  1900. {block:HasNoPermalink}
  1901. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1902. {/block:HasNoPermalink}
  1903. {/block:HasAvatar}
  1904. {block:HasPermalink}
  1905. <div class="user">
  1906. <a target="_blank" class="user" href="{Permalink}">
  1907. <mark>{Username}</mark>
  1908. </a>
  1909. </div>
  1910. {/block:HasPermalink}
  1911. {block:HasNoPermalink}
  1912. <span class="user"><mark>{Username}</mark></span>
  1913. {/block:HasNoPermalink}
  1914. </div>
  1915. <div class="text">{Body}</div>
  1916. {/block:Reblogs}
  1917. {/block:RebloggedFrom}
  1918. {/block:Caption}
  1919. {/block:Video}
  1920.  
  1921. <!-- POST FOOTER -->
  1922. <div class="post-information">
  1923.  
  1924. <!-- TIME STAMP -->
  1925. {block:Date}
  1926. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  1927. <span class="th th-clock-o" aria-hidden="true"></span> {TimeAgo}
  1928. </a>
  1929. {/block:Date}
  1930.  
  1931. <!-- NOTE COUNT -->
  1932. {block:NoteCount}
  1933. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  1934. <span class="th th-information-o" aria-hidden="true"></span> {NoteCountWithLabel}
  1935. </a>
  1936. {/block:NoteCount}
  1937.  
  1938. <!-- VIA -->
  1939. {block:RebloggedFrom}
  1940. <a class="specs" href="{ReblogParentURL}" title="via">
  1941. <span class="th th-paper-plane-o" aria-hidden="true"></span> via {ReblogParentTitle}
  1942. </a>
  1943. {/block:RebloggedFrom}
  1944.  
  1945. <!-- POST SOURCE -->
  1946. {block:ContentSource}
  1947. <a class="specs" href="{SourceURL}" title="source">
  1948. <span class="th th-location-4-o" aria-hidden="true"></span> {SourceTitle}
  1949. </a>
  1950. {/block:ContentSource}
  1951.  
  1952. <!-- REBLOG BUTTON -->
  1953. <a class="specs" href="{ReblogURL}" title="reblog this post">
  1954. <span class="th th-reblog" aria-hidden="true"></span> reblog
  1955. </a>
  1956.  
  1957. <!-- LIKE BUTTON -->
  1958. <a class="liked specs" href="#" title="like this post">
  1959. {LikeButton}
  1960. </a>
  1961.  
  1962. <!-- TAGS -->
  1963. {block:HasTags}
  1964. {block:IfShowTags}
  1965. {block:Tags}
  1966. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  1967. <span class="th th-folder-3-o"></span> {Tag}
  1968. </a>
  1969. {/block:Tags}
  1970. {block:IfShowTags}
  1971. {block:IfNotShowTags}
  1972. {block:PermalinkPage}
  1973. {block:Tags}
  1974. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  1975. <span class="th th-folder-3-o"></span>
  1976. {Tag}
  1977. </a>
  1978. {/block:Tags}
  1979. {/block:PermalinkPage}
  1980. {/block:IfNotShowTags}
  1981. {/block:HasTags}
  1982. </div><!-- // end post footer -->
  1983.  
  1984. {block:PermalinkPage}
  1985. {block:NoteCount}
  1986. {block:PostNotes}
  1987. {PostNotes}
  1988. {/block:PostNotes}
  1989. {/block:NoteCount}
  1990. {/block:PermalinkPage}
  1991. </article>
  1992. {/block:Posts}
  1993.  
  1994. <!-- PAGINATION -->
  1995. <article id="f-pagination">
  1996. {block:Pagination}
  1997. <!-- Previous Page -->
  1998. {block:PreviousPage}
  1999. <a class="f-pagi-link" href="{PreviousPage}" title="previous">
  2000. <div class="f-box">
  2001. <span class="th th-chevron-left"></span>
  2002. </div>
  2003. </a>
  2004. {/block:PreviousPage}
  2005.  
  2006. <!-- Jump Pagination -->
  2007. {block:JumpPagination length="3"}
  2008. {block:CurrentPage}
  2009. <span class="current_page">
  2010. <div class="f-box">{PageNumber}</div>
  2011. </span>
  2012. {/block:CurrentPage}
  2013. {block:JumpPage}
  2014. <a class="jump_page f-pagi-link" href="{URL}" title="Page {PageNumber}">
  2015. <div class="f-box">{PageNumber}</div>
  2016. </a>
  2017. {/block:JumpPage}
  2018. {/block:JumpPagination}
  2019.  
  2020. <!-- Next Page -->
  2021. {block:NextPage}
  2022. <a class="f-pagi-link" href="{NextPage}" title="next">
  2023. <div class="f-box">
  2024. <span class="th th-chevron-right"></span>
  2025. </div>
  2026. </a>
  2027. {/block:NextPage}
  2028. {/block:Pagination}
  2029. </article>
  2030.  
  2031. <article id="space"></article>
  2032.  
  2033. <!-- MOBILE FOOTER -->
  2034. <div id="mb-footer">
  2035. <!-- Previous Page -->
  2036. {block:Pagination}
  2037. {block:PreviousPage}
  2038. <a href="{PreviousPage}" title="previous page" class="mbf-link">
  2039. <div class="mbf-nav mbfn1">
  2040. <span class="th th-chevron-left"></span>
  2041. </div>
  2042. </a>
  2043. {/block:PreviousPage}
  2044. {/block:Pagination}
  2045.  
  2046. <!-- Theme Credit -->
  2047. <!-- Don't touch! -->
  2048. <a href="https://silbrigthemes.tumblr.com/" title="theme credit" class="mbf-link">
  2049. <div class="mbf-nav mbfn2">
  2050. <span class="th th-code"></span>
  2051. </div>
  2052. </a>
  2053.  
  2054. <!-- Index -->
  2055. <a href="/" title="index" class="mbf-link">
  2056. <div class="mbf-nav mbfn1">
  2057. <span class="th th-home-o"></span>
  2058. </div>
  2059. </a>
  2060.  
  2061. <!-- Navigation -->
  2062. <div class="dropdown">
  2063. <button onclick="myFunction()" class="dropbtn mbf-nav mbfn2" title="click to show links">
  2064. <span class="th th-dial-o"</span>
  2065. </button>
  2066. <div id="myDropdown" class="dropdown-content">
  2067. <!-- Ask Link -->
  2068. {block:AskEnabled}
  2069. <a href="/ask" title="{AskLabel}">{AskLabel}</a>
  2070. {/block:AskEnabled}
  2071.  
  2072. <!-- Submissions Link -->
  2073. {block:SubmissionsEnabled}
  2074. <a href="/submit" title="{SubmitLabel}">
  2075. {SubmitLabel}
  2076. </a>
  2077. {/block:SubmissionsEnabled}
  2078.  
  2079. <!-- Archive Link -->
  2080. <a href="/archive" title="browse archive">
  2081. Archive
  2082. </a>
  2083.  
  2084. <!-- 1st Custom Link -->
  2085. {block:IfShowLink1}
  2086. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}">
  2087. {text:Custom Link 1}
  2088. </a>
  2089. {/block:IfShowLink1}
  2090.  
  2091. <!-- 2nd Custom Link -->
  2092. {block:IfShowLink2}
  2093. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}">
  2094. {text:Custom Link 2}
  2095. </a>
  2096. {/block:IfShowLink2}
  2097.  
  2098. <!-- 3rd Custom Link -->
  2099. {block:IfShowLink3}
  2100. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}">
  2101. {text:Custom Link 3}
  2102. </a>
  2103. {/block:IfShowLink3}
  2104.  
  2105. <!-- 4th Custom Link -->
  2106. {block:IfShowLink4}
  2107. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}">
  2108. {text:Custom Link 4}
  2109. </a>
  2110. {/block:IfShowLink4}
  2111.  
  2112. <!-- 5th Custom Link -->
  2113. {block:IfShowLink5}
  2114. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}">
  2115. {text:Custom Link 5}
  2116. </a>
  2117. {/block:IfShowLink5}
  2118.  
  2119. <!-- Dashboard Link -->
  2120. <a href="https://www.tumblr.com/dashboard" title="return to dashboard">
  2121. Tumblr Dashboard
  2122. </a>
  2123.  
  2124. <!-- Follow -->
  2125. <!-- Takes people to a page so that they can follow you. -->
  2126. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}">
  2127. Follow Me
  2128. </a>
  2129. </div>
  2130. </div> <!-- // end navigation panel -->
  2131.  
  2132. <!-- Next Page -->
  2133. {block:Pagination}
  2134. {block:NextPage}
  2135. <a href="{NextPage}" title="next page" class="mbf-link">
  2136. <div class="mbf-nav mbfn1">
  2137. <span class="th th-chevron-right"></span>
  2138. </div>
  2139. </a>
  2140. {/block:NextPage}
  2141. {/block:Pagination}
  2142. </div> <!-- // end mobile footer -->
  2143.  
  2144. <!-- CREDIT -->
  2145. <!-- Do NOT delete the credit! -->
  2146. <a href="https://silbrigthemes.tumblr.com" title="theme by silbrigthemes" class="credlink">
  2147. <div class="credit">
  2148. <span class="th th-blossom-o"></span>
  2149. </div>
  2150. </a>
  2151.  
  2152. <!-- SCRIPTS -->
  2153. <!-- CSS PHOTOSETS SCRIPT -->
  2154. <!-- by annasthms and espoirthemes -->
  2155. <script>
  2156. function gatherData(images, arr) {
  2157. for (let i = 0; i < images.length; i++) {
  2158. let currentData = {
  2159. "width": images[i].getAttribute('data-width'),
  2160. "height": images[i].getAttribute('data-height'),
  2161. "low_res": images[i].getAttribute('data-lowres'),
  2162. "high_res": images[i].getAttribute('data-highres')
  2163. };
  2164. arr.push(currentData);
  2165. }
  2166. }
  2167. function getIndex(elem) {
  2168. let i = 0;
  2169. while( (elem = elem.previousElementSibling) != null ) i++;
  2170. return i;
  2171. }
  2172. function lightbox(elem) {
  2173. let currentPhotoset = elem.parentNode;
  2174. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2175. let data = [];
  2176. gatherData(photosetPhotos, data);
  2177. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2178. }
  2179. </script>
  2180.  
  2181. <!-- RESPONSIVE VIDEOS -->
  2182. <!-- Responsive videos script, by @nouvae. -->
  2183. <script>
  2184. $(document).ready(function() {
  2185. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  2186. });
  2187. </script>
  2188.  
  2189. <script>
  2190. function flexFrame() {
  2191. $(".caption").each(function() {
  2192. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2193. flexibleFrames($(".capframe"));
  2194. });
  2195. flexibleFrames($(".video"));
  2196. }
  2197.  
  2198. $(document).ready(flexFrame);
  2199. </script>
  2200.  
  2201. <!-- CLICKABLE DROPDOWN MENU -->
  2202. <!-- Tutorial by w3schools. -->
  2203. <script>
  2204. /* When the user clicks on the button,
  2205. toggle between hiding and showing the dropdown content */
  2206. function myFunction() {
  2207. document.getElementById("myDropdown").classList.toggle("show");
  2208. }
  2209.  
  2210. // Close the dropdown if the user clicks outside of it
  2211. window.onclick = function(event) {
  2212. if (!event.target.matches('.dropbtn')) {
  2213. var dropdowns = document.getElementsByClassName("dropdown-content");
  2214. var i;
  2215. for (i = 0; i < dropdowns.length; i++) {
  2216. var openDropdown = dropdowns[i];
  2217. if (openDropdown.classList.contains('show')) {
  2218. openDropdown.classList.remove('show');
  2219. }
  2220. }
  2221. }
  2222. }
  2223. </script>
  2224.  
  2225. {block:IfMasonry}
  2226. <!-- Masonry Script, by DeSandro -->
  2227. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  2228. var $grid = $("body").masonry({
  2229. itemSelector: "article",
  2230. initLayout: 1
  2231. });
  2232. $grid.imagesLoaded().progress(function() {
  2233. $grid.masonry("layout")
  2234. });
  2235. });
  2236. </script>
  2237. {/block:IfMasonry}
  2238.  
  2239. <!-- NPF PHOTOSETS -->
  2240. <!-- NPF photoset script, by glenthemes. -->
  2241. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  2242. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  2243.  
  2244. <script>
  2245. npfPhotosets("article", npfOptions);
  2246. // article is your posts selector
  2247. </script>
  2248.  
  2249. <!-- Tooltips, TippyJs -->
  2250. <script src="https://unpkg.com/popper.js@1"></script>
  2251. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  2252. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  2253.  
  2254. <script>
  2255. tippy('a[title], button[title]', {
  2256. theme: 'stadt',
  2257. zIndex: 9999999999,
  2258. arrow: tippy.roundArrow,
  2259. maxWidth: 300,
  2260.  
  2261. content(reference) {
  2262. const title = reference.getAttribute('title');
  2263. reference.removeAttribute('title');
  2264. return title;
  2265. },
  2266. });
  2267. </script>
  2268.  
  2269. </body>
  2270. </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!