From f0d2abb277e16d73c14638f78eadb0241248e800 Mon Sep 17 00:00:00 2001
From: Norman Rusch <webmaster@grind-it.de>
Date: Tue, 21 Sep 2021 10:56:51 +0200
Subject: [PATCH] Make styles available in npm package under /styles

---
 .gitignore | 11 ++++++-----
 Makefile   |  8 +++++---
 README.md  |  4 ++--
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0d57c7fa..5b15e320 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
-.cache/
-.parcel-cache/
-coverage/
-node_modules/
-public/
+/.cache/
+/.parcel-cache/
+/coverage/
+/node_modules/
+/public/
+/styles/
diff --git a/Makefile b/Makefile
index 4d73ae58..95a13a4f 100644
--- a/Makefile
+++ b/Makefile
@@ -27,24 +27,26 @@ build: build_clean build_styles build_scripts
 
 build_clean:
 	rm -rf dist/ && mkdir dist/
+	rm -rf styles/ && mkdir styles/
 
 
 build_styles:
 	NODE_ENV=production ./node_modules/.bin/sass \
 		./src/styles/caroucssel.css.scss \
-		./dist/caroucssel.css \
+		./dist/styles/caroucssel.css \
 		--style expanded \
 		--no-source-map \
 		--trace
 
 	NODE_ENV=production ./node_modules/.bin/sass \
 		./src/styles/caroucssel.css.scss \
-		./dist/caroucssel.min.css \
+		./dist/styles/caroucssel.min.css \
 		--style compressed \
 		--no-source-map \
 		--trace
 
-	cp ./src/styles/caroucssel.scss ./dist/caroucssel.scss
+	cp ./src/styles/caroucssel.scss ./dist/styles/caroucssel.scss
+	cp -r ./dist/styles/ ./styles
 
 
 build_scripts:
diff --git a/README.md b/README.md
index 22702feb..e41e7762 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ yarn add caroucssel
 or in the browser
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/caroucssel@latest/dist/caroucssel.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/caroucssel@latest/dist/styles/caroucssel.min.css" />
 <script src="https://unpkg.com/caroucssel@latest"></script>
 ```
 
@@ -57,7 +57,7 @@ The prebuild CSS-file only contains selectors for basic usage. It's recommended
 The SCSS gives the freedom to choose your own selectors, which should have a carousel feature. It also allows you to easily customize the behavior depending on media queries.
 
 ```scss
-@import '~caroucssel/dist/caroucssel';
+@import '~caroucssel/styles/caroucssel';
 
 .my-carousel {
     @include caroucssel();