API tools faq
paste
silbrigthemes

Diamant (Theme #7)

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