API tools faq
paste
silbrigthemes

Lover (Theme #1)

silbrigthemes
Feb 12th, 2018
901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. LOVER (Theme #1) by @silbrigthemes
  7.  
  8. This is my first theme ever, made for Valentine's Day. Please handle this theme with care and leave the credits intact, as I have spend quite a long time to get everything working.
  9.  
  10. In the preview over at @loverthemebysilbrigthemes, you can also find a list of all features and a (hopefully) helpful customization guide.
  11.  
  12. The rules as always:
  13.  
  14. 1) Do not steal (parts of) the code.
  15. 2) Do not claim this code as yours.
  16. 3) Do not use this code as a base.
  17. 4) Do not edit beyond recognition.
  18. 5) Do not delete or alter the credits.
  19.  
  20. Have fun with this theme and send me a message if you're encountering problems.
  21.  
  22. Note: This code was updated as of the 13th August 2018.
  23.  
  24. -->
  25.  
  26. <head>
  27. <title>{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}
  31. <meta name="description" content="{MetaDescription}" />
  32. {/block:Description}
  33.  
  34. <meta name="viewport" content="width=device-width, initial-scale=1">
  35.  
  36. <meta name="color:Accent" content="#ce1c25"/>
  37. <meta name="color:Background" content="#f3a5a9"/>
  38. <meta name="color:BodyFont" content="#43090c"/>
  39. <meta name="color:Container" content="#f6bcbf"/>
  40. <meta name="color:Posts" content="#fce9ea"/>
  41. <meta name="color:MarkText" content="#ffffff"/>
  42. <meta name="color:H2" content="#e74b53"/>
  43. <meta name="color:Bold" content="#e74b53"/>
  44. <meta name="color:Italic" content="#b41820"/>
  45. <meta name="color:Answer" content="#f9d2d4"/>
  46.  
  47. <meta name="select:FontSize" content="1em" name="1em"/>
  48. <meta name="select:FontSize" content="14px" name="14px"/>
  49. <meta name="select:FontSize" content="12px" name="12px"/>
  50.  
  51. <meta name="select:BodyFont" content="Lato" name="Lato"/>
  52. <meta name="select:BodyFont" content="Open Sans" name="Open Sans"/>
  53. <meta name="select:BodyFont" content="Roboto" name="Roboto"/>
  54. <meta name="select:BodyFont" content="Nanum Myeongjo" name="Nanum Myeongjo"/>
  55. <meta name="select:BodyFont" content="Nanum Gothic" name="Nanum Gothic"/>
  56.  
  57. <meta name="select:TitleFont" content="Playfair Display" name="Playfair Display"/>
  58. <meta name="select:TitleFont" content="Merriweather" name="Merriweather"/>
  59. <meta name="select:TitleFont" content="Nanum Myeongjo" name="Nanum Myeongjo"/>
  60.  
  61. <meta name="text:Photoset Gutter" content="4"/>
  62.  
  63. <meta name="text:Custom Link 1" content=""/>
  64. <meta name="text:Custom URL 1" content=""/>
  65. <meta name="text:Custom Icon 1" content=""/>
  66. <meta name="text:Custom Link 2" content=""/>
  67. <meta name="text:Custom URL 2" content=""/>
  68. <meta name="text:Custom Icon 2" content=""/>
  69.  
  70.  
  71. <!-- CUSTOM TITLE FONTS -->
  72. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  73. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900&amp;subset=cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  74. <link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&amp;subset=korean" rel="stylesheet">
  75.  
  76.  
  77. <!-- CUSTOM BODY FONTS -->
  78. <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  79. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  80. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  81. <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean" rel="stylesheet">
  82.  
  83.  
  84. <!-- SPECIAL FONTS -->
  85. <!-- Roboto Mono -->
  86. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&amp;subset=cyrillic-ext,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  87. <!-- Cormorant Garamond -->
  88. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
  89. <!-- Dancing Script -->
  90. <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
  91.  
  92. <!-- Necessary for the icon font to work. -->
  93. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  94.  
  95. <!-- Necessary to eliminate the tumblr redirect and have direct links instead // by @magnusthemes -->
  96. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  97.  
  98. <!-- Video Resizing Scripts by @shythemes -->
  99. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  100.  
  101. <!-- Change Audio iframe color script, by @roxiesthemes. -->
  102. <script>
  103. $(document).ready(function() {
  104. $('iframe.tumblr_audio_player').load( function() {
  105. $('iframe.tumblr_audio_player').contents().find("head")
  106. .append($("<style type='text/css'> .audio-player{background:{color:Answer} !important} </style>"));
  107. });
  108. });
  109. </script>
  110.  
  111. <!-- Changes the toolbar color on mobile. -->
  112. <meta name="theme-color" content="{color:Accent}"/>
  113.  
  114. <!-- Necessary for PXU photosets. -->
  115. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  116. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  117.  
  118. <!-- TOOLTIP SCRIPTS -->
  119. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  120. <script>
  121. (function($){
  122. $(document).ready(function(){
  123. $("[title]").style_my_tooltips({
  124. tip_follows_cursor:true,
  125. tip_delay_time:200,
  126. tip_fade_speed:300
  127. }
  128. );
  129. });
  130. })(jQuery);
  131. </script>
  132.  
  133. <style type="text/css">
  134.  
  135. /** GENERAL STUFF **/
  136.  
  137. body{
  138. margin:0;
  139. font-size:1em;
  140. background-color:{color:Background};
  141. font-family:{select:BodyFont}, Verdana;
  142. font-weight:300;
  143. color:{color:BodyFont};
  144. display:flex;
  145. align-items:center;
  146. justify-content:space-around;
  147. text-align:justify;
  148. overflow:hidden;
  149.  
  150. }
  151.  
  152. /* Marked Text */
  153. mark{
  154. background-color:{color:Accent};
  155. color:{color:MarkText};
  156. font-weight:bold;
  157. }
  158.  
  159. /* Links */
  160. a{
  161. color:{color:Accent};
  162. text-decoration:none;
  163. transition:0.5s;
  164. -moz-transition:0.5s;
  165. -o-transition:0.5s;
  166. -webkit-transition:0.5s;
  167.  
  168. }
  169.  
  170. /* Links Hover */
  171. a:hover{
  172. cursor:pointer;
  173. text-decoration:line-through;
  174. transition:0.5s;
  175. -moz-transition:0.5s;
  176. -o-transition:0.5s;
  177. -webkit-transition:0.5s;
  178. }
  179.  
  180. /* Lists */
  181. ul, ol{
  182. list-style:none;
  183. }
  184.  
  185. li{
  186. margin-left:-24px;
  187. }
  188.  
  189. li:before{
  190. content:"❤";
  191. color:{color:Accent};
  192. padding-right:1em;
  193. }
  194.  
  195. /* More Text Styles */
  196. .text b, strong{
  197. color:{color:Bold};
  198. font-weight:bold;
  199. }
  200.  
  201. .text i, em{
  202. color:{color:Italic};
  203. font-style:italic;
  204. }
  205.  
  206. h1{
  207. font-size:1.5em;
  208. font-family:{select:TitleFont};
  209. font-weight:normal;
  210. color:{color:H2};
  211. }
  212.  
  213. h2{
  214. font-size:1.25em;
  215. font-family:{select:TitleFont};
  216. font-weight:normal;
  217. color:{color:H2};
  218. }
  219.  
  220. hr{
  221. width:50%;
  222. border:3px solid {color:Container};
  223. border-radius:1em;
  224. height:1px;
  225. background-color:{color:Accent};
  226. }
  227.  
  228. /* SPECIAL FONTS */
  229. /* Quirky Font */
  230. p.npf_quirky{
  231. /*Tumblr uses Fairwater as a font for .npf_quirky, but since it's not a free font, I have used this alternative.*/
  232. font-family: 'Dancing Script', cursive;
  233. font-size:calc({select:FontSize} + 0.25em);
  234.  
  235. }
  236.  
  237. /* Chat Font */
  238. p.npf_chat{
  239. font-family:"Roboto Mono", Courier;
  240.  
  241. }
  242.  
  243. /* Quote Font */
  244. p.npf_quote{
  245. /*Tumblr uses Calluna as a font for .npf_quote, but since it's not a free font, I have used these alternatives.*/
  246. font-family:"Cormorant Garamond", "Palatino";
  247. font-size:calc({select:FontSize} + 0.25em);
  248.  
  249. }
  250.  
  251. /* Colored Text */
  252. .npf_color_joey {
  253. color:#ff492f; /* red text */
  254. }
  255.  
  256. .npf_color_monica {
  257. color:#ff8f2f; /* orange text */
  258. }
  259.  
  260. .npf_color_phoebe {
  261. color:#ffd42f; /* yellow text */
  262. }
  263.  
  264. .npf_color_ross {
  265. color:#79e000; /* green text */
  266. }
  267.  
  268. .npf_color_rachel {
  269. color:#2f38ff; /* blue text */
  270. }
  271.  
  272. .npf_color_chandler {
  273. color:#b12fff; /* purple text */
  274. }
  275.  
  276. .npf_color_niles {
  277. color: #ff2f8e; /* pink text */
  278. }
  279.  
  280. /* Empty Paragraphs */
  281. p:empty{
  282. display:none;
  283. }
  284.  
  285. /* Underlined Text */
  286. u{
  287. text-decoration:none;
  288. border-bottom:2px solid {color:BodyFont};
  289. }
  290.  
  291. pre{
  292. font-size:calc({select:FontSize} - 2px);
  293. font-family:"Roboto Mono";
  294. padding-left:0.25em;
  295. padding-top:0.125em;
  296. padding-right:0.25em;
  297. padding-bottom:0.125em;
  298. background-color:{color:Answer};
  299. word-wrap:break-all;
  300. white-space:pre-wrap;
  301. }
  302.  
  303. /** TOOLTIPS **/
  304. #s-m-t-tooltip{
  305. max-width:300px;
  306. margin:15px;
  307. padding:0.25em;
  308. background:{color:Bold}; /** tooltip background color **/
  309. color:{color:MarkText}; /** toolip color **/
  310. z-index:999999;
  311. font-size:0.75em;
  312. text-transform:uppercase;
  313. font-weight:bold;
  314. }
  315.  
  316. /* Custom Scrollbar */
  317. ::-webkit-scrollbar{
  318. width:10px;
  319. background-color:{color:Accent};
  320. border:4px solid {color:Container};
  321. border-radius:5px;
  322. }
  323.  
  324. ::-webkit-scrollbar-thumb{
  325. width:10px;
  326. background-color:{color:Container};
  327. border:4px solid {color:Accent};
  328. border-radius:5px;
  329. }
  330.  
  331. /* Custom Selection */
  332. ::selection{
  333. background-color:{color:Accent};
  334. color:{color:MarkText};
  335. text-shadow:none;
  336. }
  337.  
  338. ::-webkit-selection{
  339. background-color:{color:Accent};
  340. color:{color:MarkText};
  341. text-shadow:none;
  342. }
  343.  
  344. ::-o-selection{
  345. background-color:{color:Accent};
  346. color:{color:MarkText};
  347. text-shadow:none;
  348. }
  349.  
  350. ::-moz-selection{
  351. background-color:{color:Accent};
  352. color:{color:MarkText};
  353. text-shadow:none;
  354. }
  355.  
  356. /** CONTENT **/
  357. /* SIDEBAR */
  358.  
  359. #side-title{
  360. font-family:{select:TitleFont}, "Times New Roman";
  361. font-size:2em;
  362. font-weight:bold;
  363. font-style:italic;
  364. color:#fff;
  365. text-shadow:2px 2px 2px {color:Accent};
  366. margin-top:2em;
  367. }
  368.  
  369. #sidebar p{
  370. text-align:center;
  371. width:150px;
  372. }
  373.  
  374. #sidebar{
  375. width:30vw;
  376. height:100vh;
  377. display:flex;
  378. align-items:center;
  379. justify-content:center;
  380. flex-direction:column;
  381. }
  382.  
  383. #side-icon{
  384. width:128px;
  385. height:128px;
  386. border-radius:50%;
  387. background-image:url("{PortraitURL-128}");
  388. border:5px solid {color:Accent};
  389. display:flex;
  390. align-items:center;
  391. justify-content:center;
  392. }
  393.  
  394. /* I have played with this by commenting out the .menu{}, and apparently it does not affect the styling on the customization page. */
  395. .menu {
  396. filter: url("#goo");
  397. }
  398.  
  399. /* These lines are very important as they are responsible for styling the whole menu. Without them, the icons just appear in one row. */
  400. .menu-item, .menu-open-button {
  401. background: {color:Accent}; /* pink background of the menu*/
  402. border-radius: 50%; /* minimum is 50% for a perfect circle */
  403. width: 80px; /* circle width */
  404. height: 80px; /* circle height */
  405. position: absolute;
  406. color: {color:Container}; /* color of the icons */
  407. text-align: center; /* horizontal centering of icons */
  408. line-height: 80px; /* vertical centering of icons */
  409. transform: translate3d(0, 0, 0);
  410. transition: transform ease-out 200ms;
  411. /* transformation and duration of the transformation */
  412. }
  413.  
  414. /* These lines seemingly only affect the margin to the left. */
  415. .menu-open {
  416. display: none;
  417. }
  418.  
  419. /* Hamburger menu (≡) within the pink circle. */
  420. .hamburger {
  421. width: 25px; /* line width */
  422. height: 3px; /* line height */
  423. background: {color:Container}; /* color of the lines (≡) */
  424. display: block;
  425. position: absolute;
  426. top: 50%; /* offset from top */
  427. left: 50%; /* offset from left */
  428. /* since the lines are 25px long and 3px high, the following lines are necessary to center-align the menu properly */
  429. margin-left: -12.5px;
  430. margin-top: -1.5px;
  431. /* transformation duration */
  432. transition: transform 200ms;
  433. }
  434.  
  435. .hamburger-1 {
  436. transform: translate3d(0, -8px, 0);
  437. /* (-8px) is the offset to the second line*/
  438. }
  439.  
  440. .hamburger-2 {
  441. transform: translate3d(0, 0, 0);
  442. }
  443.  
  444. .hamburger-3 {
  445. transform: translate3d(0, 8px, 0);
  446. /* (8px) is the offset to the second line*/
  447. }
  448.  
  449. /* Upon clicking on the menu, the lines of the hamburger menu rotate and realign. The middle line is scaled down to 0, so that it disappeares. The top and bottom lines will be rotated so that they form an (x). */
  450. .menu-open:checked + .menu-open-button .hamburger-1 {
  451. transform: translate3d(0, 0, 0) rotate(45deg);
  452. }
  453. .menu-open:checked + .menu-open-button .hamburger-2 {
  454. transform: translate3d(0, 0, 0) scale(0, 1);
  455. }
  456. .menu-open:checked + .menu-open-button .hamburger-3 {
  457. transform: translate3d(0, 0, 0) rotate(-45deg);
  458. }
  459.  
  460. .menu {
  461. position: relative;
  462. width: 1px;
  463. height: 1px;
  464. font-size: 20px;
  465. text-align: left;
  466. left: -40px;
  467. top: -40px;
  468. padding: 0px;
  469. transition: 0.5s;
  470. -moz-transition: 0.5s;
  471. -o-transition: 0.5s;
  472. -webkit-transition: 0.5s;
  473. background-color:green;
  474. }
  475.  
  476. .menu-item:hover {
  477. background: {color:Container};
  478. color: {color:Accent};
  479. border:2px solid rgba(255,255,255,0);
  480. transition:0.5s;
  481. -moz-transition:0.5s;
  482. -o-transition:0.5s;
  483. -webkit-transition:0.5s;
  484. }
  485.  
  486. /*
  487. duration for the items to be displayed
  488. the items are displayed after one another
  489. */
  490. .menu-item:nth-child(3) {
  491. transition-duration: 180ms;
  492. }
  493. .menu-item:nth-child(4) {
  494. transition-duration: 180ms;
  495. }
  496. .menu-item:nth-child(5) {
  497. transition-duration: 180ms;
  498. }
  499. .menu-item:nth-child(6) {
  500. transition-duration: 180ms;
  501. }
  502. .menu-item:nth-child(7) {
  503. transition-duration: 180ms;
  504. }
  505. .menu-item:nth-child(8) {
  506. transition-duration: 180ms;
  507. }
  508. .menu-item:nth-child(9) {
  509. transition-duration: 180ms;
  510. }
  511.  
  512. .menu-open-button {
  513. z-index: 2;
  514. transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  515. transition-duration: 400ms;
  516. transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  517. cursor: pointer;
  518. }
  519.  
  520. .menu-open-button:hover {
  521. transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  522. }
  523.  
  524. .menu-open:checked + .menu-open-button {
  525. transition-timing-function: linear;
  526. transition-duration: 200ms;
  527. transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  528. }
  529.  
  530. .menu-open:checked ~ .menu-item {
  531. transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  532. }
  533. .menu-open:checked ~ .menu-item:nth-child(3) {
  534. transition-duration: 180ms;
  535. transform: translate3d(0.08361px, -104.99997px, 0);
  536. }
  537. .menu-open:checked ~ .menu-item:nth-child(4) {
  538. transition-duration: 280ms;
  539. transform: translate3d(90.9466px, -52.47586px, 0);
  540. }
  541. .menu-open:checked ~ .menu-item:nth-child(5) {
  542. transition-duration: 380ms;
  543. transform: translate3d(90.9466px, 52.47586px, 0);
  544. }
  545. .menu-open:checked ~ .menu-item:nth-child(6) {
  546. transition-duration: 480ms;
  547. transform: translate3d(0.08361px, 104.99997px, 0);
  548. }
  549. .menu-open:checked ~ .menu-item:nth-child(7) {
  550. transition-duration: 580ms;
  551. transform: translate3d(-90.86291px, 52.62064px, 0);
  552. }
  553. .menu-open:checked ~ .menu-item:nth-child(8) {
  554. transition-duration: 680ms;
  555. transform: translate3d(-91.03006px, -52.33095px, 0);
  556. }
  557. .menu-open:checked ~ .menu-item:nth-child(9) {
  558. transition-duration: 780ms;
  559. transform: translate3d(-0.25084px, -104.9997px, 0);
  560. }
  561.  
  562. /** END GOOEY MENU **/
  563. /** END SIDEBAR **/
  564.  
  565. /* HEART BACKGROUND */
  566. .heart {
  567. background-color: {color:Accent};
  568. display: inline-block;
  569. height: 400px;
  570. position: relative;
  571. top: 0;
  572. left:0px;
  573. transform: rotate(0deg);
  574. width: 400px;
  575. }
  576.  
  577. .heart:before,
  578. .heart:after {
  579. content: "";
  580. background-color: {color:Accent};
  581. border-radius: 50%;
  582. height: 400px;
  583. position: absolute;
  584. width: 400px;
  585. z-index:-25;
  586. }
  587.  
  588. .heart:before {
  589.  
  590. top: -200px;
  591. left: 0;
  592. }
  593.  
  594. .heart:after {
  595.  
  596. left: 200px;
  597. top: 0;
  598. }
  599.  
  600. /* 2nd HEART BACKGROUND */
  601. .heart2 {
  602. background-color: {color:Container};
  603. display: inline-block;
  604. height: 420px;
  605. position: relative;
  606. top: 0;
  607. margin-top:calc(50vh - 275px);
  608. margin-right:6em;
  609. margin-left:12em;
  610. transform: rotate(-45deg);
  611. width: 420px;
  612. display:flex;
  613. align-items:center;
  614. justify-content:center;
  615. }
  616.  
  617. .heart2:before,
  618. .heart2:after {
  619. content: "";
  620. background-color: {color:Container};
  621. border-radius: 50%;
  622. height: 420px;
  623. position: absolute;
  624. width: 420px;
  625. z-index:-25;
  626. }
  627.  
  628. .heart2:before {
  629. top: -210px;
  630. left: 0;
  631. }
  632.  
  633. .heart2:after {
  634. left: 210px;
  635. top: 0;
  636. }
  637.  
  638.  
  639. /* POSTS */
  640. /* General Container */
  641. #posts{
  642. width:400px;
  643. height:400px;
  644. background-color:{color:Container};
  645. border:5px solid {color:Accent};
  646. border-radius:2%;
  647. overflow-y:scroll;
  648. overflow-x:hidden;
  649. transform:rotate(45deg);
  650. margin-top:-50px;
  651. margin-left:25px;
  652. z-index:200;
  653. }
  654.  
  655. /* Posts */
  656. article{
  657. width:325px;
  658. margin-left:25px;
  659. margin-right:25px;
  660. margin-top:2em;
  661. margin-bottom:1em;
  662. background-color:{color:Posts};
  663. padding:0.5em;
  664. border-radius:5px;
  665. border-top:5px solid {color:Accent};
  666. border-bottom:5px solid {color:Accent};
  667. z-index:250;
  668. }
  669.  
  670. article img{
  671. max-width:100%;
  672. height:auto;
  673. }
  674.  
  675. /* Post Title */
  676. .title{
  677. font-size:2em;
  678. font-family:{select:TitleFont};
  679. text-align:center;
  680. color:{color:Accent};
  681. font-weight:bold;
  682. width:80%;
  683. border-bottom:4px solid {color:Accent};
  684. margin-left:10%;
  685. margin-bottom:0.5em;
  686. }
  687.  
  688. .text{
  689. padding:0.5em;
  690. }
  691.  
  692. /** QUOTE POSTS **/
  693. .quote{
  694. font-size:{select:FontSize};
  695. margin-top:10px;
  696.  
  697. }
  698.  
  699. .quoted{
  700. font-size:calc({select:FontSize} + 0.5*{select:FontSize});
  701. font-style:italic;
  702. font-family:{select:TitleFont}, "Times New Roman";
  703. padding-top:10px;
  704. padding-left:10px;
  705. padding-right:10px;
  706. padding-bottom:10px;
  707. color:{color:MarkText};
  708. background-color:{color:Container};
  709. border-radius:5px;
  710. border-top:5px solid {color:Bold};
  711. border-bottom:5px solid {color:Bold};
  712. text-shadow:1px 1px 2px {color:Bold};
  713. }
  714.  
  715. .quote-source{
  716. font-size:1em;
  717. padding-top:0.5em;
  718. padding-left:5px;
  719. padding-right:5px;
  720. }
  721.  
  722. /** LINK POSTS **/
  723. .link-posts{
  724. width:100%;
  725. background-color:{color:Container};
  726. padding-bottom:0.5em;
  727. transition:0.5s;
  728. -moz-transition:0.5s;
  729. -o-transition:0.5s;
  730. -webkit-transition:0.5s;
  731. border-top:5px solid {color:Accent};
  732. border-bottom:5px solid {color:Accent};
  733. border-radius:5px;
  734. }
  735.  
  736. .link-posts:hover{
  737. color:{color:MarkText};
  738. background-color:{color:Accent};
  739. transition:0.5s;
  740. -moz-transition:0.5s;
  741. -o-transition:0.5s;
  742. -webkit-transition:0.5s;
  743. }
  744.  
  745. .link-posts a{
  746. text-decoration:none;
  747. line-height: 1.5em;
  748. width:100%;
  749. font-weight:bold;
  750. }
  751.  
  752. .link-posts a:hover{
  753. color:{color:MarkText};
  754. }
  755.  
  756. .link-posts a img{
  757. width:100%;
  758. }
  759.  
  760. /** CHAT POSTS **/
  761. .chatterbox{
  762. width:100%;
  763. overflow:hidden;
  764. }
  765.  
  766. .chat{
  767. width:100%;
  768. }
  769.  
  770. .chat .clear{
  771. clear:both;
  772. }
  773.  
  774. .chat .label_odd, .line_odd{
  775. background-color:{color:Container};
  776. color:{color:Accent};
  777. font-weight:bold;
  778. height:auto;
  779. width:80%;
  780. float:left;
  781. padding:0.25em;
  782.  
  783. }
  784.  
  785. .chat .line_odd{
  786. margin-bottom:0.5em;
  787. border-radius:0px 0px 5px 5px;
  788. }
  789.  
  790. .chat .label_odd{
  791. border-radius:5px 5px 0px 0px;
  792. }
  793.  
  794. .chat .label_even, .line_even{
  795. background-color:{color:Accent};
  796. color:{color:Posts};
  797. font-weight:bold;
  798. width:80%;
  799. height:auto;
  800. float:right;
  801. text-align:right;
  802. padding:0.25em;
  803. }
  804.  
  805. .chat .line_even{
  806. margin-bottom:0.5em;
  807. border-radius:0px 0px 5px 5px;
  808. }
  809.  
  810. .chat .label_even{
  811. border-radius:5px 5px 0px 0px;
  812. }
  813.  
  814. /** QUESTIONS **/
  815. /* ANSWER */
  816. .answer{
  817. background-color:{color:Answer};
  818. border-radius:5px;
  819. border-top:5px solid {color:Bold};
  820. padding:0.5em;
  821. }
  822.  
  823. .answer img{
  824. width:3em;
  825. border-radius:50%;
  826. margin-left:0.5em;
  827. border:5px solid {color:Bold};
  828. }
  829.  
  830. .answer-username{
  831. display:flex;
  832. justify-content:flex-start;
  833. align-items:center;
  834. flex-direction:row-reverse;
  835. }
  836.  
  837. .answer-username a{
  838. text-decoration:none;
  839. margin-right:0.5em;
  840. margin-top:2em;
  841. color:{color:MarkText};
  842. }
  843.  
  844. .answer-username mark{
  845. padding:0.25em;
  846. color:{color:MarkText};
  847. border-radius:2px;
  848. transition:0.5s;
  849. -moz-transition:0.5s;
  850. -o-transition:0.5s;
  851. -webkit-transition:0.5s;
  852. }
  853.  
  854. .answer-username mark:hover{
  855. background-color:{color:Bold};
  856. color:{color:MarkText};
  857. cursor:pointer;
  858. transition:0.5s;
  859. -moz-transition:0.5s;
  860. -o-transition:0.5s;
  861. -webkit-transition:0.5s;
  862. }
  863.  
  864. /* QUESTION */
  865. .question{
  866. background-color:{color:Container};
  867. border-radius:5px;
  868. border-bottom:5px solid {color:Bold};
  869. margin-bottom:0.5em;
  870. padding:0.5em;
  871. }
  872.  
  873. .question img{
  874. width:3em;
  875. border-radius:50%;
  876. border:5px solid {color:Bold};
  877. margin-right:0.5em;
  878. }
  879.  
  880. .question-username{
  881. display:flex;
  882. justify-content:flex-start;
  883. align-items:center;
  884. flex-direction:row;
  885. }
  886.  
  887. .question-username a{
  888. text-decoration:none;
  889. margin-right:0.5em;
  890. margin-top:2em;
  891. color:{color:MarkText};
  892. }
  893.  
  894. .question-username mark{
  895. padding:0.25em;
  896. border-radius:2px;
  897. color:{color:MarkText};
  898. transition:0.5s;
  899. -moz-transition:0.5s;
  900. -o-transition:0.5s;
  901. -webkit-transition:0.5s;
  902. }
  903.  
  904. .question-username mark:hover{
  905. background-color:{color:Bold};
  906. color:{color:MarkText};
  907. cursor:pointer;
  908. transition:0.5s;
  909. -moz-transition:0.5s;
  910. -o-transition:0.5s;
  911. -webkit-transition:0.5s;
  912. }
  913.  
  914. /** AUDIO POSTS **/
  915. .audio > iframe {
  916. max-width: 100%
  917.  
  918. }
  919.  
  920. .audio iframe{
  921. border-top:5px solid {color:Container};
  922. border-bottom:5px solid {color:Container};
  923. border-radius:5px;
  924. }
  925.  
  926.  
  927. /* VIDEO POSTS */
  928. .video > iframe{
  929. max-width:100%;
  930. }
  931.  
  932. .video iframe{
  933. border-radius:5px;
  934. border-top:5px solid {color:Container};
  935. border-bottom:5px solid {color:Container};
  936. }
  937.  
  938.  
  939. /** POST FOOTER **/
  940. .post-footer{
  941. margin-top:1em;
  942. padding-top:0.5em;
  943. border-top:2.5px solid {color:Accent};
  944. }
  945.  
  946. .post-footer .clear{
  947. clear:both;
  948. }
  949.  
  950. .info{
  951. display:flex;
  952. justify-content:flex-start;
  953. flex-direction:row;
  954. flex-wrap:wrap;
  955. margin-bottom:0.5em;
  956. line-height:2em;
  957.  
  958. }
  959.  
  960. .info .clear{
  961. clear:both;
  962. }
  963.  
  964.  
  965. /** TAGS **/
  966. .tags{
  967. display:flex;
  968. justify-content:flex-start;
  969. flex-direction:row;
  970. flex-wrap:wrap;
  971. margin-bottom:0.5em;
  972. line-height:2em;
  973. }
  974.  
  975. .tags a{
  976. text-decoration:none;
  977. margin-right:0.5em;
  978. }
  979.  
  980. .tags mark{
  981. padding:0.25em;
  982. border-radius:2px;
  983. transition:0.5s;
  984. -moz-transition:0.5s;
  985. -o-transition:0.5s;
  986. -webkit-transition:0.5s;
  987. }
  988.  
  989. .tags mark:hover{
  990. background-color:{color:Container};
  991. color:{color:Accent};
  992. cursor:pointer;
  993. transition:0.5s;
  994. -moz-transition:0.5s;
  995. -o-transition:0.5s;
  996. -webkit-transition:0.5s;
  997. }
  998.  
  999. .tags i{
  1000. font-weight:bold;
  1001. }
  1002.  
  1003.  
  1004. /** TIME STAMP **/
  1005. .time a{
  1006. text-decoration:none;
  1007. margin-right:0.5em;
  1008. }
  1009.  
  1010. .time mark{
  1011. padding:0.25em;
  1012. border-radius:2px;
  1013. transition:0.5s;
  1014. -moz-transition:0.5s;
  1015. -o-transition:0.5s;
  1016. -webkit-transition:0.5s;
  1017. }
  1018.  
  1019. .time mark:hover{
  1020. background-color:{color:Container};
  1021. color:{color:Accent};
  1022. cursor:pointer;
  1023. transition:0.5s;
  1024. -moz-transition:0.5s;
  1025. -o-transition:0.5s;
  1026. -webkit-transition:0.5s;
  1027. }
  1028.  
  1029.  
  1030. /** NOTES COUNT **/
  1031. .notes a{
  1032. text-decoration:none;
  1033. margin-right:0.5em;
  1034. }
  1035.  
  1036. .notes mark{
  1037. padding:0.25em;
  1038. border-radius:2px;
  1039. transition:0.5s;
  1040. -moz-transition:0.5s;
  1041. -o-transition:0.5s;
  1042. -webkit-transition:0.5s;
  1043. }
  1044.  
  1045. .notes mark:hover{
  1046. background-color:{color:Container};
  1047. color:{color:Accent};
  1048. cursor:pointer;
  1049. transition:0.5s;
  1050. -moz-transition:0.5s;
  1051. -o-transition:0.5s;
  1052. -webkit-transition:0.5s;
  1053. }
  1054.  
  1055.  
  1056. /** REBLOGGED FROM **/
  1057. .via a{
  1058. text-decoration:none;
  1059. margin-right:0.5em;
  1060. }
  1061.  
  1062. .via mark{
  1063. padding:0.25em;
  1064. border-radius:2px;
  1065. transition:0.5s;
  1066. -moz-transition:0.5s;
  1067. -o-transition:0.5s;
  1068. -webkit-transition:0.5s;
  1069. }
  1070.  
  1071. .via mark:hover{
  1072. background-color:{color:Container};
  1073. color:{color:Accent};
  1074. cursor:pointer;
  1075. transition:0.5s;
  1076. -moz-transition:0.5s;
  1077. -o-transition:0.5s;
  1078. -webkit-transition:0.5s;
  1079. }
  1080.  
  1081.  
  1082. /** POST SOURCE **/
  1083. .source a{
  1084. text-decoration:none;
  1085. margin-right:0.5em;
  1086. }
  1087.  
  1088. .source mark{
  1089. padding:0.25em;
  1090. border-radius:2px;
  1091. transition:0.5s;
  1092. -moz-transition:0.5s;
  1093. -o-transition:0.5s;
  1094. -webkit-transition:0.5s;
  1095. }
  1096.  
  1097. .source mark:hover{
  1098. background-color:{color:Container};
  1099. color:{color:Accent};
  1100. cursor:pointer;
  1101. transition:0.5s;
  1102. -moz-transition:0.5s;
  1103. -o-transition:0.5s;
  1104. -webkit-transition:0.5s;
  1105. }
  1106.  
  1107.  
  1108. /** REBLOG BUTTON **/
  1109. .reblogged a{
  1110. text-decoration:none;
  1111. margin-right:0.5em;
  1112. }
  1113.  
  1114. .reblogged mark{
  1115. padding:0.25em;
  1116. border-radius:2px;
  1117. transition:0.5s;
  1118. -moz-transition:0.5s;
  1119. -o-transition:0.5s;
  1120. -webkit-transition:0.5s;
  1121. }
  1122.  
  1123. .reblogged mark:hover{
  1124. background-color:{color:Container};
  1125. color:{color:Accent};
  1126. cursor:pointer;
  1127. transition:0.5s;
  1128. -moz-transition:0.5s;
  1129. -o-transition:0.5s;
  1130. -webkit-transition:0.5s;
  1131. }
  1132.  
  1133.  
  1134. /** LIKE BUTTON **/
  1135. .like_button {
  1136. display:inline-block;
  1137. position:relative;
  1138. padding-right:3px;
  1139. }
  1140.  
  1141. a.liked mark{
  1142. padding:0.25em;
  1143. background-color:{color:Accent};
  1144. border-radius:2px;
  1145. transition:0.5s;
  1146. -moz-transition:0.5s;
  1147. -o-transition:0.5s;
  1148. -webkit-transition:0.5s;
  1149. }
  1150.  
  1151. a.liked mark:hover{
  1152. color:{color:Accent};
  1153. background-color:{color:Container};
  1154. transition:0.5s;
  1155. -moz-transition:0.5s;
  1156. -o-transition:0.5s;
  1157. -webkit-transition:0.5s;
  1158. }
  1159.  
  1160. .like_button iframe {
  1161. height:100%;
  1162. left:0;
  1163. opacity:0;
  1164. position:absolute;
  1165. top:0;
  1166. width:100%;
  1167. padding:0.25em;
  1168. }
  1169.  
  1170. .like_button::before{
  1171. content:"\f004";
  1172. font-family:"Font Awesome\ 5 Free";
  1173. font-weight:900;
  1174. position:relative;
  1175. font-size:{select:FontSize};
  1176. /*color:{color:MarkText};
  1177. background-color:{color:Accent};*/
  1178. padding:0.25em;
  1179. /*transition:all .5s ease-in-out;*/
  1180. }
  1181.  
  1182. .like_button:hover::before {
  1183. color:{color:Accent};
  1184. /*background-color:{color:Container};*/
  1185. }
  1186.  
  1187. .like_button::after {
  1188. content:'like';
  1189. }
  1190.  
  1191. .cimg{
  1192. width:32px;
  1193. height:32px;
  1194. border-radius:50%;
  1195. border:2px solid {color:Accent};
  1196. margin-right:0.5em;
  1197.  
  1198. }
  1199.  
  1200. .cimg iframe{
  1201. filter:grayscale(100%);
  1202. -moz-filter:grayscale(100%);
  1203. -o-filter:grayscale(100%)
  1204. -webkit-filter:grayscale(100%);
  1205. }
  1206.  
  1207. .cimg iframe:hover{
  1208. filter:grayscale(0%);
  1209. -moz-filter:grayscale(0%);
  1210. -o-filter:grayscale(0%)
  1211. -webkit-filter:grayscale(0%);
  1212. }
  1213.  
  1214. .user a{
  1215. text-decoration:none;
  1216. margin-right:0.5em;
  1217. margin-top:2em;
  1218. }
  1219.  
  1220. .user mark{
  1221. padding:0.25em;
  1222. border-radius:2px;
  1223. transition:0.5s;
  1224. -moz-transition:0.5s;
  1225. -o-transition:0.5s;
  1226. -webkit-transition:0.5s;
  1227. }
  1228.  
  1229. .user mark:hover{
  1230. background-color:{color:Container};
  1231. color:{color:Accent};
  1232. cursor:pointer;
  1233. transition:0.5s;
  1234. -moz-transition:0.5s;
  1235. -o-transition:0.5s;
  1236. -webkit-transition:0.5s;
  1237. }
  1238.  
  1239. .username{
  1240. display:flex;
  1241. align-items:center;
  1242. justify-content:flex-start;
  1243. flex-direction:row;
  1244. margin-top:0.5em;
  1245. }
  1246.  
  1247.  
  1248. /** PAGINATION **/
  1249. .pagination{
  1250. width:100%;
  1251. height:calc(2 * {select:FontSize});
  1252. background-color:{color:Posts};
  1253. border-top:5px solid {color:Accent};
  1254. margin-bottom:0px;
  1255. display:flex;
  1256. align-items:center;
  1257. justify-content:space-around;
  1258. flex-direction:row;
  1259. }
  1260.  
  1261. .pagination a{
  1262. text-decoration:none;
  1263. margin-left:1.5em;
  1264. margin-right:1.5em;
  1265.  
  1266. }
  1267.  
  1268. .pagination mark{
  1269. text-transform:lowercase;
  1270. width:5em;
  1271. padding:0.25em;
  1272. background-color:{color:Accent};
  1273. color:{color:MarkText};
  1274. border-radius:2px;
  1275. transition:0.5s;
  1276. -moz-transition:0.5s;
  1277. -o-transition:0.5s;
  1278. -webkit-transition:0.5s;
  1279.  
  1280. }
  1281.  
  1282. .pagination mark:hover{
  1283. background-color:{color:Container};
  1284. transition:0.5s;
  1285. -moz-transition:0.5s;
  1286. -o-transition:0.5s;
  1287. -webkit-transition:0.5s;
  1288. }
  1289.  
  1290. /*
  1291. Don't delete or alter the credit!
  1292. Taking the credit off free things is rude;
  1293. I have spent much time on this.
  1294. */
  1295. #credit img{
  1296. height:50px;
  1297. right:25px;
  1298. bottom:25px;
  1299. position:absolute;
  1300. }
  1301.  
  1302. /*** MORE ***/
  1303. /* Hides the tumblr app button, by @yeoli-thm */
  1304. .tmblr-iframe--app-cta-button {
  1305. display: none!important;
  1306. }
  1307.  
  1308. /** CUSTOM LIGHTBOX **/
  1309. /* Custom Lightbox */
  1310. .vignette, #vignette {
  1311. opacity:0;
  1312. }
  1313. .lightbox-image, #tumblr_lightbox img {
  1314. box-shadow:none!important;
  1315. border-radius:0!important;
  1316. max-width:none;
  1317. }
  1318.  
  1319. .tmblr-lightbox, #tumblr_lightbox {
  1320. background-color:{color:Background}!important;
  1321. }
  1322.  
  1323. a.tumblr-box{
  1324. border-bottom:none;
  1325. }
  1326.  
  1327. /* Hides standard tumblr controls */
  1328. body > iframe:first-child {
  1329. display: none !important;
  1330. }
  1331.  
  1332.  
  1333. </style>
  1334. </head>
  1335. <body>
  1336.  
  1337. <!-- CONTENT -->
  1338. <div id="sidebar">
  1339. <div id="side-icon">
  1340. <!-- HAMBURGER MENU -->
  1341. <!-- Hamburger menu within the pink circle. -->
  1342. <nav class="menu">
  1343. <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  1344. <label class="menu-open-button" for="menu-open">
  1345. <span class="hamburger hamburger-1"></span>
  1346. <span class="hamburger hamburger-2"></span>
  1347. <span class="hamburger hamburger-3"></span>
  1348. </label>
  1349.  
  1350. <!-- GOOEY MENU -->
  1351. <!-- This is where the menu links start. -->
  1352. <!-- If you want to change the displayed icons, just change i.e.
  1353. 'fa fa-heart' to 'fa fa-adjust' or any icon of your choice.
  1354. -->
  1355. <a href="/" class="menu-item" title="go to index">
  1356. <i class="fa fa-home"></i>
  1357. </a>
  1358.  
  1359. <a href="/ask" class="menu-item" title="send a message">
  1360. <i class="fa fa-envelope"></i>
  1361. </a>
  1362.  
  1363. <a href="/archive" class="menu-item" title="browse archive">
  1364. <i class="fa fa-th-large"></i>
  1365. </a>
  1366.  
  1367. <a href="{text:Custom URL 1}" class="menu-item" title="{text:Custom Link 1}">
  1368. <i class="fa fa-{text:Custom Icon 1}"></i>
  1369. </a>
  1370.  
  1371. <a href="{text:Custom URL 2}" class="menu-item" title="{text:Custom Link 2}">
  1372. <i class="fa fa-{text:Custom Icon 2}"></i>
  1373. </a>
  1374.  
  1375. <!-- Don't touch this link it's my credit and I expect from you to leave it this way! -->
  1376. <a href="https://silbrigthemes.tumblr.com/" class="menu-item" title="theme by @silbrigthemes">
  1377. <i class="fa fa-code"></i>
  1378. </a>
  1379.  
  1380. </nav>
  1381. </div>
  1382. <div id="side-title">{Title}</div>
  1383. <p>{Description}</p>
  1384. </div>
  1385.  
  1386. <!-- POSTS -->
  1387. <div class="heart2">
  1388. <div class="heart">
  1389. <div id="posts">
  1390. {block:Posts}
  1391. <article>
  1392.  
  1393. <!-- TEXT POSTS -->
  1394. {block:Text}
  1395. {block:Title}
  1396. <div class="title">{Title}</div>
  1397. {/block:Title}
  1398. {block:Body}
  1399. {block:NotReblog}
  1400. <div class="text">{Body}</div>
  1401. {/block:NotReblog}
  1402. {block:RebloggedFrom}
  1403. {block:Reblogs}
  1404. <div class="username">
  1405. {block:HasAvatar}
  1406. {block:HasPermalink}
  1407. <a href="{Permalink}" target="_blank">
  1408. <img class="cimg" src="{PortraitURL-64}"></a>
  1409. {/block:HasPermalink}
  1410. {block:HasNoPermalink}
  1411. <img class="cimg" src="{PortraitURL-64}">
  1412. {/block:HasNoPermalink}
  1413. {/block:HasAvatar}
  1414. {block:HasPermalink}
  1415. <div class="user">
  1416. <a target="_blank" class="user" href="{Permalink}">
  1417. <mark>{Username}</mark>
  1418. </a>
  1419. </div>
  1420. {/block:HasPermalink}
  1421. {block:HasNoPermalink}
  1422. <span class="user"><mark>{Username}</mark></span>
  1423. {/block:HasNoPermalink}
  1424. </div>
  1425. <div class="text">{Body}</div>
  1426. {/block:Reblogs}
  1427. {/block:RebloggedFrom}
  1428.  
  1429.  
  1430. {/block:Body}
  1431. {/block:Text}
  1432.  
  1433. <!-- QUESTION POSTS -->
  1434. {block:Answer}
  1435. <div class="question">
  1436. <div class="question-username">
  1437. <img src="{AskerPortraitURL-96}" alt="user icon">
  1438. <mark>{Asker}</mark>
  1439. </div>
  1440. {Question}
  1441. </div>
  1442.  
  1443. {block:Answerer}
  1444. <div class="answer">
  1445. <div class="answer-username">
  1446. <img src="{AnswererPortraitURL-96}" alt="user icon">
  1447. <mark>{Answerer}</mark>
  1448. </div>
  1449. {Answer}
  1450. </div>
  1451. {/block:Answerer}
  1452. {block:NotReblog}
  1453. <div>{Replies}</div>
  1454. {/block:NotReblog}
  1455. {block:RebloggedFrom}
  1456. {block:Reblogs}
  1457. <div class="username">
  1458. {block:HasAvatar}
  1459. {block:HasPermalink}
  1460. <a href="{Permalink}" target="_blank">
  1461. <img class="cimg" src="{PortraitURL-64}"></a>
  1462. {/block:HasPermalink}
  1463. {block:HasNoPermalink}
  1464. <img class="cimg" src="{PortraitURL-64}">
  1465. {/block:HasNoPermalink}
  1466. {/block:HasAvatar}
  1467. {block:HasPermalink}
  1468. <div class="user">
  1469. <a target="_blank" class="user" href="{Permalink}">
  1470. <mark>{Username}</mark>
  1471. </a>
  1472. </div>
  1473. {/block:HasPermalink}
  1474. {block:HasNoPermalink}
  1475. <span class="user"><mark>{Username}</mark></span>
  1476. {/block:HasNoPermalink}
  1477. </div>
  1478. <div class="text">{Body}</div>
  1479. {/block:Reblogs}
  1480. {/block:RebloggedFrom}
  1481. {/block:Answer}
  1482.  
  1483.  
  1484. <!-- QUOTE POSTS -->
  1485. {block:Quote}
  1486. <div class="quoted">
  1487. {Quote}
  1488. </div>
  1489. {block:Source}
  1490. <div class="quote-source">
  1491. – {Source}
  1492. </div>
  1493. {/block:Source}
  1494. {/block:Quote}
  1495.  
  1496. <!-- LINK POSTS -->
  1497. {block:Link}
  1498. <div class="link-posts">
  1499. <a href="{URL}">
  1500. <img src="{Thumbnail-HighRes}">
  1501. {Name}
  1502. </a>
  1503. </div>
  1504. {block:Description}
  1505. {block:NotReblog}
  1506. {Description}
  1507. {/block:NotReblog}
  1508. {block:RebloggedFrom}
  1509. {block:Reblogs}
  1510. <div class="username">
  1511. {block:HasAvatar}
  1512. {block:HasPermalink}
  1513. <a href="{Permalink}" target="_blank">
  1514. <img class="cimg" src="{PortraitURL-64}"></a>
  1515. {/block:HasPermalink}
  1516. {block:HasNoPermalink}
  1517. <img class="cimg" src="{PortraitURL-64}">
  1518. {/block:HasNoPermalink}
  1519. {/block:HasAvatar}
  1520. {block:HasPermalink}
  1521. <div class="user">
  1522. <a target="_blank" class="user" href="{Permalink}">
  1523. <mark>{Username}</mark>
  1524. </a>
  1525. </div>
  1526. {/block:HasPermalink}
  1527. {block:HasNoPermalink}
  1528. <span class="user"><mark>{Username}</mark></span>
  1529. {/block:HasNoPermalink}
  1530. </div>
  1531. <div class="text">{Body}</div>
  1532. {/block:Reblogs}
  1533. {/block:RebloggedFrom}
  1534. {/block:Description}
  1535. {/block:Link}
  1536.  
  1537. <!-- CHAT POSTS -->
  1538. <div class="chatterbox">
  1539. {block:Chat}
  1540. <div class="chat clear">
  1541. {block:Title}
  1542. <div class="title">{Title}</div>
  1543. {/block:Title}
  1544. {block:Lines}
  1545. {block:Label}
  1546. <span class="label_{alt}">
  1547. {Label}
  1548. </span>
  1549. {/block:Label}
  1550. <div class="line_{alt}">
  1551. {Line}<br>
  1552. </div>
  1553. {/block:Lines}
  1554. </div>
  1555. {/block:Chat}
  1556. </div>
  1557.  
  1558. <!-- PHOTO POSTS -->
  1559. {block:Photo}
  1560. {LinkOpenTag}
  1561. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1562. <div class="photo">
  1563. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1564. </div>
  1565. </a>
  1566. {LinkCloseTag}
  1567. {block:IfShowCaptions}
  1568. {block:Caption}
  1569. {block:NotReblog}{Caption}{/block:NotReblog}
  1570. {block:RebloggedFrom}
  1571. {block:Reblogs}
  1572. <div class="username">
  1573. {block:HasAvatar}
  1574. {block:HasPermalink}
  1575. <a href="{Permalink}" target="_blank">
  1576. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1577. {/block:HasPermalink}
  1578. {block:HasNoPermalink}
  1579. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1580. {/block:HasNoPermalink}
  1581. {/block:HasAvatar}
  1582. {block:HasPermalink}
  1583. <div class="user">
  1584. <a target="_blank" class="user" href="{Permalink}">
  1585. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1586. </a>
  1587. </div>
  1588. {/block:HasPermalink}
  1589. {block:HasNoPermalink}
  1590. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1591. {/block:HasNoPermalink}
  1592. </div>
  1593. <div class="text">{Body}</div>
  1594. {/block:Reblogs}
  1595. {/block:RebloggedFrom}
  1596. {/block:Caption}
  1597. {/block:IfShowCaptions}
  1598. {/block:Photo}
  1599.  
  1600.  
  1601. <!-- PANORAMA POSTS -->
  1602. {block:Panorama}
  1603. {LinkOpenTag}
  1604. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1605. <div class="panorama">
  1606. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">
  1607. </div>
  1608. </a>
  1609. {LinkCloseTag}
  1610. {block:IfShowCaptions}
  1611. {block:Caption}
  1612. {block:NotReblog}
  1613. {Caption}
  1614. {/block:NotReblog}
  1615. {block:RebloggedFrom}
  1616. {block:Reblogs}
  1617. <div class="username">
  1618. {block:HasAvatar}
  1619. {block:HasPermalink}
  1620. <a href="{Permalink}" target="_blank" title="permalink page">
  1621. <img class="cimg" src="{PortraitURL-64}" alt="user icon"></a>
  1622. {/block:HasPermalink}
  1623. {block:HasNoPermalink}
  1624. <img class="cimg" src="{PortraitURL-64}" alt="user icon">
  1625. {/block:HasNoPermalink}
  1626. {/block:HasAvatar}
  1627. {block:HasPermalink}
  1628. <div class="user">
  1629. <a target="_blank" class="user" href="{Permalink}" title="permalink page">
  1630. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1631. </a>
  1632. </div>
  1633. {/block:HasPermalink}
  1634. {block:HasNoPermalink}
  1635. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1636. {/block:HasNoPermalink}
  1637. </div>
  1638. <div class="text">{Body}</div>
  1639. {/block:Reblogs}
  1640. {/block:RebloggedFrom}
  1641. {/block:Caption}
  1642. {/block:IfShowCaptions}
  1643. {/block:Panorama}
  1644.  
  1645. <!-- PHOTOSETS -->
  1646. {block:Photoset}
  1647. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1648. {block:Photos}
  1649. <div class="photo-data">
  1650. <div class="pxu-photo">
  1651. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1652. </div>
  1653. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  1654. </a>
  1655. </div>
  1656. {/block:Photos}
  1657. </div>
  1658. {block:Caption}
  1659. {block:NotReblog}
  1660. {Caption}
  1661. {/block:NotReblog}
  1662. {block:RebloggedFrom}
  1663. {block:Reblogs}
  1664. <div class="username">
  1665. {block:HasAvatar}
  1666. {block:HasPermalink}
  1667. <a href="{Permalink}" target="_blank">
  1668. <img class="cimg" src="{PortraitURL-64}"></a>
  1669. {/block:HasPermalink}
  1670. {block:HasNoPermalink}
  1671. <img class="cimg" src="{PortraitURL-64}">
  1672. {/block:HasNoPermalink}
  1673. {/block:HasAvatar}
  1674. {block:HasPermalink}
  1675. <div class="user">
  1676. <a target="_blank" class="user" href="{Permalink}">
  1677. <mark><span class="sf sf-user-o"></span> {Username}</mark>
  1678. </a>
  1679. </div>
  1680. {/block:HasPermalink}
  1681. {block:HasNoPermalink}
  1682. <span class="user"><mark><span class="sf sf-user-o"></span> {Username}</mark></span>
  1683. {/block:HasNoPermalink}
  1684. </div>
  1685. <div class="text">{Body}</div>
  1686. {/block:Reblogs}
  1687. {/block:RebloggedFrom}
  1688. {/block:Caption}
  1689. {/block:Photoset}
  1690.  
  1691. <!-- AUDIO POSTS -->
  1692. {block:Audio}
  1693. {block:AudioEmbed}
  1694. <div class="audio">
  1695. {AudioEmbed}
  1696. </div>
  1697. {/block:AudioEmbed}
  1698. {block:Caption}
  1699. {block:NotReblog}
  1700. {Caption}
  1701. {/block:NotReblog}
  1702. {block:RebloggedFrom}
  1703. {block:Reblogs}
  1704. <div class="username">
  1705. {block:HasAvatar}
  1706. {block:HasPermalink}
  1707. <a href="{Permalink}" target="_blank">
  1708. <img class="cimg" src="{PortraitURL-64}"></a>
  1709. {/block:HasPermalink}
  1710. {block:HasNoPermalink}
  1711. <img class="cimg" src="{PortraitURL-64}">
  1712. {/block:HasNoPermalink}
  1713. {/block:HasAvatar}
  1714. {block:HasPermalink}
  1715. <div class="user">
  1716. <a target="_blank" class="user" href="{Permalink}">
  1717. <mark>{Username}</mark>
  1718. </a>
  1719. </div>
  1720. {/block:HasPermalink}
  1721. {block:HasNoPermalink}
  1722. <span class="user"><mark>{Username}</mark></span>
  1723. {/block:HasNoPermalink}
  1724. </div>
  1725. <div class="text">{Body}</div>
  1726. {/block:Reblogs}
  1727. {/block:RebloggedFrom}
  1728. {/block:Caption}
  1729. {/block:Audio}
  1730.  
  1731. <!-- VIDEO POSTS -->
  1732. {block:Video}
  1733. <div class="video">
  1734. {Video-500}
  1735. </div>
  1736. {block:Caption}
  1737. {block:NotReblog}
  1738. {Caption}
  1739. {/block:NotReblog}
  1740. {block:RebloggedFrom}
  1741. {block:Reblogs}
  1742. <div class="username">
  1743. {block:HasAvatar}
  1744. {block:HasPermalink}
  1745. <a href="{Permalink}" target="_blank">
  1746. <img class="cimg" src="{PortraitURL-64}"></a>
  1747. {/block:HasPermalink}
  1748. {block:HasNoPermalink}
  1749. <img class="cimg" src="{PortraitURL-64}">
  1750. {/block:HasNoPermalink}
  1751. {/block:HasAvatar}
  1752. {block:HasPermalink}
  1753. <div class="user">
  1754. <a target="_blank" class="user" href="{Permalink}">
  1755. <mark>{Username}</mark>
  1756. </a>
  1757. </div>
  1758. {/block:HasPermalink}
  1759. {block:HasNoPermalink}
  1760. <span class="user"><mark>{Username}</mark></span>
  1761. {/block:HasNoPermalink}
  1762. </div>
  1763. <div class="text">{Body}</div>
  1764. {/block:Reblogs}
  1765. {/block:RebloggedFrom}
  1766. {/block:Caption}
  1767. {/block:Video}
  1768.  
  1769. <!-- POST FOOTER -->
  1770. <div class="post-footer clear">
  1771. <div class="info clear">
  1772.  
  1773. <!-- Time Ago -->
  1774. {block:Date}
  1775. <div class="time">
  1776. <a href="{Permalink}" title="{Month} {DayOfMonth}, {Year}">
  1777. <mark><i class="fa fa-clock"></i> {TimeAgo}</mark></a>
  1778. </div>
  1779. {/block:Date}
  1780.  
  1781. <!-- Note Count -->
  1782. {block:NoteCount}
  1783. <div class="notes" title="{NoteCountWithLabel}">
  1784. <a href="{Permalink}">
  1785. <mark><i class="fas fa-link"></i> {NoteCountWithLabel}</mark></a>
  1786. </div>
  1787.  
  1788. {/block:NoteCount}
  1789.  
  1790. {block:RebloggedFrom}
  1791. <div class="via" title="reblogged from">
  1792. <a href="{ReblogParentURL}">
  1793. <mark><i class="fas fa-clone"></i> via</mark>
  1794. </a>
  1795. </div>
  1796.  
  1797. {/block:RebloggedFrom}
  1798.  
  1799. {block:ContentSource}
  1800. <div class="source">
  1801. <a href="{SourceURL}" title="post source">
  1802. <mark><i class="fas fa-copyright"></i> source</mark>
  1803. </a>
  1804. </div>
  1805.  
  1806. {/block:ContentSource}
  1807.  
  1808. <div class="reblogged">
  1809. <a href="{ReblogURL}" title="revlog this post">
  1810. <mark><i class="fa fa-retweet"></i> reblog</mark>
  1811. </a>
  1812. </div>
  1813.  
  1814. <a class="liked" href="#" title="like this post">
  1815. <mark>{LikeButton}</mark>
  1816. </a>
  1817.  
  1818. </div><!-- /info -->
  1819.  
  1820. {block:HasTags}
  1821. <div class="tags">
  1822. {block:Tags}
  1823. <a href="{TagURL}" title="tagged as: {Tag}">
  1824. <mark>
  1825. <i class="fa fa-tags"></i> {Tag}
  1826. </mark>
  1827. </a>
  1828. {/block:Tags}
  1829. </div><!-- /tags -->
  1830. {/block:HasTags}
  1831. </div>
  1832.  
  1833. {block:PermalinkPage}
  1834. {block:NoteCount}
  1835. {block:PostNotes}
  1836. {PostNotes}
  1837. {/block:PostNotes}
  1838. {/block:NoteCount}
  1839. {/block:PermalinkPage}
  1840. </article>
  1841. {/block:Posts}
  1842.  
  1843. <!-- PAGINATION -->
  1844. {block:Pagination}
  1845. <div class="pagination">
  1846. {block:PreviousPage}
  1847. <a href="{PreviousPage}"><mark>previous</mark></a>
  1848. {/block:PreviousPage}
  1849. {block:NextPage}
  1850. <a href="{NextPage}"><mark>next</mark></a>
  1851. {/block:NextPage}
  1852. </div><!-- /pagination -->
  1853. {/block:Pagination}
  1854. </div>
  1855. </div>
  1856. </div>
  1857.  
  1858. <!--
  1859. Don't delete or alter the credit!
  1860. Taking the credit off free things is rude;
  1861. I have spent much time on this.
  1862. -->
  1863. <div id="credit">
  1864. <a href="https://silbrigthemes.tumblr.com/">
  1865. <img src="https://78.media.tumblr.com/7854d98ef9b778a43fc9dd83b828ab02/tumblr_p3jmkwDy4c1wsskx3o1_1280.png" alt="credit: @silbrigthemes">
  1866. </a>
  1867.  
  1868. </div>
  1869.  
  1870. <!-- SCRIPTS -->
  1871. <!-- PXU photosets script. -->
  1872. <script>
  1873. $(document).ready(function(){
  1874. $('.photo-slideshow').pxuPhotoset({
  1875. lightbox: true,
  1876. rounded: false,
  1877. gutter: '{text:Photoset Gutter}px',
  1878. borderRadius: '0px',
  1879. photoset: '.photo-slideshow',
  1880. photoWrap: '.photo-data',
  1881. photo: '.pxu-photo'
  1882. });
  1883. });
  1884. </script>
  1885.  
  1886. <!-- Necessary to eliminate the tumblr redirect and have direct links instead -->
  1887. <script>
  1888. $(document).ready(function(){
  1889. //remove tumblr redirects script by magnusthemes@tumblr
  1890. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1891. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1892. var replaceURL = decodeURIComponent(originalURL);
  1893. $(this).attr("href", replaceURL);
  1894. });
  1895. });
  1896. </script>
  1897.  
  1898. </body>
  1899. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!