API tools faq
paste
Advertisement
anakinskywalker

html raw edit

anakinskywalker
Mar 11th, 2020
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <!-- theme by spacetchi, Medusa Moxie
  7.  
  8. http://spacetchi.tumblr.com/
  9.  
  10. http://5ppi.tumblr.com/
  11.  
  12. http://tchi.space/
  13.  
  14. Do not steal!
  15.  
  16. -->
  17.  
  18. <meta charset="utf-8">
  19. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.  
  25. <title>{Title}</title>
  26.  
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29.  
  30. <meta name="image:background" content=""/>
  31. <meta name="if:tile background" content="1"/>
  32.  
  33. <meta name="text:Link 1 Url" content="/"/>
  34. <meta name="text:Link 1 Title" content="one"/>
  35. <meta name="text:Link 2 Url" content="/"/>
  36. <meta name="text:Link 2 Title" content="two"/>
  37. <meta name="text:link 3 url" content="/"/>
  38. <meta name="text:link 3 title" content="three"/>
  39.  
  40. <meta name="color:Background" content="#fff">
  41. <meta name="color:Text" content="#000">
  42. <meta name="color:Link" content="#00f">
  43. <meta name="color:Active Link" content="#f00">
  44. <meta name="if:Show Post Info on Index Page" content="0">
  45.  
  46. </head>
  47.  
  48. <!-- photoset stylesheet by pixelunion! -->
  49.  
  50. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  51.  
  52. <style>
  53.  
  54. /* general */
  55.  
  56. * {
  57. box-sizing:border-box;
  58. }
  59.  
  60. html {
  61. font-size:16px;
  62. font-size:calc(15px + 0.2vw);
  63. }
  64.  
  65. body {
  66. font-family:'Times New Roman', georgia, palatino, serif;
  67. color:{color:Text};
  68. background:{color:Background};
  69. {block:ifBackgroundImage}background-image:url('{image:background}');
  70. background-attachment:fixed;
  71. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}{/block:ifBackgroundImage}
  72. padding:0;
  73. margin:0;
  74. line-height:1.6;
  75. }
  76.  
  77. a {
  78. color:{color:Link};
  79. text-decoration:underline;
  80. }
  81.  
  82. a:active {
  83. color:{color:Active Link};
  84. }
  85.  
  86. blockquote {
  87. margin:0 0 0 1em;
  88. padding:0 0 0 1em;
  89. border-left:1px solid black;
  90. }
  91.  
  92. ul,
  93. ol {
  94. margin:0 0 0 1em;
  95. padding:0 0 0 1em;
  96. }
  97.  
  98. * > *:first-child {
  99. margin-top:0;
  100. }
  101.  
  102. * > *:last-child {
  103. margin-bottom:0;
  104. }
  105.  
  106. img {
  107. max-width:100%;
  108. height:auto;
  109. }
  110.  
  111. .lightbox-image {
  112. max-width:none;
  113. }
  114.  
  115. .media iframe,
  116. #ask_form,
  117. #submit_form {
  118. max-width:100%;
  119. display:block;
  120. }
  121.  
  122. /* wrappers */
  123.  
  124. .wrapper {
  125. margin:2rem auto;
  126. padding:1rem;
  127. max-width:100%;
  128. width:60%;
  129. width:calc(8vw + 500px);
  130. }
  131.  
  132. /* sidebar */
  133.  
  134. .links {
  135. margin-bottom:5rem;
  136. }
  137.  
  138. .links ul {
  139. margin:0;
  140. padding:0;
  141. list-style-type:none;
  142. }
  143.  
  144. .links li {
  145. display:inline;
  146. }
  147.  
  148. .links li:not(:last-child) {
  149. padding-right:5px;
  150. }
  151.  
  152. .photo-row {
  153. padding:0.1em 0;
  154. display:flex;
  155. }
  156.  
  157. .media--image--container {
  158. cursor:pointer;
  159. padding:0 0.1em;
  160. flex-grow:1;
  161. }
  162.  
  163. .media--image--container:first-child {
  164. padding-left:0;
  165. }
  166.  
  167. .media--image--container:last-child {
  168. padding-right:0;
  169. }
  170.  
  171. .media--image {
  172. width:100%;
  173. height:100%;
  174. object-fit:cover;
  175. cursor:pointer;
  176. }
  177.  
  178. .tumblr_video_container {
  179. width:initial !important;
  180. height:initial !important;
  181. position:static;
  182. }
  183.  
  184. .video--container iframe {
  185. width:100% !important;
  186. min-width:0 !important;
  187. }
  188.  
  189. /* post */
  190.  
  191. .post-info {
  192. margin-bottom:5rem;
  193. }
  194.  
  195. .post {
  196. margin-bottom:5rem;
  197. }
  198.  
  199. .caption {
  200. margin-top:1em;
  201. }
  202.  
  203. .chat .name {
  204. font-weight:bold;
  205. }
  206.  
  207. .quote {
  208. font-style:italic;
  209. font-weight:400;
  210. }
  211.  
  212. .quote.medium {
  213. font-size:1.2em;
  214. }
  215.  
  216. .quote.long {
  217. font-size:1em;
  218. }
  219.  
  220. .question {
  221. font-style:italic;
  222. }
  223.  
  224. /* post notes */
  225.  
  226. ol.notes {
  227. margin:0 0 5rem 0;
  228. }
  229.  
  230. .notes img {
  231. display:inline;
  232. margin-right:5px;
  233. }
  234.  
  235. .notes li.more_notes_link_container {
  236. text-align:left !important; /* must use this due to tumblr code */
  237. text-transform:lowercase;
  238. list-style-type:none;
  239. }
  240.  
  241. /* pagination */
  242.  
  243. .pagination {
  244. text-align:center;
  245. text-transform:lowercase;
  246. }
  247.  
  248. .pagination a:not(:last-child) {
  249. padding-right:5px;
  250. }
  251.  
  252. @media (min-width:800px) {
  253. .wrapper {
  254. margin:5rem 0;
  255. padding:0 3rem;
  256. }
  257.  
  258. header {
  259. margin-bottom:5rem;
  260. }
  261. .links {
  262. position:fixed;
  263. left:calc(8vw + 500px);
  264. top:5rem;
  265. }
  266. .links ul {
  267. list-style-type:disc;
  268. padding-left:1em;
  269. }
  270. .links li {
  271. display:list-item;
  272. }
  273. }
  274.  
  275. </style>
  276.  
  277. <body>
  278.  
  279. <div class="wrapper">
  280.  
  281. {block:IndexPage}
  282. <header>
  283.  
  284. <center><h1 class="title"><a href="{BlogURL}">{Title}</a></h1></center>
  285.  
  286. <p id="desc">{Description}</p>
  287.  
  288. </header>
  289. {/block:IndexPage}
  290.  
  291. <aside class="links">
  292.  
  293. <nav><center>
  294. <ul>
  295. <li><a href="/">refresh</a></li>
  296. {block:AskEnabled}
  297. <li><a href="/ask">message</a></li>
  298. {/block:AskEnabled}
  299. <li><a href="{text:Link 1 Url}">{text:Link 1 Title}</a></li>
  300. <li><a href="{text:Link 2 Url}">{text:Link 2 Title}</a></li>
  301. <li><a href="{text:link 3 url}">{text:link 3 title}</a></li>
  302. <li><a href="http://5ppi.tumblr.com/" title="Updated 2020-06-07">theme</a></li>
  303. </ul></center>
  304. </nav>
  305.  
  306. </aside>
  307.  
  308. <main>
  309.  
  310. {block:Posts}
  311.  
  312. <article class="post">
  313.  
  314. {block:PermalinkPage}
  315.  
  316. {block:Date}
  317. <div class="post-info">
  318. <p>
  319. posted {DayOfWeek}, {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12HourWithZero}:{Minutes}:{Seconds} {CapitalAmPm}
  320. {block:NoteCount}
  321. <br />with {NoteCountWithLabel}
  322. {/block:NoteCount}
  323. </p>
  324.  
  325. {block:HasTags}
  326. <div class="tags">
  327. {block:Tags}
  328. <a href="{TagURL}">#{Tag}</a>
  329. {/block:Tags}
  330. </div><!-- tags -->
  331. {/block:HasTags}
  332.  
  333. </div><!-- post-info -->
  334. {/block:Date}
  335.  
  336. {/block:PermalinkPage}
  337.  
  338. {block:Text}
  339. {block:Title}
  340. <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  341. {/block:Title}
  342. {Body}
  343. {/block:Text}
  344.  
  345. {block:Photo}
  346.  
  347. <div class="media media-photoset" data-layout="1">
  348. <div
  349. class="media--image--container"
  350. data-width="{PhotoWidth-HighRes}"
  351. data-height="{PhotoHeight-HighRes}"
  352. data-lowres="{PhotoURL-500}"
  353. data-highres="{PhotoURL-HighRes}"
  354. >
  355. <img src="{PhotoURL-HighRes}"
  356. srcset="{PhotoURL-250} 250w,
  357. {PhotoURL-400} 400w,
  358. {PhotoURL-500} 500w,
  359. {PhotoURL-HighRes} 1280w"
  360. sizes="80vw" alt="{PhotoAlt}" class="media--image"/>
  361. </div><!-- media--image--container -->
  362. </div><!-- media-photoset -->
  363.  
  364. {block:Caption}
  365. <div class="caption">{Caption}</div>
  366. {/block:Caption}
  367.  
  368. {/block:Photo}
  369.  
  370. {block:Photoset}
  371.  
  372.  
  373. <div class="media media-photoset" data-layout="{PhotosetLayout}">
  374.  
  375. {block:Photos}
  376.  
  377. <div
  378. class="media--image--container"
  379. data-width="{PhotoWidth-HighRes}"
  380. data-height="{PhotoHeight-HighRes}"
  381. data-lowres="{PhotoURL-500}"
  382. data-highres="{PhotoURL-HighRes}"
  383. >
  384. <img src="{PhotoURL-HighRes}"
  385. srcset="{PhotoURL-250} 250w,
  386. {PhotoURL-400} 400w,
  387. {PhotoURL-500} 500w,
  388. {PhotoURL-HighRes} 1280w"
  389. sizes="80vw" alt="{PhotoAlt}" class="media--image"/>
  390. </div><!-- media--image--container -->
  391.  
  392. {/block:Photos}
  393.  
  394. </div><!-- media-photoset -->
  395.  
  396. {block:Caption}
  397. <div class="caption">{Caption}</div>
  398. {/block:Caption}
  399.  
  400. {/block:Photoset}
  401.  
  402. {block:Quote}
  403.  
  404. <h2 class="quote {Length}">“{Quote}”</h2>
  405. {block:Source}
  406. <p class="source">&mdash;{Source}</p>
  407. {/block:Source}
  408.  
  409. {/block:Quote}
  410.  
  411. {block:Link}
  412. <h2 class="title"><a href="{URL}">{Name} →</a></h2>
  413. {block:Description}
  414. <div class="link-desc">{Description}</div>
  415. {/block:Description}
  416. {/block:Link}
  417.  
  418. {block:Chat}
  419.  
  420. {block:Title}
  421. <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  422. {/block:Title}
  423.  
  424. <div class="chat">
  425. <p>
  426. {block:Lines}
  427. <div class="{Alt} user_{UserNumber}">
  428. {block:Label}
  429. <span class="name">{Label}</span>{/block:Label}
  430. &nbsp;{Line}
  431. </div>
  432. {/block:Lines}
  433. </p>
  434. </div><!-- chat -->
  435.  
  436. {/block:Chat}
  437.  
  438. {block:Video}
  439.  
  440. <div class="media media-video">
  441. <div class="video--container">
  442. {Video-700}
  443. </div>
  444. </div>
  445. {block:Caption}
  446. <div class="caption">{Caption}</div>
  447. {/block:Caption}
  448.  
  449. {/block:Video}
  450.  
  451. {block:Audio}
  452. <div class="media media-audio">
  453. {block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
  454. </div>
  455. {block:Caption}
  456. <div class="caption">{Caption}</div>
  457. {/block:Caption}
  458. {/block:Audio}
  459.  
  460. {block:Answer}
  461. <p>
  462. <span class="asker">{Asker} says:</span> <span class="question">{Question}</span>
  463. </p>
  464. <p class="answer">{Answer}</p>
  465. {/block:Answer}
  466.  
  467. {block:Date}
  468. {block:IndexPage}
  469.  
  470. <p>
  471. {block:IfNotShowPostInfoOnIndexPage}
  472. <a href="{Permalink}" title="{NoteCountWithLabel}">{TimeAgo}</a>
  473. {/block:IfNotShowPostInfoOnIndexPage}
  474.  
  475. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:HasTags}
  476.  
  477.  
  478. {block:IfShowPostInfoOnIndexPage}
  479. <a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}">{NoteCountWithLabel}</a></div>
  480. {/block:IfShowPostInfoOnIndexPage}
  481. </p>
  482.  
  483. {/block:IndexPage}
  484. {/block:Date}
  485.  
  486. </article><!-- post -->
  487.  
  488. {block:PermalinkPage}
  489.  
  490. {block:NoteCount}
  491. {block:PostNotes}{PostNotes}{/block:PostNotes}
  492. {/block:NoteCount}
  493.  
  494. {/block:PermalinkPage}
  495.  
  496. {/block:Posts}
  497.  
  498. {block:Pagination}
  499. <nav class="pagination">
  500.  
  501. {block:PreviousPage}
  502. <a href="{PreviousPage}" class="back">Back</a>
  503. {/block:PreviousPage}
  504.  
  505. {block:NextPage}
  506. <a href="{NextPage}" class="next">Next</a>
  507. {/block:NextPage}
  508.  
  509. </nav>
  510. {/block:Pagination}
  511.  
  512. {block:PermalinkPagination}
  513. <nav class="pagination">
  514. {block:PreviousPost}
  515. <a class="back" href="{PreviousPost}">Previous Post</a>
  516. {/block:PreviousPost}
  517.  
  518. {block:NextPost}
  519. <a class="next" href="{NextPost}">Next Post</a>
  520. {/block:NextPost}
  521. </nav><!-- nav -->
  522. {/block:PermalinkPagination}
  523.  
  524. </main>
  525.  
  526. </div><!-- wrapper -->
  527.  
  528. <script>
  529.  
  530. "use strict";
  531.  
  532. window.addEventListener('load', startup, false);
  533.  
  534. function startup() {
  535. let photosets = document.getElementsByClassName("media-photoset");
  536. for (let i = 0, n = photosets.length; i < n; i++) {
  537. let photoset = photosets[i];
  538. makePhotoset(photoset);
  539. makeLightboxes(photoset);
  540. }
  541. }
  542.  
  543. function makeLightboxes(photoset) {
  544. let image_containers = photoset.getElementsByClassName("media--image--container");
  545. for (let i = 0, n = image_containers.length; i < n; i++) {
  546. let image_container = image_containers[i];
  547. image_container.addEventListener("click", function() {
  548. let current = i + 1;
  549. lightbox(image_containers, current);
  550. });
  551. }
  552. }
  553.  
  554. function lightbox(image_containers, current) {
  555. let lightboxes = [];
  556. for (let i = 0, n = image_containers.length; i < n; i++) {
  557. let image_container = image_containers[i]
  558. let arrayContents = {
  559. "width" : image_container.dataset.width,
  560. "height" : image_container.dataset.height,
  561. "low_res" : image_container.dataset.lowres,
  562. "high_res" : image_container.dataset.highres,
  563. }
  564. lightboxes.push(arrayContents);
  565. }
  566. Tumblr.Lightbox.init(lightboxes, current);
  567.  
  568. }
  569.  
  570. function makePhotoset(photoset) {
  571. var images = photoset.getElementsByClassName("media--image--container");
  572. var layout = photoset.dataset.layout;
  573. for (var i = 0; i < layout.length; i++) {
  574. var cols = layout[i];
  575. var row = document.createElement("div");
  576. row.classList.add("photo-row-" + cols);
  577. row.classList.add("photo-row");
  578.  
  579. for (var j = 0; j < parseInt(cols); j++) {
  580. row.appendChild(images[0]);
  581. }
  582.  
  583. photoset.appendChild(row);
  584. }
  585. }
  586.  
  587. </script>
  588. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!