diff --git a/src/components/base/AppFooter/style.scss b/src/components/base/AppFooter/style.scss index 0cbc78a..293ecb9 100644 --- a/src/components/base/AppFooter/style.scss +++ b/src/components/base/AppFooter/style.scss @@ -1,6 +1,5 @@ .app-footer { padding: 3em 0; - margin-top: auto; a { align-items: center; color: #000; @@ -9,7 +8,8 @@ justify-content: center; text-decoration: none; flex-direction: column; - p { margin: 0; } + width: max-content; + margin: 0 auto; @media (max-width: 640px) { font-size: 1em; } diff --git a/src/components/base/AppLanguage/style.scss b/src/components/base/AppLanguage/style.scss index d392356..ea393eb 100644 --- a/src/components/base/AppLanguage/style.scss +++ b/src/components/base/AppLanguage/style.scss @@ -1,22 +1,33 @@ .language { - margin-bottom: 2rem; + padding: 2rem 0; button { flex: 1; - margin: 10px; + margin: 0.5rem; cursor: pointer; border: 0; background: #eee; - padding: 0.5rem; + padding: 0.2rem; border-radius: 5px; - box-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 2px 5px rgba(0, 0, 0, 0.2); font-size: 0; - &.actived { + text-decoration: none; + font-size: 0; + display: inline-flex; + border: 2px solid transparent; + transition: .3s all; + overflow: hidden; + + &.actived, + &:hover { color: #fff; - background: #2c3e50; + background: #fff; + border: 2px solid #2c3e50; + box-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 2px 5px rgba(0, 0, 0, 0.2); + transform: scale(1.2); } } + img { - width: 20px; + width: 30px; pointer-events: none; } } diff --git a/src/components/base/AppNavigation/style.scss b/src/components/base/AppNavigation/style.scss index 1e64f02..11ba451 100644 --- a/src/components/base/AppNavigation/style.scss +++ b/src/components/base/AppNavigation/style.scss @@ -8,10 +8,11 @@ @media (max-width: 640px) { flex-direction: column; } + a { padding: 1rem 1.5rem 1rem 1rem; margin: 0.5rem; - background: #eee; + border: 2px solid #eee; color: #2c3e50; border-radius: 10px; text-decoration: none; @@ -19,14 +20,24 @@ display: flex; justify-content: center; align-items: center; + font-weight: bold; + transition: .3s all; + box-shadow: 0 10px 10px rgba(0, 0, 0, .06), 0 0 0 2px #fff; + @media (max-width: 640px) { width: calc(100% - 60px); } + &.active { - background: #3ea3bf; - color: #fff; - svg { fill: #fff; } + background: #fff; + border: 2px solid #3ea3bf; + color: #3ea3bf; + + svg { + fill: #3ea3bf; + } } + svg { width: 25px; margin-right: 0.5rem; diff --git a/src/views/About/style.scss b/src/views/About/style.scss index c686d33..df01de7 100644 --- a/src/views/About/style.scss +++ b/src/views/About/style.scss @@ -1,3 +1,6 @@ .about { - padding: 2rem; + margin-top: 2rem; + padding: 4rem; + border-top: 1px solid #eee; + box-shadow: 0 15px 25px rgba(0, 0, 0, .06), 0 -5px 15px rgba(0, 0, 0, .02); } diff --git a/src/views/Home/style.scss b/src/views/Home/style.scss index e01060b..e18f247 100644 --- a/src/views/Home/style.scss +++ b/src/views/Home/style.scss @@ -1,27 +1,50 @@ @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); -.slide-title, h3 { +.example { + padding-bottom: 6rem; + padding-top: 2rem; + box-shadow: 0 15px 25px rgba(0, 0, 0, .06); + + &:first-of-type { + margin-top: 2rem; + padding-top: 0; + border-top: 1px solid #eee; + box-shadow: 0 15px 25px rgba(0, 0, 0, .06), 0 -5px 15px rgba(0, 0, 0, .02); + } +} + +.slide-title, +h3 { align-items: center; display: flex; justify-content: center; -} -.slide-title svg, h3 svg { - margin-right: .5em; + svg { + margin-right: .5em; + } } .slide-title { - border-top: 3px dashed #ccc; + padding: 2rem 0; color: #3ea3bf; font-size: 2em; - margin: 2em 0; - padding-top: 2em; -} -.slide-title svg { fill: #3ea3bf; } -.favela h1 { font-family: 'Great Vibes', cursive; } -.favela img { filter: saturate(2) brightness(1.2); } + @media (max-width: 640px) { + .slide-title { + font-size: 1em; + } + } -@media (max-width: 640px) { - .slide-title { font-size: 1em; } + svg { + fill: #3ea3bf; + } } +.favela { + h1 { + font-family: 'Great Vibes', cursive; + } + + img { + filter: saturate(2) brightness(1.2); + } +}