themesbyces

(Responsive) Theme — Pondering

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