themesbyces

Theme — Mikrokosmos

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