diff --git a/src/stories/Carousel.stories.tsx b/src/stories/Carousel.stories.tsx
index 66ccba6..4aab79a 100644
--- a/src/stories/Carousel.stories.tsx
+++ b/src/stories/Carousel.stories.tsx
@@ -15,10 +15,10 @@ Template.args = {
@@ -28,10 +28,10 @@ Template.args = {
key={2}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
2
@@ -40,10 +40,10 @@ Template.args = {
key={3}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
3
@@ -52,10 +52,10 @@ Template.args = {
key={4}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
4
@@ -64,10 +64,10 @@ Template.args = {
key={5}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
5
@@ -77,10 +77,10 @@ Template.args = {
key={6}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
6
@@ -90,10 +90,10 @@ Template.args = {
key={7}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
7
@@ -102,10 +102,10 @@ Template.args = {
key={9}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
8
@@ -114,10 +114,10 @@ Template.args = {
key={10}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
9
@@ -126,10 +126,10 @@ Template.args = {
key={10}
style={{
minHeight: '100px',
- minWidth: '394px',
+ minWidth: '500px',
color: 'white',
textAlign: 'center',
- border: '1px red solid',
+ border: '1px solid red',
}}
>
10
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7adec92..a7d744b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3,7 +3,17 @@ import fonts from './fonts';
import { device } from './breakpoints';
import { rem } from '../constants';
import spacings from './spacings';
+
+// Just for Webpack
import './main.css';
+import './fonts/Inter-Bold.woff';
+import './fonts/Inter-Bold.woff2';
+import './fonts/Inter-Regular.woff';
+import './fonts/Inter-Regular.woff2';
+import './fonts/Lustra Text Regular.woff';
+import './fonts/Lustra Text Regular.woff2';
+import './fonts/GT-America-Regular.woff';
+import './fonts/GT-America-Regular.woff2';
const theme = {
rem: rem.toString().concat('px'),
diff --git a/src/styles/main.css b/src/styles/main.css
index f370f1e..54f4e06 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -48,15 +48,15 @@ input::-webkit-inner-spin-button {
background-color: rgba(255, 255, 255, 0.2);
}
-.lighter-20 {
+.lighter-40 {
background-color: rgba(255, 255, 255, 0.4);
}
-.lighter-20 {
+.lighter-60 {
background-color: rgba(255, 255, 255, 0.6);
}
-.lighter-20 {
+.lighter-80 {
background-color: rgba(255, 255, 255, 0.8);
}
@@ -78,8 +78,6 @@ input::-webkit-inner-spin-button {
url('./fonts/Inter-Bold.woff') format('woff');
}
-/* GT America */
-
@font-face {
font-family: 'GT America';
font-style: normal;
diff --git a/tsconfig.json b/tsconfig.json
index 13ee5aa..a942eb0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
- "strict": true
+ "strict": true,
+ "sourceMap": true
},
"include": ["src"],
"exclude": ["node_modules", "dist", "node_modules", "src/**/*.test.tsx", "src/**/*.stories.tsx"]
diff --git a/webpack.config.js b/webpack.config.js
index 02c333c..a591ab2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,11 +10,6 @@ module.exports = {
use: 'ts-loader',
exclude: /node_modules/,
},
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader'],
- sideEffects: true,
- },
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
@@ -27,13 +22,23 @@ module.exports = {
},
],
},
+ {
+ test: /\.css/i,
+ use: {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'styles/',
+ },
+ },
+ },
],
},
resolve: {
- extensions: ['.tsx', '.ts', '.js', 'css'],
+ extensions: ['.tsx', '.ts', '.js', '.css', '.woff', '.woff2'],
},
output: {
- filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
+ filename: '[name].js',
},
};