diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index 9cd8713..f158aaa 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -1,6 +1,11 @@ /*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Monsterrat"); +::selection { + color: #fff; + background-color: aqua; +} + /*=============== VARIABLES CSS ===============*/ :root { --header-height: 3.5rem; @@ -17,7 +22,6 @@ --normal-font-size: .938rem; --smaller-font-size: .75rem; } - /* Responsive typography */ @media screen and (min-width: 1024px) { :root { diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js index 9adf8b3..612be78 100644 --- a/src/components/Dropdown/Dropdown.js +++ b/src/components/Dropdown/Dropdown.js @@ -73,12 +73,13 @@ const DropdownOptions = styled.ul` /* top: 100%; */ min-width: 100%; display: flex; - border: 1px solid #272639; + border: 2px solid #555; flex-direction: column; justify-content: center; align-items: center; + margin-top: 5px; padding: 0.5rem 0; - border-radius: 0.4rem; + border-radius: 5px; `; const DropdownOption = styled.li` white-space: nowrap; diff --git a/src/components/EpisodeLinks/EpisodeLinksList.js b/src/components/EpisodeLinks/EpisodeLinksList.js index 34d825a..75f3175 100644 --- a/src/components/EpisodeLinks/EpisodeLinksList.js +++ b/src/components/EpisodeLinks/EpisodeLinksList.js @@ -77,7 +77,7 @@ const EpisodeLinksList = ({ episodeArray, episodeNum }) => { const EpisodesWrapper = styled.div` margin-top: 1rem; - border: 1px solid #272639; + border: 1px solid #444; border-radius: 0.4rem; .header { display: flex; @@ -95,7 +95,6 @@ const EpisodesWrapper = styled.div` color: white; font-family: 'Gilroy-Medium', sans-serif; } - box-shadow: 10px 10px 0px rgba(20, 20, 25, 1); `; const Episodes = styled.div` diff --git a/src/components/Home/AnimeCards.js b/src/components/Home/AnimeCards.js index 8537fdc..6946ea6 100644 --- a/src/components/Home/AnimeCards.js +++ b/src/components/Home/AnimeCards.js @@ -92,6 +92,12 @@ const Wrapper = styled.div` border-radius: 0.5rem; margin-bottom: 0.3rem; object-fit: cover; + transition: 0.2s; + + :hover { + transform: scale(0.95); + } + @media screen and (max-width: 600px) { width: 120px; height: 180px; @@ -107,6 +113,7 @@ const Wrapper = styled.div` font-size: 1rem; font-family: "Gilroy-Medium", sans-serif; } + `; export default AnimeCards; diff --git a/src/components/Home/Carousel.js b/src/components/Home/Carousel.js index d5508ff..7c724e3 100644 --- a/src/components/Home/Carousel.js +++ b/src/components/Home/Carousel.js @@ -177,19 +177,19 @@ const Content = styled.div` const Button = styled(Link)` color: #ffffff; - background-color: rgb(24, 26, 27); + background-color: rgba( 15, 17, 17, 1); font-family: 'Gilroy-Bold', sans-serif; text-decoration: none; outline: none; border: none; padding: 0.75rem 1.3rem 0.75rem 1.3rem; - border-radius: 0.4rem; + border-radius: 0.5rem; cursor: pointer; font-size: 0.9rem; - transition: 0.5s; + transition: 0.3s; :hover { - transform: scale(1.1); + transform: scale(1.08); } @media screen and (max-width: 600px) { diff --git a/src/pages/AnimeDetails.js b/src/pages/AnimeDetails.js index 179ff92..932cdc3 100644 --- a/src/pages/AnimeDetails.js +++ b/src/pages/AnimeDetails.js @@ -291,7 +291,7 @@ const Button = styled(Link)` :hover { transform: scale(1.05); - background-color: rgb(255 0 79); + background-color: rgb(155 0 59); color: rgb(255 255 255); } diff --git a/src/pages/Home.js b/src/pages/Home.js index 8153ccf..4c1acbf 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -114,11 +114,21 @@ function Home({ changeMetaArr }) { } const Links = styled(Link)` - color: #ffffff; + color: rgba(158,162,164,1); + background: rgb(19, 21, 22); + padding: 0.5rem; + border-radius: 5px; + border: 0.5px solid rgba(48,52,54,1); font-size: 1.1rem; font-family: 'Gilroy-Medium', sans-serif; + text-decoration: none; + transition: 0.2s; + + :hover { + transform: scale(1.08); + } @media screen and (max-width: 600px) { - color: #ffffff; + color: #ffffff; font-size: 1rem; font-family: 'Gilroy-Medium', sans-serif; }