hermionemessi

Blogroll 02

Sep 9th, 2021 (edited)
392
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.21 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Eudamia Page Pack: Blogroll 02 Evadne by antoniosvivaldi / athenathms
  4.  
  5. antoniosvivaldi © 2021
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <title>{Title}</title>
  23.  
  24.  
  25.  
  26.  
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  30. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">
  37.  
  38. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  39. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  40.  
  41. <style type="text/css">
  42.  
  43. /*Customise stuff here*/
  44.  
  45. :root {
  46.  
  47. /*font size*/
  48. --fontsize:18px;
  49.  
  50. /*accent colours*/
  51. --accent: #53759b;
  52. --highlight: #cfe9f6;
  53.  
  54. /*accent colours with opacity*/
  55.  
  56. /*
  57. convert the accent & highlight hex codes to RGB values using the following website:
  58.  
  59. https://www.rapidtables.com/convert/color/hex-to-rgb.html
  60.  
  61. */
  62.  
  63. --accentalpha: 83, 117, 155;
  64. --highlightalpha: 207, 233, 246;
  65.  
  66. /* available blend modes:
  67.  
  68. - Normal
  69. - Multiply
  70. - Scren
  71. - Color Burn
  72. - Color Dodge
  73. - Overlay
  74. - Soft Light
  75. - Hard Light
  76. - Hue
  77. - Color
  78.  
  79.  
  80. */
  81.  
  82. --abtblend:multiply;
  83. --faqblend:multiply;
  84.  
  85.  
  86.  
  87. }
  88.  
  89. /*Available body fonts:
  90.  
  91. - Fira Sans
  92. - Open Sans
  93. - Karla
  94. - Source Sans Pro
  95.  
  96. */
  97.  
  98. body {
  99. font-family:'Fira Sans',sans-serif;
  100. }
  101.  
  102. /*Available heading fonts:
  103.  
  104. - Playfair Display
  105. - Elsie
  106. - Unna
  107. - Libre Baskerville
  108.  
  109. */
  110.  
  111. h1, h2, .tilter__title {font-family:'Playfair Display',serif;}
  112.  
  113.  
  114. </style>
  115.  
  116. <!--the rest of the CSS stylesheet-->
  117. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">
  118.  
  119. </head>
  120.  
  121. <!--How to use different theme modes: in the body tag below
  122.  
  123. Light theme: day-mode
  124. Dark theme: night-mode
  125. Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML
  126.  
  127. -->
  128. <body class="animsition day-mode">
  129.  
  130. <div class="topbar">
  131. <div class="topbar__inner">
  132.  
  133. <!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
  134. <h1><a class="a-link tbrefresh" href="/">{Title}
  135. <span class="tbletters" data-letters="{Title}"></span>
  136. <span class="tbletters" data-letters="{Title}"></span>
  137. </a></h1>
  138.  
  139.  
  140. </div>
  141. </div>
  142.  
  143.  
  144. <main class="smooth">
  145. <div id="wrapper">
  146.  
  147.  
  148.  
  149. <section class="tabs" id="tab1">
  150.  
  151. <h1>Blogroll</h1>
  152.  
  153. {block:Following}
  154. <div class="broll_cont">
  155.  
  156.  
  157. {block:Followed}
  158.  
  159. <div class="followed_user">
  160. <div class="followed_img">
  161. <div>
  162. <img src="{FollowedPortraitURL-128}">
  163. </div>
  164. </div>
  165. <div class="followed_txt">
  166. <span>
  167. <b><a class="a-link" href="{FollowedURL}">{FollowedName}</a></b><br>
  168. {FollowedTitle}
  169. </span>
  170. </div>
  171. </div>
  172.  
  173. {/block:Followed}
  174.  
  175.  
  176.  
  177.  
  178. </div>
  179.  
  180. {/block:Following}
  181.  
  182.  
  183.  
  184. <footer>
  185. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  186. </footer>
  187.  
  188. </section>
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196. </div>
  197. </main>
  198.  
  199.  
  200. <!--Please do not alter the credit!-->
  201. <div id="athena_wrapper">
  202. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  203. </div>
  204. <!--/credit-->
  205.  
  206. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  207. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  208.  
  209.  
  210.  
  211. <!-- animsition.js -->
  212. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  213.  
  214.  
  215. <script>
  216. $(document).ready(function() {
  217.  
  218. $(".animsition").animsition({
  219. inClass: 'fade-in',
  220. outClass: 'fade-out',
  221. inDuration: 1500,
  222. outDuration: 800,
  223. linkElement: '.a-link',
  224. loading: true,
  225. loadingParentElement: 'body',
  226. loadingClass: 'animsition-loading',
  227. loadingInner: '',
  228. timeout: true,
  229. timeoutCountdown: 3000,
  230. onLoadEvent: true,
  231. browser: [ 'animation-duration', '-webkit-animation-duration'],
  232. overlay : false,
  233. overlayClass : 'animsition-overlay-slide',
  234. overlayParentElement : 'body',
  235. transition: function(url){ window.location.href = url; }
  236. });
  237.  
  238.  
  239. });
  240.  
  241. </script>
  242.  
  243.  
  244.  
  245. <!-- Uncomment this if you want to use alternating theme colours
  246.  
  247. <script>
  248.  
  249. (function($) {
  250.  
  251. var url, hour = new Date().getHours();
  252. if (hour > 18 || hour < 8) {
  253. jQuery('body').addClass('night-mode');
  254. } else {
  255. jQuery('body').addClass('day-mode');
  256. }
  257.  
  258. }(jQuery));
  259.  
  260.  
  261. </script>
  262.  
  263. -->
  264.  
  265. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  266.  
  267. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  268. jQuery.noConflict();
  269. (function($){
  270.  
  271. $(document).ready(function(){
  272.  
  273. $("a[title],img[title],[title]").style_my_tooltips({
  274.  
  275. tip_follows_cursor:true,
  276.  
  277. tip_delay_time:30,
  278.  
  279. tip_fade_speed:300,
  280.  
  281. attribute:"title"
  282.  
  283. });
  284.  
  285. });
  286.  
  287. })(jQuery);
  288. </script>
  289.  
  290. </body>
  291. </html>
Add Comment
Please, Sign In to add comment