API tools faq
paste
Advertisement
jhxy

theme 006; ad astra per aspera [column version]

jhxy
Sep 16th, 2014
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.10 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <!-- this theme is by jordyn
  6. -->
  7.  
  8. <meta name="color:Background" content="#ffffff"/>
  9. <meta name="color:Text" content="#000000"/>
  10. <meta name="color:Link" content="#cccccc"/>
  11. <meta name="color:Circle" content="#000000"/>
  12. <meta name="color:Borders" content="#cccccc"/>
  13. <meta name="color:Constellation" content="#888888"/>
  14. <meta name="color:Accent 1" content="#cccccc"/>
  15. <meta name="color:Accent 2" content="#888888"/>
  16. <meta name="text:Link 1 URL" content="/"/>
  17. <meta name="text:Link 2 URL" content="/"/>
  18. <meta name="text:Link 3 URL" content="/"/>
  19. <meta name="text:Link 4 URL" content="/"/>
  20. <meta name="text:Link 5 URL" content="/"/>
  21. <meta name="text:Link 6 URL" content="/"/>
  22. <meta name="text:Link 7 URL" content="/"/>
  23. <meta name="text:Link 1 Title Hover" content="callisto"/>
  24. <meta name="text:Link 2 Title Hover" content="ganymede"/>
  25. <meta name="text:Link 3 Title Hover" content="io"/>
  26. <meta name="text:Link 4 Title Hover" content="europa"/>
  27. <meta name="text:Link 5 Title Hover" content="metis"/>
  28. <meta name="text:Link 6 Title Hover" content="elara"/>
  29. <meta name="text:Link 7 Title Hover" content="adrastea"/>
  30.  
  31. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32.  
  33. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  34. <script>
  35. (function($){
  36. $(document).ready(function(){
  37. $("a[title]").style_my_tooltips({
  38. tip_follows_cursor:false,
  39. tip_delay_time:90,
  40. tip_fade_speed:600,
  41. attribute:"title"
  42. });
  43. });
  44. })(jQuery);
  45. </script>
  46.  
  47. <style type="text/css">
  48. body {
  49. font-family:Menlo, monospace;
  50. font-size:10px;
  51. letter-spacing:1px;
  52. background-color:{color:Background};
  53. color:{color:Text};
  54. }
  55.  
  56. .topbar {
  57. margin-left:auto;
  58. margin-right:auto;
  59. margin-top:20px;
  60. background-color:{color:Background};
  61. }
  62. .circle{
  63. font-family:Menlo, monospace;
  64. text-align:center;
  65. letter-spacing:2px;
  66. height:200px;
  67. width:200px;
  68. border-radius:50%;
  69. margin-left:auto;
  70. margin-right:auto;
  71. background-image: url("https://36.media.tumblr.com/cfb17d3ba74f64c885658a6bfe7507f8/tumblr_o4uk03FOoM1r1bumeo1_500.png");
  72. background-size:contain;
  73. z-index:99999;
  74. }
  75. #title {
  76. vertical-align:center;
  77. color:{color:Text};
  78. font-size:16px;
  79. padding-top:85px;
  80. padding-left:50px;
  81. padding-right:50px;
  82. -moz-transition-duration: 0.5s;
  83. -o-transition-duration: 0.5s;
  84. -webkit-transition-duration: 0.5s;
  85. transition-duration: 0.5s;
  86. }
  87. #title a {
  88. color:{color:Text};
  89. padding-bottom:10px;
  90. }
  91. #title a:hover {
  92. color:{color:Accent 2};
  93. }
  94. a {
  95. text-decoration:none;
  96. color:{color:Link};
  97. }
  98. a:hover {
  99. color: transparent;
  100. text-shadow: {color:Accent 2} 0 0 5px;
  101. text-decoration:none;
  102. -moz-transition-duration: 0.5s;
  103. -o-transition-duration: 0.5s;
  104. -webkit-transition-duration: 0.5s;
  105. transition-duration: 0.5s;
  106. }
  107.  
  108. .circle:hover #links{
  109. color:#888888;
  110. opacity:1;
  111. z-index:9999999;
  112. -moz-transition-duration: 0.5s;
  113. -o-transition-duration: 0.5s;
  114. -webkit-transition-duration: 0.5s;
  115. transition-duration: 0.5s;
  116. }
  117. #description {
  118. font-family: Menlo;
  119. text-align:center;
  120. font-size:10px;
  121. letter-spacing:2px;
  122. padding-top:35px;
  123. }
  124. .hovcirc {
  125. width:100px;
  126. height:100px;
  127. background-color:{color:Background};
  128. opacity:0;
  129. z-index:8888;
  130. text-align:center;
  131. letter-spacing:2px;
  132. height:200px;
  133. width:200px;
  134. border-radius:50%;
  135. margin-left:auto;
  136. margin-right:auto;
  137. -moz-transition-duration: 0.8s;
  138. -o-transition-duration: 0.8s;
  139. -webkit-transition-duration: 0.8s;
  140. transition-duration: 0.8s;
  141. }
  142. .hovcirc:hover {
  143. opacity:0.6;
  144. -moz-transition-duration: 0.8s;
  145. -o-transition-duration: 0.8s;
  146. -webkit-transition-duration: 0.8s;
  147. transition-duration: 0.8s;
  148.  
  149. }
  150. .hovcirc:hover #title a{
  151. opacity:1;
  152. -moz-transition-duration: 0.5s;
  153. -o-transition-duration: 0.5s;
  154. -webkit-transition-duration: 0.5s;
  155. transition-duration: 0.5s;
  156.  
  157. }
  158.  
  159. .container {
  160. display: block;
  161. width: 600px;
  162. margin-left:auto;
  163. margin-right:auto;
  164. margin-top:90px;
  165.  
  166. }
  167. .posts {
  168. padding:10px;
  169. margin-top:250px;
  170. width:400px;
  171. margin-left:auto;
  172. margin-right:auto;
  173. }
  174.  
  175. .posts .hovcap {
  176. opacity: 0;
  177. text-align:center;
  178. padding:10px;
  179. margin-left:auto;
  180. margin-right:auto;
  181. -moz-transition-duration: 0.5s;
  182. -o-transition-duration: 0.5s;
  183. -webkit-transition-duration: 0.5s;
  184. transition-duration: 0.5s;
  185. }
  186. .posts:hover .hovcap {
  187. opacity:1;
  188. -moz-transition-duration: 0.5s;
  189. -o-transition-duration: 0.5s;
  190. -webkit-transition-duration: 0.5s;
  191. transition-duration: 0.5s;
  192. }
  193.  
  194. .quote {
  195. margin-left:auto;
  196. margin-right:auto;
  197. border:1px solid {color:Borders};
  198. letter-spacing:2px;
  199. text-transform:lowercase;
  200. padding:20px;
  201. width:360px;
  202. }
  203. li:nth-child(odd) {
  204. background-color:#F6F6F6;
  205. color:{color:Accent 1};
  206. padding:5px;
  207. }
  208. li:nth-child(even) {
  209. background-color: {color:Background} ;
  210. color:{color:Accent 2};
  211. padding:5px;
  212. }
  213.  
  214. ol {
  215. list-style:decimal-leading-zero;
  216. text-align:left;
  217. }
  218. ul {
  219. list-style:square;
  220. text-align:left;
  221. }
  222. .notes li {
  223. list-style:none;
  224. padding:10px;
  225. }
  226. .constellation {
  227. width:400px;
  228. left:50%;
  229. margin-left:-170px;
  230. position:absolute;
  231. margin-top:50px;
  232. margin-bottom:100px;
  233. }
  234. .moon {
  235. width: 20px;
  236. height: 22px;
  237. border-radius: 50%;
  238. box-shadow: 3.75px 3.75px 0 0 {color:Link};
  239. padding-right:2px;
  240. margin-left:auto;
  241. margin-right:auto;
  242. margin-top:8px;
  243. }
  244. .pagination {
  245. display: none;
  246. }
  247. .nav {
  248. width:90px;
  249. margin-left:auto;
  250. margin-right:auto;
  251. padding:50px;
  252. }
  253. .nav a{
  254. border:1px solid {color:Link};
  255. color:{color:Link};
  256. padding:20px;
  257. width:40px;
  258. margin-left:auto;
  259. margin-right:auto;
  260. -moz-transition-duration: 0.5s;
  261. -o-transition-duration: 0.5s;
  262. -webkit-transition-duration: 0.5s;
  263. transition-duration: 0.5s;
  264. }
  265. .nav a:hover {
  266. background-color:{color:Link};
  267. color:{color:Background};
  268. -moz-transition-duration: 0.5s;
  269. -o-transition-duration: 0.5s;
  270. -webkit-transition-duration: 0.5s;
  271. transition-duration: 0.5s;
  272. }
  273. #link1 {
  274. position: relative;
  275. width: 7px;
  276. height: 7px;
  277. background-color:{color:Constellation};
  278. border-radius:50%;
  279. }
  280. #link1:after {
  281. content: "";
  282. position: absolute;
  283. border-top: 1px solid {color:Constellation};
  284. /* top: -12px;*/
  285. left: -9px;
  286. top:19px;
  287. width: 50px;
  288. height: 12px;
  289. -webkit-transform: rotate(45deg);
  290. -moz-transform: rotate(45deg);
  291. -ms-transform: rotate(45deg);
  292. -o-transform: rotate(45deg);
  293. }
  294. #link2 {
  295. position: relative;
  296. width: 7px;
  297. height: 7px;
  298. left:38px;
  299. top:30px;
  300. background-color:{color:Constellation};
  301. border-radius:50%;
  302. -webkit-transform: rotate(-95deg);
  303. -moz-transform: rotate(-95deg);
  304. -ms-transform: rotate(-95deg);
  305. -o-transform: rotate(-95deg);
  306. }
  307. #link2:after {
  308. content: "";
  309. position: absolute;
  310. border-top: 1px solid {color:Constellation};
  311. left: -31px;
  312. top:45px;
  313. width: 100px;
  314. height: 12px;
  315. -webkit-transform: rotate(65deg);
  316. -moz-transform: rotate(65deg);
  317. -ms-transform: rotate(65deg);
  318. -o-transform: rotate(65deg);
  319. }
  320. #link3 {
  321. position: relative;
  322. width: 7px;
  323. height: 7px;
  324. left:125px;
  325. top:-28px;
  326. background-color:{color:Constellation};
  327. border-radius:50%;
  328. -webkit-transform: rotate(-40deg);
  329. -moz-transform: rotate(-40deg);
  330. -ms-transform: rotate(-40deg);
  331. -o-transform: rotate(-40deg);
  332. }
  333. #link3:after {
  334. content: "";
  335. position: absolute;
  336. border-top: 1px solid {color:Constellation};
  337. left: -25px;
  338. top:37px;
  339. width: 80px;
  340. height: 12px;
  341. -webkit-transform: rotate(65deg);
  342. -moz-transform: rotate(65deg);
  343. -ms-transform: rotate(65deg);
  344. -o-transform: rotate(65deg);
  345. }
  346. #link4 {
  347. position: relative;
  348. width: 7px;
  349. height: 7px;
  350. left:200px;
  351. top:1px;
  352. background-color:{color:Constellation};
  353. border-radius:50%;
  354. -webkit-transform: rotate(-40deg);
  355. -moz-transform: rotate(-40deg);
  356. -ms-transform: rotate(-40deg);
  357. -o-transform: rotate(-40deg);
  358. }
  359. #link4:after {
  360. content: "";
  361. position: absolute;
  362. border-top: 1px solid {color:Constellation};
  363. left: 6px;
  364. top:-13px;
  365. width: 40px;
  366. height: 12px;
  367. -webkit-transform: rotate(170deg);
  368. -moz-transform: rotate(170deg);
  369. -ms-transform: rotate(170deg);
  370. -o-transform: rotate(170deg);
  371. }
  372. #link5 {
  373. position: relative;
  374. width: 7px;
  375. height: 7px;
  376. left:230px;
  377. top:-40px;
  378. background-color:{color:Constellation};
  379. border-radius:50%;
  380. -webkit-transform: rotate(-40deg);
  381. -moz-transform: rotate(-40deg);
  382. -ms-transform: rotate(-40deg);
  383. -o-transform: rotate(-40deg);
  384. }
  385. #link5:after {
  386. content: "";
  387. position: absolute;
  388. border-top: 1px solid {color:Constellation};
  389. left: -29px;
  390. top:45px;
  391. width: 100px;
  392. height: 12px;
  393. -webkit-transform: rotate(65deg);
  394. -moz-transform: rotate(50deg);
  395. -ms-transform: rotate(50deg);
  396. -o-transform: rotate(50deg);
  397. }
  398. #link6 {
  399. position: relative;
  400. width: 7px;
  401. height: 7px;
  402. left:320px;
  403. top:-7px;
  404. background-color:{color:Constellation};
  405. border-radius:50%;
  406. -webkit-transform: rotate(-40deg);
  407. -moz-transform: rotate(-40deg);
  408. -ms-transform: rotate(-40deg);
  409. -o-transform: rotate(-40deg);
  410. }
  411. #link6:after {
  412. content: "";
  413. position: absolute;
  414. border-top: 1px solid {color:Constellation};
  415. left: 4px;
  416. top:-4px;
  417. width: 20px;
  418. height: 12px;
  419. -webkit-transform: rotate(-45deg);
  420. -moz-transform: rotate(50deg);
  421. -ms-transform: rotate(50deg);
  422. -o-transform: rotate(50deg);
  423. }
  424. #link7 {
  425. position: relative;
  426. width: 7px;
  427. height: 7px;
  428. left:323px;
  429. top:-35px;
  430. background-color:{color:Constellation};
  431. border-radius:50%;
  432. -webkit-transform: rotate(-40deg);
  433. -moz-transform: rotate(-40deg);
  434. -ms-transform: rotate(-40deg);
  435. -o-transform: rotate(-40deg);
  436. }
  437. #s-m-t-tooltip {
  438. z-index:9999999999999999999999;
  439. margin:10px 0px 0px 18px;
  440. background-color:none;
  441. max-width: 150px;
  442. padding:3px;
  443. text-transform:lowercase;
  444. font-size:9px;
  445. color:{color:Accent 1};
  446. border: 1px solid {color:Accent 1};
  447. }
  448. .permalink {
  449. text-align:center;
  450. }
  451. .permapost {
  452. display:inline-block;
  453. margin-left:auto;
  454. margin-right:auto;
  455. width:400px;
  456. float:none;
  457. }
  458. #permapost {
  459. display:inline-block;
  460. }
  461. #notes {
  462. display:inline-block;
  463. height:400px;
  464. width:300px;
  465. overflow-y:scroll;
  466. padding:20px 30px 20px 50px;
  467. border:1px solid #fff;
  468. }
  469. #notes li:nth-child(odd) {
  470. background-color:{color:Accent 1};
  471. color:#222;
  472. padding:5px;
  473. list-style:upper-roman;
  474. }
  475. #notes li:nth-child(even) {
  476. background-color: {color:Background} ;
  477. color:#888;
  478. padding:5px;
  479. list-style:upper-roman;
  480. }
  481.  
  482. ::-webkit-scrollbar {
  483. width: 7px;
  484. }
  485.  
  486. ::-webkit-scrollbar-track {
  487. border:#fff solid 1px;
  488. background-color:{color:Background};
  489. }
  490.  
  491. ::-webkit-scrollbar-thumb {
  492. background-color:{color:Text};
  493. border:#fff solid 1px;
  494. }
  495. </style>
  496.  
  497. </head>
  498.  
  499. <body>
  500.  
  501.  
  502. <div class="topbar">
  503. <div class="circle">
  504. <div class="hovcirc">
  505. <div id="title"><a href="/">{Title}</a></div>
  506. </div>
  507. </div>
  508. <div id="description">{Description}</div>
  509.  
  510. <div class="constellation">
  511. <a href="{text:Link 1 URL}" title="{text:Link 1 Title Hover}"><div id="link1"></div></a>
  512. <a href="{text:Link 2 URL}" title="{text:Link 2 Title Hover}"><div id="link2"></div></a>
  513. <a href="{text:Link 3 URL}" title="{text:Link 3 Title Hover}"><div id="link3"></div></a>
  514. <a href="{text:Link 4 URL}" title="{text:Link 4 Title Hover}"><div id="link4"></div></a>
  515. <a href="{text:Link 5 URL}" title="{text:Link 5 Title Hover}"><div id="link5"></div></a>
  516. <a href="{text:Link 6 URL}" title="{text:Link 6 Title Hover}"><div id="link6"></div></a>
  517. <a href="{text:Link 7 URL}" title="{text:Link 7 Title Hover}"><div id="link7"></div></a>
  518. </div>
  519.  
  520. </div>
  521.  
  522. <div class="block">
  523. <div class="container">
  524. {block:Posts}
  525.  
  526.  
  527.  
  528. <div class="posts">
  529.  
  530.  
  531. {block:Text}
  532. {block:Title}<h2>{Title}</h2>{/block:Title}
  533. {Body}
  534. <div class="hovcap">
  535. {block:HasTags}
  536. <div class="tags">
  537. {block:Tags}
  538. <a href="{TagURL}">#{Tag}</a>
  539. {/block:Tags}
  540. </div>
  541. {/block:HasTags}</p>
  542. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  543. <a href="{Permalink}"><div class="moon"></div></a>
  544. </div>
  545. {/block:Text}
  546.  
  547. {block:Answer}
  548. <div class="question">
  549. <h2>{Asker} whispered: {Question}</h2>
  550. </div>
  551. <div class="quest">
  552. {Answer}
  553. </div>
  554. <div class="hovcap">
  555. {block:HasTags}
  556. <div class="tags">
  557. {block:Tags}
  558. <a href="{TagURL}">#{Tag}</a>
  559. {/block:Tags}
  560. </div>
  561. {/block:HasTags}</p>
  562. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  563. </div>
  564. {/block:Answer}
  565.  
  566. {block:Quote}
  567. <div class="quote">
  568. <div class="quotetext_{Length}"><h1>"{Quote}"</h1></div>
  569. {block:Source}<div class="source"> - {Source}</div>{/block:Source}
  570. </div>
  571. <div class="hovcap">
  572. {block:HasTags}
  573. <div class="tags">
  574. {block:Tags}
  575. <a href="{TagURL}">#{Tag}</a>
  576. {/block:Tags}
  577. </div>
  578. {/block:HasTags}</p>
  579. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  580. <a href="{Permalink}"><div class="moon"></div></a>
  581. </div>
  582. {/block:Quote}
  583.  
  584. {block:Photoset}
  585. {Photoset-400}
  586. <div class="hovcap">
  587. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}</div>{/block:Caption}
  588. {block:HasTags}
  589. <div class="tags">
  590. {block:Tags}
  591. <a href="{TagURL}">#{Tag}</a>
  592. {/block:Tags}
  593. </div>
  594. {/block:HasTags}
  595. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  596. </div>
  597. {/block:Photoset}
  598.  
  599. {block:Photo}
  600. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="400px">{LinkCloseTag}
  601. <div class="hovcap">
  602. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}
  603. {block:HasTags}
  604. <div class="tags">
  605. {block:Tags}
  606. <a href="{TagURL}">#{Tag}</a>
  607. {/block:Tags}
  608. </div>
  609. {/block:HasTags}
  610. </p>
  611. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  612. <a href="{Permalink}"><div class="moon"></div></a>
  613. </div>
  614. </div>{/block:Caption}
  615. </div>
  616. {/block:Photo}
  617.  
  618. {block:AudioPlayer}{AudioPlayerWhite} {/block:AudioPlayer}
  619. {block:PlayCount} {PlayCountWithLabel} {/block:PlayCount}
  620. {block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}
  621. {block:Artist}{Artist}{/block:Artist}
  622. {block:Album}{Album}{/block:Album}
  623. {block:TrackName}{TrackName}{/block:TrackName}
  624.  
  625. {block:Video}
  626. {Video-400}
  627. {block:Caption}{Caption}{/block:Caption}
  628. {/block:Video}
  629.  
  630. </div>
  631.  
  632. <div class="permalink">
  633. {block:PermalinkPage}
  634. {Post}
  635. {block:PostNotes}
  636. <div class"notes">
  637. {PostNotes}
  638. </div>
  639. {/block:PostNotes}
  640. {/block:PermalinkPage}
  641. </div>
  642.  
  643.  
  644.  
  645. {/block:Posts}
  646.  
  647. <div class="permalink">
  648. {block:PermalinkPage}
  649. <div class="permapost">
  650. <div id="permapost"> {Post} </div>
  651. <div class="postinfo">
  652. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  653. {block:HasTags}
  654. <div class="tags">
  655. {block:Tags}
  656. <a href="{TagURL}">#{Tag}</a>
  657. {/block:Tags}
  658. </div>
  659. {/block:HasTags}<a href="{ReblogParentURL}">via</a>
  660. <a href="{ReblogRootURL}">source</a>
  661. </div>
  662. </div>
  663. {block:PostNotes}
  664. <div id="notes">
  665. {PostNotes}
  666. </div>
  667. {/block:PostNotes}
  668. {/block:PermalinkPage}
  669. </div>
  670.  
  671. {block:Pagination}
  672. <div class="nav">
  673.  
  674. {block:PreviousPage}<a href="{PreviousPage}">aft</a>{/block:PreviousPage}
  675. {block:NextPage}<a href="{NextPage}">fore</a>{/block:NextPage}
  676. </div>
  677. {/block:Pagination}
  678.  
  679.  
  680. </div>
  681. </div>
  682.  
  683. </div>
  684. <div class="credit">
  685. <a href="http://jhxythemes.tumblr.com"><img style="height:50px;width:50px; margin-bottom:10px;margin-right:10px; float:right" src="https://38.media.tumblr.com/690d59d5b30ad0628ab75ac7794c6ab9/tumblr_n9vk8a9IHR1r1bumeo1_100.png"></a></div>
  686. </body>
  687. </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!