API tools faq
paste
Advertisement
Petra1999

CHARACTER PAGE 01 | cloudythms.tumblr.com

Petra1999
Sep 6th, 2018
4,265
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 22.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" href="{Favicon}"/><meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.  
  3.  
  4.  <!-----------------------------------------------------------------------
  5.  
  6.  
  7.        {   cloudythms
  8.                     character page 01    }
  9.          
  10.  
  11.                        by
  12.             cloudythms.tumblr.com
  13.       contact me if you have questions!
  14.  
  15.  
  16. ......  rules  ......
  17.  
  18. * edit as much as you want
  19. * do not remove the credit
  20. * do not steal parts of my codes
  21. * do not redistribute or use as base
  22.  
  23.  
  24. ......  guide  ......
  25.  
  26. > HOW TO SEARCH
  27.   1. Make sure you have already clicked somewhere in the code
  28.   2. Press Ctrl and F
  29.   3. A little "search for" window should open
  30.  
  31. > ADDING/EDITING CHARACTERS:
  32.   Search for "edit from here",
  33.   you will be working between that line and "to here".
  34.   After the "to here" line there's a template to copy.
  35.   Follow the guide there.
  36.  
  37. > CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  38.   Search for "page title",
  39.   follow the guide there.
  40.  
  41. > CHANGING SIDEBAR:
  42.   Search for "edit sidebar here",
  43.   follow the guide there.
  44.  
  45. > CHANGING THE COLORS/SIZES:
  46.  Search for "variables",
  47.  follow the guide there.
  48.  
  49.  
  50. ......  credits  ......
  51.  
  52. icon font:          linearicons
  53. fonts:              fonts.google.com
  54. tumblr controls:    @cyantists
  55. smoothscroll:       @zacharyfury
  56. tooltips:           @tutorial-baby
  57. full credits:       cloudythms.tumblr.com/credits
  58.  
  59. ---------------------------------------------------------------------->
  60.  
  61.  
  62. <!-- Page Title
  63. (Text that appears on the tab / browser window)
  64. Change the text between <title> and </title>.
  65. Write {Title} to let your blogtitle show. -->
  66. <title>
  67. Characters
  68. </title>
  69.  
  70.  
  71.  
  72.  
  73. <!-- Variables
  74.  
  75. COLORS:
  76. Only change the color codes (after the : and before the ;)
  77. Make sure there is one # before the hex code.
  78. Example: --color-accent:#efefef;
  79. You can also use "black" and "white".
  80. Example: --color-background:white;
  81. Get hex color codes here:
  82. https://htmlcolorcodes.com/color-picker/
  83.  
  84. OTHERS:
  85. For the sizes, it should look like this: --fontSize:12px;
  86. Change the number to your liking.
  87. Example (smaller font): --fontSize:10px;
  88. Example (bigger font): --fontSize:13px;
  89. Make sure the : and px; are still there.
  90.  
  91. --> <style>:root {
  92.    
  93.     --fontSize:12px;
  94.    
  95.     --sidebarWidth:250px;
  96.     --sidebarImage:150px;
  97.    
  98.     --color-background:#efefef;
  99.     --color-contentBackground:white;
  100.     --color-text:black;
  101.     --color-accent:#61D19B;
  102.    
  103. }</style>
  104.  
  105.  
  106.  
  107.  
  108. <!-- ---------------------------------------------------------------- -->
  109. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  110. <!-- ---------------------------------------------------------------- -->
  111. <style type="text/css">
  112.  
  113.  
  114. /* tumblr controls */
  115.  iframe.tmblr-iframe {
  116.     z-index:99999999999999!important;
  117.     top:-2px!important;
  118.     right:0!important;
  119.     opacity:0;
  120.     padding-right:38px;
  121.     filter:invert(1) contrast(150%);
  122.     -webkit-filter:invert(1) contrast(150%);
  123.     -o-filter:invert(1) contrast(150%);
  124.     -moz-filter:invert(1) contrast(150%);
  125.     -ms-filter:invert(1) contrast(150%);
  126.     transform:scale(0.65);
  127.     transform-origin:100% 0;
  128.     -webkit-transform:scale(0.65);
  129.     -webkit-transform-origin:100% 0;
  130.     -o-transform:scale(0.65);
  131.     -o-transform-origin:100% 0;
  132.     -moz-transform:scale(0.65);
  133.     -moz-transform-origin:100% 0;
  134.     -ms-transform:scale(0.65);
  135.     -ms-transform-origin:100% 0;
  136.      -webkit-transition:0.5s ease;
  137.      -o-transition:0.5s ease;
  138.      -moz-transition:0.5s ease;
  139.      transition:0.5s ease;
  140.  }
  141.  
  142. iframe.tmblr-iframe:hover {
  143.     opacity:0.3!important;}
  144.  
  145. .hcontrols {
  146.     position:fixed;
  147.     top:0;
  148.     right:0;
  149.     z-index:999999999;}
  150.  
  151. .hcontrols svg {
  152.     width:14px;
  153.     height:14px;
  154.     padding:9px;}
  155.  
  156. .hcontrols svg path {
  157.     fill:#888888;
  158. }
  159.        
  160. /* ****************************** BASICS ****************************** */
  161.  
  162. body {
  163.     padding:3%;
  164.     font-family:'Rubik', sans-serif;
  165.     font-size:var(--fontSize, 12px);
  166.     color:var(--color-text,black);
  167.     background:var(--color-background,white);
  168. }
  169.  
  170. .center {
  171.     position: absolute;
  172.     top:25vh;
  173.     left:50%;
  174.     -ms-transform: translateX(-50%) translateY(0%);
  175.     -webkit-transform: translate(-50%,0%);
  176.     -moz-transform: translate(-50%,0%);
  177.       -o-transform: translate(-50%,0%);
  178.          transform: translate(-50%,0%);
  179. }
  180.  
  181. a, a:hover{
  182.     color:var(--color-accent,black);
  183. }
  184.  
  185. a, a:focus {
  186.     outline: 0;
  187.     text-decoration:none;
  188. }
  189.  
  190. /* selections */
  191. ::-moz-selection {
  192.   background: rgba(0,0,0,0.3);
  193.   color: white;
  194. }
  195. ::selection {
  196.   background: rgba(0,0,0,0.3);
  197.   color: white;
  198. }
  199. ::-moz-selection {
  200.   background: rgba(0,0,0,0.3);
  201.   color: white;
  202. }
  203.  
  204. /* custom scrollbars */
  205. article ::-webkit-scrollbar-thumb:vertical {
  206. background-color:var(--color-accent, #efefef);
  207. height:100px;
  208. -webkit-border-radius:15px;
  209.         border-radius:15px;
  210. }
  211. article ::-webkit-scrollbar-thumb:horizontal {
  212. background-color:var(--color-accent, #efefef);
  213. height:100px !important;
  214. }
  215. article ::-webkit-scrollbar {
  216. height:5px;
  217. width:5px;
  218. background-color:transparent;
  219. }
  220.  
  221. /* ************************** SIDEBAR ************************** */
  222.  
  223.  
  224. aside {
  225.     background:var(--color-contentBackground);
  226.     position:fixed;
  227.     top:0;
  228.     left:0;
  229.     z-index:1;
  230.     height:100vh;
  231.     width:var(--sidebarWidth, 200px);
  232.     -webkit-box-sizing:border-box;
  233.        -moz-box-sizing:border-box;
  234.             box-sizing:border-box;
  235.     padding:2em;
  236.     border-right:3px solid var(--color-accent, transparent);
  237. }
  238.  
  239. aside * {
  240.     margin:0 auto;
  241. }
  242.  
  243. aside > :first-child {
  244.     margin-top:10vh;
  245. }
  246.  
  247. .s-image {
  248.     margin-bottom:5vh;
  249. }
  250. .s-image, .s-image img {
  251.     width:var(--sidebarImage, 150px);
  252.     height:var(--sidebarImage, 150px);
  253.     -webkit-border-radius:50%;
  254.             border-radius:50%;
  255. }
  256.  
  257. .s-description {
  258.     margin-bottom:3vh;
  259.     line-height:160%;
  260.     text-align:justify;
  261.     opacity:0.8;
  262.     font-style:italic;
  263.     padding:0.5em;
  264. }
  265.  
  266. .s-links, .s-filters {
  267.     margin-bottom:3vh;
  268.     text-align:center;
  269.     line-height: 150%;
  270. }
  271. .s-links a, .s-filters a {
  272.     display:inline-block;
  273.     margin-left:0.3em;
  274.     margin-right:0.3em;
  275.     border-bottom:1px solid transparent;
  276.     color:var(--color-accent);
  277.     -webkit-transition:0.3s ease;
  278.     -o-transition:0.3s ease;
  279.     -moz-transition:0.3s ease;
  280.     transition:0.3s ease;
  281. }
  282. .s-links a:hover, .s-filters a:hover {
  283.     border-bottom:1px solid;
  284. }
  285.  
  286. .s-filters a {
  287.     cursor:help;
  288. }
  289. .s-filters a.active {
  290.     font-weight:bold;
  291. }
  292. .s-filters b {
  293.     font-weight:normal;
  294.     color:gray;
  295.     font-style:italic;
  296. }
  297. .s-filters .lnr {
  298.     display: inline-block;
  299.     margin-top: -1.5px;
  300.     margin-right: 0.3em;
  301.     font-size: 1.4em;
  302.     vertical-align: middle;
  303.     color: var(--color-accent, black);
  304. }
  305.  
  306. /* ************************** LAYOUT ************************** */
  307.  
  308.  
  309. main {
  310.     position:absolute;
  311.     left:var(--sidebarWidth, 200px);
  312.     top:0;
  313.     width:-webkit-calc(100% - var(--sidebarWidth, 200px));
  314.     width:-moz-calc(100% - var(--sidebarWidth, 200px));
  315.     width:calc(100% - var(--sidebarWidth, 200px));
  316.     max-width:-webkit-calc(3 * 450px);
  317.     max-width:-moz-calc(3 * 450px);
  318.     max-width:calc(3 * 450px);
  319. }
  320.  
  321. section {
  322.     display:-webkit-box;
  323.     display:-webkit-flex;
  324.     display:-moz-box;
  325.     display:-ms-flexbox;
  326.     display:flex;
  327.    
  328.     -webkit-box-orient:horizontal;
  329.     -webkit-box-direction:normal;
  330.     -webkit-flex-flow:row wrap;
  331.        -moz-box-orient:horizontal;
  332.        -moz-box-direction:normal;
  333.         -ms-flex-flow:row wrap;
  334.             flex-flow:row wrap;
  335.            
  336.     -webkit-box-pack:start;
  337.     -webkit-justify-content:flex-start;
  338.        -moz-box-pack:start;
  339.         -ms-flex-pack:start;
  340.             justify-content:flex-start;
  341.            
  342.     -webkit-align-content:flex-start;
  343.         -ms-flex-line-pack:start;
  344.             align-content:flex-start;
  345.            
  346.     -webkit-box-align:stretch;
  347.     -webkit-align-items:stretch;
  348.        -moz-box-align:stretch;
  349.         -ms-flex-align:stretch;
  350.             align-items:stretch;
  351.            
  352.     padding:2%;
  353. }
  354.  
  355. article {
  356.     -webkit-box-sizing: border-box;
  357.        -moz-box-sizing: border-box;
  358.             box-sizing: border-box;
  359.     border:1px solid var(--color-accent);
  360.     -webkit-border-radius: 6px;
  361.             border-radius: 6px;
  362.     padding:1.5%;
  363.     margin: 1.8%;
  364.     width:450px;
  365.     height:350px;
  366.     overflow: hidden;
  367.     background:var(--color-contentBackground);
  368. }
  369.  
  370. /* ************************** CHARACTER ************************** */
  371.  
  372.  
  373. .c-top {
  374.     overflow:hidden;
  375.     height:50%;
  376. }
  377.  
  378. .c-image {
  379.     float:left;
  380. }
  381. .c-image, .c-image img {
  382.     width:150px;
  383.     height:150px;
  384.     -webkit-border-radius: 4%;
  385.             border-radius: 4%;
  386. }
  387.  
  388. .c-title {
  389.     font-weight:500;
  390.     font-size: 2.3em;
  391.     text-align: center;
  392.     margin: 0.5em 0.3em 0.25em 0;
  393.     line-height: 100%;
  394.     width: 100%;
  395.     min-height: 25%;
  396.     color:var(--color-accent);
  397. }
  398. .c-title a {
  399.     margin: 0;
  400.     -webkit-transition:0.3s ease-in;
  401.     -o-transition:0.3s ease-in;
  402.     -moz-transition:0.3s ease-in;
  403.     transition:0.3s ease-in;
  404.     border-bottom:1px solid transparent;
  405. }
  406. .c-title a[href]:hover {
  407.     border-bottom:1px solid;
  408. }
  409.  
  410. .c-facts {
  411.     display:table;
  412.     margin: 0 auto;
  413.     line-height:150%;
  414.     overflow-y:auto;
  415.     overflow-x:hidden;
  416.     font-style:italic;
  417.     font-size:1.1em;
  418.     padding:0em 0.5em 0 1em;
  419.     letter-spacing: -0.05em;
  420.     min-width: 55%;
  421. }
  422. .c-facts tr td {
  423.     /*width:25%;*/
  424. }
  425. .c-facts tr td:nth-of-type(2){
  426.     padding-right:1.5em;
  427. }
  428. .c-facts tr td:nth-of-type(odd){ /* key */
  429.     text-align:left;
  430.     padding-right:0.5em;
  431.     color:var(--color-accent);
  432.     font-style:normal;
  433. }
  434. .c-facts tr td:nth-of-type(even){ /* value */
  435.     text-align:right;
  436.     padding-left:0em;
  437.     opacity:0.8;
  438.     line-height: 90%;
  439. }
  440.  
  441. .c-description {
  442.     clear:both;
  443.     overflow-y:auto;
  444.     height:54%;
  445.     -webkit-box-sizing: border-box;
  446.        -moz-box-sizing: border-box;
  447.             box-sizing: border-box;
  448.     padding-right:1em;
  449.     border: 1.1em solid transparent;
  450.     word-spacing: 0.1em;
  451.     text-align: justify;
  452.     line-height: 150%;
  453. }
  454. .c-description b{
  455.     font-weight:500;
  456.     color:var(--color-accent);
  457. }
  458. .c-description i{
  459.     color:var(--color-accent);
  460. }
  461. .c-description u, .c-description a {
  462.     text-decoration:none;
  463.     border-bottom:1px solid;
  464.     -webkit-transition:0.4s ease;
  465.     -o-transition:0.4s ease;
  466.     -moz-transition:0.4s ease;
  467.     transition:0.4s ease;
  468. }
  469. .c-description a:hover {
  470.     color:var(--color-accent);
  471.     border-bottom:1px solid transparent;
  472. }
  473.  
  474. /* ************************** MOBILE ************************** */
  475.  
  476.  
  477. .tmblr-iframe--app-cta-button { display: none!important; }
  478. @media only screen and (max-width: 768px) {
  479.     body > iframe:first-child { display: none !important; }
  480.     .hcontrols { display: none !important; }
  481.    
  482.     aside {
  483.         min-height:100px;
  484.         height: auto;
  485.         width:100%;
  486.         padding:1em;
  487.         border-right:none;
  488.         border-bottom:3px solid var(--color-accent, transparent);
  489.         overflow:hidden;
  490.     }
  491.     .s-description {
  492.         margin-bottom:0;
  493.     }
  494.     .s-image, .s-filters {
  495.         display:none;
  496.     }
  497.     .s-links a {
  498.         margin-left:0.5em;
  499.         margin-right:0.5em;
  500.     }
  501.     main {
  502.         left:0;
  503.         top:100px;
  504.         width:100%;
  505.         margin: 0 auto;
  506.         position: relative;
  507.     }
  508.     section {
  509.         -webkit-box-pack:center;
  510.         -webkit-justify-content:center;
  511.            -moz-box-pack:center;
  512.             -ms-flex-pack:center;
  513.                 justify-content:center;
  514.     }
  515.     article {
  516.         margin: 5%;
  517.     }
  518.     .c-top {
  519.         height:auto;
  520.     }
  521.     .c-title {
  522.         font-size: 1.75em;
  523.         height: 75px;
  524.     }
  525.     .c-title a {
  526.         display: block;
  527.         -webkit-transform: translateY(-50%);
  528.            -moz-transform: translateY(-50%);
  529.             -ms-transform: translateY(-50%);
  530.              -o-transform: translateY(-50%);
  531.                 transform: translateY(-50%);
  532.         position: relative;
  533.         top: 47%;
  534.         border:none;
  535.     }
  536.     .c-title a[href]:hover {
  537.         border:none;
  538.         text-decoration:underline;
  539.     }
  540.     .c-image, .c-image img {
  541.         width:75px;
  542.         height:75px;
  543.         padding:2.5%;
  544.     }
  545.     .c-facts {
  546.         clear: both;
  547.         width: 100%;
  548.     }
  549.     .c-description {
  550.         height:50%;
  551.     }
  552. }
  553.  
  554.  
  555. </style>
  556. <link href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700|Rubik:400,400i,500,500i,700,700i|Source+Code+Pro:400,500,600,700&amp;subset=latin-ext" rel="stylesheet">
  557. </head>
  558. <!-- ---------------------------------------------------------------- -->
  559. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  560. <!-- ---------------------------------------------------------------- -->
  561. <body>
  562. <aside>
  563.  
  564. <!-- edit sidebar here -->
  565.  
  566. <!--- sidebar image ---->
  567. <!-- change the placeholder link to any image link.
  568. the image is automatically resized to 150x150.
  569. remove all 3 lines if you don't want one. -->
  570. <div class="s-image">
  571.     <img src="https://via.placeholder.com/150">
  572. </div>
  573.  
  574.  
  575. <!--- sidebar description ---->
  576. <!-- Use <br> for a new line -->
  577. <div class="s-description">
  578.     This is where your description goes. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
  579. </div>
  580.  
  581.  
  582. <!--- sidebar links ---->
  583. <!-- <a href="YOURLINKHERE">displayed text</a> -->
  584. <div class="s-links">
  585.     <a href="/">home</a>
  586.     <a href="/ask">inbox</a>
  587.     <a href="/archive">archive</a>
  588.     <a href="LINK">custom link</a>
  589. </div>
  590.  
  591.  
  592. <!--- sidebar filters ---->
  593. <!-- <a class="f">TAG</a>
  594.     whereas TAG matches the tag you use in the character codes below.
  595.     leave the "all" filter. you can change its display text ("all")
  596. If you don't want filters, delete the whole block. -->
  597. <div class="s-filters">
  598.     <span class="lnr lnr-funnel"></span>
  599.     <a class="f active" id="f-all">all</a>
  600.     <a class="f">child</a>
  601.     <a class="f">adult</a>
  602. </div>
  603.  
  604.  
  605.    
  606.    
  607. </aside><main><section>
  608. <!-- ----------------------- EDIT FROM HERE ------------------------- -->
  609.  
  610.  
  611.  
  612. <!-- start of character -->
  613. <article class="write tags here">
  614.     <div class="c-top">
  615.     <div class="c-image">
  616.         <img src="https://via.placeholder.com/150">
  617.     </div>
  618.     <div class="c-title">
  619.         <a href="#">firstname lastname</a>
  620.     </div>
  621.     <table class="c-facts">
  622.         <tr><td>fact</td>   <td>value</td>
  623.             <td>fact</td>   <td>value</td></tr>
  624.         <tr><td>fact</td>   <td>value</td>
  625.             <td>fact</td>   <td>value</td></tr>
  626.         <tr><td>fact</td>   <td>value</td>
  627.             <td>fact</td>   <td>value</td></tr>
  628.     </table>
  629.     </div>
  630.     <div class="c-description">
  631. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Some <b>bold text</b> and <i>italic text</i> and <u>underlined</u> and <a href="#">links</a> as well.
  632.     </div>
  633. </article>
  634. <!--- end of character --->
  635.  
  636.  
  637.  
  638. <!-- -------------------------- TO HERE -----------------------------
  639.  
  640.  
  641.    *** how to add a character: ***
  642.    
  643.    copy the following block of code and
  644.    paste it between "edit from here" and "to here".
  645.    type in the name, facts, and description.
  646.    (the facts should be short, otherwise they do not show up)
  647.    
  648.    paste the image link instead of "IMAGELINK".
  649.      (images are 150x150, automatically resized)
  650.    
  651.    if you want your character to link to something,
  652.    paste the link url instead of "LINK".
  653.      if you DON'T want your character to link to something,
  654.    remove the href="LINK" from the code. it will look like this:
  655.    <a>character name</a>
  656.    
  657.    to give your character tags, type them in "your tags here".
  658.    examples:
  659.      a favorite:                 <article class="fav">
  660.      a female child character:   <article class="child female">
  661.      a character without tags:   <article class="">
  662.    to utilize these tags, use the filters in the sidebar.
  663.        
  664.  
  665.  
  666.  
  667.    *** code template: ***
  668.    
  669.    
  670. <article class="write tags here">
  671.    <div class="c-top">
  672.    <div class="c-image">
  673.        <img src="https://via.placeholder.com/150">
  674.    </div>
  675.    <div class="c-title">
  676.        <a href="#">firstname lastname</a>
  677.    </div>
  678.    <table class="c-facts">
  679.        <tr><td>fact</td>   <td>value</td>
  680.            <td>fact</td>   <td>value</td></tr>
  681.        <tr><td>fact</td>   <td>value</td>
  682.            <td>fact</td>   <td>value</td></tr>
  683.        <tr><td>fact</td>   <td>value</td>
  684.            <td>fact</td>   <td>value</td></tr>
  685.    </table>
  686.    </div>
  687.    <div class="c-description">
  688. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Some <b>bold text</b> and <i>italic text</i> and <u>underlined</u> and <a href="#">links</a> as well.
  689.    </div>
  690. </article>
  691.  
  692.  
  693.  
  694.  
  695. (If you want less rows of facts, it would look like this:)
  696.        <tr><td>fact</td>   <td>value</td>
  697.            <td>fact</td>   <td>value</td></tr>
  698.        <tr><td>fact</td>   <td>value</td>
  699.            <td>fact</td>   <td>value</td></tr>
  700.  
  701.  
  702.  
  703. --></section><div style="height:10vh"></div></main>
  704.  
  705.  
  706. <!-- ---------- credit ---------- -->
  707. <!-- credit link. you may move but not remove. -->
  708. <link href="https://static.tumblr.com/tpbx7ye/yiLpc9kpz/cloudythms.css" rel="stylesheet"><style>#credit { opacity:0.5; }</style>
  709. <div id="credit"><a href="https://cloudythms.tumblr.com/">
  710. <i class="far fa-copyright"></i></a></div>
  711.  
  712.  
  713. <!-- -------------------------- SCRIPTS ---------------------------- -->
  714.    
  715. <!-- jQuery -->
  716. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  717.  
  718. <!-- FontAwesome -->
  719. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  720.  
  721. <!-- Linearicons -->
  722. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  723.  
  724. <!-- Smooth Scroll -->
  725. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  726.  
  727. <!-- no tumblr redirect links -->
  728. <script>
  729. $(document).ready(function(){
  730. //remove tumblr redirects script by magnusthemes@tumblr
  731. $('a[href*="t.umblr.com/redirect"]').each(function(){
  732.   var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  733.   var replaceURL = decodeURIComponent(originalURL);
  734.   $(this).attr("href", replaceURL);
  735. });
  736. });
  737. </script>
  738.    
  739. <!-- Tooltips -->
  740. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  741. <script>
  742. (function($){
  743. $(document).ready(function(){
  744. $("a[title]").style_my_tooltips({
  745. tip_follows_cursor:true,
  746. tip_delay_time:30, /* put a higher number for more delay */
  747. tip_fade_speed:400, /* put a higher number for a slower fade */
  748. attribute:"title"
  749. });
  750. });
  751. })(jQuery);
  752. </script>
  753. <style>
  754. .tooltip{display: inline;
  755. position: relative;}
  756. #s-m-t-tooltip {
  757.     max-width:300px;
  758.     border-radius: 0px;
  759.     padding:3px 4px 5px 4px;
  760.     margin:20px 7px -2px 20px;
  761.     background-color:var(--color-background,white);
  762.     border:1px solid #E0E0E0;
  763.     border-radius: 5px;
  764.     font-size:0.8em;
  765.     letter-spacing:0.5px;
  766.     text-transform:uppercase;
  767.     color:var(--color-text,black);
  768.     z-index:9999999999999999;
  769. }
  770. </style>
  771.  
  772.  
  773. <!-- Filtering -->
  774. <script>
  775. $(function(){
  776.     $(".f").click(function(){
  777.         $(".f").removeClass("active");
  778.         $(this).addClass("active");
  779.         if($(this).attr('id') == 'f-all'){
  780.             $("article").fadeIn(200);
  781.         }else{
  782.             var filter = $(this).text();
  783.             $("article").fadeOut();
  784.             $("article."+filter).fadeIn(100);
  785.         }
  786.        
  787.     });
  788. });
  789. </script>
  790.  
  791.  <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  792.  
  793. </body>
  794. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!