API tools faq
paste
silbrigthemes

Rudimentär (Theme #3)

silbrigthemes
Apr 16th, 2018
463
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 57.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. RUDIMENTÄR
  7. Theme #3 by @silbrigthemes
  8.  
  9. "unvollständig, unvollkommen, nur in Ansätzen [vorhanden], unzureichend"
  10.  
  11. A very simple theme.
  12.  
  13. RULES:
  14.  
  15. 1) Do not claim as your own.
  16. 2) Do not steal (parts of) the code.
  17. 3) Do not edit beyond recognition.
  18. 4) Do not use as a base code.
  19. 5) Do not delete or alter the credit.
  20. 6) Please like / reblog if you’re using this theme.
  21.  
  22. If you have any questions or need help, feel free to contact me via
  23. -> silbrigthemes.tumblr.com/ask
  24. -> silbrigsupport.tumblr.com
  25.  
  26. Have fun!
  27.  
  28. -->
  29.  
  30. <head>
  31.  
  32. <meta charset="utf-16">
  33. <title>{Title}</title>
  34. {block:Description}
  35. <meta name="description" content="{MetaDescription}" />
  36. {/block:Description}
  37. <link rel="shortcut icon" href="{Favicon}"/>
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  39. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  40.  
  41. <!-- Necessary for the theme to be responsible. -->
  42. <meta name="viewport" content="width=device-width, initial-scale=1">
  43.  
  44. <!-- Icon font, by fontawesome. -->
  45. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
  46.  
  47. <!-- Changes the toolbar color on mobile. -->
  48. <meta name="theme-color" content="{color:Borders}"/>
  49.  
  50. <!-- Necessary for the scripts to work. -->
  51. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  52.  
  53. <!-- Change Audio iframe color script, by @shudesigns. -->
  54. <script>
  55. $(document).ready(function() {
  56. $('iframe.tumblr_audio_player').load( function() {
  57. // Audio Fallback Background
  58. $('iframe.tumblr_audio_player').contents().find("head")
  59. .append($("<style type='text/css'> .audio-player{background:{color:Body Background} !important} </style>"));
  60. // Audio Track Color
  61. $('iframe.tumblr_audio_player').contents().find("head")
  62. .append($("<style type='text/css'> .track-name{color:{color:Text Color} !important} </style>"));
  63. // Audio Artist Color
  64. $('iframe.tumblr_audio_player').contents().find("head")
  65. .append($("<style type='text/css'> .track-artist{color:{color:Text Color} !important} </style>"));
  66. // Audio Play Button Color
  67. $('iframe.tumblr_audio_player').contents().find("head")
  68. .append($("<style type='text/css'> .play-pause{color:{color:Text Color} !important} </style>"));
  69. });
  70. });
  71. </script>
  72.  
  73. <!-- Necessary for PXU photosets. -->
  74. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  75. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  76.  
  77. <!-- Responsive videos, by @nouvae. -->
  78. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  79.  
  80. <!-- Custom font for preformatted text. -->
  81. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  82.  
  83. <!-- Body Fonts. -->
  84. <link href="https://fonts.googleapis.com/css?family=Roboto&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  85. <link href="https://fonts.googleapis.com/css?family=Open+Sans&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  86. <link href="https://fonts.googleapis.com/css?family=Lato&amp;subset=latin-ext" rel="stylesheet">
  87.  
  88. <!-- Title Fonts. -->
  89. <link href="https://fonts.googleapis.com/css?family=Merriweather&amp;subset=cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  90. <link href="https://fonts.googleapis.com/css?family=Oswald&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  91. <link href="https://fonts.googleapis.com/css?family=Playfair+Display&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  92.  
  93. <!-- Other fonts. -->
  94. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  95. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  96. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  97.  
  98. <meta name="select:Body Font" content="Roboto" title="Roboto"/>
  99. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  100. <meta name="select:Body Font" content="Lato" title="Lato"/>
  101.  
  102. <meta name="select:Font Size" content="1em" title="16px"/>
  103. <meta name="select:Font Size" content="0.875em" title="14px"/>
  104. <meta name="select:Font Size" content="0.75em" title="12px"/>
  105.  
  106. <meta name="select:Post Width" content="500px" title="500px"/>
  107. <meta name="select:Post Width" content="550px" title="550px"/>
  108. <meta name="select:Post Width" content="600px" title="600px"/>
  109. <meta name="select:Post Width" content="650px" title="650px"/>
  110. <meta name="select:Post Width" content="700px" title="700px"/>
  111. <meta name="select:Post Width" content="750px" title="750px"/>
  112.  
  113. <meta name="select:Text Align" content="justify" title="justify"/>
  114. <meta name="select:Text Align" content="normal" title="normal"/>
  115.  
  116. <meta name="select:Title Font" content="Merriweather" title="Merriweather"/>
  117. <meta name="select:Title Font" content="Oswald" title="Oswald"/>
  118. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  119.  
  120. <meta name="if:ShowCaptions" content="1"/>
  121.  
  122. <meta name="if:Custom Link 1" content="1"/>
  123. <meta name="text:Custom Link 1" content="Custom 1"/>
  124. <meta name="text:Custom URL 1" content="/"/>
  125.  
  126. <meta name="if:Custom Link 2" content="1"/>
  127. <meta name="text:Custom Link 2" content="Custom 2"/>
  128. <meta name="text:Custom URL 2" content="/"/>
  129.  
  130. <meta name="if:Custom Link 3" content="1"/>
  131. <meta name="text:Custom Link 3" content="Custom 3"/>
  132. <meta name="text:Custom URL 3" content="/"/>
  133.  
  134. <meta name="if:Custom Link 4" content="1"/>
  135. <meta name="text:Custom Link 4" content="Custom 4"/>
  136. <meta name="text:Custom URL 4" content="/"/>
  137.  
  138. <meta name="if:Custom Link 5" content="1"/>
  139. <meta name="text:Custom Link 5" content="Custom 5"/>
  140. <meta name="text:Custom URL 5" content="/"/>
  141.  
  142. <meta name="text:Photoset Gutter" content="4px"/>
  143.  
  144. <meta name="color:Answer" content="#f0f0f0"/>
  145. <meta name="color:Body Background" content="#eee"/>
  146. <meta name="color:Bold" content="#555"/>
  147. <meta name="color:Borders" content="#ccc"/>
  148. <meta name="color:Borders Hover" content="#333"/>
  149. <meta name="color:Even" content="#f0f0f0"/>
  150. <meta name="color:Even Text" content="#333"/>
  151. <meta name="color:Italic" content="#111"/>
  152. <meta name="color:Link Hover" content="#888"/>
  153. <meta name="color:Marked Text" content="#ccc"/>
  154. <meta name="color:Odd" content="#f6f6f6"/>
  155. <meta name="color:Odd Text" content="#333"/>
  156. <meta name="color:Post Background" content="#fff"/>
  157. <meta name="color:Question" content="#f6f6f6"/>
  158. <meta name="color:Scrollbar Thumb" content="#333"/>
  159. <meta name="color:Selection Background" content="#eee"/>
  160. <meta name="color:Selection Text" content="#333"/>
  161. <meta name="color:Text Color" content="#333"/>
  162.  
  163. <style>
  164.  
  165. body{
  166. margin:0;
  167. font-size:{select:Font Size};
  168. color:{color:Text Color};
  169. background-color:{color:Body Background};
  170. font-family:{select:Body Font}, Verdana;
  171. overflow-x:hidden;
  172. }
  173.  
  174. /* Custom Tooltips */
  175. .tippy-tooltip.rudimentaer-theme{
  176. color:{color:Body Background};
  177. background-color:{color:Italic};
  178. text-align:left;
  179. text-transform:lowercase;
  180. }
  181.  
  182. .tippy-tooltip.rudimentaer-theme .tippy-svg-arrow{
  183. fill:{color:Italic};
  184. }
  185.  
  186. /* Custom Scrollbar */
  187. ::-webkit-scrollbar{
  188. width:8px;
  189. background-color:{color:Body Background};
  190. }
  191.  
  192. ::-webkit-scrollbar-thumb{
  193. width:8px;
  194. background-color:{color:Scrollbar Thumb};
  195. border-right:1px solid {color:Body Background};
  196. border-radius:2px;
  197. }
  198.  
  199. /* Custom Selection */
  200. ::selection{
  201. background-color:{color:Selection Background};
  202. color:{color:Selection Text};
  203. }
  204.  
  205. ::-webkit-selection{
  206. background-color:{color:Selection Background};
  207. color:{color:Selection Text};
  208. }
  209.  
  210. ::-o-selection{
  211. background-color:{color:Selection Background};
  212. color:{color:Selection Text};
  213. }
  214.  
  215. ::-moz-selection{
  216. background-color:{color:Selection Background};
  217. color:{color:Selection Text};
  218. }
  219.  
  220. /** SPECIAL FONTS **/
  221. /* Quirky Font */
  222. p.npf_quirky{
  223. /*Tumblr uses Fairwater as a font for .npf_quirky, but since it's not a free font, I have used this alternative.*/
  224. font-family: 'Dancing Script', cursive;
  225. font-size:calc({select:Font Size} + 0.5em);
  226.  
  227. }
  228.  
  229. /* Chat Font */
  230. p.npf_chat{
  231. font-family:Courier;
  232.  
  233. }
  234.  
  235. /* Quote Font */
  236. p.npf_quote{
  237. /*Tumblr uses Calluna as a font for .npf_quote, but since it's not a free font, I have used these alternatives.*/
  238. font-family:"Cormorant Garamond", "Palatino";
  239. font-size:calc({select:Font Size} + 0.5em);
  240.  
  241. }
  242.  
  243. /* Bold Text */
  244. b, strong{
  245. font-weight:bold;
  246. color:{color:Bold};
  247. }
  248.  
  249. /* Italic Text */
  250. i, em{
  251. font-style:italic;
  252. color:{color:Italic};
  253. }
  254.  
  255. /* Primary Heading */
  256. h1{
  257. font-size:calc({select:Font Size} * 3);
  258. }
  259.  
  260. /* Secondary Heading */
  261. h2{
  262. font-size:calc({select:Font Size} * 2);
  263. }
  264.  
  265. /* Marked Text */
  266. mark{
  267. padding:0 4px 0 4px;
  268. background-color:{color:Marked Text};
  269. border-radius:2px;
  270. }
  271.  
  272. /* Text Line */
  273. hr{
  274. width:80%;
  275. height:4px;
  276. background-color:{color:Borders};
  277. border:none;
  278. }
  279.  
  280. /* Preformatted Text */
  281. pre{
  282. word-wrap:break-all;
  283. white-space:pre-wrap;
  284. padding:0.5em;
  285. background-color:{color:Selection Background};
  286. font-family:"Roboto Mono", "Times New Roman";
  287. font-size:calc({select:Font Size} - 2px);
  288. }
  289.  
  290. /* Underlined Text */
  291. u{
  292. text-decoration:none;
  293. border-bottom:2px solid {color:Text Color};
  294. }
  295.  
  296. /* Empty Paragraphs */
  297. p:empty{
  298. display:none;
  299. }
  300.  
  301. a{
  302. text-decoration:none;
  303. border-bottom:2px solid {color:Body Background};
  304. color:{color:Text Color};
  305. }
  306.  
  307. a:hover{
  308. border-bottom:2px solid {color:Borders};
  309. color:{color:Text Color};
  310. }
  311.  
  312. a, a:hover{
  313. transition:0.5s;
  314. -moz-transition:0.5s;
  315. -o-transition:0.5s;
  316. -webkit-transition:0.5s;
  317. }
  318.  
  319. #posts{
  320. width:100vw;
  321. height:auto;
  322. }
  323.  
  324. /** HEADER **/
  325. header{
  326. width:{select:Post Width};
  327. margin-top:4em;
  328. margin-bottom:2em;
  329. margin-left:calc(50vw - ({select:Post Width}/2));
  330. height:auto;
  331. background-color:{color:Post Background};
  332. padding:0.5em;
  333. display:flex;
  334. align-items:center;
  335. justify-content:center;
  336. flex-direction:column;
  337. border-radius:5px;
  338. }
  339.  
  340. #heading{
  341. width:100%;
  342. height:auto;
  343. display:flex;
  344. align-items:center;
  345. justify-content:center;
  346. }
  347.  
  348. #h-icon img{
  349. border-radius:50%;
  350. width:96px;
  351. width:96px;
  352. border:2px solid {color:Borders};
  353. margin:1em;
  354. }
  355.  
  356. #h-spec{
  357. margin:1em;
  358. }
  359.  
  360. #h-title{
  361. font-size:32px;
  362. font-family:{select:Title Font};
  363. }
  364.  
  365. #h-links{
  366. height:auto;
  367. width:100%;
  368. display:flex;
  369. justify-content:flex-start;
  370. align-items:center;
  371. flex-wrap:wrap;
  372. border-top:2px solid {color:Borders};
  373. padding-top:8px;
  374. }
  375.  
  376. a.toplinks{
  377. padding:4px 8px;
  378. border-radius:4px;
  379. background-color:{color:Body Background};
  380. color:{color:Text Color};
  381. font-size:calc(1em - 2px);
  382. margin-right:4px;
  383. margin-bottom:4px;
  384. text-decoration:none;
  385. border:none;
  386. }
  387.  
  388. a.toplinks:hover{
  389. background-color:{color:Borders};
  390. color:{color:Text Color};
  391. }
  392.  
  393. a.toplinks, a.toplinks:hover{
  394. transition:0.5s;
  395. -moz-transition:0.5s;
  396. -o-transition:0.5s;
  397. -webkit-transition:0.5s;
  398. }
  399.  
  400. /*** POSTS ***/
  401. article{
  402. width:{select:Post Width};
  403. margin-top:2em;
  404. margin-bottom:2em;
  405. margin-left:calc(50vw - ({select:Post Width}/2));
  406. height:auto;
  407. background-color:{color:Post Background};
  408. padding:0.5em;
  409. border-radius:5px;
  410. }
  411.  
  412. article .photoset{
  413. max-width:100%;
  414. width:100%;
  415. }
  416.  
  417. article img{
  418. max-width:100%;
  419. width:100%;
  420. }
  421.  
  422. /** TEXT POSTS **/
  423. .text{
  424. text-align:{select:Text Align};
  425. padding:0.5em;
  426. }
  427.  
  428. .text h2{
  429. font-size:24px;
  430. font-family:{select:Title Font};
  431. font-weight:300;
  432. }
  433.  
  434. .title{
  435. padding:0.5em;
  436. padding-bottom:0.25em;
  437. font-family:{select:Title Font};
  438. font-size:32px;
  439. font-weight:900;
  440. border-bottom:4px solid {color:Borders};
  441. width:80%;
  442. margin-left:calc(10% - 0.5em);
  443. text-align:center;
  444. }
  445.  
  446. /** PANORAMA IMAGES **/
  447. .pano_lightbox{
  448. background-color:rgba({RGBcolor:Body Background},.98)!important;
  449. }
  450.  
  451. .pano_container{
  452. background-color:rgba({RGBcolor:Body Background},.98)!important;
  453. }
  454.  
  455. .tmblr-pano-lightbox-container, #tmblr-pano-lightbox-container{
  456. background-color:rgba({RGBcolor:Body Background},.98)!important;
  457. }
  458.  
  459. #vignette, .vignette{
  460. opacity:0;
  461. }
  462.  
  463. /* –– NPF Photoset Fix, by glenthemes */
  464. :root {
  465. --NPF-Image-Spacing:{text:Photoset Gutter}; /* spacing value */
  466. }
  467.  
  468. .npf_row {
  469. display:flex!important;
  470. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  471. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  472. }
  473.  
  474. .npf_row:last-of-type {
  475. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  476. }
  477.  
  478. .tmblr-full {
  479. flex:1;
  480. margin:0!important;
  481. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  482. width:auto!important;
  483. height:auto!important;
  484. cursor:pointer;
  485. outline:none;
  486. }
  487.  
  488. article img, .tmblr-full img {
  489. max-width:100%;
  490. }
  491.  
  492. a.tumblr-box{
  493. border-bottom:none;
  494. }
  495.  
  496. /** QUOTE POSTS **/
  497. .quoted{
  498. font-family:{select:Title Font};
  499. font-size:calc({select:Font Size} * 1.5);
  500. text-align:center;
  501. padding:0.5em;
  502. }
  503.  
  504. .quote-source{
  505. padding:0.5em;
  506. }
  507.  
  508. .quote-source a{
  509. text-decoration:none;
  510. color:{color:Text Color};
  511. border-bottom:4px solid {color:Borders};
  512. transition:0.5s;
  513. -moz-transition:0.5s;
  514. -o-transition:0.5s;
  515. -webkit-transition:0.5s;
  516. }
  517.  
  518. .quote-source a:hover{
  519. border-bottom:4px solid {color:Borders Hover};
  520. transition:0.5s;
  521. -moz-transition:0.5s;
  522. -o-transition:0.5s;
  523. -webkit-transition:0.5s;
  524. }
  525.  
  526. /** AUDIO POSTS **/
  527. .audio > iframe{
  528. width:100%;
  529. }
  530.  
  531. /** VIDEO POSTS **/
  532. .video > iframe{
  533. width:100%;
  534. }
  535.  
  536. .video iframe{
  537. border:none;
  538. }
  539.  
  540. /** CHAT POSTS **/
  541. .chatterbox{
  542. width:100%;
  543. overflow:hidden;
  544. }
  545.  
  546. .chat{
  547. width:100%;
  548. }
  549.  
  550. .chat .clear{
  551. clear:both;
  552. }
  553.  
  554. .chat .label_odd, .line_odd{
  555. background-color:{color:Odd};
  556. color:{color:Odd Text};
  557. height:auto;
  558. width:80%;
  559. margin-left:calc(10% - 1em);
  560. float:left;
  561. padding:0.25em;
  562. }
  563.  
  564. .chat .line_odd{
  565. margin-bottom:0.5em;
  566. border-radius:0px 0px 5px 5px;
  567. }
  568.  
  569. .chat .label_odd{
  570. border-radius:5px 5px 0px 0px;
  571. font-weight:bold;
  572. margin-top:0.5em;
  573. }
  574.  
  575. .chat .label_even, .line_even{
  576. background-color:{color:Even};
  577. color:{color:Even Text};
  578. width:80%;
  579. height:auto;
  580. float:right;
  581. text-align:right;
  582. padding:0.25em;
  583. margin-right:calc(10% - 1em);
  584. }
  585.  
  586. .chat .line_even{
  587. border-radius:0px 0px 5px 5px;
  588. }
  589.  
  590. .chat .label_even{
  591. border-radius:5px 5px 0px 0px;
  592. font-weight:bold;
  593. }
  594.  
  595. /** LINK POSTS **/
  596. .link-posts a{
  597. text-decoration:none;
  598. color:{color:Text Color};
  599. }
  600.  
  601. .link-posts{
  602. text-align:center;
  603. font-family:{select:Title Font};
  604. font-size:calc({select:Font Size} * 1.5);
  605. margin-top:0.5em;
  606. width:100%;
  607. transition:0.5s;
  608. -moz-transition:0.5s;
  609. -o-transition:0.5s;
  610. -webkit-transition:0.5s;
  611. }
  612.  
  613. .link-posts a:hover{
  614. color:{color:Link Hover};
  615. transition:0.5s;
  616. -moz-transition:0.5s;
  617. -o-transition:0.5s;
  618. -webkit-transition:0.5s;
  619. }
  620.  
  621. .link-cont{
  622. display:flex;
  623. align-items:center;
  624. justify-content:center;
  625. width:100%;
  626. height:auto;
  627. }
  628.  
  629. .link-image img{
  630. width:40%;
  631. border-radius:5px;
  632. margin-left:-60%;
  633. margin-top:-0.5em;
  634. margin-bottom:-0.5em;
  635. }
  636.  
  637. .thumbtitle{
  638. width:60%;
  639. margin-left:calc(-60% + 0.5em);
  640. }
  641.  
  642. /** QUESTION POSTS **/
  643. /* Questions */
  644. .question{
  645. width:80%;
  646. margin-left:10%;
  647. margin-top:2em;
  648. margin-bottom:0.5em;
  649. padding:0.5em;
  650. display:flex;
  651. align-items:center;
  652. justify-content:flex-start;
  653. flex-direction:column;
  654. background-color:{color:Question};
  655. }
  656.  
  657. .question-username{
  658. margin-bottom:0.5em;
  659. }
  660.  
  661. .question-username img{
  662. display:none;
  663. }
  664.  
  665. .question-username a{
  666. text-decoration:none;
  667. color:{color:Text Color};
  668. border-bottom:4px solid {color:Borders};
  669. transition:0.5s;
  670. -moz-transition:0.5s;
  671. -o-transition:0.5s;
  672. -webkit-transition:0.5s;
  673. }
  674.  
  675. .question-username a:hover{
  676. border-bottom:4px solid {color:Borders Hover};
  677. transition:0.5s;
  678. -moz-transition:0.5s;
  679. -o-transition:0.5s;
  680. -webkit-transition:0.5s;
  681. }
  682.  
  683. /* Answer */
  684. .answer{
  685. width:80%;
  686. margin-left:10%;
  687. margin-top:1em;
  688. margin-bottom:0.5em;
  689. padding:0.5em;
  690. display:flex;
  691. align-items:center;
  692. justify-content:flex-start;
  693. flex-direction:column;
  694. background-color:{color:Answer};
  695. }
  696.  
  697. .answer-username{
  698. margin-bottom:0.5em;
  699. }
  700.  
  701. .answer-username img{
  702. display:none;
  703. }
  704.  
  705. .answer-username a{
  706. text-decoration:none;
  707. color:{color:Text Color};
  708. border-bottom:4px solid {color:Borders};
  709. transition:0.5s;
  710. -moz-transition:0.5s;
  711. -o-transition:0.5s;
  712. -webkit-transition:0.5s;
  713. }
  714.  
  715. .answer-username a:hover{
  716. border-bottom:4px solid {color:Borders Hover};
  717. transition:0.5s;
  718. -moz-transition:0.5s;
  719. -o-transition:0.5s;
  720. -webkit-transition:0.5s;
  721. }
  722.  
  723. /*** USER SPECIFICATION ***/
  724. .cimg{
  725. display:none;
  726. }
  727.  
  728. .user{
  729. margin-top:0.5em;
  730. }
  731.  
  732. .user a{
  733. text-decoration:none;
  734. border-bottom:none;
  735. }
  736.  
  737. a.user{
  738. background-color:{color:Body Background};
  739. color:{color:Text Color};
  740. padding:4px 8px;
  741. border-radius:4px;
  742. }
  743.  
  744. a.user:before{
  745. content:"\f2bd";
  746. font-family:"Font Awesome\ 5 Free";
  747. font-weight:400;
  748. position:relative;
  749. font-size:calc(1em - 2px);
  750. z-index:10!important;
  751. margin-right:4px;
  752. }
  753.  
  754. a.user:hover{
  755. background-color:{color:Borders};
  756. color:{color:Text Color};
  757. }
  758.  
  759. a.user, a.user:hover{
  760. transition:0.5s;
  761. -moz-transition:0.5s;
  762. -o-transition:0.5s;
  763. -webkit-transition:0.5s;
  764. }
  765.  
  766. span.user{
  767. background-color:{color:Body Background};
  768. color:{color:Text Color};
  769. padding:4px 8px;
  770. border-radius:4px;
  771. padding-top:0.5em;
  772. }
  773.  
  774. span.user:before{
  775. content:"\f2bd";
  776. font-family:"Font Awesome\ 5 Free";
  777. font-weight:400;
  778. position:relative;
  779. font-size:calc(1em - 2px);
  780. z-index:10!important;
  781. margin-right:4px;
  782. }
  783.  
  784. span.user:hover{
  785. background-color:{color:Borders};
  786. color:{color:Text Color};
  787. }
  788.  
  789. span.user, span.user:hover{
  790. transition:0.5s;
  791. -moz-transition:0.5s;
  792. -o-transition:0.5s;
  793. -webkit-transition:0.5s;
  794. }
  795.  
  796. /*** PERMALINK PAGE ***/
  797. img.avatar{
  798. display:none;
  799. }
  800.  
  801. ol.notes{
  802. list-style-type:none;
  803. margin-left:0px;
  804. border-bottom:none;
  805. font-size:calc(1em - 2px);
  806. }
  807.  
  808. ol.notes:hover{
  809. border-bottom:none;
  810. }
  811.  
  812. li.note{
  813. line-height:1.5em;
  814. margin-left:-2em;
  815. }
  816.  
  817. li.like:before, li.reblog:before, li.reply:before{
  818. font-family:"Font Awesome\ 5 Free";
  819. font-weight:700;
  820. position:relative;
  821. font-size:calc(1em - 4px);
  822. margin-right:4px;
  823. padding-right:4px;
  824. z-index:10!important;
  825. }
  826.  
  827. li.like:before{
  828. content:"\f004";
  829. }
  830.  
  831. li.reblog:before{
  832. content:"\f2f1";
  833. }
  834.  
  835. li.reply:before{
  836. content:"\f075";
  837. }
  838.  
  839. .notes a{
  840. text-decoration:none;
  841. color:{color:Text Color};
  842. border-bottom:2px solid {color:Borders};
  843. margin-bottom:0.25em;
  844. }
  845.  
  846. .notes a:hover{
  847. border-bottom:2px solid {color:Borders Hover};
  848. }
  849.  
  850. .notes a, .notes a:hover{
  851. transition:0.5s;
  852. -moz-transition:0.5s;
  853. -o-transition:0.5s;
  854. -webkit-transition:0.5s;
  855. }
  856.  
  857. /* POST INFORMATION */
  858. .post-information{
  859. display:flex;
  860. align-items:flex-start;
  861. justify-content:flex-start;
  862. flex-wrap:wrap;
  863. margin-top:1em;
  864. padding-top:8px;
  865. clear:both;
  866. border-top:2px solid {color:Borders};
  867. }
  868.  
  869. /* Specification Link */
  870. a.specs{
  871. background-color:{color:Body Background};
  872. color:{color:Text Color};
  873. padding:4px 8px;
  874. border-radius:4px;
  875. margin-right:4px;
  876. margin-bottom:4px;
  877. font-size:calc(1em - 2px);
  878. text-transform:lowercase;
  879. border-bottom:none;
  880. box-shadow:none;
  881. }
  882.  
  883. a.specs span{
  884. margin-right:4px;
  885. font-size:calc(1em - 2px);
  886. }
  887.  
  888. /* Specification Link | Hover */
  889. a.specs:hover{
  890. background-color:{color:Borders};
  891. color:{color:Text Color};
  892. }
  893.  
  894. /* Specification Link | Transitions */
  895. a.specs, a.specs:hover{
  896. transition:0.5s;
  897. -moz-transition:0.5s;
  898. -o-transition:0.5s;
  899. -webkit-transition:0.5s;
  900. }
  901.  
  902. /* LIKE BUTTON */
  903. /* Like Button */
  904. .like_button {
  905. display:inline-block;
  906. position:relative;
  907. margin-top:-4px;
  908. font-size:1em;
  909. }
  910.  
  911. /* Like Button iFrame */
  912. .like_button iframe {
  913. height:100%;
  914. left:0;
  915. opacity:0;
  916. position:absolute;
  917. top:0;
  918. width:100%;
  919. z-index:1!important;
  920. border-bottom:none;
  921. }
  922.  
  923. /* Like Button Before Element */
  924. .like_button:before{
  925. content:"\f004";
  926. font-family:'Font Awesome 5 Free';
  927. font-weight:700;
  928. position:relative;
  929. font-size:calc(1em - 2px);
  930. z-index:0!important;
  931. margin-right:4px;
  932. }
  933.  
  934. /* Like Button After Element */
  935. .like_button:after {
  936. content:'like';
  937. z-index:0!important;
  938. }
  939.  
  940. .notes a{
  941. text-decoration:none;
  942. }
  943.  
  944. /* Custom Lightbox */
  945. .vignette, #vignette {
  946. opacity:0;
  947. }
  948. .lightbox-image, #tumblr_lightbox img {
  949. box-shadow:none!important;
  950. border-radius:0!important;
  951. max-width:none;
  952. }
  953.  
  954. .tmblr-lightbox, #tumblr_lightbox {
  955. background-color:rgba({RGBcolor:Body Background},.98)!important;
  956. }
  957.  
  958. /*** FOOTER ***/
  959. footer{
  960. width:{select:Post Width};
  961. margin-top:2em;
  962. margin-bottom:4em;
  963. margin-left:calc(50vw - ({select:Post Width}/2));
  964. height:auto;
  965. background-color:{color:Post Background};
  966. padding:1em 0.5em;
  967. text-align:center;
  968. display:flex;
  969. align-items:center;
  970. justify-content:space-between;
  971. border-radius:5px;
  972. {block:IndexPage}
  973. display:block;
  974. {/block:IndexPage}
  975. }
  976.  
  977. a.pagi{
  978. background-color:{color:Body Background};
  979. color:{color:Text Color};
  980. padding:4px 8px;
  981. border-radius:4px;
  982. border-bottom:none;
  983. margin-left:0.5em;
  984. margin-right:0.5em;
  985. }
  986.  
  987. a.pagi:hover{
  988. background-color:{color:Borders};
  989. color:{color:Text Color};
  990. }
  991.  
  992. a.pagi, a.pagi:hover{
  993. transition:0.5s;
  994. -moz-transition:0.5s;
  995. -o-transition:0.5s;
  996. -webkit-transition:0.5s;
  997. }
  998.  
  999. /* Hides the tumblr app button. By @yeoli-thm */
  1000. .tmblr-iframe--app-cta-button {
  1001. display: none!important;
  1002. }
  1003.  
  1004. /*** RESPONSIVE STUFF ***/
  1005. @media only screen and (min-width:800px){
  1006. #mb-footer, #space{
  1007. display:none;
  1008. }
  1009. }
  1010.  
  1011. @media only screen and (max-width:800px){
  1012. header, article{
  1013. width:80vw;
  1014. margin-left:calc(10vw - 0.5em);
  1015. }
  1016.  
  1017. #heading{
  1018. flex-direction:column;
  1019. align-items:center;
  1020. justify-content:center;
  1021. }
  1022.  
  1023. #h-title, #h-desc{
  1024. text-align:center;
  1025. }
  1026.  
  1027. footer{
  1028. display:none;
  1029. }
  1030.  
  1031. #space{
  1032. height:4em;
  1033. }
  1034.  
  1035. /* MOBILE FOOTER */
  1036. #mb-footer{
  1037. position:fixed;
  1038. width:100vw;
  1039. height:10vh;
  1040. margin-left:0;
  1041. margin-bottom:0;
  1042. left:0;
  1043. bottom:0;
  1044. border-radius:0;
  1045. border:none;
  1046. background-color:{color:Post Background};
  1047. z-index:99999!important;
  1048. display:flex;
  1049. align-items:center;
  1050. justify-content:space-between;
  1051. }
  1052.  
  1053. /* Mobile Footer Navigation */
  1054. .mbf-nav{
  1055. height:10vh;
  1056. width:20vw;
  1057. background-color:inherit;
  1058. color:{color:Text Color};
  1059. display:flex;
  1060. align-items:center;
  1061. justify-content:center;
  1062. }
  1063.  
  1064. /* Mobile Footer Navigation | Icons */
  1065. .mbf-nav span{
  1066. font-size:1em;
  1067. }
  1068.  
  1069. .mbf-nav span.th-chevron-left,
  1070. .mbf-nav span.th-chevron-right{
  1071. font-size:calc(1em - 2px);
  1072. }
  1073.  
  1074. .mbf-nav span.th-code{
  1075. font-size:calc(1em + 2px);
  1076. }
  1077.  
  1078. /* Mobile Footer Navigation | Hover */
  1079. .mbf-nav:hover, .mbf-nav:focus{
  1080. background-color:{color:Body Background};
  1081. color:{color:Text Color};
  1082. cursor:pointer;
  1083. }
  1084.  
  1085. /* Transitions */
  1086. .mbf-nav, .mbf-nav:hover{
  1087. transition:0.5s;
  1088. -moz-transition:0.5s;
  1089. -o-transition:0.5s;
  1090. -webkit-transition:0.5s;
  1091. }
  1092.  
  1093. /* Mobile Footer Navigation Link */
  1094. a.mbf-link{
  1095. border-bottom:none;
  1096. box-shadow:none;
  1097. }
  1098.  
  1099. /* Dropdown Button */
  1100. .dropbtn {
  1101. font-size:1em;
  1102. cursor:pointer;
  1103. border:none;
  1104. }
  1105.  
  1106. /* Dropdown Button | Focus */
  1107. .dropbtn:focus{
  1108. outline:none;
  1109. border:none;
  1110. }
  1111.  
  1112. /* Dropdown Menu */
  1113. .dropdown {
  1114. position:relative;
  1115. display:inline-block;
  1116. }
  1117.  
  1118. .dropdown-content {
  1119. display:none;
  1120. position:absolute;
  1121. background-color:{color:Post Background};
  1122. min-width:160px;
  1123. overflow:auto;
  1124. z-index:1;
  1125. bottom:100%;
  1126. right:100%;
  1127. font-family:"{select:Body Font}", Verdana;
  1128. font-weight:normal;
  1129. }
  1130.  
  1131. /* Drop Down Menu Link */
  1132. .dropdown-content a{
  1133. color:{color:Text Color};
  1134. padding:12px 16px;
  1135. text-decoration:none;
  1136. display:block;
  1137. border:none;
  1138. box-shadow:none;
  1139. border-top:1px solid {color:Text Color};
  1140. }
  1141.  
  1142. .dropdown-content a:first-child{
  1143. border-top:none;
  1144. }
  1145.  
  1146. /* Drop Down Menu Link | Hover */
  1147. .dropdown-content a:hover{
  1148. background-color:{color:Body Background};
  1149. color:{color:Text Color};
  1150. }
  1151.  
  1152. /* Transitions */
  1153. .dropdown-content a, .dropdown-content a:hover{
  1154. transition:0.5s;
  1155. -moz-transition:0.5s;
  1156. -o-transition:0.5s;
  1157. -webkit-transition:0.5s;
  1158. }
  1159.  
  1160. .show{
  1161. display:block;
  1162. }
  1163. }
  1164.  
  1165. /* Hides standard tumblr controls */
  1166. body > iframe:first-child {
  1167. display: none !important;
  1168. }
  1169.  
  1170. </style>
  1171. </head>
  1172.  
  1173. <body>
  1174. <div id="posts">
  1175.  
  1176. <header>
  1177. <div id="heading">
  1178. <div id="h-icon">
  1179. <img src="{PortraitURL-128}" title="{Title}'s blog icon">
  1180. </div>
  1181. <div id="h-spec">
  1182. <div id="h-title">{Title}</div>
  1183. <div id="h-desc">{Description}</div>
  1184. </div>
  1185. </div>
  1186. <div id="h-links">
  1187. <a class="toplinks" href="/" title="Index Page">
  1188. Index
  1189. </a>
  1190.  
  1191. {block:AskEnabled}
  1192. <a class="toplinks" href="/ask" title="{AskLabel}">
  1193. {AskLabel}
  1194. </a>
  1195. {/block:AskEnabled}
  1196.  
  1197. {block:SubmissionsEnabled}
  1198. <a class="toplinks" href="/submit" title="{SubmitLabel}">
  1199. {SubmitLabel}
  1200. </a>
  1201. {/block:SubmissionsEnabled}
  1202.  
  1203. <a class="toplinks" href="/archive" title="Blog Archive">
  1204. Archive
  1205. </a>
  1206.  
  1207. {block:IfCustomLink1}
  1208. <a class="toplinks" href="{text:Custom URL 1}" title="{text:Custom Link 1}">
  1209. {text:Custom Link 1}
  1210. </a>
  1211. {/block:IfCustomLink1}
  1212.  
  1213. {block:IfCustomLink2}
  1214. <a class="toplinks" href="{text:Custom URL 2}" title="{text:Custom Link 2}">
  1215. {text:Custom Link 2}
  1216. </a>
  1217. {/block:IfCustomLink2}
  1218.  
  1219. {block:IfCustomLink3}
  1220. <a class="toplinks" href="{text:Custom URL 3}" title="{text:Custom Link 3}">
  1221. {text:Custom Link 3}
  1222. </a>
  1223. {/block:IfCustomLink3}
  1224.  
  1225. {block:IfCustomLink4}
  1226. <a class="toplinks" href="{text:Custom URL 4}" title="{text:Custom Link 4}">
  1227. {text:Custom Link 4}
  1228. </a>
  1229. {/block:IfCustomLink4}
  1230.  
  1231. {block:IfCustomLink5}
  1232. <a class="toplinks" href="{text:Custom URL 5}" title="{text:Custom Link 5}">
  1233. {text:Custom Link 5}
  1234. </a>
  1235. {/block:IfCustomLink5}
  1236.  
  1237. <!-- Do not delete! -->
  1238. <a class="toplinks" href="https://silbrigthemes.tumblr.com/" title="theme by silbrigthemes">
  1239. Theme Credit
  1240. </a>
  1241. </div>
  1242. </header>
  1243.  
  1244. {block:Posts}
  1245. <article>
  1246.  
  1247. <!-- TEXT POSTS -->
  1248. {block:Text}
  1249. {block:Title}
  1250. <div class="title">{Title}</div>
  1251. {/block:Title}
  1252. {block:Body}
  1253. {block:NotReblog}
  1254. <div class="text">{Body}</div>
  1255. {/block:NotReblog}
  1256. {block:RebloggedFrom}
  1257. {block:Reblogs}
  1258. {block:HasAvatar}
  1259. {block:HasPermalink}
  1260. <a href="{Permalink}" target="_blank">
  1261. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1262. {/block:HasPermalink}
  1263. {block:HasNoPermalink}
  1264. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1265. {/block:HasNoPermalink}
  1266. {/block:HasAvatar}
  1267. {block:HasPermalink}
  1268. <div class="user">
  1269. <a target="_blank" class="user" href="{Permalink}">
  1270. {Username}
  1271. </a>
  1272. </div>
  1273. {/block:HasPermalink}
  1274. {block:HasNoPermalink}
  1275. <span class="user">{Username}</span>
  1276. {/block:HasNoPermalink}
  1277. <div class="text">{Body}</div>
  1278. {/block:Reblogs}
  1279. {/block:RebloggedFrom}
  1280. {/block:Body}
  1281. {/block:Text}
  1282.  
  1283. <!-- QUESTION POSTS -->
  1284. {block:Answer}
  1285. <div class="question">
  1286. <div class="question-username">
  1287. <img src="{AskerPortraitURL-96}" alt="user icon">
  1288. {Asker}
  1289. </div>
  1290. <div class="q-text">
  1291. {Question}
  1292. </div>
  1293. </div>
  1294.  
  1295. {block:Answerer}
  1296. <div class="answer">
  1297. <div class="answer-username">
  1298. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1299. {Answerer}
  1300. </div>
  1301. {Answer}
  1302. </div>
  1303. {/block:Answerer}
  1304. <div class="q-replies">
  1305. {block:NotReblog}
  1306. <div>{Replies}</div>
  1307. {/block:NotReblog}
  1308. {block:RebloggedFrom}
  1309. {block:Reblogs}
  1310. {block:HasAvatar}
  1311. {block:HasPermalink}
  1312. <a href="{Permalink}" target="_blank">
  1313. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1314. {/block:HasPermalink}
  1315. {block:HasNoPermalink}
  1316. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1317. {/block:HasNoPermalink}
  1318. {/block:HasAvatar}
  1319. {block:HasPermalink}
  1320. <div class="user">
  1321. <a target="_blank" class="user" href="{Permalink}">
  1322. {Username}
  1323. </a>
  1324. </div>
  1325. {/block:HasPermalink}
  1326. {block:HasNoPermalink}
  1327. <span class="user"> {Username} </span>
  1328. {/block:HasNoPermalink}
  1329. <div class="text">{Body}</div>
  1330. {/block:Reblogs}
  1331. {/block:RebloggedFrom}
  1332. </div>
  1333. {/block:Answer}
  1334.  
  1335.  
  1336. <!-- QUOTE POSTS -->
  1337. {block:Quote}
  1338. <div class="quoted">
  1339. {Quote}
  1340. </div>
  1341. {block:Source}
  1342. <div class="quote-source">
  1343. – {Source}
  1344. </div>
  1345. {/block:Source}
  1346. {/block:Quote}
  1347.  
  1348. <!-- LINK POSTS -->
  1349. {block:Link}
  1350. <div class="link-posts">
  1351. <a href="{URL}">
  1352. <div class="link-cont">
  1353. {block:Thumbnail}
  1354. <div class="link-image">
  1355. <img src="{Thumbnail-HighRes}">
  1356. </div>
  1357. {/block:Thumbnail}
  1358. <div class="link-title {block:Thumbnail}thumbtitle{/block:Thumbnail}">
  1359. {Name}
  1360. </div>
  1361. </div>
  1362. {block:Description}
  1363. <div class="link-desc">
  1364. {Description}
  1365. </div>
  1366. {/block:Description}
  1367. </a>
  1368. </div>
  1369. {block:Description}
  1370. {block:NotReblog}
  1371. {Description}
  1372. {/block:NotReblog}
  1373. {block:RebloggedFrom}
  1374. {block:Reblogs}
  1375. {block:HasAvatar}
  1376. {block:HasPermalink}
  1377. <a href="{Permalink}" target="_blank">
  1378. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1379. {/block:HasPermalink}
  1380. {block:HasNoPermalink}
  1381. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1382. {/block:HasNoPermalink}
  1383. {/block:HasAvatar}
  1384. {block:HasPermalink}
  1385. <div class="user">
  1386. <a target="_blank" class="user" href="{Permalink}">
  1387. {Username}
  1388. </a>
  1389. </div>
  1390. {/block:HasPermalink}
  1391. {block:HasNoPermalink}
  1392. <span class="user"> {Username} </span>
  1393. {/block:HasNoPermalink}
  1394. <div class="text">{Body}</div>
  1395. {/block:Reblogs}
  1396. {/block:RebloggedFrom}
  1397. {/block:Description}
  1398. {/block:Link}
  1399.  
  1400. <!-- CHAT POSTS -->
  1401. <div class="chatterbox">
  1402. {block:Chat}
  1403. <div class="chat clear">
  1404. {block:Title}
  1405. <div class="title">{Title}</div>
  1406. {/block:Title}
  1407. {block:Lines}
  1408. {block:Label}
  1409. <span class="label_{alt}">
  1410. {Label}
  1411. </span>
  1412. {/block:Label}
  1413. <div class="line_{alt}">
  1414. {Line}<br>
  1415. </div>
  1416. {/block:Lines}
  1417. </div>
  1418. {/block:Chat}
  1419. </div>
  1420.  
  1421. <!-- PHOTO POSTS -->
  1422. {block:Photo}
  1423. {LinkOpenTag}
  1424. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1425. <div class="photo">
  1426. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1427. </div>
  1428. </a>
  1429. {LinkCloseTag}
  1430. {block:IfShowCaptions}
  1431. {block:Caption}
  1432. {block:NotReblog}{Caption}{/block:NotReblog}
  1433. {block:RebloggedFrom}
  1434. {block:Reblogs}
  1435. {block:HasAvatar}
  1436. {block:HasPermalink}
  1437. <a href="{Permalink}" target="_blank">
  1438. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1439. {/block:HasPermalink}
  1440. {block:HasNoPermalink}
  1441. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1442. {/block:HasNoPermalink}
  1443. {/block:HasAvatar}
  1444. {block:HasPermalink}
  1445. <div class="user">
  1446. <a target="_blank" class="user" href="{Permalink}">
  1447. {Username}
  1448. </a>
  1449. </div>
  1450. {/block:HasPermalink}
  1451. {block:HasNoPermalink}
  1452. <span class="user"> {Username} </span>
  1453. {/block:HasNoPermalink}
  1454. <div class="text">{Body}</div>
  1455. {/block:Reblogs}
  1456. {/block:RebloggedFrom}
  1457. {/block:Caption}
  1458. {/block:IfShowCaptions}
  1459. {/block:Photo}
  1460.  
  1461.  
  1462. <!-- PANORAMA POSTS -->
  1463. {block:Panorama}
  1464. {LinkOpenTag}
  1465. <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">
  1466. <div class="panorama">
  1467. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1468. </div>
  1469. </a>
  1470. {LinkCloseTag}
  1471. {block:IfShowCaptions}
  1472. {block:Caption}
  1473. {block:NotReblog}
  1474. {Caption}
  1475. {/block:NotReblog}
  1476. {block:RebloggedFrom}
  1477. {block:Reblogs}
  1478. {block:HasAvatar}
  1479. {block:HasPermalink}
  1480. <a href="{Permalink}" target="_blank" title="permalink page">
  1481. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1482. {/block:HasPermalink}
  1483. {block:HasNoPermalink}
  1484. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1485. {/block:HasNoPermalink}
  1486. {/block:HasAvatar}
  1487. {block:HasPermalink}
  1488. <div class="user">
  1489. <a target="_blank" class="user" href="{Permalink}" title="permalink page">
  1490. {Username}
  1491. </a>
  1492. </div>
  1493. {/block:HasPermalink}
  1494. {block:HasNoPermalink}
  1495. <span class="user"> {Username} </span>
  1496. {/block:HasNoPermalink}
  1497. <div class="text">{Body}</div>
  1498. {/block:Reblogs}
  1499. {/block:RebloggedFrom}
  1500. {/block:Caption}
  1501. {/block:IfShowCaptions}
  1502. {/block:Panorama}
  1503.  
  1504. <!-- PHOTOSETS -->
  1505. {block:Photoset}
  1506. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1507. {block:Photos}
  1508. <div class="photo-data">
  1509. <div class="pxu-photo">
  1510. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1511. </div>
  1512. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  1513. </a>
  1514. </div>
  1515. {/block:Photos}
  1516. </div>
  1517. {block:IfShowCaptions}
  1518. {block:Caption}
  1519. {block:NotReblog}
  1520. {Caption}
  1521. {/block:NotReblog}
  1522. {block:RebloggedFrom}
  1523. {block:Reblogs}
  1524. {block:HasAvatar}
  1525. {block:HasPermalink}
  1526. <a href="{Permalink}" target="_blank">
  1527. <img class="cimg" src="{PortraitURL-64}"></a>
  1528. {/block:HasPermalink}
  1529. {block:HasNoPermalink}
  1530. <img class="cimg" src="{PortraitURL-64}">
  1531. {/block:HasNoPermalink}
  1532. {/block:HasAvatar}
  1533. {block:HasPermalink}
  1534. <div class="user">
  1535. <a target="_blank" class="user" href="{Permalink}">
  1536. {Username}
  1537. </a>
  1538. </div>
  1539. {/block:HasPermalink}
  1540. {block:HasNoPermalink}
  1541. <span class="user"> {Username} </span>
  1542. {/block:HasNoPermalink}
  1543. <div class="text">{Body}</div>
  1544. {/block:Reblogs}
  1545. {/block:RebloggedFrom}
  1546. {/block:Caption}
  1547. {/block:IfShowCaptions}
  1548. {/block:Photoset}
  1549.  
  1550. <!-- AUDIO POSTS -->
  1551. {block:Audio}
  1552. {block:AudioEmbed}
  1553. <div class="audio">
  1554. {AudioEmbed}
  1555. </div>
  1556. {/block:AudioEmbed}
  1557. {block:Caption}
  1558. {block:NotReblog}
  1559. {Caption}
  1560. {/block:NotReblog}
  1561. {block:RebloggedFrom}
  1562. {block:Reblogs}
  1563. {block:HasAvatar}
  1564. {block:HasPermalink}
  1565. <a href="{Permalink}" target="_blank">
  1566. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1567. {/block:HasPermalink}
  1568. {block:HasNoPermalink}
  1569. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1570. {/block:HasNoPermalink}
  1571. {/block:HasAvatar}
  1572. {block:HasPermalink}
  1573. <div class="user">
  1574. <a target="_blank" class="user" href="{Permalink}">
  1575. {Username}
  1576. </a>
  1577. </div>
  1578. {/block:HasPermalink}
  1579. {block:HasNoPermalink}
  1580. <span class="user"> {Username} </span>
  1581. {/block:HasNoPermalink}
  1582. <div class="text">{Body}</div>
  1583. {/block:Reblogs}
  1584. {/block:RebloggedFrom}
  1585. {/block:Caption}
  1586. {/block:Audio}
  1587.  
  1588. <!-- VIDEO POSTS -->
  1589. {block:Video}
  1590. <div class="video">
  1591. {Video-500}
  1592. </div>
  1593. {block:Caption}
  1594. {block:NotReblog}
  1595. {Caption}
  1596. {/block:NotReblog}
  1597. {block:RebloggedFrom}
  1598. {block:Reblogs}
  1599. {block:HasAvatar}
  1600. {block:HasPermalink}
  1601. <a href="{Permalink}" target="_blank">
  1602. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1603. {/block:HasPermalink}
  1604. {block:HasNoPermalink}
  1605. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1606. {/block:HasNoPermalink}
  1607. {/block:HasAvatar}
  1608. {block:HasPermalink}
  1609. <div class="user">
  1610. <a target="_blank" class="user" href="{Permalink}">
  1611. {Username}
  1612. </a>
  1613. </div>
  1614. {/block:HasPermalink}
  1615. {block:HasNoPermalink}
  1616. <span class="user"> {Username} </span>
  1617. {/block:HasNoPermalink}
  1618. <div class="text">{Body}</div>
  1619. {/block:Reblogs}
  1620. {/block:RebloggedFrom}
  1621. {/block:Caption}
  1622. {/block:Video}
  1623.  
  1624. <!-- POST FOOTER -->
  1625. <div class="post-information">
  1626.  
  1627. <!-- TIME STAMP -->
  1628. {block:Date}
  1629. <a class="specs" href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  1630. <span class="fas fa-clock" aria-hidden="true"></span> {TimeAgo}
  1631. </a>
  1632. {/block:Date}
  1633.  
  1634. <!-- NOTE COUNT -->
  1635. {block:NoteCount}
  1636. <a class="specs" href="{Permalink}" title="{NoteCountWithLabel}">
  1637. <span class="fas fa-info" aria-hidden="true"></span> {NoteCountWithLabel}
  1638. </a>
  1639. {/block:NoteCount}
  1640.  
  1641. <!-- VIA -->
  1642. {block:RebloggedFrom}
  1643. <a class="specs" href="{ReblogParentURL}" title="via">
  1644. <span class="fas fa-paper-plane" aria-hidden="true"></span> via {ReblogParentTitle}
  1645. </a>
  1646. {/block:RebloggedFrom}
  1647.  
  1648. <!-- POST SOURCE -->
  1649. {block:ContentSource}
  1650. <a class="specs" href="{SourceURL}" title="source">
  1651. <span class="fas fa-map-marker-alt" aria-hidden="true"></span> {SourceTitle}
  1652. </a>
  1653. {/block:ContentSource}
  1654.  
  1655. <!-- REBLOG BUTTON -->
  1656. <a class="specs" href="{ReblogURL}" title="reblog this post">
  1657. <span class="fas fa-sync-alt" aria-hidden="true"></span> reblog
  1658. </a>
  1659.  
  1660. <!-- LIKE BUTTON -->
  1661. <a class="liked specs" href="#" title="like this post">
  1662. {LikeButton}
  1663. </a>
  1664.  
  1665. <!-- TAGS -->
  1666. {block:HasTags}
  1667. {block:IfShowTags}
  1668. {block:Tags}
  1669. <a class="specs" href="{TagURL}" title="tagged as: {Tag}">
  1670. <span class="fas fa-tags"></span> {Tag}
  1671. </a>
  1672. {/block:Tags}
  1673. {block:IfShowTags}
  1674. {/block:HasTags}
  1675. </div><!-- // end post footer -->
  1676.  
  1677. {block:PermalinkPage}
  1678. {block:NoteCount}
  1679. {block:PostNotes}
  1680. {PostNotes}
  1681. {/block:PostNotes}
  1682. {/block:NoteCount}
  1683. {/block:PermalinkPage}
  1684. </article>
  1685. {/block:Posts}
  1686.  
  1687. <div id="space"></div>
  1688.  
  1689. {block:Pagination}
  1690. <footer>
  1691. {block:PreviousPage}
  1692. <a class="pagi" href="{PreviousPage}" title="go to the previous page">previous</a>
  1693. {/block:PreviousPage}
  1694. {CurrentPage} | {TotalPages}
  1695. {block:NextPage}
  1696. <a class="pagi" href="{NextPage}" title="go to the next page">next</a>
  1697. {/block:NextPage}
  1698. </footer>
  1699. {/block:Pagination}
  1700.  
  1701. </div>
  1702.  
  1703. <!-- MOBILE FOOTER -->
  1704. <div id="mb-footer">
  1705. <!-- Previous Page -->
  1706. {block:Pagination}
  1707. {block:PreviousPage}
  1708. <a href="{PreviousPage}" title="previous page" class="mbf-link">
  1709. <div class="mbf-nav mbfn1">
  1710. <span class="fas fa-chevron-left"></span>
  1711. </div>
  1712. </a>
  1713. {/block:PreviousPage}
  1714. {/block:Pagination}
  1715.  
  1716. <!-- Theme Credit -->
  1717. <!-- Don't touch! -->
  1718. <a href="https://silbrigthemes.tumblr.com/" title="theme credit" class="mbf-link">
  1719. <div class="mbf-nav mbfn2">
  1720. <span class="fas fa-code"></span>
  1721. </div>
  1722. </a>
  1723.  
  1724. <!-- Index -->
  1725. <a href="/" title="index" class="mbf-link">
  1726. <div class="mbf-nav mbfn1">
  1727. <span class="fas fa-home"></span>
  1728. </div>
  1729. </a>
  1730.  
  1731. <!-- Navigation -->
  1732. <div class="dropdown">
  1733. <button onclick="myFunction()" class="dropbtn mbf-nav mbfn2" title="click to show links">
  1734. <span class="fas fa-bars"></span>
  1735. </button>
  1736. <div id="myDropdown" class="dropdown-content">
  1737. <!-- Ask Link -->
  1738. {block:AskEnabled}
  1739. <a href="/ask" title="{AskLabel}">{AskLabel}</a>
  1740. {/block:AskEnabled}
  1741.  
  1742. <!-- Submissions Link -->
  1743. {block:SubmissionsEnabled}
  1744. <a href="/submit" title="{SubmitLabel}">
  1745. {SubmitLabel}
  1746. </a>
  1747. {/block:SubmissionsEnabled}
  1748.  
  1749. <!-- Archive Link -->
  1750. <a href="/archive" title="browse archive">
  1751. Archive
  1752. </a>
  1753.  
  1754. <!-- 1st Custom Link -->
  1755. {block:IfCustomLink1}
  1756. <a href="{text:Custom URL 1}" title="{text:Custom Link 1}">
  1757. {text:Custom Link 1}
  1758. </a>
  1759. {/block:IfCustomLink1}
  1760.  
  1761. <!-- 2nd Custom Link -->
  1762. {block:IfCustomLink2}
  1763. <a href="{text:Custom URL 2}" title="{text:Custom Link 2}">
  1764. {text:Custom Link 2}
  1765. </a>
  1766. {/block:IfCustomLink2}
  1767.  
  1768. <!-- 3rd Custom Link -->
  1769. {block:IfCustomLink3}
  1770. <a href="{text:Custom URL 3}" title="{text:Custom Link 3}">
  1771. {text:Custom Link 3}
  1772. </a>
  1773. {/block:IfCustomLink3}
  1774.  
  1775. <!-- 4th Custom Link -->
  1776. {block:IfCustomLink4}
  1777. <a href="{text:Custom URL 4}" title="{text:Custom Link 4}">
  1778. {text:Custom Link 4}
  1779. </a>
  1780. {/block:IfCustomLink4}
  1781.  
  1782. <!-- 5th Custom Link -->
  1783. {block:IfCustomLink5}
  1784. <a href="{text:Custom URL 5}" title="{text:Custom Link 5}">
  1785. {text:Custom Link 5}
  1786. </a>
  1787. {/block:IfCustomLink5}
  1788.  
  1789. <!-- Dashboard Link -->
  1790. <a href="https://www.tumblr.com/dashboard" title="return to dashboard">
  1791. Tumblr Dashboard
  1792. </a>
  1793.  
  1794. <!-- Follow -->
  1795. <!-- Takes people to a page so that they can follow you. -->
  1796. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}">
  1797. Follow Me
  1798. </a>
  1799. </div>
  1800. </div> <!-- // end navigation panel -->
  1801.  
  1802. <!-- Next Page -->
  1803. {block:Pagination}
  1804. {block:NextPage}
  1805. <a href="{NextPage}" title="next page" class="mbf-link">
  1806. <div class="mbf-nav mbfn1">
  1807. <span class="fas fa-chevron-right"></span>
  1808. </div>
  1809. </a>
  1810. {/block:NextPage}
  1811. {/block:Pagination}
  1812. </div> <!-- // end mobile footer -->
  1813.  
  1814. <!-- CLICKABLE DROPDOWN MENU -->
  1815. <!-- Tutorial by w3schools. -->
  1816. <script>
  1817. /* When the user clicks on the button,
  1818. toggle between hiding and showing the dropdown content */
  1819. function myFunction() {
  1820. document.getElementById("myDropdown").classList.toggle("show");
  1821. }
  1822.  
  1823. // Close the dropdown if the user clicks outside of it
  1824. window.onclick = function(event) {
  1825. if (!event.target.matches('.dropbtn')) {
  1826. var dropdowns = document.getElementsByClassName("dropdown-content");
  1827. var i;
  1828. for (i = 0; i < dropdowns.length; i++) {
  1829. var openDropdown = dropdowns[i];
  1830. if (openDropdown.classList.contains('show')) {
  1831. openDropdown.classList.remove('show');
  1832. }
  1833. }
  1834. }
  1835. }
  1836. </script>
  1837.  
  1838. <!-- PXU photosets script. -->
  1839. <script>
  1840. $(document).ready(function(){
  1841. $('.photo-slideshow').pxuPhotoset({
  1842. lightbox: true,
  1843. rounded: false,
  1844. gutter: '{text:Photoset Gutter}',
  1845. borderRadius: '0px',
  1846. photoset: '.photo-slideshow',
  1847. photoWrap: '.photo-data',
  1848. photo: '.pxu-photo'
  1849. });
  1850. });
  1851. </script>
  1852.  
  1853. <!-- RESPONSIVE VIDEOS -->
  1854. <!-- Responsive videos script, by @nouvae. -->
  1855. <script>
  1856. $(document).ready(function() {
  1857. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1858. });
  1859. </script>
  1860.  
  1861. <script>
  1862. function flexFrame() {
  1863. $(".caption").each(function() {
  1864. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1865. flexibleFrames($(".capframe"));
  1866. });
  1867. flexibleFrames($(".video"));
  1868. }
  1869.  
  1870. $(document).ready(flexFrame);
  1871. </script>
  1872.  
  1873. <!-- NPF PHOTOSETS -->
  1874. <!-- NPF photoset script, by glenthemes. -->
  1875. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  1876. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1877.  
  1878. <script>
  1879. npfPhotosets("article", npfOptions);
  1880. // article is your posts selector
  1881. </script>
  1882.  
  1883. <!-- Tooltips, TippyJs -->
  1884. <script src="https://unpkg.com/popper.js@1"></script>
  1885. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1886. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1887.  
  1888. <script>
  1889. tippy('a[title], button[title], #credit', {
  1890. theme: 'rudimentaer',
  1891. zIndex: 9999999999,
  1892. arrow: tippy.roundArrow,
  1893. maxWidth: 300,
  1894.  
  1895. content(reference) {
  1896. const title = reference.getAttribute('title');
  1897. reference.removeAttribute('title');
  1898. return title;
  1899. },
  1900. });
  1901. </script>
  1902. </body>
  1903. </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!