aubrieta

07 theme: gece

Feb 12th, 2016
3,079
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.49 KB | None | 0 0
  1. <!---
  2.  
  3. theme: gece
  4.  
  5. do not steal, claim as your own, redistribute.
  6. do not remove the credit.
  7.  
  8. coded by
  9. aubretia (ifallontragedy)
  10.  
  11. --->
  12.  
  13.  
  14.  
  15. <!DOCTYPE html>
  16. <head>
  17.  
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24. <!--Default Variables-->
  25.  
  26. <meta name="color:background" content="#f6f6f6"/>
  27. <meta name="color:posts" content="#fff"/>
  28. <meta name="color:text" content="#525252"/>
  29. <meta name="color:link" content="#bcbcbc"/>
  30. <meta name="color:hover" content="#000000"/>
  31. <meta name="color:border" content="#e7e7e7"/>
  32. <meta name="color:accent" content="#8c4050"/>
  33.  
  34. <meta name="image:background" content="" />
  35.  
  36. <meta name="select:font" content="'open sans'" title="open sans" />
  37. <meta name="select:font" content="'lato'" title="lato" />
  38. <meta name="select:font" content="'roboto'" title="roboto" />
  39. <meta name="select:font" content="'karla'" title="karla" />
  40. <meta name="select:font" content="'hind'" title="hind" />
  41. <meta name="select:font" content="helvetica" title="helvetica" />
  42. <meta name="select:font" content="arial" title="arial" />
  43. <meta name="select:font" content="trebuchet ms" title="trebuchet ms" />
  44.  
  45. <meta name="select:font size" content="9px" title="9px" />
  46. <meta name="select:font size" content="9.5px" title="9.5px" />
  47. <meta name="select:font size" content="10px" title="10px" />
  48. <meta name="select:font size" content="10.5px" title="10.5px" />
  49. <meta name="select:font size" content="11px" title="11px" />
  50.  
  51. <meta name="text:link i" content="" />
  52. <meta name="text:link ii" content="" />
  53. <meta name="text:link iii" content="" />
  54. <meta name="text:link iv" content="" />
  55. <meta name="text:link i text" content="link i" />
  56. <meta name="text:link ii text" content="link ii" />
  57. <meta name="text:link iii text" content="link iii" />
  58. <meta name="text:link iv text" content="link iv" />
  59.  
  60. <meta name="if:500px posts" content="0"/>
  61. <meta name="if:font antialiasing" content="0"/>
  62.  
  63.  
  64. <!-- jquery for tooltips-->
  65.  
  66.  
  67. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  68.  
  69. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  70.  
  71. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Lato:400,700|Roboto:400,700|Hind:400,700|Karla:400,700' rel='stylesheet' type='text/css'>
  72.  
  73. <style type="text/css">
  74.  
  75. /*MAIN*/
  76. body {
  77. background: {color:background};
  78. background-image: url('{image:background}');
  79. color:{color:text};
  80. font: {select:font size}/1.5em {select:font}, sans-serif;
  81. text-align: justify;
  82. margin: 0;
  83.  
  84. {block:iffontantialiasing}-moz-osx-font-smoothing: grayscale;
  85. -webkit-font-smoothing: antialiased;
  86. font-smoothing: antialiased;{/block:iffontantialiasing}
  87. }
  88.  
  89. a {
  90. color:{color:link};
  91. text-decoration: none;
  92. }
  93.  
  94. a:hover {
  95. color: {color:hover};
  96. }
  97.  
  98. #entries {
  99. position:relative;
  100. height: 100%;
  101. padding-bottom: 10px;
  102. padding-top: 40px;
  103. }
  104.  
  105. #posts {
  106. text-align: justify;
  107. height: 100%;
  108. {block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
  109. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  110. position: relative;
  111. background: {color:posts};
  112. border: 1px solid {color:border};
  113. padding: 30px;
  114. padding-bottom: 0px;
  115. margin-bottom: 50px;
  116. margin-left: auto;
  117. margin-right: auto;
  118. }
  119.  
  120. #posts img {
  121. {block:ifnot500pxposts}max-width: 400px!important;{/block:ifnot500pxposts}
  122. {block:if500pxposts}max-width: 500px!important;{/block:if500pxposts}
  123. margin: auto;
  124. }
  125.  
  126. #permalink {
  127. margin-top: 30px;
  128. border-top: 1px solid {color:border};
  129. padding: 10px 30px;
  130. margin-left: -30px;
  131. margin-right: -30px;
  132. font-family: {text:font};
  133. }
  134.  
  135. .date {
  136. text-transform: lowercase;
  137. margin-right: 3px;
  138. }
  139.  
  140. .date:first-letter{
  141. text-transform: capitalize;
  142. }
  143.  
  144. .tags {
  145. margin-top: 4px;
  146. }
  147.  
  148. .tags a {
  149. padding-right: 3px;
  150. text-decoration: underline;
  151. }
  152.  
  153. .tags a::after {
  154. content: '';
  155. color: {color:text};
  156. }
  157.  
  158. .reblog_button {
  159. float: right;
  160. }
  161.  
  162.  
  163. /*HEAD*/
  164. #sidebar {
  165. width: 400px;
  166. padding-right: 60px;
  167. margin-top: 100px;
  168. margin-left: auto;
  169. margin-right: auto;
  170. }
  171.  
  172. .img img, .img {
  173. vertical-align: top;
  174. text-align: center;
  175. margin-bottom: 5px;
  176. -webkit-border-radius: 100%;
  177. -moz-border-radius: 100%;
  178. border-radius: 100%;
  179. -moz-transition-duration:0.6s;
  180. -webkit-transition-duration:0.6s;
  181. -o-transition-duration:0.6s;
  182. }
  183.  
  184. .img:hover {
  185. opacity: 0.8;
  186. -moz-transition-duration:0.6s;
  187. -webkit-transition-duration:0.6s;
  188. -o-transition-duration:0.6s;
  189. }
  190.  
  191. .dsc {
  192. text-align: justify;
  193. padding-left: 15px;
  194. }
  195.  
  196. .title {
  197. font-size: 14px;
  198. font-family: georgia;
  199. color: {color:accent};
  200. }
  201.  
  202. .links {
  203. text-align: left;
  204. margin-bottom: 10px;
  205. }
  206.  
  207. .links a {
  208. margin-right: 3px;
  209. }
  210.  
  211. /*PAGINATION*/
  212. #pag {
  213. text-align: center;
  214. {block:ifnot500pxposts}max-width: 400px;{/block:ifnot500pxposts}
  215. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  216. margin: auto;
  217. margin-bottom: 15px;
  218. }
  219.  
  220. #pag a {
  221. color: {color:links};
  222. }
  223.  
  224. #pag a:hover {
  225. color: {color:hover};
  226. }
  227.  
  228.  
  229. /*INSIDE POSTS*/
  230. #posts img, #posts img a {
  231. {block:ifnot500pxposts}max-width: 400px;{/block:ifnot500pxposts}
  232. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  233. }
  234.  
  235. bold, strong, b {
  236. font-weight: bold;
  237. }
  238.  
  239. i, italic, em {
  240. font-style: italic;
  241. }
  242.  
  243. small, sub, big, sup {
  244. font-size: {select:font size};
  245. }
  246.  
  247. code {
  248. font-family: courier new;
  249. letter-spacing: 0px;
  250. font-size: 12px;
  251. }
  252.  
  253. blockquote {
  254. border-left: 1px solid {color:border};
  255. padding-left: 10px;
  256. margin-left: 5px;
  257. {block:ifnot500pxposts}max-width: 400px!important;{/block:ifnot500pxposts}
  258. {block:if500pxposts}max-width: 500px!important;{/block:if500pxposts}
  259. margin-right: 5px;
  260. }
  261.  
  262. ul li {
  263. list-style: circle;
  264. list-style-position: outside;
  265. }
  266.  
  267. ol li {
  268. list-style: lower-roman;
  269. list-style-position: outside;
  270. }
  271.  
  272. .chat {
  273. font-family: courier new;
  274. }
  275.  
  276. .chat b {
  277. font-family: {select:font};
  278. }
  279.  
  280. /*NOTES*/
  281. ol.notes {
  282. list-style-type: none;
  283. width: 460px;
  284. padding: 0;
  285. margin: 0 auto;
  286. margin-bottom: 25px;
  287. }
  288.  
  289. ol.notes li.note {
  290. list-style-type:none;
  291. text-align: left;
  292. border-bottom: 1px solid {color:border};
  293. padding: 5px 0px;
  294. }
  295.  
  296. ol.notes li.note img {
  297. display: none;
  298. }
  299.  
  300. img {
  301. filter: none;
  302. }
  303.  
  304. /*POST TITLE*/
  305. .ptitle {
  306. line-height: 1.3em;
  307. color: {color:accent};
  308. font-family: georgia;
  309. font-size: 14px;
  310. }
  311.  
  312. .ptitle a {
  313. display: block;
  314. color: {color:accent};
  315. }
  316.  
  317. .ptitle a:hover {
  318. color: {color:hover};
  319. }
  320.  
  321. /*quote*/
  322. .quote {
  323. text-align: left;
  324. font-size: 14px;
  325. font-family: {text:font};
  326. line-height: 1.2em;
  327. letter-spacing: 0.5;
  328. font-family: georgia;
  329. word-spacing: 3px;
  330. width: 360px;
  331. color: {color:accent};
  332. }
  333.  
  334. .mark {
  335. color: {color:border};
  336. vertical-align: top;
  337. font-family: georgia;
  338. font-size: 100px;
  339. padding-top: 37px;
  340. }
  341.  
  342. .source {
  343. font-style: italic;
  344. margin-bottom: 10px;
  345. text-align: center;
  346. letter-spacing: 1;
  347. }
  348.  
  349. /*ASK*/
  350. #ask {
  351. padding-bottom: 15px;
  352. margin-bottom:7px;
  353. border-bottom: 1px solid {color:border};
  354. text-align: center;
  355. }
  356.  
  357. .asker {
  358. text-transform: uppercase;
  359. letter-spacing: 1px;
  360. font-size: 7px;
  361. text-align: right;
  362. }
  363.  
  364. .asker a {
  365. color: {color:accent};
  366. }
  367.  
  368. .asker a:hover {
  369. color: {color:hover};
  370. }
  371.  
  372. .askicon {
  373. float: right;
  374. filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  375. filter: gray; /* IE6-9 */
  376. -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  377. -webkit-border-radius: 100%;
  378. border-radius: 100%;
  379. -moz-border-radius: 100%;
  380. margin-left: 5px;
  381. width: 16px;
  382. }
  383.  
  384. /*AUDIO*/
  385. .albumart img {
  386. width: 70px;
  387. float: right;
  388. padding: 3px;
  389. border: 1px solid {color:border};
  390. }
  391.  
  392. .albumart {
  393. text-align: center;
  394. }
  395.  
  396. .audio {
  397. margin-bottom: 5px;
  398. }
  399.  
  400. #play {
  401. opacity: 0.5;
  402. background-color: white;
  403. z-index: 1000;
  404. {block:ifnot500pxposts}margin: 17px 355px;{/block:ifnot500pxposts}
  405. {block:if500pxposts}margin: 17px 455px;{/block:if500pxposts}
  406. position: absolute;
  407. top: 30px;
  408. -moz-border-radius: 100%;
  409. -webkit-border-radius: 100%;
  410. border-radius: 100%;
  411. left: 15px;
  412. -moz-transition-duration:0.6s;
  413. -webkit-transition-duration:0.6s;
  414. -o-transition-duration:0.6s;
  415. }
  416.  
  417. .button {
  418. width: 18px;
  419. height: 30px;
  420. overflow: hidden;
  421. position: relative;
  422. z-index: 1000;
  423. margin: 8px 16px 5px 8px;
  424. }
  425.  
  426. #play:hover {
  427. opacity: 1;
  428. -moz-transition-duration:0.6s;
  429. -webkit-transition-duration:0.6s;
  430. -o-transition-duration:0.6s;
  431. }
  432.  
  433. /*CREDIT*/
  434. #credit {
  435. font-size:8px;
  436. padding-bottom: 60px;
  437. top: 20px;
  438. {block:ifnot500pxposts}width: 400px;{/block:ifnot500pxposts}
  439. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  440. margin: auto;
  441. line-height: 100%;
  442. text-align: center;
  443. letter-spacing: 0.5px;
  444. text-transform: uppercase;
  445. }
  446.  
  447. #credit a {
  448. font-weight: bold;
  449. color: {color:accent};
  450. }
  451.  
  452. #credit a:hover {
  453. color: {color:hover};
  454. }
  455.  
  456. /*SCROLLBAR AND SELECTION*/
  457. #s-m-t-tooltip{
  458. color: {color:text};
  459. width: auto;
  460. font-size: 7px;
  461. padding: 2px 4px;
  462. text-transform: uppercase;
  463. background-color: {color:accent};
  464. z-index: 100;
  465. border: 1px solid {color:border};
  466. position: absolute;
  467. display:inline-block;
  468. margin-top: 20px;
  469. margin-left: 10px;
  470. }
  471.  
  472. ::-webkit-scrollbar-thumb:vertical {
  473. background-color: {color:accent};
  474. width:1px;
  475. height:2px;
  476. border-left: 9px solid {color:background};
  477. border-right: 9px solid {color:background};
  478. }
  479.  
  480. ::-webkit-scrollbar-thumb:horizontal {
  481. background-color:{color:background};
  482.  
  483. }
  484.  
  485. ::-webkit-scrollbar {
  486. width: 19px;
  487. background-color:{color:background};
  488.  
  489. }
  490.  
  491. ::-webkit-scrollbar-track {
  492. background-color: {color:background};
  493. border-left: 9px solid {color:background};
  494. border-right: 9px solid {color:background};
  495. border-top: 0px solid {color:background};
  496. border-bottom: 0px solid {color:background};
  497. }
  498.  
  499.  
  500. ::selection {
  501. color:{color:background};
  502. background-color: {color:accent};
  503. }
  504.  
  505. ::-moz-selection {
  506. color:{color:background};
  507. background-color: {color:accent};
  508. }
  509.  
  510. {CustomCSS}
  511.  
  512. </style>
  513. </head>
  514.  
  515. <body>
  516.  
  517. <div id="sidebar">
  518. <table>
  519. <td class="img"><a href="/"><img src="{PortraitURL-64}"></a>
  520. </td>
  521.  
  522.  
  523. <td class="dsc"><div class="title">{title}</div>
  524. <div class="links"><a href="{text:link i}">{text:link i text}</a> <a href="{text:link ii}">{text:link ii text}</a> <a href="{text:link iii}">{text:link iii text}</a> <a href="{text:link iv}">{text:link iv text}</a></div>
  525. {description}
  526. </td>
  527. </table>
  528. </div>
  529.  
  530. <div id="entries">
  531.  
  532. {block:Posts}
  533.  
  534. <div id="posts">
  535.  
  536. {block:Text}<div class="capt">
  537. {block:Title}<div class="ptitle">{Title}<br></div>{/block:Title}
  538. {Body}</div>
  539. {/block:Text}
  540.  
  541. {block:Link}<div class="capt">
  542. <div class="ptitle"><a href="{URL}" {Target}>{Name} โ†’</a></div>
  543. {block:Description}{Description}{/block:Description}</div>
  544. {/block:Link}
  545.  
  546. {block:Quote}<div class="capt">
  547. <center><table><td class="mark">โ€œ</td><td class="quote">{Quote}</td></table>
  548. {block:Source}
  549. <div class="source"><br>{Source}</div></center>
  550. {/block:Source}</div>
  551. {/block:Quote}
  552.  
  553. {block:Chat}<div class="capt"><div class="chat">
  554. {block:Title}<div class="ptitle">{Title}</div><p>{/block:Title}
  555. {block:Lines}<div style="padding: 10px 0px; border-bottom: 1px solid {color:border}"><div class="{Alt} user_{UserNumber}">
  556. {block:Label}<b>{Label}</b>{/block:Label}</div>
  557. {Line}<br></div>{/block:Lines}<p></p></div></div>{/block:Chat}
  558.  
  559. {block:Photo}{LinkOpenTag}
  560. {block:ifnot500pxposts}<img src="{PhotoURL-400}">{/block:ifnot500pxposts}
  561. {block:if500pxposts}<img src="{PhotoURL-500}">{/block:if500pxposts}
  562. {LinkCloseTag}
  563. {block:Caption}<div class="capt">
  564. {Caption}</div>
  565. {/block:Caption}
  566. {/block:Photo}
  567.  
  568. {block:Photoset}
  569. {block:ifnot500pxposts}{Photoset-400}{/block:ifnot500pxposts}
  570. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  571. {block:Caption}<div class="capt">
  572. {Caption}</div>
  573. {/block:Caption}
  574. {/block:Photoset}
  575.  
  576. {block:Video}
  577. {block:ifnot500pxposts}{Video-400}{/block:ifnot500pxposts}
  578. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  579. {block:Caption}<div class="capt">
  580. {Caption}</div>
  581. {/block:Caption}
  582. {/block:Video}
  583.  
  584. {block:Audio}<div class="capt">
  585. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  586. <div class="audio"><div id="play">
  587. <div class="button">{AudioPlayerWhite}</div></div>
  588. <div style="padding-top: 16px; {block:ifnot500pxposts}width: 316px;{/block:ifnot500pxposts} {block:if500pxposts}width: 416px;{/block:if500pxposts} text-align: center; padding-bottom: 15px; border: 1px solid {color:border}; max-height: 70px;"><b>Track:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  589. <b>Artist:</b> {block:Artist}{Artist}{/block:Artist}<br>
  590. <b>Album:</b> {block:Album}{Album}{/block:Album}</div></div>
  591. {block:Caption}{Caption}{/block:Caption}</div>{/block:Audio}
  592.  
  593.  
  594.  
  595. {block:Answer}<div class="capt">
  596. <div id="ask">{Question}</div>
  597. <div class="asker">asked by {Asker}</div>
  598. {Answer}</div>{/block:Answer}
  599.  
  600.  
  601. <div id="permalink">
  602. {block:Date}
  603.  
  604. <div class="reblog_button">{ReblogButton size="10"}</div>
  605.  
  606. <div class="date"><a href="{Permalink}"><span class="dt">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {ShortYear}</span>{block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}</a>{block:PermalinkPage}{block:RebloggedFrom} ยท <a href="{ReblogParentURL}" title="reblogged from">{ReblogParentName}</a>{block:ContentSource} / <a href="{ReblogRootURL}" title="originally by">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}
  607. </div>
  608.  
  609. {/block:Date}
  610. {block:HasTags}<div class="tags">Filed under: {block:Tags}<a href="{TagUrl}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  611.  
  612.  
  613. </div>
  614. </div>
  615.  
  616.  
  617. {block:PostNotes}{PostNotes}{/block:PostNotes}
  618.  
  619.  
  620. {/block:Posts}
  621.  
  622.  
  623.  
  624. {block:ContentSource}
  625. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  626. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  627. {/block:SourceLogo}
  628. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  629. {/block:ContentSource}
  630.  
  631. </div>
  632.  
  633. <div id="pag">{block:Pagination}
  634. {CurrentPage} of {TotalPages}
  635. <br>
  636. {block:PreviousPage}
  637. <a href="{PreviousPage}">sooner</a>
  638. {/block:PreviousPage} / {block:NextPage}
  639. <a href="{NextPage}">later</a>
  640. {/block:NextPage}{/block:Pagination}
  641. </div>
  642.  
  643. <div id="credit">coded by <a href="http://aubrieta.tumblr.com">ifallontragedy</a></div>
  644.  
  645. </div>
  646.  
  647.  
  648. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment