diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css index 095f855..ee5fd01 100644 --- a/frontend/src/lib/css/cv.css +++ b/frontend/src/lib/css/cv.css @@ -50,6 +50,28 @@ color: var(--color-background); margin: 0.5rem; } + + .subsection { + margin-left: 3rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .end { + padding-bottom: 5rem; + } + + .footer { + position: relative; + display: flex; + height: 15rem; + background-color: var(--color-text); + z-index: 3; + justify-content: center; + align-items: center; + flex-direction: column; + } } @media screen and (max-width: 1000px) { @@ -72,6 +94,28 @@ color: var(--color-background); margin: 0.5rem; } + + .subsection { + margin-left: 5vw; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .end { + padding-bottom: 3rem; + } + + .footer { + position: relative; + display: flex; + height: 20rem; + background-color: var(--color-text); + z-index: 3; + justify-content: center; + align-items: center; + flex-direction: column; + } } .profile-picture-container { @@ -108,28 +152,6 @@ h2 { font-size: 1.5rem; } -.subsection { - margin-left: 3rem; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.end { - padding-bottom: 5rem; -} - -.footer { - position: relative; - display: flex; - height: 30vh; - background-color: var(--color-text); - z-index: 3; - justify-content: center; - align-items: center; - flex-direction: column; -} - .footer svg { margin: 0; } \ No newline at end of file diff --git a/frontend/src/lib/css/flag.css b/frontend/src/lib/css/flag.css index b5c7076..996e7b1 100644 --- a/frontend/src/lib/css/flag.css +++ b/frontend/src/lib/css/flag.css @@ -1,15 +1,38 @@ -.flag-main { - display: flex; - border-radius: 0.4rem; - box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); - background-color: var(--color-background); - margin-left: 2.5rem; - margin-right: 2.5rem; - padding: 1rem; - z-index: 1; - transition: all .3s ease 0s; - justify-content: center; - align-items: center; +@media screen and (min-width: 1000px) { + .flag-main { + display: flex; + border-radius: 0.4rem; + box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); + background-color: var(--color-background); + margin-left: 2.5rem; + margin-right: 2.5rem; + padding: 1rem; + z-index: 1; + transition: all .3s ease 0s; + justify-content: center; + align-items: center; + } +} + +@media screen and (max-width: 1000px) { + .flag-main { + display: flex; + border-radius: 0.4rem; + box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); + background-color: var(--color-background); + margin-bottom: 1rem; + margin-top: 1rem; + padding: 1rem; + transition: all .3s ease 0s; + justify-content: center; + align-items: center; + width: 100%; + } + + .flag-container { + margin-left: 10vw !important; + margin-right: 10vw; + } } .flag-img { diff --git a/frontend/src/lib/css/slide.css b/frontend/src/lib/css/slide.css index 3cb047a..e7444e4 100644 --- a/frontend/src/lib/css/slide.css +++ b/frontend/src/lib/css/slide.css @@ -93,7 +93,7 @@ border-radius: 0.4rem; box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); background-color: var(--color-background); - height: 60dvh; + min-height: 35rem; width: 90dvw; margin-left: 5dvw; z-index: 1; @@ -103,7 +103,7 @@ .slide-img-mobile-container { display: flex; justify-content: center; - height: 30dvh; + height: 17.25rem; } .slide-img-mobile { @@ -124,7 +124,7 @@ color: var(--color-text); font-family: 'Gabarito', sans-serif; font-weight: 600; - font-size: 3vmax; + font-size: 1.8rem; margin-bottom: 0; } @@ -133,7 +133,7 @@ color: var(--color-text); font-family: 'Gabarito', sans-serif; font-weight: 500; - font-size: 1.75vmax; + font-size: 1.1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; width: 100%; @@ -158,7 +158,7 @@ } .slide-text { - font-size: 1.5vmax; + font-size: 1rem; } } diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 952b3d8..935b929 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -143,7 +143,7 @@ {/each} -
+
{#each cv.skills.languages as langdata} {/each}