API tools faq
paste
Advertisement
jhxy

theme 003; sum

jhxy
Aug 19th, 2014
1,359
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.70 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4.  
  5. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  6. <link href='http://fonts.googleapis.com/css?family=Dosis:200,400,600|Quicksand:300|Montserrat+Alternates|Reenie+Beanie|Meddon|Carme:100|Maven+Pro|Carme' rel='stylesheet' type='text/css'>
  7.  
  8.  
  9. <meta name="color:Background" content="#ffffff"/>
  10. <meta name="color:Text" content="#888888"/>
  11. <meta name="color:Link" content="#eeeeee"/>
  12. <meta name="color:Link Hover" content="#222"/>
  13. <meta name="color:Borders" content="#cccccc"/>
  14. <meta name="color:Square" content="#222"/>
  15. <meta name="color:Header Text" content="#fff"/>
  16. <meta name="text:Header Image URL" content="http://static.squarespace.com/static/5363ea16e4b0885745705e0a/536c85f8e4b0cbd20f184e09/536c8695e4b0cbd20f188449/1399622125632/McCartney-8.jpg"/>
  17. <meta name="text:Sidebar Image URL" content="http://static.squarespace.com/static/5363ea16e4b0885745705e0a/536c85f8e4b0cbd20f184e09/536c8695e4b0cbd20f18844d/1399621269204/McCartney-9.jpg?format=original"/>
  18. <meta name="text:Link 1 Title" content="I"/>
  19. <meta name="text:Link 2 Title" content="II"/>
  20. <meta name="text:Link 3 Title" content="III"/>
  21. <meta name="text:Link 4 Title" content="IV"/>
  22. <meta name="text:Link 5 Title" content="V"/>
  23. <meta name="text:Link 6 Title" content="VI"/>
  24. <meta name="text:Link 7 Title" content="VII"/>
  25. <meta name="text:Link 1 URL" content="/"/>
  26. <meta name="text:Link 2 URL" content="/"/>
  27. <meta name="text:Link 3 URL" content="/"/>
  28. <meta name="text:Link 4 URL" content="/"/>
  29. <meta name="text:Link 5 URL" content="/"/>
  30. <meta name="text:Link 6 URL" content="/"/>
  31. <meta name="text:Link 7 URL" content="/"/>
  32.  
  33.  
  34. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  35.  
  36. <style type="text/css">
  37.  
  38. body {
  39. font-family:helvetica;
  40. letter-spacing:1px;
  41. font-size:10px;
  42. font-weight:bold;
  43. color:{color:Text};
  44. }
  45. a {
  46. text-decoration:none;
  47. color:{color:Link};
  48. -moz-transition-duration: 0.5s;
  49. -o-transition-duration: 0.5s;
  50. -webkit-transition-duration: 0.5s;
  51. transition-duration: 0.5s;
  52. }
  53. a:hover {
  54. color:{color:Link Hover};
  55. -moz-transition-duration: 0.5s;
  56. -o-transition-duration: 0.5s;
  57. -webkit-transition-duration: 0.5s;
  58. transition-duration: 0.5s;
  59. }
  60. .header {
  61. text-align:center;
  62. height:300px;
  63. width:800px;
  64. padding:30px;
  65. background-image: url("{text:Header Image URL}");
  66. background-size:cover;
  67. background-repeat:no-repeat;
  68. background-position:top;
  69. margin-left:auto;
  70. margin-right:auto;
  71. }
  72. #title {
  73. height:100px;
  74. width:100px;
  75. background-color:{color:Square};
  76. z-index:10;
  77. opacity:0.5;
  78. word-spacing:4px;
  79. line-height:100px;
  80. margin-left:auto;
  81. margin-right:auto;
  82. text-transform:uppercase;
  83. border:4px solid {color:Square};
  84. font-size:20px;
  85. padding:5px;
  86. text-align:center;
  87. margin-top:50px;
  88. font-weight:500;
  89. -moz-transition-duration: 0.5s;
  90. -o-transition-duration: 0.5s;
  91. -webkit-transition-duration: 0.5s;
  92. transition-duration: 0.5s;
  93. }
  94. #title a {
  95. color:{color:Header Text};
  96. margin-left:auto;
  97. margin-right:auto;
  98. z-index:12;
  99. }
  100. #links a div {
  101. width:20px;
  102. height:20px;
  103. border:1px solid transparent;
  104. display:inline-block;
  105. font-size:8px;
  106. text-align:center;
  107. padding:2px;
  108. padding-top:2px;
  109. background-color:{color:Square};
  110. line-height:10px;
  111. opacity:0.4;
  112. word-spacing:10px;
  113. -moz-transition-duration: 0.8s;
  114. -o-transition-duration: 0.8s;
  115. -webkit-transition-duration: 0.8s;
  116. transition-duration: 0.8s;
  117. }
  118. #link {
  119. margin-top:80px;
  120. opacity:0.5;
  121. }
  122. #title:hover{
  123. background-color:transparent;
  124. color:{color:Square};
  125. opacity:0.5;
  126. font-weight:bold;
  127. border:4px solid {color:Square};
  128. -moz-transition-duration: 0.8s;
  129. -o-transition-duration: 0.8s;
  130. -webkit-transition-duration: 0.8s;
  131. transition-duration: 0.8s;
  132. }
  133. #title:hover a {
  134. color:{color:Square};
  135. font-weight:bold;
  136. -moz-transition-duration: 0.8s;
  137. -o-transition-duration: 0.8s;
  138. -webkit-transition-duration: 0.8s;
  139. transition-duration: 0.8s;
  140. }
  141. #title:hover #links {
  142. opacity:0.5;
  143. -moz-transition-duration: 0.8s;
  144. -o-transition-duration: 0.8s;
  145. -webkit-transition-duration: 0.8s;
  146. transition-duration: 0.8s;
  147. }
  148.  
  149. .container {
  150. margin-left:auto;
  151. margin-right:auto;
  152. margin-top:170px;
  153. width:500px;
  154. }
  155.  
  156. .menubar {
  157. height:100%;
  158. margin-top:-370px;
  159. margin-left:-250px;
  160. width:240px;
  161. padding-top:40px;
  162. position:fixed;
  163. overflow:hidden;
  164. display:inline-block;
  165. background-image: url("{text:Sidebar Image URL}");
  166. background-size:cover;
  167. background-repeat:no-repeat;
  168. background-position:top;
  169. -webkit-transition:0.5s;
  170. -moz-transition:0.5s;
  171. -ms-transition:0.5s;
  172. -o-transition:0.5s;
  173. transition:0.5s;
  174. }
  175. .reveal {
  176. width:240px;
  177. margin-left:-10px;
  178. overflow:scroll;
  179. -webkit-transition:0.5s;
  180. -moz-transition:0.5s;
  181. -ms-transition:0.5s;
  182. -o-transition:0.5s;
  183. transition:0.5s;
  184. }
  185.  
  186. #description {
  187. padding:18px;
  188. margin-right:18px;
  189. margin-left:18px;
  190. background-color:#fff;
  191. opacity:0.5;
  192. }
  193. .links a {
  194. padding:10px;
  195. margin-right:18px;
  196. margin-left:18px;
  197. margin-top:18px;
  198. display:block;
  199. background-color:{color:Square};
  200. opacity:0.5;
  201. color:{color:Header Text};
  202. letter-spacing:2px;
  203. font-weight:500;
  204. }
  205.  
  206. .posts {
  207. text-align:center;
  208. margin-bottom:100px;
  209. }
  210.  
  211. .quote {
  212. font-size:8px;
  213. }
  214. li {
  215. list-style:square;
  216. text-align:left;
  217. }
  218.  
  219. .tags {
  220. margin-top:10px;
  221. padding:10px;
  222. font-size:8px;
  223. }
  224. blockquote {
  225. border:1px {color:Borders} solid;
  226. padding:10px;
  227. width:400px;
  228. margin-left:auto;
  229. margin-right:auto;
  230. }
  231. .audioinfo {
  232. padding:10px;
  233. }
  234. .pcount {
  235. margin-top:10px;
  236. }
  237. .cover {
  238. width:220px;
  239. position:relative;
  240. z-index:1;
  241. }
  242. .playbutton {
  243. width:20px;
  244. height:30px;
  245. overflow:hidden;
  246. position:relative;
  247. z-index:5;
  248. margin: 15px 24px 13px 16px;
  249. }
  250. .playbox {
  251. background-color:#000;
  252. position:absolute;
  253. z-index:5;
  254. width:55px;
  255. margin-left:140px;
  256. opacity:0.5;
  257.  
  258. }
  259. .nav {
  260. margin-left:auto;
  261. margin-right:auto;
  262. padding:10px;
  263. border:1px solid {color:Borders};
  264. text-align:center;
  265. width:200px;
  266. }
  267.  
  268. .nav {
  269. margin-left:auto;
  270. margin-right:auto;
  271. padding:10px;
  272. border:1px solid #ccc;
  273. text-align:center;
  274. width:200px;
  275. }
  276.  
  277. .notes li:nth-child(odd) {
  278. background-color:#F6F6F6;
  279. color:#222;
  280. padding:5px;
  281. list-style:upper-roman;
  282. }
  283. .notes li:nth-child(even) {
  284. background-color: {color:Background} ;
  285. color:#888;
  286. padding:5px;
  287. list-style:upper-roman;
  288. }
  289.  
  290. ol {
  291. list-style:decimal-leading-zero;
  292. text-align:left;
  293. }
  294. ul {
  295. list-style:square;
  296. text-align:left;
  297. }
  298. .notes li: {
  299. list-style:upper-roman;
  300. padding:10px;
  301. }
  302. .audioinfo {
  303. text-align:center;
  304. background:#000;
  305. color:{color:Background};
  306. width:200px;
  307. left:50%;
  308. margin-left:-110px;
  309. margin-top:-65px;
  310. padding-top:-5px;
  311. padding-bottom:-5px;
  312. z-index:9999999999;
  313. opacity:0.5;
  314. position:absolute;
  315. }
  316. .q {
  317. max-width:400px;
  318. margin-left:auto;
  319. margin-right:auto;
  320. }
  321. .linkname {
  322. background-color:{color:Link};
  323. padding:10px;
  324. color:#fff;
  325. font-size:14px;
  326. text-align:right;
  327. -webkit-transition:0.5s;
  328. -moz-transition:0.5s;
  329. -ms-transition:0.5s;
  330. -o-transition:0.5s;
  331. transition:0.5s;
  332. }
  333. .linkname:hover {
  334. color:{color:Link Hover};
  335. -webkit-transition:0.5s;
  336. -moz-transition:0.5s;
  337. -ms-transition:0.5s;
  338. -o-transition:0.5s;
  339. transition:0.5s;
  340. }
  341. .linkdesc {
  342. border:1px solid {color:Borders};
  343. padding:10px;
  344. margin:10px;
  345. }
  346. </style>
  347.  
  348. </head>
  349.  
  350.  
  351.  
  352. <body>
  353.  
  354.  
  355.  
  356. <div class="header">
  357. <div id="title"><a href="/">{Title}</a></div>
  358.  
  359.  
  360. <div id="link">
  361. <div class="click"><a><img src="https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/menu-20.png"/></a></div>
  362.  
  363. </div>
  364.  
  365. </div>
  366.  
  367. <!--script for sidebar-->
  368. <script>
  369. $(document).ready(function(){
  370. $(".click").click(function(){
  371. $(".menubar").toggleClass("reveal");
  372. });
  373. });
  374. </script>
  375.  
  376. <!--script-->
  377.  
  378. <div class="menubar">
  379. <div id="description">{Description}</div>
  380. <div class="links">
  381.  
  382. <a href="{text:Link 1 URL}">{text:Link 1 Title}</a>
  383. <a href="{text:Link 2 URL}">{text:Link 2 Title}</a>
  384. <a href="{text:Link 3 URL}">{text:Link 3 Title}</a>
  385. <a href="{text:Link 4 URL}">{text:Link 4 Title}</a>
  386. <a href="{text:Link 5 URL}">{text:Link 5 Title}</a>
  387. <a href="{text:Link 6 URL}">{text:Link 6 Title}</a>
  388. <a href="{text:Link 7 URL}">{text:Link 7 Title}</a>
  389. </div>
  390.  
  391. </div>
  392.  
  393. <div class="block">
  394. <div class="container">
  395. <div class="postcol">
  396. {block:Posts}
  397. <div class="posts">
  398.  
  399. {block:Text}
  400. {block:Title}<h2>{Title}</h2>{/block:Title}
  401. {Body}
  402. {block:HasTags}
  403. <div class="tags">
  404. {block:Tags}
  405. <a href="{TagURL}">#{Tag}</a>
  406. {/block:Tags}
  407. </div>
  408. {/block:HasTags}</p>
  409. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  410. {/block:Text}
  411. {block:Link}
  412. <a href="{URL}"><div class="linkname">{Name} &rarr;</div></a>
  413. {block:Description}
  414. <div class="linkdesc">
  415. {Description}
  416. </div>
  417. {/block:Description}
  418. <a class="date" style="margin-top:10px" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  419. {/block:Link}
  420.  
  421. {block:Answer}
  422. <div class="q">
  423. <div class="question">
  424. <h2>{Question}</h2>
  425. a question by {Asker}
  426. </div>
  427. <div class="quest">
  428. {Answer}
  429. </div>
  430. </div>
  431. {block:HasTags}
  432. <div class="tags">
  433. {block:Tags}
  434. <a href="{TagURL}">#{Tag}</a>
  435. {/block:Tags}
  436. </div>
  437. {/block:HasTags}</p>
  438. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  439. {/block:Answer}
  440.  
  441. {block:Quote}
  442. <div class="quote" style="margin-top:60px; border:1px solid #ccc; padding:30px; width:400px; margin-left:auto; margin-right:auto;">
  443. <div class="quotetext_{Length}"><h1>"{Quote}"</h1></div>
  444. {block:Source}<div class="source"> - {Source}</div>{/block:Source}
  445. </div>
  446. {block:HasTags}
  447. <div class="tags">
  448. {block:Tags}
  449. <a href="{TagURL}">#{Tag}</a>
  450. {/block:Tags}
  451. </div>
  452. {/block:HasTags}</p>
  453. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  454. {/block:Quote}
  455.  
  456. {block:Photoset}
  457. {Photoset-500}
  458. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}</div>
  459. {block:HasTags}
  460. <div class="tags">
  461. {block:Tags}
  462. <a href="{TagURL}">#{Tag}</a>
  463. {/block:Tags}
  464. </div>
  465. {/block:HasTags}
  466. </div>
  467. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>{/block:Caption}
  468. {/block:Photoset}
  469.  
  470. {block:Photo}
  471. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px">{LinkCloseTag}
  472. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}</div>
  473. {block:HasTags}
  474. <div class="tags">
  475. {block:Tags}
  476. <a href="{TagURL}">#{Tag}</a>
  477. {/block:Tags}
  478. </div>
  479. {/block:HasTags}
  480. </p>
  481. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  482. </div>
  483. </div>{/block:Caption}
  484. {/block:Photo}
  485.  
  486. {block:Audio}
  487. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack} {/block:AudioPlayer}</div></div>
  488. {block:AlbumArt}
  489. <img src="{AlbumArtURL}" class="cover">
  490. {/block:AlbumArt}
  491. <div class="audioinfo">
  492. {block:TrackName}{TrackName}</br>{/block:TrackName}
  493. {block:Artist}Artist: {Artist}</br>{/block:Artist}
  494. {block:Album}Album: {Album}</br>{/block:Album}
  495. </div>
  496. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}</div>
  497. {block:HasTags}
  498. <div class="tags">
  499. {block:Tags}
  500. <a href="{TagURL}">#{Tag}</a>
  501. {/block:Tags}
  502. </div>
  503. {/block:HasTags}
  504. </div>
  505. <a class="date" href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>{/block:Caption}
  506. {/block:Audio}
  507.  
  508. {block:Video}
  509. {Video-500}
  510. {block:Caption}{Caption}{/block:Caption}
  511. {/block:Video}
  512.  
  513. </div>
  514. {/block:Posts}
  515.  
  516.  
  517.  
  518. <div class="permalink">
  519. {block:PermalinkPage}
  520. {Post}
  521. <div class="ncount">
  522. {NoteCount}
  523. </div>
  524. {block:PostNotes}
  525. <div class"notes">
  526. {PostNotes}
  527. </div>
  528. {/block:PostNotes}
  529.  
  530. {/block:PermalinkPage}
  531.  
  532. </div>
  533.  
  534. {block:Pagination}
  535. <div class="nav">
  536. {block:PreviousPage}<a href="{PreviousPage}">aft</a>{/block:PreviousPage}
  537. {block:NextPage}<a href="{NextPage}">fore</a>{/block:NextPage}
  538. </div>
  539. {/block:Pagination}
  540. </div>
  541. </div>
  542.  
  543. </div>
  544.  
  545. <div class="credit">
  546. <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>
  547. </body>
  548.  
  549.  
  550. </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!