Attempted styling for the profile page
All checks were successful
/ weblog.lol (push) Successful in 9s
All checks were successful
/ weblog.lol (push) Successful in 9s
This commit is contained in:
parent
ba75de648c
commit
ccd157ab86
1 changed files with 38 additions and 28 deletions
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue