From ff56cec78e3fb1230c842407458e449fe517fdba Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Wed, 26 Dec 2018 23:54:09 -0700
Subject: [PATCH] [design] improve overflow for long letter and name lengths

---
 css/links.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

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