From 7cef893930affa5a5b23f949f7372d57502aa083 Mon Sep 17 00:00:00 2001
From: a <a@a>
Date: Wed, 9 Sep 2020 10:48:41 +0200
Subject: [PATCH] zmiany

---
 src/base.scss  |  6 +++---
 src/index.scss |  2 +-
 src/index.ts   | 28 +++++++++++++++++-----------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/base.scss b/src/base.scss
index 31e21b1..d9a2f2b 100644
--- a/src/base.scss
+++ b/src/base.scss
@@ -44,7 +44,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&>a {
+	a {
 		padding: 0px 2px;
 		&:link,&:visited {
 			color: var(--text-opposite-4);
@@ -62,7 +62,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&>img {
+	img {
 		max-width: 100%;
 		max-height: 100%;
 		padding: 1em;
@@ -76,7 +76,7 @@ nav {
 	align-items: center;
 	color: var(--text-opposite-1);
 	background-color: var(--green-1);
-	&>a {
+	a {
 		border-left: 1px solid var(--text-color-1);
 		&:first-child {
 			border-left: 0px;
diff --git a/src/index.scss b/src/index.scss
index 98287fc..0d23490 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,6 @@
 .gallery {
 	margin: 1em;
-	height: 30em;
 	display: flex;
 	justify-content: center;
+	height: 20rem;
 }
diff --git a/src/index.ts b/src/index.ts
index 483270f..ad14da9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,9 +33,10 @@ class Carousel extends LitElement {
 
 	render() {
 		return html`
-			<button class="left">&lt</button>
+			<button class="left">${'<'}</button>
+			<button class="right">${'>'}</button>
+
 			<img src=${this.currentItem.img}></img>
-			<button class="right">&gt</button>
 		`;
 	}
 
@@ -45,13 +46,6 @@ class Carousel extends LitElement {
 				max-width: 100%;
 				height: 100%;
 				height: 100%;
-				display: flex;
-				align-items: center;
-			}
-
-			button {
-				z-index: 1;
-				margin: -6em;
 			}
 
 			img {
@@ -60,15 +54,27 @@ class Carousel extends LitElement {
 				transition: 0.2s;
 			}
 
-			img:hover {
-				transform: scale(1.1);
+			img:hover, button:hover~img {
+				transform: scale(1.05);
 			}
 
 			button {
 				border: 1px solid var(--background-opposite-2);
 				border-radius: 50%;
 				background-color: var(--background-primary-2);
+				cursor: pointer;
+				position: relative;
+				top:-50%;
+				z-index: 1;
 			}
+
+			.left {
+				left: 20%;
+			}
+			.right {
+				left: 80%;
+			}
+			
 		`;
 	}
 }