API tools faq
paste
Advertisement
abicodes

artificial light - abicodes

abicodes
Apr 14th, 2023 (edited)
5,008
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.22 KB | None | 1 0
raw download clone embed print report
  1. <!DOCYTPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. coded by @abicodes!
  7.  
  8. - phosphor icons: https://phosphoricons.com/
  9. - google fonts + fontshare
  10. - infinite scroll by metafizzy:
  11. - npf photosets plugin by codematurgy: https://codematurgy.tumblr.com/post/643394597477875713/npfphotosets-plugin
  12. - tumblr toggle by seyche: https://seyche.tumblr.com/post/643682133088583680/hi-looove-your-new-blog-theme-i-was-wondering-if
  13. - custom likes by shythemes: https://shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons
  14. - light dark modeby anaya neogi: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
  15. - mahilu tooltips: https://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  16. - video resizing script from shythemes: https://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  17.  
  18. -->
  19.  
  20. <head>
  21.  
  22. <title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}#{Tag} | {/block:TagPage}{block:SearchPage}{SearchQuery} | {/block:SearchPage}{block:DayPage}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} | {/block:DayPage}{Title}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. {block:Description}
  26. <meta name="description" content="{MetaDescription}" />
  27. {/block:Description}
  28.  
  29. <!-- scripts -->
  30. <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  31. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>
  32. <script src=“https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js”></script>
  33. <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>
  34. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  35. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  36. <script>//determines if the user has a set theme
  37. function detectColorScheme(){
  38. var theme="light"; //default to light
  39.  
  40. //local storage is used to override OS theme settings
  41. if(localStorage.getItem("theme")){
  42. if(localStorage.getItem("theme") == "dark"){
  43. var theme = "dark";
  44. }
  45. } else if(!window.matchMedia) {
  46. //matchMedia method not supported
  47. return false;
  48. } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
  49. //OS theme setting detected as dark
  50. var theme = "dark";
  51. }
  52.  
  53. //dark theme preferred, set document with a `data-theme` attribute
  54. if (theme=="dark") {
  55. document.documentElement.setAttribute("data-theme", "dark");
  56. }
  57. }
  58. detectColorScheme();
  59.  
  60. </script>
  61.  
  62. <!-- fonts -->
  63. <link rel="preconnect" href="https://fonts.googleapis.com">
  64. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  65. <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,600;1,700&family=Prata&display=swap" rel="stylesheet">
  66. <link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@1&display=swap" rel="stylesheet">
  67. <script src="https://unpkg.com/phosphor-icons"></script>
  68.  
  69. <meta name="color:text" content="#141414" />
  70. <meta name="color:text dark mode" content="#f0f0f0" />
  71. <meta name="color:color 1" content="#e3b4b3" />
  72. <meta name="color:color 2" content="#b8cad6" />
  73. <meta name="color:color 3" content="#abd1cd" />
  74. <meta name="color:color 1 dark mode" content="#1d598c" />
  75. <meta name="color:color 2 dark mode" content="#3b3d4f" />
  76. <meta name="color:color 3 dark mode" content="#94235e" />
  77. <meta name="color:accent color" content="#91B6B1" />
  78. <meta name="color:accent color dark mode" content="#D9BDC5" />
  79.  
  80. <meta name="text:font size" content=".85rem" />
  81. <meta name="text:title font size" content="2.3rem" />
  82. <meta name="text:links font size" content=".75rem" />
  83. <meta name="text:sidebar width" content="280px" />
  84.  
  85. <meta name="if:searchbar" content="1" />
  86. <meta name="if:description" content="1" />
  87. <meta name="if:ask" content="1" />
  88. <meta name="if:submit" content="1" />
  89. <meta name="if:archive" content="1" />
  90. <meta name="if:infinitescroll" content="0" />
  91.  
  92. <meta name="select:post width" content="300px" title="300px">
  93. <meta name="select:post width" content="350px" title="350px">
  94. <meta name="select:post width" content="400px" title="400px">
  95. <meta name="select:post width" content="450px" title="450px">
  96. <meta name="select:post width" content="500px" title="500px">
  97. <meta name="select:post width" content="550px" title="550px">
  98. <meta name="select:post width" content="600px" title="600px">
  99.  
  100. <meta name="text:blog link one name" content="" />
  101. <meta name="text:blog link one url" content="" />
  102. <meta name="text:blog link two name" content="" />
  103. <meta name="text:blog link two url" content="" />
  104. <meta name="text:blog link three name" content="" />
  105. <meta name="text:blog link three url" content="" />
  106. <meta name="text:blog link four name" content="" />
  107. <meta name="text:blog link four url" content="" />
  108. <meta name="text:blog link five name" content="" />
  109. <meta name="text:blog link five url" content="" />
  110.  
  111. <style>
  112. /****************************************
  113. Variables
  114. *****************************************/
  115.  
  116. html{overflow: overlay;
  117. scroll-behavior: smooth;}
  118.  
  119. :root{
  120. /*background colors*/
  121. --color1: {color:color 1};
  122. --color2: {color:color 2};
  123. --color3: {color:color 3};
  124.  
  125.  
  126. /* colors */
  127. --transparent: rgba(0,0,0,0);
  128. --light: {color:text dark mode};
  129. --light-transparent:rgba(240, 240, 240, .5);
  130. --dark: {color:text};
  131. --dark-transparent: rgba(20, 20, 20, .5);
  132. --accent:{color:accent color}50;
  133.  
  134. /* fonts*/
  135. --headerfont:'Clash Grotesk', sans-serif;
  136. --bodyfont:'Montserrat', sans-serif;
  137. --accentfont: 'Inconsolata', monospace;
  138.  
  139. /* font sizes*/
  140. --largest-font:{text:title font size}; /*large sidebar font*/
  141. --large-font:1.4rem;
  142. --medium-font:{text:font size}; /*body font*/
  143. --small-font:{text:links font size};
  144.  
  145. /* sidebar width*/
  146. --sidebar-width:{text:sidebar width};
  147. --post-width: {select:post width};
  148. --post-gap: 40px;
  149. --gap:35px;
  150.  
  151. --background:
  152. var(--background-texture),
  153. var(--color2-gradient),
  154. var(--color3-gradient2),
  155. var(--color2-gradient3),
  156. var(--color1-gradient2),
  157. var(--color2-gradient2),
  158. var(--color3-gradient),
  159. var(--color3-gradient3),
  160. var(--color1-gradient);
  161.  
  162. --color1-gradient:
  163. linear-gradient(to right,
  164. var(--color1) 0%,
  165. var(--transparent) 100%);
  166. --color1-gradient2:
  167. radial-gradient(circle at bottom right,
  168. var(--color1),
  169. var(--transparent) 50%);
  170. --color2-gradient:
  171. radial-gradient(circle at bottom left,
  172. var(--color2) 0%,
  173. var(--transparent) 70%);
  174. --color2-gradient2:
  175. radial-gradient(circle at 60% center,
  176. var(--color2) 0%,
  177. var(--transparent) 55%);
  178. --color2-gradient3:
  179. radial-gradient(circle at 100% center,
  180. var(--color2) 0%,
  181. var(--transparent) 30%);
  182. --color3-gradient:
  183. radial-gradient(circle at top right,
  184. var(--color3),
  185. var(--transparent) 100%);
  186. --color3-gradient2:
  187. radial-gradient(circle at center left,
  188. var(--color3),
  189. var(--transparent) 25%);
  190. --color3-gradient3:
  191. radial-gradient(circle at 60% bottom,
  192. var(--color3),
  193. var(--transparent) 75%);
  194.  
  195. --background-texture: url('https://img.nickpic.host/56Mk0X.png');
  196.  
  197. }
  198.  
  199. [data-theme="dark"]{
  200. --light: {color:text};
  201. --dark: {color:text dark mode};
  202. --dark-transparent:rgba(240, 240, 240, .5);
  203. --light-transparent:rgba(20,20,20, .5);
  204. --color1: {color:color 1 dark mode};
  205. --color2: {color:color 2 dark mode};
  206. --color3: {color:color 3 dark mode};
  207. --accent:{color:accent color dark mode}50;
  208. }
  209.  
  210. body{
  211. margin: 0px !important;
  212. background: var(--background);
  213. color: var(--dark);
  214. font: var(--medium-font) var(--bodyfont);
  215. text-size-adjust: none;
  216. position: relative;
  217. background-attachment: fixed;
  218. }
  219.  
  220. a{
  221. text-decoration: none;
  222. color: inherit;
  223. transition: .3s ease;
  224. }
  225.  
  226. a:hover{
  227. color: var(--accent);
  228. }
  229.  
  230. #s-m-t-tooltip{
  231. /* basic */
  232. max-width:300px;
  233. z-index:1000;
  234. /* style and design */
  235. padding:8px 12px;
  236. background:var(--dark-transparent); /*
  237. fallback if rgba not supported */
  238. -moz-border-radius:15px;
  239. -webkit-border-radius:15px;
  240. border-radius:15px;
  241. border: 1px solid var(--dark);
  242. /* font */
  243. font-family:var(--accentfont);
  244. font-size:var(--small-font);
  245. line-height:16px;
  246. color:var(--light);
  247. margin-top: -28px;
  248. margin-left: 20px;
  249. }
  250.  
  251. ::-webkit-scrollbar {
  252. width:17px;
  253. height:28px;
  254. background-color:var(--transparent);
  255. }
  256.  
  257. ::-webkit-scrollbar-track {
  258. border-radius:10px;
  259. background-clip:padding-box;
  260. border:11px solid transparent;
  261. background-color:var(--light);
  262. }
  263.  
  264. ::-webkit-scrollbar-thumb {
  265. border: 6px solid transparent;
  266. background-clip: padding-box;
  267. border-radius:50px;
  268. background-color:var(--dark);
  269. }
  270.  
  271. .hover-underline-animation,{
  272. display: inline-block;
  273. position: relative;
  274. }
  275.  
  276. .hover-underline-animation:after{
  277. content: '';
  278. position: absolute;
  279. width: 100%;
  280. transform: scaleX(0);
  281. height: 3px;
  282. bottom: 0;
  283. left: 0;
  284. background-color: var(--dark);
  285. transform-origin: bottom left;
  286. transition: transform 0.25s ease-out;
  287. }
  288.  
  289. .hover-underline-animation:hover:after{
  290. transform: scaleX(1);
  291. transform-origin: bottom left;
  292. }
  293.  
  294. /****************************************
  295. Light Dark Toggle
  296. *****************************************/
  297.  
  298. .toggle{
  299. }
  300.  
  301. .toggle label{
  302. cursor: pointer;
  303. transition: .3s ease;
  304. }
  305.  
  306. .toggle label:hover{
  307. }
  308.  
  309. .toggle input {display:none;}
  310.  
  311. /****************************************
  312. Theme Body Layout
  313. *****************************************/
  314.  
  315. .theme-body{
  316. max-width: 1200px;
  317. position: relative;
  318. display: grid;
  319. grid-template-columns: auto 1fr auto;
  320. margin: auto;
  321. grid-gap: 35px;
  322. margin-top: 40px;
  323. }
  324.  
  325. #top{
  326. margin-top: -40px;
  327. }
  328.  
  329. /****************************************
  330. Sidebar (Left)
  331. *****************************************/
  332.  
  333. .al-leftsidebar{
  334. width: var(--sidebar-width);
  335. height: calc(100vh - 80px);
  336. top: 40px;
  337. border-right: 1.5px solid var(--dark);
  338. padding: 20px 30px;
  339. box-sizing: border-box;
  340. display: flex;
  341. flex-direction: column;
  342. justify-content: space-between;
  343. position: sticky;
  344. z-index: 50;
  345. }
  346.  
  347. .al-title{
  348. font-family: var(--headerfont);
  349. text-transform: lowercase;
  350. font-size: var(--largest-font);
  351. font-weight: bold;
  352. margin-bottom: 10px;
  353. position: relative;
  354. }
  355.  
  356. .al-title a:hover{
  357. color: var(--dark);
  358. }
  359.  
  360. .al-blurb{
  361. padding-left: 15px;
  362. border-left: 1px solid var(--dark-transparent);
  363. margin-left: 5px;
  364. }
  365.  
  366. .al-links{
  367. display: flex;
  368. justify-content: flex-end;
  369. gap: 5px;
  370. flex-wrap: wrap;
  371. margin-top: 20px;
  372. text-transform: lowercase;
  373. }
  374.  
  375. .al-links a:empty{display:none;}
  376.  
  377. .al-links a, .al-links input{
  378. display: inline-block;
  379. padding: 0.5em 1.0em;
  380. background: var(--transparent);
  381. color: var(--dark);
  382. font-family: var(--accentfont);
  383. font-size: var(--small-font);
  384. cursor: pointer;
  385. border: 1px solid var(--dark);
  386. border-radius: 20px;
  387. margin-bottom: 3px;
  388. }
  389.  
  390. .al-links a:hover {
  391. background-color: var(--accent);
  392. }
  393.  
  394. .al-leftsidebar-bottom{
  395. align-self: center;
  396. display: flex;
  397. gap: 7px;
  398. }
  399.  
  400. .al-leftsidebar-bottom a{
  401. display: flex;
  402. align-items: center;
  403. text-transform: uppercase;
  404. letter-spacing: .5px;
  405. gap: 10px;
  406. font-size: var(--small-font);
  407. }
  408.  
  409. /****************************************
  410. Sidebar (Right)
  411. *****************************************/
  412.  
  413. .al-rightsidebar{
  414. width: 80px;
  415. height: calc(100vh - 80px);
  416. top: 40px;
  417. border-left: 1.5px solid var(--dark);
  418. padding: 20px 30px;
  419. box-sizing: border-box;
  420. display: flex;
  421. flex-direction: column;
  422. justify-content: space-between;
  423. position: sticky;right:10px;
  424. font-size: 1.5rem;
  425. z-index: 50;
  426.  
  427. }
  428.  
  429. #controls-toggle{
  430. cursor: pointer;
  431. margin-bottom: 5px;
  432. }
  433.  
  434. #controls-toggle:hover{color: var(--accent);}
  435.  
  436. .iframe-controls--desktop{
  437. }
  438.  
  439. .iframe-controls--desktop {
  440. position:fixed;
  441. top:0px;
  442. right:10px;
  443. padding-right: 35px;
  444. z-index:10000000000000;
  445. -webkit-transform:scale(0.8,0.8);
  446. -ms-transform:scale(0.8,0.8);
  447. -webkit-transform-origin: 100% 0%;
  448. -ms-transform-origin:100% 0%;
  449. transform:scale(0.8,0.8);
  450. display:none;
  451. height: 54px !important;
  452. transform-origin:100% 0%;
  453. }
  454.  
  455. .controls_tumblr {
  456. all: unset;
  457. color: yourcolor;
  458. cursor: pointer;
  459. font-size: var(--big-font);
  460. }
  461.  
  462. .al-rightsidebar i{transition: .3s ease;}
  463.  
  464. .al-rightsidebar i:hover{
  465. color: var(--accent);}
  466.  
  467. /****************************************
  468. Basic Post Layout
  469. *****************************************/
  470. .al-post{
  471. margin: auto;
  472. width: var(--post-width);
  473. margin-bottom: var(--post-gap);
  474. }
  475.  
  476. .al-post-content{
  477. background: var(--light-transparent);
  478. border-bottom: 1.5px solid var(--dark);
  479. border-radius: 5px 5px 0px 0px;
  480. }
  481.  
  482. .al-post-content blockquote{border-left: 1px solid var(--dark); padding-left: 20px; margin-left: 5px;}
  483.  
  484. .more{
  485. font-family: var(--accentfont);
  486. font-weight: bold;
  487. text-align: center;
  488. }
  489.  
  490. al-postname{
  491. max-height: 40px;
  492. height: 40px;
  493. display: grid;
  494. align-items: center;
  495. border-bottom: 1.5px solid var(--dark);
  496. border-top: 1.5px solid var(--dark);
  497. grid-template-columns: 1fr 40px;
  498. grid-template-areas: "username icon";
  499. font-family: var(--accentfont);
  500. letter-spacing: .4px;
  501. font-weight: bold;
  502. }
  503.  
  504. al-postname:first-of-type{
  505. border-top: none;
  506. }
  507.  
  508. al-postname .poster{
  509. grid-area: username;
  510. margin-left: 20px;
  511. margin-right: 20px;
  512. display: flex;
  513. gap: 15px;
  514. align-items: center;
  515. text-transform: lowercase;
  516. }
  517.  
  518. al-postname .poster .pinned{
  519. border: 1px solid var(--dark);
  520. padding: 7px 10px;
  521. border-radius: 15px;
  522. display: flex;
  523. align-items: center;
  524. gap: 10px;
  525. }
  526. al-postname .poster-icon{
  527. width: 40px;
  528. height: 40px;
  529. border-left: 1.5px solid var(--dark);
  530. background-size: cover;
  531. grid-area: icon;
  532. }
  533.  
  534. al-postname:first-of-type .poster-icon{
  535. border-radius: 0px 5px 0px 0px;
  536. }
  537.  
  538. .al-post-content al-postname:nth-of-type(even){
  539. grid-template-columns:40px 1fr;
  540. grid-template-areas: "icon username";
  541. }
  542.  
  543. .al-post-content al-postname:nth-of-type(even) .poster{
  544. text-align:right;
  545. }
  546.  
  547. .al-post-content al-postname:nth-of-type(even) .poster-icon{
  548. border-left: none;
  549. border-right: 1.5px solid var(--dark-transparent);
  550. }
  551.  
  552. .deactivated:after{
  553. content: " (deactivated)";
  554. color: var(--dark-transparent);
  555. }
  556.  
  557. /****************************************
  558. Post Links
  559. *****************************************/
  560.  
  561. .al-notes{
  562. display: flex;
  563. justify-content: space-between;
  564. padding: 10px 20px;
  565. align-items: center;
  566. }
  567.  
  568. .al-notes span{
  569. display: flex;
  570. gap: 7px;
  571. }
  572.  
  573. .al-notes a{
  574. border: 1px solid var(--dark);
  575. padding: 7px 10px;
  576. border-radius: 15px;
  577. font-family: var(--accentfont);
  578. text-transform: lowercase;
  579. }
  580.  
  581. .al-notes a:hover{
  582. color: var(--dark);
  583. background: var(--accent);
  584. }
  585.  
  586. .al-notes i{
  587. font-weight: 700;
  588. font-size: var(--medium-font);
  589. }
  590.  
  591. /****************************************
  592. Tags
  593. *****************************************/
  594.  
  595. .al-tags{
  596. display: flex;
  597. padding: 0px 20px;
  598. align-items: center;
  599. flex-wrap: wrap;
  600. gap: 10px;
  601.  
  602. }
  603.  
  604. .al-tags a{
  605. border: 1px solid var(--dark);
  606. padding: 7px 10px;
  607. border-radius: 15px;
  608. font-family: var(--accentfont);
  609. text-transform: lowercase;
  610. font-size: var(--small-font);
  611. }
  612.  
  613. .al-tags a:hover{
  614. color: var(--dark);
  615. background: var(--accent);
  616. }
  617.  
  618. /****************************************
  619. Basic Post Styling
  620. *****************************************/
  621.  
  622. .al-post-title{
  623. font-size: var(--large-font);
  624. font-family: var(--headerfont);
  625. font-weight: 600;
  626. margin-bottom: 5px;
  627. }
  628.  
  629. /****************************************
  630. Text Post
  631. *****************************************/
  632.  
  633. .type-text{padding: 20px 30px;
  634. text-align: justify;}
  635.  
  636. .type-text a{
  637. font-weight: 700;
  638. border-bottom: 1px solid var(--accent);
  639. }
  640.  
  641. .type-text img{border-radius: 10px; width: 100%;}
  642.  
  643. .type-text li{
  644. padding-bottom: 10px;
  645. }
  646.  
  647. /****************************************
  648. Photo Post
  649. *****************************************/
  650.  
  651. .type-photo img{
  652. width: 100%;
  653. border-bottom: 1.5px solid var(--dark);
  654. }
  655.  
  656. /****************************************
  657. Photoset Post
  658. *****************************************/
  659.  
  660. .photoset-container{}
  661.  
  662. .photoset-container .npf_photoset{
  663. border-bottom: 1.5px solid var(--dark);
  664. }
  665. /****************************************
  666. Chat Post
  667. *****************************************/
  668.  
  669. #lines{list-style-type: none;
  670. margin-left: -40px;
  671. }
  672.  
  673. #lines li{
  674. border-top: 1px solid var(--dark-transparent);
  675. padding: 15px;
  676. }
  677.  
  678. #lines li:nth-of-type(1){
  679. border-top: none;
  680. }
  681.  
  682. .label{font-family: var(--accentfont);
  683. font-weight: 700;}
  684.  
  685. /****************************************
  686. Quote Post
  687. *****************************************/
  688.  
  689. cite.caption{
  690. font-family: var(--accentfont);
  691. }
  692.  
  693.  
  694. /****************************************
  695. Link Post
  696. *****************************************/
  697.  
  698. .al-link .link-header{
  699. font-size: var(--largest-font);
  700. font-family: var(--headerfont);
  701. font-weight: 600;
  702. padding: 20px 30px;
  703. position: relative;
  704. z-index: 30!important;
  705. }
  706.  
  707. .al-link .link-bit{
  708. border-top: 1px solid var(--dark);
  709. }
  710.  
  711. /****************************************
  712. Audio Post
  713. *****************************************/
  714.  
  715. .audio {
  716. width:100%;
  717. height:80px;
  718. background-size:cover;
  719. background-position:center center;
  720. border-radius:{text:border radius};
  721. background-color:{color:accent};
  722. }
  723.  
  724. .audio-content {
  725. width:calc(100% - 35px);
  726. height:80px;
  727. display:flex;
  728. align-items:center;
  729. justify-content:space-between;
  730. padding-left: 35px;
  731. border-bottom: 1.5px solid var(--dark);
  732. }
  733.  
  734. .audio-play {
  735. width:30px;
  736. height:30px;
  737. border-radius:20px;
  738. margin-right:20px;
  739. overflow:hidden;
  740. border: 1px solid var(--dark);
  741. }
  742.  
  743. .audio-play iframe {
  744. margin-left:-1px;
  745. margin-top:1px;
  746. }
  747.  
  748. .audio-info {
  749. width:calc(100% - 60px - 100px);
  750. height:auto;
  751. }
  752.  
  753. .audio-info b, .audio-info span {
  754. width:100%;
  755. display:block;
  756. color:var(--dark);
  757. font-family: var(--accentfont);
  758. }
  759.  
  760. .audio-art {
  761. margin-left:20px;
  762. width:80px;
  763. height:80px;
  764. background-size:cover;
  765. border-left: 1.5px solid var(--dark);
  766. }
  767.  
  768. /****************************************
  769. Video Post
  770. *****************************************/
  771.  
  772. .video{
  773. border-bottom: 1.5px solid var(--dark);
  774. }
  775.  
  776. /****************************************
  777. Ask
  778. *****************************************/
  779.  
  780. .al-ask-content{padding: 20px 30px;
  781. text-align: justify;
  782. background-color: var(--accent);}
  783.  
  784. .ask-reply{
  785. border-top: 1.5px solid var(--dark);
  786. }
  787.  
  788. /****************************************
  789. Under Post Info
  790. *****************************************/
  791.  
  792. .under-post{
  793. margin-top: 10px;
  794. }
  795.  
  796. .reblog-info{
  797. border-top: 1.5px solid var(--dark);
  798. padding: 10px 20px;
  799. text-align: right;
  800. text-transform: lowercase;
  801. font-family: var(--accentfont);
  802. }
  803.  
  804. .reblog-info div{
  805. border: 1px solid var(--dark);
  806. padding: 10px 15px;
  807. border-radius: 15px;
  808. display: inline-block;
  809. }
  810.  
  811. .reblog-info div a{
  812. font-weight: bold;
  813. }
  814.  
  815. .notes-info{
  816. border-top: 1.5px solid var(--dark);
  817. background: var(--light-transparent);
  818. border-radius: 0px 0px 5px 5px;
  819. font-family: var(--accentfont);
  820. text-transform: lowercase;
  821. }
  822.  
  823. .notes-info .note{
  824. border-top: 1px solid var(--dark-transparent);
  825. padding: 10px 20px;
  826. margin-left: -40px;
  827. }
  828.  
  829. .notes img {
  830. display: none!important;
  831. }
  832.  
  833. ol.notes {
  834. margin-top: 0px;
  835. list-style-type: none;}
  836.  
  837. .notes-info .note:first-of-type{border-top: none;}
  838.  
  839. .notes-info .note a{font-weight: 800;}
  840.  
  841. svg {
  842. width:13.5px;
  843. height:auto;
  844. opacity:1;
  845. padding:1px;
  846. display:block;
  847. overflow:visible;
  848. }
  849. .controls a {
  850. position:relative;
  851. display:inline-block;
  852. overflow:hidden;
  853. font-weight: 700;
  854. font-size: var(--medium-font);
  855. }
  856.  
  857. .controls .like .liked + svg {
  858. opacity:1;
  859. }
  860. .controls .like .liked + svg path {
  861. fill:var(--dark);
  862. }
  863. .controls .like .like_button {
  864. position:relative;
  865. }
  866. .controls .like .like_button iframe {
  867. position:absolute;
  868. top:0;
  869. left:0;
  870. bottom:0;
  871. right:0;
  872. z-index:2;
  873. opacity:0;
  874. }
  875.  
  876.  
  877. /****************************************
  878. Media Queries
  879. *****************************************/
  880.  
  881. @media screen and (max-width: 1020px) {
  882. .al-post{
  883. width: clamp(200px 70% var(--post-width));
  884. }
  885. }
  886.  
  887. @media screen and (max-width: 700px) {
  888.  
  889. .theme-body{
  890. max-width: 2000px;
  891. position: relative;
  892. display: grid;
  893. grid-template-columns: 1fr;
  894. grid-template-rows: auto 1fr auto;
  895. margin: auto;
  896. margin-top: 0px;
  897. }
  898.  
  899. .al-leftsidebar{
  900. height: var(--sidebar-width);
  901. width: calc(100vw);
  902. top: 0px;
  903. border-right: none;
  904. border-bottom: 1.5px solid var(--dark);
  905. background: var(--background);
  906. left: 0px;
  907. justify-content: space-around;
  908. padding: 30px 55px;
  909. clip-path: polygon(0 0, 100% 0, 100% 95%, calc(100% - 40px) 100%, 40px 100%, 0 95%);
  910. background-attachment: fixed;
  911. position: relative;
  912. }
  913.  
  914. .al-rightsidebar{
  915. width: 100vw;
  916. height: 65px;
  917. bottom: 0px;
  918. right: unset;
  919. top: unset;
  920. border-top: 1.5px solid var(--dark);
  921. border-left: none;
  922. display: flex;
  923. flex-direction: row;
  924. justify-content: space-around;
  925. font-size: 1.5rem;
  926. background: var(--background);
  927. background-attachment: fixed;
  928. clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 5%, 100% 100%, 0 100%, 0 5%);
  929.  
  930. }
  931.  
  932. .al-rightsidebar span{
  933. display: flex;
  934. gap: 20px;
  935. }
  936.  
  937. .al-main{
  938. }
  939.  
  940. .al-post{
  941. width: 80%;
  942. }
  943.  
  944. }
  945.  
  946. @media screen and (max-width: 480px) {
  947.  
  948. .al-leftsidebar{
  949. padding: 30px;
  950. justify-content: space-between;
  951. }
  952. }
  953. {CustomCSS}
  954. </style>
  955.  
  956. </head>
  957. <body> <link rel="icon" type="image/png" href="{Favicon}">
  958. <title>{title}</title>
  959.  
  960. <body>
  961. <a id="top"></a>
  962. <div class = "theme-body">
  963. <div class = "al-leftsidebar">
  964. <div class = "al-leftsidebar-top">
  965. <div class = "al-title hover-underline-animation"><a href = "{BlogURL}">{Title}</a>
  966. </div>
  967. {block:Ifdescription}<div class = "al-blurb">{Description}</div> {/block:Ifdescription}
  968. <div class = "al-links"><a href = "{BlogURL}">{lang:home}</a>
  969. {block:AskEnabled}{block:Ifask}<a href = "/ask">ask</a>{/block:Ifask}{/block:AskEnabled}
  970. {block:SubmissionsEnabled}{block:Ifsubmit}<a href = "/submit">submit</a>{/block:Ifsubmit}{/block:SubmissionsEnabled}
  971. <a href = "{text:blog link one url}">{text:blog link one name}</a>
  972. <a href = "{text:blog link two url}">{text:blog link two name}</a>
  973. <a href = "{text:blog link three url}">{text:blog link three name}</a>
  974. <a href = "{text:blog link four url}">{text:blog link four name}</a>
  975. <a href = "{text:blog link five url}">{text:blog link five name}</a>
  976. {block:Ifarchive}<a href = "/archive">{lang:archive}</a> {/block:Ifarchive}
  977. {block:Ifsearchbar}<form action="/search" method="get" class="sfm" name="theform">
  978. <input type="text" name="q" value="" placeholder="search blog.." autocomplete="off"/>
  979. </form>{/block:Ifsearchbar}
  980. </div>
  981. </div>
  982.  
  983. {block:Pagination}<div class = "al-leftsidebar-bottom" {block:Ifinfinitescroll}style = "display:none;"{/block:Ifinfinitescroll}>{block:PreviousPage}
  984. <a href="{PreviousPage}"><i class="ph-caret-left"></i> previous</a>
  985. {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}
  986. <b>{PageNumber}</b>
  987. {/block:CurrentPage}{block:JumpPage}
  988. <a class="jump_page" href="{URL}">{PageNumber}</a>
  989. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  990. <a class="next" href="{NextPage}">next <i class="ph-caret-right"></i></a>
  991. {/block:NextPage}</div>{/block:Pagination}
  992.  
  993. </div>
  994. <div class = "al-main container">
  995.  
  996. {block:Posts}
  997. <div class = "al-post post" id="{PostID}">
  998. <div class = "al-post-content">
  999.  
  1000. {block:Text}
  1001. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname> <div class="type-text post-content postSelector">
  1002. {block:Title}
  1003. <div class = "al-post-title">
  1004. <a href="{Permalink}">{Title}</a>
  1005. </div>
  1006. {/block:Title}
  1007.  
  1008. {Body}
  1009. {block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}
  1010. </div>{/block:NotReblog}
  1011.  
  1012. {block:RebloggedFrom}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname>{block:Title}
  1013. <div class="type-text post-content postSelector"><div class = "al-post-title">
  1014. <a href="{Permalink}">{Title}</a>
  1015. </div></div>
  1016. {/block:Title}{block:Reblogs}
  1017.  
  1018.  
  1019. {block:isOriginalEntry}<div style = "display:none">{/block:isOriginalEntry}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname>{block:isOriginalEntry}</div>{/block:isOriginalEntry}
  1020.  
  1021.  
  1022. <div class = "type-text">{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Text}
  1023.  
  1024. {block:Photo}
  1025. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname>
  1026. <figure class="type-photo post-content postSelector">
  1027. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  1028. </figure>
  1029. {block:Caption}<div class = "type-text">{Caption} {block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}</div>{/block:Caption}{/block:NotReblog}
  1030.  
  1031. {block:RebloggedFrom}
  1032. <al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname>
  1033. <figure class="type-photo post-content">
  1034. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  1035.  
  1036. </figure>
  1037. {block:Reblogs}
  1038. <al-postname {block:isOriginalEntry}style = "display:none" {/block:isOriginalEntry}><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname><div class = "type-text">{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}
  1039. {/block:Photo}
  1040.  
  1041. {block:Photoset}
  1042.  
  1043. {block:NotReblog}<div class = "photoset-container"><al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname>
  1044. <div class="postSelector">
  1045. <div class="npf_photoset" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{Photoset}</div>
  1046. </div>
  1047. {block:Caption}<div class = "type-text photoset-caption">{Caption}{block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}</div>{/block:Caption}</div>{/block:NotReblog}
  1048.  
  1049.  
  1050. {block:RebloggedFrom} <div class = "photoset-container"><al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname>
  1051. <div class="postSelector">
  1052. <div class="npf_photoset" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{Photoset}</div>
  1053. </div>{block:Reblogs}
  1054.  
  1055.  
  1056. <al-postname {block:isOriginalEntry}style = "display:none"{/block:isOriginalEntry}><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname>
  1057.  
  1058.  
  1059. {block:Caption}<div class = "type-text photoset-caption">{Body}</div>{/block:Caption}{/block:Reblogs}</div>{/block:RebloggedFrom}
  1060.  
  1061. {/block:Photoset}
  1062.  
  1063. {block:Quote}
  1064.  
  1065. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname> <div class="type-text post-content">
  1066. <blockquote>{Quote}</blockquote>
  1067.  
  1068. {block:Source}
  1069. <cite class="caption">
  1070. {Source}
  1071. </cite>
  1072. {/block:Source}
  1073. </div>{/block:NotReblog}
  1074. {block:RebloggedFrom}{block:Reblogs}
  1075. <al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname> <div class="type-text post-content">
  1076. <blockquote>{Quote}</blockquote>
  1077.  
  1078. {block:Source}
  1079. <cite class="caption">
  1080. {Source}
  1081. </cite>
  1082. {/block:Source}
  1083. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1084. {/block:Quote}
  1085.  
  1086. {block:Link}
  1087. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname><div class = "al-link">
  1088. <div class = "link-header hover-underline-animation"><a href = "{URL}">{Name}</a></div>
  1089. {block:Description}<div class = "type-text post-content link-bit">
  1090. {Description}{block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}
  1091. </div>{/block:Description}
  1092. </div>{/block:NotReblog}
  1093.  
  1094. {block:RebloggedFrom}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname>
  1095. <div class = "al-link">
  1096. <div class = "link-header hover-underline-animation"><a href = "{URL}">{Name}</a></div>{block:Reblogs}
  1097.  
  1098.  
  1099. <al-postname {block:isOriginalEntry}style = "display:none"{/block:isOriginalEntry}><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname>
  1100.  
  1101.  
  1102. {block:Description}<div class = "type-text post-content link-bit">
  1103. {Body}
  1104. </div>{/block:Description}{/block:Reblogs}</div>{/block:RebloggedFrom}
  1105.  
  1106.  
  1107. {/block:Link}
  1108.  
  1109. {block:Chat}
  1110. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname> <div class = "al-chat"><ul id="lines">{block:Lines} <li>
  1111. {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}
  1112. </li>
  1113. {/block:Lines}
  1114. </ul>
  1115. </div>{/block:NotReblog}
  1116. {block:RebloggedFrom}{block:Reblogs}
  1117. <al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname><div class = "al-chat"><ul id="lines">{block:Lines} <li>
  1118. {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}
  1119. </li>
  1120. {/block:Lines}
  1121. </ul>
  1122. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1123.  
  1124.  
  1125.  
  1126. {/block:Chat}
  1127.  
  1128. {block:Audio}
  1129. {block:NotReblog}<al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname><div class="audio-type">
  1130.  
  1131. <div class="audio-content">
  1132. {block:AudioPlayer}
  1133. <div class="audio-play">{AudioPlayer}</div>
  1134. {/block:AudioPlayer}
  1135.  
  1136. <div class="audio-info">
  1137. {block:TrackName}
  1138. <b>
  1139. {TrackName}
  1140. </b>
  1141. {/block:TrackName}
  1142.  
  1143. {block:Artist}
  1144. <span>
  1145. {Artist}
  1146. </span>
  1147. {/block:Artist}
  1148. </div>
  1149.  
  1150. {block:AlbumArt}
  1151. <div class="audio-art" style="background-image:url('{AlbumArtURL}');"></div>
  1152. {/block:AlbumArt}
  1153. </div>
  1154. </div>
  1155.  
  1156. {block:Caption}<div class="type-text post-content">{Caption}{block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}
  1157.  
  1158. </div>{/block:Caption}{/block:NotReblog}
  1159. {block:RebloggedFrom}
  1160. <al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname>
  1161. <div class="audio-type">
  1162.  
  1163. <div class="audio-content">
  1164. {block:AudioPlayer}
  1165. <div class="audio-play">{AudioPlayer}</div>
  1166. {/block:AudioPlayer}
  1167.  
  1168. <div class="audio-info">
  1169. {block:TrackName}
  1170. <b>
  1171. {TrackName}
  1172. </b>
  1173. {/block:TrackName}
  1174.  
  1175. {block:Artist}
  1176. <span>
  1177. {Artist}
  1178. </span>
  1179. {/block:Artist}
  1180. </div>
  1181.  
  1182. {block:AlbumArt}
  1183. <div class="audio-art" style="background-image:url('{AlbumArtURL}');"></div>
  1184. {/block:AlbumArt}
  1185. </div>
  1186. </div>{/block:Caption}
  1187. {block:Reblogs}<al-postname {block:isOriginalEntry}style ="display:none" {/block:isOriginalEntry}><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname><div class="type-text post-content">{Body}{block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}</div>{/block:Reblogs}
  1188. {/block:RebloggedFrom}
  1189. {/block:Audio}
  1190.  
  1191. {block:Video}
  1192.  
  1193. {block:NotReblog}<div class = "video-container"></div><al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div>{/block:PinnedPostLabel}<a href="{BlogURL}">{Name}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-96}');"></div></al-postname>
  1194. <div class="type-video post-content">
  1195. <div class="video">{Video-500}</div>
  1196. </div>
  1197. {block:Caption}<div class = "type-text video-caption">{Body} {block:More} <div class="more"> <a href="{Permalink}">read more</a> </div> {/block:More}</div>{/block:Caption}</div>{/block:NotReblog}
  1198.  
  1199. {block:RebloggedFrom} <div class = "video-container"><al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{ReblogRootURL}">{ReblogRootName}</a></div><div class = "poster-icon" style="background-image: url('{ReblogRootPortraitURL-96}');"></div></al-postname><div class="type-video post-content">
  1200. <div class="video">{Video-500}</div></div>{block:Reblogs}
  1201.  
  1202.  
  1203. <al-postname {block:isOriginalEntry}style = "display:none"{/block:isOriginalEntry}><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname>
  1204.  
  1205.  
  1206. {block:Caption}<div class = "type-text video-caption">{Body}</div>{/block:Caption}{/block:Reblogs}</div>{/block:RebloggedFrom}
  1207.  
  1208. {/block:Video}
  1209.  
  1210. {block:Answer}
  1211. <al-postname><div class = "asker poster{block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<span>{Asker} asked —</span></div><div class = "poster-icon" style = "background-image: url('{AskerPortraitURL-96}');"></div></al-postname>
  1212. <div class = "al-ask-content">{Question}
  1213. </div>
  1214. {block:Answerer}<al-postname><div class = "poster replier {block:IsDeactivated}deactivated{/block:IsDeactivated}"><span>{Answerer} replied —</span></div><div class = "poster-icon"style = "background-image: url('{AnswererPortraitURL-96}');"></div></al-postname>
  1215. <div class = "type-text post-content">
  1216. {Answer}
  1217. </div>{/block:Answerer}
  1218.  
  1219. {block:Reblogs} <al-postname><div class = "poster {block:IsDeactivated}deactivated{/block:IsDeactivated}">{block:PinnedPostLabel}<div class ="pinned"><i class="ph ph-push-pin"></i> pinned post</div> {/block:PinnedPostLabel}<a href="{permalink}">{username}</a></div><div class = "poster-icon" style="background-image: url('{PortraitURL-64}');"></div></al-postname><div class="type-text post-content">
  1220. {block:Title}
  1221. <div class = "al-post-title">
  1222. <a href="{Permalink}">{Title}</a>
  1223. </div>
  1224. {/block:Title}
  1225.  
  1226. {Body}
  1227. </div>
  1228. {/block:Reblogs}
  1229.  
  1230. {block:NotReblog}<div class="type-text ask-reply">{Replies}</div>{/block:NotReblog}
  1231. {/block:Answer}
  1232.  
  1233. </div>
  1234. {block:Date}
  1235. <div class = "al-notes"><span><a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year}</a>{block:NoteCount}<a href = "{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</span><span><a href="{ReblogURL}"><i class="ph-arrow-clockwise-bold"></i></a><span class="controls">
  1236. <a href="#" class="like">{LikeButton}
  1237. <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M133.7,211.9l81-81c19.9-20,22.8-52.7,4-73.6a52,52,0,0,0-75.5-2.1L128,70.5,114.9,57.3c-20-19.9-52.7-22.8-73.6-4a52,52,0,0,0-2.1,75.5l83.1,83.1A8.1,8.1,0,0,0,133.7,211.9Z" fill="none" stroke="var(--dark)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
  1238. </a>
  1239. </span></div>
  1240.  
  1241. {block:HasTags}
  1242. <div class = "al-tags">
  1243. {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  1244. </div>
  1245. {/block:HasTags}
  1246.  
  1247. {block:PermalinkPage}
  1248. <div class = "under-post">
  1249. {block:RebloggedFrom}<div class = "reblog-info">
  1250. <div class = "reblog">reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1251. </div>
  1252. </div>{/block:RebloggedFrom}
  1253. {block:PostNotes}
  1254. <div class = "notes-info">
  1255. {PostNotes}
  1256. </div>
  1257. {/block:PostNotes}
  1258. </div>
  1259. {/block:PermalinkPage}
  1260. {/block:Date}
  1261. </div>
  1262. {/block:Posts}
  1263. </div>
  1264.  
  1265.  
  1266. <div class = "al-rightsidebar">
  1267. <span><div id = "controls-toggle"><button type="button" class="controls_tumblr"><i class="ph-list-plus-fill" title="tumblr controls"></i></button></div>
  1268. <div class = "light-dark-toggle">
  1269. <div class="toggle" title="light-dark toggle"><label id="theme-switch" for="checkbox"><input type="checkbox" id="checkbox" /><i class="ph-circle-half-fill"></i></label></div></div></span>
  1270. <span><div class = "upscroll"><a href="#top" title="scroll to top"><i class="ph-caret-up-bold"></i></a></div>
  1271. <div class = "credit"><a href = "https://abicodes.tumblr.com/" title = "© abi codes"><i class="ph-sparkle-fill"></i></a></div></span>
  1272. </div
  1273. </div>
  1274. </body>
  1275.  
  1276. <script>//style-my-tootltips by malihu (http://manos.malihu.gr)
  1277. //plugin home http://manos.malihu.gr/style-my-tooltips-jquery-plugin
  1278. (function ($) {
  1279. var methods = {
  1280. init: function (options) {
  1281. var defaults = {
  1282. tip_follows_cursor: false, //tooltip follows cursor: boolean
  1283. tip_delay_time: 700, //tooltip delay before displaying: milliseconds
  1284. tip_fade_speed: 300, //tooltip fade in/out speed: milliseconds
  1285. attribute: "title" //tooltip text come from this attribute
  1286. },
  1287. options = $.extend(defaults, options);
  1288. if ($("#s-m-t-tooltip").length === 0) {
  1289. $("body").append("<div id='s-m-t-tooltip'><div></div></div>");
  1290. }
  1291. var smtTooltip = $("#s-m-t-tooltip");
  1292. smtTooltip
  1293. .css({
  1294. position: "absolute",
  1295. display: "none"
  1296. })
  1297. .data("smt-z-index", smtTooltip.css("z-index"))
  1298. .children("div")
  1299. .css({
  1300. width: "100%",
  1301. height: "100%"
  1302. });
  1303.  
  1304. function smtGetCursorCoords(event) {
  1305. var smtCursorCoordsX = event.pageX,
  1306. smtCursorCoordsY = event.pageY;
  1307. smtTooltip.style_my_tooltips("position", {
  1308. smtCursorCoordsX: smtCursorCoordsX,
  1309. smtCursorCoordsY: smtCursorCoordsY
  1310. });
  1311. }
  1312. $(document).on(
  1313. "mouseout mousedown click",
  1314. ".smt-current-element",
  1315. function () {
  1316. var $this = $(this);
  1317. clearTimeout(smtTooltip_delay);
  1318. smtTooltip.style_my_tooltips("hide", {
  1319. speed: $this.data("smt-fade-speed")
  1320. });
  1321. $(document).unbind("mousemove");
  1322. $this.removeClass("smt-current-element");
  1323. if ($this.attr(options.attribute) === "") {
  1324. $this.attr(options.attribute, $this.data("smt-title"));
  1325. }
  1326. }
  1327. );
  1328. return this["on"]("mouseover", function (event) {
  1329. var $this = $(this),
  1330. title = $this.attr(options.attribute);
  1331. $this
  1332. .addClass("smt-current-element")
  1333. .data({
  1334. "smt-title": title,
  1335. "smt-fade-speed": options.tip_fade_speed
  1336. })
  1337. .attr(options.attribute, "");
  1338. smtTooltip.style_my_tooltips("update", {
  1339. title: title,
  1340. speed: options.tip_fade_speed,
  1341. delay: options.tip_delay_time,
  1342. tip_follows_cursor: options.tip_follows_cursor
  1343. });
  1344. $(document).bind("mousemove", function (event) {
  1345. smtGetCursorCoords(event);
  1346. });
  1347. });
  1348. },
  1349. update: function (options) {
  1350. var $this = $(this);
  1351. $this
  1352. .stop()
  1353. .css({
  1354. display: "none",
  1355. "z-index": $this.data("smt-z-index")
  1356. })
  1357. .children("div")
  1358. .text(options.title);
  1359. smtTooltip_delay = setTimeout(function () {
  1360. $this.style_my_tooltips("show", {
  1361. speed: options.speed,
  1362. tip_follows_cursor: options.tip_follows_cursor
  1363. });
  1364. }, options.delay);
  1365. },
  1366. show: function (options) {
  1367. var $this = $(this);
  1368. $this.stop().fadeTo(options.speed, 1);
  1369. if (!options.tip_follows_cursor) {
  1370. $(document).unbind("mousemove");
  1371. }
  1372. },
  1373. hide: function (options) {
  1374. var $this = $(this);
  1375. $this.stop().fadeTo(options.speed, 0, function () {
  1376. $this.css({
  1377. "z-index": "-1"
  1378. });
  1379. });
  1380. },
  1381. position: function (options) {
  1382. var $this = $(this),
  1383. winScrollX = $(window).scrollLeft(),
  1384. winScrollY = $(window).scrollTop(),
  1385. tipWidth = $this.outerWidth(true),
  1386. tipHeight = $this.outerHeight(true),
  1387. leftOffset = options.smtCursorCoordsX + tipWidth - winScrollX,
  1388. topOffset = options.smtCursorCoordsY + tipHeight - winScrollY;
  1389. if (
  1390. leftOffset <= $(window).width() &&
  1391. leftOffset <= $(document).width()
  1392. ) {
  1393. $this.css("left", options.smtCursorCoordsX);
  1394. } else {
  1395. var thePosX = options.smtCursorCoordsX - tipWidth;
  1396. if (thePosX >= winScrollX) {
  1397. $this.css("left", thePosX);
  1398. } else {
  1399. $this.css("left", winScrollX);
  1400. }
  1401. }
  1402. if (
  1403. topOffset <= $(window).height() &&
  1404. topOffset <= $(document).height()
  1405. ) {
  1406. $this.css("top", options.smtCursorCoordsY);
  1407. } else {
  1408. var thePosY = options.smtCursorCoordsY - tipHeight;
  1409. if (thePosY >= winScrollY) {
  1410. $this.css("top", thePosY);
  1411. } else {
  1412. $this.css("top", winScrollY);
  1413. }
  1414. }
  1415. }
  1416. };
  1417. $.fn.style_my_tooltips = function (method) {
  1418. if (methods[method]) {
  1419. return methods[method].apply(
  1420. this,
  1421. Array.prototype.slice.call(arguments, 1)
  1422. );
  1423. } else if (typeof method === "object" || !method) {
  1424. return methods.init.apply(this, arguments);
  1425. } else {
  1426. $.error("Method " + method + " does not exist");
  1427. }
  1428. };
  1429. })(jQuery);
  1430.  
  1431. (function ($) {
  1432. $(document).ready(function () {
  1433. $("[title]").style_my_tooltips();
  1434. });
  1435.  
  1436. //toggle controls
  1437. $('.controls_tumblr').click(function(){
  1438. $(".iframe-controls--desktop").toggle( "slow" )
  1439. });
  1440. })(jQuery);
  1441.  
  1442. //identify the toggle switch HTML element
  1443. const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
  1444.  
  1445. //function that changes the theme, and sets a localStorage variable to track the theme between page loads
  1446. function switchTheme(e) {
  1447. if (e.target.checked) {
  1448. localStorage.setItem('theme', 'dark');
  1449. document.documentElement.setAttribute('data-theme', 'dark');
  1450. toggleSwitch.checked = true;
  1451. } else {
  1452. localStorage.setItem('theme', 'light');
  1453. document.documentElement.setAttribute('data-theme', 'light');
  1454. toggleSwitch.checked = false;
  1455. }
  1456. }
  1457.  
  1458. //listener for changing themes
  1459. toggleSwitch.addEventListener('change', switchTheme, false);
  1460.  
  1461. //pre-check the dark-theme checkbox if dark-theme is set
  1462. if (document.documentElement.getAttribute("data-theme") == "dark"){
  1463. toggleSwitch.checked = true;
  1464. }
  1465.  
  1466. </script>
  1467.  
  1468. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script><link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  1469. <script>
  1470. var npfOptions = {
  1471. includeCommonPhotosets: true,
  1472. photosetMargins:""
  1473. }
  1474.  
  1475. npfPhotosets("postSelector", npfOptions);
  1476. </script>
  1477.  
  1478.  
  1479. {block:Ifinfinitescroll}<script>
  1480. $('.container').infiniteScroll({
  1481. // options
  1482. path: '.next',
  1483. append: '.post',
  1484. history: false,
  1485. });
  1486. </script>{/block:Ifinfinitescroll}
  1487.  
  1488. </body>
  1489.  
  1490. </body>
  1491. </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!