Merge pull request #337 from davidjerleke/feature/v7-docs

v7 docs

README.md

@@ -1,7 +1,7 @@
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="160" height="160" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
   </p>
 
@@ -64,6 +64,11 @@
     <a href="https://www.embla-carousel.com/get-started/react/">
       <img src="https://www.embla-carousel.com/react-logo.svg" width="45" height="45" />
     </a>
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/vue/">
+      <img src="https://www.embla-carousel.com/vue-logo.svg" width="45" 
+      height="45" />
+    </a>
   </p>
 </div>
 

packages/embla-carousel-auto-height/README.md

@@ -1,7 +1,7 @@
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="160" height="160" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
   </p>
 

packages/embla-carousel-autoplay/README.md

@@ -1,7 +1,7 @@
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="160" height="160" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
   </p>
 

packages/embla-carousel-class-names/README.md

@@ -1,7 +1,7 @@
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="160" height="160" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
   </p>
 

packages/embla-carousel-docs/README.md

@@ -1,7 +1,7 @@
 <br />
 <div align="center">
   <p align="center">
-    <a href="https://www.embla-carousel.com/"><img width="70" height="70" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://www.embla-carousel.com/"><img width="160" height="160" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
     </a>
   </p>
 

packages/embla-carousel-docs/gatsby-browser.js

@@ -1,3 +1,5 @@
+import 'inter-ui/inter.css'
+
 export const onClientEntry = async () => {
   if (typeof window.IntersectionObserver === 'undefined') {
     await import('intersection-observer')

packages/embla-carousel-docs/gatsby-ssr.js

@@ -25,7 +25,7 @@ export const onRenderBody = ({
     <meta
       key="theme-color"
       name="theme-color"
-      content={THEME_COLORS[THEME_KEYS.LIGHT].backgroundSite}
+      content={THEME_COLORS[THEME_KEYS.LIGHT].BACKGROUND_SITE}
     />,
     <style
       key="theme-style"
@@ -40,8 +40,8 @@ export const onRenderBody = ({
           (function() {            
             var selectedTheme;
             var themeColors = {
-              light: '${THEME_COLORS[THEME_KEYS.LIGHT].backgroundSite}',
-              dark: '${THEME_COLORS[THEME_KEYS.DARK].backgroundSite}'
+              light: '${THEME_COLORS[THEME_KEYS.LIGHT].BACKGROUND_SITE}',
+              dark: '${THEME_COLORS[THEME_KEYS.DARK].BACKGROUND_SITE}'
             };
             
             try {

packages/embla-carousel-docs/package.json

@@ -45,6 +45,7 @@
     "gatsby-remark-autolink-headers": "^5.6.0",
     "gatsby-remark-prismjs": "^6.6.0",
     "gatsby-source-filesystem": "^4.6.0",
+    "inter-ui": "^3.19.3",
     "intersection-observer": "^0.12.0",
     "lodash": "^4.17.21",
     "prismjs": "^1.26.0",