themesbyces

(Responsive) Theme — Wine

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