diff --git a/index.html b/index.html index e763f95..96326c9 100644 --- a/index.html +++ b/index.html @@ -132,21 +132,21 @@

Learn about me

-

Technical Skills

+

Technical Skills

diff --git a/styles/mediaqueries.css b/styles/mediaqueries.css index 0b27092..fed0fbf 100644 --- a/styles/mediaqueries.css +++ b/styles/mediaqueries.css @@ -1,3 +1,9 @@ +@media only screen and (max-width: 1131px) { + .skills-list i { + font-size: 5rem; + } +} + @media only screen and (max-width: 964px) { .home-text p { font-size: 1rem; @@ -55,6 +61,15 @@ } } +@media only screen and (max-width: 743px) { + .skills-container h1 { + font-size: 2.5rem; + } + .skills-list i { + font-size: 4rem; + } +} + @media only screen and (max-width: 608px) { .light-mode-button, .dark-mode-button { width: 1rem; @@ -67,6 +82,13 @@ .about-window i, .terminal-content p { font-size: 0.9rem; } + .skills-container h1 { + font-size: 2rem; + margin: 0.5rem auto; + } + .skills-list i { + font-size: 4rem; + } } @media only screen and (max-width: 549px) { @@ -75,6 +97,15 @@ } } +@media only screen and (max-width: 459px) { + .skills-list i { + font-size: 3rem; + } + .skills-list p { + font-size: 0.75rem; + } +} + @media only screen and (max-width: 425px) { .mobile-nav-link-list { padding-left: 0.5rem; @@ -92,6 +123,18 @@ width: 0.75rem; height: 0.75rem; } + .skills-container h1 { + font-size: 1.8rem; + } +} + +@media only screen and (max-width: 384px) { + .skills-list i { + font-size: 2.5rem; + } + .skills-list p { + font-size: 0.65rem; + } } @media only screen and (max-width: 333px) { diff --git a/styles/style.css b/styles/style.css index 7a29b67..e273633 100644 --- a/styles/style.css +++ b/styles/style.css @@ -299,16 +299,21 @@ header a:hover { justify-content: center; align-items: center; margin: 0 auto; - width: 80%; + padding: 2rem 0; + max-width: 80%; height: 100vh; } +.skills-container h1 { + font-size: 3rem; +} + .skills-list { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; - width: 90%; + width: 100%; padding: 0; }