API tools faq
paste
Advertisement
b0rn-to-be-wild

Theme: SPACE

b0rn-to-be-wild
Jul 12th, 2018
4,296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 57.86 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. ©borntobewildcodes.tumblr.com | SPACE
  4.  
  5. + Do not redistribute this theme or remove the credits.
  6. + Edit as long as you keep the credits intact
  7. + Contact me if you have any questions or concerns.
  8. + If you want a custom theme you can commission me.
  9. + Thanks for using my theme, I hope that you enjoy it.
  10.  
  11. Other credits:
  12.  
  13. - Starry sky by Blixt
  14. - Jquery
  15. - Disqus
  16. - Google fonts
  17. - Font Awesome icons
  18. - Masonry by David Desandro
  19. - Infinite scroll by Paul Irish
  20. - PXU Photosets
  21. - Masonry with Infinite Scroll and PXU Photosets tutorial by @shythemes
  22. - Load more buttons tutorial by @shythemes
  23. - Hide stuff tutorial by @lmthemes
  24.  
  25. ---->
  26.  
  27. <!DOCTYPE html>
  28. <head>
  29.  
  30. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  31.  
  32. <link rel="shortcut icon" href="{favicon}">
  33.  
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  35. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  36.  
  37. <meta name="image:Background" content="1"/>
  38. <meta name="image:Header top background" content="1"/>
  39. <meta name="image:Header background" content="1"/>
  40. <meta name="image:Avatar" content="1"/>
  41. <meta name="image:Sidebar image" content="1"/>
  42.  
  43. <meta name="color:Background" content="#2E3338"/>
  44. <meta name="color:Header top background" content="#5C80BC" />
  45. <meta name="color:Header background" content="#2E3338"/>
  46. <meta name="color:Header top background" content="#5C80BC"/>
  47. <meta name="color:Menu background" content="#3D4348"/>
  48. <meta name="color:Main icons background" content="#3D4348"/>
  49. <meta name="color:Main icon" content="#eeeeee"/>
  50. <meta name="color:Search box background" content="#3D4348" />
  51. <meta name="color:Search box text" content="#eeeeee"/>
  52. <meta name="color:Search box icon" content="#eeeeee"/>
  53. <meta name="color:Header title" content="#eeeeee"/>
  54. <meta name="color:Header title background" content="#3D4348"/>
  55. <meta name="color:Description" content="#eeeeee"/>
  56. <meta name="color:Link box background" content="#3D4348"/>
  57. <meta name="color:Link box link" content="#eeeeee"/>
  58. <meta name="color:Link box icon" content="#f5d857"/>
  59. <meta name="color:Sidebar background" content="#3D4348"/>
  60. <meta name="color:Sidebar link" content="#eeeeee"/>
  61. <meta name="color:Sidebar icon" content="#f5d857"/>
  62. <meta name="color:Post background" content="#3D4348"/>
  63. <meta name="color:Post info background" content="#3D4348"/>
  64. <meta name="color:Link post background" content="#2E3338"/>
  65. <meta name="color:Ask bubble" content="#2E3338"/>
  66. <meta name="color:Title" content="#ffffff"/>
  67. <meta name="color:Text" content="#cccccc"/>
  68. <meta name="color:Link" content="#ffffff"/>
  69. <meta name="color:Hover" content="#5C80BC"/>
  70. <meta name="color:Bold" content="#ffffff"/>
  71. <meta name="color:Italic" content="#75a1e2"/>
  72. <meta name="color:Underline gradient 1" content="#f5d857" />
  73. <meta name="color:Underline gradient 2" content="#5C80BC" />
  74. <meta name="color:Buttons" content="#eeeeee"/>
  75. <meta name="color:Borders" content="#3D4348"/>
  76. <meta name="color:Pagination" content="#F5D857"/>
  77. <meta name="color:Scrollbar" content="#eeeeee"/>
  78. <meta name="color:Scrollbar background" content="#2E3338"/>
  79.  
  80. <meta name="font:Body font" content="Helvetica"/>
  81. <meta name="select:Body font size" content="12px" title="12px">
  82. <meta name="select:Body font size" content="13px" title="13px">
  83. <meta name="select:Body font size" content="14px" title="14px">
  84. <meta name="select:Body font size" content="15px" title="15px">
  85. <meta name="select:Body font size" content="16px" title="16px">
  86.  
  87. <meta name="select:Title font" content="Julius Sans One" title="Julius Sans One">
  88. <meta name="select:Title font" content="Open Sans" title="Open Sans">
  89. <meta name="select:Title font" content="Roboto" title="Roboto">
  90. <meta name="select:Title font" content="Playfair Display" title="Playfair Display">
  91. <meta name="select:Title font" content="Montserrat" title="Montserrat">
  92.  
  93. <meta name="select:Title font size" content="22px" title="22px">
  94. <meta name="select:Title font size" content="25px" title="25px">
  95. <meta name="select:Title font size" content="27px" title="27px">
  96. <meta name="select:Title font size" content="30px" title="30px">
  97. <meta name="select:Title font size" content="32px" title="32px">
  98.  
  99. <meta name="select:Header title font size" content="25px" title="25px">
  100. <meta name="select:Header title font size" content="27px" title="27px">
  101. <meta name="select:Header title font size" content="30px" title="30px">
  102. <meta name="select:Header title font size" content="32px" title="32px">
  103. <meta name="select:Header title font size" content="35px" title="35px">
  104. <meta name="select:Header title font size" content="37px" title="37px">
  105.  
  106. <meta name="select:Sidebar title font size" content="20px" title="20px">
  107. <meta name="select:Sidebar title font size" content="22px" title="22px">
  108. <meta name="select:Sidebar title font size" content="25px" title="25px">
  109. <meta name="select:Sidebar title font size" content="27px" title="27px">
  110. <meta name="select:Sidebar title font size" content="30px" title="30px">
  111. <meta name="select:Sidebar title font size" content="32px" title="32px">
  112.  
  113. <meta name="select:Post width" content="400" title="400px">
  114. <meta name="select:Post width" content="500" title="500px">
  115. <meta name="select:Post width" content="540" title="540px">
  116.  
  117. <meta name="if:Inverted Controls" content="0"/>
  118. <meta name="if:Infinite Scroll" content="0"/>
  119. <meta name="if:Load More" content="0"/>
  120. <meta name="if:Starry Sky" content="0" />
  121. <meta name="if:Header Background Stretch" content="0" />
  122. <meta name="if:Sidebar Right" content="0" />
  123. <meta name="if:Display Box Shadow" content="0" />
  124. <meta name="if:Show Main Icons" content="1" />
  125. <meta name="if:Show Sidebar Image" content="1" />
  126. <meta name="if:Show Description" content="1" />
  127. <meta name="if:Show Search Box" content="1" />
  128. <meta name="if:Show Navigation" content="1" />
  129. <meta name="if:Show Avatar" content="1" />
  130. <meta name="if:Show Info On Hover" content="0" />
  131. <meta name="if:Faded Images" content="0" />
  132. <meta name="if:Monochrome Images" content="0" />
  133. <meta name="if:Show Captions" content="1" />
  134. <meta name="if:Show Tags" content="1" />
  135. <meta name="if:Ask Enabled" content="1" />
  136. <meta name="if:Submissions Enabled" content="1" />
  137. <meta name="if:Show Archive Link" content="1" />
  138. <meta name="if:Disqus Shortname" content="0"/>
  139.  
  140. <meta name="if:Show Link One" content="1" />
  141. <meta name="if:Show Link Two" content="1" />
  142. <meta name="if:Show Link Three" content="1" />
  143. <meta name="if:Show Link Four" content="1" />
  144. <meta name="if:Show Link Five" content="1" />
  145. <meta name="if:Show Link Six" content="1" />
  146. <meta name="if:Show Link Seven" content="1" />
  147. <meta name="if:Show Link Eight" content="1" />
  148. <meta name="if:Show Link Nine" content="1" />
  149. <meta name="if:Show Link Ten" content="1" />
  150.  
  151. <meta name="text:Link One" content="link 1"/>
  152. <meta name="text:Link One url" content="http://"/>
  153. <meta name="text:Link Two" content="link 2"/>
  154. <meta name="text:Link Two url" content="http://"/>
  155. <meta name="text:Link Three" content="link 3"/>
  156. <meta name="text:Link Three url" content="http://"/>
  157. <meta name="text:Link Four" content="link 4"/>
  158. <meta name="text:Link Four url" content="http://"/>
  159. <meta name="text:Link Five" content="link 5"/>
  160. <meta name="text:Link Five url" content="http://"/>
  161. <meta name="text:Link Six" content="link 6"/>
  162. <meta name="text:Link Six url" content="http://"/>
  163. <meta name="text:Link Seven" content="link 7"/>
  164. <meta name="text:Link Seven url" content="http://"/>
  165. <meta name="text:Link Eight" content="link 8"/>
  166. <meta name="text:Link Eight url" content="http://"/>
  167. <meta name="text:Link Nine" content="link 9"/>
  168. <meta name="text:Link Nine url" content="http://"/>
  169. <meta name="text:Link Ten" content="link 10"/>
  170. <meta name="text:Link Ten url" content="http://"/>
  171.  
  172. <meta name="text:Border radius" content="20px" />
  173. <meta name="text:Blog alias" content="blogalias"/>
  174. <meta name='text:Disqus Shortname' content='' />
  175.  
  176. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  177. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  178.  
  179. <!-- CSS -->
  180.  
  181. <style type="text/css">
  182.  
  183. /* ---------------------------- GENERAL ----------------------------- */
  184.  
  185. /* -------- BASICS ------- */
  186.  
  187. body {
  188. margin: 0;
  189. padding: 0;
  190. width: 100%;
  191. height: 100%;
  192. color: {color:text};
  193. font-family: {font:Body font};
  194. font-size: {select:Body font size};
  195. line-height: -moz-calc({select:Body font size} + 5px);
  196. line-height: -webkit-calc({select:Body font size} + 5px);
  197. line-height: -o-calc({select:Body font size} + 5px);
  198. line-height: calc({select:Body font size} + 5px);
  199. background-color: {color:Background};
  200. background-image:url({image:Background});
  201. background-attachment: fixed;
  202. background-repeat: repeat;
  203. word-wrap:break-word;
  204. }
  205.  
  206.  
  207. /* Tumblr lightbox */
  208.  
  209. .tmblr-lightbox {background:rgba({RGBcolor:Background}, .95)!important;}
  210.  
  211. .tmblr-lightbox img {opacity:0;}
  212.  
  213. .lightbox-caption {
  214. color:{color:Title}!important;
  215. font-family:inherit!important;
  216. font-size:1em!important;
  217. font-weight:normal!important;
  218. text-shadow:none!important;
  219. }
  220.  
  221. .lightbox-image {
  222. -moz-box-shadow:none!important;
  223. -webkit-box-shadow:none!important;
  224. box-shadow:none!important;
  225. -moz-border-radius:0px!important;
  226. -webkit-border-radius:0px!important;
  227. border-radius:0px!important;
  228. padding:0px!important;
  229. border:0!important;
  230. opacity:1!important;
  231. }
  232.  
  233. .vignette {opacity:0!Important;}
  234.  
  235. /* Webkit scrollbar */
  236.  
  237. ::-webkit-scrollbar {
  238. width: 9px;
  239. height: 0px;
  240. }
  241.  
  242. ::-webkit-scrollbar-button:start:decrement,
  243. ::-webkit-scrollbar-button:end:increment {
  244. height: 0px;
  245. display: block;
  246. background-color: {color:Scrollbar background};
  247. border-bottom-right-radius:30px;
  248. }
  249.  
  250. ::-webkit-scrollbar-track-piece {
  251. background-color: {color:Scrollbar background};
  252. }
  253.  
  254. ::-webkit-scrollbar-thumb:vertical {
  255. height: 0px;
  256. background-color: {color:Scrollbar};
  257. border: 4px solid {color:Scrollbar background};
  258. }
  259.  
  260. /* Selection */
  261.  
  262. ::-moz-selection {
  263. background: {color:Hover};
  264. color: {color:Background};
  265. }
  266.  
  267. ::selection {
  268. background: {color:Hover};
  269. color: {color:Background};
  270. }
  271.  
  272. /* Tumblr controls */
  273.  
  274. iframe.tmblr-iframe {
  275. bottom:-11px!important;
  276. top:auto!important;
  277. left:auto!important;
  278. right:35px!important;
  279. {block:ifInvertedControls}
  280. filter:invert(100%) hue-rotate(180deg);
  281. -webkit-filter:invert(100%) hue-rotate(180deg);
  282. -moz-filter:invert(100%) hue-rotate(180deg);
  283. -o-filter:invert(100%) hue-rotate(180deg);
  284. -ms-filter:invert(100%) hue-rotate(180deg);
  285. {/block:ifInvertedControls}
  286. transform:scale(0.8);
  287. transform-origin:100% 0;
  288. -webkit-transform:scale(0.8);
  289. -webkit-transform-origin:100% 0;
  290. -o-transform:scale(0.8);
  291. -o-transform-origin:100% 0;
  292. -moz-transform:scale(0.8);
  293. -moz-transform-origin:100% 0;
  294. -ms-transform:scale(0.8);
  295. -ms-transform-origin:100% 0;
  296. z-index:100000!important;
  297. }
  298.  
  299. iframe.tmblr-iframe:hover {
  300. opacity:0.6!important;
  301. }
  302.  
  303. /* Tooltips */
  304.  
  305. .ui-tooltip {
  306. position:absolute;
  307. z-index:9999;
  308. padding-top:10px;
  309. }
  310.  
  311. .ui-tooltip-content {
  312. background:{color:Background};
  313. padding:0 4px;
  314. font-style:italic;
  315. color:{color:Link};
  316. text-transform:lowercase;
  317. border:1px solid {color:Borders};
  318. }
  319.  
  320. img {
  321. opacity:1;
  322. border:0;
  323. text-decoration:none;
  324. max-width:100%;
  325. height:auto;
  326. display:block;
  327. }
  328.  
  329. /* Image style */
  330.  
  331. {block:IfFadedImages}
  332. img {
  333. -webkit-transition: opacity 0.8s linear;
  334. -moz-transition: opacity 0.8s linear;
  335. -o-transition: opacity 0.8s linear;
  336. -ms-transition: opacity 0.8s linear;
  337. opacity: 0.60;
  338. }
  339.  
  340. img:hover {
  341. -webkit-transition: opacity 0.8s linear;
  342. -moz-transition: opacity 0.8s linear;
  343. -o-transition: opacity 0.8s linear;
  344. -ms-transition: opacity 0.8s linear;
  345. opacity: 1;
  346. }
  347. {/block:IfFadedImages}
  348.  
  349. {block:IfMonochromeImages}
  350. img {
  351. -webkit-filter: grayscale(1);
  352. -webkit-transition: all 0.5s ease-in-out;
  353. -moz-transition: all 0.5s ease-in-out;
  354. -o-transition: all 0.5s ease-in-out;
  355. -ms-transition: all 0.5s ease-in-out;
  356. transition: all 0.5s ease-in-out;
  357. }
  358.  
  359. img:hover {
  360. filter: none;
  361. -webkit-filter: grayscale(0);
  362. -webkit-transition: all 0.3s ease-in-out;
  363. -moz-transition: all 0.3s ease-in-out;
  364. -o-transition: all 0.3s ease-in-out;
  365. }
  366. {/block:IfMonochromeImages}
  367.  
  368. blockquote {
  369. padding:.25em 0 .25em 15px;
  370. margin:.5em 0;
  371. border-left:1px solid {color:Borders};
  372. }
  373.  
  374. pre {
  375. padding:0;
  376. margin:0;
  377. line-height:inherit!important;
  378. background:transparent;
  379. font-family:inherit!Important;
  380. font-size:inherit!important;
  381. white-space:pre-wrap;
  382. white-space:-moz-pre-wrap;
  383. white-space:-pre-wrap;
  384. white-space:-o-pre-wrap;
  385. word-wrap:break-word;
  386. }
  387.  
  388. /* Fix */
  389.  
  390. iframe, img, embed, object, video {
  391. max-width: 100%;
  392. border: none;
  393. }
  394.  
  395. input, textarea, select, a { outline: none; }
  396.  
  397. /* Headings */
  398.  
  399. h1, h2, h3, h4 {
  400. margin:1.5em 0;
  401. font-size:1.5em;
  402. padding:0;
  403. color:{color:Title};
  404. font-weight:bold;
  405. }
  406.  
  407. h1 {
  408. font-size:{select:Title font size};
  409. }
  410.  
  411. .entry h1:first-child, .entry h2:first-child, .entry h3:first-child, .entry h4:first-child {margin-top:0;}
  412.  
  413. /* Paragraph */
  414.  
  415. p { margin:5px 0px;}
  416.  
  417. p:first-of-type { margin-top:0;}
  418.  
  419. p:last-of-type { margin-bottom:0;}
  420.  
  421. small, big, sub, pre {
  422. font-size:1em!important;
  423. line-height:1.4em!important;
  424. vertical-align:baseline!important;
  425. }
  426.  
  427. /* Bold and italic */
  428.  
  429. b, strong, b a, strong a {
  430. font-weight:bold!important;
  431. color: {color:Bold};
  432. }
  433.  
  434. i, em {
  435. color: {color:Italic};
  436. }
  437.  
  438. /* Links */
  439.  
  440. a {
  441. color:{color:Link};
  442. text-decoration:none;
  443. transition:all .3s linear;
  444. -webkit-transition:all .3s linear;
  445. -o-transition:all .3s linear;
  446. -moz-transition:all .3s linear;
  447. }
  448.  
  449. a, a img {cursor:pointer;}
  450.  
  451. a:hover {
  452. color:{color:Hover}!important;
  453. text-decoration:none;
  454. }
  455.  
  456. ul, ol, li {
  457. margin: 5px 10px;
  458. padding: 0px;
  459. }
  460.  
  461. /* Line break */
  462.  
  463. hr {
  464. border:none;
  465. box-shadow:0;
  466. margin:2em auto;
  467. width:75px;
  468. border-top:1px solid {color:Borders};
  469. }
  470.  
  471. /*-- CREDIT --*/
  472.  
  473. #credit {
  474. position:fixed;
  475. bottom:9px;
  476. right:10px;
  477. width:25px;
  478. height:25px;
  479. z-index: 100000;
  480. }
  481.  
  482. #credit img{
  483. border: 1px solid {color:Borders};
  484. }
  485.  
  486. #credit img:hover{
  487. border: 1px solid {color:Hover};
  488. }
  489.  
  490. /* ---------------------------- HEADER --------------------------- */
  491.  
  492. #header {
  493. position:absolute;
  494. top:0;
  495. left:0;
  496. width:100%;
  497. min-width:400px;
  498. height:100%;
  499. background: {color:Header background};
  500. background-image:url({image:Header background});
  501. background-repeat: repeat;
  502. {block:IfHeaderBackgroundStretch}
  503. background-position:center;
  504. background-size:cover;
  505. {/block:IfHeaderBackgroundStretch}
  506. z-index:100;
  507. }
  508.  
  509. #box {
  510. position:absolute;
  511. top:0;
  512. left:0;
  513. width:100%;
  514. height:25%;
  515. {block:IfNotStarrySky}
  516. background: {color:Header top background};
  517. background-image:url({image:Header top background});
  518. background-attachment: fixed;
  519. background-repeat: repeat;
  520. {/block:IfNotStarrySky}
  521. {block:IfStarrySky}
  522. background: {color:Header top background};
  523. background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, .7)), radial-gradient(circle at 100% 100%, #ffffff, #bbbbbb);
  524. background-repeat: no-repeat;
  525. {/block:IfStarrySky}
  526. overflow: hidden;
  527. z-index:100;
  528. }
  529.  
  530. #box .layer {
  531. position: absolute;
  532. background-size: auto 100%;
  533. background-position: 50% 0;
  534. background-repeat: repeat;
  535. height: 300px;
  536. left: 0;
  537. top: 0;
  538. transform: translate3d(0, 0, 0);
  539. width: 200vw;
  540. }
  541.  
  542. @keyframes twinkle {
  543. from { opacity:.3; }
  544. to { opacity:1; }
  545. }
  546.  
  547. @keyframes layer-1 {
  548. from { transform: translate3d(0, 0, 0); }
  549. to { transform: translate3d(-689px, 0, 0); }
  550. }
  551.  
  552. #box .layer:nth-child(1) {
  553. animation:twinkle 7s ease-in -5s infinite alternate, layer-1 100s linear infinite;
  554. background-image: url('https://i.imgur.com/DQzwHmC.png');
  555. }
  556.  
  557. @keyframes layer-2 {
  558. from { transform: translate3d(0, 0, 0); }
  559. to { transform: translate3d(-699px, 0, 0); }
  560. }
  561.  
  562. #box .layer:nth-child(2) {
  563. animation: twinkle 5s ease-in -3s infinite alternate, layer-2 195s linear infinite;
  564. background-image: url('https://i.imgur.com/q2uvItS.png');
  565. }
  566.  
  567. @keyframes layer-3 {
  568. from { transform: translate3d(0, 0, 0); }
  569. to { transform: translate3d(-699px, 0, 0); }
  570. }
  571.  
  572. #box .layer:nth-child(3) {
  573. animation: twinkle 3s ease-in infinite alternate, layer-3 195s linear infinite;
  574. background-image: url('https://i.imgur.com/rrLrfaJ.png');
  575. }
  576.  
  577. @keyframes layer-4 {
  578. from { transform: translate3d(0, 0, 0); }
  579. to { transform: translate3d(-480px, 0, 0); }
  580. }
  581.  
  582. #box .layer:nth-child(4) {
  583. animation: twinkle 4s ease-in -2s infinite alternate, layer-4 130s linear infinite;
  584. background-image: url('https://i.imgur.com/PwlQgRg.png');
  585. }
  586.  
  587. @keyframes layer-5 {
  588. from { transform: translate3d(0, 0, 0); }
  589. to { transform: translate3d(-486px, 0, 0); }
  590. }
  591.  
  592. #box .layer:nth-child(5) {
  593. animation: twinkle 6s ease-in infinite alternate, layer-5 136s linear infinite;
  594. background-image: url('https://i.imgur.com/LsSunY2.png');
  595. }
  596.  
  597. @keyframes shooting-star {
  598. 0% {
  599. opacity: 1;
  600. transform: translate3d(0, 0, 0);
  601. }
  602.  
  603. 25% {
  604. opacity: 1;
  605. }
  606.  
  607. 100% {
  608. opacity: 0;
  609. transform: translate3d(-270px, 180px, 0);
  610. }
  611. }
  612.  
  613. #box:before {
  614. animation: 500ms linear 2.5s shooting-star;
  615. background-image: url('https://imgur.com/ilhrli3.png');
  616. background-size: 72px 50px;
  617. content: ' ';
  618. height: 50px;
  619. left: 80%;
  620. position: absolute;
  621. top: -50px;
  622. width: 72px;
  623. z-index: 100;
  624. }
  625.  
  626. .wave {
  627. top:calc(25% - 25px);
  628. height: 50px;
  629. position: relative;
  630. background: transparent;
  631. z-index:100;
  632. -webkit-transform:translateY(-50%);
  633. -moz-transform:translateY(-50%);
  634. -ms-transform:translateY(-50%);
  635. -o-transform:translateY(-50%);
  636. transform:translateY(-50%);
  637. }
  638.  
  639. .wave::before {
  640. content: "";
  641. position: absolute;
  642. left: 0;
  643. bottom: 0;
  644. right: 0;
  645. background-repeat: repeat;
  646. height: 10px;
  647. background-size: 20px 20px;
  648. background-image:
  649. radial-gradient(circle at 10px -5px, transparent 12px, {color:Header background} 13px);
  650. }
  651.  
  652. .wave::after {
  653. content: "";
  654. position: absolute;
  655. left: 0;
  656. bottom: 0;
  657. right: 0;
  658. background-repeat: repeat;
  659. height: 15px;
  660. background-size: 40px 20px;
  661. background-image:
  662. radial-gradient(circle at 10px 15px, {color:Header background} 12px, transparent 13px);
  663. }
  664.  
  665. /*-- MENU --*/
  666.  
  667. #menu {
  668. position:fixed;
  669. top:0px;
  670. left:0px;
  671. width:100%;
  672. height:80px;
  673. z-index:1000;
  674. background:{color:Menu background};
  675. {block:ifDisplayBoxShadow}
  676. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  677. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  678. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  679. {/block:ifDisplayBoxShadow}
  680. {block:IndexPage}
  681. position:absolute;
  682. background:transparent;
  683. -webkit-box-shadow: none;
  684. -moz-box-shadow: none;
  685. box-shadow: none;
  686. {/block:IndexPage}
  687. }
  688.  
  689. .stickymenu {
  690. position:fixed!important;
  691. background:{color:Menu background}!important;
  692. {block:ifDisplayBoxShadow}
  693. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75)!important;
  694. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75)!important;
  695. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75)!important;
  696. {/block:ifDisplayBoxShadow}
  697. }
  698.  
  699. /* Main icons */
  700.  
  701. #mainicons {
  702. position:absolute;
  703. margin-top:20px;
  704. left:20px;
  705. width:190px;
  706. height:30px;
  707. padding:5px;
  708. text-align:center;
  709. border-radius:{text:Border radius};
  710. background:{color:Main icons background};
  711. {block:ifDisplayBoxShadow}
  712. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  713. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  714. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  715. {/block:ifDisplayBoxShadow}
  716. }
  717.  
  718. #mainicons a {
  719. display:inline-block;
  720. margin:0;
  721. -webkit-transition: all .3s ease;
  722. -moz-transition: all .3s ease;
  723. -o-transition: all .3s ease;
  724. transition: all .3s ease;
  725. }
  726.  
  727. #mainicons i {
  728. margin:0 2.5px;
  729. width:30px;
  730. height:30px;
  731. line-height:30px;
  732. text-align:center;
  733. font-size:12px;
  734. border-radius:100%;
  735. color:{color:Main icon};
  736. -webkit-transition: all .3s ease;
  737. -moz-transition: all .3s ease;
  738. -o-transition: all .3s ease;
  739. transition: all .3s ease;
  740. }
  741.  
  742. #mainicons i:hover{
  743. background:{color:Hover};
  744. }
  745.  
  746. /* Open icon */
  747.  
  748. #open {
  749. position:absolute;
  750. top:20px;
  751. left:50%;
  752. width:40px;
  753. height:40px;
  754. line-height:40px;
  755. border-radius:100px;
  756. text-align:center;
  757. background:{color:Main icons background};
  758. cursor:pointer;
  759. z-index:10;
  760. -webkit-transform:translateX(-50%);
  761. -moz-transform:translateX(-50%);
  762. -ms-transform:translateX(-50%);
  763. -o-transform:translateX(-50%);
  764. transform:translateX(-50%);
  765. display:none;
  766. }
  767.  
  768. #open i {
  769. margin:0 2.5px;
  770. width:30px;
  771. height:30px;
  772. line-height:30px;
  773. text-align:center;
  774. font-size:12px;
  775. border-radius:100%;
  776. color:{color:Main icon};
  777. -webkit-transition: all .3s ease;
  778. -moz-transition: all .3s ease;
  779. -o-transition: all .3s ease;
  780. transition: all .3s ease;
  781. }
  782.  
  783. #open i:hover {
  784. color:{color:Hover};
  785. }
  786.  
  787. /* Search box */
  788.  
  789. #search {
  790. position:absolute;
  791. margin-top:20px;
  792. right:20px;
  793. width:190px;
  794. height:30px;
  795. padding:5px;
  796. text-align:center;
  797. border-radius:{text:Border radius};
  798. background:{color:Search box background};
  799. {block:ifDisplayBoxShadow}
  800. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  801. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  802. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  803. {/block:ifDisplayBoxShadow}
  804. }
  805.  
  806. /* Search icon */
  807.  
  808. #search i {
  809. position:absolute;
  810. width:30px;
  811. margin-left:-15px;
  812. margin-top:10px;
  813. z-index:1000;
  814. color:{color:Search box icon};
  815. }
  816.  
  817. /* Header title */
  818.  
  819. #header_title {
  820. position:absolute;
  821. display:inline-block;
  822. top:50%;
  823. left:50%;
  824. width:auto;
  825. min-width:300px;
  826. height:auto;
  827. padding:10px 30px;
  828. text-align:center;
  829. border-radius:40px;
  830. color:{color:Header title};
  831. background:{color:Header title background};
  832. font-family:{select:Title font};
  833. font-size:{select:Header title font size};
  834. line-height:{select:Header title font size};
  835. z-index:10;
  836. -webkit-transform:translateX(-50%) translateY(-50%);
  837. -moz-transform:translateX(-50%) translateY(-50%);
  838. -ms-transform:translateX(-50%) translateY(-50%);
  839. -o-transform:translateX(-50%) translateY(-50%);
  840. transform:translateX(-50%) translateY(-50%);
  841. }
  842.  
  843. .underline {
  844. background-image: linear-gradient(120deg, {color:Underline gradient 1} 0%, {color:Underline gradient 2} 100%);
  845. background-repeat: no-repeat;
  846. background-size: 100% 0.3em;
  847. background-position: 0 88%;
  848. transition: background-size 0.25s ease-in;
  849. }
  850.  
  851. #circle {
  852. position:absolute;
  853. display:inline-block;
  854. top:50%;
  855. left:50%;
  856. width:145px;
  857. height:145px;
  858. border-radius:100%;
  859. z-index:10;
  860. background:{color:Header title background};
  861. -webkit-transform:translateX(-50%) translateY(-50%);
  862. -moz-transform:translateX(-50%) translateY(-50%);
  863. -ms-transform:translateX(-50%) translateY(-50%);
  864. -o-transform:translateX(-50%) translateY(-50%);
  865. transform:translateX(-50%) translateY(-50%);
  866. }
  867.  
  868. /* Link box */
  869.  
  870. #link_box {
  871. position:absolute;
  872. display:inline-block;
  873. bottom:50px;
  874. left:50%;
  875. width:70vw;
  876. min-width:720px;
  877. max-width:860px;
  878. height:81px;
  879. padding:20px 10px;
  880. border-radius:{text:Border radius};
  881. background:{color:Link box background};
  882. -webkit-transform:translateX(-50%);
  883. -moz-transform:translateX(-50%);
  884. -ms-transform:translateX(-50%);
  885. -o-transform:translateX(-50%);
  886. transform:translateX(-50%);
  887. {block:ifDisplayBoxShadow}
  888. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  889. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  890. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  891. {/block:ifDisplayBoxShadow}
  892. }
  893.  
  894. /* Link box description */
  895.  
  896. #lb_description {
  897. float:left;
  898. display:inline-block;
  899. margin:0px;
  900. margin-left:20px;
  901. width:calc(50% - 55px);
  902. height:76px;
  903. padding-right:25px;
  904. font-size:12px;
  905. line-height:20px;
  906. overflow:hidden;
  907. overflow-y:auto!important;
  908. color:{color:Description};
  909. text-align:justify;
  910. }
  911.  
  912. /* Link box links */
  913.  
  914. #lb_links {
  915. float:right;
  916. margin:0;
  917. display:inline-block;
  918. width:calc(50% - 20px);
  919. overflow:hidden;
  920. text-align:center;
  921. overflow:hidden;
  922. }
  923.  
  924. #link_box a {
  925. display:inline-block;
  926. margin:5px auto;
  927. width:65px;
  928. height:65px;
  929. text-align:center;
  930. font-size:12px;
  931. color:{color:Link box link};
  932. }
  933.  
  934. #link_box i {
  935. display:block;
  936. margin:auto;
  937. margin-bottom:13px;
  938. font-size:2.7em;
  939. color:{color:Link box icon};
  940. transition:all .3s linear;
  941. -webkit-transition:all .3s linear;
  942. -o-transition:all .3s linear;
  943. -moz-transition:all .3s linear;
  944. }
  945.  
  946. #link_box a:hover, #link_box i:hover {
  947. color:{color:Hover};
  948. }
  949.  
  950. /* Sticky */
  951.  
  952. #sticky {
  953. position:absolute;
  954. top:100%;
  955. left:0;
  956. width:100%;
  957. height:5px;
  958. z-index:10000;
  959. }
  960.  
  961. /* ---------------------------- SIDE PANEL --------------------------- */
  962.  
  963. aside {
  964. position:absolute;
  965. top:30px;
  966. {block:IndexPage}
  967. top:100%;
  968. {/block:IndexPage}
  969. left:0px;
  970. width:30vw;
  971. height:calc(100% - 30px);
  972. z-index:100;
  973. {block:IfSidebarRight}
  974. left:auto;
  975. right:0px;
  976. {/block:IfSidebarRight}
  977. }
  978.  
  979. .stickyaside {
  980. position:fixed!important;
  981. top:30px;
  982. }
  983.  
  984. /* -------- SIDEBAR ------- */
  985.  
  986. #sidebar {
  987. position:absolute;
  988. top:50%;
  989. left:50%;
  990. width:80%;
  991. max-width:300px;
  992. padding-bottom:10px;
  993. height:auto;
  994. background:{color:Sidebar background};
  995. border-radius:{text:Border radius};
  996. overflow:hidden;
  997. -webkit-transform:translateX(-50%) translateY(-50%);
  998. -moz-transform:translateX(-50%) translateY(-50%);
  999. -ms-transform:translateX(-50%) translateY(-50%);
  1000. -o-transform:translateX(-50%) translateY(-50%);
  1001. transform:translateX(-50%) translateY(-50%);
  1002. {block:ifDisplayBoxShadow}
  1003. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1004. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1005. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1006. {/block:ifDisplayBoxShadow}
  1007. }
  1008.  
  1009. /* Sidebar image */
  1010.  
  1011. #sidebarimage {
  1012. margin-top:0px;
  1013. margin-left:0px;
  1014. width:100%;
  1015. height:auto;
  1016. overflow:hidden;
  1017. }
  1018.  
  1019. #sidebarimage img{
  1020. width:100%;
  1021. height:100%;
  1022. }
  1023.  
  1024. /* Close */
  1025.  
  1026. #close {
  1027. position:fixed;
  1028. margin-top:15px;
  1029. margin-left:calc(100% - 45px);
  1030. text-align:center;
  1031. cursor:pointer;
  1032. display:none;
  1033. }
  1034.  
  1035. #close i {
  1036. width:20px;
  1037. height:20px;
  1038. font-size:15px;
  1039. padding:5px;
  1040. line-height:20px;
  1041. color:{color:Sidebar icon};
  1042. border-radius:100%;
  1043. }
  1044.  
  1045. #close i:hover {
  1046. color:{color:Hover};
  1047. background:{color:Sidebar background};
  1048. }
  1049.  
  1050. /* Avatar */
  1051.  
  1052. #avatar {
  1053. margin:0;
  1054. margin-top:-30px;
  1055. margin-left:20px;
  1056. width:60px;
  1057. height:60px;
  1058. border-radius:100%;
  1059. }
  1060.  
  1061. #avatar img{
  1062. width:100%;
  1063. height:100%;
  1064. border-radius:100%;
  1065. }
  1066.  
  1067. /* Navigation */
  1068.  
  1069. #navigation{
  1070. margin-top:0px;
  1071. margin-left:0px;
  1072. padding:15px;
  1073. padding-left:40px;
  1074. }
  1075.  
  1076. #navigation a {
  1077. display:block;
  1078. margin-top:12px;
  1079. margin-left:auto;
  1080. margin-right:auto;
  1081. font-size:20px;
  1082. color:{color:Sidebar link};
  1083. -webkit-transition: all .3s ease;
  1084. -moz-transition: all .3s ease;
  1085. -o-transition: all .3s ease;
  1086. transition: all .3s ease;
  1087. }
  1088.  
  1089. #navigation i {
  1090. width:30px;
  1091. height:30px;
  1092. line-height:30px;
  1093. text-align:center;
  1094. font-size:12px;
  1095. margin-right:10px;
  1096. border-radius:100%;
  1097. color:{color:Sidebar icon};
  1098. -webkit-transition: all .3s ease;
  1099. -moz-transition: all .3s ease;
  1100. -o-transition: all .3s ease;
  1101. transition: all .3s ease;
  1102. }
  1103.  
  1104. #navigation a:hover {
  1105. color:{color:Sidebar link}!important;
  1106. }
  1107.  
  1108. #navigation a:hover .underline {
  1109. background-image: linear-gradient(120deg, {color:Underline gradient 2} 0%, {color:Underline gradient 2} 100%);
  1110. background-repeat: no-repeat;
  1111. background-size: 100% 0.3em;
  1112. background-position: 0 88%;
  1113. transition: background-size 0.25s ease-in;
  1114. }
  1115.  
  1116. #navigation a:hover i{
  1117. background:{color:Hover};
  1118. }
  1119.  
  1120.  
  1121. /*------------------------------- CONTAINER -----------------------------*/
  1122.  
  1123. #container {
  1124. position:relative;
  1125. margin-top:100px;
  1126. {block:IndexPage}
  1127. margin-top:calc(50% + 50px);
  1128. {/block:IndexPage}
  1129. margin-left:30vw;
  1130. width:70vw;
  1131. {block:IfSidebarRight}
  1132. margin-left:0;
  1133. {/block:IfSidebarRight}
  1134. margin-bottom:10px;
  1135. z-index:10!important;
  1136. }
  1137.  
  1138. /* ---------- POSTS AND ENTRIES ---------- */
  1139.  
  1140. #posts {
  1141. margin-top:80px;
  1142. margin-left:auto;
  1143. margin-right:auto;
  1144. width:calc({select:Post width}px + 40px)!important;
  1145. overflow:hidden;
  1146. }
  1147.  
  1148. .entry {
  1149. display: inline-block;
  1150. float: left;
  1151. margin:30px 18px;
  1152. width: {select:Post width}px;
  1153. height:auto;
  1154. background:{color:Post background};
  1155. overflow: hidden;
  1156. border:2px solid {color:Borders};
  1157. border-radius:{text:Border radius};
  1158. {block:ifDisplayBoxShadow}
  1159. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1160. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1161. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1162. {/block:ifDisplayBoxShadow}
  1163. }
  1164.  
  1165. .entry img { max-width: 100%; }
  1166.  
  1167. .content{
  1168. padding: 10px;
  1169. }
  1170.  
  1171. /*--------------------------- RESPONSIVE DESIGN ---------------------------*/
  1172.  
  1173. @media only screen and (max-width: 700px) {
  1174.  
  1175.  
  1176. #header_title {
  1177. font-size:2em;
  1178. line-height:2em;
  1179. }
  1180.  
  1181. #mainicons {
  1182. position:absolute;
  1183. margin-top:20px;
  1184. left:20px;
  1185. width:calc(100vw - 60px);
  1186. min-width:400px;
  1187. height:30px;
  1188. padding:5px;
  1189. text-align:left;
  1190. }
  1191.  
  1192. #search {
  1193. {block:ifDisplayBoxShadow}
  1194. -webkit-box-shadow:none;
  1195. -moz-box-shadow:none;
  1196. box-shadow:none;
  1197. {/block:ifDisplayBoxShadow}
  1198. }
  1199.  
  1200.  
  1201. #link_box {
  1202. position:absolute;
  1203. display:inline-block;
  1204. bottom:50px;
  1205. left:50%;
  1206. width:calc(100vw - 20px);
  1207. min-width:400px;
  1208. width:calc(100vw - 20px);
  1209. height:110px;
  1210. padding:20px 10px;
  1211. border-radius:0;
  1212. }
  1213.  
  1214. #lb_description {
  1215. float:left;
  1216. display:block;
  1217. margin-top:0;
  1218. margin-left:20px;
  1219. width:calc(100% - 55px);
  1220. height:40px;
  1221. padding-right:25px;
  1222. font-size:12px;
  1223. line-height:20px;
  1224. overflow:hidden;
  1225. overflow-y:auto!important;
  1226. color:{color:Description};
  1227. text-align:justify;
  1228. }
  1229.  
  1230.  
  1231. #lb_links {
  1232. float:left;
  1233. margin:0;
  1234. margin-top:15px;
  1235. display:block;
  1236. width:calc(100% - 20px);
  1237. }
  1238.  
  1239.  
  1240. #link_box i {
  1241. font-size:2em;
  1242. }
  1243.  
  1244. aside {
  1245. position:fixed;
  1246. top:0;
  1247. width:100vw;
  1248. height:100%;
  1249. background:rgba(0,0,0,0.75);
  1250. z-index:10000;
  1251. display:none;
  1252. }
  1253.  
  1254. .stickyaside {
  1255. position:fixed!important;
  1256. top:0;
  1257. }
  1258.  
  1259. #sidebar {
  1260. position:absolute;
  1261. top:50%;
  1262. left:50%;
  1263. width:80%;
  1264. max-width:300px;
  1265. padding-bottom:10px;
  1266. height:auto;
  1267. background:{color:Sidebar background};
  1268. border-radius:{text:Border radius};
  1269. overflow:hidden;
  1270. -webkit-transform:translateX(-50%) translateY(-50%);
  1271. -moz-transform:translateX(-50%) translateY(-50%);
  1272. -ms-transform:translateX(-50%) translateY(-50%);
  1273. -o-transform:translateX(-50%) translateY(-50%);
  1274. transform:translateX(-50%) translateY(-50%);
  1275. {block:ifDisplayBoxShadow}
  1276. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1277. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1278. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1279. {/block:ifDisplayBoxShadow}
  1280. }
  1281.  
  1282. #open, #close {
  1283. display:block;
  1284. }
  1285.  
  1286. #container {
  1287. position:absolute;
  1288. margin-top:auto;
  1289. top:calc(100% + 100px)!important;
  1290. margin-left:0px;
  1291. width:100vw;
  1292. }
  1293.  
  1294. #posts {
  1295. margin-top:50px;
  1296. margin-left:auto;
  1297. margin-right:auto;
  1298. width:calc({select:Post width}px + 40px)!important;
  1299. overflow:hidden;
  1300. }
  1301.  
  1302. }
  1303. /* End media screen 700 */
  1304.  
  1305.  
  1306. @media only screen and (max-width: 414px) {
  1307.  
  1308. #posts {
  1309. margin-top:50px;
  1310. margin-left:auto;
  1311. margin-right:auto;
  1312. width:100%!important;
  1313. overflow:hidden;
  1314. }
  1315.  
  1316. .entry {
  1317. display: inline-block;
  1318. float: left;
  1319. margin: 18px;
  1320. width:calc(100% - 36px)!important;
  1321. height:auto;
  1322. background:{color:Post background};
  1323. overflow: hidden;
  1324. border:2px solid {color:Borders};
  1325. border-radius:{text:Border radius};
  1326. }
  1327.  
  1328. }
  1329. /* End media screen 414 */
  1330.  
  1331.  
  1332. /* Caption */
  1333.  
  1334. .comment {
  1335. padding:0px 10px;
  1336. list-style:none;
  1337. }
  1338.  
  1339. .comment:last-of-type { padding-bottom:0!important;}
  1340.  
  1341. .user {
  1342. display:inline-block;
  1343. line-height:1em;
  1344. margin-bottom:.75em;
  1345. }
  1346.  
  1347. .captioned .comment:first-of-type { margin-top:2em;}
  1348.  
  1349. /* -------- POSTS STYLES ------- */
  1350.  
  1351. /* Titles */
  1352.  
  1353. .title {
  1354. margin:10px;
  1355. margin-top:0px;
  1356. color:{color:Title};
  1357. font-family:{select:Title Font};
  1358. font-size:{select:Title font size};
  1359. line-height: -moz-calc({select:Title font size} + 3px);
  1360. line-height: -webkit-calc({select:Title font size} + 3px);
  1361. line-height: -o-calc({select:Title font size} + 3px);
  1362. line-height: calc({select:Title font size} + 3px);
  1363. }
  1364.  
  1365. .title a { color:{color:Title}; }
  1366.  
  1367. .title a:hover { color:{color:L ink}; }
  1368.  
  1369. .tex li, .tex blockquote {text-align:left; }
  1370.  
  1371. /* Quote posts */
  1372.  
  1373. .quote {
  1374. margin: 10px;
  1375. padding: 5px;
  1376. font-family: {select:Title font};
  1377. font-size: {select:Title font size};
  1378. line-height: -moz-calc({select:Title font size} + 3px);
  1379. line-height: -webkit-calc({select:Title font size} + 3px);
  1380. line-height: -o-calc({select:Title font size} + 3px);
  1381. line-height: calc({select:Title font size} + 3px);
  1382. color: {color:Italic};
  1383. text-align: left;
  1384. letter-spacing: 2px;
  1385. }
  1386.  
  1387. .source {
  1388. font-size: 12px;
  1389. line-height: 20px;
  1390. }
  1391.  
  1392. /* Link posts */
  1393.  
  1394. .linkthumb img {
  1395. width:100%;
  1396. }
  1397.  
  1398. .linkp {
  1399. background: {color:Link post background};
  1400. padding:10px;
  1401. }
  1402.  
  1403. .linkp i {
  1404. color: {color:Title};
  1405. }
  1406.  
  1407. /* Chat posts */
  1408.  
  1409. .line {
  1410. margin: 5px 15px;
  1411. line-height: 18px;
  1412. }
  1413.  
  1414. /* Ask Posts */
  1415.  
  1416. .asker {
  1417. margin: 5px;
  1418. width: -moz-calc(100% - 10px);
  1419. width: -webkit-calc(100% - 10px);
  1420. width: -o-calc(100% - 10px);
  1421. width: calc(100% - 10px);
  1422. height: auto;
  1423. }
  1424.  
  1425. .bubble {
  1426. width: -moz-calc(100% - 70px);
  1427. width: -webkit-calc(100% - 70px);
  1428. width: -o-calc(100% - 70px);
  1429. width: calc(100% - 70px);
  1430. height: auto;
  1431. min-height: 35px;
  1432. padding: 10px;
  1433. line-height: 20px;
  1434. background: {color:Ask bubble};
  1435. z-index: 10;
  1436. }
  1437.  
  1438. .triangle {
  1439. position: absolute;
  1440. margin-left: -moz-calc(100% - 90px);
  1441. margin-left: -webkit-calc(100% - 90px);
  1442. margin-left: -o-calc(100% - 90px);
  1443. margin-left: calc(100% - 90px);
  1444. width: 0;
  1445. z-index:0;
  1446. border-left: 8px solid {color:Ask bubble};
  1447. border-bottom: 8px solid transparent;
  1448. border-top: 8px solid transparent;
  1449. }
  1450.  
  1451. .asker img {
  1452. float: right;
  1453. margin-right: 0px;
  1454. max-width: 30px;
  1455. border: 1.5px solid {color:Ask bubble};
  1456. border-radius: 2px;
  1457. z-index:1000;
  1458. opacity:1;
  1459. }
  1460.  
  1461. .answer {
  1462. margin: 10px 15px;
  1463. margin-bottom: 0;
  1464. }
  1465.  
  1466. /* ----------------------- POST INFO ----------------------------- */
  1467.  
  1468. .topinfo {
  1469. margin:0px;
  1470. width: -moz-calc(100% - 30px);
  1471. width: -webkit-calc(100% - 30px);
  1472. width: -o-calc(100% - 30px);
  1473. width: calc(100% - 30px);
  1474. height: 10px;
  1475. padding: 15px;
  1476. line-height: 15px;
  1477. background:{color:Post info background};
  1478. }
  1479.  
  1480. .topinfourl {
  1481. margin:0;
  1482. font-size: 12px;
  1483. }
  1484.  
  1485. /* Date */
  1486.  
  1487. .topinfod {
  1488. float: right;
  1489. margin-top:-15px;
  1490. font-size:12px;
  1491. }
  1492.  
  1493. /* Bottom info */
  1494.  
  1495. .botinfo {
  1496. width: -moz-calc(100% - 30px);
  1497. width: -webkit-calc(100% - 30px);
  1498. width: -o-calc(100% - 30px);
  1499. width: calc(100% - 30px);
  1500. height:auto;
  1501. min-height: 50px;
  1502. margin: 0px;
  1503. padding: 15px;
  1504. padding-top: 10px;
  1505. padding-bottom: 10px;
  1506. font-size: 12px;
  1507. line-height: 25px;
  1508. color: {color:Text};
  1509. background:{color:Post info background};
  1510. overflow:hidden;
  1511. }
  1512.  
  1513. .botinfo a {
  1514. margin-right: 25px;
  1515. color: {color:Link};
  1516. }
  1517.  
  1518. .tags {
  1519. {block:IndexPage}
  1520. {block:ifNotShowTags}
  1521. display: none;
  1522. {/block:ifNotShowTags}
  1523. {/block:IndexPage}
  1524. }
  1525.  
  1526. .notec {
  1527. float: left;
  1528. }
  1529.  
  1530. /* Butttons */
  1531.  
  1532. .buttons {
  1533. float:right;
  1534. margin-top:0px;
  1535. margin-right:-5px;
  1536. width:77px;
  1537. height:26px;
  1538. line-height:26px;
  1539. z-index:100;
  1540. list-style:none;
  1541. {block:ifDisqusShortname}
  1542. width: 103px;
  1543. {/block:ifDisqusShortname}
  1544. {block:PermalinkPage}
  1545. width:52px;
  1546. {/block:PermalinkPage}
  1547. }
  1548.  
  1549. .buttons li {
  1550. display:inline-block;
  1551. margin:0;
  1552. margin-left:2px;
  1553. margin-right:0;
  1554. width:20px;
  1555. height:26px;
  1556. padding:0px;
  1557. text-align:center;
  1558. }
  1559.  
  1560. .perma i {
  1561. font-size:13px;
  1562. color:{color:Buttons};
  1563. }
  1564.  
  1565. .cmnt i {
  1566. font-size:15px;
  1567. color:{color:Buttons};
  1568. }
  1569.  
  1570. .reblog i {
  1571. font-size:17px;
  1572. color:{color:Buttons};
  1573. }
  1574.  
  1575. .like .like_button {
  1576. position:absolute;
  1577. width:100%;
  1578. height:100%;
  1579. }
  1580.  
  1581. .like .like_button iframe {
  1582. position:absolute;
  1583. top:0;
  1584. bottom:0;
  1585. left:0;
  1586. right:0;
  1587. width:100%;
  1588. height:100%;
  1589. z-index:10;
  1590. opacity:0.0000001;
  1591. }
  1592.  
  1593. .like i {
  1594. font-size:15px;
  1595. color:{color:Buttons};
  1596. }
  1597.  
  1598. .like .liked + i {
  1599. font-size:14px;
  1600. color:#D95E40;
  1601. }
  1602.  
  1603.  
  1604. /* Permalink pagination */
  1605.  
  1606. .permapag {
  1607. margin-top: 15px;
  1608. margin-left: 0px;
  1609. }
  1610.  
  1611. .permapag a{
  1612. font-size: 15px;
  1613. margin:10px;
  1614. margin-top: 20px;
  1615. padding:5px;
  1616. color:{color:Link};
  1617. }
  1618.  
  1619.  
  1620. /* Permalink pagination */
  1621.  
  1622. .permapag {
  1623. margin-top: 15px;
  1624. margin-left: 0px;
  1625. }
  1626.  
  1627. .permapag a{
  1628. font-size: 15px;
  1629. margin:10px;
  1630. margin-top: 20px;
  1631. padding:5px;
  1632. color:{color:Link};
  1633. }
  1634.  
  1635. /* Show/hide */
  1636.  
  1637. .clickme {
  1638. margin: 10px;
  1639. width: 130px;
  1640. color: {color:Link};
  1641. text-align: left;
  1642. cursor: pointer;
  1643. padding: 5px 10px;
  1644. border-bottom: 1.5px solid {color:Borders};
  1645. }
  1646.  
  1647. .clickme:hover {
  1648. color: {color:Hover};
  1649. background:{color:Post info background};
  1650. }
  1651.  
  1652. /* Post notes */
  1653.  
  1654. #notes {
  1655. margin: 10px;
  1656. width: 500px;
  1657. font-size: 12px;
  1658. color: {color:Text};
  1659. display:none;
  1660. }
  1661.  
  1662. ol.notes {
  1663. padding: 0px;
  1664. margin: 5px 0px;
  1665. list-style-type: none;
  1666. }
  1667.  
  1668. ol.notes li.note {
  1669. padding: 5px;
  1670. }
  1671.  
  1672. ol.notes li.note img.avatar {
  1673. float:left;
  1674. vertical-align: -5px;
  1675. width: 15px;
  1676. height: 15px;
  1677. margin-left:10px;
  1678. margin-right:10px;
  1679. }
  1680.  
  1681. li.more_notes_link_container {
  1682. text-transform: uppercase;
  1683. font-size: 12px;
  1684. }
  1685.  
  1686. /* Disqus box */
  1687.  
  1688. #disqusbox {
  1689. padding:15px;
  1690. }
  1691.  
  1692. /* ------------------- PAGINATION AND INFINITE SCROLL -------------------- */
  1693.  
  1694. #pagcon {
  1695. margin:15px auto;
  1696. width:calc({select:Post width}px + 40px)!important;
  1697. height:60px;
  1698. text-align: center;
  1699. z-index:100;
  1700. }
  1701.  
  1702. /* Pagination */
  1703.  
  1704. #pagination {
  1705. width: 100%;
  1706. height: 35px;
  1707. z-index:10000;
  1708. {block:ifInfiniteScroll}
  1709. display: none;
  1710. {/block:ifInfiniteScroll}
  1711. }
  1712.  
  1713. .previous, .next, .load-more{
  1714. display:inline;
  1715. margin-left:10px;
  1716. width:100px;
  1717. height:20px;
  1718. padding:8px 10px;
  1719. font-size:12px;
  1720. line-height:22px;
  1721. text-align:center;
  1722. color:{color:Pagination};
  1723. background:{color:Sidebar background};
  1724. border-radius:{text:Border radius};
  1725. -webkit-transition: all .3s ease;
  1726. -moz-transition: all .3s ease;
  1727. -o-transition: all .3s ease;
  1728. transition: all .3s ease;
  1729. {block:ifDisplayBoxShadow}
  1730. -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1731. -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1732. box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
  1733. {/block:ifDisplayBoxShadow}
  1734. }
  1735.  
  1736. .previous:hover, .next:hover, .load-more:hover{
  1737. color:{color:Hover};
  1738. }
  1739.  
  1740. .previous i, .next i, .load-more i{
  1741. color:{color:Hover};
  1742. font-size:15px;
  1743. margin:10px;
  1744. text-decoration:none;
  1745. }
  1746.  
  1747. .previous:hover i, .next:hover i, .load-more:hover i{
  1748. color:{color:Hover};
  1749. }
  1750.  
  1751. /* INFINITE SCROLL */
  1752.  
  1753. #infscr-loading {
  1754. display:none!important;
  1755. }
  1756.  
  1757. #iscon{
  1758. width: 100%;
  1759. height: 35px;
  1760. z-index:10000;
  1761. }
  1762.  
  1763. {block:ifLoadMore}
  1764. .load-more{
  1765. width:400px;
  1766. height:35px;
  1767. }
  1768. {/block:ifLoadMore}
  1769.  
  1770. /* --------------------------- Custom CSS -------------------------- */
  1771.  
  1772. {CustomCSS}
  1773.  
  1774. </style>
  1775.  
  1776. <meta charset="utf-8">
  1777. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  1778. {block:Description}
  1779. <meta name="description" content="{MetaDescription}" />
  1780. {/block:Description}
  1781.  
  1782. </head>
  1783.  
  1784. <!------------------------------ HTML ------------------------------->
  1785.  
  1786.  
  1787. <body>
  1788.  
  1789. <div id="menu">
  1790.  
  1791. <div id="mainicons">
  1792. <a href="/" title="Index"><i class="fas fa-home"></i></a>
  1793. {block:ifAskEnabled}
  1794. <a href="/ask" title="Ask"><i class="far fa-envelope-open"></i></a>
  1795. {/block:ifAskEnabled}
  1796. {block:ifSubmissionsEnabled}
  1797. <a href="/submit" title="Submit"><i class="far fa-edit"></i></a>
  1798. {/block:ifSubmissionsEnabled}
  1799. {block:ifShowArchiveLink}
  1800. <a href="/archive" title="Archive"><i class="fas fa-history"></i></a>
  1801. {/block:ifShowArchiveLink}
  1802. </div>
  1803. <!-- End mainicons -->
  1804.  
  1805. <div id="open"><i class="fas fa-align-justify"></i></div>
  1806.  
  1807. {block:IfShowSearchBox}
  1808. <div id="search">
  1809. <form action="/search" method="get">
  1810. <input type="text" name="q" value="Search..." style="float:left; margin-top:-3px; margin-left:0px; width:calc(100% - 50px); height:30px; padding-left:10px; border:1px solid transparent; background:transparent; color:{color:Search box text}; font-size: 13px; letter-spacing:1px;"/><span><i class="fa fa-search"></i></span></form>
  1811. </div>
  1812. <!-- End search -->
  1813. {/block:IfShowSearchBox}
  1814.  
  1815. </div>
  1816. <!-- End menu -->
  1817.  
  1818.  
  1819. {block:IndexPage}
  1820. <div id="header">
  1821.  
  1822. <div id="box">
  1823. <div class="layer"></div>
  1824. <div class="layer"></div>
  1825. <div class="layer"></div>
  1826. <div class="layer"></div>
  1827. <div class="layer"></div>
  1828.  
  1829. </div>
  1830. <!-- End header_top -->
  1831.  
  1832. <div class="wave"></div>
  1833.  
  1834. <div id="circle"></div>
  1835.  
  1836. <div id="header_title"><span class="underline">{Title}</span></div>
  1837.  
  1838. <div id="link_box">
  1839.  
  1840. <div id="lb_description">{Description}</div>
  1841.  
  1842. <div id="lb_links">
  1843.  
  1844. {block:IfShowLinkOne}
  1845. <a href="{text:Link One url}"><i class="fas fa-user-astronaut"></i>{text:Link One}</a>
  1846. {/block:IfShowLinkOne}
  1847. {block:IfShowLinkTwo}
  1848. <a href="{text:Link Two url}"><i class="fas fa-moon"></i><span>{text:Link Two} </a>
  1849. {/block:IfShowLinkTwo}
  1850. {block:IfShowLinkThree}
  1851. <a href="{text:Link Three url}"><i class="fas fa-space-shuttle fa-rotate-270"></i> {text:Link Three}</a>
  1852. {/block:IfShowLinkThree}
  1853. {block:IfShowLinkFour}
  1854. <a href="{text:Link Four url}"><i class="fas fa-star"></i>{text:Link Four}</a>
  1855. {/block:IfShowLinkFour}
  1856. {block:IfShowLinkFive}
  1857. <a href="{text:Link Five url}"><i class="fas fa-globe-americas"></i> {text:Link Five}</a>
  1858. {/block:IfShowLinkFive}
  1859.  
  1860. </div>
  1861. <!-- End lb_links -->
  1862.  
  1863. </div>
  1864. <!-- End link_box -->
  1865.  
  1866. </div>
  1867. <!-- End header -->
  1868.  
  1869. <!-- Sticky -->
  1870. <div id="sticky"></div>
  1871.  
  1872. {/block:IndexPage}
  1873.  
  1874. <!-- Sidebar -->
  1875. <aside>
  1876.  
  1877. <div id="sidebar" data-aos="fade-up" data-aos-once="true">
  1878.  
  1879. <div id="close"><i class="fas fa-times"></i></div>
  1880.  
  1881. {block:IfShowSidebarImage}
  1882. <div id="sidebarimage">
  1883. <img src="{image:Sidebar image}">
  1884. </div>
  1885. <!-- End sidebarimage -->
  1886. {/block:IfShowSidebarImage}
  1887.  
  1888. {block:ifShowAvatar}
  1889. <div id="avatar"><img src="{image:Avatar}"></div>
  1890. {/block:ifShowAvatar}
  1891.  
  1892. {block:IfShowNavigation}
  1893. <!--Navigation bar-->
  1894. <div id="navigation">
  1895.  
  1896. {block:IfShowLinkSix}
  1897. <a href="{text:Link Six url}"><i class="fas fa-user-astronaut"></i><span class="underline">{text:Link Six}</span></a>
  1898. {/block:IfShowLinkSix}
  1899. {block:IfShowLinkSeven}
  1900. <a href="{text:Link Seven url}"><i class="fas fa-moon"></i><span class="underline">{text:Link Seven}</span></a>
  1901. {/block:IfShowLinkSeven}
  1902. {block:IfShowLinkEight}
  1903. <a href="{text:Link Eight url}"><i class="fas fa-space-shuttle fa-rotate-270"></i><span class="underline">{text:Link Eight}</span></a>
  1904. {/block:IfShowLinkEight}
  1905. {block:IfShowLinkNine}
  1906. <a href="{text:Link Nine url}"><i class="fas fa-star"></i><span class="underline">{text:Link Nine}</span></a>
  1907. {/block:IfShowLinkNine}
  1908. {block:IfShowLinkTen}
  1909. <a href="{text:Link Ten url}"><i class="fas fa-globe-americas"></i><span class="underline">{text:Link Ten}</span></a>
  1910. {/block:IfShowLinkTen}
  1911.  
  1912. </div>
  1913. <!-- End navigation -->
  1914. {/block:IfShowNavigation}
  1915.  
  1916. </div>
  1917. <!-- End sidebar -->
  1918.  
  1919. </aside>
  1920. <!-- End aside -->
  1921.  
  1922.  
  1923. <div id="container">
  1924.  
  1925. <!-- Posts -->
  1926. <section id="posts">
  1927.  
  1928. {block:posts}
  1929.  
  1930. <article class="entry {block:Caption}captioned{/block:Caption}" data-aos="fade-up" data-aos-once="true">
  1931.  
  1932. {block:Date}
  1933.  
  1934. <div class="topinfo">
  1935.  
  1936. <div class="topinfourl">
  1937. {block:RebloggedFrom}
  1938. <a href="/"> {text:Blog alias}</a>
  1939. <i class="fa fa-retweet" aria-hidden="true"></i>
  1940. <a href="{ReblogParentURL}" target="_blank"> {ReblogParentName}</a>
  1941. {/block:RebloggedFrom}
  1942.  
  1943. {block:NotReblog}
  1944. <a href="/">{text:Blog alias}</a>
  1945. {/block:NotReblog}
  1946. </div>
  1947. <!-- End topinfourl-->
  1948.  
  1949. <div class="topinfod"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"> {ShortMonth} {DayOfMonthWithZero} </a></div>
  1950.  
  1951. </div>
  1952. <!-- End topinfo-->
  1953.  
  1954. {/block:Date}
  1955.  
  1956. <!-- Text post -->
  1957. {block:Text}
  1958. <div class="content">
  1959. {block:Title}
  1960. <div class="title">{Title}</div>{/block:Title}
  1961. {block:RebloggedFrom}
  1962. {block:Reblogs}
  1963. <li class="comment {block:Title}{/block:Title}">
  1964. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1965. <div class="tex">{body}</div>
  1966. </li>
  1967. {/block:Reblogs}
  1968. {/block:RebloggedFrom}
  1969. {block:NotReblog}
  1970. <li class="comment {block:Title}{/block:Title}">
  1971. <div class="tex">{body}</div>
  1972. </li>
  1973. {/block:NotReblog}
  1974. </div>
  1975. <!-- End content -->
  1976. {/block:Text}
  1977.  
  1978. <!-- Photo post -->
  1979. {block:Photo}
  1980. {block:IndexPage}
  1981. {LinkOpenTag}
  1982. <img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
  1983. {LinkCloseTag}
  1984. {/block:IndexPage}
  1985. {block:PermalinkPage}
  1986. {LinkOpenTag}
  1987. <img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
  1988. {LinkCloseTag}
  1989. {/block:PermalinkPage}
  1990. {/block:Photo}
  1991.  
  1992. <!-- Photoset post -->
  1993. {block:Photoset}
  1994. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1995. {/block:Photoset}
  1996.  
  1997. <!-- Quote post -->
  1998. {block:Quote}
  1999. <div class="content">
  2000. <div class="quote">
  2001. "{Quote}"
  2002. </div>
  2003. <!-- End quote-->
  2004. <div class="source">
  2005. — {Source}
  2006. </div>
  2007. <!-- End source-->
  2008. </div>
  2009. <!-- End content -->
  2010. {/block:Quote}
  2011.  
  2012. <!-- Link post -->
  2013. {block:Link}
  2014. {block:Thumbnail}
  2015. <div class="linkthumb">
  2016. <img src="{Thumbnail}" alt="{Name}">
  2017. </div>
  2018. <!-- End linkthumb-->
  2019. {/block:Thumbnail}
  2020. <div class="linkp">
  2021. <a href="{URL}"><h1>{Name} <i class="fa fa-angle-right" aria-hidden="true"></i></h1></a>
  2022. {block:Description}
  2023. {Description}
  2024. {/block:Description}
  2025. </div>
  2026. <!-- End linkp-->
  2027. {/block:Link}
  2028.  
  2029. <!-- Chat post -->
  2030. {block:Chat}
  2031. <div class="content">
  2032. {block:Title}<h1>{Title}</h1>{/block:Title}
  2033. {block:Lines}
  2034. <div class="line">
  2035. {block:Label}<b>{Label}</b>{/block:Label} {Line}
  2036. </div>
  2037. <!-- End line-->
  2038. {/block:Lines}
  2039. </div>
  2040. <!-- End content -->
  2041. {/block:Chat}
  2042.  
  2043. <!-- Audio post -->
  2044. {block:Audio}
  2045. <div style="height: 85px">{AudioEmbed-640}</div>
  2046. {/block:Audio}
  2047.  
  2048. <!-- Video post -->
  2049. {block:Video}
  2050. {Video-500}
  2051. {/block:Video}
  2052.  
  2053. <!-- Ask post -->
  2054. {block:Answer}
  2055. <div class="content">
  2056. <div class="asker">
  2057. <img src="{AskerPortraitURL-48}">
  2058. <div class="bubble">
  2059. <div class="triangle"></div>
  2060. {Asker}:
  2061. <br>{Question}
  2062. </div>
  2063. <!-- End bubble-->
  2064. </div>
  2065. <!-- End asker -->
  2066. <div class="answer">
  2067. {Answer}
  2068. </div>
  2069. <!-- End answer -->
  2070. </div>
  2071. <!-- End content -->
  2072. {/block:Answer}
  2073.  
  2074. <!-- Caption -->
  2075. {block:Caption}
  2076. {block:Reblogs}
  2077. <li class="comment">
  2078. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} } class="user" target="_blank">{Username}</a>
  2079. <div class="tex">{Body}</div>
  2080. </li>
  2081. {/block:Reblogs}
  2082. {block:NotReblog}
  2083. <li class="comment">
  2084. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Name}</a>
  2085. <div class="tex">{caption}</div>
  2086. </li>
  2087. {/block:NotReblog}
  2088. {/block:Caption}
  2089.  
  2090. {block:Date}
  2091.  
  2092. <div class="botinfo">
  2093.  
  2094. {block:RebloggedFrom}
  2095. {block:ContentSource}
  2096. Source: <a href="{ReblogRootURL}" target="_blank"> {ReblogRootName}</a><br>
  2097. {/block:ContentSource}
  2098. {/block:RebloggedFrom}
  2099.  
  2100. {block:HasTags}
  2101. <div class="tags">
  2102. {block:Tags}
  2103. <a href="{TagURL}">
  2104. #{Tag}</a> &nbsp;
  2105. {/block:Tags}<br>
  2106. </div>
  2107. {/block:HasTags}
  2108.  
  2109. {block:NoteCount}
  2110. <a href="{Permalink}"> {NoteCountWithLabel}</a>
  2111. {/block:NoteCount}
  2112.  
  2113. <div class="buttons">
  2114.  
  2115. {block:IndexPage}
  2116. <li class="perma"><a href="{Permalink}"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li>
  2117.  
  2118. {block:ifDisqusShortname}
  2119. <li class="cmnt"><a href="{Permalink}#disqus_thread"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
  2120. {/block:ifDisqusShortname}
  2121. {/block:IndexPage}
  2122.  
  2123. <li class="reblog"><a href="{ReblogURL}"><i class="fa fa-retweet" aria-hidden="true"></i></a></li>
  2124.  
  2125. <li class="like">{LikeButton}<i class="fa fa-heart" aria-hidden="true"></i></a>
  2126.  
  2127. </div>
  2128. <!-- End buttons -->
  2129.  
  2130. </div>
  2131. <!-- End botinfo-->
  2132.  
  2133. <!--Permalink page-->
  2134. {block:PermalinkPage}
  2135.  
  2136. {block:PostNotes}
  2137.  
  2138. <div class="clickme">Show/hide post notes</div>
  2139.  
  2140. <div id="notes">
  2141. {PostNotes}
  2142. </div>
  2143. <!-- End notes-->
  2144. {/block:PostNotes}
  2145.  
  2146. {block:PermalinkPagination}
  2147. <div class="permapag">
  2148. <center>
  2149. {block:PreviousPost}
  2150. <a href="{PreviousPost}"><i class="fa fa-caret-left" aria-hidden="true"></i> Prev post</a>
  2151. {/block:PreviousPost}
  2152.  
  2153. {block:NextPost}
  2154. <a href="{NextPost}"> Next post <i class="fa fa-caret-right" aria-hidden="true"></i></a>
  2155. {/block:NextPost}
  2156. </center>
  2157. </div><br>
  2158. {/block:PermalinkPagination}
  2159.  
  2160. {block:ifDisqusShortname}
  2161. <div id="disqusbox">
  2162.  
  2163. <div id="disqus_thread"></div>
  2164. <script type="text/javascript">
  2165. /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  2166. var disqus_shortname = '{text:Disqus Shortname}'; // Required - Enter shortname in Tumblr Theme Options
  2167. var disqus_url = '{Permalink}';
  2168.  
  2169. /* * * DON'T EDIT BELOW THIS LINE * * */
  2170. (function() {
  2171. var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  2172. dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  2173. (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  2174. })();
  2175. </script>
  2176. <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  2177. <a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  2178.  
  2179. </div>
  2180. <!-- End disqus box-->
  2181. {/block:ifDisqusShortname}
  2182.  
  2183. {/block:PermalinkPage}
  2184.  
  2185. {/block:Date}
  2186.  
  2187. </article>
  2188.  
  2189. {/block:Posts}
  2190.  
  2191. </section>
  2192.  
  2193.  
  2194. {block:Pagination}
  2195.  
  2196. <div id="pagcon">
  2197.  
  2198. <div id="pagination">
  2199. {block:PreviousPage}
  2200. <a class="previous" href="{PreviousPage}"><i class="fa fa-caret-left" aria-hidden="true"></i> NEWER </a>
  2201. {/block:PreviousPage}
  2202.  
  2203. {block:NextPage}
  2204. <a class="next" href="{NextPage}"> OLDER <i class="fa fa-caret-right" aria-hidden="true"></i></a>
  2205. {/block:NextPage}
  2206. </div>
  2207. <!-- End pagination -->
  2208.  
  2209. <div id="iscon">
  2210. {block:ifLoadMore}
  2211. <center>
  2212. <a href="#" class="load-more"> LOAD MORE <i class="fa fa-caret-down" aria-hidden="true"></i></a>
  2213. </center>
  2214. {/block:ifLoadMore}
  2215. </div>
  2216. <!-- End iscon -->
  2217.  
  2218. </div>
  2219. <!-- End pagcon -->
  2220.  
  2221. {/block:Pagination}
  2222.  
  2223. </div>
  2224. <!-- End container -->
  2225.  
  2226. <!-------------------------------- SCRIPTS -------------------------------->
  2227.  
  2228. <!--Google fonts -->
  2229.  
  2230. <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans|Roboto|Playfair+Display|Montserrat" rel="stylesheet">
  2231.  
  2232. <!-- Font awesome -->
  2233.  
  2234. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  2235.  
  2236. <!--Sticky-->
  2237. {block:IndexPage}
  2238. <script type="text/javascript">
  2239. $(function(){
  2240. var stickyRibbonTop = $('#sticky').offset().top;
  2241. $(window).scroll(function(){
  2242. if( $(window).scrollTop() > stickyRibbonTop ) {
  2243.  
  2244. $('#menu').addClass("stickymenu");
  2245. $('aside').addClass("stickyaside");
  2246. } else {
  2247. $('#menu').removeClass("stickymenu");
  2248. $('aside').removeClass("stickyaside");
  2249. }
  2250. });
  2251.  
  2252. });
  2253. </script>
  2254.  
  2255. <script type="text/javascript">
  2256. $(document).ready(function(){
  2257.  
  2258. $("#open").click(function(){
  2259. $('aside').slideToggle('slow')
  2260. });
  2261.  
  2262. $("#close").click(function(){
  2263. $('aside').slideToggle('slow')
  2264. });
  2265.  
  2266. });
  2267. </script>
  2268.  
  2269.  
  2270. {/block:IndexPage}
  2271.  
  2272. <!-- PXU photoset & responsive photosets -->
  2273.  
  2274. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2275. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  2276. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  2277.  
  2278. {block:IndexPage}
  2279.  
  2280. <script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  2281.  
  2282. {block:ifInfiniteScroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  2283. {/block:ifInfiniteScroll}
  2284.  
  2285. {/block:IndexPage}
  2286.  
  2287. <script>
  2288. $(document).ready(function(){
  2289. $('.photo-slideshow').pxuPhotoset({
  2290. lightbox: true,
  2291. rounded: false,
  2292. gutter: '1px',
  2293. photoset: '.photo-slideshow',
  2294. photoWrap: '.photo-data',
  2295. photo: '.pxu-photo'
  2296. });
  2297. {block:IndexPage}
  2298. var $container = $('section');
  2299. $container.masonry({ itemSelector: 'article' });
  2300. $container.imagesLoaded(function(){
  2301. $container.masonry();
  2302. $container.find('article').animate({ opacity: 1, zIndex: 1 });
  2303. });
  2304. {block:ifInfiniteScroll}
  2305. $container.infinitescroll({
  2306. itemSelector: 'article',
  2307. navSelector: '.pagination',
  2308. nextSelector: '.next',
  2309. loadingImg: '',
  2310. loadingText: '<em></em>',
  2311. bufferPx: 2000
  2312. },
  2313. function( newElements ) {
  2314. var $newElems = $( newElements );
  2315. $newElems.find('.photo-slideshow').pxuPhotoset({
  2316. lightbox: true,
  2317. rounded: false,
  2318. gutter: '1px',
  2319. photoset: '.photo-slideshow',
  2320. photoWrap: '.photo-data',
  2321. photo: '.pxu-photo'
  2322. },
  2323. function(){
  2324. $container.masonry();
  2325. });
  2326. $newElems.imagesLoaded(function(){
  2327. $container.masonry( 'appended', $newElems );
  2328. $newElems.animate({ opacity: 1, zIndex: 1 });
  2329. });
  2330. });
  2331. {/block:ifInfiniteScroll}
  2332. $container.infinitescroll({
  2333. itemSelector: "article",
  2334. navSelector: "#pagination",
  2335. nextSelector: ".next",
  2336. loadingImg: "",
  2337. loadingText: "<em></em>",
  2338. bufferPx: 10000,
  2339. extraScrollPx: 12000,
  2340. errorCallback: function() {
  2341. $('.load-more').fadeOut();
  2342. }
  2343. }, function(newElements) {
  2344. var $newElems = $(newElements).css({
  2345. opacity: 0
  2346. });
  2347. $newElems.imagesLoaded(function() {
  2348. $newElems.animate({
  2349. opacity: 1
  2350. });
  2351. $container.masonry('appended', $newElems,
  2352. true);
  2353. });
  2354. });
  2355. {block:ifLoadMore}
  2356. $(window).unbind('.infscr');
  2357. $('.load-more').click(function() {
  2358. $container.infinitescroll('retrieve');
  2359. return false
  2360. });
  2361. {/block:ifLoadMore}
  2362. {/block:IndexPage}
  2363. });
  2364. </script>
  2365.  
  2366. <!-- Show/Hide tumblr notes -->
  2367. <script>
  2368. $(document).ready(function(){
  2369. $(".clickme").click(function(){
  2370. $("#notes").toggle(500);
  2371. });
  2372. });
  2373. </script>
  2374.  
  2375. <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  2376.  
  2377. <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  2378.  
  2379. <script type="text/javascript">
  2380. AOS.init({
  2381. duration: 500,
  2382. })
  2383. </script>
  2384.  
  2385. <!-- CREDIT (do not remove) -->
  2386.  
  2387. <div id="credit"><a href="https://borntobewildcodes.tumblr.com" title="theme SPACE by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  2388.  
  2389. {block:ContentSource}
  2390. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  2391. width="{LogoWidth}" height= "{LogoHeight}" alt="{SourceTitle}" />
  2392. {/block:SourceLogo}
  2393. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2394. {/block:ContentSource}
  2395. </body>
  2396. </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!