themesbyces

(Responsive) Theme — Handprints

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