aa06a0654d
cleanup profile page html to be valid replace old temp design system components with new ones divider is now correctly an hr element less section elements to be valid html
60 lines
1.0 KiB
CSS
60 lines
1.0 KiB
CSS
.container {
|
|
background-color: var(--Main-Grey-White);
|
|
border-radius: var(--Corner-radius-lg);
|
|
display: grid;
|
|
gap: var(--Space-x3);
|
|
padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
|
|
color: var(--Text-Default);
|
|
}
|
|
|
|
.title {
|
|
color: var(--Text-Accent-Primary);
|
|
}
|
|
|
|
.titleName {
|
|
color: var(--Text-Interactive-Default);
|
|
}
|
|
|
|
.info {
|
|
display: grid;
|
|
gap: var(--Space-x15) var(--Space-x7);
|
|
width: 100%;
|
|
justify-items: flex-start;
|
|
}
|
|
|
|
.item {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: var(--Space-x1);
|
|
grid-template-columns: auto auto 1fr;
|
|
justify-items: flex-end;
|
|
width: 100%;
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
padding-bottom: var(--Space-x8);
|
|
position: relative;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.info {
|
|
grid-template-columns: repeat(3, auto);
|
|
}
|
|
|
|
.item {
|
|
justify-items: flex-start;
|
|
}
|
|
|
|
.container {
|
|
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.content {
|
|
gap: var(--Space-x5);
|
|
grid-template-columns: max(340px) 1fr;
|
|
}
|
|
}
|