themesbyces

(Responsive) Theme — Shoreline

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