API tools faq
paste
seiche

theme ten: nightshade

seiche
Jul 17th, 2020 (edited)
9,562
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. NIGHTSHADE THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -Pxu photosets by Pixelunion / modified by bychloethemes
  18. -npf photosets by codematurgy
  19. -Tippy.js tooltips by atomiks
  20. -responsive videos by nouvae
  21. -remove redirects by magnusthemes
  22. -Outicons by Anton Saputro
  23. -copy link to post tutorial by glenthemes, with clipboard.js by Zeno Rocha
  24. (full list of credits @ seyche.tumblr.com/credits)
  25.  
  26. --->
  27.  
  28. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  29.  
  30. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  31.  
  32. <!----- PHOTOSETS ----->
  33.  
  34. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  35.  
  36. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  37.  
  38. <!----- VARIABLES ----->
  39.  
  40. <meta name="image:Header" content=""/>
  41. <meta name="image:Sidebar" content=""/>
  42.  
  43. <meta name="color:Background" content="#ffffff"/>
  44. <meta name="color:Header" content="#ffffff"/>
  45. <meta name="color:Banner Title" content="#ffffff"/>
  46. <meta name="color:Banner Subtitle" content="#ffffff"/>
  47. <meta name="color:Banner Subtitle Background" content="#212121"/>
  48. <meta name="color:Text" content="#5a5a5a"/>
  49. <meta name="color:Link" content="#8c8c8c"/>
  50. <meta name="color:Accent" content="#c12b4c"/>
  51. <meta name="color:Borders" content="#e0e0e0"/>
  52. <meta name="color:Title" content="#212121"/>
  53. <meta name="color:Blog Details Background" content="#212121"/>
  54. <meta name="color:Blog Details Text" content="#ffffff"/>
  55. <meta name="color:Footer Background" content="#212121"/>
  56. <meta name="color:Footer Title" content="#ffffff"/>
  57. <meta name="color:Footer Text" content="#eeeeee"/>
  58. <meta name="color:Footer Link" content="#c9c9c9"/>
  59. <meta name="color:Footer Borders" content="#7b7b7b"/>
  60.  
  61. <meta name="select:Body Font" content="Karla" title="Karla"/>
  62. <meta name="select:Body Font" content="Lato" title="Lato"/>
  63. <meta name="select:Body Font" content="Nunito" title="Nunito"/>
  64. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  65. <meta name="select:Body Font" content="PT Sans" title="PT Sans"/>
  66. <meta name="select:Body Font" content="Roboto" title="Roboto"/>
  67.  
  68. <meta name="select:Title Font" content="Lora" title="Lora"/>
  69. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  70. <meta name="select:Title Font" content="Libre Baskerville" title="Libre Baskerville"/>
  71. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  72. <meta name="select:Title Font" content="Lato" title="Lato"/>
  73. <meta name="select:Title Font" content="Open Sans" title="Open Sans"/>
  74.  
  75. <meta name="select:Font Size" content="15px" title="15px"/>
  76. <meta name="select:Font Size" content="12px" title="12px"/>
  77. <meta name="select:Font Size" content="13px" title="13px"/>
  78. <meta name="select:Font Size" content="14px" title="14px"/>
  79. <meta name="select:Font Size" content="16px" title="16px"/>
  80. <meta name="select:Font Size" content="17px" title="17px"/>
  81. <meta name="select:Font Size" content="18px" title="18px"/>
  82.  
  83. <meta name="select:Post Width" content="540px" title="540px"/>
  84. <meta name="select:Post Width" content="400px" title="400px"/>
  85. <meta name="select:Post Width" content="450px" title="450px"/>
  86. <meta name="select:Post Width" content="500px" title="500px"/>
  87.  
  88. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  89. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  90. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  91. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  92.  
  93. <meta name="if:Full Width Banner" content="1"/>
  94. <meta name="if:Show Blog Title" content="1"/>
  95. <meta name="if:Show Blog Details Bar" content="1"/>
  96. <meta name="if:Blog URL" content="1"/>
  97. <meta name="if:Blog Icon" content="1"/>
  98. <meta name="if:Search Bar" content="1"/>
  99.  
  100. <meta name="if:About Box" content="1"/>
  101. <meta name="if:Navigation Box" content="1"/>
  102. <meta name="if:Updates Box" content="1"/>
  103. <meta name="if:Projects Box" content="1"/>
  104. <meta name="if:Members Box" content="1"/>
  105. <meta name="if:Affiliates Box" content="1"/>
  106. <meta name="if:Statistics Box" content="1"/>
  107. <meta name="if:Blog Status Box" content="1"/>
  108.  
  109. <meta name="if:Reblog Info On Click" content="1"/>
  110. <meta name="if:Tags On Click" content="1"/>
  111. <meta name="if:Hide Caption" content="0"/>
  112. <meta name="if:Copy Link to Post" content="0"/>
  113.  
  114. <meta name="if:Footer Content" content="1"/>
  115. <meta name="if:Social Media Links" content="1"/>
  116.  
  117. <meta name="text:Blog Subtitle" content=""/>
  118. <meta name="text:Banner Height" content="450"/>
  119. <meta name="text:Post Margin" content="150"/>
  120.  
  121. <meta name="text:Home Link" content="home"/>
  122. <meta name="text:Ask Link" content="message"/>
  123. <meta name="text:Archive Link" content="archive"/>
  124. <meta name="text:Header Link 1 URL" content=""/>
  125. <meta name="text:Header Link 1" content=""/>
  126. <meta name="text:Header Link 2 URL" content=""/>
  127. <meta name="text:Header Link 2" content=""/>
  128. <meta name="text:Header Link 3 URL" content=""/>
  129. <meta name="text:Header Link 3" content=""/>
  130. <meta name="text:Header Link 4 URL" content=""/>
  131. <meta name="text:Header Link 4" content=""/>
  132.  
  133. <meta name="text:Side Link 1 URL" content=""/>
  134. <meta name="text:Side Link 1" content=""/>
  135. <meta name="text:Side Link 2 URL" content=""/>
  136. <meta name="text:Side Link 2" content=""/>
  137. <meta name="text:Side Link 3 URL" content=""/>
  138. <meta name="text:Side Link 3" content=""/>
  139. <meta name="text:Side Link 4 URL" content=""/>
  140. <meta name="text:Side Link 4" content=""/>
  141. <meta name="text:Side Link 5 URL" content=""/>
  142. <meta name="text:Side Link 5" content=""/>
  143. <meta name="text:Side Link 6 URL" content=""/>
  144. <meta name="text:Side Link 6" content=""/>
  145. <meta name="text:Side Link 7 URL" content=""/>
  146. <meta name="text:Side Link 7" content=""/>
  147. <meta name="text:Side Link 8 URL" content=""/>
  148. <meta name="text:Side Link 8" content=""/>
  149.  
  150. <meta name="text:Disclaimer Title" content="Disclaimer"/>
  151. <meta name="text:Disclaimer" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
  152.  
  153. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  154.  
  155. <script src="https://unpkg.com/feather-icons"></script>
  156.  
  157. <script src="https://kit.fontawesome.com/6ac5c36b23.js"></script>
  158.  
  159. <!----- LOAD IN ----->
  160.  
  161. <script>
  162. $(document).ready(function(){
  163. $(function() {
  164. $('body').removeClass('load-in');
  165. });
  166. });
  167. </script>
  168.  
  169. <style type="text/css">
  170.  
  171. body {
  172. font-family: '{select:body font}', sans-serif;
  173. font-size: {select:font size};
  174. color: {color:text};
  175. background-color: {color:background};
  176. text-align: left;
  177. line-height: 160%;
  178. word-wrap: break-word;
  179. letter-spacing: 0.3px;
  180. margin: 0;
  181. padding: 0;
  182. -webkit-transition: 2s opacity;
  183. -moz-transition: 2s opacity;
  184. -ms-transition: 2s opacity;
  185. -o-transition: 2s opacity;
  186. transition: 2s opacity;
  187. }
  188.  
  189. body.load-in {
  190. opacity: 0;
  191. -webkit-transition: none;
  192. -moz-transition: none;
  193. -ms-transition: none;
  194. -o-transition: none;
  195. transition: none;
  196. }
  197.  
  198. a {
  199. color: {color:link};
  200. text-decoration: none;
  201. -webkit-transition: all 0.3s;
  202. -moz-transition: all 0.3s;
  203. -ms-transition: all 0.3s;
  204. -o-transition: all 0.3s;
  205. transition: all 0.3s;
  206. }
  207.  
  208. a:hover {
  209. color: {color:accent};
  210. -webkit-transition: all 0.3s;
  211. -moz-transition: all 0.3s;
  212. -ms-transition: all 0.3s;
  213. -o-transition: all 0.3s;
  214. transition: all 0.3s;
  215. }
  216.  
  217. p a {box-shadow: inset 0 -2px 0 {color:accent};}
  218. p a:hover {box-shadow: inset 0 -1.25em 0 {color:accent}; color: {color:background};}
  219.  
  220. blockquote {
  221. padding: 0 0 0 1.25em;
  222. border-left: 1px solid {color:borders};
  223. margin: 1.25em 0 1.25em 1.25em;
  224. }
  225.  
  226. h1, h2, h3, h4, h5, .title {
  227. color: {color:title};
  228. letter-spacing: 2px;
  229. line-height: 160%;
  230. font-weight: bold;
  231. text-transform: uppercase;
  232. font-family: '{select:title font}', serif;
  233. }
  234.  
  235. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  236. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  237. h1, .title {font-size: 1.5em;}
  238. h2 {font-size: 1.3em;}
  239. h3 {font-size: 1.25em;}
  240. h4 {font-size: 1.1em;}
  241. h5 {font-size: 1em;}
  242.  
  243. small {font-size: 0.9em;}
  244. big {font-size: 1.1em;}
  245. b, bold, strong {color: {color:title};}
  246.  
  247. hr {
  248. height: 1px;
  249. border: none;
  250. background-color: {color:borders};
  251. }
  252.  
  253. ul {list-style-type: circle;}
  254. ol {list-style-type: decimal;}
  255. li {max-width: 100%;}
  256.  
  257. .tippy-tooltip.custom-theme {
  258. background-color: {color:title};
  259. color: {color:background};
  260. border-radius: 3px;
  261. text-align: center;
  262. font-family: inherit;
  263. font-weight: normal;
  264. text-transform: uppercase;
  265. letter-spacing: 1px;
  266. font-style: normal;
  267. padding: 0.25em;
  268. margin: 20px auto auto 10px;
  269. font-size: 0.8em;
  270. }
  271.  
  272. ::-webkit-scrollbar {
  273. width: 17px;
  274. height: 17px;
  275. background-color: {color:background};
  276. }
  277.  
  278. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  279.  
  280. ::-webkit-scrollbar-thumb {
  281. border: 6px solid {color:background};
  282. background-color: {color:title};
  283. min-height: 24px;
  284. min-width: 24px;
  285. }
  286.  
  287. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  288. z-index: 999999999!important;
  289. opacity: 0.6;
  290. transform: scale(0.8);
  291. transform-origin: 100% 0;
  292. -webkit-transform: scale(0.8);
  293. -webkit-transform-origin: 100% 0;
  294. -o-transform: scale(0.8);
  295. -o-transform-origin: 100% 0;
  296. -moz-transform: scale(0.8);
  297. -moz-transform-origin: 100% 0;
  298. -ms-transform: scale(0.8);
  299. -ms-transform-origin: 100% 0;
  300. -webkit-transition: all 0.4s;
  301. -moz-transition: all 0.4s;
  302. -ms-transition: all 0.4s;
  303. -o-transition: all 0.4s;
  304. transition: all 0.4s;
  305. }
  306.  
  307. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  308. opacity: 1.0;
  309. -webkit-transition: all 0.4s;
  310. -moz-transition: all 0.4s;
  311. -ms-transition: all 0.4s;
  312. -o-transition: all 0.4s;
  313. transition: all 0.4s;
  314. }
  315.  
  316. .tmblr-iframe--app-cta-button {display: none !important;}
  317.  
  318. /*----- HEADER NAVIGATION -----*/
  319.  
  320. #top-bar {
  321. position: fixed;
  322. width: 100%;
  323. top: 0;
  324. left: 0;
  325. right: 0;
  326. box-sizing: border-box;
  327. border-bottom: 1px solid {color:borders};
  328. padding: 1.25em;
  329. text-align: center;
  330. z-index: 100;
  331. background-color: {color:header};
  332. }
  333.  
  334. #top-bar nav {font-size: 1em;}
  335. #top-bar nav li {display: inline-block; list-style-type: none;}
  336.  
  337. #top-bar nav li::after {
  338. content: '';
  339. width: 6px;
  340. height: 6px;
  341. border-radius: 50%;
  342. background-color: {color:accent};
  343. display: inline-block;
  344. vertical-align: middle;
  345. margin: auto 1.5em 0.15em 1.5em;
  346. }
  347.  
  348. #top-bar nav li:last-of-type::after {display: none;}
  349. #top-bar li a {border-bottom: 4px solid transparent; padding-bottom: calc(1.25em - 1px);}
  350. #top-bar li a:hover {border-bottom: 4px solid {color:accent};}
  351.  
  352. /*----- BANNER -----*/
  353.  
  354. #banner-container {
  355. {block:ifFullWidthBanner}width: 100%;{/block:ifFullWidthBanner}
  356. {block:ifNotFullWidthBanner}width: calc({select:post width} + 275px + 275px + 150px);{/block:ifNotFullWidthBanner}
  357. position: relative;
  358. margin: auto;
  359. top: 4.05em;
  360. }
  361.  
  362. #banner {
  363. position: relative;
  364. width: 100%;
  365. {block:ifNotFullWidthBanner}
  366. margin: auto;
  367. {/block:ifNotFullWidthBanner}
  368. height: {text:banner height}px;
  369. color: {color:banner title};
  370. overflow: hidden;
  371. {block:ifHeaderImage}
  372. background-image: url('{image:Header}');
  373. background-position: center;
  374. background-size: cover;
  375. background-repeat: no-repeat;
  376. {/block:ifHeaderImage}
  377. }
  378.  
  379. #banner-flex {
  380. display: flex;
  381. align-items: center;
  382. justify-content: center;
  383. flex-direction: column;
  384. height: 100%;
  385. width: 75%;
  386. margin: auto;
  387. text-align: center;
  388. }
  389.  
  390. #banner-title {
  391. font-family: '{select:title font}', serif;
  392. font-weight: 700;
  393. font-size: 2.5em;
  394. letter-spacing: 4px;
  395. line-height: 160%;
  396. text-transform: uppercase;
  397. flex: initial;
  398. }
  399.  
  400. #banner-subtitle {
  401. background-color: {color:banner subtitle background};
  402. color: {color:banner subtitle};
  403. padding: 0.25em 0.75em;
  404. border-radius: 3px;
  405. box-sizing: border-box;
  406. margin-top: 0.75em;
  407. flex: initial;
  408. }
  409.  
  410. /*----- BLOG DETAILS HEADER BAR -----*/
  411.  
  412. #secondary-bar {
  413. position: relative;
  414. {block:ifHeaderImage}
  415. {block:ifNotFullWidthBanner}margin: auto;{/block:ifNotFullWidthBanner}
  416. {block:ifFullWidthBanner}margin: -1.5em auto auto auto;{/block:ifFullWidthBanner}
  417. {/block:ifHeaderImage}
  418. {block:ifNotHeaderImage}
  419. margin: auto;
  420. {/block:ifNotHeaderImage}
  421. z-index: 2;
  422. background-color: {color:blog details background};
  423. width: calc({select:post width} + 275px + 275px + 150px);
  424. border-radius: 3px;
  425. padding: 1em 1.5em;
  426. box-sizing: border-box;
  427. }
  428.  
  429. #secondary-bar .icon {
  430. width: 2.5em;
  431. height: 2.5em;
  432. border: 1px solid {color:footer borders};
  433. }
  434.  
  435. #secondary-bar .subtitle {display: inline-block; margin-left: 1em; font-size: 1.15em;}
  436. #secondary-bar .subtitle a {color: {color:blog details text};}
  437. #secondary-bar .subtitle a:hover {color: {color:accent};}
  438.  
  439. #blog-details, #search {flex: initial;}
  440.  
  441. .find svg {
  442. width: 1.25em;
  443. height: 1.25em;
  444. fill: {color:blog details text};
  445. display: inline-block;
  446. vertical-align: middle;
  447. margin-right: 1em;
  448. }
  449.  
  450. .find input {
  451. border: 0;
  452. outline: none;
  453. display: inline-block;
  454. background: inherit;
  455. margin: 0;
  456. padding: 0;
  457. color: {color:blog details text};
  458. text-align: left;
  459. font-family: inherit;
  460. width: 225px;
  461. }
  462.  
  463. .find input[type=text] {color: {color:blog details text};}
  464. input::-webkit-input-placeholder {color: {color:blog details text};}
  465. input::-moz-placeholder {color: {color:blog details text};}
  466. input:-moz-placeholder {color: {color:blog details text};}
  467. input:-ms-input-placeholder {color: {color:blog details text};}
  468.  
  469. /*----- MAIN CONTAINERS -----*/
  470.  
  471. #container {
  472. width: calc({select:post width} + 275px + 275px + 150px);
  473. {block:ifShowBlogDetailsBar}margin: 125px auto auto auto;{/block:ifShowBlogDetailsBar}
  474. {block:ifNotShowBlogDetailsBar}margin: 125px auto auto auto;{/block:ifNotShowBlogDetailsBar}
  475. display: flex;
  476. flex-direction: row;
  477. justify-content: space-between;
  478. align-items: flex-start;
  479. }
  480.  
  481. aside {
  482. position: relative;
  483. width: 275px;
  484. height: auto;
  485. flex: initial;
  486. display: block;
  487. }
  488.  
  489. /*----- SIDE BOXES -----*/
  490.  
  491. .side-box {
  492. box-sizing: border-box;
  493. background-color: {color:background};
  494. margin-bottom: 75px;
  495. border: 1px solid {color:borders};
  496. padding: 1.5em;
  497. text-align: center;
  498. }
  499.  
  500. .side-box .title {
  501. font-size: 1em;
  502. color: {color:title};
  503. text-align: center;
  504. margin-top: -2.25em;
  505. }
  506.  
  507. .side-box .title span, .askpost .title span {
  508. background-color: {color:background};
  509. padding: 0.25em 1.25em;
  510. }
  511.  
  512. .side-box .title::after {
  513. content: '';
  514. width: 25px;
  515. margin: 0.5em auto auto auto;
  516. display: block;
  517. border-bottom: 5px dotted {color:accent};
  518. }
  519.  
  520. .side-box img {max-width: 100%;}
  521.  
  522. .side-content {box-sizing: border-box; margin-top: 1em;}
  523.  
  524. #side-img {max-width: 100%; margin-bottom: 2em;}
  525.  
  526. /*----- NAVIGATION BOX -----*/
  527.  
  528. #nav-box .side-content {
  529. display: flex;
  530. flex-wrap: wrap;
  531. flex-direction: row;
  532. align-items: flex-start;
  533. justify-content: space-between;
  534. }
  535.  
  536. #nav-box li {
  537. list-style-type: none;
  538. width: 48%;
  539. margin-bottom: 0.5em;
  540. }
  541.  
  542. #nav-box li a {padding: 0.15em 0.25em;}
  543. #nav-box li a, #nav-box li a:hover {border-bottom: none;}
  544.  
  545. #nav-box li a .numbers {
  546. color: {color:title};
  547. font-family: '{select:title font}', serif;
  548. font-weight: bold;
  549. margin-right: 0.5em;
  550. -webkit-transition: all 0.3s;
  551. -moz-transition: all 0.3s;
  552. -ms-transition: all 0.3s;
  553. -o-transition: all 0.3s;
  554. transition: all 0.3s;
  555. }
  556.  
  557. #nav-box li a:hover {color: {color:background}; box-shadow: inset 0 -1.5em 0 {color:accent};}
  558.  
  559. #nav-box li a:hover .numbers {
  560. color: {color:background};
  561. -webkit-transition: all 0.3s;
  562. -moz-transition: all 0.3s;
  563. -ms-transition: all 0.3s;
  564. -o-transition: all 0.3s;
  565. transition: all 0.3s;
  566. }
  567.  
  568. /*----- UPDATES -----*/
  569.  
  570. #updates-box .side-content li {
  571. list-style-type: none;
  572. margin-top: 1em;
  573. display: flex;
  574. flex-direction: row;
  575. align-items: center;
  576. justify-content: space-between;
  577. }
  578.  
  579. #updates-box .side-content .subtitle {
  580. float: left;
  581. display: inline-block;
  582. font-size: 0.9em;
  583. font-weight: normal;
  584. }
  585.  
  586. #updates-box .side-content .subtitle span {
  587. font-size: 1.5em;
  588. display: block;
  589. font-family: '{select:title font}', serif;
  590. font-weight: bold;
  591. }
  592.  
  593. #updates-box .upd-text {
  594. text-align: left;
  595. padding-left: 1em;
  596. width: 75%;
  597. }
  598.  
  599. /*----- PROJECTS BOX -----*/
  600.  
  601. #project-box .project {
  602. text-align: left;
  603. background-color: {color:title};
  604. border-radius: 3px;
  605. overflow: hidden;
  606. color: {color:background};
  607. margin-top: 1em;
  608. }
  609.  
  610. #project-box .project img {width: 100%;}
  611. #project-box .project-text {padding: 1.5em;}
  612. #project-box .project-text li {list-style-type: none; color: rgba({RGBcolor:background}, 0.9);}
  613. #project-box .subtitle {color: {color:background}; font-size: 1.15em;}
  614. #project-box .project .upper {color: {color:background}; margin-right: 0.5em;}
  615.  
  616. #project-box .project a {
  617. background-color: {color:accent};
  618. color: {color:background};
  619. text-transform: uppercase;
  620. letter-spacing: 1px;
  621. font-size: 0.9em;
  622. padding: 0.25em 0.75em;
  623. border-radius: 3px;
  624. margin-top: 0.5em;
  625. text-align: center;
  626. box-sizing: border-box;
  627. display: block;
  628. }
  629.  
  630. #project-box .project a:hover {background-color: {color:background}; color: {color:title};}
  631.  
  632. /*----- MEMBERS BOX -----*/
  633.  
  634. #members-box li.blog-member {
  635. text-align: left;
  636. display: flex;
  637. flex-direction: row;
  638. align-items: center;
  639. list-style-type: none;
  640. margin-top: 0.75em;
  641. }
  642.  
  643. #members-box li.blog-member:first-of-type {margin-top: 0;}
  644.  
  645. #members-box .blog-member .icon {
  646. width: 3em;
  647. height: 3em;
  648. margin-right: 1em;
  649. }
  650.  
  651. #members-box .blog-member a {color: {color:title}; font-weight: bold;}
  652. #members-box .blog-member a:hover {color: {color:accent};}
  653. #members-box li.blog-member a, #members-box li.blog-member a:hover {border-bottom: none;}
  654.  
  655. /*----- AFFILIATES BOX -----*/
  656.  
  657. #affiliates-box .side-content {
  658. display: flex;
  659. justify-content: space-evenly;
  660. flex-wrap: wrap;
  661. align-items: center;
  662. }
  663.  
  664. #affiliates-box a {
  665. border: 1px solid {color:borders};
  666. padding: 3px;
  667. box-sizing: border-box;
  668. border-radius: 50%;
  669. display: inline-block;
  670. line-height: 10px;
  671. margin: 4px auto;
  672. overflow: hidden;
  673. }
  674.  
  675. #affiliates-box a:hover {border: 1px solid {color:accent};}
  676.  
  677. #affiliates-box a svg {
  678. box-sizing: border-box;
  679. width: 42px;
  680. height: 42px;
  681. fill: {color:background};
  682. padding: 10px;
  683. background-color: {color:accent};
  684. border-radius: 50%;
  685. }
  686.  
  687. #affiliates-box img {
  688. width: 42px;
  689. height: 42px;
  690. border-radius: 50%;
  691. -webkit-transition: all 0.3s;
  692. -moz-transition: all 0.3s;
  693. -ms-transition: all 0.3s;
  694. -o-transition: all 0.3s;
  695. transition: all 0.3s;
  696. }
  697.  
  698. #affiliates-box img:hover {
  699. -webkit-filter: grayscale(100%);
  700. -moz-filter: grayscale(100%);
  701. -ms-filter: grayscale(100%);
  702. -o-filter: grayscale(100%);
  703. filter: grayscale(100%);
  704. opacity: 0.6;
  705. -webkit-transition: all 0.3s;
  706. -moz-transition: all 0.3s;
  707. -ms-transition: all 0.3s;
  708. -o-transition: all 0.3s;
  709. transition: all 0.3s;
  710. }
  711.  
  712. /*----- STATSTICS BOX -----*/
  713.  
  714. #stats-box li {list-style-type: none; text-align: left;}
  715.  
  716. #stats-box .upper {color: {color:title}; margin-right: 0.5em;}
  717.  
  718. /*----- STATUS BOX -----*/
  719.  
  720. #status-box .status-item {
  721. display: flex;
  722. flex-direction: row;
  723. justify-content: space-between;
  724. align-items: center;
  725. list-style-type: none;
  726. margin-top: 0.25em;
  727. }
  728.  
  729. .status-item:first-of-type {margin-top: 1em;}
  730.  
  731. .toggle-on, .toggle-off {
  732. width: 2em;
  733. height: 1em;
  734. border-radius: 1em;
  735. }
  736.  
  737. .toggle-on {background-color: {color:accent};}
  738. .toggle-off {background-color: {color:title};}
  739.  
  740. .toggle-on::before, .toggle-off::before {
  741. content: '';
  742. display: inline-block;
  743. border: 1px solid {color:borders};
  744. width: 1.15em;
  745. height: 1.15em;
  746. border-radius: 50%;
  747. background-color: {color:background};
  748. box-sizing: border-box;
  749. }
  750.  
  751. .toggle-on::before {margin: -0.25em auto 0.05em 1.1em;}
  752. .toggle-off::before {margin: -0.25em auto 0.05em -1.1em;}
  753.  
  754. /*----- POSTS -----*/
  755.  
  756. #posts-wrap {
  757. flex: initial;
  758. height: auto;
  759. width: {select:post width};
  760. display: block;
  761. }
  762.  
  763. article {
  764. width: {select:post width};
  765. position: relative;
  766. margin: {text:post margin}px auto;
  767. }
  768.  
  769. article:first-of-type {margin-top: 0;}
  770.  
  771. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important;
  772. }
  773. .posts li, .posts blockquote, .posts img, figure, video, iframe, .video, .video iframe {max-width: 100%;}
  774. .video iframe {width: 100%;}
  775. .postsource {display: none;}
  776.  
  777. /*----- COMMON STYLES -----*/
  778.  
  779. .subtitle {
  780. color: {color:title};
  781. text-transform: uppercase;
  782. letter-spacing: 1px;
  783. font-weight: bold;
  784. font-size: 0.9em;
  785. }
  786.  
  787. .subtitle a {color: {color:title};}
  788. .subtitle a:hover {color: {color:accent};}
  789.  
  790. .upper {
  791. font-size: 0.9em;
  792. text-transform: uppercase;
  793. letter-spacing: 1px;
  794. }
  795.  
  796. .icon {
  797. display: inline-block;
  798. border-radius: 50%;
  799. vertical-align: middle;
  800. border: 1px solid {color:borders};
  801. padding: 3px;
  802. box-sizing: border-box;
  803. -webkit-transition: all 0.3s;
  804. -moz-transition: all 0.3s;
  805. -ms-transition: all 0.3s;
  806. -o-transition: all 0.3s;
  807. transition: all 0.3s;
  808. }
  809.  
  810. #secondary-bar:hover .icon, .blog-member:hover .icon, .bottom-info-left:hover .icon, .info-fade .icon:hover {
  811. border: 1px solid {color:accent};
  812. }
  813.  
  814. .align-flex {
  815. display: flex;
  816. justify-content: space-between;
  817. align-items: center;
  818. flex-direction: row;
  819. }
  820.  
  821. svg {display: inline-block; vertical-align: middle;}
  822.  
  823. .blackbox {
  824. background-color: {color:blog details background};
  825. color: {color:blog details text};
  826. box-sizing: border-box;
  827. padding: 1.5em;
  828. border-radius: 3px;
  829. width: {select:post width};
  830. position: relative;
  831. margin: 0 auto 20px auto;
  832. }
  833.  
  834. .blackbox .title {
  835. color: {color:accent};
  836. font-size: 1.15em;
  837. text-transform: lowercase;
  838. letter-spacing: 0.2px;
  839. font-style: italic;
  840. }
  841.  
  842. /*----- CAPTION -----*/
  843.  
  844. .caption {
  845. margin: 0;
  846. list-style-type: none;
  847. padding: 2em 0;
  848. border-bottom: 1px solid {color:borders};
  849. }
  850.  
  851. .caption:last-of-type {margin-bottom: 1.5em;}
  852.  
  853. .caption p {margin: 1em 0;}
  854. .caption p:last-of-type {margin-bottom: 0;}
  855. .ogcap p:first-of-type {margin-top: 0;}
  856.  
  857. .body:first-of-type {margin-top: 0; padding-top: 0;}
  858. .body:last-of-type {border-bottom: none; padding-bottom: 0;}
  859. .caption iframe, .caption img {max-width: 100%;}
  860.  
  861. .capicon {width: 2em; height: 2em;}
  862.  
  863. .username {display: inline-block; margin-left: 1em;}
  864. .username a, .username a:hover {border-bottom: none;}
  865.  
  866. .caption:hover .icon {
  867. border: 1px solid {color:accent};
  868. -webkit-transition: all 0.3s;
  869. -moz-transition: all 0.3s;
  870. -ms-transition: all 0.3s;
  871. -o-transition: all 0.3s;
  872. transition: all 0.3s;
  873. }
  874.  
  875. .deactive::after {
  876. content: '(deactivated)';
  877. margin-left: 1em;
  878. opacity: 0.8;
  879. color: {color:text};
  880. }
  881.  
  882. p.tmblr-attribution {margin-top: 1em !important;}
  883.  
  884. {block:ifHideCaption}{block:IndexPage}
  885. .hide-cap {display: none;}
  886. {/block:IndexPage}{/block:ifHideCaption}
  887.  
  888. /*----- TEXT -----*/
  889.  
  890. pre {
  891. line-height: inherit;
  892. font-size: inherit;
  893. white-space: pre-wrap;
  894. white-space: -moz-pre-wrap;
  895. white-space: -pre-wrap;
  896. white-space: -o-pre-wrap;
  897. word-wrap: break-word;
  898. }
  899.  
  900. @font-face {
  901. font-family: Calluna;
  902. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  903. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  904. font-weight: 700;
  905. font-style: italic
  906. }
  907.  
  908. @font-face {
  909. font-family: Fairwater;
  910. src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  911. font-weight: 400;
  912. font-style: normal
  913. }
  914.  
  915. p.npf_quirky {font-family: Fairwater; font-size: 1.75em;}
  916.  
  917. .npf_color_joey {color: #e57373;}
  918. .npf_color_monica {color: #ff8a65;}
  919. .npf_color_phoebe {color: #ffee58;}
  920. .npf_color_ross {color: #81c784;}
  921. .npf_color_rachel {color: #4fc3f7;}
  922. .npf_color_chandler {color: #9575cd;}
  923. .npf_color_niles {color: #f06292;}
  924.  
  925. a.read_more {
  926. text-transform: uppercase;
  927. letter-spacing: 1px;
  928. background-color: {color:title};
  929. color: {color:background};
  930. padding: 0.5em 0.75em;
  931. border-radius: 3px;
  932. box-sizing: border-box;
  933. font-size: 0.9em;
  934. }
  935.  
  936. a.read_more:hover {background-color: {color:accent};}
  937. a.read_more, a.read_more:hover {box-shadow: none;}
  938.  
  939. p.read_more_container {margin: 2em 0; text-align: center;}
  940.  
  941. /*----- LINK -----*/
  942.  
  943. .linkp {
  944. color: {color:text};
  945. border: 1px solid {color:borders};
  946. -webkit-transition: all 0.5s;
  947. -moz-transition: all 0.5s;
  948. -ms-transition: all 0.5s;
  949. -o-transition: all 0.5s;
  950. transition: all 0.5s;
  951. }
  952.  
  953. .linkp:hover {
  954. border: 1px solid {color:blog details background};
  955. color: {color:blog details text};
  956. background-color: {color:blog details background};
  957. -webkit-transition: all 0.5s;
  958. -moz-transition: all 0.5s;
  959. -ms-transition: all 0.5s;
  960. -o-transition: all 0.5s;
  961. transition: all 0.5s;
  962. }
  963.  
  964. .linkp .title {
  965. -webkit-transition: all 0.5s;
  966. -moz-transition: all 0.5s;
  967. -ms-transition: all 0.5s;
  968. -o-transition: all 0.5s;
  969. transition: all 0.5s;
  970. }
  971.  
  972. .linkp:hover .title {
  973. color: {color:blog details text};
  974. -webkit-transition: all 0.5s;
  975. -moz-transition: all 0.5s;
  976. -ms-transition: all 0.5s;
  977. -o-transition: all 0.5s;
  978. transition: all 0.5s;
  979. }
  980.  
  981. .thumbnail {max-width: 100%; border-bottom: 1px solid {color:borders};}
  982. .link {padding: 30px;}
  983. .link-host, .link-txt {margin-top: 1.5em;}
  984.  
  985. .npf-link-block {
  986. margin-top: 1.25em;
  987. border-radius: 3px;
  988. border: 1px solid {color:borders};
  989. -webkit-transition: all 0.5s;
  990. -moz-transition: all 0.5s;
  991. -ms-transition: all 0.5s;
  992. -o-transition: all 0.5s;
  993. transition: all 0.5s;
  994. }
  995.  
  996. .npf-link-block:hover {
  997. border: 1px solid {color:accent};
  998. -webkit-transition: all 0.5s;
  999. -moz-transition: all 0.5s;
  1000. -ms-transition: all 0.5s;
  1001. -o-transition: all 0.5s;
  1002. transition: all 0.5s;
  1003. }
  1004.  
  1005. .npf-link-block .poster .title {background-color: initial; padding: 30px;}
  1006. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  1007. .npf-link-block .bottom {padding: 30px !important; color: {color:text};}
  1008.  
  1009. .npf-link-block .bottom .site-name {
  1010. font-size: 0.9em;
  1011. color: {color:text};
  1012. font-weight: normal;
  1013. letter-spacing: 1px;
  1014. }
  1015.  
  1016. /*----- PHOTO -----*/
  1017.  
  1018. img {
  1019. margin: 0;
  1020. display: block;
  1021. height: auto;
  1022. }
  1023.  
  1024. .photo img {width: 100%;}
  1025. .vignette, #vignette {opacity: 0;}
  1026. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  1027.  
  1028. .lightbox-image, #tumblr_lightbox img {
  1029. box-shadow: none !important;
  1030. border-radius: 0 !important;
  1031. max-width: none;
  1032. }
  1033.  
  1034. /*----- PHOTOSET -----*/
  1035.  
  1036. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  1037. margin-left: 0 !important;
  1038. margin-right: 0 !important;
  1039. }
  1040.  
  1041. .captext figure {margin: 1em 0;}
  1042. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  1043. .tmblr-full:hover {cursor: pointer;}
  1044. .npf_image, .tmblr-full {border: none; outline: none;}
  1045.  
  1046. .text-post .photo-slideshow.processed {padding-bottom: 2em;}
  1047.  
  1048. /*----- QUOTE -----*/
  1049.  
  1050. .quote, p.npf_quote {
  1051. color: {color:title};
  1052. font-family: '{select:title font}', serif;
  1053. font-style: italic;
  1054. font-size: 1.25em;
  1055. line-height: 160%;
  1056. }
  1057.  
  1058. .quote p:first-of-type {margin-top: 0;}
  1059. .quote p:last-of-type {margin-bottom: 0;}
  1060.  
  1061. .quote-mark {
  1062. font-size: 3em;
  1063. color: {color:title};
  1064. margin-top: 0.5em;
  1065. }
  1066.  
  1067. .quote-mark::after {
  1068. content: '';
  1069. width: 100px;
  1070. height: 0.1em;
  1071. background-color: {color:accent};
  1072. display: inline-block;
  1073. vertical-align: top;
  1074. margin-left: 0.25em;
  1075. }
  1076.  
  1077. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  1078.  
  1079. .source {margin-top: 0.5em;}
  1080.  
  1081. /*----- CHAT -----*/
  1082.  
  1083. .chat {padding: 0; margin: 0;}
  1084. .chat li {list-style-type: none;}
  1085. .line {padding: 1.5em 0; border-bottom: 1px solid {color:borders};}
  1086. .line:first-of-type {padding: 0 0 1.5em 0;}
  1087. .line:last-of-type {padding: 1.5em 0 0.5em 0; border-bottom: none;}
  1088.  
  1089. .line:nth-of-type(even) .subtitle {color: {color:accent};}
  1090.  
  1091. p.npf_chat {font-family: inherit; margin-top: 1em;}
  1092.  
  1093. p.npf_chat b {
  1094. color: {color:title};
  1095. text-transform: uppercase;
  1096. letter-spacing: 1px;
  1097. font-family: '{select:title font}', serif;
  1098. font-size: 0.9em;
  1099. }
  1100.  
  1101. /*----- ANSWER -----*/
  1102.  
  1103. .askpost {
  1104. border: 1px solid {color:borders};
  1105. padding: 2em;
  1106. box-sizing: border-box;
  1107. text-align: center;
  1108. }
  1109.  
  1110. .askpost .title {margin-bottom: -2.5em; font-size: 1em;}
  1111. .askpost .icon {width: 1.5em; height: 1.5em; margin-right: 0.5em;}
  1112.  
  1113. .question {padding-bottom: 1.5em;}
  1114. .question p:first-of-type {margin-top: 0;}
  1115. .question p:last-of-type {margin-bottom: 0;}
  1116.  
  1117. /*----- AUDIO -----*/
  1118.  
  1119. .audiopost {padding: 1.5em; border: 1px solid {color:borders};}
  1120.  
  1121. .albumart {
  1122. z-index: 1;
  1123. float: left;
  1124. width: 100px;
  1125. height: 100px;
  1126. }
  1127.  
  1128. .button {
  1129. width: 30px;
  1130. height: 30px;
  1131. overflow: hidden;
  1132. position: relative;
  1133. z-index: 10;
  1134. margin: 8px 7px 6px 7px;
  1135. }
  1136.  
  1137. .audiobox {
  1138. background-color: #f2f2f2;
  1139. z-index: 50;
  1140. position: absolute;
  1141. margin: 28px 0 0 28px;
  1142. border-radius: 50%;
  1143. opacity: 0.5;
  1144. -webkit-transition: all 0.7s;
  1145. -moz-transition: all 0.7s;
  1146. -ms-transition: all 0.7s;
  1147. -o-transition: all 0.7s;
  1148. transition: all 0.7s;
  1149. }
  1150.  
  1151. .audioinfo {
  1152. position: relative;
  1153. height: 100px;
  1154. width: calc(100% - 102px);
  1155. display: flex;
  1156. justify-content: center;
  1157. flex-direction: column;
  1158. box-sizing: border-box;
  1159. padding-left: 2em;
  1160. }
  1161.  
  1162. .audioinfo li {list-style-type: none;}
  1163. .track {font-size: 1.15em;}
  1164.  
  1165. .audiopost:hover .audiobox {
  1166. opacity: 0.9;
  1167. -webkit-transition: all 0.7s;
  1168. -moz-transition: all 0.7s;
  1169. -ms-transition: all 0.7s;
  1170. -o-transition: all 0.7s;
  1171. transition: all 0.7s;
  1172. }
  1173.  
  1174. /*----- INFO -----*/
  1175.  
  1176. .info svg {width: 1.25em; height: 1.25em;}
  1177. .info a svg {fill: {color:link};}
  1178. .info a:hover svg {fill: {color:accent};}
  1179.  
  1180. .pin-post {text-align: center; margin-bottom: 1.5em; font-size: 1.15em;}
  1181.  
  1182. .pin-post svg {
  1183. fill: {color:accent};
  1184. width: 1.5em;
  1185. height: 1.5em;
  1186. margin-right: 0.5em;
  1187. }
  1188.  
  1189. /*----- MIDDLE INFO -----*/
  1190.  
  1191. .mid-info {
  1192. margin-top: 1.5em;
  1193. border-bottom: 1px solid {color:borders};
  1194. padding-bottom: 1em;
  1195. }
  1196.  
  1197. .date {font-weight: bold; color: {color:title};}
  1198.  
  1199. .notecount::before {
  1200. content: '';
  1201. display: inline-block;
  1202. width: 6px;
  1203. height: 6px;
  1204. border-radius: 6px;
  1205. background-color: {color:accent};
  1206. margin: auto 0.75em 0.15em 0.75em;
  1207. }
  1208.  
  1209. .info-controls {display: inline-block; line-height: 1em;}
  1210. .info-controls a {vertical-align: middle; margin-left: 0.5em;}
  1211.  
  1212. .info-controls a svg, .info-button svg {
  1213. -webkit-transition: all 0.3s;
  1214. -moz-transition: all 0.3s;
  1215. -ms-transition: all 0.3s;
  1216. -o-transition: all 0.3s;
  1217. transition: all 0.3s;
  1218. }
  1219.  
  1220. .info-controls a:hover svg, .info-button svg:hover {
  1221. fill: {color:accent};
  1222. -webkit-transition: all 0.3s;
  1223. -moz-transition: all 0.3s;
  1224. -ms-transition: all 0.3s;
  1225. -o-transition: all 0.3s;
  1226. transition: all 0.3s;
  1227. }
  1228.  
  1229. .info-button, .tag-button, .copy-button {cursor: help;}
  1230.  
  1231. {block:ifCopyLinktoPost}
  1232. .copy-button {display: inline-block;}
  1233.  
  1234. .copy-message {
  1235. position: absolute;
  1236. background-color: {color:title};
  1237. color: {color:background};
  1238. border-radius: 3px;
  1239. padding: 0.25em 0.75em;
  1240. margin-left: calc({select:post width} - 7.5em - 130px);
  1241. display: none;
  1242. }
  1243. {/block:ifCopyLinktoPost}
  1244.  
  1245. .like-wrap {
  1246. position: relative;
  1247. display: inline-block;
  1248. vertical-align: middle;
  1249. width: 1.25em;
  1250. height: 1.25em;
  1251. cursor: pointer;
  1252. }
  1253.  
  1254. .like_button {
  1255. position: absolute;
  1256. top: 0;
  1257. left: 0;
  1258. right: 0;
  1259. bottom: 0;
  1260. width: 100%;
  1261. height: 100%;
  1262. opacity: 0;
  1263. z-index: 2;
  1264. }
  1265.  
  1266. .new-button {
  1267. position: absolute;
  1268. top: 0;
  1269. left: 0;
  1270. right: 0;
  1271. bottom: 0;
  1272. width: 100%;
  1273. height: 100%;
  1274. z-index: 1;
  1275. cursor: pointer;
  1276. }
  1277.  
  1278. .like_button iframe {width: 100% !important; height: 100% !important;}
  1279. .like_button.liked + .new-button svg {fill: #d32f2f;}
  1280.  
  1281. /*----- BOTTOM INFO -----*/
  1282.  
  1283. .bottom-info {margin-top: 1em;}
  1284.  
  1285. .bottom-info-left {
  1286. width: calc(100% - 7em);
  1287. white-space: nowrap;
  1288. overflow: hidden;
  1289. min-width: 0;
  1290. }
  1291.  
  1292. .bottom-info-left .upper {display: inline-block; margin-left: 1em; min-width: 0;}
  1293.  
  1294. .bottom-info-left .upper a {font-weight: bold; color: {color:title};}
  1295. .bottom-info-left .upper a:hover {color: {color:accent};}
  1296. .bottom-info-left .icon {width: 2em; height: 2em;}
  1297.  
  1298. .info-fade {display: inline-block;}
  1299. .info-fade .icon:hover {opacity: 0.7;}
  1300.  
  1301. .bottom-info-right .icon {width: 1.25em; height: 1.25em; padding: 1px;}
  1302. .bottom-info-right a {margin-left: 0.5em;}
  1303.  
  1304. /*---- TAGS -----*/
  1305.  
  1306. .tags {margin-top: 0.5em;}
  1307. .tags a {margin-right: 0.75em;}
  1308.  
  1309. .tags svg {
  1310. width: 1.25em;
  1311. height: 1.25em;
  1312. fill: {color:accent};
  1313. margin-right: 0.25em;
  1314. }
  1315.  
  1316. .button-clicked svg {fill: {color:accent} !important;}
  1317.  
  1318. /*---- POST NOTES -----*/
  1319.  
  1320. .notes .subtitle {
  1321. font-size: 1.25em;
  1322. border-bottom: 1px solid {color:borders};
  1323. padding-bottom: 1em;
  1324. }
  1325.  
  1326. .notes {margin: 100px 0;}
  1327.  
  1328. ol.notes {
  1329. list-style-type: none;
  1330. max-width: 100%;
  1331. padding: 0;
  1332. margin: 2em 0 0 0;
  1333. }
  1334.  
  1335. ol.notes li.note {padding: 0.5em 0; display: block;}
  1336. ol.notes li.note a {border-bottom: none;}
  1337.  
  1338. ol.notes li.note img.avatar {
  1339. border-radius: 50%;
  1340. margin-right: 1em;
  1341. vertical-align: middle;
  1342. display: inline-block;
  1343. width: 1.5em;
  1344. height: 1.5em;
  1345. box-sizing: border-box;
  1346. border: 1px solid {color:borders};
  1347. padding: 2px;
  1348. }
  1349.  
  1350. a.more_notes_link {
  1351. font-weight: bold;
  1352. text-transform: uppercase;
  1353. letter-spacing: 1px;
  1354. color: {color:title};
  1355. }
  1356.  
  1357. a.more_notes_link:hover {color: {color:accent};}
  1358.  
  1359. /*---- PAGINATION -----*/
  1360.  
  1361. #pg {text-align: center;}
  1362.  
  1363. #pg .align-flex {border-bottom: 1px solid {color:borders}; padding-bottom: 1em;}
  1364. #pg .title {font-size: 1em;}
  1365.  
  1366. #pg-numbers {margin-top: 2em;}
  1367.  
  1368. #pg-numbers a {
  1369. margin: 0 0.5em;
  1370. color: {color:title};
  1371. padding: 0.5em 0.75em;
  1372. border-radius: 3px;
  1373. background-color: {color:title};
  1374. color: {color:background};
  1375. box-sizing: border-box;
  1376. }
  1377.  
  1378. #pg-numbers a svg {fill: {color:background}; width: 1em; height: 1em;}
  1379.  
  1380. .currentpg {margin: 0 0.5em;}
  1381.  
  1382. #pg-numbers a:hover, .currentpg {
  1383. background-color: {color:accent};
  1384. color: {color:background};
  1385. padding: 0.5em 0.75em;
  1386. border-radius: 3px;
  1387. box-sizing: border-box;
  1388. }
  1389.  
  1390. /*---- FOOTER -----*/
  1391.  
  1392. footer {
  1393. width: 100%;
  1394. position: relative;
  1395. left: 0;
  1396. bottom: 0;
  1397. right: 0;
  1398. background-color: {color:footer background};
  1399. color: {color:footer text};
  1400. box-sizing: border-box;
  1401. padding: 3em 4em;
  1402. }
  1403.  
  1404. footer a {color: {color:footer link};}
  1405. footer .title {color: {color:footer title}; font-size: 1.15em;}
  1406.  
  1407. #footer-content {
  1408. width: calc({select:post width} + 275px + 275px + 150px);
  1409. margin: auto;
  1410. }
  1411.  
  1412. #footer-flex {
  1413. display: flex;
  1414. flex-direction: row;
  1415. align-items: flex-start;
  1416. border-bottom: 1px solid {color:footer borders};
  1417. padding-bottom: 1.5em;
  1418. }
  1419.  
  1420. #footer-left, #footer-right {flex: initial; box-sizing: border-box;}
  1421.  
  1422. #footer-left {
  1423. {block:ifSocialMediaLinks}width: 60%;{/block:ifSocialMediaLinks}
  1424. {block:ifNotSocialMediaLinks}width: 100%;{/block:ifNotSocialMediaLinks}
  1425. }
  1426.  
  1427. #footer-right {width: 40%; padding-left: 3em;}
  1428.  
  1429. .footer-text {margin-top: 0.5em;}
  1430. .footer-text a .fab {font-size: 1.5em; margin-right: 0.75em;}
  1431.  
  1432. #footer-bottom {
  1433. text-align: center;
  1434. {block:ifFooterContent}margin-top: 1.5em;{/block:ifFooterContent}
  1435. }
  1436.  
  1437. #footer-bottom li {list-style-type: none; display: inline-block;}
  1438.  
  1439. #footer-bottom li::after {
  1440. content: '';
  1441. display: inline-block;
  1442. width: 4px;
  1443. height: 4px;
  1444. border-radius: 50%;
  1445. margin: auto 0.75em 0.15em 0.75em;
  1446. background-color: {color:accent};
  1447. }
  1448.  
  1449. #footer-bottom li:last-of-type::after {display: none;}
  1450.  
  1451. #btop a {cursor: help;}
  1452.  
  1453. /*---- RESPONSIVENESS -----*/
  1454.  
  1455. @media only screen and (max-width: 1365px) and (min-width: 1279px) {
  1456. #secondary-bar, #container, #footer-content {
  1457. width: calc({select:post width} + 275px + 275px + 100px);
  1458. }
  1459.  
  1460. {block:ifNotFullWidthBanner}
  1461. #banner-container, #banner {width: calc({select:post width} + 275px + 275px + 100px);}
  1462. {/block:ifNotFullWidthBanner}
  1463.  
  1464. #container {
  1465. {block:ifShowBlogDetailsBar}margin: 125px auto auto auto;{/block:ifShowBlogDetailsBar}
  1466. }
  1467. }
  1468.  
  1469. @media only screen and (max-width: 1278px) {
  1470. #secondary-bar, #container, #footer-content {
  1471. width: calc(400px + 225px + 225px + 125px);
  1472. }
  1473.  
  1474. {block:ifNotFullWidthBanner}
  1475. #banner-container, #banner {width: calc(400px + 225px + 225px + 125px);}
  1476. {/block:ifNotFullWidthBanner}
  1477.  
  1478. aside {width: 225px;}
  1479.  
  1480. #container {
  1481. {block:ifShowBlogDetailsBar}margin: 125px auto auto auto;{/block:ifShowBlogDetailsBar}
  1482. }
  1483.  
  1484. #posts-wrap, article {max-width: 400px;}
  1485. }
  1486.  
  1487. {CustomCSS}
  1488.  
  1489. </style>
  1490. </head>
  1491.  
  1492. <body class="load-in">
  1493.  
  1494. <!----- HEADER NAVIGATION ----->
  1495.  
  1496. <header id="top-bar">
  1497. <div id="header-flex">
  1498. <div class="top-bar-left">
  1499.  
  1500. </div>
  1501. <nav class="upper">
  1502. {block:ifHomeLink}<li><a href="/">{text:Home Link}</a></li>{/block:ifHomeLink}
  1503. {block:ifAskLink}<li><a href="/ask">{text:Ask Link}</a></li>{/block:ifAskLink}
  1504. {block:ifArchiveLink}<li><a href="/archive">{text:Archive Link}</a></li>{/block:ifArchiveLink}
  1505. {block:ifHeaderLink1}<li><a href="{text:Header Link 1 URL}">{text:Header Link 1}</a></li>{/block:ifHeaderLink1}
  1506. {block:ifHeaderLink2}<li><a href="{text:Header Link 2 URL}">{text:Header Link 2}</a></li>{/block:ifHeaderLink2}
  1507. {block:ifHeaderLink3}<li><a href="{text:Header Link 3 URL}">{text:Header Link 3}</a></li>{/block:ifHeaderLink3}
  1508. {block:ifHeaderLink4}<li><a href="{text:Header Link 4 URL}">{text:Header Link 4}</a></li>{/block:ifHeaderLink4}
  1509. </nav>
  1510. </div>
  1511. </header>
  1512.  
  1513. <!----- BANNER ----->
  1514.  
  1515. <div id="banner-container">
  1516.  
  1517. {block:ifHeaderImage}
  1518. <header id="banner">
  1519. {block:ifShowBlogTitle}
  1520. <div id="banner-flex">
  1521. <div id="banner-title">{Title}</div>
  1522. {block:ifBlogSubtitle}<div id="banner-subtitle" class="upper">{text:Blog Subtitle}</div>{/block:ifBlogSubtitle}
  1523. </div>
  1524. {/block:ifShowBlogTitle}
  1525. </header>
  1526. {/block:ifHeaderImage}
  1527.  
  1528. <!----- SEARCH AND BLOG DETAILS BAR ----->
  1529.  
  1530. {block:ifShowBlogDetailsBar}
  1531. <header id="secondary-bar" class="align-flex">
  1532. <div id="blog-details">
  1533. {block:ifBlogIcon}<img src="{PortraitURL-64}" class="icon">{/block:ifBlogIcon}
  1534. {block:ifBlogURL}<div class="subtitle" id="blogurl"><a href="/">{Name}</a></div>{/block:ifBlogURL}
  1535. </div>
  1536. {block:ifSearchBar}
  1537. <div id="search">
  1538. <form action="/search" method="get" class="find" name="sform">
  1539. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M140,134.2c10.9-11.8,17.7-27.6,17.7-45c0-36.5-29.7-66.3-66.3-66.3S25.1,52.7,25.1,89.2s29.7,66.3,66.3,66.3c14.9,0,28.6-4.9,39.7-13.2l49.3,49.3c1.2,1.2,2.7,1.8,4.2,1.8c1.5,0,3.1-0.6,4.2-1.8c2.3-2.3,2.3-6.1,0-8.5L140,134.2z M37.1,89.2c0-29.9,24.3-54.3,54.3-54.3c29.9,0,54.3,24.3,54.3,54.3s-24.3,54.3-54.3,54.3C61.4,143.5,37.1,119.1,37.1,89.2z"/></svg>
  1540. <input type="text" name="q" placeholder="search this blog" value="{SearchQuery}" class="upper" value autocomplete="off"/>
  1541. </form>
  1542. </div>
  1543. {/block:ifSearchBar}
  1544. </header>
  1545. {/block:ifShowBlogDetailsBar}
  1546.  
  1547. </div>
  1548.  
  1549. <!----- CONTAINER DIV. DON'T TOUCH ----->
  1550.  
  1551. <section id="container">
  1552.  
  1553. <!----- LEFT SIDE BOXES ----->
  1554.  
  1555. <aside id="left-side">
  1556.  
  1557. <!----- ================================
  1558.  
  1559. START EDITING LEFT SIDEBAR CONTENT HERE
  1560.  
  1561. ====================================== ----->
  1562.  
  1563. <!-----
  1564.  
  1565. ABOUT SIDE BOX
  1566.  
  1567. The only thing you need to edit in the HTML is the title between <span></span>. Your description and sidebar image can be added in the customization panel.
  1568.  
  1569. ----->
  1570.  
  1571. {block:ifAboutBox}
  1572. <div class="side-wrap">
  1573. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img"/></a>{/block:ifSidebarImage}
  1574. <div class="side-box" id="main-info">
  1575.  
  1576. <div class="title">
  1577. <span>about</span>
  1578. </div>
  1579.  
  1580. <div class="side-content">
  1581. {block:Description}<div id="description">{Description}</div>{/block:Description}
  1582. </div>
  1583. </div>
  1584. </div>
  1585. {/block:ifAboutBox}
  1586.  
  1587. <!-----
  1588.  
  1589. UPDATES SIDE BOX
  1590.  
  1591. The basic structure for a new update looks like this:
  1592.  
  1593. <li>
  1594. <div class="subtitle"><span>01</span>month</div>
  1595. <div class="upd-text">Add an update here.</div>
  1596. </li>
  1597.  
  1598. Copy and paste this as many times as you need; you can have as many updates as you want.
  1599.  
  1600. ----->
  1601.  
  1602. {block:ifUpdatesBox}
  1603. <div class="side-box" id="updates-box">
  1604.  
  1605. <div class="title">
  1606. <span>updates</span>
  1607. </div>
  1608.  
  1609. <div class="side-content">
  1610.  
  1611. <!--- stick new updates below this line --->
  1612.  
  1613. <li>
  1614. <div class="subtitle"><span>01</span>month</div>
  1615. <div class="upd-text">Some update text here.</div>
  1616. </li>
  1617.  
  1618. <!--- and make sure new updates go above this line --->
  1619.  
  1620. </div>
  1621. </div>
  1622. {/block:ifUpdatesBox}
  1623.  
  1624. <!-----
  1625.  
  1626. MEMBERS BOX
  1627.  
  1628. If you are using this on a main blog rather than a sideblog and want to use the members section for something else, you need to:
  1629.  
  1630. 1. Delete everything between and including {block:GroupMembers} and {/block:GroupMembers}
  1631. 2. Copy and paste this as many times as you need, and put it below where the content between {block:GroupMembers} and {/block:GroupMembers} used to be.
  1632.  
  1633. <li class="blog-member">
  1634. <img src="URLHERE" class="icon">
  1635. <div class="member-details">
  1636. <a href="/" class="upper">username goes here</a>
  1637. <div class="member-title">blog title goes here</div>
  1638. </div>
  1639. </li>
  1640.  
  1641. Fill in your content accordingly.
  1642.  
  1643. ----->
  1644.  
  1645. {block:ifMembersBox}
  1646. <div class="side-box" id="members-box">
  1647.  
  1648. <div class="title">
  1649. <span>members</span>
  1650. </div>
  1651.  
  1652. <div class="side-content">
  1653.  
  1654. <!--- if manually adding blogs, stick new blogs below this line --->
  1655.  
  1656. {block:GroupMembers}
  1657. {block:GroupMember}
  1658. <li class="blog-member">
  1659. <img src="{GroupMemberPortraitURL-96}" class="icon" alt="Blog member portrait">
  1660. <div class="member-details">
  1661. <a href="{GroupMemberURL}" class="upper">{GroupMemberName}</a>
  1662. <div class="member-title">{GroupMemberTitle}</div>
  1663. </div>
  1664. </li>
  1665. {/block:GroupMember}
  1666. {/block:GroupMembers}
  1667.  
  1668. <!--- blogs need to be added above this line --->
  1669.  
  1670. </div>
  1671. </div>
  1672. {/block:ifMembersBox}
  1673.  
  1674. <!-----
  1675.  
  1676. STATISTICS BOX
  1677.  
  1678. To add new statistics, copy and paste this as many times as needed:
  1679.  
  1680. <li>
  1681. <span class="upper">statistic title</span> statistic content
  1682. </li>
  1683.  
  1684. ----->
  1685.  
  1686. {block:ifStatisticsBox}
  1687. <div class="side-box" id="stats-box">
  1688.  
  1689. <div class="title">
  1690. <span>statistics</span>
  1691. </div>
  1692.  
  1693. <div class="side-content">
  1694.  
  1695. <!--- put new statistics below this line --->
  1696.  
  1697. <li>
  1698. <span class="upper">established:</span>MM DD, Year
  1699.  
  1700. </li>
  1701. <li>
  1702. <span class="upper">about:</span>subject
  1703.  
  1704. </li>
  1705. <li>
  1706. <span class="upper">theme by:</span><a href="https://seyche.tumblr.com/">seyche</a>
  1707.  
  1708. </li>
  1709.  
  1710. <!--- new statistics must go above here. do not remove my credit. --->
  1711.  
  1712. </div>
  1713. </div>
  1714. {/block:ifStatisticsBox}
  1715.  
  1716. <!----- LEFT SIDEBAR CONTENT ENDS HERE. STOP EDITING ----->
  1717.  
  1718. </aside>
  1719.  
  1720. <!----- POSTS ----->
  1721.  
  1722. <div id="posts-wrap">
  1723.  
  1724. {block:TagPage}
  1725. <div class="blackbox">
  1726. <div class="upper">Viewing posts filed under:</div>
  1727. <div class="title">#{Tag}</div>
  1728. </div>
  1729. {/block:TagPage}
  1730.  
  1731. {block:DayPage}
  1732. <div class="blackbox">
  1733. <div class="upper">Viewing posts made on:</div>
  1734. <div class="subtitle">{Month} {DayOfMonth}, {Year}</div>
  1735. </div>
  1736. {/block:DayPage}
  1737.  
  1738. {block:Posts inlineMediaWidth="1280"}
  1739. <article class="posts" id="{PostID}">
  1740.  
  1741. {block:IndexPage}
  1742. {block:PinnedPostLabel}<div class="pin-post subtitle"><a href="{Permalink}"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M134.1,11c-1.7-1.7-4.2-2.2-6.4-1.4c-2.2,0.8-3.7,2.9-3.9,5.3l-1.5,25.8L90.1,73.1l-39.2-4.7c-2.5-0.3-5,1-6.1,3.3c-1.1,2.3-0.7,5.1,1.2,6.9l28.8,28.8l-49.9,67.8c-1.7,2.3-1.5,5.6,0.5,7.7c1.2,1.2,2.7,1.8,4.3,1.8c1.2,0,2.3-0.3,3.3-1l70.6-47.4l29,29c1.2,1.2,2.7,1.8,4.2,1.8c0.9,0,1.8-0.2,2.6-0.6c2.3-1.1,3.7-3.5,3.4-6l-3.9-38.4l32.2-32.2l26.4-1.3c2.4-0.1,4.5-1.6,5.3-3.8c0.9-2.2,0.3-4.7-1.4-6.4L134.1,11z M55,154.5L83.3,116L95,127.6L55,154.5z M168.2,77.9c-1.5,0.1-2.9,0.7-4,1.8l-35.9,35.9c-1.3,1.3-1.9,3.1-1.7,4.9l2.5,24.5L66.7,82.3l24.9,3c1.8,0.2,3.7-0.4,5-1.7l36-36c1-1,1.7-2.4,1.7-3.9l0.8-14.7l48.2,48.2L168.2,77.9z"/></svg>{PinnedPostLabel}</a></div>{/block:PinnedPostLabel}
  1743. {/block:IndexPage}
  1744.  
  1745. <!----- POST TYPES ----->
  1746.  
  1747. {block:Text}
  1748. <div class="text-post" id="{PostID}">
  1749. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1750. {block:NotReblog}
  1751. <li class="caption ogcap body">
  1752. <div class="captext">{Body}</div>
  1753. </li>
  1754. {/block:NotReblog}
  1755. {block:RebloggedFrom}{block:Reblogs}
  1756. <li class="caption rbcap body">
  1757. <img src="{PortraitURL-64}" class="capicon icon">
  1758. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1759. <div class="captext">{Body}</div>
  1760. </li>
  1761. {/block:Reblogs}{/block:RebloggedFrom}
  1762. </div>
  1763. {/block:Text}
  1764.  
  1765. {block:Link}
  1766. <a href="{URL}"><div class="linkp">
  1767. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1768. <div class="link">
  1769. <div class="title">{Name}</div>
  1770. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1771. {block:Host}<div class="link-host upper">by {Host}</div>{/block:Host}
  1772. </div>
  1773. </div></a>
  1774. {/block:Link}
  1775.  
  1776. {block:Photo}
  1777. <div class="photo">
  1778. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1779. </div>
  1780. {/block:Photo}
  1781.  
  1782. {block:Photoset}
  1783. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1784. {/block:Photoset}
  1785.  
  1786. {block:Video}
  1787. <div class="video">{Video-500}</div>
  1788. {/block:Video}
  1789.  
  1790. {block:Quote}
  1791. <div class="quote">{Quote}</div>
  1792. <div class="quote-mark">❝</div>
  1793. {block:Source}<div class="source upper">{Source}</div>{/block:Source}
  1794. {/block:Quote}
  1795.  
  1796. {block:Chat}
  1797. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1798. <ul class="chat">
  1799. {block:Lines}
  1800. <li class="line">
  1801. {block:Label}<span class="subtitle chatter">{Label}</span>{/block:Label}
  1802. <div class="chattxt">{Line}</div>
  1803. </li>
  1804. {/block:Lines}
  1805. </ul>
  1806. {/block:Chat}
  1807.  
  1808. {block:Answer}
  1809. <div class="askpost">
  1810. <div class="question">{Question}</div>
  1811. <div class="title">
  1812. <span>
  1813. <img src="{AskerPortraitURL-64}" class="icon">
  1814. {Asker}
  1815. </span>
  1816. </div>
  1817. </div>
  1818. {/block:Answer}
  1819.  
  1820. {block:Audio}
  1821. <div class="audiopost">
  1822. <div class="audiobox"><div class="button">
  1823. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1824. </div></div>
  1825. {block:AlbumArt}
  1826. <img src="{AlbumArtURL}" class="albumart">
  1827. {/block:AlbumArt}
  1828. <div class="audioinfo">
  1829. {block:TrackName}<li class="subtitle track">{TrackName}</li>{/block:TrackName}
  1830. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1831. {block:Album}<li>{Album}</li>{/block:Album}
  1832. </div>
  1833. </div>
  1834. {/block:Audio}
  1835.  
  1836. <!----- MIDDLE POST INFO ----->
  1837.  
  1838. {block:Date}
  1839. <div class="info mid-info align-flex">
  1840. <div class="upper">
  1841. {block:IndexPage}
  1842. <a href="{Permalink}" class="date" title="{TimeAgo}">{Month} {DayOfMonth}, {Year}</a>{block:NoteCount}<a href="{Permalink}" class="notecount">{NoteCountWithLabel}</a>{/block:NoteCount}
  1843. {/block:IndexPage}
  1844. {block:PermalinkPage}
  1845. <div class="date">{TimeAgo} on {Month} {DayOfMonth}, {Year}</div>
  1846. {/block:PermalinkPage}
  1847. </div>
  1848.  
  1849. {block:ifCopyLinktoPost}<div class="copy-message upper">link copied</div>{/block:ifCopyLinktoPost}
  1850.  
  1851. <div class="info-controls">
  1852. {block:ifTagsOnClick}{block:IndexPage}{block:HasTags}<a class="tag-button" title="show tags">
  1853. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M95.2,186C95.3,186,95.3,186,95.2,186c1.7,0,3.2-0.6,4.3-1.7l64.8-66.7c2.3-2.4,2.3-6.1-0.1-8.4L94.7,39.7c-1.1-1.1-2.7-1.7-4.2-1.7c0,0,0,0,0,0l-67.1,0.1c-3.3,0-6,2.6-6,5.9L17,109.9c0,1.6,0.6,3.2,1.8,4.3l72.3,70.2C92.2,185.5,93.7,186,95.2,186z M29.4,50L88,49.8l63.6,63.6l-56.5,58.2L29,107.4L29.4,50z M200.3,110.2c2.3,2.3,2.3,6,0,8.4l-64.8,66.8c-1.2,1.2-2.7,1.8-4.3,1.8c-1.5,0-3-0.6-4.2-1.7c-2.4-2.3-2.4-6.1-0.1-8.5l60.7-62.6L130.2,56c-2.3-2.4-2.3-6.2,0.1-8.5c2.4-2.3,6.2-2.3,8.5,0.1L200.3,110.2z M67.1,77.7c0,4.6-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4c0-4.6,3.8-8.4,8.4-8.4S67.1,73.1,67.1,77.7z"/></svg>
  1854. </a>{/block:HasTags}{/block:IndexPage}{/block:ifTagsOnClick}
  1855. {block:ifCopyLinktoPost}<div class="copy-button" data-clipboard-text="{Permalink}"><a title="copy link to post">
  1856. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M155.5,71.8c0.5,0,1,0.1,1.5,0.1c0,0,0,0,0,0c13.8,0,25.3-10.9,26.1-24.7c0.8-14.4-10.2-26.8-24.6-27.7c-14.5-0.8-26.8,10.3-27.6,24.6c-0.2,3.5,0.3,6.8,1.3,9.9L70,91.1c-4.6-3.9-10.5-6.3-17-6.3c-14.4,0-26.1,11.7-26.1,26.1c0,14.4,11.7,26.1,26.1,26.1c6.1,0,11.8-2.1,16.2-5.7l60.7,33c-1.6,6.2-0.8,12.7,2.2,18.4c4.5,8.7,13.4,14.2,23.2,14.2c0,0,0,0,0,0c4.2,0,8.3-1.1,12-3.1c12.8-6.6,17.8-22.6,11.2-35.3c-4.5-8.7-13.4-14.1-23.2-14.1c-4.2,0-8.3,1-12,3c-3,1.6-5.7,3.7-7.8,6.2l-58.7-31.9c1.5-3.3,2.4-7,2.4-10.9c0-3.6-0.7-7-2-10.1l61.5-36.5C143,68.6,148.9,71.5,155.5,71.8z M142.9,44.9c0.4-7.5,6.6-13.3,14.1-13.3c0.3,0,0.6,0,0.8,0c7.8,0.5,13.7,7.1,13.3,14.9c-0.4,7.7-7.1,13.7-14.9,13.3C148.4,59.3,142.4,52.6,142.9,44.9z M38.9,110.9c0-7.8,6.3-14.1,14.1-14.1c7.8,0,14.1,6.3,14.1,14.1c0,7.8-6.3,14.1-14.1,14.1C45.2,125,38.9,118.7,38.9,110.9z M148.8,158.1c2-1.1,4.2-1.6,6.5-1.6c5.3,0,10.1,2.9,12.6,7.6c3.6,6.9,0.9,15.5-6,19c-2,1.1-4.2,1.6-6.5,1.6h0c-5.3,0-10.1-2.9-12.6-7.6c-1.7-3.3-2.1-7.2-0.9-10.8C142.9,162.8,145.4,159.8,148.8,158.1z"/></svg>
  1857. </a></div>{/block:ifCopyLinktoPost}
  1858. <a href="{ReblogURL}" target="_blank" title="reblog">
  1859. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M36.7,39.9c-0.4-3.3,1.9-6.3,5.2-6.7c3.3-0.4,6.3,1.9,6.7,5.2l3.6,27.9c13.6-20.2,36.6-32.7,61.4-32.7c31.6,0,59.7,20.1,70,49.9c1.1,3.1-0.6,6.5-3.7,7.6c-0.6,0.2-1.3,0.3-2,0.3c-2.5,0-4.8-1.6-5.7-4c-8.6-25-32.2-41.8-58.6-41.8c-21.6,0-41.7,11.4-52.9,29.6l30-3.4c3.3-0.4,6.3,2,6.6,5.3s-2,6.3-5.3,6.6l-43.2,4.9c-0.2,0-0.5,0-0.7,0c-3,0-5.6-2.2-5.9-5.2L36.7,39.9z M185.3,120.2l-43.2,4.9c-3.3,0.4-5.7,3.3-5.3,6.6s3.3,5.7,6.6,5.3l26.1-2.9c-10.2,21.5-31.9,35.4-56,35.4c-27.1,0-51.5-18.1-59.3-44c-1-3.2-4.3-5-7.5-4c-3.2,1-5,4.3-4,7.5c4.5,14.9,13.9,28.3,26.3,37.7c12.9,9.7,28.3,14.9,44.5,14.9c29.6,0,56.1-17.6,67.8-44.3l4.2,33.3c0.4,3,3,5.2,5.9,5.2c0.3,0,0.5,0,0.8,0c3.3-0.4,5.6-3.4,5.2-6.7l-5.6-43.5C191.5,122.2,188.6,119.9,185.3,120.2z"/></svg>
  1860. </a>
  1861. <a class="like-wrap" title="like">{LikeButton}
  1862. <span class="new-button"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M148,37.8c-3.9,0-7.5,0.6-10.8,1.9c-15.1,5.7-24.6,17.8-29.8,26.7c-6-8.6-16.1-20.5-27.6-24.4c-3.8-1.3-8.1-2-12.3-2c-10.7,0-20.3,4.1-27,11.5c-5.7,6.2-12,18-10,38.8c4.1,42.6,71.5,87.1,74.3,88.9c1,0.7,2.1,1,3.3,1c1.1,0,2.3-0.3,3.3-1c2.7-1.8,66.5-43.6,73.7-86.1c3.7-21.8-2.7-34.9-8.8-42.1C169.2,42.7,158.6,37.8,148,37.8z M173.1,91c-2.6,15.2-15.1,33.4-36.1,52.7c-11.9,10.9-23.5,19.4-29,23.2c-5.7-4-17.9-12.9-30.3-24.3C56,122.5,43.8,104,42.3,89c-1.3-13,1.1-23.2,6.9-29.6c6-6.6,13.9-7.6,18.1-7.6c3,0,5.9,0.5,8.5,1.3c11.4,3.9,23.3,21.7,26.9,28.3c1.1,2.1,3.4,3.3,5.7,3.1c2.4-0.2,4.4-1.7,5.2-4c0.1-0.2,8.2-22.4,27.7-29.7c1.9-0.7,4.2-1.1,6.6-1.1c7.2,0,14.3,3.3,19,9C173.3,66.2,175.5,77.4,173.1,91z"/></svg></span>
  1863. </a>
  1864. </div>
  1865. </div>
  1866. {/block:Date}
  1867.  
  1868. <!----- POST CAPTIONS ----->
  1869.  
  1870. {block:Link}
  1871. {block:Description}
  1872. {block:NotReblog}
  1873. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1874. <div class="captext">{Description}</div>
  1875. </li>
  1876. {/block:NotReblog}
  1877. {/block:Description}
  1878. {block:RebloggedFrom}
  1879. {block:Reblogs}
  1880. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1881. <img src="{PortraitURL-64}" class="capicon icon">
  1882. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1883. <div class="captext">{Body}</div>
  1884. </li>
  1885. {/block:Reblogs}
  1886. {/block:RebloggedFrom}
  1887. {/block:Link}
  1888.  
  1889. {block:Photo}
  1890. {block:Caption}
  1891. {block:NotReblog}
  1892. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1893. <div class="captext">{Caption}</div>
  1894. </li>
  1895. {/block:NotReblog}
  1896. {block:Reblogs}
  1897. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1898. <img src="{PortraitURL-64}" class="capicon icon">
  1899. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1900. <div class="captext">{Body}</div>
  1901. </li>
  1902. {/block:Reblogs}
  1903. {/block:Caption}
  1904. {/block:Photo}
  1905.  
  1906. {block:Photoset}
  1907. {block:Caption}
  1908. {block:NotReblog}
  1909. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1910. <div class="captext">{Caption}</div>
  1911. </li>
  1912. {/block:NotReblog}
  1913. {block:Reblogs}
  1914. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1915. <img src="{PortraitURL-64}" class="capicon icon">
  1916. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1917. <div class="captext">{Body}</div>
  1918. </li>
  1919. {/block:Reblogs}
  1920. {/block:Caption}
  1921. {/block:Photoset}
  1922.  
  1923. {block:Video}
  1924. {block:Caption}
  1925. {block:NotReblog}
  1926. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1927. <div class="captext">{Caption}</div>
  1928. </li>
  1929. {/block:NotReblog}
  1930. {block:Reblogs}
  1931. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1932. <img src="{PortraitURL-64}" class="capicon icon">
  1933. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1934. <div class="captext">{Body}</div>
  1935. </li>
  1936. {/block:Reblogs}
  1937. {/block:Caption}
  1938. {/block:Video}
  1939.  
  1940. {block:Answer}
  1941. {block:Answerer}
  1942. <li class="caption rbcap">
  1943. <img src="{AnswererPortraitURL-64}" class="capicon icon">
  1944. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1945. <div class="captext">{Answer}</div>
  1946. </li>
  1947. {/block:Answerer}
  1948. {block:NotReblog}
  1949. <li class="caption ogcap">
  1950. <div class="captext">{Replies}</div>
  1951. </li>
  1952. {/block:NotReblog}
  1953. {block:RebloggedFrom}{block:Reblogs}
  1954. <li class="caption rbcap">
  1955. <img src="{PortraitURL-64}" class="capicon icon">
  1956. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1957. <div class="captext">{Body}</div>
  1958. </li>
  1959. {/block:Reblogs}{/block:RebloggedFrom}
  1960. {/block:Answer}
  1961.  
  1962. {block:Audio}
  1963. {block:Caption}
  1964. {block:NotReblog}
  1965. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1966. <div class="captext">{Caption}</div>
  1967. </li>
  1968. {/block:NotReblog}
  1969. {block:Reblogs}
  1970. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1971. <img src="{PortraitURL-64}" class="capicon icon">
  1972. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1973. <div class="captext">{Body}</div>
  1974. </li>
  1975. {/block:Reblogs}
  1976. {/block:Caption}
  1977. {/block:Audio}
  1978.  
  1979. <!----- BOTTOM INFO ----->
  1980.  
  1981. {block:Date}
  1982. <div class="info bottom-info align-flex">
  1983. <div class="bottom-info-left">
  1984. {block:RebloggedFrom}
  1985. <img src="{ReblogRootPortraitURL-64}" class="icon"/>
  1986. <span class="upper">by <a href="{ReblogRootURL}" title="original poster">{ReblogRootName}</a></span>
  1987. {/block:RebloggedFrom}
  1988. {block:NotReblog}
  1989. <img src="{PortraitURL-64}" class="icon"/>
  1990. <div class="upper"><a href="{Permalink}">original post</a></div>
  1991. {/block:NotReblog}
  1992. </div>
  1993. <div class="bottom-info-right">
  1994. <div class="info-fade">
  1995. {block:RebloggedFrom}
  1996. <a href="{ReblogParentURL}" title="reblogged via {ReblogParentName}"><img src="{ReblogParentPortraitURL-64}" class="icon"/></a>
  1997. <a href="{PostAuthorURL}" title="reblogged by {PostAuthorName}"><img src="{PostAuthorPortraitURL-64}" class="icon"/></a>
  1998. {/block:RebloggedFrom}
  1999. {block:NotReblog}
  2000. <a href="{PostAuthorURL}" title="posted by {PostAuthorName}"><img src="{PostAuthorPortraitURL-64}" class="icon"/></a>
  2001. {/block:NotReblog}
  2002. </div>
  2003. {block:ifReblogInfoOnClick}{block:IndexPage}
  2004. <a class="info-button" title="more info"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M57,114h45v45c0,3.3,2.7,6,6,6s6-2.7,6-6v-45h45c3.3,0,6-2.7,6-6s-2.7-6-6-6h-45V57c0-3.3-2.7-6-6-6s-6,2.7-6,6v45H57c-3.3,0-6,2.7-6,6S53.7,114,57,114z"/><path d="M108,196.1c48.6,0,88.1-39.5,88.1-88.1S156.6,19.9,108,19.9S19.9,59.4,19.9,108S59.4,196.1,108,196.1z M108,31.9c42,0,76.1,34.1,76.1,76.1S150,184.1,108,184.1S31.9,150,31.9,108S66,31.9,108,31.9z"/></svg></a>
  2005. {/block:IndexPage}{/block:ifReblogInfoOnClick}
  2006. </div>
  2007. </div>
  2008. {/block:Date}
  2009.  
  2010. {block:HasTags}
  2011. <div class="tags {block:IndexPage}tag-click{/block:IndexPage}">
  2012. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M95.2,186C95.3,186,95.3,186,95.2,186c1.7,0,3.2-0.6,4.3-1.7l64.8-66.7c2.3-2.4,2.3-6.1-0.1-8.4L94.7,39.7c-1.1-1.1-2.7-1.7-4.2-1.7c0,0,0,0,0,0l-67.1,0.1c-3.3,0-6,2.6-6,5.9L17,109.9c0,1.6,0.6,3.2,1.8,4.3l72.3,70.2C92.2,185.5,93.7,186,95.2,186z M29.4,50L88,49.8l63.6,63.6l-56.5,58.2L29,107.4L29.4,50z M200.3,110.2c2.3,2.3,2.3,6,0,8.4l-64.8,66.8c-1.2,1.2-2.7,1.8-4.3,1.8c-1.5,0-3-0.6-4.2-1.7c-2.4-2.3-2.4-6.1-0.1-8.5l60.7-62.6L130.2,56c-2.3-2.4-2.3-6.2,0.1-8.5c2.4-2.3,6.2-2.3,8.5,0.1L200.3,110.2z M67.1,77.7c0,4.6-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4c0-4.6,3.8-8.4,8.4-8.4S67.1,73.1,67.1,77.7z"/></svg>
  2013. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  2014. </div>
  2015. {/block:HasTags}
  2016.  
  2017. <!----- POST NOTES ----->
  2018.  
  2019. {block:PermalinkPage}{block:Date}{block:PostNotes}
  2020. <div class="notes">
  2021. {block:NoteCount}<div class="subtitle">{NoteCountWithLabel}</div>{/block:NoteCount}
  2022. {PostNotes-64}
  2023. </div>
  2024. {/block:PostNotes}{/block:Date}{/block:PermalinkPage}
  2025.  
  2026. <!----- SOURCE ----->
  2027.  
  2028. <div class="postsource">
  2029. {block:ContentSource}<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a>{/block:ContentSource}
  2030. </div>
  2031.  
  2032. </article>
  2033. {/block:Posts}
  2034.  
  2035. <!----- PAGINATION ----->
  2036.  
  2037. {block:Pagination}
  2038. <article id="pg">
  2039. <div class="align-flex">
  2040. <div class="title">pagination</div>
  2041. <div class="upper">page {CurrentPage} of {TotalPages}</div>
  2042. </div>
  2043.  
  2044. <div id="pg-numbers">
  2045. {block:PreviousPage}<a href="{PreviousPage}" title="back"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M34.9,103.6c-0.1,0.1-0.2,0.2-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.2,0.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.1,0.2-0.2,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.1,0.3-0.2,0.4c0,0,0,0.1,0,0.1c-0.1,0.2-0.1,0.3-0.1,0.5c0,0,0,0.1,0,0.1c0,0.2-0.1,0.3-0.1,0.5c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6s0,0.4,0,0.6c0,0,0,0.1,0,0.1c0,0.2,0,0.3,0.1,0.5c0,0,0,0.1,0,0.1c0,0.2,0.1,0.3,0.1,0.5c0,0,0,0.1,0,0.1c0.1,0.1,0.1,0.3,0.2,0.4c0,0.1,0.1,0.1,0.1,0.2c0.1,0.1,0.1,0.3,0.2,0.4c0,0.1,0.1,0.1,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.2,0.2,0.2,0.2c0,0,0.1,0.1,0.1,0.1l55.6,49.6c1.1,1,2.6,1.5,4,1.5c1.7,0,3.3-0.7,4.5-2c2.2-2.5,2-6.3-0.5-8.5L54.7,114H177c3.3,0,6-2.7,6-6s-2.7-6-6-6H54.7l43.8-39.1c2.5-2.2,2.7-6,0.5-8.5s-6-2.7-8.5-0.5L35,103.5C35,103.6,34.9,103.6,34.9,103.6z"/></svg></a>{/block:PreviousPage}
  2046. {block:JumpPagination length="5"}
  2047. {block:CurrentPage}<span class="currentpg">{PageNumber}</span>{/block:CurrentPage}
  2048. {block:JumpPage}<a class="jumppg" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  2049. {/block:JumpPagination}
  2050. {block:NextPage}<a href="{NextPage}" title="next"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M181.1,103.5l-55.6-49.6c-2.5-2.2-6.3-2-8.5,0.5c-2.2,2.5-2,6.3,0.5,8.5l43.8,39.1H39c-3.3,0-6,2.7-6,6s2.7,6,6,6h122.3l-43.8,39.1c-2.5,2.2-2.7,6-0.5,8.5c1.2,1.3,2.8,2,4.5,2c1.4,0,2.8-0.5,4-1.5l55.6-49.6c1.3-1.1,2-2.8,2-4.5S182.3,104.7,181.1,103.5z"/></svg></a>{/block:NextPage}
  2051. </div>
  2052. </article>
  2053. {/block:Pagination}
  2054.  
  2055. </div>
  2056.  
  2057. <!----- RIGHT SIDE BOXES. START EDITING HERE ----->
  2058.  
  2059. <aside id="right-side">
  2060.  
  2061. <!-----
  2062.  
  2063. NAVIGATION BOX
  2064.  
  2065. You can input the links from within the customization panel. If you want to have more than eight links, add copy and paste this:
  2066.  
  2067. <li><a href="/"><span class="numbers">09</span>link name</a></li>
  2068.  
  2069. alongside the links in between <div class="side-content upper"></div> and input your URL, link number, and link name.
  2070.  
  2071. ----->
  2072.  
  2073. {block:ifNavigationBox}
  2074. <div class="side-box" id="nav-box">
  2075.  
  2076. <div class="title">
  2077. <span>navigation</span>
  2078. </div>
  2079.  
  2080. <div class="side-content upper">
  2081. {block:ifSideLink1}<li><a href="{text:Side Link 1 URL}"><span class="numbers">01</span>{text:Side Link 1}</a></li>{/block:ifSideLink1}
  2082. {block:ifSideLink2}<li><a href="{text:Side Link 2 URL}"><span class="numbers">02</span>{text:Side Link 2}</a></li>{/block:ifSideLink2}
  2083. {block:ifSideLink3}<li><a href="{text:Side Link 3 URL}"><span class="numbers">03</span>{text:Side Link 3}</a></li>{/block:ifSideLink3}
  2084. {block:ifSideLink4}<li><a href="{text:Side Link 4 URL}"><span class="numbers">04</span>{text:Side Link 4}</a></li>{/block:ifSideLink4}
  2085. {block:ifSideLink5}<li><a href="{text:Side Link 5 URL}"><span class="numbers">05</span>{text:Side Link 5}</a></li>{/block:ifSideLink5}
  2086. {block:ifSideLink6}<li><a href="{text:Side Link 6 URL}"><span class="numbers">06</span>{text:Side Link 6}</a></li>{/block:ifSideLink6}
  2087. {block:ifSideLink7}<li><a href="{text:Side Link 7 URL}"><span class="numbers">07</span>{text:Side Link 7}</a></li>{/block:ifSideLink7}
  2088. {block:ifSideLink8}<li><a href="{text:Side Link 8 URL}"><span class="numbers">08</span>{text:Side Link 8}</a></li>{/block:ifSideLink8}
  2089. </div>
  2090.  
  2091. </div>
  2092. {/block:ifNavigationBox}
  2093.  
  2094. <!-----
  2095.  
  2096. PROJECTS BOX
  2097.  
  2098. To add a new project, copy and paste this:
  2099.  
  2100. <div class="project">
  2101. <img src="https://via.placeholder.com/230x150.png"/>
  2102.  
  2103. <div class="project-text">
  2104. <div class="subtitle">project one</div>
  2105. <li><span class="upper">date:</span>MM DD, Year</li>
  2106. <li><span class="upper">status:</span>text</li>
  2107. <a href="/">project link</a>
  2108. </div>
  2109. </div>
  2110.  
  2111. into the space below as many times as you need. Replace the image URL and details with your own. Be careful not to delete any important divs or place it in the wrong spot. The project image will automatically resize, so it can be of any height, width, or any ratio. The dimension in the dummy image is just a suggestion.
  2112.  
  2113. If you don't want the project image to show, just remove the part that looks like <img src=""exampleurlhere.jpg"/> from the HTML.
  2114.  
  2115. ----->
  2116.  
  2117. {block:ifProjectsBox}
  2118. <div class="side-box" id="project-box">
  2119.  
  2120. <div class="title">
  2121. <span>projects</span>
  2122. </div>
  2123.  
  2124. <div class="side-content">
  2125.  
  2126. <!--- put new projects below this line --->
  2127.  
  2128. <div class="project">
  2129. <img src="https://via.placeholder.com/230x150.png"/>
  2130. <div class="project-text">
  2131. <div class="subtitle">project one</div>
  2132. <li><span class="upper">date:</span>MM DD, Year</li>
  2133. <li><span class="upper">status:</span>text</li>
  2134. <a href="/">project link</a>
  2135. </div>
  2136. </div>
  2137.  
  2138. <!--- and make sure you add all new projects above this this line --->
  2139.  
  2140. </div>
  2141. </div>
  2142. {/block:ifProjectsBox}
  2143.  
  2144. <!-----
  2145.  
  2146. AFFILIATES BOX
  2147.  
  2148. To add new affiliates, copy and paste this:
  2149.  
  2150. <a href="/" title="affiliate name">
  2151. <img src="https://via.placeholder.com/42x42.png"/>
  2152. </a>
  2153.  
  2154. below as many times as you need; you can have as many as you want. Replace the image URL and affiliate name with your affiliate's information and icon.
  2155.  
  2156. There's also an apply link you can use to direct new affiliates to you application process. But if you don't want to the apply link, delete everything between and including <a href="/" class="apply-link" title="apply?">....</a>
  2157.  
  2158. ----->
  2159.  
  2160. {block:ifAffiliatesBox}
  2161. <div class="side-box" id="affiliates-box">
  2162.  
  2163. <div class="title">
  2164. <span>affiliates</span>
  2165. </div>
  2166.  
  2167. <div class="side-content">
  2168.  
  2169. <!--- new affiliates go below this line --->
  2170.  
  2171. <a href="/" title="affiliate">
  2172. <img src="https://via.placeholder.com/42x42.png"/>
  2173. </a>
  2174. <a href="/" title="affiliate">
  2175. <img src="https://via.placeholder.com/42x42.png"/>
  2176. </a>
  2177. <a href="/" title="affiliate">
  2178. <img src="https://via.placeholder.com/42x42.png"/>
  2179. </a>
  2180.  
  2181. <a href="/" class="apply-link" title="apply?">
  2182. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M57,114h45v45c0,3.3,2.7,6,6,6s6-2.7,6-6v-45h45c3.3,0,6-2.7,6-6s-2.7-6-6-6h-45V57c0-3.3-2.7-6-6-6s-6,2.7-6,6v45H57c-3.3,0-6,2.7-6,6S53.7,114,57,114z"/><path d="M108,196.1c48.6,0,88.1-39.5,88.1-88.1S156.6,19.9,108,19.9S19.9,59.4,19.9,108S59.4,196.1,108,196.1z M108,31.9c42,0,76.1,34.1,76.1,76.1S150,184.1,108,184.1S31.9,150,31.9,108S66,31.9,108,31.9z"/></svg>
  2183. </a>
  2184.  
  2185. <!--- all new affiliates must go above this line --->
  2186.  
  2187. </div>
  2188. </div>
  2189. {/block:ifAffiliatesBox}
  2190.  
  2191. <!-----
  2192.  
  2193. STATUS BOX
  2194.  
  2195. To add a new status, copy and paste this as many times as you want and put it below:
  2196.  
  2197. <div class="status-item">
  2198. <div class="upper">status one</div>
  2199. <div class="toggle-on"></div>
  2200. </div>
  2201.  
  2202. For a switched-on toggle, use class="toggle-on"; for an off toggle, use class="toggle-off".
  2203.  
  2204. ----->
  2205.  
  2206. {block:ifBlogStatusBox}
  2207. <div class="side-box" id="status-box">
  2208.  
  2209. <div class="title">
  2210. <span>blog status</span>
  2211. </div>
  2212.  
  2213. <div class="side-content">
  2214.  
  2215. <!--- new statuses go below this line --->
  2216.  
  2217. <div class="status-item">
  2218. <div class="upper">status one</div>
  2219. <div class="toggle-on"></div>
  2220. </div>
  2221.  
  2222. <div class="status-item">
  2223. <div class="upper">status two</div>
  2224. <div class="toggle-off"></div>
  2225. </div>
  2226.  
  2227. <!--- and all statuses must be above this line --->
  2228.  
  2229. </div>
  2230. </div>
  2231. {/block:ifBlogStatusBox}
  2232.  
  2233. </aside>
  2234.  
  2235. <!----- END OF RIGHT SIDE BOXES. STOP EDITING ----->
  2236.  
  2237. </section>
  2238.  
  2239. <!----- FOOTER ----->
  2240.  
  2241. <footer>
  2242. <div id="footer-content">
  2243.  
  2244. {block:ifFooterContent}
  2245. <div id="footer-flex">
  2246.  
  2247. <div id="footer-left">
  2248. {block:ifDisclaimerTitle}<div class="title">{text:Disclaimer Title}</div>{/block:ifDisclaimerTitle}
  2249. {block:ifDisclaimer}<div class="footer-text">{text:Disclaimer}</div>{/block:ifDisclaimer}
  2250. </div>
  2251.  
  2252. {block:ifSocialMediaLinks}
  2253. <div id="footer-right">
  2254.  
  2255. <!----- SOCIAL MEDIA LINKS: START EDITING HERE ----->
  2256.  
  2257. <div class="title">social media</div>
  2258.  
  2259. <!--- to change the icons, go to https://fontawesome.com/icons?d=gallery and replace the icon names below with your the new icon names. --->
  2260.  
  2261. <div class="footer-text">
  2262. <a href="/" title="facebook"><i class="fab fa-facebook-f"></i></a>
  2263. <a href="/" title="twitter"><i class="fab fa-twitter"></i></a>
  2264. <a href="/" title="youtube"><i class="fab fa-youtube"></i></a>
  2265. <a href="/" title="instagram"><i class="fab fa-instagram"></i></a>
  2266. </div>
  2267.  
  2268. </div>
  2269. {/block:ifSocialMediaLinks}
  2270.  
  2271. </div>
  2272. {/block:ifFooterContent}
  2273.  
  2274. <!--- do NOT touch anything after here. Leave my credit where it is. --->
  2275.  
  2276. <div id="footer-bottom" class="upper">
  2277. <li>© {Name}, {CopyrightYears}.</li>
  2278. <li>All rights reserved.</li>
  2279. <li>Powered by Tumblr.</li>
  2280. <li>Nightshade theme by <a href="https://seyche.tumblr.com/">seyche</a>.</li>
  2281.  
  2282. <div id="btop">
  2283. <a href="#top" target="_self">back to top?</a>
  2284. </div>
  2285. </div>
  2286.  
  2287. </div>
  2288. </footer>
  2289.  
  2290. <!----- PHOTOSETS ----->
  2291.  
  2292. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  2293. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  2294.  
  2295. <!----- TOOLTIPS ----->
  2296.  
  2297. <script src="https://unpkg.com/popper.js@1"></script>
  2298. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  2299.  
  2300. <!----- VIDEO RESIZING ----->
  2301.  
  2302. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  2303.  
  2304. <!----- NOTECOUNT ----->
  2305.  
  2306. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  2307.  
  2308. <!----- CLIPBOARD ----->
  2309.  
  2310. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  2311.  
  2312. <!----- JQUERY ----->
  2313.  
  2314. <script>
  2315.  
  2316. /// PHOTOSETS
  2317.  
  2318. $(document).ready(function(){
  2319. $('.photo-slideshow').pxuPhotoset({
  2320. lightbox: true,
  2321. rounded: false,
  2322. gutter: '{select:photoset gutter}px',
  2323. borderRadius: '0px',
  2324. photoset: '.photo-slideshow',
  2325. photoWrap: '.photo-data',
  2326. photo: '.pxu-photo'
  2327. });
  2328.  
  2329. npfPhotosets(".posts", {
  2330. rowClass:"npf_row",
  2331. imageContainerClass:"tmblr-full",
  2332. generatedPhotosetContainerClass:"npf_photoset",
  2333. imageClass:"npf_image",
  2334. includeCommonPhotosets: false,
  2335. useTumblrLightbox: true,
  2336. insertGalleryIndicator: false,
  2337. galleryIndicatorClass: "npf_gallery_indicator",
  2338. galleryIndicatorContent: "<img src='image_url'>",
  2339. photosetMargins:"{select:photoset gutter}"
  2340. });
  2341.  
  2342. /// TOOLTIPS
  2343.  
  2344. tippy('[title]', {
  2345. theme: 'custom',
  2346. arrow: false,
  2347. followCursor: true,
  2348. delay: 100,
  2349. placement: 'bottom-start',
  2350. zIndex: 9999999999,
  2351. maxWidth: 400,
  2352.  
  2353. content(reference) {
  2354. const title = reference.getAttribute('title');
  2355. reference.removeAttribute('title');
  2356. return title;
  2357. },
  2358. });
  2359.  
  2360. });
  2361.  
  2362. /// TAGS ON CLICK AND INFO DROPDOWN
  2363.  
  2364. $(document).ready(function() {
  2365. {block:IndexPage}{block:ifTagsOnClick}
  2366. $('.tag-click').hide();
  2367. $('.tag-button').click(function(event) {
  2368. $(this).closest('.posts').find('.tag-click').slideToggle(500)
  2369. event.preventDefault();
  2370. $(this).toggleClass('button-clicked');
  2371. });
  2372. {/block:ifTagsOnClick}{/block:IndexPage}
  2373.  
  2374. var clipboard = new ClipboardJS(".copy-button");
  2375.  
  2376. $('.copy-button').click(function(event) {
  2377. $(this).closest('.posts').find('.copy-message').fadeIn(500)
  2378. event.preventDefault();
  2379.  
  2380. setTimeout(function(){
  2381. $('.copy-message').fadeOut(500);}, 2000);
  2382.  
  2383. $(this).toggleClass('button-clicked');
  2384. });
  2385.  
  2386. {block:ifReblogInfoOnClick}{block:IndexPage}
  2387. $('.info-fade').hide();
  2388. $('.info-button').click(function(event) {
  2389. $(this).closest('.posts').find('.info-fade').fadeToggle(500)
  2390. event.preventDefault();
  2391. $(this).toggleClass('button-clicked');
  2392. });
  2393. {/block:IndexPage}{/block:ifReblogInfoOnClick}
  2394. });
  2395.  
  2396. /// REMOVE REDIRECTS
  2397.  
  2398. $(document).ready(function(){
  2399. //remove tumblr redirects script by magnusthemes@tumblr
  2400. $('a[href*="t.umblr.com/redirect"]').each(function(){
  2401. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  2402. var replaceURL = decodeURIComponent(originalURL);
  2403. $(this).attr("href", replaceURL);
  2404. });
  2405. });
  2406.  
  2407. /// RESPONSIVE VIDEOS
  2408.  
  2409. function flexFrame() {
  2410. $(".caption").each(function() {
  2411. $(this).find("iframe").wrap("<div class='capframe'></div>");
  2412. flexibleFrames($(".capframe"));
  2413. });
  2414. flexibleFrames($(".video"));
  2415. }
  2416. $(document).ready(flexFrame);
  2417.  
  2418. /// SCROLL TO TOP
  2419.  
  2420. $(document).ready(function(){
  2421. $('#btop a').click(function(){
  2422. $('html, body').animate({scrollTop : 0},800);
  2423. return false;
  2424. });
  2425. });
  2426.  
  2427. </script>
  2428.  
  2429. </body>
  2430. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!