API tools faq
paste
Advertisement
loranhale

edinburgh (v2)

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