med-x

bare bones tumblr theme (redux edit-ish, mobile-responsive)

Mar 5th, 2018
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.18 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}" />
  8. {/block:Description}
  9. <meta name="text:link divide" content="https://78.media.tumblr.com/e44b695d978b60032f05ca281942ebce/tumblr_inline_mjgu829Esb1roozkr.gif"/>
  10.  
  11. <title>{Title}</title>
  12.  
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. <link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  16.  
  17. <script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  18.  
  19. <style type="text/css">
  20.  
  21. body {
  22. margin:0px;
  23. background:{BackgroundColor};
  24. font-family: arial;
  25. font-size:16px;
  26. line-height:140%;
  27. color: {TitleColor};
  28. {block:iftiledbg}background: {color:Background} url('{image:Background}') top left fixed repeat;{/block:iftiledbg}
  29. {block:ifmaxbg}background: {color:Background} url('{image:Background}') no-repeat center center fixed;
  30. -webkit-background-size: cover;
  31. -moz-background-size: cover;
  32. -o-background-size: cover;
  33. background-size: cover;
  34. {/block:ifmaxbg}
  35. }
  36.  
  37. p{
  38. margin:0 0 10px 0;
  39. padding:0;
  40. }
  41.  
  42. pre {
  43. white-space: pre-wrap;
  44. white-space: -moz-pre-wrap;
  45. white-space: -pre-wrap;
  46. white-space: -o-pre-wrap;
  47. word-wrap: break-word;
  48. }
  49.  
  50. a{
  51. color:{AccentColor};
  52. text-decoration:underline;
  53. }
  54.  
  55. a:hover{
  56. color:{color:link hover};
  57. }
  58.  
  59. li{
  60. margin-left:-15px;
  61. }
  62.  
  63. #wrapper{
  64. width:600px;
  65. margin:50px auto;
  66. }
  67.  
  68. #sidebar{
  69. width:128px;
  70. position:fixed;
  71. padding:10px;
  72. margin-left:-40px;
  73. top:175px;
  74. text-align:center;
  75. background:{color:postbg};
  76. {block:iftransparent}
  77. background:{color:bg};
  78. {block:iftiledbg}background: {color:Background} url('{image:Background}') top left fixed repeat;{/block:iftiledbg}
  79. {block:ifmaxbg}background: {color:Background} url('{image:Background}') no-repeat center center fixed;
  80. -webkit-background-size: cover;
  81. -moz-background-size: cover;
  82. -o-background-size: cover;
  83. background-size: cover;
  84. {/block:ifmaxbg}
  85. {/block:iftransparent}
  86.  
  87.  
  88. }
  89.  
  90. .sidelinks{
  91. background:{color:postbg}
  92. {block:iftransparent}
  93. background:{color:bg};
  94. {block:ififtiledbackground}background: {color:Background} url('{image:Background}') top left fixed repeat;{/block:ififtiledbackground}
  95. {block:ifmaxbg}background: {color:Background} url('{image:Background}') no-repeat center center fixed;
  96. -webkit-background-size: cover;
  97. -moz-background-size: cover;
  98. -o-background-size: cover;
  99. background-size: cover;
  100. {/block:ifmaxbg}
  101. {/block:iftransparent};
  102. padding:5px;
  103. text-align:center;
  104. }
  105.  
  106. #content{
  107. width:400px;
  108. margin-left:200px;
  109. overflow:hidden;
  110. }
  111.  
  112. .post{
  113. width:400px <padding:10px;>margin:0 0 50px 0;
  114. margin:0 0 50px 0;
  115. padding:10px;
  116.  
  117. background:{color:postbg};
  118. {block:iftransparent}
  119. background:{color:bg};
  120. {block:iftiledbg}background: {color:Background} url('{image:Background}') top left fixed repeat;{/block:iftiledbg}
  121. {block:ifmaxbg}background: {color:Background} url('{image:Background}') no-repeat center center fixed;
  122. -webkit-background-size: cover;
  123. -moz-background-size: cover;
  124. -o-background-size: cover;
  125. background-size: cover;
  126. {/block:ifmaxbg}
  127. {/block:iftransparent}
  128.  
  129. }
  130.  
  131. .post img{
  132. max-width:100%;
  133. }
  134.  
  135. #nav{
  136. margin:50px 0 0 0;
  137. }
  138.  
  139.  
  140. /*
  141. content in the body of the posts - quotes, asks, etc
  142. "media" contains photos, photosets, videos, audio posts
  143. */
  144. .media{
  145. margin:0 0 10px 0;
  146. }
  147.  
  148. .title{
  149. font-weight:normal;
  150. font-size:18px;
  151. margin:0 0 10px 0;
  152. }
  153.  
  154. .quote{
  155. font-weight:normal;
  156. font-size:16px;
  157. font-style:italic;
  158. margin:0 0 10px 0;
  159. }
  160.  
  161. .question{
  162. margin-bottom:10px;
  163. }
  164.  
  165. blockquote{
  166. margin:0 0 10px 10px;
  167. padding:0 0 0 10px;
  168. border-left:solid 1px #000;
  169. }
  170.  
  171. /*
  172. post footers - date, tags, via and source
  173. */
  174. .post .footer{
  175. margin:0;
  176. text-align:center;
  177. }
  178.  
  179. /*
  180. post notes
  181. */
  182. ol.notes{
  183. list-style-type:none;
  184. padding:0;
  185. margin:0;
  186. }
  187.  
  188. ol.notes li.note img{
  189. width:16px;
  190. height:16px;
  191. }
  192.  
  193. ol.notes li.note{
  194. margin:0px;
  195. }
  196.  
  197. {CustomCSS}
  198. </style>
  199. </head>
  200.  
  201. <body>
  202. <div id="wrapper">
  203.  
  204.  
  205. <div id="sidebar">
  206. <img src="{PortraitURL-128}" style="border-radius:4%">
  207. {block:Description}
  208. <p>{Description}</p>
  209. {/block:Description}
  210. <div class="sidelinks">
  211. <a href="/" title="{text:homepage}">home</a> <img src="{text:link divide}"> <a href="/ask" title="{text:ask page}">ask</a>
  212. </div>
  213.  
  214.  
  215. </div>
  216.  
  217.  
  218.  
  219. <div id="content">
  220. {block:Posts}
  221.  
  222. <div class="post">
  223.  
  224. {block:Text}
  225. {block:Title}
  226. <div class="title">{Title}</div>
  227. {/block:Title}
  228. {Body}
  229. {/block:Text}
  230.  
  231. {block:Photo}
  232. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  233. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  234. {/block:Photo}
  235.  
  236. {block:Photoset}
  237. <div class="media">{Photoset-400}</div>
  238. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  239. {/block:Photoset}
  240.  
  241. {block:Quote}
  242. <div class="quote">"{Quote}"</div>
  243. {block:Source}
  244. <div class="quotesource">{Source}</div>
  245. {/block:Source}
  246. {/block:Quote}
  247.  
  248. {block:Link}
  249. <div class="title"><a href="{URL}">{Name}</a></div>
  250. {block:Description}
  251. <div class="description">{Description}</div>
  252. {/block:Description}
  253. {/block:Link}
  254.  
  255. {block:Chat}
  256. {block:Title}
  257. <div class="title">{Title}</div>
  258. {/block:Title}
  259.  
  260. {block:Lines}
  261. <div class="{Alt} user_{UserNumber}">
  262. {block:Label}
  263. <b>{Label}</b>{/block:Label}
  264. &nbsp;{Line}
  265. </div>
  266. {/block:Lines}
  267. {/block:Chat}
  268.  
  269. {block:Video}
  270. <div class="media">{Video-400}</div>
  271. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  272. {/block:Video}
  273.  
  274. {block:Audio}
  275. <div class="media">
  276. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  277. {AudioPlayerWhite}
  278. {block:TrackName}{TrackName}<br>{/block:TrackName}
  279. {block:Artist}{Artist}<br>{/block:Artist}
  280. {block:Album}{Album}{/block:Album}
  281. </div>
  282. {block:Caption}{Caption}{/block:Caption}
  283. {/block:Audio}
  284.  
  285. {block:Answer}
  286. <div class="question">{Asker}: {Question}</div>
  287. <div class="caption">{Answer}</div>
  288. {/block:Answer}
  289.  
  290.  
  291. {block:Date}
  292. <div class="footer">
  293. <a href="{Permalink}">{TimeAgo}{block:NoteCount} ({NoteCountWithLabel}){/block:NoteCount}</a>
  294. {block:HasTags}<br>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  295. {block:RebloggedFrom}<br><a href="{ReblogParentURL}">{lang:Reblogged from ReblogParentName}</a>{/block:RebloggedFrom}
  296. {block:ContentSource}<br><a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>{/block:ContentSource}
  297. </div>
  298.  
  299. {block:PermalinkPage}
  300. {block:NoteCount}
  301. {block:PostNotes}{PostNotes}{/block:PostNotes}
  302. {/block:NoteCount}
  303. {/block:PermalinkPage}
  304. {/block:Date}
  305.  
  306. </div>
  307. {/block:Posts}
  308.  
  309. {block:Pagination}
  310. <div id="nav">
  311. {block:PreviousPage}<a href="{PreviousPage}">{lang:Previous}</a>{/block:PreviousPage}
  312.  
  313. {block:NextPage}<a href="{NextPage}">{lang:Next}</a>{/block:NextPage}
  314. </div>
  315. {/block:Pagination}
  316. </div>
  317. </div>
  318.  
  319. </div>
  320.  
  321. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  322. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  323.  
  324. </body>
  325. </html>
Advertisement
Add Comment
Please, Sign In to add comment