calliearambulo

CA by PT 2020

May 11th, 2020
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.13 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!---
  4. ___ ___ _ _ _____ __ _____ _ _ ___ __ __ ___ ___
  5. | _ \_ _| | | | / _ \ \ / / |_ _| || | __| \/ | __/ __|
  6. | _/| || |__| |_| (_) \ \/\/ / | | | __ | _|| |\/| | _|\__ \
  7. |_| |___|____|____\___/ \_/\_/ |_| |_||_|___|_| |_|___|___/
  8.  
  9. BY CARA
  10.  
  11. Rules:
  12. 1. Do not steal snippets or all of my codes.
  13. 2. Do not claim theme as yours.
  14. 3. Do not remove the credit.
  15. -->
  16.  
  17. <head>
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{FavIcon}" />
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  23. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
  24. <link rel="stylesheet" href="https://static.tumblr.com/vowb075/m9vpc1yxe/animate.min.css">
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Manrope:400,700&display=swap" rel="stylesheet">
  27.  
  28. <!--- START META TAGS --->
  29. <meta name="color:Background" content="#ffffff"/>
  30. <meta name="color:Text" content="#000000"/>
  31. <meta name="color:Accent" content="#ffb257"/>
  32. <meta name="color:Border" content="#eeeeee"/>
  33.  
  34. <meta name="image:sidebar image" content=""/>
  35. <meta name="if:infinite scroll" content="1"/>
  36.  
  37. <meta name="if:post hover effects" content="1"/>
  38.  
  39. <meta name="text:link 1 name" content=""/>
  40. <meta name="text:link 1 url" content=""/>
  41.  
  42. <meta name="text:link 2 name" content=""/>
  43. <meta name="text:link 2 url" content=""/>
  44.  
  45. <meta name="text:link 3 name" content=""/>
  46. <meta name="text:link 3 url" content=""/>
  47. <!-- END OF META TAGS -->
  48.  
  49. </head>
  50. <style type="text/css">
  51.  
  52. /* SCROLLBAR */
  53. ::-webkit-scrollbar {
  54. width:5px;
  55. }
  56.  
  57. ::-webkit-scrollbar-track {
  58. background-color:#ffffff;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb {
  62. background-color:{color:accent};
  63. }
  64.  
  65. body {
  66. color:{color:text};
  67. background-color:{color:background};
  68. font-size:12px;
  69. font-family: 'Manrope', sans-serif;
  70. line-height:1.5;
  71. letter-spacing:0.5px;
  72. }
  73.  
  74. a {
  75. text-decoration:none;
  76. color:{color:accent};
  77. }
  78.  
  79. iframe, img, embed, object, video {
  80. max-width: 100%;
  81. }
  82.  
  83. blockquote {
  84. border-left:1.5px solid {color:accent};
  85. color:{color:text};
  86. margin-left:20px;
  87. padding-left:20px;
  88. }
  89.  
  90. /* DO NOT REMOVE MY CREDITS */
  91. #pillowthemes {
  92. right:20px;
  93. bottom:20px;
  94. position:fixed;
  95. background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);
  96. width:30px;
  97. height:30px;
  98. border-radius:50%;
  99. }
  100. /* DO NOT REMOVE MY CREDITS */
  101.  
  102. #topb {
  103. top:0;
  104. width:100%;
  105. height:5px;
  106. background-color:{color:accent};
  107. position:fixed;
  108. z-index:9999;
  109. }
  110.  
  111. #container {
  112. width:1000px;
  113. height:auto;
  114. margin-top:90px;
  115. margin-right:auto;
  116. margin-left:auto;
  117. margin-bottom:50px;
  118. }
  119.  
  120. #content {
  121. width:500px;
  122. height:auto;
  123. float:right;
  124. }
  125.  
  126. /* Individual Posts */
  127. article {
  128. width:500px;
  129. margin-bottom:150px;
  130. border:1px solid {color:border};
  131. background-color:#fff;
  132. {block:PermalinkPage}
  133. width:500px;
  134. {/block:PermalinkPage}
  135. }
  136.  
  137. #sidebar {
  138. margin-top:-90px;
  139. width:400px;
  140. height:100%;
  141. float:left;
  142. background-color:{color:background};
  143. border-right:1px solid {color:border};
  144. position:fixed;
  145. }
  146.  
  147. #sideim {
  148. width:45px;
  149. height:45px;
  150. margin:120px 20px 20px 20px;
  151. border-radius:50%;
  152. }
  153.  
  154. #sideim img {
  155. border-radius:50%;
  156. }
  157.  
  158. #blogt {
  159. font-size:22px;
  160. text-align:left;
  161. text-transform:uppercase;
  162. margin:20px;
  163. color:{color:accent};
  164. font-weight:700;
  165. }
  166.  
  167. #desc {
  168. width:290px;
  169. text-align:left;
  170. margin:20px;
  171. }
  172.  
  173. #clist {
  174. width:290px;
  175. margin:20px 20px 20px 5px;
  176. }
  177.  
  178. #cnum {
  179. width:25px;
  180. height:auto;
  181. padding:10px;
  182. float:left;
  183. text-align:center;
  184. color:{color:accent};
  185. font-weight:700;
  186. border-right:1px solid {color:accent};
  187. }
  188.  
  189. #citem {
  190. width:220px;
  191. height:auto;
  192. padding:10px;
  193. float:right;
  194. background-color:none;
  195. }
  196.  
  197. #links {
  198. width:290px;
  199. text-align:left;
  200. margin:20px;
  201. }
  202.  
  203. #links a {
  204. margin-right:15px;
  205. color:{color:accent};
  206. }
  207.  
  208. #links a:last-child {
  209. margin-right:0px;
  210. }
  211.  
  212. #line {
  213. margin-top:200px;
  214. margin-left:20px;
  215. width:290px;
  216. height:3px;
  217. background-color:{color:accent};
  218. }
  219.  
  220. /* PERMALINKS */
  221. #perma {
  222. {block:ifposthovereffects}
  223. opacity:0;
  224. -webkit-transition: all 0.3s ease-out;
  225. -moz-transition: all 0.3s ease-out;
  226. -o-transition: all 0.3s ease-out;
  227. transition: all 0.3s ease-out;
  228. {/block:ifposthovereffects}
  229. text-align:left;
  230. margin-top:20px;
  231. margin-left:-7px;
  232. position:absolute;
  233. font-size:10px;
  234. {block:PermalinkPage}
  235. display:none;
  236. {/block:PermalinkPage}
  237. }
  238.  
  239. #perma a {
  240. margin-right:20px;
  241. color:{color:text};
  242. }
  243.  
  244. #t {
  245. {block:ifposthovereffects}
  246. opacity:0;
  247. -webkit-transition: all 0.3s ease-out;
  248. -moz-transition: all 0.3s ease-out;
  249. -o-transition: all 0.3s ease-out;
  250. transition: all 0.3s ease-out;
  251. transition-delay:0.2s;
  252. {/block:ifposthovereffects}
  253. margin-top:50px;
  254. font-style:italic;
  255. margin-left:-7px;
  256. position:absolute;
  257. font-size:10px;
  258. }
  259.  
  260. #t a {
  261. margin-right:20px;
  262. }
  263.  
  264. {block:ifposthovereffects}
  265. article:hover #perma {
  266. opacity:1;
  267. margin-left:0px;
  268. -webkit-transition: all 0.3s ease-in;
  269. -moz-transition: all 0.3s ease-in;
  270. -o-transition: all 0.3s ease-in;
  271. transition: all 0.3s ease-in;
  272. }
  273.  
  274. article:hover #t {
  275. opacity:1;
  276. margin-left:0px;
  277. -webkit-transition: all 0.3s ease-in;
  278. -moz-transition: all 0.3s ease-in;
  279. -o-transition: all 0.3s ease-in;
  280. transition: all 0.3s ease-in;
  281. transition-delay:0.2s;
  282. }
  283. {/block:ifposthovereffects}
  284.  
  285. /* TAGS */
  286. .tags {
  287. padding:0px 10px 0px 20px;
  288. display:inline;
  289. }
  290.  
  291. /* TEXT POSTS */
  292. .ptitle {
  293. font-size:14px;
  294. text-transform:uppercase;
  295. margin:20px;
  296. font-weight:700;
  297. }
  298.  
  299. .pbody {
  300. margin:20px;
  301. }
  302.  
  303. #posttext img {
  304. width:auto;
  305. height:auto;
  306. }
  307.  
  308. /* QUOTE POSTS */
  309. .quo {
  310. margin:20px;
  311. font-weight:700;
  312. color:{color:accent};
  313. font-size:14px;
  314. }
  315.  
  316. .source {
  317. margin:20px;
  318. }
  319.  
  320. /* ASK POSTS */
  321. .as {
  322. margin:20px;
  323. text-transform:uppercase;
  324. font-size:14px;
  325. color:{color:accent};
  326. font-weight:700;
  327. }
  328.  
  329. .q {
  330. margin:20px;
  331. }
  332.  
  333. .answerer {
  334. margin:20px;
  335. text-transform:uppercase;
  336. font-size:14px;
  337. color:{color:accent};
  338. font-weight:700;
  339. }
  340.  
  341. .ans {
  342. margin:20px;
  343. }
  344.  
  345. /* AUDIO POSTS */
  346. .albumart {
  347. width:500px;
  348. height:500px;
  349. }
  350.  
  351. .aplayer {
  352. width:500px;
  353. margin-top:-5px;
  354. }
  355.  
  356. .acaption {
  357. margin:20px;
  358. }
  359.  
  360. .tumblr_audio_player {
  361. height:30px;
  362. width:500px;
  363. }
  364.  
  365. /* POST CAPTION */
  366. .caption {
  367. margin:20px;
  368. }
  369.  
  370. /* CREDITS TO TUMBLR DOCS */
  371. ol.notes {
  372. padding: 0px;
  373. margin: 25px 0px;
  374. list-style-type: none;
  375. border-bottom: solid 1px {color:border};
  376. }
  377.  
  378. ol.notes li.note {
  379. border-top: solid 1px {color:border};
  380. padding: 10px;
  381. }
  382.  
  383. ol.notes li.note img.avatar {
  384. vertical-align: -4px;
  385. margin-right: 10px;
  386. width: 16px;
  387. height: 16px;
  388. }
  389.  
  390. ol.notes li.note span.action {
  391. }
  392.  
  393. ol.notes li.note .answer_content {
  394. font-weight: normal;
  395. }
  396.  
  397. ol.notes li.note blockquote {
  398. border-color:{color:accent};
  399. padding: 4px 10px;
  400. margin: 10px 0px 0px 25px;
  401. }
  402.  
  403. ol.notes li.note blockquote a {
  404. text-decoration: none;
  405. }
  406. /* CREDITS TO TUMBLR DOCS */
  407.  
  408. /* INFINITE SCROLL */
  409. {block:ifnotinfinitescroll}
  410. .pagi {
  411. width:290px;
  412. text-align:left;
  413. margin:20px;
  414. }
  415.  
  416. .pagi a {
  417. color:{color:accent};
  418. margin-right:15px;
  419. }
  420.  
  421. .pagi a:last-child {
  422. margin-right:0px;
  423. color:{color:text};
  424. }
  425.  
  426. {/block:ifnotinfinitescroll}
  427.  
  428. {block:ifinfinitescroll}
  429. .pagi {
  430. display:none;
  431. }
  432. {/block:ifinfinitescroll}
  433.  
  434. /* TUMBLR CONTROLS */
  435. .tmblr-iframe {
  436. position:fixed!important;
  437. top:0;
  438. margin-top:20px;
  439. right:0;
  440. margin-right:20px;
  441. z-index:999999!important;
  442. -webkit-transform:scale(0.8,0.8);
  443. -webkit-transform-origin: 100% 0%;
  444. -ms-transform-origin:100% 0%;
  445. -ms-transform:scale(0.8,0.8);
  446. transform:scale(0.8,0.8);
  447. transform-origin:100% 0%;
  448. }
  449.  
  450. </style>
  451. <body>
  452. <div id="topb"></div>
  453.  
  454. <div id="container">
  455. <div id="sidebar">
  456. <div id="sideim"><img src="{image:sidebar image}"></div>
  457. <div id="blogt"><a href="/">{Title}</a></div>
  458. <div id="desc">{Description}</div>
  459. <div id="links">
  460. <a href="/ask">Mailbox</a>
  461. <a href="{text:link 1 url}">{text:link 1 name}</a>
  462. <a href="{text:link 2 url}">{text:link 2 name}</a>
  463. <a href="{text:link 3 url}">{text:link 3 name}</a>
  464. <a href="https://pillowthemes.tumblr.com/">Themes</a>
  465. </div>
  466. <div id="clist">
  467. <div id="cnum">01</div>
  468. <div id="citem">Attend something on sustainability</div>
  469. <div id="cnum">02</div>
  470. <div id="citem">Create Theme 22</div>
  471. <div id="cnum">03</div>
  472. <div id="citem">Think of thesis topics</div>
  473. <div id="cnum">04</div>
  474. <div id="citem">DIY Handbag and Patches</div>
  475. </div>
  476. <div id="line"></div>
  477. {block:Pagination}
  478. <div class="pagination">
  479. <div class="pagi">
  480. {block:PreviousPage}<a href="{PreviousPage}">Backward</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}">Forward</a>{/block:NextPage}</div></div>
  481. {/block:Pagination}
  482. <nav>
  483. <ul>
  484. {block:HasPages}
  485. {block:Pages}
  486. <li><a href="{URL}">{Label}</a></li>
  487. {/block:Pages}
  488. {/block:HasPages}
  489. </ul>
  490. </nav>
  491. </div>
  492.  
  493. <div id="content">
  494. {block:Posts}
  495. <article>
  496.  
  497. {block:Photo}
  498. <div class="photo">
  499. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  500. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  501. {/block:Photo}
  502.  
  503. {block:Photoset}
  504. <div class="photoset">
  505. {block:IndexPage}
  506. {Photoset-500}
  507. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  508. {/block:IndexPage}
  509. {block:PermalinkPage}
  510. {Photoset-500}
  511. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  512. {/block:PermalinkPage}
  513. {/block:Photoset}
  514.  
  515. {block:Text}
  516. <div id="posttext">
  517. {block:Title}<div class="ptitle"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  518. <div class="pbody">{Body}</div>
  519. {/block:Text}
  520.  
  521. {block:Link}
  522. <div class="link">
  523. <a href="{URL}">{Name}</a>
  524. {block:Description}{Description}{/block:Description}
  525. {/block:Link}
  526.  
  527. {block:Quote}
  528. <div class="quote">
  529. <div class="quo">“{Quote}”</div>
  530. {block:Source}<div class="source">—&nbsp;&nbsp;{Source}</div>{/block:Source}
  531. {/block:Quote}
  532.  
  533. {block:Chat}
  534. <div class="chat">
  535. <ul>
  536. {block:Lines}
  537. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  538. {/block:Lines}
  539. </ul>
  540. {/block:Chat}
  541.  
  542. {block:Audio}
  543. {block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}
  544. {block:AudioPlayer}<div class="aplayer">{AudioPlayer}</div>{/block:AudioPlayer}
  545. {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
  546. {block:IndexPage}<div class="acaption">{block:TrackName}Track: {TrackName}<br>{/block:TrackName}
  547. {block:Artist}Artist: {Artist}<br>{/block:Artist}
  548. {block:PlayCount}Played: {PlayCount}{/block:PlayCount}</div>
  549. {/block:IndexPage}
  550. {block:PermalinkPage}
  551. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  552. {/block:PermalinkPage}
  553. {/block:Audio}
  554.  
  555. {block:Video}
  556. <div id="post video">
  557. {Video-500}
  558. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  559. </div>
  560. {/block:Video}
  561.  
  562. {block:Answer}
  563. <div class="as">{Asker} asked:</div>
  564. <div class="q">{Question}</div>
  565. <div class="answerer">Answer:</div>
  566. <div class="ans">{Answer}</div>
  567. {/block:Answer}
  568.  
  569. {block:IndexPage}
  570. <div id="perma">
  571. {block:RebloggedFrom}
  572. <a href="{ReblogParentURL}">
  573. <img src="{ReblogParentPortraitURL-16}" style="margin-right:10px;border-radius:50%;">Reblogged from {ReblogParentName}
  574. </a>
  575. {/block:RebloggedFrom}
  576. {block:NotReblog}<img src="{PortraitURL-16}" style="margin-right:10px;border-radius:50%;"><a href="/">Original Post of @{Title}</a>
  577. {/block:NotReblog}
  578. <a href="{Permalink}">Posted on {DayOfMonthWithZero} {Month} {Year}</a>
  579. <a href="{Permalink}">{NoteCountWithLabel}</a>
  580. </div>
  581. <div id="t">
  582. {block:HasTags}
  583. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  584. {/block:HasTags}
  585. </div>
  586. {/block:IndexPage}
  587.  
  588. {block:PermalinkPage}
  589. {block:HasTags}{block:Tags}<div class="tags"><a href="{TagURL}"> #{Tag} </a></div>{/block:Tags}{/block:HasTags}
  590. {block:PostNotes}{PostNotes}{/block:PostNotes}
  591. {/block:PermalinkPage}
  592.  
  593. </article>
  594. {/block:Posts}
  595. </div>
  596. </div>
  597.  
  598. <!--- DO NOT TOUCH THIS PART --->
  599. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  600. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  601. {block:IfInfiniteScroll}
  602. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  603. <script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  604. {/block:IfInfiniteScroll}
  605.  
  606. <script>
  607. (function() {
  608. var $tumblelog = $('#content');
  609. {block:IfInfiniteScroll}
  610. $tumblelog.infinitescroll({
  611. navSelector : ".pagination",
  612. nextSelector : ".pagination a:first",
  613. itemSelector : "article",
  614. bufferPx : 50,
  615. done : "",
  616. loading: {
  617. img : "",
  618. msgText: ""
  619. },
  620. },
  621. function( newElements ) {
  622. var $newElems = $( newElements ).css({ opacity: 0 });
  623. $newElems.imagesLoaded(function(){
  624. $newElems.animate({ opacity: 1 });
  625. $tumblelog.masonry( 'appended', $newElems);
  626. });
  627. }
  628. );
  629. {/block:IfInfiniteScroll}
  630. $tumblelog.imagesLoaded( function(){
  631. $tumblelog.masonry({
  632. columnWidth: function( containerWidth ) {
  633. return containerWidth / 100;
  634. }
  635. });
  636. });
  637. })();
  638. </script>
  639. <!--- DO NOT TOUCH THIS PART --->
  640.  
  641.  
  642. <!-- DO NOT REMOVE MY CREDITS -->
  643. <a href="https://pillowthemes.tumblr.com/"><div id="pillowthemes"></div></a>
  644. <!-- DO NOT REMOVE MY CREDITS -->
  645.  
  646. </body>
  647. </html>
Add Comment
Please, Sign In to add comment