Rework the interface into a consistent visual system.

Replace the accumulated per-widget decoration with short, documented
scales for type, weight, radius and motion. Fills are flat and elevation
is neutral, so accent colour marks state instead of decorating: the
gradients on buttons, pills, nodes and progress bars are gone, along with
the coloured glow shadows and the triple ring on the current unit.

Drop draw_node_halo() and the gradient aura on the learning path, which
painted the same bloom in the cairo layer.

Give the welcome page the app icon, a single-colour heading and an
unboxed paragraph. Restore keyboard focus rings, which were suppressed
everywhere, and clamp exercise bodies to a readable measure on wide
windows.

Fix two layout bugs found on the way: the statistics metric cards were
unequal because hexpand only shares leftover space, and a fraction of
zero still painted a stub of accent colour because GTK gives the progress
node a minimum width.

Co-authored-by: Cursor <cursoragent@cursor.com>

cetba.c

@@ -1308,9 +1308,7 @@ static void draw_book_rail(GtkDrawingArea *area, cairo_t *cr,
                            int width, int height, gpointer data) {
     const double t_end = (double)(BOOK_NODES - 1);
     const Rgb rail = color_from_hex(app_theme.rail);
-    const Rgb mauve = color_from_hex(app_theme.accent);
     const Rgb muted = color_from_hex(app_theme.subtext);
-    double hx, hy;
 
     (void)area;
     (void)width;
@@ -1323,13 +1321,9 @@ static void draw_book_rail(GtkDrawingArea *area, cairo_t *cr,
     cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
     cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
 
-    book_point(0.0, &hx, &hy);
-    draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
-                   mauve.r, mauve.g, mauve.b, 0.18);
-
     cairo_new_path(cr);
     book_path(cr, 0.0, t_end);
-    cairo_set_line_width(cr, 16);
+    cairo_set_line_width(cr, 12);
     cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
     cairo_stroke(cr);
 

exercise_common.c

@@ -4,6 +4,27 @@
 /* Exercise page shell                                                */
 /* ------------------------------------------------------------------ */
 
+/* Exercise text would otherwise run the full width of a maximised window,
+ * which is tiring to read. Keep the body at a comfortable measure and centre
+ * it once there is room to spare; below that it still fills the page. */
+#define EX_BODY_MAX_WIDTH 880
+
+static void ex_body_clamp(GtkAdjustment *adj, GParamSpec *ps, gpointer data) {
+    GtkWidget *body = data;
+    double avail = gtk_adjustment_get_page_size(adj);
+
+    (void)ps;
+    if (avail < 1.0)
+        return;
+    if (avail < (double)EX_BODY_MAX_WIDTH) {
+        gtk_widget_set_halign(body, GTK_ALIGN_FILL);
+        gtk_widget_set_size_request(body, -1, -1);
+    } else {
+        gtk_widget_set_halign(body, GTK_ALIGN_CENTER);
+        gtk_widget_set_size_request(body, EX_BODY_MAX_WIDTH, -1);
+    }
+}
+
 GtkWidget *ex_page_shell(const char *back_target, const char *title,
                                 const char *subtitle, const char *btn_label,
                                 GtkWidget **body_out, GtkWidget **feedback_out,
@@ -33,6 +54,9 @@ GtkWidget *ex_page_shell(const char *back_target, const char *title,
     body = gtk_box_new(GTK_ORIENTATION_VERTICAL, 14);
     gtk_widget_set_vexpand(body, TRUE);
     gtk_scrolled_window_set_child(GTK_SCROLLED_WINDOW(scroll), body);
+    g_signal_connect(gtk_scrolled_window_get_hadjustment(
+                         GTK_SCROLLED_WINDOW(scroll)),
+                     "notify::page-size", G_CALLBACK(ex_body_clamp), body);
     *body_out = body;
 
     bottom = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 12);

hw.c

@@ -181,10 +181,8 @@ void hw_adjust_notify(GtkAdjustment *adj, GParamSpec *ps,
 
 void hw_render_rail_to(cairo_t *cr) {
     const double t_end = (double)(HW_UNITS - 1);
-    const Rgb mauve = color_from_hex(app_theme.accent);
     const Rgb rail = color_from_hex(app_theme.rail);
     const Rgb muted = color_from_hex(app_theme.subtext);
-    double hx, hy;
 
     cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
     cairo_paint(cr);
@@ -192,13 +190,9 @@ void hw_render_rail_to(cairo_t *cr) {
     cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
     cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
 
-    hw_point(0.0, &hx, &hy);
-    draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
-                   mauve.r, mauve.g, mauve.b, 0.18);
-
     cairo_new_path(cr);
     hw_path(cr, 0.0, t_end);
-    cairo_set_line_width(cr, 16);
+    cairo_set_line_width(cr, 12);
     cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
     cairo_stroke(cr);
 

i18n.c

@@ -1454,20 +1454,11 @@ void i18n_bind(GtkWidget *widget, const char *key, int kind) {
 }
 
 void refresh_welcome_heading(void) {
-    char *markup;
-
     if (!welcome_heading)
         return;
-    if (app_lang == LANG_EN)
+    gtk_label_set_text(GTK_LABEL(welcome_heading),
-        markup = g_strdup_printf(
+                       app_lang == LANG_EN ? "Welcome to maturita.C"
-            "Welcome to <span color=\"#%06x\">maturita.C</span>!",
+                                           : "Vítejte v maturita.C");
-            app_theme.accent);
-    else
-        markup = g_strdup_printf(
-            "Vítejte ve <span color=\"#%06x\">maturita.C</span>!",
-            app_theme.accent);
-    gtk_label_set_markup(GTK_LABEL(welcome_heading), markup);
-    g_free(markup);
 }
 
 void refresh_stats_ui(void);

maturita.h

@@ -883,9 +883,6 @@ gboolean on_window_key_pressed(GtkEventControllerKey *controller,
                                       GdkModifierType state,
                                       gpointer user_data);
 GtkWidget *build_welcome_page(void);
-void draw_node_halo(cairo_t *cr, double cx, double cy,
-                           double radius, double r, double g, double b,
-                           double alpha);
 void draw_finish_cell(GtkDrawingArea *area, cairo_t *cr,
                              int width, int height, gpointer data);
 void road_point(double t, double *ox, double *oy);

navigation.c

@@ -95,34 +95,42 @@ gboolean on_window_key_pressed(GtkEventControllerKey *controller,
 
 GtkWidget *build_welcome_page(void) {
     GtkWidget *box;
+    GtkWidget *icon;
     GtkWidget *heading;
-    GtkWidget *card;
+    GtkWidget *body;
     GtkWidget *button;
 
-    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 18);
+    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
     gtk_widget_set_halign(box, GTK_ALIGN_CENTER);
     gtk_widget_set_valign(box, GTK_ALIGN_CENTER);
     gtk_widget_set_margin_top(box, 40);
     gtk_widget_set_margin_bottom(box, 40);
 
+    icon = gtk_image_new_from_icon_name(ICON_NAME);
+    gtk_image_set_pixel_size(GTK_IMAGE(icon), 88);
+    gtk_widget_set_halign(icon, GTK_ALIGN_CENTER);
+    gtk_widget_set_margin_bottom(icon, 22);
+    gtk_box_append(GTK_BOX(box), icon);
+
     heading = gtk_label_new(NULL);
     welcome_heading = heading;
     gtk_widget_set_halign(heading, GTK_ALIGN_CENTER);
     gtk_widget_add_css_class(heading, "heading");
     gtk_box_append(GTK_BOX(box), heading);
 
-    card = gtk_label_new(NULL);
+    body = gtk_label_new(NULL);
-    i18n_bind(card, "welcome_body", 0);
+    i18n_bind(body, "welcome_body", 0);
-    gtk_label_set_justify(GTK_LABEL(card), GTK_JUSTIFY_CENTER);
+    gtk_label_set_justify(GTK_LABEL(body), GTK_JUSTIFY_CENTER);
-    gtk_label_set_wrap(GTK_LABEL(card), TRUE);
+    gtk_label_set_wrap(GTK_LABEL(body), TRUE);
-    gtk_label_set_max_width_chars(GTK_LABEL(card), 48);
+    gtk_label_set_max_width_chars(GTK_LABEL(body), 46);
-    gtk_widget_add_css_class(card, "card");
+    gtk_widget_set_margin_top(body, 10);
-    gtk_box_append(GTK_BOX(box), card);
+    gtk_widget_add_css_class(body, "welcome-body");
+    gtk_box_append(GTK_BOX(box), body);
 
     button = gtk_button_new();
     i18n_bind(button, "continue", 1);
     gtk_widget_set_halign(button, GTK_ALIGN_CENTER);
-    gtk_widget_set_margin_top(button, 6);
+    gtk_widget_set_margin_top(button, 28);
     gtk_widget_add_css_class(button, "btn-primary");
     gtk_box_append(GTK_BOX(box), button);
 

net.c

@@ -394,10 +394,8 @@ void net_adjust_notify(GtkAdjustment *adj, GParamSpec *ps,
 
 void net_render_rail_to(cairo_t *cr) {
     const double t_end = (double)(NET_UNITS - 1);
-    const Rgb mauve = color_from_hex(app_theme.accent);
     const Rgb rail = color_from_hex(app_theme.rail);
     const Rgb muted = color_from_hex(app_theme.subtext);
-    double hx, hy;
 
     cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
     cairo_paint(cr);
@@ -405,13 +403,9 @@ void net_render_rail_to(cairo_t *cr) {
     cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
     cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
 
-    net_point(0.0, &hx, &hy);
-    draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
-                   mauve.r, mauve.g, mauve.b, 0.18);
-
     cairo_new_path(cr);
     net_path(cr, 0.0, t_end);
-    cairo_set_line_width(cr, 16);
+    cairo_set_line_width(cr, 12);
     cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
     cairo_stroke(cr);
 

roadmap.c

@@ -4,19 +4,6 @@
 /* Roadmap page                                                       */
 /* ------------------------------------------------------------------ */
 
-void draw_node_halo(cairo_t *cr, double cx, double cy,
-                           double radius, double r, double g, double b,
-                           double alpha) {
-    cairo_pattern_t *grad;
-    grad = cairo_pattern_create_radial(cx, cy, 6.0, cx, cy, radius);
-    cairo_pattern_add_color_stop_rgba(grad, 0.0, r, g, b, alpha);
-    cairo_pattern_add_color_stop_rgba(grad, 0.55, r, g, b, alpha * 0.30);
-    cairo_pattern_add_color_stop_rgba(grad, 1.0, r, g, b, 0.0);
-    cairo_set_source(cr, grad);
-    cairo_paint(cr);
-    cairo_pattern_destroy(grad);
-}
-
 /* Draw the checkered "finish line" node: checkerboard behind the unit
  * number and the same lock glyph the locked units use. */
 void draw_finish_cell(GtkDrawingArea *area, cairo_t *cr,
@@ -236,13 +223,9 @@ void draw_rail(GtkDrawingArea *area, cairo_t *cr,
                       int width, int height, gpointer user_data) {
     const double t_lit = (double)(NUM_UNLOCKED - 1);
     const double t_end = (double)(NUM_UNITS - 1);
-    const double x0 = ROAD_MX;
+    const Rgb accent = color_from_hex(app_theme.accent);
-    const double x1 = (double)road_cw - ROAD_MX;
-    const Rgb mauve = color_from_hex(app_theme.accent);
-    const Rgb blue = color_from_hex(app_theme.accent3);
     const Rgb rail = color_from_hex(app_theme.rail);
     const Rgb muted = color_from_hex(app_theme.subtext);
-    double hx, hy;
 
     (void)area;
     (void)width;
@@ -255,41 +238,18 @@ void draw_rail(GtkDrawingArea *area, cairo_t *cr,
     cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
     cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
 
-    road_point((double)(NUM_UNLOCKED - 1), &hx, &hy);
-    draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
-                   mauve.r, mauve.g, mauve.b, 0.18);
-
     cairo_new_path(cr);
     road_path(cr, 0.0, t_end);
-    cairo_set_line_width(cr, 16);
+    cairo_set_line_width(cr, 12);
     cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
     cairo_stroke(cr);
 
     if (t_lit > 0.0) {
-        cairo_pattern_t *grad;
-
         cairo_new_path(cr);
         road_path(cr, 0.0, t_lit);
-
+        cairo_set_source_rgb(cr, accent.r, accent.g, accent.b);
-        grad = cairo_pattern_create_linear(x0, 0.0, x1, 0.0);
+        cairo_set_line_width(cr, 12);
-        cairo_pattern_add_color_stop_rgba(grad, 0.0,
+        cairo_stroke(cr);
-                                          mauve.r, mauve.g, mauve.b, 0.16);
-        cairo_pattern_add_color_stop_rgba(grad, 1.0,
-                                          blue.r, blue.g, blue.b, 0.16);
-        cairo_set_source(cr, grad);
-        cairo_set_line_width(cr, 34);
-        cairo_stroke_preserve(cr);
-        cairo_pattern_destroy(grad);
-
-        grad = cairo_pattern_create_linear(x0, 0.0, x1, 0.0);
-        cairo_pattern_add_color_stop_rgba(grad, 0.0,
-                                          mauve.r, mauve.g, mauve.b, 1.0);
-        cairo_pattern_add_color_stop_rgba(grad, 1.0,
-                                          blue.r, blue.g, blue.b, 1.0);
-        cairo_set_source(cr, grad);
-        cairo_set_line_width(cr, 16);
-        cairo_stroke_preserve(cr);
-        cairo_pattern_destroy(grad);
     }
 
     {

stats.c

@@ -45,6 +45,17 @@ void progress_for_units(int first, int n, ProgressSum *out) {
     }
 }
 
+/* GTK gives the progress node a minimum width, so a fraction of zero would
+ * still paint a short stub of accent colour. Mark those bars so the
+ * stylesheet can hide the fill entirely. */
+static void stats_set_fraction(GtkWidget *bar, double fraction) {
+    gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), fraction);
+    if (fraction > 0.0)
+        gtk_widget_remove_css_class(bar, "empty");
+    else
+        gtk_widget_add_css_class(bar, "empty");
+}
+
 void refresh_stats_ui(void) {
     ProgressSum all = {0};
     int pct;
@@ -77,9 +88,10 @@ void refresh_stats_ui(void) {
     gtk_label_set_text(GTK_LABEL(stats_ui.units_value), tmp);
     g_free(tmp);
 
-    gtk_progress_bar_set_fraction(
+    stats_set_fraction(stats_ui.overall_bar,
-        GTK_PROGRESS_BAR(stats_ui.overall_bar),
+                       all.total_ex > 0
-        all.total_ex > 0 ? (double)all.done_ex / (double)all.total_ex : 0.0);
+                           ? (double)all.done_ex / (double)all.total_ex
+                           : 0.0);
 
     for (int s = 0; s < NUM_SUBJECTS; s++) {
         GtkWidget *count = stats_ui.subj[s].count;
@@ -100,13 +112,13 @@ void refresh_stats_ui(void) {
             tmp = g_strdup_printf(tr("stats_ex_fmt"), sp.done_ex, sp.total_ex);
             gtk_label_set_text(GTK_LABEL(count), tmp);
             g_free(tmp);
-            gtk_progress_bar_set_fraction(
+            stats_set_fraction(bar,
-                GTK_PROGRESS_BAR(bar),
+                               sp.total_ex > 0
-                sp.total_ex > 0 ? (double)sp.done_ex / (double)sp.total_ex
+                                   ? (double)sp.done_ex / (double)sp.total_ex
                                    : 0.0);
         } else {
             gtk_label_set_text(GTK_LABEL(count), tr("stats_locked"));
-            gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), 0.0);
+            stats_set_fraction(bar, 0.0);
         }
     }
 
@@ -130,7 +142,7 @@ void refresh_stats_ui(void) {
         if (!unlocked) {
             gtk_widget_add_css_class(row, "locked");
             gtk_label_set_text(GTK_LABEL(count), tr("stats_locked"));
-            gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), 0.0);
+            stats_set_fraction(bar, 0.0);
             if (badge)
                 gtk_widget_set_visible(badge, FALSE);
             continue;
@@ -139,8 +151,7 @@ void refresh_stats_ui(void) {
         tmp = g_strdup_printf(tr("stats_ex_fmt"), d, u->n_ex);
         gtk_label_set_text(GTK_LABEL(count), tmp);
         g_free(tmp);
-        gtk_progress_bar_set_fraction(
+        stats_set_fraction(bar,
-            GTK_PROGRESS_BAR(bar),
                            u->n_ex > 0 ? (double)d / (double)u->n_ex : 0.0);
 
         if (complete) {
@@ -328,6 +339,9 @@ GtkWidget *build_stats_page(void) {
     summary = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 10);
     gtk_widget_add_css_class(summary, "stats-summary");
     gtk_widget_set_halign(summary, GTK_ALIGN_FILL);
+    /* Equal columns; hexpand alone only shares the leftover space, which
+     * leaves the cards at different widths. */
+    gtk_box_set_homogeneous(GTK_BOX(summary), TRUE);
     gtk_box_append(GTK_BOX(page), summary);
 
     gtk_box_append(GTK_BOX(summary),

subjects.c

@@ -125,8 +125,6 @@ void draw_sub_rail(GtkDrawingArea *area, cairo_t *cr,
                           int width, int height, gpointer user_data) {
     const double t_end = (double)(NUM_SUBJECTS - 1);
     const Rgb rail = color_from_hex(app_theme.rail);
-    const Rgb mauve = color_from_hex(app_theme.accent);
-    double hx, hy;
 
     (void)area;
     (void)width;
@@ -139,13 +137,9 @@ void draw_sub_rail(GtkDrawingArea *area, cairo_t *cr,
     cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
     cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
 
-    sub_point(0.0, &hx, &hy);
-    draw_node_halo(cr, hx, hy, SUB_BUBBLE * 1.05,
-                   mauve.r, mauve.g, mauve.b, 0.18);
-
     cairo_new_path(cr);
     sub_path(cr, 0.0, t_end);
-    cairo_set_line_width(cr, 14);
+    cairo_set_line_width(cr, 12);
     cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
     cairo_stroke(cr);
 }