Header: modernize h2 styles

demo/DemoPage.vala

@@ -4,6 +4,8 @@
  */
 
 public class DemoPage : Gtk.Box {
+    public string title { get; set; }
+
     public Gtk.Widget content {
         set {
             scrolled_window.child = value;
@@ -13,19 +15,36 @@ public class DemoPage : Gtk.Box {
     private Gtk.ScrolledWindow scrolled_window;
 
     construct {
-        var header = new Gtk.HeaderBar () {
-            show_title_buttons = false,
+        var header_label = new Granite.HeaderLabel ("") {
+            hexpand = true,
+            size = H2,
+            margin_top = 3,
+            margin_bottom = 3,
+            margin_start = 3
+        };
+
+        var header_box = new Granite.Box (HORIZONTAL) {
+            margin_top = 6,
+            margin_end = 6,
+            margin_bottom = 6,
+            margin_start = 6
+        };
+        header_box.append (header_label);
+        header_box.append (new Gtk.WindowControls (END) { valign = START });
+
+        var window_handle = new Gtk.WindowHandle () {
+            child = header_box
         };
-        header.add_css_class (Granite.STYLE_CLASS_FLAT);
-        header.pack_end (new Gtk.WindowControls (END) { valign = START });
 
         scrolled_window = new Gtk.ScrolledWindow () {
             hscrollbar_policy = NEVER,
             vexpand = true
         };
 
         orientation = VERTICAL;
-        append (header);
+        append (window_handle);
         append (scrolled_window);
+
+        bind_property ("title", header_label, "label");
     }
 }

demo/Views/BoxView.vala

@@ -5,9 +5,7 @@
 
 public class BoxView : DemoPage {
     construct {
-        var title_label = new Granite.HeaderLabel ("Granite.Box") {
-            size = H1
-        };
+        title = "Granite.Box";
 
         var single_header = new Granite.HeaderLabel ("Single Spaced") {
             secondary_text = "child_spacing = SINGLE"
@@ -85,7 +83,6 @@ public class BoxView : DemoPage {
             margin_start = 12,
             margin_end = 12
         };
-        vbox.append (title_label);
         vbox.append (single_container);
         vbox.append (double_container);
         vbox.append (linked_box);

demo/Views/ListsView.vala

@@ -5,9 +5,7 @@
 
 public class ListsView : DemoPage {
     construct {
-        var title_label = new Granite.HeaderLabel ("Lists") {
-            size = H1
-        };
+        title = "Lists";
 
         var card_title = new Granite.HeaderLabel ("Gtk.ListBox") {
             secondary_text = "This ListBox has \"Granite.CssClass.CARD\""
@@ -84,7 +82,6 @@ public class ListsView : DemoPage {
             margin_start = 12,
             margin_end = 12
         };
-        vbox.append (title_label);
         vbox.append (card_title);
         vbox.append (list_box);
         vbox.append (scrolled_title);

demo/Views/MapsView.vala

@@ -5,16 +5,18 @@
 
 public class MapsView : DemoPage {
     construct {
-        var title_label = new Granite.HeaderLabel ("Shumate.SimpleMap") {
-            size = H1
-        };
+        title = "Shumate.SimpleMap";
 
         var registry = new Shumate.MapSourceRegistry.with_defaults ();
 
         var simple_map = new Shumate.SimpleMap () {
             map_source = registry.get_by_id (Shumate.MAP_SOURCE_OSM_MAPNIK),
             overflow = HIDDEN,
-            vexpand = true
+            vexpand = true,
+            margin_top = 12,
+            margin_bottom = 12,
+            margin_start = 12,
+            margin_end = 12
         };
         simple_map.add_css_class (Granite.CssClass.CARD);
 
@@ -34,15 +36,6 @@ public class MapsView : DemoPage {
         map.add_layer (marker_layer);
         map.center_on (38.575764, -121.478851);
 
-        var vbox = new Granite.Box (VERTICAL, DOUBLE) {
-            margin_top = 12,
-            margin_bottom = 12,
-            margin_start = 12,
-            margin_end = 12
-        };
-        vbox.append (title_label);
-        vbox.append (simple_map);
-
-        content = vbox;
+        content = simple_map;
     }
 }

lib/Styles/Granite/Header.scss

@@ -29,16 +29,16 @@ header {
     }
 
     &.title-2 {
-        letter-spacing: -0.05rem;
-
         .heading {
-            font-weight: 300;
+            font-weight: 600;
             font-size: 18pt;
+            letter-spacing: -0.05rem;
         }
 
         .subtitle {
-            font-size: 1.2rem;
+            font-size: initial;
             font-weight: 400;
+            letter-spacing: initial;
             margin-top: -0.1em;
         }
     }
@@ -49,7 +49,7 @@ header {
         }
 
         .subtitle {
-            font-size: initial;
+            font-size: 0.95rem;
             font-weight: 400;
             margin-top: 0.1em;
         }