diff --git a/src/styles/App.css b/src/styles/App.css index 3765aae..e9fa85b 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -8,12 +8,19 @@ html { scroll-behavior: smooth; } -body { +html, body { width: 100%; height: 100vh; + padding: 0; max-width: 100vw; font-family: monospace; - overflow-y: hidden; + overflow: hidden; +} + +@media screen and (orientation: portrait) { + html, body { + height: 100%; + } } a { diff --git a/src/styles/projects.css b/src/styles/projects.css index 3e2d48a..4d07510 100644 --- a/src/styles/projects.css +++ b/src/styles/projects.css @@ -159,4 +159,72 @@ .individualProjectLinks:hover { background: white; color: black; -} \ No newline at end of file +} + +@media screen and (max-width: 520px) and (orientation: portrait) { + .projectTypeSelectionContainer { + gap: 1rem; + } + .projectTypeSelection { + color: white; + padding: 1rem 0.75rem; + font-weight: bolder; + min-width: 8rem; + } + .projectTypeSelected::before { + border-left: 0; + right: calc(8rem - 3px); + } + + .projectTypeSelected::after { + border-right: 0; + left: calc(8rem - 3px); + } + .projectIndividualItemContainer { + max-width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 521px) and (max-width: 705px) and (orientation: portrait) { + .projectIndividualItemContainer { + max-width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 706px) and (max-width: 860px) and (orientation: portrait) { + .projectIndividualItemContainer { + max-width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 861px) and (max-width: 1048px) and (orientation: portrait) { + .projectIndividualItemContainer { + max-width: calc(100% - 1rem); + } +} + +@media only screen + and (max-width: 800px) + and (orientation: landscape) { + .projectIndividualItemContainer { + max-width: calc(50% - 1rem); + } + } + + @media only screen + and (min-width: 801px) + and (max-width: 1000px) + and (orientation: landscape) { + .projectIndividualItemContainer { + max-width: calc(50% - 1rem); + } + } + + @media only screen + and (min-width: 1001px) + and (max-width: 1400px) + and (orientation: landscape) { + .projectIndividualItemContainer { + max-width: calc(50% - 1rem); + } + } diff --git a/src/styles/technologies.css b/src/styles/technologies.css index 3d4db64..84abde5 100644 --- a/src/styles/technologies.css +++ b/src/styles/technologies.css @@ -12,13 +12,15 @@ } .experienceTitle { - font-size: 3rem; + font-size: 4rem; + padding-top: 1rem; } .experienceContainer { display: flex; flex-direction: row; gap: 2rem; + justify-content: center; flex-wrap: wrap; width: 80%; margin: auto; @@ -43,7 +45,7 @@ .experienceItemTitle { text-align: left; white-space: nowrap; - font-size: 2rem; + font-size: 2.5rem; } .experienceList { @@ -51,8 +53,8 @@ } .experienceListItem { - font-size: 1.5rem; - width: 25rem; + font-size: 2rem; + width: 22rem; } @@ -72,6 +74,9 @@ .experienceInnerContainer { height: 12rem; } + .experienceInnerContainer:last-child { + margin-bottom: 5rem; + } .experienceItemContainer { padding: 1rem; gap: 1rem; @@ -142,6 +147,7 @@ .experienceInnerContainer { height: 15rem; } + .experienceItemContainer { padding: 1rem; gap: 1rem;