From 84bd8df52c342bf809db627ea0463c6809274181 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 21 Feb 2025 16:04:31 -0500 Subject: Remove references to nonexistent italic variants of FiraCode --- ui/styles/fonts.css | 109 ++++++++++++++++++++++++---------------------------- 1 file changed, 50 insertions(+), 59 deletions(-) (limited to 'ui/styles') diff --git a/ui/styles/fonts.css b/ui/styles/fonts.css index 06f69c8..c72f481 100644 --- a/ui/styles/fonts.css +++ b/ui/styles/fonts.css @@ -1,84 +1,75 @@ /*** Roboto ***/ @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } + @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; } + @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Italic.ttf') format('truetype'); - font-weight: normal; - font-style: italic; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; + font-display: swap; } + @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; + font-display: swap; } /*** Archistico ***/ @font-face { - font-family: 'Archistico'; - src: url('../fonts/Archistico_Simple.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Archistico'; + src: url('../fonts/Archistico_Simple.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } + @font-face { - font-family: 'Archistico'; - src: url('../fonts/Archistico_Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; - font-display: swap; + font-family: 'Archistico'; + src: url('../fonts/Archistico_Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; } /*** FiraCode ***/ @font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-Regular.otf') format('opentype'); - font-weight: normal; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-Bold.otf') format('opentype'); - font-weight: bold; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-Italic.otf') format('opentype'); - font-weight: normal; - font-style: italic; - font-display: swap; + font-family: 'FiraCode'; + src: url('../fonts/FiraCode-Regular.otf') format('opentype'); + font-weight: normal; + font-style: normal; + font-display: swap; } + @font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-BoldItalic.otf') format('opentype'); - font-weight: bold; - font-style: italic; - font-display: swap; + font-family: 'FiraCode'; + src: url('../fonts/FiraCode-Bold.otf') format('opentype'); + font-weight: bold; + font-style: normal; + font-display: swap; } /*** Overlock ***/ @font-face { - font-family: 'Overlock'; - src: url('../fonts/Overlock-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Overlock'; + src: url('../fonts/Overlock-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } -- cgit v1.2.3 From f905b6fb1c3e34faaa3014009e994813842a7ffa Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 21 Feb 2025 16:05:00 -0500 Subject: Remove nonexistent CSS variable --- ui/styles/fonts.css | 90 +++++++++++++++++++++++++------------------------- ui/styles/messages.css | 2 +- 2 files changed, 46 insertions(+), 46 deletions(-) (limited to 'ui/styles') diff --git a/ui/styles/fonts.css b/ui/styles/fonts.css index c72f481..280f8c6 100644 --- a/ui/styles/fonts.css +++ b/ui/styles/fonts.css @@ -1,75 +1,75 @@ /*** Roboto ***/ @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-Italic.ttf') format('truetype'); - font-weight: normal; - font-style: italic; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: italic; + font-display: swap; } @font-face { - font-family: 'Roboto'; - src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; - font-display: swap; + font-family: 'Roboto'; + src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; + font-display: swap; } /*** Archistico ***/ @font-face { - font-family: 'Archistico'; - src: url('../fonts/Archistico_Simple.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Archistico'; + src: url('../fonts/Archistico_Simple.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'Archistico'; - src: url('../fonts/Archistico_Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; - font-display: swap; + font-family: 'Archistico'; + src: url('../fonts/Archistico_Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; } /*** FiraCode ***/ @font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-Regular.otf') format('opentype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'FiraCode'; + src: url('../fonts/FiraCode-Regular.otf') format('opentype'); + font-weight: normal; + font-style: normal; + font-display: swap; } @font-face { - font-family: 'FiraCode'; - src: url('../fonts/FiraCode-Bold.otf') format('opentype'); - font-weight: bold; - font-style: normal; - font-display: swap; + font-family: 'FiraCode'; + src: url('../fonts/FiraCode-Bold.otf') format('opentype'); + font-weight: bold; + font-style: normal; + font-display: swap; } /*** Overlock ***/ @font-face { - font-family: 'Overlock'; - src: url('../fonts/Overlock-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; + font-family: 'Overlock'; + src: url('../fonts/Overlock-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; } diff --git a/ui/styles/messages.css b/ui/styles/messages.css index c4ef106..7d0b870 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -51,6 +51,7 @@ .message:hover { background-color: var(--colour-message-hover-bg); } + .message:hover * { color: var(--colour-message-hover-text); } @@ -112,7 +113,6 @@ .message-body pre { border: 1px solid #312e81; border-radius: 0.25rem; - background-color: var(--colour-message-run-text); padding: 0.25rem; } -- cgit v1.2.3 From d7b1a995b7da423531933888cde04ae6d807298b Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 21 Feb 2025 16:13:30 -0500 Subject: Provide fallback generic fonts for our custom fonts --- ui/app.css | 2 +- ui/styles/app-bar.css | 2 +- ui/styles/forms.css | 4 ++-- ui/styles/messages.css | 2 +- ui/styles/textarea.css | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/styles') diff --git a/ui/app.css b/ui/app.css index e7da4d8..646c418 100644 --- a/ui/app.css +++ b/ui/app.css @@ -14,7 +14,7 @@ body { background-color: var(--colour-active-channel-bg); color: var(--dark-text); - font-family: 'Roboto'; + font-family: 'Roboto', sans-serif; } hr { diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css index 17620ba..0d0a311 100644 --- a/ui/styles/app-bar.css +++ b/ui/styles/app-bar.css @@ -28,7 +28,7 @@ .app-bar > a { line-height: var(--app-bar-height); - font-family: 'Archistico'; + font-family: 'Archistico', serif; letter-spacing: 0.25rem; } diff --git a/ui/styles/forms.css b/ui/styles/forms.css index 88a6c41..eb98743 100644 --- a/ui/styles/forms.css +++ b/ui/styles/forms.css @@ -5,7 +5,7 @@ label { } label input { - font-family: 'Overlock'; + font-family: 'Overlock', cursive; display: block; width: 90%; padding: 0.25rem; @@ -14,7 +14,7 @@ label input { } form.form > button { - font-family: 'Overlock'; + font-family: 'Overlock', cursive; background-color: var(--colour-input-bg); color: var(--colour-input-text); padding: 0.25rem; diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 7d0b870..4890f2c 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -118,5 +118,5 @@ .message-body code, .message-body pre { - font-family: 'FiraCode'; + font-family: 'FiraCode', monospace; } diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css index d9be0d6..4b8602c 100644 --- a/ui/styles/textarea.css +++ b/ui/styles/textarea.css @@ -18,7 +18,7 @@ flex-grow: 1; background-color: var(--colour-input-bg); color: var(--colour-input-text); - font-family: 'FiraCode'; + font-family: 'FiraCode', monospace; } .create-message button { -- cgit v1.2.3 From b52075ea197baa5a8a301b04948f9286cfb107a9 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 21 Feb 2025 16:15:40 -0500 Subject: Remove duplicate `content` hack from reset. According to , this was needed for old versions of Safari. However, since at least 2022, Safari has supported `content: none` just fine. Related Safari bug (still open as of this writing, comments relevnat): --- ui/styles/reset.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/styles') diff --git a/ui/styles/reset.css b/ui/styles/reset.css index f9fa505..5a17f02 100644 --- a/ui/styles/reset.css +++ b/ui/styles/reset.css @@ -93,6 +93,7 @@ video { /* font: inherit; */ vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ article, aside, @@ -107,24 +108,28 @@ nav, section { display: block; } + body { line-height: 1; } + ol, ul { list-style: none; } + blockquote, q { quotes: none; } + blockquote:before, blockquote:after, q:before, q:after { - content: ''; content: none; } + table { border-collapse: collapse; border-spacing: 0; -- cgit v1.2.3 From 5245aba8b80f458d25eb3249c0b8cc3fe744311d Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 21 Feb 2025 16:27:00 -0500 Subject: Be a bit more careful with the nesting of anchors and list items. Browsers cope with weird nestings mostly fine, but there's no upside for us in testing that. --- ui/lib/components/Channel.svelte | 8 ++++---- ui/styles/sidebar.css | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/styles') diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte index c73340f..4f908d2 100644 --- a/ui/lib/components/Channel.svelte +++ b/ui/lib/components/Channel.svelte @@ -2,13 +2,13 @@ let { id, name, active, hasUnreads } = $props(); - -
  • +
  • + {#if hasUnreads} ❦ {:else} {/if} {name} -
    • - + + diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css index 5e5e16a..c6aab6a 100644 --- a/ui/styles/sidebar.css +++ b/ui/styles/sidebar.css @@ -4,6 +4,8 @@ } .list-nav a { + display: block; + padding: 0.5rem; text-decoration: none; } @@ -12,7 +14,6 @@ } .list-nav li { - padding: 0.5rem; border-radius: 0.5rem; border: 1px solid var(--colour-navbar-border); margin: 0.25rem; -- cgit v1.2.3