API tools faq
paste
Advertisement
midnightsnitch

Theme 09: Emma

midnightsnitch
Jun 22nd, 2013
1,186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4. THEME 9: EMMA
  5. CODED BY MIDNIGHTSNITCH.TUMBLR.COM (NUTELLAMONKEYS.TUMBLR.COM)
  6.  
  7. RULES:
  8. - DO NOT REDISTRIBUTE OR REUPLOAD AND CLAIM AS YOUR OWN
  9. - LEAVE THE CREDITS AS THEY ARE, DO NOT MOVE THEM TO A DIFFERENT PAGE
  10. - DO NOT USE AS A BASE CODE
  11. -->
  12.  
  13. <html>
  14. <head>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}" />
  19. {/block:Description}
  20.  
  21. <meta name="color:Background" content ="#f8f4d7"/>
  22. <meta name="color:Topbar" content ="#f9f2e7"/>
  23. <meta name="color:Content" content ="#FFFFFF"/>
  24. <meta name="color:Circle Border" content ="#ffffff"/>
  25. <meta name="image:Background" content=""/>
  26. <meta name="image:Topbar" content=""/>
  27. <meta name="image:Circle" content=""/>
  28. <meta name="color:Text" content="#40c0cb"/>
  29. <meta name="color:Title" content="#ff6b6b"/>
  30. <meta name="color:Link" content="#ff6b6b"/>
  31. <meta name="color:Link Hover" content="#a8dba8"/>
  32. <meta name="color:Navigation" content="#ffffff"/>
  33. <meta name="color:Navigation Text" content="#ff6b6b"/>
  34. <meta name="color:Navigation Hover" content="#f9f2e7"/>
  35. <meta name="color:Navigation Text Hover" content="#ff6b6b"/>
  36. <meta name="color:Question" content="#00a8c6"/>
  37. <meta name="color:Question BG" content="#f9f2e7"/>
  38. <meta name="color:Chat 1" content="#79bd9a"/>
  39. <meta name="color:Chat 2" content="#4ecdc4"/>
  40. <meta name="color:Blockquote" content="#0b486b"/>
  41. <meta name="color:Blockquote BG" content="#FFFFFF"/>
  42. <meta name="color:Tags" content="#FFFFFF"/>
  43. <meta name="color:Tags BG" content="#0B486B"/>
  44. <meta name="color:Permalink" content="#FFFFFF"/>
  45. <meta name="color:Permalink BG" content="#40c0cb"/>
  46. <meta name="color:Highlight" content="#CFF09E"/>
  47.  
  48. <meta name="if:Post Fade" content="0"/>
  49. <meta name="if:Topbar Fixed" content="1"/>
  50. <meta name="if:Topbar Scrolls" content="0"/>
  51.  
  52. <meta name="text:URL1" content="/" />
  53. <meta name="text:TITLE1" content="link 1" />
  54. <meta name="text:URL2" content="/" />
  55. <meta name="text:TITLE2" content="link 2" />
  56. <meta name="text:URL3" content="/" />
  57. <meta name="text:TITLE3" content="link 3" />
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
  60. <link href='http://fonts.googleapis.com/css?family=Pompiere' rel='stylesheet' type='text/css'>
  61. <link href='http://fonts.googleapis.com/css?family=Arapey:400italic' rel='stylesheet' type='text/css'>
  62.  
  63. <style type="text/css">
  64.  
  65. @font-face{
  66. font-family: 'WebSymbolsRegular'; src: url(http://static.tumblr.com/ofgq56z/hxYm994uu/websymbols-regular.otf)
  67. }
  68.  
  69. ::selection { background:{color:Highlight}; }
  70. ::-moz-selection { background:{color:Highlight}; }
  71.  
  72. body {
  73. background-color: {color:Background};
  74. background-image: url({image:Background});
  75. background-attachment:fixed;
  76. font-family: 'Roboto', sans-serif;
  77. font-size: 12px;
  78. color: {color:Text};
  79. }
  80.  
  81. a {
  82. color: {color:Link};
  83. text-decoration: none;
  84. }
  85.  
  86. a:hover {
  87. color: {color:Link Hover};
  88. transition: all 0.5s ease-in;
  89. -webkit-transition: all 0.5s ease-in;
  90. -moz-transition: all 0.5s ease-in;
  91. -o-transition: all 0.5s ease-in;
  92. -ms-transition: all 0.5s ease-in;
  93. }
  94.  
  95. a img {
  96. border: 0px;
  97. }
  98.  
  99. img {
  100. max-width:100%;
  101. }
  102.  
  103. .main {
  104. top: 160px;
  105. position: relative;
  106. width: 600px;
  107. margin: 0 auto;
  108. align:center;
  109. }
  110.  
  111. #content {
  112. margin: 20px;
  113. width: 500px;
  114. padding: 10px;
  115. background-color: {color:Content};
  116. {block:IfPostFade}opacity:0.8{/block:IfPostFade};
  117. }
  118.  
  119. #content:hover {
  120. opacity:1.0;
  121. transition: all 0.5s ease-in;
  122. -webkit-transition: all 0.5s ease-in;
  123. -moz-transition: all 0.5s ease-in;
  124. -o-transition: all 0.5s ease-in;
  125. -ms-transition: all 0.5s ease-in;
  126. }
  127.  
  128. #sideinfo {
  129. width: auto;
  130. height:120px;
  131. position:{block:IfTopbarScrolls}absolute{/block:IfTopbarScrolls}{block:IfTopbarFixed}fixed{/block:IfTopbarFixed};
  132. left: 0px;
  133. right: 0px;
  134. top:0px;
  135. text-align: center;
  136. padding: 10px;
  137. font-size: 12px;
  138. font-family: 'Roboto', sans-serif;
  139. background-color: {color:Topbar};
  140. background-image: url({image:Topbar});
  141. border-top: solid {color:Circle Border} 10px;
  142. border-bottom: solid {color:Circle Border} 10px;
  143. }
  144.  
  145. .desc {
  146. top:-5px;
  147. border-left: 110px solid {color:Circle Border};
  148. border-right: 10px solid {color:Circle Border};
  149. border-bottom: 10px solid {color:Circle Border};
  150. width:0px;
  151. -moz-border-radius: 85px;
  152. -webkit-border-radius: 85px;
  153. border-radius: 85px;
  154. height:90px;
  155. overflow: hidden;
  156. position:absolute;
  157. text-align: center;
  158. padding: 10px;
  159. opacity: 0.0;
  160. font-size: 12px;
  161. font-family: 'Roboto', sans-serif;
  162. background: {color:Circle Border};
  163. transform: translate(-40px, 0px);
  164. -webkit-transform: translate(-40px, 0px);
  165. -moz-transform: translate(-40px, 0px);
  166. -o-transform: translate(-40px, 0px);
  167. -ms-transform: translate(-40px, 0px);
  168. }
  169.  
  170. .circle {
  171. opacity:0.9;
  172. top:10px;
  173. position: absolute;
  174. left:200px;
  175. width: 110px;
  176. height: 110px;
  177. background-color: {color:Circle Border};
  178. -moz-border-radius: 85px;
  179. -webkit-border-radius: 85px;
  180. border-radius: 85px;
  181. border: solid 5px {color:Circle Border};
  182. }
  183.  
  184. .circle:hover .desc {
  185. transition: all 0.5s linear;
  186. -webkit-transition: all 0.5s linear;
  187. -moz-transition: all 0.5s ease-in-out;
  188. -o-transition: all 0.5s ease-in-out;
  189. -ms-transition: all 0.5s ease-in-out;
  190. width:420px;
  191. opacity: 1.0;
  192. transform: translate(0px, 0px);
  193. -webkit-transform: translate(0px, 0px);
  194. -moz-transform: translate(0px, 0px);
  195. -o-transform: translate(0px, 0px);
  196. -ms-transform: translate(0px, 0px);
  197. }
  198.  
  199. #sidebarimage {
  200. width:110px;
  201. height:110px;
  202. position:absolute;
  203. -moz-border-radius: 85px;
  204. -webkit-border-radius: 85px;
  205. border-radius: 85px;
  206. background-color: transparent;
  207. background-image: url({image:Circle});
  208. background-position: center;
  209. background-repeat: no-repeat;
  210. -webkit-transition:all 0.5s ease-out;
  211. -moz-transition:all 0.5s ease-out;
  212. -ms-transition:all 0.5s ease-out;
  213. -o-transition:all 0.5s ease-out;
  214. transition:all 0.5s ease-out;
  215. }
  216.  
  217. #sidebarimage:hover {
  218. -webkit-transform:rotate(360deg);
  219. -moz-transform:rotate(360deg);
  220. -ms-transform:rotate(360deg);
  221. -o-transform:rotate(360deg);
  222. transform:rotate(360deg);
  223. }
  224.  
  225. .navigation {
  226. opacity:0.9;
  227. width: 410px;
  228. left:-150px;
  229. border-left:solid 50px {color:Navigation};
  230. border-right:solid 10px {color:Navigation};
  231. top:40px;
  232. position: relative;
  233. font-family: 'Pompiere', cursive;
  234. text-transform:uppercase;
  235. font-size: 15px;
  236. display:inline-block;
  237. text-align: center;
  238. background-color: {color:Navigation};
  239. color: {color:Navigation Text};
  240. padding: 10px;
  241. margin-bottom: 10px;
  242. -moz-border-radius: 85px;
  243. -webkit-border-radius: 85px;
  244. border-radius: 85px;
  245. }
  246.  
  247. .nav {
  248. position: relative;
  249. font-family: 'Pompiere', cursive;
  250. text-transform:uppercase;
  251. font-size: 15px;
  252. display:inline;
  253. text-align: center;
  254. background-color: {color:Navigation};
  255. color: {color:Navigation Text};
  256. padding: 10px;
  257. margin-bottom: 10px;
  258. }
  259.  
  260. .nav:hover {
  261. background-color: {color:Navigation Hover};
  262. color: {color:Navigation Text Hover};
  263. transition: all 0.5s ease-in;
  264. -webkit-transition: all 0.5s ease-in;
  265. -moz-transition: all 0.5s ease-in;
  266. -o-transition: all 0.5s ease-in;
  267. -ms-transition: all 0.5s ease-in;
  268. }
  269.  
  270.  
  271. .post img {
  272. display: block;
  273. margin: 0 auto;
  274. }
  275.  
  276. h3 {
  277. font-size: 25px;
  278. margin: 0px;
  279. text-transform: uppercase;
  280. font-family: 'Pompiere', cursive;
  281. }
  282.  
  283. .quote {
  284. font-family: 'Arapey', serif;
  285. font-size: 23px;
  286. font-style: italic;
  287. letter-spacing: -1px;
  288. color: {color:Link};
  289. }
  290.  
  291. .source {
  292. margin-top: 8px;
  293. margin-bottom: 5px;
  294. text-transform: uppercase;
  295. font-weight: bold;
  296. text-align: right;
  297. font-size: 15px;
  298. font-family: 'Pompiere', cursive;
  299. }
  300.  
  301. .link {
  302. color: {color:Link};
  303. font-size: 20px;
  304. font-family: 'Pompiere', cursive;
  305. text-transform: uppercase;
  306.  
  307. }
  308.  
  309. .link:hover {
  310. color:{color:Link Hover};
  311. }
  312.  
  313. ul.chat {
  314. margin: 0;
  315. padding: 0;
  316. }
  317.  
  318. .chat li {
  319. list-style-type: none;
  320. margin-left: 0px;
  321. padding: 3px;
  322. }
  323.  
  324. .chat li.odd {
  325. color: {color:Chat 1};
  326. margin-bottom: 1px;
  327. }
  328.  
  329. .chat li.even {
  330. color: {color:Chat 2};
  331. margin-bottom: 1px;
  332. }
  333.  
  334.  
  335. .title {
  336. font-size: 25px;
  337. font-family: 'Pompiere', cursive;
  338. color: {color:Title};
  339. text-align: center;
  340. text-transform:uppercase;
  341. }
  342.  
  343.  
  344. .ask {
  345. position: relative;
  346. background-color:{color:Question BG};
  347. color:{color:Question};
  348. margin: 0;
  349. padding:10px;
  350. text-align:left;
  351. width:480px;
  352. }
  353.  
  354. .ask:after {
  355. position: absolute;
  356. display: block;
  357. content: "";
  358. border-color: {color:Question BG} transparent transparent transparent;
  359. border-style: solid;
  360. border-width: 21px 11px 0;
  361. height:0;
  362. width:0;
  363. position:absolute;
  364. bottom:-19px;
  365. left:1em;
  366. }
  367.  
  368. #asker {
  369. font-family: 'Pompiere', cursive;
  370. text-transform:uppercase;
  371. margin-left: 35px;
  372. padding-top: 5px;
  373. font-size:15px;
  374. }
  375.  
  376. #next {
  377. left: 825px;
  378. position: absolute;
  379. padding: 5px;
  380. top:50px;
  381. background-color: transparent;
  382. font-family: 'WebSymbolsRegular';
  383. font-size: 25px;
  384. }
  385.  
  386. #prev {
  387. left:775px;
  388. position: absolute;
  389. padding: 5px;
  390. top:50px;
  391. background-color: transparent;
  392. font-family: 'WebSymbolsRegular';
  393. font-size: 25px;
  394. }
  395.  
  396. .current_page,
  397. .jump_page:hover {
  398. color: {color:Text};
  399. transition: all 0.5s ease-in;
  400. -webkit-transition: all 0.5s ease-in;
  401. -moz-transition: all 0.5s ease-in;
  402. -o-transition: all 0.5s ease-in;
  403. -ms-transition: all 0.5s ease-in;
  404. }
  405.  
  406. .jump_page {
  407. color: {color:Link};
  408. transition: all 0.5s ease-in;
  409. -webkit-transition: all 0.5s ease-in;
  410. -moz-transition: all 0.5s ease-in;
  411. -o-transition: all 0.5s ease-in;
  412. -ms-transition: all 0.5s ease-in;
  413. }
  414.  
  415. blockquote {
  416. color: {color:Blockquote};
  417. background: {color:Blockquote BG};
  418. border-left: 3px solid {color:Blockquote};
  419. margin: 0px;
  420. padding: 0 0 0 10px;
  421. font-size: 12px;
  422. }
  423.  
  424. iframe#tumblr_controls {
  425. right: 3px !important;
  426. position: fixed !important;
  427. -webkit-filter: invert(100%);
  428. opacity: 0.4;
  429. transition: all 0.8s ease-in;
  430. -webkit-transition: all 0.8s ease-in;
  431. -moz-transition: all 0.8s ease-in;
  432. -o-transition: all 0.8s ease-in;
  433. -ms-transition: all 0.8s ease-in;
  434. }
  435.  
  436. iframe#tumblr_controls:hover {
  437. right: 3px !important;
  438. position: fixed !important;
  439. -webkit-filter: invert(100%);
  440. opacity: 0.7;
  441. transition: all 0.8s ease-in;
  442. -webkit-transition: all 0.8s ease-in;
  443. -moz-transition: all 0.8s ease-in;
  444. -o-transition: all 0.8s ease-in;
  445. -ms-transition: all 0.8s ease-in;
  446. }
  447.  
  448. #plink {
  449. background:{color:Permalink BG};
  450. color:{color:Permalink};
  451. font-size: 13px;
  452. text-transform:uppercase;
  453. text-align: center;
  454. text-decoration:none;
  455. }
  456.  
  457. #tags {
  458. text-transform: uppercase;
  459. width:500px;
  460. text-decoration:none;
  461. font-size: 12px;
  462. text-align: center;
  463. background:{color:Tags BG};
  464. color:{color:Tags};
  465. font-family: consolas;
  466. }
  467.  
  468. .symbol {
  469. font-family: 'WebSymbolsRegular';
  470. display: inline;
  471. font-size: 10px;
  472. }
  473.  
  474. a.speciallink:link {
  475. color: {color:Content};
  476. }
  477.  
  478. a.speciallink:hover {
  479. color: {color:Link Hover};
  480. }
  481.  
  482. a.speciallink:visited {
  483. color: {color:Content};
  484. }
  485.  
  486. #notes {
  487. width: 500px;
  488. padding: 5px;
  489. margin: 5px;
  490. font-size: 11px;
  491. text-align: left;
  492. text-transform: uppercase;
  493. }
  494.  
  495. ol.notes {
  496. list-style: none;
  497. margin: 0 30px 0 0;
  498. padding: 5px;
  499. }
  500.  
  501. ol.notes li {
  502. margin: 0px;
  503. padding: 5px;
  504. }
  505.  
  506. #top {
  507. font-size: 15px;
  508. color:{color:Link};
  509. text-align: center;
  510. bottom:5px;
  511. right:10px;
  512. padding: 5px;
  513. position:fixed;
  514. opacity: 0.6;
  515. text-transform:uppercase;
  516. }
  517.  
  518. #top:hover {
  519. opacity: 1.0;
  520. transition: all 0.5s ease;
  521. -webkit-transition: all 0.5s ease;
  522. -moz-transition: all 0.5s ease;
  523. -o-transition: all 0.5s ease;
  524. -ms-transition: all 0.5s ease;
  525. }
  526.  
  527.  
  528. {CustomCSS}
  529.  
  530. </style>
  531.  
  532. <script type="text/javascript"
  533. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
  534. </script>
  535. <script type="text/javascript" language="javascript">
  536. $(function () {
  537. $('#scrlBotm').click(function () {
  538. $('html, body').animate({
  539. scrollTop: $(document).height()
  540. },
  541. 1500);
  542. return false;
  543. });
  544.  
  545. $('#scrlTop').click(function () {
  546. $('html, body').animate({
  547. scrollTop: '0px'
  548. },
  549. 1500);
  550. return false;
  551. });
  552. });
  553. </script>
  554.  
  555. <title>{Title}</title>
  556.  
  557. </head>
  558.  
  559. <body>
  560.  
  561. <a id="scrlTop" title="Back to Top" href="#"><div id="top">Back to top</div></a>
  562.  
  563. <div class="main">
  564.  
  565. {block:Posts}
  566.  
  567. <div id="content">
  568.  
  569. {block:Text}
  570. <div class="post">
  571. {block:Title}
  572. <h3><a href="{Permalink}">{Title}</a></h3>
  573. {/block:Title}
  574. {Body}
  575. </div>
  576. {/block:Text}
  577.  
  578. {block:Photo}
  579. <div class="post">
  580. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  581. {block:Caption}
  582. <div class="caption">{Caption}</div>
  583. {/block:Caption}
  584. </div>
  585. {/block:Photo}
  586.  
  587. {block:Photoset}
  588. <div class="post">
  589. <center>{Photoset-500}</center>
  590. {block:Caption}
  591. <div class="caption">{Caption}</div>
  592. {/block:Caption}
  593. </div>
  594. {/block:Photoset}
  595.  
  596. {block:Quote}
  597. <div class="post">
  598. <div class="quote">“ {Quote} ”</div>
  599. {block:Source}
  600. <div class="source">- {Source}</div>
  601. {/block:Source}
  602. </div>
  603. {/block:Quote}
  604.  
  605. {block:Link}
  606. <div class="post">
  607. <center><a href="{URL}" class="link" {Target}>{Name} &#8594;</a></center>
  608. {block:Description}
  609. <div class="description">{Description}</div>
  610. {/block:Description}
  611. </div>
  612. {/block:Link}
  613.  
  614. {block:Chat}
  615. <div class="post">
  616. {block:Title}
  617. <h3><a href="{Permalink}">{Title}</a></h3>
  618. {/block:Title}
  619. <ul class="chat">
  620. {block:Lines}
  621. <li class="{Alt} user_{UserNumber}">
  622. {block:Label}
  623. <span class="label">{Label}</span>
  624. {/block:Label}
  625. {Line}
  626. </li>
  627. {/block:Lines}
  628. </ul>
  629. </div>
  630. {/block:Chat}
  631.  
  632. {block:Video}
  633. <div class="post">
  634. <center>{Video-500}</center>
  635. {block:Caption}
  636. <div class="caption">{Caption}</div>
  637. {/block:Caption}
  638. </div>
  639. {/block:Video}
  640.  
  641. {block:Answer}
  642. <div class="ask">{Question}</div>
  643. <div id="asker">{Asker}</div>
  644. {Answer}
  645. {/block:Answer}
  646.  
  647. {block:Audio}
  648. <div class="post">
  649. {AudioPlayerWhite}
  650. {block:Caption}
  651. <div class="caption">{Caption}</div>
  652. {/block:Caption}
  653. </div>
  654. {/block:Audio}
  655.  
  656. <div id="tags">{block:HasTags}Tags: {block:Tags}<a href="{TagURL}">#{Tag}&nbsp;&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  657.  
  658. <div id="plink">
  659.  
  660. {block:RebloggedFrom}<a href="{ReblogParentURL}" class="speciallink">Via</a> &middot; {/block:RebloggedFrom}
  661.  
  662. {block:ContentSource}<a href="{SourceURL}" class="speciallink">Source</a> &middot; {/block:ContentSource}
  663.  
  664. {block:Date}<a href="{Permalink}" class="speciallink">{TimeAgo} &middot; {/block:Date} {NoteCountWithLabel}</a><br>
  665.  
  666. </div>
  667.  
  668.  
  669.  
  670. {block:PermalinkPage}
  671. {block:PostNotes}
  672. <div id="notes">{PostNotes}</div>
  673. {/block:PostNotes}
  674. {/block:PermalinkPage}
  675.  
  676.  
  677.  
  678. </div>
  679.  
  680.  
  681.  
  682. {/block:Posts}
  683.  
  684. </div>
  685.  
  686.  
  687. <div id="sideinfo">
  688.  
  689. <div class="navigation">
  690. <a href="/" class="nav">HOME</a>
  691. <a href="/ask" class="nav">ASK</a>
  692. {block:ifTITLE1}<a href="{text:URL1}" class="nav">{text:TITLE1}</a>{/block:ifTITLE1}
  693. {block:ifTITLE2}<a href="{text:URL2}" class="nav">{text:TITLE2}</a>{/block:ifTITLE2}
  694. {block:ifTITLE3}<a href="{text:URL3}" class="nav">{text:TITLE3}</a>{/block:ifTITLE3}
  695. <a href="http://midnightsnitch.tumblr.com" class="nav">Theme</a>
  696. </div>
  697.  
  698. <div id="prev">
  699.  
  700. {block:Pagination}
  701. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><<</a>{/block:PreviousPage}
  702.  
  703. </div>
  704.  
  705. <div id="next">
  706.  
  707. {block:NextPage}<a href="{NextPage}" class="jump_page">>></a>{/block:NextPage}
  708. {/block:Pagination}
  709.  
  710. </div>
  711.  
  712. <div class="circle"><div class="desc">
  713. <div class="title">{Title}</div>
  714. {block:Description}{Description}{/block:Description}
  715. </div><div id="sidebarimage"></div>
  716.  
  717.  
  718. </div>
  719.  
  720. </body>
  721. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!