diff --git a/static/css/style.css b/static/css/style.css
index 23379b3..0e67443 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -438,7 +438,7 @@ p.authorization-code {
.icon-menu .option {
display: block;
- margin: 0px 0 20px 0;
+ margin: 0 0 20px 0;
background: var(--color-bg-box);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
color: inherit;
@@ -457,6 +457,10 @@ p.authorization-code {
color: var(--color-text-dull);
}
+.icon-menu .option-actions {
+ text-align: right;
+}
+
.icon-menu .option.empty:hover,
.icon-menu .option.static:hover {
border: 2px solid rgba(255, 255, 255, 0);
@@ -482,8 +486,20 @@ p.authorization-code {
font-size: 200%;
}
-.icon-menu .option .handle {
- margin-right: 20px;
+.icon-menu .option.hashtags {
+ display: flex;
+ align-items: center;
+}
+
+.icon-menu .option.hashtags .tag {
+ min-width: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex-grow: 1;
+}
+
+.icon-menu .option.hashtags .count {
+ text-align: right;
}
.icon-menu .option .pill {
@@ -500,16 +516,10 @@ p.authorization-code {
}
.icon-menu .option time {
- float: right;
color: var(--color-text-duller);
margin: 14px 0 0 0;
}
-.icon-menu .option .right {
- display: inline-block;
- float: right;
-}
-
.icon-menu .option button {
margin-top: 8px;
margin-right: 20px;
@@ -1015,6 +1025,34 @@ table.metadata td .emoji {
min-width: 16px;
}
+/* Identity banner */
+
+.identity-banner {
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ min-width: 0;
+}
+
+.identity-banner .handle {
+ display: block;
+ padding: 0 10px;
+ vertical-align: middle;
+ min-width: 0;
+}
+
+.identity-banner .handle .link,
+.identity-banner .handle .small {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ display: block;
+}
+
+.identity-banner .avatar-link {
+ line-height: 0; /* Fixes a bit of extra padding on the bottom of the link. */
+}
+
/* Posts */
.post {
@@ -1043,31 +1081,24 @@ form .post {
.post .icon {
height: 48px;
width: auto;
- float: left;
}
.post.mini .icon {
height: 28px;
width: auto;
- float: left;
}
.post .emoji {
height: 18px;
}
-.post .handle {
- display: block;
- padding: 7px 0 0 64px;
-}
-
-.post.mini .handle {
- padding: 7px 0 0 36px;
+.post .post-banner {
+ display: flex;
+ align-items: center;
}
.post time {
display: block;
- float: right;
color: var(--color-text-duller);
width: 65px;
text-align: center;
diff --git a/static/js/minidenticons.min.js b/static/js/minidenticons.min.js
new file mode 100644
index 0000000..fd8e4ca
--- /dev/null
+++ b/static/js/minidenticons.min.js
@@ -0,0 +1,8 @@
+function identicon(t,e=50,i=50){const n=t.split("").reduce(((t,e)=>16777619*((t^e.charCodeAt(0))>>>0)),2166136261);const s=n/16777619%18*20;return[...Array(t?25:0)].reduce(((t,e,i)=>n%(16-i%15)<4?t+`