diff --git a/img/thumbnails/animal.jpg b/img/thumbnails/animal.jpg
new file mode 100644
index 0000000..92bd517
Binary files /dev/null and b/img/thumbnails/animal.jpg differ
diff --git a/img/thumbnails/monalisa.jpg b/img/thumbnails/monalisa.jpg
new file mode 100644
index 0000000..f736aa0
Binary files /dev/null and b/img/thumbnails/monalisa.jpg differ
diff --git a/img/thumbnails/stuffhappens.jpg b/img/thumbnails/stuffhappens.jpg
new file mode 100644
index 0000000..94f7ac9
Binary files /dev/null and b/img/thumbnails/stuffhappens.jpg differ
diff --git a/src/index.html b/src/index.html
index 5bc7d2e..1d66ec5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -147,6 +147,53 @@
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0fed94f..befe207 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -17,32 +17,35 @@ body > main {
font-size: 5rem;
color: $secondary;
cursor: pointer;
- transition: transform 1s ease-out;
+ transition: transform 2s ease-out;
&.inactive {
color: gray;
cursor: default;
- transition-duration: 2s;
+ transition-duration: 1s;
transition-timing-function: ease-in;
left {
- transform: rotate(0.5turn);
+ transform: rotateY(0.5turn);
}
right {
- transform: rotate(-0.5turn);
+ transform: rotateY(-0.5turn);
}
}
}
#slideshow-container {
+ border: 1rem solid $secondary;
+ border-radius: 5px;
position: relative;
width: 80%;
- height: 100vh;
+ height: 80vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
+
#inner-slideshow {
width: 100%;
height: 100%;
@@ -54,17 +57,32 @@ body > main {
transition: transform 500ms ease-out;
figure {
- min-width: 100%;
- position: relative;
$color: var(--color);
- img {
+ min-width: 100%;
+ position: relative;
+
+ &:after {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(to top, $color, rgba(1, 1, 1, 0));
+ background-blend-mode: soft-light;
+ opacity: 70%;
+ z-index: 0;
+ }
+
+ img, video {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
object-position: center;
object-fit: cover;
+ position: relative;
}
figcaption {
@@ -73,15 +91,32 @@ body > main {
left: 0;
margin: 2rem;
+
header {
font-weight: 800;
- font-size: 1.5rem;
+ font-size: 2rem;
font-family: 'Bungee Inline', serif;
margin-bottom: 2rem;
- background-color: $color;
+ //background-color: $color;
width: fit-content;
color: white;
padding: 0.5rem;
+ z-index: 12;
+ position: relative;
+ text-shadow: 10px 10px 5px transparentize(white, 0.7);
+
+ &:after {
+ background-color: $color;
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ padding: 0 10rem 0 0;
+ transform: translateX(-2rem) skewX(-20deg);
+ }
}
p {
@@ -104,6 +139,14 @@ body > main {
left: 0;
z-index: -1;
}
+
+ &:after {
+ content: 'Read more';
+ color: black;
+ font-weight: 800;
+ background-color: $color;
+ cursor: pointer;
+ }
}
}
}