API tools faq
paste
Advertisement
silbrigthemes

Mondrian (Theme #4)

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