API tools faq
paste
LiterallyMeg

tumblr v.2: about

LiterallyMeg
Sep 13th, 2016
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. pluto (revamped)
  7.  
  8. @ odeysseus
  9.  
  10. some notes:
  11.  
  12. - general markers for customisation are in the code
  13. - your icon shows up as the sidebar image
  14. - current accent color is #EACBF5 - to change, go to colorpicker and pick a new one, then press ctrl+f and hit "replace all".
  15.  
  16. -->
  17.  
  18. <title>about</title><!--title-->
  19.  
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  21.  
  22. <script>
  23.  
  24. (function($){
  25.  
  26. $(document).ready(function(){
  27.  
  28. $("a[title]").style_my_tooltips({
  29.  
  30. tip_follows_cursor:true,
  31.  
  32. tip_delay_time:30,
  33.  
  34. tip_fade_speed:300,
  35.  
  36. attribute:"title"
  37.  
  38. });
  39.  
  40. });
  41.  
  42. })(jQuery);
  43.  
  44. </script>
  45.  
  46. <link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. ::-webkit-scrollbar{
  52. height:3px;
  53. width:1px;
  54. background:inherit;
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb {background:#eee;}
  58.  
  59. ::-webkit-scrollbar-track {background:transparent;}
  60.  
  61. #s-m-t-tooltip{
  62. position:absolute;
  63. margin-top: 15px;
  64. font-size:7px;
  65. color:#aaa;
  66. max-width:250px;
  67. z-index:999999999999999;
  68. padding:5px;
  69. background:white;
  70. text-transform:uppercase;
  71. letter-spacing:1px;
  72. }
  73.  
  74. body {
  75. background:#f8f8f8; /*background*/
  76. font-family:'Karla', sans-serif; /*font*/
  77. font-size:10px;
  78. line-height:150%;
  79. color:#999;
  80. -moz-osx-font-smoothing:grayscale;
  81. -webkit-font-smoothing:antialiased;
  82. font-smoothing:antialiased;
  83.  
  84. }
  85.  
  86. a {
  87. color:#aaa; /*links*/
  88. text-decoration:none;
  89. padding:.2px 0px;
  90. border-bottom:1px solid #eee;
  91. transition:0.2s ease-in;
  92. -webkit-transition:0.2s ease-in;
  93. -moz-transition:0.2s ease-in;
  94. }
  95.  
  96. a:hover {
  97. color:#E6F2C9; /*link hover*/
  98. border-bottom:1px solid #EACBF5;
  99. text-decoration:none;
  100. transition:0.2s ease-in;
  101. -webkit-transition:0.2s ease-in;
  102. -moz-transition:0.2s ease-in;
  103. }
  104.  
  105.  
  106. #con {
  107. width:300px;
  108. height:250px;
  109. margin-top:calc(50vh - 135px)!important;
  110. margin:auto;
  111. padding:10px;
  112. border:1px solid #eee;
  113. background:#fff;
  114. }
  115.  
  116. h8 {
  117. font-size:10px;
  118. text-transform:uppercase;
  119. float:left;
  120. border-right:1px solid #eee;
  121. height:250px;
  122. margin-left:-10px!important;
  123. width:100px;
  124. text-align:center;
  125. font-weight:700;
  126. letter-spacing:.5px;
  127. color:#444;
  128. }
  129.  
  130. h8 img {
  131. display:block;
  132. width:50px;
  133. height:50px;
  134. margin:30px auto 20px;
  135. border-radius:100%;
  136. }
  137.  
  138. .links a {
  139. width:40px;
  140. display:inline-block;
  141. font-weight:normal;
  142. font-size:8px;
  143. text-transform:uppercase;
  144. letter-spacing:.5px;
  145. font-family:calibri;
  146. padding:5px;
  147. border-bottom:1px solid #eee;
  148. }
  149.  
  150. .links {
  151. text-align:center;
  152. margin-top:10px;
  153. }
  154. .links a:last-of-type {
  155. border-bottom:none;
  156. }
  157.  
  158. .container {
  159. float:right;
  160. width:180px;
  161. padding:10px 15px 10px 5px;
  162. max-height:235px;
  163. overflow-y:auto;
  164. }
  165.  
  166. b, strong, i, em {
  167. color:#777;
  168. }
  169. </style>
  170. </head>
  171. <body>
  172. <div id="con">
  173. <div class="box">
  174. <h8><img src="{portraiturl-64}"/> <!--your icon; you can replace with the url of your own image if you like-->
  175.  
  176. biography <!--title that shows up in sidebar-->
  177. <div class="links"> <!--please, please don't touch the credit. four links looks nicest.-->
  178. <a href="/">return</a>
  179. <a href="/ask">message</a>
  180. <a href="/archive">archive</a>
  181. <a href="http://odeysseus.tumblr.com">credit</a>
  182. </div>
  183. </h8>
  184. <div class="container">
  185. <!--start about text
  186.  
  187. <p> for paragraphs
  188. <b> for bold
  189. <i> for italics
  190. <a href="LINK URL" title="HOVER TEXT">LINK NAME</a> for links
  191. -->
  192. this is where your about text goes; space is, quite literally, unlimited. talk about your love for cats. talk about your loathing for all things coconut. (vile, i tell you.)
  193.  
  194. <p>
  195.  
  196. you can use paragraphs to break your text up and make it more readable.
  197.  
  198. <p>
  199.  
  200. if you want, you can use <b>bold</b> or maybe some <i>italics</i> to make your text stand out; you can even go for some <a href="link url">links.</a>
  201.  
  202. <p>
  203.  
  204. it's been ages since i made an about page lmao this is making me really happy? i think i've talked enough now, though, so i'm gonna go. hope you like this page :)
  205.  
  206. <!--end about text-->
  207. </div>
  208. </div>
  209. </div>
  210. </body>
  211. </html>
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!