API tools faq
paste
silbrigthemes

Weihnachtsstern (Theme #12)

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