Draw the settings link as a gear at the header's size
Gloss' settings icon is a ring of loose spokes that reads as a sun, and
the link sat at the default size beside a heading where the header's
other icon buttons are large. Use Lucide's gear, kept beside the ellipsis
in app.css, and the large size.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RTqTY4FfP1S89ZEdu2qkE8
diff --git a/lib/rank_king/views/home.rb b/lib/rank_king/views/home.rb
index 9302a29..2232771 100644
--- a/lib/rank_king/views/home.rb
+++ b/lib/rank_king/views/home.rb
@@ -14,8 +14,8 @@ module RankKing
def view_template
render Layout.new do
render PageHeader.new(title: "Rank King") do
- a(href: "/settings", class: "icon-button", aria_label: "Settings",
- style: "--gl-icon: var(--gl-icon-settings)")
+ a(href: "/settings", class: "icon-button", data_size: "lg", aria_label: "Settings",
+ style: "--gl-icon: var(--rk-icon-settings)")
a(href: "/lists/new", class: "btn", data_variant: "primary", data_size: "sm",
style: "--gl-icon: var(--gl-icon-plus)") { "New list" }
end
diff --git a/public/css/app.css b/public/css/app.css
index acd8d68..0df38f8 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -6,6 +6,10 @@
/* Lucide "ellipsis", drawn the way Gloss draws its own icon tokens.
Gloss has no "more" icon yet; this belongs upstream when it does. */
--rk-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
+
+ /* Lucide "settings", drawn the same way. Gloss' own settings icon is a
+ ring of loose spokes that reads as a sun at this size, not a gear. */
+ --rk-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
/* -------------------- */