API tools faq
paste
Advertisement
silbrigthemes

Simple & Clean (Theme #2)

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