API tools faq
paste
Advertisement
loranhale

edinburgh

loranhale
Jun 18th, 2016
4,991
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6.  
  7. about: edinburgh
  8.  
  9. @loranhale
  10.  
  11.  
  12. --->
  13.  
  14. <title>{title}</title>
  15. <link rel="shortcut icon" href="{Favicon}" />
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  17. <link href='https://fonts.googleapis.com/css?family=Karla|PT+Serif|PT+Sans|ABeeZee|Source+Sans+Pro' rel='stylesheet' type='text/css'>
  18.  
  19. <style type="text/css">
  20.  
  21. /* scrollbar */
  22.  
  23. ::-webkit-scrollbar { height:1px; width:1px; background:#fafafa; }
  24. ::-webkit-scrollbar-thumb { background:#dcecf5; }
  25.  
  26. /* tumblr controls */
  27.  
  28. .iframe-controls--desktop { display:none!important; }
  29.  
  30. /* tooltips */
  31.  
  32. #s-m-t-tooltip {
  33. max-width:300px;
  34. margin:15px;
  35. padding:5px;
  36. z-index:99999999;
  37. color:#000;
  38. border:1px solid #dcecf5;
  39. background:#fff;
  40. letter-spacing:0;
  41. }
  42.  
  43. body {
  44. background:#fafafa;
  45. color:#555;
  46. font-family:'abeezee', arial, sans-serif;
  47. font-size:10px;
  48. letter-spacing:.5px;
  49. -moz-osx-font-smoothing:grayscale;
  50. -webkit-font-smoothing:antialiased;
  51. font-smoothing:antialiased;
  52. }
  53.  
  54. a {
  55. color:#8892e0; /* links colour */
  56. text-decoration:none;
  57. transition:all .6s ease;
  58. -webkit-transition:all .6s ease;
  59. -moz-transition:all .6s ease;
  60. -o-transition:all .6s ease;
  61. }
  62.  
  63. a:hover { text-decoration:none; color:#000; }
  64.  
  65. blockquote {
  66. padding-left:10px;
  67. border-left:1px solid #dcecf5;
  68. margin-left:10px;
  69. }
  70.  
  71. h1 {
  72. font-size:11px;
  73. color:#444;
  74. font-weight:600;
  75. text-transform:uppercase;
  76. letter-spacing:1px;
  77. }
  78.  
  79. b { color:#8892e0; font-style:bold; }
  80. i { color:#444; font-style:italic; }
  81. ul { padding-left:20px; }
  82. ul li { margin-left:-10px; list-style-type:square; }
  83. ul li:before {
  84. content:">";
  85. color:#8892e0;
  86. margin-right:6px;
  87. }
  88.  
  89. #con {
  90. width:500px;
  91. box-sizing:border-box;
  92. margin:60px auto;
  93. transform:translate(0px,25px);
  94. }
  95.  
  96. /* header */
  97.  
  98. .header {
  99. padding:15px;
  100. margin-bottom:10px;
  101. border-bottom:1px solid #dcecf5;
  102. background:#fff;
  103. }
  104.  
  105. .title {
  106. font-size:15px;
  107. text-transform:uppercase;
  108. color:#222;
  109. margin-bottom:6px;
  110. letter-spacing:1px;
  111. }
  112.  
  113. .links a { text-transform:lowercase; margin-right:10px; }
  114.  
  115. /* tags and info */
  116.  
  117. .stuff { position:relative; margin-bottom:25px; height:120px; }
  118.  
  119. /* tags */
  120. .social {
  121. background:#fff;
  122. width:38%;
  123. border-bottom:1px solid #dcecf5;
  124. height:100px;
  125. padding:15px;
  126. position:absolute;
  127. }
  128.  
  129. .tags {
  130. column-count:2;
  131. -moz-column-count:2;
  132. -webkit-column-count:2;
  133. max-height:95px;
  134. overflow-x:scroll;
  135. padding-bottom:10px;
  136. }
  137.  
  138. .tags a {
  139. margin-bottom:8px;
  140. letter-spacing:.5px;
  141. display:block;
  142. text-transform:lowercase;
  143. font-size:9.5px;
  144. color:#8892e0; /* link color */
  145. }
  146.  
  147. .tags a:hover {margin-left:8px;color:#000;}
  148.  
  149. /* info */
  150. .info {
  151. padding:15px;
  152. width:45%;
  153. max-height:100px;
  154. float:right;
  155. margin-top:0px;
  156. background:#fff;
  157. border-bottom:1px solid #dcecf5;
  158. overflow-y:scroll;
  159. word-wrap:break-word;
  160. position:relative;
  161. }
  162.  
  163. .it {
  164. color:#222;
  165. letter-spacing:1px;
  166. font-size:10px;
  167. text-transform:uppercase;
  168. font-style:none;
  169. text-align:left;
  170. font-weight:400;
  171. }
  172.  
  173. .it:after {
  174. content:"";
  175. display:block;
  176. margin:8px 0;
  177. background:#dcecf5; /* line colour */
  178. width:40px;
  179. height:1.5px;
  180. }
  181.  
  182. .fact { line-height:15px; }
  183. .f { margin-bottom:2px; }
  184. .f b { margin-right:5px; }
  185.  
  186. /* about */
  187.  
  188. .icon { float:right; display:inline; }
  189. .icon img {
  190. width:65px;
  191. height:65px;
  192. border-radius:3px;
  193. opacity:.9;
  194. }
  195.  
  196. .about {
  197. padding:15px;
  198. border-bottom:1px solid #dcecf5;
  199. background:#fff;
  200. letter-spacing:0;
  201. font-family:'source sans pro',sans-serif;
  202. }
  203.  
  204. .t {
  205. color:#222;
  206. letter-spacing:1px;
  207. font-size:13px;
  208. font-family:'abeezee',sans-serif;
  209. text-transform:uppercase;
  210. font-weight:400;
  211. }
  212.  
  213. .t:after {
  214. content:"";
  215. display:block;
  216. margin-top:10px;
  217. background:#dcecf5; /* line colour */
  218. width:85px;
  219. height:2px;
  220. }
  221.  
  222. .desc {
  223. margin-top:15px;
  224. margin-bottom:20px;
  225. color:#8892e0;
  226. letter-spacing:.5px;
  227. font-size:12px;
  228. font-weight:400;
  229. width:80%;
  230. }
  231.  
  232. .talk {
  233. background:#fff;
  234. border-top:1px solid #dcecf5;
  235. line-height:13px;
  236. max-height:200px;
  237. overflow-y:scroll;
  238. padding-top:15px;
  239. padding-right:5px;
  240. }
  241.  
  242. /* do not disturb */
  243. .lo { position:fixed; bottom:20px; right:20px; }
  244. .lo a { font-size:12px; text-transform:uppercase; }
  245.  
  246. </style>
  247. <body>
  248.  
  249. <div id="con">
  250.  
  251. <div class="header">
  252. <div class="title">about me</div>
  253. <div class="links">
  254. <a href="/">home</a>
  255. <a href="/ask">ask</a>
  256. <a href="/">link</a>
  257. <a href="http://loranhale.tumblr.com">theme</a>
  258. </div>
  259. </div>
  260.  
  261. <div class="stuff">
  262. <div class="social">
  263.  
  264. <div class="tags">
  265. <a href="http://goodreads.com/">goodreads</a>
  266. <a href="http://au.pinterest.com/">pinterest</a>
  267. <a href="http://instagram.com">instagram</a>
  268. <a href="http://twitter.com/">twitter</a>
  269. <a href="http://weheartit.com/">weheartit</a>
  270. <a href="">some tags</a>
  271. <a href="">some tags</a>
  272. <a href="">some tags</a>
  273. <a href="">some tags</a>
  274. <a href="">some tags</a>
  275. <!-- you can add more. it scrolls (horizontally) -->
  276. </div>
  277. </div>
  278.  
  279. <div class="info">
  280. <div class="it">personal data</div>
  281.  
  282. <div class="fact">
  283. <div class="f"><b>name</b> content </div>
  284. <div class="f"><b>age</b> content </div>
  285. <div class="f"><b>birthday</b> content </div>
  286. <div class="f"><b>pronouns</b> content </div>
  287. <!-- you can add more. it scrolls -->
  288. </div>
  289.  
  290. </div>
  291. </div>
  292.  
  293. <div class="about">
  294.  
  295. <div class="icon">
  296. <img src="{PortraitURL-128}" /> <!-- replace with your icon url -->
  297. </div>
  298.  
  299. <div class="t">your title</div>
  300. <div class="desc">
  301. Love all, trust a few, do wrong to none.
  302. <!-- a quote or a short description -->
  303. </div>
  304.  
  305. <div class="talk">
  306. <b>hello</b> <i>it's me</i> <br>
  307. <blockquote>what's up</blockquote>
  308. <a href="/">this is a link</a>
  309.  
  310. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla condimentum vel tellus vitae volutpat. aliquam ut quam ac elit congue luctus. nam a lacus sed odio iaculis luctus a in turpis. aenean erat libero, dapibus at porttitor in, auctor sed urna. aenean a molestie est. sed rhoncus justo sit amet felis sodales maximus. etiam pharetra nibh dolor, nec imperdiet enim hendrerit a. pellentesque et dolor sed ligula bibendum dignissim sit amet quis lectus. praesent ornare sem dolor, ut tristique massa tincidunt eget. morbi viverra id mi sed efficitur. integer id maximus enim, nec placerat nisi. ut consequat augue enim, a eleifend mauris tristique et.</p>
  311. </div>
  312.  
  313. </div>
  314.  
  315. </div>
  316.  
  317. <!-- keep out -->
  318. <div class="lo">
  319. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  320. </div>
  321.  
  322. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  323. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  324. <script>
  325. jQuery.noConflict();
  326. (function($){
  327. $(document).ready(function(){
  328. $("a[title],img[title],[title]").style_my_tooltips({
  329. tip_follows_cursor:true,
  330. tip_delay_time:200,
  331. tip_fade_speed:300,
  332. attribute:"title"
  333. });
  334. });
  335. })(jQuery);
  336. </script>
  337.  
  338. </head>
  339. </body>
  340. </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!