API tools faq
paste
alydae

about iv

alydae
Jul 29th, 2018 (edited)
6,546
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT IV
  7. by alydae
  8.  
  9. released: july 29, 2018
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>about</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <!-- custom font -->
  42.  
  43. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  44.  
  45. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  46.  
  47.  
  48. <style type="text/css">
  49.  
  50. @keyframes fadein {
  51. from { opacity:0; }
  52. to { opacity:1; }
  53. }
  54.  
  55. @-moz-keyframes fadein {
  56. from { opacity:0; }
  57. to { opacity:1; }
  58. }
  59.  
  60. @-webkit-keyframes fadein {
  61. from { opacity:0; }
  62. to { opacity:1; }
  63. }
  64.  
  65. @-ms-keyframes fadein {
  66. from { opacity:0; }
  67. to { opacity:1; }
  68. }
  69.  
  70. @-o-keyframes fadein {
  71. from { opacity:0; }
  72. to { opacity:1; }
  73. }
  74.  
  75. /*-- selection --*/
  76.  
  77. ::-moz-selection { background:var(--accent); color:var(--title); }
  78. ::selection { background:var(--accent); color:var(--title); }
  79.  
  80. /*-- scrollbar --*/
  81.  
  82. ::-webkit-scrollbar {
  83. width:1px;
  84. height:2px;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  88.  
  89. /*-- tooltips --*/
  90.  
  91. #s-m-t-tooltip {
  92. color:var(--text);
  93. background-color:var(--accent);
  94. font-size:calc(var(--font-size) - 2px);
  95. font-family:'Open Sans', helvetica, sans-serif;
  96. letter-spacing:1px;
  97. text-transform:uppercase;
  98. text-align:center;
  99. position:absolute;
  100. padding:0px 5px 0px 5px;
  101. margin-top:30px;
  102. border:1px solid var(--borders);
  103. z-index:9999;
  104. }
  105.  
  106. /*-- tumblr controls --*/
  107.  
  108. .tmblr-iframe, .iframe-controls–desktop {
  109. display:none!important;
  110. }
  111.  
  112. /*-- change all variables here --*/
  113.  
  114. :root {
  115. --background:#fff;
  116. --accent:#fafafa;
  117. --text:#666;
  118. --links:#444;
  119. --links-hover:#bad1e7;
  120. --title:#222;
  121. --borders:#eee;
  122. --font-size:10px;
  123. }
  124.  
  125. /*-- general customisation --*/
  126.  
  127. body {
  128. color:var(--text);
  129. background-color:var(--background);
  130. font-style:normal;
  131. font-family:'Open Sans', helvetica, sans-serif;
  132. font-size:var(--font-size);
  133. font-weight:400;
  134. text-decoration:none;
  135. line-height:180%;
  136. -moz-osx-font-smoothing: grayscale;
  137. -webkit-font-smoothing: antialiased;
  138. font-smoothing: antialiased;
  139. -webkit-animation: fadein 1.5s;
  140. -moz-animation: fadein 1.5s;
  141. -o-animation: fadein 1.5s;
  142. animation: fadein 1.5s;
  143. }
  144.  
  145. a {
  146. text-decoration:none;
  147. color:var(--links);
  148. transition-duration: 0.6s;
  149. -moz-transition-duration: 0.6s;
  150. -webkit-transition-duration: 0.6s;
  151. -o-transition-duration: 0.6s;
  152. }
  153.  
  154. a:hover {
  155. color:var(--links-hover);
  156. cursor:pointer;
  157. transition-duration: 0.6s;
  158. -moz-transition-duration: 0.6s;
  159. -webkit-transition-duration: 0.6s;
  160. -o-transition-duration: 0.6s;
  161. }
  162.  
  163. b, strong { font-weight:600; color:var(--title); }
  164. i, em { font-style:italic; }
  165.  
  166. h1, h2, h3, h4, h5, h6 {
  167. color:var(--title);
  168. text-transform:uppercase!important;
  169. text-align:left;
  170. font-weight:bold;
  171. font-size:calc(var(--font-size) + 2px);
  172. letter-spacing:1px;
  173. }
  174.  
  175. blockquote {
  176. padding-left:10px;
  177. margin:0;
  178. border-left:1px solid var(--borders);
  179. }
  180.  
  181. /*-- container --*/
  182.  
  183. container {
  184. position:fixed;
  185. width:calc(550px + 20px + 150px);
  186. /* left section + 20px gap + right section */
  187. height:auto;
  188. top:50%;
  189. left:50%;
  190. transform:translate(-50%,-50%);
  191. }
  192.  
  193. #left, #right { display:inline-block; }
  194. #left, #header { width:550px; }
  195. #right { width:150px; }
  196.  
  197. /*-- header --*/
  198.  
  199. .title {
  200. font-size:calc(var(--font-size) + 4px);
  201. font-weight:700;
  202. text-transform:uppercase;
  203. text-align:left!important;
  204. letter-spacing:2px;
  205. line-height:100%;
  206. padding:10px;
  207. color:var(--title);
  208. }
  209.  
  210. .links { float:right; margin-top:-26px; }
  211. .links a { margin-right:10px; }
  212.  
  213. /*-- about --*/
  214.  
  215. #about {
  216. max-height:350px;
  217. overflow:scroll;
  218. padding:10px 10px 0px 10px;
  219. background:var(--accent);
  220. border:1px solid var(--borders);
  221. }
  222.  
  223. .icon { margin-bottom:10px; float:left; }
  224. .icon img { width:33px; height:33px; }
  225.  
  226. .quote {
  227. display:inline-block;
  228. line-height:100%;
  229. font-size:calc(var(--font-size) + 1px);
  230. font-style:italic;
  231. padding:10px;
  232. margin-left:10px;
  233. margin-bottom:15px;
  234. background:var(--background); /* quote background */
  235. border:1px solid var(--borders);
  236. }
  237.  
  238. /*-- categories --*/
  239.  
  240. .categories {
  241. position:relative;
  242. margin:0;
  243. padding:0px 10px 0px 10px;
  244. border:1px solid var(--borders);
  245. border-top:none;
  246. }
  247.  
  248. .categories h1 { display:inline-block; margin-right:10px; }
  249.  
  250. /*-- info --*/
  251.  
  252. #right {
  253. left:570px;
  254. top:0;
  255. position:absolute;
  256. }
  257.  
  258. .info { position:relative; margin-top:20px; }
  259. .info:first-of-type { margin-top:0!important; }
  260.  
  261. .info h1 {
  262. line-height:100%;
  263. padding:10px;
  264. margin:0;
  265. text-align:center;
  266. background:var(--accent);
  267. border:1px solid var(--borders);
  268. border-bottom:2px solid var(--text);
  269. }
  270.  
  271. .info ul {
  272. max-height:157px;
  273. overflow:scroll;
  274. margin-left:-40px;
  275. margin-top:0px;
  276. }
  277.  
  278. .info ul li { list-style:none; margin:0; }
  279.  
  280. .info li {
  281. line-height:100%;
  282. padding:10px;
  283. margin-top:-10px;
  284. background:var(--accent);
  285. border-left:1px solid var(--borders);
  286. border-right:1px solid var(--borders);
  287. border-bottom:1px solid var(--borders);
  288. padding-right:10px;
  289. white-space:nowrap;
  290. overflow:hidden;
  291. text-overflow:ellipsis;
  292. }
  293.  
  294. .info li:nth-child(odd) { background:var(--background); }
  295.  
  296. .info h2 {
  297. display:inline;
  298. margin:0;
  299. padding-right:5px;
  300. text-transform:uppercase!important;
  301. float:left!important;
  302. font-size:var(--font-size);
  303. font-weight:400;
  304. letter-spacing:0.5px;
  305. color:var(--title);
  306. }
  307.  
  308. .info h2 i { margin-right:5px; height:10px; width:10px; }
  309.  
  310. /*-- credit - DO NOT TOUCH --*/
  311.  
  312. .credit a {
  313. bottom:15px;
  314. right:20px;
  315. position:fixed;
  316. text-transform:uppercase;
  317. }
  318.  
  319. </style>
  320. </head>
  321.  
  322.  
  323. <body>
  324.  
  325.  
  326. <container>
  327.  
  328. <div id="left">
  329.  
  330. <div id="header">
  331. <div class="title">about</div><!-- title -->
  332. <div class="links">
  333. <!-- feel free to add more! -->
  334. <a href="/">index</a>
  335. <a href="/ask">message</a>
  336. <a href="">link</a>
  337. <a href="">link</a>
  338. <a href="/archive">archive</a>
  339. </div>
  340. </div>
  341.  
  342. <div id="about">
  343.  
  344. <!-- if you don't want the icon and/or quote, remove these lines -->
  345. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want -->
  346. <div class="icon"><img src="{PortraitURL-128}"/></div>
  347. <div class="quote">optional quote</div>
  348. <!-- up to here -->
  349.  
  350. <div style="display:block;">
  351. <!-- this is where you about text goes -->
  352. this is where you put the body of your about. you can use <b>bold</b>, <i>italics</i>, <big>big</big>, <small>small</small>, <s>strikethroughs</s>, <a href="/">links</a> as well as
  353. <blockquote>blockquotes</blockquote>
  354.  
  355. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  356.  
  357. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac consequat odio, sagittis ultricies dolor. Praesent molestie et tortor eu rhoncus. Sed tristique, sapien eu posuere vulputate, metus nisl aliquam diam, id vulputate ipsum velit quis nisi. Sed nec eros risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  358.  
  359. <p>Vestibulum a diam faucibus, tincidunt libero nec, tincidunt mauris. Maecenas semper in dui ac dapibus. Nunc et mollis diam, eget porttitor felis. Suspendisse interdum porta pretium. Nulla facilisi. Curabitur sagittis, massa id ultricies euismod, purus sapien pellentesque leo, quis ultricies mauris dolor et urna. Quisque malesuada ante nec vestibulum tempor. Quisque lobortis est ac finibus pretium. Maecenas quis hendrerit quam</p>
  360. <!-- end about text -->
  361. </div>
  362.  
  363. </div>
  364.  
  365. <!-- template:
  366. <div class="categories">
  367. <h1>subtitle</h1>
  368. ceontent (etc. links)
  369. </div>
  370.  
  371. you can have anything here - the example is links
  372. -->
  373.  
  374. <div class="categories">
  375. <h1>subtitle</h1>
  376. <a href="">link</a>,
  377. <a href="">link</a>,
  378. <a href="">link</a>,
  379. <a href="">link</a>,
  380. <a href="">link</a>
  381. </div>
  382.  
  383. <div class="categories">
  384. <h1>subtitle</h1>
  385. <a href="">link</a>,
  386. <a href="">link</a>,
  387. <a href="">link</a>,
  388. <a href="">link</a>,
  389. <a href="">link</a>
  390. </div>
  391.  
  392. </div>
  393.  
  394. <div id="right">
  395.  
  396. <!-- template:
  397. <li><h2><i class="[icon name] fa-fw"></i>subject:</h2> content</li>
  398. or
  399. <li><h2><i class="[icon name] fa-fw"></i></h2> content</li>
  400.  
  401. if you don't want the icon, just remove the <i class> section. to change the icon, go to https://fontawesome.com/icons. keep the fa-fw at the end to align them all.
  402. -->
  403.  
  404. <div class="info">
  405. <h1>subtitle</h1>
  406. <ul>
  407. <li><h2><i class="far fa-user fa-fw"></i>subject:</h2> content</li>
  408. <li><h2><i class="fas fa-venus fa-fw"></i>subject:</h2> contentr</li>
  409. <li><h2><i class="far fa-heart fa-fw"></i>subject:</h2> content</li>
  410. <li><h2><i class="fas fa-birthday-cake fa-fw"></i>subject:</h2> content</li>
  411. <li><h2><i class="far fa-compass fa-fw"></i>subject:</h2> content</li>
  412. </ul>
  413. </div>
  414.  
  415. <div class="info">
  416. <h1>subtitle</h1>
  417. <ul>
  418. <li><h2><i class="fas fa-book fa-fw"></i></h2> content</li>
  419. <li><h2><i class="fas fa-paint-brush fa-fw"></i></h2> content</li>
  420. <li><h2><i class="fas fa-crop fa-fw"></i></h2> content</li>
  421. <li><h2><i class="fas fa-code fa-fw"></i></h2> content</li>
  422. <li><h2><i class="fas fa-music fa-fw"></i></h2> content</li>
  423. </ul>
  424. </div>
  425.  
  426. </div>
  427.  
  428. </container>
  429.  
  430.  
  431. <!-- credit - DO NOT TOUCH -->
  432.  
  433. <div class="credit">
  434. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  435. </div>
  436.  
  437.  
  438. </body>
  439. </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!