Advertisement
quirons

new americana, one

Jan 9th, 2015
1,677
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.24 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. NEW AMERICANA, C01 BY @QUIRONS.
  8. - don't repost or give away as your own
  9. - don't steal bits of the code
  10. - if you have any doubts/find bugs, feel free to send me a message
  11.  
  12. -->
  13.  
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17. <meta charset="utf-8">
  18. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  19. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <meta name="if:Cover Background" content="0"/>
  24. <meta name="if:Menu Image" content="1"/>
  25. <meta name="if:Faded Posts" content="1"/>
  26. <meta name="if:Center Posts" content="0"/>
  27.  
  28. <meta name="color:Background" content="#ffffff" />
  29. <meta name="image:background" content""/>
  30. <meta name="color:links" content="#000000" />
  31. <meta name="color:links hover" content="#a0a0a0" />
  32. <meta name="color:text" content="#000000" />
  33. <meta name="color:posts" content="#ffffff" />
  34. <meta name="color:shadow" content="#000000" />
  35. <meta name="color:Menu BG" content="#000000" />
  36. <meta name="image:Menu Image" content=""/>
  37. <meta name="color:Menu Text" content="#ffffff" />
  38. <meta name="text:Header Title" content="Header Title"/>
  39. <meta name="color:Menu Links BG" content="#000000"/>
  40.  
  41. <meta name="text:URL 1" content="URL One"/>
  42. <meta name="text:Link 1" content="Link One"/>
  43. <meta name="text:URL 2" content="URL Two"/>
  44. <meta name="text:Link 2" content="Link Two"/>
  45. <meta name="text:URL 3" content="URL Three"/>
  46. <meta name="text:Link 3" content="Link Three"/>
  47. <meta name="text:Ask URL" content="/ask"/>
  48.  
  49. <meta name="if:Hide Captions" content="0"/>
  50.  
  51.  
  52.  
  53. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  54.  
  55. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  56.  
  57. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  58.  
  59. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  60.  
  61. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  62.  
  63. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  64. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  65. <script>
  66. (function($){
  67. $(document).ready(function(){
  68. $("a[title]").style_my_tooltips({
  69. tip_follows_cursor:true,
  70. tip_delay_time:90,
  71. tip_fade_speed:600,
  72. attribute:"title"
  73. });
  74. });
  75. })(jQuery);
  76. </script>
  77.  
  78. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  79.  
  80. <script language="javascript">
  81. $(document).ready(function() {
  82. $('a#clickbutton').click(function() {
  83. $('.t',this).toggle();
  84. });
  85.  
  86. $("#about").css({"right": "-100%"})
  87. $("#clickbutton").toggle(
  88. function () {
  89. $("#about").animate({"left": "0%"}, "slow");
  90. },
  91. function () {
  92. $("#about").animate({"left": "-100%"}, "slow");
  93. });
  94. });
  95. </script>
  96.  
  97.  
  98. <style type="text/css">
  99.  
  100. /* ---------------------------- GENERAL ----------------------------- */
  101.  
  102. /* -------- SELECTION TOOL ------- */
  103.  
  104. ::-moz-selection {
  105. background: {color:text};
  106. color: {color:background};
  107. }
  108.  
  109. ::selection {
  110. background: {color:text};
  111. color: {color:background};
  112. }
  113.  
  114. /* -------- SCROLLBAR ------- */
  115.  
  116. ::-webkit-scrollbar {width: 2px;}
  117. ::-webkit-scrollbar-track {background:none;}
  118. ::-webkit-scrollbar-thumb {background:{color:text};}
  119. ::-webkit-scrollbar-thumb:window-inactive {background: transparent;}
  120. ::-webkit-scrollbar-thumb:horizontal {display:none;}
  121.  
  122. /* ------- TOOLTIPS ------ */
  123.  
  124. #s-m-t-tooltip {
  125. max-width:300px;
  126. margin:10px 0px 0px 10px;
  127. background-color:{color:bakground};
  128. font-family:helvetica;
  129. font-size:12px;
  130. color:{color:text};
  131. z-index:999999999999999999999999999999999999;
  132. }
  133.  
  134.  
  135. #audioinfo {
  136. background:#444;
  137. color:#fafafa;
  138. font-family:'Cutive Mono';
  139. text-align:center;
  140. text-transform:uppercase;
  141. width:250px;
  142. display:block;
  143.  
  144. }
  145.  
  146. .info {
  147. padding:20px;
  148. }
  149.  
  150. .cover {
  151. width:250px;
  152. }
  153.  
  154. .playbutton {
  155. width: 20px;
  156. height: 30px;
  157. overflow: hidden;
  158. position: relative;
  159. z-index: 900;
  160. margin-left:15px;
  161. padding-right:15px;
  162. padding-bottom:17.5px;
  163. padding-top:0px;
  164. }
  165.  
  166. .playbox {
  167. background-color: #000;
  168. position: absolute;
  169. z-index: 900;
  170. margin-top: 100px;
  171. margin-left: 100px;
  172. opacity:.75;
  173. }
  174.  
  175. #audio:hover .playbox {
  176. opacity:1;
  177. }
  178.  
  179. /* -------- BASICS ------- */
  180.  
  181. body {
  182. background:{color:Background};
  183. {block:IfCoverBackground}
  184. background: url({image:background}) no-repeat center center fixed;
  185. -webkit-background-size: cover;
  186. -moz-background-size: cover;
  187. -o-background-size: cover;
  188. background-size: cover;
  189. {/block:IfCoverBackground}
  190. {block:IfNotCoverBackground}
  191. background: url({image:background}) repeat center center fixed;
  192. {/block:IfNotCoverBackground}
  193. color: {color:text};
  194. font-family: helvetica, arial;
  195. font-size: 11px;
  196. margin: 0;
  197. padding: 0;
  198. word-wrap: break-word;
  199. line-height:150%;
  200. }
  201.  
  202. a {
  203. color: {color:links};
  204. text-decoration: none;
  205. -webkit-transition: all .3s;
  206. -moz-transition: all .3s;
  207. -o-transition: all .3s;
  208. -ms-transition: all .3s;
  209. transition: all .3s;
  210. }
  211.  
  212. a:hover{
  213. color:{color:links hover};
  214. -webkit-transition: all .3s;
  215. -moz-transition: all .3s;
  216. -o-transition: all .3s;
  217. -ms-transition: all .3s;
  218. transition: all .3s;
  219. }
  220.  
  221. blockquote {
  222. border-left: 1px solid {color:text};
  223. margin: 10px;
  224. padding-left:25px;
  225. padding-top:3px;
  226. padding-bottom:3px;
  227. }
  228.  
  229. iframe, img, embed, object, video {
  230. max-width: 100%;
  231. }
  232.  
  233. p{
  234. margin-bottom:10px;
  235. }
  236.  
  237. img {
  238. height: auto;
  239. width:auto;
  240. max-width:100%;
  241. }
  242.  
  243. h1 {
  244. text-transform:uppercase;
  245. font-size:13px;
  246. font-family:'Cutive Mono';
  247. }
  248.  
  249. ul{
  250. list-style-type:square;
  251. }
  252.  
  253. ol{
  254. list-style-type:;
  255. }
  256.  
  257. #bigcon{
  258. width:520px;
  259. margin-left:auto;
  260. margin-right:auto;
  261. }
  262.  
  263. .tabcontent {
  264. position:static;
  265. margin-left:auto;
  266. margin-right:auto;
  267. width: 520px;
  268. text-align:center;
  269. margin-bottom:200px;
  270. }
  271.  
  272. #postcontainer {
  273. position:static;
  274. margin-left:auto;
  275. margin-right:auto;
  276. {block:IndexPage}
  277. width: 290px;
  278. {/block:IndexPage}
  279. {block:PermalinkPage}
  280. width: 540px;
  281. {/block:PermalinkPage}
  282. text-align:center;
  283. {block:IfNotCenterPosts}
  284. margin-left:300px;
  285. {/block:IfNotCenterPosts}
  286. }
  287.  
  288. /* --------------------------- POSTS (articles) --------------------- */
  289.  
  290. article {
  291. {block:IfFadedPosts}
  292. opacity:.7;
  293. -moz-transition: all .9s ease;
  294. -o-transition: all .9s ease;
  295. transition: all .9s ease;
  296. -webkit-transition: all .9s ease;
  297. {/block:IfFadedPosts}
  298. float:left;
  299. background:{color:posts};
  300. padding: 10px;
  301. {block:IndexPage}
  302. width: 250px;
  303. {/block:IndexPage}
  304. {block:PermalinkPage}
  305. width: 500px;
  306. {/block:PermalinkPage}
  307. text-align:left;
  308. margin-bottom:80px;
  309. border:10px solid white;
  310. -webkit-box-shadow: 5px 5px 0px 0px {color:shadow};
  311. -moz-box-shadow: 5px 5px 0px 0px {color:shadow};
  312. box-shadow: 5px 5px 0px 0px {color:shadow});
  313. }
  314.  
  315. article:hover {
  316. {block:IfFadedPosts}
  317. opacity:1;
  318. -moz-transition: all .9s ease;
  319. -o-transition: all .9s ease;
  320. transition: all .9s ease;
  321. -webkit-transition: all .9s ease;
  322. {/block:IfFadedPosts}
  323. }
  324.  
  325. /* ---------------------------- POST INFO -----------------------------*/
  326.  
  327. .postinfo{
  328. margin-top:10px;
  329. font-weight:bold;
  330. }
  331.  
  332. .tags {
  333. margin-top:5px;
  334. font-weight:normal;
  335. opacity:.7;
  336. }
  337.  
  338. .tags a:hover {
  339. text-decoration:underline;
  340. }
  341.  
  342. /* ---------------------------- POST NOTES ------------------------- */
  343.  
  344. ol.notes {
  345. display:block;
  346. text-align:left;
  347. list-style-type:none;
  348. margin-left:-40px;
  349. }
  350.  
  351. ol.notes li.note{
  352. margin-bottom:5px;
  353. }
  354.  
  355. .pagenotes {
  356. text-align:left;
  357. margin-top:15px;
  358. }
  359.  
  360. .pagenotes img{
  361. padding-right:5px;
  362. padding-top:5px;
  363. margin-bottom:-5px;
  364. display:none;
  365. }
  366.  
  367.  
  368. /* -------------------------- POST TYPES -------------------------- */
  369.  
  370. /* CHAT */
  371.  
  372. ul.chat{
  373. list-style:none;
  374. margin-left:-40px;
  375. }
  376.  
  377. .chat span {
  378. float: left;
  379. }
  380.  
  381. /* QUOTES */
  382.  
  383. .quote{
  384. font-size:20px;
  385. line-height:150%;
  386. }
  387.  
  388. .quotesource{
  389. text-align:right;
  390. margin-bottom:10px;
  391. }
  392.  
  393. /* QUESTIONS */
  394.  
  395. .question{
  396. margin-bottom:15px;
  397. }
  398.  
  399. .answer {
  400. font-size:11px;
  401. }
  402.  
  403. .askerimg{
  404. position:relative;
  405. display:inline-block;
  406. margin-right:10px;
  407. }
  408.  
  409. /* AUDIO */
  410.  
  411. .songart{
  412. float:left;
  413. margin-right:10px;
  414. }
  415.  
  416. .songart img{
  417. width:80px;
  418. height:80px;
  419. }
  420.  
  421. .songtitle{
  422. margin-bottom:10px;
  423. margin-left:90px;
  424. }
  425.  
  426. .songauthor{
  427. margin-bottom:10px;
  428. font-size:8px;
  429. margin-left:90px;
  430. }
  431.  
  432. .tumblr_audio_player {
  433. height: 50px;
  434. }
  435.  
  436. /* ------------------------- PAGINATION ------------------------- */
  437.  
  438. #pagination a{
  439. color:black;
  440. }
  441.  
  442. #pagination {
  443. margin-top:5px;
  444. }
  445.  
  446. /* --- MENU --- */
  447.  
  448. #toggle {
  449. width: 28px;
  450. height: 30px;
  451. top:15px;
  452. left:15px;
  453. position:fixed;
  454. z-index:99999999;
  455. }
  456.  
  457. #toggle div {
  458. width: 100%;
  459. height: 5px;
  460. background: white;
  461. margin: 4px auto;
  462. transition: all 0.3s;
  463. backface-visibility: hidden;
  464. -webkit-box-shadow: 2px 2px 0px 0px {color:shadow};
  465. -moz-box-shadow: 2px 2px 0px 0px {color:shadow};
  466. box-shadow: 2px 2px 0px 0px {color:shadow});
  467. }
  468.  
  469. #toggle.on .one {
  470. transform: rotate(45deg) translate(5px, 5px);
  471. }
  472.  
  473. #toggle.on .two {
  474. opacity: 0;
  475. }
  476.  
  477. #toggle.on .three {
  478. transform: rotate(-45deg) translate(7px, -8px);
  479. }
  480.  
  481. #about {
  482. position: fixed;
  483. top:0;
  484. height:100%;
  485. width:150px;
  486. margin-right:-320px;
  487. padding: 17.5px;
  488. padding-right:30px;
  489. background-color:{color:Menu BG};
  490. color:black;
  491. right:120%;
  492. padding-top:100px;
  493. font-family:'Cutive Mono';
  494. }
  495.  
  496. .menu-link a {
  497. color:white;
  498. text-transform:uppercase;
  499. display:block;
  500. width:150px;
  501. padding:5px;
  502. letter-spacing:1px;
  503. font-size:12px;
  504. margin-bottom:-12.5px;
  505. background-color:#000;
  506. box-shadow:inset 160px 0 0 0 {color:shadow};
  507. }
  508.  
  509. #about a:hover {
  510. box-shadow:inset 0 0 0 0 {color:shadow};
  511. }
  512.  
  513. #avatar img {
  514. width:100px;
  515. margin-left:15px;
  516. border-radius:50%;
  517. padding:10px;
  518. margin-bottom:25px;
  519. }
  520.  
  521. #avatar a {
  522. background:none;
  523. box-shadow:none;
  524. }
  525.  
  526. #desc {
  527. color:{color:Menu Text};
  528. padding:7.5px;
  529. }
  530.  
  531. #desc a {
  532. color:{color:Menu Text};
  533. background:none;
  534. box-shadow:none;
  535. text-transform:none;
  536. font-weight:bold;
  537. }
  538.  
  539. .comma:last-child{display:none;}
  540.  
  541. #blogt a {
  542. text-align:center;
  543. font-size:50px;
  544. color:white;
  545. font-style:italic;
  546. text-shadow: 5px 5px 0px {color:shadow};
  547. }
  548.  
  549. #blogt {
  550. line-height:250%;
  551. margin-top:100px;
  552. padding-bottom:100px;
  553. }
  554.  
  555. #ask {
  556. background-color:{color:shadow};
  557. padding:10px;
  558. color:white;
  559. font-family:'Cutive Mono';
  560. }
  561.  
  562. #ask a {
  563. color:white;
  564. }
  565.  
  566. /* --------------------------- Custom CSS -------------------------- */
  567. {CustomCSS}
  568. </style>
  569.  
  570. <link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
  571. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
  572.  
  573. </head>
  574. <body>
  575.  
  576. <!-- removing this will automatically make you a piece of shit !! thank u -->
  577. <div id="clubs" style="right:25px;bottom:15px;position:fixed;font-size:18px;font-family: 'Playfair Display', serif;";><a href="http://badlland.tumblr.com">C</a></div>
  578.  
  579. <a id="clickbutton" class="t" style="cursor:pointer;"><span class="t">
  580. <div id="toggle">
  581. <div class="one"></div>
  582. <div class="two"></div>
  583. <div class="three"></div>
  584. </div></span><span class="t" style="display:none"><div id="toggle">
  585. <div class="one"></div>
  586. <div class="two"></div>
  587. <div class="three"></div>
  588. </div></span></a>
  589.  
  590. <div id="about">
  591.  
  592. {block:IfMenuImage}<div id="avatar">
  593. <a href="/"><img src="{image:Menu Image}"/></a>
  594. </div>{/block:IfMenuImage}
  595.  
  596. <div id="desc">{Description}
  597.  
  598. {block:Pagination}
  599. <div id="pagination">
  600. {block:PreviousPage}
  601. <a href="{PreviousPage}">Previous</a> |
  602. {/block:PreviousPage}
  603. {block:NextPage}
  604. <a href="{NextPage}">Next</a>
  605. {/block:NextPage}
  606. </div>
  607. {/block:Pagination}
  608.  
  609. </div><br>
  610.  
  611. <span class="menu-link">
  612. <a href="/">refresh</a><br>
  613. <a href="{text:Ask URL}">message</a><br>
  614. <a href="{text:URL 1}">{text:Link 1}</a><br>
  615. <a href="{text:URL 2}">{text:Link 2}</a><br>
  616. <a href="{text:URL 3}">{text:Link 3}</a>
  617. </span>
  618.  
  619. </div>
  620.  
  621. <div id="postcontainer">
  622.  
  623. <div id="blogt"><a href="/">{text:Header Title}</a></div>
  624.  
  625. {block:Posts}
  626.  
  627. <article>
  628.  
  629. {block:ContentSource}
  630. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  631. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  632. {/block:SourceLogo}
  633. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  634. {/block:ContentSource}
  635.  
  636. <!--TEXT POST-->
  637. {block:Text}
  638. {block:Title}
  639. <h1 class="title">
  640. <a href="{Permalink}">{Title}</a></h1>
  641. {/block:Title}
  642. {Body}
  643. {/block:Text}
  644.  
  645.  
  646. <!--PHOTO POST-->
  647. {block:Photo}
  648. {block:IndexPage}
  649. {LinkOpenTag}
  650. <img src="{PhotoURL-250}" alt="{PhotoAlt}" />
  651. {LinkCloseTag}
  652. {/block:IndexPage}
  653. {block:PermalinkPage}
  654. {LinkOpenTag}
  655. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  656. {LinkCloseTag}{/block:PermalinkPage}
  657. {/block:Photo}
  658.  
  659.  
  660. <!--PHOTOSET POST-->
  661. {block:Photoset}
  662. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  663. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  664. {/block:Photoset}
  665.  
  666.  
  667. <!--QUOTE POST-->
  668. {block:Quote}
  669. <div class="quote">{Quote}</div>
  670. {block:Source}
  671. <div class="quotesource">{Source}</div>
  672. {/block:Source}
  673. {/block:Quote}
  674.  
  675.  
  676. <!--LINK POST-->
  677. {block:Link}
  678. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  679. {block:Description}{Description}{/block:Description}
  680. {/block:Link}
  681.  
  682.  
  683. <!--CHAT POST-->
  684. {block:Chat}
  685. <ul class="chat">
  686. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  687. </ul>
  688. {/block:Chat}
  689.  
  690.  
  691. {block:Audio}<div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  692. {block:AlbumArt}
  693. <img src="{AlbumArtURL}" class="cover">
  694. {/block:AlbumArt}
  695. <div id="audioinfo">
  696. <div class="info">{block:TrackName}<b style="text-transform:uppercase;color:white;font-weight:bold;">{TrackName}</b><br />{/block:TrackName}{block:Artist}<b style="opacity:.8">{Artist}</b>{/block:Artist}{block:Album}<span style="padding-left:7.5px;opacity:.8">{Album}</span>{/block:Album}</div>
  697. </div>
  698. {/block:Audio}
  699.  
  700.  
  701. <!--VIDEO POST-->
  702. {block:Video}
  703. <div class="video">
  704. {block:IndexPage}<div class="video-player">{Video-250}</div>{/block:IndexPage}
  705. {block:PermalinkPage}<div class="video-player">{Video-500}</div>{/block:PermalinkPage}
  706. </div>
  707. {/block:Video}
  708.  
  709.  
  710. <!--ANSWER POST-->
  711. {block:Answer}
  712. <div id="ask"><b style="text-transform:lowercase;">{Asker}: </b></span><span class="question">{Question}</span></div>
  713. <p><div class="answer">{Answer}</div>
  714. {/block:Answer}
  715.  
  716. <!--CAPTIONS-->
  717. {block:Ifhidecaptions}
  718. {block:permalink}
  719. {block:Caption}
  720. {Caption}
  721. {/block:Caption}
  722. {/block:permalink}
  723. {/block:Ifhidecaptions}
  724. {block:Ifnothidecaptions}
  725. {block:Caption}
  726. {Caption}
  727. {/block:Caption}
  728. {/block:Ifnothidecaptions}
  729.  
  730. <!--POST INFORMATION-->
  731. <div class="postinfo">
  732.  
  733. <!--PERMALINK-->
  734. <a href="{Permalink}">
  735. {block:Date}
  736. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {TimeAgo}
  737. {/block:Date}
  738. </a>
  739.  
  740. <!--NOTES-->
  741. {block:NoteCount}
  742. <a href="{Permalink}"> + {NoteCount} </a>
  743. {/block:NoteCount}
  744.  
  745. <!--VIA AND SOURCE-->
  746. {block:RebloggedFrom} /
  747. <a href="{ReblogParentURL}">Via</a>
  748. {/block:RebloggedFrom}
  749. {block:ContentSource}
  750. & <a href="{SourceURL}">Source</a>
  751. {/block:ContentSource}
  752. {block:RebloggedFrom}{/block:RebloggedFrom}
  753.  
  754. <!--TAGS-->
  755. {block:HasTags}
  756. <div class="tags">
  757. {block:Tags}
  758. <a href="{TagURL}">{Tag}</a><span class="comma">,</span>
  759. {/block:Tags}
  760. </div>
  761. {/block:HasTags}
  762.  
  763. </div>
  764.  
  765. <!--POST NOTES-->
  766. {block:PostNotes}
  767. <div class="pagenotes">{PostNotes-16}</div>
  768. {/block:PostNotes}
  769.  
  770.  
  771. </article>
  772.  
  773.  
  774.  
  775. {/block:Posts}
  776. <!--Close of article-->
  777.  
  778. </div>
  779.  
  780. </div>
  781.  
  782. </body>
  783. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement