format socials as list (im still learning...)
This commit is contained in:
parent
f132b754a5
commit
36dde64b61
3 changed files with 70 additions and 71 deletions
|
|
@ -45,21 +45,46 @@ main {
|
|||
font-size: 1.5em
|
||||
}
|
||||
|
||||
socials-list {
|
||||
.socials-list {
|
||||
/* display: flex; */
|
||||
/* flex-direction: column; */
|
||||
/* gap: 1ch; */
|
||||
/* align-content: centerr; */
|
||||
/* align-items: start; */
|
||||
|
||||
list-style: none;
|
||||
width: 45ch;
|
||||
}
|
||||
|
||||
.socials-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* justify-content: start; */
|
||||
align-content: centerr;
|
||||
align-items: start;
|
||||
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
socials-item {
|
||||
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--theme-icon-off);
|
||||
}
|
||||
|
||||
.icon-social {
|
||||
.socials-icon {
|
||||
width: 2ch;
|
||||
height: 2ch;
|
||||
object-fit: contain;
|
||||
flex: 0 0 40px; /* fixed column */
|
||||
}
|
||||
|
||||
.socials-name {
|
||||
flex: 1 1 140px;
|
||||
text-align: left;
|
||||
min-width: 0; /* important to allow truncation if needed */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.socials-link {
|
||||
flex: 0 0 auto; /* fixed link column width; adjust as needed */
|
||||
text-align: left;
|
||||
color: var(--theme-link);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue