API tools faq
paste
Advertisement
roxiestheme

Fansite 004

roxiestheme
Feb 5th, 2020
4,261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.13 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <!--
  6.  
  7. Designed by ShuDesigns
  8. shudesigns.tumblr.com
  9. 2020 ⓒ All Rights Reserved.
  10.  
  11. ---
  12.  
  13. >> ASSET CREDITS
  14.  
  15. Google Fonts
  16. Feather Icons by Cole Bemis
  17.  
  18. animate.css by Daniel Eden
  19. imgLiquid by Alejandro Emparan
  20. Parallax.js by PixelCog Inc.
  21. Slick Slider by Ken Wheeler
  22. Sticky Sidebar by Ahmed Bouhuolia
  23.  
  24. Extended photoset by PixelUnion, modified by bychloethemes
  25. Video width fix by shythemes
  26.  
  27. -->
  28. <meta charset="utf-8" />
  29. {block:Hidden}
  30. <meta name="color:Body Background" content="#f5f5f5" />
  31. <meta name="color:Navbar Background" content="#ffffff" />
  32. <meta name="color:Post Background" content="#ffffff" />
  33. <meta name="color:Text Color" content="#888888" />
  34. <meta name="color:Accent" content="#d6a4a4" />
  35.  
  36. <meta name="image:Slideshow 1" content="" />
  37. <meta name="image:Slideshow 2" content="" />
  38. <meta name="image:Slideshow 3" content="" />
  39. <meta name="image:Slideshow Side" content="" />
  40. <meta name="image:Page Banner" content="" />
  41. <meta name="image:Sidebar Avatar" content="" />
  42.  
  43. <meta name="if:Animation" content="1" />
  44.  
  45. <meta name="select:Tumblr Controls Style" content="dark-controls" title="Dark" />
  46. <meta name="select:Tumblr Controls Style" content="light-controls" title="Light" />
  47.  
  48. <meta name="select:Slideshow Position" content="right" title="Right" />
  49. <meta name="select:Slideshow Position" content="left" title="Left" />
  50.  
  51. <meta name="select:Sidebar Position" content="left" title="Left" />
  52. <meta name="select:Sidebar Position" content="right" title="Right" />
  53.  
  54. <meta name="select:Sidebar Width" content="430px" title="430px" />
  55. <meta name="select:Sidebar Width" content="380px" title="380px" />
  56. <meta name="select:Sidebar Width" content="405px" title="405px" />
  57.  
  58. <meta name="select:Post Width" content="540px" title="540px" />
  59. <meta name="select:Post Width" content="400px" title="400px" />
  60. <meta name="select:Post Width" content="500px" title="500px" />
  61.  
  62. <meta name="text:Body Font Size" content="14px" />
  63.  
  64. <meta name="text:Tumblr Controls Opacity" content="0.3" />
  65.  
  66. <meta name="text:Navbar Title" content="" />
  67. <meta name="text:Navbar Link 1 Title" content="ask" />
  68. <meta name="text:Navbar Link 1 URL" content="/ask" />
  69. <meta name="text:Navbar Link 2 Title" content="" />
  70. <meta name="text:Navbar Link 2 URL" content="" />
  71. <meta name="text:Navbar Link 3 Title" content="" />
  72. <meta name="text:Navbar Link 3 URL" content="" />
  73. <meta name="text:Navbar Link 4 Title" content="" />
  74. <meta name="text:Navbar Link 4 URL" content="" />
  75. <meta name="text:Navbar Link 5 Title" content="" />
  76. <meta name="text:Navbar Link 5 URL" content="" />
  77.  
  78. <meta name="text:Slideshow Title" content="" />
  79.  
  80. <meta name="text:Online Counter Code" content="" />
  81. <meta name="text:Hits Counter Code" content="" />
  82. {/block:Hidden}
  83.  
  84. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  85. <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>
  86. <link rel="shortcut icon" href="{Favicon}" type="image/x-icon" />
  87. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  88. {block:ifAnimation}<link rel="stylesheet" href="https://static.tumblr.com/ickcbh2/aaSq56mai/animate.min.css" />{/block:ifAnimation}
  89. <link rel="stylesheet" href="https://static.tumblr.com/ickcbh2/Qmvq58dlv/layout.min.css" />
  90.  
  91. <style type="text/css">
  92.  
  93. /* -------------------------------------------
  94. * variables
  95. * ------------------------------------------ */
  96.  
  97. :root {
  98.  
  99. /* fonts */
  100. --sans: 'Source Sans Pro', 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
  101. --serif: 'Playfair Display', 'Times', 'Times New Roman', serif;
  102. --body-font-size: {text:Body Font Size};
  103.  
  104. /* main colors */
  105. --body-background: {color:Body Background};
  106. --post-background: {color:Post Background};
  107. --text-color: {color:Text Color};
  108. --navbar-background: {color:Navbar Background};
  109. --accent: {color:Accent};
  110.  
  111. /* other colors */
  112. --nav-title-index: {color:Text Color};
  113. --nav-links-index: #ffffff;
  114. --nav-title-default: #ffffff;
  115. --nav-links-default: #ffffff;
  116. --nav-title-onscroll: {color:Text Color};
  117. --nav-links-onscroll: {color:Text Color};
  118. --sidebar-section-title: {color:Text Color};
  119. }
  120.  
  121. /* -------------------------------------------
  122. * layout
  123. * ------------------------------------------ */
  124.  
  125. .container {
  126. margin: 0 auto;
  127. width: calc({select:Sidebar Width} + 50px + {select:Post Width} + 160px);
  128. }
  129. {block:ifAnimation}
  130. .anm {
  131. visibility: hidden;
  132. }
  133. {/block:ifAnimation}
  134.  
  135. /* -------------------------------------------
  136. * tumblr controls
  137. * ------------------------------------------ */
  138.  
  139. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  140. visibility: hidden;
  141. z-index: 1001;
  142. position: fixed;
  143. top: 15px;
  144. right: 40px;
  145. -moz-transform: scale(0.6);
  146. -o-transform: scale(0.6);
  147. -ms-transform: scale(0.6);
  148. -webkit-transform: scale(0.6);
  149. transform: scale(0.6);
  150. -moz-transform-origin: top right;
  151. -o-transform-origin: top right;
  152. -ms-transform-origin: top right;
  153. -webkit-transform-origin: top right;
  154. transform-origin: top right;
  155. }
  156. @media screen and (max-width: 1440px) {
  157. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  158. right: 15px;
  159. }
  160. }
  161. .light-controls.tmblr-iframe-compact .tmblr-iframe--unified-controls {
  162. mix-blend-mode: screen;
  163. }
  164. .dark-controls.tmblr-iframe-compact .tmblr-iframe--unified-controls {
  165. -webkit-filter: invert(100%);
  166. -moz-filter: invert(100%);
  167. -o-filter: invert(100%);
  168. -ms-filter: invert(100%);
  169. filter: invert(100%);
  170. }
  171. .tmblr-iframe-compact.show-controls .tmblr-iframe--unified-controls {
  172. visibility: visible;
  173. opacity: {text:Tumblr Controls Opacity};
  174. }
  175.  
  176. /* -------------------------------------------
  177. * header
  178. * ------------------------------------------ */
  179.  
  180. #header {
  181. position: absolute;
  182. z-index: 1000;
  183. top: 0;
  184. left: 0;
  185. right: 0;
  186. width: 100%;
  187. -moz-transition-property: background-color;
  188. -o-transition-property: background-color;
  189. -webkit-transition-property: background-color;
  190. transition-property: background-color;
  191. -moz-transition-duration: 0.5s;
  192. -o-transition-duration: 0.5s;
  193. -webkit-transition-duration: 0.5s;
  194. transition-duration: 0.5s;
  195. -moz-transition-timing-function: ease-in-out;
  196. -o-transition-timing-function: ease-in-out;
  197. -webkit-transition-timing-function: ease-in-out;
  198. transition-timing-function: ease-in-out;
  199. }
  200. #header .navbar {
  201. display: -webkit-box;
  202. display: -webkit-flex;
  203. display: -ms-flexbox;
  204. display: flex;
  205. -webkit-box-pack: justify;
  206. -ms-flex-pack: justify;
  207. justify-content: space-between;
  208. -webkit-box-align: center;
  209. -ms-flex-align: center;
  210. align-items: center;
  211. height: 100px;
  212. margin: 0 auto;
  213. padding: 0 50px;
  214. -moz-transition: height 0.5s ease-in-out;
  215. -o-transition: height 0.5s ease-in-out;
  216. -webkit-transition: height 0.5s ease-in-out;
  217. transition: height 0.5s ease-in-out;
  218. }
  219. @media screen and (max-width: 1440px) {
  220. #header .navbar {
  221. padding: 0 25px;
  222. }
  223. }
  224.  
  225. /* logo */
  226. #header .navbar .logo {
  227. display: -webkit-box;
  228. display: -webkit-flex;
  229. display: -ms-flexbox;
  230. display: flex;
  231. -webkit-box-align: center;
  232. -ms-flex-align: center;
  233. align-items: center;
  234. }
  235. #header .navbar .logo a {
  236. display: -webkit-box;
  237. display: -webkit-flex;
  238. display: -ms-flexbox;
  239. display: flex;
  240. -webkit-box-align: center;
  241. -ms-flex-align: center;
  242. align-items: center;
  243. font-family: var(--serif);
  244. font-size: 1.4285rem;
  245. color: var(--nav-title-default);
  246. }
  247. #header .navbar .logo a .logo-avatar {
  248. display: -webkit-box;
  249. display: -webkit-flex;
  250. display: -ms-flexbox;
  251. display: flex;
  252. -webkit-box-pack: center;
  253. -ms-flex-pack: center;
  254. justify-content: center;
  255. -webkit-box-align: center;
  256. -ms-flex-align: center;
  257. align-items: center;
  258. width: 1.5em;
  259. height: 1.5em;
  260. overflow: hidden;
  261. border-radius: 50%;
  262. background-color: var(--accent);
  263. margin-right: 15px;
  264. }
  265. #header .navbar .logo a .logo-avatar img {
  266. display: block;
  267. width: 100%;
  268. }
  269.  
  270. /* search */
  271. #header .navbar .logo .search {
  272. visibility: hidden;
  273. opacity: 0;
  274. margin-left: 25px;
  275. position: relative;
  276. -moz-transition-property: opacity, visibility;
  277. -o-transition-property: opacity, visibility;
  278. -webkit-transition-property: opacity, visibility;
  279. transition-property: opacity, visibility;
  280. -moz-transition-duration: 0.5s;
  281. -o-transition-duration: 0.5s;
  282. -webkit-transition-duration: 0.5s;
  283. transition-duration: 0.5s;
  284. -moz-transition-timing-function: ease-in-out;
  285. -o-transition-timing-function: ease-in-out;
  286. -webkit-transition-timing-function: ease-in-out;
  287. transition-timing-function: ease-in-out;
  288. }
  289. @media screen and (max-width: 1600px) {
  290. #header .navbar .logo .search {
  291. margin-left: 15px;
  292. }
  293. }
  294. #header .navbar .logo .search input,
  295. #header .navbar .logo .search button {
  296. border: none;
  297. outline: none;
  298. border-radius: 35px;
  299. background: none;
  300. -webkit-appearance: none;
  301. -moz-appearance: none;
  302. appearance: none;
  303. }
  304. #header .navbar .logo .search input {
  305. width: 200px;
  306. height: 35px;
  307. padding: 0 10px;
  308. border: 1px solid var(--body-background);
  309. font-size: 0.857rem;
  310. color: inherit;
  311. }
  312. #header .navbar .logo .search input::-webkit-input-placeholder {
  313. opacity: 0.5;
  314. color: inherit;
  315. letter-spacing: 0.05em;
  316. }
  317. #header .navbar .logo .search input:-moz-placeholder {
  318. opacity: 0.5;
  319. color: inherit;
  320. letter-spacing: 0.05em;
  321. }
  322. #header .navbar .logo .search input::-moz-placeholder {
  323. opacity: 0.5;
  324. color: inherit;
  325. letter-spacing: 0.05em;
  326. }
  327. #header .navbar .logo .search input:-ms-input-placeholder {
  328. opacity: 0.5;
  329. color: inherit;
  330. letter-spacing: 0.05em;
  331. }
  332. @media screen and (max-width: 1600px) {
  333. #header .navbar .logo .search input {
  334. width: 150px;
  335. }
  336. }
  337. #header .navbar .logo .search button {
  338. position: absolute;
  339. top: 0;
  340. right: 0;
  341. bottom: 0;
  342. width: 35px;
  343. background-color: var(--accent);
  344. cursor: pointer;
  345. }
  346. #header .navbar .logo .search button svg {
  347. width: 15px;
  348. height: 15px;
  349. stroke: var(--post-background);
  350. }
  351.  
  352. /* menu */
  353. #header .navbar .menu {
  354. font-size: 0.857rem;
  355. text-transform: uppercase;
  356. color: var(--nav-links-default);
  357. }
  358. #header .navbar .menu ul {
  359. display: -webkit-box;
  360. display: -webkit-flex;
  361. display: -ms-flexbox;
  362. display: flex;
  363. -webkit-box-pack: end;
  364. -ms-flex-pack: end;
  365. justify-content: flex-end;
  366. -webkit-box-align: center;
  367. -ms-flex-align: center;
  368. align-items: center;
  369. }
  370. #header .navbar .menu ul li {
  371. position: relative;
  372. padding: 5px 0;
  373. overflow: hidden;
  374. letter-spacing: 1px;
  375. }
  376. #header .navbar .menu ul li + li {
  377. margin-left: 45px;
  378. }
  379. @media screen and (max-width: 1600px) {
  380. #header .navbar .menu ul li + li {
  381. margin-left: 25px;
  382. }
  383. }
  384. #header .navbar .menu ul li a {
  385. display: block;
  386. }
  387. #header .navbar .menu ul li a:after {
  388. position: absolute;
  389. bottom: 0;
  390. left: 0;
  391. right: 0;
  392. content: "";
  393. display: block;
  394. height: 2px;
  395. background-color: var(--accent);
  396. -moz-transform: translateX(-100%);
  397. -o-transform: translateX(-100%);
  398. -ms-transform: translateX(-100%);
  399. -webkit-transform: translateX(-100%);
  400. transform: translateX(-100%);
  401. -moz-transition: transform 0.5s ease-in-out;
  402. -o-transition: transform 0.5s ease-in-out;
  403. -webkit-transition: transform 0.5s ease-in-out;
  404. transition: transform 0.5s ease-in-out;
  405. }
  406. #header .navbar .menu ul li a:hover:after {
  407. -moz-transform: translateX(0);
  408. -o-transform: translateX(0);
  409. -ms-transform: translateX(0);
  410. -webkit-transform: translateX(0);
  411. transform: translateX(0);
  412. }
  413.  
  414. /* heade on scroll */
  415. #header.on-scroll {
  416. position: fixed;
  417. background-color: var(--navbar-background);
  418. top: -100px;
  419. margin-top: 100px;
  420. -moz-transition-property: margin-top;
  421. -o-transition-property: margin-top;
  422. -webkit-transition-property: margin-top;
  423. transition-property: margin-top;
  424. }
  425. #header.on-scroll .navbar {
  426. height: 65px;
  427. }
  428. #header.on-scroll .navbar .logo,
  429. #header.on-scroll .navbar .logo a {
  430. color: var(--nav-title-onscroll);
  431. }
  432. #header.on-scroll .navbar .logo a:hover {
  433. color: var(--accent);
  434. }
  435. #header.on-scroll .navbar .logo .search {
  436. visibility: visible;
  437. opacity: 1;
  438. }
  439. #header.on-scroll .navbar .menu {
  440. -webkit-box-flex: 1;
  441. -webkit-flex-grow: 1;
  442. -moz-flex-grow: 1;
  443. -ms-flex-positive: 1;
  444. flex-grow: 1;
  445. color: var(--nav-links-onscroll);
  446. padding-right: 400px;
  447. }
  448. @media screen and (max-width: 1600px) {
  449. #header.on-scroll .navbar .menu {
  450. padding-right: 340px;
  451. }
  452. }
  453. #header.on-scroll .navbar .menu ul {
  454. width: 100%;
  455. -webkit-box-pack: center;
  456. -ms-flex-pack: center;
  457. justify-content: center;
  458. }
  459. #header.page-1:not(.on-scroll) .navbar .logo a {
  460. color: var(--nav-title-index);
  461. }
  462. #header.page-1:not(.on-scroll) .navbar .menu {
  463. color: var(--nav-links-index);
  464. }
  465.  
  466. /* -------------------------------------------
  467. * banner
  468. * ------------------------------------------ */
  469.  
  470. .banner {
  471. overflow: hidden;
  472. }
  473.  
  474. /* home banner */
  475. .home-banner {
  476. display: none;
  477. width: 100%;
  478. height: 100vh;
  479. }
  480. .home-banner.page-1 {
  481. display: -webkit-box;
  482. display: -webkit-flex;
  483. display: -ms-flexbox;
  484. display: flex;
  485. -webkit-box-align: stretch;
  486. -ms-flex-align: stretch;
  487. align-items: stretch;
  488. }
  489.  
  490. /* home banner side */
  491. .home-banner .banner-side {
  492. position: relative;
  493. z-index: 5;
  494. -webkit-flex-shrink: 0;
  495. -moz-flex-shrink: 0;
  496. -ms-flex-negative: 0;
  497. flex-shrink: 0;
  498. display: -webkit-box;
  499. display: -webkit-flex;
  500. display: -ms-flexbox;
  501. display: flex;
  502. -webkit-box-align: center;
  503. -ms-flex-align: center;
  504. align-items: center;
  505. width: 25%;
  506. background-color: var(--post-background);
  507. }
  508. .home-banner .banner-side .bg {
  509. position: absolute;
  510. top: 0;
  511. left: 0;
  512. right: 0;
  513. bottom: 0;
  514. }
  515. .home-banner .banner-side .inner {
  516. position: relative;
  517. z-index: 1;
  518. -webkit-flex-shrink: 0;
  519. -moz-flex-shrink: 0;
  520. -ms-flex-negative: 0;
  521. flex-shrink: 0;
  522. width: 35vw;
  523. background-color: var(--accent);
  524. padding: 50px;
  525. color: #ffffff;
  526. }
  527. .home-banner .banner-side .inner .title-box,
  528. .home-banner .banner-side .inner .desc-box {
  529. opacity: 1;
  530. -moz-transition-property: opacity, transform;
  531. -o-transition-property: opacity, transform;
  532. -webkit-transition-property: opacity, transform;
  533. transition-property: opacity, transform;
  534. -moz-transition-duration: 1s;
  535. -o-transition-duration: 1s;
  536. -webkit-transition-duration: 1s;
  537. transition-duration: 1s;
  538. -moz-transition-timing-function: ease-in-out;
  539. -o-transition-timing-function: ease-in-out;
  540. -webkit-transition-timing-function: ease-in-out;
  541. transition-timing-function: ease-in-out;
  542. }
  543. {block:ifAnimation}
  544. .home-banner .banner-side .inner.inner .title-box,
  545. .home-banner .banner-side .inner .desc-box {
  546. opacity: 0;
  547. }
  548. .home-banner .banner-side .inner .title-box {
  549. -moz-transform: translateY(-50%);
  550. -o-transform: translateY(-50%);
  551. -ms-transform: translateY(-50%);
  552. -webkit-transform: translateY(-50%);
  553. transform: translateY(-50%);
  554. }
  555. .home-banner .banner-side .inner .desc-box {
  556. -moz-transform: translateY(-25%);
  557. -o-transform: translateY(-25%);
  558. -ms-transform: translateY(-25%);
  559. -webkit-transform: translateY(-25%);
  560. transform: translateY(-25%);
  561. }
  562. .home-banner .banner-side .inner.animated .title-box,
  563. .home-banner .banner-side .inner.animated .desc-box {
  564. opacity: 1;
  565. -moz-transform: translateY(0);
  566. -o-transform: translateY(0);
  567. -ms-transform: translateY(0);
  568. -webkit-transform: translateY(0);
  569. transform: translateY(0);
  570. -moz-transition-delay: 1.5s;
  571. -o-transition-delay: 1.5s;
  572. -webkit-transition-delay: 1.5s;
  573. transition-delay: 1.5s;
  574. }
  575. {/block:ifAnimation}
  576. .home-banner .banner-side .inner .title-box h1 {
  577. font-family: "Playfair Display", "Times New Roman", serif;
  578. font-size: 5.5vw;
  579. font-weight: normal;
  580. }
  581. .home-banner .banner-side .inner .title-box + .desc-box::before {
  582. content: "";
  583. display: block;
  584. width: 55px;
  585. height: 2px;
  586. margin: 25px 0;
  587. background-color: var(--post-background);
  588. }
  589. .home-banner .banner-side .inner .desc-box {
  590. font-size: 1rem;
  591. line-height: 1.5em;
  592. }
  593. .home-banner .banner-side .inner .desc-box a {
  594. opacity: 0.65;
  595. -moz-transition-property: opacity;
  596. -o-transition-property: opacity;
  597. -webkit-transition-property: opacity;
  598. transition-property: opacity;
  599. }
  600. .home-banner .banner-side .inner .desc-box a:hover {
  601. opacity: 1;
  602. }
  603. .home-banner .banner-side .inner .desc-box p {
  604. margin: 0;
  605. }
  606. .home-banner .banner-side .inner .desc-box p + p {
  607. margin-top: 1em;
  608. }
  609.  
  610. /* banner main */
  611. .home-banner .banner-main {
  612. position: relative;
  613. width: 75%;
  614. background-color: #cccccc;
  615. }
  616. .home-banner .banner-main::before {
  617. content: "";
  618. position: absolute;
  619. z-index: 1;
  620. top: 0;
  621. left: 0;
  622. right: 0;
  623. display: block;
  624. height: 300px;
  625. background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  626. background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  627. background: -o-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  628. background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  629. background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  630. }
  631. .home-banner .banner-main .banner-slider li {
  632. position: relative;
  633. display: block !important;
  634. width: 100%;
  635. height: 100vh;
  636. }
  637. .home-banner .banner-main .banner-arrows {
  638. position: absolute;
  639. z-index: 5;
  640. bottom: 0;
  641. display: -webkit-box;
  642. display: -webkit-flex;
  643. display: -ms-flexbox;
  644. display: flex;
  645. background-color: var(--post-background);
  646. -moz-transition-property: opacity, margin;
  647. -o-transition-property: opacity, margin;
  648. -webkit-transition-property: opacity, margin;
  649. transition-property: opacity, margin;
  650. -moz-transition-duration: 1s;
  651. -o-transition-duration: 1s;
  652. -webkit-transition-duration: 1s;
  653. transition-duration: 1s;
  654. -moz-transition-timing-function: ease-in-out;
  655. -o-transition-timing-function: ease-in-out;
  656. -webkit-transition-timing-function: ease-in-out;
  657. transition-timing-function: ease-in-out;
  658. }
  659. .home-banner .banner-main .banner-arrows li + li {
  660. border-left: 1px solid var(--body-background);
  661. }
  662. .home-banner .banner-main .banner-arrows li button {
  663. display: -webkit-box;
  664. display: -webkit-flex;
  665. display: -ms-flexbox;
  666. display: flex;
  667. -webkit-box-pack: center;
  668. -ms-flex-pack: center;
  669. justify-content: center;
  670. -webkit-box-align: center;
  671. -ms-flex-align: center;
  672. align-items: center;
  673. width: 75px;
  674. height: 75px;
  675. background-color: var(--post-background);
  676. border: none;
  677. outline: none;
  678. -webkit-appearance: none;
  679. -moz-appearance: none;
  680. appearance: none;
  681. cursor: pointer;
  682. color: var(--accent);
  683. -moz-transition-property: color, background-color;
  684. -o-transition-property: color, background-color;
  685. -webkit-transition-property: color, background-color;
  686. transition-property: color, background-color;
  687. -moz-transition-duration: 0.3s;
  688. -o-transition-duration: 0.3s;
  689. -webkit-transition-duration: 0.3s;
  690. transition-duration: 0.3s;
  691. -moz-transition-timing-function: ease-in-out;
  692. -o-transition-timing-function: ease-in-out;
  693. -webkit-transition-timing-function: ease-in-out;
  694. transition-timing-function: ease-in-out;
  695. }
  696. .home-banner .banner-main .banner-arrows li button:hover {
  697. color: #ffffff;
  698. background-color: var(--accent);
  699. }
  700. {block:ifAnimation}
  701. .home-banner .banner-main .banner-arrows {
  702. visibility: hidden;
  703. opacity: 0;
  704. }
  705. .home-banner .banner-main.animated .banner-arrows {
  706. visibility: visible;
  707. opacity: 1;
  708. margin: 0;
  709. -moz-transition-delay: 1.5s;
  710. -o-transition-delay: 1.5s;
  711. -webkit-transition-delay: 1.5s;
  712. transition-delay: 1.5s;
  713. }
  714. {/block:ifAnimation}
  715.  
  716. /* home banner: position right */
  717. .home-banner.slider-position-right .banner-side {
  718. -webkit-box-pack: start;
  719. -ms-flex-pack: start;
  720. justify-content: flex-start;
  721. }
  722. .home-banner.slider-position-right .banner-side .inner {
  723. margin-left: 7.5vw;
  724. }
  725. .home-banner.slider-position-right .banner-main .banner-arrows {
  726. right: 0;
  727. }
  728. {block:ifAnimation}
  729. .home-banner.slider-position-right .banner-main:not(.animated) .banner-arrows {
  730. margin-right: -150px;
  731. }
  732. {/block:ifAnimation}
  733.  
  734. /* home banner: position left */
  735. .home-banner.slider-position-left {
  736. -webkit-box-orient: horizontal;
  737. -webkit-box-direction: reverse;
  738. -ms-flex-direction: row-reverse;
  739. flex-direction: row-reverse;
  740. }
  741. .home-banner.slider-position-left .banner-side {
  742. -webkit-box-pack: end;
  743. -ms-flex-pack: end;
  744. justify-content: flex-end;
  745. }
  746. .home-banner.slider-position-left .banner-side .inner {
  747. margin-right: 7.5vw;
  748. }
  749. .home-banner.slider-position-left .banner-main .banner-arrows {
  750. left: 0;
  751. }
  752. {block:ifAnimation}
  753. .home-banner.slider-position-left .banner-side .inner {
  754. -webkit-animation-name: fadeInRight;
  755. -moz-animation-name: fadeInRight;
  756. -o-animation-name: fadeInRight;
  757. animation-name: fadeInRight;
  758. }
  759. .home-banner.slider-position-left .banner-main {
  760. -webkit-animation-name: slideInLeft;
  761. -moz-animation-name: slideInLeft;
  762. -o-animation-name: slideInLeft;
  763. animation-name: slideInLeft;
  764. }
  765. .home-banner.slider-position-left .banner-main:not(.animated) .banner-arrows {
  766. margin-left: -150px;
  767. }
  768. {/block:ifAnimation}
  769.  
  770. /* page banner */
  771. .default-banner {
  772. position: relative;
  773. display: -webkit-box;
  774. display: -webkit-flex;
  775. display: -ms-flexbox;
  776. display: flex;
  777. -webkit-box-pack: center;
  778. -ms-flex-pack: center;
  779. justify-content: center;
  780. -webkit-box-align: center;
  781. -ms-flex-align: center;
  782. align-items: center;
  783. height: 350px;
  784. {block:ifnotPageBannerImage}background-color: var(--accent);{/block:ifnotPageBannerImage}
  785. }
  786. .default-banner::before {
  787. content: "";
  788. position: absolute;
  789. z-index: 1;
  790. top: 0;
  791. left: 0;
  792. right: 0;
  793. display: block;
  794. height: 300px;
  795. background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  796. background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  797. background: -o-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  798. background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  799. background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  800. }
  801. .default-banner.page-1 {
  802. display: none;
  803. }
  804. .default-banner .title {
  805. position: relative;
  806. z-index: 2;
  807. color: var(--post-background);
  808. font-family: var(--serif);
  809. font-size: 48px;
  810. }
  811. .default-banner .title::after {
  812. content: "";
  813. display: block;
  814. width: 35px;
  815. height: 2px;
  816. background-color: var(--accent);
  817. margin: 25px auto 0;
  818. }
  819.  
  820. /* -------------------------------------------
  821. * sidebar
  822. * ------------------------------------------ */
  823.  
  824. /* sidebar basic */
  825. .sidebar {
  826. width: {select:Sidebar Width};
  827. counter-reset: section;
  828. will-change: min-height;
  829. }
  830. .sidebar-left .sidebar {
  831. float: left;
  832. }
  833. .sidebar-right .sidebar {
  834. float: right;
  835. }
  836. .sidebar .sidebar-inner {
  837. -moz-transform: translate(0, 0);
  838. -o-transform: translate(0, 0);
  839. -ms-transform: translate(0, 0);
  840. -webkit-transform: translate(0, 0);
  841. transform: translate(0, 0);
  842. -moz-transform: translate3d(0, 0, 0);
  843. -o-transform: translate3d(0, 0, 0);
  844. -ms-transform: translate3d(0, 0, 0);
  845. -webkit-transform: translate3d(0, 0, 0);
  846. transform: translate3d(0, 0, 0);
  847. will-change: position, transform, right;
  848. }
  849.  
  850. /* sidebar section basic */
  851. .sidebar .sidebar-section {
  852. display: -webkit-box;
  853. display: -webkit-flex;
  854. display: -ms-flexbox;
  855. display: flex;
  856. background-color: var(--post-background);
  857. }
  858. .sidebar .sidebar-section + .sidebar-section {
  859. margin-top: 50px;
  860. }
  861. .sidebar .sidebar-section .section-head {
  862. width: 79px;
  863. padding: 40px 0;
  864. display: -webkit-box;
  865. display: -webkit-flex;
  866. display: -ms-flexbox;
  867. display: flex;
  868. -webkit-box-pack: center;
  869. -ms-flex-pack: center;
  870. justify-content: center;
  871. }
  872. .sidebar .sidebar-section .section-head .title {
  873. width: 1.25em;
  874. writing-mode: vertical-rl;
  875. text-transform: uppercase;
  876. font-family: var(--serif);
  877. font-size: 2.285rem;
  878. color: var(--sidebar-section-title);
  879. line-height: 1;
  880. white-space: nowrap;
  881. }
  882. .sidebar .sidebar-section .section-head .title::before {
  883. display: inline-block;
  884. counter-increment: section;
  885. content: "" counter(section, decimal-leading-zero) ".";
  886. margin-bottom: 10px;
  887. color: var(--accent);
  888. font-family: var(--serif);
  889. font-size: 1.1em;
  890. }
  891. .sidebar .sidebar-section .section-content {
  892. width: calc({select:Sidebar Width} - 79px);
  893. padding: 35px;
  894. border-left: 1px solid var(--body-background);
  895. color: var(--text-color);
  896. }
  897.  
  898. /* about */
  899. .sidebar .about .img-box {
  900. margin: 0 auto;
  901. width: 120px;
  902. height: 120px;
  903. border-radius: 50%;
  904. overflow: hidden;
  905. background-color: var(--accent);
  906. }
  907. .sidebar .about .img-box + .text-box {
  908. margin-top: 25px;
  909. }
  910. .sidebar .about .text-box {
  911. font-size: 14px;
  912. line-height: 1.5em;
  913. }
  914. .sidebar .about .text-box p {
  915. margin: 0;
  916. }
  917. .sidebar .about .text-box p + p {
  918. margin-top: 1em;
  919. }
  920. .sidebar .about .text-box a {
  921. color: var(--accent);
  922. }
  923.  
  924. /* links */
  925. .sidebar .links ul li {
  926. border: 1px solid var(--body-background);
  927. }
  928. .sidebar .links ul li + li {
  929. margin-top: -1px;
  930. }
  931. .sidebar .links ul li a {
  932. display: -webkit-box;
  933. display: -webkit-flex;
  934. display: -ms-flexbox;
  935. display: flex;
  936. -webkit-box-align: center;
  937. -ms-flex-align: center;
  938. align-items: center;
  939. padding: 15px 20px;
  940. -moz-transition-property: color, border-color, background-color;
  941. -o-transition-property: color, border-color, background-color;
  942. -webkit-transition-property: color, border-color, background-color;
  943. transition-property: color, border-color, background-color;
  944. }
  945. .sidebar .links ul li a svg {
  946. width: 35px;
  947. height: 35px;
  948. stroke: var(--accent);
  949. -moz-transition: stroke 0.3s ease-in-out;
  950. -o-transition: stroke 0.3s ease-in-out;
  951. -webkit-transition: stroke 0.3s ease-in-out;
  952. transition: stroke 0.3s ease-in-out;
  953. }
  954. .sidebar .links ul li a div {
  955. margin-left: 20px;
  956. }
  957. .sidebar .links ul li a div span {
  958. display: block;
  959. }
  960. .sidebar .links ul li a div span.name {
  961. font-size: 1.285rem;
  962. font-weight: 700;
  963. text-transform: uppercase;
  964. }
  965. .sidebar .links ul li a div span.url {
  966. margin-top: 5px;
  967. font-size: 0.857rem;
  968. letter-spacing: 0.05em;
  969. }
  970. .sidebar .links ul li a:hover {
  971. color: var(--post-background);
  972. background-color: var(--accent);
  973. border-color: var(--accent);
  974. }
  975. .sidebar .links ul li a:hover svg {
  976. stroke: var(--post-background);
  977. }
  978.  
  979. /* events */
  980. .sidebar .events ul li {
  981. display: -webkit-box;
  982. display: -webkit-flex;
  983. display: -ms-flexbox;
  984. display: flex;
  985. -webkit-box-align: center;
  986. -ms-flex-align: center;
  987. align-items: center;
  988. }
  989. .sidebar .events ul li + li {
  990. border-top: 1px solid var(--body-background);
  991. margin-top: 15px;
  992. padding-top: 15px;
  993. }
  994. .sidebar .events ul li span {
  995. display: block;
  996. }
  997. .sidebar .events ul li .date {
  998. -webkit-flex-shrink: 0;
  999. -moz-flex-shrink: 0;
  1000. -ms-flex-negative: 0;
  1001. flex-shrink: 0;
  1002. display: -webkit-box;
  1003. display: -webkit-flex;
  1004. display: -ms-flexbox;
  1005. display: flex;
  1006. -webkit-box-orient: vertical;
  1007. -webkit-box-direction: normal;
  1008. -ms-flex-direction: column;
  1009. flex-direction: column;
  1010. -webkit-box-pack: center;
  1011. -ms-flex-pack: center;
  1012. justify-content: center;
  1013. -webkit-box-align: center;
  1014. -ms-flex-align: center;
  1015. align-items: center;
  1016. width: 65px;
  1017. height: 65px;
  1018. background-color: var(--accent);
  1019. color: var(--post-background);
  1020. text-align: center;
  1021. border-radius: 50%;
  1022. }
  1023. .sidebar .events ul li .date .day {
  1024. font-size: 1.5714rem;
  1025. font-weight: 700;
  1026. }
  1027. .sidebar .events ul li .date .day sup {
  1028. font-size: 0.71428rem;
  1029. }
  1030. .sidebar .events ul li .date .month {
  1031. margin-top: 2px;
  1032. font-size: 0.71428rem;
  1033. text-transform: uppercase;
  1034. }
  1035. .sidebar .events ul li .event {
  1036. margin-left: 15px;
  1037. }
  1038. .sidebar .events ul li .event .title {
  1039. font-size: 1.14285rem;
  1040. font-weight: 600;
  1041. }
  1042. .sidebar .events ul li .event .location {
  1043. margin-top: 5px;
  1044. font-size: 0.857rem;
  1045. letter-spacing: 0.5px;
  1046. }
  1047. .sidebar .events ul li .event .location svg {
  1048. display: inline-block;
  1049. vertical-align: middle;
  1050. width: 1em;
  1051. height: 1em;
  1052. margin-top: -2px;
  1053. stroke: var(--accent);
  1054. }
  1055.  
  1056. /* projects */
  1057. .sidebar .projects .project + .project {
  1058. margin-top: 25px;
  1059. }
  1060. .sidebar .projects .project .img-box {
  1061. position: relative;
  1062. background-color: var(--accent);
  1063. }
  1064. .sidebar .projects .project .img-box img {
  1065. display: block;
  1066. }
  1067. .sidebar .projects .project .text-box {
  1068. position: relative;
  1069. padding: 25px;
  1070. border: 1px solid var(--body-background);
  1071. }
  1072. .sidebar .projects .project .info .title {
  1073. color: var(--accent);
  1074. font-size: 1.285rem;
  1075. }
  1076. .sidebar .projects .project .info .desc {
  1077. display: block;
  1078. margin-top: 5px;
  1079. font-size: 0.71428rem;
  1080. line-height: 1;
  1081. letter-spacing: 0.1em;
  1082. text-transform: uppercase;
  1083. }
  1084. .sidebar .projects .project .detail {
  1085. margin: 15px 0;
  1086. padding: 10px 0;
  1087. border-top: 1px solid var(--body-background);
  1088. border-bottom: 1px solid var(--body-background);
  1089. font-size: 0.857rem;
  1090. letter-spacing: 0.05em;
  1091. }
  1092. .sidebar .projects .project .detail dl {
  1093. margin: 0;
  1094. }
  1095. .sidebar .projects .project .detail dl dt {
  1096. float: left;
  1097. font-weight: 600;
  1098. margin-right: 5px;
  1099. text-transform: uppercase;
  1100. }
  1101. .sidebar .projects .project .detail dl dd {
  1102. margin: 0 0 5px;
  1103. }
  1104. .sidebar .projects .project .detail dl dd:last-child {
  1105. margin: 0;
  1106. }
  1107. .sidebar .projects .project .buttons ul {
  1108. display: -webkit-box;
  1109. display: -webkit-flex;
  1110. display: -ms-flexbox;
  1111. display: flex;
  1112. -ms-flex-wrap: wrap;
  1113. flex-wrap: wrap;
  1114. }
  1115. .sidebar .projects .project .buttons ul li {
  1116. -webkit-box-flex: 1;
  1117. -ms-flex: 1;
  1118. flex: 1;
  1119. margin-top: 5px;
  1120. }
  1121. .sidebar .projects .project .buttons ul li + li {
  1122. margin-left: 5px;
  1123. }
  1124. .sidebar .projects .project .buttons ul li a {
  1125. display: block;
  1126. padding: 5px;
  1127. border: 1px solid var(--accent);
  1128. background-color: var(--accent);
  1129. text-align: center;
  1130. font-size: 0.71428rem;
  1131. letter-spacing: 0.1em;
  1132. text-transform: uppercase;
  1133. color: var(--post-background);
  1134. -moz-transition-property: color, background-color;
  1135. -o-transition-property: color, background-color;
  1136. -webkit-transition-property: color, background-color;
  1137. transition-property: color, background-color;
  1138. }
  1139. .sidebar .projects .project .buttons ul li a:hover {
  1140. color: var(--accent);
  1141. background-color: var(--post-background);
  1142. }
  1143. .sidebar .projects .project .buttons ul.col-1 {
  1144. display: block;
  1145. }
  1146. .sidebar .projects .project .buttons ul.col-1 li + li {
  1147. margin-left: 0;
  1148. }
  1149. .sidebar .projects .project .buttons ul.col-1 li:nth-child(1) {
  1150. margin-top: 0;
  1151. }
  1152. .sidebar .projects .project .buttons ul.col-2 li {
  1153. min-width: calc(50% - 5px/2);
  1154. }
  1155. .sidebar .projects .project .buttons ul.col-2 li:nth-child(-n+2) {
  1156. margin-top: 0;
  1157. }
  1158. .sidebar .projects .project .buttons ul.col-2 li + li:nth-child(2n+1) {
  1159. margin-left: 0;
  1160. }
  1161. .sidebar .projects .project .buttons ul.col-3 li {
  1162. min-width: calc(100%/3 - 10px/3);
  1163. }
  1164. .sidebar .projects .project .buttons ul.col-3 li:nth-child(-n+3) {
  1165. margin-top: 0;
  1166. }
  1167. .sidebar .projects .project .buttons ul.col-3 li + li:nth-child(3n+1) {
  1168. margin-left: 0;
  1169. }
  1170.  
  1171. /* affiliates */
  1172. .sidebar .affiliates ul li {
  1173. border-top: 1px solid var(--body-background);
  1174. }
  1175. .sidebar .affiliates ul li:last-child {
  1176. border-bottom: 1px solid var(--body-background);
  1177. }
  1178. .sidebar .affiliates ul li a {
  1179. display: -webkit-box;
  1180. display: -webkit-flex;
  1181. display: -ms-flexbox;
  1182. display: flex;
  1183. -webkit-box-pack: justify;
  1184. -ms-flex-pack: justify;
  1185. justify-content: space-between;
  1186. -webkit-box-align: center;
  1187. -ms-flex-align: center;
  1188. align-items: center;
  1189. padding: 10px;
  1190. -moz-transition-property: background-color;
  1191. -o-transition-property: background-color;
  1192. -webkit-transition-property: background-color;
  1193. transition-property: background-color;
  1194. }
  1195. .sidebar .affiliates ul li a:hover {
  1196. background-color: #fafafa;
  1197. }
  1198. .sidebar .affiliates .profile {
  1199. display: -webkit-box;
  1200. display: -webkit-flex;
  1201. display: -ms-flexbox;
  1202. display: flex;
  1203. -webkit-box-align: center;
  1204. -ms-flex-align: center;
  1205. align-items: center;
  1206. }
  1207. .sidebar .affiliates .profile .img {
  1208. width: 45px;
  1209. height: 45px;
  1210. border-radius: 3px;
  1211. overflow: hidden;
  1212. }
  1213. .sidebar .affiliates .profile .img img {
  1214. width: 100%;
  1215. }
  1216. .sidebar .affiliates .profile .info {
  1217. margin-left: 15px;
  1218. }
  1219. .sidebar .affiliates .profile .info span {
  1220. display: block;
  1221. line-height: 1;
  1222. }
  1223. .sidebar .affiliates .profile .info span.url {
  1224. font-size: 1.14285rem;
  1225. font-weight: 600;
  1226. }
  1227. .sidebar .affiliates .profile .info span.title {
  1228. font-size: 0.857rem;
  1229. margin-top: 5px;
  1230. }
  1231. .sidebar .affiliates .button svg {
  1232. stroke: var(--accent);
  1233. }
  1234.  
  1235. /* -------------------------------------------
  1236. * posts
  1237. * ------------------------------------------ */
  1238.  
  1239. /* entries */
  1240. .sidebar-left .entries {
  1241. margin-left: calc({select:Sidebar Width} + 50px);
  1242. }
  1243. .sidebar-right .entries {
  1244. margin-right: calc({select:Sidebar Width} + 50px);
  1245. }
  1246.  
  1247. /* post basic */
  1248. .post .post-content {
  1249. width: {select:Post Width};
  1250. }
  1251. .post .post-media .width_fix iframe {
  1252. width: 100% !important;
  1253. }
  1254. .post .post-media .width_fix iframe.tumblr_audio_player {
  1255. height: 85px;
  1256. }
  1257. .post .post-container {
  1258. padding: 25px;
  1259. }
  1260. .post .post-container .post-title {
  1261. font-weight: 600;
  1262. font-size: 1.714285rem;
  1263. margin-top: -0.4em;
  1264. line-height: 1.5em;
  1265. }
  1266. .post .post-container .post-title + .post-body {
  1267. margin-top: 15px;
  1268. padding-top: 15px;
  1269. border-top: 1px solid var(--body-background);
  1270. }
  1271. .post .post-body .caption + .caption {
  1272. padding-top: 25px;
  1273. margin-top: 25px;
  1274. border-top: 1px solid var(--body-background);
  1275. }
  1276.  
  1277. /* reblog */
  1278. .post .post-body .caption .reblog-head .reblog-avatar {
  1279. width: 25px;
  1280. height: 25px;
  1281. border-radius: 3px;
  1282. overflow: hidden;
  1283. margin-right: 10px;
  1284. }
  1285. .post .post-body .caption .reblog-head .reblog-avatar img {
  1286. width: 100%;
  1287. }
  1288. .post .post-body .caption .reblog-head .reblog-username {
  1289. color: var(--text-color);
  1290. font-size: 0.9285rem;
  1291. font-weight: 600;
  1292. padding: 0;
  1293. background: none;
  1294. }
  1295. .post .post-body .caption .reblog-content {
  1296. margin-top: 15px;
  1297. }
  1298.  
  1299. /* quotes */
  1300. .post .post-body .quote {
  1301. font-family: var(--serif);
  1302. font-size: 1.714285rem;
  1303. line-height: 1.1em;
  1304. }
  1305. .post .post-body .quote .quotation-mark {
  1306. display: inline;
  1307. vertical-align: middle;
  1308. font-size: 1.5em;
  1309. }
  1310. .post .post-body .quote .quotation-mark:first-child {
  1311. margin-right: 5px;
  1312. }
  1313. .post .post-body .quote .quotation-mark:last-child {
  1314. margin-left: 5px;
  1315. }
  1316. .post .post-body .quote-source {
  1317. margin-top: 1em;
  1318. }
  1319.  
  1320. /* chat */
  1321. .post .post-body ul.chat {
  1322. padding: 0;
  1323. border: 1px solid var(--body-background);
  1324. border-top: none;
  1325. }
  1326. .post .post-body ul.chat li {
  1327. display: -webkit-box;
  1328. display: -webkit-flex;
  1329. display: -ms-flexbox;
  1330. display: flex;
  1331. border-top: 1px solid var(--body-background);
  1332. }
  1333. .post .post-body ul.chat li span {
  1334. display: block;
  1335. padding: 10px;
  1336. }
  1337. .post .post-body ul.chat li .label {
  1338. -webkit-flex-shrink: 0;
  1339. -moz-flex-shrink: 0;
  1340. -ms-flex-negative: 0;
  1341. flex-shrink: 0;
  1342. border-right: 1px solid var(--body-background);
  1343. font-weight: 600;
  1344. }
  1345.  
  1346. /* asks */
  1347. .post .ask, .post .answer {
  1348. position: relative;
  1349. padding: 30px 15px 15px;
  1350. border-radius: 5px;
  1351. }
  1352. .post .ask .asker,
  1353. .post .answer .answerer {
  1354. padding-bottom: 15px;
  1355. }
  1356. .post .ask .asker .asker-avatar,
  1357. .post .answer .answerer .answerer-avatar {
  1358. position: absolute;
  1359. top: -30px;
  1360. width: 60px;
  1361. height: 60px;
  1362. overflow: hidden;
  1363. padding: 5px;
  1364. border-radius: 50%;
  1365. }
  1366. .post .ask .asker .asker-avatar:before,
  1367. .post .answer .answerer .answerer-avatar::before {
  1368. content: '';
  1369. position: absolute;
  1370. top: 0;
  1371. left: 0;
  1372. right: 0;
  1373. bottom: 0;
  1374. display: block;
  1375. }
  1376. .post .ask .asker .asker-avatar img,
  1377. .post .answer .answerer .answerer-avatar img {
  1378. position: relative;
  1379. display: block;
  1380. width: 100%;
  1381. border-radius: 50%;
  1382. }
  1383. .post .ask .asker .asker-name,
  1384. .post .answer .answerer .answerer-name {
  1385. margin-top: 10px;
  1386. font-size: 1.14285rem;
  1387. font-weight: 600;
  1388. line-height: 1em;
  1389. }
  1390. .post .ask .asker .asker-name::after,
  1391. .post .answer .answerer .answerer-name::after {
  1392. font-size: 0.857rem;
  1393. font-weight: 400;
  1394. opacity: 0.7;
  1395. }
  1396. .post .ask .asker .asker-name a,
  1397. .post .answer .answerer .answerer-name a {
  1398. background: none;
  1399. border: none;
  1400. padding: 0;
  1401. color: inherit;
  1402. }
  1403. .post .ask .asker-question,
  1404. .post .answer .answerer-answer {
  1405. margin-top: 10px;
  1406. }
  1407. .post .ask + .caption,
  1408. .post .answer + .caption {
  1409. margin-top: 25px;
  1410. }
  1411. .post .ask {
  1412. margin-top: 30px !important;
  1413. background-color: var(--body-background);
  1414. }
  1415. .post .ask .asker {
  1416. border-bottom: 1px solid #e3e3e3;
  1417. }
  1418. .post .ask .asker .asker-avatar {
  1419. border-color: var(--accent);
  1420. }
  1421. .post .ask .asker .asker-avatar::before {
  1422. background-image: linear-gradient(135deg, {color:Text Color} 50%, {color:Accent} 50%);
  1423. }
  1424. .post .ask .asker .asker-name::after {
  1425. content: "sent a message";
  1426. margin-left: 5px;
  1427. }
  1428. .post .answer {
  1429. margin-top: 45px;
  1430. background-color: var(--accent);
  1431. color: #ffffff;
  1432. }
  1433. .post .answer .answerer {
  1434. border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  1435. }
  1436. .post .answer .answerer .answerer-avatar {
  1437. border-color: #ffffff;
  1438. }
  1439. .post .answer .answerer .answerer-avatar::before {
  1440. background-image: linear-gradient(135deg, #cccccc 50%, {color:Text Color} 50%);
  1441. }
  1442. .post .answer .answerer .answerer-name::after {
  1443. content: "answered";
  1444. margin-left: 5px;
  1445. }
  1446. .post .answer .answerer-answer a {
  1447. background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.75) 0);
  1448. color: #ffffff;
  1449. }
  1450. .post .answer .answerer-answer a:hover {
  1451. color: rgba(255, 255, 255, 0.85);
  1452. }
  1453.  
  1454. /* links */
  1455. .post .link-button {
  1456. word-break: break-word;
  1457. overflow: hidden;
  1458. display: block;
  1459. position: relative;
  1460. text-decoration: none;
  1461. }
  1462. .post .link-button .thumbnail img {
  1463. display: block;
  1464. margin: 0px;
  1465. }
  1466. .post .link-button .thumbnail::after {
  1467. background-image: linear-gradient(rgba(0, 0, 0, 0.439216), transparent 50%);
  1468. content: "";
  1469. display: block;
  1470. position: absolute;
  1471. top: 0;
  1472. left: 0;
  1473. right: 0;
  1474. bottom: 0;
  1475. }
  1476. .post .publisher-container {
  1477. margin-bottom: 4px;
  1478. display: block;
  1479. font-size: 0.9285rem;
  1480. line-height: 1em;
  1481. font-weight: 700;
  1482. word-break: break-all;
  1483. }
  1484. .post .publisher-container .publisher {
  1485. font-size: 0.857rem;
  1486. font-weight: 400;
  1487. line-height: 1em;
  1488. display: inline-block;
  1489. margin: 0px;
  1490. letter-spacing: 0.05em;
  1491. }
  1492. .post .publisher-container.if-thumbnail {
  1493. position: absolute;
  1494. top: 15px;
  1495. left: 20px;
  1496. right: 20px;
  1497. }
  1498. .post .publisher-container.if-thumbnail .publisher {
  1499. color: #ffffff;
  1500. }
  1501. .post .info-container {
  1502. padding: 20px 25px;
  1503. overflow: hidden;
  1504. background-color: #fafafa;
  1505. color: var(--text-color);
  1506. }
  1507. .post .info-container .title {
  1508. display: block;
  1509. font-size: 1.714285rem;
  1510. font-weight: 700;
  1511. line-height: 1.1;
  1512. text-align: left;
  1513. }
  1514. .post .info-container .title svg {
  1515. display: inline;
  1516. vertical-align: middle;
  1517. }
  1518. .post .info-container .excerpt {
  1519. display: block;
  1520. margin-top: 5px;
  1521. font-size: 1rem;
  1522. line-height: 1.5;
  1523. }
  1524. .post .info-container .author {
  1525. margin-top: 5px;
  1526. display: block;
  1527. font-size: 0.857rem;
  1528. font-weight: 400;
  1529. letter-spacing: 0.01em;
  1530. line-height: 1.25;
  1531. opacity: 0.5;
  1532. }
  1533.  
  1534. /* -------------------------------------------
  1535. * preview page fix
  1536. * ------------------------------------------*/
  1537.  
  1538. /*
  1539. NOTE:
  1540. the codes here are for fixing tumblr's customize page
  1541. to make the preview look the same as the actual page.
  1542. it does not change how the theme looks.
  1543. */
  1544.  
  1545. .tumblr_preview_marker___ {
  1546. display: none !important;
  1547. }
  1548.  
  1549. .home-banner .banner-side .inner .title-box + .tumblr_preview_marker___ + .desc-box::before {
  1550. content: "";
  1551. display: block;
  1552. width: 55px;
  1553. height: 2px;
  1554. margin: 25px 0;
  1555. background-color: var(--post-background);
  1556. }
  1557.  
  1558. .sidebar .about .img-box + .tumblr_preview_marker___ + .text-box {
  1559. margin-top: 25px;
  1560. }
  1561.  
  1562. /* -------------------------------------------
  1563. * CustomCss
  1564. * ------------------------------------------ */
  1565.  
  1566. {CustomCss}
  1567.  
  1568. </style>
  1569. </head>
  1570. <body class="{select:Tumblr Controls Style}">
  1571. <div class="wrapper">
  1572. <header id="header" class="{block:HomePage}page-{CurrentPage}{/block:HomePage} anm fadeInDown">
  1573. <nav class="navbar">
  1574. <div class="logo">
  1575. <a href="/">
  1576. <span class="logo-avatar"><img src="{PortraitURL-48}" alt="" /></span>
  1577. {block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}{block:ifnotNavbarTitle}{Name}{/block:ifnotNavbarTitle}
  1578. </a>
  1579. <form action="/search" method="get">
  1580. <div class="search">
  1581. <input type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
  1582. <button type="submit">
  1583. <i data-feather="search"></i>
  1584. </button>
  1585. </div>
  1586. </form>
  1587. </div>
  1588. <div class="menu">
  1589. <ul class="ns">
  1590. {block:ifNavbarLink1Title}<li><a href="{text:Navbar Link 1 Url}">{text:Navbar Link 1 Title}</a></li>{/block:ifNavbarLink1Title}
  1591. {block:ifNavbarLink2Title}<li><a href="{text:Navbar Link 2 Url}">{text:Navbar Link 2 Title}</a></li>{/block:ifNavbarLink2Title}
  1592. {block:ifNavbarLink3Title}<li><a href="{text:Navbar Link 3 Url}">{text:Navbar Link 3 Title}</a></li>{/block:ifNavbarLink3Title}
  1593. {block:ifNavbarLink4Title}<li><a href="{text:Navbar Link 4 Url}">{text:Navbar Link 4 Title}</a></li>{/block:ifNavbarLink4Title}
  1594. {block:ifNavbarLink5Title}<li><a href="{text:Navbar Link 5 Url}">{text:Navbar Link 5 Title}</a></li>{/block:ifNavbarLink5Title}
  1595. </ul>
  1596. </div>
  1597. </nav>
  1598. </header>
  1599. <main id="main">
  1600. <div class="banner">
  1601. {block:HomePage}
  1602. <div class="home-banner page-{CurrentPage} slider-position-{select:Slideshow Position}">
  1603. <div class="banner-side anm fadeIn">
  1604. <div class="bg imgFill">
  1605. <img src="{image:Slideshow Side}" alt="" />
  1606. </div>
  1607. <div class="inner anm fadeInLeft" data-anm-delay="1s" data-anm-duration="1s">
  1608. <div class="title-box">
  1609. <h1>{block:ifSlideshowTitle}{text:Slideshow Title}{/block:ifSlideshowTitle}{block:ifnotSlideshowTitle}{Title}{/block:ifnotSlideshowTitle}</h1>
  1610. </div>
  1611. {block:Description}<div class="desc-box">{Description}</div>{/block:Description}
  1612. <!--
  1613. If you wish to edit the desc-box content manually,
  1614. please replace the code above ( from { block:Description } to { /block:Description } ) with this one:
  1615. <div class="desc-box">Your text</div>
  1616. -->
  1617. </div>
  1618. </div>
  1619. <div class="banner-main anm slideInRight" data-anm-duration="2s">
  1620.  
  1621. <ul class="ns banner-slider">
  1622. {block:ifSlideshow1Image}<li class="imgFill"><img src="{image:Slideshow 1}" alt="" /></li>{/block:ifSlideshow1Image}
  1623. {block:ifSlideshow2Image}<li class="imgFill"><img src="{image:Slideshow 2}" alt="" /></li>{/block:ifSlideshow2Image}
  1624. {block:ifSlideshow3Image}<li class="imgFill"><img src="{image:Slideshow 3}" alt="" /></li>{/block:ifSlideshow3Image}
  1625. <!--
  1626. To add more slide(s), use the code below and add it before </ul>
  1627. <li class="imgFill"><img src="http://sample.com/image.jpg" alt="" /></li>
  1628. -->
  1629. </ul>
  1630.  
  1631. <ul class="ns banner-arrows">
  1632. <li class="prev">
  1633. <button type="button"><i data-feather="arrow-left"></i></button>
  1634. </li>
  1635. <li class="next">
  1636. <button type="button"><i data-feather="arrow-right"></i></button>
  1637. </li>
  1638. </ul>
  1639. </div>
  1640. </div>
  1641. {/block:HomePage}
  1642. <div class="default-banner {block:HomePage}page-{CurrentPage}{/block:HomePage} anm fadeIn" data-parallax="scroll" data-image-src="{image:Page Banner}" data-z-index="0"></div>
  1643. </div>
  1644. <div class="primary sidebar-{select:Sidebar Position}">
  1645. <div class="container clearfix">
  1646. <div class="sidebar">
  1647. <div class="sidebar-inner">
  1648. <div class="sidebar-section about anm fadeInUp">
  1649. <div class="section-head">
  1650. <h3 class="title">About</h3>
  1651. </div>
  1652. <div class="section-content">
  1653. <div class="img-box">
  1654. {block:ifSidebarAvatarImage}<img src="{image:Sidebar Avatar}" alt="" />{/block:ifSidebarAvatarImage}
  1655. {block:ifnotSidebarAvatarImage}<img src="{PortraitURL-128}" alt="" />{/block:ifnotSidebarAvatarImage}
  1656. </div>
  1657. {block:Description}<div class="text-box">{Description}</div>{/block:Description}
  1658. </div>
  1659. </div><!-- //sidebar-section about -->
  1660. <div class="sidebar-section links anm fadeInUp">
  1661. <div class="section-head">
  1662. <h3 class="title">Links</h3>
  1663. </div>
  1664. <div class="section-content">
  1665. <ul class="ns">
  1666. <!-- start of each links -->
  1667. <li>
  1668. <a href="/" target="_blank">
  1669. <i data-feather="facebook"></i>
  1670. <div>
  1671. <span class="name">facebook</span>
  1672. <span class="url">@username</span>
  1673. </div>
  1674. </a>
  1675. </li>
  1676. <!-- end of each link -->
  1677. <!-- start of each links -->
  1678. <li>
  1679. <a href="/" target="_blank">
  1680. <i data-feather="twitter"></i>
  1681. <div>
  1682. <span class="name">twitter</span>
  1683. <span class="url">@username</span>
  1684. </div>
  1685. </a>
  1686. </li>
  1687. <!-- end of each link -->
  1688. <!-- start of each links -->
  1689. <li>
  1690. <a href="/" target="_blank">
  1691. <i data-feather="instagram"></i>
  1692. <div>
  1693. <span class="name">instagram</span>
  1694. <span class="url">@username</span>
  1695. </div>
  1696. </a>
  1697. </li>
  1698. <!-- end of each link -->
  1699. </ul>
  1700. </div>
  1701. </div><!-- //sidebar-section links -->
  1702. <div class="sidebar-section events anm fadeInUp">
  1703. <div class="section-head">
  1704. <h3 class="title">Events</h3>
  1705. </div>
  1706. <div class="section-content">
  1707. <ul class="ns">
  1708. <!-- start of each event -->
  1709. <li>
  1710. <div class="date">
  1711. <span class="day">01<sup>st</sup></span>
  1712. <span class="month">Jan 20</span>
  1713. </div>
  1714. <div class="event">
  1715. <span class="title">Event title</span>
  1716. <span class="location">
  1717. <i data-feather="map-pin"></i>
  1718. Location
  1719. </span>
  1720. </div>
  1721. </li>
  1722. <!-- end of each event -->
  1723. </ul>
  1724. </div>
  1725. </div><!-- //sidebar-section events -->
  1726. <div class="sidebar-section projects anm fadeInUp">
  1727. <div class="section-head">
  1728. <h3 class="title">Projects</h3>
  1729. </div>
  1730. <div class="section-content">
  1731. <!-- start of each project -->
  1732. <div class="project">
  1733. <div class="img-box">
  1734. <img src="https://sample.com/img.jpg" alt="" />
  1735. </div>
  1736. <div class="text-box">
  1737. <div class="info">
  1738. <h4 class="title">Project Title</h4>
  1739. <span class="desc">Short description</span>
  1740. </div>
  1741. <div class="detail">
  1742. <dl>
  1743. <dt>date</dt>
  1744. <dd>January 2020</dd>
  1745. <dt>status</dt>
  1746. <dd>Ongoing</dd>
  1747. </dl>
  1748. </div>
  1749. <div class="buttons">
  1750. <!--
  1751. change col-* for how many links for each row (1~3)
  1752. -->
  1753. <ul class="ns col-2">
  1754. <li><a href="javascript:void(0)">Link 1</a></li>
  1755. <li><a href="javascript:void(0)">Link 2</a></li>
  1756. </ul>
  1757. </div>
  1758. </div>
  1759. </div>
  1760. <!-- end of each project -->
  1761. </div>
  1762. </div><!-- //sidebar-section projects -->
  1763. <div class="sidebar-section affiliates anm fadeInUp">
  1764. <div class="section-head">
  1765. <h3 class="title">affiliates</h3>
  1766. </div>
  1767. <div class="section-content">
  1768. <ul class="ns">
  1769. <!-- start of each affiliate -->
  1770. <li>
  1771. <a href="/" target="_blank">
  1772. <div class="profile">
  1773. <div class="img">
  1774. <img src="https://sample.com/image.jpg" alt="" />
  1775. </div>
  1776. <div class="info">
  1777. <span class="url">username</span>
  1778. <span class="title">Blog Title</span>
  1779. </div>
  1780. </div>
  1781. <div class="button">
  1782. <i data-feather="plus-square"></i>
  1783. </div>
  1784. </a>
  1785. </li>
  1786. <!-- end of each affiliate -->
  1787. </ul>
  1788. </div>
  1789. </div><!-- //sidebar-section affiliates -->
  1790. </div><!-- //sidebar-inner -->
  1791. </div><!-- //sidebar -->
  1792. <div class="entries">
  1793. <div class="posts">
  1794. {block:TagPage}<div class="posts-head anm fadeInUp">
  1795. <h2 class="title">Posts tagged &ldquo;{Tag}&rdquo;</h2>
  1796. </div>{/block:TagPage}
  1797. {block:DayPage}<div class="posts-head anm fadeInUp">
  1798. <h2 class="title">Posts from {Month} {DayOfMonth}, {Year}</h2>
  1799. </div>{/block:DayPage}
  1800. {block:SearchPage}<div class="posts-head anm fadeInUp">
  1801. <h2 class="title"><span class="search-result result-{SearchResultCount}">{SearchResultCount}</span> for &ldquo;{SearchQuery}&rdquo;</h2>
  1802. </div>{/block:SearchPage}
  1803. {block:Posts}
  1804. <article class="post anm fadeInUp">
  1805. <div class="post-main">
  1806. <div class="post-content">
  1807. {block:Text}<div class="post-container">
  1808. {block:Title}<div class="post-title">{Title}</div>{/block:Title}
  1809. <div class="post-body post-style">
  1810. {block:NotReblog}<div class="caption">{Body}</div>{/block:NotReblog}
  1811. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1812. <div class="reblog-head">
  1813. <div class="reblog-avatar">
  1814. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1815. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1816. </div>
  1817. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1818. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1819. </div>
  1820. <div class="reblog-content">{Body}</div>
  1821. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1822. </div>
  1823. </div>{/block:Text}
  1824. {block:Photo}<div class="post-media">
  1825. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag}
  1826. </div>
  1827. {block:Caption}<div class="post-container">
  1828. <div class="post-body post-style">
  1829. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1830. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1831. <div class="reblog-head">
  1832. <div class="reblog-avatar">
  1833. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1834. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1835. </div>
  1836. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1837. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1838. </div>
  1839. <div class="reblog-content">{Body}</div>
  1840. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1841. </div>
  1842. </div>{/block:Caption}{/block:Photo}
  1843. {block:Photoset}<div class="post-media">
  1844. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1845. {block:Photos}<div class="photo-data">
  1846. <div class="pxu-photo">
  1847. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
  1848. </div><!-- pxu-photo -->
  1849. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1850. </div><!-- photo-data -->{/block:Photos}
  1851. </div><!-- photo-slideshow-->
  1852. </div>
  1853. {block:Caption}<div class="post-container">
  1854. <div class="post-body post-style">
  1855. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1856. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1857. <div class="reblog-head">
  1858. <div class="reblog-avatar">
  1859. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1860. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1861. </div>
  1862. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1863. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1864. </div>
  1865. <div class="reblog-content">{Body}</div>
  1866. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1867. </div>
  1868. </div>{/block:Caption}
  1869. {block:Hidden}{block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}{/block:ContentSource}{/block:Hidden}{/block:Photoset}
  1870. {block:Video}<div class="post-media">
  1871. <div class="video" style="margin-bottom:-5px;">{Video-500}</div>
  1872. </div>
  1873. {block:Caption}<div class="post-container">
  1874. <div class="post-body post-style">
  1875. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1876. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1877. <div class="reblog-head">
  1878. <div class="reblog-avatar">
  1879. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1880. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1881. </div>
  1882. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1883. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1884. </div>
  1885. <div class="reblog-content">{Body}</div>
  1886. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1887. </div>
  1888. </div>{/block:Caption}{/block:Video}
  1889. {block:Audio}<div class="post-media">
  1890. <div class="width_fix">{AudioEmbed-500}</div>
  1891. </div>
  1892. {block:Caption}<div class="post-container">
  1893. <div class="post-body post-style">
  1894. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1895. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1896. <div class="reblog-head">
  1897. <div class="reblog-avatar">
  1898. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1899. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1900. </div>
  1901. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1902. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1903. </div>
  1904. <div class="reblog-content">{Body}</div>
  1905. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1906. </div>
  1907. </div>{/block:Caption}{/block:Audio}
  1908. {block:Link}<div class="post-media">
  1909. <a href="{Url}" target="_blank" class="link-button">
  1910. {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail}
  1911. <div class="info-container">
  1912. {block:Host}<div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}">
  1913. <div class="publisher">{Host}</div>
  1914. </div>{/block:Host}
  1915. <div class="title">{Name} <i data-feather="chevron-right"></i></div>
  1916. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  1917. {block:Author}<div class="author">{Author}</div>{/block:Author}
  1918. </div>
  1919. </a>
  1920. </div>
  1921. {block:Description}<div class="post-container">
  1922. <div class="post-body post-style">
  1923. {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog}
  1924. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1925. <div class="reblog-head">
  1926. <div class="reblog-avatar">
  1927. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1928. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1929. </div>
  1930. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1931. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1932. </div>
  1933. <div class="reblog-content">{Body}</div>
  1934. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1935. </div>
  1936. </div>{/block:Description}{/block:Link}
  1937. {block:Quote}<div class="post-container">
  1938. {block:Title}<div class="post-title">{Title}</div>{/block:Title}
  1939. <div class="post-body post-style">
  1940. <div class="quote"><span class="quotation-mark">&ldquo;</span>{Quote}<span class="quotation-mark">&rdquo;</span></div>
  1941. {block:Source}<div class="quote-source">— {Source}</div>{/block:Source}
  1942. </div>
  1943. </div>{/block:Quote}
  1944. {block:Chat}<div class="post-container">
  1945. {block:Title}<div class="post-title">{Title}</div>{/block:Title}
  1946. <div class="post-body post-style">
  1947. <ul class="ns chat">
  1948. {block:Lines}<li class="user_{UserNumber}">
  1949. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1950. <span class="line">{Line}</span>
  1951. </li>{/block:Lines}
  1952. </ul>
  1953. </div>
  1954. </div>{/block:Chat}
  1955. {block:Answer}<div class="post-container">
  1956. <div class="post-body post-style">
  1957. <div class="ask">
  1958. <div class="asker">
  1959. <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div>
  1960. <div class="asker-name">{Asker}</div>
  1961. </div>
  1962. <div class="asker-question">{Question}</div>
  1963. </div>
  1964. {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  1965. {block:Answerer}<div class="answer">
  1966. <div class="answerer">
  1967. <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div>
  1968. <div class="answerer-name">{Answerer}</div>
  1969. </div>
  1970. <div class="answerer-answer">{Answer}</div>
  1971. </div>{/block:Answerer}
  1972. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1973. <div class="reblog-head">
  1974. <div class="reblog-avatar">
  1975. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1976. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1977. </div>
  1978. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1979. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1980. </div>
  1981. <div class="reblog-content">{Body}</div>
  1982. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1983. </div>
  1984. </div>{/block:Answer}
  1985. </div><!-- //post-content -->
  1986. {block:Date}<div class="post-side">
  1987. <ul class="ns">
  1988. <li class="notes">
  1989. <i data-feather="star"></i>
  1990. <a href="{Permalink}">{NoteCount}</a><span class="note-label note-{NoteCount}"></span></li>
  1991. <li class="date">
  1992. <i data-feather="calendar"></i>
  1993. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
  1994. </li>
  1995. {block:RebloggedFrom}<li class="share">
  1996. <i data-feather="share-2"></i>
  1997. <a href="{ReblogRootURL}" target="_blank" title="{ReblogRootName}">source</a>
  1998. <span>/</span>
  1999. <a href="{ReblogParentURL}" target="_blank" title="{ReblogParentName}">via</a>
  2000. </li>{/block:RebloggedFrom}
  2001. <li class="action">
  2002. <a href="{ReblogURL}" class="action-btn"><i data-feather="refresh-cw"></i></a>
  2003. <span class="action-btn">{LikeButton size="24" color="black"}<i data-feather="heart"></i></span>
  2004. </li>
  2005. </ul>
  2006. </div>{/block:Date}
  2007. </div><!-- //post-main -->
  2008. {block:HasTags}<div class="post-foot">
  2009. <ul class="ns">
  2010. <li class="label"><i data-feather="tag"></i>tagged as</li>
  2011. {block:Tags}<li><a href="{TagUrl}">{Tag}</a></li>{/block:Tags}
  2012. </ul>
  2013. </div>{/block:HasTags}
  2014. </article>
  2015. {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes}
  2016. {/block:Posts}
  2017. </div><!-- //posts -->
  2018. {block:Pagination}<div class="pagination anm fadeInUp">
  2019. <ul class="ns">
  2020. {block:PreviousPage}<li class="jump prev">
  2021. <a href="{PreviousPage}"><i data-feather="arrow-left"></i></a>
  2022. </li>{/block:PreviousPage}
  2023. <li class="num">{block:JumpPagination length="8"}
  2024. {block:CurrentPage}<a class="current" href="{URL}">{PageNumber}</a>{/block:CurrentPage}
  2025. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  2026. {/block:JumpPagination}</li>
  2027. {block:NextPage}<li class="jump next">
  2028. <a href="{NextPage}"><i data-feather="arrow-right"></i></a>
  2029. </li>{/block:NextPage}
  2030. </ul>
  2031. </div>{/block:Pagination}
  2032. </div><!-- //entries -->
  2033. </div><!-- //container -->
  2034. <div class="scroll-top">
  2035. <button type="button"><i data-feather="chevron-up"></i></button>
  2036. </div>
  2037. </div><!-- //wrapper -->
  2038. </main>
  2039. <footer id="footer" class="anm fadeIn">
  2040. <div class="footer-top">
  2041. <div class="container">
  2042. <div class="left anm fadeInUp" data-anm-delay=".5s">
  2043. <h3 class="title">Disclaimer</h3>
  2044. <p class="text">Your text here</p>
  2045. </div>
  2046. <div class="right anm fadeInUp" data-anm-delay="1s">
  2047. <h3 class="title">Site Info</h3>
  2048. <div class="text">
  2049. <dl>
  2050. <dt>About</dt>
  2051. <dd>Subject</dd>
  2052. </dl>
  2053. <dl>
  2054. <dt>Established</dt>
  2055. <dd>Date</dd>
  2056. </dl>
  2057. {block:ifOnlineCounterCode}<dl>
  2058. <dt>online</dt>
  2059. <dd>{text:Online Counter Code}</dd>
  2060. </dl>{/block:ifOnlineCounterCode}
  2061. {block:ifHitsCounterCode}<dl>
  2062. <dt>total hits</dt>
  2063. <dd>{text:Hits Counter Code}</dd>
  2064. </dl>{/block:ifHitsCounterCode}
  2065. <dl>
  2066. <dt>Theme by</dt>
  2067. <dd><a href="https://shudesigns.tumblr.com" target="_blank">ShuDesigns</a></dd>
  2068. </dl>
  2069. </div>
  2070. </div>
  2071. </div>
  2072. </div><!-- //footer-top -->
  2073. <div class="footer-bottom anm fadeIn" data-anm-delay="1.5s">
  2074. <div class="container">
  2075. <div class="left">ⓒ {CopyrightYears} {Name} All Rights Reserved.</div>
  2076. <div class="right">
  2077. <ul class="ns">
  2078. <li>Theme by <a href="https://shudesigns.tumblr.com" target="_blank">shudesigns</a></li>
  2079. <li>Powered by <a href="http://tumblr.com" target="_blank">tumblr</a></li>
  2080. </ul>
  2081. </div>
  2082. </div>
  2083. <div class="scroll-top">
  2084. <button type="button"><i data-feather="chevron-up"></i></button>
  2085. </div>
  2086. </div><!-- //footer-bottom -->
  2087. </footer>
  2088. </div>
  2089. <!-- scripts -->
  2090. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  2091. <script src="//unpkg.com/feather-icons"></script>
  2092. <script src="https://static.tumblr.com/ickcbh2/KIPplishk/plugins.js"></script>
  2093. <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script>
  2094. <script src="https://static.tumblr.com/ickcbh2/nDXq57lb7/main.min.js"></script>
  2095. <script>
  2096. $(function() {
  2097.  
  2098. // animation
  2099. {block:ifAnimation}var boolean = true;{/block:ifAnimation}
  2100. {block:ifnotAnimation}var boolean = false;{/block:ifnotAnimation}
  2101. scrollAnimation(boolean);
  2102.  
  2103. // audio
  2104. var audioBG = '{color:Accent}', audioText = '#ffffff';
  2105. audio(audioBG, audioText);
  2106.  
  2107. {block:HomePage}
  2108. // index slideshow
  2109. var speed = 1500,
  2110. autoplay = true, // true or false
  2111. autoplaySpeed = 8000;
  2112. slideshow(speed, autoplay, autoplaySpeed);
  2113. {/block:HomePage}
  2114. });
  2115. </script>
  2116. </body>
  2117. </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!