API tools faq
paste
Advertisement
aryasnark

aryasnark - Theme 14

aryasnark
May 16th, 2015
1,915
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--
  6.  
  7. THEME 14 by ARYASNARK
  8.  
  9. Copyright © Aryasnark 2014 All Rights Reserved. No part of this website may be reproduced without my express consent.
  10.  
  11. -->
  12.  
  13. <head>
  14. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  18.  
  19.  
  20. <meta name="color:background" content="#ffffff">
  21. <meta name="color:title" content ="#3b3b3b">
  22. <meta name="color:title hover" content ="#dddddd">
  23. <meta name="color:text" content="#3b3b3b">
  24. <meta name="color:tags" content="#3b3b3b">
  25. <meta name="color:tags hover" content="#3b3b3b">
  26. <meta name="color:link" content="#3b3b3b">
  27. <meta name="color:link hover" content="#dddddd">
  28. <meta name="color:sidelink" content="#3b3b3b">
  29. <meta name="color:sidelink hover" content="#dddddd">
  30. <meta name="color:border" content="#f4f4f4">
  31. <meta name="color:info bg" content="#f4f4f4">
  32. <meta name="color:scrollbar" content="#dddddd">
  33. <meta name="color:scrollbar bg" content="#ffffff">
  34.  
  35. <meta name="if:400px" content="1"/>
  36. <meta name="if:500px" content="0"/>
  37. <meta name="if:avatar" content="0"/>
  38. <meta name="text:username" content=""/>
  39. <meta name="text:main tab" content="main"/>
  40. <meta name="text:tab 1" content="description"/>
  41. <meta name="text:tab 1 title" content=""/>
  42. <meta name="text:tab 2" content=""/>
  43. <meta name="text:tab 2 title" content=""/>
  44. <meta name="text:tab 3" content=""/>
  45. <meta name="text:tab 3 title" content=""/>
  46. <meta name="text:ask tab" content="ask"/>
  47.  
  48. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script src="http://static.tumblr.com/ktebk5j/Ytcnigngm/cbpfwtabs.js"></script>
  50.  
  51.  
  52.  
  53. <style type="text/css">
  54.  
  55. ::-webkit-scrollbar{
  56. width:11px;
  57. height:11px;
  58. }
  59.  
  60. ::-webkit-scrollbar-track {
  61. background-color:{color:scrollbar bg};
  62. cursor:pointer;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb{
  66. border:5px solid {color:scrollbar bg};
  67. background-color:{color:scrollbar};
  68. }
  69.  
  70. ::-webkit-scrollbar-track-piece {
  71. height:30px;
  72. width: 30px;
  73. }
  74.  
  75. body {
  76. margin:0px;
  77. padding:0px;
  78. font-size:10px;
  79. font-family:times new roman;
  80. font-weight:300;
  81. background:{color:background};
  82. line height:175%;
  83. letter-spacing:1px;
  84. }
  85.  
  86. a:link, a, a:active, a:visited {
  87. text-decoration:none;
  88. color:{color:link};
  89. transition-duration: 0.6s;
  90. -moz-transition-duration: 0.6s;
  91. -webkit-transition-duration: 0.6s;
  92. -o-transition-duration: 0.6s;
  93. }
  94. a:hover {
  95. color:{color:link hover};
  96. transition-duration: 0.6s;
  97. -moz-transition-duration: 0.6s;
  98. -webkit-transition-duration: 0.6s;
  99. -o-transition-duration: 0.6s;
  100. }
  101.  
  102. p {margin-bottom:10px;}
  103.  
  104. p img {
  105. max-width:400px;
  106. {block:if500px}
  107. max-width:500px;
  108. {/block:if500px}
  109. }
  110.  
  111. .text img {
  112. max-width:400px;
  113. height:auto;
  114. {block:if500px}
  115. max-width:500px;
  116. {/block:if500px}
  117. }
  118.  
  119. ul {
  120. list-style-position: inside;
  121. list-style-type:circle;
  122. }
  123.  
  124. #topbar {
  125. width:540px;
  126. margin:20px auto;
  127. top:0;
  128. height:40px;
  129. background:white;
  130. {block:if500px}
  131. width:640px;
  132. {/block:if500px}
  133.  
  134. }
  135.  
  136. .blogtitle {
  137. text-align:center;
  138. font-size:16px;
  139. line-height:230%;
  140. padding:5px;
  141. padding-bottom:0px;
  142. letter-spacing:2px;
  143. text-transform:uppercase;
  144. font-weight:300;
  145. background:transparent;
  146. }
  147.  
  148. .blogtitle a {
  149. color:{color:title};
  150. transition-duration: 0.6s;
  151. -moz-transition-duration: 0.6s;
  152. -webkit-transition-duration: 0.6s;
  153. -o-transition-duration: 0.6s;
  154. }
  155.  
  156. .blogtitle a:hover {
  157. color:{color:title hover};
  158. transition-duration: 0.6s;
  159. -moz-transition-duration: 0.6s;
  160. -webkit-transition-duration: 0.6s;
  161. -o-transition-duration: 0.6s;
  162. }
  163.  
  164. #icon img{
  165. width:54px;
  166. height:54px;
  167. margin:0 auto 15px auto;
  168. display: block;
  169. -moz-border-radius:100%;
  170. -webkit-border-radius:100%;
  171. border-radius:100%;
  172. }
  173.  
  174. /*Tabs*/
  175. #title {
  176. font-size:15px;
  177. text-transform:uppercase;
  178. letter-spacing:2px;
  179. text-align:center;
  180. padding:20px;
  181. padding-bottom:10px;
  182. line-height:150%;
  183. color:{color:text};
  184. font-weight:300;
  185. }
  186.  
  187. #content {
  188. font-size:10px;
  189. line-height:200%;
  190. text-align:left;
  191. padding:20px;
  192. padding-top:10px;
  193. letter-spacing:1px;
  194. border:1px dashed white;
  195. transition-duration: 0.6s;
  196. -moz-transition-duration: 0.6s;
  197. -webkit-transition-duration: 0.6s;
  198. -o-transition-duration: 0.6s;
  199. }
  200.  
  201. #content a {
  202. color:{color:link};
  203. text-decoration:underline;
  204. transition-duration: 0.6s;
  205. -moz-transition-duration: 0.6s;
  206. -webkit-transition-duration: 0.6s;
  207. -o-transition-duration: 0.6s;
  208. }
  209.  
  210. #content a:hover {
  211. color:{color:link hover};
  212. }
  213.  
  214. .content h1 {
  215. text-align:left!important;
  216. font-size:12px;
  217. letter-spacing:1px;
  218. text-align:center;
  219. margin-bottom:0px;
  220. text-transform:uppercase;
  221. }
  222. .content h1 a {
  223. color:{color:link}!important;
  224. }
  225. .content h1 a:hover {
  226. color:{color:link hover}!important;
  227. }
  228.  
  229. /*Posts*/
  230.  
  231. #pagination {
  232. width:400px;
  233. position:relative;
  234. margin:0 auto;
  235. bottom:0px;
  236. margin-top:-50px;
  237. font-size:10px;
  238. text-align:center;
  239. letter-spacing:3px;
  240. font-weight:400;
  241. z-index:10000;
  242. padding-top:3px;
  243. border-top:1px solid {color:border};
  244. {block:if500px}
  245. width:500px;
  246. {/block:if500px}
  247. }
  248. #pagination a {
  249. padding-top:5px;
  250. color:{color:sidelink};
  251. text-decoration:none;
  252. transition-duration: 0.6s;
  253. -moz-transition-duration: 0.6s;
  254. -webkit-transition-duration: 0.6s;
  255. -o-transition-duration: 0.6s;
  256. }
  257. #pagination a:hover {
  258. color:{color:sidelink hover};
  259. }
  260. .jump_page {
  261. padding:5px 15px 5px 15px;
  262. color:{color:sidelink};
  263. border-top:1px solid {color:border};
  264. }
  265. .jump_page:hover {
  266. color:{color:sidelink hover};
  267. }
  268. .current_page {
  269. padding:5px 15px 5px 17px;
  270. color:{color:sidelink};
  271. border-top:1px solid {color:background};
  272. }
  273.  
  274. #entry {
  275. margin-left:40px;
  276. margin-top:20px;
  277. width:440px;
  278. {block:if500px}
  279. width:550px;
  280. {/block:if500px}
  281. }
  282.  
  283. .post {
  284. position:relative;
  285. overflow:hidden;
  286. text-align:center;
  287. margin-top:20px;
  288. padding-left:20px;
  289. padding-bottom:0px;
  290. width:400px;
  291. {block:if500px}
  292. width:500px;
  293. {/block:if500px}
  294. }
  295.  
  296. .date {
  297. position:absolute;
  298. font-size:10px;
  299. font-style:none;
  300. text-align:center;
  301. letter-spacing:1px;
  302. line-height:150%;
  303. text-transform:uppercase;
  304. font-weight:400;
  305. top:47%;
  306. margin-left:-215px;
  307. width:400px;
  308. color:{color:text};
  309. -ms-transform: rotate(-90deg);
  310. -moz-transform: rotate(-90deg);
  311. -o-transform: rotate(-90deg);
  312. -webkit-transform: rotate(-90deg);
  313. transform: rotate(-90deg);
  314. transition-duration: 0.6s;
  315. -moz-transition-duration: 0.6s;
  316. -webkit-transition-duration: 0.6s;
  317. -o-transition-duration: 0.6s;
  318. {block:if500px}
  319. margin-left:-260px;
  320. width:500px;
  321. font-size:10px;
  322. {/block:if500px}
  323. }
  324.  
  325. .date a {
  326. text-decoration:none!important;
  327. color:{color:text};
  328. padding:5px;
  329. border-bottom:1px solid transparent;
  330. }
  331. .date a:hover {
  332. color:{color:text};
  333. }
  334.  
  335.  
  336. .perminfo {
  337. width:400px;
  338. margin-left:0px;
  339. text-align:left;
  340. margin-bottom:200px;
  341. margin-top:10px;
  342. line-height:200%;
  343. text-transform:none;
  344. {block:PermalinkPage}
  345. margin-bottom:50px;
  346. {/block:PermalinkPage}
  347. font-size:10px;
  348. {block:if500px}
  349. width:500px;
  350. {/block:if500px}
  351. }
  352.  
  353. .perminfo a {
  354. color:{color:link};
  355. }
  356. .perminfo a:hover {
  357. color:{color:link hover};
  358. text-decoration:underline;
  359. }
  360.  
  361. #info {
  362. width:400px;
  363. margin-left:20px;
  364. text-align:left;
  365. margin-bottom:100px;
  366. margin-top:0px;
  367. {block:PermalinkPage}
  368. margin-bottom:100px;
  369. {/block:PermalinkPage}
  370. font-size:10px;
  371. {block:if500px}
  372. width:500px;
  373. {/block:if500px}
  374. }
  375.  
  376. {block:PermalinkPage}
  377. #info a {
  378. color:{color:link};
  379. text-decoration:underline;
  380. }
  381. #info a:hover {
  382. color:{color:link hover};
  383. }
  384. {/block:PermalinkPage}
  385.  
  386.  
  387. .tags {
  388. font-size:9px;
  389. font-style:none;
  390. text-align:center;
  391. letter-spacing:1px;
  392. line-height:200%;
  393. text-transform:none;
  394. padding-top:20px;
  395. font-weight:300;
  396. {block:indexpage}
  397. color:{color:tags};
  398. {/block:indexpage}
  399. {block:permalinkpage}
  400. color:{color:text};
  401. {/block:permalinkpage}
  402. padding-bottom:50px;
  403. transition-duration: 0.3s;
  404. -moz-transition-duration: 0.3s;
  405. -webkit-transition-duration: 0.3s;
  406. -o-transition-duration: 0.3s;
  407. }
  408.  
  409. .tags a {
  410. color:{color:tags}!important;
  411. margin-right:15px;
  412. text-decoration:none!important;
  413. }
  414.  
  415. .tags a:hover {
  416. color:{color:tags hover};
  417. text-decoration:underline!important;
  418. }
  419.  
  420. .caption {
  421. width:390px;
  422. {block:if500px}
  423. width:490px;
  424. {/block:if500px}
  425. font-size:10px;
  426. display:block;
  427. padding:3px 10px 3px 0px;
  428. margin-top:10px;
  429. text-align:right;
  430. border-right:1px solid {color:border};
  431. line-height:175%;
  432. color:{color:text};
  433. transition-duration: 0.6s;
  434. -moz-transition-duration: 0.6s;
  435. -webkit-transition-duration: 0.6s;
  436. -o-transition-duration: 0.6s;
  437. }
  438.  
  439. .caption img {
  440. max-width:360px;
  441. {block:if500px}
  442. width:460px;
  443. {/block:if500px}
  444. }
  445. .caption a {
  446. color:{color:link};
  447. text-decoration:underline;
  448. }
  449. .caption a:hover {
  450. color:{color:link hover};
  451. }
  452. blockquote {
  453. padding-right:10px;
  454. margin-right:0px;
  455. border-right:1px solid transparent;
  456. }
  457.  
  458. h1 {
  459. text-transform:uppercase;
  460. color:{color:title};
  461. letter-spacing:3px;
  462. font-size:14px;
  463. text-align:center;
  464. margin-bottom:-10px;
  465. transition-duration: 0.6s;
  466. -moz-transition-duration: 0.6s;
  467. -webkit-transition-duration: 0.6s;
  468. -o-transition-duration: 0.6s;
  469. }
  470. h1 a {
  471. color:{color:link};
  472. }
  473. h1 a:hover {
  474. color:{color:link hover};
  475. }
  476.  
  477. .desc {
  478. font-size:10px;
  479. letter-spacing:1px;
  480. line-height:175%;
  481. padding:20px 0px 15px 20px;
  482. text-align:left;
  483. transition-duration: 0.6s;
  484. -moz-transition-duration: 0.6s;
  485. -webkit-transition-duration: 0.6s;
  486. -o-transition-duration: 0.6s;
  487. }
  488.  
  489. .desc a {
  490. color:{color:link};
  491. text-decoration:underline;
  492. transition-duration: 0.6s;
  493. -moz-transition-duration: 0.6s;
  494. -webkit-transition-duration: 0.6s;
  495. -o-transition-duration: 0.6s;
  496. }
  497.  
  498. .desc a:hover {
  499. color:{color:link hover};
  500. text-decoration:underline;
  501. transition-duration: 0.6s;
  502. -moz-transition-duration: 0.6s;
  503. -webkit-transition-duration: 0.6s;
  504. -o-transition-duration: 0.6s;
  505. }
  506.  
  507. .desc:hover {
  508. {block:indexpage}
  509.  
  510. {/block:indexpage}
  511. }
  512.  
  513. #line:before {content: "";
  514. height:1px;
  515. width:30px;
  516. display:inline-block;
  517. margin-right:10px;
  518. margin-left:0px;
  519. margin-bottom:4px;
  520. background-color:{color:border};
  521. transition-duration: 0.6s;
  522. -moz-transition-duration: 0.6s;
  523. -webkit-transition-duration: 0.6s;
  524. -o-transition-duration: 0.6s;
  525. }
  526.  
  527. h1:hover #line:before {
  528. background-color:{color:border};
  529. }
  530.  
  531.  
  532. .quote {
  533. font-size:10px;
  534. font-style:none;
  535. text-align:left;
  536. letter-spacing:1px;
  537. line-height:175%;
  538. padding:15px 10px 15px 20px;
  539. margin-top:0px;
  540. text-transform:none;
  541. {block:indexpage}
  542. border:1px solid {color:border};
  543. {/block:indexpage}
  544. transition-duration: 0.6s;
  545. -moz-transition-duration: 0.6s;
  546. -webkit-transition-duration: 0.6s;
  547. -o-transition-duration: 0.6s;
  548. }
  549. .quote:hover {
  550. {block:indexpage}
  551.  
  552. {/block:indexpage}
  553. }
  554.  
  555. #source {
  556. font-size:9px;
  557. text-transform:uppercase;
  558. letter-spacing:2.5px;
  559. text-align:left;
  560. padding:0px 0px 5px 0px;
  561. line-height:200%;
  562. color:{color:text};
  563. font-weight:400;
  564. {block:indexpage}
  565. width:400px;
  566. {/block:indexpage}
  567. {block:if500px}
  568. padding-bottom:10px;
  569. {/block:if500px}
  570. }
  571. #source:hover #qline:before {
  572. background-color:{color:border};
  573. }
  574. #source a {
  575. color:{color:link};
  576. text-decoration:none;
  577. }
  578. #source a:hover {
  579. color:{color:link hover};
  580. }
  581.  
  582. #qline:before {content: "";
  583. height:1px;
  584. width:30px;
  585. display:inline-block;
  586. margin-right:10px;
  587. margin-left:0px;
  588. margin-bottom:3px;
  589. background-color:{color:border};
  590. transition-duration: 0.6s;
  591. -moz-transition-duration: 0.6s;
  592. -webkit-transition-duration: 0.6s;
  593. -o-transition-duration: 0.6s;
  594. }
  595.  
  596. .asker {
  597. font-size:9px;
  598. text-transform:uppercase;
  599. letter-spacing:2.5px;
  600. text-align:right;
  601. padding:5px 0px 10px 0px;
  602. line-height:150%;
  603. color:{color:text};
  604. font-weight:600;
  605. {block:if500px}
  606. padding-bottom:10px;
  607. {/block:if500px}
  608. }
  609.  
  610. .asker a {
  611. color:{color:text};
  612. }
  613. .asker:hover #qline:before {
  614. background-color:{color:border};
  615. }
  616.  
  617. .asked {
  618. font-size:10px;
  619. font-style:none;
  620. text-align:left;
  621. letter-spacing:1px;
  622. line-height:175%;
  623. font-weight:300;
  624. padding:15px 10px 15px 10px;
  625. text-transform:none;
  626. border:1px solid {color:border};
  627. }
  628.  
  629. .asked:hover #qline:before {
  630. background-color:{color:border};
  631. }
  632.  
  633. .answer {
  634. font-size:10px;
  635. font-style:none;
  636. text-align:left;
  637. letter-spacing:1px;
  638. line-height:175%;
  639. padding:5px 0px 5px 0px;
  640. margin-top:0px;
  641. text-transform:none;
  642. transition-duration: 0.6s;
  643. -moz-transition-duration: 0.6s;
  644. -webkit-transition-duration: 0.6s;
  645. -o-transition-duration: 0.6s;
  646. }
  647. .answer:hover {
  648. }
  649.  
  650. .answer a {
  651. text-decoration:underline;
  652. }
  653. .answer a:hover {
  654. text-decoration:underline;
  655. }
  656.  
  657. .answer img {
  658. max-width:380px;
  659. {block:ifsingle}
  660. {block:if500px}
  661. width:480px;
  662. {/block:if500px}
  663. {/block:ifsingle}
  664. }
  665.  
  666. .playbutton {
  667. width:20px;
  668. height:30px;
  669. overflow:hidden;
  670. position:relative;
  671. opacity:0.7;
  672. margin:9px 18px 7px 10px;
  673. }
  674.  
  675. .playbox {
  676. margin-top:14px;
  677. margin-left:13px;
  678. opacity:0.7;
  679. position: absolute;
  680. border:1px solid {color:border};
  681. }
  682.  
  683. .audiodata {
  684. font-size:10px;
  685. letter-spacing:2px;
  686. color:{color:text};
  687. padding:6px 10px 10px 10px;
  688. text-transform:uppercase;
  689. line-height:150%;
  690. height:55px;
  691. width:305px;
  692. margin-top:0px;
  693. margin-left:75px;
  694. text-align:right;
  695. {block:if500px}
  696. width:405px;
  697. {/block:if500px}
  698. }
  699.  
  700.  
  701.  
  702. ol.notes {
  703. margin-top:10px;
  704. padding-bottom:1%;
  705. width:360px;
  706. margin-left:0px;
  707. list-style-type:lower-roman;
  708. text-align:left;
  709. text-transform:lowercase;
  710. line-height:200%;
  711. font-size:10px;
  712. {block:if500px}
  713. width:460px;
  714. {/block:if500px}
  715. }
  716.  
  717. ol.notes a {
  718. color:{color:link};
  719. text-decoration:underline;
  720. }
  721. ol.notes a:hover {
  722. color:{color:link hover};
  723. }
  724.  
  725. ol.notes li.note{
  726. padding:1%;
  727. }
  728.  
  729. ol.notes li.note img.avatar{
  730. width:0px;
  731. height:0px;
  732. }
  733.  
  734. #credit {
  735. bottom:0;
  736. right:0;
  737. text-align:center;
  738. font-size:7px;
  739. letter-spacing:3px;
  740. opacity:0.3;
  741. line-height:250%;
  742. position:fixed;
  743. padding:5px;
  744. }
  745.  
  746.  
  747.  
  748. iframe#tumblr_controls {
  749. top:5px;
  750. right:10px!important;
  751. position:fixed !important;
  752. -webkit-filter: invert(1);
  753. opacity:.6;
  754. filter:alpha(opacity=60);
  755. -moz-opacity:.6;
  756. }
  757.  
  758. /*Tabs*/
  759.  
  760. .tabs {
  761. position: relative;
  762. width: 100%;
  763. overflow: hidden;
  764. margin: 0.75em 0 2em;
  765. font-weight: 300;
  766. }
  767.  
  768. /* Nav */
  769. .tabs nav {
  770. text-align: center;
  771. }
  772.  
  773. .tabs nav ul {
  774. padding: 0;
  775. margin: 0;
  776. list-style: none;
  777. display: inline-block;
  778. }
  779.  
  780. .tabs nav ul li {
  781. border-bottom: none;
  782. margin: 0 0.25em;
  783. display: block;
  784. float: left;
  785. position: relative;
  786. }
  787.  
  788. .tabs nav li.tab-current {
  789. border: 1px solid {color:border};
  790. border-bottom: none;
  791. z-index: 100;
  792. }
  793.  
  794. .tabs nav li.tab-current:before,
  795. .tabs nav li.tab-current:after {
  796. content: '';
  797. position: absolute;
  798. height: 1px;
  799. right: 100%;
  800. bottom: 0;
  801. width: 1000px;
  802. background: {color:border};
  803. }
  804.  
  805. .tabs nav li.tab-current:after {
  806. right: auto;
  807. left: 100%;
  808. width: 4000px;
  809. }
  810.  
  811. .tabs nav a {
  812. color: {color:sidelink};
  813. display: block;
  814. font-size: 10px;
  815. line-height: 2.5;
  816. padding: 0 1.25em;
  817. white-space: nowrap;
  818. }
  819.  
  820. .tabs nav a:hover {
  821. color: {color:sidelink hover};
  822. }
  823.  
  824. .tabs nav li.tab-current a {
  825. color: {color:sidelink};
  826. }
  827.  
  828. /* Content */
  829. .content section {
  830. padding:10px;
  831. padding-bottom:0px;
  832. line-height:150%;
  833. display: none;
  834. width:520px;
  835. {block:if500px}
  836. width:620px;
  837. {/block:if500px}
  838. margin: 0 ;
  839. overflow:scroll;
  840. height:530px;
  841. transition-duration: 0.3s;
  842. -moz-transition-duration: 0.3s;
  843. -webkit-transition-duration: 0.3s;
  844. -o-transition-duration: 0.3s;
  845. }
  846.  
  847. .content section:before,
  848. .content section:after {
  849. content: '';
  850. display: table;
  851. }
  852.  
  853. .content section:after {
  854. clear: both;
  855. }
  856.  
  857.  
  858.  
  859. /* Fallback example */
  860. .no-js .content section {
  861. display: block;
  862. padding-bottom: 2em;
  863. border-bottom: 1px solid #47a3da;
  864. }
  865.  
  866. .content section.content-current {
  867. display: block;
  868. }
  869.  
  870. .mediabox {
  871. float: left;
  872. width: 100%;
  873. padding: 0 25px;
  874. }
  875.  
  876. .mediabox img {
  877. max-width: 100%;
  878. display: block;
  879. margin: 0 auto;
  880. }
  881.  
  882. .mediabox h3 {
  883. margin: 0.75em 0 0.5em;
  884. }
  885.  
  886. .mediabox p {
  887. padding: 0 0 1em 0;
  888. margin: 0;
  889. line-height: 1.3;
  890. }
  891.  
  892. /* Example media queries */
  893.  
  894. @media screen and (max-width: 52.375em) {
  895. .tabs nav a span {
  896. display: none;
  897. }
  898.  
  899. .tabs nav a:before {
  900. margin-right: 0;
  901. }
  902.  
  903. .mediabox {
  904. float: none;
  905. width: auto;
  906. padding: 0 0 35px 0;
  907. font-size: 90%;
  908. }
  909.  
  910. .mediabox img {
  911. float: left;
  912. margin: 0 25px 10px 0;
  913. max-width: 40%;
  914. }
  915.  
  916. .mediabox h3 {
  917. margin-top: 0;
  918. }
  919.  
  920. .mediabox p {
  921. margin-left: 40%;
  922. margin-left: calc(40% + 25px);
  923. }
  924.  
  925. .mediabox:before,
  926. .mediabox:after {
  927. content: '';
  928. display: table;
  929. }
  930.  
  931. .mediabox:after {
  932. clear: both;
  933. }
  934. }
  935.  
  936. @media screen and (max-width: 32em) {
  937. .tabs nav ul,
  938. .tabs nav ul li a {
  939. width: 100%;
  940. padding: 0;
  941. }
  942.  
  943. .tabs nav ul li {
  944. width: 20%;
  945. width: calc(20% + 1px);
  946. margin: 0 0 0 -1px;
  947. }
  948.  
  949. .tabs nav ul li:last-child {
  950. border-right: none;
  951. }
  952.  
  953. .mediabox {
  954. text-align: center;
  955. }
  956.  
  957. .mediabox img {
  958. float: none;
  959. margin: 0 auto;
  960. max-width: 100%;
  961. }
  962.  
  963. .mediabox h3 {
  964. margin: 1.25em 0 1em;
  965. }
  966.  
  967. .mediabox p {
  968. margin: 0;
  969. }
  970. }
  971.  
  972.  
  973. </style></head>
  974.  
  975.  
  976. <body>
  977. <div id="topbar">
  978. <div class="blogtitle">
  979. <a href="/">{Title}</a></div>
  980. <div id="tabs" class="tabs">
  981. <nav>
  982. <ul>
  983. <li><a href="#section-1"><span>{text:main tab}</span></a></li>
  984. <li><a href="#section-2"><span>{text:tab 1}</span></a></li>
  985. {block:iftab2}<li><a href="#section-3"><span>{text:tab 2}</span></a></li>{/block:iftab2}
  986. {block:iftab3}<li><a href="#section-4"><span>{text:tab 3}</span></a></li>{/block:iftab3}
  987. <li><a href="#section-5"><span>{text:ask tab}</span></a></li>
  988. </ul>
  989. </nav>
  990. <div class="content">
  991. <section id="section-1">
  992. <!-- MAIN TAB CONTENT BEGINS -->
  993. <div id="posts">
  994. <!----- ENTRIES ----->
  995.  
  996.  
  997. <div id="entry">
  998. {block:TagPage}
  999. <span><center><a href="javascript:javascript:history.go(-1)"><big>← BACK</big></a></center></span>
  1000. <br>
  1001. <br>
  1002. {/block:TagPage}
  1003.  
  1004. {block:Posts}
  1005.  
  1006. <div class="post">
  1007.  
  1008. {block:permalinkpage}<a href="javascript:javascript:history.go(-1)"><big>← BACK</big></a>
  1009. <br>
  1010. <br>
  1011. {/block:permalinkpage}
  1012.  
  1013. {block:Text}
  1014.  
  1015. {block:IndexPage}
  1016. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1017. {/block:IndexPage}
  1018.  
  1019. {block:Title}<h1><a href="{Permalink}" id="line">{Title}</a></h1>{/block:Title}
  1020.  
  1021. <div class="desc">{Body}</div>
  1022. {/block:Text}
  1023.  
  1024.  
  1025. {block:Photo}
  1026.  
  1027. {block:IndexPage}
  1028. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1029. {/block:IndexPage}
  1030.  
  1031. {block:if400px}
  1032. <center><a href="{Permalink}"><img src="{PhotoURL-400}"></a></center>
  1033. {/block:if400px}
  1034. {block:if500px}
  1035. <center><a href="{Permalink}"><img src="{PhotoURL-500}"></a></center>
  1036. {/block:if500px}
  1037.  
  1038.  
  1039. {/block:Photo}
  1040.  
  1041.  
  1042. {block:Photoset}
  1043.  
  1044. {block:IndexPage}
  1045. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1046. {/block:IndexPage}
  1047.  
  1048. {block:if400px}
  1049. {Photoset-400}
  1050. {/block:if400px}
  1051. {block:if500px}
  1052. {Photoset-500}
  1053. {/block:if500px}
  1054.  
  1055. {/block:Photoset}
  1056.  
  1057. {block:Quote}
  1058.  
  1059. {block:IndexPage}
  1060. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1061. {/block:IndexPage}
  1062.  
  1063. {block:Source}
  1064. <div id="source"><div id="qline">{Source}</div></div>
  1065. {/block:Source}
  1066.  
  1067.  
  1068. <div class="quote">‟{Quote}”</div>
  1069.  
  1070. {/block:Quote}
  1071.  
  1072.  
  1073. {block:Link}
  1074.  
  1075. {block:IndexPage}
  1076. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1077. {/block:IndexPage}
  1078.  
  1079. <h1 id="line"><a href="{URL}" {Target}>{Name}</a></h1>
  1080.  
  1081. <div class="desc">{block:Description}
  1082. {Description}
  1083. {/block:Description}</div>
  1084. {/block:Link}
  1085.  
  1086.  
  1087. {block:Chat}
  1088.  
  1089. {block:IndexPage}
  1090. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1091. {/block:IndexPage}
  1092.  
  1093. {block:Title}<h1 id="line">{Title}</h1>{/block:Title}
  1094.  
  1095. <div class="desc">
  1096. {block:Lines}
  1097. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  1098. {/block:Lines}
  1099. </div>
  1100. {/block:Chat}
  1101.  
  1102. {block:Audio}
  1103.  
  1104. {block:IndexPage}
  1105. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1106. {/block:IndexPage}
  1107.  
  1108. <div class="playbox" img src="{AlbumArtURL}"><div class="playbutton">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
  1109. <div class="audiodata"><br>{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br><b>{Artist}</b>{/block:Artist}</div>
  1110.  
  1111. {/block:Audio}
  1112.  
  1113.  
  1114.  
  1115. {block:Video}
  1116.  
  1117. {block:IndexPage}
  1118. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1119. {/block:IndexPage}
  1120.  
  1121. {block:if400px}
  1122. {Video-400}
  1123. {/block:if400px}
  1124. {block:if500px}
  1125. {Video-500}
  1126. {/block:if500px}
  1127. {/block:Video}
  1128.  
  1129.  
  1130. {block:Answer}
  1131.  
  1132. {block:IndexPage}
  1133. <div class="date">{block:Date}<a href="{Permalink}">-{DayOfMonthwithZero}{MonthNumberWithZero}{ShortYear}-</a>{/block:Date}</div>
  1134. {/block:IndexPage}
  1135.  
  1136.  
  1137.  
  1138. <div class="asked">{Question}</div>
  1139. <div class="asker">{Asker}</div>
  1140. <div class="answer">{Answer}</div>
  1141.  
  1142. {/block:Answer}
  1143.  
  1144.  
  1145. </div>
  1146.  
  1147. <div id="info">
  1148. {block:Caption}
  1149. <div class="caption">{Caption}</div>
  1150. {/block:Caption}
  1151. {block:indexpage}
  1152. <div class="tags">{block:HasTags}{block:Tags}<a href="/tagged/{Tag}">#{Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:indexpage}
  1153.  
  1154.  
  1155. {block:PermalinkPage}
  1156. <div class="perminfo">
  1157. {block:Date}Posted on the {DayOfMonthwithZero}{DayOfMonthSuffix} of {Month}, {Year}{/block:Date}&nbsp;{block:NoteCount}with {NoteCountwithLabel}{/block:NoteCount}<br>
  1158. {block:ContentSource}by: <a href="{SourceURL}">{SourceTitle}</a> &nbsp; {/block:ContentSource} {block:RebloggedFrom}via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  1159. {block:HasTags}{block:Tags}<a href="/tagged/{Tag}">#{Tag}</a>&nbsp;&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
  1160. </div>
  1161. {/block:PermalinkPage}
  1162.  
  1163. </div>
  1164. {/block:Posts}
  1165.  
  1166. {block:PermalinkPage}
  1167. {block:PostNotes}
  1168. <div id="notes">{PostNotes}</div>
  1169. {/block:PostNotes}
  1170. {/block:permalinkpage}
  1171.  
  1172. {block:IndexPage}
  1173. <div id="pagination">
  1174. {block:Pagination}
  1175. {block:PreviousPage}
  1176. <a href="{PreviousPage}">←</a>&nbsp;&nbsp;
  1177. {/block:PreviousPage}
  1178. {block:JumpPagination length="5"}
  1179. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1180. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1181. {/block:JumpPagination}
  1182. {block:NextPage}
  1183. &nbsp;&nbsp;<a href="{NextPage}">→</a>
  1184. {/block:NextPage}
  1185. {/block:Pagination}
  1186. </div>
  1187. {/block:IndexPage}
  1188.  
  1189.  
  1190. <!-- MAIN TAB CONTENT ENDS-->
  1191.  
  1192.  
  1193. </section>
  1194.  
  1195. <section id="section-2">
  1196. <div id="content">
  1197. {block:ifavatar}<div id="icon"><img src="{PortraitURL-64}"></div>{/block:ifavatar}
  1198.  
  1199. <!-- TAB 1 CONTENT BEGINS -->
  1200. <h1 id="line">{text:tab 1 title}</h1>
  1201. <p>{Description}</p>
  1202.  
  1203. <p>You can also write some extra stuff underneath if you don't think the description box that tumblr provides is enough to encapsulate the true person that you are pretending to be online.</p>
  1204.  
  1205. <p>In the code, I am giving you examples of how you can be emphatic with <b>bold</b>, <i>italic</i> or <u>underline</u>.</p>
  1206. <!-- TAB 1 CONTENT ENDS -->
  1207. </div>
  1208. </section>
  1209.  
  1210. <section id="section-3">
  1211. <div id="content">
  1212. <!-- TAB 2 CONTENT BEGINS -->
  1213. <h1 id="line">{text:tab 2 title}</h1>
  1214. <p> This is a <a href="/">link</a>.<p>
  1215. <p>
  1216. <ul>
  1217. <li><a href="/">This</a></li>
  1218. <li><a href="/">is</a></li>
  1219. <li><a href="/">a</a></li>
  1220. <li><a href="/">list</a></li>
  1221. <li><a href="/">of</a></li>
  1222. <li><a href="/">links.</a></li>
  1223. </ul>
  1224. </p>
  1225. <p>
  1226. I will leave these examples in the code.</p>
  1227. <!-- TAB 2 CONTENT ENDS -->
  1228. </div>
  1229.  
  1230. </section>
  1231.  
  1232. <section id="section-4">
  1233. <div id="content">
  1234. <!-- TAB 3 CONTENT BEGINS -->
  1235. <h1 id="line">{text:tab 3 title}</h1>
  1236. If you need it.
  1237. <!-- TAB 3 CONTENT ENDS -->
  1238. </div>
  1239. </section>
  1240.  
  1241. <section id="section-5">
  1242. <div id="content">
  1243. <!-- ASK TAB CONTENT BEGINS -->
  1244. <h1 id="line">{AskLabel}</h1>
  1245. <p>
  1246. <iframe frameborder="0" border="0" scrolling="no" width="480" height="200" text-align="center" allowtransparency="true" src="http://www.tumblr.com/ask_form/{text:username}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  1247. </p>
  1248. <!-- ASK TAB CONTENT ENDS -->
  1249. </div>
  1250. </section>
  1251. </div><!-- /content -->
  1252. </div><!-- /tabs -->
  1253. <script src="js/cbpFWTabs.js"></script>
  1254. <script>
  1255. new CBPFWTabs( document.getElementById( 'tabs' ) );
  1256. </script>
  1257.  
  1258. </div>
  1259.  
  1260.  
  1261.  
  1262.  
  1263.  
  1264.  
  1265.  
  1266.  
  1267.  
  1268. <div id="credit">
  1269. <a href="https://intrawar.tumblr.com"><img src="http://static.tumblr.com/ktebk5j/KQDn13fzc/logo.png" height="25"></a>
  1270. </div>
  1271.  
  1272.  
  1273.  
  1274. </div>
  1275.  
  1276.  
  1277.  
  1278.  
  1279.  
  1280. </body>
  1281. </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!