Update styles

README.md

@@ -36,6 +36,16 @@ In your HTML/JSX markup:
 </div>
 ```
 
+If you're using React in TypeScript context, you need to extends the JSX `IntrinsicElements` interface so it knows `social-links` element exists.
+
+```typescript
+declare namespace JSX {
+	interface IntrinsicElements {
+		'social-links': any;
+	}
+}
+```
+
 Currently it includes the following:
 
 <div>

data/README-start.md

@@ -36,4 +36,14 @@ In your HTML/JSX markup:
 </div>
 ```
 
+If you're using React in TypeScript context, you need to extends the JSX `IntrinsicElements` interface so it knows `social-links` element exists.
+
+```typescript
+declare namespace JSX {
+	interface IntrinsicElements {
+		'social-links': any;
+	}
+}
+```
+
 Currently it includes the following:

data/style.css

@@ -2,14 +2,14 @@ ul {
 	display: flex;
 	flex-flow: row wrap;
 	align-items: center;
-	justify-content: space-between;
+	justify-content: center;
 	padding: 0;
 	margin: 0;
 	list-style: none outside none;
 }
 
 li {
-	padding: 0 0.325rem;
+	padding: 0.5rem 0.325rem;
 }
 
 li a,
@@ -66,7 +66,7 @@ li svg {
 }
 
 .svg-youtube {
-	width: 3rem;
+	width: 2rem;
 }
 
 .svg-logo {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "scriptex-socials",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "A native web component: links to various social media with SVG icons support",
 	"scripts": {
 		"svgo": "svgo -f static/images/svg --config=svgo.yml",

src/index.ts

@@ -100,14 +100,14 @@ class Socials extends HTMLElement {
 	display: flex;
 	flex-flow: row wrap;
 	align-items: center;
-	justify-content: space-between;
+	justify-content: center;
 	padding: 0;
 	margin: 0;
 	list-style: none outside none;
 }
 
 li {
-	padding: 0 0.325rem;
+	padding: 0.5rem 0.325rem;
 }
 
 li a,
@@ -164,7 +164,7 @@ li svg {
 }
 
 .svg-youtube {
-	width: 3rem;
+	width: 2rem;
 }
 
 .svg-logo {