From 79d4ff4b08f249ce69ed4291d937a50165ed0b86 Mon Sep 17 00:00:00 2001 From: r Date: Tue, 22 Sep 2020 04:21:39 +0000 Subject: Update CSS Now it's mostly CSS 2.1 compliant. All the images now use the height attribute to limit the size on browsers that don't support CSS. --- renderer/renderer.go | 4 +-- static/style.css | 78 +++++++++++++++++---------------------------- templates/emoji.tmpl | 2 +- templates/nav.tmpl | 2 +- templates/notification.tmpl | 10 +++--- templates/status.tmpl | 10 +++--- templates/user.tmpl | 2 +- templates/userlist.tmpl | 2 +- 8 files changed, 46 insertions(+), 64 deletions(-) diff --git a/renderer/renderer.go b/renderer/renderer.go index a15bebf..560e9b7 100644 --- a/renderer/renderer.go +++ b/renderer/renderer.go @@ -41,7 +41,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string { var replacements []string var r string for _, e := range emojis { - r = fmt.Sprintf("\":%s:\"", + r = fmt.Sprintf("\":%s:\"", e.URL, e.ShortCode, e.ShortCode) replacements = append(replacements, ":"+e.ShortCode+":", r) } @@ -57,7 +57,7 @@ func statusContentFilter(spoiler string, content string, content = spoiler + "
" + content } for _, e := range emojis { - r = fmt.Sprintf("\":%s:\"", + r = fmt.Sprintf("\":%s:\"", e.URL, e.ShortCode, e.ShortCode) replacements = append(replacements, ":"+e.ShortCode+":", r) } diff --git a/static/style.css b/static/style.css index d43449f..d27b9e6 100644 --- a/static/style.css +++ b/static/style.css @@ -12,13 +12,8 @@ background-color: #cccccc; } -.status-container { - display: flex; -} - .status-content { margin: 4px 0; - word-wrap: anywhere; max-height: 600px; overflow: auto; } @@ -30,6 +25,8 @@ .status-content img, .status-image, .status-video { + height: auto; + width: auto; max-height: 240px; max-width: 280px; width: auto; @@ -42,18 +39,17 @@ .status-profile-img-container { margin-right: 8px; + float: left; } .status-profile-img { height: 48px; width: 48px; - object-fit: contain; vertical-align: top; } .status { - flex: 1; - overflow-x: auto; + overflow: auto; } .status-dname { @@ -61,16 +57,10 @@ } .status-uname { - user-select: all; font-style: italic; font-size: 10pt; } -.name-emoji { - height: 20px; - width: auto; -} - .status-action-container { margin-top: 4px; } @@ -80,7 +70,7 @@ margin-right: 16px; } -.status-action:last-child { +.status-action-last { margin-right: 4px; } @@ -105,7 +95,7 @@ } .post-form { - margin: 8px 0; + margin: 4px 0; } .post-form>div { @@ -159,14 +149,14 @@ border-color: #777777; } -.notification-follow-container { - display: flex; -} - .notification-info-text span { vertical-align: middle; } +.notification-follow { + overflow: auto; +} + .notification-follow-uname { margin-top: 8px; } @@ -232,9 +222,8 @@ } .user-profile-img { - max-height: 100px; - max-width: 100px; - object-fit: contain; + height: 96px; + width: 96px; vertical-align: top; } @@ -263,7 +252,7 @@ a, .btn-link { a:hover, .btn-link:hover { - opacity: 0.6; + color: #9899c4; } .status-visibility { @@ -284,10 +273,6 @@ a:hover, margin: 2.5px 0; } -.img-link:hover { - opacity: initial; -} - .status-profile-img-container .img-link { width: 48px; overflow: hidden; @@ -327,8 +312,10 @@ a:hover, } img.emoji { - height: 32px; - object-fit: contain; + height: auto; + width: auto; + max-height: 32px; + max-width: 32px; vertical-align: middle; } @@ -337,7 +324,6 @@ img.emoji { } .emoji-shortcode { - user-select: all; vertical-align: middle; display: inline-block; } @@ -346,27 +332,19 @@ img.emoji { margin-left: 4px; } -.post-form-emoji-link i { - font-size: 14pt !important; -} - -.post-form-title { +.user-info-img { + height: 64px; + width: 64px; vertical-align: middle; } -.user-info { - display: flex; -} - -.user-info-img { - max-height: 64px; - max-width: 64px; - object-fit: contain; - vertical-align: middle; +.user-info-img-container { + float: left; + margin-right: 8px; } .user-info-details-container { - margin-left: 8px; + overflow: auto; } .user-info-details-container>div { @@ -375,7 +353,6 @@ img.emoji { .nav-link { margin-right: 2px; - text-decoration: underline; } .user-list-container { @@ -442,7 +419,7 @@ img.emoji { } .more-container:hover .more-content { - display: initial; + display: block; } .more-link { @@ -514,6 +491,11 @@ img.emoji { color: #81a2be; } +.dark a:hover, +.dark .btn-link:hover { + color: #497091; +} + .dark .status-visibility { color: #eaeaea; } diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl index cbffc7b..7359d81 100644 --- a/templates/emoji.tmpl +++ b/templates/emoji.tmpl @@ -5,7 +5,7 @@
{{range .Emojis}}
- {{.ShortCode}} + {{.ShortCode}}
:{{.ShortCode}}:
{{end}} diff --git a/templates/nav.tmpl b/templates/nav.tmpl index 3386a7b..cfac439 100644 --- a/templates/nav.tmpl +++ b/templates/nav.tmpl @@ -3,7 +3,7 @@