API tools faq
paste
Advertisement
hermionemessi

Theme 16

hermionemessi
Feb 22nd, 2019 (edited)
3,061
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 125.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--THEME 16 Eudamia by antoniosvivaldi / athenathms
  4.  
  5. antoniosvivaldi © 2019
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <title>{Title}</title>
  23.  
  24. {block:Description}
  25. <meta name="description" content="{MetaDescription}"/>
  26. {/block:Description}
  27.  
  28. <meta name="image:header" content="{HeaderImage}">
  29.  
  30. <meta name="image:hover info" content="https://static.tumblr.com/2dadf3d48a5cbf89fab2d52ea9a138e3/xbvpdcx/nN5oavgwi/tumblr_static_8nqqooe762skos0ks0s0soosw.jpg">
  31.  
  32. <meta name="image:FAQ background" content="{HeaderImage}">
  33.  
  34. <meta name="color:accent"content="#FA7268">
  35. <meta name="color:highlight"content="#FA7268">
  36.  
  37. <meta name="if:unnested captions" content="">
  38. <meta name="if:manual load"content="">
  39. <meta name="if:alternating theme"content="">
  40. <meta name="if:showblogroll"content="">
  41.  
  42. <meta name="select:theme layout"content="singlecol"title="Default">
  43. <meta name="select:theme layout"content="multicol"title="Grid">
  44.  
  45. <meta name="select:theme colour"content="day-mode"title="Light">
  46. <meta name="select:theme colour"content="night-mode"title="Dark">
  47. <meta name="select:theme colour"content=""title="Auto (for alternating theme)">
  48.  
  49.  
  50. <meta name="select:body font" content="Fira Sans" title="Fira Sans">
  51. <meta name="select:body font" content="Open Sans" title="Open Sans">
  52. <meta name="select:body font" content="Karla" title="Karla">
  53. <meta name="select:body font" content="Source Sans Pro" title="Source Sans Pro">
  54.  
  55. <meta name="select:heading font" content="Playfair Display" title="Playfair Display">
  56. <meta name="select:heading font" content="Elsie" title="Elsie">
  57. <meta name="select:heading font" content="Unna" title="Unna">
  58. <meta name="select:heading font" content="Libre Baskerville" title="Libre Baskerville">
  59.  
  60. <meta name="select:font size" content="18px" title="18px">
  61. <meta name="select:font size" content="16px" title="16px">
  62. <meta name="select:font size" content="14px" title="14px">
  63. <meta name="select:font size" content="12px" title="12px">
  64. <meta name="select:font size" content="11px" title="11px">
  65. <meta name="select:font size" content="10px" title="10px">
  66. <meta name="select:font size" content="9px" title="9px">
  67.  
  68. <meta name="select:post width"content="post500"title="500px"/>
  69. <meta name="select:post width"content="post700"title="700px"/>
  70. <meta name="select:post width"content="post540"title="540px"/>
  71. <meta name="select:post width"content="post450"title="450px"/>
  72. <meta name="select:post width"content="post400"title="400px"/>
  73. <meta name="select:post width"content="post350"title="350px"/>
  74.  
  75. <meta name="select:photoset gutter"content="5px"title="5px">
  76. <meta name="select:photoset gutter"content="10px"title="10px">
  77. <meta name="select:photoset gutter"content="2px"title="2px">
  78. <meta name="select:photoset gutter"content="1px"title="1px">
  79. <meta name="select:photoset gutter"content="0px"title="0px">
  80.  
  81. <meta name="select:post spacing" content="150px">
  82. <meta name="select:post spacing" content="100px">
  83. <meta name="select:post spacing" content="120px">
  84. <meta name="select:post spacing" content="180px">
  85. <meta name="select:post spacing" content="200px">
  86. <meta name="select:post spacing" content="250px">
  87.  
  88. <meta name="select:header blend mode" content="normal" title="Normal">
  89. <meta name="select:header blend mode" content="multiply" title="Multiply">
  90. <meta name="select:header blend mode" content="screen" title="Screen">
  91. <meta name="select:header blend mode" content="color-burn"title="Colour Burn">
  92. <meta name="select:header blend mode" content="color-dodge"title="Colour Dodge">
  93. <meta name="select:header blend mode" content="overlay" title="Overlay">
  94. <meta name="select:header blend mode" content="soft-light" title="Soft Light">
  95. <meta name="select:header blend mode" content="hard-light" title="Hard Light">
  96. <meta name="select:header blend mode" content="hue" title="Hue">
  97. <meta name="select:header blend mode" content="color" title="Colour">
  98.  
  99.  
  100. <meta name="select:abt blend mode" content="normal" title="Normal">
  101. <meta name="select:abt blend mode" content="multiply" title="Multiply">
  102. <meta name="select:abt blend mode" content="screen" title="Screen">
  103. <meta name="select:abt blend mode" content="color-burn"title="Colour Burn">
  104. <meta name="select:abt blend mode" content="color-dodge"title="Colour Dodge">
  105. <meta name="select:abt blend mode" content="overlay" title="Overlay">
  106. <meta name="select:abt blend mode" content="soft-light" title="Soft Light">
  107. <meta name="select:abt blend mode" content="hard-light" title="Hard Light">
  108. <meta name="select:abt blend mode" content="hue" title="Hue">
  109. <meta name="select:abt blend mode" content="color" title="Colour">
  110.  
  111. <meta name="select:faq blend mode" content="normal" title="Normal">
  112. <meta name="select:faq blend mode" content="multiply" title="Multiply">
  113. <meta name="select:faq blend mode" content="screen" title="Screen">
  114. <meta name="select:faq blend mode" content="color-burn"title="Colour Burn">
  115. <meta name="select:faq blend mode" content="color-dodge"title="Colour Dodge">
  116. <meta name="select:faq blend mode" content="overlay" title="Overlay">
  117. <meta name="select:faq blend mode" content="soft-light" title="Soft Light">
  118. <meta name="select:faq blend mode" content="hard-light" title="Hard Light">
  119. <meta name="select:faq blend mode" content="hue" title="Hue">
  120. <meta name="select:faq blend mode" content="color" title="Colour">
  121.  
  122. <meta name="select:notes display" content="def_notes" title="default">
  123. <meta name="select:notes display" content="txt_notes" title="text only">
  124. <meta name="select:notes display" content="grid_notes" title="grid">
  125.  
  126. <meta name="text:Link1" content="Link 1">
  127. <meta name="text:link1 URL" content="/">
  128. <meta name="text:Link2" content="Link 2">
  129. <meta name="text:link2 URL" content="/">
  130. <meta name="text:Link3" content="Link 3">
  131. <meta name="text:link3 URL" content="/">
  132. <meta name="text:Link4" content="Link 4">
  133. <meta name="text:link4 URL" content="/">
  134. <meta name="text:Link5" content="Link 5">
  135. <meta name="text:link5 URL" content="/">
  136.  
  137. <meta name="text:abt heading"content="Name">
  138. <meta name="text:abt desc"content="some info here">
  139.  
  140. <meta name="text:biography main text" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  141. <meta name="text:biography quote"content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
  142.  
  143.  
  144. <meta name="text:abt link1"content="Link">
  145. <meta name="text:abt link1 URL"content="/">
  146. <meta name="text:abt link2"content="Link">
  147. <meta name="text:abt link2 URL"content="/">
  148. <meta name="text:abt link3"content="Link">
  149. <meta name="text:abt link3 URL"content="/">
  150.  
  151. <meta name="text:question 1" content="This is a question?">
  152. <meta name="text:answer 1" content="This is an answer.">
  153. <meta name="text:question 2" content="This is a question?">
  154. <meta name="text:answer 2" content="This is an answer.">
  155. <meta name="text:question 3" content="This is a question?">
  156. <meta name="text:answer 3" content="This is an answer.">
  157.  
  158. <meta name="text:nav category 1" content="category 1">
  159. <meta name="text:nav category 2" content="category 2">
  160. <meta name="text:nav category 3" content="category 3">
  161. <meta name="text:nav category 4" content="category 4">
  162. <meta name="text:nav category 5" content="category 5">
  163. <meta name="text:nav category 6" content="category 6">
  164.  
  165. <meta name="text:navilink 1" content="link">
  166. <meta name="text:navilink 1 URL" content="/">
  167. <meta name="text:navilink 2" content="link">
  168. <meta name="text:navilink 2 URL" content="/">
  169. <meta name="text:navilink 3" content="link">
  170. <meta name="text:navilink 3 URL" content="/">
  171. <meta name="text:navilink 4" content="link">
  172. <meta name="text:navilink 4 URL" content="/">
  173. <meta name="text:navilink 5" content="link">
  174. <meta name="text:navilink 5 URL" content="/">
  175. <meta name="text:navilink 6" content="link">
  176. <meta name="text:navilink 6 URL" content="/">
  177. <meta name="text:navilink 7" content="link">
  178. <meta name="text:navilink 7 URL" content="/">
  179. <meta name="text:navilink 8" content="link">
  180. <meta name="text:navilink 8 URL" content="/">
  181. <meta name="text:navilink 9" content="link">
  182. <meta name="text:navilink 9 URL" content="/">
  183. <meta name="text:navilink 10" content="link">
  184. <meta name="text:navilink 10 URL" content="/">
  185. <meta name="text:navilink 11" content="link">
  186. <meta name="text:navilink 11 URL" content="/">
  187. <meta name="text:navilink 12" content="link">
  188. <meta name="text:navilink 12 URL" content="/">
  189. <meta name="text:navilink 13" content="link">
  190. <meta name="text:navilink 13 URL" content="/">
  191. <meta name="text:navilink 14" content="link">
  192. <meta name="text:navilink 14 URL" content="/">
  193. <meta name="text:navilink 15" content="link">
  194. <meta name="text:navilink 15 URL" content="/">
  195. <meta name="text:navilink 16" content="link">
  196. <meta name="text:navilink 16 URL" content="/">
  197. <meta name="text:navilink 17" content="link">
  198. <meta name="text:navilink 17 URL" content="/">
  199. <meta name="text:navilink 18" content="link">
  200. <meta name="text:navilink 18 URL" content="/">
  201. <meta name="text:navilink 19" content="link">
  202. <meta name="text:navilink 19 URL" content="/">
  203. <meta name="text:navilink 20" content="link">
  204. <meta name="text:navilink 20 URL" content="/">
  205. <meta name="text:navilink 21" content="link">
  206. <meta name="text:navilink 21 URL" content="/">
  207. <meta name="text:navilink 22" content="link">
  208. <meta name="text:navilink 22 URL" content="/">
  209. <meta name="text:navilink 23" content="link">
  210. <meta name="text:navilink 23 URL" content="/">
  211. <meta name="text:navilink 24" content="link">
  212. <meta name="text:navilink 24 URL" content="/">
  213.  
  214. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
  215. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  216. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  217. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">
  218.  
  219. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
  220. <link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
  221. <link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
  222. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">
  223.  
  224. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  225. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  226.  
  227. <style type="text/css">
  228.  
  229. iframe.tmblr-iframe--app-cta-button tmblr-iframe--loaded, iframe.tmblr-iframe--app-cta-button {display:none!important;}
  230.  
  231. iframe.iframe-controls--phone-mobile {display:none!important;}
  232.  
  233. .animsition-loading {display:none;}
  234.  
  235. .animsition,
  236. .animsition-overlay {
  237. position: relative;
  238. opacity: 0;
  239. -webkit-animation-fill-mode: both;
  240. animation-fill-mode: both;
  241. }
  242.  
  243.  
  244.  
  245. @-webkit-keyframes fade-in {
  246. 0% {
  247. opacity: 0;
  248. }
  249. 100% {
  250. opacity: 1;
  251. }
  252. }
  253.  
  254. @keyframes fade-in {
  255. 0% {
  256. opacity: 0;
  257. }
  258. 100% {
  259. opacity: 1;
  260. }
  261. }
  262.  
  263.  
  264. .fade-in {
  265. -webkit-animation-name: fade-in;
  266. animation-name: fade-in;
  267. }
  268.  
  269.  
  270. @-webkit-keyframes fade-out {
  271. 0% {
  272. opacity: 1;
  273. }
  274. 100% {
  275. opacity: 0;
  276. }
  277. }
  278.  
  279.  
  280. @keyframes fade-out {
  281. 0% {
  282. opacity: 1;
  283. }
  284. 100% {
  285. opacity: 0;
  286. }
  287. }
  288.  
  289.  
  290. .fade-out {
  291. -webkit-animation-name: fade-out;
  292. animation-name: fade-out;
  293. }
  294.  
  295.  
  296.  
  297. ::-webkit-scrollbar {
  298. width:12px;
  299. background:#fff;
  300. }
  301.  
  302. ::-webkit-scrollbar:horizontal {display:none;}
  303.  
  304. ::-webkit-scrollbar-thumb { background-color: {color:accent}; border:5px solid #fafafa; border-radius:1ex;}
  305.  
  306. /*Tumblr Controls*/
  307. body:not(.night-mode) .iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  308.  
  309. }
  310.  
  311. .iframe-controls--desktop{
  312. -webkit-transform:scale(0.8);
  313. -webkit-transform-origin:right;
  314. -moz-transform:scale(0.8);
  315. -moz-transform-origin:right;
  316. -o-transform:scale(0.8);
  317. -o-transform-origin:right;
  318. -ms-transform:scale(0.8);
  319. -ms-transform-origin:right;
  320. transform:scale(0.8);
  321. transform-origin:right;
  322.  
  323. }
  324.  
  325. body.day-mode .tmblr-iframe.tmblr-iframe--app-cta-button.tmblr-iframe--loaded,iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded:not(.iframe-controls--desktop) {
  326.  
  327. -webkit-transform:scale(0.6);
  328. -webkit-transform-origin:right;
  329. -moz-transform:scale(0.6);
  330. -moz-transform-origin:right;
  331. -o-transform:scale(0.6);
  332. -o-transform-origin:right;
  333. -ms-transform:scale(0.6);
  334. -ms-transform-origin:right;
  335. transform:scale(0.6);
  336.  
  337. }
  338.  
  339. .tmblr-iframe-pushdown {padding-top: 0 !important;}
  340.  
  341. {block:permalinkpage}
  342. iframe.tmblr-iframe--unified-controls {max-width:500px!important;}
  343. {/block:permalinkpage}
  344.  
  345.  
  346. *,
  347. *::before,
  348. *::after {
  349. box-sizing: inherit;
  350. -webkit-box-sizing: inherit;
  351. -moz-box-sizing: inherit;
  352. }
  353.  
  354. body,html {margin:0;padding:0;}
  355.  
  356. html {
  357. box-sizing: border-box;
  358. -webkit-box-sizing: border-box;
  359. -moz-box-sizing: border-box;
  360. }
  361.  
  362. body{
  363. line-height:200%;
  364. color:#222;
  365. background:#fff;
  366. font-family:'{select:body font}',sans-serif;
  367. font-size:{select:font size};
  368. -webkit-font-smoothing: antialiased;
  369. -moz-osx-font-smoothing: grayscale;
  370. }
  371.  
  372. body.night-mode {
  373. background:#000;
  374. color:#fff;
  375. }
  376.  
  377. @media screen and (min-width:1600px) {
  378. body {font-size:24px;line-height:220%;}
  379.  
  380. p {margin:1.5em 0 1.5em 0;}
  381.  
  382. }
  383.  
  384. @media screen and (min-width:1920px) {
  385. body {font-size:30px;}
  386.  
  387. }
  388.  
  389. ::selection {background:{color:accent}; color:#fff;}
  390. ::-moz-selection {background:{color:accent}; color:#fff;}
  391. ::-webkit-selection {background:{color:accent}; color:#fff;}
  392.  
  393. #s-m-t-tooltip{
  394. position:absolute;
  395. margin-top: 10px;
  396. z-index:9999999999;
  397. padding:0.2em 0.5em 0.2em 0.5em;
  398. max-width:500px;
  399. color:#fff;
  400. background: {color:accent};
  401. letter-spacing:1.1px;
  402. text-transform:uppercase;
  403. border-radius:2px;
  404. }
  405.  
  406. a {
  407. text-decoration:none;
  408. color:inherit;
  409. cursor:help;
  410. -webkit-transition: all 0.3s ease-in-out;
  411. transition:all 0.3s ease-in-out;
  412. }
  413.  
  414. a:hover {
  415. color:{color:highlight};
  416. -webkit-transition: all 0.3s ease-in-out;
  417. transition:all 0.3s ease-in-out;
  418. }
  419.  
  420.  
  421. .night-mode a:not(.tbrefresh):hover {color:{color:accent};}
  422.  
  423. .navi_box a {
  424. border-bottom:1px solid #222;
  425. }
  426.  
  427. .night-mode .navi_box a {border-bottom:1px solid #fff;}
  428.  
  429. .navi_box a:hover {
  430. border-bottom:1px solid {color: highlight};
  431. }
  432.  
  433. h1, h2 {font-family:'{select:heading font}',serif;}
  434.  
  435. h1 {font-size:1.5em;}
  436. h2 {font-size:1.25em;}
  437.  
  438. .fadeIn {
  439. -webkit-animation-name: fadeIn;
  440. animation-name: fadeIn;
  441. -webkit-animation-duration: 1s;
  442. animation-duration: 1s;
  443. -webkit-animation-fill-mode: both;
  444. animation-fill-mode: both;
  445. }
  446.  
  447. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  448. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  449. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  450. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  451.  
  452. /*topbar*/
  453.  
  454. main{
  455. padding-top:100px;
  456. display:block;
  457. }
  458.  
  459. main, div.topbar {
  460. padding-left:8%;
  461. padding-right:8%;
  462. }
  463.  
  464. div.topbar {
  465. position:fixed;
  466. width:100%;
  467. height:100px;
  468. z-index:99;
  469. top:0;
  470. left:0;
  471. background:#fff;
  472. }
  473.  
  474. .night-mode div.topbar {background:#000;}
  475.  
  476. div.topbar__inner {
  477. height:100px;
  478. width:100%;
  479. border-bottom:1px solid #000;
  480. display:-webkit-box;
  481. display:-ms-flexbox;
  482. display:flex;
  483. -webkit-box-align:end;
  484. -ms-flex-align:end;
  485. align-items:flex-end;
  486. -webkit-box-pack:justify;
  487. -ms-flex-pack:justify;
  488. justify-content:space-between;
  489. padding-bottom:8px;
  490.  
  491. }
  492.  
  493. .night-mode div.topbar__inner {border-bottom:1px solid #fff;}
  494.  
  495. .topbar__inner h1 {margin:0;font-size:2em;position:relative;line-height:0;}
  496.  
  497. @media screen and (min-width:1400px) {
  498. .topbar__inner h1 {font-size:2.4em;}
  499.  
  500. }
  501.  
  502.  
  503.  
  504. .tbrefresh {
  505. outline: none;
  506. text-decoration: none;
  507. position: relative;
  508. line-height: 100%;
  509. color: #222;
  510. display: inline-block;
  511. -webkit-transition: color 0.5s 0.25s;
  512. transition: color 0.5s 0.25s;
  513. overflow: hidden;
  514. }
  515.  
  516. .night-mode .tbrefresh {color:#fff;}
  517.  
  518. .tbrefresh:hover {
  519. -webkit-transition: none;
  520. transition: none;
  521. color: transparent;
  522. }
  523.  
  524.  
  525. .tbrefresh::before {
  526. content: '';
  527. width: 100%;
  528. height: 4px;
  529. margin: 0;
  530. background: {color:accent};
  531. position: absolute;
  532. left: 0;
  533. top: 50%;
  534. -webkit-transform: translate3d(-100%,0,0);
  535. transform: translate3d(-100%,0,0);
  536. -webkit-transition: -webkit-transform 0.4s;
  537. transition: transform 0.4s;
  538. -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  539. transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  540. }
  541.  
  542. .tbrefresh:hover::before {
  543. -webkit-transform: translate3d(100%,0,0);
  544. transform: translate3d(100%,0,0);
  545. }
  546.  
  547. .tbrefresh span.tbletters {
  548. position: absolute;
  549. height: 50%;
  550. width: 100%;
  551. left: 0;
  552. top: 0;
  553. overflow: hidden;
  554. }
  555.  
  556. .tbrefresh span.tbletters::before {
  557. content: attr(data-letters);
  558. position: absolute;
  559. left: 0;
  560. width: 100%;
  561. color: {color:accent};
  562. -webkit-transition: -webkit-transform 0.5s;
  563. transition: transform 0.5s;
  564. }
  565.  
  566. .tbrefresh span.tbletters:nth-of-type(2) {
  567. top: 50%;
  568. }
  569.  
  570. .tbrefresh span.tbletters:first-of-type::before {
  571. top: 0;
  572. -webkit-transform: translate3d(0,100%,0);
  573. transform: translate3d(0,100%,0);
  574. }
  575.  
  576. .tbrefresh span.tbletters:nth-of-type(2)::before {
  577. bottom: 0;
  578. -webkit-transform: translate3d(0,-100%,0);
  579. transform: translate3d(0,-100%,0);
  580. }
  581.  
  582. .tbrefresh:hover span.tbletters::before {
  583. -webkit-transition-delay: 0.3s;
  584. transition-delay: 0.3s;
  585. -webkit-transform: translate3d(0,0,0);
  586. transform: translate3d(0,0,0);
  587. -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  588. transition-timing-function: cubic-bezier(0.2,1,0.3,1);
  589. }
  590.  
  591. .tbnav {line-height:160%;}
  592.  
  593. .tbnav a {
  594. color:inherit;
  595. margin-right:1em;
  596. position:relative;
  597. }
  598.  
  599. .tbnav a:before {
  600. content: "";
  601. position: absolute;
  602. width: 100%;
  603. height: 1px;
  604. top:calc({select:font size} * (5/4));
  605. bottom: 0;
  606. left: 0;
  607. background-color: #222;
  608. visibility: hidden;
  609. -webkit-transform: scaleX(0);
  610. transform: scaleX(0);
  611. -webkit-transition: all 0.3s ease-in-out 0s;
  612. transition: all 0.3s ease-in-out 0s;
  613. }
  614.  
  615. @media screen and (min-width:1600px) {
  616. .tbnav a:before {
  617. top:calc(24px * (5/4));
  618.  
  619. }
  620.  
  621. }
  622.  
  623. @media screen and (min-width:1920px) {
  624. .tbnav a:before {
  625. top:calc(30px * (5/4));
  626.  
  627. }
  628.  
  629. }
  630.  
  631. @media screen and (max-width:500px) {
  632. div.topbar__inner {
  633. align-items:flex-start;
  634. flex-direction:column;
  635. justify-content:flex-end;
  636. overflow:hidden;
  637. white-space:nowrap;
  638. text-overflow:ellipsis;
  639. }
  640.  
  641. .tbrefresh {margin-bottom:8px;}
  642.  
  643. }
  644.  
  645. .night-mode .tbnav a:before {background-color:#fff;}
  646.  
  647. .tbnav a:hover, .tbnav a.active {color:{color:accent};}
  648.  
  649. .tbnav a:hover:before, .tbnav a.active::before {
  650. background-color:{color:accent};
  651. visibility: visible;
  652. -webkit-transform: scaleX(1);
  653. transform: scaleX(1);
  654. }
  655.  
  656. /*header*/
  657.  
  658. header.welcome_screen {
  659. height:calc(100vh - 100px);
  660. width:100%;
  661. display:-webkit-box;
  662. display:-ms-flexbox;
  663. display:flex;
  664. -webkit-box-align:center;
  665. -ms-flex-align:center;
  666. align-items:center;
  667. -webkit-box-pack:center;
  668. -ms-flex-pack:center;
  669. justify-content:center;
  670. }
  671.  
  672.  
  673. div.welcome__inner{
  674. cursor:help;
  675. width:50vw;
  676. height:50vw;
  677. border-radius:50%;
  678. position:relative;
  679. overflow:hidden;
  680. -webkit-backface-visibility: hidden;
  681. backface-visibility: hidden;
  682. background: -webkit-linear-gradient(-45deg, {color:accent} 0%,{color:highlight} 100%);
  683. background: linear-gradient(-45deg, {color:accent} 0%,{color:highlight} 100%);
  684. -webkit-mask-image: -webkit-radial-gradient(white, black);
  685. }
  686.  
  687. @media screen and (min-aspect-ratio: 16/9) {
  688. div.welcome__inner {
  689. width:calc(100vh - 100px - 2em);
  690. height:calc(100vh - 100px - 2em);
  691. }
  692. }
  693.  
  694. @media screen and (max-aspect-ratio: 5/4) {
  695. div.welcome__inner {
  696. width:60vw;
  697. height:60vw;
  698. }
  699. }
  700.  
  701.  
  702. @media screen and (max-width:500px) {
  703. div.welcome__inner {
  704. width:250px;
  705. height:250px;
  706. }
  707. }
  708.  
  709. @media screen and (max-width:320px) {
  710. div.welcome__inner {
  711. width:180px;
  712. height:180px;
  713. }
  714. }
  715.  
  716. div.welcome__inner::before{
  717. position:absolute;
  718. width:100%;
  719. height:100%;
  720. content: '';
  721. top:0;
  722. left:0;
  723. z-index:1;
  724. background-color:rgba({RGBColor:accent},0.8);
  725. mix-blend-mode:{select:header blend mode};
  726.  
  727. }
  728.  
  729. div.welc_msg {
  730. position:absolute;
  731. width:100%;
  732. height:100%;
  733. top:0;
  734. left:0;
  735. z-index:2;
  736. text-align:center;
  737. color:#fff;
  738. display:-webkit-box;
  739. display:-ms-flexbox;
  740. display:flex;
  741. -webkit-box-align:center;
  742. -ms-flex-align:center;
  743. align-items:center;
  744. -webkit-box-orient:vertical;
  745. -webkit-box-direction:normal;
  746. -ms-flex-direction:column;
  747. flex-direction:column;
  748. -webkit-box-pack:center;
  749. -ms-flex-pack:center;
  750. justify-content:center;
  751. -webkit-backface-visibility: hidden;
  752. backface-visibility: hidden;
  753. }
  754.  
  755. div.welc_msg::before,
  756. div.welc_msg::after {
  757. pointer-events: none;
  758. }
  759.  
  760. .welc_msg h2 {font-size:1.8em;margin:0;text-transform:uppercase;}
  761.  
  762. @media screen and (max-width:500px) {
  763. .welc_msg h2 {font-size:1em;}
  764. .welcome__inner p {font-size:80%;margin:0.8em 0 0.8em 0;}
  765. }
  766.  
  767. div.welcome__inner img {
  768. z-index:0;
  769. position:relative;
  770. opacity:1;
  771. }
  772.  
  773. div.welcome__inner .welc_msg::after,
  774. div.welcome__inner img,
  775. div.welcome__inner p, div.welcome__inner h2 {
  776. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  777. transition: opacity 0.35s, transform 0.35s;
  778. }
  779.  
  780. div.welcome__inner .welc_msg::after {
  781. position: absolute;
  782. top: 0;
  783. left: 0;
  784. width: 100%;
  785. height: 100%;
  786. border-top: 1px solid #fff;
  787. border-bottom: 1px solid #fff;
  788. content: '';
  789. opacity: 0;
  790. -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  791. transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
  792. -webkit-transform-origin: 50% 50%;
  793. transform-origin: 50% 50%;
  794. }
  795.  
  796. div.welcome__inner h2,
  797. div.welcome__inner p {
  798. opacity: 1;
  799. -webkit-transform: scale3d(0.8,0.8,1);
  800. transform: scale3d(0.8,0.8,1);
  801.  
  802. }
  803.  
  804. div.welcome__inner h2 {
  805. -webkit-transition: -webkit-transform 0.35s;
  806. transition: transform 0.35s;
  807. }
  808.  
  809. div.welcome__inner p, div.welcome__inner h2 {
  810.  
  811. opacity: 0;
  812. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  813. transition: opacity 0.35s, transform 0.35s;
  814. }
  815.  
  816. div.welcome__inner p {padding:0 1.2em 0 1.2em;}
  817.  
  818. div.welcome__inner:hover img {
  819. opacity: 0.7;
  820. -webkit-transform: scale3d(1.05,1.05,1);
  821. transform: scale3d(1.05,1.05,1);
  822. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  823. transition: opacity 0.35s, transform 0.35s;
  824. }
  825.  
  826. div.welcome__inner:hover .welc_msg::after {
  827. opacity: 1;
  828. -webkit-transform: rotate3d(0,0,1,45deg) scale3d(0.8,0.8,1);
  829. transform: rotate3d(0,0,1,45deg) scale3d(0.8,0.8,1);
  830. }
  831.  
  832. div.welcome__inner:hover h2,
  833. div.welcome__inner:hover p {
  834. opacity: 1;
  835. -webkit-transform: scale3d(1,1,1);
  836. transform: scale3d(1,1,1);
  837.  
  838. }
  839.  
  840. div.welcome__inner p a {color:#fff;border-bottom:1px solid #fff;}
  841.  
  842. /*about + FAQ*/
  843.  
  844. div.abt_cont, div.faq_cont {
  845. width:100%;
  846. height:calc(100vh - 100px);
  847. display:-webkit-box;
  848. display:-webkit-flex;
  849. display:-ms-flexbox;
  850. display:flex;
  851. }
  852.  
  853. div.faq_cont {margin-top:2em;}
  854. div.abt_cont {margin-top:1em;}
  855.  
  856.  
  857.  
  858. @media screen and (min-width:900px) {
  859. article.abtstuff:first-of-type {
  860. -ms-flex-preferred-size:360px;
  861. -webkit-flex-basis:360px;
  862. flex-basis:360px;
  863. }
  864.  
  865. article.abtstuff:nth-of-type(2) {
  866. margin-left:60px;
  867. -ms-flex-preferred-size:calc(100% - 420px);
  868. -webkit-flex-basis:calc(100% - 420px);
  869. flex-basis:calc(100% - 420px);
  870. }
  871. }
  872.  
  873. @media screen and (min-width:1400px) {
  874. article.abtstuff:first-of-type {
  875. -ms-flex-preferred-size:40%;
  876. -webkit-flex-basis:40%;
  877. flex-basis:40%;
  878. }
  879.  
  880. article.abtstuff:nth-of-type(2) {
  881. margin-left:60px;
  882. -ms-flex-preferred-size:calc(60% - 60px);
  883. -webkit-flex-basis:calc(60% - 60px);
  884. flex-basis:calc(60% - 60px);
  885. }
  886. }
  887.  
  888.  
  889. @media screen and (max-width:900px) {
  890.  
  891. div.abt_cont, div.faq_cont {
  892. height:initial;
  893. display:block;
  894. }
  895.  
  896. article.abtstuff, article.faqstuff {
  897. width:100%;
  898. }
  899.  
  900. .abtstuff.hoverbox , .faqstuff.faqbg{display:none;}
  901.  
  902. div.abt_cont {margin-bottom:4em;}
  903.  
  904. }
  905.  
  906. .tilter {
  907. display: block;
  908. position: relative;
  909. width: 360px;
  910. height: 480px;
  911. margin: 1.5em 0 1.5em 0;
  912. color: #fff;
  913. flex: none;
  914. perspective: 1000px;
  915. }
  916.  
  917. @media screen and (min-width:1400px) {
  918. .tilter {
  919. width: 100%;
  920. max-width:calc(30vw);
  921. height: calc(100vh - 180px);
  922. }
  923. }
  924.  
  925.  
  926. .tilter * {
  927. pointer-events: none;
  928. }
  929.  
  930. .tilter:hover,
  931. .tilter:focus {
  932. color: #fff;
  933. outline: none;
  934. }
  935.  
  936. /*
  937. .tilter__figure,
  938. .tilter__deco,
  939. .tilter__caption {
  940. will-change: transform;
  941. }*/
  942.  
  943. .tilter__figure, .abtimg {
  944. margin: 0;
  945. width: 100%;
  946. height: 100%;
  947. display: block;
  948. }
  949. .abtimg {overflow:hidden;}
  950.  
  951.  
  952. .tilter__figure > * {
  953. transform: translateZ(0px); /* Force correct stacking order */
  954. }
  955.  
  956. .smooth .tilter__figure,
  957. .smooth .tilter__deco--overlay,
  958. .smooth .tilter__deco--lines,
  959. .smooth .tilter__deco--shine div,
  960. .smooth .tilter__caption {
  961. transition: transform 0.2s ease-out;
  962. }
  963.  
  964. .tilter__figure {
  965. position: relative;
  966. }
  967.  
  968. .tilter__figure::before {
  969. content: '';
  970. position: absolute;
  971. width: 90%;
  972. height: 90%;
  973. top: 5%;
  974. left: 5%;
  975. box-shadow: 0 30px 20px rgba({RGBColor:accent},0.5);
  976. }
  977.  
  978. .tilter__deco {
  979. position: absolute;
  980. top: 0;
  981. left: 0;
  982. width: 100%;
  983. height: 100%;
  984. overflow: hidden;
  985. }
  986.  
  987. .tilter__deco--overlay {
  988. mix-blend-mode:{select:abt blend mode};
  989. background-image: linear-gradient(45deg, rgba({RGBColor:accent}, 0.9), rgba({RGBColor:highlight}, 0.6), rgba({RGBColor:accent}, 0.9));
  990. }
  991.  
  992. .tilter__deco--shine > div {
  993. position: absolute;
  994. width: 200%;
  995. height: 200%;
  996. top: -50%;
  997. left: -50%;
  998. background-image: linear-gradient(45deg, rgba(100, 100, 100, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  999. }
  1000.  
  1001. .tilter__deco--lines {
  1002. fill: none;
  1003. stroke: #fff;
  1004. stroke-width: 1.5px;
  1005. }
  1006.  
  1007. .tilter__caption {
  1008. position: absolute;
  1009. bottom: 0;
  1010. width: 100%;
  1011. padding: 4em;
  1012. color:#fff;
  1013. }
  1014.  
  1015. .tilter__title {
  1016. margin: 0;
  1017. font-weight: normal;
  1018. font-size: 2.5em;
  1019. font-family: '{select:heading font}', serif;
  1020. line-height: 1;
  1021. font-weight:bold;
  1022. }
  1023.  
  1024. .tilter__description {
  1025. margin: 1em 0 0 0;
  1026. font-size: 0.85em;
  1027. letter-spacing: 0.15em;
  1028. }
  1029.  
  1030. .tilter__deco--overlay {
  1031. background-image: linear-gradient(20deg, rgba({RGBColor:accent},0.9), rgba({RGBColor:highlight} 0.58), rgba({RGBColor:accent}, 0.6));
  1032. }
  1033.  
  1034. @media screen and (min-width: 30em) {
  1035. .tilter--4 .tilter__deco--lines {
  1036. transform: scale3d(0.8,0.8,1);
  1037. transition: transform 0.4s;
  1038. }
  1039. .tilter--4:hover .tilter__deco--lines {
  1040. transform: scale3d(1,1,1);
  1041. }
  1042. .tilter--4 .tilter__title,
  1043. .tilter--4 .tilter__description {
  1044. transform: translate3d(0,80px,0);
  1045. opacity: 0;
  1046. transition: transform 0.4s, opacity 0.4s;
  1047. }
  1048. .tilter--4:hover .tilter__description {
  1049. transition-delay: 0.1s;
  1050. }
  1051. .tilter--4:hover .tilter__title,
  1052. .tilter--4:hover .tilter__description {
  1053. transform: translate3d(0,0,0);
  1054. opacity: 1;
  1055. }
  1056. }
  1057.  
  1058. @media screen and (min-width:1400px) {
  1059.  
  1060.  
  1061. .tilter--4:hover .tilter__deco--lines {
  1062. transform: scale3d(1.1,1,1);
  1063. }
  1064. }
  1065.  
  1066. @media screen and (max-aspect-ratio: 13/7) and (min-width: 1400px) {
  1067.  
  1068. .tilter {height:72vh;}
  1069. .tilter--4:hover .tilter__deco--lines {
  1070. transform: scale3d(1,1,1);
  1071. }
  1072. }
  1073.  
  1074. @media screen and (max-aspect-ratio: 8/5) and (min-width: 1400px) {
  1075. .tilter {height:64vh;}
  1076. .tilter--4:hover .tilter__deco--lines {
  1077. transform: scale3d(1,1,1);
  1078. }
  1079. }
  1080.  
  1081. @media screen and (max-aspect-ratio: 7/5) and (min-width: 1400px) {
  1082. .tilter {height:40vw;}
  1083. .tilter--4:hover .tilter__deco--lines {
  1084. transform: scale3d(1,1,1);
  1085. }
  1086. }
  1087.  
  1088.  
  1089.  
  1090. @media screen and (min-width:1600px) {
  1091.  
  1092.  
  1093.  
  1094. .tilter__caption {
  1095. padding:3.6em;
  1096. }
  1097.  
  1098.  
  1099. }
  1100.  
  1101. @media screen and (min-width:1920px) {
  1102.  
  1103.  
  1104. .tilter--4:hover .tilter__deco--lines {
  1105. transform: scale3d(1,1,1);
  1106. }
  1107. }
  1108.  
  1109. @media screen and (max-aspect-ratio: 16/9) and (min-width:1920px) {
  1110. .tilter {height:60vh;}
  1111. .tilter--4:hover .tilter__deco--lines {
  1112. transform: scale3d(1,1,1);
  1113. }
  1114. }
  1115.  
  1116. nav.abtlinks {padding-top:1em;margin-top:2em;border-top:1px solid #eaeaea;}
  1117.  
  1118. nav.abtlinks a {
  1119. display:inline-block;
  1120. height:54px;
  1121. width:54px;
  1122. text-align:center;
  1123. padding:12px;
  1124. border-radius:50%;
  1125. line-height:100%;
  1126. background:{color:accent};
  1127. border-bottom:none!important;
  1128. -webkit-transition: all 0.3s ease-in-out;
  1129. transition:all 0.3s ease-in-out;
  1130. }
  1131.  
  1132. nav.abtlinks > a + a {margin-left:16px;}
  1133.  
  1134. nav.abtlinks a svg {
  1135. fill:#fff;
  1136. }
  1137.  
  1138. nav.abtlinks a:hover {
  1139. background:{color:highlight};
  1140. }
  1141.  
  1142. /*FAQ*/
  1143.  
  1144. article.biography, article.fask {text-align:justify;}
  1145.  
  1146. article.fask p:last-of-type {overflow:hidden;}
  1147.  
  1148. @media screen and (min-width:900px) {
  1149. article.faqstuff:first-of-type {
  1150. -ms-flex-preferred-size:calc(100% - 360px);
  1151. -webkit-flex-basis:calc(100% - 360px);
  1152. flex-basis:calc(100% - 360px);
  1153. height:inherit;
  1154. }
  1155.  
  1156. article.faqstuff:nth-of-type(2) {
  1157. margin-left:60px;
  1158. -ms-flex-preferred-size:300px;
  1159. -webkit-flex-basis:300px;
  1160. flex-basis:300px;
  1161. height:inherit;
  1162. }
  1163.  
  1164. .fask > div {max-height:calc(100vh - 240px);overflow:auto;padding-bottom:20px;padding-right:16px;}
  1165.  
  1166. }
  1167.  
  1168. @media screen and (min-width:1400px) {
  1169. article.faqstuff:first-of-type {
  1170. -ms-flex-preferred-size:calc(64% - 60px);
  1171. -webkit-flex-basis:calc(64% - 60px);
  1172. flex-basis:calc(64% - 60px);
  1173. height:inherit;
  1174. }
  1175.  
  1176. article.faqstuff:nth-of-type(2) {
  1177. margin-left:60px;
  1178. -ms-flex-preferred-size:60%;
  1179. -webkit-flex-basis:60%;
  1180. flex-basis:60%;
  1181. height:inherit;
  1182. }
  1183.  
  1184.  
  1185. }
  1186.  
  1187. @media screen and (min-width:1920px) {
  1188. article.faqstuff:first-of-type {
  1189. -ms-flex-preferred-size:calc(50% - 60px);
  1190. -webkit-flex-basis:calc(50% - 60px);
  1191. flex-basis:calc(50% - 60px);
  1192. height:inherit;
  1193. }
  1194.  
  1195. article.faqstuff:nth-of-type(2) {
  1196. margin-left:60px;
  1197. -ms-flex-preferred-size:50%;
  1198. -webkit-flex-basis:50%;
  1199. flex-basis:50%;
  1200. height:inherit;
  1201. }
  1202.  
  1203.  
  1204. }
  1205.  
  1206.  
  1207.  
  1208.  
  1209.  
  1210. .fask > div::-webkit-scrollbar {
  1211. width:4px;
  1212. background:#fff;
  1213. }
  1214.  
  1215. .fask > div::-webkit-scrollbar:horizontal {display:none;}
  1216.  
  1217. .fask > div::-webkit-scrollbar-thumb { background-color: {color:accent}; border:5px solid {color:accent}; border-radius:1ex;}
  1218.  
  1219. p.tabq {margin-top:1.5em;font-weight:bold;margin-bottom:0.5em;}
  1220. p.tabq:first-of-type{margin-top:0;}
  1221. p.taba, p.abtqt {padding-left:1em;border-left:1px solid #222;}
  1222. .night-mode p.taba, .night-mode p.abtqt {border-left:1px solid #999;}
  1223. p.abtqt {font-style:italic;}
  1224.  
  1225. article.faqbg {
  1226. background-image: url('{image:FAQ background}');
  1227. background-repeat: no-repeat;
  1228. background-position: center;
  1229. background-size:cover;
  1230. position:relative;
  1231. }
  1232.  
  1233. article.faqbg::before{
  1234. position:absolute;
  1235. top:0;
  1236. left:0;
  1237. width:100%;
  1238. height:100%;
  1239. content:'';
  1240. background: linear-gradient(-45deg, rgba({RGBcolor:accent},1), rgba({RGBcolor:highlight},0.7), rgba({RGBcolor:accent},1), rgba({RGBcolor:highlight},0.7));
  1241. mix-blend-mode:{select:faq blend mode};
  1242. background-size: 400% 400%;
  1243. -webkit-animation: Gradient 15s ease infinite;
  1244. -moz-animation: Gradient 15s ease infinite;
  1245. animation: Gradient 15s ease infinite;
  1246. }
  1247.  
  1248. @-webkit-keyframes Gradient {
  1249. 0% {
  1250. background-position: 0% 50%
  1251. }
  1252. 50% {
  1253. background-position: 100% 50%
  1254. }
  1255. 100% {
  1256. background-position: 0% 50%
  1257. }
  1258. }
  1259.  
  1260. @-moz-keyframes Gradient {
  1261. 0% {
  1262. background-position: 0% 50%
  1263. }
  1264. 50% {
  1265. background-position: 100% 50%
  1266. }
  1267. 100% {
  1268. background-position: 0% 50%
  1269. }
  1270. }
  1271.  
  1272. @keyframes Gradient {
  1273. 0% {
  1274. background-position: 0% 50%
  1275. }
  1276. 50% {
  1277. background-position: 100% 50%
  1278. }
  1279. 100% {
  1280. background-position: 0% 50%
  1281. }
  1282. }
  1283.  
  1284. /*Navi*/
  1285.  
  1286. .navi_box ul {
  1287. list-style:none;
  1288. padding:0;
  1289. }
  1290.  
  1291. .navi_box > ul > li {
  1292.  
  1293. margin-top:0.5em;
  1294. padding-left:1em;
  1295. position:relative;
  1296. -webkit-transition: all 0.3s ease-in-out;
  1297. transition:all 0.3s ease-in-out;
  1298. }
  1299.  
  1300. .navi_box > ul > li > a {margin-left:calc({select:font size}/2);}
  1301.  
  1302. .navi_box > ul > li:before {
  1303. content:'';
  1304. position:absolute;
  1305. top:50%;
  1306. height:1px;
  1307. margin-left:-1em;
  1308. width:1em;
  1309. background:#222;
  1310. -webkit-transition: all 0.3s ease-in-out;
  1311. transition:all 0.3s ease-in-out;
  1312. }
  1313.  
  1314. .night-mode .navi_box > ul > li:before {background:#999;}
  1315.  
  1316. .navi_box > ul > li:hover {
  1317. padding-left:1.8em;
  1318. -webkit-transition: all 0.3s ease-in-out;
  1319. transition:all 0.3s ease-in-out;
  1320. }
  1321.  
  1322. .navi_box > ul > li:hover:before {
  1323. margin-left:-1.8em;
  1324. width:1.8em;
  1325. -webkit-transition: all 0.3s ease-in-out;
  1326. transition:all 0.3s ease-in-out;
  1327. }
  1328.  
  1329. /*blogroll*/
  1330.  
  1331.  
  1332. .broll_cont, .navi_cont {
  1333. display:-webkit-box;
  1334. display:-webkit-flex;
  1335. display:-ms-flexbox;
  1336. display:flex;
  1337. -webkit-box-orient: horizontal;
  1338. -webkit-box-direction: normal;
  1339. -webkit-flex-direction: row;
  1340. -ms-flex-direction: row;
  1341. flex-direction: row;
  1342. -webkit-flex-wrap: wrap;
  1343. -ms-flex-wrap: wrap;
  1344. flex-wrap: wrap;
  1345. margin-bottom:80px;
  1346. }
  1347.  
  1348.  
  1349.  
  1350. div.followed_user {
  1351. display:-webkit-box;
  1352. display:-ms-flexbox;
  1353. display:flex;
  1354. -ms-flex-line-pack:center;
  1355. align-content:center;
  1356. -webkit-box-pack:justify;
  1357. -ms-flex-pack:justify;
  1358. justify-content:space-between;
  1359. padding:18px;
  1360. background:#fff;
  1361. border-radius:5px;
  1362. margin:8px;
  1363. overflow:hidden;
  1364. -webkit-box-shadow: 3px 4px 18px 1px rgba(214,214,214,0.7);
  1365. -moz-box-shadow: 3px 4px 18px 1px rgba(214,214,214,0.7);
  1366. box-shadow: 3px 4px 18px 1px rgba(214,214,214,0.7);
  1367.  
  1368. }
  1369.  
  1370. .night-mode div.followed_user {
  1371. background:rgba(50,50,50,0.5);
  1372. -webkit-box-shadow: none;
  1373. -moz-box-shadow: none;
  1374. box-shadow: none;
  1375. }
  1376.  
  1377.  
  1378. @media screen and (max-width:900px) {
  1379.  
  1380. div.followed_user:nth-of-type(odd) {
  1381. margin-left:0;
  1382. }
  1383.  
  1384.  
  1385.  
  1386. div.followed_user, div.navi_box {
  1387. -ms-flex-preferred-size:calc(50% - 16px);
  1388. -webkit-flex-basis:calc(50% - 16px);
  1389. flex-basis:calc(50% - 16px);
  1390. }
  1391. }
  1392.  
  1393.  
  1394. @media screen and (min-width: 900px) {
  1395. div.followed_user:nth-of-type(3n + 1) {
  1396. margin-left:0;
  1397. }
  1398.  
  1399. div.followed_user, div.navi_box {
  1400. -ms-flex-preferred-size:calc(33.3% - 16px);
  1401. -webkit-flex-basis:calc(33.3% - 16px);
  1402. flex-basis:calc(33.3% - 16px);
  1403. }
  1404.  
  1405. }
  1406.  
  1407.  
  1408. @media screen and (max-width:680px) {
  1409.  
  1410. div.followed_user {
  1411. margin-left:0;
  1412. margin-right:0;
  1413. }
  1414.  
  1415.  
  1416.  
  1417. div.followed_user, div.navi_box {
  1418. -ms-flex-preferred-size:100%;
  1419. -webkit-flex-basis:100%;
  1420. flex-basis:100%;
  1421. }
  1422. }
  1423.  
  1424.  
  1425.  
  1426. div.followed_img {
  1427. width:72px;
  1428. margin-right:18px;
  1429. }
  1430.  
  1431. .followed_img img {
  1432. width:72px;
  1433. height:auto;
  1434. display:block;
  1435. margin:0;
  1436. }
  1437.  
  1438. .followed_img > div {
  1439. position:relative;
  1440. border-radius:5%;
  1441. overflow:hidden;
  1442. }
  1443.  
  1444. .followed_img > div::before {
  1445. position:absolute;
  1446. top:0;
  1447. left:0;
  1448. width:100%;
  1449. height:100%;
  1450. background-image: linear-gradient(45deg, rgba({RGBColor:accent}, 0.8) 20%,rgba({RGBColor:highlight}, 0.8) 50%, rgba({RGBColor:accent},0.8) 80%);
  1451. content:'';
  1452. mix-blend-mode:screen;
  1453. opacity:0;
  1454. -webkit-transition: all 0.3s ease-in-out;
  1455. transition:all 0.3s ease-in-out;
  1456.  
  1457. }
  1458.  
  1459. .night-mode .followed_img > div::before {mix-blend-mode:soft-light;}
  1460.  
  1461. div.followed_user:hover .followed_img > div::before {
  1462. opacity:1;
  1463. -webkit-transition: all 0.3s ease-in-out;
  1464. transition:all 0.3s ease-in-out;
  1465. }
  1466.  
  1467.  
  1468. div.followed_txt {
  1469. display:-webkit-box;
  1470. display:-ms-flexbox;
  1471. display:flex;
  1472. -ms-flex-line-pack:center;
  1473. align-content:center;
  1474. -webkit-box-pack:center;
  1475. -ms-flex-pack:center;
  1476. justify-content:center;
  1477. width:calc(100% - 90px);
  1478. text-align:center;
  1479. border-left:1px solid #eaeaea;
  1480. white-space:nowrap;
  1481. overflow:hidden;
  1482. }
  1483.  
  1484. .night-mode div.followed_txt {border-left:1px solid #999;}
  1485.  
  1486. .followed_txt span {display:block;font-size:90%;overflow:hidden;text-overflow:ellipsis;padding:0 4px 0 4px;}
  1487. .followed_txt span > * {vertical-align:middle;}
  1488.  
  1489.  
  1490.  
  1491. .followed_txt a {color:#222;padding-bottom:2px;border-bottom:1px solid #222;font-size:{select:font size};line-height:200%;}
  1492.  
  1493. .night-mode .followed_txt a {color:#fff;border-bottom:1px solid #fff;}
  1494.  
  1495. .followed_txt a:hover {color:{color:accent};border-bottom:1px solid {color:accent};}
  1496.  
  1497. @media screen and (min-width:1600px) {
  1498. div.followed_img {
  1499. width:128px;
  1500. margin-right:30px;
  1501. }
  1502.  
  1503. .followed_img img {
  1504. width:128px;
  1505. height:auto;
  1506. display:block;
  1507. margin:0;
  1508. }
  1509.  
  1510. div.followed_txt {
  1511. width:calc(100% - 148px);
  1512. }
  1513.  
  1514. .followed_txt span {display:block;font-size:100%;}
  1515. .followed_txt a {font-size:24px;}
  1516.  
  1517. }
  1518.  
  1519. @media screen and (min-width:1920px) {
  1520. .followed_txt span {display:block;font-size:24px;}
  1521. .followed_txt a {font-size:100%;}
  1522.  
  1523. }
  1524.  
  1525. /*posts*/
  1526.  
  1527.  
  1528.  
  1529. #entries {
  1530. width:100%;
  1531. padding-top:80px;
  1532. margin:auto;
  1533. position:relative;
  1534. min-height:calc(100vh - 100px);
  1535. }
  1536.  
  1537. .singlecol #postwrap {
  1538. margin:auto;
  1539. }
  1540.  
  1541. {block:permalinkpage}
  1542. .{select:theme layout} #postwrap {margin-top:2em;}
  1543.  
  1544. .multicol.{select:post width} #postwrap {margin:2em auto;}
  1545. .{select:theme layout} div.posthold {margin:{select:post spacing} auto;}
  1546. .{select:theme layout} div.posthold:first-of-type {
  1547. margin-top:0;
  1548. }
  1549.  
  1550. .{select:theme layout} div.posthold:last-of-type {margin-bottom:4em;}
  1551.  
  1552. {/block:permalinkpage}
  1553.  
  1554. .singlecol.post540 #postwrap {block:permalinkpage},.multicol.{select:post width} #postwrap{/block:permalinkpage} {width:540px; }
  1555. .singlecol.post700 #postwrap {width:700px; }
  1556. .singlecol.post500 #postwrap {width:500px; }
  1557. .singlecol.post450 #postwrap {width:450px; }
  1558. .singlecol.post400 #postwrap {width:400px; }
  1559. .singlecol.post350 #postwrap {width:350px; }
  1560.  
  1561. .singlecol #entries div.posthold {
  1562. margin:{select:post spacing} auto;
  1563. }
  1564.  
  1565. .singoecol #entries div.posthold:first-of-type {
  1566. margin-top:0;
  1567. }
  1568.  
  1569. .singlecol #entries div.posthold:last-of-type {margin-bottom:calc({select:post spacing}/2);}
  1570.  
  1571. aside.sidequote,aside.sidenav {
  1572. position:absolute;
  1573. height:calc(100vh - 100px);
  1574. top:0;
  1575. display:-webkit-box;
  1576. display:-ms-flexbox;
  1577. display:flex;
  1578. -webkit-box-align:center;
  1579. -ms-flex-align:center;
  1580. align-items:center;
  1581. font-size:90%;
  1582. }
  1583.  
  1584. aside.sidenav {
  1585. -webkit-box-pack:end;
  1586. -ms-flex-pack:end;
  1587. justify-content:flex-end;
  1588. }
  1589.  
  1590. .singlecol.post500 aside.sidequote,.singlecol.post500 aside.sidenav {width:calc((84vw - 500px) / 2);}
  1591.  
  1592. .singlecol.post540 aside.sidequote,.singlecol.post540 aside.sidenav {block:permalinkpage},.multicol.{select:post width} aside.sidequote, .multicol.{select:post width} aside.sidenav {/block:permalinkpage} {width:calc((84vw - 540px) / 2);}
  1593.  
  1594. .singlecol.post700 aside.sidequote,.singlecol.post700 aside.sidenav {width:calc((84vw - 700px) / 2);}
  1595.  
  1596. .singlecol.post450 aside.sidequote,.singlecol.post450 aside.sidenav {width:calc((84vw - 450px) / 2);}
  1597.  
  1598. .singlecol.post400 aside.sidequote,.singlecol.post400 aside.sidenav {width:calc((84vw - 400px) / 2);}
  1599.  
  1600. .singlecol.post350 aside.sidequote,.singlecol.post350 aside.sidenav {width:calc((84vw - 350px) / 2);}
  1601.  
  1602. aside.sidequote {left:0;}
  1603. aside.sidenav {right:0;}
  1604.  
  1605.  
  1606. aside.scrolled.sidequote, aside.scrolled.sidenav{
  1607. position:fixed;
  1608. top:100px;
  1609. }
  1610.  
  1611. aside.scrolled.sidequote {left:8%;}
  1612. aside.scrolled.sidenav {right:8%;}
  1613.  
  1614. aside.sidequote > div {
  1615. writing-mode: vertical-rl;
  1616. text-orientation: mixed;
  1617. transform: rotate(180deg);
  1618. padding-top:2.4em;
  1619. padding-bottom:2.4em;
  1620. height:inherit;
  1621. text-align:center;
  1622. }
  1623.  
  1624. aside.sidequote > div a {color:{color:accent};border-bottom:1px solid {color:accent};}
  1625.  
  1626. aside.sidequote > div a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  1627.  
  1628. nav.sblinks a {
  1629. display:block;
  1630. position: relative;
  1631. line-height: 2.4em;
  1632. margin: 1em 0 1em 0;
  1633. -webkit-perspective: 600px;
  1634. -moz-perspective: 600px;
  1635. perspective: 600px;
  1636. width: 150px;
  1637. color:#fff;
  1638. text-align:center;
  1639. white-space:nowrap;
  1640. overflow:hidden;
  1641. text-overflow:ellipsis;
  1642. }
  1643.  
  1644. nav.sblinks a span {
  1645. position: relative;
  1646. display: inline-block;
  1647. width: 100%;
  1648. padding: 0 0.5em;
  1649. color:#222;
  1650. background:#f5f5f5;
  1651. -webkit-transition: -webkit-transform 0.4s, background 0.4s;
  1652. -moz-transition: -moz-transform 0.4s, background 0.4s;
  1653. transition: transform 0.4s, background 0.4s;
  1654. -webkit-transform-style: preserve-3d;
  1655. -moz-transform-style: preserve-3d;
  1656. transform-style: preserve-3d;
  1657. -webkit-transform-origin: 50% 50% -75px;
  1658. -moz-transform-origin: 50% 50% -75px;
  1659. transform-origin: 50% 50% -75px;
  1660.  
  1661. }
  1662.  
  1663. .night-mode nav.sblinks a span {background:#222;color:#fff;border:none;}
  1664.  
  1665. nav.sblinks a span::before {
  1666. position: absolute;
  1667. top: 0;
  1668. left: 100%;
  1669. width: 100%;
  1670. height: 100%;
  1671. color:#fff;
  1672. background: {color:highlight};
  1673. content: attr(data-hover);
  1674. -webkit-transition: background 0.4s;
  1675. -moz-transition: background 0.4s;
  1676. transition: background 0.4s;
  1677. -webkit-transform: rotateY(90deg);
  1678. -moz-transform: rotateY(90deg);
  1679. transform: rotateY(90deg);
  1680. -webkit-transform-origin: 0 50%;
  1681. -moz-transform-origin: 0 50%;
  1682. transform-origin: 0 50%;
  1683. pointer-events: none;
  1684. }
  1685.  
  1686. nav.sblinks a:hover span,
  1687. nav.sblinks a:focus span {
  1688. background: {color:highlight};
  1689. color:#fff;
  1690. -webkit-transform: rotateY(-90deg);
  1691. -moz-transform: rotateY(-90deg);
  1692. transform: rotateY(-90deg);
  1693. }
  1694.  
  1695. nav.sblinks a:hover span::before,
  1696. nav.sblinks a:focus span::before {
  1697. background: {color:accent};
  1698. color:#fff;
  1699. }
  1700.  
  1701. .input {
  1702. position: relative;
  1703. z-index: 1;
  1704. display: inline-block;
  1705. width: 150px;
  1706. vertical-align: top;
  1707. }
  1708.  
  1709. .input__field {
  1710. position: relative;
  1711. display: block;
  1712. float: right;
  1713. padding: 1em;
  1714. width: 60%;
  1715. border: none;
  1716. border-radius: 0;
  1717. font-weight: bold;
  1718. -webkit-appearance: none; /* for box shadows to show on iOS */
  1719. }
  1720.  
  1721. .input__field:focus {
  1722. outline: none;
  1723. }
  1724.  
  1725. .input__label {
  1726. display: inline-block;
  1727. float: right;
  1728. padding: 0 0.5em;
  1729. width: 40%;
  1730. font-size: 80%;
  1731. font-weight:bold;
  1732. -webkit-font-smoothing: antialiased;
  1733. -moz-osx-font-smoothing: grayscale;
  1734. -webkit-touch-callout: none;
  1735. -webkit-user-select: none;
  1736. -khtml-user-select: none;
  1737. -moz-user-select: none;
  1738. -ms-user-select: none;
  1739. user-select: none;
  1740. }
  1741.  
  1742. .input__label-content {
  1743. position: relative;
  1744. display: block;
  1745. padding: 0;
  1746. width: 100%;
  1747. }
  1748.  
  1749. .graphic {
  1750. position: absolute;
  1751. top: 0;
  1752. left: 0;
  1753. fill: none;
  1754. }
  1755.  
  1756. .input--madoka {
  1757. margin: 1.2em 0 0 0;
  1758. }
  1759.  
  1760. .input__field--madoka {
  1761. width: 100%;
  1762. background: transparent;
  1763. color: #999;
  1764. }
  1765.  
  1766. .input__label--madoka {
  1767. position: absolute;
  1768. width: 100%;
  1769. height: 100%;
  1770. color: #999;
  1771. text-align: left;
  1772. cursor: text;
  1773. }
  1774.  
  1775. .night-mode .input__field--madoka, .night-mode .input__label--madoka {color:#eaeaea;}
  1776.  
  1777. .input__label-content--madoka {
  1778. -webkit-transform-origin: 0% 50%;
  1779. transform-origin: 0% 50%;
  1780. -webkit-transition: -webkit-transform 0.3s;
  1781. transition: transform 0.3s;
  1782. }
  1783.  
  1784. .graphic--madoka {
  1785. -webkit-transform: scale3d(1, -1, 1);
  1786. transform: scale3d(1, -1, 1);
  1787. -webkit-transition: stroke-dashoffset 0.3s;
  1788. transition: stroke-dashoffset 0.3s;
  1789. pointer-events: none;
  1790. stroke: #999;
  1791. stroke-width: 4px;
  1792. stroke-dasharray: 962;
  1793. stroke-dashoffset: 558;
  1794. }
  1795.  
  1796. .night-mode .graphic--madoka {stroke:#eaeaea;}
  1797.  
  1798. .input__field--madoka:focus + .input__label--madoka,
  1799. .input--filled .input__label--madoka {
  1800. cursor: default;
  1801. pointer-events: none;
  1802. }
  1803.  
  1804. .input__field--madoka:focus + .input__label--madoka .graphic--madoka,
  1805. .input--filled .graphic--madoka {
  1806. stroke-dashoffset: 0;
  1807. }
  1808.  
  1809. .input__field--madoka:focus + .input__label--madoka .input__label-content--madoka,
  1810. .input--filled .input__label-content--madoka {
  1811. -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 3em, 0);
  1812. transform: scale3d(0.81, 0.81, 1) translate3d(0, 3em, 0);
  1813. }
  1814.  
  1815. /*multicol junk*/
  1816.  
  1817. {block:indexpage}
  1818.  
  1819. .multicol.{select:post width} #postwrap {
  1820. width:calc(84vw - 300px);
  1821. margin:auto;
  1822. font-size:16px;
  1823. column-count: 2;
  1824. column-gap: 48px;
  1825. padding-top:48px;
  1826. -webkit-column-break-inside: avoid;
  1827. page-break-inside: avoid;
  1828. break-inside: avoid;
  1829. }
  1830.  
  1831. @media screen and (min-width:1600px){
  1832. .multicol.{select:post width} #postwrap {font-size:20px;}
  1833. }
  1834.  
  1835. @media screen and (min-width:1920px){
  1836. .multicol.{select:post width} #postwrap {font-size:24px;}
  1837. }
  1838.  
  1839.  
  1840. .multicol.{select:post width} div.posthold {
  1841. width:100%;
  1842. position:relative;
  1843. display:inline-block;
  1844. margin: 0 0 72px;
  1845. }
  1846.  
  1847.  
  1848. .multicol.{select:post width} aside.sidequote,.multicol.{select:post width} aside.sidenav {
  1849. width:120px;
  1850. }
  1851.  
  1852.  
  1853. .multicol.{select:post width} nav.sblinks a {
  1854. width:100px;
  1855. -webkit-perspective: 400px;
  1856. -moz-perspective: 400px;
  1857. perspective: 400px;
  1858. }
  1859.  
  1860. .multicol.{select:post width} nav.sblinks a span {
  1861. -webkit-transform-origin: 50% 50% -50px;
  1862. -moz-transform-origin: 50% 50% -50px;
  1863. transform-origin: 50% 50% -50px;
  1864.  
  1865. }
  1866.  
  1867. .multicol.{select:post width} .input {
  1868. width:100px;
  1869. }
  1870.  
  1871. @media screen and (min-width:1600px) {
  1872. .multicol.{select:post width} #postwrap {
  1873. width:calc(84vw - 360px);
  1874. column-gap: 60px;
  1875. }
  1876.  
  1877. .multicol.{select:post width} aside.sidequote,.multicol.{select:post width} aside.sidenav {
  1878. width:180px;
  1879. }
  1880.  
  1881. .multicol.{select:post width} nav.sblinks a span {
  1882. -webkit-transform-origin: 50% 50% -75px;
  1883. -moz-transform-origin: 50% 50% -75px;
  1884. transform-origin: 50% 50% -75px;
  1885.  
  1886. }
  1887.  
  1888. .multicol.{select:post width} nav.sblinks a {
  1889. width:150px;
  1890. -webkit-perspective: 600px;
  1891. -moz-perspective: 600px;
  1892. perspective: 600px;
  1893. }
  1894.  
  1895. .multicol.{select:post width} .input {
  1896. width:150px;
  1897. }
  1898. }
  1899.  
  1900. @media screen and (min-width:1920px) {
  1901. .multicol.{select:post width} #postwrap {
  1902. width:calc(84vw - 480px);
  1903. column-gap: 80px;
  1904. }
  1905.  
  1906. .multicol.{select:post width} aside.sidequote,.multicol.{select:post width} aside.sidenav {
  1907. width:240px;
  1908. }
  1909.  
  1910. .multicol.{select:post width} nav.sblinks a span {
  1911. -webkit-transform-origin: 50% 50% -100px;
  1912. -moz-transform-origin: 50% 50% -100px;
  1913. transform-origin: 50% 50% -100px;
  1914.  
  1915. }
  1916.  
  1917. .multicol.{select:post width} nav.sblinks a {
  1918. width:200px;
  1919. -webkit-perspective: 800px;
  1920. -moz-perspective: 800px;
  1921. perspective: 800px;
  1922. }
  1923.  
  1924. .multicol.{select:post width} .input {
  1925. width:200px;
  1926. }
  1927. }
  1928.  
  1929. @media screen and (max-width:1000px) {
  1930. .multicol.{select:post width} aside.sidequote,.multicol.{select:post width} aside.sidenav {display:none;}
  1931.  
  1932. .multicol.{select:post width} #postwrap {
  1933. width:100%;
  1934. }
  1935. }
  1936.  
  1937. @media screen and (max-width:1000px) {
  1938. .multicol.{select:post width} aside.sidequote,.multicol.{select:post width} aside.sidenav {display:none;}
  1939.  
  1940. .multicol.{select:post width} #postwrap {
  1941. width:100%;
  1942. }
  1943. }
  1944.  
  1945. @media screen and (max-width: 800px) {
  1946. .multicol.{select:post width} #postwrap {
  1947. column-count: 1;
  1948. column-gap: 0;
  1949. padding-top:0;
  1950. }
  1951.  
  1952. .multicol.{select:post width} div.posthold {
  1953. display:block;
  1954. margin:120px auto 120px auto;
  1955. }
  1956.  
  1957. }
  1958.  
  1959. {/block:indexpage}
  1960.  
  1961.  
  1962.  
  1963. @media screen and (min-width:1400px) {
  1964.  
  1965. .singlecol.post500 #postwrap, .singlecol.post450 #postwrap, .singlecol.post400 #postwrap, .singlecol.post350 #postwrap {
  1966. width:540px;
  1967. }
  1968.  
  1969. .singlecol.post500 aside.sidequote,.singlecol.post450 aside.sidequote,.singlecol.post400 aside.sidequote,.singlecol.post350 aside.sidequote, .singlecol.post500 aside.sidenav, .singlecol.post450 aside.sidenav, .singlecol.post400 aside.sidenav,.singlecol.post350 aside.sidenav {
  1970.  
  1971. width:calc((84vw - 540px) / 2);
  1972.  
  1973. }
  1974.  
  1975.  
  1976. }
  1977.  
  1978. @media screen and (min-width:1600px) {
  1979.  
  1980.  
  1981.  
  1982. .singlecol.{select:post width} #postwrap {block:permalinkpage},.multicol.{select:post width} #postwrap{/block:permalinkpage} {
  1983. width:700px;
  1984. }
  1985.  
  1986. .singlecol.{select:post width} aside.sidequote,.singlecol.{select:post width} aside.sidenav {block:permalinkpage},.multicol.{select:post width} aside.sidequote, .multicol.{select:post width} aside.sidenav{/block:permalinkpage} {
  1987.  
  1988. width:calc((84vw - 700px) / 2);
  1989.  
  1990. }
  1991.  
  1992. .singlecol.{select:post width} nav.sblinks a {block:permalinkpage},.multicol.{select:post width} nav.sblinks a{/block:permalinkpage} {
  1993. width:200px;
  1994. -webkit-perspective: 800px;
  1995. -moz-perspective: 800px;
  1996. perspective: 800px;
  1997. }
  1998.  
  1999. .singlecol.{select:post width} nav.sblinks a span {block:permalinkpage},.multicol.{select:post width} nav.sblinks a span{/block:permalinkpage} {
  2000. -webkit-transform-origin: 50% 50% -100px;
  2001. -moz-transform-origin: 50% 50% -100px;
  2002. transform-origin: 50% 50% -100px;
  2003.  
  2004. }
  2005.  
  2006. .singlecol.{select:post width} .input {block:permalinkpage},.multicol.{select:post width} .input{/block:permalinkpage} {
  2007. width:200px;
  2008.  
  2009. }
  2010.  
  2011. .input__field {
  2012. padding:1.5em;
  2013. }
  2014.  
  2015. }
  2016.  
  2017. @media screen and (min-width:1920px) {
  2018.  
  2019.  
  2020. .singlecol.{select:post width} #postwrap {block:permalinkpage},.multicol.{select:post width} #postwrap{/block:permalinkpage}{
  2021. width:960px;
  2022. }
  2023.  
  2024. .singlecol.{select:post width} aside.sidequote,.singlecol.{select:post width} aside.sidenav {block:permalinkpage},.multicol.{select:post width} aside.sidequote, .multicol.{select:post width} aside.sidenav{/block:permalinkpage} {
  2025.  
  2026. width:calc((84vw - 960px) / 2);
  2027.  
  2028. }
  2029.  
  2030. .singlecol.{select:post width} nav.sblinks a {block:permalinkpage},.multicol.{select:post width} nav.sblinks a{/block:permalinkpage} {
  2031. width:250px;
  2032. -webkit-perspective: 1000px;
  2033. -moz-perspective: 1000px;
  2034. perspective: 1000px;
  2035. }
  2036.  
  2037. .singlecol.{select:post width} nav.sblinks a span {block:permalinkpage},.multicol.{select:post width} nav.sblinks a span{/block:permalinkpage} {
  2038. -webkit-transform-origin: 50% 50% -125px;
  2039. -moz-transform-origin: 50% 50% -125px;
  2040. transform-origin: 50% 50% -125px;
  2041.  
  2042. }
  2043.  
  2044. .singlecol.{select:post width} .input {block:permalinkpage},.multicol.{select:post width} .input{/block:permalinkpage}{
  2045. width:250px;
  2046. }
  2047.  
  2048. .input__field {
  2049. padding:2em;
  2050. }
  2051.  
  2052. }
  2053.  
  2054. @media screen and (max-width:1200px) {
  2055.  
  2056. .singlecol.post700 #postwrap {
  2057. width:100%;
  2058. }
  2059.  
  2060.  
  2061. .singlecol.post700 aside.sidequote,.singlecol.post700 aside.sidenav {
  2062.  
  2063. display:none;
  2064.  
  2065. }
  2066.  
  2067. .singlecol.post540 nav.sblinks a {block:permalinkpage},.multicol.{select:post width} nav.sblinks a{/block:permalinkpage} {
  2068. width:100px;
  2069. -webkit-perspective: 400px;
  2070. -moz-perspective: 400px;
  2071. perspective: 400px;
  2072. }
  2073.  
  2074. .singlecol.post540 nav.sblinks a span {block:permalinkpage},.multicol.{select:post width} nav.sblinks a span{/block:permalinkpage} {
  2075. -webkit-transform-origin: 50% 50% -50px;
  2076. -moz-transform-origin: 50% 50% -50px;
  2077. transform-origin: 50% 50% -50px;
  2078.  
  2079. }
  2080.  
  2081. .singlecol.post540 .input {block:permalinkpage},.multicol.{select:post width} .input{/block:permalinkpage} {
  2082. width:100px;
  2083. }
  2084.  
  2085.  
  2086.  
  2087. }
  2088.  
  2089. @media screen and (max-width:1000px) {
  2090.  
  2091. .singlecol.post540 #postwrap, .singlecol.post500 #postwrap {block:permalinkpage},.multicol.{select:post width} #postwrap{/block:permalinkpage}{
  2092. width:100%;
  2093. }
  2094.  
  2095. .singlecol.post540 aside.sidequote,.singlecol.post540 aside.sidenav,.singlecol.post500 aside.sidequote,.singlecol.post500 aside.sidenav {block:permalinkpage},.multicol.{select:post width} aside.sidenav, .multicol.{select:post width} aside.sidequote {/block:permalinkpage}{
  2096.  
  2097. display:none;
  2098.  
  2099. }
  2100.  
  2101.  
  2102. .singlecol.{select:post width} nav.sblinks a {block:permalinkpage},.multicol.{select:post width} nav.sblinks a{/block:permalinkpage} {
  2103. width:100px;
  2104. -webkit-perspective: 400px;
  2105. -moz-perspective: 400px;
  2106. perspective: 400px;
  2107. }
  2108.  
  2109. .singlecol.{select:post width} nav.sblinks a span {block:permalinkpage},.multicol.{select:post width} nav.sblinks a span{/block:permalinkpage}{
  2110. -webkit-transform-origin: 50% 50% -50px;
  2111. -moz-transform-origin: 50% 50% -50px;
  2112. transform-origin: 50% 50% -50px;
  2113.  
  2114. }
  2115.  
  2116. .singlecol.{select:post width} .input {block:permalinkpage},.multicol.{select:post width} .input{/block:permalinkpage} {
  2117. width:100px;
  2118. }
  2119.  
  2120. }
  2121.  
  2122. @media screen and (max-width:800px) {
  2123.  
  2124. .singlecol.{select:post width} #postwrap {
  2125. width:100%;
  2126. }
  2127.  
  2128. .singlecol.{select:post width} aside.sidequote,.singlecol.{select:post width} aside.sidenav {
  2129.  
  2130. display:none;
  2131.  
  2132. }
  2133.  
  2134. }
  2135.  
  2136.  
  2137.  
  2138.  
  2139. /*styling posts*/
  2140.  
  2141. .posts iframe, .posts li, .posts pre, .posts embed, .posts video, .posts object, .posts blockquote, .posts figure {max-width:100% !important;}
  2142.  
  2143. iframe#ask_form {height:280px!important;}
  2144.  
  2145. @media screen and (max-width:500px) {
  2146. iframe#ask_form {height:320px!important;}
  2147. }
  2148.  
  2149. .posts h1:first-child {margin-top:0.5em;}
  2150.  
  2151. .posts .captions {
  2152. word-wrap:break-word;
  2153. text-align:justify;
  2154. }
  2155.  
  2156. .posts .captions *:not(h1):not(h2):not(p[class*="npf-"]) {font-size:inherit;}
  2157.  
  2158. p.npf_chat {font-family:inherit;}
  2159.  
  2160. .posts .captions sub, .posts .captions sup,.posts .captions small {font-size:inherit;}
  2161.  
  2162. .posts.post_text .captions p:first-child {margin-top:0;}
  2163.  
  2164. .posts .captions a, article.fask a, article.biography a, span.qsource a {color:inherit;border-bottom:1px solid #222;}
  2165.  
  2166. .night-mode .posts .captions a,.night-mode article.fask a,.night-mode article.biography a, .night-mode span.qsource a {border-bottom:1px solid #fff;}
  2167.  
  2168. .posts .captions a:hover, article.fask a:hover, article.biography a:hover, span.qsource a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  2169.  
  2170. .night-mode .posts .captions a:hover,.night-mode article.fask a:hover,.night-mode article.biography a:hover, .night-mode span.qsource a:hover {color:{color:accent};border-bottom:1px solid {color:accent};}
  2171.  
  2172. .posts img {
  2173. max-width:100%;
  2174. height:auto;
  2175. display:block;
  2176. }
  2177.  
  2178. .posts img.photop {display:block;line-height:0;}
  2179.  
  2180. .defcap .posts blockquote {
  2181. border-left: 1px solid #222;
  2182. margin-left: 0;
  2183. margin-right: 0;
  2184. padding-left: calc(1em * 1.5);
  2185. }
  2186.  
  2187. .night-mode.defcap .posts blockquote {border-left:1px solid #999;}
  2188.  
  2189. /*unnested stuff*/
  2190.  
  2191. .posts pre {
  2192. white-space: pre-wrap;
  2193. white-space: -moz-pre-wrap;
  2194. white-space: -pre-wrap;
  2195. white-space: -o-pre-wrap;
  2196. word-wrap: break-word;
  2197. background:#f5f5f5;
  2198. padding:1em;
  2199. }
  2200.  
  2201. .night-mode .posts pre {background:#222;}
  2202.  
  2203. .posts h1 {font-size:1.8em;}
  2204. .posts h1:not(.plink):first-letter{border-bottom:3px solid {color:accent};}
  2205. .posts h2 {line-height:1.5;}
  2206.  
  2207. .posts ol, .fask ol,.biography ol, .posts ul,.fask ul, .biography ul {
  2208. list-style: none;
  2209. margin-top: 0;
  2210. padding-left: 0;
  2211. }
  2212. .posts ol, .fask ol,.biography ol {
  2213. list-style: decimal inside;
  2214. }
  2215.  
  2216. .posts ul,.fask ul, .biography ul {
  2217. list-style: circle inside;
  2218. }
  2219.  
  2220. .posts li, .fask li, .biography li {margin-top:1em;}
  2221.  
  2222. .biography p + ul li {margin-top:0.5em;}
  2223.  
  2224. .posts ol ol,.fask ol ol,.biography ol ol,.posts ol ul,.fask ol ul,.biography ol ul, .posts ul ol,.fask ul ol,.biography ul ol,.posts ul ul,.fask ul ul, .biography ul ul {
  2225. margin:1em 0 1em 0;
  2226. }
  2227.  
  2228.  
  2229. div.npf_row {
  2230. display:-webkit-box;
  2231. display:-ms-flexbox;
  2232. display:flex;
  2233. max-width:100%;
  2234. margin:0!important;
  2235. max-height:none!important;
  2236. }
  2237.  
  2238. .npf_row figure {margin-top:0;}
  2239. .npf_row:first-of-type {margin-top:1em;}
  2240. .npf_row > figure {
  2241. flex: 1;
  2242. padding:2px;
  2243. }
  2244.  
  2245. figure.tmblr-full {margin:0;}
  2246.  
  2247. figure.tmblr-full img {width:100%;}
  2248.  
  2249. .post-content div.npf_row figure[data-enable-lightbox="1"], .post div.npf_row figure[data-enable-lightbox="1"], body div.npf_row figure[data-enable-lightbox="1"] {cursor:help;}
  2250.  
  2251. .captions figure:not(.tmblr-full) {margin-left:0;margin-right:0;margin-top:1em;}
  2252.  
  2253. .captions > blockquote > figure.tmblr-full + figure.tmblr-full {margin:4px;}
  2254.  
  2255. /*unnested styles*/
  2256.  
  2257. blockquote.tumblr_parent {
  2258. max-width:100%;
  2259. margin:0;
  2260. margin-top:1em;
  2261. }
  2262.  
  2263. .tumblr_parent blockquote {
  2264. padding: 0 0 0 1.5em;
  2265. margin: 0 0 0 0;
  2266. }
  2267.  
  2268. .day-mode .tumblr_parent blockquote {
  2269. border-left:1px #222 solid;
  2270. }
  2271.  
  2272. .night-mode .tumblr_parent blockquote {
  2273. border-left:1px #fff solid;
  2274. }
  2275.  
  2276. .tumblr_parent blockquote div {margin:1em 0 1em 0;}
  2277.  
  2278. .unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a):not(span):not(figure) {vertical-align:middle;}
  2279.  
  2280. img.tumblr_avatar {border-radius:5%;margin-right:0.8em;width:3em;height:3em;display:inline;margin-top:0.4em;}
  2281.  
  2282. img.tumblr_avatar + a.tumblr_blog {
  2283. font-weight:bold;
  2284. vertical-align:middle;
  2285. color:inherit;
  2286. font-family:'{select:heading font}';
  2287. -webkit-transition: all 0.3s ease-in-out;
  2288. transition:all 0.3s ease-in-out;
  2289. }
  2290.  
  2291. .day-mode img.tumblr_avatar + a.tumblr_blog {border-bottom:1px solid #222;}
  2292.  
  2293. .night-mode img.tumblr_avatar + a.tumblr_blog {border-bottom:1px solid #fff;}
  2294.  
  2295. img.tumblr_avatar + a.tumblr_blog:hover {
  2296. color:{color:accent};
  2297. border-bottom:1px solid {color:accent};
  2298. -webkit-transition: all 0.3s ease-in-out;
  2299. transition:all 0.3s ease-in-out
  2300. }
  2301.  
  2302. .tumblr_parent a.tumblr_blog:first-child {border-bottom:none!important;font-weight:bold;font-family:'{select:heading font}';}
  2303.  
  2304. .captions h1:first-letter {border-bottom:none!important;}
  2305.  
  2306. .tumblr_parent img.tumblr_avatar + a.tumblr_blog + div.npf_row, .tumblr_parent img.tumblr_avatar + a.tumblr_blog + figure.tmblr-full {margin-top:1em!important;}
  2307.  
  2308. @media screen and (min-width: 800px) and (max-width: 1400px) {
  2309.  
  2310. .singlecol.post350 .posthold,.singlecol.post400 .posthold {font-size:16px;}
  2311.  
  2312. }
  2313.  
  2314. /*quotes*/
  2315.  
  2316. h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin:0;text-align:center;}
  2317.  
  2318. h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}
  2319.  
  2320. h1.qshort {line-height:140%;font-size:1.8em;}
  2321. h1.qmedium, h1.qlong {line-height:160%;}
  2322.  
  2323. h1.qmedium {font-size:1.5em;}
  2324.  
  2325. h1.qlong {font-size:1.2em;}
  2326.  
  2327.  
  2328. @media screen and (max-width:500px) {
  2329. .{select:theme layout} .posts h1 ,.{select:theme layout} .posts h1.qshort {font-size:1.5em;}
  2330.  
  2331. .{select:theme layout} .posts h2 ,.{select:theme layout} .posts h1.qmedium {font-size:1.2em;}
  2332.  
  2333. .{select:theme layout} h1.qlong {font-size:1em;}
  2334. }
  2335.  
  2336. /*multicol to be adjusted*/
  2337.  
  2338. span.qsource {width:100%;display:block;text-align:center;margin-top:1em;}
  2339.  
  2340. .divider {
  2341. margin-top:1em;
  2342. text-align:center;
  2343. }
  2344.  
  2345. .divider::before {
  2346. width:20%;
  2347. height:1px;
  2348. background-color:{color:highlight};
  2349. content:"";
  2350. display:inline-block;
  2351. vertical-align:middle;
  2352. }
  2353.  
  2354. .night-mode .divider::before {background-color:{color:accent};}
  2355.  
  2356. /*chats*/
  2357. ul.chatlines {list-style:none;text-align:justify;word-wrap:break-word;}
  2358. li.clines {padding:1em;margin-top:0;margin-bottom:0;}
  2359. .chatlines li.odd {background:#f5f5f5;}
  2360.  
  2361. .night-mode .chatlines li.odd {background:#222;}
  2362.  
  2363. .posts video, .posts .tumblr_video_container {
  2364. width: 100% !important;
  2365. height: auto !important;
  2366. }
  2367.  
  2368. .posts .video > iframe, .posts iframe.embed_iframe {width:100%;display:block;}
  2369.  
  2370. @media screen and (max-width:500px) {
  2371. .posts h1 {font-size:1.5em;}
  2372. .posts h2 {font-size:1.2em;}
  2373. }
  2374.  
  2375. .link_trash {
  2376. width:100%;
  2377. height:200px;
  2378. background-repeat: no-repeat;
  2379. background-position: center;
  2380. background-size:cover;
  2381. position:relative;
  2382. background-image: linear-gradient(-45deg, {color:accent},{color:highlight});
  2383. position:relative;
  2384. }
  2385.  
  2386. .link_trash.link_exp {
  2387. height:480px;
  2388. }
  2389.  
  2390. .link_trash:before {
  2391. content:'';
  2392. position:absolute;
  2393. top:0;
  2394. left:0;
  2395. width:100%;
  2396. height:100%;
  2397. opacity:1;
  2398. background-image: linear-gradient(-45deg, rgba({RGBcolor:accent},0.9),rgba({RGBcolor:highlight},0.5),rgba({RGBColor:accent},0.9));
  2399. mix-blend-mode:normal;
  2400. -webkit-transition: all 0.3s ease-in-out 0s;
  2401. transition: all 0.3s ease-in-out 0s;
  2402. }
  2403.  
  2404. .link_trash:hover::before {
  2405. opacity:0.6;
  2406. -webkit-transition: all 0.3s ease-in-out 0s;
  2407. transition: all 0.3s ease-in-out 0s;
  2408. }
  2409.  
  2410.  
  2411.  
  2412. .plinks {
  2413. width:100%;
  2414. height:100%;
  2415. text-align:center;
  2416. position:absolute;
  2417. top:0;
  2418. left:0;
  2419. line-height:1.6;
  2420. background:rgba(0,0,0,0.1);
  2421. background-blend-mode:multiply;
  2422. -webkit-transition: all 0.3s ease-in-out 0s;
  2423. transition: all 0.3s ease-in-out 0s;
  2424. }
  2425.  
  2426. .link_trash:hover .plinks {
  2427. background:rgba(0,0,0,0.6);
  2428. -webkit-transition: all 0.3s ease-in-out 0s;
  2429. transition: all 0.3s ease-in-out 0s;
  2430. }
  2431.  
  2432. .plinks > div {
  2433. position:relative;
  2434. height:100%;
  2435. padding: 2em;
  2436. color: #fff;
  2437. display:-webkit-box;
  2438. display:-ms-flexbox;
  2439. display:flex;
  2440. -webkit-box-align:center;
  2441. -ms-flex-align:center;
  2442. align-items:center;
  2443. -webkit-box-pack:center;
  2444. -ms-flex-pack:center;
  2445. justify-content:center;
  2446. -webkit-box-orient:vertical;
  2447. -webkit-box-direction:normal;
  2448. -ms-flex-direction:column;
  2449. flex-direction:column;
  2450. -webkit-backface-visibility: hidden;
  2451. backface-visibility: hidden;
  2452. }
  2453.  
  2454. .link_trash:not(.link_exp) .plinks > div h1 {width:100%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;padding-left:1em;padding-right:1em;}
  2455.  
  2456.  
  2457.  
  2458.  
  2459. .plinks > div > a {
  2460. position:absolute;
  2461. display:block;
  2462. top:0;
  2463. left:0;
  2464. width:100%;
  2465. height:100%;
  2466. z-index:2;
  2467. }
  2468.  
  2469. .plinks > div::before,
  2470. .plinks > div::after {
  2471. position: absolute;
  2472. top: 2em;
  2473. right: 2em;
  2474. bottom: 2em;
  2475. left: 2em;
  2476. content: '';
  2477. opacity: 0;
  2478. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  2479. transition: opacity 0.35s, transform 0.35s;
  2480. }
  2481.  
  2482. .plinks > div::before {
  2483. border-top: 1px solid #fff;
  2484. border-bottom: 1px solid #fff;
  2485. -webkit-transform: scale(0,1);
  2486. transform: scale(0,1);
  2487. }
  2488.  
  2489. .plinks > div::after {
  2490. border-right: 1px solid #fff;
  2491. border-left: 1px solid #fff;
  2492. -webkit-transform: scale(1,0);
  2493. transform: scale(1,0);
  2494. }
  2495.  
  2496. .link_exp .plinks > div h1 {
  2497. padding-top:10%;
  2498. padding-left:0.5em;
  2499. padding-right:0.5em;
  2500. -webkit-transition: -webkit-transform 0.35s;
  2501. transition: transform 0.35s;
  2502. -webkit-transform: translate3d(0,-1em,0);
  2503. transform: translate3d(0,-1em,0);
  2504. }
  2505.  
  2506.  
  2507. .plinks > div p {
  2508. padding: 1em 2.5em;
  2509. opacity: 0;
  2510. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  2511. transition: opacity 0.35s, transform 0.35s;
  2512. -webkit-transform: translate3d(0,1em,0);
  2513. transform: translate3d(0,1em,0);
  2514. }
  2515.  
  2516. .link_trash:hover .plinks > div::before,
  2517. .link_trash:hover .plinks > div::after {
  2518. opacity: 1;
  2519. -webkit-transform: scale(1);
  2520. transform: scale(1);
  2521. }
  2522.  
  2523. .link_trash:hover .plinks > div h1,
  2524. .link_trash:hover .plinks > div p {
  2525. opacity: 1;
  2526. -webkit-transform: translate3d(0,0,0);
  2527. transform: translate3d(0,0,0);
  2528. }
  2529.  
  2530. @media screen and (min-width: 800px) and (max-width: 1400px) {
  2531.  
  2532. .singlecol.post400 .link_trash.link_exp, .singlecol.post350 .link_trash.link_exp {height:200px}
  2533.  
  2534. .singlecol.post400 .link_trash.link_exp .plinks > div p, .singlecol.post350 .link_trash.link_exp .plinks > div p {display:none;}
  2535.  
  2536. .singlecol.post400 .link_trash.link_exp .plinks > div h1, .singlecol.post350 .link_trash.link_exp .plinks > div h1 {width:100%;font-size:1.5em;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;padding:0 0.5em 0 0.5em;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  2537.  
  2538. }
  2539.  
  2540. @media screen and (min-width: 1600px) {
  2541.  
  2542. .singlecol.{select:post width} .link_trash.link_exp {height:560px;}
  2543.  
  2544. }
  2545.  
  2546. @media screen and (min-width: 1920px) {
  2547.  
  2548. .singlecol.{select:post width} .link_trash.link_exp {height:640px;}
  2549.  
  2550.  
  2551. }
  2552.  
  2553. {block:indexpage}
  2554.  
  2555.  
  2556.  
  2557. .multicol.{select:post width} .link_trash.link_exp .plinks > div p {display:none;}
  2558.  
  2559. .multicol.{select:post width} .link_trash.link_exp {height:200px}
  2560.  
  2561. .multicol.{select:post width} .link_trash.link_exp .plinks > div h1 {width:100%;font-size:1.5em;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;padding:0 0.5em 0 0.5em;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  2562.  
  2563.  
  2564.  
  2565. @media screen and (min-width: 1600px) {
  2566. .multicol.{select:post width} .link_trash.link_exp, .multicol.{select:post width} .link_trash:not(.link_exp) {height:240px}
  2567. }
  2568.  
  2569. {/block:indexpage}
  2570.  
  2571. @media screen and (max-width: 600px) {
  2572.  
  2573. .{select:theme layout}.{select:post width} .link_trash.link_exp {height:200px}
  2574.  
  2575. .{select:theme layout}.{select:post width} .link_trash.link_exp .plinks > div p {display:none;}
  2576.  
  2577. .{select:theme layout}.{select:post width} .link_trash.link_exp .plinks > div h1 {width:100%;font-size:1.2em;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;padding:0 0.5em 0 0.5em;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  2578.  
  2579. }
  2580.  
  2581. /*responsive stuff*/
  2582.  
  2583. .posts .plinks h1 {margin:0;margin-top:0;}
  2584. .posts .plinks h1:first-letter {border-bottom:none;}
  2585.  
  2586. .ask_cont {
  2587. width:100%;
  2588. display:flex;
  2589. display: -webkit-flex;
  2590. display: -moz-flex;
  2591. display: -ms-flex;
  2592. align-items: center;
  2593. -webkit-align-items:center;
  2594. -ms-align-items:center;
  2595. margin-bottom:1.5em;
  2596. }
  2597.  
  2598.  
  2599.  
  2600. .q_cont {position:relative;}
  2601.  
  2602. .singlecol .q_cont {block:permalinkpage},.multicol.{select:post width} .q_cont{/block:permalinkpage} {width:calc(100% - 84px);}
  2603.  
  2604. .ask_q {
  2605. margin-left:24px;
  2606. text-align:center;
  2607. color:#fff;
  2608. font-weight:normal;
  2609. padding:0.5em;
  2610. background: {color:accent};
  2611. word-wrap:break-word;
  2612. width:calc(100% - 24px);
  2613.  
  2614. }
  2615.  
  2616. .ask_q a {
  2617.  
  2618. font-size:1em;
  2619. font-weight:700;
  2620. color:#fff;
  2621. border-bottom:1px solid #fff;
  2622. }
  2623.  
  2624. .{select:theme colour} .ask_q a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  2625.  
  2626. .arrow-left {
  2627. position:absolute;
  2628. top:calc(50% - 15px);
  2629. left:0;
  2630. width: 0;
  2631. height: 0;
  2632. border-bottom: 15px solid transparent;
  2633. border-top: 15px solid transparent;
  2634. margin-top:0px;
  2635. border-right: 25px solid {color:accent};
  2636. }
  2637.  
  2638. .asker {
  2639. margin-right:12px;
  2640. }
  2641.  
  2642. .singlecol .asker {block:permalinkpage},.multicol.{select:post width} .asker{/block:permalinkpage} {width:72px;}
  2643.  
  2644. .asker img {
  2645. border-radius:50%;
  2646. -webkit-transition: all 0.3s ease-in-out;
  2647. transition: all 0.3s ease-in-out;
  2648. }
  2649.  
  2650. .asker img:hover {
  2651.  
  2652. opacity:0.5;
  2653. -moz-transform: rotate(360deg); /* IE 9 */
  2654. -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  2655. transform: rotate(360deg);
  2656. -webkit-transition: all 0.3s ease-in-out;
  2657. transition: all 0.3s ease-in-out;
  2658. }
  2659.  
  2660. {block:indexpage}
  2661. .multicol.{select:post width} .asker {width:0;display:none;}
  2662. .multicol.{select:post width} .arrow-left {display:none;}
  2663. .multicol.{select:post width} .q_cont, .multicol.{select:post width} .q_cont -ask_q {width:100%;}
  2664. .multicol.{select:post width} .ask_q {margin-left:0;}
  2665. {/block:indexpage}
  2666.  
  2667. @media screen and (min-width:1920px) {
  2668. .singlecol .q_cont {block:permalinkpage},.multicol.{select:post width} .q_cont{/block:permalinkpage} {width:calc(100% - 140px);}
  2669. .singlecol .asker {block:permalinkpage},.multicol.{select:post width} .asker{/block:permalinkpage} {width:128px;}
  2670.  
  2671. }
  2672.  
  2673. @media screen and (max-width:500px) {
  2674. .{select:theme layout}.{select:post width} .asker {width:0;display:none;}
  2675. .{select:theme layout}.{select:post width} .arrow-left {display:none;}
  2676. .{select:theme layout}.{select:post width} .q_cont, .{select:theme layout}.{select:post width} .q_cont .ask_q {width:100%;}
  2677. .{select:theme layout}.{select:post width} .ask_q {margin-left:0;}
  2678. }
  2679.  
  2680. @media (max-width:1400px) and (min-width:800px) {
  2681. .singlecol.post500 .asker, .singlecol.post450 .asker {width:48px;}
  2682. .singlecol.post500 .q_cont, .singlecol.post450 .q_cont {width:calc(100% - 60px);}
  2683.  
  2684. .singlecol.post350 .asker, .singlecol.post400 .asker {width:0;display:none;}
  2685. .singlecol.post350 .arrow-left, .singlecol.post400 .arrow-left {display:none;}
  2686. .singlecol.post350 .q_cont,.singlecol.post400 .q_cont ,.singlecol.post350 .q_cont .ask_q, .singlecol.post400 .q_cont .ask_q {width:100%;}
  2687.  
  2688. .singlecol.post350 .ask_q, .singlecol.post400 .ask_q {margin-left:0;}
  2689.  
  2690. }​
  2691.  
  2692.  
  2693.  
  2694.  
  2695.  
  2696.  
  2697.  
  2698. /*lightbox*/
  2699. body:not(.night-mode) #tumblr_lightbox,body:not(.night-mode) .tmblr-lightbox {background-color:rgba(255,255,255,0.7)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  2700.  
  2701.  
  2702.  
  2703. body.night-mode #tumblr_lightbox,body.night-mode .tmblr-lightbox {background-color:rgba(0,0,0,0.7)!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }
  2704.  
  2705. #tumblr_lightbox img,.tmblr-lightbox .vignette {
  2706. opacity:0;
  2707. -webkit-box-shadow:none!important;
  2708. box-shadow:none!important;
  2709. }
  2710.  
  2711. #tumblr_lightbox_center_image {
  2712. opacity: 1!important;
  2713. background-color: transparent!important;
  2714. }
  2715.  
  2716. #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
  2717. -webkit-transition: all 0.3s ease-in-out;
  2718. transition:all 0.3s ease-in-out;
  2719. }
  2720.  
  2721. #tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
  2722. opacity:1!important;
  2723. -webkit-transition: all 0.3s ease-in-out;
  2724. transition:all 0.3s ease-in-out;
  2725. }
  2726.  
  2727.  
  2728. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  2729. box-shadow: 0 0 0 transparent !important;
  2730. }
  2731.  
  2732. #tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  2733. border-radius:0!important;
  2734. -moz-border-radius: 0!important;
  2735. -webkit-border-radius: 0!important;
  2736. -o-border-radius: 0!important;
  2737. background:transparent !important;
  2738. padding:0 !important;
  2739. }
  2740.  
  2741. #tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
  2742.  
  2743. .tmblr-lightbox .lightbox-image-container {cursor:help!important;}
  2744.  
  2745. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  2746. .photo-slideshow .count-1 {
  2747. margin-bottom:{select:photoset gutter}!important;
  2748. }
  2749.  
  2750.  
  2751. .photo-slideshow .count-2 {
  2752. margin-left:{select:photoset gutter}!important;
  2753. margin-bottom:{select:photoset gutter}!important;
  2754. width:calc(50% - ({select:photoset gutter}/2))!important;
  2755. }
  2756.  
  2757. .photo-slideshow .count-2:first-child {
  2758. margin-left:0!important;
  2759. }
  2760.  
  2761. .photo-slideshow .count-3 {
  2762. margin-left:{select:photoset gutter}!important;
  2763. margin-bottom:{select:photoset gutter}!important;
  2764. width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
  2765. }
  2766.  
  2767. .photo-slideshow .count-3:first-child {
  2768. margin-left:0!important;
  2769. }
  2770. .photo-slideshow {
  2771. display:block!important;
  2772. margin-bottom:calc(-({select:photoset gutter} - 3px));
  2773. position:relative;
  2774. width:100%;
  2775. }
  2776.  
  2777. .defcap .photo-slideshow.processed {margin-bottom:0!important;}
  2778.  
  2779. .row:last-of-type .count-1{margin-bottom:0!important;}
  2780.  
  2781. .unnested .photo-slideshow.processed {margin-bottom:0!important;}
  2782. /* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
  2783.  
  2784. .audio_cont {
  2785. position:relative;
  2786. width:100%;
  2787. font-size:90%;
  2788. margin-bottom:0;
  2789. display:-webkit-box;
  2790. display:-ms-flexbox;
  2791. display:flex;
  2792. -webkit-box-align:center;
  2793. -ms-flex-align:center;
  2794. align-items:center;
  2795. }
  2796.  
  2797.  
  2798.  
  2799. .playback {
  2800. position:absolute;
  2801. background:#fff;
  2802. z-index:10;
  2803. opacity:0;
  2804. text-align:center;
  2805. width:100px;
  2806. height:100px;
  2807. margin-top:10px;
  2808. margin-left:10px;
  2809. margin-bottom:10px;
  2810. -webkit-transition: all 0.3s ease-in-out;
  2811. transition:all 0.3s ease-in-out;
  2812. }
  2813.  
  2814.  
  2815.  
  2816.  
  2817.  
  2818. .playback:hover {
  2819. opacity:0.8;
  2820. -webkit-transition: all 0.3s ease-in-out;
  2821. transition:all 0.3s ease-in-out;
  2822. }
  2823.  
  2824.  
  2825. .playbox {
  2826. overflow:hidden;
  2827. width:40px;
  2828. height:40px;
  2829. margin-top:35px;
  2830. margin-left:35px;
  2831. }
  2832.  
  2833.  
  2834. iframe.tumblr_audio_player {display:block;}
  2835.  
  2836. .audio_cover {
  2837. position:relative;
  2838. margin-left:0;
  2839. width:120px;
  2840. height:120px;
  2841. }
  2842.  
  2843.  
  2844.  
  2845.  
  2846. .audio_info {
  2847. padding:0;
  2848. margin-left:0px;
  2849. display:-webkit-box;
  2850. display:-ms-flexbox;
  2851. display:flex;
  2852. -webkit-box-pack:center;
  2853. -ms-flex-pack:center;
  2854. justify-content:center;
  2855. -webkit-box-align:center;
  2856. -ms-flex-align:center;
  2857. align-items:center;
  2858. width:calc(100% - 120px);
  2859. height:120px;
  2860. }
  2861.  
  2862.  
  2863.  
  2864. @media screen and (min-width: 800px) and (max-width: 1400px) {
  2865. .singlecol.post350 .audio_info, .singlecol.post400 .audio_info {block:indexpage},.multicol .audio_info{/block:indexpage} {
  2866. width:calc(100% - 100px);
  2867. height:100px;
  2868. line-height:180%;
  2869. }
  2870.  
  2871. .singlecol.post350 .audio_cover, .singlecol.post400 .audio_cover {block:indexpage},.multicol .audio_cover{/block:indexpage} {
  2872. width:100px;
  2873. height:100px;
  2874. }
  2875.  
  2876. .singlecol.post350 .playbox , .singlecol.post400 .playbox {block:indexpage},.multicol .playbox {/block:indexpage} {
  2877. width:30px;
  2878. height:30px;
  2879. margin-top:25px;
  2880. margin-left:25px;
  2881. }
  2882.  
  2883. .singlecol.post350 .playback , .singlecol.post400 .playback {block:indexpage},.multicol .playback {/block:indexpage} {
  2884. height:80px;
  2885. width:80px;
  2886. }
  2887.  
  2888. }
  2889.  
  2890. @media screen and (min-width:1600px) {
  2891. .singlecol .playback {width:140px;height:140px;margin-left:20px;margin-top:20px;}
  2892. .singlecol .playbox {width:40px;height:40px;margin-top:50px;margin-left:50px;}
  2893. .singlecol .audio_cover {width:180px;height:180px;}
  2894. .singlecol .audio_info {
  2895. width:calc(100% - 180px);
  2896. height:180px;
  2897. }
  2898.  
  2899. {block:permalinkpage}
  2900. .multicol .playback {width:140px;height:140px;margin-left:20px;margin-top:20px;}
  2901. .multicol .playbox {width:40px;height:40px;margin-top:50px;margin-left:50px;}
  2902. .multicol .audio_cover {width:180px;height:180px;}
  2903. .multicol .audio_info {
  2904. width:calc(100% - 180px);
  2905. height:180px;
  2906. }
  2907. {/block:permalinkpage}
  2908. }
  2909.  
  2910.  
  2911. .day-mode .qudio_info {background:#f5f5f5;}
  2912. .night-mode .audio_info {background:#222;}
  2913.  
  2914. .audio_info > div {
  2915. font-weight:normal;
  2916. text-overflow: ellipsis;
  2917. white-space: nowrap;
  2918. overflow:hidden;
  2919. max-width:calc(100% - 50px);
  2920. }
  2921.  
  2922. .postfooter {
  2923. width:100%;
  2924. margin-top:1.5em;
  2925. font-weight:400;
  2926. display:-webkit-box;
  2927. display:-ms-flexbox;
  2928. display:flex;
  2929. display:-webkit-flex;
  2930. display:-moz-flex;
  2931. display:-ms-flex;
  2932. -webkit-box-align:center;
  2933. -ms-flex-align:center;
  2934. align-items:center;
  2935. -webkit-align-items:center;
  2936. -moz-align-items:center;
  2937. -ms-align-items:center;
  2938. -webkit-box-pack:start;
  2939. -webkit-justify-content:flex-start;
  2940. -ms-flex-pack:start;
  2941. justify-content:flex-start;
  2942. }
  2943. .postfooter a {color:inherit;}
  2944. .postfooter a:hover {color:{color:accent};}
  2945.  
  2946. .postdate a {font-weight:bold;font-family:'{select:heading font}';}
  2947.  
  2948. div.viasrc {margin-left:1.5em;text-transform:uppercase;letter-spacing:1.2px;}
  2949.  
  2950. @media screen and (max-width:400px) {
  2951. .postfooter {
  2952. font-size:16px;
  2953. }
  2954.  
  2955. div.viasrc {margin-left:1em;letter-spacing:1px;}
  2956. }
  2957.  
  2958. .socactions {
  2959. display:-webkit-box;
  2960. display:-ms-flexbox;
  2961. display:flex;
  2962. display:-webkit-flex;
  2963. display:-moz-flex;
  2964. display:-ms-flex;
  2965. -webkit-box-align:center;
  2966. -ms-flex-align:center;
  2967. align-items:center;
  2968. -webkit-align-items:center;
  2969. -moz-align-items:center;
  2970. -ms-align-items:center;
  2971. margin-left:auto;
  2972. }
  2973.  
  2974. .socactions svg {
  2975. display:block;
  2976. -webkit-transition: all 0.3s ease-in-out;
  2977. transition:all 0.3s ease-in-out;
  2978. }
  2979.  
  2980. .day-mode .socactions svg {fill:#222;}
  2981. .night-mode .socactions svg {fill:#fff;}
  2982.  
  2983. .rihrih svg:hover {
  2984. fill:{color:highlight};
  2985. -webkit-transition: all 0.3s ease-in-out;
  2986. transition:all 0.3s ease-in-out;
  2987. }
  2988.  
  2989. .rihrih {
  2990. position: relative;
  2991. display: block;
  2992. width: 1em;
  2993. height: 1em;
  2994. margin-right:0.8em;
  2995. }
  2996.  
  2997. .custom-like-button {
  2998. position: relative;
  2999. display: block;
  3000. width: 1em;
  3001. height: 1em;
  3002. }
  3003.  
  3004. /* class for the Tumblr Like Button iframe */
  3005. .like_button {
  3006. position: absolute;
  3007. cursor:pointer;
  3008. top: 0;
  3009. left: 0;
  3010. right: 0;
  3011. bottom: 0;
  3012. width: 100%;
  3013. height: 100%;
  3014. opacity: 0;
  3015. z-index: 3;
  3016. }
  3017. /* Force iframe to fill button */
  3018. .like_button iframe {
  3019. width: 100% !important;
  3020. height: 100% !important;
  3021. display: block!important;
  3022. }
  3023. /* class for Our Like Button */
  3024. .our_button {
  3025. position: absolute;
  3026. top: 0;
  3027. left: 0;
  3028. right: 0;
  3029. bottom: 0;
  3030. width: 100%;
  3031. height: 100%;
  3032. z-index: 1;
  3033. }
  3034.  
  3035. .like_button:hover + .our_button svg, .like_button.liked + .our_button svg {
  3036. fill: red;
  3037. -webkit-transition: all 0.3s ease-in-out;
  3038. transition:all 0.3s ease-in-out;
  3039. }
  3040.  
  3041. .posts .postfooter .lnr {width:100%;height:100%;}
  3042.  
  3043. .tagsbox {
  3044. font-size:80%;
  3045. width:100%;
  3046. margin-top:0.5em;
  3047. text-align:left;
  3048. }
  3049.  
  3050. .tagsbox {word-break: break-all;}
  3051. .tagsbox a {color:inherit;margin-right: 0.8em;display:inline;}
  3052.  
  3053. /*permalink note list*/
  3054.  
  3055. /*def & txt notes*/
  3056.  
  3057. .tumblr_notes {text-align:justify;margin-top:3em;}
  3058.  
  3059. .def_notes .tumblr_notes ol.notes, .txt_notes .tumblr_notes ol.notes{list-style:none;margin:0;padding-left:0;}
  3060.  
  3061. .def_notes .tumblr_notes ol.notes li.note, .txt_notes .tumblr_notes ol.notes li.note {
  3062. display:flex;
  3063. display:-webkit-flex;
  3064. display:-moz-flex;
  3065. display:-ms-flex;
  3066. -webkit-box-orient: horizontal;
  3067. -webkit-box-direction: normal;
  3068. -ms-flex-flow: row wrap;
  3069. flex-flow: row wrap;
  3070. -webkit-box-align: center;
  3071. -ms-flex-align: center;
  3072. align-items: center;
  3073. margin:1em 0 1em 0;
  3074. }
  3075.  
  3076. .def_notes .tumblr_notes ol.notes li.note:first-of-type, .txt_notes .tumblr_notes ol.notes li.note:first-of-type {margin-top:0.5em;}
  3077.  
  3078. .def_notes .tumblr_notes li.note:last-of-type, .txt_notes .tumblr_notes li.note:last-of-type {margin-bottom:0.5em;}
  3079.  
  3080. .def_notes .tumblr_notes ol.notes li.note a.avatar_frame {height:4em;margin-right:1em;}
  3081.  
  3082. .txt_notes .tumblr_notes ol.notes li.note a.avatar_frame {display:none;}
  3083.  
  3084.  
  3085. .def_notes .tumblr_notes ol.notes li.note img.avatar {
  3086. border-radius:5px;
  3087. width:4em;
  3088. height:4em;
  3089. opacity:1;
  3090. -webkit-transition: all 0.3s ease-in-out;
  3091. transition:all 0.3s ease-in-out;
  3092. }
  3093.  
  3094. .txt_notes .tumblr_notes ol.notes li.note img.avatar {display:none;}
  3095.  
  3096. .def_notes .tumblr_notes ol.notes li.note img.avatar:hover {
  3097. opacity:0.7;
  3098. -webkit-transition: all 0.3s ease-in-out;
  3099. transition:all 0.3s ease-in-out;
  3100. }
  3101.  
  3102. .def_notes .tumblr_notes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 5em); margin-top: -0.5em;}
  3103.  
  3104. .txt_notes .tumblr_notes ol.notes li.note span.action {max-width:100%;}
  3105.  
  3106. .def_notes .tumblr_notes li.with_commentary blockquote {
  3107. margin-left:5em;
  3108. max-width:calc(100% - 5em);
  3109. }
  3110.  
  3111. .unnested.txt_notes .tumblr_notes li.with_commentary blockquote, .unnested.def_notes .tumblr_notes li.with_commentary blockquote {
  3112. padding:0;
  3113. padding-left:1em;
  3114. }
  3115.  
  3116. .day-mode.unnested.txt_notes .tumblr_notes li.with_commentary blockquote, .day-mode.unnested.def_notes .tumblr_notes li.with_commentary blockquote {
  3117. border-left:1px solid #222;
  3118. }
  3119.  
  3120. .night-mode.unnested.txt_notes .tumblr_notes li.with_commentary blockquote, .night-mode.unnested.def_notes .tumblr_notes li.with_commentary blockquote {
  3121. border-left:1px solid #fff;
  3122. }
  3123.  
  3124.  
  3125. li.note span.action a, li.with_commentary blockquote a {
  3126. border-bottom:1px solid #222;
  3127. -webkit-transition: all 0.3s ease-in-out;
  3128. transition:all 0.3s ease-in-out;
  3129. }
  3130.  
  3131. .night-mode li.note span.action a, .night-mode li.with_commentary blockquote a {border-bottom:1px solid #fff;}
  3132.  
  3133. li.with_commentary blockquote a:hover {border-bottom:1px solid {color:highlight};}
  3134.  
  3135. .night-mode li.with_commentary blockquote a:hover {border-bottom:1px solid {color:accent};}
  3136.  
  3137.  
  3138. .txt_notes li.note span.action:before {
  3139. font-family: 'Linearicons-Free';
  3140. margin-right:0.5em;
  3141. vertical-align: middle;
  3142. }
  3143.  
  3144. .txt_notes li.note.reply span.action:before {
  3145. content: "\e83f";
  3146. color:#6CC7ED;
  3147. }
  3148.  
  3149. .txt_notes li.note.like span.action:before {
  3150. content: "\e813";
  3151. color:red;
  3152. }
  3153.  
  3154. .txt_notes li.note.original_post span.action:before {
  3155. content: "\e814";
  3156. color:#EED275;
  3157. }
  3158.  
  3159. .txt_notes li.note.reblog:not(.original_post) span.action:before {
  3160. font-family: 'Linearicons-Free';
  3161. content: "\e862";
  3162. color:#72D16E;
  3163. }
  3164.  
  3165. li.more_notes_link_container {margin-top:2em!important;}
  3166.  
  3167. .def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a, .txt_notes li.more_notes_link_container a, .manual_btn a {
  3168. font-family:'{select:heading font}';
  3169. font-size:1.2em;
  3170. margin:auto;
  3171. cursor:help;
  3172. color:inherit;
  3173. -webkit-transition: all 0.3s ease-in-out;
  3174. transition:all 0.3s ease-in-out;
  3175. }
  3176.  
  3177. .day-mode.{select:notes display} li.more_notes_link_container a, .day-mode .manual_btn a{
  3178. border-bottom:1px solid #222;
  3179. }
  3180.  
  3181. .night-mode.{select:notes display} li.more_notes_link_container a, .night-mode .manual_btn a{
  3182. border-bottom:1px solid #fff;
  3183. }
  3184.  
  3185.  
  3186.  
  3187. li.more_notes_link_container a:hover, .manual_btn a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}
  3188.  
  3189. .night-mode li.more_notes_link_container a:hover, .night-mode .manual_btn a:hover {color:{color:accent};border-bottom:1px solid {color:accent};}
  3190.  
  3191. li.note span.action a:hover{
  3192. color:{color:highlight};
  3193. border-bottom:1px solid {color:highlight};
  3194. -webkit-transition: all 0.3s ease-in-out;
  3195. transition:all 0.3s ease-in-out;
  3196. }
  3197.  
  3198. .night-mode li.note span.action a:hover{
  3199. color:{color:accent};
  3200. border-bottom:1px solid {color:accent};
  3201.  
  3202. }
  3203.  
  3204. /*Grid notes*/
  3205. .grid_notes .tumblr_notes *{ margin:0; padding:0; }
  3206.  
  3207. .grid_notes .tumblr_notes { text-align: center; }
  3208.  
  3209. .grid_notes ol.notes {margin-top:2em;}
  3210.  
  3211. .grid_notes .tumblr_notes li{ list-style-type:none; display:inline-block; width:2.4em; height:2.4em; margin:0 0.3em 0 0.3em; overflow:hidden; }
  3212.  
  3213. .grid_notes .tumblr_notes img{ width:2.4em; height:2.4em; border-radius:2px;}
  3214.  
  3215. .grid_notes li.more_notes_link_container{
  3216. width:100%!important;
  3217. }
  3218.  
  3219. .pg, .manual_btn {
  3220. margin:auto;
  3221. margin-bottom:calc({select:post spacing} / 2);
  3222. width:100%;
  3223. text-transform:uppercase;
  3224. letter-spacing:1.5px;
  3225. background:transparent;
  3226. text-align:center;
  3227. word-spacing:20px;
  3228. }
  3229.  
  3230.  
  3231. .manual_btn {word-spacing:initial;text-transform:none;}
  3232. #infscr-loading {display:none !important;}
  3233.  
  3234. {block:ifmanualload}
  3235. .pg {display:none;}
  3236. {/block:ifmanualload}
  3237.  
  3238.  
  3239. .pg a {
  3240. display:inline-block;
  3241. color:#fff!important;
  3242. padding:calc({select:font size}/2);
  3243. width:100px;
  3244. border-radius:5px;
  3245. overflow:hidden;
  3246. background: {color:accent};
  3247. background: -webkit-linear-gradient(to right, {color:accent}, {color:highlight});
  3248. background: linear-gradient(to right, {color:accent}, {color:highlight});
  3249. position:relative;
  3250. z-index:1;
  3251. }
  3252.  
  3253. @media screen and (min-width:1600px) {
  3254. .pg a {width:160px;}
  3255.  
  3256. }
  3257.  
  3258. @media screen and (min-width:1920px) {
  3259. .pg a {width:200px;}
  3260.  
  3261. }
  3262.  
  3263. .pg a:before {
  3264. position: absolute;
  3265. content: "";
  3266. top: 0;
  3267. right: 0;
  3268. bottom: 0;
  3269. width:100%;
  3270. height:100%;
  3271. background: linear-gradient(
  3272. to bottom,
  3273. {color:highlight},
  3274. {color:accent}
  3275. );
  3276. z-index: -1;
  3277. transition: opacity 0.5s linear;
  3278. opacity: 0;
  3279. }
  3280.  
  3281. .pg a:hover::before {
  3282. opacity: 1;
  3283. }
  3284.  
  3285.  
  3286. .pg > * + * {margin:{select:font size};}
  3287.  
  3288. {block:ifmanualload}
  3289. .pg {
  3290. display:none;
  3291. }
  3292. {/block:ifmanualload}
  3293.  
  3294.  
  3295.  
  3296. /*Please do not alter the credit!*/
  3297.  
  3298. #athena_wrapper *,
  3299. #athena_wrapper *::before,
  3300. #athena_wrapper *::after {
  3301. box-sizing: border-box;
  3302. -webkit-box-sizing: border-box;
  3303. -moz-box-sizing: border-box;
  3304. }
  3305.  
  3306. #athena_wrapper {
  3307. position:fixed;
  3308. z-index:99;
  3309. bottom:16px;
  3310. right:12px;
  3311. text-transform:uppercase;
  3312. text-align:center;
  3313. font-family: 'Montserrat', sans-serif;
  3314. }
  3315.  
  3316. #athena_wrapper > a {
  3317. display:block;
  3318. position: relative;
  3319. padding:10px;
  3320. font-size:8px;
  3321. text-decoration:none;
  3322. border:1px solid transparent;
  3323. width:42px;
  3324. height:42px;
  3325. line-height:20px;
  3326. }
  3327.  
  3328. #athena_wrapper > a::before, #athena_wrapper > a::after {
  3329. position: absolute;
  3330. top: 0;
  3331. left: 0;
  3332. width: 100%;
  3333. height: 100%;
  3334.  
  3335. }
  3336.  
  3337. #athena_wrapper > a span {
  3338. display: block;
  3339. position: relative;
  3340. transition: all 0.3s cubic-bezier(0.2,1,0.7,1);
  3341. }
  3342.  
  3343.  
  3344.  
  3345. #athena_wrapper > a::before {
  3346. content: '';
  3347. background: transparent;
  3348. transition: all 0.3s cubic-bezier(0.2,1,0.7,1);
  3349. }
  3350.  
  3351. #athena_wrapper > a:hover::before {
  3352. transform: scale3d(0.8, 0.8, 1);
  3353. }
  3354.  
  3355.  
  3356.  
  3357. #athena_wrapper > a::after {
  3358. content: '';
  3359. border: 1px solid transparent;
  3360. transition: all 0.3s cubic-bezier(0.2,1,0.7,1);
  3361. border-radius: 0px;
  3362. transform: scale3d(0.65, 0.65, 1);
  3363. }
  3364.  
  3365. #athena_wrapper > a:hover::after {
  3366. transform: scale3d(1,1,1);
  3367. }
  3368.  
  3369. body.day-mode #athena_wrapper > a {
  3370. color:#222;
  3371. }
  3372.  
  3373. body.day-mode #athena_wrapper > a span {
  3374. color:#222;
  3375. }
  3376.  
  3377. body.day-mode #athena_wrapper > a::before {
  3378. border:1px solid #222;
  3379. }
  3380.  
  3381. body.day-mode #athena_wrapper > a:hover::before {
  3382. border:1px solid #000;
  3383. background:#000;
  3384. }
  3385.  
  3386. body.day-mode #athena_wrapper > a:hover::after {
  3387. border:1px solid #000;
  3388. }
  3389.  
  3390. body.day-mode #athena_wrapper > a:hover span {
  3391. color:#fff;
  3392. }
  3393.  
  3394. body.night-mode #athena_wrapper > a {
  3395. color:#fff;
  3396. }
  3397.  
  3398. body.night-mode #athena_wrapper > a span {
  3399. color:#fff;
  3400. }
  3401.  
  3402. body.night-mode #athena_wrapper > a::before {
  3403. border:1px solid #fff;
  3404. }
  3405.  
  3406. body.night-mode #athena_wrapper > a:hover::before {
  3407. border:1px solid #fff;
  3408. background:#fff;
  3409. }
  3410.  
  3411. body.night-mode #athena_wrapper > a:hover::after {
  3412. border:1px solid #fff;
  3413. }
  3414.  
  3415. body.night-mode #athena_wrapper > a:hover span {
  3416. color:#222;
  3417. }
  3418.  
  3419. footer {
  3420. width:100%;
  3421. height:200px;
  3422. display:none;
  3423. }
  3424.  
  3425. .night-mode footer {background:#222;}
  3426. .day-mode footer {background:#f5f5f5;}
  3427.  
  3428. .night-mode footer a {border-bottom:1px solid #fff;}
  3429. .day-mode footer a {border-bottom:1px solid #222;}
  3430.  
  3431.  
  3432. @media screen and (max-width:400px) {
  3433. #athena_wrapper {display:none;}
  3434. footer {
  3435. display:-webkit-box;
  3436. display:-ms-flexbox;
  3437. display:flex;
  3438. -webkit-box-align:center;
  3439. -ms-flex-align:center;
  3440. align-items:center;
  3441. -webkit-box-pack:center;
  3442. -ms-flex-pack:center;
  3443. justify-content:center;
  3444. }
  3445. }
  3446.  
  3447. /*end of credit code*/
  3448. footer a:hover {border-bottom:1px solid {color:accent};}
  3449.  
  3450.  
  3451.  
  3452.  
  3453.  
  3454.  
  3455. {CustomCSS}
  3456.  
  3457. </style>
  3458.  
  3459.  
  3460.  
  3461. </head>
  3462. <body class="animsition {select:theme layout} {select:theme colour} {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display}">
  3463.  
  3464. <div class="topbar">
  3465. <div class="topbar__inner">
  3466. <h1><a class="a-link tbrefresh" href="/">{Title}<span class="tbletters" data-letters="{Title}"></span><span class="tbletters" data-letters="{Title}"></span></a></h1>
  3467. <nav class="tbnav">
  3468. <a data-tabs="tab1" class="active">Posts</a>
  3469. <a data-tabs="tab2">Info</a>
  3470. <a data-tabs="tab3">Navi</a>
  3471. {block:ifshowblogroll}
  3472. {block:Following}<a data-tabs="tab4">Blogroll</a>{/block:Following}
  3473. {/block:ifshowblogroll}
  3474. </nav>
  3475. </div>
  3476. </div>
  3477.  
  3478.  
  3479. <main class="smooth">
  3480. <div id="wrapper">
  3481. <!--Posts and hero image-->
  3482. <section class="tabs" id="tab1">
  3483. {block:indexpage}
  3484. <header class="welcome_screen">
  3485. <div class="welcome__inner">
  3486. <div class="welc_msg">
  3487. <h2>Welcome</h2>
  3488. {block:description}
  3489. <p>{Description}</p>
  3490. {/block:description}
  3491. </div>
  3492. <img src="{image:header}"data-focus-x=".5" data-focus-y="0">
  3493. </div>
  3494. </header>
  3495. <!--/Posts and hero image-->
  3496. {/block:indexpage}
  3497.  
  3498.  
  3499. {block:indexpage}
  3500. <!--posts-->
  3501. <div id="entries">
  3502. {/block:indexpage}
  3503.  
  3504. <aside class="sidequote {block:permalinkpage}scrolled{/block:permalinkpage}">
  3505. {block:description}<div>{Description}</div>{/block:description}
  3506. </aside>
  3507.  
  3508.  
  3509. <div id="postwrap">
  3510.  
  3511. {block:posts}
  3512. <div class="posthold" id="{PostID}">
  3513. <article class="posts post_{PostType}">
  3514.  
  3515. {block:text}
  3516.  
  3517. {block:Title}<h1>{Title}</h1> {/block:Title}
  3518.  
  3519. <div class="captions">{Body}</div>
  3520.  
  3521. {/block:text}
  3522.  
  3523. {block:Photo}
  3524. {LinkOpenTag}
  3525. <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">
  3526. <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">
  3527. </a>
  3528. {LinkCloseTag}
  3529. {block:Caption}
  3530. <div class="captions">
  3531. {Caption}
  3532. </div>
  3533. {/block:Caption}
  3534. {/block:Photo}
  3535.  
  3536. {block:Photoset}
  3537. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  3538.  
  3539. {block:Photos}
  3540. <div class="photo-data">
  3541. <div class="pxu-photo">
  3542. <img class="pffft" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  3543. </div>
  3544. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  3545. </div>
  3546. {/block:Photos}
  3547.  
  3548. </div>
  3549.  
  3550. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  3551. {/block:Photoset}
  3552.  
  3553. {block:Panorama}
  3554. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-Panorama}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  3555. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  3556. </a>
  3557. {LinkCloseTag}
  3558.  
  3559. {block:Caption}
  3560. <div class="captions">
  3561. {Caption}
  3562. </div>
  3563. {/block:Caption}
  3564.  
  3565. {/block:Panorama}
  3566.  
  3567. {block:Quote}
  3568. <h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>
  3569.  
  3570. {block:Source}
  3571.  
  3572. <div class="divider"></div>
  3573.  
  3574. <span class="qsource">{Source}</span>{/block:Source}
  3575. {/block:Quote}
  3576.  
  3577. {block:Link}
  3578.  
  3579. <div class="link_trash {block:Excerpt}link_exp{/block:Excerpt}"{block:Thumbnail}style="background-image:url('{Thumbnail-HighRes}');"{/block:Thumbnail}>
  3580.  
  3581. <!--proper link trash-->
  3582.  
  3583. <div class="plinks">
  3584. <div>
  3585. <h1>{Name}</h1>
  3586. {block:Excerpt}<p>{Excerpt}</p>{/block:Excerpt}
  3587. <a href="{URL}"class="a-link"></a>
  3588. </div>
  3589. </div>
  3590.  
  3591.  
  3592. </div>
  3593.  
  3594.  
  3595. {block:Description}
  3596. <div class="captions">
  3597. {Description}
  3598. </div>
  3599. {/block:Description}
  3600. {/block:Link}
  3601.  
  3602. {block:Chat}
  3603. {block:title}<h1>{Title}</h1>{/block:title}
  3604. <ul class="chatlines">
  3605. {block:Lines}
  3606. <li class="clines {Alt}">
  3607. {block:Label}<b>{Label}</b>{/block:Label}
  3608. {Line}
  3609. </li>
  3610. {/block:Lines}
  3611. </ul>
  3612. {/block:Chat}
  3613.  
  3614. {block:Audio}
  3615. <div class="audio_cont">
  3616. <div class="audio_cover">
  3617.  
  3618. <div class="playback">
  3619. <div class="playbox">{AudioPlayerWhite}</div>
  3620. </div>
  3621.  
  3622. <img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  3623.  
  3624. {block:AlbumArt}
  3625. <img src="{AlbumArtURL}" style="position:absolute;">
  3626. {/block:AlbumArt}
  3627. </div>
  3628. <div class="audio_info">
  3629. <div>
  3630. {block:TrackName}
  3631. <b>Song:</b> {TrackName}
  3632. {/block:TrackName}<br>
  3633.  
  3634. {block:Artist}
  3635. <b>Artist:</b> {Artist}
  3636. {/block:Artist}<br>
  3637.  
  3638. {block:Album}
  3639. <b>Album:</b> {Album}
  3640. {/block:Album}
  3641. </div>
  3642. </div>
  3643.  
  3644. </div>
  3645. {block:Caption}
  3646. <div class="captions">{Caption}</div>
  3647. {/block:Caption}
  3648. {/block:Audio}
  3649.  
  3650. {block:Video}
  3651. {VideoEmbed-700}
  3652. {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  3653. {/block:Video}
  3654.  
  3655. {block:Answer}
  3656.  
  3657. <div class="ask_cont">
  3658. <div class="asker">
  3659. <a href="{AskerURL}"class="a-link">
  3660. <img src="{AskerPortraitURL-128}" align="left">
  3661. </a>
  3662. </div>
  3663. <div class="q_cont">
  3664. <div class="arrow-left"></div>
  3665. <div class="ask_q">
  3666. <center><a class="a-link" href="{AskerURL}">{AskerName}</a></center>
  3667. <p>{Question}</p>
  3668. </div>
  3669. </div>
  3670. </div>
  3671.  
  3672. <div class="captions">
  3673. {Answer}
  3674. </div>
  3675. {/block:Answer}
  3676.  
  3677.  
  3678. {block:date}
  3679.  
  3680. <div class="postfooter">
  3681. <div class="postinfo">
  3682. <div class="postdate"><a href="{Permalink}" class="a-link" title="{TimeAgo}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a></div>
  3683.  
  3684. </div>
  3685.  
  3686.  
  3687. {block:RebloggedFrom}
  3688. <div class="viasrc">
  3689. <a href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
  3690. {block:ContentSource}
  3691. / <a href="{SourceURL}" title="{ReblogRootName}" target="_blank">src</a>
  3692. {/block:ContentSource}
  3693. </div>
  3694. {/block:RebloggedFrom}
  3695.  
  3696. <div class="socactions">
  3697. <div class="rihrih">
  3698.  
  3699. <a href="{ReblogURL}" target="_blank" title="Reblog">
  3700. <svg class="lnr lnr-redo"><use xlink:href="#lnr-redo">
  3701. <symbol id="lnr-redo" viewBox="0 0 1024 1024"><path class="path1" d="M127.467 229.867c82.198-82.198 191.488-127.467 307.733-127.467 116.246 0 225.534 45.269 307.733 127.467s127.467 191.486 127.467 307.733v66.197l109.899-109.899c9.997-9.997 26.206-9.997 36.203 0 9.998 9.997 9.998 26.206 0 36.203l-153.6 153.6c-5 5-11.55 7.499-18.102 7.499s-13.102-2.499-18.101-7.499l-153.6-153.6c-9.998-9.997-9.998-26.206 0-36.203 9.997-9.997 26.206-9.997 36.203 0l109.898 109.899v-66.197c0-211.738-172.262-384-384-384-211.739 0-384 172.262-384 384 0 211.739 172.261 384 384 384 14.139 0 25.6 11.461 25.6 25.6s-11.461 25.6-25.6 25.6c-116.245 0-225.534-45.269-307.733-127.467s-127.467-191.488-127.467-307.733c0-116.246 45.269-225.534 127.467-307.733z"></path></symbol>
  3702. </use></svg>
  3703. </a>
  3704. </div>
  3705.  
  3706. <div class="custom-like-button">
  3707. {LikeButton size="12"}
  3708. <span class="our_button">
  3709. <svg class="lnr lnr-heart"><use xlink:href="#lnr-heart">
  3710. <symbol id="lnr-heart" viewBox="0 0 1024 1024"><path class="path1" d="M486.4 972.8c-4.283 0-8.566-1.074-12.434-3.222-4.808-2.67-119.088-66.624-235.122-171.376-68.643-61.97-123.467-125.363-162.944-188.418-50.365-80.443-75.901-160.715-75.901-238.584 0-148.218 120.582-268.8 268.8-268.8 50.173 0 103.462 18.805 150.051 52.952 27.251 19.973 50.442 44.043 67.549 69.606 17.107-25.565 40.299-49.634 67.55-69.606 46.589-34.147 99.878-52.952 150.050-52.952 148.218 0 268.8 120.582 268.8 268.8 0 77.869-25.538 158.141-75.901 238.584-39.478 63.054-94.301 126.446-162.944 188.418-116.034 104.754-230.314 168.706-235.122 171.376-3.867 2.149-8.15 3.222-12.434 3.222zM268.8 153.6c-119.986 0-217.6 97.614-217.6 217.6 0 155.624 120.302 297.077 221.224 388.338 90.131 81.504 181.44 138.658 213.976 158.042 32.536-19.384 123.845-76.538 213.976-158.042 100.922-91.261 221.224-232.714 221.224-388.338 0-119.986-97.616-217.6-217.6-217.6-87.187 0-171.856 71.725-193.314 136.096-3.485 10.453-13.267 17.504-24.286 17.504s-20.802-7.051-24.286-17.504c-21.456-64.371-106.125-136.096-193.314-136.096z"></path></symbol>
  3711. </use></svg>
  3712. </span>
  3713. </div>
  3714.  
  3715. </div>
  3716.  
  3717. </div>
  3718.  
  3719. {/block:date}
  3720.  
  3721. </article>
  3722.  
  3723. <!-- {block:NoRebloggedFrom}
  3724. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  3725. {/block:NoRebloggedFrom} -->
  3726.  
  3727. {block:ContentSource}<!-- {SourceURL}
  3728. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  3729. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  3730. {/block:ContentSource}
  3731.  
  3732.  
  3733. {block:hastags}
  3734. <div class="tagsbox">
  3735. {block:Tags}<a class="a-link" href="{TagURL}">#{Tag}</a>{/block:Tags}
  3736. </div>
  3737. {/block:hastags}
  3738.  
  3739. </div>
  3740.  
  3741. {block:date}
  3742. {block:permalinkpage}
  3743. {block:NoteCount}
  3744. <div class="posthold">
  3745. <article class="posts">
  3746. <h1 class="notehead">{NoteCountWithLabel}</h1>
  3747.  
  3748. {block:PostNotes}<div class="tumblr_notes">{PostNotes-64}</div>{/block:PostNotes}
  3749. </article>
  3750. </div>
  3751. {/block:NoteCount}
  3752. {/block:permalinkpage}
  3753. {/block:date}
  3754. {/block:posts}
  3755.  
  3756. </div>
  3757.  
  3758. {block:indexpage}
  3759. {block:pagination}
  3760. <!--pagination-->
  3761. <div class="pg">
  3762. {block:PreviousPage}<a class="a-link" href="{PreviousPage}">Back</a>{/block:PreviousPage}
  3763.  
  3764.  
  3765. {block:NextPage}<a class="a-link" href="{NextPage}">Forth</a>{/block:NextPage}
  3766. </div>
  3767.  
  3768. {block:ifmanualload}
  3769. <!--Manual Trigger location-->
  3770. <div class="manual_btn">
  3771.  
  3772. <a class="append">Load More</a>
  3773.  
  3774. </div>
  3775. <!--/Manual Trigger location-->
  3776. {/block:ifmanualload}
  3777. {/block:pagination}
  3778. {/block:indexpage}
  3779.  
  3780. <footer>
  3781. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  3782. </footer>
  3783.  
  3784. <!--sb blah-->
  3785.  
  3786. <aside class="sidenav {block:permalinkpage}scrolled{/block:permalinkpage}">
  3787. <div>
  3788. <nav class="sblinks" id="sblinks">
  3789. <a class="a-link" href="{text:link1 URL}"><span data-hover="{text:link1}">{text:link1}</span></a>
  3790. <a class="a-link" href="{text:link2 URL}"><span data-hover="{text:link2}">{text:link2}</span></a>
  3791. <a class="a-link"href="{text:link3 URL}"><span data-hover="{text:link3}">{text:link3}</span></a>
  3792. <a class="a-link"href="{text:link4 URL}"><span data-hover="{text:link4}">{text:link4}</span></a>
  3793. <a class="a-link"href="{text:link5 URL}"><span data-hover="{text:link5}">{text:link5}</span></a>
  3794. </nav>
  3795. <div class="sbsearch">
  3796. <span class="input input--madoka">
  3797. <form class="search" action="/search" method="get">
  3798. <input class="input__field input__field--madoka query" type="text" id="input-33" name="q" value="{SearchQuery}"/>
  3799. <label class="input__label input__label--madoka" for="input-33">
  3800. <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
  3801. <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
  3802. </svg>
  3803. <span class="input__label-content input__label-content--madoka">Search</span>
  3804. </label>
  3805. </form>
  3806. </span>
  3807. </div>
  3808.  
  3809. </div>
  3810. </aside>
  3811.  
  3812. {block:indexpage}
  3813. </div>
  3814. <!--/posts-->
  3815. {/block:indexpage}
  3816.  
  3817. </section>
  3818. <!--/Posts and hero image-->
  3819.  
  3820. <!--FAQ + Info-->
  3821. <section class="tabs"id="tab2">
  3822.  
  3823. <div class="abt_cont">
  3824. <article class="abtstuff hoverbox">
  3825.  
  3826. <a class="tilter tilter--4">
  3827. <figure class="tilter__figure">
  3828. <div class="abtimg">
  3829. <img class="tilter__image" src="{image:hover info}"data-focus-x=".5" data-focus-y="0" />
  3830. </div>
  3831. <div class="tilter__deco tilter__deco--shine"><div></div></div>
  3832. <div class="tilter__deco tilter__deco--overlay"></div>
  3833. <figcaption class="tilter__caption">
  3834. <h3 class="tilter__title">{text:abt heading}</h3>
  3835. <p class="tilter__description">{text:abt desc}</p>
  3836. </figcaption>
  3837. <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
  3838. <path d="M20.5,20.5h260v375h-260V20.5z" />
  3839. </svg>
  3840. </figure>
  3841. </a>
  3842.  
  3843.  
  3844.  
  3845.  
  3846. </article>
  3847.  
  3848. <article class="abtstuff biography">
  3849. <h1>About Me</h1>
  3850. <p>
  3851. {text:biography main text}
  3852. </p>
  3853.  
  3854. <p class="abtqt">
  3855. {text:biography quote}
  3856. </p>
  3857.  
  3858.  
  3859. <!--to add more paragraphs: add one more set of <p></p> to add one moreline of quote <p class="abtqt"></p> -->
  3860.  
  3861. <!--/to here -->
  3862.  
  3863. <nav class="abtlinks">
  3864.  
  3865. <a href="{text:abt link1 URL}" title="{text:abt link1}">
  3866. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M15 1c-.38 0-.692.184-.963.416-.27.232-.518.534-.766.883-.493.697-.98 1.596-1.456 2.518-.475.923-.94 1.868-1.357 2.625-.418.758-.85 1.338-.998 1.444-.15.105-.853.328-1.722.482-.868.153-1.93.292-2.976.448-1.046.157-2.072.33-2.903.573-.416.122-.783.258-1.092.438-.31.18-.59.413-.71.776-.122.362-.035.717.108 1.042.143.326.36.648.623.985.526.675 1.25 1.407 2.003 2.134.752.726 1.53 1.446 2.14 2.068.608.622 1.042 1.21 1.096 1.37.053.163.055.883-.063 1.735-.118.853-.314 1.88-.485 2.9-.17 1.02-.317 2.028-.337 2.878-.01.425.01.81.09 1.156.08.347.224.683.535.903.31.22.67.247 1.03.215.356-.032.734-.13 1.143-.27.82-.282 1.754-.73 2.694-1.204.94-.473 1.883-.97 2.677-1.344.795-.374 1.497-.6 1.686-.6.19 0 .89.226 1.686.6.794.374 1.737.87 2.677 1.344.94.473 1.875.922 2.694 1.203.41.14.787.24 1.144.27.36.033.72.006 1.03-.214.31-.22.455-.556.536-.902.08-.345.1-.73.09-1.155-.02-.85-.168-1.858-.338-2.877-.17-1.02-.367-2.048-.485-2.9-.118-.853-.116-1.573-.062-1.735.055-.162.49-.75 1.098-1.37.61-.623 1.387-1.343 2.14-2.07.75-.726 1.476-1.458 2.003-2.132.265-.336.48-.658.624-.984.143-.325.23-.68.11-1.042-.12-.363-.402-.596-.712-.776-.31-.18-.676-.316-1.09-.437-.832-.242-1.858-.415-2.904-.572-1.045-.156-2.108-.295-2.976-.45-.87-.153-1.572-.376-1.72-.48-.15-.107-.58-.687-1-1.445-.417-.757-.88-1.702-1.356-2.625-.476-.922-.963-1.82-1.457-2.52-.25-.348-.496-.65-.767-.882C15.693 1.184 15.38 1 15 1zm.313 1.176c.17.146.38.39.6.7.436.617.914 1.49 1.384 2.4.47.91.933 1.858 1.37 2.65.435.79.786 1.417 1.294 1.777.51.36 1.223.49 2.128.65.905.16 1.97.3 3.002.454 1.032.154 2.032.33 2.77.545.37.107.674.227.87.34.31.138.27.384.188.552-.09.203-.26.473-.494.772-.467.597-1.17 1.312-1.912 2.03-.742.716-1.523 1.438-2.158 2.087-.636.65-1.136 1.162-1.333 1.754-.196.592-.1 1.298.023 2.19.124.89.32 1.922.488 2.927.17 1.005.307 1.987.325 2.736.01.375-.012.692-.062.906-.083.354-.293.354-.502.346-.228-.02-.545-.096-.91-.22-.727-.25-1.64-.684-2.567-1.15-.928-.468-1.873-.97-2.702-1.358-.827-.39-1.487-.694-2.11-.694-.623 0-1.283.304-2.11.694-.83.39-1.775.89-2.703 1.357-.927.468-1.84.902-2.568 1.15-.365.126-.682.202-.91.222-.315.008-.433-.11-.503-.346-.05-.214-.072-.53-.062-.906.018-.75.156-1.73.324-2.736.167-1.005.363-2.037.487-2.928.124-.89.22-1.597.022-2.19-.198-.59-.698-1.104-1.334-1.753-.635-.65-1.416-1.37-2.158-2.088-.74-.717-1.445-1.432-1.912-2.03-.233-.298-.405-.568-.494-.77-.127-.245.017-.453.188-.552.196-.114.5-.234.87-.34.738-.217 1.738-.392 2.77-.546 1.032-.155 2.097-.293 3.002-.453.905-.16 1.62-.29 2.127-.65.507-.36.858-.987 1.294-1.778.436-.792.9-1.74 1.37-2.65.47-.91.947-1.783 1.384-2.4.22-.31.428-.554.6-.7.312-.26.452-.176.624 0z"/></svg>
  3867. </a>
  3868.  
  3869. <a href="{text:abt link2 URL}" title="{text:abt link2}">
  3870. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 7c-.657 0-.657 1 0 1H22c3.887 0 7 3.113 7 7s-3.113 7-7 7h-2c-3.887 0-7-3.113-7-7v-.5c0-.672-1-.648-1 0v.5c0 4.423 3.577 8 8 8h2c4.423 0 8-3.577 8-8s-3.577-8-8-8zM8 7c-4.423 0-8 3.577-8 8s3.577 8 8 8h2.5c.665 0 .66-1 0-1H8c-3.887 0-7-3.113-7-7s3.113-7 7-7h2c3.887 0 7 3.113 7 7v.5c0 .676 1 .656 1 0V15c0-4.423-3.577-8-8-8z"/></svg>
  3871. </a>
  3872.  
  3873. <a href="{text:abt link3 URL}" title="{text:abt link3}">
  3874. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M7.975 2c-2.235.116-4.365 1.203-5.82 2.89C.7 6.57 0 8.786 0 11c0 1.938.697 3.816 1.646 5.46.95 1.644 2.19 3.077 3.5 4.394 2.824 2.833 6.08 5.232 9.622 7.09.145.076.32.076.464 0 3.543-1.858 6.798-4.257 9.622-7.09 1.31-1.317 2.55-2.75 3.5-4.393C29.304 14.817 30 12.94 30 11c0-2.22-.7-4.428-2.154-6.11C26.39 3.202 24.26 2.115 22.026 2c-1.516-.078-3.045.286-4.362 1.04-1.097.626-1.975 1.558-2.664 2.614-.69-1.056-1.567-1.988-2.664-2.615C11.02 2.285 9.49 1.92 7.976 2zm.05 1c1.32-.068 2.665.25 3.813.906 1.148.656 2.107 1.652 2.72 2.824.186.36.698.36.885 0 .612-1.172 1.57-2.168 2.72-2.824 1.147-.656 2.49-.974 3.812-.906 1.942.1 3.837 1.062 5.115 2.54C28.37 7.023 29 9 29 11c0 1.73-.628 3.43-1.512 4.96-.885 1.535-2.064 2.904-3.342 4.186-2.686 2.697-5.788 4.975-9.146 6.766-3.358-1.79-6.46-4.07-9.146-6.766-1.278-1.282-2.457-2.65-3.342-4.185C1.628 14.43 1 12.73 1 11c0-2 .63-3.978 1.91-5.46C4.188 4.063 6.083 3.1 8.025 3z"/></svg>
  3875.  
  3876. </a>
  3877.  
  3878. </nav>
  3879.  
  3880. </article>
  3881. </div>
  3882.  
  3883. <div class="faq_cont">
  3884. <article class="faqstuff fask">
  3885. <h1>FAQ</h1>
  3886.  
  3887. <div>
  3888. <p class="tabq">{text:question 1}</p>
  3889.  
  3890. <p class="taba">{text:answer 1}</p>
  3891.  
  3892. <p class="tabq">{text:question 2}</p>
  3893.  
  3894. <p class="taba">{text:answer 2}</p>
  3895.  
  3896. <p class="tabq">{text:question 3}</p>
  3897.  
  3898. <p class="taba">{text:answer 3}</p>
  3899.  
  3900. <h2>{AskLabel}</h2>
  3901. <p>
  3902.  
  3903. <iframe frameborder="0" scrolling="no" width="100%" height="320px" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  3904.  
  3905. </p>
  3906. </div>
  3907.  
  3908. </article>
  3909. <article class="faqstuff faqbg"></article>
  3910. </div>
  3911.  
  3912. </section>
  3913. <!--/FAQ + Info-->
  3914.  
  3915. <!--Navi-->
  3916. <section class="tabs"id="tab3">
  3917. <h1>Navigation</h1>
  3918.  
  3919. <div class="navi_cont">
  3920.  
  3921. <div class="navi_box">
  3922. <h2>{text:nav category 1}</h2>
  3923. <ul>
  3924. <li><a class="a-link"href="{text:navilink 1 URL}">{text:navilink 1}</a></li>
  3925. <li><a class="a-link"href="{text:navilink 2 URL}">{text:navilink 2}</a></li>
  3926. <li><a class="a-link"href="{text:navilink 3 URL}">{text:navilink 3}</a></li>
  3927. <li><a class="a-link"href="{text:navilink 4 URL}">{text:navilink 4}</a></li>
  3928. </ul>
  3929. </div>
  3930.  
  3931. <div class="navi_box">
  3932. <h2>{text:nav category 2}</h2>
  3933. <ul>
  3934. <li><a class="a-link" href="{text:navilink 5 URL}">{text:navilink 5}</a></li>
  3935. <li><a class="a-link"href="{text:navilink 6 URL}">{text:navilink 6}</a></li>
  3936. <li><a class="a-link"href="{text:navilink 7 URL}">{text:navilink 7}</a></li>
  3937. <li><a class="a-link"href="{text:navilink 8 URL}">{text:navilink 8}</a></li>
  3938. </ul>
  3939. </div>
  3940.  
  3941. <div class="navi_box">
  3942. <h2>{text:nav category 3}</h2>
  3943.  
  3944. <ul>
  3945. <li><a class="a-link" href="{text:navilink 9 URL}">{text:navilink 9}</a></li>
  3946. <li><a class="a-link"href="{text:navilink 10 URL}">{text:navilink 10}</a></li>
  3947. <li><a class="a-link"href="{text:navilink 11 URL}">{text:navilink 11}</a></li>
  3948. <li><a class="a-link"href="{text:navilink 12 URL}">{text:navilink 12}</a></li>
  3949. </ul>
  3950.  
  3951. </div>
  3952.  
  3953. <div class="navi_box">
  3954. <h2>{text:nav category 4}</h2>
  3955.  
  3956. <ul>
  3957. <li><a class="a-link"href="{text:navilink 13 URL}">{text:navilink 13}</a></li>
  3958. <li><a class="a-link"href="{text:navilink 14 URL}">{text:navilink 14}</a></li>
  3959. <li><a class="a-link"href="{text:navilink 15 URL}">{text:navilink 15}</a></li>
  3960. <li><a class="a-link"href="{text:navilink 16 URL}">{text:navilink 16}</a></li>
  3961. </ul>
  3962.  
  3963. </div>
  3964.  
  3965. <div class="navi_box">
  3966. <h2>{text:nav category 5}</h2>
  3967.  
  3968. <ul>
  3969. <li><a class="a-link"href="{text:navilink 17 URL}">{text:navilink 17}</a></li>
  3970. <li><a class="a-link"href="{text:navilink 18 URL}">{text:navilink 18}</a></li>
  3971. <li><a class="a-link"href="{text:navilink 19 URL}">{text:navilink 19}</a></li>
  3972. <li><a class="a-link"href="{text:navilink 20 URL}">{text:navilink 20}</a></li>
  3973. </ul>
  3974.  
  3975. </div>
  3976.  
  3977. <div class="navi_box">
  3978. <h2>{text:nav category 6}</h2>
  3979.  
  3980. <ul>
  3981. <li><a class="a-link"href="{text:navilink 21 URL}">{text:navilink 21}</a></li>
  3982. <li><a class="a-link"href="{text:navilink 22 URL}">{text:navilink 22}</a></li>
  3983. <li><a class="a-link"href="{text:navilink 23 URL}">{text:navilink 23}</a></li>
  3984. <li><a class="a-link"href="{text:navilink 24 URL}">{text:navilink 24}</a></li>
  3985. </ul>
  3986.  
  3987. </div>
  3988.  
  3989.  
  3990. </div>
  3991.  
  3992. </section>
  3993. <!--/Navi-->
  3994.  
  3995. {block:ifshowblogroll}
  3996. {block:Following}
  3997.  
  3998. <!--Blogroll-->
  3999. <section class="tabs"id="tab4">
  4000. <h1>Blogroll</h1>
  4001.  
  4002. <div class="broll_cont">
  4003.  
  4004.  
  4005. {block:Followed}
  4006.  
  4007. <div class="followed_user">
  4008. <div class="followed_img">
  4009. <div>
  4010. <img src="{FollowedPortraitURL-128}">
  4011. </div>
  4012. </div>
  4013. <div class="followed_txt">
  4014. <span>
  4015. <b><a class="a-link" href="{FollowedURL}">{FollowedName}</a></b><br>
  4016. {FollowedTitle}
  4017. </span>
  4018. </div>
  4019. </div>
  4020.  
  4021. {/block:Followed}
  4022.  
  4023.  
  4024.  
  4025.  
  4026. </div>
  4027.  
  4028. </section>
  4029. <!--/Blogroll-->
  4030.  
  4031. {/block:Following}
  4032. {/block:ifshowblogroll}
  4033.  
  4034.  
  4035. </div>
  4036. </main>
  4037.  
  4038.  
  4039. <!--Please do not alter the credit!-->
  4040. <div id="athena_wrapper">
  4041. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  4042. </div>
  4043. <!--/credit-->
  4044.  
  4045. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  4046. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  4047. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  4048.  
  4049. <script>
  4050. /**
  4051. * main.js
  4052. * http://www.codrops.com
  4053. *
  4054. * Licensed under the MIT license.
  4055. * http://www.opensource.org/licenses/mit-license.php
  4056. *
  4057. * Copyright 2016, Codrops
  4058. * http://www.codrops.com
  4059. */
  4060. ;(function(window) {
  4061.  
  4062. 'use strict';
  4063.  
  4064. // Helper vars and functions.
  4065. function extend( a, b ) {
  4066. for( var key in b ) {
  4067. if( b.hasOwnProperty( key ) ) {
  4068. a[key] = b[key];
  4069. }
  4070. }
  4071. return a;
  4072. }
  4073.  
  4074. // from http://www.quirksmode.org/js/events_properties.html#position
  4075. function getMousePos(e) {
  4076. var posx = 0, posy = 0;
  4077. if (!e) var e = window.event;
  4078. if (e.pageX || e.pageY) {
  4079. posx = e.pageX;
  4080. posy = e.pageY;
  4081. }
  4082. else if (e.clientX || e.clientY) {
  4083. posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  4084. posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  4085. }
  4086. return { x : posx, y : posy }
  4087. }
  4088.  
  4089. /**
  4090. * TiltFx obj.
  4091. */
  4092. function TiltFx(el, options) {
  4093. this.DOM = {};
  4094. this.DOM.el = el;
  4095. this.options = extend({}, this.options);
  4096. extend(this.options, options);
  4097. this._init();
  4098. }
  4099.  
  4100. TiltFx.prototype.options = {
  4101. movement: {
  4102. imgWrapper : {
  4103. translation : {x: 0, y: 0, z: 0},
  4104. rotation : {x: -5, y: 5, z: 0},
  4105. reverseAnimation : {
  4106. duration : 1200,
  4107. easing : 'easeOutElastic',
  4108. elasticity : 600
  4109. }
  4110. },
  4111. lines : {
  4112. translation : {x: 10, y: 10, z: [0,10]},
  4113. reverseAnimation : {
  4114. duration : 1000,
  4115. easing : 'easeOutExpo',
  4116. elasticity : 600
  4117. }
  4118. },
  4119. caption : {
  4120. translation : {x: 20, y: 20, z: 0},
  4121. rotation : {x: 0, y: 0, z: 0},
  4122. reverseAnimation : {
  4123. duration : 1500,
  4124. easing : 'easeOutElastic',
  4125. elasticity : 600
  4126. }
  4127. },
  4128. /*
  4129. overlay : {
  4130. translation : {x: 10, y: 10, z: [0,50]},
  4131. reverseAnimation : {
  4132. duration : 500,
  4133. easing : 'easeOutExpo'
  4134. }
  4135. },
  4136. */
  4137. shine : {
  4138. translation : {x: 50, y: 50, z: 0},
  4139. reverseAnimation : {
  4140. duration : 1200,
  4141. easing : 'easeOutElastic',
  4142. elasticity: 600
  4143. }
  4144. }
  4145. }
  4146. };
  4147.  
  4148. /**
  4149. * Init.
  4150. */
  4151. TiltFx.prototype._init = function() {
  4152. this.DOM.animatable = {};
  4153. this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.tilter__figure');
  4154. this.DOM.animatable.lines = this.DOM.el.querySelector('.tilter__deco--lines');
  4155. this.DOM.animatable.caption = this.DOM.el.querySelector('.tilter__caption');
  4156. this.DOM.animatable.overlay = this.DOM.el.querySelector('.tilter__deco--overlay');
  4157. this.DOM.animatable.shine = this.DOM.el.querySelector('.tilter__deco--shine > div');
  4158. this._initEvents();
  4159. };
  4160.  
  4161. /**
  4162. * Init/Bind events.
  4163. */
  4164. TiltFx.prototype._initEvents = function() {
  4165. var self = this;
  4166.  
  4167. this.mouseenterFn = function() {
  4168. for(var key in self.DOM.animatable) {
  4169. anime.remove(self.DOM.animatable[key]);
  4170. }
  4171. };
  4172.  
  4173. this.mousemoveFn = function(ev) {
  4174. requestAnimationFrame(function() { self._layout(ev); });
  4175. };
  4176.  
  4177. this.mouseleaveFn = function(ev) {
  4178. requestAnimationFrame(function() {
  4179. for(var key in self.DOM.animatable) {
  4180. if( self.options.movement[key] == undefined ) {continue;}
  4181. anime({
  4182. targets: self.DOM.animatable[key],
  4183. duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1,
  4184. easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear',
  4185. elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null,
  4186. scaleX: 1,
  4187. scaleY: 1,
  4188. scaleZ: 1,
  4189. translateX: 0,
  4190. translateY: 0,
  4191. translateZ: 0,
  4192. rotateX: 0,
  4193. rotateY: 0,
  4194. rotateZ: 0
  4195. });
  4196. }
  4197. });
  4198. };
  4199.  
  4200. this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
  4201. this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
  4202. this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
  4203. };
  4204.  
  4205. TiltFx.prototype._layout = function(ev) {
  4206. // Mouse position relative to the document.
  4207. var mousepos = getMousePos(ev),
  4208. // Document scrolls.
  4209. docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
  4210. bounds = this.DOM.el.getBoundingClientRect(),
  4211. // Mouse position relative to the main element (this.DOM.el).
  4212. relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
  4213.  
  4214. // Movement settings for the animatable elements.
  4215. for(var key in this.DOM.animatable) {
  4216. if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) {
  4217. continue;
  4218. }
  4219. var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  4220. r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  4221. setRange = function (obj) {
  4222. for(var k in obj) {
  4223. if( obj[k] == undefined ) {
  4224. obj[k] = [0,0];
  4225. }
  4226. else if( typeof obj[k] === 'number' ) {
  4227. obj[k] = [-1*obj[k],obj[k]];
  4228. }
  4229. }
  4230. };
  4231.  
  4232. setRange(t);
  4233. setRange(r);
  4234.  
  4235. var transforms = {
  4236. translation : {
  4237. x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0],
  4238. y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0],
  4239. z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0],
  4240. },
  4241. rotation : {
  4242. x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
  4243. y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
  4244. z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
  4245. }
  4246. };
  4247.  
  4248. this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)';
  4249. }
  4250. };
  4251.  
  4252. window.TiltFx = TiltFx;
  4253.  
  4254. })(window);
  4255. </script>
  4256. <script>
  4257. (function() {
  4258. var tiltSettings = [
  4259. {
  4260. movement: {
  4261. imgWrapper : {
  4262. rotation : {x: -5, y: 10, z: 0},
  4263. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  4264. },
  4265. caption : {
  4266. translation : {x: 20, y: 20, z: 0},
  4267. reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  4268. },
  4269. overlay : {
  4270. translation : {x: 5, y: -5, z: 0},
  4271. rotation : {x: 0, y: 0, z: 6},
  4272. reverseAnimation : {duration : 1000, easing : 'easeOutQuad'}
  4273. },
  4274. shine : {
  4275. translation : {x: 50, y: 50, z: 0},
  4276. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  4277. }
  4278. }
  4279. },{}];
  4280.  
  4281. function init() {
  4282. var idx = 0;
  4283. [].slice.call(document.querySelectorAll('a.tilter')).forEach(function(el, pos) {
  4284. idx = pos%2 === 0 ? idx+1 : idx;
  4285. new TiltFx(el, tiltSettings[idx-1]);
  4286. });
  4287. }
  4288.  
  4289. // Preload all images.
  4290. imagesLoaded(document.querySelector('main'), function() {
  4291. document.body.classList.remove('loading');
  4292. init();
  4293. });
  4294.  
  4295.  
  4296. })();
  4297. </script>
  4298.  
  4299.  
  4300.  
  4301. <!-- animsition.js -->
  4302. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  4303.  
  4304. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  4305. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  4306.  
  4307. <script>
  4308. $(document).ready(function() {
  4309.  
  4310. $(".animsition").animsition({
  4311. inClass: 'fade-in',
  4312. outClass: 'fade-out',
  4313. inDuration: 1500,
  4314. outDuration: 800,
  4315. linkElement: '.a-link',
  4316. loading: true,
  4317. loadingParentElement: 'body',
  4318. loadingClass: 'animsition-loading',
  4319. loadingInner: '',
  4320. timeout: true,
  4321. timeoutCountdown: 3000,
  4322. onLoadEvent: true,
  4323. browser: [ 'animation-duration', '-webkit-animation-duration'],
  4324. overlay : false,
  4325. overlayClass : 'animsition-overlay-slide',
  4326. overlayParentElement : 'body',
  4327. transition: function(url){ window.location.href = url; }
  4328. });
  4329.  
  4330. $('.photo-slideshow').pxuPhotoset({
  4331. lightbox: true,
  4332. rounded: false,
  4333. gutter: '0px',
  4334. borderRadius: '0px',
  4335. photoset: '.photo-slideshow',
  4336. photoWrap: '.photo-data',
  4337. photo: '.pxu-photo'
  4338. });
  4339.  
  4340. $(function() {
  4341. $('.captions a').addClass('a-link');
  4342. $('a.tumblelog').addClass('a-link');
  4343. $('.tumblr_notes span.action a').addClass('a-link');
  4344. $('.tumblr_notes .avatar_frame').addClass('a-link');
  4345. });
  4346.  
  4347. });
  4348.  
  4349. </script>
  4350.  
  4351. <script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  4352.  
  4353. <script>
  4354.  
  4355. $(function(){ $('.unnested .posts').unnest({
  4356. yourCaption: ".captions",
  4357. wrapName: ".tumblr_parent",
  4358. newCaptionUsername: true,
  4359. originalPostCaptionUsername: false,
  4360. tumblrAvatars: true,
  4361. tumblrAvatarClass: ".tumblr_avatar",
  4362. usernameColon: false
  4363. }); });
  4364.  
  4365. </script>
  4366.  
  4367. <script>
  4368. (function ( $ ) {
  4369. $.fn.responsify = function() {
  4370. return this.each(function() {
  4371. var owdith, oheight,
  4372. twidth, theight,
  4373. fx, fy,
  4374. width, height, top, left;
  4375.  
  4376. owidth = $('img', this).width();
  4377. oheight = $('img', this).height();
  4378. twidth = $(this).width();
  4379. theight = $(this).height();
  4380. fx = $('img', this).attr('data-focus-x');
  4381. fy = $('img', this).attr('data-focus-y');
  4382.  
  4383. if( owidth/oheight > twidth/theight ) {
  4384. height = theight;
  4385. width = theight*owidth/oheight;
  4386. var fleft = Number(fx) * width;
  4387. var fright = width - Number(fx) * width;
  4388. if (fleft < twidth/2) {
  4389. left = 0;
  4390. }
  4391. else if (fleft >= twidth/2 && fright >= twidth/2) {
  4392. left = twidth/2 - fleft;
  4393. }
  4394. else if (fleft >= twidth/2 && fright < twidth/2) {
  4395. left = twidth - width;
  4396. }
  4397. top = 0;
  4398. }
  4399. else if( owidth/oheight <= twidth/theight ) {
  4400. width = twidth;
  4401. height = twidth*oheight/owidth;
  4402. var ftop = Number(fy) * height;
  4403. var fbottom = height - Number(fy) * height;
  4404. if (ftop < theight/2) {
  4405. top = 0;
  4406. }
  4407. else if (ftop >= theight/2 && fbottom >= theight/2) {
  4408. top = theight/2 - ftop;
  4409. }
  4410. else if (ftop >= theight/2 && fbottom < theight/2) {
  4411. top = theight - height;
  4412. }
  4413. left = 0;
  4414. }
  4415. $(this).css({
  4416. "overflow": "hidden"
  4417. })
  4418. $('img', this).css({
  4419. "position": "relative",
  4420. "height": height,
  4421. "width": width,
  4422. "left": left,
  4423. "top": top
  4424. })
  4425. });
  4426. };
  4427. }( jQuery ));
  4428.  
  4429.  
  4430. $(window).resize(function(){
  4431. $('.welcome__inner, .abtimg').responsify();
  4432. })
  4433.  
  4434. $(document).ready(function(){
  4435. $(window).load(function() {
  4436. $('.welcome__inner, .abtimg').responsify();
  4437. });
  4438. });
  4439.  
  4440.  
  4441. </script>
  4442.  
  4443. {block:indexpage}
  4444. <script>
  4445. $(window).scroll(function() {
  4446. var element = $('header').height(),
  4447. wS = $(this).scrollTop();
  4448.  
  4449. if (wS >= (element - 1)) {
  4450. $('aside').addClass("scrolled");
  4451. }
  4452.  
  4453. else {
  4454. $('aside').removeClass("scrolled");
  4455. }
  4456.  
  4457. });
  4458. </script>
  4459.  
  4460. {block:pagination}
  4461. {block:ifmanualload}
  4462.  
  4463. <script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>
  4464.  
  4465. <script>
  4466.  
  4467. // Infinite Scroll
  4468. $(function() {
  4469.  
  4470. var $container = $('#postwrap');
  4471. $container.infinitescroll({
  4472.  
  4473. loading: {
  4474. finishedMsg: "<em>No more posts</em>",
  4475. img: null,
  4476. msg: null,
  4477. msgText: "<em>Loading posts...</em>",
  4478. finished: function () {$('.append').text('Load More'); },
  4479.  
  4480. },
  4481.  
  4482. navSelector : '.pg',
  4483. nextSelector : '.pg a:last',
  4484. itemSelector : '.posthold',
  4485. errorCallback: function () {$('.append').fadeOut();},
  4486. bufferPx : 200,
  4487.  
  4488. },
  4489.  
  4490. function( newElements ) {
  4491. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  4492. lightbox: true,
  4493. rounded: true,
  4494. gutter: '0px',
  4495. borderRadius: '0px',
  4496. photoset: '.photo-slideshow',
  4497. photoWrap: '.photo-data',
  4498. photo: '.pxu-photo'
  4499. });
  4500.  
  4501.  
  4502.  
  4503. var $newElems = $(newElements);
  4504. var $newElemsIDs = $newElems.map(function(){
  4505. return this.id;
  4506. }).get();
  4507. console.log($newElems, $newElemsIDs);
  4508. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  4509.  
  4510. {block:ifunnestedcaptions}
  4511. $newElems.unnest({
  4512.  
  4513. yourCaption: ".captions",
  4514. wrapName: ".tumblr_parent",
  4515. newCaptionUsername: true,
  4516. originalPostCaptionUsername: false,
  4517. tumblrAvatars: true,
  4518. tumblrAvatarClass: ".tumblr_avatar",
  4519. usernameColon: false
  4520.  
  4521. });
  4522.  
  4523. {/block:ifunnestedcaptions}
  4524.  
  4525.  
  4526.  
  4527. });
  4528.  
  4529.  
  4530. $container.infinitescroll('unbind');
  4531. $('.append').on('click', function(e) {
  4532. e.preventDefault();
  4533. $container.infinitescroll('retrieve');
  4534. });
  4535.  
  4536. });
  4537. </script>
  4538.  
  4539. {/block:ifmanualload}
  4540. {/block:pagination}
  4541.  
  4542. {/block:indexpage}
  4543.  
  4544. <script>
  4545. // TABS SHORTCODE
  4546.  
  4547. $(function(e) {
  4548.  
  4549. $('.tabs').hide().filter(':first').show();
  4550.  
  4551. $('.tbnav a[data-tabs]').on('click', function () {
  4552.  
  4553. $(this).siblings().removeClass('active');
  4554. $('.tabs').hide();
  4555.  
  4556. var tab = $(this).data('tabs');
  4557. $(this).addClass('active');
  4558. $('#' + tab).fadeIn().show()
  4559. $(window).trigger('resize'); ;
  4560. });
  4561.  
  4562.  
  4563.  
  4564.  
  4565. $(".tbnav a").click(function(){
  4566. var cur =$(".tbnav a").index(this);
  4567. var elm = $('.tb:eq('+cur+')');
  4568. elm.addClass("fadeIn");
  4569. setTimeout(function() {
  4570. elm.removeClass("fadeIn");
  4571. $(window).trigger('resize');
  4572. }, 220);
  4573. });
  4574.  
  4575. });
  4576.  
  4577. </script>
  4578.  
  4579.  
  4580.  
  4581. <script src="https://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  4582. <script>
  4583. (function() {
  4584. // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
  4585. if (!String.prototype.trim) {
  4586. (function() {
  4587. // Make sure we trim BOM and NBSP
  4588. var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
  4589. String.prototype.trim = function() {
  4590. return this.replace(rtrim, '');
  4591. };
  4592. })();
  4593. }
  4594.  
  4595. [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
  4596. // in case the input is already filled..
  4597. if( inputEl.value.trim() !== '' ) {
  4598. classie.add( inputEl.parentNode, 'input--filled' );
  4599. }
  4600.  
  4601. // events:
  4602. inputEl.addEventListener( 'focus', onInputFocus );
  4603. inputEl.addEventListener( 'blur', onInputBlur );
  4604. } );
  4605.  
  4606. function onInputFocus( ev ) {
  4607. classie.add( ev.target.parentNode, 'input--filled' );
  4608. }
  4609.  
  4610. function onInputBlur( ev ) {
  4611. if( ev.target.value.trim() === '' ) {
  4612. classie.remove( ev.target.parentNode, 'input--filled' );
  4613. }
  4614. }
  4615. })();
  4616. </script>
  4617.  
  4618. {block:ifalternatingtheme}
  4619. <script>
  4620.  
  4621. (function($) {
  4622.  
  4623. var url, hour = new Date().getHours();
  4624. if (hour > 18 || hour < 8) {
  4625. jQuery('body').addClass('night-mode');
  4626. } else {
  4627. jQuery('body').addClass('day-mode');
  4628. }
  4629.  
  4630. }(jQuery));
  4631.  
  4632.  
  4633. </script>
  4634. {/block:ifalternatingtheme}
  4635.  
  4636. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4637.  
  4638. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  4639. jQuery.noConflict();
  4640. (function($){
  4641.  
  4642. $(document).ready(function(){
  4643.  
  4644. $("a[title],img[title],[title]").style_my_tooltips({
  4645.  
  4646. tip_follows_cursor:true,
  4647.  
  4648. tip_delay_time:30,
  4649.  
  4650. tip_fade_speed:300,
  4651.  
  4652. attribute:"title"
  4653.  
  4654. });
  4655.  
  4656. });
  4657.  
  4658. })(jQuery);
  4659. </script>
  4660.  
  4661. </body>
  4662. </html>
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!