API tools faq
paste
Advertisement
hunterthemes

Theme #31 (Created for #NoJSChallenge)

hunterthemes
Sep 8th, 2018
806
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.18 KB | None | 0 0
raw download clone embed print report
  1. <html> <meta charset="utf-8">
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3. <link rel="shortcut icon" href="{Favicon}">
  4. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  5.  
  6. <!----
  7.  
  8. © hunterthemes.tumblr.com | Theme #31 (Created for #NoJSChallenge)
  9.  
  10. * Do not redistribute this theme and claim it as your own.
  11. * Do not remove the credit or move it to another page.
  12. * Minor changes to this theme are allowed.
  13.  
  14. ---->
  15.  
  16. <!-- GOOGLE FONTS -->
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|EB+Garamond|Playfair+Display+SC|Lora|Open+Sans" rel="stylesheet">
  19.  
  20. <!-- DEFAULT VARIABLES -->
  21.  
  22. <meta name="image:Background" content=""/>
  23. <meta name="image:Sidebar background" content="" />
  24. <meta name="image:Avatar" content="" />
  25.  
  26. <meta name="color:Background" content="#fffffF" />
  27. <meta name="color:Sidebar background" content="#ffffff" />
  28. <meta name="color:Blog title" content="#222222" />
  29. <meta name="color:Main link" content="#222222" />
  30. <meta name="color:Search" content="#222222" />
  31. <meta name="color:Navigation link" content="#222222" />
  32. <meta name="color:Description" content="#222222" />
  33. <meta name="color:Text" content="#222222"/>
  34. <meta name="color:Bold" content="#000000"/>
  35. <meta name="color:Italic" content="#dddddd"/>
  36. <meta name="color:Link" content="#333333"/>
  37. <meta name="color:Hover" content="#7A9F98"/>
  38. <meta name="color:Accent" content="#FEE769"/>
  39. <meta name="color:Borders" content="#eeeeee"/>
  40. <meta name="color:Chat 1" content="#f8f8f8"/>
  41. <meta name="color:Chat 2" content="#cfcfcf"/>
  42. <meta name="color:Post buttons" content="#FEE769" />
  43. <meta name="color:Pagination" content="#222222" />
  44. <meta name="color:Scrollbar" content="#222222" />
  45. <meta name="color:Scrollbar background" content="#ffffff" />
  46.  
  47. <meta name="select:Title font" content="Abril Fatface" title="Abril Fatface">
  48. <meta name="select:Title font" content="EB Garamond" title="EB Garamond">
  49. <meta name="select:Title font" content="Playfair Display SC" title="Playfair Display SC">
  50. <meta name="select:Title font" content="Lora" title="Lora">
  51. <meta name="select:Title font" content="Open Sans" title="Open Sans">
  52.  
  53. <meta name="select:Blog title font size" content="26px" title="26px">
  54. <meta name="select:Blog title font size" content="28px" title="28px">
  55. <meta name="select:Blog title font size" content="30px" title="30px">
  56. <meta name="select:Blog title font size" content="32px" title="32px">
  57. <meta name="select:Blog title font size" content="34px" title="34px">
  58.  
  59. <meta name="font:Body font" content="Helvetica"/>
  60. <meta name="select:Body font size" content="11px" title="11px">
  61. <meta name="select:Body font size" content="12px" title="12px">
  62. <meta name="select:Body font size" content="13px" title="13px">
  63. <meta name="select:Body font size" content="14px" title="14px">
  64. <meta name="select:Body font size" content="15px" title="15px">
  65.  
  66. <meta name="if:Inverted Controls" content="0" />
  67. <meta name="if:Sidebar On The Right" content="0" />
  68. <meta name="if:Sidebar Background Transparent" content="0" />
  69. <meta name="if:Sidebar Background Stretch" content="0" />
  70. <meta name="if:Show Main Links" content="1" />
  71. <meta name="if:Show Search Box" content="1" />
  72. <meta name="if:Hover For Info" content="0" />
  73. <meta name="if:Show Captions" content="1" />
  74. <meta name="if:Show Tags" content="1" />
  75.  
  76. <meta name="if:Show Link One" content="1" />
  77. <meta name="if:Show Link Two" content="1" />
  78. <meta name="if:Show Link Three" content="1" />
  79. <meta name="if:Show Link Four" content="1" />
  80. <meta name="if:Show Link Five" content="1" />
  81.  
  82. <meta name="text:Link One Title" content="LINK" />
  83. <meta name="text:Link One Subtitle" content="subtitle" />
  84. <meta name="text:Link One Url" content="https://"/>
  85. <meta name="text:Link Two Title" content="LINK"/>
  86. <meta name="text:Link Two Subtitle" content="subtitle" />
  87. <meta name="text:Link Two Url" content="https://"/>
  88. <meta name="text:Link Three Title" content="LINK" />
  89. <meta name="text:Link Three Subtitle" content="subtitle" />
  90. <meta name="text:Link Three Url" content="https://" />
  91. <meta name="text:Link Four Title" content="LINK" />
  92. <meta name="text:Link Four Subtitle" content="subtitle" />
  93. <meta name="text:Link Four Url" content="https://" />
  94. <meta name="text:Link Five Title" content="LINK" />
  95. <meta name="text:Link Five Subtitle" content="subtitle" />
  96. <meta name="text:Link Five Url" content="https://" />
  97.  
  98. <!-- END DEFAULT VARIABLES -->
  99.  
  100. <head>
  101.  
  102. <style type="text/css">
  103.  
  104. /* CSS */
  105.  
  106. /*-- GENERAL --*/
  107.  
  108. body {
  109. margin:0;
  110. padding:0;
  111. width:100%;
  112. height:100%;
  113. word-wrap:break-word;
  114. color:{color:Text};
  115. font-family:{font:Body font};
  116. font-size:{select:Body font size};
  117. line-height: -moz-calc({select:Body font size} + 5px);
  118. line-height: -webkit-calc({select:Body font size} + 5px);
  119. line-height: -o-calc({select:Body font size} + 5px);
  120. line-height: calc({select:Body font size} + 5px);
  121. background-color: {color:Background};
  122. background-image:url({image:Background});
  123. background-attachment: fixed;
  124. background-repeat: repeat;
  125. }
  126.  
  127. /* Headings */
  128.  
  129. h1{
  130. margin:0;
  131. color:{color:Title};
  132. font-family:{select:Title font};
  133. font-size:200%;
  134. line-height:150%;
  135. border-bottom:1px solid {color:Borders};
  136. font-weight:500;
  137. }
  138.  
  139. h2 {
  140. font-family:{select:Title font};
  141. font-weight:400;
  142. font-size:150%;
  143. }
  144.  
  145. /* Links */
  146.  
  147. a {
  148. color:{color:Link};
  149. text-decoration:none;
  150. transition:all .3s linear;
  151. -webkit-transition:all .3s linear;
  152. -o-transition:all .3s linear;
  153. -moz-transition:all .3s linear;
  154. }
  155.  
  156. a:hover{
  157. text-decoration:none;
  158. color:{color:Hover};
  159. }
  160.  
  161. /* Bold and italic */
  162.  
  163. b, strong {color:{color:Bold};}
  164.  
  165. i, em {color:{color:Italic};}
  166.  
  167. /* Blockquote */
  168.  
  169. blockquote{
  170. padding:0px 0px 2px 5px;
  171. margin:0px 0px 2px 10px;
  172. border-left: 1px solid {color:Borders};
  173. }
  174.  
  175. /* Tumblr controls */
  176.  
  177. iframe.tmblr-iframe {
  178. top:0px!important;
  179. padding:0px!important;
  180. right:32px!important;
  181. opacity:0.8;
  182. transform:scale(0.6);
  183. transform-origin:100% 0;
  184. -webkit-transform:scale(0.8);
  185. -webkit-transform-origin:100% 0;
  186. -o-transform:scale(0.8);
  187. -o-transform-origin:100% 0;
  188. -moz-transform:scale(0.8);
  189. -moz-transform-origin:100% 0;
  190. -ms-transform:scale(0.8);
  191. -ms-transform-origin:100% 0;
  192. z-index:100000!important;
  193. {block:ifInvertedControls}
  194. filter:invert(100%) hue-rotate(180deg);
  195. -webkit-filter:invert(100%) hue-rotate(180deg);
  196. -moz-filter:invert(100%) hue-rotate(180deg);
  197. -o-filter:invert(100%) hue-rotate(180deg);
  198. -ms-filter:invert(100%) hue-rotate(180deg);
  199. {/block:ifInvertedControls}
  200. {block:IfSidebarOnTheRight}
  201. margin-right:auto!important;
  202. left:-40px!important;
  203. {/block:IfSidebarOnTheRight}
  204. }
  205.  
  206. iframe.tmblr-iframe:hover {
  207. opacity:1!important;}
  208.  
  209. /* Webkit scrollbar */
  210.  
  211. ::-webkit-scrollbar {
  212. width: 9px;
  213. height: 0px;
  214. }
  215.  
  216. ::-webkit-scrollbar-button:start:decrement,
  217. ::-webkit-scrollbar-button:end:increment {
  218. height: 0px;
  219. display: block;
  220. background-color: {color:Scrollbar background};
  221. }
  222.  
  223. ::-webkit-scrollbar-track-piece {
  224. background-color: {color:Scrollbar background};
  225. }
  226.  
  227. ::-webkit-scrollbar-thumb:vertical {
  228. height: 0px;
  229. background-color: {color:Scrollbar};
  230. border:4px solid {color:Scrollbar background};
  231. }
  232.  
  233. /* Tooltips */
  234.  
  235. #s-m-t-tooltip {
  236. max-width: 300px;
  237. margin-left: 10px;
  238. margin-top: 10px;
  239. padding: 2px 4px;
  240. font-size: 11px;
  241. line-height: 15px;
  242. color: {color:Main link};
  243. background: {color:Profile box background};
  244. border:1px solid {color:Borders};
  245. z-index: 10000;
  246. }
  247.  
  248. /* Fix */
  249.  
  250. iframe, img, embed, object, video {
  251. max-width: 100%;
  252. border: none;
  253. }
  254.  
  255. input, textarea, select, a { outline: none; }
  256.  
  257. /*------ SIDEBAR -----*/
  258.  
  259. #sidebar {
  260. position:fixed;
  261. top:0;
  262. left:0;
  263. width:45vw;
  264. min-width:350px;
  265. height:100vh;
  266. background-color:{color:Sidebar background};
  267. background-image:url({image:Sidebar background});
  268. background-repeat:repeat;
  269. {block:IfSidebarBackgroundStretch}
  270. background-size:cover;
  271. {/block:IfSidebarBackgroundStretch}
  272. {block:IfSidebarBackgroundTransparent}
  273. background:transparent;
  274. {/block:IfSidebarBackgroundTransparent}
  275. {block:IfSidebarOnTheRight}
  276. margin-left:auto;
  277. right:0;
  278. {/block:IfSidebarOnTheRight}
  279. overflow:hidden;
  280. z-index:10;
  281. }
  282.  
  283. /*-- Profile box --*/
  284.  
  285. #profile_box {
  286. position:absolute;
  287. top:50%;
  288. left:20px;
  289. width:calc(100% - 40px);
  290. height:auto;
  291. max-height:calc(100% - 40px);
  292. z-index:10;
  293. -webkit-transform:translateY(-50%);
  294. -moz-transform:translateY(-50%);
  295. -ms-transform:translateY(-50%);
  296. transform:translateY(-50%);
  297. }
  298.  
  299. /* Avatar */
  300.  
  301. #avatar {
  302. float:left;
  303. margin:0 auto;
  304. margin-right:20px;
  305. width:40%;
  306. height:300px;
  307. }
  308.  
  309. #avatar img {
  310. margin:30px;
  311. width:100%;
  312. height:100%;
  313. border:1px solid {color:Borders};
  314. z-index:1;
  315. }
  316.  
  317. #avatar_border {
  318. position:absolute;
  319. margin:0;
  320. width:35%;
  321. height:300px;
  322. border:5px solid {color:Accent};
  323. z-index:10;
  324. }
  325.  
  326. #avatar:hover #avatar_border {
  327. border:5px solid {color:Hover};
  328. transition:all .3s linear;
  329. -webkit-transition:all .3s linear;
  330. -o-transition:all .3s linear;
  331. -moz-transition:all .3s linear;
  332. }
  333.  
  334. #avatar:hover img {
  335. -webkit-transition: opacity 0.3s linear;
  336. -moz-transition: opacity 0.3s linear;
  337. -o-transition: opacity 0.3s linear;
  338. -ms-transition: opacity 0.3s linear;
  339. opacity: 0.8;
  340. }
  341.  
  342. /* -- NAVI --*/
  343.  
  344. #navi {
  345. margin:0;
  346. margin-left:50%;
  347. width:50%;
  348. height:320px;
  349. z-index:100;
  350. }
  351.  
  352. /* Main links */
  353.  
  354. #mainlinks {
  355. margin:0px;
  356. height:auto;
  357. }
  358.  
  359. #mainlinks a {
  360. margin-right:10px;
  361. color:{color:Main link};
  362. min-height:20px;
  363. line-height:25px;
  364. font-size:12px;
  365. letter-spacing:1px;
  366. box-shadow: inset 0px -7px {color:Accent};
  367. font-weight:400;
  368. -webkit-transition: all .7s ease;
  369. -moz-transition: all .7s ease;
  370. -o-transition: all .7s ease;
  371. transition: all .7s ease;
  372. }
  373.  
  374. #mainlinks a:hover {
  375. color:{color:Main link};
  376. box-shadow: inset 0px -14px {color:Hover};
  377. }
  378.  
  379. /* Search box */
  380.  
  381. #search {
  382. margin:10px 0;
  383. width:calc(100% - 2px);
  384. height:30px;
  385. border-bottom:1px solid {color:Borders};
  386. color:{color:Search};
  387. }
  388.  
  389. #search span {
  390. position:absolute;
  391. margin-left:0px;
  392. margin-top:10px;
  393. font-size:12px;
  394. color:{color:Search};
  395. }
  396.  
  397. /* Links */
  398.  
  399. #links {
  400. margin:10px 0;
  401. width:100%;
  402. overflow:hidden;
  403. z-index:1000;
  404. }
  405.  
  406. #links a {
  407. display:block;
  408. margin-top:0;
  409. padding:5px 0;
  410. width:calc(100% - 16px);
  411. font-size:15px;
  412. line-height:20px;
  413. letter-spacing:1px;
  414. color:{color:Navigation link};
  415. font-family:{select:Title font};
  416. font-weight:600;
  417. -webkit-transition: all .7s ease;
  418. -moz-transition: all .7s ease;
  419. -o-transition: all .7s ease;
  420. transition: all .7s ease;
  421. overflow:hidden;
  422. }
  423.  
  424. #links a big {
  425. margin-right:2px;
  426. padding-left:1px;
  427. font-size:15px;
  428. color:{color:Navigation link};
  429. }
  430.  
  431. #links a:hover, #links a:hover big {
  432. color:{color:Hover};
  433. }
  434.  
  435. .subt {
  436. display:block;
  437. font-size:12px;
  438. color:{color:Text};
  439. font-family:{font:Body font};
  440. font-weight:400;
  441. }
  442.  
  443. .subt::before {
  444. display: inline-block;
  445. content: "";
  446. margin-top:4px;
  447. margin-right:7px;
  448. width:20px;
  449. height:6px;
  450. background:{color:Accent};
  451. -webkit-transition: all .7s ease;
  452. -moz-transition: all .7s ease;
  453. -o-transition: all .7s ease;
  454. transition: all .7s ease;
  455. }
  456.  
  457. #links a:hover .subt::before {
  458. width:80px;
  459. }
  460.  
  461. /* Blog title */
  462.  
  463. #blogtitle {
  464. display:inline-block;
  465. margin-top:35px;
  466. margin-bottom:5px;
  467. line-height:35px;
  468. font-family:{select:Title font};
  469. font-size:{select:Blog title font size};
  470. color:{color:Blog Title};
  471. letter-spacing:1px;
  472. text-align:left;
  473. box-shadow: inset 0px -10px {color:Accent};
  474. }
  475.  
  476. /* Description */
  477.  
  478. #description{
  479. margin:15px 0;
  480. height:auto;
  481. max-height:115px;
  482. padding-right:10px;
  483. color:{color:Description};
  484. overflow-y:auto;
  485. font-size:14px;
  486. line-height:22px;
  487. z-index:1;
  488. }
  489.  
  490. .divider {
  491. margin:15px auto;
  492. width:25%;
  493. height:1px;
  494. background:{color:Borders};
  495. }
  496.  
  497. /*----- MAIN CONTAINER -----*/
  498.  
  499. #container {
  500. position:absolute;
  501. top:0;
  502. right:0;
  503. width:55vw;
  504. z-index:10;
  505. {block:IfSidebarOnTheRight}
  506. margin-right:auto;
  507. left:0;
  508. {/block:IfSidebarOnTheRight}
  509. }
  510.  
  511. /* --------- POSTS --------- */
  512.  
  513. #posts {
  514. display:block;
  515. position:relative;
  516. margin:20px auto;
  517. padding-top:10px;
  518. min-height:500px;
  519. width:540px;
  520. overflow:hidden;
  521. z-index:10;
  522. }
  523.  
  524. .entry {
  525. float:left;
  526. display: block;
  527. margin:20px;
  528. width:500px;
  529. {block:ifHoverForInfo}
  530. padding-bottom:8px;
  531. {/block:ifHoverForInfo}
  532. z-index:100;
  533. }
  534.  
  535. .entry img { max-width: 100%; }
  536.  
  537. /* -------- RESPONSIVE DESIGN VALUES, editing is not recommended -------- */
  538.  
  539. @media only screen and (max-width: 800px) {
  540.  
  541. #sidebar {
  542. position:absolute!important;
  543. width:100vw!important;
  544. }
  545.  
  546. #container {
  547. position:absolute;
  548. top:100vh!important;
  549. right:0;
  550. width:100vw;
  551. }
  552.  
  553. #side_pager {
  554. display:none!important;
  555. }
  556.  
  557. #pager {
  558. display:block!important;
  559. }
  560.  
  561. }
  562.  
  563. @media only screen and (max-width: 600px) {
  564.  
  565. .entry {
  566. width:400px!important;
  567. }
  568.  
  569. }
  570.  
  571. @media only screen and (max-width: 400px) {
  572.  
  573. .entry {
  574. width:100vw!important;
  575. }
  576.  
  577. }
  578.  
  579.  
  580. /* -- POST STYLES -- */
  581.  
  582. /* Quote posts */
  583.  
  584. .quote {
  585. margin:5px;
  586. padding:10px;
  587. font-family:{select:Title font};
  588. font-size:200%;
  589. line-height:150%;
  590. color:{color:Italic};
  591. height:auto;
  592. text-align:center;
  593. letter-spacing:1px;
  594. }
  595.  
  596. .source {
  597. margin-top:5px;
  598. margin-bottom:10px;
  599. font-family:{font:Body font};
  600. font-size:15px;
  601. height:25px;
  602. line-height:25px;
  603. text-align:left;
  604. overflow:hidden;
  605. }
  606.  
  607. .source i{
  608. float:left;
  609. margin-right:10px;
  610. color:{color:Link};
  611. padding:5px;
  612. padding-right:10px;
  613. font-size:15px;
  614. border-right:1px solid {color:Borders};
  615. }
  616.  
  617. /* Link posts */
  618.  
  619. #linktitle {
  620. color:{color:Title};
  621. font-family:{select:Title font};
  622. font-size:200%;
  623. line-height:150%;
  624. background:{color:Borders};
  625. padding:5px;
  626. width:490px;
  627. }
  628.  
  629. #linktitle a{
  630. color:{color:Link};
  631. }
  632.  
  633. #linktitle i{
  634. color:{color:Icon};
  635. }
  636.  
  637. #linktitle:hover{
  638. color:{color:Hover};
  639. }
  640.  
  641. /* Audio posts */
  642.  
  643. .album img{
  644. float:left;
  645. margin-top:0px;
  646. width:70px;
  647. height:70px;
  648. margin-left:5px;
  649. margin-right:10px;
  650. float:left;
  651. z-index:10;
  652. border: 1px solid {color:Borders};
  653. }
  654.  
  655. .play{
  656. position:absolute;
  657. margin:25px;
  658. margin-right:5px;
  659. width:30px;
  660. height:30px;
  661. line-height:30px;
  662. overflow:hidden;
  663. background:#fff;
  664. }
  665.  
  666. .audio{
  667. width:160px;
  668. min-height:80px;
  669. margin-top:10px;
  670. z-index:10;
  671. font-size:12px;
  672. line-height:25px;
  673. overflow:hidden;
  674. }
  675.  
  676. .audio h1{
  677. font-size:20px;
  678. border-bottom:1px solid transparent;
  679. }
  680.  
  681. /* Ask posts */
  682.  
  683. .question {
  684. width:100%;
  685. height:auto;
  686. line-height:20px;
  687. color:{color:Answer};
  688. }
  689.  
  690. .questionin {
  691. margin-left:45px;
  692. width:435px;
  693. min-height:24px;
  694. line-height:24px;
  695. padding:5px;
  696. padding-left:10px;
  697. padding-right:10px;
  698. border:1px solid {color:Borders};
  699. }
  700.  
  701. .question img {
  702. width:28px;
  703. padding:3px;
  704. border:1px solid {color:Borders};
  705. margin-right:4px;
  706. }
  707.  
  708. .answe r{
  709. margin-top:5px;
  710. width:490px;
  711. padding:5px;
  712. }
  713.  
  714. /* Chat posts */
  715.  
  716. .chat ul {
  717. display:block;
  718. list-style:none;
  719. margin-left:-40px;
  720. }
  721.  
  722. /* Chat lines style */
  723. .chat li {
  724. padding:3px;
  725. display:block;
  726. }
  727.  
  728. /* Odd lines style */
  729. .chat .odd {
  730. color:{color:Chat 1};
  731. }
  732.  
  733. /* Even lines style */
  734. .chat .even {
  735. color:{color:Chat 2};
  736. }
  737.  
  738. /* -- POST INFO -- */
  739.  
  740. .info {
  741. height:auto;
  742. float:center;
  743. margin-top:10px;
  744. width:500px;
  745. padding:5px 0;
  746. height:auto;
  747. line-height:20px;
  748. font-size:12px;
  749. text-transform:uppercase;
  750. color:{color:Link};
  751. border-top:1px solid {color:Borders};
  752. {block:ifShowTags}
  753. height:auto;
  754. {/block:ifShowTags}
  755. {block:IndexPage}
  756. {block:ifHoverForInfo}
  757. opacity:0;
  758. position:absolute;
  759. bottom:0;
  760. {/block:ifHoverForInfo}
  761. {/block:IndexPage}
  762. }
  763.  
  764. .entry:hover .info {
  765. {block:ifHoverForInfo}
  766. opacity:1;
  767. {/block:ifHoverForInfo}
  768. }
  769.  
  770. .info a {
  771. font-size:12px;
  772. }
  773.  
  774. .info a:hover{
  775. color:{color:Hover};
  776. }
  777.  
  778. .date a {
  779. display:inline-block;
  780. margin:10px 0;
  781. text-transform:uppercase;
  782. color:{color:Bold};
  783. font-size:16px;
  784. line-height:20px;
  785. letter-spacing:1px;
  786. font-weight:600;
  787. font-family:{select:Title font};
  788. box-shadow: inset 0px -7px {color:Accent};
  789. }
  790.  
  791. .date a:hover {
  792. color:{color:Main link};
  793. box-shadow: inset 0px -18px {color:Hover};
  794. }
  795.  
  796. /* Tags */
  797.  
  798. .tags {
  799. margin-top:4px;
  800. padding-top:4px;
  801. border-top:1px solid {color:Borders};
  802. text-transform:lowercase;
  803. }
  804.  
  805. .tags a {
  806. margin-right:3px;
  807. padding:3px 5px;
  808. }
  809.  
  810. /*-- PERMALINK, LIKE AND REBLOG BUTTONS --*/
  811.  
  812. .post_buttons {
  813. float:right;
  814. margin-top:0px;
  815. width:68px;
  816. padding-right:2px;
  817. height:19px;
  818. z-index:100;
  819. list-style:none;
  820. {block:PermalinkPage}
  821. width:52px;
  822. {/block:PermalinkPage}
  823. text-align:right;
  824. }
  825.  
  826. .post_buttons li {
  827. display:inline-block!important;
  828. margin:0;
  829. width:18px;
  830. height:19px;
  831. padding:0px;
  832. text-align:center;
  833. }
  834.  
  835. .perma span {
  836. font-size:12px;
  837. color:{color:Post buttons};
  838. }
  839.  
  840. .rblg span {
  841. font-size:12px;
  842. color:{color:Post buttons};
  843. }
  844.  
  845. .like .like_button {
  846. position:absolute;
  847. width:14px;
  848. height:14px;
  849. }
  850.  
  851. .like .like_button iframe {
  852. position:absolute;
  853. top:0;
  854. bottom:0;
  855. left:0;
  856. right:0;
  857. width:100%;
  858. height:100%;
  859. z-index:10;
  860. opacity:0.0000001;
  861. }
  862.  
  863. .like span {
  864. font-size:14px;
  865. color:{color:Post buttons};
  866. }
  867.  
  868. .like .liked + span {
  869. font-size:14px;
  870. color:#D95E40;
  871. }
  872.  
  873. /*-- PERMALINK PAGE --*/
  874.  
  875. .postnotes h2 {
  876. display:inline-block;
  877. font-weight:600;
  878. box-shadow: inset 0px -7px {color:Accent};
  879. text-transform:uppercase;
  880. letter-spacing:1px;
  881. }
  882.  
  883. ol.notes {
  884. padding: 0px;
  885. margin: 5px 0px;
  886. list-style-type: none;
  887. }
  888.  
  889. ol.notes li.note {
  890. padding:5px 0;
  891. }
  892.  
  893. ol.notes li.note img.avatar {
  894. vertical-align: -5px;
  895. margin-right: 10px;
  896. width: 15px;
  897. height: 15px;
  898. }
  899.  
  900. /*-- PAGINATION --*/
  901.  
  902. #side_pager {
  903. display:block;
  904. margin:0;
  905. width:100%;
  906. height:20px;
  907. }
  908.  
  909. #pager {
  910. margin:20px 0;
  911. width:100%;
  912. height:20px;
  913. display:none;
  914. }
  915.  
  916. #pagination{
  917. margin:0 auto;
  918. margin-top:15px;
  919. width:100%;
  920. height:20px;
  921. text-align:center;
  922. }
  923.  
  924. .pagicon, .next {
  925. display:inline;
  926. }
  927.  
  928. .pagicon a, .next {
  929. margin:0 5px;
  930. color:{color:Main link};
  931. min-height:20px;
  932. line-height:25px;
  933. font-size:12px;
  934. letter-spacing:1px;
  935. box-shadow: inset 0px -7px {color:Accent};
  936. font-weight:400;
  937. -webkit-transition: all .7s ease;
  938. -moz-transition: all .7s ease;
  939. -o-transition: all .7s ease;
  940. transition: all .7s ease;
  941. }
  942.  
  943. .pagicon a:hover, .next:hover {
  944. color:{color:Main link};
  945. box-shadow: inset 0px -16px {color:Hover};
  946. }
  947.  
  948. .pagicon span, .next span {
  949. color:{color:Pagination};
  950. font-size:11px;
  951. margin:5px;
  952. text-decoration:none;
  953. }
  954.  
  955. .pagicon:hover span, .next:hover span {
  956. color:{color:Main link};
  957. }
  958.  
  959. /*-- THEME CREDIT --*/
  960.  
  961. #credit{
  962. position:fixed;
  963. right:5px;
  964. top:7px;
  965. width:30px;
  966. z-index:10000;
  967. {block:IfSidebarOnTheRight}
  968. margin-right:auto;
  969. left:5px;
  970. {/block:IfSidebarOnTheRight}
  971. }
  972.  
  973. /* END CSS */
  974.  
  975. {CustomCSS}
  976.  
  977. </style>
  978.  
  979. </head>
  980.  
  981. <!-- Saturn icons font -->
  982.  
  983. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  984.  
  985. <!--Jquery-->
  986.  
  987. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  988.  
  989. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  990.  
  991. <title>{Title}
  992. {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}
  993. {block:TagPage} - {Tag} {/block:TagPage}
  994. {block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  995. {block:Description}<meta name="description" content="{MetaDescription}" />
  996. {/block:Description}
  997.  
  998. <!-- HTML -->
  999.  
  1000. <body>
  1001.  
  1002. <div id="sidebar">
  1003.  
  1004. <div id="profile_box">
  1005.  
  1006. <div id="avatar">
  1007. <div id="avatar_border"></div>
  1008. <img src="{image:Avatar}">
  1009. </div>
  1010. <!-- End avatar -->
  1011.  
  1012. <div id="navi">
  1013.  
  1014. {block:IfShowMainLinks}
  1015. <div id="mainlinks">
  1016. <a href="/"> INDEX</a>
  1017. <a href="/ask"> ASK</a>
  1018. <a href="/submit"> SUBMIT</a>
  1019. <a href="/archive"> ARCHIVE</a>
  1020. </div>
  1021. {/block:IfShowMainLinks}
  1022.  
  1023. {block:IfShowSearchBox}
  1024. <div id="search">
  1025. <form action="/search" method="get">
  1026. <input type="text" name="q" value="SEARCH" style="float:left; margin-top:0px; margin-left:0; width:calc(100% - 16px); height:30px; border:1px solid transparent; background:transparent; color:{color:Search}; font-size: 12px;"/>
  1027. </form>
  1028. <span class="sf sf-search-o fa"></span>
  1029. </div>
  1030. {/block:IfShowSearchBox}
  1031. <!-- End search -->
  1032.  
  1033. <div id="links">
  1034. {block:IfShowLinkOne}
  1035. <a href="{text:Link One Url}"><big>01</big> {text:Link One Title} <span class="subt">{text:Link One Subtitle}</span></a>
  1036. {/block:IfShowLinkOne}
  1037. {block:IfShowLinkTwo}
  1038. <a href="{text:Link Two Url}"><big>02</big> {text:Link Two Title} <span class="subt">{text:Link Two Subtitle}</span></a>
  1039. {/block:IfShowLinkTwo}
  1040. {block:IfShowLinkThree}
  1041. <a href="{text:Link Three Url}"><big>03</big> {text:Link Three Title} <span class="subt">{text:Link Three Subtitle}</span></a>
  1042. {/block:IfShowLinkThree}
  1043. {block:IfShowLinkFour}
  1044. <a href="{text:Link Four Url}"><big>04</big> {text:Link Four Title} <span class="subt">{text:Link Four Subtitle}</span></a>
  1045. {/block:IfShowLinkFour}
  1046. {block:IfShowLinkFive}
  1047. <a href="{text:Link Five Url}"><big>05</big> {text:Link Five Title} <span class="subt">{text:Link Five Subtitle}</span></a>
  1048. {/block:IfShowLinkFive}
  1049. </div>
  1050. <!--End links-->
  1051.  
  1052. </div>
  1053. <!--End navi-->
  1054.  
  1055. <div id="blogtitle">{Title}</div>
  1056.  
  1057. <div id="description">
  1058. {Description}
  1059. </div>
  1060. <!-- End description -->
  1061.  
  1062. <div class="divider"></div>
  1063.  
  1064. {block:Pagination}
  1065. <div id="side_pager">
  1066.  
  1067. <div id="pagination">
  1068. {block:PreviousPage}
  1069. <span class="pagicon">
  1070. <a href="{PreviousPage}"><span class="sf sf-arrow-left" aria-hidden="true"></span> NEWER </a>
  1071. </span>
  1072. {/block:PreviousPage}
  1073.  
  1074. {block:NextPage}
  1075. <a class="next" href="{NextPage}"> OLDER <span class="sf sf-arrow-right" aria-hidden="true"></span></a>
  1076. </span>
  1077. {/block:NextPage}
  1078. </div>
  1079. <!--End pagination-->
  1080.  
  1081. </div>
  1082. <!--End side_pager-->
  1083. {/block:Pagination}
  1084.  
  1085. </div>
  1086. <!--End profile_box-->
  1087.  
  1088. </div>
  1089. <!--End sidebar-->
  1090.  
  1091.  
  1092. <div id="container">
  1093.  
  1094. <!-- POSTS -->
  1095.  
  1096. <div id="posts">
  1097.  
  1098. {block:Posts}
  1099.  
  1100. <div class="entry">
  1101.  
  1102. <!-- Date -->
  1103. {block:Date}
  1104.  
  1105. <div class="date">
  1106. <a href="{Permalink}">
  1107. {shortmonth} {dayofmonth}</a>
  1108. </div>
  1109. <!--End date-->
  1110.  
  1111. {/block:Date}
  1112.  
  1113. <div class="content">
  1114.  
  1115. <!-- Text -->
  1116. {block:Text}
  1117. {block:Title}
  1118. <a href="{Permalink}">
  1119. <h1>{Title}</h1></a>
  1120. {/block:Title}
  1121. {Body}
  1122. {/block:Text}
  1123.  
  1124. <!-- Photo -->
  1125. {block:Photo}
  1126. {LinkOpenTag}
  1127. <img src="{PhotoURL-500}" width="500" alt="{PhotoAlt}">
  1128. {LinkCloseTag}
  1129. {/block:Photo}
  1130.  
  1131. <!-- Photoset -->
  1132. {block:Photoset}
  1133. {Photoset-500}
  1134. {/block:Photoset}
  1135.  
  1136. <!-- Quote -->
  1137. {block:Quote}
  1138. <div class="source">
  1139. <span class="sf sf-quotation-mark"></span>
  1140. {block:Source}
  1141. {Source}
  1142. {/block:Source}
  1143. </div>
  1144. <!--End source-->
  1145. <div class="quote">
  1146. {Quote}
  1147. </div>
  1148. <!--End quote-->
  1149. {/block:Quote}
  1150.  
  1151. <!-- Link -->
  1152. {block:Link}
  1153. <div id="linktitle">
  1154. <a href="{URL}"
  1155. class="linkpost"
  1156. target="_blank">
  1157. {Name} &raquo; </a>
  1158. </div>
  1159. {block:Description}
  1160. {Description}
  1161. {/block:Description}
  1162. {/block:Link}
  1163.  
  1164. <!-- Chat -->
  1165. {block:Chat}
  1166. <div class="chat">
  1167. <ul>
  1168. {block:Lines}
  1169. <li class="{Alt}">
  1170. {block:Label}<b>{Label}</b>{/block:Label}
  1171. {Line}
  1172. </li>
  1173. {/block:Lines}
  1174. </ul>
  1175. </div>
  1176. {/block:Chat}
  1177.  
  1178. <!-- Audio -->
  1179. {block:Audio}
  1180. <div class="album">
  1181. {block:AlbumArt}
  1182. <img src="{AlbumArtURL}"></a>
  1183. {block:AlbumArt}
  1184. </div>
  1185. <!--End album-->
  1186. <div class="play">
  1187. {block:AudioPlayer}
  1188. {AudioPlayer}
  1189. {/block:AudioPlayer}
  1190. </div>
  1191. <div class="audio">
  1192. {block:TrackName}<h1>{TrackName}</h1>{/block:TrackName}
  1193. {block:Artist}{Artist}{/block:Artist}<br>
  1194. <!--End play-->
  1195. {block:PlayCount}
  1196. {FormattedPlayCount}
  1197. {/block:PlayCount}
  1198. </div>
  1199. <!--End audio-->
  1200. {/block:Audio}
  1201.  
  1202. <!-- Video -->
  1203. {block:Video}
  1204. {Video-500}
  1205. {/block:Video}
  1206.  
  1207. <!-- Ask -->
  1208. {block:Answer}
  1209. <div class="question">
  1210. <img src="{AskerPortraitURL-48}"
  1211. align="left"></div>
  1212. <div class="questionin">
  1213. {Asker}: {Question}</div>
  1214. <div class="answer">
  1215. {Answer}</div>
  1216. {/block:Answer}
  1217.  
  1218. <!-- Caption -->
  1219. {block:IndexPage}
  1220. {block:IfShowCaptions}
  1221. {block:Caption}
  1222. {Caption}
  1223. {/block:Caption}
  1224. {/block:IfShowCaptions}
  1225. {/block:IndexPage}
  1226. {block:PermalinkPage}
  1227. {block:Caption}
  1228. {Caption}
  1229. {/block:Caption}
  1230. {/block:PermalinkPage}
  1231.  
  1232. </div>
  1233. <!--End content-->
  1234.  
  1235. <!-- Date -->
  1236. {block:Date}
  1237.  
  1238. <div class="info">
  1239.  
  1240. {block:NoteCount}
  1241. <b><a href="{Permalink}">
  1242. {NoteCountWithLabel}</a></b>
  1243. {/block:NoteCount}
  1244.  
  1245. <!-- Reblogged from -->
  1246. {block:RebloggedFrom}
  1247. - <a href="{ReblogParentURL}">
  1248. via</a> {/block:RebloggedFrom}
  1249.  
  1250. {block:ContentSource}
  1251. - <a href="{SourceURL}"
  1252. target=blank> source</a>
  1253. {/block:ContentSource}
  1254.  
  1255. <ul class="post_buttons">
  1256.  
  1257. {block:IndexPage}
  1258. <li class="perma"><a href="{Permalink}"><span class="sf sf-bookmark-o"></span></a></li>
  1259. {/block:IndexPage}
  1260.  
  1261. <li class="rblg"><a href="{ReblogUrl}"><span class="sf sf-refresh"></span></a></li>
  1262.  
  1263. <li class="like">{LikeButton}
  1264. <span class="sf sf-heart-2-o"></span></a>
  1265. </li>
  1266.  
  1267. </ul>
  1268. <!-- End post_buttons -->
  1269.  
  1270. <!-- Tags -->
  1271. {block:IndexPage}
  1272. {block:IfShowTags}
  1273. <div class="tags">
  1274. {block:HasTags}
  1275. {block:Tags}
  1276. <a href="{TagURL}">#{Tag}</a>
  1277. {/block:Tags}
  1278. {/block:HasTags}
  1279. </div>
  1280. {/block:IfShowTags}
  1281. {/block:IndexPage}
  1282. {block:PermalinkPage}
  1283. <div class="tags">
  1284. {block:HasTags}
  1285. {block:Tags}
  1286. <a href="{TagURL}">#{Tag}</a>
  1287. {/block:Tags}
  1288. {/block:HasTags}
  1289. </div>
  1290. {/block:PermalinkPage}
  1291.  
  1292. </div>
  1293. <!--End info-->
  1294. {/block:Date}
  1295.  
  1296. <!-- Permalink page -->
  1297. {block:PermalinkPage}
  1298. <!-- Post notes-->
  1299. {block:PostNotes}
  1300. <div class="postnotes">
  1301. <h2>Post notes:</h2>
  1302. {PostNotes}
  1303. </div>
  1304. {/block:PostNotes}
  1305. {/block:PermalinkPage}
  1306.  
  1307. <!-- Other -->
  1308. {block:ContentSource}
  1309. <!-- {SourceURL}
  1310. {block:SourceLogo}
  1311. <img src="{BlackLogoURL}"
  1312. width="{LogoWidth}"
  1313. height="{LogoHeight}"
  1314. alt="{SourceTitle}" />
  1315. {/block:SourceLogo}
  1316. {block:NoSourceLogo}
  1317. {SourceLink}
  1318. {/block:NoSourceLogo} -->
  1319. {/block:ContentSource}
  1320.  
  1321. </div>
  1322. <!--End entry-->
  1323.  
  1324. {/block:Posts}
  1325.  
  1326. </div>
  1327. <!-- End posts -->
  1328.  
  1329. {block:Pagination}
  1330. <div id="pager">
  1331.  
  1332. <div id="pagination">
  1333. {block:PreviousPage}
  1334. <span class="pagicon">
  1335. <a href="{PreviousPage}"><span class="sf sf-arrow-left" aria-hidden="true"></span> NEWER </a>
  1336. </span>
  1337. {/block:PreviousPage}
  1338.  
  1339. {block:NextPage}
  1340. <a class="next" href="{NextPage}"> OLDER <span class="sf sf-arrow-right" aria-hidden="true"></span></a>
  1341. </span>
  1342. {/block:NextPage}
  1343. </div>
  1344. <!--End pagination-->
  1345.  
  1346. </div>
  1347. <!--End pager-->
  1348. {/block:Pagination}
  1349.  
  1350. </div>
  1351. <!--End container-->
  1352.  
  1353. <!-- CREDIT (DO NOT REMOVE) -->
  1354. <div id="credit"><a href="https://www.hunterthemes.tumblr.com">
  1355. <img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="theme by hunter themes"></a></div>
  1356.  
  1357.  
  1358. </body>
  1359. </html>
  1360.  
  1361. <!-- END 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!