diff --git a/src/components/Skills/Skills.css b/src/components/Skills/Skills.css index d1d0180..bac88d6 100644 --- a/src/components/Skills/Skills.css +++ b/src/components/Skills/Skills.css @@ -19,7 +19,7 @@ font-weight: 600; text-transform: capitalize; margin: 1.5rem auto 0; - width: 15%; + width: max-content; } .skills h2:hover + hr { @@ -39,7 +39,7 @@ font-weight: bold; font-size: 0.64rem; letter-spacing: 0.5; - margin: 0.2rem 0.7rem; + margin: 0.2rem 0.7rem 1rem; transition: all 0.2s ease-in-out; background-color: rgba(220, 220, 220, 0.6); padding: 0.5rem; @@ -63,6 +63,19 @@ margin: 0.4rem; } +.skillsSetContainer { + max-width: 35rem; +} +.skillsSetContainer.miscSection { + max-width: 50rem; +} + +@media screen and (max-width: 1119px) { + .skillsSetContainer.miscSection { + max-width: 35rem; + } +} + @media screen and (max-width: 940px) { .skills { padding: 0.7rem; diff --git a/src/components/Skills/Skills.tsx b/src/components/Skills/Skills.tsx index 12c3ddd..432f292 100644 --- a/src/components/Skills/Skills.tsx +++ b/src/components/Skills/Skills.tsx @@ -6,40 +6,72 @@ import Skill from "./Skill"; import "./Skills.css"; export default function Skills() { - const { mobileSize } = useWindowSize(); + const { mobileSize, innerWidth } = useWindowSize(); + const bootstrapLaptopSize = innerWidth < 1120; const skillsSets = ["frontend", "backend", "misc"] as const; return (