API tools faq
paste
Advertisement
alydae

blogroll iii

alydae
Nov 18th, 2018 (edited)
4,135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. BLOGROLL III
  7. by alydae
  8.  
  9. released: november 18, 2018
  10. last updated: september 10, 2023
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - turn on following in settings for blogs to show
  15. - direct questions to enchantedthemes.tumblr.com
  16.  
  17. thank you for using!!!
  18.  
  19. -->
  20.  
  21. <title>blogroll</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <!-- scripts - DO NOT TOUCH -->
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27.  
  28. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:200,
  35. tip_fade_speed:300
  36. }
  37. );
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <!-- custom font -->
  43.  
  44. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  45.  
  46. <script src="https://kit.fontawesome.com/4fe045a39a.js" crossorigin="anonymous"></script>
  47.  
  48. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  49.  
  50.  
  51. <style type="text/css">
  52.  
  53. @keyframes fadein {
  54. from { opacity:0; }
  55. to { opacity:1; }
  56. }
  57.  
  58. @-moz-keyframes fadein {
  59. from { opacity:0; }
  60. to { opacity:1; }
  61. }
  62.  
  63. @-webkit-keyframes fadein {
  64. from { opacity:0; }
  65. to { opacity:1; }
  66. }
  67.  
  68. @-ms-keyframes fadein {
  69. from { opacity:0; }
  70. to { opacity:1; }
  71. }
  72.  
  73. @-o-keyframes fadein {
  74. from { opacity:0; }
  75. to { opacity:1; }
  76. }
  77.  
  78. /*-- selection --*/
  79.  
  80. ::-moz-selection { background:var(--accent); color:var(--title); }
  81. ::selection { background:var(--accent); color:var(--title); }
  82.  
  83. /*-- scrollbar --*/
  84.  
  85. ::-webkit-scrollbar {
  86. width:1px;
  87. height:2px;
  88. }
  89.  
  90. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  91.  
  92. /*-- tooltips --*/
  93.  
  94. #s-m-t-tooltip {
  95. color:var(--text);
  96. background-color:var(--accent);
  97. font-size:calc(var(--font-size) - 2px);
  98. font-family:'Open Sans', helvetica, sans-serif;
  99. letter-spacing:1px;
  100. text-transform:uppercase;
  101. text-align:center;
  102. position:absolute;
  103. padding:0px 5px 0px 5px;
  104. margin-top:30px;
  105. border:1px solid var(--borders);
  106. z-index:9999;
  107. }
  108.  
  109. /*-- tumblr controls --*/
  110.  
  111. .tmblr-iframe, .iframe-controls–desktop {
  112. display:none!important;
  113. }
  114.  
  115. /*-- hover --*/
  116.  
  117. a, a:hover, .blog, .blog:hover, .blog img, .blog:hover img, .blog:hover a, .blog a {
  118. transition-duration: 0.4s;
  119. -moz-transition-duration: 0.4s;
  120. -webkit-transition-duration: 0.4s;
  121. -o-transition-duration: 0.4s;
  122. }
  123.  
  124. /*-- change all variables here --*/
  125.  
  126. :root {
  127. --background:#fff;
  128. --accent:#fafafa;
  129. --text:#666;
  130. --links:#444;
  131. --links-hover:#bad1e7;
  132. --title:#222;
  133. --borders:#eee;
  134. --font-size:10px;
  135. }
  136.  
  137. /*-- general customisation --*/
  138.  
  139. body {
  140. color:var(--text);
  141. background-color:var(--background);
  142. font-style:normal;
  143. font-family:'Open Sans', helvetica, sans-serif;
  144. font-size:var(--font-size);
  145. font-weight:400;
  146. text-decoration:none;
  147. line-height:180%;
  148. -moz-osx-font-smoothing: grayscale;
  149. -webkit-font-smoothing: antialiased;
  150. font-smoothing: antialiased;
  151. -webkit-animation: fadein 1.5s;
  152. -moz-animation: fadein 1.5s;
  153. -o-animation: fadein 1.5s;
  154. animation: fadein 1.5s;
  155. }
  156.  
  157. a { text-decoration:none; color:var(--links); }
  158. a:hover { color:var(--links-hover); cursor:pointer; }
  159.  
  160. b, strong { font-weight:600; color:var(--title); }
  161. i, em { font-style:italic; }
  162.  
  163.  
  164. /*-- footer --*/
  165.  
  166. #bottom {
  167. position:fixed;
  168. bottom:0;
  169. left:0;
  170. height:75px;
  171. width:100vw;
  172. background-color:var(--background);
  173. z-index:999!important;
  174. border-top:1px solid var(--borders);
  175. }
  176.  
  177. .links { margin-top:30px; text-align:center; }
  178.  
  179. .links a {
  180. display:inline;
  181. font-style:italic;
  182. margin-left:10px;
  183. margin-right:10px;
  184. }
  185.  
  186. .lnr {
  187. padding:5px;
  188. background:var(--accent);
  189. border:1px solid var(--borders);
  190. margin-right:7px;
  191. font-size:calc(var(--font-size) + 2px);
  192. }
  193.  
  194. a:hover .lnr { background:var(--background); }
  195.  
  196. /*-- content --*/
  197.  
  198. #main {
  199. position:fixed;
  200. top:50%;
  201. left:50%;
  202. transform:translate(-50%,-57%);
  203. width:calc(4 * 237px + 1px);
  204. /* (number of columns * blog width w/margin + 1px) */
  205. max-height:calc(8 * 54px);
  206. /* (number of rows * blog height w/margin) */
  207. overflow:scroll;
  208. }
  209.  
  210. .title {
  211. font-size:calc(var(--font-size) + 2px);
  212. font-weight:700;
  213. line-height:40px;
  214. text-transform:uppercase;
  215. letter-spacing:1px;
  216. color:var(--title);
  217. background:var(--background)!important;
  218. font-style:normal!important;
  219. }
  220.  
  221. .blog {
  222. height:40px;
  223. width:200px;
  224. float:left;
  225. margin:10px 10px 10px 10px;
  226. padding-right:15px;
  227. white-space:nowrap;
  228. overflow:hidden;
  229. text-overflow:ellipsis;
  230. background:var(--accent);
  231. border:1px solid var(--borders);
  232. }
  233.  
  234. .blog img {
  235. height:40px;
  236. width:40px;
  237. float:left;
  238. position:relative;
  239. margin-right:15px;
  240. }
  241.  
  242. .blog a {
  243. line-height:40px;
  244. position:relative;
  245. text-transform:uppercase;
  246. font-style:italic;
  247. letter-spacing:1px;
  248. }
  249.  
  250. .blog:hover {
  251. background:var(--background);
  252. }
  253.  
  254. /*-- credit - DO NOT TOUCH --*/
  255.  
  256. .credit a {
  257. font-size:10px;
  258. bottom:15px;
  259. right:20px;
  260. position:fixed;
  261. text-transform:uppercase;
  262. z-index:999999!important;
  263. }
  264.  
  265. </style>
  266. </head>
  267.  
  268.  
  269. <body>
  270.  
  271. <div id="main">
  272.  
  273. <!-- you don't need to edit this!! -->
  274. <div class="blog title">
  275. <img src="{PortraitURL-128}"/>
  276. blogroll
  277. </div>
  278.  
  279. {block:Following}{block:Followed}
  280. <div class="blog">
  281. <img src="{FollowedPortraitURL-128}"/>
  282. <a href="{FollowedURL}" title="{FollowedTitle}">{FollowedName}</a>
  283. </div>
  284. {/block:Followed}{/block:Following}
  285.  
  286. </div>
  287.  
  288. <div id="bottom">
  289. <div class="links">
  290. <!-- feel free to add more! you can change the icons at https://linearicons.com/free -->
  291. <a href="/"><span class="lnr lnr-home"></span>index</a>
  292. <a href="/ask"><span class="lnr lnr-envelope"></span>message</a>
  293. <a href=""><span class="lnr lnr-star"></span>link</a>
  294. <a href=""><span class="lnr lnr-menu"></span>link</a>
  295. <a href="/archive"><span class="lnr lnr-calendar-full"></span>archive</a>
  296. </div>
  297.  
  298. </div>
  299.  
  300.  
  301. <!-- credit - DO NOT TOUCH -->
  302.  
  303. <div class="credit">
  304. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  305. </div>
  306.  
  307.  
  308. </body>
  309. </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!