crpena

no. 16: california

Jul 13th, 2019
2,620
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.69 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <title>{Title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  12.  
  13. <meta name="image:sidebar" content="" />
  14.  
  15. <meta name="color:accent" content="#833E32" />
  16. <meta name="color:background" content="#fff" />
  17. <meta name="color:link" content="#69B4CB" />
  18. <meta name="color:text" content="#231E22" />
  19.  
  20. <meta name="color:askbox" content="#f0f0f0" />
  21. <meta name="color:content" content="#f0f0f0" />
  22. <meta name="color:titles" content="#0292B7" />
  23. <meta name="color:scrollbar" content="#DAA392" />
  24. <meta name="color:selection" content="#DFD1CD" />
  25. <meta name="color:tooltip" content="#A6623F" />
  26.  
  27. <meta name="select:Post Width" content="300" title="300px" />
  28. <meta name="select:Post Width" content="325" title="325px" />
  29. <meta name="select:Post Width" content="350" title="350px" />
  30. <meta name="select:Post Width" content="400" title="400px" />
  31. <meta name="select:Post Width" content="450" title="450px" />
  32. <meta name="select:Post Width" content="500" title="500px" />
  33. <meta name="select:Post Width" content="540" title="540px" />
  34.  
  35. <meta name="text:Link1" content="" />
  36. <meta name="text:Link1 URL" content="" />
  37. <meta name="text:Link2" content="" />
  38. <meta name="text:Link2 URL" content="" />
  39. <meta name="text:Link3" content="" />
  40. <meta name="text:Link3 URL" content="" />
  41. <meta name="text:Link4" content="" />
  42. <meta name="text:Link4 URL" content="" />
  43.  
  44. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet" type="text/css" />
  45. <link href="https://fonts.googleapis.com/css?family=Overpass&display=swap" rel="stylesheet">
  46. <link href="https://static.tumblr.com/nuyvmrm/sW7pulpwq/fontello-embedded.css" rel="stylesheet" />
  47.  
  48. </head>
  49.  
  50. <style text="text/css">
  51.  
  52. /* tumblr controls */
  53.  
  54. iframe.tmblr-iframe {
  55. z-index: 99999999999999!important;
  56. top: 0!important;
  57. right: 0!important;
  58. opacity: .6;
  59. filter: invert(1);
  60. -webkit-filter: invert(1);
  61. -o-filter: invert(1);
  62. -moz-filter: invert(1);
  63. -ms-filter: invert(1);
  64. transform: scale(0.6);
  65. transform-origin: 100% 0;
  66. -webkit-transform: scale(0.6);
  67. -webkit-transform-origin: 100% 0;
  68. -o-transform: scale(0.6);
  69. -o-transform-origin: 100% 0;
  70. -moz-transform: scale(0.6);
  71. -moz-transform-origin: 100% 0;
  72. -ms-transform: scale(0.6);
  73. -ms-transform-origin: 100% 0;
  74. transition: opacity 0.6s ease-in-out;
  75. -moz-transition: opacity 0.6s ease-in-out;
  76. -webkit-transition: opacity 0.6s ease-in-out;
  77. }
  78.  
  79. body {
  80. color: {color:text};
  81. background-color: {color:background};
  82. font: 11.5px 'Overpass', sans-serif;
  83. font-style: normal;
  84. font-weight: normal;
  85. font-variant: normal;
  86. word-wrap: break-word;
  87. line-height: 20px;
  88. padding: 0;
  89. margin: 0;
  90. cursor: default;
  91. overflow-x: hidden;
  92. -moz-osx-font-smoothing: grayscale;
  93. -webkit-font-smoothing: antialiased;
  94. font-smoothing: antialiased;
  95. }
  96.  
  97. img {
  98. display: block;
  99. max-width: 100%;
  100. height: auto;
  101. }
  102.  
  103. div#qTip {
  104. z-index: 1000;
  105. display: none;
  106. background: rgba({RGBcolor:tooltip},.7);
  107. color: {color:text};
  108. position: absolute;
  109. padding: 3px;
  110. margin: 10px 0 0;
  111. -webkit-border-radius: 3px;
  112. -moz-border-radius: 3px;
  113. border-radius: 3px;
  114. vertical-align: center;
  115. align-items: center;
  116. flex-wrap: wrap;
  117. grid-area: two;
  118. line-height: 150%;
  119. text-align: justify;
  120. -moz-transition: 0.2s ease-in;
  121. -webkit-transition: 0.2s ease-in;
  122. -o-transition: 0.2s ease-in;
  123. transition: 0.2s ease-in;
  124. }
  125.  
  126. ::selection {
  127. color: {color:text};
  128. background: rgba({RGBcolor:selection},.7);
  129. }
  130.  
  131. ::-moz-selection {
  132. color: {color:text};
  133. background: rgba({RGBcolor:selection},.7);
  134. }
  135.  
  136. ::-moz-selection {
  137. color: {color:text};
  138. background: rgba({RGBcolor:selection},.7);
  139. }
  140.  
  141. ::-webkit-scrollbar {
  142. width: 18px;
  143. height: 6px;
  144. }
  145.  
  146. ::-webkit-scrollbar-button {
  147. width: 0px;
  148. height: 0px;
  149. }
  150.  
  151. ::-webkit-scrollbar-thumb {
  152. background: {color:scrollbar};
  153. border: 6px solid {color:background};
  154. border-top: 4px solid {color:background};
  155. border-bottom: 4px solid {color:background};
  156. cursor: pointer;
  157. border-radius: 8px;
  158. }
  159.  
  160. ::-webkit-scrollbar-track {
  161. background: {color:scrollbar};
  162. border: 8px solid {color:background};
  163. border-top: 12px solid {color:background};
  164. border-bottom: 12px solid {color:background};
  165. }
  166.  
  167. a:link,
  168. a:visited,
  169. a:active {
  170. color: {color:text};
  171. text-decoration: none;
  172. padding: 0;
  173. background: linear-gradient(to bottom,{color:link} 0%,{color:link} 100%);
  174. background-position: 0 100%;
  175. background-repeat: repeat-x;
  176. background-size: 3px 3px;
  177. }
  178.  
  179. a:hover {
  180. background-image: url(
  181. "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift 0.5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgba({RGBcolor:link})' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"
  182. );
  183. background-size: auto 6px;
  184. }
  185.  
  186. blockquote,
  187. pre,
  188. code {
  189. margin: 0;
  190. padding: 0;
  191. border: 0;
  192. }
  193.  
  194. p { margin: 1em 0; }
  195. p:first-of-type { margin-top: 0; }
  196. p:last-of-type { margin-bottom: 0; }
  197.  
  198. h1:first-of-type,
  199. h2:first-of-type,
  200. h3:first-of-type,
  201. h4:first-of-type { margin-top: 0; }
  202.  
  203. h1:last-of-type,
  204. h2:last-of-type,
  205. h3:last-of-type,
  206. h4:last-of-type { margin-bottom: 0; }
  207.  
  208. b,
  209. strong {
  210. font-weight: bold;
  211. color: {color:titles};
  212. }
  213.  
  214. em,
  215. i { font-style: italic; }
  216.  
  217. ol,
  218. ul {
  219. list-style: none;
  220. text-align: left;
  221. padding-left: 0;
  222. }
  223.  
  224. li {
  225. position: relative;
  226. padding: .1em 0 .1em 20px;
  227. }
  228.  
  229. ol li { counter-increment: list; }
  230.  
  231. ol li:before, ul li:before {
  232. left: 5px;
  233. position: absolute;
  234. vertical-align: baseline!important;
  235. }
  236.  
  237. ol li:before {content: counter(list) '.';}
  238. ul li:before {
  239. content: '\E801';
  240. font-family: "fontello";
  241. font-style: 500;
  242. font-weight: normal;
  243. speak: none;
  244. font-size: 11px;
  245. padding: 0;
  246. margin: 0;
  247. margin-left: .2em;
  248. margin-right: .2em;
  249. display: inline-block;
  250. text-decoration: inherit;
  251. text-align: center;
  252. font-variant: normal;
  253. text-transform: none;
  254. line-height: 1em;
  255. color: {color:text};
  256. vertical-align: center;
  257. top: calc(10.5px / 1.5);
  258. }
  259.  
  260. @media (max-width:900px){
  261. .sidebar {
  262. float: none!important;
  263. position: relative!important;
  264. top: 0!important;
  265. left: 0!important;
  266. margin: 50px auto 25px!important;
  267. }
  268. .entry {
  269. float: none!important;
  270. margin: 50px auto!important;
  271. width: {select:post width}px!important;
  272. }
  273. .posts {
  274. width: 100%!important;
  275. }
  276. }
  277.  
  278. @media (max-width:700px){
  279. .entry {
  280. margin: 50px auto!important;
  281. width: 80%!important;
  282. }
  283. .posts {
  284. width: 100%!important;
  285. }
  286. }
  287.  
  288. @media (max-width:300px){
  289. .sidebar {
  290. margin: 50px auto 25px!important;
  291. width: 80%!important;
  292. }
  293. .tabs .tab,
  294. .tabs label {
  295. order: initial;
  296. }
  297. .tabs label {
  298. width: 100%;
  299. margin-right: 0;
  300. margin-top: 0.2rem;
  301. }
  302. }
  303.  
  304. /* sidebar */
  305.  
  306. .sidebar {
  307. display: block;
  308. float: left;
  309. position: fixed;
  310. width: 210px;
  311. top: 100px;
  312. left: 50px;
  313. z-index: 1;
  314. background: inherit;
  315. }
  316.  
  317. #portrait {
  318. width: 100%;
  319. height: 100%;
  320. margin: 0 auto;
  321. padding: 0;
  322. display: block;
  323. }
  324.  
  325. /* navigation */
  326.  
  327. .tabs {
  328. display: flex;
  329. flex-wrap: wrap;
  330. margin-top: 5px;
  331. width: 100%;
  332. background-color: {color:link};
  333. }
  334.  
  335. .tabs label {
  336. order: 1;
  337. display: block;
  338. padding: .5em 1.5em;
  339. margin: 0;
  340. margin: 0;
  341. cursor: pointer;
  342. background-color: {color:link};
  343. font-weight: bold;
  344. transition: background ease 0.2s;
  345. }
  346.  
  347. .tabs .tab {
  348. order: 99;
  349. flex-grow: 1;
  350. width: 100%;
  351. display: none;
  352. padding: 1rem;
  353. background-color: {color:content};
  354. }
  355.  
  356. .tabs input[type="radio"] {
  357. display: none;
  358. }
  359.  
  360. .tabs input[type="radio"]:checked + label {
  361. background-color: rgba({RGBcolor:background}, .15);
  362. }
  363.  
  364. .tabs input[type="radio"]:checked + label + .tab {
  365. display: block;
  366. }
  367.  
  368. .tabs .stext {
  369. text-align: justify;
  370. }
  371.  
  372. .tabs a.tab-link {
  373. display: block;
  374. text-align: center;
  375. padding: .25em .1em;
  376. margin: 0;
  377. margin-bottom: .25em;
  378. background: none;
  379. background-color: {color:background};
  380. }
  381.  
  382. /* posts */
  383.  
  384. .entry {
  385. display: block;
  386. position: relative;
  387. width: {select:post width}px;
  388. margin: 50px 0;
  389. margin-left: 360px;
  390. padding: 0;
  391. float: left;
  392. }
  393.  
  394. .posts {
  395. display: block;
  396. position: relative;
  397. width: {select:post width}px;
  398. padding: 0;
  399. margin: 0;
  400. {block:IndexPage}margin-bottom: 50px;{/block:IndexPage}
  401. }
  402.  
  403. .posts:last-of-type,
  404. .posts:last-child { margin-bottom: 0; }
  405.  
  406. .posts h1,
  407. .posts h2,
  408. .posts h3,
  409. .posts h4,
  410. .posts h5 {
  411. display: inline-block;
  412. font-weight: bold;
  413. color: {color:body text};
  414. background-position: 0 86%;
  415. background-size: 100% 0.4em;
  416. background-repeat: no-repeat;
  417. background-image: linear-gradient({color:accent},{color:accent});
  418. }
  419.  
  420. .posts h1,
  421. .posts h2,
  422. .posts h3,
  423. .posts h4,
  424. .posts h5 {
  425. display: inline-block;
  426. font-weight: bold;
  427. color: {color:text};
  428. background-position: 0 86%;
  429. background-size: 100% 0.4em;
  430. background-repeat: no-repeat;
  431. background-image: linear-gradient({color:accent},{color:accent});
  432. }
  433.  
  434. /* photosets */
  435.  
  436. [photoset-layout] div {
  437. cursor: pointer;
  438. margin-right: .3em;
  439. margin-bottom: .3em;
  440. }
  441.  
  442. .vignette, #vignette { opacity:0; }
  443. .lightbox-image, #tumblr_lightbox img {
  444. box-shadow: none !important;
  445. border-radius: 0 !important;
  446. }
  447.  
  448. .tmblr-lightbox, #tumblr_lightbox {
  449. background-color: {color:content}!important;
  450. z-index: 99999!important;
  451. }
  452.  
  453. .lightbox-caption, #tumblr_lightbox_caption {
  454. visibility: hidden;
  455. }
  456.  
  457. /* quote */
  458.  
  459. .quote {
  460. display: block;
  461. font-style: normal;
  462. font-weight: 500;
  463. text-align: left;
  464. line-height: 1.3em;
  465. margin: 0;
  466. padding: 0;
  467. width: 100%;
  468. letter-spacing: .1em;
  469. font-size: 16px;
  470. color: {color:titles};
  471. }
  472.  
  473. #s {
  474. display: block;
  475. width: 100%;
  476. margin: 0;
  477. margin-top: 10px;
  478. padding: 0;
  479. text-align: left;
  480. color: {color:text};
  481. letter-spacing: .1em;
  482. }
  483.  
  484. /* links and text */
  485.  
  486. a.titles:before {
  487. content: '\e825';
  488. font-family: "fontello";
  489. font-style: 500;
  490. font-weight: normal;
  491. speak: none;
  492. font-size: 12px;
  493. display: inline-block;
  494. text-decoration: inherit;
  495. text-align: center;
  496. font-variant: normal;
  497. text-transform: none;
  498. line-height: 1em;
  499. margin: 0;
  500. margin-right: .5em;
  501. color: {color:link};
  502. vertical-align: middle;
  503. }
  504.  
  505. a.titles {
  506. text-align: left;
  507. color: {color:text};
  508. font-size: 12px;
  509. padding: 0;
  510. margin: 0;
  511. background: none;
  512. font-style: 500;
  513. letter-spacing: .1em;
  514. }
  515.  
  516. a.titles:hover {
  517. color: {color:link};
  518. }
  519.  
  520. div.titles {
  521. display: block;
  522. text-align: left;
  523. font-size: 12px;
  524. color: {color:titles};
  525. font-style: 500;
  526. letter-spacing: .1em;
  527. }
  528.  
  529. #post {
  530. width: 100%;
  531. display: block;
  532. text-align: justify;
  533. margin-top: .75em;
  534. padding: 0;
  535. font-weight: lighter;
  536. color: {color:text};
  537. background: none;
  538. }
  539.  
  540. a.read_more {
  541. position: relative;
  542. display: block;
  543. background: none;
  544. margin: 0;
  545. margin-top: -4em;
  546. padding: 2em .5em;
  547. color: {color:text};
  548. text-align: center;
  549. letter-spacing: .1em;
  550. text-transform: uppercase;
  551. font-weight: 700;
  552. z-index: 1;
  553. font-style: italic;
  554. background-color: rgb({RGBcolor:tooltip});
  555. background: -moz-linear-gradient(90deg, rgba({RGBcolor:tooltip}, 1) 0%, rgba(253,187,45,0) 100%);
  556. background: -webkit-linear-gradient(90deg, rgba({RGBcolor:tooltip}, 1) 0%, rgba(253,187,45,0) 100%);
  557. background: linear-gradient(90deg, rgba({RGBcolor:tooltip}, 1) 0%, rgba(253,187,45,0) 100%);
  558. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{color:tooltip text}",endColorstr="#fdbb2d",GradientType=1);
  559. }
  560.  
  561. /* chat */
  562.  
  563. .chat li:before { display: none; }
  564.  
  565. .chat li {
  566. padding: 0;
  567. margin: 0;
  568. }
  569.  
  570. .chat {
  571. display: block;
  572. width: 100%;
  573. margin: 0;
  574. padding: 0;
  575. }
  576.  
  577. .l {
  578. display: block;
  579. padding: 0;
  580. margin: 0;
  581. letter-spacing: .5px;
  582. }
  583.  
  584. .l:nth-of-type(odd) {
  585. padding: .25em;
  586. color: {color:text};
  587. background-color: {color:content};
  588. }
  589. .l:nth-of-type(even) {
  590. padding: .25em;
  591. color: {color:text};
  592. background-color: {color:background};
  593. }
  594.  
  595. .label {
  596. margin: 0 .5em;
  597. font-weight: 500;
  598. text-decoration: none;
  599. }
  600.  
  601. /* audio */
  602.  
  603. .soundcloud_audio_player { max-height: 116px!important; }
  604. .spotify_audio_player { max-height: 80px!important; }
  605.  
  606. .audio_post {
  607. display: block;
  608. padding: 0;
  609. margin: 0;
  610. width: 100%;
  611. overflow: hidden;
  612. height: 70px;
  613. }
  614.  
  615. .albumart {
  616. float: left;
  617. width: 70px;
  618. height: 70px;
  619. display: inline;
  620. }
  621.  
  622. .player {
  623. display: block;
  624. position: absolute;
  625. width: 25px;
  626. height: 25px;
  627. overflow: hidden;
  628. margin: 0;
  629. padding: 0;
  630. left: 77.5px;
  631. }
  632.  
  633. .player .tumblr_audio_player {
  634. position: relative;
  635. margin-top: -1px;
  636. margin-left: -3px;
  637. }
  638.  
  639. .infobox {
  640. display: block;
  641. position: relative;
  642. text-align: left;
  643. margin: 0;
  644. margin-top: 30px;
  645. margin-left: 77.5px;
  646. padding: 0;
  647. }
  648.  
  649. .infobox li:before { display: none; }
  650.  
  651. .infobox li {
  652. margin: 0;
  653. padding: 0;
  654. }
  655.  
  656. .infobox li.title {
  657. display: block;
  658. font-size: 12px;
  659. font-weight: 700;
  660. color: {color:titles};
  661. margin: 0;
  662. padding: 0;
  663. letter-spacing: .5px;
  664. }
  665.  
  666. .infobox li.artist {
  667. display: inline-block;
  668. font-style: italic;
  669. margin-right: .25em;
  670. }
  671.  
  672. .infobox li.album { display: inline-block; }
  673.  
  674. /* answer */
  675.  
  676. #askbox {
  677. display: block;
  678. width: 100%;
  679. margin: 0;
  680. padding: 0;
  681. }
  682.  
  683. .question {
  684. display: block;
  685. width: calc(100% - 30px - .75em);
  686. margin: 0;
  687. margin-left: calc(30px + .75em);
  688. padding: 0;
  689. border-left: 1px solid {color:askbox};
  690. }
  691.  
  692. .asker-avatar {
  693. float: left;
  694. position: absolute;
  695. margin: 0;
  696. margin-left: calc(-30px - .75em);
  697. width: 30px;
  698. height: 30px;
  699. border-radius: 3px;
  700. }
  701.  
  702. div.asker {
  703. display: block;
  704. margin: 0;
  705. margin-left: .75em;
  706. padding: 0;
  707. font-size: 10px;
  708. text-align: left;
  709. font-weight: 700;
  710. letter-spacing: .1em;
  711. text-transform: uppercase;
  712. }
  713.  
  714. a.asker,
  715. .asker a {
  716. padding: 0;
  717. margin: 0;
  718. color: {color:text};
  719. background: none;
  720. }
  721.  
  722. .asker-question {
  723. display: block;
  724. margin: 0;
  725. margin-left: .75em;
  726. padding: 0;
  727. }
  728.  
  729. .answer {
  730. display: block;
  731. width: calc(100% - 24px - .5em);
  732. margin: 0;
  733. margin-top: 10px;
  734. margin-left: calc(24px + .5em);
  735. padding: 0;
  736. }
  737.  
  738. .answerer-avatar {
  739. float: left;
  740. position: absolute;
  741. margin: 0;
  742. margin-left: calc(-24px - .5em);
  743. width: 24px;
  744. height: 24px;
  745. border-radius: 3px;
  746. }
  747.  
  748. .answerer {
  749. display: inline;
  750. float: left;
  751. margin: 0;
  752. padding: 0;
  753. color: {color:link};
  754. margin-right: .5em;
  755. }
  756.  
  757. .answerer a {
  758. margin: 0;
  759. padding: 0;
  760. color: {color:link};
  761. background: none;
  762. }
  763.  
  764. .answerer-answer {
  765. display: block;
  766. width: 100%;
  767. margin: 0;
  768. margin-top: 10px;
  769. padding: .25em .5em;
  770. text-align: justify;
  771. box-sizing: border-box;
  772. border: 1px solid {color:askbox};
  773. background-color: rgba({RGBcolor:askbox}, .5);
  774. }
  775.  
  776. .replies {
  777. display: block;
  778. width: 100%;
  779. margin: 0;
  780. margin-top: 10px;
  781. padding: .5em .75em;
  782. text-align: justify;
  783. box-sizing: border-box;
  784. border: 1px solid {color:askbox};
  785. background-color: rgba({RGBcolor:askbox}, .5);
  786. }
  787.  
  788. /* video */
  789.  
  790. .video {
  791. display: block;
  792. position: relative;
  793. }
  794.  
  795. .video iframe {
  796. display: block;
  797. margin: auto;
  798. max-width: calc({select:post width}px - 8px);
  799. }
  800.  
  801. .tumblr_video_container {
  802. display: block;
  803. margin: auto;
  804. max-width: calc({select:post width}px - 8px);
  805. }
  806.  
  807. #youtube_iframe {
  808. display: block;
  809. margin: auto;
  810. max-height: calc({select:post width}px * 0.67);
  811. max-width: calc({select:post width}px - 8px);
  812. }
  813.  
  814. .instagram-media {
  815. max-height: none!important;
  816. }
  817.  
  818. /* caption */
  819.  
  820. .caption .tumblr_parent {
  821. display: block;
  822. margin: 0;
  823. margin-top: .5em;
  824. padding: 0;
  825. border: 0;
  826. color: {color:text};
  827. }
  828.  
  829. .caption .tumblr_avatar {
  830. display: inline-block;
  831. float: left;
  832. padding: 0;
  833. margin: 0;
  834. margin-top: 2px;
  835. margin-right: .5em;
  836. width: 16px;
  837. height: 16px;
  838. border-radius: 3px;
  839. vertical-align: center!important;
  840. }
  841.  
  842. .caption .tumblr_parent blockquote {
  843. margin: 0;
  844. padding: 0;
  845. border: 0;
  846. }
  847.  
  848. .caption a.tumblr_blog {
  849. display: inline-block;
  850. color: {color:link};
  851. float: left;
  852. border: 0;
  853. padding: 0;
  854. background: none;
  855. margin-right: .5em;
  856. }
  857.  
  858. .npf_row {
  859. display: block;
  860. width: 100%;
  861. height: 100%;
  862. margin: 4px 0!important;
  863. padding: 0;
  864. }
  865.  
  866. .textcaption {
  867. display: block;
  868. width: 100%;
  869. padding: 0;
  870. margin: 0;
  871. margin-top: 5px;
  872. }
  873.  
  874. /* permalink */
  875.  
  876. #permalink {
  877. display: block;
  878. width: 100%;
  879. margin: 0;
  880. margin-top: 15px;
  881. padding: 0;
  882. text-align: left;
  883. }
  884.  
  885. #permalink a {
  886. display: inline;
  887. padding: 0;
  888. margin: 0 .25em;
  889. background: none;
  890. }
  891.  
  892. /* like button */
  893.  
  894. .controls {
  895. display: inline-block;
  896. margin: 0;
  897. padding: 0;
  898. vertical-align: top;
  899. }
  900.  
  901. .controls a {
  902. position: relative;
  903. display: inline;
  904. overflow: hidden;
  905. padding: 0;
  906. margin: 0;
  907. width: 10px;
  908. height: 10px;
  909. background: none;
  910. }
  911.  
  912. .controls .like .like_button {
  913. position: relative;
  914. display: inline;
  915. }
  916.  
  917. .controls .like .like_button iframe {
  918. position: absolute;
  919. top: 0;
  920. left: 0;
  921. bottom: 0;
  922. right: 0;
  923. z-index: 2;
  924. opacity: 0;
  925. }
  926.  
  927. /* tags */
  928.  
  929. #tags {
  930. display: block;
  931. width: 100%;
  932. margin: 0;
  933. margin-top: 10px;
  934. padding: 0;
  935. text-align: left;
  936. }
  937.  
  938. #tags a:before {
  939. content: '#';
  940. font-family: "fontello";
  941. font-style: italic;
  942. font-weight: 500;
  943. speak: none;
  944. padding: 0;
  945. margin: 0;
  946. margin-left: .2em;
  947. margin-right: 1px;
  948. display: inline-block;
  949. text-decoration: inherit;
  950. text-align: center;
  951. font-variant: normal;
  952. text-transform: none;
  953. line-height: 1em;
  954. color: rgba({RGBcolor:text}, .85);
  955. vertical-align: center;
  956. }
  957.  
  958. #tags a {
  959. color: rgba({RGBcolor:text}, .6);
  960. margin-right: .5em;
  961. background: none;
  962. }
  963.  
  964. #tags a:hover {
  965. color: rgba({RGBcolor:text}, .85);
  966. }
  967.  
  968. /* pagination */
  969.  
  970. #pagination {
  971. display: block;
  972. text-align: justify;
  973. width: 100%;
  974. padding: 0;
  975. margin: 0;
  976. letter-spacing: .1px;
  977. font-weight: 700;
  978. }
  979.  
  980. #pagination a {
  981. background: none;
  982. }
  983.  
  984. #pagination a:nth-of-type(1n) {
  985. display: inline-block;
  986. width: 49%;
  987. margin: 0;
  988. padding: 0;
  989. text-align: left;
  990. }
  991.  
  992. #pagination a:nth-of-type(2n) {
  993. display: inline-block;
  994. width: 49%;
  995. margin: 0;
  996. padding: 0;
  997. text-align: right;
  998. }
  999.  
  1000. /* tooltip */
  1001.  
  1002. [tooltip] {
  1003. position: relative;
  1004. z-index: 9;
  1005. cursor: pointer;
  1006. }
  1007.  
  1008. [tooltip]:before,
  1009. [tooltip]:after {
  1010. visibility: hidden;
  1011. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  1012. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  1013. opacity: 0;
  1014. pointer-events: none;
  1015. }
  1016.  
  1017. [tooltip]::before {
  1018. content: "";
  1019. position: absolute;
  1020. top: -6px;
  1021. left: 50%;
  1022. transform: translateX(-50%);
  1023. border-width: 4px 6px 0 6px;
  1024. border-style: solid;
  1025. border-color: rgba({RGBcolor:tooltip}, 0.7) transparent transparent transparent;
  1026. z-index: 100;
  1027. }
  1028.  
  1029. [tooltip-position='left']::before{
  1030. left: 0%;
  1031. top: 50%;
  1032. margin-left: -12px;
  1033. transform: translatey(-50%) rotate(-90deg)
  1034. }
  1035.  
  1036. [tooltip-position='top']::before{ left: 50%; }
  1037.  
  1038. [tooltip-position='bottom']::before{
  1039. top: 100%;
  1040. margin-top: 8px;
  1041. transform: translateX(-50%) translatey(-100%) rotate(-180deg)
  1042. }
  1043.  
  1044. [tooltip-position='right']::before{
  1045. left: 100%;
  1046. top: 50%;
  1047. margin-left: 1px;
  1048. transform: translatey(-50%) rotate(90deg)
  1049. }
  1050.  
  1051. [tooltip]::after {
  1052. content: attr(tooltip);
  1053. position: absolute;
  1054. left: 50%;
  1055. top: -6px;
  1056. transform: translateX(-50%) translateY(-100%);
  1057. background-color: rgba({RGBcolor:tooltip}, 0.7);
  1058. text-align: center;
  1059. color: {color:text};
  1060. padding: 4px 2px;
  1061. min-width: 80px;
  1062. border-radius: 5px;
  1063. pointer-events: none;
  1064. }
  1065.  
  1066. [tooltip-position='left']::after{
  1067. left: 0%;
  1068. top: 50%;
  1069. margin-left: -8px;
  1070. transform: translateX(-100%) translateY(-50%);
  1071. }
  1072.  
  1073. [tooltip-position='top']::after{ left: 50%; }
  1074.  
  1075. [tooltip-position='bottom']::after{
  1076. top: 100%;
  1077. margin-top: 8px;
  1078. transform: translateX(-50%) translateY(0%);
  1079. }
  1080.  
  1081. [tooltip-position='right']::after{
  1082. left: 100%;
  1083. top: 50%;
  1084. margin-left: 8px;
  1085. transform: translateX(0%) translateY(-50%);
  1086. }
  1087.  
  1088. [tooltip]:hover:before,
  1089. [tooltip]:hover:after {
  1090. visibility: visible;
  1091. transition:.6s;
  1092. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  1093. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  1094. opacity: 1;
  1095. }
  1096.  
  1097. /* post notes */
  1098.  
  1099. ol.notes {
  1100. display: block;
  1101. width: 100%;
  1102. list-style-type: none;
  1103. margin: 0;
  1104. padding: 0;
  1105. margin-top: 15px;
  1106. }
  1107.  
  1108. ol.notes a {
  1109. border: 0;
  1110. padding: 0;
  1111. }
  1112.  
  1113. ol.notes li.note {
  1114. display: block;
  1115. position: relative;
  1116. line-height: 16px;
  1117. padding: 0;
  1118. margin: 0;
  1119. margin-bottom: 15px;
  1120. }
  1121.  
  1122. ol.notes li.note a {
  1123. border: none;
  1124. padding: 0;
  1125. margin: 0;
  1126. }
  1127.  
  1128. ol.notes li:before {
  1129. display: inline-block;
  1130. position: relative;
  1131. vertical-align: baseline!important;
  1132. content: '';
  1133. font-family: "fontello";
  1134. font-weight: normal;
  1135. font-style: normal;
  1136. speak: none;
  1137. width: 1em;
  1138. margin: 0;
  1139. margin-right: 1em;
  1140. padding: 0;
  1141. vertical-align: middle;
  1142. color: {color:accent};
  1143. }
  1144.  
  1145. ol.notes li.note.reblog:before { content: '\e813'; }
  1146. ol.notes li.note.like:before { content: '\e804'; }
  1147. ol.notes li.note img.avatar { display: none; }
  1148. ol.notes li.note span.action { font-weight: normal!important; }
  1149.  
  1150. ol.notes li.note blockquote {
  1151. border-left: 1px solid {color:askbox};
  1152. padding-left: 10px;
  1153. margin: 8px 16px 0 0px;
  1154. font-weight: normal;
  1155. font-style: none;
  1156. text-align: block;
  1157. text-transform: none;
  1158. line-height: 17px;
  1159. }
  1160.  
  1161. @import url('https://fonts.googleapis.com/css?family=Noto+Serif');
  1162.  
  1163. a.cr {
  1164. border: 0;
  1165. padding: 0;
  1166. bottom: 15px;
  1167. right: 15px;
  1168. position: fixed;
  1169. font-size: 20px;
  1170. background: none;
  1171. font-style: italic;
  1172. font-weight: lighter;
  1173. letter-spacing: -5px;
  1174. text-decoration: none;
  1175. font-family: 'Noto Serif', serif;
  1176. background-color: #fff;
  1177. }
  1178.  
  1179. .cr:before {
  1180. content: 'a';
  1181. color: #F4B099;
  1182. }
  1183.  
  1184. .cr:after {
  1185. content: 't';
  1186. color: #A6A5CF;
  1187. }
  1188.  
  1189. {CustomCSS}
  1190.  
  1191. </style>
  1192.  
  1193. <body>
  1194.  
  1195. <div class="sidebar">
  1196. <img src="{image:sidebar}" id="portrait" />
  1197.  
  1198. <div class="tabs">
  1199. <input type="radio" name="tabs" id="tabone" checked="checked">
  1200. <label for="tabone">index</label>
  1201. <div class="tab">
  1202. <a class="tab-link" href="/">index</a>
  1203. {block:AskEnabled}<a class="tab-link" href="/ask">askbox</a>{/block:AskEnabled}
  1204. <a class="tab-link" href="/archive" target="_blank">archive</a>
  1205. </div>
  1206.  
  1207. <input type="radio" name="tabs" id="tabtwo">
  1208. <label for="tabtwo">about</label>
  1209. <div class="tab stext">
  1210. {description}
  1211. </div>
  1212.  
  1213. <input type="radio" name="tabs" id="tabthree">
  1214. <label for="tabthree">blog</label>
  1215. <div class="tab">
  1216. {block:ifLink1}<a class="tab-link" href="{text:Link1 URL}">{text:Link1}</a>{/block:ifLink1}
  1217. {block:ifLink2}<a class="tab-link" href="{text:Link2 URL}">{text:Link2}</a>{/block:ifLink2}
  1218. {block:ifLink3}<a class="tab-link" href="{text:Link3 URL}">{text:Link3}</a>{/block:ifLink3}
  1219. {block:ifLink4}<a class="tab-link" href="{text:Link4 URL}">{text:Link4}</a>{/block:ifLink4}
  1220. </div>
  1221. </div>
  1222.  
  1223. </div>
  1224.  
  1225. <section class="entry">
  1226.  
  1227. {block:Posts}
  1228. <div class="posts" id="{PostID}">
  1229.  
  1230. {block:Answer}<div id="askbox"><div class="question"><img class="asker-avatar" src="{AskerPortraitURL-30}" /><div class="asker">{Asker}</div><div class="asker-question">{Question}</div></div>{block:Answerer}<div class="answer"><img class="answerer-avatar" src="{AnswererPortraitURL-24}" alt=""><div class="answerer-answer"><div class="answerer">{Answerer}</div>{Answer}</div></div>{/block:Answerer}{block:ifReplies}<div class="caption replies">{Replies}</div>{/block:ifReplies}</div>{/block:Answer}
  1231.  
  1232. {block:Audio}<div class="audio_post">{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}" alt="" />{/block:AlbumArt}<div class="player">{AudioPlayer}</div><ul class="infobox">{block:TrackName}<li class="title">{TrackName}</li>{/block:TrackName}{block:Artist}<li class="artist">{Artist}</li>{/block:Artist}{block:Album}<li class="album"> — {Album}</li>{/block:Album}</ul></div>{/block:Audio}
  1233.  
  1234. {block:Chat}<div class="chat">{block:Title}<div class="titles">{Title}</div>{/block:Title}<ul>{block:Lines}<li class="l {Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<span class="line">{Line}</span></li>{/block:Lines}</ul></div>{/block:Chat}
  1235.  
  1236. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div id="s">{Source}</div>{/block:Source}{/block:Quote}
  1237.  
  1238. {block:Link}<a class="titles" href="{URL}">{Name}</a>{block:Description}<div class="caption" id="post">{Description}</div>{/block:Description}{/block:Link}
  1239.  
  1240. {block:Text}{block:Title}<div class="titles">{Title}</div>{/block:Title}<div class="caption" id="post">{Body}</div>{/block:Text}
  1241.  
  1242. {block:Photo}<div id="media"><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"><img src="{PhotoURL-HighRes}" width="{text:post width}" /></a></div>{/block:Photo}
  1243.  
  1244. {block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)" style="cursor:pointer;"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
  1245.  
  1246. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1247.  
  1248. {block:Caption}<div class="caption textcaption">{caption}</div>{/block:Caption}
  1249.  
  1250. {block:Date}<div id="permalink">
  1251. <a href="{permalink}"><u style="font-weight:bold;">{shortmonth} {dayofmonth}</u> {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}</a>
  1252.  
  1253. <div class="controls">
  1254. <a class="reblog" href="{ReblogURL}" target="_blank">
  1255. <span class="i-repeat"></span>
  1256. </a>
  1257.  
  1258. <a href="#" class="like">{LikeButton}
  1259. <span class="i-heart"></span>
  1260. </a>
  1261. </div>
  1262.  
  1263. {block:RebloggedFrom} <span class="i-user" style="float:right;"><!-- <a href="{ReblogParentURL}">{ReblogParentName}</a> --> <a href="{ReblogRootURL}">{ReblogRootName}</a></span>{/block:RebloggedFrom}
  1264.  
  1265. {block:NotReblog} <span class="i-user" style="float:right;">{name}</span>{/block:NotReblog}
  1266.  
  1267. <!--{block:ContentSource}
  1268. <a href="{SourceURL}">Source</a>
  1269. {/block:ContentSource}-->
  1270.  
  1271. </div>{/block:Date}
  1272.  
  1273. {block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1274.  
  1275. </div>
  1276.  
  1277. {/block:Posts}
  1278.  
  1279. {block:Pagination}<div id="pagination">
  1280. {block:PreviousPage}<a href="{PreviousPage}">← Older</a>
  1281. {/block:PreviousPage}
  1282. {block:NextPage}<a href="{NextPage}">Next →</a>
  1283. {/block:NextPage}
  1284. </div>{/block:Pagination}
  1285.  
  1286. {block:PostNotes}{PostNotes}{/block:PostNotes}{block:ContentSource}<!--{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}-->{/block:ContentSource}<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  1287.  
  1288. </section>
  1289.  
  1290.  
  1291. <a class="cr" href="https://aurthms.tumblr.com" target="_blank"></a>
  1292.  
  1293.  
  1294. <!--
  1295.  
  1296. 1.jquery
  1297. 2.tooltips
  1298. 3.unnest caption by neothm
  1299. 4.flexible frames by nouvae
  1300.  
  1301. -->
  1302.  
  1303. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  1304. <script src="https://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  1305. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1306. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1307.  
  1308. <script>
  1309. $(document).ready(function(){
  1310. // audio player by shudesigns
  1311. var $audio = $('iframe.tumblr_audio_player');
  1312. $audio.load(function() {
  1313. $(this).contents().find('head').append('<style type="text/css">' +
  1314. '.audio-player { background: {color:background}; color: {color:text} !important; }' +
  1315. '.audio-player .audio-info .track-artist { color: {color:text} !important; }' +
  1316. '</style>');
  1317. });
  1318. // captions by neothm
  1319. $('.posts').unnest({
  1320. yourCaption: ".caption",
  1321. wrapName: ".tumblr_parent",
  1322. newCaptionUsername: true,
  1323. originalPostCaptionUsername: false,
  1324. tumblrAvatars: true,
  1325. tumblrAvatarClass: ".tumblr_avatar",
  1326. usernameColon: false
  1327. });
  1328. // flexible frames by nouvae
  1329. function flexFrame() {
  1330. $(".caption").each(function() {
  1331. $(this).find("iframe").wrap("<div class='iframe-flex'></div>");
  1332. flexibleFrames($(".iframe-flex"));
  1333. });
  1334. flexibleFrames($(".video"));}
  1335. $(document).ready(flexFrame);
  1336. // remove tumblr redirects script by magnusthemes@tumblr
  1337. $('a[href*="t.umblr.com/redirect"]').initialize(function(){
  1338. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1339. var replaceURL = decodeURIComponent(originalURL);
  1340. $(this).attr("href", replaceURL);
  1341. });
  1342. });
  1343. // photosets by annasthms
  1344. function gatherData(images, arr) {
  1345. for (let i = 0; i < images.length; i++) {
  1346. let currentData = {
  1347. "width": images[i].getAttribute('data-width'),
  1348. "height": images[i].getAttribute('data-height'),
  1349. "low_res": images[i].getAttribute('data-lowres'),
  1350. "high_res": images[i].getAttribute('data-highres')
  1351. };
  1352. arr.push(currentData);
  1353. }
  1354. }
  1355. function getIndex(elem) {
  1356. let i = 0;
  1357. while( (elem = elem.previousElementSibling) != null ) i++;
  1358. return i;
  1359. }
  1360. function lightbox(elem) {
  1361. let currentPhotoset = elem.parentNode;
  1362. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1363. let data = [];
  1364. gatherData(photosetPhotos, data);
  1365. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1366. }
  1367. </script>
  1368.  
  1369. </body>
  1370. </html>
Advertisement
Add Comment
Please, Sign In to add comment