API tools faq
paste
navys

coast

navys
Jul 12th, 2017
2,677
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.48 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. coast
  4. 04
  5. by @02px
  6.  
  7. please do not remove credit
  8. enjoy (─ ‿‿ ─) <3
  9.  
  10. ------
  11.  
  12. if you would like to change the icons of the links:
  13. 1. go to fontawesome.io
  14. 2. find an icon you like
  15. 3. scroll down to line 524 in this code
  16. 4. paste the embed code you found on fontawesome and paste it in place of the embed code in the links on line 524
  17.  
  18. for example: replace
  19. <i class="fa fa-home" aria-hidden="true"></i>
  20. with
  21. <i class="fa fa-heart" aria-hidden="true"></i>
  22. -->
  23.  
  24. <html>
  25. <head>
  26. <title>{Title}</title>
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. {block:Description}
  30. <meta name="description" content="{MetaDescription}" />
  31. {/block:Description}
  32.  
  33. <meta name="image:icon" content="" />
  34. <meta name="image:header" content="" />
  35. <meta name="image:background" content="" />
  36. <meta name="color:background" content="#f8f8f8" />
  37. <meta name="color:content background" content="#f8f8f8" />
  38. <meta name="color:title" content=“#131313” />
  39. <meta name="color:text" content=“#131313” />
  40. <meta name="color:links" content="#00000" />
  41. <meta name="color:links hover" content="#00000" />
  42. <meta name="color:header" content="#ffd189" />
  43. <meta name="color:scrollbar" content="#ffd189" />
  44. <meta name="select:font size" content="10" title="10px" />
  45. <meta name="select:font size" content="11" title="11px" />
  46. <meta name="select:font size" content="12" title="12px" />
  47. <meta name="select:font size" content="13" title="13px" />
  48. <meta name="if:image header" content="" />
  49. <meta name="if:color header" content="" />
  50. <meta name="if:icon" content="" />
  51. <meta name="if:text links" content="" />
  52. <meta name="if:icon links" content="" />
  53. <meta name="if:link 2" content="" />
  54. <meta name="if:link 3" content="" />
  55. <meta name="text:link 1 url" content="" />
  56. <meta name="text:link 1" content="" />
  57. <meta name="text:link 2 url" content="" />
  58. <meta name="text:link 2" content="" />
  59. <meta name="text:link 3 url" content="" />
  60. <meta name="text:link 3" content="" />
  61. </head>
  62.  
  63. <script src="https://use.fontawesome.com/6ac3a8bdbf.js"></script>
  64.  
  65. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700" rel="stylesheet">
  66.  
  67. <link href='http://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72. /* -------GENERAL------- */
  73.  
  74. ::-webkit-scrollbar{
  75. width:7px;
  76. height:7px;
  77. }
  78.  
  79. ::-webkit-scrollbar{
  80. background-color:{color:Background};
  81. border-radius:10px;
  82. }
  83.  
  84. ::-webkit-scrollbar-track{
  85. border:2px solid {color:Background};
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb{
  89. border:2px solid {color:Background};
  90. background-color:{color:scrollbar};
  91. }
  92.  
  93. ::-webkit-scrollbar:horizontal{
  94. display:none;
  95. }
  96.  
  97. ::-moz-selection{
  98. background:{color:links};
  99. }
  100.  
  101. ::selection{
  102. background:{color:links};
  103. }
  104.  
  105. .controls {
  106. font-size:10px;color:{color:links};position:fixed;top:20px;right:15px;cursor:pointer;background:white;padding:1px 6px;border-radius:3px;}
  107. #tumblr_controls,.tmblr-iframe{
  108. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0;
  109. top:10px!important;right:0!important;z-index:999999; padding:10px 40px 0px 10px;-moz-transition:.2s ease;-webkit-transition:.2s ease;transition:.2s ease;
  110. }
  111. #tumblr_controls:hover,.tmblr-iframe:hover{opacity:0.5;}
  112.  
  113.  
  114. body {
  115. background-color:{color:background};
  116. background-image:url('{image:background}');
  117. background-repeat:repeat;
  118. background-attachment: fixed;
  119. font-size:{select:font size}px;
  120. color:{color:text};
  121. font-family:'Muli', sans-serif;
  122. line-height:20px;
  123. letter-spacing:.5px;
  124. }
  125.  
  126. a {
  127. text-decoration:none;
  128. color:{color:links};
  129. transition:.4s ease;
  130. }
  131.  
  132. a:hover {
  133. text-decoration:none;
  134. color:{color:links hover};
  135. }
  136.  
  137. .tool, .toolone, .tooltwo, .toolthree, .toolfour {
  138. visibility:hidden;
  139. font-size:10px;
  140. background-color: white;
  141. color: #131313;
  142. text-align: center;
  143. padding: 4px 10px 4px 12px;
  144. border:1px solid #eee;
  145. text-transform:uppercase;
  146. position: absolute;
  147. margin-left:30px;
  148. margin-top:-40px;
  149. transition-delay:.3s;
  150. letter-spacing:1px;
  151. }
  152.  
  153. .toolone {
  154. margin-left:70px;
  155. margin-top:-60px;
  156. }
  157.  
  158. .tooltwo {
  159. margin-left:90px;
  160. margin-top:-60px;
  161. }
  162.  
  163. .toolthree {
  164. margin-left:110px;
  165. margin-top:-60px;
  166. }
  167.  
  168. .toolfour {
  169. margin-left:130px;
  170. margin-top:-60px;
  171. }
  172.  
  173. a.f:hover > .tool, a.f:hover > .toolone, a.f:hover > .tooltwo, a.f:hover > .toolthree, a.f:hover > .toolfour {
  174. visibility:visible;
  175. }
  176.  
  177.  
  178. /*------POST SETTINGS------*/
  179.  
  180. img {
  181. max-width:100%;
  182. }
  183.  
  184. blockquote {
  185. margin-left:0px;
  186. padding:0px;
  187. border-left:1px solid transparent;
  188. }
  189.  
  190. ol.notes {
  191. padding: 0px;
  192. margin: 25px 0px;
  193. list-style-type: none;
  194. }
  195.  
  196. ol.notes li.note {
  197. padding: 10px;
  198. }
  199.  
  200. ol.notes li.note img.avatar {
  201. vertical-align: -4px;
  202. margin-right: 10px;
  203. width: 0px;
  204. height: 0px;
  205. }
  206.  
  207. ol.notes li.note span.action {
  208. font-weight: normal;
  209. }
  210.  
  211. ol.notes li.note .answer_content {
  212. font-weight: normal;
  213. }
  214.  
  215. ol.notes li.note blockquote {
  216. padding: 4px 10px;
  217. margin: 10px 0px 0px 25px;
  218. }
  219.  
  220. ol.notes li.note blockquote a {
  221. text-decoration: none;
  222. }
  223.  
  224. /*-------SIDEBAR--------*/
  225.  
  226. .sidebar {
  227. background:{color:content background};
  228. display:inline-block;
  229. max-width:270px;
  230. width:27%;
  231. min-width:200px;
  232. height:400px;
  233. vertical-align: middle;
  234. margin-top:auto;
  235. margin-bottom:auto;
  236. position: absolute;
  237. top:0;
  238. bottom: 0;
  239. left:0;
  240. right: 0;
  241. }
  242.  
  243. #header {
  244. {block:ifColorHeader}
  245. background:{color:header};
  246. height:160px;
  247. {/block:ifColorHeader}
  248. }
  249.  
  250. img#header {
  251. {block:ifImageHeader}
  252. height:auto;
  253. min-height:140px;
  254. object-fit:cover;
  255. overflow:hidden;
  256. {/block:ifImageHeader}
  257. }
  258.  
  259. img#icon {
  260. width:50px;
  261. height:50px;
  262. border:5px solid {color:content background};
  263. border-radius:100%;
  264. margin-top:-30px;
  265. margin-left:calc(50% - 30px);
  266. }
  267.  
  268. .title {
  269. color:{color:title};
  270. font-weight:700;
  271. text-transform:uppercase;
  272. padding:5px 30px;
  273. font-size:calc({select:font size}px + 3px);
  274. {block:ifNotIcon}
  275. margin-top:20px;
  276. {/block:ifNotIcon}
  277. }
  278.  
  279. #desc {
  280. padding:5px 30px;
  281. line-height:20px;
  282. letter-spacing:.5px;
  283. }
  284.  
  285. #linkbox {
  286. position:absolute;
  287. display:block;
  288. bottom:10px;
  289. text-align:center;
  290. width:100%;
  291. }
  292.  
  293. {block:ifIconLinks}
  294.  
  295. .links {
  296. font-size:12px;
  297. color:{color:links};
  298. padding:10px;
  299. text-align:center;
  300. margin:auto;
  301. display:block;
  302. }
  303.  
  304. t {
  305. padding-left:5px;
  306. padding-right:5px;
  307. }
  308.  
  309. {/block:ifIconLinks}
  310.  
  311. {block:ifTextLinks}
  312.  
  313. .links {
  314. color:white;
  315. text-transform:uppercase;
  316. font-weight:600;
  317. font-size:8px;
  318. padding-bottom:3px;
  319. text-align:center;
  320. display:block;
  321. }
  322.  
  323. .links a {
  324. color:white;
  325. background-color:{color:links};
  326. padding:6px 9px;
  327. margin:5px;
  328. line-height:30px;
  329. border-radius:5px;
  330. }
  331.  
  332. .links a:hover {
  333. opacity:.7;
  334. }
  335.  
  336. t {
  337. margin-left:5px;
  338. margin-right:5px;
  339. }
  340.  
  341. {/block:ifTextLinks}
  342.  
  343. /*-------POSTS--------*/
  344.  
  345. .wrapper {
  346. max-width:950px;
  347. width:calc(68% + 300px);
  348. min-width:750px;
  349. margin:auto;
  350. position:absolute;
  351. top:0;
  352. bottom:0;
  353. left:0;
  354. right:0;
  355. height:450px;
  356. }
  357.  
  358. @media screen and (max-width: 1000px){
  359. .wrapper {
  360. max-width:860px;
  361. width:calc(68% + 210px);
  362. min-width:660px;
  363. }}
  364.  
  365. .container {
  366. height:450px;
  367. max-width:650px;
  368. min-width:450px;
  369. width:68%;
  370. float:right;
  371. background:{color:content background};
  372. overflow:scroll;
  373. vertical-align: middle;
  374. }
  375.  
  376. .posts {
  377. max-width:100%;
  378. margin-left: auto;
  379. margin-right: auto;
  380. width:400px;
  381. margin-bottom:70px;
  382. margin-top:30px;
  383. transition: .5s ease;
  384. background:{color:post background};
  385. }
  386.  
  387. .caption {
  388. padding-left:20px;
  389. margin-top:10px;
  390. margin-left:5px;
  391. margin-bottom:-10px;
  392. border-left:1px solid #eee;
  393. }
  394.  
  395. .caption a {
  396. color:{color:text};
  397. border-bottom:1px solid {color:links};
  398. }
  399.  
  400. .caption a:hover {
  401. color:{color:links};
  402. }
  403.  
  404. .caption img {
  405. max-width:300px;
  406. height:auto;
  407. overflow:hidden;
  408. }
  409.  
  410. .title {
  411. color:{color:title};
  412. font-size:calc({select:font size}px + 2px);
  413. display:block;
  414. }
  415.  
  416. .src {
  417. text-align:center;
  418. padding:10px;
  419. }
  420.  
  421. .question {
  422. text-align:center;
  423. }
  424.  
  425. .audio {
  426. background:white;
  427. margin-bottom:-70px;
  428. padding-left:calc(50% - 200px);
  429. }
  430.  
  431. .permalinks {
  432. padding-top:10px;
  433. font-size:calc({select:font size}px - 1px);
  434. text-align:left;
  435. display:inline-block;
  436. }
  437.  
  438. .tags {
  439. text-align:left;
  440. display:block;
  441. }
  442.  
  443. .via {
  444. display:block;
  445. }
  446.  
  447. .postnotes {
  448. width:400px;
  449. font-size:{select:font size}px;
  450. color:{color:text};
  451. }
  452.  
  453. .lbutton {
  454. display:inline-block;
  455. color:{color:text};
  456. font-size:16px;
  457. text-align:right;
  458. float:right;
  459. padding:10px;
  460. }
  461.  
  462. .lbutton a {
  463. color:{color:text};
  464. }
  465.  
  466. .reblog {
  467. display:inline-block;
  468. }
  469.  
  470. .custom-like-button *{cursor:pointer!important;}
  471. .custom-like-button {
  472. position:relative;
  473. display:inline-block;
  474. vertical-align:top;
  475. width:17px;
  476. height:15px;
  477. cursor:pointer;
  478. }
  479.  
  480. .like_button:hover + .our_button {color:red;}
  481. .like_button.liked + .our_button {color:red;}
  482. .like_button iframe {width:100%!important;height:100%!important;}
  483. .like_button {z-index:10;opacity:0;}
  484. .our_button {z-index:1;}
  485. .our_button,.like_button {
  486. position:absolute;
  487. top:0;
  488. left:0;
  489. width:100%;
  490. height:100%;
  491. font-weight:bold;
  492. }
  493.  
  494. .pag {
  495. padding:10px;
  496. margin-top:-20px;
  497. margin-bottom:40px;
  498. text-align:center;
  499. font-size:11px;
  500. }
  501.  
  502. .n {position:fixed;bottom:20px;right:20px;display:block;font-family:helvetica;font-weight:200;}
  503. .n a {color:{color:links};font-size:13px;background:white;padding:4px 6px 5px 7px;border-radius:3px;}
  504.  
  505. </style>
  506.  
  507. <body>
  508.  
  509. <div class="controls"><i class="fa fa-bars" aria-hidden="true"></i></div>
  510.  
  511. <div class="n"><a href="https://02px.tumblr.com" title="theme credit">+</a></div>
  512.  
  513. <div class="wrapper">
  514.  
  515. <div class="sidebar">
  516. <div id="header">
  517. {block:ifImageHeader}<img id="header" src="{image:header}">{/block:ifImageHeader}
  518. </div>
  519. {block:ifIcon}
  520. <img id="icon" src="{image:icon}">
  521. {/block:ifIcon}
  522. <div class="title">{Title}</div>
  523. <div id="desc">{block:Description}{Description}{/block:Description}</div>
  524. <div id="linkbox">
  525. {block:ifIconLinks}
  526. <div class="links">
  527. <a href="/" class="f"><div class="tool">index</div><t>
  528. <i class="fa fa-home" aria-hidden="true"></i></t></a>
  529. <a href="/ask" class="f"><div class="toolone">ask</div><t>
  530. <i class="fa fa-envelope-o" aria-hidden="true"></i></t></a>
  531. <a href="{text:link 1 url}" class="f"><div class="tooltwo">{text:link 1}</div><t>
  532. <i class="fa fa-bolt" aria-hidden="true"></i></t></a>
  533. {block:ifLink2}
  534. <a href="{text:link 2 url}" class="f"><div class="toolthree">{text:link 2}</div><t>
  535. <i class="fa fa-heart-o" aria-hidden="true"></i></t></a>
  536. {/block:ifLink2}
  537. {block:ifLink3}
  538. <a href="{text:link 3 url}" class="f"><div class="toolfour">{text:link 3}</div><t>
  539. <i class="fa fa-bars" aria-hidden="true"></i></t></a>
  540. {/block:ifLink3}
  541. </div>
  542. {/block:ifIconLinks}
  543. {block:ifTextLinks}
  544. <div class="links">
  545. <a href="/">Index</a>{block:ifLink3}<br>{/block:ifLink3}
  546. <a href="/ask">Ask</a>
  547. <a href="{text:link 1 url}">{text:link 1}</a>
  548. {block:ifLink2}
  549. <a href="{text:link 2 url}">{text:link 2}</a>
  550. {/block:ifLink2}
  551. {block:ifLink3}
  552. <a href="{text:link 3 url}">{text:link 3}</a>
  553. {/block:ifLink3}
  554. </div>
  555. {/block:ifTextLinks}
  556. </div>
  557. </div>
  558.  
  559. <div class="container">
  560.  
  561. {block:Posts}
  562.  
  563. <div class="posts">
  564.  
  565. {block:Text}{block:Title}{Title}{/block:Title}<div class="caption">{Body}</div>{/block:Text}
  566.  
  567. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  568.  
  569. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Panorama}
  570.  
  571. {block:Photoset}{Photoset}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  572.  
  573. {block:Quote}"{Quote}"{block:Source}{Source}{/block:Source}{/block:Quote}
  574.  
  575. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  576.  
  577. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  578. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  579.  
  580. {block:Video}{Video-400}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video}
  581.  
  582. {block:Audio}{AudioEmbed-400}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  583.  
  584. {block:IndexPage}
  585.  
  586. {block:Date}
  587. <div class="permalinks">
  588. <a href="{PermaLink}">{TimeAgo}, </a>
  589. <a href="{PermaLink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a>
  590. </div>{/block:Date}
  591.  
  592. <div class="lbutton">
  593.  
  594. <div class="custom-like-button">{LikeButton}
  595. <span class="our_button"><i class="oi oi-heart"></i></span>
  596. </div>
  597. <div class="reblog"><a href="{ReblogURL}"><i class="oi oi-refresh"></i></a></div></div>
  598.  
  599. {block:HasTags}<div class="tags">
  600. {block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}
  601. </div>{/block:HasTags}
  602.  
  603. {/block:IndexPage}
  604.  
  605. {block:PermaLinkPage}
  606.  
  607. {block:Date}
  608. <div class="permalinks">
  609. <a href="{PermaLink}">{TimeAgo}, {DayOfMonth}{DayOfMonthSuffix} of {Month}</a>
  610. </div>{/block:Date}
  611.  
  612. {block:HasTags}<div class="tags">
  613. {block:Tags}<a href="#">tagged with </a><a href="{TagUrl}">#{Tag} </a>{/block:Tags}
  614. </div>{/block:HasTags}
  615. <a href="{PermaLink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a>
  616. {block:PostNotes}{PostNotes}{/block:PostNotes}
  617.  
  618. {/block:PermaLinkPage}
  619.  
  620. {block:ContentSource}
  621. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  622. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  623. {/block:SourceLogo}
  624. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  625. {/block:ContentSource}
  626.  
  627. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  628.  
  629. </div>
  630.  
  631. {/block:Posts}
  632.  
  633. {block:Pagination}
  634. <div class="pag">{block:PreviousPage}
  635. <a href="{PreviousPage}">backward</a>
  636. {/block:PreviousPage}{block:NextPage}
  637. <a href="{NextPage}">forward</a>
  638. {/block:NextPage}</div>{/block:Pagination}
  639.  
  640. </div>
  641. </div>
  642.  
  643. </body>
  644. </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!