API tools faq
paste
tricksterkid

tumblr page // cherry

tricksterkid
Nov 23rd, 2020
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.51 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. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  10. • Fonts from Google >> https://fonts.google.com/
  11. • Icons from Font Awesome >> https://fontawesome.com/
  12. • Placeholders from Unsplash >> https://unsplash.com/
  13. • Sidelinks by Larry Geams Parangan >> https://codepen.io/larrygeams/pen/pdchG
  14. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  15.  
  16. -->
  17.  
  18. <html>
  19.  
  20. <head>
  21.  
  22. <title>{Name} / title</title> <!-- page title -->
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i|Roboto+Slab:400,400i,700,700i" rel="stylesheet">
  29.  
  30. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  31.  
  32. <style type="text/css">
  33.  
  34. * {margin:0; padding:0;}
  35.  
  36. /* ----------------------------------------------------------------------- */
  37. /* --------------------------- tumblr controls --------------------------- */
  38.  
  39. .tmblr-iframe {
  40. filter: invert(100%);
  41. -o-filter: invert(100%);
  42. -moz-filter: invert(100%);
  43. -ms-filter: invert(100%);
  44. -webkit-filter: invert(100%);
  45. opacity: 0.2;
  46. position: fixed;
  47. right: 5px;
  48. top: 5px;
  49. transform: scale(0.7,0.7);
  50. transform-origin: 100% 0%;
  51. -ms-transform-origin: 100% 0%;
  52. -webkit-transform-origin: 100% 0%;
  53. transition: 0.4s;
  54. -o-transition: 0.4s;
  55. -moz-transition: 0.4s;
  56. -ms-transition: 0.4s;
  57. -webkit-transition: 0.4s;
  58. white-space: nowrap;
  59. }
  60.  
  61. .tmblr-iframe:hover {
  62. opacity: 1;
  63. }
  64.  
  65. /* ----------------------------------------------------------------------- */
  66. /* --------------------------- custom tooltips --------------------------- */
  67.  
  68. .tippy-tooltip.custom-theme {
  69. background-color: #d4a89f;
  70. border-radius: 0;
  71. color: #ffffff;
  72. font-family: inherit;
  73. font-size: inherit;
  74. text-align: center;
  75. }
  76.  
  77. /* ----------------------------------------------------------------------- */
  78. /* -------------------- custom selection & scrollbar --------------------- */
  79.  
  80. ::-moz-selection {background: #f07a9a; color: #ffffff;}
  81. ::selection {background: #f07a9a; color: #ffffff;}
  82.  
  83. ::-webkit-scrollbar-thumb
  84. {background: #f07a9a; border: 5px solid #fff; border-radius: 10px;}
  85. ::-webkit-scrollbar-track
  86. {background: #d4a89f; border: 7px solid #ffffff;}
  87. ::-webkit-scrollbar
  88. {width: 15px;}
  89.  
  90. /* ----------------------------------------------------------------------- */
  91. /* ----------------------------- page layout ----------------------------- */
  92.  
  93. body {
  94. background: #ffffff; /* background color */
  95. color: #979797; /* text color */
  96. font-family: Josefin Sans; /* font */
  97. font-size: 16px; /* font size */
  98. text-align: justify; /* text align */
  99. }
  100.  
  101. #container {
  102. height: 500px;
  103. left: 50%;
  104. margin-bottom: 40px;
  105. overflow: none;
  106. padding: 20px;
  107. position: absolute;
  108. top: 50%;
  109. transform: translate(-50%,-50%);
  110. -moz-transform: translate(-50%,-50%);
  111. -ms-transform: translate(-50%,-50%);
  112. -o-transform: translate(-50%,-50%);
  113. -webkit-transform: translate(-50%,-50%);
  114. width: 860px;
  115. }
  116.  
  117. /* ----------------------------------------------------------------------- */
  118. /* ------------------------ sidebar links colors ------------------------- */
  119.  
  120. #linkhome {border-left: 7px solid #f07a9a; color: #f07a9a;}
  121. #linkhome:after {background-color: #f07a9a;}
  122. #linkhome:hover {color: #fafafa; transition: 0.4s;}
  123.  
  124. #link1 {border-left: 7px solid #eb819a; color: #eb819a;}
  125. #link1:after {background-color: #eb819a;}
  126. #link1:hover {color: #fafafa; transition: 0.4s;}
  127.  
  128. #link2 {border-left: 7px solid #e6899b; color: #e6899b;}
  129. #link2:after {background-color: #e6899b;}
  130. #link2:hover {color: #fafafa; transition: 0.4s;}
  131.  
  132. #link3 {border-left: 7px solid #df959c; color: #df959c;}
  133. #link3:after {background-color: #df959c;}
  134. #link3:hover {color: #fafafa; transition: 0.4s;}
  135.  
  136. #link4 {border-left: 7px solid #d8a19e; color: #d8a19e;}
  137. #link4:after {background-color: #d8a19e;}
  138. #link4:hover {color: #fafafa; transition: 0.4s;}
  139.  
  140. #link5 {border-left: 7px solid #d4a89f; color: #d4a89f;}
  141. #link5:after {background-color: #d4a89f;}
  142. #link5:hover {color: #fafafa; transition: 0.4s;}
  143.  
  144. /* ----------------------------------------------------------------------- */
  145. /* --------------------------- sidebar content --------------------------- */
  146.  
  147. #sidemenu { /* left menu */
  148. background-color: #fafafa;
  149. float: left;
  150. height: 500px;
  151. width: 200px;
  152. }
  153.  
  154. #sidepic { /* sidebar picture */
  155. height: 200px;
  156. width: 200px;
  157. margin: 0;
  158. }
  159.  
  160. #sidepic:hover {
  161. cursor: cell;
  162. }
  163.  
  164. /* sidebar links code >> colors are modified above! */
  165.  
  166. .sidebarlinks a {
  167. box-sizing: border-box;
  168. display: block;
  169. height: 50px;
  170. margin: 0;
  171. padding: 20px;
  172. padding-top: 18px;
  173. position: relative;
  174. text-transform: uppercase;
  175. width: 100%;
  176. z-index: 2;
  177. }
  178.  
  179. .sidebarlinks a:after {
  180. content: "";
  181. height: 100%;
  182. left: -1;
  183. position: absolute;
  184. top: 0;
  185. transition: 0.4s;
  186. width: 0px;
  187. z-index: -1;
  188. }
  189.  
  190. .sidebarlinks a:hover:after {
  191. width: calc(100% + 1px);
  192. width: -moz-calc(100% + 1px);
  193. width: -webkit-calc(100% + 1px);
  194. }
  195.  
  196. /* sidebar links content >> changes text to icon with screen size */
  197.  
  198. .big {display: block;}
  199. .small {display: none;}
  200.  
  201. /* ----------------------------------------------------------------------- */
  202. /* ------------------------------- content ------------------------------- */
  203.  
  204. #contentcontainer { /* container for linkboxes */
  205. float: right;
  206. height: 440px;
  207. overflow: auto;
  208. width: 660px;
  209. -moz-overflow-style: none;
  210. -ms-overflow-style: none;
  211. -o-overflow-style: none;
  212. }
  213.  
  214. #contentcontainer::-webkit-scrollbar {
  215. display: none;
  216. }
  217.  
  218. .linkbox { /* individual linkboxes */
  219. background-color: #fafafa;
  220. float: left;
  221. height: 250px;
  222. margin: 0px 0px 15px 15px;
  223. overflow-y: auto;
  224. width: 205px;
  225. -moz-overflow-style: none;
  226. -ms-overflow-style: none;
  227. -o-overflow-style: none;
  228. }
  229.  
  230. .linkbox::-webkit-scrollbar {
  231. display: none;
  232. }
  233.  
  234. .link { /* normal links */
  235. display: block;
  236. padding: 15px;
  237. text-transform: uppercase;
  238. }
  239.  
  240. .sublink { /* sublinks */
  241. display: block;
  242. font-style: italic;
  243. padding: 10px 10px 10px 30px;
  244. text-transform: lowercase;
  245. }
  246.  
  247. .link:hover, .sublink:hover { /* link hover */
  248. background-color: #f07a9a;
  249. }
  250.  
  251. /* ----------------------------------------------------------------------- */
  252. /* -------------------------------- text --------------------------------- */
  253.  
  254. h1 { /* page title */
  255. color: #f07a9a;
  256. font-family: Roboto Slab;
  257. font-size: 2em;
  258. margin-bottom: 10px;
  259. padding-bottom: 10px;
  260. text-align: right;
  261. }
  262.  
  263. h2 { /* linkbox titles */
  264. background-color: #d4a89f;
  265. color: #fafafa;
  266. display: block;
  267. font-family: Roboto Slab;
  268. font-size: 1.5em;
  269. padding: 5px 10px;
  270. text-align: right;
  271. }
  272.  
  273. a {
  274. color: #979797; /* link color */
  275. text-decoration: none;
  276. transition: 0.4s;
  277. -moz-transition: 0.4s;
  278. -ms-transition: 0.4s;
  279. -o-transition: 0.4s;
  280. -webkit-transition: 0.4s;
  281. }
  282.  
  283. a:hover {
  284. color: #fafafa; /* link hover color */
  285. transition: 0.4s;
  286. -moz-transition: 0.4s;
  287. -ms-transition: 0.4s;
  288. -o-transition: 0.4s;
  289. -webkit-transition: 0.4s;
  290. }
  291.  
  292. /* ----------------------------------------------------------------------- */
  293. /* ----------------------------- responsive ------------------------------ */
  294.  
  295. @media only screen and (max-width: 1024px){
  296. #container {width: 740px;}
  297. #sidepic {height: 80px; width: 80px;}
  298. #sidemenu {height: 500px; text-align: center; width: 80px;}
  299. .big {display: none;}
  300. .small {display: block; font-size: 20px; margin-top: 2px;}
  301. .sidebarlinks a {height: 70px;}
  302. .sidebarlinks a:hover:after {
  303. height: calc(100% + 1px);
  304. height: -moz-calc(100% + 1px);
  305. height: -webkit-calc(100% + 1px);
  306. width: calc(100% + 1px);
  307. width: -moz-calc(100% + 1px);
  308. width: -webkit-calc(100% + 1px);
  309. }
  310. }
  311.  
  312. @media only screen and (max-width: 830px){
  313. #container {width: 520px;}
  314. #contentcontainer {width: 440px;}
  315. }
  316.  
  317. @media only screen and (max-width: 600px){
  318. #container {width: 300px;}
  319. #contentcontainer {width: 220px;}
  320. }
  321.  
  322. /* ----------------------------------------------------------------------- */
  323. /* ------------------------------- credits ------------------------------- */
  324.  
  325. #credit {
  326. background-color: #ffffff;
  327. color: #f07a9a;
  328. bottom: 0;
  329. font-size: 20px;
  330. font-style: italic;
  331. margin: 10px;
  332. padding: 10px 0px;
  333. position: fixed;
  334. right: 0;
  335. text-align: center;
  336. transition: 0.4s;
  337. -moz-transition: 0.4s;
  338. -ms-transition: 0.4s;
  339. -o-transition: 0.4s;
  340. -webkit-transition: 0.4s;
  341. width: 40px;
  342. }
  343.  
  344. #credit:hover {
  345. background-color: #f07a9a;
  346. color: #ffffff;
  347. transition: 0.4s;
  348. -moz-transition: 0.4s;
  349. -ms-transition: 0.4s;
  350. -o-transition: 0.4s;
  351. -webkit-transition: 0.4s;
  352. }
  353.  
  354. /* ----------------------------------------------------------------------- */
  355.  
  356. </style>
  357.  
  358. </head>
  359.  
  360. <body>
  361.  
  362. <!--------------------------- START MAIN CONTENT---------------------------->
  363.  
  364. <div id="container">
  365.  
  366. <!-- start sidebar menu -->
  367.  
  368. <div id="sidemenu">
  369.  
  370. <a href="/" title="et in arcadia ego">
  371. <img id="sidepic" src="https://i.imgur.com/EtrbAvn.jpg">
  372. </a>
  373.  
  374. <!--
  375. below you can modify the sidebar links. the text in <span class="big"> shows with normal screen size. with smaller screen sizes, the icon in <span class="small"> will be visible. the title element is the text that shows when you hover over the icon.
  376.  
  377. if you need more help with customization, feel free to send me an ask or a dm!
  378. -->
  379.  
  380. <div class="sidebarlinks">
  381. <a href="/" id="linkhome">
  382.  
  383. <span class="big">home</span>
  384.  
  385. <span class="small" title="home">
  386. <i class="fas fa-home"></i>
  387. </span>
  388.  
  389. </a>
  390. </div>
  391.  
  392. <div class="sidebarlinks">
  393. <a href="" id="link1">
  394.  
  395. <span class="big">link 1</span>
  396.  
  397. <span class="small" title="link 1">
  398. <i class="fas fa-star"></i>
  399. </span>
  400.  
  401. </a>
  402. </div>
  403.  
  404. <div class="sidebarlinks">
  405. <a href="" id="link2">
  406.  
  407. <span class="big">link 2</span>
  408.  
  409. <span class="small" title="link 2">
  410. <i class="fas fa-rocket"></i>
  411. </span>
  412.  
  413. </a>
  414. </div>
  415.  
  416. <div class="sidebarlinks">
  417. <a href="" id="link3">
  418.  
  419. <span class="big">link 3</span>
  420.  
  421. <span class="small" title="link 3">
  422. <i class="fas fa-moon"></i>
  423. </span>
  424.  
  425. </a>
  426. </div>
  427.  
  428. <div class="sidebarlinks">
  429. <a href="" id="link4">
  430.  
  431. <span class="big">link 4</span>
  432.  
  433. <span class="small" title="link 4">
  434. <i class="fas fa-space-shuttle"></i>
  435. </span>
  436.  
  437. </a>
  438. </div>
  439.  
  440. <div class="sidebarlinks">
  441. <a href="" id="link5">
  442.  
  443. <span class="big">link 5</span>
  444.  
  445. <span class="small" title="link 5">
  446. <i class="fas fa-sun"></i>
  447. </span>
  448.  
  449. </a>
  450. </div>
  451.  
  452. </div>
  453.  
  454. <!-- end sidebar menu -->
  455.  
  456. <h1>cherry</h1> <!-- main title -->
  457.  
  458. <!-- start content -->
  459.  
  460. <div id="contentcontainer">
  461.  
  462. <!-- start linkbox 1 -->
  463.  
  464. <div class="linkbox">
  465.  
  466. <h2>linkbox 1</h2>
  467.  
  468. <a class="link" href="/tagged/">link 1</a>
  469. <a class="link" href="/tagged/">link 2</a>
  470. <a class="sublink" href="/tagged/">sublink 1</a>
  471. <a class="sublink" href="/tagged/">sublink 2</a>
  472. <a class="sublink" href="/tagged/">sublink 3</a>
  473. <a class="link" href="/tagged/">link 3</a>
  474. <a class="link" href="/tagged/">link 4</a>
  475. <a class="link" href="/tagged/">link 5</a>
  476.  
  477. </div>
  478.  
  479. <!-- end linkbox 1 -->
  480.  
  481. <!-- start linkbox 2 -->
  482.  
  483. <div class="linkbox">
  484.  
  485. <h2>linkbox 2</h2>
  486.  
  487. <a class="link" href="/tagged/">link 1</a>
  488. <a class="link" href="/tagged/">link 2</a>
  489. <a class="link" href="/tagged/">link 3</a>
  490. <a class="link" href="/tagged/">link 4</a>
  491. <a class="sublink" href="/tagged/">sublink 1</a>
  492. <a class="sublink" href="/tagged/">sublink 2</a>
  493. <a class="sublink" href="/tagged/">sublink 3</a>
  494.  
  495. </div>
  496.  
  497. <!-- end linkbox 2 -->
  498.  
  499. <!-- start linkbox 3 -->
  500.  
  501. <div class="linkbox">
  502.  
  503. <h2>linkbox 3</h2>
  504.  
  505. <a class="link" href="/tagged/">link 1</a>
  506. <a class="link" href="/tagged/">link 2</a>
  507. <a class="link" href="/tagged/">link 3</a>
  508. <a class="link" href="/tagged/">link 4</a>
  509. <a class="link" href="/tagged/">link 5</a>
  510.  
  511. </div>
  512.  
  513. <!-- end linkbox 3 -->
  514.  
  515. <!-- start linkbox 4 -->
  516.  
  517. <div class="linkbox">
  518.  
  519. <h2>linkbox 4</h2>
  520.  
  521. <a class="link" href="/tagged/">link 1</a>
  522. <a class="link" href="/tagged/">link 2</a>
  523. <a class="link" href="/tagged/">link 3</a>
  524. <a class="link" href="/tagged/">link 4</a>
  525. <a class="sublink" href="/tagged/">sublink 1</a>
  526. <a class="link" href="/tagged/">link 5</a>
  527. <a class="link" href="/tagged/">link 6</a>
  528. <a class="link" href="/tagged/">link 7</a>
  529. <a class="link" href="/tagged/">link 8</a>
  530.  
  531. </div>
  532.  
  533. <!-- end linkbox 4 -->
  534.  
  535. <!-- start linkbox 5 -->
  536.  
  537. <div class="linkbox">
  538.  
  539. <h2>linkbox 5</h2>
  540.  
  541. <a class="link" href="/tagged/">link 1</a>
  542. <a class="sublink" href="/tagged/">sublink 1</a>
  543. <a class="sublink" href="/tagged/">sublink 2</a>
  544. <a class="link" href="/tagged/">link 2</a>
  545. <a class="link" href="/tagged/">link 3</a>
  546. <a class="link" href="/tagged/">link 4</a>
  547. <a class="sublink" href="/tagged/">sublink 3</a>
  548. <a class="sublink" href="/tagged/">sublink 4</a>
  549. <a class="sublink" href="/tagged/">sublink 5</a>
  550. <a class="sublink" href="/tagged/">sublink 6</a>
  551. <a class="link" href="/tagged/">link 5</a>
  552. <a class="link" href="/tagged/">link 6</a>
  553.  
  554. </div>
  555.  
  556. <!-- end linkbox 5 -->
  557.  
  558. <!-- start linkbox 6 -->
  559.  
  560. <div class="linkbox">
  561.  
  562. <h2>linkbox 6</h2>
  563.  
  564. <a class="link" href="/tagged/">link 1</a>
  565. <a class="link" href="/tagged/">link 2</a>
  566. <a class="link" href="/tagged/">link 3</a>
  567. <a class="link" href="/tagged/">link 4</a>
  568. <a class="sublink" href="/tagged/">sublink 1</a>
  569. <a class="sublink" href="/tagged/">sublink 2</a>
  570. <a class="sublink" href="/tagged/">sublink 3</a>
  571. <a class="sublink" href="/tagged/">sublink 4</a>
  572.  
  573. </div>
  574.  
  575. <!-- end linkbox 6 -->
  576.  
  577. </div>
  578.  
  579. <!-- end content -->
  580.  
  581. </div>
  582.  
  583. <!---------------------------- END MAIN CONTENT----------------------------->
  584.  
  585. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  586.  
  587. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  588.  
  589. <script src="https://unpkg.com/popper.js@1"></script>
  590. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  591. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  592.  
  593. <script>
  594. tippy('[title]', {
  595. theme: 'custom',
  596. arrow: false,
  597. delay: [200, 0],
  598. zIndex: 9999999999,
  599. maxWidth: 300,
  600.  
  601. content(reference) {
  602. const title = reference.getAttribute('title');
  603. reference.removeAttribute('title');
  604. return title;
  605. },
  606. });
  607. </script>
  608.  
  609. </body>
  610.  
  611. </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!