API tools faq
paste
silbrigthemes

Beton (Theme #5)

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