crpena

no. 19: drama

May 29th, 2020
929
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.87 KB | None | 0 0
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.  
  4. <title>{block:PostSummary}{PostSummary} &mdash; {/block:PostSummary}{block:TagPage}{lang:Posts tagged Tag} &mdash; {/block:TagPage}{block:SearchPage}{lang:Search results for SearchQuery} &mdash; {/block:SearchPage}{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{favicon}">
  7.  
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. {block:Hidden}
  13. <!--Default Varibles-->
  14. <meta name="image:Portrait" content=""/>
  15.  
  16. <meta name="color:Accent" content="#85144b"/>
  17. <meta name="color:Background" content="#fafafa"/>
  18. <meta name="color:Borders" content="#e6e6e6"/>
  19. <meta name="color:Link" content="#0074D9"/>
  20. <meta name="color:Link Border" content="#dddddd"/>
  21. <meta name="color:Selection Background" content="#FFE4B5"/>
  22. <meta name="color:Selection Content" content="#111111"/>
  23. <meta name="color:Scrollbar Thumb" content="#ADFF2F"/>
  24. <meta name="color:Text" content="#111111"/>
  25.  
  26. <meta name="color:Sidebar Link" content="#c2c2c2"/>
  27. <meta name="color:Sidebar Link Accent" content="#001f3f"/>
  28. <meta name="color:Sidebar Link Background" content="#0074D9"/>
  29. <meta name="color:Sidebar Link Hover" content="#FFFFFF"/>
  30.  
  31. <meta name="color:Content" content="#ffffff"/>
  32. <meta name="color:List Icon" content="#111111"/>
  33. <meta name="color:Link Post Content" content="#4682B4"/>
  34. <meta name="color:Tag" content="#85144b"/>
  35. <meta name="color:Text Borders" content="#aaaaaa"/>
  36. <meta name="color:User" content="#0074D9"/>
  37.  
  38. <meta name="if:Show Tumblr Controls On Hover" content="0"/>
  39. <meta name="if:Dark Tumblr Controls" content="0"/>
  40.  
  41. <meta name="select:Font Size" title="13px" content="13"/>
  42. <meta name="select:Font Size" title="14px" content="14"/>
  43.  
  44. <meta name="select:Navigation Style" title="Normal" content="normal"/>
  45. <meta name="select:Navigation Style" title="Dropdown" content="dropdown"/>
  46. <meta name="select:Navigation Style" title="Fixed Dropdown" content="fixed-dropdown"/>
  47. <meta name="select:Navigation Style" title="Right Sided Fixed Dropdown" content="right-dropdown"/>
  48.  
  49. <meta name="select:Post Width" title="300px" content="300"/>
  50. <meta name="select:Post Width" title="325px" content="325"/>
  51. <meta name="select:Post Width" title="350px" content="350"/>
  52. <meta name="select:Post Width" title="400px" content="400"/>
  53. <meta name="select:Post Width" title="450px" content="450"/>
  54. <meta name="select:Post Width" title="500px" content="500"/>
  55. <meta name="select:Post Width" title="540px" content="540"/>
  56.  
  57. <meta name="text:Ask Title" content="Message"/>
  58. <meta name="text:Link One Title" content=""/>
  59. <meta name="text:Link One URL" content=""/>
  60. <meta name="text:Link Two Title" content=""/>
  61. <meta name="text:Link Two URL" content=""/>
  62. <meta name="text:Link Three Title" content=""/>
  63. <meta name="text:Link Three URL" content=""/>
  64. <meta name="text:Link Four Title" content=""/>
  65. <meta name="text:Link Four URL" content=""/>
  66. <meta name="text:Link Five Title" content=""/>
  67. <meta name="text:Link Five URL" content=""/>
  68. <meta name="text:Link Six Title" content=""/>
  69. <meta name="text:Link Six URL" content=""/>
  70. {/block:Hidden}
  71. <!--css-->
  72. <link rel="stylesheet" href="https://dl.dropbox.com/s/ais2flelmwce3se/basics.min.css"><!--font--><link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@1&family=Fira+Code:wght@500&family=Fira+Sans:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet"><!--photosets--><link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/82407v1ovpve5df/style-tumblr-like.css"><!--tooltip--><link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/5y2dfutx9cn0qym/tooltipster.bundle.min.css"/><link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/e6uz21oyjs7m8v4/tooltipster.follower.min.css"/>
  73. </head>
  74.  
  75. <style type="text/css">
  76.  
  77. :root{
  78. --NPF-Image-Spacing:4px;
  79.  
  80. --Accent:{RGBcolor:Accent};
  81. --Selection-Background:{RGBcolor:Selection Background};
  82. --Selection-Content:{RGBcolor:Selection Content};
  83. --Text:{RGBcolor:Text};
  84. --Text-Borders:{RGBcolor:Text Borders};
  85. }
  86.  
  87. /*tumblr controls*/
  88.  
  89. iframe.tmblr-iframe{
  90. top:5px; right:15px;
  91. {block:ifShowTumblrControlsOnHover}
  92. right:0;
  93. padding-right:3em;
  94. opacity:0.0000001;
  95. {/block:ifShowTumblrControlsOnHover}
  96. {block:ifDarkTumblrControls}
  97. filter:contrast(150%) invert(100%);
  98. -webkit-filter:contrast(150%) invert(100%);
  99. {block:ifDarkTumblrControls}}
  100. iframe.tmblr-iframe:hover{
  101. opacity:1!important;
  102. transition:all .3s linear;
  103. -o-transition:all .3s linear;
  104. -moz-transition:all .3s linear;
  105. -webkit-transition:all .3s linear;
  106. }
  107.  
  108. .cc{
  109. display:block;
  110. width:1em;
  111. height:1em;
  112. position:fixed;
  113. z-index:15;
  114. top:15px; right:15px;
  115. color:{color:text};
  116. }
  117.  
  118. /*basics*/
  119.  
  120. body{
  121. font:normal {select:font size}px/normal 'Fira Sans', sans-serif;
  122. color:{color:text};
  123. background:{color:background};
  124. }
  125.  
  126. a{
  127. color:{color:link};
  128. background:
  129. linear-gradient({color:link},{color:link}) 0 100%/0 2px no-repeat,
  130. linear-gradient({color:link border},{color:link border}) 0 100%/100% 2px no-repeat;}
  131. a:hover{background-size:100% 2px, 100% 2px;}
  132.  
  133. ul li:before{
  134. content:'\203A';
  135. color:{color:list icon};
  136. font-size:1em;
  137. }
  138.  
  139. /*scrollba*/
  140.  
  141. ::-webkit-scrollbar {
  142. width:12px;
  143. height:12px;
  144. background-color:transparent;
  145. }
  146.  
  147. ::-webkit-scrollbar-thumb {
  148. background-clip:padding-box;
  149. border-radius:6px;
  150. background-color:{color:scrollbar thumb};
  151. border:4px solid transparent;
  152. }
  153.  
  154. /*content*/
  155.  
  156. main{
  157. width:calc({select:post width}px + 285px);
  158. margin:50px auto;
  159. display:-webkit-flex;
  160. display:flex;
  161. flex-wrap:wrap;
  162. flex-direction:-webkit-row;
  163. flex-direction:row;
  164. justify-content:space-between;
  165. -webkit-flex-align:flex-start;
  166. align-items:flex-start;
  167. }
  168.  
  169. /*sidebar*/
  170.  
  171. aside{
  172. position:relative;
  173. width:215px;
  174. z-index:15;
  175. display:-webkit-flex;
  176. display:flex;
  177. flex-wrap:wrap;
  178. flex-direction:-webkit-row;
  179. flex-direction:row;
  180. justify-content:space-between;
  181. -webkit-flex-align:flex-start;
  182. align-items:flex-start;
  183. }
  184.  
  185. #icon{
  186. width:60px;
  187. height:60px;
  188. padding:5px;
  189. border:1px solid {color:borders};
  190. }
  191.  
  192. #stext{
  193. width:100%;
  194. text-align:justify;
  195. margin-top:25px;
  196. padding-bottom:50px;
  197. }
  198.  
  199. /*navigation*/
  200.  
  201. nav{
  202. width:calc(100% - 87px);
  203. position:relative;
  204. border-left:1px solid {color:borders};
  205. }
  206.  
  207. a.nav-link{
  208. display:block;
  209. margin-bottom:5px;
  210. padding:5px 7px;
  211. border:none;
  212. background:linear-gradient({color:sidebar link background},{color:sidebar link background}) 0 0/0 100% no-repeat;
  213. color:{color:sidebar link};
  214. text-transform:lowercase;}
  215. a.nav-link:hover{
  216. color:{color:sidebar link hover};
  217. background-size:100% 100%;}
  218. a.nav-link:last-of-type{margin-bottom:0}
  219.  
  220. .toggle{
  221. display:block;
  222. margin-top:5px;
  223. padding:5px 7px;
  224. background:linear-gradient({color:sidebar link background},{color:sidebar link background}) 0 0/0 100% no-repeat;
  225. color:{color:sidebar link};
  226. text-transform:lowercase;
  227. transition:linear all .3s;}
  228. .toggle.active{
  229. color:{color:sidebar link hover};
  230. background:linear-gradient({color:sidebar link accent},{color:sidebar link accent}) 0 0/100% 100% no-repeat;}
  231. .toggle:hover{
  232. color:{color:sidebar link hover};
  233. background-size:100% 100%;
  234. cursor:pointer;
  235. transition:linear all .3s;}
  236. .toggle:hover span:after, .toggle.active span:after{
  237. content:url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgb({RGBcolor:sidebar link hover})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  238. transition:linear all .3s;}
  239. .toggle span{
  240. display:inline-block;
  241. position:relative;}
  242. .toggle span:after{
  243. content:url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgb({RGBcolor:sidebar link})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  244. position:absolute;
  245. top:0; right:-19px;
  246. width:14px;
  247. height:14px;
  248. transition:linear all .3s;}
  249.  
  250. #links{
  251. width:100%;
  252. height:auto;
  253. margin-top:5px;
  254. }
  255.  
  256. .normal.toggle, #links.dropdown, #links.fixed-dropdown, #links.right-dropdown{display:none;}
  257.  
  258. /*dropdown*/
  259.  
  260. .dropdown.toggle.active span:after, .fixed-dropdown.toggle.active span:after{
  261. transform:rotate(180deg);
  262. transition:linear all .3s;
  263. }
  264.  
  265. /*fixed dropdown*/
  266.  
  267. #links.fixed-dropdown, #links.right-dropdown{
  268. position:absolute;
  269. z-index:2;
  270. width:100%;
  271. height:auto;
  272. background-color:{color:content};
  273. }
  274.  
  275. /*righ side fixed dropdown*/
  276.  
  277. #links.right-dropdown{
  278. top:calc(100% - 26px); left:100%;
  279. margin:0;
  280. }
  281.  
  282. .right-dropdown.toggle span:after{
  283. transform:rotate(270deg);
  284. transition:linear all .3s;}
  285. .right-dropdown.toggle.active span:after{
  286. transform:rotate(90deg);
  287. transition:linear all .3s;
  288. }
  289.  
  290. /*posts*/
  291.  
  292. section{width:{select:post width}px;}
  293.  
  294. article{
  295. width:100%;
  296. position:relative;
  297. {block:indexpage}
  298. margin-bottom:50px;
  299. {/block:indexpage}}
  300. article:last-of-type{margin-bottom:0;}
  301.  
  302. /*quote*/
  303.  
  304. .post_quote{
  305. display:block;
  306. width:100%;
  307. position:relative;
  308. font-weight:normal;}
  309. .post_quote:before{
  310. content:'\201F';
  311. font-size:3em;
  312. top:0; left:5px;
  313. position:absolute;
  314. }
  315.  
  316. .quote{
  317. display:block;
  318. margin:0 0 0 30px;
  319. padding:2px 0 0 15px;
  320. box-sizing:border-box;
  321. border-left:1px solid {color:text borders};
  322. color:{color:text};
  323. font:400 1.2em/1.4em 'DM Serif Text', serif;
  324. }
  325.  
  326. #s{
  327. display:block;
  328. margin-top:15px;
  329. }
  330.  
  331. /*text and link post*/
  332.  
  333. .title{
  334. display:block;
  335. width:100%;
  336. position:relative;
  337. font-weight:500;
  338. font-size:1.2em;}
  339.  
  340. a.link{
  341. display:block;
  342. width:100%;
  343. padding:15px 15px 0;
  344. box-sizing:border-box;
  345. background-color:{color:content};
  346. background-image:none;
  347. border-bottom:1px solid {color:borders};
  348. -webkit-border-radius:5px 5px 0 0;
  349. border-radius:5px 5px 0 0;
  350. text-align:left;
  351. color:{color:link post content};
  352. font-size:1.2em;}
  353. a.link svg{
  354. display:inline-block;
  355. width:1em;
  356. height:1em;
  357. vertical-align:middle;
  358. margin-right:10px;}
  359. a.link:hover .ed{background-size:100% 2px;}
  360.  
  361. .ed{
  362. display:inline-block;
  363. width:auto;
  364. height:100%;
  365. padding-bottom:10px;
  366. background:linear-gradient({color:link post content},{color:link post content}) 0 100%/1em 2px no-repeat;
  367. transition:all .3s linear;
  368. }
  369.  
  370. .text{
  371. display:block;
  372. margin-top:5px;
  373. text-align:justify;}
  374.  
  375. /*chat*/
  376.  
  377. .chat{
  378. margin:0;
  379. padding:0;
  380. list-style:none;
  381. letter-spacing:.015rem;
  382. text-align:left;}
  383. .chat li:before{display:none;}
  384.  
  385. .l{
  386. margin:0 0 5px 0;
  387. padding:5px;
  388. border-bottom:1px solid {color:borders};}
  389. .l:last-child{margin:0;}
  390.  
  391. .label{
  392. font-weight:500;
  393. margin-right:5px;
  394. color:{color:accent};
  395. }
  396.  
  397. /*answer*/
  398.  
  399. .question{
  400. display:block;
  401. width:100%;
  402. padding:15px 15px 15px 45px;
  403. box-sizing:border-box;
  404. background:{color:borders};
  405. -webkit-border-radius:5px;
  406. border-radius:5px;
  407. position:relative;}
  408. .question:before{
  409. content:url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='rgb({RGBcolor:accent})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-help-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
  410. position:absolute;
  411. top:15px; left:15px;
  412. }
  413.  
  414. .asker{
  415. display:block;
  416. width:100%;
  417. font-weight:500;
  418. margin-bottom:5px;
  419. }
  420.  
  421. .asker-question{
  422. display:block;
  423. width:100%;
  424. text-align:justify;
  425. }
  426.  
  427. .answer{
  428. display:block;
  429. width:100%;
  430. margin-top:10px;
  431. }
  432.  
  433. /*caption*/
  434.  
  435. .caption{
  436. margin:15px 0;
  437. padding:0;
  438. list-style:none;}
  439.  
  440. a.user, .answerer a{
  441. font-weight:500;
  442. color:{color:user};
  443. background:none;
  444. }
  445.  
  446. .user, .answerer{
  447. margin:0;
  448. display:inline;
  449. color:{color:text};
  450. font-weight:500;}
  451. .user.deactivated{
  452. position:relative;
  453. cursor:no-drop;
  454. user-select:none;
  455. -ms-user-select:none;
  456. -moz-user-select:none;
  457. -khtml-user-select:none;
  458. -webkit-user-select:none;
  459. -webkit-touch-callout:none;}
  460. .deactivated:after{
  461. content:'{block:English}Deactivated{/block:English}{block:German}Deaktiviert{/block:German}{block:French}Désactivé{/block:French}{block:Italian}Disattivato{/block:Italian}{block:Japanese}無効化{/block:Japanese}{block:Turkish}Kapatıldı{/block:Turkish}{block:Spanish}Desactivado{/block:Spanish}{block:Russian}Деактивировано{/block:Russian}{block:Polish}deaktywowano{/block:Polish}{block:PortuguesePT}Desativado{/block:PortuguesePT}{block:PortugueseBR}Desativado{/block:PortugueseBR}{block:Dutch}Gedeactiveerd{/block:Dutch}{block:Korean}사용 안 함{/block:Korean}{block:ChineseSimplified}已关闭{/block:ChineseSimplified}{block:ChineseTraditional}已停用{/block:ChineseTraditional}{block:ChineseHK}已停用{/block:ChineseHK}{block:Indonesian}Dinonaktifkan{/block:Indonesian}{block:Hindi}निष्क्रिय{/block:Hindi}';
  462. position:absolute;
  463. display:inline-block;
  464. opacity:.25;
  465. margin:0;
  466. top:0; left:calc(100% + 5px);
  467. font-weight:500;
  468. color:{color:text};
  469. text-transform:lowercase;
  470. transition:opacity .6s;}
  471. .deactivated:hover:after{
  472. opacity:.75;
  473. transition:opacity .6s;}
  474.  
  475. .user-avatar, .answerer-avatar{
  476. display:inline-block;
  477. width:25px;
  478. height:25px;
  479. vertical-align:middle;
  480. margin-right:5px;
  481. border-radius:4px;
  482. -webkit-border-radius:4px;
  483. }
  484.  
  485. /*tags*/
  486.  
  487. .tags{
  488. display:block;
  489. width:100%;
  490. margin-top:10px;
  491. text-align:left;}
  492. .tags a{
  493. display:inline;
  494. margin-right:10px;
  495. background:none;
  496. letter-spacing:.01rem;
  497. font-weight:500;
  498. color:{color:tag};}
  499. .tags a:before{content:'\0023';}
  500. .tags a:hover{color:{color:text};}
  501. .tags a:last-of-type{margin-right:0;}
  502. .tags span{
  503. display:inline-block;
  504. vertical-align:middle;
  505. margin-right:5px;
  506. font-weight:500;}
  507.  
  508. /*permalinks*/
  509.  
  510. .permalink{
  511. display:block;
  512. width:100%;
  513. margin-top:15px;
  514. text-align:left;}
  515. .permalink a{
  516. display:inline;
  517. background:none;
  518. margin-right:10px;
  519. text-transform:lowercase;
  520. color:rgba({RGBcolor:text}, .8);}
  521. .permalink a:hover{color:{color:link};}
  522. .permalink a.reblog:not(.ted):after{content:'{block:English}Reblog{/block:English}{block:German}Rebloggen{/block:German}{block:French}Rebloguer{/block:French}{block:Italian}Reblogga{/block:Italian}{block:Japanese}リブログ{/block:Japanese}{block:Turkish}Yeniden Blogla{/block:Turkish}{block:Spanish}Rebloguear{/block:Spanish}{block:Russian}Реблог{/block:Russian}{block:Polish}Rebloguj{/block:Polish}{block:PortuguesePT}Reblogar{/block:PortuguesePT}{block:PortugueseBR}Reblogar{/block:PortugueseBR}{block:Dutch}Rebloggen{/block:Dutch}{block:Korean}리블로그{/block:Korean}{block:ChineseSimplified}转发{/block:ChineseSimplified}{block:ChineseTraditional}轉格{/block:ChineseTraditional}{block:ChineseHK}轉載{/block:ChineseHK}{block:Indonesian}Reblog{/block:Indonesian}{block:Hindi}रीब्लॉग करेंे{/block:Hindi}';}
  523. .permalink a:last-of-type{margin-right:0;}
  524. .permalink svg{
  525. display:inline-block;
  526. width:1em;
  527. height:1em;
  528. vertical-align:middle;
  529. margin-right:5px;
  530. }
  531.  
  532. /*like button*/
  533.  
  534. a.like-b{
  535. position:relative;
  536. display:inline-block;
  537. overflow:hidden;
  538. vertical-align:middle;
  539. margin-right:10px;}
  540. a.like-b .like_button iframe{
  541. position:absolute;
  542. top:0; left:0; bottom:0; right:0;
  543. z-index:2;
  544. opacity:0.0000001;}
  545. .like-b .liked + svg, .like-b:hover .liked + svg{
  546. fill:{color:text};
  547. color:{color:text};}
  548.  
  549. /*post notes*/
  550.  
  551. .postnotes{
  552. display:block;
  553. width:100%;
  554. margin-top:15px;
  555. text-align:left;}
  556. .postnotes .date{
  557. display:block;
  558. width:100%;
  559. margin-bottom:10px;}
  560. .postnotes .source{
  561. display:inline-block;
  562. width:calc(50% - 5px);
  563. vertical-align:bottom;
  564. margin-right:10px;
  565. padding:10px;
  566. box-sizing:border-box;
  567. background:{color:content};
  568. border:1px solid {color:borders};
  569. overflow:hidden;}
  570. .postnotes .source:last-of-type{margin-right:0;}
  571. .postnotes .source:only-child{width:100%!important;}
  572.  
  573.  
  574. ol.notes{
  575. display:block;
  576. width:100%;
  577. margin:15px 0 0;
  578. padding:0;
  579. list-style-type:none;
  580. font-weight:lighter;}
  581. ol.notes li.note{margin:0 0 10px;}
  582. ol.notes li.note.more_notes_link_container{
  583. width:100%;
  584. padding:0;
  585. margin:15px 0 0 0;}
  586. ol.notes li.note.more_notes_link_container:before{display:none;}
  587. ol.notes li.note a{background:none;}
  588. ol.notes li.note a:first-of-type{
  589. font-weight:500;
  590. color:{color:accent};}
  591. ol.notes li.note .avatar{display:none;}
  592.  
  593. .more_notes_link, .notes_loading{
  594. display:block;
  595. color:{color:link};!important;
  596. font-weight:500!important;
  597. text-align:left!important;
  598. }
  599.  
  600. /*pagination*/
  601.  
  602. footer{
  603. width:100%;
  604. margin-top:auto;
  605. padding-top:50px;}
  606. footer ul{
  607. width:{select:post width}px;
  608. margin-left:285px;
  609. }
  610.  
  611. .pagination{
  612. display:block;
  613. width:100%;
  614. padding:0;
  615. margin:0;
  616. display:-webkit-flex;
  617. display:flex;
  618. flex-wrap:wrap;
  619. flex-direction:-webkit-row;
  620. flex-direction:row;
  621. justify-content:space-around;
  622. -webkit-flex-align:center;
  623. align-items:center;}
  624. .pagination:before{display:none;}
  625. .pagination a{
  626. opacity:.4;
  627. padding:2px 5px;
  628. background:none;
  629. -webkit-border-radius:4px;
  630. border-radius:4px;
  631. color:{color:text};
  632. font-weight:500;}
  633. .pagination a.active{
  634. opacity:1;
  635. background:{color:accent};
  636. color:white;}
  637. .pagination a.active:hover{
  638. background:{color:borders};
  639. color:{color:accent};
  640. }
  641.  
  642. @media screen and (max-width:850px){
  643. main{
  644. width:{select:post width}px;
  645. flex-direction:-webkit-column;
  646. flex-direction:column;}
  647. aside{margin:0 auto;}
  648. section{width:100%;}
  649. footer ul{margin:0;}
  650. }
  651.  
  652. @media screen and (max-width:768px){
  653. main{width:70%;}
  654. }
  655.  
  656. @media screen and (max-width:480px){
  657. main{width:100vw;}
  658. }
  659.  
  660. {CustomCSS}
  661. </style>
  662.  
  663. <body>
  664.  
  665. {block:ifShowTumblrControlsOnHover}<div class="cc" data-feather="more-vertical"></div>{/block:ifShowTumblrControlsOnHover}<main><aside>{block:ifPortraitImage}<img src="{image:portrait}" id="icon"/>{/block:ifPortraitImage}<img src="{favicon}" id="icon" {block:ifPortraitImage}style="display:none;"{/block:ifPortraitImage}/><nav><a class="nav-link" href="/">{lang:Home}</a>{block:AskEnabled}{block:ifAskTitle}<a class="nav-link" href="/ask">{text:ask title}</a>{/block:ifAskTitle}{/block:AskEnabled}<a class="nav-link" href="/archive">{lang:archive}</a><div class="{select:navigation style} toggle"><span>{lang:Navigate}</span></div><div id="links" class="{select:navigation style}">{block:ifLinkOneTitle}<a href="{text:link one url}" class="nav-link">{text:link one title}</a>{/block:ifLinkOneTitle}{block:ifLinkTwoTitle}<a href="{text:link two url}" class="nav-link">{text:link two title}</a>{/block:ifLinkTwoTitle}{block:ifLinkThreeTitle}<a href="{text:link three url}" class="nav-link">{text:link three title}</a>{/block:ifLinkThreeTitle}{block:ifLinkFourTitle}<a href="{text:link four url}" class="nav-link">{text:link four title}</a>{/block:ifLinkFourTitle}{block:ifLinkFiveTitle}<a href="{text:link five url}" class="nav-link">{text:link five title}</a>{/block:ifLinkFiveTitle}{block:ifLinkSixTitle}<a href="{text:link six url}" class="nav-link">{text:link six title}</a>{/block:ifLinkSixTitle}{block:HasPages}{block:Pages}<a class="nav-link" href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}</div></nav><div id="stext">{description}</div></aside></label>
  666.  
  667. <!--posts-->
  668. <section id="entries">{block:TagPage}<article class="post_page"><h2>{lang:Showing posts tagged Tag 2}</h2></article>{/block:TagPage}{block:Posts}<article id="{PostID}" class="post">
  669.  
  670. {block:Quote}<div class="post_quote"><div class="quote">{Quote}</div>{block:Source}<div id="s">{Source}</div>{/block:Source}</div>{/block:Quote}
  671.  
  672. {block:Text}{block:Title}<div class="title">{Title}</div>{/block:Title}{block:RebloggedFrom}{block:Reblogs}<li class="caption">{block:IsActive}<a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {username}</a>{/block:IsActive}{block:IsDeactivated}<div class="user deactivated"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</div>{/block:IsDeactivated}<div class="text">{Body}</div></li>{/block:Reblogs}{/block:RebloggedFrom}{block:NotReblog}<li class="caption">{body}</li>{/block:NotReblog}{/block:Text}
  673.  
  674. {block:Link}<a class="link" href="{URL}" {Target}><span class="ed"><span data-feather="link"></span>{Name}</span></a>{block:Description}{block:NotReblog}<li class="caption">{description}</li>{/block:NotReblog}{/block:Description}{block:RebloggedFrom}{block:Reblogs}{block:Description}<li class="caption">{block:IsActive}<a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {username}</a>{/block:IsActive}{block:IsDeactivated}<div class="user deactivated"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</div>{/block:IsDeactivated}<div class="text">{Body}</div></li>{/block:Description}{/block:Reblogs}{/block:RebloggedFrom}{/block:Link}
  675.  
  676. {block:Chat}{block:Title}<div class="titles">{Title}</div>{/block:Title}<ol class="chat">{block:Lines}<li class="l {Alt}">{block:label}<span class="label">{label}</span>{/block:label}<span class="line">{Line}</span></li>{/block:Lines}</ol>{/block:Chat}
  677.  
  678. {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}" /></a></div>{/block:Photo}
  679.  
  680. {block:Photoset}<div class="photoset" data-layout="{PhotosetLayout}">{block:Photos}<div class="image-container" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="image"/></div>{/block:Photos}</div>{/block:Photoset}
  681.  
  682. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  683.  
  684. {block:Audio}{block:AudioEmbed}<div class="audio-media"><div class="width_fix">{AudioEmbed-500}</div></div>{/block:AudioEmbed}{/block:Audio}
  685.  
  686. {block:Answer}<div class="question"><div class="asker">{lang:Asker asked 2}</div><div class="asker-question">{Question}</div></div>{block:Answerer}<div class="answer"><div class="answerer"><img class="answerer-avatar" src="{AnswererPortraitURL-40}"/>{Answerer}</div><div class="replies">{Answer}</div></div>{/block:Answerer}{block:NotReblog}<li class="caption"><div class="text">{Replies}</div></li>{/block:NotReblog}{block:Reblogs}<li class="caption">{block:IsOriginalEntry}{block:IsActive}<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</a>{/block:IsActive}{block:IsDeactivated}<div class="user deactivated"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</div>{/block:IsDeactivated}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</a>{/block:IsNotOriginalEntry}<div id="text">{Body}</div></li>{/block:Reblogs}{/block:Answer}
  687.  
  688. <!--caption-->
  689. {block:Caption}{block:Reblogs}<li class="caption">{block:IsOriginalEntry}{block:IsActive}<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</a>{/block:IsActive}{block:IsDeactivated}<div class="user deactivated"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</div>{/block:IsDeactivated}{/block:IsOriginalEntry}{block:IsNotOriginalEntry}<a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank"><img class="user-avatar" src="{PortraitURL-64}"/> {Username}</a>{/block:IsNotOriginalEntry}<div id="text">{Body}</div></li>{/block:Reblogs}{block:NotReblog}<li class="caption">{Caption}</li>{/block:NotReblog}<!--{block:ContentSource}<a href="{SourceURL}">Source</a>{/block:ContentSource}-->{/block:Caption}
  690.  
  691. <!--tags-->
  692. {block:HasTags}<div class="tags">{block:PermalinkPage}<span>{lang:Tagged with}:</span>{/block:PermalinkPage}{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  693.  
  694. <!--permalinks-->
  695. {block:indexpage}{block:Date}<div class="permalink"><a href="{permalink}"><span class="time-ago">{TimeStamp}</span></a><a {block:NoteCount}title="{block:English}Reblog{/block:English}{block:German}Rebloggen{/block:German}{block:French}Rebloguer{/block:French}{block:Italian}Reblogga{/block:Italian}{block:Japanese}リブログ{/block:Japanese}{block:Turkish}Yeniden Blogla{/block:Turkish}{block:Spanish}Rebloguear{/block:Spanish}{block:Russian}Реблог{/block:Russian}{block:Polish}Rebloguj{/block:Polish}{block:PortuguesePT}Reblogar{/block:PortuguesePT}{block:PortugueseBR}Reblogar{/block:PortugueseBR}{block:Dutch}Rebloggen{/block:Dutch}{block:Korean}리블로그{/block:Korean}{block:ChineseSimplified}转发{/block:ChineseSimplified}{block:ChineseTraditional}轉格{/block:ChineseTraditional}{block:ChineseHK}轉載{/block:ChineseHK}{block:Indonesian}Reblog{/block:Indonesian}{block:Hindi}रीब्लॉग करेंे{/block:Hindi}"{/block:NoteCount} href="{ReblogURL}" class="reblog {block:NoteCount}ted{/block:NoteCount}" target="_blank"><span data-feather="repeat"></span>{block:NoteCount}<span class="notecount">{NoteCount}</span>&nbsp;{lang:notes}{/block:NoteCount}</a><a class="like-b" href="#">{LikeButton}<span data-feather="heart"></span><span class="b">{block:English}Like{/block:English}{block:German}Liken{/block:German}{block:French}J'aime{/block:French}{block:Italian}Mi piace{/block:Italian}{block:Japanese}スキ{/block:Japanese}{block:Turkish}Beğen{/block:Turkish}{block:Spanish}Me gusta{/block:Spanish}{block:Russian}Нравится{/block:Russian}{block:Polish}Lubię{/block:Polish}{block:PortuguesePT}Gostar{/block:PortuguesePT}{block:PortugueseBR}Curtir{/block:PortugueseBR}{block:Dutch}Vind ik leuk{/block:Dutch}{block:Korean}좋아요{/block:Korean}{block:ChineseSimplified}喜欢{/block:ChineseSimplified}{block:ChineseTraditional}喜歡{/block:ChineseTraditional}{block:ChineseHK}喜歡{/block:ChineseHK}{block:Indonesian}Suka{/block:Indonesian}{block:Hindi}पसंद करें{/block:Hindi}</span></a></div>{/block:Date}{/block:indexpage}
  696. </article>
  697.  
  698. <!--post notes-->
  699. {block:PostNotes}<article class="postnotes"><span class="date">{lang:TimeAgo with NoteCount notes and PlayCount plays}</span>{block:RebloggedFrom}<span class="source">{lang:Reblogged from ReblogParentName 2}</span>{block:ContentSource}<span class="source">{lang:Originally from ReblogRootName 2}</span>{/block:ContentSource}{/block:RebloggedFrom}{PostNotes}</article>{/block:PostNotes}{/block:Posts}</section>
  700.  
  701. <!--pagination-->
  702. <footer><ul>{block:Pagination}<li class="pagination"><a {block:PreviousPage}class="active" href="{PreviousPage}"{/block:PreviousPage}>{lang:Prev}</a><span>{lang:CurrentPage of TotalPages 2}</span><a {block:NextPage}class="next active" href="{NextPage}"{/block:NextPage}>{lang:Next}</a></li>{/block:Pagination}</ul><a href="https://aurthms.tumblr.com" target="_blank"><credit></credit></a></footer></main>
  703.  
  704. <!--scripts-->
  705. <!--jquery--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!--jquery user interface--><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><!--feather icons--><script src="//cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script><!--sticky sidebar--><script src="//dl.dropbox.com/s/mqr2729k8rv27me/sticky-kit.min.js"></script><!--timeAgo plugin--><script type="text/javascript" src="//static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script><!--responsive media--><script src="//dl.dropbox.com/s/2i2ws6svqvaskbo/flexibleFrames.min.js"></script><!--photosets--><script src="//dl.dropbox.com/s/mgolforty03xsu9/functions.js"></script><!--mobile photosets--><script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script><script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.min.js"></script><!--tooltip--><script type="text/javascript" src="//dl.dropbox.com/s/j1pus65jlwp6hbp/tooltipster.bundle.min.js"></script><script type="text/javascript" src="//dl.dropbox.com/s/doi71o13wj4nbcd/tooltipster-follower.min.js"></script>
  706.  
  707. <script>
  708. feather.replace();
  709. $(document).ready(function(){
  710. //sticky sidebar
  711. if ($(window).width() > 850) {
  712. $('aside').stick_in_parent({offset_top:100});
  713. };
  714. $(window).on('resize', function(){
  715. if ($(window).width() < 850) {
  716. $('aside').trigger("sticky_kit:detach");
  717. }
  718. else {$('aside').stick_in_parent({offset_top:100});}
  719. });
  720. //tooltip
  721. $('[title]').tooltipster({
  722. anchor:'top-left',
  723. offset:[14, -18],
  724. plugins:["follower"],
  725. animationDuration:300,
  726. delay:100,
  727. maxWidth:160,
  728. theme:'tooltipster-borderless'
  729. }),
  730. //dropdown
  731. $(".toggle").on("click",function(e){
  732. $("#links").fadeToggle("slow");
  733. $(this).toggleClass("active");
  734. e.preventDefault();
  735. });
  736. //time plugin
  737. $('.time-ago').timeAgo({
  738. time:'short',
  739. spaces: true,
  740. suffix:'ago',
  741. });
  742. //round notes
  743. var $container = $('article');
  744. $container.find('.notecount').each(function(){
  745. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  746. if (n > 999) {
  747. n = Math.floor(n / 100) / 10;
  748. $(this).text(n + 'k');
  749. }
  750. });
  751. //responsive media
  752. function flexFrame() {
  753. $(".caption").each(function () {
  754. $(this).find("iframe").wrap("<div class='iframe-flex'></div>"), flexibleFrames($(".iframe-flex"));
  755. }),
  756. flexibleFrames($(".video"));
  757. }
  758. $(document).ready(flexFrame);
  759. });
  760. //photosets
  761. window.addEventListener('load', startup, false);
  762. function startup() {
  763. let photosets = document.getElementsByClassName("photoset");
  764. for (let i = 0, n = photosets.length; i < n; i++) {
  765. makeLightboxes(photosets[i]);
  766. makePhotoset(photosets[i]);
  767. }
  768. }
  769. npfPhotosets(".post", npfOptions);
  770. </script>
  771.  
  772. </body>
  773. </html>
Advertisement
Add Comment
Please, Sign In to add comment