diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte index e66d7ad..8c1edc3 100644 --- a/frontend/src/lib/components/education.svelte +++ b/frontend/src/lib/components/education.svelte @@ -23,7 +23,9 @@
diff --git a/frontend/src/lib/components/projects.svelte b/frontend/src/lib/components/projects.svelte index ec334b9..7d8949c 100644 --- a/frontend/src/lib/components/projects.svelte +++ b/frontend/src/lib/components/projects.svelte @@ -25,7 +25,9 @@
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 0e38c30..d306ce6 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -1,7 +1,11 @@ @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap'); +body, html { - overflow-x: hidden; + height: 100%; + background: var(--color-background); + margin: 0; + padding: 0; } :root { diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css index f9f1dcd..095f855 100644 --- a/frontend/src/lib/css/cv.css +++ b/frontend/src/lib/css/cv.css @@ -1,11 +1,3 @@ -body, -html { - height: 100%; - background: var(--color-background); - margin: 0; - padding: 0; -} - .container-cv { display: flex; flex-direction: row; @@ -98,6 +90,7 @@ html { .main { width: 100%; overflow-x: hidden; + overflow-y: hidden; z-index: 0; } diff --git a/frontend/src/lib/css/slide.css b/frontend/src/lib/css/slide.css index 547b7d6..d619816 100644 --- a/frontend/src/lib/css/slide.css +++ b/frontend/src/lib/css/slide.css @@ -24,9 +24,10 @@ max-width: 25rem; } - .slide-img-mobile { - height: 0; + .slide-img-mobile-container { + visibility: hidden; width: 0; + height: 0; } .slide-img-container{ @@ -66,6 +67,12 @@ margin-right: 2.25rem !important; box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important; } + + /* For button at the end of the container*/ + .slide-button-container { + display: flex; + justify-content: flex-end; + } } @media screen and (max-width: 1000px) @@ -81,17 +88,21 @@ border-radius: 0.4rem; box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); background-color: var(--color-background); - height: 36rem; + height: 70dvh; width: 90dvw; margin-left: 5dvw; z-index: 1; transition: all .3s ease 0s; } + .slide-img-mobile-container { + display: flex; + justify-content: center; + } + .slide-img-mobile { - max-height: 15rem; - min-width: 76dvw; max-width: 76dvw; + max-height: 30dvh; margin-top: 1.5rem; margin-bottom: 1.5rem; } @@ -123,13 +134,21 @@ .slide-text-container { margin: 1.5rem; - width: 75dvw; + position: relative; + width: 100%; } .slide-unactive { scale: 0.9; box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important; } + + /* For button at the end of the container*/ + .slide-button-container { + bottom: 0; + right: 0; + position: absolute; + } } .slide-subtitle-container { @@ -179,12 +198,6 @@ -webkit-line-clamp: 5; } -/* For button at the end of the container*/ -.slide-button-container { - display: flex; - justify-content: flex-end; -} - /* Every button are centered to the right side of the component */ .slide-button { padding-right: 1rem; diff --git a/frontend/src/lib/css/slideshow.css b/frontend/src/lib/css/slideshow.css index b81f4ea..9110e3a 100644 --- a/frontend/src/lib/css/slideshow.css +++ b/frontend/src/lib/css/slideshow.css @@ -2,6 +2,7 @@ display: flex; flex-direction: row; align-items: center; + position: relative; } @media screen and (min-width: 1000px)