Advertisement
waltzy

theme 3 - mobile

Nov 13th, 2012
3,442
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.97 KB | None | 0 0
  1. <html>
  2. <head>
  3. <!-- Theme #2 - mobile version designed by waltzy.tumblr.com. Please do not redistribute, use as a base for your own theme, or claim as your own.
  4.  
  5. v1.2
  6. - updated reblog/like buttons to use tumblr's provided buttons.
  7. -->
  8. <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11. <meta name="viewport" content="width=520"/>
  12.  
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16.  
  17.  
  18. <style type="text/css">
  19.  
  20. /* COLOR OPTIONS
  21. To change the color, just replace the hex code with the new desired hex code */
  22.  
  23. body {
  24. background-color: #dddddd; /* This is the background color for the whole page */
  25. color: #111111;
  26. font-size: 30px; /* Change the base font size */
  27. }
  28.  
  29. a, a:link, a:visited, a:active, a:hover, .my-like {
  30. color: #008cff; /* This is the main link color */
  31. }
  32.  
  33. ul.linkbar li a, a.jump_page:link, a.jump_page:visited {
  34. background-color: #008cff; /* This colors the home / ask /archive and pagination links */
  35. color: #EEEEEE !important;
  36. }
  37.  
  38. a img, a:visited img, a:active img {
  39. border-color: #008cff; /* Border color for images that are links */
  40. }
  41.  
  42. .post, #description {
  43. background-color: #E9E9E9; /* This is the background color for posts and the description */
  44. }
  45.  
  46. .pagination {
  47. color: #333333; /* This colors the pagination text for the total number of pages. Pick a color that contrasts with the background. */
  48. }
  49.  
  50.  
  51. /* end of color options */
  52.  
  53. html {
  54. width: 520px;
  55. margin-left: auto;
  56. margin-right: auto;
  57. }
  58.  
  59. body {
  60. width: 520px;
  61. margin: 0;
  62. padding: 10px;
  63. background-repeat: no-repeat, repeat;
  64. background-attachment: fixed;
  65. word-wrap: break-word;
  66. }
  67.  
  68. .post, #description, .notes {
  69. margin-top: 0px;
  70. margin: 0px;
  71. margin-bottom: 20px;
  72. padding: 0px;
  73. border-radius: 10px;
  74. width: 100%;
  75. }
  76.  
  77. .minibar {
  78. margin-top: 0px;
  79. margin-bottom: 0px;
  80. overflow: hidden;
  81. padding-bottom: 0px;
  82. }
  83.  
  84.  
  85.  
  86.  
  87. .title {
  88. margin-top: 5px;
  89. text-align: center;
  90. font-weight: normal;
  91. font-style: italic;
  92. font-family: Georgia, Times New Roman, serif;
  93. margin-bottom: 0px;
  94. }
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101. .pagination {
  102. text-align: center;
  103. text-transform: uppercase;
  104. font-weight: bold;
  105. padding: 3px;
  106. }
  107.  
  108.  
  109. .post h3 {
  110. margin-top: 0px;
  111. }
  112. .post-body{
  113. margin: 0px;
  114. padding: 10px;
  115. }
  116. #description {
  117. padding: 10px;
  118. width: 500px;
  119. }
  120.  
  121.  
  122.  
  123. a, a:link, a:visited, a:active, a:hover {
  124. text-decoration: none;
  125. }
  126.  
  127. a img, a:visited img, a:active img {
  128. border: 2px solid;
  129. }
  130.  
  131. .imgbox {
  132. text-align: center;
  133. }
  134. .chat ul {
  135. margin-left: 0px;
  136. padding-left: 0px;
  137. margin-top: 0px;
  138. margin-bottom: 5px;
  139. }
  140. .chat li {
  141. list-style-type: none;
  142. padding: 5px;
  143. padding-bottom: 0px;
  144. margin-top: 0px;
  145. margin-bottom: -1px;
  146. }
  147.  
  148. .chat .label {
  149. font-weight: bold;
  150. }
  151. .audio, .photo, .video {
  152. padding-top: 15px;
  153. }
  154. .audio-wrapper {
  155. display: inline-block;
  156. vertical-align: top;
  157. }
  158.  
  159. .albumart {
  160. max-width: 70px;
  161. display: inline-block;
  162. margin-right: 10px;
  163. }
  164. .playcount {
  165. font-size: .8em;
  166. font-style: italic;
  167. }
  168. .track {
  169. font-size: .8em;
  170. font-style: italic;
  171. }
  172. .video-center {
  173. text-align: center;
  174. }
  175.  
  176. .quote {
  177. padding-top: 0px;
  178. margin-top: 0px;
  179. }
  180.  
  181.  
  182. ol.notes {
  183. padding-left: 50px;
  184. width: 490px;
  185. }
  186.  
  187. .post .content .html_photoset p.photoset_caption {
  188. margin-top: 20px;
  189. }
  190.  
  191.  
  192. h3 {
  193. margin-bottom: 10px;
  194. }
  195.  
  196. .curlyquote {
  197. font-family: Georgia, serif;
  198. border: 0px;
  199. margin-left: 25px;
  200. margin-bottom: 15px;
  201. width: 440px;
  202. }
  203.  
  204. .curlyquote:before, .curlyquote:after {
  205. display: block;
  206. font-family: Georgia, serif;
  207. font-size: 250%;
  208. }
  209. .curlyquote:before {
  210. content: '\201C';
  211. margin-left: -30px;
  212. height: 10px;
  213. }
  214. .curlyquote:after {
  215. content: '\201D';
  216. margin-left: 100%;
  217. margin-top: -33px;
  218. height: 0px;
  219. }
  220.  
  221. .post-body p:last-child {
  222. padding-bottom: 0px;
  223. margin-bottom: 0px;
  224. }
  225. .post-footer {
  226. text-align: left;
  227. margin-0px;
  228. padding: 5px;
  229. padding-left: 10px;
  230. padding-right: 10px;
  231. font-size: .8em;
  232. min-height: 8px;
  233. line-height: 34px;
  234. }
  235.  
  236.  
  237. .quote {
  238. /*font-size: 1.4em; */
  239. }
  240. .textpost-title {
  241. margin-top: 0px;
  242. }
  243. .text, .link {
  244. margin-top: 0px;
  245. }
  246.  
  247. .quote .source {
  248. font-size: .9em;
  249. }
  250. .caption {
  251. margin: 0px;
  252. padding: 0px;
  253. }
  254.  
  255. div.title {
  256. margin-bottom: 5px;
  257. padding-bottom: 0px;
  258. }
  259.  
  260. #linksidebar {
  261. margin-top: 10px;
  262. padding-left: 0px;
  263. padding-right: 10px;
  264. }
  265.  
  266. .portrait-image {
  267. padding: 0px;
  268. margin: 5px;
  269. vertical-align: middle;
  270. display: table-cell;
  271. }
  272. #portrait-block {
  273. float: left;
  274. display: block;
  275. margin-left: 5px;
  276. }
  277.  
  278.  
  279.  
  280. #navigation {
  281. width: 100%;
  282. text-align: center;
  283. }
  284.  
  285.  
  286. #navigation ul {
  287. display: block;
  288. width: 100%;
  289. text-align: center;
  290. }
  291.  
  292. ul.metadata li {
  293. display: inline-block;
  294. padding: 5px;
  295. font-size: .9em;
  296. padding-bottom: 0px;
  297. margin: 0px;
  298. padding-right: 0px;
  299. }
  300.  
  301. .tags {
  302. font-size: .9em;
  303. }
  304. .tag {
  305. margin-top: -15px;
  306. padding-top: 0px;
  307. margin-left: 10px;
  308. }
  309.  
  310. ul.metadata li:not(:last-child):after {
  311. content: " /";
  312. }
  313. ul.metadata {
  314.  
  315. list-style-type:none;
  316. margin:0;
  317. padding:5px;
  318. padding-top: 0px;
  319. padding-bottom: 0px;
  320. margin-bottom: 0px;
  321. -moz-border-radius: 5px;
  322. border-radius:
  323. }
  324.  
  325.  
  326. ul.linkbar {
  327. list-style-type:none;
  328. margin:0;
  329. padding:5px;
  330. padding-top: 0px;
  331. padding-bottom: 0px;
  332.  
  333. -moz-border-radius: 5px;
  334. border-radius: 5px;
  335. }
  336.  
  337.  
  338.  
  339. ul.linkbar li{
  340. margin-top: 12px;
  341. text-align: center;
  342. display: inline-block;
  343. }
  344.  
  345.  
  346.  
  347.  
  348.  
  349. ul.linkbar li a {
  350. /* font-family: Georgia, serif; */
  351. display: block;
  352.  
  353.  
  354. padding-left: 20px;
  355. padding-right: 20px;
  356. margin-left: 10px;
  357. margin-right: 10px;
  358.  
  359. border-radius: 5px;
  360. }
  361.  
  362.  
  363.  
  364. a.jump_page:link, a.jump_page:visited {
  365. display: inline-block;
  366. padding: 8px;
  367. margin: 5px;
  368. border-radius: 5px;
  369.  
  370. }
  371.  
  372.  
  373.  
  374.  
  375.  
  376.  
  377. .theme-credit {
  378. margin-top: 0px;
  379. font-size: .5em;
  380. text-align: center;
  381. }
  382.  
  383.  
  384.  
  385.  
  386. blockquote {
  387. position: relative;
  388. border-left: 2px solid #777;
  389. margin-top: 5px;
  390. margin-bottom: 5px;
  391. padding-left: 5px;
  392. margin-left: 10px;
  393. margin-right: 0px;
  394. padding-right: 0px;
  395. }
  396.  
  397. p {
  398. margin-top: 10px;
  399. margin-bottom: 10px;
  400. }
  401.  
  402. .text blockquote p:first-child {
  403. margin-top: -7px;
  404. }
  405.  
  406. blockquote img {
  407. max-width: 100%;
  408. }
  409.  
  410.  
  411. .opacity {
  412. opacity: .8;
  413. -webkit-transition: opacity .35s linear;
  414. -moz-transition: opacity .35s linear;
  415. }
  416. .opacity:hover {
  417. opacity: 1;
  418. -webkit-transition: opacity .35s linear;
  419. -moz-transition: opacity .35s linear;
  420. }
  421. .clear {
  422. clear: both;
  423. height: 0px;
  424. margin: 0px;
  425. padding: 0px;
  426. }
  427. .avatar, a:hover .avatar,a:active .avatar {
  428. border: 0px;
  429. }
  430.  
  431.  
  432. .audio_player a.play {
  433. position: relative;
  434. color: #333536;
  435. font-size: 26px;
  436. text-decoration: none;
  437. -webkit-border-radius: 16px;
  438. -moz-border-radius: 16px;
  439. border-radius: 16px;
  440. border: 2px solid #D9D9D9;
  441. padding: 25px 35px 25px 93px;
  442. display: block;
  443. -webkit-tap-highlight-color: rgba(0,0,0,0.0);
  444. }
  445.  
  446. .audio_player a.play .play_controls {
  447. display: block;
  448. position: absolute;
  449. top: 0;
  450. left: 20px;
  451. bottom: 0;
  452. width: 50px;
  453. padding-top: 20px;
  454. }
  455.  
  456. .audio_player a.play .play_controls .play_align {
  457. display: block;
  458. position: absolute;
  459. width: 40px;
  460. height: 40px;
  461. margin-top: -20px;
  462. top: 50%;
  463. left: 5px;
  464. }
  465.  
  466. .audio_player a.play .play_controls .play_button {
  467. display: block;
  468. width: 0;
  469. height: 0;
  470. margin-left: 10px;
  471. border-top: 20px solid transparent;
  472. border-bottom: 20px solid transparent;
  473. border-left: 30px solid #333536;
  474. -moz-transform:rotate(0.1deg);
  475. -o-transform:rotate(0.1deg);
  476. -webkit-transform:rotate(0.1deg);
  477. transform:rotate(0.1deg);
  478. }
  479.  
  480. .audio_player a.play.is_playing .play_controls .play_button {
  481. border-top: none;
  482. border-bottom: none;
  483. border-left: solid 12px #333536;
  484. border-right: solid 12px #333536;
  485. width: 5px;
  486. height: 34px;
  487. margin-left: 5px;
  488. margin-top: 3px;
  489. }
  490.  
  491. .standard {
  492. text-align: center;
  493. }
  494. .button {
  495. display: inline-block;
  496. }
  497.  
  498. .right {
  499. float: right;
  500. }
  501.  
  502.  
  503. </style>
  504.  
  505.  
  506.  
  507. <script>
  508.  
  509. function play_audio(post_id) {
  510. var audio = get_id('audio_file_' + post_id);
  511.  
  512. if (audio.paused) {
  513. audio.play();
  514. get_id('play_button_' + post_id).className = 'play is_playing';
  515. } else {
  516. audio.pause();
  517. get_id('play_button_' + post_id).className = 'play';
  518. }
  519. };
  520. </script>
  521.  
  522.  
  523.  
  524. {block:IfGoogleAnalytics}
  525.  
  526. <script type="text/javascript">
  527.  
  528.  
  529. var _gaq = _gaq || [];
  530. _gaq.push(['_setAccount', '{text:Google Analytics}']);
  531. _gaq.push(['_setDomainName', 'tumblr.com']);
  532. _gaq.push(['_trackPageview']);
  533.  
  534. (function() {
  535. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  536. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  537. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  538. })();
  539.  
  540. </script>
  541. {/block:IfGoogleAnalytics}
  542. </head>
  543. <body>
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550. <h1 class="title"><a href="/">{Title}</a></h1>
  551.  
  552.  
  553. <div id="main">
  554.  
  555.  
  556. <div class="minibar" id="navigation">
  557. <ul id="nav" class="linkbar shownMinibar">
  558.  
  559.  
  560. <!-- LINK OPTIONS -->
  561. <li><a href="/">home</a></li>
  562. <li><a href="/ask">ask</a></li>
  563. <li><a href="/archive">archive</a></li>
  564.  
  565.  
  566.  
  567. <!-- PAGE OPTIONS -->
  568. <!-- By default, pages are turned on. If you don't want pages to show up in the mobile version of the theme, then delete everything between {block:HasPages} and {/block:HasPages}, or the next three lines, in other words. -->
  569. {block:HasPages}
  570. {block:Pages}<li class="sidebar-link"><a href="{URL}">{Label}</a></li>{/block:Pages}
  571. {/block:HasPages}
  572.  
  573. </ul>
  574. </div>
  575.  
  576.  
  577.  
  578.  
  579.  
  580.  
  581.  
  582. <br style="clear: both" />
  583.  
  584. {block:Description}
  585. <div id="description">{Description}</div>
  586. {/block:Description}
  587.  
  588.  
  589.  
  590. {block:Posts}
  591.  
  592. <div class="post">
  593. <article>
  594.  
  595.  
  596.  
  597. {block:Text}
  598. <div class="post-body text">
  599. {block:Title}
  600. <h3 class="textpost-title"><a href="{Permalink}">{Title}</a></h3>
  601. {/block:Title}
  602.  
  603. {Body}
  604. </div>
  605. {/block:Text}
  606.  
  607.  
  608.  
  609. {block:Photo}
  610. <div class="post-body photo">
  611. <div class="imgbox"> {block:HighRes} <a href="{PhotoURL-HighRes}"> {/block:HighRes}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:HighRes} </a>{/block:HighRes}</div>
  612.  
  613. {block:Caption}
  614. <span class="caption">{Caption}</span>
  615. {/block:Caption}
  616. </div>
  617. {/block:Photo}
  618.  
  619. {block:Photoset}
  620. <div class="post-body photoset">
  621. <div class="imgbox">{Photoset-500}</div>
  622.  
  623. {block:Caption}
  624. <span class="caption">{Caption}</span>
  625. {/block:Caption}
  626. </div>
  627. {/block:Photoset}
  628.  
  629. {block:Quote}
  630. <div class="post-body quote">
  631. <blockquote class="curlyquote">{Quote}</blockquote>
  632.  
  633. {block:Source}
  634. <br /><span class="source">{Source}</span><br />
  635. {/block:Source}
  636. </div>
  637. {/block:Quote}
  638.  
  639. {block:Link}
  640. <div class="post-body link">
  641. <h3><a href="{URL}" class="link" {Target}>{Name}</a></h3>
  642.  
  643. {block:Description}
  644. <span class="description">{Description}</span>
  645. {/block:Description}
  646. </div>
  647. {/block:Link}
  648.  
  649. {block:Chat}
  650. <div class="post-body chat">
  651. {block:Title}
  652. <h3><a href="{Permalink}">{Title}</a></h3>
  653. {/block:Title}
  654.  
  655. <ul class="chat">
  656. {block:Lines}
  657. <li class="{Alt} user_{UserNumber}">
  658. {block:Label}
  659. <span class="label">{Label}</span>
  660. {/block:Label}
  661.  
  662. {Line}
  663. </li>
  664. {/block:Lines}
  665. </ul>
  666. </div>
  667. {/block:Chat}
  668.  
  669. {block:Video}
  670. <div class="post-body video">
  671. <div class="video-center">{Video-500}</div>
  672.  
  673. {block:Caption}
  674. <span class="caption">{Caption}</span>
  675. {/block:Caption}
  676. </div>
  677. {/block:Video}
  678.  
  679. {block:Audio}
  680. <div class="post-body audio">
  681. {block:AlbumArt}
  682. <img src="{AlbumArtURL}" class="albumart"/>
  683. {/block:AlbumArt}
  684.  
  685.  
  686.  
  687. <!--
  688. <a class="play" onclick="play_audio({PostID}); return false;" id="play_button_{PostID}">
  689.  
  690. {block:TrackName}
  691. {TrackName}
  692. {/block:TrackName}{block:Artist}<br/>
  693. {Artist}
  694. {/block:Artist}
  695.  
  696.  
  697.  
  698. <strong class="listen" style="display:none">Listen</strong>
  699. <span class="play_controls"><span class="play_align"><span class="play_button"></span></span></span>
  700. </a>
  701.  
  702. -->
  703. <audio controls id="audio_file_{PostID}" src="{RawAudioURL}">This browser does not support HTML 5 audio.</audio>
  704.  
  705. <span class="track"> <br />{block:TrackName}
  706. {TrackName}
  707. {/block:TrackName}{block:Artist} by
  708. {Artist}
  709. {/block:Artist}</span>
  710.  
  711. {block:Caption}
  712. <br /><div class="caption">{Caption}</div>
  713. {/block:Caption}
  714.  
  715. </div>
  716. {/block:Audio}
  717.  
  718.  
  719. {block:Answer}
  720. <div class="post-body ask">
  721. <blockquote class="question">{Question}
  722.  
  723. <br /><br /><span class="asker"> &mdash; {Asker}</span></blockquote>
  724.  
  725. <div class="answer">{Answer}</div>
  726. </div>
  727. {/block:Answer}
  728.  
  729.  
  730.  
  731.  
  732.  
  733.  
  734. <div class="post-footer">
  735.  
  736.  
  737. {block:Date}
  738.  
  739. {block:NoteCount} <a href="{Permalink}">
  740. {NoteCount} notes</a> / {/block:NoteCount}
  741.  
  742.  
  743. <a href="{Permalink}"> <span class="date">
  744. <span class="time">{12Hour}:{Minutes} {AmPm}</span>{block:NewDayDate}, <span class="day"><span class="day-of-month">{DayOfMonth}</span> <span class="month">{ShortMonth}</span> <span class="year">{Year}</span>{/block:NewDayDate}</span>
  745.  
  746. </span></a>
  747.  
  748.  
  749.  
  750. {block:ContentSource}{block:RebloggedFrom}<span class="post-source">/
  751.  
  752. <a href="{ReblogParentURL}">via {ReblogParentName}</a>
  753. {/block:RebloggedFrom}
  754. /
  755. <a href="{SourceURL}"> @
  756. {SourceTitle} </a></span>
  757. {/block:ContentSource}
  758.  
  759.  
  760.  
  761.  
  762.  
  763.  
  764. {/block:Date}
  765. </ul>
  766.  
  767. {block:HasTags} <div class="tags">
  768.  
  769. {block:Tags}
  770. <a class="tag" href="/tagged/{tag}">#{Tag}</a>
  771. {/block:Tags}
  772.  
  773. </div> {/block:HasTags}
  774.  
  775.  
  776. {block:Date}
  777. <div class="buttons">
  778. <span class="button">{LikeButton size="60"}</span>
  779. <span class="button right">{ReblogButton size="60"}</span>
  780. <br style="clear: both" />
  781. </div>
  782.  
  783.  
  784. {/block:Date}
  785.  
  786. </div><!-- post footer -->
  787. </article>
  788. </div><!-- post block -->{/block:Posts}
  789.  
  790.  
  791.  
  792. {block:PostNotes} <div class="notes">{PostNotes} </div>{/block:PostNotes}
  793.  
  794.  
  795.  
  796. </div> <!-- div main-->
  797.  
  798.  
  799. {block:Pagination}<div class="pagination">
  800. {block:PreviousPage}
  801. <a href="{PreviousPage}">Prev</a>
  802. {/block:PreviousPage}
  803.  
  804. {block:JumpPagination length="5"}
  805.  
  806.  
  807.  
  808. {block:CurrentPage}
  809. <span class="current_page">{PageNumber}</span>
  810. {/block:CurrentPage}
  811.  
  812. {block:JumpPage}
  813. <a class="jump_page" href="{URL}">{PageNumber}</a>
  814. {/block:JumpPage}
  815. {/block:JumpPagination}
  816. /&nbsp;{TotalPages}
  817. {block:NextPage}
  818. <a href="{NextPage}">Next</a>
  819. {/block:NextPage}
  820.  
  821.  
  822.  
  823. </div> {/block:Pagination}
  824.  
  825. <div class="standard"><a href="/disable_mobile_interface">Switch to standard view.</a></div>
  826.  
  827.  
  828. <div class="theme-credit"><a href="http://waltzy.tumblr.com">mobile theme by waltzy</a></div>
  829.  
  830. </body>
  831. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement