kimdahyun

Theme 11: Elevation

Oct 25th, 2015
455
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.30 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. THEME XI
  6. SEHUNEU THEMES. Do not reproduce.
  7. -->
  8. <meta name="color:Background" content="#ebffff" />
  9. <meta name="color:Body links" content="#615151" />
  10. <meta name="color:Body text" content="#1d1818" />
  11. <meta name="color:Scrollbar" content="#ebffff" />
  12. <meta name="color:Masthead background" content="#0a0303" />
  13. <meta name="color:Masthead links" content="#b9b8b8" />
  14. <meta name="color:Masthead text" content="#868484" />
  15. <meta name="color:Post color" content="#ffffff" />
  16. <meta name="color:Text highlight" content="#d83e3e" />
  17. <meta name="font:Body" content='Georgia,serif'/>
  18. <meta name="if:Masthead portrait" content="0"/>
  19. <meta name="if:Masthead search" content="0"/>
  20. <meta name="if:White Tumblr Controls" content="0"/>
  21. <meta name="image:Background" content="" />
  22. <meta name="image:Masthead" content="" />
  23. <meta name="text:Font size" content='0.8em'/>
  24. <meta name="text:Post margin" content='10px'/>
  25. <meta name="text:Your URL here" content='you have to put your URL here for the searchbox to work'/>
  26. <meta name="text:Link 1" content="" />
  27. <meta name="text:Link Title 1" content="" />
  28. <meta name="text:Link 2" content="" />
  29. <meta name="text:Link Title 2" content="" />
  30. <meta name="text:Link 3" content="" />
  31. <meta name="text:Link Title 3" content="" />
  32. <meta name="text:Link 4" content="" />
  33. <meta name="text:Link Title 4" content="" />
  34. <meta name="text:Link 5" content="" />
  35. <meta name="text:Link Title 5" content="" />
  36. {block:Description}
  37. <meta name="description" content="{MetaDescription}" />
  38. {/block:Description}
  39. <meta charset="utf-8">
  40. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  41. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  42. <link rel="shortcut icon" href="{Favicon}">
  43. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  44. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  45. <style type="text/css">
  46. /*Basic styles*/
  47. ::-moz-selection {
  48. background: {color:Text highlight};
  49. color: #fff;
  50. }
  51. ::selection {
  52. background: {color:Text highlight};
  53. color: #fff;
  54. }
  55. #content {
  56. margin: 2%;
  57. width:64%;
  58. float: right;
  59. }
  60. body {
  61. background: {color:Background} url('{image:Background}');
  62. color: {color:Body text};
  63. font-family: 'PT Sans Caption', helvetica, sans-serif;
  64. font-size: {text:Font size};
  65. font-weight:400;
  66. margin: 0;
  67. padding: 0;
  68. }
  69. a {
  70. color: {color:Body links};
  71. text-decoration: none;
  72. }
  73. blockquote {
  74. background:transparent;
  75. border-left: 2px solid rgba(0, 0, 0, 0.2);
  76. margin: 0;
  77. padding-left:10px;
  78. }
  79. iframe, img, embed, object, video {
  80. max-width: 100%;
  81. }
  82. img {
  83. height: auto;
  84. width: auto;
  85. }
  86.  
  87. iframe#tumblr_controls {
  88. top:0%!important;
  89. right:0%!important;
  90. position:fixed!important;
  91. z-index:999999999!important;
  92. {block:ifWhiteTumblrControls}
  93. opacity:0.3;
  94. -webkit-filter:invert(100%);
  95. -moz-filter:invert(100%);
  96. -o-filter:invert(100%);
  97. -ms-filter:invert(100%);
  98. filter:invert(100%);
  99. {/block:ifWhiteTumblrControls}
  100. }
  101.  
  102. #s-m-t-tooltip {
  103. max-width:300px;
  104. padding: 3px 5px;
  105. margin:10px;
  106. background-color:#ffffff;
  107. font-family: 'PT Sans Caption', helvetica, sans-serif;
  108. font-size:9px;
  109. font-style:bold;
  110. letter-spacing:1px;
  111. text-transform:uppercase;
  112. color:{color:masthead text};
  113. box-shadow:5px 5px 0.2em #f0f0f0;
  114. border-top:1px solid #f9f9f9;
  115. border-left:1px solid #f9f9f9;
  116. z-index:10000000000000000000000000000000;
  117. -moz-transition-duration: 0.3s;
  118. -webkit-transition-duration: 0.3s;
  119. -o-transition-duration: 0.3s;
  120. }
  121.  
  122. ::-webkit-scrollbar { width:3px; height:3px; }
  123. ::-webkit-scrollbar-track-piece { background-color:{color:masthead background}; }
  124. ::-webkit-scrollbar-thumb { background-color:{color:Scrollbar}; }
  125.  
  126. /*Masthead/Sidebar*/
  127. .masthead {
  128. background: {color:Masthead background} url('{image:Masthead}');
  129. padding: 20px;
  130. color: {color:Masthead text};
  131. width: 20%;
  132. float: left;
  133. margin: 3%;
  134. position:fixed;
  135. -webkit-transition:all 0.8s ease-in-out;
  136. -moz-transition:all 0.8s ease-in-out;
  137. -o-transition:all 0.8s ease-in-out;
  138. }
  139.  
  140.  
  141. .masthead a {
  142. color: {color:Masthead links};
  143. }
  144. nav li {
  145. display: inline;
  146. }
  147.  
  148. .masthead_outer {
  149. width:auto;
  150. height:30px;
  151. margin-left:auto;
  152. margin-right:auto;
  153. overflow:hidden;
  154. background:{color:Masthead background};
  155. padding-bottom:5px;
  156. z-index:9999;
  157. border-bottom:#ddd 1px solid;
  158. }
  159.  
  160. .title{
  161. color:{color:Body text};
  162. font-family: 'PT Sans Caption', helvetica, sans-serif;
  163. font-size:20px;
  164. font-weight:400;
  165. letter-spacing:3px;
  166. line-height:30px;
  167. text-align:center;
  168. text-transform:uppercase;
  169. -webkit-transition: all 0.7s ease-in-out;
  170. -moz-transition: all 0.7s ease-in-out;
  171. -o-transition: all 0.7s ease-in-out;
  172. -ms-transition: all 0.7s ease-in-out;
  173. transition: all 0.7s ease-in-out;
  174.  
  175. }
  176.  
  177.  
  178. .desc {
  179. margin-top:5px;
  180. color:{color:Masthead text};
  181. font-size:8px;
  182. line-height:10px;
  183. letter-spacing:1px;
  184. text-align:center;
  185. padding-top:15px;
  186. padding-bottom:5px;
  187. }
  188.  
  189.  
  190. .navi {
  191. width:auto;
  192. height:auto;
  193. padding:8px;
  194. opacity:0;
  195. margin-top:-38px;
  196. background:transparent;
  197. font-family:times;
  198. font-size:10px;
  199. line-height:120%
  200. letter-spacing:0.5em;
  201. text-align:center;
  202.  
  203. -webkit-transition:all 0.7s ease-in-out;
  204. -moz-transition:all 0.7s ease-in-out;
  205. -o-transition:all 0.7s ease-in-out;
  206. }
  207.  
  208. .navi a {
  209. margin-left:10px;
  210. margin-right:10px;
  211. color:{color:Masthead Links};
  212. }
  213. .navi a:hover{
  214. text-decoration:underline;
  215. }
  216.  
  217. .masthead:hover .navi{opacity:1;}
  218. .masthead:hover .title{margin-top:-80px;opacity:0; -webkit-transition:all 0.3s ease-in-out;
  219. -moz-transition:all 0.7s ease-in-out;
  220. -o-transition:all 0.7s ease-in-out;}
  221.  
  222.  
  223. /*Article*/
  224. article {
  225. background: {color:Post color};
  226. margin: {text:Post margin};
  227. padding: 20px;
  228. width: 250px;
  229. }
  230. .chat span {
  231. float: left;
  232. margin-right: 1%;
  233. }
  234.  
  235.  
  236. /*Metadata*/
  237. .metadata {
  238. display: inline-block;
  239. width: 100%;
  240. padding-bottom:8px;
  241. text-transform:uppercase;
  242. font-size:9px;
  243. }
  244. .notecount {
  245. float: right;
  246. text-transform:uppercase;
  247. font-size:9px;
  248. }
  249. .reblogged {
  250. float: right;
  251. margin: 3% 0;
  252. width: 100%;
  253. }
  254. /*Tags and notes*/
  255. #tags, nav ul, .chat ul {
  256. list-style: none;
  257. list-style-image: none;
  258. margin: 0;
  259. padding: 0;
  260. }
  261. #tags li {
  262. float: left;
  263. margin-right: 1%;
  264. }
  265.  
  266. .notes {
  267. width:200px;
  268. height:150px;
  269. padding:5px 10px;
  270. overflow-y:scroll;
  271. overflow-x:hidden;
  272. text-align:justify;
  273. font-size:8px;
  274. margin:0 40px 0px 30px;
  275. line-height:125%;
  276. }
  277.  
  278. .notes img {display:none;}
  279. .notes ol, #notes li {list-style:circle;line-height:125%;}
  280.  
  281.  
  282. .search { margin-top:5px; overflow:hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding:5px; } .search form { padding:5px 0; line-height:1em; border: 1px solid #e3e3e3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background:#f9f9f9; margin: 0; } .search form .query { margin:0; width:150px; font-family:'calibri', cursive; font-size:12px; border: none; background: transparent; padding:2px 4px; outline: none; border: 0px solid black; color:#737373; } .search form .submit { margin-left:30px; outline:none; border:0px solid black; color:#b5b5b5; font-size:13px; background:rgba(0,0,0,0); font-family:'calibri', cursive; padding:2px 4px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; border: 1px solid #e3e3e3;cursor: pointer; }
  283.  
  284. .kwon {
  285. text-align:left;
  286. text-transform:uppercase;
  287. padding:6px;
  288. padding-bottom:10px;
  289. font-size:10px;
  290. font-weight:500;
  291. letter-spacing:1px;
  292. border:1px solid #ddd;
  293. margin-top:-0px;
  294. }
  295.  
  296. .jiyong {
  297. text-align:right;
  298. padding:5px;
  299. font-size:10px;
  300. font-weight:500;
  301. letter-spacing:1px;
  302. margin-right:29px;
  303. margin-top:-11px;
  304. }
  305.  
  306. .dragon {
  307. margin-top:-4px;
  308. }
  309.  
  310.  
  311. .arrow-down {
  312. width: 0;
  313. height: 0;
  314. text-align:right;
  315. margin-top:-9px;
  316. margin-left:220px;
  317. border-left: 10px solid transparent;
  318. border-right: 10px solid transparent;
  319.  
  320. border-top: 10px solid #ddd;
  321. }
  322.  
  323. .tumblr_audio_player {width:100%;}
  324.  
  325. .player {
  326. width:30px;
  327. height:30px;
  328. padding:10px;
  329. border:solid 1px #ddd;
  330. overflow:hidden;
  331. background:#fff;
  332. margin:0;
  333. display:inline-block;
  334. }
  335.  
  336. .audioinfo {
  337. color:{color:accent};
  338. display:inline-block;
  339. padding-left:10px;
  340. text-align:left;
  341. font-size:10px;
  342. background:transparent;
  343. width:160px;
  344. max-height:30px;
  345. float:right;
  346. margin-right:15px;
  347. margin-bottom:5px;
  348. }
  349.  
  350. .daesung {
  351. font-size:14px;
  352. }
  353.  
  354. /*Custom CSS*/
  355. {CustomCSS}
  356. </style>
  357. </head>
  358. <body>
  359.  
  360. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  361. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  362. <script>
  363. (function($){
  364. $(document).ready(function(){
  365. $("[title],a[title],img[title]").style_my_tooltips({
  366. tip_follows_cursor:true,
  367. tip_delay_time:30,
  368. tip_fade_speed:300,
  369. attribute:"title"
  370. });
  371. });
  372. })(jQuery);
  373. </script>
  374.  
  375. <!--Sidebar/masthead-->
  376. <header class="masthead">
  377. <div class="masthead_outer">
  378. <div id="header">
  379. <div class="title"><a href="/">{Title}</a></div>
  380. </div>
  381. </div>
  382. <div class="navi">
  383. {block:ifLink1}<a href="{text:Link 1}" title="{text:Link Title 1}">★</a>{/block:ifLink1}
  384. {block:ifLink2}<a href="{text:Link 2}" title="{text:Link Title 2}">☆</a>{/block:ifLink2}
  385. {block:ifLink3}<a href="{text:Link 3}" title="{text:Link Title 3}">☆</a>{/block:ifLink3}
  386. {block:ifLink4}<a href="{text:Link 4}" title="{text:Link Title 4}">☆</a>{/block:ifLink4}
  387. {block:ifLink5}<a href="{text:Link 5}" title="{text:Link Title 5}">☆</a>{/block:ifLink5}
  388. <a href="http://bravesound.co.vu/" title="Theme Credit">☆</a>
  389. </div>
  390. {block:Description}
  391. <div class="desc">{Description}</div>
  392. {block:Description}
  393. {block:IfMastheadSearch}
  394. <div class="search">
  395. <form action="/search" method="get" class="search-form">
  396. <input type="hidden" name="t" value="{text:your URL here}" />
  397. <input type="text" name="q" class="query" value="" />
  398. <input type="submit" value="search" class="submit" />
  399. <div class="clear">
  400. </div>
  401. </form>
  402. </div>
  403. {/block:IfMastheadSearch}
  404.  
  405. </header>
  406. <!--Content holder-->
  407. <div id="content">
  408. {block:Posts}
  409. <article>
  410. <!--Metadata: date, note count-->
  411. <header class="metadata">
  412. {block:Date} <a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a> {/block:Date}
  413.  
  414. {block:NoteCount}<a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a> {/block:NoteCount}
  415. </header>
  416. <!--Unique code for each post type-->
  417. {block:Text}
  418. <div class="text">
  419. {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  420. {Body}
  421. {/block:Text}
  422.  
  423. {block:Photo}
  424. <div class="photo">
  425. {LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}" />{LinkCloseTag}
  426. {block:Caption}{Caption}{/block:Caption}
  427. {/block:Photo}
  428.  
  429. {block:Photoset}
  430. <div class="photoset">
  431. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  432. {block:PermalinkPage}{Photoset-250}{/block:PermalinkPage}
  433. {block:Caption}{Caption}{/block:Caption}
  434. {/block:Photoset}
  435.  
  436. {block:Quote}
  437. <div class="daesung">
  438. <font weight="bold" size="3">"</font>{Quote}
  439. {block:Source}<cite> <font size="1" weight:"200">{Source}</font> </cite>{/block:Source}
  440. {/block:Quote}
  441.  
  442. {block:Link}
  443. <div class="link">
  444. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  445. {block:Description}{Description}{/block:Description}
  446. {/block:Link}
  447.  
  448. {block:Chat}
  449. <div class="chat">
  450. <ul>
  451. {block:Lines}<li class="{Alt}">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  452. </ul>
  453. {/block:Chat}
  454.  
  455. {block:Audio}
  456. <div class="audio">
  457. {block:TrackName}<h1 class="audioinfo"><a href="{Permalink}">{TrackName}</a>{/block:TrackName}<br>{block:Artist}{Artist}{/block:Artist}</h1>
  458. <div class="player">{AudioPlayerWhite}</div>
  459. {block:Caption}{Caption}{/block:Caption}
  460. {/block:Audio}
  461.  
  462. {block:Video}
  463. <div class="video">
  464. <div class="video-player">{Video-250}</div>
  465. {block:Caption}{Caption}{/block:Caption}
  466. {/block:Video}
  467.  
  468. {block:Answer}
  469. <div class="answer">
  470. <h1 class="kwon">{Question}</h1>
  471. <div class="arrow-down"></div>
  472. <div class="jiyong">{Asker}</div>
  473. <div class="dragon">{Answer}</div>
  474. {/block:Answer}
  475. </div>
  476. <footer class="details">
  477. {block:ContentSource}
  478. <div class="reblogged">
  479. <!--Content source-->
  480. <a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
  481. {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a>
  482. </div>
  483. {/block:ContentSource}
  484. {block:Permalink}
  485. <!--Tags and notes on displayed on permalink pages-->
  486. {block:HasTags}
  487. <ul id="tags">
  488. {block:Tags}<li> <a href="{TagURL}">·{Tag}</a> </li>{/block:Tags}
  489. </ul>
  490. {/block:HasTags}
  491. {block:PostNotes}
  492. <div id="notes">
  493. {PostNotes}
  494. </div>
  495. {/block:PostNotes}
  496. {/block:Permalink}
  497. </footer>
  498. </article>
  499. {/block:Posts}
  500. <!--Close of article-->
  501. </div>
  502. <!--Pagination: previous/next page links-->
  503. {block:Pagination}
  504. <div class="pagination">
  505. {block:PreviousPage}<a href="{PreviousPage}"></a>{/block:PreviousPage}
  506. {block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}
  507. </div>
  508. {/block:Pagination}
  509. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  510. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  511. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  512. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  513. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  514. <!--Code for infinite scroll and grid layout-->
  515. <script>
  516. (function() {
  517. var $tumblelog = $('#content');
  518. $tumblelog.infinitescroll({
  519. navSelector : ".pagination",
  520. nextSelector : ".pagination a:first",
  521. itemSelector : "article",
  522. bufferPx : 50,
  523. done : "",
  524. loading: {
  525. img : "",
  526. msgText: ""
  527. },
  528. },
  529. function( newElements ) {
  530. var $newElems = $( newElements ).css({ opacity: 0 });
  531. $newElems.imagesLoaded(function(){
  532. $newElems.animate({ opacity: 1 });
  533. $tumblelog.masonry( 'appended', $newElems);
  534. });
  535. }
  536. );
  537. $tumblelog.imagesLoaded( function(){
  538. $tumblelog.masonry({
  539. columnWidth: function( containerWidth ) {
  540. return containerWidth / 100;
  541. }
  542. });
  543. });
  544. })();
  545. </script>
  546.  
  547. </body>
  548. </html>
Advertisement
Add Comment
Please, Sign In to add comment