Advertisement
alithegreat

SCFTLCVES | 039: SO FAR AWAY.

Aug 26th, 2018
1,007
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.48 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  6.  
  7. <link href="https://fonts.googleapis.com/css?family=Asap|Cabin|Karla|Libre+Franklin|Muli|Open+Sans|Oxygen|Roboto+Mono|Ubuntu+Condensed|Oswald" rel="stylesheet">
  8.  
  9. <head>
  10.  
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  15.  
  16. <!----
  17.  
  18. #39 - so far away (scftlcves)
  19.  
  20. --->
  21.  
  22. <meta name="image:Container" content="https://via.placeholder.com/740 x 540"/>
  23. <meta name="image:Header" content="https://via.placeholder.com/200x100"/>
  24. <meta name="image:Icon" content="https://via.placeholder.com/50x50"/>
  25. <meta name="image:Background" content=""/>
  26.  
  27. <meta name="color:Background" content="#f8f8f8"/>
  28. <meta name="color:Blockquote" content="#d4d4d4"/>
  29. <meta name="color:Bold" content="#000000"/>
  30. <meta name="color:Border" content="#d4d4d4"/>
  31. <meta name="color:Container" content="#f0f0f0"/>
  32. <meta name="color:Entries" content="#ffffff"/>
  33. <meta name="color:Italic" content="#3c3636"/>
  34. <meta name="color:Link" content="#767676"/>
  35. <meta name="color:Navigation Text" content="#3c3636"/>
  36. <meta name="color:Scrollbar" content="#f0f0f0"/>
  37. <meta name="color:Tags" content="#3c3636"/>
  38. <meta name="color:Text" content="#3c3636"/>
  39. <meta name="color:Title" content="#000000"/>
  40.  
  41. <meta name="select:opacity" content="1.0" title="100%" />
  42. <meta name="select:opacity" content="0.9" title="90%" />
  43. <meta name="select:opacity" content="0.8" title="80%" />
  44. <meta name="select:opacity" content="0.7" title="70%" />
  45. <meta name="select:opacity" content="0.6" title="60%" />
  46.  
  47. <meta name="select:body font" content="Asap" title="Asap" />
  48. <meta name="select:body font" content="Cabin" title="Cabin" />
  49. <meta name="select:body font" content="Karla" title="Karla" />
  50. <meta name="select:body font" content="Libre Franklin" title="Libre Franklin" />
  51. <meta name="select:body font" content="Muli" title="Muli" />
  52. <meta name="select:body font" content="Open Sans" title="Open Sans" />
  53. <meta name="select:body font" content="Oxygen" title="Oxygen" />
  54. <meta name="select:body font" content="Roboto Mono" title="Roboto Mono" />
  55. <meta name="select:body font" content="Ubuntu Condensed" title="Ubuntu Condensed" />
  56.  
  57. <meta name="text:post title text size" content="16px">
  58. <meta name="text:body text size" content="11px">
  59. <meta name="text:small text size" content="10px">
  60.  
  61. <meta name="select:post size" content="500" title="500px" />
  62. <meta name="select:post size" content="450" title="450px" />
  63. <meta name="select:post size" content="400" title="400px" />
  64. <meta name="select:post size" content="350" title="350px" />
  65. <meta name="select:post size" content="300" title="300px" />
  66. <meta name="select:post size" content="250" title="250px" />
  67.  
  68. <meta name="if:grayscale posts" content="0"/>
  69.  
  70. <meta name="if:small caps" content="0"/>
  71.  
  72. <meta name="text:link one url" content="link one"/>
  73. <meta name="text:link one label" content="one label"/>
  74. <meta name="text:link two url" content="link two"/>
  75. <meta name="text:link two label" content="two label"/>
  76.  
  77.  
  78. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  79.  
  80. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81.  
  82. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  83.  
  84. <script>
  85.  
  86. (function($){
  87.  
  88. $(document).ready(function(){
  89.  
  90. $("a[title]").style_my_tooltips({
  91.  
  92. tip_follows_cursor:true,
  93.  
  94. tip_delay_time:90,
  95.  
  96. tip_fade_speed:600,
  97.  
  98. attribute:"title"
  99.  
  100. });
  101.  
  102. });
  103.  
  104. })(jQuery);
  105.  
  106. </script>
  107.  
  108. <style type="text/css">
  109.  
  110. #s-m-t-tooltip {
  111. background-color:{color:title};
  112. font-size:10px;
  113. font-weight:bold;
  114. border-radius:5px 5px 5px 5px;
  115. color:{color:entries};
  116. letter-spacing:1px;
  117. text-transform:lowercase;
  118. padding:10px;
  119. margin:20px 0px 0px 20px;
  120. z-index:9999999999999999999999;
  121.  
  122. }
  123.  
  124. ::-webkit-scrollbar-thumb {
  125. background-color:{color:Scrollbar};
  126. }
  127.  
  128. ::-webkit-scrollbar-track {
  129. background-color:{color:Entries};
  130. }
  131.  
  132. ::-webkit-scrollbar {
  133. height:2px;
  134. width:2px;
  135. }
  136.  
  137. ul {
  138. list-style-type: circle;
  139. padding-left:24px;
  140. line-height:13px;
  141. }
  142.  
  143. li {
  144. padding-left: 0px;
  145. margin-bottom: 0px;
  146. list-style: none;
  147. }
  148.  
  149. li:before {
  150. color: {color:title};
  151. content: "\e08f";
  152. font-family: 'SaturnIcons';
  153. font-size:6px;
  154. display: inline-block;
  155. margin-left: -2.5em;
  156. width: 2.5em;
  157. }
  158.  
  159. hr {
  160. display:block;
  161. border-style:dotted;
  162. border-color:{color:border};
  163. }
  164.  
  165. body {
  166. background: {color:Background};
  167. background-image:url('{image:Background}');
  168. background-attachment:fixed;
  169. font-family: '{select:body font}', sans-serif;
  170. font-size: {text:body text size};
  171. line-height:15px;
  172. color: {color:Text};
  173. }
  174.  
  175. blockquote {
  176. text-align:justify;
  177. margin-top: 5px;
  178. margin-bottom: 5px;
  179. margin-left: 5px;
  180. padding-left: 10px;
  181. border-left: 1px solid {color:blockquote};
  182. margin-right:5px;
  183. }
  184.  
  185. a {
  186. text-decoration: none;
  187. color: {color:Link};
  188. }
  189.  
  190. small, sub {
  191. font-size:{text:small text size};
  192. }
  193.  
  194. b, strong {
  195. color:{color:Bold};
  196. }
  197.  
  198. i,em {
  199. color:{color:Italic};
  200. }
  201.  
  202. pre {
  203. padding:6px;
  204. border-bottom:1px dotted {color:border};
  205. text-align:center;
  206. text-transform:lowercase;
  207. font-family:{select:body font};
  208. font-size:{small text size};
  209. color:{color:title};
  210. }
  211.  
  212. h1 {
  213. font-family:arial;
  214. line-height:32px;
  215. font-size:28px;
  216. color:{color:title};
  217. text-align:right;
  218. font-style:italic;
  219. font-weight:bold;
  220. letter-spacing:-1px;
  221. text-transform:lowercase;
  222. }
  223.  
  224. h2 {
  225. font-family:{select:body font};
  226. font-size:{text:small text size};
  227. color:{color:title};
  228. text-align:center;
  229. text-transform:uppercase;
  230. letter-spacing:3px;
  231. word-spacing:3px;
  232. }
  233.  
  234. #contain {
  235. margin:80px auto;
  236. width: calc({select:post size}px + 210px);
  237. height:430px;
  238. padding:30px;
  239. background-color:{color:container};
  240. border-radius:8px 8px 8px 8px;
  241. background-image:url('{image:Container}');
  242. -webkit-filter: grayscale(0%);
  243. -webkit-transition: all 0.6s ease-in-out;
  244. -moz-transition: all 0.6s ease-in-out;
  245. -o-transition: all 0.6s ease-in-out;
  246. -ms-transition: all 0.6s ease-in-out;
  247. transition: all 0.6s ease-in-out;
  248. }
  249.  
  250.  
  251. #bloggerback {
  252. margin-top:0px;
  253. position:fixed;
  254. width:180px;
  255. height:410px;
  256. padding:10px;
  257. background-color:{color:entries};
  258. border-radius:8px 8px 8px 8px;
  259. opacity:{select:opacity};
  260.  
  261. }
  262.  
  263. #bloggerdeets {
  264. width:184px;
  265. height:279px;
  266. margin-top:0px;
  267. overflow:auto;
  268. text-align:justify;
  269. {block:IfSmallCaps}
  270. font-variant:small-caps;
  271. font-size:10px;
  272. font-family:Ubuntu Condensed;
  273. line-height:14px;
  274. letter-spacing:2px;
  275. {/block:IfSmallCaps}
  276. }
  277.  
  278. #header {
  279. margin-top:41px;
  280. font-size:10px;
  281. font-family:karla;
  282. line-height:10px;
  283. text-align:center;
  284. position:fixed;
  285. margin-left:-10px;
  286. border-radius:5px 5px 0px 0px;
  287. }
  288.  
  289. #header img {
  290. display:inline-block;
  291. width:200px;
  292. height:100px;
  293. border-radius:0px 0px 5px 5px;
  294. -webkit-filter: grayscale(0%);
  295. -webkit-transition: all 0.6s ease-in-out;
  296. -moz-transition: all 0.6s ease-in-out;
  297. -o-transition: all 0.6s ease-in-out;
  298. -ms-transition: all 0.6s ease-in-out;
  299. transition: all 0.6s ease-in-out;
  300. }
  301.  
  302. #photoback {
  303. display:inline-block;
  304. position:fixed;
  305. width:50px;
  306. margin-top:10px;
  307. font-size:10px;
  308. font-family:karla;
  309. line-height:10px;
  310. margin-left:65px;
  311. text-align:center;
  312. background-color:transparent;
  313. z-index:9999999999999999999999999999;
  314. }
  315.  
  316. #photoback img {
  317. width:50px;
  318. height:50px;
  319. display:inline-block;
  320. border-radius:5px;
  321. -webkit-filter: grayscale(0%);
  322. -webkit-transition: all 0.6s ease-in-out;
  323. -moz-transition: all 0.6s ease-in-out;
  324. -o-transition: all 0.6s ease-in-out;
  325. -ms-transition: all 0.6s ease-in-out;
  326. transition: all 0.6s ease-in-out;
  327. }
  328.  
  329. #navigation {
  330. width:200px;
  331. font-family:oxygen;
  332. line-height:17px;
  333. margin-top:10px;
  334. position:fixed;
  335. }
  336.  
  337. #navigation a {
  338. text-align:center;
  339. margin-bottom:7px;
  340. margin-right:2px;
  341. margin-left:2px;
  342. display:inline-block;
  343. height:16px;
  344. line-height:16px;
  345. padding:6px;
  346. border-radius:5px;
  347. font-size:10px;
  348. font-weight:bold;
  349. font-family:oswald;
  350. letter-spacing:2px;
  351. color:{color:navigation text};
  352. z-index:999999999999999999;
  353. }
  354.  
  355. #navigation ya1 {
  356. float:left;
  357. }
  358.  
  359. #navigation ya2 {
  360. float:right;
  361. margin-right:13px;
  362. }
  363.  
  364. #entries {
  365. position:absolute;
  366. width:{select:post size}px;
  367. margin-left:210px;
  368. height:430px;
  369. padding-right:5px;
  370. overflow:auto;
  371. border: 0px solid {color:Border};}
  372.  
  373.  
  374. #entry {
  375. background-color:{color:Entries};
  376. margin-bottom:15px;
  377. border-radius:8px 8px 8px 8px;
  378. opacity:{select:opacity};
  379. padding:10px;}
  380.  
  381. .photoset {
  382. max-width: 100%;
  383. {block:IfGrayscalePosts}
  384. -webkit-filter: grayscale(100%);
  385. -webkit-transition: all 0.6s ease-in-out;
  386. -moz-transition: all 0.6s ease-in-out;
  387. -o-transition: all 0.6s ease-in-out;
  388. -ms-transition: all 0.6s ease-in-out;
  389. transition: all 0.6s ease-in-out;
  390. {/block:IfGrayscalePosts}
  391. }
  392.  
  393. .photoset:hover {
  394. -webkit-filter: grayscale(0%);
  395. -webkit-transition: all 0.6s ease-in-out;
  396. -moz-transition: all 0.6s ease-in-out;
  397. -o-transition: all 0.6s ease-in-out;
  398. -ms-transition: all 0.6s ease-in-out;
  399. transition: all 0.6s ease-in-out;
  400. }
  401.  
  402. .video {
  403. width:350px!important;}
  404.  
  405. .video iframe {
  406. width:350px!important;}
  407.  
  408. img {
  409. max-width: 100%;
  410. {block:IfGrayscalePosts}
  411. -webkit-filter: grayscale(100%);
  412. -webkit-transition: all 0.6s ease-in-out;
  413. -moz-transition: all 0.6s ease-in-out;
  414. -o-transition: all 0.6s ease-in-out;
  415. -ms-transition: all 0.6s ease-in-out;
  416. transition: all 0.6s ease-in-out;
  417. {/block:IfGrayscalePosts}
  418. }
  419.  
  420. img:hover {
  421. -webkit-filter: grayscale(0%);
  422. -webkit-transition: all 0.6s ease-in-out;
  423. -moz-transition: all 0.6s ease-in-out;
  424. -o-transition: all 0.6s ease-in-out;
  425. -ms-transition: all 0.6s ease-in-out;
  426. transition: all 0.6s ease-in-out;
  427. }
  428.  
  429.  
  430. #posttitles {
  431. font-family:{select:body font};
  432. line-height:100%;
  433. font-size:{text:post title text size};
  434. color:{color:title};
  435. font-weight:bold;
  436. padding:5px;
  437. text-align:center;
  438. text-transform:uppercase;
  439. }
  440.  
  441. #boujee {
  442. text-align:center;
  443. color:{color:text};
  444. margin-top:10px;
  445. display:block;
  446. font-size:{text:small text size};
  447. text-transform:lowercase;
  448. }
  449.  
  450. #boujee a {
  451. color:{color:title};
  452. font-style:italic;
  453. }
  454.  
  455.  
  456. #ask {
  457. text-align:center;
  458. line-height:120%;
  459. color:{color:text};
  460. padding:5px;
  461. }
  462.  
  463. .ask {
  464. float:left;
  465. z-index:10;
  466. font-size:11px;
  467. font-family:{select:body font};
  468. text-align:center;
  469. font-weight:bold;
  470. text-transform:lowercase;
  471. letter-spacing:1px;
  472. line-height:14px;
  473. color:{color:entries};
  474. background-color:{color:title};
  475. margin-top:-13px;
  476. margin-right:0px;
  477. margin-left:0px;
  478. border-radius:5px;
  479. padding-left:10px;
  480. padding-right:10px;
  481. padding-top:5px;
  482. padding-bottom:5px;
  483. }
  484.  
  485. .ask a {
  486. color:{color:entries};
  487. }
  488.  
  489. .askline {
  490. height:1px;
  491. margin-top:5px;
  492. margin-left:0px;
  493. background-color:{color:Border};
  494. z-index:-1;
  495. word-wrap:break-word;
  496. }
  497.  
  498. .question {
  499. color:{color:text};
  500. font-size:{text:small text size};
  501. border-left:1px solid {color:border};
  502. padding:15px;
  503. display:block;
  504. text-align:right;
  505. margin-left:10px;
  506. word-wrap:break-word;
  507.  
  508. }
  509.  
  510. #questionbox {
  511. word-wrap:break-word;
  512. padding:10px;
  513.  
  514. }
  515.  
  516.  
  517. #ans {
  518. text-align:justify;
  519. padding-top:2px;
  520. display:block;
  521. margin-top:20px;
  522. color:{color:text};
  523. }
  524.  
  525. .audio {
  526. display:block;
  527. padding:25px;
  528. height:40px;
  529. }
  530.  
  531. .playbutton {
  532. width:32px;
  533. height:40px;
  534. overflow:hidden;
  535. position:relative;
  536. z-index:9;
  537. opacity:.7;
  538. float:left;
  539. }
  540.  
  541. .albumart {
  542. margin-top:-5px;
  543. }
  544.  
  545. .albumart img {
  546. height:30px;
  547. width:30px;
  548. position:relative;
  549. float:right;
  550. }
  551.  
  552. .details {
  553. margin-top:-8px;
  554. margin-left:15px;
  555. text-align:left;
  556. float:left;
  557. padding:5px;
  558. text-transform:lowercase;
  559. }
  560. #permalink {
  561. text-align: center;
  562. border:none;
  563. position: relative;
  564. font-size:10px;
  565. text-transform:lowercase;
  566. margin-top: 20px;
  567. display:block;
  568. padding: 10px;
  569. border-radius:5px;
  570. background-color:{color:background};
  571. }
  572.  
  573. #permalink a {
  574. border-bottom:none;
  575. }
  576.  
  577. .date {
  578. color:{color:text};
  579. font-size:9px;
  580. z-index:10;
  581. text-transform:lowercase;
  582. border:none;
  583. text-align:right;
  584. }
  585.  
  586. .date iconback {
  587. width:10px;
  588. margin-right:5px;
  589. height:10px;
  590. font-size:9px;
  591. background-color:{color:entries};
  592. line-height:10px;
  593. padding:10px;
  594. text-align:center;
  595. border-radius:5px;
  596. display:inline-block;
  597. }
  598.  
  599. .tags {
  600. color:{color:tags};
  601. font-size:9px;
  602. margin-top:10px;
  603. text-align:right;
  604. border:none;
  605. text-transform:lowercase;
  606. }
  607.  
  608. .tags a{
  609. color:{color:tags};
  610. padding:5px;
  611. }
  612.  
  613.  
  614. #credit {
  615. font-size:12px;
  616. float:center;
  617. position:fixed;
  618. bottom:25px;
  619. right:25px;
  620. font-family:Roboto Mono;
  621. text-transform:lowercase;
  622. padding:8px;
  623. border-radius:5px;
  624. color:{color:title};
  625. background-color:{color:entries};
  626. }
  627.  
  628. #credit a {
  629. color:{color:title};
  630. }
  631.  
  632. </style>
  633.  
  634. </head>
  635.  
  636. <body>
  637.  
  638. <div id="contain">
  639.  
  640.  
  641. <div id="bloggerback">
  642.  
  643. <div id="bloggerdeets">
  644. {description}</div>
  645.  
  646. <div id="photoback"><img src="{image:Icon}"></div>
  647.  
  648. <div id="navigation">
  649. <ya1><a href="/" title="index">01</a>
  650. <a href="/ask" title="message">02</a>
  651. </ya1>
  652. <ya2>
  653. <a href="{text:link one url}" title="{text:link one label}">03</a>
  654. <a href="{text:link two url}" title="{text:link two label}">04</a>
  655. </ya2>
  656. </div>
  657.  
  658. <div id="header"><img src="{image:header}"></div>
  659.  
  660.  
  661. </div>
  662.  
  663.  
  664.  
  665. <div id="entries">
  666. {block:Posts}
  667. <div id="entry">
  668.  
  669. {block:Text}
  670. <div id="posttitles">{block:Title}{Title}{/block:Title}</div>
  671. {Body}
  672. {/block:Text}
  673.  
  674. {block:Photo}
  675. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  676. {block:Caption}{Caption}{/block:Caption}
  677. {/block:Photo}
  678.  
  679. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  680.  
  681. {block:Quote}
  682. <div id="posttitles">{Quote}</div>
  683. {block:Source}<br>β€”{Source}{/block:Source}
  684. {/block:Quote}
  685.  
  686. {block:Link}
  687. <div id="posttitles"><a href="{URL}" {Target}>{Name}</a></div>
  688. {block:Description}{Description}{/block:Description}
  689. {/block:Link}
  690.  
  691. {block:Chat}
  692. {block:Title}<div id="posttitles">{Title}</div>{/block:Title}
  693. {block:Lines}
  694. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  695. {/block:Lines}
  696. {/block:Chat}
  697.  
  698. {block:Audio}
  699. {block:AudioPlayer}
  700. <div class="audio">
  701. <div class="playbutton">{AudioPlayer}</div>
  702. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  703. <div class="details">
  704. {block:TrackName}{TrackName}{/block:TrackName}<br>
  705. {block:Artist}{Artist}{/block:Artist}
  706. </div></div>
  707. <div class="caption">
  708. {block:Caption}{Caption}{/block:Caption}
  709. </div>
  710. {/block:AudioPlayer}
  711. {/block:Audio}
  712.  
  713. {block:Video}<div class=β€œvideo”>{Video-500}</div>
  714. {block:Caption}{Caption}{/block:Caption}
  715. {/block:Video}
  716.  
  717. {block:Answer}
  718. <div id="questionbox"><div class="question">{Question}</div><div class="askline"></div><div class="ask">{Asker}</div></div>
  719. <div id="ans">{Answer}</div>
  720. {/block:Answer}
  721.  
  722.  
  723.  
  724. <div id="permalink">
  725. <div class="date">
  726. <iconback><a href="{Permalink}" title="{block:Date}{TimeAgo}{/block:Date}"><span class="sf sf-push-pin-o"></span></a></iconback>
  727.  
  728. <iconback><a href="{Permalink}" title="{NoteCountWithLabel}"><span class="sf sf-heart-2-o"></span></a></iconback>
  729.  
  730. <iconback><a href="{ReblogURL}" title="reblog this post" target="_blank"><span class="sf sf-reblog-o"></span></a></iconback>
  731.  
  732. {block:RebloggedFrom}
  733.  
  734. <iconback><a href="{ReblogParentURL}" title="{ReblogParentTitle}"><span class="sf sf-paper-plane-o"></span></a></iconback>
  735.  
  736. <iconback><a href="{ReblogRootURL}"title="{ReblogRoottitle}"><span class="sf sf-home-o"></span></a></iconback>
  737.  
  738. {/block:RebloggedFrom}</div>
  739.  
  740.  
  741. </div>
  742.  
  743. <div class="tags">{block:HasTags} {block:Tags} <a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  744.  
  745.  
  746.  
  747. <!-- /div entry ---> </div>
  748.  
  749.  
  750.  
  751. {/block:Posts}{block:PostNotes}{PostNotes}{/block:PostNotes}
  752.  
  753. <div id="boujee">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">back</a> &nbsp;&nbsp;{/block:PreviousPage} {CurrentPage} out of {TotalPages} {block:NextPage}&nbsp;&nbsp;<a href="{NextPage}">next</a>{/block:NextPage} {/block:Pagination}</div>
  754.  
  755.  
  756. </div></div>
  757.  
  758. <div id="credit"><a href="https://scftlcves.tumblr.com/"><span class="sf sf-stars-o"></span></a></div>
  759.  
  760. </body>
  761.  
  762. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement