Advertisement
crimical

code 6 | overnight

Jan 8th, 2016
2,090
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.54 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!----------------------------------------------------------------------
  5. "overnight" |6| by crimical
  6.  
  7. you may
  8. - customize the code as much as you want
  9.  
  10. as long as you do not
  11. - claim the base as your own
  12. - take parts of the code for other themes
  13. - delete the credit
  14.  
  15. thank you!
  16. ----------------------------------------------------------------------->
  17.  
  18. <title>
  19. {Title} {block:PostSummary}&mdash; {PostSummary}{/block:PostSummary}
  20. </title>
  21.  
  22. {block:Description}
  23. <meta name="description" content="{MetaDescription}" />
  24. {/block:Description}
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.  
  29. <!-- fonts -->
  30. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Slab:400,700|Lora:400,400italic,700italic,700|Karla' rel='stylesheet' type='text/css'>
  31.  
  32. <!-- videos -->
  33. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  34. <script>
  35. $(document).ready(function(){
  36. $('.video iframe').each(function(){
  37. var scale = $(this).parents('.video').width() / 500;
  38. $(this).attr({
  39. width: Math.floor($(this).attr('width') * scale),
  40. height: Math.floor($(this).attr('height') * scale)
  41. });
  42. });
  43. });
  44. </script>
  45.  
  46. <!-- photoset -->
  47. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  49. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  50.  
  51. <!-- custom -->
  52.  
  53. <meta name="color:links" content=""/>
  54.  
  55. <meta name="if:400px" content=""/>
  56. <meta name="if:shorttime" content=""/>
  57.  
  58. <meta name="text:link1" content=""/>
  59. <meta name="text:link1url" content="/"/>
  60. <meta name="text:link2" content=""/>
  61. <meta name="text:link2url" content="/"/>
  62. <meta name="text:link3" content=""/>
  63. <meta name="text:link3url" content="/"/>
  64.  
  65. <style type="text/css">
  66.  
  67. /* * basic * */
  68.  
  69. body{
  70. margin:0px;
  71. padding:0px;
  72. background-color:white;
  73. color:#111;
  74. font-family:'roboto slab';
  75. font-size:9px;
  76. line-height:180%;
  77. text-align:justify;
  78. }
  79.  
  80. a{
  81. text-decoration:none;
  82. color:{color:links};
  83. }
  84.  
  85. a:hover{ color:#333; }
  86.  
  87. u{
  88. border-bottom:1px solid;
  89. text-decoration:none;
  90. }
  91.  
  92. i, em{
  93. font-family:'lora';
  94. font-style:italic;
  95. }
  96.  
  97. blockquote{
  98. margin-left:15px;
  99. border-left:1px solid #222;
  100. padding-left:14px;
  101. }
  102.  
  103. img{
  104. display:block;
  105. max-width:100%;
  106. }
  107.  
  108. ul{ list-style-type:none; }
  109. ul li{ margin-bottom:3px; position:relative; }
  110. ul li:before{ content:'\2014'; position:absolute; left:-20px; }
  111.  
  112. small{ font-size:9px !important; }
  113.  
  114. hr{
  115. width:100px;
  116. height:1px;
  117. background:#333;
  118. margin:10px auto 10px;
  119. border:0;
  120. }
  121.  
  122. *, *:hover{
  123. -webkit-transition:0.8s ease-in-out;
  124. -moz-transition:0.8s ease-in-out;
  125. -o-transition:0.8s ease-in-out;
  126. }
  127.  
  128. /* * features * */
  129.  
  130. #tumblr_controls{
  131. position:fixed !important;
  132. opacity:0.5;
  133. -webkit-filter:invert(1);
  134. -webkit-filter:blur(3);
  135. }
  136.  
  137. #tumblr_controls:hover{ opacity:1; }
  138.  
  139. ::-webkit-scrollbar {
  140. height:auto;
  141. width:15px;
  142. background-color:#f1f1f1;
  143. border:7px solid #fff;
  144. }
  145.  
  146. ::-webkit-scrollbar-thumb{
  147. background-color:#333;
  148. border:7px solid #fff;
  149. height:auto;
  150. }
  151.  
  152. ::selection{ background:#333; color:#fff; }
  153.  
  154. ::-moz-selection{ background:#333; color:#fff; }
  155.  
  156. {CustomCSS}
  157.  
  158. /* * sidebar * */
  159.  
  160. #side{
  161. z-index:5;
  162. position:fixed;
  163. background:white;
  164. bottom:40%;
  165. left:160px;
  166. width:158px;
  167. }
  168.  
  169. .lines{
  170. border-top:1px solid #111;
  171. position:absolute;
  172. width:100%;
  173. margin-top:7px;
  174. z-index:-3;
  175. }
  176.  
  177. #side span{
  178. background:white;
  179. padding:0 2px 0;
  180. }
  181.  
  182. #side h1{
  183. font-family:'montserrat';
  184. text-transform:uppercase;
  185. font-size:8px;
  186. letter-spacing:3px;
  187. margin-left:-1px;
  188. margin-bottom:-2px;
  189. }
  190.  
  191. #side .links{
  192. font-family:'montserrat';
  193. text-transform:uppercase;
  194. font-size:7px;
  195. letter-spacing:2px;
  196. margin-top:1px;
  197. margin-right:-1px;
  198. margin-left:4px;
  199. }
  200.  
  201. #side .links a{
  202. color:#111;
  203. background:white;
  204. padding:0 4px 0 6px;
  205. margin-left:4px;
  206. }
  207.  
  208. #side .links a:hover{
  209. background:transparent;
  210. }
  211.  
  212. #side .icon{
  213. border:1px solid #111;
  214. float:right;
  215. margin:-13px 0 0 6px;
  216. }
  217.  
  218. #side .icon img{
  219. width:31px;
  220. border:3px solid white;
  221. }
  222.  
  223. /* * pagination * */
  224.  
  225. #pagination{
  226. width:100%;
  227. text-align:center;
  228. font-family:'montserrat';
  229. font-weight:bold;
  230. text-transform:uppercase;
  231. font-size:7px;
  232. letter-spacing:2px;
  233. }
  234.  
  235. #pagination span{
  236. padding:0 4px 0 7px;
  237. background:white;
  238. }
  239.  
  240. #pagination a{ color:#111; }
  241.  
  242. /* * main * */
  243.  
  244. #main{
  245. {block:ifnot400px}width:490px;{/block:ifnot400px}
  246. {block:if400px}width:400px;{/block:if400px}
  247. {block:permalinkpage}width:490px;{/block:permalinkpage}
  248. margin:130px 0 200px 550px;
  249. }
  250.  
  251. .post{
  252. width:100%;
  253. margin:0 0 200px 0;
  254. }
  255.  
  256. h1{
  257. font-family:'montserrat';
  258. text-transform:uppercase;
  259. font-size:8px;
  260. letter-spacing:3px;
  261. }
  262.  
  263. a.tumblr_blog{
  264. letter-spacing:1px;
  265. font-size:7px;
  266. text-transform:uppercase;
  267. }
  268.  
  269. /* quotes */
  270.  
  271. h1.quote{
  272. width:75%;
  273. margin:0 auto 10px;
  274. font-size:10px;
  275. line-height:180%;
  276. text-align:center;
  277. }
  278.  
  279. h1.quote:before{ content:"“"; }
  280. h1.quote:after{ content:"”"; }
  281.  
  282. .qsource{
  283. text-align:center;
  284. text-transform:uppercase;
  285. font-size:6px !important;
  286. letter-spacing:1px;
  287. }
  288.  
  289. /* chat */
  290.  
  291. .chat ol{
  292. list-style:none;
  293. padding:0px;
  294. margin:0px;
  295. }
  296.  
  297. .chat li.line{
  298. border-top:1px solid #f3f3f3;
  299. padding:5px 0 5px;
  300. }
  301.  
  302. .chat li.line:nth-of-type(1){ border-top:0; }
  303.  
  304. b.label{
  305. margin-right:5px;
  306. font-family:'montserrat';
  307. text-transform:uppercase;
  308. font-size:8px;
  309. letter-spacing:1px;
  310. }
  311.  
  312. /* asks */
  313.  
  314. .ask span{
  315. font-size:7px;
  316. font-weight:normal;
  317. text-transform:uppercase;
  318. letter-spacing:1px;
  319. }
  320.  
  321. img.ask{
  322. margin:3px 5px 0 0;
  323. width:28px; height:28px;
  324. float:left;
  325. -webkit-border-radius:100px;
  326. }
  327.  
  328. /* music */
  329.  
  330. .player{
  331. overflow:hidden;
  332. width:22px;
  333. }
  334.  
  335. .play{
  336. padding:12px 16px 6px 12px;
  337. background-color:black;
  338. opacity:0.1;
  339. position:absolute;
  340. z-index:1000;
  341. -webkit-transition:0.7s ease-in-out;
  342. }
  343.  
  344. .play:hover{ opacity:0.9; }
  345.  
  346. .cover{
  347. float:left;
  348. height:50px;
  349. width:50px;
  350. border-right:10px solid transparent;
  351. }
  352.  
  353. .cover img{
  354. max-width:50px;
  355. position:absolute;
  356. }
  357.  
  358. .lalala{
  359. height:38px;
  360. padding-top:12px;
  361. margin-bottom:7px;
  362. }
  363.  
  364. .lalala h1.title{
  365. margin:0 0 0 10px;
  366. text-align:left;
  367. }
  368.  
  369. .lalala .artist{
  370. font-size:6px;
  371. letter-spacing:1px;
  372. text-transform:uppercase;
  373. font-family:;
  374. margin:-4px 0 0 57px;
  375. }
  376.  
  377. /* * post info * */
  378.  
  379. .info{ margin-bottom:15px; }
  380.  
  381. .info a, .pinfo a{ color:#111; }
  382.  
  383. .info .not, .pinfo .not{
  384. font-family:'montserrat';
  385. font-size:7px;
  386. font-weight:bold;
  387. letter-spacing:2px;
  388. text-transform:uppercase;
  389. }
  390.  
  391. .info .not span, .pinfo .not span{ background:white; }
  392.  
  393. .info .not span.tim:hover, .pinfo .not span.tim:hover{ background:transparent; }
  394.  
  395. .post:hover span.tim{ opacity:0; }
  396.  
  397. .info .uph{
  398. position:absolute;
  399. text-align:center;
  400. margin:0;
  401. {block:ifnot400px}width:490px;{/block:ifnot400px}
  402. {block:if400px}width:400px;{/block:if400px}
  403. {block:permalinkpage}width:490px;{/block:permalinkpage}
  404. z-index:-1;
  405. opacity:0;
  406. }
  407.  
  408. .info .uph span{
  409. padding:0 6px 0 8px;
  410. background:white;
  411. }
  412.  
  413. .post:hover .uph{
  414. opacity:1;
  415. z-index:7;
  416. }
  417.  
  418. .info .lines, .pinfo .lines{
  419. border-top:1px solid #333;
  420. position:absolute;
  421. margin-top:4px;
  422. {block:ifnot400px}width:490px;{/block:ifnot400px}
  423. {block:if400px}width:400px;{/block:if400px}
  424. {block:permalinkpage}width:490px;{/block:permalinkpage}
  425. }
  426.  
  427. .pinfo{ margin-top:25px; }
  428.  
  429. .pinf{
  430. text-align:left;
  431. line-height:180%;
  432. margin-top:3px;
  433. }
  434.  
  435. .tags{
  436. word-wrap:break-word;
  437. line-height:12px;
  438. text-align:center;
  439. font-size:8px;
  440. letter-spacing:0px;
  441. }
  442.  
  443. .ptags{ text-align:justify; }
  444.  
  445. .ptags span.filed{
  446. font-family:'montserrat';
  447. font-size:7px;
  448. font-weight:bold;
  449. letter-spacing:2px;
  450. text-transform:uppercase;
  451. }
  452.  
  453. span.tag2{ display:none; }
  454.  
  455. a.tag + span.tag2{
  456. display:inline;
  457. margin:0 5px 0 4px;
  458. }
  459.  
  460. .tags a:hover, .ptags a:hover{ color:{color:links}; }
  461.  
  462. /* * permalink page * */
  463.  
  464. .postnotes{
  465. margin:100px 0 0 -40px;
  466. max-height:250px;
  467. overflow-y:auto;
  468. overflow-x:hidden;
  469. }
  470.  
  471. .postnotes ol.notes{
  472. list-style-type:none;
  473. {block:ifnot400px}width:490px;{/block:ifnot400px}
  474. {block:if400px}width:400px;{/block:if400px}
  475. {block:permalinkpage}width:490px;{/block:permalinkpage}
  476. margin-left:-40px
  477. font-size:8px;
  478. text-align:center;
  479. }
  480.  
  481. .postnotes li.note{
  482. padding:2%;
  483. border-bottom:1px solid #f7f7f7;
  484. }
  485.  
  486. .postnotes li.note img.avatar{ display:none; }
  487.  
  488. .postnotes li.note .answer_content{ border-bottom:1px solid {color:links}; }
  489.  
  490. /* * misc * */
  491.  
  492. .tumblr_video_container{
  493. width:auto!important;
  494. height:auto!important;
  495. }
  496.  
  497. .credit a{
  498. opacity:0.7;
  499. font-family:'karla';
  500. font-size:9px;
  501. border:1px solid transparent;
  502. padding:0px 5px 1px 5px;
  503. -webkit-border-radius:100px;
  504. margin:0 5px 0;
  505. position:fixed;
  506. bottom:15px; right:5px;
  507. color:#333;
  508. }
  509.  
  510. .credit a:hover{
  511. border:1px solid #333;
  512. }
  513.  
  514. </style>
  515. </head>
  516.  
  517. <body>
  518.  
  519. {block:ContentSource}
  520. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  521. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  522. {/block:SourceLogo}
  523. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  524. {/block:ContentSource}
  525.  
  526. <div class="credit">
  527. <a href="http://crimical.tumblr.com">c</a>
  528. </div>
  529.  
  530. <!-- sidebar -->
  531. <div id="side"> <div class="box">
  532.  
  533. <div class="lines"> </div>
  534.  
  535. <a href="/" title="{title}"><div class="icon"><img src="{PortraitURL-48}" /></div></a>
  536.  
  537. <h1 class="links">
  538. <a href="/ask" title="message">i</a>
  539. {block:iflink1}<a href="{text:link1url}" title="{text:link1}">ii</a>{/block:iflink1}
  540. {block:iflink2}<a href="{text:link2url}" title="{text:link2}">iii</a>{/block:iflink2}
  541. {block:iflink3}<a href="{text:link3url}" title="{text:link3}">iv</a>{/block:iflink3}</a></h1>
  542.  
  543. {description}
  544.  
  545. {block:pagination}<div id="pagination">
  546. <div class="lines"> </div>
  547. <span> {block:PreviousPage}<a href="{PreviousPage}" style="padding:0 3px 0"><</a> {/block:PreviousPage}{CurrentPage} of {TotalPages}{block:NextPage} <a href="{NextPage}" style="padding:0 3px 0;">></a>{/block:NextPage}</span>
  548. </div>{/block:pagination}
  549.  
  550. </div> </div> <!-- sidebar end -->
  551.  
  552. <!-- posts -->
  553. <div id="main">
  554.  
  555. {block:tagpage}
  556. <h1 style="margin-bottom:100px;text-align:center">#{tag}</h1>
  557. {/block:tagpage}
  558.  
  559. {block:daypage}
  560. <h1 style="margin-bottom:100px;text-align:center">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</h1>
  561. {/block:daypage}
  562.  
  563. {block:posts}
  564.  
  565. <div class="post">
  566.  
  567. <!-- info -->
  568. {block:Date} <div class="info">
  569.  
  570. {block:IndexPage}
  571. <div class="not" style="text-align:center;line-height:10px">
  572. <div class="uph"><span>
  573. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> ―{block:RebloggedFrom}
  574. {block:ifnotshorttime}<a href="{permalink}" title="{Month} {DayofMonth}, {Year} &mdash; {12Hour}:{Minutes}{AmPm}">{NoteCount}</a>{/block:ifnotshorttime}
  575. {block:ifshorttime}<a href="{permalink}" title="{TimeAgo}">{NoteCount}</a>{/block:ifshorttime}
  576. {block:RebloggedFrom}― <a href="{ReblogRootURL}" title="{ReblogRootName}">origin</a>{block:RebloggedFrom}</span></div>
  577. {block:ifnotshorttime}<span class="tim" style="padding:0 6px 0 9px; cursor:default">{TimeAgo}</span>{/block:ifnotshorttime}
  578. {block:ifshorttime}<span class="tim" style="padding:0 6px 0 9px; cursor:default">{DayofMonth}.{MonthNumber}.{ShortYear}</span>{/block:ifshorttime}
  579. </div>
  580. {block:HasTags} <div class="tags">
  581. {block:Tags}<span class="tag2" style="margin:0 3px 0"> ― </span> <a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
  582. </div> {/block:HasTags}
  583. {/block:IndexPage}
  584.  
  585. </div> {/block:Date} <!-- info end -->
  586.  
  587. <div class="pad">
  588.  
  589. {block:quote}
  590. <h1 class="quote">{quote}</h1>
  591. {block:source}<div class="qsource">{source}</div>{/block:source}
  592. {/block:quote}
  593.  
  594. {block:photo}
  595. {block:indexpage} <a href="{permalink}"><img src="{PhotoURL-500}" width="500px" /></a> {/block:indexpage}
  596. {block:permalinkpage} <a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" width="500px" /></a> {/block:permalinkpage}
  597. {caption}
  598. {/block:photo}
  599.  
  600. {block:Photoset}
  601. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}></div><div class="icons"><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div></div>{/block:Photos}</div>
  602. {Caption}
  603. {/block:Photoset}
  604.  
  605. {block:text}
  606. {block:title}<h1 style="text-align:right">{title}</h1>{/block:title}
  607. {body}
  608. {/block:text}
  609.  
  610. {block:video}
  611. <div class="video">{Video-500}</div>
  612. {caption}
  613. {/block:video}
  614.  
  615. {block:link}
  616. <h1 style="text-align:right"><a href="{URL}">{name}</a></h1>
  617. {block:description}{description}{/block:description}
  618. {/block:link}
  619.  
  620. {block:chat}
  621. {block:title}<h1 style="text-align:right">{title}</h1>{/block:title}
  622. <div class="chat"><ol>{block:lines}
  623. <li class="line">{block:label}<b style="margin-right:8px; font-family:'inconsolata'; text-transform:uppercase;">{label}</b>{/block:label}{line}</li>
  624. {/block:lines}</ol></div>
  625. {/block:chat}
  626.  
  627. {block:Answer}
  628. <div class="ask"><img class="ask" src="{AskerPortraitURL-48}" />
  629. <span>{Asker}</span> <br>
  630. {Question}</div>
  631. <hr>
  632. <img class="ask" src="{PortraitURL-40}" /> {Replies}
  633. {/block:Answer}
  634.  
  635. {block:audio}
  636. <div class="play"><div class="player">{audioplayerblack}</div></div>
  637. <div class="cover"> <img src="http://static.tumblr.com/yijh2c3/zt3n7blzj/unbenannt-5.jpg"> {block:AlbumArt} <img src="{AlbumArtURL}"> {/block:AlbumArt} </div>
  638. <div class="lalala"> <h1 class="title">{block:trackname} <span>{trackname}</span> {/block:trackname}</h1> <div class="artist">{block:artist} {artist}{/block:artist}</div>
  639. </div>
  640. {caption}
  641. {/block:audio}
  642.  
  643. </div>
  644.  
  645.  
  646. <!-- info -->
  647. {block:permalinkpage}{block:Date} <div class="pinfo">
  648.  
  649. <div class="lines"></div>
  650. <div class="not" style="text-align:right;line-height:10px">
  651. <span class="tim" style="padding:0 0 0 9px"><a href="">
  652. {Month} {DayofMonth}, {Year} <img src="http://static.tumblr.com/yijh2c3/LfYnv3n9e/unbenannt-1.jpg" style="margin:0 6px 0 4px; display:inline-block" /> {12Hour}:{Minutes}{AmPm}
  653. </a></span>
  654. <div class="pinf">
  655. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
  656. {block:RebloggedFrom}<img src="http://static.tumblr.com/yijh2c3/LfYnv3n9e/unbenannt-1.jpg" style="margin:0 6px 0 4px; display:inline-block" /> <a href="{ReblogParentURL}">via {ReblogParentName}</a> <img src="http://static.tumblr.com/yijh2c3/LfYnv3n9e/unbenannt-1.jpg" style="margin:0 6px 0 4px; display:inline-block" /> <a href="{ReblogRootURL}">originally {ReblogRootName}</a>{block:RebloggedFrom}</div>
  657. </div>
  658. {block:HasTags} <div class="ptags">
  659. <span class="filed">filed under</span> <img src="http://static.tumblr.com/yijh2c3/LfYnv3n9e/unbenannt-1.jpg" style="margin:0 6px 0 4px; display:inline-block" /> {block:Tags}<span class="tag2" style="margin:0 3px 0"> <img src="http://static.tumblr.com/yijh2c3/LfYnv3n9e/unbenannt-1.jpg" style="margin:0 6px 0 4px; display:inline-block" /> </span> <a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
  660. </div> {/block:HasTags}
  661.  
  662. </div> {/block:Date}{/block:permalinkpage} <!-- info end -->
  663.  
  664.  
  665. {block:permalinkpage}
  666. {block:PostNotes}
  667. <div class="postnotes">{PostNotes}</div>
  668. {/block:PostNotes}
  669. {/block:permalinkpage}
  670.  
  671. </div> {/block:posts} <!-- post end -->
  672.  
  673. </div> <!-- main end ->
  674.  
  675. <!-- photoset -->
  676.  
  677. <script>
  678. $(document).ready(function(){
  679. $('.photo-slideshow').pxuPhotoset({
  680. lightbox: true,
  681. rounded: false,
  682. gutter: '3px',
  683. borderRadius: '0px',
  684. photoset: '.photo-slideshow',
  685. photoWrap: '.photo-data',
  686. photo: '.pxu-photo'
  687. });
  688. });
  689. </script>
  690.  
  691. </body>
  692. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement