diff --git a/src/styles/FooterStyles.js b/src/styles/FooterStyles.js index e046626..2d3940e 100644 --- a/src/styles/FooterStyles.js +++ b/src/styles/FooterStyles.js @@ -1,10 +1,25 @@ +import sizes from "./sizes"; + export default { footer: { display: "flex", justifyContent: "space-around", marginTop: "3rem", padding: "4rem", + + [sizes.down("md")]: { + marginTop: "2rem", + padding: "2rem", + }, + + [sizes.down("sm")]: { + marginTop: "1rem", + padding: "1.5rem", + flexDirection: "column", + alignItems: "center", + }, }, + btn: { padding: "1.5rem 4rem", fontFamily: "inherit", @@ -14,12 +29,31 @@ export default { color: "white", transition: "all .3s", transform: "translateY(-.5rem)", - boxShadow: "0 .5rem 2rem rgba(0,0,0,.5)", textDecoration: "none", + [sizes.down("md")]: { + padding: "1rem 2.5rem", + fontSize: "1.6rem", + }, + + [sizes.down("sm")]: { + marginBottom: "1rem", + textAlign: "center", + boxShadow: "0", + fontSize: "1.3rem", + padding: ".5rem 2.5rem", + transform: "translateY(0)", + borderRadius: "5px", + width: "15rem", + }, + "&:hover": { transform: "translateY(0)", boxShadow: "0 .25rem 1rem rgba(0,0,0,.25)", + + [sizes.down("sm")]: { + boxShadow: "none", + }, }, },