themesbyces

Theme — Gemini

Mar 4th, 2020 (edited)
3,965
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 25.58 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!--
  14.  
  15. theme: gemini
  16. designed and coded by ghcstfaec
  17. see credits @ https://ghcstfaec.tumblr.com/credits
  18.  
  19. -->
  20.  
  21. <!-- Metadata -->
  22.  
  23. <meta name="color:Asker Background" content="#f0f0f0"/>
  24. <meta name="color:Background" content="#ffffff"/>
  25. <meta name="color:Border" content="#d2d2d2"/>
  26. <meta name="color:Link" content="#000000"/>
  27. <meta name="color:Link Hover" content="#cfcfcf"/>
  28. <meta name="color:Like" content="#ec6363"/>
  29. <meta name="color:Main Color" content="#88aa55"/>
  30. <meta name="color:Pin" content="#31a49d"/>
  31. <meta name="color:Post Background" content="#ffffff"/>
  32. <meta name="color:Question Background" content="#ffffff"/>
  33. <meta name="color:Quote Icon Color" content="#ffffff"/>
  34. <meta name="color:Scrollbar" content="#000000"/>
  35. <meta name="color:Text" content="#555555"/>
  36. <meta name="color:Tooltip Background" content="#000000"/>
  37. <meta name="color:Tooltip Color" content="#ffffff"/>
  38.  
  39. <meta name="select:Body Font" content="Karla" title="Karla"/>
  40. <meta name="select:Body Font" content="Montserrat" title="Montserrat"/>
  41. <meta name="select:Body Font" content="Muli" title="Muli"/>
  42. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  43. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  44. <meta name="select:Body Font" content="Raleway" title="Raleway"/>
  45. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  46.  
  47. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  48. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  49. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  50.  
  51. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  52. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  53.  
  54. <meta name="image:Sidebar Image" content="https://i.imgur.com/0cMNT2x.png"/>
  55. <meta name="image:Icon Image" content="https://i.imgur.com/oAQinfJ.png"/>
  56.  
  57. <meta name="text:Title" content="Gemini"/>
  58.  
  59. <meta name="text:Link 1 URL" content="/"/>
  60. <meta name="text:Link 1 Name" content="Link One"/>
  61. <meta name="text:Link 2 URL" content="/"/>
  62. <meta name="text:Link 2 Name" content="Link Two"/>
  63. <meta name="text:Link 3 URL" content="/"/>
  64. <meta name="text:Link 3 Name" content="Link Three"/>
  65. <meta name="text:Link 4 URL" content="/"/>
  66. <meta name="text:Link 4 Name" content="Link Four"/>
  67. <meta name="text:Link 5 URL" content="/"/>
  68. <meta name="text:Link 5 Name" content="Link Five"/>
  69. <meta name="text:Link 6 URL" content="/"/>
  70. <meta name="text:Link 6 Name" content="Link Six"/>
  71. <meta name="text:Link 7 URL" content="/"/>
  72. <meta name="text:Link 7 Name" content="Link Seven"/>
  73. <meta name="text:Link 8 URL" content="/"/>
  74. <meta name="text:Link 8 Name" content="Link Eight"/>
  75. <meta name="text:Link 9 URL" content="/"/>
  76. <meta name="text:Link 9 Name" content="Link Nine"/>
  77. <meta name="text:Link 10 URL" content="/"/>
  78. <meta name="text:Link 10 Name" content="Link Ten"/>
  79.  
  80. <meta name="if:Submit Link" content="1"/>
  81.  
  82. <meta name="if:Hide Tags" content="0"/>
  83. <meta name="if:Show Tags" content="1"/>
  84.  
  85. <!-- Google Fonts Script -->
  86.  
  87. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Muli:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  88.  
  89. <!-- jQuery Script -->
  90.  
  91. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  92.  
  93. <!-- Styled Tooltips Script -->
  94.  
  95. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  96.  
  97. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  98.  
  99. <script>
  100. (function($){
  101. $(document).ready(function(){
  102. $("a[title]").style_my_tooltips({
  103. tip_follows_cursor:true,
  104. tip_delay_time:90,
  105. tip_fade_speed:600,
  106. attribute:"title"
  107. });
  108. });
  109. })(jQuery);
  110. </script>
  111.  
  112. <!-- Font Awesome Script -->
  113.  
  114. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  115.  
  116. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  117.  
  118. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  119.  
  120. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  121.  
  122. <script>
  123. tumblr_npf_audio({
  124. emptyTitleText: "",
  125. emptyArtistText: "",
  126. emptyAlbumText: "",
  127. titleLabel: "",    
  128. artistLabel: "",
  129. albumLabel: "",
  130. });
  131. </script>
  132.  
  133. <!-- Hide & Show Script -->
  134.  
  135. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  136.  
  137. <script>
  138. $(document).ready(function(){
  139. $('.tags').hide();
  140. $('.tags-title').click(function() {
  141. $(this).closest('.entries').find('.tags').slideToggle(500);
  142. });
  143. });
  144. </script>
  145.  
  146. <!-- Unnest Captions Script -->
  147.  
  148. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  149.  
  150. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  151.  
  152. <script>
  153. $(function(){  $('.entries').unnest({
  154. yourCaption: ".text, .caption",
  155. wrapName: ".tumblr_parent",
  156. newCaptionUsername: false,
  157. originalPostCaptionUsername: false,
  158. tumblrAvatars: true,
  159. tumblrAvatarClass: ".tumblr_avatar",
  160. usernameColon: false
  161. });
  162. });
  163. </script>
  164.  
  165. <!--
  166.         NPF images fix v4.0 by @glenthemes [2023]
  167.         💌 gitlab.com/glen-npf/v4-beta
  168. --->
  169.  
  170. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  171.  
  172. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  173. <style>
  174. :root {
  175. --NPF-Images-Spacing:1px;
  176. --NPF-Caption-Spacing:1em;
  177. --NPF-Move-1st-Photoset:"no";
  178. --Text-Container-Selector:".caption";
  179. --Text-Reblogs-Selector:".tumblr_parent";
  180. }
  181. </style>
  182.  
  183. <!-- Inline Images Resizing Script -->
  184.  
  185. <script>
  186. $(".tmblr-full, figure").each(function(){
  187. var imgWidth = $(this).attr("data-orig-width"),
  188. img = $(this).find("img"),
  189. imgSrc = img.attr("src");
  190. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  191. if (imgWidth >= 500){
  192. img.attr("src",imgSrc.replace("_500.","_1280."));
  193. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  194. }
  195. });  
  196. </script>
  197.  
  198. <!-- PXU Script -->
  199.  
  200. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  201.  
  202. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  203.  
  204. <script>
  205. $(document).ready(function(){
  206. $('.photo-slideshow').pxuPhotoset({
  207. lightbox: true,
  208. rounded: false,
  209. gutter: '1px',
  210. borderRadius: '0px',
  211. photoset: '.photo-slideshow',
  212. photoWrap: '.photo-data',
  213. photo: '.pxu-photo'
  214. });
  215. });
  216. </script>
  217.  
  218. <!-- Responsive Tumblr Videos Script -->
  219.  
  220. <script src="//cdn.jsdelivr.net/gh/robinpx/tumblr@master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  221.  
  222. <script>
  223. $(document).ready(function() {
  224. flexibleFrames($(".video"));  
  225. });
  226. </script>
  227.  
  228. <style type="text/css">
  229.  
  230. .tmblr-iframe--app-cta-button {
  231. display: none!important;
  232. }
  233.  
  234. ::-webkit-scrollbar-thumb:vertical {
  235. background: {color:Scrollbar};
  236. }
  237.  
  238. ::-webkit-scrollbar {
  239. width: 1px;
  240. }
  241.  
  242. ::selection {
  243. background: {color:Main Color};
  244. color: white;
  245. }
  246.  
  247. ::-moz-selection {
  248. background: {color:Main Color};
  249. color: white;
  250. }
  251.  
  252. #s-m-t-tooltip {
  253. background: {color:Tooltip Background};
  254. border-radius: 5px;
  255. color: {color:Tooltip Color};
  256. font-size: {select:Uppercase Font Size};
  257. margin-top: 30px;
  258. padding: 5px;
  259. text-align: center;
  260. text-transform: uppercase;
  261. z-index: 999999999999999999999999999999999999;
  262. }
  263.  
  264. body {
  265. background: {color:Background};
  266. color: {color:Text};
  267. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  268. font-family: '{select:Body Font}', sans-serif;
  269. font-size: {select:Body Font Size};
  270. font-style: normal;
  271. font-weight: 400;
  272. hyphens: auto;
  273. letter-spacing: 1px;
  274. margin: 0px;
  275. text-align: left;
  276. text-transform: none;
  277. word-wrap: break-word;
  278. }
  279.  
  280. a {
  281. color: {color:Link};
  282. text-decoration: none;
  283. -webkit-transition: all 0.5s ease;
  284. -moz-transition: all 0.5s ease;
  285. -o-transition: all 0.5s ease;
  286. }
  287.  
  288. a:hover {
  289. color: {color:Link Hover};
  290. }
  291.  
  292. b {
  293. font-weight: 700;
  294. }
  295.  
  296. h1 {
  297. font-size: 1.2rem;
  298. font-weight: bold;
  299. margin-block-start: 0em;
  300. text-transform: lowercase;
  301. }
  302.  
  303. h2 {
  304. font-size: 1rem;
  305. font-weight: bold;
  306. margin-block-start: 0em;
  307. }
  308.  
  309. blockquote {
  310. border-left: 1px solid {color:Border};
  311. margin: 5px;
  312. padding-left: 5px;
  313. }
  314.  
  315. blockquote img {
  316. height: auto;
  317. max-width: 100%;
  318. }
  319.  
  320. blockquote blockquote {
  321. border-left: 1px solid {color:Border};
  322. padding-left: 5px;
  323. }
  324.  
  325. pre {
  326. background: #f8f8f8;
  327. border-radius: 5px;
  328. padding: 10px;
  329. word-wrap: break-all;
  330. white-space: pre-wrap;
  331. }
  332.  
  333. #border {
  334. background: {color:Background};
  335. border-right: 1px solid {color:Border};
  336. height: 100%;
  337. position: fixed;
  338. top: 0px;
  339. width: 100px;
  340. z-index: 1;
  341. }
  342.  
  343. .icon-image {
  344. height: 65px;
  345. margin-left: auto;
  346. margin-right: auto;
  347. margin-top: 17.5px;
  348. width: 65px;
  349. }
  350.  
  351. .icon-image img {
  352. border-radius: 100px;
  353. height: 65px;
  354. width: 65px;
  355. }
  356.  
  357. #navigation {
  358. background: {color:Main Color};
  359. border: 1px solid {color:Main Color};
  360. border-radius: 5px;
  361. bottom: 17.5px;
  362. color: {color:Post Background};
  363. display: inline-block;
  364. font-size: 1rem;
  365. margin-left: 33px;
  366. outline: none;
  367. padding: 7px;
  368. position: fixed;
  369. width: 32px;
  370. z-index: 1;
  371. -webkit-transition: all 0.5s ease;
  372. -moz-transition: all 0.5s ease;
  373. -o-transition: all 0.5s ease;
  374. }
  375.  
  376. #navigation:hover {
  377. background: {color:Post Background};
  378. color: {color:Main Color};
  379. }
  380.  
  381. .modal {
  382. animation-duration: 0.5s;
  383. animation-name: animatetop;
  384. background: rgba(255, 255, 255, 0.5);
  385. display: none;
  386. height: 100%;
  387. left: 0px;
  388. overflow: auto;
  389. position: fixed;
  390. top: 0px;
  391. width: 100%;
  392. z-index: 999999999999999999999999999999999999;
  393. }
  394.  
  395. .modal-content {
  396. background: {color:Post Background};
  397. border: 1px solid {color:Border};
  398. border-radius: 5px;
  399. margin-bottom: 100px;
  400. margin-left: auto;
  401. margin-right: auto;
  402. margin-top: 100px;
  403. padding: 25px;
  404. width: 400px;
  405. }
  406.  
  407. .modal-title {
  408. border-bottom: 1px solid {color:Border};
  409. font-size: {select:Uppercase Font Size};
  410. font-weight: bold;
  411. margin-bottom: 20px;
  412. padding-bottom: 20px;
  413. text-transform: uppercase;
  414. }
  415.  
  416. .navigation {
  417. display: flex;
  418. flex-direction: row;
  419. flex-wrap: wrap;
  420. font-size: {select:Uppercase Font Size};
  421. margin: -5px;
  422. text-transform: uppercase;
  423. width: 410px;
  424. }
  425.  
  426. .navigation a {
  427. border-bottom: 1px solid {color:Border};
  428. margin: 5px;
  429. padding-bottom: 5px;
  430. width: 195px;
  431. }
  432.  
  433. @keyframes animatetop {
  434.  
  435. from {
  436. opacity: 0;
  437. }
  438.  
  439. to {
  440. top: 0px;
  441. opacity: 1;
  442. }
  443.  
  444. }
  445.  
  446. #container {
  447. margin-bottom: 100px;
  448. margin-left: 101px;
  449. margin-top: 100px;
  450. width: calc(100% - 101px);
  451. }
  452.  
  453. #posts-wrapper {
  454. display: flex;
  455. align-items: flex-start;
  456. margin-left: auto;
  457. margin-right: auto;
  458. width: 812px;
  459. }
  460.  
  461. #user-information {
  462. margin-left: 100px;
  463. width: 270px;
  464. }
  465.  
  466. .sidebar-image {
  467. height: 300px;
  468. width: 270px;
  469. }
  470.  
  471. .sidebar-image img {
  472. height: 300px;
  473. width: 270px;
  474. }
  475.  
  476. .title {
  477. border-bottom: 1px solid {color:Border};
  478. font-size: {select:Uppercase Font Size};
  479. font-weight: bold;
  480. margin-bottom: 20px;
  481. margin-top: 30px;
  482. padding-bottom: 20px;
  483. text-transform: uppercase;
  484. }
  485.  
  486. .description {
  487. margin-top: 15px;
  488. }
  489.  
  490. .links {
  491. font-size: {select:Uppercase Font Size};
  492. margin: -5px;
  493. margin-top: 15px;
  494. text-transform: uppercase;
  495. }
  496.  
  497. .links a {
  498. border-bottom: 1px solid {color:Border};
  499. display: inline-block;
  500. margin: 5px;
  501. padding-bottom: 5px;
  502. width: 127px;
  503. }
  504.  
  505. #posts {
  506. width: 442px;
  507. }
  508.  
  509. .entries {
  510. background: {color:Post Background};
  511. border: 1px solid {color:Border};
  512. border-radius: 5px;
  513. margin-bottom: 50px;
  514. padding: 20px;
  515. width: 400px;
  516. }
  517.  
  518. .entries img {
  519. height: auto;
  520. max-width: 100%;
  521. }
  522.  
  523. .npf_row img {
  524. width: 100%;
  525. }
  526.  
  527. .tmblr-full {
  528. margin-bottom: 10px;
  529. }
  530.  
  531. .npf_inst {
  532. margin-bottom: 20px;
  533. }
  534.  
  535. .npf-wrapper {
  536. margin: 0px;
  537. }
  538.  
  539. .npf-wrapper .tmblr-full {
  540. display: flex;
  541. }
  542.  
  543. .text-wrapper {
  544. margin: 0px;
  545. }
  546.  
  547. .read_more {
  548. background: {color:Main Color};
  549. border: 1px solid {color:Border};
  550. border-radius: 5px;
  551. color: white;
  552. display: inline-block;
  553. font-size: {select:Uppercase Font Size};
  554. padding: 10px;
  555. text-align: center;
  556. text-transform: uppercase;
  557. width: calc(100% - 22px);
  558. }
  559.  
  560. .read_more:hover {
  561. background: white;
  562. color: {color:Main Color};
  563. }
  564.  
  565. .vignette, #vignette {
  566. opacity: 0;
  567. }
  568.  
  569. .lightbox-image, #tumblr_lightbox img {
  570. border-radius: 0!important;
  571. box-shadow: none!important;
  572. max-width: none;
  573. }
  574.  
  575. .tmblr-lightbox, #tumblr_lightbox {
  576. background-attachment: fixed;
  577. background-image: url('https://i.imgur.com/7wF2zbK.png');
  578. background-repeat: repeat;
  579. }
  580.  
  581. .lightbox-caption, #tumblr_lightbox_caption {
  582. visibility: hidden;
  583. }
  584.  
  585. .text p {
  586. margin-top: 0px;
  587. }
  588.  
  589. .caption {
  590. margin-top: 20px;
  591. }
  592.  
  593. .caption p {
  594. margin-top: 0px;
  595. }
  596.  
  597. blockquote.tumblr_parent {
  598. border: none;
  599. border-bottom: 1px solid {color:Border};
  600. margin: 0px;
  601. margin-bottom: 20px;
  602. padding: 0px;
  603. }
  604.  
  605. blockquote.tumblr_parent:last-child {
  606. border-bottom: 0px;
  607. }
  608.  
  609. blockquote.user-reblog {
  610. border: none;
  611. margin: 0px;
  612. padding: 0px;
  613. }
  614.  
  615. .tumblr_avatar {
  616. border-radius: 100px;
  617. height: 30px;
  618. margin-bottom: 20px;
  619. width: 30px;
  620. }
  621.  
  622. .tumblr_avatar img {
  623. height: 30px;
  624. width: 30px;
  625. }
  626.  
  627. .user-image img {
  628. height: 30px;
  629. width: 30px;
  630. }
  631.  
  632. a.tumblr_blog {
  633. font-size: {select:Body Font Size};
  634. font-weight: bold;
  635. margin-top: calc((30px - {select:Body Font Size}) / 4);
  636. display: inline-block;
  637. position: absolute;
  638. margin-left: 10px;
  639. text-align: center;
  640. text-transform: lowercase;
  641. }
  642.  
  643. .ask-wrapper {
  644. width: 100%;
  645. }
  646.  
  647. .asker {
  648. background: {color:Asker Background};
  649. border: 1px solid {color:Border};
  650. padding: 20px;
  651. }
  652.  
  653. .asker-url {
  654. font-size: {select:Uppercase Font Size};
  655. text-align: center;
  656. text-transform: uppercase;
  657. }
  658.  
  659. .asker-url a {
  660. border: none;
  661. background: none;
  662. padding: 0px;
  663. }
  664.  
  665. .question {
  666. background: {color:Question Background};
  667. border: 1px solid {color:Border};
  668. border-top: none;
  669. padding: 20px;
  670. text-align: center;
  671. }
  672.  
  673. .question p {
  674. margin-block-start: 0em;
  675. }
  676.  
  677. .question p:last-of-type {
  678. margin-block-end: 0em;
  679. }
  680.  
  681. .quote {
  682. background: {color:Asker Background};
  683. font-size: {select:Uppercase Font Size};
  684. padding: 10px;
  685. text-transform: uppercase;
  686. }
  687.  
  688. .quote-icon {
  689. background: {color:Main Color};
  690. display: inline-block;
  691. color: {color:Quote Icon Color};
  692. margin: -10px;
  693. padding: 10px;
  694. }
  695.  
  696. .quote-wrapper {
  697. margin-top: 20px;
  698. width: 100%;
  699. }
  700.  
  701. .quote a.tumblr_blog {
  702. font-size: {select:Uppercase Font Size};
  703. font-weight: normal;
  704. margin-top: 0px;
  705. margin-left: 0px;
  706. display: inline-block;
  707. position: relative;
  708. text-align: center;
  709. text-transform: uppercase;
  710. }
  711.  
  712. .website {
  713. background: {color:Main Color};
  714. color: {color:Quote Icon Color};
  715. font-size: {select:Uppercase Font Size};
  716. padding: 10px;
  717. text-transform: uppercase;
  718. }
  719.  
  720. .website a {
  721. color: {color:Quote Icon Color};
  722. }
  723.  
  724. .website a:hover {
  725. color: {color:Link Hover};
  726. }
  727.  
  728. .chat {
  729. font-size: {select:Uppercase Font Size};
  730. text-transform: uppercase;
  731. }
  732.  
  733. .chat li {
  734. list-style-type: none;
  735. }
  736.  
  737. .chat li:nth-child(odd) {
  738. background: {color:Main Color};
  739. color: {color:Quote Icon Color};
  740. padding: 10px;
  741. }
  742.  
  743. .chat li:nth-child(even) {
  744. background: {color:Asker Background};
  745. color: {color:Main Color};
  746. padding: 10px;
  747. }
  748.  
  749. .audio iframe {
  750. height: 85px;
  751. width: 100%;
  752. }
  753.  
  754. /** spotify fix by glenthemes **/
  755.  
  756. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  757. height: 85px!important;
  758. margin-bottom: 0px;
  759. }
  760.  
  761. figure {
  762. display: flex;
  763. width: 100%;
  764. }
  765.  
  766. figcaption.npf-audio-wrapper {
  767. width: 100%;
  768. }
  769.  
  770. .npf-audio-wrapper {
  771. --NPF-Audio-Buttons-Size: 1.4rem;
  772. --NPF-Audio-Buttons-Color: #555555;
  773. --NPF-Audio-Buttons-Spacing: 1.3rem;
  774. --NPF-Audio-Image-Size: 85px;
  775. --NPF-Audio-Image-Spacing: 0px;
  776. }
  777.  
  778. span.npf-audio-title {
  779. font-weight: bold;
  780. }
  781.  
  782. .npf-audio-background {
  783. background-color: #f2f2f2;
  784. padding: 1.5rem;
  785. }
  786.  
  787. video {
  788. height: auto;
  789. width: 100%;
  790. }
  791.  
  792. .source {
  793. background: {color:Asker Background};
  794. border-radius: 5px;
  795. display: inline-block;
  796. font-size: {select:Uppercase Font Size};
  797. margin-top: 10px;
  798. padding: 5px;
  799. text-transform: uppercase;
  800. }
  801.  
  802. .notes-wrapper {
  803. border-bottom: 1px solid {color:Border};
  804. font-size: {select:Uppercase Font Size};
  805. font-weight: bold;
  806. margin: -20px;
  807. margin-bottom: 20px;
  808. padding: 20px;
  809. text-transform: uppercase;
  810. }
  811.  
  812. .entries-information {
  813. border-top: 1px solid {color:Border};
  814. font-size: {select:Uppercase Font Size};
  815. margin-top: 20px;
  816. padding-top: 20px;
  817. text-transform: uppercase;
  818. }
  819.  
  820. .like-b {
  821. display: inline-block;
  822. margin-right: 0px;
  823. position: relative;
  824. }
  825.  
  826. .like-b .like_button iframe {
  827. bottom: 0px;
  828. left: 0px;
  829. opacity: 0;
  830. position: absolute;
  831. right: 0px;
  832. top: 0px;
  833. }
  834.  
  835. .like-b .liked + .b {
  836. color: {color:Like};
  837. }
  838.  
  839. .like-b .liked + .b:after {
  840. content: 'd';
  841. }
  842.  
  843. .tags-title a {
  844. color: {color:Link};
  845. margin-top: 20px;
  846. margin-left: auto;
  847. margin-right: auto;
  848. margin-top: 20px;
  849. text-align: center;
  850. width: 70px;
  851. -webkit-transition: all 0.5s ease;
  852. -moz-transition: all 0.5s ease;
  853. -o-transition: all 0.5s ease;
  854. }
  855.  
  856. .tags-title:hover {
  857. color: {color:Link Hover};
  858. }
  859.  
  860. .tags {
  861. margin-top: 5px;
  862. }
  863.  
  864. .tags-alternate {
  865. margin-top: 5px;
  866. }
  867.  
  868. ol.notes {
  869. font-size: {select:Uppercase Font Size};
  870. margin: -10px;
  871. margin-top: 20px;
  872. padding: 0px;
  873. text-align: left;
  874. text-transform: uppercase;
  875. }
  876.  
  877. ol.notes li {
  878. list-style-type: none;
  879. margin: 10px;
  880. }
  881.  
  882. ol.notes li.note img.avatar {
  883. border-radius: 100px;
  884. vertical-align: -4px;
  885. height: 16px;
  886. margin-right: 10px;
  887. width: 16px;
  888. }
  889.  
  890. .more_notes_link {
  891. background: {color:Main Color};
  892. border-radius: 5px;
  893. color: white;
  894. display: inline-block;
  895. padding: 5px 10px 5px 10px;
  896. text-align: center;
  897. }
  898.  
  899. .pagination {
  900. font-size: {select:Uppercase Font Size};
  901. text-transform: uppercase;
  902. }
  903.  
  904. #credit {
  905. bottom: 15px;
  906. font-size: 0.7rem;
  907. position: fixed;
  908. right: 15px;
  909. text-transform: uppercase;
  910. }
  911.  
  912. #credit a {
  913. color: {color:Link};
  914. }
  915.  
  916. #credit a:hover {
  917. color: {color:Link Hover};
  918. }
  919.  
  920. {CustomCSS}
  921.    
  922. </style>
  923.    
  924. </head>
  925.  
  926. <body>
  927.  
  928. <div id="border">
  929.    
  930. <div class="icon-image"><img src="{image:Icon Image}"/></div>
  931.  
  932. <button id="navigation" title="Navigation"><i class="fas fa-list-ul"></i></button>
  933.  
  934. </div>
  935.  
  936. <div id="modal-popup" class="modal">
  937.  
  938. <div class="modal-content">
  939.  
  940. <div class="modal-title">Explore</div>
  941.  
  942. <div class="navigation">
  943. {block:ifLink5URL}<a href="{text:Link 5 URL}">{text:Link 5 Name}</a>{/block:ifLink5URL}
  944. {block:ifLink6URL}<a href="{text:Link 6 URL}">{text:Link 6 Name}</a>{/block:ifLink6URL}
  945. {block:ifLink7URL}<a href="{text:Link 7 URL}">{text:Link 7 Name}</a>{/block:ifLink7URL}
  946. {block:ifLink8URL}<a href="{text:Link 8 URL}">{text:Link 8 Name}</a>{/block:ifLink8URL}
  947. {block:ifLink9URL}<a href="{text:Link 9 URL}">{text:Link 9 Name}</a>{/block:ifLink9URL}
  948. {block:ifLink10URL}<a href="{text:Link 10 URL}">{text:Link 10 Name}</a>{/block:ifLink10URL}
  949. </div>
  950.  
  951. </div>
  952.  
  953. </div>
  954.  
  955. <div id="container">
  956.  
  957. <div id="posts-wrapper">
  958.  
  959. <div id="posts">
  960.  
  961. {block:Posts}
  962.  
  963. <div class="entries" id="{PostID}" post-type="{PostType}">
  964.  
  965. {block:NoteCount}<div class="notes-wrapper"><i class="far fa-chart-bar" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i><a href="{Permalink}">{NoteCountWithLabel}</a></div>{/block:NoteCount}
  966.  
  967. {block:Text}
  968. {block:NotReblog}
  969. <div class="npf-wrapper">
  970. {block:Title}
  971. <h1>{Title}</h1>
  972. {/block:Title}
  973. {Body}
  974. </div>
  975. {/block:NotReblog}
  976. {block:RebloggedFrom}
  977. <div class="text-wrapper">
  978. {block:Title}
  979. <h1>{Title}</h1>
  980. {/block:Title}
  981. <div class="text">
  982. {Body}
  983. </div>
  984. </div>
  985. {/block:RebloggedFrom}
  986. {/block:Text}
  987.  
  988. {block:Answer}
  989. <div class="ask-wrapper">
  990. <div class="asker">
  991. <div class="asker-url">
  992. <i class="far fa-question-circle" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  993. <br><br>
  994. A Message From <a href="{AskerURL}">{Asker}</a>
  995. </div>
  996. </div>
  997. <div class="question">
  998. {Question}
  999. </div>
  1000. </div>
  1001. <div class="caption">
  1002. {Answer}
  1003. </div>
  1004. {/block:Answer}
  1005.  
  1006. {block:Quote}
  1007. <div class="quote">
  1008. <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
  1009. <div class="quote-wrapper">
  1010. "{Quote}</i>" {block:Source}— {Source}{/block:Source}
  1011. </div>
  1012. </div>
  1013. {/block:Quote}
  1014.  
  1015. {block:Link}
  1016. {block:Thumbnail}
  1017. <img src="{Thumbnail}" style="margin-bottom: 10px;"/>
  1018. {/block:Thumbnail}
  1019. <div class="website"><i class="fas fa-external-link-alt" style="margin-right: 10px;"></i><a href="{URL}" target="_blank">{Name}{block:Excerpt}<br><br>{Excerpt}{/block:Excerpt}
  1020. </a></div>
  1021. {block:Description}
  1022. <div class="caption">
  1023. {Description}
  1024. </div>
  1025. {/block:Description}
  1026. {/block:Link}
  1027.  
  1028. {block:Chat}
  1029. <div class="chat">
  1030. {block:Title}
  1031. <h1>{Title}</h1>
  1032. {/block:Title}
  1033. {block:Lines}
  1034. <li>{block:Label}{Label}{/block:Label}
  1035. {Line}
  1036. </li>
  1037. {/block:Lines}
  1038. </div>
  1039. {/block:Chat}
  1040.  
  1041. {block:Audio}
  1042. <div class="audio">
  1043. {AudioEmbed}
  1044. </div>
  1045. {block:Caption}
  1046. <div class="caption">{Caption}</div>
  1047. {/block:Caption}
  1048. {/block:Audio}
  1049.  
  1050. {block:Photo}
  1051. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-HighRes}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  1052. {block:Caption}
  1053. <div class="text-wrapper">
  1054. <div class="caption">{Caption}</div>
  1055. </div>
  1056. {/block:Caption}
  1057. {/block:Photo}
  1058.  
  1059. {block:Photoset}
  1060. <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>
  1061. {block:Caption}
  1062. <div class="text-wrapper">
  1063. <div class="caption">{Caption}</div>
  1064. </div>
  1065. {/block:Caption}
  1066. {/block:Photoset}
  1067.  
  1068. {block:Video}
  1069. <div class="video">
  1070. {Video-500}
  1071. </div>
  1072. {block:Caption}
  1073. <div class="caption">{Caption}</div>
  1074. {/block:Caption}
  1075. {/block:Video}
  1076.  
  1077. {block:ContentSource}
  1078. <div class="source">
  1079. <i class="fas fa-paper-plane" style="color: {color:Main Color};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  1080. </div>
  1081. {/block:ContentSource}
  1082.  
  1083. {block:Date}
  1084. <div class="entries-information">
  1085. {block:PinnedPostLabel}
  1086. <font style="color: {color:Pin};"><i class="fas fa-thumbtack" style="margin-right: 5px;"></i>{PinnedPostLabel}</font>
  1087. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1088. {/block:PinnedPostLabel}
  1089. <a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
  1090. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1091. {block:RebloggedFrom} <a href="{ReblogParentURL}">Via</a> / {/block:RebloggedFrom}  
  1092. {block:ContentSource}{block:RebloggedFrom} <a href="{ReblogRootURL}">Source</a> / {/block:RebloggedFrom}{/block:ContentSource}
  1093. <a class="like-b" href="#">{LikeButton}<div class="b">Like</div></a> Or <a href="{ReblogURL}" target="_blank">Reblog</a>
  1094. {block:IfHideTags}
  1095. {block:HasTags}
  1096. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1097. <a class="tags-title">Show Tags</a>
  1098. <div class="tags">
  1099. {block:Tags}
  1100. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  1101. {/block:Tags}
  1102. </div>
  1103. {/block:HasTags}
  1104. {/block:IfHideTags}
  1105. {block:IfShowTags}
  1106. {block:HasTags}
  1107. <div class="tags-alternate">
  1108. {block:Tags}
  1109. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  1110. {/block:Tags}
  1111. </div>
  1112. {/block:HasTags}
  1113. {/block:IfShowTags}
  1114. {block:PostNotes}
  1115. {PostNotes}
  1116. {/block:PostNotes}
  1117. </div>
  1118. {/block:Date}
  1119.  
  1120. </div>
  1121.  
  1122. {/block:Posts}
  1123.  
  1124. {block:Pagination}
  1125. <div class="pagination">
  1126. {CurrentPage} Out Of {TotalPages}
  1127. <font style="float:right;">
  1128. {block:PreviousPage}
  1129. <a href="{PreviousPage}">Previous</a>
  1130. {/block:PreviousPage}
  1131. {block:NextPage}
  1132. Or <a href="{NextPage}">Next</a>
  1133. {/block:NextPage}
  1134. </font>
  1135. </div>
  1136. {/block:Pagination}
  1137.  
  1138. </div>
  1139.  
  1140. <div id="user-information">
  1141.  
  1142. <div class="sidebar-image"><img src="{image:Sidebar Image}"/></div>
  1143.  
  1144. <div class="title">{text:Title}</div>
  1145.  
  1146. {block:Description}<div class="description">{Description}</div>{/block:Description}
  1147.  
  1148. <div class="links">
  1149. <a href="/">Home</a>
  1150. {block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
  1151. {block:SubmissionsEnabled}{block:IfSubmitLink}<a href="/submit">Submit</a>{/block:IfSubmitLink}{/block:SubmissionsEnabled}
  1152. {block:ifLink1URL}<a href="{text:Link 1 URL}">{text:Link 1 Name}</a>{/block:ifLink1URL}
  1153. {block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
  1154. {block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
  1155. {block:ifLink4URL}<a href="{text:Link 4 URL}">{text:Link 4 Name}</a>{/block:ifLink4URL}
  1156. <a href="/archive">Archive</a>
  1157. </div>
  1158.  
  1159. </div>
  1160.  
  1161. </div>
  1162.  
  1163. </div>
  1164.  
  1165. <div id="credit"><a href="http://ghcstfaec.tumblr.com/" title="ghcstfaec" target="_blank">GHCHST</a></div>
  1166.  
  1167. </body>
  1168.  
  1169. <!-- Modal Script -->
  1170.  
  1171. <script>
  1172. var modal = document.getElementById("modal-popup");
  1173. var btn = document.getElementById("navigation");
  1174. btn.onclick = function() {
  1175. modal.style.display = "block";
  1176. }
  1177. window.onclick = function(event) {
  1178. if (event.target == modal) {
  1179. modal.style.display = "none";
  1180. }
  1181. }
  1182. </script>
  1183.  
  1184. </html>
Advertisement
Add Comment
Please, Sign In to add comment