API tools faq
paste
tricksterkid

tumblr page // limits

tricksterkid
Nov 13th, 2020 (edited)
1,908
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- nuclearthemes on tumblr || thanks for using my code! -->
  4. <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
  5.  
  6. <!--
  7. || CREDITS ||
  8.  
  9. • Background pattern by MagicPattern >> https://www.magicpattern.design/
  10. • Chat speech bubbles made with Bubbly >> http://projects.verou.me/bubbly/
  11. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  12. • Fonts from Google >> https://fonts.google.com/
  13. • Icons from Font Awesome >> https://fontawesome.com/
  14. • Placeholders from Unsplash >> https://unsplash.com/
  15. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  16.  
  17. -->
  18.  
  19. <html>
  20.  
  21. <head>
  22.  
  23. <title>{Name} / title</title> <!-- page title -->
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Kumbh+Sans:400,400i,700,700i|Roboto+Mono:400,400i,700,700i" rel="stylesheet">
  30.  
  31. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  32.  
  33. <style type="text/css">
  34.  
  35. * {margin:0; padding:0;}
  36.  
  37. /* ----------------------------------------------------------------------- */
  38. /* --------------------------- tumblr controls --------------------------- */
  39.  
  40. .tmblr-iframe {
  41. filter: invert(100%);
  42. -o-filter: invert(100%);
  43. -moz-filter: invert(100%);
  44. -ms-filter: invert(100%);
  45. -webkit-filter: invert(100%);
  46. opacity: 0.2;
  47. position: fixed;
  48. right: 5px;
  49. top: 5px;
  50. transform: scale(0.7,0.7);
  51. transform-origin: 100% 0%;
  52. -ms-transform-origin: 100% 0%;
  53. -webkit-transform-origin: 100% 0%;
  54. transition: 0.4s;
  55. -o-transition: 0.4s;
  56. -moz-transition: 0.4s;
  57. -ms-transition: 0.4s;
  58. -webkit-transition: 0.4s;
  59. white-space: nowrap;
  60. }
  61.  
  62. .tmblr-iframe:hover {
  63. opacity: 1;
  64. }
  65.  
  66. /* ----------------------------------------------------------------------- */
  67. /* --------------------------- custom tooltips --------------------------- */
  68.  
  69. .tippy-tooltip.custom-theme {
  70. background-color: #ffffff;
  71. border: 3px solid #facdd5;;
  72. border-radius: 0;
  73. color: #c29ef7;
  74. font-family: Roboto Mono;
  75. font-size: 13px;
  76. font-weight: bold;
  77. text-align: center;
  78. }
  79.  
  80. /* ----------------------------------------------------------------------- */
  81. /* -------------------- custom selection & scrollbar --------------------- */
  82.  
  83. ::-moz-selection {background: #facdd5; color: #ffffff;}
  84. ::selection {background: #facdd5; color: #ffffff;}
  85.  
  86. ::-webkit-scrollbar-thumb
  87. {background: #c29ef7; border: 5px solid #fff; border-radius: 10px;}
  88. ::-webkit-scrollbar-track
  89. {background: #facdd5; border: 7px solid #ffffff;}
  90. ::-webkit-scrollbar
  91. {width: 15px;}
  92.  
  93. /* ----------------------------------------------------------------------- */
  94. /* ----------------------------- page layout ----------------------------- */
  95.  
  96. body {
  97. background: #ffffff; /* background color */
  98. background-image: linear-gradient(#ebdeff 2px, transparent 2px),
  99. linear-gradient(to right, #ebdeff 2px, #ffffff 2px);
  100. background-size: 40px 40px;
  101. color: #1a1a1a; /* text color */
  102. font-family: Kumbh Sans; /* font */
  103. font-size: 14px; /* font size */
  104. text-align: justify; /* text align */
  105. }
  106.  
  107. #container { /* container */
  108. background: #ffffff;
  109. height: 450px;
  110. left: 50%;
  111. margin-bottom: 40px;
  112. overflow: none;
  113. position: absolute;
  114. top: 50%;
  115. transform: translate(-50%,-50%);
  116. -moz-transform: translate(-50%,-50%);
  117. -ms-transform: translate(-50%,-50%);
  118. -o-transform: translate(-50%,-50%);
  119. -webkit-transform: translate(-50%,-50%);
  120. width: 800px;
  121. }
  122.  
  123. /* ----------------------------------------------------------------------- */
  124. /* -------------------------------- text --------------------------------- */
  125.  
  126. h1 { /* main title */
  127. color: #c29ef7;
  128. font-family: Roboto Mono;
  129. font-size: 1.4em;
  130. margin-top: 3px;
  131. text-shadow: 2px 2px #facdd5;
  132. }
  133.  
  134. h2 { /* chat bubble titles */
  135. color: #c29ef7;
  136. font-family: Roboto Mono;
  137. font-size: 1.1em;
  138. margin-bottom: 10px;
  139. margin-top: -5px;
  140. }
  141.  
  142. a {
  143. color: #e7bde0; /* link color */
  144. font-family: Roboto Mono;
  145. text-decoration: none;
  146. transition: 0.4s;
  147. -moz-transition: 0.4s;
  148. -ms-transition: 0.4s;
  149. -o-transition: 0.4s;
  150. -webkit-transition: 0.4s;
  151. }
  152.  
  153. a:hover {
  154. color: #c29ef7; /* link hover color */
  155. transition: 0.4s;
  156. -moz-transition: 0.4s;
  157. -ms-transition: 0.4s;
  158. -o-transition: 0.4s;
  159. -webkit-transition: 0.4s;
  160. }
  161.  
  162. /* ----------------------------------------------------------------------- */
  163. /* ---------------------------- side pictures ---------------------------- */
  164.  
  165. #pictures { /* picture container */
  166. float: left;
  167. height: 450px;
  168. width: 300px;
  169. }
  170.  
  171. #character1 { /* first picture */
  172. left: 0;
  173. position: relative;
  174. width: 300px;
  175. }
  176.  
  177. #character2 { /* second picture on hover */
  178. left: 0;
  179. opacity: 0;
  180. position: absolute;
  181. transition: 1s;
  182. -moz-transition: 1s;
  183. -ms-transition: 1s;
  184. -o-transition: 1s;
  185. -webkit-transition: 1s;
  186. width: 300px;
  187. z-index: 99;
  188. }
  189.  
  190. #character2:hover {
  191. cursor: cell;
  192. opacity: 1;
  193. transition: 1s;
  194. -moz-transition: 1s;
  195. -ms-transition: 1s;
  196. -o-transition: 1s;
  197. -webkit-transition: 1s;
  198. }
  199.  
  200. /* ----------------------------------------------------------------------- */
  201. /* ---------------------------- title banner ----------------------------- */
  202.  
  203. #banner { /* top banner */
  204. border: 8px solid #facdd5;
  205. float: right;
  206. height: 34px;
  207. text-align: center;
  208. width: 484px;
  209. }
  210.  
  211. @keyframes blink { /* blinking icon */
  212. 0% {opacity: 0}
  213. 49%{opacity: 0}
  214. 50% {opacity: 1}
  215. }
  216.  
  217. blink {
  218. animation: blink 1.5s infinite;
  219. margin-left: -5px;
  220. }
  221.  
  222. /* ----------------------------------------------------------------------- */
  223. /* --------------------------- sidebar colors ---------------------------- */
  224.  
  225. #colors { /* colors container */
  226. float: right;
  227. height: 400px;
  228. width: 100px;
  229. }
  230.  
  231. .colorblock { /* color blocks */
  232. height: 100px;
  233. width: 100px;
  234. }
  235.  
  236. .colorblock:hover {
  237. cursor: cell;
  238. }
  239.  
  240. /* adjust colors for the color bar on the right here! */
  241.  
  242. #color1 {background-color: #c29ef7;}
  243. #color2 {background-color: #d4adeb;}
  244. #color3 {background-color: #e7bde0;}
  245. #color4 {background-color: #facdd5;}
  246.  
  247. /* ----------------------------------------------------------------------- */
  248. /* ---------------------------- text content ----------------------------- */
  249.  
  250. #content { /* text container */
  251. float: right;
  252. height: 400px;
  253. line-height: 17px;
  254. width: 400px;
  255. }
  256.  
  257. .chatblock { /* invisible container for bubbles */
  258. height: 180px;
  259. padding: 10px;
  260. width: 380px;
  261. }
  262.  
  263. .icon { /* icons next to bubbles */
  264. border-radius: 100%;
  265. color: #ffffff;
  266. font-family: Roboto Mono;
  267. font-size: 25px;
  268. font-weight: bold;
  269. height: 40px;
  270. line-height: 33px;
  271. padding: 5px;
  272. text-align: center;
  273. transition: 0.4s;
  274. -moz-transition: 0.4s;
  275. -ms-transition: 0.4s;
  276. -o-transition: 0.4s;
  277. -webkit-transition: 0.4s;
  278. width: 40px;
  279. }
  280.  
  281. .icon:hover {
  282. transition: 0.4s;
  283. -moz-transition: 0.4s;
  284. -ms-transition: 0.4s;
  285. -o-transition: 0.4s;
  286. -webkit-transition: 0.4s;
  287. }
  288.  
  289. .top { /* top icon */
  290. background-color: #facdd5;
  291. float: left;
  292. }
  293.  
  294. .top:hover { /* top icon hover */
  295. background-color: #c29ef7;
  296. transform: scale(0.75);
  297. -moz-transform: scale(0.75);
  298. -ms-transform: scale(0.75);
  299. -o-transform: scale(0.75);
  300. -webkit-transform: scale(0.75);
  301. }
  302.  
  303. .bottom { /* bottom icon */
  304. background-color: #c29ef7;
  305. float: right;
  306. }
  307.  
  308. .bottom:hover { /* bottom icon hover */
  309. background-color: #facdd5;
  310. transform: scale(0.75);
  311. -moz-transform: scale(0.75);
  312. -ms-transform: scale(0.75);
  313. -o-transform: scale(0.75);
  314. -webkit-transform: scale(0.75);
  315. }
  316.  
  317. #bubble1 { /* top bubble */
  318. border: 5px solid #facdd5;
  319. border-radius: 20px;
  320. float: right;
  321. height: 140px;
  322. padding: 15px;
  323. position: relative;
  324. width: 270px;
  325. }
  326.  
  327. #bubble1:after { /* top bubble arrow */
  328. content: '';
  329. position: absolute;
  330. left: 0;
  331. top: 35px;
  332. width: 0;
  333. height: 0;
  334. border: 20px solid transparent;
  335. border-right-color: #facdd5;
  336. border-left: 0;
  337. border-top: 0;
  338. margin-top: -10px;
  339. margin-left: -20px;
  340. }
  341.  
  342. #bubble2 { /* bottom bubble */
  343. border: 5px solid #c29ef7;
  344. border-radius: 20px;
  345. float: left;
  346. height: 140px;
  347. overflow: none;
  348. padding: 15px;
  349. position: relative;
  350. width: 270px;
  351. }
  352.  
  353. #bubble2:after { /* bottom bubble arrow */
  354. content: '';
  355. position: absolute;
  356. right: 0;
  357. top: 35px;
  358. width: 0;
  359. height: 0;
  360. border: 20px solid transparent;
  361. border-left-color: #c29ef7;
  362. border-right: 0;
  363. border-top: 0;
  364. margin-top: -10px;
  365. margin-right: -20px;
  366. }
  367.  
  368. #links { /* container for links */
  369. height: 120px;
  370. width: 270px;
  371. }
  372.  
  373. .link { /* individual link in bottom bubble */
  374. height: 20px;
  375. padding: 10px;
  376. width: 115px;
  377. transition: 0.4s;
  378. -moz-transition: 0.4s;
  379. -ms-transition: 0.4s;
  380. -o-transition: 0.4s;
  381. -webkit-transition: 0.4s;
  382. }
  383.  
  384. .link:hover { /* links on hover */
  385. padding-left: 20px;
  386. padding-right: 0px;
  387. transition: 0.4s;
  388. -moz-transition: 0.4s;
  389. -ms-transition: 0.4s;
  390. -o-transition: 0.4s;
  391. -webkit-transition: 0.4s;
  392. }
  393.  
  394. /* ----------------------------------------------------------------------- */
  395. /* ----------------------------- responsive ------------------------------ */
  396.  
  397. @media only screen and (max-width: 850px){
  398. h2 {display: none;}
  399. #container {width: 600px;}
  400. #pictures, #character1, #character2 {float: none; width: 267px;}
  401. #pictures {position: absolute; top: 50px;}
  402. #banner {float: none; position: absolute; top: 0; width: 351px;}
  403. #colors {float: none; position: absolute; left: 267px; top: 50px;}
  404. #content {float: right; height: 450px; width: 233px;}
  405. #bubble1, #bubble2 {height: 100px; width: 175px;}
  406. #bubble1::-webkit-scrollbar {display: none;}
  407. #links {height: 100px; width: 175px;}
  408. #bubble1:after, #bubble2:after {display: none;}
  409. .icon {float: none; margin: 0px auto 10px auto;}
  410. .chatblock {height: 205px; width: 215px;}
  411. .link {height: 13px; width: 67px;}
  412. #bubble1 {
  413. overflow: auto;
  414. -moz-overflow-style: none;
  415. -ms-overflow-style: none;
  416. -o-overflow-style: none;
  417. }
  418. }
  419.  
  420. @media only screen and (max-width: 620px) {
  421. #bubble1, #bubble2 {float: none; margin: auto; width: 270px;}
  422. #container {overflow: auto; width: 385px;}
  423. #content {float: none; margin-top: 450px; position: absolute; width: 367px;}
  424. #links {width: 270px;}
  425. .chatblock {width: 347px;}
  426. .link {width: 115px;}
  427. }
  428.  
  429. /* ----------------------------------------------------------------------- */
  430. /* ------------------------------- credits ------------------------------- */
  431.  
  432. #credit {
  433. color: #facdd5;
  434. bottom: 0;
  435. font-size: 20px;
  436. font-style: italic;
  437. margin: 10px;
  438. padding: 10px 0px;
  439. position: fixed;
  440. right: 0;
  441. text-align: center;
  442. transition: 0.4s;
  443. -moz-transition: 0.4s;
  444. -ms-transition: 0.4s;
  445. -o-transition: 0.4s;
  446. -webkit-transition: 0.4s;
  447. width: 40px;
  448. }
  449.  
  450. #credit:hover {
  451. background-color: #facdd5;
  452. color: #ffffff;
  453. transition: 0.4s;
  454. -moz-transition: 0.4s;
  455. -ms-transition: 0.4s;
  456. -o-transition: 0.4s;
  457. -webkit-transition: 0.4s;
  458. }
  459.  
  460. /* ----------------------------------------------------------------------- */
  461.  
  462. </style>
  463.  
  464. </head>
  465.  
  466. <body>
  467.  
  468. <!--------------------------- START MAIN CONTENT---------------------------->
  469.  
  470. <div id="container">
  471.  
  472. <!-- side pictures -->
  473.  
  474. <div id="pictures">
  475. <img id="character1" src="https://i.imgur.com/eJi3hpo.jpg">
  476. <img id="character2" src="https://i.imgur.com/y2eIuZp.jpg">
  477. </div>
  478.  
  479. <!-- top banner -->
  480.  
  481. <div id="banner">
  482.  
  483. <h1>
  484. <i class="fas fa-ghost"></i>
  485. we wanted to be the sky.
  486. <blink>Ꮖ</blink>
  487. </h1>
  488.  
  489. </div>
  490.  
  491. <!-- color bar -->
  492.  
  493. <div id="colors">
  494.  
  495. <div class="colorblock" id="color1" title="five long nights"></div>
  496. <div class="colorblock" id="color2" title="not by your side"></div>
  497. <div class="colorblock" id="color3" title="and i miss"></div>
  498. <div class="colorblock" id="color4" title="your touch"></div>
  499.  
  500. </div>
  501.  
  502. <!-- start text content -->
  503.  
  504. <div id="content">
  505.  
  506. <!-- start top -->
  507.  
  508. <div class="chatblock">
  509.  
  510. <div class="icon top" title="we can meet in the middle">A</div>
  511.  
  512. <div id="bubble1">
  513.  
  514. <h2> >> i've never felt more alone </h2>
  515.  
  516. <i>persephone | 20 years | she/they | lesbian</i>
  517.  
  518. <br><br>
  519.  
  520. You can put a little description here. You can add <b>bold text</b> or <i>italic text</i> or <a href="">links</a>. It doesn't have automatic overflow, so don't write too much!
  521.  
  522. </div>
  523.  
  524. </div>
  525.  
  526. <!-- end top -->
  527.  
  528. <!-- start bottom -->
  529.  
  530. <div class="chatblock">
  531.  
  532. <div class="icon bottom" title="bodies and souls collide">B</div>
  533.  
  534. <div id="bubble2">
  535.  
  536. <h2> >> feels so scary getting old </h2>
  537.  
  538. <!-- start links -->
  539.  
  540. <div id="links">
  541.  
  542. <!-- left links -->
  543.  
  544. <div style="float:left">
  545.  
  546. <a href="">
  547. <div class="link">link 1</div>
  548. </a>
  549.  
  550. <a href="">
  551. <div class="link">link 2</div>
  552. </a>
  553.  
  554. <a href="">
  555. <div class="link">link 3</div>
  556. </a>
  557.  
  558. </div>
  559.  
  560. <!-- right links -->
  561.  
  562. <div style="float:right">
  563.  
  564. <a href="">
  565. <div class="link">link 4</div>
  566. </a>
  567.  
  568. <a href="">
  569. <div class="link">link 5</div>
  570. </a>
  571.  
  572. <a href="">
  573. <div class="link">link 6</div>
  574. </a>
  575.  
  576. </div>
  577.  
  578. </div>
  579.  
  580. <!-- end links -->
  581.  
  582. </div>
  583.  
  584. </div>
  585.  
  586. <!-- end bottom -->
  587.  
  588. </div>
  589.  
  590. <!-- end text content -->
  591.  
  592. </div>
  593.  
  594. <!---------------------------- END MAIN CONTENT----------------------------->
  595.  
  596. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  597.  
  598. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  599.  
  600. <script src="https://unpkg.com/popper.js@1"></script>
  601. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  602. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  603.  
  604. <script>
  605. tippy('[title]', {
  606. theme: 'custom',
  607. arrow: false,
  608. delay: [200, 0],
  609. zIndex: 9999999999,
  610. maxWidth: 300,
  611.  
  612. content(reference) {
  613. const title = reference.getAttribute('title');
  614. reference.removeAttribute('title');
  615. return title;
  616. },
  617. });
  618. </script>
  619.  
  620. </body>
  621.  
  622. </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!