darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(CSS): cards, colouration and placement finished for all 3 different supported sizes, phone, 1920p and ultrawide

Browse Source
This commit is contained in:
darkicewolf50
2025-04-24 11:48:21 -06:00
parent 33c933d455
commit 4d1e45359c
9 changed files with 155 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/styling/projectCards.css
View File

@ -2,21 +2,30 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1svw;
}
.project-card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* background-color: aqua; */
flex: 0 1 48%;
gap: 1svw;
flex: 0 1 30%;
margin-bottom: 3svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
@media only screen and (max-width: 800px) {
.project-card {
flex: 0 1 auto;
}
}
.project-card img {
width: 96%;
height: 50svh;
align-self: center;
max-width: 100%;
justify-self: center;
padding-top: 1svh;
object-fit: contain;
color: transparent;
display: flex;
aspect-ratio: 3/2;
}
.project-title-info {
@ -24,7 +33,7 @@
flex-direction: row;
border-bottom: var(--underlineTitle);
width: 80%;
border-radius: var(--underlineTitleBorderRadius);
margin: 0px 2svw;
padding: 0px 2svw;
@ -37,10 +46,15 @@
text-align: start;
white-space: nowrap;
align-self: center;
font-weight: normal;
text-wrap: wrap;
border-radius: var(--underlineTitleBorderRadius);
}
.project-title-info img {
height: 6svh;
height: var(--img-width);
width: var(--img-height);
padding: 1svh 0px;
}
.project-title-info div {
@ -59,21 +73,20 @@
.project-tech-logos {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
align-items: center;
align-self: center;
width: 90%;
justify-content: flex-start;
column-gap: calc((100% - (60px * 5)) / 4);
column-gap: 0.5svw;
row-gap: 1svw;
padding-left: 2svw;
padding-bottom: 1svh;
}
.project-tech-logos img {
aspect-ratio: 1;
max-width: 60px;
max-height: 60px;
flex: 0 1 19%;
height: var(--img-width);
width: var(--img-height);
/* flex: 0 1 19%; */
}