fix socials layout
This commit is contained in:
parent
627aa23b26
commit
3fc3992958
3 changed files with 22 additions and 25 deletions
|
|
@ -3,12 +3,6 @@
|
||||||
/* =========================================================== */
|
/* =========================================================== */
|
||||||
|
|
||||||
.ppty {
|
.ppty {
|
||||||
/* display: block; */
|
|
||||||
/* flex-direction: column; */
|
|
||||||
/* justify-content: start; */
|
|
||||||
/* align-content: center; */
|
|
||||||
/* align-items: start; */
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
|
|
||||||
|
|
@ -46,45 +46,48 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials-list {
|
.socials-list {
|
||||||
/* display: flex; */
|
margin: 0;
|
||||||
/* flex-direction: column; */
|
padding: 0;
|
||||||
/* gap: 1ch; */
|
width: 45ch;
|
||||||
/* align-content: centerr; */
|
|
||||||
/* align-items: start; */
|
|
||||||
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
width: 45ch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials-item {
|
.socials-item {
|
||||||
display: flex;
|
border-bottom: 1px solid var(--theme-icon-off);
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid var(--theme-icon-off);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials-icon {
|
.socials-icon {
|
||||||
width: 2ch;
|
width: 2ch;
|
||||||
height: 2ch;
|
height: 2ch;
|
||||||
object-fit: contain;
|
|
||||||
flex: 0 0 40px; /* fixed column */
|
flex: 0 0 40px; /* fixed column */
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials-name {
|
.socials-name {
|
||||||
flex: 1 1 140px;
|
flex: 1 1 140px;
|
||||||
text-align: left;
|
|
||||||
min-width: 0; /* important to allow truncation if needed */
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials-link {
|
.socials-link {
|
||||||
flex: 0 0 auto; /* fixed link column width; adjust as needed */
|
min-width: 0; /* important to allow truncation if needed */
|
||||||
text-align: left;
|
|
||||||
color: var(--theme-link);
|
overflow: hidden;
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
color: var(--theme-link);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -88,8 +88,8 @@
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="centered-container">
|
<div class="centered-container">
|
||||||
<div class="centered cryframe"> <!-- style="display: flex; flex-direction: row; gap: 20px;"> -->
|
<div class="centered cryframe">
|
||||||
<div style="display: flex; flex-direction: row; align-items: start; justify-items: end;">
|
<div style="display: flex; flex-direction: row; align-items: start; justify-items: center;">
|
||||||
|
|
||||||
<img src="imgs/avatar.png" loading="eager" height="150">
|
<img src="imgs/avatar.png" loading="eager" height="150">
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue