Advertisement
midthemes

Theme 08 by Jenny

Aug 14th, 2014
1,065
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.02 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!------------
  6.  
  7. THEME 08 BY JENNY // MIDTHEMES.TUMBLR.COM
  8.  
  9. DO NOT STEAL, CLAIM AS YOUR OWN, REMOVE THE CREDIT OR USE AS A BASE CODE
  10.  
  11. ------------->
  12.  
  13. <meta charset="UTF-8">
  14. {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}
  15. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle} {block:TagPage}{Tag} | {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} | {/block:SearchPage}{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}"/>
  17. <link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>
  18. <meta name="select:Body font" content="Roboto" title="Roboto"/>
  19. <meta name="select:Body font" content="Lato" title="Lato"/>
  20. <meta name="select:Body font" content="Arial" title="Arial"/>
  21. <meta name="select:Body font" content="Raleway" title="Raleway"/>
  22. <meta name="select:Body font" content="Oxygen" title="Oxygen"/>
  23. <meta name="text:Title" content=""/>
  24. <meta name="image:Sidebar" content=""/>
  25. <meta name="color:Accent" content="#ed6c5e"/>
  26. <meta name="text:link 1" content="/">
  27. <meta name="text:link 1 title" content="">
  28. <meta name="text:link 2" content="/">
  29. <meta name="text:link 2 title" content="">
  30. <meta name="text:link 3" content="/">
  31. <meta name="text:link 3 title" content="">
  32. <meta name="text:link 4" content="/">
  33. <meta name="text:link 4 title" content="">
  34. <meta name="text:link 5" content="/">
  35. <meta name="text:link 5 title" content="">
  36. <meta name="text:link 6" content="/">
  37. <meta name="text:link 6 title" content="">
  38. <meta name="text:link 7" content="/">
  39. <meta name="text:link 7 title" content="">
  40. <meta name="text:link 8" content="/">
  41. <meta name="text:link 8 title" content="">
  42. <link rel="stylesheet" href="http://static.tumblr.com/hznqxps/ivOmgjf8v/normalize.css"/>
  43. <link href='http://fonts.googleapis.com/css?family={select:Body font}' rel='stylesheet' type='text/css'>
  44. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  45. <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  46. <style type="text/css">
  47.  
  48. body {
  49. font-family: {select:Body font}, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  50. font-size: 9px;
  51. color: #222;
  52. line-height: 16px;
  53. word-wrap: break-word;
  54. }
  55.  
  56. a, a:active, a:focus, a:visited {
  57. text-decoration: none;
  58. color: #444;
  59. -webkit-transition: all 0.2s ease-in-out;
  60. -moz-transition: all 0.2s ease-in-out;
  61. -o-transition: all 0.2s ease-in-out;
  62. transition: all 0.2s ease-in-out;
  63. }
  64.  
  65. a:hover {
  66. color: #000;
  67. -webkit-transition: all 0.2s ease-in-out;
  68. -moz-transition: all 0.2s ease-in-out;
  69. -o-transition: all 0.2s ease-in-out;
  70. transition: all 0.2s ease-in-out;
  71. }
  72.  
  73. h1 {
  74. font-family: {select:Body font}, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  75. font-weight: normal;
  76. font-style: none;
  77. font-size: 14px;
  78. line-height: 18px;
  79. margin:0;
  80. padding:0;
  81. }
  82.  
  83. ol, ul {
  84. list-style: disc;
  85. padding: 2px 0px 3px;
  86. }
  87.  
  88. li {
  89. margin: 0px 0px 0px 20px;
  90. }
  91.  
  92. blockquote {
  93. margin: 3px 0 0 5px;
  94. padding: 0 0 0 10px;
  95. word-wrap: break-word;
  96. border-left: 1px solid #ededed;
  97. }
  98.  
  99. blockquote img {
  100. max-width: 360px;
  101. }
  102.  
  103. em {
  104. font-style: italic;
  105. }
  106.  
  107. iframe, img, embed, object, video {
  108. max-width: 100%;
  109. }
  110.  
  111. ::-webkit-scrollbar-thumb {
  112. height: auto;
  113. background-color: {color:Accent};
  114. border: 3px solid #fff;
  115. }
  116.  
  117. ::-webkit-scrollbar {
  118. width: 11px;
  119. height: 11px;
  120. background-color: #ddd;
  121. border: 5px solid #fff;
  122. }
  123.  
  124. #container {
  125. margin: 50px 480px;
  126. width: 500px;
  127. clear: both;
  128. }
  129.  
  130. .posts {
  131. float: left;
  132. width: 400px;
  133. margin: 50px 0;
  134. background: #fff;
  135. word-wrap: break-word;
  136. display: inline-block;
  137. }
  138.  
  139. .post-photos {
  140. display: block;
  141. margin-bottom: 10px;
  142. }
  143.  
  144. .post-photos img {
  145. width: 400px;
  146. }
  147.  
  148. .posts .link {
  149. width: 360px;
  150. padding: 20px;
  151. color: #fff;
  152. font-size: 12px;
  153. text-align: right;
  154. line-height: 18px;
  155. text-decoration:none;
  156. background: {color:Accent};
  157. display: inline-block;
  158. }
  159.  
  160. .posts .quote {
  161. width: 360px;
  162. padding: 20px;
  163. color: #fff;
  164. font-size: 11px;
  165. font-style:italic;
  166. line-height: 18px;
  167. background: {color:Accent};
  168. }
  169.  
  170. .posts .source {
  171. width: 370px;
  172. padding: 15px;
  173. font-size: 10px;
  174. margin: 0px 10px 0px 0px;
  175. text-align: right;
  176. line-height: 15px;
  177. background: #fbfbfb;
  178. }
  179.  
  180. .post-chat {
  181. width: 370px;
  182. padding: 15px;
  183. background: #fbfbfb;
  184. }
  185.  
  186. ul.chat {
  187. margin: 0px;
  188. padding: 2px;
  189. list-style: none;
  190. }
  191.  
  192. ul.chat li {
  193. margin: 0px;
  194. }
  195.  
  196. .posts .label {
  197. font-weight:700;
  198. }
  199.  
  200. .album-art {
  201. position: absolute;
  202. z-index: 999;
  203. }
  204.  
  205. .album-art img {
  206. width: 80px; height: 80px;
  207. }
  208.  
  209. .default-album-art {
  210. position: relative;
  211. }
  212.  
  213. .album-art img {
  214. width: 80px;
  215. height: 80px;
  216. }
  217.  
  218. .player {
  219. width: 29px;
  220. height: 37px;
  221. margin-top: 27px;
  222. margin-left: 26px;
  223. overflow: hidden;
  224. position: absolute;
  225. opacity: 0.9;
  226. filter: alpha(opacity=90);
  227. z-index: 9999999;
  228. }
  229.  
  230. .audio-info {
  231. width: 320px;
  232. height: 45px;
  233. padding-top: 35px;
  234. margin-left: 80px;
  235. color: #fff;
  236. text-align: center;
  237. background: {color:Accent};
  238. }
  239.  
  240. .question {
  241. width: 370px;
  242. padding: 15px;
  243. color: #fff;
  244. background: {color:Accent};
  245. }
  246.  
  247. .question a {
  248. color: #fff;
  249. }
  250.  
  251. .answer {
  252. width: 360px;
  253. padding: 20px;
  254. background: #fbfbfb;
  255. }
  256.  
  257. .posts .caption {
  258. width: 370px;
  259. margin: 0px;
  260. font-size: 9px;
  261. padding: 10px 15px;
  262. background: #fbfbfb;
  263. }
  264.  
  265. .photo-caption {
  266. width: 370px;
  267. margin:-5px 0px -10px;
  268. font-size: 9px;
  269. padding: 10px 15px;
  270. background: #fbfbfb;
  271. }
  272.  
  273. .posts h3 {
  274. width:360px;
  275. padding: 20px;
  276. margin: 0;
  277. font-size: 12px;
  278. font-weight: normal;
  279. background:{color:Accent};
  280. }
  281.  
  282. .posts h3 a {
  283. color:#fff;
  284. }
  285.  
  286. #info {
  287. width: 400px;
  288. margin: 0;
  289. padding: 0;
  290. color: #fff;
  291. font-size: 8px;
  292. font-family: calibri;
  293. text-align: right;
  294. line-height: 12px;
  295. }
  296.  
  297. #info a {
  298. color: #222;
  299. }
  300.  
  301. #info a:hover {
  302. color: #000;
  303. }
  304.  
  305. .tags {
  306. color:#222;
  307. margin-top: -3px;
  308. word-wrap: break-word;
  309. }
  310.  
  311. .tags:hover {
  312. color: #000;
  313. }
  314.  
  315. .notes {
  316. width: 400px;
  317. padding: 0;
  318. margin: 5px 0 0 -20px;
  319. line-height: 10px;
  320. }
  321.  
  322. ol.notes, .notes li {
  323. width: 400px;
  324. padding: 5px 0;
  325. list-style: none;
  326. }
  327.  
  328. .notes img {
  329. display: none;
  330. }
  331.  
  332. #sidebar {
  333. position: fixed;
  334. margin: 80px 180px;
  335. background: #fbfbfb;
  336. }
  337.  
  338. #sidebar img {
  339. width: 180px;
  340. }
  341.  
  342. #title {
  343. width: 160px;
  344. padding: 10px;
  345. color: ;
  346. font-family: 'Lato', sans-serif;
  347. font-size: 8px;
  348. text-align: right;
  349. letter-spacing: 2px;
  350. text-transform: uppercase;
  351. background: #fbfbfb;
  352. }
  353.  
  354. #nav {
  355. width: 140px;
  356. padding: 20px;
  357. margin: -4px 0 0;
  358. background: #fbfbfb;
  359. font-size: 7px;
  360. font-family: 'Raleway', sans-serif;
  361. text-transform: uppercase;
  362. }
  363.  
  364. #nav a {
  365. width: 140px;
  366. color: #888;
  367. margin: 4px 0;
  368. padding: 0;
  369. letter-spacing: 2px;
  370. display: inline-block;
  371. border-bottom: 1px solid #eeeeee;
  372. -webkit-transition: all 0.2s ease-in-out;
  373. -moz-transition: all 0.2s ease-in-out;
  374. -o-transition: all 0.2s ease-in-out;
  375. transition: all 0.2s ease-in-out;
  376. }
  377.  
  378. #nav a:hover {
  379. letter-spacing: 6px;
  380. -webkit-transition: all 0.2s ease-in-out;
  381. -moz-transition: all 0.2s ease-in-out;
  382. -o-transition: all 0.2s ease-in-out;
  383. transition: all 0.2s ease-in-out;
  384. }
  385.  
  386. .c {
  387. position: fixed;
  388. left: 7px;
  389. bottom: 2px;
  390. font-size:9px;
  391. color:{color:Accent};
  392. }
  393.  
  394. {CustomCSS}
  395. </style>
  396. </head>
  397. <body>
  398. <div id="sidebar">
  399. <div id="title"><a href="/">{text:Title}</a></div>
  400. <img src="{image:Sidebar}"/>
  401. <div id="nav">
  402. {block:iflink1}<a href="{text:link 1}">{text:link 1 title}</a>{/block:iflink1}
  403. {block:iflink2}<a href="{text:link 2}">{text:link 2 title}</a>{/block:iflink2}
  404. {block:iflink3}<a href="{text:link 3}">{text:link 3 title}</a>{/block:iflink3}
  405. {block:iflink4}<a href="{text:link 4}">{text:link 4 title}</a>{/block:iflink4}
  406. {block:iflink5}<a href="{text:link 5}">{text:link 5 title}</a>{/block:iflink5}
  407. {block:iflink6}<a href="{text:link 6}">{text:link 6 title}</a>{/block:iflink6}
  408. {block:iflink7}<a href="{text:link 7}">{text:link 7 title}</a>{/block:iflink7}
  409. {block:iflink8}<a href="{text:link 8}">{text:link 8 title}</a>{/block:iflink8}
  410. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}{/block:Pagination}
  411. </div>
  412. </div>
  413. <a href="http://midthemes.tumblr.com/"><div class="c">❤</div></a>
  414. <div id="container">
  415. {block:Posts}
  416. <div class="posts">
  417. {block:Text}
  418. {block:Title}
  419. <h3><a href="{Permalink}">{Title}</a></h3>
  420. {/block:Title}
  421. <div class="caption">{Body}</div>
  422. {/block:Text}
  423. {block:Photo}
  424. <div class="post-photos">
  425. {LinkOpenTag}
  426. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  427. {LinkCloseTag}
  428. {block:Caption}
  429. <div class="photo-caption">{Caption}</div>
  430. {/block:Caption}
  431. </div>
  432. {/block:Photo}
  433. {block:Photoset}
  434. <div class="post-photosets">
  435. {Photoset-400}
  436. {block:Caption}
  437. <div class="caption">{Caption}</div>
  438. {/block:Caption}
  439. </div>
  440. {/block:Photoset}
  441. {block:Quote}
  442. <div class="quote">"{Quote}"</div>
  443. {block:Source}
  444. <div class="source">&mdash; {Source}</div>
  445. {/block:Source}
  446. {/block:Quote}
  447. {block:Link}
  448. <a href="{URL}" class="link" {Target}>{Name}</a>
  449. {block:Description}
  450. <div class="caption">{Description}</div>
  451. {/block:Description}
  452. {/block:Link}
  453. {block:Chat}
  454. <div class="post-chat">
  455. {block:Title}
  456. <h3><a href="{Permalink}">{Title}</a></h3>
  457. {/block:Title}
  458. {block:Lines}
  459. <ul class="chat">
  460. <li>
  461. {block:Label}
  462. <span class="label">{Label}</span>
  463. {/block:Label}
  464. {Line}
  465. </li>
  466. </ul>
  467. {/block:Lines}
  468. </div>
  469. {/block:Chat}
  470. {block:Audio}
  471. {block:AlbumArt}
  472. <div class="album-art">
  473. <img src="{AlbumArtURL}"/>
  474. </div>
  475. {/block:AlbumArt}
  476. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" class="default-album-art" width="80px" align="left">
  477. <div class="player">
  478. <div class="audio">
  479. {AudioPlayerWhite}
  480. </div>
  481. </div>
  482. <div class="audio-info">
  483. {block:TrackName}{TrackName}{/block:TrackName}
  484. {block:Artist} by <b>{Artist}</b>{/block:Artist} </div>
  485. {block:Caption}
  486. <div class="caption">{Caption}</div>
  487. {/block:Caption}
  488. {/block:Audio}
  489. {block:Video}
  490. {Video-400}
  491. {block:Caption}
  492. <div class="caption">{Caption}</div>
  493. {/block:Caption}
  494. {/block:Video}
  495. {block:Answer}
  496. <div class="question">
  497. <h1>{Asker} asked</h1>
  498. {Question}
  499. </div>
  500. <div class="answer">
  501. {Answer}
  502. </div>
  503. {/block:Answer}
  504. <div id="info">
  505. {block:Date}
  506. <a href="{Permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear},</a>
  507. {/block:Date}
  508. {block:NoteCount}
  509. ,&nbsp; <a href="{Permalink}">{NoteCountWithLabel},</a>
  510. {/block:NoteCount}
  511. {block:RebloggedFrom}
  512. <a href="{ReblogParentURL}">&nbsp; via,</a>
  513. {block:ContentSource}
  514. <a href="{SourceURL}">&nbsp; source,</a>
  515. {/block:ContentSource}
  516. {/block:RebloggedFrom}
  517. {block:HasTags}
  518. <div class="tags">
  519. {block:Tags}
  520. <a href="{TagURL}">&nbsp; {Tag};</a>
  521. {/block:Tags}
  522. </div>
  523. {/block:HasTags}
  524. </div>
  525. {block:PermalinkPage}
  526. {block:PostNotes}{PostNotes}{/block:PostNotes}
  527. {/block:PermalinkPage}
  528. </div>
  529. {/block:Posts}
  530. </div>
  531. </body>
  532. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement