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`
-
+
+
+
-
`;
}
@@ -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%;
+ }
+
`;
}
}