Skip to content

Commit

Permalink
VAT-carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
dragandimic committed Jun 10, 2024
1 parent 62a55d5 commit eb22c64
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 9 deletions.
65 changes: 59 additions & 6 deletions blocks/carousel/carousel.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.section.carousel-container {
padding: 0;
}

.carousel .carousel-slides-container {
position: relative;
}
Expand Down Expand Up @@ -29,7 +33,7 @@
justify-content: center;
position: relative;
width: 100%;
min-height: min(40rem, calc(100svh - var(--nav-height)));
min-height: 1015px;
}

.carousel .carousel-slide:has(.carousel-slide-content[data-align="center"]) {
Expand All @@ -56,11 +60,44 @@
padding: 1rem;
margin: 1.5rem 3rem;
color: white;
background-color: rgba(0 0 0 / 50%);
background-color: none;
position: relative;
width: var(--slide-content-width, auto);
}

.carousel .carousel-slide .carousel-slide-content .button {
display: flex;
max-width: 260px;
align-items: center;
max-height: 60px;
position: relative;
border: 0;
height: 6rem;
width: 100%;
font-family: Calibre, Helvetica, Tahoma, Arial, sans-serif;
cursor: pointer;
appearance: none;
border-radius: .4rem;
transition: all .2s ease-in-out;
background: #80ba27;
color: #fff;
letter-spacing: -.02rem;
box-shadow: 0 .2rem .4rem 0 rgba(0 0 0 / 5%);
font-size: 18px;
font-weight: normal;
}

.carousel .carousel-slide-image::after {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
top:0;
left: 0;
background-color: rgba(0 0 0 /30%);
content: " ";
}

.carousel .carousel-slide-indicators {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -103,7 +140,9 @@
right: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
gap: 20px;
margin-right: 5rem;
z-index: 1;
}

Expand All @@ -115,12 +154,12 @@
width: 2rem;
height: 2rem;
position: relative;
background-color: rgba(0 0 0 / 25%);
background-color: transparent;
}

.carousel .carousel-navigation-buttons button:hover,
.carousel .carousel-navigation-buttons button:focus-visible {
background-color: rgba(0 0 0 / 80%);
background-color: transparent;
}

.carousel .carousel-navigation-buttons button::after {
Expand Down Expand Up @@ -167,4 +206,18 @@
.carousel .carousel-slide .carousel-slide-content[data-align="justify"] {
--slide-content-width: auto;
}
}
}


.carousel-container .carousel-wrapper {
max-width: 100%;
height: calc(100vh - 64px);
min-height: calc(100vh - 64px);
}

@media (width >= 900px) {
.carousel-container .carousel-wrapper {
max-width: 100%;
min-height: 1015px;
}
}
Binary file modified favicon.ico
Binary file not shown.
13 changes: 13 additions & 0 deletions icons/arrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@

:root {
/* colors */
--link-color: #035fe6;
--link-hover-color: #136ff6;
--link-color: #80ba27;
--link-hover-color: #000;
--background-color: white;
--light-color: #eee;
--dark-color: #ccc;
Expand Down Expand Up @@ -167,7 +167,7 @@ a.button:hover,
a.button:focus,
button:hover,
button:focus {
background-color: var(--link-hover-color);
background-color: var(--link-color);
cursor: pointer;
}

Expand Down

0 comments on commit eb22c64

Please sign in to comment.