Attempted styling for the profile page
All checks were successful
/ weblog.lol (push) Successful in 9s

This commit is contained in:
Gordon Pedersen 2024-05-13 13:22:58 +10:00
parent ba75de648c
commit ccd157ab86

View file

@ -401,15 +401,8 @@ fedi-social i::before {
line-height: 48px;
}
main.page {
position: relative;
}
main.page:has(>.home)::before,
main.page:has(>.home)::after {
main.page:has(>#details)::before,
main.page:has(>#details)::after {
content: '';
position: absolute;
left: -2px;
@ -423,34 +416,51 @@ main.page:has(>.home)::after {
border-radius: 1em;
}
main.page:has(>.home)::after {
main.page:has(>#details)::after {
filter: blur(50px);
}
.home img.u-photo {
main.page:has(>#details){
display: grid;
grid-template-columns: 1fr 0.95fr;
/* grid-template-rows: 1fr 1fr; */
grid-template-areas: "details bio" "details profile-items";
column-gap: 1.5rem;
}
#details {
grid-area: details;
text-align: center;
}
#bio {
grid-area: bio;
text-align: center;
}
#profile-items {
grid-area: profile-items;
}
@media (max-width:720px) {
main.page:has(>#details){
display:flex;
}
#details {
margin-left: auto;
margin-right: auto;
}
}
#profile-picture {
border-radius: 50%;
max-height: 200px;
max-width: 200px;
box-shadow: 0 0 1em 1px var(--primary-muted), 0 0 .5em 1px var(--white-glow);
}
.home{
display: flex;
flex-wrap: wrap;
gap: 2em;
flex-direction: row;
align-items: center;
}
.home>*{
flex: 1;
min-width: 17em;
text-align: left;
}
.home>:first-child {
text-align: center;
}
.home>nav ul {
#profile-items>ul {
display: flex;
flex-direction: column;
gap: 0.5em;