Paulus/paulus.casa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling for expertise section complete for now

Browse Source
This commit is contained in:
II-Paulus-II 2024-03-28 22:25:55 +00:00
parent a8813fca88
commit 5d986ea79d
1 changed files with 238 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
src/styles/technologies.css
View File

@ -4,6 +4,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width: 100%;
min-height: 100vh; min-height: 100vh;
height: 100%; height: 100%;
gap: 3rem; gap: 3rem;
@ -17,13 +18,15 @@
.experienceContainer { .experienceContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; width: 80%;
margin: auto;
height: 100%;
} }
.experienceInnerContainer { .experienceInnerContainer {
margin: 1.5rem; height: 20rem;
flex: 0 1 27%;
} }
.experienceItemContainer { .experienceItemContainer {
@ -31,7 +34,9 @@
padding: 1rem 2rem; padding: 1rem 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; flex-wrap: wrap;
gap: 2rem;
width: 100%;
height: 100% height: 100%
} }
@ -47,47 +52,11 @@
.experienceListItem { .experienceListItem {
font-size: 1.5rem; font-size: 1.5rem;
width: 25rem;
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 520px) and (orientation: portrait) {
.experienceInnerContainer {
flex: 0 1 37%;
}
}
@media screen and (max-width: 800px) {
.experienceInnerContainer {
flex: 0 1 43%;
}
}
@media screen and (max-width: 675px) {
.technologiesContainer {
gap: 1rem;
}
.experienceTitle {
font-size: 2.5rem;
padding-top: 2rem;
}
.experienceContainer {
overflow-y: scroll;
}
.experienceInnerContainer {
justify-content: center;
flex: 0 1 65%;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 1.7rem;
}
.experienceListItem {
font-size: 1.2rem;
}
}
@media screen and (max-width: 500px) {
.technologiesContainer { .technologiesContainer {
gap: 1rem; gap: 1rem;
} }
@ -97,21 +66,244 @@
} }
.experienceContainer { .experienceContainer {
overflow-y: scroll; overflow-y: scroll;
justify-content: center;
width: 100%;
} }
.experienceInnerContainer { .experienceInnerContainer {
justify-content: center; height: 12rem;
flex: 1 }
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 1.5rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.2rem;
width: 12rem;
}
}
@media screen and (min-width: 521px) and (max-width: 705px) and (orientation: portrait) {
.technologiesContainer {
gap: 0.1rem;
}
.experienceTitle {
font-size: 2rem;
padding-top: 1.5rem;
}
.experienceContainer {
column-gap: 1rem;
row-gap: 0;
justify-content: space-around;
height: 80%;
width: 90%;
}
.experienceInnerContainer {
height: 12rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 1.5rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.2rem;
width: 10rem;
}
}
@media screen and (min-width: 706px) and (max-width: 860px) and (orientation: portrait) {
.technologiesContainer {
gap: 1rem;
}
.experienceTitle {
font-size: 3rem;
padding-top: 2rem;
}
.experienceContainer {
justify-content: space-evenly;
height: 80%;
width: 100%;
}
.experienceInnerContainer {
height: 15rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 2.2rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.5rem;
width: 19rem;
}
}
@media screen and (min-width: 861px) and (max-width: 1048px) and (orientation: portrait) {
.technologiesContainer {
gap: 1rem;
}
.experienceTitle {
font-size: 4rem;
padding-top: 2.5rem;
}
.experienceContainer {
overflow-y: scroll;
justify-content: space-around;
height: 80%;
width: 100%;
}
.experienceInnerContainer {
height: 23rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 3rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 2rem;
width: 22rem;
} }
} }
@media only screen @media only screen
and (max-width: 1024px) and (max-width: 800px)
and (orientation: landscape) { and (orientation: landscape) {
.technologiesContainer { .technologiesContainer {
gap: 1rem; gap: 1rem;
} }
.experienceTitle {
font-size: 2rem;
padding-top: 1rem;
}
.experienceContainer { .experienceContainer {
overflow-y: scroll; overflow-y: scroll;
justify-content: space-evenly;
height: 80%;
width: 90%;
}
.experienceInnerContainer {
height: 12rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 1.5rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.2rem;
width: 10rem;
} }
} }
@media only screen
and (min-width: 801px)
and (max-width: 1000px)
and (orientation: landscape) {
.technologiesContainer {
gap: 1rem;
}
.experienceTitle {
font-size: 2rem;
padding-top: 1rem;
}
.experienceContainer {
overflow-y: scroll;
justify-content: space-around;
height: 80%;
width: 90%;
}
.experienceInnerContainer {
height: 12rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 1.5rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.2rem;
width: 10rem;
}
}
@media only screen
and (min-width: 1001px)
and (max-width: 1400px)
and (orientation: landscape) {
.technologiesContainer {
gap: 2rem;
}
.experienceTitle {
font-size: 3rem;
padding-top: 2rem;
}
.experienceContainer {
overflow-y: scroll;
justify-content: space-around;
height: 80%;
width: 90%;
}
.experienceInnerContainer {
height: 18rem;
}
.experienceItemContainer {
padding: 1rem;
gap: 1rem;
}
.experienceItemTitle {
text-align: center;
white-space: nowrap;
font-size: 2rem;
}
.experienceList {
padding-inline-start: 2em;
}
.experienceListItem {
font-size: 1.5rem;
width: 18rem;
}
}