API tools faq
paste
Belgrravia

The Kids Aren't Alright

Belgrravia
Feb 4th, 2015
426
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.45 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. The Kids Aren't Alright
  3. theme by kalopsiathemes
  4. Please do not
  5. -remove the credit
  6. -steal parts of code
  7. -use as a base
  8.  
  9. Feel free to
  10. -edit parts of the theme
  11. -ask me any questions
  12. --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  13. "http://www.w3.org/TR/html4/strict.dtd">
  14. <head>
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="stylesheet" href="http://i.icomoon.io/public/temp/b93a9be569/UntitledProject/style.css">
  18. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22.  
  23.  
  24. <meta name="color:Background" content="#000000"/>
  25. <meta name="color:side background" content="#f5f5f5"/>
  26. <meta name="color:link" content="#757575"/>
  27. <meta name="color:link hover" content="#b5b4b4"/>
  28. <meta name="color:text" content="#757575"/>
  29. <meta name="image:sidebar" content=""/>
  30. <meta name="image:background" content=""/>
  31.  
  32. <meta name="text:link1" content="" />
  33. <meta name="text:link1url" content="" />
  34. <meta name="text:link2" content="" />
  35. <meta name="text:link2url" content="" />
  36. <meta name="text:link3" content="" />
  37. <meta name="text:link3url" content="" />
  38. <meta name="text:link4" content="">
  39. <meta name="text:link4url" content="" />
  40.  
  41. <meta name="if:500px posts" content="1"/>
  42. <meta name="if:400px posts" content="0"/>
  43. <meta name="if:250px posts" content="0"/>
  44. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  45. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  46.  
  47. <script>
  48.  
  49. (function($){
  50.  
  51. $(document).ready(function(){
  52.  
  53. $("a[title]").style_my_tooltips({
  54.  
  55. tip_follows_cursor:true,
  56.  
  57. tip_delay_time:30,
  58.  
  59. tip_fade_speed:300,
  60.  
  61. attribute:"title"
  62.  
  63. });
  64.  
  65. });
  66.  
  67. })(jQuery);
  68.  
  69. </script>
  70.  
  71. <style type="text/css">
  72.  
  73. ::-webkit-scrollbar {height: 0px;
  74. width: 4px;
  75. -webkit-border-radius: 1px;
  76. background-color:{color:posts}}
  77. ::-webkit-scrollbar-thumb {height:auto;
  78. background-color:{color:posts};
  79. border:1px solid {color:link hover};
  80. }
  81. ::-webkit-scrollbar-track {
  82. background:color:none;}
  83.  
  84. #s-m-t-tooltip {
  85. max-width:400px;
  86. padding:2px;
  87. margin:10px 0px 0px 10px;
  88. padding:1px 4px;
  89. background-color:{color:link};
  90. text-transform:uppercase;
  91. font-size:7px;
  92. letter-spacing:2px;
  93. color:{color:background};
  94. z-index:999;
  95. font-weight:700;
  96. font-family: 'Lato', sans-serif;
  97. }
  98.  
  99. body {
  100. background:{color:background};
  101. color:{color:text};
  102. background-color:{color:background};
  103. font-size:10px;
  104. margin:0;
  105. line-height:16px;
  106. font-family: 'Merriweather Sans', sans-serif;
  107. background: url("{image:background}");
  108. background-repeat:no-repeat;
  109. background-position: bottom;
  110. background-attachment: fixed;
  111. -webkit-background-size: cover;
  112. -moz-background-size: cover;
  113. -o-background-size: cover;
  114. background-size: cover;
  115.  
  116. }
  117.  
  118. blockquote {
  119. padding-left:10px;
  120. margin:5px;
  121. margin-left:20px;
  122. word-wrap:break-word;
  123. }
  124.  
  125.  
  126. #posts {
  127. {block:If500pxposts}
  128. width:500px;
  129. {/block:If500pxposts}
  130. {block:If400pxposts}
  131. width:400px;
  132. {/block:If400pxposts}
  133. {block:If250pxposts}
  134. width:250px;
  135. {/block:If250pxposts}
  136. margin:auto;
  137. margin-top:25px;
  138. }
  139.  
  140. #posts img {
  141. {block:If500pxposts}
  142. max-width:500px;
  143. {/block:If500pxposts}
  144. {block:If400pxposts}
  145. max-width:400px;
  146. {/block:If400pxposts}
  147. {block:If250pxposts}
  148. max-width:250px;
  149. {/block:If250pxposts}
  150. }
  151.  
  152.  
  153. #posts, #posts img, #posts blockquote {
  154. font-size:11px;
  155. color:{color:text};
  156. }
  157.  
  158.  
  159.  
  160. small {
  161. font-size:9px;
  162. }
  163.  
  164. big {
  165. font-size:11px;
  166. }
  167.  
  168.  
  169. h2 {
  170. display:inline;
  171. font-size:13px;
  172. text-transform:uppercase;
  173. font-weight:700;
  174. text-align:center;
  175. font-family: 'Lato', sans-serif;
  176. color:{color:title};
  177. }
  178.  
  179. h1 {
  180. font-size:9px;
  181. Text-align:center;
  182. letter-spacing:1px;
  183. color:{color:text};
  184. }
  185.  
  186. h3 {
  187. font-size:11px;
  188. color:{color:title};
  189. letter-spacing:1px;
  190. text-transform:uppercase;
  191. font-weight:700;
  192. font-family: 'Lato', sans-serif;
  193. }
  194.  
  195. .body img {
  196. max-width:400px;
  197. }
  198.  
  199. #entire {
  200. width:850px;
  201. height:500px;
  202. margin:auto;
  203. margin-top:40px;
  204. }
  205.  
  206. #content {
  207. {block:If500pxposts}
  208. width:550px;
  209. {/block:If500pxposts}
  210. {block:If400pxposts}
  211. width:450px;
  212. {/block:If400pxposts}
  213. {block:If250pxposts}
  214. width:300px;
  215. {/block:If250pxposts}
  216. height:550px;
  217. margin-left:220px;
  218. position:absolute;
  219. background-color:{color:side background};
  220. opacity:.8;
  221. }
  222.  
  223. #entries {
  224. {block:If500pxposts}
  225. width:550px;
  226. {/block:If500pxposts}
  227. {block:If400pxposts}
  228. width:450px;
  229. {/block:If400pxposts}
  230. {block:If250pxposts}
  231. width:300px;
  232. {/block:If250pxposts}
  233. padding-top:0px;
  234. margin:auto;
  235. height:525px;
  236. margin-left:220px;
  237. position:absolute;
  238. overflow-y:auto;
  239. overflow-x:hidden;
  240. }
  241.  
  242. #back {
  243. width:120px;
  244. height:120px;
  245. float:left;
  246. position:fixed;
  247. padding:5px;
  248. background-color:{color:side background};
  249. opacity:.8;
  250. }
  251.  
  252. #sidebar {
  253. width:120px;
  254. height:120px;
  255. float:left;
  256. text-align:center;
  257. position:fixed;
  258. padding:5px;
  259. word-wrap:break-word;
  260. display:table;
  261.  
  262. }
  263.  
  264. #title {
  265. width:120px;
  266. height:120px;
  267. display:table;
  268. text-transform:uppercase;
  269. font-size:18px;
  270. font-weight:700;
  271. font-family: 'Raleway', sans-serif;
  272. position:absolute;
  273. -moz-transition-duration:all .4s ease-in-out;
  274. -webkit-transition-duration:all .4s ease-in-out;
  275. -o-transition-duration:all .4s ease-in-out;
  276. }
  277.  
  278. #title p {
  279. display:table-cell;
  280. vertical-align:middle;
  281. }
  282.  
  283. #hover {
  284. width:120px;
  285. height:120px;
  286. position:absolute;
  287. opacity:0;
  288. -moz-transition-duration:all .7s ease-in-out;
  289. -webkit-transition-duration:all .7s ease-in-out;
  290. -o-transition-duration:all .7s ease-in-out;
  291. }
  292.  
  293. #sidebar:hover #hover {
  294. opacity:1;
  295. -moz-transition-duration:.7s;
  296. -webkit-transition-duration: .7s;
  297. -o-transition-duration:.7s;
  298. }
  299.  
  300. #sidebar:hover #title {
  301. opacity:0;
  302. -moz-transition-duration:.4s;
  303. -webkit-transition-duration: .4s;
  304. -o-transition-duration:.4s;
  305. }
  306.  
  307. .description {
  308. font-size:9px;
  309. overflow:scroll;
  310. line-height:150%;
  311. color:{color:text};
  312. margin-bottom:5px;
  313. overflow:scroll;
  314. height:90px;
  315. padding:10px;
  316. text-align:justify;
  317. padding-top:5px;
  318. padding-bottom:5px;
  319. }
  320.  
  321. a:link, a:visited {
  322. text-decoration:none;
  323. color:{color:link};
  324. }
  325.  
  326. a:hover {
  327. text-decoration:none;
  328. cursor:crosshair;
  329. font-weight:700;
  330. color:{color:link hover};
  331. }
  332.  
  333. .info {
  334. position:absolute;
  335. padding:5px;
  336. font-size:10px;
  337. }
  338.  
  339. #nav {
  340. font-size:10px;
  341. word-spacing:4px;
  342. }
  343.  
  344. #sidebarimage img {
  345. border-radius:50px;
  346. width:60px;
  347. margin-top:20px;
  348. }
  349.  
  350. .pagi {
  351. width:125px;
  352. float:left;
  353. padding:5px;
  354. font-size:11px;
  355. margin-left:-5px;
  356. text-align:center;
  357. background-color:{color:side background};
  358. margin-top:26px;
  359. }
  360.  
  361.  
  362. .postinfo {
  363. font-size:8px;
  364. text-align:center;
  365. padding:2px;
  366. margin:auto;
  367. letter-spacing:.6px;
  368. {block:permalinkPage}
  369. margin-top:10px;
  370. margin-bottom:5px;
  371. display:block;
  372. {/block:PermalinkPage}
  373. text-transform:uppercase;
  374. {block:If500pxposts}
  375. width:500px;
  376. {/block:If500pxposts}
  377. {block:If400pxposts}
  378. width:400px;
  379. {/block:If400pxposts}
  380. {block:If250pxposts}
  381. width:250px;
  382. {/block:If250pxposts}
  383. {block:IndexPage}
  384. display:none;
  385. {/block:IndexPage}
  386. }
  387.  
  388. .tags {
  389. font-size:8px;
  390. text-align:center;
  391. margin-top:5px;
  392. font-style:italic;
  393. text-transform:lowercase;
  394. }
  395.  
  396. #permalink {
  397. font-size:9px;
  398. text-align:center;
  399. margin:auto;
  400. margin-top:15px;
  401. border:1px solid {color:text};
  402. text-transform:lowercase;
  403. }
  404.  
  405. #bottom {
  406. {block:If500pxposts}
  407. width:500px;
  408. {/block:If500pxposts}
  409. {block:If400pxposts}
  410. width:400px;
  411. {/block:If400pxposts}
  412. {block:If250pxposts}
  413. width:250px;
  414. {/block:If250pxposts}
  415. height:120px;
  416. overflow-x:scroll;
  417.  
  418. }
  419.  
  420. .pagenotes {
  421. {block:IndexPage}
  422. display: none;
  423. {/block:IndexPage}
  424. {block:If500pxposts}
  425. width:500px;
  426. {/block:If500pxposts}
  427. {block:If400pxposts}
  428. width:400px;
  429. {/block:If400pxposts}
  430. {block:If250pxposts}
  431. width:250px;
  432. {/block:If250pxposts}
  433. margin-top:5px;
  434. margin-bottom:45px;
  435. text-transform:uppercase;
  436. font-size:8px;
  437. letter-spacing:1px;
  438. }
  439.  
  440.  
  441. .pagenotes img {
  442. display:none;}
  443. .pagenotes li {
  444. list-style-type:none;
  445. padding:5px 0px;
  446. text-align:left;
  447. margin:0 0 0 0px;
  448. }
  449.  
  450. .player {
  451. width:25px;
  452. height:25px;
  453. overflow:hidden;
  454. position:absolute;
  455. background:white;}
  456.  
  457. .audioinfo {
  458. margin-left:50px;
  459. font-size:12px;
  460. }
  461.  
  462. .q {
  463. text-align:center;
  464. font-weight:700;
  465. font-family: 'Lato', sans-serif;
  466. }
  467.  
  468. .as {
  469. font-weight:bold;
  470. text-transform:uppercase;
  471. margin-bottom:10px;
  472. }
  473.  
  474.  
  475. .a {
  476. margin-top:10px;
  477.  
  478. }
  479.  
  480. .chat ol {
  481. padding:0;
  482. list-style:none;
  483. }
  484.  
  485. .label {font-weight:bold;
  486. }
  487.  
  488. .newplayerbutton {
  489. position: relative;
  490. width: 28px;
  491. height: 27px;
  492. overflow: hidden;
  493. }
  494.  
  495. .playerbuttonhug {
  496. position: absolute;
  497. top: -11px;
  498. left: -12px;
  499. }
  500.  
  501.  
  502. .tumblr_audio_player {
  503. border: none;
  504. padding: 0px;
  505. margin: 0px;
  506. height: 50px;
  507. width: 500px;
  508. }
  509.  
  510. .playerbuttonbg {
  511. position: absolute;
  512. z-index:999;
  513. left: 20px;
  514. top: 20px;
  515. width: 28px;
  516. height: 28px;
  517. background-color: #ffffff;
  518. padding: 10px;
  519. -webkit-border-radius: 40px;
  520. -moz-border-radius: 40px;
  521. border-radius: 0px;
  522. opacity: .4;
  523. filter: alpha(opacity=40);
  524. -moz-opacity: 0.4;
  525. -khtml-opacity: 0.4;
  526. transition: opacity .7s ease-in-out;
  527. -moz-transition: opacity .7s ease-in-out;
  528. -webkit-transition: opacity .7s ease-in-out;
  529. }
  530.  
  531. .playerbuttonbg:hover {
  532. opacity: 1;
  533. filter: alpha(opacity=100);
  534. -moz-opacity: 1;
  535. -khtml-opacity: 1;
  536. }
  537.  
  538. .audioimgwrapper {
  539. position: absolute;
  540. left: 0px;
  541. top: 0px;
  542. -webkit-border-radius: 50px;
  543. -moz-border-radius: 50px;
  544. border-radius: 0px;
  545. overflow: hidden;
  546. width: 88px;
  547. height: 88px;
  548. }
  549.  
  550. .audioimgwrapper img {
  551. width: 100%;
  552. height: auto;
  553. -webkit-border-radius: 50px;
  554. -moz-border-radius: 50px;
  555. border-radius: 0px;
  556. }
  557.  
  558. .trackdetails {
  559. width: auto;
  560. display:inline-block;
  561. margin-left: 100px;
  562. min-height: 85px;
  563. margin-top:10px;
  564. }
  565.  
  566. .audiowrapper {
  567. position: relative;
  568. display:inline-block;
  569. }
  570. #credit {
  571. position:fixed;
  572. color:{color:text};
  573. bottom:5px;
  574. right:10px;
  575. padding:4px;
  576. font-size:12px;
  577. }
  578.  
  579. #credit a {
  580. color:{color:text};
  581. text-decoration:none;
  582. }
  583. .icon-home-outline:before {
  584. content: "\e603";
  585. font-size:15px;
  586. }
  587.  
  588. .icon-bubble:before {
  589. content: "\e607";
  590. font-size:15px;
  591. }
  592. .icon-info-large:before {
  593. content: "\e601";
  594. font-size:15px;
  595. }
  596.  
  597.  
  598. .icon-plus-outline:before {
  599. content: "\e602";
  600. font-size:15px;
  601. }
  602.  
  603. .icon-plus2:before {
  604. content: "\ea0a";
  605. font-size:12px;
  606. }
  607.  
  608. .plus {
  609. margin:auto;
  610. text-align:center;
  611. margin-bottom:10px;
  612. margin-top:10px;
  613. {block:PermalinkPage}
  614. display:none;
  615. {/block:PermalinkPage}
  616. }
  617.  
  618. .plus:hover {
  619. cursor:crosshair;
  620. }
  621.  
  622. #pagi {
  623. text-transform:uppercase;
  624. margin:auto;
  625. text-align:center;
  626. }
  627.  
  628. </style>
  629. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  630. <script>
  631. $(document).ready(function(){
  632. $(".plus").click(function(){
  633. $(".postinfo").fadeToggle(800);
  634. });
  635. });
  636. </script>
  637. </head>
  638. <body>
  639. <div id="entire">
  640. <div id="back"></div>
  641. <div id="sidebar">
  642. <div id="title"><p>{title}<p></div>
  643. <div id="hover">
  644. <div id="nav">
  645. <a href="{text:Link1url}" title="{text:Link1}"><span class="icon-home-outline"></span></a>
  646. <a href="{text:Link2url}" title="{text:Link2}"><span class="icon-bubble"></span></a>
  647. <a href="{text:Link3url}" title="{text:Link3}"><span class="icon-info-large"></span></a>
  648. <a href="{text:Link4url}" title="{text:Link4}"><span class="icon-plus-outline"></span></a>
  649. </div>
  650. <div class="description">{Description}</div>
  651. </div></div>
  652.  
  653. <div id="content"></div>
  654. <div id="entries">
  655. {block:Posts}<div id="posts">
  656.  
  657. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  658.  
  659. {block:Quote}<h2>&#147;{Quote}&#148;</h2><h1>-{Source}</h1>{/block:Quote}
  660.  
  661. {block:Link}</div><a href="{URL}"><h3>{Name}</h3></a>
  662.  
  663. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  664.  
  665. {block:Photo}{block:If500pxposts}<img src="{PhotoURL-500}" />{block:Caption}{Caption}{/block:Caption} {/block:If500pxposts}{block:If400pxposts}<img src="{PhotoURL-400}" />{block:Caption}{Caption}{/block:Caption} {/block:If400pxposts}{block:If250pxposts}<img src="{PhotoURL-250}" />{block:Caption}{Caption}{/block:Caption} {/block:If250pxposts}{/block:Photo}
  666.  
  667. {block:Photoset} {block:If500pxposts}
  668. <center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  669. {/block:If500pxposts}
  670. {block:If400pxposts}
  671. <center>{Photoset-400}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  672.  
  673. {/block:If400pxposts}
  674. {block:If250pxposts}
  675. <center>{Photoset-250}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  676.  
  677. {/block:If250pxposts}{/block:Photoset}
  678.  
  679. {block:Chat}<ul class="chat">{block:Title}<h3>{Title}</h3>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}
  680.  
  681. {block:Video}{block:If500pxposts}
  682. {Video-500}{block:Caption}{Caption}{/block:Caption}
  683. {/block:If500pxposts}
  684. {block:If400pxposts}
  685. {Video-400}{block:Caption}{Caption}{/block:Caption}
  686. {/block:If400pxposts}
  687. {block:If250pxposts}
  688. {Video-250}{block:Caption}{Caption}{/block:Caption}
  689. {/block:If250pxposts}{/block:Video}
  690.  
  691. {block:Audio}{block:AudioPlayer}
  692. <div class="audiowrapper">
  693. {block:AlbumArt}
  694. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  695. {/block:AlbumArt}
  696.  
  697. <div class="playerbuttonbg">
  698. <div class="newplayerbutton">
  699. <div class="playerbuttonhug">
  700.  
  701. {AudioPlayerWhite}
  702.  
  703. </div>
  704. </div>
  705. </div>
  706.  
  707. <div class="trackdetails">
  708.  
  709. {block:TrackName}<strong>{TrackName}</strong>{/block:TrackName}<br/>
  710. {block:Artist}<strong>Artist:</strong> {Artist}{/block:Artist}<br/>
  711. {block:Album}<strong>Album:</strong> {Album}{/block:Album}<br/>
  712. {PlayCountWithLabel}
  713.  
  714. </div>
  715. </div>
  716. {/block:AudioPlayer}{/block:Audio}
  717.  
  718.  
  719. {block:Answer}
  720. <div class="q">
  721. <div class="as">{Asker} inquired: </div>
  722. {Question}</div>
  723. <div class="a">{Answer}</div>
  724. {/block:Answer}
  725.  
  726. <div id="bottom">
  727. <div class="plus"><span class="icon-plus2"></span></div>
  728. <div class="postinfo">
  729. {block:Date}{ShortDayOfWeek}&nbsp;@ {12Hour}:{Minutes}{CapitalAmPm}<a href="{permalink}">&nbsp;+&nbsp;{NoteCount} notes</a>&nbsp;{block:RebloggedFrom}&#8594;<a href="{ReblogParentURL}" title="{ReblogParentName}">&nbsp;via&nbsp;</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">&nbsp;&#169;&nbsp;</a>{/block:ContentSource}{/block:RebloggedFrom}{block:HasTags}<div class="tags"> {block:Tags}#<a href="{TagUrl}">{Tag},&nbsp;</a>{/block:Tags}</div>{/block:HasTags}{/block:Date}</div>
  730. </div>
  731.  
  732. {block:PostNotes}
  733. <div class="pagenotes">
  734. {PostNotes}
  735. </div>
  736. {/block:PostNotes}
  737. {/block:Posts}
  738. </div>
  739. <div id="pagi">
  740. {block:Pagination}
  741. {block:PreviousPage}
  742. <a href="{PreviousPage}">&nbsp; future &ndash;</a>
  743. {/block:PreviousPage}
  744.  
  745.  
  746. {block:NextPage}
  747. <a href="{NextPage}"> past</a>
  748. {/block:NextPage}
  749. {/block:Pagination}
  750. </div>
  751. </div>
  752.  
  753. {block:ContentSource}
  754. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  755. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  756. {/block:SourceLogo}
  757. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  758. {/block:ContentSource}
  759. <div id="credit">
  760. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div></div>
  761.  
  762. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!