Advertisement
artiecore

rare spike

Apr 11th, 2025 (edited)
185
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.64 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. ♡ rare spike theme by joyfriend ♡
  6.  
  7. does anyone still play animal jam?
  8. windows 7 parts from https://khang-nd.github.io/7.css/
  9. ----->
  10.  
  11. <meta charset="utf-8">
  12. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  13. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17.  
  18. <link rel="shortcut icon" href="{image:favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{rss}">
  20. <link rel="stylesheet" href="https://unpkg.com/7.css">
  21.  
  22. <title>{Title}</title>
  23.  
  24. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  25. <link href="https://fonts.googleapis.com/css?family=Short+Stack&display=swap" rel="stylesheet">
  26.  
  27.  
  28. <meta name="color:background" content="#ffffff"/>
  29. <meta name="color:posts" content=""/>
  30. <meta name="color:sidebar" content=""/>
  31. <meta name="color:container" content="#ffffff"/>
  32. <meta name="color:border" content="#000">
  33. <meta name="color:text" content="#2b2b2b"/>
  34. <meta name="color:link" content="#2b2b2b"/>
  35. <meta name="color:link hover" content="#949494"/>
  36. <meta name="color:selection bg" content="#fff"/>
  37. <meta name="color:selection text">
  38. <meta name="color:tooltip text" content="#fff"/>
  39. <meta name="color:tooltip border" content="#fff"/>
  40.  
  41. <meta name="image:sidebar" content=""/>
  42. <meta name="image:background" content="" />
  43. <meta name="image:container background" content="" />
  44. <meta name="image:favicon" content="">
  45. <meta name="image:bottom left" content=""/>
  46. <meta name="image:bottom right" content=""/>
  47.  
  48. <meta name="if:redirect" content="" />
  49. <meta name="if:cover bg" content="" />
  50. <meta name="if:cover container bg" content="" />
  51. <meta name="if:italic link hover" content="" />
  52. <meta name="if:win7" content=""/>
  53. <meta name="if:rounded sidebar" content=""/>
  54. <meta name="if:rounded posts" content=""/>
  55. <meta name="if:rounded container" content=""/>
  56.  
  57.  
  58. <meta name="text:font size" content="12px">
  59. <meta name="text:sidebarhover" content="<3">
  60. <meta name="text:description" content="nyall even read this shit?"/>
  61. <meta name="text:redirect" content=""/>
  62. <meta name="text:border size" content="3px" />
  63. <meta name="text:notes" content="-">
  64.  
  65.  
  66. <meta name="text:link1" content="one">
  67. <meta name="text:url1" content="">
  68. <meta name="text:link2" content="two">
  69. <meta name="text:url2" content="">
  70. <meta name="text:link3" content="three">
  71. <meta name="text:url3" content="">
  72. <meta name="text:link4" content="four">
  73. <meta name="text:url4" content="">
  74.  
  75. <meta name="select:font" content="arial">
  76. <meta name="select:font" content="verdana">
  77. <meta name="select:font" content="courier">
  78. <meta name="select:font" content="georgia">
  79. <meta name="select:font" content="times new roman">
  80. <meta name="select:font" content="ms gothic"/>
  81. <meta name="select:font" content="short stack"/>
  82. <meta name="select:font" content="comic sans ms">
  83. <meta name="select:font" content="Segoe UI">
  84.  
  85. <meta name="select:border type" content="solid" />
  86. <meta name="select:border type" content="double" />
  87. <meta name="select:border type" content="dashed" />
  88. <meta name="select:border type" content="dotted" />
  89. <meta name="select:border type" content="outset">
  90. <meta name="select:border type" content="inset">
  91.  
  92. {block:ifredirect}
  93. {block:IndexPage}<script type="text/javascript">
  94. var url = location.href;
  95. if (url == "{BlogURL}") {
  96. window.location = "{BlogURL}tagged/{text:redirect}";
  97. }
  98. </script>{/block:IndexPage}
  99. {/block:ifredirect}
  100.  
  101. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  102.  
  103. <style type="text/css">
  104.  
  105. ::selection {
  106. background: {color:selection bg};
  107. color:{color:selection text};
  108. }
  109. ::-moz-selection {
  110. background: {color:selection bg};
  111. color:{color:selection text};
  112. }
  113.  
  114. .tooltip{
  115. display:inline;
  116. position:relative;
  117. }
  118.  
  119. #s-m-t-tooltip{
  120. max-width:300px;
  121. padding:5px;
  122. margin:20px 7px -2px 20px;
  123. letter-spacing:1px;
  124. background-color: rgba(0, 0, 0, 0.4);
  125. text-align:center;
  126. color:{color:tooltip text};
  127. text-shadow: -1px 0 {color:tooltip border}, 0 1px {color:tooltip border}, 1px 0 {color:tooltip border}, 0 -1px {color:tooltip border};
  128. z-index:9;
  129. -o-transition: all 0.3s ease-out;
  130. -webkit-transition: all 0.3s ease-out;
  131. -moz-transition: all 0.3s ease-out;
  132. }
  133.  
  134.  
  135. /*
  136. main
  137. */
  138.  
  139. body {
  140. margin:0px;
  141. background:{color:background};
  142. color:{color:text};
  143. background-image: url('{image:background}');
  144. {block:ifnotcoverbg}
  145. background-repeat: repeat;
  146. background-attachment: fixed;
  147. {/block:ifnotcoverbg}
  148. {block:ifcoverbg}
  149. background-size: cover;
  150. background-attachment: fixed;
  151. {/block:ifcoverbg}
  152. color:{color:text};
  153. font-family: {select:font};
  154. font-size: {text:font size};
  155. }
  156.  
  157. p{
  158. margin:0 0 10px 0;
  159. padding:0;
  160. }
  161.  
  162. pre {
  163. white-space: pre-wrap;
  164. white-space: -moz-pre-wrap;
  165. white-space: -pre-wrap;
  166. white-space: -o-pre-wrap;
  167. word-wrap: break-word;
  168. }
  169.  
  170. a {
  171. color:{color:link};
  172. -moz-transition-duration:0.4s;
  173. -webkit-transition-duration:0.4s;
  174. -o-transition-duration:0.4s;
  175. text-decoration:none;
  176. }
  177.  
  178. a:hover {
  179. color:{color:link hover};
  180. -moz-transition-duration:0.4s;
  181. -webkit-transition-duration:0.4s;
  182. -o-transition-duration:0.4s;
  183. {block:ifitaliclinkhover}
  184. font-style: italic;
  185. {/block:ifitaliclinkhover}
  186. }
  187.  
  188.  
  189. #con {
  190. margin: 0;
  191. position: absolute;
  192. top: 50%;
  193. left: 50%;
  194. transform: translate(-50%, -50%);
  195. }
  196.  
  197. #flex{
  198. display:flex;
  199. }
  200.  
  201. table{
  202. background-color:transparent;
  203. border: none;
  204. }
  205.  
  206. table > tbody > tr > :not(:last-child){
  207. border: none;
  208. }
  209. /*
  210. sidebar
  211. */
  212.  
  213. #sidebar {
  214. text-align:center;
  215. padding:15px;
  216. padding-top:0px;
  217. width:245px;
  218. }
  219.  
  220. #sidebar img {
  221. width:245px;
  222. margin-bottom:10px;
  223. border:{text:border size} {select:border type} {color:border};
  224. background:{color:sidebar};
  225. {block:ifroundedsidebar}
  226. border-radius:6px;
  227. {/block:ifroundedsidebar}
  228.  
  229. }
  230.  
  231.  
  232. #description {
  233. margin-bottom:15px;
  234. max-height:100px;
  235. overflow:auto;
  236. text-align:center;
  237. border:{text:border size} {select:border type} {color:border};
  238. {block:ifroundedsidebar}
  239. border-radius:6px;
  240. {/block:ifroundedsidebar}
  241. background:{color:sidebar};
  242. padding:10px;
  243. line-height:150%;
  244. }
  245.  
  246.  
  247. #description img{
  248. border:none;
  249. width:{text:font size};
  250. height:auto;
  251. margin:0;
  252. }
  253.  
  254. #links{
  255. text-align:left;
  256. margin-left:20px;
  257. line-height:150%;
  258. font-size:{text:font size};
  259. font-family: {select:font};
  260. }
  261. .tabs{
  262. text-align:left;
  263. font-size: {text:font size};
  264. }
  265. /*
  266. posts
  267. */
  268.  
  269. #postcontainer{
  270. column-count: 2;
  271. column-gap: 15px;
  272. }
  273.  
  274. #grid{
  275. height:600px;
  276. padding:25px;
  277. overflow:auto;
  278. border:{text:border size} {select:border type} {color:border};
  279. {block:ifroundedcontainer}
  280. border-radius:6px;
  281. {/block:ifroundedcontainer}
  282. background:{color:container};
  283. color:{color:text};
  284. background-image: url('{image:container background}');
  285. {block:ifnotcovercontainerbg}
  286. background-repeat: repeat;
  287. background-attachment: fixed;
  288. {/block:ifnotcovercontainerbg}
  289. {block:ifcovercontainerbg}
  290. background-size: cover;
  291. background-attachment: fixed;
  292. background-position:center;
  293. {/block:ifcovercontainerbg}
  294.  
  295.  
  296. }
  297.  
  298. #posts {
  299. width:250px;
  300. padding:10px;
  301. margin-bottom:25px;
  302. background-color:{color:posts};
  303. border:{text:border size} {select:border type} {color:border};
  304. {block:ifroundedposts}
  305. border-radius:6px;
  306. {/block:ifroundedposts}
  307. break-inside: avoid;
  308. display:inline-block;
  309. }
  310.  
  311.  
  312. #posts img {
  313. max-width:100%;
  314. height:auto;
  315.  
  316. }
  317.  
  318.  
  319.  
  320. /*
  321. content in the body of the posts - quotes, asks, etc
  322. "media" contains photos, photosets, videos, audio posts
  323. */
  324. .media{
  325. margin:0 0 10px 0;
  326. }
  327.  
  328. .title{
  329. font-weight:normal;
  330. font-size:18px;
  331. margin:0 0 10px 0;
  332. }
  333.  
  334. .quote{
  335. font-weight:normal;
  336. font-size:16px;
  337. font-style:italic;
  338. margin:0 0 10px 0;
  339. }
  340.  
  341. .question{
  342. margin-bottom:10px;
  343. }
  344.  
  345. blockquote{
  346. margin:0 0 10px 10px;
  347. padding:0 0 0 10px;
  348. border-left:solid 1px #000;
  349. }
  350.  
  351. /*
  352. post notes
  353. */
  354. ol.notes{
  355. list-style-type:none;
  356. padding:0;
  357. margin:0;
  358. }
  359.  
  360. ol.notes li.note img{
  361. width:16px;
  362. height:16px;
  363. }
  364.  
  365. ol.notes li.note{
  366. margin:0px;
  367. }
  368.  
  369. .q{
  370. border:{text:border size} {select:border type} {color:border};
  371. padding:10px;
  372. padding-bottom:0px;
  373. {block:ifroundedposts}
  374. border-radius:6px;
  375. {/block:ifroundedposts}
  376. margin-bottom:10px;
  377. }
  378.  
  379. /* audio stuff */
  380.  
  381. .spotify_audio_player {
  382. height:80px!important;
  383. width:100%!important;}
  384.  
  385. .soundcloud_audio_player {
  386. height:150px!important;
  387. width:100%!important;}
  388.  
  389. .trackback {
  390. position: absolute;
  391. left: 20px;
  392. top: 20px;
  393. width: 19px;
  394. height: 19px;
  395. background-color: #fff;
  396. padding: 10px;
  397. opacity: .4;}
  398.  
  399. .pressplay{
  400. position: relative;
  401. width: 25px;
  402. height: 25px;
  403. overflow: hidden;
  404. left: -6px;
  405. top: -3px;}
  406.  
  407. .albumpic {
  408. position: absolute;
  409. left: 0px;
  410. top: 0px;
  411. width: 79px;
  412. height: 79px;}
  413.  
  414. .albumpic img {
  415. width: 100%;
  416. height: auto;
  417. border: 1px solid {color:font color};}
  418.  
  419. .trackinfo {
  420. width: auto;
  421. display:inline-block;
  422. margin-left: 90px;
  423. min-height: 85px;}
  424.  
  425. .audiowrapper {
  426. position: relative; display:inline-block;}
  427.  
  428. #footer{
  429. border:{text:border size} {select:border type} {color:border};
  430. {block:ifroundedposts}
  431. border-radius:6px;
  432. {/block:ifroundedposts}
  433. padding:5px;
  434. }
  435.  
  436. #footer img{
  437. height:{text:font size};
  438. width:auto;
  439. image-rendering: pixelated;
  440. }
  441.  
  442. /* nav */
  443.  
  444. #nav{
  445. float:right;
  446. margin-top:-25px;
  447. margin-right:-100px;
  448. width:300px;
  449. }
  450.  
  451. #navbox{
  452. border:{text:border size} {select:border type} {color:border};
  453. {block:ifroundedsidebar}
  454. border-radius:6px;
  455. {/block:ifroundedsidebar}
  456. background:{color:sidebar};
  457. position:relative;
  458. height:auto;
  459. padding:6px;
  460. font-size:{text:font size};
  461.  
  462. }
  463.  
  464. select{
  465. width: 200px;
  466. }
  467.  
  468. input{
  469. color: #222;
  470. background-color: red; /* For browsers that do not support gradients */
  471. background:linear-gradient(to bottom,#f2f2f2 45%, #ebebeb 45%, #cfcfcf 45%);
  472. border:1px solid #8e8f8f;
  473. border-radius: 3px;
  474. box-shadow:inset 0 0 0 1px #fff;
  475. min-width: 75px;
  476. min-height: 23px;
  477. padding: 0 12px;
  478. -moz-transition-duration:0.4s;
  479. -webkit-transition-duration:0.4s;
  480. -o-transition-duration:0.4s;
  481. }
  482.  
  483. input:hover{
  484. background: linear-gradient(to bottom,#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db);;
  485. border-radius: 2px;
  486. box-shadow: inset 1px 1px 0 #0003,inset -1px 1px 0 #0001;
  487. -moz-transition-duration:0.4s;
  488. -webkit-transition-duration:0.4s;
  489. -o-transition-duration:0.4s;
  490. border-radius:2;
  491.  
  492. }
  493.  
  494. #right img{
  495. position:fixed;
  496. z-index:9;
  497. bottom:0px;
  498. right:5px;
  499. max-width:225px;
  500. height:auto;
  501. }
  502.  
  503. #left img{
  504. position:fixed;
  505. z-index:9;
  506. bottom:0px;
  507. left:5px;
  508. max-width:350px;
  509. height:auto;
  510. }
  511.  
  512.  
  513. /* cred */
  514.  
  515. #cred{
  516. position:fixed;
  517. font-size:15px;
  518. width:48px;
  519. text-align:center;
  520. left:10px;
  521. bottom:10px;
  522. z-index:10;
  523. }
  524.  
  525. #cred a{
  526. color:white;
  527. text-decoration:none;
  528. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  529. }
  530.  
  531. </style>
  532. </head>
  533.  
  534. <body>
  535. <div id="con"> <!--main container-->
  536. <div id="flex">
  537. <div id="sidebar"><!-- sidebar start-->
  538. <a href="/" title="{text:sidebarhover}">
  539. <img src="{image:sidebar}">
  540. </a>
  541.  
  542. {block:ifDescription}
  543. <div id="description">{text:description}</div>
  544. {/block:ifDescription}
  545. {block:ifwin7}
  546. <div class="window active" style="max-width: 300px">
  547. <div class="title-bar">
  548. <div class="title-bar-text">LINKS</div>
  549. <div class="title-bar-controls">
  550. <button aria-label="Minimize"></button>
  551. <button aria-label="Maximize"></button>
  552. <button aria-label="Close"></button>
  553. </div>
  554. </div>
  555. <div class="window-body has-space">
  556. <div id="links">
  557. <a href="{text:url1}">{text:link1}</a><br>
  558. <a href="{text:url2}">{text:link2}</a><br>
  559. <a href="{text:url3}">{text:link3}</a><br>
  560. <a href="{text:url4}">{text:link4}</a>
  561. </div>
  562. </div>
  563. </div>
  564. {/block:ifwin7}
  565. {block:ifnotwin7}
  566. <div id="description">
  567. <div id="links">
  568. <a href="{text:url1}">{text:link1}</a><br>
  569. <a href="{text:url2}">{text:link2}</a><br>
  570. <a href="{text:url3}">{text:link3}</a><br>
  571. <a href="{text:url4}">{text:link4}</a>
  572. </div>
  573. </div>
  574. {block:ifnotwin7}
  575. </div><!--sidebar end-->
  576.  
  577. <div id="grid">
  578. <div id="postcontainer">
  579. {block:Posts}
  580. <div id="posts">
  581. {block:Quote}
  582. <div id="titlequote">
  583. <i class="fa fa-quote-left">
  584. </i>&nbsp; {Quote} &nbsp;
  585. <i class="fa fa-quote-right"></i>
  586. </div>
  587. {block:Source}
  588. <div id="source">&mdash; {Source}</div>
  589. {/block:Source}
  590. {/block:Quote}
  591.  
  592. {block:Text}
  593. {block:Title}
  594. <div id="title">{Title}</div>
  595. {/block:Title}
  596. {Body}
  597. {/block:Text}
  598.  
  599. {block:link}
  600. <div id="title">
  601. <a href="{URL}">
  602. <i class="fa fa-link"></i>&nbsp; {Name}</a>
  603. </div>
  604. {block:Description}{Description}{/block:Description}
  605. {/block:link}
  606.  
  607. {block:Chat}
  608. {block:Title}
  609. <div id="title">{Title}</div>{/block:Title}
  610. {/block:Text}
  611. {block:lines}
  612. {block:label}
  613. <br><b>{label}</b>
  614. {/block:label}
  615. {line}
  616. {/block:lines}
  617. {/block:Chat}
  618.  
  619. {block:Photo}
  620. {linkOpenTag}
  621. <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
  622. {linkCloseTag}
  623. {/block:Photo}
  624.  
  625. {block:Photoset}
  626. {Photoset-250}
  627. {/block:Photoset}
  628.  
  629. <div class="video">{Video-250}</div>
  630.  
  631. {block:AudioPlayer}
  632. <div class="audiowrapper">
  633. {block:AlbumArt}
  634. <div class="albumpic"><img src="{AlbumArtURL}"></div>
  635. {/block:AlbumArt}
  636. <div class="trackback">
  637. <div class="pressplay">
  638. {AudioPlayer}
  639. </div>
  640. </div>
  641. <div class="trackinfo">
  642. {block:TrackName}{TrackName}{/block:TrackName}<br>
  643. {block:Artist}<b>{Artist}</b>{/block:Artist}<br>
  644. {block:Album}<i>{Album}</i>{/block:Album}<br>
  645. </div>
  646. </div>
  647. {/block:AudioPlayer}
  648.  
  649. {block:Answer}
  650. <div class="q">
  651. <b><big>{Asker} said:</big></b>
  652. {Question}</div>
  653. <div class="a">{Answer}</div>
  654. {/block:Answer}
  655.  
  656. {block:Caption}
  657. <div class="caption">{Caption}</div>
  658. {/block:Caption}
  659.  
  660. {block:Date}
  661. <div id="footer">
  662.  
  663. <a href="{Permalink}">
  664. <a href="{Permalink}">{notecount}</a>
  665. {text:notes}
  666. <span style="float:right; margin-right:0px">
  667. <a title="{timeago}" href="{Permalink}">
  668. {DayOfMonth} {ShortMonth} {ShortYear}</a>
  669. </span>
  670.  
  671. {block:RebloggedFrom}
  672. <br>
  673. <a href="{ReblogParentURL}" title="{ReblogParentName}">
  674. via</a> /
  675. <a href="{ReblogRootURL}" title="{ReblogRootName}">
  676. source</a>
  677. {/block:RebloggedFrom}
  678.  
  679. {block:HasTags}
  680. <br>
  681. filed:
  682. <select onChange="location=this.options[this.selectedIndex].value;">
  683. <option></option>
  684. {block:Tags}
  685. <option value="{TagURL}">{Tag}</option>
  686. {/block:Tags}
  687. </select>
  688. {/block:HasTags}
  689. </div>
  690. {block:PermalinkPage}
  691. {block:NoteCount}
  692. {block:PostNotes}{PostNotes}{/block:PostNotes}
  693. {/block:NoteCount}
  694. {/block:PermalinkPage}
  695. {/block:Date}
  696.  
  697. </div>
  698. {/block:Posts}
  699. </div>
  700. </div>
  701. </div>
  702. <div id="nav">
  703. {block:ifwin7}
  704. <div class="window active" style="width: auto">
  705. <div class="title-bar">
  706. <div class="title-bar-text">NAV</div>
  707. <div class="title-bar-controls">
  708. <button aria-label="Minimize"></button>
  709. <button aria-label="Maximize"></button>
  710. <button aria-label="Close"></button>
  711. </div>
  712. </div>
  713. <div class="window-body has-space">
  714. {block:Pagination}
  715. <table style="width:100%; margin-top:5px">
  716. <tr>
  717. <td style="width: 50%;">
  718. {block:PreviousPage}
  719. <form action="{PreviousPage}">
  720. <input type="submit" value="back" />
  721. </form>
  722. {/block:PreviousPage}
  723. </td>
  724. <td style="width: 50%;">
  725. {block:NextPage}
  726.  
  727. <form style="float:right" action="{NextPage}">
  728. <input type="submit" value="next" />
  729. </form>
  730. {/block:NextPage}
  731. </td>
  732. </tr>
  733. </table>
  734. {/block:Pagination}
  735.  
  736. <form action="/search" class="search" type="text" method="get">
  737. <input type="search" style="width: calc(100% - 15px); margin-top:5px" name="q" value="" placeholder="Search" />
  738. </div>
  739. </div>
  740. {/block:ifwin7}
  741.  
  742. {block:ifnotwin7}
  743.  
  744. <div id="navbox">
  745. {block:Pagination}
  746. <table style="width:100%; margin-top:5px">
  747. <tr>
  748. <td style="width: 50%;">
  749. {block:PreviousPage}
  750. <form action="{PreviousPage}">
  751. <input type="submit" value="back" />
  752. </form>
  753. {/block:PreviousPage}
  754. </td>
  755.  
  756. <td style="width: 50%;">
  757. {block:NextPage}
  758. <form style="float:right" action="{NextPage}">
  759. <input type="submit" value="next" />
  760. </form>
  761. {/block:NextPage}
  762. </td>
  763.  
  764. </tr>
  765. </table>
  766. {/block:Pagination}
  767.  
  768. <form action="/search" class="search" type="text" method="get"><input type="search" style="width: calc(100% - 15px); margin-top:5px" name="q" value="" placeholder="Search" />
  769. </div>
  770. {/block:ifnotwin7}
  771.  
  772. </div>
  773. </div><!--main container end-->
  774. <div id="right"><img src="{image:bottom right}"></div>
  775. <div id="left"><img src="{image:bottom left}"></div>
  776. <div id="cred">
  777. <a title="coda was here" href="https://joyfriend.tumblr.com/">
  778. {block:ifwin7}
  779. <img src="https://iconarchive.com/download/i19002/iconshock/vista-general/trash.ico" width="48px"><br>
  780. {/block:ifwin7}
  781. theme
  782. </a>
  783. </div>
  784. </body>
  785. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement