death.au/deathau.weblog.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Gordon Pedersen 2024-05-13 13:22:58 +10:00
parent ba75de648c
commit ccd157ab86
1 changed files with 38 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
weblog/B0. Template/styles.css.md
View file

@ -401,15 +401,8 @@ fedi-social i::before {
line-height: 48px; line-height: 48px;
} }
main.page:has(>#details)::before,
main.page:has(>#details)::after {
main.page {
position: relative;
}
main.page:has(>.home)::before,
main.page:has(>.home)::after {
content: ''; content: '';
position: absolute; position: absolute;
left: -2px; left: -2px;
@ -423,34 +416,51 @@ main.page:has(>.home)::after {
border-radius: 1em; border-radius: 1em;
} }
main.page:has(>.home)::after { main.page:has(>#details)::after {
filter: blur(50px); 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%; border-radius: 50%;
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
box-shadow: 0 0 1em 1px var(--primary-muted), 0 0 .5em 1px var(--white-glow); box-shadow: 0 0 1em 1px var(--primary-muted), 0 0 .5em 1px var(--white-glow);
} }
.home{ #profile-items>ul {
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 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;