API tools faq
paste
yeoli

Theme 37

yeoli
Mar 20th, 2018
5,669
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 71.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  3. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  4. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  5. <head>
  6.  
  7.  
  8. <!-- =====================================================
  9.  
  10.  
  11. Copyright (c) 2018. Powered by Tumblr.
  12. Theme 37 by https://yeoli-thm.tumblr.com/
  13.  
  14. (last updated 17/08/2018)
  15.  
  16.  
  17. // Terms Of Use:
  18. + Do not steal or use as base codes.
  19. + Do not repost or redistribute codes.
  20. + Feel free to customize theme for your personal
  21. use but please do not remove the credits.
  22.  
  23.  
  24. ** You can disable slides in the theme options **
  25.  
  26.  
  27. ( class name classification:
  28. - slide/check_a = for blog posts slide
  29. - slide/check_b = for message / submit slide
  30. - slide/check_c = for about slide
  31. - slide/check_d = for navigation slide
  32. - slide/check_e = for faq slide
  33. - slide/check_f = for blogroll slide )
  34.  
  35.  
  36. ===================================================== -->
  37.  
  38.  
  39. <meta charset="utf-8">
  40. <title>{Title}</title>
  41. {block:Description}
  42. <meta name="description" content="{MetaDescription}">
  43. {/block:Description}
  44.  
  45. <link rel="shortcut icon" href="{Favicon}">
  46. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  47.  
  48. {block:Hidden}
  49. <meta name="color:Background" content="#f9f9f9"/>
  50. <meta name="color:Text" content="#999999"/>
  51. <meta name="color:Description" content="#bbbbbb"/>
  52. <meta name="color:Bold text" content="#99aebb"/>
  53. <meta name="color:Italic text" content="#ecaab9"/>
  54. <meta name="color:Links" content="#444444"/>
  55. <meta name="color:Links hover" content="#ecaab9"/>
  56. <meta name="color:Blockquote border" content="#e9e9e9"/>
  57. <meta name="color:Bullet points" content="#444444"/>
  58. <meta name="color:Slide bg" content="#ffffff"/>
  59. <meta name="color:Slide navigation buttons" content="#444444"/>
  60. <meta name="color:Slide active icon" content="#ecaab9"/>
  61. <meta name="color:Post bg" content="#fbfbfb"/>
  62. <meta name="color:Post border" content="#ffffff"/>
  63. <meta name="color:Post date" content="#ecaab9"/>
  64. <meta name="color:Post heading" content="#444444"/>
  65. <meta name="color:Post permalink" content="#bbbbbb"/>
  66. <meta name="color:Post permalink hover" content="#444444"/>
  67. <meta name="color:Post tags hover" content="#444444"/>
  68. <meta name="color:Search input" content="#ffffff"/>
  69. <meta name="color:Search bg" content="#000000"/>
  70. <meta name="color:Text selection" content="#ffffff"/>
  71. <meta name="color:Text selection bg" content="#ecaab9"/>
  72. <meta name="color:Tooltip text" content="#ffffff"/>
  73. <meta name="color:Tooltip bg" content="#444444"/>
  74. <meta name="color:Scrollbar" content="#444444"/>
  75. <meta name="color:Scrollbar bg" content="#f9f9f9"/>
  76.  
  77. <meta name="select:Post size" content="fourpx" title="400px"/>
  78. <meta name="select:Post size" content="fivepx" title="500px"/>
  79.  
  80. <meta name="if:Show box shadows" content="1"/>
  81. <meta name="if:Show post captions" content="1"/>
  82. <meta name="if:Show post tags" content="0"/>
  83. <meta name="if:Show message slide" content="1"/>
  84. <meta name="if:Show about slide" content="1"/>
  85. <meta name="if:Show navigation slide" content="1"/>
  86. <meta name="if:Show FAQ slide" content="1"/>
  87. <meta name="if:Show blogroll slide" content="1"/>
  88.  
  89. <meta name="text:Font name" content="Open Sans"/>
  90. <meta name="text:Body font size" content="11px"/>
  91. <meta name="text:Permalink font size" content="9px"/>
  92. <meta name="text:Slide title font size" content="15px"/>
  93. {/block:Hidden}
  94.  
  95. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet">
  96. <link href="https://static.tumblr.com/kmw8hta/cJfp5y077/main.min.css" rel="stylesheet">
  97.  
  98. <!-- HTML5 Shiv -->
  99. <!--[if lt IE 9]>
  100. <script src="https://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  101. <![endif]-->
  102.  
  103. <style>
  104.  
  105. .iframe-controls--desktop {
  106. position: fixed!important;
  107. z-index: 500!important;
  108. top: 48px!important;
  109. right: 118px!important;
  110. -webkit-transform: scale(.6,.6);
  111. transform: scale(.6,.6);
  112. -webkit-transform-origin: top right;
  113. transform-origin: top right;
  114. transition: top .2s linear;
  115. }
  116.  
  117. ::-webkit-scrollbar {
  118. width: 18px;
  119. height: 18px;
  120. background-color: {color:Scrollbar bg};
  121. }
  122.  
  123. ::-webkit-scrollbar-track {
  124. border: 8px solid {color:Scrollbar bg};
  125. background-color: rgba({RGBcolor:Scrollbar},.05);
  126. }
  127.  
  128. ::-webkit-scrollbar-thumb {
  129. min-height: 24px;
  130. min-width: 24px;
  131. background-clip: padding-box;
  132. background-color: {color:Scrollbar};
  133. border: 8px solid {color:Scrollbar bg};
  134. }
  135.  
  136. ::-webkit-scrollbar-button {
  137. width: 0;
  138. height: 0;
  139. }
  140.  
  141. ::-webkit-scrollbar-corner {
  142. background-color: {color:Scrollbar bg};
  143. }
  144.  
  145. ::-moz-selection {
  146. color: {color:Text selection};
  147. background-color: {color:Text selection bg};
  148. }
  149.  
  150. ::selection {
  151. color: {color:Text selection};
  152. background-color: {color:Text selection bg};
  153. }
  154.  
  155. body {
  156. overflow: hidden;
  157. position: relative;
  158. width: 100vw;
  159. height: 100vh;
  160. font-family: {text:Font name}, 'Open Sans', sans-serif;
  161. font-size: {text:Body font size};
  162. line-height: 1.8em;
  163. word-wrap: break-word;
  164. color: {color:Text};
  165. background-color: {color:Background};
  166. }
  167.  
  168. a, a:link, a:visited, a:active {
  169. outline: none;
  170. text-decoration: none;
  171. color: {color:Links};
  172. transition: all .2s ease;
  173. }
  174.  
  175. a:focus, a:hover {
  176. color: {color:Links hover};
  177. }
  178.  
  179. a img { border: 0; outline: 0; }
  180. img { max-width: 100%; height: auto; }
  181.  
  182. h1, h2, h3, h4, h5, h6 {
  183. margin: 1em 0;
  184. font-weight: 300;
  185. color: {color:Post heading};
  186. }
  187.  
  188. b, strong { color: {color:Bold text}; }
  189. i, em { color: {color:Italic text}; }
  190.  
  191. p { margin: 1.8em 0; }
  192.  
  193. blockquote, pre {
  194. margin: 1.8em auto;
  195. padding-left: 1.8em;
  196. border-left: 1px solid {color:Blockquote border};
  197. }
  198.  
  199. pre { overflow: auto; max-width: 100%; }
  200. pre, code, .tmblr-embed p, .tmblr-attribution {
  201. font-family: 'consolas', monospace;
  202. }
  203.  
  204. ol {
  205. counter-reset: item;
  206. list-style: none;
  207. margin: 1.8em 0;
  208. }
  209.  
  210. ol > li {
  211. counter-increment: item;
  212. position: relative;
  213. padding: 0 40px;
  214. }
  215.  
  216. ol > li:before {
  217. content: counter(item);
  218. position: absolute;
  219. left: 0;
  220. width: 32px;
  221. text-align: right;
  222. direction: rtl;
  223. color: {color:Bullet points}; /* ordered lists */
  224. }
  225.  
  226. ul {
  227. list-style: none;
  228. margin: 1.8em 0;
  229. }
  230.  
  231. ul > li {
  232. position: relative;
  233. padding: 0 40px;
  234. }
  235.  
  236. ul > li:before {
  237. content: '\e8d3';
  238. speak: none;
  239. position: absolute;
  240. top: .09em;
  241. left: 0;
  242. width: 32px;
  243. height: 1em;
  244. font-family: 'feather';
  245. font-size: 1em;
  246. text-align: right;
  247. direction: rtl;
  248. color: {color:Bullet points}; /* unordered lists */
  249. }
  250.  
  251. #search {
  252. display: none;
  253. position: fixed;
  254. z-index: 600;
  255. opacity: 0;
  256. top: 0;
  257. left: 0;
  258. width: 100vw;
  259. height: 100vh;
  260. background-color: rgba({RGBcolor:Search bg},.85);
  261. }
  262.  
  263. .search {
  264. display: flex;
  265. justify-content: center;
  266. align-items: center;
  267. width: 100vw;
  268. height: 100vh;
  269. }
  270.  
  271. input#searchbar {
  272. width: 60%;
  273. font-family: 'consolas', monospace;
  274. font-size: 48px;
  275. color: {color:Search input}; /* entered search input text */
  276. background-color: transparent;
  277. border: 0;
  278. outline: 0;
  279. }
  280.  
  281. #searchbar::-moz-placeholder, #searchbar::placeholder {
  282. opacity: .5;
  283. color: {color:Search input}; /* default search input text */
  284. }
  285.  
  286. .search_close {
  287. cursor: pointer;
  288. position: absolute;
  289. opacity: .5;
  290. top: 48px;
  291. right: 48px;
  292. font-size: 48px;
  293. color: {color:Search input}; /* search close button */
  294. transition: opacity .2s ease;
  295. }
  296.  
  297. .search_close:hover { opacity: 1; }
  298.  
  299. [class^="slide_"] {
  300. overflow: auto;
  301. position: relative;
  302. z-index: 1;
  303. width: 100vw; /* slide width + height */
  304. height: 100vh;
  305. }
  306.  
  307. .container {
  308. position: relative;
  309. margin: 24px 44px;
  310. width: calc(100vw - 88px); /* container size */
  311. min-height: calc(100vh - 48px);
  312. background-color: {color:Slide bg};
  313. {block:IfShowBoxShadows}box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);{/block:IfShowBoxShadows}
  314. }
  315.  
  316. .container_title {
  317. display: flex;
  318. justify-content: center;
  319. align-items: center;
  320. position: fixed;
  321. z-index: 200;
  322. margin-top: calc((100vh - 48px) / 2);
  323. width: 80px;
  324. height: 0;
  325. text-align: center;
  326. }
  327.  
  328. .title_text {
  329. display: block;
  330. position: relative;
  331. white-space: nowrap;
  332. font-size: {text:Slide title font size};
  333. font-weight: 300;
  334. letter-spacing: .09em;
  335. word-spacing: .09em;
  336. color: {color:Slide navigation buttons}; /* slide title */
  337. transform: rotate(-90deg);
  338. transform-origin: top top;
  339. }
  340.  
  341. .slide-navigation {
  342. visibility: hidden;
  343. position: fixed;
  344. z-index: 200;
  345. margin-left: calc(100% - 168px);
  346. width: 80px;
  347. height: calc(100vh - 48px);
  348. text-align: center;
  349. }
  350.  
  351. .slide-navigation nav {
  352. display: flex;
  353. flex-direction: column;
  354. justify-content: center;
  355. align-items: center;
  356. align-content: center;
  357. width: 80px;
  358. height: calc(100vh - 48px);
  359. }
  360.  
  361. .slide-navigation nav:hover > label { opacity: 0.4; }
  362. .slide-navigation nav:hover > label:hover { opacity: 1; }
  363.  
  364. [class^="slide-icon_"] {
  365. cursor: pointer;
  366. visibility: visible;
  367. display: block;
  368. position: relative;
  369. padding: 8px;
  370. width: 32px;
  371. height: 32px;
  372. font-size: 16px;
  373. line-height: 16px;
  374. color: {color:Slide navigation buttons}; /* slide icons */
  375. transition: opacity .2s ease;
  376. }
  377.  
  378. [class^="slide-icon_"]:after {
  379. content: '';
  380. position: absolute;
  381. opacity: 0;
  382. top: 100%;
  383. right: 3px;
  384. margin-top: -10px;
  385. width: 5px;
  386. height: 5px;
  387. border-radius: 50%;
  388. background-color: {color:Slide active icon};
  389. }
  390.  
  391. .slide_a .slide-icon_a:after,
  392. .slide_b .slide-icon_b:after,
  393. .slide_c .slide-icon_c:after,
  394. .slide_d .slide-icon_d:after,
  395. .slide_e .slide-icon_e:after,
  396. .slide_f .slide-icon_f:after,
  397. [class^="slide-icon_"]:hover .slidename {
  398. opacity: 1;
  399. }
  400.  
  401. .slidename {
  402. pointer-events: none;
  403. position: absolute;
  404. opacity: 0;
  405. top: 0;
  406. right: 36px;
  407. padding: 0 12px;
  408. font-size: {text:Permalink font size};
  409. text-transform: uppercase;
  410. letter-spacing: .09em;
  411. word-spacing: .09em;
  412. line-height: 32px;
  413. white-space: nowrap;
  414. color: {color:Slide navigation buttons}; /* slide icon name */
  415. transition: opacity .2s ease
  416. }
  417.  
  418. .back_to_top {
  419. cursor: pointer;
  420. visibility: visible;
  421. display: none;
  422. position: absolute;
  423. left: 0;
  424. bottom: -24px;
  425. width: 16px;
  426. height: 16px;
  427. margin: 32px;
  428. font-size: 16px;
  429. line-height: 16px;
  430. color: {color:Slide navigation buttons}; /* back to top arrow */
  431. transition: bottom .2s linear;
  432. }
  433.  
  434. .content {
  435. display: flex;
  436. flex-direction: column;
  437. justify-content: center;
  438. align-items: center;
  439. align-content: center;
  440. margin: 0 auto;
  441. width: calc(100% - 160px); /* for content inside slides */
  442. min-height: calc(100vh - 48px);
  443. }
  444.  
  445. .content_wrapper { display: block; margin: 80px 0; }
  446.  
  447.  
  448. /* === BLOG POSTS SLIDE === */
  449. .post_content {
  450. display: block;
  451. margin: 0 auto;
  452. padding: 1px 0;
  453. width: calc(100% - 160px);
  454. }
  455.  
  456. header {
  457. display: flex;
  458. flex-direction: column;
  459. justify-content: center;
  460. align-items: flex-start;
  461. align-content: center;
  462. position: relative;
  463. padding: 1em 0;
  464. z-index: 200;
  465. width: 100%;
  466. min-height: 80px;
  467. background-color: rgba({RGBcolor:Slide bg},.8);
  468. }
  469.  
  470. .header_links:after {
  471. content: '';
  472. clear: both;
  473. display: table;
  474. }
  475.  
  476. .header_links { display: block; visibility: hidden; }
  477. .header_links:hover > a { opacity: 0.4; }
  478. .header_links:hover > a:focus,
  479. .header_links:hover > a:hover { opacity: 1; }
  480.  
  481. .header_links a {
  482. cursor: pointer;
  483. float: left;
  484. visibility: visible;
  485. padding: 0 8px;
  486. font-size: {text:Permalink font size};
  487. line-height: 1.4em;
  488. text-transform: uppercase;
  489. letter-spacing: 0.09em;
  490. color: {color:Slide navigation buttons}; /* header links */
  491. }
  492.  
  493. .description {
  494. display: block;
  495. font-style: italic;
  496. line-height: 1.4em;
  497. color: {color:Description}; /* blog description */
  498. }
  499.  
  500. .post {
  501. margin: 80px auto 120px auto; /* post margins */
  502. }
  503.  
  504. .fivepx .post { width: 500px; }
  505. .fourpx .post { width: 400px; }
  506.  
  507. .post_body, .post_icon, .post_tags a, .notes {
  508. background-color: {color:Post bg}; /* post bg */
  509. border: 1px solid {color:Post border};
  510. {block:IfShowBoxShadows}box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);{/block:IfShowBoxShadows}
  511. }
  512.  
  513. .post_body {
  514. position: relative;
  515. margin-top: 24px;
  516. padding: 0 24px;
  517. }
  518.  
  519. .post_icon {
  520. position: absolute;
  521. top: 0;
  522. left: -72px;
  523. width: 48px;
  524. height: 48px;
  525. font-size: 16px;
  526. text-align: center;
  527. line-height: 46px;
  528. color: {color:Post date}; /* post icons */
  529. }
  530.  
  531. .post_date {
  532. position: relative;
  533. line-height: 48px;
  534. font-style: italic;
  535. color: {color:Post date}; /* post date */
  536. }
  537.  
  538. .post_date:before {
  539. content: '';
  540. position: absolute;
  541. top: 100%;
  542. width: 32px;
  543. height: 1px; /* line underneath post date */
  544. background-color: rgba({RGBcolor:Post date},.7);
  545. }
  546.  
  547. .entry { margin: 24px 0; }
  548.  
  549. .caption {
  550. {block:IfNotShowPostCaptions}
  551. {block:IndexPage}display: none;{/block:IndexPage}
  552. {/block:IfNotShowPostCaptions}
  553. }
  554.  
  555. .artist { font-size: .91em; } /* for audio posts */
  556. .trackname { font-size: 1.09em; font-weight: 300; }
  557.  
  558. .post_question { font-style: italic; } /* for answer posts */
  559. .post_question a { color: {color:Post heading}; }
  560. .post_answer { margin-top: 8px; }
  561.  
  562. .permalink {
  563. display: flex;
  564. flex-wrap: wrap;
  565. margin-top: 16px;
  566. font-size: {text:Permalink font size};
  567. text-transform: uppercase;
  568. letter-spacing: .09em;
  569. word-spacing: .09em;
  570. }
  571.  
  572. .permalink a {
  573. display: block;
  574. padding: 0 8px;
  575. color: {color:Post permalink};
  576. }
  577.  
  578. .permalink a:focus,
  579. .permalink a:hover { color: {color:Post permalink hover}; }
  580.  
  581. .permalink a:nth-of-type(1) { padding-left: 0; }
  582. .permalink a:nth-of-type(4) { padding-right: 0; }
  583.  
  584. .permalink span {
  585. padding-right: 4px;
  586. font-size: {text:Permalink font size};
  587. vertical-align: top;
  588. }
  589.  
  590. .post_tags {
  591. {block:IfNotShowPostTags}
  592. {block:IndexPage}display: none;{/block:IndexPage}
  593. {/block:IfNotShowPostTags}
  594. visibility: hidden;
  595. margin-top: 8px;
  596. margin-left: -4px;
  597. padding: 0 4px;
  598. width: calc(100% + 16px);
  599. line-height: calc(1.8em + 8px);
  600. }
  601.  
  602. .post_tags a {
  603. visibility: visible;
  604. margin-right: 4px;
  605. padding: 4px 8px;
  606. font-size: .91em;
  607. color: {color:Text}; /* post tags */
  608. }
  609.  
  610. .post_tags a:focus,
  611. .post_tags a:hover { color: {color:Post tags hover}; }
  612.  
  613. .pagination a {
  614. opacity: .4;
  615. margin: 0 24px;
  616. color: {color:Slide navigation buttons};
  617. }
  618.  
  619. a.page { opacity: 1; }
  620.  
  621.  
  622. /* === MESSAGE / SUBMIT SLIDE === */
  623. .messagebox { width: 500px; }
  624. .submitbox { display: none; margin-top: 60px; width: 500px; }
  625.  
  626.  
  627. /* === ABOUT SLIDE === */
  628. .about_wrapper { display: flex; }
  629. .about_wrapper aside { display: block; margin: 0 4px; }
  630.  
  631. .about_wrapper aside img {
  632. display: block;
  633. width: 160px; /* about page image */
  634. margin: 8px 0;
  635. }
  636.  
  637. .stats {
  638. margin: 8px 0;
  639. padding: 12px;
  640. width: 160px; /* stats box */
  641. }
  642.  
  643. .stats > li { margin: 0; padding: 0; }
  644. .stats > li:before { display: none; }
  645.  
  646. .about {
  647. display: block;
  648. margin: 8px 4px;
  649. padding: 24px;
  650. width: 400px; /* main about box */
  651. }
  652.  
  653. .about > p:nth-of-type(1) { margin-top: 0; }
  654. .about > p:nth-last-of-type(1) { margin-bottom: 0; }
  655.  
  656. .stats, .about {
  657. background-color: {color:Post bg}; /* stats + about bg */
  658. border: 1px solid {color:Post border};
  659. {block:IfShowBoxShadows}box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);{/block:IfShowBoxShadows}
  660. }
  661.  
  662.  
  663. /* === NAVIGATION SLIDE === */
  664. .main_links {
  665. visibility: hidden;
  666. margin: 48px 0;
  667. width: 600px;
  668. font-size: 2em;
  669. font-weight: 300;
  670. text-align: center;
  671. }
  672.  
  673. .sub_links {
  674. visibility: hidden;
  675. margin: 8px 0;
  676. width: 600px;
  677. text-align: center;
  678. }
  679.  
  680. .sub_links > span {
  681. visibility: visible;
  682. position: relative;
  683. display: inline-block;
  684. margin: 0 .4em;
  685. font-size: .91em;
  686. text-transform: uppercase;
  687. letter-spacing: .09em;
  688. word-spacing: .09em;
  689. color: {color:Post date}; /* sub links group name */
  690. }
  691.  
  692. .sub_links > span:before {
  693. content: '';
  694. position: absolute;
  695. top: 100%;
  696. width: 100%;
  697. height: 1px;
  698. background-color: rgba({RGBcolor:Post date},.7);
  699. }
  700.  
  701. .main_links a,
  702. .sub_links a {
  703. visibility: visible;
  704. padding: 0 .4em;
  705. color: {color:Post heading}; /* navigation links color */
  706. }
  707.  
  708. [class$="_links"]:hover > a { opacity: 0.4; }
  709. [class$="_links"]:hover > a:focus,
  710. [class$="_links"]:hover > a:hover{ opacity: 1; }
  711.  
  712.  
  713. /* === FAQ SLIDE === */
  714. .faq { margin: 24px 0; }
  715. .fivepx .faq { width: 500px; }
  716. .fourpx .faq { width: 400px; }
  717.  
  718. .faq > div {
  719. position: relative;
  720. margin: 8px 0;
  721. padding: 16px;
  722. }
  723.  
  724. .faq > div:before {
  725. position: absolute;
  726. top: 8px;
  727. right: 100%;
  728. margin-right: 24px;
  729. padding: 8px;
  730. width: 1.8em;
  731. text-align: center;
  732. }
  733.  
  734. .question { font-style: italic; }
  735. .question, .question:before { color: {color:Post date}; }
  736. .question:before { content: 'Q'; font-style: normal; }
  737.  
  738. .answer:before { content: 'A'; }
  739. .answer p:nth-of-type(1) { margin-top: 0; }
  740. .answer p:nth-last-of-type(1) { margin-bottom: 0; }
  741.  
  742. .faq > div, .faq > div:before {
  743. background-color: {color:Post bg}; /* faq bg */
  744. border: 1px solid {color:Post border};
  745. {block:IfShowBoxShadows}box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);{/block:IfShowBoxShadows}
  746. }
  747.  
  748.  
  749. /* === BLOGROLL SLIDE === */
  750. .blogroll_wrapper {
  751. display: flex;
  752. flex-wrap: wrap;
  753. width: 612px;
  754. }
  755.  
  756. a.following {
  757. display: flex;
  758. flex-direction: column;
  759. justify-content: center;
  760. align-content: center;
  761. position: relative;
  762. margin: 12px;
  763. padding-left: 56px;
  764. width: 180px;
  765. height: 58px;
  766. color: #999;
  767. background-color: {color:Post bg};
  768. border: 1px solid {color:Post border};
  769. {block:IfShowBoxShadows}box-shadow: 0 1px 3px 1px rgba(0,0,0,.05);{/block:IfShowBoxShadows}
  770. }
  771.  
  772. .following img {
  773. position: absolute;
  774. top: 0;
  775. left: 0;
  776. margin: 8px;
  777. border-radius: 2px;
  778. }
  779.  
  780. .following div {
  781. display: block;
  782. overflow: hidden;
  783. white-space: nowrap;
  784. text-overflow: ellipsis;
  785. width: 114px;
  786. }
  787.  
  788. .followedname {
  789. height: 1.4em;
  790. line-height: 1.4em;
  791. color: {color:Post heading};
  792. }
  793.  
  794. .followedtitle {
  795. height: 14;
  796. line-height: 14px;
  797. font-size: 10px;
  798. }
  799.  
  800.  
  801. /* === TOOLTIP === */
  802. #s-m-t-tooltip {
  803. overflow: hidden;
  804. z-index: 99999;
  805. margin: 20px 16px;
  806. padding: 1em;
  807. font-size: {text:Permalink font size};
  808. line-height: 1em;
  809. text-transform: uppercase;
  810. letter-spacing: .09em;
  811. word-spacing: .09em;
  812. border-radius: 2px;
  813. color: {color:Tooltip text};
  814. background-color: {color:Tooltip bg};
  815. }
  816.  
  817.  
  818. @media only screen and (max-width: 1020px) {
  819. /* For screen sizes smaller than 1020px (Please do not edit) */
  820. .container {
  821. margin: 24px 0;
  822. width: 1000px;
  823. min-height: calc(100vh - 68px);
  824. }
  825.  
  826. .slide-navigation {
  827. margin-left: calc(100% - 100px);
  828. height: calc(100vh - 68px);
  829. }
  830.  
  831. .content {
  832. min-height: calc(100vh - 68px);
  833. }
  834. }
  835.  
  836.  
  837. @supports (position:sticky) {
  838. /* For positioning of slides (Please do not edit) */
  839. .container {
  840. display: flex;
  841. justify-content: space-between;
  842. }
  843.  
  844. .container_title {
  845. order: 1;
  846. position: -webkit-sticky;
  847. position: sticky;
  848. top: 50vh;
  849. margin-top: 0;
  850. }
  851.  
  852. .slide-navigation {
  853. order: 3;
  854. position: -webkit-sticky;
  855. position: sticky;
  856. top: 24px;
  857. margin-left: 0;
  858. }
  859.  
  860. .content, .post_content {
  861. order: 2;
  862. }
  863.  
  864. header {
  865. position: -webkit-sticky;
  866. position: sticky;
  867. top: 0;
  868. }
  869. }
  870.  
  871.  
  872. {CustomCSS} /* Custom css */
  873. </style>
  874. </head>
  875. <body class="{select:Post size}">
  876.  
  877.  
  878.  
  879. <!-- Checkboxes for slide carousel (Please do not edit) -->
  880. <input type="radio" id="check_a" checked="checked" name="carousel"/>
  881. {block:IfShowMessageSlide}
  882. <input type="radio" id="check_b" name="carousel"/>
  883. {/block:IfShowMessageSlide}
  884. {block:IfShowAboutSlide}
  885. <input type="radio" id="check_c" name="carousel"/>
  886. {/block:IfShowAboutSlide}
  887. {block:IfShowNavigationSlide}
  888. <input type="radio" id="check_d" name="carousel"/>
  889. {/block:IfShowNavigationSlide}
  890. {block:IfShowFAQSlide}
  891. <input type="radio" id="check_e" name="carousel"/>
  892. {/block:IfShowFAQSlide}
  893. {block:IfShowBlogrollSlide}{block:Following}
  894. <input type="radio" id="check_f" name="carousel"/>
  895. {/block:Following}{/block:IfShowBlogrollSlide}
  896.  
  897.  
  898.  
  899. <!-- Search box (Please do not edit) -->
  900. <div id="search">
  901. <div class="search_close icon-x"></div>
  902. <form action="/search" method="get" class="search">
  903. <input type="text" name="q" value="{SearchQuery}" placeholder="Type and Enter..." id="searchbar"/>
  904. </form>
  905. </div>
  906. <!---->
  907.  
  908.  
  909.  
  910. <div id="carousel"><!-- Carousel container -->
  911.  
  912.  
  913.  
  914. <!-- === BLOG POSTS SLIDE (Please do not edit) === -->
  915. <div class="slide_a">
  916. <div class="container">
  917.  
  918. <!-- Slide title -->
  919. <div class="container_title">
  920. <div class="title_text">{Title}</div>
  921. </div>
  922. <!---->
  923.  
  924. <!-- Slide navigation icons -->
  925. <div class="slide-navigation">
  926. <nav>
  927. <label for="check_a" class="slide-icon_a">
  928. <span class="icon-book-open">
  929. <div class="slidename">Blog posts</div>
  930. </span>
  931. </label>
  932. {block:IfShowMessageSlide}
  933. <label for="check_b" class="slide-icon_b">
  934. <span class="icon-mail">
  935. <div class="slidename">
  936. Message
  937. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  938. </div>
  939. </span>
  940. </label>
  941. {/block:IfShowMessageSlide}
  942. {block:IfShowAboutSlide}
  943. <label for="check_c" class="slide-icon_c">
  944. <span class="icon-user">
  945. <div class="slidename">About</div>
  946. </span>
  947. </label>
  948. {/block:IfShowAboutSlide}
  949. {block:IfShowNavigationSlide}
  950. <label for="check_d" class="slide-icon_d">
  951. <span class="icon-menu">
  952. <div class="slidename">Navigation</div>
  953. </span>
  954. </label>
  955. {/block:IfShowNavigationSlide}
  956. {block:IfShowFAQSlide}
  957. <label for="check_e" class="slide-icon_e">
  958. <span class="icon-star">
  959. <div class="slidename">FAQ's</div>
  960. </span>
  961. </label>
  962. {/block:IfShowFAQSlide}
  963. {block:IfShowBlogrollSlide}{block:Following}
  964. <label for="check_f" class="slide-icon_f">
  965. <span class="icon-plus-circle">
  966. <div class="slidename">Blogroll</div>
  967. </span>
  968. </label>
  969. {/block:Following}{/block:IfShowBlogrollSlide}
  970. </nav>
  971. <div class="back_to_top icon-arrow-up"></div>
  972. </div>
  973. <!---->
  974.  
  975. <!-- Slide content -->
  976. <main class="post_content">
  977.  
  978. <header>
  979. <!-- Refresh / archive buttons -->
  980. <nav class="header_links">
  981. <a href="/">refresh</a>
  982. {block:IfShowMessageSlide}
  983. <a><label for="check_b">Message</label></a>
  984. {block:SubmissionsEnabled}<a><label for="check_b">Submit</label></a>{/block:SubmissionsEnabled}
  985. {/block:IfShowMessageSlide}
  986. {block:IfNotShowMessageSlide}
  987. {block:AskEnabled}<a href="/ask">Message</a>{/block:AskEnabled}
  988. {block:SubmissionsEnabled}<a href="/submit">Submit</a>{/block:SubmissionsEnabled}
  989. {/block:IfNotShowMessageSlide}
  990. <a href="/archive">Archive</a>
  991. <a class="search_btn">Search</a>
  992. <a href="https://yeoli-thm.tumblr.com" target="{Target}" class="theme">Theme</a>
  993. </nav>
  994. <!---->
  995. <!-- Blog description -->
  996. {block:Description}
  997. <div class="description">
  998. {Description}
  999. </div>
  1000. {/block:Description}
  1001. <!---->
  1002. </header>
  1003.  
  1004. <!-- Main posts section -->
  1005. {block:SearchPage}{block:NoSearchResults}
  1006. <article class="post">
  1007. <div class="post_body">
  1008. <div class="entry">
  1009. <h2>No results found</h2>
  1010. <p>There are no results matching your search.</p>
  1011. </div>
  1012. </div>
  1013. </article>
  1014. {/block:NoSearchResults}{/block:SearchPage}
  1015.  
  1016. {block:Posts}
  1017. <article class="post">
  1018.  
  1019. {block:Text}
  1020. <div class="post_body">
  1021. {block:Date}
  1022. <div class="post_icon icon-type"></div>
  1023. <div class="post_date">
  1024. {DayofWeek} {DayofMonth} {Month}, {Year}
  1025. </div>
  1026. {/block:Date}
  1027. <div class="entry">
  1028. {block:Title}
  1029. <h1>{Title}</h1>
  1030. {/block:Title}
  1031. {Body}
  1032. </div>
  1033. </div>
  1034. {/block:Text}
  1035.  
  1036. {block:Photo}
  1037. <img src="{PhotoURL-500}" alt="{PhotoAlt}" style="display:block;width:100%"/>
  1038. <div class="post_body">
  1039. {block:Date}
  1040. <div class="post_icon icon-image"></div>
  1041. <div class="post_date">
  1042. {DayofWeek} {DayofMonth} {Month}, {Year}
  1043. </div>
  1044. {/block:Date}
  1045. {block:Caption}
  1046. <div class="caption entry">
  1047. {Caption}
  1048. </div>
  1049. {/block:Caption}
  1050. </div>
  1051. {/block:Photo}
  1052.  
  1053. {block:Photoset}
  1054. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1055. {block:Photos}
  1056. <div class="photo-data">
  1057. <div class="pxu-photo">
  1058. <img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"/>
  1059. </div>
  1060. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1061. </div>
  1062. {/block:Photos}
  1063. </div>
  1064. <div class="post_body">
  1065. {block:Date}
  1066. <div class="post_icon icon-layers"></div>
  1067. <div class="post_date">
  1068. {DayofWeek} {DayofMonth} {Month}, {Year}
  1069. </div>
  1070. {/block:Date}
  1071. {block:Caption}
  1072. <div class="caption entry">
  1073. {Caption}
  1074. </div>
  1075. {/block:Caption}
  1076. </div>
  1077. {/block:Photoset}
  1078.  
  1079. {block:Video}
  1080. <figure class="tmblr-embed">
  1081. {VideoEmbed-500}
  1082. </figure>
  1083. <div class="post_body">
  1084. {block:Date}
  1085. <div class="post_icon icon-film"></div>
  1086. <div class="post_date">
  1087. {DayofWeek} {DayofMonth} {Month}, {Year}
  1088. </div>
  1089. {/block:Date}
  1090. {block:Caption}
  1091. <div class="caption entry">
  1092. {Caption}
  1093. </div>
  1094. {/block:Caption}
  1095. </div>
  1096. {/block:Video}
  1097.  
  1098. {block:Quote}
  1099. <div class="post_body">
  1100. {block:Date}
  1101. <div class="post_icon icon-feather"></div>
  1102. <div class="post_date">
  1103. {DayofWeek} {DayofMonth} {Month}, {Year}
  1104. </div>
  1105. {/block:Date}
  1106. <div class="entry">
  1107. <h2 class="quote">{Quote}</h2>
  1108. {Source}
  1109. </div>
  1110. </div>
  1111. {block:Quote}
  1112.  
  1113. {block:Chat}
  1114. <div class="post_body">
  1115. {block:Date}
  1116. <div class="post_icon icon-users"></div>
  1117. <div class="post_date">
  1118. {DayofWeek} {DayofMonth} {Month}, {Year}
  1119. </div>
  1120. {/block:Date}
  1121. <ul class="chat">
  1122. {block:Lines}
  1123. <li>
  1124. {block:Label}
  1125. <b>{Label}</b>
  1126. {/block:Label}
  1127. {Line}
  1128. </li>
  1129. {/block:Lines}
  1130. </ul>
  1131. </div>
  1132. {/block:Chat}
  1133.  
  1134. {block:Link}
  1135. <div class="post_body">
  1136. {block:Date}
  1137. <div class="post_icon icon-link"></div>
  1138. <div class="post_date">
  1139. {DayofWeek} {DayofMonth} {Month}, {Year}
  1140. </div>
  1141. {/block:Date}
  1142. <div class="entry">
  1143. <h2 class="post_link">
  1144. <a href="{URL}" target="{Target}">
  1145. {Name}
  1146. <span class="icon-chevron-right"></span>
  1147. </a>
  1148. </h2>
  1149. {block:Excerpt}
  1150. <code>{Excerpt}</code>
  1151. {/block:Excerpt}
  1152. {block:Description}
  1153. {Description}
  1154. {/block:Description}
  1155. </div>
  1156. </div>
  1157. {/block:Link}
  1158.  
  1159. {block:Audio}
  1160. {block:AudioEmbed}
  1161. <figure class="tmblr-embed">
  1162. {AudioEmbed-400}
  1163. </figure>
  1164. {/block:AudioEmbed}
  1165. {block:AudioPlayer}
  1166. <div class="audio_post">
  1167. <div class="album icon-headphones">
  1168. {block:AlbumArt}
  1169. <img src="{AlbumArtURL}" alt=""/>
  1170. {/block:AlbumArt}
  1171. </div>
  1172. <div class="player">
  1173. <span class="icon-skip-back"></span>
  1174. <div class="audioplayer">
  1175. {AudioPlayer}
  1176. </div>
  1177. <span class="icon-square"></span>
  1178. <span class="icon-skip-forward"></span>
  1179. </div>
  1180. <div class="audio_info">
  1181. {block:Artist}
  1182. <div class="artist">{Artist}</div>
  1183. {/block:Artist}
  1184. {block:TrackName}
  1185. <div class="trackname">{TrackName}</div>
  1186. {/block:TrackName}
  1187. </div>
  1188. </div>
  1189. {/block:AudioPlayer}
  1190. <div class="post_body">
  1191. {block:Date}
  1192. <div class="post_icon icon-music"></div>
  1193. <div class="post_date">
  1194. {DayofWeek} {DayofMonth} {Month}, {Year}
  1195. </div>
  1196. {/block:Date}
  1197. {block:Caption}
  1198. <div class="caption entry">
  1199. {Caption}
  1200. </div>
  1201. {/block:Caption}
  1202. </div>
  1203. {/block:Audio}
  1204.  
  1205. {block:Answer}
  1206. <div class="post_body">
  1207. {block:Date}
  1208. <div class="post_icon icon-message-square"></div>
  1209. <div class="post_date">
  1210. {DayofWeek} {DayofMonth} {Month}, {Year}
  1211. </div>
  1212. {/block:Date}
  1213. <div class="entry post_question">
  1214. <h3>{Asker} sent :</h3>
  1215. {Question}
  1216. </div>
  1217. </div>
  1218. <div class="post_body post_answer">
  1219. <div class="entry">
  1220. {Answer}
  1221. </div>
  1222. </div>
  1223. {/block:Answer}
  1224.  
  1225. {block:Date}
  1226. <div class="permalink">
  1227. <a href="{Permalink}">
  1228. <span class="icon-bar-chart-2"></span> {NoteCountwithLabel}
  1229. </a>
  1230. {block:IndexPage}
  1231. {block:IfNotShowPostTags}{block:HasTags}<a class="view_tag">
  1232. <span class="icon-tag"></span> View tags
  1233. </a>{/block:HasTags}{/block:IfNotShowPostTags}
  1234. <a class="lb">
  1235. {LikeButton}
  1236. <div class="likeb">
  1237. <span class="icon-heart"></span> Like
  1238. </div>
  1239. </a>
  1240. <a href="{ReblogURL}" target="{Target}">
  1241. <span class="icon-repeat"></span> Reblog
  1242. </a>
  1243. {/block:IndexPage}
  1244. {block:PermalinkPage}
  1245. {block:RebloggedFrom}
  1246. <a href="{ReblogParentURL}" title="Reblogged via">
  1247. <span class="icon-repeat"></span> {ReblogParentName}
  1248. </a>
  1249. <a href="{ReblogRootURL}" title="Posted by">
  1250. <span class="icon-user"></span> {ReblogRootName}
  1251. </a>
  1252. {/block:RebloggedFrom}
  1253. {block:ContentSource}
  1254. <a href="{SourceURL}" title="{SourceTitle}">
  1255. <span class="icon-map-pin"></span> Source
  1256. </a>
  1257. {/block:ContentSource}
  1258. {/block:PermalinkPage}
  1259. </div>
  1260. {/block:Date}
  1261.  
  1262. {block:HasTags}
  1263. <div class="post_tags">
  1264. {block:Tags}
  1265. <a href="{TagURL}">{Tag}</a>
  1266. {/block:Tags}
  1267. </div>
  1268. {/block:HasTags}
  1269.  
  1270. {block:PostNotes}
  1271. {PostNotes}
  1272. {/block:PostNotes}
  1273.  
  1274. </article>
  1275. {/block:Posts}
  1276.  
  1277. {block:Pagination}
  1278. <div class="pagination">
  1279. <a {block:PreviousPage}href="{PreviousPage}"{/block:PreviousPage} class="{block:PreviousPage}page {/block:PreviousPage}icon-arrow-left"></a>
  1280. <a {block:NextPage}href="{NextPage}"{/block:NextPage} class="{block:NextPage}page {/block:NextPage}icon-arrow-right"></a>
  1281. </div>
  1282. {/block:Pagination}
  1283. </main>
  1284. <!---->
  1285.  
  1286. </div>
  1287. </div>
  1288. <!-- === End of blog posts slide === -->
  1289.  
  1290.  
  1291.  
  1292. <!-- === MESSAGE / SUBMIT SLIDE (Please do not edit) === -->
  1293. {block:IfShowMessageSlide}
  1294. <div class="slide_b">
  1295. <div class="container">
  1296.  
  1297. <!-- Slide title -->
  1298. <div class="container_title">
  1299. <div class="title_text">
  1300. {AskLabel}
  1301. {block:SubmissionsEnabled}/ {SubmitLabel}{/block:SubmissionsEnabled}
  1302. </div>
  1303. </div>
  1304. <!---->
  1305.  
  1306. <!-- Slide navigation icons -->
  1307. <div class="slide-navigation">
  1308. <nav>
  1309. <label for="check_a" class="slide-icon_a">
  1310. <span class="icon-book-open">
  1311. <div class="slidename">Blog posts</div>
  1312. </span>
  1313. </label>
  1314. <label for="check_b" class="slide-icon_b">
  1315. <span class="icon-mail">
  1316. <div class="slidename">
  1317. Message
  1318. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  1319. </div>
  1320. </span>
  1321. </label>
  1322. {block:IfShowAboutSlide}
  1323. <label for="check_c" class="slide-icon_c">
  1324. <span class="icon-user">
  1325. <div class="slidename">About</div>
  1326. </span>
  1327. </label>
  1328. {/block:IfShowAboutSlide}
  1329. {block:IfShowNavigationSlide}
  1330. <label for="check_d" class="slide-icon_d">
  1331. <span class="icon-menu">
  1332. <div class="slidename">Navigation</div>
  1333. </span>
  1334. </label>
  1335. {/block:IfShowNavigationSlide}
  1336. {block:IfShowFAQSlide}
  1337. <label for="check_e" class="slide-icon_e">
  1338. <span class="icon-star">
  1339. <div class="slidename">FAQ's</div>
  1340. </span>
  1341. </label>
  1342. {/block:IfShowFAQSlide}
  1343. {block:IfShowBlogrollSlide}{block:Following}
  1344. <label for="check_f" class="slide-icon_f">
  1345. <span class="icon-plus-circle">
  1346. <div class="slidename">Blogroll</div>
  1347. </span>
  1348. </label>
  1349. {/block:Following}{/block:IfShowBlogrollSlide}
  1350. </nav>
  1351. <div class="back_to_top icon-arrow-up"></div>
  1352. </div>
  1353. <!---->
  1354.  
  1355. <!-- Slide content -->
  1356. <div class="content">
  1357. <div class="content_wrapper">
  1358.  
  1359. <div class="messagebox">
  1360. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent;overflow:hidden" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1361. </div>
  1362.  
  1363. {block:SubmissionsEnabled}
  1364. <div class="submitbox">
  1365. <iframe frameborder="0" scrolling="no" width="100%" height="400" src="https://www.tumblr.com/submit_form/{Name}.tumblr.com" id="submit_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]-->
  1366. </div>
  1367. {/block:SubmissionsEnabled}
  1368.  
  1369. </div>
  1370. </div>
  1371. <!---->
  1372.  
  1373. </div>
  1374. </div>
  1375. {/block:IfShowMessageSlide}
  1376. <!-- === End of message / submit slide === -->
  1377.  
  1378.  
  1379.  
  1380. <!-- === ABOUT SLIDE === -->
  1381. {block:IfShowAboutSlide}
  1382. <div class="slide_c">
  1383. <div class="container">
  1384.  
  1385. <!-- Slide title -->
  1386. <div class="container_title">
  1387. <div class="title_text">About</div>
  1388. </div>
  1389. <!---->
  1390.  
  1391. <!-- Slide navigation icons -->
  1392. <div class="slide-navigation">
  1393. <nav>
  1394. <label for="check_a" class="slide-icon_a">
  1395. <span class="icon-book-open">
  1396. <div class="slidename">Blog posts</div>
  1397. </span>
  1398. </label>
  1399. {block:IfShowMessageSlide}
  1400. <label for="check_b" class="slide-icon_b">
  1401. <span class="icon-mail">
  1402. <div class="slidename">
  1403. Message
  1404. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  1405. </div>
  1406. </span>
  1407. </label>
  1408. {/block:IfShowMessageSlide}
  1409. <label for="check_c" class="slide-icon_c">
  1410. <span class="icon-user">
  1411. <div class="slidename">About</div>
  1412. </span>
  1413. </label>
  1414. {block:IfShowNavigationSlide}
  1415. <label for="check_d" class="slide-icon_d">
  1416. <span class="icon-menu">
  1417. <div class="slidename">Navigation</div>
  1418. </span>
  1419. </label>
  1420. {/block:IfShowNavigationSlide}
  1421. {block:IfShowFAQSlide}
  1422. <label for="check_e" class="slide-icon_e">
  1423. <span class="icon-star">
  1424. <div class="slidename">FAQ's</div>
  1425. </span>
  1426. </label>
  1427. {/block:IfShowFAQSlide}
  1428. {block:IfShowBlogrollSlide}{block:Following}
  1429. <label for="check_f" class="slide-icon_f">
  1430. <span class="icon-plus-circle">
  1431. <div class="slidename">Blogroll</div>
  1432. </span>
  1433. </label>
  1434. {/block:Following}{/block:IfShowBlogrollSlide}
  1435. </nav>
  1436. <div class="back_to_top icon-arrow-up"></div>
  1437. </div>
  1438. <!---->
  1439.  
  1440. <!-- Slide content -->
  1441. <div class="content">
  1442. <div class="content_wrapper about_wrapper">
  1443.  
  1444.  
  1445. <!-- Left sidebar (Delete sections if unneeded) -->
  1446. <aside>
  1447.  
  1448. <!-- Sidebar image (width resizes to 160px)-->
  1449. <img src="YOUR IMAGE URL"/>
  1450. <!-- To upload image from computer:
  1451. - click on settings icon at top left
  1452. - click on 'Theme assests'
  1453. - click on 'Add a file' then 'Insert'
  1454. - place image url into position above
  1455. <!---->
  1456.  
  1457. <!-- Stats section -->
  1458. <ul class="stats">
  1459.  
  1460. <li> <b>Name:</b> Your name </li>
  1461. <li> <b>Status:</b> online </li>
  1462. <li> <b>Some info:</b> info </li>
  1463. <li> <b>Online:</b> <!-- your stat counter script goes here --> </li>
  1464. <li> <b>Blog est:</b> 2018 </li>
  1465.  
  1466. </ul>
  1467. <!---->
  1468.  
  1469. </aside>
  1470. <!-- End of sidebar -->
  1471.  
  1472.  
  1473. <!-- Your about info goes here -->
  1474. <article class="about">
  1475.  
  1476. <p>Some paragraph. Suspendisse fermentum ipsum quis finibus posuere. Donec mi ex, feugiat in ultrices sit amet, consectetur ut ligula. Vestibulum in sapien et nunc pulvinar tincidunt non in eros. Nam sollicitudin, mi vitae scelerisque fringilla, sapien ante feugiat lacus, eu mattis tortor erat ut mauris.</p>
  1477.  
  1478. <p>Another paragraph. Vivamus ipsum ante, vehicula vitae eros quis, varius cursus lorem. Curabitur vitae purus posuere arcu mattis rutrum id id velit. Quisque aliquam mauris vitae lobortis euismod. Duis eu finibus magna, sit amet luctus nibh. Suspendisse sem tellus, pulvinar sed consequat sit amet, ornare et sapien.</p>
  1479.  
  1480. </article>
  1481. <!-- End of about info -->
  1482.  
  1483. </div>
  1484. </div>
  1485. <!---->
  1486.  
  1487. </div>
  1488. </div>
  1489. {/block:IfShowAboutSlide}
  1490. <!-- === End of about slide === -->
  1491.  
  1492.  
  1493.  
  1494. <!-- === NAVIGATION SLIDE === -->
  1495. {block:IfShowNavigationSlide}
  1496. <div class="slide_d">
  1497. <div class="container">
  1498.  
  1499. <!-- Slide title -->
  1500. <div class="container_title">
  1501. <div class="title_text">Navigation</div>
  1502. </div>
  1503. <!---->
  1504.  
  1505. <!-- Slide navigation icons -->
  1506. <div class="slide-navigation">
  1507. <nav>
  1508. <label for="check_a" class="slide-icon_a">
  1509. <span class="icon-book-open">
  1510. <div class="slidename">Blog posts</div>
  1511. </span>
  1512. </label>
  1513. {block:IfShowMessageSlide}
  1514. <label for="check_b" class="slide-icon_b">
  1515. <span class="icon-mail">
  1516. <div class="slidename">
  1517. Message
  1518. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  1519. </div>
  1520. </span>
  1521. </label>
  1522. {/block:IfShowMessageSlide}
  1523. {block:IfShowAboutSlide}
  1524. <label for="check_c" class="slide-icon_c">
  1525. <span class="icon-user">
  1526. <div class="slidename">About</div>
  1527. </span>
  1528. </label>
  1529. {/block:IfShowAboutSlide}
  1530. <label for="check_d" class="slide-icon_d">
  1531. <span class="icon-menu">
  1532. <div class="slidename">Navigation</div>
  1533. </span>
  1534. </label>
  1535. {block:IfShowFAQSlide}
  1536. <label for="check_e" class="slide-icon_e">
  1537. <span class="icon-star">
  1538. <div class="slidename">FAQ's</div>
  1539. </span>
  1540. </label>
  1541. {/block:IfShowFAQSlide}
  1542. {block:IfShowBlogrollSlide}{block:Following}
  1543. <label for="check_f" class="slide-icon_f">
  1544. <span class="icon-plus-circle">
  1545. <div class="slidename">Blogroll</div>
  1546. </span>
  1547. </label>
  1548. {/block:Following}{/block:IfShowBlogrollSlide}
  1549. </nav>
  1550. <div class="back_to_top icon-arrow-up"></div>
  1551. </div>
  1552. <!---->
  1553.  
  1554. <!-- Slide content -->
  1555. <div class="content">
  1556. <div class="content_wrapper">
  1557.  
  1558.  
  1559. <!-- Main links section (Delete sections if unneeded) -->
  1560. <nav class="main_links">
  1561.  
  1562. <a href="LINK URL">Link 1</a>
  1563. <a href="LINK URL">Link 2</a>
  1564. <a href="LINK URL">Link 3</a>
  1565. <a href="LINK URL">Link 4</a>
  1566. <a href="LINK URL">Link 5</a>
  1567. <a href="LINK URL">Link 6</a>
  1568.  
  1569. </nav>
  1570. <!---->
  1571.  
  1572. <!-- Sub links section (Delete sections if unneeded) -->
  1573. <nav class="sub_links">
  1574.  
  1575. <span>Sub links group name</span>
  1576.  
  1577. <a href="LINK URL">Link 1</a>
  1578. <a href="LINK URL">Link 2</a>
  1579. <a href="LINK URL">Link 3</a>
  1580. <a href="LINK URL">Link 4</a>
  1581. <a href="LINK URL">Link 5</a>
  1582. <a href="LINK URL">Link 6</a>
  1583.  
  1584. </nav>
  1585. <!---->
  1586.  
  1587. <!-- Sub links section (Delete sections if unneeded) -->
  1588. <nav class="sub_links">
  1589.  
  1590. <span>Sub links group name</span>
  1591.  
  1592. <a href="LINK URL">Link 1</a>
  1593. <a href="LINK URL">Link 2</a>
  1594. <a href="LINK URL">Link 3</a>
  1595. <a href="LINK URL">Link 4</a>
  1596. <a href="LINK URL">Link 5</a>
  1597. <a href="LINK URL">Link 6</a>
  1598.  
  1599. </nav>
  1600. <!---->
  1601.  
  1602.  
  1603. </div>
  1604. </div>
  1605. <!---->
  1606.  
  1607. </div>
  1608. </div>
  1609. {/block:IfShowNavigationSlide}
  1610. <!-- === End of navigation slide === -->
  1611.  
  1612.  
  1613.  
  1614. <!-- === FAQ SLIDE === -->
  1615. {block:IfShowFAQSlide}
  1616. <div class="slide_e">
  1617. <div class="container">
  1618.  
  1619. <!-- Slide title -->
  1620. <div class="container_title">
  1621. <div class="title_text">FAQ's</div>
  1622. </div>
  1623. <!---->
  1624.  
  1625. <!-- Slide navigation icons -->
  1626. <div class="slide-navigation">
  1627. <nav>
  1628. <label for="check_a" class="slide-icon_a">
  1629. <span class="icon-book-open">
  1630. <div class="slidename">Blog posts</div>
  1631. </span>
  1632. </label>
  1633. {block:IfShowMessageSlide}
  1634. <label for="check_b" class="slide-icon_b">
  1635. <span class="icon-mail">
  1636. <div class="slidename">
  1637. Message
  1638. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  1639. </div>
  1640. </span>
  1641. </label>
  1642. {/block:IfShowMessageSlide}
  1643. {block:IfShowAboutSlide}
  1644. <label for="check_c" class="slide-icon_c">
  1645. <span class="icon-user">
  1646. <div class="slidename">About</div>
  1647. </span>
  1648. </label>
  1649. {/block:IfShowAboutSlide}
  1650. {block:IfShowNavigationSlide}
  1651. <label for="check_d" class="slide-icon_d">
  1652. <span class="icon-menu">
  1653. <div class="slidename">Navigation</div>
  1654. </span>
  1655. </label>
  1656. {/block:IfShowNavigationSlide}
  1657. <label for="check_e" class="slide-icon_e">
  1658. <span class="icon-star">
  1659. <div class="slidename">FAQ's</div>
  1660. </span>
  1661. </label>
  1662. {block:IfShowBlogrollSlide}{block:Following}
  1663. <label for="check_f" class="slide-icon_f">
  1664. <span class="icon-plus-circle">
  1665. <div class="slidename">Blogroll</div>
  1666. </span>
  1667. </label>
  1668. {/block:Following}{/block:IfShowBlogrollSlide}
  1669. </nav>
  1670. <div class="back_to_top icon-arrow-up"></div>
  1671. </div>
  1672. <!---->
  1673.  
  1674. <!-- Slide content -->
  1675. <div class="content">
  1676. <div class="content_wrapper">
  1677.  
  1678. <!-- Your FAQ and answer goes here -->
  1679. <article class="faq">
  1680.  
  1681. <div class="question">
  1682. First question?
  1683. </div>
  1684.  
  1685. <div class="answer">
  1686. <p>Answer.</p>
  1687. </div>
  1688.  
  1689. </article>
  1690. <!---->
  1691.  
  1692. <!-- Your FAQ and answer goes here -->
  1693. <article class="faq">
  1694.  
  1695. <div class="question">
  1696. Second question?
  1697. </div>
  1698.  
  1699. <div class="answer">
  1700. <p>Answer.</p>
  1701. </div>
  1702.  
  1703. </article>
  1704. <!---->
  1705.  
  1706. <!-- Your FAQ and answer goes here -->
  1707. <article class="faq">
  1708.  
  1709. <div class="question">
  1710. Third question?
  1711. </div>
  1712.  
  1713. <div class="answer">
  1714. <p>Answer.</p>
  1715. </div>
  1716.  
  1717. </article>
  1718. <!---->
  1719.  
  1720. <!-- Your FAQ and answer goes here -->
  1721. <article class="faq">
  1722.  
  1723. <div class="question">
  1724. Fourth question?
  1725. </div>
  1726.  
  1727. <div class="answer">
  1728. <p>Answer.</p>
  1729. </div>
  1730.  
  1731. </article>
  1732. <!---->
  1733.  
  1734.  
  1735. </div>
  1736. </div>
  1737. <!---->
  1738.  
  1739. </div>
  1740. </div>
  1741. {/block:IfShowFAQSlide}
  1742. <!-- === End of FAQ slide === -->
  1743.  
  1744.  
  1745.  
  1746. <!-- === BLOGROLL SLIDE (Please do not edit ) === -->
  1747. {block:IfShowBlogrollSlide}{block:Following}
  1748. <div class="slide_f">
  1749. <div class="container">
  1750.  
  1751. <!-- Slide title -->
  1752. <div class="container_title">
  1753. <div class="title_text">Blogroll</div>
  1754. </div>
  1755. <!---->
  1756.  
  1757. <!-- Slide navigation icons -->
  1758. <div class="slide-navigation">
  1759. <nav>
  1760. <label for="check_a" class="slide-icon_a">
  1761. <span class="icon-book-open">
  1762. <div class="slidename">Blog posts</div>
  1763. </span>
  1764. </label>
  1765. {block:IfShowMessageSlide}
  1766. <label for="check_b" class="slide-icon_b">
  1767. <span class="icon-mail">
  1768. <div class="slidename">
  1769. Message
  1770. {block:SubmissionsEnabled}/ Submit{/block:SubmissionsEnabled}
  1771. </div>
  1772. </span>
  1773. </label>
  1774. {/block:IfShowMessageSlide}
  1775. {block:IfShowAboutSlide}
  1776. <label for="check_c" class="slide-icon_c">
  1777. <span class="icon-user">
  1778. <div class="slidename">About</div>
  1779. </span>
  1780. </label>
  1781. {/block:IfShowAboutSlide}
  1782. {block:IfShowNavigationSlide}
  1783. <label for="check_d" class="slide-icon_d">
  1784. <span class="icon-menu">
  1785. <div class="slidename">Navigation</div>
  1786. </span>
  1787. </label>
  1788. {/block:IfShowNavigationSlide}
  1789. {block:IfShowFAQSlide}
  1790. <label for="check_e" class="slide-icon_e">
  1791. <span class="icon-star">
  1792. <div class="slidename">FAQ's</div>
  1793. </span>
  1794. </label>
  1795. {/block:IfShowFAQSlide}
  1796. <label for="check_f" class="slide-icon_f">
  1797. <span class="icon-plus-circle">
  1798. <div class="slidename">Blogroll</div>
  1799. </span>
  1800. </label>
  1801. </nav>
  1802. <div class="back_to_top icon-arrow-up"></div>
  1803. </div>
  1804. <!---->
  1805.  
  1806. <!-- Slide content -->
  1807. <div class="content">
  1808. <div class="content_wrapper blogroll_wrapper">
  1809.  
  1810. <!-- Following blog -->
  1811. {block:Followed}
  1812. <a href="{FollowedURL}" class="following" target="{Target}">
  1813. <img src="{FollowedPortraitURL-40}" alt="{PhotoAlt}"/>
  1814. <div class="followedname">{FollowedName}</div>
  1815. <div class="followedtitle">{FollowedTitle}</div>
  1816. </a>
  1817. {/block:Followed}
  1818. <!---->
  1819.  
  1820. </div>
  1821. </div>
  1822. <!---->
  1823.  
  1824. </div>
  1825. </div>
  1826. {/block:Following}{/block:IfShowBlogrollSlide}
  1827. <!-- === End of blogroll slide === -->
  1828.  
  1829.  
  1830.  
  1831. </div><!-- End of carousel container -->
  1832.  
  1833.  
  1834.  
  1835. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  1836. <script type="text/javascript" src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1837. <script type="text/javascript" src="https://static.tumblr.com/kmw8hta/byop3wmjc/pxuphotoset.js"></script>
  1838. <script type="text/javascript" src="https://static.tumblr.com/kmw8hta/MbPp5xs6b/yeoli-thm.min.js"></script>
  1839.  
  1840. <script>
  1841. (function($){
  1842. $(document).ready(function(){
  1843.  
  1844.  
  1845. $("[title]").style_my_tooltips({
  1846. /* --- For tooltip --- */
  1847. tip_follows_cursor: true,
  1848. tip_delay_time: 200,
  1849. tip_fade_speed: 300
  1850. });
  1851.  
  1852. $('.photo-slideshow:not(.processed)').pxuPhotoset({
  1853. /* --- For photoset resize --*/
  1854. 'lightbox' : true,
  1855. 'highRes' : true,
  1856. 'rounded' : false,
  1857. 'exif' : false,
  1858. 'captions' : false,
  1859. 'gutter' : '1px', /* Photoset gutter size */
  1860. 'photoset' : '.photo-slideshow',
  1861. 'photoWrap' : '.photo-data',
  1862. 'photo' : '.pxu-photo'
  1863. });
  1864.  
  1865. });
  1866.  
  1867. $(window).load(function(){
  1868. /* --- For loading submit box --- */
  1869. {block:SubmissionsEnabled}{block:IfShowMessageSlide}
  1870. $('.submitbox').css('display','block');
  1871. {/block:IfShowMessageSlide}{/block:SubmissionsEnabled}
  1872. });
  1873.  
  1874. })(jQuery)
  1875. </script>
  1876.  
  1877. <!-- =============================================================
  1878.  
  1879. // Feather Icons Font:
  1880. Copyright (c) 2013 - 2017 Cole Bemis
  1881. https://feathericons.com/
  1882.  
  1883. // PXU Photoset Extended:
  1884. Copyright (c) 2013 Pixel Union
  1885. https://github.com/PixelUnion/Extended-Tumblr-Photoset
  1886.  
  1887. // Style-my-tootltips
  1888. Copyright (c) 2012 Malihu
  1889. https://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  1890.  
  1891. ============================================================== -->
  1892.  
  1893. </body>
  1894. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!