Avoid supporter spritesheet ending up as external stylesheet in body.…

… Caused render flush that resulted in confusing layout shift on reload
mochajs · Jun 10, 2020 · be128cb · be128cb
1 parent 9aaed85
commit be128cb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 30 deletions.
diff --git a/docs/_includes/default.liquid b/docs/_includes/default.liquid
@@ -6,6 +6,7 @@
     <title>{{ title }}</title>
     <link rel="stylesheet" href="/css/normalize.css" />
     <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/supporters.css" />
     <link rel="stylesheet" href="/css/prism.css" />
     <link rel="icon" href="favicon.ico" />
 

diff --git a/docs/_includes/supporters.md b/docs/_includes/supporters.md
@@ -2,36 +2,13 @@
 
 Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
 
-<style>
-  .sponsor {
-    -sprite-selector-for-group: sponsors;
-    -sprite-location: url(/images/sprite-sponsors.png?pngquant);
-    -sprite-image-format: png;
-    height: 64px;
-  }
-  .backer {
-    -sprite-selector-for-group: backers;
-    -sprite-location: url(/images/sprite-backers.png?pngquant);
-    -sprite-image-format: png;
-    width: 32px;
-    height: 32px;
-  }
-
-</style>
-
 <ul class="image-list" id="sponsors">
 {%- for supporter in supporters.sponsors -%}
   <li>
     {%- if supporter.website -%}
     <a href="{{ supporter.website }}" target="_blank" rel="noopener">
     {%- endif -%}
-      <style>
-        .sponsor-{{ forloop.index }} {
-          width: {{ supporter.dimensions.width }}px;
-          background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=sponsors);
-        }
-      </style>
-      <div class="sponsor sponsor-{{ forloop.index }}" title="{{ supporter.name }}"></div>
+      <div class="sponsor" title="{{ supporter.name }}" style="width: {{ supporter.dimensions.width }}px; background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=sponsors)"></div>
     {%- if supporter.website -%}
     </a>
     {%- endif -%}
@@ -49,12 +26,7 @@ Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support
     {%- if supporter.website -%}
     <a href="{{ supporter.website }}" target="_blank" rel="noopener">
     {%- endif -%}
-      <style>
-        .backer-{{ forloop.index }} {
-          background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=backers);
-        }
-      </style>
-      <div class="backer backer-{{ forloop.index }}" title="{{ supporter.name }}"></div>
+      <div class="backer backer-{{ forloop.index }}" title="{{ supporter.name }}" style="background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=backers)"></div>
     {%- if supporter.website -%}
     </a>
     {%- endif -%}

diff --git a/docs/css/supporters.css b/docs/css/supporters.css
@@ -0,0 +1,13 @@
+.sponsor {
+  -sprite-selector-for-group: sponsors;
+  -sprite-location: url(/images/sprite-sponsors.png?pngquant);
+  -sprite-image-format: png;
+  height: 64px;
+}
+.backer {
+  -sprite-selector-for-group: backers;
+  -sprite-location: url(/images/sprite-backers.png?pngquant);
+  -sprite-image-format: png;
+  width: 32px;
+  height: 32px;
+}