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

41
assets/styling/contact.css
View File

@ -3,20 +3,27 @@
flex-direction: row;
gap: 2svw;
align-items: center;
justify-content: center;
}
#contact img {
flex: 1 1 50%;
border-radius: 100%;
max-width: 40%;
object-fit: cover;
max-height: 250px;
display: block;
background-color: var(--card-background-color);
padding: 0.5rem;
}
#contact div {
display: flex;
justify-content: center;
/* flex: 0 0 48%; */
}
#contact div div {
display: flex;
flex-direction: column;
flex: 1;
flex-basis: auto;
}
#contact div ul {
@ -46,9 +53,14 @@
}
#contact div ul li {
justify-content: flex-start;
border: 1px solid whitesmoke;
/* display: flex;
justify-content: flex-start; */
/* text-wrap: nowrap; */
padding-right: 1svw;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* border: 1px solid whitesmoke; */
padding: 0.5svh 1svw;
}
#contact div ul li a {
@ -68,7 +80,20 @@
}
#contact ul li img {
height: 80px;
height: var(--img-width);
width: var(--img-height);
object-fit: contain;
border-radius: 0px;
}
@media only screen and (max-width: 430px) {
#contact ul li img {
display: none;
}
#contact img {
border-radius: 100%;
max-width: 100%;
max-height: 250px;
display: block;
}
}