techmaturgy

violência(not synchronized with tumblr colors/avatar)

Mar 6th, 2018
284
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.87 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!---------------------------------------------------------------------------
  4.  
  5. VIOLÊNCIA by codematurgy. don't claim as your own. feel free to point out any issues or suggest any changes to make it easier to use and browse through. credits for external codes used here:
  6.  
  7. PHOTOSETS by PixelUnion on https://github.com/PixelUnion/Extended-Tumblr-Photoset
  8.  
  9. CAPTIONS and many other tumblr variables by bychloethemes on http://bychloethemes.tumblr.com/post/162818858619/undocumented-documentation-on-the-linked-page-you
  10.  
  11. ---------------------------------------------------------------------------->
  12.  
  13. <html>
  14.  
  15. <head>
  16.  
  17. <title>
  18. {block:TagPage}{lang:Posts tagged Tag} — {/block:TagPage}
  19. {block:SearchPage}{lang:SearchResultCount results for SearchQuery}
  20. {block:NoSearchResults}{lang:No posts containing SearchQuery}{/block:NoSearchResults} — {/block:SearchPage}
  21. {block:PostSummary}{PostSummary} — {/block:PostSummary}
  22. {Title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}
  27. <meta name="description" content="{MetaDescription}"/>
  28. {/block:Description}
  29.  
  30. <meta name="viewport" content="width=device-width"/>
  31.  
  32. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  33.  
  34. <meta name="image:Background" content="">
  35. <meta name="image:Avatar" content="">
  36.  
  37. <meta name="if:Show Captions" content="1">
  38. <meta name="if:Show Tags" content="1">
  39.  
  40. <meta name="select:Margin" content="1" title="Small">
  41. <meta name="select:Margin" content="1.5" title="Medium">
  42. <meta name="select:Margin" content="2" title="Large">
  43.  
  44. <meta name="select:Font Size" content="11" title="Small">
  45. <meta name="select:Font Size" content="12" title="Medium">
  46. <meta name="select:Font Size" content="13" title="Large">
  47.  
  48. <meta name="select:Sidebar Text Alignment" content="mirror_alignment" title="Mirror posts">
  49. <meta name="select:Sidebar Text Alignment" content="center_alignment" title="Centered">
  50.  
  51. <meta name="color:Background" content="#000000">
  52. <meta name="color:Font" content="#8f8f8f">
  53. <meta name="color:Accent" content="#5daffb">
  54.  
  55. <meta name="text:Post Size" content="500">
  56.  
  57. <style>
  58.  
  59. a:hover, .photoset:hover, iframe:hover, button:hover { cursor:pointer!important; } /* for some reason these... clickable things don't always look clickable so heres a fix */
  60.  
  61. body {
  62. margin:0;
  63. font-family:Lucida Console, Consolas, Menlo, monospace;
  64. font-size:{select:Font Size}px; /* if you're looking for a font size different from the ones offered, you can change {select:Font Size} for a number that fits you best. though, please, avoid anything smaller than 11. */
  65. line-height:1.75em;
  66. color:{color:Font};
  67. background-image:url('{image:Background}');
  68. background-color:{color:Background};
  69. background-attachment:fixed;
  70. }
  71.  
  72. /* links */
  73.  
  74. a {
  75. text-decoration:none;
  76. color:{color:Accent};
  77. }
  78.  
  79. a:hover {
  80. text-decoration:underline;
  81. }
  82.  
  83. #sidebar_links a, #searchbox, .caption_body a{block:IndexPage}, .info a{/block:IndexPage} {
  84. color:{color:Accent};
  85. padding:5px;
  86. border:1px solid {color:Accent};
  87. border-radius:3px;
  88. }
  89.  
  90. #sidebar_links a:hover, .caption_body a:hover{block:IndexPage}, .info a:hover{/block:IndexPage}, .pagination a:hover {
  91. text-decoration:none;
  92. color:{color:Background};
  93. background-color:{color:Accent};
  94. }
  95.  
  96. #sidebar_links{block:IndexPage}, .info{/block:IndexPage} {
  97. line-height:calc(2 * 3px/* approximate size of spacing between words
  98. */ + 2 * 1px/* border width
  99. */ + 2 * 5px/* link padding
  100. */ + 1em);
  101. margin:-3px/* approximate size of spacing between words */ 0;
  102. } /* the line-height allows sidebar and post footer links not to go over each other, while the negative margin avoids extra spacing when their wrapper interact with other elements vertically. if you intend to edit the look of links, please edit these numbers(except the 2 multiplying them and the 1em) as well! */
  103.  
  104. a img {
  105. border:none;
  106. outline:none;
  107. } /* these extra lines are for Internet Explorer. */
  108.  
  109. /* lists */
  110.  
  111. ol, ul {
  112. padding-left:calc(1em + 1em + 0.5em);
  113. text-align:left;
  114. }
  115.  
  116. .caption_block ul {
  117. list-style-type:none;
  118. }
  119.  
  120. .caption_block ul i.material-icons {
  121. position:absolute;
  122. margin:0 0 0 -1.5em;
  123. font-size:1em;
  124. line-height:1.75em;
  125. }
  126.  
  127. /* these are sometimes used in text-based blogs as text division. */
  128.  
  129. hr {
  130. margin:1.5em 4em!important;
  131. border:none;
  132. border-top:1px solid currentColor;
  133. }
  134.  
  135. /* BORDERS */
  136.  
  137. #tag_page, #search_page, #empty_page, .pagination a {
  138. color:{color:Accent};
  139. border:1px solid {color:Accent};
  140. }
  141.  
  142. /* UNIVERSAL SENTENCES */
  143.  
  144. .universal_sentences, .tmblr-attribution, ol.notes li.note span.action, .more_notes_link, #searchbox {
  145. text-transform:lowercase;
  146. } /* for aesthetic and easy reading purposes some sentences where lowercased through this theme! these are "pre-made" sentences by tumblr, created to be supported in every language, and therefore are by default capitalized. */
  147.  
  148. /* SCREEN READER SENTENCES */
  149.  
  150. .screen_reader_sentences {
  151. position:absolute;
  152. margin:0 0 0 -9999px;
  153. } /* some things are easily understood for those with good sight, while it is actually quite confusing for those using screen readers. the sentences indicated in the code with this class are invisible on the screen, but will be rendered when using screen readers to make understanding easier. */
  154.  
  155. /* SIDEBAR */
  156.  
  157. aside {
  158. position:fixed;
  159. top:calc(54px * 2);
  160. left:calc(50% - 200px - ({text:Post Size}px / 2) - (54px * {select:Margin}));
  161. width:200px;
  162. }
  163.  
  164. #sidebar_portrait_square, #sidebar_portrait_circle {
  165. display:block;
  166. width:48px;
  167. }
  168.  
  169. #sidebar_portrait_square, #sidebar_portrait_circle, #description, #sidebar_links { margin-bottom:1em; }
  170.  
  171. #description, #sidebar_links { clear:both; }
  172.  
  173. /* searchbar */
  174.  
  175. #searchthis { width:70%; }
  176.  
  177. #searchbutton, #searchbox {
  178. height:calc(5px + 1.7em + 5px);
  179. font-family:inherit;
  180. font-size:1em;
  181. color:{color:Accent};
  182. background-color:transparent;
  183. box-sizing:border-box;
  184. }
  185.  
  186. #searchbutton {
  187. position:absolute;
  188. padding:5px;
  189. border:none;
  190. }
  191.  
  192. #searchbutton:focus { outline:none; }
  193.  
  194. #searchbutton i.material-icons { font-size:1.7em; }
  195.  
  196. #searchbox {
  197. width:100%;
  198. padding-left:calc(5px + 1.7em + 5px);
  199. }
  200.  
  201. #searchbox:focus {
  202. outline:none;
  203. }
  204.  
  205. /* sidebar alignment */
  206.  
  207. aside.mirror_alignment { text-align:right; }
  208. aside.center_alignment { text-align:center; }
  209. #sidebar_portrait_square.mirror_alignment, #sidebar_portrait_circle.mirror_alignment, #searchthis.mirror_alignment { float:right; }
  210. #sidebar_portrait_square.center_alignment, #sidebar_portrait_circle.center_alignment, #searchthis.center_alignment {
  211. margin-left:auto;
  212. margin-right:auto;
  213. }
  214.  
  215. /* CONTENT */
  216.  
  217. section {
  218. position:relative;
  219. top:0;
  220. left:calc(50% - ({text:Post Size}px / 2));
  221. margin-top:calc(54px * {select:Margin});
  222. width:{text:Post Size}px;
  223. max-width:700px;
  224. }
  225.  
  226. article {
  227. position:relative;
  228. width:{text:Post Size}px;
  229. max-width:700px;
  230. margin-bottom:calc(54px * {select:Margin});
  231. }
  232.  
  233. /* gaps */
  234.  
  235. .photo, .photoset, .chat, .video, .audio_wrapper, .title, .caption_block, .post_type2, .info { margin:1em; }
  236.  
  237. .photo, .photoset, .chat, .video, .audio_wrapper, .title, .caption_block, .post_type2, .info {
  238. margin-top:0;
  239. margin-right:0;
  240. margin-left:0;
  241. }
  242.  
  243. .info {
  244. margin-bottom:0;
  245. }
  246.  
  247. /* rounded borders */
  248.  
  249. #sidebar_portrait_square, #tag_page, #search_page, #empty_page, .photo, .photoset, .npf_photoset, .audio_wrapper, .video, .tmblr-full, .pagination a {
  250. overflow:hidden;
  251. -webkit-border-radius:5px;
  252. -moz-border-radius:5px;
  253. border-radius:5px;
  254. }
  255.  
  256. .npf_photoset .tmblr-full {
  257. -webkit-border-radius:0;
  258. -moz-border-radius:0;
  259. border-radius:0;
  260. }
  261.  
  262. #sidebar_portrait_circle {
  263. overflow:hidden;
  264. -webkit-border-radius:100%;
  265. -moz-border-radius:100%;
  266. border-radius:100%;
  267. }
  268.  
  269. .caption_portrait, .caption_block blockquote {
  270. overflow:hidden;
  271. -webkit-border-radius:3px;
  272. -moz-border-radius:3px;
  273. border-radius:3px;
  274. }
  275.  
  276. /* generic post styling? */
  277.  
  278. .title, .caption_block {
  279. }
  280.  
  281. .post_type2 {
  282. }
  283.  
  284. .post_type2, .caption_block { text-align:justify; }
  285.  
  286. .link_title, .quote {
  287. font-size:1.25em;
  288. }
  289.  
  290. /* text posts */
  291.  
  292. .title {
  293. display:block;
  294. width:auto;
  295. text-align:center;
  296. }
  297.  
  298. .title a { font-size:1.4em; }
  299.  
  300. /* photo posts */
  301.  
  302. .photo {
  303. display:block;
  304. width:100%;
  305. }
  306.  
  307. /* ===========================================================================
  308. PXU Photoset Extended Styles
  309. ======================================================================== */
  310.  
  311. .clearit:before, .clearit:after { content: ""; display: table; }
  312. .clearit:after { clear:both; }
  313. .clearit { *zoom:1; }
  314.  
  315. .photo-slideshow { visibility:hidden; height:auto; }
  316.  
  317. .photo-slideshow.processed { visibility:visible; }
  318.  
  319. .photo-slideshow .row {
  320. clear:both;
  321. width:100%;
  322. }
  323.  
  324. .photo-slideshow .pxu-photo {
  325. display:block;
  326. float:left;
  327. margin-bottom:0;
  328. width:100%;
  329. overflow:hidden;
  330. }
  331.  
  332. .photo-slideshow .pxu-photo img { display:block; }
  333.  
  334. .photo-slideshow.processed .pxu-photo img {
  335. width:100%;
  336. height:auto!important;
  337. }
  338.  
  339. .photo-slideshow .pxu-photo:first-child img { margin-left:0; }
  340.  
  341. .photo-slideshow .count-1 { width:100%; }
  342. .photo-slideshow .count-2 { width:50%; }
  343. .photo-slideshow .count-3 { width:33.33%; }
  344. .photo-slideshow .count-4 { width:25%; }
  345. .photo-slideshow .count-5 { width:20%; }
  346. .photo-slideshow .info { display:none; }
  347.  
  348. .photo-data {
  349. position:relative;
  350. float:left;
  351. }
  352.  
  353. /* quote posts */
  354.  
  355. .quote {
  356. margin:0 0.5em 0.5em 0.5em;
  357. text-align:center;
  358. }
  359.  
  360. .quote_source { text-align:right; }
  361.  
  362. /* link posts */
  363.  
  364. .link_icon, .link {
  365. display:inline-block;
  366. vertical-align:top;
  367. }
  368.  
  369. .link_icon { font-size:24px; }
  370.  
  371. .link {
  372. width:calc(100% - 24px - 0.75em);
  373. margin-left:0.75em;
  374. }
  375.  
  376. .post_type2>.excerpt, .post_type2>.subtitle_type2 {
  377. margin:0.5em 0 0 0;
  378. font-size:0.95em;
  379. }
  380.  
  381. /* chat posts */
  382.  
  383. .line { margin:0.75em 0; }
  384. .chat .line:first-child { margin-top:0; }
  385. .chat .line:last-child { margin-bottom:0; }
  386.  
  387. /* audio posts */
  388.  
  389. .tumblr_audio_player {
  390. display:block;
  391. width:100%;
  392. }
  393.  
  394. .spotify_audio_player {
  395. width:100%;
  396. height:80px!important;
  397. margin-bottom:-6px;
  398. }
  399. /* this makes sure the spotify embed audio has that look. if it's bigger than 80px in height it will have the album image underneath the player and real big! */
  400.  
  401. /* video posts */
  402.  
  403. .video>* {
  404. margin:0;
  405. }
  406.  
  407. .vine-embed { display:block; }
  408.  
  409. #youtube_iframe { margin-bottom:-7px; }
  410.  
  411. .tumblr_video_container {
  412. width:auto!important;
  413. height:auto!important;
  414. }
  415.  
  416. iframe.tumblr_video_iframe { max-height:540px!important; } /* tumblr video max-height */
  417.  
  418. .tmblr-full>video {
  419. width:100%;
  420. height:100%;
  421. }
  422.  
  423. /* ask posts */
  424.  
  425. .ask_icon, .answer_icon { color:{color:Accent}; }
  426.  
  427. .ask_icon, .ask, .answer_icon, .answer {
  428. display:inline-block;
  429. vertical-align:top;
  430. }
  431.  
  432. .ask, .answer {
  433. width:calc(100% - 24px - 0.75em);
  434. margin-left:0.75em;
  435. margin-top:calc((24px / 2) - (1em / 2));
  436. }
  437.  
  438. .ask { margin-bottom:1em; }
  439.  
  440. .asker, .answerer { margin-top:-0.375em; }
  441.  
  442. .asker { margin-bottom:0.75em; }
  443.  
  444. /* captions */
  445.  
  446. .captions {
  447. {block:IfNotShowCaptions}
  448. {block:IndexPage}
  449. display:none;
  450. {/block:IndexPage}
  451. {/block:IfNotShowCaptions}
  452. }
  453.  
  454. .caption_block * { margin:1em 0; }
  455.  
  456. .caption_icon {
  457. margin:0 0.75em 0 0;
  458. font-size:16px;
  459. vertical-align:middle;
  460. }
  461.  
  462. .caption_block blockquote {
  463. margin:1em;
  464. padding:1em;
  465. border:1px solid currentColor;
  466. }
  467.  
  468. .caption_block blockquote *:first-child, .caption_block *:first-child { margin-top:0; }
  469. .caption_block blockquote *:last-child, .caption_block *:last-child { margin-bottom:0; }
  470.  
  471. /* caption images */
  472.  
  473. .caption_block img { max-width:100%; }
  474.  
  475. .tmblr-full img {
  476. display:block;
  477. width:100%;
  478. max-width:100%;
  479. margin:0;
  480. height:auto;
  481. }
  482.  
  483. .tmblr-full>.tmblr-attribution {
  484. margin:0!important;
  485. text-align:left;
  486. line-height:1em!important;
  487. padding:0.75em;
  488. color:{color:Background};
  489. background-color:{color:Accent};
  490. } /* this it that "originally posted by x" thing under caption pics */
  491.  
  492. .tmblr-full>.tmblr-attribution a {
  493. color:currentColor;
  494. border:0;
  495. padding:0;
  496. white-space:initial;
  497. }
  498.  
  499. .tmblr-attribution>i.material-icons {
  500. float:right;
  501. font-size:inherit!important;
  502. margin:0!important;
  503. }
  504.  
  505. /* submit and ask pages */
  506.  
  507. #ask_form, #submit_form {
  508. display:block;
  509. }
  510.  
  511. /* INFO */
  512.  
  513. /* tags */
  514.  
  515. .tags {
  516. {block:IfNotShowTags}
  517. {block:IndexPage}
  518. display:none;
  519. {/block:IndexPage}
  520. {/block:IfNotShowTags}
  521. }
  522.  
  523. .tags a:after{
  524. {block:PermalinkPage}
  525. content:",";
  526. {/block:PermalinkPage}
  527. }
  528.  
  529. .tags a:last-child:after {
  530. {block:PermalinkPage}
  531. content:"";
  532. {/block:PermalinkPage}
  533. }
  534.  
  535. /* PERMALINK */
  536.  
  537. ol.notes {
  538. list-style:none;
  539. margin:1em 0 0 0!important;
  540. padding:0;
  541. }
  542.  
  543. ol.notes li.note { margin-top:10px; }
  544.  
  545. ol.notes li.note a.avatar_frame { display:none; }
  546.  
  547. ol.notes li.note .notes_icon, ol.notes li.note span.action {
  548. display:inline-block;
  549. vertical-align:top;
  550. }
  551.  
  552. ol.notes li.note .notes_icon {
  553. font-size:16px;
  554. line-height:inherit;
  555. margin-top:1px;
  556. }
  557.  
  558. ol.notes li.note span.action {
  559. width:calc(100% - 16px - 0.5em);
  560. margin-left:0.5em;
  561. }
  562.  
  563. ol.notes blockquote { margin:0.75em 0 0 calc(16px + 0.5em); }
  564.  
  565. ol.notes blockquote p { margin:0; }
  566.  
  567. /* SPECIAL PAGES */
  568.  
  569. #tag_page, #search_page, #empty_page {
  570. margin:0 54px calc(54px * {select:Margin}) 54px;
  571. padding:0.5em;
  572. text-align:center;
  573. }
  574.  
  575. #tag_page a { color:inherit; }
  576.  
  577. /* PAGINATION */
  578.  
  579. .pagination {
  580. clear:both;
  581. margin:calc(54px * {select:Margin}) 0;
  582. }
  583.  
  584. .pagination a { padding:0.5em; }
  585.  
  586. .pagination a .pagination_text, .pagination a .pagination_icon {
  587. display:inline-block;
  588. vertical-align:middle;
  589. }
  590.  
  591. .pagination a .pagination_text {
  592. width:calc(100% - 1.25em - 1em);
  593. text-align:center;
  594. }
  595.  
  596. .pagination a .pagination_icon {
  597. font-size:1.25em;
  598. line-height:inherit;
  599. }
  600.  
  601. .pagination #new, .pagination #old {
  602. box-sizing:border-box;
  603. max-width:calc(50% - 0.75em);
  604. }
  605.  
  606. .pagination #new { float:left; }
  607. .pagination #old { float:right; }
  608.  
  609. .pagination #new .pagination_text, .pagination #old .pagination_text { margin:0 0.5em; }
  610.  
  611. /* MOBILE VERSION */
  612.  
  613. @media (max-width: 800px) {
  614. body { font-size:calc({select:Font Size}px + 1px); }
  615.  
  616. aside {
  617. position:relative;
  618. top:0;
  619. left:0;
  620. width:calc(100% - (3em * 2));
  621. margin:3em;
  622. }
  623.  
  624. #searchthis { width:100%; }
  625.  
  626. aside.mirror_alignment { text-align:center; }
  627. #sidebar_portrait_square.mirror_alignment, #sidebar_portrait_circle.mirror_alignment, #searchthis.mirror_alignment {
  628. float:none;
  629. margin-left:auto;
  630. margin-right:auto;
  631. }
  632.  
  633. section {
  634. top:0;
  635. left:0;
  636. width:calc(100% - (1.5em * 2));
  637. max-width:calc(100% - (1.5em * 2));
  638. }
  639.  
  640. section, .pagination { margin:1.5em; }
  641.  
  642. .pagination {
  643. margin-top:0;
  644. margin-bottom:3em;
  645. }
  646.  
  647. .pagination #new, .pagination #old {
  648. max-width:calc(50% - 1.5em);
  649. }
  650.  
  651. #tag_page, #search_page, #empty_page { margin:1.5em; }
  652.  
  653. article {
  654. width:100%;
  655. max-width:100%;
  656. }
  657.  
  658. aside, article { margin-bottom:5em; }
  659. }
  660.  
  661. {CustomCSS}
  662. </style>
  663.  
  664. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  665.  
  666. </head>
  667.  
  668. <body>
  669.  
  670. <!-- sidebar -->
  671. <aside class="{select:Sidebar Text Alignment}">
  672. {block:ShowAvatar}
  673. <a href="{BlogURL}" aria-hidden="true"><img src="{image:Avatar}" class="{select:Sidebar Text Alignment}" id="sidebar_portrait_{AvatarShape}"/></a>
  674. {/block:ShowAvatar}
  675.  
  676. {block:Description}
  677. <span class="screen_reader_sentences">{lang:About}</span>
  678. <div id="description">{Description}</div>
  679. {/block:Description}
  680.  
  681. <nav id="sidebar_links">
  682. <a href="{BlogURL}" class="universal_sentences">{lang:Home}</a>
  683. <a href="{BlogURL}archive" class="universal_sentences">{lang:Archive}</a>
  684. {block:AskEnabled}
  685. <a href="{BlogURL}ask">{AskLabel}</a>
  686. {/block:AskEnabled}
  687. {block:SubmissionsEnabled}
  688. <a href="{BlogURL}submit">{SubmitLabel}</a>
  689. {/block:SubmissionsEnabled}
  690. {block:HasPages}{block:Pages}
  691. <a href="{URL}">{Label}</a>
  692. {/block:Pages}{/block:HasPages}
  693. </nav>
  694.  
  695. <form action="/search" class="{select:Sidebar Text Alignment}" id="searchthis" method="get">
  696. <button id="searchbutton" type="submit" value="Go"><i class="material-icons">search</i></button><!--
  697. --><input id="searchbox" name="q" onblur="if(this.value==&apos;&apos;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&apos;&apos;;" type="text" value="{lang:Search}" vinput=""/>
  698. </form>
  699.  
  700. <div style="clear:both;"/>
  701.  
  702. </aside>
  703.  
  704. <section>
  705.  
  706. {block:TagPage}
  707. <!-- tag page header -->
  708. <div id="tag_page" class="universal_sentences">
  709. {lang:Posts tagged Tag 3}
  710. </div>{/block:TagPage}
  711.  
  712. {block:SearchPage}
  713. <!-- search result page header -->
  714. <div id="search_page" class="universal_sentences">
  715. {lang:SearchResultCount results for SearchQuery}
  716. {block:NoSearchResults}{lang:No posts containing SearchQuery}{/block:NoSearchResults}
  717. </div>{/block:SearchPage}
  718.  
  719. {block:NoPosts}
  720. <!-- empty blog header -->
  721. <div id="empty_page" class="universal_sentences">
  722. {lang:This Tumblr hasnt made any posts}
  723. </div>{/block:NoPosts}
  724.  
  725. <span class="screen_reader_sentences"{block:NoPosts} aria-hidden="true"{/block:NoPosts}>{lang:Posts}</span>
  726.  
  727. {block:Posts}
  728.  
  729. <!-- post -->
  730. <article>
  731.  
  732. {block:Text}
  733. <span class="screen_reader_sentences">{lang:Text post}</span>
  734.  
  735. {block:Title} <div class="title"><a href="{Permalink}">{Title}</a></div> {/block:Title}
  736. {block:NotReblog}
  737. <div class="caption_block">
  738. <div class="caption_body">
  739. {Body}
  740. </div>
  741. </div>
  742. {/block:NotReblog}
  743. {block:RebloggedFrom}
  744. {block:Reblogs}
  745. <div class="caption_block">
  746. <div class="caption_header">
  747. {block:IsActive}
  748. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  749. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  750. {/block:IsActive}
  751. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  752. {block:IsActive}
  753. {block:HasPermalink}</a>{/block:HasPermalink}
  754. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  755. {/block:IsActive}
  756. </div>
  757. <div class="caption_body">
  758. {Body}
  759. </div>
  760. </div>
  761. {/block:Reblogs}
  762. {/block:RebloggedFrom}
  763. {/block:Text}
  764.  
  765. {block:Photo}
  766. <span class="screen_reader_sentences">{lang:Photo post}</span>
  767.  
  768. {LinkOpenTag}
  769. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="photo"/>
  770. {LinkCloseTag}
  771. {block:Caption}
  772. {block:NotReblog}
  773. <div class="caption_block captions">
  774. <div class="caption_body">
  775. {Caption}
  776. </div>
  777. </div>
  778. {/block:NotReblog}
  779. {block:RebloggedFrom}
  780. {block:Reblogs}
  781. <div class="caption_block captions">
  782. <div class="caption_header">
  783. {block:IsActive}
  784. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  785. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  786. {/block:IsActive}
  787. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  788. {block:IsActive}
  789. {block:HasPermalink}</a>{/block:HasPermalink}
  790. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  791. {/block:IsActive}
  792. </div>
  793. <div class="caption_body">
  794. {Body}
  795. </div>
  796. </div>
  797. {/block:Reblogs}
  798. {/block:RebloggedFrom}
  799. {/block:Caption}
  800. {/block:Photo}
  801.  
  802. {block:Photoset}
  803. <span class="screen_reader_sentences">{lang:Photoset post}</span>
  804.  
  805. <div class="photoset">
  806. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  807. {block:Photos}<div class="photo-data">
  808. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  809. <div class="pxu-photo"><img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  810. </a>
  811. </div>{/block:Photos}
  812. </div>
  813. </div>
  814. {block:Caption}
  815. {block:NotReblog}
  816. <div class="caption_block captions">
  817. <div class="caption_body">
  818. {Caption}
  819. </div>
  820. </div>
  821. {/block:NotReblog}
  822. {block:RebloggedFrom}
  823. {block:Reblogs}
  824. <div class="caption_block captions">
  825. <div class="caption_header">
  826. {block:IsActive}
  827. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  828. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  829. {/block:IsActive}
  830. <i class="material-icons caption_icon">person</i><span class="caption_username">{Username}</span>
  831. {block:IsActive}
  832. {block:HasPermalink}</a>{/block:HasPermalink}
  833. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  834. {/block:IsActive}
  835. </div>
  836. <div class="caption_body">
  837. {Body}
  838. </div>
  839. </div>
  840. {/block:Reblogs}
  841. {/block:RebloggedFrom}
  842. {/block:Caption}
  843. {/block:Photoset}
  844.  
  845. {block:Quote}
  846. <span class="screen_reader_sentences">{lang:Quote post}</span>
  847.  
  848. <div class="post_type2">
  849. <div class="quote"><a href="{Permalink}">{Quote}</a></div>
  850. {block:Source}<div class="quote_source">{Source}</div>{/block:Source}
  851. </div>
  852. {/block:Quote}
  853.  
  854. {block:Link}
  855. <span class="screen_reader_sentences">{lang:Link post}</span>
  856.  
  857. <div class="post_type2">
  858. <a href="{URL}">
  859. <i class="material-icons link_icon">link</i><!--
  860. --><div class="link">
  861. <div class="link_title">{Name}</div>
  862. {block:Host}<div class="host">{Host}</div>{/block:Host}
  863. </div>
  864. </a>
  865. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  866. </div>
  867. {block:Description}
  868. {block:NotReblog}
  869. <div class="caption_block captions">
  870. <div class="caption_body">
  871. {Description}
  872. </div>
  873. </div>
  874. {/block:NotReblog}
  875. {block:RebloggedFrom}
  876. {block:Reblogs}
  877. <div class="caption_block captions">
  878. <div class="caption_header">
  879. {block:IsActive}
  880. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  881. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  882. {/block:IsActive}
  883. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  884. {block:IsActive}
  885. {block:HasPermalink}</a>{/block:HasPermalink}
  886. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  887. {/block:IsActive}
  888. </div>
  889. <div class="caption_body">
  890. {Body}
  891. </div>
  892. </div>
  893. {/block:Reblogs}
  894. {/block:RebloggedFrom}
  895. {/block:Description}
  896. {/block:Link}
  897.  
  898. {block:Chat}
  899. <span class="screen_reader_sentences">{lang:Chat post}</span>
  900.  
  901. {block:Title} <div class="title"><a href="{Permalink}">{Title}</a></div> {/block:Title}
  902. <div class="chat">
  903. {block:Lines}<div class="line">
  904. {block:Label} <b class="label">{Label}</b> {/block:Label} {Line}
  905. </div>{/block:Lines}
  906. </div>
  907. {/block:Chat}
  908.  
  909. {block:Audio}
  910. <span class="screen_reader_sentences">{lang:Audio post}</span>
  911.  
  912. <div class="audio_wrapper">
  913. {block:AudioEmbed} {AudioEmbed} {/block:AudioEmbed}
  914. </div>
  915. {block:Caption}
  916. {block:NotReblog}
  917. <div class="caption_block captions">
  918. <div class="caption_body">
  919. {Caption}
  920. </div>
  921. </div>
  922. {/block:NotReblog}
  923. {block:RebloggedFrom}
  924. {block:Reblogs}
  925. <div class="caption_block captions">
  926. <div class="caption_header">
  927. {block:IsActive}
  928. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  929. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  930. {/block:IsActive}
  931. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  932. {block:IsActive}
  933. {block:HasPermalink}</a>{/block:HasPermalink}
  934. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  935. {/block:IsActive}
  936. </div>
  937. <div class="caption_body">
  938. {Body}
  939. </div>
  940. </div>
  941. {/block:Reblogs}
  942. {/block:RebloggedFrom}
  943. {/block:Caption}
  944. {/block:Audio}
  945.  
  946. {block:Video}
  947. <span class="screen_reader_sentences">{lang:Video post}</span>
  948.  
  949. <div class="video">{Video-700}</div>
  950. {block:Caption}
  951. {block:NotReblog}
  952. <div class="caption_block captions">
  953. <div class="caption_body">
  954. {Caption}
  955. </div>
  956. </div>
  957. {/block:NotReblog}
  958. {block:RebloggedFrom}
  959. {block:Reblogs}
  960. <div class="caption_block captions">
  961. <div class="caption_header">
  962. {block:IsActive}
  963. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  964. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  965. {/block:IsActive}
  966. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  967. {block:IsActive}
  968. {block:HasPermalink}</a>{/block:HasPermalink}
  969. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  970. {/block:IsActive}
  971. </div>
  972. <div class="caption_body">
  973. {Body}
  974. </div>
  975. </div>
  976. {/block:Reblogs}
  977. {/block:RebloggedFrom}
  978. {/block:Caption}
  979. {/block:Video}
  980.  
  981. {block:Answer}
  982. <div class="post_type2">
  983. <i class="material-icons ask_icon" aria-hidden="true">help</i><!--
  984. --><div class="ask"> <div class="asker">{lang:Asker asked 2}</div> {Question} </div>
  985. {block:Answerer}
  986. <i class="material-icons answer_icon" aria-hidden="true">reply</i><!--
  987. --><div class="answer"> <div class="answerer"> {Answerer} </div> </div>
  988. {/block:Answerer}
  989. </div>
  990. {block:Answerer}
  991. <div class="caption_block">
  992. <div class="caption_body">
  993. {Answer}
  994. </div>
  995. </div>
  996. {/block:Answerer}
  997. {block:NotReblog}
  998. <div class="caption_block">
  999. <div class="caption_body">
  1000. {Replies}
  1001. </div>
  1002. </div>
  1003. {/block:NotReblog}
  1004. {block:RebloggedFrom}
  1005. {block:Reblogs}
  1006. <div class="caption_block captions">
  1007. <div class="caption_header">
  1008. {block:IsActive}
  1009. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}
  1010. {block:HasNoPermalink}<a href="https://www.{Username}.tumblr.com">{/block:HasNoPermalink}
  1011. {/block:IsActive}
  1012. <i class="material-icons caption_icon" aria-hidden="true">person</i><span class="caption_username">{Username}</span>
  1013. {block:IsActive}
  1014. {block:HasPermalink}</a>{/block:HasPermalink}
  1015. {block:HasNoPermalink}</a>{/block:HasNoPermalink}
  1016. {/block:IsActive}
  1017. </div>
  1018. <div class="caption_body">
  1019. {Body}
  1020. </div>
  1021. </div>
  1022. {/block:Reblogs}
  1023. {/block:RebloggedFrom}
  1024. {/block:Answer}
  1025.  
  1026. {block:Date}
  1027. <!-- permalink -->
  1028. <div class="info">
  1029.  
  1030. {block:IndexPage}
  1031. <a href="{Permalink}">
  1032. <span class="screen_reader_sentences">{lang:Permalink for this post}</span><!--
  1033. --><span class="universal_sentences" aria-hidden="true">{TimeAgo}</span></a>
  1034. {/block:IndexPage}
  1035.  
  1036. {block:PermalinkPage}
  1037. <span class="universal_sentences">
  1038. {block:NotReblog}{lang:Posted TimeAgo}{/block:NotReblog}
  1039. {block:RebloggedFrom}{lang:Reblogged TimeAgo from ReblogParentName 2}{/block:RebloggedFrom}, {NoteCountWithLabel}
  1040.  
  1041. {block:RebloggedFrom}
  1042. <br>{lang:Originally from ReblogRootName 2}
  1043. {/block:RebloggedFrom}
  1044.  
  1045. {block:ContentSource}
  1046. <br>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a>
  1047. {/block:ContentSource}
  1048. </span>
  1049. {/block:PermalinkPage}
  1050.  
  1051. {block:HasTags}<span class="tags">
  1052. {block:PermalinkPage}<br>{/block:PermalinkPage}
  1053. <span class="universal_sentences{block:IndexPage} screen_reader_sentences{/block:IndexPage}">
  1054. {lang:Tagged with}:
  1055. </span>
  1056. {block:Tags}<a href="{TagURL}"> {Tag}</a> {/block:Tags}
  1057. </span>{/block:HasTags}
  1058.  
  1059. </div>
  1060.  
  1061. {block:PermalinkPage}{block:PostNotes}
  1062. <span class="screen_reader_sentences">{lang:View notes for this post}</span>
  1063. {PostNotes}
  1064. {/block:PostNotes}{/block:PermalinkPage}
  1065.  
  1066. {/block:Date}
  1067.  
  1068. </article>
  1069.  
  1070. {/block:Posts}
  1071.  
  1072. {block:Pagination}
  1073. <!-- main page pagination -->
  1074. <nav class="pagination universal_sentences">
  1075.  
  1076. {block:PreviousPage}<a href="{PreviousPage}" id="new">
  1077. <i class="material-icons pagination_icon" aria-hidden="true">chevron_left</i><!--
  1078. --><div class="pagination_text"><span aria-hidden="true">{lang:Newer}</span><!--
  1079. --><span class="screen_reader_sentences">{lang:Newer posts}</span></div>
  1080. </a>{/block:PreviousPage}
  1081. {block:NextPage}<a href="{NextPage}" id="old">
  1082. <div class="pagination_text"><span aria-hidden="true">{lang:Older}</span><!--
  1083. --><span class="screen_reader_sentences">{lang:Older posts}</span></div><!--
  1084. --><i class="material-icons pagination_icon" aria-hidden="true">chevron_right</i>
  1085. </a>{/block:NextPage}
  1086. <div style="clear:both;"/>
  1087.  
  1088. </nav>
  1089. {/block:Pagination}
  1090.  
  1091. {block:PermalinkPagination}
  1092. <!-- permalink pagination -->
  1093. <nav class="pagination universal_sentences">
  1094.  
  1095. {block:NextPost}<a href="{NextPost}" id="new">
  1096. <i class="material-icons pagination_icon" aria-hidden="true">chevron_left</i><!--
  1097. --><div class="pagination_text">{lang:Next post}</div>
  1098. </a>{/block:NextPost}
  1099. {block:PreviousPost}<a href="{PreviousPost}" id="old">
  1100. <div class="pagination_text">{lang:Previous post}</div><!--
  1101. --><i class="material-icons pagination_icon" aria-hidden="true">chevron_right</i>
  1102. </a>{/block:PreviousPost}
  1103. <div style="clear:both;"/>
  1104.  
  1105. </nav>
  1106. {/block:PermalinkPagination}
  1107.  
  1108. </section>
  1109.  
  1110. <!-- PHOTOSETS by PixelUnion on https://github.com/PixelUnion/Extended-Tumblr-Photoset -->
  1111. <script type="text/javascript" src="https://static.tumblr.com/xkippcr/qe4p593ag/pxuphotoset.js"></script>
  1112.  
  1113. <script type="text/javascript">
  1114. $('.photo-slideshow').pxuPhotoset({
  1115. 'lightbox' : true,
  1116. 'highRes' : true,
  1117. 'rounded' : false,
  1118. 'exif' : true,
  1119. 'captions' : true,
  1120. 'gutter' : '2px',
  1121. 'photoset' : '.photo-slideshow',
  1122. 'photoWrap' : '.photo-data',
  1123. 'photo' : '.pxu-photo'
  1124. }, function() {
  1125. // callback
  1126. });
  1127. </script>
  1128.  
  1129. <script>
  1130. var video = document.querySelectorAll("article figure > video");
  1131. for (i = 0; i < video.length; i++) {
  1132. if (video[i].parentNode.className === null || video[i].parentNode.className !== null && !video[i].parentNode.className.match(/tmblr-full+/g)) {
  1133. video[i].parentNode.className += " tmblr-full";
  1134. }
  1135. }
  1136. </script>
  1137.  
  1138. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1139. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css"/>
  1140.  
  1141. <script>
  1142. npfPhotosets("article", {
  1143. rowClass:"npf_row",
  1144. imageContainerClass:"tmblr-full",
  1145. generatedPhotosetContainerClass:"npf_photoset",
  1146. imageClass:"npf_image",
  1147. includeSingleRowImagesInPhotosets: true,
  1148. includeCommonPhotosets: true,
  1149. insertGalleryIndicator: false,
  1150. galleryIndicatorClass: "npf_gallery_indicator",
  1151. galleryIndicatorContent: "<img src='image_url'>",
  1152. photosetMargins:"2"
  1153. });
  1154. </script>
  1155.  
  1156. <script>
  1157. function videoResizing() {
  1158. $(".tmblr-embed").addClass("video");
  1159. function videoActualResize() {
  1160. $(".video").each(function() {
  1161. var originalVideoWidth = $(this).find("iframe").width();
  1162. var originalVideoHeight = $(this).find("iframe").height();
  1163. videoWidth = $(this).width();
  1164. var videoProportion = videoWidth / originalVideoWidth;
  1165. var videoHeight = originalVideoHeight * videoProportion;
  1166.  
  1167. $(this).find("iframe").attr("width", videoWidth);
  1168. $(this).find("iframe").attr("height", videoHeight);
  1169. });
  1170. }
  1171. videoActualResize();
  1172. $(window).resize(function(){
  1173. videoActualResize();
  1174. });
  1175. }
  1176. videoResizing();
  1177. </script>
  1178.  
  1179. <script>
  1180. function themeSpecifics() {
  1181. // this adds the arrows beside your post list itens.
  1182. $(".caption_block ul li").before("<i class='material-icons'>chevron_right</i>");
  1183.  
  1184. // this adds the arrow beside attributions in caption pics.
  1185. $(".tmblr-attribution>a").after("<i class='material-icons'>chevron_right</i>");
  1186.  
  1187. // this adds the aria-hidden=true attribute to avoid weird, unnecessary things showing up on screen readers.
  1188. $("i.material-icons, ol.notes li.note a.avatar_frame, ol.notes li.note img.avatar").attr("aria-hidden", "true");
  1189. }
  1190. themeSpecifics();
  1191.  
  1192. // this is also theme specific but i'm kinda dumb
  1193. // this adds icons beside post notes depending on the action performed.
  1194. function notesIcons() {
  1195. $("ol.notes li.note").each(function() {
  1196. if ( $(this).find("i.material-icons").length ) {
  1197. } else {
  1198. if ( $(this).hasClass("reblog") ) {
  1199. if ( $(this).hasClass("original_post") ) {
  1200. $(this).find("span.action").before("<i class='material-icons notes_icon'>person</i>");
  1201. } else {
  1202. $(this).find("span.action").before("<i class='material-icons notes_icon'>loop</i>");
  1203. }
  1204. } else if ( $(this).hasClass("like") ) {
  1205. $(this).find("span.action").before("<i class='material-icons notes_icon'>favorite_border</i>");
  1206. } else if ( $(this).hasClass("reply") ) {
  1207. $(this).find("span.action").before("<i class='material-icons notes_icon'>forum</i>");
  1208. }
  1209. }
  1210. });
  1211. };
  1212.  
  1213. function tumblrNotesInserted() {
  1214. notesIcons();
  1215. };
  1216.  
  1217. $(document).ready(function(){
  1218. tumblrNotesInserted();
  1219. });
  1220. </script>
  1221.  
  1222. </body>
  1223.  
  1224. </html>
Advertisement
Add Comment
Please, Sign In to add comment