[design] improve overflow for long letter and name lengths

This commit is contained in:
zombieFox 2018-12-26 23:54:09 -07:00
parent 2bd6aad056
commit ff56cec78e

View File

@ -158,22 +158,25 @@
} }
.link-letter { .link-letter {
text-align: center;
font-family: var(--font-fjalla); font-family: var(--font-fjalla);
color: rgb(var(--accent)); color: rgb(var(--accent));
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.is-link-block .link-letter { .is-link-block .link-letter {
margin: 0; margin: 0;
font-size: 2em; font-size: 2em;
overflow: hidden; text-align: center;
text-overflow: ellipsis; max-width: 100%;
} }
.is-link-list .link-letter { .is-link-list .link-letter {
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
font-size: 1.5em; font-size: 1.5em;
flex-shrink: 0;
max-width: 50%;
} }
.link-item:hover .link-letter, .link-item:hover .link-letter,
@ -184,15 +187,20 @@
.link-name { .link-name {
margin: 0; margin: 0;
font-size: 0.9em; font-size: 0.9em;
text-align: center;
font-family: var(--font-regular); font-family: var(--font-regular);
color: var(--gray-08); color: var(--gray-08);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
opacity: 1; max-width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.is-link-block .link-name {
text-align: center;
}
.is-link-list .link-name {}
.link-item:hover .link-name, .link-item:hover .link-name,
.link-item:focus .link-name { .link-item:focus .link-name {
color: var(--white); color: var(--white);