API tools faq
paste
Advertisement
roxiestheme

Fansite 003

roxiestheme
Feb 20th, 2019
6,431
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 94.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!--
  5.  
  6. Designed by ShuDesigns
  7. shudesigns.tumblr.com
  8. 2019 ⓒ All Rights Reserved.
  9.  
  10. ---
  11.  
  12. >> CREDITS
  13.  
  14. Google Fonts
  15. Feather Icons by Cole Bemis
  16. FontAwesome(v4.7) by Fonticons, Inc.
  17.  
  18. style-my-tooltips by malihu
  19. imgLiquid by Alejandro Emparan
  20. Sticky Sidebar by Ahmed Bouhuolia
  21. Extended photoset by PixelUnion, modified by bychloethemes
  22. Video width fix by shythemes
  23.  
  24. -->
  25. <meta charset="UTF-8" />
  26. {block:Description}<meta name="descripttion" content="{MetaDescription}" />{/block:Description}
  27. {block:Hidden}
  28. <meta name="color:Text Color" content="#656565" />
  29. <meta name="color:Color One" content="#bdc2e8" />
  30. <meta name="color:Color Two" content="#e6dee9" />
  31. <meta name="color:Border Color" content="#eeeeee" />
  32. <meta name="color:Body Background" content="#f5f5f5" />
  33. <meta name="color:Navbar Top Background" content="#333333" />
  34. <meta name="color:Navbar Background" content="#fafafa" />
  35. <meta name="color:Banner Text Color" content="#ffffff" />
  36. <meta name="color:Post Background" content="#ffffff" />
  37.  
  38. <meta name="image:Home Banner" content="" />
  39. <meta name="image:Page Banner" content="" />
  40. <meta name="image:Sidebar Intro" content="" />
  41.  
  42. <meta name="if:Show Banner" content="1" />
  43. <meta name="if:Show Banner Text" content="1" />
  44.  
  45. <meta name="select:Tumblr Controls Style" content="light-controls" title="Light" />
  46. <meta name="select:Tumblr Controls Style" content="dark-controls" title="Dark" />
  47.  
  48. <meta name="select:Banner Blending Mode" content="normal" title="Normal" />
  49. <meta name="select:Banner Blending Mode" content="multiply" title="Multiply" />
  50. <meta name="select:Banner Blending Mode" content="overlay" title="Overlay" />
  51. <meta name="select:Banner Blending Mode" content="screen" title="Screen" />
  52.  
  53. <meta name="select:Sidebar Position" content="left" title="Left" />
  54. <meta name="select:Sidebar Position" content="right" title="Right" />
  55.  
  56. <meta name="select:Sidebar Width" content="300px" title="300px" />
  57. <meta name="select:Sidebar Width" content="225px" title="225px" />
  58. <meta name="select:Sidebar Width" content="250px" title="250px" />
  59. <meta name="select:Sidebar Width" content="275px" title="275px" />
  60.  
  61. <meta name="select:Post Width" content="540px" title="540px" />
  62. <meta name="select:Post Width" content="400px" title="400px" />
  63. <meta name="select:Post Width" content="500px" title="500px" />
  64.  
  65. <meta name="text:Body Font Size" content="14px" />
  66.  
  67. <meta name="text:Tumblr Controls Opacity" content="1" />
  68. <meta name="text:Banner Image Opacity" content="1" />
  69.  
  70. <meta name="text:Navbar Title" content="" />
  71. <meta name="text:Banner Title" content="" />
  72. <meta name="text:Banner Subtitle" content="" />
  73.  
  74. <meta name="text:Link 1 Title" content="home" />
  75. <meta name="text:Link 1 Url" content="/" />
  76. <meta name="text:Link 2 Title" content="ask" />
  77. <meta name="text:Link 2 Url" content="/ask" />
  78. <meta name="text:Link 3 Title" content="" />
  79. <meta name="text:Link 3 Url" content="" />
  80. <meta name="text:Link 4 Title" content="" />
  81. <meta name="text:Link 4 Url" content="" />
  82. <meta name="text:Link 5 Title" content="" />
  83. <meta name="text:Link 5 Url" content="" />
  84. {/block:Hidden}
  85. <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>
  86. <link rel="shortcut icon" href="{Favicon}" type="image/x-icon" />
  87. <link rel="alternate" href="{RSS}" type="application/rss+xml" />
  88. <link rel="stylesheet" href="https://static.tumblr.com/ickcbh2/Fofpn8amw/layout.min.css" />
  89.  
  90. <style type="text/css">
  91.  
  92. /* -------------------------------------------
  93. * variables
  94. * ------------------------------------------ */
  95.  
  96. :root {
  97.  
  98. /* fonts */
  99. --sans: 'Source Sans Pro', 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
  100. --serif: 'Playfair Display', 'Times', 'Times New Roman', serif;
  101. --icons: 'FontAwesome' !important;
  102. --body-font-size: 14px;
  103.  
  104. /* colors */
  105. --body-background: {color:Body Background};
  106. --post-background: {color:Post Background};
  107. --text-color: {color:Text Color};
  108. --border-color: {color:Border Color};
  109. --navbar-top: {color:Navbar Top Background};
  110. --navbar-background: {color:Navbar Background};
  111. --banner-text: {color:Banner Text};
  112. --color-one: {color:Color One};
  113. --color-two: {color:Color Two};
  114. --gradient: {color:Color One}, {color:Color Two};
  115.  
  116. }
  117.  
  118. /* -------------------------------------------
  119. * layout
  120. * ------------------------------------------ */
  121.  
  122. .wrapper {
  123. min-width: calc({select:Sidebar Width} + 50px + {select:Post Width});
  124. }
  125. .container {
  126. width: calc({select:Sidebar Width} + 50px + {select:Post Width});
  127. margin: 0 auto;
  128. }
  129.  
  130. /* -------------------------------------------
  131. * tumblr controls
  132. * ------------------------------------------ */
  133.  
  134. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  135. position: fixed;
  136. z-index: 1001;
  137. top: -1px;
  138. right: calc(50% - {select:Sidebar Width}/2 - 30px - {select:Post Width}/2);
  139. max-width: 350px;
  140. -webkit-transform: scale(0.6);
  141. -moz-transform: scale(0.6);
  142. -ms-transform: scale(0.6);
  143. transform: scale(0.6);
  144. -webkit-transform-origin: top right;
  145. -moz-transform-origin: top right;
  146. -ms-transform-origin: top right;
  147. transform-origin: top right;
  148. opacity: {text:Tumblr Controls Opacity};
  149. }
  150. .light-controls .tmblr-iframe--unified-controls {
  151. mix-blend-mode: screen;
  152. }
  153. .dark-controls .tmblr-iframe--unified-controls {
  154. mix-blend-mode: multiply;
  155. -webkit-filter: invert(100%);
  156. filter: invert(100%);
  157. }
  158.  
  159. /* -------------------------------------------
  160. * header
  161. * ------------------------------------------ */
  162.  
  163. /* navbar basic */
  164. #header .navbar {
  165. position: fixed;
  166. z-index: 999;
  167. top: 0;
  168. left: 0;
  169. right: 0;
  170. }
  171.  
  172. /* navbar top */
  173. #header .navbar .navbar-top {
  174. height: 30px;
  175. background-color: {color:Navbar Top Background};
  176. }
  177. #header .navbar .navbar-top .search {
  178. padding: 5px 0 5px 80px;
  179. }
  180. #header .navbar .navbar-top .search .search-bar {
  181. position: relative;
  182. display: -webkit-box;
  183. display: -webkit-flex;
  184. display: -ms-flexbox;
  185. display: flex;
  186. height: 20px;
  187. margin-left: 10px;
  188. }
  189. #header .navbar .navbar-top .search .search-bar input,
  190. #header .navbar .navbar-top .search .search-bar button {
  191. display: block;
  192. color: {color:Banner Text Color};
  193. }
  194. #header .navbar .navbar-top .search .search-bar input {
  195. font-size: 0.95rem;
  196. width: 150px;
  197. }
  198. #header .navbar .navbar-top .search .search-bar input::-webkit-input-placeholder {
  199. color: {color:Banner Text Color};
  200. opacity: 0.5;
  201. }
  202. #header .navbar .navbar-top .search .search-bar button svg {
  203. display: block;
  204. width: 15px;
  205. height: 15px;
  206. stroke: url('#gradient');
  207. }
  208.  
  209. /* navbar main */
  210. #header .navbar .navbar-main {
  211. background-color: {color:Navbar Background};
  212. }
  213. #header .navbar .navbar-main .container {
  214. position: relative;
  215. display: -webkit-box;
  216. display: -webkit-flex;
  217. display: -ms-flexbox;
  218. display: flex;
  219. -webkit-box-pack: justify;
  220. -ms-flex-pack: justify;
  221. justify-content: space-between;
  222. -webkit-box-align: center;
  223. -ms-flex-align: center;
  224. align-items: center;
  225. color: {color:Text Color};
  226. }
  227. #header .navbar .navbar-main .title {
  228. margin: 0;
  229. font-family: var(--serif);
  230. font-size: 1.285rem;
  231. }
  232. #header .navbar .navbar-main .title.title-style {
  233. margin-left: 90px;
  234. }
  235. #header .navbar .navbar-main .title.title-style:before,
  236. #header .navbar .navbar-main .title.title-style:after {
  237. position: absolute;
  238. left: 0;
  239. display: block;
  240. }
  241. #header .navbar .navbar-main .title.title-style:before {
  242. content: attr(data-first-letter);
  243. top: -30px;
  244. width: 80px;
  245. height: 100px;
  246. padding-top: 30px;
  247. background-image: linear-gradient(to bottom, var(--gradient));
  248. background-size: 101%;
  249. font-size: 3rem;
  250. text-align: center;
  251. line-height: 60px;
  252. text-transform: uppercase;
  253. color: #fff;
  254. transition-property: height, line-height;
  255. transition-duration: .3s;
  256. transition-timing-function: ease-in-out;
  257. }
  258. #header .navbar .navbar-main.on-scroll .title.title-style:before {
  259. height: 85px;
  260. line-height: 50px;
  261. }
  262. #header .navbar .navbar-main .title.title-style:after {
  263. content: '';
  264. bottom: -20px;
  265. border-left: 40px solid transparent;
  266. border-right: 40px solid transparent;
  267. border-top: 20px solid {color:Color Two};
  268. }
  269. #header .navbar .navbar-main .menu {
  270. display: -webkit-box;
  271. display: -webkit-flex;
  272. display: -ms-flexbox;
  273. display: flex;
  274. -webkit-box-align: center;
  275. -ms-flex-align: center;
  276. align-items: center;
  277. height: 70px;
  278. transition: height .3s ease-in-out;
  279. }
  280. #header .navbar .navbar-main.on-scroll .menu {
  281. height: 55px;
  282. }
  283. #header .navbar .navbar-main .menu > li {
  284. position: relative;
  285. display: -webkit-box;
  286. display: -webkit-flex;
  287. display: -ms-flexbox;
  288. display: flex;
  289. -webkit-box-pack: justify;
  290. -ms-flex-pack: justify;
  291. justify-content: space-between;
  292. -webkit-box-align: center;
  293. -ms-flex-align: center;
  294. align-items: center;
  295. height: 100%;
  296. background-image: linear-gradient(to bottom, var(--gradient));
  297. background-size: 101%;
  298. }
  299. #header .navbar .navbar-main .menu > li:hover > a,
  300. #header .navbar .navbar-main .menu > li:hover > span {
  301. background-color: transparent;
  302. color: #fff;
  303. }
  304. #header .navbar .navbar-main .menu > li a {
  305. white-space: nowrap;
  306. text-transform: uppercase;
  307. line-height: 1em;
  308. }
  309. #header .navbar .navbar-main .menu > li > a,
  310. #header .navbar .navbar-main .menu > li > span {
  311. position: relative;
  312. display: -webkit-box;
  313. display: -webkit-flex;
  314. display: -ms-flexbox;
  315. display: flex;
  316. -webkit-box-pack: justify;
  317. -ms-flex-pack: justify;
  318. justify-content: space-between;
  319. -webkit-box-align: center;
  320. -ms-flex-align: center;
  321. align-items: center;
  322. height: 100%;
  323. background-color: {color:Navbar Background};
  324. padding: 0 25px;
  325. font-size: 0.75rem;
  326. font-weight: 600;
  327. letter-spacing: 0.1em;
  328. text-transform: uppercase;
  329. transition-property: color, background-color;
  330. }
  331. #header .navbar .navbar-main .menu > li > span {
  332. cursor: default;
  333. }
  334. #header .navbar .navbar-main .menu > li .submenu {
  335. display: none;
  336. position: absolute;
  337. top: 70px;
  338. min-width: 100%;
  339. padding: 20px;
  340. background-color: {color:Navbar Top Background};
  341. text-align: center;
  342. transition: top .3s ease-in-out;
  343. }
  344. #header .navbar .navbar-main.on-scroll .menu > li .submenu {
  345. top: 55px;
  346. }
  347. #header .navbar .navbar-main .menu > li .submenu:before {
  348. content: "";
  349. position: absolute;
  350. z-index: 1;
  351. top: 0;
  352. left: calc(50% - 5px);
  353. display: block;
  354. border-top: 7px solid {color:Color Two};
  355. border-left: 5px solid transparent;
  356. border-right: 5px solid transparent;
  357. }
  358. #header .navbar .navbar-main .menu > li .submenu li + li {
  359. margin-top: 10px;
  360. }
  361. #header .navbar .navbar-main .menu > li .submenu li a {
  362. position: relative;
  363. display: inline-block;
  364. font-size: 0.75rem;
  365. letter-spacing: 0.1em;
  366. color: {color:Banner Text Color};
  367. }
  368. #header .navbar .navbar-main .menu > li .submenu li a:after {
  369. content: '';
  370. position: absolute;
  371. top: calc(0.5em - 1px);
  372. left: 0;
  373. right: 0;
  374. display: block;
  375. height: 2px;
  376. background-image: linear-gradient(135deg, var(--gradient));
  377. background-size: 101%;
  378. -moz-transform: scaleX(0);
  379. -o-transform: scaleX(0);
  380. -ms-transform: scaleX(0);
  381. -webkit-transform: scaleX(0);
  382. transform: scaleX(0);
  383. transition: transform 0.5s ease-in-out;
  384. transform-origin: center left;
  385. }
  386. #header .navbar .navbar-main .menu > li .submenu li a:hover:after {
  387. -moz-transform: scaleX(1);
  388. -o-transform: scaleX(1);
  389. -ms-transform: scaleX(1);
  390. -webkit-transform: scaleX(1);
  391. transform: scaleX(1);
  392. }
  393.  
  394. /* banner */
  395. #header .banner {
  396. position: relative;
  397. display: -webkit-box;
  398. display: -webkit-flex;
  399. display: -ms-flexbox;
  400. display: flex;
  401. -webkit-box-align: center;
  402. -ms-flex-align: center;
  403. align-items: center;
  404. height: 15vw;
  405. min-height: 200px;
  406. margin-top: 100px;
  407. background-image: linear-gradient(135deg, var(--gradient));
  408. background-size: 101%;
  409. }
  410. #header .banner.page-1 {
  411. height: 30vw;
  412. min-height: 400px;
  413. }
  414. #header .banner .banner-img {
  415. position: absolute;
  416. top: 0;
  417. left: 0;
  418. right: 0;
  419. bottom: 0;
  420. mix-blend-mode: {select:Banner Blending Mode};
  421. opacity: {text:Banner Image Opacity};
  422. }
  423. #header .banner .home-banner,
  424. #header .banner.page-1 .page-banner {
  425. display: none;
  426. }
  427. #header .banner.page-1 .home-banner {
  428. display: block;
  429. }
  430. #header .banner .banner-text {
  431. position: relative;
  432. z-index: 1;
  433. color: {color:Banner Text Color};
  434. }
  435. #header .banner .banner-text .title {
  436. margin: 0;
  437. font-family: var(--serif);
  438. font-size: 2.5rem;
  439. font-weight: 700;
  440. line-height: 1.1em;
  441. }
  442. #header .banner .banner-text .title + .subtitle {
  443. margin-top: 5px;
  444. }
  445. #header .banner .banner-text .subtitle {
  446. display: block;
  447. font-size: 0.85rem;
  448. line-height: 1.1em;
  449. }
  450. #header .banner .banner-text .links {
  451. margin-top: 25px;
  452. display: -webkit-box;
  453. display: -webkit-flex;
  454. display: -ms-flexbox;
  455. display: flex;
  456. -webkit-box-align: center;
  457. -ms-flex-align: center;
  458. align-items: center;
  459. }
  460. #header .banner .banner-text .links li + li {
  461. margin-left: 10px;
  462. }
  463. #header .banner .banner-text .links li a {
  464. display: -webkit-box;
  465. display: -webkit-flex;
  466. display: -ms-flexbox;
  467. display: flex;
  468. -webkit-box-pack: center;
  469. -ms-flex-pack: center;
  470. justify-content: center;
  471. -webkit-box-align: center;
  472. -ms-flex-align: center;
  473. align-items: center;
  474. width: 2.25rem;
  475. height: 2.25rem;
  476. border: 1px solid {color:Banner Text Color};
  477. border-radius: 50%;
  478. color: {color:Banner Text Color};
  479. transition-property: color, background-color;
  480. }
  481. #header .banner .banner-text .links li a svg {
  482. width: 1rem;
  483. height: 1rem;
  484. }
  485. #header .banner .banner-text .links li a:hover {
  486. background-color: {color:Banner Text Color};
  487. color: {color:Color One};
  488. }
  489.  
  490. /* -------------------------------------------
  491. * main
  492. * ------------------------------------------ */
  493.  
  494. /* basic */
  495. #main {
  496. {block:ifnotShowBanner}margin-top: 100px;{/block:ifnotShowBanner}
  497. padding: 100px 0;
  498. }
  499. #main .primary {
  500. margin-{select:Sidebar Position}: calc({select:Sidebar Width} + 50px);
  501. }
  502.  
  503. /* pagination */
  504. #main .primary .pagination {
  505. position: relative;
  506. margin-top: 50px;
  507. overflow: hidden;
  508. background-color: {color:Post Background};
  509. }
  510. #main .primary .pagination a {
  511. display: block;
  512. }
  513. #main .primary .pagination .arrow {
  514. position: absolute;
  515. top: 0;
  516. }
  517. #main .primary .pagination .arrow:not(.active) {
  518. background-color: {color:Navbar Background};
  519. }
  520. #main .primary .pagination .arrow:not(.active) a {
  521. pointer-events: none;
  522. color: {color:Text Color};
  523. opacity: 0.5;
  524. }
  525. #main .primary .pagination .arrow.active {
  526. background-image: linear-gradient(135deg, var(--gradient));
  527. background-size: 101%;
  528. }
  529. #main .primary .pagination .arrow.active a {
  530. color: #fff;
  531. }
  532. #main .primary .pagination .arrow.prev {
  533. left: 0;
  534. }
  535. #main .primary .pagination .arrow.next {
  536. right: 0;
  537. }
  538. #main .primary .pagination .arrow a {
  539. display: -webkit-box;
  540. display: -webkit-flex;
  541. display: -ms-flexbox;
  542. display: flex;
  543. -webkit-box-pack: center;
  544. -ms-flex-pack: center;
  545. justify-content: center;
  546. -webkit-box-align: center;
  547. -ms-flex-align: center;
  548. align-items: center;
  549. width: 45px;
  550. height: 45px;
  551. }
  552. #main .primary .pagination .arrow a svg {
  553. display: block;
  554. width: 1rem;
  555. height: 1rem;
  556. }
  557. #main .primary .pagination .jump {
  558. display: -webkit-box;
  559. display: -webkit-flex;
  560. display: -ms-flexbox;
  561. display: flex;
  562. -webkit-box-pack: center;
  563. -ms-flex-pack: center;
  564. justify-content: center;
  565. -webkit-box-align: center;
  566. -ms-flex-align: center;
  567. align-items: center;
  568. padding: 5px 0;
  569. }
  570. #main .primary .pagination .jump li {
  571. background-image: linear-gradient(135deg, var(--gradient));
  572. background-size: 101%;
  573. border-radius: 50%;
  574. overflow: hidden;
  575. width: 35px;
  576. height: 35px;
  577. }
  578. #main .primary-400px .pagination .jump {
  579. padding: 10px 0;
  580. }
  581. #main .primary-400px .pagination .jump li {
  582. width: 25px;
  583. height: 25px;
  584. }
  585. #main .primary .pagination .jump li a {
  586. display: -webkit-box;
  587. display: -webkit-flex;
  588. display: -ms-flexbox;
  589. display: flex;
  590. -webkit-box-pack: center;
  591. -ms-flex-pack: center;
  592. justify-content: center;
  593. -webkit-box-align: center;
  594. -ms-flex-align: center;
  595. align-items: center;
  596. height: 100%;
  597. background-color: {color:Post Background};
  598. font-size: 0.85rem;
  599. text-align: center;
  600. transition-property: color, background-color;
  601. }
  602. #main .primary .pagination .jump li a:hover {
  603. background-color: transparent;
  604. color: #fff;
  605. }
  606. #main .primary .pagination .jump li.current {
  607. padding: 2px;
  608. }
  609. #main .primary .pagination .jump li.current a {
  610. border-radius: 50%;
  611. pointer-events: none;
  612. }
  613. #main .primary .pagination .jump li + li {
  614. margin-left: 5px;
  615. }
  616.  
  617. /* -------------------------------------------
  618. * sidebar
  619. * ------------------------------------------ */
  620.  
  621. /* basic */
  622. .sidebar {
  623. width: {select:Sidebar Width};
  624. float: {select:Sidebar Position};
  625. will-change: min-height;
  626. }
  627. .sidebar .sidebar-inner {
  628. -moz-transform: translate(0, 0);
  629. -o-transform: translate(0, 0);
  630. -ms-transform: translate(0, 0);
  631. -webkit-transform: translate(0, 0);
  632. transform: translate(0, 0);
  633. -moz-transform: translate3d(0, 0, 0);
  634. -o-transform: translate3d(0, 0, 0);
  635. -ms-transform: translate3d(0, 0, 0);
  636. -webkit-transform: translate3d(0, 0, 0);
  637. transform: translate3d(0, 0, 0);
  638. will-change: position, transform;
  639. }
  640.  
  641. /* section */
  642. .sidebar .section + .section {
  643. margin-top: 50px;
  644. }
  645.  
  646. /* section head */
  647. .sidebar .section .section-head {
  648. display: -webkit-box;
  649. display: -webkit-flex;
  650. display: -ms-flexbox;
  651. display: flex;
  652. -webkit-box-align: center;
  653. -ms-flex-align: center;
  654. align-items: center;
  655. background-color: {color:Navbar Background};
  656. }
  657. .sidebar .section .section-head .icon {
  658. position: relative;
  659. display: -webkit-box;
  660. display: -webkit-flex;
  661. display: -ms-flexbox;
  662. display: flex;
  663. -webkit-box-pack: center;
  664. -ms-flex-pack: center;
  665. justify-content: center;
  666. -webkit-box-align: center;
  667. -ms-flex-align: center;
  668. align-items: center;
  669. width: 50px;
  670. height: 50px;
  671. background-image: linear-gradient(to bottom, var(--gradient));
  672. background-size: 101%;
  673. color: #fff;
  674. }
  675. .sidebar .section .section-head .icon:after {
  676. content: '';
  677. position: absolute;
  678. top: 100%;
  679. left: 0;
  680. right: 0;
  681. display: block;
  682. border-left: 25px solid transparent;
  683. border-right: 25px solid transparent;
  684. border-top: 12.5px solid {color:Color Two};
  685. }
  686. .sidebar .section .section-head .icon svg {
  687. width: 1.425rem;
  688. height: 1.425rem;
  689. }
  690. .sidebar .section .section-head .title {
  691. margin: 0 0 0 15px;
  692. font-family: var(--serif);
  693. font-size: 1.15rem;
  694. }
  695.  
  696. /* section content */
  697. .sidebar .section .section-content {
  698. padding: 20px;
  699. background-color: {color:Post Background};
  700. }
  701.  
  702. /* intro */
  703. .sidebar .intro .intro-img {
  704. margin: -20px;
  705. }
  706. .sidebar .intro .intro-img img {
  707. display: block;
  708. }
  709. .sidebar .intro .intro-img+.intro-text {
  710. margin-top: 40px;
  711. }
  712. .sidebar .intro .intro-text {
  713. font-size: 0.925rem;
  714. }
  715.  
  716. /* sidelinks */
  717. .sidebar .sidelinks ul {
  718. display: -webkit-box;
  719. display: -webkit-flex;
  720. display: -ms-flexbox;
  721. display: flex;
  722. }
  723. .sidebar .sidelinks ul + ul {
  724. margin-top: 5px;
  725. }
  726. .sidebar .sidelinks ul li {
  727. background-image: linear-gradient(135deg, var(--gradient));
  728. background-size: 101%;
  729. }
  730. .sidebar .sidelinks ul li a {
  731. display: -webkit-box;
  732. display: -webkit-flex;
  733. display: -ms-flexbox;
  734. display: flex;
  735. -webkit-box-align: center;
  736. -ms-flex-align: center;
  737. align-items: center;
  738. background-color: {color:Post Background};
  739. border: 1px solid {color:Border Color};
  740. transition-property: color, background-color, border-color;
  741. }
  742. .sidebar .sidelinks ul li a svg {
  743. stroke: url("#gradient");
  744. }
  745. .sidebar .sidelinks ul li a:hover {
  746. color: #fff;
  747. background-color: transparent;
  748. border-color: transparent;
  749. }
  750. .sidebar .sidelinks ul li a:hover svg {
  751. stroke: #fff;
  752. }
  753. .sidebar .sidelinks ul.grid {
  754. -ms-flex-wrap: wrap;
  755. flex-wrap: wrap;
  756. }
  757. .sidebar .sidelinks ul.grid li {
  758. position: relative;
  759. width: calc(20% - 4px);
  760. margin: 5px 5px 0 0;
  761. }
  762. .sidebar .sidelinks ul.grid li:nth-child(-n+5) {
  763. margin-top: 0;
  764. }
  765. .sidebar .sidelinks ul.grid li:nth-child(5n+0) {
  766. margin-right: 0;
  767. }
  768. .sidebar .sidelinks ul.grid li:before {
  769. content: "";
  770. display: block;
  771. height: 0;
  772. padding-bottom: 100%;
  773. }
  774. .sidebar .sidelinks ul.grid li a {
  775. position: absolute;
  776. top: 0;
  777. left: 0;
  778. right: 0;
  779. bottom: 0;
  780. -webkit-box-pack: center;
  781. -ms-flex-pack: center;
  782. justify-content: center;
  783. }
  784. .sidebar .sidelinks ul.grid li a svg {
  785. width: 1.25rem;
  786. height: 1.25rem;
  787. }
  788. .sidebar .sidelinks ul.list {
  789. -webkit-box-orient: vertical;
  790. -webkit-box-direction: normal;
  791. -ms-flex-direction: column;
  792. flex-direction: column;
  793. }
  794. .sidebar .sidelinks ul.list li + li {
  795. margin-top: 5px;
  796. }
  797. .sidebar .sidelinks ul.list li a {
  798. padding: 10px;
  799. font-size: 0.925rem;
  800. }
  801. .sidebar .sidelinks ul.list li a svg {
  802. width: 1.25rem;
  803. height: 1.25rem;
  804. margin-right: 10px;
  805. }
  806.  
  807. /* events */
  808. .sidebar .events .event {
  809. display: -webkit-box;
  810. display: -webkit-flex;
  811. display: -ms-flexbox;
  812. display: flex;
  813. }
  814. .sidebar .events .event + .event {
  815. margin-top: 10px;
  816. }
  817. .sidebar .events .event li {
  818. position: relative;
  819. }
  820. .sidebar .events .event li > div {
  821. position: absolute;
  822. top: 0;
  823. left: 0;
  824. right: 0;
  825. bottom: 0;
  826. display: -webkit-box;
  827. display: -webkit-flex;
  828. display: -ms-flexbox;
  829. display: flex;
  830. -webkit-box-orient: vertical;
  831. -webkit-box-direction: normal;
  832. -ms-flex-direction: column;
  833. flex-direction: column;
  834. -webkit-box-pack: center;
  835. -ms-flex-pack: center;
  836. justify-content: center;
  837. }
  838. .sidebar .events .event li > div span {
  839. display: block;
  840. }
  841. .sidebar .events .event li:first-child {
  842. -webkit-box-flex: 1;
  843. -ms-flex: 1;
  844. flex: 1;
  845. }
  846. .sidebar .events .event li:first-child:before {
  847. content: "";
  848. display: block;
  849. padding-bottom: 100%;
  850. }
  851. .sidebar .events .event li:first-child .event-date {
  852. -webkit-box-align: center;
  853. -ms-flex-align: center;
  854. align-items: center;
  855. background-image: linear-gradient(135deg, var(--gradient));
  856. background-size: 101%;
  857. text-align: center;
  858. text-transform: uppercase;
  859. color: #fff;
  860. }
  861. .sidebar .events .event li:first-child .event-date .month {
  862. font-size: 0.7rem;
  863. line-height: 1em;
  864. letter-spacing: 0.01em;
  865. }
  866. .sidebar .events .event li:first-child .event-date .day {
  867. margin: 5px 0 -0.5rem;
  868. font-size: 1.75rem;
  869. font-weight: 700;
  870. line-height: 1em;
  871. letter-spacing: -0.05em;
  872. }
  873. .sidebar .events .event li:first-child .event-date .day sub {
  874. margin-left: 0.1rem;
  875. font-size: 0.85rem;
  876. vertical-align: text-bottom;
  877. letter-spacing: 0;
  878. }
  879. .sidebar .events .event li:last-child {
  880. -webkit-box-flex: 3;
  881. -ms-flex: 3;
  882. flex: 3;
  883. }
  884. .sidebar-225px .events .event li:last-child,
  885. .sidebar-250px .events .event li:last-child {
  886. -webkit-box-flex: 2.5;
  887. -ms-flex: 2.5;
  888. flex: 2.5;
  889. }
  890. .sidebar .events .event li:last-child .event-info {
  891. padding: 0 15px;
  892. border: 1px solid {color:Border Color};
  893. border-left: none;
  894. }
  895. .sidebar-225px .events .event li:last-child .event-info {
  896. padding: 0 10px;
  897. }
  898. .sidebar-250px .events .event li:last-child .event-info {
  899. padding: 0 12.5px;
  900. }
  901. .sidebar .events .event li:last-child .event-info .title {
  902. font-size: 1.125rem;
  903. font-weight: 600;
  904. line-height: 1.1em;
  905. }
  906. .sidebar .events .event li:last-child .event-info .title + .detail {
  907. margin-top: 5px;
  908. }
  909. .sidebar .events .event li:last-child .event-info .detail {
  910. font-size: 0.75rem;
  911. line-height: 1.1em;
  912. }
  913.  
  914. /* projects */
  915. .sidebar .projects .project + .project {
  916. margin-top: 20px;
  917. }
  918. .sidebar .projects .project .project-head .pic img {
  919. display: block;
  920. }
  921. .sidebar .projects .project .project-head .pic + .name {
  922. border-top: none;
  923. }
  924. .sidebar .projects .project .project-head .name {
  925. background-image: linear-gradient(135deg, var(--gradient));
  926. background-size: 101%;
  927. padding: 10px 15px;
  928. color: {color:Post Background};
  929. }
  930. .sidebar .projects .project .project-head .name .title {
  931. display: inline-block;
  932. margin: 0;
  933. font-size: 1.15rem;
  934. font-weight: 600;
  935. line-height: 1.1em;
  936. }
  937. .sidebar .projects .project .project-head + .project-content {
  938. border-top: none;
  939. }
  940. .sidebar .projects .project .project-content {
  941. padding: 15px;
  942. border: 1px solid {color:Border Color};
  943. }
  944. .sidebar .projects .project .project-content ul + ul {
  945. margin-top: 10px;
  946. }
  947. .sidebar .projects .project .project-content ul.info li {
  948. display: -webkit-box;
  949. display: -webkit-flex;
  950. display: -ms-flexbox;
  951. display: flex;
  952. -webkit-box-pack: justify;
  953. -ms-flex-pack: justify;
  954. justify-content: space-between;
  955. -webkit-box-align: start;
  956. -ms-flex-align: start;
  957. align-items: flex-start;
  958. border-bottom: 1px solid {color:Border Color};
  959. }
  960. .sidebar .projects .project .project-content ul.info li + li {
  961. margin-top: 10px;
  962. }
  963. .sidebar .projects .project .project-content ul.info li span {
  964. display: block;
  965. }
  966. .sidebar .projects .project .project-content ul.info li span.tt {
  967. padding: 0 0.75em;
  968. border: 1px solid {color:Border Color};
  969. border-bottom: none;
  970. font-size: 0.7rem;
  971. font-weight: 600;
  972. line-height: 1.5rem;
  973. text-transform: uppercase;
  974. letter-spacing: 0.1em;
  975. }
  976. .sidebar .projects .project .project-content ul.info li span.txt {
  977. font-size: 0.85rem;
  978. line-height: 1.5rem;
  979. }
  980. .sidebar .projects .project .project-content ul.links {
  981. display: -webkit-box;
  982. display: -webkit-flex;
  983. display: -ms-flexbox;
  984. display: flex;
  985. -ms-flex-wrap: wrap;
  986. flex-wrap: wrap;
  987. }
  988. .sidebar .projects .project .project-content ul.links li {
  989. -webkit-box-flex: 1;
  990. -ms-flex: 1;
  991. flex: 1;
  992. min-width: calc(100%/3 - 10px/3);
  993. margin-top: 5px;
  994. background-image: linear-gradient(135deg, var(--gradient));
  995. background-size: 101%;
  996. }
  997. .sidebar .projects .project .project-content ul.links li + li {
  998. margin-left: 5px;
  999. }
  1000. .sidebar:not(.sidebar-225px) .projects .project .project-content ul.links li:nth-child(-n+3) {
  1001. margin-top: 0;
  1002. }
  1003. .sidebarr:not(.sidebar-225px) .projects .project .project-content ul.links li + li:nth-child(3n+1) {
  1004. margin-left: 0;
  1005. }
  1006. .sidebar-225px .projects .project .project-content ul.links li {
  1007. min-width: calc(50% - 5px/2);
  1008. }
  1009. .sidebar-225px .projects .project .project-content ul.links li:nth-child(-n+2) {
  1010. margin-top: 0;
  1011. }
  1012. .sidebar-225px .projects .project .project-content ul.links li + li:nth-child(2n+1) {
  1013. margin-left: 0;
  1014. }
  1015. .sidebar .projects .project .project-content ul.links li a {
  1016. display: -webkit-box;
  1017. display: -webkit-flex;
  1018. display: -ms-flexbox;
  1019. display: flex;
  1020. -webkit-box-orient: vertical;
  1021. -webkit-box-direction: normal;
  1022. -ms-flex-direction: column;
  1023. flex-direction: column;
  1024. -webkit-box-pack: center;
  1025. -ms-flex-pack: center;
  1026. justify-content: center;
  1027. -webkit-box-align: center;
  1028. -ms-flex-align: center;
  1029. align-items: center;
  1030. height: 100%;
  1031. padding: 7.5px 10px;
  1032. background-color: {color:Post Background};
  1033. border: 1px solid {color:Border Color};
  1034. font-size: 0.85rem;
  1035. text-align: center;
  1036. transition-property: color, background-color, border-color;
  1037. }
  1038. .sidebar .projects .project .project-content ul.links li a:hover {
  1039. color: {color:Banner Text Color};
  1040. background-color: transparent;
  1041. border-color: transparent;
  1042. }
  1043.  
  1044. /* members */
  1045. .sidebar .members ul li {
  1046. background-image: linear-gradient(135deg, var(--gradient));
  1047. background-size: 101%;
  1048. }
  1049. .sidebar .members ul li + li {
  1050. margin-top: 5px;
  1051. }
  1052. .sidebar .members ul li a {
  1053. display: -webkit-box;
  1054. display: -webkit-flex;
  1055. display: -ms-flexbox;
  1056. display: flex;
  1057. }
  1058. .sidebar .members ul li a > div {
  1059. position: relative;
  1060. }
  1061. .sidebar .members ul li a > div > * {
  1062. position: absolute;
  1063. top: 0;
  1064. left: 0;
  1065. right: 0;
  1066. bottom: 0;
  1067. }
  1068. .sidebar .members ul li a .member-avatar {
  1069. -webkit-box-flex: 1;
  1070. -ms-flex: 1;
  1071. flex: 1;
  1072. background-image: linear-gradient(135deg, var(--gradient));
  1073. background-size: 101%;
  1074. }
  1075. .sidebar .members ul li a .member-avatar:before {
  1076. content: '';
  1077. display: block;
  1078. padding-bottom: 100%;
  1079. }
  1080. .sidebar .members ul li a .member-avatar span {
  1081. display: block;
  1082. background-size: cover;
  1083. -webkit-filter: grayscale(100%);
  1084. -ms-filter: grayscale(100%);
  1085. filter: grayscale(100%);
  1086. mix-blend-mode: overlay;
  1087. }
  1088. .sidebar .members ul li a .member-avatar img {
  1089. display: block !important;
  1090. opacity: 0;
  1091. transition: opacity 0.3s ease-in-out;
  1092. }
  1093. .sidebar .members ul li a .member-avatar + .member-info {
  1094. border-left: none;
  1095. }
  1096. .sidebar .members ul li a .member-info {
  1097. -webkit-box-flex: 3.5;
  1098. -ms-flex: 3.5;
  1099. flex: 3.5;
  1100. background-color: {color:Post Background};
  1101. border: 1px solid {color:Border Color};
  1102. transition-property: color, background-color, border-color;
  1103. transition-duration: 0.3s;
  1104. transition-timing-function: ease-in-out;
  1105. }
  1106. .sidebar-225px .members ul li a .member-info {
  1107. -webkit-box-flex: 2.5;
  1108. -ms-flex: 2.5;
  1109. flex: 2.5;
  1110. }
  1111. .sidebar-250px .members ul li a .member-info {
  1112. -webkit-box-flex: 3;
  1113. -ms-flex: 3;
  1114. flex: 3;
  1115. }
  1116. .sidebar .members ul li a .member-info dl {
  1117. display: -webkit-box;
  1118. display: -webkit-flex;
  1119. display: -ms-flexbox;
  1120. display: flex;
  1121. -webkit-box-orient: vertical;
  1122. -webkit-box-direction: normal;
  1123. -ms-flex-direction: column;
  1124. flex-direction: column;
  1125. -webkit-box-pack: center;
  1126. -ms-flex-pack: center;
  1127. justify-content: center;
  1128. -webkit-box-align: start;
  1129. -ms-flex-align: start;
  1130. align-items: flex-start;
  1131. margin: 0;
  1132. padding: 0 15px;
  1133. }
  1134. .sidebar-225px .members ul li a .member-info dl {
  1135. padding: 0 10px;
  1136. }
  1137. .sidebar-250px .members ul li a .member-info dl {
  1138. padding: 0 12.5px;
  1139. }
  1140. .sidebar .members ul li a .member-info dl dt {
  1141. display: block;
  1142. font-size: 1.05rem;
  1143. font-weight: 600;
  1144. line-height: 0.85em;
  1145. }
  1146. .sidebar .members ul li a .member-info dl dt + dd {
  1147. margin-top: 5px;
  1148. }
  1149. .sidebar .members ul li a .member-info dl dd {
  1150. margin: 0;
  1151. font-size: 0.85rem;
  1152. line-height: 1.15em;
  1153. }
  1154. .sidebar .members ul li a:hover .member-avatar img {
  1155. opacity: 1;
  1156. }
  1157. .sidebar .members ul li a:hover .member-info {
  1158. color: {color:Banner Text Color};
  1159. background-color: transparent;
  1160. border-color: transparent;
  1161. }
  1162.  
  1163. /* affiliates */
  1164. .sidebar .affiliates ul {
  1165. display: -webkit-box;
  1166. display: -webkit-flex;
  1167. display: -ms-flexbox;
  1168. display: flex;
  1169. -ms-flex-wrap: wrap;
  1170. flex-wrap: wrap;
  1171. }
  1172. .sidebar .affiliates ul li {
  1173. width: calc(25% - 15px/4);
  1174. margin: 5px 5px 0 0;
  1175. background-image: linear-gradient(135deg, var(--gradient));
  1176. background-size: 101%;
  1177. }
  1178. .sidebar .affiliates ul li:nth-child(-n+4) {
  1179. margin-top: 0;
  1180. }
  1181. .sidebar .affiliates ul li:nth-child(4n+0) {
  1182. margin-right: 0;
  1183. }
  1184. .sidebar .affiliates ul li a {
  1185. position: relative;
  1186. display: block;
  1187. }
  1188. .sidebar .affiliates ul li a span {
  1189. position: absolute;
  1190. top: 0;
  1191. left: 0;
  1192. right: 0;
  1193. bottom: 0;
  1194. display: block;
  1195. background-size: cover;
  1196. -webkit-filter: grayscale(100%);
  1197. -ms-filter: grayscale(100%);
  1198. filter: grayscale(100%);
  1199. mix-blend-mode: overlay;
  1200. }
  1201. .sidebar .affiliates ul li a img {
  1202. position: relative;
  1203. z-index: 1;
  1204. display: block;
  1205. opacity: 0;
  1206. transition: opacity 0.3s ease-in-out;
  1207. }
  1208. .sidebar .affiliates ul li a:hover img {
  1209. opacity: 1;
  1210. }
  1211.  
  1212. /* site info */
  1213. .sidebar .siteinfo dl {
  1214. margin: 0;
  1215. }
  1216. .sidebar .siteinfo dl dt {
  1217. background-image: linear-gradient(135deg, var(--gradient));
  1218. background-size: 101%;
  1219. float: left;
  1220. margin-right: 5px;
  1221. padding: 0 5px;
  1222. font-size: 0.7rem;
  1223. line-height: 1.25rem;
  1224. text-transform: uppercase;
  1225. letter-spacing: 0.05em;
  1226. color: {color:Banner Text Color};
  1227. }
  1228. .sidebar .siteinfo dl dd {
  1229. margin: 0 0 5px;
  1230. font-size: 0.85rem;
  1231. line-height: 1.25rem;
  1232. }
  1233. .sidebar .siteinfo dl dd:last-child {
  1234. margin-bottom: 0;
  1235. }
  1236.  
  1237. /* -------------------------------------------
  1238. * posts
  1239. * ------------------------------------------ */
  1240.  
  1241. /* basic */
  1242. .posts .post {
  1243. overflow: hidden;
  1244. background-color: {color:Post Background};
  1245. color: {color:Text Color};
  1246. }
  1247. .posts .post + .post {
  1248. margin-top: 50px;
  1249. }
  1250. .post .post-head,
  1251. .post .post-title,
  1252. .post .post-body,
  1253. .post .post-foot {
  1254. padding: 20px;
  1255. }
  1256.  
  1257. /* post head */
  1258. .post .post-head {
  1259. display: -webkit-box;
  1260. display: -webkit-flex;
  1261. display: -ms-flexbox;
  1262. display: flex;
  1263. -webkit-box-pack: justify;
  1264. -ms-flex-pack: justify;
  1265. justify-content: space-between;
  1266. -webkit-box-align: center;
  1267. -ms-flex-align: center;
  1268. align-items: center;
  1269. border-bottom: 1px solid {color:Border Color};
  1270. }
  1271. .post .post-head ul {
  1272. display: -webkit-box;
  1273. display: -webkit-flex;
  1274. display: -ms-flexbox;
  1275. display: flex;
  1276. -webkit-box-align: center;
  1277. -ms-flex-align: center;
  1278. align-items: center;
  1279. }
  1280. .post .post-head ul.left {
  1281. font-size: 11px;
  1282. letter-spacing: 0.01em;
  1283. }
  1284. .post .post-head ul.left li+li {
  1285. margin-left: 10px;
  1286. }
  1287. .post .post-head ul.left li svg {
  1288. display: inline-block;
  1289. vertical-align: -2px;
  1290. margin-right: 5px;
  1291. width: 12px;
  1292. height: 12px;
  1293. stroke: url("#gradient");
  1294. }
  1295. .post .post-head ul.left li .divider {
  1296. display: block;
  1297. width: 3px;
  1298. height: 3px;
  1299. border-radius: 50%;
  1300. background-image: linear-gradient(135deg, var(--gradient));
  1301. background-size: 101%;
  1302. }
  1303. .post .post-head ul.right li + li {
  1304. margin-left: 5px;
  1305. }
  1306. .post .post-head ul.right li a {
  1307. display: block;
  1308. width: 15px;
  1309. height: 15px;
  1310. overflow: hidden;
  1311. border-radius: 3px;
  1312. }
  1313.  
  1314. /* post foot */
  1315. .post .post-foot {
  1316. border-top: 1px solid {color:Border Color};
  1317. }
  1318. .post .post-foot .top {
  1319. font-size: 10px;
  1320. line-height: 1.1em;
  1321. letter-spacing: 0.05em;
  1322. }
  1323. .post .post-foot .top ul {
  1324. margin-top: -10px;
  1325. }
  1326. .post .post-foot .top ul li {
  1327. display: inline-block;
  1328. margin: 10px 10px 0 0;
  1329. overflow: hidden;
  1330. border-radius: 3px;
  1331. background-image: linear-gradient(135deg, var(--gradient));
  1332. background-size: 101%;
  1333. }
  1334. .post .post-foot .top ul li a {
  1335. display: block;
  1336. padding: 5px 10px;
  1337. background-color: {color:Post Background};
  1338. border: 1px solid {color:Border Color};
  1339. border-radius: 3px;
  1340. transition-property: color, background-color, border-color;
  1341. }
  1342. .post .post-foot .top ul li a:hover {
  1343. color: {color:Post Background};
  1344. background-color: transparent;
  1345. border-color: transparent;
  1346. }
  1347. .post .post-foot .top + .bottom {
  1348. margin-top: 15px;
  1349. }
  1350. .post .post-foot .bottom {
  1351. display: -webkit-box;
  1352. display: -webkit-flex;
  1353. display: -ms-flexbox;
  1354. display: flex;
  1355. -webkit-box-pack: justify;
  1356. -ms-flex-pack: justify;
  1357. justify-content: space-between;
  1358. -webkit-box-align: center;
  1359. -ms-flex-align: center;
  1360. align-items: center;
  1361. }
  1362. .post .post-foot .bottom .left a {
  1363. display: block;
  1364. font-size: 14px;
  1365. font-weight: 600;
  1366. }
  1367. .post .post-foot .bottom .left a:after {
  1368. content: 'notes';
  1369. font-size: 12px;
  1370. margin-left: 3px;
  1371. }
  1372. .post .post-foot .bottom .left a.note-1:after {
  1373. content: 'note';
  1374. }
  1375. .post .post-foot .bottom .right {
  1376. display: -webkit-box;
  1377. display: -webkit-flex;
  1378. display: -ms-flexbox;
  1379. display: flex;
  1380. -webkit-box-pack: end;
  1381. -ms-flex-pack: end;
  1382. justify-content: flex-end;
  1383. -webkit-box-align: center;
  1384. -ms-flex-align: center;
  1385. align-items: center;
  1386. }
  1387. .post .post-foot .bottom .right li + li {
  1388. margin-left: 10px;
  1389. }
  1390. .post .post-foot .bottom .right li a,
  1391. .post .post-foot .bottom .right li span,
  1392. .post .post-foot .bottom .right li svg {
  1393. display: block;
  1394. }
  1395. .post .post-foot .bottom .right li svg {
  1396. width: 14px;
  1397. height: 14px;
  1398. }
  1399. .post .post-foot .bottom .right li.like {
  1400. position: relative;
  1401. }
  1402. .post .post-foot .bottom .right li.like .like_button {
  1403. position: absolute;
  1404. top: 0;
  1405. left: 0;
  1406. width: 14px;
  1407. height: 14px;
  1408. z-index: 5;
  1409. overflow: hidden;
  1410. opacity: 0;
  1411. }
  1412. .post .post-foot .bottom .right li.like .like_button.liked + .custom-like svg {
  1413. fill: #ff5550;
  1414. stroke: #ff5550;
  1415. }
  1416.  
  1417. /* post media */
  1418. .post .post-content .post-media img {
  1419. display: block;
  1420. }
  1421. .post .post-content .post-media .width_fix iframe {
  1422. display: block;
  1423. width: {select:Post Width} !important;
  1424. margin: 0;
  1425. }
  1426. .post .post-content .post-media .width_fix iframe.tumblr_audio_player {
  1427. height: 85px;
  1428. }
  1429.  
  1430. /* link post */
  1431. .post .post-media .link-button {
  1432. word-break: break-word;
  1433. overflow: hidden;
  1434. display: block;
  1435. position: relative;
  1436. text-decoration: none;
  1437. }
  1438. .post .post-media .link-button .thumbnail img {
  1439. display: block;
  1440. margin: 0px;
  1441. }
  1442. .post .post-media .link-button .thumbnail:after {
  1443. background-image: linear-gradient(rgba(0, 0, 0, 0.439216), transparent 50%);
  1444. content: '';
  1445. display: block;
  1446. position: absolute;
  1447. top: 0;
  1448. left: 0;
  1449. right: 0;
  1450. bottom: 0;
  1451. }
  1452. .post .post-media .publisher-container {
  1453. margin-bottom: 4px;
  1454. display: block;
  1455. font-size: 13px;
  1456. line-height: 1em;
  1457. font-weight: 700;
  1458. word-break: break-all;
  1459. }
  1460. .post .post-media .publisher-container .publisher {
  1461. font-size: 12px;
  1462. font-weight: 400;
  1463. line-height: 1em;
  1464. display: inline-block;
  1465. margin: 0px;
  1466. letter-spacing: 0.05em;
  1467. }
  1468. .post .post-media .publisher-container.if-thumbnail {
  1469. position: absolute;
  1470. top: 15px;
  1471. left: 20px;
  1472. right: 20px;
  1473. }
  1474. .post .post-media .publisher-container.if-thumbnail .publisher {
  1475. color: {color:Post Background};
  1476. }
  1477. .post .post-media .info-container {
  1478. padding: 15px 20px;
  1479. overflow: hidden;
  1480. background-color: #fafafa;
  1481. color: {color:Text Color};
  1482. }
  1483. .post .post-media .info-container .title {
  1484. display: block;
  1485. font-size: 24px;
  1486. font-weight: 700;
  1487. line-height: 1.1em;
  1488. text-align: left;
  1489. }
  1490. .post .post-media .info-container .title:after {
  1491. font-family: var(--icons);
  1492. content: '\f105';
  1493. font-size: 16px;
  1494. display: inline;
  1495. margin-left: 5px;
  1496. vertical-align: 1px;
  1497. }
  1498. .post .post-media .info-container .excerpt {
  1499. display: block;
  1500. margin-top: 5px;
  1501. font-size: 14px;
  1502. line-height: 1.5em;
  1503. }
  1504. .post .post-media .info-container .author {
  1505. margin-top: 5px;
  1506. display: block;
  1507. font-size: 12px;
  1508. font-weight: 400;
  1509. letter-spacing: 0.01em;
  1510. line-height: 1.25em;
  1511. opacity: 0.5;
  1512. }
  1513.  
  1514. /* post title */
  1515. .post .post-content .post-container .post-title + .post-body {
  1516. margin-top: -20px;
  1517. }
  1518. .post .post-title .title {
  1519. margin: 0;
  1520. font-size: 1.5em;
  1521. font-weight: 600;
  1522. line-height: 1.1em;
  1523. }
  1524.  
  1525. /* quote */
  1526. .post .post-title .quote {
  1527. font-family: var(--serif);
  1528. font-size: 1.25em;
  1529. line-height: 1.35em;
  1530. }
  1531. .post .post-title .quote:before,
  1532. .post .post-title .quote:after {
  1533. font-size: 0.85em;
  1534. }
  1535. .post .post-title .quote:before {
  1536. content: '\201C';
  1537. margin-right: 0.35rem;
  1538. }
  1539. .post .post-title .quote:after {
  1540. content: '\201D';
  1541. margin-left: 0.35rem;
  1542. }
  1543.  
  1544. /* caption */
  1545. .post .post-body .caption + .caption {
  1546. margin: 20px -20px 0;
  1547. padding: 20px 20px 0;
  1548. border-top: 1px solid {color:Border Color};
  1549. }
  1550. .post .post-body .caption .reblog-head {
  1551. display: -webkit-box;
  1552. display: -webkit-flex;
  1553. display: -ms-flexbox;
  1554. display: flex;
  1555. -webkit-box-align: center;
  1556. -ms-flex-align: center;
  1557. align-items: center;
  1558. }
  1559. .post .post-body .caption .reblog-head .reblog-avatar {
  1560. width: 25px;
  1561. height: 25px;
  1562. border-radius: 5px;
  1563. overflow: hidden;
  1564. margin-right: 10px;
  1565. }
  1566. .post .post-body .caption .reblog-head .reblog-avatar img {
  1567. width: 100%;
  1568. }
  1569. .post .post-body .caption .reblog-head .reblog-username {
  1570. color: {color:Text Color};
  1571. font-size: 0.95em;
  1572. font-weight: 600;
  1573. padding: 0;
  1574. background: none;
  1575. }
  1576. .post .post-body .caption .reblog-content {
  1577. margin-top: 10px;
  1578. }
  1579.  
  1580. /* figure */
  1581. .post .post-body .caption figure.tmblr-full:last-child {
  1582. margin-bottom: -20px !important;
  1583. }
  1584.  
  1585. /* quote source */
  1586. .post .post-body .caption .quote-source {
  1587. margin-top: -10px !important;
  1588. }
  1589. .post .post-body .caption .quote-source:before {
  1590. content: '\2014';
  1591. margin-right: 5px;
  1592. }
  1593.  
  1594. /* chat */
  1595. .post .post-body ul.chat {
  1596. padding: 0;
  1597. border: 1px solid {color:Border Color};
  1598. border-top: none;
  1599. }
  1600. .post .post-body ul.chat li {
  1601. display: -webkit-box;
  1602. display: -webkit-flex;
  1603. display: -ms-flexbox;
  1604. display: flex;
  1605. border-top: 1px solid {color:Border Color};
  1606. line-height: 1.15em;
  1607. }
  1608. .post .post-body ul.chat li span {
  1609. display: block;
  1610. padding: 10px;
  1611. }
  1612. .post .post-body ul.chat li .label {
  1613. -webkit-flex-shrink: 0;
  1614. -moz-flex-shrink: 0;
  1615. -ms-flex-negative: 0;
  1616. flex-shrink: 0;
  1617. border-right: 1px solid {color:Border Color};
  1618. font-weight: 600;
  1619. }
  1620.  
  1621. /* ask */
  1622. .post .post-body .ask,
  1623. .post .post-body .answer {
  1624. position: relative;
  1625. padding: 30px 15px 15px;
  1626. border-radius: 5px;
  1627. }
  1628. .post .post-body .ask .asker,
  1629. .post .post-body .ask .answerer,
  1630. .post .post-body .answer .asker,
  1631. .post .post-body .answer .answerer {
  1632. padding-bottom: 15px;
  1633. }
  1634. .post .post-body .asker-avatar,
  1635. .post .post-body .answerer-avatar {
  1636. position: absolute;
  1637. top: -25px;
  1638. width: 50px;
  1639. height: 50px;
  1640. overflow: hidden;
  1641. padding: 5px;
  1642. border-radius: 50%;
  1643. }
  1644. .post .post-body .asker-avatar:before,
  1645. .post .post-body .answerer-avatar:before {
  1646. content: '';
  1647. position: absolute;
  1648. top: 0;
  1649. left: 0;
  1650. right: 0;
  1651. bottom: 0;
  1652. display: block;
  1653. }
  1654. .post .post-body .asker-avatar img,
  1655. .post .post-body .answerer-avatar img {
  1656. position: relative;
  1657. display: block;
  1658. width: 100%;
  1659. border-radius: 50%;
  1660. }
  1661. .post .post-body .asker-name,
  1662. .post .post-body .answerer-name {
  1663. margin-top: 10px;
  1664. font-size: 1.15em;
  1665. font-weight: 600;
  1666. line-height: 1em;
  1667. }
  1668. .post .post-body .asker-name:after,
  1669. .post .post-body .answerer-name:after {
  1670. font-size: 0.85em;
  1671. font-weight: 400;
  1672. opacity: 0.7;
  1673. margin-left: 0.35em
  1674. }
  1675. .post .post-body .asker-name a,
  1676. .post .post-body .answerer-name a {
  1677. background: none;
  1678. padding: 0;
  1679. border: none;
  1680. color: inherit;
  1681. }
  1682. .post .post-body .asker-question,
  1683. .post .post-body .answerer-answer {
  1684. margin-top: 10px;
  1685. }
  1686. .post .post-body .ask + .caption,
  1687. .post .post-body .answer + .caption {
  1688. margin-top: 20px;
  1689. }
  1690. .post .post-body .ask {
  1691. margin-top: 25px !important;
  1692. background-color: #f2f2f2;
  1693. }
  1694. .post .post-body .ask .asker {
  1695. border-bottom: 1px solid #e5e5e5;
  1696. }
  1697. .post .post-body .ask .asker .asker-avatar:before {
  1698. background-image: linear-gradient(135deg, {color:Color One} 50%, {color:Color Two} 50%);
  1699. }
  1700. .post .post-body .ask .asker .asker-name:after {
  1701. content: 'sent a message';
  1702. }
  1703. .post .post-body .answer {
  1704. margin-top: 40px;
  1705. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  1706. color: #fff;
  1707. }
  1708. .post .post-body .answer .answerer {
  1709. border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  1710. }
  1711. .post .post-body .answer .answerer .answerer-avatar:before {
  1712. background-image: linear-gradient(135deg, #e5e5e5 50%, #f2f2f2 50%);
  1713. }
  1714. .post .post-body .answer .answerer .answerer-name:after {
  1715. content: 'answered';
  1716. }
  1717. .post .post-body .answer .answerer-answer a {
  1718. background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.75) 0);
  1719. color: {color:Banner Text Color};
  1720. }
  1721. .post .post-body .answer .answerer-answer a:hover {
  1722. color: rgba(255, 255, 255, 0.85);
  1723. }
  1724. .post .post-body .answer .answerer-answer figure.tmblr-full {
  1725. margin-left: -15px;
  1726. margin-right: -15px;
  1727. }
  1728.  
  1729. /* post notes*/
  1730. .posts .post-notes {
  1731. margin-top: 25px;
  1732. padding: 20px;
  1733. background-color: {color:Post Background};
  1734. border-radius: 5px;
  1735. overflow: hidden;
  1736. color: {color:Text Color};
  1737. }
  1738. .posts .post-notes ol.notes {
  1739. margin: 0;
  1740. padding: 0;
  1741. list-style-type: none;
  1742. font-size: 0.85em;
  1743. line-height: 1.5em;
  1744. letter-spacing: 0.05em;
  1745. }
  1746. .posts .post-notes ol.notes li.note + li.note {
  1747. margin-top: 15px;
  1748. }
  1749. .posts .post-notes ol.notes li.note img.avatar {
  1750. display: inline-block;
  1751. vertical-align: -6px;
  1752. margin-right: 10px;
  1753. width: 20px;
  1754. height: 20px;
  1755. border-radius: 50%;
  1756. }
  1757. .posts .post-notes ol.notes li.note .action a {
  1758. font-weight: 600;
  1759. }
  1760. .posts .post-notes ol.notes li.note blockquote {
  1761. border-left: 2px solid {color:Color Two};
  1762. margin: 1em 0 0 30px;
  1763. padding-left: 15px;
  1764. }
  1765.  
  1766. /* -------------------------------------------
  1767. * CustomCss
  1768. * ------------------------------------------ */
  1769.  
  1770. {CustomCss}
  1771.  
  1772. </style>
  1773. </head>
  1774. <body class="{select:Tumblr Controls Style}">
  1775. <div class="wrapper">
  1776. <header id="header">
  1777. <nav class="navbar">
  1778. <div class="navbar-top">
  1779. <div class="search container">
  1780. <form action="/search" method="get">
  1781. <div class="search-bar">
  1782. <input type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
  1783. <button type="submit"><i data-feather="search"></i></button>
  1784. </div>
  1785. </form>
  1786. </div>
  1787. </div>
  1788. <div class="navbar-main">
  1789. <div class="container">
  1790. <h1 class="title title-style">{block:ifnotNavbarTitle}{Title}{/block:ifnotNavbarTitle}{block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}</h1>
  1791. <ul class="menu noneStyle">
  1792. {block:ifLink1Title}
  1793. <li>
  1794. <a href="{text:Link 1 Url}">{text:Link 1 Title}</a>
  1795. </li>
  1796. {/block:ifLink1Title}
  1797. {block:ifLink2Title}
  1798. <li>
  1799. <a href="{text:Link 2 Url}">{text:Link 2 Title}</a>
  1800. </li>
  1801. {/block:ifLink2Title}
  1802. {block:ifLink3Title}
  1803. <li>
  1804. <a href="{text:Link 3 Url}">{text:Link 3 Title}</a>
  1805. </li>
  1806. {/block:ifLink3Title}
  1807. {block:ifLink4Title}
  1808. <li>
  1809. <a href="{text:Link 4 Url}">{text:Link 4 Title}</a>
  1810. </li>
  1811. {/block:ifLink4Title}
  1812. {block:ifLink5Title}
  1813. <li>
  1814. <a href="{text:Link 5 Url}">{text:Link 5 Title}</a>
  1815. </li>
  1816. {/block:ifLink5Title}
  1817. <!--
  1818.  
  1819. [ Dropdown Submenu Examples ]
  1820.  
  1821. If your dropdown title is a link:
  1822.  
  1823. <li>
  1824. <a href="#">Dropdown Title</a>
  1825. <ul class="submenu noneStyle">
  1826. <li><a href="#">Link 1</a></li>
  1827. <li><a href="#">Link 2</a></li>
  1828. </ul>
  1829. </li>
  1830.  
  1831. --
  1832.  
  1833. If your dropdown title is NOT a link:
  1834.  
  1835. <li>
  1836. <span>Dropdown Title</span>
  1837. <ul class="submenu noneStyle">
  1838. <li><a href="#">Link 1</a></li>
  1839. <li><a href="#">Link 2</a></li>
  1840. </ul>
  1841. </li>
  1842.  
  1843. -->
  1844. </ul>
  1845. </div>
  1846. </div>
  1847. </nav>
  1848. {block:ifShowBanner}<div class="banner {block:HomePage}page-{CurrentPage}{/block:HomePage}">
  1849. <div class="banner-img home-banner imgFill">
  1850. <img src="{image:Home Banner}" alt="" />
  1851. </div>
  1852. <div class="banner-img page-banner imgFill">
  1853. <img src="{image:Page Banner}" alt="" />
  1854. </div>
  1855. {block:ifShowBannerText}<div class="banner-text container">
  1856. <h1 class="title">{block:ifnotBannerTitle}{Title}{/block:ifnotBannerTitle}{block:ifBannerTitle}{text:Banner Title}{/block:ifBannerTitle}</h1>
  1857. <span class="subtitle">{block:ifnotBannerSubtitle}{Name}.tumblr.com{/block:ifnotBannerSubtitle}{block:ifBannerSubtitle}{text:Banner Subtitle}{/block:ifBannerSubtitle}</span>
  1858. <!-- start of banner links -->
  1859. <ul class="links noneStyle">
  1860. <li>
  1861. <a href="#" title="Facebook">
  1862. <i data-feather="facebook"></i>
  1863. </a>
  1864. </li>
  1865. <li>
  1866. <a href="#" title="Twitter">
  1867. <i data-feather="twitter"></i>
  1868. </a>
  1869. </li>
  1870. <li>
  1871. <a href="#" title="Instagram">
  1872. <i data-feather="instagram"></i>
  1873. </a>
  1874. </li>
  1875. <li>
  1876. <a href="#" title="YouTube">
  1877. <i data-feather="youtube"></i>
  1878. </a>
  1879. </li>
  1880. </ul>
  1881. <!-- end of banner links -->
  1882. </div>{/block:ifShowBannerText}
  1883. </div>{block:ifShowBanner}
  1884. </header>
  1885. <main id="main">
  1886. <div class="container clearfix">
  1887. <div class="sidebar sidebar-{select:Sidebar Width}">
  1888. <div class="sidebar-inner">
  1889.  
  1890. <div class="section">
  1891. <div class="section-head">
  1892. <div class="icon"><i data-feather="home"></i></div>
  1893. <h3 class="title">Intro</h3>
  1894. </div>
  1895. <div class="section-content intro">
  1896. {block:ifSidebarIntroImage}<div class="intro-img">
  1897. <img src="{image:Sidebar Intro}" alt="" />
  1898. </div>{/block:ifSidebarIntroImage}
  1899. {block:Description}<div class="intro-text post-style">
  1900. {Description}
  1901. </div>{/block:Description}
  1902. </div><!-- //section-content -->
  1903. </div><!-- //section -->
  1904.  
  1905. <div class="section">
  1906. <div class="section-head">
  1907. <div class="icon"><i data-feather="link"></i></div>
  1908. <h3 class="title">Links</h3>
  1909. </div>
  1910. <div class="section-content sidelinks">
  1911. <!-- start of grid links -->
  1912. <ul class="grid noneStyle">
  1913. <li>
  1914. <a href="#" title="Link Title">
  1915. <i data-feather="link"></i>
  1916. </a>
  1917. </li>
  1918. <li>
  1919. <a href="#" title="Link Title">
  1920. <i data-feather="link"></i>
  1921. </a>
  1922. </li>
  1923. </ul>
  1924. <!-- end of grid links -->
  1925. <!-- start of list links -->
  1926. <ul class="list noneStyle">
  1927. <li>
  1928. <a href="#">
  1929. <i data-feather="menu"></i>Link Title
  1930. </a>
  1931. </li>
  1932. <li>
  1933. <a href="#">
  1934. <i data-feather="menu"></i>Link Title
  1935. </a>
  1936. </li>
  1937. </ul>
  1938. <!-- end of list links -->
  1939. </div><!-- //section-content -->
  1940. </div><!-- //section -->
  1941.  
  1942. <div class="section">
  1943. <div class="section-head">
  1944. <div class="icon"><i data-feather="calendar"></i></div>
  1945. <h3 class="title">Events</h3>
  1946. </div>
  1947. <div class="section-content events">
  1948. <!-- start of an event -->
  1949. <ul class="event noneStyle">
  1950. <li>
  1951. <div class="event-date">
  1952. <span class="month">feb 2019</span>
  1953. <span class="day">20<sub>th</sub></span>
  1954. </div>
  1955. </li>
  1956. <li>
  1957. <div class="event-info">
  1958. <span class="title">Event title</span>
  1959. <span class="detail">Event description</span>
  1960. </div>
  1961. </li>
  1962. </ul>
  1963. <!-- end of an event -->
  1964. </div><!-- //section-content -->
  1965. </div><!-- //section -->
  1966.  
  1967. <div class="section">
  1968. <div class="section-head">
  1969. <div class="icon"><i data-feather="briefcase"></i></div>
  1970. <h3 class="title">Projects</h3>
  1971. </div>
  1972. <div class="section-content projects">
  1973. <!-- start of a project-->
  1974. <div class="project">
  1975. <div class="project-head">
  1976. <div class="pic">
  1977. <img src="project.png" alt="" />
  1978. </div>
  1979. <div class="name">
  1980. <h4 class="title">Poject Title</h4>
  1981. </div>
  1982. </div>
  1983. <div class="project-content">
  1984. <ul class="info noneStyle">
  1985. <li>
  1986. <span class="tt">title</span>
  1987. <span class="txt">text</span>
  1988. </li>
  1989. <li>
  1990. <span class="tt">title</span>
  1991. <span class="txt">text</span>
  1992. </li>
  1993. </ul>
  1994. <ul class="links noneStyle">
  1995. <li><a href="#">Link 1</a></li>
  1996. <li><a href="#">Link 2</a></li>
  1997. <li><a href="#">Link 3</a></li>
  1998. </ul>
  1999. </div>
  2000. </div>
  2001. <!-- end of a project -->
  2002. </div><!-- //section-content -->
  2003. </div><!-- //section -->
  2004.  
  2005. <div class="section">
  2006. <div class="section-head">
  2007. <div class="icon"><i data-feather="users"></i></div>
  2008. <h3 class="title">Members</h3>
  2009. </div>
  2010. <div class="section-content members">
  2011. <ul class="noneStyle">
  2012. <!-- If you wanna edit members manually, use this code below
  2013. <li>
  2014. <a href="#" target="_blank">
  2015. <div class="member-avatar">
  2016. <img src="avatar.png" alt="" />
  2017. </div>
  2018. <div class="member-info">
  2019. <dl>
  2020. <dt>username</dt>
  2021. <dd>blog title</dd>
  2022. </dl>
  2023. </div>
  2024. </a>
  2025. </li>
  2026. -->
  2027. {block:GroupMembers}
  2028. {block:GroupMember}<li>
  2029. <a href="{GroupMemberURL}" target="_blank">
  2030. <div class="member-avatar">
  2031. <img src="{GroupMemberPortraitURL-64}" alt="" />
  2032. </div>
  2033. <div class="member-info">
  2034. <dl>
  2035. <dt>{GroupMemberName}</dt>
  2036. <dd>{GroupMemberTitle}</dd>
  2037. </dl>
  2038. </div>
  2039. </a>
  2040. </li>{/block:GroupMember}
  2041. {/block:GroupMembers}
  2042. </ul>
  2043. </div><!-- //section-content -->
  2044. </div><!-- //section --->
  2045.  
  2046. <div class="section">
  2047. <div class="section-head">
  2048. <div class="icon"><i data-feather="heart"></i></div>
  2049. <h3 class="title">Affiliates</h3>
  2050. </div>
  2051. <div class="section-content affiliates">
  2052. <ul class="noneStyle">
  2053. <!-- start of an affiliate -->
  2054. <li>
  2055. <a href="#" title="username" target="_blank">
  2056. <img src="affiliate.png" alt="" />
  2057. </a>
  2058. </li>
  2059. <!-- end of an affiliate -->
  2060. </ul>
  2061. </div><!-- //section-content -->
  2062. </div><!-- //section -->
  2063.  
  2064. <div class="section">
  2065. <div class="section-head">
  2066. <div class="icon"><i data-feather="info"></i></div>
  2067. <h3 class="title">Site info</h3>
  2068. </div>
  2069. <div class="section-content siteinfo">
  2070. <dl>
  2071. <dt>title</dt>
  2072. <dd>text</dd>
  2073. <dt>theme by</dt>
  2074. <dd><a href="https://shudesigns.tumblr.com" target="_blank">ShuDesigns</a></dd>
  2075. </dl>
  2076. </div><!-- //section-content -->
  2077. </div><!-- //section -->
  2078.  
  2079. </div><!-- //sidebar-inner -->
  2080. </div><!-- //sidebar -->
  2081. <div class="primary primary-{select:Post Width}">
  2082. <div class="posts">
  2083. {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
  2084. <article class="post wow fadeInUp">
  2085. {block:Date}<div class="post-head">
  2086. <ul class="noneStyle left">
  2087. <li class="date">
  2088. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">
  2089. <i data-feather="calendar"></i> {ShortMonth} {DayOfMonthWithZero} {Year}
  2090. </a>
  2091. </li>
  2092. <li class="time"><i data-feather="clock"></i>{12HourWithZero}:{Minutes} {CapitalAmPm}</li>
  2093. </ul>
  2094. {block:RebloggedFrom} <ul class="noneStyle right">
  2095. <li class="source">
  2096. <a href="{ReblogRootURL}" target="_blank" title="Source">
  2097. <img src="{ReblogRootPortraitURL-48}" alt="" />
  2098. </a>
  2099. </li>
  2100. <li class="via">
  2101. <a href="{ReblogParentURL}" target="_blank" title="From">
  2102. <img src="{ReblogParentPortraitURL-48}" alt="" />
  2103. </a>
  2104. </li>
  2105. </ul>{/block:RebloggedFrom}
  2106. </div><!-- //post-head -->{/block:Date}
  2107. <div class="post-content">
  2108.  
  2109. {block:Text}
  2110. <div class="post-container">
  2111. {block:Title}
  2112. <div class="post-title">
  2113. <h1 class="title">{Title}</h1>
  2114. </div>
  2115. {/block:Title}
  2116. <div class="post-body post-style">
  2117. {block:NotReblog}
  2118. <div class="caption">
  2119. {block:AskPage}{/block:AskPage}
  2120. {Body}
  2121. </div>
  2122. {/block:NotReblog}
  2123. {block:RebloggedFrom}{block:Reblogs}
  2124. <div class="caption">
  2125. <div class="reblog-head">
  2126. <div class="reblog-avatar">
  2127. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2128. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2129. </div>
  2130. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2131. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2132. </div>
  2133. <div class="reblog-content">{Body}</div>
  2134. </div>
  2135. {/block:Reblogs}{/block:RebloggedFrom}
  2136. </div><!-- //post-body -->
  2137. </div><!-- //post-container -->
  2138. {/block:Text}
  2139.  
  2140. {block:Photo}
  2141. <div class="post-media">
  2142. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag}
  2143. </div><!-- //post-media -->
  2144. {block:Caption}
  2145. <div class="post-container">
  2146. <div class="post-body post-style">
  2147. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  2148. {block:RebloggedFrom}{block:Reblogs}
  2149. <div class="caption">
  2150. <div class="reblog-head">
  2151. <div class="reblog-avatar">
  2152. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2153. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2154. </div>
  2155. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2156. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2157. </div>
  2158. <div class="reblog-content">{Body}</div>
  2159. </div>
  2160. {/block:Reblogs}{/block:RebloggedFrom}
  2161. </div><!-- //post-body -->
  2162. </div><!-- //post-container -->
  2163. {/block:Caption}
  2164. {/block:Photo}
  2165.  
  2166. {block:Photoset}
  2167. <div class="post-media">
  2168. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2169. {block:Photos}
  2170. <div class="photo-data">
  2171. <div class="pxu-photo">
  2172. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
  2173. </div><!-- //pxu-photo -->
  2174. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2175. </div><!-- //photo-data -->
  2176. {/block:Photos}
  2177. </div><!-- //photo-slideshow-->
  2178. </div><!-- //post-media -->
  2179. {block:Caption}
  2180. <div class="post-container">
  2181. <div class="post-body post-style">
  2182. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  2183. {block:RebloggedFrom}{block:Reblogs}
  2184. <div class="caption">
  2185. <div class="reblog-head">
  2186. <div class="reblog-avatar">
  2187. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2188. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2189. </div>
  2190. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2191. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2192. </div>
  2193. <div class="reblog-content">{Body}</div>
  2194. </div>
  2195. {/block:Reblogs}{/block:RebloggedFrom}
  2196. </div><!-- //post-body -->
  2197. </div><!-- //post-container -->
  2198. {/block:Caption}
  2199. {block:Hidden}{block:ContentSource}
  2200. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  2201. {/block:ContentSource}{/block:Hidden}
  2202. {/block:Photoset}
  2203.  
  2204. {block:Video}
  2205. <div class="post-media">
  2206. <div class="video" style="margin-bottom:-5px;">{Video-500}</div>
  2207. </div><!-- //post-media -->
  2208. {block:Caption}
  2209. <div class="post-container">
  2210. <div class="post-body post-style">
  2211. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  2212. {block:RebloggedFrom}{block:Reblogs}
  2213. <div class="caption">
  2214. <div class="reblog-head">
  2215. <div class="reblog-avatar">
  2216. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2217. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2218. </div>
  2219. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2220. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2221. </div>
  2222. <div class="reblog-content">{Body}</div>
  2223. </div>
  2224. {/block:Reblogs}{/block:RebloggedFrom}
  2225. </div><!-- //post-body -->
  2226. </div><!-- //post-container -->
  2227. {/block:Caption}
  2228. {/block:Video}
  2229.  
  2230. {block:Audio}
  2231. <div class="post-media">
  2232. <div class="width_fix">{AudioEmbed-500}</div>
  2233. </div><!-- //post-media -->
  2234. {block:Caption}
  2235. <div class="post-container">
  2236. <div class="post-body post-style">
  2237. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  2238. {block:RebloggedFrom}{block:Reblogs}
  2239. <div class="caption">
  2240. <div class="reblog-head">
  2241. <div class="reblog-avatar">
  2242. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2243. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2244. </div>
  2245. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2246. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2247. </div>
  2248. <div class="reblog-content">{Body}</div>
  2249. </div>
  2250. {/block:Reblogs}{/block:RebloggedFrom}
  2251. </div><!-- //post-body -->
  2252. </div><!-- //post-container -->
  2253. {/block:Caption}
  2254. {/block:Audio}
  2255.  
  2256. {block:Link}
  2257. <div class="post-media">
  2258. <a href="{Url}" target="_blank" class="link-button">
  2259. {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail}
  2260. <div class="info-container">
  2261. {block:Host}<div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}">
  2262. <div class="publisher">{Host}</div>
  2263. </div>{/block:Host}
  2264. <div class="title">{Name}</div>
  2265. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  2266. {block:Author}<div class="author">{Author}</div>{/block:Author}
  2267. </div>
  2268. </a>
  2269. </div><!-- //post-media -->
  2270. {block:Description}
  2271. <div class="post-container">
  2272. <div class="post-body post-style">
  2273. {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog}
  2274. {block:RebloggedFrom}{block:Reblogs}
  2275. <div class="caption">
  2276. <div class="reblog-head">
  2277. <div class="reblog-avatar">
  2278. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2279. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2280. </div>
  2281. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2282. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2283. </div>
  2284. <div class="reblog-content">{Body}</div>
  2285. </div>
  2286. {/block:Reblogs}{/block:RebloggedFrom}
  2287. </div><!-- //post-body -->
  2288. </div><!-- //post-container -->
  2289. {/block:Description}
  2290. {/block:Link}
  2291.  
  2292. {block:Quote}
  2293. <div class="post-container">
  2294. <div class="post-title">
  2295. <span class="quote">{Quote}</span>
  2296. </div><!-- //post-title -->
  2297. {block:Source}
  2298. <div class="post-body post-style">
  2299. <div class="caption">
  2300. <p class="quote-source">{Source}</p>
  2301. </div>
  2302. </div><!-- //post-body -->
  2303. {/block:Source}
  2304. </div><!-- //post-container -->
  2305. {/block:Quote}
  2306.  
  2307. {block:Chat}
  2308. <div class="post-container">
  2309. {block:Title}
  2310. <div class="post-title">
  2311. <h1 class="title">{Title}</h1>
  2312. </div>
  2313. {/block:Title}
  2314. <div class="post-body post-style">
  2315. <ul class="noneStyle chat">
  2316. {block:Lines}<li class="user_{UserNumber}">
  2317. {block:Label}<span class="label">{Label}</span>{/block:Label}
  2318. <span class="line">{Line}</span>
  2319. </li>{/block:Lines}
  2320. </ul>
  2321. </div><!-- //post-body -->
  2322. </div><!-- //post-container -->
  2323. {/block:Chat}
  2324.  
  2325. {block:Answer}
  2326. <div class="post-container">
  2327. <div class="post-body post-style">
  2328. <div class="ask">
  2329. <div class="asker">
  2330. <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div>
  2331. <div class="asker-name">{Asker}</div>
  2332. </div>
  2333. <div class="asker-question">{Question}</div>
  2334. </div>
  2335. {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  2336. {block:Answerer}
  2337. <div class="answer">
  2338. <div class="answerer">
  2339. <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div>
  2340. <div class="answerer-name">{Answerer}</div>
  2341. </div>
  2342. <div class="answerer-answer">{Answer}</div>
  2343. </div>
  2344. {/block:Answerer}
  2345. {block:RebloggedFrom}{block:Reblogs}
  2346. <div class="caption">
  2347. <div class="reblog-head">
  2348. <div class="reblog-avatar">
  2349. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2350. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2351. </div>
  2352. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2353. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2354. </div>
  2355. <div class="reblog-content">{Body}</div>
  2356. </div>
  2357. {/block:Reblogs}{/block:RebloggedFrom}
  2358. </div><!-- //post-body -->
  2359. </div><!-- //post-container -->
  2360. {/block:Answer}
  2361.  
  2362. </div><!-- //post-content -->
  2363. {block:Date}<div class="post-foot">
  2364. {block:HasTags}<div class="top">
  2365. <ul class="noneStyle">
  2366. {block:Tags}<li><a href="{TagUrl}">#{Tag}</a></li>{/block:Tags}
  2367. </ul>
  2368. </div>{/block:HasTags}
  2369. <div class="bottom">
  2370. <div class="left">
  2371. {block:NoteCount}<a href="{Permalink}" class="notes note-{NoteCount}">{NoteCount}</a>{/block:NoteCount}
  2372. </div>
  2373. <ul class="noneStyle right">
  2374. <li class="reblog">
  2375. <a href="{ReblogURL}"><i data-feather="refresh-cw"></i></a>
  2376. </li>
  2377. <li class="like">
  2378. {LikeButton size="24" color="black"}
  2379. <span class="custom-like"><i data-feather="heart"></i></span>
  2380. </li>
  2381. </ul>
  2382. </div><!-- //bottom -->
  2383. </div><!-- //post-foot -->{/block:Date}
  2384. </article>
  2385. {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes}
  2386. {/block:Posts}
  2387. </div><!-- //posts -->
  2388. {block:Pagination}<div class="pagination">
  2389. <div class="arrow prev {block:PreviousPage}active{/block:PreviousPage}">
  2390. <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}"><i data-feather="arrow-left"></i></a>
  2391. </div>
  2392. <ul class="noneStyle jump">
  2393. {block:JumpPagination length="10"}
  2394. {block:CurrentPage}<li class="current"><a href="{URL}">{PageNumber}</a></li>{/block:CurrentPage}
  2395. {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
  2396. {/block:JumpPagination}
  2397. </ul>
  2398. <div class="arrow next {block:NextPage}active{/block:NextPage}">
  2399. <a href="{block:NextPage}{NextPage}{/block:NextPage}"><i data-feather="arrow-right"></i></a>
  2400. </div>
  2401. </div>{/block:Pagination}
  2402. </div><!-- //primary -->
  2403. </div><!-- //container -->
  2404. </main>
  2405. <footer id="footer">
  2406. <div class="footer-inner container">© {CopyrightYears} <a href="#">{Name}</a> all rights reserved. Theme by <a href="https://shudesigns.tumblr.com/" target="_blank">ShuDesigns</a> • Powered by <a href="https://tumblr.com/" target="_blank">Tumblr</a>
  2407. </footer>
  2408. </div><!-- //wrapper -->
  2409. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0" style="display:block">
  2410. <defs>
  2411. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(-45)" gradientUnits="userSpaceOnUse">
  2412. <stop offset="0%" stop-color="{color:Color One}" />
  2413. <stop offset="100%" stop-color="{color:Color Two}" />
  2414. </linearGradient>
  2415. </defs>
  2416. </svg>
  2417. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  2418. <script src="//unpkg.com/feather-icons"></script>
  2419. <script src="https://static.tumblr.com/ickcbh2/XHXpmk6si/browser.js"></script>
  2420. <script src="https://static.tumblr.com/ickcbh2/uaspn5sdc/plugins.js"></script>
  2421. <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script>
  2422. <script src="https://static.tumblr.com/ickcbh2/kjJpn8amj/main.min.js"></script>
  2423. <script>
  2424. (function($) {
  2425. // photoset
  2426. var $window = $(window),
  2427. $photoset = $('.photo-slideshow');
  2428. $photoset.pxuPhotoset({
  2429. lightbox: true,
  2430. gutter: '4px',
  2431. borderRadius: '0px',
  2432. photoset: '.photo-slideshow',
  2433. photoWrap: '.photo-data',
  2434. photo: '.pxu-photo'
  2435. });
  2436. // audio player
  2437. var $audio = $('iframe.tumblr_audio_player');
  2438. $audio.load(function() {
  2439. $(this).contents().find('head').append('<style type="text/css">' +
  2440. '.audio-player{ background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two}); color: {color:Banner Text Color} !important; }' +
  2441. '.audio-player .audio-info .track-artist { color: {color:Banner Text Color} !important; }' +
  2442. '</style>');
  2443. });
  2444. })(jQuery);
  2445. </script>
  2446.  
  2447. </body>
  2448. </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!