From 991ae98f17614154a2687e4121f58ea6e1bd78de Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Tue, 11 Feb 2025 17:21:16 -0500 Subject: [PATCH 1/3] UX: general styling improvements, maintenance --- about.json | 3 ++- common/common.scss | 47 ++++++++++++++++++++---------------------- mobile/mobile.scss | 21 +++++++++++++++---- scss/chat-desktop.scss | 2 +- 4 files changed, 42 insertions(+), 31 deletions(-) diff --git a/about.json b/about.json index 22db2a9e..63b94283 100644 --- a/about.json +++ b/about.json @@ -21,7 +21,8 @@ "highlight": "e6cb37", "danger": "d05454", "success": "71bd9f", - "love": "c16ad7" + "love": "c16ad7", + "selected": "e1ebfb" }, "air-dark": { "primary": "e0e0e0", diff --git a/common/common.scss b/common/common.scss index b157ed90..97998a6e 100644 --- a/common/common.scss +++ b/common/common.scss @@ -4,12 +4,17 @@ max-width: unset; color: var(--secondary); h1 { - font-size: 4em; + line-height: var(--line-height-small); + @include breakpoint("large", min-width) { + font-size: 4em; + } } p { - font-size: 1.25em !important; - font-weight: bold; - margin-bottom: 1em; + margin-top: 0.5em; + margin-bottom: 2em; + @include breakpoint("large", min-width) { + font-size: var(--font-up-1); + } } .btn { height: 100%; @@ -244,7 +249,8 @@ div.ac-wrap { // graceful ish style @mixin box-shadow($value: 0px) { - box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), + box-shadow: + 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888); @@ -368,7 +374,6 @@ html body #main-outlet { } } .topic-list-item { - width: 100%; display: flex; margin-bottom: 0.5em; background-color: var(--secondary); @@ -428,6 +433,15 @@ html body #main-outlet { justify-content: center; align-items: center; } + &.selected { + td:nth-of-type(1) { + box-shadow: none; + } + &:focus-visible td:nth-of-type(2) { + box-shadow: inset 3px 0 0 var(--tertiary); + border-radius: calc(1em - 3px); + } + } } } } @@ -516,10 +530,6 @@ html body #main-outlet { } } -.navigation-container { - margin-top: 2em; -} - // published page additions .published-page-content-wrapper { max-width: 1000px; @@ -528,7 +538,8 @@ html body #main-outlet { background: var(--secondary); border-radius: 1em; padding: 3em 3em 5%; - box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), + box-shadow: + 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888); @@ -560,20 +571,6 @@ html body #main-outlet { border-radius: 0.5em; } -.topic-list tr.selected td:nth-child(2), -.topic-list-item.selected td:nth-child(2), -.latest-topic-list-item.selected, -.search-results .fps-result.selected { - box-shadow: inset 3px 0 0 var(--danger); -} - -.topic-list tr.selected td:first-child, -.topic-list-item.selected td:first-child, -.latest-topic-list-item.selected, -.search-results .fps-result.selected { - box-shadow: none; -} - .topic-list .main-link.focused + .posters { box-shadow: inset 3px 0 0 var(--tertiary); } diff --git a/mobile/mobile.scss b/mobile/mobile.scss index 6ab1b24b..d0bb8356 100644 --- a/mobile/mobile.scss +++ b/mobile/mobile.scss @@ -29,6 +29,10 @@ html background-color: transparent; } +#main-outlet { + margin-inline: auto; +} + html body #main-outlet .docs { padding: 1em; background-color: var(--secondary); @@ -175,10 +179,15 @@ ol.category-breadcrumb { flex-wrap: wrap; } -.topic-list-item .discourse-tags { - order: 3; - width: 100%; - margin-top: 0.5em; +.topic-list-item { + > .topic-list-data { + width: 100%; + } + .discourse-tags { + order: 3; + width: 100%; + margin-top: 0.5em; + } } .full-width .contents .topic-list .topic-list-item .posts-map { @@ -219,3 +228,7 @@ ol.category-breadcrumb { padding-right: 0.25em; } } + +.list-controls .nav-pills .list-control-toggle-link-trigger { + color: var(--secondary); +} diff --git a/scss/chat-desktop.scss b/scss/chat-desktop.scss index 2f6addd1..7523227f 100644 --- a/scss/chat-desktop.scss +++ b/scss/chat-desktop.scss @@ -12,7 +12,7 @@ html body.has-sidebar-page.has-full-page-chat { } .chat-channel { - height: calc(100vh - (var(--header-offset) + 10em)); + height: calc(100vh - (var(--header-offset) + 7.85em)); } .c-navbar-container { From 123e5fa31e3e5d8703c72638b48e66c4d9de70c2 Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Tue, 11 Feb 2025 17:24:42 -0500 Subject: [PATCH 2/3] fix dark colors --- about.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/about.json b/about.json index 63b94283..c74f3681 100644 --- a/about.json +++ b/about.json @@ -34,7 +34,9 @@ "highlight": "9a5cfd", "danger": "d05454", "success": "71bd9f", - "love": "c16ad7" + "love": "c16ad7", + "selected": "2f0177", + "hover": "535353" } }, "screenshots": ["screenshots/light.png", "screenshots/dark.png"] From 0dd68e729fe997a1ae95f2eceff4d1ea0e1fbe1c Mon Sep 17 00:00:00 2001 From: awesomerobot Date: Tue, 11 Feb 2025 17:32:39 -0500 Subject: [PATCH 3/3] prettier --- common/common.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/common/common.scss b/common/common.scss index 97998a6e..9fb38a3d 100644 --- a/common/common.scss +++ b/common/common.scss @@ -249,8 +249,7 @@ div.ac-wrap { // graceful ish style @mixin box-shadow($value: 0px) { - box-shadow: - 0 24px 40px rgba(0, 0, 0, 0.07), + box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888); @@ -538,8 +537,7 @@ html body #main-outlet { background: var(--secondary); border-radius: 1em; padding: 3em 3em 5%; - box-shadow: - 0 24px 40px rgba(0, 0, 0, 0.07), + box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);