API tools faq
paste
Advertisement
roxiestheme

Theme 61

roxiestheme
Feb 13th, 2019
7,978
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 65.34 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. Theme 61 | What a Time
  7. Designed by ShuDesigns
  8. shudesigns.tumblr.com
  9. 2019 ⓒ All Rights Reserved.
  10.  
  11. ---
  12.  
  13. >> CREDITS
  14.  
  15. Google Fonts
  16. FontAwesome(v4.7) by Fonticons, Inc.
  17.  
  18. imgLiquid by Alejandro Emparan
  19. style-my-tooltips by malihu
  20. Extended photoset by PixelUnion, modified by bychloethemes
  21. Video width fix by shythemes
  22.  
  23. -->
  24. <meta charset="UTF-8">
  25. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  26.  
  27. {block:Hidden}
  28. <meta name="color:Text Color" content="#757575" />
  29. <meta name="color:Link Color" content="#656565" />
  30. <meta name="color:Color One" content="#ffafbd" />
  31. <meta name="color:Color Two" content="#ffc3a0" />
  32. <meta name="color:Banner Text Color" content="#ffffff" />
  33. <meta name="color:Body Background" content="#eeeeee" />
  34. <meta name="color:Container Background" content="#f5f5f5" />
  35. <meta name="color:Navbar Background" content="#fafafa" />
  36. <meta name="color:Post Background" content="#ffffff" />
  37.  
  38. <meta name="image:Banner" content="" />
  39. <meta name="image:Sidebar" content="" />
  40.  
  41. <meta name="if:Show Banner" content="1" />
  42. <meta name="if:Show Banner Text" content="1" />
  43. <meta name="if:Show Sidebar Title" 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 Shape" content="block" title="Curve" />
  49. <meta name="select:Banner Shape" content="none" title="Normal" />
  50.  
  51. <meta name="select:Banner Attachment" content="fixed" title="Fixed" />
  52. <meta name="select:Banner Attachment" content="absolute" title="Scroll" />
  53.  
  54. <meta name="select:Banner Blending Mode" content="normal" title="Normal" />
  55. <meta name="select:Banner Blending Mode" content="multiply" title="Multiply" />
  56. <meta name="select:Banner Blending Mode" content="overlay" title="Overlay" />
  57. <meta name="select:Banner Blending Mode" content="screen" title="Screen" />
  58.  
  59. <meta name="select:Sidebar Position" content="left" title="Left" />
  60. <meta name="select:Sidebar Position" content="right" title="Right" />
  61.  
  62. <meta name="select:Sidebar Width" content="200px" title="200px" />
  63. <meta name="select:Sidebar Width" content="175px" title="175px" />
  64. <meta name="select:Sidebar Width" content="225px" title="225px" />
  65. <meta name="select:Sidebar Width" content="250px" title="250px" />
  66.  
  67. <meta name="select:Post Width" content="540px" title="540px" />
  68. <meta name="select:Post Width" content="400px" title="400px" />
  69. <meta name="select:Post Width" content="500px" title="500px" />
  70.  
  71. <meta name="text:Body Font Size" content="14px" />
  72.  
  73. <meta name="text:Tumblr Controls Opacity" content="1" />
  74. <meta name="text:Banner Image Opacity" content="1" />
  75.  
  76. <meta name="text:Banner Title" content="" />
  77. <meta name="text:Banner Subtitle" content="" />
  78. <meta name="text:Navbar Title" content="" />
  79. <meta name="text:Sidebar Title" content="" />
  80.  
  81. <meta name="text:Navbar Link 1 Title" content="home" />
  82. <meta name="text:Navbar Link 1 Url" content="/" />
  83. <meta name="text:Navbar Link 2 Title" content="ask" />
  84. <meta name="text:Navbar Link 2 Url" content="/ask" />
  85. <meta name="text:Navbar Link 3 Title" content="" />
  86. <meta name="text:Navbar Link 3 Url" content="" />
  87. <meta name="text:Navbar Link 4 Title" content="" />
  88. <meta name="text:Navbar Link 4 Url" content="" />
  89. <meta name="text:Navbar Link 5 Title" content=""/>
  90. <meta name="text:Navbar Link 5 Url" content="" />
  91.  
  92. <meta name="text:Sidebar Link 1 Title" content="facebook"/>
  93. <meta name="text:Sidebar Link 1 Icon" content="facebook" />
  94. <meta name="text:Sidebar Link 1 Url" content="" />
  95. <meta name="text:Sidebar Link 2 Title" content="twitter"/>
  96. <meta name="text:Sidebar Link 2 Icon" content="twitter" />
  97. <meta name="text:Sidebar Link 2 Url" content="" />
  98. <meta name="text:Sidebar Link 3 Title" content="instagram"/>
  99. <meta name="text:Sidebar Link 3 Icon" content="instagram" />
  100. <meta name="text:Sidebar Link 3 Url" content="" />
  101. <meta name="text:Sidebar Link 4 Title" content="youtube"/>
  102. <meta name="text:Sidebar Link 4 Icon" content="youtube-play" />
  103. <meta name="text:Sidebar Link 4 Url" content="" />
  104. {/block:Hidden}
  105.  
  106. <title>{block:PostTitle}{PostTitle} -{/block:PostTitle}{Title}</title>
  107. <link rel="shortcut icon" type="image/x-icon" href="{Favicon}" />
  108. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  109.  
  110. <link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,700|Source+Sans+Pro:400,600,700" />
  111. <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  112. <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/ickcbh2/0PQpmwkof/layout.min.css" />
  113.  
  114. <style type="text/css">
  115.  
  116. /* -------------------------------------------
  117. * variables
  118. * ------------------------------------------ */
  119.  
  120. :root {
  121.  
  122. /* fonts */
  123. --sans: "Source Sans Pro", "Helvetica", "Lucida Grande", "Arial", sans-serif;
  124. --serif: "PT Serif", "Times", "Times New Roman", serif;
  125. --icons: "FontAwesome" !important;
  126. --body-font-size: {text:Body Font Size};
  127.  
  128. /* colors */
  129. --text-color: {color:Text Color};
  130. --link-color: {color:Link Color};
  131. --color-one: {color:Color One};
  132. --color-two: {color:Color Two};
  133. --banner-text-color: {color:Banner Text Color};
  134. --body-background: {color:Body Background};
  135. --container-background: {color:Container Background};
  136. --navbar-background: {color:Navbar Background};
  137. --post-background: {color:Post Background};
  138.  
  139. }
  140.  
  141. /* -------------------------------------------
  142. * layout
  143. * ------------------------------------------ */
  144.  
  145. .wrapper {
  146. min-width: 1000px;
  147. }
  148. .container {
  149. width: calc({select:Post Width} + {select:Sidebar Width} + 75px);
  150. margin: 0 auto;
  151. }
  152.  
  153. /* -------------------------------------------
  154. * header
  155. * ------------------------------------------ */
  156.  
  157. #header {
  158. position: relative;
  159. }
  160.  
  161. /* banner */
  162. #header .banner {
  163. position: {select:Banner Attachment};
  164. top: 0;
  165. left: 0;
  166. right: 0;
  167. height: calc(35vh + 150px);
  168. overflow: hidden;
  169. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  170. }
  171. #header .banner .banner-img {
  172. position: absolute;
  173. top: 0;
  174. left: 0;
  175. right: 0;
  176. bottom: 0;
  177. opacity: {text:Banner Image Opacity};
  178. mix-blend-mode: {select:Banner Blending Mode};
  179. }
  180. #header .banner svg {
  181. position: absolute;
  182. z-index: 1;
  183. bottom: -1px;
  184. display: block;
  185. width: 100%;
  186. }
  187. #header .banner-text {
  188. position: relative;
  189. display: -webkit-box;
  190. display: -webkit-flex;
  191. display: -ms-flexbox;
  192. display: flex;
  193. -webkit-box-orient: vertical;
  194. -webkit-box-direction: normal;
  195. -ms-flex-direction: column;
  196. flex-direction: column;
  197. -webkit-box-pack: center;
  198. -ms-flex-pack: center;
  199. justify-content: center;
  200. -webkit-box-align: center;
  201. -ms-flex-align: center;
  202. align-items: center;
  203. height: 35vh;
  204. color: {color:Banner Text Color};
  205. }
  206. #header .banner-text .title {
  207. margin: 0;
  208. font-family: var(--serif);
  209. font-size: 2em;
  210. line-height: 1em;
  211. }
  212. #header .banner-text .title + .sub {
  213. margin-top: 7.5px;
  214. }
  215. #header .banner-text .sub {
  216. font-size: 0.75em;
  217. letter-spacing: 0.1em;
  218. line-height: 1em;
  219. }
  220.  
  221. /* navbar */
  222. #header .navbar {
  223. position: relative;
  224. z-index: 99;
  225. background-color: {color:Navbar Background};
  226. overflow: hidden;
  227. border-top-left-radius: 5px;
  228. border-top-right-radius: 5px;
  229. display: -webkit-box;
  230. display: -webkit-flex;
  231. display: -ms-flexbox;
  232. display: flex;
  233. -webkit-box-pack: justify;
  234. -ms-flex-pack: justify;
  235. justify-content: space-between;
  236. -webkit-box-align: center;
  237. -ms-flex-align: center;
  238. align-items: center;
  239. padding: 0 25px 0 20px;
  240. }
  241. #header .navbar{block:ifShowBanner}.sticky{/block:ifShowBanner} {
  242. position: fixed;
  243. top: 0;
  244. left: calc(50% - {select:Post Width}/2 - {select:Sidebar Width}/2 - 75px/2);
  245. border-top-left-radius: 0;
  246. border-top-right-radius: 0;
  247. }
  248. #header .navbar ul {
  249. display: -webkit-box;
  250. display: -webkit-flex;
  251. display: -ms-flexbox;
  252. display: flex;
  253. color: {color:Text Color};
  254. }
  255. #header .navbar ul.nav-head {
  256. -webkit-box-align: center;
  257. -ms-flex-align: center;
  258. align-items: center;
  259. }
  260. #header .navbar ul.nav-head li + li {
  261. margin-left: 15px;
  262. }
  263. #header .navbar ul.nav-head li.nav-head-avatar {
  264. width: 30px;
  265. height: 30px;
  266. border-radius: 50%;
  267. overflow: hidden;
  268. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  269. }
  270. #header .navbar ul.nav-head li.nav-head-avatar img {
  271. display: block;
  272. width: 100%;
  273. }
  274. #header .navbar ul.nav-head li.nav-head-title {
  275. font-size: 1.25em;
  276. font-weight: 700;
  277. line-height: 1em;
  278. }
  279. #header .navbar ul.nav-head li.nav-head-title a:hover {
  280. color: {color:Link Color};
  281. }
  282. #header .navbar ul.nav-menu {
  283. -webkit-box-pack: end;
  284. -ms-flex-pack: end;
  285. justify-content: flex-end;
  286. -webkit-box-align: stretch;
  287. -ms-flex-align: stretch;
  288. align-items: stretch;
  289. height: 65px;
  290. }
  291. #header .navbar ul.nav-menu li {
  292. position: relative;
  293. display: -webkit-box;
  294. display: -webkit-flex;
  295. display: -ms-flexbox;
  296. display: flex;
  297. -webkit-box-pack: center;
  298. -ms-flex-pack: center;
  299. justify-content: center;
  300. -webkit-box-align: center;
  301. -ms-flex-align: center;
  302. align-items: center;
  303. }
  304. #header .navbar ul.nav-menu li+li {
  305. margin-left: 20px;
  306. }
  307. #header .navbar ul.nav-menu li a {
  308. display: block;
  309. font-size: 0.7em;
  310. letter-spacing: 0.15em;
  311. text-transform: uppercase;
  312. }
  313. #header .navbar ul.nav-menu li a:after {
  314. content: '';
  315. position: absolute;
  316. left: 0;
  317. right: 0;
  318. bottom: 0;
  319. display: block;
  320. height: 0;
  321. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  322. transition: height 0.3s ease-in-out;
  323. }
  324. #header .navbar ul.nav-menu li a:hover:after {
  325. height: 2px;
  326. }
  327. #header .navbar ul.nav-menu li span {
  328. display: block;
  329. width: 5px;
  330. height: 5px;
  331. background-image: linear-gradient(to right, {color:Color One}, {color:Color Two});
  332. -webkit-transform: rotate(45deg);
  333. -moz-transform: rotate(45deg);
  334. -ms-transform: rotate(45deg);
  335. transform: rotate(45deg);
  336. }
  337.  
  338. /* -------------------------------------------
  339. * tumblr controls
  340. * ------------------------------------------ */
  341.  
  342. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  343. position: fixed;
  344. z-index: 1001;
  345. top: 0;
  346. right: 10px;
  347. max-width: 350px;
  348. -webkit-transform: scale(0.6);
  349. -moz-transform: scale(0.6);
  350. -ms-transform: scale(0.6);
  351. transform: scale(0.6);
  352. -webkit-transform-origin: right;
  353. -moz-transform-origin: right;
  354. -ms-transform-origin: right;
  355. transform-origin: right;
  356. opacity: {text:Tumblr Controls Opacity};
  357. }
  358. .light-controls .tmblr-iframe--unified-controls {
  359. mix-blend-mode: screen;
  360. }
  361. .dark-controls .tmblr-iframe--unified-controls {
  362. mix-blend-mode: multiply;
  363. -webkit-filter: invert(100%);
  364. filter: invert(100%);
  365. }
  366.  
  367. /* -------------------------------------------
  368. * main
  369. * ------------------------------------------ */
  370.  
  371. #main .main-inner {
  372. position: relative;
  373. z-index: 10;
  374. background-color: {color:Container Background};
  375. overflow: hidden;
  376. padding: 90px 25px 25px;
  377. {block:ifShowBanner}
  378. min-height: calc(65vh - 50px);
  379. margin-top: -65px;
  380. border-top-left-radius: 5px;
  381. border-top-right-radius: 5px;
  382. {/block:ifShowBanner}
  383. {block:ifnotShowBanner}
  384. min-height: calc(100vh - 50px);
  385. {/block:ifnotShowBanner}
  386. display: -webkit-box;
  387. display: -webkit-flex;
  388. display: -ms-flexbox;
  389. display: flex;
  390. -webkit-box-pack: justify;
  391. -ms-flex-pack: justify;
  392. justify-content: space-between;
  393. -webkit-box-align: start;
  394. -ms-flex-align: start;
  395. align-items: flex-start;
  396. }
  397. #main .main-inner.sidebar-left {
  398. -webkit-box-orient: horizontal;
  399. -webkit-box-direction: normal;
  400. -ms-flex-direction: row;
  401. flex-direction: row;
  402. }
  403. #main .main-inner.sidebar-right {
  404. -webkit-box-orient: horizontal;
  405. -webkit-box-direction: reverse;
  406. -ms-flex-direction: row-reverse;
  407. flex-direction: row-reverse;
  408. }
  409. {block:ifShowBanner}#main .main-inner.sticky-fix {
  410. padding-top: 155px;
  411. }{/block:ifShowBanner}
  412.  
  413. /* -------------------------------------------
  414. * sidebar
  415. * ------------------------------------------ */
  416.  
  417. .sidebar {
  418. width: {select:Sidebar Width};
  419. }
  420.  
  421. /* sidebar inner */
  422. {block:ifShowBanner}.sidebar.sticky .sidebar-inner {
  423. position: fixed;
  424. top: 90px;
  425. }{/block:ifShowBanner}
  426. .sidebar .sidebar-inner {
  427. width: {select:Sidebar Width};
  428. {block:ifnotShowBanner}position: fixed;{/block:ifnotShowBanner}
  429. }
  430.  
  431. /* sidebar section */
  432. .sidebar .sidebar-inner section {
  433. overflow: hidden;
  434. border-radius: 5px;
  435. }
  436. .sidebar .sidebar-inner section + section {
  437. margin-top: 15px;
  438. }
  439. .sidebar .sidebar-inner section [class^="sidebar-"] {
  440. background-color: {color:Post Background};
  441. }
  442.  
  443. /* sidebar pic */
  444. .sidebar .sidebar-pic {
  445. overflow: hidden;
  446. border-top-left-radius: 5px;
  447. border-top-right-radius: 5px;
  448. }
  449. .sidebar .sidebar-pic a,
  450. .sidebar .sidebar-pic img {
  451. display: block;
  452. }
  453. .sidebar .sidebar-pic img {
  454. width: 100%;
  455. }
  456.  
  457. /* sidebar description */
  458. .sidebar .sidebar-desc {
  459. padding: 10px;
  460. background-color: {color:Post Background};
  461. }
  462. .sidebar .sidebar-desc .desc-title {
  463. display: -webkit-box;
  464. display: -webkit-flex;
  465. display: -ms-flexbox;
  466. display: flex;
  467. {block:ifnotSidebarImage}
  468. -webkit-box-align: center;
  469. -ms-flex-align: center;
  470. align-items: center;
  471. {/block:ifnotSidebarImage}
  472. {block:ifSidebarImage}
  473. -webkit-box-align: end;
  474. -ms-flex-align: end;
  475. align-items: flex-end;
  476. {/block:ifSidebarImage}
  477. }
  478. .sidebar .sidebar-desc .desc-title .avatar {
  479. -webkit-flex-shrink: 0;
  480. -moz-flex-shrink: 0;
  481. -ms-flex-negative: 0;
  482. flex-shrink: 0;
  483. box-sizing: content-box;
  484. {block:ifSidebarImage}margin-top: calc({select:Sidebar Width} * -0.125);{/block:ifSidebarImage}
  485. border: 3px solid {color:Post Background};
  486. border-radius: 50%;
  487. overflow: hidden;
  488. }
  489. .sidebar .sidebar-desc .desc-title .avatar img {
  490. display: block;
  491. width: calc({select:Sidebar Width} * 0.25);
  492. height: calc({select:Sidebar Width} * 0.25);
  493. }
  494. .sidebar .sidebar-desc .desc-title .title {
  495. margin: 0 0 0 5px;
  496. {block:ifSidebarImage}margin-bottom: 5px;{/block:ifSidebarImage}
  497. font-size: 1.1em;
  498. font-weight: 600;
  499. line-height: 1.25em;
  500. color: {color:Link Color};
  501. }
  502. .sidebar .sidebar-desc .desc-title .title:after {
  503. content: "@{Name}";
  504. display: block;
  505. margin-top: 3px;
  506. font-size: 0.7em;
  507. font-weight: 400;
  508. color: {color:Text Color};
  509. line-height: 0.8em;
  510. }
  511. .sidebar .sidebar-desc .desc-title + .desc-text {
  512. margin-top: 10px;
  513. }
  514. .sidebar .sidebar-desc .desc-text {
  515. font-size: 0.85em;
  516. color: {color:Text Color};
  517. }
  518. .sidebar .sidebar-desc .desc-text a {
  519. color: {color:Color Two};
  520. }
  521. .sidebar .sidebar-desc .desc-text a:hover {
  522. color: {color:Link Color};
  523. }
  524.  
  525. /* sidebar menu */
  526. .sidebar .sidebar-menu ul {
  527. display: -webkit-box;
  528. display: -webkit-flex;
  529. display: -ms-flexbox;
  530. display: flex;
  531. }
  532. .sidebar .sidebar-menu ul li {
  533. -webkit-box-flex: 1;
  534. -ms-flex: 1;
  535. flex: 1;
  536. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  537. background-size: 101%;
  538. height: calc({select:Sidebar Width}/4);
  539. }
  540. .sidebar .sidebar-menu ul li a {
  541. display: -webkit-box;
  542. display: -webkit-flex;
  543. display: -ms-flexbox;
  544. display: flex;
  545. -webkit-box-pack: center;
  546. -ms-flex-pack: center;
  547. justify-content: center;
  548. -webkit-box-align: center;
  549. -ms-flex-align: center;
  550. align-items: center;
  551. height: 100%;
  552. background-color: {color:Navbar Background};
  553. color: {color:Text Color};
  554. font-size: 1.1em;
  555. transition-property: color, background-color;
  556. }
  557. .sidebar .sidebar-menu ul li a:hover {
  558. background-color: transparent;
  559. color: {color:Banner Text Color};
  560. }
  561.  
  562. /* sidebar search */
  563. .sidebar .sidebar-search {
  564. display: -webkit-box;
  565. display: -webkit-flex;
  566. display: -ms-flexbox;
  567. display: flex;
  568. }
  569. .sidebar .sidebar-search li.search-bar {
  570. width: calc(100% - 40px);
  571. }
  572. .sidebar .sidebar-search li.search-submit {
  573. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  574. background-size: 101%;
  575. }
  576. .sidebar .sidebar-search li input {
  577. display: block;
  578. height: 40px;
  579. -webkit-appearance: none;
  580. -moz-appearance: none;
  581. appearance: none;
  582. font-size: 0.95em;
  583. color: {color:Text Color};
  584. }
  585. .sidebar .sidebar-search li input[type="text"] {
  586. width: 100%;
  587. padding: 0 10px;
  588. }
  589. .sidebar .sidebar-search li input[type="text"]::-webkit-input-placeholder {
  590. color: {color:Text Color};
  591. opacity: 0.5;
  592. font-size: 0.9em;
  593. letter-spacing: 1px;
  594. }
  595. .sidebar .sidebar-search li input[type="text"]:-moz-placeholder {
  596. color: {color:Text Color};
  597. opacity: 0.5;
  598. font-size: 0.9em;
  599. letter-spacing: 1px;
  600. }
  601. .sidebar .sidebar-search li input[type="text"]::-moz-placeholder {
  602. color: {color:Text Color};
  603. opacity: 0.5;
  604. font-size: 0.9em;
  605. letter-spacing: 1px;
  606. }
  607. .sidebar .sidebar-search li input[type="text"]:-ms-input-placeholder {
  608. color: {color:Text Color};
  609. opacity: 0.5;
  610. font-size: 0.9em;
  611. letter-spacing: 1px;
  612. }
  613. .sidebar .sidebar-search li input[type="submit"] {
  614. -webkit-flex-shrink: 0;
  615. -moz-flex-shrink: 0;
  616. -ms-flex-negative: 0;
  617. flex-shrink: 0;
  618. width: 40px;
  619. background-color: {color:Navbar Background};
  620. font-family: var(--icons);
  621. font-style: normal;
  622. font-weight: normal;
  623. font-variant: normal;
  624. text-transform: none;
  625. cursor: pointer;
  626. transition-property: color, background-color;
  627. transition-duration: 0.3s;
  628. transition-timing-function: ease-in-out;
  629. }
  630. .sidebar .sidebar-search li input[type="submit"]:hover {
  631. background-color: transparent;
  632. color: {color:Banner Text Color};
  633. }
  634.  
  635. /* sidebar pagination */
  636. .sidebar .sidebar-pagi ul {
  637. display: -webkit-box;
  638. display: -webkit-flex;
  639. display: -ms-flexbox;
  640. display: flex;
  641. -webkit-box-pack: justify;
  642. -ms-flex-pack: justify;
  643. justify-content: space-between;
  644. }
  645. .sidebar .sidebar-pagi ul li {
  646. text-align: center;
  647. line-height: 35px;
  648. color: {color:Text Color};
  649. }
  650. .sidebar .sidebar-pagi ul li.button {
  651. width: calc(100%/3 - 15px);
  652. font-size: 0.7em;
  653. letter-spacing: 0.05em;
  654. text-transform: uppercase;
  655. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  656. background-size: 101%;
  657. }
  658. .sidebar .sidebar-pagi ul li.button a {
  659. display: block;
  660. background-color: {color:Navbar Background};
  661. transition-property: color, background-color;
  662. }
  663. .sidebar .sidebar-pagi ul li.button a:hover {
  664. color: {color:Banner Text Color};
  665. background-color: transparent;
  666. }
  667. .sidebar .sidebar-pagi ul li.num {
  668. width: calc(100%/3 + 30px);
  669. margin: 0 auto;
  670. font-size: 0.8em;
  671. }
  672.  
  673. /* -------------------------------------------
  674. * posts
  675. * ------------------------------------------ */
  676.  
  677. /* posts basic */
  678. .posts {
  679. width: {select:Post Width};
  680. }
  681. .posts .post {
  682. overflow: hidden;
  683. background-color: {color:Post Background};
  684. border-radius: 5px;
  685. color: {color:Text Color};
  686. }
  687. .posts .post + .post {
  688. margin-top: 25px;
  689. }
  690.  
  691. /* post layout */
  692. .post .post-head,
  693. .post .post-title,
  694. .post .post-body,
  695. .post .post-foot {
  696. padding: 20px;
  697. }
  698. .post .post-head,
  699. .post .post-foot {
  700. background-color: {color:Navbar Background};
  701. display: -webkit-box;
  702. display: -webkit-flex;
  703. display: -ms-flexbox;
  704. display: flex;
  705. -webkit-box-pack: justify;
  706. -ms-flex-pack: justify;
  707. justify-content: space-between;
  708. -webkit-box-align: center;
  709. -ms-flex-align: center;
  710. align-items: center;
  711. }
  712.  
  713. /* post head */
  714. .post .post-head ul {display: -webkit-box;
  715. display: -webkit-flex;
  716. display: -ms-flexbox;
  717. display: flex;
  718. -webkit-box-align: center;
  719. -ms-flex-align: center;
  720. align-items: center;
  721. }
  722. .post .post-head ul a {
  723. display: block;
  724. }
  725. .post .post-head ul.post-head-info {
  726. font-size: 0.8em;
  727. line-height: 1em;
  728. letter-spacing: 0.05em;
  729. }
  730. .post .post-head ul.post-head-info li + li {
  731. margin-left: 15px;
  732. }
  733. .post .post-head ul.post-head-info li a:before {
  734. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  735. -webkit-background-clip: text;
  736. -moz-background-clip: text;
  737. background-clip: text;
  738. font-family: var(--icons);
  739. font-size: 0.8rem;
  740. margin-right: 5px;
  741. color: transparent;
  742. }
  743. .post .post-head ul.post-head-info li.notes a {
  744. font-weight: 600;
  745. font-size: 1.15em;
  746. }
  747. .post .post-head ul.post-head-info li.notes a:before {
  748. content: '\f005';
  749. }
  750. .post .post-head ul.post-head-info li.date a:before {
  751. content: '\f073';
  752. }
  753. .post .post-head ul.post-head-info li.src a:before {
  754. content: '\f14c';
  755. }
  756. .post .post-head ul.post-head-info li.via a:before {
  757. content: '\f1e0';
  758. }
  759. .post .post-head ul.post-head-buttons {
  760. -webkit-box-pack: end;
  761. -ms-flex-pack: end;
  762. justify-content: flex-end;
  763. font-size: 0.95em;
  764. line-height: 1em;
  765. }
  766. .post .post-head ul.post-head-buttons li + li {
  767. margin-left: 10px;
  768. }
  769. .post .post-head ul.post-head-buttons li i {
  770. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  771. -webkit-background-clip: text;
  772. -moz-background-clip: text;
  773. background-clip: text;
  774. color: transparent;
  775. }
  776. .post .post-head ul.post-head-buttons li.like-btn {
  777. position: relative;
  778. overflow: hidden;
  779. }
  780. .post .post-head ul.post-head-buttons li.like-btn .like_button {
  781. position: absolute;
  782. z-index: 2;
  783. top: 0;
  784. left: 0;
  785. opacity: 0;
  786. -webkit-transform: scale(0.65);
  787. -moz-transform: scale(0.65);
  788. -ms-transform: scale(0.65);
  789. transform: scale(0.65);
  790. -webkit-transform-origin: top left;
  791. -moz-transform-origin: top left;
  792. -ms-transform-origin: top left;
  793. transform-origin: top left;
  794. }
  795. .post .post-head ul.post-head-buttons li.like-btn .like_button.liked + i {
  796. color: #ff5550;
  797. }
  798.  
  799. /* post foot */
  800. .post .post-foot ul {
  801. font-size: 0.75em;
  802. letter-spacing: 0.5px;
  803. }
  804. .post .post-foot ul li {
  805. display: inline-block;
  806. margin-right: 10px;
  807. }
  808. .post .post-foot ul li.label {
  809. font-weight: 600;
  810. font-size: 0.95em;
  811. text-transform: uppercase;
  812. }
  813. .post .post-foot ul li.label:before {
  814. margin-right: 5px;
  815. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  816. -webkit-background-clip: text;
  817. -moz-background-clip: text;
  818. background-clip: text;
  819. font-family: var(--icons);
  820. font-weight: normal;
  821. text-transform: none;
  822. content: '\f02e';
  823. color: transparent;
  824. }
  825.  
  826. /* post media */
  827. .post .post-content .post-media img {
  828. display: block;
  829. }
  830. .post .post-content .post-media .width_fix iframe {
  831. width: {select:Post Width} !important;
  832. }
  833. .post .post-content .post-media .width_fix iframe.tumblr_audio_player {
  834. height: 85px;
  835. }
  836.  
  837. /* link post */
  838. .post .post-media .link-button {
  839. position: relative;
  840. display: block;
  841. overflow: hidden;
  842. text-decoration: none;
  843. }
  844. .post .post-media .link-button .thumbnail img {
  845. display: block;
  846. margin: 0px;
  847. }
  848. .post .post-media .link-button .thumbnail:after {
  849. content: '';
  850. position: absolute;
  851. top: 0;
  852. left: 0;
  853. right: 0;
  854. bottom: 0;
  855. display: block;
  856. background-image: linear-gradient(rgba(0, 0, 0, 0.439216), transparent 50%);
  857. }
  858. .post .post-media .publisher-container {
  859. margin-bottom: 4px;
  860. font-size: 0.95em;
  861. line-height: 1em;
  862. font-weight: 700;
  863. }
  864. .post .post-media .publisher-container .publisher {
  865. display: inline-block;
  866. margin: 0;
  867. font-size: 0.85em;
  868. font-weight: 400;
  869. line-height: 1em;
  870. letter-spacing: 0.05em;
  871. }
  872. .post .post-media .publisher-container.if-thumbnail {
  873. position: absolute;
  874. top: 15px;
  875. left: 20px;
  876. right: 20px;
  877. }
  878. .post .post-media .publisher-container.if-thumbnail .publisher {
  879. color: {color:Banner Text Color};
  880. }
  881. .post .post-media .info-container {
  882. padding: 15px 20px;
  883. overflow: hidden;
  884. background-color: #f2f2f2;
  885. color: {color:Text Color};
  886. }
  887. .post .post-media .info-container .title {
  888. font-size: 1.5em;
  889. font-weight: 700;
  890. line-height: 1.1em;
  891. }
  892. .post .post-media .info-container .title:after {
  893. display: inline;
  894. margin-left: 5px;
  895. vertical-align: 0.05rem;
  896. font-family: var(--icons);
  897. font-weight: normal;
  898. content: '\f054';
  899. font-size: 1.15rem;
  900. }
  901. .post .post-media .info-container .excerpt {
  902. margin-top: 5px;
  903. font-size: 1em;
  904. line-height: 1.5em;
  905. }
  906. .post .post-media .info-container .author {
  907. margin-top: 5px;
  908. font-size: 0.85em;
  909. font-weight: 400;
  910. letter-spacing: 0.01em;
  911. line-height: 1.25em;
  912. opacity: 0.5;
  913. }
  914.  
  915. /* post title */
  916. .post .post-content .post-container .post-title + .post-body {
  917. margin-top: -20px;
  918. }
  919. .post .post-title .title {
  920. margin: 0;
  921. font-size: 1.5em;
  922. font-weight: 600;
  923. line-height: 1.1em;
  924. }
  925.  
  926. /* quote */
  927. .post .post-title .quote {
  928. font-family: var(--serif);
  929. font-size: 1.25em;
  930. line-height: 1.35em;
  931. }
  932. .post .post-title .quote:before,
  933. .post .post-title .quote:after {
  934. font-size: 0.85em;
  935. }
  936. .post .post-title .quote:before {
  937. content: '\201C';
  938. margin-right: 0.35rem;
  939. }
  940. .post .post-title .quote:after {
  941. content: '\201D';
  942. margin-left: 0.35rem;
  943. }
  944.  
  945. /* caption */
  946. .post .post-body .caption + .caption {
  947. margin: 20px -20px 0;
  948. padding: 20px 20px 0;
  949. border-top: 1px solid {color:Container Background};
  950. }
  951. .post .post-body .caption .reblog-head {
  952. display: -webkit-box;
  953. display: -webkit-flex;
  954. display: -ms-flexbox;
  955. display: flex;
  956. -webkit-box-align: center;
  957. -ms-flex-align: center;
  958. align-items: center;
  959. }
  960. .post .post-body .caption .reblog-head .reblog-avatar {
  961. width: 25px;
  962. height: 25px;
  963. border-radius: 5px;
  964. overflow: hidden;
  965. margin-right: 10px;
  966. }
  967. .post .post-body .caption .reblog-head .reblog-avatar img {
  968. width: 100%;
  969. }
  970. .post .post-body .caption .reblog-head .reblog-username {
  971. color: {color:Text Color};
  972. font-size: 0.95em;
  973. font-weight: 600;
  974. padding: 0;
  975. background: none;
  976. }
  977. .post .post-body .caption .reblog-content {
  978. margin-top: 10px;
  979. }
  980.  
  981. /* figure */
  982. .post .post-body .caption figure.tmblr-full:last-child {
  983. margin-bottom: -20px !important;
  984. }
  985.  
  986. /* quote source */
  987. .post .post-body .caption .quote-source {
  988. margin-top: -10px !important;
  989. }
  990. .post .post-body .caption .quote-source:before {
  991. content: '\2014';
  992. margin-right: 5px;
  993. }
  994.  
  995. /* chat */
  996. .post .post-body ul.chat {
  997. padding: 0;
  998. border: 1px solid {color:Container Background};
  999. border-top: none;
  1000. }
  1001. .post .post-body ul.chat li {
  1002. display: -webkit-box;
  1003. display: -webkit-flex;
  1004. display: -ms-flexbox;
  1005. display: flex;
  1006. border-top: 1px solid {color:Container Background};
  1007. line-height: 1.15em;
  1008. }
  1009. .post .post-body ul.chat li span {
  1010. display: block;
  1011. padding: 10px;
  1012. }
  1013. .post .post-body ul.chat li .label {
  1014. -webkit-flex-shrink: 0;
  1015. -moz-flex-shrink: 0;
  1016. -ms-flex-negative: 0;
  1017. flex-shrink: 0;
  1018. border-right: 1px solid {color:Container Background};
  1019. font-weight: 600;
  1020. }
  1021.  
  1022. /* ask */
  1023. .post .post-body .ask,
  1024. .post .post-body .answer {
  1025. position: relative;
  1026. padding: 30px 15px 15px;
  1027. border-radius: 5px;
  1028. }
  1029. .post .post-body .ask .asker,
  1030. .post .post-body .ask .answerer,
  1031. .post .post-body .answer .asker,
  1032. .post .post-body .answer .answerer {
  1033. padding-bottom: 15px;
  1034. }
  1035. .post .post-body .asker-avatar,
  1036. .post .post-body .answerer-avatar {
  1037. position: absolute;
  1038. top: -25px;
  1039. width: 50px;
  1040. height: 50px;
  1041. overflow: hidden;
  1042. padding: 5px;
  1043. border-radius: 50%;
  1044. }
  1045. .post .post-body .asker-avatar:before,
  1046. .post .post-body .answerer-avatar:before {
  1047. content: '';
  1048. position: absolute;
  1049. top: 0;
  1050. left: 0;
  1051. right: 0;
  1052. bottom: 0;
  1053. display: block;
  1054. }
  1055. .post .post-body .asker-avatar img,
  1056. .post .post-body .answerer-avatar img {
  1057. position: relative;
  1058. display: block;
  1059. width: 100%;
  1060. border-radius: 50%;
  1061. }
  1062. .post .post-body .asker-name,
  1063. .post .post-body .answerer-name {
  1064. margin-top: 10px;
  1065. font-size: 1.15em;
  1066. font-weight: 600;
  1067. line-height: 1em;
  1068. }
  1069. .post .post-body .asker-name:after,
  1070. .post .post-body .answerer-name:after {
  1071. font-size: 0.85em;
  1072. font-weight: 400;
  1073. opacity: 0.7;
  1074. margin-left: 0.35em
  1075. }
  1076. .post .post-body .asker-name a,
  1077. .post .post-body .answerer-name a {
  1078. background: none;
  1079. padding: 0;
  1080. border: none;
  1081. color: inherit;
  1082. }
  1083. .post .post-body .asker-question,
  1084. .post .post-body .answerer-answer {
  1085. margin-top: 10px;
  1086. }
  1087. .post .post-body .ask + .caption,
  1088. .post .post-body .answer + .caption {
  1089. margin-top: 20px;
  1090. }
  1091. .post .post-body .ask {
  1092. margin-top: 25px !important;
  1093. background-color: #f2f2f2;
  1094. }
  1095. .post .post-body .ask .asker {
  1096. border-bottom: 1px solid #e5e5e5;
  1097. }
  1098. .post .post-body .ask .asker .asker-avatar:before {
  1099. background-image: linear-gradient(135deg, {color:Color One} 50%, {color:Color Two} 50%);
  1100. }
  1101. .post .post-body .ask .asker .asker-name:after {
  1102. content: 'sent a message';
  1103. }
  1104. .post .post-body .answer {
  1105. margin-top: 40px;
  1106. background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  1107. color: #fff;
  1108. }
  1109. .post .post-body .answer .answerer {
  1110. border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  1111. }
  1112. .post .post-body .answer .answerer .answerer-avatar:before {
  1113. background-image: linear-gradient(135deg, #e5e5e5 50%, #f2f2f2 50%);
  1114. }
  1115. .post .post-body .answer .answerer .answerer-name:after {
  1116. content: 'answered';
  1117. }
  1118. .post .post-body .answer .answerer-answer a {
  1119. background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.75) 0);
  1120. color: {color:Banner Text Color};
  1121. }
  1122. .post .post-body .answer .answerer-answer a:hover {
  1123. color: rgba(255, 255, 255, 0.85);
  1124. }
  1125. .post .post-body .answer .answerer-answer figure.tmblr-full {
  1126. margin-left: -15px;
  1127. margin-right: -15px;
  1128. }
  1129.  
  1130. /* post notes*/
  1131. .posts .post-notes {
  1132. margin-top: 25px;
  1133. padding: 20px;
  1134. background-color: {color:Post Background};
  1135. border-radius: 5px;
  1136. overflow: hidden;
  1137. color: {color:Text Color};
  1138. }
  1139. .posts .post-notes ol.notes {
  1140. margin: 0;
  1141. padding: 0;
  1142. list-style-type: none;
  1143. font-size: 0.85em;
  1144. line-height: 1.5em;
  1145. letter-spacing: 0.05em;
  1146. }
  1147. .posts .post-notes ol.notes li.note + li.note {
  1148. margin-top: 15px;
  1149. }
  1150. .posts .post-notes ol.notes li.note img.avatar {
  1151. display: inline-block;
  1152. vertical-align: -6px;
  1153. margin-right: 10px;
  1154. width: 20px;
  1155. height: 20px;
  1156. border-radius: 50%;
  1157. }
  1158. .posts .post-notes ol.notes li.note .action a {
  1159. font-weight: 600;
  1160. }
  1161. .posts .post-notes ol.notes li.note blockquote {
  1162. border-left: 2px solid {color:Color Two};
  1163. margin: 1em 0 0 30px;
  1164. padding-left: 15px;
  1165. }
  1166.  
  1167. /* -------------------------------------------
  1168. * preview page fix
  1169. * ------------------------------------------ */
  1170.  
  1171. /*
  1172. this is only for fixing glitches on the customize page
  1173. if you don't really need it, you can remove this
  1174. */
  1175.  
  1176. .preview-fix #header .navbar.sticky {
  1177. position: relative;
  1178. top: auto;
  1179. left: auto;
  1180. border-top-left-radius: 5px;
  1181. border-top-right-radius: 5px;
  1182. }
  1183. .preview-fix #main .main-inner.sticky-fix {
  1184. padding-top: 90px;
  1185. }
  1186. .preview-fix .sidebar .sidebar-inner {
  1187. position: static;
  1188. }
  1189.  
  1190. /* -------------------------------------------
  1191. * CustomCss
  1192. * ------------------------------------------ */
  1193.  
  1194. {CustomCss}
  1195.  
  1196. </style>
  1197. </head>
  1198. <body class="{select:Tumblr Controls Style}">
  1199. <div class="wrapper">
  1200. <header id="header">
  1201. {block:ifShowBanner}
  1202. <div class="banner">
  1203. {block:ifBannerImage}<div class="banner-img imgFill">
  1204. <img src="{image:Banner}" alt="" />
  1205. </div>{/block:ifBannerImage}
  1206. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1920 108.8" preserveaspectratio="none" fill="{color:Body Background}" style="display:{select:Banner Shape}">
  1207. <g>
  1208. <path d="M0,108.8h960C629.9,108.8,308.5,71.2,0,0V108.8z" />
  1209. <path d="M960,108.8h960V0C1611.5,71.2,1290.1,108.8,960,108.8z" />
  1210. </g>
  1211. </svg>
  1212. </div><!-- //banner -->
  1213. <div class="banner-text">
  1214. {block:ifShowBannerText}
  1215. <h1 class="title">
  1216. {block:ifnotBannerTitle}{Title}{/block:ifnotBannerTitle}{block:ifBannerTitle}{text:Banner Title}{/block:ifBannerTitle}
  1217. </h1>
  1218. <span class="sub">
  1219. {block:ifnotBannerSubtitle}{Name}.tumblr.com{/block:ifnotBannerSubtitle}{block:ifBannerSubtitle}{text:Banner Subtitle}{/block:ifBannerSubtitle}
  1220. </span>
  1221. {/block:ifShowBannerText}
  1222. </div><!-- //banner-text -->
  1223. {/block:ifShowBanner}
  1224. <nav class="navbar container">
  1225. <ul class="noneStyle nav-head">
  1226. <li class="nav-head-avatar"><img src="{PortraitURL-48}" alt="" /></li>
  1227. <li class="nav-head-title">
  1228. <a href="/">
  1229. {block:ifnotNavbarTitle}{Title}{/block:ifnotNavbarTitle}{block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}
  1230. </a>
  1231. </li>
  1232. </ul>
  1233. <ul class="noneStyle nav-menu">
  1234. {block:ifNavbarLink1Title}<li><a href="{text:Navbar Link 1 Url}">{text:Navbar Link 1 Title}</a></li>{/block:ifNavbarLink1Title}
  1235. {block:ifNavbarLink2Title}<li><a href="{text:Navbar Link 2 Url}">{text:Navbar Link 2 Title}</a></li>{/block:ifNavbarLink2Title}
  1236. {block:ifNavbarLink3Title}<li><a href="{text:Navbar Link 3 Url}">{text:Navbar Link 3 Title}</a></li>{/block:ifNavbarLink3Title}
  1237. {block:ifNavbarLink4Title}<li><a href="{text:Navbar Link 4 Url}">{text:Navbar Link 4 Title}</a></li>{/block:ifNavbarLink4Title}
  1238. {block:ifNavbarLink5Title}<li><a href="{text:Navbar Link 5 Url}">{text:Navbar Link 5 Title}</a></li>{/block:ifNavbarLink5Title}
  1239. </ul>
  1240. </nav>
  1241. </header>
  1242. <main id="main">
  1243. <div class="main-inner container sidebar-{select:Sidebar Position}">
  1244. <div class="sidebar">
  1245. <div class="sidebar-inner">
  1246. <section>
  1247. {block:ifSidebarImage}<div class="sidebar-pic">
  1248. <a href="/">
  1249. <img src="{image:Sidebar}" alt="" />
  1250. </a>
  1251. </div>{/block:ifSidebarImage}
  1252. <div class="sidebar-desc">
  1253. {block:ifShowSidebarTitle}
  1254. <div class="desc-title">
  1255. <div class="avatar"><img src="{PortraitURL-64}" alt="" /></div>
  1256. <h3 class="title">
  1257. {block:ifnotSidebarTitle}{Title}{/block:ifnotSidebarTitle}
  1258. {block:ifSidebarTitle}{text:Sidebar Title}{/block:ifSidebarTitle}
  1259. </h3>
  1260. </div>
  1261. {/block:ifShowSidebarTitle}
  1262. {block:Description}<div class="desc-text">{Description}</div>{/block:Description}
  1263. </div>
  1264. <div class="sidebar-menu">
  1265. <ul class="noneStyle">
  1266. {block:ifSidebarLink1Url}<li>
  1267. <a href="{text:Sidebar Link 1 Url}" target="_blank" title="{text:Sidebar Link 1 Title}">
  1268. <i class="fa fa-{text:Sidebar Link 1 Icon}"></i>
  1269. </a>
  1270. </li>{/block:ifSidebarLink1Url}
  1271. {block:ifSidebarLink2Url}<li>
  1272. <a href="{text:Sidebar Link 2 Url}" target="_blank" title="{text:Sidebar Link 2 Title}">
  1273. <i class="fa fa-{text:Sidebar Link 2 Icon}"></i>
  1274. </a>
  1275. </li>{/block:ifSidebarLink2Url}
  1276. {block:ifSidebarLink3Url}<li>
  1277. <a href="{text:Sidebar Link 3 Url}" target="_blank" title="{text:Sidebar Link 3 Title}">
  1278. <i class="fa fa-{text:Sidebar Link 3 Icon}"></i>
  1279. </a>
  1280. </li>{/block:ifSidebarLink3Url}
  1281. {block:ifSidebarLink4Url}<li>
  1282. <a href="{text:Sidebar Link 4 Url}" target="_blank" title="{text:Sidebar Link 4 Title}">
  1283. <i class="fa fa-{text:Sidebar Link 4 Icon}"></i>
  1284. </a>
  1285. </li>{/block:ifSidebarLink4Url}
  1286. </ul>
  1287. </div>
  1288. </section>
  1289. <section>
  1290. <form action="/search" method="get">
  1291. <ul class="sidebar-search noneStyle">
  1292. <li class="search-bar"><input type="text" name="q" value="{SeachQuery}" placeholder="SEARCH..." /></li>
  1293. <li class="search-submit"><input type="submit" value="&#xf002;" /></li>
  1294. </ul>
  1295. </form>
  1296. </section>
  1297. {block:Pagination}<section>
  1298. <div class="sidebar-pagi">
  1299. <ul class="noneStyle">
  1300. {block:PreviousPage}<li class="button prev">
  1301. <a href="{PreviousPage}">prev</a>
  1302. </li>{/block:PreviousPage}
  1303. <li class="num">{CurrentPage} of {TotalPages}</li>
  1304. {block:NextPage}<li class="button next">
  1305. <a href="{NextPage}">next</a>
  1306. </li>{/block:NextPage}
  1307. </ul>
  1308. </div>
  1309. </section>{/block:Pagination}
  1310. </div><!-- //sidebar-inner -->
  1311. </div><!-- //sidebar -->
  1312. <div class="posts">
  1313. {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
  1314. <article class="post">
  1315. {block:Date}<div class="post-head">
  1316. <ul class="noneStyle post-head-info">
  1317. <li class="notes">
  1318. <a href="{Permalink}" class="notes note-{NoteCount}">{NoteCount}</a>
  1319. </li>
  1320. <li class="date">
  1321. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
  1322. </li>
  1323. {block:RebloggedFrom}
  1324. <li class="src">
  1325. <a href="{ReblogRootURL}">SRC</a>
  1326. </li>
  1327. <li class="via">
  1328. <a href="{ReblogParentURL}">VIA</a>
  1329. </li>
  1330. {/block:RebloggedFrom}
  1331. </ul>
  1332. <ul class="noneStyle post-head-buttons">
  1333. <li class="reblog-btn">
  1334. <a href="{ReblogURL}" target="_blank">
  1335. <i class="fa fa-refresh"></i>
  1336. </a>
  1337. </li>
  1338. <li class="like-btn">
  1339. {LikeButton size="24" color="black"}
  1340. <i class="fa fa-heart"></i>
  1341. </li>
  1342. </ul>
  1343. </div>{/block:Date}
  1344. <div class="post-content">
  1345.  
  1346. {block:Text}
  1347. <div class="post-container">
  1348. {block:Title}<div class="post-title"><h1 class="title">{Title}</h3></div>{/block:Title}
  1349. <div class="post-body post-style">
  1350. {block:NotReblog}<div class="caption">
  1351. {Body}
  1352. </div>{/block:NotReblog}
  1353. {block:RebloggedFrom}
  1354. {block:Reblogs}<div class="caption">
  1355. <div class="reblog-head">
  1356. <div class="reblog-avatar">
  1357. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1358. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1359. </div>
  1360. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1361. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1362. </div>
  1363. <div class="reblog-content">{Body}</div>
  1364. </div>{/block:Reblogs}
  1365. {/block:RebloggedFrom}
  1366. </div>
  1367. </div>
  1368. {/block:Text}
  1369.  
  1370. {block:Photo}
  1371. <div class="post-media">
  1372. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag}
  1373. </div>
  1374. {block:Caption}
  1375. <div class="post-container">
  1376. <div class="post-body post-style">
  1377. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1378. {block:RebloggedFrom}
  1379. {block:Reblogs}<div class="caption">
  1380. <div class="reblog-head">
  1381. <div class="reblog-avatar">
  1382. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1383. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1384. </div>
  1385. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1386. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1387. </div>
  1388. <div class="reblog-content">{Body}</div>
  1389. </div>{/block:Reblogs}
  1390. {/block:RebloggedFrom}
  1391. </div>
  1392. </div>
  1393. {/block:Caption}
  1394. {/block:Photo}
  1395.  
  1396. {block:Photoset}
  1397. <div class="post-media">
  1398. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1399. {block:Photos}
  1400. <div class="photo-data">
  1401. <div class="pxu-photo">
  1402. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
  1403. </div>
  1404. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1405. </div>
  1406. {/block:Photos}
  1407. </div><!-- photo-slideshow-->
  1408. </div>
  1409. {block:Caption}
  1410. <div class="post-container">
  1411. <div class="post-body post-style">
  1412. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1413. {block:RebloggedFrom}
  1414. {block:Reblogs}<div class="caption">
  1415. <div class="reblog-head">
  1416. <div class="reblog-avatar">
  1417. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1418. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1419. </div>
  1420. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1421. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1422. </div>
  1423. <div class="reblog-content">{Body}</div>
  1424. </div>{/block:Reblogs}
  1425. {/block:RebloggedFrom}
  1426. </div>
  1427. </div>
  1428. {/block:Caption}
  1429. {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}
  1430.  
  1431. {block:Video}
  1432. <div class="post-media">
  1433. <div class="video" style="margin-bottom:-5px;">{Video-500}</div>
  1434. </div>{block:Caption}
  1435. <div class="post-container">
  1436. <div class="post-body post-style">
  1437. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1438. {block:RebloggedFrom}
  1439. {block:Reblogs}<div class="caption">
  1440. <div class="reblog-head">
  1441. <div class="reblog-avatar">
  1442. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1443. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1444. </div>
  1445. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1446. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1447. </div>
  1448. <div class="reblog-content">{Body}</div>
  1449. </div>{/block:Reblogs}
  1450. {/block:RebloggedFrom}
  1451. </div>
  1452. </div>{/block:Caption}
  1453. {/block:Video}
  1454.  
  1455. {block:Audio}
  1456. <div class="post-media">
  1457. <div class="width_fix">{AudioEmbed-500}</div>
  1458. </div>
  1459. {block:Caption}
  1460. <div class="post-container">
  1461. <div class="post-body post-style">
  1462. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1463. {block:RebloggedFrom}
  1464. {block:Reblogs}<div class="caption">
  1465. <div class="reblog-head">
  1466. <div class="reblog-avatar">
  1467. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1468. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1469. </div>
  1470. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1471. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1472. </div>
  1473. <div class="reblog-content">{Body}</div>
  1474. </div>{/block:Reblogs}
  1475. {/block:RebloggedFrom}
  1476. </div>
  1477. </div>{/block:Caption}
  1478. {/block:Audio}
  1479.  
  1480. {block:Link}
  1481. <div class="post-media">
  1482. <a href="{Url}" target="_blank" class="link-button">
  1483. {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail}
  1484. <div class="info-container">
  1485. {block:Host}
  1486. <div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}">
  1487. <div class="publisher">{Host}</div>
  1488. </div>
  1489. {/block:Host}
  1490. <div class="title">{Name}</div>
  1491. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  1492. {block:Author}<div class="author">{Author}</div>{/block:Author}
  1493. </div>
  1494. </a>
  1495. </div>
  1496. {block:Description}
  1497. <div class="post-container">
  1498. <div class="post-body post-style">
  1499. {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog}
  1500. {block:RebloggedFrom}
  1501. {block:Reblogs}<div class="caption">
  1502. <div class="reblog-head">
  1503. <div class="reblog-avatar">
  1504. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1505. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1506. </div>
  1507. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1508. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1509. </div>
  1510. <div class="reblog-content">{Body}</div>
  1511. </div>{/block:Reblogs}
  1512. {/block:RebloggedFrom}
  1513. </div>
  1514. </div>
  1515. {/block:Description}
  1516. {/block:Link}
  1517.  
  1518. {block:Quote}
  1519. <div class="post-container">
  1520. <div class="post-title">
  1521. <span class="quote">{Quote}</span>
  1522. </div>
  1523. {block:Source}
  1524. <div class="post-body post-style">
  1525. <div class="caption"><p class="quote-source">{Source}</p></div>
  1526. </div>{/block:Source}
  1527. </div>
  1528. {/block:Quote}
  1529.  
  1530. {block:Chat}
  1531. <div class="post-container">
  1532. {block:Title}<div class="post-title"><h1 class="title">{Title}</h3></div>{/block:Title}
  1533. <div class="post-body post-style">
  1534. <ul class="noneStyle chat">
  1535. {block:Lines}<li class="user_{UserNumber}">
  1536. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1537. <span class="line">{Line}</span>
  1538. </li>{/block:Lines}
  1539. </ul>
  1540. </div>
  1541. </div>
  1542. {/block:Chat}
  1543.  
  1544. {block:Answer}
  1545. <div class="post-container">
  1546. <div class="post-body post-style">
  1547. <div class="ask">
  1548. <div class="asker">
  1549. <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div>
  1550. <div class="asker-name">{Asker}</div>
  1551. </div>
  1552. <div class="asker-question">{Question}</div>
  1553. </div>
  1554. {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  1555. {block:Answerer}
  1556. <div class="answer">
  1557. <div class="answerer">
  1558. <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div>
  1559. <div class="answerer-name">{Answerer}</div>
  1560. </div>
  1561. <div class="answerer-answer">{Answer}</div>
  1562. </div>
  1563. {/block:Answerer}
  1564. {block:RebloggedFrom}
  1565. {block:Reblogs}<div class="caption">
  1566. <div class="reblog-head">
  1567. <div class="reblog-avatar">
  1568. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1569. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1570. </div>
  1571. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1572. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1573. </div>
  1574. <div class="reblog-content">{Body}</div>
  1575. </div>{/block:Reblogs}
  1576. {/block:RebloggedFrom}
  1577. </div>
  1578. </div>
  1579. {/block:Answer}
  1580.  
  1581. </div><!-- //post-content -->
  1582. {block:Date}{block:HasTags}<div class="post-foot">
  1583. <ul class="noneStyle">
  1584. <li class="label">tagged as</li>
  1585. {block:Tags}<li><a href="{TagUrl}">#{Tag}</a></li>{/block:Tags}
  1586. </ul>
  1587. </div>{/block:HasTags}{/block:Date}
  1588. </article>
  1589. {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes}
  1590. {/block:Posts}
  1591. </div><!-- //posts -->
  1592. </div><!-- //main-inner -->
  1593. </main>
  1594. <footer id="footer" class="container">
  1595. <div class="footer-inner">© {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>
  1596. </div>
  1597. </footer>
  1598. </div><!-- //wrapper -->
  1599. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  1600. <script src="https://static.tumblr.com/ickcbh2/XHXpmk6si/browser.js"></script>
  1601. <script src="https://static.tumblr.com/ickcbh2/Bf9pmtn1y/plugins.js"></script>
  1602. <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script>
  1603. <script src="https://static.tumblr.com/ickcbh2/gOFpmuj65/main.min.js"></script>
  1604. <script>
  1605. (function($) {
  1606. // preview page only
  1607. var pathname = location.pathname.split('/');
  1608. if ( (pathname[1]) === 'customize_preview_receiver.html' ) {
  1609. $('body').addClass('preview-fix');
  1610. }
  1611. // photoset
  1612. var $photoset = $('.photo-slideshow');
  1613. $photoset.pxuPhotoset({
  1614. lightbox: true,
  1615. gutter: '4px',
  1616. borderRadius: '0px',
  1617. photoset: '.photo-slideshow',
  1618. photoWrap: '.photo-data',
  1619. photo: '.pxu-photo'
  1620. });
  1621. // audio player
  1622. var $audio = $('iframe.tumblr_audio_player');
  1623. $audio.load(function() {
  1624. $(this).contents().find('head').append('<style type="text/css">' +
  1625. '.audio-player{ background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two}); color: #fff !important; }' +
  1626. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  1627. '</style>');
  1628. });
  1629. })(jQuery);
  1630. </script>
  1631. </body>
  1632. </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!