API tools faq
paste
Advertisement
mercurythms

fahrenheit (page)

mercurythms
Jan 16th, 2021
528
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. fahrenheit :: @mercurythms :: @freddie-mercurys
  5.  
  6. please don't remove credit or take parts of this code :)
  7.  
  8.  
  9. -->
  10.  
  11. <!DOCTYPE html>
  12. <head>
  13.  
  14. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  15.  
  16. <link rel="shortcut icon" href="{favicon}">
  17.  
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22. <!--SCRIPTS-->
  23. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  24.  
  25. <!-- GOOGLE FONTS -->
  26. <link rel="preconnect" href="https://fonts.gstatic.com">
  27. <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
  28. <link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
  29.  
  30. <!-- LINE AWESOME ICONS -->
  31. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  32. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
  33.  
  34. <!--TOOLTIPS-->
  35. <script src="https://unpkg.com/popper.js@1"></script>
  36. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  37.  
  38. <style type="text/css">
  39.  
  40. /* colors */
  41. /* here you can change colors of background, text, accents, etc */
  42.  
  43. :root {
  44. --background: #f6f6f6;
  45. --container: #eee;
  46. --text: #555;
  47. --links: #aaa;
  48.  
  49. /* accent colors */
  50. --accent: #f12e;
  51. --accent-2: #1ce;
  52. }
  53.  
  54. /* tumblr controls */
  55.  
  56. .iframe-controls--desktop {
  57. display: none;
  58. }
  59.  
  60. /* main structure */
  61.  
  62. body {
  63. background: var(--background);
  64. color: var(--text);
  65. font: 13px/1.5em Karla;
  66. letter-spacing: 0.5px;
  67. word-wrap: break-word;
  68. text-align: left;
  69. margin: 0;
  70. opacity: 1;
  71. transition: 1s opacity;
  72. }
  73.  
  74. body.fade-out {
  75. opacity: 0;
  76. transition: none;
  77. }
  78.  
  79. a {
  80. color: var(--links);
  81. text-decoration: none;
  82. transition: all .3s linear;
  83. -webkit-transition: all .3s linear;
  84. -o-transition: all .3s linear;
  85. -moz-transition: all .3s linear;
  86. }
  87.  
  88. a:hover {color: var(--text);text-decoration: none;}
  89.  
  90. blockquote {
  91. padding: .25em 0 .25em 15px;
  92. margin: .5em 0;
  93. border-left: 1px solid #eee;
  94. }
  95.  
  96. /*tooltips*/
  97.  
  98. .tippy-tooltip.custom-theme {
  99. background: var(--accent);
  100. color: #fff;
  101. text-align: center;
  102. letter-spacing: 1px;
  103. border-radius: 0;
  104. padding: 0.25em;
  105. margin: 20px auto auto 10px;
  106. font-size: 1em;
  107. }
  108.  
  109. /* containers */
  110.  
  111. main {
  112. position: fixed;
  113. width: 600px;
  114. height: 400px;
  115. top: 50%;
  116. left: 50%;
  117. transform: translate(-50%, -50%);
  118. }
  119.  
  120. #gradient {
  121. float: left;
  122. width: 150px;
  123. height: 400px;
  124. background: linear-gradient(to top right, var(--accent) 0%, var(--accent-2) 100%);
  125. }
  126.  
  127. #side-icon {
  128. position: absolute;
  129. width: 80px;
  130. height: 80px;
  131. margin: 150px 25px;
  132. border-radius: 50%;
  133. border: 10px solid var(--container);
  134. }
  135.  
  136. #text-container {
  137. background: var(--container);
  138. display: flex;
  139. flex-direction: column;
  140. flex-wrap: wrap;
  141. justify-content: center;
  142. grid-gap: 2em;
  143. width: 450px;
  144. height: 400px;
  145. float: right;
  146. }
  147.  
  148. /* title */
  149.  
  150. #title {
  151. font: 2em/1.5em Lazelar;
  152. font-weight: 700;
  153. letter-spacing: 2px;
  154. text-align: center;
  155. color: var(--accent);
  156. text-transform: lowercase;
  157. }
  158.  
  159. /* blogger stats */
  160.  
  161. #info {text-align: center; padding: 0 3em;}
  162.  
  163. #info li {
  164. list-style: none;
  165. display: inline-block;
  166. margin: 0 1em;
  167. }
  168.  
  169. #info i {
  170. color: var(--accent);
  171. font-size: 1.5em;
  172. vertical-align: middle;
  173. margin-bottom: 2px;
  174. }
  175.  
  176. /* description */
  177.  
  178. #description {text-align: justify; padding: 0 3em;}
  179.  
  180. /* bottom links */
  181.  
  182. .links {text-align: center;}
  183.  
  184. .links a {display: inline-block; margin: 0 1em;}
  185.  
  186. .links i {
  187. color: var(--accent-2);
  188. font-size: 2em;
  189. vertical-align: middle;
  190. }
  191.  
  192. /*responsive*/
  193.  
  194. @media only screen and (max-width: 600px) {
  195.  
  196. main {width: 80vw; height: 80vh;}
  197.  
  198. #gradient {
  199. display: flex;
  200. justify-content: center;
  201. align-items: center;
  202. align-content: center;
  203. width: 80vw;
  204. height: 20vh;
  205. background: linear-gradient(to top right, var(--accent) 0%, var(--accent-2) 100%);
  206. }
  207.  
  208. #side-icon {
  209. position: relative;
  210. width: 60px;
  211. height: 60px;
  212. border: 10px solid var(--container);
  213. }
  214.  
  215. #text-container {
  216. grid-gap: 1.5em;
  217. width: 80vw;
  218. height: 60vh;
  219. }
  220.  
  221. }
  222.  
  223. /* credit */
  224.  
  225. #credit {
  226. display: block;
  227. position: fixed;
  228. right: 20px;
  229. bottom: 20px;
  230. font-size: 1.2em;
  231. }
  232.  
  233. #credit a {color: var(--accent);}
  234.  
  235. </style
  236. </head>
  237.  
  238. <body>
  239.  
  240. <script>document.body.className += ' fade-out';</script>
  241.  
  242. <main>
  243.  
  244. <div id="gradient"><img src="{PortraitURL-128}" id="side-icon"></div>
  245.  
  246. <div id="text-container">
  247. <!-- page title -->
  248. <div id="title">about me</div>
  249.  
  250. <!-- blogger stats -->
  251. <!-- template: <li><i class="las la-ICON"></i> INFO -->
  252. <!-- to choose icons go to https://icons8.com/line-awesome -->
  253. <div id="info">
  254. <li><i class="las la-user"></i> name
  255. <li><i class="las la-venus"></i> pronouns
  256. <li><i class="las la-birthday-cake"></i> birthday
  257. <li><i class="las la-globe"></i> location
  258. <li><i class="las la-thumbs-up"></i> likes
  259. <li><i class="las la-thumbs-down"></i> dislikes
  260. </div>
  261.  
  262. <!-- bio/description -->
  263. <div id="description">
  264. <p>This is where you'll put your bio text. This is how it will look to use <b>bold</b>, <i>italics</i> and <a href="/">links</a>. This is super basic which means it should be easy to edit. The description looks best when short.</p>
  265. </div>
  266.  
  267. <!-- bottom links -->
  268. <!-- template: <a title="LINK TITLE" href="LINK ADDRESS"><i class="las la-ICON"></i></a> -->
  269. <!-- to choose icons go to https://icons8.com/line-awesome -->
  270. <div class="links">
  271. <a title="home" href="/"><i class="las la-home"></i></a>
  272. <a title="ask" href="/ask"><i class="las la-envelope"></i></a>
  273. <a title="archive" href="/archive"><i class="las la-history"></i></a>
  274. <a title="a link" href="/"><i class="las la-thermometer"></i></a>
  275. <a title="another link" href="/"><i class="las la-fire"></i></a>
  276. </div>
  277.  
  278. </div>
  279.  
  280. </main>
  281.  
  282. <div id="credit"><a href="https://mercurythms.tumblr.com" title="mercurythms">m.</a></div>
  283.  
  284. <script>
  285.  
  286. tippy('[title]', {
  287. theme: 'custom',
  288. arrow: false,
  289. followCursor: true,
  290. delay: 100,
  291. placement: 'bottom-start',
  292. zIndex: 9999999999,
  293. maxWidth: 400,
  294.  
  295. content(reference) {
  296. const title = reference.getAttribute('title');
  297. reference.removeAttribute('title');
  298. return title;
  299. },
  300. });
  301.  
  302. $(function() {
  303. $('body').removeClass('fade-out');
  304. });
  305.  
  306. </script>
  307.  
  308. </body></html>
  309.  
  310. </body>
  311. </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!