API tools faq
paste
silbrigthemes

Grundlagen (Theme #9 | with JS)

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