Advertisement
crimical

C2 -- suburbia

Jul 15th, 2014
2,159
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.94 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <!-- CODE 2 BY CRIMICAL; SUBURBIA
  6.  
  7. DO NOT CLAIM AS YOUR OWN, DO NOT REMOVE CREDIT
  8. thank you for using my theme :)
  9.  
  10. -->
  11.  
  12. <title>{title} {block:PostSummary}&mdash; {PostSummary}{/block:PostSummary}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Oranienbaum|Vidaloka|IM+Fell+English:400,400italic' rel='stylesheet' type='text/css'>
  19.  
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  21.  
  22. <meta name="color:links" content=""/>
  23. <meta name="image:sidebar" content=""/>
  24. <meta name="text:link1" content=""/>
  25. <meta name="text:link1url" content=""/>
  26. <meta name="text:link2" content=""/>
  27. <meta name="text:link2url" content=""/>
  28. <meta name="text:link3" content=""/>
  29. <meta name="text:link3url" content=""/>
  30.  
  31. </head>
  32.  
  33. <style type="text/css">
  34.  
  35. body{
  36. background-color:white;
  37. font-family:arial, helvetica, sans serif;
  38. color:#333;
  39. font-size:10px;
  40. margin:0;
  41. padding:0;
  42. line-height:160%;
  43. text-align:justify;
  44. }
  45.  
  46. a{
  47. color:{color:links};
  48. text-decoration:none;
  49. -webkit-transition:0.8s ease-in-out;
  50. }
  51.  
  52. a:hover{ color:#333; }
  53.  
  54. u{ border-bottom:1px solid; text-decoration:none; }
  55.  
  56. blockquote{
  57. margin-left:15px;
  58. border-left:3px solid #f7f7f7;
  59. padding-left:15px;
  60. }
  61.  
  62. img{ display:block; max-width:100%; }
  63.  
  64. ul li{ list-style-type:square; }
  65.  
  66. small{ font-size:8px; letter-spacing:1px; }
  67.  
  68. ::-webkit-scrollbar-thumb{
  69. background-color:#333;
  70. border-top:0px solid #fff;
  71. border-bottom:0px solid #fff;
  72. border-left:6px solid #fff;
  73. border-right:6px solid #fff;
  74. height:auto;
  75. }
  76.  
  77. ::-webkit-scrollbar-y{
  78. height:auto;
  79. width:15px;
  80. background-color:#333;
  81. border-right:7px solid #fff;
  82. border-left:7px solid #fff;
  83. }
  84.  
  85. {CustomCSS}
  86.  
  87. /* sidebar */
  88.  
  89. #all{
  90. width:850px;
  91. margin:0 auto 0;
  92. }
  93.  
  94. #sidebar{
  95. width:180px;
  96. margin:250px 0 0 0;
  97. text-align:center;
  98. font-size:8px;
  99. letter-spacing:1px;
  100. position:fixed;
  101. }
  102.  
  103. #sidebar .t h1{
  104. font-family:'vidaloka';
  105. font-weight:normal;
  106. font-size:25px;
  107. text-align:center;
  108. }
  109.  
  110. #sidebar img.side{
  111. width:120px;
  112. margin:50px auto 20px;
  113. }
  114.  
  115. #sidebar .links{
  116. position:absolute;
  117. -webkit-transition:0.6s ease-in-out;
  118. opacity:0;
  119. z-index:-1;
  120. padding:10px 0 30px;
  121. text-align:center;
  122. width:180px;
  123. }
  124.  
  125. #sidebar .links a{
  126. color:#333;
  127. padding:1px 5px 1px;
  128. }
  129.  
  130. #sidebar .links a:hover{
  131. color:{color:links};
  132. }
  133.  
  134. #sidebar .t:hover .links{ margin-top:-35px; opacity:1; z-index:2; }
  135.  
  136. #sidebar .pagination{
  137. text-align:center;
  138. margin:20px 0 10px;
  139. text-transform:uppercase;
  140. font-size:8px;
  141. letter-spacing:0px;
  142. opacity:0.9;
  143. }
  144.  
  145. #sidebar .pagination a{ color:#333; font-size:10px; }
  146.  
  147. /* posts */
  148.  
  149. #posts{
  150. width:500px;
  151. margin:0 0 100px 300px;
  152. }
  153.  
  154. .post{
  155. width:500px;
  156. margin-bottom:130px;
  157. padding:5px 20px 5px;
  158. }
  159.  
  160. h1{
  161. text-align:center;
  162. font-size:23px;
  163. font-family:'vidaloka';
  164. font-weight:normal;
  165. margin:0 0 15px;
  166. padding:5px 20px 5px;
  167. }
  168.  
  169. .post .quote{
  170. margin:0 auto 0;
  171. width:65%;
  172. letter-spacing:1px;
  173. font-family:'playfair display';
  174. }
  175.  
  176. .post .qsource{
  177. margin-top:10px;
  178. text-align:center;
  179. }
  180.  
  181. .chat ol{
  182. line-height:120%;
  183. list-style:none;
  184. padding:0px;
  185. margin:0px;
  186. }
  187.  
  188. .chat li.line{
  189. border-bottom:1px solid #f1f1f1;
  190. padding:3% 0 3%;
  191. }
  192.  
  193. .player{
  194. overflow:hidden;
  195. width:22px;
  196. }
  197.  
  198. .play{
  199. padding:37px 43px 32px 37px;
  200. margin:20px;
  201. background-color:white;
  202. opacity:0.4;
  203. position:absolute;
  204. z-index:1000;
  205. -webkit-border-radius:100px;
  206. -webkit-transition:0.7s ease-in-out;
  207. }
  208.  
  209. .play:hover{ -webkit-border-radius:0px; }
  210.  
  211. .cover{
  212. float:left;
  213. height:140px;
  214. width:140px;
  215. border-right:15px solid transparent;
  216. }
  217.  
  218. .cover img{
  219. max-width:140px;
  220. position:absolute;
  221. }
  222.  
  223. .lalala{
  224. height:90px;
  225. padding-top:50px;
  226. }
  227.  
  228. .lalala .title{
  229. font-family:'playfair display';
  230. font-size:13px;
  231. margin-left:10px;
  232. }
  233.  
  234. .lalala .title span{ border-bottom:3px solid; padding:0 1px 4px; }
  235.  
  236. .lalala .artist{
  237. border-top:1px solid;
  238. font-size:7px;
  239. letter-spacing:1px;
  240. margin-top:5px;
  241. padding-top:6px;
  242. text-transform:uppercase;
  243. margin-left:156px;
  244. line-height:10px;
  245. }
  246.  
  247. img.ask{
  248. margin:0 7px 0 0;
  249. padding-top:5px;
  250. height:40px;
  251. float:left;
  252. }
  253.  
  254. /* postinfo */
  255.  
  256. .info{
  257. margin:5px 0 0 525px;
  258. position:absolute;
  259. opacity:0;
  260. -webkit-transition:0.8s ease-in-out;
  261. font-size:7px;
  262. text-transform:uppercase;
  263. letter-spacing:1px;
  264. line-height:200%;
  265. text-align:left;
  266. width:150px;
  267. {block:permalinkpage} display:none; {/block:permalinkpage}
  268. }
  269.  
  270. .post:hover .info{ opacity:0.9; }
  271.  
  272. span.t{
  273. margin:2px 0 5px;
  274. display:block;
  275. font-size:8px;
  276. text-transform:none;
  277. }
  278.  
  279. .info a{ color:#333; }
  280.  
  281. .info a:hover{ color:{color:links}; }
  282.  
  283. .pinfo{
  284. margin-top:20px;
  285. text-align:center;
  286. }
  287.  
  288. .postnotes{ margin-left:-40px; }
  289.  
  290. .postnotes ol.notes{
  291. margin-top:45px;
  292. list-style-type:none;
  293. width:500px;
  294. padding-top:20px;
  295. margin-left:-40px
  296. font-size:8px;
  297. text-align:center;
  298. }
  299.  
  300. .postnotes li.note{
  301. padding:2%;
  302. border-bottom:1px solid #f7f7f7;
  303. }
  304.  
  305. .postnotes li.note img.avatar{ display:none; }
  306.  
  307. .postnotes li.note .answer_content{ border-bottom:1px solid {color:links}; }
  308.  
  309. .credit{
  310. position:fixed;
  311. bottom:20px;
  312. right:10px;
  313. }
  314.  
  315. .credit a{
  316. border:1px solid #f4f4f4;
  317. padding:5px;
  318. height:10px;
  319. width:10px;
  320. text-transform:uppercase;
  321. font-size:8px;
  322. font-family:arial;
  323. color:gray;
  324. }
  325.  
  326. </style>
  327. <body>
  328.  
  329. <div class="credit">
  330. <a href="http://crimicalthemes.tumblr.com/">cr</a>
  331. </div>
  332.  
  333. {block:ContentSource}
  334. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  335. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  336. {/block:SourceLogo}
  337. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  338. {/block:ContentSource}
  339.  
  340. <div id="all">
  341.  
  342. <div id="sidebar"> <div class="t">
  343.  
  344. <div class="links">
  345. <a href="/message">message</a>
  346. {block:iflink1}<a href="{text:link1url}">{text:link1}</a>{/block:iflink1}
  347. {block:iflink2}<a href="{text:link2url}">{text:link2}</a>{/block:iflink2}
  348. {block:iflink3}<a href="{text:link3url}">{text:link3}</a>{/block:iflink3}
  349. </div>
  350.  
  351. <a href="/"><img src="{image:sidebar}" class="side" /></a>
  352.  
  353. {description}
  354.  
  355. {block:pagination}<div class="pagination">
  356. {block:PreviousPage}<a style="margin-right:5px" href="{PreviousPage}">←</a>{/block:PreviousPage} {CurrentPage} / {TotalPages} {block:NextPage}<a style="margin-left:5px" href="{NextPage}">→</a>{/block:NextPage}
  357. </div>{/block:pagination}
  358.  
  359. </div> </div>
  360.  
  361.  
  362. <div id="posts">
  363.  
  364. <div style="height:100px"> </div>
  365.  
  366. {block:tagpage}
  367. <h1 style="margin-bottom:100px; margin-left:20px">#{tag}</h1>
  368. {/block:tagpage}
  369.  
  370. {block:posts}
  371. <div class="post">
  372.  
  373.  
  374.  
  375. {block:date} <div class="info">
  376. <div style="width:200px; margin-bottom:-8px"><a href="{permalink}" title="{Month} {DayofMonth}{DayofMonthSuffix}, {Year} &ndash; {12Hour}:{Minutes}{AmPm}">{TimeAgo}{block:NoteCount} &mdash; {NoteCountWithLabel}{/block:NoteCount}</a>
  377. {block:RebloggedFrom}<br>
  378. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> / <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}</div>
  379. {block:HasTags}<br>
  380. {block:Tags}<span class="t">#<a href="{TagURL}">{Tag}</a></span>{/block:Tags}{/block:HasTags}
  381. </div> {/block:date}
  382.  
  383.  
  384.  
  385. {block:quote}
  386. <div class="quote">❝ {quote}</div>
  387. {block:source}<div class="qsource">{source}</div>{/block:source}
  388. {/block:quote}
  389.  
  390. {block:photo}
  391. {block:indexpage} <a href="{permalink}"><img src="{PhotoURL-500}" width="500px" /></a> {/block:indexpage}
  392. {block:permalinkpage} <a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" width="500px" /></a> {/block:permalinkpage}
  393. {caption}
  394. {/block:photo}
  395.  
  396. {block:photoset}
  397. {photoset-500}
  398. {caption}
  399. {/block:photoset}
  400.  
  401. {block:text}
  402. {block:title}<h1>{title}</h1>{/block:title}
  403. {body}
  404. {/block:text}
  405.  
  406. {block:video}
  407. {video-500}
  408. {caption}
  409. {/block:video}
  410.  
  411. {block:link}
  412. <h1><a href="{URL}">{name}</a></h1>
  413. {block:description}{description}{/block:description}
  414. {/block:link}
  415.  
  416. {block:chat}
  417. {block:title}<h1>{title}</h1>{/block:title}
  418. <div class="chat"><ol>{block:lines}
  419. <li class="line">{block:label}<b style="margin-right:8px">{label}</b>{/block:label}{line}</li>
  420. {/block:lines}</ol></div>
  421. {/block:chat}
  422.  
  423. {block:Answer}
  424. <div style="min-height:45px; padding-bottom:10px; border-bottom:1px solid #f7f7f7; margin-bottom:10px">
  425. <img class="ask" src="{AskerPortraitURL-40}" />
  426. <b>{Asker}</b><br>
  427. {Question}</div>
  428. {Replies}
  429. {/block:Answer}
  430.  
  431. {block:audio}
  432. <div class="play"><div class="player">{audioplayerwhite}</div></div>
  433. <div class="cover"> <img src="http://static.tumblr.com/yijh2c3/zt3n7blzj/unbenannt-5.jpg"> {block:AlbumArt} <img src="{AlbumArtURL}"> {/block:AlbumArt} </div>
  434. <div class="lalala"> <div class="title">{block:trackname} <span>{trackname}</span> {/block:trackname}</div> <div class="artist">{block:artist} {artist} <br>{/block:artist}
  435. {playcountwithlabel} </div>
  436. </div>
  437. {caption}
  438. {/block:audio}
  439.  
  440. {block:permalinkpage} {block:date} <div class="pinfo">
  441. {TimeAgo} &mdash; {Month} {DayofMonth}{DayofMonthSuffix}, {Year}, {12Hour}:{Minutes}{AmPm}
  442. {block:NoteCount}<br> {NoteCountWithLabel}{/block:NoteCount}
  443. {block:RebloggedFrom}<br>
  444. via <a href="{ReblogParentURL}" title="{ReblogParentName}">{ReblogParentName}</a> / originally <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  445. {block:HasTags}<br>
  446. {block:Tags}<span style="margin:0 5px 0">#<a href="{TagURL}">{Tag}</a></span>{/block:Tags}{/block:HasTags}
  447. </div> {/block:date} {/block:permalinkpage}
  448.  
  449. {block:permalinkpage}
  450. {block:PostNotes}
  451. <div class="postnotes">{PostNotes}</div>
  452. {/block:PostNotes}
  453. {/block:permalinkpage}
  454.  
  455. </div>
  456. {/block:posts}
  457. </div>
  458.  
  459. </div>
  460.  
  461. </body>
  462. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement