diff --git a/index.html b/index.html index 2d5ea60e..0280445d 100644 --- a/index.html +++ b/index.html @@ -1,134 +1,149 @@ - + - - - - - - - - - - Drift Playground - - - - - -
- - -
-
-

Drift Demo

-

This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from - imgix. Move your mouse over the image (or touch it) to see it in action.

-

This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can - learn more and download it here.

-

(Psst… try making your browser window smaller!)

-
- - - imgix - -
-
- - - - - + + + + + + + + + + + Drift Playground + + + + + +
+ + +
+
+

Drift Demo

+

+ This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from + imgix. Move your mouse over the image (or touch it) to see it in action. +

+

+ This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You + can learn more and download it here. +

+

(Psst… try making your browser window smaller!)

+
+ + + imgix + +
+
+ + + + diff --git a/package.json b/package.json index b1865a06..c4e99529 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "Easily add \"zoom on hover\" functionality to your site's images. Lightweight, no-dependency JavaScript.", "contributors": [ "Frederick Fogerty (https://github.com/frederickfogerty)", - "Sherwin Heydarbeygi (https://github.com/sherwinski)" + "Sherwin Heydarbeygi (https://github.com/sherwinski)", + "Luis Ball (https://github.com/luqven)" ], "main": "lib/Drift.js", "module": "es/Drift.js", diff --git a/src/js/injectBaseStylesheet.js b/src/js/injectBaseStylesheet.js index 63fee620..7d8cdd11 100644 --- a/src/js/injectBaseStylesheet.js +++ b/src/js/injectBaseStylesheet.js @@ -55,13 +55,14 @@ export default function injectBaseStylesheet() { return; } + // create the injected styles const styleEl = document.createElement("style"); - styleEl.type = "text/css"; styleEl.classList = "drift-base-styles"; - styleEl.textContent = RULES; - const head = document.head; + // prepend them to the document head's first child + const head = document.head; const allHeadElements = head.getElementsByTagName("*"); - allHeadElements.innerHTML = styleEl + allHeadElements.innerHTML; + const firstItem = allHeadElements.item(0); + firstItem.outerHTML = styleEl.outerHTML + firstItem.outerHTML; }