API tools faq
paste
silbrigthemes

Sonnenuntergang (Theme #13)

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